/* ============================================================
   HOMEPAGE REFRESH — SkillBee Global
   Additive overrides loaded AFTER main.css. No existing CSS modified.
   ============================================================ */

/* --- Design Tokens --- */
:root {
  --sb-primary: #0052CC;
  --sb-primary-dark: #003d99;
  --sb-primary-light: #e6f0ff;
  --sb-accent: #F5A623;
  --sb-accent-light: #FFF3D6;
  --sb-dark: #0F1B2D;
  --sb-surface: #F7F8FA;
  --sb-success: #10B981;
  --sb-text: #1A1D23;
  --sb-text-muted: #5F6B7A;
  --sb-employer: #00C853;
  --sb-radius: 12px;
  --sb-shadow-sm: 0 1px 3px rgba(15,27,45,0.08);
  --sb-shadow-md: 0 4px 16px rgba(15,27,45,0.10);
  --sb-shadow-lg: 0 8px 32px rgba(15,27,45,0.12);
  --sb-font-heading: 'Plus Jakarta Sans', 'Montserrat', sans-serif;
  --sb-font-body: 'DM Sans', 'Open Sans', sans-serif;
}

/* --- Typography Override --- */
body,
body p,
body a,
body li,
body input,
body select,
body textarea,
body .form-control,
body label {
  font-family: var(--sb-font-body);
}

h1, h2, h3, h4, h5, h6,
body .titleTop h3,
body .bxsrctxt h2,
body .bxsrctxt h3,
body .howlist h4,
body .section h3,
body .slidertext1,
body .page-title {
  font-family: var(--sb-font-heading);
}

/* --- Global Button Transitions --- */
body .btn,
body a.btn {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Scroll Reveal --- */
.sb-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.sb-animate.sb-visible {
  opacity: 1;
  transform: translateY(0);
}
.sb-animate:nth-child(2) { transition-delay: 0.1s; }
.sb-animate:nth-child(3) { transition-delay: 0.15s; }
.sb-animate:nth-child(4) { transition-delay: 0.2s; }


/* ============================================================
   HEADER
   ============================================================ */
body .header#siteheader {
  background: var(--sb-dark) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.15);
}
body .header .navbar-nav .nav-item .nav-link {
  font-family: var(--sb-font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
  transition: color 0.2s, border-color 0.2s;
  border-bottom: 3px solid transparent;
  padding-bottom: 6px;
}
body .header .navbar-nav .nav-item.active .nav-link,
body .header .navbar-nav .nav-item .nav-link:hover {
  color: var(--sb-accent) !important;
  border-bottom-color: var(--sb-accent);
  background: transparent !important;
}
body .header .navbar-nav .nav-item .nav-link.register {
  background: var(--sb-accent) !important;
  color: var(--sb-dark) !important;
  border-radius: 8px !important;
  padding: 8px 20px !important;
  font-weight: 600;
  border-bottom: none;
  margin-left: 6px;
}
body .header .navbar-nav .nav-item .nav-link.register:hover {
  background: #e6961e !important;
  transform: translateY(-1px);
}
body .header .dropdown-menu {
  border-radius: 12px;
  box-shadow: var(--sb-shadow-lg);
  border: 1px solid rgba(0,0,0,0.06);
  overflow: hidden;
}
body .header .dropdown-menu .dropdown-item {
  font-family: var(--sb-font-body);
  font-size: 13px;
  padding: 10px 18px;
  transition: background 0.2s;
}
body .header .dropdown-menu .dropdown-item:hover {
  background: var(--sb-primary-light);
  color: var(--sb-primary);
}


/* ============================================================
   HERO — Non-slider (split panel override)
   ============================================================ */
body .searchwrap {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 85vh;
  background: linear-gradient(135deg, var(--sb-dark) 0%, var(--sb-primary-dark) 50%, var(--sb-primary) 100%) !important;
  position: relative;
  overflow: hidden;
  padding: 60px 20px 80px;
  text-align: center;
}
/* Animated blob overlays */
body .searchwrap::before {
  content: '';
  position: absolute;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,166,35,0.12), transparent 70%);
  top: -200px;
  right: -150px;
  animation: sbBlobFloat 20s ease-in-out infinite;
  pointer-events: none;
}
body .searchwrap::after {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.06), transparent 70%);
  bottom: -150px;
  left: -100px;
  animation: sbBlobFloat 25s ease-in-out infinite reverse;
  pointer-events: none;
}
@keyframes sbBlobFloat {
  0%,100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -50px) scale(1.05); }
  66% { transform: translate(-20px, 20px) scale(0.95); }
}

