/* =========================================================
   Sushil Roy Computer Seba — Design System
   Signature: the "Seva Ribbon" — a thin tricolour (saffron/
   white/green) strip that opens every page, tops every card
   on hover, and threads through section dividers — a nod to
   the vernacular of Indian government digital portals
   (India.gov.in, DigiLocker, UMANG) rendered with restraint.
   ========================================================= */

:root{
  --navy:        #0A2540;
  --navy-2:      #0F3155;
  --blue:        #0D6EFD;
  --blue-dark:   #0B57C4;
  --orange:      #FF6B00;
  --orange-dark: #E05F00;
  --green:       #128807;
  --saffron:     #FF9933;
  --gray-050:    #F6F8FB;
  --gray-100:    #EEF2F7;
  --gray-200:    #E3E9F0;
  --ink:         #16202B;
  --ink-soft:    #4A5768;
  --white:       #FFFFFF;

  --font-display: 'Poppins', sans-serif;
  --font-body:    'Inter', sans-serif;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;

  --shadow-sm: 0 2px 8px rgba(10,37,64,.06);
  --shadow-md: 0 10px 30px rgba(10,37,64,.10);
  --shadow-lg: 0 20px 50px rgba(10,37,64,.16);
}

*{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ *{ scroll-behavior:auto; animation-duration:.01ms !important; transition-duration:.01ms !important; } }

body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6, .display-font{
  font-family: var(--font-display);
  color: var(--navy);
  letter-spacing: -0.01em;
}

a{ text-decoration:none; }
:focus-visible{ outline: 3px solid var(--orange); outline-offset: 2px; }

.text-blue{ color:var(--blue) !important; }
.text-orange{ color:var(--orange) !important; }
.text-navy{ color:var(--navy) !important; }
.text-green{ color:var(--green) !important; }
.bg-navy{ background:var(--navy) !important; }
.bg-blue{ background:var(--blue) !important; }
.bg-soft{ background:var(--gray-050) !important; }

/* ---------- Seva Ribbon (signature element) ---------- */
.seva-ribbon{
  height:5px;
  width:100%;
  background: linear-gradient(90deg,
    var(--saffron) 0%, var(--saffron) 33%,
    #ffffff 33%, #ffffff 66%,
    var(--green) 66%, var(--green) 100%);
}
.seva-chip{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-body); font-weight:600; font-size:.78rem;
  letter-spacing:.06em; text-transform:uppercase;
  color: var(--blue-dark);
  background: rgba(13,110,253,.08);
  border:1px solid rgba(13,110,253,.18);
  padding:6px 14px; border-radius:999px;
}
.seva-chip .dot{ width:6px; height:6px; border-radius:50%; }
.seva-chip .dot.s1{ background:var(--saffron); }
.seva-chip .dot.s2{ background:var(--ink-soft); opacity:.25;}
.seva-chip .dot.s3{ background:var(--green); }

/* ---------- Navbar ---------- */
.topbar{
  background: var(--navy);
  color: #cfe0f5;
  font-size:.82rem;
}
.topbar a{ color:#cfe0f5; }
.topbar a:hover{ color:var(--orange); }

.navbar-seva{
  background: var(--white);
  box-shadow: var(--shadow-sm);
  padding-top:.7rem; padding-bottom:.7rem;
}
.navbar-brand-seva{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-display);
  font-weight:700; font-size:1.15rem; color:var(--navy);
  line-height:1.1;
}
.navbar-brand-seva .mark{
  width:44px; height:44px; border-radius:12px;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.3rem; box-shadow: var(--shadow-sm);
  flex-shrink:0;
}
.navbar-brand-seva small{ display:block; font-family:var(--font-body); font-weight:500; font-size:.7rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; }

