/** how-it-works styles for Bargheto Widgets */

.elementor-widget-bargheto_how_it_works .how-section__inner {
	max-width: 72rem;
	margin: 0 auto;
}

.elementor-widget-bargheto_how_it_works .steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 2rem;
}

@media (min-width: 640px) {
	.elementor-widget-bargheto_how_it_works .steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.elementor-widget-bargheto_how_it_works .steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* خط اتصال نقطه‌چین */
.elementor-widget-bargheto_how_it_works .steps::before {
	content: "";
	position: absolute;
	right: 12.5%;
	left: 12.5%;
	top: 2rem;
	display: none;
	border-top-width: 2px;
	border-style: dashed;
	border-color: #d6dde4;
}

@media (min-width: 1024px) {
	.elementor-widget-bargheto_how_it_works .steps::before {
		display: block;
	}
}

.elementor-widget-bargheto_how_it_works .step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.elementor-widget-bargheto_how_it_works .step__num {
	margin-bottom: 1rem;
	display: flex;
	height: 4rem;
	width: 4rem;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	background-color: var(--hiw-accent, #0043CB);
	font-size: 1.5rem;
	font-weight: 900;
	color: #fff;
	box-shadow: 0 0 0 8px color-mix(in srgb, var(--hiw-accent, #0043CB) 10%, transparent);
	transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.elementor-widget-bargheto_how_it_works .step:hover .step__num {
	transform: scale(1.1);
}

.elementor-widget-bargheto_how_it_works .step__title {
	font-size: 1rem;
	font-weight: 700;
	color: #121517;
}

.elementor-widget-bargheto_how_it_works .step__desc {
	margin-top: 0.5rem;
	max-width: 15rem;
	font-size: 0.875rem;
	line-height: 1.75rem;
	color: #919396;
}

/* انیمیشن ورود پلکانی */
.elementor-widget-bargheto_how_it_works .steps.anim-ready .step {
	opacity: 0;
	transform: translateY(40px) scale(0.94);
	transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.elementor-widget-bargheto_how_it_works .steps.anim-ready.is-visible .step {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.elementor-widget-bargheto_how_it_works .steps.anim-ready.is-visible .step:nth-child(2) {
	transition-delay: 0.35s;
}

.elementor-widget-bargheto_how_it_works .steps.anim-ready.is-visible .step:nth-child(3) {
	transition-delay: 0.7s;
}

.elementor-widget-bargheto_how_it_works .steps.anim-ready.is-visible .step:nth-child(4) {
	transition-delay: 1.05s;
}

.elementor-widget-bargheto_how_it_works .steps.anim-ready::before {
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 1.4s ease 0.4s;
}

.elementor-widget-bargheto_how_it_works .steps.anim-ready.is-visible::before {
	transform: scaleX(1);
}