/* =========================================================
   DALISAY GROCERY
   CAREER PAGE
   career.css
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {

    --dg-career-blue: #003b6a;
    --dg-career-blue-dark: #002b4d;
    --dg-career-blue-light: #07548e;

    --dg-career-yellow: #ffc107;
    --dg-career-yellow-dark: #e5a900;

    --dg-career-white: #ffffff;
    --dg-career-light: #f5f7fa;
    --dg-career-light-blue: #eef5fa;

    --dg-career-text: #17212b;
    --dg-career-muted: #687583;

    --dg-career-border: #e3e8ed;

    --dg-career-shadow:
        0 15px 40px rgba(0, 35, 65, 0.10);

}


/* =========================================================
   HERO
========================================================= */

.dg-career-hero {

    position: relative;

    min-height: 650px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:

        linear-gradient(
            110deg,
            rgba(0, 38, 69, .98),
            rgba(0, 59, 106, .93)
        ),

        url("images/career-bg.jpg");

    background-size: cover;

    background-position: center;

}


.dg-career-hero::before {

    content: "";

    position: absolute;

    width: 550px;
    height: 550px;

    right: -230px;
    top: -230px;

    border-radius: 50%;

    border: 1px solid rgba(255, 193, 7, .20);

    background: rgba(255, 193, 7, .06);

}


.dg-career-hero::after {

    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    right: 120px;
    bottom: -260px;

    border-radius: 50%;

    background: rgba(255, 193, 7, .07);

}


.dg-career-hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            transparent,
            rgba(255, 193, 7, .04)
        );

}


.dg-career-hero-content {

    position: relative;

    z-index: 2;

    max-width: 760px;

    padding: 120px 0;

}


.dg-career-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 16px;

    margin-bottom: 25px;

    color: var(--dg-career-yellow);

    border: 1px solid rgba(255, 193, 7, .35);

    background: rgba(255, 193, 7, .08);

    border-radius: 50px;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


.dg-career-badge i {

    font-size: 17px;

}


.dg-career-hero h1 {

    margin: 0 0 25px;

    color: var(--dg-career-white);

    font-size: clamp(42px, 6vw, 72px);

    line-height: 1.04;

    font-weight: 900;

    letter-spacing: -2px;

}


.dg-career-hero h1 span {

    display: block;

    color: var(--dg-career-yellow);

}


.dg-career-hero-content > p {

    max-width: 650px;

    margin-bottom: 35px;

    color: rgba(255,255,255,.82);

    font-size: 18px;

    line-height: 1.8;

}


/* =========================================================
   HERO BUTTONS
========================================================= */

.dg-career-hero-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 13px;

}


.dg-btn-primary {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 14px 23px;

    color: var(--dg-career-blue);

    background: var(--dg-career-yellow);

    border-radius: 8px;

    font-size: 14px;

    font-weight: 800;

    transition: .25s ease;

}


.dg-btn-primary:hover {

    color: var(--dg-career-blue);

    background: #ffd34e;

    transform: translateY(-3px);

    box-shadow:
        0 10px 25px rgba(255,193,7,.25);

}


.dg-btn-outline {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 13px 23px;

    color: var(--dg-career-white);

    border: 1px solid rgba(255,255,255,.35);

    border-radius: 8px;

    font-size: 14px;

    font-weight: 700;

    transition: .25s ease;

}


.dg-btn-outline:hover {

    color: var(--dg-career-blue);

    background: var(--dg-career-white);

    transform: translateY(-3px);

}


/* =========================================================
   HERO SCROLL
========================================================= */

.dg-career-scroll {

    position: absolute;

    bottom: 20px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 3;

    display: flex;

    flex-direction: column;

    align-items: center;

    color: rgba(255,255,255,.60);

    font-size: 10px;

    letter-spacing: 1px;

    text-transform: uppercase;

}


.dg-career-scroll i {

    margin-top: 5px;

    color: var(--dg-career-yellow);

    font-size: 22px;

    animation: dgCareerScroll 1.5s infinite;

}


@keyframes dgCareerScroll {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(6px);

    }

}


/* =========================================================
   SECTION LABEL
========================================================= */

.dg-section-label {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 14px;

    color: var(--dg-career-blue);

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 1.5px;

}


.dg-section-label span {

    display: block;

    width: 34px;

    height: 3px;

    background: var(--dg-career-yellow);

    border-radius: 20px;

}


