* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Segoe UI', Roboto, system-ui, sans-serif;}
/*body {background: #f4f7fc;min-height: 100vh;display: flex;flex-direction: column;}*/

/* ----- top menu container (fixed) ----- */
.top-menu {position: fixed;top: 0;left:0;width: 100%;z-index: 1000;background: #0D4207;color: #f0f4fa;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);padding: 0 2rem;height: 70px;display: flex;align-items: center;justify-content: space-between;border-bottom: 2px solid #2b6c9e;}

/* ----- brand / logo ----- */
.menu-brand {display: flex;align-items: center;gap: 10px;font-size: 1.6rem;font-weight: 600;color: #eaf2fb;text-decoration: none;white-space: nowrap;}
.menu-brand span {background: linear-gradient(135deg, #b6e1ff, #7fc9ff);font-family: 'Righteous';-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;}

/* ----- navigation links (desktop) ----- */
.nav-links {display: flex;align-items: center;gap: 0.4rem;list-style: none;}
.nav-links li a {display: flex;align-items: center;gap: 8px;padding: 0.6rem 1.2rem;border-radius: 25px;font-family: 'Roboto';font-weight: 500;font-size: 0.8rem;color: #e5edf5;text-decoration: none;transition: 0.2s ease;background: transparent;letter-spacing: 0.3px;white-space: nowrap;}
.nav-links li a:hover {background: rgba(255, 255, 255, 0.10);color: #ffffff;box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);}

/* active / current page indicator */
.nav-links li a.active {background: #1f4b6e;color: white;box-shadow: 0 2px 6px rgba(0, 20, 40, 0.4);}
.nav-links li a.active i {color: #b3dcff;}

/* ----- hamburger (mobile) ----- */
.hamburger {display: none;flex-direction: column;gap: 5px;background: transparent;border: 0;padding: 0.4rem 0.3rem;cursor: pointer;border-radius: 8px;transition: 0.2s;}
.hamburger:hover {background: rgba(255, 255, 255, 0.06);}
.hamburger span {display: block;width: 28px;height: 3px;background: #dcebfa;border-radius: 6px;transition: 0.25s ease;transform-origin: center;}

/* mobile overlay */
.mobile-overlay {display: none;position: fixed;inset: 0;background: rgba(0, 0, 0, 0.3);backdrop-filter: blur(2px);z-index: 999;}
.mobile-overlay.open {display: block;}

/* ----- mobile menu (slide-in) ----- */
.mobile-menu {position: fixed;top: 0;left: -300px;width: 300px;height: 100vh;background: #0D4207;padding: 2rem 1.5rem 1.5rem;box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);transition: left 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
   z-index: 1001;display: flex;flex-direction: column;gap: 2rem;border-right: 1px solid #264b67;}
.mobile-menu.open {left: 0;}
.mobile-menu .mobile-brand {font-size: 1.5rem;font-weight: 600;color: #eaf2fb;display: flex;align-items: center;gap: 8px;margin-top: -0.5rem;justify-content: space-between;}
/*.mobile-menu .mobile-brand i {color: #66c0f0;}*/
.mobile-menu .mobile-nav {list-style: none;display: flex;flex-direction: column;gap: 0.2rem;}
.mobile-menu .mobile-nav li a {border-bottom: 1px solid #f0f4fa;line-height: 8px;display: flex;align-items: center;gap: 14px;padding: 0.75rem 1.5rem;border-radius: 14px;font-size: 1rem;font-weight: 400;color: #d6e6f7;text-decoration: none;transition: 0.2s;}
.mobile-menu .mobile-nav li a i {width: 0.8rem;text-align: center;color: #7fc1f0;}
.mobile-menu .mobile-nav li a:hover {background: #1f405b;color: white;}
.mobile-menu .mobile-nav li a.active {background: #1f4b6e;color: white;}
.mobile-menu .mobile-nav li a.active i {color: #b3dcff;}
.action-btn {margin: 0.1rem 1.2rem 0.1rem 1.2rem;background: #8C3F2E;border: none;padding: 0.7rem;border-radius: 10px;font-size: 0.8rem;color: white;cursor: pointer;transition: 0.2s;font-family: inherit;}
.action-btn:hover {background: #e4e9f2;}
	
/* ----- responsive breakpoints ----- */
@media (max-width: 820px) {.top-menu {padding: 0 1.2rem;} .nav-links, .menu-actions {display: none;} .hamburger {display: flex;} .mobile-overlay.open {display: block;}}
@media (min-width: 900px) {.hamburger {display: none;} .mobile-overlay, .mobile-menu {display: none !important;}}
@media (max-width: 480px) {.top-menu {height: 70px;}
.menu-brand {font-size: 1.8rem;}}

/* simple utility for demo */
.badge-demo {background: #d7e6f5;border-radius: 40px;padding: 0.2rem 0.8rem;font-size: 0.75rem;font-weight: 600;color: #0a2a44;margin-left: 6px;}