.form-steps {
    background-color: var(--purple);
}

.steps {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: flex-start;
    height: 100%;
    gap: 3rem;
    margin: 0 0 0 25%;
}

.step {
    display: flex;
    align-items: center;
    gap: 1rem;
    align-items: center;
    /* margin: 0 auto; */
}

.step p {
    font-size: 0.8rem;
    font-weight: 500;
}
.step a {
    text-decoration: none;
}

.step-description {
    color: #fff;
}
/* NEXT STEP */
.next-step {
    font-size: 0.6rem;
    color: var(--transparent-purple);
    padding: 0.3rem 0.5rem;
    border-radius: 50%;
    background-color: var(--transparent-purple);
    border: 4px solid var(--transparent-purple);
    outline: none;
}

/* COMPLETED STEP */
.completed-step {
    font-size: 0.6rem;
    padding: 0.3rem 0.5rem;
    border-radius: 50%;
    color: white !important;
    border-radius: 5rem;
    background-color: #5ebf8a;
    border: 4px solid #5ebf8a;
    outline: none;
}
/* ACTIVE STEP */
.active-step {
    font-size: 0.6rem;
    color: var(--white);
    padding: 0.3rem 0.5rem;
    border-radius: 50%;
    background-color: var(--white);
    border: 4px solid var(--purple);
    outline: 1px solid white;
}

.active-p {
    color: var(--transparent-purple);
}
.complete-p {
    color: var(--white);
}
.next-p {
    color: var(--transparent-white) !important;
}

.color-wh {
    color: var(--white) !important;
}