.navbar {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 60px;
		z-index: 9999;
}
.navbar-inner {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32px;
}
.navbar-inner img {
  display: block;
}
.nav-menu {
		list-style: none;
		display: flex;
		gap: 36px;
		margin: 0;
		padding: 0;
}
.navbar-inner li a {
		color: #fff;
		font-size: 18px;
		font-weight: 400;
		text-decoration: none;
		transition: color 0.2s;
}
#mobile-menu {
    position: absolute;
    top: 60px;
    right: 0;
    width: 100%;
	height: 100vh;
    background: #fff;
    z-index: 9999;
    display: none;
	text-align: center;
	padding-top: 20px;
	box-sizing: unset;
}
#mobile-menu li {
    padding: 14px 0;
	list-style: none;
}
#mobile-menu a {
    font-size: 20px;
	font-weight: 700;
	color: #000;
}
#mobile-menu.active {
    display: block;
    animation: fadeInDown 0.5s;
}

@keyframes fadeInDown {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
/* navbar sm-window */
@media (max-width: 860px) {
	.navbar {
		height: 60px;
	}
    .navbar-inner img {
		width: 120px;
	}
    .nav-menu button {
    	display: inline;
    }
    .nav-menu a {
    	display: none;
    }
}
/* navbar lg-window */
@media (min-width: 860px) {
		.navbar-inner img {
			  width: 150px;
		}
    .nav-menu button {
      display: none;
    }
}

.navbar {
		transition: background-color 220ms ease, box-shadow 220ms ease;
	}

	.navbar.scrolled {
		background: rgba(255,255,255,0.92);
		box-shadow: 0 6px 18px rgba(10,26,47,0.08);
		backdrop-filter: blur(6px);
	}

	.navbar.scrolled .navbar-inner a,
	.navbar.scrolled .nav-menu a {
		color: #000;
	}

	.navbar.scrolled .nav-menu button,
	.navbar.scrolled #menu-toggle {
		color: #000;
	}

/* when mobile menu is active, force white background and black text */
.navbar.menu-active {
    background: #fff !important;
    box-shadow: 0 6px 18px rgba(10,26,47,0.08);
}

.navbar.menu-active .navbar-inner a,
.navbar.menu-active .nav-menu a,
.navbar.menu-active #menu-toggle,
.navbar.menu-active .nav-menu button {
    color: #000 !important;
}

/* ensure toggle icon color is visible */
.navbar .fa-solid {
    font-size: 20px;
}