@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap');

html {
    scroll-behavior: smooth;
}

.regular{
  font-weight: 200;
}
/* Reset Básico */
body, h1, h2, p, ul, li {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.homepage-background{
    background: linear-gradient(to bottom, #042d30, #021516);
}

.projeto-background{
    background: linear-gradient(to bottom, #024950, #0FA4AF);
}

.aboutus-background{
    background: linear-gradient(to bottom, #2E3944, #124E66);
}

.colabora-background{
    background: linear-gradient(to bottom, #8697C4, #263363);
}
.white-background{
    background: linear-gradient(to bottom, #deefff, #3cbff3);
}

.white-background *, .white-background form input::placeholder, .white-background form textarea::placeholder{
    color: #000;
}
.white-background .container form textarea, .white-background .container form input{
    border: 1px solid #000;
}

body {
    line-height: 1.6;
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    transform: translateY(0); /* Inicialmente deslocada para cima */
    overflow-x: hidden;
}

/* Favos de mel no fundo */
.favos-de-mel-fundo {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 370px; /* Ajuste conforme necessário */
    height: 240px; /* Ajuste conforme necessário */
    opacity: 0.3; /* Transparência para suavizar o efeito */
    background-image: url(images/favos-de-mel.png);
    background-size: cover;
    pointer-events: none; /* Para não interferir com a interação do usuário */
    z-index: -1; /* Fica por trás de todo o conteúdo */
}

/* Container Principal */
.container {
    width: 80%;
    margin: 0 auto;
    /* max-width: 1200px; */
    padding: 10px;
    align-items: center;
}

/* Cabeçalho */
header {
    padding: 20px 0;
}

header img{
    width: 150px;
    position: relative;
    text-align: left;
    cursor: pointer;

}

header h1 {
    text-align: center;
    margin-bottom: 10px;
}

nav{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
nav ul {
    display: flex;
    justify-content: right;
    list-style: none;
}

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    transition: all 1s ease-out;
}
nav ul li a.quiz {
    color: #ffbb00;
    text-decoration: none;
    font-weight: bold;
    transition: all 1s ease-out;
}
nav ul li a.quiz:hover {
    color: #ab810d;
    transition: all 0.3s ease;
}

nav ul li a:hover {
    color: #1ab912;
    transition: all 0.3s ease;
}

/* Ícone de hambúrguer */
.menu-icon {
    display: none;
    font-size: 2rem;
    cursor: pointer;
}

nav ul {
    transition: all 1s ease-out;
    overflow: hidden;
}

nav ul li .dropdown {
    display: flex; /* Garante que o dropdown aparece antes da animação */
    flex-direction: column;
}

nav ul li.dropdown:hover .dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

@media (min-width: 1165px) {
    nav ul li .dropdown-content {
        opacity: 0;
        display: flex; /* Garante que o dropdown aparece antes da animação */
        position: absolute;
        flex-direction: column;
        visibility: hidden;
        margin-top: 10px;
        transform: translateY(-10px);
        transition: opacity 0.5s ease-in, transform 0.5s ease-in;
    }
}   

/* Responsivo - Para telas menores */
@media screen and (max-width: 1165px) {
    nav ul {
        display: none; /* Esconde o menu em telas pequenas */
        flex-direction: column;
        position: absolute;
        top: 0;
        right: 0;
        background: #042d307c;
        width: 100%;
        height: 100%;
        text-align: right;
        z-index: 4;
    }

    nav ul li {
        margin: 15px 0;
        margin-right: 10%;
    }
    nav ul li:first-child {
        margin-top: 20vh;
    }

    .menu-icon {
        display: block; /* Mostra o ícone de hambúrguer */
        z-index: 5;
    }

    nav ul.active {
        display: flex; /* Mostra o menu quando ativo */
        transition: all 1s ease-out;
    }
    
    nav ul li.dropdown .dropdown-content a{
        color: #fcc8c0;
        display: flex;
        flex-direction: column;
        margin-top: 10px;
        margin-right: 10px;
    }
}

/* Seções */
section {
    margin-top: 25px;
}

#galeria{
    margin-top: -3px;
}

#sobre {
    position: relative;
    background-size: cover; /* Mantém a proporção da imagem */
    background-position: center top; /* Centraliza a imagem no topo */
    background-repeat: no-repeat; /* Não repete a imagem */
    padding: 60px 0; /* Adiciona espaço superior e inferior */
    color: #fff;
    text-align: center;
    display: flex;
    justify-content: center; /* Centraliza horizontalmente o conteúdo */
    align-items: center; /* Centraliza verticalmente o conteúdo */
    overflow: hidden;
    padding: 0 50px; /* Espaço lateral para o conteúdo */
    margin-top: 0;
}

#sobre.home{
    background-image: url('images/Ambiente1.png');
    min-height: 100vh;
}

#sobre.project{
    margin-bottom: 20px;
}

#sobre.project h2, #sobre.project p, #sobre.project h3{
    text-align: center;
}

#sobre.media video{
    display: block;
    margin: auto;
    align-items: center;
    width: 800px;
    border-radius: 10px;
}
#sobre.media iframe{
    display: block;
    margin: auto;
    align-items: center;
    justify-content: center;
    width: 800px;
    height: 450px;
    border-radius: 10px;
}

