/*==================================================
SERTELMX
Servicios Técnicos para Laboratorio México
Archivo: responsive.css
==================================================*/

/*=========================================
LAPTOPS
=========================================*/
@media(max-width:1200px){
.hero h2{
    font-size:48px;
}
.hero-grid{
    gap:40px;
}
.beneficios .container{
    grid-template-columns:repeat(3,1fr);
    gap:40px;
}
}

/*=========================================
TABLETS
=========================================*/
@media(max-width:992px){
.top-bar .container{
    flex-direction:column;
    text-align:center;
}
.logo{
    flex-direction:column;
}
.logo img{
    margin:0 0 15px 0;
}
.top-contact{
    margin-top:25px;
    flex-wrap:wrap;
    justify-content:center;
}
.hero{
    padding:70px 0;
}
.hero-grid{
    grid-template-columns:1fr;
    text-align:center;
}
.hero-buttons{
    justify-content:center;
}
.hero-image{
    margin-top:40px;
}
.hero h2{
    font-size:42px;
}
.beneficios .container{
    grid-template-columns:repeat(2,1fr);
}
.contacto-grid{
    grid-template-columns:1fr;
}
}

/*=========================================
CELULARES GRANDES
=========================================*/
@media(max-width:768px){
nav ul{
    flex-direction:column;
}
nav li{
    width:100%;
}
nav a{
    text-align:center;
    border-bottom:1px solid rgba(255,255,255,.15);
}
.logo h1{
    font-size:28px;
}
.logo p{
    font-size:13px;
}
.top-contact{
    flex-direction:column;
    gap:12px;
}
.hero{
    padding:60px 0;
}
.hero h2{
    font-size:36px;
}
.hero p{
    font-size:17px;
}
.hero-buttons{
    flex-direction:column;
}
.btn-principal,
.btn-secundario,
.btn-cotizar,
.btn-whatsapp{
    width:100%;
    justify-content:center;
    text-align:center;
}
.beneficios .container{
    grid-template-columns:1fr;
}
.beneficio{
    padding:20px 0;
}
section{
    padding:60px 0;
}
}

/*=========================================
CELULARES PEQUEÑOS
=========================================*/
@media(max-width:480px){
.container{
    width:94%;
}
.logo img{
    width:70px;
}
.logo h1{
    font-size:24px;
}
.hero{
    padding:50px 0;
}
.hero h2{
    font-size:30px;
    line-height:1.2;
}
.hero p{
    font-size:16px;
}
.top-contact a{
    font-size:14px;
}
footer{
    padding:30px 0;
}
footer p{
    font-size:13px;
}
}
.galeria-grid img{
    height:200px;
}