/* Aplica uma redefinição básica de estilo para todos os elementos */
* {
    margin: 0; /* Remove as margens padrão de todos os elementos */
    padding: 0; /* Remove os preenchimentos padrão de todos os elementos */
    box-sizing: border-box;  /* Faz com que width e height incluam o padding e border */
}

hr {
    width: 100%; /* Garante que o <hr /> ocupe a largura total do contêiner */
    height: 2px; /* Altura visível */
    border: none;
    background-color: #000; /* Cor visível */
  }
  
  

.home{
    margin: 10px; /* Aplica uma margem de 10px em todos os lados do elemento */
    height: 100vh; /* Define a altura do elemento para 100% da altura da viewport */
    display: flex; /* Habilita um contexto de flexbox para este elemento */
    flex-direction: column; /* Organiza os itens filhos em uma coluna vertical */
    align-items: center; /* Centraliza os itens filhos horizontalmente no container */
    justify-content: center; /* Centraliza os itens filhos verticalmente no container */
    overflow: hidden; /* Esconde o scroll vertical e horizontal, impedindo o deslocamento além das bordas da viewport */     
}

.capa {
    padding: 10px; /* Aplica um preenchimento de 10px em todos os lados do elemento */
    margin-left: auto; /* Centraliza o elemento horizontalmente, definindo a margem esquerda como automática */
    margin-right: auto; /* Centraliza o elemento horizontalmente, definindo a margem direita como automática */
    display: flex; /* Habilita um contexto de flexbox para este elemento, permitindo o uso das propriedades flex abaixo */
    align-items: center; /* Centraliza os itens filhos do flex container na direção do eixo transversal (vertical, neste caso) */
    justify-content: center; /* Centraliza os itens filhos do flex container na direção do eixo principal (horizontal, neste caso) */
}

.logo-img {
    width: 20vw; /* Define a largura do logo como uma porcentagem da largura da viewport */
    max-width: 150px; /* Define uma largura máxima para garantir que o logo não fique muito grande */
    min-width: 100px; /* Define uma largura mínima para garantir que o logo não fique muito pequeno */
    margin-top: auto; /* Aplica uma margem superior de 30px para distanciar o logo de elementos acima dele */
}


.cabecalho {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
  }

  .cabecalho_5 {
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
  }
  


  
  /* Estilos básicos mantidos */
.cabecalho-texto{
    text-transform: uppercase;
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    font-size: 32px;
    line-height: 1.5;
    text-align: center;
  }
  
  .cabecalho-texto-p {
    font-family: 'Open Sans', sans-serif;
    font-size: 22px;
    line-height: 1.5;
  }
  
 


/* Estilos básicos */
.cabecalho-2, .cabecalho-3 {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
  }
  
  .cabecalho-texto-1 {
    font-family: 'Open Sans', sans-serif;
    font-size: 18px; /* Tamanho inicial da fonte */
    font-weight: 400;
    line-height: 1.6;
    text-align: justify;
    margin: 0 auto;
    max-width: 800px; /* Limita a largura do texto para leitura confortável */
  }
  
  .btn-privado {
    display: flex;
    justify-content: center; /* Centraliza o botão horizontalmente */
    padding: 10px;
    margin: 0 auto;
  }
  
  .btn a {
    text-transform: uppercase;
    font-family: 'Open Sans', sans-serif;
    display: block;
    padding: 10px 20px;
    background-color: #166157; /* Exemplo de cor de fundo */
    color: white; /* Cor do texto */
    text-decoration: none; /* Remove o sublinhado do link */
    border-radius: 5px; /* Bordas arredondadas para o botão */
    cursor: pointer; 
    transition: background 0.3s ease;
  }

  .btn:hover {
    background: #13754f; 
  }
  

  
/* VÍDEO AULAS */

.container{
    margin: 10px; /* Aplica uma margem de 10px em todos os lados do elemento */
    display: flex; /* Habilita um contexto de flexbox para este elemento */
    flex-direction: column; /* Organiza os itens filhos em uma coluna vertical */
    align-items: center; /* Centraliza os itens filhos horizontalmente no container */
    justify-content: center; /* Centraliza os itens filhos verticalmente no container */
     
}


.cabecalho-texto-p-aulas {
    width: 100%;
    max-width: 1400px;
    font-family: 'Open Sans', sans-serif;
    font-size: 18px; /* Tamanho padrão da fonte */
    line-height: 1.5;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding: 15px;
    box-sizing: border-box; /* Assegura que o padding não adicione largura ao elemento */
  }
  

.btn-contato {
    display: flex;
    flex-wrap: wrap; /* Permite que os botões se ajustem dentro do contêiner */
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: auto;
    padding: 30px;
    gap: 20px;
  }
   
  .video_ {
    display: flex;
    justify-content: center; /* Centraliza o vídeo horizontalmente */
    overflow: hidden; /* Previne overflow indesejado */
  }
  
  .video_ iframe {
    width: 100%; /* Faz o vídeo responder à largura do contêiner */
    height: auto; /* Altura se ajusta automaticamente */
    aspect-ratio: 1236 / 695; /* Mantém a proporção */
    border: 0; /* Remove a borda do iframe */
  }
  
  /* Estilos para telas grandes, usando Media Queries */
  @media (min-width: 1200px) {
    .video_ iframe {
      width: 1236px; /* Largura fixa para telas grandes */
      height: 695px; /* Altura fixa para telas grandes */
    }
  }
  
  
  .cabecalho-1, .video-1 {
    max-width: 90%; /* Limita a largura máxima da div */
  }
  
  .cabecalho-texto, .cabecalho-texto-p, .video-texto {
    word-wrap: break-word; /* Garante que o texto não saia fora da div */
  }
  
  /* Responsividade para dispositivos com largura até 768px */
  @media (max-width: 768px) {
    .cabecalho, .video {
      flex-direction: column; /* Empilha os itens verticalmente */
    }
  
    .cabecalho-texto, .cabecalho-texto-p, .contatos, .video-texto {
      padding: 0 10px; /* Adiciona preenchimento */
      text-align: center; /* Centraliza o texto */
    }
  
    .cabecalho-texto, .video-texto {
      font-size: 24px; /* Ajusta o tamanho da fonte */
    }
  
    .cabecalho-texto-p, .video-texto-p {
      font-size: 18px; /* Ajusta o tamanho da fonte */
    }
  
    .cabecalho-texto-1, .cabecalho-texto-p-aulas {
      font-size: 16px; /* Diminui um pouco o tamanho da fonte */
    }
  
    .btn a {
      padding: 8px 15px; /* Ajusta o tamanho do botão */
    }
  
    .btn-contato {
      flex-direction: column; /* Empilha os botões verticalmente */
    }
  }
  
  /* Responsividade para dispositivos com largura até 480px */
  @media (max-width: 480px) {
    .cabecalho-texto, .cabecalho-texto-p, .cabecalho-texto-p-aulas {
      padding: 0 2px; /* Ajuste no preenchimento */
    }
  
    .cabecalho-texto-1 {
      font-size: 14px; /* Tamanho da fonte reduzido */
    }
  }

  .flex-direcao {
    flex-direction: column;
  }