/* ==========================================================================
   MELLOW VAULT - MODERN RESPONSIVE STYLESHEET
   Unified, Clean, Mobile-First UI/UX Design System
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS & CSS VARIABLES
   -------------------------------------------------------------------------- */
:root {
    --mv-primary: #2563eb;
    --mv-primary-hover: #1d4ed8;
    --mv-primary-light: #eff6ff;
    --mv-primary-gradient: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    --mv-secondary-gradient: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    --mv-dark-gradient: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    --mv-accent: #f59e0b;
    --mv-success: #10b981;
    --mv-danger: #ef4444;
    
    --mv-dark-900: #0f172a;
    --mv-dark-800: #1e293b;
    --mv-dark-700: #334155;
    --mv-gray-600: #475569;
    --mv-gray-500: #64748b;
    --mv-gray-400: #94a3b8;
    --mv-gray-300: #cbd5e1;
    --mv-gray-200: #e2e8f0;
    --mv-gray-100: #f1f5f9;
    --mv-gray-50: #f8fafc;
    --mv-white: #ffffff;
    
    --mv-font: 'Poppins', 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    --mv-radius-sm: 6px;
    --mv-radius-md: 10px;
    --mv-radius-lg: 16px;
    --mv-radius-xl: 24px;
    --mv-radius-full: 9999px;
    
    --mv-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
    --mv-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
    --mv-shadow-md: 0 6px 20px rgba(15, 23, 42, 0.08);
    --mv-shadow-lg: 0 14px 34px rgba(15, 23, 42, 0.12);
    --mv-shadow-xl: 0 24px 50px rgba(15, 23, 42, 0.18);
    
    --mv-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   2. GLOBAL RESET & VIEWPORT NORMALIZATION
   -------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden !important;
    font-family: var(--mv-font);
    font-size: 15px;
    line-height: 1.6;
    color: var(--mv-dark-700);
    background-color: var(--mv-gray-50);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--mv-primary);
    text-decoration: none;
    transition: var(--mv-transition);
}

a:hover {
    color: var(--mv-primary-hover);
    text-decoration: none;
}

a:not([href]):not([tabindex]) {
    color: inherit !important;
}

img, video {
    max-width: 100%;
    height: auto;
    display: inline-block;
    vertical-align: middle;
}

.row img {
    border-radius: var(--mv-radius-sm);
    max-width: 100%;
}

/* Modern Form Element Resets */
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none !important;
}

/* --------------------------------------------------------------------------
   3. MODERN PAGE LOADER (MACKDEVS STYLE OUTLINE-TO-FILL & CURTAIN DISMISSAL)
   -------------------------------------------------------------------------- */
#mackdevs-preloader.mackdevs-preloader,
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    clip-path: inset(0%);
    -webkit-clip-path: inset(0%);
    -webkit-user-select: none;
    user-select: none;
    will-change: clip-path, transform, opacity;
    transition: clip-path 0.75s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.75s cubic-bezier(0.77, 0, 0.175, 1);
}

#mackdevs-preloader.preloader-closing,
.page-loader.preloader-closing {
    clip-path: inset(100% 0% 0%);
    -webkit-clip-path: inset(100% 0% 0%);
    pointer-events: none;
    opacity: 0.98;
}

#mackdevs-preloader .preloader-bar,
.page-loader .preloader-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: #f1f5f9;
    z-index: 10;
}

#mackdevs-preloader .preloader-progress,
.page-loader .preloader-progress {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #7e22ce, #a855f7, #10b981);
    box-shadow: 0 0 16px rgba(126, 34, 206, 0.4);
    transition: width 60ms linear;
}

#mackdevs-preloader .preloader-center,
.page-loader .preloader-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    z-index: 5;
}

#mackdevs-preloader .title,
.page-loader .title {
    position: relative;
    width: max-content;
    margin: 0;
    padding: 0;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: clamp(2rem, 7vw, 5.5rem);
    font-weight: 900;
    line-height: 0.92;
    letter-spacing: clamp(4px, 1.4vw, 12px);
    text-transform: uppercase;
}

#mackdevs-preloader .percent,
.page-loader .percent {
    position: absolute;
    top: clamp(-28px, -4vw, -36px);
    left: 0;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: clamp(14px, 1.8vw, 18px);
    font-weight: 700;
    letter-spacing: 2px;
    color: #7e22ce;
    text-shadow: 0 0 10px rgba(126, 34, 206, 0.25);
}

#mackdevs-preloader .text-strok,
.page-loader .text-strok {
    display: block;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(15, 23, 42, 0.35);
}

#mackdevs-preloader .text-fill,
.page-loader .text-fill {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #0f172a;
    clip-path: inset(100% 0% 0%);
    -webkit-clip-path: inset(100% 0% 0%);
    text-shadow: 0 0 25px rgba(126, 34, 206, 0.2);
    will-change: clip-path;
}

#mackdevs-preloader .preloader-subtext,
.page-loader .preloader-subtext {
    margin-top: 18px;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: clamp(9px, 1.2vw, 12px);
    font-weight: 700;
    letter-spacing: clamp(3px, 0.6vw, 6px);
    color: #64748b;
    text-transform: uppercase;
}

/* Dark mode compatibility */
html.dark #mackdevs-preloader.mackdevs-preloader,
html.dark .page-loader {
    background-color: #080b11;
}

html.dark #mackdevs-preloader .preloader-bar,
html.dark .page-loader .preloader-bar {
    background: rgba(255, 255, 255, 0.08);
}

html.dark #mackdevs-preloader .preloader-progress,
html.dark .page-loader .preloader-progress {
    background: linear-gradient(90deg, #a855f7, #c084fc 40%, #10b981);
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.7);
}

html.dark #mackdevs-preloader .percent,
html.dark .page-loader .percent {
    color: #34d399;
    text-shadow: 0 0 12px rgba(16, 185, 129, 0.6);
}

html.dark #mackdevs-preloader .text-strok,
html.dark .page-loader .text-strok {
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.4);
}

html.dark #mackdevs-preloader .text-fill,
html.dark .page-loader .text-fill {
    color: #ffffff;
    text-shadow: 0 0 30px rgba(126, 34, 206, 0.4);
}

html.dark #mackdevs-preloader .preloader-subtext,
html.dark .page-loader .preloader-subtext {
    color: rgba(255, 255, 255, 0.45);
}

/* --------------------------------------------------------------------------
   4. NAVIGATION & HEADER (MATCHING SCREENSHOT)
   -------------------------------------------------------------------------- */
nav {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1020;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin: 0 !important;
    margin-bottom: 0 !important;
    transition: var(--mv-transition);
}

