/* ============================================================
   Site custom CSS - consolidated from inline <style> blocks that
   used to live directly inside individual blade views (header,
   footer, homepage, browse jobs, job listing, job detail, candidate
   auth pages, job filter fields). Each page's rules are kept under
   its own labeled section below so this stays easy to trace back to
   source; the pages themselves now just link to this one file.
   ============================================================ */


/* ============================================================
   front.layouts.header
   ============================================================ */
.job-list-company-logo-new {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, #37458c 0%, #4d5cae 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 50%;
    margin-left: auto;
    box-shadow: 0 4px 10px rgba(55, 69, 140, .25);
}

/* Account dropdown (header) - clean pill toggle + a real menu card
   with hover rows, instead of the previous plain colour-change links
   and blue-tinted shadow that didn't match the rest of the site. */
.dashboard-user-section .listing-user {
    padding: 6px 16px 6px 6px;
    background: #fff;
    border: 1px solid #e5e8f0;
    border-radius: 30px;
    transition: box-shadow .2s ease, border-color .2s ease;
}

.dashboard-user-section .listing-user:hover {
    border-color: #d8dceb;
    box-shadow: 0 4px 14px rgba(20, 20, 43, .08);
}

.header-widget-wrap .listing-user .dropdown-menu {
    width: 230px;
    min-width: 230px;
    border-radius: 14px;
    box-shadow: 0 20px 45px rgba(20, 20, 43, .14);
    border: 1px solid #eef0f7;
    padding: 10px;
}

.listing-user ul li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: #1b1b1b;
}

.listing-user ul li a i {
    position: static;
    top: auto;
    left: auto;
    width: 16px;
    text-align: center;
    font-size: 14px;
    color: #37458c;
}

.listing-user ul li a:hover {
    background: #f4f6fb;
    color: #37458c;
}

.listing-user ul li:last-child {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid #eef0f7;
}

.listing-user ul li:last-child a,
.listing-user ul li:last-child a i {
    color: #d03b3b;
}

.listing-user ul li:last-child a:hover {
    background: #fdf2f2;
}

/* Saved Jobs header icon (candidate only) - real data from
   candidate_saved_jobs, unlike the message/notification widgets above
   which have no backend behind them. */
.header-saved-jobs-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f2f5f8;
    color: #37458c;
    font-size: 17px;
    margin-right: 12px;
    transition: background .2s ease, color .2s ease;
}

.header-back-to-dashboard {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border-radius: 20px;
    background: #f2f5f8;
    color: #37458c;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    margin-right: 12px;
    transition: background .2s ease, color .2s ease;
}

.header-back-to-dashboard i {
    font-size: 15px;
}

.header-back-to-dashboard:hover {
    background: #37458c;
    color: #fff;
}

.header-saved-jobs-icon:hover {
    background: #e5e8f0;
    color: #2b3670;
}

.header-icon-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: #d03b3b;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

/* Guest "SIGN UP / UPLOAD CV" + "POST A JOB" header buttons -
   redundant on mobile now that the bottom app-nav bar (footer)
   covers both actions (Post Job tab + Account tab -> login). */
@media (max-width: 991px) {
    .header-nav-btn-section {
        display: none !important;
    }
}

/* Vendor rule collapses the sticky/fixed header's padding to 0 on
   mobile (style.css) - too tight once the header is just a single
   logo+hamburger row, content ends up glued to the edges. */
@media (max-width: 767px) {
    .header-style-3 .is-fixed .main-bar {
        padding: 16px !important;
    }
}


/* ============================================================
   front.layouts.footer
   ============================================================ */
/* ============================================================
   Modern dark footer - matches the navy brand treatment used
   elsewhere on the site (hero, CTA) instead of the old plain
   white footer with no visual separation from the page above.
   ============================================================ */
.footer-light {
    background: radial-gradient(circle at 12% 10%, rgba(55, 69, 140, .5) 0%, transparent 35%),
                radial-gradient(circle at 90% 90%, rgba(106, 63, 176, .28) 0%, transparent 32%),
                linear-gradient(145deg, #171f45 0%, #0f1533 55%, #1a2144 100%) !important;
    position: relative;
    overflow: hidden;
    padding-top: 70px;
}

.footer-light::before {
    content: '';
    position: absolute;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(240, 149, 74, .14) 0%, transparent 70%);
    top: -160px;
    right: -80px;
    pointer-events: none;
}

.footer-light::after {
    content: '';
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(31, 143, 168, .12) 0%, transparent 70%);
    bottom: -120px;
    left: -60px;
    pointer-events: none;
}

.footer-light .container {
    position: relative;
    z-index: 1;
}

.footer-light .logo-footer {
    display: inline-flex;
    background: #fff;
    border-radius: 10px;
    padding: 10px 16px;
    margin-bottom: 20px;
}

.footer-light .widget_about p {
    color: rgba(255, 255, 255, .65);
    font-size: 14px;
    line-height: 1.7;
}

.footer-light #social_media a {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    transition: transform .2s ease, background .2s ease;
}

.footer-light #social_media a:hover {
    background: #f0954a;
    border-color: #f0954a;
    transform: translateY(-3px);
}

.footer-light .widget-title,
.footer-light .ftr-col-title {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 20px;
}

.footer-light .widget_services ul li {
    margin-bottom: 12px;
}

.footer-light .widget_services ul li a {
    color: rgba(255, 255, 255, .65);
    font-size: 14px;
    transition: color .2s ease, padding-left .2s ease;
}

.footer-light .widget_services ul li a:hover {
    color: #fff;
    padding-left: 4px;
}

.footer-light .app-section {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    padding: 26px 24px;
}

.footer-light .app-section p {
    color: rgba(255, 255, 255, .6);
    font-size: 13.5px;
}

.footer-light .app-section img {
    border-radius: 8px;
    transition: transform .2s ease;
}

.footer-light .app-section a:hover img {
    transform: translateY(-3px);
}

.footer-light .footer-top {
    border-bottom: 0px solid rgba(0, 0, 0, 0.3);
    padding: 0px 0px 0px 0px;
}

.footer-light .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
    margin-top: 50px;
    padding: 24px 0;
}

.footer-light .footer-bottom-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.footer-light .copyrights-text {
    color: rgba(255, 255, 255, .55) !important;
    font-size: 13.5px;
}

.footer-light .footer-copy-left .copyrights-text a.site-text-primary {
    color: rgba(255, 255, 255, .55) !important;
    transition: color .2s ease;
}

.footer-light .footer-copy-left .copyrights-text a.site-text-primary:hover {
    color: #fff !important;
}

/* ============================================================
   Inner-page banner (.wt-bnr-inr) - the small title+breadcrumb
   strip used at the top of every non-home page (Job Listing,
   About Us, Contact, Blogs, ...). Vendor CSS sets height:180px on
   desktop but *250px* on mobile (max-width:767px) - backwards, and
   a lot of wasted scroll-past-this space on a phone. Site-wide fix,
   matches the compact-header treatment used everywhere else.
   ============================================================ */
@media (max-width: 767px) {
    .wt-bnr-inr {
        height: 150px !important;
    }

    .wt-bnr-inr-entry {
        padding-bottom: 5px;
    }
}

/* ============================================================
   Pagination (.pagination-style1) - a plain inline-block list of
   <li>, no wrap control. With a deep page count (e.g. "1 2 3 ... 8
   9 10 ... 158 159") it wraps mid-list on a phone into two
   independently-centered lines that don't read as one control.
   Turn it into a single horizontally-scrollable strip instead - a
   standard mobile pattern, keeps every page number reachable.
   ============================================================ */
@media (max-width: 767px) {
    .pagination-outer .pagination-style1 {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    .pagination-outer .pagination-style1 ul {
        display: inline-flex;
        flex-wrap: nowrap;
    }

    .pagination-outer .pagination-style1 ul li {
        flex: 0 0 auto;
    }
}

/* ============================================================
   Mobile app-style bottom tab bar - site-wide, phones/tablets
   only. Gives the mobile view a persistent native-app-like
   primary navigation instead of relying only on the hamburger
   drawer buried in the header.
   ============================================================ */
.twm-mobile-app-nav {
    display: none;
}

@media (max-width: 991px) {
    /* Room at the bottom of every page so the fixed bar never
       covers the last bit of content (e.g. footer links). */
    body {
        padding-bottom: 62px;
    }

    button.scroltop {
        bottom: 74px;
    }

    .twm-mobile-app-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        align-items: stretch;
        justify-content: space-around;
        background: #fff;
        border-top: 1px solid #eceff5;
        box-shadow: 0 -6px 20px rgba(20, 30, 70, .08);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .twm-mobile-app-nav a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 8px 4px 7px;
        font-size: 10.5px;
        font-weight: 600;
        color: #8a90a6;
        text-decoration: none;
        transition: color .2s ease;
    }

    .twm-mobile-app-nav a i {
        font-size: 18px;
        line-height: 1;
    }

    .twm-mobile-app-nav a.active {
        color: #37458c;
    }

    /* Post a Job sits raised in the middle, like a FAB anchored
       into the tab bar - the one action that deserves the most
       visual weight on a jobs site. */
    .twm-mobile-app-nav a.is-post-job .twm-app-nav-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin-top: -22px;
        border-radius: 50%;
        background: linear-gradient(135deg, #37458c 0%, #23348e 100%);
        color: #fff;
        box-shadow: 0 8px 18px rgba(35, 52, 142, .35);
    }

    .twm-mobile-app-nav a.is-post-job .twm-app-nav-icon i {
        font-size: 16px;
        line-height: 1;
    }

    .twm-mobile-app-nav a.is-post-job span:last-child {
        margin-top: 1px;
    }
}


/* ============================================================
   front.website.browse-jobs
   ============================================================ */
    .ls-inputicon-box {
        position: relative;
    }

    .ls-inputicon-box i {
        position: absolute;
        left: 18px;
        top: 50%;
        transform: translateY(-50%);
        color: #37458c;
        font-size: 18px;
        z-index: 2;
    }

    .ls-inputicon-box .form-control {
        height: 45px;
        border: 1px solid #37458c;
        border-radius: 12px;
        padding-left: 50px;
    }

    .search-suggestions {
        display: none;
        position: absolute;
        top: calc(100% + 5px);
        left: 0;
        max-height: 160px;
        right: 0;
        background: #fff;
        border: 1px solid #37458c;
        border-radius: 12px;
        z-index: 9999;
        overflow-y: scroll;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
    }

    .search-item {
        padding: 12px 15px;
        cursor: pointer;
        display: flex;
        align-items: center;
    }

    .search-item:hover {
        background: #f5f7ff;
    }

    .search-item i {
        width: 31px;
        margin-right: 12px;
        color: #fff;
        position: static !important;
        transform: none !important;
    }

    .browse-advanced-toggle-wrap {
        text-align: left;
    }

    .browse-advanced-toggle {
        width: 100%;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        background: #fff;
        border: 1px solid #37458c;
        border-radius: 12px;
        padding: 0px 16px;
        color: #37458c;
        font-weight: 600;
        cursor: pointer;
        transition: border-color .2s ease, box-shadow .2s ease;
    }

    .browse-advanced-toggle:hover,
    .browse-advanced-toggle[aria-expanded="true"] {
        border-color: #37458c;
        box-shadow: 0 4px 14px rgba(55, 69, 140, .08);
    }

    .browse-advanced-toggle-label {
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        font-size: 13px;
        line-height: 16px;
        font-weight: 600;
        color: #37458c;
        text-transform: uppercase;
        padding-top: 0px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .browse-advanced-toggle-label>.fa-sliders {
        margin-right: 2px;
    }

    .browse-advanced-chevron {
        transition: transform .2s ease;
        color: #37458c;
        font-size: 12px
    }

    .browse-advanced-toggle[aria-expanded="true"] .browse-advanced-chevron {
        transform: rotate(180deg);
    }

    .browse-selected-count {
        display: inline-flex;
        align-items: center;
        background: #eef3ff;
        color: #3b478d;
        font-size: 12px;
        font-weight: 600;
        padding: 3px 15px;
        border-radius: 999px;
    }

    .browse-selected-count.has-selection {
        background: #3b478d;
        color: #fff;
    }

    .browse-advanced-panel {
        background: #f8f9fc;
        border: 1px solid #e5e8f0;
        border-radius: 16px;
        padding: 20px;
        text-align: left;
    }

    .browse-filter-title {
        font-size: 13px;
        line-height: 16px;
        font-weight: 600;
        color: #37458c;
        text-transform: uppercase;
        margin-bottom: 14px;
    }

    .browse-filter-options {
        max-height: 145px;
        overflow-y: auto;
        padding-right: 6px;
        background: #fff;
        border: 1px solid #eceff5;
        border-radius: 10px;
        padding: 12px;
    }

    .browse-filter-options::-webkit-scrollbar,
    .filter-scroll::-webkit-scrollbar {
        width: 5px;
    }

    .browse-filter-options::-webkit-scrollbar-thumb,
    .filter-scroll::-webkit-scrollbar-thumb {
        background: #bdbdbd;
        border-radius: 10px;
    }

    .filter-option {
        margin-bottom: 4px;
    }

    .filter-option:last-child {
        margin-bottom: 0;
    }

    .filter-option .form-check {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 7px 8px;
        margin: 0;
        border-radius: 8px;
        cursor: pointer;
        transition: background .15s ease;
    }

    .filter-option .form-check:hover {
        background: #f4f6fb;
    }

    .filter-option .form-check-input {
        flex-shrink: 0;
        float: none;
        position: static;
        width: 17px;
        height: 17px;
        margin: 1px 0 0;
        border: 1.5px solid #ccd2e3;
        border-radius: 5px;
        cursor: pointer;
    }

    .filter-option .form-check-input:checked {
        background-color: #37458c;
        border-color: #37458c;
    }

    .filter-option .form-check-input:focus {
        border-color: #37458c;
        box-shadow: 0 0 0 .2rem rgba(55, 69, 140, .15);
    }

    .filter-option .form-check-label {
        padding-left: 0;
        margin: 0;
        font-size: 13.5px;
        line-height: 1.35;
        color: #2c2f3a;
        white-space: normal;
        word-break: break-word;
        cursor: pointer;
    }

    .filter-count {
        color: #37458c;
        font-weight: 700;
        margin-left: 4px;
    }

    .browse-filter-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
        padding-top: 10px;
        border-top: 1px solid #e5e8f0;
    }

    .browse-filter-hint {
        color: #37458c;
        font-size: 13px;
        line-height: 1.4;
    }

    .twm-bnr-search-bar label { 
        margin-top: 3px; 
    }

    .browse-clear-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 42px;
        padding: 8px 16px;
        border: 1px solid #d0d5dd;
        border-radius: 10px;
        background: #fff;
        color: #37458c;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all .2s ease;
    }

    .browse-clear-btn:hover:not(:disabled) {
        border-color: #b42318;
        color: #b42318;
        background: #fff5f5;
    }

    .browse-clear-btn:disabled {
        opacity: 0.45;
        cursor: not-allowed;
    }

    .browse-filter-category .bootstrap-select,
    .browse-filter-category .dropdown-toggle {
        width: 100% !important;
    }

    @media (max-width: 767px) {
        .browse-advanced-panel {
            padding: 16px;
        }

        .browse-filter-footer {
            flex-direction: column;
            align-items: stretch;
        }

        .browse-clear-btn {
            width: 100%;
            justify-content: center;
        }

        /* The vendor markup hardcodes the Search button's column at
           col-4 (33% width) with no mobile override - it renders as
           a tiny ~110px pill lost in the middle of the search card.
           Give it the full-width, big-tap-target treatment. */
        .twm-bnr-search-bar .form-group.col-4 {
            flex: 0 0 100%;
            max-width: 100%;
            margin-top: 14px !important;
        }

        .twm-bnr-search-bar .site-button {
            width: 100%;
            font-size: 16px;
        }

        /* Un-nest the "boxes within boxes" feel - four independently
           height-capped, individually-scrolling checkbox lists
           stacked on top of each other is cramped on a touch screen.
           Let the whole panel scroll as one normal page flow. */
        .browse-filter-options {
            max-height: none;
            overflow-y: visible;
        }
    }

    /* Advanced filters (job type / work type / date / pay / category)
       hidden on mobile - keyword + location + distance is enough for
       a quick mobile search; the full filter set stays available on
       desktop where there's room to use it comfortably. */
    @media (max-width: 991px) {
        .twm-bnr-search-bar .browse-advanced-toggle-wrap,
        .twm-bnr-search-bar #browseAdvancedPanel {
            display: none !important;
        }
    }

    .browse-filter-footer-actions {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .browse-filter-footer-actions .site-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    @media (max-width: 767px) {
        .browse-filter-footer-actions {
            flex-direction: column-reverse;
            width: 100%;
        }

        .browse-filter-footer-actions .site-button,
        .browse-filter-footer-actions #clearBrowseFilters {
            width: 100%;
        }
    }


