/* ============================================
   Custom Variables
   ============================================ */
:root {
	--font-cabinet-grotesk: "Cabinet Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-inter: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--color-primary: #f7f5ef;
	--color-secondary: #2f2f2f;
	--color-accent: #ff8058;
	--color-text-primary: #aa8717;
}

/* ============================================
   Smooth Scroll Setup
   ============================================ */
#smooth-wrapper {
	overflow: hidden;
}

#smooth-content {
	overflow: visible;
	will-change: transform;
}

/* ============================================
   Button Responsive Font Sizes (Mobile First)
   ============================================ */
.btn {
	font-size: clamp(0.875rem, 1vw + 0.5rem, var(--bs-btn-font-size, 1rem));
}

.btn span:not(.visually-hidden) {
	font-size: clamp(0.875rem, 1vw + 0.5rem, inherit);
}

/* Ensure btn-sm maintains minimum 14px on mobile */
.btn-sm {
	font-size: clamp(0.875rem, 1vw + 0.5rem, 0.875rem);
}

.btn-sm span:not(.visually-hidden) {
	font-size: clamp(0.875rem, 1vw + 0.5rem, inherit);
}

/* Ensure btn-lg scales properly */
.btn-lg {
	font-size: clamp(0.875rem, 1.2vw + 0.5rem, var(--bs-btn-font-size, 1rem));
}

.btn-lg span:not(.visually-hidden) {
	font-size: clamp(0.875rem, 1.2vw + 0.5rem, inherit);
}

/* ============================================
   Philippines Dotted Map Component
   ============================================ */
.philippines-dotted-map-container {
	position: relative;
	width: 100%;
}

.philippines-dotted-map-container img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 1200px;
	margin: 0 auto;
	/* Ensure it doesn't interfere with smooth scroll */
	transform: translateZ(0);
	will-change: auto;
}

.philippines-map-content {
	top: 50%;
	right: 5%;
	transform: translateY(-50%);
	max-width: 300px;
	z-index: 10;
}

/* ============================================
   Rider Image Responsive (Mobile First)
   ============================================ */
.rider-image-responsive {
	width: 85%;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	padding-top: 0;
	margin-top: 0;
}

@media (max-width: 575.98px) {
	.rider-image-responsive {
		padding-top: 0 !important;
		margin-top: 0 !important;
	}
}

@media (min-width: 576px) {
	.rider-image-responsive {
		width: 70%;
		max-width: 350px;
	}
}

@media (min-width: 768px) {
	.rider-image-responsive {
		width: 60%;
		max-width: 400px;
	}
}

@media (min-width: 992px) {
	.rider-image-responsive {
		width: auto;
		max-width: 400px;
	}
}

@media (max-width: 991.98px) {
	.philippines-map-content {
		position: static !important;
		transform: none;
		max-width: 100%;
		margin-top: 2rem;
		text-align: center;
	}
}

/* Body background with primary color */
body.bg-primary-color {
	background-color: var(--color-primary) !important;
}

/* ============================================
   Ticker section (index) - inline CSS cleanup
   ============================================ */
.ticker-section {
	z-index: 20;
	margin-top: -15px;
}

