:root {
	--color-light-beige: #FDF3E7;
	--color-dark-blue: #1E3D59;
	--color-rich-blue: #003366;
	--color-muted-blue: #8797A1;
}

body {
	background-color: var(--color-light-beige);
}

.text-dark-blue { color: var(--color-dark-blue); }
.text-rich-blue { color: var(--color-rich-blue); }
.text-muted-blue { color: var(--color-muted-blue); }

.bg-dark-blue { background-color: var(--color-dark-blue); }
.bg-rich-blue { background-color: var(--color-rich-blue); }
.bg-muted-blue { background-color: var(--color-muted-blue); }

.border-dark-blue { border-color: var(--color-dark-blue); }
.border-rich-blue { border-color: var(--color-rich-blue); }
.border-muted-blue { border-color: var(--color-muted-blue); }

.btn-primary {
	background-color: var(--color-rich-blue);
	color: white;
}
.btn-primary:hover {
	background-color: #002244;
}

.card {
	background-color: white;
	border: 1px solid var(--color-muted-blue);
}

.header-placeholder {
	height: 7rem;
	transition: height 0.3s ease;
	background-color: #fff;
}

header {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 50;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform, height;
}

.logo {
	max-width: 284px;
	height: 112px;
	padding: 10px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	aspect-ratio: 1 / 1;
	display: block;
}

header.scroll .logo {
	height: 64px;
}

.logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.mobile-menu {
	display: none;
}

.mobile-menu.active {
	display: block;
}

.burger-icon span {
	display: block;
	width: 25px;
	height: 3px;
	background-color: currentColor;
	transition: all 0.3s ease;
}

.burger-icon span:not(:last-child) {
	margin-bottom: 5px;
}

.burger-icon.active span:nth-child(1) {
	transform: rotate(45deg) translate(5px, 5px);
}

.burger-icon.active span:nth-child(2) {
	opacity: 0;
}

.burger-icon.active span:nth-child(3) {
	transform: rotate(-45deg) translate(7px, -6px);
}

.hero-section {
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('assets/images/hero-background.jpg');
	background-size: cover;
	background-position: center;
	min-height: 80vh;
	display: flex;
	align-items: center;
}

.hero-section .hero-title,
.hero-section .hero-text {
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-section .hero-button {
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.product-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.map-container {
	height: 400px;
	border-radius: 8px;
	overflow: hidden;
}