/* NUPRC OGISP — clean, responsive base + layout (no syntax errors)  */

/* Font (optional) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Reset / base */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  line-height:1.45;
  color:#1b1e22;
  background:#f5f7f8;
}

/* Top nav (keeps your existing markup tidy) */
.nav{
  position:sticky; top:0; z-index:30;
  background:#101418; border-bottom:1px solid rgba(255,255,255,.1);
}
.nav ul{
  margin:0; padding:10px 16px; list-style:none;
  display:flex; gap:18px; align-items:center; justify-content:flex-end;
}
.nav a{ color:#fff; text-decoration:none; font-weight:600; }
.nav a:hover{ text-decoration:underline; }
.nav .logo{ height:44px; }

/* Main wrapper */
.container{
  /* desktop/tablet: two columns */
  max-width:1160px;
  margin:32px auto;
  padding:0 16px;
  display:grid;
  grid-template-columns: 360px 1fr; /* left = 360, right fills */
  gap:28px;
  align-items:start;
}

/* Left white panel */
.panel-left{
  background:#fff;
  border:1px solid #e5e8ec;
  border-radius:4px;
  padding:24px;
  box-shadow:0 8px 20px rgba(16,20,24,.06);
}
.panel-left h1{
  margin:0 0 6px 0;
  font-size:36px; line-height:1.1; text-align:center; color:#1b1e22;
}
.panel-left .subtitle{
  margin:0 0 18px 0;
  font-size:14px; text-align:center; color:#6b7785;
}
.btn{
  display:inline-block; width:100%;
  padding:12px 16px; border-radius:4px; border:0; cursor:pointer;
  font-weight:700; text-align:center; text-decoration:none; transition:filter .15s ease;
  color:#fff; background:#2e7d32;
  background-image: linear-gradient(180deg, #2fb34d 0%, #2e7d32 100%);
  box-shadow:0 8px 18px rgba(47,179,77,.18);
}
.btn:hover{ filter:brightness(.96); }
.btn:active{ filter:brightness(.92); }

.panel-left a[href*="Forgot"],
.panel-left a[href*="forgot"]{
  display:inline-block; margin-top:8px; font-size:13px; color:#1e64c8; text-decoration:none;
}
.panel-left a[href*="Forgot"]:hover,
.panel-left a[href*="forgot"]:hover{ text-decoration:underline; }

/* Payment block */
.payment{ margin-top:20px; }
.payment h4{ margin:0 0 10px 0; font-size:16px; }
.payment img{ display:block; width:100%; height:auto; border:1px solid #f0f2f4; border-radius:3px; }
.payment ul{ list-style:none; margin:12px 0 0 0; padding:0; color:#2b3137; }
.payment li{ margin:4px 0; }

/* ========== Right: Getting Started (green panel) ========== */
.step-section{
  position:relative;
  padding:24px 20px 28px;
  color:#fff;
  border-radius:4px;
  border:1px solid #1a6b38;
  background:#168a48; /* base green */
  /* diagonal pattern overlay like screenshot */
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,.08) 0,
      rgba(255,255,255,.08) 8px,
      transparent 8px,
      transparent 40px
    );
  box-shadow:0 8px 20px rgba(16,20,24,.08);
}
.step-section h2{
  margin:0 0 18px 0; font-size:30px; line-height:1.2;
}

/* One step row */
.step{
  display:grid;
  grid-template-columns: 80px 1fr;
  align-items:center;
  column-gap:16px;
  row-gap:10px;
  padding:16px 12px;
  border-radius:8px;
}
.step + .step{ margin-top:6px; }

/* Yellow number badge */
.step-num{
  width:48px; height:48px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:#ffeb3b; color:#101418; font-weight:800; font-size:22px;
}

/* Round thumbnail */
.step-img{
  width:100px; height:100px; border-radius:50%;
  object-fit:cover; border:3px solid rgba(255,255,255,.75);
  margin-right:8px;
}

/* Text side */
.step-content h3{
  margin:0 0 10px 0; font-size:22px; font-weight:700; color:#fff;
}
.step-content a{
  color:#fff; text-decoration:underline; display:inline-block; margin-bottom:6px;
}
.step-content a:hover{ opacity:.9; }
.step-content p{ margin:0; color:#eaf7ef; }

/* Footer */
footer{
  text-align:center; color:#6b7785; padding:24px 16px;
}
footer a{ color:#6b7785; }

/* ========== FINAL OVERRIDES (these rules go LAST) ========== */

/* Kill any legacy floats/widths if an older theme sets them */
.panel-left,
.step-section{ width:auto !important; float:none !important; clear:none !important; }

/* Let the green panel truly occupy the right grid track */
.step-section{ min-width:0 !important; }

/* Phones & small tablets: stack columns, green panel under the white panel */
@media (max-width: 991.98px){
  .container{
    display:block;
  }
  .step-section{
    margin-top:24px;
  }
}

/* Very small phones: tighten typography & media a bit */
@media (max-width: 420px){
  .panel-left h1{ font-size:30px; }
  .step-section h2{ font-size:26px; }
  .step-img{ width:84px; height:84px; }
  .step-num{ width:42px; height:42px; font-size:18px; }
}

/* =========================
   NUPRC – FINAL LAYOUT FIX
   (place at the very end)
   ========================= */

/* Desktop/tablet: two columns — left (buttons) + right (Getting Started) */
@media (min-width: 992px) {
  /* force the new grid layout for the page body */
  .container{
    display: grid !important;
    grid-template-columns: 360px minmax(700px, 1fr) !important; /* left + wide right */
    column-gap: 28px !important;
    align-items: start !important;
    max-width: 1160px;
    margin: 0 auto;
  }

  /* kill legacy floats/fixed widths the old theme applies */
  .panel-left,
  .step-section{
    float: none !important;
    width: auto !important;
    max-width: none !important;
    clear: none !important;
  }

  /* make sure the green panel can grow */
  .step-section{ min-width: 700px !important; }

  /* tidy the interior of each step */
  .step{
    display: grid !important;
    grid-template-columns: 72px 136px 1fr !important; /* badge + image + text */
    column-gap: 20px !important;
    align-items: center !important;
  }
  .step-num{ width:48px; height:48px; font-size:22px; }
  .step-img{ width:136px; height:136px; object-fit:cover; border-radius:50%; }

  .step-content h3{ font-size:22px; margin:0 0 .5rem; }
  /* let full phrases sit on a single line instead of breaking every word */
  .step-content a{ display: inline !important; }
}

/* Phones: stack columns; green panel under the left side */
@media (max-width: 991.98px){
  .container{ display: block !important; }
  .panel-left,
  .step-section{ width:100% !important; max-width:100% !important; float:none !important; }
  .step{ grid-template-columns: 64px 112px 1fr; }
}

/* ===== MOBILE NAV (hamburger) ===== */
.nav { position: relative; }
.nav .menu { display:flex; gap:18px; align-items:center; }
.nav-toggle { display:none; }

/* hamburger visuals */
.nav-toggle{
  width:42px;height:36px;border:0;background:transparent;cursor:pointer;
  display:none;align-items:center;justify-content:center; gap:5px;
}
.nav-toggle .bar{
  display:block;width:26px;height:2px;background:#fff;border-radius:2px;
  position:relative;
}
.nav-toggle .bar:nth-child(1){ transform:translateY(-6px); }
.nav-toggle .bar:nth-child(3){ transform:translateY(6px); }

/* phone layout */
@media (max-width: 991.98px){
  .nav { min-height:56px; }
  .nav .menu{
    display:none;                       /* hidden until open */
    position:fixed; inset:56px 0 0 0;   /* below top bar */
    background:#121212; padding:14px 18px 24px;
    flex-direction:column; align-items:flex-start; gap:18px;
    z-index:1200;
  }
  .nav.open .menu{ display:flex; }
  .nav-toggle{ display:flex; position:absolute; right:12px; top:10px; z-index:1300; }
  /* animate into X */
  .nav.open .nav-toggle .bar:nth-child(1){ transform:translateY(0) rotate(45deg); }
  .nav.open .nav-toggle .bar:nth-child(2){ opacity:0; }
  .nav.open .nav-toggle .bar:nth-child(3){ transform:translateY(0) rotate(-45deg); }
}

/* ===== “Getting Started” – mobile fix to match reference ===== */
/* Base: keep your current desktop/tablet styles. Only change phones. */
@media (max-width: 991.98px){

  /* Section title large, breathing room */
  .step-section > h2,
  .step-section .section-title,
  .step-section .gs-title{
    font-size: clamp(28px, 6vw, 44px);
    line-height:1.1;
    margin: 12px 16px 6px;
    color:#fff;   /* matches the green panel style */
  }

  /* Each step stacks: image first, then content; number badge overlays image */
  .step{
    position:relative;
    display:grid;
    grid-template-columns: 1fr;           /* single column */
    grid-template-areas:
      "image"
      "content";
    gap: 14px;
    padding: 0 16px 28px;
  }

  .step-img{
    grid-area:image;
    width: min(86vw, 480px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    display:block;
    margin: 10px auto 0;
    object-fit: cover;
  }

  .step-content{
    grid-area:content;
    margin: 2px auto 0;
    width: min(86vw, 720px);
  }
  .step-content h3{
    font-size: clamp(22px, 5.2vw, 34px);
    line-height: 1.15;
    margin: 8px 0 10px;
    color:#fff;
  }
  .step-content a{
    color:#fff; text-decoration:underline;
    display:inline-block; margin: 6px 0;
    font-size: clamp(16px, 4.3vw, 20px);
  }
  .step-content p{
    color:#fff; opacity:.9; margin: 6px 0 0;
    font-size: clamp(15px, 4vw, 18px);
  }

  /* round yellow number badge */
  .step-num{
    position:absolute;
    left:22px;                 /* sits near the image’s left edge */
    top:  calc(10px + 0px);    /* tweak if you want it a bit lower */
    width:64px; height:64px; border-radius:50%;
    display:grid; place-items:center;
    font-weight:800; font-size:26px;
    background:#ffd400; color:#111;
    box-shadow:0 8px 22px rgba(0,0,0,.25);
    z-index:2;
  }

  /* thin divider between steps (optional, like ref) */
  .step + .step{
    border-top:1px solid rgba(255,255,255,.15);
    margin-top:16px; padding-top:28px;
  }
}

/* === Make Getting Started images perfectly circular on all screens === */
.step-section .step,
.step-section .step-row {        /* safety: if you used any row wrapper */
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px;
}

/* The image itself (cover-cropped circle) */
.step-section .step-img,
.step-section .step > img,
.step-section .step-row > img {
  width: clamp(110px, 22vw, 180px) !important;  /* responsive size */
  height: clamp(110px, 22vw, 180px) !important; /* same as width */
  border-radius: 50% !important;                /* perfect circle */
  object-fit: cover !important;                 /* cover-crop */
  overflow: hidden;
  display: block;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  background: #fff;                              /* clean ring if image has transparency */
}

/* Step number badge keeps its round look and sits near the image */
.step-section .step-num {
  width: clamp(48px, 9vw, 72px);
  height: clamp(48px, 9vw, 72px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  background: #ffd23c;
  color: #000;
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
}

/* Mobile spacing */
@media (max-width: 991.98px) {
  .step-section .step,
  .step-section .step-row {
    grid-template-columns: auto 1fr;
    gap: 14px;
    margin-bottom: 28px;
  }
}

/* Desktop: give the images a bit more presence */
@media (min-width: 992px) {
  .step-section .step,
  .step-section .step-row {
    grid-template-columns: 160px 1fr;
    gap: 18px;
  }
}

/* --- numbered circle images: use the picture, hide old badge --- */
.step-num { display: none !important; }

/* circular avatar style for the new step images */
.step-photo,
.step-img {                    /* keep .step-img for safety */
  width: 200px !important;     /* desktop size */
  height: 200px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 5px solid #fff;      /* thin white ring */
  box-shadow: 0 10px 24px rgba(0,0,0,.20);
  display: block;
}

/* keep layout tidy */
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 22px;
}

/* mobile: stack and center the image, keep text left */
@media (max-width: 575.98px) {
  .step {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 16px;
  }
  .step-photo,
  .step-img {
    width: 160px !important;
    height: 160px !important;
  }
  .step-content { width: 100%; }
}

/* ===== Round "numbered" step images – show full image ===== */
.step-section .step-photo,
.step-section .step-img {             /* keep .step-img for safety */
  width: 210px !important;            /* desktop size */
  height: 210px !important;
  aspect-ratio: 1 / 1 !important;     /* hard-stop: square box */
  border-radius: 50% !important;      /* make it a circle */
  object-fit: contain !important;     /* show 100% of the image (no cropping) */
  background: #fff !important;        /* white backing for the ring */
  border: 4px solid #fff !important;  /* thin white ring */
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
  display: block !important;
  max-width: none !important;
  max-height: none !important;
}

/* Hide the old numeric badge if any is still there */
.step-num { display: none !important; }

/* Make the first column wide enough so the circle isn’t squeezed */
.step-section .step {
  display: grid;
  grid-template-columns: 210px 1fr;   /* image | text */
  align-items: center;
  gap: 22px;
}

/* Mobile: center the circle, stack above the text */
@media (max-width: 575.98px) {
  .step-section .step {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .step-section .step-photo,
  .step-section .step-img {
    width: 160px !important;
    height: 160px !important;
    margin: 0 auto;
  }
}

/* ===== FINAL PATCH: Getting Started rows (show full round image with number) ===== */

/* Desktop/tablet: image | text */
.step-section .step{
  display: grid !important;
  grid-template-columns: 230px 1fr !important;  /* circle + content */
  align-items: center !important;
  gap: 22px !important;
  position: relative;
}

/* The circle image itself */
.step-section .step > img,
.step-section .step-img {
  grid-column: 1 !important;
  width: 210px !important;
  height: 210px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  object-fit: contain !important;      /* show the entire source incl. yellow number */
  background: #fff !important;         /* clean white ring */
  border: 4px solid #fff !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.18) !important;
  display: block !important;
}

/* Text column */
.step-section .step .step-content{
  grid-column: 2 !important;
}

/* Hide any old numeric badge in markup */
.step-num{ display:none !important; }

/* Mobile: stack, center the circle above the text */
@media (max-width: 768px){
  .step-section .step{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .step-section .step > img,
  .step-section .step-img{
    margin: 0 auto !important;
    width: 180px !important;
    height: 180px !important;
  }
  .step-section .step .step-content{
    grid-column: 1 !important;
  }
}

/* === Show full numbered PNGs (no cropping) ===================== */
.step-section .step-img,
.step-section .step-photo {
  width: 240px !important;          /* desktop size */
  height: auto !important;          /* keep native aspect */
  aspect-ratio: auto !important;
  border-radius: 0 !important;      /* don't clip the corners */
  object-fit: contain !important;   /* show entire image */
  border: 0 !important;             /* remove the extra white ring */
  box-shadow: none !important;      /* no shadow masking the edge */
  background: transparent !important;
  overflow: visible !important;     /* ensure nothing gets hidden */
}

/* layout stays side-by-side on desktop */
.step-section .step {
  grid-template-columns: 240px 1fr !important;
  align-items: center !important;
  gap: 24px !important;
}

/* Mobile: image above text, still uncropped */
@media (max-width: 575.98px){
  .step-section .step { grid-template-columns: 1fr !important; }
  .step-section .step-img,
  .step-section .step-photo { width: min(78vw, 320px) !important; margin: 0 auto; }
}

/* === FINAL PATCH: remove white halo/ring on the numbered step images === */
.step-section .step-img,
.step-section .step-photo {
  /* keep circle & clean crop */
  border-radius: 50% !important;
  object-fit: cover !important;

  /* kill the halo/ring */
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;

  /* make sure it sits above the panel pattern */
  position: relative !important;
  z-index: 2 !important;
}

/* If any pseudo overlay is used for the ring, nuke it */
.step-section .step-img::before,
.step-section .step-img::after,
.step-section .step-photo::before,
.step-section .step-photo::after {
  content: none !important;
}

/* Keep layout the same; image can nudge slightly left without covering the yellow number */
@media (min-width: 992px){
  .step-section .step { grid-template-columns: 210px 1fr !important; }
  .step-section .step-img { width: 210px !important; height: 210px !important; margin-left: -12px !important; }
}
@media (max-width: 991.98px){
  .step-section .step-img { width: min(82vw, 360px) !important; height: min(82vw, 360px) !important; }
}


/* === CANONICAL RULES FOR NUMBERED STEP IMAGES (no halo, numbers visible) === */
.step-section .step{
  display:grid;
  grid-template-columns: 240px 1fr !important; /* image | text */
  align-items:center;
  gap:24px;
}

/* show the whole PNG exactly as-is (no crop, no ring, no shadow) */
.step-section .step > img,
.step-section .step-img,
.step-section .step-photo{
  width:240px !important;
  height:auto !important;
  aspect-ratio:auto !important;
  object-fit:contain !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  overflow:visible !important;
  margin-left:-10px; /* lets the yellow number peek outside the panel */
}

/* keep the old numeric badge hidden */
.step-num{ display:none !important; }

/* mobile: image on top, still uncropped */
@media (max-width: 575.98px){
  .step-section .step{
    grid-template-columns:1fr !important;
    gap:16px;
  }
  .step-section .step > img,
  .step-section .step-img,
  .step-section .step-photo{
    width:min(78vw,320px) !important;
    margin:0 auto;
  }
}

/* === GS OVERRIDES (put at very end of style.css) =================== */

/* 1) Center the heading */
.step-section h2{
  text-align:center;
  font-weight:700;
  font-size:clamp(30px,3vw,42px);
  margin:8px 0 16px;
  letter-spacing:.2px;
  text-shadow:0 1px 0 rgba(0,0,0,.15);
}

/* 2) New green + diamond pattern (matches reference) */
.step-section{
  /* base green */
  background-color:#2aa74a !important;

  /* diamond grid: two thin white lines crossing at 45° */
  background-image:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.14) 0,
      rgba(255,255,255,.14) 2px,
      transparent 2px,
      transparent 38px),
    repeating-linear-gradient(-45deg,
      rgba(255,255,255,.14) 0,
      rgba(255,255,255,.14) 2px,
      transparent 2px,
      transparent 38px)
  !important;

  border-color:#19703b !important;
}

/* 3) Make the circle images smaller (desktop), keep them circular,
      and remove any ring/halo just in case */
.step-section .step-img,
.step-section .step-photo{
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  border-radius:50% !important;
  object-fit:cover !important;
  position:relative !important;
  z-index:2;
}

/* Desktop/tablet: smaller circles + tidy columns */
@media (min-width:992px){
  .step-section .step-img,
  .step-section .step-photo{
    width:160px !important;
    height:160px !important;
  }
  .step-section .step{
    grid-template-columns:180px 1fr !important; /* image | text */
    gap:22px !important;
  }
}

/* Phones/tablets: keep proportionally smaller too */
@media (max-width:991.98px){
  .step-section .step-img,
  .step-section .step-photo{
    width:min(60vw,220px) !important;
    height:min(60vw,220px) !important;
  }
}


/* ==== GS: smaller images + tighter layout (final pass) ==== */

/* Keep the heading centered (you already have this, safe to repeat) */
.step-section h2{
  text-align:center;
  font-weight:700;
  font-size:clamp(30px,3vw,42px);
  margin:10px 0 14px;
}

/* Desktop/tablet — smaller circles + narrower image column */
@media (min-width: 992px){
  .step-section .step{
    grid-template-columns: 160px 1fr !important; /* image | text */
    gap: 18px !important;
    padding: 12px 8px !important;
  }
  .step-section .step:first-of-type{ margin-top: 6px !important; }

  /* circle size */
  .step-section .step > img,
  .step-section .step-img{
    width: 140px !important;
    height: 140px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  /* text scale/spacing */
  .step-section .step-content h3{ font-size:20px !important; margin: 0 0 6px !important; }
  .step-section .step-content a{ font-size:15px !important; line-height:1.35 !important; }
  .step-section .step-content p{ font-size:15px !important; line-height:1.5 !important; }
}

/* Phones/tablets — proportionally smaller circles, tighter gap */
@media (max-width: 991.98px){
  .step-section .step{
    gap: 12px !important;
  }
  .step-section .step > img,
  .step-section .step-img{
    width: min(58vw, 180px) !important;
    height: min(58vw, 180px) !important;
  }
}

/* === Narrower "Getting Started" panel on desktop, centered === */
@media (min-width: 992px){
  .step-section{
    /* center within the right track */
    margin-left: auto !important;
    margin-right: auto !important;

    /* reduce width – tweak 680–780px to taste */
    max-width: 740px !important;

    /* override earlier desktop min-width so it can shrink */
    min-width: 0 !important;
  }
}