ul.check-out-top-bar {
  padding: 0 4vw;
  width: 100%;
  height: 10vw;
  position: relative;
  justify-content: space-between !important;
}

ul.check-out-top-bar > li {
  padding: 0.7vw;
  width: 3.2vw;
  height: 3.2vw;
  border-radius: 0.75vw;
  position: relative;
  transition: all 0.25s ease-in-out;
  background-color: #f1f4f9;
  transition-delay: 0.15s;
}

ul.check-out-top-bar > li h5 {
  width: 250%;
  font-weight: 500;
  font-size: 1vw;
  position: absolute;
  bottom: -2.5vw;
  color: #b7bfc5;
  transition: all 0.25s ease-in-out;
  text-align: center;
  transition-delay: 0.15s;
}

ul.check-out-top-bar > li.active h5 {
  color: var(--dark-box-bg);
  font-weight: 600;
}

ul.check-out-top-bar > li.active {
  background-color: var(--green);
}

ul.check-out-top-bar > li svg {
  width: 100%;
  height: 100%;
  transition: all 0.25s ease-in-out;
  pointer-events: none !important;
}

ul.check-out-top-bar > li svg path {
  transition: all 0.25s ease-in-out;
  stroke: #b7bfc5;
}

ul.check-out-top-bar > li:nth-child(4) svg path,
ul.check-out-top-bar > li:nth-child(5) svg path {
  stroke: none !important;
  fill: #b7bfc5;
}

ul.check-out-top-bar > li.active svg path {
  stroke: var(--light-bg);
}

ul.check-out-top-bar > li:nth-child(4).active svg path,
ul.check-out-top-bar > li:nth-child(5).active svg path {
  stroke: none !important;
  fill: var(--light-bg);
}

ul.check-out-top-bar ul.progress-bar2 {
  padding: 8vw;
  width: 100%;
  position: absolute;
  right: 0;
  justify-content: space-between !important;
}

ul.check-out-top-bar ul.progress-bar2 li {
  width: 28%;
  height: 0.1vw;
  background-color: #f1f4f9;
  transition: all 0.25s ease-in-out;
}

ul.check-out-top-bar ul.progress-bar2 li.active {
  background-color: var(--green2);
}

@media (max-width: 450px) {
  ul.check-out-top-bar {
    margin-bottom: 12.9vw;
  }
  ul.check-out-top-bar > li {
    padding: 1.2vw;
    width: 9.9vw;
    height: 9.9vw;
    border-radius: 2vw;
    position: relative;
    transition: all 0.25s ease-in-out;
    transition-delay: 0s;
    background-color: #f1f4f9;
    transition-delay: 0.15s;
  }
  ul.check-out-top-bar ul.progress-bar2 li {
    width: 28%;
    height: 0.4vw;
    background-color: #f1f4f9;
    transition: all 0.25s ease-in-out;
  }
  ul.check-out-top-bar > li h5 {
    width: 250%;
    font-weight: 500;
    font-size: 2.78vw;
    position: absolute;
    bottom: -7.1vw;
    color: #b7bfc5;
    transition: all 0.25s ease-in-out;
    transition-delay: 0s;
    text-align: center;
    transition-delay: 0.15s;
  }
}