/*
	 * Este arquivo CSS contém os estilos para o layout e componentes do site.
	 * Ele está organizado em seções para facilitar a navegação e manutenção.
	 */

	/* ---------------------------------------------
	 * Sumário de Conteúdo
	 * ---------------------------------------------
	 * 01. Fontes e Reset CSS: Importação de fontes e redefinição de estilos padrão do navegador.
	 * 02. Estilos Globais: Definições de estilos que se aplicam a todo o site.
	 * 03. Pre-loader: Estilos para a animação de carregamento da página.
	 * 04. Cabeçalho (Header): Estilos para o cabeçalho principal e sub-cabeçalho.
	 * 05. Banner Principal: Estilos para o carrossel de banners, incluindo vídeo de fundo.
	 * 06. Seção de Destaques (Featured): Estilos para a seção de informações destacadas e acordeão.
	 * 07. Seção de Vídeo: Estilos para a seção que exibe um vídeo.
	 * 08. Seção de Fatos Curiosos (Fun Facts): Estilos para os contadores de fatos.
	 * 09. Seção Melhor Oferta (Best Deal): Estilos para a seção de abas e ofertas.
	 * 10. Seção de Propriedades: Estilos para a listagem de propriedades.
	 * 11. Seção de Contato: Estilos para o formulário de contato e informações de contato.
	 * 12. Rodapé (Footer): Estilos para o rodapé do site.
	 * 13. Estilo do Cabeçalho da Página (Page Header): Estilos para banners de páginas internas.
	 * 14. Estilo da Página de Propriedade Única (Single Property): Estilos para a página de detalhes de uma propriedade.
	 * 15. Estilo da Página de Contato (Contact Page): Estilos específicos para a página de contato.
	 * 16. Estilos Responsivos: Ajustes de layout para diferentes tamanhos de tela (mobile, tablet).
	 * ---------------------------------------------
	 */

	/* ---------------------------------------------
	 * 01. Fontes e Reset CSS
	 * --------------------------------------------- */
	/* Importa a fonte 'Poppins' do Google Fonts para uso em todo o site. */
	@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900");

	/*
	 * Reset CSS: Remove margens, paddings, bordas e outlines padrão
	 * de diversos elementos HTML para garantir consistência entre navegadores.
	 */
	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div,
	pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
	s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
	figure, header, nav, section, article, aside, footer, figcaption {
	  margin: 0;
	  padding: 0;
	  border: 0;
	  outline: 0;
	}

	/*
	 * Clearfix: Uma técnica para garantir que um elemento pai contenha corretamente
	 * seus filhos flutuantes, evitando problemas de layout.
	 */
	.clearfix:after {
	  content: ".";
	  display: block;
	  clear: both;
	  visibility: hidden;
	  line-height: 0;
	  height: 0;
	}

	.clearfix {
	  display: inline-block;
	}

	html[xmlns] .clearfix {
	  display: block;
	}

	* html .clearfix {
	  height: 1%;
	}

	/* Remove padding, margin e o estilo de lista padrão (marcadores) para listas não ordenadas. */
	ul, li {
	  padding: 0;
	  margin: 0;
	  list-style: none;
	}

	/* Define elementos HTML5 como blocos para garantir a renderização correta em navegadores antigos. */
	header, nav, section, article, aside, footer, hgroup {
	  display: block;
	}

	/*
	 * Box-sizing: Define como o tamanho total de um elemento é calculado.
	 * 'border-box' inclui padding e border na largura e altura especificadas,
	 * facilitando o controle do layout.
	 */
	* {
	  box-sizing: border-box;
	}

	/* Estilos básicos para o corpo do documento: define a fonte e suaviza o texto. */
	html, body {
	  font-family: 'Poppins', sans-serif;
	  -ms-text-size-adjust: 100%;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}

	/* Remove o sublinhado padrão de todos os links. */
	a {
	  text-decoration: none !important;
	}

	/* Estilos para títulos (h1 a h6): define cor, remove margens e define peso da fonte. */
	h1, h2, h3, h4, h5, h6 {
	  color: #1e1e1e;
	  margin-top: 0px;
	  margin-bottom: 0px;
	  font-weight: 700;
	}

	/* Remove a margem inferior padrão de listas não ordenadas. */
	ul {
	  margin-bottom: 0px;
	}

	/* Estilos para parágrafos: define tamanho da fonte, altura da linha e cor. */
	p {
	  font-size: 14px;
	  line-height: 28px;
	  color: #4a4a4a;
	}

	/* Garante que as imagens ocupem 100% da largura de seu container e esconde qualquer conteúdo que transborde. */
	img {
	  width: 100%;
	  overflow: hidden;
	}

	/* ---------------------------------------------
	 * 02. Estilos Globais
	 * --------------------------------------------- */
	/* Redefine a fonte principal para html e body, garantindo a aplicação da fonte Poppins. */
	html,
	body {
	  font-family: 'Poppins', sans-serif;
	}

	/* Estilo para o texto selecionado pelo usuário, alterando a cor de fundo e do texto. */
	::selection {
	  background: #0071f8;
	  color: #fff;
	}

	::-moz-selection {
	  background: #0071f8;
	  color: #fff;
	}

	/* Define uma margem superior padrão para todas as seções do site. */
	.section {
	  margin-top: 90px;
	}

	/* Define uma margem inferior padrão para os cabeçalhos de seção. */
	.section-heading {
	  margin-bottom: 70px;
	}

	/* Estilo para o título principal dentro de um cabeçalho de seção. */
	.section-heading h2 {
	  font-size: 40px;
	  font-weight: 700;
	  text-transform: capitalize;
	  margin-top: 20px;
	  line-height: 56px;
	}

	/* Estilo para o texto em ênfase (destaque) dentro do título principal da seção. */
	.section-heading h2 em {
	  font-style: normal;
	  color: #0071f8;
	}

	/* Estilo para o subtítulo dentro de um cabeçalho de seção. */
	.section-heading h6 {
	  color: #0071f8;
	  font-size: 15px;
	  text-transform: uppercase;
	  font-weight: 700;
	}

	/* Estilo para botões que contêm um ícone. */
	.icon-button a {
	  display: inline-block;
	  background-color: #1e1e1e;
	  color: #fff;
	  font-size: 14px;
	  font-weight: 400;
	  height: 50px;
	  line-height: 50px;
	  padding: 0px 30px 0px 0px;
	  border-radius: 25px;
	  transition: all .3s;
	}

	/* Estilo para o ícone dentro do botão com ícone. */
	.icon-button a i {
	  background-color: #0071f8;
	  height: 50px;
	  width: 50px;
	  text-align: center;
	  border-radius: 50%;
	  line-height: 50px;
	  display: inline-block;
	  margin-right: 15px;
	  margin-left: -1px;
	}

	/* Efeito de hover para o texto do botão com ícone. */
	.icon-button a:hover {
	  color: #0071f8;
	}

	/* Efeito de hover para o ícone do botão com ícone. */
	.icon-button a:hover i {
	  color: #fff;
	}

	/* Estilo para botões principais do site. */
	.main-button a {
	  display: inline-block;
	  background-color: #1e1e1e;
	  color: #fff;
	  font-size: 14px;
	  font-weight: 500;
	  height: 40px;
	  line-height: 40px;
	  padding: 0px 30px;
	  border-radius: 25px;
	  transition: all .3s;
	}

	/* Efeito de hover para botões principais. */
	.main-button a:hover {
	  background-color: #0071f8;
	  color: #fff;
	}

	/* ---------------------------------------------
	 * 03. Pre-loader
	 * --------------------------------------------- */
	/* Estilo do container principal do pre-loader, que cobre toda a tela. */
	.js-preloader {
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background-color: rgba(0,0,0,0.99); /* Fundo escuro quase preto */
	  display: -webkit-box; /* Compatibilidade com navegadores antigos */
	  display: flex; /* Usa flexbox para centralizar o conteúdo */
	  -webkit-box-align: center;
	  align-items: center; /* Centraliza verticalmente */
	  -webkit-box-pack: center;
	  justify-content: center; /* Centraliza horizontalmente */
	  opacity: 1;
	  visibility: visible;
	  z-index: 9999; /* Garante que o pre-loader fique acima de tudo */
	  -webkit-transition: opacity 0.25s ease;
	  transition: opacity 0.25s ease; /* Transição suave ao desaparecer */
	}

	/* Estilo para esconder o pre-loader quando a página estiver totalmente carregada. */
	.js-preloader.loaded {
	  opacity: 0; /* Torna-o invisível */
	  visibility: hidden; /* Esconde-o da árvore de renderização */
	  pointer-events: none; /* Impede interações com o mouse */
	}

	/* Animação para o ponto único do pre-loader, movendo-o horizontalmente. */
	@-webkit-keyframes dot {
	  50% {
		-webkit-transform: translateX(96px);
		transform: translateX(96px);
	  }
	}

	@keyframes dot {
	  50% {
		-webkit-transform: translateX(96px);
		transform: translateX(96px);
	  }
	}

	/* Animação para os múltiplos pontos do pre-loader, movendo-os horizontalmente. */
	@-webkit-keyframes dots {
	  50% {
		-webkit-transform: translateX(-31px);
		transform: translateX(-31px);
	  }
	}

	@keyframes dots {
	  50% {
		-webkit-transform: translateX(-31px);
		transform: translateX(-31px);
	  }
	}

	/* Container interno que agrupa os pontos do pre-loader. */
	.preloader-inner {
	  position: relative;
	  width: 142px;
	  height: 40px;
	  background: transparent;
	}

	/* Estilo para o ponto único que se move. */
	.preloader-inner .dot {
	  position: absolute;
	  width: 16px;
	  height: 16px;
	  top: 12px;
	  left: 15px;
	  background: #0071f8; /* Cor azul */
	  border-radius: 50%; /* Transforma em círculo */
	  -webkit-transform: translateX(0);
	  transform: translateX(0);
	  -webkit-animation: dot 2.8s infinite; /* Aplica a animação 'dot' */
	  animation: dot 2.8s infinite;
	}

	/* Estilo para o grupo de pontos que se movem em conjunto. */
	.preloader-inner .dots {
	  -webkit-transform: translateX(0);
	  transform: translateX(0);
	  margin-top: 12px;
	  margin-left: 31px;
	  -webkit-animation: dots 2.8s infinite; /* Aplica a animação 'dots' */
	  animation: dots 2.8s infinite;
	}

	/* Estilo para cada ponto individual dentro do grupo 'dots'. */
	.preloader-inner .dots span {
	  display: block;
	  float: left; /* Alinha os pontos lado a lado */
	  width: 16px;
	  height: 16px;
	  margin-left: 16px;
		  background: #0071f8; /* Cor azul */
		  border-radius: 50%; /* Transforma em círculo */
		}

		/* ---------------------------------------------
		 * 04. Cabeçalho (Header)
		 * --------------------------------------------- */
		/* Ajuste da altura máxima e alinhamento vertical da imagem do logo no cabeçalho principal. */
		.header-area .main-nav .logo img.header-logo {
		  max-height: 210px; /* Altura máxima do logo */
	  width: auto;      /* Largura automática para manter proporção */
	  vertical-align: middle; /* Alinhamento vertical */
	  margin-top: -58px; /* Ajuste para centralizar verticalmente */
	}

	/* Estilos para a imagem do logo quando o cabeçalho se torna fixo (sticky header). */
	.background-header .main-nav .logo img.header-logo {
	  max-height: 180px; /* Altura máxima para o logo no cabeçalho fixo */
	  margin-top: -49px; /* Ajuste para centralizar verticalmente no cabeçalho fixo */
	}

	/* Estilos para o sub-cabeçalho, que geralmente contém informações de contato e links sociais. */
	.sub-header {
	  background-color: #fff;
	  padding: 10px 0px;
	  border-bottom: 1px solid #eee;
	}

	/* Define que os itens da lista no sub-cabeçalho sejam exibidos em linha. */
	.sub-header ul li {
	  display: inline-block;
	}

	/* Alinha os links sociais à direita no sub-cabeçalho. */
	.sub-header ul.social-links {
	  text-align: right;
	}

	/* Margem entre os links sociais. */
	.sub-header ul.social-links li {
	  margin-left: 8px;
	}

	/* Estilo dos links sociais (círculos com ícones). */
