/* cc-font-inherit-reset: some theme stylesheets set font-family directly on
 * span/a/strong (e.g. "p, a, strong, span { font-family: Poppins }"), which
 * stops a parent's Typography control from reaching inner text. Kept at the top
 * so explicit rules below and Elementor controls still win. */
.cc-process-flow :where(span, a, strong, b, em, i) {
	font-family: inherit;
}

/*
 * Layout is driven by custom properties so the Elementor "Direction" control can
 * switch the whole flow (and arrow orientation) per breakpoint in one place.
 */
.cc-process-flow {
	--cc-pf-direction: row;
	--cc-pf-transition: 260ms;
	--cc-pf-label-wrap: nowrap;
	--cc-pf-arrow-rotate: 0deg;
	--cc-pf-arrow-length: 68px;
	--cc-pf-arrow-thickness: 8px;
	--cc-pf-arrow-w: auto;
	--cc-pf-arrow-h: var(--cc-pf-arrow-thickness);
	--cc-pf-arrow-min-w: 24px;
	--cc-pf-arrow-min-h: 0px;
	--cc-pf-arrow-overflow: hidden;
	--cc-pf-arrow-justify: flex-end;
	--cc-pf-line: #939598;
	--cc-pf-line-thickness: 1px;
	--cc-pf-line-head: 7px;
	--cc-pf-line-max: 120px;
	--cc-pf-line-w: 100%;
	--cc-pf-line-flex: 1 1 0;
	--cc-pf-line-box-h: calc(var(--cc-pf-line-head) * 2);
	--cc-pf-line-max-w: var(--cc-pf-line-max);
	--cc-pf-line-min-w: 48px;
	--cc-pf-line-glow: none;
	/*
	 * Vertical arrows line up with the icon: a box as wide as the icon at the
	 * step's start when the icon sits beside the text (row), full width (centred)
	 * when the icon sits on top. Set by the Icon Position control / breakpoints.
	 */
	--cc-pf-step-dir: row;
	--cc-pf-varrow-w: var(--cc-pf-varrow-icon, var(--cc-pf-badge, 48px));
	--cc-pf-varrow-self: auto;
	--cc-pf-arrow-self: auto;
	background: rgba(220, 221, 222, 0.3);
	box-sizing: border-box;
	padding: 40px 48px;
	position: relative;
	width: 100%;
}

.cc-process-flow__steps {
	align-items: center;
	display: flex;
	flex-direction: var(--cc-pf-direction);
	gap: 24px;
	justify-content: space-between;
	margin: 0 auto;
	max-width: 896px;
	width: 100%;
}

.cc-process-flow__step {
	align-items: center;
	box-sizing: border-box;
	display: flex;
	flex: 0 0 auto;
	flex-direction: var(--cc-pf-step-dir);
	gap: 20px;
	transition: background-color var(--cc-pf-transition) ease, border-color var(--cc-pf-transition) ease, box-shadow var(--cc-pf-transition) ease;
}

.cc-process-flow__icon {
	align-items: var(--cc-pf-icon-y, flex-end);
	box-sizing: border-box;
	display: flex;
	flex: 0 0 auto;
	height: 48px;
	justify-content: var(--cc-pf-icon-x, flex-start);
	position: relative;
	transition: background-color var(--cc-pf-transition) ease, border-color var(--cc-pf-transition) ease, box-shadow var(--cc-pf-transition) ease, transform var(--cc-pf-transition) ease;
	width: 48px;
}

/* Icons keep their native SVG size; bottom-anchored so the 48x48.5 glyph sits as in the design. */
.cc-process-flow__icon img {
	display: block;
	flex: 0 0 auto;
	max-width: none;
	transition: opacity var(--cc-pf-transition) ease, filter var(--cc-pf-transition) ease;
}

