/* basic Swiper layout so the slides actually slide */
.review-slider.swiper {
  overflow: hidden;
  width: 100%;
}

.review-slider .swiper-wrapper {
  display: flex;
}

.review-slider .swiper-slide {
  flex-shrink: 0;
  width: auto; /* Swiper will calculate widths */
}

/* optional: make arrows clickable */
.review-slider .swiper-button-prev,
.review-slider .swiper-button-next {
  cursor: pointer;
}
.swiper-slide{
    text-align:center;
}

/* Container centered on page */
.review-slider.swiper {
  position: relative;
  margin: 40px auto;   /* centers horizontally */
  padding: 30px 80px;  /* space for the arrows left/right */
  text-align: center;
  overflow: hidden;
}

/* Swiper core layout */
.review-slider .swiper-wrapper {
  display: flex;
}

.review-slider .swiper-slide {
  flex-shrink: 0;
  width: auto;              /* Swiper will size based on slidesPerView */
}



/* Arrows like the 2nd screenshot (big, left/right, vertically centered) */
.review-slider .swiper-button-prev,
.review-slider .swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 100%;
  margin-top: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background:#fff;
}

/* place them left/right of the slider */
.review-slider .swiper-button-prev {
  left: 0;
}

.review-slider .swiper-button-next {
  right: 0;
}

/* use simple chevron icons, bigger and darker */
.review-slider .swiper-button-prev::after,
.review-slider .swiper-button-next::after {
  font-size: 32px;
  color: #002e45;      /* match your brand color */
}

/* optional: change color on hover */
.review-slider .swiper-button-prev:hover::after,
.review-slider .swiper-button-next:hover::after {
  color: #000;
}