.sub-header ul.social-links li a {
    /* Mantém as propriedades existentes */
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    transition: all .3s;

    /* AJUSTE CRÍTICO AQUI: Altera o fundo para azul escuro */
    background-color: #001a4d !important; /* Fundo azul escuro para os botões */
    color: #ffffff !important; /* Garante que o ícone seja branco */
}

/* Mantém o efeito de hover para azul vibrante */
.sub-header ul.social-links li a:hover {
    background-color: #0071f8 !important; /* Azul vibrante no hover */
    color: #ffffff !important; /* Garante que o ícone continue branco no hover */
}
	/* Estilo para os itens de informação (telefone, e-mail) no sub-cabeçalho. */
	.sub-header ul.info li {
	  font-size: 14px;
	  color: #7a7a7a;
	  border-right: 1px solid #eee;
	  margin-right: 25px;
	  padding-right: 25px;
	}

	/* Remove a borda direita do último item de informação. */
	.sub-header ul.info li:last-child {
	  margin-right: 0px;
	  padding-right: 0px;
	  border-right: none;
	}

	/* Estilo para os ícones dentro dos itens de informação. */
	.sub-header ul.info li i {
	  font-size: 20px;
	  color: #0071f8;
	  margin-right: 8px;
	}

	/* Estilos para o cabeçalho quando ele se torna fixo (sticky) ao rolar a página. */
	.background-header {
	  background-color: #fff;
	  height: 80px!important;
	  position: fixed!important;
	  top: 0!important;
	  left: 0;
	  right: 0;
	  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important; /* Sombra para destacar */
	  -webkit-transition: all .5s ease 0s;
	  -moz-transition: all .5s ease 0s;
	  -o-transition: all .5s ease 0s;
	  transition: all .5s ease 0s; /* Transição suave */
	}

	/* Estilos gerais para a área do cabeçalho principal. */
	.header-area {
	  position: relative;
	  background-color: #fff;
	  height: 100px;
	  z-index: 100; /* Garante que o cabeçalho fique acima de outros elementos */
	  -webkit-transition: all .5s ease 0s;
	  -moz-transition: all .5s ease 0s;
	  -o-transition: all .5s ease 0s;
	  transition: all .5s ease 0s;
	}

	/* Estilos para a navegação principal dentro do cabeçalho. */
	.header-area .main-nav {
	  background: transparent;
	  display: flex; /* Usa flexbox para alinhar logo e menu */
	}

	/* Estilos para o logo na navegação principal. */
	.header-area .main-nav .logo {
	  -webkit-transition: all 0.3s ease 0s;
	  -moz-transition: all 0.3s ease 0s;
	  -o-transition: all 0.3s ease 0s;
	  transition: all 0.3s ease 0s;
	  display: inline-block;
	}

	/* Estilos para o título do logo (se for texto). */
	.header-area .main-nav .logo h1 {
	  line-height: 100px;
	  font-size: 28px;
	  text-transform: uppercase;
	  color: #1e1e1e;
	  font-weight: 700;
	  letter-spacing: 2px;
	}

	/* Ajuste da altura da linha do título do logo quando o cabeçalho está fixo. */
	.background-header .main-nav .logo h1 {
	  line-height: 80px;
	}

	/* Estilos para a lista de navegação (menu). */
	.header-area .main-nav ul.nav {
	  flex-basis: 100%; /* Ocupa o espaço restante */
	  margin-top: 30px;
	  justify-content: right; /* Alinha os itens do menu à direita */
	  -webkit-transition: all 0.3s ease 0s;
	  -moz-transition: all 0.3s ease 0s;
	  -o-transition: all 0.3s ease 0s;
	  transition: all 0.3s ease 0s;
	  position: relative;
	  z-index: 999;
	}

	/* Remove o padding direito do último item da navegação. */
	.header-area .main-nav .nav li:last-child {
	  padding-right: 0px;
	}

	/* Estilos para cada item da navegação. */
	.header-area .main-nav .nav li {
	  padding-left: 10px;
	  padding-right: 10px;
	  height: 100px;
	  line-height: 100px;
	}

	/* Estilos para os links dentro dos itens da navegação. */
	.header-area .main-nav .nav li a {
	  display: block;
	  padding-left: 20px;
	  padding-right: 20px;
	  font-weight: 500;
	  font-size: 15px;
	  height: 40px;
	  line-height: 40px;
	  text-transform: capitalize;
	  color: #1e1e1e;
	  -webkit-transition: all 0.4s ease 0s;
	  -moz-transition: all 0.4s ease 0s;
	  -o-transition: all 0.4s ease 0s;
	  transition: all 0.4s ease 0s;
	  border: transparent;
	  letter-spacing: .25px;
	}

	/* Estilo especial para o último link da navegação, que geralmente é um botão. */
	.header-area .main-nav .nav li:last-child a {
	  background-color: #1e1e1e;
	  color: #fff;
	  font-size: 14px;
	  font-weight: 400;
	  text-transform: none;
	  border-radius: 20px;
	  padding-left: 0px;
	}

	/* Estilo para o ícone dentro do último link da navegação. */
	.header-area .main-nav .nav li:last-child a i {
	  background-color: #0071f8;
	  display: inline-block;
	  width: 40px;
	  height: 40px;
	  text-align: center;
	  line-height: 40px;
	  margin-right: 10px;
	  border-radius: 50%;
	  margin-left: -1px;
	}

	/* Efeito de hover para o último link da navegação. */
	.header-area .main-nav .nav li:last-child:hover a {
	  background-color: #1e1e1e;
	}

	.header-area .main-nav .nav li:last-child:hover a i {
	  color: #fff;
	}

	/* Efeito de hover para os links da navegação, mudando a cor do texto. */
	.header-area .main-nav .nav li:hover a {
	  color: #0071f8;
	}

	/* Estilo para o link ativo na navegação. */
	.header-area .main-nav .nav li a.active {
	  color: #0071f8;
	}

	/* Estilo para o link ativo na navegação quando o cabeçalho está fixo. */
	.background-header .main-nav .nav li a.active {
	  color: #0071f8;
	}

	/* Estilo para o menu-trigger (ícone de hambúrguer), inicialmente escondido. */
	.header-area .main-nav .menu-trigger {
	  cursor: pointer;
	  position: absolute;
	  top: 23px;
	  width: 32px;
	  height: 40px;
	  text-indent: -9999em; /* Esconde o texto */
	  z-index: 99;
	  right: 20px;
	  display: none; /* Escondido por padrão, visível em mobile */
	}

	/* Posição do menu-trigger quando o cabeçalho está fixo. */
	.background-header .main-nav .menu-trigger {
	  top: 22px;
	}

	/* Margem superior da navegação quando o cabeçalho está fixo. */
	.background-header .main-nav ul.nav {
	  margin-top: 20px;
	}

	/* Estilo das barras do menu-trigger (as três linhas do hambúrguer). */
	.header-area .main-nav .menu-trigger span,
	.header-area .main-nav .menu-trigger span:before,
	.header-area .main-nav .menu-trigger span:after {
	  -moz-transition: all 0.4s;
	  -o-transition: all 0.4s;
	  -webkit-transition: all 0.4s;
	  transition: all 0.4s;
	  background-color: #1e1e1e;
	  display: block;
	  position: absolute;
	  width: 30px;
	  height: 2px;
	  left: 0;
	}

	.header-area .main-nav .menu-trigger span:before,
	.header-area .main-nav .menu-trigger span:after {
	  -moz-transition: all 0.4s;
	  -o-transition: all 0.4s;
	  -webkit-transition: all 0.4s;
	  transition: all 0.4s;
	  background-color: #1e1e1e;
	  display: block;
	  position: absolute;
	  width: 30px;
	  height: 2px;
	  left: 0;
	  width: 75%; /* Barras superior e inferior são mais curtas */
	}

	.header-area .main-nav .menu-trigger span:before,
	.header-area .main-nav .menu-trigger span:after {
	  content: ""; /* Conteúdo vazio para criar as barras */
	}

	/* Posição da barra central do menu-trigger. */
	.header-area .main-nav .menu-trigger span {
	  top: 16px;
	}

	/* Posição da barra superior do menu-trigger. */
	.header-area .main-nav .menu-trigger span:before {
	  -moz-transform-origin: 33% 100%;
	  -ms-transform-origin: 33% 100%;
	  -webkit-transform-origin: 33% 100%;
	  transform-origin: 33% 100%;
	  top: -10px;
	  z-index: 10;
	}

	/* Posição da barra inferior do menu-trigger. */
	.header-area .main-nav .menu-trigger span:after {
	  -moz-transform-origin: 33% 0;
	  -ms-transform-origin: 33% 0;
	  -webkit-transform-origin: 33% 0;
	  transform-origin: 33% 0;
	  top: 10px;
	}

	/* Estilo do menu-trigger quando está ativo (aberto), transformando as barras em um "X". */
	.header-area .main-nav .menu-trigger.active span,
	.header-area .main-nav .menu-trigger.active span:before,
	.header-area .main-nav .menu-trigger.active span:after {
	  background-color: transparent; /* Esconde a barra central */
	  width: 100%;
	}

	/* Rotação da barra superior para formar parte do "X". */
	.header-area .main-nav .menu-trigger.active span:before {
	  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
	  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
	  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
	  transform: translateY(6px) translateX(1px) rotate(45deg);
	  background-color: #1e1e1e;
	}

	.background-header .main-nav .menu-trigger.active span:before {
	  background-color: #1e1e1e;
	}

	/* Rotação da barra inferior para formar a outra parte do "X". */
	.header-area .main-nav .menu-trigger.active span:after {
	  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
	  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
	  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
	  transform: translateY(-6px) translateX(1px) rotate(-45deg);
	  background-color: #1e1e1e;
	}

	.background-header .main-nav .menu-trigger.active span:after {
	  background-color: #1e1e1e;
	}

	/* Classe utilitária para tornar um elemento visível, forçando 'display: inline'. */
	.visible {
	  display: inline !important;
	}

	/* ---------------------------------------------
	/* ---------------------------------------------
 * 05. Banner Principal - REESCRITO PARA POSIÇÃO DO TEXTO À ESQUERDA
 * --------------------------------------------- */

/* Estilo geral para os itens individuais do banner principal.
   Mantém a altura fixa e ajusta o alinhamento do conteúdo. */
.main-banner .item {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 0px;
    position: relative;
    overflow: hidden;
    height: 580px; /* <--- MANTENHA ESTE VALOR PARA A ALTURA VERTICAL DESEJADA */

    /* AJUSTE AQUI: Removemos a centralização horizontal e vertical do item.
       Agora, o conteúdo será alinhado à esquerda por padrão e o padding do header-text cuidará do espaçamento. */
    display: flex; /* Mantemos flex para controle do conteúdo */
    align-items: flex-start; /* Alinha o conteúdo ao topo do container */
    justify-content: flex-start; /* Alinha o conteúdo à esquerda do container */
    text-align: left; /* Garante que o texto dentro do item seja alinhado à esquerda */
}

/* Estilo específico para o item do banner que contém um vídeo de fundo. */
.main-banner .video-background-item {
    padding: 0;
    height: 580px; /* <--- MANTENHA ESTE VALOR IGUAL AO height do .main-banner .item */
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start; /* Alinha o conteúdo ao topo do container */
    justify-content: flex-start; /* Alinha o conteúdo à esquerda do container */
    text-align: left; /* Garante que o texto dentro do item seja alinhado à esquerda */
}

/* Estilo para a tag <video> em si, para que ela cubra todo o item do banner. */
.main-banner .video-background-item .background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    object-fit: cover;
}

/* Estilo para o container do texto dentro do banner (seja imagem ou vídeo).
   Este container agora terá um padding para posicionar o texto. */
.main-banner .item .header-text,
.main-banner .video-background-item .header-text {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 900px; /* Limita a largura máxima do texto */
    margin: 0; /* Remove margem automática para não centralizar */

    /* AJUSTE AQUI: Definimos o padding para posicionar o texto.
       O padding-top e padding-bottom vão empurrar o texto para baixo/cima.
       O padding-left vai empurrar o texto da esquerda. */
    padding: 180px 20% 0 20%; /* Exemplo: 180px do topo, 20% da direita, 0 do fundo, 20% da esquerda.
                                  Ajuste o '180px' para descer o texto do topo.
                                  Ajuste o '20%' para mover o texto da esquerda. */

    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinha os itens do texto (h2, span) à esquerda */
    justify-content: flex-start; /* Alinha verticalmente ao topo do header-text */
    box-sizing: border-box; /* Garante que o padding não aumente a largura total */
}

