/* ===== HORIZONTAL OVERFLOW FIX ===== */
/* Prevents any horizontal scrolling or spacing issues */

/* Ensure no horizontal overflow on any element */
html,
body {
    width: 100%;
    overflow-x: hidden !important;
    position: relative;
}

/* Fix for all containers */
* {
    max-width: 100%;
}

/* Specific fixes for common overflow causes */
.section,
.container,
.hero,
.header,
footer,
.modal,
.modal-content {
    max-width: 100%;
    overflow-x: hidden;
}

/* Fix for grid and flex containers */
.bento-grid,
.contact-grid,
.pipeline-container,
.calc-container {
    max-width: 100%;
    overflow-x: hidden;
}

/* CAROUSEL MUST HAVE AUTO OVERFLOW FOR SLIDER */
.jobs-carousel {
    max-width: 100%;
    overflow-x: auto !important;
}

/* Fix for images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Fix for rows that might overflow */
.row {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
}

/* Mobile specific fixes */
@media (max-width: 768px) {
    body {
        overflow-x: hidden !important;
    }

    * {
        max-width: 100vw;
    }

    .section {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Prevent horizontal scroll from animations */
.fade-in-left,
.fade-in-right,
.slide-in-left,
.slide-in-right {
    overflow: hidden;
}

/* Fix for any absolutely positioned elements */
[style*="position: absolute"],
[style*="position: fixed"] {
    max-width: 100vw;
}