@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Playwrite+GB+S:ital,wght@0,100..400;1,100..400&family=Rum+Raisin&family=Teko:wght@300..700&family=Tilt+Neon&display=swap');

* {
  margin: 0;
  padding: 0;
  font-family: "Verdana";
  box-sizing: border-box;
}

body {
  font-size: 1.6rem;
  background-color: rgb(1, 7, 26);
}


/* Banner da homepage */
/* Estilos principais */
.video-banner-container {
    position: relative;
    width: 100%;
    height: 85vh; /* Altura completa da tela */
    overflow: hidden;
}
        
.video-banner {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que o vídeo cubra toda a área */
}

/* Responsividade */
@media (max-width: 768px) {
    .video-banner-container {
        height: 70vh;
    }
}
        
@media (max-width: 480px) {
    .video-banner-container {
        height: 50vh;
    }
}

/* Cards  */
.conteiner{
  display: flex;  /* Cria um conteiner flexível */
  flex-wrap: wrap;  /* Permite que os cards quebrem para a próxima linha */
  justify-content: center;
  align-items: center;
}

.card {
  width: 25%; /* Cada card ocupa 48% da largura (deixa um espaço entre eles)*/
  height: 30%;
  margin: 2%; /* Adiciona uma margem de 1% em todos os lados */
  border: 1px solid #ffffff; /* Adiciona uma borda */
  border: none;
  overflow: hidden; /* Garante que anda saia do card */
  background-color: transparent;
  background: rgba(128, 128, 128, 0.205);
}

.card img {
  width: 100%; /* A imagem ocupa toda a largura do card */
  height: auto; /* A altura se ajusta automaticamente */
}

.conteudo-card{
  padding: 20px; /* Espaço interno do conteúdo */
  color: white;
}

.conteudo-card .corpo{
  font-size: 16px;
  color: white;
  font-family: "Tahoma";
  text-decoration: none;
}

.conteudo-card .corpo:hover{
  color: #00bcd4;
}


/* Para telas menores que 600px, os cards ocupa 100% da largura */
@media (max-width: 600px){
  .card {
      width:80%;
      margin: 2% 0;  /* Aumenta a margem vertical para separar os cards*/
  }
}

