/*=========================================================
RESPONSIVE.CSS
PRACCHEM
=========================================================*/

/*=========================================================
1200 PX
=========================================================*/

@media(max-width:1200px){

.container{

width:94%;

}

.hero-content h1{

font-size:60px;

}

.section-title h2{

font-size:42px;

}

.about-content h2,
.coverage-content h2{

font-size:42px;

}

.cta-box h2{

font-size:48px;

}

.footer-grid{

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

gap:50px;

}

.division-grid{

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

}

.process-grid{

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

}

.services-grid{

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

}

.why-grid{

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

}

}

/*=========================================================
992 PX
=========================================================*/

@media(max-width:992px){

section{

padding:90px 0;

}

.header-container{

height:82px;

}

.logo img{

 height:120px !important;

}

.menu-toggle{

display:block;

z-index:1001;

}

.navbar{

position:fixed;

top:82px;

right:-100%;

width:320px;

height:calc(100vh - 82px);

background:#fff;

box-shadow:-15px 0 40px rgba(0,0,0,.08);

transition:.4s;

padding:45px 35px;

}

.navbar.active{

right:0;

}

.nav-links{

display:flex;

flex-direction:column;

align-items:flex-start;

gap:30px;

}

.btn-header{

display:none;

}

.hero-container{

min-height:92vh;

}

.hero-content{

text-align:center;

margin:auto;

}

.hero-content h1{

font-size:52px;

}

.hero-content p{

font-size:18px;

margin:auto;

margin-bottom:40px;

}

.hero-buttons{

justify-content:center;

}

.about-grid{

grid-template-columns:1fr;

gap:60px;

}

.coverage-grid{

grid-template-columns:1fr;

gap:60px;

}

.contact-grid{

grid-template-columns:1fr;

gap:50px;

}

.footer-grid{

grid-template-columns:1fr 1fr;

}

.numbers-grid{

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

}

}
/*=========================================================
768 PX
=========================================================*/

@media(max-width:768px){

section{

padding:75px 0;

}

.hero{

padding-top:90px;

}

.hero-content h1{

font-size:42px;

line-height:1.15;

}

.hero-content p{

font-size:17px;

}

.hero-tag{

font-size:13px;

padding:9px 18px;

}

.hero-buttons{

flex-direction:column;

align-items:center;

gap:18px;

}

.btn-primary,
.btn-secondary{

width:280px;

}

.section-title{

margin-bottom:55px;

}

.section-title h2{

font-size:34px;

}

.about-content h2,
.coverage-content h2{

font-size:34px;

}

.cta-box h2{

font-size:38px;

}

.cta-box p{

font-size:18px;

}

.division-grid{

grid-template-columns:1fr;

gap:25px;

}

.services-grid{

grid-template-columns:1fr;

gap:25px;

}

.why-grid{

grid-template-columns:1fr;

gap:25px;

}

.process-grid{

grid-template-columns:1fr;

gap:25px;

}

.about-features{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.footer-logo{

margin:auto auto 25px;

}

.social-links{

justify-content:center;

}

.contact-item{

padding:25px;

}

.contact-form{

padding:30px;

}

.numbers-grid{

grid-template-columns:1fr 1fr;

gap:20px;

}

.coverage-image{

margin-top:20px;

}

.coverage-image img{

max-width:85%;

margin:auto;

}

#map iframe{

height:420px;

}

.whatsapp{

width:62px;

height:62px;

font-size:30px;

right:20px;

bottom:20px;

}

#toTop{

left:20px;

bottom:20px;

}

}

/*=========================================================
640 PX
=========================================================*/

@media(max-width:640px){

.container{

width:92%;

}

.hero-content h1{

font-size:36px;

}

.hero-content p{

font-size:16px;

}

.section-title h2{

font-size:30px;

}

.about-content h2,
.coverage-content h2{

font-size:30px;

}

.cta-box h2{

font-size:34px;

}

.contact-form{

padding:25px;

}

.contact-item{

flex-direction:column;

text-align:center;

align-items:center;

}

.contact-item i{

margin:0;

}

.numbers-grid{

grid-template-columns:1fr;

}

.numbers-grid h2{

font-size:44px;

}

.footer-grid{

gap:40px;

}

.footer-grid h4{

margin-bottom:15px;

}

}
/*=========================================================
576 PX
=========================================================*/

@media (max-width:576px){

body{

font-size:15px;

}

section{

padding:65px 0;

}

.container{

width:92%;

}

.header-container{

height:75px;

}

    .navbar-brand img{

        height:55px;

        width:auto;

}

.navbar{

width:100%;

top:75px;

height:calc(100vh - 75px);

padding:40px 30px;

}

.hero-container{

min-height:90vh;

padding-top:60px;

}

.hero-tag{

font-size:12px;

padding:8px 16px;

}

.hero-content h1{

font-size:32px;

line-height:1.15;

margin-bottom:22px;

}

.hero-content p{

font-size:15px;

line-height:1.8;

margin-bottom:35px;

}

.hero-buttons{

width:100%;

}

.btn-primary,
.btn-secondary{

width:100%;

max-width:320px;

padding:16px 24px;

}

.section-title{

margin-bottom:45px;

}

.section-title span{

font-size:12px;

}

.section-title h2{

font-size:28px;

}

.about-content h2,
.coverage-content h2{

font-size:28px;

}

.cta-box h2{

font-size:30px;

}

.cta-box p{

font-size:16px;

}

.contact-form{

padding:22px;

}

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

padding:16px;

}

.footer-grid{

gap:35px;

}

.footer-logo{

height:60px;

}

.social-links{

gap:12px;

}

.social-links a{

width:44px;

height:44px;

}

.logo img{
    height:80px !important;
}

/*=========================================================
420 PX
=========================================================*/

@media (max-width:420px){

.hero-content h1{

font-size:28px;

}

.hero-content p{

font-size:14px;

}

.section-title h2{

font-size:24px;

}

.about-content h2,
.coverage-content h2{

font-size:24px;

}

.cta-box h2{

font-size:26px;

}

.division-content,
.service-card,
.process-grid article{

padding:28px 22px;

}

.contact-item{

padding:22px;

}

.numbers-grid h2{

font-size:38px;

}

.whatsapp{

width:56px;

height:56px;

font-size:26px;

right:15px;

bottom:15px;

}

#toTop{

width:50px;

height:50px;

left:15px;

bottom:15px;

}

#map iframe{

height:320px;

}

}

/*=========================================================
360 PX
=========================================================*/

@media (max-width:360px){

.hero-content h1{

font-size:24px;

}

.hero-content p{

font-size:13px;

}

.btn-primary,
.btn-secondary{

font-size:14px;

padding:15px 18px;

}

.section-title h2{

font-size:22px;

}

.about-content h2,
.coverage-content h2{

font-size:22px;

}

.cta-box h2{

font-size:22px;

}

.contact-form{

padding:18px;

}

.contact-item{

padding:18px;

}

.footer-grid{

gap:28px;

}

.footer-grid h4{

font-size:18px;

}

.footer-grid p,
.footer-grid a{

font-size:14px;

}

}

/*=========================================================
PREVENCIÓN DE DESBORDAMIENTOS
=========================================================*/

html,
body{

overflow-x:hidden;

}

img{

max-width:100%;

height:auto;

}

iframe{

max-width:100%;

}

table{

display:block;

overflow-x:auto;

}

.hero-content,
.about-content,
.coverage-content,
.cta-box{

word-wrap:break-word;

overflow-wrap:break-word;

}

input,
textarea,
button{

font-size:16px;

}

/*=========================================================
FIN RESPONSIVE
=========================================================*/