/* ====== Basic reset / layout ====== */
    *, *::before, *::after { box-sizing: border-box; }
    html,body { height:100%; margin:0; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:#111; background:#f3f6f9; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
    a { color:inherit; text-decoration:none; }
    .container { max-width:1100px; margin:0 auto; padding:20px; }

    /* ====== Header ====== */
    header { background:#ffffff; box-shadow: 0 1px 6px rgba(16,24,40,0.06); }
    .header-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; }
    .brand { font-weight:700; font-size:1.25rem; color:#0b61d6; letter-spacing:0.2px; }
    nav a { margin-left:14px; font-size:0.95rem; color:#334155; }

    /* ====== Hero / search card ====== */
  .h_b{
    background-color: #101A3F;
  }
  .navbar .navbar-brand {

    color: #0b61d6!important;
  }
    .hero-f { display:flex; align-items:center; justify-content:center; padding:48px 20px; 
    }
    .search-card { width:100%; background:#fff;  padding:22px; box-shadow: 0 8px 30px rgba(13, 38, 76, 0.06); }
    .title { text-align:center; font-size:1.5rem; margin-bottom:14px; color:#0f172a; font-weight:600; }

    /* grid inputs */
    .inputs { display:grid; grid-template-columns: 1fr 1fr 220px; gap:12px; }
    .input, .select { width:100%; padding:12px 14px; border-radius:none; border:1px solid #e6eef8; background:#fbfdff; font-size:0.97rem; outline:none; transition:box-shadow .15s, border-color .15s; }
    .input:focus, .select:focus { box-shadow:0 4px 18px rgba(11,97,214,0.12); border-color:#0b61d6; }

    /* small screens: stack */
    @media (max-width:760px) {
      .inputs { grid-template-columns: 1fr; }
      .advanced-row { flex-direction:column; align-items:flex-start; gap:8px; }
      .range-inline { width:100%; }
      .use-location { align-self:flex-start; }
    }

    /* advanced options */
    .advanced { display:flex; align-items:center; justify-content:space-between; margin-top:12px; gap:12px; }
    .left-adv { display:flex; gap:12px; align-items:center; }
    .checkbox { display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none; }
    .checkbox input { width:18px; height:18px; accent-color:#0b61d6; cursor:pointer; }

    .use-location { border:none; background:transparent; color:#0b61d6; cursor:pointer; font-size:0.95rem; display:flex; align-items:center; gap:8px; padding:8px; }

    /* Search button */
    .btn-s-row { text-align:center; margin-top:18px; }
    .btn-s { background:#0b61d6; color:#fff; border:none; padding:16px 32px; font-size:1.2rem; font-weight:400; cursor:pointer; box-shadow: 0 8px 20px rgba(11,97,214,0.18); transition:transform .08s ease, box-shadow .08s ease; 
    
      text-transform: uppercase;
    
    }
    .btn-s:active { transform:translateY(1px); }
    .btn-s:disabled { opacity:.6; cursor:not-allowed; box-shadow:none; }

    /* results placeholder */
    .results { margin-top:22px; }
    .result-item { background:#fff; border-radius:10px; padding:14px; display:flex; justify-content:space-between; gap:12px; align-items:center; border:1px solid #eef6ff; }
    .result-left { display:flex; gap:12px; align-items:flex-start; }
    .job-title { font-weight:600; }
    .company { color:#475569; font-size:0.95rem; }

    /* small helper text */
    .muted { color:#64748b; font-size:0.9rem; }

    /* subtle icons (using simple shapes) */
    .icon { width:18px; height:18px; display:inline-block; }