/* =========================================
   KIDSORRA WEBSITE
   CLEAN CSS
   PART 1
========================================= */


/* =========================
   RESET
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:linear-gradient(
        135deg,
        #F8FBFF 0%,
        #FFFFFF 50%,
        #FFF8E7 100%
    );
    color:#252525;
    overflow-x:hidden;
}

img{
    max-width:100%;
    height:auto;
    display:block;
}

button{
    font-family:inherit;
    cursor:pointer;
}

a{
    text-decoration:none;
    color:inherit;
}


/* =========================
   VARIABLES
========================= */

:root{

    --kids-blue:#4F46E5;
    --kids-yellow:#FFD93D;
    --kids-orange:#FF9F45;
    --kids-pink:#FF7EB3;
    --kids-green:#6BCB77;
    --kids-purple:#A855F7;

    --text:#252525;
    --gray:#666666;
    --white:#FFFFFF;

    --shadow:
        0 20px 50px rgba(0,0,0,.08);

}


/* =========================
   HEADER
========================= */

header{

    position:sticky;
    top:0;
    left:0;

    width:100%;

    z-index:999;

    backdrop-filter:blur(15px);

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

    box-shadow:0 8px 25px rgba(0,0,0,.05);

}


.navbar{

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

    margin:auto;

    padding:22px 40px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}


/* =========================
   LOGO
========================= */

.logo{

    font-size:34px;

    font-weight:800;

    background:linear-gradient(
        90deg,
        var(--kids-blue),
        var(--kids-purple)
    );

    -webkit-background-clip:text;

    color:transparent;

}


/* =========================
   NAVIGATION
========================= */

.nav-links{

    list-style:none;

    display:flex;

    gap:45px;

}

.nav-links li{

    font-size:17px;

    font-weight:600;

    color:#333;

    transition:.3s;

}

.nav-links li:hover{

    color:var(--kids-blue);

}


/* =========================
   DEMO BUTTON
========================= */

.demo-btn{

    border:none;

    padding:15px 28px;

    border-radius:50px;

    background:var(--kids-yellow);

    color:#333;

    font-weight:700;

    font-size:16px;

    transition:.3s;

}

.demo-btn:hover{

    transform:translateY(-4px);

    box-shadow:
        0 12px 28px rgba(255,217,61,.35);

}


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

.menu-toggle{

    display:none;

    font-size:32px;

    color:#333;

}


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

@media (max-width:900px){

    .navbar{

        padding:20px;

    }

    .logo{

        font-size:28px;

    }

    .nav-links{

        display:none;

    }

    .demo-btn{

        display:none;

    }

    .menu-toggle{

        display:block;

    }

}

/* =========================================
   HERO SECTION
========================================= */


.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:120px 40px 80px;

    overflow:hidden;

}


/* HERO CONTAINER */

.hero-container{

    width:100%;

    max-width:1300px;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:70px;

}


/* =========================
   HERO CONTENT
========================= */


.hero-content{

    max-width:620px;

}


.badge{

    display:inline-block;

    background:#FFF4B8;

    padding:12px 25px;

    border-radius:50px;

    font-weight:700;

    margin-bottom:25px;

    color:#444;

}


.hero-content h1{

    font-size:76px;

    line-height:1.05;

    font-weight:900;

    letter-spacing:-3px;

    color:var(--text);

    margin-bottom:30px;

}


.hero-content h1 span{

    display:block;

    color:var(--kids-blue);

}


.hero-content p{

    font-size:21px;

    line-height:1.8;

    color:var(--gray);

    max-width:520px;

    margin-bottom:40px;

}



/* =========================
   HERO BUTTONS
========================= */


.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}


.btn-primary{

    background:var(--kids-blue);

    color:white;

    border:none;

    padding:18px 38px;

    border-radius:50px;

    font-size:18px;

    font-weight:700;

    transition:.3s;

}


.btn-primary:hover{

    transform:translateY(-5px);

    box-shadow:
    0 18px 40px rgba(79,70,229,.35);

}



.btn-secondary{

    background:white;

    color:var(--kids-blue);

    border:3px solid var(--kids-blue);

    padding:15px 35px;

    border-radius:50px;

    font-size:18px;

    font-weight:700;

    transition:.3s;

}


.btn-secondary:hover{

    background:var(--kids-blue);

    color:white;

}



/* =========================
   HERO VISUAL
========================= */


.hero-visual{

    height:520px;

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

}



/* MAGIC CIRCLE */


.magic-circle{

    position:absolute;

    width:430px;

    height:430px;

    border-radius:50%;


    background:

    radial-gradient(
        circle,
        #DDD6FE,
        #FFFFFF
    );


    filter:
    drop-shadow(
        0 0 60px rgba(168,85,247,.25)
    );


    animation:
    pulseMagic 6s infinite alternate;

}



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


.character-card{

    width:300px;

    height:300px;

    border-radius:45px;


    background:

    linear-gradient(
        145deg,
        #FFFFFF,
        #F3F0FF
    );


    display:flex;

    justify-content:center;

    align-items:center;


    position:relative;


    box-shadow:

    0 35px 80px rgba(0,0,0,.12);


    animation:

    floatCharacter 5s infinite ease-in-out;

}



/* =========================
   AVATAR
========================= */


.character-avatar{

    display:flex;

    flex-direction:column;

    align-items:center;

}



.avatar-head{

    width:120px;

    height:120px;

    border-radius:50%;


    background:

    linear-gradient(
        #FFD66B,
        #FFC94C
    );


    box-shadow:

    0 15px 30px rgba(0,0,0,.12);


}



.avatar-body{

    width:150px;

    height:130px;


    margin-top:-10px;


    border-radius:45px;


    background:

    linear-gradient(
        #6C63FF,
        #4F46E5
    );


    box-shadow:

    0 15px 30px rgba(0,0,0,.12);

}



