/*
 * ui-upgrade.css — Nearby Hiring Phase 1 Visual Upgrade
 * Strategy: Override-based. Linked AFTER main.css.
 * Scope: Light mode only. No backend, no content changes.
 * Target: index.html, jobs.php, job-details.php, login.php, register.php, contact.php
 */

/* ============================================================
   SECTION 1: 15-SHADE BLUE COLOR SYSTEM
   ============================================================ */
:root {
  /* Sky Tints */
  --b50:  #f0f7ff;   /* ultra-light sky — light section backgrounds */
  --b100: #dbeafe;   /* light blue-gray — section separators, borders */
  --b150: #bfdbfe;   /* gentle blue — card borders, subtle bg */
  --b200: #93c5fd;   /* soft blue — icon background tints */
  --b250: #60a5fa;   /* sky blue — decorative elements */

  /* Core Interactive Blues */
  --b300: #3b82f6;   /* link blue — standard links */
  --b400: #2563eb;   /* mid blue — primary buttons base */
  --b500: #1d4ed8;   /* hover blue — button hover, active states */
  --b600: #1e40af;   /* emphasis blue — section underlines, icons */

  /* Deep Blues */
  --b700: #1e3a8a;   /* section separator deep */
  --b800: #1e3270;   /* pre-footer, deep accent */
  --b900: #0f2460;   /* deep navy — section title bars */
  --b950: #002366;   /* footer navy — aligns with existing header */

  /* Grays for neutral balance */
  --b-text: #2d3a4f;   /* primary text — warm near-black */
  --b-subtle: #f8faff; /* ultra-subtle bg — alternating sections */

  /* Shadow tokens */
  --shadow-card: 0 4px 24px rgba(26, 86, 219, 0.07);
  --shadow-card-hover: 0 8px 32px rgba(26, 86, 219, 0.14);
  --shadow-form: 0 2px 16px rgba(26, 86, 219, 0.06);

  /* Transition token */
  --trans: 0.3s ease;

  /* Dashboard Theme Defaults */
  --dash-bg: #f8fbff;
  --dash-sidebar: #052a7a;
  --dash-accent: #125bfb;
  --dash-pattern: none;
}

/* ============================================================
   SECTION 1.1: DASHBOARD THEMES
   ============================================================ */

