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

	--font-family-base: "Open Sans", sans-serif;
	--font-family-heading: "arpona", serif;
	--font-family-paragraph: "Open Sans", sans-serif;
	--heading-color: #A5BBC2;
	--heading-line-color: #A5BBC2;

	--font-weight-light: 400;
	--font-weight-heavy: 700;
	--font-weight-heading: 500;
	--font-weight-paragraph: 400;

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

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

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

	--border-radius: 10px;
	--button-radius: 8px;

	--letter-spacing-h1: -0.02em;
	--letter-spacing-h2: -0.02em;
	--letter-spacing-h3: 0;
	--letter-spacing-h4: 0;
	--letter-spacing-h5: 0;
	--letter-spacing-h6: 0;
}

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;
}

p {
	font-family: var(--font-family-paragraph) !important;
	font-weight: var(--font-weight-paragraph) !important;
}

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

h1 {
	display: table;
	font-size: var(--font-size-h1);
	font-weight: var(--font-weight-h1);
	letter-spacing: var(--letter-spacing-h1);
	margin-left: auto;
	margin-right: auto;
}

h2 {
	display: table;
	font-size: var(--font-size-h2);
	font-weight: var(--font-weight-h2);
	letter-spacing: var(--letter-spacing-h2);
	margin-left: auto;
	margin-right: auto;
}

h1::before,
h1::after,
h2::before,
h2::after {
	content: "";
	display: block;
	height: 4px;
	background-color: var(--heading-line-color);
	margin-left: auto;
	margin-right: auto;
}

h1::before,
h2::before {
	width: 100%;
	margin-bottom: 14px;
}

h1::after,
h2::after {
	width: 50%;
	margin-top: 22px;
}

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: 30px;
		--font-size-h2: 30px;
		--font-size-h3: 25px;
		--font-size-h4: 20px;
		--font-size-h5: 18px;
		--font-size-h6: 17px;
	}
}

.section-separator {
	width: min(100%, 1320px);
	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);
}