.ticker-pill {
	background-color: #fff;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* ============================================
   Why Businesses Choose SnapX (index) - inline CSS cleanup
   ============================================ */
.why-snapx__label {
	margin-bottom: 64px;
}

.why-snapx__header-row {
	margin-bottom: 3rem !important;
}

.why-snapx-card {
	background-color: #f2f0ea !important;
	transition: transform 0.2s;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
	border: none !important;
	display: flex;
	flex-direction: column;
}

/* Only remove bottom padding for cards that include the pinned image */
.why-snapx-card--no-bottom-pad {
	padding-bottom: 0 !important;
}

.why-snapx-card__icon-row {
	margin-bottom: 32px;
}

.why-snapx-card__icon {
	width: 48px;
	height: 48px;
	background: linear-gradient(45deg, var(--color-secondary), var(--color-accent));
}

.why-snapx-card__icon-i {
	font-size: 20px;
}

.why-snapx-card__title {
	font-size: clamp(1.125rem, 2.5vw + 0.5rem, 22px);
}

.why-snapx-card__img {
	display: block; /* prevents the inline-image baseline gap (looks like padding) */
	width: 100%;
	height: 120px;
	object-fit: cover;
	border-radius: 12px;
	margin-top: auto; /* pin image to the bottom of the card */
}

.why-snapx-card__description {
	margin-bottom: 32px !important;
}

.why-snapx-card__bottom-blur {
	bottom: -20px;
	left: 0;
	z-index: 1;
}

/* Footer */
.site-footer {
	background-color: var(--color-secondary);
}

footer.position-relative {
	background-color: var(--color-secondary, #2f2f2f);
}

.footer-dot-list {
	--dot-clr: var(--color-primary);
}

/* ============================================
   Whitelabel (services) - Branding preview
   ============================================ */
.whitelabel-branding {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.whitelabel-branding__main {
	display: flex;
	align-items: center;
	gap: 32px;
	width: 100%;
}

.whitelabel-branding__preview {
	border-radius: 28px;
	padding: 18px;
	background: #f2f0ea;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
	flex: 1 1 auto;
}

.whitelabel-branding__preview-stage {
	padding: 0;
}

/* Preview UI (wireframe) */
.whitelabel-preview-ui__parent {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(10, 1fr);
	grid-column-gap: 16px;
	grid-row-gap: 16px;
	border-radius: 18px;
	background: rgba(242, 240, 234, 0.55);
	border: 1px solid rgba(0, 0, 0, 0.06);
	padding: 16px;
	min-height: 360px;
}

.whitelabel-preview-ui__div1 {
	grid-area: 1 / 1 / 11 / 2;
}
.whitelabel-preview-ui__div2 {
	grid-area: 1 / 2 / 2 / 4;
}
.whitelabel-preview-ui__div3 {
	grid-area: 2 / 2 / 11 / 4;
}

.whitelabel-preview-ui__sidebar {
	height: 100%;
	border-radius: 14px;
	background: var(--color-secondary, #2f2f2f);
	color: var(--color-text-primary, #fff);
	padding: 14px 12px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.whitelabel-preview-ui__logo {
	font-weight: 700;
	letter-spacing: 0.2px;
	font-size: 24px;
	line-height: 1.05;
	padding: 22px 10px;
	border-radius: 12px;
	background: transparent;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	/* Prevent layout shift when swapping between text vs image logo */
	min-height: 96px;
}

.whitelabel-preview-ui__logo-img {
	display: none;
	width: 100%;
	max-width: 140px;
	height: 44px;
	object-fit: contain;
}

.whitelabel-preview-ui__logo.has-image .whitelabel-preview-ui__logo-img {
	display: block;
}

.whitelabel-preview-ui__logo.has-image .whitelabel-preview-ui__logo-img {
	/* Filter will be set dynamically via JavaScript based on palette filter property */
	filter: brightness(0) saturate(100%); /* Base filter, will be overridden by JS */
}

.whitelabel-preview-ui__logo.has-image .whitelabel-preview-ui__logo-text {
	display: none;
}

.whitelabel-preview-ui__logo-text {
	display: block;
	color: var(--color-accent);
}

/* Sparkle indicator when the preview logo changes */
.whitelabel-preview-ui__logo {
	position: relative;
	overflow: visible;
}

.whitelabel-preview-ui__logo::after {
	content: "";
	position: absolute;
	top: 6px;
	left: 10px;
	width: 30px;
	height: 30px;
	background-color: rgba(255, 255, 255, 0.95);
	opacity: 0;
	transform: scale(0.6) rotate(-12deg);
	pointer-events: none;

	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20fill='black'%20d='M8%200l.78%204.12L13%206l-4.22%201.88L8%2012l-.78-4.12L3%206l4.22-1.88L8%200zM2.25%209.5l.38%202l2.05.9-2.05.9-.38%202-.38-2-2.05-.9%202.05-.9.38-2zm11.5%200l.38%202%202.05.9-2.05.9-.38%202-.38-2-2.05-.9%202.05-.9.38-2z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20fill='black'%20d='M8%200l.78%204.12L13%206l-4.22%201.88L8%2012l-.78-4.12L3%206l4.22-1.88L8%200zM2.25%209.5l.38%202l2.05.9-2.05.9-.38%202-.38-2-2.05-.9%202.05-.9.38-2zm11.5%200l.38%202%202.05.9-2.05.9-.38%202-.38-2-2.05-.9%202.05-.9.38-2z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.whitelabel-preview-ui__logo.is-sparkling::after {
	animation: wl-logo-sparkle 520ms ease forwards;
}

/* When palette 2 is active, use accent color for sparkle */
.whitelabel-branding__preview-stage[data-palette-index="2"] .whitelabel-preview-ui__logo::after {
	background-color: rgba(5, 89, 91, 0.95);
}

@keyframes wl-logo-sparkle {
	0% {
		opacity: 0;
		transform: scale(0.65) rotate(-12deg);
	}
	35% {
		opacity: 1;
		transform: scale(1.1) rotate(0deg);
	}
	100% {
		opacity: 0;
		transform: scale(0.95) rotate(0deg);
	}
}

.whitelabel-preview-ui__nav {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0 2px;
	margin-top: 4px;
}

.whitelabel-preview-ui__nav-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 12px;
	border-radius: 12px;
	color: var(--color-text-primary, #fff);
	opacity: 0.78;
	text-decoration: none;
	pointer-events: none; /* mock UI: not clickable */
	cursor: default;
}

.whitelabel-preview-ui__nav-link--group {
	cursor: default;
	user-select: none;
}

.whitelabel-preview-ui__nav-link.is-active {
	color: var(--color-text-primary, #fff);
	opacity: 1;
	background: rgba(255, 255, 255, 0.1);
}

.whitelabel-preview-ui__nav-bi {
	width: 18px;
	font-size: 16px;
	line-height: 1;
	opacity: 0.9;
	flex-shrink: 0;
}

.whitelabel-preview-ui__nav-caret {
	margin-left: auto;
	opacity: 0.55;
	font-size: 13px;
}

.whitelabel-preview-ui__nav-text {
	font-size: 14px;
	font-weight: 500;
}

.whitelabel-preview-ui__nav-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.whitelabel-preview-ui__submenu {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-left: 28px;
}

.whitelabel-preview-ui__submenu-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 10px;
	color: var(--color-text-primary, #fff);
	opacity: 0.72;
	text-decoration: none;
	font-size: 13px;
	pointer-events: none; /* mock UI: not clickable */
	cursor: default;
}

.whitelabel-preview-ui__submenu-link:hover {
	background: transparent;
	color: var(--color-text-primary, #fff);
	opacity: 0.72;
}

.whitelabel-preview-ui__submenu-dot {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.28);
	flex-shrink: 0;
}

.whitelabel-preview-ui__topbar {
	height: 100%;
	border-radius: 14px;
	background: #ffffff;
	display: flex;
	align-items: center;
	padding: 0 14px;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.whitelabel-preview-ui__hamburger {
	font-size: 18px;
	color: #2f2f2f;
	line-height: 1;
}

.whitelabel-preview-ui__content {
	height: 100%;
	border-radius: 14px;
	background: #ffffff;
	padding: 16px;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.whitelabel-preview-ui__content-head {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.whitelabel-preview-ui__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.whitelabel-preview-ui__card {
	border-radius: 12px;
	border: 1px solid rgba(0, 0, 0, 0.06);
	background: rgba(242, 240, 234, 0.25);
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.whitelabel-preview-ui__card.tall {
	min-height: 180px;
}

.whitelabel-preview-ui__main {
	display: grid;
	grid-template-columns: 1.35fr 0.65fr;
	gap: 12px;
	align-items: start;
	flex: 1;
}

.whitelabel-preview-ui__table {
	border-radius: 12px;
	border: 1px solid rgba(0, 0, 0, 0.06);
	background: rgba(242, 240, 234, 0.25);
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 180px;
}

.whitelabel-preview-ui__table-row {
	display: grid;
	grid-template-columns: 1.2fr 1fr 0.8fr;
	gap: 10px;
}

/* Skeletons */
.whitelabel-preview-ui__sk {
	border-radius: 999px;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.06));
	background-size: 220% 100%;
	animation: wl-skeleton 1.4s ease-in-out infinite;
}

.whitelabel-preview-ui__sk.sk-title {
	width: 46%;
	height: 12px;
}
.whitelabel-preview-ui__sk.sk-subtitle {
	width: 62%;
	height: 10px;
	opacity: 0.85;
}
.whitelabel-preview-ui__sk.sk-chip {
	width: 42px;
	height: 12px;
}
.whitelabel-preview-ui__sk.sk-line {
	width: 100%;
	height: 10px;
}
.whitelabel-preview-ui__sk.sk-line.sm {
	width: 70%;
}
.whitelabel-preview-ui__sk.sk-cell {
	width: 100%;
	height: 10px;
}

@keyframes wl-skeleton {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -20% 0;
	}
}

/* Delivery Preview UI */
.whitelabel-preview-ui__parent--delivery {
	display: grid;
	grid-template-columns: 100px 1.8fr 1.2fr;
	grid-template-rows: 1fr;
	gap: 0;
	position: relative;
	min-height: 480px;
	background: rgba(242, 240, 234, 0.3);
	border-radius: 18px;
	overflow: hidden;
}

.whitelabel-preview-ui__delivery-sidebar {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px 12px;
	background: #ffffff;
	border-right: 1px solid rgba(0, 0, 0, 0.06);
}

.whitelabel-preview-ui__delivery-nav {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}

.whitelabel-preview-ui__delivery-nav-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 8px;
	border-radius: 12px;
	color: rgba(47, 47, 47, 0.6);
	text-decoration: none;
	font-size: 11px;
	font-weight: 500;
	transition: all 0.2s ease;
	pointer-events: none;
	cursor: default;
	width: 100%;
	text-align: center;
}

.whitelabel-preview-ui__delivery-nav-link i {
	font-size: 20px;
	line-height: 1;
}

.whitelabel-preview-ui__delivery-nav-link.is-active {
	color: var(--color-accent, #ff8058);
	background: color-mix(in srgb, var(--color-accent, #ff8058) 10%, transparent);
}

.whitelabel-preview-ui__delivery-content {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 24px;
	background: #ffffff;
	border-right: 1px solid rgba(0, 0, 0, 0.06);
	overflow-y: auto;
}

.whitelabel-preview-ui__delivery-form {
	width: 100%;
	max-width: 420px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	height: 100%;
}

.whitelabel-preview-ui__delivery-vehicle-group {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	background: var(--color-accent, #ff8058);
	margin: 0 -24px;
	width: calc(100% + 48px);
}

.whitelabel-preview-ui__delivery-vehicle {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border-radius: 12px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	background: #ffffff;
	font-size: 14px;
	font-weight: 500;
	color: #2f2f2f;
}

.whitelabel-preview-ui__delivery-vehicle i:first-child {
	font-size: 18px;
	color: var(--color-accent, #ff8058);
}

.whitelabel-branding__preview-stage {
	--color-primary: #ffffff; /* Default primary color */
	--color-secondary: #171717; /* Default secondary color */
	--color-accent: #ff8058; /* Default accent color */
	--color-text-primary: #f5f5f5; /* Default text color */
	--color-tertiary: #444444; /* Default tertiary color */
}

.whitelabel-preview-ui__delivery-vehicle i:last-child {
	margin-left: auto;
	font-size: 14px;
	opacity: 0.5;
}

.whitelabel-preview-ui__delivery-tabs {
	display: flex;
	gap: 8px;
	border-radius: 12px;
	background: rgba(242, 240, 234, 0.3);
	padding: 4px;
}

.whitelabel-preview-ui__delivery-tab {
	flex: 1;
	padding: 10px 12px;
	border-radius: 8px;
	border: none;
	background: rgba(255, 255, 255, 0.5);
	font-size: 13px;
	font-weight: 500;
	color: rgba(47, 47, 47, 0.6);
	cursor: default;
	pointer-events: none;
	transition: all 0.2s ease;
}

.whitelabel-preview-ui__delivery-tab.is-active {
	background: #ffffff;
	color: var(--color-accent, #ff8058);
	box-shadow: 0 2px 8px color-mix(in srgb, var(--color-accent, #ff8058) 20%, transparent);
}

.whitelabel-preview-ui__delivery-bulk {
	display: flex;
	gap: 8px;
}

.whitelabel-preview-ui__delivery-bulk-btn {
	flex: 1;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	background: #ffffff;
	font-size: 12px;
	font-weight: 500;
	color: #2f2f2f;
	cursor: default;
	pointer-events: none;
}

.whitelabel-preview-ui__delivery-bulk-btn:last-child {
	background: rgba(47, 47, 47, 0.1);
}

.whitelabel-preview-ui__delivery-locations-wrapper {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.whitelabel-preview-ui__delivery-locations {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.whitelabel-preview-ui__delivery-location-item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.whitelabel-preview-ui__delivery-location-icon {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--color-accent, #ff8058);
	flex-shrink: 0;
	position: relative;
	transition: background-color 0.3s ease;
	margin-top: 2px;
}

.whitelabel-preview-ui__delivery-location-icon--pickup {
	background: var(--color-accent, #ff8058);
}

.whitelabel-preview-ui__delivery-location-icon--dropoff {
	background: var(--color-accent, #ff8058);
}

.whitelabel-preview-ui__delivery-location-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #ffffff;
}

.whitelabel-preview-ui__delivery-location-details {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.whitelabel-preview-ui__delivery-location-address {
	font-size: 13px;
	font-weight: 500;
	color: #2f2f2f;
	line-height: 1.4;
}

.whitelabel-preview-ui__delivery-location-contact {
	font-size: 12px;
	color: rgba(47, 47, 47, 0.6);
	line-height: 1.4;
}

.whitelabel-preview-ui__delivery-add-stop {
	align-self: flex-end;
	padding: 10px 20px;
	border-radius: 10px;
	border: 1px dashed rgba(0, 0, 0, 0.2);
	background: transparent;
	font-size: 13px;
	font-weight: 500;
	color: rgba(47, 47, 47, 0.6);
	cursor: default;
	pointer-events: none;
	margin-top: 4px;
}

.whitelabel-preview-ui__delivery-cost {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin-bottom: 12px;
}

.whitelabel-preview-ui__delivery-cost-amount {
	font-size: 18px;
	font-weight: 700;
	color: var(--text-color-secondary, #2f2f2f);
	transition: color 0.3s ease;
}

.whitelabel-preview-ui__delivery-cost i {
	font-size: 18px;
	color: rgba(47, 47, 47, 0.4);
}

.whitelabel-preview-ui__delivery-next {
	padding: 14px 24px;
	border-radius: 12px;
	border: none;
	background: var(--color-accent, #ff8058);
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	cursor: default;
	pointer-events: none;
	transition: background-color 0.3s ease;
	margin-top: auto;
}

.whitelabel-preview-ui__delivery-map {
	position: relative;
	background: linear-gradient(135deg, #e8f4f8 0%, #d4e8f0 100%);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.whitelabel-preview-ui__sk.sk-location {
	width: 100%;
	height: 14px;
	border-radius: 6px;
}

.whitelabel-preview-ui__sk.sk-contact {
	width: 70%;
	height: 12px;
	border-radius: 6px;
}

.whitelabel-preview-ui__sk.sk-map {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #e8f4f8 0%, #d4e8f0 100%);
}

.whitelabel-preview-ui__sk.sk-map::before {
	content: "";
	position: absolute;
	top: 20%;
	left: 10%;
	width: 30%;
	height: 20%;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.6);
}

.whitelabel-preview-ui__sk.sk-map::after {
	content: "";
	position: absolute;
	bottom: 15%;
	right: 15%;
	width: 25%;
	height: 15%;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.5);
}


@media (max-width: 575.98px) {
	.whitelabel-branding {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
	}

	.whitelabel-branding__preview {
		width: 100%;
	}

	.whitelabel-preview-ui__parent {
		grid-column-gap: 12px;
		grid-row-gap: 12px;
		padding: 12px;
		min-height: 320px;
	}
	.whitelabel-preview-ui__stats {
		grid-template-columns: 1fr;
	}
	.whitelabel-preview-ui__main {
		grid-template-columns: 1fr;
	}
	.whitelabel-preview-ui__div1 {
		display: block; /* Always show nav */
		grid-area: 1 / 1 / 11 / 2; /* Sidebar on left */
	}
	.whitelabel-preview-ui__div2 {
		grid-area: 1 / 2 / 2 / 4; /* Top nav */
	}
	.whitelabel-preview-ui__div3 {
		grid-area: 2 / 2 / 11 / 4; /* Content */
	}
}

.whitelabel-branding__logos {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 12px;
	margin-top: 0;
	flex: 0 0 auto;
	width: 80px;
	min-width: 80px;
}

/* Mobile first - logo swatches responsive */
.whitelabel-branding__logo {
	width: clamp(48px, 4vw + 24px, 64px); /* Mobile-first: 48px to 64px */
	height: clamp(48px, 4vw + 24px, 64px); /* Mobile-first: 48px to 64px */
	border-radius: 999px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	background: #ffffff;
	display: grid;
	place-items: center;
	padding: clamp(8px, 1vw + 4px, 10px); /* Mobile-first: 8px to 10px */
	transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, width 0.3s ease,
		height 0.3s ease, background-color 0.3s ease;
	aspect-ratio: 1 / 1; /* Maintain circular shape */
}

.whitelabel-branding__logo img {
	max-width: 100%;
	max-height: 100%;
	display: block;
}

.whitelabel-branding__logo--text {
	padding: 0;
}

.whitelabel-branding__logo--text .whitelabel-branding__logo-text {
	display: block;
	text-align: center;
	font-weight: 800;
	font-size: 12px;
	line-height: 1.05;
	letter-spacing: 0.3px;
	color: #171717;
}

.whitelabel-branding__logo--text:not(.is-active) .whitelabel-branding__logo-text {
	color: #2f2f2f; /* Hardcoded secondary color - always this when inactive */
}

.whitelabel-branding__logo:hover {
	transform: translateY(-2px);
	border-color: var(--hover-border-color, rgba(255, 128, 88, 0.6));
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.whitelabel-branding__logo.is-active {
	/* Colors will be set via inline styles with !important to override */
	width: clamp(58px, 4.5vw + 28px, 78px); /* Mobile-first: 58px to 78px */
	height: clamp(58px, 4.5vw + 28px, 78px); /* Mobile-first: 58px to 78px */
}

.whitelabel-branding__logo.is-active img {
	filter: brightness(0) invert(1);
}

.whitelabel-branding__logo.is-active.whitelabel-branding__logo--text .whitelabel-branding__logo-text {
	color: #fff;
}


/* Inline "SnapX ✨" brand sparkle */
.brand-sparkle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	color: var(--color-secondary);
}

.brand-sparkle__icon {
	color: var(--color-accent);
	font-size: 0.95em;
	line-height: 1;
}


.whitelabel-branding__palette-swatches {
	display: flex;
	flex-direction: row;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	margin-top: 24px;
	padding-left: 0;
	width: 100%;
}

.whitelabel-branding__palette-swatches-group {
	display: flex;
	flex-direction: row;
	gap: 12px;
	align-items: center;
}

/* Mobile first - palette refresh button responsive */
.whitelabel-branding__palette-refresh {
	width: clamp(48px, 3.5vw + 24px, 60px); /* Mobile-first: 48px to 60px */
	height: clamp(48px, 3.5vw + 24px, 60px); /* Mobile-first: 48px to 60px */
	border-radius: 50%;
	border: 2px solid #2f2f2f;
	background: #2f2f2f;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
	flex-shrink: 0;
	aspect-ratio: 1 / 1; /* Maintain circular shape */
}

.whitelabel-branding__palette-refresh:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
	background: #2f2f2f;
	border-color: #2f2f2f;
}

.whitelabel-branding__palette-refresh i {
	font-size: 18px;
	color: #ffffff;
	transition: transform 0.2s ease;
}

.whitelabel-branding__palette-refresh:hover i {
	transform: rotate(180deg);
	color: #ffffff;
}

.whitelabel-branding__palette-change {
	margin-left: 8px;
	background-color: #171717 !important;
	border-color: #171717 !important;
	color: #ffffff !important;
	border-radius: 30px !important;
}

.whitelabel-branding__palette-change:hover {
	transform: none;
	background-color: #171717 !important;
	border-color: #171717 !important;
	opacity: 0.9;
}

.whitelabel-branding__palette-change i {
	margin-left: 4px;
	font-size: 0.9em;
	color: #ffffff;
}

/* Mobile first - palette swatch responsive */
.whitelabel-branding__palette-swatch {
	width: clamp(48px, 3.5vw + 24px, 60px); /* Mobile-first: 48px to 60px */
	height: clamp(48px, 3.5vw + 24px, 60px); /* Mobile-first: 48px to 60px */
	border-radius: 50%;
	border: 2px solid rgba(0, 0, 0, 0.1);
	position: relative;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	aspect-ratio: 1 / 1; /* Maintain circular shape */
}

.whitelabel-branding__palette-swatch:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.whitelabel-branding__palette-hex {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 10px;
	font-weight: 600;
	font-family: monospace;
	color: #ffffff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 2px rgba(0, 0, 0, 0.5);
	white-space: nowrap;
	z-index: 1;
}

/* For light backgrounds, use dark text */
.whitelabel-branding__palette-swatch[style*="#ffffff"] .whitelabel-branding__palette-hex,
.whitelabel-branding__palette-swatch[style*="#f2f0ea"] .whitelabel-branding__palette-hex {
	color: #2f2f2f;
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

@media (max-width: 575.98px) {
	.whitelabel-branding__logos {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 14px;
	}
	
	.whitelabel-branding__palette-swatches {
		flex-wrap: wrap;
		justify-content: center;
	}
}

/* Mobile-first stacking for preview, logo swatches, and color swatches */
@media (max-width: 767.98px) {
	.whitelabel-branding {
		width: 100%;
	}

	.whitelabel-branding__main {
		flex-direction: column;
		align-items: center;
		gap: 12px; /* Reduced gap between containers */
	}

	.whitelabel-branding__preview {
		width: 100%; /* 100% on mobile */
		max-width: 100%;
		max-height: 400px; /* Limit height on mobile */
		overflow: hidden; /* Prevent overflow */
	}
	
	/* Hide cards and table on mobile */
	.whitelabel-preview-ui__card,
	.whitelabel-preview-ui__table {
		display: none !important;
	}

	.whitelabel-branding__logos {
		flex-direction: row;
		flex-wrap: nowrap; /* Keep logos in one row */
		justify-content: center;
		width: 100%;
		min-width: 0;
		margin-top: 8px; /* Reduced gap */
		overflow-x: auto; /* Allow horizontal scroll if needed */
		gap: 8px; /* Reduced gap between logos */
	}
	
	/* Smaller logos on mobile only */
	.whitelabel-branding__logo {
		aspect-ratio: 1 / 1; /* Maintain circular shape */
		width: 40px !important; /* Smaller on mobile */
		height: 40px !important; /* Smaller on mobile */
		padding: 6px !important; /* Smaller padding on mobile */
	}
	
	.whitelabel-branding__logo.is-active {
		width: 48px !important; /* Smaller active state on mobile */
		height: 48px !important; /* Smaller active state on mobile */
	}

	.whitelabel-branding__palette-swatches {
		flex-direction: column; /* Stack vertically on mobile */
		align-items: center;
		justify-content: center;
		gap: 12px; /* Gap between swatches group and button */
		overflow-x: auto; /* Allow horizontal scroll if needed */
		margin-top: 8px; /* Reduced gap from logos */
	}
	
	.whitelabel-branding__palette-swatches-group {
		flex-direction: row; /* Keep swatches in one row */
		flex-wrap: nowrap; /* Prevent wrapping */
		gap: 8px; /* Reduced gap between swatches */
	}
	
	/* Smaller color swatches on mobile only */
	.whitelabel-branding__palette-swatch,
	.whitelabel-branding__palette-refresh {
		width: 40px !important; /* Smaller on mobile */
		height: 40px !important; /* Smaller on mobile */
	}
	
	/* Randomize button under swatches on mobile */
	.whitelabel-branding__palette-change {
		margin-left: 0 !important; /* Remove left margin */
		margin-top: 8px; /* Add top margin on mobile */
	}
	
}


@media (min-width: 992px) {
	.whitelabel-branding {
		width: 80%; /* Scale container to 80% on larger screens - preview scales proportionally */
	}

	.whitelabel-branding__main {
		flex-direction: row; /* Restore horizontal layout on larger screens */
		align-items: center;
		gap: 32px;
	}

	.whitelabel-branding__preview {
		width: 100%; /* Preview stays 100% of its container, scales with container */
		flex: 1 1 auto;
	}

	.whitelabel-branding__logos {
		flex-direction: column; /* Restore vertical logo swatches on larger screens */
		width: 80px;
		min-width: 80px;
		margin-top: 0;
	}

	.whitelabel-branding__palette-swatches {
		flex-direction: row; /* Restore horizontal layout on larger screens */
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin-top: 24px;
	}

	.whitelabel-branding__palette-swatches-group {
		flex-wrap: wrap;
		justify-content: center;
	}

	.whitelabel-branding__palette-change {
		margin-left: 0;
	}
}

/* Negative margin for ticker + video section */
.ticker-video-section-negative-margin {
	position: relative;
	z-index: 2;
}

@media (min-width: 768px) {
	/* no special top margin on md+ */
	
	/* Hide circle blur SVG on desktop */
	.hero-7__bg-svg--mobile-circle-blur {
		display: none !important;
	}
}

@media (min-width: 992px) {
	/* no special top margin on lg+ */
}

/* Features Grid Section */
.features-grid-parent {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(6, 1fr);
	grid-column-gap: 1.5rem;
	grid-row-gap: 1.5rem;
	min-height: 600px;
}

.features-grid-div1 {
	grid-area: 1 / 1 / 6 / 2;
	display: flex;
	flex-direction: column;
	position: relative;
	background-color: rgba(255, 255, 255, 0.12);
	border-radius: 15px;
}

.features-grid-div2 {
	grid-area: 1 / 2 / 2 / 3;
	background-color: var(--color-text-primary);
	border-radius: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.features-grid-div3 {
	grid-area: 2 / 2 / 7 / 3;
	display: flex;
	flex-direction: column;
	position: relative;
	background-color: rgba(255, 255, 255, 0.12);
	border-radius: 15px;
}

.features-grid-div4 {
	grid-area: 1 / 3 / 6 / 4;
	display: flex;
	flex-direction: column;
	position: relative;
	background-color: rgba(255, 255, 255, 0.12);
	border-radius: 15px;
}

/* Black boxes within grid divs */
.features-grid-black-box {
	background-color: var(--color-secondary) !important;
	border-radius: 25px;
	flex: 1;
	min-height: 250px;
	margin-bottom: 1.5rem;
}

/* Content areas within grid divs */
.features-grid-content {
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

/* ============================================
   Typography
   ============================================ */
p {
	font-family: var(--font-inter);
	font-size: 1rem;
	letter-spacing: normal;
	line-height: 1.5;
}

h6 {
	font-size: clamp(0.875rem, 1.5vw + 0.25rem, 1.25rem);
	letter-spacing: 0.0025em;
	line-height: 1.4;
    font-family: var(--font-cabinet-grotesk) !important;
}

h5 {
	font-size: clamp(1rem, 2vw + 0.25rem, 1.5625rem);
	letter-spacing: 0.005em;
	line-height: 1.35;
    font-family: var(--font-cabinet-grotesk) !important;
}

h4 {
	font-size: clamp(1.125rem, 2.5vw + 0.5rem, 1.953125rem);
	letter-spacing: 0.01em;
	line-height: 1.3;
    font-family: var(--font-cabinet-grotesk) !important;
}

h3 {
	font-size: clamp(1.25rem, 3vw + 0.5rem, 2.44140625rem);
	letter-spacing: 0.015em;
	line-height: 1.2;
    font-family: var(--font-cabinet-grotesk) !important;
}

h2 {
	font-size: clamp(1.5rem, 3.5vw + 0.75rem, 3.0517578125rem);
	letter-spacing: 0.0175em;
	line-height: 1.1;
    font-family: var(--font-cabinet-grotesk) !important;
}

h1 {
	font-size: clamp(2rem, 4vw + 1rem, 3.814697265625rem);
	letter-spacing: 0.02em;
	line-height: 1;
    font-family: var(--font-cabinet-grotesk) !important;
}

/* ============================================
   Hero Section (used in index-2)
   ============================================ */
.hero-section {
	position: relative;
	background-image:
		linear-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 0, 0, 0.06) 1px, transparent 1px);
	background-repeat: repeat;
	background-size: 32px 32px;
	overflow: hidden;
}

.hero-section::before {
	content: "";
	position: absolute;
	width: 1200px;
	height: 1000px;
	background: radial-gradient(
		circle,
		rgba(255, 255, 255, 1) 0%,
		rgba(255, 255, 255, 1) 55%,
		rgba(255, 255, 255, 0) 90%
	);
	border-radius: 50%;
	top: 46%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 0;
	pointer-events: none;
	filter: blur(120px);
}

.hero-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	padding-top: 104px;
	position: relative;
	z-index: 2;
}

.hero-text-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.hero-heading {
	font-size: 3.815rem;
	letter-spacing: 0.02em;
	line-height: 1;
	font-family: var(--font-cabinet-grotesk);
	font-weight: 700;
	margin-bottom: 0;
}

.hero-lead {
	font-family: var(--font-cabinet-grotesk);
	font-weight: 400;
	max-width: 600px;
	text-align: center;
	margin-bottom: 0;
}

.hero-image-wrapper {
	position: relative;
	z-index: 3;
}

.hero-dashboard-image {
	position: relative;
	z-index: 3;
}

.hero-dashboard-main {
	width: 100%;
	display: block;
	border-bottom: 4px solid rgba(255, 255, 255, 0.4);
	/* Mobile-first: smaller border radius on mobile */
	border-bottom-left-radius: clamp(0px, 2vw + 2px, 24px);
	border-bottom-right-radius: clamp(0px, 2vw + 2px, 24px);
}

/* Constrain hero image container width */
.hero-7__img {
	max-width: 78%;
	margin: 0 auto;
}

/* Hero bottom blurred rectangular SVG */
.hero-7 {
	position: relative;
	z-index: 3;
}

.hero-bottom-blur {
	width: 100vw !important;
	height: 400px !important;
	position: absolute;
	left: 50% !important;
	transform: translateX(-50%) !important;
	bottom: -120px !important;
	z-index: 3 !important;
	pointer-events: none;
}

/* Snapx badge for heading */
.snapx-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-right: 10px;
	background-color: var(--color-accent);
	border-radius: 8px;
	vertical-align: middle;
}

.snapx-badge::before {
	content: "";
	display: block;
	width: 22px;
	height: 22px;
	background-color: var(--color-secondary);
	-webkit-mask: url("/assets/img/graphics/snap-diamond.svg") no-repeat center / contain;
	mask: url("/assets/img/graphics/snap-diamond.svg") no-repeat center / contain;
}

.gradient-text-accent {
	background: linear-gradient(90deg, var(--color-secondary) 0%, var(--color-text-primary) 60%, rgba(255, 128, 88, 0.6) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: var(--color-secondary);
}

.gradient-text-primary {
	background: linear-gradient(90deg, var(--color-text-primary) 0%, rgba(170, 135, 23, 0.65) 60%, rgba(170, 135, 23, 0.4) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: var(--color-text-primary);
}

/* Ensure dashboard image stays above bottom blur */
.hero-7__img {
	position: relative;
	z-index: 2;
	margin-bottom: -50px;
}

.hero-dashboard-main {
	position: relative;
	z-index: 2;
}

/* ============================================
   Hero (index) - inline CSS cleanup
   ============================================ */
.hero-7__wrapper--clip {
	overflow: hidden;
}

.hero-7__container {
	z-index: 1;
}

/* Mobile: Position dashboard image and U-shape SVG at bottom of hero section */
@media (max-width: 767.98px) {
	.hero-7 {
		position: relative;
		overflow: visible !important;
		padding-bottom: 0 !important;
		margin-bottom: 0 !important;
	}
	
	.hero-7__wrapper {
		position: relative;
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow: visible !important;
		padding-bottom: 0 !important;
		margin-bottom: 0 !important;
	}
	
	.hero-7__wrapper--clip {
		overflow: visible !important;
		padding-bottom: 0 !important;
		margin-bottom: 0 !important;
	}
	
	.hero-7__container {
		display: flex;
		flex-direction: column;
		padding-top: clamp(2rem, 8vw + 1rem, 4rem) !important;
		padding-bottom: 0 !important;
		margin-bottom: 0 !important;
		flex: 1;
		position: relative;
		z-index: 2;
	}
	
	/* Add more padding-top to hero content section */
	.hero-7__container > .section-space-lg-bottom {
		padding-top: clamp(1.5rem, 6vw + 0.5rem, 3rem) !important;
		margin-bottom: clamp(2rem, 8vw + 1rem, 4rem) !important;
	}
	
	.hero-7__container > .row:last-child {
		margin-top: auto;
		margin-bottom: 0 !important;
		padding-bottom: 0 !important;
	}
	
	.hero-7__img-container--raised {
		margin-bottom: 0 !important;
		padding-bottom: 0 !important;
	}
	
	/* Make dashboard image bigger on mobile */
	.hero-7__img {
		max-width: 95% !important;
		width: 95% !important;
	}
	
	.hero-dashboard-main {
		width: 100% !important;
		max-width: 100% !important;
	}
	
	/* Hide U-shape SVG on mobile */
	.hero-7__bg-svg--bottom-curve {
		display: none !important;
	}
	
	/* Show circle blur SVG only on mobile - positioned at bottom */
	.hero-7__wrapper .hero-7__bg-svg--mobile-circle-blur {
		display: block !important;
		width: 150% !important;
		height: 150% !important;
		max-width: none !important;
		max-height: none !important;
		z-index: 1 !important; /* Above grids (z-index 0) but below heading container (1), image (2), and traces (10) */
		opacity: 1 !important;
		position: absolute !important;
		left: 50% !important;
		right: auto !important;
		bottom: -400px !important; /* Position at bottom with more extending below */
		top: auto !important;
		transform: translateX(-50%) !important;
		pointer-events: none !important;
	}
	
	/* Make wrapper fill hero-7 height completely */
	.hero-7__wrapper {
		position: relative !important;
		height: 100% !important;
		align-self: stretch !important;
	}
	
	/* Remove any padding that might push content up */
	.hero-7 > *,
	.hero-7__wrapper > * {
		padding-bottom: 0 !important;
	}
	
	/* Badge: Make smaller on mobile - smaller font and padding */
	.hero-announcement-badge {
		padding: 0.25rem 0.5rem !important;
		gap: 0.5rem !important;
	}
	
	.hero-announcement-badge__badge {
		font-size: 0.625rem !important;
		padding: 0.125rem 0.375rem !important;
		line-height: 1.2 !important;
	}
	
	.hero-announcement-badge span:last-child {
		font-size: 0.75rem !important;
		line-height: 1.2 !important;
	}
	
	/* Traces: Hide bottom-left, show only top-right and make it smaller on mobile */
	.hero-traces--bottom-left {
		display: none !important;
	}
	
	.hero-7__img-container .hero-traces--top-right,
	.hero-7__img-container--raised .hero-traces--top-right {
		width: 150px !important;
		top: -80px !important;
		right: 20px !important;
		left: auto !important;
		transform: rotate(20deg) !important;
	}
}

.hero-7__img-container--raised {
	position: relative;
	z-index: 10;
}

.hero-announcement-badge__badge {
	background: linear-gradient(45deg, var(--color-secondary), var(--color-accent));
	color: var(--color-primary);
}

.hero-7__bg-svg {
	z-index: 0;
}

/* Circle blur should be above grids but below content */
.hero-7__bg-svg--mobile-circle-blur {
	z-index: 1; /* Above grids (0) but below heading container (1), image (2), and traces (10) */
}

.hero-7__bg-svg--center-rect {
	width: 1600px;
	height: 800px;
	top: 50%;
}

.hero-7__bg-svg--bottom-curve {
	width: 120%;
	height: 500px;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%) translateX(-10%);
	z-index: 0;
}

.hero-7__bg-svg--top-right-grid {
	width: 750px;
	height: 500px;
	right: 0;
	top: 0;
}

.hero-7__bg-svg--mobile-circle-blur {
	display: none; /* Hidden by default, shown only on mobile */
	width: 800px;
	height: 800px;
	position: absolute;
	left: 50%;
	bottom: 0;
	top: auto;
	transform: translateX(-50%);
}

/* Hero Blur Circle SVG (moved from inline) */
.hero-blur-circle {
	z-index: 0;
	width: 1000px;
	height: 1000px;
	left: 0;
	top: 0;
	transform: translate(-20%, -10%);
}

/* ============================================
   Admin Dashboard section (index) - inline CSS cleanup
   ============================================ */
.admin-dashboard__label {
	margin-bottom: 64px;
}

.admin-dashboard__header-row {
	margin-bottom: 3rem !important;
}

.admin-dashboard__cta-btn {
	border-color: var(--color-secondary);
	color: var(--color-secondary);
}

.admin-dashboard__center-blur {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 0;
	/* prevent the blur from being clipped to the SVG's own box */
	overflow: visible;
	/* Keep the blur smaller and never larger than its container */
	width: min(320px, 70vw, 100%);
	height: min(320px, 70vw, 100%);
	max-width: 100%;
	max-height: 100%;
}

.admin-dashboard__scroll {
	overflow-y: visible !important;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	cursor: grab;
	scroll-behavior: smooth;
	z-index: 6;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.admin-dashboard__scroll:active {
	cursor: grabbing;
}

.admin-dashboard__scroll-track {
	flex-wrap: nowrap;
	min-width: max-content;
	/* extra vertical room so overlay cards don't get clipped by the scroll container */
	padding: 40px 0 80px;
}

.admin-dashboard__spacer {
	width: 50vw;
	flex-shrink: 0;
	pointer-events: none;
}

.admin-dashboard__image-wrapper {
	flex-shrink: 0;
	z-index: 20;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
}

.admin-dashboard__image {
	height: 400px;
	width: auto;
	object-fit: contain;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
	-webkit-touch-callout: none;
}

.admin-dashboard__card {
	bottom: 32px;
	left: -320px;
	opacity: 0;
	transition: opacity 0.3s ease;
	max-width: 360px;
	z-index: 25;
	background-color: #f2f0ea !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
	border: none !important;
}

.admin-dashboard__card-icon-wrap {
	margin-bottom: 32px;
}

.admin-dashboard__card-icon {
	width: 48px;
	height: 48px;
	background: linear-gradient(45deg, var(--color-secondary), var(--color-accent));
}

.admin-dashboard__card-icon-i {
	font-size: 20px;
}

.admin-dashboard__card-title {
	font-size: clamp(1.125rem, 2.5vw + 0.5rem, 22px);
}

.admin-dashboard__arrows {
	position: relative;
	z-index: 10;
}

.system-scroll-btn {
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease,
		box-shadow 0.3s ease, transform 0.3s ease;
	position: relative;
	z-index: 10;
	background-color: var(--color-secondary) !important;
	border-color: var(--color-secondary) !important;
}

/* Override Bootstrap bg-dark and bg-opacity-75 classes */
.system-scroll-btn.bg-dark,
.system-scroll-btn.bg-opacity-75 {
	background-color: var(--color-secondary) !important;
	opacity: 1 !important;
}

.admin-dashboard__arrow-icon {
	font-size: 24px;
}

/* Admin dashboard arrow buttons: accent on hover and active (click) only */
.system-scroll-btn:hover,
.system-scroll-btn:active {
	background-color: var(--color-accent) !important;
	border-color: var(--color-accent) !important;
	color: #fff !important;
}

/* Hover should work even when focused */
.system-scroll-btn:focus:hover,
.system-scroll-btn:focus-visible:hover {
	background-color: var(--color-accent) !important;
	border-color: var(--color-accent) !important;
	color: #fff !important;
}

/* Remove focus outline but keep secondary color when not hovered */
.system-scroll-btn:focus:not(:hover):not(:active),
.system-scroll-btn:focus-visible:not(:hover):not(:active) {
	outline: none;
	background-color: var(--color-secondary) !important;
	border-color: var(--color-secondary) !important;
}

/* Admin Dashboard Mobile Swiper Slider */
.admin-dashboard-mobile-wrapper {
	width: 100%;
}

.admin-dashboard-mobile-swiper {
	width: 100%;
	overflow: hidden;
}

.admin-dashboard-mobile-swiper .swiper-wrapper {
	display: flex;
}

.admin-dashboard-mobile-swiper .swiper-slide {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.admin-dashboard__mobile-image {
	width: 100%;
	height: auto;
	object-fit: contain;
	display: block;
}

.admin-dashboard__mobile-details {
	width: 100%;
}

.admin-dashboard__mobile-details .admin-dashboard__card {
	position: relative !important;
	bottom: auto !important;
	left: auto !important;
	opacity: 1 !important;
	max-width: 100% !important;
}

.admin-dashboard-mobile-pagination {
	position: relative;
	margin-top: 2rem;
	text-align: center;
}

.admin-dashboard-mobile-pagination .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	background-color: var(--color-secondary);
	opacity: 0.3;
}

.admin-dashboard-mobile-pagination .swiper-pagination-bullet-active {
	opacity: 1;
	background-color: var(--color-accent);
}

.system-scroll-btn:hover iconify-icon,
.system-scroll-btn:active iconify-icon {
	color: #fff !important;
	transition: color 0.3s ease;
}

/* ============================================
   Driver App (index) - inline CSS cleanup
   ============================================ */
.driver-app__label {
	margin-bottom: 64px;
}

.driver-app__header-row {
	margin-bottom: 3rem !important;
}

.driver-app__image-card {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
	border: none !important;
	aspect-ratio: 3/4;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding-bottom: 0 !important;
	background-color: transparent;
	min-height: 400px;
}

/* Adjust aspect ratio on larger screens */
@media (min-width: 768px) {
	.driver-app__image-card {
		aspect-ratio: 4/3;
		min-height: auto;
	}
}

.driver-app__image-card--alt {
	background-color: #f2f0ea !important;
}

.driver-app__bg-fill {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	opacity: 0.8;
}

.driver-app__grid {
	width: 300px;
	height: 300px;
	z-index: 0;
	opacity: 0.5;
}

.driver-app__grid--bottom-left {
	bottom: 0;
	left: 0;
}

.driver-app__grid--top-left {
	top: 0;
	left: 0;
}

.driver-app__grid--top-right {
	top: 0;
	right: 0;
}

.driver-app__grid--bottom-right {
	bottom: 0;
	right: 0;
}

.driver-app__phone-img {
	object-fit: cover;
	object-position: top;
	width: 100%;
	height: 100%;
	z-index: 2;
}

/* Reduce image width on larger screens */
@media (min-width: 768px) {
	.driver-app__phone-img {
		width: 80%;
	}
}

.driver-app__bottom-blur {
	bottom: -40px;
	left: 0;
	z-index: 3;
}

.driver-app__details {
	padding-top: 0;
	margin-top: 1rem;
	padding: 1.5rem;
}

/* Remove gap and padding on larger screens */
@media (min-width: 768px) {
	.driver-app__details {
		margin-top: 0;
		padding: 0;
	}
}

/* Mobile first - match admin dashboard icon size */
.driver-app__details-icon {
	width: 48px;
	height: 48px;
	background: linear-gradient(45deg, var(--color-secondary), var(--color-accent));
	margin-top: 0;
	margin-bottom: 2rem;
}

/* Increase icon size on larger screens */
@media (min-width: 768px) {
	.driver-app__details-icon {
		width: 64px;
		height: 64px;
	}
}

/* Increase margin-bottom on larger screens */
@media (min-width: 768px) {
	.driver-app__details-icon {
		margin-bottom: 64px;
	}
}

/* Mobile first - match admin dashboard icon font size */
.driver-app__details-icon-i {
	font-size: 20px;
}

/* Increase icon font size on larger screens */
@media (min-width: 768px) {
	.driver-app__details-icon-i {
		font-size: 28px;
	}
}

/* Reduce icon font size on larger screens */
@media (min-width: 768px) {
	.driver-app__details-icon-i {
		font-size: 20px;
	}
}

.driver-app__details-bottom {
	margin-top: auto;
}

.driver-app__details-title {
	font-size: clamp(1.25rem, 3vw + 0.5rem, 32px);
	margin-bottom: 16px;
}

.driver-app__details-text {
	width: 100%;
}

/* Reduce width on larger screens */
@media (min-width: 768px) {
	.driver-app__details-text {
		width: 75%;
	}
}

.driver-app__details-btn {
	width: fit-content;
	margin-top: 32px;
	margin-bottom: 0;
	z-index: 4;
}

/* ============================================
   CTA Sections (index) - inline CSS cleanup
   ============================================ */
.cta-card {
	border: 1px solid #ffffff;
}

.cta-bg-grid {
	z-index: 0;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

.cta-top-left {
	z-index: 0;
	width: 1200px;
	height: 900px;
	left: 0;
	top: 0;
	transform: translate(-450px, -280px) rotate(25deg);
}

.cta-top-right {
	z-index: 0;
	width: 600px;
	height: 600px;
	right: -150px;
	top: -150px;
}

/* CTA Section 2 specific styles (moved from inline) */
.cta-card-2-bg {
	background: linear-gradient(45deg, var(--color-secondary), var(--color-accent));
}

.cta-traces-white {
	filter: brightness(0) invert(1);
}

.cta-top-right-positioned {
	right: -100px;
	top: -100px;
}

.cta-traces {
	z-index: 1;
	width: auto;
	height: 150px;
	right: -70px;
	top: -75px;
	object-fit: contain;
	position: absolute !important;
	filter: none;
}

/* Scale up traces on larger screens */
@media (min-width: 768px) {
	.cta-traces {
		height: 300px;
		right: -100px;
		top: -150px;
	}
}

.cta-center-blob {
	z-index: 0;
	width: 1200px;
	height: 600px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.cta-bottom-half-circle {
	z-index: 0;
	width: 80%;
	height: 200px;
	left: 50%;
	bottom: -30px;
	transform: translateX(-50%);
}

.cta-content {
	z-index: 1;
}

.cta-icon-row {
	margin-bottom: 64px;
}

.cta-icon-badge {
	width: 64px;
	height: 64px;
	background-color: #f2f0ea;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.cta-icon {
	font-size: 28px;
	background: linear-gradient(45deg, var(--color-secondary), var(--color-accent));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.cta-number {
	font-size: 24px;
	font-weight: 600;
	background: linear-gradient(45deg, var(--color-secondary), var(--color-accent));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.cta-title {
	margin-bottom: 16px;
}

.cta-subtitle {
	margin-bottom: 32px;
}

.sticky-cta-mobile {
	position: fixed;
	bottom: 16px;
	left: 16px;
	right: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 18px;
	border-radius: 999px;
	background: var(--color-accent);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
	z-index: 1060;
}

.sticky-cta-mobile:hover,
.sticky-cta-mobile:focus {
	color: #fff;
	text-decoration: none;
	background: var(--color-accent);
}

/* Contact Form Validation Styles */
/* Removed checkmark - validation happens behind the scenes only */
/* Only invalid state is shown visually */

/* Keep gray border on focus for all contact form inputs (same as message textarea) */
#contactForm .form-control:focus,
#contactForm .form-select:focus {
	border-color: #dee2e6 !important;
	box-shadow: none !important;
}

/* Keep gray border when clicked/active for all contact form inputs */
#contactForm .form-control:active,
#contactForm .form-select:active {
	border-color: #dee2e6 !important;
}

/* Prevent autocomplete from changing input background and border colors */
#contactForm .form-control:-webkit-autofill,
#contactForm .form-control:-webkit-autofill:hover,
#contactForm .form-control:-webkit-autofill:focus,
#contactForm .form-control:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 30px white inset !important;
	box-shadow: 0 0 0 30px white inset !important;
	-webkit-text-fill-color: var(--bs-body-color) !important;
	color: var(--bs-body-color) !important;
	border-color: #dee2e6 !important;
	background-color: white !important;
}

/* Keep gray border when autocomplete value is selected and field is valid */
#contactForm .form-control:-webkit-autofill.is-valid,
#contactForm .form-control:-webkit-autofill.is-valid:hover,
#contactForm .form-control:-webkit-autofill.is-valid:focus,
#contactForm .form-control:-webkit-autofill.is-valid:active {
	border-color: #dee2e6 !important;
	-webkit-text-fill-color: var(--bs-body-color) !important;
	color: var(--bs-body-color) !important;
}

/* Keep gray border when autocomplete value is selected (even without validation) */
#contactForm .form-control:-webkit-autofill:not(.is-invalid) {
	border-color: #dee2e6 !important;
	-webkit-text-fill-color: var(--bs-body-color) !important;
	color: var(--bs-body-color) !important;
}

#contactForm .form-select:-webkit-autofill,
#contactForm .form-select:-webkit-autofill:hover,
#contactForm .form-select:-webkit-autofill:focus,
#contactForm .form-select:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 30px white inset !important;
	box-shadow: 0 0 0 30px white inset !important;
	-webkit-text-fill-color: inherit !important;
	border-color: inherit !important;
	background-color: white !important;
}

/* Contact Success Modal */
.contact-success-modal {
	position: fixed !important;
	top: 20px !important;
	right: -500px !important;
	z-index: 999999 !important; /* Very high z-index to ensure it's above everything */
	transition: none !important; /* Disable transition to prevent interference */
	max-width: 400px !important;
	opacity: 0 !important;
	pointer-events: none !important;
	visibility: hidden !important;
	display: block !important;
}

.contact-success-modal.show {
	right: 20px !important;
	opacity: 1 !important;
	pointer-events: auto !important;
	visibility: visible !important;
	display: block !important;
	transition: none !important; /* Disable transition when showing */
}

.contact-success-modal__content {
	background: #fff;
	border-radius: 12px;
	padding: 20px 24px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	border-left: 4px solid #17C653;
}

.contact-success-modal__icon {
	font-size: 32px;
	color: #17C653;
	flex-shrink: 0;
}

.contact-success-modal__text {
	flex: 1;
}

.contact-success-modal__text strong {
	display: block;
	font-size: 16px;
	color: var(--color-secondary, #2f2f2f);
	margin-bottom: 4px;
}

.contact-success-modal__text p {
	font-size: 14px;
	color: var(--text-color-secondary, #2f2f2f);
	opacity: 0.8;
}

/* Contact Form Submit Button - Active and Loading States */
#contactForm button[type="submit"] {
	padding-left: 2rem;
	padding-right: 2rem;
	border: none !important;
}

#contactForm button[type="submit"]:active {
	opacity: 0.9 !important;
	background-color: var(--color-accent) !important;
}

/* Contact Form Submit Button - Keep visible when disabled/loading */
/* Override Bootstrap's disabled button styles */
#contactForm button[type="submit"]:disabled,
#contactForm button[type="submit"][disabled],
#contactForm button[type="submit"].disabled,
#contactForm .btn:disabled[type="submit"],
#contactForm .btn[type="submit"]:disabled {
	opacity: 0.9 !important;
	cursor: not-allowed !important;
	visibility: visible !important;
	display: inline-flex !important;
	pointer-events: none !important;
	position: relative !important;
	z-index: 1 !important;
	/* Override Bootstrap's disabled opacity variable */
	--bs-btn-disabled-opacity: 0.9 !important;
	/* Keep the accent background color when disabled */
	background-color: var(--color-accent) !important;
	border: none !important;
	color: #fff !important;
}

/* Three-dot loading overlay */
#contactForm button[type="submit"] .loading-dots-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: none;
	align-items: center;
	justify-content: center;
	background-color: rgba(255, 255, 255, 0.5); /* 50% opaque white */
	border-radius: inherit;
	z-index: 10;
}

#contactForm button[type="submit"]:disabled .loading-dots-overlay,
#contactForm button[type="submit"][disabled] .loading-dots-overlay {
	display: flex;
}

.loading-dots {
	display: inline-flex;
	gap: 4px;
	align-items: center;
}

.loading-dots span {
	width: 8px;
	height: 8px;
	background-color: var(--color-accent);
	border-radius: 50%;
	animation: loading-dot 1.4s infinite ease-in-out both;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

.loading-dots span:nth-child(1) {
	animation-delay: -0.32s;
}

.loading-dots span:nth-child(2) {
	animation-delay: -0.16s;
}

.loading-dots span:nth-child(3) {
	animation-delay: 0s;
}

@keyframes loading-dot {
	0%, 80%, 100% {
		transform: scale(0.8);
		opacity: 0.5;
	}
	40% {
		transform: scale(1);
		opacity: 1;
	}
}

/* Ensure parent container of submit button stays visible */
#contactForm .col-12:has(button[type="submit"]) {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* Override GSAP animations on submit button container */
#contactForm .col-12:has(button[type="submit"]):disabled,
#contactForm .col-12:has(button[type="submit"][disabled]) {
	opacity: 1 !important;
	visibility: visible !important;
	display: block !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
	.contact-success-modal {
		right: -100%;
		max-width: calc(100% - 40px);
		top: 20px;
	}

	.contact-success-modal.show {
		right: 20px;
	}
}

#contactForm .form-control.is-invalid,
#contactForm .form-select.is-invalid {
	border-color: #f8285a;
}

#contactForm .invalid-feedback {
	display: none;
	font-size: 0.875rem;
	margin-top: 0.25rem;
	color: #f8285a;
}

/* Only show invalid feedback, never show valid feedback */
#contactForm .was-validated .form-control:invalid ~ .invalid-feedback,
#contactForm .was-validated .form-select:invalid ~ .invalid-feedback,
#contactForm .form-control.is-invalid ~ .invalid-feedback,
#contactForm .form-select.is-invalid ~ .invalid-feedback {
	display: block;
}

/* Hide valid feedback - we don't show valid UI */
#contactForm .was-validated .form-control:valid ~ .valid-feedback,
#contactForm .was-validated .form-select:valid ~ .valid-feedback,
#contactForm .form-control.is-valid ~ .valid-feedback,
#contactForm .form-select.is-valid ~ .valid-feedback {
	display: none !important;
}

/* Hide valid state checkmark icon and prevent green border on all form fields */
#contactForm .form-control.is-valid,
#contactForm .form-select.is-valid,
#contactForm .was-validated .form-control:valid,
#contactForm .was-validated .form-select:valid,
#contactForm .form-control:valid,
#contactForm .form-select:valid {
	border-color: #dee2e6 !important;
	background-image: none !important;
	--bs-form-select-bg-icon: none !important;
	padding-right: 0.75rem !important;
	background-position: right 0.75rem center !important;
}

/* Specifically target form-select valid state to remove checkmark - more aggressive */
#contactForm .form-select.is-valid:not([multiple]):not([size]),
#contactForm .form-select.is-valid:not([multiple])[size="1"],
#contactForm .was-validated .form-select:valid:not([multiple]):not([size]),
#contactForm .was-validated .form-select:valid:not([multiple])[size="1"],
#contactForm .form-select:valid:not([multiple]):not([size]),
#contactForm .form-select:valid:not([multiple])[size="1"],
#contactForm #inquiryType.is-valid,
#contactForm #inquiryType:valid,
#contactForm #inquiryType.was-validated:valid {
	--bs-form-select-bg-icon: none !important;
	background-image: none !important;
	padding-right: 0.75rem !important;
	background-position: right 0.75rem center !important;
	background-size: 16px 12px, 16px 12px !important;
	border-color: #dee2e6 !important;
}

#contactForm .form-label .text-danger {
	font-weight: 600;
}

#contactForm .form-label .text-muted {
	font-weight: 400;
	font-size: 0.875rem;
}

#contactForm .form-text {
	font-size: 0.75rem;
	margin-top: 0.25rem;
}

#contactFormSuccess,
#contactFormError {
	border-radius: 15px;
	padding: 16px;
	margin-top: 16px;
}

#contactFormSuccess {
	background-color: #d4edda;
	border: 1px solid #c3e6cb;
	color: #155724;
}

#contactFormError {
	background-color: #f8d7da;
	border: 1px solid #f5c6cb;
	color: #721c24;
}

.cta-btn {
	border-radius: 30px;
	background-color: var(--color-accent);
	border: none;
}

.cta-btn:hover,
.cta-btn:focus,
.cta-btn:focus-visible {
	background-color: var(--color-accent) !important;
	border-color: var(--color-accent) !important;
	color: #fff !important;
}

.cta-image-wrap {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%) translateX(-50%);
	z-index: 2;
	width: 80%;
	max-width: 600px;
	pointer-events: none;
}

.cta-image {
	width: 100%;
	height: auto;
	object-fit: contain;
	display: block;
}

/* Background image for last CTA section (idSuffix "2") - exclude cards in services grid */
.cta-card:has(.cta-bg-grid[class*="ctaGridEdgeBlur2"]) {
	position: relative;
}

.cta-card:has(.cta-bg-grid[class*="ctaGridEdgeBlur2"])::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: -15%;
	bottom: 0;
	background-image: url('/assets/img/graphics/analytics.webp');
	background-size: 40% auto;
	background-position: bottom right;
	background-repeat: no-repeat;
	opacity: 0.3;
	transform: rotate(15deg);
	z-index: 2;
	pointer-events: none;
}

/* Alternative selector for last CTA section using spaceClass */
.section-space-top.cta-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: -15%;
	bottom: 0;
	background-image: url('/assets/img/graphics/analytics.webp');
	background-size: 40% auto;
	background-position: bottom right;
	background-repeat: no-repeat;
	opacity: 0.3;
	transform: rotate(15deg);
	z-index: 2;
	pointer-events: none;
}

/* Ensure services cards don't get the analytics background */
.services-cta-cards-grid .section-space-top.cta-card::before {
	display: none !important;
}

/* Add padding-bottom to last CTA section container - match "Do you want to see everything" section */
.cta-card:has(.cta-bg-grid[class*="ctaGridEdgeBlur2"]) {
	padding-bottom: clamp(3.75rem, 6.5vw + 1rem, 7.5rem) !important;
}

/* Alternative selector for last CTA section - target by spaceClass */
.section-space-top.cta-card {
	padding-bottom: clamp(3.75rem, 6.5vw + 1rem, 7.5rem) !important;
}

/* Another alternative - target last CTA section by outerClass */
.section-space-lg-y:last-of-type .cta-card {
	padding-bottom: clamp(3.75rem, 6.5vw + 1rem, 7.5rem) !important;
}

/* Explicitly remove analytics background from services CTA cards */
.services-cta-cards-grid .cta-card::before {
	display: none !important;
}

/* Mobile navbar collapse background */
@media (max-width: 991.98px) {
	.navbar-collapse.collapse.show {
		background-color: #0D0E10 !important;
		padding-bottom: 1.25rem;
	}
	
	.navbar-collapse.collapse.show .link.navigation-1__menu-link {
		background-color: #0D0E10 !important;
	}
	
	/* Nav menu text color primary on mobile */
	.navbar-collapse.collapse.show .nav-link,
	.navbar-collapse.collapse.show .nav-link:hover,
	.navbar-collapse.collapse.show .nav-link:focus,
	.navbar-collapse.collapse.show .nav-link:active,
	.navbar-collapse.collapse.show .nav-item.show > .nav-link,
	.navbar-collapse.collapse.show .dropdown-item,
	.navbar-collapse.collapse.show .dropdown-item:hover,
	.navbar-collapse.collapse.show .dropdown-item:focus {
		color: var(--color-primary) !important;
		background-color: transparent !important;
	}
}

/* Contact form submit button - mobile first */
section#contact .btn[type="button"] {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Auto width on larger screens */
@media (min-width: 992px) {
	section#contact .btn[type="button"] {
		width: auto;
	}
}

