/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
  }
  /* Header fixo para desktop */
  header {
    background: #ffffff;
    color: #000000;
    
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
  }
  /* Logo maior */
  .logo img {
    width: 140px;
    height: auto;
  }
  /* Menu Desktop e Botão de Contato */
nav.desktop-menu, .contact-btn.desktop-menu {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Lista principal */
nav.desktop-menu ul {
  list-style: none;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

/* Itens do menu principal */
nav.desktop-menu ul li {
  position: relative;
  margin: 0 15px;
}

/* Links principais */
nav.desktop-menu ul li a {
  color: #000000;
  text-decoration: none;
  padding: 8px 12px;
  transition: background 0.3s;
  white-space: nowrap;
}

/* Hover no link principal */
nav.desktop-menu ul li a:hover {
  background: #333;
  border-radius: 4px;
}

/* Botão de contato */
.contact-btn.desktop-menu {
  background: #028513;
  padding: 10px 15px;
  border-radius: 4px;
  font-size: 1em;
}

.contact-btn.desktop-menu a {
  color: #fff;
  text-decoration: none;
}

/* Submenu */
nav.desktop-menu .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #004080;
  border-radius: 0 0 6px 6px;
  min-width: 220px;
  z-index: 999;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  flex-direction: column;
  padding: 5px 0;
}

/* Itens do submenu */
nav.desktop-menu .submenu li a {
  padding: 10px 16px;
  color: #fff;
  font-size: 0.95rem;
  display: block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: background 0.3s;
}

/* Último item do submenu */
nav.desktop-menu .submenu li:last-child a {
  border-bottom: none;
}

/* Hover no submenu */
nav.desktop-menu .submenu li a:hover {
  background-color: #0066cc;
}

/* Mostrar submenu ao passar o mouse */
nav.desktop-menu .has-submenu:hover .submenu {
  display: flex;
}

  /* Botão de toggle para mobile (hamburger) */
  .menu-toggle.mobile-only {
    font-size: 1.5em;
    cursor: pointer;
    color: #2178fa;
    display: none;
  }
  /* Espaço para compensar o header fixo */
  .header-space {
    height: 80px; /* ajuste conforme a altura do header */
  }
  /* Imagens de cabeçalho para desktop e mobile */
  .header-img {
    width: 100%;
    height: auto;
    display: block;
  }
  .header-img.mobile {
    display: none;
  }
  @media (max-width: 768px) {
    .header-img.desktop {
      display: none;
    }
    .header-img.mobile {
      display: block;
    }
    nav.desktop-menu,
    .contact-btn.desktop-menu {
      display: none;
    }
    .menu-toggle.mobile-only {
      display: block;
    }
  }
  /* Menu Mobile Deslizante */
  .mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 250px;
    height: 100vh;
    background: #000;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .mobile-menu.active {
    transform: translateX(0);
  }
  /* Cabeçalho interno do menu mobile: logo e botão fechar */
  .mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #000;
  }
  .mobile-logo {
    width: 100px;
    height: auto;
  }
  .close-menu {
    background: #a30606;
    color: #fff;
    border: none;
    font-size: 1.5em;
    padding: 5px 10px;
    cursor: pointer;
  }
  /* Itens do menu mobile */
  .mobile-menu ul {
    list-style: none;
    padding: 20px 0;
    text-align: center;
  }
  .mobile-menu ul li {
    margin: 15px 0;
  }
  .mobile-menu ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 1.2em;
  }
  /* Botão WhatsApp no menu mobile */
  .whatsapp-btn {
    background: #25D366;
    text-align: center;
    padding: 10px;
  }
  .whatsapp-btn a {
    color: #fff;
    text-decoration: none;
    font-size: 1em;
    font-weight: bold;
  }
  /* Conteúdo principal */
  main {
    padding: 30px;
  }
  main section {
    margin-bottom: 40px;
  }
  main h1, main h2 {
    margin-bottom: 15px;
  }
  /* Seção de destaque com título e descrição centralizados */
  section#hero {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
  }
  section#hero h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    letter-spacing: 2px;
  }
  section#hero p {
    font-size: 1.2rem;
    margin-bottom: 20px;
    letter-spacing: 1px;
  }
   /* Exibe a seção somente para desktop */
   #video-section {
    display: block;
  }
  @media (max-width: 768px) {
    #video-section {
      display: none;
    }
  }
  /* Estilo base para a seção de tópicos */
