@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

:root {
    --primary-color: #1B2028;
    --secondary-color: #06344D;
    --tertiary-color: #fff;
    --quaternary-color: #e6e600;
    --quinary-color: #282828;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
}

html {
    height: 100%;
}

/*
 * Sticky footer: body is a column flexbox spanning at least the full
 * viewport, and .site-footer (below) gets margin-top: auto so it's pushed
 * to the bottom of the screen on short pages instead of riding up right
 * under the content. Pages with more content than fits the viewport are
 * unaffected — the extra content just pushes body taller and the page
 * scrolls as before.
 */
body {
    background-color: var(--tertiary-color);
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Ubuntu', sans-serif;
    overflow-y: scroll;
}

/* Apply only on mobile screens */
@media (max-width: 1024px) {
  /* Reset any existing padding */
  body {
    padding-top: 0;
    margin-top: 0;
  }
  
  /* For devices with safe area support */
  @supports (padding: max(0px)) {
    body {
      padding-top: max(15px, env(safe-area-inset-top)) !important;
    }
    .navbar {
      padding-top: max(15px, env(safe-area-inset-top)) !important;
    }
  }
  
  /* Fallback */
  @supports not (padding: max(0px)) {
    body {
      padding-top: 35px !important;
    }
    .navbar {
      padding-top: 35px !important;
    }
  }
}
/*@supports (padding-top: env(safe-area-inset-top)) {
  body {
    padding-top: env(safe-area-inset-top) !important;
  }
}

@supports (top: env(safe-area-inset-top)) {
  .navbar {
    top: env(safe-area-inset-top) !important;
  }
}*/

