@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


.cormorant-medium {
  font-family: "Cormorant", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.cormorant-bold {
  font-family: "Cormorant", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.fira-sans-regular {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}



.main-hero-v3 {
	position: relative;
	background-color: var(--brand-primary-blue);
	border-bottom: 5px solid var(--brand-secondary-tan);
	background-position: center bottom;
	background-size: cover;
	background-repeat: no-repeat;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		background: #041E41;
		background: linear-gradient(
			0deg,
			rgba(4, 30, 65, 0.95) 0%,
			rgba(4, 30, 65, 0.92) 40%,
			rgba(4, 30, 65, 0.55) 70%,
			rgba(4, 30, 65, 0.1) 100%
		);
	}

	.inner {
		position: relative;
		z-index: 2;
		min-height: 300px;
		padding-bottom: 3rem;
		padding-top: 3rem;
	}
	.hero-row {
		position: relative;
		top: 2rem;
	}
	.button-group {
		.btn {
			font-size: 12px !important;
		}
	}
}

.main-hero-v3-title,
.main-hero-v3-subtitle,
.main-hero-v3-text {
	display: block;
	line-height: 1;
	color: var(--color-white);
}
.main-hero-v3-title {
	font-size: 3.5rem;
	margin-bottom: -0.2rem;
	margin-left: -5px;
}
.main-hero-v3-subtitle {
	font-size: 2rem;
	letter-spacing: 0.2rem;
}
.main-hero-v3-text {
	font-size: 0.7rem !important;
	text-transform: uppercase;
}
.main-hero-v3-logo {
	flex: 135px 0 0;
	margin-right: -2rem;
	
	svg {
		width: 100%;
		height: auto;
	}
}


@media (min-width: 992px) {
	.main-hero-v3 {
		&::before {
			background: #041E41;
			background: linear-gradient(
				to right,
				rgba(4, 30, 65, 0.95) 0%,
				rgba(4, 30, 65, 0.92) 40%,
				rgba(4, 30, 65, 0.55) 70%,
				rgba(4, 30, 65, 0.1) 100%
			);
		}
		.inner {
			display: flex;
			align-items: center;
			height: calc(100vh - 250px);
			container-type: size;
		}
		.hero-row {
			position: relative;
            top: 10cqh;
		}
		.button-group {
			margin-top: 10cqh;
			
			.btn {
				font-size: 16px !important;
			}
		}
	} 
	.main-hero-v3-logo {
		flex: 36cqh 0 0;
		margin-right: -9cqh;
	}
	.main-hero-v3-title {
		font-size: 25cqh;
		margin-bottom: -4cqh;
		margin-left: -3cqh;
		letter-spacing: 1cqh;
	}
	.main-hero-v3-subtitle {
		font-size: 15cqh;
		letter-spacing: 1cqh;
	}
	.main-hero-v3-text {
        font-size: 4cqh !important;
		letter-spacing: 0.4cqh;
		padding-left: 3cqh;
		margin-bottom: 0;
	}
}
@media (min-width: 2500px) {
	.main-hero-v3 {
		.inner {
			max-width: 1500px;
			height: calc(100vh - 350px);
		}
	}
}