/* =========================
   FLOATING TAGS
========================= */


.floating-tag{

    position:absolute;

    padding:12px 22px;

    border-radius:40px;

    font-size:15px;

    font-weight:700;

    background:white;


    box-shadow:

    0 15px 35px rgba(0,0,0,.12);

}



.tag-one{

    top:35px;

    left:-55px;

    background:#FFF4B8;

}



.tag-two{

    top:120px;

    right:-65px;

    background:#DDF7E3;

}



.tag-three{

    bottom:35px;

    left:-40px;

    background:#FFE2ED;

}



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


.magic-background{

    position:absolute;

    inset:0;

    pointer-events:none;

}



.star{

    position:absolute;

    color:#FFD83D;

    font-size:35px;

    animation:

    starFloat 5s infinite ease-in-out;

}



.star-1{

    top:15%;

    left:12%;

}



.star-2{

    top:30%;

    right:15%;

    animation-delay:1s;

}



.star-3{

    bottom:20%;

    left:25%;

    animation-delay:2s;

}



.star-4{

    bottom:30%;

    right:30%;

    animation-delay:3s;

}

/* =========================================
   STATS SECTION
========================================= */


.stats{

    display:flex;

    justify-content:center;

    gap:40px;

    flex-wrap:wrap;

    padding:100px 40px;

    background:white;

}



.stat{

    min-width:200px;

    padding:35px;

    text-align:center;

    border-radius:30px;

    background:white;

    box-shadow:var(--shadow);

    transition:.35s;

}



.stat:hover{

    transform:translateY(-12px);

}



.stat h2{

    font-size:55px;

    font-weight:800;

    color:var(--kids-blue);

    margin-bottom:10px;

}



.stat p{

    font-size:18px;

    font-weight:600;

    color:var(--gray);

}



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


.testimonials{

    padding:120px 40px;

    background:#F8F7FF;

    text-align:center;

}



.testimonials h2{

    font-size:50px;

    font-weight:800;

    color:var(--text);

    margin-bottom:60px;

}



.testimonial-container{

    display:flex;

    justify-content:center;

    gap:30px;

    flex-wrap:wrap;

}



.testimonial{

    width:340px;

    padding:35px;

    background:white;

    border-radius:30px;

    box-shadow:var(--shadow);

    transition:.35s;

}



.testimonial:hover{

    transform:translateY(-12px);

}



.testimonial p{

    color:var(--gray);

    font-size:17px;

    line-height:1.8;

    margin-bottom:25px;

}



.testimonial h4{

    color:var(--kids-blue);

    font-size:20px;

}



/* =========================================
   MEET KIDSORRA
========================================= */


.meet-kidsorra{

    padding:130px 40px;

    background:white;

}



.meet-container{

    max-width:1300px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}



/* IMAGE SIDE */


.meet-image{

    display:flex;

    justify-content:center;

}



.kidsorra-avatar{

    width:330px;

    height:430px;

    border-radius:45px;


    background:

    linear-gradient(
        145deg,
        #F5F3FF,
        #FFFFFF
    );


    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;


    box-shadow:

    0 30px 80px rgba(0,0,0,.10);

}



.kidsorra-avatar .avatar-head{

    width:130px;

    height:130px;

}



.kidsorra-avatar .avatar-body{

    width:170px;

    height:180px;

}



/* CONTENT SIDE */


.meet-content span{

    display:inline-block;

    background:#FFF4B8;

    padding:12px 25px;

    border-radius:40px;

    font-weight:700;

    margin-bottom:25px;

}



.meet-content h2{

    font-size:56px;

    line-height:1.2;

    font-weight:800;

    margin-bottom:25px;

    color:var(--text);

}



.meet-content p{

    font-size:20px;

    line-height:1.9;

    color:var(--gray);

    margin-bottom:40px;

}



/* =========================================
   COMMON PRIMARY BUTTON
========================================= */


.primary{

    background:var(--kids-blue);

    color:white;

    border:none;

    padding:18px 38px;

    border-radius:50px;

    font-size:17px;

    font-weight:700;

    transition:.3s;

}



.primary:hover{

    transform:translateY(-5px);

    box-shadow:

    0 18px 35px rgba(79,70,229,.3);

}

/* =========================================
   PROGRAMS SECTION
========================================= */


.programs{

    padding:130px 40px;

    background:white;

}



.section-title{

    max-width:700px;

    margin:auto;

    text-align:center;

}



.section-title span{

    display:inline-block;

    background:#FFF4B8;

    padding:12px 25px;

    border-radius:40px;

    font-weight:700;

    margin-bottom:25px;

}



.section-title h2{

    font-size:52px;

    color:var(--kids-blue);

    font-weight:800;

    margin-bottom:20px;

}



.section-title p{

    font-size:18px;

    line-height:1.8;

    color:var(--gray);

}



/* PROGRAM CARDS */


.program-grid{

    margin-top:70px;

    display:grid;

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

    gap:30px;

}



.program-card{

    background:white;

    padding:40px 30px;

    border-radius:30px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.35s;

}



.program-card:hover{

    transform:translateY(-12px);

}



.program-card .icon{

    font-size:60px;

    margin-bottom:20px;

}



.program-card h3{

    font-size:28px;

    color:var(--kids-blue);

    margin-bottom:15px;

}



.program-card p{

    color:var(--gray);

    line-height:1.8;

    margin-bottom:25px;

}



.program-card button{

    border:none;

    background:var(--kids-blue);

    color:white;

    padding:14px 32px;

    border-radius:40px;

    font-weight:700;

}



/* =========================================
   SCHOOLS SECTION
========================================= */


.schools-section{

    padding:130px 40px;

    background:#F7F8FF;

}



.schools-container{

    max-width:1300px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}



.school-badge{

    display:inline-block;

    background:#FFF4B8;

    padding:12px 25px;

    border-radius:40px;

    font-weight:700;

    margin-bottom:25px;

}



