/**
 * Codenexa design tokens + legacy Codenexa variable mapping.
 */
:root {
	--cn-color-brand: #307dff;
	--cn-color-accent: #1aa8e0;
	--cn-color-dark: #1a1832;
	--cn-color-dark-2: #12102a;
	--cn-color-dark-3: #0d0b1f;
	--cn-color-white: #ffffff;
	--cn-color-gray: rgba(255, 255, 255, 0.55);
	--cn-color-gray-2: rgba(255, 255, 255, 0.08);
	--cn-color-bg: #f5f7ff;
	--cn-color-bg-2: #eef2ff;
	--cn-color-bg-3: #ffffff;
	--cn-color-text: #0f1020;
	--cn-color-text-2: #4a4d6a;
	--cn-color-text-3: #8890b5;
	--cn-color-border: rgba(48, 125, 255, 0.15);
	--cn-color-card-bg: #ffffff;
	--cn-color-card-border: rgba(48, 125, 255, 0.12);
	--cn-color-cta-bg: #2568e6;
	--cn-font-family: "Exo 2", sans-serif;
	--cn-container-pad: 60px;

	--white: var(--cn-color-white);
	--black: #000000;
	--primary: var(--cn-color-text);
	--secondary: var(--cn-color-text-2);
	--brand: var(--cn-color-brand);
	--body: var(--cn-color-bg);
	--neutral-50: var(--cn-color-bg-3);
	--neutral-100: var(--cn-color-bg-2);
	--neutral-200: #e2e8fc;
	--neutral-300: #c8d4f0;
	--neutral-400: var(--cn-color-text-3);
	--neutral-500: var(--cn-color-text-2);
	--neutral-600: #3a3d58;
	--neutral-700: #2a2d45;
	--neutral-800: var(--cn-color-dark);
	--neutral-900: var(--cn-color-dark-2);
	--neutral-950: var(--cn-color-dark-3);
	--font_instrument: var(--cn-font-family);
}

[data-color-primary="color-primary-1"] {
	--brand: var(--cn-color-brand);
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
button,
input,
select,
textarea {
	font-family: var(--cn-font-family);
}

body {
	color: var(--cn-color-text);
	background-color: var(--cn-color-bg);
}

body::-webkit-scrollbar-thumb {
	background-color: var(--cn-color-dark);
}

.container {
	padding-left: max(12px, var(--cn-container-pad));
	padding-right: max(12px, var(--cn-container-pad));
}

@media (max-width: 991px) {
	.container {
		padding-left: 24px;
		padding-right: 24px;
	}
}

@media (max-width: 767px) {
	.container {
		padding-left: 16px;
		padding-right: 16px;
	}
}

.box-white {
	background-color: var(--cn-color-bg-3);
}

.box-black {
	background-color: var(--cn-color-dark-3);
}

.text-secondary {
	color: var(--cn-color-text-2) !important;
}

.text-brand {
	color: var(--cn-color-brand) !important;
}

.partner-wrap .infiniteslide_wrap::after {
	background: linear-gradient(
		90deg,
		var(--cn-color-bg) 0%,
		rgba(245, 247, 255, 0) 25%,
		rgba(245, 247, 255, 0) 75%,
		var(--cn-color-bg) 100%
	);
}

.section-hero,
.section-partner,
.section-about-us {
	background-color: var(--cn-color-bg);
}

.benefits-box,
.review-box,
.pricing-item,
.features-item,
.team-item {
	background-color: var(--cn-color-card-bg);
	border-color: var(--cn-color-card-border);
}

.section-awards .awards-item {
	background-color: rgba(255, 255, 255, 0.03);
	border-color: rgba(48, 125, 255, 0.15);
}

.section-awards .awards-item:hover {
	background:
		radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(48, 125, 255, 0.12) 0%, rgba(48, 125, 255, 0) 100%),
		linear-gradient(0deg, var(--cn-color-dark-2), var(--cn-color-dark));
	border-color: rgba(48, 125, 255, 0.35);
	box-shadow:
		0 -4px 0 0 var(--cn-color-dark-3) inset,
		0 2px 0 0 rgba(255, 255, 255, 0.08) inset,
		0 7.77px 2.21px 0 rgba(0, 0, 0, 0.06),
		0 3px 3px 0 rgba(0, 0, 0, 0.1),
		0 14px 34px 0 rgba(48, 125, 255, 0.18),
		0 1px 2px 0 rgba(48, 125, 255, 0.3);
}

.section-awards .heading-section .heading-sub.style-1 {
	background:
		radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(48, 125, 255, 0.12) 0%, rgba(48, 125, 255, 0) 100%),
		linear-gradient(0deg, var(--cn-color-dark-2), var(--cn-color-dark-3));
	box-shadow:
		0 3px 3px 0 rgba(0, 0, 0, 0.14),
		0 -3px 0 0 var(--cn-color-dark-3) inset,
		0 1px 0 0 rgba(48, 125, 255, 0.15) inset;
}

.tf-btn {
	background:
		radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%),
		linear-gradient(0deg, var(--cn-color-dark-2), var(--cn-color-dark-2));
}

.tf-btn:hover {
	background:
		radial-gradient(62.56% 62.56% at 50% -13%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 100%),
		linear-gradient(0deg, var(--cn-color-dark), var(--cn-color-dark));
}

.tf-btn-2 {
	color: var(--cn-color-text);
	background:
		radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%),
		linear-gradient(0deg, var(--cn-color-bg-2), var(--cn-color-bg-2));
	box-shadow:
		0 -3px 0 0 var(--cn-color-border) inset,
		0 1px 0 0 rgba(255, 255, 255, 0.7) inset,
		0 2.77px 2.21px 0 rgba(0, 0, 0, 0.12),
		0 3px 3px 0 rgba(0, 0, 0, 0.14);
}

.section-hero .scroll-more {
	background-color: var(--cn-color-bg-2);
}

.section-hero .scroll-more .icon {
	border-color: var(--cn-color-border);
}