/* Mobile Overflow Fixes */

/* Ensure no horizontal overflow on mobile */
@media (max-width: 992px) {
    /* Fix hero image overflow AND center it */
    .hero-image {
        position: relative !important;
        padding-left: 0 !important;
        padding: 0 !important;
        top: auto !important;
        right: auto !important;
        left: 0 !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100%;
        margin: 0 auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    /* Center the floating element inside hero-image */
    .hero-image .floating-element {
        width: 80%;
        max-width: 400px;
        margin: 0 auto;
    }
    
    /* Ensure hero section doesn't overflow */
    .hero {
        overflow-x: hidden;
    }
    
    /* Fix container on mobile */
    .container {
        max-width: 100%;
        padding: 0 var(--spacing-md);
        overflow-x: hidden;
    }
    
    /* Fix particles container */
    .particles-container,
    #particles-background,
    .hero-particles {
        max-width: 100vw;
        overflow: hidden;
    }
    
    /* Prevent any element from causing horizontal scroll */
    body, html {
        overflow-x: hidden !important;
        max-width: 100vw;
    }
    
    /* Fix buttons that might overflow */
    .hero-buttons {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--spacing-sm);
    }
    
    .btn {
        font-size: 0.9rem;
        padding: 0.65rem 1.2rem;
    }
}

/* Desktop improvements */
@media (min-width: 993px) {
    /* Better desktop positioning for hero image */
    .hero-image {
        right: 5%;  /* Add some margin from edge */
    }
}

/* Extra small devices */
@media (max-width: 576px) {
    .hero-content h1 {
        font-size: 2rem !important;
        line-height: 1.2;
    }
    
    .hero-content p {
        font-size: 1rem;
    }
    
    .hero-image {
        width: 100% !important;
        padding: 0 !important;
    }
    
    .hero-image .floating-element {
        width: 90%;
        max-width: 300px;
    }
    
    /* Reduce container padding on very small screens */
    .container {
        padding: 0 var(--spacing-sm);
    }
}