/* =========================================
1. GLOBAL & SHARED STYLES
========================================= */
.testimonial-variation-l2 .heading {
  padding-bottom: 61px;
}

.testimonial-variation-l2 .heading h2 {
  margin: 0px;
  font-weight: 400;
  font-size: 40px;
  line-height: 120%;
  letter-spacing: 0%;
  text-align: center;
}

.testimonial-variation-l2 .heading h2 span {
  font-weight: 700;
  font-style: Italic;
}
.testimonial-variation-l2 .testimonial-varation { padding: 40px 0; overflow: hidden; }
.testimonial-variation-l2 .content-wrapper { max-width: 1200px; margin: 0 auto; position: relative; }

/* Gradient Border Logic for all cards - No changes to design */
.testimonial-variation-l2 .glide-upper .glide__slide .main-feature-card,
.testimonial-variation-l2 .glide-lower .glide__slide .sub-card,
.testimonial-variation-l2 a.read-more-btn {
  border: 1px solid transparent;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth movement logic */
}

.testimonial-variation-l2 .glide-upper .glide__slide .main-feature-card,
.testimonial-variation-l2 .glide-lower .glide__slide .sub-card {
  border-radius: 17px;
}

/* Badge & Typography */
.testimonial-variation-l2 .badge {
  display: inline-block; font-weight: 700; font-size: 16px;
  padding: 7px 29px; 
  border-radius: 20px; margin-bottom: 34px; width: max-content;
}

.testimonial-variation-l2 a.read-more-btn {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 10px;
  font-weight: 400;
  font-size: 16px;
  padding: 10px 28px;
  text-decoration: none;
  border-radius: 50px;

  /* 1. Create a transparent border to act as a container */
  border: 2px solid transparent;

  /* 3. Tell the browser where each layer should stop */
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* =========================================
LEFT FADE OVERLAY
========================================= */
/* .testimonial-variation-l2 .glide-upper::before,
.testimonial-variation-l2 .glide-lower::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 230px;
height: 100%;
z-index: 3;
pointer-events: none;
background: linear-gradient(90deg, #ECECEC 0%, rgba(236, 236, 236, 0) 100%);
} */

/* =========================================
RIGHT FADE OVERLAY
========================================= */
/* .testimonial-variation-l2 .glide-upper::after,
.testimonial-variation-l2 .glide-lower::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 230px;
height: 100%;
z-index: 3;
pointer-events: none;
background: linear-gradient(270deg, #ECECEC 0%, rgba(236, 236, 236, 0) 100%);
} */
.testimonial-variation-l2 .lower-con, .upper-con,
.testimonial-variation.l2-testomonial {
  position: relative;
}
.testimonial-variation.l2-testomonial::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 356px;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg, #ECECEC 0%, rgba(236, 236, 236, 0) 100%);
}

/* =========================================
RIGHT FADE OVERLAY
========================================= */
.testimonial-variation.l2-testomonial::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 356px;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(270deg, #ECECEC 0%, rgba(236, 236, 236, 0) 100%);
}




/* =========================================
2. UPPER SLIDER (Featured Card)
========================================= */
.testimonial-variation-l2 .glide-upper .glide__slide { 
  display: flex; height: auto; padding-bottom: 0px; 
  opacity: 1; /* Inactive cards fade */ 
  transition: opacity 0.6s ease;
}
.testimonial-variation-l2 .upper-con li.glide__slide.glide__slide--active { padding-bottom: 13px; }

.testimonial-variation-l2 .glide-upper .glide__slide .main-feature-card {
  padding: 10px;
}
.testimonial-variation-l2 .glide-upper .glide__slide--active { opacity: 1; } /* Focus on center */

.testimonial-variation-l2 .glide-upper .main-feature-card {
  display: flex; flex-direction: column; min-height: 427px; width: 100%;
}

.testimonial-variation-l2 .glide-upper .card-left-img { height: 200px; flex: none; overflow: hidden; }
.testimonial-variation-l2 .glide-upper .card-left-img img { 
  width: 100%; height: 100%; object-fit: cover; border-radius: 15px 19px 19px 15px; 
}

.testimonial-variation-l2 .glide-upper .card-right-content { flex: 1; padding: 20px; display: flex; flex-direction: column; }
.testimonial-variation-l2 .glide-upper .card-footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; }

