/* Swiper.js CDN styles */
@import url("https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css");

.swiper {
  width: 100%;
  max-width: 600px;
  height: 400px; /* Set a fixed height for all sliders */
  margin: 0 auto 32px auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  height: 100%;
}
.swiper-slide img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: auto;
}
.swiper-button-next,
.swiper-button-prev {
  color: rgba(0, 0, 0, 0.112) !important;
}
.swiper-pagination-bullet {
  background: #222;
}
.swiper-pagination-bullet-active {
  background: #b0b0b0 !important; /* muted medium light gray */
}
.swiper {
  position: relative;
}
.swiper-pagination {
  position: absolute !important;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  margin: 0;
  z-index: 10;
  text-align: center;
}
@media (max-width: 600px) {
  .swiper {
    height: 300px; /* Adjust for mobile if needed */
  }
  .swiper-pagination {
    bottom: 20px;
  }
}