/* ------------------------------------------
   MYJOBO — Modernised Global Typography & Base Styles (2025)
---------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output,
ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}

/* Global */
body {
    font-family: Inter, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: #2e2e2e;
    background-color: #fff;
}

p {
    margin-bottom: 12px;
    color: #4e4e4e;
}

a {
    color: #217208;
    text-decoration: none;
    transition: 0.25s;
}
a:hover { color: #195907; }

/* Modern typography */
h1, .h1 { font-size: 2.75rem; font-weight: 700; }
h2, .h2 { font-size: 2rem; font-weight: 600; }
h3       { font-size: 1.6rem; font-weight: 600; }
h4       { font-size: 1.25rem; font-weight: 600; }
h5       { font-size: 1.1rem; font-weight: 600; }
h6       { font-size: 0.95rem; font-weight: 600; }

@media (max-width: 768px) {
    h1 { font-size: 2.1rem; }
    h2 { font-size: 1.6rem; }
}

/* ------------------------------------------
   BUTTONS — Modern 2025
---------------------------------------------*/
.btn-primary,
.button-orng,
.gree_sitebtn {
    background: #217208;
    color: #fff;
    border-radius: 6px;
    padding: 12px 26px;
    font-weight: 600;
    border: none;
    box-shadow: 0 4px 12px rgba(33,114,8,0.18);
    transition: 0.25s;
}
.btn-primary:hover { background: #195907; }

/* Accent */
.btn-accent { background: #b7663a; color: #fff; }

/* Dark */
.btn-dark { background: #2a2b32; color:#fff; }

/* Outline */
.btn-outline-primary {
    border: 2px solid #217208;
    color: #217208;
}

/************************************************
    MYJOBO 2025 — GLOBAL HEADER (FINAL CSS)
    Fully modern, lean, mobile-first
*************************************************/

/* ============================
   HEADER WRAPPER
============================ */
.header {
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 0;
    z-index: 1100;
    transition: box-shadow .25s, background .25s;
    height: 64px;
    display: flex;
    align-items: center;
}

/* Sticky state */
.header.is-sticky {
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

/* ============================
   LOGO
============================ */
.header .logo {
    display: flex;
    align-items: center;
    line-height: 0; /* Prevent vertical misalignment */
}

.header-logo {
    height: 44px;
    max-height: 44px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* Mobile adjustments */
@media (max-width: 991px) {
    .header {
        height: 58px;
    }
    .header-logo {
        height: 40px;
        max-height: 40px;
    }
}

/* ============================
   NAVBAR BASE
============================ */
.navbar {
    padding: 0 !important;
    height: 64px;
}

@media (max-width: 991px) {
    .navbar {
        height: auto;
        padding: 0;
    }
}

/* ============================
   NAV LINKS
============================ */
.navbar-nav .nav-link {
    font-weight: 500;
    font-size: 15px;
    padding: 0.75rem 1rem;
    color: #2d2d2d;
    border-bottom: 2px solid transparent;
    transition: color .25s, border-color .25s;
    line-height: 1;
}

/* Active + Hover */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-item.active > .nav-link,
.navbar-nav .nav-link.active {
    color: #217208 !important;
    border-bottom-color: #217208;
}

/* ============================
   CTA BUTTONS
============================ */
.navbar-nav .register .nav-link {
    background: #217208;
    color: #fff !important;
    padding: .55rem 1rem;
    border-radius: 30px;
    font-weight: 600;
}

.navbar-nav .register .nav-link:hover {
    background: #1b5c06;
}

.navbar-nav .loginbtn .nav-link {
    background: #b7663a;
    color: #fff !important;
    padding: .55rem 1rem;
    border-radius: 30px;
    font-weight: 600;
}

.navbar-nav .loginbtn .nav-link:hover {
    background: #9d5731;
}

/* ============================
   AVATAR (User + Company)
============================ */
.userbtn img.userimg,
.navbar-nav > li.userbtn img,
.userbtn img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid #e3e3e3;
    padding: 2px;
    object-fit: cover;
}

/* ============================
   DROPDOWN MENU
============================ */
.dropdown-menu {
    border-radius: 10px;
    padding: .5rem 0;
    min-width: 200px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 8px 25px rgba(0,0,0,.08);
    animation: fadeIn .18s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.dropdown-menu .dropdown-item {
    padding: .65rem 1rem;
    font-weight: 500;
    color: #374151;
}

.dropdown-menu .dropdown-item:hover {
    background: #f3f6f3;
    color: #217208;
}

/* Desktop hover dropdown */
@media (min-width: 992px) {
    .navbar-nav > li:hover > .dropdown-menu {
        display: block;
    }
}

/* ============================
   MOBILE NAV MENU
============================ */
.navbar-toggler {
    border: none;
    font-size: 1.5rem;
    color: #217208;
    padding: 0;
}

.close-toggler {
    border: none;
    background: none;
    font-size: 1.8rem;
    color: #217208;
    margin-left: auto;
}

/* Mobile nav links */
@media (max-width: 991px) {

    .navbar-nav .nav-link {
        padding: 14px 0;
        border-bottom: 1px solid #f0f0f0;
        width: 100%;
    }

    .navbar-nav .register .nav-link,
    .navbar-nav .loginbtn .nav-link {
        width: 100%;
        text-align: center;
        margin: 6px 0;
    }

    .navbar-nav > li.userbtn img {
        margin-top: 8px;
        margin-bottom: 8px;
    }
}

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

/* Hide mobile nav on desktop - CRITICAL */
.mobilenav {
    display: none !important;
}

/* Show mobile nav only on mobile (below 992px) */
@media (max-width: 991.98px) {
    .mobilenav {
        display: block !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        z-index: 1000;
        padding: 0;
    }
    
    .mobilenav ul {
        display: flex;
        justify-content: space-around;
        align-items: center;
        list-style: none;
        margin: 0;
        padding: 10px 0;
    }
    
    .mobilenav ul li {
        flex: 1;
        text-align: center;
    }
    
    .mobilenav ul li a {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        color: #333;
        font-size: 12px;
        padding: 5px;
        transition: color .2s;
    }
    
    .mobilenav ul li a:hover,
    .mobilenav ul li a:active {
        color: #217208;
    }
    
    .mobilenav ul li a i {
        font-size: 20px;
        margin-bottom: 3px;
    }
    
    .mobilenav ul li a span {
        font-size: 11px;
    }
    
    /* Add padding to body to account for fixed mobile nav */
    body {
        padding-bottom: 70px;
    }
}

/* Desktop - ensure mobile bottom nav is hidden */
@media (min-width: 992px) {
    .mobilenav {
        display: none !important;
    }
    
    body {
        padding-bottom: 0;
    }
}

/* ============================================================
   MOBILE SLIDE-UP USER MENU
============================================================ */

/* Hide mobile slide-up menu by default */
.usernavdash {
    display: none;
}

@media (max-width: 991.98px) {
    /* Mobile slide-up menu */
    .usernavdash {
        display: none;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        box-shadow: 0 -5px 20px rgba(0,0,0,0.2);
        z-index: 1001;
        max-height: 70vh;
        overflow-y: auto;
        list-style: none;
        margin: 0;
        padding: 20px 0;
        border-radius: 20px 20px 0 0;
    }
    
    .usernavdash.active {
        display: block;
        animation: slideUp 0.3s ease-out;
    }
    
    @keyframes slideUp {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }
    
    .usernavdash li {
        border-bottom: 1px solid #f0f0f0;
    }
    
    .usernavdash li:last-child {
        border-bottom: none;
    }
    
    .usernavdash li a {
        display: block;
        padding: 15px 25px;
        color: #333;
        text-decoration: none;
        font-size: 15px;
        transition: background .2s;
    }
    
    .usernavdash li a i {
        margin-right: 10px;
        width: 20px;
        text-align: center;
        color: #217208;
    }
    
    .usernavdash li a:hover {
        background: #f8f9fa;
    }
}

/* Desktop - ensure mobile slide-up menu is hidden */
@media (min-width: 992px) {
    .usernavdash {
        display: none !important;
    }
}

/* ============================================================
   MOBILE MENU OVERLAY
============================================================ */
.mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
}

.mobile-overlay.active {
    display: block;
    animation: fadeInOverlay 0.3s ease-out;
}

@keyframes fadeInOverlay {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/************************************************
   END OF HEADER CSS
*************************************************/



/************************************************
           MYJOBO — MODERNISED TOP SEARCH (2025)
     Clean, brand-based, Inter, minimal, responsive
*************************************************/

/* -----------------------------
    WRAPPER (Search Background)
------------------------------*/
.searchwrap {
    background: linear-gradient(
        90deg,
        rgba(241, 237, 250, 0.55) 0%,
        rgba(228, 245, 229, 0.55) 35%,
        rgba(255, 255, 255, 0.65) 100%
    );
    padding: 60px 0;
    position: relative;
}

.searchwrap:before {
    content: '';
    background: url(../images/pattern-bg.png) no-repeat top left;
    opacity: 0.25;
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Modern Medium-Size Search Button */
.jobsearch-btn {
    background: #217208;        /* MyJobo Green */
    border: 1px solid #1b5c06;
    color: #fff;
    font-weight: 600;
    font-size: 1rem;            /* Medium size */
    padding: 0.65rem 0;         /* Balanced vertical size */
    height: 48px;               /* Standard job portal height */
    transition: all 0.25s ease;
}

.jobsearch-btn:hover,
.jobsearch-btn:focus {
    background: #1a5d06;
    border-color: #144603;
    box-shadow: 0 4px 10px rgba(33, 114, 8, 0.25);
}

.jobsearch-btn:active {
    transform: scale(0.98);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .jobsearch-btn {
        width: 100%;
        height: 50px;           /* Mobile-friendly touch size */
        font-size: 1rem;
        padding: 0.7rem 0;
    }
}

/* -----------------------------
    JOB SEEKER BLOCKS
------------------------------*/
.srjobseeker {
    padding: 50px 0 30px 0;
    position: relative;
    z-index: 2;
}

/* -----------------------------
    COMPANY BLOCKS
------------------------------*/
.srcompanies {
    background: #f8f9fc url(../images/srcompanybg.jpg) no-repeat top right;
    padding: 100px 40px 40px 40px;
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
    display: flex;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

.bxsrctxt {
    position: relative;
    z-index: 2;
}

.bxsrctxt h2 {
    font-size: 16px;
    text-transform: uppercase;
    color: #217208;
    font-weight: 700;
}
.bxsrctxt h1 {
    font-size: 32px;
    color: #1f1f1f;
    font-weight: 700;
}
.bxsrctxt p {
    font-size: 16px;
    color: #444;
    line-height: 28px;
}

/* -----------------------------
    BUTTONS
------------------------------*/
.srchlinkbt {
    margin-top: 30px;
}
.srchlinkbt a {
    padding: 12px 24px;
    font-size: 16px;
    margin-right: 8px;
    background: #217208;
    color: #fff;
    border-radius: 8px;
    font-weight: 600;
    transition: 0.25s;
}
.srchlinkbt a:hover {
    background: #195907;
}

/* -----------------------------
    SEARCH ANIMATION (refined)
------------------------------*/
.searchwrap .searchtpimg {
    animation: floatY 3s ease-in-out infinite alternate;
}

@keyframes floatY {
    0% { transform: translateY(10px); }
    100% { transform: translateY(25px); }
}

/* -----------------------------
  AUTOCOMPLETE (jQuery UI)
------------------------------*/
.ui-widget.ui-widget-content {
    border: none !important;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    width: 350px !important;
    padding: 10px 0;
    max-height: 420px;
    overflow-y: auto;
    background: #fff;
}

.ui-menu .ui-menu-item-wrapper {
    padding: 12px 18px;
    font-size: 15px;
    color: #555;
    font-family: 'Inter', sans-serif;
}

.ui-menu .ui-menu-item:hover,
.ui-menu .ui-menu-item-wrapper:hover {
    background-color: #f3f4f5 !important;
}

.ui-state-active {
    background: none !important;
    border: none !important;
}

/* Scrollbar */
.ui-widget.ui-widget-content::-webkit-scrollbar {
    width: 6px;
}
.ui-widget.ui-widget-content::-webkit-scrollbar-thumb {
    background: #ccc;
}

/* -----------------------------
    SEARCH BAR WRAPPER
------------------------------*/
.searchbar {
    padding: 10px 0 0 0;
    margin: 0;
}
.searchbar h3 {
    font-size: 18px;
    font-weight: 600;
}

/* Modern search card */
.searchbar .input-group {
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    padding: 10px;
    border-radius: 12px;
    background-color: #ffffff;
}

/* -----------------------------
    INPUTS
------------------------------*/
.srchbox label {
    color: #1f1f1f;
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 14px;
}

.searchbar .form-control {
    height: 52px;
    padding: 12px 15px;
    font-size: 15px;
    border: none;
    border-radius: 8px;
    box-shadow: none;
}

.searchbar select.form-control {
    border-left: 1px solid #ddd;
    margin-right: 12px;
}

/* -----------------------------
    SEARCH BUTTON
------------------------------*/
.searchbar .btn {
    background: #217208;
    color: #fff;
    border: none;
    font-size: 15px;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 8px;
    text-transform: none;
    transition: 0.25s;
}
.searchbar .btn:hover {
    background: #195907;
}

/* -----------------------------
    GET STARTED (CTA)
------------------------------*/
.getstarted {
    text-align: center;
    margin-top: 40px;
}

.getstarted a {
    display: inline-block;
    border: 2px solid #217208;
    padding: 10px 22px;
    color: #217208;
    font-size: 17px;
    font-weight: 600;
    border-radius: 6px;
    transition: 0.25s;
}

.getstarted a:hover {
    background: #217208;
    color: #fff;
}

/* -----------------------------
    SLIDER SEARCH
------------------------------*/
.slidersearch .searchbar {
    background: #f8fafb;
    padding: 22px;
    border-radius: 15px;
    margin-top: -50px;
    position: relative;
    z-index: 10;
    box-shadow: 0px 6px 12px rgba(0,0,0,0.08);
}

/************************************************
           MYJOBO — MODERNISED MAP SEARCH (2025)
  Clean, Inter font, brand green, responsive, safe
*************************************************/

/* -----------------------------
        MAP CANVAS
------------------------------*/
#map_canvas {
    height: 450px;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
}

/* -----------------------------
        INFOBOX (Google Maps)
------------------------------*/
.infobox-wrap {
    width: 340px;
    padding: 12px;
    display: flex;
    gap: 15px;
    font-family: 'Inter', sans-serif;
}

.infobox-wrap .infobox-figure {
    width: 140px;
}

.infobox-wrap .infobox-figure img {
    max-width: 100%;
    border-radius: 8px;
}

.infobox-wrap .infobox-content {
    flex: 1;
    text-align: left;
}

.infobox-wrap .infobox-content h5 {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 600;
    color: #1f1f1f;
}

.infobox-wrap .infobox-content .address p {
    color: #6a6a6a;
    font-size: 14px;
    margin-bottom: 8px;
}

/* Ratings */
.infobox-wrap .infobox-rattings {
    margin-bottom: 12px;
}
.infobox-rattings i {
    color: #ff9600;
    font-size: 18px;
}

/* -----------------------------
        MAP SECTION FORM
------------------------------*/
#map-section .form-control {
    height: auto;
    border-radius: 8px;
    padding: 12px 14px;
    border: 1px solid #e1e1e1;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
}

#map-section .form-control:focus {
    border-color: #217208;
    box-shadow: 0 0 0 0.15rem rgba(33,114,8,0.2);
}

#map-section .btn {
    background: #217208;
    border-radius: 8px;
    color: #fff;
    border: none;
    font-size: 15px;
    font-weight: 600;
    padding: 14px 22px;
    text-transform: none;
    transition: 0.25s;
}
#map-section .btn:hover {
    background: #195907;
}

/* -----------------------------
        FLOATING SEARCH CARD
------------------------------*/
.searchblack {
    margin-top: -460px;
    z-index: 20;
    position: relative;
    max-width: 520px;
    float: right;
}

.searchblack .searchbar {
    margin-top: 0;
    background: #fff;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 10px 35px rgba(0,0,0,0.12);
}

.searchblack h3 {
    font-size: 36px;
    font-weight: 800;
    color: #1f1f1f;
    margin-bottom: 25px;
    line-height: 1.2;
}

.searchblack h3 span {
    display: block;
    color: #217208;
    font-weight: 700;
}

/* ============================================================
   MYJOBO 2025 — GLOBAL MODAL FRAMEWORK (Unified System)
   Applies to: Login, Register, PreResume, PreJobPost modals
============================================================ */

/* Shared Modal Container */
.mypremodal .modal-content {
    border-radius: 16px;
    border: none;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    overflow: hidden;
    background: #ffffff;
}

/* Close Button */
.mypremodal .btn-close {
    position: absolute;
    right: 18px;
    top: 18px;
    opacity: .6;
    z-index: 20;
    transition: opacity .2s ease, transform .2s ease;
}
.mypremodal .btn-close:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Animation */
.mypremodal.show .modal-content {
    animation: modalSlideIn .3s ease-out;
}
@keyframes modalSlideIn {
    from { opacity:0; transform:translateY(-20px); }
    to   { opacity:1; transform:translateY(0); }
}

/* Universal modal padding */
.mypremodal .modal-inner,
.mypremodal .modal-body {
    padding: 2.5rem 2rem;
}

/* Headings */
.mypremodal h2,
.mypremodal .auth-title,
.mypremodal .modal-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: .5rem;
    color: #111827;
}

/* ============================================================
   GRADIENT PANELS — Restrict white text ONLY to left colored panels
============================================================ */

.bg-preresume-gradient p,
.bg-gradient-employer p,
.bg-preresume-gradient h2,
.bg-gradient-employer h2 {
    color: #ffffff !important;
}

/* Standard modal text */
.mypremodal .modal-inner p,
.mypremodal .modal-body p {
    color: #4b5563;
}

/* ============================================================
   CTA CARDS — Base Styling
============================================================ */

.cta-card {
    display: block;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 22px 26px;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,0.05);
    transition: all .25s ease;
    position: relative;
    overflow: hidden;
}

/* Accent Stripe */
.cta-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    border-radius: 14px 0 0 14px;
    background: #217208;
    opacity: .8;
    transition: .25s ease;
}

/* Hover */
.cta-card:hover {
    box-shadow: 0 8px 22px rgba(0,0,0,0.10);
    transform: translateY(-3px);
    border-color: #d1d5db;
}
.cta-card:hover::before {
    opacity: 1;
}

/* CTA Typography */
.cta-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: .25rem;
    color: #111827;
}
.cta-card p {
    color: #6b7280;
    margin: 0;
    font-size: .95rem;
}

