.h-stepper-container {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

.h-step {
  width: 100%;
  text-align: center;
  padding: 0px 0px 16px 0px;
}

.h-step-indicator {
  position: relative;
}

.h-step-indicator .circle {
  width: 24px;
  height: 24px;
  margin: 0 auto;
  border-radius: 50%;
  background-color: var(--dda-surface-100);
  border: solid 2px var(--dda-neutral-80);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 3;
}

.h-step-indicator::before {
  content: "";
  width: calc(100% - 3px);
  height: 1px;
  border-top: dashed 1px var(--dda-neutral-variant-80);
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 1;
  transform: translate(0%, -50%);
}
.h-step .h-step-content {
  padding: 8px 16px 0px 16px;
}

.h-step .h-step-title {
  font-size: var(--font-caption);
  font-weight: var(--font-weight-medium);
  color: var(--dda-on-surface-40);
  margin-bottom: 10px;
}

.h-step .h-step-subtitle {
  font-size: var(--font-body);
  color: var(--dda-on-surface-40);
}

.h-step.completed .h-step-subtitle{
  font-weight: var(--dda-fw-400);
}

.h-step .h-step-description {
  font-size: 14px;
  color: var(--dda-on-surface-40);
}

.h-step.completed .circle{
  background: var(--dda-color-primary-40);
  border: 0px;
  position: relative;
}
.h-step.completed .circle::before{
content: "";
    width: 10px;
    height: 4px;
    border-left: solid 1px #fff;
    border-bottom: solid 1px #fff;
    position: absolute;
    transform: rotate(-45deg);
    top: 8px;
    left: 6px;
}
.h-step.active .circle {
  background-color: var(--dda-primary-variant-95);
  /* background-color: var(--dda-color-primary-40); */
  border: solid 4px var(--dda-color-primary-40);
  /* box-shadow: 0px 0px 0px 3px var(--dda-color-primary-95); */

}

.h-step.completed .h-step-indicator::before {
  width: 100%;
  border-top: solid 1px var(--dda-color-primary-40);
}

.h-step.active .h-step-title{
  color: var(--dda-color-primary-40);
}
.h-step.completed .h-step-subtitle,
.h-step.active .h-step-subtitle{
  color: var(--dda-neutral-0);
}
.h-step.completed .h-step-description,
.h-step.active .h-step-description{
  color: var(--dda-neutral-variant-30);
}

@media (max-width: 768px) {
  .h-stepper-container {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    width: 100%;
  }
}