#features {
    padding: 60px 20px;
    background: #f9f9f9;
    text-align: center;
  }
  
  /* Container centralizado para desktop, com 3 colunas lado a lado */
  #features .container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 20px;
  }
  
  /* Cada coluna com fundo preto */
  #features .feature-item {
    background-color: #000;
    color: #fff;
    padding: 20px;
    border-radius: 8px;
    flex: 1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: left;
  }
  
  /* Alinha o ícone e o título em uma linha */
  #features .feature-item .header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
  }
  
  /* Ícone pequeno: definido em 20px e alinhado ao centro */
  #features .feature-item .header img {
    width: 80px;  /* Ícone bem pequeno */
    height: auto;
    margin-right: 10px;
  }
  
  /* Título */
  #features .feature-item h3 {
    margin: 0;
    font-size: 1.5rem;
  }
  
  /* Descrição */
  #features .feature-item p {
    font-size: 1rem;
    margin: 10px 0 20px;
    line-height: 1.4;
  }
  
  /* Botão "Saiba Mais" com fundo roxo e borda inferior branca */
  #features .feature-item .btn {
    display: inline-block;
    background: #6a0dad; /* Fundo roxo */
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.3s;
    border-bottom: 3px solid #fff; /* Borda inferior branca */
  }
  
  /* Hover para o botão */
  #features .feature-item .btn:hover {
    background: #5a009d;
  }
  
  /* Responsividade: para celular, as colunas ficam separadas e ocupam 100% da largura */
  @media (max-width: 768px) {
    #features .container {
      flex-direction: column;
    }
    #features .feature-item {
      width: 100%;
      margin-bottom: 20px;
    }
  }
  /* Estilo para a seção "Sobre a Desentupidora Do Seu Bairro São Paulo" */
#about {
    padding: 60px 20px;
    background: #0b8bc7;
    text-align: left;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  #about h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 40px;
    color: #ffffff;
  }
  
  /* Container para alinhar a imagem e o conteúdo lado a lado */
  .about-container {
    display: flex;
    gap: 30px;
    align-items: flex-start;
  }
  
  /* Imagem à esquerda */
  .about-image {
    flex: 1;
  }
  .about-image img {
    width: 100%;
    max-width: 400px; /* ajuste conforme necessário */
    border-radius: 8px;
  }
  
  /* Conteúdo à direita */
  .about-content {
    flex: 2;
    font-size: 1rem;
    line-height: 1.6;
    color: #ffffff;
  }
  
  /* Botão "Saiba Mais" abaixo do conteúdo */
  .about-button {
    text-align: center;
    margin-top: 30px;
  }
  .about-button .btn {
    display: inline-block;
    background: #6a0dad;
    color: #fff;
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.3s;
    border-bottom: 3px solid #fff;
  }
  .about-button .btn:hover {
    background: #5a009d;
  }
  
  /* Responsividade: em telas menores, as colunas se empilham */
  @media (max-width: 768px) {
    .about-container {
      flex-direction: column;
    }
    .about-image,
    .about-content {
      width: 100%;
    }
    .about-image img {
      max-width: 100%;
    }
  }
  /* Seção de serviços */
#services {
    padding: 60px 20px;
    background: #fff;
    text-align: center;
  }
  
  /* Container com grid de 4 colunas para desktop */
  #services .container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  
  /* Estilo para cada item de serviço */
  #services .service-item {
    background: #f0f0f0;
    padding: 20px;
    border-radius: 8px;
    transition: transform 0.3s;
    text-align: left;
  }
  
  #services .service-item:hover {
    transform: translateY(-5px);
  }
  
  /* Ícone: pequeno, centralizado acima do título */
  #services .service-item img {
    width: 100%;
    max-width: 350px; /* ajuste conforme necessário */
    display: block;
    margin: 0 auto 15px auto;
  }
  
  /* Título do serviço */
  #services .service-item h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
  }
  
  /* Link no título */
  #services .service-item h3 a {
    color: #333;
    text-decoration: none;
  }
  
  /* Descrição do serviço */
  #services .service-item p {
    font-size: 0.9rem;
    margin-bottom: 15px;
    color: #666;
  }
  
  /* Link nos textos (se desejar estilizar links dentro dos parágrafos) */
  #services .service-item p a {
    color: #6a0dad;
    text-decoration: none;
    font-weight: bold;
  }
  
  /* Responsividade: 2 colunas em tablets */
  @media (max-width: 1024px) {
    #services .container {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  /* Responsividade: 1 coluna em celulares */
  @media (max-width: 768px) {
    #services .container {
      grid-template-columns: 1fr;
    }
  }
  /* Seção de Desentupidora de Esgoto em São Paulo */
#desentupidora-esgoto {
    padding: 60px 20px;
    background: #f9f9f9;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  #desentupidora-esgoto h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 30px;
    color: #333;
  }
  
  /* Container com layout em duas colunas para desktop */
  #desentupidora-esgoto .container {
    display: flex;
    gap: 30px;
    align-items: flex-start;
  }
  
  /* Coluna da imagem (esquerda) */
  #desentupidora-esgoto .image {
    flex: 1;
  }
  #desentupidora-esgoto .image img {
    width: 100%;
    max-width: 400px;
    border-radius: 8px;
  }
  
  /* Coluna do conteúdo (direita) */
  #desentupidora-esgoto .content {
    flex: 2;
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
  }
  
  /* Botão "Saiba Mais" centralizado abaixo do conteúdo */
  #desentupidora-esgoto .about-button {
    text-align: center;
    margin-top: 30px;
  }
  #desentupidora-esgoto .about-button .btn {
    display: inline-block;
    background: #6a0dad;
    color: #fff;
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.3s;
    border-bottom: 3px solid #fff;
  }
  #desentupidora-esgoto .about-button .btn:hover {
    background: #5a009d;
  }
  
  /* Responsividade: empilha as colunas em dispositivos móveis */
  @media (max-width: 768px) {
    #desentupidora-esgoto .container {
      flex-direction: column;
    }
    #desentupidora-esgoto .image,
    #desentupidora-esgoto .content {
      width: 100%;
    }
    #desentupidora-esgoto .image img {
      max-width: 100%;
    }
  }
  /* Seção "Desentupidora de Vaso Sanitário em São Paulo" */
