:root {
	--Obsidian: #191919;
	--Cobalt: #0042B6;
	--Deep-Data: #131D52;
	--Data: #0073E6;
	--Sky-1: #93CDFF;
	--Sky-2: #DFF0FF;
	--Ash: #9CAFBF;
	--Light-Ash: #F3F5F7;
	--White: #ffffff;

}

.white {
	background-color: var(--White);
}

.sky {
	background-color: var(--Sky-2);
}

.gradient {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) -20.8%, rgba(201, 195, 253, 0.05) 60.57%, #DFF0FF 93.37%, rgba(133, 198, 255, 0.2) 169.48%);
}

.lightgrey {
	background-color: #FBFCFD
}

.green {
	background-color: #83D8B4;
}

.purple {
	background-color: #A59CFC;
}

.blue {
	background-color: #70BCFF;
}

.grey {
	background-color: var(--Ash);
}

.yellow {
	background-color: #FDE3AA;
}

.data {
	background-color: var(--Data);
}

.white .cards-viewport::after {
	background: linear-gradient(to right, rgba(255, 255, 255, 0), white 85%);
}

.sky .cards-viewport::after {
	background: linear-gradient(to right, rgba(223, 240, 255, 0), var(--Sky-2) 85%);
}

.lightgrey .cards-viewport::after {
	background: linear-gradient(to right, rgba(251, 252, 253, 0), #FBFCFD 85%);
}

.mw755 {
	max-width: 755px;
	margin: 0 auto;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins: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');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins';
}


h1 {
	font-size: 60px;
	line-height: 76px;
	font-weight: 600;
	color: var(--Deep-Data);
	margin-top: 15px;
	margin-bottom: 15px;
}

h2 {
	font-size: 50px;
	line-height: 110%;
	font-weight: 600;
	color: var(--Deep-Data);
}

h3 {
	font-size: 25px;
	line-height: 30px;
	color: var(--Obsidian);
	font-weight: 600
}

h4 {
	font-size: 23px;
	line-height: 35px;
	color: var(--Deep-Data);
	font-weight: 400
}

p {
	font-size: 18px;
	line-height: 120%;
	color: var(--Obsidian);
	font-weight: 400;
	margin-top: 25px;
}

p.sm,
.sm p {
	font-size: 16px;
	line-height: 130%;
	color: var(--Ash);
	font-weight: 400;
	margin-top: 25px;
}

h5 {
	font-size: 18px;
	line-height: 24px;
	margin: 0;
	font-weight: 500;
}

.faq-item p {
	margin: 0;
}

.whitetx p,
.whitetx h1,
.whitetx h2,
.whitetx h3,
.whitetx h4,
.whitetx h5 {
	color: #ffffff;
}

.center {
	text-align: center;
}

.faq_expand h2 {
	margin-bottom: 88px;
}

.feature-section h2 {
	color: var(--Obsidian);
}

.banner p {
	color: var(--Deep-Data);
	margin-top: 0px;
}

.hide {
	display: none;
}

.show {
	display: inline-flex;
	width: 100%;
}

.box {
	background-color: var(--White);
	border-radius: 20px
}

.padtop50 {
	padding-top: 50px;
}

.padtop60 {
	padding-top: 60px;
}

.pad50 {
	padding: 50px;
}

/* Buttons */
.button a {
	padding: 10px 15px;
	min-height: 40px;
	border-radius: 8px;
	text-decoration: none;
	font-style: normal;
	font-weight: 500;
	font-size: 15px;
	text-align: center;
	line-height: 16px;
	display: inline-flex;
}


.button.btndata a {

	background: var(--Data);
	border: 1px solid var(--White);
	color: var(--White);
}

.button.btndata a:hover {
	background: var(--Deep-Data);
}


.button.btnobsidian a {

	background: var(--white);
	border: 1px solid var(--Deep-Data);
	color: var(--Deep-Data);
}

.button.btnobsidian a:hover {
	background: var(--Deep-Data);
	color: var(--White);

}

.button.btncobalt a {

	background: var(--Cobalt);
	border: 1px solid var(--White);
	color: var(--White);
}

.button.btncobalt a:hover {
	background: var(--Deep-Data);
	color: var(--White);

}

.section_headline {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}

.pad90 {
	padding: 90px 0px;
}

.container_inner {
	max-width: 1280px;
	width: 90%;
	margin: 0 auto;
}

/* Navigation */
.nav-container {
	background: #FFFFFFCC;
	position: relative;
	display: inline-flex;
	width: 100%;
	justify-content: space-between;
	height: 63px;
	align-items: center;
	align-content: center;
	gap: 20px;
	padding: 20px;
	border-radius: 14px;
}

.mobile-back {
	display: none;
}

.nav-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 2rem;
}

