.form-step {
	display: none;
	animation: animate 0.5s;
	transform-origin: top;
}

.form-step-active {

	display: block;
}

@keyframes animate {

	from {
		transform: scale(1, 0);
		opacity: 0;
	}

	to {
		transform: scale(1, 1);
		opacity: 1;
	}
}

.progressbar-stepper {

	position: relative;
	display: flex;
	justify-content: space-between;
	margin: 2rem 0 4rem;
}
.progressbar-stepper::before, .progress-line {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	height: 4px;
	width: 100%;
	background-color: #dcdcdc;
	counter-reset: step;
	z-index: -1;
}

.progress-line {
	background-color: #3490dc;
	width: 0;
}

.progress-step {
	width: 2.1875rem;
	height: 2.1875rem;
	background-color: #dcdcdc;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	
}

.progress-step::before {

	counter-increment: step;
	content:  counter(step);
}

.progress-step::after {

	content:  attr(data-title);
	position: absolute;
	top: calc(100% + 0.5rem);
	font-size: 0.85rem;
	color: #000000;

}

.progress-step-active {
	background-color: #3490dc;
	color: #000000;
}