nav.navbar-sticked {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

nav .container {
    position: relative;
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Logo */
nav .logo {
    display: inline-flex;
    align-items: center;
    padding: 6px 0;
    z-index: 10;
}

nav .logo img {
    max-height: 48px;
    width: auto;
    object-fit: contain;
    transition: transform 0.2s ease;
}

nav .logo img:hover {
    transform: scale(1.02);
}

/* --------------------------------------------------------------------------
   DESKTOP TOP BAR (Row 1 & Row 2 Matching Screenshot)
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    nav .container {
        position: relative !important;
        max-width: 1360px !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 20px !important;
        display: block !important;
    }

    /* On desktop, hide outer container logo and use li.left-side inside navigation-top */
    nav > .container > .logo {
        display: none !important;
    }

    /* TOP ROW: navigation-top takes 100% width of container */
    nav .navigation-top {
        display: block !important;
        width: 100% !important;
        padding: 10px 0 !important;
        border: none !important;
        margin: 0 !important;
    }

    nav .navigation-top > ul {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        height: auto !important;
        gap: 12px !important;
    }

    /* Left Slot: Logo inside li.left-side balances with right-side buttons (~330px) */
    nav .navigation-top > ul > li.left-side {
        display: inline-flex !important;
        flex: 0 0 330px !important;
        width: 330px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    nav .navigation-top > ul > li.left-side .logo-icon {
        display: inline-flex !important;
        align-items: center !important;
        height: 48px !important;
        line-height: normal !important;
    }

    nav .navigation-top > ul > li.left-side .logo-icon img {
        max-height: 48px !important;
        width: auto !important;
        display: block !important;
        object-fit: contain !important;
    }

    /* Dynamic balance for logged-out vs logged-in state */
    nav:not(:has(.cardss-developer)) .navigation-top > ul > li.left-side {
        flex: 0 0 165px !important;
        width: 165px !important;
    }

    /* Laptop/Tablet Breakpoint (992px to 1199px) Balance */
    @media (min-width: 992px) and (max-width: 1199px) {
        nav .navigation-top > ul > li.left-side {
            flex: 0 0 280px !important;
            width: 280px !important;
        }
        nav:not(:has(.cardss-developer)) .navigation-top > ul > li.left-side {
            flex: 0 0 150px !important;
            width: 150px !important;
        }
        nav .navigation-top > ul {
            gap: 8px !important;
        }
    }

    /* CENTER GROUP: Find Talent, Advance filter, Hire Now - True Mathematical 50% Center */
    nav .navigation-top > ul > li:nth-child(2) {
        margin-left: auto !important;
        padding: 0 !important;
    }

    nav .navigation-top > ul > li:nth-child(4) {
        margin-right: auto !important;
        padding: 0 !important;
    }

    /* Center Links: FIND TALENT, ADVANCE FILTER, HIRE NOW */
    nav .navigation-top > ul > li:nth-child(2) a,
    nav .navigation-top > ul > li:nth-child(3) a,
    nav .navigation-top > ul > li:nth-child(4) a {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: #1a202c !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.6px !important;
        padding: 8px 16px !important;
        white-space: nowrap !important;
        line-height: normal !important;
        transition: color 0.2s ease;
        display: inline-flex !important;
        align-items: center !important;
    }

    @media (min-width: 992px) and (max-width: 1199px) {
        nav .navigation-top > ul > li:nth-child(2) a,
        nav .navigation-top > ul > li:nth-child(3) a,
        nav .navigation-top > ul > li:nth-child(4) a {
            padding: 6px 12px !important;
            font-size: 12.5px !important;
        }
    }

    nav .navigation-top > ul > li:nth-child(2) a:hover,
    nav .navigation-top > ul > li:nth-child(3) a:hover,
    nav .navigation-top > ul > li:nth-child(4) a:hover {
        color: #0077ff !important;
        background: transparent !important;
    }

    /* RIGHT BUTTONS */
    /* Login Developer: Deep Navy with Green Accent Border */
    .cardss.cardss-developer {
        background: #002244 !important;
        border: 2px solid #16a34a !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(22, 163, 74, 0.2) !important;
        transition: all 0.2s ease !important;
        overflow: hidden;
    }

    .cardss.cardss-developer:hover {
        background: #001a33 !important;
        box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35) !important;
        transform: translateY(-1px);
    }

    .cardss.cardss-developer .contentss a {
        color: #ffffff !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        padding: 8px 18px !important;
        display: inline-block;
        white-space: nowrap;
        text-decoration: none;
    }

    /* Login Employer: Deep Navy with Bright Blue Accent Border */
    .cardss.cardss-employer {
        background: #002244 !important;
        border: 2px solid #0077ff !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(0, 119, 255, 0.2) !important;
        transition: all 0.2s ease !important;
        overflow: hidden;
    }

    .cardss.cardss-employer:hover {
        background: #001a33 !important;
        box-shadow: 0 4px 14px rgba(0, 119, 255, 0.35) !important;
        transform: translateY(-1px);
    }

    .cardss.cardss-employer .contentss a {
        color: #ffffff !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        padding: 8px 18px !important;
        display: inline-block;
        white-space: nowrap;
        text-decoration: none;
    }

    /* Cart Icon on Far Right */
    nav .navigation-top .open-cart,
    nav .navigation-top .open-cart-logout {
        width: 36px;
        height: 36px;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: #1e293b !important;
        position: relative;
        padding: 0;
        margin-left: 8px;
        margin-right: 8px;
        cursor: pointer;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    nav .navigation-top .open-cart i,
    nav .navigation-top .open-cart-logout i {
        font-size: 19px;
        color: #1a202c;
    }

    nav .navigation-top .open-cart:hover i,
    nav .navigation-top .open-cart-logout:hover i {
        color: #0077ff;
    }

    nav .navigation-top .cart_value {
        position: absolute;
        top: -3px;
        right: -6px;
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        border-radius: 9999px;
        background: #0f172a !important;
        color: #ffffff !important;
        font-size: 10px;
        font-weight: 700;
        line-height: 17px;
        text-align: center;
        box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    }

    /* User Greeting Pill in Nav (Logged-In State) */
    .user-pill-item {
        display: inline-flex !important;
        align-items: center !important;
        position: relative !important;
    }

    .user-nav-pill {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 5px 12px 5px 6px !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 9999px !important;
        text-decoration: none !important;
        cursor: pointer !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        line-height: normal !important;
    }

    .user-nav-pill:hover,
    .user-nav-pill.open {
        background: #f0f7ff !important;
        border-color: #bfdbfe !important;
        box-shadow: 0 2px 8px rgba(0, 119, 255, 0.1) !important;
    }

    .user-nav-avatar {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, #0077ff 0%, #0055cc 100%) !important;
        color: #ffffff !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 2px 5px rgba(0, 119, 255, 0.25) !important;
    }

    .user-nav-name {
        font-size: 13.5px !important;
        font-weight: 600 !important;
        color: #0f172a !important;
        white-space: nowrap !important;
    }

    .user-nav-chevron {
        font-size: 10px !important;
        color: #64748b !important;
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
        margin-left: 2px !important;
    }

    .user-nav-pill.open .user-nav-chevron {
        transform: rotate(180deg) !important;
        color: #0077ff !important;
    }

    /* Fallback greeting text */
    .open-login span {
        font-size: 13.5px;
        font-weight: 600;
        color: #1a202c;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    /* ROW 2: Navigation Main with thin top divider */
    nav .navigation-main {
        order: 3;
        flex: 0 0 100%;
        width: 100%;
        border-top: 1px solid #e5e7eb;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px 0 8px 0;
        margin: 0;
    }

    /* Hide mobile trigger buttons on desktop */
    nav .navigation-main > .open-search,
    nav .navigation-main > .open-login,
    nav .navigation-main > .open-cart,
    nav .navigation-main > .open-cart-logout,
    nav .navigation-main > .open-menu {
        display: none !important;
    }

    nav .navigation-main .floating-menu {
        display: flex !important;
        justify-content: center;
        align-items: center;
        width: 100%;
        background: transparent;
        padding: 0;
        box-shadow: none;
        position: static;
    }

    nav .navigation-main .floating-menu > ul {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 36px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    nav .navigation-main .floating-menu > ul > li {
        position: relative;
    }

    nav .navigation-main .floating-menu > ul > li > a {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: #111827 !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.6px !important;
        padding: 6px 10px !important;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        transition: color 0.2s ease;
    }

    nav .navigation-main .floating-menu > ul > li > a:hover {
        color: #0077ff !important;
        background: transparent !important;
    }

    nav .navigation-main .floating-menu > ul > li > .menures,
    nav .navigation-main .floating-menu > ul > li.mobile-find-talent-item {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
   5. SEARCH WRAPPER & AUTOCOMPLETE
   -------------------------------------------------------------------------- */
.search-wrapper {
    position: absolute;
    top: calc(100% + 10px);
    left: 16px;
    right: 16px;
    z-index: 1050;
    background: var(--mv-white);
    border-radius: var(--mv-radius-lg);
    border: 1px solid var(--mv-gray-200);
    box-shadow: var(--mv-shadow-xl);
    padding: 16px 20px;
    display: none;
    animation: mvFadeSlideDown 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.search-wrapper.open {
    display: block;
}

.search-wrapper .form-control {
    width: 100%;
    height: 48px;
    padding: 10px 16px;
    font-size: 15px;
    border-radius: var(--mv-radius-md);
    border: 1.5px solid var(--mv-gray-200);
    color: var(--mv-dark-800);
    transition: var(--mv-transition);
}

.search-wrapper .form-control:focus {
    border-color: var(--mv-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

#autosearchResult,
#autosearchResults {
    max-height: 350px;
    overflow-y: auto;
    margin-top: 10px;
    border-radius: var(--mv-radius-md);
}

/* --------------------------------------------------------------------------
   6. ULTRA-MODERN FULL-SCREEN MEGA MENU (DEVELOPMENT & IT)
   -------------------------------------------------------------------------- */
.dropdown:hover .mega-menu,
.dropdown.show .mega-menu,
.dropdown.open .mega-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

@media (min-width: 992px) {
    /* Allow breakout to full-screen width across desktop */
    nav .navigation-main .floating-menu > ul > li.position-static {
        position: static !important;
    }

    .dropdown-menu.mega-menu {
        position: absolute !important;
        top: 100% !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) translateY(10px) scale(0.995) !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        margin: 0 !important;
        background: #ffffff !important;
        border: none !important;
        border-top: 1px solid #eef2f6 !important;
        border-bottom: 3px solid #0077ff !important;
        border-radius: 0 0 24px 24px !important;
        box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
        padding: 24px 0 28px 0 !important;
        z-index: 1060 !important;
        display: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s ease !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        max-height: calc(100vh - 110px) !important;
        box-sizing: border-box !important;
    }

    .dropdown-menu.mega-menu::-webkit-scrollbar {
        width: 6px;
    }
    .dropdown-menu.mega-menu::-webkit-scrollbar-track {
        background: #f1f5f9;
    }
    .dropdown-menu.mega-menu::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 4px;
    }
    .dropdown-menu.mega-menu::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }

    .dropdown:hover .mega-menu,
    .dropdown.show .mega-menu,
    .dropdown.open .mega-menu {
        transform: translateX(-50%) translateY(0) scale(1) !important;
    }

    /* Gradient accent bar on top of the mega menu */
    .dropdown-menu.mega-menu::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 3.5px !important;
        background: linear-gradient(90deg, #0077ff 0%, #00c6ff 50%, #16a34a 100%) !important;
    }

    /* Centered Inner Container */
    .dropdown-menu.mega-menu .mega-menu-container {
        width: 100% !important;
        max-width: 1360px !important;
        margin: 0 auto !important;
        padding: 0 24px !important;
    }

    /* Mega Menu Header Bar */
    .mega-menu-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-bottom: 14px !important;
        margin-bottom: 18px !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }

    .mega-menu-header-info {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .mega-header-pill {
        display: inline-flex !important;
        align-items: center !important;
        padding: 5px 12px !important;
        border-radius: 9999px !important;
        background: #e0f2fe !important;
        color: #0284c7 !important;
        font-size: 11.5px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }

    .mega-header-text {
        font-size: 13px !important;
        color: #64748b !important;
        font-weight: 500 !important;
    }

    .mega-header-all {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #0077ff !important;
        text-decoration: none !important;
        padding: 6px 14px !important;
        border-radius: 8px !important;
        background: #f0f7ff !important;
        border: 1px solid #dbeafe !important;
        transition: all 0.2s ease !important;
    }

    .mega-header-all:hover {
        background: #0077ff !important;
        color: #ffffff !important;
        transform: translateX(2px) !important;
    }

    /* 3 Equal Columns with Subtle Vertical Separators */
    .dropdown-menu.mega-menu .mega-menu-col {
        padding-left: 14px !important;
        padding-right: 14px !important;
        position: relative !important;
    }

    .dropdown-menu.mega-menu .mega-menu-col:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 8px;
        bottom: 8px;
        right: 0;
        width: 1px;
        background: linear-gradient(180deg, transparent 0%, #e2e8f0 15%, #e2e8f0 85%, transparent 100%);
    }
}

.dropdown-menu.mega-menu .mega-menu-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

.dropdown-menu.mega-menu .mega-menu-item {
    margin: 0 !important;
    padding: 0 !important;
}

/* Mega Menu Item Link */
.dropdown-menu.mega-menu a.mega-menu-link {
    display: flex !important;
    align-items: center !important;
    padding: 7px 10px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
}

.dropdown-menu.mega-menu a.mega-menu-link .mega-item-name {
    flex: 1 1 auto !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Sleek Right Arrow Indicator */
.dropdown-menu.mega-menu a.mega-menu-link .mega-item-arrow {
    font-size: 11px !important;
    color: #94a3b8 !important;
    opacity: 0;
    transform: translateX(-4px);
    transition: all 0.2s ease !important;
    margin-left: 8px !important;
    flex-shrink: 0 !important;
}

/* Interactive Hover State */
.dropdown-menu.mega-menu a.mega-menu-link:hover {
    background: #f0f7ff !important;
    color: #0066ee !important;
    border-color: #dbeafe !important;
    transform: translateX(4px) !important;
    box-shadow: 0 2px 8px rgba(0, 102, 238, 0.08) !important;
    font-weight: 600 !important;
}

.dropdown-menu.mega-menu a.mega-menu-link:hover .mega-icon-badge {
    transform: scale(1.1) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
}

.dropdown-menu.mega-menu a.mega-menu-link:hover .mega-item-arrow {
    opacity: 1 !important;
    transform: translateX(0) !important;
    color: #0066ee !important;
}

/* Active / Focus State */
.dropdown-menu.mega-menu a.mega-menu-link:active {
    transform: scale(0.99) translateX(2px) !important;
}

/* Custom Technology & Skill Icon Badges */
.mega-icon-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    margin-right: 11px !important;
    flex-shrink: 0 !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Brand & Category Color Palette */
.mega-icon-badge.tech-laravel        { background: #fee2e2 !important; color: #ef4444 !important; }
.mega-icon-badge.tech-php            { background: #ede9fe !important; color: #7c3aed !important; }
.mega-icon-badge.tech-python         { background: #e0f2fe !important; color: #0284c7 !important; }
.mega-icon-badge.tech-docker         { background: #e0f2fe !important; color: #0284c7 !important; }
.mega-icon-badge.tech-angular        { background: #ffe4e6 !important; color: #e11d48 !important; }
.mega-icon-badge.tech-react          { background: #e0f7fa !important; color: #00acc1 !important; }
.mega-icon-badge.tech-blockchain     { background: #fef3c7 !important; color: #d97706 !important; }
.mega-icon-badge.tech-crypto         { background: #e0e7ff !important; color: #4f46e5 !important; }
.mega-icon-badge.tech-quantum        { background: #f3e8ff !important; color: #9333ea !important; }
.mega-icon-badge.tech-game           { background: #ede9fe !important; color: #8b5cf6 !important; }
.mega-icon-badge.tech-design         { background: #fce7f3 !important; color: #db2777 !important; }
.mega-icon-badge.tech-database       { background: #e0f2fe !important; color: #0284c7 !important; }
.mega-icon-badge.tech-infrastructure { background: #dbeafe !important; color: #1d4ed8 !important; }
.mega-icon-badge.tech-cloud          { background: #e0f2fe !important; color: #0284c7 !important; }
.mega-icon-badge.tech-security       { background: #d1fae5 !important; color: #059669 !important; }
.mega-icon-badge.tech-hacking        { background: #ccfbf1 !important; color: #0d9488 !important; }
.mega-icon-badge.tech-robotics       { background: #e0e7ff !important; color: #4f46e5 !important; }
.mega-icon-badge.tech-ai             { background: #ede9fe !important; color: #6366f1 !important; }
.mega-icon-badge.tech-datascience    { background: #cffafe !important; color: #0891b2 !important; }
.mega-icon-badge.tech-mining         { background: #fef3c7 !important; color: #d97706 !important; }
.mega-icon-badge.tech-engineering    { background: #f1f5f9 !important; color: #475569 !important; }
.mega-icon-badge.tech-analytics      { background: #d1fae5 !important; color: #10b981 !important; }
.mega-icon-badge.tech-data           { background: #cffafe !important; color: #0891b2 !important; }
.mega-icon-badge.tech-powerbi        { background: #fef9c3 !important; color: #ca8a04 !important; }
.mega-icon-badge.tech-nlp            { background: #ccfbf1 !important; color: #0f766e !important; }
.mega-icon-badge.tech-language       { background: #e0f2fe !important; color: #0369a1 !important; }
.mega-icon-badge.tech-embedded       { background: #ffedd5 !important; color: #ea580c !important; }
.mega-icon-badge.tech-commerce       { background: #d1fae5 !important; color: #10b981 !important; }
.mega-icon-badge.tech-seo            { background: #ffedd5 !important; color: #ea580c !important; }
.mega-icon-badge.tech-marketing      { background: #fef3c7 !important; color: #d97706 !important; }
.mega-icon-badge.tech-testing        { background: #dcfce7 !important; color: #16a34a !important; }
.mega-icon-badge.tech-api            { background: #f1f5f9 !important; color: #475569 !important; }
.mega-icon-badge.tech-cpp            { background: #dbeafe !important; color: #2563eb !important; }
.mega-icon-badge.tech-cms            { background: #e0f2fe !important; color: #0284c7 !important; }
.mega-icon-badge.tech-default        { background: #e0f2fe !important; color: #0077ff !important; }

/* Chevron Indicator on Development & IT trigger */
nav .navigation-main .open-dropdown,
.open-dropdown {
    display: inline-block !important;
    position: static !important;
    width: 7px !important;
    height: 7px !important;
    padding: 0 !important;
    margin: 0 0 2px 7px !important;
    border-right: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    transform: rotate(45deg) !important;
    vertical-align: middle !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.dropdown:hover > a .open-dropdown,
.dropdown.show > a .open-dropdown,
.dropdown.open > a .open-dropdown {
    transform: rotate(225deg) !important;
    margin-top: 4px !important;
}

li.dropdown:hover .open-dropdown,
li.dropdown.show .open-dropdown,
li.dropdown.open .open-dropdown {
    transform: rotate(-135deg) translate(-1px, -1px) !important;
}

/* --------------------------------------------------------------------------
   7. FLOATING MOBILE DRAWER (OFF-CANVAS)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    nav .container {
        padding-left: 16px;
        padding-right: 16px;
    }
    
    .navigation-top {
        display: none !important;
    }
    
    .navigation-main {
        margin-left: auto;
    }
    
    .navigation-main .open-search {
        display: none !important;
    }
    
    .navigation-main .open-menu {
        display: inline-flex !important;
    }
    
    /* Mobile Drawer (Navy background matching theme with crisp contrast) */
    nav .navigation-main .floating-menu {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background-color: #002244 !important;
        padding: 16px 20px 32px 20px !important;
        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45) !important;
        z-index: 99999 !important;
    }
    
    /* Close Button (X) at Top Right */
    nav .navigation-main .floating-menu .close-menu-wrapper {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        margin-bottom: 16px !important;
        border: none !important;
        height: auto !important;
        padding: 0 !important;
    }
    
    nav .navigation-main .floating-menu .close-menu {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        background: #ffffff !important;
        color: #002244 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3) !important;
        font-size: 22px !important;
        line-height: 1 !important;
        transition: transform 0.2s ease, background 0.2s ease !important;
    }

    nav .navigation-main .floating-menu .close-menu i {
        color: #002244 !important;
        font-size: 18px !important;
    }
    
    nav .navigation-main .floating-menu .close-menu:hover {
        background: #fee2e2 !important;
        color: #ef4444 !important;
        transform: rotate(90deg) scale(1.05);
    }
    
    /* Menu List */
    nav .navigation-main .floating-menu > ul {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        overflow: visible !important;
    }
    
    nav .navigation-main .floating-menu > ul > li {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        transition: none !important;
    }
    
    /* Standard Links: Crisp White Pills with High-Contrast Navy Text */
    nav .navigation-main .floating-menu > ul > li > a.btn-main,
    nav .navigation-main .floating-menu > ul > li > a:not(.menures):not(.hover-bg) {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 13px 18px !important;
        border-radius: 8px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #002244 !important; /* CRITICAL: High-contrast Dark Navy Text */
        background: #ffffff !important;
        border: none !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        text-decoration: none !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
        line-height: normal !important;
        transition: transform 0.15s ease, background 0.15s ease !important;
    }
    
    nav .navigation-main .floating-menu > ul > li > a.btn-main:active,
    nav .navigation-main .floating-menu > ul > li > a:not(.menures):not(.hover-bg):active {
        background: #f1f5f9 !important;
        transform: scale(0.98) !important;
    }

    /* Chevron icon on Development & IT */
    nav .navigation-main .floating-menu > ul > li .open-dropdown {
        position: static !important;
        display: inline-flex !important;
        align-items: center !important;
        width: auto !important;
        height: auto !important;
        font-size: 14px !important;
        line-height: normal !important;
        color: #0077ff !important;
        margin-left: 8px !important;
    }
    
    /* Action 1: HIRE NOW (Vibrant Blue Pill with White Text) */
    nav .navigation-main .floating-menu > ul > li > a.menures[href*="higher_professional"],
    nav .navigation-main .floating-menu > ul > li:nth-child(5) > a.menures {
        display: block !important;
        width: 100% !important;
        padding: 13px 18px !important;
        border-radius: 8px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        background: linear-gradient(135deg, #0077ff 0%, #0055cc 100%) !important;
        border: none !important;
        text-align: center !important;
        text-transform: uppercase !important;
        letter-spacing: 0.6px !important;
        box-shadow: 0 4px 14px rgba(0, 119, 255, 0.4) !important;
        margin-top: 4px !important;
        text-decoration: none !important;
        line-height: normal !important;
    }
    
    /* Action 2: Login Developer (Deep Navy Pill with Emerald Green Border) */
    nav .navigation-main .floating-menu > ul > li > a.menures[href*="developer_registration"],
    nav .navigation-main .floating-menu > ul > li:nth-child(6) > a.menures {
        display: block !important;
        width: 100% !important;
        padding: 12px 18px !important;
        border-radius: 8px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        background: #001a33 !important;
        border: 2px solid #16a34a !important; /* Green Accent Border */
        text-align: center !important;
        text-transform: uppercase !important;
        letter-spacing: 0.6px !important;
        box-shadow: 0 3px 10px rgba(22, 163, 74, 0.25) !important;
        text-decoration: none !important;
        line-height: normal !important;
    }

    /* Action 3: Login Employer (Deep Navy Pill with Bright Blue Border) */
    nav .navigation-main .floating-menu > ul > li > a.menures[href*="adminindex"],
    nav .navigation-main .floating-menu > ul > li > a.menures[href*="login"],
    nav .navigation-main .floating-menu > ul > li:nth-child(7) > a.menures {
        display: block !important;
        width: 100% !important;
        padding: 12px 18px !important;
        border-radius: 8px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        background: #001a33 !important;
        border: 2px solid #0077ff !important; /* Blue Accent Border */
        text-align: center !important;
        text-transform: uppercase !important;
        letter-spacing: 0.6px !important;
        box-shadow: 0 3px 10px rgba(0, 119, 255, 0.25) !important;
        text-decoration: none !important;
        line-height: normal !important;
    }
    
    .dropdown-menu.mega-menu {
        position: static !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
        border: 1px solid #e2e8f0 !important;
        padding: 12px 10px !important;
        margin-top: 8px !important;
        margin-bottom: 8px !important;
        border-radius: 12px !important;
        background: #f8fafc !important;
        max-width: 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        transform: none !important;
        transition: none !important;
    }
    .dropdown-menu.mega-menu::before {
        display: none !important;
    }
    .mega-menu-header {
        display: none !important;
    }
    .dropdown-menu.mega-menu .mega-menu-col {
        padding: 0 !important;
    }
    .dropdown-menu.mega-menu .mega-menu-col:not(:last-child)::after {
        display: none !important;
    }
    .dropdown-menu.mega-menu a.mega-menu-link {
        padding: 8px 10px !important;
        font-size: 13.5px !important;
        background: #ffffff !important;
        border: 1px solid #edf2f7 !important;
        margin-bottom: 5px !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
        border-radius: 8px !important;
    }
    .dropdown-menu.mega-menu a.mega-menu-link .mega-item-arrow {
        opacity: 0.5 !important;
        transform: none !important;
    }
}

/* --------------------------------------------------------------------------
   8. FLOATING LOGIN & CART WRAPPERS (DROPDOWNS)
   -------------------------------------------------------------------------- */
.login-wrapper,
.cart-wrapper {
    position: absolute;
    top: calc(100% + 12px);
    right: 16px;
    z-index: 1050;
    background: var(--mv-white);
    border-radius: var(--mv-radius-lg);
    border: 1px solid var(--mv-gray-200);
    box-shadow: var(--mv-shadow-xl);
    padding: 24px;
    display: none;
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: mvFadeSlideDown 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.login-wrapper.open,
.cart-wrapper.open {
    display: block;
}

/* Login Wrapper Specifics */
.login-wrapper {
    width: 360px;
    max-width: calc(100vw - 32px);
}

.login-wrapper .h5 {
    font-size: 18px;
    font-weight: 700;
    color: var(--mv-dark-900);
    margin-bottom: 18px;
}

.login-wrapper .form-group {
    margin-bottom: 14px;
}

.login-wrapper .form-control {
    width: 100%;
    padding: 11px 14px;
    border-radius: var(--mv-radius-md);
    border: 1.5px solid var(--mv-gray-200);
    font-size: 14px;
    color: var(--mv-dark-800);
    transition: var(--mv-transition);
}

.login-wrapper .form-control:focus {
    border-color: var(--mv-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.login-wrapper button[type="submit"] {
    width: 100%;
    padding: 11px 16px;
    border-radius: var(--mv-radius-md);
    font-size: 15px;
    font-weight: 600;
    background: var(--mv-primary-gradient);
    color: var(--mv-white);
    border: none;
    box-shadow: var(--mv-shadow-sm);
    transition: var(--mv-transition);
    cursor: pointer;
}

.login-wrapper button[type="submit"]:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    box-shadow: var(--mv-shadow-md);
    transform: translateY(-1px);
}

/* ==========================================================================
   USER PROFILE DROPDOWN CARD (LOGGED-IN STATE)
   ========================================================================== */
.login-wrapper.user-profile-wrapper {
    width: 280px !important;
    max-width: calc(100vw - 32px) !important;
    padding: 0 !important;
    border-radius: 16px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
    overflow: visible !important;
    z-index: 1060 !important;
}

@media (min-width: 992px) {
    .login-wrapper.user-profile-wrapper {
        position: absolute !important;
        top: 68px !important;
        right: 20px !important;
    }

    .login-wrapper.user-profile-wrapper::before {
        content: '' !important;
        position: absolute !important;
        top: -6px !important;
        right: 92px !important;
        width: 12px !important;
        height: 12px !important;
        background: #f8fafc !important;
        border-top: 1px solid #e2e8f0 !important;
        border-left: 1px solid #e2e8f0 !important;
        transform: rotate(45deg) !important;
        border-radius: 2px !important;
        z-index: 3 !important;
    }

    .cart-wrapper {
        position: absolute !important;
        top: 68px !important;
        right: 16px !important;
        border-radius: 16px !important;
        box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
        z-index: 1060 !important;
    }

    .cart-wrapper::before {
        content: '' !important;
        position: absolute !important;
        top: -6px !important;
        right: 24px !important;
        width: 12px !important;
        height: 12px !important;
        background: #ffffff !important;
        border-top: 1px solid #e2e8f0 !important;
        border-left: 1px solid #e2e8f0 !important;
        transform: rotate(45deg) !important;
        border-radius: 2px !important;
        z-index: 3 !important;
    }
}

@media (max-width: 991px) {
    .login-wrapper.user-profile-wrapper {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        right: 12px !important;
        width: calc(100vw - 24px) !important;
        max-width: 320px !important;
        border-radius: 14px !important;
    }
}

/* User Identity Header */
.user-card-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px 18px !important;
    background: #f8fafc !important;
    border-bottom: 1px solid #eef2f6 !important;
    border-radius: 16px 16px 0 0 !important;
}

.user-card-avatar {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #0077ff 0%, #0055cc 100%) !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 10px rgba(0, 119, 255, 0.25) !important;
    flex-shrink: 0 !important;
}

.user-card-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.user-card-name {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-transform: capitalize !important;
}

.user-card-email {
    font-size: 12px !important;
    color: #64748b !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-top: 2px !important;
}

.user-card-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-top: 5px !important;
    padding: 2px 8px !important;
    border-radius: 9999px !important;
    background: #ecfdf5 !important;
    border: 1px solid #d1fae5 !important;
    color: #059669 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: normal !important;
}

.status-indicator-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #10b981 !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25) !important;
    flex-shrink: 0 !important;
}

/* User Card Action Menu */
.user-card-menu {
    list-style: none !important;
    padding: 8px 10px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.user-card-menu li {
    margin: 0 !important;
    padding: 0 !important;
}

.user-menu-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    background: transparent !important;
    text-decoration: none !important;
    border: 1px solid transparent !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.user-menu-link:hover {
    background: #f0f7ff !important;
    border-color: #dbeafe !important;
    transform: translateX(3px) !important;
}

.user-menu-badge {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
}

.user-menu-badge.badge-blue {
    background: #eff6ff !important;
    color: #0077ff !important;
}

.user-menu-badge.badge-red {
    background: #fee2e2 !important;
    color: #ef4444 !important;
}

.user-menu-meta {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
}

.user-menu-label {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    line-height: 1.3 !important;
}

.user-menu-subtext {
    font-size: 11px !important;
    color: #94a3b8 !important;
    margin-top: 1px !important;
}

.user-menu-arrow {
    font-size: 10px !important;
    color: #cbd5e1 !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
}

.user-menu-link:hover .user-menu-arrow {
    color: #0077ff !important;
    transform: translateX(2px) !important;
}

.user-menu-link:hover .user-menu-label {
    color: #0077ff !important;
}

.user-menu-link.user-menu-logout:hover {
    background: #fef2f2 !important;
    border-color: #fecaca !important;
}

.user-menu-link.user-menu-logout:hover .user-menu-label {
    color: #dc2626 !important;
}

.user-menu-link.user-menu-logout:hover .user-menu-arrow {
    color: #dc2626 !important;
}

/* Fallback unstyled login wrapper list */
.login-wrapper ul:not(.user-card-menu) {
    list-style: none;
    padding: 0;
    margin: 0;
}

.login-wrapper ul:not(.user-card-menu) li {
    margin-bottom: 8px;
}

.login-wrapper ul:not(.user-card-menu) li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--mv-radius-md);
    font-size: 14px;
    font-weight: 500;
    color: var(--mv-dark-700);
    transition: var(--mv-transition);
}

.login-wrapper ul:not(.user-card-menu) li a:hover {
    background: var(--mv-primary-light);
    color: var(--mv-primary);
}

/* Cart Wrapper Specifics */
.cart-wrapper {
    width: 400px;
    max-width: calc(100vw - 32px);
}

.cart-block-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--mv-gray-100);
}

.cart-block-item .image img,
.cart-block-item .image video {
    width: 54px;
    height: 54px;
    object-fit: cover;
    border-radius: var(--mv-radius-md);
    border: 1px solid var(--mv-gray-200);
}

.cart-block-item .title {
    flex: 1 1 auto;
    min-width: 0;
}

.cart-block-item .title a {
    font-size: 14px;
    font-weight: 600;
    color: var(--mv-dark-800);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cart-block-item .quantity {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--mv-primary);
    white-space: nowrap;
}

.cart-block-item .icon-delete {
    width: 28px;
    height: 28px;
    border-radius: var(--mv-radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mv-gray-400);
    transition: var(--mv-transition);
}

.cart-block-item .icon-delete:hover {
    background: #fee2e2;
    color: var(--mv-danger);
}

.cart-block-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}

.cart-block-footer .btn {
    border-radius: var(--mv-radius-md);
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 600;
}

.cart-empty-hr {
    width: 100%;
    max-width: 520px;
    border: 0;
    border-top: 1px solid var(--mv-gray-200);
    margin: 16px auto;
}

/* --------------------------------------------------------------------------
   9. FREE CONSULTATION & OTP MODAL (#myModal1)
   -------------------------------------------------------------------------- */
.modal-backdrop {
    background-color: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
}

#myModal1 .modal-dialog {
    max-width: 540px;
    margin: 30px auto;
}

#myModal1 .modal-content {
    border-radius: var(--mv-radius-xl);
    border: 1px solid var(--mv-gray-200);
    box-shadow: var(--mv-shadow-xl);
    overflow: hidden;
    background: var(--mv-white);
}

#myModal1 .modal-body {
    padding: 28px;
    position: relative;
}

.modal-support-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--mv-dark-900);
    letter-spacing: -0.3px;
    margin: 0;
    display: inline-block;
}

.modal-close-btn {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 32px;
    height: 32px;
    border-radius: var(--mv-radius-full);
    background: #fee2e2 !important;
    color: var(--mv-danger) !important;
    border: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: var(--mv-transition);
}

.modal-close-btn:hover {
    background: var(--mv-danger) !important;
    color: var(--mv-white) !important;
    transform: rotate(90deg);
}

#myModal1 hr {
    border: 0;
    border-top: 1px solid var(--mv-gray-200);
    margin: 18px 0 22px 0;
}

#myModal1 .form-group {
    margin-bottom: 16px;
}

#myModal1 label.control-label,
#myModal1 label.form-label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--mv-dark-700);
    margin-bottom: 6px;
    display: block;
    padding: 0;
}

#myModal1 .form-control {
    width: 100%;
    height: 46px !important;
    line-height: 1.5 !important;
    padding: 10px 14px !important;
    border-radius: var(--mv-radius-md);
    border: 1.5px solid var(--mv-gray-200);
    font-size: 14px;
    color: var(--mv-dark-800);
    background-color: var(--mv-white);
    transition: var(--mv-transition);
    box-sizing: border-box !important;
}

#myModal1 select.form-control {
    height: 46px !important;
    line-height: 1.5 !important;
    padding: 10px 14px !important;
    padding-right: 34px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    cursor: pointer;
}

/* Support Modal Enhanced UI */
#myModal1 .modal-dialog {
    max-width: 520px;
    margin: 30px auto;
}

#myModal1 .modal-content {
    border-radius: 16px;
    border: none;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.15);
    padding: 10px;
}

#myModal1 .modal-body {
    padding: 24px 28px;
}

#myModal1 .modal-support-title {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

#myModal1 .form-group {
    margin-bottom: 16px;
}

#myModal1 label.control-label,
#myModal1 label.form-label {
    font-size: 13.5px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
    display: block;
    padding: 0;
}

#myModal1 .form-control {
    width: 100%;
    height: 46px !important;
    line-height: 1.5 !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    border: 1.5px solid #cbd5e1 !important;
    font-size: 14px;
    color: #0f172a;
    background-color: #ffffff;
    transition: all 0.2s ease;
    box-sizing: border-box !important;
}

#myModal1 select.form-control {
    height: 46px !important;
    line-height: 1.5 !important;
    padding: 10px 14px !important;
    padding-right: 36px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    cursor: pointer;
}

#myModal1 .form-control:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
    outline: none;
}

/* Phone input row */
.support-phone-group {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
}

.support-phone-input-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

#country_code {
    flex: 0 0 120px !important;
    width: 120px !important;
    max-width: 120px !important;
    border-radius: 10px !important;
    font-size: 13.5px !important;
    cursor: pointer;
}

#phone {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    border-radius: 10px !important;
}

.btn-send-otp {
    flex: 0 0 auto !important;
    height: 46px !important;
    padding: 0 16px !important;
    background: #2563eb !important;
    color: #ffffff !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25) !important;
    transition: all 0.2s ease !important;
}

.btn-send-otp:hover {
    background: #1d4ed8 !important;
    color: #ffffff !important;
}

.btn-send-otp:disabled {
    background: #93c5fd !important;
    cursor: not-allowed !important;
}

/* OTP verification row */
.support-otp-group {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
}

#otp-row {
    display: none;
    background: #f8fafc;
    padding: 16px;
    border-radius: 12px;
    border: 1px dashed #93c5fd;
    margin-top: 10px;
}

#otp {
    flex: 1 1 auto !important;
    letter-spacing: 5px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    text-align: center !important;
    border-radius: 10px !important;
    height: 46px !important;
}

.btn-verify-otp {
    flex: 0 0 auto !important;
    height: 46px !important;
    padding: 0 18px !important;
    background: #10b981 !important;
    color: #ffffff !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
}

.btn-verify-otp:hover {
    background: #059669 !important;
    color: #ffffff !important;
}

.otp-msg {
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
    display: none;
}

.otp-msg.is-error {
    display: block !important;
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    color: #b91c1c !important;
}

.otp-msg.is-success {
    display: block !important;
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    color: #15803d !important;
}

#myModal1 #submitBtn {
    width: 100% !important;
    height: 48px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    background: #2563eb !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3) !important;
    transition: all 0.2s ease !important;
}

#myModal1 #submitBtn:disabled {
    background: #93c5fd !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}


#submitBtn {
    width: 100%;
    padding: 13px 20px;
    border-radius: var(--mv-radius-md);
    font-size: 16px;
    font-weight: 700;
    background: var(--mv-primary-gradient);
    border: none;
    color: var(--mv-white);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
    transition: var(--mv-transition);
}

#submitBtn:not(:disabled):hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
    transform: translateY(-1px);
}

#submitBtn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
}

@media (max-width: 576px) {
    #myModal1 .modal-dialog {
        margin: 16px auto;
        max-width: calc(100vw - 32px);
    }
    
    #myModal1 .modal-body {
        padding: 20px 16px;
    }
    
    .support-phone-group {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    
    .support-phone-input-wrap {
        width: 100% !important;
        display: flex !important;
        gap: 8px !important;
    }
    
    #country_code {
        flex: 0 0 115px !important;
        width: 115px !important;
        max-width: 115px !important;
    }
    
    #phone {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    
    .btn-send-otp {
        width: 100% !important;
        height: 44px !important;
        font-size: 14px !important;
    }

    #otp-row {
        padding: 12px !important;
    }

    #otp {
        height: 44px !important;
        font-size: 15px !important;
    }

    .btn-verify-otp {
        height: 44px !important;
        padding: 0 14px !important;
    }
}

/* /* --------------------------------------------------------------------------
   10. MODERN HIGH-AESTHETIC FOOTER ("Rich Feel & Visual Depth")
   -------------------------------------------------------------------------- */
.modern-footer {
    position: relative;
    background: radial-gradient(circle at 18% 15%, rgba(37, 99, 235, 0.14) 0%, transparent 45%),
                radial-gradient(circle at 82% 75%, rgba(139, 92, 246, 0.12) 0%, transparent 50%),
                linear-gradient(180deg, #090e17 0%, #06090e 100%);
    color: #cbd5e1;
    font-family: var(--mv-font);
    overflow: hidden;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Ambient dynamic accent line on top border */
.modern-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #3b82f6 25%, #8b5cf6 50%, #ec4899 75%, #3b82f6 100%);
    background-size: 300% 100%;
    animation: mvGradientFlow 8s ease infinite;
    z-index: 2;
}

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

/* Glowing ambient light orbs */
.footer-ambient-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
    z-index: 1;
    opacity: 0.6;
}

.footer-glow-1 {
    width: 450px;
    height: 450px;
    top: -100px;
    left: -150px;
    background: rgba(37, 99, 235, 0.12);
}

.footer-glow-2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    right: -100px;
    background: rgba(139, 92, 246, 0.1);
}

.footer-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 3;
}

/* 1. Value / Trust Highlights Bar (Pre-footer) */
.footer-features-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 24px 28px;
    margin-bottom: 48px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.footer-feature-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.feature-icon-badge {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.15));
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #60a5fa;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    transition: var(--mv-transition);
}

.footer-feature-item:hover .feature-icon-badge {
    transform: translateY(-2px) scale(1.05);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.35), rgba(139, 92, 246, 0.25));
    color: #93c5fd;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.feature-text-block {
    display: flex;
    flex-direction: column;
}

