/* Header Gap Fixes - Add these to your existing CSS */

/* Remove default body margins and padding */
body {
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure header spans full width and has no gaps */
#header-outer {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    position: relative;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
}

/* Fix header container width */
#header-outer .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Adjust the header background pseudo-element */
#header-outer:before {
    position: absolute;
    content: "";
    top: 0px;
    width: 100% !important;  /* Changed from 60% to 100% */
    height: 100%;
    left: 0px;
    background-color: #343536;
    z-index: -1;
}

/* Fix navigation background */
#top nav ul.sf-menu.sf-js-enabled.sf-arrows:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 102%;
    background-color: #343536;
    right: 0% !important;  /* Changed from 95% to 0% */
    left: 0;
}

/* Remove any wrapper margins that might cause gaps */
#header-space {
    height: 0 !important;
}

/* Ensure main content starts right after header */
#page-header-wrap,
.container-wrap {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* For mobile responsiveness - adjust the existing media query */
@media (max-width: 1024px) {
    #header-outer:before {
        width: 100% !important;  /* Ensure full width on mobile too */
    }
}

/* Additional fix for very small screens */
@media (max-width: 480px) {
    #header-outer {
        overflow-x: hidden;
    }
}

/* Fix for specific navigation positioning issues */
@media (max-width: 1280px) {
    #top nav ul.sf-menu.sf-js-enabled.sf-arrows:before {
        right: 0% !important;
    }
}

@media (max-width: 1150px) {
    #top nav ul.sf-menu.sf-js-enabled.sf-arrows:before {
        right: 0% !important;
    }
}