#sobre p:last-child{
    margin-bottom: 0px;
}

#sobre p {
    margin-bottom: 10px;
}

/* Ajuste para dispositivos móveis */
@media (max-width: 768px) {
    #sobre.media video {
        width: 500px;; /* Ocupa 70% da altura em telas menores */
    }
    #sobre.media iframe {
        width: 500px;; /* Ocupa 70% da altura em telas menores */
    }
}

/* Ajuste para telas muito pequenas (smartphones) */
@media (max-width: 480px) {
    #sobre.media video {
        width: 300px; /* Ocupa 60% da altura em telas muito pequenas */
    }
    #sobre.media iframe {
        width: 300px; /* Ocupa 60% da altura em telas muito pequenas */
    }
}

/* Contêiner de conteúdo da seção Sobre */
.conteudo-sobre {
    display: flex; /* Alinhamento horizontal */
    align-items: center; /* Centraliza verticalmente os elementos dentro */
    gap: 40px; /* Espaço entre o texto e a imagem */
    max-width: 1200px; /* Largura máxima do contêiner */
    width: 100%; /* Ocupa 100% da largura disponível */
    z-index: 2; /* Sobrepõe o fundo */
}

/* Estilo do texto da seção Sobre */
.texto-sobre {
    flex: 1; /* O texto ocupa um espaço proporcional ao contêiner */
    color: #ffffff; /* Texto branco */
    text-align: end;
}

.texto-sobre.colabora h2, .texto-sobre.colabora p{
    text-align: center;
}

.texto-sobre.colabora p a{
    color: #fff;
}

.texto-sobre h2 {
    font-size: 2.5rem; /* Tamanho do título */
    margin-bottom: 20px;
    text-align: left;
}

.texto-sobre p {
    font-size: 1.2rem; /* Tamanho do texto do parágrafo */
    line-height: 1.5;
    margin-bottom: 20px;
    text-align: left;
    font-weight: 300;
}

/* Imagem adicional */
.imagem-extra {
    flex: 1; /* A imagem ocupa um espaço proporcional ao contêiner */
    display: flex;
    justify-content: center;
    align-items: center;
}

.imagem-extra img {
    max-width: 50%; /* A imagem ocupa toda a largura do contêiner */
    height: auto; /* Mantém a proporção da imagem */
    border-radius: 10px; /* Arredondar cantos da imagem */
}