.feature-title {
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.2px;
}

.feature-desc {
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.4;
}

/* 2. Main Footer Grid */
.footer-main {
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.35fr 0.9fr 0.95fr 0.85fr 1.3fr;
    gap: 36px;
}

.footer-section {
    position: relative;
}

/* Brand Column */
.footer-brand-header {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    margin-bottom: 16px;
}

.brand-symbol {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 10px;
}

.brand-text-wrap {
    display: flex;
    flex-direction: column;
}

.brand-name {
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.5px;
    line-height: 1.1;
}

.brand-highlight {
    background: linear-gradient(135deg, #38bdf8 0%, #3b82f6 50%, #818cf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.brand-motto {
    font-size: 9.5px;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-top: 3px;
}

.brand-description {
    color: #94a3b8;
    font-size: 13.5px;
    line-height: 1.65;
    margin-bottom: 18px;
    max-width: 320px;
}

/* System Uptime Live Pulse */
.operational-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 9999px;
    margin-bottom: 20px;
}

.status-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
    position: relative;
    display: inline-block;
}

.status-pulse-dot::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.4);
    animation: statusPing 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes statusPing {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

.status-label {
    font-size: 11.5px;
    font-weight: 600;
    color: #34d399;
    letter-spacing: 0.2px;
}

/* Contact Pills */
.footer-contact-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-pill-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #94a3b8;
    font-size: 12.5px;
    text-decoration: none;
    transition: var(--mv-transition);
}