.schools-left h2{

    font-size:56px;

    line-height:1.2;

    margin-bottom:25px;

}



.schools-left p{

    font-size:20px;

    color:var(--gray);

    line-height:1.8;

    margin-bottom:35px;

}



.school-list{

    list-style:none;

    margin-bottom:40px;

}



.school-list li{

    font-size:18px;

    margin-bottom:18px;

}



.school-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}



.secondary{

    background:white;

    color:var(--kids-blue);

    border:2px solid var(--kids-blue);

    padding:16px 35px;

    border-radius:50px;

    font-weight:700;

}



.school-card{

    width:360px;

    height:420px;

    margin:auto;

    background:white;

    border-radius:45px;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:var(--shadow);

}



.school-box{

    font-size:120px;

}



/* =========================================
   LEARNING JOURNEY
========================================= */


.journey-section{

    padding:130px 40px;

    background:white;

}



.journey{

    margin-top:70px;

    display:flex;

    justify-content:center;

    align-items:flex-start;

    gap:25px;

    flex-wrap:wrap;

}



.journey-step{

    width:230px;

    text-align:center;

}



.step-number{

    width:70px;

    height:70px;

    margin:auto;

    background:var(--kids-blue);

    color:white;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    font-weight:800;

    margin-bottom:20px;

    box-shadow:

    0 15px 35px rgba(79,70,229,.25);

}



.journey-step h3{

    color:var(--kids-blue);

    font-size:28px;

    margin-bottom:15px;

}



.journey-step p{

    color:var(--gray);

    line-height:1.8;

}



.journey-line{

    width:70px;

    height:4px;

    background:#DDD6FE;

    margin-top:35px;

    border-radius:20px;

}


/* =========================================
   WHY KIDSORRA
========================================= */


.why-kidsorra{

    padding:130px 40px;

    background:#F8F7FF;

}



.why-grid{

    max-width:1300px;

    margin:70px auto 0;

    display:grid;

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

    gap:30px;

}



.why-card{

    background:white;

    padding:40px 30px;

    border-radius:30px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.35s;

}



.why-card:hover{

    transform:translateY(-12px);

}



.why-icon{

    font-size:60px;

    margin-bottom:20px;

}



.why-card h3{

    font-size:26px;

    color:var(--kids-blue);

    margin-bottom:15px;

}



.why-card p{

    color:var(--gray);

    line-height:1.8;

}





/* =========================================
   EXPERIENCE SECTION
========================================= */


.experience{

    padding:130px 40px;

    background:white;

    text-align:center;

}



.experience h2{

    font-size:52px;

    color:var(--kids-blue);

    font-weight:800;

    margin-bottom:20px;

}



.experience>p{

    font-size:20px;

    color:var(--gray);

    margin-bottom:60px;

}



.experience-grid{

    max-width:1300px;

    margin:auto;

    display:grid;

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

    gap:30px;

}



.experience-card{

    background:white;

    padding:40px 30px;

    border-radius:30px;

    box-shadow:var(--shadow);

    transition:.35s;

}



.experience-card:hover{

    transform:translateY(-12px);

}



.experience-icon{

    font-size:60px;

    margin-bottom:20px;

}



.experience-card h3{

    color:var(--kids-blue);

    font-size:28px;

    margin-bottom:15px;

}



.experience-card p{

    color:var(--gray);

}





/* =========================================
   FOOTER
========================================= */


footer{

    padding:70px 40px;

    background:#252525;

    text-align:center;

    color:white;

}



footer .logo{

    font-size:36px;

    margin-bottom:15px;

}



footer p{

    color:#ddd;

    font-size:18px;

}





/* =========================================
   ANIMATIONS
========================================= */


@keyframes floatCharacter{


    0%,100%{

        transform:translateY(0);

    }


    50%{

        transform:translateY(-20px);

    }

}



@keyframes pulseMagic{


    from{

        transform:scale(1);

    }


    to{

        transform:scale(1.08);

    }

}



@keyframes starFloat{


    0%,100%{

        transform:translateY(0);

        opacity:.6;

    }


    50%{

        transform:translateY(-25px);

        opacity:1;

    }

}



/* Scroll Animation */


.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:.8s ease;

}



.fade-up.show{

    opacity:1;

    transform:translateY(0);

}





/* =========================================
   FINAL MOBILE RESPONSIVE
========================================= */


@media(max-width:900px){


    .navbar{

        padding:20px;

    }


    .nav-links{

        display:none;

    }


    .demo-btn{

        display:none;

    }


    .menu-toggle{

        display:block;

    }



    .hero{

        min-height:auto;

        padding:130px 20px 70px;

    }



    .hero-container{

        grid-template-columns:1fr;

        text-align:center;

        gap:40px;

    }



    .hero-content{

        width:100%;

    }



    .hero-content h1{

        font-size:48px;

        letter-spacing:-1px;

    }



    .hero-content p{

        font-size:17px;

        margin:auto;

        margin-bottom:35px;

    }



    .hero-buttons{

        justify-content:center;

        flex-direction:column;

        align-items:center;

    }



    .btn-primary,

    .btn-secondary{

        width:260px;

    }



    .hero-visual{

        height:350px;

    }



    .magic-circle{

        width:270px;

        height:270px;

    }



    .character-card{

        width:230px;

        height:230px;

    }



    .floating-tag{

        font-size:12px;

        padding:8px 14px;

    }



    .stats{

        padding:70px 20px;

        flex-direction:column;

    }



    .stat{

        width:100%;

        max-width:260px;

        margin:auto;

    }



    .meet-container,

    .schools-container{

        grid-template-columns:1fr;

        text-align:center;

    }



    .meet-content h2,

    .schools-left h2{

        font-size:40px;

    }



    .program-grid,

    .why-grid,

    .experience-grid{

        grid-template-columns:1fr;

    }



    .school-buttons{

        justify-content:center;

    }



    .journey{

        flex-direction:column;

        align-items:center;

    }



    .journey-line{

        width:4px;

        height:60px;

    }



    .testimonial-container{

        flex-direction:column;

        align-items:center;

    }



}

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

