@charset "UTF-8";
/* CSS Document */

body
	{min-height: 100vh;
	display: flex;
	flex-direction: column;
	padding-bottom: 86px;}

div.headerbackground
	{background-color: #e0cfa7;
	margin: 0;
    padding: 0;
	width: 100%;}

div.headerbackground .header-content
	{display: flex;
	align-items: center;
	gap: 12px;
	position: relative;
	padding: 16px 0;}

div.headerbackground img
	{display: block;
	max-width: 220px;
	height: auto;}

div.headerbackground h1
	{font-family: eight-extra-condensed, sans-serif;
	color:#563e27;
	font-size: 70px;
	font-weight:bold;
	flex: 1;
	text-align: left;
	margin: 0 0 0 -8px;}

button.mobile-nav-toggle
	{display: none;
	background: #ffffff;
	border: 1px solid #563e27;
	padding: 10px;
	cursor: pointer;}

button.mobile-nav-toggle span
	{display: block;
	width: 24px;
	height: 2px;
	margin: 4px 0;
	background-color: #563e27;}

nav.mobile-nav
	{display: none;}

div.video-background
	{position: relative;
	flex: 1;}

div.video-background .wrapper
	{position: relative;}

div.video-background video
	{display: block;
	width: 100%;
	height: 650px;
	object-fit: cover;}

div.body
	{position: absolute;
	top: 50%;
	left: 42%;
	transform: translate(-50%, -50%);
	width: min(90%, 700px);
	padding: 24px 32px;
	color: #e09a37;
	text-align: left;}

div.body h2
	{margin-top: 0;
	color: #e09a37;
	text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.35);
	font-size: 40px;
	display: inline-block;
	padding: 10px 18px;
	background-color: rgba(255, 255, 255, 0.22);
	border-radius: 0;
	backdrop-filter: blur(3px);}

div.body ul
	{list-style: none;
	padding: 0;
	margin: 16px 0 0;}

div.body li
	{font-size: 22px;
	line-height: 1.7;
	margin: 10px 0;}

div.body li span
	{display: inline-block;
	color: #e09a37;
	text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.35);
	padding: 8px 14px;
	background-color: rgba(255, 255, 255, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 0;
	backdrop-filter: blur(3px);}

div.CTA
	{position: absolute;
	right: 72px;
	bottom: 32px;
	z-index: 10;}

a.cta-button
	{display: inline-block;
	padding: 18px 28px;
	background-color: #ffffff;
	border: 1px solid #ffffff;
	color: #fab451;
	font-family: eight-extra-condensed, sans-serif;
	font-size: 32px;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.06em;}

footer.sticky-footer
	{background-color: #3c240d;
	padding: 18px 0;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	z-index: 20;}

footer.sticky-footer ul
	{list-style: none;
	margin: 0;
	padding: 0 24px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 80px;
	width: 100%;}

footer.sticky-footer li
	{margin: 0;
	color: #e09a37;
	text-align: center;
	font-size: 22px;
	letter-spacing: 0.08em;
	padding: 8px 16px;
	background-color: #ffffff;
	border: 1px solid #ffffff;
	border-radius: 0;}

@media only screen and (max-width: 768px)
	{body
		{padding-bottom: 0;}

	div.headerbackground .header-content
		{align-items: flex-start;
		flex-wrap: wrap;
		gap: 14px;
		padding: 16px;}

	div.headerbackground img
		{max-width: 120px;}

	div.headerbackground h1
		{font-size: 42px;
		margin: 0;
		flex: 1 1 60%;}

	button.mobile-nav-toggle
		{display: inline-block;
		margin-left: auto;}

	nav.mobile-nav
		{width: 100%;
		background-color: rgba(255, 255, 255, 0.92);
		border: 1px solid #563e27;}

	nav.mobile-nav.is-open
		{display: block;}

	nav.mobile-nav ul
		{list-style: none;
		margin: 0;
		padding: 0;}

	nav.mobile-nav li
		{border-top: 1px solid #e0cfa7;}

	nav.mobile-nav li:first-child
		{border-top: 0;}

	nav.mobile-nav a
		{display: block;
		padding: 12px 16px;
		color: #563e27;
		text-decoration: none;
		font-family: eight-extra-condensed, sans-serif;
		font-size: 24px;}

	div.video-background video
		{height: 780px;}

	div.body
		{top: 80px;
		left: 0;
		transform: none;
		width: calc(100% - 32px);
		padding: 0 16px;}

	div.body h2
		{font-size: 30px;}

	div.body li
		{font-size: 18px;}

	div.CTA
		{right: 16px;
		bottom: 20px;}

	a.cta-button
		{font-size: 26px;
		padding: 14px 18px;}

	footer.sticky-footer
		{display: none;}}