* {
	text-decoration: none;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 30px;
}

/* Geral */
body {
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* Header */
header {
	width: 100%;
	/* max-height: 350px; /* Define a altura máxima do header */
	background: linear-gradient(to right, #6060dd, #2b0858); /* Gradiente de azul para cinza */
	color: white;
	overflow: hidden; /* Garante que o conteúdo não ultrapasse a altura máxima */
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px 0;
}

@media (max-width: 768px) {
	header {
		max-height: none; /* Permitir que o header cresça com o conteúdo */
	}
}

/* Contêiner centralizado dentro do header */
.header-container {
	max-width: 1000px; /* Define a largura máxima do conteúdo do header */
	width: 100%; /* Ocupa toda a largura disponível até o máximo definido */
	margin: 0 auto; /* Centraliza o contêiner horizontalmente */
	padding: 0 20px; /* Adiciona padding lateral para espaçamento */
	box-sizing: border-box; /* Inclui padding e border na largura total */
}

/* Navegação */
nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0; /* Ajusta o padding para o nav */
	position: relative; /* Para posicionar o menu mobile */
	z-index: 1001; /* Garante que o nav fique acima do menu mobile */
}

.nav-links {
	list-style: none;
	display: flex;
	margin: 0;
	padding: 0;
}

.nav-links li {
	margin-left: 20px;
}

.nav-links a {
	color: #ffc107; /* Cor dos links alterada para a cor dos botões */
	text-decoration: none; /* Remove sublinhado dos links */
}

.nav-links a:hover {
	color: #ffc107; /* Cor dos links ao passar o mouse */
}

.burger {
	display: none; /* Esconde o botão em dispositivos maiores */
	cursor: pointer;
	flex-direction: column;
	justify-content: space-between;
	height: 21px;
	z-index: 1002; /* Garante que o botão fique acima do menu mobile */
}

.burger div {
	width: 25px;
	height: 3px;
	background-color: #fff;
	border-radius: 5px;
}

@media (max-width: 768px) {
	.nav-links {
		position: fixed; /* Corrige o posicionamento do menu mobile */
		right: 0;
		height: 100vh;
		top: 0;
		background-color: rgba(51, 51, 51, 0.2); /* Fundo do menu mobile com opacidade */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 80%; /* Ajusta a largura do menu mobile */
		transform: translateX(100%);
		transition:
			transform 0.5s ease-in,
			background-color 0.5s ease-in;
		z-index: 1000; /* Garante que o menu fique sobre outros elementos */
	}

	.nav-links li {
		margin: 20px 0;
	}

	.nav-active {
		transform: translateX(0);
		background-color: rgba(51, 51, 51, 0.95); /* Adiciona opacidade ao menu quando ativo */
	}

	.burger {
		display: flex; /* Exibe o botão em dispositivos móveis */
	}
}

/* Animação do botão hamburguer */
.toggle .line1 {
	transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .line2 {
	opacity: 0;
}

.toggle .line3 {
	transform: rotate(45deg) translate(-5px, -6px);
}

/* Hero Section */
.hero {
	text-align: center;
	padding: 20px 0; /* Ajusta o padding para o hero */
}

.hero h1 {
	font-size: 2.5em;
	margin: 0;
}

.hero p {
	font-size: 1.2em;
	margin: 10px 0;
}

/* Estilo do botão cta-button dentro do header */
.cta-button {
	background: #ffc107;
	color: #333;
	padding: 15px 30px;
	text-decoration: none;
	border-radius: 5px;
	margin-top: 20px;
	display: inline-block;
}

@media (max-width: 768px) {
	.cta-button {
		display: inline-block; /* Certifique-se de que o display esteja configurado corretamente */
		margin-top: 20px;
		font-size: 1em; /* Ajuste o tamanho da fonte para se adequar a telas menores */
	}
}

/* Carousel */
.carousel {
	width: 100%;
	height: 300px; /* Define a altura do carrossel */
	margin: 0 auto; /* Centraliza o carrossel horizontalmente */
}

.carousel-inner {
	height: 100%;
}

.carousel-item {
	height: 100%;
}

.carousel img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* Faz com que a imagem cubra o espaço disponível */
	object-position: center 30%; /* Ajuste a posição da imagem */
}

.carousel-indicators li {
	width: 10px; /* Ajuste a largura conforme necessário */
	height: 10px; /* Ajuste a altura conforme necessário */
	border-radius: 50%; /* Para torná-los circulares */
	background-color: #ccc; /* Cor dos indicadores inativos */
	border: none; /* Remove borda padrão */
	margin: 1px; /* Espaçamento entre indicadores */
	overflow: hidden; /* Garante que o conteúdo não ultrapasse o tamanho */
	position: relative; /* Necessário para o uso de ::before */
}

.carousel-indicators li::before {
	content: ""; /* Remove qualquer conteúdo textual */
	display: block; /* Garante que o pseudo-elemento ocupe espaço */
	width: 100%; /* Ocupa toda a largura do elemento pai */
	height: 100%; /* Ocupa toda a altura do elemento pai */
	position: absolute; /* Posiciona o pseudo-elemento em relação ao pai */
	top: 0;
	left: 0;
	background-color: inherit; /* Herdar a cor do background do pai */
	z-index: 1; /* Garante que esteja acima de qualquer conteúdo interno */
}

.carousel-indicators .active {
	background-color: #007bff; /* Cor do indicador ativo */
}

.carousel-indicators .active::before {
	background-color: #007bff; /* Cor do indicador ativo no pseudo-elemento */
}

/* Estilo para telas maiores que 768px (tablets e desktops) */
@media (min-width: 768px) {
	.carousel {
		height: 400px; /* Altura para tablets e desktops */
	}
}

/* Main */
main {
	padding: 50px 20px;
}

/* Funcionalidades e Depoimentos */
.funcionalidades {
	max-width: 1000px; /* Define a largura máxima para o conteúdo das funcionalidades */
	margin: 0 auto; /* Centraliza a seção das funcionalidades horizontalmente */
	padding: 0 20px; /* Adiciona padding lateral para espaçamento */
	text-align: center; /* Centraliza o texto */
}

.funcionalidades h2 {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.features {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.feature {
	background: #f4f4f4;
	border-radius: 5px;
	padding: 20px;
	margin: 10px;
	flex: 1;
	min-width: 250px;
	max-width: 300px;
	text-align: center;
}

.features .feature i {
	color: rgba(113, 208, 246, 0.9);
	font-size: 0.9em; /* Ajuste o tamanho conforme necessário */
}

/* Depoimentos */
.depoimentos {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 20px;
	text-align: center;
}

.depoimentos h2 {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.testimonial-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px; /* Espaçamento entre os testemunhos */
}

.testimonial {
	background: #f4f4f4;
	border-radius: 5px;
	padding: 20px;
	margin: 10px;
	flex: 1 1 calc(50% - 40px); /* Ajuste para dois por linha */
	max-width: 300px;
	text-align: center;
	box-sizing: border-box;
}

@media (max-width: 768px) {
	.testimonial {
		flex: 1 1 100%; /* Ajuste para um por linha em telas menores */
	}
}

/* Demonstração */
.demonstracao {
	max-width: 1000px;
	margin: 0 auto;
	padding: 20px;
	text-align: center;
}

.demonstracao h2 {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.demonstracao-container {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	flex-direction: row; /* Adicionado para alinhar lado a lado em telas maiores */
}

.video {
	flex: 1;
	text-align: center;
}

.video a {
	display: inline-block;
}

.video img {
	max-width: 100%;
	border-radius: 5px;
}

.resumo {
	flex: 1;
	text-align: left;
	padding-left: 20px;
}

@media (max-width: 768px) {
	.demonstracao-container {
		flex-direction: column; /* Coloca o vídeo acima do texto em telas menores */
	}
	.resumo {
		padding-left: 0;
		margin-top: 20px; /* Adiciona espaço abaixo do vídeo */
	}
}

/* Sobre */
.sobre {
	max-width: 1000px;
	margin: 0 auto;
	padding: 20px;
	text-align: center;
}

.sobre-container {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	flex-direction: row;
}

.sobre-container p {
	flex: 1;
	text-align: left;
}

.logo {
	font-weight: bold;
	font-size: 1.3rem;
	letter-spacing: 0.1rem;
	color: #fff;
}

.logo-sobre {
	max-width: 150px;
	margin-left: 20px; /* Move o logotipo para o lado direito */
}

@media (max-width: 768px) {
	.sobre-container {
		flex-direction: column; /* Coloca a imagem antes do texto em telas menores */
	}
	.logo-sobre {
		margin-left: 0;
		margin-bottom: 20px; /* Adiciona espaço abaixo da imagem */
	}
}

/* FAQ */
.faq {
	max-width: 1000px;
	margin: 0 auto;
	padding: 20px;
	text-align: center;
}

.faq h2 {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.faq-item {
	margin-bottom: 20px;
	text-align: left;
}

.faq-item h3 {
	font-size: 1.2em;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 10px;
}

.faq-item p {
	font-size: 1em;
	display: none; /* Esconde a resposta por padrão */
}

/* Experimente e Contato */
.experimente,
.contato {
	text-align: center;
	margin: 40px 0;
}

footer {
	background: #333;
	color: white;
	text-align: center;
	padding: 20px 0;
}

footer a {
	color: #ffc107;
	text-decoration: none; /* Remove o sublinhado dos links no rodapé */
}

.whatsapp-float {
	position: fixed;
	width: 60px;
	height: 60px;
	bottom: 40px;
	right: 40px;
	background-color: #25d366;
	color: #fff;
	border-radius: 50%;
	text-align: center;
	font-size: 30px;
	box-shadow: 2px 2px 3px #999;
	z-index: 1000;
	display: flex;
	justify-content: center;
	align-items: center; /* Corrige a centralização vertical */
	text-decoration: none; /* Remove a decoração do link */
}

.whatsapp-float:hover {
	background-color: #1ebc57; /* Adiciona um efeito hover */
}

.whatsapp-icon {
	font-size: 30px;
	color: white;
	text-decoration: none; /* Remove a decoração do ícone */
}

/* Seção Aproveite */
.aproveite {
	text-align: center;
	padding: 50px 20px;
	background: #f4f4f4;
}

.aproveite h2 {
	font-size: 2em;
	margin-bottom: 20px;
}

.contador-container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.contador {
	display: flex;
	justify-content: center;
	gap: 10px;
}

.contador div {
	background: #6060dd;
	color: white;
	padding: 10px 20px;
	border-radius: 5px;
	text-align: center;
}

.contador span {
	font-size: 2em;
	display: block;
}

.oferta {
	margin-top: 20px;
	font-size: 1.2em;
	color: #333;
}

.valor-original {
	text-decoration: line-through;
	color: #ff0000;
}

.valor-novo {
	background: #ffc107;
	padding: 5px 10px;
	border-radius: 5px;
	color: #333;
	font-size: 1.5em;
	font-weight: bold;
}

form {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.input-container {
	position: relative;
	margin-bottom: 20px;
}

input {
	width: 350px;
	max-width: 400px;
	padding: 12px 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	font-size: 16px;
}

input:focus {
	border-color: #007bff;
	outline: none;
}

label {
	position: absolute;
	top: -10px; /* Posição fixa na parte superior */
	left: 10px;
	background-color: white;
	padding: 0 5px;
	font-size: 12px; /* Tamanho fixo */
	color: #007bff; /* Cor fixa */
	transition: none; /* Remove transições */
	pointer-events: none;
}

input[placeholder] {
	color: #999; /* Cor padrão do placeholder */
}

input::-webkit-input-placeholder {
	color: #999; /* Cor padrão para navegadores Webkit */
}
input:-moz-placeholder {
	/* Firefox 18- */
	color: #999; /* Cor padrão para versões antigas do Firefox */
}
input::-moz-placeholder {
	/* Firefox 19+ */
	color: #999; /* Cor padrão para versões mais novas do Firefox */
}
input:-ms-input-placeholder {
	color: #999; /* Cor padrão para Internet Explorer */
}