@charset "utf-8";
/* CSS Document */

body {
    line-height: 1.6;
    margin: 0;
    text-align: left;
    overflow-x: hidden;
    font-size: 1rem;
}

.bg-dark {
    /* background: #1967d2 !important; */
    /* background: linear-gradient(180deg, rgba(2, 95, 153, 1) 0%, rgba(0, 105, 168, 1) 46%, rgba(0, 105, 168, 1) 100%); */
    background: linear-gradient(135deg, #0f1f3d 0%, #2a5298 100%);
}

.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 1rem;
    padding-left: 1rem;
}

.theme1-featured-logo {
    width: 100%;
    height: 110px;
    object-fit: contain;
    padding: 10px;
    border-color: #f1f1f1;
    background: #f1f1f1;
    border-radius: 12px;
}

.profile {
    width: 100px;
    object-fit: contain;
    object-position: left;
    border-radius: 3px;
}

.nav-item:nth-child(6) .nav-link {
    border: 2px solid #2b6bed;
    border-radius: 12px;
}
/* .navbar-light .navbar-nav .nav-link {
    color: #6B7280!important;
} */

img.featured-logo {
    height: 48px;
    width: 48px;
    object-fit: contain;
    /* border-radius: 50px; */
}


.white-bg {
    background-color: #fff;
    /*padding:50px 0;*/
}

img.img-circle {
    width: 114px;
    height: 114px;
    object-fit: cover;
}

ul.categories {
    list-style-type: none;
}

ul.categories li a {
    line-height: 45px;
    font-weight: 400;
    padding: 8px 15px;
    border-radius: 5px;
}

.img-circle-custom {
    border-radius: 50% !important;
    background-color: #fff;
    padding: 5px;
    -webkit-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0 0 rgba(0, 0, 0, 0.02);
    -ms-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0 0 rgba(0, 0, 0, 0.02);
    -o-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0 0 rgba(0, 0, 0, 0.02);
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0 0 rgba(0, 0, 0, 0.02);
}



/* Carousel base class */
.carousel {
    margin-bottom: 5rem;
    z-index: -100000;
    margin-top: -16px;
}

/* Since positioning the image, we need to help out the caption */
.carousel-caption {
    bottom: 3rem;
    z-index: 10;
}

.carousel-caption h5 {
    font-size: 32px;
}

/* Declare heights because of positioning of img element */
.carousel-item {
    height: 20rem;
}

.carousel-item>img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 32rem;
    object-fit: cover;
}

.carousel-caption {
    right: 20%;
    /*left: 20%;*/
    top: 78px;
    /* position: relative; */
    padding-bottom: 30px;
    color: #283a50;
    text-align: left;
}

.carousel-indicators {
    bottom: 150px;
    display: none;
    z-index: 11;
}

.no-border {
    border-color: #fff;
}

.border-left {
    border-left: 1px solid #ccc;
}

.card-title-theme1 {
    color: #111827;
    font-size: 22px !important;
}

.bg-blue-900 {
    background: #0f1f3d;
}

.bg-blue-200-home {
    background-color: #ffffffb3;
    border-radius: 1rem;
    margin-bottom: 1.5rem !important;
}

.fw-900-search {
    font-weight: 800;
    line-height: 86px;
}

.search-padding {
    padding: 0.75rem;
}

.premium-gradient-bg p strong {
    color: #fff;
}

.premium-gradient-bg div a,
.copyright {
    color: #fff !important;
    line-height: 32px;
    opacity: 0.8;
    font-size: 0.9em;
    transition: opacity 0.2s ease;
}

.premium-gradient-bg div a:hover {
    opacity: 1;
    text-decoration: underline !important;
}

