/* ============================================================
   GLOBAL PAGE BACKGROUND (fills the sides)
   ============================================================ */
body {
    background-color: #f5f5f5; /* grey */
    margin: 0;
    padding: 0;
}

/* ============================================================
   PAGE WIDTH (safe)
   This controls the page width WITHOUT causing side white bars
   ============================================================ */
.wrapper-static,
.wrapper-fluid {
    max-width: 1800px;
    margin: 0 auto;
}

/* ============================================================
   WHITE CONTENT BOX ONLY
   Put white background ONLY on the component container.
   ============================================================ */
.container-component {
    background-color: #ffffff; /* white */
    padding: 30px;
    box-sizing: border-box;
}

/* Remove unwanted white backgrounds from other containers */
.site-grid,
.container-main,
.com-content-article,
.com-content-category,
.blog-featured,
.blog {
    background: transparent !important;
}

/* ============================================================
   ARTICLE PAGES (full width inside the white box)
   ============================================================ */
.item-page,
article {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ============================================================
   FIX: RESTORE RESPONSIVE MENU BEHAVIOR
   ============================================================ */

/* Ensure the header/nav scales with screen size */
.container-header,
.container-nav {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Allow menu bar to wrap and scale */
.navbar-expand {
    flex-wrap: wrap !important;
    width: 100% !important;
}

/* Allow menu items to wrap instead of overflowing */
ul.mod-menu,
ul.mod-menu > li {
    flex-wrap: wrap !important;
}

/* Prevent page-width override from breaking the header */
.site-grid {
    max-width: 100% !important;
}
/* Center the horizontal menu */
.container-nav .navbar-nav,
ul.mod-menu {
    justify-content: center !important;
    text-align: center !important;
    width: 100%;
}

.container-nav .navbar {
    justify-content: center !important;
    width: 100%;
}
/* ============================================================
   REMOVE WHITE SIDE BARS CLEANLY
   ============================================================ */

/* Make the entire grid follow the viewport width */
.site-grid,
.wrapper-static,
.wrapper-fluid {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Keep only the content area white */
.container-component {
    background: #ffffff !important;
    max-width: 1800px;
    margin: 0 auto;
    padding: 30px;
    box-sizing: border-box;
}

/* Ensure the article/content inside doesn't create extra width */
.container-main,
.com-content-article,
.item-page,
article {
    max-width: 100% !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: transparent !important;
}