.dg-section-label.center {

    justify-content: center;

}


/* =========================================================
   INTRO
========================================================= */

.dg-career-intro {

    padding: 100px 0;

    background: var(--dg-career-white);

}


.dg-career-intro h2,
.dg-section-heading h2 {

    margin-bottom: 20px;

    color: var(--dg-career-blue);

    font-size: clamp(32px,4vw,46px);

    line-height: 1.15;

    font-weight: 900;

    letter-spacing: -1px;

}


.dg-career-intro h2 strong,
.dg-section-heading h2 strong {

    color: var(--dg-career-yellow-dark);

}


.dg-career-intro p {

    max-width: 600px;

    margin-bottom: 15px;

    color: var(--dg-career-muted);

    font-size: 15px;

    line-height: 1.8;

}


/* =========================================================
   STAT CARDS
========================================================= */

.dg-career-stats {

    display: grid;

    grid-template-columns: repeat(2,1fr);

    gap: 18px;

}


.dg-stat-card {

    padding: 27px;

    background: var(--dg-career-light);

    border: 1px solid var(--dg-career-border);

    border-radius: 16px;

    transition: .3s ease;

}


.dg-stat-card:hover {

    transform: translateY(-5px);

    background: var(--dg-career-white);

    box-shadow: var(--dg-career-shadow);

}


.dg-stat-icon {

    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 15px;

    color: var(--dg-career-blue);

    background: rgba(255,193,7,.20);

    border-radius: 12px;

}


.dg-stat-icon i {

    font-size: 25px;

}


.dg-stat-card h3 {

    margin-bottom: 5px;

    color: var(--dg-career-blue);

    font-size: 17px;

    font-weight: 900;

}


.dg-stat-card p {

    margin: 0;

    font-size: 13px;

    line-height: 1.5;

}


/* =========================================================
   WHY JOIN
========================================================= */

.dg-why-join {

    padding: 100px 0;

    background: var(--dg-career-light);

}


.dg-section-heading {

    max-width: 720px;

    margin-bottom: 25px;

}


.dg-section-heading.text-center {

    margin-left: auto;

    margin-right: auto;

}


.dg-section-heading > p {

    color: var(--dg-career-muted);

    line-height: 1.7;

}


/* =========================================================
   BENEFITS
========================================================= */

.dg-benefit-card {

    height: 100%;

    padding: 32px 27px;

    background: var(--dg-career-white);

    border: 1px solid var(--dg-career-border);

    border-radius: 16px;

    transition: .3s ease;

}


.dg-benefit-card:hover {

    transform: translateY(-7px);

    border-color: rgba(255,193,7,.45);

    box-shadow: var(--dg-career-shadow);

}


.dg-benefit-icon {

    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 20px;

    color: var(--dg-career-blue);

    background: rgba(255,193,7,.20);

    border-radius: 15px;

}


.dg-benefit-icon i {

    font-size: 29px;

}


.dg-benefit-card h3 {

    margin-bottom: 10px;

    color: var(--dg-career-blue);

    font-size: 19px;

    font-weight: 900;

}


.dg-benefit-card p {

    margin: 0;

    color: var(--dg-career-muted);

    font-size: 14px;

    line-height: 1.7;

}


/* =========================================================
   JOB OPENINGS
========================================================= */

.dg-career-openings {

    padding: 100px 0;

    background: var(--dg-career-white);

}


.dg-job-list {

    display: flex;

    flex-direction: column;

    gap: 16px;

    margin-top: 35px;

}


.dg-job-card {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    padding: 27px;

    background: var(--dg-career-white);

    border: 1px solid var(--dg-career-border);

    border-radius: 16px;

    transition: .3s ease;

}


.dg-job-card:hover {

    transform: translateY(-3px);

    border-color: rgba(0,59,106,.20);

    box-shadow:
        0 12px 30px rgba(0,35,65,.08);

}


.dg-job-main {

    display: flex;

    align-items: flex-start;

    gap: 18px;

    min-width: 0;

}


.dg-job-icon {

    width: 58px;
    height: 58px;

    flex: 0 0 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--dg-career-blue);

    background: var(--dg-career-light-blue);

    border-radius: 14px;

}


.dg-job-icon i {

    font-size: 28px;

}


.dg-job-info {

    min-width: 0;

}