/* Jobseeker/Candidate: Vibrant & Energetic Blue */
.theme-jobseeker {
  --dash-bg: #f0f7ff;
  --dash-sidebar: #0d47a1;
  --dash-accent: #1976d2;
  /* Pattern: Micro-cubes */
  --dash-pattern: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%231976d2' fill-opacity='0.03' fill-rule='evenodd'%3E%3Cpath d='M0 0h10v10H0V0zm10 10h10v10H10V10z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ITI & Vocational: Technical & Structured Blue */
.theme-iti {
  --dash-bg: #f5f9ff;
  --dash-sidebar: #1a237e;
  --dash-accent: #303f9f;
  /* Pattern: Blueprint Grids */
  --dash-pattern: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23303f9f' fill-opacity='0.03' fill-rule='evenodd'%3E%3Cpath d='M0 38.59V40h1.41l1.1-1.11L1.41 37.78 0 38.59zm2.82-2.82l1.11-1.1L2.82 33.56l-1.1 1.11 1.1 1.11zm2.82-2.82L7.05 31.84 5.94 30.73l-1.11 1.11 1.11 1.11zm2.82-2.82l1.1-1.11-1.11-1.11-1.11 1.11 1.11 1.11zm2.82-2.82l1.11-1.1-1.1-1.11-1.11 1.11 1.1 1.11zm2.82-2.82l1.1-1.11-1.11-1.11-1.11 1.11 1.11 1.11zm2.82-2.82l1.11-1.1-1.1-1.11-1.11 1.11 1.1 1.11zm2.82-2.82l1.1-1.11-1.11-1.11-1.11 1.11 1.11 1.11zm2.82-2.82l1.11-1.1-1.1-1.11-1.11 1.11 1.1 1.11zm2.82-2.82l1.1-1.11-1.11-1.11-1.11 1.11 1.11 1.11zm2.82-2.82l1.11-1.1-1.1-1.11-1.11 1.11 1.1 1.11zm2.82-2.82l1.1-1.11-1.11-1.11-1.11 1.11 1.11 1.11zm2.82-2.83l1.11-1.1-1.11-1.11-1.1 1.11 1.1 1.1zm2.82-2.82l1.1-1.11-1.11-1.11-1.11 1.11 1.11 1.11zm2.83-2.82l1.1-1.11-1.11-1.11-1.11 1.11 1.11 1.11zm2.82-2.82l1.11-1.1-1.1-1.11-1.11 1.11 1.1 1.11zm-2.82-2.82l-1.1 1.11-1.11-1.11 1.11-1.11 1.1 1.11zm-2.82-2.82l-1.11 1.1-1.1-1.11 1.11-1.11 1.1-1.11zm-2.82-2.82l-1.1 1.11-1.11-1.11 1.11-1.11 1.1 1.11zm-2.82-2.82l-1.11 1.1-1.1-1.11 1.11-1.11 1.1-1.11zm-2.82-2.82l-1.1 1.11-1.11-1.11 1.11-1.11 1.1 1.11zm-2.82-2.82l-1.11 1.1-1.1-1.11 1.11-1.11 1.1-1.11zm-2.82-2.82l-1.13 1.11-1.11-1.11 1.11-1.11 1.13 1.11zm-2.82-2.82l-1.11 1.1-1.11-1.11 1.11-1.11 1.11 1.11zm-2.82-2.82l-1.1 1.11-1.11-1.11 1.11-1.11 1.1 1.11zm-2.82-2.82l-1.11 1.1-1.1-1.11 1.11-1.11 1.1 1.11zm-2.82-2.82l-1.1 1.11-1.11-1.11 1.11-1.11 1.1 1.11zm-2.82-2.82l-1.11 1.1-1.1-1.11 1.11-1.11 1.1 1.11zm-2.82-2.82l-1.1 1.11-1.11-1.11 1.11-1.11 1.1 1.11zm-2.82-2.82l-1.11 1.1-1.1-1.11 1.11-1.11 1.1 1.11zm-2.82-2.82l-1.1 1.11-1.11-1.11 1.11-1.11 1.1 1.11zm-2.83-2.83l-1.1 1.11-1.11-1.11 1.11-1.11 1.1 1.11zm41.05-1.27V0h-1.41l-1.1 1.11 1.1 1.11 1.41-.81zm-2.82 2.82l-1.11 1.1 1.1 1.11 1.11-1.11-1.1-1.1zm-2.82 2.82l-1.1 1.11 1.11 1.11 1.11-1.11-1.11-1.11zm-2.82 2.82l-1.11 1.1 1.1 1.11 1.11-1.11-1.1-1.1zm-2.82 2.82l-1.1 1.11 1.11 1.11 1.11-1.11-1.11-1.11zm-2.82 2.82l-1.11 1.1 1.1 1.11 1.11-1.11-1.1-1.1zm-2.82 2.82l-1.1 1.11 1.11 1.11 1.11-1.11-1.11-1.11zm-2.82 2.82l-1.11 1.1 1.1 1.11 1.11-1.11-1.1-1.1zm-2.82 2.82l-1.1 1.11 1.11 1.11 1.11-1.11-1.11-1.11zm-2.82 2.82l-1.11 1.1 1.1 1.11 1.11-1.11-1.1-1.1zm-2.82 2.82l-1.1 1.11 1.11 1.11 1.11-1.11-1.11-1.11zm-2.82 2.82l-1.11 1.1 1.1 1.11 1.11-1.11-1.1-1.1zm-2.82 2.82l-1.1 1.11 1.11 1.11 1.11-1.11-1.11-1.11zm-2.82 2.83l-1.11 1.1 1.11 1.11 1.1-1.11-1.1-1.1zm-2.82 2.82l-1.1 1.11 1.11 1.11 1.11-1.11-1.11-1.11zm-2.83 2.82l-1.1 1.11 1.11 1.11 1.11-1.11-1.11-1.11z'/%3E%3C/g%3E%3C/svg%3E");
}

/* Govt Agencies: Official & Authoritative Blue */
.theme-govt {
  --dash-bg: #f8fbfd;
  --dash-sidebar: #01579b;
  --dash-accent: #0288d1;
  /* Pattern: Professional Waves */
  --dash-pattern: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264 1.088-.402l1.768-.661C33.64 15.347 39.647 14 50 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072h1.688c.348-.13.714-.29 1.096-.48.986-.492 1.947-1.01 2.893-1.55l.286-.163L80.666 14.5c9.205-5.235 15.027-8.5 24.334-8.5h2.14c.325.26.65.518.974.775l.405.32c.9.71 1.76 1.374 2.585 1.986l1.225.91c.784.58 1.558 1.144 2.316 1.688l.681.488c.31.222.62.443.932.66h1.614c.483-.24 1.012-.55 1.583-.91l.8-.52c1.474-.954 2.937-1.87 4.398-2.73 1.442-.85.348-.13c.092-.034.184-.067.276-.1l3.053-1.078c9.205-5.235 15.027-8.5 24.334-8.5h2.14a40.34 40.34 0 0 1 .974.775c.405.32.113.088.405.32.9.71 1.76 1.374 2.585 1.986l1.225.91c.784.58 1.558 1.144 2.316 1.688l.681.488c.31.222.62.443.932.66h1.614c.483-.24 1.012-.55 1.583-.91l.8-.52c1.474-.954 2.937-1.87 4.398-2.73 1.442-.85l.092-.034c.092-.034.184-.067.276-.1l3.053-1.078C194.334 1.5 200.156 0 209.463 0h2.14a41.34 41.34 0 0 1 .974.775c.405.32.113.088.405.32.9.71 1.76 1.374 2.585 1.986l1.225.91c.784.58 1.558 1.144 2.316 1.688l.681.488c.31.222.62.443.932.66h1.614c.483-.24 1.012-.55 1.583-.91l.8-.52c1.474-.954 2.937-1.87 4.398-2.73 1.442-.85.348-.13c.092-.034.184-.067.276-.1l3.053-1.078C294.334 1.5 300.156 0 309.463 0h2.14c.321.258.643.515.964.772l.415.323c.9.71 1.76 1.374 2.585 1.986l1.225.91c.784.58 1.558 1.144 2.316 1.688l.681.488c.31.222.62.443.932.66h1.614c.483-.24 1.012-.55 1.583-.91l.8-.52c1.474-.954 2.937-1.87 4.398-2.73 1.442-.85.348-.13c.092-.034.184-.067.276-.1l3.053-1.078C394.334 1.5 400.156 0 409.463 0h2.14a42.34 42.34 0 0 1 .974.775c.405.32.113.088.405.32.9.71 1.76 1.374 2.585 1.986l1.225.91c.784.58 1.558 1.144 2.316 1.688l.681.488c.31.222.62.443.932.66h1.614c.483-.24 1.012-.55 1.583-.91l.8-.52c1.474-.954 2.937-1.87 4.398-2.73 1.442-.85.348-.13c.092-.034.184-.067.276-.1l3.053-1.078C494.334 1.5 500.156 0 509.463 0h2.14a43.34 43.34 0 0 1 .974.775c.405.32.113.088.405.32.9.71 1.76 1.374 2.585 1.986l1.225.91c.784.58 1.558 1.144 2.316 1.688l.681.488c.31.222.62.443.932.66h1.614c.483-.24 1.012-.55 1.583-.91l.8-.52c1.474-.954 2.937-1.87 4.398-2.73 1.442-.85.348-.13c.092-.034.184-.067.276-.1l3.053-1.078c9.205-5.235 15.027-8.5 24.334-8.5h2.14c.325.26.65.518.974.775l.405.32c.9.71 1.76 1.374 2.585 1.986l1.225.91c.784.58 1.558 1.144 2.316 1.688l.681.488c.31.222.62.443.932.66h1.614c.483-.24 1.012-.55 1.583-.91l.8-.52c1.474-.954 2.937-1.87 4.398-2.73 1.442-.85.348-.13c.092-.034.184-.067.276-.1l3.053-1.078c9.205-5.235 15.027-8.5 24.334-8.5h2.14a40.34 40.34 0 0 1 .974.775c.405.32.113.088.405.32.9.71 1.76 1.374 2.585 1.986l1.225.91c.784.58 1.558 1.144 2.316 1.688l.681.488c.31.222.62.443.932.66h1.614c.483-.24 1.012-.55 1.583-.91l.8-.52c1.474-.954 2.937-1.87 4.398-2.73 1.442-.85l.092-.034c.092-.034.184-.067.276-.1l3.053-1.078c9.205-5.235 15.027-8.5 24.334-8.5h2.14a41.34 41.34 0 0 1 .974.775c.405.32.113.088.405.32.9.71 1.76 1.374 2.585 1.986l1.225.91c.784.58 1.558 1.144 2.316 1.688l.681.488c.31.222.62.443.932.66h1.614c.483-.24 1.012-.55 1.583-.91l.8-.52c1.474-.954 2.937-1.87 4.398-2.73 1.442-.85.348-.13c.092-.034.184-.067.276-.1l3.053-1.078c9.205-5.235 15.027-8.5 24.334-8.5h2.14a42.34 42.34 0 0 1 .974.775c.405.32.113.088.405.32.9.71 1.76 1.374 2.585 1.986l1.225.91c.784.58 1.558 1.144 2.316 1.688l.681.488c.31.222.62.443.932.66h1.614c.483-.24 1.012-.55 1.583-.91l.8-.52c1.474-.954 2.937-1.87 4.398-2.73 1.442-.85.348-.13c.092-.034.184-.067.276-.1l3.053-1.078c9.205-5.235 15.027-8.5 24.334-8.5h2.14a43.34 43.34 0 0 1 .974.775c.405.32.113.088.405.32.9.71 1.76 1.374 2.585 1.986l1.225.91c.784.58 1.558 1.144 2.316 1.688l.681.488c.31.222.62.443.932.66h1.614c.483-.24 1.012-.55 1.583-.91l.8-.52c1.474-.954 2.937-1.87 4.398-2.73 1.442-.85.348-.13c.092-.034.184-.067.276-.1l3.053-1.078z' fill='%230288d1' fill-opacity='0.02' fill-rule='evenodd'/%3E%3C/svg%3E");
}

/* Associates: Partnership & Collaborative Blue */
.theme-associates {
  --dash-bg: #f5f8ff;
  --dash-sidebar: #1565c0;
  --dash-accent: #1e88e5;
  /* Pattern: Connected Dots */
  --dash-pattern: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%231e88e5' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2v-4h4v-2h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2v-4h4v-2H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ============================================================
   SECTION 1.2: DASHBOARD LAYOUT OVERRIDES (THEME-AWARE)
   ============================================================ */

/* Main content area with pattern support */
.main-content {
  background-color: var(--dash-bg) !important;
  background-image: var(--dash-pattern) !important;
  min-height: 100vh;
  transition: all 0.4s ease;
}

/* Sidebar theme overrides */
.sidebar {
  background-color: var(--dash-sidebar) !important;
  box-shadow: 4px 0 15px rgba(0,0,0,0.1) !important;
}

.sidebar .menu li.active {
  background: var(--dash-accent) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.sidebar .menu li:hover {
  background: rgba(255,255,255,0.1) !important;
}

/* Table header theme overrides */
.table-dark {
  background-color: var(--dash-sidebar) !important;
  border-color: var(--dash-sidebar) !important;
}

/* UI Beauty: Frosted Topbar */
.topbar {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,0.05);
  padding: 15px 30px !important;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* UI Beauty: Card Elevation */
.box {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.05) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0, 35, 102, 0.05) !important;
  padding: 30px !important;
  transition: transform 0.3s ease;
}

.box:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 40px rgba(0, 35, 102, 0.08) !important;
}

