/*=========================================
TESTIMONIALS
=========================================*/

.testimonials {

    width: 100%;
    padding: 80px 100px;

    background: linear-gradient(134.11deg, #FEEAF8 -3.16%, #EEF5FF 43.8%, #FFF5EB 63.8%, #EEF5FF 80.69%, #FEEAF8 104.66%);


    overflow: hidden;
    gap: 40px;

}

.testimonials .container {

    max-width: 1335px;
    margin: auto;

}

.play-btn {
    /* ...keep everything you already have, just add: */
    opacity: 1;
    transition: opacity .35s ease, transform .3s;
}

.play-btn.faded {
    opacity: 0;
}

/*=========================================
HEADER
=========================================*/

.section-header {

    max-width: 1335px;

    margin: 0 auto 70px;
    gap: 16px;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

}

/*=========================================
SWIPER
=========================================*/

.testimonial-slider {
    cursor: grab;

    width: 100%;

    overflow: visible;
    padding-right: 140px;

}

.testimonials .testimonial-slider {
    touch-action: pan-x;
    overscroll-behavior-x: contain;
}

.testimonials .client-video {
    touch-action: manipulation;
}

.swiper-wrapper {
    transition-timing-function: linear;

}

/*=========================================
MARQUEE (continuous auto-move)
=========================================*/

/* The slide list is duplicated once by JS, so this
   animation can shift exactly half the total width
   and land back on an identical copy — a seamless,
   endless loop with no JS translate math involved. */

.testimonial-slider .swiper-wrapper.marquee-track {

    width: max-content;

    flex-wrap: nowrap;
    gap: 32px;

    animation: testimonial-marquee 42s linear infinite;

}

/* animation-play-state is a native browser feature:
   pausing always freezes at the exact current frame,
   resuming always continues from that exact frame.
   No drift, no stuck state, ever. */

.testimonial-slider .swiper-wrapper.marquee-track.is-paused {

    animation-play-state: paused;

}

.testimonial-slider:active {
    cursor: grabbing;
}

@keyframes testimonial-marquee {

    from {

        transform: translateX(0);

    }

    to {

        transform: translateX(-50%);

    }

}

.swiper-slide {

    width: 560px;
    flex-shrink: 0;
    opacity: 1 !important;;
    margin-top: auto !important;
    height: auto;

}

.testimonial-video img, .testimonial-video video {
    transition: all 0.4s ease-in-out;
}

.swiper-slide img {
    margin-bottom: 0 !important;
    width: 50px;
    height: 50px;
}

/*=========================================
CARD
=========================================*/

.testimonial-card {

    width: 100%;

}

/*=========================================
VIDEO
=========================================*/
.testimonial-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    border-radius: 20px;
    background: linear-gradient(
            96.87deg,
            #FEEAF8 27.28%,
            #D8E9FF 100.54%
    );
    isolation: isolate;

    /* --- premium additions, don't touch anything above --- */
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 8px 24px rgba(20, 20, 40, 0.10),
    0 2px 6px rgba(20, 20, 40, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.5); /* thin glass edge highlight, top */
    transition: box-shadow 0.4s ease, transform 0.4s ease;
}

.testimonial-card:hover .testimonial-video {
    box-shadow: 0 16px 36px rgba(20, 20, 40, 0.16),
    0 4px 10px rgba(20, 20, 40, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* soft frosted rim inside the border for extra glass depth */
.testimonial-video::after {
    /* keep your existing radial scrim rule if you added it —
       this is a SEPARATE effect, so rename to a wrapping span
       if you need both ::after layers at once (see note below) */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
    pointer-events: none;
    z-index: 3;
}

.client-video {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
    transition: all 0.4s ease-in-out;
    border-radius: inherit;
    filter: none;
    image-rendering: auto; /* let the browser use its best upscale algorithm, not nearest-neighbor */
    backface-visibility: hidden; /* avoids sub-pixel blur during the hover scale transform */
    transform: translateZ(0);

}

.testimonial-card:hover .client-video {

    transform: scale(1.02);

}

/*=========================================
PLAY BUTTON
=========================================*/

.play-btn {

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    width: 60px;

    height: 60px;

    border: none;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: .3s;

    backdrop-filter: invert(0.2);
    background: #ffffff24;

}

.play-btn:hover {

    transform: translate(-50%, -50%) scale(1.08);

}

.play-btn img {

    width: 50px;

    height: 50px;

}

.testimonial-video::after {
    content: "";
    position: absolute;
    inset: 0;
    background: transparent;
    pointer-events: none; /* clicks still pass through to the button/video */
    border-radius: inherit;
    z-index: 2; /* above the video, below the button */
}

/* =========================================
   VIDEO CARD
========================================= */

.testimonial-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 20px;

    background: linear-gradient(
            96.87deg,
            #FEEAF8 27.28%,
            #D8E9FF 100.54%
    );

    isolation: isolate;

    border: 1px solid rgba(255, 255, 255, 0.45);

    box-shadow: 0 8px 24px rgba(20, 20, 40, 0.10),
    0 2px 6px rgba(20, 20, 40, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);

    transition: transform 0.4s ease,
    box-shadow 0.4s ease;
}


/* =========================================
   IMAGE / VIDEO
========================================= */

.testimonial-video img,
.testimonial-video video {
    position: relative;
    z-index: 1;

    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: inherit;
}


/* =========================================
   SUBTLE IMAGE OVERLAY
========================================= */

.testimonial-video::after {
    content: "";

    position: absolute;
    inset: 0;

    background: transparent;

    pointer-events: none;

    border-radius: inherit;

    z-index: 2;
}


/* =========================================
   PLAY BUTTON
========================================= */

.play-btn {
    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    width: 64px;
    height: 64px;

    padding: 0;

    border: 1px solid rgb(255 255 255 / 37%);

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    /* IMPORTANT:
       Keep button above overlay */
    z-index: 3;

    /* Professional glass effect */
    background: rgb(255 255 255 / 8%);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    box-shadow: 0 8px 25px rgb(0 0 0 / 9%), 0 2px 8px rgba(0, 0, 0, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.9);

    transition: transform 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
}


/* =========================================
   PLAY BUTTON HOVER
========================================= */

.play-btn:hover {
    transform: translate(-50%, -50%) scale(1.10);

    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22),
    0 4px 12px rgba(0, 0, 0, 0.14),
    inset 0 1px 2px rgba(255, 255, 255, 1);
}


