/* ==========================================================================
   Hero
   ========================================================================== */

.home-page {
	position: relative;
	min-height: 100vh;
	background-color: var(--black-2);
	overflow: hidden;
	display: flex;
	align-items: end;
	padding-top: calc(var(--menu-height) + 2rem);
}

.home-page:before {
	position: absolute;
	content: "";
	left: -300px;
	bottom: -100px;
	height: 700px;
	width: 700px;
	background: radial-gradient(circle at center, var(--color-1) 0%, var(--black-2) 66.66%, var(--black-2) 100%);
	opacity: .3;
}

.home-page:after {
	position: absolute;
	content: "";
	right: -200px;
	top: calc(50% - 400px);
	height: 800px;
	width: 800px;
	background: radial-gradient(circle at center, var(--color-2) 0%, var(--black-2) 66.66%, var(--black-2) 100%);
	opacity: .3;
}

.home-page .home-page__header {
	position: relative;
	z-index: 1;
	text-align: center;
}

.home-page .home-page__header .title-1 {
	color: var(--white-1);
}

.home-page .home-page__info {
	position: relative;
	z-index: 1;
	align-self: center;
}

.home-page .home-page__info .text {
	color: var(--white-3);
}

.home-page .home-page__info .box {
	display: flex;
	justify-content: center;
}

.home-page .home-page__info .box .box-content {
	position: relative;
	padding: 50px 60px;
	background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .05) 100%);
	border-radius: 30px;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

.home-page .home-page__info .box.v2 .box-content {
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .05) 100%);
}

.home-page .home-page__info .box:first-child {
	margin-bottom: 30px;
}

.home-page .home-page__info .box .title-1 {
	color: var(--color-1);
	margin-bottom: 10px;
	font-weight: 900;
}

.home-page .home-page__info .box .title-2 {
	color: var(--white-1);
	margin-bottom: 10px;
	font-weight: 800;
}

.home-page .home-page__info .box .text {
	color: var(--white-3);
	font-weight: 500;
}

.home-page .home-page__image {
	position: relative;
	z-index: 1;
	padding-bottom: 0;
	align-self: end;
}

.home-page .home-page__image img {
	height: auto;
	width: 100%;
	object-fit: contain;
}