/**
 * Process Steps — The Company Dev (thecompanydev.com)
 */

.tcd-process-steps {
	--tcd-ps-icon-size: 120px;
	--tcd-ps-icon-bg: #d4e6f2;
	--tcd-ps-icon-color: #0e2a4a;
	--tcd-ps-badge-bg: #0e2a4a;
	--tcd-ps-badge-color: #ffffff;
	--tcd-ps-badge-size: 40px;
	--tcd-ps-line-color: #0e2a4a;
	--tcd-ps-line-height: 2px;
	--tcd-ps-line-gap: 8px;
	--tcd-ps-title-color: #0e2a4a;
	--tcd-ps-desc-color: #4a5568;
	--tcd-ps-gap: 24px;
	--tcd-ps-content-gap: 16px;
	width: 100%;
}

.tcd-process-steps__steps {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--tcd-ps-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.tcd-process-steps__step {
	flex: 1 1 0;
	min-width: 200px;
	margin: 0;
	padding: 0;
	text-align: center;
	position: relative;
}

.tcd-process-steps__step:not(:last-child)::before {
	content: "";
	position: absolute;
	top: calc(var(--tcd-ps-icon-size) / 2);
	left: calc(50% + (var(--tcd-ps-icon-size) / 2) + var(--tcd-ps-line-gap));
	width: calc(100% + var(--tcd-ps-gap) - var(--tcd-ps-icon-size) - (2 * var(--tcd-ps-line-gap)));
	height: var(--tcd-ps-line-height);
	background-color: var(--tcd-ps-line-color);
	transform: translateY(-50%);
	z-index: 0;
	pointer-events: none;
}

.tcd-process-steps__visual {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--tcd-ps-icon-size);
	height: var(--tcd-ps-icon-size);
	margin-bottom: var(--tcd-ps-content-gap);
	z-index: 1;
}

.tcd-process-steps__icon-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-color: var(--tcd-ps-icon-bg);
	color: var(--tcd-ps-icon-color);
	position: relative;
	z-index: 1;
}

.tcd-process-steps__icon-circle i,
.tcd-process-steps__icon-circle svg {
	font-size: calc(var(--tcd-ps-icon-size) * 0.38);
	width: 1em;
	height: 1em;
	color: var(--tcd-ps-icon-color);
	fill: var(--tcd-ps-icon-color);
}

.tcd-process-steps__icon-circle svg path {
	fill: currentColor;
}

.tcd-process-steps__badge {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: var(--tcd-ps-badge-size);
	height: var(--tcd-ps-badge-size);
	padding: 0 6px;
	border-radius: 50%;
	background-color: var(--tcd-ps-badge-bg);
	color: var(--tcd-ps-badge-color);
	font-size: calc(var(--tcd-ps-badge-size) * 0.35);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	z-index: 2;
}

.tcd-process-steps--badge-top .tcd-process-steps__badge {
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
}

.tcd-process-steps--badge-right .tcd-process-steps__badge {
	top: 50%;
	left: 100%;
	transform: translate(-50%, -50%);
}

.tcd-process-steps--badge-bottom .tcd-process-steps__badge {
	top: 100%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.tcd-process-steps--badge-left .tcd-process-steps__badge {
	top: 50%;
	left: 0;
	transform: translate(-50%, -50%);
}

.tcd-process-steps__title {
	margin: 0 0 12px;
	padding: 0;
	color: var(--tcd-ps-title-color);
	font-weight: 700;
	line-height: 1.25;
}

.tcd-process-steps__desc {
	margin: 0;
	padding: 0;
	color: var(--tcd-ps-desc-color);
	line-height: 1.6;
}

.tcd-process-steps__desc p:last-child {
	margin-bottom: 0;
}

@media (max-width: 1024px) {
	.tcd-process-steps__step {
		flex: 1 1 calc(50% - var(--tcd-ps-gap));
		min-width: 0;
	}

	.tcd-process-steps__step::before {
		display: none;
	}
}

@media (max-width: 767px) {
	.tcd-process-steps__steps {
		flex-direction: column;
		align-items: center;
	}

	.tcd-process-steps__step {
		flex: 1 1 100%;
		max-width: 420px;
		width: 100%;
	}

	.tcd-process-steps__step::before {
		display: none !important;
	}
}