.step { display: none; }
.step.active { display: block; }
.buttons { margin-top: 20px; }

/* Form Input Styling */
.form-control, .form-select {
    /*border-radius: 10px;*/
    border: 1px solid #779bbd;
}

/* Focus state for inputs */
.form-control:focus, .form-select:focus {
    border-color: #79c3f4;  /* Blue border on focus */
    box-shadow: 0 0 8px rgba(121, 195, 244, 0.6); /* Blue shadow effect */
}

.card {
    border: 1px solid #9dccfa; /* Original border color */
    background-color: #e3f0fc; /* Lighter background color */
    border-radius: 5px; /* Optional: Rounded corners */
    padding: 10px; /* Padding inside the card */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Light shadow for a subtle 3D effect */
}

.educationRow {
    border: 1px solid #9dccfa !important;
}

.progressbar {
    display: flex;
    justify-content: space-between;
    position: relative;
    width: 98%;
    padding: 5px 0; /* space for circles and titles */
}

/* Line connecting circles */
.progressbar::before {
    content: "";
    position: absolute;
    top: 50%; /* vertical center of circles */
    left: 20px; /* half of first circle */
    right: 20px; /* half of last circle */
    height: 4px;
    background-color: #dcdcdc;
    z-index: 0;
    transform: translateY(-50%);
}

/* Circles */
.progress-step {
    width: 40px;
    height: 40px;
    background-color: #dcdcdc;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    font-weight: bold;
    color: #555;
    position: relative;
    z-index: 1;
    flex-shrink: 0; /* prevent shrinking on smaller screens */
}

/* Step Titles */
.progress-step::after {
    content: attr(data-title);
    display: block;
    font-size: 12px;
    color: #333;
    margin-top: 10px;
    text-align: center;
    width: max-content;
    white-space: nowrap;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
}

/* Highlight current step */
.progress-step.active {
    background-color: #007bff;
    color: white;
    box-shadow: 0 0 5px #007bff;
}

/* Completed steps */
.progress-step.completed {
    background-color: #007bff;
    color: white;
}