#about-vaso {
    padding: 60px 20px;
    background: #f2f2f2;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  #about-vaso .container {
    display: flex;
    align-items: center;
    gap: 30px;
  }
  
  #about-vaso .content {
    flex: 2;
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
  }
  
  #about-vaso .content h2 {
    font-size: 2rem;
    margin-bottom: 20px;
  }
  
  #about-vaso .content p {
    margin-bottom: 20px;
  }
  
  #about-vaso .button-container {
    text-align: center;
    margin-top: 20px;
  }
  
  #about-vaso .btn {
    background: #6a0dad;
    color: #fff;
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 4px;
    border-bottom: 3px solid #fff;
    transition: background 0.3s;
  }
  
  #about-vaso .btn:hover {
    background: #5a009d;
  }
  
  #about-vaso .image {
    flex: 1;
  }
  
  #about-vaso .image img {
    width: 100%;
    max-width: 400px;
    border-radius: 8px;
  }
  
  /* Responsividade: empilha as colunas em dispositivos móveis */
  @media (max-width: 768px) {
    #about-vaso .container {
      flex-direction: column;
    }
    #about-vaso .image,
    #about-vaso .content {
      width: 100%;
    }
    #about-vaso .image img {
      max-width: 100%;
    }
  }
  /* Seção "Desentupidora de Pia em São Paulo" */
#about-pia {
    padding: 60px 20px;
    background: #f2f2f2;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  #about-pia .container {
    display: flex;
    gap: 30px;
    align-items: center;
  }
  
  /* Coluna da imagem (à esquerda) */
  #about-pia .image {
    flex: 1;
  }
  #about-pia .image img {
    width: 100%;
    max-width: 400px;
    border-radius: 8px;
  }
  
  /* Coluna do conteúdo (à direita) */
  #about-pia .content {
    flex: 2;
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
  }
  
  #about-pia .content h2 {
    font-size: 2rem;
    margin-bottom: 20px;
  }
  
  #about-pia .content p {
    margin-bottom: 20px;
  }
  
  /* Botão "Saiba Mais" */
  #about-pia .button-container {
    text-align: center;
    margin-top: 20px;
  }
  #about-pia .btn {
    display: inline-block;
    background: #6a0dad;
    color: #fff;
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.3s;
    border-bottom: 3px solid #fff;
  }
  #about-pia .btn:hover {
    background: #5a009d;
  }
  
  /* Responsividade: empilha as colunas em dispositivos móveis */
  @media (max-width: 768px) {
    #about-pia .container {
      flex-direction: column;
    }
    #about-pia .image,
    #about-pia .content {
      width: 100%;
    }
    #about-pia .image img {
      max-width: 100%;
    }
  }
  /* Seção "Desentupidora de Ralo em São Paulo" */
#about-ralo {
    padding: 60px 20px;
    background: #f2f2f2;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  #about-ralo .container {
    display: flex;
    gap: 30px;
    align-items: center;
  }
  
  /* Coluna do conteúdo (à esquerda) */
  #about-ralo .content {
    flex: 2;
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
  }
  
  #about-ralo .content h2 {
    font-size: 2rem;
    margin-bottom: 20px;
  }
  
  #about-ralo .content p {
    margin-bottom: 20px;
  }
  
  /* Botão "Saiba Mais" */
  #about-ralo .button-container {
    text-align: center;
    margin-top: 20px;
  }
  #about-ralo .btn {
    display: inline-block;
    background: #6a0dad;
    color: #fff;
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.3s;
    border-bottom: 3px solid #fff;
  }
  #about-ralo .btn:hover {
    background: #5a009d;
  }
  
  /* Coluna da imagem (à direita) */
  #about-ralo .image {
    flex: 1;
  }
  #about-ralo .image img {
    width: 100%;
    max-width: 400px;
    border-radius: 8px;
  }
  
  /* Responsividade: empilha as colunas em dispositivos móveis */
  @media (max-width: 768px) {
    #about-ralo .container {
      flex-direction: column;
    }
    #about-ralo .content,
    #about-ralo .image {
      width: 100%;
    }
    #about-ralo .image img {
      max-width: 100%;
    }
  }
  /* Seção "Desentupidora de Caixa de Esgoto em São Paulo" */
#about-caixa {
  padding: 60px 20px;
  background: #f2f2f2;
  max-width: 1200px;
  margin: 0 auto;
}

#about-caixa .container {
  display: flex;
  gap: 30px;
  align-items: center;
}

/* Coluna da imagem (à esquerda) */
#about-caixa .image {
  flex: 1;
}
#about-caixa .image img {
  width: 100%;
  max-width: 400px;
  border-radius: 8px;
}

/* Coluna do conteúdo (à direita) */
#about-caixa .content {
  flex: 2;
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}
#about-caixa .content h2 {
  font-size: 2rem;
  margin-bottom: 20px;
}
#about-caixa .content p {
  margin-bottom: 20px;
}