/* Estilo para o título principal do banner. */
.main-banner .item h2 {
    font-size: 62px;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff !important;
    line-height: 72px;
    margin-bottom: 20px;
    text-align: left; /* Garante que o texto do h2 seja alinhado à esquerda */
}

/* Estilo para a categoria/subtítulo do banner. */
.main-banner .item span.category {
    font-size: 18px;
    font-weight: 500;
    color: #ffffff !important;
    text-transform: uppercase;
    margin-bottom: 20px;
    display: block;
    text-align: left; /* Garante que o texto da categoria seja alinhado à esquerda */
}

/* Estilo para o botão dentro do banner. */
.main-banner .item .main-button {
    margin-top: 30px;
    text-align: left; /* Garante que o botão seja alinhado à esquerda */
}

/* Imagem de fundo para o segundo item do banner. */
.main-banner .item-2 {
    background-image: url(../images/banner-02.jpg);
}

/* Imagem de fundo para o terceiro item do banner. */
.main-banner .item-3 {
    background-image: url(../images/banner-03.jpg);
}

/* ---------------------------------------------
 * Estilos para a Navegação do Carrossel (Owl Carousel)
 * (Permanecem os mesmos, pois não afetam o posicionamento do texto interno)
 * --------------------------------------------- */

.owl-dots {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 30px;
    text-align: center;
    width: 100%;
    z-index: 10;
}

.owl-dots .owl-dot {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    display: inline-block;
    margin: 0 5px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.owl-dots .owl-dot.active {
    background-color: #0071f8;
    border-color: #0071f8;
    transform: scale(1.2);
}

.owl-dots .owl-dot:hover {
    background-color: #0071f8;
}

.owl-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    z-index: 10;
}

.owl-nav .owl-prev,
.owl-nav .owl-next {
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 20px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    cursor: pointer;
}

.owl-nav .owl-prev:hover,
.owl-nav .owl-next:hover {
    background-color: #0071f8;
}

/* ---------------------------------------------
 * Estilos Responsivos para o Banner Principal
 * --------------------------------------------- */

@media (max-width: 992px) {
    .main-banner .item,
    .main-banner .video-background-item {
        height: 450px;
    }

    .main-banner .item .header-text,
    .main-banner .video-background-item .header-text {
        max-width: 90%;
        padding: 100px 15px 0 15px; /* Ajusta o padding para mobile */
    }

    .main-banner .item h2 {
        font-size: 48px;
        line-height: 58px;
        width: 100%;
    }

    .main-banner .item span.category {
        font-size: 16px;
    }

    .owl-dots {
        bottom: 15px;
    }

    .owl-nav {
        padding: 0 10px;
    }
}

@media (max-width: 767px) {
    .main-banner .item,
    .main-banner .video-background-item {
        height: 380px;
    }

    .main-banner .item .header-text,
    .main-banner .video-background-item .header-text {
        padding: 60px 10px 0 10px; /* Mais ajustes para mobile muito pequeno */
    }

    .main-banner .item h2 {
        font-size: 36px;
        line-height: 46px;
    }

    .main-banner .item span.category {
        font-size: 14px;
    }

    .main-banner .item .main-button {
        margin-top: 20px;
    }
}

/* ---------------------------------------------
 /* ---------------------------------------------
 * 06. Seção de Destaques (Featured) - ATUALIZADA (Fundo Escuro Consistente e Tamanho da Tabela Restaurado)
 * --------------------------------------------- */

/* Estilo para a imagem à esquerda na seção de destaques. */
.featured .left-image {
    position: relative;
}
.featured .left-image img {
    padding-left: 55px;
}
/* Estilo para o botão de play que se sobrepõe à imagem. */
.featured .left-image a {
    display: inline-block;
    width: 110px;
    height: 110px;
    line-height: 110px;
    background-color: #0071f8; /* Azul vibrante */
    border-radius: 50%;
    text-align: center;
    position: absolute;
    left: 0;
    top: 50%; /* Centraliza verticalmente */
    transform: translateY(-50%);
    color: #fff;
    font-size: 30px;
    transition: all 0.3s ease;
}
/* Efeito de hover para o botão de play. */
.featured .left-image a:hover {
    background-color: #0056b3; /* Um tom de azul mais escuro no hover */
}

/* Estilos para o cabeçalho da seção de destaques. */
.featured .section-heading {
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 60px;
}

/* Largura do título principal na seção de destaques. */
.featured .section-heading h2,
.featured .section-heading h1 { /* Adicionado h1 para o "STYLE LOG PARA VOCÊ" */
    width: 70%;
    color: #ffffff !important; /* Garante que o título da seção seja branco */
}

/* Estilo para o container do acordeão na seção de destaques. */
.featured .accordion {
    margin-top: 60px;
    --bs-accordion-color: #ffffff; /* Cor do texto padrão do acordeão (branco) */
    --bs-accordion-bg: #001a4d; /* Fundo do acordeão (azul escuro, similar ao header/footer) */
    --bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
    --bs-accordion-border-color: rgba(255, 255, 255, 0.1); /* Borda suave e clara */
    --bs-accordion-border-width: 1px;
    --bs-accordion-border-radius: 10px;
    --bs-accordion-inner-border-radius: 10px;
    --bs-accordion-btn-padding-x: 1.25rem;
    --bs-accordion-btn-padding-y: 1rem;
    --bs-accordion-btn-color: #ffffff; /* Cor do texto do botão (título) do acordeão (branco) */
    --bs-accordion-btn-bg: #001a4d; /* Fundo do botão do acordeão (azul escuro) */
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); /* Ícone branco */
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230071f8'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); /* Ícone azul quando ativo */
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(0, 113, 248, 0.25); /* Sombra de foco azul */
    --bs-accordion-active-color: #0071f8; /* Cor do texto do botão ativo (azul) */
    --bs-accordion-active-bg: #002a6d; /* Fundo do botão ativo (azul escuro um pouco mais claro) */
    --bs-accordion-body-padding-x: 1.25rem;
    --bs-accordion-body-padding-y: 1rem;
    --bs-accordion-flush-bg: var(--bs-accordion-bg);
    --bs-accordion-flush-border-color: var(--bs-accordion-border-color);
    border: none !important; /* Remove bordas extras */
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3); /* Sombra mais pronunciada para destaque */
}

/* Estilo para o item do acordeão quando está ativo (aberto). */
.featured .accordion-item:not(:last-of-type) {
    border-bottom: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
}

/* Estilo para o botão do acordeão (cabeçalho). */
.featured .accordion-button {
    color: var(--bs-accordion-btn-color);
    background-color: var(--bs-accordion-btn-bg);
    border-radius: var(--bs-accordion-border-radius);
    padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
    font-weight: 600; /* Deixa o título do acordeão mais forte */
}

/* Estilo para o botão do acordeão quando não está colapsado (ativo). */
.featured .accordion-button:not(.collapsed) {
    color: var(--bs-accordion-active-color); /* Cor do texto do botão ativo (azul) */
    background-color: var(--bs-accordion-active-bg); /* Fundo do botão ativo (azul escuro um pouco mais claro) */
    box-shadow: var(--bs-accordion-btn-focus-box-shadow);
}

/* Estilo para o corpo do acordeão (conteúdo). */
.featured .accordion-body {
    color: #cccccc !important; /* Cor do texto do corpo do acordeão (cinza claro para contraste) */
    background-color: var(--bs-accordion-bg); /* Fundo do corpo do acordeão (azul escuro) */
    border-bottom-left-radius: var(--bs-accordion-inner-border-radius);
    border-bottom-right-radius: var(--bs-accordion-inner-border-radius);
}

/* Estilos para a tabela de informações na seção de destaques. */
/* Isso inclui o card "Segurança" e os outros itens da lista */
.featured .info-table {
    border-radius: 10px !important;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3) !important; /* Sombra mais escura para destaque */
    padding: 35px 30px !important;
    background-color: #001a4d !important; /* Fundo azul escuro para a tabela e o card "Segurança", FORÇADO */
    /* AJUSTE AQUI: Removi qualquer altura ou largura fixa que pudesse estar comprimindo a tabela */
    /* Se a tabela ainda parecer pequena, podemos adicionar um min-height aqui */
    min-height: 350px; /* Adicionei um min-height para garantir que a tabela tenha um tamanho mínimo */
                       /* Ajuste este valor se precisar que ela seja mais alta ou mais baixa */
}
/* Estilos para cada item da lista na tabela de informações. */
.featured .info-table ul li {
    display: block !important;
    margin-bottom: 35px !important;
    padding-bottom: 35px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; /* Borda clara e suave */
    color: #ffffff !important; /* Texto branco para os itens da lista, FORÇADO */
}
/* Remove a borda inferior e padding do último item da lista na tabela. */
.featured .info-table ul li:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
/* Estilo para a imagem dentro de cada item da tabela de informações. */
.featured .info-table ul li img {
    float: left !important;
    margin-right: 25px !important;
    filter: brightness(0) invert(1) !important; /* Inverte a cor da imagem para branco, FORÇADO */
}
/* Estilo para o título (h4) dentro de cada item da tabela de informações. */
.featured .info-table ul li h4 {
    font-size: 22px !important;
    font-weight: 600 !important;
    color: #ffffff !important; /* Título h4 branco, FORÇADO */
}
/* Estilo para o span (descrição) dentro do título da tabela de informações. */
.featured .info-table ul li h4 span {
    font-size: 15px !important;
    color: #cccccc !important; /* Descrição span cinza claro, FORÇADO */
    font-weight: 400 !important;
}

/* ---------------------------------------------
 * Estilos Responsivos para a Seção de Destaques (Featured)
 * --------------------------------------------- */

