/* =========================================================
   सूर्यपुरा ग्राम विकास पोर्टल — Design System
   Palette:
     --sun-saffron   #E8871E  (primary / CTA)
     --sun-gold      #F4B942  (rays / highlight)
     --earth-maroon  #7A2E1D  (deep accent, headings on light bg)
     --panchayat-navy#16233F  (header/footer, "digital" trust color)
     --field-green   #2F6B4F  (agriculture / growth)
     --wheat-cream   #FBF3E4  (page background)
     --paper         #FFFDF8  (card background)
   Type:
     Display  -> 'Baloo 2'   (rounded, warm, Devanagari-friendly)
     Body     -> 'Hind'      (clean Devanagari + Latin body face)
     Utility  -> 'Poppins'   (stats, labels, captions)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Hind:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');

:root{
  --sun-saffron:#E8871E;
  --sun-gold:#F4B942;
  --earth-maroon:#7A2E1D;
  --panchayat-navy:#16233F;
  --panchayat-navy-2:#1E2F52;
  --field-green:#055e35;
  --wheat-cream:#FBF3E4;
  --paper:#FFFDF8;
  --ink:#2B2118;
  --ink-soft:#5B4A3B;
  --line:#E8DAC4;
}

*{box-sizing:border-box;}

body{
  background:var(--wheat-cream);
  color:var(--ink);
  font-family:'Hind',sans-serif;
  font-size:1.05rem;
  line-height:1.7;
  overflow-x:hidden;
}

h1,h2,h3,h4,.font-display{
  font-family:'Baloo 2',sans-serif;
  color:var(--earth-maroon);
  font-weight:700;
}

.font-utility{ font-family:'Poppins',sans-serif; }

a{ text-decoration:none; }

::selection{ background:var(--sun-gold); color:var(--panchayat-navy); }

/* ---------- Texture ---------- */
.grain-bg{
  background-image:
    radial-gradient(circle at 1px 1px, rgba(122,46,29,0.06) 1px, transparent 0);
  background-size:22px 22px;
}

/* ---------- Navbar ---------- */
.sp-navbar{
  background:var(--paper);
  padding:.85rem 0;
  border-bottom:3px solid var(--sun-saffron);
}
.sp-navbar .brand-mark{
  width:42px; height:42px;
  display:inline-flex; align-items:center; justify-content:center;
}
.sp-navbar .brand-text{
  font-family:'Baloo 2',sans-serif;
  color:var(--field-green);
  font-size:1.35rem;
  font-weight:700;
  letter-spacing:.3px;
}
.sp-navbar .brand-text small{
  display:block;
  font-family:'Poppins',sans-serif;
  font-size:.62rem;
  letter-spacing:2.5px;
  color:var(--sun-gold);
  font-weight:600;
  text-transform:uppercase;
}
.sp-navbar .nav-link{
  color:var(--field-green)!important;
  font-weight:500;
  padding:.5rem 1rem !important;
  transition:color .2s ease;
}
.sp-navbar .nav-link:hover{ color:var(--sun-gold) !important; }
.sp-navbar .btn-id{
  background:var(--sun-saffron);
  color:#fff;
  border-radius:30px;
  padding:.5rem 1.3rem;
  font-weight:600;
  font-size:.92rem;
  border:none;
}
.sp-navbar .btn-id:hover{ background:var(--sun-gold); color:var(--panchayat-navy); }

