:root {
	--vs-navy: #102a54;
	--vs-blue: #246bb3;
	--vs-sky: #57b8d9;
	--vs-red: #d7222f;
	--vs-ink: #172033;
	--vs-muted: #667085;
	--vs-line: rgba(16, 42, 84, 0.12);
	--vs-shadow: 0 22px 55px rgba(16, 42, 84, 0.16);
}

body {
	color: var(--vs-ink);
	background:
		linear-gradient(180deg, rgba(246, 250, 253, 0.82) 0, rgba(255, 255, 255, 0) 360px),
		#fff;
}

a {
	transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.appear-animation {
	opacity: 1 !important;
}

#header .header-top {
	background: linear-gradient(90deg, rgba(16, 42, 84, 0.04), rgba(87, 184, 217, 0.08));
	border-bottom: 1px solid rgba(16, 42, 84, 0.08);
}

#header .header-body {
	box-shadow: 0 10px 32px rgba(16, 42, 84, 0.08);
}

#header .header-logo img {
	width: 150px;
	max-height: 72px;
	object-fit: contain;
	filter: drop-shadow(0 8px 14px rgba(16, 42, 84, 0.16));
}

#header .header-nav-main nav > ul > li > a.nav-link {
	position: relative;
	color: var(--vs-ink);
	font-weight: 700;
	padding-inline: 1rem;
}

#header .header-nav-main nav > ul > li > a.nav-link::after {
	content: "";
	position: absolute;
	left: 1rem;
	right: 1rem;
	bottom: 0.45rem;
	height: 3px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--vs-red), var(--vs-sky));
	opacity: 0;
	transform: scaleX(0.4);
	transition: opacity 180ms ease, transform 180ms ease;
}

#header .header-nav-main nav > ul > li > a.nav-link:hover::after,
#header .header-nav-main nav > ul > li > a.nav-link.active::after {
	opacity: 1;
	transform: scaleX(1);
}

#header .feature-box {
	padding: 0.55rem 0.85rem;
	border: 1px solid rgba(36, 107, 179, 0.16);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.74);
	box-shadow: 0 12px 28px rgba(16, 42, 84, 0.08);
}

#home {
	position: relative;
	min-height: 610px;
	background-position: center;
}

#home::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		linear-gradient(90deg, rgba(16, 42, 84, 0.82) 0%, rgba(16, 42, 84, 0.62) 36%, rgba(16, 42, 84, 0.36) 68%, rgba(16, 42, 84, 0.18) 100%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
	pointer-events: none;
}

#home .container {
	position: relative;
	z-index: 2;
	min-height: 390px;
	display: flex;
	align-items: center;
}

#home .row {
	width: 100%;
}

#home .col-md-10 {
	text-align: left !important;
}

#home h1 {
	max-width: 660px;
	font-size: clamp(2.25rem, 3.7vw, 3.45rem) !important;
	line-height: 1.12 !important;
	letter-spacing: 0;
	text-shadow: 0 14px 36px rgba(0, 0, 0, 0.32);
}

#home p {
	max-width: 500px;
	font-size: 1.25rem !important;
	color: rgba(255, 255, 255, 0.88) !important;
	opacity: 1 !important;
}

#home .custom-highlight-1 {
	display: inline-block;
	color: #fff;
	background: linear-gradient(90deg, rgba(215, 34, 47, 0.96), rgba(36, 107, 179, 0.96));
	border-radius: 8px;
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.22);
}

#home + .container.position-relative {
	margin-top: -455px !important;
	z-index: 5 !important;
}

.btn.btn-primary,
.btn.btn-secondary {
	border: 0;
	border-radius: 7px;
	box-shadow: 0 14px 30px rgba(36, 107, 179, 0.22);
}

.btn.btn-primary {
	background: linear-gradient(135deg, var(--vs-blue), var(--vs-navy));
}

.btn.btn-secondary {
	background: linear-gradient(135deg, var(--vs-red), #a81722);
}

.btn.btn-primary:hover,
.btn.btn-secondary:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 38px rgba(16, 42, 84, 0.28);
}

