*, *::before, *::after {
	box-sizing: border-box;
}
body {
	margin: 0;
	font-family: calibri;
	font-size: 18px;
}
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.75);
	backdrop-filter: blur(16px);
}
.container-menu {
	max-width: 1120px;
	margin: 0 auto;
	padding: 15px 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.brand {
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}
.brand-mark {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	font-weight: 700;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #1e90ff, #000080);
	color: #1f2937;
	box-shadow: 0 0 12px rgba(147, 197, 253, 0.55);
}
.brand-text {
	font-weight: 600;
	font-size: 18px;
	letter-spacing: 0.02em;
	color: #1f2937;
}
.main-nav {
	display: flex;
	align-items: center;
	gap: 24px;
}
.nav-link {
	padding: 0;
}
.nav-links {
	height: inherit;
	list-style: none;
	display: flex;
	gap: 22px;
	padding: 0;
	margin: 0;
}
.nav-item a {
	text-decoration: none;
	font-size: 18px;
	position: relative;
	transition: color 0.2s ease;
}
.nav-item:hover a {
	color: #111827;
}
.nav-item a::after {
	content: "";
	position: absolute;
	bottom: -4px;
	left: 0;
	height: 2px;
	width: 0%;
	background: #000080;
	border-radius: 999px;
	transition: width 0.25s ease;
}
.nav-item:hover a::after,
.nav-item.active a::after {
	width: 100%;
}
.btn-primary {
	padding: 10px 20px 10px 20px;
	text-decoration: none;
	border-radius: 5px;
	color: #FFFFFF;
	font-weight: 600;
	font-size: 18px;
	background: #000080;
	border: 1px solid #000080;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary:hover {
	text-decoration: none;
	background: #d9534f;
	border: 1px solid #d9534f;
}
.btn-primary:active {
	transform: translateY(0);
}
.btn-link {
	text-decoration: none;
	color: #000000;
}
.btn-link:hover {
	text-decoration: none;
}
.btn-link:active {
	transform: translateY(0);
}
.nav-item-cta-mobile {
	display: none;
}
.nav-item-cta-mobile-link {
	display: none;
}
.nav-cta-desktop { 
	display: inline-flex;
	flex-direction:row;
	gap: 10px;
	align-items: anchor-center;
}
.nav-cta-desktop-link { 
	display: inline-flex;
	flex-direction:column;
}
.nav-toggle {
	display: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.4);
	background: #FFFFFF;
	padding: 0;
	cursor: pointer;
	justify-content: center;
	align-items: center;
}
.nav-toggle .bar {
	width: 18px;
	height: 2px;
	background: #374151;
	border-radius: 999px;
	transition: transform 0.2s, opacity 0.2s;
}
.nav-toggle .bar + .bar {
	margin-top: 3px;
}
@media (max-width: 768px) {
	.nav-links {
		height:1000px;
		position: fixed;
		inset: 0 0 0 30%;
		background: rgba(204, 204, 204, 0.9);
		backdrop-filter: blur(20px);
		border-left: 2px solid #CCCCCC;
		padding: 115px 25px;
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
		transform: translateX(100%);
		transition: transform 0.3s ease;
		display: none;
	}
	.main-nav.is-open .nav-links {
		transform: translateX(0);
		display: flex;
	}
	.nav-toggle {
		display: flex;
	}
	.nav-cta-desktop {
		display: none;
	}
	.nav-cta-desktop-link {
		display: none;
	}
	.nav-item-cta-mobile {
		display: block;
		margin-top: 16px;
		width: 100%;
	}
	.nav-item-cta-mobile .btn-link {
		display:inline-flex;
		flex-direction:column;
	}
	.nav-item-cta-mobile .btn-primary {
		display:inline-flex;
		flex-direction:row;
		gap: 10px;
		align-items: anchor-center;
	}
	.main-nav.is-open .bar:nth-child(1) {
		transform: translateY(5px) rotate(45deg);
	}
	.main-nav.is-open .bar:nth-child(2) {
		opacity: 0;
	}
	.main-nav.is-open .bar:nth-child(3) {
		transform: translateY(-5px) rotate(-45deg);
	}
}