:root {
 --primary-color: #1e3a8a;
   --hover-color: #3c559c;
}
        .progress-container {
            width: 70%;
            height: 4px;
            margin-left: 80px;
            background-color: #d1d5db;
            border-radius: 10px;
            overflow: hidden;

        }


        .progress-bar-left {
            height: 100%;
            background-color: var(--primary-color);
            border-radius: 10px;
            transition: width 0.3s ease;
        }

        .progress-bar-right {
    height: 100%;
    background-color: var(--primary-color);
    border-radius: 10px;
    transition: width 0.3s ease;
    margin-left: auto; /* This pushes it to the right */
}

        /* Different Progress Levels */
        .progress-25 { width: 25%; }
        .progress-50 { width: 50%; }
        .progress-75 { width: 75%; }
        .progress-100 { width: 100%; }

        /* Alternative Design with Steps */
        .step-progress {
            display: flex;
            width: 100%;
            height: 8px;
            gap: 4px;
            margin: 20px 0;
        }

        .step {
            flex: 1;
            height: 100%;
            background-color: #d1d5db;
            border-radius: 10px;
        }

        .step.active {
            background-color: #ea5234;
        }

        /* Labels */
        .progress-label {
            margin-bottom: 10px;
            font-weight: 600;
            color: #333;
        }

        /* Demo Container */
        .demo {
            max-width: 600px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }