/*==================================================
  GUA'A Importadora
  Responsive.css
==================================================*/

/*=========================================
768px
=========================================*/

@media (min-width:768px){

    .header .container{

        padding:18px 30px;

    }

    .logo img{

        height:80px;

    }

    .hero{

        background-position:center;

    }

    .contact-buttons{

        flex-direction:row;

        justify-content:center;

    }

    .empresa-grid{

        grid-template-columns:1fr 1fr;

    }

    .productos-grid{

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

    }

    .ventajas-grid{

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

    }

}

/*=========================================
1024px
=========================================*/

@media (min-width:1024px){

    .menu-toggle{

        display:none;

    }

    .navbar{

        display:block;

    }

    .navbar ul{

        display:flex;

        align-items:center;

        gap:35px;

    }

    .navbar a{

        color:#ffffff;

        font-weight:500;

        transition:.3s;

        position:relative;

    }

    .navbar a:hover{

        color:#FFC107;

    }

    .navbar a::after{

        content:"";

        position:absolute;

        left:0;

        bottom:-8px;

        width:0;

        height:2px;

        background:#FFC107;

        transition:.3s;

    }

    .navbar a:hover::after{

        width:100%;

    }

    .btn-whatsapp{

        display:inline-flex;

        align-items:center;

        gap:10px;

        padding:14px 22px;

        border-radius:40px;

        background:#25D366;

        color:#fff;

        font-weight:600;

        transition:.3s;

    }

    .btn-whatsapp:hover{

        transform:translateY(-3px);

    }

    .hero{

        background-position:right center;

    }

    .hero-content{

        width:55%;

    }

    .hero p{

        font-size:1.15rem;

    }

    .productos-grid{

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

    }

    .ventajas-grid{

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

    }

}

/*=========================================
1400px
=========================================*/

@media (min-width:1400px){

    .hero-content{

        max-width:720px;

    }

    .hero h1{

        font-size:5.3rem;

    }

}