.nav-header .logo img {
	width: 177px;
}

a.logo img {
	display: block;
}

.nav-ctas {
	display: inline-flex;
	gap: 35px;
	align-content: center;
	align-items: center;
}

a.text_link, #text_link_nav a {
	text-decoration: none;
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 21px;
	color: var(--Obsidian);
}

/* Burger */
.burger {
	display: none;
	flex-direction: column;
	cursor: pointer;
	gap: 5px;
}

.burger span {
	display: block;
	width: 25px;
	height: 3px;
	background: var(--Obsidian);
	border-radius: 2px;
}

/* Menu */
.menu-main-menu-container {
	display: flex;
}

.menu {
	list-style: none;
	display: flex;
	gap: 1rem;
}

.menu li {
	position: relative;
}

.menu li a {
	text-decoration: none;
	color: var(--Obsidian);
	padding: 0.5rem 1rem;
	display: block;
}

.menu li:hover>a {
	color: var(--Deep-Data)
}

.sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: var(--Sky-2);
	list-style: none;
	min-width: 250px;
	z-index: 1000;
	border-radius: 8px;
}

.sub-menu li {
	position: relative;
}

.sub-menu li a {
	padding: 0.5rem 1rem;
}

.menu li:hover>.sub-menu {
	display: block;
}

a.menu-drop:after {
	content: url('https://go.formassembly.com/rs/794-XNU-091/images/nav-arrow.svg?version=0');
	padding-left: 7px;
}

/* Banner */
.banner {
	background-size: cover;
	padding: 63px 0;

}

