/* ===== Footer ===== */
footer {
    width: 100%; /* Garante que o rodapé ocupe toda a largura */
    background-color: #333; /* Fundo escuro */
    color: #fff; /* Texto branco */
    padding: 1em 0; /* Espaçamento interno */
    text-align: left; /* Centraliza o conteúdo */
}

/* Container para centralizar o conteúdo */
footer .container {
    max-width: 1200px; /* Largura máxima do conteúdo */
    margin: 0 auto; /* Centraliza o container */
    padding: 0 1em; /* Espaçamento lateral */
}

/* Texto no Rodapé */
footer p {
    font-size: 0.9rem; /* Tamanho da fonte */
    margin: 0 0 1em 0; /* Espaçamento inferior */
}

/* Links no Rodapé */
footer nav ul {
    list-style: none; /* Remove marcadores de lista */
    padding: 0; /* Remove espaçamento interno */
    margin: 0 0 1em 0; /* Remove margens e adiciona espaçamento inferior */
    display: flex; /* Exibe os links em linha */
    justify-content: center; /* Centraliza os links */
    gap: 15px; /* Espaçamento entre os links */
}

footer nav ul li {
    display: inline; /* Exibe os itens da lista em linha */
}

footer nav ul li a {
    color: #fff; /* Cor dos links */
    text-decoration: none; /* Remove sublinhado */
    font-size: 0.9rem; /* Tamanho da fonte */
    transition: color 0.3s ease; /* Animação de transição suave */
}

footer nav ul li a:hover {
    color: #4CAF50; /* Verde no hover */
}

/* Ícones Sociais */
footer .social-icons {
    display: flex; /* Exibe os ícones em linha */
    justify-content: center; /* Centraliza os ícones */
    gap: 15px; /* Espaçamento entre os ícones */
    margin-top: 1em; /* Espaçamento superior */
}

footer .social-icons a {
    display: inline-block; /* Garante que os links se comportem como blocos */
    transition: transform 0.3s ease; /* Animação suave */
}

footer .social-icons a:hover {
    transform: scale(1.2); /* Aumenta o tamanho ao passar o mouse */
}

footer .social-icons img {
    width: 24px; /* Largura dos ícones */
    height: 24px; /* Altura dos ícones */
    vertical-align: middle; /* Alinha os ícones verticalmente */
}

.footer-link {
    color: #b0b8b7; /* Define a cor preta */
    text-decoration: none; /* Remove o sublinhado */
}

.footer-link:hover {
    color: #555; /* Alteração de cor no hover */
    text-decoration: underline;
}

/* Estilos Responsivos */
@media (max-width: 768px) {
    footer nav ul {
        flex-direction: column; /* Exibe os links em coluna */
        gap: 0.5em; /* Reduz o espaçamento entre os links */
    }

    footer p {
        font-size: 0.8rem; /* Reduz o tamanho da fonte */
    }

    footer nav ul li a {
        font-size: 0.8rem; /* Reduz o tamanho da fonte */
    }
}