/* ================================================================

   CAREERS PAGE STYLES

   ================================================================ */



/* Hero Section */

/* Large Screen Optimizations */

@media (min-width: 1400px) {

    .careers-hero { height: 955px; padding-bottom: 0; border-radius: 0 0 20px 20px; }

}

.careers-container {

    max-width: 1130px;

    margin: 0 auto;

    padding: 0 20px;

}



.careers-hero {

    position: relative;

    width: 100%;

    height: 0;

    padding-bottom: 65.5%;

    border-radius: 0 0 20px 20px;

    overflow: hidden;

}



.careers-hero-background {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 1;

}



.careers-hero-image {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.careers-hero-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.35) 100%);

    z-index: 2;

    border-radius: inherit;

}



.careers-hero-content {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 3;

    text-align: center;

    color: white;

    width: 90%;

}



.careers-hero-inner {

    display: flex;

    flex-direction: column;

    align-items: center;

}



.careers-hero-title-wrapper {

    margin-bottom: 20px;

    height: 72px;

}



.careers-hero-desc-wrapper {

    width: 956px;

    height: 92px;

    margin: 0 auto 32px;

}



.careers-hero-title {

    font-family: 'Outfit';

    font-size: 72px;

    font-weight: 600;

    margin-bottom: 20px;

    line-height: 1.2;

}



.careers-hero-description {

    font-family: 'Outfit';

    font-size: 22px;

    line-height: 1.4;

    font-weight: 300;

    margin-bottom: 50px;

}



/* Hero Buttons */

.careers-hero-btn-wrapper { margin-top: 8px; }



.careers-hero-buttons {

    display: flex;

    gap: 16px;

    justify-content: center;

    flex-wrap: wrap;

}



.careers-btn {
    display: inline-flex;
    padding: 15px 24px;
    justify-content: center;
    align-items: center;
    border-radius: 90px;
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}



.careers-btn-primary {

    background-color: #1989FB;

    color: white;

    border: none;

}



.careers-btn-primary:hover {

    background-color: #0d7be8;

    transform: translateY(-2px);

}



.careers-btn-secondary {

    background-color: white;

    color: #0D0100;

    border: 1px solid #0D0100;

}



.careers-btn-secondary:hover {

    background-color: #f8f9fa;

    transform: translateY(-2px);

}



/* Main Contents */