/* Responsivo - Para telas menores */
@media screen and (max-width: 1160px) {
    .conteudo-sobre{
        display: block;
    }
    .sobre-container {
        flex-direction: column; /* Coloca o texto e a imagem em coluna */
        text-align: center; /* Centraliza o texto */
    }

    .sobre-texto h2 {
        font-size: 1.5rem;
    }

    .sobre-texto p {
        font-size: 0.9rem;
    }
    .imagem-extra img{
        margin-top: 20%;
        margin-bottom: 20%;
    }
    #sobre{
        display: block;
    }
}

/* Parágrafo inicialmente oculto */
#paragrafo-animado {
    opacity: 0;
    transition: opacity 2s ease-in-out; /* Animação de opacidade suave */
}

/* Quando visível */
#paragrafo-animado.visivel {
    opacity: 1;
}

/* Parágrafo inicialmente oculto */
#paragrafo2-animado {
    opacity: 0;
    transition: opacity 2s ease-in-out; /* Animação de opacidade suave */
}

/* Quando visível */
#paragrafo2-animado.visivel {
    opacity: 1;
}

/* Parágrafo inicialmente oculto */
#paragrafo3-animado {
    opacity: 0;
    transition: opacity 2s ease-in-out; /* Animação de opacidade suave */
}

/* Quando visível */
#paragrafo3-animado.visivel {
    opacity: 1;
}

/* Estilo do cursor piscante */
#animacao-escrita::after {
    content: '|';
    animation: piscarCursor 0.7s infinite;
    font-weight: bold;
}

@keyframes piscarCursor {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

section h2 {
    margin-bottom: 20px;
    text-align: center;
}

section p, section ul {
    text-align: center;
    font-weight: 400;
}

/* Galeria */
.galeria {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.galeria img {
    width: 30%;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
    border-radius: 10px;
}

.galeria img:hover {
    transform: scale(1.05);
}

/* Estilo da galeria (maior em tela cheia) */
.galeria-grande {
    position: relative;
    width: 100vw; /* Ocupa 100% da largura da janela */
    height: 50vh; /* Ocupa 100% da altura da janela */
    margin: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Estilo das imagens da segunda galeria */
.slides-grande {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
}

/* Estilo individual para cada slide */
.slide-grande {
    position: absolute; /* Todas as imagens são sobrepostas */
    top: 0;
    left: 0;
    width: 100vw;
    height: 50vh;
    opacity: 0; /* Inicialmente invisível */
    transition: opacity 0.5s ease-in-out; /* Transição de opacidade suave */
    z-index: 1;
}

.slide-grande.ativo {
    opacity: 1; /* A imagem ativa fica visível */
    z-index: 2;
}

/* Estilo da imagem dentro do slide */
.slide-grande img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* A imagem cobre a área sem distorções */
}

/* Estilo do overlay semi-transparente */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.50); /* Fundo preto com 50% de opacidade */
    z-index: 2; /* Sobrepõe a imagem, mas abaixo do texto */
}

/* Estilo do texto sobre as imagens */
.conteudo-texto {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centraliza o texto */
    color: #ffffff; /* Texto branco */
    text-align: center;
    z-index: 3; /* Texto sobrepõe a imagem e o overlay */
    padding: 20px;
}

.conteudo-texto h2 {
    font-size: 2.5rem; /* Tamanho do título */
    margin-bottom: 10px;
}

.conteudo-texto p {
    font-size: 1.2rem; /* Tamanho do texto do parágrafo */
}

/* Estilo dos indicadores de pontinhos */
.indicadores {
    position: absolute;
    left: 50%;
    display: flex;
    gap: 10px; /* Espaçamento entre os pontinhos */
    z-index: 4; /* Sobrepõe as imagens */
    margin-top: 45vh;
}

/* Estilo individual dos pontinhos */
.ponto {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.5); /* Pontinho branco semi-transparente */
    border-radius: 50%; /* Forma redonda */
    cursor: pointer;
    transition: background-color 0.3s ease; /* Transição suave da cor */
}

/* Estilo para o pontinho ativo */
.ponto.ativo {
    background-color: #ffffff; /* Pontinho ativo com cor branca sólida */
}

