/* =======================================================
   KiraEdu Homepage
======================================================= */

.home-hero{
    width:100vw;
    min-height:720px;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    background:
        linear-gradient(rgba(2,6,23,.62),rgba(2,6,23,.82)),
        url("https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=1800&q=80");
    background-size:cover;
    background-position:center;
    color:#fff7d6;
    display:flex;
    align-items:center;
    padding:90px 0;
}

.home-image-band{
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    min-height:520px;
    color:white;
    display:flex;
    align-items:center;
    padding:80px 0;
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
}

.home-hero-inner,
.home-section,
.home-image-band > div{
    width:min(100% - 48px, 1280px);
    margin-inline:auto;
}
.home-soft .home-section-header,
.home-soft .home-course-grid,
.home-testimonials .home-section-header,
.home-testimonials .home-testimonial-grid{
    width:100%;
    max-width:1280px;
    margin-left:auto;
    margin-right:auto;
   
}

.home-hero-copy{
    max-width:780px;
    animation:fadeUp .8s ease both;
}

.home-eyebrow{
    background:rgba(212,175,55,.18);
    color:#facc15;
}

.home-eyebrow.dark{
    background:var(--ke-gold-soft);
    color:var(--ke-gold-dark);
}

.home-hero h1{
    font-family:var(--font-heading);
    font-size:76px;
    line-height:.98;
    letter-spacing:-.055em;
    margin:0 0 24px;
    color:#dbeafe;

}

.home-hero p{
    max-width:650px;
    color:#dbeafe;
    font-size:20px;
    line-height:1.75;
    margin:0;
}

.home-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:34px;
}

.home-section{
    padding:92px 0;
}

.home-section-header{
    max-width:780px;
    margin:0 auto 44px;
    text-align:center;
}

.home-section-header h2{
    color:#0f172a;
    font-family:var(--font-heading);
    font-size:48px;
    line-height:1.1;
    letter-spacing:-.04em;
    margin:0 0 14px;
}

.home-section-header p{
    color:#475569;
    font-size:17px;
    line-height:1.7;
    margin:0;
}

.home-path-grid,
.home-feature-grid,
.home-testimonial-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:22px;
}

.home-path-card,
.home-feature-grid div,
.home-testimonial-grid div,
.home-empty{
    background:white;
    border:1px solid #e2e8f0;
    border-radius:30px;
    padding:30px;
    box-shadow:0 18px 45px rgba(15,23,42,.08);
    transition:.25s ease;
    animation:fadeUp .7s ease both;
}

.home-path-card{
    min-height:260px;
    color:#0f172a;
    text-decoration:none;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
}

.home-path-card:hover,
.home-feature-grid div:hover,
.home-testimonial-grid div:hover{
    transform:translateY(-7px);
    box-shadow:0 28px 70px rgba(15,23,42,.14);
}

.home-path-card span,
.home-feature-grid span{
    font-size:42px;
}

.home-path-card h3,
.home-feature-grid h3{
    color:#0f172a;
    font-size:25px;
    margin:18px 0 10px;
    font-family:var(--font-heading);
}

.home-path-card p,
.home-feature-grid p,
.home-testimonial-grid p{
    color:#64748b;
    line-height:1.65;
    margin:0;
}

.home-path-card.featured{
    background:#0f172a;
    color:white;
}

.home-path-card.featured h3{
    color:white;
}

.home-path-card.featured p{
    color:#cbd5e1;
}

.home-image-band{
    min-height:520px;
    color:white;
    display:flex;
    align-items:center;
    padding:80px 0;
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
}

.home-image-band div > *{
    max-width:620px;
}

.band-one{
    background:
        linear-gradient(90deg,rgba(2,6,23,.86),rgba(2,6,23,.44)),
        url("https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?auto=format&fit=crop&w=1800&q=80");
    background-size:cover;
    background-position:center;
}

.band-two{
    background:
        linear-gradient(90deg,rgba(2,6,23,.86),rgba(2,6,23,.42)),
        url("https://images.unsplash.com/photo-1552664730-d307ca884978?auto=format&fit=crop&w=1800&q=80");
    background-size:cover;
    background-position:center;
}

.home-image-band span{
    display:block;
    color:#bfdbfe;
    font-size:13px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
    margin-bottom:16px;
}

.home-image-band h2{
    font-family:var(--font-heading);
    font-size:52px;
    line-height:1.05;
    margin:0 0 18px;
    color:#dbeafe;

}

.home-image-band p{
    color:#dbeafe;
    font-size:18px;
    line-height:1.75;
    margin:0 0 28px;
}

.home-soft{
    max-width:none;
    background:#f8fafc;
}

.home-course-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
    gap:24px;
}

.home-experience{
    background:white;
}

.home-testimonials{
    background:#f8fafc;
    max-width:none;
}

.home-testimonial-grid strong{
    display:block;
    color:#0f172a;
    font-size:22px;
    line-height:1.35;
    margin-bottom:12px;
    font-family:var(--font-heading);
}

.home-testimonial-grid span{
    display:block;
    color:#f59e0b;
    margin-top:16px;
    font-weight:900;
}

.home-final-cta{
    background:
        radial-gradient(circle at top right,rgba(255,255,255,.18),transparent 30%),
        linear-gradient(135deg,#2563eb,#1d4ed8);
        color:#dbeafe;
        text-align:center;
        padding:105px 0;
}

.home-final-cta span{
    display:block;
    color:#bfdbfe;
    text-transform:uppercase;
    font-size:13px;
    font-weight:900;
    letter-spacing:.08em;
    margin-bottom:14px;
}

.home-final-cta h2{
    font-family:var(--font-heading);
    font-size:52px;
    line-height:1.08;
    margin:0 0 14px;
    color:#dbeafe;

}

.home-final-cta p{
    color:#dbeafe;
    font-size:18px;
    margin:0 0 28px;
}

.home-empty{
    grid-column:1/-1;
    text-align:center;
}

/* =======================================================
   Hero Slider Animation
======================================================= */

.hero-slide{
    opacity:0;
    transform:translateY(30px);
    transition:all .6s ease;
}

.hero-show{
    opacity:1;
    transform:translateY(0);
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(24px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@media(max-width:1320px){
    .home-hero-inner,
    .home-section,
    .home-image-band > div,
    .home-soft .home-section-header,
    .home-soft .home-course-grid,
    .home-testimonials .home-section-header,
    .home-testimonials .home-testimonial-grid{
        width:calc(100% - 32px);
    }
}

@media(max-width:900px){
    .home-hero{
        min-height:auto;
        padding:86px 0;
    }

    .home-hero h1{
        font-size:54px;
    }

    .home-image-band{
        background-attachment:scroll;
    }
}

@media(max-width:650px){
    .home-hero{
        padding:72px 0;
    }

    .home-hero h1{
        font-size:42px;
        letter-spacing:-.04em;
    }

    .home-hero p{
        font-size:17px;
    }

    .home-actions{
        flex-direction:column;
    }

    .home-actions .btn{
        width:100%;
    }

    .home-section{
        padding:62px 0;
    }

    .home-section-header{
        text-align:left;
    }

    .home-section-header h2,
    .home-image-band h2,
    .home-final-cta h2{
        font-size:34px;
    }

    .home-path-card{
        min-height:220px;
    }

    .home-image-band{
        min-height:auto;
        padding:72px 0;
    }

    .home-final-cta{
        padding:78px 16px;
    }
}