/* ==========================================================================
   AFFANECOM - horizontal process stepper

   Four steps in a row with a connector running between numbered nodes, so the
   sequence reads as a process rather than four unrelated paragraphs.

   The visible number is a CSS counter, which means renumbering is automatic if
   a step is added or removed in Elementor. The original "STEP 01" heading is
   kept in the DOM but visually hidden, because generated content is not
   reliably announced by screen readers.
   ========================================================================== */

.affan-steps.e-con{
	counter-reset:affan-step;
	display:flex !important;
	flex-direction:row !important;
	flex-wrap:nowrap !important;
	align-items:flex-start !important;
	gap:26px !important;
}

.affan-steps > .affan-step.e-con{
	position:relative;
	counter-increment:affan-step;
	flex:1 1 0 !important;
	width:auto !important;
	max-width:none !important;
	min-width:0;
	padding:62px 0 0 0 !important;
	background:transparent !important;
	border:0 !important;
}

/* Numbered node ---------------------------------------------------------- */
.affan-steps > .affan-step::before{
	content:counter(affan-step, decimal-leading-zero);
	position:absolute;
	top:0;
	left:0;
	z-index:2;
	width:46px;
	height:46px;
	border-radius:50%;
	background:#fff;
	border:2px solid #F47C20;
	color:#B85A0E;
	display:grid;
	place-items:center;
	font-family:"Plus Jakarta Sans","Inter",sans-serif;
	font-size:14px;
	font-weight:800;
	line-height:1;
	box-shadow:0 0 0 6px #F7F7F5;
}

/* Connector -------------------------------------------------------------- */
.affan-steps > .affan-step::after{
	content:"";
	position:absolute;
	top:22px;
	left:46px;
	right:-26px;
	height:2px;
	z-index:1;
	background:repeating-linear-gradient(
		90deg,
		#E9D3BC 0 7px,
		transparent 7px 14px);
}
.affan-steps > .affan-step:last-child::after{
	display:none;
}

/* Contents --------------------------------------------------------------- */
.affan-steps .affan-step .elementor-widget{
	margin-bottom:0 !important;
	width:100% !important;
}

/* The "STEP 01" label is now shown by the node, but stays for assistive tech. */
.affan-steps .affan-step > .elementor-widget-heading:first-child{
	position:absolute !important;
	width:1px;
	height:1px;
	overflow:hidden;
	clip:rect(0 0 0 0);
	clip-path:inset(50%);
	white-space:nowrap;
}

.affan-steps .affan-step .elementor-widget-heading + .elementor-widget-heading .elementor-heading-title,
.affan-steps .affan-step .elementor-widget-heading .elementor-heading-title{
	font-size:17px !important;
	line-height:1.35 !important;
}
.affan-steps .affan-step .elementor-widget-text-editor{
	margin-top:9px !important;
}
.affan-steps .affan-step .elementor-widget-text-editor p{
	margin:0 !important;
	font-size:15px;
	line-height:1.68;
	color:#6F6F6B;
}

/* --------------------------------------------------------------------------
   Tablet: two by two, with the connector only between horizontal pairs.
   -------------------------------------------------------------------------- */
@media (max-width:1024px) and (min-width:768px){
	.affan-steps.e-con{
		flex-wrap:wrap !important;
		row-gap:38px !important;
	}
	.affan-steps > .affan-step.e-con{
		flex:0 0 calc(50% - 13px) !important;
		max-width:calc(50% - 13px) !important;
	}
	.affan-steps > .affan-step:nth-child(2n)::after{
		display:none;
	}
}

/* --------------------------------------------------------------------------
   Mobile: stays horizontal, as a swipeable track. The connector runs the whole
   way so the sequence still reads left to right.
   -------------------------------------------------------------------------- */
@media (max-width:767px){
	.affan-steps.e-con{
		overflow-x:auto;
		overflow-y:hidden;
		scroll-snap-type:x mandatory;
		-webkit-overflow-scrolling:touch;
		overscroll-behavior-x:contain;
		scroll-padding-left:16px;
		gap:20px !important;
		margin-left:-16px !important;
		margin-right:-16px !important;
		padding-left:16px !important;
		padding-right:16px !important;
		scrollbar-width:none;
		-ms-overflow-style:none;
	}
	.affan-steps.e-con::-webkit-scrollbar{ display:none; }

	.affan-steps > .affan-step.e-con{
		flex:0 0 74% !important;
		max-width:74% !important;
		scroll-snap-align:start;
		padding-top:56px !important;
	}
	.affan-steps > .affan-step::before{
		width:42px;
		height:42px;
		font-size:13px;
	}
	.affan-steps > .affan-step::after{
		top:20px;
		left:42px;
		right:-20px;
	}
	.affan-steps .affan-step .elementor-widget-text-editor p{ font-size:14.5px; }
}

@media (max-width:767px) and (prefers-reduced-motion:reduce){
	.affan-steps.e-con{ scroll-snap-type:none; }
}