/* ---------- Hero ---------- */
.sp-hero{
  position:relative;
  /* background:linear-gradient(180deg,var(--panchayat-navy) 0%, var(--panchayat-navy-2) 62%, var(--wheat-cream) 62%); */
  background-image: url('../assets/hero.png');
  padding:4.5rem 0 2rem;
  overflow:hidden;
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
}
@media(max-width:768px){
    .sp-hero{
        background-image:url('../assets/mobile_2.jpg');
        background-position:center top;
        background-size: cover;
    }
    .v-hidden {
      visibility: hidden;
    }
    .pd-mb {
      padding-top: 100px;
    }
}
.sp-hero .rays{
  position:absolute;
  top:-40%;
  right:-10%;
  width:900px;
  height:900px;
  opacity:.16;
  pointer-events:none;
}
.eyebrow-pill{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background: var(--sun-saffron);
  border:1px solid rgba(244,185,66,.5);
  color:var(--paper);
  font-family:'Poppins',sans-serif;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:1.5px;
  text-transform:uppercase;
  padding:.4rem 1rem;
  border-radius:30px;
  margin-bottom:1.4rem;
}
.sp-hero h1{
  color: var(--field-green);
  font-size:3.1rem;
  line-height:1.18;
  margin-bottom:1.1rem;
}
.sp-hero h1 span{ color:var(--sun-saffron); }
.sp-hero p.lead-text{
  color:var(--ink);
  font-size:1.12rem;
  max-width:520px;
  margin-bottom:2rem;
}
.btn-saffron{
  background:var(--sun-saffron);
  border:none;
  color:#fff;
  font-weight:600;
  padding:.85rem 1.9rem;
  border-radius:8px;
  font-size:1rem;
  transition:transform .15s ease, background .2s ease;
}
.btn-saffron:hover{ background:#d9770f; color:#fff; transform:translateY(-2px); }
.btn-outline-cream{
  border:1.5px solid rgba(255,255,255,.5);
  color:#fff;
  font-weight:600;
  padding:.85rem 1.9rem;
  border-radius:8px;
  background:transparent;
}
.btn-outline-cream:hover{ border-color:var(--sun-gold); color:var(--sun-gold); }

/* ---------- Digital ID Card (signature element) ---------- */
.id-card{
  position:relative;
  background:linear-gradient(155deg,#1c2c4d 0%, #16233F 55%, #0f1830 100%);
  border-radius:20px;
  padding:1.6rem 1.6rem 1.4rem;
  box-shadow:0 30px 60px -18px rgba(0,0,0,.55), 0 0 0 1px rgba(244,185,66,.25);
  max-width:360px;
  color:#fff;
  transform:rotate(2.5deg);
}
.id-card::before{
  content:"";
  position:absolute;
  inset:8px;
  border:1px dashed rgba(244,185,66,.35);
  border-radius:14px;
  pointer-events:none;
}
.id-card .id-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.15);
  padding-bottom:.7rem;
  margin-bottom:1rem;
}
.id-card .id-top .id-label{
  font-family:'Poppins',sans-serif;
  font-size:.65rem;
  letter-spacing:1.5px;
  color:var(--sun-gold);
  text-transform:uppercase;
}
.id-card .id-top .id-title{
  font-family:'Baloo 2',sans-serif;
  font-size:1.05rem;
  color:#fff;
  font-weight:700;
}
.id-avatar{
  width:64px;height:64px;border-radius:14px;
  background:linear-gradient(135deg,var(--sun-saffron),var(--sun-gold));
  display:flex;align-items:center;justify-content:center;
  font-family:'Baloo 2',sans-serif;
  font-size:1.5rem; font-weight:700; color:#16233F;
  flex-shrink:0;
}
.id-card .id-name{ font-family:'Baloo 2',sans-serif; font-size:1.15rem; margin-bottom:.15rem;}
.id-card .id-role{ font-family:'Poppins',sans-serif; font-size:.78rem; color:var(--sun-gold);}
.id-card .id-meta{ font-family:'Poppins',sans-serif; font-size:.72rem; color:rgba(255,255,255,.65); margin-top:.9rem; line-height:1.9;}
.id-card .id-meta b{ color:#fff; font-weight:600; }
.qr-box{
  width:54px;height:54px; border-radius:8px;
  background:
    repeating-linear-gradient(90deg,#fff 0 4px, transparent 4px 8px),
    repeating-linear-gradient(0deg,#fff 0 4px, transparent 4px 8px);
  background-color:#0f1830;
  opacity:.9;
}
.id-verified{
  position:absolute; top:-12px; right:22px;
  background:var(--field-green);
  color:#fff;
  font-family:'Poppins',sans-serif;
  font-size:.65rem; font-weight:600; letter-spacing:.5px;
  padding:.3rem .7rem; border-radius:20px;
  box-shadow:0 6px 14px rgba(0,0,0,.25);
}

/* ---------- Stats ---------- */
.stats-strip{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:16px;
  margin-top:-1px;
  padding:1.8rem 1rem;
  box-shadow:0 20px 40px -24px rgba(122,46,29,.35);
}
.stat-num{
  font-family:'Poppins',sans-serif;
  font-weight:700;
  font-size:2.1rem;
  color:var(--earth-maroon);
}
.stat-label{
  font-family:'Poppins',sans-serif;
  font-size:.8rem;
  color:var(--ink-soft);
  letter-spacing:.3px;
}

/* ---------- Section headings ---------- */
.section-pad{ padding:5rem 0; }
.eyebrow{
  font-family:'Poppins',sans-serif;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--field-green);
  margin-bottom:.6rem;
  display:block;
}
.section-title{ font-size:2.1rem; margin-bottom:.8rem; }
.section-sub{ color:var(--ink-soft); max-width:640px; }

/* ---------- Pillars ---------- */
.pillar-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  height:100%;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pillar-card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 40px -22px rgba(122,46,29,.4);
  border-color:var(--sun-saffron);
}
.pillar-illustration{
  width:100%;
  height:160px;
  display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid var(--line);
}
.pillar-illustration img {
  height: 170px;
  width: 100%;
}
.pillar-body{ padding:1.5rem 1.4rem 1.8rem; }
.pillar-icon{
  width:44px;height:44px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--sun-saffron),var(--sun-gold));
  display:flex;align-items:center;justify-content:center;
  margin-bottom:1rem;
}
.pillar-card h3{ font-size:1.25rem; margin-bottom:.5rem; }
.pillar-card p{ color:var(--ink-soft); font-size:.95rem; margin-bottom:0; }

