/* ===== HEADER STYLES ===== */ /* Header-specific styles */ /* Note: The header.ejs file contains the HTML section, not a visual header component. */ /* This file is reserved for any future header-specific visual styles. */ /* Main Content Offset for Fixed Navigation */ .main-content { margin-top: 70px; min-height: calc(100vh - 70px); position: relative; z-index: 1; } /* Page Sections */ .hero, .about-hero, .projects-hero, .contact-hero, .features, .skills, .experience, .projects-grid, .contact-content { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border-radius: var(--border-radius); margin: 2rem 0; padding: 2rem; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: var(--shadow-soft); } .container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; width: 100%; box-sizing: border-box; } /* ===== MOBILE RESPONSIVENESS ===== */ /* Mobile Styles - Header and Content */ @media (max-width: 768px) { /* Adjust main content margin for smaller navbar */ .main-content { margin-top: 60px; min-height: calc(100vh - 60px); } /* Adjust container padding on mobile */ .container { padding: 0 1rem; } /* Adjust page sections on mobile */ .hero, .about-hero, .projects-hero, .contact-hero, .features, .skills, .experience, .projects-grid, .contact-content { margin: 1rem 0; padding: 1.5rem; border-radius: 12px; } } /* Small Mobile Devices */ @media (max-width: 480px) { .main-content { margin-top: 60px; } .container { padding: 0 0.75rem; } .hero, .about-hero, .projects-hero, .contact-hero, .features, .skills, .experience, .projects-grid, .contact-content { margin: 0.75rem 0; padding: 1rem; border-radius: 10px; } } /* Tablet Styles */ @media (min-width: 769px) and (max-width: 1024px) { .container { padding: 0 1.5rem; } .hero, .about-hero, .projects-hero, .contact-hero, .features, .skills, .experience, .projects-grid, .contact-content { padding: 1.75rem; } } /* Large Screen Enhancements */ @media (min-width: 1200px) { .container { padding: 0 3rem; } } /* Print Styles */ @media print { .main-content { margin-top: 0; } } /* ===== CRITICAL RESPONSIVE FIXES - Prevent Crashes ===== */ @media (max-width: 768px) { /* Ensure container doesn't overflow */ .container { width: 100%; max-width: 100vw; padding-left: 1rem; padding-right: 1rem; } /* Ensure all page sections don't overflow */ .hero, .about-hero, .projects-hero, .contact-hero, .features, .skills, .experience, .projects-grid, .contact-content { width: 100%; max-width: 100%; overflow-x: hidden; box-sizing: border-box; } } @media (max-width: 480px) { .container { padding-left: 0.75rem; padding-right: 0.75rem; } }