.banner_content {
    margin-top: 90px;
    display: grid;
    align-items: start;
    align-content: center;
    justify-content: space-between;
    grid-template-columns: 45% 55%;
}
div#banner_text {
    padding-top: 50px;
}
.social img {
    display: block;
}
.form {
	background-image: url('https://go.formassembly.com/rs/794-XNU-091/images/form-rectangle-bg.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

.form_cont {
	padding: 47px 30.7124px 29px;
	gap: 43.87px;
	width: 100%;
	background: #FFFFFF;
	box-shadow: 10px 10px 15px rgba(25, 25, 25, 0.15);
	border-radius: 17.5499px;
	max-width: 552px;
	margin: 0 auto;
}

.mktoForm {
	text-align: left;
	width: 100% !important;
}

.mktoForm * {
	font-family: 'Poppins' !important;
}

.mktoFormRow {
	width: 100% !important;
	display: inline-flex;
}

.mktoForm .mktoOffset {
	display: none !important;
}

.mktoForm button.mktoButton {
	cursor: pointer;
	margin: 0 !important;
	box-sizing: border-box !important;
	padding: 20px !important;
	background: #0042B6 !important;
	border: 1.5px solid #FFFFFF !important;
	border-radius: 13px !important;
	font-style: normal !important;
	font-weight: 500 !important;
	font-size: 19px !important;
	line-height: 20px !important;
	align-items: center !important;
	color: #FFFFFF !important;
}

div#form_text {
	margin-bottom: 35px;
}

span.mktoButtonWrap.mktoNative {
	margin-left: 1px !important;
	margin-top: 20px !important;
	width: 100% !important;
	text-align: center !important;
}

.mktoButtonRow {
	width: 100% !important;
	text-align: center !important;
	padding-top: 20px !important;
	display: inline-block;
	position: relative;
}

.mktoForm .mktoFieldWrap {
	float: left;
	width: 100% !important;
}

.mktoForm .mktoLabel {
	width: 100% !important;

	font-size: 17px !important;
	line-height: 21px !important;
	font-weight: 400 !important;
	color: #191919 !important;
	flex: none !important;
	margin-bottom: 7px !important;
}

.mktoForm .mktoGutter {
	float: left;
	height: 1.2em;
	display: none !important;
}

.mktoFormCol {
	padding: 7px !important;
}

.mktoFormRow:has(input[type="hidden"]) {
	display: block !important;
}

.mktoForm .mktoFormRow {
	clear: both;
	margin-left: -7px;
	margin-right: -7px;
}

.mktoForm .mktoAsterix {
	display: none !important;
}

.mktoForm input[type=text],
.mktoForm input[type=url],
.mktoForm input[type=email],
.mktoForm input[type=tel],
.mktoForm input[type=number],
.mktoForm input[type=date],
.mktoForm textarea.mktoField,
.mktoForm select.mktoField {
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 18px 18px 18px 13px !important;
	border: 1px solid #EBEFF2 !important;
	border-radius: 8px !important;
}

.mktoForm .mktoFormCol {
	float: left;
	position: relative;
	min-height: 2em;
	width: 100% !important;
}

/* Logos */

div.c_logos,
div.c_logos div {
	display: flex;
	width: 100%;
	justify-content: space-around;
	gap: 30px;
	align-content: center;
	align-items: center;

}

div.c_logos {
	margin-top: 84px;
}

div.c_logos img {
	width: 100%;
	height: auto;
	max-width: 200px;
	max-height: 40px;
}

/* Three Column Icons */

.three_col_icons_content {
	display: inline-flex;
	flex-direction: row;
	gap: 25px;
	margin-top: 50px;
}

.three_col_icons_content .box {
	padding: 125px 40px 40px 40px;
}

.three_col_icons_content .box img {
	height: 70px;
	width: auto;
	margin-bottom: 30px;
}


/* Solutions Slider */

/* Tabs */
.tabs {
	display: flex;
	justify-content: center;
	gap: 30px;
	margin-bottom: 94px;
	margin-top: 50px;
  }
  
  .tab {
	background: none;
	border: none;
	opacity: 0.5;
	padding-bottom: 20px;
	font-size: 18px;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	color: var(--Ash);
  }
  
  .tab.active {
	opacity: 1;
	color: var(--Data);
	border-bottom: 2px solid var(--Data);
  }
  
  /* Content */
  .tab-content {
	display: none;
  }
  
  .tab-content.active {
	display: block;
  }
  
  /* Slider */
  .slider-wrapper {
	position: relative;
  }
  
  /* viewport */
  .cards-viewport {
	overflow: hidden;
	width: 100%;
	position: relative;
  }
  
  .cards-track {
	display: flex;
	gap: 20px;
	transition: transform 0.4s ease;
  }
  
  /* ✅ Remove hidden items from layout */
  .cards-track .hide {
	display: none;
  }
  
  .card-content {
	padding: 35px 30px 70px 30px;
  }
  
  /* ✅ Cards always fill container width based on visible count */
  .cards-track .card {
	flex: 0 0 calc((100% - (var(--visible-cards, 3) - 1) * 20px) / var(--visible-cards, 3));
	max-width: calc((100% - (var(--visible-cards, 3) - 1) * 20px) / var(--visible-cards, 3));
	min-width: 0; /* prevents overflow issues */
	background: white;
	border-radius: 20px;
	border: 1px solid var(--Ash);
  }
  
  .card-image {
	height: 265px;
	border-radius: 20px 20px 0px 0px;
	width: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
  }
  
  /* Fade-out overlap indicator */
  .cards-viewport::after {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	width: 40px;
	height: 100%;
	pointer-events: none;
  }
  
  /* Arrows under cards */
  .slider-arrows {
	margin-top: 25px;
	display: flex;
	justify-content: center;
	gap: 20px;
  }
  
  .arrow img {
	display: block;
  }
  
  .arrow {
	background: transparent;
	border: 2px solid #9CAFBF;
	padding: 16px;
	border-radius: 50%;
	cursor: pointer;
	opacity: 0.5;
	transition: background 0.2s;
  }
  
  .arrow:hover {
	opacity: 1;
  }
  
  .learn-btn {
	padding: 8px 16px;
	border: 1px solid var(--Deep-Data);
	border-radius: 6px;
	color: var(--Deep-Data);
	text-decoration: none;
	display: inline-block;
	margin-top: 30px;
  }
  
  .learn-btn:hover {
	background: var(--Deep-Data);
	color: var(--White);
  }
  

/* FEATURE SECTION STYLING    */

.feature-section {
	margin-top: 80px;
	width: 100%;
	font-family: sans-serif;
}

/* Tabs */
.feature-tabs {
	display: flex;
	gap: 30px;
	justify-content: center;
	margin-bottom: 30px;
}

.feature-tab {
	background: none;
	border: none;
	cursor: pointer;
	padding-bottom: 20px;
	font-size: 18px;
	opacity: 0.5;
	border-bottom: 2px solid transparent;
	color: var(--Ash);
}

.feature-tab.active {
	opacity: 1;
	color: var(--Data);
	border-bottom: 2px solid var(--Data);
}

/* Slider Wrapper */
.feature-slider-wrapper {
	overflow: hidden;
	position: relative;
	width: 100%;
}

/* Track */
.feature-track {
	display: flex;
	transition: transform 0.5s ease;
}

/* Slide (2 column layout) */
.feature-slide {
	min-width: 100%;
	display: flex;
	align-items: center;
	gap: 40px;
	padding: 80px 50px 50px 50px;
	flex-direction: row-reverse;
	border-radius: 30px;
}

/* Two-column styling */
.feature-image {
	flex: 1;
	min-height: 320px;
	background-size: contain;
	background-position: center;
	border-radius: 12px;
	background-repeat: no-repeat;
}

.feature-text {
	flex: 1;
}

/* Dot Navigation */
.feature-dots {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 20px;
}

.feature-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--Sky-2);
	cursor: pointer;
}

