/*==========================================
        RESPONSIVE - GRUPO JIN
===========================================*/

/*=============================
        LAPTOPS
==============================*/

@media (max-width:1200px){

    .container{

        width:95%;

    }

}


/*=============================
        TABLETS
==============================*/

@media (max-width:992px){

    header .container{

        height:75px;

    }

    .logo img{

        height:50px;

    }

    nav ul{

        gap:18px;

    }

    .overlay h1{

        font-size:45px;

    }

    .overlay p{

        font-size:20px;

    }

    .contact{

        grid-template-columns:1fr;

    }

}


/*=============================
        CELULARES
==============================*/

@media (max-width:768px){

    header .container{

        display:flex;
        justify-content:space-between;
        align-items:center;
        height:70px;
        padding:0 20px;

    }

    .logo img{

        height:45px;

    }

    .menu-toggle{

        display:block;

    }

    nav{

        display:none;
        position:absolute;
        top:70px;
        left:0;
        width:100%;
        background:#fff;
        box-shadow:0 5px 20px rgba(0,0,0,.15);

    }

    nav.active{

        display:block;

    }

    nav ul{

        display:flex;
        flex-direction:column;
        gap:0;

    }

    nav ul li{

        border-bottom:1px solid #eee;

    }

    nav ul li a{

        display:block;
        padding:18px 20px;

    }

    .hero{

        margin-top:70px;

    }

}

/*=============================
      CELULARES PEQUEÑOS
==============================*/

@media (max-width:576px){

    .logo img{

        height:45px;

    }

    nav ul{

        flex-direction:column;

        align-items:center;

    }

    nav li{

        width:100%;

        text-align:center;

    }

    nav a{

        display:block;

        padding:10px;

    }

    .hero{

        height:85vh;

    }

    .overlay h1{

        font-size:30px;

    }

    .overlay p{

        font-size:16px;

    }

    .buttons a{

        width:220px;

        padding:14px;

    }

    section h2{

        font-size:28px;

    }

    .brand-grid{

        grid-template-columns:1fr;

    }

    .card-body{

        padding:20px;

    }

    .card-body h3{

        font-size:20px;

    }

    .card-body p{

        font-size:15px;

    }

    .download{

        padding:20px;

    }

    .download i{

        font-size:50px;

    }

    .contact input,

    .contact textarea{

        font-size:15px;

    }

}


/*=============================
      PANTALLAS MUY PEQUEÑAS
==============================*/

@media (max-width:400px){

    .overlay h1{

        font-size:26px;

    }

    .overlay p{

        font-size:15px;

    }

    .buttons a{

        width:200px;

        font-size:14px;

    }

    section{

        padding:60px 15px;

    }

    section h2{

        font-size:24px;

    }

    .logo img{

        height:40px;

    }

}


/*======================================
      PANTALLAS GRANDES
=======================================*/

@media (min-width:1600px){

    .container{

        max-width:1400px;

    }

    .overlay h1{

        font-size:72px;

    }

    .overlay p{

        font-size:28px;

    }

}