@media (max-width: 992px) {
    .featured .left-image {
        margin-bottom: 60px;
    }
    .featured .left-image img {
        padding-left: 0px;
    }
    .featured .left-image a {
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
    .featured .section-heading h2,
    .featured .section-heading h1 {
        width: 100%;
    }
    .featured .accordion {
        margin-top: 30px;
    }
    .featured .info-table {
        min-height: auto; /* Remove min-height em telas menores para se ajustar */
    }
}

/* AJUSTE PARA A SEÇÃO ANTERIOR: GARANTIR QUE NÃO HAJA MARGEM INFERIOR EMPURRANDO */
.featured.section {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important; /* Zera a margem inferior da seção 6 */
}



	/* ---------------------------------------------
/* ---------------------------------------------
 * 07. Seção de Vídeo - ATUALIZADA (Espaço Superior Ajustado)
 * --------------------------------------------- */
.video.section {
    background-image: url(../images/video-bg.jpg);
    background-repeat: no-repeat;
    background-size: auto 200%; /* Força a imagem a ser 200% da altura da seção. */
    background-position: center -250px; /* Movi a imagem de fundo 250px para cima */
    background-color: transparent;
    height: 550px; /* Mantemos a altura da seção para dar espaço à imagem de fundo */
    min-height: auto;
    padding-top: 40px !important;
    padding-bottom: 0px !important;
    margin-top: 0px !important; /* AJUSTE CRÍTICO AQUI: Zerei a margem superior (removendo o negativo) */
                               /* O espaçamento agora será controlado pela margem inferior da seção 6. */
    width: 100% !important;
    max-width: none !important;
    position: relative;
    overflow: hidden;
    z-index: 1;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
/* Ajuste para o container do conteúdo do vídeo, que inclui o título e o player */
.video-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    text-align: center !important;
    position: relative !important;
    z-index: 2 !important;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    flex-grow: 0;
}
/* Ajuste para o cabeçalho da seção de vídeo (título "Uma Nova Era na Logística") */
.video .section-heading {
    margin-bottom: 0 !important;
    text-align: center !important;
    position: relative !important;
    z-index: 3 !important;
    padding-top: 0;
    margin-top: 0;
}
/* Garante que o título e subtítulo da seção de vídeo tenham cor branca para contraste */
.video .section-heading h6,
.video .section-heading h2 {
    color: #ffffff !important;
    margin-top: 0;
    line-height: 1.2;
}
/* Estilo para o container do frame do vídeo, mantendo a proporção 16:9 e centralizando. */
.video-content .video-frame {
    position: relative !important;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15) !important;
    border-radius: 10px !important;
    width: 70% !important;
    max-width: 800px !important;
    margin: 0 auto !important;
    padding-bottom: 56.25% !important;
    height: 0 !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    z-index: 10 !important;
}
/* Efeito de hover para o container do vídeo */
.video-content .video-frame:hover {
    box-shadow: 0px 0px 25px rgba(0,0,0,0.3) !important;
}
/* Estilo para o iframe do vídeo, garantindo que ele preencha o container. */
.video-content .video-frame iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
}
/* Remova o zoom global se ainda estiver ativo no body */
body {
    zoom: normal !important;
    overflow-x: hidden;
}


	/* ---------------------------------------------
	 * 08. Seção de Fatos Curiosos (Fun Facts)
	 * --------------------------------------------- */
	/* Estilo da seção de fatos curiosos, com imagem de fundo e padding. */
	.fun-facts {
	  background-image: url(../images/fun-facts-bg.png);
	  background-position: center center;
	  background-repeat: no-repeat;
	  background-size: cover;
	  background-attachment: fixed;
	  padding: 100px 0px;
	  text-align: center;
	}

	/* Estilo para o título da seção de fatos curiosos, com cor branca. */
	.fun-facts .section-heading h2 {
	  color: #fff;
	}

	/* Estilo para o subtítulo da seção de fatos curiosos, com cor branca. */
	.fun-facts .section-heading h2 em {
	  font-style: normal;
	  color: #fff;
	}

	/* Estilo para o subtítulo (h6) da seção de fatos curiosos. */
	.fun-facts .section-heading h6 {
	  color: #fff;
	}

	/* Estilo para os contadores de fatos. */
	.fun-facts .count {
	  font-size: 36px;
	  color: #fff;
	  font-weight: 600;
	}

	/* Estilo para o texto descritivo abaixo dos contadores. */
	.fun-facts p {
	  color: #fff;
	  font-size: 15px;
	  margin-top: 15px;
	}

	/* ---------------------------------------------
	 * 09. Seção Melhor Oferta (Best Deal)
	 * --------------------------------------------- */
	/* Estilo para a lista de abas na seção de melhor oferta. */
	.best-deal .tabs-content ul.nav-tabs {
	  border-bottom: none;
	  margin-bottom: 0px;
	  justify-content: flex-end;
	  margin-top: 95px;
	}

	/* Estilo para cada item da lista de abas. */
	.best-deal .tabs-content ul.nav-tabs li {
	  margin-left: 2px;
	}

	/* Estilo para os links das abas. */
	.best-deal .tabs-content .nav-link {
	  background-color: #fafafa;
	  padding: 0px 30px;
	  height: 50px;
	  line-height: 50px;
	  border-radius: 30px;
	  border: none;
	  font-size: 16px;
	  font-weight: 500;
	  transition: all .3s;
	  min-width: 150px;
	  text-align: center;
	}

	/* Estilo para o link da aba ativa. */
	.best-deal .tabs-content .nav-link.active {
	  background-color: #1e1e1e;
	  color: #fff;
	}

	/* Estilo para a imagem dentro do conteúdo das abas. */
	.best-deal .tab-content img {
	  border-radius: 10px;
	  padding-right: 30px;
	}

	/* Estilos para a tabela de informações na seção de melhor oferta. */
	.best-deal .info-table {
	  border-radius: 10px;
	  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
	  padding: 35px 30px;
	}

	/* Estilos para cada item da lista na tabela de informações. */
	.best-deal .info-table ul li {
	  display: block;
	  margin-bottom: 20px;
	  padding-bottom: 20px;
	  border-bottom: 1px solid #eee;
	  font-size: 15px;
	  color: #aaa;
	  font-weight: 400;
	}

	/* Remove a borda inferior e padding do último item da lista na tabela. */
	.best-deal .info-table ul li:last-child {
	  border-bottom: none;
	  padding-bottom: 0;
	  margin-bottom: 0;
	}

	/* Estilo para o span (valor) dentro de cada item da tabela de informações. */
	.best-deal .info-table ul li span {
	  font-size: 20px;
	  color: #1e1e1e;
	  font-weight: 700;
	  float: right;
	  display: inline-block;
	}

	/* Estilos para o conteúdo das abas. */
	.best-deal .tabs-content {
	  padding: 0px;
	  background-color: transparent;
	}

	/* Estilo para o título (h4) dentro do conteúdo das abas. */
	.best-deal .tabs-content h4 {
	  font-size: 17px;
	  font-weight: 600;
	  margin-bottom: 30px;
	}

	/* Margem superior para o botão de ícone na seção de melhor oferta. */
	.best-deal .icon-button {
	  margin-top: 30px;
	}

	/* ---------------------------------------------
 /* ---------------------------------------------
 * 10. Seção de Contato (Contact Page) - ATUALIZADA (Fundo Escuro para Campos de Contato - SOLUÇÃO DEFINITIVA)
 * --------------------------------------------- */

/* Estilo geral para a seção de contato. */
.contact-page {
    padding-top: 100px;
    padding-bottom: 100px;
}

/* Estilo para o mapa de localização. */
.contact-page #map {
    width: 100%;
    height: 500px;
    border-radius: 10px;
    margin-bottom: 60px;
}

/* Estilo para o formulário de contato. */
.contact-page #contact-form {
    background-color: #001a4d !important; /* Fundo azul escuro para o formulário, FORÇADO */
    border-radius: 10px !important;
    padding: 40px !important;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3) !important; /* Sombra para destacar */
}

/* Estilo para os rótulos dos campos do formulário. */
.contact-page #contact-form label {
    color: #ffffff !important; /* Texto branco para os rótulos, FORÇADO */
    font-size: 16px !important;
    font-weight: 500 !important;
    margin-bottom: 10px !important;
    display: block !important;
}

/* Estilo para os campos de entrada (input e textarea) do formulário. */
.contact-page #contact-form input,
.contact-page #contact-form textarea {
    width: 100% !important;
    height: 50px !important;
    background-color: #002a6d !important; /* Fundo azul escuro mais claro para os campos, FORÇADO */
    border: 1px solid rgba(255, 255, 255, 0.1) !important; /* Borda suave e clara, FORÇADO */
    border-radius: 5px !important;
    padding: 10px 20px !important;
    font-size: 15px !important;
    color: #ffffff !important; /* Texto branco digitado, FORÇADO */
    margin-bottom: 20px !important;
    transition: all 0.3s ease !important;
}

.contact-page #contact-form textarea {
    height: 120px !important;
    resize: none !important; /* Impede que o usuário redimensione o textarea */
}

/* Estilo para o foco dos campos do formulário. */
.contact-page #contact-form input:focus,
.contact-page #contact-form textarea:focus {
    border-color: #0071f8 !important; /* Borda azul no foco, FORÇADO */
    outline: none !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 113, 248, 0.25) !important; /* Sombra de foco azul, FORÇADO */
}

/* Estilo para o placeholder dos campos do formulário. */
.contact-page #contact-form input::placeholder,
.contact-page #contact-form textarea::placeholder {
    color: #cccccc !important; /* Placeholder cinza claro, FORÇADO */
}

/* Estilo para o botão de envio do formulário. */
.contact-page #contact-form button {
    background-color: #0071f8 !important; /* Fundo azul vibrante para o botão, FORÇADO */
    color: #ffffff !important; /* Texto branco, FORÇADO */
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 12px 30px !important;
    border: none !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.contact-page #contact-form button:hover {
    background-color: #0056b3 !important; /* Tom de azul mais escuro no hover, FORÇADO */
}

/* ---------------------------------------------
 * Estilos para os Campos de Informação de Contato (Telefone e E-mail)
 * (SOLUÇÃO DEFINITIVA: Usando os seletores CORRETOS do seu HTML)
 * --------------------------------------------- */

/* Seletor CORRETO para o container dos itens de informação (Telefone, E-mail). */
/* No seu HTML, a classe é 'item', não 'info-item' para esses elementos. */
.contact-content .row > div.col-lg-6 > .item { /* Seletor ultra-específico para os cards de contato */
    background-color: #001a4d !important; /* Fundo azul escuro, FORÇADO com !important */
    border-radius: 10px !important;
    padding: 30px !important;
    margin-bottom: 30px !important;
    display: flex !important;
    align-items: center !important;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3) !important; /* Sombra para destacar */
    transition: all 0.3s ease !important;
}

.contact-content .row > div.col-lg-6 > .item:hover {
    transform: translateY(-5px) !important; /* Efeito de leve elevação no hover */
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.4) !important;
}

/* Estilo para a imagem (ícone) dentro dos itens de informação. */
.contact-content .row > div.col-lg-6 > .item img {
    max-width: 52px !important; /* Mantém o tamanho original da imagem */
    margin-right: 20px !important;
    filter: brightness(0) invert(1) !important; /* Inverte a cor da imagem para branco, FORÇADO */
}

/* Estilo para o texto dentro dos itens de informação. */
.contact-content .row > div.col-lg-6 > .item .text-content h6 { /* Seletor CORRETO para o h6 */
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #ffffff !important; /* Título branco, FORÇADO com !important */
    margin-bottom: 5px !important;
}

/* Estilo para o span (descrição) dentro do h6 dos itens de informação. */
.contact-content .row > div.col-lg-6 > .item .text-content h6 span { /* Seletor CORRETO para o span */
    font-size: 15px !important;
    color: #cccccc !important; /* Subtítulo/descrição cinza claro, FORÇADO com !important */
    font-weight: 400 !important;
}


/* ---------------------------------------------
 * Estilos Responsivos para a Seção de Contato
 * --------------------------------------------- */

@media (max-width: 992px) {
    .contact-page #map {
        height: 400px;
    }
    .contact-page #contact-form {
        padding: 30px;
    }
    .contact-content .row > div.col-lg-6 > .item { /* Usando o seletor correto */
        margin-bottom: 20px !important;
    }
}

