/* =========================================================
   YOTTABRAIN — CAREER PAGE
   Premium Responsive Design
========================================================= */


/* =========================================================
   PAGE BASE
========================================================= */

.career-page {
    position: relative;
    width: 100%;
    background: #ffffff;
    color: #102a4c;
    overflow: hidden;
}

.career-page *,
.career-page *::before,
.career-page *::after {
    box-sizing: border-box;
}


/* =========================================================
   COMMON CONTAINER
========================================================= */

.career-page .container {
    position: relative;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}


/* =========================================================
   COMMON SECTION TAG
========================================================= */

.career-page .section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 15px;
    padding: 7px 13px;

    color: #c92027;
    background: #fff5f5;

    border: 1px solid rgba(201,32,39,.10);
    border-radius: 30px;

    font-size: 13px;
    line-height: 1;
    font-weight: 800;

    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.career-page .section-tag::before {
    content: "";

    width: 6px;
    height: 6px;

    background: #c92027;
    border-radius: 50%;
}


/* =========================================================
   SECTION 01 — CAREER CONTENT
========================================================= */

.career-content-section {
    position: relative;

    padding: 40px 0 45px;

    background:
        radial-gradient(
            circle at 8% 20%,
            rgba(201,32,39,.035),
            transparent 28%
        ),
        #ffffff;
}


/* INTRO */

.career-intro {
    max-width: 820px;
    margin: 0 auto 48px;

    text-align: center;
}

.career-intro h2 {
    margin: 0 0 18px;

    color: #102a4c;

    font-size: 44px;
    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -1.2px;
}

.career-intro h2::first-line {
    color: #102a4c;
}

.career-intro p {
    max-width: 760px;

    margin: 0 auto;

    color: #68788c;

    font-size: 17px;
    line-height: 1.8;
}


/* HIGHLIGHTS */

.career-highlights {
    display: grid;

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

    gap: 15px;
}


/* HIGHLIGHT CARD */

.career-highlight-card {
    position: relative;

    min-height: 205px;

    padding: 27px 23px;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fbfcfd 100%
        );

    border: 1px solid #e4e9ee;
    border-radius: 15px;

    box-shadow:
        0 8px 25px rgba(16,42,76,.045);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;

    overflow: hidden;
}

.career-highlight-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            #c92027,
            rgba(201,32,39,.05)
        );
}

.career-highlight-card:hover {
    transform: translateY(-4px);

    border-color: rgba(201,32,39,.20);

    box-shadow:
        0 17px 35px rgba(16,42,76,.08);
}


/* ICON */

.career-highlight-icon {
    width: 46px;
    height: 46px;

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

    margin-bottom: 20px;

    color: #c92027;

    background: #fff5f5;

    border: 1px solid rgba(201,32,39,.12);
    border-radius: 11px;

    font-size: 16px;

    transition: .3s ease;
}

.career-highlight-card:hover .career-highlight-icon {
    color: #ffffff;
    background: #c92027;
}


/* HIGHLIGHT CONTENT */

.career-highlight-content h3 {
    margin: 0 0 9px;

    color: #102a4c;

    font-size: 17px;
    line-height: 1.3;

    font-weight: 750;
}

.career-highlight-content p {
    margin: 0;

    color: #6d7d90;

    font-size: 16px;
    line-height: 1.65;
}


/* =========================================================
   SECTION 02 — VACANCIES
========================================================= */

.career-vacancies-section {
    position: relative;

    padding: 50px 0 50px;

    background: #f7f9fb;
}


/* SECTION HEADING */

.career-section-heading {
    max-width: 780px;

    margin: 0 auto 45px;

    text-align: center;
}

.career-section-heading h2 {
    margin: 0 0 15px;

    color: #102a4c;

    font-size: 42px;
    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -1px;
}

.career-section-heading p {
    max-width: 680px;

    margin: 0 auto;

    color: #6b7b8e;

    font-size: 17px;
    line-height: 1.75;
}


/* JOB GRID */

.career-vacancies-grid {
    display: grid;

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

    gap: 18px;
}


/* JOB CARD */

.career-job-card {
    position: relative;

    padding: 28px;

    background: #ffffff;

    border: 1px solid #e1e7ec;
    border-radius: 16px;

    box-shadow:
        0 8px 25px rgba(16,42,76,.04);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.career-job-card:hover {
    transform: translateY(-4px);

    border-color: rgba(201,32,39,.20);

    box-shadow:
        0 18px 38px rgba(16,42,76,.09);
}


/* JOB TOP */

.career-job-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 18px;
}

.career-job-label {
    color: #c92027;

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

    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.career-job-type {
    padding: 6px 10px;

    color: #53667b;

    background: #f3f6f8;

    border-radius: 20px;

    font-size: 9px;
    font-weight: 700;
}


/* JOB TITLE */

.career-job-card h3 {
    margin: 0 0 14px;

    color: #102a4c;

    font-size: 22px;
    line-height: 1.25;

    font-weight: 800;
}


/* JOB META */

.career-job-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 18px;

    margin-bottom: 17px;
}

