.header { position: fixed; top: 0; left: 0; width: 100%; background-color: var(--bg-color); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); z-index: 1000; transition: var(--transition); } .nav-container { display: flex; justify-content: space-between; align-items: center; height: 80px; padding: 0 2rem; } .logo { font-size: 1.5rem; font-weight: 700; color: var(--primary-color); } .logo a{ color: var(--primary-color); text-decoration: none; } .nav-links { display: flex; gap: 2rem; list-style: none; } .nav-links a { text-decoration: none; color: var(--text-color); font-weight: 500; transition: var(--transition); } .nav-links a:hover { color: var(--primary-color); } /* Mobile Menu */ .mobile-menu-btn { display: none; flex-direction: column; justify-content: space-between; width: 30px; height: 21px; background: none; border: none; cursor: pointer; padding: 0; z-index: 1000; } .mobile-menu-btn span { width: 100%; height: 3px; background-color: var(--primary-color); border-radius: 3px; transition: var(--transition); } @media (max-width: 768px) { .mobile-menu-btn { display: flex; } .nav-links { position: fixed; top: 80px; left: -100%; width: 100%; height: calc(100vh - 80px); background-color: var(--bg-color); flex-direction: column; align-items: center; padding: 2rem; transition: var(--transition); z-index: 900; } .nav-links.active { left: 0; } .nav-links li { margin: 1.5rem 0; } .mobile-menu-btn.active span:nth-child(1) { transform: translateY(9px) rotate(45deg); } .mobile-menu-btn.active span:nth-child(2) { opacity: 0; } .mobile-menu-btn.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } }