/* Importar fontes do Google Fonts (se você adicionou os links no HTML) */
body {
    font-family: 'Poppins', sans-serif; /* Fonte padrão para o corpo */
    background-color: #f8f9fa; /* Cor de fundo clara */
    color: #343a40; /* Cor de texto padrão */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif; /* Fonte para títulos */
    color: #000000; /* Preto para títulos */
}

.banner {
    max-width: 80%;
}


/* Cores principais */
:root {
    --primary-orange: #FFA500; /* Laranja vibrante */
    --primary-dark: #000000;   /* Preto */
    --secondary-light: #f8f9fa; /* Branco leve */
}

/* Personalização do Bootstrap */
.bg-dark {
    /* background-color: var(--primary-dark) !important; */
    background-color: #FFA500;
}

.header {
    opacity: 1;
    z-index: 99;
    background-color: #fff!important;
}

.header img {
    max-width: 150px;
} 
.text-warning {
    color: var(--primary-orange) !important;
}

.btn-warning {
    background-color: var(--primary-orange);
    border-color: var(--primary-orange);
    color: var(--primary-dark);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn-warning:hover {
    background-color: #CC8400; /* Laranja um pouco mais escuro no hover */
    border-color: #CC8400;
    transform: translateY(-2px); /* Pequeno efeito de elevação */
}

.btn-dark {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    color: var(--primary-orange);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn-dark:hover {
    background-color: #333333; /* Cinza escuro no hover */
    border-color: #333333;
    transform: translateY(-2px);
}

/* Seção Hero (Carrossel de Imagens) */
.hero-section {
    position: relative;
    margin-top: 0;
    height: 100vh; /* Ocupa 100% da altura da tela */
    overflow: hidden; /* Garante que o conteúdo não vaze */
}

.hero-img {
    height: 100vh; /* Garante que a imagem ocupe toda a altura */
    object-fit: cover; /* Faz a imagem cobrir o espaço sem distorcer */
    filter: brightness(0.6); /* Escurece a imagem para o texto se destacar */
}

.carousel-caption {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff; /* Texto branco para contraste */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra no texto para melhor leitura */
    padding: 20px; /* Espaçamento interno */
}

.carousel-caption h5 {
    font-size: 3.5rem; /* Tamanho do título */
    color: #CC8400;
    font-weight: 700;
    margin-bottom: 1rem;
    animation: fadeInDown 1s ease-out; /* Animação ao entrar */
}

.carousel-caption p {
    font-size: 1.5rem; /* Tamanho do parágrafo */
    animation: fadeInUp 1s ease-out; /* Animação ao entrar */
}

#quemsomos {
    max-width: 80%;
} 

#quemsomos img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

.gallery-grid[data-animation="scale-up"] .gallery-grid-item-wrapper {
    animation-name: tmpl-anim-fade-scale-up;
    animation-duration: 800ms;
    animation-fill-mode: both;
    animation-iteration-count: 1;
  }
  .gallery-grid[data-aspect-ratio="four-three"] .gallery-grid-item-wrapper {
    padding-bottom: 75%;
  }
  .gallery-grid-item-wrapper {
    position: relative;
    display: block;
    width: 100%;
    height: 0;
  }

/* Animações de entrada para o carrossel hero */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Depoimentos */
#depoimentos .carousel-item {
    padding: 1rem 0; /* Espaçamento interno */
}

#depoimentos .carousel-inner {
    background-color: var(--primary-dark); /* Fundo preto para o carrossel de depoimentos */
    border-radius: 10px;
    padding: 20px;
}

#depoimentos .carousel-control-prev-icon,
#depoimentos .carousel-control-next-icon {
    filter: invert(1); /* Inverte a cor para serem visíveis no fundo escuro */
}

#depoimentos .border-warning {
    border-color: var(--primary-orange) !important;
}

/* Efeito pulsante para o botão CTA */
.pulsating-btn {
    animation: pulse 2s infinite; /* Aplica a animação */
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 165, 0, 0.7); /* Laranja com 70% de opacidade */
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 20px rgba(255, 165, 0, 0); /* Laranja transparente */
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 165, 0, 0);
    }
}

/* Responsividade para o texto do carrossel hero */
@media (max-width: 768px) {
    .carousel-caption h5 {
        font-size: 2rem; /* Tamanho menor para telas menores */
    }

    .carousel-caption p {
        font-size: 1rem;
    }
}

/* Animação para cards (ex: seção "Sobre o Curso") */
.card {
    border: none;
    border-radius: 10px;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.card:hover {
    transform: translateY(-5px); /* Efeito de levitação */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* Sombra mais forte */
}

/* Efeito de fade-in para seções ao rolar (iremos usar JavaScript para isso) */
.fade-in-section {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Galeria de Fotos - Miniaturas tamanho fixo no desktop */
.gallery-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.gallery-grid .col-6 {
  display: flex;
  flex-direction: column;
}

.gallery-grid .gallery-grid-item-wrapper {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-grid .gallery-grid-item-wrapper img {
  width: 100%;
  max-width: 328px;
  height: 328px;
  object-fit: cover;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 1rem !important;
}

@media (max-width: 991.98px) {
  .gallery-grid .gallery-grid-item-wrapper img {
    max-width: 100%;
    height: 200px;
  }
}

@media (max-width: 575.98px) {
  .gallery-grid .gallery-grid-item-wrapper img {
    height: 140px;
  }
}

/* Botão flutuante WhatsApp */
.whatsapp-float {
  position: fixed;
  width: 64px;
  height: 64px;
  bottom: 32px;
  right: 32px;
  background: #25d366;
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  z-index: 9999;
  transition: background 0.2s, box-shadow 0.2s;
}
.whatsapp-float:hover {
  background: #1ebe5d;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  text-decoration: none;
}

@media (max-width: 575.98px) {
  .whatsapp-float {
    width: 52px;
    height: 52px;
    font-size: 2rem;
    bottom: 16px;
    right: 16px;
  }
}




/* Galeria de Fotos */

#galeria {
    height:100%;
    position:relative;
    overflow:hidden;
  }
  
  
  .green{
    background-color:#6fb936;
  }
          .thumb{
              margin-bottom: 30px;
          }
          
          .page-top{
              margin-top:85px;
          }
  
     
  img.zoom {
      width: 100%;
      height: 200px;
      border-radius:5px;
      object-fit:cover;
      -webkit-transition: all .3s ease-in-out;
      -moz-transition: all .3s ease-in-out;
      -o-transition: all .3s ease-in-out;
      -ms-transition: all .3s ease-in-out;
  }
          
   
  .transition {
      -webkit-transform: scale(1.2); 
      -moz-transform: scale(1.2);
      -o-transform: scale(1.2);
      transform: scale(1.2);
  }
      .modal-header {
     
       border-bottom: none;
  }
      .modal-title {
          color:#000;
      }
      .modal-footer{
        display:none;  
      }