.career-job-meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #6b7b8e;

    font-size: 11px;
    font-weight: 600;
}

.career-job-meta i {
    color: #c92027;
    font-size: 11px;
}


/* JOB DESCRIPTION */

.career-job-card > p {
    min-height: 58px;

    margin: 0 0 22px;

    color: #6b7b8e;

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


/* APPLY LINK */

.career-job-apply {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: #c92027 !important;

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

    text-decoration: none;

    transition:
        color .25s ease,
        gap .25s ease;
}

.career-job-apply:hover {
    color: #a8181e !important;
    gap: 13px;
}


/* =========================================================
   SECTION 03 — APPLICATION FORM
========================================================= */

.career-form-section {
    position: relative;

    padding: 50px 0 55px;

    background: #ffffff;
}


/* FORM WRAPPER */

.career-form-wrapper {
    max-width: 980px;

    margin: 0 auto;

    padding: 55px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fbfcfd
        );

    border: 1px solid #e1e7ec;
    border-radius: 22px;

    box-shadow:
        0 18px 45px rgba(16,42,76,.07);
}


/* FORM INTRO */

.career-form-intro {
    max-width: 720px;

    margin: 0 auto 40px;

    text-align: center;
}

.career-form-intro h2 {
    margin: 0 0 14px;

    color: #102a4c;

    font-size: 38px;
    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -.8px;
}

.career-form-intro p {
    margin: 0;

    color: #6b7b8e;

    font-size: 17px;
    line-height: 1.75;
}


/* FORM GRID */

.career-form-grid {
    display: grid;

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

    gap: 20px;
}


/* FORM FULL WIDTH */

.career-form-full {
    grid-column: 1 / -1;
}


/* FORM FIELD */

.career-form-field {
    display: flex;
    flex-direction: column;
}


/* LABEL */

.career-form-field label {
    margin-bottom: 8px;

    color: #102a4c;

    font-size: 15px;
    line-height: 1.3;

    font-weight: 750;
}

.career-form-field label span {
    color: #c92027;
}


/* INPUTS */

.career-form-field input,
.career-form-field select,
.career-form-field textarea {
    width: 100%;

    padding: 13px 14px;

    color: #102a4c;

    background: #ffffff;

    border: 1px solid #dce3e9;
    border-radius: 9px;

    outline: none;

    font-family: inherit;

    font-size: 13px;

    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}

.career-form-field input,
.career-form-field select {
    min-height: 46px;
}

.career-form-field textarea {
    min-height: 135px;

    resize: vertical;
}


/* PLACEHOLDER */

.career-form-field input::placeholder,
.career-form-field textarea::placeholder {
    color: #9aa6b3;
}


/* FOCUS */

.career-form-field input:focus,
.career-form-field select:focus,
.career-form-field textarea:focus {
    border-color: #c92027;

    box-shadow:
        0 0 0 3px rgba(201,32,39,.07);
}


/* FILE INPUT */

.career-form-field input[type="file"] {
    padding: 10px;

    cursor: pointer;
}


/* FILE NOTE */

.career-form-field small {
    margin-top: 7px;

    color: #8a98a8;

    font-size: 10px;
}


/* SUBMIT */

.career-form-submit {
    margin-top: 30px;

    text-align: center;
}

.career-submit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-width: 200px;

    padding: 15px 28px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #c92027,
            #a8181e
        );

    border: 0;
    border-radius: 50px;

    font-family: inherit;

    font-size: 13px;
    font-weight: 750;

    cursor: pointer;

    box-shadow:
        0 9px 22px rgba(201,32,39,.18);

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

.career-submit-button:hover {
    background: #a8181e;

    transform: translateY(-2px);

    box-shadow:
        0 13px 28px rgba(201,32,39,.24);
}


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

.career-cta-section {
    position: relative;

    padding: 25px 0 30px;

    background: #ffffff;
}


/* CTA BOX */

.career-cta-box {
    position: relative;

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

    min-height: 140px;

    padding: 32px 38px;

    background:
        linear-gradient(
            105deg,
            #202858 0%,
            #522247 48%,
            #c92027 100%
        );

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 18px 40px rgba(16,42,76,.12);

    isolation: isolate;
}


/* DECORATIVE CIRCLES */

.career-cta-box::before {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    left: -55px;
    bottom: -75px;

    border-radius: 50%;

    background: rgba(255,255,255,.035);

    z-index: -1;
}

.career-cta-box::after {
    content: "";

    position: absolute;

    width: 170px;
    height: 170px;

    right: -45px;
    top: -65px;

    border-radius: 50%;

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

    box-shadow:
        0 0 0 35px rgba(255,255,255,.025);

    z-index: -1;
}


/* CTA CONTENT */

.career-cta-content {
    max-width: 700px;
}

.career-cta-content h2 {
    margin: 0 0 8px;

    color: #ffffff;

    font-size: 30px;
    line-height: 1.2;

    font-weight: 800;

    letter-spacing: -.6px;
}