.contact-pill-item i {
    font-size: 12px;
    color: #60a5fa;
    width: 16px;
    text-align: center;
}

.contact-pill-item:hover {
    color: #ffffff;
    transform: translateX(3px);
}

.contact-pill-item:hover i {
    color: #93c5fd;
}

/* Section Titles with glowing accent dot */
.section-title {
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
    display: inline-flex;
    align-items: center;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 28px;
    height: 2.5px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    border-radius: 2px;
}

/* Footer Link Items */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-link {
    color: #94a3b8;
    text-decoration: none;
    transition: var(--mv-transition);
    display: inline-flex;
    align-items: center;
    font-size: 13.5px;
    gap: 8px;
}

.link-bullet {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #3b82f6;
    opacity: 0.6;
    transition: var(--mv-transition);
    flex-shrink: 0;
}

.footer-link:hover {
    color: #ffffff;
    transform: translateX(4px);
}

.footer-link:hover .link-bullet {
    background: #60a5fa;
    opacity: 1;
    transform: scale(1.4);
    box-shadow: 0 0 8px #60a5fa;
}

.hiring-badge {
    display: inline-block;
    padding: 2px 7px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
    font-size: 9.5px;
    font-weight: 800;
    border-radius: 9999px;
    letter-spacing: 0.6px;
    margin-left: 6px;
    animation: hiringPulse 2.5s ease infinite;
}

