:root {
	--primary-dark: #3C525F;
	--primary-mid: #4a90e2;
	--primary-light: #B3C2CB;
	--primary-lightest: #B3C2CB;
	--section-separator: #A2C7E3;

	--font-family-base: "Montserrat", sans-serif;
	--font-family-heading: "Cinzel", serif;

	--font-weight-light: 500;
	--font-weight-heavy: 700;

	--font-size-base: 16px;
	--font-size-large: 23px;
	--font-size-heading: 3.5rem;

	--font-size-h1: 40px;
	--font-size-h2: 40px;
	--font-size-h3: 35px;
	--font-size-h4: 28px;
	--font-size-h5: 26px;
	--font-size-h6: 20px;

	--font-weight-h1: 700;
	--font-weight-h2: 700;
	--font-weight-h3: 700;
	--font-weight-h4: 700;
	--font-weight-h5: 700;
	--font-weight-h6: 700;

	--border-radius: 10px;
	--button-radius: 8px;
	--motion-fast: 220ms;
	--motion-medium: 420ms;
	--motion-slow: 900ms;
	--motion-ease: cubic-bezier(0.22, 1, 0.36, 1);

	--letter-spacing-h1: ;
	--letter-spacing-h2: 0.04em;
	--letter-spacing-h3: 0.03em;
	--letter-spacing-h4: 0.02em;
	--letter-spacing-h5: 0.01em;
	--letter-spacing-h6: 0.01em;
}

body {
	font-family: var(--font-family-base);
	font-optical-sizing: auto;
	font-weight: var(--font-weight-light);
	font-size: var(--font-size-base);
	font-style: normal;
	background-color: #E9E4DA;
}

.reveal-on-scroll {
	opacity: 0;
	transform: translateY(26px) scale(0.985);
	transition:
		opacity var(--motion-medium) var(--motion-ease),
		transform var(--motion-medium) var(--motion-ease);
	will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
}

@keyframes driftY {
	0% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-6px);
	}

	100% {
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.reveal-on-scroll,
	.reveal-on-scroll.is-visible {
		opacity: 1 !important;
		transform: none !important;
	}
}

p,
li,
span,
label,
input,
textarea,
select,
button {
	font-family: var(--font-family-base) !important;
	font-weight: var(--font-weight-light);
}

strong,
b {
	font-weight: 700 !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-family-heading) !important;
	font-optical-sizing: auto;
	font-weight: var(--font-weight-heavy);
	text-transform: uppercase;
	color: #10273B !important;
}

h1 {
	font-size: var(--font-size-h1);
	font-weight: var(--font-weight-h1);
	letter-spacing: var(--letter-spacing-h1);
}

h2 {
	font-size: var(--font-size-h2);
	font-weight: var(--font-weight-h2);
	letter-spacing: var(--letter-spacing-h2);
}

h3 {
	font-size: var(--font-size-h3);
	font-weight: var(--font-weight-h3);
	letter-spacing: var(--letter-spacing-h3);
}

h4 {
	font-size: var(--font-size-h4);
	font-weight: var(--font-weight-h4);
	letter-spacing: var(--letter-spacing-h4);
}

h5 {
	font-size: var(--font-size-h5);
	font-weight: var(--font-weight-h5);
	letter-spacing: var(--letter-spacing-h5);
}

h6 {
	font-size: var(--font-size-h6);
	font-weight: var(--font-weight-h6);
	letter-spacing: var(--letter-spacing-h6);
}

@media (max-width: 768px) {
	:root {
		--font-size-h1: 27px;
		--font-size-h2: 27px;
		--font-size-h3: 27px;
		--font-size-h4: 27px;
		--font-size-h5: 27px;
		--font-size-h6: 27px;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-size: 27px !important;
	}

	body,
	p,
	li,
	span,
	label,
	input,
	textarea,
	select,
	button {
		font-size: 16px !important;
	}
}

.section-separator {
	width: min(100%, 1500px);
	height: 8px;
	background: #A2C7E3 !important;
	border-radius: 4px;
	display: block;
	position: relative;
	z-index: 5;
	margin: 1.25rem auto;
}

@media (max-width: 768px) {
	.section-separator {
		display: none;
		margin: 0;
		height: 0;
	}
}

button,
.btn,
a[class*="btn"],
[role="button"] {
	border-radius: var(--button-radius);
}

@media (min-width: 1400px) {
	.container,
	.container-sm,
	.container-md,
	.container-lg,
	.container-xl,
	.container-xxl {
		max-width: 1500px;
	}
}