/*=========================================
        RESPONSIVE.CSS
        NMR CONSULTORES
=========================================*/

/*=========================================
        PANTALLAS GRANDES
        (1400px)
=========================================*/

@media(max-width:1400px){

.container{

    width:92%;

}

.hero-text h1{

    font-size:55px;

}

.about-grid{

    gap:60px;

}

.contact-grid{

    gap:50px;

}

}

/*=========================================
        LAPTOP
        (1200px)
=========================================*/

@media(max-width:1200px){

.hero{

    padding:150px 0 100px;
}

.hero-content{

    gap:40px;

}

.hero-text h1{

    font-size:48px;

}

.section-title h2{

    font-size:40px;

}

.about-content h2{

    font-size:38px;

}

.mission-text h2{

    font-size:38px;

}

.footer-grid{

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

}

}

/*=========================================
        TABLET GRANDE
        (992px)
=========================================*/

@media(max-width:992px){

/*=========================
        NAVBAR
=========================*/

.menu-toggle{

    display:block;

}

.nav-links{

    position:fixed;

    top:85px;

    right:-100%;

    width:320px;

    height:100vh;

    background:#ffffff;

    flex-direction:column;

    justify-content:flex-start;

    padding-top:60px;

    transition:.4s;

    box-shadow:-5px 0 30px rgba(0,0,0,.15);

}

.nav-links.active{

    right:0;

}

.nav-links li{

    width:100%;

}

.nav-links a{

    display:block;

    width:100%;

    color:#1f2937 !important;

    padding:18px 40px;

}

.btn-header{

    display:none;

}

/*=========================
        HERO
=========================*/

.hero{

    min-height:auto;

    padding-top:170px;

    padding-bottom:100px;

}

.hero-content{

    grid-template-columns:1fr;

    text-align:center;

}

.hero-buttons{

    justify-content:center;

}

.hero-image{

    margin-top:60px;

}

.hero-image img{

    max-width:500px;

}

/*=========================
        ABOUT
=========================*/

.about-grid{

    grid-template-columns:1fr;

}

.about-image{

    order:2;

}

.about-content{

    order:1;

}

.about-content{

    text-align:center;

}

.about-boxes{

    margin-top:50px;

}

/*=========================
        SERVICES
=========================*/

.services-grid{

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

}

/*=========================
        MISION
=========================*/

.mission-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.mission-icon{

    margin-top:40px;

}

.mission-icon i{

    font-size:90px;

}

/*=========================
        CONTADOR
=========================*/

.counter-grid{

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

    gap:40px;

}

/*=========================
        WHY
=========================*/

.why-grid{

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

}

/*=========================
        CLIENTES
=========================*/

.clients-grid{

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

}

/*=========================
        TESTIMONIOS
=========================*/

.testimonial-grid{

    grid-template-columns:1fr;

}

/*=========================
        CONTACTO
=========================*/

.contact-grid{

    grid-template-columns:1fr;

}

.contact-info{

    text-align:center;

}

.contact-item{

    justify-content:center;

}

}

/*=========================================
        TABLET PEQUEÑA
        (768px)
=========================================*/

@media(max-width:768px){

.hero-text h1{

    font-size:42px;

}

.hero-text p{

    font-size:17px;

}

.section-title h2{

    font-size:34px;

}

.about-content h2{

    font-size:34px;

}

.mission-text h2{

    font-size:34px;

}

.services-grid{

    grid-template-columns:1fr;

}

.about-boxes{

    grid-template-columns:1fr;

}

.values-grid{

    grid-template-columns:1fr;

}

.why-grid{

    grid-template-columns:1fr;

}

.counter-grid{

    grid-template-columns:1fr;

}

.clients-grid{

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

}

.footer-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.social{

    justify-content:center;

}

}
/*=========================================
        CELULARES GRANDES
        (576px)
=========================================*/

@media(max-width:576px){

.container{

    width:94%;

}

/*=========================
        HEADER
=========================*/

#header{

    padding:15px 0;

}

.logo img{

    width:150px;

}

.menu-toggle{

    font-size:28px;

}

/*=========================
        HERO
=========================*/