/* Services CTA Cards - Grid Layout */
.services-cta-cards-grid {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-height: auto;
	padding-block: 0.5rem;
}

/* Increase padding-block on larger screens */
@media (min-width: 768px) {
	.services-cta-cards-grid {
		padding-block: 1rem;
	}
}

.services-cta-card-1,
.services-cta-card-2,
.services-cta-card-3 {
	transition: transform 0.3s ease;
	width: 100%;
}

/* Grid layout on larger screens */
@media (min-width: 768px) {
	.services-cta-cards-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(4, 1fr);
		grid-column-gap: 16px;
		grid-row-gap: 16px;
		min-height: 600px;
	}
	
	.services-cta-card-1 {
		grid-area: 2 / 1 / 5 / 2;
		width: auto;
	}
	
	.services-cta-card-2 {
		grid-area: 1 / 2 / 4 / 3;
		width: auto;
	}
	
	.services-cta-card-3 {
		grid-area: 2 / 3 / 5 / 4;
		width: auto;
	}
}

/* Mobile first - reduced translate-y (less than gap of 0.5rem = 8px) */
.services-cta-card-1:hover,
.services-cta-card-2:hover,
.services-cta-card-3:hover {
	transform: translateY(-4px);
}

/* Increase translate-y on larger screens */
@media (min-width: 768px) {
	.services-cta-card-1:hover,
	.services-cta-card-2:hover,
	.services-cta-card-3:hover {
		transform: translateY(-20px);
	}
}