@media (max-width: 767px) {
    .contact-page #map {
        height: 300px;
    }
    .contact-page #contact-form {
        padding: 20px;
    }
    .contact-content .row > div.col-lg-6 > .item img { /* Usando o seletor correto */
        max-width: 40px !important; /* Ajuste para telas menores */
        margin-right: 15px !important;
    }
    .contact-content .row > div.col-lg-6 > .item .text-content h6 { /* Usando o seletor correto */
        font-size: 16px !important;
    }
    .contact-content .row > div.col-lg-6 > .item .text-content h6 span { /* Usando o seletor correto */
        font-size: 13px !important;
    }
}



	/* ---------------------------------------------
	 * 11. Seção de Contato
	 * --------------------------------------------- */
	/* Estilo geral da seção de contato, com imagem de fundo e padding. */
	.contact {
	  background-image: url(../images/contact-bg.jpg);
	  background-repeat: no-repeat;
	  background-size: cover;
	  background-position: center center;
	  padding: 100px 0px 250px 0px;
	  position: relative;
	}

	/* Estilo para o título da seção de contato, com cor branca. */
	.contact .section-heading h2 {
	  color: #fff;
	}

	/* Ajuste da margem superior e z-index para o conteúdo da seção de contato. */
	.contact-content {
	  margin-top: -240px;
	  position: relative;
	  z-index: 1;
	}

	/* Estilo para o mapa na seção de contato. */
	.contact-content #map {
	  border-radius: 10px;
	  margin-bottom: 60px;
	}

	/* Define as colunas de contato como flex containers para alinhamento. */
	.contact-content .row > .col-lg-6 {
	  display: flex;
	  padding: 0 15px;
	}

	/* Estilo para os itens de contato (telefone, e-mail). */
	.contact-content .item {
	  border-radius: 10px;
	  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
	  padding: 25px 20px;
	  background-color: #fff;
	  display: flex;
	  align-items: center;
	  gap: 15px; /* Espaçamento entre o ícone e o texto */
	  height: 100%; /* Garante que a altura da caixa se ajuste ao conteúdo */
	  width: 100%; /* Garante que a caixa ocupe toda a largura da sua coluna */
	}

	/* Estilo para a imagem do ícone dentro do item de contato. */
	.contact-content .item img {
	  flex-shrink: 0; /* Garante que a imagem não encolha */
	  max-width: 45px; /* Tamanho do ícone */
	  height: auto; /* Mantém a proporção */
	  float: none; /* Desativa float */
	  vertical-align: middle; /* Alinhamento */
	  margin-right: 0; /* O 'gap' já cuida do espaçamento */
	}

	/* Container de texto dentro do item de contato, usando flexbox para organização. */
	.contact-content .item .text-content {
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  flex-grow: 1; /* Permite que o bloco de texto ocupe o espaço restante */
	  min-width: 0; /* Permite que o conteúdo encolha para caber no espaço */
	  word-break: break-word; /* Quebra em qualquer caractere para garantir que caiba */
	  overflow-wrap: break-word; /* Fallback e para quebrar em pontos mais "inteligentes" */
	  margin: 0;
	  padding: 0;
	}

	/* Estilo para o título (h6) dentro do item de contato. */
	.contact-content .item .text-content h6 {
	  font-size: 14px; /* Reduzido para 14px. Você pode tentar 13px ou 12px se ainda quebrar. */
	  font-weight: 600;
	  line-height: 1.2;
	  margin: 0;
	  padding: 0;
	  white-space: nowrap; /* Impede a quebra de linha */
	  overflow: hidden;    /* Esconde o texto que exceder a largura */
	  text-overflow: ellipsis; /* Adiciona "..." se o texto for cortado */
	  min-width: 0;
	}

	/* Estilo para o span (descrição) dentro do h6 do item de contato. */
	.contact-content .item .text-content h6 span {
	  font-size: 12px; /* Reduzi a fonte da descrição */
	  color: #aaaaaa;
	  font-weight: 400;
	  display: block;
	  line-height: 1.2;
	  margin: 0;
	  padding: 0;
	}

	/* Estilos para o formulário de contato. */
	.contact-content #contact-form {
	  margin-left: 30px;
	  border-radius: 10px;
	  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
	  padding: 35px 30px;
	  background-color: #fff;
	}

	/* Estilo para os rótulos dos campos do formulário. */
	.contact-content #contact-form label {
	  font-size: 15px;
	  color: #3a3a3a;
	  margin-bottom: 15px;
	}

	/* Estilo para os campos de input do formulário. */
	.contact-content #contact-form input {
	  width: 100%;
	  height: 44px;
	  border-radius: 22px;
	  background-color: #f6f6f6;
	  border: none;
	  margin-bottom: 30px;
	  font-size: 14px;
	  padding: 0px 15px;
	}

	/* Estilo para o campo de textarea do formulário. */
	.contact-content #contact-form textarea {
	  width: 100%;
	  height: 150px;
	  max-height: 180px;
	  border-radius: 22px;
	  background-color: #f6f6f6;
	  border: none;
	  margin-bottom: 40px;
	  font-size: 14px;
	  padding: 15px 15px;
	}

	/* Estilo para o botão de envio do formulário. */
	.contact-content #contact-form button {
	  background-color: #1e1e1e;
	  height: 44px;
	  border-radius: 22px;
	  padding: 0px 20px;
	  color: #fff;
	  border: none;
	  font-size: 15px;
	  font-weight: 500;
	  transition: all .5s;
	}

	/* Efeito de hover para o botão de envio do formulário. */
	.contact-content #contact-form button:hover {
	  background-color: #0071f8;
	}

	/* ---------------------------------------------
/* ---------------------------------------------
 * 12. Rodapé (Footer) - REVISADO (Margem Superior Reduzida)
 * --------------------------------------------- */
/* Rodapé sem margem superior, usado em contextos específicos. */
footer.footer-no-gap {
    margin-top: 0px !important; /* Garante que não haja margem superior */
}
/* Estilo geral do rodapé, com fundo escuro e centralização de conteúdo. */
footer {
    margin-top: 40px !important; /* AJUSTE CRÍTICO AQUI: Reduzi a margem superior para 40px */
                                /* Isso deve diminuir o espaço entre a seção de contato e o rodapé. */
                                /* Ajuste este valor (ex: 20px para menos, 60px para mais) se precisar. */
    background-color: #1e1e1e;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 15px 0;
}
/* Estilo para o container interno do rodapé. */
footer .container {
    width: 100%;
    max-width: 1140px;
    padding: 0 15px;
}
/* Estilo para o parágrafo de texto no rodapé. */
footer p {
    text-align: center;
    line-height: 100px;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
}
/* Estilo para a coluna do rodapé, usando flexbox para centralizar. */
footer .col-lg-8 {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
/* Estilo para os links no rodapé. */
footer p a {
    color: #fff;
    transition: all .3s;
    position: relative;
    z-index: 3;
}
/* Efeito de hover para os links no rodapé. */
footer p a:hover {
    opacity: 0.75;
}
/* Estilo para o botão de privacidade no rodapé. */
.privacy-button {
    display: inline-block;
    background-color: #0071f8;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    height: 40px;
    line-height: 40px;
    padding: 0px 20px;
    border-radius: 20px;
    transition: all .3s;
    margin-left: 15px;
    white-space: nowrap; /* Impede quebra de linha no texto do botão */
}
/* Efeito de hover para o botão de privacidade. */
.privacy-button:hover {
    background-color: #1e1e1e;
    color: #fff;
}

 * --------------------------------------------- */
/* Rodapé sem margem superior, usado em contextos específicos. */
footer.footer-no-gap {
    margin-top: 0px !important; /* Garante que não haja margem superior */
}
/* Estilo geral do rodapé, com fundo escuro e centralização de conteúdo. */
footer {
    margin-top: 40px !important; /* AJUSTE CRÍTICO AQUI: Reduzi a margem superior para 40px */
                                /* Isso deve diminuir o espaço entre a seção de contato e o rodapé. */
                                /* Ajuste este valor (ex: 20px para menos, 60px para mais) se precisar. */
    background-color: #1e1e1e;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 15px 0;
}
/* Estilo para o container interno do rodapé. */
footer .container {
    width: 100%;
    max-width: 1140px;
    padding: 0 15px;
}
/* Estilo para o parágrafo de texto no rodapé. */
footer p {
    text-align: center;
    line-height: 100px;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
}
/* Estilo para a coluna do rodapé, usando flexbox para centralizar. */
footer .col-lg-8 {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
/* Estilo para os links no rodapé. */
footer p a {
    color: #fff;
    transition: all .3s;
    position: relative;
    z-index: 3;
}
/* Efeito de hover para os links no rodapé. */
footer p a:hover {
    opacity: 0.75;
}
/* Estilo para o botão de privacidade no rodapé. */
.privacy-button {
    display: inline-block;
    background-color: #0071f8;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    height: 40px;
    line-height: 40px;
    padding: 0px 20px;
    border-radius: 20px;
    transition: all .3s;
    margin-left: 15px;
    white-space: nowrap; /* Impede quebra de linha no texto do botão */
}
/* Efeito de hover para o botão de privacidade. */
.privacy-button:hover {
    background-color: #1e1e1e;
    color: #fff;
}

/* ---------------------------------------------
 * 13. Estilo do Cabeçalho da Página (Page Header) - REVISADO E CONSOLIDADO
 * --------------------------------------------- */
.page-heading {
  background-image: url(../images/page-heading-bg.jpg); /* Imagem padrão */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 80px 0px;
  text-align: center;
  position: relative;
  overflow: hidden;
  z-index: 1;
  height: 250px;
}


/* Overlay escuro para todos os banners de página para melhor contraste do texto */
.page-heading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Overlay preto semi-transparente */
    z-index: 2;
}

.page-heading .container {
    position: relative;
    z-index: 3; /* Garante que o conteúdo do banner fique acima do overlay */
    height: 100%; /* Garante que o container ocupe a altura do banner */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centraliza o conteúdo verticalmente */
    align-items: center; /* Centraliza o conteúdo horizontalmente */
}

/* Estilo para o span (breadcrumb) em banners de página */
.page-heading span {
    background-color: transparent !important; /* REMOVE O FUNDO BRANCO */
    border: none !important; /* REMOVE A BORDA BRANCA */
    padding: 0 !important; /* REMOVE O PADDING QUE CRIAVA O RETÂNGULO */
    color: #cccccc !important; /* Cor do texto */
    font-size: 18px !important;
    font-weight: 400 !important;
    margin-bottom: 10px !important;
    display: block !important;
    line-height: 1.2 !important;
}

/* Estilo para o link dentro do span (breadcrumb) */
.page-heading span a {
    color: #cccccc !important;
    text-decoration: none !important;
}

/* Estilo para o título principal (h3) do cabeçalho da página */
.page-heading h3 {
    font-size: 48px !important;
    font-weight: 700 !important; /* Ajustado para 700 para consistência */
    text-transform: uppercase !important;
    color: #fff !important;
    margin-bottom: 0 !important;
    line-height: 1.2 !important;
}

/* --- Estilo ESPECÍFICO para o Banner da Página de Contato --- */
.page-heading.contato-heading {
    /* VERIFIQUE ESTE CAMINHO! */
    /* Se o CSS está em 'assets/css/', então '../images/contato.PNG' é o caminho correto para 'assets/images/contato.PNG'. */
    /* Se a imagem ainda não aparecer, tente 'url('/assets/images/contato.PNG')' (caminho absoluto da raiz do site). */
    background-image: url('../images/contato.PNG') !important; /* Substitua pelo nome da sua imagem */
    background-position: center center !important; /* Garante que a imagem de contato seja centralizada */
}

/* --- Estilo Individual para o cabeçalho da página de Produtos. --- */
.page-heading.produtos-heading {
    background-image: url(../images/produtos.PNG) !important; /* <-- Mude 'sua-nova-imagem-produtos.jpg' para o nome do seu arquivo! */
    background-position: center center !important;
}

	/* ---------------------------------------------
 * 14. Estilo da Página de Propriedade Única (Single Property) - REVISADO (Acordeão Escuro)
 * --------------------------------------------- */
/* Remove o float da imagem principal da propriedade. */
.single-property .main-image img {
    float: none;
}
/* Estilo para o título principal (h4) do conteúdo da propriedade. */
.single-property .main-content h4 {
    font-size: 25px;
    margin-top: 25px;
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid #eee;
    color: #ffffff !important; /* Garante que o título seja branco */
}
/* Estilo para a categoria da propriedade na página de detalhes. */
.single-property .main-content span.category {
    background-color: #0071f8 !important; /* Tom de azul vibrante */
    font-weight: 500;
    border-radius: 5px;
    font-size: 14px;
    color: #ffffff !important; /* Texto branco */
    padding: 5px 12px;
    display: inline-block;
    margin-top: 40px;
}
/* Estilos para o componente de acordeão na página de propriedade única. */
.single-property .accordion {
    margin-top: 60px !important; /* Ajustado para 60px */
    margin-left: 0px !important;
    margin-right: 0px !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3) !important;
    overflow: hidden !important;
    background-color: #001a4d !important; /* Fundo azul escuro para o container principal */
}
/* Estilo para cada item do acordeão */
.single-property .accordion-item {
    background-color: #001a4d !important; /* Fundo azul escuro para cada item do acordeão */
    color: #ffffff !important; /* Texto branco para cada item */
    border: 1px solid rgba(255, 255, 255, 0.1) !important; /* Borda suave e clara entre os itens */
    margin-bottom: 0 !important;
}
/* Remove a borda inferior do último item para um visual mais limpo */
.single-property .accordion-item:last-of-type {
    border-bottom: none !important;
}
/* Estilo para o cabeçalho de cada item do acordeão */
.single-property .accordion-header {
    border-bottom: none !important; /* Remove borda conflitante */
    background-color: #001a4d !important; /* Fundo azul escuro para o cabeçalho */
}
/* Estilos para o botão de cada item do acordeão. */
.single-property .accordion-button {
    box-shadow: none !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    color: #ffffff !important; /* Texto branco */
    background-color: #001a4d !important; /* Fundo azul escuro */
    padding: 1rem 1.25rem !important; /* Espaçamento interno */
    border-radius: 0 !important; /* Remove arredondamento do botão */
    outline: none !important; /* Remove outline de foco */
}
/* Estilo do botão do acordeão quando não está colapsado (aberto). */
.single-property .accordion-button:not(.collapsed) {
    color: #0071f8 !important; /* Cor azul vibrante */
    background-color: #002a6d !important; /* Fundo azul escuro um pouco mais claro */
    box-shadow: 0 0 0 0.25rem rgba(0, 113, 248, 0.25) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; /* Borda inferior para o item ativo */
}
/* Remove o ícone padrão do botão do acordeão e adiciona o nosso */
.single-property .accordion-button::after {
    filter: brightness(0) invert(1) !important; /* Ícone branco quando inativo */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    display: block !important; /* Garante que o ícone seja visível */
}
.single-property .accordion-button:not(.collapsed)::after {
    filter: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230071f8'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}
/* Remove a borda inferior do terceiro cabeçalho do acordeão. */
.single-property #headingThree {
    border-bottom: none !important;
}
/* Adiciona uma borda superior ao conteúdo do último item do acordeão. */
.single-property .accordion-item:last-of-type .accordion-collapse {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important; /* Borda clara */
}
/* Estilo para o corpo do acordeão (conteúdo). */
.single-property .accordion-body {
    color: #cccccc !important; /* Cor do texto do corpo do acordeão (cinza claro para contraste) */
    background-color: #001a4d !important; /* Fundo do corpo do acordeão (azul escuro) */
    border-bottom-left-radius: var(--bs-accordion-inner-border-radius);
    border-bottom-right-radius: var(--bs-accordion-inner-border-radius);
}
/* Estilos para a tabela de informações na página de propriedade única. */
.single-property .info-table {
    border-radius: 10px !important;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3) !important;
    padding: 35px 30px !important;
    margin-left: 0 !important; /* Removido margem conflitante */
    background-color: #001a4d !important; /* Fundo azul escuro */
}
/* Estilos para cada item da lista na tabela de informações. */
.single-property .info-table ul li {
    display: block !important;
    margin-bottom: 35px !important;
    padding-bottom: 35px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; /* Borda clara */
    color: #ffffff !important; /* Texto branco */
}
/* Remove a borda inferior e padding do último item da lista na tabela. */
.single-property .info-table ul li:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
/* Estilo para a imagem dentro de cada item da tabela de informações. */
.single-property .info-table ul li img {
    float: left !important;
    margin-right: 25px !important;
    filter: brightness(0) invert(1) !important; /* Inverte a cor da imagem para branco */
}
/* Estilo para o título (h4) dentro de cada item da tabela de informações. */
.single-property .info-table ul li h4 {
    font-size: 22px !important;
    font-weight: 600 !important;
    color: #ffffff !important; /* Título h4 branco */
}
/* Estilo para o span (descrição) dentro do título da tabela de informações. */
.single-property .info-table ul li h4 span {
    font-size: 15px !important;
    color: #cccccc !important; /* Descrição span cinza claro */
    font-weight: 400 !important;
}

 /* ---------------------------------------------
/* ---------------------------------------------
 * 15. Estilo da Página de Contato (Contact Page) - REVISADO E CONSOLIDADO (Espaço Inferior Reduzido)
 * --------------------------------------------- */

