/* Additional Mobile Fixes for Horizontal Scroll */

@media (max-width: 768px) {
    /* Global fix - prevent horizontal scroll */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        position: relative;
    }
    
    /* Prevent any element from causing horizontal scroll */
    * {
        max-width: 100vw;
    }
    
    /* Ensure all containers respect viewport */
    .container,
    .hero-content,
    .about-content,
    .contact-wrapper,
    .services-grid,
    .projects-showcase,
    .skills-showcase,
    .hero-visual {
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    .contact-info{
        width:94% !important;
    }
    .contact-method {
        gap: 0.5rem !important;
    padding: 0.5rem !important;
    }
    .method-icon {
    width: 50px !important;
    height: 50px !important;
    }
    .method-value {
        font-size: 13px !important;
    }
    .scroll-indicator {
        bottom:2px;
    }
    /* Fix floating elements that might overflow */
    .floating-badge {
        position: relative !important;
        display: inline-block;
        margin: 0.5rem;
    }
    
    .badge-1, .badge-2 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
    }
    
    .image-decoration {
        display: none; /* Hide decorative elements on mobile */
    }
    
    /* Ensure cards don't overflow */
    .floating-card,
    .service-card,
    .project-card,
    .skill-category-card,
    .achievement-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Fix hero visual cards positioning */
    .card-1, .card-2, .card-3 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 1rem !important;
    }
    
    /* Ensure text doesn't overflow */
    .title-line,
    .section-title,
    .hero-description,
    .about-text p,
    .service-card p,
    .project-content p {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
    
    /* Fix background shapes */
    .bg-shape {
        display: none; /* Hide animated shapes on mobile for performance */
    }
    
    /* Fix any grid that might overflow */
    .hero-stats,
    .achievement-grid,
    .project-metric {
        width: 100%;
        max-width: 100%;
    }
    
    /* Ensure buttons don't overflow */
    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .btn {
        width: 100%;
        max-width: 100%;
    }
    
    /* Fix social links */
    .hero-social {
        flex-wrap: wrap;
        width: 100%;
    }
    
    .social-link {
        flex: 1;
        min-width: calc(50% - 0.5rem);
        max-width: 100%;
    }
}