html, body {
    height: 100%; /* Garante que o body ocupe toda a altura da tela */
    margin: 0;
    padding: 0;
    font-family: "Calibri", "Sans-serif";
    display: flex;
    flex-direction: column;
}

body {
    background-image: url('../imagens/background/biblioteca-background.jpg'); /* Caminho da imagem */
    background-size: cover; /* Ajusta a imagem para cobrir toda a tela */
    background-position: center; /* Centraliza a imagem */
    background-attachment: fixed; /* Fixa o fundo para não rolar com a página */
    background-repeat: no-repeat; /* Evita repetição da imagem */
    padding-top: 70px; /* Compensa a altura da navbar fixa */
}

main {
    flex: 1; /* Faz o conteúdo principal ocupar o espaço disponível */
    margin-bottom: 50px; /* Espaço entre o conteúdo e o footer */
}

.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1030; /* Garante que a navbar fique acima do conteúdo */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Página Inicial */
.home {
    padding: 3%;
    text-align: center;
}

.hero {
    background-color: #1B5E20;
    color: #f5f5f5;
    padding: 40px 20px;
    border-radius: 10px;
    margin-bottom: 40px;
}

.hero h1 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
}

.hero p {
    font-size: 20px;
    margin-bottom: 20px;
}

.hero .btn {
    padding: 10px 20px;
    font-size: 18px;
    background-color: #388E3C;
    color: #fff;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.hero .btn:hover {
    background-color: #226826;
}

