/* ========================================
   LIVE SERVER FIX - Container Width Issue
   ======================================== */

/* CRITICAL: Force proper container behavior with high specificity */
.container,
div.container,
.container-fluid {
    width: 90% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
}

/* Prevent any horizontal overflow */
html {
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Fix Bootstrap row negative margins causing overflow */
.row {
    margin-left: -15px !important;
    margin-right: -15px !important;
    max-width: 100% !important;
}

/* Fix Bootstrap columns */
.col,
[class*="col-"] {
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
}

/* Fix navigation container specifically */
.navbar .container,
.navbar .nav-content {
    max-width: 1200px !important;
    width: 90% !important;
    margin: 0 auto !important;
}

/* Fix navigation links alignment */
.nav-content {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.nav-links {
    display: flex !important;
    gap: 2rem !important;
    align-items: center !important;
    margin-left: auto !important;
}

/* Fix hero section container */
.hero .container {
    max-width: 1200px !important;
    width: 90% !important;
}

/* Fix stats bar container */
.stats-bar .container {
    max-width: 1200px !important;
    width: 90% !important;
}

/* Fix all section containers */
.section .container {
    max-width: 1200px !important;
    width: 90% !important;
}

/* Ensure box-sizing is consistent everywhere */
*,
*::before,
*::after {
    box-sizing: border-box !important;
}

/* Fix any full-width sections that might be causing issues */
section,
.section {
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

/* Mobile responsiveness - maintain on smaller screens */
@media (max-width: 768px) {

    .container,
    div.container {
        width: 95% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

@media (max-width: 480px) {

    .container,
    div.container {
        width: 100% !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}