/* Botão "Saiba Mais" */
#about-caixa .button-container {
  text-align: center;
  margin-top: 20px;
}
#about-caixa .btn {
  display: inline-block;
  background: #6a0dad;
  color: #fff;
  padding: 12px 25px;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.3s;
  border-bottom: 3px solid #fff;
}
#about-caixa .btn:hover {
  background: #5a009d;
}

/* Responsividade: empilha as colunas em dispositivos móveis */
@media (max-width: 768px) {
  #about-caixa .container {
    flex-direction: column;
  }
  #about-caixa .image,
  #about-caixa .content {
    width: 100%;
  }
  #about-caixa .image img {
    max-width: 100%;
  }
}
/* Seção "Desentupidora de Caixa de Gordura em São Paulo" */
#about-caixa-gordura {
  padding: 60px 20px;
  background: #f2f2f2;
  max-width: 1200px;
  margin: 0 auto;
}

#about-caixa-gordura .container {
  display: flex;
  gap: 30px;
  align-items: center;
}

/* Coluna do conteúdo (à esquerda) */
#about-caixa-gordura .content {
  flex: 2;
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}
#about-caixa-gordura .content h2 {
  font-size: 2rem;
  margin-bottom: 20px;
}
#about-caixa-gordura .content p {
  margin-bottom: 20px;
}

/* Botão "Saiba Mais" */
#about-caixa-gordura .button-container {
  text-align: center;
  margin-top: 20px;
}
#about-caixa-gordura .btn {
  display: inline-block;
  background: #6a0dad;
  color: #fff;
  padding: 12px 25px;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.3s;
  border-bottom: 3px solid #fff;
}
#about-caixa-gordura .btn:hover {
  background: #5a009d;
}

/* Coluna da imagem (à direita) */
#about-caixa-gordura .image {
  flex: 1;
}
#about-caixa-gordura .image img {
  width: 100%;
  max-width: 400px;
  border-radius: 8px;
}

/* Responsividade: empilha as colunas em dispositivos móveis */
@media (max-width: 768px) {
  #about-caixa-gordura .container {
    flex-direction: column;
  }
  #about-caixa-gordura .content,
  #about-caixa-gordura .image {
    width: 100%;
  }
  #about-caixa-gordura .image img {
    max-width: 100%;
  }
}
/* Seção "Desentupidora de Coluna em São Paulo" */
#about-coluna {
  padding: 60px 20px;
  background: #f2f2f2;
  max-width: 1200px;
  margin: 0 auto;
}

#about-coluna .container {
  display: flex;
  gap: 30px;
  align-items: center;
}

/* Coluna da imagem (à esquerda) */
#about-coluna .image {
  flex: 1;
}
#about-coluna .image img {
  width: 100%;
  max-width: 400px;
  border-radius: 8px;
}

/* Coluna do conteúdo (à direita) */
#about-coluna .content {
  flex: 2;
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}
#about-coluna .content h2 {
  font-size: 2rem;
  margin-bottom: 20px;
}
#about-coluna .content p {
  margin-bottom: 20px;
}

/* Botão "Saiba Mais" */
#about-coluna .button-container {
  text-align: center;
  margin-top: 20px;
}
#about-coluna .btn {
  display: inline-block;
  background: #6a0dad;
  color: #fff;
  padding: 12px 25px;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.3s;
  border-bottom: 3px solid #fff;
}
#about-coluna .btn:hover {
  background: #5a009d;
}

/* Responsividade: empilha as colunas em dispositivos móveis */
@media (max-width: 768px) {
  #about-coluna .container {
    flex-direction: column;
  }
  #about-coluna .image,
  #about-coluna .content {
    width: 100%;
  }
  #about-coluna .image img {
    max-width: 100%;
  }
}
/* Seção "Desentupidora de Canduite em São Paulo" */
#about-canduite {
  padding: 60px 20px;
  background: #f2f2f2;
  max-width: 1200px;
  margin: 0 auto;
}

#about-canduite .container {
  display: flex;
  gap: 30px;
  align-items: center;
}

/* Coluna do conteúdo (à esquerda) */
#about-canduite .content {
  flex: 2;
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}
#about-canduite .content h2 {
  font-size: 2rem;
  margin-bottom: 20px;
}
#about-canduite .content p {
  margin-bottom: 20px;
}

/* Botão "Saiba Mais" */
#about-canduite .button-container {
  text-align: center;
  margin-top: 20px;
}
#about-canduite .btn {
  display: inline-block;
  background: #6a0dad;
  color: #fff;
  padding: 12px 25px;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.3s;
  border-bottom: 3px solid #fff;
}
#about-canduite .btn:hover {
  background: #5a009d;
}

/* Coluna da imagem (à direita) */
#about-canduite .image {
  flex: 1;
}
#about-canduite .image img {
  width: 100%;
  max-width: 400px;
  border-radius: 8px;
}