.dg-job-type {

    display: inline-block;

    margin-bottom: 5px;

    color: var(--dg-career-blue);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1px;

}


.dg-job-info h3 {

    margin-bottom: 9px;

    color: var(--dg-career-blue);

    font-size: 21px;

    font-weight: 900;

}


.dg-job-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 17px;

    margin-bottom: 11px;

}


.dg-job-meta span {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    color: var(--dg-career-muted);

    font-size: 13px;

}


.dg-job-meta i {

    color: var(--dg-career-yellow-dark);

    font-size: 17px;

}


.dg-job-info p {

    max-width: 750px;

    margin: 0;

    color: var(--dg-career-muted);

    font-size: 13px;

    line-height: 1.6;

}


/* =========================================================
   APPLY BUTTON
========================================================= */

.dg-job-action {

    flex-shrink: 0;

}


.dg-apply-btn {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 12px 19px;

    color: var(--dg-career-white);

    background: var(--dg-career-blue);

    border-radius: 8px;

    font-size: 13px;

    font-weight: 800;

    white-space: nowrap;

    transition: .25s ease;

}


.dg-apply-btn:hover {

    color: var(--dg-career-blue);

    background: var(--dg-career-yellow);

    transform: translateX(3px);

}


.dg-apply-btn i {

    font-size: 18px;

}


/* =========================================================
   CAREER NOTICE
========================================================= */

.dg-career-notice {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 25px;

    padding: 19px 22px;

    background: var(--dg-career-light);

    border: 1px dashed #ccd5dd;

    border-radius: 12px;

}


.dg-career-notice > i {

    color: var(--dg-career-blue);

    font-size: 25px;

}


.dg-career-notice strong {

    display: block;

    margin-bottom: 3px;

    color: var(--dg-career-blue);

    font-size: 14px;

}


.dg-career-notice p {

    margin: 0;

    color: var(--dg-career-muted);

    font-size: 12px;

}


/* =========================================================
   HIRING PROCESS
========================================================= */

.dg-hiring-process {

    padding: 100px 0;

    background: var(--dg-career-light);

}


.dg-process {

    position: relative;

    display: grid;

    grid-template-columns: repeat(4,1fr);

    gap: 30px;

    margin-top: 55px;

}


.dg-process-line {

    position: absolute;

    top: 40px;

    left: 12%;

    right: 12%;

    height: 2px;

    background: #d7dee5;

}


.dg-process-step {

    position: relative;

    z-index: 1;

    text-align: center;

}


.dg-process-number {

    display: block;

    margin-bottom: 9px;

    color: #9aa6b2;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1px;

}


.dg-process-icon {

    width: 80px;
    height: 80px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 20px;

    color: var(--dg-career-blue);

    background: var(--dg-career-white);

    border: 5px solid var(--dg-career-light);

    border-radius: 50%;

    box-shadow:
        0 5px 20px rgba(0,40,70,.10);

}


.dg-process-icon i {

    font-size: 30px;

}


.dg-process-step h3 {

    margin-bottom: 7px;

    color: var(--dg-career-blue);

    font-size: 18px;

    font-weight: 900;

}


.dg-process-step p {

    max-width: 210px;

    margin: auto;

    color: var(--dg-career-muted);

    font-size: 13px;

    line-height: 1.6;

}


/* =========================================================
   FINAL CTA
========================================================= */

.dg-career-cta {

    padding: 70px 0;

    background: var(--dg-career-white);

}


.dg-cta-box {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    padding: 45px;

    background:

        linear-gradient(
            120deg,
            var(--dg-career-blue-dark),
            var(--dg-career-blue)
        );

    border-radius: 20px;

    overflow: hidden;

    position: relative;

}


.dg-cta-box::after {

    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    right: -100px;
    top: -150px;

    border-radius: 50%;

    border: 1px solid rgba(255,193,7,.25);

}


.dg-cta-content {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 20px;

}


.dg-cta-icon {

    width: 65px;
    height: 65px;

    flex: 0 0 65px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--dg-career-blue);

    background: var(--dg-career-yellow);

    border-radius: 16px;

}


.dg-cta-icon i {

    font-size: 30px;

}


.dg-cta-content > div:last-child > span {

    display: block;

    margin-bottom: 5px;

    color: var(--dg-career-yellow);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.5px;

}


