@media (max-width: 767.98px) {

  /* --- Hero heading --- */
  h1.display-5 {
    font-size: 24px !important;
    line-height: 1.3 !important;
  }
  h1.display-5 + p.fs-17,
  section .fs-17 {
    font-size: 13px !important;
  }

  /* --- Force EVERY field wrapper in the hero form small --- */
  form[action*="/jobs"] .form-control,
  form[action*="/jobs"] .form-select,
  form[action*="/jobs"] input,
  form[action*="/jobs"] select,
  form[action*="/jobs"] .choices,
  form[action*="/jobs"] .choices__inner,
  form[action*="/jobs"] .select2-container .select2-selection,
  form[action*="/jobs"] .nice-select,
  form[action*="/jobs"] .dropdown-toggle,
  form[action*="/jobs"] .filter-input-box,
  form[action*="/jobs"] .filter-search-form {
    height: 40px !important;
    min-height: 45px !important;
    max-height: 45px !important;
    font-size: 13px !important;
    line-height: 40px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
/* --- Big flat Apply button on job cards --- */
.job-box .btn,
.job-box a[href*="apply"],
.job-box .apply-btn {
  display: block !important;
  width: 100% !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 12px 0 !important;
  margin-top: 10px !important;
  text-align: center !important;
  border-radius: 6px !important;      /* use 0 for fully flat/square */
  background-color: #5b4bdb !important; /* match your theme purple */
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;         /* flat look, no shadow */
}

.job-box .btn:hover,
.job-box a[href*="apply"]:hover {
  background-color: #4839c4 !important; /* slightly darker on hover */
  color: #ffffff !important;
}

/* Let the button take the full row instead of floating right */
.job-box .card-footer,
.job-box .p-3 {
  display: block !important;
}
    /* --- Compact the bottom row (Published date + skill tags) --- */

/* The footer strip itself */
.job-box .card-footer,
.job-box .job-footer,
.job-box .p-3 {
  padding: 6px 12px !important;
}

/* "Published: 3 weeks ago" text */
.job-box .card-footer p,
.job-box .card-footer span,
.job-box .card-footer small,
.job-box [class*="publish"] {
  font-size: 11px !important;
  line-height: 1.3 !important;
  margin-bottom: 0 !important;
}
  /* Apply button: keep big & flat but trim height a bit */
.job-box .btn,
.job-box a[href*="apply"] {
  padding: 9px 0 !important;
  font-size: 14px !important;
  margin-top: 6px !important;
}
    /* ===== Clean white job card frame ===== */

.job-box {
  border: 1px solid #e8e8e8 !important;
  border-left: 1px solid #e8e8e8 !important;   /* removes the purple stripe */
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06) !important;
  overflow: hidden !important;
  transition: box-shadow 0.2s ease !important;
}

.job-box:hover {
  transform: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10) !important;
  border-color: #dcdcdc !important;
}

/* Footer: plain white with a thin divider */
.job-box .card-footer,
.job-box .p-3 {
  background: #ffffff !important;
  border-top: 1px solid #f0f0f0 !important;
}

/* Logo: simple, no chip background */
.job-box img,
.job-box .avatar {
  border-radius: 6px !important;
  background: #ffffff !important;
  padding: 0 !important;
  border: 1px solid #f0f0f0 !important;
}
/* Remove the arrow icon inside the Apply button */
.job-box .btn i,
.job-box .btn svg,
.job-box .btn .mdi,
.job-box a[href*="apply"] i,
.job-box a[href*="apply"] svg {
  display: none !important;
}/* Center the Apply button (midline) instead of full width */
.job-box .btn,
.job-box a[href*="apply"] {
  display: block !important;
  width: 70% !important;          /* not edge-to-edge anymore */
  max-width: 260px !important;
  margin: 8px auto !important;    /* auto = horizontally centered */
  text-align: center !important;
}
    /* Apply button: fit neatly inside the card */
.job-box .btn,
.job-box a[href*="apply"] {
  display: block !important;
  width: calc(100% - 24px) !important;  /* full width minus card padding */
  max-width: none !important;
  margin: 8px 12px 12px !important;     /* keeps it inside the frame edges */
  padding: 10px 0 !important;
  text-align: center !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}
 /* ===== Job detail page adjustments ===== */