.ponto:hover {
    background-color: #ffffff; /* Torna o pontinho branco ao passar o mouse */
    transform: scale(1.2); /* Aumenta um pouco o tamanho do pontinho */
}

/* Ajuste para dispositivos móveis */
@media (max-width: 768px) {
    .galeria-grande {
        height: 70vh; /* Ocupa 70% da altura em telas menores */
    }
}

/* Ajuste para telas muito pequenas (smartphones) */
@media (max-width: 480px) {
    .galeria-grande {
        height: 60vh; /* Ocupa 60% da altura em telas muito pequenas */
    }
}

/* Estilo geral da seção */
.secao-imagem-texto {
    display: flex;
    justify-content: center; /* Centraliza o conteúdo horizontalmente */
    align-items: center; /* Centraliza o conteúdo verticalmente */
    padding: 50px 0; /* Espaçamento vertical para a seção */
}

/* Estilo do contêiner */
.ladoAlado{
    display: flex;
    justify-content: space-between; /* Distribui espaço entre imagem e texto */
    align-items: center;
    max-width: 1200px; /* Limita a largura máxima da seção */
    width: 100%;
    gap: 30px; /* Espaço entre a imagem e o texto */
    padding: 0 20px; /* Padding horizontal */
}

/* Estilo da imagem */
.imagem {
    flex: 1; /* Ocupa metade do espaço disponível */
}

.imagem img {
    width: 400px; /* Imagem ocupa toda a largura da divisão */
    height: 300px;
    border-radius: 10px; /* Borda arredondada opcional */
    object-fit: contain; /* Ajusta a imagem para cobrir a área */
}

/* Estilo do texto */
.texto {
    flex: 1; /* Ocupa metade do espaço disponível */
    padding: 0 20px; /* Espaçamento interno para o texto */
}

.texto h2 {
    margin-bottom: 15px; /* Espaçamento inferior no título */
    font-size: 2rem; /* Tamanho do título */
}

.texto p {
    font-size: 1.2rem; /* Tamanho do texto do parágrafo */
    line-height: 1.5; /* Espaçamento entre linhas */    
    color: #ffffff; /* Cor do texto */
    font-weight: 200;
}

/* Ajuste para dispositivos móveis */
@media (max-width: 768px) {
    .container {
        flex-direction: column; /* Coloca imagem e texto um em cima do outro */
    }
    
    .imagem, .texto {
        width: 100%; /* Ocupa 100% da largura em telas menores */
        flex: none;
    }
    
    .texto {
        padding: 20px 0; /* Adiciona espaçamento vertical para texto */
    }
}

.container .membros{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
}

.container .membro{
    display: flex;
    margin: 5px;
    background-color: #24262b3f;
    width: 100%;
    border-radius: 15px;
    flex-wrap: nowrap;
    align-items: center;
}

.container .membro .texto-membro{
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    width: 55%;
}

@media (min-width: 768px) {
    .container .membro a{
         margin-left: 100px;
         margin-right: 50px;
    }
    .container .membros .membro ul{
        align-items: flex-start;
    }
 }

@media (max-width: 768px) {
    .container .membro{
        display: flex;
        flex-direction: column;
    }
    .container .membro .texto-membro{
        align-items: center;
    }
    .container .membros .membro ul{
        align-items: center;
    }
    .container .membro a{
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 10px;
        margin-bottom: 25px;
    }
}

.container .membros .membro p.email{
    font-size: 0.8rem;
    color:#bbbbbb;
    font-weight: 200;
}

.container .membro .botao-membro{
    display: flex;
    justify-content: center;
    align-items: center;
   text-align: center;
}

