.progress-container {
  position: relative;
  max-width: 1000px;
  height: 30px;
  background-color: #eee;
  border-radius: 15px;
  overflow: visible;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin: 20px 0px 90px;
}

.progress-bar {
  position: absolute;
  left: 0;
  height: 100%;
  background: linear-gradient(to right, #C64D2E, #FFC97E);
  border-radius: 15px;
  transform-origin: left;
  width: 0%; /* Initial width, will be animated */
}

.progress-text {
  position: absolute;
  bottom: -40px;
  width: 60px;
  left: 0;
  transform: translateX(-50%);
  font-weight: 900;
  text-transform: uppercase;
  color: #000;
  opacity: 0.5;
  background-color: white;
  padding: 5px 10px;
  border-radius: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
  text-align: center;
  z-index: 10;
  transition: left 0.1s ease-out;
}
    
.progress-title {
  font-weight: bold;
  font-size: 1.25rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #000;
}

.progressblurb {
 font-weight: 300;
}

@media only screen and (max-width: 992px) {
.progress-title, .progressblurb {
  font-size: 0.95rem;
}
}