/* 1. Hide the Related Jobs section */
section:has(h4:is([class*="related"])),
.related-jobs,
[class*="related-job"],
section:has(> .container h2[class*="related"]),
#related-jobs {
  display: none !important;
}

/* 2. Make the Job Information box compact */
.job-detail-desc .job-details-desc-item,
.job-overview,
[class*="job-information"],
.side-bar .card,
.job-detail .card {
  padding: 12px !important;
}

.job-overview li,
[class*="job-information"] li,
.side-bar .card li,
.job-overview p,
[class*="job-information"] p {
  font-size: 12.5px !important;
  line-height: 1.4 !important;
  margin-bottom: 6px !important;
  padding: 4px 0 !important;
}

.job-overview h5,
.job-overview h6,
[class*="job-information"] h5,
[class*="job-information"] h6,
.side-bar .card h5 {
  font-size: 14px !important;
  margin-bottom: 8px !important;
}
  /* 3. Prominent Apply button on the page */
a[href*="apply"],
.job-detail .btn-primary,
button[data-bs-target*="apply"],
[class*="apply"] .btn {
  display: block !important;
  width: 100% !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  padding: 14px 0 !important;
  text-align: center !important;
  background-color: #5b4bdb !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 14px rgba(91, 75, 219, 0.35) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

a[href*="apply"]:hover,
button[data-bs-target*="apply"]:hover {
  background-color: #4839c4 !important;
  color: #fff !important;
}
    /* 1. Hide Related Jobs — the .mt-4 div that contains job-box cards */
.col-lg-8 > .mt-4:has(.job-box) {
  display: none !important;
}
/* Sticky Apply button (uses the JS-added button below the description) */
#sticky-apply-bar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1030 !important;
  background: #ffffff !important;
  padding: 10px 16px !important;
  box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.12) !important;
  display: none; /* JS shows it after scrolling */
}
#sticky-apply-bar .sticky-apply-btn {
  display: block;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  padding: 13px 0;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  background: #5b4bdb;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
}
#sticky-apply-bar .sticky-apply-btn:hover {
  background: #4839c4;
  color: #fff;
}
    /* Hide original apply button; sticky bar handles applying now */
.col-lg-4 a.btn[href*="apply"],
.col-lg-4 button[data-bs-target*="apply"],
.job-overview ~ * a[href*="apply"] {
  visibility: hidden !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  display: block !important;
}
  /* ================================================
   JOBFIXO - HAPPY CANDIDATES / TESTIMONIALS CSS
   Admin > Appearance > Custom CSS
   ================================================ */

/* ===== SECTION BACKGROUND ===== */
.testimonial-area,
.happy-candidate-area,
[class*="testimonial"],
[class*="happy-candidate"] {
    background: linear-gradient(135deg, #3d1a6e 0%, #5b2d82 50%, #7c3aaa 100%) !important;
    padding: 80px 0 !important;
    position: relative !important;
    overflow: hidden !important;
}
/* ================================================
   MOBILE HERO COMPACT FIX
   ================================================ */

/* Kill huge purple empty space below search */
@media (max-width: 767px) {

  /* Hero section tight */
  .banner-area,
  .hero-area,
  section.bg-primary,
  [class*="banner-area"],
  [class*="hero-area"] {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    min-height: unset !important;
    height: auto !important;
  }

  /* Remove empty rows/cols inside hero */
  .banner-area .row,
  .hero-area .row,
  section.bg-primary .row,
  [class*="banner-area"] .row {
    margin: 0 !important;
    padding: 0 !important;
    min-height: unset !important;
  }

  /* Kill all empty divs inside hero */
  .banner-area .col-lg-12,
  .banner-area .col-md-12,
  .banner-area [class*="col-"],
  section.bg-primary [class*="col-"] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Find Job button - make it visible */
  .submit-btn,
  button.submit-btn,
  .registration-form button,
  form[action*="/jobs"] button[type="submit"] {
    display: block !important;
    width: 100% !important;
    background: #5b21b6 !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 14px !important;
    border-radius: 10px !important;
    border: none !important;
    margin-top: 8px !important;
    cursor: pointer !important;
  }

  /* Gap between hero and Featured Jobs */
  .banner-area + *,
  .hero-area + *,
  section.bg-primary + *,
  [class*="banner-area"] + * {
    margin-top: 0 !important;
    padding-top: 10px !important;
  }

  /* Featured/Recent/Popular tabs tighter */
  #pills-tab,
  .nav-pills,
  [id*="pills-tab"] {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    padding-top: 0 !important;
  }

  /* Section containing tabs */
  section:has(#pills-tab) {
    padding-top: 10px !important;
    margin-top: 0 !important;
  }

  /* Any white/gray space between sections */
  section + section {
    margin-top: 0 !important;
    padding-top: 10px !important;
  }
  /* ================================================
   NUCLEAR GAP FIX - MOBILE HERO
   ================================================ */
@media (max-width: 767px) {

  /* Force hero to shrink to content size */
  .banner-area,
  .hero-area,
  section.bg-primary,
  [class*="banner-area"],
  [class*="hero-area"],
  #page-home > section:first-child {
    padding: 20px 16px !important;
    min-height: unset !important;
    max-height: unset !important;
    height: auto !important;
    display: block !important;
  }

  /* Kill ALL inner containers padding */
  .banner-area *,
  .hero-area *,
  section.bg-primary * {
    min-height: unset !important;
  }

  /* Target the specific empty div causing the gap */
  .banner-area .container,
  .hero-area .container,
  section.bg-primary .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .banner-area .row,
  .hero-area .row,
  section.bg-primary .row {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  /* Kill ALL col divs inside hero */
  .banner-area [class*="col"],
  .hero-area [class*="col"],
  section.bg-primary [class*="col"] {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
  }
  button.submit-btn,
button.btn.submit-btn.w-100.h-100 {
  background: #ffffff !important;
  color: black !important;
  width: 3x 4x !important;
  height: 45px !important;
  padding: 8px 28px !important;
  border-radius: 16px !important;
  border: none !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 6px auto !important;
  box-shadow: 0 4px 12px rgba(91,33,182,0.3) !important;
}

button.submit-btn span,
.btn-primary.submit-btn span {
  color: black !important;
  display: inline !important;
  visibility: visible !important;
}

button.submit-btn i {
  color: black !important;
  font-size: 14px !important;
  display: inline !important;
}

div.mt-3.mt-lg-0.h-100 {
  height: auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-top: 8px !important;
  width: 100% !important;
}
  /* ================================================
   KILL HUGE GAP - div.ck-content
   ================================================ */
div.ck-content {
  padding: 0 !important;
  margin: 0 !important;
  min-height: unset !important;
  height: auto !important;
}

/* Kill empty sections causing gap */
section.section.bg-light,
section.section {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

/* Kill position-relative empty div */
div.position-relative:empty {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Gap between hero and jobs */
div#app-page-content,
div.main-content {
  padding: 0 !important;
  margin: 0 !important;
}

/* Kill overflow hidden causing space */
.bg-footer,
.footer-alt,
.main-content {
  overflow: visible !important;
}
  /* Make blog header shorter */
.page-header {
    padding: 30px 0 !important;
    min-height: 100px !important;
}

.page-header .container {
    padding: 20px 0 !important;
}

.breadcrumb-section {
    padding: 20px 0 !important;
    min-height: 80px !important;
} 
  .breadcrumb-area {
    padding: 30px 0 !important;
    min-height: unset !important;
}

.breadcrumb-area .container {
    padding: 10px 0 !important;
}

section.breadcrumb-area {
    height: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
}
  .page-banner {
    padding: 30px 0 !important;
    min-height: 120px !important;
}
  .page-title-box {
    padding: 30px 0 !important;
    min-height: 120px !important;
    height: 120px !important;
    max-height: 120px !important;
    overflow: hidden !important;
}

.page-title-box .container {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
  .page-title-box {
    background-image: none !important;
    background-color: #5c4bc7 !important;
    padding: 25px 0 !important;
    min-height: unset !important;
    height: auto !important;
}