/* Remove Bootstrap container max-width */
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1320px !important;
}

/* Header layout for very small screens */
@media (max-width: 370px) {
    .wpo-site-header .container-fluid {
        padding: 8px 10px !important;
    }
    .wpo-site-header .row {
        margin: 0 !important;
    }
    .navbar-header {
        gap: 5px !important;
    }
    .navbar-header img {
        height: 30px !important;
    }
    .navbar-toggler {
        width: 40px !important;
        height: 40px !important;
        padding: 8px !important;
    }
    .navbar-toggler .icon-bar {
        width: 20px !important;
    }
}

/* Top bar text alignment for small screens */
@media (max-width: 450px) {
    #header > div:first-child {
        padding: 10px 0 !important;
    }
    #header > div:first-child .d-flex.justify-content-between {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 10px !important;
        flex-wrap: nowrap !important;
    }
    #header > div:first-child .d-flex.align-items-center {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        font-size: 0.85em !important;
        flex: 1 !important;
    }
    #header > div:first-child .d-flex.align-items-center i {
        font-size: 14px !important;
        flex-shrink: 0 !important;
    }
    #header > div:first-child .d-flex.align-items-center span {
        font-size: 12px !important;
        line-height: 1.3 !important;
        white-space: normal !important;
    }
}

/* Header layout for tablets - Logo left, Hamburger right */
@media (min-width: 768px) and (max-width: 991px) {
    .wpo-site-header {
        padding: 0 !important;
    }
    .wpo-site-header .container-fluid {
        padding: 12px 20px !important;
    }
    .navigation.navbar {
        padding: 0 !important;
    }
    .wpo-site-header .row {
        margin: 0 !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    /* Logo column - left side */
    .wpo-site-header .col-lg-3.col-md-4 {
        flex: 0 0 auto !important;
        max-width: none !important;
        width: auto !important;
        order: 1 !important;
        padding: 0 !important;
    }
    .navbar-header {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }
    .navbar-header img {
        height: 40px !important;
    }
    /* Hide middle navigation column */
    .wpo-site-header .col-lg-6 {
        display: none !important;
    }
    /* Hamburger column - right side */
    .wpo-site-header .col-lg-3.col-md-3 {
        flex: 0 0 auto !important;
        max-width: none !important;
        width: auto !important;
        order: 2 !important;
        padding: 0 !important;
    }
    .d-flex.justify-content-end {
        padding: 0 !important;
        margin: 0 !important;
    }
    .mobail-menu {
        margin: 0 !important;
        padding: 0 !important;
    }
    .navbar-toggler {
        margin: 0 !important;
        padding: 10px !important;
        width: 45px !important;
        height: 45px !important;
    }
}

/* Mobile navbar - right side opening with light theme */
@media (max-width: 991px) {
    #navbar {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        width: 280px !important;
        height: 100vh !important;
        background: #e9e9e9 !important;
        z-index: 9999 !important;
        overflow-y: auto !important;
    }
    #navbar .nav.navbar-nav {
        padding: 0 !important;
    }
    #navbar .nav.navbar-nav li {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    }
    #navbar .nav.navbar-nav li a {
        color: #4e4e4e !important;
        padding: 15px 30px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        font-size: 16px !important;
    }
    #navbar .nav.navbar-nav li a:hover {
        background: rgba(255, 105, 51, 0.1) !important;
    }
    .menu-close {
        position: absolute !important;
        top: 15px !important;
        right: 15px !important;
        width: 40px !important;
        height: 40px !important;
        background: #ff6933 !important;
        border: none !important;
        border-radius: 5px !important;
        color: #fff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 999 !important;
    }
    .menu-close i {
        color: #fff !important;
    }
}