/* UI Beauty: Modern Table Styling */
.table {
  border-radius: 12px;
  overflow: hidden;
  border: none !important;
}

.table thead th {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1px;
  padding: 15px !important;
  border: none !important;
}

.table tbody td {
  padding: 15px !important;
  border-bottom: 1px solid #f0f3f8 !important;
  vertical-align: middle;
  font-size: 14px;
}

/* UI Beauty: Dashboard Greeting */
.welcome-msg h1 {
  font-size: 24px;
  font-weight: 800;
  color: var(--dash-sidebar);
  margin-bottom: 5px;
}

.welcome-msg p {
  color: #718096;
  font-size: 15px;
}

/* ============================================================
   SECTION 2: GLOBAL TYPOGRAPHY REFINEMENT
   ============================================================ */
body {
  color: var(--b-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  color: #002366; /* Deep Navy for light backgrounds */
  line-height: 1.25;
  letter-spacing: -0.01em;
}

p {
  line-height: 1.75;
  color: #4a5568; /* Readable gray for white backgrounds */
}

a {
  color: var(--b400);
  transition: color var(--trans);
}

a:hover {
  color: var(--b500);
}

/* ============================================================
   SECTION 3: HEADER & NAVIGATION REFINEMENTS
   ============================================================ */

/* Keep navy header — just add elevation and refine details */
/* Sync Navbar color with Footer — Tech Blue (#125bfb) */
.header {
  padding: 12px 0;
  box-shadow: 0 4px 20px rgba(18, 91, 251, 0.2);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background-color: #052a7a !important; /* Tech Blue as requested */
}

/* Site name styling polish - Explicitly White for visibility */
.header .logo .sitename,
.header .logo .sitename h1 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #ffffff !important; /* Force white for maximum visibility on tech-blue */
}

