/* Cores Usadas no Site */
:root {
    --primary: #104911;
    --secondary: #548c2f;
    --color-neutral-0: #0e0c0c;
    --color-neutral-10: #171717;
    --color-neutral-30: #a8a29e;
    --color-neutral-40: #f5f5f5;

}

/* Seletor Universal do HTML*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 1px;

}

/* Corpo do Site */
body{
    font-family: "Poppins", Arial, sans-serif;
    overflow-x: hidden;
}

/* Seções do Site */
section {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    color: white;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

section.active{
    opacity: 1;
    transform: translateY(0);
}

/* Reponsividade do Site */

/* Tablets e telas médias */
@media (max-width: 1024px) {
    #footer_content {
        grid-template-columns: repeat(2, 1fr);
        text-align: center;
    }

    #footer_social_media {
        justify-content: center;
    }
}

/* Celulares */
@media (max-width: 600px) {
    #footer_content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #footer_contacts {
        margin-bottom: 1.5rem;
    }

    .footer-list {
        align-items: center;
    }

    #footer_social_media {
        justify-content: center;
    }
}


/* Links */
a {
    color: black;
}

/* Efeito JS Digitando na Página HOME */
.typed-text{
    color: var(--primary);
}

/* Responsividade do Site pt2 */
.menu-btn {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    display: none; /* aparece só no mobile */
}

@media (max-width: 768px) {

    header .flex {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    /* Mostra o botão no mobile */
    .menu-btn {
        display: block;
    }

    /* Esconde o menu por padrão */
    header nav ul {
        display: none;
        flex-direction: column;
        background: white;
        width: 100%;
        padding: 10px;
        position: absolute;
        top: 70px; /* abaixo do header */
        left: 0;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    /* Quando o menu estiver aberto */
    header nav ul.open {
        display: flex;
    }

    header ul li {
        margin: 10px 0;
        text-align: center;
    }
}