/*Variáveis*/
:root {
    --preto: #000000;
    --preto-claro:#1d1d1dad;
    --branco: #FFF;
    --bege:#FFFAEE;
    --azul-pastel:#d6eeee;
}
/* Estilização do Footer */
footer {
    background-color: var(--preto-claro); 
    color: var(--branco);
    padding: 20px 0; /* Reduz a altura do footer */
    text-align: center;
}

footer h5 {
    font-size: 14px; /* Reduz o tamanho do texto */
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 5px; /* Reduz o espaçamento inferior */
}

.social-icons, .contact-icons {
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Garante um layout responsivo */
    gap: 8px; /* Reduz o espaçamento entre ícones */
}

.social-icons li {
    display: inline-block;
}

.social-icons a, .contact-icons a {
    font-size: 18px; /* Ajusta o tamanho dos ícones */
    color: var(--branco);
    transition: color 0.3s ease;
    text-decoration: none;
    padding: 5px; /* Melhora o clique nos ícones */
}

.social-icons a:hover, .contact-icons a:hover {
    color: #cccccc; /* Cor ao passar o mouse */
}

footer p {
    font-size: 12px; /* Reduz o tamanho do texto */
    color: #d4cebe;
    margin-top: 10px; /* Reduz o espaçamento superior */
}

/* Responsividade */
@media (max-width: 768px) {
    /* Esconde os textos "Nos Acompanhe" e "Entre em Contato" */
    .col-md-6 h5 {
        display: none;
    }

    /* Junta os ícones em uma única linha apenas no mobile */
    .footer-icons {
        display: flex;
        justify-content: center;
        gap: 10px;
        flex-wrap: nowrap;
    }

    /* Faz com que os ícones fiquem visíveis corretamente */
    .social-icons, .contact-icons {
        display: flex;
        gap: 10px;
        flex-wrap: nowrap;
    }

    /* Remove margens extras para manter alinhado */
    .social-icons, .contact-icons {
        margin: 0;
        padding: 0;
    }
}