.header .logo .sitename span {
  color: #c0d5ff; /* Lighter tint for the span (ITI-) */
  font-style: normal;
}

/* Register Button — Modernized */
.header .btn-getstarted,
.header .btn-getstarted:focus {
  background: var(--b400);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 9px 22px;
  border-radius: 8px;
  border: none;
  transition: background var(--trans), transform var(--trans);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
  background: var(--b500);
  transform: translateY(-1px);
}

/* Nav Links */
@media (min-width: 1200px) {
  .navmenu a,
  .navmenu a:focus {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.9);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: #fff;
  }

  .navmenu > ul > li > a:before {
    background-color: var(--b250);
    height: 2px;
    bottom: -12px;
  }

  /* Dropdown polish */
  .navmenu .dropdown ul {
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    border: 1px solid var(--b100);
    padding: 8px 0;
  }

  .navmenu .dropdown ul a {
    font-size: 14px;
    font-weight: 500;
    color: var(--b-text);
    padding: 10px 20px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul li:hover > a {
    color: var(--b500);
    background: var(--b50);
  }
}

/* Login Dropdown Button */
.navmenu .dropdown > a.btn-login {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  padding: 8px 18px;
  border-radius: 8px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all var(--trans);
  font-size: 15px;
}

.navmenu .dropdown > a.btn-login:hover {
  background: rgba(255,255,255,0.22);
  color: #fff;
}

/* ============================================================
   SECTION 4: BUTTON STANDARDS
   ============================================================ */

/* Primary Buttons */
.btn-primary {
  background: var(--b400);
  border-color: var(--b400);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  padding: 10px 24px;
  border-radius: 8px;
  transition: background var(--trans), transform var(--trans), box-shadow var(--trans);
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.25);
  letter-spacing: 0.01em;
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--b500);
  border-color: var(--b500);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35);
}

/* Success Button (used in login.php) */
.btn-success {
  background: var(--b400);
  border-color: var(--b400);
  color: #fff;
  font-weight: 600;
  padding: 10px 24px;
  border-radius: 8px;
  transition: background var(--trans), transform var(--trans);
}

.btn-success:hover,
.btn-success:focus {
  background: var(--b500);
  border-color: var(--b500);
  color: #fff;
  transform: translateY(-1px);
}

/* Info Button (used for Registration CTA) */
.btn-info {
  background: #ecf3ff;
  border: 1.5px solid var(--b300);
  color: var(--b500);
  font-weight: 600;
  padding: 10px 24px;
  border-radius: 8px;
  transition: all var(--trans);
}

.btn-info:hover,
.btn-info:focus {
  background: var(--b400);
  border-color: var(--b400);
  color: #fff;
  transform: translateY(-1px);
}

/* Explore Service Button */
.btn-explore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--b500);
  font-weight: 600;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 8px;
  background: var(--b50);
  border: 1px solid var(--b150);
  transition: all var(--trans);
  text-decoration: none;
}

.btn-explore:hover {
  background: var(--b400);
  color: #fff;
  border-color: var(--b400);
  transform: translateY(-1px);
}

/* Hero CTA Buttons */
.hero-btns .btn-primary {
  padding: 12px 32px;
  font-size: 16px;
  border-radius: 8px;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(30, 64, 175, 0.4);
}

.hero-btns .btn-outline-light {
  border-radius: 8px;
  font-weight: 600;
  padding: 12px 32px;
  font-size: 16px;
  border-width: 2px;
}

/* ============================================================
   SECTION 5: CARD STANDARDS
   ============================================================ */

/* Service Cards */
.service-card {
  border-radius: 14px;
  border: 1px solid var(--b100);
  box-shadow: var(--shadow-card);
  transition: transform var(--trans), box-shadow var(--trans);
  background: #fff;
  overflow: hidden;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--b200);
}

.service-card .card-header {
  background: var(--b50);
  border-bottom: 1px solid var(--b100);
  padding: 20px;
}

.service-card .icon-box {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--b400), var(--b600));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.service-card .icon-box i {
  font-size: 22px;
  color: #fff;
}

.service-card h6 {
  font-size: 14px;
  font-weight: 700;
  color: var(--b900);
  margin-bottom: 0;
  line-height: 1.4;
}

/* Why Us number cards */
.card-item {
  padding: 28px 24px;
  border-radius: 12px;
  border: 1px solid var(--b100);
  background: #fff;
  box-shadow: var(--shadow-card);
  transition: transform var(--trans), box-shadow var(--trans);
}

.card-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--b200);
}

.card-number {
  font-size: 36px;
  font-weight: 800;
  color: var(--b400);
  line-height: 1;
  margin-bottom: 12px;
  letter-spacing: -1px;
}

.card-item h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--b900);
}

