.my_stepper {
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 136px;
  gap: 20px;
}

.my_stepper_item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.my_stepper_step {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
  border: 1px var(--primary-color) solid;
  opacity: 0.3;
  gap: 10px;
  border-radius: 100px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  -ms-border-radius: 100px;
  -o-border-radius: 100px;
  --size: 40px;
  min-width: var(--size);
  width: var(--size);
  height: var(--size);
  text-align: center;
  color: var(--primary-color);
  font-size: 18px;
  font-family: 'Helvetica Neue', sans-serif !important;
  font-weight: 700;
  line-height: 24px;
  word-wrap: break-word;
}

.my_stepper_step_active {
  opacity: 1;
  background-color: var(--primary-color);
  color: white;
}

.my_stepper_text {
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: center;
  color: black;
  font-size: 14px;
  font-family: 'Helvetica Neue', sans-serif !important;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 20px;
  word-wrap: break-word;
  opacity: 0.3;
}

.my_stepper_text_active {
  opacity: 1;
}

.my_stepper_bar_container {
  display: flex;
  align-items: center;
  /*gap: 4px;*/
  gap: 0;
  height: 2px;
}

.my_stepper_bar {
  height: 2px;
  position: relative;
  background: var(--primary-color);
  width: 100%;
  height: 100%;
  width: 2.5vw;
  opacity: 0.3;
}

.my_stepper_bar_active {
  opacity: 1;
}

@media (max-width: 1024px) {
  .my_stepper_text {
    display: none;
    /*Ocultaeltextoinicialmente*/
    position: absolute;
    /*Posicionaeltextodeformaabsoluta*/
    top: -30px;
    /*Ajustasegúnseanecesario*/
    left: 50%;
    /*Centrahorizontalmente*/
    transform: translateX(-50%);
    /*Alineaciónprecisa*/
    background-color: white;
    /*Colordefondodelpensamiento*/
    border: 1px solid var(--primary-color);
    /*Bordedelpensamiento*/
    padding: 2px;
    /*Espaciadointerno*/
    white-space: nowrap;
    /*Evitaqueeltextoseajuste*/
    z-index: 10;
    color: white;
    background-color: black;
    /*Aseguraquesemuestreporencimadeotroselementos*/
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    /*Bordesredondeados*/
    opacity: 1;
  }

  .my_stepper_item:hover .my_stepper_text {
    display: block;
    /* Muestra el texto al pasar el mouse */
  }
}

@media (max-width: 1024px) {


  .my_stepper_bar {
    display: none;
  }

  .my_stepper {
    height: 2px;
    width: 100%;
  }



  .my_stepper_item {
    display: fixed;
    /* height: 2px; */
    /* background-color: var(--primary-color); */
    width: 40px;
    bottom: 0px;
    z-index: 10;
    right: -40px;


  }

  .my_stepper_step {
    font-size: 0px;
    margin: 0;
    padding: 0;
    height: 4px;
    background-color: var(--primary-color);
    width: 100%;
  }
}