/* Importação de fonte Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');

/* Estilos gerais */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    scroll-padding-top: 2rem;
    scroll-behavior: smooth;
}

:root {
    --green-color: #c0c080;
    --light-green-color: #9D9D60;
    --musgo-color: #333300;
    --light-orange-color: #402722;
    --text-color: #080a0b;
    --bg-color: #ffffff;
    --verde-color: #60BF81;
}

body {
    background: url('pavuna-imagem-2.jpg') no-repeat center center fixed;
    background-size: cover;
    color: var(--text-color);
    font-family: "Poppins", sans-serif; /* Definindo a fonte para todo o corpo */
    overflow-x: hidden; /* Previne rolagem horizontal */
}

/* Estilos do header */
header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--verde-color);
    box-shadow: 0 8px 11px rgba(14, 55, 54, 0.15);
    padding: 20px;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    transition: 0.5s;
    left: 0;
    margin-bottom: auto;
}

/* Logo */
header .logo {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--bg-color); /* Ajusta a cor da logo para o fundo branco */
    margin-right: auto; /* Alinha a logo ao canto esquerdo */
}

/* Botão de Menu */
.menu-toggle {
    display: none; /* Oculta o botão de menu por padrão em telas grandes */
    background: none;
    border: none;
    color: var(--bg-color);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 10px;
    margin-left: auto; /* Alinha o botão de menu ao canto direito */
    z-index: 1001; /* Garante que o botão de menu esteja acima do header */
}

/* Navbar */
.navbar {
    display: flex;
    justify-content: center;
    flex-grow: 1;
    gap: 25px;
    margin-left: auto; /* Alinha a navbar ao canto direito */
}

.navbar li {
    display: inline; /* Mantém os itens da navbar na horizontal */
}

.navbar li a {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-color);
    padding: 0.5rem 1rem;
}

.navbar li a:hover {
    background: #080a0b;
    border-radius: 5rem;
    color: var(--bg-color);
    transition: background 0.5s;
}

/* Botão de fechar menu */
.close-menu {
    display: none; /* Oculta o botão de fechar por padrão */
    background: none;
    border: none;
    color: var(--bg-color);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 10px;
    position: absolute;
    top: 20px; /* Ajuste conforme necessário */
    right: 20px; /* Ajuste conforme necessário */
    z-index: 1001; /* Garante que o botão de fechar esteja acima da navbar */
}

/* Estilos para o main */
main {
    text-align: center; /* Centraliza o texto dentro do main */
    margin: 70px auto 20px; /* Ajuste a margem superior para dar espaço para o header fixo */
    margin-top: 70px;
    padding: 20px;
    max-width: 900px;
    background-color: #ffffff;
    border-bottom-left-radius: 15px; /* Define o raio para o canto inferior esquerdo */
    border-bottom-right-radius: 15px; /* Define o raio para o canto inferior direito */
    box-shadow: 3px 3px 5px #3c3c3cd5;
    overflow: hidden; /* Garante que o conteúdo não saia da área visível */
}

/* Ajusta o estilo do h2 e h3 para garantir que eles não sejam cortados */
main h2 {
    font-size: 2.5rem; /* Tamanho do título */
    font-weight: 700; /* Negrito para destaque */
    margin-bottom: 20px; /* Espaço abaixo do título */
    color: var(--text-color); /* Cor do texto do título */
    margin-top: 20px; /* Ajusta o espaço superior */
}

main h3 {
    font-size: 1.8rem; /* Tamanho do subtítulo */
    font-weight: 500; /* Peso do texto para diferenciação */
    margin-bottom: 20px; /* Espaço abaixo do subtítulo */
    color: var(--text-color); /* Cor do texto do subtítulo */
}

p {
    text-align: justify; /* Justifica o texto */
    margin-top: 20px; /* Espaço antes do parágrafo */
    margin-bottom: 20px; /* Espaço após o parágrafo */
    line-height: 1.8;
}

/* Estilos para o footer */
.footer {
    background: #12131e;
    color: white;
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    padding: 50px 10px;
    display: flex;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 3.5rem;
    overflow: hidden; /* Garante que o conteúdo não saia da área visível */
}

/* Ajustes do footer */
.footer .title-footer {
    color: #ffffff;
    font-weight: initial;
    font-size: 26px;
    margin-bottom: 15px;
}

