/* Fix for logo transparency issues */
.logo img {
    background-color: transparent !important;
    mix-blend-mode: normal !important; /* Use normal instead of unset */
    -webkit-background-clip: initial !important; /* Ensure webkit browsers handle transparency properly */
    background-clip: initial !important;
}

.footer-logo img {
    background-color: transparent !important;
    mix-blend-mode: normal !important; /* Use normal instead of unset */
    -webkit-background-clip: initial !important; 
    background-clip: initial !important;
}

/* Fix for dark mode */
body.dark-theme .logo img,
body.dark-theme .footer-logo img {
    filter: brightness(1) !important; /* Ensures visibility in dark mode */
    background-color: transparent !important;
}

/* Additional fixes for any parent containers */
.logo, .footer-logo {
    background-color: transparent !important;
    position: relative; /* Ensure proper stacking context */
    z-index: 1; /* Ensure logo is above other elements */
}

/* Ensure the dark logo has appropriate styling */
.dark-logo {
    background-color: transparent !important;
}

/* Fix black background on dark logo for mobile */
@media (max-width: 767px) {
    .dark-logo, .light-logo {
        background-color: transparent !important;
        -webkit-background-clip: initial !important;
        background-clip: initial !important;
        /* Remove any potential box shadow causing a black "halo" effect */
        box-shadow: none !important;
    }
    
    /* Override any potential header background that might affect the logo */
    header .logo {
        background-color: transparent !important;
    }
    
    /* Force proper rendering on mobile devices */
    .logo img {
        isolation: isolate;
        filter: none !important;
    }
}

/* Fix for Firefox */
@-moz-document url-prefix() {
    .logo img, .footer-logo img {
        background-color: transparent !important;
    }
}

/* Fix for Edge/IE */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .logo img, .footer-logo img {
        background-color: transparent !important;
    }
}