.nav-link-seva{
  font-weight:600; color: var(--ink) !important; padding:.5rem 1rem !important;
  position:relative;
}
.nav-link-seva.active, .nav-link-seva:hover{ color: var(--blue) !important; }
.nav-link-seva.active::after{
  content:""; position:absolute; left:1rem; right:1rem; bottom:.15rem; height:3px; border-radius:3px;
  background: linear-gradient(90deg, var(--saffron), var(--green));
}
.btn-apply-nav{
  background: var(--orange); color:#fff; font-weight:700; padding:.55rem 1.3rem; border-radius:999px;
  box-shadow: 0 6px 16px rgba(255,107,0,.3);
}
.btn-apply-nav:hover{ background: var(--orange-dark); color:#fff; transform:translateY(-1px); }

/* ---------- Buttons ---------- */
.btn-seva-primary{
  background: var(--blue); border:none; color:#fff; font-weight:700; border-radius:12px; padding:.75rem 1.6rem;
  box-shadow: 0 8px 20px rgba(13,110,253,.28);
}
.btn-seva-primary:hover{ background:var(--blue-dark); color:#fff; transform:translateY(-2px); }
.btn-seva-orange{
  background: var(--orange); border:none; color:#fff; font-weight:700; border-radius:12px; padding:.75rem 1.6rem;
  box-shadow: 0 8px 20px rgba(255,107,0,.3);
}
.btn-seva-orange:hover{ background:var(--orange-dark); color:#fff; transform:translateY(-2px); }
.btn-seva-outline{
  background: transparent; border:2px solid rgba(255,255,255,.55); color:#fff; font-weight:700; border-radius:12px; padding:.7rem 1.5rem;
}
.btn-seva-outline:hover{ background: rgba(255,255,255,.12); color:#fff; border-color:#fff; }
.btn-seva-ghost{
  background: var(--gray-100); border:none; color:var(--navy); font-weight:700; border-radius:12px; padding:.7rem 1.5rem;
}
.btn-seva-ghost:hover{ background:var(--gray-200); color:var(--navy); }
.btn-wa{ background:#25D366; color:#fff; }
.btn-wa:hover{ background:#1EBE5A; color:#fff; }

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1100px 480px at 85% -10%, rgba(13,110,253,.35), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(255,107,0,.22), transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 60%, #0B3B66 100%);
  color:#fff;
  padding: 4.5rem 0 5.5rem;
}
.hero::before{
  content:""; position:absolute; inset:0; opacity:.05; pointer-events:none;
  background-image: radial-gradient(circle, #fff 1px, transparent 1px);
  background-size: 22px 22px;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22); color:#fff; padding:7px 16px; border-radius:999px;
  font-size:.8rem; font-weight:600; letter-spacing:.03em; backdrop-filter: blur(4px);
}
.hero h1{ color:#fff; font-weight:800; line-height:1.12; }
.hero h1 .accent{ color: var(--saffron); }
.hero p.lead{ color:#dbe7f6; }
.hero-stat{
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-md);
  padding:1rem 1.2rem;
  backdrop-filter: blur(6px);
}
.hero-stat .num{ font-family:var(--font-display); font-weight:800; font-size:1.6rem; color:#fff; }
.hero-stat .lbl{ font-size:.78rem; color:#c9d8ea; text-transform:uppercase; letter-spacing:.04em; }

.hero-card{
  background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 1.6rem; color: var(--ink);
}
.hero-search input{
  border-radius: 999px; padding:.9rem 1.3rem; border:1px solid var(--gray-200);
}
.hero-search .btn{
  border-radius: 999px;
}
.hero-quicklinks a{
  display:flex; align-items:center; gap:.6rem; padding:.6rem .3rem; color:var(--ink); font-weight:600; font-size:.92rem;
  border-bottom:1px dashed var(--gray-200);
}
.hero-quicklinks a:last-child{ border-bottom:none; }
.hero-quicklinks a i{ color:var(--blue); }
.hero-quicklinks a:hover{ color:var(--blue); }

/* ---------- Section headers ---------- */
.section-pad{ padding: 4.5rem 0; }
.section-eyebrow{
  font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.78rem; color:var(--orange);
}
.section-title{ font-weight:800; font-size:2rem; }
.section-sub{ color:var(--ink-soft); }
.divider-ribbon{
  width:70px; height:4px; border-radius:3px; margin:.6rem 0 1.2rem;
  background: linear-gradient(90deg, var(--saffron), var(--white) 50%, var(--green));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}

/* ---------- Category / Service Cards ---------- */
.cat-card{
  background:#fff; border:1px solid var(--gray-200); border-radius: var(--radius-md);
  padding:1.6rem 1.3rem; height:100%; position:relative; overflow:hidden;
  box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease;
}
.cat-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg, var(--saffron), var(--white) 50%, var(--green));
  transform: scaleX(0); transform-origin:left; transition: transform .3s ease;
}
.cat-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.cat-card:hover::before{ transform: scaleX(1); }
.cat-card .icon-wrap{
  width:54px; height:54px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(13,110,253,.12), rgba(255,107,0,.12));
  color: var(--blue); font-size:1.5rem; margin-bottom:1rem;
}
.cat-card h3{ font-size:1.05rem; font-weight:700; margin-bottom:.35rem; }
.cat-card p{ color: var(--ink-soft); font-size:.9rem; margin-bottom:.75rem; }
.cat-card .count{ font-size:.78rem; font-weight:700; color:var(--green); }

.svc-card{
  background:#fff; border:1px solid var(--gray-200); border-radius: var(--radius-md);
  padding:1.3rem; height:100%; display:flex; flex-direction:column;
  box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; position:relative; overflow:hidden;
}
.svc-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--saffron), var(--white) 50%, var(--green));
  transform: scaleX(0); transform-origin:left; transition: transform .3s ease;
}
.svc-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.svc-card:hover::before{ transform: scaleX(1); }
.svc-card .icon-wrap{
  width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background: rgba(13,110,253,.1); color: var(--blue); font-size:1.25rem; margin-bottom:.8rem; flex-shrink:0;
}
.svc-card .cat-badge{
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--blue-dark); background:rgba(13,110,253,.08); border-radius:999px; padding:3px 10px;
  display:inline-block; margin-bottom:.6rem; align-self:flex-start;
}
.svc-card h3{ font-size:1rem; font-weight:700; margin-bottom:.4rem; }
.svc-card p{ color:var(--ink-soft); font-size:.86rem; margin-bottom:.9rem; flex-grow:1; }
.svc-card .dept{ font-size:.72rem; color: var(--ink-soft); margin-bottom:.5rem; }

/* ---------- Shared Apply Now button component ----------
   Used identically by services.html, schemes.html and
   online-services.html (all three render class="btn btn-apply").
   Kept unscoped (not nested under .svc-card) so every card type
   gets the exact same button, fixing the schemes.html mismatch. */
.redirect-note{ font-size:.72rem; color:var(--ink-soft); display:flex; gap:6px; align-items:flex-start; margin-top:.7rem; }
.redirect-note i{ color:var(--orange); margin-top:2px; }
.btn-apply{
  background: var(--orange); color:#fff; font-weight:700; font-size:.85rem; border:none; border-radius:10px;
  padding:.55rem 1rem; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  width:100%; transition: background .2s ease, transform .15s ease;
}
.btn-apply:hover{ background:var(--orange-dark); color:#fff; }
.btn-apply:active{ transform: translateY(1px); }
.btn-apply:focus-visible{ outline:2px solid var(--orange-dark); outline-offset:2px; }

/* ---------- Filter bar ---------- */
.filter-bar{
  background:#fff; border:1px solid var(--gray-200); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); padding:1.1rem;
}
.filter-chip{
  border:1px solid var(--gray-200); background:#fff; color:var(--ink); font-weight:600; font-size:.82rem;
  padding:.42rem 1rem; border-radius:999px; cursor:pointer; transition:.2s;
}
.filter-chip:hover{ border-color:var(--blue); color:var(--blue); }
.filter-chip.active{ background:var(--blue); border-color:var(--blue); color:#fff; }
.form-control-seva{ border-radius:12px; border:1px solid var(--gray-200); padding:.75rem 1rem; }
.form-select-seva{ border-radius:12px; border:1px solid var(--gray-200); padding:.75rem 1rem; }

/* ---------- Scheme cards ---------- */
.scheme-card{
  background:#fff; border:1px solid var(--gray-200); border-radius: var(--radius-md); overflow:hidden;
  box-shadow: var(--shadow-sm); height:100%; transition: transform .2s ease, box-shadow .2s ease;
}
.scheme-card:hover{ transform:translateY(-5px); box-shadow: var(--shadow-md); }
.scheme-card .head{
  padding:1.2rem 1.3rem 1rem; display:flex; gap:.9rem; align-items:flex-start;
  border-bottom:1px solid var(--gray-100);
}
.scheme-card .head .tag{
  font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; border-radius:999px; padding:3px 10px;
}
.tag-central{ background:rgba(13,110,253,.1); color:var(--blue-dark); }
.tag-wb{ background:rgba(255,107,0,.1); color:var(--orange-dark); }
.scheme-card .body{ padding:1rem 1.3rem 1.3rem; }
.scheme-card p{ color:var(--ink-soft); font-size:.88rem; }

/* ---------- Steps / process ---------- */
.step-card{ text-align:center; padding:1.5rem 1rem; }
.step-num{
  width:52px; height:52px; border-radius:50%; margin:0 auto 1rem; display:flex; align-items:center; justify-content:center;
  background: var(--navy); color:#fff; font-family:var(--font-display); font-weight:800; font-size:1.2rem;
  position:relative;
}
.step-num::after{
  content:""; position:absolute; inset:-4px; border-radius:50%; border:2px dashed rgba(255,107,0,.4);
}

/* ---------- Testimonials ---------- */
.testi-card{
  background:#fff; border:1px solid var(--gray-200); border-radius: var(--radius-md); padding:1.5rem;
  box-shadow: var(--shadow-sm); height:100%;
}
.testi-card .stars{ color:var(--orange); font-size:.85rem; margin-bottom:.6rem; }
.testi-card .who{ display:flex; align-items:center; gap:.7rem; margin-top:1rem; }
.testi-card .avatar{
  width:42px; height:42px; border-radius:50%; background: linear-gradient(135deg, var(--blue), var(--orange));
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700;
}

/* ---------- Gallery ---------- */
.gal-item{ border-radius: var(--radius-md); overflow:hidden; position:relative; box-shadow: var(--shadow-sm); }
.gal-item img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease; display:block; }
.gal-item:hover img{ transform: scale(1.08); }
.gal-item .cap{
  position:absolute; left:0; right:0; bottom:0; padding:.8rem 1rem;
  background: linear-gradient(0deg, rgba(10,37,64,.85), transparent);
  color:#fff; font-size:.85rem; font-weight:600;
}

/* ---------- FAQ ---------- */
.accordion-seva .accordion-item{ border:1px solid var(--gray-200); border-radius:12px !important; overflow:hidden; margin-bottom:.8rem; }
.accordion-seva .accordion-button{ font-weight:700; color:var(--navy); font-family:var(--font-display); }
.accordion-seva .accordion-button:not(.collapsed){ background: rgba(13,110,253,.06); color:var(--blue-dark); }
.accordion-seva .accordion-button:focus{ box-shadow:none; }

/* ---------- Footer ---------- */
.footer-seva{ background: var(--navy); color:#c8d7e8; }
.footer-seva h5{ color:#fff; font-weight:700; margin-bottom:1.1rem; }
.footer-seva a{ color:#b7c8dc; }
.footer-seva a:hover{ color: var(--orange); }
.footer-seva .brand{ display:flex; align-items:center; gap:.6rem; color:#fff; font-family:var(--font-display); font-weight:700; font-size:1.15rem; }
.footer-bottom{ background:#071B32; color:#94a9c1; font-size:.85rem; }
.social-ic{
  width:38px; height:38px; border-radius:50%; background: rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center;
  color:#fff;
}
.social-ic:hover{ background: var(--orange); }

/* ---------- Floating actions ---------- */
.fab-stack{ position:fixed; right:18px; bottom:20px; z-index:1050; display:flex; flex-direction:column; gap:12px; }
.fab{
  width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff;
  font-size:1.5rem; box-shadow: var(--shadow-lg); transition: transform .2s ease;
}
.fab:hover{ transform: scale(1.08); color:#fff; }
.fab-wa{ background:#25D366; }
.fab-call{ background: var(--orange); }
.fab-top{ background: var(--navy); width:44px; height:44px; font-size:1.1rem; opacity:0; pointer-events:none; transition:.25s; }
.fab-top.show{ opacity:1; pointer-events:auto; }

/* ---------- Page header (inner pages) ---------- */
.page-header{
  background: linear-gradient(160deg, var(--navy), var(--navy-2));
  color:#fff; padding: 3.2rem 0 3.6rem; position:relative; overflow:hidden;
}
.page-header::before{
  content:""; position:absolute; inset:0; opacity:.06;
  background-image: radial-gradient(circle, #fff 1px, transparent 1px);
  background-size: 20px 20px;
}
.breadcrumb-seva a{ color:#bcd0e8; }
.breadcrumb-seva .active{ color:#fff; }

/* ---------- Badges ---------- */
.pill-soft{
  background: rgba(13,110,253,.08); color:var(--blue-dark); border-radius:999px; padding:.35rem .9rem; font-size:.78rem; font-weight:700;
}
.pill-soft.orange{ background: rgba(255,107,0,.1); color: var(--orange-dark); }
.pill-soft.green{ background: rgba(18,136,7,.1); color: var(--green); }

/* ---------- Utility ---------- */
.rounded-xl{ border-radius: var(--radius-lg) !important; }
.shadow-seva{ box-shadow: var(--shadow-md) !important; }
.marquee-track{ display:flex; gap:2.2rem; white-space:nowrap; animation: scrollX 28s linear infinite; }
@keyframes scrollX{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

.form-card{ background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding:2rem; border:1px solid var(--gray-200); }

@media (max-width: 767px){
  .hero{ padding: 3rem 0 3.5rem; }
  .section-pad{ padding: 3rem 0; }
  .section-title{ font-size:1.5rem; }
}


/* ==========================
   GALLERY IMAGE STANDARD SIZE
   ========================== */

.gallery-item{
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    height: 300px;
}

.gallery-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .45s ease;
}

.gallery-item:hover img{
    transform: scale(1.08);
}

.gallery-cap{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 14px;
    background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,0));
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    z-index: 2;
}

/* Tablet */
@media (max-width:991px){
    .gallery-item{
        height:260px;
    }
}

/* Mobile */
@media (max-width:576px){
    .gallery-item{
        height:220px;
    }
}


/* Compact navbar */
.navbar-seva .navbar-brand-seva {
    flex-shrink: 0;
}

.navbar-seva .navbar-nav {
    flex-wrap: nowrap;
}

.navbar-seva .nav-link-seva {
    white-space: nowrap;
    padding-left: 0.65rem;
    padding-right: 0.65rem;
}

.navbar-seva .btn-apply-nav {
    flex-shrink: 0;
    white-space: nowrap;
    margin-left: 10px;
}

/* Prevent horizontal page scrolling */
html,
body {
    overflow-x: hidden;
}