/*=========================================
RESPONSIVE
Obra Hogar
==========================================*/

/***************
NOTEBOOK
****************/

@media(max-width:1200px){

.hero h1{

font-size:56px;

}

.hero h2{

font-size:36px;

}

.container{

width:94%;

}

}


/***************
TABLET
****************/

@media(max-width:992px){

header .container{

flex-direction:column;
gap:20px;

}

nav ul{

gap:20px;
flex-wrap:wrap;
justify-content:center;

}

.hero{

padding:140px 0 80px;
height:auto;

}

.hero-logo{

width:210px;

}

.hero h1{

font-size:46px;

}

.hero h2{

font-size:30px;

}

.hero p{

font-size:18px;

}

.hero-buttons{

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

}

.services-grid{

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

}

.advantages-grid{

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

}

.gallery-grid{

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

}

.testimonial-grid{

grid-template-columns:1fr;

}

.contact-wrapper{

grid-template-columns:1fr;

}

.contact-info{

order:2;

}

.contact-form{

order:1;

}

}


/***************
CELULARES
****************/

@media(max-width:768px){

.logo img{

height:70px;

}

header{

padding:15px 0;

}

nav{

display:none;

}

.hero{

padding-top:140px;

}

.hero-logo{

width:170px;

}

.hero h1{

font-size:34px;
line-height:1.2;

}

.hero h2{

font-size:24px;

}

.hero p{

font-size:16px;
padding:0 10px;

}

.hero-badges{

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

}

.hero-badges div{

width:100%;
max-width:330px;

}

.section-title h2{

font-size:30px;

}

.section-title p{

font-size:16px;

}

.services-grid{

grid-template-columns:1fr;

}

.advantages-grid{

grid-template-columns:1fr;

}

.gallery-grid{

grid-template-columns:1fr;

}

.gallery-grid img{

height:240px;

}

.contact-info,
.contact-form{

padding:30px;

}

.footer-content img{

width:140px;

}

}


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

@media(max-width:480px){

.hero h1{

font-size:28px;

}

.hero h2{

font-size:20px;

}

.btn-primary,
.btn-secondary{

width:100%;
max-width:320px;
text-align:center;

}

.btn-header{

display:none;

}

.contact-form input,
.contact-form textarea{

font-size:15px;

}

.whatsapp-float{

width:58px;
height:58px;
font-size:30px;

}

#topButton{

width:50px;
height:50px;

}

}