/* ---------- Illustration frame backgrounds ---------- */
.illus-cream{ background:linear-gradient(180deg,#FDF6E9,#F7EAD1); }
.illus-sky{ background:linear-gradient(180deg,#EAF3EE,#DCEBE1); }
.illus-dusk{ background:linear-gradient(180deg,#2A3B60,#16233F); }
.illus-dawn{ background:linear-gradient(180deg,#FBEAD6,#F6D9B0); }

/* ---------- Hero character portrait ---------- */
.hero-portrait-frame{
  width:100%;
  max-width:340px;
  aspect-ratio:1/1;
  border-radius:24px;
  background:linear-gradient(155deg,#22345a,#16233F);
  display:flex; align-items:center; justify-content:center;
  position:relative;
  box-shadow:0 30px 60px -18px rgba(0,0,0,.55);
  overflow:hidden;
}
.hero-portrait-frame svg{ width:78%; height:78%; }

/* ---------- Leader Spotlight ---------- */
.leader-section{
  background:var(--field-green);
  border-radius:24px;
  padding:3.5rem 3rem;
  position:relative;
  overflow:hidden;
  color:#fff;
}
.leader-section .rays-small{ position:absolute; left:-120px; bottom:-160px; width:420px; opacity:.12; }
.leader-photo-ring{
  width:180px;height:180px;border-radius:50%;
  background:linear-gradient(135deg,var(--sun-saffron),var(--sun-gold));
  display:flex;align-items:center;justify-content:center;
  padding:6px;
  margin:0 auto;
}
.leader-photo-ring .inner{
  width:100%;height:100%;border-radius:50%;
  background:#f8f9fa;
  display:flex;align-items:center;justify-content:center;
  font-family:'Baloo 2',sans-serif;
  font-size:3rem; font-weight:700; color:var(--sun-gold);
}
.leader-quote{
  font-family:'Baloo 2',sans-serif;
  font-size:1.45rem;
  line-height:1.6;
  color:#fff;
}
.leader-name{ color:var(--sun-gold); font-weight:700; font-family:'Poppins',sans-serif; }
.leader-role{ color:rgba(255,255,255,.65); font-family:'Poppins',sans-serif; font-size:.85rem; }

/* ---------- Timeline (real chronological development phases) ---------- */
.timeline{ position:relative; padding-left:2.4rem; }
.timeline::before{
  content:"";
  position:absolute; left:11px; top:6px; bottom:6px;
  width:2px;
  background:linear-gradient(180deg,var(--sun-saffron),var(--field-green));
}
.timeline-item{ position:relative; padding-bottom:2.4rem; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-dot{
  position:absolute; left:-2.4rem; top:2px;
  width:24px;height:24px;border-radius:50%;
  background:var(--paper);
  border:3px solid var(--sun-saffron);
}
.timeline-item h4{ font-size:1.1rem; margin-bottom:.3rem; }
.timeline-item .timeline-year{
  font-family:'Poppins',sans-serif; font-size:.75rem; font-weight:600;
  color:var(--field-green); letter-spacing:1px; text-transform:uppercase;
}
.timeline-item p{ color:var(--ink-soft); margin-bottom:0; font-size:.95rem; }

/* ---------- Digital Identity band ---------- */
.identity-band{
  background:linear-gradient(120deg,var(--field-green),#245640);
  border-radius:24px;
  padding:3rem;
  color:#fff;
}
.identity-band h2{ color:#fff; }
.identity-band .badge-chip{
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.3);
  border-radius:30px;
  padding:.35rem .9rem;
  font-family:'Poppins',sans-serif;
  font-size:.75rem;
  display:inline-block;
  margin:.2rem .3rem .2rem 0;
}

/* ---------- Footer ---------- */
.sp-footer{
  background:var(--field-green);
  color:rgba(255,255,255,.7);
  padding:3.5rem 0 1.5rem;
  margin-top:5rem;
}
.sp-footer h5{ color:#fff; font-family:'Baloo 2',sans-serif; }
.sp-footer a{ color:rgba(255,255,255,.65); }
.sp-footer a:hover{ color:var(--sun-gold); }
.footer-line{ border-top:1px solid rgba(255,255,255,.12); margin-top:2.5rem; padding-top:1.3rem; font-family:'Poppins',sans-serif; font-size:.8rem;}
.social-dot{
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.08);
  display:inline-flex;align-items:center;justify-content:center;
  margin-right:.5rem;
  border:1px solid rgba(255,255,255,.15);
  transition:background .2s ease;
}
.social-dot:hover{ background:var(--sun-saffron); }

/* ---------- Responsive ---------- */
@media (max-width: 991px){
  .sp-hero h1{ font-size:2.3rem; }
  .id-card{ transform:none; margin-top:2.5rem; }
  .leader-section{ padding:2.5rem 1.5rem; text-align:center; }
  .identity-band{ padding:2rem 1.4rem; }
}
@media (max-width: 575px){
  .sp-hero{ padding:3rem 0 1.5rem; }
  .sp-hero h1{ font-size:1.85rem; }
  .section-title{ font-size:1.6rem; }
  .stats-strip .col-6{ margin-bottom:1rem; }
}