/* Navbar Styles */ .navbar { transition: all 0.3s ease; padding: 0.8rem 1rem; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .navbar.scrolled { padding: 0.5rem 1rem; background-color: rgba(33, 37, 41, 0.95) !important; backdrop-filter: blur(10px); } .navbar-brand { font-weight: 600; } .brand-text { transition: all 0.3s ease; } .nav-link { position: relative; padding: 0.5rem 1rem; font-weight: 500; transition: all 0.3s ease; margin: 0 0.2rem; } .nav-link::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: #fff; transition: width 0.3s ease; } .nav-link:hover::after, .nav-link.active::after { width: 70%; } /* Mobile Menu Styles */ .hamburger-button { position: relative; width: 30px; height: 24px; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 1000; } .hamburger-top, .hamburger-middle, .hamburger-bottom { position: absolute; width: 30px; height: 2px; background: #fff; transform: rotate(0); transition: all 0.3s ease; } .hamburger-top { top: 0; transform-origin: left center; } .hamburger-middle { top: 50%; transform: translateY(-50%); transform-origin: left center; } .hamburger-bottom { bottom: 0; transform-origin: left center; } /* Open state for hamburger */ .navbar-toggler[aria-expanded="true"] .hamburger-top { transform: rotate(45deg); left: 3px; } .navbar-toggler[aria-expanded="true"] .hamburger-middle { width: 0; opacity: 0; } .navbar-toggler[aria-expanded="true"] .hamburger-bottom { transform: rotate(-45deg); left: 3px; } /* Mobile Menu Dropdown */ @media (max-width: 991.98px) { .navbar-collapse { position: fixed; top: 70px; left: 0; right: 0; background: rgba(33, 37, 41, 0.98); backdrop-filter: blur(10px); padding: 1rem; height: calc(100vh - 70px); overflow-y: auto; transition: all 0.4s ease; transform: translateX(100%); z-index: 999; } .navbar-collapse.show { transform: translateX(0); } .nav-item { opacity: 0; transform: translateX(20px); transition: all 0.4s ease; } .navbar-collapse.show .nav-item { opacity: 1; transform: translateX(0); } /* Staggered animation for nav items */ .navbar-collapse.show .nav-item:nth-child(1) { transition-delay: 0.1s; } .navbar-collapse.show .nav-item:nth-child(2) { transition-delay: 0.2s; } .navbar-collapse.show .nav-item:nth-child(3) { transition-delay: 0.3s; } .navbar-collapse.show .nav-item:nth-child(4) { transition-delay: 0.4s; } .navbar-collapse.show .nav-item:nth-child(5) { transition-delay: 0.5s; } .navbar-collapse.show .nav-item:nth-child(6) { transition-delay: 0.6s; } .nav-link { padding: 0.8rem 0; font-size: 1.2rem; display: block; text-align: center; margin: 0.5rem 0; } .nav-link::after { display: none; } .brand-text { font-size: 1rem; } }