/*===========================================
   FORTUNE ENTERPRISES – Professional Theme
   Brand Color: #3d5f84
   ==========================================*/

/* Google Fonts – Poppins for a modern professional look */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/*---------------------------------------------
  1. CSS Custom Properties (Design Tokens)
----------------------------------------------*/
:root {
  --brand:        #3d5f84;
  --brand-dark:   #2c4a6e;
  --brand-darker: #1e3550;
  --brand-light:  #5a7da5;
  --brand-xlight: #e8eef5;
  --accent:       #f0a500;
  --success:      #2bab4f;
  --text:         #1e2d3d;
  --text-muted:   #6b7a8d;
  --bg:           #f8fafc;
  --white:        #ffffff;
  --border:       #dde4ed;
  --shadow-sm:    0 2px 8px rgba(61,95,132,.08);
  --shadow-md:    0 6px 24px rgba(61,95,132,.12);
  --shadow-lg:    0 12px 40px rgba(61,95,132,.16);
  --radius:       10px;
  --radius-sm:    6px;
  --radius-lg:    16px;
  --transition:   0.28s ease;
}

/*---------------------------------------------
  2. Base Typography
----------------------------------------------*/
body {
  font-family: 'Poppins', 'Open Sans', sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', 'Montserrat', sans-serif;
  color: var(--text);
}
a { color: var(--brand); transition: color var(--transition); }
a:hover { color: var(--brand-dark); }

p { line-height: 1.75; color: var(--text-muted); }

/*---------------------------------------------
  3. Primary Colour Swap (#0357e9 → #3d5f84)
----------------------------------------------*/
.titleTop .subtitle { color: var(--brand); }
.titleTop h3 span, .titleTop h3 i { color: var(--brand); }

.btn-yellow {
  background: var(--brand);
  color: var(--white);
  border: none;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(61,95,132,.25);
  transition: background var(--transition), transform var(--transition);
}
.btn-yellow:hover { background: var(--brand-dark); color: var(--white); transform: translateY(-1px); }

.btn-primary {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  border-radius: var(--radius-sm);
  font-weight: 600;
  padding: 10px 22px;
  transition: background var(--transition), transform var(--transition);
}
.btn-primary:hover { background: var(--brand-dark) !important; border-color: var(--brand-dark) !important; transform: translateY(-1px); }

