﻿/***** BEGIN RESET *****/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;	
}

ol, ul {
	list-style: none;
}

table{border-collapse:collapse; width:100%;}
td{vertical-align:top;}

/* Make HTML 5 elements display block-level for consistent styling */  
header, nav, article, footer, address {  
    display: block;  
} 

html{
	scroll-behavior: smooth;
}
/*-------- COLORS --------

*/

/***** END RESET *****/
::-moz-selection {
    background: #000; 
    color: #fff;
    text-shadow: none;
}
::selection {
    background: #000;
    color: #fff;
    text-shadow: none;
}


/* Clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

/*-------- BODY STYLES --------*/

body {

}

a:link, a:visited, a:active {text-decoration:none;}
a:hover {text-decoration:none;}


hr{border:#000 1px solid;}


/*---AESTHETIC--------------------------------*/

.white{
	color: #fff;
}
.red{
	color: #bb141b;
}
.bg-blue .red, .hero .red, .light-red{
	color: #e2252d;
}
.blue{
	color: #00385d;
}
.tan{
	color: #ffefe4;
}
.gray{
	color: #f9f9f9;
}
.bg-img{
	background-size: cover;
	background-position: center center;
}
.bg-tl{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	background-size: auto auto;
	background-position: top left;
	background-repeat: no-repeat;
}
.bg-tr{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	background-size: auto auto;
	background-position: top right;
	background-repeat: no-repeat;
}
.bg-bl{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	background-size: auto auto;
	background-position: bottom left;
	background-repeat: no-repeat;
}
.bg-br{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	background-size: auto auto;
	background-position: bottom right;
	background-repeat: no-repeat;
}


.bg-white{
	background-color: #fff;
}
.bg-red{
	background-color: #e2252d;
	color: #fff;
}
.bg-blue{
	background-color: #00385d;
	color: #fff;
}
.bg-tan{
	background-color: #ffefe4;
}
.bg-gray{
	background-color: #f9f9f9;
}

.hero{
	position: relative;
}
.hero:before{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: clamp(3vw, 5vw, 120px);
	background-color: #fff;
	z-index: 0;
}
.hero.bg-overlay{
	position: relative;
}
.hero.bg-overlay:before{
	position: absolute;
	pointer-events: none;
	content: '';
	left: 0;
	right: 50%;
	top: 0;
	bottom: 0;
	opacity: 0.8;
	background: linear-gradient(to right, #031224, transparent);
}

/*---STRUCTURE--------------------------------*/

.relative{
	position: relative;
}
.pad-top{
	padding-top: clamp(60px, 5vw, 120px);
}
.pad-bottom{
	padding-bottom: clamp(60px, 5vw, 120px);
}

.pad-top-half{
	padding-top: max(60px, 2.5vw);
}
.pad-bottom-half{
	padding-bottom: max(60px, 2.5vw);
}
.col-pad{
	padding: 3.5vw;
	box-sizing: border-box;
}
.cs-wrapper{
	padding-left:7vw;
	padding-right:7vw;
}
/*---TEXT--------------------------------*/

.heading-xl, .heading-lg, .heading-md, .heading-sm, .heading-xs{
font-family: "bahnschrift-condensed", sans-serif;
	display: block;
}

.heading-xl{
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(36px, 6vw, 110px);
	line-height: 0.93;
	letter-spacing: normal;
	margin-bottom: 24px;
}
.heading-lg{
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(36px, 4vw, 72px);
	line-height: 1;
	letter-spacing: normal;
	margin-bottom: 24px;
}
.heading-lg + .heading-lg{
	margin-top: -24px;
}
.heading-md{
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(24px, 2vw, 48px);
	line-height: 1.1;
	letter-spacing: normal;
}
.heading-sm{
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(24px, 2vw, 30px);
	line-height: 1.1;
	letter-spacing: normal;
}
.heading-xs{
	margin: 0;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 24px;
	line-height: 1.3;
	letter-spacing: normal;
}
.paragraph{	
font-family: "bahnschrift-condensed", sans-serif;
	font-weight: 400;
	font-size: 21px;
	line-height: 1.3;
	letter-spacing: normal;
	margin-bottom: 24px;
	display: block;
}


/*---BUTTONS--------------------------------*/

.cta{
	display: inline-block;
	padding: 0 24px 0;
	line-height: 48px;
	position: relative;
	font-family: "bahnschrift-condensed", sans-serif;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 18px;
	color: #fff;
	background-color: #bb141b;
	text-align: center;
	border-radius: 0;
    box-sizing: border-box;
	min-width: 160px;
}

.bg-blue .cta-red{
	background-color: #e2252d;
}
.cta-white{
	background: #ffffff;
	color: #000;
}
.cta-blue{
	background: #00385d;
	color: #fff;
}
.cta-center{
	display: block;
	margin: 0 auto;
	width: 160px;
}

/* CUSTOM */

.cat-box{
	background-color: #000;
	display: flex;
	align-items: flex-end;
	padding: 30px;
	justify-content: center;
	text-align: center;
	position: relative;
	flex-grow: 1;
	min-width: 100px;
	aspect-ratio: 1/0.7;
}
.cat-box span{
	position: relative;
}
.cat-box:before{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 120px;
	background: linear-gradient(to top, #000, transparent);
}
.cat-box:after{
    content: "\f08e";
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
	position: absolute;
	top: 0;
	right: 0;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 16px;
	color: #fff;
	background: #00385d;
}

.col-min-height{
	aspect-ratio: 1 / 0.7;
	display: flex;
	align-items: center;
}

/*--------FORM STYLES--------------------*/

#multiStepForm .red{
	color: #e2252d;
}
		#multiStepForm {
			position: relative;
			display: block;
		  	margin: 0 auto;
			font-family: "bahnschrift-condensed", sans-serif;
			padding: 3.5vw;
			border-radius: 0;
			background-color: #00385d;
			color: #fff;
			height: 100%;
			box-sizing: border-box;
		}
		#multiStepForm ::placeholder{
			color: #fff;
		}
		#multiStepForm .nav-buttons {
			margin-left: 1px;
			display: flex; gap: 10px;
			
		}

		#multiStepForm .pagination-labels{
			display: flex;
			justify-content: space-around;
		}
		#multiStepForm .pagination-labels > div{
			width: 100%;
			text-align: center;
			letter-spacing: normal;
			margin: 0;
			opacity: 0.7;
			font-weight: 400;
			margin-bottom: -10px;
			margin-top: 10px;
			font-size: 12px;
		}
		#multiStepForm .swiper-pagination{
			display: flex;
			gap: 0;
			position: relative;
			margin-top: 30px;
			margin-bottom: 30px;
			border-radius: 90px;background-color: #07233a !important;
		}
		#multiStepForm .swiper-pagination:after {
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			font-size: 24px;
			width: 22px;
			height: 22px;
			display: flex;
			content: "\f058";
			font-weight: 900;
			font-family: 'Font Awesome 6 Free';
			background: #fff;
			border-radius: 100%;
			color: #006ad1;
			align-items: center;
			justify-content: center;
		}
		#multiStepForm .form-swiper .heading-md{
			margin-bottom: 12px;
		}
		#multiStepForm .swiper-pagination > .swiper-pagination-bullet{
			width: 100%; margin: 0;
			border-radius: 0;
			background-color: dodgerblue !important;
    		opacity: 1;
			transform: scaleX(1);
			transition: transform ease 0.3s;
			transform-origin: left;
		}
		#multiStepForm .swiper-pagination > .swiper-pagination-bullet:first-child{
			border-radius: 90px 0 0 90px;
		}
		#multiStepForm .swiper-pagination > .swiper-pagination-bullet:last-child{
			border-radius: 0 90px 90px 0 ;
		}
		#multiStepForm .swiper-pagination > .swiper-pagination-bullet-active ~ .swiper-pagination-bullet{

			transform: scaleX(0);
		}

		.form-swiper button {
		  margin-top: 1.5rem;
		  border: none;
		  border-radius: 0;
		  cursor: pointer;
		  background: #2563eb;
		  color: #fff;
			transition: ease all 0.2s;
		}
		.form-swiper button:hover {
		  background: #2563eb;
		}
		.form-swiper button.prev-btn {
		  background: #6b7280;
		}
		.form-swiper button.prev-btn:hover {
		  background: #6b7280;
		}
		.form-swiper .submit-btn {
		  background: #16a34a;
		}
		.form-swiper .submit-btn:hover {
		  background: #16a34a;
		}