/* Responsividade: empilha as colunas em dispositivos móveis */
@media (max-width: 768px) {
  #about-canduite .container {
    flex-direction: column;
  }
  #about-canduite .content,
  #about-canduite .image {
    width: 100%;
  }
  #about-canduite .image img {
    max-width: 100%;
  }
}
/* Seção "Limpeza de Fossa em São Paulo" */
#about-fossa {
  padding: 60px 20px;
  background: #f2f2f2;
  max-width: 1200px;
  margin: 0 auto;
}

#about-fossa .container {
  display: flex;
  gap: 30px;
  align-items: center;
}

/* Coluna da imagem (à esquerda) */
#about-fossa .image {
  flex: 1;
}
#about-fossa .image img {
  width: 100%;
  max-width: 400px;
  border-radius: 8px;
}

/* Coluna do conteúdo (à direita) */
#about-fossa .content {
  flex: 2;
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}
#about-fossa .content h2 {
  font-size: 2rem;
  margin-bottom: 20px;
}
#about-fossa .content p {
  margin-bottom: 20px;
}

/* Botão "Saiba Mais" */
#about-fossa .button-container {
  text-align: center;
  margin-top: 20px;
}
#about-fossa .btn {
  display: inline-block;
  background: #6a0dad;
  color: #fff;
  padding: 12px 25px;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.3s;
  border-bottom: 3px solid #fff;
}
#about-fossa .btn:hover {
  background: #5a009d;
}

/* Responsividade: empilha as colunas em dispositivos móveis */
@media (max-width: 768px) {
  #about-fossa .container {
    flex-direction: column;
  }
  #about-fossa .image,
  #about-fossa .content {
    width: 100%;
  }
  #about-fossa .image img {
    max-width: 100%;
  }
}
/* Seção "Hidrojateamento de Esgoto em São Paulo" */
#about-hidrojateamento {
  padding: 60px 20px;
  background: #f2f2f2;
  max-width: 1200px;
  margin: 0 auto;
}

#about-hidrojateamento .container {
  display: flex;
  gap: 30px;
  align-items: center;
}

/* Coluna do conteúdo (à esquerda) */
#about-hidrojateamento .content {
  flex: 2;
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}

#about-hidrojateamento .content h2 {
  font-size: 2rem;
  margin-bottom: 20px;
}

#about-hidrojateamento .content p {
  margin-bottom: 20px;
}

/* Botão "Saiba Mais" */
#about-hidrojateamento .button-container {
  text-align: center;
  margin-top: 20px;
}

#about-hidrojateamento .btn {
  display: inline-block;
  background: #6a0dad;
  color: #fff;
  padding: 12px 25px;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.3s;
  border-bottom: 3px solid #fff;
}

#about-hidrojateamento .btn:hover {
  background: #5a009d;
}

/* Coluna da imagem (à direita) */
#about-hidrojateamento .image {
  flex: 1;
}

#about-hidrojateamento .image img {
  width: 100%;
  max-width: 400px;
  border-radius: 8px;
}

/* Responsividade: empilha as colunas em dispositivos móveis */
@media (max-width: 768px) {
  #about-hidrojateamento .container {
    flex-direction: column;
  }
  #about-hidrojateamento .content,
  #about-hidrojateamento .image {
    width: 100%;
  }
  #about-hidrojateamento .image img {
    max-width: 100%;
  }
}
/* Seção "Desentupidora de Rede Fluvial em São Paulo" */
#about-fluvial {
  padding: 60px 20px;
  background: #f2f2f2;
  max-width: 1200px;
  margin: 0 auto;
}

#about-fluvial .container {
  display: flex;
  gap: 30px;
  align-items: center;
}

/* Coluna da imagem (à esquerda) */
#about-fluvial .image {
  flex: 1;
}
#about-fluvial .image img {
  width: 100%;
  max-width: 400px;
  border-radius: 8px;
}

/* Coluna do conteúdo (à direita) */
#about-fluvial .content {
  flex: 2;
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}
#about-fluvial .content h2 {
  font-size: 2rem;
  margin-bottom: 20px;
}
#about-fluvial .content p {
  margin-bottom: 20px;
}

/* Botão "Saiba Mais" */
#about-fluvial .button-container {
  text-align: center;
  margin-top: 20px;
}
#about-fluvial .btn {
  display: inline-block;
  background: #6a0dad;
  color: #fff;
  padding: 12px 25px;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.3s;
  border-bottom: 3px solid #fff;
}
#about-fluvial .btn:hover {
  background: #5a009d;
}

/* Responsividade: empilha as colunas em dispositivos móveis */
@media (max-width: 768px) {
  #about-fluvial .container {
    flex-direction: column;
  }
  #about-fluvial .image,
  #about-fluvial .content {
    width: 100%;
  }
  #about-fluvial .image img {
    max-width: 100%;
  }
}
/* Seção de dicas sobre esgoto */
#dicas-esgoto {
  padding: 60px 20px;
  background: #f9f9f9;
  max-width: 1200px;
  margin: 0 auto;
}

#dicas-esgoto .container {
  display: flex;
  gap: 30px;
  align-items: center;
}

/* Coluna do conteúdo (à esquerda) */
#dicas-esgoto .content {
  flex: 2;
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}
#dicas-esgoto .content h2 {
  font-size: 2rem;
  margin-bottom: 20px;
}
#dicas-esgoto .content p {
  margin-bottom: 20px;
}