.btn-success {
  background: var(--success);
  color: var(--white);
  border-radius: var(--radius-sm);
  padding: 12px 28px;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(43,171,79,.25);
  transition: background var(--transition), transform var(--transition);
}
.btn-success:hover { background: #23963e; transform: translateY(-1px); }

.btn-dark {
  background: #1e2d3d;
  color: var(--white);
  border-radius: var(--radius-sm);
  padding: 10px 22px;
  font-weight: 600;
  transition: background var(--transition);
}
.btn-dark:hover { background: var(--brand); color: var(--white); }

/*---------------------------------------------
  4. Header – clean white with sticky shadow
----------------------------------------------*/
.header {
  background: var(--white);
  border-bottom: none;
  box-shadow: 0 1px 0 var(--border);
  padding: 0;
}

.header.issticky {
  box-shadow: 0 4px 20px rgba(61,95,132,.12);
  background: var(--white);
}

.header .logo { margin-top: 8px; margin-bottom: 8px; }

/* Nav links */
.navbar { padding: 6px 0; }
.navbar-expand-lg .navbar-nav .nav-link {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  padding: 16px 2px;
  border-bottom: 2px solid transparent;
  letter-spacing: 0.01em;
}
.navbar-expand-lg .navbar-nav .nav-link:hover {
  color: var(--brand);
  border-bottom-color: var(--brand);
}
.navbar-light .navbar-nav .active > .nav-link {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

/* Register / CTA button */
.navbar-expand-lg .navbar-nav .nav-item.register a {
  background: var(--brand);
  color: var(--white);
  border-radius: var(--radius-sm);
  padding: 9px 20px;
  font-weight: 600;
  border-bottom: none;
  box-shadow: 0 3px 10px rgba(61,95,132,.22);
}
.navbar-expand-lg .navbar-nav .nav-item.register a:hover {
  background: var(--brand-dark);
}
.navbar-expand-lg .navbar-nav .nav-item.foruserbtn a {
  background: var(--brand);
  color: var(--white);
  border-radius: var(--radius-sm);
  padding: 9px 20px;
  font-weight: 600;
  border-bottom: none;
}

/* Dropdown */
.dropdown-menu {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  padding: 6px 0;
}
.navbar-expand-lg .navbar-nav .dropdown-menu > li > a {
  font-weight: 500;
  color: var(--text);
  padding: 11px 20px;
  font-size: 14px;
}
.navbar-expand-lg .navbar-nav .dropdown-menu > li > a:hover {
  background: var(--brand-xlight);
  color: var(--brand);
}
.navbar-expand-lg .navbar-nav .nav-item.loginlink a { color: var(--brand); font-weight: 600; }

/* Navbar toggler */
.navbar-toggler { border: none; padding: 4px 8px; }
.navbar-toggler:focus { box-shadow: none; }

/* Hero section – tagline pill and trust stats */
.hero-tagline {
  display: inline-block;
  background: var(--brand-xlight);
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 20px;
  margin-bottom: 16px;
  border: 1.5px solid rgba(61,95,132,.2);
}

.hero-stats {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 28px;
  background: var(--white);
  border-radius: var(--radius);
  padding: 16px 24px;
  box-shadow: var(--shadow-md);
  border: 1.5px solid var(--border);
  width: fit-content;
}
.hero-stat-item { text-align: center; padding: 0 20px; }
.hero-stat-item strong { display: block; font-size: 22px; font-weight: 800; color: var(--brand); font-family: 'Poppins', sans-serif; }
.hero-stat-item span { font-size: 12px; color: var(--text-muted); font-weight: 500; margin-top: 2px; display: block; }
.hero-stat-divider { width: 1px; height: 40px; background: var(--border); flex-shrink: 0; }

@media (max-width: 767px) {
  .hero-stats { width: 100%; justify-content: space-around; }
  .hero-stat-item { padding: 0 12px; }
}

/*---------------------------------------------
  5. Hero / Search Section
----------------------------------------------*/
.searchwrap {
  background: linear-gradient(135deg, #f0f5fb 0%, var(--brand-xlight) 60%, #dce8f5 100%);
  padding-top: 60px;
  padding-bottom: 50px;
  position: relative;
  overflow: hidden;
}
.comfilter .btn{
    background-color: #3d5f84 !important;
    border-radius:25px !important;
}
.searchwrap::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(61,95,132,.1) 0%, transparent 70%);
  border-radius: 50%;
}

h3.seekertxt {
  font-size: 44px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
h3.seekertxt span { color: var(--brand); }

.bxsrctxt h1 {
  font-size: 40px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: 12px;
}
.bxsrctxt p {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.7;
}

/* Search form box */
.searchbar .input-group {
  border: 2px solid var(--brand);
  border-radius: 50px;
  padding: 6px 8px;
  background: var(--white);
  box-shadow: var(--shadow-md);
}
.searchbar .form-control {
  height: 48px;
  border: none;
  border-radius: 50px;
  font-size: 15px;
  padding: 10px 16px;
  background: transparent;
  color: var(--text);
}
.searchbar .form-control::placeholder { color: #9aa5b4; }
.searchbar .btn {
  background: var(--brand);
  color: var(--white);
  border-radius: 50px;
  font-size: 15px;
  font-weight: 600;
  padding: 10px 28px;
  border: none;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}
.searchbar .btn:hover { background: var(--brand-dark); }

.slidersearch .searchbar {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 24px;
  margin-top: -40px;
  z-index: 5;
  position: relative;
}

/* Page search banner for inner pages */
.pageSearch {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  padding: 48px 0;
}
.pageSearch h3 { color: var(--white); font-weight: 600; font-size: 26px; }
.pageSearch .searchform .input-group {
  border: 2px solid rgba(255,255,255,.4);
  border-radius: 50px;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(4px);
}
.pageSearch .searchform .form-control {
  background: transparent;
  border: none;
  color: black;
  font-size: 15px;
  height: 50px;
}
.pageSearch .searchform .form-control::placeholder { color: rgba(255,255,255,.7); }
.pageSearch .searchform .btn {
  background: var(--accent);
  color: var(--white);
  border-radius: 50px;
  font-weight: 700;
  padding: 10px 28px;
  border: none;
}

/*---------------------------------------------
  6. Section Title Styles
----------------------------------------------*/
.titleTop { margin-bottom: 12px;text-align: center; }
.titleTop .subtitle {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: 3px;
  text-transform: uppercase;
}
.titleTop h3 {
  font-size: 30px;
  font-weight: 700;
  color: var(--text);
}

/* Section common */
.section { padding: 64px 0; }
.greybg { background: var(--bg); }

/* View all button */
.viewallbtn {
  text-align: center;
  margin-top: 40px;
}
.viewallbtn a, .viewallbtn .btn {
  background: transparent;
  border: 2px solid var(--brand);
  color: var(--brand);
  border-radius: 50px;
  padding: 11px 36px;
  font-weight: 600;
  font-size: 14px;
  display: inline-block;
  transition: all var(--transition);
}
.viewallbtn a:hover, .viewallbtn .btn:hover {
  background: var(--brand);
  color: var(--white);
}

/*---------------------------------------------
  7. Top Employers / Company Cards
----------------------------------------------*/
.employerList li .empint {
  background: var(--white);
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  padding: 22px 18px;
  margin-bottom: 15px;
  transition: all var(--transition);
  box-shadow: var(--shadow-sm);
}
.employerList li .empint:hover {
  border-color: var(--brand);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.text-info-right .emloc { color: var(--brand); }

.compnaieslist li .empint {
  background: var(--white);
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}
.compnaieslist li .empint:hover {
  border-color: var(--brand);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  background: var(--white) !important;
}
.compnaieslist .emptbox h4:hover { color: var(--brand); }
.compnaieslist li:hover .cm-info-bottom span { background: var(--brand); color: var(--white); }
.compnaieslist li h3 a { color: var(--brand); }
.compnaieslist .text-info-right .emloc { color: var(--text-muted); }

/*---------------------------------------------
  8. Industries Section
----------------------------------------------*/
.hmindlist li a {
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  background: var(--white);
  color: var(--text);
  font-weight: 500;
  box-shadow: var(--shadow-sm);
  font-size: 13px;
  transition: all var(--transition);
}
.hmindlist li a:hover {
  background: var(--brand);
  color: var(--white);
  border-left-color: var(--brand-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.statsbox {
  background: var(--white);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 30px rgba(61,95,132,.1);
  padding: 24px 28px 0;
}
.statsbox .col:nth-child(1) h4,
.statsbox .col:nth-child(1) i { color: var(--brand); }
.statsbox .col:nth-child(3) h4,
.statsbox .col:nth-child(3) i { color: var(--brand); }

/*---------------------------------------------
  9. Featured Jobs Cards
----------------------------------------------*/
.featuredlist .jobint {
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  padding: 20px;
  transition: all var(--transition);
  box-shadow: var(--shadow-sm);
}
.featuredlist .jobint:hover {
  border-color: var(--brand);
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}
.featuredlist .jobint h4 a:hover { color: var(--brand); }
.featuredlist .jobint strong i { color: var(--brand); }

/* Job type badge */
.fticon {
  background: var(--brand-xlight);
  color: var(--brand);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
}

/* promoted badge */
.promotepof-badge {
  background: var(--accent);
  border-radius: 0 0 0 var(--radius);
}

/*---------------------------------------------
  10. Categories
----------------------------------------------*/
.catelist li a {
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(61,95,132,.08);
  background: var(--white);
  font-size: 14px;
  transition: all var(--transition);
}
.catelist li a:hover {
  box-shadow: 0 8px 24px rgba(61,95,132,.14);
  border-left-color: var(--brand-dark);
  background: var(--brand-xlight);
}
.catelist li span { color: var(--brand); font-weight: 700; }

.categorylisting li .catecard {
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-sm);
  background: var(--white);
  transition: all var(--transition);
  padding: 24px 16px;
}
.categorylisting li .catecard:hover {
  border-color: var(--brand);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.categorylisting li .catecard:hover h3 { color: var(--brand); }
.categorylisting li .catecard .badge {
  background: var(--brand-xlight);
  color: var(--brand);
  font-weight: 600;
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 13px;
}

.intcategorylisting li .catecard .badge { background: var(--brand-xlight); color: var(--brand); border-radius: 20px; }
.intcategorylisting li .catecard:hover h3 { color: var(--brand); }

/*---------------------------------------------
  11. Tabs
----------------------------------------------*/
.tabswrap { border-bottom: 2px solid var(--brand); }
.tabswrap .nav-tabs > li > a { font-size: 15px; color: var(--text-muted); font-weight: 500; }
.tabswrap .nav-tabs > li > a.active,
.tabswrap .nav-tabs > li > a.active:focus {
  background: var(--brand);
  color: var(--white);
  border-color: var(--brand);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-weight: 700;
}
.tabswrap .nav-tabs > li.last a:hover { color: var(--brand); }

/*---------------------------------------------
  12. Search list tabs + sidebar
----------------------------------------------*/
.jobreqbtn a {
  background: var(--brand);
  color: var(--white);
  border-radius: var(--radius-sm);
  padding: 12px 20px;
  font-weight: 600;
  transition: background var(--transition);
}
.jobreqbtn a:hover { background: var(--brand-dark); }
.jobreqbtn a.btn-job-alert { background: var(--brand); }

/*---------------------------------------------
  13. Inner Search Bar (top of listing pages)
----------------------------------------------*/
.inner_top_search .searchbar .input-group { border-color: var(--brand); }
.inner_top_search .searchbar .btn { background: var(--brand); }

/*---------------------------------------------
  14. How It Works
----------------------------------------------*/
.howlist li .iconcircle {
  background: var(--brand-xlight);
  width: 80px; height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  box-shadow: 0 4px 16px rgba(61,95,132,.14);
}
.howlist li .iconcircle span { color: var(--brand); font-size: 36px; }
.howlist li .iconcircle i { color: var(--brand); font-size: 30px; }

.howitwrap { background: var(--bg); }

/*---------------------------------------------
  15. Testimonials
----------------------------------------------*/
.testimonialwrap { background: var(--brand-xlight); }

/*---------------------------------------------
  16. Top Cities Section
----------------------------------------------*/
.citieswrap { background: var(--bg); }
.citiessrchlist li figure { background: var(--brand-dark); }

/*---------------------------------------------
  17. Subheader Nav (Category Tabs)
----------------------------------------------*/
.subheadernav {
  background: var(--brand) !important;
  filter: none !important;
  border-top: none;
  box-shadow: 0 2px 8px rgba(61,95,132,.2);
}
.subheadernav a { color: var(--white); font-weight: 600; font-size: 13px; }
.subheadernav a:hover { background: var(--brand-dark); }
.subheadernav ul li:last-child a { border-right: none; }

/*---------------------------------------------
  18. Slider text CTA
----------------------------------------------*/
.slidertext5 a {
  background: var(--brand);
  border-radius: 50px;
  padding: 12px 32px;
  font-weight: 700;
}

/*---------------------------------------------
  19. Stat Box colours
----------------------------------------------*/
.statsbox .statint h4 { font-size: 28px; font-weight: 700; }

/*---------------------------------------------
  20. Info/Login boxes on homepage
----------------------------------------------*/
.infodatawrap { background: var(--white); padding: 40px 0; border-bottom: 1px solid var(--border); }

/*---------------------------------------------
  21. Footer
----------------------------------------------*/
.footerWrap {
  background: linear-gradient(160deg, #1e2d3d 0%, #162034 100%);
  color: rgba(255,255,255,.75);
  padding: 60px 0 30px;
}
.footerWrap h5 {
  color: var(--white);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--brand);
  display: inline-block;
}
.footerWrap .quicklinks li { margin-bottom: 8px; }
.footerWrap .quicklinks a {
  color: rgba(255,255,255,.65) !important;
  font-size: 13px;
  font-weight: 400;
  transition: color var(--transition);
}
.footerWrap .quicklinks a:hover { color: var(--white); padding-left: 4px; }

.footerWrap .address,
.footerWrap .email,
.footerWrap .email a {
  color: rgba(255,255,255,.65);
  font-size: 13px;
  line-height: 1.9;
}
.footerWrap .email a:hover { color: var(--white); }

.footerWrap .social { margin-top: 16px; }
.footerWrap .social a:hover { background: var(--brand); }

.copyright {
  background: #111d2b;
  padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,.07);
}
.copyright .bttxt {
  color: rgba(255,255,255,.5);
  font-size: 12px;
  line-height: 2;
}
.copyright .bttxt a { color: rgba(255,255,255,.7); }
.copyright .bttxt a:hover { color: var(--white); }
.copyright .paylogos { text-align: right; opacity: .6; }
.copyright .paylogos:hover { opacity: 1; }

/*---------------------------------------------
  22. User Dashboard
----------------------------------------------*/
/* Footer contact list */
.footer-contact-list { list-style: none; padding: 0; margin: 0; }
.footer-contact-list li { color: rgba(255,255,255,.65); font-size: 13px; line-height: 1.9; display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.footer-contact-list li i { color: var(--brand-light); font-size: 13px; margin-top: 3px; flex-shrink: 0; width: 14px; }
.footer-contact-list li a { color: rgba(255,255,255,.65); }
.footer-contact-list li a:hover { color: var(--white); }


.userprofilealert {
  background: linear-gradient(90deg, #fff3cd, #fff9e6);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 14px 20px;
  margin-bottom: 20px;
}
.userprofilealert h5 { color: #856404; font-size: 14px; margin: 0 0 8px; }
.editbtbn a {
  background: var(--accent);
  color: var(--white);
  border-radius: var(--radius-sm);
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
}
.editbtbn a:hover { background: #d4900a; }

/* Dashboard sidebar menu */
.dashsidebar .nav-item a,
.listpgWraper .list-group-item {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  border: none;
  padding: 11px 16px;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}
.dashsidebar .nav-item a:hover,
.listpgWraper .list-group-item:hover {
  background: var(--brand-xlight);
  color: var(--brand);
}
.dashsidebar .nav-item.active a,
.listpgWraper .list-group-item.active {
  background: var(--brand);
  color: var(--white);
}

/* Table */
.table thead.table-dark th { background: var(--brand-darker); color: var(--white); font-weight: 600; font-size: 13px; border: none; }
.table tbody td { font-size: 13px; color: var(--text); vertical-align: middle; }

/*---------------------------------------------
  23. Alerts and Badges
----------------------------------------------*/
.badge { border-radius: 20px; font-weight: 600; }
.badge.bg-primary, .badge-primary { background: var(--brand) !important; }
.badge.bg-success, .badge-success { background: var(--success) !important; }

/*---------------------------------------------
  24. Forms
----------------------------------------------*/
.form-control {
  border-radius: var(--radius-sm);
  border-color: var(--border);
  color: var(--text);
  font-size: 14px;
  padding: 10px 14px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(61,95,132,.12);
}
.form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(61,95,132,.12); }

/* Select2 */
.select2-container--default .select2-selection--single {
  border-color: var(--border) !important;
  border-radius: var(--radius-sm) !important;
  height: 42px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 42px !important; color: var(--text); }
.select2-container--default .select2-results__option--highlighted { background: var(--brand) !important; }

/*---------------------------------------------
  25. Modals (Login / Register)
----------------------------------------------*/
.modal-content {
  border-radius: var(--radius-lg);
  border: none;
  box-shadow: var(--shadow-lg);
}
.modal-header {
  background: var(--brand);
  color: var(--white);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 18px 24px;
}
.modal-title { color: var(--white); font-weight: 700; }
.modal-header .btn-close { filter: brightness(10); }

/*---------------------------------------------
  26. Inner Page Title
----------------------------------------------*/
.innertopbanner {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  padding: 48px 0;
}
.innertopbanner h3, .innertopbanner h1 { color: var(--white); font-weight: 700; }
.innertopbanner .breadcrumb-item a { color: rgba(255,255,255,.8); }
.innertopbanner .breadcrumb-item.active { color: rgba(255,255,255,.55); }
.innertopbanner .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.4); }

/* General inner banner – older markup */
.inner-page-banner {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
}

/*---------------------------------------------
  27. Misc Utility Overrides
----------------------------------------------*/
/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f3f5; }
::-webkit-scrollbar-thumb { background: var(--brand-light); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand); }

/* Owl carousel dots */
.owl-dots .owl-dot.active span,
.owl-dots .owl-dot:hover span { background: var(--brand) !important; }
.owl-dots .owl-dot span { background: #cdd4de !important; }

/* Pagination */
.page-item.active .page-link { background: var(--brand); border-color: var(--brand); }
.page-link { color: var(--brand); }
.page-link:hover { color: var(--brand-dark); }

/* Flash message */
.alert-success { background: #d4edda; border-color: var(--success); color: #155724; }
.alert-info { background: var(--brand-xlight); border-color: var(--brand); color: var(--brand); }

/* Salary badge inside jobs */
.salary strong { color: var(--brand-dark); font-weight: 700; }

/* Blog cards */
.bloglist li .blgint,
.blog-grid .blgint {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1.5px solid var(--border);
  transition: all var(--transition);
}
.bloglist li .blgint:hover,
.blog-grid .blgint:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

/* Featured candidate cards */
.resumeList li .resint {
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-sm);
  background: var(--white);
  transition: all var(--transition);
}
.resumeList li .resint:hover {
  border-color: var(--brand);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* Colors that were previously hardcoded #0357e9 */
.mt-list-style-blue { color: var(--brand); }
.mt-style-button1 .mt-style-button { background: var(--brand); }
.mt-style-button2 .mt-style-button:hover { background: var(--brand); }
.mt-style-button3 .mt-style-button:hover { background: var(--brand); border: 2px solid var(--brand); }
.getstarted a:hover { background: var(--brand); }
.buildpagebtn a:hover { color: var(--brand); }
.jobreqbtn a, .jobreqbtn a.btn-job-alert { background: var(--brand); }

/* Links inside search box */
#map-section .btn { background: var(--brand); }
.searchblack h3 span { color: var(--brand); }

/* Sticky visible top-nav override */
.header.issticky .navbar-nav .nav-link { color: var(--text); }

/*==============================================
   SECTION OVERRIDES – Modern Professional Look
===============================================*/

/*---------------------------------------------
  A. Info boxes – "Search Job" / "Post a Job"
----------------------------------------------*/
.infodatawrap {
  background: var(--bg);
  padding: 48px 0;
  border-bottom: none;
}
.userloginbox {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 100px 32px 36px;
  display: block;
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
}
.userloginbox::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 5px; height: 100%;
  background: var(--brand);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}
.userloginbox:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  color: var(--text);
}
.userloginbox h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.userloginbox p {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0;
}
.userloginbox img {
  position: absolute;
  right: 24px; top: 50%;
  width: 65px;
  margin-top: -32px;
  opacity: .9;
  filter: drop-shadow(0 4px 8px rgba(61,95,132,.15));
}

/*---------------------------------------------
  B. Latest Jobs – newjbox cards
----------------------------------------------*/
.newjbox.row { margin-top: 8px; }
.newjbox li .jobint {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px;
  transition: all var(--transition);
  height: 100%;
}
.newjbox li .jobint:hover {
  border-color: var(--brand);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.newjbox.row li h4 { margin-bottom: 4px; }
.newjbox.row li h4 a {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.newjbox.row li h4 a:hover { color: var(--brand); }
.jobslist li .company { color: var(--text-muted); padding: 5px 0; font-size: 13px; }
.jobslist li .company a { color: var(--brand); font-weight: 600; }
.jobslist li h4 a:hover { color: var(--brand); }
.jobslist li .applybtn {
  background: var(--brand-xlight);
  color: var(--brand);
  border: 1.5px solid var(--brand);
  border-radius: 50px;
  font-weight: 600;
  padding: 8px 20px;
  font-size: 13px;
  margin-top: 14px;
  transition: all var(--transition);
}
.jobslist li .applybtn:hover { background: var(--brand); color: var(--white); }

/* Job type labels */
.fulltime {
  background: #e8eef5;
  color: var(--brand);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  display: inline-block;
}
label.fulltime[title="Part Time"]   { background: #dbeafe; color: #1d4ed8; }
label.fulltime[title="Freelance"]   { background: #dcfce7; color: #16a34a; }
label.fulltime[title="Contract"]    { background: #ede9fe; color: #7c3aed; }
label.fulltime[title="Internship"]  { background: #fce7f3; color: #be185d; }
/* Featured job company row */
.jobcompany {
  background: var(--brand-xlight);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  margin-top: 16px;
}
.ftjobcomp a { color: var(--text); font-weight: 600; font-size: 14px; }
.ftjobcomp span { color: var(--text-muted); font-size: 12px; margin-bottom: 4px; }
.jobcompany .company-logo img { border: 2px solid var(--white); box-shadow: var(--shadow-sm); }

/* Featured badge triangle */
.promotepof-badge::before { border-top-color: var(--brand) !important; }

/*---------------------------------------------
  C. Featured Candidates – seekerbox + ribbon
----------------------------------------------*/
.userlisting .seekerbox {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 20px 20px;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
  text-align: center;
  overflow: hidden;
  position: relative;
}
.userlisting .seekerbox:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
  background: var(--white);
}
.userlisting .usercoverpic {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%) !important;
  height: 70px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.userlisting .userltimg {
  width: 88px; height: 88px;
  border-radius: 50%;
  border: 4px solid var(--white);
  box-shadow: 0 4px 20px rgba(61,95,132,.2);
  background: var(--white);
  position: relative; z-index: 1;
  margin: 0 auto;
}
.userlisting .userltimg img { height: 88px; width: 88px; object-fit: cover; border-radius: 50%; }
.userlisting .hmseekerinfo { padding: 14px 0 0; }
.seekerbox h3 { font-size: 18px; font-weight: 700; color: var(--text); margin-top: 10px; margin-bottom: 8px; }
.seekerbox h3 a { color: var(--text); }
.seekerbox .hmcate { font-size: 13px; color: var(--text-muted); justify-content: center; margin-bottom: 6px; }
.seekerbox .hmcate i { color: var(--brand); }
.seekerbox .listbtn { margin-top: 18px; }
.seekerbox .listbtn a {
  background: var(--brand);
  color: var(--white);
  border-radius: 50px;
  padding: 10px 28px;
  font-size: 14px;
  font-weight: 600;
  display: inline-block;
  transition: all var(--transition);
  box-shadow: 0 3px 12px rgba(61,95,132,.22);
}
.seekerbox .listbtn a:hover { background: var(--brand-dark); transform: translateY(-1px); }
/* Ribbon */
.ribbon span {
  background: var(--brand);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.ribbon::before, .ribbon::after { border-color: var(--brand-dark) !important; }

/* Carousel arrows */
.custom-nav button {
  background: var(--white);
  border: 1.5px solid var(--border) !important;
  color: var(--brand);
  width: 38px; height: 38px;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
  display: flex; align-items: center; justify-content: center;
}
.custom-nav button:hover { background: var(--brand); color: var(--white); border-color: var(--brand) !important; }

/*---------------------------------------------
  D. How It Works – modern step cards
----------------------------------------------*/
.howitsection { background: var(--bg); }
.howitwrap { padding: 64px 0; }
.howitwrap .titleTop { text-align: center; margin-bottom: 40px; }
.howitwrap .titleTop h3 { font-size: 32px; font-weight: 700; }

.howlist { counter-reset: step; }
.howlist li {
  padding: 0 16px;
}
.howlist li > div {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 36px 24px 28px;
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
  position: relative;
  text-align: center;
}
.howlist li > div::after {
  counter-increment: step;
  content: "0" counter(step);
  position: absolute;
  top: 16px; right: 20px;
  font-size: 11px;
  font-weight: 800;
  color: var(--brand);
  background: var(--brand-xlight);
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 1px;
}
.howlist li:hover > div {
  box-shadow: var(--shadow-md);
  transform: translateY(-5px);
  border-color: var(--brand);
}
.howlist li .iconcircle {
  background: var(--brand-xlight);
  width: 80px; height: 80px;
  border-radius: 50%;
  margin: 0 auto 24px;
  box-shadow: 0 4px 20px rgba(61,95,132,.15);
  display: flex; align-items: center; justify-content: center;
}
.howlist li h4 { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.howlist li p { font-size: 14px; line-height: 1.7; color: var(--text-muted); }

/*---------------------------------------------
  E. Blog Cards – homeblogposts
----------------------------------------------*/
.homeblogposts { background: var(--bg); }
.homeblogposts .titleTop { margin-bottom: 28px; }
.homeblogposts .titleTop h3 { font-size: 28px; font-weight: 700; }

/* ── Blog List Cards (blog.blade.php) ─────── */
.blogList { list-style: none; padding: 0; }
.blogList li { margin-bottom: 28px; }

.blogList li .bloginner {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.blogList li .bloginner:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

/* Image block */
.blogList li .bloginner .postimg {
  display: block;
  overflow: hidden;
  width: 100%;
  margin: 0;
  flex-shrink: 0;
  line-height: 0; /* remove inline-block gap */
}
.blogList li .bloginner .postimg img,
.blogList li .bloginner .postimg a img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.5s ease;
  display: block;
}
.blogList li .bloginner:hover .postimg img,
.blogList li .bloginner:hover .postimg a img { transform: scale(1.04); }

/* Post header — title + meta */
.blogList li .bloginner .post-header {
  padding: 16px 20px 8px;
  margin: 0;
}
.blogList li .bloginner .post-header h4 {
  margin: 0 0 6px;
}
.blogList li .bloginner .post-header h4 a {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  display: block;
}
.blogList li .bloginner .post-header h4 a:hover { color: var(--brand); }

/* Postmeta — "Category: link, link" (inline text, NOT flex) */
.blogList li .bloginner .postmeta {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.6;
  display: block;
}
.blogList li .bloginner .postmeta a { color: var(--brand) !important; font-weight: 500; }
.postmeta span { color: var(--text-muted) !important; }

/* Description paragraph — padded, fills remaining card height */
.blogList li .bloginner > p {
  padding: 6px 20px 20px;
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-muted);
  flex: 1;
}

/* Blog Sidebar */
.blogsidebar {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.blogsidebar .widget-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--brand-xlight);
}
/* Sidebar search */
.blogsidebar .search { position: relative; }
.blogsidebar .search .form-control {
  padding-right: 46px;
  border-color: var(--border);
  border-radius: var(--radius-sm);
}
.blogsidebar .search .btn {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  background: var(--brand);
  color: var(--white);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 0 14px;
  border: none;
}
.blogsidebar .search .btn:hover { background: var(--brand-dark); }
/* Sidebar categories */
.blogsidebar .categories {
  list-style: none;
  padding: 0;
  margin: 0;
}
.blogsidebar .categories li {
  border-bottom: 1px solid var(--border);
}
.blogsidebar .categories li:last-child { border-bottom: none; }
.blogsidebar .categories li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  transition: color var(--transition), padding var(--transition);
}
.blogsidebar .categories li a::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand);
  flex-shrink: 0;
}
.blogsidebar .categories li a:hover { color: var(--brand); padding-left: 8px; }

/*---------------------------------------------
  F. Jobs by Cities
----------------------------------------------*/
.citieswrap { background: var(--bg); padding: 64px 0; }

/* City card container (remove extra box shadow/bg from srchint) */
.citieswrap .srchint {
  background: none;
  box-shadow: none;
  padding: 0;
  border: none;
}
.citiessrchlist li { margin-top: 20px; }

figure.effect-ruby {
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-width: unset;
  max-width: 100%;
  width: 100%;
}
figure.effect-ruby img { border-radius: var(--radius-lg); }
.citiessrchlist li figure h2 {
  font-size: 22px;
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
  letter-spacing: 1px;
  color: var(--white);
}
.citiessrchlist li figure figcaption{
    flex-direction: column;
}
.citiessrchlist li figure p{
    color: var(--white);
}
.citiessrchlist li figure p {
  font-size: 13px;
  background: rgba(255,255,255,.15);
  padding: 4px 14px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
  margin-top: 8px;
}

/*---------------------------------------------
  G. Responsive
----------------------------------------------*/
@media(max-width: 768px) {
  .bxsrctxt{
    text-align: center;
  }
}
/* Tablet – 768px to 991px: search form + hero */
@media (min-width: 768px) and (max-width: 991px) {
  /* Prevent search button from wrapping to full width */
  .bxsrctxt{
    text-align: center;
  }
  .searchbar .input-group {
    /* flex-wrap: nowrap; */
    align-items: center;
    border-radius: 14px;
  }
  .searchbar .input-group .form-control {
    min-width: 100%;
    flex: 1 1 auto;
  }
  .searchbar select.form-control {
    max-width: 150px;
    flex-shrink: 1;
  }
  .searchbar .btn {
    flex-shrink: 0;
    padding: 10px 18px;
    font-size: 14px;
    border-radius: none !important;
  }

  /* Hero heading */
  .bxsrctxt h1 { font-size: 30px; }
  .bxsrctxt p  { font-size: 14px; }

  /* Stats row - go full width */
  .hero-stats {
    width: 100%;
    justify-content: space-around;
    padding: 14px 16px;
  }
  .hero-stat-item { padding: 0 12px; }
  .hero-stat-item strong { font-size: 18px; }

  /* Searchwrap padding */
  .searchwrap { padding-top: 40px; padding-bottom: 40px; }

  /* How it works step gap */
  .howlist li { margin-bottom: 24px; }
  .howlist li > div { padding: 28px 18px 22px; }

  /* Blog list spacing */
  .blogList li { margin-bottom: 24px; }

  /* Info boxes */
  .userloginbox { margin-bottom: 16px; }
}

/* Mobile – up to 767px */
@media (max-width: 767px) {
  .footerWrap { padding: 40px 0 20px; }
  .copyright .paylogos { text-align: left; margin-top: 10px; }
  h3.seekertxt { font-size: 26px; }
  .bxsrctxt h1 { font-size: 24px; }
  .section { padding: 44px 0; }
  .userloginbox { padding: 24px 86px 24px 20px; margin-bottom: 16px; }
  .blogList li .bloginner .postimg img { height: 170px; }
  .hero-stats { width: 100%; justify-content: space-around; }
  .hero-stat-item { padding: 0 10px; }
  .hero-stat-item strong { font-size: 16px; }
  /* Search form stacks cleanly on mobile */
  .searchbar .input-group {
    flex-wrap: wrap;
    border-radius: 14px;
    padding: 8px;
  }
  .searchbar .input-group .form-control {
    border-radius: 8px !important;
    margin-bottom: 6px;
  }
  .searchbar select.form-control { margin-bottom: 6px; }
  .searchbar .btn {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 0;
  }
}

/* Sticky visible top-nav override */
.header.issticky .navbar-nav .nav-link { color: var(--text); }

/*---------------------------------------------
  28. Testimonials
----------------------------------------------*/
.testimonialwrap {
  background: linear-gradient(160deg, #1e2d3d 0%, #2c4060 100%);
  padding: 70px 0;
}
.testimonialwrap .titleTop h3 { color: var(--white); }
.testimonialwrap .subtitle { color: var(--accent); font-weight: 700; letter-spacing: 3px; }

.testimonialsList li {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  padding: 36px;
  backdrop-filter: blur(4px);
}
.testimonialsList li p { color: rgba(255,255,255,.8); font-style: italic; font-size: 15px; line-height: 1.8; }
.testimonialsList li .ratinguser { color: var(--accent); font-size: 14px; margin-bottom: 16px; }
.testimonialsList li .clientname { color: var(--white); font-size: 18px; font-weight: 700; padding: 12px 0 2px; }
.testimonialsList li .clientinfo { color: var(--brand-light); font-weight: 600; margin-bottom: 10px; }

/*---------------------------------------------
  29. Inner Page Title / Banner
----------------------------------------------*/
.pageTitle {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  padding: 36px 0;
  text-align: center;
}
.pageTitle h5 {
  font-size: 32px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0;
}
.breadCrumb { color: rgba(255,255,255,.7); margin-top: 10px; }
.breadCrumb a { color: rgba(255,255,255,.75); }
.breadCrumb a:hover { color: var(--white); }
.breadCrumb span { color: rgba(255,255,255,.5); }

/* Latest resume / candidate section */
.resumeList li .resint { border-radius: var(--radius); border: 1.5px solid var(--border); box-shadow: var(--shadow-sm); background: var(--white); transition: all var(--transition); }
.resumeList li .resint:hover { border-color: var(--brand); box-shadow: var(--shadow-md); transform: translateY(-4px); }

/* Top countries section */
.topcountrieswrap { background: var(--brand-xlight); }

/* Home blog section */
.blogWrap .blgint, .hm-blogs .blgint {
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: all var(--transition);
}
.blogWrap .blgint:hover, .hm-blogs .blgint:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

/*---------------------------------------------
  30. Responsive Adjustments (navbar mobile)
----------------------------------------------*/
@media (max-width: 991px) {
  .navbar-nav { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 12px; margin-top: 8px; }
  .navbar-expand-lg .navbar-nav .nav-link { border-bottom: 1px solid var(--border) !important; padding: 12px 8px !important; }
  .navbar-expand-lg .navbar-nav .nav-item.register a { margin: 8px 0; display: inline-block; }
}

/*---------------------------------------------
  31. Bottom Mobile App Bar
----------------------------------------------*/
.mobilenav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 1050;
  background: var(--white);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 24px rgba(61,95,132,.12);
  padding: 0;
  padding-bottom: env(safe-area-inset-bottom, 0); /* iPhone notch */
}

.mobilenav ul {
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobilenav ul li {
  flex: 1;
}

.mobilenav ul li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 4px 8px;
  color: #8a9ab0;
  text-decoration: none;
  position: relative;
  transition: color var(--transition);
  gap: 3px;
}

/* Active indicator line at top */
.mobilenav ul li a::before {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%;
  height: 2.5px;
  background: var(--brand);
  border-radius: 0 0 3px 3px;
  transform: scaleX(0);
  transition: transform var(--transition);
}

.mobilenav ul li a:hover::before,
.mobilenav ul li.active a::before {
  transform: scaleX(1);
}

.mobilenav ul li a:hover,
.mobilenav ul li.active a {
  color: var(--brand);
}

/* Tint the SVG on hover/active using CSS filter */
.mobilenav ul li a svg {
  width: 24px;
  height: 24px;
  display: block;
  fill: currentColor;
  transition: fill var(--transition), transform var(--transition);
  flex-shrink: 0;
}

.mobilenav ul li a:hover svg,
.mobilenav ul li.active a svg {
  fill: var(--brand);
  transform: translateY(-1px);
}

.mobilenav ul li a span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  display: block;
  line-height: 1;
  font-family: 'Poppins', sans-serif;
}


/* User dashboard slide-up panel */
.usernavdash {
  background: var(--white);
  box-shadow: 0 -8px 32px rgba(61,95,132,.15);
  border-radius: 20px 20px 0 0;
  padding: 16px 0;
  left: 0; right: 0; bottom: 56px;
  z-index: 1040;
  border-top: 1px solid var(--border);
}

.usernavdash li a {
  padding: 14px 24px;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background var(--transition), color var(--transition);
}

.usernavdash li a:hover {
  background: var(--brand-xlight);
  color: var(--brand);
}

/* Add bottom padding to page so content isn't hidden behind bar */
/*==============================================
  32. Search-Jobs Listing Page
===============================================*/
#jbsearch::-webkit-input-placeholder {
  color: rgb(42, 41, 41);
}
/* ── Top Search Banner ─────────────────────── */
.pageSearch {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  padding: 36px 0 42px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.pageSearch::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 28px;
  background: var(--bg);
  clip-path: ellipse(55% 100% at 50% 100%);
}
.pageSearch h3 {
  color: var(--white);
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
  letter-spacing: -0.3px;
}

/* Search form card inside banner */
.searchform {
  background: var(--white);
  border: none !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  max-width: 680px;
  margin: 0 auto;
}
.searchform .input-group { gap: 8px; flex-wrap: nowrap; }
.searchform .form-control {
  border: 1.5px solid var(--border) !important;
  border-radius: 8px !important;
  height: 46px;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--text);
  background: #f8fafc;
}
.searchform .form-control:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(61,95,132,.1) !important;
  background: var(--white);
}
.searchform .form-control::placeholder {
  color: #9aa5b8;
  font-size: 13px;
}
.searchform .btn {
  background: var(--brand) !important;
  color: var(--white);
  border-radius: 8px !important;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  margin-left: 0 !important;
  flex-shrink: 0;
  border: none;
  box-shadow: 0 3px 12px rgba(61,95,132,.35);
  transition: background var(--transition), box-shadow var(--transition);
}
.searchform .btn:hover {
  background: var(--brand-dark) !important;
  box-shadow: 0 6px 20px rgba(61,95,132,.4);
}

/* ── Page Wrapper ──────────────────────────── */
.listpgWraper { background: var(--bg); padding: 32px 0 48px; }

/* ── Results Count Bar ─────────────────────── */
.topstatinfo {
  font-size: 13px;
  color: var(--text-muted);
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  margin-bottom: 20px !important;
  display: flex;
  align-items: center;
  gap: 6px;
}
.listpgWraper > .container > .row > .col-lg-9 > h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

/* ── Sidebar Action Buttons ────────────────── */
.jobreqbtn { margin-bottom: 18px; }
.jobreqbtn a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: var(--radius-sm) !important;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
  transition: all var(--transition);
  text-decoration: none;
}
.jobreqbtn a.btn-job-alert {
  background: var(--brand) !important;
  color: var(--white) !important;
  border: none;
  box-shadow: 0 3px 12px rgba(61,95,132,.25);
}
.jobreqbtn a.btn-job-alert:hover {
  background: var(--brand-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(61,95,132,.35);
}
.jobreqbtn a:not(.btn-job-alert) {
  background: var(--brand-xlight) !important;
  color: var(--brand) !important;
  border: 1.5px solid var(--brand) !important;
}
.jobreqbtn a:not(.btn-job-alert):hover {
  background: var(--brand) !important;
  color: var(--white) !important;
}
.jobreqbtn a.btn-job-alert-disabled {
  background: var(--bg) !important;
  color: #999 !important;
  border: 1.5px solid #ddd !important;
  box-shadow: none !important;
  cursor: default;
  transform: none !important;
}

/* ── Mobile Filter Toggle ──────────────────── */
.filterjobsnav {
  display: none;
  align-items: center;
  gap: 8px;
  background: var(--brand);
  color: var(--white);
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 14px;
  width: 100%;
  text-align: center;
  justify-content: center;
  transition: background var(--transition);
  text-decoration: none;
}
.filterjobsnav svg { fill: var(--white); }
.filterjobsnav:hover { background: var(--brand-dark); color: var(--white); }

/* ── Sidebar Widgets ───────────────────────── */
.sidebar { background: var(--white); border-radius: var(--radius-lg); border: 1.5px solid var(--border); padding: 20px; box-shadow: var(--shadow-sm); }
.sidebar .widget {
  margin-bottom: 0;
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
}
.sidebar .widget:last-child { border-bottom: none; padding-bottom: 0; }
.sidebar .widget:first-child { padding-top: 0; }
.sidebar .widget-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 12px;
}
.sidebar a.close-filterjobs {
  display: none;
  color: var(--text-muted);
  float: right;
}
.searchnt .btn{
    background-color: #3d5f84 !important;
    border-radius:25px !important;
}

/* ── Filter Checkboxes ─────────────────────── */
.optionlist { list-style: none; margin: 0; padding: 0; }
.optionlist li {
  font-size: 13px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.optionlist li input[type="checkbox"] {
  accent-color: var(--brand);
  width: 15px; height: 15px;
  cursor: pointer;
  flex-shrink: 0;
}
.optionlist li label { margin: 0; cursor: pointer; }
.optionlist li span {
  margin-left: auto;
  font-size: 11px;
  background: var(--brand-xlight);
  color: var(--brand);
  padding: 1px 8px;
  border-radius: 20px;
  font-weight: 600;
}
.optionlist li:hover { color: var(--brand); }
.text.text-primary.view_more {
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: var(--brand) !important;
  display: inline-block;
  margin-top: 8px;
}

/* ── Featured / Listing Job Cards ─────────── */
.featuredlist { list-style: none; padding: 0; margin: 0; }
.featuredlist li .jobint {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg) !important;
  padding: 20px;
  margin-top: 0;
  transition: all var(--transition);
  box-shadow: var(--shadow-sm);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.featuredlist li .jobint:hover {
  border-color: var(--brand);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.featuredlist li { margin-bottom: 24px; }
.featuredlist .jobint h4 { margin: 0; padding: 10px 0 6px; }
.featuredlist .jobint h4 a {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
}
.featuredlist .jobint h4 a:hover { color: var(--brand); }
.featuredlist .jobint strong { font-weight: 700; color: var(--text); }
.featuredlist .jobint strong i { color: var(--brand); }
.featuredlist .jobint > strong {
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
}
.featuredlist .jobint .salary {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.featuredlist .jobint .salary strong { color: var(--brand-dark); font-weight: 700; }

/* Job type icon pill */
.fticon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.fticon i {
  background: var(--brand-xlight);
  color: var(--brand);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1;
}

/* Featured badge */
.featuredlist li.featured .jobint {
  border-color: var(--accent);
  background: linear-gradient(180deg, #fffef5 0%, var(--white) 100%);
}

/* ── Pagination ────────────────────────────── */
.pagiWrap {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1.5px solid var(--border);
}
.pagiWrap .showreslt {
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  height: 100%;
}
.pagiWrap .pagination { justify-content: flex-end; }
.pagiWrap .page-link {
  border-radius: var(--radius-sm) !important;
  margin: 0 2px;
  border-color: var(--border);
  color: var(--brand);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
}
.pagiWrap .page-item.active .page-link {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--white);
}

/* ── Responsive: Mobile ────────────────────── */
@media (max-width: 991px) {
  /* Show filter toggle button on mobile */
  .filterjobsnav { display: flex; }
  /* Sidebar becomes a fullscreen drawer */
  #filterjobs {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1060;
    overflow-y: auto;
    border-radius: 0;
    padding: 20px;
  }
  #filterjobs.active { display: block; }
  .sidebar a.close-filterjobs { display: block; }
  /* Stack cards to 1 column */
  .featuredlist .col-lg-4.col-md-6 { width: 100% !important; }
  /* Top search form */
  .searchform .input-group { flex-wrap: wrap; }
  .searchform .form-control { width: 100%; }
  .searchform .btn { width: 100%; margin-top: 6px; }
  /* Pagination center on mobile */
  .pagiWrap .col-lg-7 { text-align: center !important; margin-top: 12px; }
  .pagiWrap .pagination { justify-content: center; }
}
@media (max-width: 767px) {
  .pageSearch h3 { font-size: 20px; }
  .topstatinfo { font-size: 12px; padding: 8px 14px; }
  .listpgWraper { padding: 20px 0 36px; }
  .pagiWrap { margin-top: 20px; }
}

/*==============================================
  33. Contact Page
===============================================*/

/* ── Page Wrapper ──────────────────────────── */
.inner-page {
  background: var(--bg);
  padding: 56px 0 0;
}
.contact-wrap { padding-bottom: 56px; }

/* ── Info Column (left) ────────────────────── */
.contact-now { margin-top: 28px; }

.contact {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 24px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}
.contact:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-md);
  transform: translateX(4px);
}

/* Icon circle */
.contact > span {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: var(--white);
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 4px 12px rgba(61,95,132,.3);
}

.information { overflow: hidden; padding-right: 0; margin-top: 2px; }
.information > strong {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--brand);
  display: block;
  margin-bottom: 4px;
}
.information > p {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  margin: 0;
}
.information > p a { color: var(--text); transition: color var(--transition); }
.information > p a:hover { color: var(--brand); }