@media(max-width:900px){

.nav-links{

display:none;

position:absolute;

top:85px;

left:20px;

right:20px;

background:white;

border-radius:25px;

padding:25px;

box-shadow:0 20px 50px rgba(0,0,0,.12);

flex-direction:column;

gap:20px;

z-index:999;

}

.nav-links.active{

display:flex;

}

body.menu-open{

overflow:hidden;

}

}
/* =========================================
   PART 20 STEP 1
   MOBILE NAVIGATION UPGRADE
========================================= */


.mobile-menu-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.35);

    opacity:0;

    visibility:hidden;

    transition:.35s ease;

    z-index:900;

}



.nav-links{

    transition:.4s ease;

}



/* MOBILE MENU OPEN */

@media(max-width:900px){


.nav-links{

    position:fixed;

    top:90px;

    left:20px;

    right:20px;

    background:white;

    padding:30px;

    border-radius:30px;

    display:flex;

    flex-direction:column;

    gap:25px;

    box-shadow:

    0 25px 70px rgba(0,0,0,.15);


    transform:translateY(-30px);

    opacity:0;

    pointer-events:none;

}


.nav-links.active{

    transform:translateY(0);

    opacity:1;

    pointer-events:auto;

}



.mobile-menu-overlay.active{

    opacity:1;

    visibility:visible;

}



.nav-links li{

    text-align:center;

    font-size:20px;

}


}
/* =========================================
   PART 20 STEP 2
   BACK TO TOP BUTTON
========================================= */


.back-to-top{

    position:fixed;

    right:30px;

    bottom:30px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:var(--kids-blue);

    color:white;

    font-size:24px;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;


    box-shadow:

    0 15px 40px rgba(79,70,229,.35);


    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:.35s ease;


    z-index:1000;

}



.back-to-top:hover{

    transform:translateY(-5px);

    box-shadow:

    0 25px 50px rgba(79,70,229,.45);

}



.back-to-top.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}



@media(max-width:900px){


.back-to-top{

    width:50px;

    height:50px;

    right:20px;

    bottom:20px;

    font-size:20px;

}


}
/* =========================================
   PART 20 STEP 3
   PREMIUM SCROLL EFFECTS
========================================= */

.fade-up{

    opacity:0;

    transform:translateY(60px);

    transition:
    opacity .8s ease,
    transform .8s ease;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}

/* Delay Animation */

.program-card:nth-child(1),
.why-card:nth-child(1),
.experience-card:nth-child(1),
.testimonial:nth-child(1){

    transition-delay:.1s;

}

.program-card:nth-child(2),
.why-card:nth-child(2),
.experience-card:nth-child(2),
.testimonial:nth-child(2){

    transition-delay:.25s;

}

.program-card:nth-child(3),
.why-card:nth-child(3),
.experience-card:nth-child(3),
.testimonial:nth-child(3){

    transition-delay:.4s;

}

.program-card:nth-child(4),
.why-card:nth-child(4),
.experience-card:nth-child(4){

    transition-delay:.55s;

}

/* Hover Upgrade */

.program-card,
.why-card,
.experience-card,
.testimonial,
.stat{

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

}

.program-card:hover,
.why-card:hover,
.experience-card:hover,
.testimonial:hover,
.stat:hover{

transform:
translateY(-12px)
scale(1.02);

box-shadow:
0 30px 70px rgba(0,0,0,.12);

}



/* =====================================
   PART 20 — STEP 4
   PREMIUM MICRO INTERACTIONS
===================================== */


/* ===============================
   BUTTON RIPPLE READY
=============================== */

button,
.btn-primary,
.btn-secondary,
.primary,
.secondary,
.demo-btn{

    position:relative;
    overflow:hidden;
    transition:
    transform .3s ease,
    box-shadow .3s ease;

}


button:hover,
.btn-primary:hover,
.btn-secondary:hover,
.primary:hover,
.secondary:hover,
.demo-btn:hover{

    transform:translateY(-5px);

}



/* ===============================
   CARD PREMIUM MOTION
=============================== */


.program-card,
.why-card,
.experience-card,
.testimonial,
.stat{

    position:relative;
    overflow:hidden;

}



.program-card::before,
.why-card::before,
.experience-card::before,
.testimonial::before,
.stat::before{

    content:"";

    position:absolute;

    width:0;

    height:0;

    top:50%;

    left:50%;

    background:
    radial-gradient(
        circle,
        rgba(79,70,229,.15),
        transparent 70%
    );

    transform:translate(-50%,-50%);

    transition:.5s;

}



.program-card:hover::before,
.why-card:hover::before,
.experience-card:hover::before,
.testimonial:hover::before,
.stat:hover::before{

    width:400px;

    height:400px;

}



/* ===============================
   HERO CHARACTER PREMIUM FLOAT
=============================== */


.character-card{

    animation:
    floatCharacter 5s ease-in-out infinite,
    glowCharacter 4s infinite alternate;

}



@keyframes glowCharacter{


from{

    box-shadow:
    0 35px 80px rgba(79,70,229,.15);

}


to{

    box-shadow:
    0 35px 100px rgba(168,85,247,.35);

}

}



/* ===============================
   MAGIC CIRCLE UPGRADE
=============================== */


.magic-circle{

    animation:

    pulseMagic 6s infinite alternate,
    rotateMagic 20s linear infinite;

}



@keyframes rotateMagic{

from{

    transform:rotate(0deg);

}

to{

    transform:rotate(360deg);

}

}



/* ===============================
   SECTION TITLE ANIMATION
=============================== */


