/* Mobile Logo Centering Fix for All Pages */
@media (max-width: 768px) {
    /* Center the logo container */
    #logo, .logo, .logo-left {
        text-align: center !important;
        margin: 0 auto !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 0;
    }
    
    /* Center logo link */
    #logo a, .logo a, .logo-left a {
        display: inline-block !important;
        margin: 0 auto !important;
        text-align: center !important;
    }
    
    /* Center logo image */
    .logo-image, #logo img, .logo img, .logo-left img {
        display: block !important;
        margin: 0 auto !important;
        width: auto !important;
        max-width: 180px !important;
        height: auto !important;
        max-height: 70px !important;
    }
    
    /* Fix navbar layout on mobile */
    .navbar {
        padding: 10px 15px !important;
    }
    
    .navbar .container {
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .navbar-toggler {
        position: absolute;
        left: 15px;
        top: 15px;
    }
    
    /* Ensure header is properly aligned */
    .header, header {
        text-align: center;
    }
    
    /* Fix any float issues */
    .logo-left {
        float: none !important;
    }
}

@media (max-width: 480px) {
    /* Even smaller screens */
    .logo-image, #logo img, .logo img, .logo-left img {
        max-width: 150px !important;
        max-height: 60px !important;
    }
    
    #logo, .logo, .logo-left {
        padding: 8px 0;
    }
}