/* ===== PRIMARY BRAND COLOR: Deep Violet → replaces cyan #00BCD4 ===== */
   :root {
       --clr-primary: #7C3AED;
       /* violet */
       --clr-secondary: #F59E0B;
       /* amber */
       --clr-accent1: #EF4444;
       /* red */
       --clr-accent2: #10B981;
       /* emerald */
       --clr-accent3: #3B82F6;
       /* blue */
       --clr-accent4: #EC4899;
       /* pink */
       --clr-accent5: #F97316;
       /* orange */
       --clr-accent6: #8B5CF6;
       /* purple */
       --clr-accent7: #06B6D4;
       /* cyan */
       --clr-accent8: #14B8A6;
       /* teal */
   }

   /* Links */
   a {
       color: var(--clr-primary);
   }

   a:hover,
   a:focus {
       color: var(--clr-accent4);
   }

   /* Buttons */
   .btn-common {
       background: var(--clr-primary);
   }

   .btn-common:hover {
       background: var(--clr-accent6);
       color: #fff;
   }

   .btn-border {
       border-color: var(--clr-primary) !important;
       color: var(--clr-primary) !important;
   }

   .btn-border:hover {
       background: var(--clr-primary);
       color: #fff !important;
   }

   /* Navbar */
   .navbar {
       background: linear-gradient(135deg, #1E1B4B 0%, #4C1D95 100%) !important;
   }

   .top-nav-collapse {
       background: linear-gradient(135deg, #1E1B4B 0%, #4C1D95 100%) !important;
   }

   .navbar-expand-lg .navbar-nav .nav-link {
       color: #E0D9FF !important;
   }

   .navbar-expand-lg .navbar-nav li a:hover,
   .navbar-expand-lg .navbar-nav li a:focus,
   .top-nav-collapse .navbar-nav .nav-link:hover,
   .navbar li.active a.nav-link,
   .top-nav-collapse .navbar-nav li.active a.nav-link {
       color: var(--clr-secondary) !important;
   }

   .navbar-toggler {
       border-color: var(--clr-secondary);
   }

   .mobile-menu-bar,
   .slicknav_btn {
       background: var(--clr-primary) !important;
   }

   /* Hero Section */
   .hero-area {
       background: linear-gradient(135deg, #1E1B4B 0%, #7C3AED 50%, #EC4899 100%) !important;
   }

   .hero-area:before {
       background: rgba(30, 27, 75, 0.55) !important;
   }

   .hero-area .contents h2 {
       color: #fff !important;
   }

   .hero-area .contents p {
       color: #E9D5FF !important;
   }

   .job-search-form {
       background: rgba(255, 255, 255, 0.12) !important;
       border-radius: 12px;
       padding: 16px;
   }

   .job-search-form button {
       background: var(--clr-secondary) !important;
       color: #1E1B4B !important;
       font-weight: 700;
   }

   /* Category Section */
   .category {
       background: #F5F3FF !important;
   }

   .f-category .icon {
       border-radius: 50%;
       width: 64px;
       height: 64px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 28px;
       margin: 0 auto 12px;
   }

   .f-category .icon.bg-color-1 {
       background: linear-gradient(135deg, #7C3AED, #A78BFA);
       color: #fff;
   }

   .f-category .icon.bg-color-2 {
       background: linear-gradient(135deg, #F59E0B, #FCD34D);
       color: #fff;
   }

   .f-category .icon.bg-color-3 {
       background: linear-gradient(135deg, #10B981, #6EE7B7);
       color: #fff;
   }

   .f-category .icon.bg-color-4 {
       background: linear-gradient(135deg, #3B82F6, #93C5FD);
       color: #fff;
   }

   .f-category .icon.bg-color-5 {
       background: linear-gradient(135deg, #EC4899, #F9A8D4);
       color: #fff;
   }

   .f-category .icon.bg-color-6 {
       background: linear-gradient(135deg, #EF4444, #FCA5A5);
       color: #fff;
   }

   .f-category .icon.bg-color-7 {
       background: linear-gradient(135deg, #F97316, #FED7AA);
       color: #fff;
   }

   .f-category .icon.bg-color-8 {
       background: linear-gradient(135deg, #14B8A6, #99F6E4);
       color: #fff;
   }

   .f-category h3 {
       color: #1E1B4B !important;
       font-size: 16px;
   }

   .f-category p {
       color: #6D28D9 !important;
       font-weight: 600;
   }

   .f-category:hover {
       background: #EDE9FE;
       border-radius: 12px;
   }

   /* Section titles */
   .section-title {
       color: #1E1B4B !important;
   }

   .section-title::after {
       background: linear-gradient(90deg, var(--clr-primary), var(--clr-accent4)) !important;
   }

   /* Browse Jobs Section */
   #browse-jobs {
       background: linear-gradient(135deg, #EFF6FF 0%, #F5F3FF 100%) !important;
   }

   #browse-jobs h3 {
       color: var(--clr-primary) !important;
   }

   #browse-jobs .btn-common {
       background: var(--clr-accent3) !important;
   }

   /* How It Works */
   .how-it-works {
       background: #fff;
   }

   .work-process .process-icon {
       color: #fff !important;
       background: linear-gradient(135deg, var(--clr-primary), var(--clr-accent4)) !important;
       border-radius: 50%;
       width: 70px;
       height: 70px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 28px;
       margin: 0 auto 16px;
   }

   .work-process.step-2 .process-icon {
       background: linear-gradient(135deg, var(--clr-accent2), var(--clr-accent7)) !important;
   }

   .work-process.step-3 .process-icon {
       background: linear-gradient(135deg, var(--clr-secondary), var(--clr-accent5)) !important;
   }

   .work-process h4 {
       color: #1E1B4B !important;
   }

   /* Latest Jobs */
   #latest-jobs {
       background: #FDF4FF !important;
   }

   .jobs-latest {
       border-radius: 10px;
       overflow: hidden;
       border: 1.5px solid #EDE9FE !important;
   }

   .jobs-latest:hover {
       box-shadow: 0 8px 24px rgba(124, 58, 237, 0.15) !important;
   }

   .jobs-latest .content h3 a {
       color: #1E1B4B !important;
   }

   .jobs-latest .content h3 a:hover {
       color: var(--clr-primary) !important;
   }

   .full-time {
       background: linear-gradient(135deg, var(--clr-primary), var(--clr-accent6)) !important;
       color: #fff !important;
       border-radius: 4px;
       padding: 3px 10px;
   }

   .part-time {
       background: linear-gradient(135deg, var(--clr-secondary), var(--clr-accent5)) !important;
       color: #fff !important;
       border-radius: 4px;
       padding: 3px 10px;
   }

   /* Testimonial */
   #testimonial {
       background: linear-gradient(135deg, #1E1B4B 0%, #4C1D95 100%) !important;
   }

   #testimonial .section-title {
       color: #fff !important;
   }

   #testimonial p {
       color: #DDD6FE !important;
   }

   .testimonial-item {
       background: rgba(255, 255, 255, 0.08) !important;
       border-radius: 12px;
       border: 1px solid rgba(255, 255, 255, 0.15) !important;
   }

   .testimonial-item .author-info h2 a {
       color: var(--clr-secondary) !important;
   }

   .testimonial-item .author-info span {
       color: #C4B5FD !important;
   }

   /* Pricing section */
   #pricing {
       background: #F5F3FF !important;
   }

   #pricing .section-title {
       color: var(--clr-primary) !important;
   }

   /* Blog Section */
   #blog {
       background: #fff;
   }

   .blog-item-wrapper {
       border-radius: 10px;
       overflow: hidden;
       border: 1.5px solid #EDE9FE !important;
       padding: 7px;
   }

   .blog-item-wrapper:hover {
       box-shadow: 0 8px 24px rgba(124, 58, 237, 0.12) !important;
   }

   .blog-item-text h3 a {
       color: #1E1B4B !important;
   }

   .blog-item-text h3 a:hover {
       color: var(--clr-primary) !important;
   }

   .readmore {
       color: var(--clr-primary) !important;
       font-weight: 600;
   }

   /* Download Section */
   #download {
       background: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%) !important;
   }

   #download h4,
   #download p {
       color: #fff !important;
   }

   #download .btn-border {
       border-color: #fff !important;
       color: #fff !important;
   }

   #download .btn-border:hover {
       background: rgba(255, 255, 255, 0.2) !important;
   }

   #download .btn-common {
       background: var(--clr-secondary) !important;
       color: #1E1B4B !important;
       font-weight: 700;
   }

   /* Footer */
   footer {
       background: #0F0A1E !important;
   }

   .footer-Content {
       background: #0F0A1E !important;
   }

   .footer-Content p,
   .footer-Content a {
       color: #A78BFA !important;
   }

   .footer-Content h3.block-title {
       color: #fff !important;
   }

   .footer-Content .menu li a:hover {
       color: var(--clr-secondary) !important;
   }

   .footer-social a {
       background: var(--clr-primary) !important;
       color: #fff !important;
   }

   .footer-social a:hover {
       background: var(--clr-accent4) !important;
   }

   #copyright {
       background: #080414 !important;
   }

   #copyright p,
   #copyright a {
       color: #7C3AED !important;
   }

   /* Back to top */
   .back-to-top {
       background: var(--clr-primary) !important;
   }

   .back-to-top:hover {
       background: var(--clr-accent4) !important;
   }

   /* Dropdown menus */
   .dropdown-menu {
       border-top: 3px solid var(--clr-primary) !important;
   }

   .dropdown-item:hover {
       color: var(--clr-primary) !important;
       background: #F5F3FF !important;
   }

   /* Subscribe button */
   .sub-btn {
       background: var(--clr-primary) !important;
   }

   /* login form */
   .auth-card {
       background: #fff;
       border-radius: 12px;
       box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
       padding: 38px 34px;
       margin-top: 30px
   }

   .auth-card h3 {
       font-weight: 700;
       margin-bottom: 6px
   }

   .auth-card .lead {
       color: #6b7280;
       margin-bottom: 22px;
       font-size: 14px
   }

   .auth-card .form-control {
       height: 46px;
       border-radius: 8px;
       border: 1px solid #e3e6ec;
       padding-left: 42px
   }

   .auth-card .input-icon {
       position: relative
   }

   .auth-card .input-icon i {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       color: #9aa3af;
       font-size: 18px
   }

   .auth-card .btn-common {
       width: 100%;
       height: 46px;
       border-radius: 8px;
       font-weight: 600;
       letter-spacing: .3px
   }

   .auth-card .form-links a {
       color: #1967d2;
       font-weight: 500
   }

   .auth-side {
       background: linear-gradient(135deg, #1967d2, #5b8def);
       color: #fff;
       border-radius: 12px;
       padding: 40px 30px;
       margin-top: 30px;
       height: calc(100% - 30px)
   }

   .auth-side h2 {
       color: #fff;
       font-weight: 700;
       margin-bottom: 14px
   }

   .auth-side ul {
       list-style: none;
       padding: 0;
       margin-top: 18px
   }

   .auth-side ul li {
       padding: 8px 0;
       font-size: 15px
   }

   .auth-side ul li i {
       margin-right: 10px
   }


   /* dashboard*/
   .dash-wrap {
       padding: 30px 0
   }

   .dash-hero {
       background: linear-gradient(135deg, #1967d2, #5b8def);
       color: #fff;
       border-radius: 14px;
       padding: 30px;
       margin-bottom: 24px
   }

   .dash-hero h2 {
       color: #fff;
       font-weight: 700;
       margin: 0
   }

   .dash-hero p {
       margin: 6px 0 0;
       opacity: .9
   }

   .dash-hero .actions {
       margin-top: 18px
   }

   .dash-hero .actions a {
       background: #fff;
       color: #1967d2;
       padding: 9px 18px;
       border-radius: 8px;
       font-weight: 600;
       margin-right: 10px;
       text-decoration: none;
       display: inline-block
   }

   .stat-card {
       background: #fff;
       border-radius: 12px;
       box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
       padding: 22px;
       text-align: center;
       margin-bottom: 20px
   }

   .stat-card .num {
       font-size: 34px;
       font-weight: 700;
       color: #1967d2
   }

   .stat-card .lbl {
       color: #6b7280;
       font-size: 13px;
       margin-top: 4px
   }

   .panel {
       background: #fff;
       border-radius: 12px;
       box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
       padding: 22px;
       margin-bottom: 24px
   }

   .panel h4 {
       font-weight: 700;
       margin: 0 0 16px;
       font-size: 18px;
       color: #111827
   }

   .panel h4 a {
       float: right;
       font-size: 13px;
       font-weight: 500
   }

   .job-mini {
       padding: 14px 0;
       border-bottom: 1px solid #eef0f4
   }

   .job-mini:last-child {
       border-bottom: 0
   }

   .job-mini .t {
       font-weight: 600;
       color: #1967d2
   }

   .job-mini .m {
       color: #6b7280;
       font-size: 13px;
       margin-top: 2px
   }

   .badge-status {
       display: inline-block;
       padding: 3px 10px;
       border-radius: 20px;
       font-size: 11px;
       text-transform: uppercase;
       font-weight: 600;
       letter-spacing: .5px
   }

   .badge-applied {
       background: #e0f2fe;
       color: #0369a1
   }

   .badge-shortlisted {
       background: #dcfce7;
       color: #15803d
   }

   .badge-rejected {
       background: #fee2e2;
       color: #b91c1c
   }

   .empty-msg {
       color: #6b7280;
       text-align: center;
       padding: 30px
   }

   /*-------------------profile---------------------*/
   body {
       background: #f5f6fa
   }

   .pf-head {
       background: #fff;
       border: 1px solid #e6e6e6;
       border-radius: 8px;
       padding: 18px 22px;
       margin-bottom: 14px;
       display: flex;
       gap: 16px;
       align-items: center
   }

   .pf-head .avatar {
       width: 78px;
       height: 78px;
       border-radius: 50%;
       background: #eef2f7;
       display: flex;
       align-items: center;
       justify-content: center;
       color: #1967d2;
       font-weight: 700;
       font-size: 28px;
       border: 1px dashed #c5d1e3
   }

   .pf-head .meta {
       flex: 1
   }

   .pf-head .meta h3 {
       margin: 0 0 4px;
       font-size: 20px;
       color: #172b4d
   }

   .pf-head .meta .sub {
       font-size: 13px;
       color: #5a6b85
   }

   .pf-head .meta .row-info {
       display: flex;
       flex-wrap: wrap;
       gap: 14px;
       margin-top: 8px;
       font-size: 12px;
       color: #3b4a63
   }

   .pf-head .meta .row-info span i {
       color: #1967d2;
       margin-right: 4px
   }

   .pf-wrap {
       padding: 24px 0 60px
   }

   .pf-side {
       position: sticky;
       top: 20px;
       background: #fff;
       border-radius: 12px;
       box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
       padding: 18px 0;
       border: 1px solid #ececec
   }

   .pf-side h6 {
       padding: 0 20px 12px;
       margin: 0;
       font-weight: 700;
       color: #111827;
       font-size: 15px
   }

   .pf-side ul {
       list-style: none;
       padding: 0;
       margin: 0
   }

   .pf-side li {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 9px 20px;
       font-size: 14px
   }

   .pf-side li a.l {
       color: #374151;
       text-decoration: none;
       font-weight: 500
   }

   .pf-side li a.l:hover {
       color: #1967d2
   }

   .pf-side li a.r {
       color: #1967d2;
       text-decoration: none;
       font-weight: 600;
       font-size: 13px
   }

   .pf-side li a.r:hover {
       text-decoration: underline
   }

   .pro-banner {
       background: linear-gradient(90deg, #fff7e6, #fde7c2);
       border: 1.5px solid #f0a830;
       border-radius: 14px;
       padding: 14px 20px;
       margin-bottom: 18px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       flex-wrap: wrap;
       gap: 12px
   }

   .pro-banner .l {
       display: flex;
       align-items: center;
       gap: 14px
   }

   .pro-banner .logo {
       font-weight: 800;
       font-size: 20px;
       color: #111827
   }

   .pro-banner .logo .pro {
       color: #1967d2
   }

   .pro-banner .logo .crown {
       color: #f0a830;
       margin-left: 4px
   }

   .pro-banner .tag {
       color: #374151;
       font-size: 14px
   }

   .pro-banner .cta {
       background: #5a3914;
       color: #fff;
       border-radius: 30px;
       padding: 9px 18px;
       font-weight: 600;
       font-size: 13px;
       text-decoration: none;
       white-space: nowrap
   }

   .pf-card {
       background: #fff;
       border-radius: 12px;
       box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
       padding: 22px 24px;
       margin-bottom: 18px;
       border: 1px solid #ececec
   }

   .pf-card h4 {
       margin: 0 0 14px;
       font-weight: 700;
       font-size: 17px;
       color: #111827;
       display: flex;
       align-items: center;
       justify-content: space-between
   }

   .pf-card h4 .edit {
       font-size: 13px;
       color: #1967d2;
       cursor: pointer;
       font-weight: 500
   }

   .pf-card .meta {
       color: #6b7280;
       font-size: 13px;
       margin-top: 4px
   }

   .pf-card .filename {
       font-weight: 600;
       color: #111827;
       font-size: 15px
   }

   .upload-zone {
       border: 1.5px dashed #c7d2de;
       border-radius: 10px;
       padding: 22px;
       text-align: center;
       margin-top: 14px;
       background: #fafbfd
   }

   .upload-zone .btn {
       background: #fff;
       border: 1.5px solid #1967d2;
       color: #1967d2;
       padding: 8px 22px;
       border-radius: 30px;
       font-weight: 600;
       cursor: pointer;
       display: inline-block
   }

   .upload-zone p {
       margin: 10px 0 0;
       color: #6b7280;
       font-size: 13px
   }

   .skill-pill {
       display: inline-block;
       margin: 4px 6px 4px 0
   }

   .skill-pill input {
       display: none
   }

   .skill-pill label {
       padding: 6px 14px;
       border: 1px solid #cbd5e1;
       border-radius: 30px;
       cursor: pointer;
       color: #374151;
       font-size: 13px;
       margin: 0;
       background: #fff;
       font-weight: 500
   }

   .skill-pill input:checked+label {
       background: #e0f2fe;
       border-color: #0369a1;
       color: #0369a1
   }

   .form-control {
       height: 42px;
       border-radius: 8px;
       border: 1px solid #e3e6ec
   }

   textarea.form-control {
       height: auto;
       min-height: 90px
   }

   label {
       font-weight: 500;
       font-size: 13px;
       color: #374151;
       margin-bottom: 6px
   }

   .edu-row {
       background: #fafbfd;
       border: 1px solid #eef0f4;
       border-radius: 10px;
       padding: 16px;
       margin-bottom: 14px;
       position: relative
   }

   .edu-row .remove-edu {
       position: absolute;
       top: 10px;
       right: 12px;
       color: #dc2626;
       cursor: pointer;
       background: none;
       border: 0;
       font-size: 18px
   }

   .btn-add-edu {
       background: #eef4fc;
       color: #1967d2;
       border: 1px dashed #9bbef0;
       padding: 8px 18px;
       border-radius: 8px;
       font-weight: 600;
       font-size: 13px
   }

   .save-bar {
       position: sticky;
       bottom: 0;
       background: #fff;
       border-top: 1px solid #eef0f4;
       padding: 14px 24px;
       border-radius: 12px;
       box-shadow: 0 -4px 12px rgba(0, 0, 0, .06);
       display: flex;
       justify-content: flex-end;
       align-items: center;
       gap: 12px;
       margin-top: 18px
   }

   .save-bar .btn {
       padding: 10px 30px;
       font-weight: 600;
       border-radius: 8px
   }

   .info-pair {
       display: flex;
       justify-content: space-between;
       padding: 8px 0;
       font-size: 14px;
       border-bottom: 1px solid #f0f1f4
   }

   .info-pair:last-child {
       border: 0
   }

   .info-pair .lbl {
       color: #6b7280
   }

   .info-pair .val {
       color: #111827;
       font-weight: 500
   }

   .empty {
       color: #9aa3af;
       font-size: 14px;
       font-style: italic
   }


   /*---------------------jobs ---------------------*/
   .jobs-wrap {
       padding: 30px 0
   }

   .search-box {
       background: #fff;
       border-radius: 12px;
       box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
       padding: 22px;
       margin-bottom: 24px
   }

   .search-box .form-control {
       height: 44px;
       border-radius: 8px;
       border: 1px solid #e3e6ec
   }

   .search-box .btn {
       height: 44px;
       border-radius: 8px;
       font-weight: 600
   }

   /* ── Filter Sidebar ── */
   .filter-card {
       background: #fff;
       border-radius: 12px;
       box-shadow: 0 4px 16px rgba(0, 0, 0, .05);
       margin-bottom: 16px;
       border: 1px solid #f0eef5;
       overflow: hidden;
       transition: box-shadow .2s ease;
   }

   .filter-card:hover {
       box-shadow: 0 6px 22px rgba(124, 58, 237, .08);
   }

   .filter-card-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 16px 20px;
       cursor: pointer;
       transition: background .15s ease;
       user-select: none;
   }

   .filter-card-header:hover {
       background: #f9f7ff;
   }

   .filter-card-header h5 {
       margin: 0;
       font-size: 15px;
       font-weight: 700;
       color: #1E1B4B;
       display: flex;
       align-items: center;
       gap: 8px;
   }

   .filter-card-header h5 i {
       color: var(--clr-primary);
       font-size: 16px;
   }

   .filter-toggle-icon {
       font-size: 12px;
       color: #9ca3af;
       transition: transform .25s ease;
   }

   .filter-toggle-icon.rotated {
       transform: rotate(180deg);
   }

   .filter-card-body {
       padding: 0 20px 18px;
       transition: max-height .3s ease, padding .3s ease, opacity .3s ease;
       max-height: 400px;
       opacity: 1;
       overflow: hidden;
   }

   .filter-card-body.collapsed {
       max-height: 0;
       padding-top: 0;
       padding-bottom: 0;
       opacity: 0;
   }

   .filter-card .form-control {
       height: 40px;
       border-radius: 8px;
       border: 1.5px solid #e5e2f0;
       font-size: 13px;
       transition: border-color .2s;
   }

   .filter-card .form-control:focus {
       border-color: var(--clr-primary);
       box-shadow: 0 0 0 3px rgba(124, 58, 237, .1);
   }

   .filter-range-group {
       margin-bottom: 10px;
   }

   .filter-range-group label {
       font-size: 12px;
       font-weight: 600;
       color: #6b7280;
       margin-bottom: 4px;
       text-transform: uppercase;
       letter-spacing: .3px;
   }

   /* ── Active Filters Tags ── */
   .active-filters-card {
       border: 1.5px solid var(--clr-primary);
       background: linear-gradient(135deg, #faf5ff 0%, #f5f3ff 100%);
   }

   .active-filters-card .filter-card-header {
       padding-bottom: 8px;
   }

   .clear-all-btn {
       font-size: 12px;
       color: var(--clr-accent1) !important;
       font-weight: 600;
       text-decoration: none;
       text-transform: uppercase;
       letter-spacing: .3px;
       transition: color .2s;
   }

   .clear-all-btn:hover {
       color: #dc2626 !important;
       text-decoration: underline;
   }

   .active-tags {
       padding: 0 20px 16px;
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
   }

   .filter-tag {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       background: #fff;
       border: 1px solid #e5e2f0;
       border-radius: 20px;
       padding: 5px 12px;
       font-size: 12px;
       font-weight: 500;
       color: #374151;
       transition: all .15s ease;
   }

   .filter-tag i {
       color: var(--clr-primary);
       font-size: 12px;
   }

   .filter-tag:hover {
       border-color: var(--clr-primary);
       background: #f5f3ff;
   }

   .remove-tag {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 18px;
       height: 18px;
       border-radius: 50%;
       background: #fee2e2;
       color: #dc2626 !important;
       text-decoration: none;
       font-size: 14px;
       font-weight: 700;
       line-height: 1;
       transition: all .15s ease;
   }

   .remove-tag:hover {
       background: #dc2626;
       color: #fff !important;
   }

   /* ── Results Header ── */
   .jobs-results-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       margin-bottom: 16px;
   }

   .results-count {
       color: #6b7280;
       font-size: 14px;
       margin: 0;
   }

   .results-count strong {
       color: var(--clr-primary);
       font-size: 16px;
   }

   /* ── Job Cards ── */
   .job-card {
       background: #fff;
       border-radius: 12px;
       box-shadow: 0 4px 16px rgba(0, 0, 0, .05);
       padding: 22px;
       margin-bottom: 18px;
       transition: all .2s ease;
       border: 1px solid transparent;
   }

   .job-card:hover {
       box-shadow: 0 10px 30px rgba(124, 58, 237, .1);
       border-color: #ede9fe;
       transform: translateY(-2px);
   }

   .job-card h3 {
       font-size: 18px;
       font-weight: 700;
       margin: 0
   }

   .job-card h3 a {
       color: #1967d2;
       text-decoration: none
   }

   .job-card h3 a:hover {
       color: var(--clr-primary);
       text-decoration: underline
   }

   .job-card .company {
       color: #374151;
       font-weight: 500;
       margin-top: 4px
   }

   .job-card .meta {
       color: #6b7280;
       font-size: 13px;
       margin-top: 10px
   }

   .job-card .meta span {
       margin-right: 18px
   }

   .job-card .meta i {
       color: var(--clr-primary);
       margin-right: 3px;
   }

   .job-skills-row {
       margin-top: 10px;
       display: flex;
       flex-wrap: wrap;
       gap: 6px;
   }

   .skill-chip-sm {
       display: inline-block;
       background: #f5f3ff;
       color: var(--clr-primary);
       padding: 3px 10px;
       border-radius: 14px;
       font-size: 11px;
       font-weight: 600;
       border: 1px solid #ede9fe;
   }

   .skill-chip-sm.more {
       background: #fef3c7;
       color: #92400e;
       border-color: #fde68a;
   }

   .job-card .desc {
       color: #4b5563;
       font-size: 14px;
       margin-top: 10px;
       display: -webkit-box;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
       overflow: hidden
   }

   .job-card .actions {
       margin-top: 14px;
       display: flex;
       align-items: center;
       justify-content: space-between
   }

   .badge-applied-tag {
       background: #dcfce7;
       color: #15803d;
       padding: 4px 12px;
       border-radius: 20px;
       font-size: 12px;
       font-weight: 600
   }

   .empty-jobs {
       background: #fff;
       border-radius: 12px;
       padding: 60px 20px;
       text-align: center;
       color: #6b7280
   }

   /* ── Responsive Filter Sidebar ── */
   @media (max-width: 991px) {
       .filter-card-body {
           max-height: none;
       }

       .filter-card-body.collapsed {
           max-height: 0;
       }
   }


   /*------------------job show -------------------*/
   .show-wrap {
       padding: 30px 0
   }

   .job-header {
       background: #fff;
       border-radius: 12px;
       box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
       padding: 28px;
       margin-bottom: 22px
   }

   .job-header h1 {
       font-size: 26px;
       font-weight: 700;
       margin: 0;
       color: #111827
   }

   .job-header .company {
       font-size: 16px;
       color: #374151;
       margin-top: 6px;
       font-weight: 500
   }

   .job-header .meta {
       color: #6b7280;
       font-size: 14px;
       margin-top: 14px
   }

   .job-header .meta span {
       display: inline-block;
       margin-right: 22px;
       margin-top: 4px
   }

   .job-header .meta i {
       color: #1967d2;
       margin-right: 4px
   }

   .apply-bar {
       background: #f8fafc;
       border-radius: 10px;
       padding: 18px;
       margin-top: 22px;
       display: flex;
       align-items: center;
       justify-content: space-between
   }

   .apply-bar .price {
       font-size: 18px;
       font-weight: 700;
       color: #1967d2
   }

   .apply-bar .btn {
       padding: 10px 28px;
       font-weight: 600;
       border-radius: 8px
   }

   .panel {
       background: #fff;
       border-radius: 12px;
       box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
       padding: 24px;
       margin-bottom: 22px
   }

   .panel h3 {
       font-size: 18px;
       font-weight: 700;
       color: #111827;
       margin: 0 0 14px
   }

   .panel .desc {
       color: #374151;
       line-height: 1.7;
       font-size: 15px;
       white-space: pre-wrap
   }

   .skill-chip {
       display: inline-block;
       background: #eef4fc;
       color: #1967d2;
       padding: 6px 14px;
       border-radius: 20px;
       margin: 4px 6px 4px 0;
       font-size: 13px;
       font-weight: 500
   }

   .info-row {
       display: flex;
       justify-content: space-between;
       padding: 10px 0;
       border-bottom: 1px solid #eef0f4;
       font-size: 14px
   }

   .info-row:last-child {
       border-bottom: 0
   }

   .info-row .lbl {
       color: #6b7280
   }

   .info-row .val {
       color: #111827;
       font-weight: 500
   }

   .related-card {
       background: #fff;
       border-radius: 10px;
       box-shadow: 0 4px 14px rgba(0, 0, 0, .05);
       padding: 16px;
       margin-bottom: 14px
   }

   .related-card .t {
       font-weight: 600;
       color: #1967d2
   }

   .related-card .m {
       color: #6b7280;
       font-size: 13px;
       margin-top: 4px
   }

   /*---------------------applications -----------*/
   .apps-wrap {
       padding: 30px 0
   }

   .apps-header {
       background: #fff;
       border-radius: 12px;
       box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
       padding: 24px;
       margin-bottom: 22px
   }

   .apps-header h2 {
       margin: 0;
       font-weight: 700;
       font-size: 22px;
       color: #111827
   }

   .apps-header p {
       margin: 6px 0 0;
       color: #6b7280
   }

   .app-card {
       background: #fff;
       border-radius: 12px;
       box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
       padding: 22px;
       margin-bottom: 16px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       flex-wrap: wrap
   }

   .app-card .info h4 {
       margin: 0;
       font-size: 17px;
       font-weight: 700
   }

   .app-card .info h4 a {
       color: #1967d2;
       text-decoration: none
   }

   .app-card .info .company {
       color: #374151;
       font-weight: 500;
       margin-top: 2px
   }

   .app-card .info .meta {
       color: #6b7280;
       font-size: 13px;
       margin-top: 8px
   }

   .app-card .info .meta span {
       margin-right: 16px
   }

   .app-card .actions {
       display: flex;
       align-items: center;
       gap: 12px
   }

   .badge-status {
       display: inline-block;
       padding: 5px 14px;
       border-radius: 20px;
       font-size: 12px;
       text-transform: uppercase;
       font-weight: 600;
       letter-spacing: .5px
   }

   .badge-applied {
       background: #e0f2fe;
       color: #0369a1
   }

   .badge-shortlisted {
       background: #dcfce7;
       color: #15803d
   }

   .badge-rejected {
       background: #fee2e2;
       color: #b91c1c
   }

   .badge-interview {
       background: #fef3c7;
       color: #92400e
   }

   .empty-msg {
       background: #fff;
       border-radius: 12px;
       padding: 60px 20px;
       text-align: center;
       color: #6b7280
   }

   /* Suggested for You Toggle & Badge */
   .suggested-toggle-card {
       background: #fff;
       border: 1px solid #eef2f7;
       margin-bottom: 15px;
       transition: all 0.3s ease;
       border-radius: 10px;
       overflow: hidden;
   }

   .suggested-toggle-card.active {
       border-color: var(--clr-primary);
       box-shadow: 0 4px 15px rgba(124, 58, 237, 0.1);
   }

   .suggested-btn {
       display: flex;
       align-items: center;
       justify-content: space-between;
       text-decoration: none !important;
       padding: 12px 15px;
   }

   .suggested-btn i {
       font-size: 18px;
       color: var(--clr-secondary);
   }

   .suggested-btn span {
       flex: 1;
       margin-left: 10px;
       font-weight: 700;
       color: #1f2937;
       font-size: 14px;
   }

   .toggle-switch {
       width: 40px;
       height: 22px;
       background: #e5e7eb;
       border-radius: 20px;
       position: relative;
       transition: all 0.3s ease;
   }

   .suggested-toggle-card.active .toggle-switch {
       background: var(--clr-primary);
   }

   .toggle-knob {
       width: 18px;
       height: 18px;
       background: #fff;
       border-radius: 50%;
       position: absolute;
       top: 2px;
       left: 2px;
       transition: all 0.3s ease;
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   }

   .suggested-toggle-card.active .toggle-knob {
       left: 20px;
   }

   .badge-suggested {
       background: linear-gradient(135deg, #F59E0B, #D97706) !important;
       color: #fff !important;
   }

   .badge-Viewed {
       background: #ede9fe;
       color: #6d28d9;
   }

   .badge-Applied {
       background: #e0f2fe;
       color: #0369a1;
   }

   .badge-Shortlisted {
       background: #dcfce7;
       color: #15803d;
   }

   .badge-Rejected {
       background: #fee2e2;
       color: #b91c1c;
   }

   .badge-applied-tag {
       background: #dcfce7;
       color: #166534;
       padding: 2px 8px;
       border-radius: 4px;
       font-size: 12px;
       font-weight: 600;
       margin-left: 8px;
   }


   /*-----------------------browse category ----------------*/
     /* ── Category Cards ── */
    .cat-card {
      border: none;
      border-radius: 16px;
      color: #fff;
      text-decoration: none;
      display: block;
      padding: 32px 20px 24px;
      transition: transform .25s ease, box-shadow .25s ease;
      position: relative;
      overflow: hidden;
    }
    .cat-card::before {                       /* subtle shine overlay */
      content: '';
      position: absolute;
      top: -40%;
      right: -20%;
      width: 200px;
      height: 200px;
      background: rgba(255,255,255,.12);
      border-radius: 50%;
      pointer-events: none;
    }
    .cat-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 40px rgba(0,0,0,.22);
      color: black;
      text-decoration: none;
    }
    .cat-card .cat-title {
      font-size: 1.05rem;
      font-weight: 700;
      margin-bottom: 8px;
      line-height: 1.3;
    }
    .cat-card .cat-badge {
      display: inline-block;
      background: rgba(255,255,255,.28);
      border-radius: 50px;
      padding: 3px 14px;
      font-size: .82rem;
      font-weight: 600;
      letter-spacing: .3px;
    }
    .cat-col { margin-bottom: 24px; }
 
    /* Section heading tweak */
    .section-cat-header { text-align: center; margin-bottom: 40px; }
    .section-cat-header h2 { font-weight: 800; font-size: 2rem; color: #1a1a2e; }
    .section-cat-header p  { color: #6c757d; font-size: 1rem; margin-top: 6px; }