:root {
	--video-width: 100vw;
	--video-height: 100vh;
	--bs-primary-rgb: 0, 51, 102;
}

@media (min-aspect-ratio: 16/9) {
	:root {
		--video-height: 56.25vw;
	}
}
@media (max-aspect-ratio: 16/9) {
	:root {
		--video-width: 177.78vh;
	}
}

section {
	position: relative;
	z-index: +1;

	& > div:not( .w-100 ) {
		margin: 0 auto;
		max-width: 71.25rem;
		padding: 1rem;
	}

	& > div.icons-3 {
		padding: 0;
	}

	.btn {
		text-transform: uppercase;
	}
}

.header-section {
	color: #fff;
	z-index: 1;
	padding:10vw 0;
	position: relative;

	h1 { color:#f3f3f3; }

	#slideshow {
		position: absolute;
		width: 100%;
		height: 100%;
		overflow: hidden;
		max-width: 100%;
		left:0;
		top:0;
		padding: 0;
		.f-carousel {
			position: absolute;
			width: 100%;
			height: 100%;

			img {
				z-index:2;
			}

			iframe {
				position: absolute;
				top: 50%;
				left: 50%;
				width: var(--video-width);
				height: var(--video-height);
				transform: translate(-50%, -50%);
				z-index:1;
			}
		}
		.f-carousel__dots {
			display:none;
		}
	}
}


.main-features {
	padding:0 1rem;
	margin-bottom: 1rem;

	& > div {
		border-radius: 1rem;
		box-shadow: var(--bs-box-shadow);
		display: flex;
		flex-direction: column;
		padding: 0;

		&.icons-1 > div:first-child { border-radius: 1rem; }

		div {
			background-color: rgb( var(--bs-primary-rgb) );
			color: #fff;
			flex-grow: 1;
			font-size: 1.25rem;
			font-weight: 500;
			padding: 1.5rem 1rem;
			display: flex;
			gap: .5rem;
			align-items: center;
			justify-content: center;

			.img-icon,
			.fa-icon {
				align-items: center;
				border-radius: 50%;
				border:2px solid  #fff;
				display: flex;
				height:3rem;
				justify-content: center;
				padding: .75rem;
				width:3rem;
				img {
					height: 1.5rem;
					width: 1.5rem;
					object-fit: contain;
					filter: invert(1);
				}
			}

			.fa-icon{
				i {
					font-size:1.5rem;
					line-height: 1;
					margin: 0;
				}
			}

			h3 {
				font-size: 1.5rem;
				font-weight: 500;
				margin: 0;
			}

			&:first-child {
				border-radius: 1rem 1rem 0 0;
			}

			&:nth-child(2) {
				background-color: #fff;
				color: rgb( var(--bs-primary-rgb) );
				.img-icon,
				.fa-icon {
					border-color: rgb( var(--bs-primary-rgb) );
					img {
						filter: invert(11%) sepia(93%) saturate(2552%) hue-rotate(196deg) brightness(96%) contrast(104%);
					}
				}
			}

			&:last-child {
				border-radius: 0 0 1rem 1rem;
			}
		}
	}
}

section + .main-features > div {
	margin-top: 1rem;
}

#scroll-to-top {
	background-color: rgb(var(--bs-primary-rgb));
	bottom: 1rem;
	color: #fff;
	cursor: pointer;
	font-size: 1rem;
	line-height: 2;
	position: fixed;
	right: 1rem;
	text-align: center;
	width: 2rem;
	z-index: 10;
	display: none;

	&.on{
		display: block;
	}
}

.image-container,
.split-colums,
.cards,
.steps,
.partners,
.faqs {
	display: flex;
	gap: 1rem;
	flex-direction: column;
}

.image-container {
	align-items: center;
	padding: 2rem 0 !important;

	& > .carousel-widget {
		width: 35.625rem;
		max-width: 100%;

		.carousel-header {
			display:none;
		}

		.f-carousel.has-dots{
			margin-bottom: 0;

			.f-carousel__dots{
				display: none;
			}
		}
	}

	& > div {
		padding: 0 ;

		&:last-child {
			padding-left:1rem;
			padding-right:1rem;
		}
	}
}