.container .membro a{
    display: inline-grid;
    align-items: center;
    width: 125px;
    height: 35px;
    color: #fff;
    border: #fff 2px solid;
    background-color: transparent;
    border-radius: 15px;
    text-decoration: none;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.container .membro a:hover{
    background-color: #151a20c8;
}

.container .membros .membro img{
    border-radius: 10px;
    width: 150px;
    padding: 50px 30px;
}

.container .membros .membro p{
    margin-bottom: 15px;
}

.container .membros .membro ul{
    display: flex;
    flex-direction: column;
    list-style-type: none;
}

.container .membros .membro ul li::marker{
    list-style-type: none;
}

.container .membros .membro ul li:last-child{
    margin-bottom: 10px;
}


#objetivos{
    margin-top: 30px;   
}

#objetivos p{
    text-align: left;
    font-size: 1.2rem;
}

#objetivos h2{
    text-align: left;
    font-size: 1.2rem;
}

#objetivos ul li{
    text-align: left;
    margin-right: 15px;
    font-size: 1.2rem;
    margin-bottom: 5px;
}

#objetivos ul li::marker{
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #131924;
    display: block;

}

#recolha{
    margin-top: 5px;
    background-color: #3d3d3d4a;
}

#recolha h2{
    text-align: left;
}

#recolha ul li{
    text-align: left;
    margin-right: 15px;
    font-size: 1.2rem;
    margin-bottom: 5px;
}

#recolha ul li{
    text-align: left;
    margin-right: 15px;
    font-size: 1.2rem;
    margin-bottom: 5px;
}

#recolha ul li::marker{
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #131924;
    display: block;

}

#recolha ul li .local h3{
    margin-bottom: 0;
}

#recolha ul li .local a{
    color: #fff;
    font-weight: 200;
    font-size: 12px;
    text-decoration: none;
}

/* Formulário de Contato */
.container form {
    display: flex;
    flex-direction: column;
    max-width: 600px;
    margin: 0 auto;
}

.container form label {
    margin-bottom: 5px;
    font-weight: bold;
}

form input, form textarea {
    color: #fff;
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    background: none;
}

.container form textarea{
    resize: none;
    height: 80px;
}

.container form button {
    padding: 10px;
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 20px;    
    cursor: pointer;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    transition: all 0.3s ease;
}

.container form button:hover {
    background-color: #2e3944ad;
}

#contacto{
    background-color: #333333ab;
}

/* Secção antes da animação */
.secao {
    opacity: 0; /* Inicialmente invisível */
    transform: translateY(-30px); /* Inicialmente deslocada para cima */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Animação suave */
}

/* Secção quando animada */
.secao.visivel {
    opacity: 1; /* Torna a secção visível */
    transform: translateY(0);
}

/* Mensagem de erro */
.erro {
    color: #ff4d4d;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 5px;
}

/* Mensagem de sucesso */
.sucesso {
    color: #155724;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 5px;
}

/* Estilos do Footer */
footer {
    margin-top: 25px;
    background-color: #333333ab; /* Cor de fundo escura */
    color: white; /* Texto branco */
    padding: 40px 20px; /* Espaçamento */
}

/* Container do footer */
.footer-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

/* Estilo das seções dentro do footer */
.footer-section {
    flex: 1;
    padding: 10px;
    min-width: 220px;
    margin: 10px;
}

.footer-section a{
    color: #ccc; /* Cor dos links */
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section a:hover {
    color: #1ab912; /* Cor do link ao passar o mouse */
}

/* Cabeçalhos das seções */
.footer-section h3 {
    font-size: 1.2em;
    margin-bottom: 10px;
    color: #ffffff; /* Cor laranja suave para os títulos */
}
.footer-section p{
    color: #ccc;
}

.footer-section h3::after {
    content: "";
    width: 50px;
    height: 3px;
    background-color: #1ab912;
    left: 0;
    display: flex;
    border-radius: 20px;
}

/* Links dentro do footer */
.footer-section ul {
    list-style-type: none;
    padding: 0;
}

.footer-section ul li {
    margin-bottom: 10px;
}

.footer-section ul li a {
    color: #ccc; /* Cor dos links */
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section ul li a:hover {
    color: #1ab912; /* Cor do link ao passar o mouse */
}
.footer-section img{
    margin-top: 15px;
    width: 100px;
}

/* Estilo das redes sociais */
.social-icons {
    display: flex;
    gap: 10px;
}

.social-icon {
    font-size: 1.5em;
    color: #ccc;
    transition: color 0.3s ease;
}
.social-icon i {
    color: #ccc;
    transition: all 0.3s ease-in-out;
}
.social-icon:hover i{
    color: #1ab912; /* Cor de destaque nas redes sociais */
}

/* Estilo do copyright */
.footer-bottom {
    text-align: center;
    padding: 10px 0;
}

.footer-bottom p {
    margin: 0;
    font-size: 0.9em;
    color: #ccc;
}

/* Responsividade */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        align-items: center;
    }

    .footer-section {
        text-align: center;
    }
    .footer-section h3::after {
        display: none;
    }
    .social-icons {
        display: flex;
        justify-content: center;
    }
}

