.progress_cont {
display: flex;
justify-content: space-between;
position: relative;
margin: 30px auto;
width: 95%;
max-width: 700px;
}

.progress_cont::before {
content: "";
background-color: #A2DBA5;
position: absolute;
top: 50%;
left: 0;
height: 4px;
width: 100%;
transform: translateY(-50%);
z-index: 20;
}

.progress {
background-color: #3C8A3F;
position: absolute;
top: 50%;
left: 0;
height: 4px;
width: 0%;
transform: translateY(-50%);
transition: 0.4s ease;
z-index: 30;
}
.circle {
background-color: #fff;
color: #999;
border-radius: 50%;
height: 30px;
width: 30px;
display: flex;
align-items: center;
justify-content: center;
border: 3px solid #dcdcdc;
transition: 0.4s ease;
z-index: 50;
}
.circle p{
position: absolute;
bottom: -30px;
font-size: 70%;
color: #4caf50;
font-weight: 600;
white-space: nowrap;
}
.circle.active {
border-color: #4caf50;
color: #ffffff;
background-color: #3C8A3F;
}