/* Container */
.my-swiper-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-bottom: 80px; /* space for dots */
}

/* Each slide */
.swiper-slide {
  flex: 0 0 25%;        /* 4 per view */
  position: relative;
  background-size: cover;
  background-position: center;
  min-height: 600px;    /* adjust height as needed */
}

/* Hover overlay */
.hover-overlay {
  position: absolute;
  inset: 0;
  background: rgba(111,27,135,0.7);
  opacity: 0;
  transition: opacity .3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hover-slide:hover .hover-overlay {
  opacity: 1;
}

/* Overlay text */
.hover-text {
    color: #CDFC31;
    font-size: 1.8rem;
    text-align: center;
    padding: 0 1rem;
    font-family: 'Poppins';
    font-weight: 500;
    line-height: 2rem;
    margin-bottom: 0rem !important;
}

/* Controls wrapper: center everything in one row */
.my-swiper-container .swiper-controls {
  position: absolute;
  bottom: 10px;                /* adjust distance from slides */
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;     /* center all children */
  align-items: center;
  gap: 20px;                   /* space between arrow/dots/arrow */
  z-index: 10;
}

/* Position arrows/dots inside the controls container */
.my-swiper-container .swiper-button-prev,
.my-swiper-container .swiper-button-next {
position: static;
    transform: none;
    width: 36px;
    height: 36px;
    background: rgb(111 27 135 / 0%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #632563;
    font-size: 1.2rem;
    cursor: pointer;
    border: 1px solid #632563;
    margin-top: 5px;
}

/* Pagination bullets will be children of .swiper-controls now */
.my-swiper-container .swiper-pagination {
  position: static;
  width: auto;
  margin: 0;
  display: flex !important;    /* ensure bullets are inline */
  gap: 6px;
}

/* Style bullets as before */
.my-swiper-container .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: #632563;
  opacity: 1;
  border-radius: 50%;
  transition: background .3s ease;
}
.my-swiper-container .swiper-pagination-bullet-active {
  background: #C8E565;
}
.swiper-button-next:after, .swiper-button-prev:after{
    font-size: 12px;
    font-weight: bold;
}

/* Responsive: 2 per view on tablet, 1 per view on mobile */
@media (max-width: 1023px) {
  .swiper-slide { flex: 0 0 50%; }
}
@media (max-width: 767px) {
  .swiper-slide { flex: 0 0 100%; }
}