.stats-hero{

    min-height:100vh;

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

    background-image:url("/static/images/hero-image.webp");
    background-size:cover;
    background-position:center;

    color:white;

}


.stats-overlay{

    width:100%;
    max-width:1100px;

    text-align:center;

    padding:40px;

    background:rgba(15,23,42,.75);

    border-radius: 20px;

}


.stats-overlay h1{

    font-size:3rem;
    margin-bottom:15px;

}


.stats-overlay p{

    color:#d1d5db;
    margin-bottom:70px;

}


.stats {
    display:flex;
    justify-content:center;
    align-items:flex-end;
    gap:clamp(15px, 5vw, 50px);
    width:100%;
}


.stat {
    display:flex;
    flex-direction:column;
    align-items:center;

    width:clamp(80px, 25vw, 150px);
}

.stat h3 {
    margin-top:25px;

    width:150px;
    height:60px; /* reserves the same space for all text */

    text-align:center;

    font-size:1.2rem;
    line-height:1.4;
}

.stat-number{
    
    font-size:3rem;
    
    font-weight:700;

    margin-bottom:20px;

}


.bar {
    width:clamp(60px, 18vw, 110px);
    height:350px;

    background:rgba(255,255,255,.25);

    border-radius:18px;

    overflow:hidden;

    display:flex;
    align-items:flex-end;
}


.bar-fill {

    width:100%;

    height:0;

    background:#DEEAFF;

    transition:height 1.8s cubic-bezier(.2,.8,.2,1);

}


.lessons,
.students,
.years {

    --height:100%;

}

.lessons {
    transition-delay:0.2s;
}

.students {
    transition-delay:0.8s;
}

.years {
    transition-delay:1.4s;
}

.bar-fill.animate{

    height:var(--height);

}




@media(max-width:600px){

    .bar {
        height:220px;
        border-radius:12px;
    }


    .stat-number {
        font-size:1.8rem;
    }


    .stat h3 {
        font-size:.9rem;
        width:100px;
    }

}



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


.testimonials-section {

    background:white;

    padding:100px 20px;

}


.testimonials-container {

    max-width:1200px;

    margin:auto;

    text-align:center;

}



.testimonials-container h2 {

    font-size:3rem;

    color:#0F172A;

    margin-bottom:15px;

}



.testimonials-subtitle {

    color:#64748b;

    font-size:1.2rem;

    margin-bottom:60px;

}



/* GRID */


.testimonial-grid {

    display:grid;

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

    gap:30px;

}




/* CARDS */


.testimonial-card {

    background:#f8fafc;

    padding:35px;

    border-radius:20px;

    border:1px solid #e5e7eb;

    text-align:left;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

    transition:.3s;

}


.testimonial-card:hover {

    transform:translateY(-5px);

    box-shadow:0 20px 40px rgba(0,0,0,.1);

}




.stars {

    color:#f59e0b;

    font-size:1.3rem;

    margin-bottom:20px;

}



.testimonial-card p {

    color:#334155;

    line-height:1.7;

    font-size:1.05rem;

    margin-bottom:25px;

}



.testimonial-card span {

    color:#64748b;

    font-weight:600;

}



/* BUTTON */


.testimonial-button {

    display:inline-block;

    margin-top:70px;

    padding:16px 40px;

    background:#DEEAFF;

    color:#1f2937;

    text-decoration:none;

    border-radius:12px;

    font-weight:600;

    transition:.3s;

}



.testimonial-button:hover {

    background:#1f2937;
    color:#DEEAFF;

    transform:translateY(-3px);

}



/* TABLET */


@media(max-width:900px){

    .testimonial-grid {

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

    }

}



/* MOBILE */


@media(max-width:600px){

    .testimonials-container h2 {

        font-size:2.2rem;

    }


    .testimonial-grid {

        grid-template-columns:1fr;

    }


    .testimonial-card {

        padding:25px;

    }

}