/* Contact Form Card */
.contact-form {
  background: #fff;
  border-radius: 16px;
  padding: 40px;
  border: 1px solid var(--b100);
  box-shadow: var(--shadow-form);
}

.contact-form h3 {
  color: var(--b900);
  font-weight: 700;
  font-size: 22px;
  margin-bottom: 24px;
}

/* Feature Item Boxes */
.service-item {
  border-radius: 12px;
  padding: 28px;
  border: 1px solid var(--b100);
  background: #fff;
  box-shadow: var(--shadow-card);
}

.service-item.item-cyan {
  border-left: 4px solid var(--b400);
  background: linear-gradient(135deg, var(--b50), #fff);
}

.service-item.item-orange {
  border-left: 4px solid var(--b300);
  background: linear-gradient(135deg, #f0f8ff, #fff);
}

.service-item ul li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  color: #4a5568;
  font-size: 15px;
  line-height: 1.6;
}

.service-item ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--b400);
}

/* ============================================================
   SECTION 6: FORM INPUT STANDARDS
   ============================================================ */

/* Inputs */
.form-control {
  min-height: 48px;
  border: 1.5px solid var(--b150);
  border-radius: 8px;
  font-size: 15px;
  color: var(--b-text);
  background: #fff;
  padding: 10px 14px;
  transition: border-color var(--trans), box-shadow var(--trans);
}

.form-control:focus {
  border-color: var(--b400);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
  outline: none;
  background: #fff;
}

.form-control::placeholder {
  color: #94a3b8;
  font-size: 14px;
}

textarea.form-control {
  min-height: auto;
  resize: vertical;
}

/* Select elements */
select.form-control {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%232563eb' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  -webkit-appearance: none;
  appearance: none;
}

/* Error state */
.form-control.is-invalid,
.was-validated .form-control:invalid {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Labels */
label {
  font-size: 14px;
  font-weight: 600;
  color: var(--b-text);
  margin-bottom: 6px;
  display: block;
}

/* ============================================================
   SECTION 7: HERO SECTION UPGRADE
   ============================================================ */

/* 1. Hero Section Reset & Polish */
.hero-2 {
  padding: 0 !important;
  overflow: hidden;
  position: relative;
  background-color: #000 !important; /* Ensure video background is solid */
}

.hero-2-carousel {
  min-height: auto !important;
}

.hero-2 .carousel-item {
  height: auto !important;
  min-height: 400px;
}

.hero-2 video {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%; /* Ensure video fills container */
  margin-bottom: 0 !important;
}

/* Ensure the carousel doesn't have min-height overflow */
#hero-2-carousel {
  height: clamp(400px, 60vh, 800px) !important;
  overflow: hidden;
}

.hero-2 .carousel-item {
  height: 100% !important;
}

/* Hero overlay for text contrast */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 10, 40, 0.45) 0%,
    rgba(0, 20, 70, 0.25) 50%,
    rgba(0, 15, 50, 0.55) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* The video/image fills the section */
#hero-2 video {
  width: 100%;
  display: block;
}

/* Content on top of overlay */
.carousel-container {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
  animation: heroFadeIn 1s ease forwards;
  animation-delay: 0.2s;
  opacity: 0;
}

/* Hero fade-in animation */
@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.carousel-container h3 {
  font-size: clamp(28px, 5vw, 52px);
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,0.5);
  margin-bottom: 16px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.carousel-container p {
  font-size: clamp(15px, 2vw, 19px);
  color: rgba(255,255,255,0.92);
  max-width: 640px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
  line-height: 1.6;
  margin-bottom: 8px;
}

/* ============================================================
   SECTION 8: SECTION SPACING & TITLES
   ============================================================ */

/* Desktop: 80px vertical padding */
section,
.section {
  padding: 80px 0;
}

/* Mobile: 50px */
@media (max-width: 768px) {
  section,
  .section {
    padding: 50px 0;
  }
}

/* Section title bar */
.section-title h2 {
  font-size: 30px;
  font-weight: 800;
  color: var(--b900);
  letter-spacing: -0.02em;
}

.section-title h2:after {
  background: var(--b500);
  width: 48px;
  height: 3px;
  border-radius: 2px;
}

.section-title p {
  color: #64748b;
  font-size: 16px;
  max-width: 640px;
  margin: 0 auto;
}

/* Light background sections */
.light-background {
  background-color: var(--b-subtle);
  border-top: 1px solid var(--b100);
  border-bottom: 1px solid var(--b100);
}

/* Container max-width cap and forced centering */
.container {
  max-width: 1260px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* ============================================================
   SECTION 9: ABOUT SECTIONS
   ============================================================ */

.about-content h3 {
  font-size: 24px;
  font-weight: 700;
  color: var(--b900);
  margin-bottom: 16px;
}

.about-description {
  font-size: 15.5px;
  line-height: 1.8;
  color: #4a5568;
}

/* Image rounding for about section */
.about-content img,
.image-wrapper img {
  border-radius: 16px;
}

/* ============================================================
}

.login-section p.text-center a {
  color: var(--b400);
  font-weight: 500;
}

.login-section p.text-center a:hover {
  color: var(--b600);
}

/* ============================================================
   SECTION 11: JOBS LISTING STYLES
   ============================================================ */

/* Job card styling */
.job-card,
.card {
  border-radius: 12px;
  border: 1px solid var(--b100);
  box-shadow: var(--shadow-card);
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
  background: #fff;
  overflow: hidden;
}

.job-card:hover,
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--b200);
}

/* Job search/filter bar */
.job-filter,
.search-bar,
input[type="search"],
input[type="text"].search-input {
  border-radius: 8px;
  border: 1.5px solid var(--b150);
  background: #fff;
  transition: border-color var(--trans), box-shadow var(--trans);
}

