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

@media (max-width:1024px){

h1{
font-size:42px;
}

h2{
font-size:32px;
}

.container{
width:92%;
}

.hero-title{
font-size:46px;
}

}

/* ========================================
TABLETS PEQUEÑAS
======================================== */

@media (max-width:768px){

/* MENU */

.menu{

display:none;

flex-direction:column;

background:#020617;

position:absolute;

top:80px;
left:0;

width:100%;

padding:20px;

gap:15px;

}

.menu.menu-open{
display:flex;
}

.menu-toggle{

display:block;

font-size:24px;

cursor:pointer;

}

/* HERO */

.hero{
height:80vh;
}

.hero-title{
font-size:38px;
}

.hero p{
font-size:16px;
}

.hero-content{
padding:0 20px;
}

/* BANNER */

.banner{
padding:100px 20px;
}

.banner h1{
font-size:38px;
}

.banner p{
font-size:16px;
}

/* GRID SERVICIOS */

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

/* FOOTER */

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.social{
justify-content:center;
}

}

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

@media (max-width:480px){

h1{
font-size:30px;
}

h2{
font-size:24px;
}

p{
font-size:15px;
}

/* HERO */

.hero-title{
font-size:32px;
}

/* BOTONES */

.btn-principal{

padding:12px 20px;

font-size:14px;

}

/* CARDS */

.card-servicio{
padding:30px 20px;
}

/* WHATSAPP */

.whatsapp{

width:55px;
height:55px;

font-size:24px;

right:20px;
bottom:20px;

}

}