/* ── Contact Form (right) ──────────────────── */
.contact-form {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  box-shadow: var(--shadow-sm);
}
.contact-form .titleTop { margin-bottom: 24px; }

.contact-form .row { gap: 0; row-gap: 18px; }

.contact-form input.form-control,
.contact-form textarea.form-control {
  background: #f8fafc;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 0;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.contact-form input.form-control::placeholder,
.contact-form textarea.form-control::placeholder { color: #9aa5b8; font-size: 13px; }
.contact-form input.form-control:focus,
.contact-form textarea.form-control:focus {
  background: var(--white);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(61,95,132,.1);
}
.contact-form textarea.form-control { height: 130px; resize: vertical; }

/* Submit button */
.contact-form button.button,
.contact-form button[type="submit"] {
  background: var(--brand);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  padding: 14px 36px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-top: 6px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(61,95,132,.3);
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: none;
}
.contact-form button.button:hover,
.contact-form button[type="submit"]:hover {
  background: var(--brand-dark);
  box-shadow: 0 8px 24px rgba(61,95,132,.4);
  transform: translateY(-2px);
}

/* ── Google Map ────────────────────────────── */
.googlemap {
  position: relative;
  overflow: hidden;
  border-top: 1.5px solid var(--border);
}
.googlemap iframe {
  height: 420px;
  width: 100%;
  border: none;
  display: block;
  filter: grayscale(20%) contrast(1.05);
}

/* ── Responsive ────────────────────────────── */
@media (max-width: 991px) {
  .contact-form { padding: 28px 24px; }
  .contact-wrap .col-lg-4 { margin-bottom: 32px; }
}
@media (max-width: 767px) {
  .inner-page { padding: 36px 0 0; }
  .contact { padding: 16px; }
  .contact-form { padding: 22px 16px; }
  .googlemap iframe { height: 280px; }
}

/*==============================================
  34. Company / Job Detail Page
===============================================*/

/* ── Page wrapper ──────────────────────────── */
.listpgWraper.mt-5 { background: var(--bg); padding-top: 36px !important; margin-top: 0 !important; }

/* ── job-header card ───────────────────────── */
.job-header {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
  overflow: hidden;
}

/* ── Candidate / Company info hero ────────── */
.job-header .jobinfo { padding: 0; }

.candidateinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 36px 24px 28px;
  background: linear-gradient(160deg, var(--brand-xlight) 0%, var(--white) 60%);
  position: relative;
}
.candidateinfo::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.candidateinfo .userPic {
  position: relative;
  z-index: 2;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 4px solid var(--white);
  box-shadow: 0 4px 20px rgba(61,95,132,.25);
  background: var(--white);
  overflow: hidden;
  margin-bottom: 16px;
  float: none;
  margin-right: 0;
}
.candidateinfo .userPic img,
.candidateinfo .userPic a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.candidateinfo .title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 6px;
}
.candidateinfo .desi {
  font-size: 14px;
  color: var(--brand);
  font-weight: 600;
  background: var(--brand-xlight);
  padding: 4px 14px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 12px;
}
.candidateinfo .loctext {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.candidateinfo .loctext i {
  color: var(--brand);
  width: auto;
  margin-right: 0;
}

/* ── Action buttons bar ────────────────────── */
.jobButtons {
  background: var(--bg);
  border-top: 1.5px solid var(--border);
  padding: 16px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.jobButtons a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--brand);
  color: var(--brand);
  background: var(--white);
  transition: all var(--transition);
  margin-right: 0;
}
.jobButtons a:hover {
  background: var(--brand);
  color: var(--white);
  border-color: var(--brand);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(61,95,132,.25);
}
.jobButtons a.report {
  border-color: #e53e3e;
  color: #e53e3e;
}
.jobButtons a.report:hover {
  background: #e53e3e;
  border-color: #e53e3e;
  color: var(--white);
}
.jobButtons a.apply {
  background: var(--brand);
  color: var(--white);
  font-size: 15px;
  padding: 12px 28px;
}
.jobButtons a.apply:hover { background: var(--brand-dark); }