/* Variants */
.cta-job::before { background: #b7663a; }   /* Employer */
.cta-resume::before { background: #217208; } /* Jobseeker */

/* ============================================================
   CTA Enhancements A/B/C/D — MyJobo 2025
============================================================ */

/* A: Inline Arrow Animation */
.enhanced-cta .cta-arrow {
    font-weight: 700;
    font-size: 1.2rem;
    transition: transform .25s ease;
}
.enhanced-cta:hover .cta-arrow {
    transform: translateX(4px);
}

/* B: Stripe Animation Enhancement */
.enhanced-cta::before {
    width: 5px;
    transition: width .25s ease, opacity .25s ease;
}
.enhanced-cta:hover::before {
    width: 9px;
}

/* C: Micro Badge */
.cta-microbadge {
    display: inline-block;
    margin-top: .35rem;
    background: #e3f6e9;
    color: #217208;
    padding: 3px 10px;
    font-size: .75rem;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* D: Tooltip fix */
.tooltip {
    z-index: 99999 !important;
}

/* ============================================================
   BUTTON SYSTEM
============================================================ */

.mypremodal .modal-btn,
.mypremodal .btn-yellow,
.mypremodal .btn-dark,
.btn-preresume-primary,
.btn-employer-primary {
    padding: 14px 32px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all .3s ease;
}

/* Jobseeker (Green) */
.btn-preresume-primary {
    background: #217208;
    color: #fff;
}
.btn-preresume-primary:hover {
    background:#1b5c06;
    transform:translateY(-2px);
    box-shadow:0 8px 16px rgba(33,114,8,.25);
}

/* Employer (Orange/Brown) */
.btn-employer-primary {
    background:#b7663a;
    color:#fff;
}
.btn-employer-primary:hover {
    background:#9d5731;
    transform:translateY(-2px);
    box-shadow:0 8px 16px rgba(183,102,58,.25);
}

/* Yellow Button */
.mypremodal .btn-yellow {
    background:linear-gradient(135deg,#f59e0b,#d97706);
    color:#fff;
}
.mypremodal .btn-yellow:hover {
    background:linear-gradient(135deg,#d97706,#b45309);
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(245,158,11,.35);
}

/* Dark Button */
.mypremodal .btn-dark {
    background:#1f2937;
    color:#fff;
    box-shadow:0 4px 12px rgba(31,41,55,.2);
}
.mypremodal .btn-dark:hover {
    background:#111827;
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(31,41,55,.3);
}

/* Divider */
.divider-text {
    position: relative;
    text-align: center;
    margin: .5rem 0 1rem;
}
.divider-text::before {
    content:"";
    position:absolute;
    top:50%; left:0; right:0;
    height:1px; background:#e5e7eb;
}
.divider-text span {
    position:relative;
    padding:0 12px;
    background:#fff;
    font-size:14px;
    color:#6b7280;
}

/* ============================================================
   ICON CIRCLES
============================================================ */

.icon-circle-preresume,
.icon-circle-employer {
    width:80px; height:80px;
    border-radius:999px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,0.2);
    backdrop-filter:blur(10px);
}

/* Mobile icon circles */
.icon-circle-mobile-preresume,
.icon-circle-mobile-employer {
    width:70px; height:70px;
    border-radius:999px;
    display:flex; align-items:center; justify-content:center;
    background:#f0fdf4;
}

/* Gradients */
.bg-preresume-gradient {
    background:linear-gradient(135deg,#217208 0%,#1b5c06 100%);
}
.bg-gradient-employer {
    background:linear-gradient(135deg,#b7663a 0%,#9d5731 100%);
}

/* Feature list icons */
.mypremodal .fa-check-circle {
    color:rgba(255,255,255,.9);
    font-size:18px;
}

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

@media (max-width: 767.98px) {
    .mypremodal .modal-dialog { margin: 1rem; }
    .mypremodal .modal-content { border-radius: 14px; }

    .mypremodal .modal-btn,
    .btn-yellow,
    .btn-dark,
    .btn-preresume-primary,
    .btn-employer-primary {
        width:100%;
        padding:14px;
    }
}

/* ============================================================
   ACCESSIBILITY
============================================================ */

.mypremodal button:focus,
.mypremodal a:focus {
    outline:3px solid rgba(59,130,246,.5);
    outline-offset:3px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .mypremodal .modal-content { animation:none; }
    .modal-btn,
    .btn-preresume-primary,
    .btn-employer-primary { transition:none; }
}

/* ============================================================
   DARK MODE
============================================================ */

@media (prefers-color-scheme: dark) {
    .mypremodal .modal-content {
        background:#1f2937;
        color:#f9fafb;
    }
    .mypremodal .modal-inner p,
    .mypremodal .modal-body p {
        color:#d1d5db;
    }
    .divider-text span {
        background:#1f2937;
    }
    .mypremodal .btn-close {
        filter:invert(1);
    }
}

/* ============================================================
   CTA Mobile Tweaks
============================================================ */

@media (max-width: 576px) {
    .cta-card { padding: 18px 20px; }
    .cta-card h3 { font-size: 1.1rem; }
}



/************************************************
      MYJOBO — MODERNISED REVOLUTION SLIDER UI
      Clean — Inter font — MyJobo branding (2025)
*************************************************/

/* -----------------------------
      BASIC WRAPPER CLEANUP
------------------------------*/
.tp-bannertimer { display: none; }

.tp-banner-container {
    position: relative;
    width: 100%;
    padding: 0;
    z-index: 1;
}

.tp-simpleresponsive > ul > li {
    border-radius: 18px;
    overflow: hidden;
}

.tp-banner {
    width: 100%;
    position: relative;
}

/* Captions */
.tp-caption {
    line-height: 1.35 !important;
    font-family: 'Inter', sans-serif;
}
.tp-caption a { color: inherit !important; }

/* -----------------------------
      BULLETS & ARROWS (Modern)
------------------------------*/
.tp-bullets.simplebullets.round .bullet {
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    margin: 0 5px;
    transition: 0.25s;
}
.tp-bullets.simplebullets.round .bullet.selected {
    background: #217208;
    border-color: #217208;
}

.tparrows {
    background: none !important;
}
.tp-arr-allwrapper {
    width: 48px;
    height: 58px;
    margin: 0 10px;
    cursor: pointer;
    border-radius: 12px;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(4px);
    transition: 0.3s;
}
.tp-arr-allwrapper:hover {
    background: rgba(0,0,0,0.55);
}

.tp-arr-iwrapper {
    font-size: 28px;
    color: #fff;
    line-height: 58px;
    text-align: center;
    font-family: 'FontAwesome';
    width: 100%;
    display: block;
}
.tp-leftarrow .tp-arr-iwrapper:before { content: "\f104"; }
.tp-rightarrow .tp-arr-iwrapper:before { content: "\f105"; }

/* -----------------------------
      SLIDE TYPOGRAPHY MODERN
------------------------------*/
.slide-h1 {
    text-transform: none;
    font-size: 52px;
    color: #1f1f1f;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
}

.slide-h2 {
    font-size: 42px;
    font-weight: 600;
    color: #333;
}

.big-font {
    font-size: 58px;
    font-weight: 800;
}

.large-desc {
    font-size: 16px;
    color: #4d4d4d;
}

.slide-h3 {
    font-size: 28px;
    color: #fff;
}

/* Modern main title */
.main-title {
    font-size: 64px;
    font-weight: 800;
    text-transform: none;
    color: #fff;
}

/* -----------------------------
      ICON CONTAINER
------------------------------*/
.icon-cont {
    padding: 16px 38px;
    border-radius: 12px;
    text-align: center;
    position: relative;
    background: rgba(33,114,8,0.9);
    color: #fff;
}

.icon-cont:after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 40%;
    border-width: 10px 10px 0 10px;
    border-style: solid;
    border-color: rgba(33,114,8,0.9) transparent transparent transparent;
}

.icon-cont i {
    font-size: 48px;
    margin-bottom: 10px;
}

.icon-cont span {
    font-size: 17px;
    font-weight: 500;
}

/* Buttons */
a.wit-btn {
    background: #fff;
    color: #217208 !important;
    border-radius: 50px;
    padding: 10px 28px;
    font-weight: 600;
}

/************************************************
     MODERNISED MESSAGING UI (SAFE, STRUCTURE KEPT)
*************************************************/

.messageWrap {
    padding: 40px 0;
    background: #f7f7f7;
    border-radius: 10px;
}

.message-body {
    background-color: #fafafa;
    border-radius: 10px;
}

/* Inbox */
.message-inbox {
    border-right: 3px solid #e8e8e8;
}
.message-inbox .message-header h4 {
    font-size: 18px;
    font-weight: 600;
    color: #1f1f1f;
}
.message-inbox .message-header span a.active {
    color: #b7663a; /* Accent color */
}

/* Messages List */
.message-history {
    max-height: 500px;
    overflow-y: auto;
}
.message-history li {
    transition: 0.2s;
    border-bottom: 1px solid #eee;
}
.message-history li:hover {
    background: #f5f5f5;
}
.message-history .active {
    background: #eef8f0;
}

/* User entry */
.message-history li .user-name .author span {
    font-weight: 600;
    color: #1f1f1f;
}

/* Chat Body */
.messages {
    height: 440px;
    overflow-y: auto;
    padding: 10px;
}
.messages > li {
    display: flex;
    gap: 14px;
    margin-bottom: 10px;
}

/* Friend bubble */
.friend-message .message {
    background-color: #fff;
    border-radius: 8px;
    padding: 14px 20px;
    position: relative;
}

/* Me bubble */
.my-message .message {
    background: #217208;
    color: #fff;
    border-radius: 8px;
    padding: 14px 20px;
    position: relative;
}
.my-message .message::before {
    border-left-color: #217208;
}

/* Chat form */
.chat-form {
    background: #f0f0f0;
    padding: 10px;
    border-radius: 0 0 10px 10px;
}
.chat-form textarea {
    border-radius: 8px;
}
.chat-form .input-group-prepend .input-group-text {
    background: #217208;
    border-radius: 6px;
    font-weight: 600;
}

/************************************************
    SMALL UTILITY TEXT STYLES UPDATED
*************************************************/
.large-text {
    font-size: 20px;
    color: #1f1f1f;
}
.larger-text {
    font-size: 26px;
    font-weight: 700;
}

.slidertext1 {
    font-size: 30px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
}
.sliderpara {
    font-size: 17px;
    font-weight: 500;
}
.slidertext5 a {
    background: #217208;
    font-family: 'Inter', sans-serif;
    border-radius: 35px;
}
.slidertext5 a:hover {
    background: #195907;
}

/*******************************************************
    MYJOBO — HOW IT WORKS (2025 REBUILD)
    Clean • Modern • Bootstrap 5.3 • Brand Green #217208
********************************************************/

/* Wrapper background (soft green/blue gradient) */
.howit-modern {
    background: linear-gradient(135deg, #eef2ff 0%, #e8fff0 100%);
    padding: 70px 0;
}

/* Section header */
.howit-modern .section-title {
    font-weight: 700;
    color: #1f1f1f;
    margin-bottom: 10px;
}

.howit-modern .section-subtitle {
    color: #6b7280;
    font-size: 1.15rem;
}

/* Card */
.how-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 32px;
    height: 100%;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    transition: all .25s ease;
    text-align: center;
}

.how-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}

/* Step badge */
.how-badge {
    background: #217208;
    color: #fff;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.85rem;
    margin-bottom: 14px;
    display: inline-block;
    font-weight: 600;
}

/* Icon container */
.how-icon-wrapper {
    width: 90px;
    height: 90px;
    margin: 0 auto 20px auto;
    background: #f8f9fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.05);
    transition: transform .3s ease;
}

.how-card:hover .how-icon-wrapper {
    transform: scale(1.1);
}

/* Icon */
.how-icon {
    font-size: 42px;
    color: #217208;
}

/* Step Title */
.how-card h4 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f1f1f;
    margin-bottom: 10px;
}

/* Step Text */
.how-card p {
    color: #6b7280;
    font-size: 0.95rem;
    line-height: 1.55;
}

/* ----------------------------------------------
   Stats Box Section (animated count blocks)
---------------------------------------------- */
.statsbox {
    padding: 25px 35px 5px;
    background: #f6f8fa;
    border-radius: 40px 40px 0 0;
    width: 530px;
    margin: -80px auto 0;
    position: relative;
    z-index: 3;
    box-shadow: 0 -15px 25px rgba(0,0,0,0.08);
}

.statint {
    text-decoration: none;
    transition: 0.3s;
}

.statico {
    margin-right: 15px;
}

.statico i {
    font-size: 36px;
    opacity: 0.9;
}

.statsbox h4 {
    font-size: 30px;
    margin-bottom: 0;
}

.statsbox p {
    font-size: 14px;
    opacity: 0.75;
}

/* Modern colours */
.statsbox .col:nth-child(1) h4,
.statsbox .col:nth-child(1) i {
    color: #217208;
}
.statsbox .col:nth-child(2) h4,
.statsbox .col:nth-child(2) i {
    color: #b7663a;
}
.statsbox .col:nth-child(3) h4,
.statsbox .col:nth-child(3) i {
    color: #217208;
}

/* ----------------------------------------------
   Popular Industries (pills)
---------------------------------------------- */
.popularind {
    margin-top: 30px;
    text-align: center;
}

.popularind h4 {
    margin-bottom: 12px;
    font-size: 18px;
    font-weight: 600;
}

.hmindlist { margin-bottom: 0; }

.hmindlist li {
    display: inline-block;
    margin: 6px 6px;
}

.hmindlist li a {
    border-left: 2px solid #217208;
    padding: 10px 15px;
    display: block;
    border-radius: 6px;
    background: #fff;
    color: #1f1f1f;
    font-size: 15px;
    transition: 0.25s ease;
}

.hmindlist li a:hover {
    background: #217208;
    color: #fff;
}

/* ----------------------------------------------
   Cities Search + Gallery Grid
---------------------------------------------- */
.citieswrap {
    background: #f0f4fa;
    padding: 50px 0;
}

.citiessrchlist li {
    margin-top: 30px;
    transition: 0.25s ease;
}

.citiessrchlist li:hover {
    transform: translateY(-4px);
}

.citiessrchlist .cityinfobox {
    background: #fff;
    padding: 16px;
    border-radius: 10px;
    transition: 0.3s;
    box-shadow: 0 0 0 rgba(0,0,0,0);
}

.citiessrchlist li:hover .cityinfobox {
    box-shadow: 0px 8px 20px rgba(0,0,0,0.08);
}

.citiessrchlist li h4 {
    margin: 0;
    font-size: 17px;
    display: flex;
    justify-content: space-between;
    font-weight: 500;
}

.citiessrchlist li span {
    font-size: 14px;
    font-weight: 400;
}

/* ----------------------------------------------
   City Figure Hover (Preserved Effects)
---------------------------------------------- */
.citiessrchlist li figure {
    float: left;
    min-width: 320px;
    max-width: 480px;
    width: 48%;
    max-height: 450px;
    background: #217208; /* updated brand color */
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    cursor: pointer;
    transition: 0.35s;
}

.citiessrchlist li figure img {
    width: 100%;
    opacity: 0.7;
    transform: scale(1.1);
    transition: 0.35s;
}

.citiessrchlist li figure figcaption {
    padding: 1.8em;
    color: #fff;
    text-transform: uppercase;
    font-size: 1.1em;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
}

/* Preserve original ruby effect */
figure.effect-ruby {
    background-color: #217208;
}

figure.effect-ruby img {
    opacity: 0.7;
    transform: scale(1.15);
    transition: opacity 0.35s, transform 0.35s;
}

figure.effect-ruby:hover img {
    opacity: 0.55;
    transform: scale(1);
}

figure.effect-ruby h2 {
    margin-top: 20%;
    transform: translateY(20px);
    transition: 0.35s;
}

figure.effect-ruby p {
    margin-top: 1em;
    padding: 10px 20px;
    border: 1px solid #fff;
    opacity: 0;
    transform: translateY(20px) scale(1.1);
    transition: 0.35s;
}

figure.effect-ruby:hover h2 {
    transform: translateY(0);
}

figure.effect-ruby:hover p {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/************************************************
        MYJOBO — Modernised Top Employers (2025)
        Clean Cards • Soft Shadows • Brand Colors
*************************************************/

/* Section Title */
.topemployers .viewallbtn {
    margin-top: 12px;
}
.topemployers .titleTop {
    text-align: center;
}

/* ----------------------------------------------
   Employer Cards (Carousel + Grid)
---------------------------------------------- */
.employerList li .empint,
.compnaieslist li .empint {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e8e8e8;
    padding: 22px 18px;
    text-align: center;
    transition: 0.28s ease;
    box-shadow: 0 0 0 rgba(0,0,0,0);
}

/* Hover State */
.employerList li .empint:hover {
    border-color: #217208;
    box-shadow: 0px 10px 22px rgba(0,0,0,0.08);
    transform: translateY(-4px);
}
.compnaieslist li .empint:hover {
    background: #f8f9fa;
    border-color: #dcdcdc;
    transform: translateY(-4px);
}

/* Inner Content */
.employerList li .empint a,
.compnaieslist li .empint a {
    color: #1f1f1f;
    text-decoration: none;
}

/* Employer Logo */
.emptbox {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
}

.emptbox .comimg {
    width: 65px;
    margin: 0 auto 12px;
}

.emptbox h4 {
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: 600;
}

.text-info-right .emloc {
    color: #8c96a3;
    font-size: 14px;
}

.cm-info-bottom {
    display: inline-block;
    background: #eef1f5;
    border-radius: 6px;
    color: #555;
    padding: 8px 22px;
    font-size: 15px;
    margin-top: 6px;
}

/* Employer Meta */
.employerList li h3,
.compnaieslist li h3 {
    font-size: 14px;
    margin-top: 12px;
    margin-bottom: 6px;
}

.employerList li p,
.compnaieslist li p {
    color: #777;
    font-size: 14px;
    line-height: 1.45;
}

.employerList li img,
.compnaieslist li img {
    width: 100%;
    border-radius: 10px;
}

/* Owl Carousel padding */
.employerList .owl-stage-outer {
    padding: 20px 0;
}

.employerList .owl-controls {
    text-align: center;
    margin-top: -10px;
}

.employerList .owl-controls .owl-nav i {
    display: inline-block;
    background: #333;
    color: #fff;
    font-size: 20px;
    padding: 9px 12px;
    margin: 0 5px;
    cursor: pointer;
    border-radius: 6px;
}

/* ----------------------------------------------
   Company List (Non-carousel)
---------------------------------------------- */
.compnaieslist li .emptbox {
    display: block;
    text-align: center;
}

.compnaieslist .emptbox .comimg {
    width: 65px;
    margin: 0 auto 15px;
}

/* Company Title */
.compnaieslist .emptbox h4 {
    font-size: 18px;
    margin-bottom: 12px;
    font-weight: 600;
}

.compnaieslist .emptbox h4:hover {
    color: #217208;
}

/* Company Location */
.compnaieslist .text-info-right .emloc {
    font-size: 15px;
    font-weight: 400;
    margin-top: 12px;
    color: #8c96a3;
}

/* Bottom info badge */
.compnaieslist .cm-info-bottom {
    margin-top: 12px;
    background: none;
    padding: 0;
}

.compnaieslist .cm-info-bottom span {
    display: inline-block;
    background: #eef1f5;
    padding: 8px 22px;
    border-radius: 6px;
    color: #555;
    font-size: 15px;
}

.compnaieslist li:hover .cm-info-bottom span {
    background: #217208;
    color: #fff;
}

/* Industry Text */
.compnaieslist li .indst {
    font-size: 15px;
    color: #555;
}

/************************************************
           == Top Search Sidebar ==
*************************************************/
.topsearchwrap h4 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    padding: 15px 25px;
    background: #f3f4f6;
    border-bottom: 1px solid #e5e7eb;
    color: #4a4f55;
}

.srchbx {
    border: 1px solid #e1e1e1;
    margin-bottom: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    overflow: hidden;
}

.srchbx .srchint {
    padding: 28px;
    background: #ffffff;
}

/************************************************
           == Category List Cards ==
*************************************************/
.catelist li {
    margin-top: 25px;
}

.catelist li a {
    display: flex;
    justify-content: space-between;
    background: #ffffff;
    border-left: 5px solid #217208;
    border-radius: 6px;
    padding: 15px 30px 15px 20px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.08);
    font-weight: 600;
    color: #1f1f1f;
    transition: 0.25s ease;
}

.catelist li:hover a {
    border-left-color: #b7663a;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.catelist li span {
    color: #217208;
    font-weight: 600;
}

/************************************************
           == Category Grid Cards ==
*************************************************/
.categorylisting li .catecard,
.intcategorylisting li .catecard {
    padding: 20px 10px;
    background-color: #ffffff;
    border-radius: 10px;
    text-align: center;
    margin-top: 12px;
    transition: 0.25s ease;
    border: 1px solid #eaeaea;
}

.categorylisting li .catecard:hover,
.intcategorylisting li .catecard:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
    border-color: #dcdcdc;
}

.categorylisting li .catecard h3,
.intcategorylisting li .catecard h3 {
    font-size: 15px;
    margin-top: 15px;
    margin-bottom: 10px;
    color: #1f1f1f;
    font-weight: 500;
}

.categorylisting li .catecard:hover h3,
.intcategorylisting li .catecard:hover h3 {
    color: #217208;
}

.categorylisting li .catecard .badge,
.intcategorylisting li .catecard .badge {
    background: #e9eff3;
    padding: 4px 15px;
    font-size: 14px;
    color: #217208;
    font-weight: 500;
    border-radius: 6px;
}

.categorylisting li .catecard .iconcircle,
.intcategorylisting li .catecard .iconcircle {
    display: inline-block;
    width: 70px;
    height: 70px;
    margin: 0 auto;
}
/************************************************
        MYJOBO — Modernised Search Tabs (2025)
        Clean Tabs • Brand Colors • Soft Shadows
*************************************************/

/* Wrapper */
.tabswrap {
    border-bottom: 3px solid #217208; /* new brand green */
    padding-bottom: 0;
}

/* Tab Navigation */
.tabswrap .nav-tabs {
    border-bottom: none;
    float: right;
    gap: 6px;
}

.tabswrap .nav-tabs > li {
    margin-bottom: 0;
}

/* Tab Links */
.tabswrap .nav-tabs > li > a {
    background: none;
    border: none;
    border-radius: 6px 6px 0 0;
    font-size: 15px;
    font-weight: 500;
    color: #4a4f55;
    padding: 12px 25px;
    transition: 0.25s ease;
}

/* Active + Hover */
.tabswrap .nav-tabs > li > a.active,
.tabswrap .nav-tabs > li > a.active:focus {
    background: #217208;
    color: #fff;
    border-radius: 6px 6px 0 0;
    font-weight: 600;
}

.tabswrap .nav-tabs > li > a:hover {
    color: #217208;
}

/* Last Item (link on right) */
.tabswrap .nav-tabs > li.last {
    float: right;
}

.tabswrap .nav-tabs > li.last a {
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: #4a4f55;
    margin-top: 8px;
    font-weight: 500;
}

.tabswrap .nav-tabs > li.last a:hover {
    color: #217208;
}

/************************************************
        Large Banner (clean modern card)
*************************************************/
.largebanner {
    text-align: left;
    margin: 28px auto;
    max-width: 760px;
    background: #fff;
    border: 1px solid #e6e6e6;
    padding: 10px;
    border-radius: 10px;
    position: relative;
    box-shadow: 0px 6px 18px rgba(0,0,0,0.06);
}

.largebanner img {
    display: block;
    border-radius: 8px;
}

/************************************************
        Softer Modern Shadows
*************************************************/
.shadow3,
.shadow4 {
    position: relative;
    box-shadow: 0px 4px 16px rgba(0,0,0,0.08);
}

.shadow3:before,
.shadow3:after {
    content: "";
    position: absolute;
    inset: 4px 18px;
    z-index: -1;
    border-radius: 80px / 24px;
    box-shadow: 0 6px 22px rgba(0,0,0,0.06);
}

/************************************************
        MYJOBO — Home Jobs (Modernised 2025)
*************************************************/

/* Job List Wrapper */
.jobslist {
    list-style: none;
}

.jobslist li {
    margin-top: 28px;
}

/* Job Card */
.jobslist li .jobint {
    background: #fff;
    padding: 18px;
    min-height: 120px;
    border-radius: 12px;
    border: 1px solid #e8e8e8;
    border-bottom-width: 2px;
    transition: 0.28s ease;
    box-shadow: 0 4px 18px rgba(0,0,0,0.06);
}

.jobslist li .jobint:hover {
    border-color: #217208;
    box-shadow: 0 8px 26px rgba(0,0,0,0.10);
}

/* Spacing Fix */
.jobslist li .col-md-7,
.jobslist li .col-md-9 {
    padding-left: 0;
}

/* Job Title */
.jobslist li h4 {
    margin-bottom: 6px;
}

.jobslist li h4 a {
    font-size: 18px;
    color: #1f1f1f;
    font-weight: 700;
    transition: 0.25s;
}

.jobslist li h4 a:hover {
    color: #217208; /* brand green */
}

/* Company Name */
.jobslist li .company {
    color: #777;
    padding: 6px 0;
}

.jobslist li .company a {
    color: #217208;
}

/* Job Location */
.jobslist li .jobloc {
    color: #222;
}

.jobslist li .jobloc span {
    color: #777;
}

/* Apply Button */
.jobslist li .applybtn {
    background: #fff;
    color: #217208;
    font-weight: 600;
    padding: 9px 14px;
    border: 1px solid #217208;
    border-radius: 45px;
    display: inline-block;
    margin-top: 20px;
    transition: 0.25s ease;
}

.jobslist li .applybtn:hover {
    background: #217208;
    color: #fff;
    text-decoration: none;
}

/************************************************
        New Box Variant
*************************************************/
.newjbox li .jobint {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    box-shadow: none;
    transition: 0.3s ease;
}

.newjbox.row {
    margin-top: 0;
}

.newjbox.row li h4 a {
    font-weight: 700;
}

.newjbox li .jobint:hover {
    transform: translateY(-3px);
    box-shadow: 0px 10px 28px rgba(0,0,0,0.15);
}

.newjbox li .jobint img {
    border-radius: 6px;
    background: #f1f1f1;
}

/************************************************
        Promote Badge
*************************************************/
.promotepof-badge {
    position: absolute;
    right: 0;
    top: 0;
}

.promotepof-badge:before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    border-top: 48px solid #b7663a; /* accent brand color */
    border-left: 48px solid transparent;
    border-radius: 0 16px 0 0;
}

