/* === Banner Section === */
.banner-section {
	position: relative;
}
.banner-section .image img {
	width: 100%;
}
.banner-section .carousel-control {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 150px;
}
.carousel.fade {
	opacity: 1;
}
.carousel.fade .item {
	transition: opacity ease-in-out 0.7s;
	left: 0;
	opacity: 0;
	top: 0;
	position: absolute;
	width: 100%;
	display: block;
	z-index: 1;
}
.carousel.fade .item:first-child {
	top: auto;
	position: relative;
}
.carousel.fade .item.active {
	opacity: 1;
	transition: opacity ease-in-out 0.7s;
	z-index: 2;
}
.banner-section .content .inner {
	min-height: 33vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 50px 0;
}
.banner-section .image {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: #000;
}
.banner-section .image .acf-media {
	opacity: 0.5;
	height: 100%;
}
.banner-section .image .acf-media .inner,
.banner-section .image img,
.banner-section .image video {
	height: 100%;
}
.banner-section .content {
	position: relative;
	z-index: 1;
	color: #fff;
}
.banner-section .content h1 {
	font-size: 52px;
	letter-spacing: 0.1em;
}
.banner-section .content .btn {
	font-size: 18px;
	padding: 1em 1.5em;
	text-shadow: none;
}
.banner-section .image img {
	object-fit: cover;
}
.banner-section .content p {
	font-size: 26px;
	letter-spacing: 2px;
}
@media screen and (max-width: 991px) {
	.banner-section .content h1 {
		font-size: 42px;
	}
	.banner-section .content h2 {
		font-size: 24px;
	}
}
@media screen and (max-width: 767px) {
	.banner-section .content h1 {
		font-size: 30px;
	}
	.banner-section .content h2 {
		font-size: 18px;
	}
}
@media screen and (max-width: 450px) {
	.banner-section .content p {
		font-size: 21px;
	}
}