:root{
    --step-size: 34px;
}

.stepper{
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    width:min(500px, 100%);
    margin:auto;
    margin-inline:auto;
    margin-bottom: 30px;
    position:relative;
}

.stepper::before{
    content:"";
    position:absolute;
    top:20px;

    left:calc(12.5% + 21px);
    right:calc(12.5% + 21px);

    height:3px;
    background:#dee2e6;
    z-index:1;
}

.stepper-progress{
    position:absolute;
    top:20px;

    left:calc(12.5% + 21px);

    height:3px;
    width:0;

    background:#0d6efd;
    transition:.35s ease;

    z-index:2;
}

.step{
    position:relative;
    z-index:3;
    text-align:center;
    flex:1;
    cursor:pointer;
}

.step-circle{
    width: var(--step-size);
    height: var(--step-size);
    margin: auto;
    border-radius: 50%;
    background: #7a9bc4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:.85rem;
    font-weight:600;
    color: #ffffff;
    transition: .25s;
}

.step-label{
    margin-top:10px;
    font-size:.92rem;
    color:#183861;
}

.step.completed .step-circle{
    background:#183861;
    color:#fff;
}

.step.completed .step-label{
    color:#000;
    font-weight:600;
}

.step.active .step-circle{
    background: #183861;
    border: 1px solid #FFF;
    color: #ffffff;
    transform: scale(1.08);
    box-shadow: 0 0 0 5px rgb(6 251 18 / 31%)
}

.step.active .step-label{
    color:#183861;
    font-weight:700;
}

.step.disabled{
    cursor:default;
}

.step.disabled:hover{
    cursor:not-allowed;
}