.slider-bg-theme {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%2300c2cb' stroke-width='0.5' stroke-opacity='0.05'%3E%3Cpath d='M0 0 H200 M0 20 H200 M0 40 H200 M0 60 H200 M0 80 H200 M0 100 H200 M0 120 H200 M0 140 H200 M0 160 H200 M0 180 H200 M0 200 H200'/%3E%3Cpath d='M0 0 V200 M20 0 V200 M40 0 V200 M60 0 V200 M80 0 V200 M100 0 V200 M120 0 V200 M140 0 V200 M160 0 V200 M180 0 V200 M200 0 V200'/%3E%3Ccircle cx='40' cy='80' r='1.5' fill='%2300c2cb' fill-opacity='0.1'/%3E%3Ccircle cx='120' cy='140' r='1.5' fill='%2300c2cb' fill-opacity='0.1'/%3E%3Ccircle cx='160' cy='60' r='1.5' fill='%2300c2cb' fill-opacity='0.1'/%3E%3C/g%3E%3C/svg%3E") repeat,
        linear-gradient(180deg, #101928 0%, #14253b 45%, #1a365d 100%);
    background-size: 200px 200px, cover;
    z-index: 1;
}

.filters-bar {
    background: #fff;
    margin: -29px 0 0 0;
    padding-top: 10px;
    box-shadow: 0 5px 10px -5px #ccc;
}

.active-tab {
    color: #fff !important;
    border: 2px solid #1a73e8;
    border-radius: 5px;
    background: #1a73e8;
}

.active-tab:hover {
    color: #fff !important;
    border: 2px solid #174ea6;
    border-radius: 5px;
    background: #174ea6;
}

h3.job-title-theme1 a {
    font-size: 17px;
    font-weight: 500;
}


.navbar-light .navbar-toggler {
    color: #fff;
    border-color: #23468c;
    background: #23468c;
    border-radius: 50%;
    min-height: 40px;
}

/* RESPONSIVE CSS
-------------------------------------------------- */



/* .btn {
	font-size: .875rem;
} */
/* .border-bottom {
    border-bottom: 1px solid #1967d2!important;
} */

/* Bootstrap 5 */



p {
    font-size: 1rem;
}

ul {
    list-style-type: disc;
    margin-bottom: 20px;
    margin-left: 20px;
}

ul.num {
    list-style-type: decimal;
    margin-bottom: 20px;
    margin-left: 20px;
}

ul li {
    font-size: 1rem;
    font-weight: 500;
}

.main-heading {
    margin-bottom: 12px;
}

.resume-heading {
    margin-bottom: 12px;
    font-size: 1.4rem;
}

a {
    text-decoration: none;
    color: #202124 !important;
    line-height: normal;
}


label {
    font-size: 0.9rem;
    margin: 0;
    color: #000;
}

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

/* .form-control {
    display: block;
    width: 100%;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    transition: all .2s ease-in-out;
} */
.btn-100 {
    width: 100%;
}

.view-more-link {
    color: #151c28;
    border: 0px;
    background: transparent;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-radius: .75rem;
}

.border-login {
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(0.25turn, rgba(255, 249, 34), rgba(255, 0, 128), rgba(56, 2, 155, 0));
    border-image-slice: 1;
    display: table;
    margin: 0 auto 15px auto;
    width: 117px;
}

.rounded-12 {
    border-radius: 12px;
}

.nav-link {
    color: #fff !important;
    font-weight: 500;
    opacity: 0.8;
}

.social-signup {
    text-align: right;
    margin: -25px 0 0 0;
    position: relative;
    font-size: 16px;
}

.label-text {
    padding: 0;
    margin-bottom: 0.5rem;
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
}


.input-group-text {
    line-height: 1.9;
    border-radius: 0;
}

.mini-profile-img-dashboard img {
    width: 119px;
    height: 119px;
    object-fit: contain;
    padding: 0;
    box-shadow: 0 0.1rem 0.1rem rgb(0 0 0 / 10%);
    border-radius: 5px;
}

.jobseeker-rate {
    float: right;
    position: absolute;
    top: 20px;
    right: 0px;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px 20px;
    max-width: 215px;
}

/* Resume Steps */
/* Global CSS, you probably don't need that */

.clearfix:after {
    clear: both;
    content: "";
    display: block;
    height: 0;
}

.pull-right {
    float: right;
}

.step a,
a:active {
    color: #0d172c !important;
    text-decoration: none;
}

.step a:hover {
    color: #999 !important;
}




.resume-name {
    position: relative;
    float: right;
    margin-top: -40px;
}

.card-body-new {
    padding: 0 !important;
}

.mb-12 {
    margin-bottom: 12px;
}

.btn-font {
    font-size: 16px;
}



.mini-profile-img img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 100px;
}

.mini-profile-img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 100px !important;
}

.list-hover:hover {
    background-color: #e6ecf4;
}

a.list-group-item-primary {
    color: #000 !important;
    background: rgb(255, 255, 255);
    background: linear-gradient(180deg, rgb(247 247 247) 0%, rgb(231 231 231) 100%);
    border: 1px solid #e9e9e9;
}

.list-group-item-action {
    width: auto;
}

.danger-bg {
    color: #842029;
    background: #f8d7da;
    border-color: #f5c2c7;
    border-radius: 5px;
    padding: 10px 25px;
}

.required {
    border-left: 2px solid #fb6c23;
}

.form-check2 {
    padding-left: 0.5em;
    padding-right: 1em;
}

.forum-icon-bg {
    border-radius: 3px;
    font-size: 20px !important;
    color: #0c5460;
    background-color: #d1ecf1;
    border: 1px solid #bee5eb;
}

.video-img {
    width: 400px;

}

img.logo-dashboard {
    width: 130px !important;
    height: 130px !important;
    object-fit: fill;
}

.border-bottom-0 {
    border-bottom: 0px !important;
}

.box_job_type {
    border-radius: 3px;
    width: 16px;
    height: 16px;
    float: left;
    margin: 4px 0 0 0;
}


.text-muted {
    overflow-wrap: anywhere;
    color: #676f7e;
}

.text-muted a {
    color: #686781 !important;
}

.text-muted a:hover {
    color: #0858d0 !important;

}

.form-home {
    border-color: #fff;
    border-radius: 0.75em !important;
    min-height: 56px;
    background-color: #fff;
    padding-top: .75rem;
    padding-bottom: .75rem;
    padding-left: 46px !important;
}

/* Featured Job Row */

.featured-job-tag {
    background: #e1e5ed;
    border: 1px solid #e1e5ed;
}

.footer {
    margin-top: 32px;
    background-color: #142952;
}

.footer-bg {
    background-color: #142952;
}

.nav-link:hover {
    color: #fff !important;
    text-decoration: underline;
}

.nav-item .nav-link-custom {
    display: block;
    padding: .7rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: #ffffff !important;
    text-decoration: none;
    background: #2b6bed;
    border-radius: .75em;
    border: 0;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.nav-link-custom {
    margin-left: 15px;
}

/*.footer-logo, .navbar-brand>img {
    filter: brightness(0) invert(1);
}*/


@media only screen and (max-width: 900px) {
    .slider-bg-theme1 {
        padding: 25px 0 20px 0;
    }
}

@media only screen and (max-width: 321px) {
    h1.home-heading {
        font-size: 30px !important;
    }
}




@media screen and (max-width: 479px) {
    .nav-link {
        color: #000 !important;
    }

    .slider-bg-theme {
        max-height: fit-content;
    }
}



@media screen and (max-width: 479px) {
    .m-font-size1 {
        font-size: 22px !important;
        margin: 0 !important;
    }
}

@media screen and (max-width: 479px) {
    .mpt-20 {
        padding-top: 0px !important;
    }
}

@media screen and (max-width: 479px) {
    .mmt-0 {
        margin-top: 0px !important;
    }
}

@media screen and (max-width: 479px) {
    .mmt-15 {
        margin-top: 15px !important;
    }
}

.mf-size26 {
    font-size: 42px !important;
}

/* --- UI POLISH OVERRIDES FROM text.htm --- */
html {
    scroll-behavior: smooth;
}

.posted {
    color: #112345 !important;
    font-size: 0.875em;
}

.footer {
    margin-top: 0px;
}

/* Premium Card Lifting Effect */
.card-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: 1px solid #e2e8f0 !important;
}

