/* =========================
   1000px
========================= */
@media (max-width:1000px){

    .desktop-menu{
        display:none !important;
    }

    .menu-toggle{
        display:block !important;
    }

    .mobile-menu{
        display:flex;
    }

    .header{
        padding:15px 20px;
    }

}


/* =========================
   Desktop Only
========================= */
@media (min-width:1001px){

    .menu-toggle{
        display:none !important;
    }

    .mobile-menu{
        display:none !important;
    }

}


/* =========================
   992px
========================= */
@media (max-width:992px){

    .trust-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .curriculum-grid{
        grid-template-columns:repeat(2,1fr);
    }

}


/* =========================
   768px
========================= */
@media (max-width:768px){

    /* Header */

    .logo h3{
        font-size:15px;
    }

    .logo small{
        font-size:9px;
    }

    .phone-btn,
    .explore-btn{
        width:100%;
        text-align:center;
    }

    /* Hero */

    h1{
        font-size:42px;
    }

    h2{
        font-size:34px;
    }

    .desc{
        font-size:16px;
        line-height:1.6;
    }

    .buttons{
        flex-direction:column;
        align-items:center;
    }

    .btn{
        width:100%;
        max-width:320px;
    }

    /* Grids */

    .trust-grid,
    .curriculum-grid,
    .teach-grid,
    .testimonial-grid{
        grid-template-columns:1fr;
    }

    .why-wrapper{
        flex-direction:column;
    }

    .footer-container{
        grid-template-columns:1fr;
    }

    /* Modal */

    .modal-content{
        width:95%;
        padding:20px;
        max-height:90vh;
        overflow-y:auto;
    }

    .form-buttons{
        flex-direction:column;
    }

    .form-buttons .btn{
        width:100%;
    }

}


/* =========================
   520px
========================= */
@media (max-width:520px){

    .header{
        padding:12px 15px;
    }

    .logo{
        gap:8px;
    }

    .crown{
        font-size:20px;
    }

    .logo h3{
        font-size:13px;
    }

    .logo small{
        font-size:8px;
    }

    .menu-toggle{
        font-size:28px;
    }

    .mobile-menu{
        width:280px;
    }

    h1{
        font-size:32px;
    }

    .desc{
        font-size:14px;
    }

    .card{
        width:100%;
        max-width:280px;
    }

    .cta-buttons{
        flex-direction:column;
        align-items:center;
    }

    .cta-btn{
        width:100%;
        max-width:300px;
    }

}


/* =========================
   480px
========================= */
@media (max-width:480px){

    .modal-content{
        width:96%;
        padding:15px;
        border-radius:12px;
    }

    .modal h2{
        font-size:20px;
    }

    .modal p{
        font-size:14px;
    }

    input,
    textarea{
        padding:12px;
        font-size:14px;
    }

    .close{
        font-size:24px;
    }

}