.dg-cta-content h2 {

    margin: 0 0 7px;

    color: var(--dg-career-white);

    font-size: 28px;

    font-weight: 900;

}


.dg-cta-content h2 strong {

    color: var(--dg-career-yellow);

}


.dg-cta-content p {

    margin: 0;

    color: rgba(255,255,255,.70);

    font-size: 13px;

}


.dg-cta-button {

    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 13px 20px;

    color: var(--dg-career-blue);

    background: var(--dg-career-yellow);

    border-radius: 8px;

    font-size: 13px;

    font-weight: 900;

    white-space: nowrap;

    transition: .25s ease;

}


.dg-cta-button:hover {

    color: var(--dg-career-blue);

    background: #ffd34e;

    transform: translateY(-2px);

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .dg-career-hero {

        min-height: 600px;

    }


    .dg-career-hero-content {

        padding: 100px 0;

    }


    .dg-career-hero h1 {

        font-size: 52px;

    }


    .dg-career-intro,
    .dg-why-join,
    .dg-career-openings,
    .dg-hiring-process {

        padding: 75px 0;

    }


    .dg-process {

        grid-template-columns: repeat(2,1fr);

        row-gap: 45px;

    }


    .dg-process-line {

        display: none;

    }


    .dg-cta-box {

        padding: 35px;

    }

}


@media (max-width: 767px) {

    .dg-career-hero {

        min-height: 570px;

    }


    .dg-career-hero-content {

        padding: 90px 0;

    }


    .dg-career-hero h1 {

        font-size: 42px;

        letter-spacing: -1px;

    }


    .dg-career-hero-content > p {

        font-size: 15px;

    }


    .dg-career-scroll {

        display: none;

    }


    .dg-career-stats {

        grid-template-columns: 1fr 1fr;

    }


    .dg-job-card {

        align-items: flex-start;

        flex-direction: column;

    }


    .dg-job-action {

        width: 100%;

    }


    .dg-apply-btn {

        width: 100%;

        justify-content: center;

    }


    .dg-cta-box {

        flex-direction: column;

        align-items: flex-start;

    }


    .dg-cta-button {

        width: 100%;

        justify-content: center;

    }

}


@media (max-width: 575px) {

    .dg-career-hero h1 {

        font-size: 36px;

    }


    .dg-career-badge {

        font-size: 10px;

    }


    .dg-career-hero-buttons {

        flex-direction: column;

        align-items: stretch;

    }


    .dg-btn-primary,
    .dg-btn-outline {

        justify-content: center;

    }


    .dg-career-stats {

        grid-template-columns: 1fr;

    }


    .dg-career-intro,
    .dg-why-join,
    .dg-career-openings,
    .dg-hiring-process {

        padding: 60px 0;

    }


    .dg-job-card {

        padding: 21px;

    }


    .dg-job-main {

        gap: 12px;

    }


    .dg-job-icon {

        width: 50px;
        height: 50px;

        flex-basis: 50px;

    }


    .dg-job-info h3 {

        font-size: 18px;

    }


    .dg-process {

        grid-template-columns: 1fr;

    }


    .dg-cta-box {

        padding: 28px 22px;

    }


    .dg-cta-content {

        align-items: flex-start;

    }


    .dg-cta-content h2 {

        font-size: 23px;

    }


    .dg-cta-icon {

        width: 52px;
        height: 52px;

        flex-basis: 52px;

    }

}

/* =========================================================
   APPLICATION MODAL
========================================================= */

.career-application-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 20px;

    overflow-y: auto;
}

.career-application-modal.active {
    display: flex;
}

.career-application-overlay {
    position: fixed;
    inset: 0;

    background: rgba(0, 20, 40, 0.78);

    backdrop-filter: blur(5px);
}

.career-application-box {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 850px;

    max-height: 90vh;

    overflow-y: auto;

    padding: 40px;

    border-radius: 15px;

    background: #fff;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, .35);

    animation: careerModalIn .3s ease;
}