/* Flatten the split panels into a single centered layout */
body .searchwrap .srjobseeker,
body .searchwrap .srcompanies {
  position: static !important;
  width: 100% !important;
  float: none !important;
  background: transparent !important;
  padding: 0 !important;
}
body .searchwrap .srjobseeker::before,
body .searchwrap .srjobseeker::after,
body .searchwrap .srcompanies::before,
body .searchwrap .srcompanies::after {
  display: none !important;
}
/* Hide the employer panel — keep only one message */
body .searchwrap .srcompanies {
  display: none !important;
}
body .searchwrap .srjobseeker .bxsrctxt {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}
body .searchwrap .srjobseeker .bxsrctxt h2 {
  font-family: var(--sb-font-heading);
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 600;
  color: rgba(255,255,255,0.7) !important;
  margin-bottom: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
body .searchwrap .srjobseeker .bxsrctxt h2 i {
  display: none;
}
body .searchwrap .srjobseeker .bxsrctxt h3 {
  font-family: var(--sb-font-heading);
  font-size: clamp(2rem, 5vw, 3.2rem) !important;
  font-weight: 800;
  color: #fff !important;
  margin-bottom: 16px;
  line-height: 1.15;
}
body .searchwrap .srjobseeker .bxsrctxt p {
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: rgba(255,255,255,0.75) !important;
  margin-bottom: 30px;
  line-height: 1.6;
}
body .searchwrap .srjobseeker .bxsrctxt .btn {
  background: var(--sb-accent) !important;
  color: var(--sb-dark) !important;
  border: none !important;
  border-radius: 24px !important;
  padding: 14px 36px !important;
  font-weight: 700 !important;
  font-size: 15px;
  text-transform: none;
  box-shadow: 0 4px 20px rgba(245,166,35,0.35);
}
body .searchwrap .srjobseeker .bxsrctxt .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(245,166,35,0.5);
}


/* --- Stats bar (floats up into hero) --- */
body .statsbox {
  background: #fff !important;
  border-radius: 16px;
  box-shadow: var(--sb-shadow-lg);
  max-width: 800px;
  margin: -50px auto 40px !important;
  position: relative;
  z-index: 5;
  padding: 24px 32px !important;
}
body .statsbox .statint {
  align-items: center;
  gap: 12px;
}
body .statsbox .statico {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 12px;
  background: var(--sb-primary-light) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
body .statsbox .statico i {
  font-size: 20px;
  color: var(--sb-primary) !important;
}
body .statsbox .statinfo h4 {
  font-family: var(--sb-font-heading);
  font-weight: 800;
  color: var(--sb-text);
  font-size: 24px;
  margin: 0;
  line-height: 1;
}
body .statsbox .statinfo p {
  font-size: 13px;
  color: var(--sb-text-muted);
  margin: 2px 0 0;
}


/* --- Search bar (non-slider) --- */
body .searchbarbt {
  background: var(--sb-surface) !important;
  padding: 0 0 40px !important;
  margin-top: 0 !important;
}
body .searchbarbt h3 {
  font-family: var(--sb-font-heading);
  font-weight: 700;
  color: var(--sb-text);
  margin-bottom: 16px;
}
body .searchbarbt .searchbar {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--sb-shadow-md);
  padding: 6px;
  border: 1px solid #e8eaed;
}
body .searchbarbt .searchbar .form-control {
  border: none;
  box-shadow: none;
  height: 48px;
  font-size: 14px;
}
body .searchbarbt .searchbar .btn {
  background: var(--sb-primary) !important;
  color: #fff !important;
  border-radius: 10px !important;
  height: 44px;
  width: 52px;
  margin: 2px;
}
body .searchbarbt .searchbar .btn:hover {
  background: var(--sb-primary-dark) !important;
}