.custom-form input, .custom-form select{
	padding: 10px;
	font-weight: 300;
	font-size: 14px;
	color: #fff;
	line-height: 24px;
	resize: none;
	outline: none;
	border: none;
	box-sizing: border-box;
	width: 100%;
	background: #00233b !important;
	border-radius: 10px;
	margin-bottom: 10px;    
font-family: "bahnschrift-condensed", sans-serif !important;
}
input[type="date"] {
    color-scheme: dark;
}
.custom-form input[type="radio"], .custom-form input[type="checkbox"]{
	width: 24px;
}
.custom-form .flex{
	gap: 10px;
	display: flex;
}
.custom-form textarea{
	width: 100%;
	box-sizing: border-box;
	padding: 10px;
	font-weight: 300;
	font-size: 14px;
	color: #fff;
	line-height: 24px;
	resize: none;
	margin-bottom: 10px;
	border: none;

	background: #00233b !important;
	border-radius: 10px;

	outline: none;
font-family: "bahnschrift-condensed", sans-serif !important;
}


#formcaptcha {
    position: absolute;
    left: 4vw;
    bottom: 4vw;
    padding: 10px;
    border-radius: 0;
    box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.3);
	background: #fff;
	color: #000;
	z-index: 100;
    width: 215px;
}
#formcaptcha button {
	border: unset;
	outline: unset;
	appearance: none;
	cursor: pointer;
	border-radius: 0;
	margin-top: 12px;
}
#formcaptcha i {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 18px;
	text-align: center;
	font-size: 18px;
	color: #555;
	cursor: pointer;
	padding: 4px;
	background: #ececec;
	border-radius: 0;
}
.CaptchaPanel{
	margin: 0 !important;
	padding: 0 !important;
	text-align: left !important;
font-family: "bahnschrift-condensed", sans-serif !important;
}
.CaptchaPanel img{
	border: unset !important;
	border-radius: 0;
	width: 100%;
}
.CaptchaPanel, .CaptchaAnswerPanel, .CaptchaImagePanel, .CaptchaMessagePanel{
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.CaptchaWhatsThisPanel a{
	color: #000 !important;
}
.CaptchaMessagePanel, .CaptchaWhatsThisPanel{
	padding: 0 !important;
	font-size: 12px;
}




/*-------- FOOTER STYLES ----------------*/

.cs-footer{
	padding: 20px 3.5vw;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	text-align: center;
	align-items: center;
	text-transform: uppercase;
	font-family: "bahnschrift-condensed", sans-serif;
	gap: 24px;
}
.icon-list{
	margin-bottom: 24px;
}
.icon-list li{
	font-size: 21px;
font-family: "bahnschrift-condensed", sans-serif;
	position: relative;
	padding-left: 40px;
}
.icon-list li a{
	color: #000;
}
.icon-list li i{
	position: absolute;
	left: 0;
	top: 2px;
	width: 24px;
	text-align: center;
}

/*---------- RESPONSIVE STYLES ----------*/

@media only screen and (max-width: 767px) {

	.custom-form .flex{flex-wrap: wrap; gap: 0px;}

	.hero:before{
		z-index: 1;
	}
	.hero:after{
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: clamp(3vw, 5vw, 120px);
		background-color: #000;
		opacity: 0.33;
		background-size: cover;
		background-position: top center;
		z-index: 2;
	}
	.hero > *{
		z-index: 3;
	}
	.col-pad{
		padding: 30px;
	}
}