.section-title span{

    transition:.4s;

}


.section-title span:hover{

    transform:scale(1.08);

}



/* ===============================
   NAVBAR PREMIUM
=============================== */


.navbar{

    transition:.4s;

}



.navbar.scrolled{

    padding-top:15px;

    padding-bottom:15px;

    box-shadow:

    0 15px 40px rgba(0,0,0,.12);

}



/* ===============================
   SMOOTH IMAGE / AVATAR
=============================== */


.kidsorra-avatar,
.school-card{

    transition:.5s ease;

}



.kidsorra-avatar:hover,
.school-card:hover{

    transform:

    translateY(-10px)

    scale(1.03);

}



/* ===============================
   MOBILE TOUCH FEEL
=============================== */


@media(max-width:900px){


button:active{

    transform:scale(.96);

}


.program-card:active,
.why-card:active,
.experience-card:active{

    transform:scale(.98);

}


}

/* =====================================
   PART 20 — STEP 4
   RIPPLE + CURSOR GLOW
===================================== */


/* ===============================
   RIPPLE EFFECT
=============================== */

button,
.btn-primary,
.btn-secondary,
.primary,
.secondary,
.demo-btn{

    overflow:hidden;
    position:relative;

}

.ripple{

    position:absolute;

    border-radius:50%;

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

    transform:scale(0);

    animation:rippleEffect .6s linear;

    pointer-events:none;

}

@keyframes rippleEffect{

    to{

        transform:scale(4);

        opacity:0;

    }

}



/* ===============================
   CURSOR GLOW
=============================== */

.cursor-glow{

    position:fixed;

    width:26px;

    height:26px;

    border-radius:50%;

    background:rgba(91,77,255,.18);

    pointer-events:none;

    transform:translate(-50%,-50%);

    transition:
    left .05s linear,
    top .05s linear;

    z-index:9999;

    filter:blur(10px);

}



/* موبایل */

@media(max-width:900px){

.cursor-glow{

display:none;

}

}


/* =====================================
   PART 20 — STEP 5
   PREMIUM PRELOADER
===================================== */

#preloader{

    position:fixed;
    inset:0;

    background:linear-gradient(
        135deg,
        #F8FBFF,
        #FFFFFF,
        #F5F3FF
    );

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

    z-index:99999;

    transition:opacity .8s ease,
               visibility .8s ease;

}

#preloader.hide{

    opacity:0;
    visibility:hidden;

}

.loader-content{

    text-align:center;

}

.loader-logo{

    font-size:90px;

    animation:
    loaderFloat 2s ease-in-out infinite;

}

.loader-content h2{

    margin-top:15px;

    font-size:38px;

    font-weight:800;

    color:#4F46E5;

    letter-spacing:1px;

}

.loader-bar{

    width:220px;
    height:8px;

    background:#E9E9F8;

    border-radius:30px;

    margin:30px auto 0;

    overflow:hidden;

}

.loader-bar span{

    display:block;

    width:40%;
    height:100%;

    background:linear-gradient(
        90deg,
        #4F46E5,
        #A855F7
    );

    border-radius:30px;

    animation:loadingBar 1.5s infinite;

}

@keyframes loadingBar{

    0%{

        transform:translateX(-100%);

    }

    100%{

        transform:translateX(550%);

    }

}

@keyframes loaderFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}

/* =====================================
PRELOADER
===================================== */

#preloader{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:white;

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

transition:.8s;

}

.loader{

font-size:90px;

animation:loaderBounce 1s infinite ease-in-out;

}

@keyframes loaderBounce{

0%,100%{

transform:scale(1);

}

50%{

transform:scale(1.2);

}

}

#preloader.hide{

opacity:0;

visibility:hidden;

}



/* =====================================
PREMIUM CURSOR
===================================== */

.cursor-dot{

position:fixed;

width:10px;

height:10px;

background:#4F46E5;

border-radius:50%;

pointer-events:none;

z-index:999999;

transform:translate(-50%,-50%);

}


.cursor-ring{

position:fixed;

width:45px;

height:45px;

border:2px solid #A855F7;

border-radius:50%;

pointer-events:none;

z-index:999998;

transform:translate(-50%,-50%);

transition:.15s ease;

}


.cursor-ring.active{

transform:
translate(-50%,-50%)
scale(1.7);

background:rgba(168,85,247,.1);

}


/* =====================================
PREMIUM FOOTER
===================================== */


.footer{

background:#252525;

padding:80px 8% 30px;

color:white;

}



.footer-container{

max-width:1200px;

margin:auto;

display:grid;

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

gap:50px;

}



.footer h2{

font-size:42px;

font-weight:900;

background:linear-gradient(
90deg,
#4F46E5,
#A855F7
);

-webkit-background-clip:text;

color:transparent;

margin-bottom:20px;

}



.footer h3{

font-size:22px;

margin-bottom:20px;

}



.footer p{

color:#ddd;

line-height:1.8;

}



.footer-links{

display:flex;

flex-direction:column;

gap:12px;

}



.footer-links a{

text-decoration:none;

color:#ddd;

transition:.3s;

}



.footer-links a:hover{

color:#FFD93D;

transform:translateX(5px);

}



.footer-contact p{

margin-bottom:10px;

}



.footer-bottom{

margin-top:60px;

padding-top:25px;

border-top:1px solid rgba(255,255,255,.15);

text-align:center;

color:#aaa;

}



/* MOBILE */

@media(max-width:900px){


.footer-container{

grid-template-columns:1fr;

text-align:center;

}


.footer-links{

align-items:center;

}


.footer{

padding:60px 25px 25px;

}


}

/* =================================
PART 20 STEP 5
Hover Glow
================================= */

.program-card,
.why-card,
.experience-card,
.testimonial,
.stat{

transition:.35s ease;

}

