.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  display: flex;
  align-items: center;
}

.hero-section {
  position: relative;
  overflow: hidden;
}

.swiper-button-prev,
.swiper-button-next {
  color: #000; /* Button color */
}

.swiper-pagination-bullet {
  background: #000; /* Pagination bullet color */
}


.swiper-slide {
  opacity: 0 !important; /* Hide all slides by default */
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; /* Smooth transitions */
}

.swiper-slide-active {
  opacity: 1 !important; /* Fully visible for the active slide */
  z-index: 10; /* Bring active slide to the front (if needed) */
}

.swiper-slide-prev,
.swiper-slide-next {
  opacity: 0; /* Ensure next and previous slides are hidden */
  z-index: 1; /* Place them behind the active slide */
}