/* ================= Header & Navigation ================= */
    header {
      background-color: #0a5d8f;
      color: white;
      padding: .75rem 2rem;
      position:fixed;
      width:100%;
      z-index:9999;
    }
    
    H1, H2, H3, h3{
      color:#2d2d2d;
    }

    .nav-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
    }

    .logo {
      font-size: 1.5rem;
      font-weight: bold;
    }

    nav {
      display: flex;
      gap: 1rem;
    }

    nav a {
      color: white;
      text-decoration: none;
      font-weight: 500;
      transition: color 0.3s ease;
    }

    nav a:hover {
      color: #c5cae9;
    }

    .menu-toggle {
      display: none;
      font-size: 1.5rem;
      cursor: pointer;
    }

    .apply-button {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
}
.apply-button:hover {
  background-color: #0056b3;
}

    .main-container{
      width:50%;
    }

    @media (max-width: 768px) {
       .main-container{
      width:80%;
    }
      
      nav {
        flex-direction: column;
        width: 100%;
        display: none;
        margin-top: 1rem;
      }

      nav.active {
        display: flex;
      }

      .menu-toggle {
        display: block;
      }

      .logo {
        font-size: 1.25rem;
      }

      nav a {
        font-size: 0.9rem;
      }
    }

    /* ================= Hero Section ================= */
    :root{
      --accent: 255, 45, 85;
      --glass: rgba(255,255,255,0.08);
      --text-contrast: rgba(255,255,255,0.96);
      --max-width: 1200px;
    }

    *{box-sizing:border-box}
    html,body{height:100%;margin:0;font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial}

    

    h1{
      margin:0 0 12px 0;
      font-weight:700;
      font-size:clamp(1.5rem, 5vw, 2.6rem);
      line-height:1.1;
      letter-spacing:-0.02em;
    }


    .btn{
      -webkit-appearance:none;appearance:none;border:0;padding:12px 18px;border-radius:10px;font-weight:700;cursor:pointer;font-size:0.9rem;
      box-shadow: 0 6px 18px rgba(2,6,23,0.45);
    }


    /* ================= Employer Section ================= */
    .employer-section {
      position: relative;
      background: #f8fafc;
      color: #111;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 60px 10px;
      overflow: hidden;
    }

    .employer-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background: url('https://images.unsplash.com/photo-1556761175-4b46a572b786?auto=format&fit=crop&w=1600&q=80') center/cover no-repeat;
      filter: blur(8px) brightness(0.9);
      transform: scale(1.04);
      z-index: 0;
    }

    .employer-section::after {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(255, 255, 255, 0.75);
      z-index: 1;
    }

    .employer-inner {
      position: relative;
      z-index: 2;
      max-width: 1000px;
      width: 100%;
      display: flex;
      justify-content: center;
    }

    .employer-copy .card {
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(10px);
      border-radius: 16px;
      box-shadow: 0 8px 30px rgba(0,0,0,0.08);
      padding: 36px 18px;
      max-width: 800px;
      width: 100%;
      text-align: center;
    }

    .employer-copy h2 {
      margin: 0 0 12px 0;
      font-size: clamp(1.5rem, 4vw, 2.4rem);
      font-weight: 700;
      letter-spacing: -0.02em;
    }

    .highlight-employer {
      display: inline-block;
      padding: 6px 12px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(0,122,255,0.12), rgba(0,122,255,0.05));
      color: rgb(0,122,255);
      font-weight: 600;
    }

    .input-group input,
    .input-group textarea {
      width: 100%;
      padding: 10px 12px;
      border-radius: 8px;
      border: 1px solid rgba(0,0,0,0.1);
      font-size: 0.95rem;
    }

    .btn-primary-employer {
      background: linear-gradient(90deg, rgba(0,122,255,1), rgba(80,160,255,1));
      color: #fff;
      border: none;
      font-size: 0.9rem;
    }

    .btn-ghost-employer {
      background: transparent;
      border: 1px solid rgba(0,0,0,0.15);
      color: #111;
      font-size: 0.9rem;
    }

    .muted {
      color: rgba(0,0,0,0.6);
      font-size: 0.8rem;
      margin-top: 10px;
    }

    @media(max-width:480px){
      .employer-copy .card{padding:28px 20px;}
      .employer-copy h2{font-size:1.6rem;}
    }

    /* ================= Footer ================= */
    footer {
      background-color: #0A5989;
      color: white;
      padding: 1.5rem 2rem;
      text-align: center;
      
    }

    .footer-container {
      max-width: 1200px;
      margin: 0 auto;
    }

    .footer-links {
      margin-top: 0.5rem;
    }

    .footer-links a {
      color: #c5cae9;
      margin: 0 10px;
      text-decoration: none;
      font-size: 0.9rem;
    }

    .footer-links a:hover {
      text-decoration: underline;
    }

    @media(max-width:480px){
      .footer-links a{font-size:0.8rem;}
    }
 
.accordion {
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-bottom: 12px;
  overflow: hidden;
  background: #fafafa;
  text-align:left;
}

.accordion-header {
  width: 100%;
  text-align: left;
  padding: 14px;
  font-size: 17px;
  background: #f1f1f1;
  border: none;
  cursor: pointer;
}

.accordion-header:hover {
  background: #e8e8e8;
}

.accordion-body {
  display: none;
  padding: 15px;
  line-height: 1.6;
  text-align:left;
}

.accordion-body.open {
  display: block;
}

.apply-button {
  display: inline-block;
  padding: 10px 16px;
  background: #0077ff;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  margin-top: 8px;
}

.apply-button:hover {
  background: #005fcc;
}




 .job { text-align:left; padding: 15px; border: 1px solid #ddd; border-radius:15px; margin-bottom: 15px; }
    input { width: 100%; padding: 12px; margin-bottom: 20px;border-radius:15px; }
    h2 { margin: 0 0 10px; }
    
    .job-actions {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.view-all-button {
   display: inline-block;
  padding: 10px 16px;
  background: #0077ff;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  margin-top: 8px;
}

.view-all-button:hover {
  background: #005fcc;
  opacity:0.9;
}
    
    

    #dateFilter {
      text-align:left;
  width: 130px;
  padding: 12px;
  font-size: 12px;
      border-radius:15px;
       cursor: pointer;
}
  
    
    .filters {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

#search {
  flex: 1;
}