.elementor-7162 .elementor-element.elementor-element-5bec85c{--display:flex;}/* Start custom CSS */@import url('https://fonts.googleapis.com/css2?family=Tiro+Devanagari+Hindi:ital@0;1&family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+Devanagari:wght@400;500;600;700&display=swap');

    :root {
      --river-blue:   #1565C0;
      --sky:          #42A5F5;
      --deep-water:   #0D3B82;
      --teal:         #00796B;
      --teal-light:   #E0F2F1;
      --sand:         #F5F0E8;
      --gold:         #F9A825;
      --ink:          #0E1B2E;
      --muted:        #546E7A;
      --border:       #CFD8DC;
      --white:        #FFFFFF;
      --saffron:      #E65100;
      --saffron-lt:   #FFF3E0;
      --red:          #C62828;
      --red-lt:       #FFEBEE;
      --green:        #2E7D32;
      --green-lt:     #E8F5E9;
      --purple:       #6A1B9A;
      --purple-lt:    #F3E5F5;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'DM Sans', 'Noto Sans Devanagari', sans-serif;
      background: #F4F7FB;
      color: var(--ink);
      line-height: 1.8;
      font-size: 16px;
    }

  
    /* ── LAYOUT ── */
    .page-wrap {
      max-width: 860px;
      margin: 0 auto;
      padding: 0 20px;
    }

    /* ── ARTICLE ── */
    article { padding: 44px 0 64px; }
    article p { margin-bottom: 18px; color: #1A2A3A; }

    /* ── HEADINGS ── */
    article h2 {
      font-family: 'Tiro Devanagari Hindi', serif;
      font-size: 23px;
      font-weight: 400;
      color: var(--deep-water);
      margin: 44px 0 14px;
      padding-bottom: 10px;
      border-bottom: 2px solid var(--sky);
      display: flex;
      align-items: center;
      gap: 10px;
    }
    article h2 .h-icon { font-size: 22px; }
    article h3 {
      font-family: 'Noto Sans Devanagari', sans-serif;
      font-size: 17px;
      font-weight: 700;
      color: var(--teal);
      margin: 30px 0 10px;
    }

    /* ── INTRO ANSWER BOX ── */
    .answer-box {
      background: linear-gradient(135deg, #E3F2FD 0%, #fff 100%);
      border: 1px solid #90CAF9;
      border-left: 5px solid var(--river-blue);
      border-radius: 0 12px 12px 0;
      padding: 20px 24px;
      margin: 24px 0;
    }
    .answer-box .ab-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.4px;
      text-transform: uppercase;
      color: var(--river-blue);
      margin-bottom: 8px;
    }
    .answer-box p { margin: 0; font-size: 15.5px; }

    /* ── RIVER CARDS ── */
    .river-grid { display: grid; gap: 16px; margin: 20px 0; }
    .river-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 20px 22px;
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 16px;
      align-items: start;
      box-shadow: 0 2px 8px rgba(21,101,192,0.05);
      transition: box-shadow 0.2s, transform 0.2s;
    }
    .river-card:hover { box-shadow: 0 6px 20px rgba(21,101,192,0.12); transform: translateY(-2px); }
    .river-icon {
      width: 52px; height: 52px;
      border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      font-size: 26px;
      flex-shrink: 0;
    }
    .ic-blue   { background: #E3F2FD; }
    .ic-teal   { background: var(--teal-light); }
    .ic-saffron{ background: var(--saffron-lt); }
    .ic-green  { background: var(--green-lt); }
    .ic-purple { background: var(--purple-lt); }
    .river-card h3 { margin: 0 0 6px; font-size: 16.5px; color: var(--ink); }
    .river-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
    .tag {
      font-size: 11.5px;
      font-weight: 600;
      padding: 3px 10px;
      border-radius: 12px;
    }
    .tag-blue   { background: #E3F2FD; color: var(--river-blue); }
    .tag-teal   { background: var(--teal-light); color: var(--teal); }
    .tag-orange { background: var(--saffron-lt); color: var(--saffron); }
    .tag-green  { background: var(--green-lt); color: var(--green); }
    .river-desc { font-size: 14px; color: var(--muted); margin: 0; line-height: 1.6; }

    /* ── DATA TABLE ── */
    .table-wrap {
      overflow-x: auto;
      margin: 24px 0;
      border-radius: 12px;
      border: 1px solid var(--border);
      box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    }
    table { width: 100%; border-collapse: collapse; font-size: 14px; }
    thead { background: linear-gradient(135deg, var(--river-blue), var(--deep-water)); color: #fff; }
    th { padding: 13px 16px; text-align: left; font-weight: 600; white-space: nowrap; }
    td { padding: 11px 16px; border-bottom: 1px solid #EEF2F7; vertical-align: top; }
    tbody tr:nth-child(even) { background: #F7FAFF; }
    tbody tr:last-child td { border-bottom: none; }
    tbody tr:hover { background: #EEF6FF; }

    /* ── IMG PLACEHOLDER ── */
    .img-ph {
      background: linear-gradient(135deg, #EEF2FF 0%, #E8F4FD 100%);
      border: 2px dashed #90CAF9;
      border-radius: 14px;
      padding: 36px 24px;
      text-align: center;
      margin: 28px 0;
      color: var(--river-blue);
    }
    .img-ph .ph-icon { font-size: 40px; margin-bottom: 10px; }
    .img-ph p { margin: 0; font-size: 14px; color: #4A7BB5; }

    /* ── PRO TIP ── */
    blockquote.pro-tip {
      background: var(--green-lt);
      border: 1px solid #A5D6A7;
      border-left: 5px solid var(--green);
      border-radius: 0 12px 12px 0;
      padding: 20px 26px;
      margin: 30px 0;
    }
    .tip-head {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 700;
      color: var(--green);
      font-size: 12.5px;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 10px;
    }
    blockquote.pro-tip p { margin: 0; font-size: 14.5px; color: #1B4D1E; line-height: 1.75; }

    /* ── HIGHLIGHT BOX ── */
    .hl-box {
      background: var(--saffron-lt);
      border-left: 4px solid var(--saffron);
      border-radius: 0 10px 10px 0;
      padding: 16px 22px;
      margin: 22px 0;
    }
    .hl-box strong { color: var(--saffron); }

    /* ── LISTS ── */
    article ul, article ol { padding-left: 22px; margin-bottom: 18px; }
    article li { margin-bottom: 9px; line-height: 1.7; }

    /* ── BADGE STRIP ── */
    .badge-strip { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 8px; }
    .badge {
      font-size: 12px; font-weight: 600;
      padding: 5px 14px; border-radius: 20px;
    }
    .b-blue   { background: #E3F2FD; color: var(--river-blue); }
    .b-teal   { background: var(--teal-light); color: var(--teal); }
    .b-orange { background: var(--saffron-lt); color: var(--saffron); }
    .b-green  { background: var(--green-lt); color: var(--green); }

    /* ── TWO-COL COMPARE ── */
    .compare-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin: 20px 0;
    }
    @media (max-width: 540px) { .compare-grid { grid-template-columns: 1fr; } }
    .compare-card {
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
    }
    .compare-head {
      padding: 12px 16px;
      font-weight: 700;
      font-size: 14px;
      color: #fff;
    }
    .ch-blue   { background: var(--river-blue); }
    .ch-teal   { background: var(--teal); }
    .compare-body { padding: 14px 16px; background: var(--white); }
    .compare-body li { font-size: 13.5px; margin-bottom: 6px; }

    /* ── FAQ ── */
    .faq-wrap { margin-top: 10px; }
    details {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 12px;
      margin-bottom: 12px;
      overflow: hidden;
      transition: box-shadow 0.2s;
    }
    details[open] {
      border-color: var(--river-blue);
      box-shadow: 0 4px 18px rgba(21,101,192,0.10);
    }
    summary {
      font-weight: 600;
      font-size: 15px;
      padding: 17px 20px;
      cursor: pointer;
      list-style: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: var(--ink);
      gap: 12px;
    }
    summary::-webkit-details-marker { display: none; }
    summary::after {
      content: '+';
      font-size: 22px;
      color: var(--river-blue);
      font-weight: 300;
      flex-shrink: 0;
      transition: transform 0.3s;
    }
    details[open] summary::after { transform: rotate(45deg); }
    .faq-body {
      padding: 2px 20px 20px;
      font-size: 14.5px;
      line-height: 1.78;
      color: #1A2A3A;
    }
    .faq-body ul { margin-top: 8px; }

    /* ── RELATED ── */
    .related-section {
      margin-top: 52px;
      padding-top: 32px;
      border-top: 2px solid var(--border);
    }
    .related-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
      gap: 12px;
      margin-top: 18px;
    }
    .rel-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 16px 18px;
      text-decoration: none;
      color: var(--ink);
      font-size: 14px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 12px;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .rel-card:hover { border-color: var(--river-blue); box-shadow: 0 4px 14px rgba(21,101,192,0.1); }
    .rel-card .ri { font-size: 22px; flex-shrink: 0; }

    /* ── CTA ── */
    .cta-block {
      background: linear-gradient(135deg, #0D3B82 0%, #1565C0 50%, #0077B6 100%);
      color: var(--white);
      border-radius: 16px;
      padding: 36px 28px;
      text-align: center;
      margin-top: 52px;
    }
    .cta-block h3 { font-size: 21px; margin-bottom: 10px; font-weight: 700; }
    .cta-block p  { font-size: 14px; opacity: 0.85; margin-bottom: 22px; max-width: 500px; margin-left: auto; margin-right: auto; }
    .cta-btn {
      display: inline-block;
      background: var(--gold);
      color: var(--ink);
      font-weight: 700;
      padding: 13px 30px;
      border-radius: 30px;
      text-decoration: none;
      font-size: 15px;
      box-shadow: 0 4px 14px rgba(0,0,0,0.2);
    }

    @media (max-width: 600px) {
      .hero { padding: 44px 20px 48px; }
      article h2 { font-size: 20px; }
      .stat-pill { font-size: 12px; padding: 7px 14px; }
    }/* End custom CSS */