/* Base styles -------------------------------- */
:root
{
	
	/* Color variables */
	--color-primary: #4c543f;
	--color-secondary: #dfd2ba;
	--color-tertiary: #558e82;
	
	/* Font variables */
	--font-primary: 'Arial', sans-serif;
	--font-secondary: 'Libre Baskerville', Georgia, serif;
	
	/* Container width */
	--container-max-width: 1200px;
	
	/* Button radius */
	--button-radius: 0.5rem;
	
	/* Transition duration */
	--transition-duration-hover: 150ms;
	--transition-duration-exit: 200ms;
}


/* Reset and base styles */
*
{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body
{
	font-family: var(--font-primary);
	font-size: 16px;
}

.container
{
	max-width: var(--container-max-width);
	width: 100%;
	margin: 0 auto;
}


/* Typography -------------------------------- */
h1, h2, h3, h4, h5, h6
{
	font-family: var(--font-secondary);
}


/* Header -------------------------------- */
.header
{
	font-family: var(--font-secondary);
	position: absolute;
	top: 0;
	display: flex;
	align-items: center;
	width: 100%;
	padding: 0.5rem;
	background: #3e4d3733;
	color: #090d04;
	backdrop-filter: blur(0.2rem);
	z-index: 1;
}

.header__nav
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.header__nav-list
{
	display: flex;
	gap: 1.5rem;
	align-items: center;
}

.header__nav-item
{
	list-style: none;
}

.header__nav-link,
.header__nav-button
{
	background: transparent;
	border: none;
	text-decoration: none;
	color: inherit;
	padding: 1rem;
	border-radius: var(--button-radius);
	font-size: inherit;
	font-family: inherit;
	cursor: pointer;
	transition: background ease;
	transition-duration: var(--transition-duration-exit);
}

.header__nav-link:hover,
.header__nav-button:hover
{
	background: #3e4d3733;
	transition: background ease;
	transition-duration: var(--transition-duration-hover);
}



/* Hero section -------------------------------- */
.hero
{
	position: relative;
	display: flex;
	align-items: start;
	height: 100vh;
	min-height: 600px;
	max-height: 1080px;
	padding: 2rem;
	text-align: center;
}

.hero__background
{
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	height: 100%;
}

.hero__background-image
{
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.8);
}

.hero__content
{
	position: absolute;
	top: 25%;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	max-width: 450px;
}

.hero__title
{
	display: flex;
	flex-direction: column;
	gap: 1rem;
	color: #3e4d37;
}

.hero__heading
{
	font-size: 3.5rem;
}

.hero__subheading
{
	font-size: 1.3rem;
}

.hero__buttons
{
	display: flex;
	justify-content: center;
	gap: 2rem;
}


.hero__button
{
	border: none;
	border-radius: var(--button-radius);
	padding: 1rem 1.8rem;
	font-size: 1.3rem;
	cursor: pointer;
	transition: filter ease;
	transition-duration: var(--transition-duration-exit);
}

.hero__button:hover
{
	filter: brightness(0.9);
	transition: filter ease;
	transition-duration: var(--transition-duration-hover);
}

.hero__button--primary
{
	background: #4c543f;
	color: #e8ebe0;
}

.hero__button--secondary
{
	background: #dfd2ba;
	color: #4c543f;
}