.progress-container-main {
  width: 300px;
  height: 30px;
  background-color: #3b2e56;  /* unfilled background */
  border-radius: 999px;       /* fully rounded ends */
  overflow: hidden;
}

.progress-bar-main {
  height: 100%;
  width: 0%;
  background-color: #1ccfcf;  /* filled color */
  text-align: right;
  padding-right: 10px;
  color: white;
  font-weight: bold;
  line-height: 30px;
  /* transition: width 0.5s ease; */
  border-radius: 999px 0 0 999px;  /* rounded only on left */
}

.progress-container {
  width: 300px;
  background-color: #eee;
  border-radius: 20px;
  overflow: hidden;
}

.progress-bar {
  background-color: #4cd964;
  height: 30px;
  line-height: 30px;
  color: white;
  font-weight: bold;
  transition: width 0.5s ease;
  text-align: right;          /* Align text to the right */
  padding-right: 10px;        /* Add space between text and edge */
}