{"id":6,"date":"2026-04-21T15:34:17","date_gmt":"2026-04-21T15:34:17","guid":{"rendered":"https:\/\/oyecdo.servhubacademy.online\/?page_id=6"},"modified":"2026-04-21T17:18:16","modified_gmt":"2026-04-21T17:18:16","slug":"oyecdo-registration-2026","status":"publish","type":"page","link":"https:\/\/oyecdo.servhubacademy.online\/","title":{"rendered":"OYECDO Registration 2026"},"content":{"rendered":"\n<style>\n:root {\n  --green: #0B5E3E;\n  --green-mid: #127A51;\n  --green-light: #E6F4EE;\n  --green-xlight: #F2FAF6;\n  --gold: #C8922A;\n  --gold-light: #FDF3E3;\n  --text: #1A1A1A;\n  --text-muted: #5C6370;\n  --text-light: #8C95A0;\n  --border: #D8DFE6;\n  --border-focus: #0B5E3E;\n  --bg: #F8FAF9;\n  --white: #FFFFFF;\n  --error: #C0392B;\n  --error-light: #FDECEA;\n  --radius: 8px;\n  --radius-lg: 14px;\n  --shadow: 0 2px 12px rgba(11,94,62,0.08);\n  --shadow-lg: 0 8px 32px rgba(11,94,62,0.13);\n}\n\n* { box-sizing: border-box; margin: 0; padding: 0; }\n\nbody {\n  font-family: 'DM Sans', sans-serif;\n  background: var(--bg);\n  color: var(--text);\n  font-size: 15px;\n  line-height: 1.6;\n  min-height: 100vh;\n}\n\n\/* \u2500\u2500 HEADER \u2500\u2500 *\/\n.site-header {\n  background: var(--green);\n  padding: 0;\n  position: sticky;\n  top: 0;\n  z-index: 100;\n  box-shadow: 0 2px 16px rgba(0,0,0,0.18);\n}\n.header-inner {\n  max-width: 860px;\n  margin: 0 auto;\n  padding: 14px 24px;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n.org-logo {\n  width: 48px;\n  height: 48px;\n  border-radius: 50%;\n  background: var(--white);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  overflow: hidden;\n}\n.org-logo svg { width: 32px; height: 32px; }\n.org-name { color: #fff; }\n.org-name h1 { font-family: 'DM Serif Display', serif; font-size: 15px; font-weight: 400; letter-spacing: 0.01em; }\n.org-name p { font-size: 11px; opacity: 0.75; margin-top: 1px; }\n.header-badge {\n  margin-left: auto;\n  background: var(--gold);\n  color: #fff;\n  font-size: 11px;\n  font-weight: 600;\n  padding: 4px 12px;\n  border-radius: 999px;\n  letter-spacing: 0.04em;\n  white-space: nowrap;\n}\n\n\/* \u2500\u2500 HERO BANNER \u2500\u2500 *\/\n.hero {\n  background: linear-gradient(135deg, var(--green) 0%, #0D7050 60%, #1A9468 100%);\n  padding: 40px 24px 32px;\n  text-align: center;\n  color: #fff;\n  position: relative;\n  overflow: hidden;\n}\n.hero::before {\n  content: '';\n  position: absolute;\n  top: -40px; right: -40px;\n  width: 200px; height: 200px;\n  border-radius: 50%;\n  background: rgba(255,255,255,0.04);\n}\n.hero::after {\n  content: '';\n  position: absolute;\n  bottom: -60px; left: -30px;\n  width: 260px; height: 260px;\n  border-radius: 50%;\n  background: rgba(255,255,255,0.03);\n}\n.hero-label {\n  font-size: 11px;\n  font-weight: 600;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n  opacity: 0.7;\n  margin-bottom: 10px;\n}\n.hero h2 {\n  font-family: 'DM Serif Display', serif;\n  font-size: clamp(22px, 4vw, 30px);\n  font-weight: 400;\n  line-height: 1.25;\n  margin-bottom: 8px;\n}\n.hero p {\n  font-size: 13px;\n  opacity: 0.8;\n  max-width: 520px;\n  margin: 0 auto 18px;\n}\n.hero-meta {\n  display: flex;\n  justify-content: center;\n  gap: 20px;\n  flex-wrap: wrap;\n}\n.hero-pill {\n  background: rgba(255,255,255,0.15);\n  border: 1px solid rgba(255,255,255,0.2);\n  border-radius: 999px;\n  padding: 5px 14px;\n  font-size: 12px;\n  backdrop-filter: blur(4px);\n}\n\n\/* \u2500\u2500 PROGRESS BAR \u2500\u2500 *\/\n.progress-wrap {\n  background: var(--white);\n  border-bottom: 1px solid var(--border);\n  padding: 16px 24px;\n  position: sticky;\n  top: 76px;\n  z-index: 90;\n  box-shadow: 0 2px 8px rgba(0,0,0,0.05);\n}\n.progress-inner { max-width: 860px; margin: 0 auto; }\n.progress-steps {\n  display: flex;\n  gap: 4px;\n  margin-bottom: 10px;\n}\n.ps {\n  flex: 1;\n  cursor: pointer;\n  text-align: center;\n}\n.ps-dot {\n  width: 28px; height: 28px;\n  border-radius: 50%;\n  border: 2px solid var(--border);\n  background: var(--white);\n  display: flex; align-items: center; justify-content: center;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--text-muted);\n  margin: 0 auto 4px;\n  transition: all 0.25s;\n}\n.ps.active .ps-dot { border-color: var(--green); background: var(--green); color: #fff; }\n.ps.done .ps-dot { border-color: var(--green); background: var(--green-light); color: var(--green); }\n.ps-label { font-size: 10px; color: var(--text-light); display: none; }\n@media (min-width: 600px) { .ps-label { display: block; } }\n.ps.active .ps-label { color: var(--green); font-weight: 500; }\n.progress-bar-track {\n  height: 3px;\n  background: var(--border);\n  border-radius: 2px;\n  overflow: hidden;\n}\n.progress-bar-fill {\n  height: 100%;\n  background: var(--green);\n  border-radius: 2px;\n  transition: width 0.4s ease;\n  width: 20%;\n}\n\n\/* \u2500\u2500 FORM CONTAINER \u2500\u2500 *\/\n.form-container {\n  max-width: 860px;\n  margin: 32px auto;\n  padding: 0 16px 60px;\n}\n\n\/* \u2500\u2500 NOTICE BOX \u2500\u2500 *\/\n.notice {\n  background: var(--gold-light);\n  border: 1px solid #E8C278;\n  border-left: 4px solid var(--gold);\n  border-radius: var(--radius);\n  padding: 14px 18px;\n  margin-bottom: 28px;\n  font-size: 13px;\n  color: #6B4A0E;\n  line-height: 1.7;\n}\n.notice strong { display: block; font-weight: 600; margin-bottom: 6px; font-size: 13px; color: #5A3A08; }\n.notice ol { padding-left: 18px; }\n.notice li { margin-bottom: 4px; }\n\n\/* \u2500\u2500 STEP PANELS \u2500\u2500 *\/\n.step-panel { display: none; animation: fadeIn 0.3s ease; }\n.step-panel.active { display: block; }\n@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }\n\n\/* \u2500\u2500 SECTION \u2500\u2500 *\/\n.form-section {\n  background: var(--white);\n  border: 1px solid var(--border);\n  border-radius: var(--radius-lg);\n  margin-bottom: 20px;\n  overflow: hidden;\n  box-shadow: var(--shadow);\n}\n.section-head {\n  background: var(--green-xlight);\n  border-bottom: 1px solid var(--border);\n  padding: 14px 20px;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n.sec-num {\n  width: 26px; height: 26px;\n  border-radius: 50%;\n  background: var(--green);\n  color: #fff;\n  font-size: 12px;\n  font-weight: 600;\n  display: flex; align-items: center; justify-content: center;\n  flex-shrink: 0;\n}\n.sec-title {\n  font-family: 'DM Serif Display', serif;\n  font-size: 16px;\n  font-weight: 400;\n  color: var(--green);\n}\n.sec-body { padding: 20px; }\n\n\/* \u2500\u2500 FIELD GROUPS \u2500\u2500 *\/\n.field-grid { display: grid; gap: 16px; }\n.col-1 { grid-template-columns: 1fr; }\n.col-2 { grid-template-columns: 1fr 1fr; }\n.col-3 { grid-template-columns: 1fr 1fr 1fr; }\n@media (max-width: 600px) {\n  .col-2, .col-3 { grid-template-columns: 1fr; }\n}\n\n.field-group { display: flex; flex-direction: column; gap: 5px; }\n.field-group label {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--text);\n}\n.field-group label .req { color: var(--error); margin-left: 2px; }\n.field-group label .opt { color: var(--text-light); font-weight: 400; font-size: 11px; margin-left: 4px; }\n.hint { font-size: 11px; color: var(--text-light); margin-top: 2px; }\n\n\/* \u2500\u2500 INPUTS \u2500\u2500 *\/\ninput[type=\"text\"],\ninput[type=\"email\"],\ninput[type=\"tel\"],\ninput[type=\"number\"],\ninput[type=\"date\"],\nselect,\ntextarea {\n  width: 100%;\n  padding: 10px 14px;\n  border: 1.5px solid var(--border);\n  border-radius: var(--radius);\n  font-family: 'DM Sans', sans-serif;\n  font-size: 14px;\n  color: var(--text);\n  background: var(--white);\n  transition: border-color 0.2s, box-shadow 0.2s;\n  appearance: none;\n  -webkit-appearance: none;\n}\ninput:focus, select:focus, textarea:focus {\n  outline: none;\n  border-color: var(--green);\n  box-shadow: 0 0 0 3px rgba(11,94,62,0.1);\n}\ninput.error, select.error, textarea.error {\n  border-color: var(--error);\n  box-shadow: 0 0 0 3px rgba(192,57,43,0.08);\n}\nselect {\n  background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235C6370' stroke-width='1.5' fill='none' stroke-linecap='round'\/%3E%3C\/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 14px center;\n  padding-right: 36px;\n}\ntextarea { resize: vertical; min-height: 80px; }\n\n\/* \u2500\u2500 RADIO & CHECKBOX GROUPS \u2500\u2500 *\/\n.radio-group, .check-group {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  margin-top: 4px;\n}\n.radio-group.col { flex-direction: column; gap: 6px; }\n.radio-option, .check-option {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  padding: 8px 14px;\n  border: 1.5px solid var(--border);\n  border-radius: var(--radius);\n  font-size: 13px;\n  transition: all 0.15s;\n  background: var(--white);\n  user-select: none;\n}\n.radio-option:hover, .check-option:hover {\n  border-color: var(--green-mid);\n  background: var(--green-xlight);\n}\n.radio-option input, .check-option input { display: none; }\n.radio-option .mark, .check-option .mark {\n  width: 16px; height: 16px;\n  border: 2px solid var(--border);\n  border-radius: 50%;\n  display: flex; align-items: center; justify-content: center;\n  flex-shrink: 0;\n  transition: all 0.15s;\n}\n.check-option .mark { border-radius: 4px; }\n.radio-option.selected, .check-option.selected {\n  border-color: var(--green);\n  background: var(--green-xlight);\n  color: var(--green);\n}\n.radio-option.selected .mark {\n  border-color: var(--green);\n  background: var(--green);\n  box-shadow: inset 0 0 0 3px var(--white);\n}\n.check-option.selected .mark {\n  border-color: var(--green);\n  background: var(--green);\n}\n.check-option.selected .mark::after {\n  content: '';\n  display: block;\n  width: 8px; height: 5px;\n  border-left: 2px solid #fff;\n  border-bottom: 2px solid #fff;\n  transform: rotate(-45deg) translate(1px,-1px);\n}\n\n\/* skill grid *\/\n.skill-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n  gap: 8px;\n  margin-top: 6px;\n}\n.skill-category-label {\n  grid-column: 1 \/ -1;\n  font-size: 11px;\n  font-weight: 600;\n  letter-spacing: 0.07em;\n  text-transform: uppercase;\n  color: var(--green);\n  padding: 10px 0 4px;\n  border-top: 1px solid var(--border);\n  margin-top: 4px;\n}\n.skill-category-label:first-child { border-top: none; margin-top: 0; padding-top: 0; }\n.skill-option {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  border: 1.5px solid var(--border);\n  border-radius: var(--radius);\n  font-size: 12.5px;\n  cursor: pointer;\n  transition: all 0.15s;\n  background: var(--white);\n  user-select: none;\n}\n.skill-option:hover { border-color: var(--green-mid); background: var(--green-xlight); }\n.skill-option.selected { border-color: var(--green); background: var(--green-xlight); color: var(--green); font-weight: 500; }\n.skill-option input { display: none; }\n.skill-dot {\n  width: 14px; height: 14px;\n  border-radius: 50%;\n  border: 2px solid var(--border);\n  flex-shrink: 0;\n  transition: all 0.15s;\n}\n.skill-option.selected .skill-dot { border-color: var(--green); background: var(--green); box-shadow: inset 0 0 0 2px var(--white); }\n\n\/* \u2500\u2500 FILE UPLOAD \u2500\u2500 *\/\n.file-upload-wrap {\n  border: 2px dashed var(--border);\n  border-radius: var(--radius);\n  padding: 18px;\n  text-align: center;\n  transition: all 0.2s;\n  cursor: pointer;\n  position: relative;\n}\n.file-upload-wrap:hover { border-color: var(--green); background: var(--green-xlight); }\n.file-upload-wrap input[type=\"file\"] {\n  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;\n}\n.file-icon { font-size: 24px; margin-bottom: 6px; }\n.file-label { font-size: 13px; color: var(--text-muted); }\n.file-label strong { color: var(--green); }\n.file-hint { font-size: 11px; color: var(--text-light); margin-top: 4px; }\n.file-name { font-size: 12px; color: var(--green); margin-top: 6px; font-weight: 500; }\n\n\/* \u2500\u2500 REPEATER \u2500\u2500 *\/\n.repeater-row {\n  background: var(--bg);\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  padding: 14px;\n  margin-bottom: 10px;\n  position: relative;\n}\n.repeater-remove {\n  position: absolute;\n  top: 10px; right: 10px;\n  background: var(--error-light);\n  border: none;\n  color: var(--error);\n  font-size: 16px;\n  width: 24px; height: 24px;\n  border-radius: 50%;\n  cursor: pointer;\n  display: flex; align-items: center; justify-content: center;\n  line-height: 1;\n}\n.btn-add {\n  background: var(--green-light);\n  border: 1.5px dashed var(--green-mid);\n  color: var(--green);\n  font-family: 'DM Sans', sans-serif;\n  font-size: 13px;\n  font-weight: 500;\n  padding: 9px 18px;\n  border-radius: var(--radius);\n  cursor: pointer;\n  width: 100%;\n  margin-top: 6px;\n  transition: all 0.15s;\n}\n.btn-add:hover { background: var(--green-xlight); }\n\n\/* \u2500\u2500 CONDITIONAL \u2500\u2500 *\/\n.conditional { display: none; }\n.conditional.show { display: block; }\n\n\/* \u2500\u2500 DECLARATION BOX \u2500\u2500 *\/\n.declaration-box {\n  background: var(--green-xlight);\n  border: 1px solid #B8DEC9;\n  border-radius: var(--radius);\n  padding: 16px 18px;\n  font-size: 13px;\n  line-height: 1.8;\n  color: var(--text);\n  margin-bottom: 14px;\n}\n.declaration-box ol { padding-left: 18px; }\n.declaration-box li { margin-bottom: 6px; }\n\n\/* \u2500\u2500 NAVIGATION BUTTONS \u2500\u2500 *\/\n.form-nav {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-top: 28px;\n  padding-top: 20px;\n  border-top: 1px solid var(--border);\n}\n.btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 28px;\n  border-radius: var(--radius);\n  font-family: 'DM Sans', sans-serif;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  border: none;\n  transition: all 0.2s;\n  text-decoration: none;\n}\n.btn-prev {\n  background: var(--white);\n  border: 1.5px solid var(--border);\n  color: var(--text-muted);\n}\n.btn-prev:hover { border-color: var(--green); color: var(--green); }\n.btn-next {\n  background: var(--green);\n  color: #fff;\n  box-shadow: 0 4px 14px rgba(11,94,62,0.3);\n}\n.btn-next:hover { background: var(--green-mid); box-shadow: 0 6px 18px rgba(11,94,62,0.35); }\n.btn-submit {\n  background: var(--gold);\n  color: #fff;\n  box-shadow: 0 4px 14px rgba(200,146,42,0.3);\n}\n.btn-submit:hover { background: #B07F20; }\n\n\/* \u2500\u2500 STEP TITLE \u2500\u2500 *\/\n.step-title-bar {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin-bottom: 20px;\n}\n.step-title-bar h3 {\n  font-family: 'DM Serif Display', serif;\n  font-size: 22px;\n  font-weight: 400;\n  color: var(--green);\n}\n.step-title-bar p {\n  font-size: 13px;\n  color: var(--text-muted);\n  margin-top: 2px;\n}\n\n\/* \u2500\u2500 OFFICE USE BOX \u2500\u2500 *\/\n.office-box {\n  background: #FFFBF0;\n  border: 1.5px dashed var(--gold);\n  border-radius: var(--radius);\n  padding: 14px 18px;\n  margin-bottom: 20px;\n}\n.office-box-title {\n  font-size: 11px;\n  font-weight: 600;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  color: var(--gold);\n  margin-bottom: 10px;\n}\n.office-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }\n.office-field { display: flex; flex-direction: column; gap: 3px; }\n.office-field label { font-size: 11px; color: var(--text-muted); }\n.office-field input { padding: 7px 10px; font-size: 12px; background: var(--white); }\n\n\/* \u2500\u2500 SUCCESS \u2500\u2500 *\/\n.success-screen {\n  display: none;\n  text-align: center;\n  padding: 60px 24px;\n}\n.success-icon {\n  width: 72px; height: 72px;\n  border-radius: 50%;\n  background: var(--green-light);\n  display: flex; align-items: center; justify-content: center;\n  margin: 0 auto 24px;\n}\n.success-icon svg { width: 36px; height: 36px; }\n.success-screen h2 { font-family: 'DM Serif Display', serif; font-size: 28px; color: var(--green); margin-bottom: 12px; }\n.success-screen p { color: var(--text-muted); font-size: 15px; max-width: 480px; margin: 0 auto 8px; }\n.ref-number { font-family: monospace; font-size: 18px; font-weight: 700; color: var(--green); background: var(--green-light); padding: 10px 24px; border-radius: 999px; display: inline-block; margin: 16px 0; letter-spacing: 0.1em; }\n\n\/* \u2500\u2500 FOOTER \u2500\u2500 *\/\n.form-footer {\n  text-align: center;\n  padding: 20px;\n  font-size: 12px;\n  color: var(--text-light);\n  border-top: 1px solid var(--border);\n  margin-top: 40px;\n}\n\n\/* \u2500\u2500 ERROR MSG \u2500\u2500 *\/\n.err-msg { font-size: 11px; color: var(--error); margin-top: 3px; display: none; }\n.err-msg.show { display: block; }\n\n\/* \u2500\u2500 INLINE NOTE \u2500\u2500 *\/\n.info-note {\n  background: var(--green-xlight);\n  border-left: 3px solid var(--green);\n  padding: 10px 14px;\n  border-radius: 0 var(--radius) var(--radius) 0;\n  font-size: 12px;\n  color: var(--text-muted);\n  margin-bottom: 12px;\n}\n\n\/* passport photo box *\/\n.passport-wrap {\n  display: flex;\n  gap: 20px;\n  align-items: flex-start;\n  flex-wrap: wrap;\n}\n.passport-box {\n  width: 120px;\n  height: 150px;\n  border: 2px dashed var(--border);\n  border-radius: var(--radius);\n  flex-shrink: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  font-size: 11px;\n  color: var(--text-light);\n  text-align: center;\n  padding: 8px;\n  cursor: pointer;\n  transition: all 0.2s;\n  position: relative;\n  overflow: hidden;\n}\n.passport-box:hover { border-color: var(--green); background: var(--green-xlight); }\n.passport-box input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }\n.passport-box img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; display: none; border-radius: 6px; }\n.passport-icon { font-size: 28px; margin-bottom: 6px; }\n<\/style>\n\n\n\n<body>\n\n<!-- HEADER -->\n<header class=\"site-header\">\n  <div class=\"header-inner\">\n    <div class=\"org-logo\">\n      <img decoding=\"async\" src=\"https:\/\/i0.wp.com\/ogwusyouthempowerment.org\/wp-content\/uploads\/2025\/03\/Ogwus-Logo-Update-3.png?w=1007&#038;ssl=1\" alt=\"OYECDO Logo\" style=\"width: 100%; height: 100%; object-fit: contain;\">\n    <\/div>\n    <div class=\"org-name\">\n      <h1>OYECDO<\/h1>\n      <p>Ogwus Youth Empowerment &#038; Community Development Organization<\/p>\n    <\/div>\n    <div class=\"header-badge\">2026 Cohort<\/div>\n  <\/div>\n<\/header>\n\n<!-- HERO BANNER -->\n<div class=\"hero\">\n  <div class=\"hero-label\">In Partnership with ServHub Technologies Ltd<\/div>\n  <h2>Youth Skills Acquisition &#038; Digital Workforce Development Programme<\/h2>\n  <p>Participant Registration Form \u2014 Cohort Year 2026 | Form Ref: OYECDO\/REGFORM\/2026<\/p>\n  <div class=\"hero-meta\">\n    <div class=\"hero-pill\">RC: 8172165<\/div>\n    <div class=\"hero-pill\">Ages 18 \u2013 35<\/div>\n    <div class=\"hero-pill\">\u20a625,000 Registration Fee<\/div>\n    <div class=\"hero-pill\">27 Skill Areas<\/div>\n  <\/div>\n<\/div>\n\n<!-- PROGRESS BAR -->\n<div class=\"progress-wrap\">\n  <div class=\"progress-inner\">\n    <div class=\"progress-steps\">\n      <div class=\"ps active\" onclick=\"goToStep(1)\" id=\"ps1\">\n        <div class=\"ps-dot\">1<\/div>\n        <div class=\"ps-label\">Personal<\/div>\n      <\/div>\n      <div class=\"ps\" onclick=\"goToStep(2)\" id=\"ps2\">\n        <div class=\"ps-dot\">2<\/div>\n        <div class=\"ps-label\">Education &#038; Skills<\/div>\n      <\/div>\n      <div class=\"ps\" onclick=\"goToStep(3)\" id=\"ps3\">\n        <div class=\"ps-dot\">3<\/div>\n        <div class=\"ps-label\">Employment<\/div>\n      <\/div>\n      <div class=\"ps\" onclick=\"goToStep(4)\" id=\"ps4\">\n        <div class=\"ps-dot\">4<\/div>\n        <div class=\"ps-label\">Health &#038; Digital<\/div>\n      <\/div>\n      <div class=\"ps\" onclick=\"goToStep(5)\" id=\"ps5\">\n        <div class=\"ps-dot\">5<\/div>\n        <div class=\"ps-label\">References<\/div>\n      <\/div>\n    <\/div>\n    <div class=\"progress-bar-track\">\n      <div class=\"progress-bar-fill\" id=\"progressFill\"><\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<!-- FORM CONTAINER -->\n<div class=\"form-container\">\n\n  <!-- NOTICE BOX -->\n  <div class=\"notice\">\n    <strong>Important Instructions \u2014 Please Read Before Completing<\/strong>\n    <ol>\n      <li>Complete ALL sections in BLOCK LETTERS. Fields marked <span style=\"color:var(--error)\">*<\/span> are mandatory.<\/li>\n      <li>Attach ONE recent passport photograph (white background, not older than 3 months).<\/li>\n      <li>Upload SCANNED COPIES of all required documents. Do NOT submit originals at this stage.<\/li>\n      <li>Registration &#038; Certification Fee: <strong>\u20a625,000<\/strong> \u2014 payable at the OYECDO office after application approval.<\/li>\n      <li>Submission of false information will result in automatic disqualification.<\/li>\n    <\/ol>\n  <\/div>\n\n  <form id=\"regForm\" novalidate>\n\n    <!-- STEP 1 \u2014 PERSONAL & CONTACT INFORMATION -->\n    <div class=\"step-panel active\" id=\"step1\">\n      <div class=\"step-title-bar\">\n        <div>\n          <h3>Personal &#038; Contact Information<\/h3>\n          <p>Sections 1 &#038; 2 \u2014 All fields marked * are mandatory<\/p>\n        <\/div>\n      <\/div>\n\n      <!-- OFFICE USE BOX -->\n      <div class=\"office-box\">\n        <div class=\"office-box-title\">For Office Use Only<\/div>\n        <div class=\"office-fields\">\n          <div class=\"office-field\"><label>Application Number<\/label><input type=\"text\" placeholder=\"\u2014\"><\/div>\n          <div class=\"office-field\"><label>Date Received<\/label><input type=\"date\"><\/div>\n          <div class=\"office-field\"><label>Received By<\/label><input type=\"text\" placeholder=\"\u2014\"><\/div>\n          <div class=\"office-field\"><label>Skill Category Assigned<\/label><input type=\"text\" placeholder=\"\u2014\"><\/div>\n          <div class=\"office-field\"><label>Cohort Number<\/label><input type=\"text\" placeholder=\"\u2014\"><\/div>\n          <div class=\"office-field\"><label>Training Centre<\/label><input type=\"text\" placeholder=\"\u2014\"><\/div>\n          <div class=\"office-field\"><label>Fee Payment Status<\/label><input type=\"text\" placeholder=\"\u2014\"><\/div>\n          <div class=\"office-field\"><label>Receipt Number<\/label><input type=\"text\" placeholder=\"\u2014\"><\/div>\n          <div class=\"office-field\"><label>Scholarship Code<\/label><input type=\"text\" placeholder=\"If any\"><\/div>\n        <\/div>\n      <\/div>\n\n      <!-- SECTION 1: PERSONAL INFORMATION -->\n      <div class=\"form-section\">\n        <div class=\"section-head\">\n          <div class=\"sec-num\">1<\/div>\n          <div class=\"sec-title\">Personal Information<\/div>\n        <\/div>\n        <div class=\"sec-body\">\n          <div class=\"passport-wrap\" style=\"margin-bottom:20px;\">\n            <div class=\"passport-box\" id=\"passportBox\">\n              <div class=\"passport-icon\">\ud83d\udcf7<\/div>\n              <div>Passport<br>Photo<br>(White BG)<\/div>\n              <input type=\"file\" id=\"passportFile\" name=\"passportFile\" accept=\"image\/*\" onchange=\"previewPassport(this)\">\n              <img id=\"passportPreview\" alt=\"Passport photo preview\">\n            <\/div>\n            <div style=\"flex:1;\">\n              <div class=\"field-grid col-3\" style=\"margin-bottom:14px;\">\n                <div class=\"field-group\">\n                  <label>Surname (Family Name) <span class=\"req\">*<\/span><\/label>\n                  <input type=\"text\" id=\"surname\" name=\"surname\" placeholder=\"BLOCK LETTERS\" required>\n                  <div class=\"err-msg\" id=\"err_surname\">Surname is required<\/div>\n                <\/div>\n                <div class=\"field-group\">\n                  <label>First Name <span class=\"req\">*<\/span><\/label>\n                  <input type=\"text\" id=\"firstName\" name=\"firstName\" placeholder=\"BLOCK LETTERS\" required>\n                  <div class=\"err-msg\" id=\"err_firstName\">First name is required<\/div>\n                <\/div>\n                <div class=\"field-group\">\n                  <label>Middle Name <span class=\"opt\">(Optional)<\/span><\/label>\n                  <input type=\"text\" id=\"middleName\" name=\"middleName\" placeholder=\"BLOCK LETTERS\">\n                <\/div>\n              <\/div>\n              <div class=\"field-grid col-3\">\n                <div class=\"field-group\">\n                  <label>Date of Birth <span class=\"req\">*<\/span><\/label>\n                  <input type=\"date\" id=\"dob\" name=\"dob\" required onchange=\"checkMinorStatus()\">\n                  <div class=\"err-msg\" id=\"err_dob\">Date of birth is required<\/div>\n                <\/div>\n                <div class=\"field-group\">\n                  <label>Gender <span class=\"req\">*<\/span><\/label>\n                  <select id=\"gender\" name=\"gender\" required>\n                    <option value=\"\">Select gender<\/option>\n                    <option>Male<\/option>\n                    <option>Female<\/option>\n                    <option>Other<\/option>\n                    <option>Prefer not to say<\/option>\n                  <\/select>\n                  <div class=\"err-msg\" id=\"err_gender\">Gender is required<\/div>\n                <\/div>\n                <div class=\"field-group\">\n                  <label>Marital Status <span class=\"req\">*<\/span><\/label>\n                  <select id=\"maritalStatus\" name=\"maritalStatus\" required>\n                    <option value=\"\">Select status<\/option>\n                    <option>Single<\/option>\n                    <option>Married<\/option>\n                    <option>Widowed<\/option>\n                    <option>Divorced<\/option>\n                    <option>Separated<\/option>\n                  <\/select>\n                  <div class=\"err-msg\" id=\"err_maritalStatus\">Marital status is required<\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <div class=\"field-grid col-3\">\n            <div class=\"field-group\">\n              <label>State of Origin <span class=\"req\">*<\/span><\/label>\n              <select id=\"stateOfOrigin\" name=\"stateOfOrigin\" required>\n                <option value=\"\">Select state<\/option>\n                <option>Abia<\/option><option>Adamawa<\/option><option>Akwa Ibom<\/option>\n                <option>Anambra<\/option><option>Bauchi<\/option><option>Bayelsa<\/option>\n                <option>Benue<\/option><option>Borno<\/option><option>Cross River<\/option>\n                <option>Delta<\/option><option>Ebonyi<\/option><option>Edo<\/option>\n                <option>Ekiti<\/option><option>Enugu<\/option><option>FCT \u2013 Abuja<\/option>\n                <option>Gombe<\/option><option>Imo<\/option><option>Jigawa<\/option>\n                <option>Kaduna<\/option><option>Kano<\/option><option>Katsina<\/option>\n                <option>Kebbi<\/option><option>Kogi<\/option><option>Kwara<\/option>\n                <option>Lagos<\/option><option>Nasarawa<\/option><option>Niger<\/option>\n                <option>Ogun<\/option><option>Ondo<\/option><option>Osun<\/option>\n                <option>Oyo<\/option><option>Plateau<\/option><option>Rivers<\/option>\n                <option>Sokoto<\/option><option>Taraba<\/option><option>Yobe<\/option>\n                <option>Zamfara<\/option>\n              <\/select>\n              <div class=\"err-msg\" id=\"err_stateOfOrigin\">State of origin is required<\/div>\n            <\/div>\n            <div class=\"field-group\">\n              <label>Local Government Area <span class=\"req\">*<\/span><\/label>\n              <input type=\"text\" id=\"lga\" name=\"lga\" placeholder=\"Enter LGA\" required>\n              <div class=\"err-msg\" id=\"err_lga\">LGA is required<\/div>\n            <\/div>\n            <div class=\"field-group\">\n              <label>Nationality <span class=\"req\">*<\/span><\/label>\n              <input type=\"text\" id=\"nationality\" name=\"nationality\" value=\"Nigerian\" required>\n            <\/div>\n          <\/div>\n\n          <div class=\"field-grid col-3\" style=\"margin-top:14px;\">\n            <div class=\"field-group\">\n              <label>National ID Number (NIN) <span class=\"req\">*<\/span><\/label>\n              <input type=\"text\" id=\"nin\" name=\"nin\" maxlength=\"11\" placeholder=\"11-digit NIN\" required>\n              <div class=\"hint\">Your 11-digit NIN from NIMC<\/div>\n              <div class=\"err-msg\" id=\"err_nin\">Valid 11-digit NIN is required<\/div>\n            <\/div>\n            <div class=\"field-group\">\n              <label>Religion <span class=\"opt\">(Optional)<\/span><\/label>\n              <input type=\"text\" id=\"religion\" name=\"religion\" placeholder=\"e.g. Christianity, Islam\">\n            <\/div>\n            <div class=\"field-group\">\n              <label>Place of Worship <span class=\"opt\">(Optional)<\/span><\/label>\n              <input type=\"text\" id=\"placeOfWorship\" name=\"placeOfWorship\" placeholder=\"Church \/ Mosque name\">\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- SECTION 2: CONTACT INFORMATION -->\n      <div class=\"form-section\">\n        <div class=\"section-head\">\n          <div class=\"sec-num\">2<\/div>\n          <div class=\"sec-title\">Contact Information<\/div>\n        <\/div>\n        <div class=\"sec-body\">\n          <div class=\"field-grid col-2\">\n            <div class=\"field-group\">\n              <label>Primary Phone Number <span class=\"req\">*<\/span><\/label>\n              <input type=\"tel\" id=\"phone1\" name=\"phone1\" placeholder=\"0801 234 5678\" required>\n              <div class=\"err-msg\" id=\"err_phone1\">Phone number is required<\/div>\n            <\/div>\n            <div class=\"field-group\">\n              <label>WhatsApp Number <span class=\"req\">*<\/span><\/label>\n              <input type=\"tel\" id=\"phoneWhatsApp\" name=\"phoneWhatsApp\" placeholder=\"0801 234 5678\" required>\n              <div class=\"err-msg\" id=\"err_phoneWhatsApp\">WhatsApp number is required<\/div>\n            <\/div>\n          <\/div>\n          <div class=\"field-group\" style=\"margin-top:14px;\">\n            <label>Email Address <span class=\"req\">*<\/span><\/label>\n            <input type=\"email\" id=\"emailAddr\" name=\"emailAddr\" placeholder=\"example@email.com\" required>\n            <div class=\"err-msg\" id=\"err_emailAddr\">Valid email is required<\/div>\n          <\/div>\n          <div class=\"field-group\" style=\"margin-top:14px;\">\n            <label>Current Residential Address <span class=\"req\">*<\/span><\/label>\n            <textarea id=\"resAddress\" name=\"resAddress\" rows=\"2\" placeholder=\"House No, Street Name, Area, City\" required><\/textarea>\n            <div class=\"err-msg\" id=\"err_resAddress\">Residential address is required<\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"form-nav\" style=\"display: flex; justify-content: flex-end; margin-top: 20px;\">\n        <button type=\"button\" class=\"btn btn-next\" onclick=\"nextStep(1)\">Continue \u2192 Education<\/button>\n      <\/div>\n    <\/div>\n\n    <!-- STEP 2 \u2014 EDUCATION & SKILLS -->\n    <div class=\"step-panel\" id=\"step2\">\n      <div class=\"step-title-bar\">\n        <div>\n          <h3>Education &#038; Skills Selection<\/h3>\n          <p>Sections 3 &#038; 4 \u2014 Your background and chosen training area<\/p>\n        <\/div>\n      <\/div>\n\n      <!-- SECTION 3: EDUCATION -->\n      <div class=\"form-section\">\n        <div class=\"section-head\">\n          <div class=\"sec-num\">3<\/div>\n          <div class=\"sec-title\">Educational Background<\/div>\n        <\/div>\n        <div class=\"sec-body\">\n          <div class=\"field-group\" style=\"margin-bottom:14px;\">\n            <label>Highest Educational Qualification <span class=\"req\">*<\/span><\/label>\n            <select id=\"highestQual\" name=\"highestQual\" required>\n              <option value=\"\">Select qualification<\/option>\n              <option>Primary School Leaving Certificate<\/option>\n              <option>SSCE (WAEC\/NECO\/NABTEB)<\/option>\n              <option>OND \/ NCE<\/option>\n              <option>HND \/ B.Sc \/ B.Tech<\/option>\n              <option>Postgraduate (M.Sc\/PhD)<\/option>\n              <option>No Formal Education<\/option>\n            <\/select>\n            <div class=\"err-msg\" id=\"err_highestQual\">Please select your qualification<\/div>\n          <\/div>\n          <div id=\"educHistory\"><\/div>\n          <button type=\"button\" class=\"btn-add\" onclick=\"addEducRow()\" style=\"background: var(--green-light); color: var(--green); border: 1px solid var(--green); padding: 8px 16px; border-radius: var(--radius); cursor: pointer; font-size: 13px; font-weight: 600; margin-top: 10px;\">+ Add Education Record<\/button>\n        <\/div>\n      <\/div>\n\n      <!-- SECTION 4: SKILL SELECTION -->\n      <div class=\"form-section\">\n        <div class=\"section-head\">\n          <div class=\"sec-num\">4<\/div>\n          <div class=\"sec-title\">Skill Acquisition Selection<\/div>\n        <\/div>\n        <div class=\"sec-body\">\n          <div class=\"field-group\" style=\"margin-bottom:16px;\">\n            <label>Choose Your Primary Skill Area <span class=\"req\">*<\/span><\/label>\n            <select id=\"skillArea\" name=\"skillArea\" required>\n              <option value=\"\">Select a skill to learn<\/option>\n              <optgroup label=\"\ud83d\udcbb Digital &#038; Tech\">\n                <option>Software Development (Web\/Mobile)<\/option><option>Data Analytics &#038; Science<\/option>\n                <option>Cybersecurity &#038; Ethical Hacking<\/option><option>UI\/UX Design<\/option>\n                <option>Digital Marketing &#038; SEO<\/option><option>Cloud Computing (AWS\/Azure)<\/option>\n                <option>Artificial Intelligence &#038; ML<\/option>\n              <\/optgroup>\n              <optgroup label=\"\u26a1 Electrical &#038; Energy\">\n                <option>Solar Panel Installation &#038; Maintenance<\/option><option>Electrical Wiring (Domestic\/Industrial)<\/option>\n                <option>Inverter &#038; Battery Systems<\/option>\n              <\/optgroup>\n              <optgroup label=\"\u2744\ufe0f Cooling &#038; Appliance\">\n                <option>AC Installation &#038; Repair<\/option><option>Generator Maintenance<\/option>\n                <option>Refrigerator Repair<\/option><option>Washing Machine Repair<\/option>\n                <option>Electronics Repair<\/option>\n              <\/optgroup>\n              <optgroup label=\"\ud83d\udcf7 Security &#038; Tech\">\n                <option>CCTV &#038; Alarm Installation<\/option><option>Access Control Systems<\/option>\n                <option>Network &#038; Smart Home Tech<\/option>\n              <\/optgroup>\n              <optgroup label=\"\ud83c\udfd7\ufe0f Construction &#038; Finishing\">\n                <option>Tiling &#038; Screeding<\/option><option>Painting &#038; Decorating<\/option>\n                <option>Welding &#038; Fabrication<\/option><option>Carpentry &#038; Furniture Making<\/option>\n              <\/optgroup>\n              <optgroup label=\"\u2702\ufe0f Lifestyle &#038; Creative\">\n                <option>Fashion Design &#038; Tailoring<\/option><option>Hair Styling &#038; Beauty<\/option>\n                <option>Catering &#038; Food Services<\/option><option>Event Decoration<\/option>\n                <option>Photography &#038; Videography<\/option>\n              <\/optgroup>\n            <\/select>\n            <div class=\"err-msg\" id=\"err_skillArea\">Please select a skill area<\/div>\n          <\/div>\n\n          <div class=\"field-group\" style=\"margin-bottom:16px;\">\n            <label>Preferred Training Centre <span class=\"req\">*<\/span><\/label>\n            <div class=\"radio-group col\" id=\"trainingCentre\">\n              <label class=\"radio-option\" onclick=\"selectRadio(this,'trainingCentre')\"><input type=\"radio\" name=\"trainingCentre\" value=\"Centre A\"><div class=\"mark\"><\/div><div><strong>Centre A<\/strong> \u2014 OYECDO HQ, 3rd Floor, Indigo Mall, Stadium Road, Port Harcourt<\/div><\/label>\n              <label class=\"radio-option\" onclick=\"selectRadio(this,'trainingCentre')\"><input type=\"radio\" name=\"trainingCentre\" value=\"Centre B\"><div class=\"mark\"><\/div><div><strong>Centre B<\/strong> \u2014 ServHub Academy, 123 Igwuruta Road, Atali Town, Port Harcourt<\/div><\/label>\n              <label class=\"radio-option\" onclick=\"selectRadio(this,'trainingCentre')\"><input type=\"radio\" name=\"trainingCentre\" value=\"No Preference\"><div class=\"mark\"><\/div>No Preference (OYECDO to assign)<\/label>\n            <\/div>\n            <div class=\"err-msg\" id=\"err_trainingCentre\">Please select a training centre<\/div>\n          <\/div>\n\n          <div class=\"field-group\">\n            <label>Preferred Training Schedule <span class=\"req\">*<\/span><\/label>\n            <div class=\"radio-group\" id=\"trainingSchedule\">\n              <label class=\"radio-option\" onclick=\"selectRadio(this,'trainingSchedule')\"><input type=\"radio\" name=\"trainingSchedule\" value=\"Morning\"><div class=\"mark\"><\/div>Morning (8am-12pm)<\/label>\n              <label class=\"radio-option\" onclick=\"selectRadio(this,'trainingSchedule')\"><input type=\"radio\" name=\"trainingSchedule\" value=\"Afternoon\"><div class=\"mark\"><\/div>Afternoon (12pm-4pm)<\/label>\n              <label class=\"radio-option\" onclick=\"selectRadio(this,'trainingSchedule')\"><input type=\"radio\" name=\"trainingSchedule\" value=\"Evening\"><div class=\"mark\"><\/div>Evening (4pm-7pm)<\/label>\n            <\/div>\n            <div class=\"err-msg\" id=\"err_trainingSchedule\">Please select a schedule<\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"form-nav\" style=\"display: flex; justify-content: space-between; margin-top: 20px;\">\n        <button type=\"button\" class=\"btn btn-prev\" onclick=\"prevStep(2)\">\u2190 Back<\/button>\n        <button type=\"button\" class=\"btn btn-next\" onclick=\"nextStep(2)\">Continue \u2192 Employment<\/button>\n      <\/div>\n    <\/div>\n\n    <!-- STEP 3 \u2014 EMPLOYMENT & SOCIO-ECONOMIC -->\n    <div class=\"step-panel\" id=\"step3\">\n      <div class=\"step-title-bar\">\n        <div>\n          <h3>Employment &#038; Socio-Economic Information<\/h3>\n          <p>Sections 5 &#038; 6 \u2014 Your current work and household situation<\/p>\n        <\/div>\n      <\/div>\n\n      <!-- SECTION 5: EMPLOYMENT -->\n      <div class=\"form-section\">\n        <div class=\"section-head\">\n          <div class=\"sec-num\">5<\/div>\n          <div class=\"sec-title\">Employment &#038; Work History<\/div>\n        <\/div>\n        <div class=\"sec-body\">\n          <div class=\"field-group\" style=\"margin-bottom:14px;\">\n            <label>Current Employment Status <span class=\"req\">*<\/span><\/label>\n            <div class=\"radio-group col\" id=\"empStatus\">\n              <label class=\"radio-option\" onclick=\"selectRadio(this,'empStatus')\"><input type=\"radio\" name=\"empStatus\" value=\"Unemployed\"><div class=\"mark\"><\/div>Unemployed<\/label>\n              <label class=\"radio-option\" onclick=\"selectRadio(this,'empStatus')\"><input type=\"radio\" name=\"empStatus\" value=\"Self-employed\"><div class=\"mark\"><\/div>Self-employed<\/label>\n              <label class=\"radio-option\" onclick=\"selectRadio(this,'empStatus')\"><input type=\"radio\" name=\"empStatus\" value=\"Employed\"><div class=\"mark\"><\/div>Employed (Full-time\/Part-time)<\/label>\n              <label class=\"radio-option\" onclick=\"selectRadio(this,'empStatus')\"><input type=\"radio\" name=\"empStatus\" value=\"Student\"><div class=\"mark\"><\/div>Student<\/label>\n            <\/div>\n            <div class=\"err-msg\" id=\"err_empStatus\">Please select your status<\/div>\n          <\/div>\n          <div id=\"empHistoryRows\"><\/div>\n          <button type=\"button\" class=\"btn-add\" onclick=\"addEmpRow()\" style=\"background: var(--green-light); color: var(--green); border: 1px solid var(--green); padding: 8px 16px; border-radius: var(--radius); cursor: pointer; font-size: 13px; font-weight: 600;\">+ Add Employment Record<\/button>\n        <\/div>\n      <\/div>\n\n      <!-- SECTION 6: SOCIO-ECONOMIC -->\n      <div class=\"form-section\">\n        <div class=\"section-head\">\n          <div class=\"sec-num\">6<\/div>\n          <div class=\"sec-title\">Socio-Economic &#038; Household Information<\/div>\n        <\/div>\n        <div class=\"sec-body\">\n          <div class=\"field-group\" style=\"margin-bottom:14px;\">\n            <label>Monthly Household Income (Approximate) <span class=\"req\">*<\/span><\/label>\n            <div class=\"radio-group\" id=\"householdIncome\">\n              <label class=\"radio-option\" onclick=\"selectRadio(this,'householdIncome')\"><input type=\"radio\" name=\"householdIncome\" value=\"Below 20k\"><div class=\"mark\"><\/div>Below \u20a620,000<\/label>\n              <label class=\"radio-option\" onclick=\"selectRadio(this,'householdIncome')\"><input type=\"radio\" name=\"householdIncome\" value=\"20k-50k\"><div class=\"mark\"><\/div>\u20a620,001 \u2013 \u20a650,000<\/label>\n              <label class=\"radio-option\" onclick=\"selectRadio(this,'householdIncome')\"><input type=\"radio\" name=\"householdIncome\" value=\"Above 50k\"><div class=\"mark\"><\/div>Above \u20a650,000<\/label>\n            <\/div>\n            <div class=\"err-msg\" id=\"err_householdIncome\">Please select income range<\/div>\n          <\/div>\n          <div class=\"field-grid col-2\">\n            <div class=\"field-group\">\n              <label>No. of People in Household <span class=\"req\">*<\/span><\/label>\n              <input type=\"number\" id=\"householdSize\" name=\"householdSize\" min=\"1\" required>\n            <\/div>\n            <div class=\"field-group\">\n              <label>Number of Dependants <span class=\"req\">*<\/span><\/label>\n              <input type=\"number\" id=\"dependants\" name=\"dependants\" min=\"0\" required>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"form-nav\" style=\"display: flex; justify-content: space-between; margin-top: 20px;\">\n        <button type=\"button\" class=\"btn btn-prev\" onclick=\"prevStep(3)\">\u2190 Back<\/button>\n        <button type=\"button\" class=\"btn btn-next\" onclick=\"nextStep(3)\">Continue \u2192 Health &#038; Digital<\/button>\n      <\/div>\n    <\/div>\n\n    <!-- STEP 4 \u2014 HEALTH & DIGITAL -->\n    <div class=\"step-panel\" id=\"step4\">\n      <div class=\"step-title-bar\">\n        <div>\n          <h3>Health &#038; Digital Readiness<\/h3>\n          <p>Sections 7 &#038; 8 \u2014 Physical health and technology access<\/p>\n        <\/div>\n      <\/div>\n\n      <!-- SECTION 7: HEALTH -->\n      <div class=\"form-section\">\n        <div class=\"section-head\">\n          <div class=\"sec-num\">7<\/div>\n          <div class=\"sec-title\">Health &#038; Physical Status<\/div>\n        <\/div>\n        <div class=\"sec-body\">\n          <div class=\"field-group\" style=\"margin-bottom:14px;\">\n            <label>Do you have any physical disability or chronic health condition? <span class=\"req\">*<\/span><\/label>\n            <div class=\"radio-group\" id=\"hasDisability\">\n              <label class=\"radio-option\" onclick=\"selectRadio(this,'hasDisability','disabilityDetail')\"><input type=\"radio\" name=\"hasDisability\" value=\"Yes\"><div class=\"mark\"><\/div>Yes<\/label>\n              <label class=\"radio-option\" onclick=\"selectRadio(this,'hasDisability')\"><input type=\"radio\" name=\"hasDisability\" value=\"No\"><div class=\"mark\"><\/div>No<\/label>\n            <\/div>\n          <\/div>\n          <div class=\"conditional\" id=\"disabilityDetail\" style=\"display:none; margin-bottom:14px;\">\n            <div class=\"field-group\">\n              <label>Please describe and state any special assistance needed<\/label>\n              <textarea id=\"disabilityText\" name=\"disabilityText\" placeholder=\"Nature of disability or health condition\" rows=\"3\"><\/textarea>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- SECTION 8: DIGITAL READINESS -->\n      <div class=\"form-section\">\n        <div class=\"section-head\">\n          <div class=\"sec-num\">8<\/div>\n          <div class=\"sec-title\">Digital Literacy &#038; Device Access<\/div>\n        <\/div>\n        <div class=\"sec-body\">\n          <div class=\"field-group\" style=\"margin-bottom:14px;\">\n            <label>How would you rate your computer skills? <span class=\"req\">*<\/span><\/label>\n            <div class=\"radio-group\" id=\"compSkills\">\n              <label class=\"radio-option\" onclick=\"selectRadio(this,'compSkills')\"><input type=\"radio\" name=\"compSkills\" value=\"None\"><div class=\"mark\"><\/div>None<\/label>\n              <label class=\"radio-option\" onclick=\"selectRadio(this,'compSkills')\"><input type=\"radio\" name=\"compSkills\" value=\"Basic\"><div class=\"mark\"><\/div>Basic<\/label>\n              <label class=\"radio-option\" onclick=\"selectRadio(this,'compSkills')\"><input type=\"radio\" name=\"compSkills\" value=\"Intermediate\"><div class=\"mark\"><\/div>Intermediate<\/label>\n            <\/div>\n          <\/div>\n          <div class=\"field-grid col-2\">\n            <div class=\"field-group\">\n              <label>Do you own a smartphone? <span class=\"req\">*<\/span><\/label>\n              <div class=\"radio-group\" id=\"hasSmartphone\">\n                <label class=\"radio-option\" onclick=\"selectRadio(this,'hasSmartphone')\"><input type=\"radio\" name=\"hasSmartphone\" value=\"Yes\"><div class=\"mark\"><\/div>Yes<\/label>\n                <label class=\"radio-option\" onclick=\"selectRadio(this,'hasSmartphone')\"><input type=\"radio\" name=\"hasSmartphone\" value=\"No\"><div class=\"mark\"><\/div>No<\/label>\n              <\/div>\n            <\/div>\n            <div class=\"field-group\">\n              <label>Do you own a laptop? <span class=\"req\">*<\/span><\/label>\n              <div class=\"radio-group\" id=\"hasLaptop\">\n                <label class=\"radio-option\" onclick=\"selectRadio(this,'hasLaptop')\"><input type=\"radio\" name=\"hasLaptop\" value=\"Yes\"><div class=\"mark\"><\/div>Yes<\/label>\n                <label class=\"radio-option\" onclick=\"selectRadio(this,'hasLaptop')\"><input type=\"radio\" name=\"hasLaptop\" value=\"No\"><div class=\"mark\"><\/div>No<\/label>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"form-nav\" style=\"display: flex; justify-content: space-between; margin-top: 20px;\">\n        <button type=\"button\" class=\"btn btn-prev\" onclick=\"prevStep(4)\">\u2190 Back<\/button>\n        <button type=\"button\" class=\"btn btn-next\" onclick=\"nextStep(4)\">Continue \u2192 References<\/button>\n      <\/div>\n    <\/div>\n\n    <!-- STEP 5 \u2014 REFERENCES & SUBMISSION -->\n    <div class=\"step-panel\" id=\"step5\">\n      <div class=\"step-title-bar\">\n        <div>\n          <h3>References &#038; Final Submission<\/h3>\n          <p>Sections 9 to 13 \u2014 Verification and document uploads<\/p>\n        <\/div>\n      <\/div>\n\n      <!-- SECTION 9: REFERENCES -->\n      <div class=\"form-section\">\n        <div class=\"section-head\">\n          <div class=\"sec-num\">9<\/div>\n          <div class=\"sec-title\">Character References<\/div>\n        <\/div>\n        <div class=\"sec-body\">\n          <div class=\"info-note\">Provide two credible persons (not family members) who can vouch for your character.<\/div>\n          <div class=\"field-grid col-2\" style=\"margin-bottom: 15px;\">\n            <div class=\"field-group\"><label>Ref 1: Full Name <span class=\"req\">*<\/span><\/label><input type=\"text\" id=\"ref1Name\" name=\"ref1Name\" required><\/div>\n            <div class=\"field-group\"><label>Ref 1: Phone <span class=\"req\">*<\/span><\/label><input type=\"tel\" id=\"ref1Phone\" name=\"ref1Phone\" required><\/div>\n          <\/div>\n          <div class=\"field-grid col-2\">\n            <div class=\"field-group\"><label>Ref 2: Full Name <span class=\"req\">*<\/span><\/label><input type=\"text\" id=\"ref2Name\" name=\"ref2Name\" required><\/div>\n            <div class=\"field-group\"><label>Ref 2: Phone <span class=\"req\">*<\/span><\/label><input type=\"tel\" id=\"ref2Phone\" name=\"ref2Phone\" required><\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- SECTION 11: FEE WAIVER -->\n      <div class=\"form-section\">\n        <div class=\"section-head\">\n          <div class=\"sec-num\">11<\/div>\n          <div class=\"sec-title\">Fee Waiver Application<\/div>\n        <\/div>\n        <div class=\"sec-body\">\n          <div class=\"info-note\">Only complete this section if you are applying for a waiver of the \u20a625,000 fee.<\/div>\n          <div class=\"field-group\">\n            <label>Are you applying for a fee waiver?<\/label>\n            <div class=\"radio-group\" id=\"applyWaiver\">\n              <label class=\"radio-option\" onclick=\"selectRadio(this,'applyWaiver','waiverSection')\"><input type=\"radio\" name=\"applyWaiver\" value=\"Yes\"><div class=\"mark\"><\/div>Yes<\/label>\n              <label class=\"radio-option\" onclick=\"selectRadio(this,'applyWaiver')\"><input type=\"radio\" name=\"applyWaiver\" value=\"No\"><div class=\"mark\"><\/div>No<\/label>\n            <\/div>\n          <\/div>\n          <div class=\"conditional\" id=\"waiverSection\" style=\"display:none; margin-top:12px;\">\n            <div class=\"field-group\">\n              <label>Ground(s) for Waiver Request<\/label>\n              <textarea id=\"waiverStatement\" name=\"waiverStatement\" rows=\"4\" placeholder=\"Explain why you need a fee waiver.\"><\/textarea>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- SECTION 12: DOCUMENTS -->\n      <div class=\"form-section\">\n        <div class=\"section-head\">\n          <div class=\"sec-num\">12<\/div>\n          <div class=\"sec-title\">Document Uploads<\/div>\n        <\/div>\n        <div class=\"sec-body\">\n          <div class=\"info-note\">Upload scanned copies or clear photos. Max 5MB per file.<\/div>\n          <div class=\"field-group\" style=\"margin-bottom: 14px;\">\n            <label>1. Passport Photograph <span class=\"req\">*<\/span><\/label>\n            <div class=\"file-upload-wrap\" style=\"border: 1.5px dashed var(--border); padding: 15px; border-radius: var(--radius); text-align: center; cursor: pointer;\">\n              <input type=\"file\" id=\"docPassport\" name=\"docPassport\" accept=\"image\/*\" style=\"display: none;\" onchange=\"updateFileName(this, 'fn_docPassport')\">\n              <div onclick=\"document.getElementById('docPassport').click()\">\n                <div style=\"font-size: 24px; margin-bottom: 5px;\">\ud83d\udcf7<\/div>\n                <div style=\"font-size: 13px; font-weight: 600;\">Upload passport photo<\/div>\n                <div id=\"fn_docPassport\" style=\"font-size: 11px; color: var(--green); margin-top: 5px;\"><\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n          <div class=\"field-group\">\n            <label>2. National ID \/ NIN Slip <span class=\"req\">*<\/span><\/label>\n            <div class=\"file-upload-wrap\" style=\"border: 1.5px dashed var(--border); padding: 15px; border-radius: var(--radius); text-align: center; cursor: pointer;\">\n              <input type=\"file\" id=\"docID\" name=\"docID\" accept=\".pdf,.jpg,.jpeg,.png\" style=\"display: none;\" onchange=\"updateFileName(this, 'fn_docID')\">\n              <div onclick=\"document.getElementById('docID').click()\">\n                <div style=\"font-size: 24px; margin-bottom: 5px;\">\ud83e\udeaa<\/div>\n                <div style=\"font-size: 13px; font-weight: 600;\">Upload ID document<\/div>\n                <div id=\"fn_docID\" style=\"font-size: 11px; color: var(--green); margin-top: 5px;\"><\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- SECTION 13: DECLARATION -->\n      <div class=\"form-section\">\n        <div class=\"section-head\">\n          <div class=\"sec-num\">13<\/div>\n          <div class=\"sec-title\">Declaration &#038; Consent<\/div>\n        <\/div>\n        <div class=\"sec-body\">\n          <div class=\"check-group\">\n            <label class=\"check-option\" onclick=\"toggleCheck(this)\"><input type=\"checkbox\" id=\"consentData\" name=\"consentData\" required><div class=\"mark\"><\/div>I declare that the information provided is true.<\/label>\n            <label class=\"check-option\" onclick=\"toggleCheck(this)\"><input type=\"checkbox\" id=\"consentTerms\" name=\"consentTerms\" required><div class=\"mark\"><\/div>I agree to the terms and conditions.<\/label>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"form-nav\" style=\"display: flex; justify-content: space-between; margin-top: 20px;\">\n        <button type=\"button\" class=\"btn btn-prev\" onclick=\"prevStep(5)\">\u2190 Back<\/button>\n        <button type=\"button\" class=\"btn btn-submit\" onclick=\"submitForm()\">Submit Application<\/button>\n      <\/div>\n    <\/div>\n\n  <\/form>\n\n  <!-- SUCCESS SCREEN -->\n  <div id=\"successScreen\" class=\"success-screen\">\n    <div class=\"success-icon\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"color: var(--green);\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>\n    <\/div>\n    <h2>Application Submitted!<\/h2>\n    <p>Thank you for applying. Your reference number is:<\/p>\n    <div class=\"ref-number\" id=\"refNumber\">&#8230;<\/div>\n    <p>A confirmation email has been sent to: <strong id=\"confirmEmail\">&#8230;<\/strong><\/p>\n    <div style=\"margin-top:30px;\">\n      <button class=\"btn btn-next\" onclick=\"location.reload()\">Submit Another Application<\/button>\n    <\/div>\n  <\/div>\n\n<\/div>\n\n<!-- FOOTER -->\n<footer class=\"form-footer\">\n  &copy; 2026 OYECDO. All rights reserved.\n<\/footer>\n\n<script>\n\/\/ \u2500\u2500 NAVIGATION LOGIC \u2500\u2500\nlet currentStep = 1;\nconst totalSteps = 5;\n\nfunction updateProgress(step) {\n  const fill = document.getElementById('progressFill');\n  if (fill) fill.style.width = ((step - 1) \/ (totalSteps - 1) * 100) + '%';\n  \n  for (let i = 1; i <= totalSteps; i++) {\n    const ps = document.getElementById('ps' + i);\n    if (ps) {\n      ps.classList.toggle('active', i === step);\n      ps.classList.toggle('done', i < step);\n    }\n  }\n}\n\nfunction goToStep(step) {\n  if (step < currentStep) {\n    showStep(step);\n  } else if (step > currentStep) {\n    if (validateStep(currentStep)) showStep(step);\n  }\n}\n\nfunction showStep(step) {\n  document.querySelectorAll('.step-panel').forEach(p => p.classList.remove('active'));\n  const target = document.getElementById('step' + step);\n  if (target) target.classList.add('active');\n  currentStep = step;\n  updateProgress(step);\n  window.scrollTo({ top: 0, behavior: 'smooth' });\n}\n\nfunction nextStep(step) {\n  if (validateStep(step)) showStep(step + 1);\n}\n\nfunction prevStep(step) {\n  showStep(step - 1);\n}\n\n\/\/ \u2500\u2500 VALIDATION \u2500\u2500\nfunction validateStep(step) {\n  const panel = document.getElementById('step' + step);\n  const required = panel.querySelectorAll('[required]');\n  let valid = true;\n  \n  required.forEach(el => {\n    const errId = 'err_' + el.id;\n    const errEl = document.getElementById(errId);\n    if (!el.value || (el.type === 'checkbox' && !el.checked)) {\n      el.classList.add('error');\n      if (errEl) errEl.classList.add('show');\n      valid = false;\n    } else {\n      el.classList.remove('error');\n      if (errEl) errEl.classList.remove('show');\n    }\n  });\n  \n  return valid;\n}\n\n\/\/ \u2500\u2500 UI HELPERS \u2500\u2500\nfunction selectRadio(label, groupName, conditionalId) {\n  const group = label.closest('.radio-group');\n  group.querySelectorAll('.radio-option').forEach(opt => opt.classList.remove('selected'));\n  label.classList.add('selected');\n  label.querySelector('input').checked = true;\n  \n  if (conditionalId) {\n    document.getElementById(conditionalId).style.display = 'block';\n  } else {\n    if (groupName === 'hasDisability') document.getElementById('disabilityDetail').style.display = 'none';\n    if (groupName === 'applyWaiver') document.getElementById('waiverSection').style.display = 'none';\n  }\n}\n\nfunction toggleCheck(label) {\n  const input = label.querySelector('input');\n  input.checked = !input.checked;\n  label.classList.toggle('selected', input.checked);\n}\n\nfunction previewPassport(input) {\n  if (input.files && input.files[0]) {\n    const reader = new FileReader();\n    reader.onload = function(e) {\n      const preview = document.getElementById('passportPreview');\n      preview.src = e.target.result;\n      preview.style.display = 'block';\n      document.querySelector('.passport-icon').style.display = 'none';\n    };\n    reader.readAsDataURL(input.files[0]);\n  }\n}\n\nfunction updateFileName(input, targetId) {\n  const target = document.getElementById(targetId);\n  if (input.files && input.files[0]) {\n    target.textContent = '\u2713 ' + input.files[0].name;\n  }\n}\n\nfunction checkMinorStatus() {}\n\n\/\/ \u2500\u2500 REPEATERS \u2500\u2500\nlet educRows = 0;\nfunction addEducRow() {\n  if (educRows >= 3) return;\n  educRows++;\n  const id = 'er_' + educRows;\n  const div = document.createElement('div');\n  div.style.cssText = \"background: #f9f9f9; padding: 15px; border-radius: 8px; margin-top: 10px; position: relative; border: 1px solid #eee;\";\n  div.id = id;\n  div.innerHTML = `\n    <button type=\"button\" onclick=\"document.getElementById('${id}').remove()\" style=\"position: absolute; top: 5px; right: 5px; background: none; border: none; color: #999; cursor: pointer; font-size: 18px;\">\u00d7<\/button>\n    <div class=\"field-grid col-2\">\n      <div class=\"field-group\"><label>Institution<\/label><input type=\"text\" name=\"edu_inst[]\"><\/div>\n      <div class=\"field-group\"><label>Qualification<\/label><input type=\"text\" name=\"edu_qual[]\"><\/div>\n    <\/div>`;\n  document.getElementById('educHistory').appendChild(div);\n}\n\nlet empRows = 0;\nfunction addEmpRow() {\n  if (empRows >= 3) return;\n  empRows++;\n  const id = 'emprow_' + empRows;\n  const div = document.createElement('div');\n  div.style.cssText = \"background: #f9f9f9; padding: 15px; border-radius: 8px; margin-top: 10px; position: relative; border: 1px solid #eee;\";\n  div.id = id;\n  div.innerHTML = `\n    <button type=\"button\" onclick=\"document.getElementById('${id}').remove()\" style=\"position: absolute; top: 5px; right: 5px; background: none; border: none; color: #999; cursor: pointer; font-size: 18px;\">\u00d7<\/button>\n    <div class=\"field-grid col-2\">\n      <div class=\"field-group\"><label>Employer<\/label><input type=\"text\" name=\"emp_name[]\"><\/div>\n      <div class=\"field-group\"><label>Role<\/label><input type=\"text\" name=\"emp_role[]\"><\/div>\n    <\/div>`;\n  document.getElementById('empHistoryRows').appendChild(div);\n}\n\n\/\/ \u2500\u2500 SUBMIT \u2500\u2500\nfunction submitForm() {\n  if (!validateStep(5)) return;\n  \n  const submitBtn = document.querySelector('.btn-submit');\n  const originalText = submitBtn.textContent;\n  submitBtn.textContent = 'Submitting...';\n  submitBtn.disabled = true;\n  submitBtn.style.opacity = '0.7';\n  \n  \/\/ Collect all form data\n  const form = document.getElementById('regForm');\n  const formData = new FormData(form);\n  \n  \/\/ CHANGE THIS URL to match where you place the handler on your WordPress site\n  const handlerURL = '\/wp-content\/themes\/twentytwentyfive\/oyecdo-handler.php';\n  \n  fetch(handlerURL, {\n    method: 'POST',\n    body: formData\n  })\n  .then(response => response.json())\n  .then(data => {\n    if (data.success) {\n      document.getElementById('refNumber').textContent = data.ref_number;\n      document.getElementById('confirmEmail').textContent = document.getElementById('emailAddr').value;\n      document.getElementById('regForm').style.display = 'none';\n      document.querySelector('.notice').style.display = 'none';\n      document.getElementById('successScreen').style.display = 'block';\n      window.scrollTo({ top: 0, behavior: 'smooth' });\n    } else {\n      alert('Submission failed: ' + (data.message || 'Unknown error. Please try again.'));\n      submitBtn.textContent = originalText;\n      submitBtn.disabled = false;\n      submitBtn.style.opacity = '1';\n    }\n  })\n  .catch(error => {\n    console.error('Submission error:', error);\n    alert('Could not submit your form. Please check your internet connection and try again.');\n    submitBtn.textContent = originalText;\n    submitBtn.disabled = false;\n    submitBtn.style.opacity = '1';\n  });\n}\n\n\/\/ Init\nupdateProgress(1);\n<\/script>\n<\/body>\n","protected":false},"excerpt":{"rendered":"<p>OYECDO Ogwus Youth Empowerment &#038; Community Development Organization 2026 Cohort In Partnership with ServHub Technologies Ltd Youth Skills Acquisition &#038; Digital Workforce Development Programme Participant Registration Form \u2014 Cohort Year 2026 | Form Ref: OYECDO\/REGFORM\/2026 RC: 8172165 Ages 18 \u2013 35 \u20a625,000 Registration Fee 27 Skill Areas 1 Personal 2 Education &#038; Skills 3 Employment [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"admin","author_link":"https:\/\/oyecdo.servhubacademy.online\/?author=2"},"uagb_comment_info":0,"uagb_excerpt":"OYECDO Ogwus Youth Empowerment &#038; Community Development Organization 2026 Cohort In Partnership with ServHub Technologies Ltd Youth Skills Acquisition &#038; Digital Workforce Development Programme Participant Registration Form \u2014 Cohort Year 2026 | Form Ref: OYECDO\/REGFORM\/2026 RC: 8172165 Ages 18 \u2013 35 \u20a625,000 Registration Fee 27 Skill Areas 1 Personal 2 Education &#038; Skills 3 Employment&hellip;","_links":{"self":[{"href":"https:\/\/oyecdo.servhubacademy.online\/index.php?rest_route=\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oyecdo.servhubacademy.online\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/oyecdo.servhubacademy.online\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/oyecdo.servhubacademy.online\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/oyecdo.servhubacademy.online\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6"}],"version-history":[{"count":5,"href":"https:\/\/oyecdo.servhubacademy.online\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":18,"href":"https:\/\/oyecdo.servhubacademy.online\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions\/18"}],"wp:attachment":[{"href":"https:\/\/oyecdo.servhubacademy.online\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}