/* ================================================================
   UNIVERSAL MOBILE FIX - ADD TO ALL PAGE-SPECIFIC CSS FILES
   (services.css, about.css, contact.css, etc.)
   ================================================================ */

/* Base body fix - add if not already present */
body {
    overflow-x: hidden;
    box-sizing: border-box;
    min-width: 100%;
}

/* Container fix - add if not already present */
.container {
    box-sizing: border-box;
    width: 100%;
}

/* Universal section fix - ALWAYS ADD THIS */
section {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* Bootstrap row fix - ALWAYS ADD THIS */
.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Page-specific content wrappers - ALWAYS ADD THIS */
.page-content,
.page-header,
.content-section,
main {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* ================================================================
   RESPONSIVE FIXES - ADD TO ALL PAGE-SPECIFIC CSS FILES
   ================================================================ */

@media (max-width: 768px) {
    .container {
        padding: 0 15px !important;
    }
    
    /* Apply to all sections on the page */
    section,
    .page-content,
    .content-section {
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 12px !important;
    }
    
    section,
    .page-content,
    .content-section {
        padding-left: 12px;
        padding-right: 12px;
    }
}