header {
  position: relative;
  height: 200px; /* Ajuste a altura conforme necessário */
  overflow: hidden;
  color: black; /* Torna o texto visível sobre o vídeo */
  text-align: center;
  width: 100%; /* Garante que o header ocupe toda a largura */
  margin: 0 auto;  /*Evita deslocamento lateral */
}

/* Estilo para o vídeo de fundo */
.video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Coloca o vídeo atrás do conteúdo */
  overflow: hidden;
  padding: 10px;
}

.video-background video {
  width: 100%; /* Faz o vídeo cobrir toda a largura */
  height: 100%; /* Faz o vídeo cobrir toda a altura */
  object-fit: cover; /* Ajusta o vídeo ao tamanho do header sem distorção */
  padding: 10px;
}

/* Estilo do conteúdo sobre o vídeo */
.header-texto {
  position: relative;
  z-index: 1; /* Garante que o texto fique acima do vídeo */
  text-align: center;
  padding: 20px;
}

.header-content nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.header-content nav ul li a {
  text-decoration: none;
  color: #fff; /* Cor dos links */
  font-weight: bold;
  transition: color 0.3s ease;
}

.header-content nav ul li a:hover {
  color: #ffcc00; /* Cor ao passar o mouse */
}

body {
  font-family: Arial, sans-serif;
  margin: 10px;
  padding: 20px;
  background-color: #f0f0f0;
}

nav {
  background-color: black;
  padding: 10px;
  position: relative;
  width: 100%;
}

nav a {
  color: #f0f0f0;
  text-decoration: none;
  font-size: 20px;
  padding: 10px;
  margin: 10px;
  align-items: right;
}

nav ul {
  width: 100%;
  display: flex; /* Exibe os itens em linha */
  justify-content: flex-end; /* Alinha os itens à direita */
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  margin-left: 15px;
  font-size: 11px;
  height: 20px;
  }

nav a:hover {
  background-color: #f0f0f0;
  color: black;
  }

.container {
  display: flex;
  flex-direction: row;
  margin-left: 15px;
  background-color: black;
  gap: 10px;
  }

  .imagem {
    display: flex; /* Torna a div flexível */
    justify-content: center; /* Centraliza a imagem horizontalmente */
    align-items: center; /* Centraliza a imagem verticalmente */
    width: 50%; /* Ocupa metade do espaço do container */
    height: 300px; /* Define altura fixa para a imagem */
    background-color: black; /* Cor de fundo opcional */
}

.imagem img {
  max-width: 100%; /* Garante que a imagem não ultrapasse os limites */
  max-height: 100%; /* Redimensiona a imagem dentro da altura definida */
  object-fit: contain; /* Ajusta a imagem sem distorcer */
  margin-top: 20px; /* Corrigido ponto-e-vírgula */
  border-radius: 30%; /* Adiciona bordas arredondadas */
}

.texto {
  display: flex; /* Torna o texto flexível */
  flex-direction: column; /* Empilha o texto verticalmente */
  justify-content: center; /* Centraliza o texto verticalmente */
  width: 50%; /* Ocupa metade do espaço do container */
  height: 300px; /* Define altura fixa igual à da imagem */
  color: #f0f0f0;
  background-color: black;
  text-align: justify; /* Organiza o texto de maneira mais estética */
  padding: 20px; /* Adiciona espaçamento interno */
}

.footer {
  background-color: black; /* Cor de fundo */
  color: #f0f0f0; /* Cor do texto */
  text-align: center; /* Centraliza o conteúdo */
  padding: 10px; /* Espaçamento interno */
  font-family: Arial, sans-serif; /* Fonte */
  flex-direction: row; /* Alinha os itens horizontalmente */
  display: flex; /* Torna o footer flexível */
  justify-content: center;
}

.footer p {
  margin: 10px; 
  font-size: 16px; /* Tamanho do texto */
  display: flex;
  text-align: center;
}

.social-icons {
  display: flex;
  justify-content: right; /* Centraliza os ícones horizontalmente */
  gap: 15px; /* Espaçamento entre os ícones */
  align-items: right;
  margin-left: 10px; 
  }

.social-icons a img {
  width: 32px; /* Tamanho do ícone */
  height: 32px;
  transition: transform 0.3s ease; /* Animação suave */
}

.social-icons a img:hover {
  transform: scale(1.2); /* Aumenta o ícone ao passar o mouse */
}
/* Estilo para a tabela de bolas */

