/* Container for the entire stepper bar */
        .stepper-container {
            display: flex; /* Use flexbox for horizontal layout */
            justify-content: center; /* Center the steps horizontally */
            align-items: center; /* Align items vertically in the center */
            margin-top: 2rem; /* Add some top margin for spacing */
            position: relative; /* Essential for absolute positioning of arrows */
            padding: 1rem 0; /* Add some vertical padding */
        }

        /* Styling for each individual step item */
        .step-item {
            display: flex; /* Flexbox for number and text within the step */
            flex-direction: column; /* Stack number and text vertically */
            align-items: center; /* Center content horizontally within the step */
            position: relative; /* Needed for z-index to bring step content above arrows */
            z-index: 1; /* Ensures step content is visible above connector lines */
            padding: 0 1.5rem; /* Horizontal padding for spacing between steps */
            flex-shrink: 0; /* Prevent steps from shrinking */
        }

        /* Styling for the circular step number */
        .step-number {
            background-color: #00d1b2; /* Bulma's primary color for default state */
            color: white; /* White text for contrast */
            border-radius: 50%; /* Makes the element a perfect circle */
            width: 45px; /* Fixed width for the circle */
            height: 45px; /* Fixed height for the circle */
            display: flex; /* Flexbox to center the number inside the circle */
            justify-content: center;
            align-items: center;
            font-weight: bold; /* Bold text for the number */
            font-size: 1.3rem; /* Larger font size for visibility */
            margin-bottom: 0.5rem; /* Space between number and text */
            box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Subtle shadow for depth */
        }

        /* Styling for the step text (e.g., Registration, Verification) */
        .step-text {
            font-weight: bold; /* Bold text for clarity */
            color: #4a4a4a; /* Bulma's default text color */
            text-align: center; /* Center the text */
            font-size: 0.95rem; /* Slightly smaller font for text */
            white-space: nowrap; /* Prevent text from wrapping */
        }

        /* Base styling for the connecting arrows */
        .arrow {
            position: absolute; /* Position arrows relative to .stepper-container */
            height: 3px; /* Thickness of the arrow line */
            background-color: #dbdbdb; /* Light grey for the connector line */
            top: calc(50% - 10px); /* Adjust top to align with the center of the step numbers */
            transform: translateY(-50%); /* Fine-tune vertical centering */
            z-index: 0; /* Ensures arrows are behind the step items */
            transition: background-color 0.3s ease; /* Smooth transition for color changes */
        }

        /* Pseudo-element for the arrowhead */
        .arrow::after {
            content: ''; /* Required for pseudo-elements */
            position: absolute; /* Position arrowhead relative to the arrow line */
            right: -2px; /* Position at the very end of the line */
            top: 50%; /* Vertically center the arrowhead */
            width: 0;
            height: 0;
            border-top: 10px solid transparent; /* Top part of the triangle */
            border-bottom: 10px solid transparent; /* Bottom part of the triangle */
            border-left: 10px solid #dbdbdb; /* Left part of the triangle (forms the arrow point) */
            transform: translateY(-50%); /* Fine-tune vertical centering */
            transition: border-left-color 0.3s ease; /* Smooth transition for arrow color */
        }

        /* Specific positioning for the first arrow */
        .arrow-1 {
            left: calc(18% + 1.5rem); /* Adjust based on step-item width and padding */
            width: calc(33% - 3rem); /* Adjust width to connect steps */
        }

        /* Specific positioning for the second arrow */
        .arrow-2 {
            left: calc(50% + 1.5rem); /* Adjust based on step-item width and padding */
            width: calc(33% - 3rem); /* Adjust width to connect steps */
        }

        /* --- Optional: Active and Completed States --- */

        /* Style for the active step number */
        .step-item.is-active .step-number {
            background-color: #3273dc; /* Bulma's info color for active state */
            box-shadow: 0 4px 8px rgba(50, 115, 220, 0.2); /* More prominent shadow for active */
        }

        /* Style for the completed step number */
        .step-item.is-completed .step-number {
            background-color: #209cee; /* Bulma's link color for completed state */
            box-shadow: 0 2px 4px rgba(32, 158, 238, 0.15); /* Subtle shadow for completed */
        }

        /* Style for the arrow connecting to an active/completed step */
        .step-item.is-active ~ .arrow,
        .step-item.is-completed ~ .arrow {
            background-color: #209cee; /* Change arrow color when connected to active/completed step */
        }

        .step-item.is-active ~ .arrow::after,
        .step-item.is-completed ~ .arrow::after {
            border-left-color: #209cee; /* Change arrowhead color */
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .stepper-container {
                flex-direction: column; /* Stack steps vertically on small screens */
                align-items: flex-start; /* Align steps to the start */
                padding: 1rem;
            }

            .step-item {
                padding: 1rem 0; /* Adjust padding for vertical layout */
                width: 100%; /* Full width for vertical steps */
                flex-direction: row; /* Number and text side-by-side */
                justify-content: flex-start; /* Align content to the start */
            }

            .step-number {
                margin-right: 1rem; /* Space between number and text */
                margin-bottom: 0; /* Remove bottom margin */
            }

            .arrow {
                display: none; /* Hide arrows in vertical layout */
            }
        }