/* Corpox template adaptation for CodeIgniter 3 IT company website */
:root {
	--site-primary: #5237f9;
	--site-secondary: #f604b9;
	--site-cyan: #36c6f0;
	--site-yellow: #e3f800;
	--site-dark: #121326;
	--site-heading: #15172f;
	--site-body: #5f6678;
	--site-border: #e8eaf4;
	--site-soft: #f7f8ff;
	--site-gradient: linear-gradient(
		135deg,
		#5237f9 0%,
		#6369ff 45%,
		#f604b9 100%
	);
}

html {
	scroll-behavior: smooth;
}
body.corpox-ci3-site {
	font-family: "Plus Jakarta Sans", Arial, sans-serif;
	color: var(--site-body);
	background: #fff;
	overflow-x: hidden;
}
a {
	text-decoration: none;
}
img {
	max-width: 100%;
}
.tmp-section-gapTop {
	padding-top: 90px;
}
.tmp-section-gapBottom {
	padding-bottom: 90px;
}
.compact-section {
	position: relative;
}
.soft-bg {
	background: linear-gradient(180deg, #fff 0%, #f7f8ff 100%);
	padding-bottom: 90px;
}

.top-strip {
	background: #0d1028;
	color: #dfe5ff;
	font-size: 13px;
}
.top-strip-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 10px 0;
}
.top-strip i {
	color: var(--site-yellow);
	margin-right: 7px;
}
.site-header {
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(18px);
	border-bottom: 1px solid rgba(226, 230, 245, 0.8);
	box-shadow: 0 12px 40px rgba(18, 19, 38, 0.06);
	z-index: 99;
}

.site-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--site-heading) !important;
	min-width: 260px;
}
.brand-icon {
	width: 44px;
	height: 44px;
	border-radius: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: var(--site-gradient);
	flex: 0 0 auto;
}
.brand-copy {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}
.brand-copy strong {
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.5px;
}
.brand-copy small {
	font-size: 11px;
	color: #737b91;
	max-width: 250px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.site-header .nav-link {
	color: #232a41;
	/* font-weight:700; */
	font-size: 14px;
	padding: 13px 11px !important;
	border-radius: 999px;
}
.site-header .nav-link.active,
.site-header .nav-link:hover {
	color: var(--site-primary);
	background: #f0efff;
}
.header-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-left: 16px;
}
.header-phone {
	align-items: center;
	gap: 8px;
	color: var(--site-heading);
	font-size: 13px;
	font-weight: 800;
}
.dropdown-menu {
	border: 0;
	border-radius: 18px;
	box-shadow: 0 20px 60px rgba(18, 19, 38, 0.13);
	padding: 12px;
}
.dropdown-item {
	border-radius: 12px;
	padding: 10px 14px;
	font-weight: 700;
	color: #252b42;
}
.dropdown-item:hover {
	background: #f0efff;
	color: var(--site-primary);
}

.tmp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-weight: 800;
	border-radius: 999px;
	line-height: 1;
	/* transition: 0.25s ease; */
	border: 1px solid transparent;
}
.tmp-btn.btn-small {
	padding: 13px 20px;
	font-size: 13px;
}
.tmp-btn.btn-large {
	padding: 17px 26px;
	font-size: 14px;
}
.tmp-btn.btn-primary {
	background: var(--site-gradient);
	color: #fff !important;
}
.tmp-btn.btn-primary:hover {
	/* transform: translateY(-2px); */
}
.tmp-btn.btn-border {
	border-color: #dfe3f3;
	background: #fff;
	color: #172035 !important;
}
.tmp-btn.btn-border:hover {
	border-color: var(--site-primary);
	color: var(--site-primary) !important;
	/* transform: translateY(-2px); */
}
.round {
	border-radius: 999px;
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--site-primary);
	background: #f0efff;
	padding: 8px 13px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.7px;
	margin-bottom: 18px;
}
.eyebrow.light {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.18);
}
.section-heading-center {
	text-align: center;
	max-width: 780px;
	margin: 0 auto 25px;
}
.section-heading-center h2,
.section-heading-between h2,
.section-heading-left h2,
.page-section-title {
	color: var(--site-heading);
	font-size: clamp(30px, 4vw, 48px);
	line-height: 1.08;
	font-weight: 900;
	letter-spacing: -1.5px;
	margin-bottom: 15px;
}
.section-heading-center p,
.section-heading-left p {
	font-size: 16px;
	color: var(--site-body);
}
.section-heading-between {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 24px;
}