.job-filter:focus,
.search-bar:focus {
  border-color: var(--b400);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Badges/Tags */
.badge {
  border-radius: 6px;
  font-weight: 600;
  font-size: 12px;
  padding: 4px 10px;
}

.badge-primary,
.badge.bg-primary {
  background: var(--b50);
  color: var(--b600);
  border: 1px solid var(--b200);
}

/* Pagination */
.pagination .page-link {
  border-radius: 8px;
  border: 1px solid var(--b100);
  color: var(--b500);
  font-weight: 500;
  margin: 0 2px;
  transition: all var(--trans);
}

.pagination .page-link:hover {
  background: var(--b400);
  color: #fff;
  border-color: var(--b400);
}

.pagination .page-item.active .page-link {
  background: var(--b400);
  border-color: var(--b400);
  color: #fff;
}

/* ============================================================
   SECTION 12: FOOTER REFINEMENTS
   ============================================================ */

/* Footer newsletter section */
.footer-newsletter {
  background: #f0f6ff;
  border-top: 2px solid var(--b100);
  padding: 50px 0;
}

.footer-newsletter h4 {
  font-size: 22px;
  font-weight: 700;
  color: var(--b900);
}

.footer-newsletter p {
  color: #bdbdbd;
  font-size: 15px;
}

.footer-newsletter .newsletter-form {
  border-radius: 10px;
  border: 1.5px solid var(--b150);
  background: #fff;
  box-shadow: 0 2px 12px rgba(37, 99, 235, 0.08);
  padding: 6px 6px 6px 16px;
}

.footer-newsletter .newsletter-form:focus-within {
  border-color: var(--b400);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.footer-newsletter .newsletter-form input[type=email] {
  background: transparent;
  color: var(--b-text);
  font-size: 15px;
}

.footer-newsletter .newsletter-form button,
.footer-newsletter .newsletter-form input[type=submit] {
  background: var(--b400);
  color: #fff;
  border-radius: 50px !important; /* Rounded corners as requested */
  padding: 10px 30px;
  border: none;
  transition: background var(--trans);
  font-size: 14px;
}

.footer-newsletter .newsletter-form button:hover,
.footer-newsletter .newsletter-form input[type=submit]:hover {
  background: var(--b500);
}

/* Footer dark section — keep dark-background but polish it */
.footer.dark-background {
  --background-color: var(--b950);
}

.footer .sitename {
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.3px;
}

.footer h4 {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.85);
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer .footer-links ul a {
  color: rgba(255,255,255,0.65);
  font-size: 14px;
  transition: color var(--trans);
}

.footer .footer-links ul a:hover {
  color: var(--b250);
}

.footer .footer-links ul i {
  color: var(--b300);
}

.footer .footer-contact p {
  font-size: 13.5px;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
}

.footer .footer-contact i {
  color: var(--b300);
  margin-right: 6px;
}

.footer .social-links a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.7);
  font-size: 20px;
  transition: all 0.3s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05);
}

.footer .social-links a:hover {
  background: var(--b400);
  border-color: var(--b400);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.footer .copyright {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 20px 0;
}

.footer .copyright p {
  color: rgba(255,255,255,0.6);
  font-size: 13px;
}

.footer .credits a {
  color: var(--b250);
}

/* ============================================================
   SECTION 13: SCROLL TOP BUTTON
   ============================================================ */

.scroll-top {
  border-radius: 50%;
  background: var(--b400);
  width: 42px;
  height: 42px;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
  transition: all var(--trans);
}

.scroll-top:hover {
  background: var(--b600);
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.4);
}

.scroll-top i {
  font-size: 22px;
}

/* ============================================================
   SECTION 14: ALERT MESSAGES
   ============================================================ */

.alert-success {
  background: #ecfdf5;
  border: 1.5px solid #6ee7b7;
  color: #065f46;
  border-radius: 8px;
}

.alert-danger {
  background: #fef2f2;
  border: 1.5px solid #fca5a5;
  color: #991b1b;
  border-radius: 8px;
}

/* ============================================================
   SECTION 15: RESPONSIVE MOBILE CORRECTIONS
   ============================================================ */

@media (max-width: 768px) {
  /* Container pads */
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Contact form card */
  .contact-form {
    padding: 24px 16px;
  }

  /* Login form card */
  #login-form {
    padding: 24px 16px;
  }

  /* Hero buttons stacked */
  .hero-btns {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .hero-btns .btn-primary {
    width: 100%;
    max-width: 280px;
  }

  /* Cards full-width */
  .service-card,
  .card-item {
    margin-bottom: 16px;
  }

  /* Section title smaller */
  .section-title h2 {
    font-size: 24px;
  }

  /* About content stack */
  .about-content {
    padding-left: 0 !important;
  }

  /* Footer links */
  .footer .footer-links {
    text-align: left;
  }

  /* Job cards */
  .job-card {
    margin-bottom: 16px;
  }
}

@media (max-width: 576px) {
  .header .logo .sitename {
    font-size: 18px;
  }

  .header .btn-getstarted {
    padding: 7px 14px;
    font-size: 13px;
    margin-left: 10px;
  }
}

/* ============================================================
   SECTION 16: PHASE 2 REFINEMENTS (USER FEEDBACK)
   ============================================================ */

/* 1. Global Background Reset (Remove Brown/Tan) */
section, .section, .about-2, .features-2, .services, .why-us, .testimonials, .contact {
  background-color: #fff !important;
}

.light-background, .features-2 {
  background-color: var(--b50) !important; /* Sky Blue Tint */
}