.program-card:hover,
.why-card:hover,
.experience-card:hover,
.testimonial:hover,
.stat:hover{

transform:translateY(-12px);

box-shadow:
0 25px 60px rgba(79,70,229,.18);

}


button{

transition:.3s ease;

}

button:hover{

filter:brightness(1.05);

}


/* =================================
PART 20 STEP 6
SCROLL REVEAL
================================= */


.reveal{

    opacity:0;

    transform:translateY(50px);

    transition:
    opacity .8s ease,
    transform .8s ease;

}



.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/* =================================
PART 20 STEP 7
FLOATING MAGIC EFFECTS
================================= */


.star{

    animation:
    magicFloat 5s ease-in-out infinite;

}



.star-1{

    animation-delay:0s;

}


.star-2{

    animation-delay:1s;

}


.star-3{

    animation-delay:2s;

}


.star-4{

    animation-delay:3s;

}



.character-card{

    animation:
    characterFloat 5s ease-in-out infinite;

}



.floating-tag{

    animation:
    tagFloat 4s ease-in-out infinite;

}



.tag-two{

    animation-delay:1s;

}


.tag-three{

    animation-delay:2s;

}





@keyframes magicFloat{


0%{

    transform:translateY(0) rotate(0deg);

}


50%{

    transform:translateY(-25px) rotate(10deg);

}


100%{

    transform:translateY(0) rotate(0deg);

}


}





@keyframes characterFloat{


0%{

    transform:translateY(0);

}


50%{

    transform:translateY(-18px);

}


100%{

    transform:translateY(0);

}


}




@keyframes tagFloat{


0%{

    transform:translateY(0);

}


50%{

    transform:translateY(-10px);

}


100%{

    transform:translateY(0);

}


}

/* =================================
PART 20 STEP 8
PRELOADER EXIT
================================= */

#preloader{

transition:
opacity .8s ease,
visibility .8s ease;

}
/* =================================
PART 20 STEP 9
PARALLAX SMOOTH
================================= */


.hero-visual{

transition:
transform .25s ease-out;

}



.star{

transition:
transform .25s ease-out;

}
/* =================================
PART 20 STEP 10
FINAL PREMIUM POLISH
================================= */


/* نرم‌تر شدن همه کارت‌ها */

.program-card,
.why-card,
.experience-card,
.testimonial,
.stat,
.school-card,
.character-card{

transition:
all .35s ease;

}



/* Hover حرفه‌ای */

.program-card:hover,
.why-card:hover,
.experience-card:hover,
.testimonial:hover,
.stat:hover,
.school-card:hover{

transform:
translateY(-10px);

box-shadow:
0 30px 70px rgba(79,70,229,.18);

}



/* دکمه‌ها */

.btn-primary,
.btn-secondary,
.primary,
.secondary,
.demo-btn{

transition:
all .3s ease;

}



.btn-primary:hover,
.primary:hover{

transform:
translateY(-3px);

box-shadow:
0 18px 35px rgba(79,70,229,.35);

}



.btn-secondary:hover,
.secondary:hover{

transform:
translateY(-3px);

}



/* لوگو */

.logo{

transition:.3s;

}

.logo:hover{

transform:scale(1.04);

}



/* لینک‌های منو */

.nav-links li{

position:relative;

}



.nav-links li::after{

content:"";

position:absolute;

left:0;

bottom:-6px;

width:0;

height:3px;

background:var(--kids-blue);

transition:.3s;

border-radius:10px;

}



.nav-links li:hover::after{

width:100%;

}



/* Footer */

.footer a{

transition:.3s;

}



.footer a:hover{

color:var(--kids-yellow);

}



/* انتخاب متن */

::selection{

background:var(--kids-blue);

color:white;

}



/* اسکرول بار */

::-webkit-scrollbar{

width:10px;

}



::-webkit-scrollbar-thumb{

background:linear-gradient(
180deg,
var(--kids-blue),
var(--kids-purple)
);

border-radius:20px;

}



::-webkit-scrollbar-track{

background:#F2F4FF;

}
/* =================================
PART 21 STEP 3
BOOKING FORM
================================= */


.booking-section{

padding:120px 8%;

background:#F8F9FF;

}



.booking-card{

max-width:900px;

margin:auto;

background:white;

padding:50px;

border-radius:35px;

box-shadow:
0 25px 70px rgba(0,0,0,.08);

}



.booking-form{

display:flex;

flex-direction:column;

gap:25px;

}



.form-row{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

}



.booking-form input,
.booking-form select,
.booking-form textarea{

width:100%;

padding:18px 20px;

border:2px solid #E7E7F3;

border-radius:18px;

font-size:17px;

font-family:inherit;

transition:.3s;

background:#fff;

}



.booking-form textarea{

min-height:160px;

resize:vertical;

}



.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus{

outline:none;

border-color:var(--kids-blue);

box-shadow:
0 0 0 4px rgba(79,70,229,.12);

}



.booking-form button{

align-self:center;

width:280px;

margin-top:10px;

}



.booking-form input::placeholder,
.booking-form textarea::placeholder{

color:#888;

}



/* MOBILE */

@media(max-width:900px){

.booking-card{

padding:30px 20px;

}


.form-row{

grid-template-columns:1fr;

}


.booking-form button{

width:100%;

}

}
/* ===============================
   KIDSORRA METHOD SECTION
================================ */

.method-section{

    padding:100px 8%;

    background:#fff8f2;

}


.method-container{

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}



.method-left{

    animation:fadeUp .8s ease;

}



.method-badge{

    display:inline-block;

    padding:10px 22px;

    background:#ffffff;

    border-radius:30px;

    color:#ff8a3d;

    font-weight:600;

    margin-bottom:25px;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}



.method-left h2{

    font-size:42px;

    line-height:1.2;

    color:#222;

    margin-bottom:25px;

}



