:root {
            --primary-blue: #0B1F3A;
            --accent-blue: #0052ff;
            --bg-light: #f4f7fe;
            --white: #ffffff;
            --text-main: #2d3748;
            --text-muted: #718096;
            --border-color: #e2e8f0;
        }

        body { margin: 0; font-family: 'Cambria', serif; background-color: var(--bg-light); color: var(--text-main); }
        .career-container { max-width: 1100px; margin: 40px auto; padding: 20px; }
        .portal-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 35px; align-items: start; }

        /* ===== QUICK APPLY SECTION ===== */
        .apply-card {
            background: var(--white);
            border-radius: 24px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            text-align: center;
        }

        #form-trigger-btn {
            background: var(--accent-blue);
            color: white; border: none; padding: 15px; border-radius: 12px;
            font-weight: bold; cursor: pointer; width: 100%; transition: 0.3s;
        }

        .sliding-form {
            max-height: 0; opacity: 0; overflow: hidden;
            transition: all 0.5s ease; text-align: left;
        }

        .sliding-form.active { max-height: 850px; opacity: 1; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border-color); }
        
        .form-group { margin-bottom: 15px; }
        .form-group label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 5px; }
        .form-group input { width: 100%; padding: 12px; border: 1.5px solid var(--border-color); border-radius: 10px; box-sizing: border-box; }

        .file-upload-box {
            border: 2px dashed #cbd5e1; padding: 15px; border-radius: 10px;
            text-align: center; background: #f8fafc; position: relative; cursor: pointer;
        }
        #resume-upload { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

        /* ===== JOB ACCORDION ===== */
        .job-accordion { display: flex; flex-direction: column; gap: 15px; }
        .job-item { background: var(--white); border-radius: 16px; border: 1px solid var(--border-color); overflow: hidden; transition: 0.3s; }
        .job-item:hover { border-color: var(--accent-blue); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
        
        .job-header {
            width: 100%; padding: 22px; background: none; border: none;
            display: flex; justify-content: space-between; align-items: center;
            cursor: pointer; font-family: inherit; font-size: 1.2rem; font-weight: 700; color: var(--primary-blue);
        }

        .job-header i { color: var(--accent-blue); transition: 0.3s; }
        .job-header.active i { transform: rotate(180deg); }
        
        .job-body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out; background: #fafcfd; }
        .job-inner { padding: 0 25px 25px; }

        .job-tags { display: flex; gap: 10px; margin-bottom: 15px; flex-wrap: wrap; }
        .tag { background: #edf2ff; color: var(--accent-blue); padding: 4px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; }
        
        .detail-title { font-weight: 700; color: var(--primary-blue); margin: 15px 0 8px; font-size: 1rem; }
        .job-list { padding-left: 18px; margin: 0; color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; }
        .job-list li { margin-bottom: 5px; }

        .apply-now-btn {
            background: var(--primary-blue);
            color: white; border: none; padding: 12px 25px; border-radius: 8px;
            font-weight: 700; cursor: pointer; margin-top: 20px; transition: 0.3s;
        }
        .apply-now-btn:hover { background: var(--accent-blue); transform: translateY(-2px); }

        /* SHOW MORE */
        #more-jobs-container { max-height: 0; opacity: 0; overflow: hidden; transition: all 0.6s ease; display: flex; flex-direction: column; gap: 15px; }
        #more-jobs-container.expanded { max-height: 2500px; opacity: 1; margin-top: 15px; }

        .view-more-btn {
            background: none; border: 2px solid var(--accent-blue); color: var(--accent-blue);
            padding: 14px; border-radius: 12px; font-weight: 700; cursor: pointer;
            margin-top: 20px; transition: 0.3s; width: 100%;
        }
        .view-more-btn:hover { background: var(--accent-blue); color: white; }

        @media (max-width: 850px) { .portal-grid { grid-template-columns: 1fr; } }/* ================= RESPONSIVE DESIGN ================= */

/* ===== LARGE SCREENS (1200px+) ===== */
@media (min-width: 1200px) {
  .career-container {
    max-width: 1200px;
  }
}

/* ===== TABLETS (850px - 1100px) ===== */
@media (max-width: 1100px) {
  .career-container {
    padding: 15px;
  }

  .portal-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .apply-card {
    padding: 25px;
  }
}

/* ===== SMALL TABLETS / LARGE PHONES ===== */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }

  .career-container {
    margin: 20px auto;
    padding: 10px;
  }

  .apply-card {
    padding: 20px;
    border-radius: 18px;
  }

  .job-header {
    font-size: 1rem;
    padding: 18px;
  }

  .job-inner {
    padding: 0 18px 20px;
  }

  .apply-now-btn {
    width: 100%;
    text-align: center;
  }

  .view-more-btn {
    padding: 12px;
  }
}

/* ===== MOBILE PHONES ===== */
@media (max-width: 480px) {

  body {
    font-size: 13px;
  }

  .career-container {
    margin: 10px auto;
    padding: 8px;
  }

  .apply-card {
    padding: 15px;
    border-radius: 14px;
  }

  /* Form fields */
  .form-group input {
    padding: 10px;
    font-size: 13px;
  }

  /* Buttons */
  #form-trigger-btn,
  .apply-now-btn,
  .view-more-btn {
    padding: 12px;
    font-size: 13px;
  }

  /* Job card */
  .job-header {
    font-size: 0.95rem;
    padding: 16px;
  }

  .job-inner {
    padding: 0 15px 18px;
  }

  /* Tags wrap nicely */
  .job-tags {
    gap: 6px;
  }

  .tag {
    font-size: 0.7rem;
    padding: 3px 10px;
  }

  /* File upload box */
  .file-upload-box {
    padding: 12px;
    font-size: 12px;
  }
}

/* ===== EXTRA SMALL DEVICES ===== */
@media (max-width: 360px) {
  .job-header {
    font-size: 0.85rem;
  }

  .apply-card {
    padding: 12px;
  }
}