/* Active State Logic - Horizontal Layout */
.testimonial-variation-l2 .glide-upper .glide__slide--active .main-feature-card { 
  flex-direction: row; transform: scaleY(0.98); 
}
.testimonial-variation-l2 .glide-upper .glide__slide--active .card-left-img { flex: 1; height: auto; }
.testimonial-variation-l2 .glide-upper .glide__slide--active .card-left-img img { height: 100%; max-height: 550px; }
.testimonial-variation-l2 .glide-upper .glide__slide--active .card-right-content { padding: 40px; }

/* Upper Typography */
.testimonial-variation-l2 .upper-con h2.main-title, .testimonial-variation-l2 .upper-con p { font-size: 28px; font-weight: 400; line-height: 1.2; margin: 0; }
.testimonial-variation-l2 .upper-con p { margin-bottom: 10px; }
.testimonial-variation-l2 .upper-con p span { font-weight: 700; }
.glide-lower p.sub-title span {
  font-weight: 700;
  font-style: Italic;
}
.testimonial-variation-l2 .glide-upper .card-footer span.author-name {
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  text-transform: uppercase;
}
/* =========================================
3. LOWER SLIDER (Multi-Card Sync)
========================================= */
.testimonial-variation-l2 .glide-lower .glide__slide { 
  display: flex; height: auto; padding-top: 25px; 
  opacity: 1; /* Smooth fade logic */
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Logic: Active cards in the viewport (assuming 3 per view) */
.testimonial-variation-l2 .glide-lower .glide__slide--active,
.testimonial-variation-l2 .glide-lower .glide__slide--active + .glide__slide,
.testimonial-variation-l2 .glide-lower .glide__slide--active + .glide__slide + .glide__slide {
  opacity: 1;
}

.testimonial-variation-l2 .glide-lower .sub-card {
  display: flex; flex-direction: row; align-items: center; min-height: 150px; 
  width: 100%; padding: 10px; overflow: visible;
}

.testimonial-variation-l2 .glide-lower .sub-card-img { width: 50%; height: 100%; overflow: hidden; border-radius: 15px; }
.testimonial-variation-l2 .glide-lower .sub-card img { width: 100%; height: 100%; object-fit: cover; }
.testimonial-variation-l2 .glide-lower .sub-card-body { width: 100%; padding: 30px 20px; display: flex; flex-direction: column; flex-grow: 1; }

/* Lower Active Scaling Logic */
.testimonial-variation-l2 .glide-lower .glide__slide--active .sub-card,
.testimonial-variation-l2 .glide-lower .glide__slide--active + .glide__slide .sub-card,
.testimonial-variation-l2 .glide-lower .glide__slide--active + .glide__slide + .glide__slide .sub-card {
  flex-direction: column; margin-top: -18px; height: calc(100% + 15px) !important; z-index: 10;
}

.testimonial-variation-l2 .glide-lower .glide__slide--active .sub-card-img,
.testimonial-variation-l2 .glide-lower .glide__slide--active + .glide__slide .sub-card-img,
.testimonial-variation-l2 .glide-lower .glide__slide--active + .glide__slide + .glide__slide .sub-card-img {
  width: 100%; height: 180px;
}

/* Lower Typography */
.testimonial-variation-l2 .glide-lower .sub-subtitle { font-size: 18px; margin-bottom: 5px; }
.testimonial-variation-l2 .glide-lower p.sub-title { font-size: 28px; line-height: 1.2; margin-bottom: 20px; flex-grow: 1; }


.testimonial-variation-l2 .arrow-sec {
  display: flex;
  gap: 15px;
  justify-content: center;
  padding-bottom: 60px;
}

/* Arrow Button - Default */
.testimonial-variation-l2 .arrow-sec button {
  width: 34px;
  height: 34px;
  padding: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 100%;
  border: 3px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(180deg, #3F3C8D 0%, #0A47AE 100%) border-box;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  transition: all 0.3s ease;
}

/* Arrow Button - Hover */
.testimonial-variation-l2 .arrow-sec button:hover {
  background: linear-gradient(180deg, #3F3C8D 0%, #0A47AE 100%);
  border: 3px solid transparent;
  transform: scale(1.36);
}

/* Arrow SVG - Hover color */
.testimonial-variation-l2 .arrow-sec button:hover svg path {
  fill: #ECECEC;
}

/* =========================================
4. RESPONSIVE & FIXES
========================================= */
@media only screen and (max-width: 850px) {
  .testimonial-variation-l2 .glide-upper .glide__slide--active .main-feature-card { flex-direction: column !important; height: auto !important; min-height: auto !important; }
  .testimonial-variation-l2 .glide-upper .glide__slide--active .card-left-img { width: 100% !important; height: 180px !important; flex: none !important; }
  .testimonial-variation-l2 .glide-upper .glide__slide--active .card-right-content { padding: 20px !important; }
  .testimonial-variation-l2 .glide-lower .glide__slide--active .sub-card { margin-top: 0; height: auto !important; }
  .testimonial-variation-l2 .glide-upper::before, .glide-upper::after, .glide-lower::before, .glide-lower::after { width: 60px; }
  .testimonial-variation-l2 .glide-lower .glide__slide--active::before {
    top: 16px !important;
  }
  .testimonial-variation-l2 .glide-upper .card-footer {
    flex-wrap: wrap;
    gap: 20px;
  }
}

/* Prevents slider items from jumping during layout calculation */
.testimonial-variation-l2 .glide__slides { display: flex !important; align-items: stretch !important; }







/* L2 */


.testimonial-variation-l2 .glide-upper .glide__slide {
  direction: ltr;
}

.testimonial-variation-l2 .glide-lower .glide__slide {
  direction: ltr;
}




/* =========================================
UPPER SLIDER CARD BACKGROUNDS
========================================= */

/* All upper cards (default) */
.testimonial-variation-l2 .glide-upper .glide__slide .main-feature-card {
  border: 1px solid transparent;
  border-radius: 17px;
  background: 
    linear-gradient(180deg, #0A47AE 0%, #007FE8 100%) padding-box,
    linear-gradient(180deg, #0A47AE 0%, #007FE8 100%) border-box;
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* Upper active card */
.testimonial-variation-l2 .glide-upper .glide__slide--active .main-feature-card {
  background: 
    linear-gradient(180deg, #0A47AE 0%, #007FE8 100%) padding-box,
    linear-gradient(180deg, #0A47AE 0%, #007FE8 100%) border-box;
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* Upper card LEFT of active */
.testimonial-variation-l2 .glide-upper .glide__slide--active + .glide__slide .main-feature-card {
  background: 
    linear-gradient(180deg, #3F3C8D 0%, #00BAAA 100%) padding-box,
    linear-gradient(180deg, #3F3C8D 0%, #00BAAA 100%) border-box;
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* =========================================
LOWER SLIDER CARD BACKGROUNDS
========================================= */

/* All lower cards (default) */
.testimonial-variation-l2 .glide-lower .glide__slide .sub-card {
  border: 1px solid transparent;
  border-radius: 17px;
  background: 
    linear-gradient(180deg, #0A47AE 0%, #007FE8 100%) padding-box,
    linear-gradient(180deg, #0A47AE 0%, #007FE8 100%) border-box;
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* Lower active card (1st visible) */
.testimonial-variation-l2 .glide-lower .glide__slide--active .sub-card {
  background: 
    linear-gradient(180deg, #0A47AE 0%, #007FE8 100%) padding-box,
    linear-gradient(180deg, #0A47AE 0%, #007FE8 100%) border-box;
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* Lower 2nd visible card */
.testimonial-variation-l2 .glide-lower .glide__slide--active + .glide__slide .sub-card {
  background: 
    linear-gradient(180deg, #007FE8 0%, #00BAAA 100%) padding-box,
    linear-gradient(180deg, #007FE8 0%, #00BAAA 100%) border-box;
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* Lower 3rd visible card */
.testimonial-variation-l2 .glide-lower .glide__slide--active + .glide__slide + .glide__slide .sub-card {
  background: 
    linear-gradient(180deg, #3F3C8D 0%, #00BAAA 100%) padding-box,
    linear-gradient(180deg, #3F3C8D 0%, #00BAAA 100%) border-box;
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.testimonial-variation-l2 .glide-lower .sub-card-img {
  min-width: 44%;
}

/*  */

/* Fallback for browsers that don't support text-clip */
@supports not (-webkit-background-clip: text) {
  .testimonial-variation-l2 .glide-upper .glide__slide--active .badge,
  .testimonial-variation-l2 .glide-lower .glide__slide--active .badge {
    color: #0A47AE; 
  }
}


@media only screen and (max-width: 1350px) {
  .testimonial-variation.l2-testomonial::before {
    width: 110px;
  }
  .testimonial-variation.l2-testomonial::after {
    width: 110px;
  }
}

@media only screen and (max-width: 850px) {
  .testimonial-variation.l2-testomonial::before {
    width: 90px;
  }
  .testimonial-variation.l2-testomonial::after {
    width: 90px;
  }
}