:root {
    --pink: #f5386d;
    --orange: #ff8a1e;
    --gradient: linear-gradient(90deg, #f5386d 0%, #ff8a1e 100%);
    --dark: #1a1a2e;
    --gray: #666;
    --light: #fff8f8;
    --iconBg: #fff3f5;
}


.career-hero {
    background-image: url('../images/career/hero-img.png');
    background-size: 100% 100%;
    height: 300px;
}


/* Hero */
.career-hero {
    padding: 16px 0 4px;
}

.apply-now-hero {
    background-image: url('../images/career/apply-now.png');
    background-size: 100% 100%;
    height: 280px;
}


/* Hero */
.apply-now-hero {
    padding: 16px 0 4px;
}

.hero-badge {
    display: inline-block;
    color: var(--pink);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.career-hero h1 {
    font-weight: 800;
    line-height: 1.1;
}

.career-hero h1 .accent {
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.apply-now-hero h1 {
    font-weight: 800;
    line-height: 1.1;
}

.apply-now-hero h1 .accent {
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-visual img {
    border-radius: 0px;
}

.hero-stats i {
    color: var(--pink);
    font-size: 20px;
}

.new:hover {
    transform: translate(-5px, -5px) scale(.8);
    box-shadow: 0 18px 35px rgba(245, 95, 141, .25);
    border-color: transparent;
    cursor: pointer;

}

/* Mobile */
@media (max-width: 767.98px) {
    .btn-gradient {
        padding: 8px 6px;
        font-size: 14px;
        border-radius: 8px;
    }
}

/* Mobile View */
@media (max-width: 767.98px) {

    .hero-stats .new {
        padding-left: 30px;
    }

    .hero-stats .new i {
        margin-right: 6px;
        font-size: 18px;
    }

}

.career-detail-section {

    padding: 35px 0 50px;

    background: #fff;

}


/* =====================================
   TOP INFORMATION
===================================== */

.career-top-info {

    background: var(--pink);

    padding: 15px 25px;

    display: grid;

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

    gap: 20px;

    margin-bottom: 18px;

}


.career-info-title {

    color: #fff;

    font-size: 15px;
    gap: 6px;
    font-weight: 700;

    margin-bottom: 7px;
    display: flex;

}


.career-info-title i {

    margin-right: 4px;

}


.career-info-value {

    color: #fff;

    font-size: 15px;

    font-weight: 700;

}


/* =====================================
   JOB TITLE
===================================== */

.career-detail-title {

    font-size: 27px;

    font-weight: 500;

    color: #172033;

    margin-bottom: 20px;

}


/* =====================================
   CONTENT BLOCK
===================================== */

.career-detail-block {

    margin-bottom: 20px;

}


.career-detail-block h2 {

    color: #172033;

    font-size: 23px;

    font-weight: 500;

    margin-bottom: 8px;

}


.career-detail-content ul {

    margin: 0;

    padding-left: 30px;

}


.career-detail-content li {

    color: #26384f;

    font-size: 16px;

    line-height: 20px;

    margin-bottom: 2px;

}


/* =====================================
   TOTAL POSITION
===================================== */

.career-total-position {

    color: #26384f;

    font-size: 14px;

    margin-top: 15px;

}


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


.career-apply-btn {

    display: inline-block;

    background: var(--gradient);

    color: #fff;

    padding: 11px 18px;

    border-radius: 5px;

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;

    transition: .3s;

}


.career-apply-btn:hover {

    color: #fff;

    transform: translateY(-2px);

    box-shadow:
        0 5px 15px rgba(244, 91, 136, .3);

}


/* =====================================
   RIGHT SIDEBAR
===================================== */

.career-advice-box {

    background: #fff;

    padding: 20px;

    border-radius: 7px;

    box-shadow:
        0 5px 20px rgba(0, 0, 0, .08);

}


.career-advice-title {

    display: inline-block;

    background: var(--pink);

    color: #fff;

    font-size: 13px;

    padding: 11px 17px;

    border-radius: 4px;

    margin-bottom: 12px;

}


.career-advice-item {

    display: block;

    color: #26384f;

    text-decoration: none;

    font-size: 13px;

    line-height: 19px;

    padding: 14px 0;

    border-bottom: 1px solid #e5e5e5;

}


.career-advice-item:hover {

    color: #f45b88;

}


/* =====================================
   VIEW MORE
===================================== */

.career-view-more {

    display: block;

    text-align: center;

    margin-top: 12px;

    padding: 10px;

    border-radius: 4px;

    background: var(--gradient);

    color: #fff;

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;

}


.career-view-more:hover {

    color: #fff;

}


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

@media (max-width: 991px) {

    .career-top-info {

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

    }

}


@media (max-width: 575px) {

    .career-top-info {

        grid-template-columns:
            1fr;

        padding: 18px;

    }

    .career-detail-title {

        font-size: 23px;

    }

    .career-detail-block h2 {

        font-size: 20px;

    }

}


.career-detail-content {
    color: #26384f;
    font-size: 13px;
    line-height: 20px;
    padding: 7px 20px 10px 20px;
}

.career-detail-content p {
    margin-bottom: 8px;
}

.career-detail-content ul {
    margin: 0 0 10px 0;
    padding-left: 30px;
}

.career-detail-content ol {
    margin: 0 0 10px 0;
    padding-left: 30px;
}

.career-detail-content li {
    margin-bottom: 3px;
}

.career-detail-content strong {
    font-weight: 600;
}

/* =========================================================
   APPLY NOW PAGE
========================================================= */

:root {
    --primary-pink: #f5386d;
    --primary-orange: #ff8a1e;
    --dark-blue: #102a43;
    --text-color: #526b84;
    --light-pink: #fff3f7;
    --border-color: #e9edf3;
}


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

.apply-hero-content {
    position: relative;
    z-index: 2;
    padding-left: 30px;
}


.apply-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 30px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    background: linear-gradient(90deg,
            #f5386d 0%,
            #ff8a1e 100%);
    box-shadow: 0 8px 22px rgba(245, 56, 109, .18);
}


.apply-hero-content h1 {
    margin: 18px 0 18px;
    color: var(--dark-blue);
    font-size: clamp(38px, 4vw, 62px);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -1px;
}

.apply-hero-content h1 span {
    background: linear-gradient(90deg,
            #f5386d 0%,
            #ff8a1e 100%);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.apply-hero-content p {
    max-width: 650px;
    margin-bottom: 22px;
    color: var(--text-color);
    font-size: 16px;
    line-height: 1.8;
}


.apply-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
}

.apply-hero-points div {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #24496d;
    font-size: 14px;
    font-weight: 600;
}

.apply-hero-points i {
    color: var(--primary-pink);
}


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

.apply-hero-image {
    position: relative;
    height: 360px;
    overflow: visible;
    border-radius: 35px 0 35px 0;
}

.apply-hero-image img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 35px 0 35px 0;
    box-shadow: 0 25px 60px rgba(20, 40, 70, .14);
}


/* decorative gradient */

.image-gradient-shape {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 18px;
    left: 18px;
    border-radius: 35px 0 35px 0;

    background: linear-gradient(135deg,
            #f5386d,
            #ff8a1e);
}


/* =========================================================
   FLOATING CARDS
========================================================= */

.floating-card {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    background: rgba(255, 255, 255, .95);
    border-radius: 14px;
    box-shadow: 0 15px 35px rgba(20, 40, 70, .15);
    backdrop-filter: blur(10px);
}

.floating-card i {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(90deg,
            #f5386d,
            #ff8a1e);
}

.floating-card span {
    color: var(--dark-blue);
    font-size: 14px;
    font-weight: 700;
}

.floating-card small {
    display: block;
    margin-top: 2px;
    color: #7890a7;
    font-size: 11px;
    font-weight: 400;
}

.card-one {
    left: -25px;
    bottom: 30px;
}

.card-two {
    right: -25px;
    top: 35px;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.apply-breadcrumb {
    background: #fff;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #edf0f4;
}

.breadcrumb-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 58px;
    font-size: 13px;
}

.breadcrumb-inner a {
    color: #58718a;
    text-decoration: none;
    transition: .3s;
}

.breadcrumb-inner a:hover {
    color: var(--primary-pink);
}

.breadcrumb-inner>i {
    color: #aeb9c5;
    font-size: 10px;
}

.breadcrumb-inner span {
    color: var(--primary-pink);
    font-weight: 600;
}


/* =========================================================
   APPLICATION SECTION
========================================================= */

.career-apply-section {
    position: relative;
    padding: 65px 0 80px;
    background: #f9fbfd;
}


/* =========================================================
   FORM WRAPPER
========================================================= */

.apply-form-wrapper {
    padding: 35px;
    background: #fff;
    border: 1px solid #edf0f4;
    border-radius: 20px;
    box-shadow: 0 15px 45px rgba(30, 55, 80, .07);
}


/* =========================================================
   FORM HEADER
========================================================= */

.apply-form-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 25px;
    margin-bottom: 25px;
    border-bottom: 1px solid #edf0f4;
}

.form-header-icon {
    width: 55px;
    height: 55px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;

    color: #fff;

    background: linear-gradient(135deg,
            #f5386d,
            #ff8a1e);

    font-size: 21px;
    box-shadow: 0 10px 25px rgba(245, 56, 109, .18);
}

.apply-form-header h2 {
    margin: 0 0 4px;
    color: var(--dark-blue);
    font-size: 26px;
    font-weight: 750;
}

.apply-form-header p {
    margin: 0;
    color: #8294a8;
    font-size: 13px;
}


/* =========================================================
   FORM GROUP
========================================================= */

.form-group {
    margin-bottom: 22px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #233f5c;
    font-size: 13px;
    font-weight: 650;
}

.form-group label span {
    color: var(--primary-pink);
}


/* =========================================================
   INPUT
========================================================= */

.input-box,
.select-box {
    position: relative;
}

.input-box>i,
.select-box>i {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #f5386d;
    font-size: 13px;
}

.input-box input,
.select-box select {
    width: 100%;
    height: 48px;
    padding: 0 15px 0 43px;
    color: #263f59;
    background: #fff;
    border: 1px solid #e1e7ee;
    border-radius: 10px;
    outline: none;
    font-size: 13px;
    transition: all .3s ease;
}

.input-box input::placeholder {
    color: #a9b6c4;
}

.input-box input:focus,
.select-box select:focus {
    border-color: #f5386d;
    box-shadow: 0 0 0 4px rgba(245, 56, 109, .08);
}


/* readonly */

.input-box input[readonly] {
    background: #f8fafc;
    color: #5d7186;
    cursor: not-allowed;
}


/* =========================================================
   SELECT
========================================================= */

.select-box select {
    appearance: none;
    cursor: pointer;
}

.select-box::after {
    content: "\f107";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #8294a8;
    pointer-events: none;
}


/* =========================================================
   EXPERIENCE ROW
========================================================= */

.experience-row {
    display: flex;
    gap: 10px;
}

.experience-row .input-box {
    flex: 1;
}

.experience-row select {
    width: 125px;
    padding: 0 10px;
    color: #526b84;
    background: #fff;
    border: 1px solid #e1e7ee;
    border-radius: 10px;
    outline: none;
    font-size: 12px;
}

.experience-row select:focus {
    border-color: #f5386d;
}


/* =========================================================
   FILE UPLOAD
========================================================= */

.file-box {
    position: relative;
    display: flex;
    align-items: center;
    height: 48px;
    overflow: hidden;
    border: 1px dashed #f39ab2;
    border-radius: 10px;
    background: #fff8fa;
}

.file-box i {
    width: 45px;
    text-align: center;
    color: var(--primary-pink);
}

.file-box input {
    width: calc(100% - 45px);
    height: 100%;
    padding: 10px;
    font-size: 12px;
    color: #60758b;
}

.file-help {
    display: block;
    margin-top: 5px;
    color: #99a8b6;
    font-size: 10px;
}


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

.apply-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 170px;
    height: 50px;
    padding: 0 25px;
    border: none;
    border-radius: 10px;

    color: #fff;

    background: linear-gradient(90deg,
            #f5386d 0%,
            #ff8a1e 100%);

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

    box-shadow: 0 10px 25px rgba(245, 56, 109, .22);

    cursor: pointer;

    transition: all .35s ease;
}

.apply-submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(245, 56, 109, .30);
}

.apply-submit-btn i:last-child {
    transition: transform .3s ease;
}

.apply-submit-btn:hover i:last-child {
    transform: translateX(5px);
}


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

.why-join-card {
    position: sticky;
    top: 100px;
    padding: 30px;
    overflow: hidden;
    background:
        radial-gradient(circle at 100% 0%, rgba(245, 56, 109, .08), transparent 30%),
        linear-gradient(145deg, #fff7fa, #fff);

    border: 1px solid #f5e6eb;
    border-radius: 20px;

    box-shadow: 0 15px 45px rgba(30, 55, 80, .08);
}


/* =========================================================
   WHY HEADER
========================================================= */

.why-join-header {
    display: flex;
    gap: 14px;
}

.why-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;

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

    border-radius: 50%;

    color: var(--primary-pink);
    background: #ffe9f0;

    font-size: 20px;
}

.why-join-header h3 {
    margin: 0 0 7px;
    color: var(--dark-blue);
    font-size: 22px;
    font-weight: 750;
}

.why-join-header h3 span {
    color: var(--primary-pink);
}

.why-join-header p {
    margin: 0;
    color: #6d8398;
    font-size: 12px;
    line-height: 1.7;
}


/* =========================================================
   BENEFIT
========================================================= */

.benefit-item {
    display: flex;
    gap: 15px;
    padding: 17px 0;
    border-bottom: 1px solid #f1e9ed;
}

.benefit-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;

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

    border-radius: 50%;

    color: var(--primary-pink);
    background: #ffe9f0;

    font-size: 18px;

    transition: all .3s ease;
}

.benefit-item:hover .benefit-icon {
    color: #fff;

    background: linear-gradient(135deg,
            #f5386d,
            #ff8a1e);

    transform: rotate(-8deg) scale(1.08);
}

.benefit-item h4 {
    margin: 2px 0 5px;
    color: #315473;
    font-size: 15px;
    font-weight: 700;
}

.benefit-item p {
    margin: 0;
    color: #8093a6;
    font-size: 11px;
    line-height: 1.6;
}


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

.join-cta {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 25px;
    padding: 18px;
    overflow: hidden;

    border-radius: 14px;

    color: #fff;

    background: linear-gradient(90deg,
            #f5386d 0%,
            #ff8a1e 100%);

    box-shadow: 0 12px 30px rgba(245, 56, 109, .20);
}

.join-cta::after {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    right: -40px;
    bottom: -50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
}

.cta-icon {
    width: 43px;
    height: 43px;
    flex-shrink: 0;

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

    border-radius: 50%;

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

    font-size: 18px;
}

.join-cta strong {
    font-size: 13px;
    line-height: 1.5;
}

.join-cta>i:last-child {
    margin-left: auto;
    font-size: 15px;
}


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

@media (max-width: 991px) {

    .apply-hero-content {
        padding-left: 0;
        text-align: center;
    }

    .apply-hero-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .apply-hero-points {
        justify-content: center;
    }

    .apply-hero-image {
        max-width: 650px;
        margin: 25px auto 0;
    }

    .why-join-card {
        position: relative;
        top: 0;
    }

}


@media (max-width: 767px) {

    .apply-now-hero {
        padding: 40px 0 50px;
    }

    .apply-hero-content h1 {
        font-size: 38px;
    }

    .apply-hero-image {
        height: 280px;
    }

    .floating-card {
        transform: scale(.85);
    }

    .card-one {
        left: -10px;
    }

    .card-two {
        right: -10px;
    }

    .apply-form-wrapper {
        padding: 22px;
    }

    .apply-form-header h2 {
        font-size: 22px;
    }

    .experience-row {
        flex-direction: column;
    }

    .experience-row select {
        width: 100%;
        height: 48px;
    }

    .why-join-card {
        padding: 23px;
    }

}


@media (max-width: 480px) {

    .apply-hero-content h1 {
        font-size: 32px;
    }

    .apply-hero-content p {
        font-size: 14px;
    }

    .apply-hero-points {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .apply-hero-image {
        height: 230px;
    }

    .floating-card {
        display: none;
    }

    .apply-form-wrapper {
        padding: 18px;
        border-radius: 15px;
    }

    .apply-submit-btn {
        width: 100%;
    }

}