:root {
--cor-clara: #eff0ef;
--cor-escura: #404742;
--cor-verde: #1fa84f;
}

body {
background-color: var(--cor-clara);
font-family: 'Roboto', sans-serif;
font-style: SemiBold;
margin: 0;
padding: 0;
}

/* Navbar */
.navbar {
background-color: var(--cor-clara);
color: var(--cor-escura);
}
.navbar-brand {
font-family: 'Roboto', sans-serif;
color: var(--cor-escura) !important;
font-style: Bold;
font-weight: 500;
}
.navbar-brand img {
	max-width: 120px;
}
.nav-link {
font-family: 'Roboto', sans-serif;
color: var(--cor-escura);
font-style: Bold;
font-weight: 500;
}
.nav-link:hover {
color: var(--cor-verde);
}
.navbar-toggler {
color: var(--cor-escura) !important;
}
.img-index {
width: 150%;
margin-left: -100px;
}

.hero {
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: row;
font-family: 'Roboto', sans-serif;
background-color: #FFF;
background-image: url(../img/batop.png);
color: var(--cor-clara);
font-style: Bold;
font-weight: 500;
height: 100vh;
background-size: cover;
background-position: left;
padding-right: 50px;
position: relative;
overflow: hidden;
}
.btn-primary {
color: var(--cor-escura);
background-color: var(--cor-clara);
border: 1px solid var(--cor-verde);
width: 70%; 
text-align: center;
}
.btn-primary:hover {
background-color: var(--cor-verde);
border: 1px solid var(--cor-clara);
}
.hero-content {
max-width: 50%;
}
.text-video {
color: var(--cor-escura);
}
.div-vid {
align-items: center;
justify-content: center;
padding: 10px 20px 40px 10px;
margin: auto 20%;
}
.vid {
width: 100%;
height: auto;
display: block;
object-fit: cover;
max-width: 100%;
}

.features, .pricing, .testimonials {
min-height: 100vh;
padding: 15px;
display: flex;
align-items: center;
justify-content: center;
}
.features {
background-color: var(--cor-clara);
color: white;
margin-bottom: 20px;
}
.fim {
margin-bottom: 30px;
text-align: center;
justify-content: center;
padding: 20px;
}

/* Status Container */
.stats-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
gap: 30px;
padding: 40px;
background-color: var(--cor-escura);
border-radius: 12px;
}
.stats {
background-color: var(--cor-escura);
margin-left: 0;
margin-right: 0;
min-width: 100%;
}
.stat-box {
flex: 1 1 200px;
text-align: center;
background: transparent;
padding: 20px;
border-radius: 10px;

}

.stat-box h4 {
font-size: 1.2rem;
margin-bottom: 10px;
color: var(--cor-clara);
font-weight: bolder;
transition: transform 0.5s ease-in-out;
}
.stat-box h4:hover {
transform: scale(1.1);
}
.counter {
font-size: 3rem;
font-weight: bolder;
color: var(--cor-verde);
}
.pricing {
background-color: var(--cor-clara);
color: var(--cor-escura);
}
/* Cards dos recursos */
.card-custom {
background-color: var(--cor-clara);
color: var(--cor-escura);
border: none;
border-top: 3px solid var(--cor-verde);
}
.card-header {
background-color: var(--cor-verde);
color: var(--cor-clara);
}
/* Depoimentos */
.testimonial {
font-style: italic;
margin-bottom: 20px;
border-left: 3px solid #A68A64;
padding-left: 15px;
}
/* Footer */
.footer {
text-align: center;
background-color: var(--cor-clara);
color: var(--cor-escura);
padding: 20px 0 5px 0;
border-top: 3px solid var(--cor-escura);
}
.faq {
background-color: var(--cor-verde);
color: var(--cor-clara);
}
/* Efeitos */
[data-aos] {
opacity: 0;
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}
[data-aos="fade-up"] {
transform: translateY(20px);
}
[data-aos].aos-active {
opacity: 1;
transform: translateY(0);
}

/* Estilo padrão para desktop */
.hero {
background-size: cover;
background-position: center;
height: 100vh;
}
.title {
text-align: left;
margin-bottom: 50px;
color: var(--cor-verde);
}

#sucessoOverlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.9); /* fundo escuro semitransparente */
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.mensagemSucesso {
background-color: white;
padding: 30px;
border-radius: 10px;
text-align: center;
max-width: 500px;
font-family: Poppins;
box-shadow: 0 0 15px rgba(0,0,0,0.3);
}
.mensagemSucesso button {
margin-top: 20px;
padding: 10px 20px;
background-color: #3c3c3c;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.mensagemSucesso button:hover {
background-color: #000;
}

.carrossel-container {
width: 100%;
overflow: hidden;
background: #f9f9f9;
padding: 10px 0;
}
.carrossel-lista {
padding-top: 20px;
display: flex;
width: max-content;
animation: moverCarrossel 45s linear infinite;
}
.carrossel-lista li {
list-style: none;
margin: 0 20px;
flex-shrink: 0;
}
.carrossel-lista img {
height: 100px;
width: auto;
max-width: 200px;
object-fit: contain;
display: block;
filter: grayscale(0%);
transition: 0.3s ease-in-out;
}
.carrossel-lista img:hover {
transform: scale(1.05);
filter: grayscale(0%);
}
@keyframes moverCarrossel {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* Responsivo: Duplicação das imagens para looping suave */
.carrossel-externo {
display: flex;
gap: 60px;
}
@media (max-width: 600px) {
.carrossel-lista img {
height: 60px;
max-width: 100px;
}
}

/* Responsividade para imagens */

@media (max-width: 768px) {
.text-video {
margin-top: 30px;
margin-bottom: 30px;
}
.img-index {
margin-left: -23%;

}
.hero {
height: fit-content;
align-items: center;
text-align: center;
flex-direction: column;
gap: 1px;
padding: 10px;

}
.hero-content {
max-width: 100%;

}
.div-vid {
padding: 2px 2px 4px 2px;
margin: auto 2%;
}
}

.accordion-header button {
background-color: var(--cor-clara);
color: var(--cor-verde);
}
.preco {
}
.destaq {
box-shadow: 3px 3px 15px rgba(0,100,50,0.1);
border-radius: 65px 65px 65px 0;
}

.vitalicio {
background-color: #2c2c2c;
color: var(--cor-clara);
box-shadow: 3px 3px 15px rgba(0,100,50,0.1);
border-radius: 10px;
}
.badge {
font-size: 1.1em;
top: -12px;
right: 35px;
background-color: var(--cor-verde);
}
i .fa-crow {
position: absolute;
font-size: 1.3em;
}