.step-indicator {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 1rem;
}

.step {
    display: flex;
    align-items: center;
    margin: 0 10px;
}

.step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-right: 10px;
}

    .step-circle.active {
        background: #00456A;
        color: white;
        border: 2px solid #00456A;
    }

    .step-circle.completed {
        background: #00456A;
        color: white;
        border: 2px solid #00456A;
    }

    .step-circle.pending {
        background: transparent;
        color: #222425;
        border: 2px solid #C2C7C9;
    }

    .step-info{
        text-align: center;
        max-width: 120px;
    }

    .step-description {
        font-size: 12px;
        color: black;
    }