/* Only prevent horizontal scroll on main containers */
html {
    overflow-x: hidden;
}

/* Fix the specific pseudo-elements causing overflow */
@media (max-width: 768px) {
    /* Remove decorative background circles that extend beyond viewport */
    .cta-section::before,
    .cta-section::after {
        display: none;
    }
    
    /* Fix section title decorative lines */
    .section-title::before {
        width: calc(100% + 40px);
        left: -20px;
    }
    
    .section-title::after {
        width: calc(100% + 60px);
        left: -30px;
    }
    
    /* Ensure carousel doesn't overflow */
    .header-carousel {
        width: 100%;
        overflow: hidden;
    }
    
    /* Fix carousel navigation positioning */
    .header-carousel .owl-nav {
        right: 5%;
    }
    
    /* Ensure images don't cause overflow */
    .owl-carousel-item img {
        width: 100%;
        max-width: 100%;
    }
    
    /* Fix any wide content in pricing cards */
    .pricing-card {
        max-width: calc(100vw - 30px);
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Fix wide buttons */
    .btn {
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Fix container padding that might cause issues */
@media (max-width: 576px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .px-5 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* Ensure no element creates horizontal scroll */
@media (max-width: 768px) {
    body {
        overflow-x: hidden;
        position: relative;
    }
    
    /* Fix any bootstrap row negative margins */
    .row {
        margin-left: -15px;
        margin-right: -15px;
    }
    
    .row > [class*="col-"] {
        padding-left: 15px;
        padding-right: 15px;
    }
}