/**
 * HOME HERO AND/OR SLIDER
 *
 * @format
 */

.home-hero {
	height: 100vh;
	min-height: 400px;
	position: relative;
}

.home-hero h1 {
	margin: 0;
	font-size: 2.313rem;
	text-align: center;
	color: var(--color-white);
}

.home-hero h1 span.active u:after {
	width: 100%;
}

.home-hero h1 u {
	font-weight: 500;
	position: relative;
	text-decoration: none;
}

.home-hero h1 u:after {
	content: '';
	position: absolute;
	bottom: 8px;
	left: 0;
	width: 0;
	transition: width 1500ms ease 1500ms;
	z-index: -1;
	height: 6px;
	background: linear-gradient(to right, rgba(236, 72, 39, 1) 0%, rgba(178, 29, 25, 1) 100%);
}

.home-hero h1 span {
	opacity: 0;
}

.home-hero h1 span.active {
	opacity: 1;
	transition: opacity 1s ease-in-out;
}

.home-hero-container {
	position: absolute;
	left: 0;
	/* bottom: 90px; */
	bottom: 40px;
	z-index: 1;
	width: 100%;
}

.home-hero-image-container {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	display: block;
	background: linear-gradient(135deg, rgba(19, 41, 86, 1) 0%, rgba(13, 54, 136, 1) 50%, rgba(236, 72, 39, 1) 100%);
}

.home-hero-image-container:after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	/* opacity: .25; */
	z-index: 1;
	mix-blend-mode: multiply;
	/* background: linear-gradient(135deg, rgba(236, 72, 39, 1) 20%, rgba(19, 41, 86, 1) 80%); */
	opacity: 0.75;
	background: linear-gradient(315deg, rgba(236, 72, 39, 1) 0%, rgba(19, 41, 86, 1) 54%);
}

.home-hero-image-container img,
.home-hero-image-container video {
	object-fit: cover;
	width: 100%;
	height: 100%;
	object-position: 50%;
	mix-blend-mode: screen;
}

.banner-features {
	display: -webkit-flex;
	display: -moz-flex;
	display: -o-flex;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
	flex-wrap: wrap;
	grid-gap: 19px;
	gap: 19px;
	line-height: 1;
	color: #fff;
	max-width: 304px;
	margin: 30px auto 0;
}

.banner-features span {
	position: relative;
	font-size: 1rem;
}

.banner-features span::after {
	content: '';
	position: absolute;
	top: calc(50% + 2px);
	right: -10px;
	transform: translateY(-50%);
	width: 1px;
	height: 100%;
	background: #fff;
}

.banner-features span:nth-child(2)::after,
.banner-features span:nth-child(5)::after,
.banner-features span:last-child::after {
	display: none;
}

@media screen and (min-width: 640px) {
	.banner-features {
		max-width: 490px;
	}

	.banner-features span:nth-child(4)::after {
		display: none;
	}

	.banner-features span:nth-child(2)::after,
	.banner-features span:nth-child(5)::after {
		display: inline-block;
	}
}

@media screen and (min-width: 768px) {
	.home-hero {
		height: 610px;
	}

	.home-hero-container {
		bottom: 100px;
	}
}

@media screen and (min-width: 1025px) {
	.home-hero {
		height: 700px;
	}

	.home-hero h1 {
		font-size: 3.75rem;
	}

	.home-hero h1 u:after {
		height: 13px;
	}

	.banner-features {
		max-width: none;
		margin-top: 60px;
	}

	.banner-features {
		grid-gap: 25px;
		gap: 25px;
	}

	.banner-features span::after {
		right: -13px;
	}

	.banner-features span:nth-child(4)::after {
		display: inline-block;
	}

	.home-hero-container {
		bottom: 70px;
		/* bottom: 100px; */
	}
}

@media screen and (min-width: 1400px) {
	.home-hero {
		height: 1045px;
	}

	.home-hero h1 {
		font-size: 5.625rem;
	}

	.home-hero h1 u:after {
		height: 20px;
		bottom: 13px;
	}

	.home-hero-container {
		bottom: 115px;
		/* bottom: 230px; */
	}

	.banner-features {
		grid-gap: 35px;
		gap: 35px;
		margin-top: 95px;
	}

	.banner-features span::after {
		right: -18px;
	}

	.banner-features span {
		font-size: 1.25rem;
	}
}