/* Progress Container Styles */
.progress-container {
    width: 100%;
    background-color: #ffffff; /* Background color for the container */
    border-radius: 25px;
    margin: 15px 0;
    height: 25px; /* Adjust height as needed */
    position: relative;
    overflow: hidden;
    border: 1px solid #ccc; /* Optional: adds a light border for better visibility */
}

/* Progress Bar Wrapper */
.progress-bar {
    width: 100%;
    height: 100%;
    position: relative;
}

/* Progress Bar Fill */
.progress-bar .progress {
    background-color: #FE5102; /* Orange fill color */
    height: 100%;
    border-radius: 25px 0 0 25px; /* Rounded edges on the left side */
    position: absolute; /* Position the fill absolutely to avoid affecting text alignment */
    top: 0;
    left: 0;
    z-index: 1; /* Ensure the progress bar is below the text */
}

/* Centered Text Inside Progress Container */
.progress-container::before {
    content: attr(data-label); /* Displays the text */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #333333; /* Text color */
    font-weight: bold;
    font-size: 14px; /* Adjust font size as needed */
    white-space: nowrap; /* Prevents text from wrapping */
    z-index: 2; /* Ensure the text is above the progress bar */
}