.features {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.feature {
    background-color: #f5f5f5;
    padding: 20px;
    border-radius: 10px;
    max-width: 300px;
    width: 100%;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.feature i {
    font-size: 48px;
    color: #1B5E20;
    margin-bottom: 15px;
}

.feature h2 {
    font-size: 24px;
    color: #1B5E20;
    margin-bottom: 10px;
}

.feature p {
    font-size: 16px;
    color: #2b2b2b;
    margin-bottom: 20px;
}

.feature .btn {
    padding: 8px 16px;
    font-size: 16px;
    background-color: #388E3C;
    color: #fff;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.feature .btn:hover {
    background-color: #226826;
}

/*--------------- Quem somos ----------------*/

.quem-somos{
    display: flex;
    flex-direction: column;

    font-weight: 600;
    font-size: 20px;
    text-align: justify;
    color: #2b2b2b;

    padding-left: 3%;
    padding-right: 3%;
    margin: 80px auto; /* Centraliza o conteúdo e adiciona margem superior e inferior */
    
    border-radius: 0.5%;

    max-width: 1200px;

    background-color: #f5f5f5;
}

.quem-somos h1{
    color: #1B5E20;
    font-size: 40px;
    font-weight: 700;

    border-bottom: 4px solid #2E7D32;

    padding-bottom: 10px;
    padding-top: 2%;    
}

.quem-somos h3{
    color: #1B5E20;
    font-size: 28px;
    margin-top: 20px;
    font-weight: 600;
}

.quem-somos a{
    text-decoration: none;
}

.quem-somos a, .quem-somos span{
    color: #388E3C;
    font-weight: bold;
    transition: color 0.3s ease;
}

.quem-somos a:hover {
    color: #226826;
    text-decoration: underline;
}

.equipe{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.equipe h1{
    width: 100%;
}

.professores, .bolsistas{
    width: 49%;
}

.email{
    padding-bottom: 2%;
}

/* A/* Estilo para a página de cursos */
.cursos {
    display: flex;
    flex-direction: column;
    font-weight: 600;
    font-size: 20px;
    text-align: justify;
    color: #2b2b2b;
    padding: 30px 15px;
    margin: 80px auto; /* Centraliza o conteúdo e adiciona margem superior e inferior */
    border-radius: 0.5%;
    max-width: 1200px;
    background-color: #f5f5f5;
}

.cursos h1 {
    color: #1B5E20;
    font-size: 40px;
    font-weight: 700;
    border-bottom: 4px solid #2E7D32;
    padding-bottom: 10px;
    padding-top: 2%;
    text-align: center;
}

.cursos .btn-container {
    display: flex;
    justify-content: center;
    margin: 20px;
}

.cursos .btn {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #388E3C;
    color: white;
    border: none;
    border-radius: 5px;
    margin: 5px;
    transition: background-color 0.3s ease;
}

.cursos .btn:hover {
    background-color: #226826;
}

.cursos .curso-container {
    display: none;
    margin-top: 20px;
    text-align: left;
    max-width: 100%;
    background: rgba(0, 0, 0, 0.05);
    padding: 20px;
    border-radius: 10px;
}

.cursos .curso {
    border-bottom: 1px solid #ddd;
    padding: 15px 0;
}

.cursos .curso h3 {
    margin: 0;
    color: #1B5E20;
}

.cursos .curso p {
    color: #2b2b2b;
}

.cursos .curso a {
    display: block;
    margin-top: 10px;
    color: #388E3C;
    text-decoration: none;
    font-weight: bold;
}

.cursos .curso a:hover {
    color: #226826;
    text-decoration: underline;
}

.sem-cursos {
    text-align: center;
    font-size: 30px;
    color: #2b2b2b;
    margin-top: 20px;
}

.edital-lista {
    margin: 0 0 10px 0;
    padding-left: 18px;
}
.edital-lista li {
    margin-bottom: 4px;
}
.edital-nome {
    font-weight: 600;
    color: #1B5E20;
    margin-right: 4px;
}

/* Estilo para a página de galeria */
.galeria {
    display: flex;
    flex-direction: column;
    font-weight: 600;
    font-size: 20px;
    text-align: justify;
    color: #2b2b2b;
    padding: 3%;
    margin: 80px auto; /* Centraliza o conteúdo e adiciona margem superior e inferior */
    border-radius: 0.5%;
    max-width: 1200px;
    background-color: #f5f5f5; /* Fundo consistente com outras páginas */
}

.galeria h1 {
    color: #1B5E20;
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 20px;
    text-align: center;
}

.galeria-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.galeria-item {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 10px;
    max-width: 300px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.galeria-img {
    width: 100%; /* Faz a imagem ocupar toda a largura do contêiner */
    height: 200px; /* Define uma altura fixa */
    object-fit: cover; /* Garante que a imagem seja cortada proporcionalmente para preencher o espaço */
    border-radius: 10px; /* Mantém as bordas arredondadas */
    margin-bottom: 10px;
}

.galeria-titulo {
    font-size: 16px;
    color: #2b2b2b;
    font-weight: 600;
}

/* Footer */

footer {
    background-color: #343a40; /* Cor de fundo escura */
    color: #f8f9fa; /* Texto claro para contraste */
    text-align: center;
    padding: 25px; /* Ajuste de espaçamento */
    width: 100%; /* Garante que o footer ocupe toda a largura */
    position: relative; /* Mantém o footer no fluxo normal */
    left: 0; /* Garante que o footer comece no lado esquerdo */
    bottom: 0; /* Garante que o footer fique na parte inferior */
}

footer .text-body-secondary {
    color: aliceblue !important; /* Cor clara para contraste */
}

footer .text-body-secondary:hover {
    color: #81C784 !important; /* Verde médio ao passar o mouse */
}

footer .list-unstyled {
    display: flex;
    justify-content: center; /* Centraliza os ícones sociais */
    gap: 15px; /* Espaçamento entre os ícones */
}

footer .nav-link {
    display: inline-block; /* Garante que o link ocupe apenas o espaço do texto */
    padding: 0; /* Remove espaçamento interno */
    margin: 0; /* Remove margens extras */
    width: auto; /* Remove qualquer largura extra */
    text-align: center; /* Centraliza o texto dentro do link */
    line-height: normal; /* Garante que a altura da linha seja normal */
}

footer .nav-item {
    margin: 0; /* Remove margens extras */
    padding: 0; /* Remove espaçamento interno desnecessário */
    width: auto; /* Garante que o item ocupe apenas o espaço necessário */
    text-align: center; /* Centraliza o texto dentro do item */
}

footer .nav {
    display: flex;
    flex-direction: column; /* Garante que os itens fiquem empilhados */
    align-items: center; /* Centraliza os itens horizontalmente */
    gap: 5px; /* Espaçamento entre os itens */
    padding: 0; /* Remove qualquer padding extra */
    margin: 0; /* Remove qualquer margem extra */
}

footer ul {
    padding: 0; /* Remove padding do contêiner da lista */
    margin: 0; /* Remove margem do contêiner da lista */
    list-style: none; /* Remove os marcadores da lista */
}

/* Ajuste de margens para dispositivos pequenos */
@media (max-width: 576px) {
    .navbar-brand img {
        height: 40px;
    }

    footer {
        text-align: center;
    }

    .hero h1 {
        font-size: 32px;
    }

    .hero p {
        font-size: 16px;
    }

    .feature {
        max-width: 100%;
    }

    .home {
        padding: 5%;
    }

    /* Página de cursos */
    .cursos {
        padding: 20px 10px;
        margin: 20px 10px;
    }

    .cursos h1 {
        font-size: 28px;
    }

    .cursos .btn-container {
        flex-direction: column;
        align-items: center;
    }

    .cursos .btn {
        width: 90%;
        margin: 5px 0;
    }

    /* Página Quem Somos */
    .quem-somos {
        padding: 20px 10px;
        margin: 20px 10px;
        font-size: 16px;
    }

    .quem-somos h1 {
        font-size: 28px;
    }

    .quem-somos h3 {
        font-size: 22px;
    }

    .equipe {
        flex-direction: column;
    }

    .professores, .bolsistas {
        width: 100%;
        margin-bottom: 20px;
    }

    /* Página de galeria */
    .galeria {
        padding: 20px 10px;
        margin: 20px 10px;
    }

    .galeria h1 {
        font-size: 28px;
    }

    .galeria-item {
        max-width: 100%;
        width: 100%;
    }
}

@media (min-width: 577px) and (max-width: 768px) {
    .hero h1 {
        font-size: 36px;
    }

    .feature {
        max-width: 45%;
        flex: 0 1 calc(50% - 20px);
    }

    /* Página de cursos */
    .cursos {
        padding: 25px;
        margin: 40px 20px;
    }

    .cursos h1 {
        font-size: 32px;
    }

    /* Página Quem Somos */
    .quem-somos {
        padding: 25px;
        margin: 40px 20px;
        font-size: 18px;
    }

    .quem-somos h1 {
        font-size: 32px;
    }

    .equipe {
        flex-direction: column;
    }

    .professores, .bolsistas {
        width: 100%;
        margin-bottom: 20px;
    }

    /* Página de galeria */
    .galeria {
        padding: 25px;
        margin: 40px 20px;
    }

    .galeria-item {
        max-width: 45%;
        flex: 0 1 calc(50% - 20px);
    }
}

@media (min-width: 769px) and (max-width: 992px) {
    .feature {
        max-width: 30%;
        flex: 0 1 calc(33.333% - 20px);
    }

    /* Página de cursos */
    .cursos {
        padding: 30px;
        margin: 60px 30px;
    }

    /* Página Quem Somos */
    .quem-somos {
        padding: 30px;
        margin: 60px 30px;
    }

    /* Página de galeria */
    .galeria {
        padding: 30px;
        margin: 60px 30px;
    }

    .galeria-item {
        max-width: 30%;
        flex: 0 1 calc(33.333% - 20px);
    }
}


.formulario {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background-color: #f5f5f5; /* Fundo consistente com outras páginas */
    border-radius: 10px;
    max-width: 600px;
    margin: 0 auto; /* Centraliza o formulário na página */
}