.feature-dot.active {
	background: var(--Data);
}

/* Testimonials    */
.testimonials .card {
	min-width: calc(25% - 18px);
}

.testimonials .slider-wrapper {
	margin-top: 65px;

}

.testimonial-logo {
	height: 100px;
	display: inline-flex;
	align-items: center;
	align-content: center;
	width: 100%;
	padding: 0 30px 0px 30px;
}

.testimonial-logo img,
img.testimonial-logo {
	width: 100%;
	height: auto;
	max-width: 75%;
}

.testimonials .card-content {
	padding: 0px 30px 150px 30px;
}

.testimonial_bio img {
	width: 60px;
	height: auto;
}

.testimonial_bio {
	padding: 0px 30px 0px 30px;
	display: inline-flex;
	gap: 20px;
	position: absolute;
	bottom: 20px;
	align-content: center;
	align-items: center;
}

.bio p {
	color: var(--Ash);
	font-size: 16px;
	margin-top: 10px;
	margin-bottom: 0px;
}

/* FAQ expand */


.faq-item {
	padding: 15px 0;
	transition: background 0.3s ease;
	padding: 20px;
	border-radius: 8px;
	background: #EFF7FF;
	margin-bottom: 12px;

}

.faq-question {
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	font-size: 18px;
	font-weight: 500;

}

.faq-item:hover {
	background: var(--Sky-1);
}

.faq-item.active {
	background: var(--Sky-1);
}

.faq-item.active p,
.faq-item.active div {
	color: #ffffff;
}

.faq-icon {
	font-size: 22px;
	transition: transform 0.3s ease;
}

.faq-item.active .faq-icon {
	transform: rotate(45deg);
}

.faq-answer {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: all 0.35s ease;
	padding: 0px;
}

.faq-item.active .faq-answer {
	max-height: 600px;
	opacity: 1;
	margin-top: 10px;
}

/* FAQ  */

.twocol {
	display: grid;
	grid-template-columns: 40% 55%;
	align-items: center;
	align-content: center;
	gap: 5%;
}

.faqimg img {
	width: 100%;
	height: auto;
}

.faq_cta .container_inner {
	padding: 80px 50px;
	border-radius: 30px;
}

/* CTA  */

.cta .container_inner {
	border-radius: 30px;
}

.cta {
	margin-bottom: -100px;
	z-index: 99;
}

/* Footer  */

.footer {
	padding-top: 250px;
	background: linear-gradient(178deg, rgba(173, 216, 255, 0.50) 30.87%, rgba(120, 183, 245, 0.50) 117.69%, rgba(101, 171, 241, 0.50) 159.49%, rgba(0, 115, 230, 0.50) 183.41%);
}

.footer .container_inner {
	display: grid;
	grid-template-columns: 50% 50%;
}

