/* Responsive Design Styles */

@media (max-width: 768px) {
    /* Navigation */
    .hamburger { display: flex; }
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background-color: var(--bg-secondary);
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.3);
        padding: 2rem 0;
        border-top: 1px solid var(--border);
    }
    .nav-menu.active { left: 0; }
    
    /* Hero Section */
    .hero {
        padding: 100px 0 60px;
    }
    .hero-container { grid-template-columns: 1fr; text-align: center; gap: 2rem; }
    .hero-title { font-size: 2.5rem; }
    .hero-buttons { justify-content: center; flex-direction: column; align-items: center; }
    .hero-stats { justify-content: center; }
    .profile-placeholder { width: 200px; height: 200px; font-size: 3rem; }
    .hero-image .profile-image { 
        width: 200px !important; 
        height: 200px !important; 
        max-width: 200px !important; 
        max-height: 200px !important; 
        min-width: 200px !important; 
        min-height: 200px !important; 
    }
    .finance-chart { display: none; }
    .orbiting-elements { display: none !important; }
    .section-title { font-size: 2rem; }
    
    /* About/Skills/Projects/Contact */
    .about-stats, .skills-grid, .skill-items, .projects-grid, .contact-content { grid-template-columns: 1fr; }
    .contact-content { gap: 2rem; }
    .btn { width: 200px; text-align: center; justify-content: center; }
    
    /* Carousel (project & modal) */
    .carousel-btn, .modal-carousel-btn { width: 35px; height: 35px; font-size: 1rem; }
    .carousel-dots, .modal-carousel-dots { bottom: 5px; }
    .carousel-dot, .modal-carousel-dot { width: 6px; height: 6px; }
    
    /* Modal */
    .modal-content { width: 95%; max-width: 500px; max-height: 95vh; }
    .modal-header { padding: 1.5rem 1.5rem 1rem; }
    .modal-title { font-size: 1.5rem; }
    .modal-description { font-size: 1rem; }
    .modal-carousel { height: 300px; }
    .modal-footer { padding: 1.5rem 1.5rem 2rem; flex-direction: column; align-items: stretch; }
    .modal-links { justify-content: center; }
    
    /* Mobile optimizations for better performance */
    .navbar, .hero-badge, .project-card, .skill-category { 
        backdrop-filter: none !important; 
        -webkit-backdrop-filter: none !important; 
    }
    body::before, .hero::before { background: none !important; }
    .hero-badge, .btn { box-shadow: none !important; }
    
    /* Disable hover effects on mobile */
    .btn:hover, .project-card:hover, .skill-category:hover, .skill-item:hover {
        transform: none !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }
}

@media (max-width: 480px) {
    .container { padding: 0 15px; }
    
    .hero-title { font-size: 2.5rem; }
    
    .hero-subtitle { font-size: 1.25rem; }
    
    .section-title { font-size: 1.75rem; }
    
    .project-links {
        flex-direction: row;
        justify-content: flex-start;
        gap: 0.5rem;
    }
    
    .project-links a {
        text-align: center;
        justify-content: center;
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
    }
    
    .hero-stats {
        flex-direction: column;
        gap: 1rem;
    }
    
    .modal-carousel { height: 250px; }
    
    .modal-carousel-btn { width: 35px; height: 35px; }
    
    .modal-carousel-dots { bottom: 10px; }
    
    .modal-carousel-dot { width: 8px; height: 8px; }
    
    /* Simplify all hover states */
    .btn:hover, .project-card:hover, .skill-category:hover, .skill-item:hover, .nav-link:hover {
        transform: none !important;
        box-shadow: none !important;
    }
}