@keyframes careerModalIn {

    from {
        opacity: 0;
        transform: translateY(25px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}


.career-modal-close {

    position: absolute;

    top: 18px;
    right: 18px;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    border: 0;

    border-radius: 50%;

    background: #f1f3f5;

    color: #003b6a;

    font-size: 23px;

    cursor: pointer;

    transition: .25s ease;
}

.career-modal-close:hover {

    background: #ffc107;

    transform: rotate(90deg);

}


.career-modal-header {

    padding-right: 45px;

    margin-bottom: 30px;
}

.career-modal-header > span {

    color: #d09e00;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2px;
}

.career-modal-header h2 {

    margin: 8px 0 12px;

    color: #003b6a;

    font-size: 32px;

    font-weight: 900;
}

.career-modal-header h2 strong {

    color: #d09e00;
}

.career-modal-header p {

    margin: 0;

    color: #71808d;

    font-size: 13px;

    line-height: 1.7;
}


/* APPLICATION FORM */

.career-application-modal .form-group {

    margin-bottom: 20px;
}

.career-application-modal .form-group label {

    display: block;

    margin-bottom: 7px;

    color: #003b6a;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: .8px;
}

.career-application-modal .form-group label span {

    color: #dc3545;
}

.career-application-modal input,
.career-application-modal textarea {

    width: 100%;

    border: 1px solid #dce3e8;

    border-radius: 6px;

    padding: 12px 14px;

    outline: none;

    background: #f9fbfc;

    color: #003b6a;

    font-family: inherit;

    font-size: 13px;

    transition: .25s ease;
}

.career-application-modal input {

    height: 48px;
}

.career-application-modal textarea {

    resize: vertical;

    min-height: 100px;
}

.career-application-modal input:focus,
.career-application-modal textarea:focus {

    border-color: #003b6a;

    background: #fff;

    box-shadow:
        0 0 0 3px rgba(0, 59, 106, .06);
}


/* RESUME */

.resume-upload {

    position: relative;

    display: flex;

    align-items: center;

    gap: 15px;

    min-height: 90px;

    padding: 20px;

    border: 2px dashed #dce3e8;

    border-radius: 8px;

    background: #f9fbfc;

    transition: .25s ease;

    overflow: hidden;
}

.resume-upload:hover {

    border-color: #ffc107;

    background: #fffdf2;
}

.resume-upload > i {

    color: #ffc107;

    font-size: 35px;
}

.resume-upload strong {

    display: block;

    color: #003b6a;

    font-size: 13px;

}

.resume-upload small {

    display: block;

    margin-top: 4px;

    color: #82909c;

    font-size: 10px;
}

.resume-upload input[type="file"] {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    opacity: 0;

    cursor: pointer;
}


.application-submit-area {

    display: flex;

    justify-content: flex-end;

    margin-top: 25px;
}


@media (max-width: 767px) {

    .career-application-box {

        padding: 30px 20px;

        max-height: 95vh;

    }

    .career-modal-header h2 {

        font-size: 25px;

    }

    .career-application-modal .form-row {

        grid-template-columns: 1fr;

    }

    .application-submit-area {

        justify-content: stretch;

    }

    .application-submit-area .contact-submit {

        width: 100%;

    }

}

/* =========================================================
   APPLICATION SUBMIT BUTTON
========================================================= */

.application-submit-area {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 59, 106, 0.12);
}

.application-submit-area .contact-submit {
    width: 100%;
    min-height: 56px;

    border: none;
    border-radius: 12px;

    background: linear-gradient(
        135deg,
        #003b6a,
        #005a9c
    );

    color: #ffffff;

    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    cursor: pointer;

    box-shadow:
        0 8px 20px rgba(0, 59, 106, 0.20);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.application-submit-area .contact-submit i {
    font-size: 21px;
    transition: transform 0.25s ease;
}

.application-submit-area .contact-submit:hover {
    background: linear-gradient(
        135deg,
        #005a9c,
        #003b6a
    );

    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgba(0, 59, 106, 0.28);
}

.application-submit-area .contact-submit:hover i {
    transform: translateX(4px);
}

.application-submit-area .contact-submit:active {
    transform: translateY(0);
    box-shadow:
        0 5px 12px rgba(0, 59, 106, 0.20);
}

/* Loading/disabled state */
.application-submit-area .contact-submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}


/* =========================================================
   APPLICATION SUCCESS MODAL
========================================================= */

.career-success-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    visibility: hidden;
    opacity: 0;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.career-success-modal.active {
    visibility: visible;
    opacity: 1;
}


.career-success-overlay {
    position: absolute;
    inset: 0;

    background: rgba(0, 20, 40, 0.75);

    backdrop-filter: blur(6px);
}


.career-success-box {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 520px;

    background: #ffffff;

    border-radius: 22px;

    padding: 45px 40px 40px;

    text-align: center;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.30);

    transform: translateY(25px) scale(0.96);

    transition:
        transform 0.35s ease;
}

