/* ============================================================
   Testimonial Section Enhancements
   Scope: .section_home_11_testimonial on Home (EN + FR)

   Design rule: every visual effect (hover glow, active state, etc.)
   must live INSIDE the button / dot's own box. The slider component
   has overflow:hidden (it has to, to clip the next slide), so any
   outer box-shadow extending past the component edges gets sharply
   clipped — which renders as the visible vertical / horizontal line
   the user reported. We therefore use inset shadows + inner radial
   gradients only, and keep transforms small so the scaled button
   never crosses the component edge.
   ============================================================ */

/* ---- 1. Push the third slide fully off-screen (geometry fix) ----
   Mask widened from 50% to 50.5% so slide 3 starts at 101% of the
   component (past the clip edge). Slide 2 loses ~1% of its empty
   padding-right area, not its content. Webflow uses 100% mask width
   below 992px (single card), so we restore that for mobile. */
.section_home_11_testimonial .home_11_testimonial_mask {
  width: 50.5%;
}
@media (max-width: 991px) {
  .section_home_11_testimonial .home_11_testimonial_mask {
    width: 100%;
  }
}


/* ---- 2. Pagination arrows: brand-aligned, inner-effect only ---- */
.section_home_11_testimonial .home_11_testimonial_arrow-2 {
  background-color: rgba(11, 15, 25, 0.85);
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0)
  );
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  width: 3.25rem;
  height: 3.25rem;
  cursor: pointer;
  overflow: hidden;              /* keep the inner gradient inside the circle */
  z-index: 4;
  /* Move inward 1rem so the 1.04 hover-scale stays inside the component
     and doesn't get clipped by the component's overflow:hidden. */
  inset: auto 1rem 1rem auto;
  /* INSET shadow only — never extends past the button's own bounding box. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition:
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 0.3s ease,
    background-color 0.3s ease,
    box-shadow 0.4s ease;
}

/* Inner radial "glow" — lives entirely inside the button on hover */
.section_home_11_testimonial .home_11_testimonial_arrow-2::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(37, 99, 209, 0.55) 0%,
    rgba(37, 99, 209, 0.10) 55%,
    rgba(37, 99, 209, 0) 80%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.section_home_11_testimonial .home_11_testimonial_arrow-2:hover {
  background-color: rgba(37, 99, 209, 0.22);
  border-color: rgba(37, 99, 209, 0.70);
  transform: translateY(-2px) scale(1.04);
  /* All shadows are INSET — they never cross the button edge. */
  box-shadow:
    inset 0 0 18px rgba(37, 99, 209, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.section_home_11_testimonial .home_11_testimonial_arrow-2:hover::before {
  opacity: 1;
}

.section_home_11_testimonial .home_11_testimonial_arrow-2:active {
  transform: translateY(0) scale(0.95);
  transition-duration: 0.1s;
  background-color: rgba(37, 99, 209, 0.32);
  border-color: rgba(37, 99, 209, 0.95);
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.30),
    inset 0 0 22px rgba(37, 99, 209, 0.40);
}

.section_home_11_testimonial .home_11_testimonial_arrow-2:focus-visible {
  outline: 2px solid rgba(37, 99, 209, 0.85);
  outline-offset: 2px;
}

/* ---- 3. Arrow icon: white, drifts in its arrow direction on hover ---- */
.section_home_11_testimonial .home_11_testimonial_arrow-icon-2 {
  color: #ffffff;
  width: 1.05rem;
  height: 1.05rem;
  transition:
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    color 0.3s ease;
  position: relative;
  z-index: 2;
}

.section_home_11_testimonial .home_11_testimonial_arrow-2.is-left:hover .home_11_testimonial_arrow-icon-2 {
  transform: translateX(-3px);
}

.section_home_11_testimonial .home_11_testimonial_arrow-2.w-slider-arrow-right:hover .home_11_testimonial_arrow-icon-2 {
  transform: translateX(3px);
}

/* Keep 4rem gap between the two buttons (left button shifted further left) */
.section_home_11_testimonial .home_11_testimonial_arrow-2.is-left {
  right: 5rem; /* 1rem inset + 4rem gap */
}


/* ---- 4. Pagination dots: pill active state, no outer glow ---- */
.section_home_11_testimonial .home_11_testimonial_slide-nav {
  height: auto;
  padding-top: 0;
  font-size: 0;
  text-align: left;
  /* Move 1rem in from the left so the active dot's pill doesn't sit on
     the component's clip edge. */
  inset: auto auto 1.4rem 1rem;
  z-index: 3;
}

.section_home_11_testimonial .home_11_testimonial_slide-nav .w-slider-dot {
  background: rgba(255, 255, 255, 0.18);
  width: 0.5rem;
  height: 0.5rem;
  margin: 0 4px;
  border-radius: 999px;
  /* No outer shadow */
  box-shadow: none;
  cursor: pointer;
  transition:
    width 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.3s ease,
    transform 0.3s ease;
}

.section_home_11_testimonial .home_11_testimonial_slide-nav .w-slider-dot:hover {
  background: rgba(37, 99, 209, 0.7);
  transform: scale(1.2);
}

.section_home_11_testimonial .home_11_testimonial_slide-nav .w-slider-dot.w-active {
  width: 1.5rem;
  background: #2563d1;
  /* No outer glow — the gradient pill is already visually distinct. */
  box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.18);
}

.section_home_11_testimonial .home_11_testimonial_slide-nav .w-slider-dot:focus {
  outline: 2px solid rgba(37, 99, 209, 0.65);
  outline-offset: 2px;
  box-shadow: none;
}


/* ---- 5. Mobile tweaks (≤767px) ---- */
@media (max-width: 767px) {
  .section_home_11_testimonial .home_11_testimonial_arrow-2 {
    width: 2.85rem;
    height: 2.85rem;
  }
  .section_home_11_testimonial .home_11_testimonial_arrow-2.is-left {
    right: 4.5rem;
  }
  .section_home_11_testimonial .home_11_testimonial_slide-nav {
    inset: auto auto 1rem 1rem;
  }
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .section_home_11_testimonial .home_11_testimonial_arrow-2,
  .section_home_11_testimonial .home_11_testimonial_arrow-icon-2,
  .section_home_11_testimonial .home_11_testimonial_arrow-2::before,
  .section_home_11_testimonial .home_11_testimonial_slide-nav .w-slider-dot {
    transition: none;
  }
}
