/*  testimonial / review slider css start */
.white-background h2 {
    color: #000 !important;
}
.white-background .stars {
    color: #FFA83A !important;
    font-size: 20px;
}
section.reviews-carousel.white {
    background: #ebeff1;
}
section.wrap.white-background, section.wrap.blue-background {
    background: #EBEFF1;
    font-family: 'Plus Jakarta Sans';
}
body .white-background .small {
    color: #062135 !important;
} 
 
  .social-verification {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
    .blue-background h2 {
    color: #ffffff !important;
}
    .blue-background  {
    background-color: #062135!important;
}
    .rating .small {
    color: #ffffff !important;
}
    article.card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
p.small.other {
    font-weight: 500 !important;
    font-size: 16px !important;
}

.testi_text {
    color: #273C4B;
    font-size: 13px;
    line-height: 20px;
}

    .rating {
  flex: 0 0 280px;
  background: transparent;
}
.rating .stars {
  color: #FFA83A;
  font-size: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
body .rating .small {
  color: #0A314D !important;
  font-size: 13px;
  font-weight: 700;
}
p.small {
  font-size: 16px !important;
  color: #0A314D;
  font-weight: 400 !important;
}
.rating a {
  text-decoration: underline;
  color: var(--brand);
}
/* Section Wrapper */
section.wrap {
  padding: 40px 10px;
}
body .blue-background .rating .small {
    color: white !important;
}
.blue-background span.small.rated {
    display: none;
}
.row {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1440px;
  margin: auto;
  gap: 20px;
}
.rating h2 {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 700;
  color: #0A314D;
  line-height: 36px;
  font-family: Plus Jakarta Sans, sans-serif !important;
}
.head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}
.testimonial-card .name {
  margin: 0;
  font-size: 18px;
  color: #062135;
  font-weight: 700;
}
.testimonial-card .date {
  font-size: 14px;
  color: #273C4B;
  margin-top: 3px;
  margin-bottom: 0px;
}
.review-stars {
  color: #FFA83A !important;
  margin-top: 6px;
}
.testimonial-card .highlight {
  font-size: 16px;
  color: #0A314D;
  font-weight: 700;
  margin: 4px 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
}
.verify {
    display: flex;
    font-weight: 700;
    color: #0A314D;
    font-size: 16px;
    margin-top: 8px;
    align-items: center;
    gap: 4px;
}
/* ===================== TESTIMONIAL SLIDER CSS (UPDATED) ===================== */
.testimonial-slider {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Expose shared vars on the slider container */
#testimonial-slider {
  --slides-visible: 3;   /* desktop default */
  --gap: 20px;           /* spacing between cards */
  position: relative;
  overflow: hidden;
  flex: 1;
}

.testimonial-track {
  display: flex;
  align-items: stretch;
  gap: var(--gap, 20px);
  will-change: transform;
  transition: transform 420ms ease;
}

/* Key fix: subtract total gap width before dividing by visible columns */
.testimonial-card {
  flex: 0 0 calc(
    (100% - (var(--gap, 20px) * (var(--slides-visible) - 1)))
    / var(--slides-visible)
  );
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Mobile: keep 1 full + a peek (1.8) */
@media (max-width: 767.98px) {
  
  section.wrap {
    /* padding: 20px !important; */
    padding-bottom: 0px !important;
}

 .row { flex-direction: column; }
.rating {
  flex: 0 0 0px;
}
  #testimonial-slider { --slides-visible: 1; }
.reviews-carousel{
display: block !important;
}
  .testimonial-slider {
    display: none;
}
      .highlight {
        font-size: 16px;
        font-weight: 700;
        display: flex;
        align-content: center;
        align-items: center;
        gap: 8px;
    }
}


/* Desktop/tablet: exactly 3 full cards (already default above) */
@media (min-width: 768px) {
  #testimonial-slider { --slides-visible: 3; }
}

/* Nav buttons */
.testimonial-nav {
    border: none;
    background: #fff;
    color: #062135;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.testimonial-nav:focus {
  outline: 2px solid #000;
  outline-offset: 2px;
}

/* While dragging: disable transition for smooth feel */
#testimonial-slider.dragging .testimonial-track {
  transition: none;
}


/* ====== CAROUSEL LAYOUT ====== */
  .reviews-carousel {
    --peek: 0.20;   /* 20% of viewport remains for the next card (desktop & mobile) */
    --gap: 16px;    /* space between cards */
    padding: 16px;
  }

  .rc-viewport {
    overflow: hidden;
    position: relative;
  }

  .rc-track {
    display: flex;
    gap: var(--gap);
    will-change: transform;
    transition: transform 400ms ease;
    touch-action: pan-y;
  }

  /* Card occupies (1 - peek) of the viewport width.
     With 20% peek, each card = 80% viewport. */
  .rc-card {
    flex: 0 0 calc((1 - var(--peek)) * 100%);
    background: #fff;
    border: 1px solid #e9e9ee;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 6px 16px rgba(2,8,23,0.06);
  }

  /* ====== CONTENT STYLES (renamed everything) ====== */
  .rc-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
  }
  .rc-avatar {
    width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  }
  .rc-meta {
    line-height: 1.15;
  }
  .rc-name { font-weight: 700; margin: 0; }
  .rc-date { font-size: 12px; opacity: 0.7; }
  .rc-stars { font-size: 14px; letter-spacing: 1px; }

  .rc-highlight {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f2f8ff;
    color: #0b5fff;
    padding: 8px 10px;
    border-radius: 10px;
    font-weight: 600;
    margin: 6px 0 10px;
  }
  .rc-badge { width: 18px; height: 18px; object-fit: contain; }

  .rc-text { margin: 0 0 12px; }

  .rc-proof {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .rc-verify {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
  }
  .rc-verify img { width: 18px; height: 18px; object-fit: contain; }
  .rc-social { width: 92px; height: auto; object-fit: contain; opacity: 0.9; }

  /* Dragging feedback (disable transition while dragging for smoothness) */
  .rc-viewport.is-dragging .rc-track { transition: none; }

  /* Optional: nicer overscroll feeling on iOS */
  .rc-viewport { -webkit-overflow-scrolling: touch; }


.reviews-carousel{
display: none;
}