/* ======================================================
   RESPONSIVE.CSS
   MDR ASSESSORIA
====================================================== */


/* ==========================================
   NOTEBOOKS
========================================== */

@media (max-width:1200px){

.container{

    width:95%;

}

.hero h1{

    font-size:48px;

}

.about-content h2{

    font-size:36px;

}

.features h2,
.services h2,
.steps h2,
.testimonials h2,
.partners h2,
.section-title h2,
.cta h2{

    font-size:36px;

}

}


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

@media (max-width:992px){

.hero-grid,
.about-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.hero-image{

    order:-1;

}

.cards{

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

}

.feature-grid{

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

}

.steps-grid{

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

}

.testimonial-grid{

    grid-template-columns:1fr;

}

.blog-grid{

    grid-template-columns:1fr 1fr;

}

.partners-grid{

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

}

.numbers .container{

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

    row-gap:40px;

}

.footer-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.cta-content{

    flex-direction:column;

    text-align:center;

}

.row{

    grid-template-columns:1fr;

}

.hero-buttons{

    justify-content:center;

}

.beneficios{

    justify-content:center;

}

}


/* ==========================================
   CELULAR
========================================== */

@media (max-width:768px){

header{

    padding:15px 0;

}

.logo img{

    height:48px;

}

nav{

    position:fixed;

    top:80px;

    left:-100%;

    width:100%;

    background:#fff;

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

    transition:.35s;

    padding:30px;

}

nav.active{

    left:0;

}

nav ul{

    flex-direction:column;

    gap:25px;

    text-align:center;

}

.menu-mobile{

    display:block;

}

.btn-whatsapp{

    display:none;

}

.hero{

    padding-top:120px;

}

.hero h1{

    font-size:36px;

}

.hero p{

    font-size:16px;

}

.cards{

    grid-template-columns:1fr;

}

.feature-grid{

    grid-template-columns:1fr;

}

.steps-grid{

    grid-template-columns:1fr;

}

.blog-grid{

    grid-template-columns:1fr;

}

.partners-grid{

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

}

.numbers .container{

    grid-template-columns:1fr;

}

.section-title h2,
.services h2,
.features h2,
.steps h2,
.testimonials h2,
.partners h2,
.about-content h2,
.cta h2{

    font-size:30px;

}

.about{

    text-align:center;

}

.about-content{

    order:2;

}

.about-image{

    order:1;

}

form{

    padding:30px;

}

.hero-buttons{

    flex-direction:column;

}

.btn-primary,
.btn-secondary{

    width:100%;

    text-align:center;

}

.whatsapp-float{

    width:58px;

    height:58px;

    font-size:28px;

    right:18px;

    bottom:18px;

}

#backTop{

    width:48px;

    height:48px;

    right:20px;

    bottom:90px;

}

}


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

@media (max-width:480px){

.container{

    width:92%;

}

.hero h1{

    font-size:30px;

}

.hero p{

    font-size:15px;

}

.services,
.about,
.features,
.steps,
.testimonials,
.partners,
.blog,
.contact,
.faq{

    padding:70px 0;

}

.card img{

    height:200px;

}

.card{

    border-radius:15px;

}

.feature{

    padding:30px 20px;

}

.feature i{

    font-size:42px;

}

.circle{

    width:65px;

    height:65px;

    font-size:24px;

}

.number h2{

    font-size:40px;

}

.footer-grid{

    gap:35px;

}

.footer-grid h3{

    margin-bottom:12px;

}

.blog article h3{

    font-size:20px;

}

.testimonial{

    padding:30px;

}

}


/* ==========================================
   MONITORES GRANDES
========================================== */

@media (min-width:1600px){

.container{

    max-width:1400px;

}

.hero h1{

    font-size:70px;

}

.hero p{

    font-size:22px;

}

}

@media (min-width:769px) and (max-width:992px){

.hero-grid{
    grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);
    gap:32px;
}

.hero-image{
    order:0;
    min-height:380px;
}

}

@media (max-width:768px){

.hero-image{
    order:0;
    min-height:320px;
}

}

@media (max-width:992px){

.landing-hero{
    min-height:0;
    padding:125px 0 70px;
}

.landing-hero .hero-grid{
    grid-template-columns:1fr;
    gap:34px;
    text-align:center;
}

.landing-hero .hero-text{
    max-width:700px;
    margin:0 auto;
}

.landing-hero h1,
.landing-hero .hero-text p{
    margin-right:auto;
    margin-left:auto;
}

.landing-hero .hero-image{
    order:0;
    width:min(100%,650px);
    min-height:380px;
    margin:0 auto;
}

.landing-assurance{
    justify-content:center;
}

.landing-steps-layout{
    grid-template-columns:1fr;
    gap:32px;
}

.landing-steps-intro h2,
.landing-steps-intro > p{
    max-width:650px;
}

}

@media (min-width:769px) and (max-width:992px){

.landing-services .cards{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

}

@media (max-width:768px){

.landing-hero{
    padding:112px 0 56px;
}

.landing-hero h1{
    font-size:clamp(34px,8vw,48px);
    letter-spacing:-1.3px;
}

.landing-hero .hero-buttons{
    justify-content:center;
}

.landing-hero .hero-buttons .btn-primary,
.landing-hero .hero-buttons .btn-secondary{
    width:100%;
}

.landing-hero .hero-image{
    min-height:320px;
}

.landing-hero .hero-image-caption{
    right:14px;
    bottom:16px;
    left:14px;
}

.landing-hero .hero-image-caption strong{
    font-size:13px;
}

.landing-hero .hero-image-caption small{
    font-size:10px;
}

.landing-hero .hero-image-badge{
    top:14px;
    left:14px;
}

.landing-services,
.landing-steps{
    padding:64px 0;
}

.landing-services .cards{
    grid-template-columns:1fr;
    gap:18px;
}

.landing-services .card img{
    height:200px;
}

.landing-steps-intro{
    text-align:center;
}

.landing-steps-intro h2,
.landing-steps-intro > p{
    margin-right:auto;
    margin-left:auto;
    text-align:center;
}

.landing-contact{
    padding:48px 0;
}

.landing-contact-inner{
    flex-direction:column;
    align-items:flex-start;
    gap:22px;
}

.landing-contact .btn-primary{
    width:100%;
    justify-content:center;
}

.landing-footer-inner{
    flex-direction:column;
    align-items:flex-start;
}

.lista-beneficios{
    flex-wrap:wrap;
    justify-content:center;
    gap:10px 16px;
}

.lista-beneficios > div{
    flex:1 1 140px;
    min-width:0;
}

}