.job-row{border:1px solid #ddd;margin-bottom:14px}
.job-header{padding:14px;display:flex;justify-content:space-between;font-weight:600;cursor:pointer}
.job-body{padding:16px}
.apply-btn{margin-top:12px}
.apply-form{margin-top:16px}
.apply-form input,.apply-form textarea{width:100%;padding:10px;margin-bottom:10px}
.thankyou-msg{display:none;background:#000;color:#fff;padding:12px;margin-top:10px;text-align:center}

.roi10x-modal{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9999}
.roi10x-modal-box{background:#fff;max-width:520px;margin:8% auto;padding:20px;position:relative}
.roi10x-close{position:absolute;right:12px;top:8px;cursor:pointer;font-size:22px}
.thankyou-msg{display:none;background:#000;color:#fff;padding:10px;margin-top:10px;text-align:center}
/* ========== COMMON BUTTON BASE ========== */
.roi10x-btn,
.apply-btn,
.apply-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;

  transition: all 0.25s ease;
}

/* Remove any icons / stars */
.roi10x-btn i,
.apply-btn i,
.apply-form button i,
.roi10x-btn svg,
.apply-btn svg,
.apply-form button svg,
.roi10x-btn::before,
.apply-btn::before,
.apply-form button::before {
  display: none !important;
  content: none !important;
}

/* ========== NORMAL APPLY BUTTON (WHITE) ========== */
.roi10x-btn,
.apply-btn {
  padding: 14px 22px;
  background: #ffffff;
  color: #111111;
  font-size: 14px;

  border: 1px solid #e5e7eb;
}

.roi10x-btn::after,
.apply-btn::after {
  content: "→";
  font-size: 18px;
  transition: transform 0.25s ease;
}

.roi10x-btn:hover,
.apply-btn:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.roi10x-btn:hover::after,
.apply-btn:hover::after {
  transform: translateX(4px);
}

/* ========== SUBMIT APPLICATION BUTTON (BLACK) ========== */
.apply-form button[type="submit"] {
  width: 100%;
  max-width: 320px;        /* stretch but controlled */
  margin: 24px auto 0;    /* CENTER aligned */

  padding: 10px 20px;     /* slim */
  background: #000000;
  color: #ffffff;

  font-size: 15px;
  border: 1px solid #000000;
}

.apply-form button[type="submit"]::after {
  content: " →";
  font-size: 20px;        /* bigger arrow */
  margin-left: 12px;
  transition: transform 0.25s ease;
}

.apply-form button[type="submit"]:hover {
  background: #111111;
}

.apply-form button[type="submit"]:hover::after {
  transform: translateX(4px);
}
/* ===============================
   ROI10X CAREERS – FINAL UI CSS
   =============================== */

/* ---------- Modal Overlay ---------- */
.roi10x-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 20px; /* mobile safe */
}

/* ---------- Modal Box ---------- */
.roi10x-modal-box {
  background: #ffffff;
  width: 100%;
  max-width: 460px;        /* ⬅ form thoda chota */
  max-height: 88vh;        /* ⬅ screen ke andar */
  overflow-y: auto;

  padding: 24px;
  border-radius: 14px;
  position: relative;
}

/* ---------- Close Button ---------- */
.roi10x-close {
  position: absolute;
  right: 16px;
  top: 12px;
  font-size: 22px;
  cursor: pointer;
}

/* ---------- Headings ---------- */
.roi10x-modal-box h2,
.apply-form h2 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 18px;
}

/* ---------- Inputs ---------- */
.apply-form input,
.apply-form textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 12px;

  font-size: 14px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
}

/* ---------- REMOVE Notice Period Field ---------- */
.apply-form input[name="notice_period"],
.apply-form .notice-period {
  display: none !important;
}

/* ---------- File Upload ---------- */
.apply-form input[type="file"] {
  padding: 8px;
  font-size: 13px;
}

/* ---------- SUBMIT BUTTON (CENTER + BLACK) ---------- */
.apply-form button[type="submit"] {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  max-width: 300px;
  margin: 22px auto 0;     /* ⬅ center align */

  padding: 10px 20px;     /* ⬅ slim height */
  border-radius: 999px;

  background: #000000;    /* ⬅ black */
  color: #ffffff;         /* ⬅ white text */

  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;

  border: 1px solid #000000;
  cursor: pointer;

  transition: all 0.25s ease;
}

/* ---------- Arrow ---------- */
.apply-form button[type="submit"]::after {
  content: " →";
  margin-left: 12px;
  font-size: 20px;         /* ⬅ bigger arrow */
  transition: transform 0.25s ease;
}

/* ---------- Hover ---------- */
.apply-form button[type="submit"]:hover {
  background: #111111;
}

.apply-form button[type="submit"]:hover::after {
  transform: translateX(4px);
}

/* ---------- Remove any icons / stars ---------- */
.apply-form button i,
.apply-form button svg,
.apply-form button::before {
  display: none !important;
  content: none !important;
}

/* ---------- Mobile Optimization ---------- */
@media (max-width: 480px) {
  .roi10x-modal-box {
    max-width: 100%;
    padding: 18px;
  }

  .apply-form button[type="submit"] {
    max-width: 100%;
  }
}
/* Apply Now button – stretched pill */
.apply-btn,
.roi10x-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 260px;        /* ⬅ button stretch */
  padding: 14px 30px;      /* ⬅ left–right zyada */

  border-radius: 999px;    /* pill shape */
}

/* Mobile – full width (clean) */
@media (max-width: 480px) {
  .apply-btn,
  .roi10x-btn {
    width: 100%;
    max-width: 100%;
  }
}
/* JOB ACCORDION WRAPPER */
.roi10x-job-item {
  border: 1px solid #e5e7eb;
  background: #f7f7f7;
  margin-bottom: 14px;
}

/* HEADER ROW */
.roi10x-job-head {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 16px 18px;
  cursor: pointer;
}

/* JOB TITLE */
.roi10x-job-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;   /* BOLD */
  color: #000000;     /* BLACK */
}

/* PLUS ICON */
.roi10x-job-toggle {
  font-size: 22px;
  font-weight: 700;
  color: #000;
  transition: transform 0.25s ease;
}

/* CONTENT */
.roi10x-job-body {
  display: none;
  background: #ffffff;
  padding: 18px;
}

/* ACTIVE STATE */
.roi10x-job-item.active .roi10x-job-body {
  display: block;
}

.roi10x-job-item.active .roi10x-job-toggle {
  transform: rotate(45deg); /* + → × */
}
<div class="roi10x-job-item">
  <div class="roi10x-job-head">
    <h3>Job Title</h3>
    <span class="roi10x-job-toggle">+</span>
  </div>

  <div class="roi10x-job-body">
    <!-- job details -->
    <button class="apply-btn">Apply Now</button>
  </div>
</div>
/* ================================
   Job Accordion Heading (H2 size)
   ================================ */

/* Accordion header row */
.roi10x-job-head,
.job-header,
.job-title {
  font-size: 26px;        /* H2 size */
  font-weight: 700;       /* Bold */
  color: #000000;         /* Pure black */
  line-height: 1.3;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 18px 20px;
}

/* Plus / minus icon */
.roi10x-job-head .toggle-icon,
.job-header .toggle-icon {
  font-size: 22px;
  font-weight: 600;
}

/* Mobile optimization */
@media (max-width: 768px) {
  .roi10x-job-head,
  .job-header,
  .job-title {
    font-size: 20px;     /* Mobile H2-like */
    padding: 16px;
  }
}