body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    line-height: 1.6;
}
header {
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 20px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: #f7e1e68f;
}
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    
    
}
.logo {
    text-align: center;
    padding: 20px 0;
    display: flex;
    align-items: center;
    
}
.logo img {
    max-width: 200px;
    
}


#logounha{
    border-radius: 50%;
    padding: 2%;
}






.hero {
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('./imagens/Captura de pantalla 2025-04-21 053541.png');
    background-size:cover;
    background-position: center;
    color: white;
    text-align: center;
    padding: 200px 50px;
}
.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}
.hero p {
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto 30px;
}
.cta-button {
    display: inline-block;
    background-color: #ff6b6b;
    color: white;
    padding: 12px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s;
}
.cta-button:hover {
    background-color: #ff5252;
}
.benefits {
    padding: 80px 0;
    text-align: center;
}
.benefits h2 {
    font-size: 2rem;
    margin-bottom: 50px;
}
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}
.benefit {
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.testimonials {
    background-color: #f8f9fa;
    padding: 80px 0;
    text-align: center;
}
.video-section {
    padding: 50px 0;
    text-align: center;
}
.video-container {
    max-width: 100%;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
    /* box-shadow: 0 5px; */
    display: flex;
    justify-content: center;
    align-items: center;
}



.video-container p{
    width: 500px;
    padding: 6%;
    font-style: italic;
    color: #333;
}





video {
    width: 100%;
    display: block;
    border-radius: 10px;
}
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 30px 0;
    margin-top: 50px;
}




form {
    display: grid; /* Layout em grade para melhor organização */
    gap: 10px; /* Espaçamento entre os itens da grade */
    max-width: 400px; /* Largura máxima do formulário */
    margin: 20px auto; /* Centralizar o formulário na página */
    padding: 20px;
    border: 1px solid #ccc; /* Borda sutil */
    border-radius: 5px; /* Bordas arredondadas */
    background-color: #f9f9f9; /* Cor de fundo levemente cinza */
  }
  
  label {
    display: block; /* Cada label ocupa uma linha inteira */
    margin-bottom: 5px; /* Espaçamento abaixo do label */
    font-weight: bold; /* Texto do label em negrito para destaque */
  }
  
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea,
  select {
    width: 100%; /* Ocupar toda a largura disponível na célula da grade */
    padding: 10px;
    border: 1px solid #ddd; /* Borda suave nos campos de entrada */
    border-radius: 3px; /* Bordas levemente arredondadas */
    box-sizing: border-box; /* Incluir padding e borda na largura total */
    margin-bottom: 10px; /* Espaçamento abaixo dos campos de entrada */
    font-size: 16px; /* Tamanho da fonte para melhor leitura */
  }
  
  textarea {
    resize: vertical; /* Permitir redimensionamento vertical da textarea */
    min-height: 100px; /* Altura mínima da textarea */
  }
  
  button[type="submit"] {
    background-color: #007bff; /* Cor de fundo azul (cor primária comum) */
    color: white; /* Texto branco */
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer; /* Mudar o cursor ao passar por cima */
    font-size: 16px;
    transition: background-color 0.3s ease; /* Transição suave na cor de fundo */
  }
  
  button[type="submit"]:hover {
    background-color: #0056b3; /* Cor de fundo mais escura no hover */
  }
  
  /* Estilos para campos obrigatórios */
  label.required::after {
    content: " *"; /* Adicionar um asterisco para indicar obrigatoriedade */
    color: red;
  }
  
  /* Estilos para mensagens de erro (você precisará adicionar a lógica para exibir essas mensagens) */
  .error-message {
    color: red;
    font-size: 0.9em;
    margin-top: 5px;
  }



  .navbar{
    width: 90%;
    /* background-color: #007bff; */
    display: flex;
    justify-content: end;
    
    
   
  }

 a{
    margin: 0%;
    padding: 0%;
    margin-right: 20px;
    text-decoration: none;
    color: #111010;
    font-size: 30px solid;
    font-family: Arial, Helvetica, sans-serif;
  }

 /* Estilos gerais para dispositivos móveis (largura máxima de 768px é um ponto de partida comum para tablets) */
