.progress-1 {
        position: relative;
        height: 12px;
        width: 80%;
        border: 2px solid silver;
        border-radius: 15px;
        overflow: hidden;
        /* Ensures that the moving element is clipped to the container's bounds */

        background-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, gray 25%, rgba(0,0,250,0) 50%, gainsboro 75%, rgba(0,0,0,0) 100%);
        background-size: 200% 100%; /* Width is double the container's width to allow smooth animation */
        animation: slide 2s linear infinite;
    }

    .progress-1-color {
        position: absolute;
        background-color: gainsboro;
        /* width: 0px; */
        width: 15%;
        height: 8px;
        border-radius: 1px;
        /* animation: progres 4s infinite linear; */
        animation: marquee 4s linear infinite; /* Updated animation name and timing */
    }

    @keyframes slide {
        from { background-position: 100% 0; }
        to { background-position: 0 0; }
    }

    @keyframes marquee {
        0% {
            left: -50%; /* Start from outside the left edge */
        }
        100% {
            left: 100%; /* Move to the right, beyond the container's edge */
        }
    }

    @keyframes progres_OLD {
        0% {
            width: 0%;
        }

        25% {
            width: 50%;
        }

        50% {
            width: 75%;
        }

        75% {
            width: 85%;
        }

        100% {
            width: 100%;
        }
    }

    ;