@keyframes hiringPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(1.05); }
}

/* Newsletter Card Wrap */
.newsletter-card-wrap {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 22px 20px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.newsletter-card-wrap .section-title {
    margin-bottom: 12px;
}

.newsletter-desc {
    color: #94a3b8;
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.55;
    word-break: break-word;
}

.newsletter-form {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 16px !important;
}

.newsletter-input-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.newsletter-input-wrap .input-icon {
    position: absolute;
    left: 14px;
    color: #64748b;
    font-size: 14px;
    pointer-events: none;
    transition: var(--mv-transition);
}

.newsletter-input-wrap input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 48px 12px 38px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 9999px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    transition: var(--mv-transition) !important;
    outline: none !important;
}

.newsletter-input-wrap input:focus {
    border-color: #3b82f6 !important;
    background: rgba(255, 255, 255, 0.09) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}

.newsletter-input-wrap input:focus ~ .input-icon {
    color: #60a5fa !important;
}

.newsletter-input-wrap .subscribe-btn {
    position: absolute !important;
    right: 4px !important;
    top: 4px !important;
    bottom: 4px !important;
    width: 36px !important;
    height: calc(100% - 8px) !important;
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: var(--mv-transition) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35) !important;
    padding: 0 !important;
}

.newsletter-input-wrap .subscribe-btn:hover {
    transform: scale(1.08) !important;
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%) !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.5) !important;
}

