@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&display=swap');

:root {
  --custom-primary: #FFAE48;
  --font-family: 'Sora', var(--bs-font-sans-serif);
}

.btn-custom-primary {
  background-color: var(--custom-primary);
  border-color: var(--custom-primary);
  color: #fff;
}

.btn-custom-primary:hover,
.btn-custom-primary:focus,
.btn-custom-primary:active {
  background-color: var(--custom-primary) !important;
  border-color: var(--custom-primary) !important;
  color: #fff !important;
  filter: brightness(0.9) !important;
}

body {
  font-family: var(--font-family);
}

/* NAVBAR */

#header{
background:#fff;
border-bottom:1px solid #eee;
position:relative;
z-index:1000;
}

.nav-container{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 0;
}

.logo img{
height:50px;
}

.menu{
display:flex;
align-items:center;
}

.menu a{
margin-left:30px;
text-decoration:none;
color:#524439;
font-weight:500;
}

/* BOTÃO HAMBURGUER */

.menu-toggle{
display:none;
flex-direction:column;
justify-content:space-between;
width:28px;
height:20px;
cursor:pointer;
}

.menu-toggle span{
display:block;
height:3px;
width:100%;
background:#524439;
border-radius:2px;
transition:.3s;
}

/* HERO */

#hero{
position:relative;
padding:120px 0;
overflow:hidden;
}

/* overlay */

#hero::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.45);
z-index:0;
}

.hero-bg{
position:absolute;
width:100%;
height:100%;
object-fit:cover;
top:0;
left:0;
z-index:-1;
}

.hero-container{
display:flex;
align-items:center;
gap:60px;
position:relative;
z-index:1;
}

.hero-text{
width:55%;
color:#fff;
}

.hero-text h1{
color:#fff;
}

.hero-text p{
color:#fff;
}

.hero-form{
width:40%;
background:#fff;
padding:40px;
border-radius:10px;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
}

/* SOBRE CASA */

#sobre-casa{
padding:200px 0;
background:#f6f6f6;
}

.sobre-casa-container{
display:flex;
align-items:center;
gap:80px;
}

.sobre-casa-container .imagem{
width:50%;
}

.sobre-casa-container .imagem img{
width:100%;
max-width:520px;
border-radius:8px;
}

.sobre-casa-container .texto{
width:50%;
}

.sobre-casa-container .texto h2{
font-size:36px;
line-height:1.3;
margin-bottom:25px;
color: #FFAE48;
}

.sobre-casa-container .texto p{
font-size:18px;
line-height:1.7;
margin-bottom:15px;
color:#524439;
}

/* DESTAQUES */

#destaques{
position:relative;
padding:100px 0;
overflow:hidden;
}

.destaques-bg{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:-1;
}

#destaques .section-title{
text-align:center;
max-width:700px;
margin:0 auto 60px auto;
color:#524439;
}

.grid-destaques{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:50px 60px;
}

.destaque{
text-align:center;
}

.destaque-img{
width:340px;
margin-bottom:20px;
}

.destaque-img{
width:340px;
margin-bottom:20px;
border-radius:8px;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

.destaque p{
font-size:15px;
line-height:1.6;
color:#524439;
max-width:380px;
margin:0 auto 10px auto;
}

/* TITULO SECTION */

#destaques .section-title{
color:#FFAE48;
text-align:center;
margin-bottom:10px;
}

/* FRASE DESTAQUE */

.destaque-frase{
text-align:center;
font-style:italic;
font-size:18px;
margin-bottom:60px;
color:#524439;
}

/* TITULO DOS CARDS */

.destaque-titulo{
font-size:22px;
margin-bottom:15px;
color:#524439;
font-weight:600;
}

/* BOTÃO DESTAQUES */

.btn-destaque{
display:inline-block;
margin-top:15px;
padding:10px 18px;
font-size:13px;
font-weight:600;
text-decoration:none;
color:#fff;
background:#FFAE48;
border-radius:4px;
letter-spacing:.5px;
text-transform:uppercase;
transition:all .3s ease;
}

.btn-destaque:hover{
background:#e89b37;
transform:translateY(-2px);
box-shadow:0 6px 15px rgba(0,0,0,0.15);
}

.btn-destaque{
letter-spacing:.5px;
text-transform:uppercase;
}


/* BENEFICIOS */

#beneficios{
position:relative;
padding:80px 0;
text-align:center;
overflow:hidden;
}

.beneficios-title{
margin-bottom:50px;
color:#524439;
}

.beneficios-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:40px;
max-width:900px;
margin:0 auto 40px auto;
}

.beneficio-item{
text-align:center;
}

.beneficio-item img{
width:150px;
margin-bottom:15px;
}

.beneficio-item p{
font-size:15px;
line-height:1.5;
color:#524439;
max-width:180px;
margin:0 auto;
}

.beneficios-cta{
margin-top:30px;
display:inline-block;
}

/* DEPOIMENTOS */

#depoimentos{
padding:70px 0;
background:#F6F9FB;
text-align:center;
}

#depoimentos .section-title{
margin-bottom:70px;
color:var(--custom-primary);
font-size:34px;
font-weight:600;
}

.depoimentos-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:35px;
max-width:950px;
margin:0 auto;
}

.card-depoimento{
background:#fff;
padding:35px;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.07);
transition:all .3s ease;
text-align:left;
}

.card-depoimento:hover{
transform:translateY(-6px);
box-shadow:0 20px 45px rgba(0,0,0,0.12);
}

.avaliacao{
color:#f5b301;
font-size:20px;
margin-bottom:15px;
}

.card-depoimento p{
font-size:16px;
line-height:1.7;
color:#524439;
margin-bottom:20px;
font-style:italic;
}