/* =========================================
   PLAY ICON
========================================= */

.play-btn img {
    width: 30px;
    height: 30px;

    display: block;

    object-fit: contain;

    /* Keeps the icon sharp */
    opacity: 0.9;

    transition: transform 0.3s ease,
    opacity 0.3s ease;
}


.play-btn:hover img {
    transform: scale(1.06);
    opacity: 1;
}

/*=========================================
CONTENT
=========================================*/

.testimonial-content {
    text-align: left;
    padding-top: 24px;
}

.testimonial-description {

    max-width: 716px;

    margin: 22px auto 34px;

    letter-spacing: -4%;
    font-style: normal;
    gap: 10px;


}


.testimonial-content h4 {

    margin: 0;

    font-size: 20px;

    font-weight: 500;
    letter-spacing: -4%;

    color: #000000;

}

.testimonial-content span {

    display: block;

    margin-top: 4px;

    font-size: 18px;

    line-height: 26px;

    color: #6C6C6C;


}


.testimonial-content p {

    margin: 0;

    font-size: 18px;
    line-height: 26px;
    font-weight: 400;
    letter-spacing: -4%;
    font-style: normal;
    color: #222222;
    margin-top: 16px !important;

}


/* =========================================
   TESTIMONIALS — MOBILE
   ========================================= */

