.progres ul{
    text-align: center;
}
.progres ul li{
    display: inline-block;
    width: 15%;
    position: relative;
}
.progres ul li .fa{
    width: 30px;
    height: 30px;
    border-radius: 14px;
    background-color: rgb(71, 68, 68);
    color: ghostwhite;
    padding: 5px;
}
.progres ul li .fa::after{
    content: '';
    height: 5px;
    width: 110%;
    background-color: rgb(71, 68, 68);
    display: block;
    position: absolute;
    left: 0;
    top: 12px;
    z-index: -1;
}
.progres ul li:first-child .fa::after{
    width: 55%;
    left: 55%;
}
.progres ul li:last-child .fa::after{
    width: 55%;
}
.progres ul li:nth-child(1) .fa{
    background-color: #060361;
}
.progres ul li:nth-child(1) .fa::after{
    background-color: #060361;
}
#step4{
    display: none;
}
#step3{
    display: none;
}
#step2{
    display: none;
}
#step5{
    display: none;
}
/* for step two*/
.progres2 ul{
    text-align: center;
}
.progres2 ul li{
    display: inline-block;
    width: 15%;
    position: relative;
}
.progres2 ul li .fa{
    width: 30px;
    height: 30px;
    border-radius: 14px;
    background-color: rgb(71, 68, 68);
    color: ghostwhite;
    padding: 5px;
}
.progres2 ul li .fa::after{
    content: '';
    height: 5px;
    width: 110%;
    background-color: rgb(71, 68, 68);
    display: block;
    position: absolute;
    left: 0;
    top: 12px;
    z-index: -1;
}
.progres2 ul li:first-child .fa::after{
    width: 55%;
    left: 55%;
}
.progres2 ul li:last-child .fa::after{
    width: 55%;
}
.progres2 ul li:nth-child(1) .fa{
    background-color: #060361;
}
.progres2 ul li:nth-child(1) .fa::after{
    background-color: #060361;
}
.progres2 ul li:nth-child(2) .fa{
    background-color: #060361;
}
.progres2 ul li:nth-child(2) .fa::after{
    background-color: #060361;
}


/* for step three*/
.progres3 ul{
    text-align: center;
}
.progres3 ul li{
    display: inline-block;
    width: 15%;
    position: relative;
}
.progres3 ul li .fa{
    width: 30px;
    height: 30px;
    border-radius: 14px;
    background-color: rgb(71, 68, 68);
    color: ghostwhite;
    padding: 5px;
}
.progres3 ul li .fa::after{
    content: '';
    height: 5px;
    width: 110%;
    background-color: rgb(71, 68, 68);
    display: block;
    position: absolute;
    left: 0;
    top: 12px;
    z-index: -1;
}
.progres3 ul li:first-child .fa::after{
    width: 55%;
    left: 55%;
}
.progres3 ul li:last-child .fa::after{
    width: 55%;
}
.progres3 ul li:nth-child(1) .fa{
    background-color: #060361;
}
.progres3 ul li:nth-child(1) .fa::after{
    background-color: #060361;
}
.progres3 ul li:nth-child(2) .fa{
    background-color: #060361;
}
.progres3 ul li:nth-child(2) .fa::after{
    background-color: #060361;
}
.progres3 ul li:nth-child(3) .fa{
    background-color: #060361;
}
.progres3 ul li:nth-child(3) .fa::after{
    background-color: #060361;
}


/* for step four*/
.progres4 ul{
    text-align: center;
}
.progres4 ul li{
    display: inline-block;
    width: 15%;
    position: relative;
}
.progres4 ul li .fa{
    width: 30px;
    height: 30px;
    border-radius: 14px;
    background-color: rgb(71, 68, 68);
    color: ghostwhite;
    padding: 5px;
}
.progres4 ul li .fa::after{
    content: '';
    height: 5px;
    width: 110%;
    background-color: rgb(71, 68, 68);
    display: block;
    position: absolute;
    left: 0;
    top: 12px;
    z-index: -1;
}
.progres4 ul li:first-child .fa::after{
    width: 55%;
    left: 55%;
}
.progres4 ul li:last-child .fa::after{
    width: 55%;
}
.progres4 ul li:nth-child(1) .fa{
    background-color: #060361;
}
.progres4 ul li:nth-child(1) .fa::after{
    background-color: #060361;
}
.progres4 ul li:nth-child(2) .fa{
    background-color: #060361;
}
.progres4 ul li:nth-child(2) .fa::after{
    background-color: #060361;
}
.progres4 ul li:nth-child(3) .fa{
    background-color: #060361;
}
.progres4 ul li:nth-child(3) .fa::after{
    background-color: #060361;
}
.progres4 ul li:nth-child(4) .fa{
    background-color: #060361;
}
.progres4 ul li:nth-child(4) .fa::after{
    background-color: #060361;
}


/* for step five*/
.progres5 ul{
    text-align: center;
}
.progres5 ul li{
    display: inline-block;
    width: 15%;
    position: relative;
}
.progres5 ul li .fa{
    width: 30px;
    height: 30px;
    border-radius: 14px;
    background-color: rgb(71, 68, 68);
    color: ghostwhite;
    padding: 5px;
}
.progres5 ul li .fa::after{
    content: '';
    height: 5px;
    width: 110%;
    background-color: rgb(71, 68, 68);
    display: block;
    position: absolute;
    left: 0;
    top: 12px;
    z-index: -1;
}
.progres5 ul li:first-child .fa::after{
    width: 55%;
    left: 55%;
}
.progres5 ul li:last-child .fa::after{
    width: 55%;
}
.progres5 ul li:nth-child(1) .fa{
    background-color: #060361;
}
.progres5 ul li:nth-child(1) .fa::after{
    background-color: #060361;
}
.progres5 ul li:nth-child(2) .fa{
    background-color: #060361;
}
.progres5 ul li:nth-child(2) .fa::after{
    background-color: #060361;
}
.progres5 ul li:nth-child(3) .fa{
    background-color: #060361;
}
.progres5 ul li:nth-child(3) .fa::after{
    background-color: #060361;
}
.progres5 ul li:nth-child(4) .fa{
    background-color: #060361;
}
.progres5 ul li:nth-child(4) .fa::after{
    background-color: #060361;
}
.progres5 ul li:nth-child(5) .fa{
    background-color: #060361;
}
.progres5 ul li:nth-child(5) .fa::after{
    background-color: #060361;
}