.career-cta-content p {
    margin: 0;

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

    font-size: 13px;
    line-height: 1.6;
}


/* CTA ACTION */

.career-cta-action {
    flex-shrink: 0;

    margin-left: 35px;
}


/* CTA BUTTON */

.career-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-width: 180px;

    padding: 14px 25px;

    color: #c92027 !important;

    background: #ffffff;

    border-radius: 50px;

    font-size: 13px;
    font-weight: 750;

    text-decoration: none;

    white-space: nowrap;

    box-shadow:
        0 8px 20px rgba(0,0,0,.12);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        color .25s ease;
}

.career-cta-button:hover {
    color: #a8181e !important;

    background: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgba(0,0,0,.18);
}


/* =========================================================
   TABLET — 991px
========================================================= */

@media (max-width: 991px) {

    .career-page .container {
        max-width: 100%;
    }


    /* CAREER CONTENT */

    .career-content-section {
        padding: 40px 0 40px;
    }

    .career-intro h2 {
        font-size: 38px;
    }

    .career-highlights {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /* VACANCIES */

    .career-vacancies-section {
        padding: 45px 0 40px;
    }

    .career-section-heading h2 {
        font-size: 36px;
    }


    /* FORM */

    .career-form-section {
        padding: 40px 0 45px;
    }

    .career-form-wrapper {
        padding: 45px;
    }

    .career-form-intro h2 {
        font-size: 34px;
    }


    /* CTA */

    .career-cta-section {
        padding: 25px 0 30px;
    }

    .career-cta-box {
        padding: 30px;
    }

    .career-cta-content {
        max-width: 560px;
    }

    .career-cta-content h2 {
        font-size: 27px;
    }

    .career-cta-action {
        margin-left: 25px;
    }

    .career-cta-button {
        min-width: 165px;
    }
}


/* =========================================================
   MOBILE — 767px
========================================================= */

@media (max-width: 767px) {

    .career-page .container {
        padding-left: 18px;
        padding-right: 18px;
    }


    /* CAREER CONTENT */

    .career-content-section {
        padding: 30px 0 35px;
    }

    .career-intro {
        margin-bottom: 32px;
    }

    .career-intro h2 {
        font-size: 30px;
        line-height: 1.2;
    }

    .career-intro p {
        font-size: 13px;
        line-height: 1.7;
    }

    .career-highlights {
        grid-template-columns: 1fr;

        gap: 10px;
    }

    .career-highlight-card {
        min-height: auto;

        padding: 22px 20px;
    }


    /* VACANCIES */

    .career-vacancies-section {
        padding: 30px 0 35px;
    }

    .career-section-heading {
        margin-bottom: 32px;
    }

    .career-section-heading h2 {
        font-size: 30px;
    }

    .career-section-heading p {
        font-size: 13px;
    }

    .career-vacancies-grid {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .career-job-card {
        padding: 23px 20px;
    }

    .career-job-card h3 {
        font-size: 20px;
    }


    /* FORM */

    .career-form-section {
        padding: 35px 0 40px;
    }

    .career-form-wrapper {
        padding: 32px 22px;

        border-radius: 18px;
    }

    .career-form-intro {
        margin-bottom: 30px;
    }

    .career-form-intro h2 {
        font-size: 29px;
    }

    .career-form-intro p {
        font-size: 12px;
    }

    .career-form-grid {
        grid-template-columns: 1fr;

        gap: 17px;
    }

    .career-form-full {
        grid-column: auto;
    }

    .career-form-submit {
        margin-top: 25px;
    }

    .career-submit-button {
        width: 100%;
    }


    /* CTA */

    .career-cta-section {
        padding: 40px 0 50px;
    }

    .career-cta-box {
        display: block;

        min-height: auto;

        padding: 28px 23px;

        border-radius: 16px;
    }

    .career-cta-content {
        max-width: none;
    }

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

    .career-cta-content p {
        margin-top: 9px;

        font-size: 12px;
    }

    .career-cta-action {
        margin: 20px 0 0;
    }

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

        min-width: 0;

        padding: 14px 20px;
    }
}


/* =========================================================
   SMALL MOBILE — 480px
========================================================= */

@media (max-width: 480px) {

    .career-page .container {
        padding-left: 15px;
        padding-right: 15px;
    }


    .career-intro h2 {
        font-size: 27px;
    }

    .career-intro p {
        font-size: 12px;
    }


    .career-section-heading h2 {
        font-size: 27px;
    }


    .career-job-card {
        padding: 21px 18px;
    }

    .career-job-card h3 {
        font-size: 18px;
    }

    .career-job-meta {
        gap: 12px;
    }


    .career-form-wrapper {
        padding: 28px 18px;
    }

    .career-form-intro h2 {
        font-size: 27px;
    }


    .career-cta-box {
        padding: 25px 19px;
    }

    .career-cta-content h2 {
        font-size: 22px;
    }

    .career-cta-content p {
        font-size: 11px;
    }

}