.careers-section { padding: 60px 0; background-color: #fff; }



.careers-title-wrapper { text-align: center; margin-bottom: 30px; }

.careers-title { font-family: 'Outfit'; font-size: 34px; font-weight: 500; color: #0D0100; margin: 0; line-height: 34px; letter-spacing: 2px; }



.careers-desc-wrapper { margin-bottom: 56px; }

.careers-description { font-family: 'Outfit'; font-size: 24px; line-height: 37px; color: #0D0100; font-weight: 400; margin: 0; }



/* Search Controls */

.careers-search-wrapper { display: flex; justify-content: center; margin-bottom: 50px; }

.careers-search-form { gap: 8px; display: flex; width: 100%; border-radius: 8px; overflow: hidden; }



.careers-search-input { 

    flex: 1; height: 50px; padding: 14px 24px; 

    border: 0.8px solid #CAD5E2; border-radius: 10px;

    font-size: 16px; font-family: 'Inter', sans-serif; color: #0D0100;

}

.careers-search-input::placeholder { color: rgba(0, 0, 0, 0.4); }

.careers-search-input:focus { outline: none; }



.careers-search-btn {

    min-width: 114px; height: 50px; border-radius: 10px;

    background: #1989FB; border: 0.8px solid #CAD5E2;

    font-family: 'Outfit'; font-size: 18px; font-weight: 400; color: #FFFFFF;

    line-height: 24px; letter-spacing: 0px; text-align: center;

    cursor: pointer; transition: background-color 0.3s ease;

}

.careers-search-btn:hover { background-color: #0d7be8; }



.careers-jobs-table-wrapper {

    border: 1px solid rgba(0, 0, 0, 0.05);

    border-radius: 12px;

    overflow: hidden;

    background: #fff;

    box-shadow: 0px 1px 3px 0px #0000001A;

}



.careers-jobs-table {

    width: 100%;

    border-collapse: collapse;

}



.careers-jobs-table th {

    text-align: left;

    font-family: 'Outfit';

    font-size: 16px;

    font-weight: 600;

    line-height: 24px;

    color: #0D0100;

    border-bottom: 1px solid rgba(0, 0, 0, 0.05);

}



.careers-jobs-table td {

    font-family: 'Inter';

    line-height: 24px;

    font-size: 16px;

    color: #0D0100;

    border-bottom: 1px solid rgba(0, 0, 0, 0.05);

}



.careers-jobs-table tr:last-child td {

    border-bottom: none;

}

.careers-jobs-table th {

    background-color: #FFFFFF;

}

table {

    margin-top: unset;

}



.job-link {

    color: #155DFC;

    text-decoration: none;

    font-weight: 400;

    transition: opacity 0.2s;

}



.job-link:hover {

    opacity: 0.8;

    text-decoration: underline;

}



.job-type, .job-date, .job-city {

    opacity: 0.7;

}



/* Empty State */

.jobs-empty-state {

    text-align: center;

    padding: 60px 20px;

    color: #999;

    font-size: 18px;

    font-family: 'Inter', sans-serif;

}

/* Job Details Modal */

.custom-job-modal {

    max-width: 976px;

    width: 95%;

}



.custom-job-modal .modal-content {

    border-radius: 20px;

    padding: 24px;

    border: none;

    box-shadow: 0 10px 50px rgba(0,0,0,0.15);

}



.modal-logo {

    width: 140px;

    height: 40px;

    object-fit: contain;

}



.modal-job-title {

    font-family: 'Outfit';

    font-size: 34px;

    font-weight: 500;

    color: #0D0100;

    margin-bottom: 30px;

    letter-spacing: 2px;

}



.modal-job-meta {

    font-family: 'Outfit';

    font-size: 18px;

    font-weight: 400;

    color: #0D0100;

    text-transform: uppercase;

    line-height: 28px;

}



.apply-btn-top {

    height: 48px;

    padding: 0 32px;

}







.job-detail-section .section-heading-wrapper {

    position: relative;

    padding-left: 16px;

    margin-bottom: 24px;

}



.job-detail-section .section-heading-wrapper::before {

    content: '';

    position: absolute;

    left: 0;

    top: 50%;

    transform: translateY(-50%);

    width: 4px;

    height: 100%;

    min-height: 24px;

    background-color: #1989FB;

    border-radius: 2px;

}



.job-detail-section .section-title {

    font-family: 'Outfit';

    font-size: 32px;

    font-weight: 500;

    line-height: 32px;

    color: #0D0100;

    margin: 0;

}



.job-info-grid {

    display: flex;

    flex-direction: column;

    gap: 12px;

    width: 50%;

}



.info-item {

    display: flex;

    justify-content: space-between;

    align-items: center;

    border-bottom: 0.8px solid rgba(241, 245, 249, 1);

    min-height: 48px;

    padding: 15px 0;

}



.info-label {

    font-family: 'Outfit';

    font-size: 16px;

    font-weight: 500;

    color: #0D0100;

    line-height: 24px;

}



.info-value {

    font-family: 'Inter';

    font-size: 16px;

    color: #0D0100;

    font-weight: 500;

    line-height: 24px;

}

.info-value#modalCity {
    color: #155DFC;
}

.text-blue {

    color: #1989FB !important;

}



.requirements-list {

    font-family: 'Inter';

    font-size: 16px;

    color: #333;

    line-height: 1.8;

}



.requirements-list p {

    margin-bottom: 8px;

}



.req-subheading {

    margin-top: 16px;

    font-weight: 600;

    color: #0D0100;

}



.skill-item {

    font-family: 'Outfit';

    font-size: 16px;

    line-height: 24px;

    letter-spacing: 0px;

    margin-bottom: 8px;

    color: #333;

}



.requirements-list ul {

    padding-left: 20px;

    margin-bottom: 20px;

}



.requirements-list li,
.job-description-content li {

    margin-bottom: 12px;

    font-size: 16px;

    line-height: 24px;

    letter-spacing: 0px;

    font-family: 'Outfit';

    font-weight: 400;

}



.modal-footer {

    padding: 1rem 1.5rem 2rem;

}



.job-detail-header {

    margin-top: 30px !important;

}





/* Stepper Modal Specifics */

.apply-modal .modal-content {

    border-radius: 20px;

    border: none;

    box-shadow: 0 10px 50px rgba(0,0,0,0.1);

}



.modal-header-container { padding-bottom: 0; }



.modal-job-title-main {

    font-family: 'Outfit';

    font-size: 34px;

    font-weight: 500;

    color: #0D0100;

    letter-spacing: 2px;

    line-height: 34px;

}



.modal-job-meta-row {

    font-family: 'Outfit';

    font-size: 15px;

    color: #64748B;

    font-weight: 400;

}



.meta-item {

    display: flex;

    align-items: center;

}



.modal-divider {

    height: 1px;

    background-color: #E9ECEF;

    width: 100%;

}



.stepper-progress-container {

    width: 100%;

    margin-top: 8px;

}



.step-text, .step-percentage {

    font-family: 'Outfit';

    font-size: 14px;

    color: #0D0100;

    font-weight: 400;

}



.step-percentage {

    color: #64748B;

}



.progress {

    background-color: #E9ECEF;

    border-radius: 90px;

}



.progress-bar {

    background-color: #1989FB;

    border-radius: 90px;

}



.apply-step {

    display: none;

    animation: fadeIn 0.4s ease;

}



.apply-step.active {

    display: block;

}



@keyframes fadeIn {

    from { opacity: 0; }

    to { opacity: 1; }

}



/* Step Card Styles */

.step-card {

    border-radius: 12px;

    padding: 24px 30px;

    background: #fff;

    margin-bottom: 40px;

    box-shadow: 0px 10px 15px -3px #0000001A;

    /* min-height: 480px; */

}



.step-title {

    font-family: 'Outfit';

    font-size: 32px;

    font-weight: 600;

    color: #0D0100;

    line-height: 32px;

    margin-bottom: 8px;

}



.step-desc {

    font-family: 'Outfit';

    font-size: 18px;

    color: #45556C;

    margin-bottom: 0;

    line-height: 24px;

    font-weight: 400;

}



.question-text {

    font-family: 'Outfit';

    font-size: 22px;

    font-weight: 500;

    color: #314158;

    line-height: 20px;

}



/* Custom Radio Buttons (Yes/No) */

.step-radio-label {

    border: 1px solid #E2E8F0;

    border-radius: 12px;

    font-family: 'Outfit';

    font-size: 16px;

    font-weight: 500;

    padding: 16px !important;

    transition: all 0.2s ease;

    background-color: #F8FAFC;

    color: #64748B;

    line-height: 24px;

}



.btn-check:checked + .step-radio-label {

    border-color: #1989FB !important;

    background-color: #EBF5FF !important;

    color: #1989FB !important;

}



.step-radio-label:hover {

    background-color: #F1F5F9;

}



/* Footer Buttons */

.btn-outline-back {

    background: transparent;

    border: 1px solid #0D0100;

    color: #0D0100;

    padding: 10px 40px;

    font-family: 'Outfit';

    font-size: 16px;

    font-weight: 400;

}



.btn-outline-back:hover {

    background-color: #F8F9FA;

}



.btn-primary-next {

    background: #1989FB;

    border: none;

    color: #fff;

    padding: 10px 40px;

    font-family: 'Outfit';

    font-size: 16px;

    font-weight: 400;

}



/* Custom Form Elements */

.custom-input {

    height: 52px;

    border: 1.5px solid #E2E8F0;

    border-radius: 12px;

    padding: 12px 20px;

    font-family: 'Inter';

    font-size: 16px;

    color: #0D0100;

    box-shadow: none !important;

}



.custom-input::placeholder {

    color: #94A3B8;

}



.custom-input:focus {

    border-color: #1989FB;

}



.form-label {

    font-family: 'Outfit';

    font-size: 16px;

    font-weight: 500;

    color: #0D0100;

    margin-bottom: 10px;

    line-height: 20px;

}



/* Skills tags */

.skill-tag {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 8px;

    font-family: 'Outfit';

    background: linear-gradient(90deg, #2B7FFF 0%, #155DFC 100%);

    color: rgba(255, 255, 255, 1);

    border-radius: 10px;

    height: 40px;

    font-size: 16px;

    line-height: 16px;

    font-weight: 400;

}



/* Upload Area */

.upload-dropzone {

    display: block;

    border: 1.5px dashed #B9C6D6;

    border-radius: 12px;

    padding: 40px 20px;

    text-align: center;

    cursor: pointer;

    transition: all 0.3s ease;

    background: #F8FAFC;

    width: 100%;

    margin-top: 10px;

}



.upload-dropzone:hover {

    border-color: #155DFC;

    background: #F8FAFF;

}



.success-title {

    font-family: 'Outfit';

    font-size: 32px;

    font-weight: 600;

    color: #0D0100;

}



.show-step {

    display: block !important;

}



.remove-skill {

    cursor: pointer;

    font-weight: bold;

    color: #94A3B8;

}



.remove-skill:hover {

    color: #ef4444;

}



.upload-icon {

    width: 44px;

    height: 44px;

    margin-bottom: 16px;

    color: #94A3B8;

}



.upload-text {

    font-family: 'Outfit';

    font-size: 16px;

    color: #45556C;

    margin-bottom: 8px;

    font-weight: 400;

    line-height: 24px;

}



.upload-text span {

    color: #155DFC;

    font-weight: 500;

}



.file-preview-card {

    background: #EBF5FF;

    border: 1px solid #D0E7FF;

    border-radius: 12px;

    padding: 16px;

    display: flex;

    align-items: center;

    gap: 16px;

    position: relative;

}



.preview-icon-wrapper {

    background: #DBEAFE;

    border-radius: 8px;

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}



.preview-icon-wrapper img {

    width: 20px;

    height: 20px;

}



.file-info {

    flex-grow: 1;

    min-width: 0;

}



.preview-file-name {

    font-family: 'Outfit';

    font-size: 15px;

    font-weight: 600;

    color: #314158;

    margin-bottom: 2px;

    word-break: break-all;

    line-height: 1.2;

}



.preview-file-size {

    font-family: 'Outfit';

    font-size: 13px;

    color: #94A3B8;

    margin-bottom: 0;

}



.btn-remove-preview {

    background: none;

    border: none;

    padding: 4px;

    color: #94A3B8;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: color 0.2s;

}



.btn-remove-preview:hover {

    color: #ef4444;

}



.upload-label-text {

    font-family: 'Outfit';

    font-size: 16px;

    font-weight: 500;

    color: #314158;

    margin-bottom: 12px;

    display: block;

}



.small-title {

    font-family: 'Outfit';

    font-size: 18px;

    font-weight: 600;

    color: #0D0100;

    margin-bottom: 0;

    line-height: 28px;

}



.add-more-btn {

    font-family: 'Outfit';

    font-size: 14px;

    font-weight: 500;

    color: #155DFC;

    display: flex;

    align-items: center;

    background: none;

}



.entry-card {

    border: 1px solid #E2E8F0;

    border-radius: 16px;

    padding: 24px;

    background: #fff;

}



.entry-sublabel {

    font-family: 'Outfit';

    font-size: 16px;

    font-weight: 500;

    color: #45556C;

    line-height: 20px;

}



.stacked-inputs {

    display: flex;

    flex-direction: column;

    gap: 16px;

}



.success-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto;

    width: 80px;

    height: 80px;

    border-radius: 50%;

    background: #DCFCE7;

}



.success-text {

    font-family: 'Inter';

    font-size: 16px;

    color: #64748B;

    max-width: 500px;

    margin: 0 auto;

}



/* CSS for new classes */

.job-app-logo {

    width: 140px;

}



.job-app-footer {

    background: transparent !important;

}



.job-meta-icon {

    width: 16px;

}

.modal-body{

    margin-top: 40px;

}

.modal-dialog{

    min-height: calc(100vh - 5vh) !important;

}

.skills-tags-container{

    border: 0.8px solid rgba(226, 232, 240, 1);

    border-radius: 14px;

    height: 74px;

    align-items: center;

    padding: 16px;

    background: rgba(248, 250, 252, 1);

    overflow: auto;

}

/* Uniform Sections Wrapper - Only for screens 767px and above */
@media (min-width: 767px) {
    .uniform-sections-wrapper {
        margin: 0 auto;
        padding-left: 20px;
        padding-right: 20px;
        max-width: 1270px;
    }

    .uniform-sections-wrapper .careers-section,
    .uniform-sections-wrapper .careers-container {
        padding-left: 0;
        padding-right: 0;
        max-width: unset;
    }
}



.success-card {

    max-width: 540px;

    margin: 40px auto;

    background: #fff;

    border-radius: 20px;

    padding: 60px 40px;

    box-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.1);

}



.success-text {

    font-family: 'Outfit';

    font-size: 18px;

    color: #45556C;

    line-height: 26px;

}



/* Form Validation */

.custom-input.is-invalid, 

.upload-dropzone.is-invalid,

.step-radio-label.is-invalid {

    border-color: #ef4444 !important;

    background-color: #fffafb !important;

}



.error-text {

    color: #ef4444;

    font-family: 'Outfit';

    font-size: 13px;

    margin-top: 4px;

    display: block;

    font-weight: 400;

}

@media (max-width: 767.98px) {

    .custom-job-modal .modal-content {

        padding: 16px;

    }



    .modal .job-detail-header {
        display: flex;
        flex-direction: column;
        align-items: start !important;
        margin-bottom: 60px !important;
    }



    .apply-btn-top {
        padding: 8px 14px;
        font-size: 12px;
        line-height: 16px;
        height: unset;
    }



    .job-info-grid {
        width: 100%;
        padding-left: 16px;
        gap: 0;
    }

    .modal-body,
    .modal-header,
    .modal-footer {
        padding: 0 0 16px 0 !important;
    }

    .job-detail-header .job-title-group {
        width: 100%;
    }

    .modal-body {
        margin-top: 10px !important;
    }
    
    .modal-job-title,
    .modal-job-title-main {
        font-size: 28px;
        line-height: 34px;
        margin-bottom: 12px;
    }

    .modal-job-meta {
        font-size: 16px;
        line-height: 28px;
        margin-bottom: 12px;
    }

    .job-detail-section .section-title {
        font-size: 24px;
        line-height: 32px;
    }

    .job-detail-section .section-heading-wrapper {
        margin-bottom: 24px;
    }

    .job-detail-section .job-info-wrapper {
        margin-bottom: 12px;
    }

    .info-item {
        padding-top: 12px;
        padding-bottom: 0;
        border-bottom: none;
        min-height: unset;
    }

    .job-description-content,
    .requirements-list {
        padding-left: 16px;
    }

    .modal-job-meta-row {
        font-size: 18px;
        line-height: 24px;
    }

    .modal-divider {
        display: none;
    }
    
}



/* Responsive Design */

@media (max-width: 1439px) {

    .careers-hero {

        border-radius: 0 0 20px 20px;

    }

    .careers-container {

        padding: 0 60px;

    }

    .careers-hero-desc-wrapper {

        width: 100%;

        max-width: 800px;

        height: auto;

    }

}



@media (max-width: 1024px) {

    .careers-container {

        padding: 0 40px;

    }

    .careers-hero-title-wrapper {

        height: auto;

    }

}



@media (max-width: 767.98px) {

    .careers-hero {
        min-height: 480px;
        border-radius: 0 0 20px 20px;
        padding-bottom: 0;
    }



    .careers-hero-title-wrapper {
        height: auto;
        margin: 0;
    }



    .careers-hero-title {
        font-size: 27px;
        line-height: 32px;
        text-align: center;
        width: 80%;
        margin: 0 auto 20px auto;
    }



    .careers-hero-desc-wrapper {
        width: 100%;
        height: auto;
        margin-bottom: 0;
    }

    .careers-hero-inner {
        padding: 0 17px;
    }

    .careers-hero-description {
        font-size: 16px;
        line-height: 18px;
        margin-bottom: 35px;
    }



    .careers-hero-buttons {
        gap: 12px;
        align-items: center;
    }

    .careers-hero-btn-wrapper {
        margin-top: 0;
    }

    .careers-btn {
        font-size: 12px;
        line-height: 16px;
        padding: 11px 14px;
        height: unset;
    }



    .careers-section {

        padding: 40px 0;

    }



    .careers-container {

        padding: 0 20px;

    }



    .careers-title {

        font-size: 28px;

        line-height: 1.2;

        margin-bottom: 12px;

    }



    .careers-description {

        font-size: 16px;

        line-height: 1.5;

    }



    .careers-desc-wrapper {

        margin-bottom: 32px;

    }



    .careers-search-wrapper {

        margin-bottom: 32px;

    }



    .careers-search-form {

        flex-direction: column;

        border: none;

        gap: 10px;

    }



    .careers-search-input {

        width: 100%;

        margin-bottom: 0;

    }



    .careers-search-btn {

        width: 100%;

        height: 50px;

    }



    .careers-jobs-table-wrapper {

        overflow-x: auto;

    }



    .careers-jobs-table {

        min-width: 600px;

    }



    .careers-jobs-table th,

    .careers-jobs-table td {

        padding: 16px;

        font-size: 14px;

    }

    .work-auth .step-title,
    .step-title {
        font-size: 27px;
        line-height: 32px;
    }

    .work-auth .step-card {
        padding: 16px;
        margin-bottom: 0;
    }

    .work-auth .step-radio-label {
        line-height: 16px;
    }

    #applyBackBtn {
        height: fit-content;
    } 

    .next-container {
        justify-content: end;
    }

    .step-card {
        padding: 24px 16px;
        margin-bottom: 0;
    }

    .entry-card {
        padding: 22px;
    }

    .step-heading-wrapper {
        margin-bottom: 30px !important;
    }

    .upload-dropzone {
        padding: 44px 12px 16px 12px;
    }

    .upload-hint {
        font-size: 14px;
        line-height: 20px;
    }

    .upload-dropzone img {
        width: 38px;
        height: 38px;
    }

    .success-card {
        padding: 48px 16px;
    }

    .success-title {
        font-size: 28px;
        line-height: 36px;
    }

    .success-text {
        margin-bottom: 24px !important;
    }

    .success-card .btn-primary-next {
        border-radius: 14px;
    }
}


@media (max-width: 576px) {

    .apply-modal .modal-content {

        padding: 12px 16px;

    }

    .apply-modal-header .modal-job-title {

        font-size: 22px;

    }

    .options-group {
        flex-direction: column;
        gap: 12px !important;
    }

    .custom-radio {

        width: 100%;

    }

    .modal-footer {
        gap: 12px;
    }

    .modal-footer .d-flex {
        gap: 8px !important;
    }

}

@media (max-width: 480px) {

    .careers-hero {
        border-radius: 0 0 16px 16px;
    }

    .careers-title {

        font-size: 24px;

    }



    .careers-container {

        padding: 0 15px;

    }

}