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

.testimonials{
    min-height:100svh;

    display:flex;
    align-items:center;

    padding:45px 0;

    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #fffaf4 100%
    );

    overflow:hidden;
}

.testimonial-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:14px;

    margin-top:24px;
}

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

.testimonial-card{

    position:relative;

    overflow:hidden;

    display:flex;
    flex-direction:column;

    background:#fff;

    border-radius:18px;

    padding:16px;

    box-shadow:0 10px 24px rgba(15,23,42,.08);

    transition:.35s ease;
}

.testimonial-card:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 36px rgba(239,144,45,.15);
}

.testimonial-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:4px;

    background:#ef902d;

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;
}

.testimonial-card:hover::before{

    transform:scaleX(1);
}

/*================ TOP =================*/

.testimonial-top{

    position:relative;

    margin-bottom:10px;
}

.testimonial-index{

    position:absolute;

    top:0;
    right:0;

    font-size:24px;

    font-weight:800;

    color:rgba(239,144,45,.15);
}

.quote-icon{

    width:44px;

    aspect-ratio:1;

    margin:0 auto;

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

    border-radius:14px;

    background:#fff7ef;

    transition:.3s;
}

.quote-icon i{

    color:#ef902d;

    font-size:18px;
}

.testimonial-card:hover .quote-icon{

    transform:translateY(-4px);
}

/*================ STARS =================*/

.stars{

    display:flex;

    justify-content:center;

    gap:3px;

    margin-bottom:6px;
}

.stars i{

    color:#ef902d;

    font-size:13px;
}

/*================ SOURCE =================*/

.review-source{

    display:block;

    text-align:center;

    color:#ef902d;

    font-size:11px;

    font-weight:600;

    margin-bottom:8px;
}

/*================ LINE =================*/

.testimonial-line{

    width:32px;

    height:3px;

    margin:0 auto 10px;

    border-radius:20px;

    background:linear-gradient(
        90deg,
        #ef902d,
        #ffb04a
    );
}

/*================ REVIEW =================*/

.testimonial-text{

    text-align:center;

    color:#666;

    font-size:13px;

    line-height:1.55;

    font-style:italic;

    min-height:65px;

    margin-bottom:14px;
}

/*================ STUDENT =================*/

.student{

    margin-top:auto;

    display:flex;

    align-items:center;

    gap:10px;

    padding-top:12px;

    border-top:1px solid #ececec;
}

.student img{

    width:44px;
    height:44px;

    object-fit:cover;

    border-radius:50%;

    border:2px solid #fff7ef;

    transition:.3s;
}

.testimonial-card:hover .student img{

    transform:scale(1.05);

    border-color:#ef902d;
}

.student-info{

    flex:1;
}

.student h4{

    display:flex;

    align-items:center;

    gap:5px;

    margin-bottom:3px;

    font-size:14px;

    color:#111827;
}

.student h4 i{

    color:#22c55e;

    font-size:12px;
}

.course-badge{

    display:inline-block;

    padding:3px 8px;

    border-radius:30px;

    background:#fff7ef;

    color:#ef902d;

    font-size:9px;

    font-weight:600;

    transition:.3s;
}

.testimonial-card:hover .course-badge{

    background:#ef902d;

    color:#fff;
}

/*==========================================
                LAPTOP
==========================================*/

@media(max-width:1200px){

    .testimonials{

        min-height:auto;

        padding:45px 0;
    }

    .testimonial-grid{

        grid-template-columns:repeat(2,1fr);

        gap:16px;
    }
}

/*==========================================
                TABLET
==========================================*/

@media(max-width:991px){

    .testimonials{

        min-height:auto;

        padding:40px 0;
    }

    .testimonial-grid{

        display:flex;

        overflow-x:auto;

        gap:14px;

        scroll-snap-type:x mandatory;

        scrollbar-width:none;

        -webkit-overflow-scrolling:touch;

        padding:5px 5px 12px;
    }

    .testimonial-grid::-webkit-scrollbar{

        display:none;
    }

    .testimonial-card{

        flex:0 0 82%;

        min-width:260px;

        max-width:290px;

        scroll-snap-align:center;
    }
}

/*==========================================
                MOBILE
==========================================*/

@media(max-width:576px){

    .testimonials{

        padding:30px 0;
    }

    .testimonial-card{

        flex:0 0 88%;

        min-width:240px;

        padding:16px;
    }

    .testimonial-text{

        min-height:auto;

        font-size:12px;

        line-height:1.5;
    }

    .student{

        gap:8px;

        padding-top:10px;
    }

    .student img{

        width:40px;
        height:40px;
    }

    .student h4{

        font-size:13px;
    }

    .course-badge{

        font-size:8px;
    }
}

/*==========================================
            SMALL MOBILE
==========================================*/

@media(max-width:400px){

    .testimonial-card{

        flex:0 0 92%;

        min-width:220px;
    }
}