.step-name.completed{ color:green; } .stepper-wrapper { margin-top: auto; display: flex; justify-content: space-between; margin-bottom: 20px; margin-left: -60px; margin-right: -60px; } .stepper-item { position: relative; display: flex; flex-direction: column; align-items: center; flex: 1; @media (max-width: 768px) { font-size: 12px; } } .stepper-item::before { position: absolute; content: ""; border-bottom: 2px solid #ccc; width: 100%; top: 10px; left: -50%; z-index: 2; } .stepper-item::after { position: absolute; content: ""; border-bottom: 2px solid #ccc; width: 100%; top: 10px; left: 50%; z-index: 2; } .stepper-item .step-counter { position: relative; z-index: 5; display: flex; justify-content: center; align-items: center; width: 20px; height: 20px; border-radius: 50%; background: #0c274c; } .stepper-item.active { font-weight: bold; } .stepper-item.completed .step-counter { background-color: #0C274C; } .stepper-item.completed::after { position: absolute; content: ""; border-bottom: 2px solid #0C274C; width: 100%; top: 10px; left: 50%; z-index: 3; } .stepper-item:first-child::before { content: none; } .stepper-item:last-child::after { content: none; }