.custom-form-style-1 .form-control {
	min-height: 54px;
	border: 1px solid rgba(16, 42, 84, 0.14);
	border-radius: 7px;
	background: #f8fbfd;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
	transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.custom-form-style-1 textarea.form-control {
	min-height: 170px;
}

.custom-form-style-1 .form-control:focus {
	border-color: rgba(36, 107, 179, 0.62);
	background: #fff;
	box-shadow: 0 0 0 4px rgba(87, 184, 217, 0.16);
}

.card.custom-border-radius-1 {
	position: relative;
	overflow: hidden;
	border-radius: 8px !important;
	box-shadow: var(--vs-shadow) !important;
}

.card.custom-border-radius-1::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 6px;
	background: linear-gradient(90deg, var(--vs-red), var(--vs-sky), var(--vs-blue));
}

.card.custom-border-radius-1 .card-body {
	padding-top: 3.5rem !important;
}

.list svg {
	padding: 6px;
	border-radius: 999px;
	background: rgba(87, 184, 217, 0.12);
	stroke: var(--vs-blue);
}

#whoweare {
	background:
		linear-gradient(180deg, #fff 0%, #f6f9fc 100%) !important;
}

#whoweare h3 .text-1 {
	margin-top: 0.45rem;
	color: var(--vs-blue) !important;
	font-size: 1.05rem !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

#whoweare img.rounded-circle {
	border: 8px solid #fff;
	box-shadow: 0 24px 56px rgba(16, 42, 84, 0.18) !important;
}

#vs-product-list {
	background:
		radial-gradient(circle at top left, rgba(87, 184, 217, 0.18), transparent 34rem),
	linear-gradient(180deg, #f6f9fc 0%, #fff 100%);
}

#vs-product-list .row.align-items-end {
	margin-bottom: 1.75rem !important;
	padding-bottom: 0 !important;
}

#vs-product-list p,
#whoweare p {
	color: #4f5f72;
	font-size: 1.04rem;
	line-height: 1.8;
}

.owl-products .team-box {
	height: 100%;
	padding: 1.3rem 1rem 1.1rem;
	border: 1px solid rgba(36, 107, 179, 0.18);
	border-radius: 8px;
	background: linear-gradient(180deg, #fff 0%, #f7fbff 100%);
	box-shadow: 0 18px 38px rgba(16, 42, 84, 0.13);
	transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.owl-products .team-box:hover {
	transform: translateY(-4px);
	border-color: rgba(36, 107, 179, 0.26);
	box-shadow: 0 22px 44px rgba(16, 42, 84, 0.14);
}

.owl-products .team-image {
	display: grid;
	place-items: center;
	height: 150px;
}

.owl-products .team-image img {
	width: auto;
	max-width: 100%;
	max-height: 130px;
	object-fit: contain;
	filter: drop-shadow(0 12px 18px rgba(16, 42, 84, 0.16));
}

.owl-products .team-text h5 {
	margin: 0.85rem 0 0;
	color: var(--vs-navy);
	font-weight: 800;
	text-align: center;
}

#contact {
	position: relative;
}

#contact::before {
	content: "";
	position: absolute;
	inset: 1rem 0 auto;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(16, 42, 84, 0.18), transparent);
}

#contact .contact-form {
	padding: 2rem;
	border: 1px solid var(--vs-line);
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 18px 48px rgba(16, 42, 84, 0.08);
}

#footer,
#footer .footer-copyright {
	background: linear-gradient(135deg, #0d2449 0%, #132d5a 58%, #183765 100%) !important;
}

#footer a,
#footer p {
	color: rgba(255, 255, 255, 0.88);
}

@media (max-width: 991px) {
	#header .feature-box {
		display: none !important;
	}

	#home {
		min-height: 570px;
	}

	#home .container {
		min-height: 370px;
	}

	#home h1,
	#home p {
		max-width: none;
	}
}

@media (max-width: 767px) {
	#header .header-logo img {
		width: 128px;
	}

	#home {
		min-height: 530px;
	}

	#home::before {
		background: linear-gradient(180deg, rgba(16, 42, 84, 0.84), rgba(16, 42, 84, 0.52));
	}

	#home .container {
		align-items: flex-start;
		min-height: 360px;
		padding-top: 3rem;
	}

	#home h1 {
		font-size: 2.45rem !important;
	}

	.card.custom-border-radius-1 .card-body,
	#contact .contact-form {
		padding: 1.35rem !important;
	}
}