@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

@font-face {
  font-family: 'FonteMexicana';
  src: url('fonts/MexicanTequila.ttf') format('truetype');
}


body {
  /* variáveis */
  --marrom-escuro: #0a0a0a;
  --marrom-claro: #e82d10;
  /* fonte aplicada a todo o site */
  font-family: 'Barlow', sans-serif;
  font-size: 22px;

  background-color: #ffffff;
  color: #000000;
  transition: background-color 0.5s, color 0.5s;
}

/* Estilos para o modo noturno */
body.dark-mode {
  background-color: #343a40;
  color: #f5f5f5;
}

.titulo {
  font-family: 'FonteMexicana', sans-serif;
  font-size: 48px;
  color: rgb(254, 0, 0);
}

.subtitulo{
  font-size: 26px;
  color: rgb(255, 255, 255);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.titulo-menu {
  /*font-family: 'FonteMexicana', sans-serif;*/
  font-size: 20px;
  color: rgb(254, 0, 0);
}

/* Inicio - personaliza o input do menu flutuante*/
input[type=checkbox] {
  border: 2px solid var(--marrom-claro);
  box-shadow: none; 
}

input[type=checkbox]:checked,
input[type="checkbox"]:focus {
  background-color: var(--marrom-claro);
  border-color: var(--marrom-claro);
  box-shadow: none;
  outline: none;
}
/* fim - personaliza o input do menu flutuante*/

/* configuração geral dos banners */
.banners {
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  /*efeito de parallax*/
  background-attachment: fixed;
}

.banners-titulo {
  
  background-color: rgba(0, 0, 0, 0.3); 
}

/* configuração do banner-1*/
.banner-1 {
  background-image: url(./assets/banner-1.png);
}

.banner-2{  
  background-image: url(./assets/banner-8.png);
}

.banner-3{
  background-image: url(./assets/banner-6.png);
}



.video-background {
  position: relative;
  width: 100%;
  height: 100vh; /* Define a altura da div para 100% da altura da tela */
  overflow: hidden;
}

.video-background video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  z-index: -1; /* Garante que o vídeo fique atrás do conteúdo */
}

.conteudo {
  padding-top: 40px;
  padding-bottom: 40px;
  position: relative;
  z-index: 1;
  color: white;
  text-align: center;
}