/* Estilo para a seção principal de contato para garantir um fundo consistente e espaçamento */
.contact-page.section {
    background-color: #001a4d !important; /* Fundo azul escuro para toda a seção de contato */
    padding-top: 40px !important; /* Mantido o padding superior */
    padding-bottom: 40px !important; /* AJUSTE CRÍTICO AQUI: Reduzi o padding inferior para 40px */
                                    /* Se precisar de mais ou menos espaço entre esta seção e o rodapé, ajuste este valor. */
    margin-top: 0 !important; /* Garante que não haja margem superior empurrando */
}

/* Estilos para o cabeçalho da seção de contato (Fale Conosco / Estamos prontos...) */
.contact-page .section-heading {
    margin-bottom: 40px !important; /* Ajustado para 40px */
    margin-right: 0 !important; /* Removido margem direita conflitante */
}

.contact-page .section-heading h6 {
    color: #cccccc !important; /* Subtítulo cinza claro */
    font-size: 16px !important;
    font-weight: 500 !important;
    margin-bottom: 10px !important;
}

.contact-page .section-heading h2 {
    color: #ffffff !important; /* Título principal branco */
    font-size: 36px !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
}

.contact-page p {
    color: #cccccc !important; /* Parágrafo de descrição cinza claro */
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin-bottom: 30px !important;
}

/* Estilo para os cards de contato (telefone e e-mail) */
.contact-page .item {
    background-color: #001a4d !important; /* Fundo azul escuro para os cards */
    border-radius: 10px !important; /* Bordas arredondadas */
    padding: 30px !important; /* Espaçamento interno */
    margin-bottom: 30px !important; /* Espaço entre os cards e com o formulário/mapa */
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3) !important; /* Sombra para destaque */
    display: flex !important; /* Para alinhar ícone e texto */
    align-items: center !important; /* Centraliza verticalmente o conteúdo */
    width: 100% !important; /* Garante que ocupe a largura total da coluna */
    min-width: auto !important; /* Remove min-width conflitante */
}

/* Estilo para as imagens de ícone dentro dos cards */
.contact-page .item img {
    max-width: 60px !important; /* Ajusta o tamanho do ícone */
    margin-right: 20px !important; /* Espaço entre o ícone e o texto */
    filter: brightness(0) invert(1) !important; /* Garante que os ícones sejam brancos */
    float: none !important; /* Remove float conflitante */
    vertical-align: middle !important; /* Alinhamento */
}

/* Estilo para o texto dentro dos cards (telefone e e-mail) */
.contact-page .item h6 {
    color: #ffffff !important; /* Texto principal branco */
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-bottom: 5px !important;
    vertical-align: middle !important; /* Alinhamento */
}

.contact-page .item h6 span {
    color: #cccccc !important; /* Texto secundário (descrição) cinza claro */
    font-size: 14px !important;
    font-weight: 400 !important;
    display: block !important; /* Garante que o span ocupe sua própria linha */
}

/* Estilos para o formulário de contato */
.contact-page #contact-form {
    background-color: #001a4d !important; /* Fundo azul escuro para o formulário */
    border-radius: 10px !important; /* Bordas arredondadas */
    padding: 40px !important; /* Espaçamento interno do formulário */
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3) !important; /* Sombra para destaque */
    margin-bottom: 30px !important; /* Espaço entre o formulário e o mapa */
    margin-left: 0 !important; /* Remove margem esquerda conflitante */
}

/* Estilo para os labels dos campos do formulário */
.contact-page #contact-form label {
    color: #ffffff !important; /* Labels brancos */
    font-size: 15px !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
    display: block !important; /* Garante que o label ocupe sua própria linha */
}

/* Estilo para os campos de input (Nome, E-mail, Assunto) */
.contact-page #contact-form input[type="name"],
.contact-page #contact-form input[type="text"],
.contact-page #contact-form input[type="subject"] {
    width: 100% !important;
    height: 50px !important;
    border-radius: 5px !important;
    background-color: #002b66 !important; /* Fundo dos campos um pouco mais claro que o fundo da seção */
    border: 1px solid #003a80 !important; /* Borda sutil */
    padding: 0px 15px !important;
    font-size: 15px !important;
    color: #ffffff !important; /* Texto digitado branco */
    margin-bottom: 20px !important;
    outline: none !important; /* Remove o contorno padrão ao focar */
}

/* Estilo para o placeholder dos campos de input */
.contact-page #contact-form input::placeholder,
.contact-page #contact-form textarea::placeholder {
    color: #cccccc !important; /* Placeholder cinza claro */
    opacity: 1 !important; /* Garante que o placeholder seja visível */
}

/* Estilo para a área de texto (Mensagem) */
.contact-page #contact-form textarea {
    width: 100% !important;
    height: 120px !important;
    border-radius: 5px !important;
    background-color: #002b66 !important; /* Fundo da área de texto */
    border: 1px solid #003a80 !important; /* Borda sutil */
    padding: 15px !important;
    font-size: 15px !important;
    color: #ffffff !important; /* Texto digitado branco */
    margin-bottom: 20px !important;
    outline: none !important; /* Remove o contorno padrão ao focar */
    resize: vertical !important; /* Permite redimensionar verticalmente */
}

/* Estilo para o botão de enviar mensagem */
.contact-page #contact-form .orange-button {
    background-color: #0071f8 !important; /* Cor laranja/azul vibrante para o botão */
    color: #ffffff !important; /* Texto do botão branco */
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 12px 25px !important;
    border-radius: 5px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.contact-page #contact-form .orange-button:hover {
    background-color: #0056b3 !important; /* Um tom de azul mais escuro no hover */
}

/* Estilo para o mapa do Google Maps */
.contact-page #map {
    margin-top: 30px !important; /* Espaço entre o formulário/cards e o mapa */
    width: 100% !important; /* Garante que ocupe a largura total */
    height: 500px !important; /* Altura fixa para o mapa */
    margin-bottom: 0 !important; /* Remove margem inferior conflitante */
}