.promotepof-badge i {
    position: relative;
    z-index: 5;
    color: #fff;
    margin: 10px 12px 0 0;
    font-size: 12px;
}

/************************************************
        View All Button
*************************************************/
.viewallbtn {
    text-align: center;
    margin-top: 40px;
}

.viewallbtn a {
    display: inline-block;
    background: #217208;
    color: #fff;
    padding: 14px 32px;
    font-size: 17px;
    font-weight: 600;
    border-radius: 40px;
    transition: 0.25s ease;
    box-shadow: 0 4px 14px rgba(33,114,8,0.35);
    position: relative;
    overflow: hidden;
}

.viewallbtn a:hover {
    transform: translateY(-3px);
    background: #195907;
    box-shadow: 0 6px 18px rgba(33,114,8,0.45);
    text-decoration: none;
}

/************************************************
        Job Type Labels
*************************************************/
.partTime,
.fulltime,
.freelance {
    display: inline-block;
    font-size: 13px;
    padding: 4px 10px;
    border-radius: 20px;
    color: #fff;
}

.partTime { background: #f8a60c; }
.fulltime { background: #adadad; }
.freelance { background: #ff0000; }

/* Dynamic Titles */
label.fulltime[title="Part Time"]       { background: #0c8ef8; }
label.fulltime[title="Freelance"]      { background: #3cbb75; }
label.fulltime[title="Contract"]       { background: #9a0cf8; }
label.fulltime[title="Internship"]     { background: #9B54F4; }
label.fulltime[title="First Shift (Day)"] { background: #AFCB59; }
label.partTime[title="First Shift (Day)"] { background: #AFCB59; }
label.partTime[title="Second Shift (Afternoon)"] { background: #688CD5; }
label.partTime[title="Third Shift (Night)"] { background: #EF7D7D; }
label.partTime[title="Rotating"] { background: #B09EEB; }

/************************************************
        Featured Jobs
*************************************************/
.featuredjobwrap {
    position: relative;
    overflow: hidden;
}

.featuredlist {
    list-style: none;
}

.featuredlist .jobint {
    background: #fff;
    padding: 18px;
    border-radius: 16px;
    border: 1px solid #e6e6e6;
    transition: 0.25s ease;
    margin-top: 30px;
}

.featuredlist .jobint:hover {
    border-color: #217208;
    box-shadow: 0 10px 28px rgba(0,0,0,0.12);
    transform: translateY(-3px);
}

/* Icons */
.fticon i {
    background: #e7edf2;
    color: #8da0b5;
    padding: 8px;
    border-radius: 8px;
    margin-right: 10px;
    font-size: 14px;
}

/************************************************
        Featured Job Metadata
*************************************************/
.featuredlist .jobint h4 {
    margin: 0;
    padding: 15px 0;
}

.featuredlist .jobint h4 a {
    font-size: 18px;
    color: #1f1f1f;
}

.featuredlist .jobint h4 a:hover {
    color: #217208;
}

.featuredlist .jobint strong i {
    color: #217208;
}

.featuredlist .jobint span {
    color: #777;
}

/************************************************
        Company Panel (Featured)
*************************************************/
.jobcompany {
    margin-top: 20px;
    padding: 12px 18px;
    border-radius: 16px;
    background: #eef3f7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.jobcompany .company-logo img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: contain;
    border: 2px solid #fff;
}

/************************************************
        Job Seeker Listing (Home Page)
*************************************************/
.userlisting .seekerbox {
    padding: 25px;
    border-radius: 12px;
    transition: 0.25s ease;
    box-shadow: 0 8px 18px rgba(0,0,0,0.04);
}

.userlisting .seekerbox:hover {
    box-shadow: 0 8px 22px rgba(0,82,204,0.18);
}

/* Image */
.userlisting .userltimg {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #fff;
    border: 4px solid #fff;
    overflow: hidden;
    margin: 0 au

/************************************************
    MYJOBO — MODERNISED LOGIN & EMPLOYER BOXES
    Clean • Corporate • Minimal (2025 Standard)
*************************************************/

/* Wrapper spacing */
.infodatawrap {
    padding-top: 40px;
}

/* =============================================
   GENERIC LOGIN BOX (Jobseeker CTA)
============================================= */
.userloginbox {
    background: #ffffff;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 2rem 2.2rem;
    box-shadow: var(--shadow-md);
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

/* Top accent bar */
.userloginbox::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    width: 100%;
    background: var(--myjobo-green);
    opacity: 0.9;
    border-radius: 12px 12px 0 0;
}

/* Hover state – minimal, no animation gimmicks */
.userloginbox:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--gray-300);
}

/* Remove floating images from legacy design */
.userloginbox img {
    display: none !important;
}

/* Typography */
.userloginbox h3 {
    color: var(--myjobo-green);
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.userloginbox p {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--gray-700);
    opacity: 0.95;
    margin: 0;
}

/* =============================================
   EMPLOYER BOX (Hire talent CTA)
============================================= */
.emploginbox {
    background: #ffffff;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 2.2rem 2.4rem;
    position: relative;
    box-shadow: var(--shadow-md);
    transition: var(--transition-smooth);
}

/* Top accent bar (Employer = darker green) */
.emploginbox::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    width: 100%;
    background: var(--myjobo-green-dark);
    border-radius: 12px 12px 0 0;
}

/* Remove old circular background highlight */
.emploginbox::after {
    display: none !important;
}

.emploginbox:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--gray-300);
}

/* Typography */
.emploginbox .titleTop h3,
.emploginbox .titleTop h4 {
    color: var(--myjobo-green);
    font-weight: 700;
}

.emploginbox p {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--gray-700);
    opacity: 0.95;
    margin: 0;
}

/* Utility wrapper (ensures content sits above accent bars) */
.usrintxt {
    position: relative;
    z-index: 2;
}

/* Mobile refinement */
@media (max-width: 768px) {
    .userloginbox,
    .emploginbox {
        padding: 1.6rem 1.8rem;
        border-radius: 10px;
    }

    .userloginbox:hover,
    .emploginbox:hover {
        transform: translateY(-3px);
    }
}


.testimonials2025 {
    background: #f8fafb;
}

.section-title {
    font-size: 2rem;
    font-weight: 700;
    color: #1f1f1f;
}

.section-subtitle {
    font-size: 1rem;
    color: #6b7280;
}

/* Swiper */
.testimonialsSwiper {
    padding-bottom: 40px;
}

.testimonialsSwiper .swiper-wrapper {
    align-items: center;
}

/* Card */
.testimonial-card {
    max-width: 760px;
    margin: auto;
    text-align: center;
    background: #ffffff;
    padding: 50px 35px;
    border-radius: 22px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.07);
    border: 1px solid rgba(0,0,0,0.06);
    transition: all .3s ease;
}

.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 40px rgba(0,0,0,0.12);
}

/* Avatar */
.testimonial-avatar img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    border: 3px solid #ffffff;
    margin-bottom: 15px;
}

/* Stars */
.testimonial-stars i {
    color: #f9b707;
    margin: 0 2px;
    font-size: 1.1rem;
}

/* Text */
.testimonial-text {
    font-size: 1.15rem;
    color: #333;
    line-height: 1.7;
    margin-bottom: 25px;
    font-style: italic;
}

/* Name */
.testimonial-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: #217208;
}

/* Company */
.testimonial-company {
    font-size: 0.95rem;
    color: #6b7280;
}

/* Pagination */
.swiper-pagination-bullet {
    background: #c4c4c4;
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background: #217208 !important;
    width: 14px;
    height: 14px;
} 

/************************************************
           == App Box css==
*************************************************/
.appwraper {
	background: url(../images/app-bg.jpg) no-repeat top;
	background-size: cover;
	padding-top: 70px;
	background-attachment: fixed;
}
.appimg {
	text-align: center;
}
.appimg img {
	display: block;
}
.appwraper .titleTop {
	text-align: left;
	margin-bottom: 10px;
}
.appwraper .subtitle {
	color: #fff;
}
.appwraper .titleTop h3 {
	color: #fff;
	text-transform: uppercase;
	margin-top: 5px;
}
.appwraper .subtitle2 {
	font-size: 30px;
	font-weight: 600;
	margin-bottom: 30px;
	color: #fff;
}
.appwraper p {
	color: #fff;
	line-height: 24px;
}
.appwraper .appbtn {
	margin-top: 45px;
	margin-bottom: 30px
}
.appwraper .appbtn a {
	display: inline-block;
	margin-right: 10px;
}
/*Page Title*/
.pageTitle {
	padding:30px 0;
	position: relative;
	text-align: center;
	background: #F1EDFA;
background: -webkit-linear-gradient(90deg, rgba(241, 237, 250, 1) 0%, rgba(228, 245, 229, 1) 100%);
background: -moz-linear-gradient(90deg, rgba(241, 237, 250, 1) 0%, rgba(228, 245, 229, 1) 100%);
background: linear-gradient(90deg, rgba(241, 237, 250, 1) 0%, rgba(228, 245, 229, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#F1EDFA", endColorstr="#E4F5E5", GradientType=1);
}
.pageTitle h5 {
	font-size: 36px;
	font-weight:700;
	color: #000;
	margin-bottom: 0;
}
.breadCrumb {
	color: #fff;
	margin-top: 15px;
}
.breadCrumb a {
	color: #555;
	display: inline-block;
	padding: 0 5px;
}
.breadCrumb span {
	color: #990;
	display: inline-block;
	padding-left: 5px;
}
.buildpagebtn{text-align:center; margin-top:30px; font-size:16px;}
.buildpagebtn a{display:inline-block; color:#000; font-weight:bold;}
.buildpagebtn a:hover{color:#0357e9;}
/************************************************
           == Search List (Modernised) ==
*************************************************/

.turbolinks-progress-bar {
    background: #217208 !important;
}

.listpgWraper {
    padding: 50px 0;
    min-height: 420px;
}

/************************************************
           == Page Search Bar ==
*************************************************/
.pageSearch {
    padding: 40px 0;
    position: relative;
    text-align: center;
    background: linear-gradient(135deg, #f3f0fa, #e7f6e8);
}

.pageSearch h3 {
    color: #333;
    margin-top: 15px;
    font-weight: 700;
}

.pageSearch h5 {
    color: #111;
    margin-top: 10px;
    opacity: 0.85;
}

.pageSearch .searchform {
    margin: 0 auto;
}

/* Search Form Container */
.searchform {
    background: #fff;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid #217208;
    box-shadow: 0 6px 22px rgba(0,0,0,0.05);
}

.searchform .input-group {
    gap: 12px;
}

/* Form controls */
.searchform .form-control {
    height: auto;
    padding: 13px 14px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    background: #fafafa;
}

.searchform select.form-control {
    background: #fff;
    line-height: 24px;
    appearance: auto;
}

.searchform .btn {
    background: #17d27c;
    font-size: 16px;
    color: #fff;
    padding: 14px 22px;
    border-radius: 8px !important;
    font-weight: 600;
    transition: 0.25s ease;
}

.searchform .btn:hover {
    background: #145c43;
}

.searchform .filterlink {
    background: #444;
    display: flex;
    align-items: center;
    border-radius: 8px;
    padding: 14px 16px;
}

/************************************************
           == Sidebar (Modernised) ==
*************************************************/

.jobreqbtn {
    margin-bottom: 25px;
}

.jobreqbtn a {
    display: block;
    padding: 12px 20px;
    margin-bottom: 10px;
    background: #217208;
    color: #fff;
    border-radius: 8px;
    font-weight: 600;
    transition: 0.25s ease;
}

.jobreqbtn a:hover {
    background: #195c06;
}

.jobreqbtn a.btn-job-alert-disabled {
    color: #999 !important;
    border: 1px solid #bbb;
    background: #f5f5f5;
    cursor: default;
}

.jobreqbtn a.btn-job-alert {
    background: #217208;
    color: #fff;
}

.sidebar .widget {
    margin-bottom: 25px;
    border-bottom: 1px solid #e2e2e2;
    padding-bottom: 20px;
}

.sidebar .widget-title {
    font-size: 15px;
    font-weight: 700;
    color: #111;
    margin-bottom: 14px;
}

/* Option list */
.optionlist {
    list-style: none;
    padding-left: 0;
}

.optionlist li {
    margin-bottom: 12px;
    padding: 5px 0 5px 32px;
    position: relative;
}

.optionlist li span {
    position: absolute;
    right: 0;
    top: 6px;
    color: #707070;
    font-size: 14px;
}

/* Custom Checkbox */
.optionlist li input[type=checkbox] {
    display: none;
}

.optionlist li input[type=checkbox] + label {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
    position: absolute;
    left: 0;
    top: 0;
    transition: 0.2s ease;
}

.optionlist li input[type=checkbox]:checked + label {
    border-color: #217208;
    background: #217208;
}

.optionlist li input[type=checkbox]:checked + label:before {
    content: '\f00c';
    font-family: 'FontAwesome';
    color: #fff;
    position: absolute;
    left: 4px;
    top: 2px;
    font-size: 12px;
}

/* Sidebar links */
.sidebar a {
    color: #217208;
    display: inline-block;
    margin-top: 10px;
    font-weight: 600;
}

.sidebar a:hover {
    color: #154f06;
}

.searchnt .btn {
    background: #217208;
    display: block;
    border-radius: 5px;
    width: 100%;
    color: #fff;
    font-weight: 700;
    padding: 12px 15px;
}

.sidebar .gad {
    margin-top: 20px;
    text-align: center;
}

.social a {
    color: #00a8ff;
    font-size: 28px;
    margin-right: 5px;
}

.social a:hover {
    color: #000;
}

/************************************************
               == Search Results List ==
*************************************************/

.topstatinfo {
    margin-bottom: 30px;
}

/* Job Card */
.searchList {
    list-style: none;
    margin-bottom: 30px;
}

.searchList > li {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e8e8e8;
    padding: 22px;
    margin-bottom: 18px;
    transition: 0.35s ease;
    box-shadow: 0 6px 18px rgba(0,0,0,0.05);
}

.searchList > li.featured {
    background: #f6f2ff;
    border-color: #dcd3ff;
}

.searchList > li:hover {
    box-shadow: 0 12px 28px rgba(0,0,0,0.08);
    border-color: #217208;
}

.searchList > li .jobltinfo {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* Company logo */
.searchList > li .jobimg {
    width: 90px;
    flex: 0 0 90px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    padding: 6px;
}

/* Job Title */
.searchList > li h3 a {
    font-size: 19px;
    font-weight: 700;
    color: #111;
}

.searchList > li h3 a:hover {
    color: #217208;
}

/* Company name */
.searchList li .companyName {
    margin: 10px 0;
    color: #7c7c7c;
}

.searchList li .companyName a {
    color: #7c7c7c;
}

/* Location */
.searchList li .location {
    color: #222;
}

.searchList li .location span {
    color: #444;
}

/* Buttons */
.searchList li .listbtn {
    margin-top: 20px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-left: auto;
}

.searchList li .listbtn a {
    background: #fff;
    border-radius: 8px;
    padding: 0 16px;
    line-height: 38px;
    text-transform: uppercase;
    font-weight: 700;
    border: 1px solid #217208;
    color: #217208;
    transition: 0.25s ease;
}

.searchList li .listbtn a:hover {
    background: #217208;
    color: #fff;
}

.searchList li .listbtn a.favbtn {
    border-color: #d60000;
    color: #d60000;
}

.searchList li .listbtn a.favbtn:hover {
    background: #fff5f5;
}

/* Description text */
.searchList li p {
    line-height: 24px;
    color: #444;
    font-size: 15px;
    margin-top: 10px;
}

/* Category info */
.searchList li .cateinfo {
    color: #217208;
    margin: 12px 0;
    font-weight: 600;
}

/* Salary */
.searchList li .minsalary {
    font-size: 22px;
    font-weight: 700;
    text-align: right;
    color: #217208;
}

.searchList li .minsalary span {
    color: #777;
    font-weight: 400;
}

/************************************************
                 == Pagination ==
*************************************************/
.pagiWrap .showreslt {
    font-weight: 600;
    margin-top: 10px;
}

.pagiWrap .pagination {
    text-align: right;
    margin: 0;
}

.btn-bars {
    background: #ececec;
    padding: 10px 18px;
    border-radius: 6px;
}

.btn-bars:hover {
    background: #dcdcdc;
}

.btn-primary {
    background-color: #217208;
    border: none;
    padding: 10px 26px;
}

/************************************************
               == Featured Jobs ==
*************************************************/

.featuredjobswrap {
    background: #f4f4f4;
    padding: 50px 0;
}

.countrieslist {
    justify-content: center;
}

.countrieslist .countryinfobox {
    margin-top: 30px;
    border: 1px solid #eee;
    background: #fff;
    padding: 15px;
    border-radius: 10px;
    transition: 0.25s ease;
}

.countrieslist .countryinfobox h4 {
    color: #333;
    font-size: 16px;
    margin-bottom: 5px;
}

.countrieslist .countryinfobox span {
    color: #888;
}

.countrieslist .countryinfobox:hover {
    border-color: #217208;
}

/************************************************
           == Job Detail (Modernised 2025) ==
*************************************************/

.job-header {
    background: #fff;
    margin-bottom: 30px;
    border-radius: 15px;
    border: 1px solid #e8e8e8;
    box-shadow: 0 4px 18px rgba(0,0,0,0.05);
}
.job-header.nomrg {
    margin-bottom: 0;
}

.job-header .jobinfo {
    padding: 24px;
}

.jobPagetitle .jobinfo {
    padding: 0 0 30px 0;
}

.jobPagetitle .jobinfo h2 {
    font-size: 26px;
    font-weight: 700;
    color: #222;
}

.jobPagetitle .jobinfo .ptext {
    color: #777;
    margin: 14px 0;
    font-size: 15px;
}

.jobPagetitle .jobinfo .salary {
    font-size: 17px;
    font-weight: 700;
    color: #666;
}
.jobPagetitle .jobinfo .salary strong {
    color: #111;
}

/************************************************
                 Company Info Box
*************************************************/

.companyinfo {
    margin-bottom: 30px;
    background: #f8faff;
    padding: 32px;
    border-radius: 15px;
    border: 1px solid #e5e8ef;
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}

.companyinfo h3 {
    margin-bottom: 26px;
    color: #217208;
    font-size: 24px;
    font-weight: 700;
}

.companyinfo .companylogo {
    width: 100px;
    background: #fff;
    padding: 6px;
    border-radius: 15px;
    float: left;
    margin-right: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.07);
}

.companyinfo .companylogo img {
    width: 100%;
    border-radius: 12px;
}

.companyinfo .ptext {
    color: #217208;
    padding: 8px 0;
}

.companyinfo .title a {
    font-size: 22px;
    font-weight: 700;
    color: #111;
}

.companyinfo .opening a {
    color: #217208;
    font-weight: 600;
}

/************************************************
                 Other Utilities
*************************************************/

.companyoverview p {
    color: #555;
    margin-bottom: 0;
}

.nodatabox {
    padding: 35px;
    background-color: #f0f0f0;
    border-radius: 10px;
    text-align: center;
}
.nodatabox h4 {
    font-size: 24px;
    margin-bottom: 0;
}

.delete_alert {
    color: #dd0000;
}

.alrtstable th {
    font-weight: 700;
    background: #f4f4f4;
}

/************************************************
                 Popup / Overlay
*************************************************/

.popmessage {
    position: fixed;
    background: #fff;
    padding: 35px;
    top: 50%;
    left: 50%;
    max-width: 300px;
    text-align: center;
    margin-left: -150px;
    z-index: 10;
    box-shadow: 0 0 40px rgba(0,0,0,0.2);
    color: #12bb08;
    font-size: 18px;
    font-weight: 700;
    line-height: 26px;
    border-radius: 10px;
}

.bgoverlay {
    background: rgba(0,0,0,0.55);
    position: fixed;
    top: 0; right: 0; left: 0; bottom: 0;
    z-index: 7;
}

/************************************************
           == Candidate Info (Job Header) ==
*************************************************/

.job-header .jobinfo .candidateinfo .userPic {
    float: left;
    width: 100px;
    margin-right: 20px;
    padding: 6px;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

.loctext {
    margin-top: 15px;
}
.loctext i {
    margin-right: 5px;
    width: 20px;
    color: #217208;
}
.loctext a {
    color: #333;
}

.job-header .jobinfo .candidateinfo .title {
    font-size: 24px;
    color: #222;
    font-weight: 700;
}

.job-header .jobinfo .candidateinfo .desi {
    font-size: 17px;
    color: #666;
    margin-top: 10px;
}

.job-header .jobinfo .candidateinfo .loctext {
    line-height: 24px;
    color: #555;
    margin-top: 8px;
}

.container {
    max-width: 1350px;
}

/************************************************
                  User Main Info
*************************************************/

.usercoverimg {
    position: relative;
    height: 240px;
    background: #333;
    overflow: hidden;
    border-radius: 15px 15px 0 0;
}
.usercoverimg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.userMaininfo {
    border: 1px solid #e3e3e3;
    padding: 20px;
    display: flex;
    gap: 15px;
    background: #fff;
    border-radius: 0 0 15px 15px;
}

.userMaininfo .userPic {
    width: 100px;
    height: 100px;
    flex: 0 0 100px;
    overflow: hidden;
    border-radius: 12px;
    background: #f1f1f1;
}
.userMaininfo .userPic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.userMaininfo h3 {
    color: #111;
    margin-bottom: 5px;
}
.userMaininfo h3 span {
    font-size: 14px;
    color: #888;
}

.userMaininfo .desi {
    font-size: 15px;
    color: #444;
}

.redyto {
    color: #2bc15b;
    margin-bottom: 10px;
}

.membersinc {
    color: #333;
    font-size: 14px;
    margin-top: 10px;
}

/************************************************
               User Links (Apply etc.)
*************************************************/

.userlinkstp {
    padding: 20px 25px;
    background: #f3f4f9;
    margin-bottom: 30px;
    border-radius: 0 0 15px 15px;
    display: flex;
    gap: 12px;
    align-items: center;
}

.userlinkstp.applybox {
    text-align: center;
    background: #fff;
    border-radius: 5px;
}

.userlinkstp a {
    color: #217208;
    font-weight: 600;
    padding: 10px 25px;
    font-size: 14px;
    border-radius: 8px;
    border: 1px solid #217208;
    transition: .25s ease;
}

.userlinkstp a.apply {
    background: #217208;
    color: #fff;
    font-size: 18px;
    border-color: #217208;
}

.userlinkstp a.report {
    color: #d30e0e;
    border-color: #d30e0e;
}

.userlinkstp a:hover {
    background: #217208;
    color: #fff;
}

.userlinkstp a.report:hover {
    background: #d30e0e;
    color: #fff;
}

.userlinkstp .jbexpire {
    background: #ff7c69;
    color: #fff;
    padding: 10px 15px;
    border-radius: 6px;
    cursor: not-allowed;
}

/************************************************
                 User Detail Box
*************************************************/

.userdetailbox {
    margin-bottom: 30px;
    border-bottom: 1px solid #e2e2e2;
    padding-bottom: 30px;
}

.userdetailbox h3 {
    font-size: 20px;
    font-weight: 700;
}

.userdetailbox p {
    font-size: 16px;
    line-height: 28px;
    color: #555;
}

.userdetailbox iframe {
    width: 100%;
    height: 350px;
}

/************************************************
                   Related Jobs
*************************************************/

.relatedJobs {
    margin-bottom: 30px;
}

.relatedJobs h3 {
    font-size: 24px;
    font-weight: 700;
    color: #444;
    margin-bottom: 15px;
}

.relatedJobs .searchList li {
    margin-bottom: 15px;
}

/************************************************
                Job Buttons (Bottom)
*************************************************/

.jobButtons {
    padding: 20px 25px;
    background: linear-gradient(135deg, #f3f0fa, #e8f5e8);
    border-radius: 0 0 13px 13px;
}

.jobButtons.applybox {
    text-align: right;
    background: #fff;
    border-radius: 5px;
    padding: 0;
    margin-top: 15px;
}

.jobButtons a {
    margin-right: 10px;
    color: #217208;
    font-weight: 600;
    padding: 10px 22px;
    font-size: 16px;
    border-radius: 40px;
    background: #fff;
    border: 1px solid #217208;
    transition: .25s ease;
}

.jobButtons a.apply {
    background: #17d27c;
    color: #fff;
    font-size: 19px;
    border-color: #17d27c;
}

.jobButtons a.report {
    color: #d00;
    border-color: #d00;
}

.jobButtons a:hover {
    background: #217208;
    color: #fff;
}

.jobButtons a.report:hover {
    background: #d00;
    color: #fff;
}

/************************************************
                Content Box (Job Description)
*************************************************/

.job-header .contentbox {
    padding: 35px;
}

.job-header .contentbox h3 {
    font-size: 20px;
    font-weight: 700;
    color: #222;
    margin-bottom: 10px;
}

.job-header .contentbox p {
    line-height: 26px;
    color: #555;
    margin-top: 18px;
    margin-bottom: 0;
    word-wrap: break-word;
}

.job-header .contentbox ul {
    margin-bottom: 30px;
}

.job-header .contentbox ul li {
    padding: 5px 0 5px 25px;
    position: relative;
    line-height: 24px;
}

.job-header .contentbox ul li:before {
    content: '\f00c';
    font-family: 'FontAwesome';
    color: #217208;
    position: absolute;
    left: 0;
}

/************************************************
                Skills (Tags)
*************************************************/

ul.skillslist {
    margin-bottom: 0 !important;
}

ul.skillslist li {
    display: inline-block;
    padding: 0 !important;
}

ul.skillslist li a {
    display: inline-block;
    background: #eef2f7;
    color: #444;
    padding: 10px 18px;
    margin: 5px 10px 5px 0;
    border-radius: 40px;
    font-weight: 600;
    font-size: 14px;
    transition: .25s ease;
}

ul.skillslist li a:hover {
    background: #217208;
    color: #fff;
}

/************************************************
            Job Detail Table
*************************************************/

.jobdetail {
    padding: 35px;
}

.jobdetail .table-bordered {
    border: none;
    margin-bottom: 0;
}

.jobdetail .table-bordered td {
    border: none;
    border-top: 1px solid #ddd;
}

.jobdetail h3 {
    font-size: 18px;
    font-weight: 700;
    color: #217208;
}

/************************************************
             Experience & Education
*************************************************/

.experienceList,
.educationList {
    margin-bottom: 0 !important;
}

.experienceList li,
.educationList li {
    margin-top: 30px;
    padding-left: 40px;
    position: relative;
}

.educationList li .exdot,
.experienceList li .exdot {
    width: 12px;
    height: 12px;
    background: #ddd;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 5px;
}

.educationList li .expbox:before,
.experienceList li .expbox:before {
    width: 2px;
    height: calc(100%);
    background: #ddd;
    content: '';
    position: absolute;
    top: 10px;
    left: 5px;
}

.experienceList li .expbox:before {
    border: 1px dashed #eee;
}

/* Titles */
.educationList li h4,
.experienceList li h4 {
    font-size: 18px;
    font-weight: 700;
    color: #222;
}

.educationList li .date {
    font-weight: 700;
    color: #555;
}

.experienceList .expcomp {
    font-weight: 700;
    color: #444;
}

.excity i,
.expcomp i {
    color: #999;
    margin-right: 5px;
}

/************************************************
             Portfolio Gallery
*************************************************/

.userPortfolio li {
    padding: 0 15px !important;
    margin-top: 30px;
}

.userPortfolio li .imgbox {
    overflow: hidden;
    position: relative;
    border-radius: 10px;
}

.userPortfolio li .itemHover {
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(22,34,46,.92);
    transform: scale(0);
    transition: all .5s ease;
    top: 0;
    left: 0;
}

.userPortfolio li:hover .itemHover {
    transform: scale(1);
}

/************************************************
               Skills & Languages
*************************************************/

.ptsklbx {
    padding: 35px;
    border-top: 1px solid #eee;
}

.profileskills,
.profilelang {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.profileskills li .skillbox,
.langbox {
    border: 1px solid #e3e3e3;
    padding: 15px 20px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 7px;
    background: #f5f7fc;
    transition: .25s ease;
}

.profileskills li .skillbox:hover {
    border-color: #217208;
}

.profilelang h5 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 5px;
}

.profilelang p {
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
}
 
/************************************************
           == CMS Pages (Modernised 2025) ==
*************************************************/

.inner-page {
    padding: 60px 0;
}

/* Page Titles */
.inner-page .title {
    text-align: center;
    margin-bottom: 45px;
}

.inner-page .title > span {
    color: #444;
    font-size: 17px;
    margin-bottom: 12px;
    display: block;
    font-weight: 500;
}

.inner-page .title h2 {
    color: #222;
    font-size: 38px;
    font-weight: 800;
    letter-spacing: .5px;
    margin: 0;
    line-height: 1.2;
}

.inner-page .title > p {
    line-height: 26px;
    font-size: 16px;
    color: #666;
    max-width: 700px;
    margin: 12px auto 0;
}

/************************************************
                Contact Section
*************************************************/

.contact-wrap .titleTop {
    margin-bottom: 30px;
}
.contact-wrap .titleTop h3 {
    font-size: 34px;
    font-weight: 700;
    color: #222;
}

.contact {
    margin-bottom: 30px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* Icon Box */
.contact > span {
    background: #217208;
    font-size: 28px;
    line-height: 78px;
    text-align: center;
    width: 80px;
    height: 80px;
    flex: 0 0 80px;
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.inner-page .fa-home:before {
    content: "\f015";
}

/* Text Block */
.information {
    overflow: hidden;
    padding-right: 20px;
    margin-top: 5px;
}

.information > strong {
    color: #111;
    display: table;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.information > p {
    line-height: 24px;
    margin: 0;
    font-size: 15px;
    color: #555;
}

/************************************************
                Contact Form
*************************************************/

.contact-form input,
.contact-form textarea {
    color: #555;
    border: 1px solid #e6e6e6;
    margin-bottom: 25px;
    padding: 15px 20px;
    background: #f7f7f7;
    font-size: 16px;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.contact-form textarea {
    height: 200px;
}

/* Improved focus style */
.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #217208;
    background: #ffffff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(33,114,8,0.15);
}

/* Submit Button */
.contact-form button {
    background-color: #217208;
    border: none;
    color: #fff;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 700;
    padding: 16px 40px;
    margin-top: 10px;
    border-radius: 8px;
    letter-spacing: .5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(33,114,8,0.2);
}

.contact-form button:hover {
    background-color: #195a06;
    box-shadow: 0 6px 18px rgba(33,114,8,0.25);
}

/************************************************
           == FAQs (Modernised 2025) ==
*************************************************/

.faqs {
    margin-bottom: 40px;
}

.faqs .panel-default > .panel-heading {
    background: none;
    border: none;
    padding: 0;
}

/* Accordion Header */
.faqs h4 a {
    padding: 16px 55px 16px 18px;
    display: block;
    background: #217208;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    position: relative;
    border-radius: 10px;
    transition: all .3s ease;
    box-shadow: 0 3px 10px rgba(33,114,8,0.25);
}

/* Panel container */
.panel-group .panel {
    border-radius: 12px;
    margin-bottom: 20px;
    border: 1px solid #e6e6e6;
    overflow: hidden;
    background: #fff;
    transition: all .3s ease;
}

/* Panel Body */
.panel-group .panel-body {
    line-height: 26px;
    color: #555;
    font-size: 15px;
    padding: 18px;
}

/* Hover and Active State */
.faqs h4 a:hover,
.faqs h4 a:active {
    text-decoration: none;
    background: #195a06;
    color: #fff;
}

/* Expanded Icon */
.faqs h4 a:before {
    content: "\f068";
    font-family: 'FontAwesome';
    background: #fff;
    width: 32px;
    padding: 6px 0;
    color: #217208;
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 14px;
    border-radius: 6px;
    text-align: center;
    transition: all .3s ease;
}

/* Collapsed Icon */
.faqs h4 .collapsed:before {
    content: "\f067";
    background: #ccc;
    color: #fff;
}

/* Collapsed header */
.faqs h4 a.collapsed {
    background: #fff;
    color: #444;
    border: 1px solid #e6e6e6;
    box-shadow: none;
}

/************************************************
           == Form Panel (Modernised 2025) ==
*************************************************/

.formpanel {
    margin-top: 25px;
}

.formpanel .formrow {
    margin-bottom: 18px;
}

/* Labels */
.formpanel .formrow > label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 15px;
    color: #555;
}
.formpanel .formrow > label span {
    color: #e40404;
}

/* Inputs */
.formpanel .form-control {
    height: auto;
    border-radius: 10px;
    padding: 12px 14px;
    border: 2px solid #d9e1ea;
    font-size: 16px;
    transition: all .25s ease;
    background: #f9fafb;
}

/* Focus State */
.formpanel .form-control:focus {
    border-color: #217208;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(33,114,8,0.15);
    outline: none;
}

/* Select */
.formpanel select.form-control {
    padding: 12px 14px;
    appearance: auto;
}

/* Textarea */
.formpanel textarea.form-control {
    height: 160px;
}

/* Submit Button */
.formpanel .btn {
    width: 100%;
    background: #217208;
    color: #fff;
    border-radius: 8px;
    padding: 12px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    transition: all .3s ease;
}

.formpanel .btn:hover {
    background: #195a06;
    color: #fff;
}

/* Inline Validation */
.formpanel .formrow .help-block {
    color: #e70000;
    display: block;
    margin-top: 5px;
}

.formpanel.mt0 {
    margin-top: 0;
}

#projects_div h3 {
    font-size: 16px;
    margin-top: 5px;
}

.featchoose li {
    margin-bottom: 10px;
}

/************************************************
               Google Map 
*************************************************/

.gmap {
    margin-top: 20px;
}
.gmap iframe {
    height: 250px;
    width: 100%;
    border: none;
}

.googlemap iframe {
    height: 400px;
    width: 100%;
    border: none;
}

/************************************************
               User Image Upload
*************************************************/

.userimgupbox {
    background: #fff;
    padding: 30px;
    margin-bottom: 30px;
    text-align: center;
    border-radius: 12px;
    border: 1px solid #e6e6e6;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.userimgupbox .imagearea {
    min-height: 122px;
}

.userimgupbox .imagearea label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #666;
}
.userimgupbox .imagearea label span {
    color: #e40404;
}

/* File Upload Button */
.formpanel .formrow > label.btn {
    background: none;
    color: #666;
    border: 2px dashed #bbb;
    border-radius: 10px;
    padding: 12px;
    margin-top: 8px;
    cursor: pointer;
    transition: all .25s ease;
}

.formpanel .formrow > label.btn:hover {
    background: #f1f1f1;
}

/************************************************
           == User Account (Modernised 2025) ==
*************************************************/

.authpages {
    padding: 60px 0;
    position: relative;
    background: linear-gradient(90deg, #f3f0fb 0%, #e5f5e7 100%);
}

/* Recruiter Section */
.recruitcard {
    padding-left: 50px;
}
.recruitcard h3 {
    font-size: 18px;
    text-align: left;
    font-weight: 600;
    color: #333;
}
.recruitcard img {
    max-width: 250px;
    margin-bottom: 30px;
}
.listcadibullet {
    list-style-type: decimal;
    margin-left: 18px;
}
.listcadibullet li {
    margin-top: 7px;
    text-align: left;
    font-size: 15px;
}

/* Account wrapper */
.useraccountwrap {
    max-width: 600px;
    margin: 0 auto;
}

/* Card */
.userccount {
    background: #f8faff;
    padding: 50px;
    border-radius: 14px;
    margin-bottom: 35px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.08);
}
.whitebg {
    background: #fff;
}

.userccount p {
    text-align: center;
    line-height: 24px;
    color: #777;
}
.userccount h5 {
    font-size: 22px;
    color: #444;
    font-weight: 700;
    margin-bottom: 20px;
}

/************************************************
           == Social Login ==
*************************************************/

.socialLogin {
    margin-bottom: 25px;
    text-align: center;
    padding-bottom: 10px;
}
.socialLogin a {
    display: inline-block;
    padding: 10px 15px;
    background: #fff;
    border-radius: 12px;
    border: 2px solid #ececec;
    margin: 0 5px;
    transition: all .3s ease;
}
.socialLogin a:hover {
    background: #f1f1f1;
}

.socialLogin a svg {
    width: 24px;
}

/* Brand Colors Only */
.socialLogin a.fb { color: #1877f2; }
.socialLogin a.gp { color: #dd4b39; }
.socialLogin a.tw { color: #00aced; }

.newuser {
    margin-top: 30px;
    text-align: center;
    color: #666;
    font-size: 17px;
}
.newuser a {
    font-weight: 600;
    color: #217208;
}

/************************************************
           == User Tabs ==
*************************************************/

.userbtns .nav-tabs {
    border-bottom: none;
    margin-bottom: 0;
}
.userbtns .nav-tabs > li {
    width: 50%;
    margin-bottom: 0;
}
.userbtns .nav-tabs > li a {
    border: none;
    border-radius: 10px 10px 0 0;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    color: #333;
    padding: 15px 20px;
    background: #f0f0f0;
    transition: all .3s ease;
}
.userbtns .nav-tabs > li a:hover,
.userbtns .nav-tabs > li a.active {
    background: #217208;
    color: #fff;
}
.userbtns .nav-tabs > li a.active:after {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #217208;
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    margin-left: -10px;
}

.docpending {
    background: #217208;
    color: #fff;
    display: inline-block;
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 5px;
}
.docapprove {
    background: #198754;
    color: #fff;
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 5px;
}

.strippckinfo {
    background: #fff;
    padding: 20px 30px;
    margin-bottom: 30px;
    border-radius: 10px;
}

.pkginfo {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    color: #777;
}
.pkginfo strong {
    color: #217208;
}

/************************************************
           == Profile Banner ==
*************************************************/

.profileban {
    position: relative;
    margin-top: -70px;
}
.usercoverphoto {
    position: relative;
    height: 300px;
    overflow: hidden;
    border-radius: 15px;
    background: #eaeaea;
}
.usercoverphoto img {
    display: block;
    width: 100%;
}
.usercoverphoto a {
    position: absolute;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    color: #666;
    font-size: 16px;
    top: 15px;
    right: 15px;
    text-align: center;
    line-height: 38px;
    box-shadow: 0 0 20px rgba(0,0,0,0.15);
    transition: all .3s ease;
}
.usercoverphoto a:hover {
    background: #217208;
    color: #fff;
}

.abtuser {
    background: #f1f5ff;
    padding: 25px;
    border-radius: 15px;
    margin: 0 50px 30px 50px;
}
.abtuser h4 {
    color: #217208;
    font-size: 24px;
    font-weight: 700;
}
.abtuser h6 {
    font-size: 16px;
    font-weight: 600;
    color: #444;
}

.uavatar img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 10px;
}

.editbtbn a {
    background: #000;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    padding: 10px;
    display: inline-block;
    transition: .2s ease;
}
.editbtbn a:hover {
    background: #217208;
}

/************************************************
           == User Details ==
*************************************************/

.userdata {
    margin-top: 10px;
}
.userdata li {
    color: #555;
    font-size: 16px;
    margin-top: 8px;
}
.userdata li i {
    color: #999;
    width: 20px;
    font-size: 15px;
}

/************************************************
           == Resume Builder ==
*************************************************/

.resumebuildwrap {
    padding: 35px;
    border-radius: 15px;
    margin-bottom: 30px;
    border: 1px solid #ddd;
    background: #fff;
}

.expboxint {
    border: 1px solid #eee;
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 30px;
    transition: .3s ease;
}
.expboxint:hover {
    border-color: #217208;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.expboxint h4 {
    font-size: 20px;
}
.expboxint h5 {
    font-size: 16px;
    color: #666;
}
.expboxint h5 i {
    margin-right: 7px;
    color: #999;
}
.expboxint p i {
    color: #217208;
}

/************************************************
           == Alerts & Notifications ==
*************************************************/

.userprofilealert {
    background: #EEBA00;
    padding: 12px 20px;
    border-radius: 10px;
    display: flex; 
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    animation: colorChange 6s infinite;
}

.userprofilealert h5 {
    font-size: 16px;
    color: #fff;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
}
.userprofilealert h5 i {
    font-size: 22px;
    margin-right: 10px;
    color: #fff;
}

@keyframes colorChange {
    0% { background: #EEBA00; }
    50% { background: #d9a700; }
    100% { background: #EEBA00; }
}

/************************************************
           == Featured Profile ==
*************************************************/

.featuredprofile {
    border-radius: 15px;
    padding: 30px;
    border-top: 5px solid #217208;
    margin-bottom: 30px; 
    background: #1d3e73;
}
.featuredprofile .featprice {
    font-weight: 500;
    font-size: 40px;
    color: #ffca00;
    padding: 15px 0;
}
.featuredprofile .featprice span {
    font-size: 16px;
    color: #fff;
}

/************************************************
           == Misc ==
*************************************************/

.appliedjobswrap {
    margin-bottom: 30px;
}
.appliedjobswrap .btn-primary {
    padding: 6px 15px;
    font-size: 14px;
}

.chat-container {
    position: fixed;
    bottom: 0;
    right: 20px;
    width: 230px;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 14px rgba(0,0,0,0.15);
}
.chat-header {
    background: #217208;
    color: white;
    padding: 12px;
    cursor: pointer;
    font-weight: 600;
}

/***************************
       404 Page (Modern)
***************************/
.error-page-wrap {
    padding: 120px 0;
    text-align: center;
    background: linear-gradient(180deg, #f3f0fb 0%, #e6f4e8 100%);
}

.errormain {
    text-align: center;
}

.errormain h2 {
    font-size: 180px;
    font-weight: 900;
    color: #cfcfcf;
    line-height: 1;
    margin: 0;
    letter-spacing: -5px;
    animation: softPulse 3s ease-in-out infinite;
}

.errormain h3 {
    display: inline-block;
    font-size: 34px;
    font-weight: 800;
    color: #555;
    letter-spacing: 4px;
    padding: 18px 40px;
    border-radius: 12px;
    border: 3px solid #ddd;
    background: #fff;
    margin-top: 20px;
    text-transform: uppercase;
}

.error-msg {
    margin-top: 40px;
}

.error-msg p {
    max-width: 550px;
    margin: 0 auto;
    font-size: 17px;
    line-height: 26px;
    color: #555;
}

.error-msg .btn {
    display: inline-block;
    margin-top: 35px;
    background: #217208;
    color: #fff;
    padding: 12px 28px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    transition: all .3s ease;
    box-shadow: 0 4px 10px rgba(33, 114, 8, 0.25);
    border: none;
}

.error-msg .btn:hover {
    background: #1a5a06;
    color: #fff;
    transform: translateY(-3px);
    text-decoration: none;
}

/* Subtle animation for 404 */
@keyframes softPulse {
    0% { opacity: 0.8; transform: scale(0.98); }
    50% { opacity: 1; transform: scale(1); }
    100% { opacity: 0.8; transform: scale(0.98); }
}

/***************************
        About Us (Modern)
****************************/
.about-wraper {
    padding: 100px 0;
    background: linear-gradient(180deg, #f4f2fb 0%, #eef7f0 100%);
}

.about-wraper h1 {
    font-size: 40px;
    color: #217208; /* New brand green */
    font-weight: 800;
    margin-bottom: 20px;
    text-transform: capitalize;
}

.about-wraper p {
    line-height: 1.7;
    font-size: 17px;
    color: #444;
    margin-bottom: 28px;
}

.about-wraper h3 {
    font-size: 26px;
    font-weight: 700;
    color: #333;
    margin-top: 20px;
    margin-bottom: 15px;
}

.about-wraper ul,
.about-wraper ol {
    margin-bottom: 28px;
    margin-left: 28px;
}

.about-wraper ol {
    list-style-type: decimal;
}

.about-wraper strong {
    font-weight: 700;
}

.about-wraper em {
    font-style: italic;
}

.about-wraper u {
    text-decoration: underline;
}

/* modern list items */
.about-wraper ul li,
.about-wraper ol li {
    padding: 6px 0 6px 28px;
    position: relative;
    line-height: 26px;
    font-size: 16px;
    color: #444;
}

.about-wraper ul li:before {
    content: '\f105'; /* modern arrow */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 6px;
    font-size: 14px;
    color: #217208;
}

.about-wraper ul li p,
.about-wraper ol li p {
    margin-bottom: 0;
}

/***************************
        What We Do
****************************/
.what_we_do {
    padding: 70px 0;
    background: #f5f7fa;
    border-radius: 0;
    margin-top: 80px;
}

.what_we_do .main-heading {
    color: #217208;
    text-align: center;
    font-size: 38px;
    font-weight: 800;
    margin-bottom: 10px;
}

.whatText {
    font-size: 20px;
    text-align: center;
    color: #555;
    max-width: 800px;
    margin: 0 auto;
    line-height: 32px;
}

/***************************
       What List
****************************/
.whatList {
    list-style: none;
    margin-top: 50px;
}

.whatList li {
    text-align: center;
    margin-bottom: 40px;
}

.whatList li .iconWrap {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 4px solid #ddd;
    border-radius: 50%;
    padding: 14px;
    transition: 0.3s ease;
}

.whatList li .iconWrap:hover {
    border-color: #217208;
    transform: translateY(-4px);
}

.whatList li .icon {
    font-size: 80px;
    background: #217208;
    color: #fff;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    line-height: 160px;
}

/* titles */
.whatList li h3 {
    font-size: 26px;
    color: #222;
    margin: 20px 0 10px;
    font-weight: 700;
}

.whatList li p {
    font-size: 16px;
    color: #555;
    line-height: 26px;
    max-width: 650px;
    margin: 0 auto;
}

/***************************
           Text Row
****************************/
.textrow {
    padding-top: 80px;
}

/***************************
        Ordered List
****************************/
ul.orderlist {
    list-style: none;
    margin-top: 30px;
    padding-left: 0;
}

ul.orderlist li {
    float: left;
    width: 48%;
    margin-bottom: 14px;
    color: #333;
    font-size: 16px;
    display: flex;
    align-items: flex-start;
    line-height: 26px;
}

ul.orderlist li:before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-right: 10px;
    color: #1c8d24;
    font-size: 14px;
}

/* clear floats */
ul.orderlist::after {
    content: "";
    display: block;
    clear: both;
}

/* small screens */
@media (max-width: 768px) {
    ul.orderlist li {
        float: none;
        width: 100%;
    }
}

/**************************
    Pay Packages (Modern)
**************************/

/* FREE PACKAGE BOX */
.freepackagebox {
    background: linear-gradient(135deg, #e0e4e8, #c5c8cc);
    padding: 25px;
    display: flex;
    gap: 30px;
    align-items: center;
    margin-bottom: 30px;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
    animation: colorChange 8s infinite;
}

.freepackagebox img {
    width: 80px;
    border-radius: 10px;
}

.freepackagebox h5 {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 3px;
}

.freepackagebox p {
    font-size: 16px;
    color: #f2f2f2;
    margin-bottom: 0;
}

.freepackagebox a {
    margin-left: auto;
    background: #ffffff;
    color: #1a1a1a;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 700;
    padding: 12px 22px;
    transition: 0.3s ease;
    text-decoration: none;
}

.freepackagebox a:hover {
    background: #217208;
    color: #fff;
}

/**************************
      User Stats Bar
**************************/

.userstatsbox {
    position: relative;
    width: 100%;
    height: 70px;
    border-radius: 12px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    animation: usercolorChange 12s infinite;
    background: linear-gradient(90deg, #217208 0%, #4fb86c 50%, #86e0a8 100%);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.fade-text {
    width: 100%;
    font-size: 17px;
    font-weight: 500;
    display: none;
    color: #ffffff;
}

.fade-text i {
    margin-right: 10px;
    background: #ffffff;
    color: #217208;
    padding: 10px;
    border-radius: 40px;
    width: 44px;
    height: 44px;
    font-size: 20px;
    text-align: center;
    line-height: 24px;
}

.fade-text:nth-child(2) i { color: #a20000; }
.fade-text:nth-child(3) i { color: #3add7b; }

.fade-text span {
    animation: shakeEffect 0.5s ease-in-out;
    display: inline-block;
    font-weight: 700;
}

/**************************
   Animated Gradients
**************************/

@keyframes usercolorChange {
    0% {
        background: linear-gradient(90deg, #1a1a1a 0%, #444 100%);
    }
    33% {
        background: linear-gradient(90deg, #217208 0%, #d9e88d 100%);
    }
    66% {
        background: linear-gradient(90deg, #a21800 0%, #14bcc9 100%);
    }
    100% {
        background: linear-gradient(90deg, #469ee3 0%, #00b3b6 100%);
    }
}

@keyframes shakeEffect {
    0% { transform: translate(1px, 1px); }
    20% { transform: translate(-3px, 0px); }
    40% { trans

/***************************
        Blog Listing
****************************/
.blogWraper {
    margin-bottom: 40px;
}

.blogList {
    list-style: none;
}

.blogList li .bloginner {
    background: #fff;
    margin-bottom: 30px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    transition: 0.3s ease;
}

.blogList li .bloginner:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.08);
}

/* Post Image */
.postimg {
    position: relative;
    display: inline-block;
}

.postimg img {
    display: block;
    width: 100%;
    border-radius: 12px 12px 0 0;
}

.postimg .date {
    width: 60px;
    height: 60px;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    padding-top: 8px;
    text-align: center;
    line-height: 18px;
    background: #217208;
    border-radius: 10px;
    position: absolute;
    left: 14px;
    top: 14px;
    z-index: 12;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Post Header */
.post-header {
    margin-bottom: 18px;
}

.post-header h2,
.post-header h4 a {
    font-weight: 700;
}

.post-header h2 {
    margin-top: 18px;
}

.post-header h4 a {
    font-size: 20px;
    color: #1a1a1a;
    display: block;
    margin-top: 10px;
    transition: 0.3s ease;
}

.post-header h4 a:hover {
    color: #217208;
}

/* Metadata */
.postmeta {
    margin: 8px 0 12px 0;
    line-height: 24px;
}

.postmeta span,
.postmeta a {
    color: #217208;
    font-weight: 600;
}

/* Text Body */
.blogList p,
.blogGrid li p {
    line-height: 26px;
    color: #444;
}

/* Read More */
.blogList .readmore,
.blogGrid .readmore {
    border-bottom: 1px dotted #217208;
    display: inline-block;
    margin-top: 15px;
    color: #000;
    font-weight: 600;
    padding-bottom: 4px;
    transition: 0.3s ease;
}

.blogList .readmore:hover,
.blogGrid .readmore:hover {
    text-decoration: none;
    color: #217208;
}

/***************************
        Blog Grid
****************************/
.blogGrid {
    list-style: none;
}

.blogGrid li {
    margin-bottom: 30px;
}

.blogGrid li .int {
    background: #fff;
    padding: 22px;
    border-radius: 12px;
    border: 1px solid #e4e4e4;
    transition: 0.3s ease;
    box-shadow: 0 3px 10px rgba(0,0,0,0.04);
}

.blogGrid li .int:hover {
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
    border-color: #217208;
}

.blogGrid li .post-header {
    margin-top: 12px;
}

/***************************
        Blog Detail
****************************/
.blogdetailbox {
    background: #fff;
    padding: 25px;
    margin-bottom: 30px;
    border-radius: 12px;
    border: 1px solid #e4e4e4;
    box-shadow: 0 3px 10px rgba(0,0,0,0.04);
}

.blogdetailwrap .postimg {
    margin-bottom: 30px;
}

.blogdetailwrap h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #222;
}

.blogdetailwrap p {
    font-size: 16px;
    line-height: 28px;
    margin-bottom: 26px;
    color: #333;
}

.blogdetailwrap p strong {
    font-weight: 700;
}

.blogdetailwrap ul {
    list-style: disc;
    margin-left: 30px;
    margin-bottom: 20px;
}

.blogdetailwrap ul li {
    font-size: 16px;
    margin-bottom: 10px;
}

/* Blockquote Modern */
blockquote {
    display: block;
    font-size: 17px;
    line-height: 28px;
    margin: 25px 0;
    padding: 25px 25px 25px 60px;
    border-left: 6px solid #217208;
    background: #f8f9fa;
    border-radius: 10px;
    position: relative;
}

blockquote:before {
    content: "\f10d";
    font-family: 'FontAwesome';
    font-size: 22px;
    color: #217208;
    position: absolute;
    left: 20px;
    top: 25px;
}

blockquote p {
    font-style: italic;
    color: #222;
}

/***************************
       Comments Section
****************************/
.comments {
    margin-top: 40px;
}

.comments h4 {
    font-size: 24px;
    font-weight: 700;
    color: #222;
}

.comments .media-list li {
    padding: 20px;
    border: 1px solid #e9e9e9;
    background: #fff;
    border-radius: 10px;
    margin-bottom: 20px;
    position: relative;
    box-shadow: 0 3px 10px rgba(0,0,0,0.04);
}

.comments .media-left {
    margin-right: 20px;
}

.comments .media-left a {
    width: 80px;
    display: inline-block;
}

.comments .media-body h6 {
    font-size: 16px;
    font-weight: 700;
    color: #217208;
    margin-top: 8px;
}

.comments .media-body h6 span {
    font-size: 13px;
    color: #777;
    display: block;
    margin-top: 5px;
}

.comments .media p {
    margin-top: 8px;
    color: #444;
    line-height: 22px;
}

.comments .btn.raply {
    padding: 8px 12px;
    font-size: 12px;
    background: #f2f2f2;
    color: #444;
    border-radius: 6px;
    border: none;
    position: absolute;
    top: 15px;
    right: 15px;
    transition: 0.3s ease;
}

.comments .btn.raply:hover {
    background: #217208;
    color: #fff;
}

/* Comment Form */
.commnetsfrm {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.04);
}

.comments form label {
    text-transform: uppercase;
    font-size: 12px;
    color: #555;
    font-weight: 600;
    margin-top: 20px;
}

.comments form .form-control {
    width: 100%;
    height: 45px;
    margin-top: 6px;
    border-radius: 8px;
    box-shadow: none;
    border: 1px solid #e5e5e5;
    background: #f8f8f8;
}

.comments form textarea.form-control {
    height: 150px;
}

.commnetsfrm .btn {
    background: #217208;
    color: #fff;
    font-size: 18px;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 700;
    margin-top: 20px;
    transition: 0.3s ease;
}

.commnetsfrm .btn:hover {
    background: #1a5906;
}

/************************************************
        Blog Sidebar
*************************************************/

/* Search */
.search {
    position: relative;
    margin-bottom: 20px;
}

.search .form-control {
    border-radius: 8px;
    padding: 12px;
    border: 1px solid #ddd;
}

.search .btn {
    position: absolute;
    right: 8px;
    top: 6px;
    font-size: 18px;
    background: none;
    color: #217208;
}

/* Categories */
.categories li {
    margin-bottom: 14px;
    padding-left: 18px;
    position: relative;
}

.categories li a {
    color: #666;
    font-weight: 600;
    transition: 0.3s ease;
}

.categories li a:hover {
    color: #217208;
}

.categories li:before {
    content: "\f0da";
    font-family: 'FontAwesome';
    position: absolute;
    left: 0;
    font-size: 12px;
    color: #217208;
}

/* Archives */
.archive li {
    line-height: 45px;
}

.archive li a {
    color: #666;
    font-weight: 600;
}

.archive li span {
    float: left;
    height: 30px;
    width: 30px;
    background: #f5f5f5;
    text-align: center;
    border-radius: 6px;
    margin-right: 15px;
    line-height: 28px;
    font-size: 12px;
    color: #777;
    transition: 0.3s ease;
}

.archive li a:hover span {
    background: #217208;
    color: #fff;
}

/* Popular Posts */
.papu-post li {
    border-bottom: 1px solid #eee;
    padding: 18px 0;
}

.papu-post li:last-child {
    border-bottom: none;
}

.papu-post .media-left a {
    width: 80px;
}

.papu-post .media-left img {
    width: 100%;
    border-radius: 8px;
}

.papu-post span {
    font-size: 12px;
    color: #444;
}

.papu-post .media-heading {
    color: #217208;
    line-height: 20px;
    font-weight: 600;
}

/* Tags */
.tags li {
    display: inline-block;
    margin-right: 6px;
    margin-bottom: 6px;
}

.tags a {
    color: #777;
    border: 1px solid #ddd;
    padding: 7px 10px;
    border-radius: 6px;
    text-transform: uppercase;
    transition: 0.3s ease;
}

.tags a:hover {
    background: #217208;
    border-color: #217208;
    color: #fff;
}

/* Photo Stream */
.photo-steam li {
    float: left;
    width: 25%;
    padding: 0 5px;
    margin-bottom: 10px;
}

.photo-steam li img {
    width: 100%;
    border-radius: 8px;
}

/************************************************
           == Dashboard Page (Modernised)
*************************************************/
.usernavwrap {
    background: #ffffff;
    border-radius: 10px;
    margin-bottom: 30px;
    box-shadow: 0 3px 14px rgba(0,0,0,0.05);
    padding: 10px 0;
}

.usernavdash {
    margin-bottom: 0;
}

.usernavdash li a {
    padding: 12px 18px;
    color: #444;
    display: flex;
    align-items: center;
    gap: 10px;
    border-left: 3px solid transparent;
    transition: 0.3s ease;
    font-weight: 500;
}

.usernavdash li a:hover {
    color: #217208;
    background: #f6faf6;
    border-left-color: #217208;
    text-decoration: none;
}

.usernavdash li i {
    font-size: 18px;
    width: 25px;
    color: #999;
    transition: 0.3s ease;
}

.usernavdash li.active a {
    color: #217208;
    background: #f3faf4;
    border-left-color: #217208;
}

.usernavdash li.active a i,
.usernavdash li a:hover i {
    color: #217208;
}

.fade:not(.show) {
    opacity: 1;
}

/************** Profile Boxes **************/
.profbox {
    margin-bottom: 30px;
    background: #ffffff;
    padding: 25px 30px;
    border-radius: 12px;
    box-shadow: 0 3px 14px rgba(0,0,0,0.06);
}

.profbox h3 {
    font-size: 22px;
    color: #333;
    font-weight: 700;
    margin-bottom: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.profbox h3 i {
    font-size: 24px;
    opacity: .6;
    margin-right: 10px;
}

.profbox h3 a {
    font-size: 14px;
    color: #217208;
    font-weight: 600;
}

.profbox h3 a:hover {
    text-decoration: underline;
}

/************** Recommended Jobs **************/
.recomndjobs li {
    border-bottom: 1px solid #ededed;
    padding: 12px 0;
    font-size: 14px;
}

.recomndjobs li h4 a {
    color: #217208;
    font-size: 16px;
    font-weight: 600;
    transition: 0.2s ease;
}

.recomndjobs li h4 a:hover {
    color: #145706;
}

.recomndjobs li p {
    margin-bottom: 0;
    color: #777;
}

.recomndjobs li:last-child {
    border-bottom: none;
}

/************** Following List **************/
.followinglist li {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e8e8e8;
    font-size: 15px;
}

.followinglist li span {
    font-weight: 700;
    color: #333;
}

/************** Profile Statistics **************/
.profilestat {
    margin-bottom: 20px;
}

.profilestat li .inbox {
    padding: 25px 20px;
    border-radius: 15px;
    transition: 0.3s ease;
    display: flex;
    gap: 18px;
    align-items: center;
    position: relative;
    overflow: hidden;
    border: none;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}

/* Soft modern gradients */
.profilestat li:nth-child(1) .inbox {
    background: linear-gradient(135deg, #217208 0%, #3e8c12 100%);
}
.profilestat li:nth-child(2) .inbox {
    background: linear-gradient(135deg, #b7663a 0%, #d17348 100%);
}
.profilestat li:nth-child(3) .inbox {
    background: linear-gradient(135deg, #4facfe 0%, #00d4ff 100%);
}
.profilestat li:nth-child(4) .inbox {
    background: linear-gradient(135deg, #43e97b 0%, #1ecdb3 100%);
}

.profilestat li .inbox:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 26px rgba(0,0,0,0.2);
}

.profilestat li i {
    font-size: 40px;
    opacity: 0.95;
}

.profilestat li h6 {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 2px;
}

.profilestat li h6 span {
    display: block;
    font-size: 16px;
    margin-top: 3px;
}

/************** Store Credit Box **************/
.instoretxt {
    font-size: 16px;
    font-weight: 600;
    background: #f4f6fb;
    padding: 30px;
    margin-bottom: 30px;
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.05);
}

.instoretxt .credit {
    font-size: 24px;
}

.instoretxt strong,
.instoretxt .currency strong {
    color: #217208;
}

.instoretxt a {
    font-size: 16px;
    padding: 10px 22px;
    background: #217208;
    border-radius: 8px;
    color: #fff;
    display: inline-block;
    margin: 0 6px;
    transition: 0.3s ease;
}

.instoretxt a:hover {
    background: #145706;
}

.instoretxt a.history {
    background: #444;
}

/************** Ads & Titles **************/
.myads h3 {
    font-size: 24px;
    margin-bottom: 10px;
}

/************** Switchbox Section **************/
.switchbox {
    padding: 25px;
    text-align: center;
    background: #edf4fb;
    border-radius: 12px;
    margin-bottom: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.switchbox .txtlbl {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
}

.switchbox strong {
    display: block;
    margin-top: 12px;
    font-size: 12px;
    color: #217208;
}

/************** Modern Toggle Switch **************/
.switch {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 38px;
    cursor: pointer;
}

.switch-input {
    opacity: 0;
    position: absolute;
    inset: 0;
}

.switch-label {
    background: #e6e6e6;
    border-radius: 30px;
    height: 100%;
    display: block;
    position: relative;
    transition: 0.3s ease;
}

.switch-label:before,
.switch-label:after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: 0.2s ease;
}

.switch-label:before {
    content: attr(data-off);
    right: 14px;
    color: #777;
    font-size: 13px;
}

.switch-label:after {
    content: attr(data-on);
    left: 14px;
    color: #fff;
    opacity: 0;
    font-size: 13px;
}

.switch-handle {
    width: 30px;
    height: 30px;
    background: #fff;
    border-radius: 50px;
    position: absolute;
    top: 4px;
    left: 4px;
    transition: 0.25s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.switch-input:checked ~ .switch-label {
    background: #217208;
}

.switch-input:checked ~ .switch-label:before {
    opacity: 0;
}

.switch-input:checked ~ .switch-label:after {
    opacity: 1;
}

.switch-input:checked ~ .switch-handle {
    left: 65px;
}

/* Green override */
.switch-green > .switch-input:checked ~ .switch-label {
    background: #47c04b;
}

/************************************************
           == Subscribe (Modernised)
*************************************************/
.subscribe {
    padding: 60px 0;
    background: linear-gradient(215deg, #b7663a 0%, #217208 100%);
    border-radius: 0;
    position: relative;
    overflow: hidden;
}

.subscribe h6 {
    font-size: 32px;
    color: #fff;
    font-weight: 700;
    margin-bottom: 8px;
}

.subscribe p {
    color: #eef1f3;
    font-size: 16px;
    margin-bottom: 15px;
}

.subscribe .form-control {
    height: auto;
    padding: 14px 16px;
    font-size: 16px;
    border: none;
    border-radius: 8px 0 0 8px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    margin-right: 0;
}

.subscribe .btn {
    background: #217208;
    padding: 14px 22px;
    color: #fff;
    border: none;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 0 8px 8px 0;
    transition: 0.3s ease;
    width: 100%;
}

.subscribe .btn:hover {
    background: #145706;
}

#subscribe_newsletter_form {
    margin-top: 8px;
}

/************************************************
           == Elemental Resume Styles (Modernised)
*************************************************/
.elemental {
    font-size: 14px;
    font-family: "Ubuntu", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #252525;
    line-height: 1.6;
}

.elemental h1, .elemental h2, .elemental h3,
.elemental h4, .elemental h5, .elemental h6 {
    font-weight: 700;
    margin: 0;
    padding: 0;
}

.elemental p {
    margin: 0.4em 0;
    padding: 0;
}

.elemental ul, .elemental ol {
    margin: 0;
    padding: 0;
}

.elemental td, .elemental th {
    padding: 3px;
}

.elemental a {
    text-decoration: none;
    color: inherit;
}

.elemental .break-word {
    word-break: break-word;
}

.elemental .about-section {
    padding-top: 0.5em;
}

/***************************************
   About Section — Header styling
****************************************/
.elemental .about-section .name h1,
.elemental .about-section .name h6 {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.elemental .about-section .subheader {
    font-size: 1em;
    color: #ececec;
    font-style: italic;
}

.elemental .about-section .personal-details {
    padding: 1em;
    background: #217208;
    color: #ffffff;
    border-radius: 6px;
}

/***************************************
   Photo Resume Block
****************************************/
.elemental .about-section.photo-resume .photo img {
    width: 100%;
    border: 3px solid #fff;
    border-radius: 6px;
}

/***************************************
   Resume Layout Columns
****************************************/
.elemental .column-container {
    overflow: hidden;
}

.elemental .one-fourth {
    width: 280px;
    padding: 15px;
    vertical-align: top;
    background: #ececec;
    border-radius: 6px 0 0 6px;
}

.elemental .three-fourth {
    padding: 15px;
    vertical-align: top;
    border-left: 1px solid #dedede;
}

/***************************************
   Resume Content Sections
****************************************/
.elemental .resume-content-section {
    margin-top: 0;
}

.elemental .resume-content-section .section {
    padding: 12px 0;
    border-bottom: 1px dashed #dfdfdf;
}

.elemental .resume-content-section .section:last-child {
    border-bottom: none;
}

.elemental .resume-content-section .section .section-header {
    background: #dfdfdf;
    padding: 6px 8px;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 4px;
    margin-bottom: 8px;
}

.elemental .resume-content-section .item {
    padding: 0.8em 0;
}

.elemental .resume-content-section .item .date {
    font-style: italic;
    color: #585858;
}

.excity {
    margin-bottom: 5px;
}

.excity i {
    color: #999;
    margin-right: 5px;
}

@media (max-width: 767px) {
    .elemental .one-fourth, .elemental .three-fourth {
        display: block;
        width: 100%;
        border: none;
    }
}

/************************************************
           == Kanban Board Modernised
*************************************************/
.kanban-board {
    display: flex;
    gap: 20px;
    padding: 10px 0;
}

.column {
    width: 25%;
    height: 800px;
    padding: 20px;
    background: #fafafa;
    border-radius: 10px;
    overflow-y: auto;
    transition: 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.column:hover {
    box-shadow: 0 3px 14px rgba(0,0,0,0.1);
}

.column h2 {
    margin: 0 0 15px 0;
    font-size: 18px;
    font-weight: 700;
    color: #333;
}

/***************************************
   Column Background States
****************************************/
#applied,
#unlocked {
    background-color: #d7dff1;
}

#rejected {
    background-color: #f1d7dc;
}

#shortlist {
    background-color: #f7edd9;
}

#hired {
    background-color: #d0efd0;
}

/************************************************
                   Tasks
*************************************************/
.task {
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    cursor: grab;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    transition: 0.25s ease;
}

.task:hover {
    transform: translateY(-3px);
}

.task.dragging {
    opacity: 0.4;
    border: 2px dashed #bbb;
}

#rejected .task {
    background-color: #fff4f6;
}

#shortlist .task {
    background-color: #fffaef;
}

#hired .task {
    background-color: #f4fff4;
}

.task h3 {
    font-size: 18px;
    font-weight: 600;
}

/************************************************
                   Buttons
*************************************************/
.move-btn {
    border: none;
    padding: 5px 8px;
    font-size: 14px;
    font-weight: 600;
    color: #666;
    background: transparent;
}

.profbtn {
    margin-top: 10px;
    background: #217208;
    color: #fff;
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 4px;
    transition: 0.3s ease;
}

.profbtn:hover {
    background: #145706;
}

/************************************************
               Icons in Task Meta
*************************************************/
.location, .minsalary {
    line-height: 18px;
    font-size: 14px;
}

.location i, .minsalary i {
    color: #217208;
}

/************************************************
                Scrollbars
*************************************************/
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background-color: #ebebeb;
}

::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 10px;
}

/************************************************
               Dragula Ghost
*************************************************/
.gu-mirror {
    position: fixed;
    z-index: 10000;
    opacity: 0.9;
    padding: 15px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.gu-hide {
    display: none !important;
}

/************************************************
               Mobile Responsive
*************************************************/
@media (max-width: 600px) {
    .kanban-board {
        flex-direction: column;
    }
    .column {
        width: 100%;
        height: auto;
    }
}

/************************************************
    MYJOBO 2025 — Unified Modern Footer
    (Merged + Optimised for WCAG + Bootstrap 5.3)
*************************************************/

/* ===============================
      FOOTER WRAPPER (Base)
=============================== */
.footerWrap,
.footer-2025 {
    background: #2a2f36; /* Modern dark neutral */
    padding: 60px 0;
    color: #ccc;
    border-top: 1px solid rgba(255,255,255,0.05);
    font-family: "Inter", sans-serif;
}

/* Footer Headings */
.footerWrap h5,
.footerWrap h6,
.footer-2025 h5,
.footer-2025 h6 {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 18px;
    letter-spacing: 0.4px;
}

/* Footer Paragraphs */
.footerWrap p,
.footer-2025 p {
    line-height: 24px;
    font-size: 15px;
    color: rgba(255,255,255,0.6);
    margin-bottom: 12px;
}

/* ===============================
      FOOTER LINKS
=============================== */
.footer-links li {
    margin-bottom: .55rem;
}

.footer-links a {
    color: #d1d5db;
    text-decoration: none;
    font-size: .95rem;
    transition: color .2s ease, opacity .2s ease;
}

.footer-links a:hover {
    color: #ffffff;
    opacity: 1;
}

/* ===============================
      Contact Info (Address/Email)
=============================== */
.footerWrap .address,
.footerWrap .email,
.footerWrap .phone {
    margin-bottom: 20px;
    padding-left: 32px;
    color: rgba(255,255,255,0.65);
    line-height: 22px;
    font-size: 15px;
    position: relative;
}

.footerWrap .address:before,
.footerWrap .email:before,
.footerWrap .phone:before {
    font-family: 'FontAwesome';
    font-size: 18px;
    position: absolute;
    left: 0;
    top: 2px;
    opacity: 0.8;
}

.footerWrap .address:before { content: '\f041'; }
.footerWrap .email:before   { content: '\f003'; }
.footerWrap .phone:before   { content: '\f095'; }

.footerWrap .email a,
.footerWrap .phone a {
    color: rgba(255,255,255,0.7);
}

.footerWrap .email a:hover,
.footerWrap .phone a:hover {
    color: #17d27c;
}

/* ===============================
      SOCIAL ICONS
=============================== */
.footer-2025 .social a,
.social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    transition: all .25s ease;
    opacity: 0.85;
    color: #fff;
}

.footer-2025 .social a:hover,
.social a:hover {
    background: #f59e0b; /* MyJobo yellow accent */
    color: #111827;
    transform: translateY(-3px);
    opacity: 1;
    box-shadow: 0 4px 12px rgba(245,158,11,.35);
}

.social svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* Icon brand colours (optional) */
.social a .fa-instagram { color: #f44729; }
.social a .fa-linkedin { color: #295ec6; }
.social a .fa-youtube { color: #fe0000; }
.social a .fa-tumblr  { color: #24405c; }
.social a .fa-flickr  { color: #e14a95; }
.social a .fa-pinterest { color: #c60202; }

/* ===============================
      Footer Bottom Section
=============================== */
.footer-bottom {
    background: #1c1f24;
    border-top: 1px solid rgba(255,255,255,0.07);
    padding: 15px 0;
    color: #ccc;
    font-size: 0.9rem;
}

.footer-bottom a {
    color: #f59e0b;
    font-weight: 600;
}

/* Payment logos */
.paylogos img {
    max-height: 40px;
    opacity: 0.9;
    transition: opacity .2s ease;
}
.paylogos img:hover {
    opacity: 1;
}

/* ===============================
      Responsive Tweaks
=============================== */
@media (max-width: 576px) {
    .footerWrap,
    .footer-2025 {
        padding: 40px 0;
    }

    .footerWrap h5 {
        margin-top: 20px;
    }
}


/************************************************
                Article Links
*************************************************/
.posts-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.posts-list li {
    margin: 15px 0;
}
.posts-list .media-left {
    float: left;
    width: 80px;
    margin-right: 20px;
}
.post .entry-title a {
    font-size: 16px;
    color: #fff;
    transition: color .3s ease;
}
.post .entry-title a:hover {
    color: #17d27c;
}
.posts-list .entry-date {
    color: #aaa;
    font-style: italic;
}

/************************************************
                Quick Links
*************************************************/
.footerWrap .quicklinks {
    list-style: none;
    padding: 0;
}
.footerWrap .quicklinks li a {
    display: block;
    padding: 8px 0;
    font-size: 15px;
    color: rgba(255,255,255,0.55);
    transition: all .25s ease;
}
.footerWrap .quicklinks li a:hover {
    color: #17d27c;
    padding-left: 4px;
    text-decoration: none;
}

/************************************************
               Copyright Section
*************************************************/
.copyright {
    padding: 20px 0;
    color: #888;
    font-size: 14px;
    border-top: 1px solid rgba(255,255,255,0.05);
    margin-top: 40px;
}

.copyright ul li {
    display: inline-block;
}

.copyright ul li a {
    margin: 0 5px;
    padding: 2px 5px;
    color: #aaa;
    transition: color .3s ease;
}
.copyright ul li a:hover {
    color: #fff;
}

/************************************************
           Pay Logos (Right Side)
*************************************************/
.paylogos {
    text-align: right;
}
.bttxt {
    color: #999;
    line-height: 24px;
}

/************************************************
           Misc Elements (Kept intact)
*************************************************/
.help-block-error { color: #FE0004; }

/* Job seeker boxes */
.seekerbox {
    border-radius: 8px;
    background: #fff;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    transition: all .3s ease;
    position: relative;
    overflow: hidden;
}
.seekerbox:hover {
    background: linear-gradient(235deg, #eef4ff 50%, #edece6 100%);
    border-color: #fff;
}

/* Ribbon */
.ribbon { width: 110px; height: 110px; overflow: hidden; position: absolute; }
.ribbon::before,
.ribbon::after {
    position: absolute;
    z-index: -1;
    content: '';
    border: 5px solid #2980b9;
}
.ribbon span {
    position: absolute;
    width: 160px;
    padding: 10px 0;
    background-color: #0357e9;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    color: #fff;
    font-size: 12px;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}
.ribbon-top-left { top: -6px; left: -6px; }
.ribbon-top-left::before { top: 0; right: 0; border-top-color: transparent; border-left-color: transparent; }
.ribbon-top-left::after { bottom: 0; left: 0; border-top-color: transparent; border-left-color: transparent; }
.ribbon-top-left span { right: -17px; top: 25px; transform: rotate(-45deg); }

/* Seeker image */
.userhimg {
    height: 205px;
    overflow: hidden;
    border-radius: 6px;
    margin: 0 auto;
}
.userhimg img { width: 100%; }

/* Basic card */
.seekerbox h3 {
    margin: 15px 0 10px;
    font-size: 20px;
    text-align: center;
}
.seekerbox h3 a { color: #000; }

/* Category row */
.seekerbox .hmcate {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    color: #777;
    font-size: 15px;
}
.seekerbox .hmcate i {
    color: #0357e9;
    width: 18px;
}

/* Buttons */
.seekerbox .listbtn { text-align: center; margin-top: 20px; }
.seekerbox .listbtn a {
    background: #0357e9;
    color: #fff;
    padding: 10px 24px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    transition: background .3s;
}
.seekerbox .listbtn a:hover {
    background: #000;
}

/************************************************
           Carousel Buttons
*************************************************/
.custom-nav button,
.categorylisting-controls button {
    border: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #eee;
    position: absolute;
    bottom: 50%;
    margin-bottom: -19px;
    transition: all .3s ease;
}
.custom-nav button:hover,
.categorylisting-controls button:hover {
    background: #d0d0d0;
}

.custom-prev,
.custom-prev-categorylisting { left: -40px; }
.custom-next,
.custom-next-categorylisting { right: -40px; }

/* Sidebar Search */
.compnysidebarserch {
    padding: 25px;
    margin-bottom: 15px;
    border-radius: 12px;
    background: #f3f7ff;
}
.compnysidebarserch h4 {
    font-size: 16px;
    margin-bottom: 15px;
    font-weight: 600;
}
.compnysidebarserch label {
    font-weight: 600;
    margin-bottom: 5px;
}
.compnysidebarserch .form-control {
    appearance: auto;
}

/* Filter Button */
.comfilter .btn {
    background: #0052cc;
    width: 100%;
    padding: 10px 15px;
    color: #fff;
    font-weight: 700;
    border-radius: 8px;
    text-transform: uppercase;
}

/* CV Card */
.newcvcard {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #eee;
    box-shadow: 0 4px 8px -2px rgba(16, 24, 40, .1), 0 0 0 1px rgba(0, 11, 25, .02);
}
.cardhead {
    display: flex;
    justify-content: space-between;
}
.cardhead h4 {
    font-size: 20px;
    font-weight: 700;
}
.cardhead a {
    font-size: 18px;
    color: #0052cc;
}
.cardintbody .dlist.is-spaced>div>dt,
.cardintbody .dlist.is-spaced>div>dd {
    padding-top: 15px;
}

#skill_div table td strong,
#language_div table td strong {
    font-weight: 700;
}

/*******************
    Large Screens (≤1199px)
*******************/
@media screen and (max-width: 1199px) {

    /* Main Plan Price Adjustments */
    .main-plan .plan-price2,
    .main-plan .plan-price,
    .main-plan .plan-price1-1 {
        margin-left: 0;
        font-size: 44px;
    }

    .main-plan .plan-price2-1,
    .main-plan .plan-price-1,
    .main-plan .plan-price1-2 {
        font-size: 70px;
    }

    .main-plan .plan-price2-2,
    .main-plan .plan-price-2,
    .main-plan .plan-price1-3 {
        margin-right: 0;
    }

    /* Legacy unit spacing */
    .pricing-unit1,
    .pricing-unit2,
    .pricing-unit3 {
        margin-left: 5px;
    }
}

/*******************
    Medium Screens (≤1024px)
*******************/
@media screen and (max-width: 1024px) {

    /* User navigation compactness */
    .usernav li a {
        padding: 16px 12px; /* Slightly reduced for better fit */
    }

    /* Job list — keep spacing clean when stacked */
    .jobslist li .applybtn {
        margin-top: 15px;
    }

    /* Search bar responsiveness */
    .pageSearch a.btn {
        margin-bottom: 15px;
    }
}

/*******************
    Tablet Screen (≤990px)
*******************/
@media screen and (max-width: 990px) {

    body {
        font-size: 16px;
    }

    /* Header & Logo adjustments */
    .header .logo {
        padding-right: 100px;
        max-width: 400px;
    }

    /* Navbar Modernization */
    .navbar-header {
        float: right;
        display: block;
        margin-top: 5px;
    }

    .navbar {
        padding: 0;
    }

    .navbar-toggler {
        background: #eee;
        padding: 15px 20px;
        border-radius: 6px;
        position: absolute;
        top: 15px;
        right: 15px;
    }

    .navbar-toggle .icon-bar {
        background: #fff;
    }

    .navbar-default {
        float: none;
    }

    .navbar-expand-lg .navbar-nav .nav-link {
        padding: 15px 0;
        display: flex;
        gap: 15px;
        align-items: center;
    }

    .navbar-expand-lg .navbar-nav .nav-item.register {
        margin: 15px 0;
        padding: 0 10px;
    }

    .navbar-expand-lg .navbar-nav .nav-item.loginlink a {
        border-bottom: none;
    }

    /* Pricing blocks */
    .three-plan li {
        padding: 0 15px;
        margin-top: 15px;
    }

    .three-plan ul {
        background: none;
    }

    .main-plan {
        margin: 0 auto;
    }

    .main-unit {
        max-width: 240px;
        height: 200px;
        margin: 0 auto;
    }

    /* Search area */
    .searchblack {
        margin-top: 30px;
    }

    .searchwrap {
        display: block;
        height: auto;
        background-position: bottom left;
        padding-top: 0;
    }

    .srjobseeker {
        padding: 40px 0;
    }

    .bxsrctxt p {
        font-size: 18px;
        display: none;
    }

    .statsbox {
        width: auto;
        margin-top: 0;
        border-radius: 0;
    }

    .searchwrap .searchtpimg {
        display: none;
    }

    .section {
        padding: 30px 20px;
    }

    .searchbar select.form-control {
        border-left: 0;
    }

    .searchbar .btn {
        width: 100%;
        border-radius: 5px;
    }

    .howitwrap {
        margin: 30px;
        padding: 30px;
    }

    .howitimg {
        position: static;
    }

    .infodatawrap {
        display: block;
    }

    /* Mobile Navigation Slide-in Menu */
    .navbar-collapse.show {
        visibility: visible;
        transform: translateX(-100%);
    }

    .navbar-collapse {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 100%;
        width: 80%;
        overflow-y: auto;
        visibility: hidden;
        background-color: #fff;
        padding: 30px;
        z-index: 100;
        transition: transform 0.3s ease, visibility 0.3s ease;
        box-shadow: 0 0 30px rgba(0,0,0,0.2);
    }

    .close-toggler {
        background: none;
        border: none;
        color: #bbb;
        font-size: 24px;
        padding: 5px;
        float: right;
        margin-top: 10px;
        display: block;
    }

    /* Dashboard */
    .dashbarad {
        display: none;
    }

    .pageSearch {
        padding-top: 50px;
    }

    /* Remove column float on small screens */
    ul.orderlist li {
        float: none;
        width: auto;
    }

    /* Sidebar */
    .optionlist li {
        font-size: 14px;
    }

    .sidebar a.close-filterjobs {
        display: block;
    }

    /* Show filter toggle button */
    .filterjobsnav {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 10px 0 20px;
        background: #000;
        color: #fff;
        padding: 10px 20px;
        border-radius: 7px;
        font-size: 18px;
        font-weight: 700;
        text-align: center;
    }

    /* Slide-in Filter Panel */
    #filterjobs {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        padding: 30px 30px 70px;
        background-color: #fff;
        z-index: 100;
        overflow-y: auto;
        border-radius: 0;
        box-shadow: 15px 0 10px rgba(0,0,0,0.2);
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    #filterjobs.show {
        display: block;
        transform: translateX(0);
    }

    .searchList li p {
        font-size: 16px;
    }

    .sidebar a {
        font-size: 16px;
    }

    .sidebar .social a {
        font-size: 30px;
    }

    .pageTitle h5,
    .breadCrumb {
        text-align: center;
    }

    /* Job Detail Page */
    .job-header .jobinfo .companyinfo {
        text-align: left;
        margin-top: 30px;
        border-top: 1px solid #eee;
        padding-top: 30px;
    }

    /* About / Content Pages */
    .whatList li {
        margin-bottom: 30px;
    }

    .about-wraper h2 {
        margin-top: 20px;
    }

    .postimg {
        margin-top: 15px;
    }

    .about-wraper,
    .textrow {
        padding: 50px 0;
    }

    /* App wrapper */
    .appwraper .appbtn {
        margin-top: 30px;
    }

    .appwraper .titleTop h3 {
        font-size: 40px;
    }

    .appwraper .subtitle2 {
        font-size: 24px;
    }

    /* Footer */
    .footerWrap h5 {
        margin-top: 25px;
        font-size: 24px;
    }

    /* Slider text */
    .slidertext1 {
        font-size: 30px;
        line-height: 32px !important;
    }

    .caption {
        padding: 15px !important;
    }
}
 
/*******************
    Large Mobile Screen (≤768px)
*******************/
@media screen and (max-width: 768px) {

    .topsearchwrap h5 {
        margin-top: 30px;
    }

    .navbar-nav > li {
        padding: 0 10px;
    }

    .pagiWrap {
        margin-bottom: 30px;
    }

    .jobButtons a {
        font-size: 15px;
        padding: 6px 10px;
        margin-right: 0;
    }

    .post-header h4 {
        margin-top: 10px;
    }
}


/*******************
    Mobile Screen (≤767px)
*******************/
@media screen and (max-width: 767px) {

    /* Navbar items for login/register/job seeker */
    .navbar-nav li.postjob,
    .navbar-nav li.jobseeker {
        margin-bottom: 10px;
    }

    /* Dropdown becomes static full width */
    .dropdown-menu {
        position: static;
        float: none;
        width: 100%;
    }

    .usernav li a {
        padding: 12px 15px;
    }

    /* Profile stats */
    .profilestat li .inbox {
        padding: 20px 15px;
    }

    .profilestat li i {
        font-size: 32px;
    }

    .profilestat li h6 {
        font-size: 24px;
    }

    .profilestat li strong {
        font-size: 11px;
    }

    /*********************************
        Modern Bottom Navigation Bar
    *********************************/
    .mobilenav {
        display: block;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        background: #fff;
        z-index: 999;
        box-shadow: 0 -10px 30px rgba(0,0,0,0.1);
    }

    .mobilenav ul {
        display: flex;
        justify-content: space-between;
    }

    .mobilenav ul li a {
        display: block;
        padding: 10px 20px;
        text-align: center;
        color: #333;
    }

    .mobilenav ul li a svg {
        width: 30px;
        font-size: 24px;
    }

    .mobilenav ul li a span {
        display: block;
        font-size: 14px;
    }

    /* Slide-up user menu */
    .usernavdash {
        position: fixed;
        left: 0; right: 0;
        bottom: 56px;
        background: #fff;
        padding: 15px 0;
        border-radius: 10px 10px 0 0;
        display: none;
        z-index: 99;
        box-shadow: 0 -15px 30px rgba(0,0,0,0.2);
        transform: translateY(100%);
        transition: transform 0.3s ease-in-out;
    }

    .usernavdash li a {
        font-size: 16px;
        color: #666;
        padding: 15px 25px;
    }

    .usernavdash.show {
        display: block;
        transform: translateY(0);
    }

    .userprofilealert {
        display: block;
    }

    /* Page spacing */
    .pageSearch {
        padding-top: 30px;
    }

    .listpgWraper {
        padding-top: 15px;
    }

    .userccount {
        padding: 30px;
    }

    .pageTitle {
        padding: 20px 0;
    }

    .pageTitle h5 {
        font-size: 30px;
    }

    .footerWrap {
        padding: 30px;
    }

    .copyright {
        padding-bottom: 80px;
    }

    .titleTop h3 {
        font-size: 30px;
    }

    .catelist {
        margin-bottom: 30px;
    }

    /* Job Listings */
    .jobslist li h4 {
        margin-top: 5px;
    }

    .jobslist li .col-md-7,
    .jobslist li .col-md-9 {
        padding-left: 15px;
    }

    /* List buttons align left */
    .searchList li .listbtn {
        margin-left: 0;
        margin-top: 0;
        align-items: flex-start;
    }

    /* Hide long descriptions */
    .searchList li p {
        display: none;
    }

    /* Job card layout compression */
    .searchList > li .jobimg {
        flex: 0 0 30%;
    }

    .searchList > li .jobinfo {
        flex: 0 0 60%;
    }

    .main-plan .plan-price2 {
        margin-left: 0;
        font-size: 44px;
    }

    .pagiWrap .showreslt {
        margin-bottom: 10px;
    }

    /* Job Details */
    .job-header .jobinfo {
        padding: 15px;
    }

    .job-header .contentbox {
        padding: 20px;
    }

    .srjobseeker {
        padding-bottom: 0;
    }

    /* Searchbar adjustments */
    .searchbar select.form-control {
        display: none;
        border-top: 1px solid #eee;
    }

    #functional_area_id {
        margin-top: 1rem;
    }

    .searchbar .btn {
        margin-left: 0 !important;
        margin-top: 0;
        width: auto;
    }

    /* How-it-works blocks */
    .howlist li {
        display: block;
    }

    .howlist li h4 {
        margin-top: 10px;
    }

    .infodatawrap {
        padding-top: 0;
    }

    /* Login Box Responsiveness */
    .userloginbox {
        margin-bottom: 30px;
        border-radius: 20px;
        padding: 20px 30px;
        padding-right: 110px;
    }

    .userloginbox h3 {
        font-size: 20px;
    }

    .searchwrap {
        margin-bottom: 30px;
    }

    .bxsrctxt h1 {
        font-size: 30px;
    }

    .searchbarbt {
        margin-top: 15px;
    }

    /* Sidebar */
    .text-right {
        text-align: left;
    }

    /* Photo stream */
    .photo-steam li {
        width: 50%;
    }

    /* Hide mobile app image */
    .appimg {
        display: none;
    }

    .appwraper .appbtn a {
        margin-bottom: 15px;
        margin-right: 0;
    }

    .pull-right {
        float: none !important;
    }

    .comments .media-list li.margin-left80 {
        margin-left: 0;
    }
}

/*******************
    Mobiles Screen (≤560px)
*******************/
@media screen and (max-width: 560px) {

    /* Job buttons stack */
    .jobButtons a {
        display: block;
        margin-right: 0;
        margin-top: 10px;
    }

    /* Hide large images */
    .homesearchimg {
        display: none;
    }

    /* Navigation items */
    .usernav li a {
        padding: 10px 10px;
        text-transform: none;
    }

    /* Error page scaling */
    .error-page-wrap .errormain h2 {
        font-size: 150px;
        line-height: 160px;
    }

    .error-page-wrap .errormain h3 {
        font-size: 28px;
    }

    /* Job header centering */
    .job-header .jobinfo .companyinfo,
    .job-header .jobinfo .candidateinfo {
        text-align: center;
    }

    .job-header .jobinfo .companyinfo .companylogo,
    .job-header .jobinfo .candidateinfo .userPic,
    .educationList li .date {
        float: none;
        margin: 0 auto 10px auto;
    }

    .job-header .jobinfo .candidateinfo .userPic {
        height: auto;
    }

    .employerList {
        margin: 15px 0;
    }

    /* Copyright buttons */
    .copyright ul li a {
        display: block;
        margin: 5px;
        padding: 8px 15px;
        background: #ddd;
        color: #000;
        text-align: center;
    }

    .copyright ul li a:hover {
        background: #333;
        color: #fff;
        text-decoration: none;
    }

    /* App wrapper text */
    .appwraper .titleTop h3 {
        font-size: 36px;
    }

    .appwraper {
        padding-top: 50px;
    }

    .appimg {
        display: none;
    }

    /* Tabs layout */
    .nav-tabs > li,
    .tabswrap .nav-tabs {
        float: none;
    }

    .tabswrap .nav-tabs > li {
        margin-top: 5px;
    }
}


/*******************
    Small Mobile Screen (≤400px)
*******************/
@media screen and (max-width: 400px) {

    .header .col-md-5 {
        padding-right: 15px;
    }

    .usernav li {
        width: 50%;
        text-align: center;
    }
}


/* ========================================
   MODERN BLOG DESIGN — UPDATED VERSION
   (Structure Preserved — No Omissions)
======================================== */

/* Blog Wrapper */
.blogwrapper {
    margin-bottom: 40px;
}

.blogList {
    list-style: none;
    padding: 0;
    margin: 0;
}

.blogList > li {
    margin-bottom: 30px;
}

.blogList > li:last-child {
    margin-bottom: 0;
}

/* Modern Blog Card */
.bloginner {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transition: all .35s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

.bloginner:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.14);
}

/* Blog Image */
.bloginner .postimg {
    position: relative;
    overflow: hidden;
    height: 250px;
    background: #f3f4f6;
}

.bloginner .postimg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.bloginner:hover .postimg img {
    transform: scale(1.1);
}

/* Blog Content */
.bloginner .post-header {
    padding: 22px 26px 0 26px;
}

.bloginner .post-header h4 {
    margin: 0 0 15px 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
}

.bloginner .post-header h4 a {
    color: #2c3e50;
    text-decoration: none;
    transition: color .3s ease;
}

.bloginner .post-header h4 a:hover {
    color: #5e2dfa;
}

.bloginner .postmeta {
    font-size: 13px;
    color: #7f8c8d;
    display: flex;
    align-items: center;
    gap: 6px;
}

.bloginner .postmeta a {
    color: #5e2dfa;
    text-decoration: none;
    font-weight: 600;
    transition: color .3s ease;
}

.bloginner .postmeta a:hover {
    color: #17d27c;
    text-decoration: underline;
}

.bloginner > p {
    padding: 0 26px 26px 26px;
    color: #555;
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
    flex-grow: 1;
}

/* ============================================================
   BLOG DETAIL PAGE
============================================================ */
.blogdetailwrap {
    background: #fff;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    margin-bottom: 40px;
}

.blogdetailwrap h1 {
    font-size: 36px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 20px;
    line-height: 1.25;
}

.blogdetailwrap .postimg {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    margin: 30px 0;
    height: 450px;
    background: #f5f5f5;
}

.blogdetailwrap .postimg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blogdetailwrap .post-header {
    margin-bottom: 30px;
}

.blogdetailwrap .postmeta {
    font-size: 14px;
    color: #7f8c8d;
    padding: 15px 0;
    border-top: 1px solid #ecf0f1;
    border-bottom: 1px solid #ecf0f1;
}

.blogdetailwrap > p {
    font-size: 16px;
    line-height: 1.8;
    color: #34495e;
    margin-top: 30px;
}

/* ============================================================
   SIDEBAR
============================================================ */
.blogsidebar {
    position: sticky;
    top: 100px;
}

.blogsidebar .widget {
    background: #ffffff;
    border-radius: 14px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.08);
    transition: all .3s ease;
    border: none;
}

.blogsidebar .widget:hover {
    box-shadow: 0 8px 22px rgba(0,0,0,0.12);
}

.blogsidebar .widget-title {
    font-size: 20px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 3px solid #5e2dfa;
    position: relative;
}

.blogsidebar .widget-title::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 60px;
    height: 3px;
    background: #17d27c;
}

/* Search Widget */
.blogsidebar .search {
    position: relative;
}

.blogsidebar .search .form-control {
    border: 2px solid #ecf0f1;
    border-radius: 25px;
    padding: 12px 52px 12px 20px;
    font-size: 14px;
    transition: all .3s ease;
}

.blogsidebar .search .form-control:focus {
    border-color: #5e2dfa;
    box-shadow: 0 0 0 3px rgba(94,45,250,0.1);
}

.blogsidebar .search .btn {
    position: absolute;
    top: 5px;
    right: 6px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg,#5e2dfa 0%, #17d27c 100%);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease;
}

.blogsidebar .search .btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(94,45,250,0.4);
}

/* Categories Widget */
.blogsidebar .categories {
    list-style: none;
    padding: 0;
    margin: 0;
}

.blogsidebar .categories li {
    margin-bottom: 12px;
    position: relative;
    padding-left: 25px;
    transition: all .3s ease;
}

.blogsidebar .categories li::before {
    content: '\f105';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 16px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #5e2dfa;
    transition: all .3s ease;
}

.blogsidebar .categories li:hover::before {
    left: 5px;
    color: #17d27c;
}

.blogsidebar .categories li a {
    color: #555;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    display: block;
    transition: all .3s ease;
}

.blogsidebar .categories li a:hover {
    color: #5e2dfa;
    padding-left: 10px;
}

/* Pagination */
.pagiWrap {
    margin: 40px 0;
}

.pagiWrap nav {
    display: flex;
    justify-content: center;
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 991px) {
    .blogsidebar {
        position: relative;
        top: 0;
        margin-top: 40px;
    }
    .blogdetailwrap {
        padding: 30px 20px;
    }
    .blogdetailwrap h1 {
        font-size: 28px;
    }
    .blogdetailwrap .postimg {
        height: 300px;
    }
}

@media (max-width: 768px) {
    .bloginner .post-header {
        padding: 20px 20px 10px;
    }
    .bloginner .post-header h4 {
        font-size: 18px;
    }
    .bloginner > p {
        padding: 0 20px 20px;
        font-size: 14px;
    }
    .bloginner .postimg {
        height: 200px;
    }
    .blogdetailwrap {
        padding: 20px 15px;
    }
    .blogdetailwrap h1 {
        font-size: 24px;
    }
    .blogdetailwrap .postimg {
        height: 250px;
    }
}

/* ================================================================
   User Package Details Styles — Modernised, Structure Preserved
================================================================ */

/* Container */
.user-package-details {
    background: #ffffff;
    border-radius: 14px;
    padding: 28px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.08);
    margin-bottom: 32px;
    transition: box-shadow .3s ease, transform .3s ease;
}

.user-package-details:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 24px rgba(0,0,0,0.12);
}

.user-package-details .package-header {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #edf2f7;
}

.user-package-details .package-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-package-details .package-header i {
    color: #17d27c;
    font-size: 22px;
}

/* Grid */
.user-package-details .package-info-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* Base Card */
.package-info-card.user-package {
    background: linear-gradient(135deg,#fafafa 0%,#ffffff 100%);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    transition: all .3s ease;
    position: relative;
}

.package-info-card.user-package:hover {
    transform: translateY(-5px);
    border-color: #0d7a6f;
    box-shadow: 0 8px 28px rgba(17,153,142,0.18);
}

/* Icon */
.package-info-card.user-package .package-icon {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: #fff;
    min-width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(17,153,142,0.25);
}

/* Name Card */
.package-info-card.user-package.package-name-card {
    background: linear-gradient(135deg,#11998e 0%,#38ef7d 100%);
    border-color: #11998e;
    color: #fff;
}

.package-info-card.user-package.package-name-card .package-value,
.package-info-card.user-package.package-name-card .package-label {
    color: #fff;
}

.package-info-card.user-package.package-name-card .package-icon {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

/* Featured Badge Card */
.package-info-card.user-package.featured-badge-card {
    background: linear-gradient(135deg,#e8f5f3 0%,#d2f1e6 100%);
    border-color: #11998e;
}

.package-info-card.user-package.featured-badge-card .package-label {
    color: #666;
}

.package-info-card.user-package.featured-badge-card .package-value {
    color: #2b2b2b;
}

/* Quota Card */
.package-info-card.user-package.quota-card {
    background: linear-gradient(135deg,#e8f5f3 0%,#d4f0e8 100%);
    border-color: #11998e;
}

.package-info-card.user-package.quota-card .package-icon {
    background: linear-gradient(135deg,#11998e 0%,#38ef7d 100%);
}

/* ================================================================
   EXPIRED PACKAGE
================================================================ */

.user-package-details.expired {
    background: linear-gradient(135deg,#ff6b6b 0%,#ee5a6f 100%);
    border: none;
    color: #fff;
}

.user-package-details.expired .package-header.expired-header {
    background: rgba(255,255,255,0.2);
    margin: -28px -28px 20px -28px;
    padding: 20px;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
}

.user-package-details.expired .package-header h3 {
    color: #fff;
}

/* Expiry date card */
.package-info-card:last-child .package-icon {
    background: linear-gradient(135deg,#e74c3c 0%,#c0392b 100%);
    box-shadow: 0 4px 12px rgba(231,76,60,0.3);
}

.package-info-card:last-child:hover .package-icon {
    box-shadow: 0 6px 16px rgba(231,76,60,0.4);
}

.package-info-card:last-child::before {
    background: linear-gradient(180deg,#e74c3c 0%,#c0392b 100%);
}

.expired-message {
    text-align: center;
    padding: 30px 20px;
}

.expired-message p {
    color: #fff;
    font-size: 16px;
    margin-bottom: 20px;
}

.expired-message .btn {
    background: #fff;
    color: #ff6b6b;
    font-weight: 700;
    padding: 12px 28px;
    border-radius: 25px;
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.25);
    transition: all .3s ease;
}

.expired-message .btn:hover {
    transform: translateY(-2px);
    background: #f8f9fa;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

/* ================================================================
   NO PACKAGE MESSAGE
================================================================ */

.no-package-message {
    background: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
    color: #fff;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    margin-bottom: 30px;
}

.no-package-content {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 15px;
}

.no-package-icon {
    font-size: 40px;
    opacity: .9;
}

.no-package-text h4 {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 700;
}

.no-package-text p {
    margin: 0;
    color: rgba(255,255,255,0.9);
    font-size: 15px;
}

.no-package-btn {
    display: inline-block;
    background: #fff;
    color: #667eea;
    font-weight: 700;
    padding: 12px 32px;
    border-radius: 26px;
    text-decoration: none;
    transition: all .3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.no-package-btn:hover {
    transform: translateY(-2px);
    background: #f8f9fa;
    color: #5568d3;
    box-shadow: 0 6px 14px rgba(0,0,0,0.3);
}

/* ================================================================
   USER PACKAGE LISTING SECTION
================================================================ */

.user-pkg-section {
    margin-bottom: 40px;
}

.user-pkg-section-header {
    text-align: center;
    margin-bottom: 35px;
}

.user-pkg-section-header h3 {
    font-size: 28px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 8px;
}

.user-pkg-section-header h3 i {
    color: #11998e;
    margin-right: 8px;
}

.user-pkg-section-header p {
    font-size: 16px;
    color: #7f8c8d;
}

/* Card */
.user-pkg-card {
    background: #fff;
    border-radius: 16px;
    padding: 30px;
    border: 2px solid #e8f5f3;
    box-shadow: 0 4px 18px rgba(0,0,0,0.08);
    transition: all .3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.user-pkg-card:hover {
    transform: translateY(-6px);
    border-color: #11998e;
    box-shadow: 0 8px 26px rgba(17,153,142,0.18);
}

.user-pkg-card-header {
    text-align: center;
    margin-bottom: 20px;
}

.user-pkg-card-header h4 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 10px;
    color: #2c3e50;
}

.user-pkg-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

.user-pkg-badge.featured {
    background: linear-gradient(135deg,#11998e 0%,#38ef7d 100%);
    color: #fff;
}

/* Price Block */
.user-pkg-price {
    text-align: center;
    background: linear-gradient(135deg,#e8f5f3 0%,#d4f1e8 100%);
    padding: 18px;
    border-radius: 12px;
    margin-bottom: 22px;
}

.user-pkg-currency {
    font-size: 24px;
    font-weight: 600;
    color: #11998e;
}

.user-pkg-amount {
    font-size: 48px;
    font-weight: 700;
    color: #11998e;
}

/* Features */
.user-pkg-features {
    flex-grow: 1;
    margin-bottom: 22px;
}

.user-pkg-feature {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #ececec;
}

.user-pkg-feature:last-child {
    border-bottom: none;
}

.user-pkg-feature i {
    font-size: 18px;
    width: 24px;
    text-align: center;
    color: #11998e;
}

.user-pkg-feature span {
    font-size: 15px;
    color: #34495e;
}

/* Button */
.user-pkg-btn {
    width: 100%;
    padding: 15px 20px;
    background: linear-gradient(135deg,#11998e 0%,#38ef7d 100%);
    border-radius: 10px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    border: none;
    text-align: center;
    box-shadow: 0 4px 16px rgba(17,153,142,0.25);
    transition: all .3s ease;
    text-decoration: none;
}

.user-pkg-btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg,#0d7a6f 0%,#2dd373 100%);
    box-shadow: 0 6px 22px rgba(17,153,142,0.32);
    color: #fff;
}

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

@media (max-width: 768px) {

    .no-package-content {
        flex-direction: column;
        text-align: center;
    }

    .no-package-icon {
        font-size: 52px;
    }

    .expired-message p {
        font-size: 14px;
    }

    .user-pkg-section-header h3 {
        font-size: 24px;
    }

    .user-pkg-card {
        padding: 24px;
    }

    .user-pkg-amount {
        font-size: 40px;
    }
}

@media (max-width: 576px) {

    .no-package-message {
        padding: 20px;
    }

    .user-package-details {
        padding: 20px;
    }

    .user-pkg-card {
        padding: 20px;
    }

    .user-pkg-section-header h3 {
        font-size: 20px;
    }

    .user-pkg-amount {
        font-size: 34px;
    }

    .user-pkg-feature span {
        font-size: 14px;
    }
}

/* ================================================================
   Payment Method Modal Styles
   For payment gateway selection in modals
   ================================================================ */

.payment-methods {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.payment-method-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 15px 25px;
    background: white;
    border: 2px solid #e8f5f3;
    border-radius: 8px;
    color: #2c3e50;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 15px;
}

.payment-method-btn:hover {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
    border-color: #11998e;
    text-decoration: none;
    transform: translateX(5px);
}

.payment-method-btn i {
    font-size: 20px;
}

/* Payment method specific colors on hover */
.payment-method-btn:hover i.fa-cc-paypal {
    color: #fff;
}

.payment-method-btn:hover i.fa-cc-stripe {
    color: #fff;
}

.payment-method-btn:hover i.fa-credit-card {
    color: #fff;
}

/* ================================================================
   User Payment History Page Styles
   Modern card-based timeline design matching company payment history
   Using unique prefix "user-payment-" to avoid conflicts
   ================================================================ */

/* Payment History Header */
.user-payment-history-header {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
    padding: 30px;
    border-radius: 12px;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(17, 153, 142, 0.2);
}

.user-payment-history-header h2 {
    margin: 0 0 10px 0;
    font-size: 28px;
    font-weight: 700;
    color: white;
}

.user-payment-history-header h2 i {
    margin-right: 10px;
}

.user-payment-history-header p {
    margin: 0;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
}

/* Payment Timeline Container */
.user-payment-timeline {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Individual Payment Card */
.user-payment-card {
    background: white;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    border-left: 4px solid #11998e;
    transition: all 0.3s ease;
}

.user-payment-card:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 20px rgba(17, 153, 142, 0.15);
}

/* Payment Card Header */
.user-payment-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f0f0f0;
    flex-wrap: wrap;
    gap: 15px;
}

.user-payment-package-info h4 {
    margin: 0 0 10px 0;
    font-size: 20px;
    font-weight: 700;
    color: #2c3e50;
}

.user-payment-package-info h4 i {
    color: #11998e;
    margin-right: 8px;
}

/* Payment Method Badge */
.user-payment-method-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    background: #e8f5f3;
    color: #11998e;
}

.user-payment-method-badge.user-payment-method-paypal {
    background: #ecf4ff;
    color: #0070ba;
}

.user-payment-method-badge.user-payment-method-stripe {
    background: #f3f0ff;
    color: #635bff;
}

.user-payment-method-badge.user-payment-method-admin-assign {
    background: #fff3e0;
    color: #ff9800;
}

/* Price Badge */
.user-payment-price-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
    border-radius: 25px;
    font-size: 18px;
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(17, 153, 142, 0.2);
}

.user-payment-price-badge i {
    font-size: 16px;
}

/* Payment Details Inline Grid */
.user-payment-details-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.user-payment-detail-item-inline {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 180px;
}

.user-payment-detail-icon-inline {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #e8f5f3 0%, #d4f1e8 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-payment-detail-icon-inline i {
    font-size: 18px;
    color: #11998e;
}

.user-payment-detail-text-inline {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-payment-detail-label-inline {
    font-size: 12px;
    color: #95a5a6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.user-payment-detail-value-inline {
    font-size: 15px;
    color: #2c3e50;
    font-weight: 600;
}

/* ================================================================
   Responsive Styles for User Payment History — Modernised
================================================================ */

@media (max-width: 991px) {

    .user-payment-details-inline {
        gap: 18px;
    }

    .user-payment-detail-item-inline {
        min-width: 150px;
    }
}

@media (max-width: 768px) {

    .user-payment-history-header {
        padding: 28px 22px;
        border-radius: 10px;
    }

    .user-payment-history-header h2 {
        font-size: 24px;
        line-height: 1.3;
    }

    .user-payment-card {
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 3px 12px rgba(0,0,0,0.07);
        transition: box-shadow .3s ease;
    }

    .user-payment-card:hover {
        box-shadow: 0 6px 20px rgba(0,0,0,0.12);
        transform: translateY(-3px);
    }

    .user-payment-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .user-payment-price-badge {
        font-size: 16px;
        padding: 8px 16px;
        border-radius: 20px;
    }

    .user-payment-details-inline {
        flex-direction: column;
        gap: 14px;
    }

    .user-payment-detail-item-inline {
        width: 100%;
    }
}

@media (max-width: 576px) {

    .user-payment-history-header {
        padding: 20px 16px;
        border-radius: 8px;
    }

    .user-payment-history-header h2 {
        font-size: 20px;
    }

    .user-payment-package-info h4 {
        font-size: 17px;
    }

    .user-payment-card {
        padding: 16px;
        border-left-width: 3px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }

    .user-payment-card:hover {
        transform: none;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
}

/* ================================================================
   Job Stats Bar Styles — Modernised
================================================================ */

.job-stats-bar {
    display: flex;
    gap: 15px;
    margin-top: 15px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #f8f9fa 0%, #eef2f5 100%);
    border-radius: 10px;
    border: 1px solid #dde3e8;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: box-shadow .3s ease, transform .3s ease;
}

.job-stats-bar:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.10);
}

.job-stat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.job-stat-item i {
    font-size: 18px;
    color: #11998e;
    width: 22px;
    text-align: center;
}

.job-stat-label {
    font-size: 13px;
    color: #6c757d;
    font-weight: 500;
}

.job-stat-value {
    font-size: 16px;
    font-weight: 700;
    background: #ffffff;
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid #11998e;
    color: #11998e;
    box-shadow: inset 0 1px 3px rgba(17,153,142,0.12);
}

/* Responsive */
@media (max-width: 576px) {

    .job-stats-bar {
        flex-direction: column;
        gap: 12px;
        padding: 14px;
    }

    .job-stat-item {
        justify-content: space-between;
    }

    .job-stat-item i {
        font-size: 16px;
    }

    .job-stat-value {
        font-size: 15px;
    }
}