.progressbar-wrapper {
    /* background: #fff; */
    width: 100%;
    padding-top: 10px;
    padding-bottom: 35px;
}

.progressbar li {
    list-style-type: none;
    width: 25%;
    float: left;
    font-size: 12px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    color: #7d7d7d;
}

/* The next step is to add step circles and the connecting lines. We will be using the pseudo elements for achieving this. */
.progressbar li:before {
    width: 60px;
    height: 60px;
    content: "";
    line-height: 60px;
    border: 2px solid #dfdfdf;
    display: block;
    text-align: center;
    margin: 0 auto 3px auto;
    border-radius: 50%;
    position: relative;
    z-index: 2;
    background-color: #fff;
}
.progressbar li:after {
     width: 100%;
     height: 2px;
     content: '';
     position: absolute;
     background-color: #dfdfdf;
     top: 30px;
     left: -50%;
     z-index: 0;
}
.progressbar li:first-child:after {
     content: none;
}


/* We have used the ::before pseudo element for creating the circle. :: after pseudo element is used for adding the connecting lines.
Normal steps are completed here. Now let us see how we can make the completed steps. */

.progressbar li.active {
    color: #4EA6E7;
    font-size: 15px !important;
    /* font-weight: bold;   */
}
.progressbar li.active:before {
    border-color: #92D0FC;
    background: #4EA6E7;
 }
.progressbar li.active + li:after {
    background-color: #92D0FC;
}


/* For the completed step item, we will add a class ‘active’. The ‘active’ classes properties are background color as green. ::before pseudo element is having property of border-color: green. Yes, now our steps progress bar is ready.

Let us see what we can do to add a background image to the circles. */
.progressbar li.active:before {
    background: #92D0FC  url(user.svg) no-repeat center center;
    background-size: 60%;
}
.progressbar li::before {
    background: #fff url(user.svg) no-repeat center center;
    background-size: 60%;
}

/* Added image to all the circles and even for the active item. But when item is active, we are adding the background-color: green. Our steps progress bar has become little more stylish now.

If we want to add step numbers, we need to add few more lines of css as follows. The following css will add numbers to the steps depending on the number of list items. */

.progressbar {
    counter-reset: step;
}
.progressbar li:before {
    content: counter(step);
    counter-increment: step; 
}