/* ============================================================
   front.website.job-detail
   ============================================================ */
    /* When there's no company banner image, this header used to be
       raw floating text (title/location/salary/type) with no card
       framing - it only ever looked "designed" because the banner
       photo behind it did the visual work. Give it the same card
       treatment as the Job Description/Skills sections below so it
       reads as one consistent design instead of unstyled leftovers. */
    .twm-job-self-wrap.twm-job-self-wrap-no-banner .twm-job-self-info {
        background: #fff;
        padding: 20px;
        box-shadow: 0px 0px 25px rgb(59 71 141 / 15%);
        border-radius: 10px;
    }

    /* .twm-mid-content's 80px top padding exists purely to clear the
       company logo, which is absolutely positioned overlapping the
       top of this block (top:-40px). No logo -> no overlap -> that
       padding is just dead air above the job title. */
    .twm-mid-content.twm-mid-content-no-logo {
        padding-top: 0 !important;
    }

    /* Apply Now + Share row - vendor CSS force-centers every .text-end
       on mobile/tablet (a global "text-end { text-align:center
       !important }" rule at <=991px, not something safe to touch site-
       wide), which left this specific row loosely spaced with a small
       button floating awkwardly in a wide centered column. Lean into
       the centering instead: full-width button (consistent with the
       other primary CTAs across the site), tighter/cleaner spacing
       below it for the share row. */
    @media (max-width: 767px) {
        .twm-job-self-top .text-end {
            margin-top: 18px;
        }

        .twm-job-self-top .text-end br {
            display: none;
        }

        .twm-job-self-top .site-button-lg {
            display: block;
            width: 100%;
        }
    }

    /* Share row - was reusing #social_media (duplicate id, also used by
       the footer) and the label sat awkwardly detached above the icons
       on its own line. One tidy inline-flex row instead. */
    .jd-share-row {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 14px;
    }

    .jd-share-label {
        font-size: 13.5px;
        font-weight: 600;
        color: #37458c;
    }

    .jd-share-icons {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .jd-share-icons a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #37458c;
        color: #fff;
        font-size: 13px;
        transition: background .2s ease, transform .2s ease;
    }

    .jd-share-icons a:hover {
        background: #23348e;
        color: #fff;
        transform: translateY(-2px);
    }

    @media (max-width: 767px) {
        .jd-share-row {
            justify-content: center;
        }
    }


/* ============================================================
   front.candidate.auth.candidate-login
   ============================================================ */
/* ============================================================
   Login page redesign - dark gradient brand panel (matching the
   homepage hero/CTA/footer treatment established across the
   rest of the site) instead of the vendor's plain white split
   screen, plus a proper modern form on the right.
   ============================================================ */
body {
    background: #fff;
}

/* Bootstrap's base .container-fluid rule reserves a left/right
   gutter (padding: 0 var(--bs-gutter-x, .75rem)) on every
   container variant. .row.g-0 below only zeroes the ROW's own
   negative-margin gutters, not this container padding, so the
   split-screen's navy/white panels never quite reached the true
   edges of the browser. Scoped to this page only - removing it
   from Bootstrap's rule globally would break container spacing
   everywhere else on the site. */
.container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.twm-log-reg-media-wrap {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    background: radial-gradient(circle at 15% 20%, #2a3a99 0%, transparent 45%),
                radial-gradient(circle at 85% 80%, #1c2a70 0%, transparent 50%),
                radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px),
                linear-gradient(135deg, #0f1533 0%, #17204d 45%, #1f2c6b 100%);
    background-size: auto, auto, 26px 26px, auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 50px;
}

@keyframes twmFadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

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

.twm-log-reg-media-wrap::before,
.twm-log-reg-media-wrap::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
}

.twm-log-reg-media-wrap::before {
    width: 320px;
    height: 320px;
    background: rgba(240, 149, 74, .22);
    top: -100px;
    right: 5%;
}

.twm-log-reg-media-wrap::after {
    width: 280px;
    height: 280px;
    background: rgba(90, 130, 230, .25);
    bottom: -100px;
    left: -60px;
}

/* A generic stock illustration (previously here) reads as
   template/stock rather than a real product - and its
   unconstrained height was what caused the headline to get
   clipped off-screen on shorter viewports (see history). Text-
   forward panel instead: eyebrow, headline, a concrete feature
   list and a real live stat - reads as an actual product, and
   its height is predictable text, so it can never overflow the
   viewport the way an arbitrary image could. */
.login-brand-panel {
    position: relative;
    z-index: 1;
    max-width: 460px;
    text-align: left;
    animation: twmFadeUp .6s cubic-bezier(.16, 1, .3, 1) both;
}

.login-brand-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 30px;
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.login-brand-eyebrow i {
    color: #f0954a;
    font-size: 11px;
}

.login-brand-panel h2 {
    color: #fff;
    font-size: 38px;
    line-height: 1.2;
    font-weight: 800;
    margin: 0 0 16px;
    letter-spacing: -.01em;
}

.login-brand-panel h2 span {
    color: #f0954a;
}

.login-brand-panel > p {
    color: rgba(255, 255, 255, .65);
    font-size: 15.5px;
    line-height: 1.65;
    max-width: 400px;
    margin: 0 0 36px;
}

.login-brand-features {
    list-style: none;
    margin: 0 0 40px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.login-brand-features li {
    display: flex;
    align-items: center;
    gap: 14px;
    color: rgba(255, 255, 255, .88);
    font-size: 15px;
    font-weight: 500;
    opacity: 0;
    animation: twmFadeUp .5s cubic-bezier(.16, 1, .3, 1) both;
}

.login-brand-features li:nth-child(1) { animation-delay: .15s; }
.login-brand-features li:nth-child(2) { animation-delay: .25s; }
.login-brand-features li:nth-child(3) { animation-delay: .35s; }

.login-brand-features .login-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(240, 149, 74, .3) 0%, rgba(217, 115, 40, .18) 100%);
    border: 1px solid rgba(240, 149, 74, .35);
    color: #ffb27a;
    font-size: 14px;
    transition: transform .2s ease;
}

.login-brand-features li:hover .login-feature-icon {
    transform: scale(1.08) rotate(-4deg);
}

.login-brand-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    opacity: 0;
    animation: twmFadeUp .5s cubic-bezier(.16, 1, .3, 1) .45s both;
}

.login-brand-stat strong {
    display: block;
    color: #fff;
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
}

.login-brand-stat span {
    display: block;
    color: rgba(255, 255, 255, .6);
    font-size: 13px;
    margin-top: 4px;
}

@media (max-width: 991px) {
    .twm-log-reg-media-wrap {
        display: none;
    }

    /* Bootstrap's col-md-5 keeps its fixed 41.7% width even
       once its sibling column above is hidden - flexbox columns
       don't auto-grow to fill a hidden sibling's space. Without
       this, the form sat squeezed into the left ~42% of the
       screen with a dead blank gap beside it on any tablet-width
       viewport (768-991px). */
    .twm-log-reg-form-col {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* align-items:stretch (the default) lets .twm-log-reg-inner take
   the wrap's full height instead of shrinking to its own
   content and sitting centered as one block - that was pulling
   the logo down into the vertical middle of the page along
   with the card, leaving a big empty gap above it. Inner is now
   a column itself: the logo sits at its natural top position,
   and only the card centers within whatever space is left
   below it (see .twm-log-reg-card-center). */
.twm-log-reg-form-wrap {
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: 50px 30px 40px;
}

/* The 100vh + vertical-centering above only makes sense when the
   left brand panel fills the screen beside it (desktop). On
   mobile that panel is hidden and the footer now follows right
   after this section - forcing a full viewport height here just
   to re-center a much shorter form left a large empty gap above
   the logo (and another below the button). Let it size to its
   own content instead. */
@media (max-width: 991px) {
    .twm-log-reg-form-wrap {
        min-height: 0;
        align-items: flex-start;
        padding: 32px 20px;
    }
}

.twm-log-reg-inner {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
}

.twm-log-reg-form-wrap .twm-log-reg-inner {
    padding: 0px;
}

/* Fills whatever vertical space is left under the logo and
   centers the card within it - only has room to do that on
   desktop, where .twm-log-reg-inner stretches to the wrap's
   full 100vh height. On mobile the wrap is content-sized (see
   below), so this simply collapses and the card sits right
   after the logo, which is what we want there too. */
.twm-log-reg-card-center {
    flex: 1;
    display: flex;
    align-items: center;
    min-height: 0;
}

.twm-log-reg-logo-head {
    margin-bottom: 30px;
}

.twm-log-reg-logo-head img {
    height: 42px;
}

/* Mobile-only branded header - desktop already has the full brand
   panel on the left, mobile previously had nothing but a plain
   logo on white, no sense of arrival/brand before the form. */
.twm-log-reg-mobile-hero {
    display: none;
}

@media (max-width: 991px) {
    .twm-log-reg-logo-head {
        display: none;
    }

    .twm-log-reg-mobile-hero {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: -32px -20px 24px;
        padding: 30px 20px 44px;
        background: radial-gradient(circle at 15% 20%, #2a3a99 0%, transparent 45%),
                    radial-gradient(circle at 85% 80%, #1c2a70 0%, transparent 50%),
                    linear-gradient(135deg, #0f1533 0%, #17204d 45%, #1f2c6b 100%);
        border-radius: 0 0 28px 28px;
    }

    .twm-log-reg-mobile-hero img {
        height: 32px;
        background: #fff;
        padding: 8px 14px;
        border-radius: 10px;
    }
}

/* Elevated card around the actual sign-in controls - previously
   the Google button/email field/CTA just floated directly on the
   page background with nothing framing them as one unit. */
.twm-log-reg-card {
    position: relative;
    background: #fff;
    border-radius: 18px;
    padding: 32px 28px 28px;
    /* Layered shadow - a tight dark contact shadow plus a wider
       soft one tinted with the brand navy, instead of one flat
       grey blur. Reads noticeably more three-dimensional. */
    box-shadow: 0 2px 6px rgba(20, 20, 43, .04),
                0 24px 48px -12px rgba(35, 52, 142, .18);
    border: 1px solid #f0f1f6;
    overflow: hidden;
    animation: twmFadeUp .55s cubic-bezier(.16, 1, .3, 1) .1s both;
}

/* Thin brand accent along the top edge of the card - a small,
   common "professional SaaS" signature touch. */
.twm-log-reg-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #23348e 0%, #37458c 45%, #f0954a 100%);
}

@media (max-width: 991px) {
    .twm-log-reg-card {
        padding: 26px 18px 22px;
        box-shadow: 0 16px 40px rgba(20, 20, 43, .1);
    }
}

.twm-log-reg-form-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #37458c;
    margin-bottom: 10px;
}

.twm-log-reg-form-eyebrow i {
    font-size: 10px;
    color: #f0954a;
}

.log-reg-form-title {
    font-size: 24px;
    font-weight: 800;
    color: #16192b;
    display: block;
    margin-bottom: 4px;
}

.twm-log-reg-head {
    margin-bottom: 20px;
}

.twm-log-reg-head p {
    color: #6b7188;
    font-size: 14.5px;
    margin-bottom: 0;
}

/* Compact legal line, moved to sit under the CTA instead of a
   long paragraph competing with the headline for attention. */
.twm-log-reg-legal {
    font-size: 12px;
    color: #9198ad;
    line-height: 1.6;
    text-align: center;
    margin: 16px 0 0;
}

.twm-log-reg-legal a {
    color: #6b7188;
    font-weight: 600;
    text-decoration: underline;
}

.twm-log-reg-switch {
    text-align: center;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #f0f1f6;
    font-size: 13.5px;
    color: #6b7188;
}

.twm-log-reg-switch a {
    color: #37458c;
    font-weight: 700;
    text-decoration: none;
}

.twm-log-reg-switch a:hover {
    text-decoration: underline;
}

/* Vendor CSS (style.css) targets this exact same nested selector
   - ".twm-log-reg-form-wrap .twm-log-reg-inner .log_with_google"
   - with border-radius:50px (a full pill, clashing with the
   10-12px radius used on every other control here) and
   max-width:270px (so it never actually reached full width,
   unlike every other control). Match the selector shape so this
   wins on specificity, not just source order. */
.twm-log-reg-form-wrap .twm-log-reg-inner .log_with_google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: none;
    margin: 0;
    height: 52px;
    border: 1.5px solid #e5e8f0;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14.5px;
    color: #2c2f3a;
    background: #fff;
    text-align: center;
    padding: 0;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.twm-log-reg-form-wrap .twm-log-reg-inner .log_with_google:hover {
    border-color: #37458c;
    box-shadow: 0 8px 20px rgba(20, 30, 70, .08);
    transform: translateY(-2px);
    color: #2c2f3a;
}

.twm-log-reg-form-wrap .twm-log-reg-inner .log_with_google img {
    width: 20px;
    height: 20px;
    margin: 0;
}

.center-text-or {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f4f6fb;
    font-size: 10.5px;
    font-weight: 800;
    color: #6b7188;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.twm-log-reg-inner hr {
    border-top: 1px solid #e5e8f0;
    opacity: 1;
}

.twm-log-reg-inner .form-control {
    height: 52px;
    border: 1.5px solid #e5e8f0;
    border-radius: 12px;
    padding-left: 18px;
    font-size: 14.5px;
    transition: border-color .2s ease, background .2s ease;
}

/* Icon-prefixed input, matching the search bars / filter forms
   used everywhere else on the site (icon chip inside the field)
   - this was the one plain, un-prefixed input on the page. */
.twm-log-reg-input-icon {
    position: relative;
}

.twm-log-reg-input-icon i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: linear-gradient(135deg, #23348e 0%, #37458c 100%);
    color: #fff;
    font-size: 14px;
    z-index: 2;
}

.twm-log-reg-input-icon .form-control {
    padding-left: 54px;
}

/* Floating label - sits inline until the field is focused or has
   a value, then lifts above the border. Standard modern-forms
   pattern; relies on the "placeholder=' '" trick so
   :placeholder-shown only matches a genuinely empty field. */
.twm-floating-field {
    position: relative;
}

.twm-floating-field label {
    position: absolute;
    left: 54px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14.5px;
    color: #9198ad;
    pointer-events: none;
    background: #fff;
    padding: 0 5px;
    transition: top .18s ease, font-size .18s ease, color .18s ease, transform .18s ease;
    z-index: 2;
}

.twm-floating-field input:focus + label,
.twm-floating-field input:not(:placeholder-shown) + label {
    top: 0;
    transform: translateY(-50%) scale(1);
    font-size: 11.5px;
    font-weight: 700;
    color: #37458c;
    left: 46px;
}

.twm-otp-hint {
    text-align: center;
    font-size: 13.5px;
    color: #6b7188;
    margin-bottom: 22px;
}

.twm-otp-hint strong {
    color: #16192b;
    font-weight: 700;
}

/* Mobile-app-style OTP entry - six individual boxes instead of
   one plain text field. Typing advances focus automatically,
   backspace on an empty box steps back, and pasting a full code
   (e.g. from a copied SMS/email) fills every box at once - see
   the script at the bottom of this file. */
.twm-otp-box-group {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.twm-otp-box {
    width: 100%;
    max-width: 52px;
    height: 58px;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: #16192b;
    border: 1.5px solid #e5e8f0;
    border-radius: 12px;
    background: #f7f8fc;
    transition: border-color .2s ease, background .2s ease, transform .15s ease;
}

.twm-otp-box:focus {
    outline: none;
    border-color: #37458c;
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(35, 52, 142, .12);
}

.twm-otp-box:not(:placeholder-shown) {
    border-color: #37458c;
}

@media (max-width: 360px) {
    .twm-otp-box-group {
        gap: 6px;
    }

    .twm-otp-box {
        height: 52px;
        font-size: 19px;
    }
}

.twm-log-reg-inner .form-control:focus {
    border-color: #37458c;
    box-shadow: none;
}

.twm-log-reg-inner .site-text-primary {
    font-size: 13.5px;
    font-weight: 600;
    color: #37458c !important;
}

.twm-log-reg-inner .site-button.button-md {
    position: relative;
    width: 100%;
    height: 52px;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #23348e 0%, #37458c 100%) !important;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .2px;
    box-shadow: 0 12px 26px rgba(35, 52, 142, .28);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}

/* Diagonal shine sweeping across on hover - a small but very
   "modern product" micro-interaction. */
.twm-log-reg-inner .site-button.button-md::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, .28) 50%, transparent 100%);
    transform: skewX(-20deg);
    transition: left .55s ease;
}

.twm-log-reg-inner .site-button.button-md:hover::after {
    left: 130%;
}

.twm-log-reg-inner .site-button.button-md:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(35, 52, 142, .36);
}