.cc-process-flow__icon-mask {
	-webkit-mask-position: var(--cc-pf-icon-mask-x, left) var(--cc-pf-icon-mask-y, bottom);
	mask-position: var(--cc-pf-icon-mask-x, left) var(--cc-pf-icon-mask-y, bottom);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	background: var(--cc-pf-icon-fill, #939598);
	display: block;
	height: 100%;
	transition: background var(--cc-pf-transition) ease, opacity var(--cc-pf-transition) ease, filter var(--cc-pf-transition) ease;
	width: 100%;
}

.cc-process-flow__label {
	color: #3155a6;
	font-family: "Archivo", sans-serif;
	font-size: var(--cc-fc-type-elements-heading-size, 24px);
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0;
	line-height: var(--cc-fc-type-elements-heading-line-height, 28px);
	margin: 0;
	transition: color var(--cc-pf-transition) ease, text-shadow var(--cc-pf-transition) ease;
	white-space: var(--cc-pf-label-wrap);
}

.cc-process-flow__arrow {
	align-items: center;
	align-self: var(--cc-pf-arrow-self);
	display: flex;
	flex: 0 1 var(--cc-pf-arrow-length);
	height: var(--cc-pf-arrow-h);
	justify-content: var(--cc-pf-arrow-justify);
	min-height: var(--cc-pf-arrow-min-h);
	min-width: var(--cc-pf-arrow-min-w);
	overflow: var(--cc-pf-arrow-overflow);
	width: var(--cc-pf-arrow-w);
}

.cc-process-flow__arrow img,
.cc-process-flow__arrow-mask {
	display: block;
	flex: 0 0 auto;
	max-width: none;
	transform: rotate(var(--cc-pf-arrow-rotate));
}

.cc-process-flow__arrow-mask {
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	background-color: #939598;
	height: 7.364px;
	width: 68.5px;
}

/* ---- Label + description ------------------------------------------------- */

.cc-process-flow__text {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.cc-process-flow__description {
	color: rgba(69, 70, 81, 0.8);
	font-family: "Poppins", sans-serif;
	font-size: var(--cc-fc-type-elements-body-size, 15px);
	font-style: normal;
	font-weight: 400;
	line-height: var(--cc-fc-type-elements-body-line-height, 24px);
	margin: 0;
	transition: color var(--cc-pf-transition) ease;
}

/* ---- Line arrow (CSS-drawn, grows to fill the gap) ----------------------- */

.cc-process-flow .cc-process-flow__arrow--line {
	flex: var(--cc-pf-line-flex);
	height: var(--cc-pf-line-box-h);
	max-width: var(--cc-pf-line-max-w);
	min-width: var(--cc-pf-line-min-w);
	overflow: visible;
	position: relative;
}

.cc-process-flow__arrow-line {
	background: linear-gradient(90deg, transparent 0%, var(--cc-pf-line) 22%, var(--cc-pf-line) 100%);
	border-radius: 2px;
	box-shadow: var(--cc-pf-line-glow);
	display: block;
	height: var(--cc-pf-line-thickness);
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%) rotate(var(--cc-pf-arrow-rotate));
	width: var(--cc-pf-line-w);
}

.cc-process-flow__arrow-line::after {
	border-right: max(1.5px, var(--cc-pf-line-thickness)) solid var(--cc-pf-line);
	border-top: max(1.5px, var(--cc-pf-line-thickness)) solid var(--cc-pf-line);
	box-sizing: border-box;
	content: "";
	height: var(--cc-pf-line-head);
	position: absolute;
	right: 1px;
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
	width: var(--cc-pf-line-head);
}

/* =========================================================================
 * Glow Panel design: dark rounded panel, circle badges, glowing line arrows.
 * ====================================================================== */

.cc-process-flow--glow {
	--cc-pf-icon-fill: linear-gradient(180deg, #a6f3ff 0%, #3ab4ff 100%);
	--cc-pf-badge: 96px;
	--cc-pf-badge-icon: 46%;
	--cc-pf-badge-bg: radial-gradient(circle at 50% 30%, #102461 0%, #081333 72%);
	--cc-pf-ring: rgba(80, 200, 255, 0.55);
	--cc-pf-ring-highlight: #69ecff;
	--cc-pf-halo: rgba(40, 150, 255, 0.45);
	--cc-pf-line: #4fd8ff;
	--cc-pf-line-thickness: 2px;
	--cc-pf-line-head: 9px;
	--cc-pf-line-max: 200px;
	--cc-pf-line-glow: 0 0 8px rgba(79, 216, 255, 0.9), 0 0 2px #4fd8ff;
	--cc-pf-wave-dot: rgba(70, 160, 255, 0.6);
	--cc-pf-wave-gap: 9px;
	background: radial-gradient(ellipse 60% 120% at 50% -20%, rgba(36, 104, 255, 0.35) 0%, transparent 60%), linear-gradient(90deg, #06102a 0%, #0b1c4b 50%, #081436 100%);
	border-radius: 16px;
	overflow: hidden;
	padding: 56px 64px;
}

.cc-process-flow--glow .cc-process-flow__steps {
	gap: 28px;
	max-width: 1240px;
	position: relative;
	z-index: 1;
}

.cc-process-flow--glow .cc-process-flow__step {
	flex: 0 1 auto;
	gap: 24px;
}

.cc-process-flow--glow .cc-process-flow__icon {
	--cc-pf-icon-x: center;
	--cc-pf-icon-y: center;
	--cc-pf-icon-mask-x: center;
	--cc-pf-icon-mask-y: center;
	align-items: center;
	background: var(--cc-pf-badge-bg);
	border: 1.5px solid var(--cc-pf-ring);
	border-radius: 50%;
	box-shadow: 0 0 24px var(--cc-pf-halo), inset 0 0 18px rgba(105, 236, 255, 0.18);
	height: var(--cc-pf-badge);
	justify-content: center;
	width: var(--cc-pf-badge);
}

.cc-process-flow--glow .cc-process-flow__icon-mask {
	height: var(--cc-pf-badge-icon);
	width: var(--cc-pf-badge-icon);
}

.cc-process-flow--glow .cc-process-flow__icon img {
	height: var(--cc-pf-badge-icon);
	width: auto;
}

.cc-process-flow--glow .cc-process-flow__step.is-highlight .cc-process-flow__icon,
.cc-process-flow--glow .cc-process-flow__step:hover .cc-process-flow__icon {
	border-color: var(--cc-pf-ring-highlight);
	box-shadow: 0 0 36px var(--cc-pf-halo), 0 0 0 5px rgba(105, 236, 255, 0.08), inset 0 0 22px rgba(105, 236, 255, 0.3);
}

.cc-process-flow--glow .cc-process-flow__label {
	color: #fff;
	font-family: "Poppins", sans-serif;
	font-weight: 600;
}

.cc-process-flow--glow .cc-process-flow__description {
	color: rgba(255, 255, 255, 0.72);
}

/* Dotted wave decoration along the bottom edge (CSS approximation). */
.cc-process-flow__waves {
	-webkit-mask-image: radial-gradient(ellipse 34% 70% at 12% 100%, #000 0%, rgba(0, 0, 0, 0.6) 40%, transparent 72%), radial-gradient(ellipse 30% 60% at 52% 118%, #000 0%, transparent 70%), radial-gradient(ellipse 34% 75% at 88% 100%, #000 0%, rgba(0, 0, 0, 0.6) 40%, transparent 72%);
	mask-image: radial-gradient(ellipse 34% 70% at 12% 100%, #000 0%, rgba(0, 0, 0, 0.6) 40%, transparent 72%), radial-gradient(ellipse 30% 60% at 52% 118%, #000 0%, transparent 70%), radial-gradient(ellipse 34% 75% at 88% 100%, #000 0%, rgba(0, 0, 0, 0.6) 40%, transparent 72%);
	background-image: radial-gradient(circle, var(--cc-pf-wave-dot) 1px, transparent 1.6px);
	background-size: var(--cc-pf-wave-gap) var(--cc-pf-wave-gap);
	bottom: 0;
	height: 60%;
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	z-index: 0;
}

@media (max-width: 1024px) {
	.cc-process-flow {
		padding: 36px 32px;
	}

	.cc-process-flow__steps {
		gap: 16px;
	}

	.cc-process-flow__step {
		gap: 14px;
	}
}

@media (max-width: 767px) {
	.cc-process-flow {
		--cc-pf-direction: column;
		--cc-pf-label-wrap: normal;
		--cc-pf-arrow-rotate: 90deg;
		--cc-pf-arrow-length: 72px;
		--cc-pf-arrow-w: var(--cc-pf-varrow-w);
		--cc-pf-arrow-self: var(--cc-pf-varrow-self);
		--cc-pf-arrow-h: auto;
		--cc-pf-arrow-min-w: 0px;
		--cc-pf-arrow-overflow: visible;
		--cc-pf-arrow-justify: center;
		--cc-pf-line-w: var(--cc-pf-arrow-length);
		--cc-pf-line-flex: 0 0 auto;
		--cc-pf-line-box-h: var(--cc-pf-arrow-length);
		--cc-pf-line-max-w: none;
		--cc-pf-line-min-w: 0px;
		padding: 32px 20px;
	}

	.cc-process-flow__steps {
		gap: 8px;
	}
}

@media (max-width: 479px) {
	.cc-process-flow {
		padding: 28px 16px;
	}

	.cc-process-flow__label {
		font-size: 20px;
		line-height: 24px;
	}
}

/* ---- Glow Panel responsive (after the base breakpoints so it wins) ------- */

@media (max-width: 1200px) {
	.cc-process-flow--glow {
		--cc-pf-badge: 84px;
		padding: 48px 40px;
	}

	.cc-process-flow--glow .cc-process-flow__step {
		gap: 18px;
	}
}

/* Tablet: badge above centred text, arrows aligned with the badges. */
@media (min-width: 768px) and (max-width: 1024px) {
	.cc-process-flow--glow {
		--cc-pf-badge: 72px;
		--cc-pf-label-wrap: normal;
		--cc-pf-line-flex: 0 1 64px;
		--cc-pf-line-min-w: 32px;
		--cc-pf-step-dir: column;
		--cc-pf-varrow-w: 100%;
		padding: 40px 28px;
	}

	.cc-process-flow--glow .cc-process-flow__steps {
		align-items: flex-start;
		gap: 16px;
	}

	.cc-process-flow--glow .cc-process-flow__step {
		flex: 1 1 0;
		gap: 16px;
		text-align: center;
	}

	/* Horizontal only: drop the arrow to the badge centre (Vertical sets the offset to 0). */
	.cc-process-flow--glow .cc-process-flow__arrow--line {
		margin-top: var(--cc-pf-arrow-badge-offset, calc(var(--cc-pf-badge) / 2 - var(--cc-pf-line-head)));
	}
}

/* Mobile: stacked steps with vertical arrows. */
@media (max-width: 767px) {
	.cc-process-flow--glow {
		--cc-pf-badge: 72px;
		--cc-pf-step-dir: column;
		--cc-pf-varrow-w: 100%;
		padding: 40px 20px;
	}

	.cc-process-flow--glow .cc-process-flow__steps {
		gap: 12px;
	}

	.cc-process-flow--glow .cc-process-flow__step {
		gap: 14px;
		text-align: center;
	}

	.cc-process-flow--glow .cc-process-flow__description br {
		display: none;
	}
}