/* Services CTA Cards - Reduced padding and title size */
.services-cta-cards-grid .cta-card {
	padding: 2rem 1.5rem !important;
	height: 100%;
}

/* Remove section-space classes on mobile for cards in grid */
.services-cta-cards-grid .section-space-sm-y,
.services-cta-cards-grid .section-space-y {
	padding-block-start: 0;
	padding-block-end: 0;
}

/* Restore spacing on larger screens */
@media (min-width: 768px) {
	.services-cta-cards-grid .section-space-sm-y {
		padding-block-start: clamp(1.25rem, 2.1vw + 1rem, 2.5rem);
		padding-block-end: clamp(1.25rem, 2.1vw + 1rem, 2.5rem);
	}
	
	.services-cta-cards-grid .section-space-y {
		padding-block-start: clamp(3.75rem, 6.5vw + 1rem, 7.5rem);
		padding-block-end: clamp(3.75rem, 6.5vw + 1rem, 7.5rem);
	}
}

.services-cta-cards-grid .cta-title {
	font-size: clamp(1.125rem, 2.5vw + 0.5rem, 1.5rem) !important;
	line-height: 1.3;
}

/* Section Badge Container */
.section-badge-container {
	background-color: rgba(0, 0, 0, 0.08);
	border-radius: 6px;
	padding: 0.25rem 0.75rem;
	display: inline-flex;
	margin-bottom: 1.75rem;
}

