/* Add to the existing * selector at the top */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Add these new rules */
html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

/* Fix container overflow */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%; /* Add this */
    overflow-x: hidden; /* Add this */
}

/* Fix hero section overflow */
.hero1, .hero {
    overflow-x: hidden;
    width: 100%;
}

.hero1-content, .hero-content {
    max-width: 100%;
    overflow-x: hidden;
}

/* Fix grid overflow on mobile */
@media (max-width: 768px) {
    .features-grid,
    .pricing-grid,
    .info-grid,
    .hero-badges,
    .hero1-badges {
        grid-template-columns: 1fr;
        width: 100%;
        overflow-x: hidden;
    }
    
    /* Fix hero title overflow */
    .hero1 h1, .hero h1 {
        font-size: 32px;
        word-wrap: break-word;
        max-width: 100%;
    }
    
    /* Fix CTA section overflow */
    .cta-section h2 {
        font-size: 28px;
        word-wrap: break-word;
    }
    
    /* Fix button container */
    .button-container {
        width: 100%;
        overflow-x: hidden;
    }
    
    /* Ensure all cards fit within viewport */
    .feature-card,
    .pricing-card,
    .info-card {
        max-width: 100%;
        overflow-x: hidden;
    }
    
    /* Fix navigation overflow */
    .nav-links {
        max-width: 100%;
    }
}