/* --- THE REQUESTED PROGRESS BAR CSS --- */
        .progress-container {
            /* Takes 100% of the width of its parent */
            width: 100%; 
            margin-bottom: 8px;
            /* Background of the empty track */
            background-color: #000000; 
            
            /* The requested padding */
            padding-top: 1px; 
            padding-bottom: 1px; 
            
            /* Styling to make it look nice */
            border-radius: 4px;
            box-shadow: inset 0 0.5px 1px rgba(0,0,0,0.1);
            box-sizing: border-box; /* Ensures padding doesn't break width */
            overflow: hidden;
        }

        .progress-fill {
            height: 1.2vh; /* Height of the actual colored bar */
            width: 0%; /* Start at 0% */
            background: linear-gradient(90deg, #DCB056, #DCB056);
            border-radius: 4px; /* Slightly less than container to fit nicely */
            /* Smooth animation */
            transition: width 0.6s ease-out;
            
            /* Text styling inside bar */
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 12px;
            font-weight: bold;
            white-space: nowrap;
        }
        /* -------------------------------------- */



        @media (min-width: 1024px) {
            .progress-container{
            margin-top: 32px;
            margin-bottom: 32px;
            }

        }