.career-success-modal.active .career-success-box {
    transform: translateY(0) scale(1);
}


/* CLOSE BUTTON */

.career-success-close {
    position: absolute;

    top: 18px;
    right: 18px;

    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background: #f1f3f5;

    color: #555;

    font-size: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    transition: 0.25s ease;
}

.career-success-close:hover {
    background: #003b6a;
    color: #ffffff;
}


/* SUCCESS ICON */

.career-success-icon {
    width: 90px;
    height: 90px;

    margin: 0 auto 25px;

    border-radius: 50%;

    background: #e9f7ef;

    display: flex;
    align-items: center;
    justify-content: center;

    animation: successPop 0.5s ease;
}

.career-success-icon i {
    font-size: 52px;
    color: #198754;
}


@keyframes successPop {

    0% {
        transform: scale(0);
    }

    70% {
        transform: scale(1.12);
    }

    100% {
        transform: scale(1);
    }

}


/* CONTENT */

.career-success-label {
    display: inline-block;

    margin-bottom: 10px;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1.5px;

    color: #003b6a;
}


.career-success-content h2 {
    margin-bottom: 15px;

    font-size: 30px;
    font-weight: 800;

    color: #003b6a;
}


.career-success-content p {
    margin: 8px auto;

    max-width: 430px;

    color: #666;

    font-size: 15px;
    line-height: 1.7;
}


/* CONTINUE BUTTON */

.career-success-button {
    width: 100%;

    margin-top: 25px;

    min-height: 52px;

    border: none;
    border-radius: 11px;

    background: #003b6a;

    color: #ffffff;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: 0.5px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    cursor: pointer;

    transition: 0.25s ease;
}

.career-success-button i {
    font-size: 20px;
}

.career-success-button:hover {
    background: #005a9c;

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(0, 59, 106, 0.25);
}


/* MOBILE */

@media (max-width: 576px) {

    .career-success-box {
        padding: 40px 25px 30px;
        border-radius: 18px;
    }

    .career-success-icon {
        width: 75px;
        height: 75px;
    }

    .career-success-icon i {
        font-size: 43px;
    }

    .career-success-content h2 {
        font-size: 24px;
    }

}


/* =========================================================
   JOB ACTION BUTTONS
========================================================= */

.dg-job-action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}


/* VIEW DETAILS BUTTON */

.dg-view-details-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 12px 20px;

    border: 2px solid #003b6a;
    border-radius: 10px;

    background: transparent;
    color: #003b6a;

    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.dg-view-details-btn i {
    font-size: 19px;
}


.dg-view-details-btn:hover {
    background: #003b6a;
    color: #ffffff;

    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(0, 59, 106, 0.20);
}


/* APPLY BUTTON */

.dg-apply-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 12px 20px;

    border: 2px solid #ffc107;
    border-radius: 10px;

    background: #ffc107;
    color: #003b6a;

    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 800;

    cursor: pointer;

    transition:
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.dg-apply-btn i {
    font-size: 19px;
}


.dg-apply-btn:hover {
    background: #ffca2c;

    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(255, 193, 7, 0.30);
}


/* =========================================================
   JOB DETAILS MODAL
========================================================= */

.career-details-modal {
    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 25px;

    z-index: 99999;

    visibility: hidden;
    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}


/* ACTIVE */

.career-details-modal.active {
    visibility: visible;
    opacity: 1;

    pointer-events: auto;
}


/* OVERLAY */

.career-details-overlay {
    position: absolute;

    inset: 0;

    background: rgba(0, 20, 40, 0.78);

    backdrop-filter: blur(5px);

    -webkit-backdrop-filter: blur(5px);
}


/* MODAL BOX */

.career-details-box {
    position: relative;

    width: 100%;
    max-width: 850px;

    max-height: 90vh;

    background: #ffffff;

    border-radius: 20px;

    overflow: hidden;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.35);

    transform: translateY(30px) scale(0.96);

    transition:
        transform 0.3s ease;
}