/* Section Badge Circle - Gradient like hero announcement badge */
.section-badge__circle {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: linear-gradient(45deg, var(--color-secondary), var(--color-accent));
	flex-shrink: 0;
}

/* Section Name Labels - Mobile First */
.section-name {
	margin-bottom: 0;
}

/* Add margin-bottom on tablet and up */
@media (min-width: 768px) {
	.section-badge-container {
		margin-bottom: 2rem;
	}
}

.services-cta-cards-grid .cta-icon-row {
	margin-bottom: 2rem;
}

.services-cta-cards-grid .cta-subtitle {
	margin-bottom: 1.5rem;
}

.services-cta-cards-grid .cta-traces {
	right: -120px !important;
	top: -100px !important;
	height: 150px !important;
}

/* Scale up traces on larger screens */
@media (min-width: 768px) {
	.services-cta-cards-grid .cta-traces {
		right: -200px !important;
		top: -200px !important;
		height: 300px !important;
	}
}


/* ============================================
   Overview Section (used in index-2)
   ============================================ */
.overview-section {
	position: relative;
	z-index: 1;
	margin-top: -5rem;
	overflow: hidden;
}

.overview-section-content {
	background-color: #2f2f2f;
	border-radius: 30px;
	padding: 3rem 4rem;
	padding-top: 124px;
	position: relative;
	z-index: 1;
	overflow: hidden;
}

.overview-section-content::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 300px;
	height: 300px;
	background: var(--color-accent);
	border-radius: 50%;
	filter: blur(80px);
	opacity: 0.6;
	z-index: 0;
	pointer-events: none;
	transform: translate(-20%, -50%);
}

.overview-items {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	justify-content: center;
	align-items: center;
}

.overview-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: #e0e0e0;
	font-size: 1rem;
}

.overview-item i {
	font-size: 1.25rem;
	color: #e0e0e0;
}

/* ============================================
   Overview Feature Grid
   ============================================ */
.overview-feature-grid {
	display: grid;
	grid-template-columns: 2fr 3fr;
	gap: 6rem;
	margin-top: 4rem;
	align-items: start;
}

@media (max-width: 991px) {
	.overview-feature-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

/* ============================================
   Home-6 Hero Grid Background
   ============================================ */
.hero-7 {
	position: relative;
	background-color: var(--color-primary);
	color: #2f2f2f;
	background-image:
		linear-gradient(rgba(120, 120, 120, 0.08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(120, 120, 120, 0.08) 1px, transparent 1px);
	background-repeat: repeat;
	background-size: 28px 28px;
	overflow: hidden;
	min-height: auto;
}

/* Min-height 100vh only on index page (has hero-7__img-container--raised) */
.hero-7:has(.hero-7__img-container--raised) {
	min-height: 100vh;
}

/* Remove min-height on tablets and larger screens for index page */
@media (min-width: 768px) {
	.hero-7:has(.hero-7__img-container--raised) {
		min-height: auto;
	}
}

/* Darker ticker line strokes */
.cta-7__line path {
	stroke: rgba(47, 47, 47, 0.65) !important;
	stroke-opacity: 0.75 !important;
}

/* Ensure Get Started button in hero-7 has white text */
.hero-7 .btn-accent,
.hero-7 .btn-accent span,
.hero-7 .btn-accent iconify-icon,
.hero-7 .btn-accent i {
	color: #fff !important;
}

.hero-7 h1,
.hero-7 h2,
.hero-7 h3,
.hero-7 h4,
.hero-7 h5,
.hero-7 h6,
.hero-7 p,
.hero-7 span {
	color: #2f2f2f !important;
}

.hero-announcement-badge {
	background-color: rgba(0, 0, 0, 0.08) !important;
	border-radius: 12px !important;
}

.hero-announcement-badge .badge {
	background-color: var(--color-accent) !important;
	color: white !important;
}

.hero-7::before,
.hero-7::after {
	content: "";
	position: absolute;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	filter: blur(120px);
	pointer-events: none;
	z-index: 0;
}
    
.hero-7::before {
	top: -120px;
	left: -180px;
	background: rgba(170, 135, 23, 0.28); /* primary text color */
}

.hero-7::after {
	inset: 0;
	width: auto;
	height: auto;
	background:
		radial-gradient(520px 520px at 85% 55%, rgba(170, 135, 23, 0.22) 0%, rgba(170, 135, 23, 0) 60%),
		radial-gradient(900px 360px at 50% 100%, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 70%);
	filter: blur(120px);
}

.hero-7__img-container::after {
	background-color: rgba(255, 128, 88, 0.26) !important; /* accent color, darker tint */
	filter: blur(200px);
}

.hero-traces {
	position: absolute;
	inset: 0;
	width: 100%;
	height: auto;
	opacity: 0;
	pointer-events: none;
	z-index: -1;
	object-fit: cover;
	object-position: center;
	animation: hero-traces-fade-in 1.2s ease forwards;
}

.hero-traces--top-right {
	inset: auto;
	top: -120px;
	right: -60px;
	width: 360px;
	height: auto;
	transform: translate(10%, 0%) rotate(180deg);
	animation-delay: 2.8s;
}

.hero-traces--bottom-left {
	inset: auto;
	bottom: 0;
	left: 0;
	width: 420px;
	height: auto;
	transform: translate(-20%, 15%);
	animation-delay: 3.1s;
}

@keyframes hero-traces-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 0.55;
	}
}

/* Animate dashed lines in traces SVG sequentially */
.hero-traces object svg path[stroke-dasharray],
.hero-traces object svg path[stroke-dasharray] {
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	animation: draw-dash 2s ease forwards;
}

.hero-traces object svg path[stroke-dasharray]:nth-child(1) {
	animation-delay: 0.1s;
}

.hero-traces object svg path[stroke-dasharray]:nth-child(2) {
	animation-delay: 0.3s;
}

.hero-traces object svg path[stroke-dasharray]:nth-child(3) {
	animation-delay: 0.5s;
}

.hero-traces object svg path[stroke-dasharray]:nth-child(4) {
	animation-delay: 0.7s;
}

.hero-traces object svg path[stroke-dasharray]:nth-child(5) {
	animation-delay: 0.9s;
}

.hero-traces object svg path[stroke-dasharray]:nth-child(n+6) {
	animation-delay: 1.1s;
}

@keyframes draw-dash {
	to {
		stroke-dashoffset: 0;
	}
}

.overview-images-grid {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.overview-main-image {
	border-radius: 30px;
	overflow: hidden;
}

.overview-main-image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 30px;
}