/* Botão "Saiba Mais" */
#dicas-esgoto .button-container {
  text-align: center;
  margin-top: 20px;
}
#dicas-esgoto .btn {
  display: inline-block;
  background: #6a0dad;
  color: #fff;
  padding: 12px 25px;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.3s;
  border-bottom: 3px solid #fff;
}
#dicas-esgoto .btn:hover {
  background: #5a009d;
}

/* Coluna da imagem (à direita) */
#dicas-esgoto .image {
  flex: 1;
}
#dicas-esgoto .image img {
  width: 100%;
  max-width: 400px;
  border-radius: 8px;
}

/* Responsividade: empilha as colunas em dispositivos móveis */
@media (max-width: 768px) {
  #dicas-esgoto .container {
    flex-direction: column;
  }
  #dicas-esgoto .content,
  #dicas-esgoto .image {
    width: 100%;
  }
  #dicas-esgoto .image img {
    max-width: 100%;
  }
}
/* Seção "Dicas Essenciais para Manutenção de Pia" */
#dicas-pia {
  padding: 60px 20px;
  background: #f9f9f9;
  max-width: 1200px;
  margin: 0 auto;
}

#dicas-pia .container {
  display: flex;
  gap: 30px;
  align-items: center;
}

/* Coluna da imagem (à esquerda) */
#dicas-pia .image {
  flex: 1;
}
#dicas-pia .image img {
  width: 100%;
  max-width: 400px;
  border-radius: 8px;
}

/* Coluna do conteúdo (à direita) */
#dicas-pia .content {
  flex: 2;
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}
#dicas-pia .content h2 {
  font-size: 2rem;
  margin-bottom: 20px;
}
#dicas-pia .content p {
  margin-bottom: 20px;
}

/* Botão "Saiba Mais" */
#dicas-pia .button-container {
  text-align: center;
  margin-top: 20px;
}
#dicas-pia .btn {
  display: inline-block;
  background: #6a0dad;
  color: #fff;
  padding: 12px 25px;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.3s;
  border-bottom: 3px solid #fff;
}
#dicas-pia .btn:hover {
  background: #5a009d;
}

/* Responsividade: empilha as colunas em dispositivos móveis */
@media (max-width: 768px) {
  #dicas-pia .container {
    flex-direction: column;
  }
  #dicas-pia .image,
  #dicas-pia .content {
    width: 100%;
  }
  #dicas-pia .image img {
    max-width: 100%;
  }
}
/* Seção "Dicas Essenciais para Desentupir seu Vaso Sanitário" */
#dicas-vaso {
  padding: 80px 40px;
  background: #f7f7f7;
  max-width: 1200px;
  margin: 0 auto;
}

#dicas-vaso .container {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

/* Coluna da imagem (à esquerda) */
#dicas-vaso .image {
  flex: 1;
}
#dicas-vaso .image img {
  width: 100%;
  max-width: 300px;
  border-radius: 8px;
}

/* Coluna do conteúdo (à direita) */
#dicas-vaso .content {
  flex: 2;
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}
#dicas-vaso .content h2 {
  font-size: 2.2rem;
  margin-bottom: 20px;
  color: #222;
}
#dicas-vaso .content p {
  margin-bottom: 20px;
}
#dicas-vaso .content ul {
  list-style: disc;
  margin-left: 20px;
  margin-bottom: 20px;
}
#dicas-vaso .content ul li {
  margin-bottom: 10px;
}

/* Responsividade: empilha as colunas em dispositivos móveis */
@media (max-width: 768px) {
  #dicas-vaso .container {
    flex-direction: column;
  }
  #dicas-vaso .image,
  #dicas-vaso .content {
    width: 100%;
  }
  #dicas-vaso .image img {
    max-width: 100%;
  }
}
/* Seção FAQ com fundo preto */
#faq {
  background: #18bff1;
  color: #fff;
  padding: 40px 20px;
  max-width: 1200px;
  margin: 0 auto;
}
element.style {
  background: #b62020;
  color: #fff;
}


#faq h2 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 30px;
  color: #ffffff; /* Título em rosa */
}

.faq-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.faq-item {
  border-bottom: 1px solid #444;
  padding: 15px 0;
  cursor: pointer;
}

.faq-item .question {
  font-size: 1.2rem;
  font-weight: bold;
  position: relative;
  padding-right: 20px;
}

.faq-item .question::after {
  content: '+';
  position: absolute;
  right: 0;
  font-size: 1.5rem;
  transition: transform 0.3s;
}

.faq-item .answer {
  display: none;
  margin-top: 10px;
  font-size: 1rem;
  line-height: 1.6;
}

.faq-item.active .answer {
  display: block;
}

.faq-item.active .question::after {
  content: '-';
  transform: rotate(180deg);
}

/* Responsividade: ajustar tamanhos em dispositivos menores */
@media (max-width: 768px) {
  #faq h2 {
    font-size: 2rem;
  }
  .faq-item .question {
    font-size: 1rem;
  }
  .faq-item .answer {
    font-size: 0.9rem;
  }
}
/* Seção de Depoimentos */
#testimonials {
  padding: 60px 20px;
  background: #f9f9f9;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

#testimonials .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