/* SOBRE */

#sobre{
padding:100px 0;
}

.sobre-container{
display:flex;
align-items:center;
gap:60px;
}

.sobre-container img{
width:100%;
border-radius:8px;
}

#sobre p{
font-size:18px;
line-height:1.7;
color:#524439;
}

#sobre h2 {
  color:var(--custom-primary)
}

/* CTA */

#cta{
position:relative;
padding:140px 0;
text-align:center;
color:#fff;
overflow:hidden;
}

/* overlay */

#cta::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.45);
z-index:0;
}

.cta-bg{
position:absolute;
width:100%;
height:100%;
object-fit:cover;
top:0;
left:0;
z-index:-1;
}

.cta-content{
position:relative;
z-index:1;
max-width:720px;
margin:auto;
}

.cta-content h2{
font-size:42px;
margin-bottom:20px;
font-weight:600;
}

.cta-content p{
font-size:18px;
line-height:1.6;
margin-bottom:35px;
opacity:.95;
}

/* BOTÃO */

.btn-cta{
display:inline-block;
background: #FFAE48;
color:#fff;
padding:16px 38px;
border-radius:6px;
font-size:16px;
font-weight:600;
text-decoration:none;
transition:all .3s ease;
}

.btn-cta:hover{
background:#fff;
color: #FFAE48;
transform:translateY(-2px);
box-shadow:0 10px 25px rgba(0,0,0,0.2);
}


/* FOOTER */

#contato{
padding:40px 0;
background:#F6F9FB;
}

.footer-container{
display:flex;
justify-content:space-between;
align-items:center;
}

.logo-footer img{
height:60px;
}

.redes a{
font-size:28px;
color:#524439;
margin-left:20px;
transition:.3s;
text-decoration:none;
display:inline-block;
}

.redes a:hover{
color:#FFAE48;
text-decoration:none;
}

/* GALERIA */

#galeria{
padding:100px 0;
background:#f6f6f6;
text-align:center;
overflow:hidden;
}

#galeria .section-title{
margin-bottom:60px;
color:#524439;
}

.galeria-slider{
width:100%;
overflow:hidden;
position:relative;
}

.galeria-track{
display:flex;
gap:30px;
animation:scrollGaleria 30s linear infinite;
}

.galeria-track img{
width:320px;
border-radius:10px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

@keyframes scrollGaleria{
0%{
transform:translateX(0);
}

100%{
transform:translateX(-50%);
}
}

/* ============================= */
/* RESPONSIVO MOBILE */
/* ============================= */

@media (max-width: 768px){

/* CONTAINER */

.container{
padding:0 20px;
}

/* NAVBAR */

.nav-container{
padding:15px 20px;
}

.menu a{
margin:0;
font-size:16px;
}

/* HERO */

.hero-container{
flex-direction:column;
gap:40px;
text-align:center;
}

.hero-text{
width:100%;
}

.hero-text h1{
font-size:28px;
}

.hero-text p{
font-size:16px;
}

.hero-form{
width:100%;
padding:30px;
}

/* SOBRE CASA */

.sobre-casa-container{
flex-direction:column;
gap:40px;
}

.sobre-casa-container .imagem,
.sobre-casa-container .texto{
width:100%;
}

.sobre-casa-container .texto h2{
font-size:26px;
}

#sobre-casa{
padding:80px 0;
}

/* DESTAQUES */

.grid-destaques{
grid-template-columns:1fr;
gap:50px;
}

.destaque-img{
width:100%;
max-width:320px;
}

/* BENEFICIOS */

.beneficios-grid{
grid-template-columns:1fr 1fr;
gap:30px;
}

.beneficio-item img{
width:110px;
}

#beneficios p{
font-size:15px;
line-height:1.7;;
}

/* DEPOIMENTOS */

.depoimentos-grid{
grid-template-columns:1fr;
}

/* SOBRE */

.sobre-container{
flex-direction:column;
gap:40px;
}

.sobre-container .imagem{
order:1;
}

.sobre-container .texto{
order:2;
}

/* CTA */

#cta{
padding:100px 0;
}

.cta-content h2{
font-size:28px;
}

.cta-content p{
font-size:16px;
}

.btn-cta{
padding:14px 26px;
font-size:15px;
}

/* FOOTER */

.footer-container{
flex-direction:column;
gap:20px;
text-align:center;
}

/* GALERIA */

.galeria-track img{
width:240px;
}

}

/* ============================= */
/* MENU MOBILE */
/* ============================= */

@media (max-width:768px){

.menu-toggle{
display:flex;
flex-direction:column;
justify-content:space-between;
}

/* MENU FECHADO */

.menu{
position:absolute;
top:100%;
left:0;
width:100%;
background:#fff;
z-index:999;

display:flex;
flex-direction:column;
align-items:center;
gap:20px;

max-height:0;
overflow:hidden;
padding:0;

transition:max-height .4s ease, padding .3s ease;

box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

/* MENU ABERTO */

.menu.active{
max-height:320px;
padding:30px 0;
}

.menu a{
margin:0;
font-size:16px;
}

}

/* ============================= */
/* CARROSSEL BENEFÍCIOS MOBILE */
/* ============================= */

@media (max-width:768px){

.beneficios-grid{
display:flex;
gap:40px;

overflow:hidden;
width:max-content;

animation:scrollBeneficios 14s linear infinite;

}

.beneficio-item{
min-width:160px;
text-align:center;
}

}

/* animação contínua */

@keyframes scrollBeneficios{

0%{
transform:translateX(0);
}

100%{
transform:translateX(-50%);
}

}