/* ── About / Content box ───────────────────── */
.job-header .contentbox {
  padding: 28px 32px;
}
.job-header .contentbox h3,
.jobdetail h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--brand-xlight);
}
.job-header .contentbox p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-muted);
  margin-top: 0;
}

/* ── Company Detail grid ───────────────────── */
.jobdetail {
  padding: 28px 32px;
}
.jobdetail iframe {
  width: 100%;
  height: 220px;
  border: none;
  border-radius: var(--radius-sm);
  display: block;
}

.jbdetail { list-style: none; padding: 0; margin: 0; }
.jbdetail li { margin-top: 0; margin-bottom: 16px; }

.jbitlist {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 12px;
  gap: 8px;
  height: 100%;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.jbitlist:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-sm);
}
.jbitlist .material-symbols-outlined {
  font-size: 22px !important;
  color: var(--brand);
  background: var(--brand-xlight);
  border-radius: 8px;
  padding: 6px;
  line-height: 1;
}
.jbitdata strong {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  display: block;
  margin-bottom: 3px;
  font-weight: 700;
}
.jbitdata span {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  display: block;
}

/* ── Current Openings section ──────────────── */
.relatedJobs {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  margin-bottom: 36px;
  box-shadow: var(--shadow-sm);
}
.relatedJobs h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--brand-xlight);
}

