.btn-white {
    --bs-btn-color: #000;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #f8f8f8;
    --bs-btn-hover-border-color: #f8f8f8;
    --bs-btn-focus-shadow-rgb: 217, 164, 6;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: #fff;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #fff;
    --bs-btn-disabled-border-color: #fff;
  }

  


.steps-wrapper {
    display: flex;
    justify-content: center;
    /* Centra el contenido horizontalmente */
    width: 100%;
}

.steps-container {
    display: flex;
    align-items: center;
}

.step {
    display: flex;
    align-items: center;
    position: relative;
}

.circle {
    width: 30px;
    height: 30px;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background-color: #ddd;
}

.circle.active {
    background-color: #01c7c7;
}

.line {
    width: 50px;
    /* Length of the line between steps */
    height: 2px;
    background-color: #007bff;
    /* Blue color */
    margin-left: 15px;
    /* Space between circle and line */
    margin-right: 15px;
    /* Space between line and next circle */
}