/* ========================================
   MOBILE TEXT & RESPONSIVE FIX (FINAL v2)
   Forces vertical stacking and simple scrolling
   ======================================== */

/* 1. FIXED DOUBLE SCROLLBAR (NO SIDE SCROLL) */
html {
    overflow-x: hidden !important;
    width: 100% !important;
    height: auto !important;
}

body {
    overflow-x: hidden !important;
    width: 100% !important;
    height: auto !important;
    position: relative;
    overflow-y: visible !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. FORCE CONTAINERS TO FIT SCREEN */
/* Changed 100vw to 100% to avoid scrollbar width issues */
.container,
section,
header,
footer,
main {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

/* 3. FIX ALL GRIDS (About, Values, Why Choose, etc.) */
@media (max-width: 991px) {

    .values-grid,
    .why-grid,
    .ac-brands-grid,
    .ac-services-wrapper,
    .services-grid,
    .about-grid,
    .footer-grid,
    .grp-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 30px !important;
    }

    .value-item,
    .why-item,
    .brand-card,
    .ac-services-col,
    .service-card,
    .category-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* Fix About Image/Content specifically */
    .about-content,
    .about-image {
        width: 100% !important;
        padding: 0 !important;
    }

    /* Ensure image fits */
    .about-image img {
        width: 100% !important;
        height: auto !important;
    }

    /* Fix Badge Position if it sticks out */
    .experience-badge {
        right: 0 !important;
        left: auto !important;
        bottom: 20px !important;
        max-width: 150px !important;
    }
}

/* 4. FIX TEXT CUTOFF */
p,
h1,
h2,
h3,
h4,
h5,
h6,
span,
div,
li {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    max-width: 100% !important;
}

/* 5. TYPOGRAPHY SCALING */
@media (max-width: 768px) {
    body {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }

    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    h1 {
        font-size: 32px !important;
    }

    h2 {
        font-size: 26px !important;
    }
}