.contact-page #map iframe {
    border-radius: 10px !important; /* Garante bordas arredondadas para o iframe do mapa */
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3) !important; /* Sombra para o mapa */
}

	 * 16. Estilos Responsivos
	 * --------------------------------------------- */
	/* Esconde o overflow horizontal para evitar barras de rolagem indesejadas em telas pequenas. */
	body {
	  overflow-x: hidden;
	}

	/* Estilos aplicados para telas com largura máxima de 767px (dispositivos móveis). */
	@media (max-width: 767px) {
	  /* Ajuste da altura da linha do título do logo em mobile. */
	  .header-area .main-nav .logo h1 {
		line-height: 80px !important;
	  }
	  /* Ajustes para os links das abas na seção "Melhor Oferta" em mobile. */
	  .best-deal .tabs-content .nav-link {
		font-size: 14px;
		padding: 0px 15px;
		height: 44px;
		line-height: 44px;
		min-width: 150px;
		width: 100%; /* Ocupa 100% da largura em telas pequenas */
		margin-bottom: 10px; /* Espaçamento entre os botões */
	  }
	  /* Ajustes para os itens da lista de abas em mobile. */
	  .best-deal .tabs-content ul.nav-tabs li {
		margin: 5px 0px; /* Ajusta margem para empilhamento */
		width: 100%; /* Faz com que cada item da lista ocupe 100% da largura em mobile */
	  }
	  /* Ajustes para os links do filtro de propriedades em mobile. */
	  .properties ul.properties-filter li a {
		font-size: 14px;
		padding: 10px 15px;
	  }
	  /* Ajustes para os itens do filtro de propriedades em mobile. */
	  .properties ul.properties-filter li {
		margin: 5px;
	  }
	  /* Esconde o último item de navegação (geralmente um botão) em mobile. */
	  .header-area .main-nav .nav li:last-child {
		display: none;
	  }
	  /* Empilha os itens do rodapé em mobile. */
	  footer .col-lg-8 {
		flex-direction: column;
	  }
	  /* Ajustes de padding e margem para o parágrafo do rodapé em mobile. */
	  footer p {
		padding-right: 0;
		margin-bottom: 10px;
	  }
	  /* Ajustes de margem para o botão de privacidade em mobile. */
	  .privacy-button {
		margin-left: 0;
		margin-top: 10px;
	  }
	}

	/* Estilos aplicados para telas com largura máxima de 992px (tablets e dispositivos móveis). */
	@media (max-width: 992px) {
	  /* Esconde o sub-cabeçalho em telas menores. */
	  .sub-header {
		display: none;
	  }
	  /* Ajustes da altura da linha do título do logo. */
	  .header-area .main-nav .logo h1 {
		line-height: 100px;
	  }
	  .background-header .main-nav .logo h1 {
		line-height: 80px;
	  }
	  /* Ajustes de padding para os links da navegação. */
	  .header-area .main-nav .nav li a {
		padding-left: 3px;
		padding-right: 3px;
	  }
	  .header-area .main-nav .nav li:last-child a {
		padding-right: 15px;
	  }
	  /* O título do banner principal ocupa 100% da largura em telas menores. */
	  .main-banner .item h2 {
		width: 100%;
	  }
	  /* Ajustes de margem para o cabeçalho da seção de destaques. */
	  .featured .section-heading {
		margin-left: 0px;
		margin-right: 0px;
		margin-top: 100px;
	  }
	  /* Ajustes de margem para o acordeão na seção de destaques. */
	  .featured .accordion {
		margin-left: 0px;
		margin-right: 0px;
	  }
	  /* Margem superior para a tabela de informações na seção de destaques. */
	  .featured .info-table {
		margin-top: 45px;
	  }
	  /* Margem inferior para os contadores de fatos curiosos. */
	  .fun-facts .counter {
		margin-bottom: 45px;
	  }
	  /* Centraliza o cabeçalho da seção "Melhor Oferta". */
	  .best-deal .section-heading {
		text-align: center;
	  }
	  /* Ajustes para a lista de abas na seção "Melhor Oferta" em telas menores. */
	  .best-deal .tabs-content ul.nav-tabs {
		margin-top: 0px;
		justify-content: center;
		display: flex;
		flex-wrap: wrap;
	  }
	  /* Margem inferior para a tabela de informações na seção "Melhor Oferta". */
	  .best-deal .info-table {
		margin-bottom: 45px;
	  }
	  /* Remove padding da imagem no conteúdo da aba. */
	  .best-deal .tab-content img {
		padding: 0px;
	  }
	  /* Margem superior para o título do conteúdo da aba. */
	  .best-deal .tabs-content h4 {
		margin-top: 45px;
	  }
	  /* Centraliza o preço e o botão na listagem de propriedades. */
	  .properties .item h6 {
		text-align: center;
		margin-bottom: 15px;
	  }
	  .properties .item .main-button {
		text-align: center;
	  }
	  /* Ajustes de margem e tamanho de fonte para os detalhes da propriedade. */
	  .properties .item ul li {
		margin-right: 10px;
		font-size: 13px;
	  }
	  /* Ajustes de margem para os itens de contato. */
	  .contact-content .phone {
		margin-right: 0px;
		margin-bottom: 20px;
	  }
	  .contact-content .email {
		margin-left: 0px;
		margin-bottom: 45px;
	  }
	  /* Remove a margem esquerda do formulário de contato. */
	  .contact-content #contact-form {
		margin-left: 0px;
	  }
	  /* Remove a margem esquerda e adiciona margem superior para a tabela de informações na página de propriedade única. */
	  .single-property .info-table {
		margin-left: 0px;
		margin-top: 45px;
	  }
	  /* Remove a margem direita do cabeçalho da seção na página de contato. */
	  .contact-page .section-heading {
		margin-right: 0px !important;
	  }
	  /* Remove a margem esquerda e adiciona margem superior para o formulário de contato na página de contato. */
	  .contact-page #contact-form {
		margin-left: 0px;
		margin-top: 60px;
	  }
	  /* Ajusta o float e largura do span na tabela de informações da melhor oferta. */
	  .best-deal .info-table ul li span {
		float: right !important;
		width: auto !important;
	  }
	  /* Ajustes para o layout das colunas de contato em telas menores (empilhamento). */
	  .contact-content .row > .col-lg-6 {
		width: 100%;
		max-width: 100%;
		padding: 0 15px;
		margin-bottom: 20px; /* Espaçamento entre as caixas quando empilhadas */
	  }
	  .contact-content .row > .col-lg-6:last-child {
		margin-bottom: 0; /* Remove a margem inferior do último item empilhado */
	  }
	}

	/*
	 * Ajustes específicos para o subtítulo "Análise Inteligente"
	 * dentro da seção de cabeçalho centralizada.
	 */
	.section-heading.text-center h6 {
	  font-size: 60px; /* Aumentado para 60px. Ajuste este valor se precisar de mais ou menos. */
	  color: #ffffff; /* Mantém a cor do texto em branco */
	}

	/* Estilos aplicados para telas com largura máxima de 1200px (desktops menores e tablets grandes). */
	@media (max-width: 1200px) {
	  /* Ajusta o float e largura do span na tabela de informações da melhor oferta. */
	  .best-deal .info-table ul li span {
		float: none;
		width: 100%;
	  }
	  /* Ajusta a margem direita do cabeçalho da seção na página de contato. */
	  .contact-page .section-heading {
		margin-right: 100px;
	  }
	  /* Ajustes para o layout das colunas de contato em telas maiores (desktop). */
	  .contact-content .row > .col-lg-6:first-child {
		padding-right: 7.5px; /* Metade do espaçamento entre as caixas */
	  }
	  .contact-content .row > .col-lg-6:last-child {
		padding-left: 7.5px; /* Metade do espaçamento entre as caixas */
	  }
	  /* Remove as margens laterais dos itens internos, pois o padding das colunas já gerencia. */
	  .contact-content .phone,
	  .contact-content .email {
		margin-right: 0;
		margin-left: 0;
		margin-bottom: 0; /* Remove margem inferior se estiverem lado a lado */
	  }
	}

	/* Estilo individual para o cabeçalho da página de Produtos. */
	.produtos-heading {
	  background-image: url(../images/produtos.PNG); /* <-- Mude 'sua-nova-imagem-produtos.jpg' para o nome do seu arquivo! */
	  /* Você pode manter ou ajustar as outras propriedades se quiser que sejam diferentes do padrão */
	  /* background-position: center center; */
	  /* background-repeat: no-repeat; */
	  /* background-size: cover; */
	  /* padding: 120px 0px; */
	}

	/* --- Estilo Individual para o Banner da Página de Contato --- */
	.page-heading.contato-heading {
	  background-image: url(../images/contato.PNG) !important; /* Substitua pelo nome da sua imagem */
	  /* As propriedades abaixo são opcionais, mas garantem que a imagem se comporte como as outras */
	  background-position: center bottom !important;
	  background-repeat: no-repeat !important;
	  background-size: cover !important;
	}

	/* Gradiente horizontal para o fundo do site */
	body {
	  background: linear-gradient(to right, 
		#000000,    /* Preto no lado esquerdo */
		#000033,    /* Azul muito escuro no centro */
		#0066cc     /* Azul médio no lado direito */
	  ) !important;
	  background-attachment: fixed;
	}

	/* Cabeçalho com gradiente horizontal */
	.header-area, 
	.background-header, 
	.sub-header {
	  background: linear-gradient(to right, 
		#000000,    /* Preto */
		#001a4d     /* Azul escuro */
	  ) !important;
	  border-bottom: none !important;
	}

	/* Rodapé com gradiente horizontal */
	footer {
	  background: linear-gradient(to right, 
		#000000,    /* Preto */
		#001a4d     /* Azul escuro */
	  ) !important;
	}

	/* Ajustes de texto para contraste */
	.header-area .main-nav .nav li a,
	.sub-header ul.info li,
	footer p {
	  color: #ffffff !important;
	}

	/* Botões com contraste */
	.icon-button a,
	.main-button a {
	  background-color: #003366 !important;
	  color: #ffffff !important;
	}
/* ---------------------------------------------
 * Ajuste para a seção dos botões (ou a seção anterior ao vídeo)
 * --------------------------------------------- */
/* Assumindo que a seção com os botões seja a '.featured.section' ou similar.
   Se for outra classe, por favor, me diga qual é para ajustarmos. */
.featured.section {
    /* Adiciona um padding inferior para criar espaço abaixo dos botões */
    padding-bottom: 120px !important; /* Aumentei o padding inferior para 120px.
                                         Ajuste este valor (ex: 100px, 150px) para controlar o espaço
                                         entre os botões e a seção do vídeo. */
    margin-bottom: 0 !important; /* Garante que não haja margem empurrando para baixo */
}
/* ---------------------------------------------
 * Ajustes para os Botões de Carga (nav-tabs) - REVISADO
 * --------------------------------------------- */

.best-deal .tabs-content ul.nav-tabs {
    justify-content: center;
    margin-top: 40px;
    margin-bottom: 30px;
    position: relative;
    z-index: 10;
    flex-wrap: nowrap;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    background-color: transparent;
    border-radius: 30px;
    padding: 5px;
    /* Adicione um gap aqui se o seu Bootstrap/framework permitir,
       ou use margin-left/right nos li para espaçamento */
}

.best-deal .tabs-content ul.nav-tabs li {
    margin: 0 10px; /* AUMENTADO: Espaçamento entre os itens da aba para 10px.
                           Ajuste este valor (ex: 15px) se precisar de mais ou menos espaço. */
}

.best-deal .tabs-content .nav-link {
    background-color: #1e1e1e; /* DEFINIDO: Fundo PRETO para os botões inativos */
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    height: 50px;
    line-height: 50px;
    padding: 0px 30px;
    border-radius: 25px;
    border: none;
    transition: all .3s;
    min-width: 150px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Adiciona uma sombra sutil para destacar */
}

.best-deal .tabs-content .nav-link.active {
    background-color: #0071f8; /* DEFINIDO: Fundo AZUL para o botão ativo */
    color: #fff;
    box-shadow: 0 4px 8px rgba(0, 113, 248, 0.3);
}

.best-deal .tabs-content .nav-link:hover:not(.active) {
    background-color: #333333; /* Um tom de cinza escuro no hover para botões não ativos */
    color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* ---------------------------------------------
 * Estilos Responsivos para os botões de carga (nav-tabs) - REVISADO
 * --------------------------------------------- */
@media (max-width: 992px) {
    .best-deal .tabs-content ul.nav-tabs li {
        margin: 5px 0; /* Ajusta a margem para empilhamento em mobile */
    }
}
/* ---------------------------------------------
 * AJUSTES GLOBAIS DE COR DE TEXTO PARA BRANCO
 * (Adicione estas regras no final do seu arquivo CSS ou na seção '02. Estilos Globais'
 *  para garantir que elas sobrescrevam as cores padrão)
 * --------------------------------------------- */

/* Define a cor branca para todos os títulos (h1 a h6) */
h1, h2, h3, h4, h5, h6 {
    color: #ffffff !important; /* Força a cor branca para todos os títulos */
}

/* Define a cor branca para todos os parágrafos */
p {
    color: #ffffff !important; /* Força a cor branca para todos os parágrafos */
}

/* Define a cor branca para links em geral, a menos que tenham uma cor específica definida depois */
a {
    color: #ffffff !important; /* Força a cor branca para todos os links */
}

/* Ajustes específicos para links dentro de listas (como menus de navegação) */
.header-area .main-nav .nav li a {
    color: #ffffff !important; /* Garante que os links do menu principal sejam brancos */
}

/* Ajustes para os itens de informação no sub-cabeçalho (se ele estiver visível) */
.sub-header ul.info li {
    color: #ffffff !important; /* Garante que o texto de informação no sub-cabeçalho seja branco */
}

/* Se houver outros elementos de texto que não sejam h1-h6, p ou a,
   e que ainda apareçam escuros, você pode adicioná-los aqui.
   Por exemplo, se houver spans ou divs com texto: */
span, div {
    /* Esta regra é muito genérica e pode afetar o layout.
       Use com cautela e apenas se necessário para elementos específicos.
       É melhor adicionar classes específicas seletivamente. */
    /* color: #ffffff !important; */
}

/* Você já tem esta regra, mas é bom mantê-la para garantir que os textos
   do cabeçalho, sub-cabeçalho e rodapé permaneçam brancos. */
.header-area .main-nav .nav li a,
.sub-header ul.info li,
footer p {
    color: #ffffff !important;
}

/* Ajuste para o texto em ênfase (destaque) dentro do título principal da seção.
   Se você quiser que o 'em' continue azul, mantenha esta regra.
   Se quiser que ele também seja branco, remova-a ou mude para #ffffff. */
.section-heading h2 em {
    font-style: normal;
    color: #0071f8 !important; /* Mantém o destaque azul, se desejado */
}

/* Se o texto "STYLE LOG PARA VOCÊ" for um h6 dentro de .section-heading.text-center,
   ele já está branco por esta regra, então não precisa de mais nada para ele. */
.section-heading.text-center h6 {
    font-size: 60px;
    color: #ffffff !important; /* Garante que este h6 específico seja branco */
}

/* Se houver algum texto dentro de .contact-page #contact-form label que precisa ser branco */
.contact-page #contact-form label {
    color: #ffffff !important; /* Garante que os rótulos do formulário de contato sejam brancos */
}

