/* Estilos Gerais */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #000;
  color: #757575;
}

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px;
  border-bottom: 2px solid red;
  flex-wrap: wrap; /* 🔹 Permite que os itens quebrem linha se necessário */
  
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
}

.logo img {
  height: 60px;
  margin-right: 16px;
}

/* Menu */
.menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  
}

.menu li {
  position: relative;
  margin: 0 15px;
  
}

.menu a {
  text-decoration: none;
  color: white;
  padding: 10px;
  transition: 0.3s;
  font-size: 16px;
}

.menu a:hover {
  color: red;
}

/* Submenu */
.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: black;
  border: 1px solid red;
  list-style: none;
  padding: 10px;
  min-width: 220px;
  z-index: 1000;
}

.dropdown.active .submenu {
  display: block;
}

.submenu li {
  padding: 5px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.submenu li:last-child {
  border-bottom: none;
}

.submenu a {
  color: white;
  font-size: 14px;
}

.submenu a:hover {
  color: red;
}

/* Botão Anunciar */
.btn-anunciar {
  background: red;
  color: white;
  padding: 8px 15px;
  border: none;
  font-size: 14px;
  font-weight: bold;
  border-radius: 5px;
  border-bottom: 3px solid white;
  cursor: pointer;
  transition: 0.3s;
}

.btn-anunciar:hover {
  background: darkred;
}


/* Banners */
.banner {
  width: 100%;
  text-align: center;
}

.banner img {
  margin-top: 110px; /* Ajuste conforme a altura do menu */
  width: 100%;
  height: auto;
}

.banner-mobile {
  display: none;
  margin-top: 90px;
  
}

/* Responsividade */
@media (max-width: 768px) {
  .menu {
      display: none;
  }
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0px;
}
  .logo img {
      height: 50px;
  }
  .btn-anunciar {
      display: block;
      font-size: 13px;
      padding: 6px 12px;
  }
  .banner-desktop {
      display: none;
  }
  .banner-mobile {
      display: block;
  }
  .logo, .btn-anunciar {
      flex: 0 1 auto;
  }
}
.titulo-caca-vazamento {
  text-align: center; /* Centraliza o texto */
  width: 90%; /* Largura adaptável */
  max-width: 800px; /* Largura máxima */
  margin: 20px auto; /* Centraliza horizontalmente */
}

/* Estilo do título principal (Branco) */
.titulo-caca-vazamento h1 {
  font-size: 28px;
  font-weight: bold;
  margin: 0;
  text-transform: uppercase;
  color: #1ea70c; /* Texto branco */
}

/* Estilo do subtítulo (Vermelho) */
.titulo-caca-vazamento p {
  font-size: 18px;
  font-weight: 600;
  margin: 5px 0 0;
  color: red; /* Texto vermelho */
}

/* Estilo do "24h" (Verde) */
.titulo-caca-vazamento .verde {
  color: green; /* Texto verde */
  font-weight: bold;
}

/* Responsividade para celulares */
@media (max-width: 768px) {
  .titulo-caca-vazamento {
      width: 95%; /* Ajusta a largura para telas menores */
  }

  .titulo-caca-vazamento h1 {
      font-size: 24px; /* Reduz o tamanho do título no celular */
  }

  .titulo-caca-vazamento p {
      font-size: 16px; /* Ajusta o subtítulo */
  }
}
.sobre-nos {
  width: 100%;
  padding: 50px 0;
  background-color: #e3f2fd; /* Fundo leve para destacar a seção */
}

.container-sobre {
  display: flex;
  align-items: center;
  max-width: 1200px;
  margin: auto;
  gap: 20px;
}

.imagem-sobre {
  flex: 1;
}

