.srsg-sticky-header {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 99999;
    background: #fff;
}


/* =========================================================
   TOP BAR
========================================================= */

.top-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 28px;
    padding: 14px 40px 0 40px;
    background: #fff;
}

.top-bar a {
    color: #535353;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    transition: color 0.2s ease;
}

.top-bar a:hover {
    color: #707070;
}

.plain-link.active {
    color: #707070 !important;
}


/* =========================================================
   MAIN NAV
========================================================= */

.main-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 40px 18px 40px;
    background: #fff;
}

.logo-block {
    margin-top: -15px;
    display: flex;
    flex-direction: column;
    line-height: 1;
    flex-shrink: 0;
}

.logo-text {
    display: flex;
    align-items: center;
    gap: 6px;
}

.logo-text a {
    display: flex;
    align-items: center;
}

.logo-text img {
    max-width: 100%;
    height: auto;
    display: block;
}


/* =========================================================
   PRIMARY LINKS
========================================================= */

.primary-links {
    display: flex;
    align-items: center;
    gap: 34px;
}

.nav-item {
    position: relative;
}

.nav-item > button {
    background: none;
    border: none;
    font-family: "Helvetica Neue", Sans-serif;
    color: #0F0F0F;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 8px 0;
    white-space: nowrap;
    transition: color 0.2s ease;
}


/* =========================================================
   MAIN NAV LINKS
========================================================= */