#testimonials .testimonial {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#testimonials .stars {
  font-size: 1.5rem;
  color: #f1c40f; /* Cor dourada para as estrelas */
  margin-bottom: 15px;
}

#testimonials .testimonial p {
  font-size: 1rem;
  margin-bottom: 15px;
  color: #555;
}

#testimonials .testimonial h4 {
  font-size: 1.1rem;
  font-weight: bold;
  margin: 0;
  color: #333;
}

/* Responsividade: empilha as colunas em dispositivos móveis */
@media (max-width: 768px) {
  #testimonials .container {
    grid-template-columns: 1fr;
  }
}
/* Seção do Blog */
#blog {
  padding: 60px 20px;
  background: #0aabeb;
  color: #fff;
}

#blog .container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

#blog .blog-item {
  background: #fdf7f7;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
}

#blog .blog-item img {
  width: 100%;
  display: block;
}

#blog .blog-info {
  padding: 15px;
  text-align: left;
}

#blog .blog-category {
  display: inline-block;
  background: red;
  color: #fff;
  padding: 3px 8px;
  font-size: 0.8rem;
  border-radius: 4px;
  margin-bottom: 10px;
}

#blog .blog-title {
  font-size: 1.5rem;
  margin: 10px 0;
  color: #2589e7; /* Rosa escuro */
}

#blog .blog-summary {
  font-size: 1rem;
  margin-bottom: 15px;
  color: #131212;
}

#blog .btn {
  display: inline-block;
  background: #6a0dad;
  color: #fff;
  padding: 8px 15px;
  text-decoration: none;
  font-size: 0.9rem;
  border-radius: 4px;
  border-bottom: 2px solid #fff;
  transition: background 0.3s;
}

#blog .btn:hover {
  background: #5a009d;
}

/* Responsividade: 2 colunas para tablets e 1 coluna para celulares */
@media (max-width: 1024px) {
  #blog .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  #blog .container {
    grid-template-columns: 1fr;
  }
}
.share-section {
  padding: 20px;
  text-align: center;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.share-section h2 {
  font-size: 1.5rem;
  margin-bottom: 15px;
  color: #333;
}

.share-section a {
  margin: 5px;
  display: inline-block;
}

.share-section img {
  width: 40px;
  height: 40px;
  transition: transform 0.3s ease;
}

.share-section img:hover {
  transform: scale(1.2);
}

@media (max-width: 600px) {
  .share-section {
      padding: 15px;
  }

  .share-section img {
      width: 35px;
      height: 35px;
  }
}
.share-section {
  background-color: #f7f7f7;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
}

.share-section h2 {
  color: #333;
  margin-bottom: 15px;
  font-family: Arial, sans-serif;
}

.share-section .icons a {
  display: inline-block;
  margin: 5px;
  transition: transform 0.3s;
}

.share-section .icons a:hover {
  transform: scale(1.2);
}

.share-section img {
  width: 40px;
  height: 40px;
}

.footer-section {
  background: linear-gradient(135deg, #000000, #2abae6);
  color: #ffffff;
  padding: 40px 20px;
  text-align: center;
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.footer-logo {
  width: 120px;
}

.footer-info h3 {
  margin-bottom: 10px;
}

.footer-info p {
  margin-bottom: 15px;
}

.footer-links a {
  color: #d41717;
  text-decoration: none;
  margin: 0 10px;
  transition: color 0.3s;
}

.footer-links a:hover {
  color: #d4b8ff;
}

.footer-contact p {
  margin: 5px 0;
}

.footer-copy {
  margin-top: 20px;
  font-size: 0.9rem;
  opacity: 0.8;
}

@media screen and (max-width: 600px) {
  .share-section {
    padding: 15px;
  }

  .share-section img {
    width: 35px;
    height: 35px;
  }

  .footer-content {
    gap: 15px;
  }

  .footer-links a {
    display: block;
    margin: 5px 0;
  }
}
/* Links brancos padrão */
a {
  color: #d11111;
  text-decoration: none;
  transition: color 0.3s ease;
}

/* Links brancos ao passar o mouse */
a:hover {
  color: #000000; /* ou mantenha branco se quiser sem variação */
  text-decoration: underline;
}
#hero p {
  font-size: 1.25rem;               /* Letras maiores */
  line-height: 1.8;                 /* Espaçamento entre linhas */
  letter-spacing: 0.8px;            /* Espaço entre letras */
  max-width: 900px;                 /* Mesma largura do H1 */
  margin: 0 auto;                   /* Centralizado */
  font-family: 'Segoe UI', sans-serif; /* Fonte moderna e agradável */
  color: #020101;                   /* Cor branca para contraste */
  font-weight: 300;                 /* Letras leves e elegantes */
}
#service-summary {
  max-width: 100%;
  margin: 20px auto;
  border: 1px solid #ffffff;
  border-radius: 8px;
  overflow: hidden;
  background-color: #f9f9f9;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

#toggle-summary {
  padding: 15px;
  font-weight: 50;
  background-color: #000000;
  color: #fff;
  cursor: pointer;
  text-align: left;
}

#toggle-summary:hover {
  background-color: #0056b3;
}

.summary-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  padding: 0 15px;
}

