/* EMERGENCY MOBILE LOGO FIX */
/* This is the simplest possible fix to center the logo ONLY on mobile - NEVER on desktop */

/* Only target actual mobile devices - 768px and below */
@media screen and (max-width: 768px) {
    .navbar .logo {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 9999 !important;
        text-align: center !important;
    }
    
    .navbar .logo img {
        max-height: 60px !important; /* Increased from 45px to 60px */
    }
    
    .navbar.scrolled .logo img {
        max-height: 50px !important; /* Increased from 35px to 50px */
    }
}

/* Smaller mobile screens */
@media screen and (max-width: 480px) {
    .navbar .logo img {
        max-height: 50px !important; /* Increased from 40px to 50px */
    }
    
    .navbar.scrolled .logo img {
        max-height: 40px !important; /* Increased from 30px to 40px */
    }
}

/* Reset for desktop/tablet - ensure desktop styles are NOT affected */
@media screen and (min-width: 769px) {
    .navbar .logo {
        position: absolute !important;
        left: 50% !important;
        top: auto !important;
        transform: translateX(-50%) !important;
        text-align: center !important;
        z-index: auto !important;
    }
}