header { background-color: #059669; border-bottom: 1px solid #047857; padding: 15px 0; position: sticky; top: 0; z-index: 100; } 
.header-container { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } 
.logo a { font-weight: 700; font-size: 24px; color: #ecfdf5; text-decoration: none; } 
.nav-center { display: flex; gap: 20px; transition: max-height 0.4s ease-in-out; overflow: hidden; max-height: 500px; } 
.nav-center a { margin: 5px 10px; text-decoration: none; color: #d1fae5; font-weight: 500; transition: color 0.3s; cursor: pointer; } 
.nav-center a:hover { color: #f0fdfa; } 
.nav-right { display: flex; align-items: center; gap: 10px; } 
.auth-buttons a { padding: 6px 12px; border-radius: 5px; text-decoration: none; color: #ecfdf5; border: 1px solid #ecfdf5; transition: 0.3s; } 
.auth-buttons a.btn-primary { background: #047857; color: #fff; border: none; } 
.auth-buttons a:hover { opacity: 0.85; } 
.user-menu { position: relative; cursor: pointer; } 
.hamburger { display: none; flex-direction: column; } 
.hamburger span { display: block; width: 25px; height: 3px; margin: 4px 0; background: #ecfdf5; transition: 0.3s; } 
.dropdown { display: none; position: absolute; right: 0; top: 35px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.15); border-radius: 5px; overflow: hidden; z-index: 200; } 
.dropdown a { display: block; padding: 10px 15px; text-decoration: none; color: #0f172a; } 
.dropdown a:hover { background: #f0fdfa; } 
.user-menu:hover .dropdown { display: block; } 
@media (max-width: 768px) { .nav-center { position: absolute; top: 65px; left: 0; right: 0; background: #059669; flex-direction: column; align-items: center; max-height: 0; display: flex; border-top: 1px solid #047857; } .nav-center a { padding: 12px; width: 100%; text-align: center; border-bottom: 1px solid #047857; } .hamburger { display: flex; } .auth-buttons { display: none; } .nav-center.active { max-height: 300px; } }