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

@media (max-width:992px){

    .hero-grid,
    .about-grid,
    .contact-grid,
    .footer-grid{
        grid-template-columns:1fr;
        gap:40px;
    }

    .why-grid{
        grid-template-columns:1fr 1fr;
    }

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

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

}


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

@media (max-width:768px){

    html{
        font-size:15px;
    }

    .container{
        width:92%;
    }

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

    .navbar{
        position:relative;
        padding:15px 0;
    }

    .menu-toggle{
        display:block;
        font-size:30px;
        cursor:pointer;
        color:var(--primary);
        z-index:1001;
    }

    .btn-nav{
        display:none;
    }

    .nav-links{
        display:none;
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        background:#fff;
        flex-direction:column;
        align-items:center;
        padding:20px 0;
        box-shadow:0 10px 20px rgba(0,0,0,.12);
    }

    .nav-links.active{
        display:flex;
    }

    .nav-links li{
        width:100%;
    }

    .nav-links li a{
        display:block;
        padding:15px;
        text-align:center;
    }

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

    .hero{
        padding:60px 0;
    }

    .hero-grid{
        grid-template-columns:1fr;
        gap:40px;
        text-align:center;
    }

    .hero-content{
        order:2;
    }

    .hero-image{
        order:1;
    }

    .hero-image img{
        width:100%;
        max-width:300px;
        margin:auto;
    }

    .hero h1{
        font-size:38px;
        max-width:100%;
    }

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

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

    .btn-primary,
    .btn-secondary{
        width:100%;
        text-align:center;
    }

    .hero-features{
        grid-template-columns:1fr;
    }

    /*==================
            ABOUT
    ==================*/

    .about-grid{
        grid-template-columns:1fr;
        text-align:center;
        gap:40px;
    }

    .about-image{
        order:1;
    }

    .about-content{
        order:2;
    }

    .about-content h2{
        font-size:34px;
    }

    .about-features{
        grid-template-columns:1fr;
    }

    /*==================
        WHY US
    ==================*/

    .why-grid{
        grid-template-columns:1fr;
    }

    /*==================
        HOW IT WORKS
    ==================*/

    .steps-grid{
        grid-template-columns:1fr;
    }

    .step-card{
        padding:30px 20px;
    }

    /*==================
        SERVICES
    ==================*/

    .services-grid{
        grid-template-columns:1fr;
    }

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

    .faq-question{
        font-size:18px;
        padding:20px;
    }

    /*==================
        CONTACT
    ==================*/

    .contact-grid{
        grid-template-columns:1fr;
    }

    .contact-form{
        padding:25px;
    }

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

    .footer-grid{
        grid-template-columns:1fr;
        text-align:center;
        gap:30px;
    }

    .footer-brand{
        flex-direction:column;
        align-items:center;
        text-align:center;
    }

    .footer-logo{
        margin:auto;
    }

}