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

.testimonials{

    background:var(--section-light);

    overflow:hidden;

}


/*=====================================================
    WRAPPER
=====================================================*/

.testimonial-wrapper{

    position:relative;
    overflow:hidden;

    margin-top:4rem;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:5rem;

    align-items:center;

}

.testimonial-content {

    position:relative;
    z-index:1;

}




/*=====================================================
    LEFT SIDE
=====================================================*/

.testimonial-left{

    position:relative;
    overflow: hidden;

}

/* Keep content above the pixel layer initially */

.testimonial-rating,
.testimonial-left blockquote,
.testimonial-author {

    position:relative;

    z-index:1;

}

.testimonial-left.is-transitioning {

    min-height: var(--testimonial-height);

}

/* Pixel overlay */
.testimonial-left > *:not([data-pix3ls-transition]){
    position:relative;
    z-index:1;
}

.testimonial-rating{
    color:#fbbf24;
    font-size:1.15rem;
    letter-spacing:.25rem;
    margin-bottom:2rem;
}


.testimonial-left blockquote{

    font-size:1.08rem;

    line-height:2;

    color:#475569;

    font-style:normal;

    margin-bottom:2rem;

}


.testimonial-author{

    display:flex;

    align-items:center;

    gap:1rem;

}

.testimonial-author h4{

    margin:0;

    color:#0f172a;

}


.testimonial-author span{

    color:#64748b;

}

.author-avatar{

    width:72px;
    height:72px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--primary),
        #5DA9FF
    );

    color:#fff;

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

    font-size:1.3rem;
    font-weight:700;

    flex-shrink:0;

    /*box-shadow:
        0 15px 35px rgba(47,128,237,.25);*/

    transition:
        transform .35s cubic-bezier(.22,1,.36,1),
        box-shadow .35s ease;

}

.author-avatar:hover{

    transform:
        translateY(-4px)
        scale(1.04);

    box-shadow:
        0 22px 45px rgba(47,128,237,.35);

}

/*=====================================================
    RIGHT SIDE
=====================================================*/

.testimonial-right{

    display:flex;

    flex-direction:column;

    gap:1.25rem;

}

.story-item{

    display:flex;

    align-items:flex-start;

    gap:1.25rem;

    padding:1.25rem 0;

    border-bottom:1px solid rgba(15,23,42,.08);

    transition:.35s ease;

}

.story-item:hover{

    transform:translateX(8px);

}

.story-item.active{

    border-color:rgba(47,128,237,.3);

}

.story-icon{

    width:54px;

    height:54px;

    flex-shrink:0;

    border-radius:16px;

    background:rgba(47,128,237,.08);

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--primary);

    font-size:1.2rem;

    transition:.35s ease;

}

.story-item.active .story-icon{

    background:var(--primary);

    color:#fff;

    transform:

        rotate(-6deg)

        scale(1.05);

}

.story-item h4{

    margin-bottom:.45rem;

    color:#0f172a;

    transition:.35s ease;

}

.story-item p{

    margin:0;

    color:#64748b;

    line-height:1.8;

    font-size:.95rem;

}

/*=====================================================
    TESTIMONIAL PAGINATION
=====================================================*/

.testimonial-pagination{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:1.75rem;

    margin-top:4rem;

}

.testimonial-pagination button{

    width:54px;

    height:54px;

    border:none;

    border-radius:50%;

    background:#fff;

    color:#1E293B;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.1rem;

    box-shadow:

        0 12px 28px rgba(15,23,42,.08);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease,
        color .35s ease;

}

.testimonial-pagination button:hover{

    background:var(--primary);

    color:#fff;

    transform:

        translateY(-4px);

    box-shadow:

        0 18px 35px rgba(47,128,237,.30);

}

.testimonial-pagination button:active{

    transform:scale(.95);

}

.page-indicator{

    display:flex;

    align-items:center;

    gap:.45rem;

    min-width:90px;

    justify-content:center;

}

.page-indicator .current{

    font-size:1.05rem;

    font-weight:700;

    color:var(--primary);

    min-width:34px;

    text-align:center;

    position:relative;

}

.page-indicator .separator{

    color:#CBD5E1;

    font-size:1.2rem;

}

.page-indicator .total{

    color:#94A3B8;

    font-size:1.05rem;

    font-weight:600;

}

.testimonial-pagination button:disabled{

    opacity:.35;

    cursor:not-allowed;

    transform:none;

    box-shadow:none;

}

.pixel-burst{

    position:fixed;

    width:4px;
    height:4px;

    pointer-events:none;

    z-index:9999;

    box-shadow: 0 0 6px rgba(47,128,237,.45);

    opacity:1;

    transform:translate(0,0) scale(1);

    transition:

        transform .45s cubic-bezier(.22,1,.36,1),

        opacity .45s ease;

}

@media(max-width:991px){

    .testimonial-wrapper{

        grid-template-columns:1fr;

        gap:3rem;

    }

}


@media(max-width:767px){

    .testimonial-author{

        flex-direction:column;

        text-align:center;

    }

    .testimonial-left{

        text-align:center;

    }

    .testimonial-left::before{

        left:50%;

        transform:translateX(-50%);

    }

}

@media(max-width:576px){

    .testimonial-pagination{

        gap:1rem;

    }

    .testimonial-pagination button{

        width:48px;

        height:48px;

    }

    .page-indicator .current{

        font-size:1.45rem;

    }

}