@media (max-width: 768px) {
    body {
      font-size: 14px; /* Reduzir o tamanho da fonte para melhor leitura em telas menores */
    }
  
    .container {
      width: 95%; /* Aumentar a largura do container para ocupar mais espaço horizontal */
      margin: 10px auto; /* Reduzir as margens superior e inferior */
      padding: 15px; /* Reduzir o padding interno */
    }
  
    header {
      padding: 10px 0; /* Reduzir o padding do cabeçalho */
      text-align: center; /* Centralizar o conteúdo do cabeçalho */
    }
  
    .logo {
      display: flex;
      flex-direction: column; /* Empilhar logo e título verticalmente */
      align-items: center; /* Centralizar os itens */
      margin-bottom: 10px; /* Adicionar espaço abaixo do logo */
    }
  
    #logounha {
      width: 100px; /* Reduzir o tamanho do logo */
      height: 100px;
    }
  
    header h1 {
      font-size: 1.5em; /* Reduzir o tamanho da fonte do título */
      margin-top: 5px; /* Adicionar espaço entre o logo e o título */
      text-align: center; /* Centralizar o título */
    }
  
    header h1 img {
      width: 30px; /* Reduzir o tamanho do ícone de unhas no título */
      height: 30px;
      vertical-align: middle; /* Alinhar verticalmente com o texto */
    }
  
    .navbar {
      display: flex;
      justify-content: center; /* Centralizar os links de navegação */
      margin-top: 10px;
      padding-left: 30px;
    }
  
    .navbar a {
      font-size: 1em; /* Reduzir o tamanho da fonte dos links */
      padding: 8px 10px; /* Reduzir o padding dos links */
    }
  
    #space {
      display: none; /* Ocultar a barra vertical entre os links em telas menores */
    }
  
    .hero {
      padding: 40px 0; /* Reduzir o padding da seção hero */
      text-align: center; /* Centralizar o texto da seção hero */
    }
  
    .hero h1 {
      font-size: 2em; /* Reduzir o tamanho da fonte do título principal */
      margin-bottom: 10px;
    }
  
    .hero p {
      font-size: 1.1em; /* Reduzir o tamanho da fonte do parágrafo */
      margin-bottom: 20px;
    }
  
    .cta-button {
      font-size: 1em; /* Reduzir o tamanho da fonte do botão CTA */
      padding: 10px 20px;
    }
  
    .video-section {
      padding: 40px 0; /* Reduzir o padding da seção de vídeo */
      text-align: center;
    }
  
    .video-container {
      width: 95%; /* Ocupar mais largura para o container do vídeo */
      margin: 15px auto;
    }
  
    .video-container iframe {
      width: 100%; /* Tornar o iframe responsivo */
      height: auto; /* Manter a proporção */
      max-height: 300px; /* Limitar a altura máxima do vídeo em mobile */
    }
  
    .benefits {
      padding: 40px 0; /* Reduzir o padding da seção de benefícios */
    }
  
    .benefits-grid {
      display: grid;
      grid-template-columns: 1fr; /* Uma coluna para cada benefício em telas menores */
      gap: 20px;
    }
  
    .benefit {
      text-align: center;
      padding: 15px;
      border: 1px solid #eee;
      border-radius: 5px;
    }
  
    .benefit h3 {
      font-size: 1.2em; /* Reduzir o tamanho da fonte dos títulos dos benefícios */
      margin-bottom: 10px;
    }
  
    .benefit p {
      font-size: 1em; /* Reduzir o tamanho da fonte dos parágrafos dos benefícios */
    }
  
    .testimonials {
      padding: 40px 0; /* Reduzir o padding da seção de depoimentos */
    }
  
    .testimonials .benefits-grid {
      grid-template-columns: 1fr; /* Uma coluna para cada depoimento em telas menores */
    }
  
    #contact {
      padding: 60px 0; /* Reduzir o padding da seção de contato */
    }
  
    .formulario {
      display: grid;
      gap: 15px;
      max-width: 90%; /* Aumentar a largura máxima do formulário em mobile */
      margin: 20px auto;
      padding: 15px;
      border: 1px solid #ddd;
      border-radius: 5px;
      background-color: #f9f9f9;
    }
  
    .formulario div {
      display: flex;
      flex-direction: column; /* Empilhar label e input verticalmente */
    }
  
    .formulario label {
      font-size: 1em;
      margin-bottom: 5px;
    }
  
    .formulario input[type="text"],
    .formulario input[type="email"],
    .formulario input[type="tel"] {
      padding: 10px;
      font-size: 1em;
      border-radius: 3px;
      border: 1px solid #ccc;
    }
  
    #bt {
      font-size: 1.1em;
      padding: 12px 25px;
    }
  
    footer {
      padding: 20px 0; /* Reduzir o padding do rodapé */
      text-align: center;
      font-size: 0.9em; /* Reduzir o tamanho da fonte do rodapé */
    }
  
    footer img {
      width: 20px; /* Reduzir o tamanho do ícone de unhas no rodapé */
      height: 20px;
      vertical-align: middle;
    }
  }
  
  /* Estilos para telas ainda menores (smartphones menores) */
  @media (max-width: 480px) {
    header h1 {
      font-size: 1.3em; /* Reduzir ainda mais o título em telas pequenas */
    }}

    @media (max-width: 480px) {
  
    .navbar a {
      font-size: 0.9em; /* Reduzir ainda mais o tamanho da fonte dos links */
      padding: 8px 8px;
    }}

    @media (max-width: 480px) {
  
    .hero h1 {
      font-size: 1.8em; /* Ajustar o tamanho do título principal */
    }}


    @media (max-width: 480px) {
  
    .hero p {
      font-size: 1em; /* Ajustar o tamanho do parágrafo */
    }}

    @media (max-width: 480px) {
  
    .benefits-grid,
    .testimonials .benefits-grid {
      gap: 15px; /* Reduzir o espaçamento entre os itens */
    }}

    @media (max-width: 480px) {
  
    .benefit h3 {
      font-size: 1.1em; /* Reduzir o tamanho da fonte dos títulos dos benefícios */
    }}

    @media (max-width: 480px) {
  
    .formulario {
      gap: 10px; /* Reduzir o espaçamento no formulário */
    }}

    @media (max-width: 480px) {
  
    #bt {
      font-size: 1em; /* Reduzir o tamanho da fonte do botão */
      padding: 10px 20px;
    }
  }

  @media (max-width: 480px) {
    .video-container {
      display: flex;
      flex-direction: column;
      max-width: 100%;
      max-height: 100%;
      width: 100%;
      height: auto;
    }}


    @media (max-width: 480px) {
  
    .container #vd{
        width: 100%;
        height:900px;
    }}

    header{
       visibility: hidden;
       display: none;
    }


    @media (max-width: 480px) {

    .video-container p{
        width: 90%;
    }}