/* 2. Icon Visibility & Color - Darkened for premium look */
.service-item .icon i, 
.service-item i, 
.card-item .card-number, 
.feature-list li i,
.about-content i,
.contact .info-item i {
  color: #003366 !important; /* Darker Blue as requested */
}

/* Fix double dot issue in lists */
.service-item ul {
  list-style: none !important;
  padding-left: 0 !important;
}

.service-item ul li::before {
  content: '' !important;
  background: #003366 !important; /* Matching darker blue dot */
}

/* 3. Hero Search Bar Styling */
.hero-search-wrap {
  width: 100%;
  max-width: 700px;
  margin: 25px auto 0;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.hero-search-wrap .form-control {
  border: none !important;
  height: 52px;
  border-radius: 10px !important;
  font-size: 16px;
  padding-left: 20px;
  background: #fff !important;
}

.hero-search-wrap .btn-primary {
  height: 52px;
  border-radius: 10px !important;
  padding: 0 35px;
  font-weight: 700;
  margin-left: 8px;
}

/* 4. Contact/Form Section Polish */
.contact {
  background-color: var(--b400) !important; /* Blue background for section */
  padding: 60px 0;
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email] {
  padding: 10px 15px;
}

.contact .php-email-form textarea {
  padding: 12px 15px;
}

/* ============================================================
   SECTION 18: CLIENTS SLIDER
   ============================================================ */
.clients {
  padding: 40px 0;
  background: var(--b50);
}

.clients .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: var(--b50);
  display: flex;
  justify-content: center;
  align-items: center;
}