.method-left p{

    font-size:17px;

    line-height:1.8;

    color:#555;

    margin-bottom:18px;

}




/* RIGHT CARD */


.method-right{

    display:flex;

    justify-content:center;

}



.method-card{

    background:white;

    padding:40px;

    border-radius:35px;

    width:100%;

    max-width:400px;

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

    text-align:center;

}



.method-circle{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:45px;

    background:linear-gradient(135deg,#ffd86f,#ff9a9e);

    margin-bottom:25px;

}



.method-card h3{

    font-size:26px;

    color:#222;

    margin-bottom:25px;

}



.method-card ul{

    list-style:none;

    text-align:left;

}



.method-card li{

    padding:10px 0;

    font-size:16px;

    color:#555;

    border-bottom:1px solid #eee;

}



/* MOBILE */

@media(max-width:900px){


.method-container{

    grid-template-columns:1fr;

    text-align:center;

}



.method-left h2{

    font-size:32px;

}



.method-card{

    margin:auto;

}


}

/* ===============================
   WHY KIDSORRA SECTION
================================ */


.why-parents{

    padding:100px 8%;

    background:#ffffff;

}



.why-grid{

    max-width:1200px;

    margin:60px auto 0;

    display:grid;

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

    gap:30px;

}




.why-box{

    background:#fff;

    padding:35px 30px;

    border-radius:30px;

    text-align:center;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.35s ease;

    border:1px solid rgba(255,190,100,.15);

}



.why-box:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 55px rgba(0,0,0,.12);

}




.why-icon{

    width:80px;

    height:80px;

    margin:0 auto 25px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    font-size:40px;

    background:linear-gradient(
    135deg,
    #ffe259,
    #ffa751
    );

}



.why-box h3{

    font-size:24px;

    color:#222;

    margin-bottom:15px;

}



.why-box p{

    font-size:16px;

    line-height:1.7;

    color:#666;

}




/* Different icon colors */

.why-box:nth-child(2) .why-icon{

    background:linear-gradient(
    135deg,
    #a8ff78,
    #78ffd6
    );

}



.why-box:nth-child(3) .why-icon{

    background:linear-gradient(
    135deg,
    #ff9a9e,
    #fad0c4
    );

}



.why-box:nth-child(4) .why-icon{

    background:linear-gradient(
    135deg,
    #84fab0,
    #8fd3f4
    );

}



.why-box:nth-child(5) .why-icon{

    background:linear-gradient(
    135deg,
    #c3cfe2,
    #f5f7fa
    );

}



.why-box:nth-child(6) .why-icon{

    background:linear-gradient(
    135deg,
    #fbc2eb,
    #a6c1ee
    );

}



/* MOBILE */

@media(max-width:900px){


.why-grid{

    grid-template-columns:1fr;

}


.why-box{

    padding:30px 20px;

}


}

/* ===============================
   FOR PARENTS SECTION
================================ */

.parents-section{

    padding:100px 8%;

    background:#fff8f2;

}


.parents-container{

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}



.parents-badge{

    display:inline-block;

    padding:10px 22px;

    background:#ffffff;

    border-radius:30px;

    color:#ff8a3d;

    font-weight:600;

    margin-bottom:20px;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}



.parents-content h2{

    font-size:42px;

    color:#222;

    line-height:1.2;

    margin-bottom:25px;

}



.parents-content p{

    font-size:17px;

    line-height:1.8;

    color:#666;

    margin-bottom:20px;

}



/* Parent Points */

.parents-points{

    margin:40px 0;

}



.parent-point{

    display:flex;

    gap:18px;

    margin-bottom:25px;

    align-items:flex-start;

}



.parent-point span{

    width:65px;

    height:65px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    font-size:30px;

    background:linear-gradient(
    135deg,
    #ffe259,
    #ffa751
    );

    flex-shrink:0;

}



.parent-point h3{

    font-size:22px;

    color:#222;

    margin-bottom:8px;

}



.parent-point p{

    margin:0;

}



/* RIGHT SIDE */

.parents-visual{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

}



.parent-circle{

    width:170px;

    height:170px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:80px;

    background:linear-gradient(
    135deg,
    #84fab0,
    #8fd3f4
    );

    margin-bottom:35px;

    box-shadow:0 25px 60px rgba(0,0,0,.12);

}



.parent-card{

    background:white;

    padding:35px;

    border-radius:30px;

    text-align:center;

    box-shadow:0 20px 45px rgba(0,0,0,.08);

    max-width:340px;

}



.parent-card h3{

    font-size:26px;

    color:#222;

    margin-bottom:18px;

}



.parent-card p{

    color:#666;

    line-height:1.8;

}



/* MOBILE */

@media(max-width:900px){

.parents-container{

grid-template-columns:1fr;

text-align:center;

}

.parents-content h2{

font-size:34px;

}

.parent-point{

flex-direction:column;

align-items:center;

text-align:center;

}

.parents-visual{

margin-top:40px;

}

}

/* ================= FAQ SECTION ================= */

.faq-section {
    padding: 100px 8%;
    background: #fffaf5;
}


.faq-container {
    max-width: 900px;
    margin: 50px auto 0;
}


.faq-item {
    background: white;
    border-radius: 20px;
    margin-bottom: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    overflow: hidden;
}


.faq-question {

    width: 100%;
    padding: 25px 30px;
    background: transparent;
    border: none;

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

    font-size: 18px;
    font-weight: 600;
    color: #333;

    cursor: pointer;
}


.faq-question span {

    font-size: 28px;
    color: #ff9f1c;

}



.faq-answer {

    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease;

}



.faq-answer p {

    padding: 0 30px 25px;

    color: #666;
    line-height: 1.8;
    font-size: 16px;

}



/* Active */

.faq-item.active 
.faq-answer {

    max-height: 300px;

}


.faq-item.active 
.faq-question span {

    transform: rotate(45deg);

}



