/*  Fonte */

@font-face {
    font-family: happy-school;
    src: url('../fonts/Happy-School.ttf');
}

@font-face {
    font-family:janda-solid;
    src: url('./fonts/JandaManateeSolid.ttf');
}
@font-face {
    font-family:heroes-legend;
    src: url('../fonts/Heroes-Legend.ttf');
}
@font-face {
    font-family:comic-relief;
    src: url('../fonts/Comic-Relief-Bold.ttf');
}

@font-face {
    font-family:cherry-bomb;
    src: url('../fonts/Cherry-BombOne-Regular.ttf');
}

/* Reset básico para remover margens e espaçamentos padrão */
* {
    margin:0;
    padding:0;
}

/* Personalização de botões usando variáveis do Bootstrap */
.btn {
    --bs-dark-bg-subtle: rgb(24, 5, 77);
    --bs-btn-bg: rgb(218, 5, 5);
    --bs-btn-border-color:#FF0000;
    --bs-btn-hover-bg: rgb(30, 15, 95);
}

/* Define suporte para modo claro e escuro */
:root {
  color-scheme: light dark;
}

/* Estilização do cabeçalho */
header{
    margin-left: 3px;
    margin-right: 3px;
    padding: 0.1rem;
    font-family:comic-relief;
}

/* Espaçamento para imagens no header */
header, img {
    margin-right: 0.5rem;
}

/* Cor ao passar o mouse no menu colapsado */
.collapse:hover {
    color:#FF0000;
}

/* Cor padrão para textos de contato */
.cor-contato {
    color: rgb(24, 5, 77);
}

/* Estilo para a foto principal da águia */
#aguia-photo {
    margin:1rem;
    width:320px;
    height: 400px;
    object-fit: cover; 
    border-radius: 8px;
    
}

#matriculas-abertas {
    color: #FF0000; /* vermelho padrão */
}

#matriculas-abertas:hover {
    color: #000080; /* azul marinho no hover */
    box-shadow: 0px 1px rgb(26, 0, 87);
    border-radius: 5px;
}

.navbar a:hover {
  box-shadow: 0px 1px black;
  border-radius: 5px;
}

/* Estilo geral do corpo */
body {
    color: light-dark(rgb(218, 5, 5), rgb(24, 5, 77)); /* alterna cor de texto em tema claro/escuro */
    background-color: rgb(255, 253, 253);
    margin-top: 2.1rem;
    margin-right: 2.5rem;
    margin-left: 2.5rem;
}

/* Centraliza textos dentro do main */
main {
    text-align: center;
}

/* Estilo para títulos principais */
h1 {
    color: rgb(218, 5, 5);
}

/* Estilo para subtítulos */
h2 {
    color:rgb(24,5,77);
}


#enrollment {
    padding: 1em;
    color: #120a53;
    font-family:cherry-bomb;
}

/* Classe para artigos */
.article{
    text-align: center;
    color:rgb(24,5,77);
}

/* Estilo para seções de conteúdo */
section {
    color:rgb(24,5,77);
    font-size: larger;
    text-align: justify;
    margin: 3rem;
}


.hint-container{ position: relative; display:inline-block; }
.hidden-link{
  margin-top: 5px;
  opacity: 0.3;
  transform: translateY(-7px);
  pointer-events: none;
  transition: opacity .18s, transform .18s;
  display:inline-block;
  margin-left: 8px;
}
.hint-container:hover .hidden-link,
.hint-container:focus-within .hidden-link{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#matricula-aguia {
    margin-top: 12px;
    display:flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.separation-aguia {
    width: 100%;
    height: auto;
    border-radius: 4px;
    color: #120a53;
    font-family:cherry-bomb;
    font-size: x-large;
    background: rgb(218, 5, 5);
    margin-top: 10px;
    margin-bottom: 40px;
}
/* Barra de separação visual */
.separation {
    width: 100%;
    height: auto;
    border-radius: 4px;
    font-family: cherry-bomb;
    background: rgb(218, 5, 5);
    margin-top: 10px;
    margin-bottom: 40px;
}

/* Remove decoração de links e bullets das listas */
a, li {
    text-decoration: none;
    list-style-type: none;
}

/* Seção de Vídeos */
.videos-section {
    background-color: #f8f9fa; /* Fundo cinza claro para a seção */
    padding-top: 5rem; /* Espaçamento superior */
    padding-bottom: 5rem; /* Espaçamento inferior */
}

#sensorial{
    width: 50%;
    height: 50%;
}