.career-details-modal.active
.career-details-box {

    transform: translateY(0) scale(1);

}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.career-details-close {

    position: absolute;

    top: 18px;
    right: 18px;

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: none;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.15);

    color: #ffffff;

    font-size: 25px;

    cursor: pointer;

    z-index: 5;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}


.career-details-close:hover {

    background: rgba(255, 255, 255, 0.28);

    transform: rotate(90deg);

}


/* =========================================================
   DETAILS HEADER
========================================================= */

.career-details-header {

    display: flex;

    align-items: flex-start;

    gap: 20px;

    padding: 35px 70px 30px 35px;

    background:
        linear-gradient(
            135deg,
            #003b6a 0%,
            #00558f 100%
        );

    color: #ffffff;
}


.career-details-icon {

    flex: 0 0 65px;

    width: 65px;
    height: 65px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 16px;

    background: #ffc107;

    color: #003b6a;

    font-size: 32px;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.15);
}


.career-details-header span {

    display: block;

    margin-bottom: 5px;

    color: #ffc107;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.career-details-header h2 {

    margin: 0 0 14px;

    color: #ffffff;

    font-size: 30px;

    font-weight: 800;
}


/* META */

.career-details-meta {

    display: flex;

    align-items: center;

    gap: 18px;

    flex-wrap: wrap;
}


.career-details-meta span {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin: 0;

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

    font-size: 13px;

    font-weight: 500;

    letter-spacing: 0;
}


.career-details-meta i {

    color: #ffc107;

    font-size: 17px;
}


/* =========================================================
   DETAILS BODY
========================================================= */

.career-details-body {

    max-height: 52vh;

    overflow-y: auto;

    padding: 30px 35px;

    background: #ffffff;
}


/* scrollbar */

.career-details-body::-webkit-scrollbar {

    width: 7px;

}


.career-details-body::-webkit-scrollbar-track {

    background: #f1f3f5;

}


.career-details-body::-webkit-scrollbar-thumb {

    background: #003b6a;

    border-radius: 10px;

}


/* SECTION */

.career-details-section {

    margin-bottom: 30px;
}


.career-details-section:last-child {

    margin-bottom: 0;

}


.career-details-section h3 {

    display: flex;

    align-items: center;

    gap: 10px;

    margin: 0 0 14px;

    color: #003b6a;

    font-size: 19px;

    font-weight: 800;
}


.career-details-section h3 i {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 35px;
    height: 35px;

    border-radius: 9px;

    background: rgba(255, 193, 7, 0.15);

    color: #003b6a;

    font-size: 19px;
}


/* TEXT */

.career-details-text {

    color: #555;

    font-size: 15px;

    line-height: 1.8;

    white-space: pre-line;
}


/* REQUIREMENTS / RESPONSIBILITIES */

.career-details-list {

    color: #555;

    font-size: 15px;

    line-height: 1.8;

    white-space: pre-line;
}


/* =========================================================
   DETAILS FOOTER
========================================================= */

.career-details-footer {

    display: flex;

    justify-content: flex-end;

    padding: 20px 35px;

    border-top: 1px solid #e9ecef;

    background: #f8f9fa;
}


.career-details-apply {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    padding: 13px 24px;

    border: none;

    border-radius: 10px;

    background: #ffc107;

    color: #003b6a;

    font-size: 14px;

    font-weight: 800;

    cursor: pointer;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}


.career-details-apply:hover {

    background: #ffca2c;

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(255, 193, 7, 0.30);
}


.career-details-apply i {

    font-size: 19px;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .dg-job-action {

        width: 100%;

        justify-content: stretch;

        margin-top: 15px;

    }


    .dg-view-details-btn,
    .dg-apply-btn {

        flex: 1;

    }


    .career-details-modal {

        padding: 12px;

    }


    .career-details-box {

        max-height: 94vh;

        border-radius: 16px;

    }


    .career-details-header {

        padding: 28px 55px 25px 22px;

        gap: 14px;

    }


    .career-details-icon {

        width: 50px;
        height: 50px;

        flex-basis: 50px;

        font-size: 25px;

    }


    .career-details-header h2 {

        font-size: 23px;

    }


    .career-details-meta {

        gap: 8px;

        flex-direction: column;

        align-items: flex-start;

    }


    .career-details-body {

        padding: 25px 22px;

        max-height: 55vh;

    }


    .career-details-footer {

        padding: 15px 22px;

    }


    .career-details-apply {

        width: 100%;

    }

}