/* Ajuste do background e máscara */
.tp-hero-3__bg {
  position: relative;
  width: 100%;
  height: auto; /* Garante que a div ocupe a altura total da viewport */
  overflow: hidden;
}

.tp-hero-3__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Faz com que o vídeo se ajuste à área sem distorções */
  z-index: 1;
}

.tp-hero-3__mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  /* background-image: url("../img/banner/mask_banner.png");  Cor azul translúcida */
  mix-blend-mode: multiply; /* Mistura a máscara com o vídeo para criar o tom azul */
}

/* Conteúdo acima da máscara */
.tp-hero-3__content-box {
  position: relative;
  z-index: 3; /* Certifica-se de que o texto aparece acima do vídeo e da máscara */
  color: #fff;
}

/* Estilos para o modal */
#video-popup {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8); /* Fundo escuro com opacidade */
  z-index: 1000;
}

/* O vídeo */
#video-popup video {
  max-width: 80%; /* Tamanho máximo do vídeo */
  max-height: 80%; /* Altura máxima do vídeo */
  border-radius: 8px; /* Opcional: bordas arredondadas */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); /* Sombra para destacar o vídeo */
}