.section-title {
    font-family: 'Montserrat', sans-serif; /* Uma fonte elegante, ajuste se tiver outra */
    font-size: 2.5rem; /* Tamanho do título */
    font-weight: 700; /* Negrito */
    color: #343a40; /* Cor escura para o título */
    margin-bottom: 3rem; /* Espaçamento abaixo do título */
    position: relative;
    padding-bottom: 10px; /* Espaço para o underline */
}

/* Underline animado para o título (opcional) */
.section-title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 60px; /* Largura do underline */
    height: 4px;
    border-radius: 2px;
}


/* Estilo dos Cards de Vídeo */
.video-card {
    border: none; /* Remove a borda padrão do card */
    border-radius: 12px; /* Bordas mais arredondadas */
    overflow: hidden; /* Garante que o vídeo respeite o border-radius */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Sombra mais suave e proeminente */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transição para efeito hover */
    background-color: #ffffff; /* Fundo branco para os cards */
}


.video-card:hover {
    transform: translateY(-5px); /* Efeito de "subir" no hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); /* Sombra mais intensa no hover */
}

.video-card .card-body {
    padding: 0.5rem; /* Espaçamento interno maior */
    text-align: left; /* Alinha o texto à esquerda */
}

.video-card .card-title {
    font-family: 'Comic', sans-serif; /* Outra fonte, ajuste se necessário */
    font-size: 1.3rem; /* Tamanho do título do card */
    font-weight: 600; /* Levemente mais negrito */
    color: #343a40; /* Cor escura para o título do card */
    margin-bottom: 0.75rem;
}

.video-card .card-text {
    font-size: 0.95rem; /* Tamanho do texto da descrição */
    line-height: 1.6;
    color: #6c757d; /* Cor mais suave para o texto */
}

.video-card .btn-primary {
    background-color: #007bff; /* Cor do botão primário do Bootstrap */
    border-color: #007bff;
    font-weight: 500;
    padding: 0.5rem 1.2rem;
    border-radius: 50px; /* Botão mais arredondado (pill-shaped) */
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.video-card .btn-primary:hover {
    background-color: #0056b3; /* Tom mais escuro no hover */
    border-color: #0056b3;
}

/* Garante que o vídeo dentro do card ocupe 100% da largura e mantenha a proporção */
.video-card .ratio {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    overflow: hidden; /* Garante que as bordas arredondadas do vídeo apareçam */
}

.card-video-top { /* Ajuste a classe da tag video para a classe que foi criada */
    width: 100%;
    height:  100%;
    object-fit: cover;
}

#habilidade {
    width: 90%;
    height: 90%;
    object-fit: cover;
}


/* Estilos para o container principal de vídeos */
#videos-aguia .row {
    justify-content: center; /* Centraliza os cards se não preencherem a linha toda */
}

/* Estilo para blocos de metodologia e itens de lista */
.methodology, li {
    font-size:small;
    margin-top: 25px;
    margin-bottom: 7px;
    text-align: left;
}

/* Subtítulos em destaque no conteúdo */
.subtitle-aguia {
    text-align: center;
    color: aliceblue;
    margin-bottom: 35px;
    margin-top: 45px;
}

/* Título principal da seção */
.title-aguia{
  text-align: center;
  color: aliceblue;
  margin-bottom: 20px; /* Espaçamento abaixo do título */
}

/* Estilo do bloco lateral (aside) com imagem de fundo e gradiente */
.method {
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-weight: 900;
    font-style: solid;
    background-image: linear-gradient(rgba(0, 0, 0, .8), rgba(17, 65, 85, 0.8), rgba(0, 0, 0, .8)), url('../image/frente-nova.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: auto;
    padding-top: 10px;
    padding-bottom: 50px;
    color: aliceblue;
    flex:content;
    grid-column: inherit;
}

.filosofia{
    font-family:comic-relief;
    letter-spacing: 1px;
    font-size: 18px;
}

/* Estilo do rodapé */
footer {
    font-style:italic;
    color:rgb(241, 241, 241);
    background-color:#120a53;
    border-radius: 5px;
    text-align: center;
}

/* Espaçamento para ícones sociais */
.social-media {
    margin-bottom: 2rem;
}

/* Efeito de fade + brilho nas imagens do slide */
#mainImage {
    max-width:90%; 
    max-height:500px;
    transition: opacity 0.5s ease, filter 0.5s ease; /* transição suave */
}

/* Classe que aplicaremos temporariamente para o brilho */
#mainImage.brilho {
    filter: brightness(1.2); /* aumenta o brilho */
}

#contact{
    font-weight:bold;
    font-style: normal;
    color:#f8f9fa;
    text-decoration:none;
}

#contact:hover{
    box-shadow: 0px 3px #f8f9fa;
    border-radius: 5px;
}