.footer .title-footer span {
    color: var(--verde-color);
    font-weight: bold;
}

.footer .profile {
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile img {
    width: 100px; /* Ajuste conforme necessário */
    height: 100px; /* Ajuste conforme necessário */
    border-radius: 50%; /* Torna a imagem circular */
    object-fit: cover; /* Garante que a imagem se ajuste ao contêiner sem distorção */
}

.profile-text {
    display: flex;
    flex-direction: column;
}

.profile-name {
    font-weight: bold;
    font-size: 18px;
    color: var(--bg-color); /* ou a cor desejada */
    margin-bottom: 5px;
}

.profile-description {
    font-size: 14px;
    color: var(--bg-color); /* ou a cor desejada */
}

.footer .footer-icons {
    justify-content: flex-start;
    margin-bottom: 20px;
}

.footer .footer-icons a {
    display: inline-flex;
    width: 35px;
    height: 35px;
    cursor: pointer;
    background-color: #33383b;
    border-radius: 50%;
    font-size: 20px;
    color: #ffffff;
    justify-content: center;
    align-items: center;
    line-height: 1;
    margin-left: 10px;
    transition: 0.3s;
}

.footer .footer-icons a:hover {
    color: var(--verde-color);
}

/* Estilos responsivos */
@media (max-width: 500px) {
    /* Ajustes para telas menores que 500px */
    header {
        flex-direction: column; /* Alinha itens verticalmente */
        padding: 20px; /* Ajusta o padding conforme necessário */
    }

    .logo {
        margin-right: 0; /* Remove o alinhamento ao canto direito */
        margin-bottom: 20px; /* Adiciona um espaçamento inferior */
    }

    .menu-toggle {
        display: block; /* Exibe o botão de menu em telas menores que 500px */
        margin-left: auto; /* Alinha o botão de menu ao canto direito */
        position: absolute; /* Posiciona o botão de menu */
        top: 20px; /* Ajuste conforme necessário */
        right: 20px; /* Ajuste conforme necessário */
    }

    .navbar {
        display: none; /* Esconde a navbar por padrão */
        flex-direction: column; /* Dispor itens da navbar em coluna quando visível */
        width: 100%; /* Garantir que a navbar ocupe toda a largura */
        position: absolute; /* Posiciona a navbar sobre o conteúdo */
        top: 70px; /* Ajusta a posição da navbar abaixo do header */
        left: 0; /* Alinha a navbar à esquerda */
        background-color: var(--verde-color); /* Ajusta a cor de fundo */
        z-index: 1000; /* Garante que a navbar esteja acima do conteúdo */
    }

    .navbar.active {
        display: flex; /* Exibe a navbar quando ativa */
        text-align: center; /* Centraliza o texto na navbar */
    }

    .close-menu {
        display: block; /* Exibe o botão de fechar quando a navbar está ativa */
    }

    .image-container {
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden; /* Garante que a imagem não saia do contêiner */
        width: 100%;
        height: auto;
    }

    .image-container img {
        width: 100%;
        height: auto;
        object-fit: cover; /* Garante que a imagem preencha o contêiner sem distorcer */
    }

    .village,
    .pavuna_rio,
    .bica,
    .bica_da_mulata,
    .feirinha,
    .paroquia,
    .santo,
    .inclusao,
    .semear,
    .apolo,
    .santo2,
    .educar {
        width: 100%; /* Ajusta a largura da imagem para 100% em telas menores */
        height: auto; /* Mantém a proporção da imagem */
    }
}

@media (min-width: 501px) {
    /* Ajustes para telas maiores que 500px */
    .menu-toggle,
    .close-menu {
        display: none; /* Oculta os botões de menu em telas maiores que 500px */
    }

    header {
        padding: 20px 100px; /* Mantém o padding do header em telas grandes */
        flex-direction: row; /* Mantém o layout do header em linha */
        align-items: center; /* Alinha todos os itens verticalmente */
    }

    .logo {
        margin-right: 0; /* Alinha a logo ao canto esquerdo */
    }

    .navbar {
        display: flex; /* Exibe a navbar em telas maiores que 500px */
        flex-direction: row; /* Mantém os itens da navbar na horizontal */
        margin-left: auto; /* Alinha a navbar ao canto direito */
    }

    .navbar li {
        display: inline; /* Mantém os itens da navbar na horizontal */
    }
     
}