.twm-log-reg-inner .btn-link {
    color: #9198ad;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}

.twm-log-reg-inner .btn-link:hover {
    color: #37458c;
}

.twm-log-reg-inner .alert {
    border-radius: 12px;
    font-size: 13.5px;
}


/* ============================================================
   front.candidate.auth.candidate-registration
   ============================================================ */
/* ============================================================
   Registration page redesign - matches the candidate login
   page's design system (dark gradient brand panel + elevated
   white card) instead of the vendor's plain white split screen,
   so sign-up and sign-in read as one consistent product.
   ============================================================ */
body {
    background: #fff;
}

.container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.twm-log-reg-media-wrap {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    background: radial-gradient(circle at 15% 20%, #2a3a99 0%, transparent 45%),
                radial-gradient(circle at 85% 80%, #1c2a70 0%, transparent 50%),
                radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px),
                linear-gradient(135deg, #0f1533 0%, #17204d 45%, #1f2c6b 100%);
    background-size: auto, auto, 26px 26px, auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 50px;
}

@keyframes twmFadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

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

.twm-log-reg-media-wrap::before,
.twm-log-reg-media-wrap::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
}

.twm-log-reg-media-wrap::before {
    width: 320px;
    height: 320px;
    background: rgba(240, 149, 74, .22);
    top: -100px;
    right: 5%;
}

.twm-log-reg-media-wrap::after {
    width: 280px;
    height: 280px;
    background: rgba(90, 130, 230, .25);
    bottom: -100px;
    left: -60px;
}

.login-brand-panel {
    position: relative;
    z-index: 1;
    max-width: 460px;
    text-align: left;
    animation: twmFadeUp .6s cubic-bezier(.16, 1, .3, 1) both;
}

.login-brand-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 30px;
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.login-brand-eyebrow i {
    color: #f0954a;
    font-size: 11px;
}

.login-brand-panel h2 {
    color: #fff;
    font-size: 38px;
    line-height: 1.2;
    font-weight: 800;
    margin: 0 0 16px;
    letter-spacing: -.01em;
}

.login-brand-panel h2 span {
    color: #f0954a;
}

.login-brand-panel > p {
    color: rgba(255, 255, 255, .65);
    font-size: 15.5px;
    line-height: 1.65;
    max-width: 400px;
    margin: 0 0 36px;
}

.login-brand-features {
    list-style: none;
    margin: 0 0 40px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.login-brand-features li {
    display: flex;
    align-items: center;
    gap: 14px;
    color: rgba(255, 255, 255, .88);
    font-size: 15px;
    font-weight: 500;
    opacity: 0;
    animation: twmFadeUp .5s cubic-bezier(.16, 1, .3, 1) both;
}

.login-brand-features li:nth-child(1) { animation-delay: .15s; }
.login-brand-features li:nth-child(2) { animation-delay: .25s; }
.login-brand-features li:nth-child(3) { animation-delay: .35s; }

.login-brand-features .login-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(240, 149, 74, .3) 0%, rgba(217, 115, 40, .18) 100%);
    border: 1px solid rgba(240, 149, 74, .35);
    color: #ffb27a;
    font-size: 14px;
    transition: transform .2s ease;
}

.login-brand-features li:hover .login-feature-icon {
    transform: scale(1.08) rotate(-4deg);
}

.login-brand-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    opacity: 0;
    animation: twmFadeUp .5s cubic-bezier(.16, 1, .3, 1) .45s both;
}

.login-brand-stat strong {
    display: block;
    color: #fff;
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
}

.login-brand-stat span {
    display: block;
    color: rgba(255, 255, 255, .6);
    font-size: 13px;
    margin-top: 4px;
}

@media (max-width: 991px) {
    .twm-log-reg-media-wrap {
        display: none;
    }

    .twm-log-reg-form-col {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.twm-log-reg-form-wrap {
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: 50px 30px 40px;
}

@media (max-width: 991px) {
    .twm-log-reg-form-wrap {
        min-height: 0;
        align-items: flex-start;
        padding: 32px 20px;
    }
}

.twm-log-reg-inner {
    width: 100%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.twm-log-reg-card-center {
    flex: 1;
    display: flex;
    align-items: center;
    min-height: 0;
}

.twm-log-reg-logo-head {
    margin-bottom: 30px;
}

.twm-log-reg-logo-head img {
    height: 42px;
}

.twm-log-reg-mobile-hero {
    display: none;
}

@media (max-width: 991px) {
    .twm-log-reg-logo-head {
        display: none;
    }

    .twm-log-reg-mobile-hero {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: -32px -20px 24px;
        padding: 30px 20px 44px;
        background: radial-gradient(circle at 15% 20%, #2a3a99 0%, transparent 45%),
                    radial-gradient(circle at 85% 80%, #1c2a70 0%, transparent 50%),
                    linear-gradient(135deg, #0f1533 0%, #17204d 45%, #1f2c6b 100%);
        border-radius: 0 0 28px 28px;
    }

    .twm-log-reg-mobile-hero img {
        height: 32px;
        background: #fff;
        padding: 8px 14px;
        border-radius: 10px;
    }
}

.twm-log-reg-card {
    position: relative;
    width: 100%;
    background: #fff;
    border-radius: 18px;
    padding: 32px 28px 28px;
    box-shadow: 0 2px 6px rgba(20, 20, 43, .04),
                0 24px 48px -12px rgba(35, 52, 142, .18);
    border: 1px solid #f0f1f6;
    overflow: hidden;
    animation: twmFadeUp .55s cubic-bezier(.16, 1, .3, 1) .1s both;
}

.twm-log-reg-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #23348e 0%, #37458c 45%, #f0954a 100%);
}

@media (max-width: 991px) {
    .twm-log-reg-card {
        padding: 26px 18px 22px;
        box-shadow: 0 16px 40px rgba(20, 20, 43, .1);
    }
}

.twm-log-reg-form-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #37458c;
    margin-bottom: 10px;
}

.twm-log-reg-form-eyebrow i {
    font-size: 10px;
    color: #f0954a;
}

.log-reg-form-title {
    font-size: 24px;
    font-weight: 800;
    color: #16192b;
    display: block;
    margin-bottom: 4px;
}

.twm-log-reg-head {
    margin-bottom: 20px;
    text-align: center;
}

.twm-log-reg-head p {
    color: #6b7188;
    font-size: 14.5px;
    margin-bottom: 0;
}

/* Separates the CTA from the fine print below it instead of the
   two sitting right on top of each other - a thin rule plus
   extra breathing room, same treatment as .twm-log-reg-switch
   below it so the card reads in clear, evenly-spaced sections. */
.twm-log-reg-legal {
    font-size: 12px;
    color: #9198ad;
    line-height: 1.6;
    text-align: center;
    margin: 24px 0 0;
    padding-top: 20px;
    border-top: 1px solid #f0f1f6;
}

.twm-log-reg-legal a {
    color: #6b7188;
    font-weight: 600;
    text-decoration: underline;
}

.twm-log-reg-switch {
    text-align: center;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #f0f1f6;
    font-size: 13.5px;
    color: #6b7188;
}

.twm-log-reg-switch a {
    color: #37458c;
    font-weight: 700;
    text-decoration: none;
}

.twm-log-reg-switch a:hover {
    text-decoration: underline;
}

.twm-log-reg-inner .form-control {
    height: 52px;
    border: 1.5px solid #e5e8f0;
    border-radius: 12px;
    padding-left: 18px;
    font-size: 14.5px;
    transition: border-color .2s ease, background .2s ease;
}

.twm-log-reg-inner .form-control:focus {
    border-color: #37458c;
    box-shadow: none;
}

/* Vendor default - a plain, chunky 15px/30px padding. Overridden
   below (compact, requested explicitly) for the .button-lg
   variant used on the step-1 CTA. */
.button-lg {
    padding: 9px 31px;
    font-size: 16px;
}

/* This page was leaning on the vendor's plain flat .site-button
   default - no gradient, no shadow, no hover feedback. Matches
   the polished CTA treatment already used on candidate-login.
   Covers both button-md (steps 2-4) and button-lg (step 1). */
.twm-log-reg-inner .site-button.button-md,
.twm-log-reg-inner .site-button.button-lg {
    position: relative;
    width: 100%;
    max-width: 320px;
    height: 52px;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #23348e 0%, #37458c 100%) !important;
    font-weight: 700;
    letter-spacing: .2px;
    box-shadow: 0 12px 26px rgba(35, 52, 142, .28);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}

.twm-log-reg-inner .site-button.button-md {
    font-size: 15px;
}

.twm-log-reg-inner .site-button.button-lg {
    font-size: 16px;
}

.twm-log-reg-inner .site-button.button-md::after,
.twm-log-reg-inner .site-button.button-lg::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, .28) 50%, transparent 100%);
    transform: skewX(-20deg);
    transition: left .55s ease;
}

.twm-log-reg-inner .site-button.button-md:hover::after,
.twm-log-reg-inner .site-button.button-lg:hover::after {
    left: 130%;
}

.twm-log-reg-inner .site-button.button-md:hover,
.twm-log-reg-inner .site-button.button-lg:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(35, 52, 142, .36);
}

.twm-log-reg-input-icon {
    position: relative;
}

.twm-log-reg-input-icon i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: linear-gradient(135deg, #23348e 0%, #37458c 100%);
    color: #fff;
    font-size: 14px;
    z-index: 2;
}

.twm-log-reg-input-icon .form-control {
    padding-left: 54px;
}

.twm-floating-field {
    position: relative;
}

.twm-floating-field label {
    position: absolute;
    left: 54px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14.5px;
    color: #9198ad;
    pointer-events: none;
    background: #fff;
    padding: 0 5px;
    transition: top .18s ease, font-size .18s ease, color .18s ease, transform .18s ease;
    z-index: 2;
}

.twm-floating-field.twm-floating-field-plain label {
    left: 18px;
}

.twm-floating-field input:focus + label,
.twm-floating-field input:not(:placeholder-shown) + label {
    top: 0;
    transform: translateY(-50%) scale(1);
    font-size: 11.5px;
    font-weight: 700;
    color: #37458c;
    left: 46px;
}

.twm-floating-field.twm-floating-field-plain input:focus + label,
.twm-floating-field.twm-floating-field-plain input:not(:placeholder-shown) + label {
    left: 14px;
}

.twm-otp-hint {
    text-align: center;
    font-size: 13.5px;
    color: #6b7188;
    margin-bottom: 22px;
}

.twm-otp-hint strong {
    color: #16192b;
    font-weight: 700;
}

.twm-otp-box-group {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.twm-otp-box {
    width: 100%;
    max-width: 52px;
    height: 58px;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: #16192b;
    border: 1.5px solid #e5e8f0;
    border-radius: 12px;
    background: #f7f8fc;
    transition: border-color .2s ease, background .2s ease, transform .15s ease;
}

.twm-otp-box:focus {
    outline: none;
    border-color: #37458c;
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(35, 52, 142, .12);
}

.twm-otp-box:not(:placeholder-shown) {
    border-color: #37458c;
}

@media (max-width: 360px) {
    .twm-otp-box-group {
        gap: 6px;
    }

    .twm-otp-box {
        height: 52px;
        font-size: 19px;
    }
}

.twm-otp-resend {
    text-align: center;
    margin-top: 14px;
}

.twm-otp-resend .btn-link {
    color: #37458c;
    font-weight: 700;
    font-size: 13.5px;
    text-decoration: none;
}

.twm-otp-resend .btn-link:hover {
    text-decoration: underline;
}

.twm-otp-resend .code-line {
    display: block;
    color: #9198ad;
    font-weight: 400;
    font-size: 12.5px;
    margin-bottom: 2px;
}

/* Channel pills (SMS / WhatsApp) - was two plain radio labels with
   manual nbsp spacing, now a clean two-up toggle matching the
   rest of the form's card/pill visual language. */
.twm-channel-group {
    display: flex;
    gap: 10px;
    margin-bottom: 22px;
}

.twm-channel-option {
    flex: 1;
}

.twm-channel-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.twm-channel-option label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    border: 1.5px solid #e5e8f0;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 600;
    color: #6b7188;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.twm-channel-option input:checked + label {
    border-color: #37458c;
    background: #eef1fb;
    color: #37458c;
}

/* Plain red text was the one piece on this page not sharing the
   form's icon+weight visual language - a small warning glyph
   and slightly bolder weight tie it back in instead of reading
   like an unstyled default.
   NOTE: this was originally a CSS `content: '\f06a'` ::before
   icon - browsers weren't resolving the escape into the actual
   glyph (came back as an empty/invisible box, not a rendering
   we could rely on). Using a real <i class="fa ..."> element
   instead, same as every other icon on this page. */
.error-text {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    color: #dc3545;
    font-size: 12.5px;
    font-weight: 600;
}

.error-text i {
    font-size: 12px;
}

.form-step {
    display: none;
}

.form-step.active {
    display: block;
}
.top10{
    position: relative !important;
    top: 10px !important;
}


/* ============================================================
   front.partials.job-filter-fields
   (included from job-search-form.blade.php and job-listing.blade.php,
   both of which already link site-custom.css themselves)
   ============================================================ */
    .form-control {
        border: none;
    }

    .distance-select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        width: 100%;
        height: 48px;
        padding: 0 40px 0 16px;
        font-size: 15px;
        color: #333;
        background-color: #fff;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2337458c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 16px center;
        border: 1.5px solid #d8dceb;
        border-radius: 10px;
        box-shadow: 0 2px 6px rgba(20, 20, 43, .04);
        cursor: pointer;
        transition: border-color .2s ease, box-shadow .2s ease;
    }

    .distance-select:hover {
        border-color: #37458c;
    }

    .distance-select:focus {
        outline: none;
        border-color: #37458c;
        box-shadow: 0 0 0 3px rgba(55, 69, 140, .12);
    }

    /* If bootstrap-select ever enhances a .selectpicker (e.g. Category),
       its generated button carries Bootstrap's own "dropdown-toggle" class
       - which paints a second native triangle via ::after on top of
       bootstrap-select's own caret, producing a double-arrow. Keep only
       bootstrap-select's caret. */
    .bootstrap-select > .dropdown-toggle::after {
        display: none !important;
    }

    /* Mobile */
    @media (max-width: 767.98px) {
        .filter-collapse:not(.show) {
            display: none;
        }
    }

    /* Tablet/Desktop */
    @media (min-width: 768px) {
        .filter-collapse {
            display: block !important;
        }
    }


