/** Shopify CDN: Minification failed

Line 17:2 Unexpected "#"
Line 17:4 Unexpected "{"
Line 17:13 Expected ":"
Line 17:21 Expected identifier but found "{"
Line 17:22 Unexpected "{"
Line 17:31 Expected ":"
Line 22:2 Unexpected "#"
Line 22:4 Unexpected "{"
Line 22:13 Expected ":"
Line 26:2 Unexpected "#"
... and 36 more hidden warnings

**/
/* Add your CSS styles here using the section ID */
  #{{ section.id }} .{{ section.id }}-video-slider {
    width: 100%;
    overflow: hidden;
  }

  #{{ section.id }} .swiper-container {
    overflow: hidden;
  }

  #{{ section.id }} .swiper-slide {
    box-sizing: border-box;
    padding-right: 20px;
    position: relative;
  }

  #{{ section.id }} video {
    width: 100%;
    height: auto;
    border-radius: 15px;
    transition: filter 0.3s ease;
  }

  /* Shadow-like effect on hover */
  #{{ section.id }} .swiper-slide:hover video {
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 1));
  }

  /* Calculate slide width based on the number of videos for desktop */
  @media (min-width: 576px) {
    {% assign videos_desktop = section.settings.videos_desktop | default: 2 %}
    {% assign desktop_slide_width = 100 | divided_by: videos_desktop %}
    #{{ section.id }} .swiper-slide {
      width: {{ desktop_slide_width }}%;
    }
  }

  /* Mobile layout */
  @media (max-width: 575px) {
    {% assign videos_mobile = section.settings.videos_mobile | default: 4 %}
    {% assign mobile_slide_width = 100 | divided_by: videos_mobile %}
    #{{ section.id }}.swiper-slide {
      width: {{ mobile_slide_width }}%;
      padding-right: 10px; /* Adjust spacing for mobile */
    }
  }

  /* Loader styles */
/* Loader styles with no background */
#{{ section.id }} .video-loader {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

#{{ section.id }} .video-loader::before {
  content: "";
  border: 4px solid transparent; /* Transparent border */
  border-top: 4px solid #794937; /* Brown color border on top for the spinning effect */
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 2s linear infinite;
}


/* Keyframes for the spinning animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}