/* --- Slider path search bar override --- */
body .slidersearch .searchbar {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--sb-shadow-lg);
  padding: 6px;
}
body .slidersearch .searchbar .form-control {
  border: none;
  box-shadow: none;
  height: 48px;
}
body .slidersearch .searchbar .btn {
  background: var(--sb-primary) !important;
  color: #fff !important;
  border-radius: 10px !important;
  height: 44px;
}


/* ============================================================
   SECTION TITLES
   ============================================================ */
body .titleTop h3 {
  font-family: var(--sb-font-heading);
  font-weight: 700;
  color: var(--sb-text);
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  position: relative;
  margin-bottom: 8px;
}
body .titleTop .subtitle {
  font-family: var(--sb-font-body);
  color: var(--sb-primary);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}


/* ============================================================
   FEATURED COMPANIES
   ============================================================ */
body .employerList .empint {
  border: 1px solid #e8eaed;
  border-radius: 14px;
  background: #fff;
  transition: all 0.3s ease;
  overflow: hidden;
}
body .employerList .empint:hover {
  box-shadow: var(--sb-shadow-md);
  transform: translateY(-3px);
  border-color: var(--sb-primary-light);
}
body .employerList .empint h4 {
  font-family: var(--sb-font-heading);
  font-weight: 600;
}


/* ============================================================
   CATEGORIES
   ============================================================ */
body .catecard {
  border: 1px solid #e8eaed !important;
  border-radius: 16px !important;
  background: #fff !important;
  padding: 20px 14px !important;
  text-align: center;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  transition: all 0.3s ease;
}
body .catecard:hover {
  border-color: var(--sb-primary) !important;
  box-shadow: var(--sb-shadow-md);
  transform: translateY(-3px);
}
body .catecard .iconcircle {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--sb-primary-light) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  transition: transform 0.3s;
  overflow: hidden;
}
body .catecard:hover .iconcircle {
  transform: scale(1.08);
}
body .catecard .iconcircle img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
body .catecard .catedata h3 {
  font-family: var(--sb-font-heading) !important;
  font-weight: 600;
  font-size: 14px !important;
  color: var(--sb-text);
  margin-bottom: 6px;
}
body .catecard .badge {
  background: var(--sb-accent-light) !important;
  color: var(--sb-accent) !important;
  font-size: 11px;
  border-radius: 20px;
  padding: 4px 12px;
  font-weight: 600;
}

/* Categories: show only first 8, then expand.
   Use li[class] to target real <li> elements with col classes,
   not whitespace or conditional comment nodes */
body .categorylisting > li.col-lg-3 {
  display: none;
}
body .categorylisting > li.col-lg-3:nth-of-type(-n+8) {
  display: block;
}
body .categorylisting.sb-expanded > li.col-lg-3,
.sb-show-all .categorylisting > li.col-lg-3,
.topsearchwrap.sb-show-all .categorylisting > li.col-lg-3 {
  display: block !important;
}

/* View All button refinement */
body .viewallbtn a {
  font-family: var(--sb-font-heading);
  font-weight: 600;
  font-size: 14px;
  color: var(--sb-primary) !important;
  border: 2px solid var(--sb-primary);
  border-radius: 24px;
  padding: 10px 28px;
  display: inline-block;
  transition: all 0.3s;
  background: transparent;
}
body .viewallbtn a:hover {
  background: var(--sb-primary);
  color: #fff !important;
}


/* ============================================================
   FEATURED JOBS — Remove decorative blobs
   ============================================================ */
body .featuredjobwrap::before,
body .featuredjobwrap::after {
  display: none !important;
}
body .featuredjobwrap {
  overflow: visible;
}

/* Job cards hover lift */
body .jobint {
  border: 1px solid #e8eaed;
  border-radius: 14px;
  background: #fff;
  transition: all 0.3s ease;
}
body .jobint:hover {
  box-shadow: var(--sb-shadow-md);
  transform: translateY(-3px);
}


/* ============================================================
   HOW IT WORKS
   ============================================================ */
body .howitsection {
  background: var(--sb-surface) !important;
}
body .howitsection .howitwrap {
  padding: 50px 0;
}
body .howlist li {
  margin-bottom: 28px;
}
body .howlist li .iconcircle {
  width: 60px;
  min-width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--sb-primary) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,82,204,0.25);
}
body .howlist li .iconcircle i {
  font-size: 22px;
  color: #fff !important;
}
body .howlist h4 {
  font-family: var(--sb-font-heading);
  font-weight: 700;
  font-size: 17px;
  color: var(--sb-text);
  margin-bottom: 4px;
}
body .howlist p {
  font-size: 14px;
  color: var(--sb-text-muted);
  line-height: 1.6;
}