/* ── No data box ───────────────────────────── */
.nodatabox {
  background: var(--brand-xlight);
  border: 1.5px dashed var(--brand);
  border-radius: var(--radius-lg);
  padding: 40px 24px;
  text-align: center;
}
.nodatabox h4 { font-size: 17px; color: var(--text-muted); font-weight: 600; }
.nodatabox .viewallbtn a {
  display: inline-block;
  margin-top: 12px;
  background: var(--brand);
  color: var(--white);
  padding: 10px 28px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  transition: background var(--transition);
}
.nodatabox .viewallbtn a:hover { background: var(--brand-dark); }

/* loctext used outside candidateinfo (job detail page) */
.loctext { margin-top: 10px; font-size: 14px; color: var(--text-muted); }
.loctext i { color: var(--brand); margin-right: 6px; width: auto; }
.loctext a { color: var(--text-muted); }
.loctext a:hover { color: var(--brand); }

/* ── Responsive ────────────────────────────── */
@media (max-width: 991px) {
  .job-header .contentbox, .jobdetail { padding: 22px 20px; }
  .relatedJobs { padding: 22px 20px; }
  .jobButtons { padding: 14px 20px; }
}
@media (max-width: 767px) {
  .candidateinfo { padding: 28px 16px 22px; }
  .jobButtons { justify-content: stretch; }
  .jobButtons a { flex: 1; justify-content: center; }
  .jbdetail li { margin-bottom: 12px; }
}

