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

@media(max-width:1024px){

    .hero,
    .feature-highlight,
    .app-section,
    .contacto{

        grid-template-columns:1fr;

        text-align:center;

    }

    .hero-content,
    .feature-content{

        order:2;

    }

    .hero-image,
    .feature-image{

        order:1;

    }

    .footer-container{

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

    }

}

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

@media(max-width:768px){

    .navbar{

        position:fixed;

        top:80px;

        right:-100%;

        width:280px;

        height:100vh;

        background:#f3efef;

        flex-direction:column;

        padding:40px;

        transition:.4s;

    }

    .navbar.active{

        right:0;

    }

    .menu-toggle{

        display:block;

        cursor:pointer;

        font-size:1.5rem;

    }

    .hero h1{

        font-size:2.7rem;

    }

    .section-title h2{

        font-size:2rem;

    }

    .feature-content h2,
    .contacto-info h2,
    .app-content h2{

        font-size:2rem;

    }

    .footer-container{

        grid-template-columns:1fr;

        text-align:center;

    }

    .social-icons{

        justify-content:center;

    }

}

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

@media(max-width:480px){

    .hero{

        padding-top:140px;

    }

    .hero h1{

        font-size:2.2rem;

    }

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

        width:100%;

        text-align:center;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .contact-form{

        padding:25px;

    }

}