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

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

@media (max-width:1200px){

.container{

width:94%;

}

.hero h1{

font-size:3.6rem;

}

.section-title h2{

font-size:2.3rem;

}

.services-grid{

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

}

.advantages-grid{

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

}

.steps{

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

row-gap:60px;

}

.steps::before{

display:none;

}

.footer-grid{

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

}

}

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

@media(max-width:991px){

.logo img{

height:80px;

}

.menu{

position:fixed;

top:0;

right:-100%;

width:min(80%,320px);

height:100vh;

background:#fff;

flex-direction:column;

align-items:flex-start;

justify-content:center;

gap:0;

padding:40px;

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

transition:right .4s ease;

z-index:9998;

}

.menu.active{

right:0;

}

.menu li{

width:100%;

}

.menu a{

display:block;

width:100%;

padding:16px 0;

color:var(--dark);

font-size:1.1rem;

border-bottom:1px solid #eef1f6;

}

.btn-menu{

display:none;

}

.menu-mobile{

display:flex;

position:relative;

z-index:9999;

width:30px;

height:22px;

justify-content:center;

align-items:center;

background:none;

border:none;

padding:0;

}

.menu-mobile span{

position:absolute;

transition:.3s ease;

}

.menu-mobile span:nth-child(1){

top:0;

}

.menu-mobile span:nth-child(2){

top:9px;

}

.menu-mobile span:nth-child(3){

top:18px;

}

#header.active .menu-mobile span{

background:var(--white);

}

.menu-mobile.active span:nth-child(1){

top:9px;

transform:rotate(45deg);

background:var(--dark);

}

.menu-mobile.active span:nth-child(2){

opacity:0;

}

.menu-mobile.active span:nth-child(3){

top:9px;

transform:rotate(-45deg);

background:var(--dark);

}

.menu-overlay{

display:none;

position:fixed;

inset:0;

background:rgba(7,26,55,.5);

z-index:9997;

opacity:0;

pointer-events:none;

transition:opacity .35s ease;

}

.menu-overlay.active{

display:block;

opacity:1;

pointer-events:auto;

}

.hero{

min-height:auto;

padding:150px 0 90px;

}

.hero-content{

padding-top:50px;

flex-direction:column;

text-align:center;

}

.hero-text{

max-width:100%;

}

.hero-logo{

margin:auto auto 30px;

}

.hero p{

margin:auto;
margin-bottom:40px;

}

.hero-buttons{

justify-content:center;

}

.hero-info{

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

margin-top:20px;

}

.services-grid{

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

}

.advantages-grid{

grid-template-columns:1fr;

}

.contact-content{

grid-template-columns:1fr;

}

.contact-map iframe{

height:420px;

}

.partners-track{

gap:45px;

}

.footer-grid{

grid-template-columns:1fr 1fr;

gap:40px;

}

}

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

@media(max-width:768px){

.hero{

padding-top:120px;

}

.hero-video{

display:none;

}

.hero{

background:url("../img/hero-mobile.webp")
center center
no-repeat;

background-size:cover;

}

.overlay{

background:

linear-gradient(

180deg,

rgba(5,25,52,.90),

rgba(5,25,52,.80)

);

}

.hero h1{

font-size:2.4rem;

}

.hero p{

font-size:1rem;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.btn-primary,
.btn-secondary{

width:100%;

max-width:320px;

}

.hero-info{

grid-template-columns:1fr;

}

.section-title{

margin-bottom:50px;

}

.section-title h2{

font-size:2rem;

}

.services{

padding:90px 0;

}

.services-grid{

grid-template-columns:1fr;

}

.card{

padding:35px 30px;

}

.advantages{

padding:90px 0;

}

.advantage-card{

padding:35px;

}

.how-it-works{

padding:90px 0;

}

.steps{

grid-template-columns:1fr;

gap:45px;

}

.partners{

padding:90px 0;

}

.partners-track{

gap:35px;

}

.partner-logo{

width:120px;

height:55px;

}

.cta{

padding:90px 0;

}

.cta-content h2{

font-size:2.1rem;

}

.faq{

padding:90px 0;

}

.contact{

padding:90px 0;

}

.contact-info h2{

font-size:2rem;

}

.contact-map iframe{

height:320px;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.footer-logo{

margin:auto auto 25px;

}

.whatsapp-float{

width:60px;

height:60px;

right:20px;

bottom:20px;

}

}

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

@media(max-width:480px){

.hero{

padding-top:110px;

}

.hero-logo{

width:170px;

}

.badge{

font-size:.8rem;

padding:8px 18px;

}

.hero h1{

font-size:2rem;

line-height:1.2;

}

.hero p{

font-size:.95rem;

}

.btn-primary,
.btn-secondary{

padding:16px 20px;

font-size:.95rem;

}

.hero-info div{

padding:18px;

}

.hero-info h3{

font-size:1.5rem;

}

.section-title span{

font-size:.85rem;

}

.section-title h2{

font-size:1.7rem;

}

.section-title p{

font-size:.95rem;

}

.card{

padding:30px 25px;

}

.card .icon{

width:60px;

height:60px;

font-size:1.6rem;

}

.advantage-card{

padding:30px;

}

.number{

font-size:2.4rem;

}

.step-circle{

width:60px;

height:60px;

font-size:1.2rem;

}

.faq-question{

padding:22px;

font-size:1rem;

}

.faq-answer{

padding:0 22px 22px;

}

.contact-map iframe{

height:260px;

}

.footer-bottom{

font-size:.85rem;

padding:18px;

}

}

/* ================================
   TELAS MUITO GRANDES
================================ */

@media(min-width:1600px){

.container{

max-width:1400px;

}

.hero h1{

font-size:5rem;

}

.section-title h2{

font-size:3rem;

}

}