/*==============================================
  35. Auth Pages (Login / Register)
===============================================*/

/* ── Page Background ───────────────────────── */
.authpages {
  min-height: calc(100vh - 200px);
  padding: 60px 0;
  background: linear-gradient(160deg, #eef2f7 0%, #dde4ed 100%);
  position: relative;
  overflow: hidden;
}
.authpages::before {
  content: '';
  position: absolute;
  top: -140px; right: -80px;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: rgba(61,95,132,.06);
}
.authpages::after {
  content: '';
  position: absolute;
  bottom: -100px; left: -60px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: rgba(61,95,132,.05);
}

/* ── Card ───────────────────────────────────── */
.useraccountwrap { max-width: 480px; margin: 0 auto; position: relative; z-index: 2; }

.userccount {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 48px rgba(61,95,132,.12);
  padding: 40px 36px;
  margin-bottom: 0;
}
.userccount.whitebg { background: var(--white); }

/* ── Page heading ──────────────────────────── */
.userccount h5 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
  text-align: center;
}

/* Auth type label pill */
.auth-type-label {
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-xlight);
  padding: 4px 16px;
  border-radius: 20px;
  margin: 0 auto 20px;
  width: fit-content;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ── Social Login Buttons ──────────────────── */
.socialLogin {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 0;
}
.socialLogin a {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--white);
  font-size: 20px;
  transition: all var(--transition);
  color: var(--text);
  padding: 0;
  margin: 0;
}
.socialLogin a svg { width: 20px; height: 20px; fill: currentColor; }
.socialLogin a.gp { color: #ea4335; }
.socialLogin a.fb { color: #1877f2; }
.socialLogin a.tw { color: #1a1a1a; }
.socialLogin a:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  border-color: transparent;
}
.socialLogin a.gp:hover { background: #fef2f2; }
.socialLogin a.fb:hover { background: #eff6ff; }
.socialLogin a.tw:hover { background: #f5f5f5; }

/* ── Divider ───────────────────────────────── */
.divider-text-center {
  position: relative;
  text-align: center;
  margin-bottom: 22px;
  display: block;
}
.divider-text-center::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--border);
  z-index: 1;
}
.divider-text-center span {
  display: inline-block;
  position: relative;
  z-index: 2;
  background: var(--white);
  padding: 0 16px;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ── Form Panel ────────────────────────────── */
.formpanel { padding: 0; margin-top: 0; }
.formpanel .formrow { margin-bottom: 16px; }

.formpanel .form-control {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 14px;
  height: auto;
  color: var(--text);
  background: #f8fafc;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.formpanel .form-control:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(61,95,132,.1);
  background: var(--white);
}
.formpanel .form-control::placeholder { color: #9aa5b8; font-size: 13px; }

/* Forgot password link row */
.formpanel .mb-3 {
  font-size: 13px;
  color: var(--text-muted);
}
.formpanel .mb-3 a {
  color: var(--brand);
  font-weight: 600;
}
.formpanel .mb-3 a:hover { text-decoration: underline; }
.formpanel .mb-3 i { color: var(--text-muted); margin-right: 4px; }

/* Submit button */
.formpanel .btn,
.formpanel input[type="submit"].btn {
  width: 100%;
  background: var(--brand);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  padding: 13px 20px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(61,95,132,.3);
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
  letter-spacing: 0.3px;
}
.formpanel .btn:hover,
.formpanel input[type="submit"].btn:hover {
  background: var(--brand-dark);
  box-shadow: 0 6px 24px rgba(61,95,132,.4);
  transform: translateY(-1px);
}

/* Error messages */
.formpanel .formrow .help-block {
  color: #e53e3e;
  font-size: 12px;
  margin-top: 6px;
  display: block;
}

/* ── New User / Register Link ──────────────── */
.newuser {
  margin-top: 24px;
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.newuser a {
  color: var(--brand);
  font-weight: 700;
}
.newuser a:hover { text-decoration: underline; }
.newuser i { margin-right: 4px; color: var(--text-muted); }

/* ── Switch link (candidate ↔ employer) ────── */
.auth-switch {
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-muted);
}
.auth-switch a {
  color: var(--brand);
  font-weight: 600;
  text-decoration: underline;
}

/* ── Responsive ────────────────────────────── */
@media (max-width: 767px) {
  .authpages { padding: 36px 16px; }
  .userccount { padding: 28px 20px; }
  .socialLogin a { width: 46px; height: 46px; }
}

/*==============================================
  36. Dashboard Pages (Candidate + Company)
===============================================*/

/* ── Sidebar Nav ───────────────────────────── */
.usernavwrap {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 8px;
  margin-bottom: 24px;
  overflow: hidden;
}
.usernavdash { list-style: none; padding: 0; margin: 0; }
.usernavdash li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  text-decoration: none;
}
.usernavdash li a i { width: 18px; text-align: center; color: var(--brand); font-size: 14px; }
.usernavdash li a:hover {
  background: var(--brand-xlight);
  color: var(--brand);
}
.usernavdash li.active a {
  background: var(--brand);
  color: var(--white);
  font-weight: 600;
  box-shadow: 0 3px 10px rgba(61,95,132,.25);
}
.usernavdash li.active a i { color: var(--white); }

/* ── Featured Profile Card (sidebar) ──────── */
.featuredprofile {
  background: linear-gradient(145deg, var(--brand) 0%, var(--brand-dark) 100%);
  border: none;
  border-top: none;
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  margin-bottom: 24px;
  box-shadow: 0 8px 32px rgba(61,95,132,.25);
  color: var(--white);
}
.featuredprofile.purchased {
  background: linear-gradient(145deg, #2d8a4e 0%, #1a6b36 100%);
  border-top: none;
}
.packginfor h5 {
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 8px;
}
.packginfor h5 i { color: var(--accent); margin-right: 6px; }
.packginfor p { color: rgba(255,255,255,.75); font-size: 13px; line-height: 1.5; }
.featuredprofile .featprice {
  font-size: 32px;
  font-weight: 800;
  color: var(--accent);
  padding: 10px 0;
}
.featuredprofile .featprice span {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,.7);
  margin-left: 6px;
}

/* Feature list */
.pckfeatlist { list-style: none; padding: 0; margin: 14px 0 0; }
.pckfeatlist li {
  font-size: 13px;
  color: rgba(255,255,255,.9);
  padding: 5px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pckfeatlist li i { color: var(--accent); width: 16px; font-size: 12px; flex-shrink: 0; }

/* Payment order buttons */
.featuredprofile .order { margin-top: 20px; padding: 0; }
.featuredprofile .order a {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
  transition: all var(--transition);
  box-shadow: var(--shadow-sm);
}
.featuredprofile .order a:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.featuredprofile .order a img { width: 28px; height: 28px; border-radius: 6px; }

/* ── Stats Row ─────────────────────────────── */
.profilestat { list-style: none; padding: 0; margin: 0 0 24px; }
.profilestat li .inbox {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
  transition: all var(--transition);
  text-decoration: none;
}
.profilestat li .inbox:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  background: var(--white);
}
.profilestat li i {
  font-size: 22px;
  color: var(--brand);
  background: var(--brand-xlight);
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.profilestat li h6 {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  line-height: 1.2;
}
.profilestat li h6 strong {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

/* ── Cover Photo ───────────────────────────── */
.usercoverphoto {
  position: relative;
  height: 280px;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
}
.usercoverphoto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.usercoverphoto a {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--white);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  z-index: 3;
  transition: all var(--transition);
}
.usercoverphoto a:hover { background: var(--brand); color: var(--white); }

/* ── Profile Banner (below cover) ──────────── */
.profileban {
  position: relative;
  margin-top: -60px;
  z-index: 2;
}
.abtuser {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin: 0 24px 24px;
  box-shadow: var(--shadow-md);
}
.abtuser h4 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}
.uavatar img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 3px solid var(--white);
  box-shadow: 0 4px 16px rgba(61,95,132,.2);
}
.userdata { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 16px; }
.userdata li {
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.userdata li i { color: var(--brand); font-size: 12px; width: 14px; }

/* ── User Cover Image (public profile) ────── */
.usercoverimg {
  position: relative;
  height: 220px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.usercoverimg img { width: 100%; height: 100%; object-fit: cover; }

/* User Main Info (below cover on public profile) */
.userMaininfo {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-top: none;
  padding: 20px 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.userMaininfo .userPic {
  width: 90px;
  height: 90px;
  flex: 0 0 90px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--white);
  box-shadow: 0 4px 16px rgba(61,95,132,.2);
  background: var(--white);
  margin-top: -30px;
  position: relative;
  z-index: 3;
}
.userMaininfo .userPic img { width: 100%; height: 100%; object-fit: cover; }
.userMaininfo h3 { color: var(--text); font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.userMaininfo h3 span { font-size: 13px; font-weight: 500; color: var(--text-muted); }
.userMaininfo .desi { font-size: 13px; color: var(--text-muted); }
.userMaininfo .desi i { color: var(--brand); margin-right: 4px; }
.redyto {
  margin-bottom: 6px;
}
.redyto span {
  background: #dcfce7;
  color: #16a34a;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 12px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.membersinc { color: var(--text-muted); font-size: 13px; margin-top: 6px; }
.membersinc i { color: var(--brand); margin-right: 4px; }

/* User links / actions bar */
.userlinkstp {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-top: none;
  padding: 16px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  margin-bottom: 24px;
}
.userlinkstp a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--brand);
  color: var(--brand);
  background: var(--white);
  transition: all var(--transition);
  text-decoration: none;
}
.userlinkstp a:hover {
  background: var(--brand);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(61,95,132,.2);
}
.userlinkstp a.report { border-color: #e53e3e; color: #e53e3e; }
.userlinkstp a.report:hover { background: #e53e3e; color: var(--white); }
.userlinkstp a.apply {
  background: var(--brand);
  color: var(--white);
  font-size: 15px;
  padding: 10px 24px;
}
.userlinkstp a.apply:hover { background: var(--brand-dark); }

/* ── Applied Jobs Table ────────────────────── */
.appliedjobswrap {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}
.appliedjobswrap h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--brand-xlight);
}
.appliedjobswrap table { border: none; margin: 0; }
.appliedjobswrap .table thead th {
  background: var(--brand);
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: none;
  padding: 12px 14px;
}
.appliedjobswrap .table tbody td {
  font-size: 13px;
  padding: 12px 14px;
  vertical-align: middle;
  color: var(--text);
  border-color: var(--border);
}
.appliedjobswrap .table tbody tr:hover { background: var(--brand-xlight); }

/* ── User Profile Alert ────────────────────── */
.userprofilealert {
  background: linear-gradient(90deg, #fff3cd, #fff9e6);
  border: 1.5px solid #f5c518;
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 14px 20px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  animation: none;
}
.userprofilealert h5 {
  color: #856404;
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.userprofilealert h5 i { font-size: 18px; color: #e9a100; }

/* ── Free Package Box ──────────────────────── */
.freepackagebox {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  display: flex;
  gap: 20px;
  align-items: center;
  margin-bottom: 24px;
  animation: none;
}
.freepackagebox h5, .freepackagebox p { color: var(--white); margin: 0; }
.freepackagebox h5 { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.freepackagebox p { font-size: 14px; color: rgba(255,255,255,.8); }
.freepackagebox a {
  margin-left: auto;
  background: var(--white);
  color: var(--brand);
  border-radius: var(--radius-sm);
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: all var(--transition);
  box-shadow: var(--shadow-sm);
}
.freepackagebox a:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* ── Hire Modal ────────────────────────────── */
.mypremodal .modal-content {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0,0,0,.2);
  overflow: hidden;
}
.mypremodal .btn-close { position: absolute; right: 14px; top: 14px; z-index: 10; }
.preuserinfo {
  padding: 36px 28px;
  text-align: center;
}
.preuserinfo h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 10px;
}
.preuserinfo p { color: var(--text-muted); font-size: 14px; }
.preuserinfo .btn-yellow {
  background: var(--brand);
  color: var(--white);
  padding: 10px 28px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  border: none;
}
.preuserinfo .btn-yellow:hover { background: var(--brand-dark); }
.preuserinfo .btn-dark {
  background: var(--text);
  color: var(--white);
  padding: 10px 28px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  border: none;
}
/* Seekerbox on list page already styled in section C */

/* ── User detail boxes ─────────────────────── */
.userdetailbox {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}
.userdetailbox h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--brand-xlight);
  margin-bottom: 14px;
}
.userdetailbox p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-muted);
}
.userdetailbox iframe { width: 100%; height: 300px; border: none; border-radius: var(--radius-sm); }

/* Skills list */
ul.skillslist li a {
  background: var(--brand-xlight);
  color: var(--brand);
  padding: 8px 18px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  transition: all var(--transition);
}
ul.skillslist li a:hover { background: var(--brand); color: var(--white); }

/* Education timeline */
.educationList li .exdot { background: var(--brand); }
.educationList li .expbox::before { background: var(--brand-xlight); }
.educationList li:hover { border-bottom-color: var(--brand); }

/* ── Responsive ────────────────────────────── */
@media (max-width: 991px) {
  .abtuser { margin: 0 12px 20px; padding: 18px; }
  .usercoverphoto { height: 200px; }
  .profileban { margin-top: -40px; }
}
@media (max-width: 767px) {
  .profilestat li .inbox { padding: 14px 16px; gap: 10px; }
  .profilestat li h6 { font-size: 22px; }
  .profilestat li i { width: 40px; height: 40px; font-size: 18px; }
  .abtuser { margin: 0 8px 16px; }
  .userdata { flex-direction: column; gap: 8px; }
  .usercoverphoto { height: 160px; }
  .userMaininfo { flex-direction: column; align-items: center; text-align: center; }
  .userMaininfo .userPic { margin-top: -40px; }
  .userlinkstp { justify-content: center; }
  .freepackagebox { flex-direction: column; text-align: center; }
  .freepackagebox a { margin-left: 0; }
}

/*==============================================
  37. Pricing / Job Packages
===============================================*/

.paypackages { margin-bottom: 30px; }

.four-plan h3,
.three-plan h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  padding-bottom: 12px;
  border-bottom: 2px solid var(--brand-xlight);
  margin-bottom: 4px;
}

/* ── Package Card ──────────────────────────── */
.four-plan .boxes,
.three-plan .boxes {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  margin-top: 20px;
  list-style: none;
  transition: all var(--transition);
  position: relative;
}
.four-plan .boxes:hover,
.three-plan .boxes:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

/* Remove the ugly yellow nth-child highlight */
.four-plan .row div:nth-child(2) .boxes,
.three-plan .row div:nth-child(2) .boxes {
  background: var(--white) !important;
  border: 2px solid var(--brand) !important;
  box-shadow: 0 8px 32px rgba(61,95,132,.15);
}
/* Popular badge for 2nd card */
.four-plan .row div:nth-child(2) .boxes::before,
.three-plan .row div:nth-child(2) .boxes::before {
  content: 'Popular';
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--brand);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 20px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.four-plan .row div:nth-child(2) .boxes .plan-pages i:not(.fa-times-circle),
.three-plan .row div:nth-child(2) .boxes .plan-pages i:not(.fa-times-circle) {
  color: var(--brand) !important;
}

/* ── Plan name ─────────────────────────────── */
.four-plan .plan-name,
.three-plan .plan-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  padding: 0;
  margin-bottom: 4px;
}

/* ── Price ──────────────────────────────────── */
.main-plan {
  padding: 16px 0;
  margin-bottom: 16px;
  border-bottom: 1.5px solid var(--border);
}
.main-plan .plan-price1-1 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  display: inline;
  vertical-align: baseline;
}
.main-plan .plan-price1-2 {
  font-size: 36px;
  font-weight: 800;
  color: var(--brand);
  display: inline;
}

