:root {
  --blue:#155eef;
  --blue-dark:#1248bd;
  --navy:#12233f;
  --muted:#68778d;
  --border:#dce5f1;
  --bg:#f4f7fc;
}
* {box-sizing:border-box}
img,div,button{
  -webkit-tap-highlight-color: transparent;
}
body {
  margin:0;background:var(--bg);color:var(--navy);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  line-height:1.55;
}
button,input {font:inherit}
button {cursor:pointer}
.topbar {background:#fff;border-bottom:1px solid var(--border);padding:16px 20px}
.nav {
  max-width:1060px;margin:auto;display:flex;align-items:center;
  justify-content:space-between;gap:12px
}
.logo {font-size:24px;font-weight:850;letter-spacing:-1px}
.logo span {color:var(--blue)}
.logo-link {text-decoration: none;color: inherit;}
.logo-link:hover,
.logo-link:focus,
.logo-link:active,
.logo-link:visited {text-decoration: none;color: inherit;}
.logo-link .logo {color: inherit;}
.nav-note {font-size:13px;color:var(--muted)}
.wrapper {max-width:850px;margin:35px auto;padding:0 16px 40px}
.hero {text-align:center;margin-bottom:26px}
.eyebrow {
  display:inline-block;color:var(--blue);background:#e9f0ff;
  border-radius:30px;padding:6px 12px;font-size:12px;
  font-weight:800;text-transform:uppercase
}
h1 {font-size:clamp(28px,5vw,39px);line-height:1.2;margin:14px 0 10px}
.hero p {color:var(--muted);max-width:590px;margin:auto;font-size:15px}
.card {
  background:white;border:1px solid var(--border);border-radius:18px;
  box-shadow:0 10px 35px rgba(25,50,90,.06);overflow:hidden
}
.progress-wrap {padding:22px 26px 0}
.progress-text {
  display:flex;justify-content:space-between;gap:10px;
  font-size:12px;color:var(--muted);margin-bottom:10px
}
.progress-track {height:6px;border-radius:20px;background:#e9eef7;overflow:hidden}
.progress-bar {height:100%;width:25%;background:var(--blue);transition:width .2s}
.step {display:none;padding:26px}
.step.active {display:block}
.step-kicker {font-size:12px;font-weight:800;color:var(--blue);text-transform:uppercase}
h2 {margin:5px 0 7px;font-size:24px}
.subtitle {color:var(--muted);font-size:14px;margin:0 0 22px}
h3 {font-size:16px;margin:22px 0 12px}
.grid,.purpose-grid {
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px
}
.option,.purpose-option {
  position:relative;text-align:left;border:1px solid var(--border);
  border-radius:12px;background:white;padding:15px;min-height:60px;color:var(--navy)
}
.option:hover,.purpose-option:hover {border-color:#9ab8fb;background:#f9fbff}
.option.selected,.purpose-option.selected {
  border:2px solid var(--blue);padding:14px;background:#f1f6ff
}
.option.selected::after,.purpose-option.selected::after {
  content:"✓";position:absolute;right:11px;top:9px;color:var(--blue);font-weight:900
}
.option-title {display:block;font-size:15px;font-weight:750;padding-right:18px}
.option-desc {display:block;color:var(--muted);font-size:12px;margin-top:3px}
.country-flag {margin-right:5px;font-size:20px}
.field-label {display:block;font-size:13px;font-weight:750;margin:18px 0 8px}
input[type="number"] {
  width:100%;border:1px solid var(--border);background:white;
  border-radius:10px;padding:12px;color:var(--navy)
}
input:focus {outline:2px solid #b7ccff}
.amount-box,.rate-slider-card {
  background:#f8faff;border:1px solid var(--border);border-radius:14px;padding:20px
}
.amount-number {font-size:28px;font-weight:850;color:var(--blue)}
.range {width:100%;accent-color:var(--blue)}
.range-labels,.slider-labels,.rate-scale {
  display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:12px
}
.rate-display {display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.rate-caption {display:block;font-size:13px;color:var(--muted)}
.rate-number {font-size:34px;font-weight:850;color:var(--blue)}
.rate-badge {background:#e7efff;color:var(--blue);padding:7px 12px;border-radius:8px;font-weight:800}
#interestSlider {width:100%;accent-color:var(--blue)}
.rate-scale {margin-top:15px;border-top:1px solid var(--border);padding-top:12px}
.hint {font-size:12px;color:var(--muted)}
.btn-row {display:flex;justify-content:space-between;gap:12px;margin-top:27px}
.btn {border:0;border-radius:10px;padding:13px 19px;font-weight:800;font-size:14px}
.btn-primary {color:white;background:var(--blue);flex:1}
.btn-primary:hover {background:var(--blue-dark)}
.btn-secondary {color:var(--navy);background:#edf1f7}
.result-hero {
  padding:25px;background:linear-gradient(135deg,#155eef,#103c9d);
  color:white;border-radius:14px
}
.result-hero .small {font-size:13px;opacity:.85}
.emi {font-size:clamp(34px,7vw,46px);font-weight:900;overflow-wrap:anywhere}
.result-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:15px}
.result-item {padding:16px;border:1px solid var(--border);border-radius:12px}
.result-item .label {font-size:12px;color:var(--muted)}
.result-item .value {font-size:20px;font-weight:850;overflow-wrap:anywhere}
.result-summary {margin-top:18px;padding:17px;background:#f8faff;border-radius:12px}
.summary-row {
  display:flex;justify-content:space-between;gap:15px;padding:8px 0;
  font-size:13px;border-bottom:1px solid #e7edf5
}
.summary-row:last-child {border-bottom:0}
.summary-row span:first-child {color:var(--muted)}
.disclaimer {margin:18px 0 0;color:var(--muted);font-size:11px;line-height:1.6}
.error {
  display:none;color:#b42318;background:#fff1f0;border-radius:8px;
  padding:10px 12px;font-size:13px;margin-top:12px
}
.error.show {display:block}

.post-section {margin-top:30px}
.post-heading {margin:0 0 6px;font-size:24px}
.post-intro {margin:0 0 18px;color:var(--muted);font-size:14px}
.post-meta {display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.post-count {font-size:12px;color:var(--muted);background:#e9f0ff;padding:6px 10px;border-radius:20px;font-weight:750;white-space:nowrap}
.post-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.post-card {display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:18px;background:#fff;color:inherit;border:1px solid var(--border);border-radius:14px;text-decoration:none;box-shadow:0 5px 20px rgba(25,50,90,.035);transition:transform .15s,border-color .15s,box-shadow .15s}
.post-card:hover {border-color:#9ab8fb;box-shadow:0 9px 25px rgba(25,50,90,.09);transform:translateY(-2px)}
.post-card:focus-visible {outline:3px solid #9ab8fb;outline-offset:2px}
.post-card h3 {font-size:16px;line-height:1.4;margin:0 0 8px}
.post-card p {font-size:13px;color:var(--muted);margin:0}
.post-read-more {display:inline-block;margin-top:13px;color:var(--blue);font-size:13px;font-weight:800}
.article-content {margin-top:26px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:26px;box-shadow:0 5px 20px rgba(25,50,90,.035);overflow-wrap:anywhere}
.article-content h1,.article-content h2,.article-content h3,.article-content h4 {color:var(--navy);line-height:1.35}
.article-content p,.article-content li {color:#344054;line-height:1.8}
.article-content img,.article-content video {max-width:100%;height:auto}
.article-content table {display:block;max-width:100%;overflow-x:auto;border-collapse:collapse}
.article-content th,.article-content td {padding:8px;border:1px solid var(--border)}
.article-content a {color:var(--blue)}

table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }
    th, td {
      border: 1px solid #ccc;
      padding: 12px;
      text-align: left;
      vertical-align: top;
    }
    th {
      background-color: #f2f2f2;
    }
     .table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-responsive table {
  width: 100%;
  min-width: 600px; 
  border-collapse: collapse;
}

.table-responsive th, .table-responsive td {
  border: 1px solid #ccc;
  padding: 12px;
  text-align: left;
  vertical-align: top;
}

.table-responsive th {
  background-color: #f2f2f2;
}

@media (max-width: 600px) {
  .table-responsive table {
    font-size: 0.9rem;
  }
}

.footer {text-align: center;padding: 25px 10px;margin-top: 25px;font-size: 14px;color: #555;width: 100%;box-sizing: border-box;}
.footer-container {width: 100%;max-width: 1200px;margin: 0 auto;padding: 15px 10px;box-sizing: border-box;}
.footer-note {margin: 0 0 22px;line-height: 1.8;}
.footer-links {display: flex;flex-wrap: wrap;justify-content: center;align-items: center;gap: 10px 12px;margin: 0 auto 22px;}
.footer-links a {color: #2563eb;text-decoration: none;margin: 0;padding: 6px 8px;font-size: 13px;display: inline-block;line-height: 1.6;}
.footer-links a:hover {text-decoration: underline;}
.footer-copyright {margin: 0;padding-top: 18px;border-top: 1px solid #eee;color: #777;font-size: 13px;line-height: 1.8;}

@media (max-width: 600px) {.footer {padding: 20px 10px;}
.footer-links {gap: 8px 12px;}
.footer-links a {font-size: 12px;}}

.ads-row{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin:20px 0;}
.ads-row > div{flex:0 0 auto;}

.sticky-ad-wrapper {position: fixed;bottom: 0;left: 0;width: 100%;border-top: 1px solid rgba(255,255,255,0.08);display: flex;justify-content: center;align-items: center;padding: 6px 0;z-index: 9999;}
body {padding-bottom: 80px;}

@media(max-width:600px) {.wrapper {margin:22px auto;padding:0 12px 28px}.progress-wrap {padding:18px 17px 0}.step {padding:19px 17px}.grid,.purpose-grid,.post-grid {grid-template-columns:1fr}.amount-box,.rate-slider-card {padding:16px}.rate-number {font-size:30px}.btn {padding:12px 14px}.nav-note {font-size:11px}.article-content {padding:18px}}


/* Popup Styling */
  /*.popup {*/
  /*  display: none;*/
  /*  position: fixed;*/
  /*  top: 50%;*/
  /*  left: 50%;*/
  /*  transform: translate(-50%, -50%);*/
  /*  width: 90%;*/
  /*  max-width: 400px;*/
  /*  background-color: #fff;*/
  /*  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);*/
  /*  padding: 20px;*/
  /*  text-align: center;*/
  /*  border-radius: 8px;*/
  /*  z-index: 1000;*/
  /*}*/

  /*.overlay {*/
  /*  display: none;*/
  /*  position: fixed;*/
  /*  top: 0;*/
  /*  left: 0;*/
  /*  width: 100%;*/
  /*  height: 100%;*/
  /*  background-color: rgba(0, 0, 0, 0.5);*/
  /*  z-index: 999;*/
  /*}*/
  /*.modal {*/
  /*  display: none;*/
  /*  position: fixed;*/
  /*  z-index: 1;*/
  /*  padding-top: 300px;*/
  /*  left: 0;*/
  /*  top: 0;*/
  /*  width: 100%;*/
  /*  height: 100%;*/
  /*  background-color: rgba(0, 0, 0, 0.4);*/
  /*}*/

  /*.modal[data-type] {*/
  /*  display: block;*/
  /*}*/

  /*.modalDialog {*/
  /*  margin: auto;*/
  /*  padding: 25px;*/
  /*  background-color: white;*/
  /*  text-align: center;*/
  /*  position: fixed;*/
  /*  top: 50%;*/
  /*  left: 50%;*/
  /*  transform: translate(-50%, -50%);*/
  /*}*/

  /*.grantButtons,*/
  /*.rewardButtons {*/
  /*  display: none;*/
  /*}*/

  /*.modal[data-type="grant"] .grantButtons,*/
  /*.modal[data-type="reward"] .rewardButtons {*/
  /*  display: block;*/
  /*}*/

  /*.modal input[type="button"] {*/
  /*  padding: 0.5rem;*/
  /*  background: blue;*/
  /*  border: none;*/
  /*  border-radius: 4px;*/
  /*  margin: 4px;*/
  /*  color: white;*/
  /*}*/