/* Mobile */

@media(max-width:768px){

    .faq-section{

        padding:70px 5%;

    }


    .faq-question{

        font-size:16px;
        padding:20px;

    }


    .faq-answer p{

        padding:0 20px 20px;

    }

}
/* ===============================
   CONTACT SECTION
================================ */

.contact-section{

    padding:100px 8%;

    background:#ffffff;

}



.contact-container{

    max-width:1100px;

    margin:50px auto;

    display:grid;

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

    gap:30px;

}



.contact-card{

    background:#fff8f2;

    padding:35px 25px;

    border-radius:30px;

    text-align:center;

    transition:.3s ease;

    box-shadow:0 15px 35px rgba(0,0,0,.06);

}



.contact-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 50px rgba(0,0,0,.1);

}



.contact-icon{

    width:80px;

    height:80px;

    margin:0 auto 20px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:40px;

    background:linear-gradient(
        135deg,
        #ffe259,
        #ffa751
    );

}



.contact-card h3{

    font-size:24px;

    color:#222;

    margin-bottom:12px;

}



.contact-card p{

    color:#666;

    font-size:16px;

}



/* ACTION BOX */


.contact-action{

    max-width:800px;

    margin:50px auto 0;

    padding:45px;

    text-align:center;

    background:linear-gradient(
        135deg,
        #fff3cd,
        #ffe8d6
    );

    border-radius:35px;

}



.contact-action h3{

    font-size:30px;

    margin-bottom:15px;

    color:#222;

}



.contact-action p{

    color:#555;

    margin-bottom:25px;

}



/* MOBILE */


@media(max-width:900px){


.contact-container{

    grid-template-columns:1fr;

}



.contact-action{

    padding:30px 20px;

}



.contact-action h3{

    font-size:24px;

}

}
/* =================================
   BOOKING FORM
================================= */

.booking-section{

padding:100px 8%;

background:#fff7ef;

}

.booking-card{

max-width:850px;

margin:50px auto 0;

background:white;

padding:50px;

border-radius:35px;

box-shadow:0 25px 60px rgba(0,0,0,.08);

}

.booking-form{

display:flex;

flex-direction:column;

gap:22px;

}

.form-row{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

}

.booking-form input,
.booking-form select,
.booking-form textarea{

width:100%;

padding:18px 20px;

border-radius:18px;

border:2px solid #f1f1f1;

font-size:16px;

font-family:'Poppins',sans-serif;

transition:.3s;

background:white;

}

.booking-form textarea{

min-height:140px;

resize:none;

}

.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus{

outline:none;

border-color:#ffb84d;

box-shadow:0 0 15px rgba(255,184,77,.25);

}

.booking-form button{

align-self:center;

margin-top:10px;

padding:18px 45px;

font-size:18px;

border-radius:40px;

cursor:pointer;

transition:.35s;

}

.booking-form button:hover{

transform:translateY(-3px);

}

@media(max-width:768px){

.booking-card{

padding:30px 22px;

}

.form-row{

grid-template-columns:1fr;

}

}

/* ==================================
   PREMIUM FOOTER
================================== */

.footer{

background:#20252d;

color:white;

padding:80px 8% 25px;

}

.footer-container{

max-width:1200px;

margin:auto;

display:grid;

grid-template-columns:2fr 1fr 1fr;

gap:60px;

}

.footer-logo{

font-size:34px;

margin-bottom:20px;

font-weight:700;

}

.footer-column p{

line-height:1.8;

color:#d8d8d8;

margin-bottom:12px;

}

.footer-column h3{

margin-bottom:20px;

font-size:22px;

}

.footer-column ul{

list-style:none;

padding:0;

}

.footer-column li{

margin-bottom:12px;

}

.footer-column a{

color:#eeeeee;

text-decoration:none;

transition:.3s;

}

.footer-column a:hover{

color:#ffb84d;

}

.footer-btn{

display:inline-block;

margin-top:20px;

padding:14px 28px;

border-radius:35px;

background:#ffb84d;

color:#222 !important;

font-weight:600;

transition:.35s;

}

.footer-btn:hover{

transform:translateY(-3px);

background:white;

}

.footer-bottom{

margin-top:60px;

padding-top:25px;

border-top:1px solid rgba(255,255,255,.15);

text-align:center;

font-size:15px;

color:#bdbdbd;

}

/* Mobile */

@media(max-width:900px){

.footer-container{

grid-template-columns:1fr;

text-align:center;

gap:45px;

}

.footer-btn{

margin:auto;

}

}

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

.menu-toggle{

display:none;

font-size:32px;

cursor:pointer;

color:#333;

z-index:1002;

transition:.3s;

}

.mobile-menu-overlay{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.45);

opacity:0;

visibility:hidden;

transition:.35s;

z-index:998;

}

.mobile-menu-overlay.active{

opacity:1;

visibility:visible;

}



@media(max-width:900px){

.nav-links{

position:fixed;

top:0;

right:-100%;

width:300px;

height:100vh;

background:white;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

gap:35px;

transition:.45s;

z-index:999;

box-shadow:-10px 0 40px rgba(0,0,0,.12);

}

.nav-links.active{

right:0;

}

.nav-links li{

font-size:22px;

font-weight:600;

cursor:pointer;

}

.demo-btn{

display:none;

}

.menu-toggle{

display:block;

}

body.menu-open{

overflow:hidden;

}

}

/* ===============================
   SCROLL ANIMATION
=============================== */

section,
.program-card,
.why-card,
.experience-card,
.contact-card,
.faq-item{

opacity:0;

transform:translateY(40px);

transition:.8s ease;

}

.show{

opacity:1;

transform:translateY(0);

}


/* ===============================
   STICKY HEADER
=============================== */

header.sticky{

background:white;

box-shadow:0 10px 25px rgba(0,0,0,.08);

transition:.3s;

}