.progress-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative; /* For absolute positioning of the progress line */
    padding: 0 0px; /* To ensure the nodes don't touch the edges */
}

/* Invisible progress line to serve as a background for the visible progress */
.progress-line {
    position: absolute;
    width: 100%;
    height: 5px; /* Set the thickness of the progress line */
    background-color: #e0e0e0; /* Color of the incomplete portion of the line */
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

/* The visible portion of the progress line */
.progress-line-fill {
    position: absolute;
    height: 5px; /* Should match .progress-line's height */
    background-color: #4CAF50; /* Color of the completed portion of the line */
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    border-radius: 5px; /* Slight rounding at the ends */
}

/* Nodes representing each step */
.node {
    width: 30px; /* Size of the node */
    height: 30px; /* Size of the node */
    background-color: #335973; /* Color of the node */
    border-radius: 50%; /* Make it round */
    z-index: 3; /* Above the progress line */
    display: flex;
    justify-content: center;
    align-items: center;
    color: black; /* Text color */
    text-align: center;
    position: relative; /* For positioning the step labels */
    font-size: 12px; /* Adjust the font size as needed */
}

/* Labels for the steps */
.node-label {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    /*white-space: nowrap;*/ /* Ensure the label stays on one line */
    white-space: wrap;
    line-height:1.25em;
    margin-top: 5px; /* Spacing between the node and the label */
}

.flex-container {
    display: flex;
    justify-content: space-between;
}

.left {
    flex: 1 1 auto;
    flex-basis: 50%; /* Each takes up half the width */
    justify-content: center;

}


.right {
    flex: 1 1 auto;
    flex-basis: 50%; /* Each takes up half the width */
    align-self: center;
    justify-content: center;
    padding-right:200px;
}

@media (max-width: 1200px) {
    .flex-container {
        flex-direction: column-reverse; /* Stack children vertically in reverse order */
        justify-content: center;
    }

    .left, .right {
        flex-basis: 100%; /* Each child takes full width on smaller screens */
        padding-right: 0px;
    }
}

.card-signup {
    width: 100%; /* Adjust width as needed */
    height: 860px; /* Adjust height as needed */
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.paddingSignUp{
    padding-left:500px;
    padding-right:500px;
}