*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial;
}


body{

background:linear-gradient(
90deg,
#3b1608,
#2b0e05
);

color:white;

}


/* HERO */

.hero{

background-image:url("imagem/balanca.jpg");

background-size:cover;
background-position:center;

height:700px;

display:flex;
align-items:center;
justify-content:center;

text-align:center;

}


.overlay{

background:rgba(0,0,0,0.55);

width:100%;
height:100%;

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;

}


.hero h1{

font-size:60px;
color:#d4af37;
letter-spacing:7px;

}

.hero h2{

font-size:32px;

}

.hero p{

margin-top:10px;

}


/* BOTÕES */

.hero-botoes{

margin-top:25px;
display:flex;
gap:20px;

}

.botao-dourado{

background:#caa23a;
padding:14px 28px;
border-radius:6px;
text-decoration:none;
color:black;
font-weight:bold;

}

.botao-outline{

border:2px solid #caa23a;
padding:14px 28px;
border-radius:6px;
text-decoration:none;
color:white;

}


/* SOBRE */

.sobre{

padding:80px 20px;

}

.sobre-container{

max-width:1100px;
margin:auto;

display:flex;
gap:50px;
align-items:center;

}


/* FOTO */

.foto{

width:300px;
border:6px solid #caa23a;

}

.foto img{

width:100%;
display:block;

}


/* TEXTO */

.texto{

max-width:600px;

}

.texto h2{

margin-bottom:15px;

}

.texto p{
text-align: justify;
line-height: 1.6;
margin-bottom: 15px;
}

}


/* ÁREAS */

.areas{

padding:80px 20px;
text-align:center;

}
.areas h2{

font-size:40px;
color:#d4af37;
margin-bottom:40px;
text-align: center;


}

.areas-grid{

display:flex;
justify-content:center;
gap:30px;
flex-wrap:wrap;

}


.area-card{

border:2px solid #caa23a;

padding:30px;

width:300px;

text-align:left;

}

.area-card h3{

color:#d4af37;
margin-bottom:20px;

}

.area-card li{

margin-bottom:8px;

}


/* CONTATO */

.contato{

text-align:center;
padding:80px 20px;

}

.aviso{

opacity:.6;
margin-top:20px;

}


/* RESPONSIVO */

@media (max-width:900px){

.sobre-container{

flex-direction:column;
text-align:center;

}

.hero h1{

font-size:40px;

}

.hero-botoes{

flex-direction:column;

}

}