/* Popular Tech Tags: Neutralize theme.css's width: 120% and margin: 20px! */
.popular-tags {
    margin: 14px 0 0 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.tags-heading {
    display: block !important;
    color: #cbd5e1 !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 8px !important;
}

.modern-footer .tags,
.popular-tags .tags,
.newsletter-tags,
.modern-footer .newsletter-tags {
    margin: 0 !important;
    padding: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    box-sizing: border-box !important;
}

.modern-footer .tag,
.popular-tags .tag,
.newsletter-tag,
.modern-footer .newsletter-tag {
    margin: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    background: rgba(59, 130, 246, 0.08) !important;
    color: #93c5fd !important;
    padding: 4px 9px !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    border-radius: 9999px !important;
    text-decoration: none !important;
    border: 1px solid rgba(59, 130, 246, 0.2) !important;
    transition: var(--mv-transition) !important;
    display: inline-flex !important;
    align-items: center !important;
}

.modern-footer .tag:hover,
.popular-tags .tag:hover,
.newsletter-tag:hover {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
}

/* 3. Footer Bottom Bar */
.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0 32px 0;
    gap: 20px;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.footer-copyright-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.footer-copyright-text {
    color: #94a3b8;
    font-size: 13px;
    margin: 0;
    word-break: break-word;
}

.footer-copyright-text strong {
    color: #e2e8f0;
}

.footer-company-legal {
    color: #64748b;
    font-size: 11.5px;
    margin: 0;
    word-break: break-word;
}

.footer-company-legal strong {
    color: #94a3b8;
}

/* Security Badges in Center */
.footer-trust-badges {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.security-badge-sitelock .brand-logo {
    max-height: 36px;
    filter: brightness(0) invert(1);
    opacity: 0.75;
    transition: opacity 0.2s;
}

.security-badge-sitelock .brand-logo:hover {
    opacity: 1;
}

.trust-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9999px;
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 500;
}

.trust-pill-badge i {
    font-size: 11px;
}

/* Social Column */
.footer-social-col {
    display: flex;
    align-items: center;
    gap: 12px;
}

.social-label {
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-social {
    display: flex;
    align-items: center;
    gap: 10px;
}

.social-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    text-decoration: none;
    font-size: 14px;
    transition: var(--mv-transition);
}

.social-icon:hover {
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.facebook-icon:hover {
    background: #1877f2;
    border-color: #1877f2;
}

.instagram-icon:hover {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
    border-color: transparent;
}

.linkedin-icon:hover {
    background: #0a66c2;
    border-color: #0a66c2;
}

/* Responsive Footer Breakpoints */
@media (max-width: 1199px) {
    .footer-features-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
        padding: 20px !important;
    }

    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 28px !important;
    }

    .brand-column {
        grid-column: span 2 !important;
        max-width: 100% !important;
    }

    .brand-description {
        max-width: 100% !important;
    }

    .newsletter-section {
        grid-column: span 2 !important;
        max-width: 100% !important;
    }
}

