.progress-bar {
  position: relative;
  border-radius: 50px;
  border: none;
  height: 35px;
  width: 100%;
  margin: 10px 0px;
  /* overflow: hidden; */
}



.progress {
  background: #EDEDED;
  border-radius: 50px;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transition: all 2s;
}

.progress-bar .road{
  width: calc(100% - 40px);
  position: absolute;
  height: 100%;
  margin: 0px 20px;
  background-image: linear-gradient(to right, white 33%, rgba(255,255,255,0) 0%);
  background-position: center;
  background-size: 40px 1px;
  background-repeat: repeat-x;
}


.progress-bar .car{
  position: absolute;
  height: 40px;
  width: auto;
  transition: all 2s;
  transform: translateY(-80%);
  animation: carmove infinite 2s;
  z-index: 10;
}

.custom-content{
  display: flex;
  margin-top: 10px;
  width: 100%;
}

.custom-content .dot {
  max-width: 150px;
  height: fit-content;
  text-align: center;
}

.progress-bar .goal{
  position: absolute;
  height: 45px;
  width: auto;
  right: 0px;
  top: -5px;
}



.card-unit .progress-bar,
.card-lesson .progress-bar,
.card-ranking .progress-bar,
#course-breadcrumb .progress-bar {
  border-color: var(--site-secondary);
  background: #EDEDED;
}

.card-unit .progress,
.card-lesson .progress,
.card-ranking .progress,
#course-breadcrumb .progress {
  background: var(--site-secondary);
}


@keyframes carmove {
  0%{
    transform: translateY(-78%) rotateZ(.5deg);
  }
  50%{
    
    transform: translateY(-80%) rotateZ(-.5deg);
  }
  100%{
    transform: translateY(-78%) rotateZ(.5deg);
  }
}