/* css\vh.css */

#vh {
  /* Caminho para sua imagem de fundo */
  background-image: url('../imagens/vh/ImgEquipeVH.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  
  /* Garante que a seção tenha uma altura mínima para o fundo aparecer */
  min-height: 550px; 
  padding: 5rem 0; /* Equivalente ao py-5 que removemos para ter mais controle */
}

/* Estilização do Título "VITOR HUGO" */
.vh-headline {
  line-height: 1.1;
  font-family: 'Poppins', sans-serif; /* Fonte já carregada no seu HTML */
}

.vh-headline .vh-vitor,
.vh-headline .vh-hugo {
  font-weight: 700; /* Bold */
  text-transform: uppercase;
  letter-spacing: -2px; /* Deixa as letras mais juntas */
  font-size: 4.5rem; /* Tamanho grande */
}

.vh-headline .vh-vitor {
  color: #00f0d0; /* Tom de ciano/teal brilhante, similar ao da imagem */
}

.vh-headline .vh-hugo {
  color: #ffffff; /* Branco */
  position: relative; /* Necessário para o pseudo-elemento ::after */
}

/* Bloco branco embaixo de "HUGO" */
.vh-headline .vh-hugo::after {
  content: '';
  display: block;
  width: 20%; /* Largura total do texto "HUGO" */
  height: 2px; /* Espessura do bloco */
  background-color: #ffffff;
  margin-top: 8px; /* Espaço entre o texto e o bloco */
}

/* --- Responsividade --- */
@media (max-width: 992px) {
  #vh {
    /* Centraliza a imagem melhor em telas menores */
    background-position: 30% 50%; 
  }
}

@media (max-width: 768px) {
  .vh-headline .vh-vitor,
  .vh-headline .vh-hugo {
    font-size: 3.5rem; /* Diminui o texto em telas médias */
  }

  #vh {
    min-height: 450px;
    padding: 4rem 0;
  }
}

@media (max-width: 576px) {
  .vh-headline .vh-vitor,
  .vh-headline .vh-hugo {
    font-size: 2.8rem; /* Diminui ainda mais em celulares */
  }
}