/* ── Feature lines ─────────────────────────── */
.plan-pages {
  font-size: 13px;
  color: var(--text);
  padding: 8px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.5;
}
.plan-pages i {
  color: var(--brand) !important;
  font-size: 14px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  margin-right: 0;
}
.plan-pages i.fa-times-circle { color: #e53e3e !important; }
.plan-pages.noadded { color: var(--text-muted); }

/* ── Buy button ────────────────────────────── */
.order { padding-top: 20px; }
.order a {
  background: var(--white);
  border: 1.5px solid var(--brand) !important;
  border-radius: 50px;
  padding: 8px 8px 8px 24px;
  color: var(--brand);
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  transition: all var(--transition);
  text-decoration: none;
}
.order a i {
  background: var(--brand);
  color: var(--white);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transform: rotate(-45deg);
  transition: transform var(--transition);
}
.order a:hover {
  background: var(--brand);
  color: var(--white);
  border-color: var(--brand) !important;
  box-shadow: 0 4px 16px rgba(61,95,132,.35);
}
.order a:hover i { transform: rotate(0deg); background: var(--white); color: var(--brand); }
.order a::before { display: none !important; } /* Remove the ugly blob animation */

/* Popular card buy button: filled by default */
.four-plan .row div:nth-child(2) .boxes .order a,
.three-plan .row div:nth-child(2) .boxes .order a {
  background: var(--brand) !important;
  color: var(--white) !important;
  border-color: var(--brand) !important;
}
.four-plan .row div:nth-child(2) .boxes .order a:hover,
.three-plan .row div:nth-child(2) .boxes .order a:hover {
  background: var(--brand-dark) !important;
  box-shadow: 0 6px 20px rgba(61,95,132,.45);
}

/* ── Payment Modal ─────────────────────────── */
.invitereval { padding: 28px; text-align: center; }
.invitereval h3 { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.totalpay {
  font-size: 16px;
  padding: 14px 0;
  color: var(--text);
}
.totalpay strong { color: var(--brand); font-weight: 700; }

.btn2s { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.btn2s li { display: inline-block; }
.btn2s li a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brand);
  color: var(--white);
  padding: 10px 24px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  transition: all var(--transition);
}
.btn2s li a:hover { background: var(--brand-dark); }

/* ── Current Plan Indicator ────────────────── */
.current-plan-box {
  border: 2px solid var(--success) !important;
  box-shadow: 0 4px 20px rgba(43, 171, 79, .12);
}
.current-plan-badge {
  text-align: center;
  padding: 0 0 4px !important;
}
.badge-current {
  display: inline-block;
  background: var(--success);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 16px;
  border-radius: 20px;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.current-plan-btn {
  background: var(--success);
  border: 1.5px solid var(--success) !important;
  border-radius: 50px;
  padding: 8px 24px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: default;
}
.btn2s li a i { font-size: 20px; }

/* ── Responsive ────────────────────────────── */
@media (max-width: 767px) {
  .four-plan .boxes, .three-plan .boxes { padding: 22px 18px; }
  .main-plan .plan-price1-2 { font-size: 28px; }
}

/*==============================================
  38. Kanban Board
===============================================*/

/* ── Board Layout ──────────────────────────── */
.kanban-board {
  display: flex;
  gap: 16px;
  padding: 0;
}

/* ── Page heading ──────────────────────────── */
.listpgWraper .kanban-board ~ h3,
.listpgWraper > .container > h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

/* ── Columns ───────────────────────────────── */
.kanban-board .column {
  width: 25%;
  border-radius: var(--radius-lg);
  padding: 0;
  height: 750px;
  overflow: hidden;
  overflow-y: auto;
  border: 1px solid var(--border);
  background: var(--white);
  transition: box-shadow var(--transition);
}
.kanban-board .column:hover {
  box-shadow: var(--shadow-md);
}

/* Column header strip */
.kanban-board .column h2 {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin: 0;
  padding: 14px 18px;
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.kanban-board .column h2::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Column-specific theming */
#applied {
  background: #f0f4fa !important;
}
#applied h2 {
  background: #e1e9f5;
  color: var(--brand);
}
#applied h2::before { background: var(--brand); }

#rejected {
  background: #fdf2f4 !important;
}
#rejected h2 {
  background: #fce4e8;
  color: #c53030;
}
#rejected h2::before { background: #e53e3e; }