.footer p,
.footer a {
	color: var(--Obsidian);
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 26px;
	text-decoration: none;
	margin: 0px;
}

.flex {
	display: inline-flex;
	justify-content: space-between;
	gap: 20px;
}

.footer a.logo img {
	max-width: 216px;
	height: auto;
}

.social,
.legal {
	display: inline-flex;
	gap: 21px;
	align-items: center;
	align-content: center;
}

.container_inner.bordertop {
	border-top: var(--Cobalt) 1px solid;
	padding-top: 20px;
	margin-top: 100px;
	padding-bottom: 60px;
	align-content: center;
	align-items: center;
}

/* Mobile: stack with IMAGE FIRST */
@media (max-width: 768px) {

	h1 {
		font-size: 40px;
		line-height: 46px;
	}

	h2 {
		font-size: 35px;
	}

	h3 {
		font-size: 20px;
		line-height: 25px;
	}

	h4 {
		font-size: 18px;
		line-height: 23px;
	}

	p {
		font-size: 16px;
	}

	p.sm,
	.sm p {
		font-size: 14px;
	}

	h5 {
		font-size: 16px;
		line-height: 20px;
	}

	.mktoFormRow {
		flex-direction: column;
		margin: 0px !important;
	}

	.mktoFormCol {
		padding: 0px !important;
	}

	.mktoForm input[type=url],
	.mktoForm input[type=text],
	.mktoForm input[type=date],
	.mktoForm input[type=tel],
	.mktoForm input[type=email],
	.mktoForm input[type=number],
	.mktoForm textarea.mktoField,
	.mktoForm select.mktoField {
		height: auto !important;
	}
	.form_cont {
		width: 100%;
		margin: 0 auto;
	}
	.mktoHtmlText {
		width: 100% !important;
	}
	.nav-container {

		height: auto;
		align-items: center;
		align-content: center;
		gap: 5px;
		padding: 10px;
		border-radius: 14px;
		flex-direction: column;
	}

	.feature-slide {
		flex-direction: column;
	}

	.feature-image {
		width: 100%;
		order: 1;
		min-height: 250px;
	}

	.feature-text {
		width: 100%;
		order: 2;
	}

	.banner_content {
		margin-top: 50px;
		display: flex;
		gap: 50px;
		flex-direction: column;
	}

	div.c_logos div {
		display: grid;
		grid-template-columns: 48% 48%;
		width: 100%;
		margin: 0 auto;
		justify-content: center;
		gap: 25px;
		align-content: center;
		align-items: center;
		justify-items: center;
	}

	.three_col_icons_content {
		display: inline-flex;
		flex-direction: column;
	}

	.feature-tabs {
		display: flex;
		gap: 10px;
		justify-content: center;
		margin-bottom: 10px;
		flex-direction: column;
		font-size: 14px;
	}
	.nav-header {
		width: 100%;
	}
	.twocol {
		display: flex;
		flex-direction: column;
	}

	.footer .container_inner {
		text-align: center;
		display: inline-flex;
		grid-template-columns: 50% 50%;
		flex-direction: column;
		gap: 35px;
		align-items: center;
		align-content: center;
	}

	.flex {
		display: inline-flex;
		flex-direction: column;
	}

	.social,
	.legal {
		justify-content: center;
	}

	.slider-wrapper .cards-track {
		display: flex !important;
	}

	.slider-wrapper .cards-track>* {
		min-width: 100% !important;
		flex: 0 0 100% !important;
	}

	.tabs {
		display: flex;
		justify-content: center;
		gap: 5px;
		margin-bottom: 30px;
		margin-bottom: 94px;
		margin-top: 50px;
		flex-direction: column;
	}
}


/* Mobile */
@media screen and (max-width: 1100px) {
	.burger {
		display: flex;
	}

	.menu-main-menu-container {
		display: none;
		width: 100%;
	}

	.menu {
		flex-direction: column;
		width: 100%;
	}

	.menu li {
		width: 100%;
	}

	.sub-menu {
		position: relative;
		border: none;
	}

	.menu li:hover>.sub-menu {
		display: none;
	}

	.sub-menu.show {
		display: flex;
		flex-direction: column;
	}

	.mobile-back {
		display: block;
		padding: 0.5rem 1rem;
		background: #eee;
		cursor: pointer;
	}
}