.nav-main-link {
    color: inherit;
    text-decoration: none;
    font: inherit;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.nav-main-link:hover {
    color: inherit;
}


.nav-item > button:hover,
.nav-item.open > button {
    color: #707070;
}

.plain-link {
    color: #0F0F0F;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.plain-link:hover {
    color: #707070;
}


/* =========================================================
   CARET
========================================================= */

.caret {
    font-size: 17px;
    font-weight: 600;
    margin-top: -2px;
    transition: transform 0.2s ease;
    display: inline-block;
    color: #6e6e6e;
}

.nav-item.open .caret {
    transform: rotate(180deg);
}


/* =========================================================
   DROPDOWN
========================================================= */

.dropdown {
    display: none;
    position: absolute;
    left: -15%;
    background: #f4f4f4;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
    border: 1px solid #dadada;
    min-width: 220px;
    z-index: 100;
}


/* DESKTOP HOVER */

.nav-item:hover > .dropdown {
    display: block;
}


/* JS / OPEN STATE */

.nav-item.open > .dropdown {
    display: block;
}


.dropdown a {
    display: block;
    padding: 15px 15px;
    color: #444;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}

.dropdown a:hover {
    background: #fafafa;
    color: #707070;
}


/* =========================================================
   SUBMENU
========================================================= */

.dd-parent {
    position: relative;
}

.dd-parent > button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    text-align: left;
    padding: 15px 15px;
    color: #444;
    font-family: "Helvetica Neue", Sans-serif;
    font-size: 15px;
    font-weight: 500;
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.dd-parent:hover > button,
.dd-parent.open > button {
    background: #fafafa;
    color: #707070;
}

.dd-parent > button .sub-caret {
    font-size: 15px;
    font-weight: 600;
    margin-top: -2px;
    transition: transform 0.2s ease;
    display: inline-block;
    color: #6e6e6e;
}

.dd-parent.open > button .sub-caret {
    color: #1b6d6a;
}


.submenu {
    display: none;
    position: absolute;
    top: 0px;
    left: 100%;
    background: #f4f4f4;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
    border: 1px solid #dadada;
    min-width: 220px;
    z-index: 101;
}


/* DESKTOP HOVER */

.dd-parent:hover > .submenu {
    display: block;
}


/* JS / OPEN STATE */

.dd-parent.open > .submenu {
    display: block;
}


/* =========================================================
   SEARCH ICON
========================================================= */

.search-icon {
    font-size: 18px;
    color: #262626;
    cursor: pointer;
    background: none;
    border: none;
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.srsg-mobile-menu-toggle {
    display: none;
    width: 42px;
    height: 42px;
    padding: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex-shrink: 0;
}

.srsg-mobile-menu-toggle span {
    display: block;
    width: 25px;
    height: 2px;
    background: #262626;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.srsg-mobile-menu-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.srsg-mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.srsg-mobile-menu-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


/* =========================================================
   MOBILE TOP LINKS
========================================================= */

.mobile-top-links {
    display: none;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1200px) {

    .top-bar {
        gap: 20px;
        padding-left: 25px;
        padding-right: 25px;
    }

    .main-nav {
        padding-left: 25px;
        padding-right: 25px;
    }

    .primary-links {
        gap: 20px;
    }

    .nav-item > button,
    .plain-link {
        font-size: 14px;
    }

}


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

@media (max-width: 900px) {

    .srsg-sticky-header {
        position: sticky;
        top: 0;
        width: 100%;
        z-index: 99999;
    }


    /* Hide desktop top bar */

    .top-bar {
        display: none;
    }


    /* Main mobile header */

    .main-nav {
        position: relative;
        width: 100%;
        min-height: 70px;
        padding: 10px 20px;
        display: flex;
        align-items: center;
        background: #fff;
    }


    /* Logo */

    .logo-block {
        margin-top: 0;
    }

    .logo-text img {
        max-width: 145px;
        height: auto;
    }


    /* Hamburger */

    .srsg-mobile-menu-toggle {
        display: flex;
        margin-left: auto;
    }


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

    .primary-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #fff;
        box-shadow: 0 10px 25px rgba(0,0,0,0.12);
        padding: 0 20px 20px;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .primary-links.mobile-open {
        display: flex;
    }


    /* =====================================================
       MOBILE TOP LINKS
    ===================================================== */

    .mobile-top-links {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 10px 0 5px;
        border-bottom: 1px solid #eeeeee;
        margin-bottom: 5px;
    }

    .mobile-top-links a {
        display: block;
        width: 100%;
        padding: 13px 5px;
        color: #58595b;
        text-decoration: none;
        font-size: 15px;
        font-weight: 600;
        border-bottom: 1px solid #eeeeee;
    }

    .mobile-top-links a:last-child {
        border-bottom: none;
    }

    .mobile-top-links a:hover {
        color: #1b6d6a;
    }


    /* =====================================================
       MOBILE NAV ITEMS
    ===================================================== */

    .nav-item {
        width: 100%;
        border-bottom: 1px solid #eeeeee;
    }

    .nav-item > button {
        width: 100%;
        justify-content: space-between;
        padding: 15px 5px;
        font-size: 16px;
    }

    .plain-link {
        display: block;
        width: 100%;
        padding: 15px 5px;
        border-bottom: 1px solid #eeeeee;
        font-size: 16px;
    }


    /* =====================================================
       MOBILE MAIN NAV LINKS
    ===================================================== */

    .nav-main-link {
        color: inherit;
        text-decoration: none;
        font: inherit;
        display: inline-flex;
        align-items: center;
    }


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

    .dropdown {
        position: static;
        transform: none;
        width: 100%;
        min-width: 100%;
        box-shadow: none;
        border-radius: 0;
        padding: 0 0 8px;
        background: #f8fafa;
    }


    /* Disable desktop hover */

    .nav-item:hover > .dropdown {
        display: none;
    }

    .nav-item.open > .dropdown {
        display: block;
    }


    .dropdown a {
        padding: 12px 20px;
        font-size: 15px;
        white-space: normal;
    }


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

    .dd-parent {
        width: 100%;
    }

    .dd-parent > button {
        padding: 12px 20px;
        font-size: 15px;
    }

    .submenu {
        position: static;
        width: 100%;
        min-width: 100%;
        margin: 0;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        background: #f1f6f5;
    }


    .dd-parent:hover > .submenu {
        display: none;
    }

    .dd-parent.open > .submenu {
        display: block;
    }

    .submenu a {
        padding-left: 35px;
    }

}


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

@media (max-width: 576px) {

    .main-nav {
        min-height: 65px;
        padding: 8px 15px;
    }

    .logo-text img {
        max-width: 130px;
    }

    .srsg-mobile-menu-toggle {
        width: 40px;
        height: 40px;
    }

    .primary-links {
        max-height: calc(100vh - 65px);
        padding-left: 15px;
        padding-right: 15px;
    }

    .mobile-top-links a {
        font-size: 14px;
        padding: 12px 5px;
    }

    .nav-item > button,
    .plain-link {
        font-size: 15px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .logo-text img {
        max-width: 115px;
    }

    .main-nav {
        padding-left: 12px;
        padding-right: 12px;
    }

    .srsg-mobile-menu-toggle {
        width: 38px;
        height: 38px;
    }

}


/* =========================================================
   YOUR EXISTING PAGE CSS STARTS HERE
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Helvetica Neue", Sans-serif;
}


.career-banner {
    position: relative;
    width: 100%;
    height: 700px;
    background: url('../img/hero-section.png') center center/cover no-repeat;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    text-align: center;
}

.career-banner .overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.08);
}

.banner-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    padding: 90px 20px 0;
}

.banner-content h1 {
    font-size: 46px;
    font-weight: 700;
    color: #111;
    margin-bottom: 20px;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: "Helvetica Neue", Sans-serif;
}

.banner-content p {
    font-size: 18px;
    color: #222;
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
    font-family: "Helvetica Neue", Sans-serif;
}

@media (max-width: 992px) {

    .career-banner {
        height: 550px;
    }

    .banner-content {
        padding-top: 70px;
    }

    .banner-content h1 {
        font-size: 48px;
    }

    .banner-content p {
        font-size: 22px;
    }

}

@media (max-width: 768px) {

    .career-banner {
        height: 420px;
    }

    .banner-content {
        padding: 50px 20px 0;
    }

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

    .banner-content p {
        font-size: 18px;
        line-height: 1.5;
    }

}


.life-section {
    padding: 60px 0 70px;
    text-align: center;
    overflow: hidden;
    background: #F7F3EA;
    font-family: "Helvetica Neue", Sans-serif;
}

.life-section h1 {
    font-size: 42px;
    font-weight: 700;
    margin: 0 0 18px;
    background: linear-gradient(180deg, #1a5f87 19%, #009894 70%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-family: "Helvetica Neue", Sans-serif;
}

.life-section p.subtitle {
    font-size: 16px;
    color: #5c5c5c;
    text-transform: uppercase;
    margin: 0 0 50px;
    font-weight: 600;
    font-family: "Helvetica Neue", Sans-serif;
}

.life-section .marquee-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.life-section .marquee-track {
    display: flex;
    width: max-content;
    animation: life-scroll-left 35s linear infinite;
}

.life-section .marquee-track:hover {
    animation-play-state: paused;
}

.life-section .marquee-track img {
    height: 260px;
    width: auto;
    object-fit: cover;
    margin-right: 14px;
    border-radius: 4px;
    flex-shrink: 0;
}

@keyframes life-scroll-left {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}

@media (max-width: 768px) {

    .life-section h1 {
        font-size: 34px;
    }

    .life-section p.subtitle {
        font-size: 14px;
        padding: 0 20px;
    }

    .life-section .marquee-track img {
        height: 150px;
    }

}

@media (prefers-reduced-motion: reduce) {

    .life-section .marquee-track {
        animation: none;
    }

}


.our-values-section {
    position: relative;
    padding: 35px 55px;
    background: url("https://srsg.com/wp-content/uploads/2026/05/career-background-image1.png") center center/cover no-repeat;
    overflow: hidden;
}

.our-values-section .overlay {
    position: absolute;
    inset: 0;
}

.our-values-section .container {
    position: relative;
    z-index: 2;
    max-width: 1320px;
    margin: auto;
    padding: 0 20px;
}

.section-title {
    text-align: center;
    margin-bottom: 60px;
}

.section-title h2 {
    color: #fff;
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.section-title p {
    color: #f3f3f3;
    font-size: 16px;
    max-width: 760px;
    margin: auto;
    line-height: 1.8;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 50px;
}

.value-card {
    text-align: center;
    overflow: hidden;
    transition: .4s;
}

.value-card:hover {
    transform: translateY(-10px);
}

.value-image {
    overflow: hidden;
}

.value-image img {
    width: 100%;
    object-fit: cover;
    display: block;
    transition: .6s;
}

.value-card:hover img {
    transform: scale(1.08);
}

.value-content {
    padding: 26px 0 0;
}

.value-content h3 {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 18px;
    text-transform: uppercase;
}

.value-content p {
    color: #e9e9e9;
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
    letter-spacing: 0.2px;
}

@media(max-width:991px) {

    .section-title h2 {
        font-size: 42px;
    }

    .section-title p {
        font-size: 18px;
    }

    .values-grid {
        grid-template-columns: repeat(2,1fr);
        gap: 30px;
    }

    .value-image img {
        height: 220px;
    }

}

@media(max-width:767px) {

    .our-values-section {
        padding: 70px 0;
    }

    .section-title {
        margin-bottom: 40px;
    }

    .section-title h2 {
        font-size: 34px;
    }

    .section-title p {
    font-size: 16px;
    line-height: 1.7;
}
}

/* =========================================================
   DYNAMIC CAREER + HR PANEL
========================================================= */

.career-alert {
    max-width: 1400px;
    margin: 0 auto 24px;
    padding: 14px 18px;
    border: 1px solid #f0b8b8;
    border-radius: 8px;
    background: #fff1f1;
    color: #9a2323;
    font-size: 15px;
}

.career-alert-success {
    border-color: #a9dfbf;
    background: #effaf3;
    color: #1d6b3a;
}

.hr-auth {
    min-height: 100vh;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 32px;
    background:
        linear-gradient(135deg, rgba(0,152,148,0.12), rgba(255,255,255,0) 40%),
        radial-gradient(circle at 80% 10%, rgba(244,180,52,0.2), rgba(244,180,52,0) 28%),
        #f4f8fb;
    font-family: "Helvetica Neue", Arial, sans-serif;
}

.hr-auth-panel {
    width: min(980px, 100%);
    min-height: 560px;
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(320px, 420px);
    overflow: hidden;
    border: 1px solid rgba(18,58,77,0.08);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 24px 80px rgba(18,58,77,0.16);
}

.hr-auth-brand {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 48px;
    color: #fff;
    background:
        linear-gradient(160deg, rgba(18,58,77,0.94), rgba(0,152,148,0.84)),
        url("../img/hero-section.png") center/cover;
}

.hr-logo {
    display: block;
    width: 136px;
    height: auto;
    margin-bottom: 18px;
    border-radius: 4px;
    background: #fff;
    padding: 8px 10px;
}

.hr-logo-light {
    width: 160px;
    margin-bottom: 26px;
}

.hr-auth-brand span,
.hr-card-heading span,
.hr-page-header span,
.hr-brand span {
    display: block;
    margin-bottom: 8px;
    color: #009894;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.hr-auth-brand span {
    color: #d7f4f2;
}

.hr-auth-brand h1 {
    margin: 0 0 14px;
    font-size: 44px;
    line-height: 1.05;
}

.hr-auth-brand p {
    max-width: 390px;
    margin: 0;
    color: #e8f7f6;
    font-size: 16px;
    line-height: 1.7;
}

.hr-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    padding: 48px;
}

.hr-card-heading {
    margin-bottom: 26px;
}

.hr-card-heading h2 {
    margin: 0;
    color: #162b38;
    font-size: 32px;
    line-height: 1.15;
}

.hr-card,
.hr-form {
    background: #fff;
    border: 1px solid #dde8e7;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(18,58,77,0.08);
}

.hr-card input,
.hr-form input,
.hr-form select,
.hr-form textarea {
    width: 100%;
    border: 1px solid #d7e1e4;
    border-radius: 6px;
    padding: 13px 14px;
    color: #172b38;
    font: inherit;
    background: #fbfdfd;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

.hr-card input:focus,
.hr-form input:focus,
.hr-form select:focus,
.hr-form textarea:focus {
    border-color: #009894;
    box-shadow: 0 0 0 4px rgba(0,152,148,0.12);
}

.hr-card input {
    margin-bottom: 14px;
}

.hr-card button,
.hr-form button {
    border: none;
    border-radius: 6px;
    background: #009894;
    color: #fff;
    font-weight: 800;
    padding: 13px 24px;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(0,152,148,0.22);
    transition: transform .2s, background .2s;
}

.hr-card button:hover,
.hr-form button:hover {
    transform: translateY(-1px);
    background: #087f7d;
}

.hr-help {
    color: #667;
    font-size: 13px;
    margin: 16px 0 0;
}

.hr-layout {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    font-family: "Helvetica Neue", Arial, sans-serif;
    background: #f4f7fa;
}

.hr-sidebar {
    position: sticky;
    top: 0;
    min-height: 100vh;
    color: #fff;
    padding: 28px 20px;
    background: #123a4d;
}

.hr-brand {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

.hr-brand span {
    color: #8ee3df;
}

.hr-brand h2 {
    margin: 0;
    color: #fff;
    font-size: 28px;
}

.hr-nav {
    display: grid;
    gap: 8px;
}

.hr-nav a {
    display: block;
    color: #eefafa;
    text-decoration: none;
    padding: 12px 14px;
    border-radius: 6px;
    transition: background .2s, color .2s;
}

.hr-nav a:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}

.hr-main {
    padding: 34px;
    overflow-x: auto;
}

.hr-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 28px;
}

.hr-page-header h1 {
    margin: 0;
    color: #162b38;
    font-size: 34px;
    line-height: 1.1;
}

.hr-view-site {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid #d7e1e4;
    border-radius: 6px;
    color: #123a4d;
    background: #fff;
    font-weight: 800;
    text-decoration: none;
}

.hr-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.hr-stats a {
    position: relative;
    overflow: hidden;
    min-height: 150px;
    padding: 24px;
    border: 1px solid #dfe8eb;
    border-radius: 8px;
    background: #fff;
    text-decoration: none;
    box-shadow: 0 14px 36px rgba(18,58,77,0.08);
}

.hr-stats a::after {
    content: "";
    position: absolute;
    right: -28px;
    bottom: -28px;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: rgba(0,152,148,0.12);
}

.hr-stats strong {
    display: block;
    margin-bottom: 12px;
    color: #009894;
    font-size: 46px;
    line-height: 1;
}

.hr-stats span {
    color: #334750;
    font-weight: 800;
}

.hr-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    padding: 18px;
    margin-bottom: 24px;
}

.hr-form-wide textarea {
    grid-column: 1 / -1;
    min-height: 140px;
}

.hr-password-form {
    max-width: 620px;
    grid-template-columns: 1fr;
}

.hr-table {
    width: 100%;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid #dfe8eb;
    border-radius: 8px;
    box-shadow: 0 14px 36px rgba(18,58,77,0.07);
}

.hr-table-wrap {
    overflow-x: auto;
}

.hr-table th,
.hr-table td {
    padding: 15px 16px;
    border-bottom: 1px solid #edf2f4;
    text-align: left;
    vertical-align: top;
    color: #334750;
}

.hr-table th {
    background: #f0f7f7;
    color: #162b38;
    font-size: 13px;
    text-transform: uppercase;
}

.hr-table tr:last-child td {
    border-bottom: none;
}

.hr-table a {
    color: #007f89;
    font-weight: 800;
    text-decoration: none;
    margin-right: 12px;
}

.hr-muted {
    color: #6b7f88;
    font-size: 13px;
}

.hr-table-action {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 6px;
    background: rgba(0,152,148,0.1);
}

.hr-status {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.hr-status-active {
    background: #e9f8f3;
    color: #167548;
}

.hr-status-inactive {
    background: #fff1f1;
    color: #9a2323;
}

.dt-container {
    color: #334750;
    font-family: "Helvetica Neue", Arial, sans-serif;
}

.dt-container .dt-search input,
.dt-container .dt-length select {
    border: 1px solid #d7e1e4;
    border-radius: 6px;
    padding: 8px 10px;
    outline: none;
}

.dt-container .dt-search input:focus,
.dt-container .dt-length select:focus {
    border-color: #009894;
    box-shadow: 0 0 0 4px rgba(0,152,148,0.12);
}

.dt-container .dt-paging .dt-paging-button {
    border-radius: 6px;
}

.dt-container .dt-paging .dt-paging-button.current,
.dt-container .dt-paging .dt-paging-button.current:hover {
    border-color: #009894;
    background: #009894;
    color: #fff !important;
}

@media (max-width: 1000px) {
    .job-search-form {
        flex-direction: column;
        align-items: stretch;
        gap: 25px;
    }
}

@media (max-width: 900px) {
    .hr-auth-panel,
    .hr-layout,
    .hr-form,
    .hr-stats {
        grid-template-columns: 1fr;
    }

    .hr-auth-brand {
        min-height: 280px;
    }

    .hr-sidebar {
        position: static;
        min-height: auto;
    }

    .hr-main {
        padding: 24px;
    }
}

@media(max-width:767px) {
    .hr-auth {
        padding: 16px;
    }

    .hr-auth-brand,
    .hr-card {
        padding: 28px;
    }

    .hr-auth-brand h1,
    .hr-page-header h1 {
        font-size: 30px;
    }

    .hr-page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .hr-table {
        min-width: 720px;
    }
}

@media(max-width:767px) {

    .values-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .value-image img {
        height: 220px;
    }

    .value-content {
        padding: 25px 20px 30px;
    }

    .value-content h3 {
        font-size: 24px;
    }

    .value-content p {
        font-size: 16px;
    }
}

/* Legacy HR block kept disabled after template refresh.
.hr-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: #eef7f6;
    font-family: "Helvetica Neue", Sans-serif;
}

.hr-card,
.hr-form {
    background: #fff;
    border: 1px solid #dde8e7;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.hr-card {
    width: min(420px, 100%);
    padding: 32px;
}

.hr-card h1 {
    margin: 0 0 24px;
    color: #1a1a2e;
}

.hr-card input,
.hr-form input,
.hr-form select,
.hr-form textarea {
    width: 100%;
    border: 1px solid #cfdad9;
    border-radius: 6px;
    padding: 12px 14px;
    font: inherit;
}

.hr-card input {
    margin-bottom: 14px;
}

.hr-card button,
.hr-form button {
    border: none;
    border-radius: 24px;
    background: linear-gradient(180deg, #1a5f87 20%, #009894 70%);
    color: #fff;
    font-weight: 700;
    padding: 12px 24px;
    cursor: pointer;
}

.hr-help {
    color: #667;
    font-size: 13px;
    margin: 16px 0 0;
}

.hr-layout {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 250px 1fr;
    font-family: "Helvetica Neue", Sans-serif;
    background: #f7fbfb;
}

.hr-sidebar {
    background: #123a4d;
    color: #fff;
    padding: 28px 22px;
}

.hr-sidebar h2 {
    margin: 0 0 8px;
}

.hr-sidebar p {
    margin: 0 0 26px;
    color: #c9e8e7;
}

.hr-sidebar a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 11px 0;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

.hr-main {
    padding: 32px;
    overflow-x: auto;
}

.hr-main h1 {
    margin: 0 0 24px;
    color: #1a1a2e;
}

.hr-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.hr-stats div {
    background: #fff;
    border: 1px solid #dde8e7;
    border-radius: 8px;
    padding: 24px;
}

.hr-stats strong {
    display: block;
    font-size: 38px;
    color: #008c95;
}

.hr-stats span {
    color: #445;
}

.hr-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    padding: 18px;
    margin-bottom: 24px;
}

.hr-form-wide textarea {
    grid-column: 1 / -1;
    min-height: 140px;
}

.hr-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid #dde8e7;
}

.hr-table th,
.hr-table td {
    padding: 14px;
    border-bottom: 1px solid #e6eeee;
    text-align: left;
    vertical-align: top;
}

.hr-table th {
    background: #edf7f6;
    color: #1a1a2e;
}

.hr-table a {
    color: #007f89;
    font-weight: 700;
    text-decoration: none;
    margin-right: 12px;
}

@media (max-width: 1000px) {
    .job-search-form {
        flex-direction: column;
        align-items: stretch;
        gap: 25px;
    }
}

@media (max-width: 900px) {
    .hr-layout {
        grid-template-columns: 1fr;
    }

    .hr-form,
    .hr-stats {
        grid-template-columns: 1fr;
    }
}

    .values-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .value-image img {
        height: 220px;
    }

    .value-content {
        padding: 25px 20px 30px;
    }

    .value-content h3 {
        font-size: 24px;
    }

	.value-content p {
	    font-size: 16px;
	}

}
*/


/* =========================================================
   COMBINED CAREER CULTURE / WELLNESS SECTION
   ONLY THIS SECTION WAS CHANGED
========================================================= */

.career-culture-section {
    padding: 60px 0 70px;
    background: #FBF9F1;
    overflow: hidden;
    margin-top: 20px;
}

.career-culture-section .container {
    max-width: 1100px;
    margin: auto;
}

.career-heading {
    text-align: center;
    margin-bottom: 35px;
}

.career-heading h2 {
    font-size: 34px;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
    color: #1a5f87;
    margin: 0;
}

.career-heading h2 span {
    display: block;
    margin-top: 12px;
    color: #009894;
}


/* =========================================================
   FOUR CONTENT CONTAINERS
========================================================= */

.career-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
}

.career-content:last-child {
    margin-bottom: 0;
}


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

.career-image {
    width: 50%;
    position: relative;
    z-index: 1;
}

.career-image img {
    width: 100%;
    display: block;
    height: 330px;
    object-fit: cover;
}


/* =========================================================
   CONTENT CARD
========================================================= */

.career-card {
    width: 50%;
    background: #fff;
    padding: 45px;
    margin-left: -40px;
    position: relative;
    z-index: 2;
    margin-top: 75px;
    height: 330px;
}

.career-card:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: linear-gradient(135deg,#ffffff 0%,#f7fffd 100%);
    z-index: -1;
}

.career-card h3 {
    font-size: 25px;
    margin-bottom: 16px;
    font-weight: 700;
    color: #111;
}

.career-card .subtitle {
    font-size: 16px;
    color: #444;
    font-weight: 400;
}

.career-card p {
    font-size: 16px;
    line-height: 1.6;
    color: #555;
    margin-bottom: 0;
}


/* =========================================================
   REVERSE CONTAINERS
   CONTENT LEFT / IMAGE RIGHT
========================================================= */

.career-content-reverse {
    flex-direction: row;
}

.career-content-reverse .career-card {
    margin-left: 0;
    margin-right: -40px;
    order: 1;
}

.career-content-reverse .career-image {
    order: 2;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .career-culture-section {
        padding: 60px 30px;
    }

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

    .career-heading {
        margin-bottom: 45px;
    }

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

    .career-content {
        flex-direction: column;
        margin-bottom: 60px;
    }

    .career-image {
        width: 100%;
        order: 1 !important;
    }

    .career-image img {
        height: 330px;
    }

    .career-card {
        width: 70%;
        background: #fff;
        padding: 35px;
        margin-left: 0;
        margin-right: 0;
        margin-top: -40px;
        position: relative;
        z-index: 2;
        border-radius: 12px;
        box-shadow: 0 20px 50px rgba(0, 0, 0, .12);
        order: 2 !important;
        height: auto;
        min-height: 300px;
    }

    .career-content-reverse .career-card {
        margin-left: 0;
        margin-right: 0;
    }

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

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

}


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

@media (max-width: 767px) {

    .career-culture-section {
        padding: 60px 15px;
        margin-top: 0;
    }

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

    .career-heading {
        margin-bottom: 40px;
    }

    .career-heading h2 {
        font-size: 28px;
        line-height: 1.35;
    }

    .career-heading h2 span {
        margin-top: 8px;
    }

    .career-content {
        margin-bottom: 50px;
    }

    .career-image {
        width: 100%;
    }

    .career-image img {
        width: 100%;
        height: 240px;
        object-fit: cover;
    }

    .career-card {
        width: 92%;
        margin-top: -30px;
        margin-left: 0;
        margin-right: 0;
        padding: 30px 24px;
        border-radius: 10px;
        min-height: auto;
        height: auto;
    }

    .career-content-reverse .career-card {
        margin-left: 0;
        margin-right: 0;
    }

    .career-card h3 {
        font-size: 26px;
        line-height: 1.3;
        margin-bottom: 16px;
    }

    .career-card .subtitle {
        font-size: 17px;
        line-height: 1.7;
    }

    .career-card p {
        font-size: 16px;
        line-height: 1.8;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .career-culture-section {
        padding: 50px 12px;
    }

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

    .career-image img {
        height: 210px;
    }

    .career-card {
        width: 94%;
        padding: 25px 20px;
        margin-top: -25px;
    }

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

    .career-card .subtitle {
        font-size: 16px;
    }

    .career-card p {
        font-size: 15px;
        line-height: 1.7;
    }

}


/* =========================================================
   END OF CHANGED SECTION
========================================================= */


.srsg-sec-02 {
    position: relative;
    width: 100%;
    min-height: 230px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    background: url('https://srsg.com/wp-content/uploads/2026/05/career-background-image2.png') center center/cover no-repeat;
}

.srsg-sec-02-overlay {
    position: absolute;
    inset: 0;
}

.srsg-sec-02-content {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    padding: 20px;
}

.srsg-sec-02-content h1 {
    margin: 0;
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 1px;
    text-transform: uppercase;
}

@media (max-width:991px) {

    .srsg-sec-02 {
        min-height: 300px;
    }

    .srsg-sec-02-content h1 {
        font-size: 40px;
    }

}

@media (max-width:767px) {

    .srsg-sec-02 {
        min-height: 220px;
        padding: 40px 20px;
    }

    .srsg-sec-02-content h1 {
        font-size: 28px;
        line-height: 1.35;
    }

}


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

.footer {
    font-family: "Helvetica Neue", Sans-serif;
    background: linear-gradient(180deg, #255A87 1%, #009896 100%);
    color: #ffffff;
    padding: 40px 40px 15px 40px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 43% 27% 27%;
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
    align-items: start;
}

.footer .connect h2 {
    font-size: 42px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 24px;
    text-transform: uppercase;
    font-family: "Helvetica Neue", Sans-serif;
}

.connect-link {
    text-decoration: none;
    color: inherit;
}

.connect-link h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.connect-link .chevron {
    width: 35px;
    height: 35px;
    object-fit: contain;
}

.footer-grid .connect {
    padding: 30px;
}

.footer .connect p {
    line-height: 1.6em;
    margin: 0 0 48px;
    font-family: "Helvetica Neue", Sans-serif;
    color: #FFFFFF;
}

.footer .socials {
    display: flex;
    gap: 5px;
}

.footer .socials a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1f7a6f;
    text-decoration: none;
}

.footer .socials a:hover {
    background-color: #e7f3f4;
}

.footer .socials svg {
    width: 21px;
    height: 21px;
    fill: #009896;
}

.footer-grid .overview {
    padding: 30px;
}

.footer .overview h2 {
    font-size: 42px;
    font-weight: 500;
    margin: 0 0 24px;
    font-family: "Helvetica Neue", Sans-serif;
}

.footer .overview ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

.footer .overview a {
    color: #FFFFFF;
    text-decoration: none;
    transition: opacity 0.2s ease;
    line-height: 1.6em;
    font-family: "Helvetica Neue", Sans-serif;
}

.footer .overview a:hover {
    opacity: 1;
    text-decoration: none;
}

.footer-grid .map-card {
    padding: 30px;
}

.footer .map-card iframe {
    display: block;
    width: 100%;
    height: 300px;
    border: none;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgb(0 0 0 / 55%);
}


/* =========================================================
   FOOTER BOTTOM / COPYRIGHT
========================================================= */

.footer-bottom {
    max-width: 1270px;
    margin: 15px auto 0;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    text-align: center;
}

.footer-bottom p {
    font-family: "Helvetica Neue", Sans-serif;
    font-size: 12px;
    font-weight: 300;
    color: #FFFFFF8C;
}

@media (max-width:1000px) {

    .footer-grid {
        grid-template-columns: 1fr;
    }

}


.career701-section {
    padding: 55px 20px;
    background: #fcf9f1;
    font-family: "Helvetica Neue", Sans-serif;
}

.career701-container {
    max-width: 1100px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
}

.career701-content {
    flex: 1;
    max-width: 500px;
}

.career701-content h2 {
    margin: 0 0 25px;
    font-size: 38px;
    font-weight: 800;
    color: #007B8D;
    line-height: 1.1;
    text-transform: uppercase;
}

.career701-content p {
    font-size: 16px;
    line-height: 1.7;
    color: #222;
    margin-bottom: 45px;
}

.career701-line {
    display: block;
    width: 86px;
    height: 2px;
    background: #0d7d96;
}

.career701-form-box {
    width: 420px;
    background: linear-gradient(180deg,#0c6f8f,#0fa0a0);
    padding: 35px;
    border-radius: 10px;
}

.career701-form-box form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.career701-form-box input,
.career701-form-box textarea {
    width: 100%;
    border: none;
    border-radius: 10px;
    background: #fff;
    padding: 10px 15px;
    font-size: 16px;
    color: #000000;
    outline: none;
    box-sizing: border-box;
    height: 40px;
}

.career701-form-box textarea {
    height: 140px;
    resize: none;
    font-family: "Helvetica Neue", Sans-serif;
}

.career701-form-box input[type="file"] {
    padding: 12px 16px;
}

.career701-form-box button {
    height: 40px;
    border: none;
    border-radius: 10px;
    background: #fff;
    color: #222;
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
    transition: .3s;
}

.career701-form-box button:hover {
    background: #f2f2f2;
}

@media (max-width:991px) {

    .career701-container {
        flex-direction: column;
        gap: 0px;
    }

    .career701-content {
        max-width: 100%;
        text-align: center;
    }

    .career701-line {
        margin: auto;
    }

    .career701-form-box {
        width: 100%;
        max-width: 550px;
    }

    .career701-content h2 {
        font-size: 42px;
    }

    .career701-content p {
        font-size: 20px;
    }

}

@media (max-width:576px) {

    .career701-section {
        padding: 60px 15px;
    }

    .career701-form-box {
        padding: 25px;
    }

    .career701-content h2 {
        font-size: 34px;
    }

    .career701-content p {
        font-size: 18px;
    }

    .career701-form-box button {
        font-size: 22px;
    }

}


/* =========================================================
   JOB LISTING SECTION
========================================================= */

.jobs-section {
    font-family: "Helvetica Neue", Sans-serif;
    background: linear-gradient(180deg, #fbfefc 50%, #ecfcf2 100%);
    padding: 60px 120px;
    overflow: hidden;
}


/* =========================================================
   JOB SECTION SEARCH BAR
========================================================= */

.job-search-bar {
    background: #ffffff;
    padding: 20px 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: -1px 2px 6px 1px rgb(66 66 66 / 23%);
    max-width: 1400px;
    margin: 0 auto 50px;
    width: 100%;
}

.job-search-form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
}

.job-category {
    min-width: 0;
}

.job-category label {
    display: block;
    font-weight: 700;
    font-size: 17px;
    color: #1a1a2e;
    margin-bottom: 8px;
}

.job-category select {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: transparent;
    font-size: 15px;
    color: #9a9aa5;
    padding-right: 130px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M0 0 L6 8 L12 0 Z' fill='%231289a7'/></svg>");
    background-repeat: no-repeat;
    background-position: right center;
    cursor: pointer;
    max-width: 100%;
}

.search-actions {
    display: flex;
    align-items: center;
    gap: 24px;
    min-width: 0;
}

.search-keywords-wrap {
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-width 0.35s ease, opacity 0.3s ease;
}

.search-keywords-wrap.open {
    max-width: 260px;
    opacity: 1;
}

.search-keywords-input {
    width: 220px;
    border: none;
    border-bottom: 2px solid #1289a7;
    background: transparent;
    font-size: 16px;
    color: #1a1a2e;
    padding: 4px 4px 8px;
    outline: none;
}

.search-keywords-input::placeholder {
    color: #9a9aa5;
}

.search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    flex-shrink: 0;
}

.search-icon svg {
    width: 28px;
    height: 28px;
}

.search-btn {
    background: linear-gradient(180deg, #1a5f87 20%, #009894 70%);
    color: #ffffff;
    border: none;
    padding: 10px 25px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}


/* =========================================================
   JOB GRID
========================================================= */

.job-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

.job-grid.is-loading {
    opacity: .45;
    pointer-events: none;
}

.job-search-form.is-loading .search-btn {
    opacity: .7;
    pointer-events: none;
}

.application-form button:disabled {
    opacity: .7;
    cursor: not-allowed;
}


/* =========================================================
   JOB CARD
========================================================= */

.job-card {
    background: #ffffff;
    box-shadow: 0px 0px 6px 2px rgb(30 30 30 / 22%);
    padding: 30px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
}

.job-card h3 {
    color: #181818;
    font-size: 30px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 14px;
    line-height: 1.2;
    overflow-wrap: break-word;
}

.job-card .job-meta {
    font-weight: 400;
    font-size: 16px;
    color: #4c4c4c;
    margin: 0 0 20px;
    line-height: 1.5;
    overflow-wrap: break-word;
}

.job-card .job-desc {
    font-size: 16px;
    line-height: 1.7;
    color: #4c4c4c;
    margin: 0 0 40px;
    flex-grow: 1;
}

.job-card .job-location {
    font-size: 15px;
    color: #4c4c4c;
    margin: 0 0 24px;
    line-height: 1.5;
}

.apply-btn {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #1a5f87 20%, #009894 70%);
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 28px;
    border-radius: 30px;
    white-space: nowrap;
}


/* =========================================================
   JOB TABLET RESPONSIVE
========================================================= */

@media (max-width: 1200px) {

    .jobs-section {
        padding-left: 60px;
        padding-right: 60px;
    }

    .job-search-bar {
        padding: 20px 30px;
    }

    .job-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

}


/* =========================================================
   JOB MOBILE RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .jobs-section {
        padding: 60px 30px;
    }

    .job-search-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 25px;
        padding: 25px 30px;
    }

    .job-category {
        width: 100%;
    }

    .job-category label {
        font-size: 16px;
    }

    .job-category select {
        width: 100%;
        padding: 10px 40px 10px 0;
        font-size: 16px;
        background-position: right 5px center;
        border-bottom: 1px solid #d7d7d7;
    }

    .search-actions {
        width: 100%;
        justify-content: flex-end;
        gap: 18px;
    }

    .search-keywords-wrap.open {
        max-width: 100%;
        flex: 1;
    }

    .search-keywords-input {
        width: 100%;
        max-width: 100%;
    }

    .job-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .job-card {
        padding: 28px;
    }

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

    .job-card .job-meta {
        font-size: 15px;
    }

    .job-card .job-desc {
        font-size: 15px;
        line-height: 1.65;
    }

}


/* =========================================================
   SMALL MOBILE JOB RESPONSIVE
========================================================= */

@media (max-width: 767px) {

    .jobs-section {
        padding: 50px 15px;
    }

    .job-search-bar {
        padding: 22px 20px;
        margin-bottom: 35px;
        gap: 22px;
    }

    .job-category label {
        font-size: 15px;
        margin-bottom: 8px;
    }

    .job-category select {
        font-size: 15px;
        padding: 9px 35px 9px 0;
    }

    .search-actions {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 14px;
        flex-wrap: nowrap;
    }

    .search-keywords-wrap {
        min-width: 0;
    }

    .search-keywords-wrap.open {
        flex: 1;
        min-width: 0;
        max-width: none;
    }

    .search-keywords-input {
        width: 100%;
        font-size: 14px;
        padding: 5px 3px 8px;
    }

    .search-icon {
        flex-shrink: 0;
    }

    .search-icon svg {
        width: 25px;
        height: 25px;
    }

    .search-btn {
        padding: 9px 20px;
        font-size: 14px;
        flex-shrink: 0;
    }

    .job-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .job-card {
        width: 100%;
        padding: 25px 22px;
        min-height: 0;
    }

    .job-card h3 {
        font-size: 24px;
        line-height: 1.25;
        margin-bottom: 12px;
    }

    .job-card .job-meta {
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 16px;
    }

    .job-card .job-desc {
        font-size: 15px;
        line-height: 1.65;
        margin-bottom: 28px;
    }

    .job-card .job-location {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .apply-btn {
        font-size: 13px;
        padding: 10px 24px;
    }

}


/* =========================================================
   VERY SMALL MOBILE JOB RESPONSIVE
========================================================= */

@media (max-width: 480px) {

    .jobs-section {
        padding: 45px 12px;
    }

    .job-search-bar {
        padding: 20px 16px;
        gap: 20px;
    }

    .search-actions {
        gap: 11px;
    }

    .search-btn {
        padding: 9px 16px;
        font-size: 13px;
    }

    .search-icon svg {
        width: 24px;
        height: 24px;
    }

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

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

    .job-card .job-meta {
        font-size: 13px;
    }

    .job-card .job-desc {
        font-size: 14px;
        line-height: 1.6;
    }

    .job-card .job-location {
        font-size: 13px;
    }

    .apply-btn {
        font-size: 12px;
        padding: 9px 21px;
    }

}


/* =========================================================
   JOB DETAIL PAGE
========================================================= */

.hero-banner-1 {
    position: relative;
    width: 100%;
    min-height: 320px;
    display: flex;
    align-items: center;
    background: radial-gradient(
        ellipse 900px 700px at 65% 100%,
        #b6f7d8 0%,
        #4fd196 22%,
        #1a7a4f 45%,
        #0b2e1c 68%,
        #050c08 100%
    );
    overflow: hidden;
    flex-wrap: nowrap;
    justify-content: center;
}

.hero-banner-1::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.35'/></svg>");
    mix-blend-mode: overlay;
    opacity: 0.5;
    pointer-events: none;
}

.hero-banner-1 .hero-content-1 {
    position: relative;
    z-index: 1;
    padding: 0 60px;
}

.hero-banner-1 h1 {
    font-family: "Helvetica Neue", Sans-serif;
    color: #ffffff;
    font-size: 56px;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.5px;
}

@media (max-width:700px) {

    .hero-banner-1 h1 {
        font-size: 34px;
    }

    .hero-banner-1 {
        min-height: 220px;
    }

}


.job-detail-section {
    font-family: "Helvetica Neue", Sans-serif;
    background: #f2eefb;
    padding: 60px;
}

.job-detail-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 60px;
    max-width: 1400px;
    margin: 0 auto;
    align-items: start;
}

.job-info h2 {
    font-size: 32px;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 10px;
}

.job-info .location-value {
    font-size: 18px;
    color: #555;
    margin: 0 0 40px;
}

.job-info .job-desc-text {
    font-size: 16px;
    line-height: 1.9;
    color: #333;
    margin: 0 0 40px;
}

.job-social {
    display: flex;
    gap: 14px;
    margin-bottom: 40px;
}

.job-social a {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1.5px solid #d8d0ea;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1a2e;
    text-decoration: none;
}

.job-social svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.job-info-submit {
    background: linear-gradient(90deg, #008c95 0%, #45d9e3 100%);
    color: #ffffff;
    border: none;
    padding: 14px 36px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.apply-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 50px;
    box-shadow: 0 10px 40px rgba(90, 50, 160, 0.1);
}

.apply-card h2 {
    font-size: 28px;
    font-weight: 800;
    color: #1a1a2e;
    text-align: center;
    margin: 0 0 30px;
}

.apply-field {
    width: 100%;
    border: 1px solid #ddd6ec;
    border-radius: 10px;
    padding: 18px 20px;
    font-size: 16px;
    color: #1a1a2e;
    margin-bottom: 24px;
    background: #ffffff;
    box-sizing: border-box;
}

.apply-field::placeholder {
    color: #8a8a8a;
}

textarea.apply-field {
    resize: vertical;
    min-height: 140px;
    font-family: "Helvetica Neue", Sans-serif;
}

.phone-field {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #ddd6ec;
    border-radius: 10px;
    padding: 14px 20px;
    margin-bottom: 24px;
}

.phone-field .flag {
    font-size: 20px;
}

.phone-field select {
    border: none;
    background: transparent;
    font-size: 14px;
    color: #555;
}

.phone-field input {
    border: none;
    outline: none;
    flex: 1;
    font-size: 16px;
    color: #1a1a2e;
}

.file-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #ddd6ec;
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 24px;
    color: #1a1a2e;
    font-size: 16px;
    cursor: pointer;
    position: relative;
}

.file-field input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.file-field svg {
    width: 20px;
    height: 20px;
    color: #1a1a2e;
}

.recaptcha-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #ddd6ec;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 30px;
}

.recaptcha-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.recaptcha-left input[type="checkbox"] {
    width: 22px;
    height: 22px;
}

.recaptcha-left span {
    font-size: 16px;
    color: #1a1a2e;
}

.recaptcha-logo {
    text-align: center;
    font-size: 11px;
    color: #666;
}

.apply-submit-wrap {
    text-align: center;
}

.apply-submit-btn {
    background: linear-gradient(90deg, #008c95 0%, #45d9e3 100%);
    color: #ffffff;
    border: none;
    padding: 16px 46px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

@media (max-width:1000px) {

    .job-detail-grid {
        grid-template-columns: 1fr;
    }

}


.jobs-heading {
    text-align: center;
    margin-bottom: 50px;
}

.jobs-heading h2 {
    margin: 0;
    font-size: 48px;
    font-weight: 700;
    color: #222;
    line-height: 1.1;
}

.jobs-heading p {
    margin: 12px 0 0;
    font-size: 28px;
    color: #343434;
    font-weight: 400;
}

@media (max-width:768px) {

    .jobs-heading {
        margin-bottom: 35px;
    }

    .jobs-heading h2 {
        font-size: 38px;
    }

    .jobs-heading p {
        font-size: 20px;
    }

}