#shortlist {
  background: #fef9ee !important;
}
#shortlist h2 {
  background: #fef0cd;
  color: #b7791f;
}
#shortlist h2::before { background: #d69e2e; }

#hired {
  background: #f0faf0 !important;
}
#hired h2 {
  background: #dcf5dc;
  color: #276749;
}
#hired h2::before { background: #38a169; }

/* ── Scrollbar ─────────────────────────────── */
.kanban-board .column::-webkit-scrollbar { width: 5px; }
.kanban-board .column::-webkit-scrollbar-track { background: transparent; }
.kanban-board .column::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 10px; }
.kanban-board .column::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.25); }

/* ── Task Cards ────────────────────────────── */
.kanban-board .task {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 12px 12px 0;
  cursor: grab;
  transition: all .2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.kanban-board .task:last-child { margin-bottom: 12px; }
.kanban-board .task:hover {
  border-color: var(--brand);
  box-shadow: 0 4px 12px rgba(61,95,132,.12);
  transform: translateY(-2px);
}

/* Subtle left accent per column */
#applied .task  { border-left: 3px solid var(--brand); }
#rejected .task { border-left: 3px solid #e53e3e; background: #fff; }
#shortlist .task { border-left: 3px solid #d69e2e; background: #fff; }
#hired .task    { border-left: 3px solid #38a169; background: #fff; }

.kanban-board .task.dragging {
  opacity: 0.5;
  border: 2px dashed var(--brand);
  box-shadow: none;
  transform: rotate(2deg);
}

/* Task content */
.kanban-board .task h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px;
  line-height: 1.3;
}
.kanban-board .task .location,
.kanban-board .task .minsalary {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  display: flex;
  align-items: center;
  gap: 5px;
}
.kanban-board .task .location i,
.kanban-board .task .minsalary i {
  color: var(--brand) !important;
  font-size: 12px;
  width: 14px;
  text-align: center;
}

/* ── Action bar (View Profile + move btns) ── */
.kanban-board .jobskrbtnact {
  border-top: 1px solid var(--border);
  margin-top: 12px;
  padding-top: 10px;
}
.kanban-board .profbtn {
  background: var(--brand) !important;
  color: var(--white) !important;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 50px;
  text-decoration: none;
  transition: all var(--transition);
}
.kanban-board .profbtn:hover {
  background: var(--brand-dark) !important;
  box-shadow: 0 2px 8px rgba(61,95,132,.3);
}

.kanban-board .move-btn {
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-muted);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--transition);
  line-height: 1;
}
.kanban-board .move-btn:hover {
  background: var(--brand-xlight);
  color: var(--brand);
  border-color: var(--brand);
}

/* ── Dragula Mirror ────────────────────────── */
.gu-mirror {
  padding: 14px 16px;
  background: var(--white);
  border: 2px solid var(--brand);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  opacity: 0.9;
}

/* ── No Data Box in Kanban ─────────────────── */
.kanban-board .nodatabox {
  text-align: center;
  padding: 40px 16px;
  color: var(--text-muted);
}
.kanban-board .nodatabox h4 {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
}

/* ── Responsive ────────────────────────────── */
@media (max-width: 991px) {
  .kanban-board {
    flex-wrap: wrap;
    gap: 12px;
  }
  .kanban-board .column {
    width: calc(50% - 6px);
    height: 500px;
  }
}
@media (max-width: 600px) {
  .kanban-board {
    flex-direction: column;
  }
  .kanban-board .column {
    width: 100%;
    height: 400px;
  }
}

/*==============================================
  39. Meetings Page
===============================================*/

/* ── Header row ────────────────────────────── */
.userdboard .meeting-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}
.userdboard .meeting-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.userdboard .meeting-header h3 i {
  color: var(--brand);
  font-size: 18px;
}
.userdboard .meeting-header .meeting-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* ── Top action buttons (same size) ────────── */
.userdboard .meeting-actions .btn-meeting {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  line-height: 1.4;
}
.userdboard .btn-meeting-schedule {
  background: var(--brand);
  color: var(--white);
}
.userdboard .btn-meeting-schedule:hover {
  background: var(--brand-dark);
  color: var(--white);
  box-shadow: 0 4px 14px rgba(61,95,132,.35);
}
.userdboard .btn-meeting-instant {
  background: #38a169;
  color: var(--white);
}
.userdboard .btn-meeting-instant:hover {
  background: #2f855a;
  color: var(--white);
  box-shadow: 0 4px 14px rgba(56,161,105,.35);
}

/* ── Meetings Table ────────────────────────── */
.userdboard .meetings-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 13px;
}
.userdboard .meetings-table thead th {
  background: var(--brand);
  color: var(--white);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 14px;
  border: none;
  white-space: nowrap;
}
.userdboard .meetings-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text);
}
.userdboard .meetings-table tbody tr:last-child td {
  border-bottom: none;
}
.userdboard .meetings-table tbody tr:hover {
  background: var(--brand-xlight);
}
.userdboard .meetings-table tbody tr:nth-child(even) {
  background: #fafbfc;
}
.userdboard .meetings-table tbody tr:nth-child(even):hover {
  background: var(--brand-xlight);
}

/* ── Status Badges ─────────────────────────── */
.userdboard .meeting-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.userdboard .meeting-badge-live {
  background: #f0fff4;
  color: #276749;
  border: 1px solid #c6f6d5;
}
.userdboard .meeting-badge-live i { color: #38a169; font-size: 7px; animation: livePulse 1.5s infinite; }
@keyframes livePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.userdboard .meeting-badge-scheduled {
  background: #ebf8ff;
  color: #2b6cb0;
  border: 1px solid #bee3f8;
}
.userdboard .meeting-badge-ended {
  background: #f7fafc;
  color: #718096;
  border: 1px solid #e2e8f0;
}

/* ── Copy Link Group ───────────────────────── */
.userdboard .meeting-link-group {
  display: flex;
  align-items: center;
  max-width: 200px;
}
.userdboard .meeting-link-group input {
  font-size: 11px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: #f7fafc;
  color: var(--text-muted);
  height: 32px;
  min-width: 0;
}
.userdboard .meeting-link-group .btn-copy {
  border: 1px solid var(--border);
  border-left: none;
  background: var(--white);
  color: var(--text-muted);
  padding: 0 10px;
  height: 32px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: all var(--transition);
  font-size: 13px;
}
.userdboard .meeting-link-group .btn-copy:hover {
  background: var(--brand-xlight);
  color: var(--brand);
  border-color: var(--brand);
}

/* ── Action Buttons (uniform size) ─────────── */
.userdboard .meeting-action-btns {
  display: flex;
  align-items: center;
  gap: 6px;
}
.userdboard .meeting-action-btns .btn-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  line-height: 1.4;
  white-space: nowrap;
  height: 32px;
}
.userdboard .btn-act-join {
  background: var(--brand);
  color: var(--white);
}
.userdboard .btn-act-join:hover {
  background: var(--brand-dark);
  color: var(--white);
  box-shadow: 0 2px 8px rgba(61,95,132,.3);
}
.userdboard .btn-act-view {
  background: #edf2f7;
  color: var(--text);
  border: 1px solid var(--border);
}
.userdboard .btn-act-view:hover {
  background: var(--brand-xlight);
  color: var(--brand);
  border-color: var(--brand);
}
.userdboard .btn-act-delete {
  background: #fff5f5;
  color: #e53e3e;
  border: 1px solid #fed7d7;
}
.userdboard .btn-act-delete:hover {
  background: #e53e3e;
  color: var(--white);
}

/* ── Empty State ───────────────────────────── */
.userdboard .meetings-empty {
  text-align: center;
  padding: 60px 20px;
}
.userdboard .meetings-empty i {
  font-size: 52px;
  color: var(--border);
  margin-bottom: 16px;
}
.userdboard .meetings-empty h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.userdboard .meetings-empty p {
  font-size: 13px;
  color: var(--text-muted);
}

/* ── Responsive ────────────────────────────── */
@media (max-width: 767px) {
  .userdboard .meeting-header { flex-direction: column; align-items: flex-start; }
  .userdboard .meeting-actions { width: 100%; }
  .userdboard .meeting-actions .btn-meeting { flex: 1; justify-content: center; padding: 8px 12px; font-size: 12px; }
  .userdboard .meeting-link-group { max-width: 140px; }
  .userdboard .meeting-action-btns { flex-wrap: wrap; }
}