.hero{

    padding-top:140px;

    padding-bottom:70px;

}

.hero-text span{

    font-size:13px;

    letter-spacing:2px;

}

.hero-text h1{

    font-size:34px;

    line-height:1.25;

}

.hero-text p{

    font-size:16px;

    margin-bottom:30px;

}

.hero-buttons{

    flex-direction:column;

    gap:15px;

}

.btn-primary,
.btn-secondary{

    width:100%;

    text-align:center;

    margin:0;

}

.hero-image{

    margin-top:40px;

}

.hero-image img{

    max-width:320px;

}

/*=========================
        SECTION TITLE
=========================*/

.section-title{

    margin-bottom:50px;

}

.section-title h2{

    font-size:30px;

}

.section-title p{

    font-size:15px;

}

/*=========================
        ABOUT
=========================*/

.about{

    padding:80px 0;

}

.about-content h2{

    font-size:30px;

}

.about-boxes{

    gap:15px;

}

.about-boxes div{

    padding:20px;

}

.about-boxes h3{

    font-size:30px;

}

/*=========================
        SERVICES
=========================*/

.services{

    padding:80px 0;

}

.service-card{

    padding:30px 25px;

}

.service-icon{

    width:70px;

    height:70px;

}

.service-icon i{

    font-size:28px;

}

/*=========================
        MISSION
=========================*/

.mission,
.vision{

    padding:80px 0;

}

.mission-text h2{

    font-size:30px;

}

.mission-icon i{

    font-size:70px;

}

/*=========================
        VALUES
=========================*/

.values{

    padding:80px 0;

}

.value-card{

    padding:30px;

}

/*=========================
        COUNTER
=========================*/

.counter{

    padding:80px 0;

}

.counter-item h2{

    font-size:42px;

}

.counter-item p{

    font-size:15px;

}

/*=========================
        WHY US
=========================*/

.why-us{

    padding:80px 0;

}

.why-card{

    padding:30px;

}

/*=========================
        CLIENTES
=========================*/

.clients{

    padding:80px 0;

}

.clients-grid{

    grid-template-columns:1fr;

}

/*=========================
        TESTIMONIOS
=========================*/

.testimonials{

    padding:80px 0;

}

.testimonial-card{

    padding:30px;

}

/*=========================
        CONTACTO
=========================*/

.contact{

    padding:80px 0;

}

.contact-form{

    padding:25px;

}

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

    padding:15px;

}

/*=========================
        FOOTER
=========================*/

footer{

    padding-top:60px;

}

.footer-logo{

    margin:auto auto 20px;

}

.footer-grid{

    gap:30px;

}

.copyright{

    font-size:14px;

}

}

/*=========================================
        CELULARES PEQUEÑOS
        (400px)
=========================================*/

@media(max-width:400px){

.hero-text h1{

    font-size:28px;

}

.hero-text p{

    font-size:15px;

}

.section-title h2{

    font-size:26px;

}

.about-content h2{

    font-size:26px;

}

.mission-text h2{

    font-size:26px;

}

.contact-info h2{

    font-size:28px;

}

.logo img{

    width:135px;

}

.nav-links{

    width:100%;

}

.service-card{

    padding:25px 20px;

}

.contact-form{

    padding:20px;

}

.contact-item{

    flex-direction:column;

    align-items:center;

    text-align:center;

}

.whatsapp{

    width:55px;

    height:55px;

    font-size:28px;

    right:15px;

    bottom:20px;

}

#topBtn{

    width:48px;

    height:48px;

    right:18px;

    bottom:90px;

}

}

/*=========================================
        PANTALLAS MUY PEQUEÑAS
        (320px)
=========================================*/

@media(max-width:320px){

.hero-text h1{

    font-size:24px;

}

.hero-buttons{

    gap:10px;

}

.btn-primary,
.btn-secondary{

    padding:14px 18px;

    font-size:14px;

}

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

    font-size:14px;

}

.contact-form button{

    font-size:15px;

    padding:15px;

}

.footer-grid{

    gap:20px;

}

.social{

    gap:10px;

}

.social a{

    width:40px;

    height:40px;

}

}