.steps {
 display: flex;
 justify-content: space-between;
 list-style: none;
 padding: 0;
 margin: 0;
 position: relative;
 }

 .steps::before {
 content: "";
 position: absolute;
 top: 21px;
 left: 16.67%;
 right: 16.67%;
 height: 4px;
 background: #dee2e6;
 z-index: 1;
 }

 .steps li {
 flex: 1;
 text-align: center;
 position: relative;
 z-index: 2;
 color: #6c757d;
 font-size: 14px;
 font-weight: 600;
 }

 .steps li span {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 42px;
 height: 42px;
 margin: 0 auto 10px;
 border-radius: 50%;
 background: #dee2e6;
 color: #6c757d;
 font-weight: bold;
 border: 3px solid #dee2e6;
 }

 .steps li.completed span {
 background: #198754;
 border-color: #198754;
 color: #fff;
 }

 .steps li.completed {
 color: #198754;
 }

 .steps li.active span {
 background: #0d6efd;
 border-color: #0d6efd;
 color: #fff;
 box-shadow: 0 0 0 4px rgba(13, 110, 253, .2);
 }

 .steps li.active {
 color: #0d6efd;
 }