.hero {
	position: relative;
	background-color: var(--color-blue-lighter);
	margin-bottom: 160px;

	@media (max-width: 768px) {
		margin-bottom: 40px;
	}
}

.hero__content {
	position: relative;
	padding-top: 48px;
	max-width: 720px;
	width: 100%;
	z-index: 2;

	@media (max-width: 768px) {
		padding-top: 8px;
		padding-bottom: 50px;
	}
}

.hero__heading {
	font-size: 48px;
	font-style: normal;
	font-weight: 800;
	line-height: 64px; /* 133.333% */
	letter-spacing: -0.48px;
	color: var(--color-blue-darkest);
	margin: 0 0 32px 0;

	@media (max-width: 768px) {
		font-size: 32px;
		line-height: 40px;
	}
}

.hero__subtitle {
	font-size: 32px;
	font-style: normal;
	font-weight: 600;
	line-height: 40px;
	color: var(--color-blue-darkest);
	margin: 7px 0 49px 0;

	@media (max-width: 768px) {
		font-size: 20px;
		line-height: 32px;
	}
}

.hero__underline {
	position: relative;
}

.hero__underline-image {
	position: absolute;
	z-index: -1;
	bottom: -15px;
	animation: animate-underline 1s ease-in-out forwards;
	animation-delay: .5s;
	transform-origin: 0 50%;
	transform: scale3d(0, 0 , 1);

	@media (max-width: 768px) {
		bottom: -5px;
		width: 300px;
		height: 5px;
	}
}

@keyframes animate-underline {
	0% {
		transform: scale3d(0, 0 , 1);
	}
	100% {
		transform: scale3d(1, 1 , 1);
	}
}

.hero__button {
	text-wrap: nowrap;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 260px;

	@media (max-width: 768px) {
		max-width: initial;
		line-height: 32px;
	}
}

.hero__button-arrow {
	transform: rotate(90deg);
}

.hero__image {
	position: absolute;
	right: 0;
	top: 150px;
	z-index: 1;

	@media (max-width: 1024px) {
		right: -80px;
	}

	@media (max-width: 768px) {
		top: initial;
		bottom: -120px;
		right: -40px;
		width: 200px;
	}
}

.hero__wave {
	position: absolute;
	width: 100vw;
	transform-origin: 50% 0;
	transform: scaleY(.6);

	@media (max-width: 768px) {
		transform-origin: 100% 0;
		transform: scalex(2);
	}
}