.card-hover:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.12) !important;
    border-color: #cbd5e1 !important;
}

/* Refined Headings */
h1,
h2,
h3 {
    letter-spacing: -0.02em;
}

/* Category Icon Animation */
.cardheader svg,
.cardheader img {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card-hover:hover .cardheader svg,
.card-hover:hover .cardheader img {
    transform: scale(1.15) rotate(3deg);
}

/* Partner Logos Grayscale Polish */
.mobile-featured-recruiter img {

    transition: all 0.4s ease;
    max-width: 120px;
    height: auto;
}

.mobile-featured-recruiter:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

/* Button Micro-interactions */
.btn-primary-home,
.btn-warning,
.load-more-btn-theme2 {
    transition: all 0.2s ease !important;
}

.btn-primary-home:active,
.btn-warning:active {
    transform: scale(0.96) !important;
}


.alertInput {
    border-radius: 100px !important;
}

.alertButton {
    border-radius: 0.375rem;
    border: 1px solid #2b6bed;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    background: #2b6bed;
}

.btn-warning,
.btn-warning:hover {
    border-radius: 0.75em !important;
    background: #2b6bed;
    border-color: #2b6bed;
    min-height: 56px;
    width: 170px;
    color: #ffffff !important;
}

/* Bootstrap 4 text input with search icon */

.has-search .form-control,
.form-select {
    /* padding-left: 2.375rem; */
}
.cta-container {
  background: 
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(135deg, #101928 0%, #080c14 100%);
  background-size: 40px 40px, 40px 40px, 100% 100%;
}
.bg-blue-50-home1 {
    background-color: #f6f7f9;
    padding: 6em 0;
}

.bg-blue-50-home2 {
    background-color: #f2f3f6;
    padding: 6em 0;
}

.has-search .form-control-feedback {
    position: absolute;
    z-index: 2;
    display: block;
    width: 2.375rem;
    pointer-events: none;
    color: #676f7e;
    margin: 19px 0 0 7px;
}

.article_title {
    color: #000 !important;
    font-weight: 600;
    font-size: 1.2rem;
}

.btn-primary-home {
    color: #ffffff !important;
    align-items: center;
    background: linear-gradient(135deg, #2b6bed 0%, #2b6bed 100%);
    border: 2px solid #2b6bed;
    border-radius: 0.75rem;
    display: inline-flex;
    justify-content: center;
    text-decoration: none;
    padding: 0 2.5rem;
    font-size: 1.125rem;
    text-rendering: optimizeLegibility;
    transition: background-color 0.2s, box-shadow 0.2s, color 0.2s;
    font-weight: 600;
    min-height: 3.5rem;
    line-height: 1.75rem;
}

.btn-primary-home:hover {
    text-decoration: none;
    color: #ffffff !important;
    background: linear-gradient(135deg, #1d4ed8 0%, #1d4ed8 100%);
    border: 1px solid #1d4ed8;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn-primary-home-sm {
    color: #ffffff !important;
    align-items: center;
    background: linear-gradient(135deg, #2b6bed 0%, #2b6bed 100%);
    border: 2px solid #2b6bed;
    border-radius: 0.75rem;
    display: inline-flex;
    justify-content: center;
    text-decoration: none;
    padding: 0 2.5rem;
    font-size: 1.125rem;
    text-rendering: optimizeLegibility;
    transition: background-color 0.2s, box-shadow 0.2s, color 0.2s;
    font-weight: 600;
    min-height: 3rem;
    line-height: 1.75rem;
}

.btn-primary-home-sm:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, #2b6bed 0%, #2b6bed 100%);
    border: 1px solid #2b6bed;
    text-decoration: none;
}

.btn-outline-secondary-home {
    color: #fff !important;
    align-items: center;
    background: linear-gradient(135deg, #4a525d 0%, #4a525d 100%);
    border: 2px solid #83888f;
    border-radius: 0.75rem;
    display: inline-flex;
    justify-content: center;
    text-decoration: none;
    padding: 0 2.5rem;
    font-size: 1.125rem;
    text-rendering: optimizeLegibility;
    transition: background-color 0.2s, box-shadow 0.2s, color 0.2s;
    font-weight: 600;
    min-height: 3.5rem;
    line-height: 1.75rem;
}

.btn-outline-secondary-home:hover {
    color: #fff !important;
    background: linear-gradient(135deg, #6b7583 0%, #6b7583 100%);
    border: 2px solid #83888f;
    text-decoration: none;
}
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1400px;
    }
.btn-outline-success,
.btn-outline-success:hover {
    background: #dbe5f5 !important;
    color: #1f3e75 !important;
    border: 1px solid #1f3e75 !important;
    font-weight: 600;
    border-radius: 5px;
    line-height: 25px;
    min-height: 36px;
}

.text-dark-title {

    font-weight: 600;
}

.job-tags {
    background: #f3f4f6;
    padding: 0.25rem 0.625rem;
    border-radius: .75rem;
}

.job-tags2 {
    background: #f3f4f6;
    padding: 0.25rem 0.625rem;
    border-radius: .75rem;
}

hr {
    margin-top: 20px;
    margin-bottom: 20px;
    color: #7a8397;
}

.posted.job-tags2 {
    position: relative;
    display: inline-block;
}

/* Hide ONLY the original $ symbol */
.posted.job-tags2::first-letter {
    color: transparent;
}

/* Add new colored $ */
.posted.job-tags2::before {
    content: "$";
    color: #2563eb;
    position: absolute;
    left: 7px;
}

.text-secondary {
    color: #2563eb !important;
}

.home-about-bg {
    position: relative;
    overflow: hidden;
    background-color: #ffffff;
    padding: 6em 0;
}

.job-search-form {
    padding: 30px;
    border-radius: 18px;
    background: linear-gradient(135deg, #101928, #1a2538, #101928);
}

.premium-gradient-bg {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0b1628, #1a3b70, #0b1628);
    background-size: 300% 300%;
    animation: gradientShift 25s ease infinite;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Geometric particles for the CTA section */
.cta-decor {
    position: absolute;
    pointer-events: none;
    opacity: 0.1;
    z-index: 0;
}

.cta-shape-1 {
    top: -10%;
    left: -5%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #2b6bed 0%, transparent 70%);
    animation: pulseCTA 8s infinite alternate;
}

.cta-shape-2 {
    bottom: -15%;
    right: -5%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #3b82f6 0%, transparent 70%);
    animation: pulseCTA 10s infinite alternate-reverse;
}

@keyframes pulseCTA {
    0% {
        transform: scale(1) translate(0, 0);
        opacity: 0.05;
    }

    100% {
        transform: scale(1.2) translate(20px, 20px);
        opacity: 0.15;
    }
}

.cta-content-z {
    position: relative;
    z-index: 2;
}

.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    border-top-left-radius: 0.75em !important;
    border-bottom-left-radius: 0.75em !important;
}

.alertInput::placeholder {
    color: #ffffff;
    opacity: 0.8;
    /* important for Firefox */
}

/* Safari / Chrome / Edge */
.alertInput::-webkit-input-placeholder {
    color: #ffffff;
    opacity: 0.8;
}

/* Firefox */
.alertInput::-moz-placeholder {
    color: #ffffff;
    opacity: 0.8;
}

/* Internet Explorer (legacy) */
.alertInput:-ms-input-placeholder {
    color: #ffffff;
    opacity: 0.8;
}

.saved-tags {
    background: #273756;
    border-color: #3b4967;
    padding: 4px 12px;
    opacity: 0.7;
    border-width: 2px;
}

.saved-tags:hover {
    color: #fff !important;
    background: #273756;
    border-color: #3b4967;
    padding: 4px 12px;
    opacity: 1;
}

.hero-badge {
    background: #2b3e63;
    border: 1px solid #556482;
    border-radius: 5em !important;
    color: #FFF;
    opacity: 0.8;
    font-weight: 600;
    padding: 6px 15px;
    font-size: 0.875em;
    max-width: fit-content;
    margin: 0 auto 30px auto;
}

.hero-subtitle {
    font-size: 20px;
    opacity: 0.6;
    max-width: 650px;
    margin: 0 auto;
}

.lastest-jobs {
    margin-bottom: 1.5rem;
}

/* Mobile CSS */
@media screen and (max-width: 479px) {
    .m-none {
        display: none !important;
    }

    .hero-badge {
        margin: 0 auto 15px auto;
    }

    .hero-subtitle {
        font-size: 16px;
    }

    .btn-primary-home,
    .btn-outline-secondary-home {
        width: -webkit-fill-available;
    }

    .lastest-jobs:last-child {
        margin-bottom: 0 !important;
    }

    .home-about-bg {
        padding: 4em 0;
    }

    .view-all-link {
        display: none !important;
    }

    .slider-bg-theme {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .bg-blue-50-home1,
    .bg-blue-50-home2 {
        padding: 2em 0;
    }

    .bg-blue-200-home {
        margin-bottom: 1.5rem !important;
    }

    .fw-900-search {
        font-weight: 800;
        line-height: 48px;
        font-size: 36px;
    }

    .mmt-4 {
        margin-top: 1.5rem !important;
    }

    .mmy-4 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .mmb-4 {
        margin-bottom: 1.5rem !important;
    }

    .btn-outline-secondary {
        width: 100%;
    }

    .mf-size26 {
        font-size: 26px !important;
    }

    .alertInput {
        width: 100% !important;
        margin-right: 0px !important;
        margin-bottom: 15px;
    }

    .alertButton {
        min-width: -webkit-fill-available;
        text-align: center;
        display: block !important;
    }

    .py-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
}

/* Skeleton Loading Animation */
@keyframes loading-skeleton-pulse {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

#skeleton-loader-theme2 {
    display: none;
    width: 100%;
}

.loading-skeleton-card-theme2 {
    background: #fff;
    border-radius: 16px;
    padding: 1.25rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.loading-skeleton-el-theme2 {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: 6px;
}

.loading-skeleton-avatar-theme2 {
    width: 55px;
    height: 55px;
    min-width: 55px;
    border-radius: 10px;
    flex-shrink: 0;
}

.loading-skeleton-title-theme2 {
    height: 18px;
    width: 75%;
    margin-bottom: 10px;
}

.loading-skeleton-text-theme2 {
    height: 14px;
    width: 50%;
    margin-bottom: 8px;
}

.loading-skeleton-text-sm-theme2 {
    height: 12px;
    width: 35%;
}

.loading-skeleton-tag-theme2 {
    height: 26px;
    width: 80px;
    border-radius: 12px;
}

.loading-skeleton-btn-theme2 {
    height: 36px;
    width: 100%;
    border-radius: 8px;
    margin-top: 1rem;
}

/* Load More Button Styles */
.load-more-container-theme2 {
    text-align: center;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    width: 100%;
}

.load-more-btn-theme2 {
background: linear-gradient(135deg, #2b6bed 0%, #1d4ed8 100%);
    color: #fff;
    border: none;
    padding: 14px 36px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.load-more-btn-theme2:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(244, 192, 37, 0.45);
}

.load-more-btn-theme2:disabled {
    background: #94a3b8;
    color: #fff;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.load-more-btn-theme2 .spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(21, 28, 40, 0.3);
    border-top-color: #151c28;
    border-radius: 50%;
    animation: spinner 0.8s linear infinite;
}

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

.no-more-jobs-theme2 {
    color: #64748b;
    font-size: 14px;
    padding: 1rem;
}

/* Grid/List View Toggle Styles */
.view-toggle-btn {
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #64748b;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: 8px;
}

.view-toggle-btn:hover {
    background: #f8fafc;
    color: #0f172a;
}

.view-toggle-btn.active {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #cbd5e1;
    box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
}

/* List View Overrides */
#jobs-main-row.list-view-active .job-item {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

#jobs-main-row.list-view-active .card-custom {
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* I keep my sticky menu familiar and give it a soft glass finish after scrolling. */
.navbar.bg-blue-900 {
    transition:
        background-color 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        backdrop-filter 0.35s ease;
}

.navbar.bg-blue-900.wd-nav-scrolled {
    background: rgba(15, 31, 61, 0.76) !important;
    background-image: none !important;
    animation: none !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 30px rgba(4, 15, 35, 0.16);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .navbar.bg-blue-900.wd-nav-scrolled {
        background: rgba(15, 31, 61, 0.94) !important;
    }
}


/* I only want the homepage hero to use the new people background. */
.slider-bg-theme {
  background:
    linear-gradient(90deg, rgba(7, 20, 42, 0.32) 0%, rgba(7, 20, 42, 0.08) 30%, rgba(7, 20, 42, 0.08) 70%, rgba(7, 20, 42, 0.32) 100%),
    url("../images/workdirect-hero-people-final.png") center center / cover no-repeat;
}

/* Keep the same content and placement, just make the hero UI cleaner. */
.slider-bg-theme .fw-900-search {
  font-size: clamp(2.75rem, 5vw, 4.5rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.32);
}

.slider-bg-theme .hero-subtitle {
  color: rgba(255, 255, 255, 0.82);
  opacity: 1;
}

.slider-bg-theme .hero-badge,
.slider-bg-theme .bg-blue-200-home {
  border: 1px solid rgba(147, 197, 253, 0.42);
  box-shadow: 0 18px 45px rgba(2, 12, 32, 0.3);
  backdrop-filter: blur(12px) saturate(125%);
  -webkit-backdrop-filter: blur(12px) saturate(125%);
}

.slider-bg-theme .bg-blue-200-home {
  background: rgba(234, 241, 255, 0.16);
}

.slider-bg-theme .form-home {
  box-shadow: inset 0 0 0 1px rgba(15, 31, 61, 0.08);
}

.slider-bg-theme .btn-warning {
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.24);
}

@media (max-width: 767px) {
  .slider-bg-theme {
    background-position: center center;
  }

  .slider-bg-theme .fw-900-search {
    font-size: clamp(2.15rem, 10vw, 3rem);
    line-height: 1.12;
  }

  .slider-bg-theme .hero-badge,
  .slider-bg-theme .bg-blue-200-home {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

/* I want the navigation to feel lighter without changing its links or behaviour. */
.navbar.bg-blue-900 {
  padding-top: 0.6rem !important;
  padding-bottom: 0.6rem !important;
}

.navbar.bg-blue-900 .navbar-brand img {
  width: 180px;
  height: auto;
}

/* Give the hero title a little more breathing room. */
.slider-bg-theme .fw-900-search {
  letter-spacing: 0.012em;
}

.slider-bg-theme .fw-900-search span {
  display: inline-block;
  letter-spacing: 0.018em;
  color: #5b8cff;
  background: linear-gradient(105deg, #60a5fa 0%, #4f7cff 48%, #9b7bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Keep the search action familiar, just add a gentle sense of depth. */
.slider-bg-theme .btn-warning {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: linear-gradient(180deg, #5b84ff 0%, #3867e8 58%, #2852c9 100%) !important;
  box-shadow:
    0 4px 12px rgba(18, 54, 145, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
  transform: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.slider-bg-theme .btn-warning:hover {
  filter: brightness(1.03);
  transform: translateY(-1px);
  box-shadow:
    0 5px 14px rgba(18, 54, 145, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.slider-bg-theme .btn-warning:active {
  transform: none;
  box-shadow:
    0 2px 7px rgba(18, 54, 145, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

@media (max-width: 767px) {
  .navbar.bg-blue-900 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .navbar.bg-blue-900 .navbar-brand img {
    width: 165px;
  }

  .slider-bg-theme .fw-900-search {
    letter-spacing: 0.008em;
  }

  .slider-bg-theme .fw-900-search span {
    letter-spacing: 0.012em;
  }
}

/* Keep the hero flush with the shorter desktop navigation. */
@media (min-width: 992px) {
  .slider-bg-theme {
    margin-top: -35.2px;
  }
}

/* Keep the job and category cards softly grounded in the page. */
.bg-blue-50-home1 .card.card-hover,
.bg-blue-50-home2 .card.card-hover {
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}

.bg-blue-50-home1 .card.card-hover:hover,
.bg-blue-50-home2 .card.card-hover:hover {
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.18);
}

/* Make these two card sections easier to see without changing their colour. */
.bg-blue-50-home1 .card.card-hover,
.bg-blue-50-home2 .card.card-hover {
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.24);
}

.bg-blue-50-home1 .card.card-hover:hover,
.bg-blue-50-home2 .card.card-hover:hover {
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.30);
}


/* WorkDirect public bug fixes - 2026-07-26 */
.posted.job-tags2::first-letter {
  color: inherit !important;
}
.posted.job-tags2::before {
  content: none !important;
  display: none !important;
}

.premium-gradient-bg form[name="save_search"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 1rem;
  width: 100%;
}
.premium-gradient-bg form[name="save_search"] .alertInput {
  display: block !important;
  width: 100% !important;
  min-width: 0;
  height: 48px;
  margin: 0 !important;
  color: #ffffff !important;
  border-radius: 0.875rem !important;
}
.premium-gradient-bg form[name="save_search"] .alertButton {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  height: 48px;
  margin: 0 !important;
  border-radius: 0.875rem !important;
  white-space: nowrap;
}
@media (max-width: 575.98px) {
  .premium-gradient-bg form[name="save_search"] {
    grid-template-columns: 1fr;
  }
  .premium-gradient-bg form[name="save_search"] .alertButton {
    width: 100%;
  }
}


/* WorkDirect homepage: keep the existing content and icons, lift only their surfaces. */
#jobs-main-row .job-item .card-custom,
.categories .card-hover {
  position: relative;
  overflow: visible;
  border: 1px solid rgba(37, 99, 235, .12) !important;
  border-radius: 22px !important;
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(238,244,255,.94)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98), inset 0 -10px 22px rgba(37,99,235,.045), 0 14px 28px rgba(37,99,235,.11), 0 5px 10px rgba(15,31,61,.06) !important;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
#jobs-main-row .job-item .card-custom:hover,
.categories .card-hover:hover {
  transform: translateY(-5px);
  border-color: rgba(37,99,235,.32) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98), inset 0 -10px 22px rgba(37,99,235,.06), 0 22px 36px rgba(37,99,235,.17), 0 8px 13px rgba(15,31,61,.08) !important;
}
#jobs-main-row .job-item .featured-logo,
#jobs-main-row .job-item .featured-logo--category {
  position: relative;
  width: 55px !important;
  height: 55px !important;
  display: grid;
  place-items: center;
  overflow: visible;
  border: 1px solid rgba(37,99,235,.12);
  border-radius: 18px !important;
  background: linear-gradient(145deg, #fff 0%, #eef4ff 42%, #dbeafe 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -8px 16px rgba(37,99,235,.06), 0 12px 24px rgba(37,99,235,.14), 0 5px 10px rgba(15,31,61,.08);
  object-fit: contain;
}
#jobs-main-row .job-item .featured-logo--category::before,
.categories .cardheader > div::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,0));
  pointer-events: none;
}
#jobs-main-row .job-item .featured-logo--category::after,
.categories .cardheader > div::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: -10px;
  left: 10px;
  height: 12px;
  border-radius: 50%;
  background: rgba(37,99,235,.12);
  filter: blur(8px);
  pointer-events: none;
}
#jobs-main-row .job-item .featured-logo--category svg {
  position: relative;
  z-index: 1;
  width: 26px;
  height: 26px;
}
.categories .cardheader > div {
  position: relative;
  overflow: visible !important;
  border: 1px solid color-mix(in srgb, currentColor 15%, transparent) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.98), color-mix(in srgb, currentColor 10%, #eef4ff)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -8px 16px color-mix(in srgb, currentColor 7%, transparent), 0 12px 24px color-mix(in srgb, currentColor 17%, transparent), 0 5px 10px rgba(15,31,61,.07) !important;
}
.categories .cardheader > div svg { position: relative; z-index: 1; }
.theme1-featured-logo {
  border: 1px solid rgba(37,99,235,.12) !important;
  border-radius: 19px !important;
  background: linear-gradient(145deg, #fff, #eaf2ff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), inset 0 -8px 16px rgba(37,99,235,.05), 0 13px 25px rgba(37,99,235,.12), 0 5px 10px rgba(15,31,61,.07) !important;
  transition: transform .24s ease, box-shadow .24s ease;
}
a:hover .theme1-featured-logo { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 19px 32px rgba(37,99,235,.18), 0 7px 12px rgba(15,31,61,.08) !important; }
.home-about-bg .cta-content-z {
  margin-top: 34px;
  margin-bottom: 34px;
  padding: clamp(34px,5vw,62px) clamp(22px,5vw,72px);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(15,23,42,.80), rgba(30,64,175,.68));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 24px 50px rgba(15,23,42,.25);
  backdrop-filter: blur(14px);
}
.home-about-bg .btn-primary-home,
.home-about-bg .btn-outline-secondary-home,
.premium-gradient-bg .alertButton,
.view-more-link {
  border-radius: 15px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 10px 20px rgba(15,31,61,.20) !important;
  transition: transform .2s ease, box-shadow .2s ease;
}
.home-about-bg .btn-primary-home:hover,
.home-about-bg .btn-outline-secondary-home:hover,
.premium-gradient-bg .alertButton:hover,
.view-more-link:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 15px 25px rgba(15,31,61,.26) !important; }
.premium-gradient-bg .container-xxl {
  padding: clamp(38px,5vw,66px) clamp(22px,5vw,64px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(15,23,42,.36), rgba(37,99,235,.16));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 24px 52px rgba(15,23,42,.22);
}
@media (max-width: 767.98px) {
  #jobs-main-row .job-item .card-custom,
  .categories .card-hover { border-radius: 18px !important; }
  .home-about-bg .cta-content-z,
  .premium-gradient-bg .container-xxl { border-radius: 22px; }
}


/* Keep the homepage controls readable and balanced. */
.view-more-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 44px;
  padding: .72rem 1.05rem !important;
  line-height: 1 !important;
  white-space: nowrap;
  color: #172554 !important;
  background: linear-gradient(145deg, #ffffff, #eaf0ff) !important;
  border: 1px solid rgba(37,99,235,.22) !important;
  overflow: visible !important;
}
.view-more-link svg { flex: 0 0 auto; }
.load-more-btn-theme2 {
  border-radius: 15px !important;
  background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
  border-color: #6d28d9 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.36), 0 12px 25px rgba(109,40,217,.30), 0 5px 10px rgba(76,29,149,.18) !important;
}
.load-more-btn-theme2:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 17px 30px rgba(109,40,217,.36), 0 7px 12px rgba(76,29,149,.20) !important;
}
.theme1-featured-logo {
  height: 124px !important;
  padding: 14px !important;
  border-radius: 22px !important;
  border-color: rgba(37,99,235,.18) !important;
  background: linear-gradient(145deg, #ffffff, #eef4ff 58%, #dbeafe) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98), inset 0 -9px 18px rgba(37,99,235,.05), 0 14px 28px rgba(37,99,235,.14), 0 5px 10px rgba(15,31,61,.07) !important;
}
.home-about-bg { padding: 4.5rem 0 !important; }
.home-about-bg .cta-content-z {
  margin: 0 auto !important;
  padding: clamp(40px,5vw,64px) clamp(24px,6vw,80px) !important;
  border: 1px solid rgba(37,99,235,.20) !important;
  border-radius: 30px !important;
  background: linear-gradient(135deg, #f8fbff 0%, #eaf2ff 52%, #dfeaff 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98), inset 0 -12px 26px rgba(37,99,235,.045), 0 22px 46px rgba(15,31,61,.12) !important;
}
.home-about-bg .cta-content-z h2 { color: #0f1f3d !important; }
.home-about-bg .cta-content-z p { color: #52627d !important; }
.home-about-bg .btn-primary-home {
  background: linear-gradient(135deg, #173d8f, #2563eb) !important;
  border-color: #1d4ed8 !important;
  color: #fff !important;
}
.home-about-bg .btn-outline-secondary-home {
  color: #173d8f !important;
  border-color: rgba(37,99,235,.48) !important;
  background: rgba(255,255,255,.72) !important;
}
/* The alert has its own panel; the footer keeps its original proportions. */
.premium-gradient-bg:has(form[name="save_search"]) { padding: 5rem 0 !important; }
.premium-gradient-bg:has(form[name="save_search"]) .container-xxl {
  max-width: 1080px;
  padding: clamp(42px,5vw,64px) clamp(24px,6vw,72px) !important;
  border: 1px solid rgba(147,197,253,.28) !important;
  border-radius: 30px !important;
  background: linear-gradient(135deg, rgba(15,31,61,.88), rgba(30,64,175,.72)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 24px 52px rgba(8,15,36,.28) !important;
}
.premium-gradient-bg:has(form[name="save_search"]) .alertInput {
  background: rgba(255,255,255,.97) !important;
  border: 1px solid rgba(255,255,255,.85) !important;
  color: #0f1f3d !important;
}
.premium-gradient-bg:has(form[name="save_search"]) .alertButton {
  min-height: 52px;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #2563eb, #4f46e5) !important;
  border-color: #4f46e5 !important;
}
.footer.premium-gradient-bg {
  margin-top: 32px !important;
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
  border-top: 1px solid rgba(147,197,253,.34) !important;
  border-bottom: 1px solid rgba(15,31,61,.48) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11), inset 0 14px 28px rgba(255,255,255,.025), 0 -12px 30px rgba(15,31,61,.14) !important;
}
.footer.premium-gradient-bg .container-xxl {
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
@media (max-width: 575.98px) {
  .view-more-link { min-height: 40px; padding: .62rem .84rem !important; font-size: .8rem; }
  .home-about-bg { padding: 3rem 0 !important; }
  .home-about-bg .cta-content-z, .premium-gradient-bg:has(form[name="save_search"]) .container-xxl { border-radius: 22px !important; }
}

/* Give the job-alert controls clear depth without changing their function. */
.premium-gradient-bg:has(form[name="save_search"]) {
  margin-bottom: 0 !important;
  padding-bottom: 4.5rem !important;
  border-bottom: 1px solid rgba(147,197,253,.30);
}
.premium-gradient-bg:has(form[name="save_search"]) .lucide-bell {
  width: 40px !important;
  height: 40px !important;
  padding: 9px;
  margin-right: 5px;
  vertical-align: middle;
  color: #fbbf24 !important;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 14px;
  background: linear-gradient(145deg, #fff4ba, #f59e0b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.84), inset 0 -7px 12px rgba(146,64,14,.22), 0 10px 18px rgba(15,23,42,.24), 0 4px 8px rgba(15,23,42,.14);
}
.premium-gradient-bg:has(form[name="save_search"]) .alertInput {
  min-height: 54px;
  background: #ffffff !important;
  border: 1px solid rgba(255,255,255,.92) !important;
  color: #0f172a !important;
  opacity: 1 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 7px 16px rgba(8,15,36,.14);
}
.premium-gradient-bg:has(form[name="save_search"]) .alertInput::placeholder {
  color: #64748b !important;
  opacity: 1 !important;
}
.footer.premium-gradient-bg {
  margin-top: 0 !important;
  border-top-color: rgba(147,197,253,.42) !important;
}

/* Keep the alert controls light and easy to read. */
.premium-gradient-bg:has(form[name="save_search"]) .lucide-bell {
  width: 26px !important;
  height: 26px !important;
  padding: 5px;
  margin-right: 6px;
  vertical-align: -7px;
  color: #facc15 !important;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(255,255,255,.34), rgba(245,158,11,.25));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.48), 0 4px 9px rgba(15,23,42,.22);
}
.premium-gradient-bg:has(form[name="save_search"]) .col-md-7 {
  width: 100%;
  max-width: 860px;
}
.premium-gradient-bg:has(form[name="save_search"]) form[name="save_search"] {
  display: flex;
  width: 100%;
}
.premium-gradient-bg:has(form[name="save_search"]) .alertInput {
  flex: 1 1 auto !important;
  width: auto !important;
}
@media (max-width: 575.98px) {
  .premium-gradient-bg:has(form[name="save_search"]) form[name="save_search"] { flex-direction: column; gap: 12px; }
  .premium-gradient-bg:has(form[name="save_search"]) .alertInput { width: 100% !important; margin-right: 0 !important; }
  .premium-gradient-bg:has(form[name="save_search"]) .alertButton { width: 100%; justify-content: center; }
}

/* Keep the existing scroll button compact, with a little depth. */
#backToTop {
  background: linear-gradient(145deg, #23487a, #102b55) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -5px 11px rgba(5,19,43,.32), 0 8px 17px rgba(15,40,78,.28), 0 3px 6px rgba(15,40,78,.18) !important;
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease !important;
}
#backToTop:hover {
  transform: translateY(-3px);
  filter: brightness(1.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -5px 11px rgba(5,19,43,.26), 0 12px 22px rgba(15,40,78,.31), 0 4px 8px rgba(15,40,78,.2) !important;
}
#backToTop:active { transform: translateY(-1px) scale(.98); }


/* WorkDirect hero V2.1 — animated recruitment background only. */
.slider-bg-theme {
  background:
    radial-gradient(ellipse 100% 23% at 50% 14%, transparent 55%, rgba(132, 165, 255, 0.22) 56%, rgba(132, 165, 255, 0.08) 61%, transparent 64%),
    radial-gradient(ellipse 110% 25% at 50% 52%, transparent 55%, rgba(121, 119, 241, 0.18) 56%, rgba(121, 119, 241, 0.06) 61%, transparent 64%),
    radial-gradient(ellipse 105% 24% at 50% 88%, transparent 55%, rgba(255, 169, 105, 0.15) 56%, rgba(255, 169, 105, 0.05) 61%, transparent 64%),
    radial-gradient(ellipse at 18% 68%, rgba(58, 100, 234, 0.20), transparent 34%),
    radial-gradient(ellipse at 83% 26%, rgba(141, 105, 245, 0.17), transparent 31%),
    linear-gradient(135deg, #07132c 0%, #0c204a 48%, #07132c 100%) !important;
  background-size: 125% 100%, 135% 100%, 130% 100%, 100% 100%, 100% 100%, 100% 100% !important;
  background-position: 50% 0, 48% 0, 52% 0, 0 0, 0 0, 0 0 !important;
  animation: wdHeroAmbient 16s ease-in-out infinite !important;
}
.slider-bg-theme::before,
.slider-bg-theme::after {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  white-space: pre-line;
  font: 600 10px/2.1 Consolas, monospace;
  letter-spacing: 0.17em;
  color: rgba(193, 208, 255, 0.40);
  text-shadow: 0 0 14px rgba(114, 147, 255, 0.55);
  animation: wdHeroStatus 7s ease-in-out infinite;
}
.slider-bg-theme::before {
  content: "CV: POSTED\A APPLICATION: SENT\A INTERVIEW: BOOKED";
  left: clamp(18px, 7vw, 130px);
  top: 25%;
}
.slider-bg-theme::after {
  content: "EMPLOYER: HIRING\A POSITION: OPEN\A OFFER: ACCEPTED";
  right: clamp(18px, 7vw, 130px);
  bottom: 21%;
  text-align: right;
  animation-delay: -3.5s;
}
@keyframes wdHeroAmbient {
  0%, 100% { background-position: 48% 0, 52% 0, 50% 0, 0 0, 0 0, 0 0; }
  50% { background-position: 54% 0, 44% 0, 56% 0, 0 0, 0 0, 0 0; }
}
@keyframes wdHeroStatus {
  0%, 100% { opacity: 0.22; transform: translateY(0); }
  50% { opacity: 0.58; transform: translateY(-7px); }
}
@media (max-width: 767px) {
  .slider-bg-theme::before,
  .slider-bg-theme::after {
    opacity: 0.22 !important;
    font-size: 8px;
    letter-spacing: 0.11em;
  }
  .slider-bg-theme::before { left: 16px; top: 18%; }
  .slider-bg-theme::after { right: 16px; bottom: 15%; }
}


/* Hero detail polish: job count, category label and category chips */
.slider-bg-theme .hero-badge {
  display: inline-flex !important;
  min-height: 38px;
  padding: 8px 14px !important;
  border: 1px solid rgba(132, 160, 255, 0.54) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(26, 45, 102, 0.88), rgba(57, 82, 171, 0.48)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 10px 24px rgba(0,0,0,0.22), 0 0 24px rgba(83,112,255,0.15);
  color: #f8fbff !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}
.slider-bg-theme .hero-badge svg { color: #79a2ff !important; filter: drop-shadow(0 0 7px rgba(121,162,255,0.9)); }
.slider-bg-theme .hero-badge span { box-shadow: 0 0 0 4px rgba(74,222,128,0.13), 0 0 12px rgba(74,222,128,0.95); }
.slider-bg-theme div.small.fw-medium.text-white:has(+ .mt-3 .saved-tags) { display: none; }
.slider-bg-theme .mt-3.d-flex.flex-wrap.align-items-center.justify-content-center.gap-3 {
  position: relative;
  margin-top: 1.4rem !important;
  padding-top: 1.65rem;
  gap: 0.65rem !important;
}
.slider-bg-theme .mt-3.d-flex.flex-wrap.align-items-center.justify-content-center.gap-3::before {
  content: "POPULAR CATEGORIES";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(231,238,255,0.82);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  white-space: nowrap;
}
.slider-bg-theme .saved-tags {
  min-height: 34px;
  display: inline-flex !important;
  align-items: center;
  border: 1px solid rgba(148,163,255,0.58) !important;
  background: linear-gradient(135deg, rgba(18,31,75,0.76), rgba(74,96,190,0.3)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 8px 18px rgba(0,0,0,0.18);
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.slider-bg-theme .saved-tags:hover {
  transform: translateY(-2px);
  border-color: rgba(170,190,255,0.96) !important;
  background: linear-gradient(135deg, rgba(43,69,157,0.9), rgba(103,86,216,0.6)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 12px 24px rgba(27,45,143,0.32);
}
.slider-bg-theme .saved-tags span { color: #b8c8ff; font-weight: 800; }