.clients .client-logo {
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.clients .client-logo img {
  max-width: 100%;
  max-height: 80px; /* Standardize logo height */
  transition: all 0.3s ease-in-out;
  filter: grayscale(100%);
  opacity: 0.6;
}

.clients .client-logo:hover img {
  filter: none;
  opacity: 1;
  transform: scale(1.1); /* Subtle zoom effect */
}

.contact .section-title h2, 
.contact .section-title p {
  color: #fff !important;
}

.contact .section-title h2:after {
  background: #fff !important;
}

.contact .contact-form {
  background: #fff !important;
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

/* 5. Footer "EduskillX Clone" Design */
.footer {
  padding-top: 80px;
  background-color: #04339b !important; /* Tech Blue as requested */
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer h4 {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  margin-bottom: 25px !important;
  border: none !important;
}

.footer .footer-links ul {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.footer .footer-links ul li {
  padding: 5px 0 !important;
}

.footer .footer-links a, 
.footer .footer-contact p {
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.9) !important; /* Brighter for blue background */
  line-height: 1.6 !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
}

.footer .footer-links a:hover {
  color: #fff !important;
  padding-left: 2px !important; /* Subtle shift instead of underline */
}

/* Removal of all icons from link lists per EduskillX style */
.footer .footer-links ul li i,
.footer .footer-contact i {
  display: none !important;
}

/* 3-Column Copyright Bar */
.copyright-bar {
  margin-top: 60px !important;
  padding: 30px 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.copyright-bar p {
  margin: 0 !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.4) !important;
}

.copyright-bar strong {
  color: rgba(255, 255, 255, 0.7) !important;
}

.copyright-bar .social-links a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border-radius: 50% !important;
  margin-left: 10px !important;
  font-size: 20px !important;
  transition: 0.3s ease-in-out !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}

.copyright-bar .social-links a:hover {
  background: var(--b400) !important;
  color: #fff !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important;
}

/* Mobile cleanup for 5-col grid */
@media (max-width: 768px) {
  .footer .footer-links {
    margin-bottom: 30px !important;
  }
}
/* ============================================================
   SECTION 17: HIGH CONTRAST DARK BACKGROUNDS
   ============================================================ */

.dark-background, 
.job-title,
.contact {
  color: #ffffff !important;
}

.dark-background h1, 
.dark-background h2, 
.dark-background h3, 
.dark-background h4, 
.dark-background h5, 
.dark-background h6,
.job-title h1,
.job-title h2,
.job-title h3,
.job-title h4,
.contact h1,
.contact h2 {
  color: #ffffff !important; /* Force white headings in dark sections */
}

.dark-background p,
.job-title p,
.contact p {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* 6. Premium Login Page Modernization */
.login-section {
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
  min-height: calc(100vh - 100px);
  padding: 80px 0;
  display: flex;
  align-items: center;
}

.login-card {
  background: #ffffff;
  border: 1px solid #edf2f7;
  border-radius: 24px;
  box-shadow: 0 15px 35px rgba(0, 35, 102, 0.1);
  padding: 48px;
  width: 100%;
  max-width: 460px; /* Sensible width for the card itself */
  margin: 0 auto;
  transition: all 0.3s ease;
}

.login-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 45px rgba(0, 35, 102, 0.15);
}

.login-title {
  color: #002366;
  font-weight: 800;
  margin-bottom: 32px;
  font-size: 1.85rem;
  letter-spacing: -0.7px;
}

.login-form .form-label {
  margin-bottom: 8px;
  color: #4a5568;
}

.login-form .form-control {
  background: #fdfdfe;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 1rem;
  transition: all 0.2s ease;
}

.login-form .form-control:focus {
  border-color: #125bfb;
  box-shadow: 0 0 0 4px rgba(18, 91, 251, 0.12);
  background: #fff;
}

.login-form select.form-control {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234a5568'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.25rem center;
  background-size: 1.25rem;
}

.btn-login-submit {
  background: #125bfb;
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 16px;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.3px;
  box-shadow: 0 6px 15px rgba(18, 91, 251, 0.25);
  transition: all 0.2s ease;
  cursor: pointer;
}

.btn-login-submit:hover {
  background: #052a7a;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(5, 42, 122, 0.35);
  color: #ffffff;
}

.login-footer-text {
  color: #718096;
  font-size: 0.95rem;
  margin: 24px 0;
  line-height: 1.6;
}

.forgot-link {
  color: #125bfb;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
}

.forgot-link:hover {
  text-decoration: underline;
}

.registration-prompt {
  background: #f8fafc;
  border-top: 1px solid #edf2f7;
  padding: 30px;
  margin: 32px -48px -48px -48px;
  border-radius: 0 0 24px 24px;
}

.btn-register-alt {
  color: #125bfb;
  border: 2.5px solid #125bfb;
  border-radius: 12px;
  padding: 12px 28px;
  font-weight: 700;
  background: transparent;
  transition: all 0.2s;
  display: inline-block;
  text-decoration: none;
}

.btn-register-alt:hover {
  background: #125bfb;
  color: #ffffff;
}

/* Responsive Adjustments for Main Content */
@media (max-width: 991.98px) {
  .main-content {
    margin-left: 0;
  }
  .sidebar-collapsed .main-content {
    margin-left: 0;
  }
}

/* ============================================================
   SECTION 14b: SHARED JOB BANNER UI (.job-title)
   ============================================================ */

.job-title {
  position: relative;
  background: url("../img/cta/Jobs slider.png") center center / cover no-repeat;
  padding: 100px 0 120px;
  color: #fff;
  text-align: center;
  box-shadow: none !important;
}

.job-title .overlay {
  position: absolute;
  inset: 0;
  /* Lighter gradient overlay so the image is more visible */
  background: linear-gradient(135deg, rgba(0, 35, 102, 0.55) 0%, rgba(39, 120, 214, 0.45) 100%);
  z-index: 1;
}

.job-title .container {
  position: relative;
  z-index: 2;
}

/* Premium Search Form Styling (Glassmorphism - lighter blur) */
.job-title form {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 24px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    margin-top: 35px;
}

.job-title form .form-control,
.job-title form .form-select {
    border-radius: 8px;
    padding: 14px 20px;
    border: none;
    background: rgba(255, 255, 255, 0.95);
    color: #333;
    font-weight: 500;
    transition: all 0.3s ease;
}

.job-title form .form-control:focus,
.job-title form .form-select:focus {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    outline: none;
}

.job-title form .btn-success,
.job-title form .btn-primary {
    padding: 14px 20px;
    border-radius: 8px;
    background-color: #16a34a; /* Premium Green */
    border: none;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.job-title form .btn-success:hover,
.job-title form .btn-primary:hover {
    background-color: #15803d !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(22, 163, 74, 0.3);
}

@media (max-width: 768px) {
    .job-title { padding: 80px 0 100px; }
    .job-title form .btn-success, .job-title form .btn-primary { margin-top: 15px; }
}

/* ============================================================
   SECTION 15: GLOBAL INTERACTION FIXES (POINTERS & HOVERS)
   ============================================================ */

/* Force pointer cursor on all clickable elements */
.btn, button, input[type="submit"], input[type="button"], a, select, nav, .faq-item h3, .faq-toggle, .card-action, .navmenu a {
    cursor: pointer !important;
}

/* Prevent text underlines appearing on button hovers globally */
.btn:hover, button:hover, a.btn:hover, input[type="submit"]:hover {
    text-decoration: none !important;
}

/* Responsiveness for Login Page */
@media (max-width: 992px) {
  .login-card {
    padding: 36px;
    max-width: 420px;
  }
}

@media (max-width: 576px) {
  .login-card {
    padding: 32px 24px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0, 35, 102, 0.08);
  }
  
  .registration-prompt {
    margin: 24px -24px -32px -24px;
    padding: 24px;
  }
  
  .login-title {
    font-size: 1.6rem;
  }
}

/* ============================================================
   SECTION 16: MOBILE BOTTOM NAVIGATION (APP VIBE)
   ============================================================ */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #ffffff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  z-index: 9999;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 6px 0 8px 0; /* Reduced padding */
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.mobile-bottom-nav .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #64748b;
  text-decoration: none;
  font-size: 10px; /* Reduced font size */
  font-weight: 500;
  transition: all 0.2s ease-in-out;
  padding: 4px 0; /* Reduced padding */
  border-radius: 10px;
  width: 25%;
}

.mobile-bottom-nav .nav-item i {
  font-size: 18px; /* Reduced icon size */
  margin-bottom: 1px;
  transition: all 0.2s ease-in-out;
}

.mobile-bottom-nav .nav-item.active,
.mobile-bottom-nav .nav-item:hover {
  color: var(--accent-color);
  background-color: rgba(0, 35, 102, 0.04);
}

.mobile-bottom-nav .nav-item.active i,
.mobile-bottom-nav .nav-item:hover i {
  font-weight: bold;
  transform: translateY(-1px);
}

/* Footer Contact Info Row styling */
.footer-contact-info p {
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
}

@media (max-width: 768px) {
  body {
    padding-bottom: 60px !important; /* Reduced body padding */
  }
  .scroll-top {
    bottom: 70px !important; /* Adjusted scroll-top */
  }
}

/* ============================================================
   SECTION 17: PREMIUM SMOOTH SCROLLING & CURSOR FIXES
   ============================================================ */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* Global Pointer Cursor for all interactive elements */
a, 
button, 
input[type="submit"], 
input[type="button"], 
input[type="reset"], 
select, 
label[for], 
.nav-item, 
.social-links a, 
.scroll-top, 
.card, 
.btn,
.logo,
.navmenu i,
[role="button"] {
  cursor: pointer !important;
}

/* Performance optimization for smooth scrolling */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}