.time-circle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 120px; /* Adjust if needed */
  margin: 10px;
  position: relative; /* Needed for absolute positioning inside */
}

.progress-circle {
  transform: rotate(-90deg); /* Keep the start of the progress at the top */
}

.time-number, .time-label {
  position: absolute;
  width: 100%; /* Ensure the text is centered in the circle */
  text-align: center; /* Center the text horizontally */
  white-space: nowrap; /* Keep the text in a single line */
}

.time-number {
  top: 35%; /* Adjust this value to center the time numbers vertically */
  font-size: 20px; /* Adjust based on your design */
}

.time-label {
  top: 55%; /* Adjust this value so the label is just below the time number */
  font-size: 14px; /* Adjust based on your design */
  color: #000;
}


@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {

  .time-circle {
    flex: 50%;
    flex-direction: row;
    margin: 0;
    margin-top:25px;

  }
}