@media (max-width: 767px) {
    .modern-footer {
        padding-top: 20px !important;
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    .footer-container {
        padding: 0 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .footer-features-bar {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
        padding: 14px !important;
        margin-bottom: 24px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .footer-feature-item {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .footer-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 24px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .brand-column,
    .newsletter-section,
    .footer-section {
        grid-column: span 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .newsletter-card-wrap {
        padding: 16px 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        border-radius: 14px !important;
        margin: 0 !important;
    }

    .newsletter-input-wrap input {
        padding: 10px 42px 10px 34px !important;
        font-size: 12.5px !important;
    }

    .newsletter-input-wrap .subscribe-btn {
        width: 32px !important;
        height: calc(100% - 6px) !important;
        right: 3px !important;
        top: 3px !important;
    }

    .footer-bottom {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
        padding: 20px 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .footer-trust-badges {
        width: 100% !important;
        max-width: 100% !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }

    .footer-social-col {
        width: 100% !important;
        max-width: 100% !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
}

/* --------------------------------------------------------------------------
   11. MISC HELPERS & LEGACY OVERRIDES
   -------------------------------------------------------------------------- */
.navbar-dropdown .box ul {
    padding-left: 0;
    list-style: none;
}

.navbar-dropdown .box ul li a {
    display: block;
    padding: 6px 12px;
    color: var(--mv-dark-700);
    font-size: 14px;
}

.grid {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 500px;
}

#urchoice {
    margin: 40px auto;
    text-align: center;
}

#urchoice input {
    width: 220px;
    line-height: 48px;
    font-size: 1em;
    text-align: center;
    border-radius: var(--mv-radius-sm);
    border: 1px solid var(--mv-dark-900);
    background-color: var(--mv-dark-900);
    color: var(--mv-gray-400);
}

/* Loading overlay created dynamically in JS */
.mellow-loading-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99999;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    padding: 24px;
    border-radius: var(--mv-radius-lg);
    box-shadow: var(--mv-shadow-xl);
    text-align: center;
    font-weight: 600;
    color: var(--mv-dark-800);
}

/* Prevent unwanted horizontal scrolls across all devices */
.wrapper,
.container,
.container-fluid,
.row {
    max-width: 100%;
}

/* Form fields comfortable touch targets on mobile (prevent iOS auto-zoom) */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ==========================================================================
   21. Modern Pagination UI / UX
   ========================================================================== */
.pagination-wrapper,
.pagination-container,
div.d-flex:has(> .pagination),
div.d-flex:has(> nav > .pagination),
nav:has(> .pagination) {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 28px auto !important;
    padding: 16px 20px !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid #f1f5f9 !important;
    box-sizing: border-box !important;
}

/* Explicit fallback wrapper for theme.css */
.pagination-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Base Pagination List */
ul.pagination,
.pagination {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Page Items */
.pagination .page-item,
ul.pagination > li {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    background: transparent !important;
    transform: none !important;
    position: static !important;
}

/* Neutralize theme.css positioning on first-child & last-child */
.pagination-wrapper .pagination .page-item:first-child,
.pagination-wrapper .pagination .page-item:last-child {
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    transition: none !important;
}

.pagination-wrapper .pagination .page-item:first-child:hover,
.pagination-wrapper .pagination .page-item:last-child:hover {
    transform: none !important;
}

/* Page Links: Modern Rounded Squircles */
.pagination .page-item .page-link,
.pagination .page-link,
ul.pagination > li > a,
ul.pagination > li > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 42px !important;
    height: 42px !important;
    padding: 0 14px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    color: #334155 !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    outline: none !important;
    user-select: none !important;
}

/* Page Link Hover & Focus */
.pagination .page-item:not(.active):not(.disabled) .page-link:hover,
.pagination .page-item:not(.active):not(.disabled) .page-link:focus,
.pagination .page-link:not(.active):not(.disabled):hover,
ul.pagination > li:not(.active):not(.disabled) > a:hover {
    background: #eff6ff !important;
    color: #0077ff !important;
    border-color: #93c5fd !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(0, 119, 255, 0.16) !important;
}

/* Active Page Pill: Vibrant Primary Gradient */
.pagination .page-item.active .page-link,
.pagination-wrapper .pagination .active > a,
.pagination-wrapper .pagination .active > span,
.pagination .active > a,
.pagination .active > span,
ul.pagination > li.active > a,
ul.pagination > li.active > span {
    background: linear-gradient(135deg, #0077ff 0%, #0052cc 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(0, 119, 255, 0.4) !important;
    transform: translateY(-2px) !important;
    cursor: default !important;
}

/* Disabled State (e.g. Previous when on first page) */
.pagination .page-item.disabled .page-link,
.pagination .disabled > span,
.pagination .disabled > a,
ul.pagination > li.disabled > span,
ul.pagination > li.disabled > a,
.pagination [aria-disabled="true"] .page-link {
    background: #f8fafc !important;
    color: #cbd5e1 !important;
    border-color: #f1f5f9 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    transform: none !important;
    opacity: 0.6 !important;
}

/* Navigation Arrows (‹, ›, «, ») Polish */
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link,
ul.pagination > li:first-child > a,
ul.pagination > li:first-child > span,
ul.pagination > li:last-child > a,
ul.pagination > li:last-child > span {
    font-size: 18px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    line-height: 1 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .pagination-wrapper,
    .pagination-container,
    div.d-flex:has(> .pagination),
    nav:has(> .pagination) {
        margin: 20px auto !important;
        padding: 12px 14px !important;
    }
    
    ul.pagination,
    .pagination {
        gap: 6px !important;
    }

    .pagination .page-item .page-link,
    .pagination .page-link,
    ul.pagination > li > a,
    ul.pagination > li > span {
        min-width: 38px !important;
        height: 38px !important;
        padding: 0 10px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
    }

    .pagination .page-item:first-child .page-link,
    .pagination .page-item:last-child .page-link {
        font-size: 16px !important;
    }
}

@media (max-width: 480px) {
    .pagination-wrapper,
    .pagination-container,
    div.d-flex:has(> .pagination),
    nav:has(> .pagination) {
        padding: 10px 8px !important;
        border-radius: 10px !important;
    }

    ul.pagination,
    .pagination {
        gap: 4px !important;
    }

    .pagination .page-item .page-link,
    .pagination .page-link,
    ul.pagination > li > a,
    ul.pagination > li > span {
        min-width: 34px !important;
        height: 34px !important;
        padding: 0 8px !important;
        font-size: 12px !important;
        border-radius: 6px !important;
    }
}

/* ==========================================================================
   22. Universal Top Bar Alignment & Zero Gap Fix (Eliminate Bottom Margin on Nav Across ALL Pages)
   ========================================================================== */

/* 1. Global Navigation and Body Reset */
body {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

nav,
nav.navigation,
header nav,
body > nav {
    margin: 0 !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
}

nav .container,
nav .navigation,
nav .navigation-top,
nav .navigation-main {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* 2. Neutralize the intermediary .wrapper */
body .wrapper,
.wrapper,
nav + .wrapper,
nav ~ .wrapper {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
}

/* 3. Strip legacy spacer <br> tags immediately following nav or .wrapper */
body > br,
nav + br,
nav ~ br,
nav + .wrapper + br,
.wrapper + br,
.wrapper + br + br,
.wrapper + br + br + br,
.wrapper + br + br + br + br,
.wrapper + br + br + br + br + br {
    display: none !important;
}

/* 4. Kill all legacy inline and class-based margin-top on page sections */
section[style*="margin-top"],
div[style*="margin-top"],
main[style*="margin-top"],
nav + section,
nav + div,
nav + main,
nav + .wrapper + section,
nav + .wrapper + div,
nav + .wrapper + main,
nav ~ section:first-of-type,
nav ~ div:first-of-type,
section.header-content,
section.contact-hero,
section.profile-section,
section.shortcodes,
section.products,
section.blog,
section.checkout,
section.about,
section.icons-category,
section.developer-profile,
div.site-section:first-of-type {
    margin-top: 0 !important;
}

/* 5. Home Page: Cover banner stays 100% flush against nav (0 padding, 0 margin) */
section.header-content,
.header-content,
section.header-content:first-of-type {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

@media (min-width: 992px) {
    section.header-content,
    .header-content {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
}

/* 6. Inner Pages: Neutralize theme.css's 200px padding-top and apply clean, elegant top spacing */
@media (min-width: 768px) {
    section:not(.header-content) {
        padding-top: 36px !important;
    }
}

@media (min-width: 992px) {
    section:not(.header-content) {
        padding-top: 40px !important;
    }
}

@media (min-width: 1200px) {
    section:not(.header-content) {
        padding-top: 40px !important;
    }
}

/* 2. Flush Edge-to-Edge Full Screen Width (Side se chipka hua / No side margins) */
section.header-content > .container,
section.header-content > .container-fluid,
.header-content > .container,
.header-content > .container-fluid,
.header-content .px-lg-5 {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Full Width Owl Carousel Outer Container (Do NOT override .owl-stage or .owl-item widths!) */
.header-content .owl-carousel,
.header-content .owl-stage-outer {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

/* Hero Banner Items & Cover Images */
.hero-banner,
.header-content .item {
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/* Banner Image flush edge-to-edge with solid height */
.banner-img,
.hero-banner img,
.header-content .item img,
.header-content img.banner-img {
    width: 100% !important;
    max-width: 100% !important;
    height: 500px !important;
    min-height: 400px !important;
    border-radius: 0 !important;
    display: block !important;
    object-fit: cover !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (max-width: 768px) {
    .banner-img,
    .hero-banner img,
    .header-content .item img {
        height: 320px !important;
        min-height: 280px !important;
    }
}

@media (max-width: 480px) {
    .banner-img,
    .hero-banner img,
    .header-content .item img {
        height: 250px !important;
        min-height: 220px !important;
    }
}

/* Banner Overlay Corners */
.hero-banner .banner-overlay,
.banner-overlay {
    border-radius: 0 !important;
}

/* ==========================================================================
   RESET ROGUE SECTION PADDING & TOP BAR BOTTOM MARGIN ON SUBPAGES
   ========================================================================== */
nav,
header,
.main-header {
    margin-bottom: 0 !important;
}

section {
    padding-top: 20px !important;
}

@media (min-width: 768px) {
    section {
        padding-top: 25px !important;
    }
}

@media (min-width: 992px) {
    section {
        padding-top: 30px !important;
    }
}

/* Force override any legacy inline margin-top on subpage hero sections */
section[style*="margin-top"],
.wrapper > section:first-of-type,
.contact-hero,
.profile-section,
.employer-portal,
.auth-error-section,
section.checkout,
section.blog-category,
section.about {
    margin-top: 0 !important;
}

/* Universal overflow protection for footer and newsletter card */
.footer-container,
.footer-main,
.footer-grid,
.footer-section,
.newsletter-section,
.newsletter-card-wrap,
.popular-tags,
.popular-tags .tags,
.newsletter-tags {
    box-sizing: border-box !important;
    max-width: 100% !important;
}

.popular-tags .tags,
.newsletter-tags,
.tags {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    box-sizing: border-box !important;
}

.popular-tags .tag,
.newsletter-tag,
.tag {
    margin: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}