.navbar-custom {
    background-color: #ffffff;
    padding: 20px 10px;
  }

  .navbar-brand .logo{
    width: 180px;
  }

  @media (max-width: 991px) {
    .navbar-brand .logo{
    width: 100px;
  }
  }

  .navbar-nav{
    gap: 20px;
  }

  .navbar-nav .nav-link {
    color: #0000;
    margin-right: 1rem;
    font-size: 1rem;
  }

  .nav-item a{
    color:#000 !important;
  }


  .navbar-nav .active,
  .navbar-nav a:hover {
    color: var(--secondary-color) !important;
  }

  .navbar-nav .nav-link.active {
    color: #ffffff !important;
    font-weight: 700;
    background: linear-gradient(135deg, #0b63bb, #06344d);
    border-radius: 999px;
    padding: 8px 18px;
    box-shadow: 0 4px 14px rgba(11, 99, 187, 0.32);
    animation: navActivePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
               navActiveGlow 2.6s ease-in-out 0.4s infinite;
  }
  .navbar-nav .nav-link.active:hover {
    color: #ffffff !important;
  }
  @keyframes navActivePop {
    0%   { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
  }
  @keyframes navActiveGlow {
    0%, 100% { box-shadow: 0 4px 14px rgba(11, 99, 187, 0.32); }
    50%      { box-shadow: 0 4px 20px rgba(11, 99, 187, 0.55); }
  }
  @media (prefers-reduced-motion: reduce) {
    .navbar-nav .nav-link.active { animation: none; }
  }
  @media (max-width: 991px) {
    .navbar-nav .nav-link.active {
      display: inline-block;
      padding: 6px 14px;
    }
  }
  .navbar-nav .nav-link:last-child {
    margin-right: 0;
  }


  .navbar-toggler {
    border: none;
  }
  .navbar-toggler:focus {
    box-shadow: none;
  }

  .navbar-toggler spane{
    color: var(--secondary-color);
    background: var(--secondary-color);
  }

  @media (max-width: 992px) {
    .navbar-nav .nav-link {
      margin-left: 1rem;
      font-size: 1rem;
    }

    .navbar-icons {
      margin-left: 1rem !important;
    }

    
  }

  @media (max-width: 768px) {
    .navbar-nav .nav-link {
      font-size: 1rem;
      margin-left: 0.8rem;
    }

    .navbar-icons {
      margin-left: 0.8rem !important;
    }

    .navbar-nav{
      gap: 5px;
    }
  
  }

  @media (max-width: 576px) {
    .navbar-nav .nav-link {
      font-size: 0.875rem;
    }

    .navbar-icons {
      margin-left: 0.8rem !important;
    }
  }

  @media (max-width: 480px) {
    .navbar-nav .nav-link {
      font-size: 0.75rem;
    }

    .navbar-icons {
      margin-left: 0.8rem !important;
    }
  }

  @media (max-width: 320px) {
    .navbar-nav .nav-link {
      font-size: 0.625rem;
    }
    .navbar-icons {
      margin-left: 0.8rem !important;
    }
  }

  .content{
    margin-top: 10px;
  }

.btn-blue{
  background: var(--secondary-color);
  padding: 5px 8px;
  color: #fff;
  border-radius: 8px;
}

.btn-blue-outline{
  border: 1px solid var(--secondary-color);
  background: #fff;
  padding: 5px 8px;
  color: var(--secondary-color);
  border-radius: 8px;
}

/* Hero section */
.hero{
  padding: 28px 16px 56px;
  text-align: center;
}

.hero-title{
  /*color: #135873;*/
  color: #fafafa;
  font-weight: 800;
  letter-spacing: 1px;
}

.hero-subtitle{
  margin-top: 6px;
  /*color: #4f5b66;*/
  color: #fafafa;
}

.hero-count{
  font-weight: 700;
}

.hero-search{
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr auto;
  gap: 12px;
  justify-content: center;
  align-items: center;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}

.hero-search .form-control{
  height: 44px;
  border-radius: 10px;
  border: 1px solid #d6dde3;
  padding: 0 14px 0 40px;
}

.search-with-icon{ position: relative; }
.search-with-icon:before{
  content: "\1F50D"; /* magnifying glass */
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #8aa0ae;
  font-size: 16px;
}

.btn-search{
  background: #0f3950;
  color: #fff;
  border: none;
  height: 44px;
  padding: 0 20px;
  border-radius: 10px;
}

/* Hover State - Gray Background & White Text */
.btn-search:hover,
.btn-search:focus {
    background-color: #0b63bb; /* Charcoal/Dark Gray */
    color: #ffffff !important;  /* White Text */
    border-color: #4a5568;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Optional subtle shadow */
}

/* Responsive layout */
@media (max-width: 768px){
  .hero{
    padding-top: 36px;
  }
  .hero-search{
    grid-template-columns: 1fr;
    max-width: 290px;
  }
  .hero-search .form-control{
    padding-left: 40px;
  }
  .btn-search{ width: 100%; }
}

/* Jobs board */
.jobs-board{
  padding: 0px;
  margin-top: -10px;
  
}

.jobs-toolbar{
  position: sticky;
  top: 0;
  background: linear-gradient(to bottom, #0b63bb, #0d6492);
  color: #fff;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  z-index: 10;
}

.toolbar-group{ display: flex; flex-wrap: wrap; gap: 8px; }
.filter-select{
  appearance: none;
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  padding: 6px 32px 6px 12px;
  min-width: 150px;
  cursor: pointer;
  outline-offset: none;
  outline: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 8px center;
  background-repeat: no-repeat;
  background-size: 16px;
}
.filter-select option{ color: #0f3950; }
.refresh-btn{
  background: #ff3b30;
  color: #fff;
  border: none;
  width: 32px; height: 32px;
  border-radius: 50%;
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {

  .jobs-toolbar {
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
    gap: 12px;
  }

  .toolbar-group {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }

  .filter-select {
    width: 100%;
    min-width: unset;
    padding: 10px 40px 10px 14px;
    font-size: 14px;
  }

  .foreign-job-btn {
    width: auto;
    flex: 1 0 auto;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 15px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .refresh-btn {
    align-self: flex-end;
    width: 36px;
    height: 36px;
  }
}

.jobs-layout{
  margin-top: 16px;
  padding: 0 10px;
  display: grid;
  grid-template-columns: 350px 1fr;
  gap: 16px;
  /* Opt out of grid's default item stretch: with it on, once the sidebar-
     height sync script (further down the page) gives .jobs-sidebar an
     explicit height, that height would count as this row's own size too
     and get stretched right back onto the job listings column — fighting
     the script and leaving stale, inaccurate heights when the column's
     content shrinks. Start-aligned, each column is simply its own natural
     size, and the script is the only thing that resizes the sidebar. */
  align-items: start;
}

.jobs-sidebar{
  background: #e8f0f5;
  border-radius: 10px;
  padding: 8px;
  /* Baseline height for before JS has measured the job listings column
     (see the sidebar-height sync script below) and as the safe fallback
     if it can't run. .sidebar-list's own max-height keeps this from
     growing unbounded to fit all categories unscrolled, which would
     otherwise inflate this box (and, via the grid, the column next to
     it) far past a sensible size. */
  min-height: 650px;
  /* Hard cap so the box can never grow taller than the screen — the sync
     script below keeps it within this too, this is the CSS-only fallback
     (no JS, or before the script's first run). Keeps the category list
     scrolling inside the box instead of the box spilling past the
     viewport, which is what made it look "unlimited". */
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 20px;
}

.sticky-scroller{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.sidebar-head {
  display: block;
  width: 100%;
  flex-shrink: 0;
  background: linear-gradient(90deg, #0D3B5A 0%, #1565B8 55%, color-mix(in srgb, #8A1538 82%, #000) 100%);
  color: #fff;
  font-weight: 600;
  padding: 10px 12px;
  border-radius: 8px;
}
.sidebar-list{
  flex: 1 1 auto;
  min-height: 0;
  /* Safe baseline cap — the sync script below raises this (inline style)
     once it knows the job listings column's real height, so the list can
     fill it exactly instead of leaving a gap under a fixed-height list. */
  max-height: 600px;
  overflow: auto;
  padding: 8px 4px;
}
.sidebar-item{
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid #d6dde3;
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 8px;
  font-weight: 500;
  color: #06344D;
  transition: all 0.2s ease;
}

.sidebar-item:hover {
  background: #f1f5ff;
  color: #8A1538;
}

.sidebar-item.active{
    color: #8A1538;
    font-weight: bold;
}

.sidebar-item i {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background-color: #eaf4ff;
    color: #06344D;
    border-radius: 50%;
    margin-right: 12px;
    font-size: 13px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.sidebar-item.active i {
    background-color: #8A1538;
    color: #ffffff;
}

.sidebar-item:hover i {
    background-color: #8A1538;
    color: #ffffff;
}

/* Mobile spacing */
/*@media (max-width: 991px) {
  .sidebar-item {
    width: 90%;
  }
}*/

.jobs-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.job-card{
  cursor: pointer;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #d6dde3;
  padding: 20px 16px 16px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  position: relative;
}
.job-logo-container{
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}
.job-logo{ 
  width: 60px; 
  height: 60px; 
  object-fit: contain; 
  border-radius: 8px;
}
/* Add margin-top only on mobile devices */
@media (max-width: 768px) {
  .job-logo {
    margin-top: 10px;
  }
}
.job-title{ 
  font-size: 1rem; 
  font-weight: 600;
  margin: 0 0 8px 0; 
  color: #1a1a1a;
  line-height: 1.3;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Mobile only - limit title to 3 lines */
@media (max-width: 767.98px){
    .job-title{
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.4;
        max-height: calc(1.4em * 3);
    }
}

.job-meta{ 
  color: #6a7a86; 
  font-size: 0.9rem; 
  margin-bottom: 6px;
  font-weight: 500;
}
.job-company{
  color: #1a1a1a;
  font-size: 0.9rem;
  margin-bottom: 12px;
  font-weight: 500;
}

/* Hide on mobile devices */
@media (max-width: 768px) {
  .job-company {
    display: none;
  }
}

.job-closing{ 
  color: #8aa0ae; 
  font-size: 0.6rem; 
  position: absolute;
  bottom: 12px;
  right: 12px;
}

  @media (max-width: 768px) {
  .job-closing{ 
    display: none;
      /*color: #8aa0ae; 
      font-size: 0.6rem; 
      position: absolute;
      bottom: 12px;
      right: 12px;*/
    }
}

.job-foot{ 
  color: #8aa0ae; 
  font-size: 0.6rem; 
  position: absolute;
  bottom: 12px;
  text-align: left;
}

  @media (max-width: 768px) {
  .job-foot{ 
    display: none;
  /*color: #8aa0ae; 
  font-size: 0.6rem; 
  position: absolute;
  bottom: 12px;
  text-align: left;*/
}
}

/* Jobs responsive */
@media (max-width: 1200px){
  .jobs-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 992px){
  .jobs-layout{ grid-template-columns: 1fr; }
  .jobs-grid{ grid-template-columns: repeat(2, 1fr); }
  .sidebar-list{ 
    max-height: 420px; 
  }
  .jobs-sidebar{
    padding: 8px;
    position:static;
    min-height: auto;
    max-height: 100%;
  }
}
@media (max-width: 576px){
  .filter-chip{ padding: 6px 10px; }
  .jobs-grid{ grid-template-columns: 1fr; }
  .sidebar-list{ max-height: 280px; }
  .sidebar-list{ 
    max-height: 420px; 
  }
}

/* Site Footer */
.site-footer {
  position: relative;
  background: linear-gradient(180deg, #0b63bb, #0d6492 60%, #06344D);
  padding: 16px 20px 10px;
  color: #fff;
  overflow: hidden;
  font-family: inherit;
  /* Sticky footer: absorbs any leftover space in the body flexbox so it
     sits at the bottom of the viewport on short pages. Collapses to 0 (no
     effect) once the content above it already fills the viewport. */
  margin-top: auto;
  flex-shrink: 0;
}
.site-footer .footer-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto;
  gap: 12px;
}
.site-footer .footer-left {
  display: flex;
  align-items: center;
}
.site-footer .footer-logo {
  height: 40px;
  width: auto;
  margin: 0;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.site-footer .footer-logo:hover {
  transform: scale(1.08) translateY(-2px);
  filter: drop-shadow(0 4px 8px rgba(255,255,255,0.4));
}
.site-footer .footer-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
}
.site-footer .footer-link {
  color: #fff;
  opacity: 0.95;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s;
}
.site-footer .footer-link:hover {
  opacity: 1;
  text-shadow: 0 0 8px rgba(255,255,255,0.6);
}
.site-footer .footer-right {
  display: flex;
  gap: 8px;
}
.site-footer .social {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(255,255,255,0.15);
  font-size: 14px;
  text-decoration: none;
  transition: all 0.3s;
}
.site-footer .social:hover { transform: translateY(-2px); background: rgba(255,255,255,0.3); }

.site-footer .footer-copy {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 10px auto 0;
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  line-height: 1.3;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 8px;
}

@media (max-width: 992px) {
  .site-footer .footer-inner {
    flex-direction: column;
    text-align: center;
    gap: 12px;
    padding: 10px 0;
  }
}
@media (max-width: 576px) {
  .site-footer .footer-nav {
    gap: 6px 10px;
  }
  .site-footer .footer-link {
    font-size: 12px;
  }
}

/* WhatsApp Support Button */
.whatsapp-support{
  position: fixed;
  right: 20px;
  bottom: 90px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.whatsapp-support a{
  width: 60px;
  height: 60px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
  transition: transform 0.2s ease;
}

.whatsapp-support a:hover{
  transform: scale(1.1);
  color: #fff;
}

.support-text{
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
}

/* Mobile responsiveness improvements */
@media (max-width: 768px){
  .jobs-toolbar{
    padding: 8px;
    flex-direction: column;
    gap: 12px;
  }
  
  .toolbar-group{
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .filter-select{
    min-width: 120px;
    font-size: 14px;
  }
  
  .whatsapp-support{
    right: 15px;
    bottom: 15px;
  }
  
  .whatsapp-support a{
    width: 50px;
    height: 50px;
    font-size: 24px;
  }
  
  .support-text{
    font-size: 10px;
  }
}

@media (max-width: 576px){
  .jobs-board{
    padding: 0;
  }
  
  .jobs-toolbar{
    margin: 0;
    border-radius: 0;
  }
  
  .filter-select{
    min-width: 100px;
    padding: 4px 24px 4px 8px;
    font-size: 12px;
  }
  
  .jobs-layout{
    margin-top: 12px;
  }
  
  .jobs-grid{
    gap: 12px;
  }
  
  .job-card{
    padding: 12px;
  }
  
  .job-title{
    font-size: 0.9rem;
  }
  
  .job-meta{
    font-size: 0.8rem;
  }
}


.page-header{
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.page-header-img{
  cursor: pointer;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-content{
  padding: 50px 0px;
}

.page-content .card{
  border: none;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
}

.page-content .card-body{
  padding: 20px;
}

.advertise-img{
  width: 100%;
}

@media (max-width: 991px) {
  .advertise-img-wrap-empty {
    display: none;
  }
}

/* Job list full-width card (detail row) */
.joblist-card{
  display: grid;
  grid-template-columns: 260px 1fr auto; /* wider left column */
  grid-template-rows: auto auto;       /* top row (title+right), bottom row (meta+actions) */
  gap: 16px 20px;
  align-items: start;
  padding: 18px 22px;
}

.joblist-left{ display: flex; align-items: center; justify-content: center;}
.joblist-logo{ width: 180px; height: auto; object-fit: contain;margin-top: 50px; }

.joblist-main{ width: 100%; grid-column: 2 / 3; grid-row: 1 / 3; }
.joblist-right{ grid-column: 3 / 4; grid-row: 1 / 2; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; color: #1b3a4b; font-weight: 500; }
.joblist-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.joblist-title-badge{
  background: #0d4061;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-weight: 700;
}
.joblist-top-right{ display: flex; gap: 18px; color: #1b3a4b; font-size: 0.95rem; flex-wrap: wrap; font-weight: 500; }
.joblist-sub{ color: #4f5b66; margin-top: 6px; font-weight: 600; }
.joblist-company{ margin-top: 6px; font-weight: 700; }
.joblist-meta{ display: flex; gap: 22px; flex-wrap: wrap; margin-top: 14px; color: #1b3a4b; align-items: center; }
.joblist-meta i{ color: #0d6492; margin-right: 6px; }
.joblist-salary{ font-weight: 700; }

.joblist-actions{ display: flex; flex-direction: row; gap: 12px; align-self: end; justify-self: end; grid-column: 3 / 4; grid-row: 2 / 3; }
.joblist-actions .btn{ text-decoration: none; display: inline-flex; align-items: center; gap: 8px; border-radius: 8px; padding: 12px 20px; font-weight: 600; white-space: nowrap; font-size: 0.95rem; }
.btn-apply{ background: #0b63bb; color: #fff; }
.btn-print{ background: #dc3545; color: #fff; }
.btn-share{ background: #28a745; color: #fff; }
.joblist-actions .btn i{ font-size: 16px; }

/* Mobile responsiveness for job list card */
@media (max-width: 992px){
  .joblist-card{ grid-template-columns: 180px 1fr; grid-template-rows: auto auto auto; padding: 16px; }
  .joblist-main{ grid-column: 2 / 3; grid-row: 1 / 3; }
  .joblist-right{ grid-column: 1 / -1; grid-row: 1 / 2; align-items: flex-start; gap: 4px; font-size: 0.9rem; }
  .joblist-actions{ grid-column: 1 / -1; grid-row: 3 / 4; justify-content: flex-end; }
  .joblist-logo{ width: 150px; }
}

@media (max-width: 768px){
  .joblist-logo{ width: 110px; margin-top: 0px;}
  .joblist-top-right{ font-size: 0.85rem; }
  .joblist-actions .btn{ padding: 10px 16px; font-size: 0.9rem; }
}

@media (max-width: 576px){
  .joblist-card{ 
    grid-template-columns: 1fr; 
    grid-template-rows: auto auto auto auto; 
    grid-template-areas: 
      "left"
      "main"
      "right"
      "actions"; 
    padding: 14px; 
    gap: 12px; 
  }
  .joblist-left{ display: flex; grid-area: left;}
  .joblist-logo{ width: 130px; margin-bottom: 6px;margin-top: 0px; }
  .joblist-main{ grid-column: 1 / -1; grid-row: auto; grid-area: main; }
  .joblist-right{ grid-column: 1 / -1; align-items: flex-start; grid-area: right; }
  .joblist-title-badge{ font-size: 0.95rem; padding: 5px 10px; }
  .joblist-sub{ font-size: 0.95rem; }
  .joblist-company{ font-size: 1rem; }
  .joblist-meta{ gap: 12px; font-size: 0.9rem; }
  .joblist-salary{ display: inline-block; margin-top: 4px; }
  .joblist-actions{ grid-column: 1 / -1; grid-area: actions; justify-content: stretch; flex-wrap: wrap; gap: 8px; }
  .joblist-actions .btn{ flex: 1 1 auto; text-align: center; justify-content: center; min-width: 120px; padding: 10px 12px; font-size: 0.85rem; }
}

@media (max-width: 400px){
  .joblist-card{ padding: 12px; }
  .joblist-logo{ width: 110px; }
  .joblist-title-badge{ font-size: 0.9rem; padding: 4px 8px; }
  .joblist-meta{ gap: 10px; font-size: 0.85rem; }
  .joblist-actions .btn{ padding: 8px 10px; font-size: 0.8rem; min-width: 100px; }
}

.back-to-job-list{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #0d6492, #0b63bb);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  padding: 12px 20px;
  border-radius: 0px 25px 25px 0px;
  box-shadow: 0 4px 15px rgba(13, 100, 146, 0.3);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  margin: 20px 0;
}

.back-to-job-list::before{
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}

.back-to-job-list:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(13, 100, 146, 0.4);
  color: #fff;
  text-decoration: none;
}

.back-to-job-list:hover::before{
  left: 100%;
}

.back-to-job-list i{
  font-size: 16px;
  transition: transform 0.3s ease;
}

.back-to-job-list:hover i{
  transform: translateX(-3px);
}

/* Mobile responsiveness for back button */
@media (max-width: 768px){
  .back-to-job-list{
    padding: 10px 16px;
    font-size: 0.9rem;
    margin: 15px 0;
  }
}

@media (max-width: 576px){
  .back-to-job-list{
    padding: 8px 14px;
    font-size: 0.85rem;
    margin: 10px 0;
  }
}

/* Action content section */
.action-content{
  text-align: center;
}

.action-content .btn{
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 600;
  white-space: nowrap;
  font-size: 1rem;
  margin: 8px 0;
  min-width: 200px;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-content .btn i{
  font-size: 18px;
}

.btn-apply-email{ 
  background: #0b63bb; 
  color: #fff; 
}

.btn-apply-email:hover{ 
  background: #0a5499; 
  color: #fff; 
  transform: translateY(-2px);
}

.btn-share{ 
  background: #28a745; 
  color: #fff; 
}

.btn-share:hover{ 
  background: #218838; 
  color: #fff; 
  transform: translateY(-2px);
}

.btn-print{ 
  background: #dc3545; 
  color: #fff; 
}

.btn-print:hover{ 
  background: #c82333; 
  color: #fff; 
  transform: translateY(-2px);
}

/* Mobile responsiveness for action buttons */
@media (max-width: 768px){
  .action-content{
    padding: 30px 0;
  }
  
  .action-content .btn{
    min-width: 180px;
    padding: 10px 20px;
    font-size: 0.95rem;
  }
}

@media (max-width: 576px){
  .action-content .btn{
    min-width: 160px;
    padding: 10px 16px;
    font-size: 0.9rem;
  }
}

/* Official colors */
.social.facebook { color: #ffffff; }   /* Facebook Blue */
.social.x        { color: #ffffff; }   /* X (Twitter) Black */
.social.linkedin { color: #ffffff; }   /* LinkedIn Blue */
.social.instagram{ color: #ffffff; }
.social.tiktok   { color: #ffffff; }

/*My Css*/

/* Default → Mobile First (1 column) */
#job-listings {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Tablet */
@media (min-width: 768px) {
  #job-listings {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop */
@media (min-width: 992px) {
  #job-listings {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Hidden by default */
.mobile-login-buttons {
  display: none;
}

/* MOBILE ONLY */
@media (max-width: 991px) {

  .mobile-login-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-right: 10px;
  }

  /* make buttons look like compact pills */
  .mobile-login-buttons button {
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 20px;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: all 0.2s ease;
  }

  /* Recruiter (outline style refinement) */
  .mobile-login-buttons .btn-blue-outline {
    background: transparent;
    border: 1px solid #0f3950;
    color: #0f3950;
  }

  .mobile-login-buttons .btn-blue-outline:active {
    background: #0f3950;
    color: #fff;
  }

  /* Jobseeker (primary button) */
  .mobile-login-buttons .btn-blue {
    background: #0f3950;
    color: #fff;
  }

  .mobile-login-buttons .btn-blue:active {
    opacity: 0.85;
  }
}

/*Foreign Job*/

.foreign-job-btn {
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #0b63bb;
  background-color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s ease;
  width: 200px;
}

.foreign-job-btn:hover {
  background-color: #f8f9fa;
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}
/*end*/

/*Add more button*/

.btn-add-education{

    background:#039BE5;

    color:white;

    font-size:11px !important;

    padding:4px 10px;

    border-radius:5px;

    border:1px solid #039BE5;

    display:inline-flex;

    align-items:center;

    gap:5px;

    line-height:1;

    transition:0.3s;

}


.btn-add-education i{

    font-size:10px;

}


.btn-add-education:hover{

    background:#0288D1;

    border-color:#0288D1;

    color:white;

}

.btn-remove-education{

    position:absolute;

    top:8px;

    right:8px;

    width:22px;

    height:22px;

    padding:0;

    border:none;

    border-radius:50%;

    background:#dc3545;

    color:white;

    font-size:11px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:0.3s;

}


.btn-remove-education:hover{

    background:#bb2d3b;

    transform:scale(1.1);

}

.btn-remove-experience{

    position:absolute;

    top:8px;

    right:8px;

    width:22px;

    height:22px;

    padding:0;

    border:none;

    border-radius:50%;

    background:#dc3545;

    color:white;

    font-size:11px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:0.3s;

}


.btn-remove-experience:hover{

    background:#bb2d3b;

    transform:scale(1.1);

}

.password-input-wrap{
    position:relative;
}

.password-toggle{
    position:absolute;
    right:15px;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;
    color:#777;
}

.password-toggle:hover{
    color:#0d6efd;
}


/*3 CV*/

.cv-actions{
    margin-top:10px;
    display:flex;
    gap:8px;
}

.cv-btn{
    border:none;
    background:#bcddf7;
    color:#1d4f73;
    font-size:12px;
    padding:5px 12px;
    border-radius:6px;
    text-decoration:none;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:5px;
    transition:0.3s;
}

.cv-btn:hover{
    background:#9fcceb;
    color:#123b55;
}

.download-btn i,
.delete-btn i{
    font-size:11px;
}

.primary-badge{
    color:#1d4f73;
    padding:3px 10px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
    display:inline-block;
}

/*End*/

/* Select2 main box */
#preferredJobCategory + .select2-container .select2-selection--multiple {
    min-height: 45px;
    border-radius: 10px;
    border: 1px solid #ced4da;
    padding: 5px 8px;
}

/* Selected tags */
#preferredJobCategory + .select2-container .select2-selection__choice {
    border-radius: 8px;
    padding: 4px 8px;
}

/* Search input inside Select2 */
#preferredJobCategory + .select2-container .select2-search__field {
    height: 30px;
}

/* Focus effect */
#preferredJobCategory + .select2-container.select2-container--focus 
.select2-selection--multiple {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
}

/* Fix Select2 selected text overlap with close button */
#preferredJobCategory + .select2-container .select2-selection__choice {
    padding-left: 28px !important;
    position: relative;
}

/* Position close button */
#preferredJobCategory + .select2-container .select2-selection__choice__remove {
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: 0;
    width: 18px;
    height: 18px;
    line-height: 16px;
    text-align: center;
}

/* Select2 error border */
.select2-selection.error {
    border: 1px solid red !important;
}

/*Search Fields*/

.position-relative {
    position: relative;
}

/* 2. Dropdown styling */
.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000 !important;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    max-height: 250px;
    overflow-y: auto;
    margin-top: 5px;
}

.suggestion-item {
    padding: 10px 15px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #f1f5f9;
    transition: background-color 0.2s ease;
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-item:hover {
    background-color: #f8fafc;
    color: #007bff;
}

.jobnest-loading {
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(19, 88, 115, 0.15);
}

/*Video CV*/

/* Base Card Layout */
    .card {
      background-color: #ffffff;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      border: 1px solid #e5e7eb;
    }

    /* Card Header */
    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .card-title-group {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .card-title {
      font-size: 16px;
      font-weight: 700;
      color: #1f2937;
      margin: 0;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .badge {
      font-size: 11px;
      font-weight: 600;
      padding: 3px 8px;
      border-radius: 4px;
      text-transform: uppercase;
    }

    .badge-gray {
      background-color: #f3f4f6;
      color: #6b7280;
    }

    .badge-optional {
      background-color: #eff6ff;
      color: #2563eb;
    }

    .badge-boost {
      background-color: #ecfdf5;
      color: #059669;
    }

    /* -------------------------------------------------- */
    /* STATE 1: UPLOAD DROPZONE UI                         */
    /* -------------------------------------------------- */
    .upload-dropzone {
      border: 2px dashed #d1d5db;
      border-radius: 8px;
      padding: 24px 16px;
      text-align: center;
      background-color: #fafafa;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .upload-dropzone:hover {
      border-color: #2563eb;
      background-color: #f0f7ff;
    }

    .upload-icon {
      font-size: 28px;
      margin-bottom: 8px;
    }

    .dropzone-text {
      font-size: 13px;
      color: #4b5563;
      margin: 0 0 10px 0;
    }

    .dropzone-text strong {
      color: #111827;
    }

    .btn-browse {
      background-color: #2563eb;
      color: #ffffff;
      border: none;
      padding: 8px 16px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 6px;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }

    .btn-browse:hover {
      background-color: #1d4ed8;
    }

    .file-limits {
      font-size: 11px;
      color: #9ca3af;
      margin-top: 10px;
    }

    .file-input-hidden {
      display: none;
    }

    /* -------------------------------------------------- */
    /* STATE 2: UPLOADED PREVIEW UI                        */
    /* -------------------------------------------------- */
    .video-preview-wrapper {
      position: relative;
      width: 100%;
      border-radius: 8px;
      overflow: hidden;
      background-color: #000000;
      aspect-ratio: 16 / 9;
    }

    .video-preview-wrapper video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .file-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 10px;
      padding: 8px 12px;
      background-color: #f9fafb;
      border-radius: 6px;
      border: 1px solid #f3f4f6;
    }

    .file-name {
      font-size: 12px;
      font-weight: 500;
      color: #374151;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 200px;
    }

    .file-size {
      font-size: 11px;
      color: #9ca3af;
    }

    .action-buttons {
      display: flex;
      gap: 8px;
      margin-top: 12px;
    }

    .action-buttons .btn-secondary {
      flex: 1;
      background-color: #ffffff;
      border: 1px solid #d1d5db;
      color: #374151;
      padding: 8px 12px;
      font-size: 12px;
      font-weight: 600;
      border-radius: 6px;
      cursor: pointer;
      text-align: center;
    }

    .action-buttons .btn-secondary:hover {
      background-color: #f9fafb;
      border-color: #9ca3af;
    }

    .action-buttons .btn-danger {
      background-color: #ffffff;
      border: 1px solid #fee2e2;
      color: #dc2626;
      padding: 8px 12px;
      font-size: 12px;
      font-weight: 600;
      border-radius: 6px;
      cursor: pointer;
    }

    .action-buttons .btn-danger:hover {
      background-color: #fef2f2;
    }

    /* Tip Box */
    .tip-box {
      margin-top: 14px;
      padding: 10px 12px;
      background-color: #fffbeb;
      border: 1px solid #fef3c7;
      border-radius: 6px;
      font-size: 12px;
      color: #b45309;
      display: flex;
      align-items: center;
      gap: 6px;
    }


/*Subscription*/

.nav-highlight-badge {
  display: flex;
  align-items: center;
  gap: 6px;
}

.badge-pulse {
  background-color: #ff3b30;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 12px;
  text-transform: uppercase;
  animation: pulse-ring 1.8s infinite;
}

@keyframes pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(255, 59, 48, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 59, 48, 0);
  }
}