/* ==========================================
   TESTIMONIAL - PART 1 (Base)
========================================== */

.testimonial-section{
    width:100%;
    padding:80px 0;
    background:#fafaff;
    overflow:hidden;
}

.testimonial-header{
    text-align:center;
    margin-bottom:50px;
}

.testimonial-header h2{
    font-size:38px;
    color:#063b8f;
    font-weight:800;
    margin-bottom:15px;
}

.testimonial-header p{
    color:#697386;
    font-size:17px;
}

.testimonial-wrapper{
    width:100%;
    overflow:hidden;
    position:relative;
}

.testimonial-track{
    display:flex;
    gap:30px;
    width:max-content;
    will-change:transform;
}

.testimonial-card{
    width:380px;
    min-height:260px;
    background:#fff;
    border-radius:18px;
    padding:34px;
    flex:0 0 auto;
    box-sizing:border-box;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.user{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:22px;
}

.user img{
    width:62px;
    height:62px;
    border-radius:50%;
    object-fit:cover;
}

.user h4{
    margin:0;
    font-size:18px;
    color:#111827;
}

.user span{
    font-size:15px;
    color:#667085;
}

.testimonial-card p{
    font-size:17px;
    line-height:1.6;
    color:#475467;
    margin:0 0 20px;
}

.stars{
    color:#ffc400;
    font-size:20px;
    letter-spacing:2px;
}

/* ==========================
   RESPONSIVE
========================== */

@media (max-width:1200px){

    .testimonial-section{
        padding:70px 20px;
    }

    .testimonial-card{
        width:340px;
        padding:28px;
        min-height:240px;
    }

}

@media (max-width:992px){

    .testimonial-header{
        margin-bottom:40px;
    }

    .testimonial-header h2{
        font-size:32px;
    }

    .testimonial-header p{
        font-size:16px;
        padding:0 20px;
    }

    .testimonial-track{
        gap:24px;
    }

    .testimonial-card{
        width:300px;
        padding:24px;
        min-height:220px;
    }

    .user img{
        width:56px;
        height:56px;
    }

}

@media (max-width:768px){

    .testimonial-section{

        padding:60px 16px;

    }



    .testimonial-header{

        margin-bottom:32px;

    }



    .testimonial-header h2{

        font-size:28px;

    }



    .testimonial-header p{

        font-size:15px;

        line-height:1.6;

    }



    .testimonial-track{

        gap:16px;

    }



    .testimonial-card{

        width:220px;

        min-height:190px;

        padding:18px;

    }



    .user{

        gap:12px;

        margin-bottom:14px;

    }



    .user img{

        width:42px;

        height:42px;

    }



    .user h4{

        font-size:15px;

    }



    .user span{

        font-size:12px;

    }



    .testimonial-card p{

        font-size:13px;

        line-height:1.5;

        margin-bottom:14px;

        min-height:auto;

    }



    .stars{

        font-size:16px;

    }

}

@media (max-width:480px){

    .testimonial-header h2{

        font-size:24px;

    }



    .testimonial-header p{

        font-size:14px;

    }



    .testimonial-track{

        gap:14px;

    }



    .testimonial-card{

        width:190px;

        min-height:180px;

        padding:16px;

    }



    .user img{

        width:38px;

        height:38px;

    }



    .user h4{

        font-size:14px;

    }



    .user span{

        font-size:11px;

    }



    .testimonial-card p{

        font-size:12px;

    }



    .stars{

        font-size:15px;

    }

}

/* ==========================================
   TESTIMONIAL - PART 2
   For JS requestAnimationFrame marquee
========================================== */

.testimonial-wrapper{
    -webkit-mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent);
    mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent);
}

.testimonial-track{
    transform:translate3d(0,0,0);
    backface-visibility:hidden;
    perspective:1000px;
}

.testimonial-card{
    transition:transform .3s ease, box-shadow .3s ease;
}

.testimonial-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 40px rgba(0,0,0,.12);
}

.testimonial-track:hover{
    cursor:grab;
}

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

@media (prefers-reduced-motion:reduce){
    .testimonial-track{
        transform:none !important;
    }
}

@media (max-width:768px){
    .testimonial-wrapper{
        -webkit-mask-image:none;
        mask-image:none;
    }

    .testimonial-card:hover{
        transform:none;
    }
}