.bola {
  justify-content: center; /* Centraliza horizontalmente */
  align-items: center; /* Centraliza verticalmente */
  width: 20%;
  height: auto; /* Certifique-se de que a altura seja ajustável */
  vertical-align: bottom;
  text-align: center; /* Altera de justify para melhor compatibilidade */
  padding: 10px; /* Adiciona espaçamento interno */
  border: 1px solid #ccc; /* Adiciona borda às células */
  color: #f0f0f0; /* Cor do texto */
  background-color: black; /* Cor de fundo */
  border-radius: 20px; /* Borda arredondada */
  margin: auto; /* Garante que o bloco da bola fique centralizado no pai */
}

.bola img {
  width: 100%; /* Faz a imagem ocupar toda a largura da célula */
  height: auto; /* Mantém a proporção da imagem */
  border-radius: 50%; /* Torna a imagem redonda */
  margin-top: 20px; /* Espaçamento superior */
}

.bola p {
  text-align: center; /* Centraliza o texto */
  margin-top: 10px; /* Espaçamento superior */
  font-size: 16px; /* Tamanho do texto */
  color: #f0f0f0; /* Cor do texto */
}
.bola:hover {
  background-color: darkorange; /* Cor de fundo ao passar o mouse */
  color: black; /* Cor do texto ao passar o mouse */
  transition: background-color 0.3s ease, color 0.3s ease; /* Animação suave */
}
.bola:hover img {
  transform: scale(1.1); /* Aumenta a imagem ao passar o mouse */
  transition: transform 0.3s ease; /* Animação suave */
}
.bola:hover p {
  color: black; /* Cor do texto ao passar o mouse */
  transition: color 0.3s ease; /* Animação suave */
}
.bola:hover {
  cursor: pointer; /* Muda o cursor ao passar o mouse */
}
.bola:hover img {
  transform: scale(1.1); /* Aumenta a imagem ao passar o mouse */
  transition: transform 0.3s ease; /* Animação suave */
}
.bola button {
  background-color: darkorange; /* Fundo transparente */
  border: 1px; /* Remove borda */
  border-color: black;
  border-radius: 15px; /* Borda arredondada */
  padding: 10px; /* Espaçamento interno */
  color: #f0f0f0; /* Cor do texto */
  justify-content: center; /* Centraliza o botão */
  font-size: 16px; /* Tamanho do texto */
  cursor: pointer; /* Muda o cursor para indicar que é clicável */
  transition: color 0.3s ease; /* Animação suave */
}
.bola button:hover {
  color: darkorange; /* Cor do texto ao passar o mouse */
  background-color: black; /* Cor de fundo ao passar o mouse */
  border: 1px; /* Remove borda */
  transition: color 0.3s ease; /* Animação suave */
}

/* Estilo para pagina de onde estamos */
.corpo {
  display: flex; /* Torna o main flexível */
  flex-direction: row; /* Alinha os itens verticalmente */
  justify-content: center; /* Centraliza os itens verticalmente */
  padding: 20px; /* Espaçamento interno */
  margin: 0%;
  background-color: black; /* Cor de fundo */
  color: #f0f0f0; /* Cor do texto */
  font-family: Arial, sans-serif; /* Fonte */
}

h1 {
  font-size: 24px; /* Tamanho do título */
  margin-bottom: 20px; /* Espaçamento inferior */
  text-align: center; /* Centraliza o título */
}

.mapa {
  width: 80%; /* Largura total do mapa */
  height: auto; /* Altura total do mapa */
  margin-top: 20px; /* Espaçamento superior */
}

.formulario input {
  background-color: darkorange;
  color: black; /* Cor do texto */  
  border-radius: 10px; /* Bordas arredondadas */ 
}

.formulario textarea {
  background-color: darkorange;
  color: black; /* Cor do texto */
  width: 400px;
  height: 60px; /* Altura fixa para o textarea */
  border-radius: 10px; /* Bordas arredondadas */
  padding: 10px; /* Espaçamento interno */
  margin-top: 10px; /* Espaçamento superior */
}

.formulario button {
  background-color: darkorange; /* Cor de fundo */
  color: black; /* Cor do texto */
  border-radius: 10px; /* Bordas arredondadas */
  padding: 10px; /* Espaçamento interno */
  font-size: 16px; /* Tamanho do texto */
  cursor: pointer; /* Muda o cursor para indicar que é clicável */
  transition: background-color 0.3s ease, color 0.3s ease; /* Animação suave */
}
.formulario button:hover {
  background-color: black; /* Cor de fundo ao passar o mouse */
  color: darkorange; /* Cor do texto ao passar o mouse */
  transition: background-color 0.3s ease, color 0.3s ease; /* Animação suave */
}