/* Breakpoints */ /* Mobile: < 768px */ /* Tablet: 768px - 1024px */ /* Desktop: > 1024px */ /* Mobile First */ @media (max-width: 768px) { body { padding-top: 80px; } .nav { padding: var(--spacing-sm) var(--spacing-md); } .logo { height: 45px; display: flex; align-items: center; } .logo img { height: 100%; max-height: 100%; width: auto; object-fit: contain; } .menu-toggle { display: block; } .nav-links { position: fixed; top: 0; right: -100%; width: 80%; max-width: 300px; height: 100vh; background: var(--color-white); flex-direction: column; padding: 80px var(--spacing-lg); transition: var(--transition-smooth); box-shadow: var(--shadow-lg); z-index: 1000; } .nav-links.active { right: 0; } .nav-links li { margin: var(--spacing-md) 0; } .nav-links a { font-size: 1.2rem; } .hero { min-height: 500px; padding: var(--spacing-xl) var(--spacing-md); } .hero h1 { font-size: 2.5rem; } .hero h2 { font-size: 1.5rem; } .container { padding: 0 var(--spacing-md); } .section-title { font-size: 2rem; } .about-content { grid-template-columns: 1fr; } .about-image { height: 300px; } .skill-card, .publication-card { padding: var(--spacing-lg); } .timeline::before { left: 20px; } .timeline-content { margin-left: 40px; } .contact-grid { grid-template-columns: 1fr; } .footer-content { grid-template-columns: 1fr; gap: var(--spacing-lg); } .footer-logo { height: 70px; } } /* Small Mobile */ @media (max-width: 480px) { body { padding-top: 70px; } .logo { height: 38px; display: flex; align-items: center; } .logo img { height: 100%; max-height: 100%; width: auto; object-fit: contain; } .hero h1 { font-size: 2rem; } .hero h2 { font-size: 1.2rem; } .section-title { font-size: 1.8rem; } .cta-button { padding: 1rem 2rem; font-size: 1rem; } .skill-icon { width: 60px; height: 60px; } .about-image { height: 250px; } } /* Tablet */ @media (min-width: 769px) and (max-width: 1024px) { .container { max-width: 720px; } .logo { height: 80px; } .hero { min-height: 550px; } .skills-grid { grid-template-columns: repeat(2, 1fr); } .contact-grid { grid-template-columns: 1fr; } } /* Desktop */ @media (min-width: 1025px) { .container { max-width: 1200px; } .logo { height: 90px; } .hero { min-height: 600px; } } /* Large Screens */ @media (min-width: 1440px) { .container { max-width: 1400px; } h1 { font-size: 4rem; } h2 { font-size: 2.5rem; } .section-title { font-size: 2.5rem; } } /* Extra Large Screens */ @media (min-width: 1920px) { .container { max-width: 1600px; } html { font-size: 18px; } } /* Print Styles */ @media print { .header, .footer, .cta-button, .menu-toggle { display: none; } body { padding-top: 0; } .container { max-width: 100%; padding: 0; } section { page-break-inside: avoid; } a { text-decoration: none; color: var(--color-dark); } }