/* Estilo do Formulário */
.newsletter-form {
    display: flex;
    margin-top: 15px;
}

/* Contêiner do input e botão */
.input-container {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 400px; /* Define a largura máxima do campo de e-mail e botão */
}

/* Estilo do Campo de Input */
.input-container input[type="email"] {
    width: 100%;
    padding: 10px 15px;
    padding-right: 120px; /* Adiciona espaço para o botão */
    font-size: 1rem;
    border: 1px solid #999;
    border-radius: 10px; /* Bordas arredondadas */
    outline: none;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Sombra leve */
    box-sizing: border-box;
}
.input-container input::placeholder{
    color: #666;
}

/* Estilo do Botão */
.input-container button {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-75%);
    padding: 5px 10px;
    font-size: 1.5rem;
    border: none;
    border-radius: 20px;
    background: transparent;/* Cor do botão */
    color: #999;
    cursor: pointer;
    transition: color 0.3s ease;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Sombra leve */
}

/* Botão ao passar o mouse */
.input-container button:hover {
    color: #cccccc; /* Cor mais escura ao passar o mouse */
}

/* Responsividade para dispositivos menores */
@media (max-width: 768px) {
    .input-container {
        max-width: 100%; /* Ocupa toda a largura disponível */
    }
}

/* Para WebKit Browsers (Chrome, Safari, Edge) */

/* Trilho da scrollbar */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

/* Cor de fundo da trilha da scrollbar */
::-webkit-scrollbar-track {
    background: transparent; /* Gradiente suave */
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); /* Efeito de sombra interna */
}

/* Thumb da scrollbar */
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #999, #666); /* Gradiente para o thumb */
    border-radius: 10px;
    border: 2px solid transparent; /* Espaço ao redor do thumb */
    background-clip: content-box;  /* Permite ver a borda transparente */
}

/* Thumb ao passar o mouse */
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #777, #444); /* Cor mais escura ao passar o mouse */
}

/* Para Firefox */
* {
    scrollbar-width: thin;               /* Define a largura como "thin" */
    scrollbar-color: #666 #f0f0f0;       /* Thumb e trilha */
}

/* Animação na Scrollbar - Thumb ao interagir */
::-webkit-scrollbar-thumb {
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #444; /* Altera a cor ao passar o mouse */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Efeito de sombra ao interagir */
}

.parcerias .imagens{
    display: flex;
    justify-content: center;
    align-items: center;
}
.parcerias .imagens img{
    width: 300px;
}
.parcerias .texto h2{
    text-align: center;
    font-size: 2.5rem;
}

.pesquisa{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.pesquisa input{
    color: #fff;
    margin-bottom: 25px;
    padding: 15px 150px;
    border: 2px solid #ccc;
    border-radius: 30px;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    background: none;
    margin-bottom: 2rem;
    text-align: center;
}

#document-list{
    display: flex;
    flex-direction: column;
}