/* ============================================================
   front.website.index (homepage)
   ============================================================ */
        /* ---------- Hero photo carousel: fix permanent "double exposure" ----------
           twm_h1_bnr_carousal() (custom.js) configures Owl Carousel with
           animateIn:'fadeIn' / animateOut:'fadeOut', but only .fadeOut has
           a matching CSS rule anywhere in the vendor stylesheets - there is
           no .fadeIn class at all. Practical effect: the incoming slide
           never gets an opacity rule applied to it (stays fully visible
           immediately), and once the outgoing slide's one-off .fadeOut
           animation finishes, Owl Carousel strips the temporary animation
           classes and the slide reverts to its un-animated default opacity
           (1) - because no rule permanently hides non-active items either.
           Net result: both photos end up permanently stacked at full
           opacity, which is the "ghosted second person" artifact. Fixing
           it structurally (not just papering over one frame) so only the
           current slide is ever visible, independent of the animation
           timing bug above. */
        .twm-h1-bnr-carousal .owl-item {
            opacity: 0;
            transition: opacity .3s ease;
        }

        .twm-h1-bnr-carousal .owl-item.active {
            opacity: 1;
        }

        /* ---------- Hero visual polish ---------- */

        /* The vendor's 230px top padding assumes a transparent header that
           overlays the hero image (header-style-1/2). This site's actual
           header (header-style-3) renders in normal static flow above the
           hero, so that padding is pure dead space stacked on top of the
           header's own height. */
        .twm-home1-banner-section {
            padding-top: 130px !important;
        }

        @media (max-width: 991px) {
            .twm-home1-banner-section {
                padding-top: 56px !important;
                padding-bottom: 0px !important;
            }
        }

        /* Note: the header's sign-up/post-a-job buttons no longer wrap
           onto a second row on mobile - they're hidden below 991px (the
           bottom app-nav bar covers those actions instead), so the header
           stays a single fixed-height row and no extra top padding needs
           reserving for it here. */

        /* The photo carousel + decorative circles + floating stat badges
           are desktop-only visual flair - on mobile they just add scroll
           length and (being absolutely positioned) can visually drift
           into the empty space above the search card. Drop the whole
           right column so the hero is a tight, search-first app screen:
           eyebrow -> search card -> headline -> quick actions. */
        @media (max-width: 991px) {
            .twm-home1-banner-section .twm-bnr-right-section {
                display: none !important;
            }

            /* Advanced filters (job type / work type / date / pay /
               category) belong on the full Browse Jobs listing page -
               on the compact mobile home hero they're just clutter
               under an already-simple keyword+location+distance search.
               Hide the toggle and its panel entirely on mobile. */
            .twm-bnr-search-bar .browse-advanced-toggle-wrap,
            .twm-bnr-search-bar #browseAdvancedPanel {
                display: none !important;
            }

            .twm-bnr-eyebrow {
                margin-bottom: 16px;
            }

            .twm-home1-banner-section .twm-bnr-search-bar {
                margin-bottom: 20px !important;
            }

            .twm-home1-banner-section .twm-bnr-title-large {
                margin-bottom: 4px;
            }

            .twm-bnr-quick-actions {
                margin-top: 20px !important;
                margin-bottom: 4px !important;
            }
        }

        /* The vendor CSS pins the hero photo with a fixed width:auto +
           margin-left:200px tuned to the theme's original banner.png.
           Our replacement photos (r-img1/r-img2) have a different subject
           composition, so that fixed offset pushes them off-canvas -
           constrain and centre them within the circle backdrop instead. */
        .twm-home1-banner-section .twm-bnr-right-section .twm-bnr-right-carousel .slide-img img {
            width: auto !important;
            max-width: 90% !important;
            max-height: 560px !important;
            margin: 0 auto !important;
            display: block !important;
            filter: drop-shadow(0 30px 40px rgba(35, 52, 142, .18));
        }

        @media (min-width: 1200px) {
            .twm-home1-banner-section .twm-bnr-right-section .twm-bnr-right-carousel .slide-img img {
                max-height: 620px !important;
                margin-right: 20px !important;
            }
        }

        /* Softer gradient fills instead of the flat solid circles - adds
           depth without competing with the photo. */
        .twm-home1-banner-section .twm-bnr-right-section .twm-img-bg-circle-area .twm-img-bg-circle1 span {
            background: radial-gradient(circle at 35% 30%, #cfe0f7, #b4cded) !important;
        }

        .twm-home1-banner-section .twm-bnr-right-section .twm-img-bg-circle-area .twm-img-bg-circle2 span {
            background: radial-gradient(circle at 35% 30%, #e7f0fb, #dbe6f4) !important;
        }

        .twm-home1-banner-section .twm-bnr-right-section .twm-img-bg-circle-area .twm-img-bg-circle3 span {
            background: radial-gradient(circle at 35% 30%, #f4f7fc, #ecf1f7) !important;
        }

        /* Floating stat badges - a touch more premium: crisper shadow,
           subtle border, slightly bigger icon chip. */
        .twm-home1-banner-section .twm-bnr-blocks {
            background: #fff;
            border-radius: 14px;
            box-shadow: 0 8px 20px rgba(20, 30, 70, .08);
            border: 1px solid #eceff5;
        }

        /* The vendor's top:90px/right:0 position for badge #2 sits right on
           top of the subject's face on both carousel photos - move it down
           to the lower-right, clear of the face in either slide. */
        .twm-home1-banner-section .twm-bnr-blocks-position-2 {
            top: auto !important;
            bottom: 40px !important;
            right: 0 !important;
        }

        @media (max-width: 991px) {
            .twm-home1-banner-section .twm-bnr-blocks-position-2 {
                position: inherit !important;
                bottom: auto !important;
            }
        }

        .twm-home1-banner-section .twm-bnr-blocks .twm-icon {
            border-radius: 12px;
            overflow: hidden;
        }

        /* Eyebrow badge above the headline (replaces the old plain text) */
        .twm-bnr-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: #fff;
            border: 1px solid rgba(35, 52, 142, .12);
            border-radius: 30px;
            padding: 8px 18px;
            font-size: 14px;
            font-weight: 600;
            color: #0f1425;
            box-shadow: 0 6px 16px rgba(20, 30, 70, .06);
            margin-bottom: 24px;
        }

        .twm-bnr-eyebrow i {
            color: #37458c;
            font-size: 13px;
        }

        @media (max-width: 991px) {
            .twm-bnr-eyebrow {
                font-size: 13px;
                margin-bottom: 14px;
            }
        }

        /* Popular search pills (replaces the old plain comma-separated links) */
        .twm-home1-banner-section .twm-bnr-popular-search {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
        }

        .twm-home1-banner-section .twm-bnr-popular-search .twm-title {
            font-weight: 700;
            color: #0f1425;
            margin-right: 2px;
        }

        .twm-home1-banner-section .twm-bnr-popular-search .twm-popular-search-chip {
            display: inline-flex;
            align-items: center;
            background: #fff;
            border: 1px solid rgba(35, 52, 142, .12);
            border-radius: 30px;
            padding: 6px 16px;
            font-size: 13.5px;
            font-weight: 600;
            color: #37458c;
            transition: background .2s ease, color .2s ease, transform .2s ease;
        }

        .twm-home1-banner-section .twm-bnr-popular-search .twm-popular-search-chip:hover {
            background: #37458c;
            color: #fff;
            transform: translateY(-2px);
        }

        /* Search bar card - restrained shadow, clean border */
        .twm-home1-banner-section .twm-bnr-search-bar {
            box-shadow: 0 8px 24px rgba(20, 30, 70, .06) !important;
            border: 1px solid #eceff5;
            border-radius: 14px !important;
        }

        .ls-inputicon-box {
            position: relative;
        }

        .ls-inputicon-box i {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            background: linear-gradient(135deg, #23348e 0%, #37458c 100%);
            color: #fff;
            font-size: 14px;
            z-index: 2;
        }

        .ls-inputicon-box .form-control {
            height: 56px;
            border: 1px solid transparent;
            background: #f4f6fb;
            border-radius: 12px;
            padding-left: 56px;
            font-weight: 500;
            transition: border-color .2s ease, background .2s ease;
        }

        .ls-inputicon-box .form-control:focus {
            background: #fff;
            border-color: #37458c;
        }

        .twm-bnr-search-bar .form-group label {
            font-weight: 700;
            letter-spacing: .3px;
        }

        /* The "Distance from location" <select> has no site styling
           anywhere (vendor CSS doesn't touch it either) - it was just
           falling back to the browser's bare native select chrome,
           looking out of place next to the icon-boxed keyword/location
           inputs. Match the same rounded, filled, no-border look. */
        .twm-bnr-search-bar select.distance-select {
            display: block;
            width: 100%;
            height: 56px;
            border: 1px solid transparent;
            background-color: #f4f6fb;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2337458c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 16px center;
            background-size: 14px;
            border-radius: 12px;
            padding: 0 40px 0 16px;
            font-weight: 500;
            color: #16192b;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            transition: border-color .2s ease, background-color .2s ease;
        }

        .twm-bnr-search-bar select.distance-select:focus {
            background-color: #fff;
            border-color: #37458c;
            outline: none;
        }

        .twm-bnr-search-bar .site-button {
            height: 56px;
            width: 100%;
            border-radius: 12px !important;
            background: linear-gradient(135deg, #23348e 0%, #37458c 100%) !important;
            font-size: 15px;
            font-weight: 700;
            letter-spacing: .3px;
            box-shadow: 0 12px 26px rgba(35, 52, 142, .3);
            transition: transform .2s ease, box-shadow .2s ease;
        }

        .twm-bnr-search-bar .site-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 16px 32px rgba(35, 52, 142, .38);
        }

        .twm-bnr-search-bar .browse-advanced-toggle {
            background: #f4f6fb !important;
            border-radius: 12px !important;
        }

        .search-suggestions {
            display: none;
            position: absolute;
            top: calc(100% + 5px);
            left: 0;
            right: 0;
            background: #fff;
            border: 1px solid #e5e5e5;
            border-radius: 12px;
            z-index: 9999;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,.08);
        }

        .search-item {
            padding: 12px 15px;
            cursor: pointer;
            display: flex;
            align-items: center;
        }

        .search-item:hover {
            background: #f5f7ff;
        }

        .search-item i {
            width: 31px;
            margin-right: 12px;
            color: #fff;
            position: static !important;
            transform: none !important;
        }
        .home-company-logo{
            background:#37458c;
            color:#fff;
            border-radius:10px;
            font-size:26px;
            font-weight:700;
            text-transform:uppercase;
            overflow: hidden;
            object-fit:contain;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
        }

        /* No company logo uploaded - a plain building icon instead of
           coloured initials, muted so it reads as "no logo" rather than
           as if it were the company's actual brand mark. */
        .home-company-logo-placeholder {
            background: #eef1fb;
            color: #9aa4c4;
            font-size: 22px;
        }
        .site-button-link{
            color: var(--site-text-primary);
            font-weight: 600;
            text-decoration: none;
        }

        .site-button-link:hover{
            text-decoration: underline;
        }

        /* ============================================================
           Hero: bold dark treatment (restored - this was preferred over
           the light version once compared side by side).
           ============================================================ */
        .twm-home1-banner-section {
            position: relative;
            overflow: hidden;
            background: radial-gradient(circle at 15% 20%, #2a3a99 0%, transparent 45%),
                        radial-gradient(circle at 85% 80%, #1c2a70 0%, transparent 50%),
                        linear-gradient(135deg, #0f1533 0%, #17204d 45%, #1f2c6b 100%) !important;
        }

        .twm-home1-banner-section::before,
        .twm-home1-banner-section::after {
            content: '';
            position: absolute;
            border-radius: 50%;
            filter: blur(70px);
            z-index: 0;
            pointer-events: none;
        }

        .twm-home1-banner-section::before {
            width: 380px;
            height: 380px;
            background: rgba(240, 149, 74, .28);
            top: -120px;
            right: 8%;
        }

        .twm-home1-banner-section::after {
            width: 320px;
            height: 320px;
            background: rgba(90, 130, 230, .3);
            bottom: -100px;
            left: -60px;
        }

        .twm-home1-banner-section > .row,
        .twm-home1-banner-section > .container {
            position: relative;
            z-index: 2;
        }

        .twm-bnr-eyebrow {
            background: rgba(255, 255, 255, .08) !important;
            border: 1px solid rgba(255, 255, 255, .18) !important;
            color: #fff !important;
            box-shadow: none !important;
        }

        .twm-bnr-eyebrow i {
            color: #f0954a !important;
        }

        .twm-bnr-eyebrow .site-text-primary {
            color: #8fa6f5 !important;
        }

        .twm-home1-banner-section .twm-bnr-title-large,
        .twm-home1-banner-section > .row .twm-bnr-left-section .twm-bnr-title-large,
        .twm-home1-banner-section > .container .row .twm-bnr-left-section .twm-bnr-title-large {
            color: #fff !important;
            font-weight: 700 !important;
        }

        .twm-home1-banner-section .twm-bnr-title-large .site-text-primary {
            color: #f0954a !important;
        }

        .twm-home1-banner-section .twm-bnr-search-bar {
            background: #fff;
            box-shadow: 0 24px 60px rgba(6, 10, 30, .35) !important;
        }

        .twm-home1-banner-section .twm-img-bg-circle-area .twm-img-bg-circle1 span,
        .twm-home1-banner-section .twm-img-bg-circle-area .twm-img-bg-circle2 span,
        .twm-home1-banner-section .twm-img-bg-circle-area .twm-img-bg-circle3 span {
            background: rgba(255, 255, 255, .06) !important;
            border: 1px solid rgba(255, 255, 255, .12);
        }

        .twm-home1-banner-section .twm-small-ring-l,
        .twm-home1-banner-section .twm-small-ring-2 {
            border-color: rgba(255, 255, 255, .25) !important;
        }

        .twm-home1-banner-section .twm-gradient-text {
            background: linear-gradient(to bottom, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 100%) !important;
            -webkit-background-clip: text !important;
            background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
        }

        /* Header text/logo/button colours - guarded by :not(.color-fill),
           NOT :not(.is-fixed) (that class is unreliable, see earlier note
           in this file's history - .color-fill is the one tied to the
           header's real opaque-white state at scrollTop >= 40px). */
        .main-bar:not(.color-fill) .header-nav .nav > li > a {
            color: #fff !important;
        }

        .main-bar:not(.color-fill) .header-nav .nav > li > a:hover {
            color: #f0954a !important;
        }

        /* The white-on-transparent-header treatment above only makes
           sense on desktop, where the header overlays the dark hero
           image directly. Below 991px the hamburger menu opens as its
           own solid WHITE drawer panel (vendor CSS: mobile-sider-drawer
           -menu .header-nav { background-color: #fff }) - the forced
           white text was landing white-on-white, making every menu link
           invisible. Force normal dark text back inside the drawer,
           regardless of the header's scrolled/color-fill state.
           NOTE: ":not(.color-fill)" above counts as a class for CSS
           specificity (0,4,2) - a plain ".main-bar .header-nav ..."
           override here is only (0,3,2) and LOSES to it even with
           !important (specificity is compared before !important
           source-order tie-breaking kicks in). Match the selector
           shape exactly, on both the :not(.color-fill) and .color-fill
           states, so this always wins on mobile. */
        @media (max-width: 991px) {
            .main-bar:not(.color-fill) .header-nav .nav > li > a,
            .main-bar.color-fill .header-nav .nav > li > a {
                color: #1b1b1b !important;
            }

            .main-bar:not(.color-fill) .header-nav .nav > li > a:hover,
            .main-bar.color-fill .header-nav .nav > li > a:hover {
                color: #37458c !important;
            }
        }

        .main-bar:not(.color-fill) .logo-header {
            background: #fff;
            border-radius: 10px;
        }

        .main-bar:not(.color-fill) .twm-nav-post-a-job {
            /* background: linear-gradient(135deg, #f0954a 0%, #d97328 100%) !important; */
            color: #fff !important;
            /* box-shadow: 0 10px 24px rgba(217, 115, 40, .4); */
            background: radial-gradient(circle at 15% 20%, #2a3a99 0%, transparent 45%), radial-gradient(circle at 85% 80%, #1c2a70 0%, transparent 50%), linear-gradient(135deg, #0f1533 0%, #17204d 45%, #1f2c6b 100%) !important;
        }

        .main-bar:not(.color-fill) .twm-nav-sign-up {
            background: rgba(15, 20, 55, .35) !important;
            color: #fff !important;
            border: 1px solid rgba(255, 255, 255, .35);
        }

        .header-nav-btn-section .twm-nav-sign-up,
        .header-nav-btn-section .twm-nav-post-a-job {
            min-width: 130px;
            text-align: center;
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-weight: 700 !important;
            letter-spacing: .02em;
            transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
        }

        .header-nav-btn-section .twm-nav-sign-up i,
        .header-nav-btn-section .twm-nav-post-a-job i {
            padding-right: 0 !important;
            font-size: 15px;
        }

        .header-nav-btn-section .twm-nav-sign-up:hover {
            background: rgba(255, 255, 255, .18) !important;
            transform: translateY(-2px);
        }

        .header-nav-btn-section .twm-nav-post-a-job:hover {
            transform: translateY(-2px);
            box-shadow: 0 14px 30px rgba(217, 115, 40, .48);
        }

        /* ============================================================
           Home page visual refresh - clean/minimal direction (Indeed /
           LinkedIn Jobs style): one restrained accent colour, subtle
           borders instead of heavy gradients/shadows, generous white
           space, no rainbow of decorative colours. Scoped to this page.
           ============================================================ */

        /* ---------- Section eyebrow label - plain text + accent dot,
           not a filled pill (keeps the page feeling text-forward). ---------- */
        .wt-small-separator {
            display: inline-flex !important;
            align-items: center;
            gap: 8px;
            background: none !important;
            padding: 0 !important;
            font-size: 12.5px !important;
            line-height: 20px !important;
            letter-spacing: .08em;
            font-weight: 700 !important;
            color: #37458c;
        }

        .wt-small-separator::before {
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #37458c;
            flex-shrink: 0;
        }

        .wt-small-separator.white {
            color: #fff;
        }

        .wt-small-separator.white::before {
            background: #fff;
        }

        .wt-title {
            font-weight: 700 !important;
            letter-spacing: -.01em;
        }

        /* ---------- Card grids (industries, cities, featured jobs) -
           a restrained border + shadow change on hover, no big lift. ---------- */
        .job-categories-block,
        .twm-featured-city2,
        .twm-jobs-grid-style1 {
            padding: 28px 26px 24px !important;
            border-radius: 16px !important;
            border: 1px solid #eceff5;
            box-shadow: 0 4px 16px rgba(20, 30, 70, .05) !important;
            transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
        }

        .twm-jobs-grid-style1:hover {
            transform: translateY(-4px);
            border-color: #d8deee;
        }

        /* Vendor rule reserves 50px top padding for the logo box that
           floats above the card (position:absolute) - only needed when a
           real employer logo is actually rendered there. When there's no
           logo the box isn't rendered at all (see markup), so that 50px
           is dead space above the title - drop it only for that case. */
        .twm-jobs-grid-style1.twm-no-logo .twm-mid-content {
            padding-top: 0px;
        }

        .twm-jobs-grid-style1 .boost-label {
            top: -10px !important;
            right: 18px !important;
        }

        .twm-jobs-grid-style1 .twm-job-title h3 {
            font-size: 18px !important;
            font-weight: 700 !important;
            margin-bottom: 8px !important;
            transition: color .2s ease;
        }

        .twm-jobs-grid-style1:hover .twm-job-title h3 {
            color: #37458c !important;
        }

        .twm-jobs-grid-style1 .twm-job-address {
            color: #6b7188;
            font-size: 13.5px;
            margin-bottom: 14px !important;
        }

        .twm-jobs-grid-style1 .twm-job-websites {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 13.5px;
            font-weight: 700;
            padding: 5px 12px;
            background: #eef1fb;
            border-radius: 20px;
        }

        .twm-jobs-grid-style1 .twm-job-websites::before {
            content: '\f0f7';
            font-family: 'FontAwesome';
            font-size: 11px;
        }

        .twm-jobs-grid-style1 .twm-right-content {
            margin-top: 18px;
            padding-top: 16px;
            border-top: 1px solid #f0f2f8;
        }

        .twm-jobs-grid-style1 .twm-nav-post-a-job {
            border-radius: 10px !important;
            font-weight: 700 !important;
            transition: transform .2s ease, box-shadow .2s ease;
        }

        .twm-jobs-grid-style1 .twm-nav-post-a-job:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 18px rgba(55, 69, 140, .28);
        }

        .twm-jobs-grid-style1 .twm-jobs-category span {
            border-radius: 20px !important;
            font-weight: 700 !important;
            font-size: 12px !important;
            padding: 5px 14px !important;
        }

        .job-categories-block:hover,
        .twm-featured-city2:hover {
            box-shadow: 0 6px 18px rgba(20, 30, 70, .08) !important;
        }

        /* ---------- How It Works: modern step-flow cards ---------- */
        .twm-how-it-work-area {
            position: relative;
            overflow: hidden;
            background: linear-gradient(180deg, #f4f6fb 0%, #eef1fb 100%) !important;
        }

        .twm-how-it-work-area::before,
        .twm-how-it-work-area::after {
            content: '';
            position: absolute;
            border-radius: 50%;
            filter: blur(60px);
            z-index: 0;
            pointer-events: none;
        }

        .twm-how-it-work-area::before {
            width: 320px;
            height: 320px;
            background: rgba(55, 69, 140, .07);
            top: -80px;
            left: -60px;
        }

        .twm-how-it-work-area::after {
            width: 260px;
            height: 260px;
            background: rgba(240, 149, 74, .1);
            bottom: -60px;
            right: -40px;
        }

        .twm-how-it-work-area .container {
            position: relative;
            z-index: 1;
        }

        .twm-how-it-work-section3 .row {
            position: relative;
        }

        /* Big translucent number in the corner, behind the icon - the
           small gradient badge stays as the primary marker but this adds
           some depth/scale without competing with it. */
        .twm-w-process-steps3::before {
            content: attr(data-step);
            position: absolute;
            top: -18px;
            right: 6px;
            font-size: 84px;
            font-weight: 800;
            line-height: 1;
            color: #37458c;
            opacity: .05;
            z-index: 0;
            pointer-events: none;
        }

        .twm-w-process-steps3 > * {
            position: relative;
            z-index: 1;
        }

        /* Colour accent strip along the top edge of each card */
        .twm-w-process-steps3 {
            border-top: 4px solid #37458c;
        }

        .twm-how-it-work-section3 .col-xl-4:nth-child(2) .twm-w-process-steps3 {
            border-top-color: #d97328;
        }

        .twm-how-it-work-section3 .col-xl-4:nth-child(3) .twm-w-process-steps3 {
            border-top-color: #1f8fa8;
        }

        .twm-w-process-steps3 {
            background: #fff;
            border: 1px solid #eceff5;
            border-radius: 18px;
            box-shadow: 0 4px 18px rgba(20, 30, 70, .05);
            padding: 34px 28px 30px !important;
            transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease;
            position: relative;
            z-index: 1;
            overflow: hidden;
        }

        .twm-w-process-steps3:hover {
            border-color: transparent;
            box-shadow: 0 20px 40px rgba(20, 30, 70, .14);
            transform: translateY(-8px);
        }

        /* Thin connector with an arrowhead between step 1->2->3 at desktop
           widths - a step "flow" instead of a static row of cards. */
        @media (min-width: 1200px) {
            .twm-how-it-work-section3 .col-xl-4:not(:last-child) {
                position: relative;
            }

            .twm-how-it-work-section3 .col-xl-4:not(:last-child)::after {
                content: '\f178';
                font-family: 'FontAwesome';
                position: absolute;
                top: 60px;
                right: -9%;
                width: 18%;
                text-align: center;
                color: #c7cce6;
                font-size: 18px;
                z-index: 0;
            }
        }

        .twm-w-process-steps3 .twm-w-pro-top {
            margin-bottom: 22px;
            position: relative;
        }

        /* Bold gradient number badge, overlapping the icon tile corner -
           a livelier "step marker" than a plain small circle. */
        .twm-w-process-steps3 .twm-large-number {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: linear-gradient(135deg, #37458c 0%, #23348e 100%);
            color: #fff !important;
            font-size: 14px !important;
            line-height: 1 !important;
            font-weight: 700 !important;
            position: absolute;
            top: -6px;
            left: 46px;
            box-shadow: 0 6px 14px rgba(35, 52, 142, .35);
            border: 3px solid #fff;
        }

        .twm-w-process-steps3 .twm-w-pro-top .twm-media {
            width: 76px;
            height: 76px;
            border-radius: 20px;
            background: linear-gradient(135deg, #eef1fb 0%, #dfe6f8 100%) !important;
            transition: transform .3s ease;
        }

        .twm-w-process-steps3:hover .twm-w-pro-top .twm-media {
            transform: scale(1.08) rotate(-4deg);
        }

        .twm-w-process-steps3 .twm-w-pro-top .twm-media img {
            width: 38px;
            height: 38px;
        }

        .twm-how-it-work-section3 .col-xl-4:nth-child(2) .twm-large-number {
            background: linear-gradient(135deg, #f0954a 0%, #d97328 100%);
            box-shadow: 0 6px 14px rgba(217, 115, 40, .35);
        }

        .twm-how-it-work-section3 .col-xl-4:nth-child(2) .twm-w-pro-top .twm-media {
            background: linear-gradient(135deg, #fdf1e7 0%, #fbe3cd 100%) !important;
        }

        .twm-how-it-work-section3 .col-xl-4:nth-child(3) .twm-large-number {
            background: linear-gradient(135deg, #2fb8c6 0%, #1f8fa8 100%);
            box-shadow: 0 6px 14px rgba(31, 143, 168, .35);
        }

        .twm-how-it-work-section3 .col-xl-4:nth-child(3) .twm-w-pro-top .twm-media {
            background: linear-gradient(135deg, #e7f6f8 0%, #d3edf1 100%) !important;
        }

        .twm-w-process-steps3 .twm-title {
            font-weight: 700 !important;
            font-size: 19px !important;
        }

        /* ---------- Why Choose Us: modern icon cards, one accent colour
           per card (navy/orange/teal/purple), gradient number badge and
           an icon instead of plain flat-colour boxes. ---------- */
        .twm-how-it-work-area2 {
            position: relative;
            overflow: hidden;
        }

        .twm-how-it-work-area2::before {
            content: '';
            position: absolute;
            width: 380px;
            height: 380px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(55, 69, 140, .06) 0%, transparent 70%);
            top: -120px;
            right: -80px;
            pointer-events: none;
            z-index: 0;
        }

        .twm-how-it-work-area2 .container {
            position: relative;
            z-index: 1;
        }

        /* Bold, fully-coloured cards (not just a thin accent strip) - a
           deliberately bigger visual swing than the white-card-plus-tint
           versions tried before this. */
        .twm-w-process-steps-2 .twm-w-pro-top {
            background: linear-gradient(145deg, #37458c 0%, #232e6b 100%) !important;
            border: none;
            border-radius: 18px;
            padding: 32px 28px !important;
            box-shadow: 0 14px 30px rgba(35, 52, 142, .28) !important;
            position: relative;
            overflow: hidden;
            transition: box-shadow .3s ease, transform .3s ease;
        }

        .twm-w-process-steps-2 .twm-w-pro-top::after {
            content: '';
            position: absolute;
            width: 140px;
            height: 140px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .08);
            top: -50px;
            right: -50px;
            pointer-events: none;
        }

        .twm-w-process-steps-2 .twm-w-pro-top:hover {
            box-shadow: 0 22px 44px rgba(35, 52, 142, .38) !important;
            transform: translateY(-6px);
        }

        .twm-w-process-steps-2-wrap .col-xl-6:nth-child(2) .twm-w-pro-top {
            background: linear-gradient(145deg, #f0954a 0%, #c2601a 100%) !important;
            box-shadow: 0 14px 30px rgba(217, 115, 40, .3) !important;
        }

        .twm-w-process-steps-2-wrap .col-xl-6:nth-child(2) .twm-w-pro-top:hover {
            box-shadow: 0 22px 44px rgba(217, 115, 40, .4) !important;
        }

        .twm-w-process-steps-2-wrap .col-xl-6:nth-child(3) .twm-w-pro-top {
            background: linear-gradient(145deg, #2fb8c6 0%, #167486 100%) !important;
            box-shadow: 0 14px 30px rgba(31, 143, 168, .3) !important;
        }

        .twm-w-process-steps-2-wrap .col-xl-6:nth-child(3) .twm-w-pro-top:hover {
            box-shadow: 0 22px 44px rgba(31, 143, 168, .4) !important;
        }

        .twm-w-process-steps-2-wrap .col-xl-6:nth-child(4) .twm-w-pro-top {
            background: linear-gradient(145deg, #8a5cd6 0%, #532583 100%) !important;
            box-shadow: 0 14px 30px rgba(106, 63, 176, .3) !important;
        }

        .twm-w-process-steps-2-wrap .col-xl-6:nth-child(4) .twm-w-pro-top:hover {
            box-shadow: 0 22px 44px rgba(106, 63, 176, .4) !important;
        }

        .twm-w-process-steps-2 .twm-large-number {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 50px;
            border-radius: 13px;
            font-size: 20px !important;
            font-weight: 700 !important;
            background: rgba(255, 255, 255, .18) !important;
            color: #fff !important;
            margin-bottom: 18px;
            position: relative;
            z-index: 1;
            transition: transform .3s ease;
        }

        .twm-w-process-steps-2 .twm-w-pro-top:hover .twm-large-number {
            transform: scale(1.1) rotate(-6deg);
        }

        .twm-w-process-steps-2 .twm-title {
            font-size: 19px !important;
            font-weight: 700 !important;
            margin-bottom: 8px !important;
            color: #fff !important;
            position: relative;
            z-index: 1;
        }

        .twm-w-process-steps-2 p {
            color: rgba(255, 255, 255, .8) !important;
            font-size: 14px;
            margin-bottom: 0;
            position: relative;
            z-index: 1;
        }

        /* ============================================================
           Browse Jobs by Industry - the cards were a plain horizontal
           icon+text row with a dated pastel blob decoration. Redesigned
           as centred tiles with a proper coloured icon badge and a
           status-aware job-count pill.
           ============================================================ */
        /* Section was p-t90/p-b90 (180px) plus 44px card padding plus an
           88px icon plus the carousel's own 30px stage padding - reduce
           the whole stack so the section reads as a compact strip rather
           than a nearly full-screen block. */
        .twm-job-categories-area {
            padding-top: 56px !important;
            padding-bottom: 32px !important;
            background: linear-gradient(180deg, #f4f6fb 0%, #eef1fb 100%) !important;
        }

        .twm-job-categories-area .wt-separator-two-part {
            margin-bottom: 8px;
        }

        .twm-job-categories-area .section-head.left h2 {
            margin-bottom: 12px !important;
        }

        .job-categories-style1 .owl-carousel .owl-stage-outer {
            padding: 14px 0 14px 10px !important;
        }

        .job-categories-style1.m-b30 {
            margin-bottom: 10px !important;
        }

        /* The next section (Trusted Employers) still had its own vendor
           p-t90 on top of this section's own bottom padding, stacking
           into a large empty gap now that the nav arrows (which used to
           visually anchor that space) are gone. */
        .twm-companies-wrap {
            padding-top: 40px !important;
        }

        /* Redundant with autoplay (already on) - remove the prev/next
           circle buttons floating in the empty space under the cards. */
        .job-categories-carousel.owl-btn-left-bottom .owl-nav {
            display: none !important;
        }

        .job-categories-block {
            display: flex !important;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 26px 22px 24px !important;
            border: 1px solid #eceff5;
            border-radius: 16px;
            box-shadow: 0 4px 16px rgba(20, 30, 70, .04) !important;
            position: relative;
            overflow: hidden;
            height: 220px;
            max-width: 300px;
            margin-left: auto;
            margin-right: auto;
            justify-content: center;
            transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
        }

        /* Colour the icon badge per card position instead of every card
           using the same navy tint - a quick 5-colour cycle so the strip
           reads as varied/lively rather than one flat repeated tile. */
        .job-categories-carousel .item:nth-child(5n+1) .twm-media { background: linear-gradient(135deg, #eef1fb 0%, #dfe6f8 100%); }
        .job-categories-carousel .item:nth-child(5n+1) .twm-media img { filter: hue-rotate(0deg); }
        .job-categories-carousel .item:nth-child(5n+1) .job-categories-block:hover .twm-media { background: linear-gradient(135deg, #37458c 0%, #23348e 100%); }

        .job-categories-carousel .item:nth-child(5n+2) .twm-media { background: linear-gradient(135deg, #fdf1e7 0%, #fbe3cd 100%); }
        .job-categories-carousel .item:nth-child(5n+2) .job-categories-block:hover .twm-media { background: linear-gradient(135deg, #f0954a 0%, #d97328 100%); }

        .job-categories-carousel .item:nth-child(5n+3) .twm-media { background: linear-gradient(135deg, #e7f6f8 0%, #d3edf1 100%); }
        .job-categories-carousel .item:nth-child(5n+3) .job-categories-block:hover .twm-media { background: linear-gradient(135deg, #2fb8c6 0%, #1f8fa8 100%); }

        .job-categories-carousel .item:nth-child(5n+4) .twm-media { background: linear-gradient(135deg, #f3ecfb 0%, #e5d4f5 100%); }
        .job-categories-carousel .item:nth-child(5n+4) .job-categories-block:hover .twm-media { background: linear-gradient(135deg, #8a5cd6 0%, #6a3fb0 100%); }

        .job-categories-carousel .item:nth-child(5n+5) .twm-media { background: linear-gradient(135deg, #e7f7ee 0%, #d3f0e0 100%); }
        .job-categories-carousel .item:nth-child(5n+5) .job-categories-block:hover .twm-media { background: linear-gradient(135deg, #2fb87e 0%, #1f9d5c 100%); }

        .job-categories-block:hover {
            border-color: #37458c;
            box-shadow: 0 20px 40px rgba(20, 30, 70, .14) !important;
            transform: translateY(-8px);
        }

        /* Retire the vendor's dated pastel-circle decoration */
        .job-categories-block:after,
        .job-categories-block:before,
        .job-categories-block:hover:after,
        .job-categories-block:hover:before {
            content: none !important;
        }

        .job-categories-block .twm-media {
            width: 62px;
            height: 62px;
            border-radius: 16px;
            background: linear-gradient(135deg, #eef1fb 0%, #dfe6f8 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 16px;
            transition: background .3s ease, transform .3s ease;
        }

        .job-categories-block:hover .twm-media {
            background: linear-gradient(135deg, #37458c 0%, #23348e 100%);
            transform: scale(1.08) rotate(-4deg);
        }

        .job-categories-block .twm-media img {
            width: 32px !important;
            height: 32px;
            object-fit: contain;
            transition: filter .3s ease;
        }

        .job-categories-block .twm-content {
            width: 100%;
        }

        .job-categories-block .twm-content a {
            font-size: 15.5px !important;
            font-weight: 700;
            line-height: 1.3;
            max-height: 40px;
            overflow: hidden;
            display: -webkit-box !important;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            align-items: center;
            justify-content: center;
            color: #16192b;
            transition: color .25s ease;
        }

        .job-categories-block:hover .twm-content > a {
            color: #37458c;
        }

        .job-categories-block .twm-content .twm-jobs-available {
            background: #e8f7ee !important;
            color: #1baf7a !important;
            font-weight: 700;
            font-size: 13px !important;
            margin-top: 6px;
        }

        .job-categories-block .twm-content .twm-jobs-available i {
            margin-right: 5px;
        }

        /* Small circular arrow indicator, top-right - hidden until hover,
           gives the card a clear "go to this category" affordance instead
           of relying on the whole card being a vague click target. */
        .job-categories-block .twm-cat-arrow {
            position: absolute;
            top: 18px;
            right: 18px;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: #f4f6fb;
            color: #37458c;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            opacity: 0;
            transform: translate(-6px, 6px);
            transition: opacity .25s ease, transform .25s ease, background .25s ease, color .25s ease;
            pointer-events: none;
        }

        .job-categories-block:hover .twm-cat-arrow {
            opacity: 1;
            transform: translate(0, 0);
            background: #37458c;
            color: #fff;
        }

        @media (max-width: 991px) {
            .job-categories-block {
                margin: 0 10px !important;
            }

            .job-categories-block .twm-cat-arrow {
                opacity: 1;
                transform: none;
            }
        }


        .border-2 {
            border: 2px solid;
        }
        .border-warning {
            border-color: #ff4d6d !important;
        }
        .boost-package-card{
            position:relative;
            cursor:pointer;
            border:2px solid #ececec;
            border-radius:16px;
            overflow:hidden;
            transition:.35s ease;
            background:#fff;
        }


        .boost-package-card:hover{
            transform:translateY(-6px);
            box-shadow:0 15px 35px rgba(25,103,210,.12);
        }
        .popular-package{
            border:2px solid #1967d2;
            box-shadow:0 18px 40px rgba(25,103,210,.18);
        }

        /* Blue Glow */
        .popular-package::before{
            content:'';
            position:absolute;
            inset:-2px;
            border-radius:16px;
            padding:2px;
            background:linear-gradient(135deg,#1967d2,#4b7fff,#1967d2);
            -webkit-mask:
                linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
            -webkit-mask-composite:xor;
            mask-composite:exclude;
            pointer-events:none;
        }

        /* Selected Package */
        input[name=boost_package]:checked + .pricing-table-2{
            border:2px solid #1967d2;
            box-shadow:0 15px 35px rgba(25,103,210,.18);
        }


        input[name=boost_package]:checked+.pricing-table-2 .site-button {

            background: #1967d2;
            color: #fff;
        }

        label.boost-label {
            display: block;
            cursor: pointer;
        }

        .ck-editor__editable_inline {
            min-height: 300px;
            max-height: 300px;
            height: 300px;
        }

        .boost-package input {
            display: none;
        }

        .boost-card {

            border: 2px solid #ececec;

            border-radius: 14px;

            padding: 35px;

            cursor: pointer;

            transition: .3s;

            background: #fff;

            position: relative;

            height: 100%;

        }

        .boost-package input:checked+.boost-card {

            border-color: #1967d2;

            box-shadow: 0 10px 35px rgba(25, 103, 210, .25);

            transform: translateY(-6px);

        }

       /* Popular Badge */
        .popular-badge{
            position: absolute;
            top: -17px;
            left: 50%;
            transform: translateX(10%);
            z-index: 999;
            background: #37458c;
            color: #fff;
            padding: 5px 5px;
            border-radius: 50px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .5px;
            box-shadow: 0 8px 20px rgba(255, 90, 95, .35);
        }
        /* Button */
        input[name=boost_package]:checked + .pricing-table-2 .site-button{
            background:#1967d2;
            color:#fff;
        }

        .boost-card ul li {

            margin-bottom: 14px;

            font-size: 15px;

        }

        .post-option-card {

            background: #fff;

            border: 2px solid linear-gradient(90deg, #ff8a00, #ff3d68);

            border-radius: 16px;

            padding: 22px;

            position: relative;

            transition: .3s;

            height: 100%;

        }

        .post-option-card:hover {

            transform: translateY(-4px);

            box-shadow: 0 10px 30px rgba(0, 0, 0, .08);

        }

        .post-option-card.active {

            border: 2px solid #ff4d6d;

            background: #fffdf4;

        }

        .package-header {

            font-size: 14px;

            font-weight: 700;

            color: #0d6efd;

            letter-spacing: 1px;

        }

        .package-header i {

            margin-right: 8px;

        }

        .package-list {

            margin: 20px 0;

            padding-left: 18px;

        }

        .package-list li {

            margin-bottom: 10px;

        }

        .recommended-badge {

            position: absolute;

            top: -10px;

            right: 15px;


            background: linear-gradient(90deg, #ff9800, #ff4d6d);

            color: #fff;

            padding: 6px 14px;

            font-size: 12px;

            border-radius: 30px;

            font-weight: 700;

        }

        .boost-ribbon {

            position: absolute;

            top: -18px;

            right: 12px;

            background: linear-gradient(90deg, #ff9800, #ff4d6d);

            color: #fff;

            padding: 6px 16px;

            font-size: 11px;

            font-weight: 700;

            border-radius: 30px;

            z-index: 999;

            box-shadow: 0 5px 12px rgba(0, 0, 0, .2);

        }

        .boost-section {

            border-radius: 20px;

            overflow: hidden;

            background: #fff;

        }

        .boost-label {

            display: inline-block;

            background: linear-gradient(90deg, #ff9800, #ff4d6d);

            color: #fff;

            padding: 8px 22px;

            border-radius: 30px;

            font-size: 13px;

            font-weight: 600;

        }

        .boost-box {

            background: #fff;

            border: 1px solid #ececec;

            border-radius: 16px;

            padding: 25px 15px;

            text-align: center;

            transition: .3s;

            height: 100%;

        }

        .boost-box:hover {

            transform: translateY(-6px);

            box-shadow: 0 15px 35px rgba(0, 0, 0, .08);

            border-color: #ff4d6d;

        }

        .boost-icon {

            width: 70px;

            height: 70px;

            margin: auto auto 20px;

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            color: #fff;

            font-size: 28px;

        }

        .boost-box h3 {

            font-weight: 700;

            color: #0d6efd;

            margin-bottom: 5px;

        }

        .boost-box h6 {

            font-weight: 600;

            margin-bottom: 8px;

        }

        .boost-box small {

            color: #777;

            line-height: 22px;

            display: block;

        }

        .boost-bottom {

            background: #f8fbff;

            border: 1px solid #e7eef8;

            border-radius: 18px;

            padding: 30px;

        }

        .boost-bottom p {

            margin-bottom: 12px;

            font-size: 15px;

        }

        .boost-stat {

            background: linear-gradient(135deg, #ff9800, #ff4d6d);

            border-radius: 18px;

            padding: 30px;

            text-align: center;

            color: #fff;

            box-shadow: 0 12px 30px rgba(255, 152, 0, .25);

        }

        .boost-stat h1 {

            font-size: 56px;

            font-weight: 700;

            margin-bottom: 5px;

            color: #fff;

        }

        .boost-stat span {

            font-size: 18px;

            font-weight: 600;

        }

        .tox.tox-tinymce {
            min-height: 450px !important;
        }
        .tox-tinymce {
            border: 1px solid #37458c !important;
            border-radius: 10px;
        }

        .boost-label {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #ff9800, #ff5722);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(255, 87, 34, 0.3);
        top: -8%;
    right: 3%;
    z-index: 10;
}

.boost-label i {
    margin-right: 5px;
}

        .ls-inputicon-box {
            position: relative;
        }

        .ls-inputicon-box i {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            background: linear-gradient(135deg, #23348e 0%, #37458c 100%);
            color: #fff;
            font-size: 14px;
            z-index: 2;
        }

        .ls-inputicon-box .form-control {
            height: 56px;
            border: 1px solid transparent;
            background: #f4f6fb;
            border-radius: 12px;
            padding-left: 56px;
            font-weight: 500;
            transition: border-color .2s ease, background .2s ease;
        }

        .ls-inputicon-box .form-control:focus {
            background: #fff;
            border-color: #37458c;
        }

        .twm-bnr-search-bar .form-group label {
            font-weight: 700;
            letter-spacing: .3px;
        }

        /* The "Distance from location" <select> has no site styling
           anywhere (vendor CSS doesn't touch it either) - it was just
           falling back to the browser's bare native select chrome,
           looking out of place next to the icon-boxed keyword/location
           inputs. Match the same rounded, filled, no-border look. */
        .twm-bnr-search-bar select.distance-select {
            display: block;
            width: 100%;
            height: 56px;
            border: 1px solid transparent;
            background-color: #f4f6fb;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2337458c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 16px center;
            background-size: 14px;
            border-radius: 12px;
            padding: 0 40px 0 16px;
            font-weight: 500;
            color: #16192b;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            transition: border-color .2s ease, background-color .2s ease;
        }

        .twm-bnr-search-bar select.distance-select:focus {
            background-color: #fff;
            border-color: #37458c;
            outline: none;
        }

        .twm-bnr-search-bar .site-button {
            height: 56px;
            width: 100%;
            border-radius: 12px !important;
            background: linear-gradient(135deg, #23348e 0%, #37458c 100%) !important;
            font-size: 15px;
            font-weight: 700;
            letter-spacing: .3px;
            box-shadow: 0 12px 26px rgba(35, 52, 142, .3);
            transition: transform .2s ease, box-shadow .2s ease;
        }

        .twm-bnr-search-bar .site-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 16px 32px rgba(35, 52, 142, .38);
        }

        .twm-bnr-search-bar .browse-advanced-toggle {
            background: #f4f6fb !important;
            border-radius: 12px !important;
        }

        .search-suggestions {
            display: none;
            position: absolute;
            top: calc(100% + 5px);
            left: 0;
            max-height: 160px;
            right: 0;
            background: #fff;
            border: 1px solid #37458c;
            border-radius: 12px;
            z-index: 9999;
            overflow-y: scroll;
            box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
        }

        .search-item {
            padding: 12px 15px;
            cursor: pointer;
            display: flex;
            align-items: center;
        }

        .search-item:hover {
            background: #f5f7ff;
        }

        .search-item i {
            width: 31px;
            margin-right: 12px;
            color: #fff;
            position: static !important;
            transform: none !important;
        }

        .browse-advanced-toggle-wrap {
            text-align: left;
        }

        .browse-advanced-toggle {
            width: 100%;
            height: 45px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            background: #fff;
            border: 1px solid #37458c;
            border-radius: 12px;
            padding: 0px 16px;
            color: #37458c;
            font-weight: 600;
            cursor: pointer;
            transition: border-color .2s ease, box-shadow .2s ease;
        }

        .browse-advanced-toggle:hover,
        .browse-advanced-toggle[aria-expanded="true"] {
            border-color: #37458c;
            box-shadow: 0 4px 14px rgba(55, 69, 140, .08);
        }

        .browse-advanced-toggle-label {
            display: inline-flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
            font-size: 13px;
            line-height: 16px;
            font-weight: 600;
            color: #37458c;
            text-transform: uppercase;
            padding-top: 0px;
            margin-top: 10px;
            margin-bottom: 10px;
        }

        .browse-advanced-toggle-label>.fa-sliders {
            margin-right: 2px;
        }

        .browse-advanced-chevron {
            transition: transform .2s ease;
            color: #37458c;
            font-size: 12px
        }

        .browse-advanced-toggle[aria-expanded="true"] .browse-advanced-chevron {
            transform: rotate(180deg);
        }

        .browse-selected-count {
            display: inline-flex;
            align-items: center;
            background: #eef3ff;
            color: #3b478d;
            font-size: 12px;
            font-weight: 600;
            padding: 3px 15px;
            border-radius: 999px;
        }

        .browse-selected-count.has-selection {
            background: #3b478d;
            color: #fff;
        }

        .browse-advanced-panel {
            background: #f8f9fc;
            border: 1px solid #e5e8f0;
            border-radius: 16px;
            padding: 20px;
            text-align: left;
        }

        .browse-filter-title {
            font-size: 13px;
            line-height: 16px;
            font-weight: 600;
            color: #37458c;
            text-transform: uppercase;
            margin-bottom: 14px;
        }

        .browse-filter-options {
            max-height: 145px;
            overflow-y: auto;
            padding-right: 6px;
            background: #fff;
            border: 1px solid #eceff5;
            border-radius: 10px;
            padding: 12px;
        }

        .browse-filter-options::-webkit-scrollbar,
        .filter-scroll::-webkit-scrollbar {
            width: 5px;
        }

        .browse-filter-options::-webkit-scrollbar-thumb,
        .filter-scroll::-webkit-scrollbar-thumb {
            background: #bdbdbd;
            border-radius: 10px;
        }

        .filter-option {
            margin-bottom: 4px;
        }

        .filter-option:last-child {
            margin-bottom: 0;
        }

        .filter-option .form-check {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 7px 8px;
            margin: 0;
            border-radius: 8px;
            cursor: pointer;
            transition: background .15s ease;
        }

        .filter-option .form-check:hover {
            background: #f4f6fb;
        }

        .filter-option .form-check-input {
            flex-shrink: 0;
            float: none;
            position: static;
            width: 17px;
            height: 17px;
            margin: 1px 0 0;
            border: 1.5px solid #ccd2e3;
            border-radius: 5px;
            cursor: pointer;
        }

        .filter-option .form-check-input:checked {
            background-color: #37458c;
            border-color: #37458c;
        }

        .filter-option .form-check-input:focus {
            border-color: #37458c;
            box-shadow: 0 0 0 .2rem rgba(55, 69, 140, .15);
        }

        .filter-option .form-check-label {
            padding-left: 0;
            margin: 0;
            font-size: 13.5px;
            line-height: 1.35;
            color: #2c2f3a;
            white-space: normal;
            word-break: break-word;
            cursor: pointer;
        }

        .filter-count {
            color: #37458c;
            font-weight: 700;
            margin-left: 4px;
        }

        .browse-filter-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            flex-wrap: wrap;
            padding-top: 10px;
            border-top: 1px solid #e5e8f0;
        }

        .browse-filter-hint {
            color: #37458c;
            font-size: 13px;
            line-height: 1.4;
        }

        .twm-bnr-search-bar label { 
            margin-top: 3px; 
        }

        .browse-clear-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-height: 42px;
            padding: 8px 16px;
            border: 1px solid #d0d5dd;
            border-radius: 10px;
            background: #fff;
            color: #37458c;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all .2s ease;
        }

        .browse-clear-btn:hover:not(:disabled) {
            border-color: #b42318;
            color: #b42318;
            background: #fff5f5;
        }

        .browse-clear-btn:disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }

        .browse-filter-category .bootstrap-select,
        .browse-filter-category .dropdown-toggle {
            width: 100% !important;
        }

        .browse-filter-footer-actions {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .browse-filter-footer-actions .site-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        @media (max-width: 767px) {
            .browse-advanced-panel {
                padding: 16px;
            }

            .browse-filter-footer-actions {
                flex-direction: column-reverse;
                width: 100%;
            }

            .browse-filter-footer-actions .site-button,
            .browse-filter-footer-actions #clearBrowseFilters {
                width: 100%;
            }

            .browse-filter-footer {
                flex-direction: column;
                align-items: stretch;
            }

            .browse-clear-btn {
                width: 100%;
                justify-content: center;
            }
        }

        /* Restrained hover feedback across the page's card sections
           (categories, featured jobs, cities, process steps, testimonials,
           blog) - a subtle shadow/border change, no dramatic lift, to
           keep the page feeling calm and professional. */
        .job-categories-block,
        .twm-jobs-grid-style1,
        .twm-featured-city2,
        .twm-w-process-steps3,
        .twm-w-process-steps-2 .twm-w-pro-top,
        .testimonials-v,
        .twm-blog-post-1-outer,
        .ow-client-logo {
            transition: box-shadow .2s ease, border-color .2s ease;
        }

        .job-categories-block:hover,
        .twm-jobs-grid-style1:hover,
        .twm-featured-city2:hover,
        .twm-w-process-steps3:hover,
        .twm-w-process-steps-2 .twm-w-pro-top:hover,
        .testimonials-v:hover,
        .twm-blog-post-1-outer:hover {
            box-shadow: 0 6px 18px rgba(30, 41, 82, .08);
        }

        .ow-client-logo .client-logo {
            border-radius: 12px;
        }

        /* CTA section - modern gradient card with a decorative glow,
           matching the hero/section treatments elsewhere on the page. */
        .twm-for-employee-area {
            background: #f8f9fc;
            position: relative;
            overflow: hidden;
        }

        .twm-explore-content-outer-3 .twm-explore-content-3 {
            background: linear-gradient(135deg, #37458c 0%, #232e6b 100%) !important;
            border-radius: 22px;
            padding: 54px !important;
            box-shadow: 0 20px 44px rgba(35, 52, 142, .28) !important;
            position: relative;
            overflow: hidden;
        }

        .twm-explore-content-outer-3 .twm-explore-content-3::after {
            content: '';
            position: absolute;
            width: 220px;
            height: 220px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .06);
            top: -80px;
            right: -60px;
            pointer-events: none;
        }

        .twm-explore-content-outer-3 .twm-explore-content-3 > * {
            position: relative;
            z-index: 1;
        }

        .twm-explore-content-outer-3 .twm-explore-content-3 .wt-small-separator,
        .twm-explore-content-outer-3 .twm-explore-content-3 .wt-title,
        .twm-explore-content-outer-3 .twm-explore-content-3 p {
            color: #fff !important;
        }

        .twm-explore-content-outer-3 .twm-explore-content-3 .wt-small-separator {
            opacity: .85;
        }

        .twm-explore-content-outer-3 .twm-explore-content-3 .wt-title {
            font-weight: 800 !important;
        }

        /* The vendor's global .site-button rule (style.css ~line 2316) has
           a hidden "slide text on hover" trick: color: transparent
           !important plus a hardcoded WHITE text-shadow standing in for
           the visible text. That only works if the button itself has a
           dark background (white text-shadow on dark = readable) - on
           this white button the "visible" text is white-on-white, i.e.
           completely invisible. Needs !important + text-shadow:none to
           actually kill that trick rather than just resetting color. */
        .twm-explore-content-outer-3 .twm-explore-content-3 .twm-upload-file .site-button {
            display: inline-flex !important;
            align-items: center;
            gap: 10px;
            width: auto !important;
            white-space: nowrap;
            padding: 15px 30px !important;
            background-color: #fff;
            color: #37458c !important;
            text-shadow: none !important;
            border-radius: 12px !important;
            font-weight: 700;
            box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
            transition: transform .2s ease, box-shadow .2s ease;
        }

        .twm-explore-content-outer-3 .twm-explore-content-3 .twm-upload-file .site-button i {
            color: #37458c;
            font-size: 18px !important;
        }

        .twm-explore-content-outer-3 .twm-explore-content-3 .twm-upload-file .site-button:hover {
            background-color: #f4f6fb;
            color: #37458c !important;
            text-shadow: none !important;
            transform: translateY(-3px);
            box-shadow: 0 14px 28px rgba(0, 0, 0, .22);
        }

        .twm-explore-content-outer-3 .twm-explore-content-3 .twm-upload-file .site-button:hover i {
            color: #37458c;
        }

        @media (max-width: 767px) {
            .twm-explore-content-outer-3 .twm-explore-content-3 {
                padding: 30px 24px !important;
            }
        }

        /* ============================================================
           Mobile "app home screen" touches - hero quick-action
           shortcuts, a sticky condensed search bar once the real one
           scrolls out of view, and tighter/full-bleed card sections.
           Desktop is untouched.
           ============================================================ */

        /* ---------- Hero quick-action shortcut grid (mobile only) ---------- */
        .twm-bnr-quick-actions {
            display: none;
        }

        @media (max-width: 991px) {
            .twm-bnr-quick-actions {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 10px;
                margin: 4px 0 22px;
            }

            .twm-bnr-quick-actions a {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 8px;
                padding: 14px 4px 12px;
                background: rgba(255, 255, 255, .08);
                border: 1px solid rgba(255, 255, 255, .16);
                border-radius: 16px;
                color: #fff;
                text-decoration: none;
                text-align: center;
                transition: background .2s ease, transform .2s ease;
            }

            .twm-bnr-quick-actions a:active {
                transform: scale(.96);
                background: rgba(255, 255, 255, .16);
            }

            .twm-bnr-quick-actions .twm-quick-action-icon {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 38px;
                height: 38px;
                border-radius: 12px;
                background: rgba(255, 255, 255, .14);
                font-size: 16px;
            }

            .twm-bnr-quick-actions span:last-child {
                font-size: 11px;
                font-weight: 600;
                line-height: 1.2;
            }
        }

        /* ---------- Hero search form - app-style mobile layout ----------
           The vendor markup hardcodes the Search button's column at
           col-4 (33% width) with no mobile override, so under 768px it
           sits cramped next to nothing while location/distance stack
           full-width above it. Give it the full-width, big-tap-target
           treatment a mobile app search bar would have. */
        @media (max-width: 767px) {
            .twm-bnr-search-bar .form-group.col-4 {
                flex: 0 0 100%;
                max-width: 100%;
                margin-top: 14px !important;
            }

            .twm-bnr-search-bar .site-button {
                font-size: 16px;
            }

            .twm-bnr-search-bar .form-group label {
                font-size: 12.5px;
            }

            .twm-bnr-search-bar .ls-inputicon-box .form-control,
            .twm-bnr-search-bar select.distance-select {
                height: 50px;
            }

            .twm-bnr-search-bar .row {
                row-gap: 4px;
            }
        }

        /* ---------- Full-bleed, tighter card sections (mobile only) ---------- */
        @media (max-width: 575px) {
            .twm-job-categories-area {
                padding-top: 36px !important;
                padding-bottom: 16px !important;
            }

            .twm-companies-wrap {
                padding-top: 28px !important;
            }

            .twm-featured-city-carousal-area,
            .twm-how-it-work-area,
            .twm-how-it-work-area2,
            .twm-testimonial-v-area {
                padding-top: 44px !important;
                padding-bottom: 44px !important;
            }

            .twm-jobs-grid-style1 {
                padding: 22px 18px 18px !important;
                border-radius: 14px !important;
            }

            .job-categories-block {
                padding: 22px 16px 18px !important;
            }

            .twm-w-process-steps3,
            .twm-w-process-steps-2 .twm-w-pro-top {
                border-radius: 14px !important;
            }
        }


/* ============================================================
   front.website.job-listing
   ============================================================ */
        .job-list-company-logo {
            width: 70px;
            height: 70px;
            background: #2db346;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            font-weight: 700;
            text-transform: uppercase;
            border-radius: 8px;
            margin-left: auto;
        }

        .ls-inputicon-box {
            position: relative;
        }

        .ls-inputicon-box i {
            position: absolute;
            left: 18px;
            top: 50%;
            transform: translateY(-50%);
            color: #37458c;
            font-size: 18px;
            z-index: 2;
        }

        .ls-inputicon-box .form-control {
            height: 45px;
            border: 1px solid #37458c;
            border-radius: 12px;
            padding-left: 50px;
        }

        .search-suggestions {
            display: none;
            position: absolute;
            top: calc(100% + 5px);
            left: 0;
            right: 0;
            background: #fff;
            border: 1px solid #e5e5e5;
            border-radius: 12px;
            z-index: 9999;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
        }

        .search-item {
            padding: 12px 15px;
            cursor: pointer;
            display: flex;
            align-items: center;
        }

        .search-item:hover {
            background: #f5f7ff;
        }

        .search-item i {
            width: 31px;
            margin-right: 12px;
            color: #fff;
            position: static !important;
            transform: none !important;
        }

        .input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),
        .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
        }

        /* Top search bar - sits below the page banner, replaces the old
           sidebar keyword/location fields as the primary way to re-search
           (matches how Indeed/Reed/Totaljobs structure a results page:
           search bar up top, sidebar reserved purely for filters). */
        .jl-top-search-wrap {
            background: #fff;
            border-bottom: 1px solid #eceff5;
            padding: 22px 0;
        }

        .jl-top-search-bar {
            display: flex;
            align-items: center;
            gap: 8px;
            background: #fff;
            border: 1.5px solid #e5e8f0;
            border-radius: 14px;
            box-shadow: 0 10px 30px rgba(20, 20, 43, .06);
            padding: 8px;
        }

        .jl-top-search-field {
            flex: 1;
            min-width: 0;
        }

        .jl-top-search-field .form-control {
            height: 46px;
            border: none !important;
            border-radius: 10px;
            background: #f7f8fc !important;
            box-shadow: none;
        }

        .jl-top-search-divider {
            width: 1px;
            align-self: stretch;
            background: #e5e8f0;
            margin: 6px 0;
        }

        .jl-top-search-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: #37458c;
            color: #fff;
            border: none;
            border-radius: 10px;
            padding: 0 28px;
            height: 46px;
            font-weight: 600;
            font-size: 15px;
            cursor: pointer;
            white-space: nowrap;
            transition: background .2s ease, transform .2s ease;
        }

        .jl-top-search-btn:hover {
            background: #2b3670;
            transform: translateY(-1px);
        }

        /* Wraps Search + (mobile-only) the Advanced Filter toggle so they
           can share one row on mobile instead of the toggle sitting on
           its own separate full-width row below. No effect on desktop -
           just a pass-through around the Search button. */
        .jl-top-search-actions {
            display: contents;
        }

        /* Wrap at the same 991px breakpoint the mobile filter toggle
           appears/disappears at (d-lg-none) - between 768-991px the old
           767px cutoff would've left 5 items (2 fields + divider + 2
           buttons) fighting for one unwrapped row. */
        @media (max-width: 991px) {
            .jl-top-search-bar {
                flex-wrap: wrap;
            }

            .jl-top-search-field {
                flex: 1 1 100%;
            }

            .jl-top-search-divider {
                display: none;
            }

            .jl-top-search-actions {
                display: flex;
                flex: 1 1 100%;
                gap: 8px;
            }

            /* Search shrinks to fit its own label - Advanced Filter (below)
               takes whatever room is left, so both share one row instead
               of the toggle sitting on its own separate full-width row. */
            .jl-top-search-btn {
                flex: 0 0 auto;
                padding: 0 18px;
            }
        }

        /* "Advanced Filter" is the full label everywhere by default -
           the short "Filter" alternative only shows at the narrowest
           widths below. */
        .jl-mobile-filter-text-short {
            display: none;
        }

        /* Smallest phones (iPhone SE / older Android, ~320-360px) - the
           Search + Advanced Filter row was overflowing its card by ~30px
           at 320px. Tighten padding/gap/font, then drop to the short
           "Filter" label if it's still tight. */
        @media (max-width: 360px) {
            .jl-top-search-bar {
                padding: 6px;
                gap: 6px;
            }

            .jl-top-search-actions {
                gap: 6px;
            }

            .jl-top-search-btn {
                padding: 0 14px;
                font-size: 14px;
            }

            .jl-mobile-filter-toggle {
                padding: 0 10px;
                font-size: 11.5px;
                gap: 6px;
            }

            .jl-mobile-filter-toggle-label {
                gap: 6px;
            }

            .jl-mobile-filter-text-full {
                display: none;
            }

            .jl-mobile-filter-text-short {
                display: inline;
            }
        }

        /* ---------- Mobile filter toggle + results-first ordering ----------
           The sidebar filter column stacks col-md-12 (full-width) below
           991px, same as the results column - in DOM order that buried
           every job listing under the entire filter form + ad banner.
           Below: results render first, the filter sidebar becomes a
           collapsed-by-default panel behind a toggle button, and the ad
           columns sink to the very end. Desktop (>=992px) is untouched -
           the sidebar stays permanently visible in its own column. */
        .jl-mobile-filter-toggle {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            flex: 1 1 auto;
            height: 46px;
            padding: 0 14px;
            background: #fff;
            border: 1px solid #37458c;
            border-radius: 10px;
            color: #37458c;
            font-weight: 600;
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: .2px;
            white-space: nowrap;
            cursor: pointer;
            transition: border-color .2s ease, box-shadow .2s ease;
        }

        .jl-mobile-filter-toggle:hover,
        .jl-mobile-filter-toggle[aria-expanded="true"] {
            box-shadow: 0 4px 14px rgba(55, 69, 140, .08);
        }

        .jl-mobile-filter-toggle-label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .jl-mobile-filter-badge {
            display: none;
            align-items: center;
            justify-content: center;
            min-width: 18px;
            height: 18px;
            padding: 0 5px;
            border-radius: 999px;
            background: #37458c;
            color: #fff;
            font-size: 10.5px;
            font-weight: 700;
            text-transform: none;
            letter-spacing: normal;
            flex-shrink: 0;
        }

        .jl-mobile-filter-badge.has-selection {
            display: inline-flex;
        }

        .jl-mobile-filter-chevron {
            font-size: 13px;
            transition: transform .2s ease;
        }

        .jl-mobile-filter-toggle[aria-expanded="true"] .jl-mobile-filter-chevron {
            transform: rotate(180deg);
        }

        .jl-mobile-filter-apply {
            width: 100%;
            margin-top: 6px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        @media (min-width: 992px) {
            /* Bootstrap's .collapse hides this element (display:none) until
               JS adds .show - force it permanently visible on desktop
               regardless of that state, since only the mobile toggle
               button (itself hidden at this width via d-lg-none) should
               ever control it. */
            .jl-filter-collapse {
                display: block !important;
                height: auto !important;
                visibility: visible !important;
            }
        }

        @media (max-width: 991px) {
            .jl-top-search-wrap {
                padding: 16px 0;
            }

            #jobResultsColumn {
                order: 2;
            }

            .jl-filter-collapse {
                order: 1;
                margin-bottom: 20px;
            }

            .rightSidebar.google-ads {
                order: 3;
            }

            .p-t70 {
                padding-top: 25px;
            }
        }

        /* Sidebar filter panel - modernized to match the rest of the site's
           search-bar treatment (clean select, tidy card) instead of the
           vendor's flat grey box + plain <h3>s. */
        .jl-sidebar-search {
            background: #fff !important;
            border: 1px solid #eceff5;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(20, 20, 43, .05);
        }

        .jl-sidebar-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 15px;
            font-weight: 700;
            color: #37458c;
            text-transform: uppercase;
            letter-spacing: .3px;
            margin: 0 0 20px;
            padding-bottom: 14px;
            border-bottom: 1px solid #eceff5;
        }

        .jl-sidebar-heading i {
            font-size: 14px;
            margin-right: 8px;
        }

        .jl-clear-all-filters {
            border: none;
            background: none;
            padding: 0;
            font-size: 12.5px;
            font-weight: 600;
            color: #8890b5;
            text-transform: none;
            letter-spacing: normal;
            cursor: pointer;
            transition: color .2s ease;
        }

        .jl-clear-all-filters:hover {
            color: #b42318;
        }

        .jl-sidebar-search .form-group label {
            display: block;
            font-size: 12.5px;
            font-weight: 600;
            color: #37458c;
            text-transform: uppercase;
            letter-spacing: .3px;
            margin-bottom: 8px;
        }

        .job-results-cv-tip {
            padding: 14px 0;
            border-top: 1px solid #e5e8f0;
            border-bottom: 1px solid #e5e8f0;
            font-size: 14px;
            color: #4a4f5c;
        }

        .job-results-cv-tip a {
            color: #1a73c7;
            font-weight: 600;
            text-decoration: underline;
        }

        .job-results-cv-tip a:hover {
            color: #37458c;
        }

        .job-alert-banner {
            background: #eef1fb;
            border-radius: 16px;
            padding: 20px 24px;
        }

        .job-alert-banner-row {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
        }

        .job-alert-banner-text {
            margin: 0;
            font-size: 17px;
            color: #2c2f3a;
            line-height: 1.4;
        }

        .job-alert-banner-text strong {
            color: #16192b;
        }

        .job-alert-banner-terms {
            margin-top: 14px;
            font-size: 13px;
            color: #6b7188;
        }

        .job-alert-banner-terms a {
            color: #1a73c7;
            text-decoration: underline;
            font-weight: 600;
        }

        .job-alert-toggle {
            position: relative;
            display: inline-flex;
            align-items: center;
            width: 52px;
            height: 30px;
            flex-shrink: 0;
            cursor: pointer;
        }

        .job-alert-toggle input {
            position: absolute;
            opacity: 0;
            width: 100%;
            height: 100%;
            margin: 0;
            cursor: pointer;
        }

        .job-alert-toggle-slider {
            position: absolute;
            inset: 0;
            background: #fff;
            border: 1px solid #d0d5dd;
            border-radius: 30px;
            transition: background .2s ease, border-color .2s ease;
        }

        .job-alert-toggle-slider::before {
            content: '';
            position: absolute;
            width: 22px;
            height: 22px;
            left: 3px;
            top: 3px;
            border-radius: 50%;
            background: #6b7188;
            transition: transform .2s ease, background .2s ease;
        }

        .job-alert-toggle input:checked + .job-alert-toggle-slider {
            background: #37458c;
            border-color: #37458c;
        }

        .job-alert-toggle input:checked + .job-alert-toggle-slider::before {
            transform: translateX(22px);
            background: #fff;
        }

        @media (max-width: 575px) {
            .job-alert-banner-row {
                flex-direction: column;
            }
        }
        .filter-item {
            border-bottom: 1px solid #ececec;
            padding: 15px 0;
        }

        .filter-title {
            width: 100%;
            background: none;
            border: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0;
            cursor: pointer;
            font-size: 13px;
            line-height: 16px;
            font-weight: 600;
            color: #37458c;
            text-transform: uppercase;
        }

        .filter-title i {
            transition: .3s;
            font-size: 13px;
            color: #3b478d;
        }

        .filter-title:not(.collapsed) i {
            transform: rotate(180deg);
        }

        .filter-body {
            padding-top: 15px;
        }

        .filter-option {
            margin-bottom: 4px;
        }

        .filter-option:last-child {
            margin-bottom: 0;
        }

        .filter-option span {
            padding-left: 30px;
            color: #37458c;
            font-size: 14px;
        }

        .filter-option .form-check {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 7px 8px;
            margin: 0;
            border-radius: 8px;
            cursor: pointer;
            transition: background .15s ease;
        }

        .filter-option .form-check:hover {
            background: #f4f6fb;
        }

        .filter-option .form-check-input {
            flex-shrink: 0;
            float: none;
            position: static;
            width: 17px;
            height: 17px;
            margin: 1px 0 0;
            border: 1.5px solid #ccd2e3;
            border-radius: 5px;
            cursor: pointer;
        }

        .filter-option .form-check-input:checked {
            background-color: #37458c;
            border-color: #37458c;
        }

        .filter-option .form-check-input:focus {
            border-color: #37458c;
            box-shadow: 0 0 0 .2rem rgba(55, 69, 140, .15);
        }

        .filter-option .form-check-label {
            padding-left: 0;
            margin: 0;
            font-size: 13.5px;
            line-height: 1.35;
            color: #2c2f3a;
            white-space: normal;
            word-break: break-word;
            cursor: pointer;
        }

        /* Scrollable filter body */
        .filter-scroll {
            max-height: 220px;
            /* Change height as needed */
            overflow-y: auto;
            overflow-x: hidden;
            padding-right: 6px;
        }

        /* Chrome, Edge, Safari */
        .filter-scroll::-webkit-scrollbar {
            width: 5px;
        }

        .filter-scroll::-webkit-scrollbar-track {
            background: #f5f5f5;
            border-radius: 10px;
        }

        .filter-scroll::-webkit-scrollbar-thumb {
            background: #bdbdbd;
            border-radius: 10px;
        }

        .filter-scroll::-webkit-scrollbar-thumb:hover {
            background: #999;
        }

        /* Firefox */
        .filter-scroll {
            scrollbar-width: thin;
            scrollbar-color: #bdbdbd #f5f5f5;
        }

        .filter-count {
            color: #37458c;
            font-weight: 700;
            margin-left: 4px;
        }

        .active-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
        }

        .active-filter-chip {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            border: 1px solid #d7d7d7;
            background: #fff;
            color: #333;
            border-radius: 4px;
            padding: 8px 12px;
            font-size: 14px;
            line-height: 1.2;
            cursor: pointer;
        }

        .active-filter-chip i {
            color: #666;
            font-size: 12px;
        }

        .clear-all-filters {
            color: #1967d2;
            text-decoration: underline;
            font-size: 14px;
            margin-left: 4px;
        }

        .job-results-wrap.is-loading {
            opacity: 0.55;
            pointer-events: none;
        }

        .job-results-error {
            color: #b42318;
            font-size: 14px;
            margin-bottom: 12px;
        }

        .border-2 {
            border: 2px solid;
        }

        .border-warning {
            border-color: #ff4d6d !important;
        }

        .boost-package-card {
            position: relative;
            cursor: pointer;
            border: 2px solid #ececec;
            border-radius: 16px;
            overflow: hidden;
            transition: .35s ease;
            background: #fff;
        }


        .boost-package-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 15px 35px rgba(25, 103, 210, .12);
        }

        .popular-package {
            border: 2px solid #1967d2;
            box-shadow: 0 18px 40px rgba(25, 103, 210, .18);
        }

        /* Blue Glow */
        .popular-package::before {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: 16px;
            padding: 2px;
            background: linear-gradient(135deg, #1967d2, #4b7fff, #1967d2);
            -webkit-mask:
                linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
        }

        /* Selected Package */
        input[name=boost_package]:checked+.pricing-table-2 {
            border: 2px solid #1967d2;
            box-shadow: 0 15px 35px rgba(25, 103, 210, .18);
        }


        input[name=boost_package]:checked+.pricing-table-2 .site-button {

            background: #1967d2;
            color: #fff;
        }

        label.boost-label {
            display: block;
            cursor: pointer;
        }

        .ck-editor__editable_inline {
            min-height: 300px;
            max-height: 300px;
            height: 300px;
        }

        .boost-package input {
            display: none;
        }

        .boost-card {

            border: 2px solid #ececec;

            border-radius: 14px;

            padding: 35px;

            cursor: pointer;

            transition: .3s;

            background: #fff;

            position: relative;

            height: 100%;

        }

        .boost-package input:checked+.boost-card {

            border-color: #1967d2;

            box-shadow: 0 10px 35px rgba(25, 103, 210, .25);

            transform: translateY(-6px);

        }

        /* Popular Badge */
        .popular-badge {
            position: absolute;
            top: -17px;
            left: 50%;
            transform: translateX(10%);
            z-index: 999;
            background: #37458c;
            color: #fff;
            padding: 5px 5px;
            border-radius: 50px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .5px;
            box-shadow: 0 8px 20px rgba(255, 90, 95, .35);
        }

        /* Button */
        input[name=boost_package]:checked+.pricing-table-2 .site-button {
            background: #1967d2;
            color: #fff;
        }

        .boost-card ul li {

            margin-bottom: 14px;

            font-size: 15px;

        }

        .post-option-card {

            background: #fff;

            border: 2px solid linear-gradient(90deg, #ff8a00, #ff3d68);

            border-radius: 16px;

            padding: 22px;

            position: relative;

            transition: .3s;

            height: 100%;

        }

        .post-option-card:hover {

            transform: translateY(-4px);

            box-shadow: 0 10px 30px rgba(0, 0, 0, .08);

        }

        .post-option-card.active {

            border: 2px solid #ff4d6d;

            background: #fffdf4;

        }

        .package-header {

            font-size: 14px;

            font-weight: 700;

            color: #0d6efd;

            letter-spacing: 1px;

        }

        .package-header i {

            margin-right: 8px;

        }

        .package-list {

            margin: 20px 0;

            padding-left: 18px;

        }

        .package-list li {

            margin-bottom: 10px;

        }

        .recommended-badge {

            position: absolute;

            top: -10px;

            right: 15px;


            background: linear-gradient(90deg, #ff9800, #ff4d6d);

            color: #fff;

            padding: 6px 14px;

            font-size: 12px;

            border-radius: 30px;

            font-weight: 700;

        }

        .boost-ribbon {

            position: absolute;

            top: -18px;

            right: 12px;

            background: linear-gradient(90deg, #ff9800, #ff4d6d);

            color: #fff;

            padding: 6px 16px;

            font-size: 11px;

            font-weight: 700;

            border-radius: 30px;

            z-index: 999;

            box-shadow: 0 5px 12px rgba(0, 0, 0, .2);

        }

        .boost-section {

            border-radius: 20px;

            overflow: hidden;

            background: #fff;

        }

        .boost-label {

            display: inline-block;

            background: linear-gradient(90deg, #ff9800, #ff4d6d);

            color: #fff;

            padding: 8px 22px;

            border-radius: 30px;

            font-size: 13px;

            font-weight: 600;

        }

        .boost-box {

            background: #fff;

            border: 1px solid #ececec;

            border-radius: 16px;

            padding: 25px 15px;

            text-align: center;

            transition: .3s;

            height: 100%;

        }

        .boost-box:hover {

            transform: translateY(-6px);

            box-shadow: 0 15px 35px rgba(0, 0, 0, .08);

            border-color: #ff4d6d;

        }

        .boost-icon {

            width: 70px;

            height: 70px;

            margin: auto auto 20px;

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            color: #fff;

            font-size: 28px;

        }

        .boost-box h3 {

            font-weight: 700;

            color: #0d6efd;

            margin-bottom: 5px;

        }

        .boost-box h6 {

            font-weight: 600;

            margin-bottom: 8px;

        }

        .boost-box small {

            color: #777;

            line-height: 22px;

            display: block;

        }

        .boost-bottom {

            background: #f8fbff;

            border: 1px solid #e7eef8;

            border-radius: 18px;

            padding: 30px;

        }

        .boost-bottom p {

            margin-bottom: 12px;

            font-size: 15px;

        }

        .boost-stat {

            background: linear-gradient(135deg, #ff9800, #ff4d6d);

            border-radius: 18px;

            padding: 30px;

            text-align: center;

            color: #fff;

            box-shadow: 0 12px 30px rgba(255, 152, 0, .25);

        }

        .boost-stat h1 {

            font-size: 56px;

            font-weight: 700;

            margin-bottom: 5px;

            color: #fff;

        }

        .boost-stat span {

            font-size: 18px;

            font-weight: 600;

        }

        .tox.tox-tinymce {
            min-height: 450px !important;
        }

        .tox-tinymce {
            border: 1px solid #37458c !important;
            border-radius: 10px;
        }

        .boost-label {
            display: inline-flex;
            align-items: center;
            background: linear-gradient(135deg, #ff9800, #ff5722);
            color: #fff;
            font-size: 12px;
            font-weight: 600;
            padding: 5px 10px;
            border-radius: 20px;
            box-shadow: 0 2px 8px rgba(255, 87, 34, 0.3);
            top: -8%;
            right: 2%;
            z-index: 10;
        }

        .boost-label i {
            margin-right: 5px;
        }

        /* .....Wishlist.... */

        .twm-jobs-grid-style1 {
            position: relative;
        }

        .wishlist-btn {
            position: absolute;
            right: 18px;
            bottom: 62px;
            width: 32px;
            height: 32px;
            border: 1px solid #e5e5e5;
            background: #fff;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #37458c;
            font-size: 12px;
            cursor: pointer;
            transition: all .3s;
            z-index: 2;
            box-shadow: 0 3px 8px rgba(0, 0, 0, .08);
        }

        .wishlist-btn:hover {
            background: #37458c;
            color: #fff;
            border-color: #37458c;
        }

        .wishlist-btn.active {
            background: #37458c;
            color: #fff;
            border-color: #37458c;
        }

        @media (max-width: 991px) {
            .wishlist-btn {
                bottom: 70px;
            }
        }

        /* The "posted X ago" label that used to share this row with the
           buttons is commented out in job-results.blade.php, so the
           space-between rule from style.css has nothing to push the
           buttons away from -- pin them to the end instead. */
        .twm-jobs-grid-style1 .twm-right-content {
            justify-content: flex-end;
        }

        /* Shown instead of the Apply Now button once a logged-in candidate
           has already applied to that job, so they can't re-apply from the
           listing page. */
        .job-applied-badge {
            background: #e8f7ee !important;
            color: #1f9d55 !important;
            border-color: #e8f7ee !important;
            cursor: default;
            pointer-events: none;
        }
        .twm-saved-jobs-view .modal-dialog {
            max-width: 500px;
        }


        .modal-title {
            font-size: 34px;
            margin-bottom: 15px;
        }