.kyc-steps {
	display: flex;
	align-items: center;
	margin: 52.8px 0 5rem;
	padding: 0;
	list-style: none;
}

.kyc-steps__item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.kyc-steps__item:first-child {
	flex: 87 1 auto;
}

.kyc-steps__item:nth-child(2) {
	flex: 140 1 auto;
}

.kyc-steps__item:not(:last-child)::after {
	content: "";
	flex: 1;
	height: 2px;
	margin-inline: 14.75px;
	border-radius: 1px;
	background: repeating-linear-gradient(
		to right,
		var(--routeon-black-20) 0 9px,
		transparent 9px 18px
	);
}

.kyc-steps__bullet {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--routeon-black-20);
}

.kyc-steps__text {
	display: flex;
	flex-direction: column;
}

.kyc-steps__label {
	color: var(--routeon-faint);
	font-size: var(--routeon-p3);
	line-height: var(--routeon-lh-text);
	white-space: nowrap;
}

.kyc-steps__item.is-current .kyc-steps__bullet {
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	border: 1px solid var(--routeon-blue);
	background: var(--routeon-bg);
}

.kyc-steps__item.is-current .kyc-steps__bullet::before {
	content: "";
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--routeon-blue);
}

.kyc-steps__item.is-current .kyc-steps__label {
	color: var(--routeon-blue);
	font-size: var(--routeon-h5);
	font-weight: 700;
	line-height: var(--routeon-lh-h-small);
}

.kyc-steps__caption {
	color: var(--routeon-blue);
	font-size: var(--routeon-p4);
	line-height: var(--routeon-lh-text);
	white-space: nowrap;
}

@media (max-width: 991px) {
	.kyc-steps {
		display: block;
		margin: 3.75rem 0 3rem;
	}

	.kyc-steps__item,
	.kyc-steps__item:first-child,
	.kyc-steps__item:nth-child(2) {
		flex: none;
	}

	.kyc-steps__item:not(:last-child)::after {
		content: none;
	}

	.kyc-steps__item + .kyc-steps__item {
		margin-top: 1.125rem;
	}

	.kyc-steps__item:not(.is-current) {
		padding-left: 64px;
	}

	.kyc-steps__label {
		white-space: normal;
	}
}