/**
 * Video Hero Banner Styles
 * Reusable video banner component for maritime template and practices posts
 *
 * @format
 */

/* Header transparency for video banner pages */
.header {
	background-color: transparent;
}

body.scrolled .header {
	background: var(--primary-color);
}

/* Main element styling for video banner pages */
.has-video-banner main {
	overflow: visible;
	padding-top: 60px;
}

/* Sidebar positioning for video banner pages */
@media screen and (min-width: 1025px) {
	.has-video-banner .sidebar {
		position: relative;
		bottom: 210px;
	}

	.has-video-banner .sidebar:after {
		display: none;
	}
}

.video-hero-banner {
	position: relative;
	overflow: hidden;
	height: 100vh;
	max-height: 680px;
	display: flex;
	flex-direction: column;
}

.video-hero-banner::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 70%;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
	z-index: 1;
}

.home-hero-video {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	z-index: 0;
	object-fit: cover;
	object-position: top;
	background-position: center;
}

.video-hero-inner {
	position: relative;
	z-index: 1;
	height: 100%;
	display: flex;
	justify-content: flex-end;
	flex-direction: column;
	padding: 0 25px 90px;
	text-align: center;
}

.video-hero-title {
	position: relative;
}

.hero-title-side {
	position: absolute;
	right: 0;
	text-transform: uppercase;
	letter-spacing: 5px;
	font-size: 2.5rem;
	font-family: "Hind", sans-serif;
	display: none;
}

.video-hero-button {
	background: #247ba0;
}

.video-hero-button:hover,
.video-hero-button:focus {
	background: #0a2342;
}

.video-hero-banner .row {
	height: 100%;
	width: 100%;
}

.hero-title-sub,
.hero-title-top {
	font-family: "Hind", sans-serif;
	font-weight: 500;
	letter-spacing: 2px;
	margin-bottom: 0;
}

.hero-title-top {
	position: absolute;
	text-transform: uppercase;
	text-align: center;
	width: 100%;
}

.video-hero-title h2 {
	font-size: 2.6rem;
	margin: 0 0 10px;
}

.video-hero-content p {
	font-size: 19px;
}

@media screen and (min-width: 1025px) {
	.video-hero-banner {
		max-height: 790px;
	}

	.hero-title-side {
		display: block;
	}

	.video-hero-content-inner {
		max-width: 370px;
	}

	.video-hero-content p {
		font-size: 21px;
	}

	.video-hero-title h2 {
		font-size: 4.8rem;
		display: inline-block;
		position: relative;
		margin: 0;
	}

	.hero-title-top {
		font-size: 25px;
		letter-spacing: 3px;
		top: -30px;
	}

	.video-hero-title .hero-title-midtext {
		font-size: 50%;
		display: inline-block;
		line-height: 0.9;
		position: relative;
		bottom: 12px;
	}

	.video-hero-title .hero-title-midtext::before,
	.video-hero-title .hero-title-midtext::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		height: 6px;
		background-color: #cb3612;
	}

	.video-hero-title .hero-title-midtext::before {
		top: -10px;
	}

	.video-hero-title .hero-title-midtext::after {
		bottom: -10px;
	}

	/* Special styling for post ID 1087 - red bars on hero title using flexbox */
	.postid-1087 .video-hero-title .hero-title-sub,
	.postid-1087 .video-hero-title .hero-title-top {
		display: flex;
		align-items: center;
		width: 100%;
		text-align: center;
	}

	.postid-1087 .video-hero-title .hero-title-sub::before,
	.postid-1087 .video-hero-title .hero-title-sub::after,
	.postid-1087 .video-hero-title .hero-title-top::before,
	.postid-1087 .video-hero-title .hero-title-top::after {
		content: "";
		flex: 1;
		height: 6px;
		background-color: #cb3612;
		margin: 0 20px;
	}

	.video-hero-inner {
		justify-content: center;
		padding-bottom: 0;
	}

	.video-hero-content {
		text-align: left;
		width: 788px;
		margin: 0 auto;
	}
}

@media screen and (min-width: 1221px) {
	.video-hero-banner {
		max-height: 860px;
	}
}

@media screen and (min-width: 1260px) {
	.video-hero-title h2 {
		font-size: 5.8rem;
		line-height: 1.22;
	}

	.video-hero-content {
		width: 952px;
	}

	.video-hero-button {
		padding-top: 18px;
		padding-bottom: 18px;
	}

	.video-hero-content-inner {
		max-width: 480px;
	}
}

.video-hero-inner .animate-for-desktop {
	opacity: 0;
	transform: translateY(15px);
	transition: opacity 700ms ease-in-out, transform 700ms ease-in-out;
}

.video-hero-inner .animate-for-desktop.active {
	opacity: 1;
	transform: translateY(0);
}

@media screen and (max-width: 1024px) {
	.animate-for-desktop {
		opacity: 1 !important;
		transition: none !important;
	}
}

/* Mobile styling for post ID 1087 red bars - only above 720px */
@media screen and (min-width: 721px) and (max-width: 1024px) {
	.postid-1087 .video-hero-title .hero-title-sub {
		display: flex;
		align-items: center;
		width: 100%;
		text-align: center;
	}

	.postid-1087 .video-hero-title .hero-title-sub::before,
	.postid-1087 .video-hero-title .hero-title-sub::after {
		content: "";
		flex: 1;
		height: 4px;
		background-color: #cb3612;
		margin: 0 15px;
	}
}

/* Content alignment classes */
.video-hero-content-align-left {
	text-align: left;
}

.video-hero-content-align-center {
	text-align: center;
}

.video-hero-content-align-center .video-hero-content-inner {
	margin: 0 auto;
}

/* Intro form styles for video banner pages */
.intro-form {
	position: relative;
	order: 1;
	background: #cb3612;
	padding: 15px;
	overflow: hidden;
}

.intro-form:before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	right: 50%;
	width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
	background: #cb3612;
	height: 100%;
	z-index: -1;
}

.contact-form-heading span,
.contact-form-heading {
	font-size: 24px;
	color: #fff;
}

.contact-form-heading span {
	font-size: 20px;
}

.form-input-group.button-container p {
	margin-bottom: 0;
}

.intro-form p br {
	display: none;
}

.intro-form .wpcf7-not-valid-tip {
	color: #000;
	font-weight: 500;
}

.form-input-group.button-container button {
	width: 100%;
	padding: 20px;
	background: #0a2342;
	font-size: 18px;
}

/* Intro form input styling */
.intro-form .form-input-group {
	margin-bottom: 20px;
}

.intro-form .form-input-group label {
	position: absolute;
	bottom: auto;
	top: 0;
	left: 16px;
	line-height: 45px;
	z-index: 1;
}

.intro-form .form-input-group label.active {
	opacity: 0;
}

.intro-form .form-input-group input {
	border: none;
	background: #fff;
}

.intro-form .form-input-group textarea {
	border: none;
	background: #fff;
}

.intro-form .form-input-group p {
	margin-bottom: 0;
}

.form-input-group.button-container {
	margin-bottom: 0;
}

/* Responsive intro form styles */
@media screen and (min-width: 1025px) {
	.intro-form {
		padding: 30px;
		box-shadow: 0 10px 10px rgb(0 0 0 / 12%);
		max-width: 370px;
	}

	.intro-inner .intro-form {
		bottom: 190px;
	}

	.intro-form:before {
		display: none;
	}
}