.split-colums {
	gap: 2rem;

	& > div {
		flex-basis: 50%;
		flex-grow: 1;
	}
}

.cards {
	align-items: center;
	justify-content: center;

	& > .card {
		flex-basis: 33%;
		border-width: 1px 1px 5px 1px;
		border-radius: 1.25rem;
		transition: border 0.7s;
		overflow: hidden;
		max-width: 32rem;

		&:hover {
			border-color: rgb(var(--bs-primary-rgb))
		}
	}
}

.partners {
	flex-direction: row;
	flex-wrap: wrap;
	gap: .5rem;

	img {
		width: calc( 33% - .325rem );
		height: 50px;
		margin-bottom: .75rem;
		max-width: 12.5rem;
		object-fit: contain;
	}
}

.steps {
	align-items: stretch;

	.step {
		font-size:4.375rem;
		font-weight: bolder;
		margin: 0;
	 }
}

.video {
	max-width: 61.875rem !important;

	iframe {
		width: 100%;
		height: auto;
		aspect-ratio: 16/9;
	}
}

.faqs {
 	width: 100%;

	.accordion-item {
		border: none;
		border-radius: 0;

		.accordion-header button{
			border-radius: .5rem !important;
			background-color: rgb( var(--bs-primary-rgb) );
			color: #fff;

			&::after {
				display: none;
			}
		}

		.accordion-body {
			font-weight: 300;
		}
	}
}

@media ( min-width: 1172px ) {
	section {
		& > div:not(.w-100) {
			padding: 0;
		}
	}
}

@media ( min-width: 1024px ) {
	.main-features {
		& > div div {
			font-size: 1.5rem;
			padding: 2rem 1rem;

			.img-icon,
			.fa-icon {
				height:4.75rem;
				padding: 1rem;
				width:4.75rem;
				img {
					height: 2.5rem;
					width: 2.5rem;
				}
			}

			.fa-icon i {
				font-size:2rem;
			}
		}
	}

	section + .main-features > div {
		margin-top: -4.1875rem !important;
	}
}

@media ( min-width: 768px ) {
	section {
		padding:0;

		&.height-full {
			height:100vh;
		}
	}

	.main-features {
		margin-bottom: 2rem;

		& > div {
			flex-direction: row;

			div {
				&:first-child {
					border-radius: 1rem 0 0 1rem;
				}
				&:last-child {
					border-radius: 0 1rem 1rem 0;
				}
			}
		}
	}


	section + .main-features > div {
		margin-top: -3.1875rem;
	}

	.image-container {
		align-items: flex-start;
		flex-direction: row;
		& > .carousel-widget {
			width: 50%;
			flex-shrink: 0;
		}
		& > div:last-child {
			padding: 0 ;
		}
	}

	.split-colums,
	.cards {
		align-items: stretch;
		flex-direction: row;
	}

	.steps {
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 3rem;

		&.of-3 > div {
			width: 33%;
		}

		&.of-2 > div {
			width: 50%;
		}
	}

}

/* bootstrap overrides */
.btn-primary {
	--bs-btn-color: #fff;
	--bs-btn-bg: #036;
	--bs-btn-border-color: #036;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #1F4877;
	--bs-btn-hover-border-color: #1F4877;
	--bs-btn-focus-shadow-rgb: 49, 132, 253;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #1F4877;
	--bs-btn-active-border-color: #1F4877;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #036;
	--bs-btn-disabled-border-color: #036;
}
.accordion-button {
	--bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(0, 51, 102, .25);

}
:focus-visible {
	outline: 1px solid rgb(0, 51, 102, .25);
}

/* clean bad inserted code */
iframe[src="javascript:false"],
img[src^="https://tag.simpli.fi"],
img[src^="https://rdcdn.com/"],
img[src^="https://trkn.us"],
img[src*="pubads"] {
	position: absolute;
	left:0;
	bottom: 0;
}