/** Shopify CDN: Minification failed

Line 179:8 Expected identifier but found whitespace
Line 179:10 Unexpected "{"
Line 179:19 Expected ":"
Line 188:8 Expected identifier but found whitespace
Line 188:10 Unexpected "{"
Line 188:19 Expected ":"

**/
.courses {
  margin: 20px auto;
}
.courses .section-header--content {
  color: #fff;
}
#main-content {
  background: #000;
  color: #fff;
}
.section-header {
  margin-bottom: 10px;
}
.section-header h2 {
  font-size: 1.25rem;
  color: #fff;
}
.flickity-prev-next-button{width:30px!important;height:30px!important}
.course-container{position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent, black 75px, black calc(100% - 75px), transparent);
  mask-image: linear-gradient(to right, transparent, black 75px, black calc(100% - 75px), transparent);

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
overflow: hidden!important;
  position: relative;padding: 30px 0;
                 }

.courses .product-grid {
  /* display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; */
  gap: 16px;
  padding: 0;
  margin: 0 30px !important;
  list-style: none;
  overflow: visible !important;margin:10px;display:block;
}
.courses .product-grid li {
  width: 208px;
  min-width: 15%;
  position: relative;
  justify-content: center;padding:15px;
  /* scale:0.8; */
  flex:none

}

.slider-fade-left,
.slider-fade-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px; /* Adjust width for stronger fade */
  pointer-events: none;
  z-index: 10;
}



.flickity-prev-next-button{width:28px;}
.flickity-prev-next-button,.flickity-prev-next-button:hover{background: transparent!important;}
.flickity-prev-next-button .arrow{fill:#fff!important}
.flickity-prev-next-button.previous{left:0!important}
.flickity-prev-next-button.next{right:0!important}
.flickity-viewport {
  overflow: visible !important;


}

@media (max-width: 768px) {
  .courses .product-grid li {
    width: calc(50% - 10px);
    height: auto;
    /* min-height: 300px; */
  }
}
.product-card {
  width: 100%;
  height: 100%;
  position: relative;
  text-align: center;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
              box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  background-color: #f0f0f0;
  margin-bottom: 0 !important;
}
.product-card:hover {
  transform: scale(1.25);
  z-index: 10;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.product-card .product-featured-image {
  margin-bottom: 0 !important;
  width: 100%;
  height: 100%;
  position: relative;
}
.product-card .product-featured-image-link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  text-decoration: none;
}
.product-card .product-primary-image,
.product-card .product-hover-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease-in-out;
  border-radius: inherit;
}
.product-card .product-primary-image {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 1;
}
.product-card .product-hover-video {
  opacity: 0;
  visibility: hidden;
  z-index: 2;
}
.product-card:hover .product-primary-image {
  opacity: 0;
  visibility: hidden;
}
.product-card:hover .product-hover-video.has-video {
  opacity: 1;
  visibility: visible;
}
.product-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  height: auto;
  width: 100%;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0) 100%);
  color: #fff;
  display: flex;
  align-items: flex-end;
  padding: 15px;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) 0.1s,
              transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) 0.1s;
  z-index: 5;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
.product-card:hover .product-card-overlay {
  opacity: 1;
  transform: translateY(0);
}
.product-card-overlay .product-title {
  font-size: 0.8rem;
  font-weight: bold;
  line-height: 1.3;
  text-align: left;
  color: {{ section.settings.txt_color | default: '#ffffff' }};
}
.courses.text-left .product-card-info {
  text-align: left;
}
.courses.text-right .product-card-info {
  text-align: right;
}
.courses .section-header--content h2 {
  color: {{ section.settings.txt_color | default: '#333333' }};
  text-align: center;
  margin-bottom: 30px;
}
.courses .thb-placeholder svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
  @media screen and (min-width: 768px){
  .section-header {

    padding-left: 3rem;
}

.flickity-prev-next-button{display: none}


}