/*=========================================
        ECOAGROMATIC SAS
        responsive.css
==========================================*/


/*==============================
        DESKTOP
==============================*/

#menu-btn{
    display:none;
}


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

@media (max-width:992px){

    .container{
        width:92%;
    }

    .hero-overlay h1{
        font-size:2.5rem;
    }

    .hero-overlay p{
        font-size:1.05rem;
    }

    .service .container{
        grid-template-columns:1fr;
        gap:40px;
    }

    .alternate .container{
        display:flex;
        flex-direction:column-reverse;
    }

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

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

    .qr{
        width:220px;
    }

}


/*==============================
        MOVILES GRANDES
==============================*/

@media (max-width:768px){

    section{
        padding:70px 0;
    }

    .nav-container{
        height:70px;
    }

    #menu-btn{
        display:block;
        font-size:2rem;
        color:var(--primary);
        cursor:pointer;
        z-index:1001;
    }

    #navbar{

        position:absolute;

        top:70px;

        left:0;

        width:100%;

        background:white;

        box-shadow:0 10px 20px rgba(0,0,0,.12);

        display:none;

    }

    #navbar.active{
        display:block;
    }

    #navbar ul{

        flex-direction:column;

        gap:0;

    }

    #navbar ul li{

        border-bottom:1px solid #EEE;

    }

    #navbar ul li a{

        display:block;

        padding:18px;

    }

    .hero-overlay{

        padding:20px;

    }

    .hero-overlay h1{

        font-size:2rem;

    }

    .hero-overlay p{

        font-size:1rem;

        margin-bottom:30px;

    }

    .btn{

        padding:14px 28px;

    }

    .service-text{

        text-align:center;

    }

    .service-text h2{

        font-size:1.8rem;

    }

    .gallery{

        grid-template-columns:1fr 1fr;

        gap:15px;

    }

    .gallery img{

        height:190px;

    }

    .contact-grid{

        gap:30px;

    }

    .socials{

        align-items:center;

    }

    .socials a{

        font-size:1rem;

    }

}


/*==============================
        MOVILES
==============================*/

@media (max-width:576px){

    #hero{

        height:90vh;

    }

    .hero-overlay h1{

        font-size:1.8rem;

        max-width:90%;

    }

    .hero-overlay p{

        font-size:1rem;

        max-width:90%;

    }

    .btn{

        width:100%;

        max-width:280px;

        text-align:center;

    }

    .service{

        padding:60px 0;

    }

    .service-text h2{

        font-size:1.6rem;

    }

    .gallery{

        grid-template-columns:1fr;

    }

    .gallery img{

        height:230px;

    }

    #contacto h2{

        font-size:1.8rem;

    }

    .qr{

        width:180px;

    }

    footer{

        font-size:.9rem;

    }

    .whatsapp{

        width:58px;

        height:58px;

        right:18px;

        bottom:18px;

    }

}


/*==============================
        MOVILES PEQUEÑOS
==============================*/

@media (max-width:420px){

    .logo{

        font-size:1.3rem;

    }

    .hero-overlay h1{

        font-size:1.45rem;

    }

    .hero-overlay p{

        font-size:.9rem;

    }

    .service-text h2{

        font-size:1.45rem;

    }

    .container{

        width:94%;

    }

    .gallery img{

        height:200px;

    }

}


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

@media (min-width:1400px){

    .container{

        max-width:1350px;

    }

    .hero-overlay h1{

        font-size:4rem;

    }

    .hero-overlay p{

        font-size:1.3rem;

        max-width:850px;

    }

    .gallery img{

        height:280px;

    }

}


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

@media (min-width:1800px){

    .container{

        max-width:1500px;

    }

    .hero-overlay h1{

        font-size:5rem;

    }

    .hero-overlay p{

        font-size:1.5rem;

    }

}


/*==============================
        TOUCH DEVICES
==============================*/

@media (hover:none){

    .gallery img:hover{

        transform:none;

    }

    .btn:hover{

        transform:none;

    }

    .whatsapp:hover{

        transform:none;

    }

}