#hero {

	position: relative;

	align-items: center;

	background-image: url('../../assets/images/hero-bg-test.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 100vh;

}

.hero-container {

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: var(--space-lg);

}

.hero-h1 {

	width: 100%;
	text-align: center;

	line-height: 1.1;

	font-family: var(--font-family);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-xl);
	color: var(--color-secondary);

}

.hero-subtitle {

	width: 100%;
	max-width: 720px;
	text-align: center;

	line-height: 1.5;

	font-family: var(--font-family);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-md);
	color: var(--color-text-secondary);

}

.hero-button {

	background-color: var(--color-secondary);
	color: var(--color-bg);

}

.hero-chevron-icon {

	position: absolute;
	bottom: var(--space-md);
	left: 50%;
	transform: translateX(-50%);

	font-size: var(--font-size-lg);
	color: var(--color-secondary);

	animation: float 1.5s ease-in-out infinite alternate;

}


/* ANIMATIONS */
@keyframes float {

	0%,
	100% {

		transform: translateX(-50%) translateY(0);

	}

	50% {

		transform: translateX(-50%) translateY(calc(-1 * var(--space-sm)));

	}

}