:root {
	--primary-color: #005204;
	--secondary-color: #fff;
	--hover-color: #FF06B7;
	--font-archivo: "Archivo", sans-serif;
}

* {
	margin: 0;
	padding: 0;
	/* outline: 1px solid rgba(255, 0, 0, 0.2); */
}

body {
	min-height: 100vh;
}

/* GUIDELINE */
/* body::before {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(255, 0, 0, 0.4);
  pointer-events: none;
  z-index: 9999;
} */

h1, h2, h3, body, nav {
	font-family: var(--font-archivo);
}

section {
	margin: auto;
	max-width: 1250px;
	width: 90%;
}

.button {
	background-color: var(--primary-color);
	border-radius: 37px;
	box-sizing: border-box; /* includes padding with width */
	color: var(--secondary-color);
	display: block;
	font-size: clamp(0.8rem, 2vw, 1rem);
	padding: 1em 0;
	text-decoration: none;
	transition: 0.5s;
	width: 100%;
}

.button:hover {
	background-color: var(--hover-color);
}

img {
	display: block;
	height: auto;
	width: 100%;	
}

/* ===============================
	NAVIGATION BAR
================================ */
nav {
	background-color: white;
	padding: 2rem 3% 1.5rem;
	border-bottom: 1.5px solid var(--primary-color);
	z-index: 100;
	font-size: 21px;
}

.menu-tabs {
	width: 100%;
	list-style: none;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	/* gap: clamp(2rem, 5vw, 5rem); */
}

.menu-tabs a {
	height: 100%;
	padding: 0 30px;
	text-decoration: none;
	display: flex;
	align-items: center;
	color: var(--primary-color);
	font-weight: bold;
	transition: color 0.5s;
}

.menu-tabs a:hover {
	color: var(--hover-color);
}

.menu-tabs a:first-child { /* for logo to stay on left side */
	margin-right: auto;
}

.menu-logo {
	width: auto;
	height: 50px;
}

.sidebar {
	position: fixed;
	top: 0;
	right: 0;
	height: 100vh;
	width: 75%;
	z-index: 999;
	background-color: var(--primary-color);
	backdrop-filter: blur(10px);
	box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	padding: 5%;
	opacity: 0;
	transform: translateX(100%);
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.sidebar li {
	width: 100%;
	margin-bottom: 5rem;
}

.sidebar a {
	width: 100%;
	color: var(--secondary-color);
}

.menu-icon {
	font-size: 36px;
	cursor: pointer;
	transition: color 0.5s;
	display: none;
	color: var(--primary-color);
}

.menu-icon:hover {
	color: var(--hover-color);
}

.close-icon {
	font-size: 48px;
	cursor: pointer;
	color: var(--secondary-color);
	margin-left: auto;
	margin-bottom: 10%;
	transition: color 0.5s;
}

.close-icon:hover {
	color: var(--hover-color);
}

.sidebar.active {
	opacity: 1;
	transform: translateX(0);
	pointer-events: auto;
}

@media (max-width: 800px) {
	.desktop-only {
		display: none;
	}

	.menu-icon {
		display: block;
	}
}

/* ===============================
	FOOTER
================================ */
footer {
	width: 90%;
	margin: 0 auto;
	text-align: left;
	font-weight: bold;
	font-size: 21px;
	border-top: 1.5px solid var(--primary-color);
}

footer .row {
	display: flex;
	justify-content: space-between;
	width: 90%;
	margin: auto;
	align-items: center;
	padding: 2.5em 5% 4em;
	color: var(--primary-color);
}

.footer-col {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}