/* ===== ZENCIA LOGO GRADIENT STYLES ===== */
/* Universal logo text gradient styling for all Zencia branding */

/* Main Logo Text in Header */
.logo-text {
    background: linear-gradient(135deg, #18e4d8 0%, #0cc0c0 25%, #0c6c6c 50%, #003030 75%, #000000 90%, #fcfcfc 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 700 !important;
    display: inline-block !important;
}

/* Footer Logo Text */
.footer-logo-text {
    background: linear-gradient(135deg, #18e4d8 0%, #0cc0c0 25%, #0c6c6c 50%, #003030 75%, #000000 90%, #fcfcfc 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 700 !important;
    display: inline-block !important;
}

/* Alternative gradient with higher #18e4d8 priority */
.logo-text-alt,
.footer-logo-text-alt {
    background: linear-gradient(135deg, #18e4d8 0%, #18e4d8 20%, #0cc0c0 40%, #0c6c6c 60%, #003030 80%, #000000 95%, #fcfcfc 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 700 !important;
    display: inline-block !important;
}

/* Hover effect for interactive logos */
.logo-text:hover,
.footer-logo-text:hover {
    background: linear-gradient(135deg, #18e4d8 0%, #18e4d8 30%, #0cc0c0 50%, #0c6c6c 70%, #003030 85%, #000000 95%, #fcfcfc 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: gradientShift 3s ease infinite !important;
}

/* Gradient animation */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Ensure gradient works on all browsers */
@supports not (background-clip: text) {
    .logo-text,
    .footer-logo-text,
    .logo-text-alt,
    .footer-logo-text-alt {
        color: #18e4d8 !important;
    }
}

/* Animation for gradient backgrounds */
.logo-text,
.footer-logo-text {
    background-size: 200% 200% !important;
}

.logo-text:hover,
.footer-logo-text:hover {
    background-size: 200% 200% !important;
}