/* CSS from section stylesheet tags */
.swiper {
  width: 100%;
  height: auto;
  position: relative;
}

.swiper-slide {
  display: flex;
}

.swiper-slide img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.swiper-button-next, .swiper-button-prev {
  width: unset !important;
  aspect-ratio: 1 !important;
}

/* Hide navigation buttons by default */
.swiper-button-next,
.swiper-button-prev {
  display: none !important;
  width: 40px;
  height: 40px;
  background-color: #EC2F81;
  border-radius: 50%;
  z-index: 10;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* Ensure proper circle shape */
.swiper-button-next::after,
.swiper-button-prev::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  background-color: white;
}

.swiper-button-next::after {
  mask-image: url('data:image/svg+xml;utf8,<svg fill="white" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M7.05 4.55a.75.75 0 0 1 1.06 0l5.25 5.25a.75.75 0 0 1 0 1.06l-5.25 5.25a.75.75 0 0 1-1.06-1.06L11.19 10 7.05 5.86a.75.75 0 0 1 0-1.06z"/></svg>');
}

.swiper-button-prev::after {
  mask-image: url('data:image/svg+xml;utf8,<svg fill="white" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.95 4.55a.75.75 0 0 1 0 1.06L8.81 10l4.14 4.14a.75.75 0 0 1-1.06 1.06L6.64 10.8a.75.75 0 0 1 0-1.06l5.25-5.25a.75.75 0 0 1 1.06 0z"/></svg>');
}

/* Show arrows on desktop hover only */
@media (min-width: 768px) {
  .swiper:hover .swiper-button-next,
  .swiper:hover .swiper-button-prev {
    display: flex !important;
    align-items: center;
    justify-content: center;
    
  }
}

.swiper-pagination-bullet {
  background-color: #fff !important;
  opacity: 1 !important;
}

.swiper-pagination-bullet-active {
  opacity: 1 !important;
  background-color: #EC2F81 !important;
  height: 10px !important;
  width: 10px !important;
}