.imagem-sobre img {
  width: 100%;
  max-width: 500px;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.texto-sobre {
  flex: 1;
  text-align: left;
  margin-top: 0;
}

.texto-sobre h2 {
  font-size: 28px;
  color: #0a662e; /* Verde vibrante para o título */
  margin-bottom: 15px;
}

.texto-sobre p {
  font-size: 16px;
  color: #333;
  line-height: 1.6;
}

/* Responsividade para dispositivos móveis */
@media (max-width: 768px) {
  .container-sobre {
      flex-direction: column;
      text-align: center;
  }

  .imagem-sobre img {
      max-width: 90%;
  }
}
/* Estilização da seção */
.servicos {
  width: 100%;
  background-color: black; /* Fundo preto */
  border: 1px solid green; /* Borda verde de 1px */
  padding: 50px 0;
}

/* Container das colunas */
.container-servicos {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 colunas */
  gap: 20px;
  padding: 11px;
}

/* Estilização das colunas */
.coluna {
  background-color: rgba(255, 255, 255, 0.05); /* Leve transparência */
  padding: 20px;
  border-radius: 5px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 15px;
}

/* Ícones */
.coluna i {
  font-size: 30px;
  color: green; /* Ícone verde */
}

/* Texto */
.conteudo h3 {
  font-size: 20px;
  color: white;
  margin: 0 0 10px 0;
}

.conteudo p {
  font-size: 14px;
  color: #ccc;
  margin-bottom: 15px;
}

/* Botão Saiba Mais */
.btn-saiba-mais {
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: bold;
  color: white;
  border: 1px solid green;
  background-color: transparent;
  text-decoration: none;
  border-radius: 3px;
  transition: 0.3s ease-in-out;
}

.btn-saiba-mais:hover {
  background-color: green;
  color: black;
}

/* Responsividade */
@media (max-width: 1024px) {
  .container-servicos {
      grid-template-columns: repeat(2, 1fr); /* 2 colunas no tablet */
  }
}

@media (max-width: 768px) {
  .container-servicos {
      grid-template-columns: 1fr; /* 1 coluna no celular */
  }

  .coluna {
      flex-direction: column;
      text-align: center;
  }
}
/* Estilização da seção específica para serviços de caça vazamento */
.servicos-caca-vazamento {
  width: 100%;
  padding: 50px 0;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
}

/* Container das colunas */
.container-servicos-caca {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Mantém as colunas organizadas */
  max-width: 1200px;
  width: 100%;
  gap: 20px;
  padding: 20px;
}

/* Estilização das colunas */
.coluna-caca {
  background-color: white;
  padding: 15px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.coluna-caca:hover {
  transform: scale(1.05);
}

/* Imagem dentro das colunas */
.coluna-caca img {
  width: 100%;
  height: 180px; /* Mantém um tamanho uniforme para todas as imagens */
  object-fit: cover;
  border-radius: 5px;
}

/* Estilização do título */
.coluna-caca h3 {
  font-size: 18px;
  color: #333;
  margin: 10px 0;
}

/* Estilização da descrição */
.coluna-caca p {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
}

/* Botão Saiba Mais */
.btn-saiba-mais-caca {
  display: inline-block;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: bold;
  color: white;
  border: 1px solid #0a662e;
  background-color: #0a662e;
  text-decoration: none;
  border-radius: 4px;
  transition: 0.3s ease-in-out;
}

.btn-saiba-mais-caca:hover {
  background-color: white;
  color: #0a662e;
}

/* Responsividade */
/* 3 colunas no desktop */
@media (min-width: 1024px) {
  .container-servicos-caca {
      grid-template-columns: repeat(3, 1fr);
  }
}

/* 2 colunas no tablet */
@media (max-width: 1024px) {
  .container-servicos-caca {
      grid-template-columns: repeat(2, 1fr);
  }
}

/* 1 coluna no celular */
@media (max-width: 768px) {
  .container-servicos-caca {
      grid-template-columns: 1fr;
  }

  .coluna-caca img {
      height: 150px; /* Ajusta a altura da imagem no celular */
  }
}
/* Estilização geral */
.faq-servicos-caca {
  width: 100%;
  background-color: #f5f5f5;
  padding: 50px 0;
  display: flex;
  justify-content: center;
}

/* Container das colunas */
.container-faq-caca {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Todas as colunas com tamanho igual */
  max-width: 1200px;
  width: 100%;
  gap: 20px;
  padding: 20px;
}

/* Estilização das colunas */
.coluna-faq {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  text-align: left;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
  cursor: pointer;
  min-height: 200px; /* Mantém todas as colunas com a mesma altura */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.coluna-faq:hover {
  transform: scale(1.05);
}

/* Perguntas */
.faq-pergunta {
  font-size: 18px;
  color: #0a662e;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Ícone "+" */
.faq-pergunta .seta {
  font-size: 22px;
}

/* Respostas ocultas */
.faq-resposta {
  display: none;
  font-size: 16px;
  color: #333;
  margin-top: 10px;
}

/* Exibir resposta ativa */
.coluna-faq.ativo .faq-resposta {
  display: block;
}

/* Responsividade */
/* 5 colunas no desktop */
@media (min-width: 1200px) {
  .container-faq-caca {
      grid-template-columns: repeat(5, 1fr);
  }
}

/* 3 colunas no tablet */
@media (max-width: 1024px) {
  .container-faq-caca {
      grid-template-columns: repeat(3, 1fr);
  }
}

/* 2 colunas no mobile grande */
@media (max-width: 768px) {
  .container-faq-caca {
      grid-template-columns: repeat(2, 1fr);
  }
}

/* 1 coluna no celular pequeno */
@media (max-width: 480px) {
  .container-faq-caca {
      grid-template-columns: 1fr;
  }
}
/* Estilização da seção específica para caça vazamento */
.seo-caca-vazamento {
  width: 100%;
  background-color: #f5f5f5;
  padding: 50px 0;
  display: flex;
  justify-content: center;
}

/* Container flexível */
.container-caca-vazamento {
  display: flex;
  align-items: center;
  max-width: 1200px;
  gap: 20px;
  padding: 20px;
}

/* Texto no lado esquerdo */
.texto-caca-vazamento {
  flex: 1;
  text-align: left;
}

.texto-caca-vazamento h2 {
  font-size: 28px;
  color: #099e09; /* Verde para destacar o título */
  margin-bottom: 15px;
}

/* Lista com ícones de check */
.texto-caca-vazamento ul {
  list-style: none;
  padding: 0;
}

.texto-caca-vazamento ul li {
  font-size: 16px;
  color: #333;
  margin-bottom: 8px;
}

/* Negrito para destacar palavras-chave */
.texto-caca-vazamento strong {
  color: #0a662e;
}

/* Imagem no lado direito */
.imagem-caca-vazamento {
  flex: 1;
  text-align: right;
}

.imagem-caca-vazamento img {
  width: 100%;
  max-width: 500px;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

/* Botão Saiba Mais */
.btn-caca-vazamento {
  display: inline-block;
  padding: 10px 15px;
  font-size: 16px;
  font-weight: bold;
  color: white;
  border: 1px solid #0a662e;
  background-color: #0a662e;
  text-decoration: none;
  border-radius: 4px;
  transition: 0.3s ease-in-out;
}

.btn-caca-vazamento:hover {
  background-color: white;
  color: #0a662e;
}

/* Responsividade */
@media (max-width: 1024px) {
  .container-caca-vazamento {
      flex-direction: column;
      text-align: center;
  }

  .imagem-caca-vazamento {
      text-align: center;
  }

  .imagem-caca-vazamento img {
      max-width: 90%;
  }
}
/* Seção SEO específica para caça vazamento */
.seo-caca-vazamento {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* Preto transparente */
  padding: 50px 0;
  display: flex;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Efeito de brilho no fundo */
.seo-caca-vazamento::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0.05) 50%,
      rgba(255, 255, 255, 0.1) 100%
  );
  opacity: 0.4; /* Brilho sutil */
  pointer-events: none;
}

/* Container flexível */
.container-caca-vazamento {
  display: flex;
  align-items: center;
  max-width: 1200px;
  gap: 40px;
  padding: 20px;
  position: relative;
  z-index: 2;
}

/* Texto no lado esquerdo */
.texto-caca-vazamento {
  flex: 1;
  text-align: justify; /* Alinhamento justificado */
  font-family: "Arial", sans-serif;
}

/* Título verde mais leve */
.texto-caca-vazamento h2 {
  font-size: 30px;
  font-weight: 500; /* Fonte mais fina */
  color: #29aa09; /* Verde */
  margin-bottom: 20px;
  font-family: "Helvetica Neue", sans-serif;
  text-align: center; /* Centraliza apenas o título */
}

/* Lista com ícones de check */
.texto-caca-vazamento ul {
  list-style: none;
  padding: 0;
}

/* Textos pretos, mais finos e bem espaçados, justificados */
.texto-caca-vazamento p,
.texto-caca-vazamento ul li {
  font-size: 17px;
  font-weight: 400; /* Fonte mais leve */
  color: #fff; /* Texto branco */
  margin-bottom: 12px;
  line-height: 1.7; /* Melhor espaçamento para leitura */
  font-family: "Open Sans", sans-serif;
  text-align: justify; /* Alinhamento justificado */
}

/* Negrito mais leve para palavras-chave */
.texto-caca-vazamento strong {
  color: #fff; /* Texto branco */
  font-weight: 500; /* Médio, sem ser muito grosso */
}

/* Imagem no lado direito */
.imagem-caca-vazamento {
  flex: 1;
  text-align: right;
}

.imagem-caca-vazamento img {
  width: 100%;
  max-width: 500px;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(255, 255, 255, 0.2);
}

/* Botão Saiba Mais */
.btn-caca-vazamento {
  display: inline-block;
  padding: 12px 18px;
  font-size: 17px;
  font-weight: 500;
  color: white;
  border: 2px solid #0a662e;
  background-color: #0a662e;
  text-decoration: none;
  border-radius: 6px;
  transition: 0.3s ease-in-out;
  font-family: "Arial", sans-serif;
}

.btn-caca-vazamento:hover {
  background-color: white;
  color: #660a0a;
}

/* Responsividade */
@media (max-width: 1024px) {
  .container-caca-vazamento {
      flex-direction: column;
      text-align: center;
  }

  .imagem-caca-vazamento {
      text-align: center;
  }

  .imagem-caca-vazamento img {
      max-width: 90%;
  }

  .texto-caca-vazamento h2 {
      font-size: 26px;
  }

  .texto-caca-vazamento p,
  .texto-caca-vazamento ul li {
      font-size: 15px;
  }
}
/* Seção de serviços */
.servicos-vazamento {
  width: 100%;
  background-color: #eef2f6;
  padding: 50px 0;
  display: flex;
  justify-content: center;
}

/* Container flexível */
.container-vazamento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1200px;
  gap: 20px;
  padding: 20px;
}

/* Bloco da imagem e texto */
.card-vazamento {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-vazamento img {
  width: 100%;
  border-radius: 10px;
}

.card-texto {
  padding: 20px 0;
}

.card-texto h3 {
  font-size: 22px;
  color: #333;
}

.card-texto p {
  font-size: 16px;
  color: #555;
  line-height: 1.6;
}

/* Bloco dos serviços */
.grid-vazamento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

/* Estilização dos serviços */
.servico-box {
  background-color: white;
  padding: 15px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 15px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

/* Ícone ao lado esquerdo */
.icone {
  font-size: 30px;
  color: #0073e6;
  width: 50px;
  text-align: center;
}

/* Texto do serviço */
.texto-servico {
  flex: 1;
}

.texto-servico h4 {
  font-size: 18px;
  color: #333;
  margin-bottom: 5px;
}

.texto-servico p {
  font-size: 14px;
  color: #555;
  margin: 0;
}

/* Destaque azul */
.destaque {
  background-color: #0073e6;
  color: white;
}

.destaque .texto-servico h4,
.destaque .texto-servico p {
  color: white;
}

.destaque .icone {
  color: yellow;
}

/* Responsividade */
@media (max-width: 1024px) {
  .container-vazamento {
      grid-template-columns: 1fr;
      align-items: center;
  }

  .card-vazamento {
      width: 100%;
  }

  .grid-vazamento {
      width: 100%;
      grid-template-columns: 1fr;
  }
}
.titulo-vazamento {
  font-size: 24px;
  font-weight: bold;
  color: black;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: left;
  border-left: 5px solid red;
  padding-left: 10px;
}
/* Seção principal */
.causas-problemas {
  width: 100%;
  background-color: #004aad;
  padding: 50px 0;
  display: flex;
  justify-content: center;
  color: white;
}

/* Container */
.container-problemas {
  max-width: 1200px;
  text-align: center;
  padding: 20px;
}

/* Título principal */
.container-problemas h2 {
  font-size: 28px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* Subtítulo */
.subtitulo {
  font-size: 18px;
  margin-bottom: 30px;
  color: #878080;
}
.kev {
  font-size: 18px;
  margin-bottom: 30px;
  color: #000000;
}
/* Grid dos problemas */
.grid-problemas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Caixa dos problemas */
.problema-box {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  text-align: left;
  color: black;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 15px;
}

/* Ícone */
.icone-box {
  font-size: 26px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

/* Cores dos ícones */
.azul {
  background-color: #0073e6;
  color: white;
}

.amarelo {
  background-color: #ffd700;
  color: black;
}

/* Título do problema */
.problema-box h4 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

/* Texto do problema */
.problema-box p {
  font-size: 14px;
  color: #333;
  margin: 0;
}

/* Responsividade */
@media (max-width: 1024px) {
  .grid-problemas {
      grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .grid-problemas {
      grid-template-columns: 1fr;
  }
}
/* Seção principal */
.detecao-vazamentos {
  width: 100%;
  background-color: #0073e6;
  padding: 50px 0;
  display: flex;
  justify-content: center;
  color: white;
}

/* Container */
.container-deteccao {
  max-width: 1200px;
  text-align: center;
  padding: 20px;
}

/* Título principal */
.container-deteccao h2 {
  font-size: 28px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* Subtítulo */
.subtitulo {
  font-size: 18px;
  margin-bottom: 30px;
  color: #ddd;
}

/* Descrição com imagem */
.descricao-box {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  text-align: left;
  gap: 20px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  color: black;
}

.descricao-box img {
  width: 30%;
  border-radius: 10px;
}

.descricao-box p {
  font-size: 16px;
  color: #333;
  line-height: 1.6;
}

/* Grid dos serviços */
.grid-deteccao {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 30px;
}

/* Caixas dos serviços */
.detecao-box {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  text-align: left;
  color: black;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

/* Ícones */
.icone-box {
  font-size: 26px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  margin-bottom: 10px;
}

/* Cores dos ícones */
.azul {
  background-color: #005bb5;
  color: white;
}

.amarelo {
  background-color: #ffd700;
  color: black;
}

/* Título das caixas */
.detecao-box h4 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

/* Lista dentro das caixas */
.detecao-box ul {
  list-style: none;
  padding: 0;
}

.detecao-box ul li {
  font-size: 14px;
  color: #333;
  margin-bottom: 5px;
}

/* Destaque (fundo amarelo) */
.destaque {
  background-color: #ffd700;
  color: black;
}

.destaque h4, .destaque p {
  color: rgb(255, 255, 255);
}

/* Link de vantagens */
.detecao-box a {
  font-weight: bold;
  color: #0073e6;
  text-decoration: none;
}

.detecao-box a:hover {
  text-decoration: underline;
}

/* Responsividade */
@media (max-width: 1024px) {
  .grid-deteccao {
      grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .grid-deteccao {
      grid-template-columns: 1fr;
  }

  .descricao-box {
      flex-direction: column;
      text-align: center;
  }

  .descricao-box img {
      width: 80%;
  }
}
/* Seção principal */
.caca-vazamentos {
  width: 100%;
  background-color: #e8eef5;
  padding: 50px 0;
  display: flex;
  justify-content: center;
  color: black;
}

/* Container */
.container-caca {
  max-width: 1200px;
  text-align: center;
  padding: 20px;
  color: #000;
}

/* Título principal */
.container-caca h2 {
  font-size: 28px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* Subtítulo */
.subtitulo {
  font-size: 18px;
  margin-bottom: 30px;
  color: #555;
}

/* Descrição com imagem */
.descricao-caca {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  text-align: left;
  gap: 20px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  color: black;
}

.descricao-caca img {
  width: 30%;
  border-radius: 10px;
}

.descricao-caca p {
  font-size: 16px;
  color: #333;
  line-height: 1.6;
}

/* Grid dos serviços */
.grid-caca {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 30px;
}

/* Caixas dos serviços */
.caca-box {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  text-align: left;
  color: black;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

/* Ícones */
.icone-box {
  font-size: 26px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  margin-bottom: 10px;
}

/* Cores dos ícones */
.azul {
  background-color: #0073e6;
  color: white;
}

.amarelo {
  background-color: #ffd700;
  color: black;
}

/* Título das caixas */
.caca-box h4 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

/* Texto das caixas */
.caca-box p {
  font-size: 14px;
  color: #333;
  margin: 0;
}

/* Destaque (fundo amarelo) */
.destaque {
  background-color: #ffd700;
  color: black;
}

.destaque h4, .destaque p {
  color: rgb(255, 255, 255);
}

/* Responsividade */
@media (max-width: 1024px) {
  .grid-caca {
      grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .grid-caca {
      grid-template-columns: 1fr;
  }

  .descricao-caca {
      flex-direction: column;
      text-align: center;
  }

  .descricao-caca img {
      width: 80%;
  }
}
/* Seção principal */
.tecnico-caca {
  width: 100%;
  background: rgba(0, 0, 0, 0.85);
  padding: 50px 0;
  display: flex;
  justify-content: center;
  color: white;
}

/* Container */
.container-tecnico {
  max-width: 1200px;
  text-align: center;
  padding: 20px;
}

/* Título principal */
.container-tecnico h2 {
  font-size: 28px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* Subtítulo */
.subtitulo {
  font-size: 18px;
  margin-bottom: 30px;
  color: #ddd;
}

/* Descrição com imagem */
.descricao-tecnico {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  text-align: left;
  gap: 20px;
  color: white;
}

.descricao-tecnico img {
  width: 30%;
  border-radius: 10px;
}

.descricao-tecnico p {
  font-size: 16px;
  color: #ccc;
  line-height: 1.6;
}

/* Grid dos serviços */
.grid-tecnico {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 30px;
}

/* Caixas dos serviços */
.tecnico-box {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 10px;
  text-align: left;
  color: white;
  box-shadow: 0px 4px 10px rgba(255, 255, 255, 0.1);
}

/* Ícones */
.icone-box {
  font-size: 26px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  margin-bottom: 10px;
}

/* Cores dos ícones */
.azul {
  background-color: #0073e6;
  color: white;
}

.amarelo {
  background-color: #ffd700;
  color: black;
}

/* Título das caixas */
.tecnico-box h4 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

/* Texto das caixas */
.tecnico-box p {
  font-size: 14px;
  color: #ddd;
  margin: 0;
}

/* Destaque (fundo amarelo) */
.destaque {
  background-color: rgba(255, 0, 0, 0.9);
  color: black;
}

.destaque h4, .destaque p {
  color: rgb(255, 255, 255);
}

/* Responsividade */
@media (max-width: 1024px) {
  .grid-tecnico {
      grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .grid-tecnico {
      grid-template-columns: 1fr;
  }

  .descricao-tecnico {
      flex-direction: column;
      text-align: center;
  }

  .descricao-tecnico img {
      width: 80%;
  }
}
/* Seção principal */
.protocolo-servico {
  width: 100%;
  background: rgba(0, 0, 0, 0.85);
  padding: 50px 0;
  display: flex;
  justify-content: center;
  color: white;
}

/* Container */
.container-protocolo {
  max-width: 1200px;
  text-align: center;
  padding: 20px;
}

/* Título principal */
.container-protocolo h2 {
  font-size: 28px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* Subtítulo */
.subtitulo {
  font-size: 18px;
  margin-bottom: 30px;
  color: #ddd;
}

/* Descrição com imagem */
.descricao-protocolo {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  text-align: left;
  gap: 20px;
  color: white;
}

.descricao-protocolo img {
  width: 30%;
  border-radius: 10px;
}

.descricao-protocolo p {
  font-size: 16px;
  color: #ccc;
  line-height: 1.6;
}

/* Grid do protocolo */
.grid-protocolo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 30px;
}

/* Caixas dos serviços */
.protocolo-box {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 10px;
  text-align: left;
  color: white;
  box-shadow: 0px 4px 10px rgba(255, 255, 255, 0.1);
}

/* Ícones */
.icone-box {
  font-size: 22px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-bottom: 10px;
  font-weight: bold;
}

/* Cores dos ícones */
.azul {
  background-color: #0073e6;
  color: white;
}

.preto {
  background-color: black;
  color: white;
}

.cinza {
  background-color: #888;
  color: white;
}

/* Título das caixas */
.protocolo-box h4 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

/* Texto das caixas */
.protocolo-box p {
  font-size: 14px;
  color: #ddd;
  margin: 0;
}

/* Destaque (fundo preto) */
.destaque {
  background-color: rgba(0, 0, 0, 0.9);
  color: white;
}

/* Responsividade */
@media (max-width: 1024px) {
  .grid-protocolo {
      grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .grid-protocolo {
      grid-template-columns: 1fr;
  }

  .descricao-protocolo {
      flex-direction: column;
      text-align: center;
  }

  .descricao-protocolo img {
      width: 80%;
  }
}
/* Seção principal */
.processo-vazamento {
  width: 100%;
  background: white;
  padding: 50px 0;
  display: flex;
  justify-content: center;
  color: black;
}

/* Container */
.container-processo {
  max-width: 1200px;
  text-align: center;
  padding: 20px;
}

/* Título principal */
.container-processo h2 {
  font-size: 28px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: #222;
}

/* Subtítulo */
.subtitulo-processo {
  font-size: 18px;
  margin-bottom: 30px;
  color: #555;
}

/* Descrição com imagem */
.descricao-processo {
  background-color: #f8f8f8;
  padding: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  text-align: left;
  gap: 20px;
  color: black;
}

.descricao-processo img {
  width: 30%;
  border-radius: 10px;
}

.descricao-processo p {
  font-size: 16px;
  color: #333;
  line-height: 1.6;
}

/* Grid do processo */
.grid-processo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 30px;
}

/* Caixas do processo */
.processo-box {
  background-color: #f1f1f1;
  padding: 20px;
  border-radius: 10px;
  text-align: left;
  color: black;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

/* Ícones */
.icone-processo {
  font-size: 22px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-bottom: 10px;
  font-weight: bold;
}

/* Cores dos ícones */
.azul {
  background-color: #0073e6;
  color: white;
}

.preto {
  background-color: black;
  color: white;
}

.cinza {
  background-color: #888;
  color: white;
}

/* Título das caixas */
.processo-box h4 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

/* Texto das caixas */
.processo-box p {
  font-size: 14px;
  color: #333;
  margin: 0;
}

/* Destaque (fundo preto) */
.destaque-processo {
  background-color: black;
  color: white;
}

.destaque-processo h4, .destaque-processo p {
  color: white;
}

/* Responsividade */
@media (max-width: 1024px) {
  .grid-processo {
      grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .grid-processo {
      grid-template-columns: 1fr;
  }

  .descricao-processo {
      flex-direction: column;
      text-align: center;
  }

  .descricao-processo img {
      width: 80%;
  }
}
.section-caca-vazamentos {
  background-color: #f7f7f7;
  padding: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.servico {
  width: 500px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  padding: 15px;
  box-sizing: border-box;
  text-align: center;
}

.servico-img {
  width: 450px;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
}

.servico-titulo {
  font-size: 22px;
  color: #1a73e8;
  margin: 15px 0;
}

.servico-descricao {
  font-size: 16px;
  color: #333;
  text-align: justify;
  line-height: 1.8;
  letter-spacing: 0.5px;
  padding: 0 10px;
}

@media (max-width: 1024px) {
  .servico, .servico-img {
      width: 100%;
      height: auto;
  }

  .section-caca-vazamentos {
      padding: 20px;
  }
}
.comentarios-container {
  background-color: #009dff;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: Arial, sans-serif;
}

.titulo-comentarios {
  color: #fff;
  font-size: 32px;
  margin-bottom: 5px;
  text-align: center;
}

.subtitulo-comentarios {
  color: #e0e0e0;
  font-size: 20px;
  margin-bottom: 30px;
  text-align: center;
}

.coluna-comentarios {
  width: 100%;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.comentario {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.nome-cliente {
  font-size: 18px;
  font-weight: bold;
  color: #555;
  margin-bottom: 5px;
}

.estrelas {
  color: #ffcc00;
  font-size: 20px;
  margin-bottom: 10px;
}

.comentario p {
  font-size: 16px;
  color: #333;
  margin: 0;
}

@media (max-width: 600px) {
  .comentarios-container {
    padding: 20px;
  }
}
* Estrutura Principal */
.servico-vazamento-bloco {
    padding: 50px 0;
}

.container-vazamento {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1100px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.imagem-vazamento {
    flex: 1;
    text-align: center;
}

.imagem-vazamento img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.conteudo-vazamento {
    flex: 1;
    padding: 20px;
}

.conteudo-vazamento h2 {
    color: #ffffff;
    font-size: 24px;
    margin-bottom: 15px;
}

.conteudo-vazamento p {
    font-size: 16px;
    color: #111010;
    line-height: 1.6;
    margin-bottom: 10px;
}

.botoes-vazamento {
    margin-top: 20px;
}

.botao-vazamento {
    display: inline-block;
    background-color: #25d366;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: 0.3s;
}

.botao-vazamento:hover {
    background-color: #1da851;
}

/* Inverter Layout */
.invertido-vazamento .container-vazamento {
    flex-direction: row-reverse;
}

/* Responsivo */
@media (max-width: 768px) {
    .container-vazamento {
        flex-direction: column;
        text-align: center;
    }

    .invertido-vazamento .container-vazamento {
        flex-direction: column;
    }

    .conteudo-vazamento {
        padding: 15px;
    }
}
/* Estilo Geral */
.faq-caca-vazamento {
  background-color: #f1f1f1;
  padding: 60px 10%;
  text-align: left;
}

/* Container */
.container-faq {
  max-width: 1200px;
  margin: 0 auto;
}

/* Título Principal */
.container-faq h2 {
  text-align: center;
  font-size: 32px;
  color: #007bff;
  margin-bottom: 30px;
}

/* Perguntas e Respostas */
.faq-item {
  background: white;
  padding: 15px 20px;
  margin-bottom: 15px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

/* Perguntas */
.faq-question {
  font-size: 22px;
  color: #0056b3;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Ícone "+" para abrir e fechar */
.faq-toggle {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

/* Respostas (Escondidas por padrão) */
.faq-answer {
  font-size: 18px;
  color: #555;
  margin-top: 10px;
  display: none;
}

/* Responsividade */
@media (max-width: 768px) {
  .faq-caca-vazamento {
      padding: 40px 5%;
  }
}

/* Seções com Fundo Branco */
.sessao-conta-agua, .sessao-infiltracao {
  background-color: #ffffff;
  width: 100%;
}

/* Containers */
.container-conta, .container-infiltracao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}

/* Texto */
.texto-conta, .texto-infiltracao {
  flex: 1;
  padding: 40px;
  max-width: 50%;
}

.texto-conta h2, .texto-infiltracao h2 {
  font-size: 36px;
  color: #007bff;
  margin-bottom: 20px;
}

.texto-conta h3, .texto-infiltracao h3 {
  font-size: 26px;
  color: #0056b3;
  margin-bottom: 15px;
}

.texto-conta p, .texto-infiltracao p {
  font-size: 20px;
  color: #555;
  margin-bottom: 15px;
}

.texto-conta ul, .texto-infiltracao ul {
  font-size: 20px;
  color: #333;
  margin-bottom: 15px;
  padding-left: 20px;
}

/* Imagens */
.imagem-conta, .imagem-infiltracao {
  flex: 1;
  text-align: center;
  max-width: 50%;
}

.imagem-conta img, .imagem-infiltracao img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Botões */
.botoes-conta, .botoes-infiltracao {
  margin-top: 30px;
}

.botao-conta, .botao-infiltracao {
  display: inline-block;
  background-color: #25d366;
  padding: 15px 35px;
  font-size: 22px;
  color: white;
  text-decoration: none;
  border-radius: 10px;
  transition: 0.3s;
}

.botao-conta:hover, .botao-infiltracao:hover {
  background-color: #1da851;
}

/* Responsividade */
@media (max-width: 1024px) {
  .container-conta, .container-infiltracao {
      flex-direction: column;
      text-align: center;
  }

  .texto-conta, .texto-infiltracao {
      max-width: 100%;
      padding: 20px;
  }

  .imagem-conta, .imagem-infiltracao {
      max-width: 100%;
  }
}
/* Seção do Blog */
.blog-section {
  background-color: #f8f8f8;
  padding: 60px 5%;
  text-align: center;
}

/* Container */
.container-blog {
  max-width: 1200px;
  margin: 0 auto;
}

/* Título */
.container-blog h2 {
  font-size: 32px;
  color: #222;
  margin-bottom: 30px;
}

/* Grid dos Posts */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Card do Blog */
.blog-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

.blog-card:hover {
  transform: scale(1.03);
}

/* Imagem */
.blog-image {
  position: relative;
  width: 100%;
}

.blog-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* Categoria sobre a imagem */
.blog-category {
  position: absolute;
  top: 15px;
  left: 15px;
  background: rgb(241, 3, 3);
  color: white;
  font-size: 14px;
  padding: 5px 10px;
  border-radius: 5px;
}

/* Conteúdo */
.blog-content {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Título */
.blog-title {
  font-size: 20px;
  color: #222;
  margin-bottom: 10px;
  font-weight: bold;
}

/* Descrição */
.blog-content p {
  font-size: 16px;
  color: #666;
  margin-bottom: 15px;
}

/* Meta Info */
.blog-meta {
  font-size: 14px;
  color: #999;
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

/* Botão Saiba Mais */
.blog-button {
  align-self: flex-end;
  background: #d32f2f;
  color: white;
  font-size: 20px;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
  text-decoration: none;
  transition: background 0.3s;
}

.blog-button:hover {
  background: #b71c1c;
}

/* Responsividade */
@media (max-width: 1024px) {
  .blog-grid {
      grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .blog-grid {
      grid-template-columns: 1fr;
  }

  .blog-card {
      width: 100%;
  }
}
/* Rodapé */
.footer-section {
  background-color: #000000;
  color: white;
  padding: 50px 5%;
  text-align: center;
}

/* Container do Rodapé */
.container-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}

/* Logo */
.footer-logo img {
  width: 300px;
  height: auto;
}

/* Links */
.footer-links h3,
.footer-social h3 {
  font-size: 18px;
  margin-bottom: 15px;
}

.footer-links ul {
  list-style: none;
  padding: 0;
}

.footer-links ul li {
  margin-bottom: 10px;
}

.footer-links ul li a {
  color: white;
  text-decoration: none;
  font-size: 16px;
  transition: color 0.3s;
}

.footer-links ul li a:hover {
  color: #f44336;
}

/* Redes Sociais */
.social-icons {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.social-icons a {
  color: white;
  font-size: 22px;
  transition: 0.3s;
}

.social-icons a:hover {
  color: #f44336;
  transform: scale(1.1);
}

/* Direitos Autorais */
.footer-bottom {
  background: #000;
  padding: 15px;
  font-size: 14px;
  margin-top: 20px;
}

/* Responsividade */
@media (max-width: 768px) {
  .container-footer {
      flex-direction: column;
      text-align: center;
  }

  .footer-logo img {
      margin-bottom: 20px;
  }

  .social-icons {
      margin-top: 10px;
  }
}
/* Garantindo que a seção tenha fundo branco e largura ajustada */
.areal-beuvedore {
  max-width: 100%;
  margin: 20px auto;
  padding: 20px;
  background-color: #ffffff; /* Fundo branco total */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  font-size: 18px; /* Aumenta o tamanho da fonte */
  line-height: 1.8; /* Melhora o espaçamento entre linhas */
  text-align: justify; /* Justifica o texto para um layout mais profissional */
  color: #333; /* Mantém um tom escuro suave para melhor contraste */
  .areal-beuvedore .container {
    max-width: 900px; /* Define a largura contida */
    margin: 0 auto; /* Centraliza o container dentro da section */
    text-align: center; /* Centraliza os elementos dentro */
    max-width: 900px; /* Define a largura máxima para os elementos */
    margin: 0 auto; /
}
  
}

/* Alterando azul para vermelho */
.areal-beuvedore h1, 
.areal-beuvedore h2, 
.areal-beuvedore h3 {
  color: #d32f2f; /* Vermelho escuro */

}

/* Contêiner da tabela ajustado para garantir responsividade */
.areal-beuvedore .table-container {
  width: 100%;
  overflow-x: auto; /* Ativa rolagem horizontal apenas se necessário */
  background-color: white;
  border-radius: 8px;
}

/* Garantindo que a tabela ocupe 100% da largura disponível */
.areal-beuvedore table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

/* Estilizando cabeçalhos da tabela */
.areal-beuvedore th {
  background-color: #d32f2f; /* Vermelho escuro */
  color: white;
  padding: 12px;
  text-align: left;
}

/* Células da tabela */
.areal-beuvedore td {
  background-color: #f4f4f4;
  padding: 12px;
  border: 1px solid #ddd;
  text-align: left;
}

/* Garantindo que as imagens dentro da tabela sejam responsivas */
.areal-beuvedore table img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Responsividade para telas menores */
@media (max-width: 768px) {
  .areal-beuvedore {
      padding: 10px;
  }
  .areal-beuvedore .table-container {
      width: 100%;
      overflow-x: auto; /* Permite rolagem horizontal em telas pequenas */
      display: block;
  }
  .areal-beuvedore table {
      width: 100%;
      min-width: 600px; /* Evita que a tabela fique achatada */
  }
  .areal-beuvedore th, 
  .areal-beuvedore td {
      font-size: 14px;
      padding: 8px;
  }
}

/* Ajuste especial para celulares menores */
@media (max-width: 480px) {
  .areal-beuvedore th, .areal-beuvedore td {
      font-size: 12px;
      padding: 6px;
  }
  .areal-beuvedore table {
      min-width: 100%; /* Mantém a tabela ajustada */
  }
}
.flaive-tent {
  background-color: #fff;
  padding: 50px 20px;
  text-align: center;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
}

h2 {
  font-size: 28px;
  color: #333;
  margin-bottom: 20px;
}

p {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
}

.icons {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-top: 30px;
}

.icon-box {
  width: 30%;
  text-align: center;
}

.icon-box img {
  width: 60px;
  height: auto;
}

.icon-box h3 {
  font-size: 20px;
  margin-top: 10px;
}

.icon-box p {
  font-size: 14px;
  color: #555;
}

.content {
  margin-top: 40px;
  text-align: left;
}

ul {
  list-style: none;
  padding: 0;
}

ul li {
  font-size: 16px;
  margin-bottom: 10px;
  color: #444;
}

ul li strong {
  color: #222;
}

.cta {
  margin-top: 30px;
}

.btn-whatsapp {
  background-color: #25d366;
  color: #fff;
  padding: 15px 30px;
  text-decoration: none;
  font-size: 18px;
  border-radius: 5px;
  display: inline-block;
}

.btn-whatsapp:hover {
  background-color: #1da851;
}
/* Cabeçalho fixo no topo com altura reduzida */
header {
  background-color: #000000;
  color: white;
  text-align: center;
  padding: -30px 0; /* Ajusta a altura do cabeçalho */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}



/* Seções de largura total */
.full-width {
  width: 100%;
  padding: 1px 0;
}

.full-width.blue-background {
  background-color: #e3f2fd;
}

/* Container centralizado */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Layout das colunas */
.columns {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}

/* Cada coluna */
.column {
  flex: 1;
  min-width: 300px;
  text-align: center;
  padding: 15px;
  background: white;
  border-radius: 5px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.column img {
  width: 60px;
  height: 60px;
  margin-bottom: 10px;
}

/* Tabela */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #007acc;
  color: white;
}

/* Rodapé */
footer {
  text-align: center;
  padding: 10px;
  background: #007acc;
  color: white;
}
.full-width {
  width: 100%;
  padding: 40px 0;
  background-color: #f4f4f4;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.columns {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.column {
  flex: 1 1 300px;
  text-align: center;
  padding: 15px;
  background: white;
  border-radius: 5px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.column i {
  font-size: 40px;
  color: #007acc;
  margin-bottom: 10px;
}
/* 🔹 Estilização do Botão */
.btn-ttn-bt {
  background-color: red; /* 🔴 Cor de fundo vermelha */
  color: white; /* 🔹 Texto branco */
  font-size: 14px; /* 🔹 Tamanho pequeno */
  font-weight: bold;
  border: none;
  border-bottom: 3px solid green; /* 🟢 Borda inferior verde */
  padding: 8px 12px;
  border-radius: 5px; /* 🔹 Bordas arredondadas */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center; /* 🔹 Centraliza o conteúdo do botão */
  gap: 5px; /* 🔹 Espaço entre ícone e texto */
  transition: 0.3s ease-in-out;
  margin-top: auto; /* 🔹 Mantém o botão sempre no final da coluna */
}

/* 🔹 Efeito Hover */
.btn-ttn-bt:hover {
  background-color: darkred; /* 🔴 Tom mais escuro ao passar o mouse */
  transform: scale(1.05); /* 🔹 Leve aumento no botão */
}

/* 🔹 Ícone dentro do botão */
.btn-ttn-bt i {
  font-size: 16px;
}

@media (max-width: 1024px) {
  .column {
      flex: 1 1 calc(50% - 20px);
  }
}
@media (max-width: 768px) {
  .column {
      flex: 1 1 100%;
  }
}
.lucas-santana {
  max-width: 800px; /* Limita a largura máxima do conteúdo */
  margin: 0 auto; /* Centraliza o conteúdo */
  font-size: 22px; /* Fonte maior */
  font-weight: bold; /* Letras mais largas */
  line-height: 1.6; /* Espaçamento entre as linhas */
  text-align: justify; /* Justifica o texto */
  padding-left: 10px;
  padding-right: 10px;
  color: #0c0d0e;
}

/* Ajuste para telas menores (Mobile) */
@media (max-width: 768px) {
  .lucas-santana {
      max-width: 100%; /* Ocupa toda a largura no celular */
      padding-left: 0;
      padding-right: 0;
  }
}
.klsd-ds {
  display: block;
  margin: 10px auto; /* Margem para espaçamento e centraliza na horizontal */
  background-color: red; /* Fundo vermelho */
  color: white; /* Texto branco */
  font-size: 12px; /* Tamanho pequeno */
  padding: 5px 10px; /* Pequeno espaçamento */
  border: none; /* Remove bordas padrão */
  border-bottom: 2px solid white; /* Borda inferior branca */
  text-decoration: none; /* Remove sublinhado do link */
  cursor: pointer; /* Cursor de clique */
  transition: 0.3s ease-in-out;
  text-align: center; /* Garante que o texto fique centralizado */
}

.klsd-ds:hover {
  opacity: 0.8; /* Efeito ao passar o mouse */
}
.hujn-rt {
  text-align: center;
  padding: 20px;
}

.hujn-rt h2 {
  font-size: 24px;  
  margin-bottom: 20px;  
  color: #0c0c0c;  
  position: relative;  
  top: -40px; /* Ajuste esse valor para subir mais ou menos */
}


.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.service-item {
  background: #fff;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(253, 253, 253, 0.1);
  padding: 10px;
}

.service-item a {
  display: block;
  text-decoration: none;
}

.service-item img {
  width: 100%; /* Responsivo - ocupa toda a largura do contêiner */
  max-width: 250px; /* Máximo de 300px */
  height: 150px; /* Altura automática para manter proporção */
  object-fit: cover; /* Ajusta a imagem sem distorcer */
  border-radius: 8px;
  transition: transform 0.3s ease-in-out;
}

.service-item img:hover {
  transform: scale(1.05);
}

.service-item p {
  font-size: 16px;
  font-weight: bold;
  margin-top: 10px;
  color: #333;
}

/* Torna as imagens responsivas em telas menores */
@media screen and (max-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  .service-item img {
    max-width: 100%; /* Para garantir que ajuste bem em telas menores */
  }
}
.rdfr-rr {
  width: 100%; /* Responsivo - ocupa toda a largura do contêiner */
  max-width: 600px; /* Máximo de 600px para não expandir demais */
  height: auto; /* Mantém a proporção correta */
  object-fit: cover; /* Ajusta a imagem sem distorcer */
  border-radius: 8px; /* Cantos arredondados para um design moderno */
  display: block;
  margin: 10px auto; /* Centraliza a imagem */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Adiciona uma sombra para destaque */
  transition: transform 0.3s ease-in-out;
}

.rdfr-rr:hover {
  transform: scale(1.05); /* Efeito de leve aumento ao passar o mouse */
}

/* Responsividade para telas menores */
@media screen and (max-width: 768px) {
  .rdfr-rr {
    max-width: 100%; /* Ajusta para caber melhor em telas pequenas */
  }
}
/* Menu branco */
.menu {
  color: rgb(255, 255, 255); /* Texto do menu preto */
}

/* Links do menu */
.menu a {
  color: rgb(255, 255, 255); /* Links do menu preto */
  text-decoration: none; /* Remove o sublinhado */
}

.menu a:hover {
  color: gray; /* Cor ao passar o mouse */
}

/* Links do texto (fora do menu) */
p a, .content a {
  color: rgb(0, 0, 0); /* Links do texto em verde */
  text-decoration: none;
}

p a:hover, .content a:hover {
  color: darkgreen; /* Cor mais escura ao passar o mouse */
}
/* Seção principal */
.gorg-blod {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px;
  background-color: #f9f9f9;
  width: 100%;
}

/* Conteúdo textual com largura ajustada para desktop */
.content {
  max-width: 900px;
  width: 100%;
  margin-bottom: 20px;
  padding: 0 20px;
}

/* Estilização dos títulos */
.content h1 {
  font-size: 2.2em;
  color: #0073aa;
  font-weight: bold;
  margin-bottom: 15px;
}

.content h2 {
  font-size: 1.8em;
  color: #004b75;
  margin-top: 20px;
}

.content h3 {
  font-size: 1.5em;
  color: #006699;
  margin-top: 15px;
}

/* Parágrafos */
.content p {
  font-size: 1.2em;
  line-height: 1.8;
  color: #444;
  margin-bottom: 20px;
}

/* Listas */
.content ul, .content ol {
  padding-left: 20px;
  text-align: left;
  display: inline-block;
  width: 100%;
}

.content ul li, .content ol li {
  margin-bottom: 12px;
  font-size: 1.2em;
  color: #333;
}

/* Botão de chamada para ação */
.cta-btn {
  display: inline-block;
  padding: 14px 24px;
  background-color: #0073aa;
  color: #fff;
  text-decoration: none;
  font-size: 1.3em;
  border-radius: 5px;
  margin-top: 20px;
  transition: 0.3s;
}

.cta-btn:hover {
  background-color: #005f8b;
}

/* Imagem centralizada */
.image-container {
  width: 100%;
  text-align: center;
  margin-top: 25px;
}

.image-container img {
  max-width: 95%;
  height: auto;
  border-radius: 10px;
}

/* Responsividade */
@media (max-width: 1024px) {
  .content {
      max-width: 750px;
  }
}

@media (max-width: 768px) {
  .content {
      max-width: 100%;
  }

  .image-container img {
      max-width: 100%;
  }
}

 /* Estiliza o botão fixo do WhatsApp */
 .whatsapp-button {
  position: fixed;
  bottom: 20px; /* Distância do fundo */
  right: 20px; /* Distância da lateral */
  background-color: #25D366; /* Verde chamativo do WhatsApp */
  color: white; /* Texto branco */
  font-size: 18px; /* Tamanho do texto */
  font-weight: bold;
  border: 2px solid #128C7E; /* Borda verde escura */
  border-radius: 50px; /* Deixa o botão meio arredondado */
  padding: 12px 20px; /* Espaçamento interno */
  display: flex;
  align-items: center;
  gap: 8px; /* Espaço entre o ícone e o texto */
  text-decoration: none;
  transition: 0.3s;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* Sombra chamativa */
}

/* Efeito ao passar o mouse */
.whatsapp-button:hover {
  background-color: #128C7E; /* Verde mais escuro */
  border-color: #0e6e63;
  transform: scale(1.05); /* Leve aumento no tamanho */
}

/* Estiliza o ícone */
.whatsapp-button img {
  width: 24px; /* Tamanho do ícone */
  height: 24px;
}
 /* Estilo da seção e container */
 .links-section {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.links-section h2 {
  text-align: center;
  margin-bottom: 20px;
}
/* Grid com 3 colunas */
.links-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}
/* Estilo dos links */
.links-grid a {
  display: block;
  padding: 10px;
  background: #f9f9f9;
  border: 1px solid #ccc;
  text-decoration: none;
  color: #333;
  border-radius: 5px;
  transition: background 0.3s;
}
.links-section h2 {
  text-align: center;
  margin-bottom: 20px;
  color: #fff; /* Texto em branco */
}

.links-grid a:hover {
  background: #eaeaea;
}
/* Responsividade */
@media (max-width: 768px) {
  .links-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .links-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  #floatingContactForm {
    width: calc(100% - 50px) !important;
    right: 10px !important;
    left: 10px !important;
    bottom: 80px !important;
    max-width: none !important;
    padding: 15px !important;
  }
}