.overview-gallery {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.overview-ship-image {
	flex: 1;
	max-width: 400px;
	min-height: 120px;
}

.overview-secondary-image {
	width: 100%;
	height: 120px;
	display: block;
	border-radius: 12px;
	filter: grayscale(100%);
	object-fit: cover;
}

.overview-asterisk-box {
	width: 80px;
	height: 80px;
	background-color: #f7f5ef;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.asterisk-symbol {
	font-size: 2rem;
	color: var(--color-accent);
	font-weight: 700;
	line-height: 1;
}

/* Content Grid */
.overview-content-grid {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding-top: 1rem;
}

.overview-feature-item {
	margin-bottom: 3rem;
}

.overview-feature-item:last-of-type {
	margin-bottom: 0;
}

.overview-feature-heading {
	font-size: 3rem;
	font-weight: 700;
	line-height: 1.2;
	color: #ffffff;
	margin-bottom: 0;
	font-family: var(--font-cabinet-grotesk);
}

.text-accent {
	color: var(--color-accent);
}

.overview-feature-text {
	color: #e0e0e0;
	font-size: 1rem;
	line-height: 1.6;
	margin-bottom: 0;
	margin-top: 0.75rem;
	width: 75%;
	max-width: 720px;
}

.overview-feature-buttons {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 1.5rem;
}

.btn-get-quote {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: #ffffff;
	padding: 0.75rem 2rem;
	border-radius: 8px;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.3s ease;
}

.btn-get-quote:hover {
	background-color: #e66d42;
	border-color: #e66d42;
	color: #ffffff;
	transform: translateY(-2px);
}

.btn-learn-more {
	background-color: transparent;
	border: 1px solid #ffffff;
	color: #ffffff;
	padding: 0.75rem 2rem;
	border-radius: 8px;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.3s ease;
}

.btn-learn-more:hover {
	background-color: rgba(255, 255, 255, 0.1);
	color: #ffffff;
	transform: translateY(-2px);
}

/* Logo sizing */
.primary-header .logo img,
.primary-header .logo__img,
.navbar .logo img,
.navbar .logo__img,
.logo img,
.logo__img {
	height: 64px !important;
	max-height: none !important;
	width: auto !important;
	display: block;
}

.logo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* Mobile first - more padding on mobile */
.primary-header {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}

/* Reduce padding on larger screens */
@media (min-width: 768px) {
	.primary-header {
		padding-top: 12px;
		padding-bottom: 12px;
	}
}

/* Show only one logo per theme */
.logo__img--dark {
	display: none !important;
}

[data-bs-theme="dark"] .logo__img--light {
	display: none !important;
}

[data-bs-theme="dark"] .logo__img--dark {
	display: block !important;
}

/* Header link colors (default: dark text, scrolled: primary) */
.primary-header,
.primary-header .navbar-nav .nav-link,
.primary-header .nav-link,
.primary-header .dropdown-menu,
.primary-header .dropdown-item,
.primary-header .btn,
.primary-header .navbar-toggler {
	color: #2f2f2f !important;
}

.primary-header .navbar-nav .nav-link:hover,
.primary-header .navbar-nav .nav-link:focus,
.primary-header .nav-link:hover,
.primary-header .nav-link:focus,
.primary-header .dropdown-item:hover,
.primary-header .dropdown-item:focus {
	color: #1f1f1f !important;
}

.primary-header.scrolled .navbar-nav .nav-link,
.primary-header.scrolled .nav-link,
.primary-header.scrolled .dropdown-menu,
.primary-header.scrolled .dropdown-item,
.primary-header.scrolled .btn,
.primary-header.scrolled .navbar-toggler {
	color: var(--color-primary) !important;
}

.primary-header.scrolled .navbar-nav .nav-link:hover,
.primary-header.scrolled .navbar-nav .nav-link:focus,
.primary-header.scrolled .nav-link:hover,
.primary-header.scrolled .nav-link:focus,
.primary-header.scrolled .dropdown-item:hover,
.primary-header.scrolled .dropdown-item:focus {
	color: #f1e9c5 !important;
}

/* Nav text color when header is crossed (scrolled) */
.primary-header-crossed .primary-header .navbar-nav .nav-link,
.primary-header-crossed .primary-header .nav-link,
.primary-header-crossed .primary-header .dropdown-menu,
.primary-header-crossed .primary-header .dropdown-item,
.primary-header-crossed .primary-header .btn,
.primary-header-crossed .primary-header .navbar-toggler {
	color: var(--color-primary) !important;
}

.primary-header-crossed .primary-header .navbar-nav .nav-link:hover,
.primary-header-crossed .primary-header .navbar-nav .nav-link:focus,
.primary-header-crossed .primary-header .nav-link:hover,
.primary-header-crossed .primary-header .nav-link:focus,
.primary-header-crossed .primary-header .dropdown-item:hover,
.primary-header-crossed .primary-header .dropdown-item:focus {
	color: #f1e9c5 !important;
}

/* Header background when scrolled */
.primary-header.scrolled,
.primary-header.scrolled .navbar {
	background-color: var(--color-secondary) !important;
}

/* Override header background when scrolled (using primary-header-crossed class) */
.primary-header-crossed .primary-header-crossed\:full-dark.primary-header--dark,
.primary-header-crossed .primary-header-crossed\:full-dark.primary-header--dark .navbar,
.primary-header-crossed .primary-header-crossed\:full-dark.primary-header--dark.primary-header--boxed>.container,
body.primary-header-crossed .primary-header--dark.primary-header--boxed>.container {
	background-color: var(--color-secondary) !important;
}

/* More specific override for boxed header container when scrolled */
body.primary-header-crossed .primary-header--dark.primary-header--boxed,
body.primary-header-crossed .primary-header--dark.primary-header--boxed > .container,
body.primary-header-crossed .primary-header--dark.primary-header--boxed > .container .navbar,
body.primary-header-crossed .primary-header--dark.primary-header--boxed .navbar,
.primary-header-crossed .primary-header--dark.primary-header--boxed,
.primary-header-crossed .primary-header--dark.primary-header--boxed > .container,
.primary-header-crossed .primary-header--dark.primary-header--boxed > .container .navbar,
.primary-header-crossed .primary-header--dark.primary-header--boxed .navbar {
	background-color: var(--color-secondary) !important;
}

/* Header accent button */
.btn-accent {
	color: #fff !important;
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: #fff;
}

.btn-accent:hover,
.btn-accent:focus {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: #fff;
}

/* ============================================
   Accent primary button hover: diamond shine + sparkle
   ============================================ */
:is(.btn-accent, .cta-btn, .btn-get-quote, .track-shipments-modal .btn) {
	position: relative;
	overflow: visible; /* allow sparkle to overflow outside button */
	isolation: isolate; /* keep pseudo-elements above bg, below text */
}

/* Diagonal shine sweep (left -> right) */
:is(.btn-accent, .cta-btn, .btn-get-quote, .track-shipments-modal .btn)::before {
	content: "";
	position: absolute;
	inset: 0; /* keep shine within button bounds; sparkle can overflow independently */
	border-radius: inherit;
	background: linear-gradient(
		135deg,
		transparent 25%,
		rgba(255, 255, 255, 0.12) 40%,
		rgba(255, 255, 255, 0.55) 50%,
		rgba(255, 255, 255, 0.12) 60%,
		transparent 75%
	);
	background-size: 220% 220%;
	background-position: 0% 100%;
	background-repeat: no-repeat;
	opacity: 0;
	z-index: 0;
	pointer-events: none;
}

:is(.btn-accent, .cta-btn, .btn-get-quote, .track-shipments-modal .btn):hover::before,
:is(.btn-accent, .cta-btn, .btn-get-quote, .track-shipments-modal .btn):focus-visible::before {
	animation: btn-diamond-shine 550ms ease forwards;
}

@keyframes btn-diamond-shine {
	from {
		/* start off the bottom-right so the shine enters */
		opacity: 0;
		background-position: 120% 120%;
	}
	25% {
		opacity: 1;
	}
	75% {
		opacity: 1;
	}
	to {
		/* exit past the top-left so it goes all the way out */
		opacity: 0;
		background-position: -20% -20%;
	}
}

/* Sparkle icon (top-right) */
:is(.btn-accent, .cta-btn, .btn-get-quote, .track-shipments-modal .btn)::after {
	content: "";
	position: absolute;
	top: -4px;
	right: -4px;
	width: 24px;
	height: 24px;
	background-color: rgba(255, 255, 255, 0.95);
	opacity: 0;
	transform: scale(0.6) rotate(-12deg);
	z-index: 0;
	pointer-events: none;

	/* "sparkles" SVG (similar feel to bi-stars) */
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20fill='black'%20d='M8%200l.78%204.12L13%206l-4.22%201.88L8%2012l-.78-4.12L3%206l4.22-1.88L8%200zM2.25%209.5l.38%202l2.05.9-2.05.9-.38%202-.38-2-2.05-.9%202.05-.9.38-2zm11.5%200l.38%202%202.05.9-2.05.9-.38%202-.38-2-2.05-.9%202.05-.9.38-2z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20fill='black'%20d='M8%200l.78%204.12L13%206l-4.22%201.88L8%2012l-.78-4.12L3%206l4.22-1.88L8%200zM2.25%209.5l.38%202l2.05.9-2.05.9-.38%202-.38-2-2.05-.9%202.05-.9.38-2zm11.5%200l.38%202%202.05.9-2.05.9-.38%202-.38-2-2.05-.9%202.05-.9.38-2z'/%3E%3C/svg%3E") no-repeat center / contain;
}

:is(.btn-accent, .cta-btn, .btn-get-quote, .track-shipments-modal .btn):hover::after,
:is(.btn-accent, .cta-btn, .btn-get-quote, .track-shipments-modal .btn):focus-visible::after {
	opacity: 1;
	animation: btn-sparkle-pop 550ms ease forwards;
}

@keyframes btn-sparkle-pop {
	0% {
		opacity: 0;
		transform: scale(0.65) rotate(-12deg);
	}
	30% {
		opacity: 1;
		transform: scale(1.1) rotate(0deg);
	}
	100% {
		opacity: 0.9;
		transform: scale(0.95) rotate(0deg);
	}
}

/* Ensure actual button content stays above effects */
:is(.btn-accent, .cta-btn, .btn-get-quote, .track-shipments-modal .btn) > * {
	position: relative;
	z-index: 1;
}

/* Services CTA Interactive Cards */
.services-cta-results {
	display: flex;
	width: 100%;
	padding: 0;
	margin: 0;
	list-style-type: none;
	gap: 0;
	justify-content: center;
	height: 50vmin;
}

.services-cta-result {
	padding: 0;
	flex: 1;
	transition: flex 0.5s ease, filter 0.5s ease;
	max-width: none;
	height: 100%;
}

.services-cta-link {
	display: block;
	text-decoration: none;
	outline-offset: 4px;
	height: 100%;
}

.services-cta-card {
	min-height: 400px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	transition: opacity 0.5s ease;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 1rem !important;
	height: 100%;
	width: 100%;
}

.services-cta-card--ondemand {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
	background-color: var(--color-secondary, #171717);
}

.services-cta-card--whitelabel {
	border-radius: 0 !important;
	background-color: #f2f0ea;
}

.services-cta-card--custom {
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
	background-color: var(--color-accent, #ff8058);
}

.services-cta-result:is(:hover, :focus-within) {
	flex: 8;
}

.services-cta-result:is(:hover, :focus-within) .services-cta-card {
	border-radius: 0 !important;
	min-height: auto;
	height: 100%;
	aspect-ratio: 1 / 1;
	width: 100%;
}

.services-cta-card--ondemand .services-cta-card__content h3,
.services-cta-card--ondemand .services-cta-card__content p {
	color: #fff;
}

.services-cta-card--ondemand .services-cta-card__content .text-color-secondary {
	color: #fff !important;
}

.services-cta-card--ondemand .services-cta-card__content .text-color-secondary.text-opacity-70 {
	color: rgba(255, 255, 255, 0.7) !important;
}

.services-cta-card--ondemand .card-icon-container {
	background-color: rgba(255, 255, 255, 0.1);
}

.services-cta-card--ondemand .card-icon-container i {
	color: #fff !important;
}

.services-cta-card--ondemand .btn-outline-secondary {
	border-color: #fff;
	color: #fff;
}

.services-cta-card--ondemand .btn-outline-secondary:hover {
	background-color: #fff;
	color: var(--color-secondary, #171717);
}


.services-cta-card--custom .services-cta-card__content h3,
.services-cta-card--custom .services-cta-card__content p {
	color: #fff;
}

.services-cta-card--custom .services-cta-card__content .text-color-secondary {
	color: #fff !important;
}

.services-cta-card--custom .services-cta-card__content .text-color-secondary.text-opacity-70 {
	color: rgba(255, 255, 255, 0.7) !important;
}

.services-cta-card--custom .card-icon-container {
	background-color: rgba(255, 255, 255, 0.2);
}

.services-cta-card--custom .card-icon-container i {
	color: #fff !important;
}

.services-cta-card--custom .btn-outline-secondary {
	border-color: #fff;
	color: #fff;
}

.services-cta-card--custom .btn-outline-secondary:hover {
	background-color: #fff;
	color: var(--color-accent, #ff8058);
}

.services-cta-card__number-circle {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.2);
	transition: all 0.5s ease;
}

.services-cta-card--whitelabel .services-cta-card__number-circle {
	background-color: rgba(23, 23, 23, 0.1);
}

.services-cta-card__number {
	font-size: 1.5rem;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.9);
	transition: all 0.5s ease;
}

.services-cta-card--whitelabel .services-cta-card__number {
	color: rgba(23, 23, 23, 0.7);
}

.services-cta-card__content {
	opacity: 1;
	transition: opacity 0.5s ease;
	width: 100%;
	position: relative;
}



.services-cta-result:is(:hover, :focus-within) {
	z-index: 10;
}

@media (max-width: 768px) {
	.services-cta-results {
		flex-direction: column;
		gap: 16px;
	}
	
	.services-cta-result {
		flex: 1;
	}
	
	.services-cta-card__content {
		opacity: 1;
	}
	
	.services-cta-card__number {
		opacity: 0;
	}
}

/* OnDemand CTA button with accent hover, shine, and sparkle */
.ondemand-cta-btn {
	position: relative;
	overflow: visible;
	isolation: isolate;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.ondemand-cta-btn:hover,
.ondemand-cta-btn:focus {
	background-color: var(--color-accent, #ff8058) !important;
	border-color: var(--color-accent, #ff8058) !important;
	color: #fff !important;
}

.ondemand-cta-btn:hover iconify-icon,
.ondemand-cta-btn:focus iconify-icon {
	color: #fff !important;
}

/* Diagonal shine sweep */
.ondemand-cta-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(
		135deg,
		transparent 25%,
		rgba(255, 255, 255, 0.12) 40%,
		rgba(255, 255, 255, 0.55) 50%,
		rgba(255, 255, 255, 0.12) 60%,
		transparent 75%
	);
	background-size: 220% 220%;
	background-position: 0% 100%;
	background-repeat: no-repeat;
	opacity: 0;
	z-index: 0;
	pointer-events: none;
}

.ondemand-cta-btn:hover::before,
.ondemand-cta-btn:focus-visible::before {
	animation: btn-diamond-shine 550ms ease forwards;
}

/* Sparkle icon (top-right) */
.ondemand-cta-btn::after {
	content: "";
	position: absolute;
	top: -4px;
	right: -4px;
	width: 24px;
	height: 24px;
	background-color: rgba(255, 255, 255, 0.95);
	opacity: 0;
	transform: scale(0.6) rotate(-12deg);
	z-index: 0;
	pointer-events: none;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20fill='black'%20d='M8%200l.78%204.12L13%206l-4.22%201.88L8%2012l-.78-4.12L3%206l4.22-1.88L8%200zM2.25%209.5l.38%202l2.05.9-2.05.9-.38%202-.38-2-2.05-.9%202.05-.9.38-2zm11.5%200l.38%202%202.05.9-2.05.9-.38%202-.38-2-2.05-.9%202.05-.9.38-2z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20fill='black'%20d='M8%200l.78%204.12L13%206l-4.22%201.88L8%2012l-.78-4.12L3%206l4.22-1.88L8%200zM2.25%209.5l.38%202l2.05.9-2.05.9-.38%202-.38-2-2.05-.9%202.05-.9.38-2zm11.5%200l.38%202%202.05.9-2.05.9-.38%202-.38-2-2.05-.9%202.05-.9.38-2z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.ondemand-cta-btn:hover::after,
.ondemand-cta-btn:focus-visible::after {
	opacity: 1;
	animation: btn-sparkle-pop 550ms ease forwards;
}

.ondemand-cta-btn > * {
	position: relative;
	z-index: 1;
}

/* Outline buttons (with border + arrow icon) hover should use accent color */
.how-it-works-btn {
	border-color: var(--color-secondary);
	color: var(--color-secondary);
	transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
	position: relative;
	overflow: visible;
	isolation: isolate;
}

/* When card is hovered, button gets white bg, secondary text, and no border */
.why-snapx-card:hover .how-it-works-btn,
.why-snapx-card.is-active .how-it-works-btn {
	background-color: #fff !important;
	color: var(--color-secondary) !important;
	border-color: transparent !important;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.why-snapx-card:hover .how-it-works-btn iconify-icon,
.why-snapx-card:hover .how-it-works-btn i,
.why-snapx-card.is-active .how-it-works-btn iconify-icon,
.why-snapx-card.is-active .how-it-works-btn i {
	color: var(--color-secondary) !important;
	transition: color 0.3s ease;
}

/* When button itself is hovered, get secondary bg, primary text, shine and sparkle */
.how-it-works-btn:hover,
.how-it-works-btn:focus,
.how-it-works-btn:focus-visible {
	border-color: var(--color-secondary) !important;
	color: var(--color-primary) !important;
	background-color: var(--color-secondary) !important;
}

/* Ensure iconify/bi icons inside inherit the hover color */
.how-it-works-btn:hover iconify-icon,
.how-it-works-btn:focus iconify-icon,
.how-it-works-btn:focus-visible iconify-icon,
.how-it-works-btn:hover i,
.how-it-works-btn:focus i,
.how-it-works-btn:focus-visible i {
	color: var(--color-primary) !important;
	transition: color 0.3s ease;
}

/* Diagonal shine sweep for how-it-works-btn on hover */
.how-it-works-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(
		135deg,
		transparent 25%,
		rgba(255, 255, 255, 0.12) 40%,
		rgba(255, 255, 255, 0.55) 50%,
		rgba(255, 255, 255, 0.12) 60%,
		transparent 75%
	);
	background-size: 220% 220%;
	background-position: 0% 100%;
	background-repeat: no-repeat;
	opacity: 0;
	z-index: 0;
	pointer-events: none;
}

.how-it-works-btn:hover::before,
.how-it-works-btn:focus-visible::before {
	animation: btn-diamond-shine 550ms ease forwards;
}

/* Sparkle icon (top-right) for how-it-works-btn on hover */
.how-it-works-btn::after {
	content: "";
	position: absolute;
	top: -4px;
	right: -4px;
	width: 24px;
	height: 24px;
	background-color: rgba(255, 255, 255, 0.95);
	opacity: 0;
	transform: scale(0.6) rotate(-12deg);
	z-index: 0;
	pointer-events: none;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20fill='black'%20d='M8%200l.78%204.12L13%206l-4.22%201.88L8%2012l-.78-4.12L3%206l4.22-1.88L8%200zM2.25%209.5l.38%202l2.05.9-2.05.9-.38%202-.38-2-2.05-.9%202.05-.9.38-2zm11.5%200l.38%202%202.05.9-2.05.9-.38%202-.38-2-2.05-.9%202.05-.9.38-2z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20fill='black'%20d='M8%200l.78%204.12L13%206l-4.22%201.88L8%2012l-.78-4.12L3%206l4.22-1.88L8%200zM2.25%209.5l.38%202l2.05.9-2.05.9-.38%202-.38-2-2.05-.9%202.05-.9.38-2zm11.5%200l.38%202%202.05.9-2.05.9-.38%202-.38-2-2.05-.9%202.05-.9.38-2z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.how-it-works-btn:hover::after,
.how-it-works-btn:focus-visible::after {
	opacity: 1;
	animation: btn-sparkle-pop 550ms ease forwards;
}

/* Ensure actual button content stays above effects */
.how-it-works-btn > * {
	position: relative;
	z-index: 1;
}

@media (max-width: 768px) {
	.overview-feature-heading {
		font-size: 2rem;
	}

	.overview-feature-buttons {
		flex-direction: column;
	}

	.btn-get-quote,
	.btn-learn-more {
		width: 100%;
		text-align: center;
	}

	.overview-feature-text {
		width: 100%;
		max-width: none;
	}
}

/* Logistics Section */
.logistics-row {
	display: flex;
	align-items: center;
	gap: 4rem;
	flex-wrap: nowrap;
}

.logistics-left {
	flex: 0 0 50%;
	max-width: 50%;
}

.logistics-right {
	flex: 0 0 50%;
	max-width: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

@media (max-width: 991px) {
	.logistics-row {
		flex-direction: column;
	}
	
	.logistics-left,
	.logistics-right {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/* Track Shipments Section */
.track-shipments-placeholder {
	width: 100%;
	height: 500px;
	background-color: var(--color-secondary);
	border-radius: 40px;
	position: relative;
	overflow: hidden;
	padding: 3rem;
	display: flex;
	align-items: center;
}

.track-shipments-placeholder::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url('/assets/img/graphics/overview-image-2.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	filter: grayscale(100%);
	z-index: 0;
}

.track-shipments-placeholder::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color-secondary);
	opacity: 0.8;
	z-index: 0;
}

.track-shipments-content {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 3rem;
	position: relative;
	z-index: 1;
}

.track-shipments-left {
	flex: 1;
	max-width: calc(100% - 450px);
	padding-left: 5%;
	padding-block: 32px;
}

.track-shipments-heading {
	flex: 1;
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.2;
}

.track-shipments-modal {
	background-color: white;
	border-radius: 20px;
	padding: 2.5rem;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
	flex: 0 0 400px;
	max-width: 400px;
}

@media (max-width: 991px) {
	.track-shipments-content {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.track-shipments-left {
		max-width: 100%;
		margin-bottom: 2rem;
	}
	
	.track-shipments-modal {
		flex: 0 0 100%;
		max-width: 100%;
		width: 100%;
	}
}

/* Shipping Services Section */
.shipping-services-grid {
	display: flex;
	gap: 2rem;
	flex-wrap: wrap;
}

.shipping-service-card {
	flex: 1;
	min-width: 300px;
	display: flex;
	flex-direction: column;
}

.shipping-service-image {
	width: 100%;
	margin-bottom: 1rem;
}

.shipping-service-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 1rem;
}

.shipping-service-text {
	font-size: 1.25rem;
	font-weight: 600;
}

.shipping-service-arrow {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-secondary);
	border-radius: 50%;
	font-size: 1.25rem;
}

@media (max-width: 991px) {
	.shipping-services-grid {
		flex-direction: column;
	}
	
	.shipping-service-card {
		min-width: 100%;
	}
}

.logistics-image-placeholder {
	width: 70%;
	height: 500px;
	background-color: var(--color-secondary);
	border-radius: 50px;
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.logistics-image-placeholder::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 200px;
	height: 200px;
	background: radial-gradient(circle, rgba(255, 128, 88, 0.5) 0%, rgba(255, 128, 88, 0) 70%);
	filter: blur(60px);
	z-index: 2;
	pointer-events: none;
}

.logistics-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.logistics-list-item {
	padding-bottom: 1.5rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px dashed rgba(47, 47, 47, 0.3);
}

.logistics-list-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}

.logistics-icon-container {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(246, 92, 52, 0.2);
	border-radius: 12px;
	color: var(--color-accent);
	font-size: 1.25rem;
	flex-shrink: 0;
}

/* Text Color Utilities */
.text-color-secondary {
	color: var(--color-secondary) !important;
}

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

.text-opacity-80 {
	opacity: 0.8;
}

/* Features Grid Section */
.features-grid-section h3 {
	color: var(--color-secondary);
}

.features-grid-content p {
	color: var(--color-secondary);
}

.features-grid-content p.text-opacity-80 {
	opacity: 0.8;
}

.features-grid-div2 span {
	color: var(--color-secondary);
}

.features-grid-div2 .rounded-circle {
	width: 40px;
	height: 40px;
	background-color: var(--color-secondary);
}

.features-grid-div2 .rounded-circle i {
	color: var(--color-primary);
}

/* Logistics Section */
.logistics-left h2,
.logistics-left p,
.logistics-list-item span {
	color: var(--color-secondary);
}

.logistics-left p,
.logistics-list-item span {
	opacity: 0.8;
}

/* Track Shipments Section */
.track-shipments-left h2,
.track-shipments-left p,
.track-shipments-left ul,
.track-shipments-left div {
	color: var(--color-primary);
}

.track-shipments-left p,
.track-shipments-left li {
	opacity: 0.8;
}

.track-shipments-modal h4 {
	color: var(--color-secondary);
}

.track-shipments-modal .form-control {
	background-color: #f5f5f5;
	border: none;
	border-radius: 10px;
	padding: 0.75rem 1rem;
	text-align: left;
	color: var(--color-secondary);
}

.track-shipments-modal .form-control::placeholder {
	color: rgba(47, 47, 47, 0.7);
	opacity: 1;
}

.track-shipments-modal .btn {
	background-color: var(--color-accent);
	color: white;
	border-radius: 10px;
	padding: 0.75rem;
	text-align: center;
}

/* Pricing Stats Section */
.pricing-stats {
	display: flex;
	flex-direction: row;
	gap: 2rem;
}

.pricing-stat-item {
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
	width: fit-content;
}

.pricing-stat-value {
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1;
	color: var(--color-primary);
	margin-bottom: 0.5rem;
	font-family: var(--font-cabinet-grotesk);
}

.pricing-stat-label {
	font-size: 1rem;
	color: var(--color-primary);
	margin-bottom: 0.75rem;
}

.pricing-stat-line {
	width: 60px;
	height: 1px;
	background-color: rgba(247, 245, 239, 0.3);
	margin-top: 0.5rem;
}

/* Shipping Services Section */
.shipping-services-section h2 {
	color: var(--color-secondary);
}

.shipping-service-image {
	background-color: var(--color-secondary);
	border-radius: 50px;
	height: 400px;
	position: relative;
	overflow: hidden;
}

.shipping-service-text {
	color: var(--color-secondary);
}

.shipping-service-arrow i {
	color: var(--color-primary);
}

/* Feature Cards Hover Shadow */
.gradient-border.bg-white {
	transition: box-shadow 0.3s ease;
}

.gradient-border.bg-white:hover {
	box-shadow: 0 4px 12px rgba(47, 47, 47, 0.06) !important;
}

/* ============================================
   "Why Businesses" feature cards hover gradient (slide from top)
   ============================================ */
.feature-card {
	position: relative;
	overflow: hidden;
}

/* Sliding gradient overlay: 90% accent -> 10% white */
.feature-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent) 80%, #ffffff 100%);
	transform: translateY(-102%);
	transition: transform 520ms ease;
	z-index: 0;
	pointer-events: none;
}

.feature-card:hover::before,
.feature-card:focus-within::before,
.feature-card.is-active::before {
	transform: translateY(0%);
}

/* Keep card content above the overlay */
.feature-card > * {
	position: relative;
	z-index: 1;
}

/* Icon treatment on hover: white bg, secondary icon */
.feature-card .card-icon-container {
	transition: background-color 320ms ease, color 320ms ease;
}

.feature-card:hover .card-icon-container,
.feature-card:focus-within .card-icon-container,
.feature-card.is-active .card-icon-container {
	background: #ffffff !important;
}

.feature-card:hover .card-icon-container i,
.feature-card:focus-within .card-icon-container i,
.feature-card.is-active .card-icon-container i {
	color: var(--color-secondary) !important;
}

/* ============================================
   Testimonials (index) - data driven cards
   ============================================ */
.testimonial-card {
	background-color: #f2f0ea !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.testimonial-badge {
	background: linear-gradient(135deg, var(--color-secondary), var(--color-accent));
}

/* ============================================
   Testimonials (index) - inline CSS cleanup
   ============================================ */
.testimonial__label {
	margin-bottom: 64px;
}

.testimonial__header-row {
	margin-bottom: 3rem !important;
}

/* ============================================
   Ondemand service page
   ============================================ */
.ondemand-doc__divider {
	height: 1px;
	background: rgba(47, 47, 47, 0.12);
	margin: 32px 0;
}

.ondemand-doc__card {
	background-color: #f2f0ea;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.ondemand-doc__cta {
	background-color: #f2f0ea;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Service Rates Cards */
.ondemand-rates-cards {
	margin-top: 24px;
}

.ondemand-rate-card {
	position: relative;
	border-radius: 16px;
	padding: 32px 24px;
	min-height: 280px;
	display: flex;
	flex-direction: column;
}

.ondemand-rate-card--primary {
	background: var(--color-accent, #ff8058);
	color: #ffffff;
}

.ondemand-rate-card--secondary {
	background: var(--color-secondary, #171717);
	color: #ffffff;
}

.ondemand-rate-card--tertiary {
	background: #f2f0ea;
	color: var(--color-secondary, #171717);
}

.ondemand-rate-card__icon {
	position: absolute;
	top: 24px;
	left: 24px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	z-index: 1;
}

.ondemand-rate-card--primary .ondemand-rate-card__icon {
	background: rgba(0, 0, 0, 0.2);
	color: #ffffff;
}

.ondemand-rate-card--secondary .ondemand-rate-card__icon {
	background: var(--color-accent, #ff8058);
	color: #ffffff;
}

.ondemand-rate-card--tertiary .ondemand-rate-card__icon {
	background: var(--color-accent, #ff8058);
	color: #ffffff;
}

.ondemand-rate-card__value {
	position: relative;
	margin-top: 64px;
	margin-bottom: 16px;
	line-height: 1;
}

.ondemand-rate-card__value-wrapper {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.ondemand-rate-card__value-main {
	font-size: 5.5rem;
	font-weight: 700;
	line-height: 1;
	display: inline-block;
}

.ondemand-rate-card__value-label {
	font-size: 1.25rem;
	font-weight: 500;
	display: inline-block;
	opacity: 0.9;
	line-height: 1.2;
	vertical-align: top;
	margin-top: 8px;
}

.ondemand-rate-card__value-unit {
	font-size: 42px;
	vertical-align: top;
	line-height: 1;
}

.ondemand-rate-card__description {
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
	margin-top: auto;
	opacity: 0.9;
}

.ondemand-rate-card--tertiary .ondemand-rate-card__description {
	opacity: 0.7;
}

/* Service Rates grid - mobile first stacking */
.billing-grid-parent {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 100%;
	position: relative;
	min-height: auto;
}

.billing-grid-parent > div {
	height: auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

/* Mobile first spacing inside service rate cards */
.billing-grid-parent .value-card-wrapper {
	gap: 1.5rem;
}

.billing-grid-div2 {
	background: linear-gradient(180deg, var(--color-accent, #ff8058) 0%, var(--color-accent, #ff8058) 80%, #ffffff 100%);
}

.billing-grid-div3,
.billing-grid-div4,
.billing-grid-div5 {
	background-color: #f2f0ea;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Mobile first - CTA card */
.billing-grid-div7 {
	background-color: var(--color-secondary, #171717);
	padding: clamp(1rem, 2vw + 0.5rem, 2rem) !important; /* Mobile-first: reduced padding */
	width: 100% !important; /* 100% of container on mobile */
	height: 200px !important; /* Fixed height on mobile */
}

/* Override inner div padding on mobile */
.billing-grid-div7 > div[style*="padding"] {
	padding: clamp(1rem, 2vw + 0.5rem, 2rem) !important;
}

/* Hide long description on mobile */
.billing-grid-div7 .cta-desc {
	display: none !important;
}

@media (min-width: 768px) {
	.billing-grid-parent {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(4, 1fr);
		grid-column-gap: 16px;
		grid-row-gap: 16px;
		min-height: 600px;
	}

	.billing-grid-parent > div {
		height: 100%;
		min-height: 100%;
	}

	.billing-grid-parent .value-card-wrapper {
		gap: 1.75rem;
	}

	.billing-grid-div2 {
		grid-area: 1 / 1 / 3 / 2;
	}

	.billing-grid-div3 {
		grid-area: 3 / 1 / 5 / 2;
	}

	.billing-grid-div4 {
		grid-area: 1 / 2 / 3 / 3;
	}

	.billing-grid-div5 {
		grid-area: 3 / 2 / 5 / 3;
	}

	.billing-grid-div7 {
		grid-area: 1 / 3 / 5 / 4;
		width: 100% !important; /* Full width in grid */
		height: 100% !important; /* Full height in grid */
		padding: 3.5rem !important; /* Restore full padding on larger screens */
	}

	/* Show description on tablet+ */
	.billing-grid-div7 .cta-desc {
		display: inline !important;
	}

	/* Restore inner div padding on larger screens */
	.billing-grid-div7 > div[style*="padding"] {
		padding: 3.5rem !important;
	}
}

/* Accordion for General Terms and Conditions */
.ondemand-accordion {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.ondemand-accordion-item {
	border: none;
	border-radius: 0;
	background: #f2f0ea;
	overflow: hidden;
}

.ondemand-accordion-item:not(:last-child) {
	border-bottom: 1px solid rgba(47, 47, 47, 0.12);
}

/* Mobile first - accordion header padding */
.ondemand-accordion-header {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: clamp(1.25rem, 2vw + 0.75rem, 2rem) clamp(1.125rem, 1.5vw + 0.625rem, 1.25rem); /* Mobile-first: ~20px/18px to 32px/20px */
	background: transparent;
	border: none;
	text-align: left;
	transition: background-color 0.2s ease;
}

.ondemand-accordion-header:hover,
.ondemand-accordion-item.has-hover-state .ondemand-accordion-header {
	background-color: var(--color-secondary, #171717);
	color: #ffffff;
}

.ondemand-accordion-header:hover .ondemand-accordion-number,
.ondemand-accordion-header:hover .ondemand-accordion-title,
.ondemand-accordion-item.has-hover-state .ondemand-accordion-number,
.ondemand-accordion-item.has-hover-state .ondemand-accordion-title {
	color: #ffffff;
}

.ondemand-accordion-header[aria-expanded="true"] {
	background-color: var(--color-secondary, #171717);
	color: #ffffff;
}

.ondemand-accordion-header[aria-expanded="true"] .ondemand-accordion-number,
.ondemand-accordion-header[aria-expanded="true"] .ondemand-accordion-title {
	color: #ffffff;
}

.ondemand-accordion-header[aria-expanded="true"] .ondemand-accordion-icon i {
	transform: rotate(180deg);
}

/* Mobile first - accordion number */
.ondemand-accordion-number {
	font-size: clamp(0.875rem, 1vw + 0.5rem, 1.25rem); /* Mobile-first: 14px to 20px */
	font-weight: 700;
	color: var(--color-secondary, #2f2f2f);
	min-width: clamp(40px, 6vw + 12px, 72px); /* Mobile-first: 40px to 72px */
	flex-shrink: 0;
	text-align: center;
}

/* Mobile first - accordion title */
.ondemand-accordion-title {
	flex: 1;
	font-size: clamp(0.875rem, 1.2vw + 0.5rem, 1.25rem); /* Mobile-first: 14px to 20px */
	font-weight: 700;
	color: var(--color-secondary, #2f2f2f);
}

/* Mobile first - accordion icon */
.ondemand-accordion-icon {
	width: clamp(24px, 2vw + 12px, 32px); /* Mobile-first: 24px to 32px */
	height: clamp(24px, 2vw + 12px, 32px); /* Mobile-first: 24px to 32px */
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	position: relative;
	overflow: hidden;
}

.ondemand-accordion-icon::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #ffffff, var(--color-accent, #ff8058));
	clip-path: polygon(0 100%, 0 100%, 0 100%);
	transition: clip-path 0.3s ease;
	z-index: 0;
}

.ondemand-accordion-header:hover .ondemand-accordion-icon::before,
.ondemand-accordion-item.has-hover-state .ondemand-accordion-icon::before {
	clip-path: polygon(0 100%, 100% 0%, 100% 100%);
	background: linear-gradient(135deg, #ffffff, var(--color-accent, #ff8058));
}

.ondemand-accordion-header[aria-expanded="true"] .ondemand-accordion-icon {
	background: linear-gradient(135deg, #ffffff, var(--color-accent, #ff8058));
}

.ondemand-accordion-header[aria-expanded="true"] .ondemand-accordion-icon::before {
	clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0% 100%);
	background: transparent;
}

/* Mobile first - accordion icon inner */
.ondemand-accordion-icon i {
	font-size: clamp(12px, 0.8vw + 8px, 14px); /* Mobile-first: 12px to 14px */
	color: var(--color-secondary, #2f2f2f);
	transition: transform 0.3s ease, color 0.3s ease;
	position: relative;
	z-index: 1;
}

.ondemand-accordion-header:hover .ondemand-accordion-icon i,
.ondemand-accordion-item.has-hover-state .ondemand-accordion-icon i {
	color: #ffffff;
}

.ondemand-accordion-header[aria-expanded="true"] .ondemand-accordion-icon i {
	color: var(--color-secondary, #2f2f2f) !important;
}

/* Mobile first - accordion body padding */
.ondemand-accordion-body {
	padding: clamp(1.25rem, 1.5vw + 0.75rem, 1.5rem) clamp(1.125rem, 1.5vw + 0.625rem, 1.25rem) clamp(1.5rem, 2vw + 0.75rem, 2rem) clamp(1.125rem, 1.5vw + 0.625rem, 1.25rem); /* Mobile-first: slightly increased from prior */
	padding-left: clamp(1.5rem, 3vw + 1rem, 3.5rem); /* Mobile-first: 24px to 56px */
}

.collapse {
	transition: height 0.35s ease;
}

.collapsing {
	transition: height 0.35s ease;
}

/* CTA Card Button Hover */
.btn-cta-card:hover {
	background-color: var(--color-accent) !important;
	border-color: var(--color-accent) !important;
	color: #fff !important;
}

/* Everything You Need Section */
.everything-you-need-section {
	background-color: var(--color-primary);
}

.everything-you-need-section .feature-item {
	margin-bottom: 6rem;
}

@media (max-width: 991.98px) {
	.everything-you-need-section .feature-item {
		margin-bottom: 4rem;
	}
}

.everything-you-need-section .feature-number {
	position: absolute;
	top: -2rem;
	left: 0;
	font-size: 8rem;
	font-weight: 700;
	color: rgba(47, 47, 47, 0.08);
	line-height: 1;
	z-index: 0;
	pointer-events: none;
}

@media (max-width: 991.98px) {
	.everything-you-need-section .feature-number {
		font-size: 5rem;
		top: -1rem;
	}
}

.everything-you-need-section .feature-item h3 {
	position: relative;
	z-index: 1;
	font-size: 2rem;
	font-weight: 600;
}

@media (max-width: 991.98px) {
	.everything-you-need-section .feature-item h3 {
		font-size: 1.5rem;
	}
}

.everything-you-need-section .feature-image-wrapper {
	position: relative;
	border-radius: 1rem;
	overflow: hidden;
}

.everything-you-need-section .feature-image-wrapper img {
	width: 100%;
	height: auto;
	display: block;
}

/* Group hover effect for billing section icons */
.group:hover .w-12 {
	background-color: var(--color-accent) !important;
	border-color: var(--color-accent) !important;
	color: #fff !important;
}

.group:hover .w-12 iconify-icon {
	color: #fff !important;
}

/* Radius distance chart styling */
#radius-distance-chart {
	width: 80%;
	margin: 2rem auto;
	min-height: 300px;
}

#radius-distance-chart .uplot {
	font-family: inherit;
}

#radius-distance-chart .u-title {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--color-secondary);
	text-align: center;
	margin-bottom: 1rem;
}

/* Everything You Need Section */
.everything-you-need-section {
	background-color: var(--color-primary);
}

.everything-you-need-section .feature-item {
	margin-bottom: 6rem;
}

@media (max-width: 991.98px) {
	.everything-you-need-section .feature-item {
		margin-bottom: 4rem;
	}
}

.everything-you-need-section .feature-number {
	position: absolute;
	top: -2rem;
	left: 0;
	font-size: 8rem;
	font-weight: 700;
	color: rgba(47, 47, 47, 0.08);
	line-height: 1;
	z-index: 0;
	pointer-events: none;
}

@media (max-width: 991.98px) {
	.everything-you-need-section .feature-number {
		font-size: 5rem;
		top: -1rem;
	}
}

.everything-you-need-section .feature-item h3 {
	position: relative;
	z-index: 1;
	font-size: 2rem;
	font-weight: 600;
}

@media (max-width: 991.98px) {
	.everything-you-need-section .feature-item h3 {
		font-size: 1.5rem;
	}
}

.everything-you-need-section .feature-image-wrapper {
	position: relative;
	border-radius: 1rem;
	overflow: hidden;
}

.everything-you-need-section .feature-image-wrapper img {
	width: 100%;
	height: auto;
	display: block;
}

/* Navigation Dropdown with Icons and Descriptions */
.navigation-1__menu {
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	padding: 8px;
	min-width: 280px;
}

.navigation-1__menu-link {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px;
	border-radius: 8px;
	text-decoration: none;
	transition: all 0.2s ease;
	color: var(--color-primary, #f7f5ef);
}

.navigation-1__menu-link:hover {
	background-color: #f8f8f8;
}

.navigation-1__menu-icon {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.navigation-1__menu-icon i {
	font-size: 20px;
	color: var(--color-primary, #f7f5ef);
}

.navigation-1__menu-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.navigation-1__menu-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--color-primary, #f7f5ef);
	line-height: 1.4;
}

.navigation-1__menu-description {
	font-size: 12px;
	color: var(--color-primary, #f7f5ef);
	opacity: 0.7;
	line-height: 1.4;
}

/* Highlight active/current page */
.navigation-1__menu-list:has(a[href*="/services/ondemand"]):has(a.active) .navigation-1__menu-link,
.navigation-1__menu-list:has(a[href*="/services/whitelabel"]):has(a.active) .navigation-1__menu-link,
.navigation-1__menu-list:has(a[href*="/services/custom-development"]):has(a.active) .navigation-1__menu-link {
	background-color: #fff9e6;
}

.navigation-1__menu-list:has(a.active) .navigation-1__menu-title::after {
	content: " →";
	color: #2f2f2f;
}

/* Mobile styles */
@media (max-width: 991.98px) {
	.navigation-1__menu {
		position: static;
		visibility: visible;
		opacity: 1;
		box-shadow: none;
		padding: 0;
		background: transparent;
		border-radius: 0 !important;
	}
	
	.navigation-1__menu-link {
		padding: 10px 0;
		border-radius: 0 !important;
	}
}

/* Notiflix notification positioning */
.notiflix-notify {
	right: 10px !important;
}

/* ============================================
   Contact Page Styles
   ============================================ */

/* Contact hero button text color */
.hero-7 .btn-accent,
.hero-7 .btn-accent span,
.hero-7 .btn-accent iconify-icon {
	color: #fff !important;
}

/* Contact hero SVG sizing */
.hero-7__svg {
	width: 1600px;
	height: 800px;
}

/* Contact section HR border */
#contact hr.contact-hr-border {
	border-color: rgba(47, 47, 47, 0.2);
}

/* Contact form container shadow */
.contact-form-container {
	box-shadow: 0 4px 20px rgba(47, 47, 47, 0.1);
}

/* Honeypot field (hidden from users) */
.honeypot-field {
	position: absolute;
	left: -9999px;
	opacity: 0;
	pointer-events: none;
	tabindex: -1;
}

/* Contact form inputs rounded corners */
#contactForm .form-control,
#contactForm .form-select {
	border-radius: 15px;
}

/* Contact form submit button text color */
#contactForm .btn-accent,
#contactForm .btn-accent span,
#contactForm .btn-accent iconify-icon {
	color: #fff !important;
}