/* styles.css */

.hero {
  background: url('hero.jpg') no-repeat center center/cover;
  padding: 4rem 2rem;
  padding-top: 80px;
  text-align: center;
}

section {
  padding: 2rem;
}
section .top {
  padding-top: 160px;
}

section h3 {
    text-align: center;
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra no texto */ 
}
/* Define o container */
.container {
    display: flex;
    flex-direction: column; /* Empilha os itens verticalmente */
    /* justify-content: flex-start;  Alinha itens verticalmente no início */
    align-items: center;  /* Centraliza os textos verticalmente */
    height: 100vh;  /* Altura da tela */
    padding: 20px;  /* Espaço interno nas laterais */
    position: relative; /* Permite posicionamento absoluto dos filhos */
    /* */   
}
  
/* Estilo para o bloco superior à direita */
.block-right {
    align-self: flex-end;  /* Alinha o bloco à direita dentro do contêiner */
    margin-top: 100px; /* Empurra o texto superior para baixo */
    margin-bottom: 20px; /* Adiciona espaçamento entre o texto superior e o inferior */
    text-align: right; /* Alinha o texto dentro do bloco à direita */
    font-weight: bold; 
    font-size: 26px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra no texto */   
  }
  
  /* Estilo para o bloco inferior à esquerda */
  .block-left {
    width: 50%; /* Define a largura do bloco */
    text-align: center; /* Alinha o texto dentro do bloco à esquerda */    
    padding: 20px; /* Espaço interno */
    border-radius: 5px; /* Bordas arredondadas */
    font-weight: bold;
    font-size: 24px;
    margin-top: 30px;  /* Adiciona espaçamento adicional entre os blocos */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Sombra no texto */ 
  }

footer {
  text-align: center;
  background: #264653;
  color: #fff;
  padding: 1rem;
}
  
  /* Container do vídeo de fundo */
  .video-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Coloca o vídeo atrás do conteúdo */
    overflow: hidden;
  }
  
  /* Estiliza o vídeo */
  .video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que o vídeo cubra toda a tela */
  }
  
  /* Conteúdo sobreposto */
  .content {
    position: relative;
    color: white;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    font-family: Arial, sans-serif;
  }
  
  .content h1 {
    font-size: 3em;
  }
  
  .content p {
    font-size: 1.5em;
  }
/* Definindo o fundo para a Página Orçamento */
#rhiiraorca {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;  /* Evita que a imagem se repita */
    height: 100vh;
  }

  .background-video, .background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0; /* Inicialmente, todos os elementos estão invisíveis */
    transition: opacity 1s ease; /* como era antes ease-in-out; Transição suave */
    z-index: -1; /* Coloca atrás de outros conteúdos */
  }
  
/* Inicialmente a imagem e o segundo vídeo estão ocultos */
#queremos-rhiira {
  display: block; /* Remove espaçamentos indesejados */
    max-width: 100%; /* Ajusta a largura para caber no navegador */
    max-height: 100vh; /* Ajusta a altura para caber no navegador */
    margin: auto; /* Centraliza a imagem */
    position: absolute; /* Sobreposição com vídeos, se necessário */
    top: 50%; /* Centraliza verticalmente */
    left: 50%; /* Centraliza horizontalmente */
    transform: translate(-50%, -50%); /* Ajuste fino para centralização */
  opacity: 0;
  display: none; /* Esconde inicialmente */
  transition: opacity 1s ease-in-out; /* Transição suave */
} 


#Cidade-Limpa {
    opacity: 0;
    display: none; /* Esconde inicialmente */
    transition: opacity 1s ease-in-out; /* Transição suave */
  }
  
  /* Exibe o primeiro vídeo */
  #Cidade-Poluida {
    opacity: 1;
    display: block;
  }