/** Shopify CDN: Minification failed

Line 121:0 Unexpected "}"

**/
/* Wrapper for the carousel section */
.carousel-wrapper {
  padding: 20px 0; /* Slight padding above and below the section */
  background-color: white;
  height: auto; /* Allow height to adjust based on content */
}

/* Title styling */
.carousel-title {
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
  padding: 10px 0; 
}

/* Carousel container styling */
.swiper-container {
  width: 100%;
  position: relative;
  overflow: hidden;
  margin: auto;
  height: 100px; /* Set a fixed height for the carousel */
}

/* Wrapper for slides */
.swiper-wrapper {
  display: flex;
  transition: transform 0.3s ease-in-out;
  margin: 0; /* Remove any margin between slides */
}

/* Each slide */
.swiper-slide {
  flex: 0 0 auto; /* Prevent the slides from growing or shrinking */
  margin: 0; /* Ensure no margin between slides */
  padding: 0; /* Ensure no padding */
  height: 100px; /* Limit slide height to 100px */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}

/* Images in slides */
.swiper-slide img {
  width: 100%; /* Ensure the image takes up full width */
  height: 100%; /* Ensure the image takes up full height */
  object-fit: cover; /* Scale the image without distortion */
  display: block; /* Remove inline-block whitespace */
}

/* Optional: Navigation buttons styling */
.swiper-button-next,
.swiper-button-prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  color: #fff;
  z-index: 10;
  cursor: pointer;
  transition: background 0.3s ease;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  background: rgba(0, 0, 0, 0.6);
}

.swiper-button-next {
  right: 10px;
}

.swiper-button-prev {
  left: 10px;
}


/* Optional: Adjust spacing for smaller screens */
@media (max-width: 768px) {
  .swiper-slide {
    flex: 0 0 180px; /* Increase the width for smaller screens */
  }

  .swiper-slide img {
    width: 180px; /* Slightly larger image on smaller screens */
    height: auto; /* Maintain aspect ratio */
  }

  .swiper-button-next,
  .swiper-button-prev {
    width: 30px; /* Increase button size on mobile */
    height: 30px;
  }
}

@media (max-width: 480px) {
  .swiper-slide {
    flex: 0 0 220px; /* Even bigger size on very small screens */
  }
 

  .swiper-slide img {
    width: 220px; /* Adjust image width */
    height: auto;
  }

 
  }
}