/* --- MOBILE RESPONSIVE GLOBAL FIX --- */
/* Sabhi elements aur unke pseudo-elements par box-sizing apply karein */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* HTML aur Body ko batayein ki screen se bahar overflow na karein */
html, body {
    max-width: 100%;
    overflow-x: hidden; /* Side ki khaali space ko hide kar dega */
    margin: 0;
    padding: 0;
    font-family: inherit; /* Font family ko inherit karein */
}

/* Images ko batayein ki woh apni container (parent) se bahar na niklein */
img {
    max-width: 100%;
    height: auto; /* Image ka aspect ratio maintain karega */
    display: block; /* Image ke neeche extra space ko khatam karega */
}


/* Global Mobile Responsive Main Headings (h2) */
@media (max-width: 768px) {
    /* Agar aapke section headings ke classes mukhtalif hain, toh yeh sabko target kar lega */
    .services-showcase-section .showcase-header h2,
    .cj-header-wrap h2,
    section h2 {
        font-size: 26px !important;
        line-height: 1.3 !important;
        letter-spacing: -0.5px !important;
    }
}

@media (max-width: 480px) {
    .services-showcase-section .showcase-header h2,
    .cj-header-wrap h2,
    section h2 {
        font-size: 24px !important;
    }
}