/**
 * Home & Service "Process we follow" — arc image on desktop and mobile.
 * Badges animate along the arc ellipse curve via GSAP.
 * Mobile & tablet (≤991px): full-width bleed arc, only active badge visible (CSS-positioned).
 */

/* ===== SECTION SHELL ===== */
.section.process {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	min-height: 100vh;
	align-items: center;
	overflow: visible !important;
	display: flex !important;
	justify-content: center;
}

.section.process .w-container {
	width: 100%;
}

.content-wrapper.process {
	align-items: center;
}

/* ===== PROCESS PANEL ===== */
.process-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1;
	min-width: 0;
	gap: 20px;
}

/* ===== ARC WRAP — contains arc image + badges + content card ===== */
.process-arc-wrap {
	position: relative;
	width: 100%;
	max-width: 540px;
	aspect-ratio: 813 / 437;
	overflow: visible;
}

/* ===== ARC RING — the arc image ===== */
.process-arc-ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background-image: url('../img/Ellipse-55.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-color: transparent;
	border: none;
	border-radius: 0;
	transform: none;
	aspect-ratio: unset;
}

/* ===== BADGES — positioned by GSAP along the arc ellipse ===== */
.process-arc-badge {
	position: absolute;
	left: 50%;
	top: 50%;
	display: flex;
	flex-direction: column; /* circle on top, "Step" label below */
	align-items: center;
	gap: 6px;
	z-index: 3;
	opacity: 0; /* hidden until GSAP sets initial positions */
}

/* "Step" label below the circle */
.process-badge-lbl {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: #5e43fe;
	text-transform: capitalize;
	letter-spacing: 0.06em;
	white-space: nowrap;
	opacity: 0.55;
}

/* Circle badge — matches service template class name */
.process-badge-circle {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: #fff;
	border: 1.5px solid rgba(149, 117, 248, 0.32);
	box-shadow:
		0 2px 10px rgba(94, 67, 254, 0.07),
		0 1px 3px rgba(0, 0, 0, 0.05);
	display: flex;
	align-items: center;
	justify-content: center;
	transition:
		background 0.35s ease,
		border-color 0.35s ease,
		box-shadow 0.35s ease;
}

.process-badge-num {
	font-size: 15px;
	font-weight: 700;
	color: #3a3354;
	line-height: 1;
	transition: color 0.35s ease;
}

/* Active badge */
.process-arc-badge.is-active .process-badge-lbl {
	opacity: 1;
}

.process-arc-badge.is-active .process-badge-circle {
	background: #5e43fe;
	border-color: #5e43fe;
	box-shadow:
		0 4px 20px rgba(94, 67, 254, 0.45),
		0 1px 4px rgba(94, 67, 254, 0.2);
}

.process-arc-badge.is-active .process-badge-num {
	color: #fff;
}

/* ===== CONTENT CARD — overlaid inside the arc ===== */
.process-content-card {
	position: absolute;
	left: 50%;
	top: 62%;
	transform: translate(-50%, -50%);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: 56%;
	z-index: 2;
}

/* Matches service template class names */
.process-content-title {
	font-size: 28px;
	font-weight: 700;
	color: #1a1533;
	margin: 0;
	line-height: 1.3;
}

.process-content-desc {
	font-size: 16px;
	color: #6b7280;
	line-height: 1.6;
	margin: 0;
}

/* Icon sits at the bottom of the card (service template pattern) */
.process-content-icon-wrap {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: rgba(94, 67, 254, 0.09);
	flex-shrink: 0;
}

.process-content-icon-wrap i {
	font-size: 22px;
	color: #5e43fe;
}

/* ===== INDICATOR DOTS ===== */
.process-ind-dots {
	display: flex;
	align-items: center;
	gap: 6px;
}

.process-ind-dot {
	width: 24px;
	height: 7px;
	border-radius: 4px;
	background: rgba(149, 117, 248, 0.18);
	border: 1.5px solid rgba(149, 117, 248, 0.22);
	transition:
		background 0.35s ease,
		width 0.35s ease,
		border-color 0.35s ease;
	cursor: default;
}