/* ============================================================
   DUAL CTA (infodatawrap — userloginbox + emploginbox)
   ============================================================ */
body .infodatawrap {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
body .userloginbox {
  background: linear-gradient(135deg, var(--sb-primary-dark), var(--sb-primary)) !important;
  padding: 60px 40px !important;
  position: relative;
  overflow: hidden;
}
/* Kill old pulsing circle pseudo-elements */
body .userloginbox::before,
body .emploginbox::before {
  display: none !important;
}
/* Dot-grid overlays */
body .userloginbox::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}
body .emploginbox {
  background: linear-gradient(135deg, var(--sb-accent), #F7C948) !important;
  padding: 60px 40px !important;
  position: relative;
  overflow: hidden;
}
body .emploginbox::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: radial-gradient(rgba(0,0,0,0.06) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}
body .userloginbox .usrintxt,
body .emploginbox .usrintxt {
  position: relative;
  z-index: 2;
}
body .userloginbox .titleTop h3,
body .userloginbox .titleTop h4 {
  color: #fff !important;
}
body .emploginbox .titleTop h3,
body .emploginbox .titleTop h4 {
  color: var(--sb-dark) !important;
}
body .userloginbox p {
  color: rgba(255,255,255,0.85) !important;
}
body .emploginbox p {
  color: rgba(15,27,45,0.8) !important;
}
body .userloginbox .viewallbtn a {
  background: #fff !important;
  color: var(--sb-primary) !important;
  border-color: #fff !important;
  border-radius: 24px;
  padding: 14px 32px;
  font-weight: 700;
}
body .userloginbox .viewallbtn a:hover {
  background: var(--sb-accent-light) !important;
  transform: translateY(-2px);
}
body .emploginbox .viewallbtn a {
  background: var(--sb-dark) !important;
  color: #fff !important;
  border-color: var(--sb-dark) !important;
  border-radius: 24px;
  padding: 14px 32px;
  font-weight: 700;
}
body .emploginbox .viewallbtn a:hover {
  background: #1a2a42 !important;
  transform: translateY(-2px);
}


/* ============================================================
   TESTIMONIALS
   ============================================================ */
body .testimonialwrap {
  background: var(--sb-surface) !important;
}
body .testimonialsList .item {
  background: #fff !important;
  border-radius: 20px !important;
  padding: 32px 28px 24px !important;
  box-shadow: var(--sb-shadow-md);
  border: 1px solid #e8eaed;
  position: relative;
  margin: 10px 6px 20px;
}
body .testimonialsList .item::before {
  content: '\201C';
  font-family: Georgia, serif;
  font-size: 72px;
  color: var(--sb-accent);
  opacity: 0.25;
  position: absolute;
  top: 10px;
  left: 20px;
  line-height: 1;
}
body .testimonialsList .item .clientname {
  font-family: var(--sb-font-heading);
  font-weight: 700;
  font-size: 16px;
  color: var(--sb-text);
  margin-top: 8px;
}
body .testimonialsList .item .clientinfo {
  font-size: 13px;
  color: var(--sb-text-muted);
  margin-bottom: 8px;
}
body .testimonialsList .item .ratinguser i {
  color: var(--sb-accent) !important;
}
body .testimonialsList .item p {
  font-size: 14px;
  color: var(--sb-text-muted);
  line-height: 1.7;
  font-style: italic;
}


/* ============================================================
   NEWSLETTER / SUBSCRIBE
   ============================================================ */
body .subscribe {
  background: linear-gradient(135deg, var(--sb-primary-dark), var(--sb-primary)) !important;
  color: #fff;
  padding: 50px 0;
  position: relative;
  overflow: hidden;
}
body .subscribe::after {
  content: '\f1d8';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 140px;
  color: rgba(255,255,255,0.05);
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
body .subscribe h6 {
  font-family: var(--sb-font-heading);
  font-weight: 700;
  font-size: 22px;
  color: #fff !important;
}
body .subscribe p {
  color: rgba(255,255,255,0.8) !important;
}
body .subscribe .form-control {
  border: none !important;
  border-radius: 8px !important;
  padding: 14px 18px;
  font-size: 14px;
  height: auto;
}
body .subscribe .btn {
  background: var(--sb-accent) !important;
  color: var(--sb-dark) !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700;
  padding: 14px 24px;
}
body .subscribe .btn:hover {
  background: #e6961e !important;
}


/* ============================================================
   FOOTER
   ============================================================ */
body .footerWrap {
  background: var(--sb-dark) !important;
  padding: 50px 0 30px;
}
body .footerWrap h5 {
  font-family: var(--sb-font-heading);
  color: var(--sb-accent) !important;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 1px;
  font-weight: 700;
  margin-bottom: 18px;
}
body .footerWrap .quicklinks li a {
  color: rgba(255,255,255,0.65) !important;
  font-size: 13px;
  transition: color 0.2s, padding-left 0.2s;
}
body .footerWrap .quicklinks li a:hover {
  color: #fff !important;
  padding-left: 4px;
}
body .footerWrap .address,
body .footerWrap .email a,
body .footerWrap .phone a {
  color: rgba(255,255,255,0.65) !important;
  font-size: 13px;
}
body .footerWrap .social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.65) !important;
  transition: all 0.3s;
  margin-right: 6px;
  font-size: 15px;
}
body .footerWrap .social a:hover {
  background: var(--sb-accent);
  border-color: var(--sb-accent);
  color: var(--sb-dark) !important;
}
body .copyright {
  background: rgba(0,0,0,0.3) !important;
  padding: 16px 0;
}
body .copyright .bttxt {
  font-size: 13px;
  color: rgba(255,255,255,0.75) !important;
}
body .copyright a {
  color: var(--sb-accent) !important;
}


