/* Here css for hrRecruitmentModal */
 #hrRecruitmentModal .modal-body {
     box-sizing: border-box;
     font-family: Arial, sans-serif;
 }

 /* OVERLAY */
 .modal-overlay {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, .6);
     display: none;
     align-items: center;
     justify-content: center;
     z-index: 9999;
 }

 /* MODAL CARD */
 .modal-card {
     width: 100%;
     max-width: 520px;
     margin: 16px;
     background: rgba(255, 255, 255, .96);
     border-radius: 22px;
     box-shadow: 0 25px 60px rgba(0, 0, 0, .3);
     overflow: hidden;
 }

 /* HEADER */
 .modal-header {
     background: linear-gradient(135deg, #1e4c5e, #2b7a94);
     padding: 18px 22px;
     color: white;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .modal-header h3 {
     margin: 0;
     font-size: 18px;
 }

 .close-btn {
     background: none;
     border: none;
     font-size: 24px;
     color: white;
     cursor: pointer;
     margin: 0px 0px 0px 160px;
 }

 /* BODY */
 .modal-body {
     padding: 24px;
     max-height: calc(100vh - 120px);
     overflow-y: auto;
 }

 /* STEP HEADER */
 .step-progress {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 24px;
 }

 .step {
     width: 34px;
     height: 34px;
     border-radius: 50%;
     background: #cbd5e1;
     color: white;
     font-weight: bold;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .step.active {
     background: #1e4c5e;
 }

 .line {
     flex: 1;
     height: 3px;
     background: #cbd5e1;
 }

 /* FORM */
 .form-step {
     display: none;
 }

 .form-step.active {
     display: block;
 }

 .form-step h4 {
     margin-bottom: 16px;
     font-size: 16px;
 }

 /* INPUTS */
 #hrRecruitmentModal input,
 #hrRecruitmentModal select {
     width: 100%;
     padding: 14px 16px;
     margin-bottom: 14px;
     border-radius: 30px;
     border: 1px solid #ccc;
     outline: none;
     font-size: 14px;
     box-sizing: border-box;
 }

 input:focus,
 select:focus {
     border-color: #1e4c5e;
 }

 /* BUTTONS */
 .button-group {
     display: flex;
     justify-content: space-between;
     margin-top: 20px;
 }

 button {
     padding: 10px 22px;
     border-radius: 20px;
     border: none;
     cursor: pointer;
 }

 #prevBtn {
     background: #e5e7eb;
 }

 #nextBtn {
     background: #1e4c5e;
     color: white;
 }

 #submitBtn {
     background: #16a34a;
     color: white;
     display: none;
 }

 /* MOBILE */
 @media(max-width:480px) {
     .modal-header h3 {
         font-size: 16px;
     }
 }

 /* Modal styling end */

 #careerModal .modal-content {
     border-radius: 15px;
     padding: 20px;
     font-family: 'Arial', sans-serif;
 }

 #careerModal .modal-header0 {
     /* border-bottom: none;
        padding-bottom: 0; */
     background: linear-gradient(135deg,  #1e4c5e, #2b7a94);
     padding: 18px 22px;
     color: white;
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 20px;
     border-radius: 10px;
 }

 #careerModal .modal-title {
     font-size: 22px;
     font-weight: 600;
     /* color: #333; */
 }

 #careerModal .close {
     font-size: 28px;
     color: white;
 }

 #careerModal .form-control {
     border-radius: 12px;
     padding: 12px 15px;
     font-size: 16px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
     transition: 0.3s;
     height: 45px;
 }

 #careerModal .form-control:focus {
     border-color: #1e4c5e;
     box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
 }

 #careerModal .formpadding {
     margin-bottom: 18px;
 }

 #careerModal .signup-submit-and-options input[type="submit"] {
     border-radius: 25px;
     padding: 12px 30px;
     font-size: 16px;
     background: #004e75;
     color: #fff;
     border: none;
     transition: 0.3s;
 }

 #careerModal .signup-submit-and-options input[type="submit"]:hover {
     background: #004e75;
 }

 #careerModal select.form-control {
     border-radius: 12px;
     padding: 10px 15px;
     font-size: 16px;
     height: 45px;
     color: gray;
 }

 #careerModal .drag-area {
     border: 2px dashed #007bff;
     border-radius: 12px;
     padding: 25px;
     text-align: center;
     cursor: pointer;
     transition: 0.3s;
     color: #333;
 }

 #careerModal .drag-area:hover {
     background: #f0f8ff;
 }

 #careerModal .drag-area i {
     font-size: 36px;
     margin-bottom: 10px;
     color: #007bff;
 }

 #ageDisplay {
     font-size: 16px;
     font-weight: 500;
     color: #555;
 }

 /* Responsive padding */
 @media (max-width: 576px) {
     #careerModal .modal-content {
         padding: 15px;
     }
 }

 .hidden {
     display: none;
 }

 .form-footer {
     margin-bottom: 2em !important;
 }

 .type-hidden {
     display: none !important;
 }

 form.animated-label-form .animated-label input {
     padding: 6px 12px !important;
 }

 .alert {
     padding: 20px;
     background-color: #f44336;
     color: white;
     opacity: 1;
     transition: opacity 0.6s;
     margin-bottom: 15px;
 }

 .alert.success {
     background-color: #04AA6D;
 }

 .alert.info {
     background-color: #2196F3;
 }

 .alert.warning {
     background-color: #ff9800;
 }

 .closebtn {
     margin-left: 15px;
     color: white;
     font-weight: bold;
     float: right;
     font-size: 22px;
     line-height: 20px;
     cursor: pointer;
     transition: 0.3s;
 }

 .closebtn:hover {
     color: black;
 }

 .drag-area {
     border: 2px dashed #c9c7c5;
     ;
     width: 100%;
     border-radius: 5px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     padding: 10px;
     background-color: #fff;
 }

 .drag-area.active {
     border: 2px solid #004e75;
     ;
 }

 .drag-area header {
     font-size: 20px;
     font-weight: 500;
     margin-bottom: 15px;
 }

 .drag-area .icon {
     font-size: 60px;
     color: #004e75;
 }

 .drag-area p {
     padding: 8px 18px;
     font-weight: 500;
     background: #004e75;
     color: #fff;
     border-radius: 5px;
     cursor: pointer;
 }

 .drag-area img {
     height: 100%;
     width: 100%;
     object-fit: cover;
     border-radius: 5px;
 }

 .hide-field {
     display: none !important;
 }