.process-ind-dot.is-active {
	background: #5e43fe;
	border-color: #5e43fe;
	width: 36px;
}

/* ===== WIDE SCREENS (1600px+) ===== */
@media (min-width: 1600px) {
	.process-arc-wrap {
		max-width: 680px;
	}

	.process-content-title {
		font-size: 28px;
	}

	.process-content-desc {
		font-size: 16px;
	}
}

/* ===== COMPACT — TABLET + MOBILE (≤991px) ===== */
@media (max-width: 991px) {

	/* Panel first, section heading below */
	.content-wrapper.process .process-panel    { order: 1; }
	.content-wrapper.process .heading-wrapper.proess { order: 2; }

	.heading-wrapper.proess {
		max-width: 100%;
		width: 100%;
	}

	.process-panel {
		width: 100%;
		flex: 0 0 auto;
		align-self: stretch;
		gap: 16px;
	}

	/* Full-width bleed — arc extends outside container padding */
	.process-arc-wrap {
		width: calc(100% + 80px);
		margin-left: -40px;
		margin-right: -40px;
		max-width: none;
		aspect-ratio: unset;
		height: clamp(300px, 52vw, 380px);
		overflow: visible;
	}

	/* Arc image: fixed height portion at top */
	.process-arc-ring {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
		min-height: clamp(200px, 38vw, 260px);
		aspect-ratio: 813 / 437;
		background-size: 100% auto;
		background-position: top center;
		inset: unset;
	}

	/*
	 * Active badge at arc apex (~25% from webflow reference: 80px / 320px).
	 * !important beats GSAP inline transforms on compact viewports.
	 */
	.process-arc-badge {
		left: 50% !important;
		top: 24% !important;
		right: auto !important;
		bottom: auto !important;
		transform: translate(-50%, -50%) !important;
		transition: opacity 0.35s ease;
	}

	.process-arc-badge:not(.is-active) {
		opacity: 0 !important;
		pointer-events: none !important;
	}

	.process-arc-badge.is-active {
		opacity: 1 !important;
		pointer-events: auto;
	}

	.process-arc-badge.is-active .process-badge-circle {
		transform: scale(1.1);
	}

	/* Content card: inside arc-wrap dome opening */
	.process-content-card {
		position: absolute;
		left: 50%;
		top: 58%;
		transform: translate(-50%, -50%);
		width: min(74%, 420px);
		z-index: 5;
	}

	.process-content-title {
		font-size: clamp(16px, 4.2vw, 20px);
	}

	.process-content-desc {
		font-size: clamp(12px, 3.4vw, 14px);
	}

	.process-ind-dots {
		pointer-events: auto;
	}

	.process-ind-dot {
		cursor: pointer;
	}
}

/* Tablet-only tweaks (787–991px) */
@media (min-width: 787px) and (max-width: 991px) {
	.process-arc-wrap {
		width: min(100%, 640px);
		margin-left: auto;
		margin-right: auto;
		height: 360px;
	}

	.process-arc-badge {
		top: 22% !important;
	}

	.process-content-card {
		top: 56%;
		width: 68%;
	}
}

/* ===== MOBILE (≤786px) ===== */
@media (max-width: 786px) {
	.process-arc-wrap {
		width: calc(100% + 80px);
		margin-left: -40px;
		margin-right: -40px;
		height: 340px;
	}

	.process-arc-ring {
		min-height: 220px;
	}
}

/* ===== SMALL PHONES (≤479px) ===== */
@media (max-width: 479px) {
	.process-arc-wrap {
		height: 300px;
	}

	.process-arc-badge {
		top: 23% !important;
	}

	.process-content-card {
		top: 57%;
		width: 80%;
	}

	.process-content-title {
		font-size: 16px;
	}

	.process-content-desc {
		font-size: 15px;
	}
}