/* ============================================================
   DASHBOARD CARDS (Candidate) — Color-coded
   ============================================================ */
body .dash-card {
  border: 1px solid #e8eaed !important;
  border-radius: 14px !important;
  box-shadow: var(--sb-shadow-sm);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
body .dash-card:hover {
  box-shadow: var(--sb-shadow-lg) !important;
  transform: translateY(-3px) !important;
  border-color: transparent !important;
}
body .dash-card-icon {
  border-radius: 14px 0 0 14px !important;
}
body .dash-card-label {
  font-family: var(--sb-font-heading);
}
/* Category colors via class */
body .dash-card.sb-cat-profile .dash-card-icon { background: var(--sb-primary) !important; }
body .dash-card.sb-cat-jobs .dash-card-icon { background: var(--sb-accent) !important; }
body .dash-card.sb-cat-ai .dash-card-icon { background: linear-gradient(135deg, #667eea, #764ba2) !important; }
body .dash-card.sb-cat-community .dash-card-icon { background: var(--sb-success) !important; }
body .dash-card.sb-cat-support .dash-card-icon { background: var(--sb-text-muted) !important; }
body .dash-card.sb-cat-learning .dash-card-icon { background: #e91e63 !important; }


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
  body .infodatawrap {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767px) {
  body .searchwrap {
    min-height: 70vh;
    padding: 40px 16px 60px;
  }
  body .searchwrap .srjobseeker .bxsrctxt h3 {
    font-size: clamp(1.6rem, 6vw, 2.5rem) !important;
  }
  body .statsbox {
    margin: -40px 16px 30px !important;
    padding: 18px 16px !important;
  }
  body .userloginbox,
  body .emploginbox {
    padding: 40px 24px !important;
  }
  body .testimonialsList .item {
    padding: 24px 18px 20px !important;
    margin: 8px 4px 16px;
  }
  body .footerWrap .social a {
    width: 36px;
    height: 36px;
  }
  body .header .navbar-toggler i {
    color: var(--sb-accent) !important;
  }
}
@media (max-width: 480px) {
  body .statsbox .statinfo h4 {
    font-size: 18px;
  }
  body .statsbox .statico {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }
  body .searchbarbt .searchbar .input-group {
    flex-direction: column;
  }
  body .searchbarbt .searchbar .form-control,
  body .searchbarbt .searchbar .btn {
    width: 100%;
    border-radius: 8px !important;
    margin-bottom: 6px;
  }
}