/* Para o texto dentro dos botões, você já tem regras que os deixam brancos: */
.icon-button a,
.main-button a {
    background-color: #003366 !important;
    color: #ffffff !important; /* Já está branco */
}
.best-deal .tabs-content .nav-link {
    background-color: #1e1e1e;
    color: #fff; /* Já está branco */
}
.best-deal .tabs-content .nav-link.active {
    background-color: #0071f8;
    color: #fff; /* Já está branco */
}
/* ---------------------------------------------
 * Ajuste de Espaçamento para a Seção Best Deal (Após o Vídeo)
 * --------------------------------------------- */
.section.best-deal {
    padding-top: 50px !important; /* AJUSTE CRÍTICO AQUI: Reduzi o padding superior para 50px */
                                 /* O valor padrão pode ser 100px ou mais. */
                                 /* Ajuste este valor (ex: 30px para menos, 70px para mais) */
                                 /* para controlar a distância entre o vídeo e os botões. */
    margin-top: 0 !important; /* Garante que não haja margem superior empurrando */
}
/* ---------------------------------------------
 * Estilos para o Acordeão na Página "Quem Somos" (single-property section) - SOLUÇÃO DEFINITIVA
 * --------------------------------------------- */

/* Estilo para o container principal do acordeão */
.single-property .accordion#accordionExample {
    margin-top: 30px !important; /* Um pouco de espaço acima do acordeão */
    border: none !important; /* Garante que não haja bordas indesejadas no container geral */
    border-radius: 10px !important; /* Arredonda as bordas do container do acordeão */
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3) !important; /* Sombra para destaque */
    overflow: hidden !important; /* Garante que o arredondamento das bordas seja aplicado corretamente */
    background-color: #001a4d !important; /* Fundo azul escuro para o container principal */
}

/* Estilo para cada item do acordeão */
.single-property .accordion-item {
    background-color: #001a4d !important; /* Fundo azul escuro para cada item do acordeão */
    color: #ffffff !important; /* Texto branco para cada item */
    border: 1px solid rgba(255, 255, 255, 0.1) !important; /* Borda suave e clara entre os itens */
    margin-bottom: 0 !important; /* Garante que não haja margem entre os itens */
}

/* Remove a borda inferior do último item para um visual mais limpo */
.single-property .accordion-item:last-of-type {
    border-bottom: none !important;
}

/* Estilo para o cabeçalho de cada item do acordeão */
.single-property .accordion-header {
    background-color: #001a4d !important; /* Fundo azul escuro para o cabeçalho */
    border: none !important; /* Remove bordas do cabeçalho */
}

/* Estilo para o botão (título) de cada item do acordeão */
.single-property .accordion-button {
    background-color: #001a4d !important; /* Fundo azul escuro para o botão (título) */
    color: #ffffff !important; /* Texto branco para o botão (título) */
    font-weight: 600 !important; /* Deixa o título do acordeão mais forte */
    border-radius: 0 !important; /* Remove arredondamento do botão para que o item controle */
    padding: 1rem 1.25rem !important; /* Espaçamento interno */
    box-shadow: none !important; /* Remove sombra de foco padrão */
    outline: none !important; /* Remove outline de foco */
}

/* Estilo para o botão do acordeão quando não está colapsado (ativo/aberto) */
.single-property .accordion-button:not(.collapsed) {
    background-color: #002a6d !important; /* Um tom de azul escuro um pouco mais claro para o estado ativo */
    color: #0071f8 !important; /* Cor azul vibrante para o texto ativo */
    box-shadow: 0 0 0 0.25rem rgba(0, 113, 248, 0.25) !important; /* Sombra de foco azul */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; /* Borda inferior para o item ativo */
}

/* Estilo para o corpo do acordeão (conteúdo) */
.single-property .accordion-body {
    background-color: #001a4d !important; /* Fundo azul escuro para o corpo do conteúdo */
    color: #cccccc !important; /* Cor do texto do corpo do acordeão (cinza claro para contraste) */
    padding: 1rem 1.25rem !important; /* Espaçamento interno */
    border-top: none !important; /* Remove borda superior do corpo */
}

/* Ajuste para os ícones de seta do acordeão */
.single-property .accordion-button::after {
    filter: brightness(0) invert(1) !important; /* Ícone branco quando inativo */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

.single-property .accordion-button:not(.collapsed)::after {
    filter: none !important; /* Remove o filtro para que o ícone ativo use sua cor original (azul) */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230071f8'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}
    /* Estilo para o botão flutuante do WhatsApp */
    .whatsapp-float {
        position: fixed; /* Fixa o botão na tela */
        width: 60px; /* Largura do botão */
        height: 60px; /* Altura do botão */
        bottom: 40px; /* Distância do fundo da tela */
        right: 40px; /* Distância da direita da tela */
        background-color: #25d366; /* Cor verde do WhatsApp */
        color: #FFF; /* Cor do ícone */
        border-radius: 50px; /* Transforma em círculo */
        text-align: center; /* Centraliza o ícone */
        font-size: 30px; /* Tamanho do ícone */
        box-shadow: 2px 2px 3px #999; /* Sombra para dar profundidade */
        z-index: 1000; /* Garante que o botão fique acima de outros elementos */
        display: flex; /* Usa flexbox para centralizar o ícone */
        align-items: center; /* Centraliza verticalmente */
        justify-content: center; /* Centraliza horizontalmente */
        transition: background-color 0.3s ease; /* Transição suave na cor de fundo */
    }

    .whatsapp-float:hover {
        background-color: #1da851; /* Cor um pouco mais escura ao passar o mouse */
        color: #FFF; /* Mantém a cor do ícone branca */
    }

    /* Para telas menores (celulares), ajuste a posição se necessário */
    @media (max-width: 768px) {
        .whatsapp-float {
            bottom: 20px;
            right: 20px;
            width: 50px;
            height: 50px;
            font-size: 25px;
        }
    }
/* ---------------------------------------------
 * Correção para a Tabela na Seção '09. Melhor Oferta (Best Deal)'
 * (Garante que o texto da tabela fique branco)
 * --------------------------------------------- */

/* Estilo para o texto do lado esquerdo (título) na tabela de informações da aba. */
.best-deal .tabs-content .tab-content .info-table ul li h6 {
    color: #ffffff !important; /* Força a cor branca para o título */
    font-size: 15px;
    font-weight: 500;
}

/* Estilo para o texto do lado direito (valor) na tabela de informações da aba. */
.best-deal .tabs-content .tab-content .info-table ul li span {
    color: #ffffff !important; /* Força a cor branca para o valor */
    font-size: 15px;
    font-weight: 500;
}

/* Estilo para o texto em ênfase (destaque) na tabela de informações da aba. */
.best-deal .tabs-content .tab-content .info-table ul li span em {
    font-style: normal;
    color: #0071f8 !important; /* Mantém o destaque azul, se desejado */
}

/* Garante que a borda entre os itens da lista seja clara */
.best-deal .tabs-content .tab-content .info-table ul li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
/* ===================================================== */
/*  CALCULADORA ANTT – IMAGEM/VÍDEO ESQUERDA / FORM DIREITA */
/* ===================================================== */

.sl-calc-section {
  padding: 90px 0 70px; /* mais espaço em cima pra afastar da seção anterior */
  font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.sl-calc-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1.4fr; /* esquerda imagem, direita form */
  border-radius: 24px;
  overflow: hidden;
  background: radial-gradient(circle at top left, #050b23 0, #020617 55%, #02010c 100%);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7);
}

/* Lado esquerdo: imagem / vídeo */
.sl-calc-left {
  position: relative;
  overflow: hidden;
}

.sl-calc-image,
.sl-calc-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Lado direito: formulário */
.sl-calc-right {
  padding: 26px 28px 24px;
  background: rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(6px);
  color: #f5f7ff;
}

/* Título */
.sl-calc-title {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 18px;
  color: #ffffff;
}

/* Grupos / labels */
.sl-calc-group {
  margin-bottom: 14px;
}

.sl-calc-group-inline {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sl-calc-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(204, 214, 255, 0.9);
  margin-bottom: 6px;
}

/* Grid 2 colunas */
.sl-calc-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
}

/* Pill fixo do veículo */
.sl-calc-vehicle-fixed {
  flex: 1;
}

.sl-calc-vehicle-pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(3, 15, 49, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 12px;
  color: #e4ebff;
  font-weight: 500;
}

/* Inputs / selects */
.sl-input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(5, 22, 69, 0.95);
  color: #f5f7ff;
  font-size: 13px;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.sl-input::placeholder {
  color: rgba(201, 212, 255, 0.6);
}

.sl-input:focus {
  border-color: #0071f8;
  box-shadow: 0 0 0 1px rgba(0, 113, 248, 0.45);
  background: rgba(8, 30, 88, 1);
}

.sl-input option {
  background: #020617;
  color: #f5f7ff;
}

/* Footer: botão + resultado */
.sl-calc-footer {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

/* Botão principal azul vibrante, minimalista */
.sl-btn-primary {
  border: none;
  border-radius: 999px;
  padding: 12px 32px;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  background: radial-gradient(circle at 0% 0%, #4cc9ff 0%, #0071f8 40%, #0050c8 100%);
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: 0 14px 30px rgba(0, 113, 248, 0.45);
  transition:
    transform 0.12s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease,
    background 0.18s ease;
}

.sl-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(0, 113, 248, 0.55);
  filter: brightness(1.05);
}

.sl-btn-primary:focus-visible {
  outline: 2px solid #4cc9ff;
  outline-offset: 3px;
}

/* Resultado */
.sl-calc-result {
  text-align: right;
  flex: 1;
  margin-top: 6px;
}

.sl-calc-result-label {
  display: block;
  font-size: 11px;
  color: rgba(203, 215, 255, 0.9);
}

.sl-calc-result-value {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  margin: 2px 0 4px;
}

.sl-calc-result-cta {
  font-size: 12px;
  color: #25d366;
  text-decoration: none;
}

.sl-calc-result-cta:hover {
  text-decoration: underline;
}

/* Responsivo */
@media (max-width: 992px) {
  .sl-calc-section {
    padding: 40px 0;
  }

  .sl-calc-container {
    grid-template-columns: 1fr;
    border-radius: 20px;
  }

  .sl-calc-right {
    padding: 20px 18px;
  }

  .sl-calc-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .sl-calc-result {
    text-align: left;
  }
}
/* --- FORÇAR OCULTAÇÃO DO MENU MOBILE (UNIVERSAL) --- */
@media (max-width: 991px) {

    /* 1. Esconde QUALQUER lista de links dentro do cabeçalho/nav */
    header ul, 
    .header-area ul, 
    nav ul, 
    .main-nav ul {
        display: none !important; /* Faz os textos sumirem da direita imediatamente */
        position: absolute !important;
        top: 80px !important;
        left: 0 !important;
        right: auto !important;
        width: 100% !important;
        background-color: #001a4d !important;
        padding: 15px 0 !important;
        z-index: 9999 !important;
        flex-direction: column !important;
    }

    /* 2. Força os botões a ficarem um embaixo do outro quando o menu abrir */
    header ul li, 
    .header-area ul li, 
    nav ul li {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        float: none !important;
    }

    header ul li a, 
    .header-area ul li a, 
    nav ul li a {
        display: block !important;
        padding: 15px !important;
        color: #ffffff !important;
    }

    /* 3. Força o ícone de hambúrguer a aparecer e ficar branco */
    .menu-trigger, 
    .header-area .main-nav .menu-trigger {
        display: block !important;
        position: absolute !important;
        right: 20px !important;
        top: 25px !important;
        z-index: 10000 !important;
    }

    .menu-trigger span,
    .menu-trigger span::before,
    .menu-trigger span::after {
        background-color: #ffffff !important; /* Traços brancos para aparecer no fundo azul */
    }

    /* 4. Mostra o menu quando você clicar no botão */
    header ul.active, 
    .header-area ul.active, 
    nav ul.active, 
    .main-nav ul.active {
        display: block !important;

/* --- CORRIGIR VAZAMENTO LATERAL (ESPAÇO ESCURO) --- */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    position: relative;
}