.stepper-wrapper {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}
.stepper-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    cursor: pointer;
    transition: 0.3s;
}
.stepper-item:hover .step-counter {
    background-color: #0d6efd;
    color: white;
}
.stepper-item::before {
    position: absolute;
    content: "";
    border-bottom: 2px solid #ccc;
    width: 100%;
    top: 20px;
    left: -50%;
    z-index: -1;
}
.stepper-item:first-child::before { content: none; }
.step-counter {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ccc;
    margin-bottom: 6px;
    color: white;
    font-weight: bold;
}
.active .step-counter { background-color: #0d6efd; }
.active .step-name { color: #0d6efd; font-weight: bold; }
.step-name { font-size: 12px; color: #666; text-transform: uppercase; }