@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;700&display=swap');

/* === FOOTER BASE === */
.site-footer {
    background-color: #003344;
    color: #fff;
    padding: 3rem 1.5rem 2rem;
    text-align: center;
    font-family: 'Lexend', sans-serif;
    opacity: 0;
    transition: opacity 1s ease;
    border-radius: 0 0 15px 15px;
}

.site-footer.visible {
    opacity: 1;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* === LOGO === */
.footer-logo img {
    max-width: 160px;
    height: auto;
    margin-bottom: 1.5rem;
}

/* === CONTACT INFO === */
.footer-info {
    margin-bottom: 1rem;
}

.footer-email {
    font-size: 1rem;
    color: #00ffcc;
    margin-bottom: 0.5rem;
}

.footer-email a {
    color: #00ffcc;
    text-decoration: none;
    border-bottom: 1px dashed #00ffcc;
    transition: color 0.3s ease;
}

.footer-email a:hover {
    color: #00bfff;
}

/* === SOCIAL ICONS === */
.social-icons {
    margin: 1.5rem 0;
}

.footer-icon {
    display: inline-block;
    font-size: 1.6rem;
    margin: 0 0.5rem;
    color: #fff;
    transition: transform 0.3s ease, color 0.3s ease;
    text-decoration: none;
}

.footer-icon:hover {
    transform: scale(1.2);
    color: #00ffcc;
}

.footer-icon.whatsapp {
    color: #25D366;
}

.footer-icon.whatsapp:hover {
    color: #1ebe54;
}

/* === WHATSAPP ICON: MOBILE ONLY === */
.mobile-only {
    display: none;
}

/* === VISITOR COUNTER === */
.visitor-counter {
    font-size: 0.95rem;
    margin: 1.5rem 0 0.5rem;
    color: #ffffffcc;
    text-align: center;
    letter-spacing: 0.5px;
}

.visitor-counter strong {
    font-weight: 700;
    color: #00ffcc;
}

/* === FOOTER CREDIT === */
.footer-credit {
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: #ccc;
    line-height: 1.6;
}

.footer-credit a {
    color: #00ffcc;
    text-decoration: none;
}

.footer-credit a:hover {
    color: #00bfff;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .mobile-only {
        display: inline-block;
    }

    .footer-email {
        font-size: 0.95rem;
    }

    .footer-icon {
        font-size: 1.4rem;
        margin: 0 0.4rem;
    }

    .footer-logo img {
        max-width: 120px;
    }

    .footer-credit {
        font-size: 0.85rem;
    }

    .visitor-counter {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .footer-container {
        padding: 0 1rem;
    }

    .footer-credit {
        font-size: 0.8rem;
    }

    .visitor-counter {
        font-size: 0.85rem;
    }
}