#service-summary.open .summary-content {
  max-height: 1000px; /* valor alto para acomodar todos os links */
  padding: 15px;
}

#service-summary ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#service-summary li {
  margin: 8px 0;
}

#service-summary a {
  color: #007BFF;
  text-decoration: none;
  font-weight: 500;
  display: block;
}

#service-summary a:hover {
  text-decoration: underline;
}

@media (max-width: 600px) {
  #toggle-summary {
    font-size: 1rem;
    padding: 12px;
  }

  #service-summary a {
    font-size: 0.95rem;
  }
}
nav.desktop-menu .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #004080;
  border-radius: 0 0 6px 6px;
  min-width: 220px;
  z-index: 999;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  flex-direction: column;
  padding: 5px 0;
}

nav.desktop-menu .submenu.open {
  display: flex;
}
/* CSS */
.rnbnh-ijh {
  padding: 60px 20px;
  background: #f9f9f9;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.rnbnh-ijh .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}
.rnbnh-ijh .image {
  flex: 1 1 40%;
}
.rnbnh-ijh .image img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.rnbnh-ijh .content {
  flex: 1 1 50%;
  color: #222;
}
.rnbnh-ijh .content h1,
.rnbnh-ijh .content h2,
.rnbnh-ijh .content h3,
.rnbnh-ijh .content h4,
.rnbnh-ijh .content h5,
.rnbnh-ijh .content h6 {
  color: #007BFF;
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.rnbnh-ijh .content p {
  font-size: 1.2rem;
  line-height: 1.8;
  margin-bottom: 20px;
  color: #444;
}

/* Responsivo */
@media (max-width: 768px) {
  .rnbnh-ijh .container {
    flex-direction: column;
    text-align: center;
  }
  .rnbnh-ijh .content h2 {
    font-size: 2rem;
  }
  .rnbnh-ijh .content p {
    font-size: 1.1rem;
  }
}
/* Mantém o estilo principal */
.rnbnh-ijh {
  padding: 60px 20px;
  background: #ffffff;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.rnbnh-ijh .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}
.rnbnh-ijh .image {
  flex: 1 1 40%;
}
.rnbnh-ijh .image img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.rnbnh-ijh .content {
  flex: 1 1 50%;
  color: #222;
}
.rnbnh-ijh .content h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: #007BFF;
}
.rnbnh-ijh .content p {
  font-size: 1.2rem;
  line-height: 1.8;
  margin-bottom: 20px;
  color: #444;
}

/* Layout invertido */
.rnbnh-ijh .container.reverse {
  flex-direction: row-reverse;
}

/* Responsivo */
@media (max-width: 768px) {
  .rnbnh-ijh .container,
  .rnbnh-ijh .container.reverse {
    flex-direction: column;
    text-align: center;
  }
  .rnbnh-ijh .content h2 {
    font-size: 2rem;
  }
  .rnbnh-ijh .content p {
    font-size: 1.1rem;
  }
}
.blog-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.blog-menu li {
  margin-bottom: 10px;
}

.blog-menu a {
  text-decoration: none;
  color: #0074cc;
  font-weight: 500;
}

.blog-menu a:hover {
  text-decoration: underline;
}
.rdsp-est {
  background-color: #f8f9fa;
  padding: 50px 20px;
  font-family: Arial, sans-serif;
}

.rdsp-est .container {
  max-width: 1200px;
  margin: 0 auto;
}

.rdsp-est h1 {
  font-size: 2.2em;
  color: #004d99;
  margin-bottom: 20px;
}

.rdsp-est h2 {
  font-size: 1.8em;
  color: #007acc;
  margin-top: 40px;
  margin-bottom: 15px;
}

.rdsp-est h3 {
  font-size: 1.5em;
  color: #0099cc;
  margin-top: 30px;
  margin-bottom: 10px;
}

.rdsp-est p {
  font-size: 1.05em;
  color: #333;
  line-height: 1.7;
  margin-bottom: 20px;
}

.rdsp-est ul {
  padding-left: 20px;
  margin-bottom: 20px;
}

.rdsp-est ul li {
  margin-bottom: 8px;
}

.rdsp-est img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  margin: 20px 0;
  border-radius: 10px;
}

.rdsp-est a {
  color: #007acc;
  text-decoration: none;
}

.rdsp-est a:hover {
  text-decoration: underline;
}
.dfte-etd {
  background: #f4f8fb;
  padding: 60px 20px;
  font-family: Arial, sans-serif;
}
.sobre-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
}
.sobre-texto {
  flex: 1 1 600px;
}
.sobre-texto h2 {
  font-size: 2.5rem;
  color: #0a3d62;
  margin-bottom: 20px;
}
.sobre-texto p {
  font-size: 1.1rem;
  color: #333;
  line-height: 1.7;
  margin-bottom: 15px;
}
.sobre-imagem {
  flex: 1 1 400px;
  text-align: center;
}
.sobre-imagem img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
}

/* Responsivo */
@media (max-width: 768px) {
  .sobre-container {
    flex-direction: column;
    text-align: center;
  }
  .sobre-texto h2 {
    font-size: 2rem;
  }
  .sobre-texto p {
    font-size: 1rem;
  }
}