.home-hero {
	position: relative;
	padding: 110px 0 70px;
	background:
		radial-gradient(
			circle at 15% 15%,
			rgba(82, 55, 249, 0.16),
			transparent 32%
		),
		radial-gradient(
			circle at 88% 18%,
			rgba(246, 4, 185, 0.15),
			transparent 32%
		),
		linear-gradient(180deg, #ffffff 0%, #f7f8ff 100%);
	overflow: hidden;
}
.home-hero h1 {
	color: var(--site-heading);
	font-size: clamp(42px, 6.5vw, 78px);
	line-height: 0.98;
	font-weight: 900;
	letter-spacing: -3px;
	margin-bottom: 24px;
}
.hero-text {
	max-width: 670px;
	font-size: 18px;
	line-height: 1.75;
	color: #60687a;
}
.hero-actions {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 32px;
}
.hero-bg-orb {
	position: absolute;
	width: 360px;
	height: 360px;
	border-radius: 50%;
	filter: blur(20px);
	opacity: 0.32;
	pointer-events: none;
}
.orb-one {
	background: #5237f9;
	left: -160px;
	top: 100px;
}
.orb-two {
	background: #f604b9;
	right: -140px;
	top: 60px;
}
.hero-mini-stats {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 34px;
}
.hero-mini-stats div {
	background: #fff;
	border: 1px solid var(--site-border);
	border-radius: 20px;
	padding: 15px 20px;
	min-width: 132px;
	box-shadow: 0 14px 35px rgba(18, 19, 38, 0.07);
}
.hero-mini-stats strong {
	display: block;
	color: var(--site-heading);
	font-size: 24px;
	font-weight: 900;
}
.hero-mini-stats span {
	font-size: 12px;
	color: #71798c;
	font-weight: 700;
}
.hero-dashboard-card {
	background: #10132d;
	border-radius: 32px;
	padding: 18px;
	color: #fff;
	box-shadow: 0 34px 90px rgba(18, 19, 38, 0.26);
	border: 1px solid rgba(255, 255, 255, 0.08);
	position: relative;
	overflow: hidden;
}
.hero-dashboard-card:before {
	content: "";
	position: absolute;
	inset: -80px -80px auto auto;
	width: 220px;
	height: 220px;
	background: #f604b9;
	opacity: 0.25;
	filter: blur(40px);
	border-radius: 50%;
}
.dashboard-topbar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 8px 18px;
	position: relative;
	z-index: 1;
}
.dashboard-topbar span {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #ff5f56;
}
.dashboard-topbar span:nth-child(2) {
	background: #ffbd2e;
}
.dashboard-topbar span:nth-child(3) {
	background: #27c93f;
}
.dashboard-topbar strong {
	margin-left: auto;
	font-size: 12px;
	color: #bfc7ff;
}
.dashboard-card-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 13px;
	position: relative;
	z-index: 1;
}
.dash-widget {
	border-radius: 22px;
	padding: 20px;
	min-height: 145px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.dash-widget i {
	font-size: 27px;
}
.dash-widget span {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.78);
}
.dash-widget strong {
	font-size: 20px;
	color: #fff;
}
.gradient-a {
	background: linear-gradient(135deg, #5237f9, #8680ff);
}
.gradient-b {
	background: linear-gradient(135deg, #f604b9, #e9967a);
}
.gradient-c {
	background: linear-gradient(135deg, #36c6f0, #5237f9);
}
.gradient-d {
	background: linear-gradient(135deg, #232d40, #6369ff);
}
.dashboard-progress,
.dashboard-list {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 22px;
	padding: 18px;
	margin-top: 14px;
	position: relative;
	z-index: 1;
}
.dashboard-progress > div:first-child {
	display: flex;
	justify-content: space-between;
	font-weight: 800;
	margin-bottom: 10px;
}
.dashboard-progress .progress {
	height: 8px;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 20px;
	overflow: hidden;
}
.dashboard-progress .progress-bar {
	background: linear-gradient(90deg, #e3f800, #36c6f0);
}
.dashboard-list p {
	margin: 8px 0;
	color: #e9ecff;
	font-size: 14px;
}
.dashboard-list i {
	color: #e3f800;
	margin-right: 8px;
}

.brand-card-wrap {
	background: #0d1028;
	color: #fff;
	border-radius: 24px;
	padding: 18px 24px;
	display: flex;
	align-items: center;
	gap: 22px;
	overflow: hidden;
}
.brand-card-wrap > span {
	color: #aeb6d9;
	font-size: 13px;
	font-weight: 800;
	white-space: nowrap;
}
.brand-marquee {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}
.brand-marquee strong {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.1);
	padding: 9px 14px;
	border-radius: 999px;
	font-size: 13px;
}
.about-image-stack {
	position: relative;
}
.about-image-stack .main-img {
	width: 100%;
}
.floating-rating-card {
	position: absolute;
	right: 20px;
	bottom: 20px;
	background: #fff;
	border-radius: 22px;
	padding: 16px 18px;
	box-shadow: 0 20px 50px rgba(18, 19, 38, 0.18);
	min-width: 220px;
}
.floating-rating-card i {
	color: #ffb800;
	margin-right: 6px;
}
.floating-rating-card strong {
	display: block;
	color: var(--site-heading);
	font-weight: 900;
}
.floating-rating-card span {
	font-size: 12px;
	color: #747c8f;
}
.feature-list-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}
.mini-feature {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	border: 1px solid var(--site-border);
	border-radius: 16px;
	padding: 13px 14px;
	color: var(--site-heading);
	font-weight: 800;
	box-shadow: 0 10px 24px rgba(18, 19, 38, 0.05);
}
.mini-feature i {
	color: var(--site-primary);
}

.service-tile {
	display: block;
	height: 100%;
	background: #fff;
	border: 1px solid var(--site-border);
	border-radius: 28px;
	padding: 28px;
	box-shadow: 0 16px 40px rgba(18, 19, 38, 0.07);
	position: relative;
	overflow: hidden;
	/* transition: 0.25s ease; */
	color: var(--site-body);
}
.service-tile:before {
	content: "";
	position: absolute;
	width: 170px;
	height: 170px;
	border-radius: 50%;
	right: -80px;
	top: -80px;
	opacity: 0.12;
	/* transition: 0.25s ease; */
	background: var(--site-primary);
}
.service-tile:hover {
	transform: translateY(-8px);
	box-shadow: 0 24px 70px rgba(18, 19, 38, 0.14);
	color: var(--site-body);
}
.service-tile:hover:before {
	transform: scale(1.25);
	opacity: 0.2;
}
.service-icon {
	width: 58px;
	height: 58px;
	border-radius: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: var(--site-gradient);
	font-size: 22px;
	margin-bottom: 22px;
}
.service-icon.large {
	width: 78px;
	height: 78px;
	border-radius: 24px;
	font-size: 31px;
}
.service-tile small {
	display: block;
	color: var(--site-primary);
	text-transform: uppercase;
	letter-spacing: 0.7px;
	font-size: 11px;
	font-weight: 900;
	margin-bottom: 10px;
}
.service-tile h3 {
	color: var(--site-heading);
	font-size: 22px;
	font-weight: 900;
	letter-spacing: -0.5px;
	margin-bottom: 12px;
}
.service-tile p {
	color: #687084;
	font-size: 14px;
	line-height: 1.65;
	min-height: 68px;
}
.read-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 900;
	color: var(--site-heading);
	margin-top: 10px;
}
.service-color-2 .service-icon,
.service-color-2:before {
	background: linear-gradient(135deg, #f604b9, #e9967a);
}
.service-color-3 .service-icon,
.service-color-3:before {
	background: linear-gradient(135deg, #36c6f0, #5237f9);
}
.service-color-4 .service-icon,
.service-color-4:before {
	background: linear-gradient(135deg, #00c48c, #36c6f0);
}
.service-color-5 .service-icon,
.service-color-5:before {
	background: linear-gradient(135deg, #ff8f3c, #f604b9);
}
.service-color-6 .service-icon,
.service-color-6:before {
	background: linear-gradient(135deg, #232d40, #6369ff);
}
.service-bullets {
	list-style: none;
	padding: 0;
	margin: 18px 0 0;
	display: grid;
	gap: 8px;
}
.service-bullets li {
	font-size: 13px;
	color: #545d72;
	font-weight: 700;
}
.service-bullets i {
	color: #20b486;
	margin-right: 8px;
}

.banner-spotlight {
	background:
		radial-gradient(
			circle at 15% 15%,
			rgba(227, 248, 0, 0.18),
			transparent 28%
		),
		linear-gradient(135deg, #121326 0%, #1c1e44 45%, #5237f9 100%);
	color: #fff;
	padding: 80px 0;
	margin-top: 90px;
}
.banner-spotlight h2 {
	color: #fff;
	font-size: clamp(30px, 4vw, 50px);
	line-height: 1.08;
	font-weight: 900;
	letter-spacing: -1.3px;
}
.banner-spotlight p {
	color: #d9defd;
	font-size: 16px;
	line-height: 1.75;
}
.banner-chip-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.banner-chip-wrap span {
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.17);
	color: #fff;
	padding: 9px 13px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 900;
}
.erp-map-card {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}
.erp-map-card div {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 20px;
	padding: 22px;
	color: #fff;
	/* font-weight: 900; */
	min-height: 122px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.erp-map-card i {
	font-size: 28px;
	color: var(--site-yellow);
}
.erp-map-card.light-card div {
	background: #fff;
	border-color: var(--site-border);
	color: var(--site-heading);
	box-shadow: 0 14px 35px rgba(18, 19, 38, 0.07);
}
.erp-map-card.light-card i {
	color: var(--site-primary);
}

.process-timeline {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 14px;
}
.process-step {
	background: #fff;
	border: 1px solid var(--site-border);
	border-radius: 24px;
	padding: 22px;
	box-shadow: 0 16px 40px rgba(18, 19, 38, 0.06);
	position: relative;
}
.step-number {
	display: inline-flex;
	color: var(--site-primary);
	background: #f0efff;
	border-radius: 999px;
	padding: 6px 10px;
	font-weight: 900;
	font-size: 12px;
	margin-bottom: 15px;
}
.process-step i {
	display: block;
	color: var(--site-primary);
	font-size: 27px;
	margin-bottom: 14px;
}
.process-step h3 {
	color: var(--site-heading);
	font-size: 18px;
	font-weight: 900;
}
.process-step p {
	font-size: 13px;
	color: #687084;
	margin: 0;
}
.detail-flow {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.stat-section {
	padding: 55px 0;
}
.stat-card {
	background: #fff;
	border: 1px solid var(--site-border);
	border-radius: 28px;
	padding: 26px;
	text-align: center;
	box-shadow: 0 18px 45px rgba(18, 19, 38, 0.07);
}
.stat-card strong {
	display: block;
	color: var(--site-heading);
	font-size: 42px;
	font-weight: 900;
	letter-spacing: -1px;
}
.stat-card span {
	color: #687084;
	font-weight: 800;
}
.project-card,
.blog-card,
.testimonial-card,
.info-card,
.tech-card,
.career-card,
.detail-card,
.sidebar-card,
.contact-form-card {
	background: #fff;
	border: 1px solid var(--site-border);
	border-radius: 28px;
	box-shadow: 0 16px 40px rgba(18, 19, 38, 0.07);
	overflow: hidden;
}
.project-card img,
.blog-card img {
	width: 100%;
	height: 260px;
	object-fit: cover;
}
.project-card-body,
.blog-card-body {
	padding: 24px;
}
.project-card-body span,
.blog-card-body span {
	display: inline-block;
	color: var(--site-primary);
	font-size: 12px;
	font-weight: 900;
	text-transform: uppercase;
	margin-bottom: 8px;
}
.project-card-body h3,
.blog-card-body h3,
.info-card h3,
.career-card h3,
.detail-card h2,
.detail-card h3 {
	color: var(--site-heading);
	font-weight: 900;
	letter-spacing: -0.5px;
}
.project-card-body p,
.blog-card-body p,
.info-card p,
.career-card p,
.detail-card p {
	color: #687084;
	line-height: 1.7;
}
.testimonial-stack {
	display: grid;
	gap: 16px;
}
.testimonial-card {
	padding: 26px;
}
.testimonial-card p {
	color: #394154;
	font-size: 16px;
	line-height: 1.8;
}
.testimonial-card strong {
	display: block;
	color: var(--site-heading);
	font-weight: 900;
}
.testimonial-card span {
	color: var(--site-primary);
	font-size: 13px;
	font-weight: 800;
}
.info-card {
	padding: 28px;
	height: 100%;
}
.info-card i {
	width: 56px;
	height: 56px;
	border-radius: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: var(--site-gradient);
	font-size: 22px;
	margin-bottom: 20px;
}
.tech-card {
	padding: 26px;
	text-align: center;
	height: 100%;
}
.tech-card i {
	font-size: 36px;
	color: var(--site-primary);
	margin-bottom: 16px;
}
.tech-card h3 {
	color: var(--site-heading);
	font-weight: 900;
	font-size: 18px;
	margin-bottom: 4px;
}
.tech-card span {
	color: #6a7286;
	font-weight: 700;
	font-size: 13px;
}
.career-card {
	padding: 28px;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 14px;
	justify-content: space-between;
}
.career-card > div:first-child > span {
	color: var(--site-primary);
	background: #f0efff;
	border-radius: 999px;
	padding: 7px 11px;
	font-size: 12px;
	font-weight: 900;
}
.career-meta {
	color: #687084;
	font-weight: 800;
}
.career-meta i {
	color: var(--site-primary);
	margin-right: 8px;
}
.detail-card {
	padding: 34px;
	overflow: visible;
}
.sidebar-card {
	padding: 26px;
	top: 110px;
}
.sidebar-card h3 {
	color: var(--site-heading);
	font-weight: 900;
}
.side-service-list {
	list-style: none;
	padding: 0;
	margin: 16px 0 0;
	display: grid;
	gap: 8px;
}
.side-service-list a {
	display: block;
	border: 1px solid var(--site-border);
	color: #384155;
	border-radius: 14px;
	padding: 12px 14px;
	font-weight: 800;
}
.side-service-list a.active,
.side-service-list a:hover {
	background: #f0efff;
	color: var(--site-primary);
	border-color: #d7d2ff;
}
.banner-service-box {
	background: #fff;
	border: 1px solid var(--site-border);
	border-radius: 28px;
	padding: 30px;
	height: 100%;
	box-shadow: 0 16px 40px rgba(18, 19, 38, 0.07);
}
.banner-service-box h3 {
	color: var(--site-heading);
	font-weight: 900;
}
.banner-service-box p {
	color: #687084;
	line-height: 1.7;
}

.inner-page-hero {
	padding: 85px 0;
	background:
		radial-gradient(
			circle at 12% 15%,
			rgba(82, 55, 249, 0.14),
			transparent 28%
		),
		radial-gradient(circle at 88% 5%, rgba(246, 4, 185, 0.14), transparent 30%),
		linear-gradient(180deg, #fff 0%, #f7f8ff 100%);
	border-bottom: 1px solid var(--site-border);
}
.inner-page-hero h1 {
	color: var(--site-heading);
	font-size: clamp(40px, 6vw, 70px);
	font-weight: 900;
	letter-spacing: -2px;
	line-height: 1;
}
.inner-page-hero p {
	max-width: 780px;
	font-size: 17px;
	line-height: 1.75;
	color: #687084;
}
.breadcrumb-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	border: 1px solid var(--site-border);
	border-radius: 999px;
	padding: 12px 17px;
	box-shadow: 0 12px 30px rgba(18, 19, 38, 0.07);
	font-weight: 800;
	font-size: 13px;
}
.breadcrumb-pill a {
	color: var(--site-primary);
}
.breadcrumb-pill span {
	color: #697285;
}

.contact-form-card {
	padding: 30px;
	overflow: visible;
}
.form-head h3 {
	color: var(--site-heading);
	font-weight: 900;
	font-size: 30px;
	letter-spacing: -0.8px;
}
.form-head p {
	color: #687084;
}
.form-label {
	color: var(--site-heading);
	font-weight: 800;
	font-size: 13px;
}
.form-control,
.form-select {
	min-height: 52px;
	border-radius: 16px;
	border: 1px solid #dfe3f1;
	padding: 12px 15px;
	color: #263047;
	font-weight: 600;
}
.form-control:focus,
.form-select:focus {
	border-color: var(--site-primary);
	box-shadow: 0 0 0 0.2rem rgba(82, 55, 249, 0.12);
}
textarea.form-control {
	min-height: 145px;
}
.hp-field {
	position: absolute;
	left: -9999px;
	height: 0;
	opacity: 0;
}
.contact-info-panel {
	background: linear-gradient(135deg, #121326, #5237f9);
	color: #fff;
	border-radius: 32px;
	padding: 34px;
	height: 100%;
	box-shadow: 0 28px 70px rgba(18, 19, 38, 0.2);
}
.contact-info-panel h2 {
	color: #fff;
	font-size: 42px;
	font-weight: 900;
	letter-spacing: -1.3px;
}
.contact-info-panel p {
	color: #dfe4ff;
}
.contact-info-list {
	list-style: none;
	padding: 0;
	margin: 30px 0 0;
	display: grid;
	gap: 14px;
}
.contact-info-list li {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 18px;
	padding: 16px;
	display: grid;
	grid-template-columns: 38px 1fr;
	column-gap: 12px;
}
.contact-info-list i {
	grid-row: 1/3;
	color: var(--site-yellow);
	font-size: 21px;
}
.contact-info-list span {
	font-size: 12px;
	color: #c7cef8;
	font-weight: 800;
	text-transform: uppercase;
}
.contact-info-list strong {
	color: #fff;
	font-weight: 900;
	word-break: break-word;
}

.faq-accordion .accordion-item {
	border: 1px solid var(--site-border);
	border-radius: 20px !important;
	margin-bottom: 14px;
	overflow: hidden;
	box-shadow: 0 12px 30px rgba(18, 19, 38, 0.05);
}
.faq-accordion .accordion-button {
	color: var(--site-heading);
	font-weight: 900;
	font-size: 16px;
	padding: 20px 24px;
}
.faq-accordion .accordion-button:not(.collapsed) {
	background: #f0efff;
	color: var(--site-primary);
	box-shadow: none;
}
.faq-accordion .accordion-button:focus {
	box-shadow: none;
}
.faq-accordion .accordion-body {
	color: #687084;
	line-height: 1.75;
	padding: 22px 24px;
}

.site-footer {
	background: #090b20;
	color: #aeb6d9;
	padding: 80px 0 0;
	margin-top: 90px;
}
.footer-cta-card {
	background:
		radial-gradient(circle at 10% 20%, rgba(227, 248, 0, 0.2), transparent 28%),
		var(--site-gradient);
	color: #fff;
	border-radius: 34px;
	padding: 42px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 65px;
	box-shadow: 0 32px 80px rgba(82, 55, 249, 0.28);
}
.footer-cta-card h2 {
	color: #fff;
	font-size: clamp(30px, 4vw, 48px);
	font-weight: 900;
	letter-spacing: -1.4px;
	margin-bottom: 10px;
}
.footer-cta-card p {
	color: #eef1ff;
	margin: 0;
}
.footer-main-wrap {
	padding-bottom: 44px;
}
.footer-brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: #fff !important;
	font-weight: 900;
	font-size: 22px;
}
.footer-text {
	color: #aeb6d9;
	line-height: 1.75;
}
.footer-socials {
	display: flex;
	gap: 10px;
	margin-top: 20px;
}
.footer-socials a {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}
.footer-title {
	color: #fff;
	font-size: 17px;
	font-weight: 900;
	margin-bottom: 20px;
}
.footer-links,
.footer-contact {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	/* gap: 10px; */
}
.footer-links a {
	color: #aeb6d9;
	font-weight: 700;
	font-size: 14px;
}
.footer-links a:hover {
	color: #fff;
}
.two-col-list {
	grid-template-columns: 1fr;
}
.footer-contact li {
	display: flex;
	gap: 11px;
	color: #aeb6d9;
	font-size: 14px;
	line-height: 1.6;
}
.footer-contact i {
	color: var(--site-yellow);
	margin-top: 5px;
}
.footer-bottom-line {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding: 22px 0;
	display: flex;
	justify-content: space-between;
	gap: 15px;
	flex-wrap: wrap;
	color: #8992bd;
	font-size: 13px;
}
.back-to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--site-gradient);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 15px 34px rgba(82, 55, 249, 0.35);
	z-index: 99;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: 0.25s ease;
}
.back-to-top.show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

@media (max-width: 1199px) {
	.site-brand {
		min-width: auto;
	}
	.header-actions {
		margin: 18px 0 0;
	}
	.extra-menu .dropdown-menu {
		box-shadow: none;
		background: #f7f8ff;
	}
	.process-timeline {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 991px) {
	.home-hero {
		padding: 80px 0 50px;
	}
	.section-heading-between,
	.footer-cta-card {
		flex-direction: column;
		align-items: flex-start;
	}
	.erp-map-card {
		grid-template-columns: 1fr;
	}
	.brand-card-wrap {
		flex-direction: column;
		align-items: flex-start;
	}
	.floating-rating-card {
		position: static;
		margin-top: 15px;
	}
}
@media (max-width: 767px) {
	.tmp-section-gapTop {
		padding-top: 60px;
	}
	.banner-spotlight,
	.site-footer {
		margin-top: 60px;
	}
	.home-hero h1,
	.inner-page-hero h1 {
		letter-spacing: -1.5px;
	}
	.hero-actions .tmp-btn {
		width: 100%;
	}
	.feature-list-grid,
	.dashboard-card-grid,
	.process-timeline,
	.detail-flow {
		grid-template-columns: 1fr;
	}
	.footer-cta-card,
	.contact-info-panel,
	.contact-form-card,
	.detail-card {
		padding: 24px;
		border-radius: 24px;
	}
	.project-card img,
	.blog-card img {
		height: 210px;
	}
	.brand-copy small {
		max-width: 180px;
	}
}

/* Compact production refinements */
.corpox-ci3-site {
	font-size: 15px;
	line-height: 1.6;
}
.corpox-ci3-site .title,
.corpox-ci3-site .tmp-title-split,
.corpox-ci3-site h1,
.corpox-ci3-site h2,
.corpox-ci3-site h3,
.corpox-ci3-site h4,
.corpox-ci3-site h5,
.corpox-ci3-site h6 {
	color: var(--site-heading);
}
.corpox-ci3-site p,
.corpox-ci3-site li,
.corpox-ci3-site .accordion-body {
	color: #515b70;
}
.tmp-section-gapTop {
	padding-top: 56px;
}
.tmp-section-gapBottom {
	padding-bottom: 56px;
}
.compact-gap {
	padding-top: 56px;
	padding-bottom: 56px;
}
.soft-bg-lite {
	background: linear-gradient(180deg, #fbfcff 0%, #f4f6ff 100%);
}
.section-heading-center {
	margin-bottom: 18px;
}
.section-heading-center h2,
.section-heading-between h2,
.section-heading-left h2,
.page-section-title,
.tmp-section-title-border h2 {
	color: var(--site-heading) !important;
	font-size: clamp(26px, 3.2vw, 38px);
	line-height: 1.12;
	letter-spacing: -1px;
	margin-bottom: 10px;
}
.section-heading-center p,
.section-heading-left p,
.tmp-section-title-border + p {
	font-size: 15px;
	color: #596376 !important;
}
.eyebrow {
	padding: 6px 11px;
	margin-bottom: 12px;
	font-size: 11px;
	color: var(--site-primary) !important;
}
.eyebrow.light {
	color: #ffffff !important;
}
.home-hero {
	padding: 66px 0 46px;
}
.home-hero h1 {
	color: var(--site-heading) !important;
	font-size: clamp(34px, 5vw, 56px);
	line-height: 1.02;
	letter-spacing: -2px;
	margin-bottom: 16px;
}
.hero-text {
	font-size: 16px;
	line-height: 1.65;
	max-width: 620px;
}
.hero-actions {
	margin-top: 22px;
	gap: 10px;
}
.hero-mini-stats {
	margin-top: 22px;
	gap: 10px;
}
.hero-mini-stats div {
	padding: 12px 15px;
	min-width: 118px;
	border-radius: 16px;
}
.hero-mini-stats strong {
	font-size: 20px;
}
.tmp-btn.btn-large {
	padding: 14px 20px;
	font-size: 13px;
}
.tmp-btn.btn-small {
	padding: 11px 16px;
}
.hero-dashboard-card {
	border-radius: 24px;
	padding: 14px;
}
.dashboard-card-grid {
	gap: 10px;
}
.dash-widget {
	border-radius: 18px;
	min-height: 108px;
	padding: 16px;
}
.dash-widget i {
	font-size: 22px;
}
.dash-widget strong {
	font-size: 17px;
}
.dashboard-progress {
	display: none;
}
.dashboard-list {
	border-radius: 18px;
	padding: 14px;
	margin-top: 10px;
}
.dashboard-list p {
	font-size: 13px;
	margin: 6px 0;
	color: #eef1ff !important;
}
.brand-strip {
	padding-top: 26px;
}
.brand-card-wrap {
	border-radius: 18px;
	padding: 14px 18px;
}
.brand-marquee {
	gap: 8px;
}
.brand-marquee strong {
	padding: 7px 11px;
	font-size: 12px;
	color: #fff;
}
.about-image-stack .main-img {
	border-radius: 22px;
}
.floating-rating-card {
	border-radius: 16px;
	padding: 12px 14px;
	min-width: 190px;
}
.feature-list-grid {
	gap: 9px;
}
.mini-feature {
	border-radius: 13px;
	padding: 10px 12px;
	font-size: 13px;
}
.service-tile,
.project-card,
.blog-card,
.testimonial-card,
.info-card,
.tech-card,
.career-card,
.detail-card,
.sidebar-card,
.contact-form-card,
.banner-service-box,
.stat-card {
	border-radius: 18px;
	box-shadow: 0 10px 28px rgba(18, 19, 38, 0.06);
}
.service-tile {
	padding: 20px;
}
.compact-card.service-tile {
	min-height: 250px;
}
.service-icon {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	font-size: 18px;
	margin-bottom: 14px;
}
.service-icon.large {
	width: 62px;
	height: 62px;
	border-radius: 18px;
	font-size: 25px;
}
.service-tile small {
	margin-bottom: 7px;
	font-size: 10px;
	color: var(--site-primary) !important;
}
.service-tile h3 {
	font-size: 18px;
	line-height: 1.22;
	margin-bottom: 8px;
	color: var(--site-heading) !important;
}
.service-tile p {
	min-height: auto;
	font-size: 13px;
	line-height: 1.55;
	color: #596376 !important;
}
.read-more {
	font-size: 13px;
}
.banner-spotlight {
	padding: 48px 0;
	margin-top: 44px;
}
.banner-spotlight.slim-cta {
	margin-top: 20px;
	padding: 38px 0;
}
.banner-spotlight h2,
.banner-spotlight .title,
.banner-spotlight .tmp-title-split {
	color: #ffffff !important;
	font-size: clamp(26px, 3.4vw, 40px);
}
.banner-spotlight p {
	color: #edf1ff !important;
	font-size: 15px;
	line-height: 1.6;
}
.banner-chip-wrap {
	gap: 8px;
}
.banner-chip-wrap span {
	padding: 7px 10px;
	font-size: 11px;
}
.banner-chip-wrap.dark-text span {
	background: #f2f4ff;
	border-color: #dfe4f4;
	color: #273041 !important;
}
.erp-map-card {
	gap: 10px;
}
.erp-map-card div {
	border-radius: 16px;
	min-height: 98px;
	padding: 16px;
	color: #ffffff !important;
}
.erp-map-card div p {
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 1.55;
	color: #596376 !important;
	font-weight: 600;
}
.erp-map-card.light-card div {
	color: var(--site-heading) !important;
}
.erp-map-card.light-card span {
	color: var(--site-heading) !important;
}
.erp-map-card i {
	font-size: 23px;
}
.process-timeline {
	gap: 10px;
}
.process-step {
	border-radius: 16px;
	padding: 16px;
}
.step-number {
	margin-bottom: 10px;
	padding: 5px 9px;
	font-size: 11px;
}
.process-step i {
	font-size: 22px;
	margin-bottom: 9px;
}
.process-step h3 {
	font-size: 16px;
	margin-bottom: 6px;
	color: var(--site-heading) !important;
}
.process-step p {
	font-size: 12.5px;
	line-height: 1.55;
	color: #596376 !important;
}
.stat-section {
	padding: 40px 0;
}
.stat-card {
	padding: 18px;
}
.stat-card strong {
	font-size: 32px;
}
.stat-card span {
	font-size: 13px;
	color: #596376 !important;
}
.project-card img,
.blog-card img {
	height: 170px;
}
.project-card-body,
.blog-card-body {
	padding: 14px;
}
.project-card-body h3,
.blog-card-body h3 {
	font-size: 18px;
	color: var(--site-heading) !important;
}
.project-card-body p,
.blog-card-body p {
	font-size: 13px;
	line-height: 1.55;
	color: #596376 !important;
}
.testimonial-stack {
	gap: 10px;
}
.testimonial-card {
	padding: 18px;
}
.testimonial-card p {
	font-size: 14px;
	line-height: 1.65;
	color: #394154 !important;
}
.info-card {
	padding: 20px;
}
.info-card i {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	font-size: 19px;
	margin-bottom: 13px;
}
.info-card h3 {
	font-size: 18px;
	color: var(--site-heading) !important;
}
.info-card p {
	font-size: 13px;
	color: #596376 !important;
}
.tech-card {
	padding: 20px;
}
.tech-card i {
	font-size: 30px;
	margin-bottom: 10px;
}
.tech-card h3 {
	font-size: 16px;
	color: var(--site-heading) !important;
}
.career-card {
	padding: 20px;
	gap: 10px;
}
.career-card h3 {
	font-size: 18px;
	color: var(--site-heading) !important;
}
.career-card p {
	color: #596376 !important;
}
.detail-card {
	padding: 24px;
}
.detail-card h2 {
	font-size: 28px;
	color: var(--site-heading) !important;
}
.detail-card h3 {
	color: var(--site-heading) !important;
}
.detail-card p {
	color: #596376 !important;
}
.sidebar-card {
	padding: 20px;
	top: 96px;
}
.sidebar-card h3 {
	color: var(--site-heading) !important;
}
.banner-service-box {
	padding: 20px;
}
.banner-service-box h3 {
	font-size: 18px;
	color: var(--site-heading) !important;
}
.banner-service-box p {
	font-size: 13px;
	color: #596376 !important;
}
.two-col-bullets {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 9px 18px;
}
.inner-page-hero {
	padding: 48px 0;
}
.inner-page-hero h1 {
	font-size: clamp(32px, 5vw, 52px);
	color: var(--site-heading) !important;
}
.inner-page-hero p {
	font-size: 15px;
	line-height: 1.65;
	color: #596376 !important;
}
.breadcrumb-pill {
	padding: 9px 13px;
	font-size: 12px;
}
.contact-form-card {
	padding: 24px;
}
.form-head h3 {
	font-size: 24px;
	color: var(--site-heading) !important;
}
.form-head p {
	color: #596376 !important;
}
.form-control,
.form-select {
	min-height: 46px;
	border-radius: 12px;
	padding: 10px 13px;
}
textarea.form-control {
	min-height: 118px;
}
.contact-info-panel {
	border-radius: 22px;
	padding: 26px;
}
.contact-info-panel h2 {
	color: #fff !important;
	font-size: 32px;
}
.contact-info-panel p {
	color: #eaf0ff !important;
}
.contact-info-list {
	margin-top: 20px;
	gap: 10px;
}
.contact-info-list li {
	border-radius: 14px;
	padding: 13px;
}
.contact-info-list strong {
	color: #fff !important;
}
.faq-accordion .accordion-button {
	padding: 16px 18px;
	font-size: 15px;
	color: var(--site-heading) !important;
}
.faq-accordion .accordion-body {
	padding: 16px 18px;
	color: #596376 !important;
}
.site-footer {
	padding: 46px 0 0;
	margin-top: 44px;
}
.footer-cta-card {
	border-radius: 22px;
	padding: 28px;
	margin-bottom: 38px;
}
.footer-cta-card h2 {
	color: #fff !important;
	font-size: clamp(26px, 3.2vw, 38px);
}
.footer-cta-card p {
	color: #eef1ff !important;
}
.footer-main-wrap {
	padding-bottom: 30px;
}
.footer-title {
	margin-bottom: 13px;
}

.footer-text,
.footer-links a,
.footer-contact li {
	color: #b8c0e3 !important;
}
.footer-bottom-line {
	padding: 16px 0;
}

.brand-icon {
	width: 40px;
	height: 40px;
	border-radius: 12px;
}
.brand-copy strong {
	font-size: 17px;
}
.site-header .nav-link {
	font-size: 13px;
	padding: 10px 9px !important;
}
.top-strip-inner {
	padding: 7px 0;
}
.back-to-top {
	width: 40px;
	height: 40px;
	right: 18px;
	bottom: 18px;
}
@media (max-width: 1199px) {
	.header-actions {
		margin: 10px 0 0;
	}
	.site-header .nav-link {
		border-radius: 12px;
	}
}
@media (max-width: 991px) {
	.home-hero {
		padding: 50px 0 40px;
	}
	.brand-strip {
		padding-top: 18px;
	}
	.compact-gap {
		padding-top: 44px;
		padding-bottom: 44px;
	}
}
@media (max-width: 767px) {
	.tmp-section-gapTop {
		padding-top: 44px;
	}
	.compact-gap {
		padding-top: 38px;
		padding-bottom: 38px;
	}
	.banner-spotlight,
	.site-footer {
		margin-top: 34px;
	}
	.home-hero h1 {
		font-size: 34px;
		letter-spacing: -1.2px;
	}
	.inner-page-hero {
		padding: 38px 0;
	}
	.inner-page-hero h1 {
		font-size: 34px;
		letter-spacing: -1.2px;
	}
	.project-card img,
	.blog-card img {
		height: 155px;
	}
	.two-col-bullets {
		grid-template-columns: 1fr;
	}
	.brand-card-wrap {
		gap: 12px;
	}
	.footer-cta-card,
	.contact-info-panel,
	.contact-form-card,
	.detail-card {
		padding: 20px;
		border-radius: 18px;
	}
}

/* Corpox white-03-agency color alignment
   Uses the same light-mode palette from white-03-agency.html. */
:root {
	--site-primary: var(--color-primary, #5237f9);
	--site-primary-alt: var(--color-primary-alt, #8680ff);
	--site-secondary: var(--color-secondary, #6369ff);
	--site-secondary-alt: #3929c4;
	--site-tertiary: var(--color-tertiary, #f604b9);
	--site-pink: var(--color-pink, #e07bc7);
	--site-cyan: var(--color-light-green, #36c6f0);
	--site-coral: var(--color-coral, #e9967a);
	--site-yellow: var(--color-yellow, #e3f800);
	--site-success: var(--color-success, #3eb75e);
	--site-dark: var(--color-bg-alt, #121326);
	--site-heading: #1b1b1c;
	--site-body: #363636;
	--site-muted: #74787c;
	--site-card: #ffffff;
	--site-soft: var(--color-extra2, #f9f9ff);
	--site-border: #9d9dff29;
	--site-gradient: linear-gradient(
		90deg,
		rgb(82, 55, 249) 0%,
		rgb(57, 41, 196) 50%,
		rgb(15, 7, 135) 100%
	);
	--site-gradient-bright: linear-gradient(
		135deg,
		var(--site-primary) 0%,
		var(--site-secondary) 55%,
		var(--site-tertiary) 100%
	);
	--site-shadow: 0px 6px 34px rgb(231 231 231 / 41%);
}

body.active-light-mode.corpox-ci3-site {
	background: #fafafa;
	color: var(--site-body);
}

.corpox-ci3-site p,
.corpox-ci3-site li,
.corpox-ci3-site .accordion-body,
.hero-text,
.section-heading-center p,
.section-heading-left p,
.project-card-body p,
.blog-card-body p,
.info-card p,
.career-card p,
.detail-card p,
.banner-service-box p,
.process-step p,
.inner-page-hero p,
.form-head p {
	color: var(--site-muted) !important;
}

.corpox-ci3-site h1,
.corpox-ci3-site h2,
.corpox-ci3-site h3,
.corpox-ci3-site h4,
.corpox-ci3-site h5,
.corpox-ci3-site h6,
.corpox-ci3-site .title,
.corpox-ci3-site .tmp-title-split,
.section-heading-center h2,
.section-heading-between h2,
.section-heading-left h2,
.page-section-title,
.project-card-body h3,
.blog-card-body h3,
.info-card h3,
.career-card h3,
.detail-card h2,
.detail-card h3,
.banner-service-box h3,
.process-step h3,
.form-head h3,
.faq-accordion .accordion-button {
	color: var(--site-heading) !important;
}

.top-strip {
	background: var(--site-gradient);
	color: #ffffff;
}
.top-strip-inner span,
.top-strip-inner i {
	color: #ffffff !important;
}
.site-header {
	background: #ffffff;
	border-bottom: 1px solid var(--site-border);
	box-shadow: var(--site-shadow);
}
.site-header .nav-link {
	color: #1b1b1c;
}
.site-header .nav-link.active,
.site-header .nav-link:hover,
.dropdown-item:hover {
	color: var(--site-primary) !important;
	background: var(--color-primary-lighter, #eeeeff);
}
.dropdown-menu,
.dropdown-item,
.contact-form-card,
.project-card,
.blog-card,
.testimonial-card,
.info-card,
.tech-card,
.career-card,
.detail-card,
.sidebar-card,
.banner-service-box,
.stat-card,
.service-tile,
.process-step,
.mini-feature,
.hero-mini-stats div,
.floating-rating-card {
	background: #ffffff;
	border-color: var(--site-border);
}

.brand-icon,
.service-icon,
.info-card i,
.back-to-top,
.tmp-btn.btn-primary {
	background: var(--site-gradient) !important;
	color: #ffffff !important;
}
.tmp-btn.btn-primary {
	border-color: transparent !important;
	/* box-shadow: 0 14px 32px rgba(82, 55, 249, 0.25); */
}
.tmp-btn.btn-border {
	background: transparent;
	border-color: rgba(82, 55, 249, 0.22);
	color: var(--site-heading) !important;
}
.tmp-btn.btn-border:hover {
	background: var(--color-primary-lighter, #eeeeff);
	border-color: var(--site-primary);
	color: var(--site-primary) !important;
}
.eyebrow,
.step-number,
.career-card > div:first-child > span,
.project-card-body span,
.blog-card-body span,
.testimonial-card span,
.service-tile small,
.breadcrumb-pill a,
.tech-card i,
.mini-feature i,
.career-meta i,
.side-service-list a.active,
.side-service-list a:hover {
	color: var(--site-primary) !important;
}
.eyebrow,
.step-number,
.career-card > div:first-child > span,
.side-service-list a.active,
.side-service-list a:hover,
.faq-accordion .accordion-button:not(.collapsed) {
	background: var(--color-primary-lighter, #eeeeff) !important;
}

.home-hero {
	background-image:
		linear-gradient(
			90deg,
			rgba(18, 19, 38, 0.88) 0%,
			rgba(18, 19, 38, 0.74) 52%,
			rgba(82, 55, 249, 0.35) 100%
		),
		url("../corpox/images/bg/bg-image-25.jpg");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	color: #ffffff;
}
.home-hero h1,
.home-hero .display-one,
.home-hero .title,
.home-hero .hero-mini-stats strong {
	color: #ffffff !important;
}
.home-hero .hero-text,
.home-hero .hero-mini-stats span {
	color: rgba(255, 255, 255, 0.78) !important;
}
.home-hero .eyebrow,
.eyebrow.light {
	background: rgba(255, 255, 255, 0.12) !important;
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: #ffffff !important;
}
.home-hero .tmp-btn.btn-border {
	border-color: rgba(255, 255, 255, 0.55);
	color: #ffffff !important;
}
.home-hero .tmp-btn.btn-border:hover {
	background: #ffffff;
	border-color: #ffffff;
	color: var(--site-primary) !important;
}
.home-hero .hero-mini-stats div {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.14);
	box-shadow: none;
}
.hero-bg-orb.orb-one {
	background: var(--site-primary);
}
.hero-bg-orb.orb-two {
	background: var(--site-tertiary);
}
.hero-dashboard-card {
	background: rgba(27, 27, 28, 0.82);
	border-color: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(18px);
}
.gradient-a,
.service-color-1 .service-icon,
.service-color-1:before {
	background: linear-gradient(
		135deg,
		var(--site-primary),
		var(--site-primary-alt)
	) !important;
}
.gradient-b,
.service-color-2 .service-icon,
.service-color-2:before {
	background: linear-gradient(
		135deg,
		var(--site-tertiary),
		var(--site-pink)
	) !important;
}
.gradient-c,
.service-color-3 .service-icon,
.service-color-3:before {
	background: linear-gradient(
		135deg,
		var(--site-cyan),
		var(--site-primary)
	) !important;
}
.gradient-d,
.service-color-6 .service-icon,
.service-color-6:before {
	background: linear-gradient(
		135deg,
		var(--site-dark),
		var(--site-secondary)
	) !important;
}
.service-color-4 .service-icon,
.service-color-4:before {
	background: linear-gradient(
		135deg,
		var(--site-success),
		var(--site-cyan)
	) !important;
}
.service-color-5 .service-icon,
.service-color-5:before {
	background: linear-gradient(
		135deg,
		var(--site-coral),
		var(--site-tertiary)
	) !important;
}
.dashboard-progress .progress-bar {
	background: linear-gradient(90deg, var(--site-yellow), var(--site-cyan));
}
.dashboard-list i,
.erp-map-card i,
.footer-contact i,
.contact-info-list i {
	color: var(--site-yellow) !important;
}

.soft-bg,
.soft-bg-lite,
.inner-page-hero {
	background: #f9f9ff !important;
}
.inner-page-hero {
	border-bottom-color: var(--site-border);
}
.brand-card-wrap,
.site-footer {
	background: var(--site-dark) !important;
}
.banner-spotlight,
.footer-cta-card,
.contact-info-panel {
	background: var(--site-gradient) !important;
}
.banner-spotlight h2,
.banner-spotlight .title,
.banner-spotlight .tmp-title-split,
.banner-spotlight p,
.footer-cta-card h2,
.footer-cta-card p,
.contact-info-panel h2,
.contact-info-panel p,
.contact-info-list strong,
.contact-info-list span {
	color: #ffffff !important;
}
.banner-chip-wrap span,
.brand-marquee strong,
.contact-info-list li {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.16);
	color: #ffffff !important;
}
.banner-chip-wrap.dark-text span {
	background: #ffffff !important;
	border-color: var(--site-border) !important;
	color: #273041 !important;
}
.footer-text,
.footer-links a,
.footer-contact li,
.footer-bottom-line,
.footer-bottom-line p {
	color: rgba(226, 230, 255, 0.72) !important;
}
.footer-title,
.footer-brand,
.footer-brand strong {
	color: #ffffff !important;
}
.footer-socials a {
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
}
.side-service-list a {
	color: #363636;
	border-color: var(--site-border);
}
.form-control,
.form-select {
	background: #ffffff;
	border-color: var(--site-border);
	color: #1b1b1c;
}
.form-control:focus,
.form-select:focus {
	border-color: var(--site-primary);
	box-shadow: 0 0 0 0.2rem rgba(82, 55, 249, 0.12);
}
.service-bullets li i,
.two-col-bullets li i {
	color: var(--site-primary) !important;
}

/* Final Corpox white-03 agency color correction
   Keep the design close to the original white-03-agency.html: clean white UI,
   dark hero/footer, black text, and only Corpox purple accents. */
:root {
	--site-primary: #5237f9;
	--site-primary-alt: #8680ff;
	--site-secondary: #6369ff;
	--site-dark: #121326;
	--site-dark-alt: #171930;
	--site-heading: #1b1b1c;
	--site-body: #363636;
	--site-muted: #74787c;
	--site-card: #ffffff;
	--site-soft: #f9f9ff;
	--site-border: #9d9dff29;
	--site-gradient: linear-gradient(
		90deg,
		#5237f9 0%,
		#3929c4 50%,
		#0f0787 100%
	);
	--site-shadow: 0px 6px 34px rgb(231 231 231 / 41%);
}

body.active-light-mode.corpox-ci3-site {
	background: #fafafa !important;
	color: var(--site-body) !important;
}

/* Text readability on white sections */
.corpox-ci3-site h1,
.corpox-ci3-site h2,
.corpox-ci3-site h3,
.corpox-ci3-site h4,
.corpox-ci3-site h5,
.corpox-ci3-site h6,
.corpox-ci3-site .title,
.corpox-ci3-site .tmp-title-split,
.section-heading-center h2,
.section-heading-between h2,
.section-heading-left h2,
.page-section-title,
.project-card-body h3,
.blog-card-body h3,
.info-card h3,
.career-card h3,
.detail-card h2,
.detail-card h3,
.banner-service-box h3,
.process-step h3,
.form-head h3,
.faq-accordion .accordion-button,
.service-tile h3,
.tech-card h3,
.sidebar-card h3 {
	color: var(--site-heading) !important;
}

.corpox-ci3-site p,
.corpox-ci3-site li,
.corpox-ci3-site .accordion-body,
.hero-text,
.section-heading-center p,
.section-heading-left p,
.project-card-body p,
.blog-card-body p,
.info-card p,
.career-card p,
.detail-card p,
.banner-service-box p,
.process-step p,
.inner-page-hero p,
.form-head p,
.service-tile p {
	color: var(--site-muted) !important;
}

/* Header and navigation: neutral white like template light mode */
.top-strip {
	background: var(--site-dark) !important;
	color: rgba(226, 230, 255, 0.85) !important;
}
.top-strip-inner span,
.top-strip-inner i {
	color: rgba(226, 230, 255, 0.85) !important;
}
.site-header {
	background: rgba(255, 255, 255, 0.92) !important;
	border-bottom: 1px solid rgba(157, 157, 255, 0.16) !important;
	box-shadow: var(--site-shadow) !important;
}
.site-header .nav-link,
.dropdown-item {
	color: var(--site-body) !important;
}
.site-header .nav-link.active,
.site-header .nav-link:hover,
.dropdown-item:hover,
.dropdown-item.active {
	color: var(--site-primary) !important;
	background: #eeeeff !important;
}

/* Buttons: original Corpox purple gradient, not multi-color */
.tmp-btn.btn-primary,
.brand-icon,
.back-to-top,
.service-icon,
.info-card i {
	background: var(--site-gradient) !important;
	color: #ffffff !important;
	border-color: transparent !important;
}
.tmp-btn.btn-primary:hover {
	/* box-shadow: 0 15px 34px 0 rgba(82, 55, 249, 0.3) !important; */
}
.tmp-btn.btn-border {
	background: transparent !important;
	border-color: rgba(82, 55, 249, 0.24) !important;
	color: var(--site-heading) !important;
}
.tmp-btn.btn-border:hover {
	background: #eeeeff !important;
	border-color: var(--site-primary) !important;
	color: var(--site-primary) !important;
}

/* Hero: same dark image direction as white-03-agency.html */
.home-hero {
	background-image:
		linear-gradient(
			90deg,
			rgba(0, 0, 0, 0.64) 0%,
			rgba(18, 19, 38, 0.7) 45%,
			rgba(18, 19, 38, 0.48) 100%
		),
		url("../corpox/images/bg/bg-image-25.jpg") !important;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
}
.home-hero:before,
.home-hero:after,
.hero-bg-orb {
	display: none !important;
}
.home-hero h1,
.home-hero .display-one,
.home-hero .title,
.home-hero .hero-mini-stats strong {
	color: #ffffff !important;
}
.home-hero .hero-text,
.home-hero .hero-mini-stats span {
	color: rgba(255, 255, 255, 0.78) !important;
}
.home-hero .eyebrow,
.eyebrow.light {
	background: rgba(255, 255, 255, 0.12) !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	color: #ffffff !important;
}
.home-hero .tmp-btn.btn-border {
	border-color: rgba(255, 255, 255, 0.62) !important;
	color: #ffffff !important;
}
.home-hero .tmp-btn.btn-border:hover {
	background: #ffffff !important;
	border-color: #ffffff !important;
	color: var(--site-primary) !important;
}
.home-hero .hero-mini-stats div {
	background: rgba(255, 255, 255, 0.08) !important;
	border-color: rgba(255, 255, 255, 0.14) !important;
	box-shadow: none !important;
}

/* Remove extra colorful dashboard/service card treatment */
.hero-dashboard-card {
	background: rgba(18, 19, 38, 0.88) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	/* box-shadow: 0 34px 90px rgba(0, 0, 0, 0.26) !important; */
}
.hero-dashboard-card:before {
	display: none !important;
}
.gradient-a,
.gradient-b,
.gradient-c,
.gradient-d,
.service-color-1 .service-icon,
.service-color-2 .service-icon,
.service-color-3 .service-icon,
.service-color-4 .service-icon,
.service-color-5 .service-icon,
.service-color-6 .service-icon,
.service-color-1:before,
.service-color-2:before,
.service-color-3:before,
.service-color-4:before,
.service-color-5:before,
.service-color-6:before {
	background: var(--site-gradient) !important;
}
.dashboard-list i,
.erp-map-card i,
.footer-contact i,
.contact-info-list i {
	color: #ffffff !important;
}
.dash-widget span,
.dash-widget strong,
.dash-widget i,
.dashboard-list p {
	color: #ffffff !important;
}

/* Cards/sections: white and very light backgrounds only */
.soft-bg,
.soft-bg-lite,
.inner-page-hero {
	background: var(--site-soft) !important;
}
.service-tile,
.project-card,
.blog-card,
.testimonial-card,
.info-card,
.tech-card,
.career-card,
.detail-card,
.sidebar-card,
.contact-form-card,
.banner-service-box,
.stat-card,
.process-step,
.mini-feature,
.floating-rating-card,
.dropdown-menu,
.hero-mini-stats div {
	background: #ffffff !important;
	border-color: var(--site-border) !important;
	box-shadow: var(--site-shadow) !important;
}
.service-tile:before {
	opacity: 0.05 !important;
	background: var(--site-primary) !important;
}
.eyebrow,
.step-number,
.career-card > div:first-child > span,
.side-service-list a.active,
.side-service-list a:hover,
.faq-accordion .accordion-button:not(.collapsed) {
	background: #eeeeff !important;
	border-color: rgba(82, 55, 249, 0.14) !important;
	color: var(--site-primary) !important;
}
.project-card-body span,
.blog-card-body span,
.testimonial-card span,
.service-tile small,
.breadcrumb-pill a,
.tech-card i,
.mini-feature i,
.career-meta i,
.service-bullets li i,
.two-col-bullets li i,
.read-more {
	color: var(--site-primary) !important;
}

/* Dark blocks: keep them dark/purple like Corpox, no yellow/cyan/pink */
.brand-card-wrap,
.banner-spotlight,
.site-footer,
.footer-cta-card,
.contact-info-panel {
	background: var(--site-dark) !important;
	color: #ffffff !important;
}
.footer-cta-card,
.contact-info-panel {
	background: var(--site-gradient) !important;
}
.banner-spotlight h2,
.banner-spotlight .title,
.banner-spotlight .tmp-title-split,
.banner-spotlight p,
.footer-cta-card h2,
.footer-cta-card p,
.contact-info-panel h2,
.contact-info-panel p,
.contact-info-list strong,
.contact-info-list span,
.brand-card-wrap > span,
.brand-marquee strong,
.footer-title,
.footer-brand,
.footer-socials a {
	color: #ffffff !important;
}
.banner-chip-wrap span,
.brand-marquee strong,
.contact-info-list li,
.footer-socials a {
	background: rgba(255, 255, 255, 0.1) !important;
	border-color: rgba(255, 255, 255, 0.16) !important;
	color: #ffffff !important;
}
.banner-chip-wrap.dark-text span {
	background: #ffffff !important;
	border-color: var(--site-border) !important;
	color: var(--site-heading) !important;
}
.footer-text,
.footer-links a,
.footer-contact li,
.footer-bottom-line,
.footer-bottom-line p {
	color: rgba(226, 230, 255, 0.72) !important;
}

/* Forms */
.form-label {
	color: var(--site-heading) !important;
}
.form-control,
.form-select {
	background: #ffffff !important;
	border-color: var(--site-border) !important;
	color: var(--site-heading) !important;
}
.form-control:focus,
.form-select:focus {
	border-color: var(--site-primary) !important;
	box-shadow: 0 0 0 0.2rem rgba(82, 55, 249, 0.12) !important;
}

/* Final specificity fixes for dark template areas */
.home-hero .hero-mini-stats div {
	background: rgba(255, 255, 255, 0.08) !important;
	border-color: rgba(255, 255, 255, 0.14) !important;
	box-shadow: none !important;
}
.home-hero .hero-mini-stats strong,
.home-hero .hero-mini-stats span {
	color: #ffffff !important;
}
.home-hero .eyebrow,
.banner-spotlight .eyebrow,
.footer-cta-card .eyebrow,
.contact-info-panel .eyebrow,
.eyebrow.light {
	background: rgba(255, 255, 255, 0.12) !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	color: #ffffff !important;
}
.banner-spotlight .tmp-btn.btn-primary,
.footer-cta-card .tmp-btn.btn-primary,
.contact-info-panel .tmp-btn.btn-primary {
	background: #ffffff !important;
	color: var(--site-primary) !important;
	border-color: #ffffff !important;
}
.banner-spotlight .tmp-btn.btn-primary:hover,
.footer-cta-card .tmp-btn.btn-primary:hover,
.contact-info-panel .tmp-btn.btn-primary:hover {
	background: #eeeeff !important;
	color: var(--site-primary) !important;
}

.site-header .navbar {
	width: 100% !important;
}

.site-header .header-fluid {
	width: 100% !important;
	max-width: 100% !important;
	padding-left: 28px !important;
	padding-right: 28px !important;
}

.site-header .nav-link,
.site-header .nav-link.active,
.site-header .nav-link.show,
.site-header .nav-link[aria-current="page"] {
	color: #1b1b1c !important;
	background: transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.site-header .nav-link:hover,
.site-header .nav-link:focus {
	color: #5237f9 !important;
	background: transparent !important;
}
.site-header .nav-link.active {
	color: #5237f9 !important;
	background: transparent !important;
	position: relative;
}

.site-header .nav-link.active::after {
	content: "";
	position: absolute;
	left: 11px;
	right: 11px;
	bottom: 6px;
	height: 2px;
	border-radius: 20px;
	background: #5237f9;
}
/* ---------------------------------------------- */
/* FINAL BUTTON RESET: remove hover animation/transition */
.tmp-btn,
a.tmp-btn,
button.tmp-btn,
.btn,
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    transition: none !important;
    animation: none !important;
}

.tmp-btn:hover,
.tmp-btn:focus,
.tmp-btn:active,
a.tmp-btn:hover,
a.tmp-btn:focus,
a.tmp-btn:active,
button.tmp-btn:hover,
button.tmp-btn:focus,
button.tmp-btn:active,
.btn:hover,
.btn:focus,
.btn:active,
button:hover,
button:focus,
button:active,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="button"]:active,
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="submit"]:active {
    transform: none !important;
    transition: none !important;
    animation: none !important;
    box-shadow: none !important;
    filter: none !important;
    outline: none !important;
}

/* Primary button remains same on hover */
.tmp-btn.btn-primary,
.tmp-btn.btn-primary:hover,
.tmp-btn.btn-primary:focus,
.tmp-btn.btn-primary:active {
    background: var(--site-gradient) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Border button remains same on hover */
.tmp-btn.btn-border,
.tmp-btn.btn-border:hover,
.tmp-btn.btn-border:focus,
.tmp-btn.btn-border:active {
    background: transparent !important;
    border-color: rgba(82, 55, 249, .24) !important;
    color: var(--site-heading) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* White CTA buttons remain white on hover */
.banner-spotlight .tmp-btn.btn-primary,
.banner-spotlight .tmp-btn.btn-primary:hover,
.footer-cta-card .tmp-btn.btn-primary,
.footer-cta-card .tmp-btn.btn-primary:hover,
.contact-info-panel .tmp-btn.btn-primary,
.contact-info-panel .tmp-btn.btn-primary:hover {
    background: #ffffff !important;
    color: var(--site-primary) !important;
    border-color: #ffffff !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Remove button shine/overlay */
.tmp-btn::before,
.tmp-btn::after,
a.tmp-btn::before,
a.tmp-btn::after,
button.tmp-btn::before,
button.tmp-btn::after,
.btn::before,
.btn::after,
button::before,
button::after {
    display: none !important;
    content: none !important;
    animation: none !important;
    transition: none !important;
}