/* Start custom CSS *//* General: Prevent horizontal scroll on all devices */
body, html {
    overflow-x: hidden;
}

/* Target all elements and ensure they fit within the viewport width */
*,
*::before,
*::after {
    box-sizing: border-box;
    max-width: 100vw;
}

/* Specific styles for mobile devices */
@media (max-width: 768px) {
    /* Adjust Elementor sections to prevent overflow */
    .elementor-section {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 10px !important; /* Add slight padding for better readability */
        padding-right: 10px !important;
        overflow-x: hidden !important;
    }

    /* Ensure images and videos scale down properly */
    img, video {
        max-width: 100%;
        height: auto;
    }

    /* Prevent text content from causing horizontal scroll */
    .elementor-column {
        padding: 0 !important;
        overflow-x: hidden;
    }

    /* Reset margins or paddings that might extend content outside the viewport */
    .elementor-widget {
        margin: 0 auto !important;
        padding: 0 !important;
    }
}/* End custom CSS */