/* ==========================================================
RESPONSIVIDADE
========================================================== */

/* Notebook */

@media (max-width:1200px){

.hero h1{

font-size:52px;

}

.hero .container{

gap:40px;

}

}

/* Tablet */

@media (max-width:992px){

header .container{

height:75px;

}

nav{

position:fixed;

top:75px;

right:-100%;

width:290px;

height:calc(100vh - 75px);

background:#071223;

transition:.4s;

padding:40px 30px;

border-left:1px solid rgba(255,255,255,.08);

}

nav.active{

right:0;

}

nav ul{

display:flex;

flex-direction:column;

gap:25px;

}

.menu-mobile{

display:flex;

}

.hero{

padding-top:120px;

padding-bottom:70px;

}

.hero .container{

grid-template-columns:1fr;

text-align:center;

}

.hero p{

margin:auto;

margin-bottom:35px;

}

.hero-buttons{

justify-content:center;

}

.hero-image{

margin-top:40px;

}

.section-title h2{

font-size:34px;

}

}

/* Celulares */

@media (max-width:768px){

.container{

width:94%;

}

.hero h1{

font-size:42px;

}

.hero p{

font-size:18px;

}

.btn,

.btn-outline{

width:100%;

}

.hero-buttons{

flex-direction:column;

}

.section-title h2{

font-size:30px;

}

}

/* Celulares pequenos */

@media (max-width:480px){

header .container{

height:70px;

}

.hero{

padding-top:100px;

}

.hero h1{

font-size:34px;

}

.hero span{

font-size:12px;

}

.hero p{

font-size:16px;

}

.logo img{

height:46px;

}

}