#document-list .document{
    display: flex;
    flex-direction: row;
    padding: 20px 25px;
    background-color: #13192479;
    transition: all 0.3s ease-in-out;
    border: #2E3944 1px solid;
}
#document-list .document .document-name{
    display: flex;
    flex-direction: row;
    width: 90%;
}
#document-list .document strong{
    display: flex;
    text-align: left;
    align-items: center;
    justify-content: flex-start;
}
#document-list .document .botoes{
    justify-content: right;
    justify-items: right;
}
#document-list a{
    text-decoration: none;
}   
#document-list i{
    font-size: 1.5rem;
    color: #fff;
    margin: 10px;
    transition: all 0.3s ease-in-out;
}
#document-list .document .botoes i:hover{
    color: #0FA4AF;
    transform: scale(1.1);
}
#concursos .img-concursos{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#concursos .img-concursos img{
    margin-top: 15px;
    width: 500px;
}

@media screen and (max-width: 768px) {
    #concursos .img-concursos img{
        width: 300px;
    }
    
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
}

.gallery-item {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 8px;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

.lightbox-open {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.lightbox-open img {
    max-width: 75%;
    max-height: 75vh;
}

.centered-table {
    margin: 0 auto;
    width: 80%;
    border-collapse: collapse;
}

.centered-table th, .centered-table td {
    border: 1px solid #ddd;
    padding: 8px;
}

.centered-table td.actions {
    text-align: center;
}   

.centered-table th {
    background: transparent;
    text-align: center;
}

.centered-table button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: white;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.centered-table button:hover {
    transform: scale(1.1);
    color: #b1b1b1;
    cursor: pointer;
}

.pdf-icon {
    width: 16px;
    height: 16px;
    margin-right: 8px;
}

.search-container {
    text-align: center;
    margin-bottom: 20px;
}

#searchBar {
    color: #fff;
    background: transparent;
    width: 75%;
    padding: 10px;
    font-size: 16px;
    border-radius: 10px;
    border: #fff solid 2px;
    margin-bottom: 5px;
    transition: all 0.1s ease-in-out;
}
#searchBar:hover {
    background-color: #d2d2d23a;
}
.imagens-modulo {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.imagens-modulo img {
    border-radius: 10px;
    margin: 10px;
    width: 55%;
}
.imagens-modulo h3{
    text-align: center;
}

#quiz input {
    text-align: center;
}

#quizForm .quiz-question.nome{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#quizForm .quiz-question.nome input{
    width: 65%
}

#quizForm .quiz-question.nome p{
    margin-bottom: 10px;
}

#quizForm .quiz-question p{
    margin-bottom: 15px;
}

#quizForm button {
    margin-top: 20px;
}

#respostas-detalhes .btn-voltar{
    margin-top: 20px;
    width: 100px;
    height: 25px;
    border-radius: 10px;
    background-color: rgba(255, 0, 0, 0.492);
    color: white;
}

#alunos-lista .btn-aluno{
    margin-top: 20px;
    width: 150px;
    height: 50px;
    border-radius: 15px;
    background-color: rgba(21, 157, 14, 0.589);
    color: white;
    border: none;
    margin: 10px
}

.top-message {
    position: relative; /* Changed from fixed to relative */
    width: 100%;
    background-color: rgba(13, 38, 12, 0.8);
    color: white;
    padding: 15px 30px;
    text-align: center;
    box-sizing: border-box;
    animation: slideDown 0.5s ease-out;
}

.top-message p {
    margin-bottom: 10px;
}

.top-message button {
    padding: 10px;
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 20px;    
    cursor: pointer;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    transition: all 0.3s ease;
}

.top-message button:hover {
    background-color: #2e3944ad;
}

.top-message a {
    color: #fff;
    text-decoration: none;
}

.top-message .close-btn {
    position: absolute;
    top: 15px;
    right: 25px;
    cursor: pointer;
    font-size: 20px;
    transition: all 0.3s ease-in-out;
}

.top-message .close-btn:hover {
    font-size: 22px;
    color: #b2b2b2
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

#message {
    opacity: 0;
    margin: 5px;
    transition: all 0.5s ease-in-out;
}