/*==================================================
RESPONSIVE.CSS
Propelgas Blends S.A.S.
==================================================*/

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

@media(max-width:1400px){

    .container{
        width:92%;
    }

}

/*=========================================
LAPTOP
=========================================*/

@media(max-width:1200px){

    .hero-content h1{

        font-size:52px;

    }

    .about-grid,
    .gasco-grid{

        gap:40px;

    }

    .services-grid{

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

    }

    .clients-grid{

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

    }

}

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

@media(max-width:992px){

    section{

        padding:80px 0;

    }

    .hero{

        min-height:100vh;
        padding:120px 0 80px;

    }

    .hero-content h1{

        font-size:44px;

    }

    .hero-content p{

        font-size:18px;

    }

    .about-grid,
    .gasco-grid,
    .contact-grid{

        grid-template-columns:1fr;

    }

    .about-image{

        order:1;

    }

    .about-text{

        order:2;

    }

    .timeline{

        flex-wrap:wrap;

    }

    .timeline div{

        min-width:220px;

    }

    .gallery-grid{

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

    }

}

/*=========================================
MENU RESPONSIVE
=========================================*/

@media(max-width:900px){

    .menu-toggle{

        display:block;

    }

    nav{

        position:fixed;
        top:80px;
        left:-100%;
        width:100%;
        background:#ffffff;
        transition:.4s;
        box-shadow:0 10px 25px rgba(0,0,0,.10);

    }

    nav.active{

        left:0;

    }

    nav ul{

        flex-direction:column;
        padding:30px 0;

    }

    nav ul li{

        text-align:center;
        margin:15px 0;

    }

    nav ul li a{

        color:#222 !important;
        font-size:17px;

    }

}

/*=========================================
TABLET PEQUEÑA
=========================================*/

@media(max-width:768px){

    .section-title h2{

        font-size:34px;

    }

    .section-title p{

        font-size:16px;

    }

    .hero-content{

        width:95%;

    }

    .hero-content h1{

        font-size:38px;

    }

    .hero-content p{

        font-size:17px;

    }

    .hero-buttons{

        flex-direction:column;
        align-items:center;

    }

    .btn-primary,
    .btn-secondary{

        width:260px;
        text-align:center;

    }

    .services-grid{

        grid-template-columns:1fr;

    }

    .clients-grid{

        grid-template-columns:1fr;

    }

    .gallery-grid{

        grid-template-columns:1fr;

    }

    .gallery-grid img{

        height:250px;

    }

    .card{

        padding:35px 25px;

    }

    .client-box{

        padding:35px 25px;

    }

    .contact-grid{

        gap:40px;

    }

}

.supply-grid{

        width:100%;
        padding:0 5px;

    }

    .supply-card{

        padding:25px 22px;

    }

    .supply-card h4{

        font-size:21px;

    }

    .supply-card ul{

        flex-direction:column;
        gap:10px;

    }



/*=========================================
MOVIL
=========================================*/

@media(max-width:576px){

    section{

        padding:70px 0;

    }

    .logo{

        width:170px;

    }

    .hero{

        height:auto;
        min-height:100vh;

    }

    .hero-content h1{

        font-size:32px;
        line-height:1.3;

    }

    .hero-content p{

        font-size:16px;
        line-height:1.8;

    }

    .section-title{

        margin-bottom:50px;

    }

    .section-title h2{

        font-size:30px;

    }

    .about-text h3,
    .gasco-grid h3{

        font-size:28px;

    }

    .timeline{

        flex-direction:column;

    }

    .timeline div{

        width:100%;

    }

    .timeline h4{

        font-size:34px;

    }

    .contact-grid h3{

        font-size:28px;

    }

    form input,
    form textarea{

        font-size:15px;

    }

    form button{

        width:100%;

    }

    .whatsapp{

        width:58px;
        height:58px;
        right:18px;
        bottom:18px;
        font-size:30px;

    }

    #top{

        width:50px;
        height:50px;
        right:20px;
        bottom:90px;

    }

    .footer-logo{

        width:180px;

    }

}

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

@media(max-width:420px){

    .hero-content h1{

        font-size:28px;

    }

    .hero-content p{

        font-size:15px;

    }

    .btn-primary,
    .btn-secondary{

        width:100%;

    }

    .card i,
    .client-box i{

        width:70px;
        height:70px;
        font-size:28px;

    }

    .card h3{

        font-size:22px;

    }

    .client-box h4{

        font-size:20px;

    }

    .gallery-grid img{

        height:220px;

    }

}
/*=========================================
FUENTES DE SUMINISTRO RESPONSIVE
=========================================*/

@media(max-width:992px){

    .supply-grid{

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

    }

}

@media(max-width:768px){

    .supply-grid{

        grid-template-columns:1fr;

    }

    .supply-card{

        padding:35px 25px;

    }

}