footer {
    background-color: #333;
    color: #fff;
    padding: 20px;
    font-family: Arial, sans-serif;
    width: 100%; /* Garantir que o footer ocupe toda a largura da tela */
    box-sizing: border-box; /* Inclui padding e borda no cálculo da largura */
    margin: 0; /* Remover qualquer margem adicional */
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    width: 100%; /* Certificar-se de que a container ocupa toda a largura */
    box-sizing: border-box; /* Para que o padding não crie overflow */
}

.footer-column {
    flex: 1; /* As colunas ocupam o mesmo espaço, distribuindo igualmente */
    min-width: 250px; /* Garante que as colunas não fiquem menores que 250px */
}

.footer-column h4 {
    margin-bottom: 10px;
    font-size: 18px;
    color: #fff;
}

.footer-column p {
    font-size: 14px;
    color: #ccc;
    line-height: 1.5;
}

.footer-column .footer-logo {
    max-width: 200px; /* A imagem nunca será maior que 200px */
    height: auto; /* A altura será ajustada automaticamente */
    margin-top: 10px;
}

.footer-column ul {
    list-style-type: none; /* Remove os marcadores de lista */
    padding: 0;
    margin: 0;
}

.footer-column ul li {
    margin-bottom: 10px; /* Adiciona espaço entre os itens */
}

.footer-column ul li a {
    text-decoration: none; /* Remove o sublinhado */
    color: #fff; /* Define a cor do link */
    transition: color 0.3s ease; /* Animação ao passar o mouse */
}

.footer-column ul li a:hover {
    color: #f9c74f; /* Altere para uma cor diferente ao passar o mouse (exemplo: dourado) */
}

.footer-copyright {
    text-align: center;
    margin-top: 20px;
    border-top: 1px solid #555;
    padding-top: 10px;
    font-size: 14px;
    color: #ccc;
}

.footer-copyright a {
    color: #f9c74f;
    text-decoration: none;
}

/* Media Query para telas pequenas (como celulares) */
@media (max-width: 768px) {
    .footer-container {
        justify-content: center; /* Centraliza as colunas no espaço disponível */
    }

    .footer-column {
        text-align: center; /* Centraliza o conteúdo dentro das colunas */
        flex: none; /* As colunas não irão mais dividir o espaço igualmente */
        min-width: 100%; /* As colunas ocupam toda a largura disponível */
    }

    .footer-column ul li {
        margin-bottom: 15px; /* Maior espaço entre os itens na versão mobile */
    }

    .footer-column ul li a {
        font-size: 16px; /* Aumenta o tamanho da fonte dos links em dispositivos móveis */
    }
}