@media (max-width: 480px) {

    .testimonials {
        width: 100%;
        padding: 40px 16px 40px;
        box-sizing: border-box;
        overflow: hidden;
    }

    .testimonials .container {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }


    /* =====================================
       HEADER
    ===================================== */
    .testimonials .section-header {
        width: 100%;
        max-width: 100%;

        margin: 0 auto 32px;
        padding: 0;

        display: flex;
        flex-direction: column;
        align-items: center;

        gap: 0;

        text-align: center;
    }

    .testimonials .testimonials-description {
        width: 100%;
        max-width: 364px;

        margin: 16px auto 0;
        padding: 0;

        font-size: 16px;
        line-height: 24px;

        font-weight: 400;

        text-align: center;

        letter-spacing: -0.4px;

        color: #222;
    }


    /* =====================================
       MOBILE SLIDER
       ===================================== */
    .testimonials .testimonial-slider {

        width: 100%;
        max-width: 100%;

        margin: 0;

        /*
         * IMPORTANT:
         * Allow horizontal finger swipe
         */
        overflow-x: auto;
        overflow-y: hidden;

        padding: 0;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;

        scroll-snap-type: x mandatory;
    }


    /* Hide scrollbar */
    .testimonials .testimonial-slider::-webkit-scrollbar {
        display: none;
    }


    /* =====================================
       STOP DESKTOP MARQUEE
       ===================================== */
    .testimonials .swiper-wrapper.marquee-track {

        /*
         * KEEP ALL CARDS IN ONE ROW
         */
        display: flex;

        flex-wrap: nowrap;

        width: max-content;

        gap: 0;

        /*
         * VERY IMPORTANT
         */
        animation: none !important;

        transform: none !important;

        transition: none !important;

        /*
         * Don't let Swiper interfere
         */
    }


    /*
     * Also stop paused state from doing
     * anything strange on mobile.
     */
    .testimonials
    .swiper-wrapper.marquee-track.is-paused {

        animation: none !important;

        transform: none !important;
    }

    .swiper-slide img {
        margin-bottom: 0 !important;
        width: 50px;

        height: 50px;
    }

    /* =====================================
       ONE CARD PER VIEW
       ===================================== */
    .testimonials .swiper-slide {

        /*
         * 16px left + 16px right
         */
        width: 100% !important;

        max-width: 100% !important;

        min-width: 100% !important;

        flex: 0 0 100%;

        margin: 0;

        padding-right: 0px;

        box-sizing: border-box;

        /*
         * Each card snaps into place
         */
        scroll-snap-align: start;
    }


    /* =====================================
       CARD
       ===================================== */
    .testimonials .testimonial-card {

        width: 100%;
        max-width: 100%;

        margin: 0;
        padding: 0;

        box-sizing: border-box;
    }


    /* =====================================
       IMAGE / VIDEO
       ===================================== */
    .testimonials .testimonial-video {

        position: relative;

        width: 100%;

        /*
         * Reference image ratio
         */
        aspect-ratio: 1.30 / 1;

        height: auto;

        margin: 0;

        padding: 0;

        border-radius: 14px;

        overflow: hidden;

        background: #e8edf8;

        box-sizing: border-box;
    }


    .testimonials .client-video {

        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;

        border-radius: 14px;
    }


    /* =====================================
       PLAY BUTTON
       ===================================== */
    /* =====================================
       CONTENT
       ===================================== */
    .testimonials .testimonial-content {

        width: 100%;

        padding: 14px 0 0;

        margin: 0;

        max-width: 100%;

        text-align: left;

        box-sizing: border-box;
    }


    .testimonials .testimonial-content h4 {

        margin: 0;
        gap: 10px;
        font-size: 20px;

        line-height: 100%;
        letter-spacing: -4%;

        font-weight: 500;

        color: #000;
    }


    .testimonials .testimonial-content span {

        display: block;

        margin: 3px 0 0;

        font-size: 18px;

        line-height: 26px;

        color: var(--color-neutral-700, #6C6C6C);

    }


    .testimonials .testimonial-content p {

        margin: 10px 0 0;

        font-size: 18px;

        line-height: 26px;

        font-weight: 400;
        letter-spacing: -4%;

        color: #222;

        text-align: left;
    }
}


@media (min-width: 481px) and (max-width: 768px) {

    .testimonials {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        overflow: hidden;
    }

    .testimonials .container {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
    }

    .testimonials .section-header {
        max-width: 90%;
        margin: 0 auto 40px;
        gap: 12px;
    }


    .testimonials .testimonial-slider {
        width: 100%;
        max-width: 100%;

        overflow-x: auto;
        overflow-y: hidden;

        padding: 0 20px;

        box-sizing: border-box;

        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;

        scroll-snap-type: x mandatory;
    }

    .testimonials .testimonial-slider::-webkit-scrollbar {
        display: none;
    }

    /* stop the desktop marquee, behave like a swipeable track */
    .testimonials .swiper-wrapper.marquee-track {
        display: flex;
        flex-wrap: nowrap;
        width: max-content;
        gap: 0;

        animation: none !important;
        transform: none !important;
        transition: none !important;


    }

    .testimonials .swiper-wrapper.marquee-track.is-paused {
        animation: none !important;
        transform: none !important;
    }

    /* full card + peek of next card */
    .testimonials .swiper-slide {
        width: calc(100vw - 80px) !important;
        max-width: 520px !important;
        min-width: 280px !important;

        flex: 0 0 calc(100vw - 80px);

        margin: 0;
        padding-right: 20px;

        box-sizing: border-box;

        scroll-snap-align: start;
    }


    .testimonials .testimonial-description {
        max-width: 520px;
        margin: 16px auto 0;
        font-size: 16px;
        line-height: 24px;
    }

    .testimonials .testimonial-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .testimonials .testimonial-video {
        width: 100%;
        max-width: 100%;
        aspect-ratio: 16 / 9;
        height: auto;
        border-radius: 16px;
        box-sizing: border-box;
    }

    .testimonials .client-video {
        width: 100%;
        height: 100%;
        border-radius: 16px;
    }

    .testimonials .play-btn {
        width: 54px;
        height: 54px;
    }

    .testimonials .play-btn img {
        width: 40px;
        height: 40px;
    }

    .testimonials .testimonial-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding-top: 16px;
        box-sizing: border-box;
        overflow-wrap: break-word;
    }

    .testimonials .testimonial-content h4 {
        font-size: 24px;
        line-height: 1.3;
        max-width: 100%;
        overflow-wrap: break-word;
    }

    .testimonials .testimonial-content span {
        margin-top: 8px;
        font-size: 17px;
        line-height: 24px;
    }

    .testimonials .testimonial-content p {
        margin-top: 8px;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        max-width: 100%;
        overflow-wrap: break-word;
    }

}
@media (max-width: 480px) {
    .testimonials .testimonial-content p {
        margin: 10px 0 0;
        font-size: 18px;
        line-height: 26px;
        font-weight: 400;
        letter-spacing: -4%;
        color: #222;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        min-height: 78px;
        max-height: 78px;
        text-overflow: ellipsis;
    }
}
 @media (max-width: 600px) {
     .testimonials .swiper-slide{
                    height: 440px;
                    }
 }