/*======================================
RESPONSIVE - HUMEN SOLUTIONS S.A.C.S.
======================================*/


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

@media (max-width:1024px){

.container{
    padding:0 25px;
}

.hero-grid,
.about-grid,
.contact-grid{
    grid-template-columns:1fr;
    gap:50px;
}

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

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

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

.process::before{
    display:none;
}

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

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

.hero-content{
    text-align:center;
}

.hero-buttons{
    justify-content:center;
}

.hero-image{
    order:-1;
}

}


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

@media (max-width:768px){

section{
    padding:70px 0;
}

.container{
    padding:0 20px;
}

h1{
    font-size:2.4rem;
    line-height:1.2;
}

h2{
    font-size:2rem;
}

p{
    font-size:1rem;
}

header .container{
    height:80px;
}

.logo img{
    height:75px;
    width:auto;
}

.top-bar{
    display:none;
}

.menu{
    display:none;
}

.menu-mobile{
    display:block;
}

.hero{
    padding-top:130px;
    padding-bottom:70px;
}

.hero-grid{
    grid-template-columns:1fr;
}

.hero-content{
    text-align:center;
}

.hero-buttons{
    flex-direction:column;
}

.hero-buttons a{
    width:100%;
}

.hero-image{
    order:-1;
}

.hero-visual{
    padding:35px;
    border-radius:30px;
}

.about-grid,
.contact-grid,
.cards,
.benefits-grid,
.sector-grid,
.process,
.footer-grid{
    grid-template-columns:1fr;
}

.card,
.contact-form,
.contact-info,
.cta{
    padding:25px;
}

.process{
    gap:30px;
}

.section-title{
    margin-bottom:50px;
}

.footer-grid{
    text-align:center;
}

.footer-logo img{
    margin:auto;
    margin-bottom:20px;
}

}


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

@media (max-width:480px){

h1{
    font-size:2rem;
}

h2{
    font-size:1.7rem;
}

.btn-primary,
.btn-secondary{
    width:100%;
    justify-content:center;
    padding:16px;
}

.hero-visual{
    padding:20px;
}

.hero-visual img{
    max-width:220px;
}

}