/* =========================================
   AXSEM NGO SATHI SOFTWARE - MAIN STYLES
   ========================================= */

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

/* --- CSS Variables --- */
:root {
  --navy: #1a2e6c;
  --navy-dark: #0f1d4a;
  --accent: #2563eb;
  --accent-2: #1d4ed8;
  --white: #ffffff;
  --light-bg: #f8faff;
  --text-muted: #6b7280;
  --border: #e5e7eb;
  --shadow-sm: 0 1px 4px rgba(26, 46, 108, 0.08);
  --shadow-md: 0 4px 24px rgba(26, 46, 108, 0.13);
  --radius: 8px;
  --transition: 0.25s ease;
}

/* --- Reset & Base --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  width: 100%;
  overflow-x: hidden;
}

body {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
  font-family: 'Inter', sans-serif;
  background: var(--white);
  color: var(--navy);
  line-height: 1.6;
  padding-top: 72px;
}

main,
section,
footer,
.navbar {
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

/* =========================================
   FLOATING WHATSAPP & CALL BUTTONS (LEFT)
   ========================================= */
.float-btns-left {
  position: fixed;
  left: 16px;
  top: 89%;
  transform: translateY(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.float-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  transition: all 0.25s ease;
  position: relative;
  cursor: pointer;
}

.float-btn svg {
  width: 24px;
  height: 24px;
}

.float-btn-wa {
  background: #25D366;
  color: #fff;
}

.float-btn-wa:hover {
  background: #1ebe5d;
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}

.float-btn-call {
  background: #2563eb;
  color: #fff;
}

.float-btn-call:hover {
  background: #1d4ed8;
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
}

.float-btn-label {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: #1f2937;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.float-btn-label::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: #1f2937;
}

.float-btn:hover .float-btn-label {
  opacity: 1;
}

@media (max-width: 768px) {
  .float-btns-left {
    left: 10px;
  }

  .float-btn {
    width: 40px;
    height: 40px;
  }

  .float-btn svg {
    width: 20px;
    height: 20px;
  }

  .float-btn-label {
    display: none;
  }
}

img {
  display: block;
  max-width: 100%;
}

/* =========================================
   NAVBAR
   ========================================= */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: linear-gradient(135deg, #0f1d4a 0%, #1a2e6c 40%, #1e3a8a 70%, #0f1d4a 100%);
  box-shadow: 0 2px 20px rgba(15, 29, 74, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: box-shadow var(--transition), background var(--transition);
  backdrop-filter: blur(10px);
}

/* subtle shimmer line at the bottom of navbar */
.navbar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #2563eb 30%, #22c55e 60%, transparent 100%);
  opacity: 0.7;
}

.navbar.scrolled {
  background: linear-gradient(135deg, #080f2a 0%, #0f1d4a 40%, #1a2e6c 70%, #080f2a 100%);
  box-shadow: 0 4px 30px rgba(8, 15, 42, 0.7);
}

.nav-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

/* --- Logo --- */
.nav-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  text-decoration: none;
  line-height: 1.1;
}

.nav-logo img {
  height: 40px;
  width: 40px;
  object-fit: contain;
  border-radius: 50%;
}

.nav-logo-text {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  letter-spacing: 0.3px;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.logo-text .brand-name {
  font-family: 'Poppins', sans-serif;
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.3px;
}

.logo-text .brand-sub {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.logo-text .brand-tagline {
  font-size: 0.62rem;
  color: var(--text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 1px;
}

/* --- Nav Links --- */
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  justify-content: center;
}

.nav-links li a {
  position: relative;
  display: inline-block;
  padding: 6px 14px;
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  border-radius: var(--radius);
  transition: color var(--transition), background var(--transition);
}

.nav-links li a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 60%;
  height: 2px;
  background: #22c55e;
  border-radius: 2px;
  transition: transform var(--transition);
}

.nav-links li a:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.nav-links li a:hover::after {
  transform: translateX(-50%) scaleX(1);
}

.nav-links li a.active {
  color: #22c55e;
}

.nav-links li a.active::after {
  transform: translateX(-50%) scaleX(1);
}

/* --- Right Section --- */
.nav-right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.nav-phone {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  transition: color var(--transition);
}

.nav-phone:hover {
  color: #22c55e;
}

.nav-phone svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* Request Demo Button */
.btn-demo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: var(--white);
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 3px 14px rgba(34, 197, 94, 0.35);
}

.btn-demo:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(34, 197, 94, 0.5);
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
}

.btn-demo:active {
  transform: translateY(0);
}

/* Yellow blinking text only - slow animation */
.demo-text-blink {
  color: gold;
  animation: blinkYellowText 1s infinite;
}

@keyframes blinkYellowText {

  0%,
  49% {
    opacity: 1;
  }

  50%,
  99% {
    opacity: 0;
  }
}

.btn-demo:hover .demo-text-blink {
  animation: none;
  opacity: 1;
}

.btn-demo:active {
  transform: translateY(0);
}

/* --- Hamburger (Mobile) --- */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  transition: background var(--transition);
  background: none;
  border: none;
}

.nav-hamburger:hover {
  background: rgba(255, 255, 255, 0.1);
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 2px;
  transition: all var(--transition);
}

/* Mobile Nav Open State */
.nav-hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-hamburger.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nav-hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* =========================================
   MOBILE RESPONSIVE
   ========================================= */
@media (max-width: 900px) {
  .nav-hamburger {
    display: flex;
  }

  .nav-links {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, #0f1d4a 0%, #1a2e6c 100%);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 0;
    box-shadow: 0 8px 24px rgba(8, 15, 42, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 999;
  }

  .nav-links.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
  }

  .nav-links li a {
    display: block;
    padding: 12px 28px;
    border-radius: 0;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.85);
  }

  .nav-links li a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
  }

  .nav-links li:last-child a {
    border-bottom: none;
  }

  .nav-links li a::after {
    display: none;
  }

  .nav-phone {
    display: none;
  }
}

@media (max-width: 500px) {
  .logo-text .brand-tagline {
    display: none;
  }

  .logo-text .brand-name {
    font-size: 1.2rem;
  }

  .btn-demo {
    padding: 8px 14px;
    font-size: 0.8rem;
  }
}

/* =========================================
   HERO SECTION — PREMIUM
   ========================================= */

/* animated background blobs */
@keyframes blobMove1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(40px, -30px) scale(1.08); }
  66%       { transform: translate(-20px, 20px) scale(0.95); }
}
@keyframes blobMove2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(-30px, 25px) scale(1.05); }
  66%       { transform: translate(35px, -15px) scale(0.97); }
}
@keyframes shimmerLine {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
  50%       { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
}

.hero {
  position: relative;
  background: linear-gradient(160deg, #f0f4ff 0%, #e8f0fe 35%, #f0fdf4 65%, #f8faff 100%);
  padding: 64px 0 80px;
  overflow: hidden;
}

/* large decorative blobs */
.hero::before {
  content: '';
  position: absolute;
  top: -120px;
  left: -100px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.12) 0%, transparent 70%);
  border-radius: 50%;
  animation: blobMove1 12s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -80px;
  right: -60px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.10) 0%, transparent 70%);
  border-radius: 50%;
  animation: blobMove2 14s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.hero-container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  align-items: center;
  gap: 48px;
  position: relative;
  z-index: 2;
}

/* ---- LEFT ---- */
.hero-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 548px;
  animation: heroFadeUp 0.7s ease both;
}

/* badge above heading */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  background: linear-gradient(135deg, rgba(37,99,235,0.10), rgba(34,197,94,0.10));
  border: 1px solid rgba(37, 99, 235, 0.20);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #004aad;
  width: fit-content;
  animation: badgePulse 2.5s ease-in-out infinite;
}
.hero-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(34,197,94,0.6);
}

.hero-heading {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(2.2rem, 3.8vw, 3.2rem);
  font-weight: 800;
  color: #0a1628;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

/* shimmer gradient on "Made Simple" */
.hero-made {
  background: linear-gradient(90deg, #004aad, #2563eb, #004aad);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmerLine 3s linear infinite;
}

.hero-simple {
  background: linear-gradient(90deg, #16a34a, #22c55e, #16a34a);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmerLine 3s linear infinite reverse;
}

.hero-subtext {
  font-size: 1rem;
  color: #374151;
  line-height: 1.75;
  max-width: 480px;
  font-weight: 500;
}

/* Checklist */
.hero-checklist {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  margin: 2px 0;
}

.hero-checklist li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #1f2937;
  background: rgba(255,255,255,0.7);
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid rgba(37,99,235,0.10);
  backdrop-filter: blur(4px);
  transition: background 0.2s, box-shadow 0.2s;
}

.hero-checklist li:hover {
  background: rgba(255,255,255,0.95);
  box-shadow: 0 4px 14px rgba(37,99,235,0.10);
}

.check-icon {
  display: inline-flex;
  flex-shrink: 0;
}

.check-icon svg {
  width: 20px;
  height: 20px;
}

/* CTA Buttons */
.hero-btns {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.hero-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 28px;
  background: linear-gradient(135deg, #0f1d4a 0%, #1a2e6c 50%, #2563eb 100%);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 700;
  border-radius: 10px;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  box-shadow: 0 6px 22px rgba(0, 74, 173, 0.32);
  letter-spacing: 0.01em;
}

.hero-btn-primary svg {
  width: 17px;
  height: 17px;
}

.hero-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 74, 173, 0.42);
}

.hero-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 28px;
  border: 2px solid #22c55e;
  color: #16a34a;
  background: rgba(240, 253, 244, 0.8);
  font-size: 0.92rem;
  font-weight: 700;
  border-radius: 10px;
  transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
  backdrop-filter: blur(4px);
}

.hero-btn-secondary svg {
  width: 17px;
  height: 17px;
}

.hero-btn-secondary:hover {
  background: #22c55e;
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.30);
}

/* Trusted By */
.hero-trusted {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 2px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.65);
  border-radius: 12px;
  border: 1px solid rgba(37,99,235,0.10);
  backdrop-filter: blur(6px);
  width: fit-content;
}

.trusted-avatars {
  display: flex;
}

.trusted-avatars img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -9px;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.trusted-avatars img:first-child {
  margin-left: 0;
}

.trusted-text {
  font-size: 0.84rem;
  color: #374151;
  font-weight: 500;
  line-height: 1.4;
}

.trusted-text strong {
  color: #004aad;
  font-weight: 700;
  display: block;
}

/* ---- RIGHT: Laptop Mockup ---- */
.hero-right {
  position: relative;
  min-height: 480px;
  padding: 20px 10px 30px;
  overflow: visible;
  animation: heroFadeUp 0.7s 0.2s ease both;
}

/* decorative grid dots */
.hero-dots {
  position: absolute;
  width: 130px;
  height: 130px;
  background-image: radial-gradient(circle, rgba(37,99,235,0.25) 1.5px, transparent 1.5px);
  background-size: 14px 14px;
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
}

.hero-dots-tl {
  top: 6%;
  left: 0%;
}

.hero-dots-br {
  bottom: 15%;
  right: 2%;
}



.laptop-mockup {
  position: relative;
  z-index: 2;
  max-width: 580px;
  margin: 0 auto;
}

.laptop-screen {
  background: #1e293b;
  border-radius: 14px 14px 4px 4px;
  padding: 10px 10px 8px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.28);
}

.laptop-base {
  width: 108%;
  height: 14px;
  margin: 0 auto;
  margin-left: -4%;
  background: linear-gradient(180deg, #cbd5e1 0%, #94a3b8 100%);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.15);
}

.mockup-app {
  display: flex;
  background: #f8fafc;
  border-radius: 6px;
  overflow: hidden;
  min-height: 280px;
}

.mockup-sidebar {
  width: 88px;
  flex-shrink: 0;
  background: #0f2557;
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 4px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-logo-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #22c55e);
  flex-shrink: 0;
}

.sidebar-brand-text {
  font-size: 0.55rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.03em;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sidebar-link {
  font-size: 0.48rem;
  color: rgba(255, 255, 255, 0.65);
  padding: 4px 6px;
  border-radius: 4px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-link.active {
  background: #28a745;
  color: #fff;
  font-weight: 600;
}

.mockup-main {
  flex: 1;
  background: #fff;
  overflow: hidden;
}

.mockup-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-bottom: 1px solid #f1f5f9;
}

.mockup-stat {
  padding: 10px 8px 8px;
  border-right: 1px solid #f1f5f9;
  text-align: center;
}

.mockup-stat:last-child {
  border-right: none;
}

.stat-label {
  font-size: 0.58rem;
  color: #9ca3af;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 4px;
}

.stat-val {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--navy);
}

.stat-link {
  font-size: 0.55rem;
  color: #2563eb;
  display: block;
  margin-top: 2px;
}

/* Charts */
.mockup-chart {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 10px 10px 8px;
}

.chart-section {
  padding: 0 6px;
}

.chart-title {
  font-size: 0.6rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
}

.chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 48px;
}

.bar {
  flex: 1;
  background: linear-gradient(180deg, #2563eb, #60a5fa);
  border-radius: 3px 3px 0 0;
  height: var(--h);
  transition: height 0.6s ease;
}

.chart-line {
  height: 48px;
}

.chart-line svg {
  width: 100%;
  height: 100%;
}

/* ---- Floating Cards ---- */
.float-card {
  position: absolute;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
  padding: 10px 14px;
  z-index: 10;
}

/* Floating animations for cards */
@keyframes floatVertical {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-15px);
  }
}

@keyframes floatDiagonal {

  0%,
  100% {
    transform: translate(0px, 0px);
  }

  50% {
    transform: translate(-8px, -12px);
  }
}

@keyframes floatCircular {
  0% {
    transform: translate(0px, 0px);
  }

  25% {
    transform: translate(8px, -8px);
  }

  50% {
    transform: translate(10px, 0px);
  }

  75% {
    transform: translate(8px, 8px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}

@keyframes floatBounce {

  0%,
  100% {
    transform: translateY(0px) scale(1);
  }

  25% {
    transform: translateY(-10px) scale(1.02);
  }

  50% {
    transform: translateY(-5px) scale(1);
  }

  75% {
    transform: translateY(-12px) scale(0.98);
  }
}

/* Top-right: Donation Received */
.float-top-right {
  top: 4%;
  right: -4%;
  min-width: 148px;
  animation: floatBounce 3.5s ease-in-out infinite;
}

.float-card-label {
  font-size: 0.62rem;
  color: #9ca3af;
  font-weight: 500;
  margin-bottom: 3px;
}

.float-card-amount {
  font-size: 1rem;
  font-weight: 700;
}

.float-card-amount.green {
  color: #16a34a;
}

.float-card-date {
  font-size: 0.6rem;
  color: #9ca3af;
  margin-top: 2px;
}

.float-check {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 20px;
  height: 20px;
}

.float-check svg {
  width: 20px;
  height: 20px;
}

/* Bottom-left: Volunteer ID Card */
.float-bottom-left {
  bottom: 16%;
  left: -5%;
  min-width: 122px;
  animation: floatVertical 3s ease-in-out infinite;
}

.id-card-header {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 5px;
  margin-bottom: 8px;
}

.id-card-body {
  display: flex;
  gap: 8px;
  align-items: center;
}

.id-avatar img {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  object-fit: cover;
}

.id-name {
  font-size: 0.7rem;
  font-weight: 700;
  color: #111827;
}

.id-role {
  font-size: 0.58rem;
  color: #6b7280;
  margin-top: 1px;
}

.id-no {
  font-size: 0.55rem;
  color: #9ca3af;
  margin-top: 2px;
}

.id-barcode {
  margin-top: 8px;
  display: flex;
  justify-content: center;
}

/* Center: Membership Certificate */
.float-center {
  bottom: 6%;
  left: 32%;
  min-width: 158px;
  text-align: center;
  animation: floatDiagonal 4s ease-in-out infinite;
}

.cert-frame {
  border: 2px solid #d4a843;
  border-radius: 6px;
  padding: 3px;
  background: linear-gradient(135deg, #fef9e7, #fff);
  box-shadow: inset 0 0 0 1px #f0d78c;
}

.cert-inner {
  padding: 6px 8px 8px;
}

.cert-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 0.6rem;
  font-weight: 600;
  color: #2563eb;
  margin-bottom: 5px;
}

.cert-logo svg {
  width: 16px;
  height: 16px;
}

.cert-title {
  font-size: 0.62rem;
  color: #9ca3af;
  margin-bottom: 6px;
}

.cert-name {
  font-family: 'Poppins', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: #15803d;
  font-style: italic;
}

.cert-role {
  font-size: 0.6rem;
  color: #6b7280;
  margin-top: 2px;
}

/* Right-bottom: 80G Receipt */
.float-right-bottom {
  bottom: 10%;
  right: -2%;
  min-width: 118px;
  animation: floatCircular 5s ease-in-out infinite;
}

.receipt-label {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 3px;
}

.receipt-amount {
  font-size: 0.95rem;
  font-weight: 700;
}

.receipt-amount.green {
  color: #16a34a;
}

.receipt-sub {
  font-size: 0.58rem;
  color: #000000;
  margin-top: 2px;
  font-weight: 500;
}

.receipt-link {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.58rem;
  color: #000000;
  font-weight: 600;
  cursor: pointer;
}

/* =========================================
   HERO RESPONSIVE
   ========================================= */
@media (max-width: 1024px) {
  .hero-container {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .hero-left {
    max-width: 100%;
  }

  .hero-right {
    min-height: 380px;
    margin: 0 auto;
    max-width: 560px;
    width: 100%;
    overflow: hidden;
  }

  .hero-wave {
    width: 90%;
    right: -20px;
  }

  .float-top-right {
    top: 2%;
    right: 0;
  }

  .float-bottom-left {
    bottom: 12%;
    left: 0;
  }

  .float-right-bottom {
    bottom: 8%;
    right: 0;
  }

  .float-center {
    left: 28%;
  }
}

@media (max-width: 640px) {

  .nav-container,
  .hero-container,
  .stats-container,
  .pain-wrapper,
  .features-wrapper,
  .docs-wrapper,
  .action-wrapper,
  .how-wrapper,
  .bottom-grid-wrapper,
  .digitize-cta-wrapper,
  .gen-docs-wrapper,
  .footer-wrapper {
    padding-left: 20px;
    padding-right: 20px;
  }

  .nav-container {
    gap: 12px;
  }

  .nav-logo img {
    width: 150px;
    height: 60px;
  }

  .hero {
    padding: 32px 0 48px;
  }

  .hero-container {
    gap: 28px;
  }

  .hero-heading {
    font-size: 1.85rem;
  }

  .hero-btns {
    gap: 10px;
  }

  .hero-btn-primary,
  .hero-btn-secondary {
    padding: 10px 16px;
    font-size: 0.82rem;
  }

  .hero-right {
    min-height: 300px;
    padding: 12px 4px 24px;
  }

  .hero-dots {
    display: none;
  }

  .hero-wave {
    height: 90px;
    width: 100%;
    right: 0;
  }

  .mockup-sidebar {
    width: 62px;
  }

  .sidebar-link {
    font-size: 0.42rem;
    padding: 3px 4px;
  }

  .sidebar-brand-text {
    display: none;
  }

  .mockup-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .mockup-stat:nth-child(2) {
    border-right: none;
  }

  .float-bottom-left,
  .float-center,
  .float-right-bottom {
    display: none;
  }

  .float-top-right {
    top: 0;
    right: 0;
    min-width: 130px;
  }
}

@media (max-width: 380px) {

  .nav-container,
  .hero-container,
  .stats-container,
  .pain-wrapper,
  .features-wrapper,
  .docs-wrapper,
  .action-wrapper,
  .how-wrapper,
  .bottom-grid-wrapper,
  .digitize-cta-wrapper,
  .gen-docs-wrapper,
  .footer-wrapper {
    padding-left: 16px;
    padding-right: 16px;
  }

  .nav-logo img {
    height: 32px;
    width: 32px;
  }

  .nav-logo-text {
    font-size: 9px;
  }

  .btn-demo {
    padding: 8px 10px;
  }

  .hero-btns {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =========================================
   MODULE FEATURES PAGE
   ========================================= */
.modules-section {
  background: #fff;
  padding: 28px 0 58px;
}

.modules-wrapper {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 32px;
}

.modules-heading {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  line-height: 1.28;
  font-weight: 800;
  color: #07164b;
  text-align: center;
  margin: 0 0 28px;
}

.modules-heading span {
  color: #16a34a;
}

.modules-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.module-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px 18px 0;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.module-card:hover {
  transform: translateY(-4px);
  border-color: #bfdbfe;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.09);
}

.module-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.module-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex: 0 0 38px;
}

.module-icon svg {
  width: 22px;
  height: 22px;
}

.icon-blue {
  background: linear-gradient(135deg, #1684ff, #075eea);
}

.icon-green {
  background: linear-gradient(135deg, #22c55e, #16a34a);
}

.icon-orange {
  background: linear-gradient(135deg, #ffb020, #f97316);
}

.icon-purple {
  background: linear-gradient(135deg, #9b5cff, #6d28d9);
}

.icon-indigo {
  background: linear-gradient(135deg, #6557ff, #4338ca);
}

.icon-pink {
  background: linear-gradient(135deg, #ff5a8a, #ec4899);
}

.icon-cyan {
  background: linear-gradient(135deg, #16b8d8, #0891b2);
}

.module-title-row h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 0.95rem;
  line-height: 1.25;
  font-weight: 800;
  color: #07164b;
  margin: 0;
}

.module-card p {
  min-height: 42px;
  color: #111827;
  font-size: 0.88rem;
  line-height: 1.45;
  font-weight: 600;
  margin: 0 0 14px;
}

.module-list {
  display: grid;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.module-list li {
  position: relative;
  padding-left: 24px;
  color: #0f172a;
  font-size: 0.78rem;
  line-height: 1.25;
  font-weight: 500;
}

.module-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #2db84d;
}

.module-list li::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 5px;
  width: 6px;
  height: 3px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

.module-list-orange li::before {
  background: #f59e0b;
}

.module-list-cyan li::before {
  background: #06b6d4;
}

.module-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  color: #004aad;
  font-size: 0.78rem;
  font-weight: 800;
  margin: auto 0 14px;
}

.module-link:hover {
  color: #16a34a;
}

.module-link span {
  font-size: 0.9rem;
  line-height: 1;
}

.module-preview {
  height: 112px;
  margin: 0 -2px;
  border: 1px solid #dbe4ef;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: #f8fbff;
  position: relative;
  overflow: hidden;
}

.module-preview::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 16px;
  background: #004aad;
}

.module-preview::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  height: 44px;
  border-radius: 6px;
  background: repeating-linear-gradient(#fff 0 9px, #eef2f7 9px 10px);
  border: 1px solid #e2e8f0;
}

.module-preview span {
  position: absolute;
  display: block;
  border-radius: 5px;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}

.preview-dashboard span,
.preview-table span,
.preview-cards span {
  top: 28px;
  width: calc(25% - 14px);
  height: 30px;
}

.preview-dashboard span:nth-child(1),
.preview-table span:nth-child(1),
.preview-cards span:nth-child(1) {
  left: 10px;
}

.preview-dashboard span:nth-child(2),
.preview-table span:nth-child(2),
.preview-cards span:nth-child(2) {
  left: calc(25% + 4px);
}

.preview-dashboard span:nth-child(3),
.preview-table span:nth-child(3),
.preview-cards span:nth-child(3) {
  left: calc(50% + 2px);
}

.preview-dashboard span:nth-child(4),
.preview-table span:nth-child(4) {
  right: 10px;
}

.preview-chart span,
.preview-bars span {
  bottom: 16px;
  width: 12%;
  background: linear-gradient(180deg, #3b82f6, #93c5fd);
  border: 0;
}

.preview-chart span:nth-child(1),
.preview-bars span:nth-child(1) {
  left: 18%;
  height: 32px;
}

.preview-chart span:nth-child(2),
.preview-bars span:nth-child(2) {
  left: 36%;
  height: 54px;
}

.preview-chart span:nth-child(3),
.preview-bars span:nth-child(3) {
  left: 54%;
  height: 42px;
}

.preview-chart span:nth-child(4),
.preview-bars span:nth-child(4) {
  left: 72%;
  height: 68px;
}

.preview-id::after,
.preview-receipt::after {
  left: 50%;
  top: 28px;
  bottom: auto;
  width: 82px;
  height: 72px;
  transform: translateX(-50%);
  background: #fff;
}

.preview-id span:nth-child(1),
.preview-receipt span:nth-child(1) {
  left: 50%;
  top: 38px;
  width: 54px;
  height: 7px;
  transform: translateX(-50%);
  background: #dbeafe;
  border: 0;
}

.preview-id span:nth-child(2),
.preview-receipt span:nth-child(2) {
  left: 50%;
  top: 54px;
  width: 54px;
  height: 7px;
  transform: translateX(-50%);
  background: #e2e8f0;
  border: 0;
}

.preview-id span:nth-child(3),
.preview-receipt span:nth-child(3) {
  left: 50%;
  top: 72px;
  width: 34px;
  height: 18px;
  transform: translateX(-50%);
  background: #22c55e;
  border: 0;
}

.preview-shield {
  background: linear-gradient(180deg, #ecfeff 0%, #f8fbff 100%);
}

.preview-shield::after {
  left: 50%;
  top: 30px;
  bottom: auto;
  width: 70px;
  height: 76px;
  transform: translateX(-50%);
  border: 0;
  border-radius: 36px 36px 12px 12px;
  background: linear-gradient(135deg, #2563eb, #004aad);
  clip-path: polygon(50% 0, 92% 16%, 86% 66%, 50% 100%, 14% 66%, 8% 16%);
}

.preview-shield span {
  left: 50%;
  top: 57px;
  width: 28px;
  height: 28px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #fff;
  border: 0;
  z-index: 2;
}

@media (max-width: 1200px) {
  .modules-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .modules-section {
    padding: 24px 0 48px;
  }

  .modules-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .modules-wrapper {
    padding: 0 18px;
  }

  .modules-heading {
    margin-bottom: 22px;
  }

  .modules-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .module-card {
    padding: 16px 16px 0;
  }

  .module-card p {
    min-height: 0;
  }
}

/* =========================================
   TRUSTED NGO ORGANIZATIONS
   ========================================= */
.trusted-ngos-section {
  background: #fff;
  padding: 10px 0 62px;
}

.trusted-ngos-wrapper {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 32px;
}

.trusted-ngos-heading-row {
  display: grid;
  grid-template-columns: minmax(28px, 1fr) auto minmax(28px, 1fr);
  align-items: center;
  gap: 22px;
  margin-bottom: 22px;
}

.trusted-ngos-heading-row span {
  height: 2px;
  background: #22c55e;
  border-radius: 999px;
}

.trusted-ngos-heading-row h2 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.2rem, 2vw, 1.65rem);
  line-height: 1.3;
  font-weight: 800;
  color: #07164b;
  text-align: center;
  margin: 0;
}

.trusted-ngos-heading-row strong {
  color: #004aad;
  font-weight: 800;
}

.trusted-ngos-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.trusted-ngo-card {
  min-width: 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px 18px 16px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.trusted-ngo-card:hover {
  transform: translateY(-4px);
  border-color: #bfdbfe;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.09);
}

.trusted-ngo-top {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-bottom: 18px;
}

.trusted-ngo-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.trusted-ngo-icon svg {
  width: 21px;
  height: 21px;
}

.ngo-blue {
  background: linear-gradient(135deg, #1684ff, #075eea);
}

.ngo-green {
  background: linear-gradient(135deg, #22c55e, #16a34a);
}

.ngo-purple {
  background: linear-gradient(135deg, #9b5cff, #6d28d9);
}

.ngo-orange {
  background: linear-gradient(135deg, #ffb020, #f97316);
}

.ngo-pink {
  background: linear-gradient(135deg, #ff5a8a, #ec4899);
}

.trusted-ngo-top h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 0.9rem;
  line-height: 1.25;
  color: #07164b;
  font-weight: 800;
  margin: 0 0 10px;
}

.trusted-ngo-card:nth-child(2) h3 {
  color: #16a34a;
}

.trusted-ngo-card:nth-child(3) h3 {
  color: #6d28d9;
}

.trusted-ngo-card:nth-child(4) h3 {
  color: #f97316;
}

.trusted-ngo-card:nth-child(5) h3 {
  color: #ec4899;
}

.trusted-ngo-top p {
  color: #111827;
  font-size: 0.82rem;
  line-height: 1.5;
  font-weight: 500;
  margin: 0;
}

.trusted-docs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.trusted-docs img {
  width: 100%;
  aspect-ratio: 1.35 / 1;
  object-fit: cover;
  object-position: top center;
  border: 1px solid #dbe4ef;
  border-radius: 6px;
  background: #f8fbff;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.07);
}

@media (max-width: 1200px) {
  .trusted-ngos-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .trusted-ngos-section {
    padding-bottom: 50px;
  }

  .trusted-ngos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trusted-ngos-heading-row {
    gap: 16px;
  }
}

@media (max-width: 640px) {
  .trusted-ngos-wrapper {
    padding: 0 18px;
  }

  .trusted-ngos-heading-row {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 18px;
  }

  .trusted-ngos-heading-row span {
    width: 54px;
    margin: 0 auto;
  }

  .trusted-ngos-grid {
    grid-template-columns: 1fr;
  }

  .trusted-ngo-card {
    padding: 16px;
  }
}

/* =========================================
   INSTANT DOCUMENTS SECTION
   ========================================= */
.instant-docs-section {
  background: #fff;
  padding: 12px 0 62px;
}

.instant-docs-wrapper {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 32px;
}

.instant-docs-heading-row {
  display: grid;
  grid-template-columns: minmax(28px, 1fr) auto minmax(28px, 1fr);
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
}

.instant-docs-heading-row span {
  height: 2px;
  background: #22c55e;
  border-radius: 999px;
}

.instant-docs-heading-row h2 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.18rem, 2vw, 1.65rem);
  line-height: 1.3;
  font-weight: 800;
  color: #07164b;
  text-align: center;
  margin: 0;
}

.instant-docs-heading-row strong {
  color: #004aad;
  font-weight: 800;
}

.instant-docs-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.instant-doc-card {
  min-width: 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 16px 14px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.instant-doc-card:hover {
  transform: translateY(-4px);
  border-color: #bfdbfe;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.09);
}

.instant-doc-top {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  margin-bottom: 14px;
}

.instant-doc-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex: 0 0 30px;
}

.instant-doc-icon svg {
  width: 17px;
  height: 17px;
}

.doc-blue {
  background: linear-gradient(135deg, #1684ff, #075eea);
}

.doc-green {
  background: linear-gradient(135deg, #22c55e, #16a34a);
}

.doc-purple {
  background: linear-gradient(135deg, #9b5cff, #6d28d9);
}

.doc-orange {
  background: linear-gradient(135deg, #ffb020, #f97316);
}

.doc-pink {
  background: linear-gradient(135deg, #ff5a8a, #ec4899);
}

.instant-doc-top h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 0.82rem;
  line-height: 1.25;
  color: #07164b;
  font-weight: 800;
  margin: 0;
}

.instant-doc-card:nth-child(2) h3 {
  color: #16a34a;
}

.instant-doc-card:nth-child(3) h3 {
  color: #6d28d9;
}

.instant-doc-card:nth-child(4) h3 {
  color: #f97316;
}

.instant-doc-card:nth-child(5) h3 {
  color: #ec4899;
}

.instant-doc-list {
  display: grid;
  gap: 8px;
  min-height: 92px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.instant-doc-list li {
  position: relative;
  padding-left: 20px;
  color: #0f172a;
  font-size: 0.74rem;
  line-height: 1.25;
  font-weight: 500;
}

.instant-doc-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #22c55e;
}

.instant-doc-list li::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 5px;
  width: 6px;
  height: 3px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

.instant-doc-list-purple li::before {
  background: #7c3aed;
}

.instant-doc-list-orange li::before {
  background: #f59e0b;
}

.instant-doc-list-pink li::before {
  background: #ec4899;
}

.instant-doc-previews {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.instant-doc-previews img {
  width: 100%;
  aspect-ratio: 1.25 / 1;
  object-fit: cover;
  object-position: top center;
  border: 1px solid #dbe4ef;
  border-radius: 6px;
  background: #f8fbff;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.07);
}

.instant-docs-action {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.instant-docs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 24px;
  border-radius: 8px;
  background: #004aad;
  color: #fff;
  font-size: 0.86rem;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(0, 74, 173, 0.22);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.instant-docs-btn:hover {
  color: #fff;
  background: #003b8a;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0, 74, 173, 0.28);
}

.instant-docs-btn span {
  font-size: 1rem;
  line-height: 1;
}

@media (max-width: 1200px) {
  .instant-docs-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .instant-docs-section {
    padding-bottom: 50px;
  }

  .instant-docs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .instant-docs-heading-row {
    gap: 14px;
  }
}

@media (max-width: 640px) {
  .instant-docs-wrapper {
    padding: 0 18px;
  }

  .instant-docs-heading-row {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 18px;
  }

  .instant-docs-heading-row span {
    width: 54px;
    margin: 0 auto;
  }

  .instant-docs-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .instant-doc-card {
    padding: 16px;
  }

  .instant-doc-list {
    min-height: 0;
  }
}

/* =========================================
   STATS BAR — PREMIUM
   ========================================= */

@keyframes statsGlow {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.12); }
}
@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.stats-bar {
  position: relative;
  background: linear-gradient(135deg, #080f2a 0%, #0f1d4a 30%, #1a2e6c 60%, #0e2255 100%);
  padding: 36px 0;
  overflow: hidden;
}

/* top shimmer border */
.stats-bar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    #2563eb 25%,
    #22c55e 50%,
    #2563eb 75%,
    transparent 100%
  );
  opacity: 0.85;
}

/* bottom shimmer border */
.stats-bar::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    #22c55e 25%,
    #2563eb 50%,
    #22c55e 75%,
    transparent 100%
  );
  opacity: 0.6;
}

/* faint grid pattern overlay */
.stats-bar .stats-container::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

.stats-container {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
}

/* Each stat item */
.stat-item {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 14px;
  transition: background 0.25s ease, transform 0.25s ease;
}

.stat-item:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-2px);
}

/* Icon wrapper */
.stat-icon-wrap {
  width: 54px;
  height: 54px;
  background: rgba(37, 99, 235, 0.15);
  border: 1px solid rgba(37, 99, 235, 0.25);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.stat-item:hover .stat-icon-wrap {
  transform: scale(1.1) rotate(-4deg);
  background: rgba(37, 99, 235, 0.28);
  box-shadow: 0 0 18px rgba(37, 99, 235, 0.35);
}

.stat-icon-wrap svg {
  width: 26px;
  height: 26px;
}

/* override icon stroke colors to white for dark bg */
.stat-icon-wrap svg path,
.stat-icon-wrap svg circle {
  stroke: rgba(255, 255, 255, 0.85);
}

.stat-icon-green {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.25);
}

.stat-item:hover .stat-icon-green {
  background: rgba(34, 197, 94, 0.28);
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.35);
}

.stat-icon-green svg path,
.stat-icon-green svg circle {
  stroke: rgba(134, 239, 172, 0.95);
}

.stat-icon-navy {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.15);
}

/* Text content */
.stat-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  animation: countUp 0.6s ease both;
}

.stat-number {
  font-family: 'Poppins', sans-serif;
  font-size: 1.65rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.05;
  letter-spacing: -0.5px;
}

.stat-number.stat-green {
  color: #4ade80;
}

.stat-number.stat-navy {
  color: #93c5fd;
}

.stat-desc {
  font-size: 0.76rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Vertical divider between stats */
.stat-divider {
  width: 1px;
  height: 48px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.15), transparent);
  flex-shrink: 0;
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .stats-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    justify-items: center;
  }

  .stat-divider {
    display: none;
  }

  .stat-item {
    padding: 14px 16px;
    justify-content: flex-start;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    width: 100%;
  }

  .stat-item:hover {
    background: rgba(255, 255, 255, 0.09);
  }
}

@media (max-width: 480px) {
  .stats-container {
    grid-template-columns: 1fr;
  }

  .stat-number {
    font-size: 1.4rem;
  }
}

/* =========================================
   PAIN SECTION — LIGHTWEIGHT BG
   ========================================= */
.pain-section {
  position: relative;
  background:
    linear-gradient(135deg, #eef3ff 0%, #f0f7ff 40%, #f0fdf6 75%, #eef3ff 100%);
  padding: 44px 0 48px;
  overflow: hidden;
}

/* subtle top accent line */
.pain-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    #2563eb 30%,
    #22c55e 60%,
    transparent 100%
  );
  opacity: 0.5;
}

/* faint dot-grid watermark */
.pain-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(37,99,235,0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

.pain-wrapper {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.pain-heading {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-weight: 700;
  color: #111827;
  text-align: center;
  margin-bottom: 24px;
}

.pain-blue {
  color: #2563eb;
}

.pain-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: rgba(255, 255, 255, 0.80);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 4px 24px rgba(26, 46, 108, 0.08),
    0 1px 4px rgba(26, 46, 108, 0.04);
}

/* Problem Items */
.pain-problems {
  display: flex;
  align-items: center;
  flex: 1;
  flex-wrap: wrap;
}

.pain-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 22px;
  border-right: 1px solid rgba(37, 99, 235, 0.08);
  flex: 1;
  min-width: 130px;
  transition: background var(--transition);
}

.pain-item:hover {
  background: rgba(254, 242, 242, 0.7);
}

.pain-cross {
  display: inline-flex;
  flex-shrink: 0;
}

.pain-cross svg {
  width: 44px;
  height: 59px;
}

.pain-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pain-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
}

.pain-sub {
  font-size: 0.72rem;
  color: #374151;
  white-space: nowrap;
}

/* Solution CTA Card */
.pain-solution {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-left: 2px solid #86efac;
  text-decoration: none;
  cursor: pointer;
  min-width: 180px;
  flex-shrink: 0;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.pain-solution:hover {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  transform: scale(1.02);
  box-shadow: inset -4px 0 12px rgba(34, 197, 94, 0.12);
}

.pain-sol-icon svg {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.pain-sol-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pain-sol-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
}

.pain-sol-sub {
  font-size: 0.75rem;
  font-weight: 600;
  color: #16a34a;
  white-space: nowrap;
}

.pain-sol-arrow svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 900px) {
  .pain-row {
    flex-direction: column;
  }

  .pain-problems {
    border-bottom: 1px solid rgba(37, 99, 235, 0.08);
  }

  .pain-item {
    border-right: none;
    border-bottom: 1px solid rgba(37, 99, 235, 0.06);
    min-width: 40%;
  }

  .pain-item:last-child {
    border-bottom: none;
  }

  .pain-solution {
    border-left: none;
    border-top: 2px solid #86efac;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .pain-item {
    min-width: 100%;
  }

  .pain-heading {
    font-size: 1.05rem;
  }
}

/* =========================================
   CHALLENGES SECTION
   ========================================= */
.challenges-section {
  position: relative;
  background: linear-gradient(135deg,
    #eef2ff 0%,
    #f0f4ff 30%,
    #f0fdf4 65%,
    #eefaf3 100%
  );
  padding: 56px 0 64px;
  overflow: hidden;
}

/* top accent line — navy to green */
.challenges-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    #1a2e6c 25%,
    #22c55e 60%,
    transparent 100%
  );
  opacity: 0.35;
}

/* faint dot watermark */
.challenges-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(26,46,108,0.055) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
  z-index: 0;
}

.challenges-wrapper {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.challenges-heading {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 700;
  color: #111827;
  text-align: center;
  margin-bottom: 12px;
  line-height: 1.3;
}

.challenges-green {
  color: #16a34a;
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  background-clip: unset;
}

.challenges-subtitle {
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  color: #6b7280;
  text-align: center;
  margin-bottom: 48px;
  font-weight: 500;
}

/* Grid Layout - 5 cards in a row */
.challenges-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

/* Individual Challenge Card */
.challenge-card {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(26, 46, 108, 0.10);
  border-radius: 14px;
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  backdrop-filter: blur(6px);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
  box-shadow: 0 2px 12px rgba(26, 46, 108, 0.07);
}

.challenge-card:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.97);
  border-color: rgba(26, 46, 108, 0.18);
  box-shadow:
    0 12px 28px rgba(26, 46, 108, 0.12),
    0 0 0 1px rgba(34, 197, 94, 0.12);
}

/* Icon */
.challenge-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: none;
  border: none;
  border-radius: 0;
  transition: transform 0.3s ease;
}

.challenge-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
}

.challenge-card:hover .challenge-icon {
  transform: scale(1.1);
  background: none;
  border-color: transparent;
}

.challenge-icon svg {
  width: 60px;
  height: 60px;
}

/* Card Title */
.challenge-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
  margin: 0;
  line-height: 1.3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.challenge-title span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.challenge-title span img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(34%) sepia(97%) saturate(5438%) hue-rotate(348deg) brightness(95%) contrast(92%);
}

/* Card Description */
.challenge-desc {
  font-size: 0.88rem;
  color: #6b7280;
  line-height: 1.5;
  margin: 0;
  font-weight: 500;
}

/* Responsive Breakpoints */
@media (max-width: 1200px) {
  .challenges-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
}

@media (max-width: 768px) {
  .challenges-section {
    padding: 44px 0 52px;
  }

  .challenges-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .challenge-card {
    padding: 24px 18px;
  }

  .challenges-subtitle {
    margin-bottom: 36px;
  }
}

@media (max-width: 480px) {
  .challenges-section {
    padding: 36px 0 44px;
  }

  .challenges-wrapper {
    padding: 0 18px;
  }

  .challenges-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .challenge-card {
    padding: 22px 16px;
  }

  .challenge-icon svg {
    width: 50px;
    height: 50px;
  }
}
  }

  .challenge-title {
    font-size: 0.95rem;
  }

  .challenge-desc {
    font-size: 0.85rem;
  }

  .challenges-subtitle {
    margin-bottom: 28px;
  }
}

/* =========================================
   DOCUMENTS SHOWCASE SECTION
   ========================================= */
.docs-showcase-section {
  background: #fff;
  padding: 64px 0;
}

.docs-showcase-wrapper {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  align-items: center;
  gap: 60px;
}

/* Left Content */
.docs-showcase-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.docs-showcase-heading {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
  color: #111827;
  line-height: 1.25;
  margin: 0;
}

.docs-showcase-blue {
  color: #004aad;
}

.docs-showcase-green {
  color: #16a34a;
}

.docs-showcase-text {
  font-size: clamp(0.95rem, 1.8vw, 1.05rem);
  color: #6b7280;
  line-height: 1.6;
  margin: 0;
  font-weight: 500;
}

.docs-showcase-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  background: #004aad;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  width: fit-content;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 16px rgba(0, 74, 173, 0.25);
}

.docs-showcase-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 74, 173, 0.35);
  color: #fff;
}

/* Right: Document Preview Grid */
.docs-showcase-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.docs-showcase-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Individual Document Preview Card */
.doc-preview-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  cursor: pointer;
}

.doc-preview-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  border-color: #bfdbfe;
}

.doc-preview-img {
  width: 100%;
  aspect-ratio: 1.2 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.doc-preview-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.doc-preview-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  margin: 0;
  line-height: 1.3;
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
  .docs-showcase-wrapper {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .docs-showcase-left {
    text-align: center;
    align-items: center;
  }

  .docs-showcase-btn {
    width: auto;
  }
}

@media (max-width: 768px) {
  .docs-showcase-section {
    padding: 48px 0;
  }

  .docs-showcase-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .doc-preview-card {
    padding: 14px;
  }
}

@media (max-width: 480px) {
  .docs-showcase-section {
    padding: 40px 0;
  }

  .docs-showcase-wrapper {
    padding: 0 18px;
    gap: 36px;
  }

  .docs-showcase-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .doc-preview-card {
    padding: 16px;
  }

  .docs-showcase-btn {
    width: 100%;
    padding: 12px 28px;
  }
}

/* =========================================
   FEATURES SECTION
   ========================================= */
.features-section {
  background: #fff;
  padding: 80px 0;
}

.features-wrapper {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.features-heading {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
  color: #111827;
  text-align: center;
  margin-bottom: 50px;
}

.features-green {
  color: #16a34a;
}

/* Grid Layout */
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* Individual Card */
.feat-card {
  background: #fff;
  border: 1px solid #f1f5f9;
  border-radius: 16px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.feat-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border-color: #e2e8f0;
}

/* Icons */
.feat-icon {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.feat-card:hover .feat-icon {
  transform: rotate(5deg) scale(1.1);
}

.feat-icon svg {
  width: 28px;
  height: 28px;
}

/* Icon Colors */
.feat-icon-blue {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.feat-icon-green {
  background: linear-gradient(135deg, #22c55e, #16a34a);
}

.feat-icon-yellow {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.feat-icon-purple {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
}

.feat-icon-teal {
  background: linear-gradient(135deg, #14b8a6, #0d9488);
}

.feat-icon-red {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

/* Card Content */
.feat-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.feat-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #003399;
  line-height: 1.4;
}

.feat-desc {
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.6;
}

/* --- Responsive --- */
@media (max-width: 1200px) {
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .features-section {
    padding: 60px 0;
  }
}

@media (max-width: 600px) {
  .features-grid {
    grid-template-columns: 1fr;
  }

  .feat-card {
    padding: 24px;
  }

  .features-heading {
    margin-bottom: 36px;
  }
}

/* =========================================
   DOCUMENTS SECTION
   ========================================= */
.docs-section {
  background: #f8faff;
  padding: 80px 0;
  border-bottom: 1px solid #e5e7eb;
}

.docs-wrapper {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}

.docs-heading {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: #111827;
  text-align: center;
  margin-bottom: 50px;
}

.docs-green {
  color: #16a34a;
}

/* Grid */
.docs-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 40px;
}

/* Document Card */
.doc-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  width: calc(14.28% - 18px);
  min-width: 150px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.doc-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.1);
  border-color: #2563eb;
}

/* CSS Mini Previews */
.doc-preview {
  /* background: #f1f5f9; */
  height: 140px;
  border-radius: 8px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  /* border: 1px dashed #cbd5e1; */
}

.mini-id-card {
  width: 45px;
  height: 65px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.id-header {
  height: 8px;
  background: #1a2e6c;
  border-radius: 2px;
  margin-bottom: 6px;
}

.id-photo {
  width: 14px;
  height: 18px;
  background: #e2e8f0;
  border-radius: 2px;
  margin-bottom: 6px;
}

.id-line {
  height: 2px;
  background: #e2e8f0;
  margin-bottom: 3px;
}

.id-line.short {
  width: 60%;
}

.mini-cert {
  width: 65px;
  height: 45px;
  background: #fff;
  border: 1px solid #d97706;
  border-radius: 2px;
  position: relative;
  padding: 4px;
}

.cert-border {
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  border: 1px solid #fde68a;
}

.cert-seal {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  background: #d97706;
  border-radius: 50%;
}

.mini-receipt {
  width: 50px;
  height: 70px;
  background: #fff;
  border: 1px solid #e2e8f0;
  padding: 6px;
}

.receipt-header {
  height: 4px;
  background: #2563eb;
  width: 40%;
  margin-bottom: 8px;
}

.receipt-lines {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.receipt-lines::after {
  content: '';
  display: block;
  height: 1px;
  background: #e2e8f0;
  margin-top: 10px;
}

.mini-letter {
  width: 55px;
  height: 75px;
  background: #fff;
  border: 1px solid #e2e8f0;
  padding: 8px;
}

.letter-lines {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(#f8fafc 0px, #f8fafc 2px, transparent 2px, transparent 6px);
}

/* Title */
.doc-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #003399;
  ;
  line-height: 1.3;
}

/* View All Btn */
.docs-action {
  text-align: center;
}

.docs-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  background: #1a2e6c;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  border-radius: 8px;
  transition: background 0.3s;
}

.docs-btn:hover {
  background: #2563eb;
}

.docs-btn svg {
  width: 18px;
  height: 18px;
}

/* =========================================
   ACTION / SLIDER SECTION
   ========================================= */
.action-section {
  padding: 80px 0;
  background: #fff;
}

.action-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.action-heading {
  font-family: 'Poppins', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: #111827;
  text-align: center;
  margin-bottom: 60px;
}

.action-blue {
  color: #003399;
  font-weight: bold;
}

/* Slider */
.action-slider-outer {
  position: relative;
  margin-bottom: 40px;
}

.action-slider-inner {
  display: flex;
  overflow: hidden;
  gap: 30px;
  scroll-behavior: smooth;
  padding: 10px 5px;
}

.slide {
  flex: 0 0 calc(33.333% - 20px);
  min-width: 300px;
  text-align: center;
  transition: transform 0.3s ease;
}

.slide:hover {
  transform: scale(1.05);
}

.slide-image {
  background: #fff;
  border-radius: 12px;
  margin-bottom: 15px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 280px;
  overflow: hidden;
  padding: 0;
  transition: box-shadow 0.3s ease;
}

.slide:hover .slide-image {
  box-shadow: 0 20px 40px -3px rgba(0, 74, 173, 0.25);
}

.slide-image img {
  width: 100%;
  height: 90%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  transition: transform 0.3s ease;
}

.slide:hover .slide-image img {
  transform: scale(1.08);
}

/* Dashboard Placeholders */
.mini-dashboard {
  width: 90%;
  height: 80%;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #cbd5e1;
  display: flex;
  overflow: hidden;
}

.db-side {
  width: 40px;
  background: #1a2e6c;
}

.db-main {
  flex: 1;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.db-top {
  height: 12px;
  background: #f1f5f9;
  border-radius: 2px;
  width: 80%;
}

.db-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.db-stat {
  height: 25px;
  background: #eff6ff;
  border-radius: 3px;
  border: 1px solid #dbeafe;
}

.db-chart {
  flex: 1;
  background: #f8fafc;
  border: 1px dashed #e2e8f0;
  border-radius: 4px;
}

.db-table {
  flex: 1;
  background: repeating-linear-gradient(#fff 0, #fff 20px, #f1f5f9 20px, #f1f5f9 21px);
}

.slide-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #003399;
}

/* Nav Arrows */
.slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.slider-nav:hover {
  background: #1d4ed8;
  transform: translateY(-50%) scale(1.1);
}

.slider-nav.prev {
  left: -24px;
}

.slider-nav.next {
  right: -24px;
}

.slider-nav svg {
  width: 24px;
  height: 24px;
}

/* Dots */
.slider-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.dot {
  width: 10px;
  height: 10px;
  background: #cbd5e1;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s;
}

.dot.active {
  width: 28px;
  background: #2563eb;
  border-radius: 10px;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .doc-card {
    width: calc(33.333% - 14px);
  }

  .slide {
    flex: 0 0 calc(50% - 15px);
  }

  .slider-nav {
    display: none;
  }
}

@media (max-width: 600px) {
  .doc-card {
    width: calc(50% - 10px);
  }

  .slide {
    flex: 0 0 100%;
  }
}

/* =========================================
   HOW IT WORKS
   ========================================= */
.how-section {
  padding: 80px 0;
  background: #fff;
}

.how-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header with Lines */
.how-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 60px;
}

.how-line {
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}

.how-heading-group {
  display: flex;
  align-items: center;
  gap: 15px;
}

.how-heading {
  font-family: 'Poppins', sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: #111827;
}

.how-decor svg {
  width: 40px;
  height: 20px;
}

/* Steps Cards */
.how-steps-container {
  padding: 0 4px;
}

.how-steps-row {
  position: relative;
}

.how-card {
  position: relative;
  height: 100%;
  background: #fff;
  border: 1px solid #e8ecf0;
  border-radius: 16px;
  padding: 28px 20px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-shadow: 0 4px 14px rgba(0, 51, 102, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.how-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 32px rgba(0, 51, 102, 0.12);
  border-color: #c7d8f0;
}

.how-card-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #004aad;
  background: #eff6ff;
  border-radius: 20px;
  padding: 4px 10px;
  line-height: 1;
}

.how-card-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.how-card:hover .how-card-icon {
  transform: scale(1.08);
}

.how-card-icon svg {
  width: 30px;
  height: 30px;
}

.icon-blue {
  background: #043d07;
}

.icon-green {
  background: #1f4c5f;
}

.icon-orange {
  background: #1d5aa1;
}

.icon-green-solid {
  background: #16a34a;
}

.how-card-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #111827;
  margin: 0;
  line-height: 1.3;
}

.how-card-desc {
  font-size: 0.84rem;
  color: #6b7280;
  line-height: 1.55;
  margin: 0;
}

/* Connector arrows between cards (desktop) */
@media (min-width: 992px) {
  .how-steps-row .col:not(:last-child) .how-card::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -18px;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
    z-index: 2;
    pointer-events: none;
  }
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .how-header {
    gap: 10px;
  }

  .how-line {
    display: none;
  }

  .how-heading {
    font-size: 1.5rem;
  }

  .how-card {
    padding: 24px 18px 20px;
  }
}

/* =========================================
   OUR PARTNERS (MARQUEE)
   ========================================= */
.partners-section {
  padding: 60px 0;
  background: #f8faff;
  overflow: hidden;
}

.partners-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.partners-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 50px;
}

.partners-line {
  flex: 1;
  max-width: 120px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #2563eb, transparent);
  border-radius: 2px;
}

.partners-heading {
  font-family: 'Poppins', sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
}

.partners-heading .text-blue {
  color: #2563eb;
}

.partners-heading .text-green {
  color: #16a34a;
}

/* Marquee */
.partners-marquee {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent);
}

.partners-track {
  display: flex;
  gap: 60px;
  align-items: center;
  width: max-content;
  animation: marqueeScroll 30s linear infinite;
}

.partners-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  width: 160px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.partners-logo:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.12);
  border-color: #93c5fd;
}

.partners-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

@keyframes marqueeScroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* Pause on hover */
.partners-marquee:hover .partners-track {
  animation-play-state: paused;
}

/* Responsive */
@media (max-width: 768px) {
  .partners-section {
    padding: 40px 0;
  }

  .partners-heading {
    font-size: 1.3rem;
  }

  .partners-header {
    gap: 12px;
    margin-bottom: 30px;
  }

  .partners-line {
    max-width: 60px;
  }

  .partners-track {
    gap: 30px;
  }

  .partners-logo {
    width: 120px;
    height: 60px;
    padding: 8px 14px;
  }
}

@media (max-width: 480px) {
  .partners-heading {
    font-size: 1.1rem;
  }

  .partners-logo {
    width: 100px;
    height: 50px;
    padding: 6px 10px;
  }

  .partners-track {
    gap: 20px;
  }
}

/* =========================================
   BOTTOM GRID SECTION (WHY, PRICING, TESTI, FAQ)
   ========================================= */
.bottom-grid-section {
  padding: 70px 0;
  background: #f0f2f5;
}

.bottom-grid-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.top-row,
.bottom-row {
  display: flex;
  gap: 24px;
  align-items: stretch;
}

.why-card,
.pricing-card,
.testi-section,
.faq-section {
  background: #fff;
  border: 1px solid #e8ecf0;
  border-radius: 18px;
  padding: 36px 32px;
  box-shadow: 0 6px 24px rgba(0, 51, 102, 0.06);
}

.why-card {
  flex: 0.42;
}

.pricing-card {
  flex: 0.58;
}

.testi-section,
.faq-section {
  flex: 1;
  min-width: 0;
}

.axsem-blue {
  color: #004aad;
}

/* 1. Why Choose */
.why-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-weight: 700;
  color: #003366;
  margin-bottom: 28px;
  text-align: center;
}

.why-content {
  display: flex;
  gap: 16px;
  align-items: center;
}

.why-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px 6px;
  flex: 1;
  margin-top: 32px;
}

.why-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: #334155;
  font-weight: 500;
  line-height: 1.35;
}

.check-icon {
  width: 20px;
  height: 20px;
  background: #28a745;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.check-icon svg {
  width: 11px;
  height: 11px;
}

.why-shield {
  flex-shrink: 0;
}

.shield-container svg {
  width: 110px;
  height: 130px;
}

/* 2. Pricing */
.pricing-main-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-weight: 700;
  color: #003366;
  margin-bottom: 28px;
  text-align: center;
}

.pricing-grid {
  display: flex;
  gap: 16px;
  align-items: stretch;
}

.price-box {
  flex: 1;
  background: #fff;
  border: 1px solid #dde3ea;
  border-radius: 14px;
  padding: 22px 18px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.price-box.featured {
  border: 2px solid #28a745;
  transform: scale(1.04);
  box-shadow: 0 12px 32px rgba(40, 167, 69, 0.18);
  z-index: 2;
  padding: 0;
}

.popular-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #f59e0b;
  color: #fff;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  z-index: 3;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.4);
}

.price-header {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: #004aad;
  margin-bottom: 14px;
}

.price-header-bar {
  background: linear-gradient(135deg, #28a745, #20c05a);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 14px 18px;
  text-align: center;
}

.price-body {
  padding: 20px 18px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.price-value {
  font-family: 'Poppins', sans-serif;
  font-size: 1.75rem;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 4px;
}

.price-value.blue-price {
  color: #004aad;
}

.p-mo {
  font-size: 0.78rem;
  color: #64748b;
  font-weight: 500;
}

.p-for {
  font-size: 0.82rem;
  color: #64748b;
  margin-bottom: 18px;
}

.popular-label {
  color: #28a745;
  font-weight: 600;
}

.p-features {
  list-style: none;
  padding: 0;
  margin-bottom: 20px;
  text-align: left;
  flex: 1;
}

.p-features li {
  font-size: 0.82rem;
  color: #475569;
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.feat-check {
  color: #28a745;
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.btn-solid-blue {
  display: block;
  background: #004aad;
  color: #fff;
  text-decoration: none;
  padding: 11px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.88rem;
  transition: background 0.25s ease;
  margin-top: auto;
}

.btn-solid-blue:hover {
  background: #003366;
}

.btn-outline {
  display: block;
  border: 1.5px solid #004aad;
  color: #004aad;
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.88rem;
  transition: all 0.25s ease;
  margin-top: auto;
  background: #fff;
}

.btn-outline:hover {
  background: #004aad;
  color: #fff;
}

.btn-solid-green {
  display: block;
  background: linear-gradient(135deg, #28a745, #20c05a);
  color: #fff;
  text-decoration: none;
  padding: 11px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 4px 14px rgba(40, 167, 69, 0.35);
  transition: transform 0.25s ease;
  margin-top: auto;
}

.btn-solid-green:hover {
  transform: translateY(-1px);
}

.price-note {
  text-align: center;
  margin-top: 22px;
  font-size: 0.78rem;
  color: #94a3b8;
}

/* 3. Testimonials */
.testi-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-weight: 700;
  color: #003366;
  margin-bottom: 26px;
  text-align: center;
}

.testi-slider-outer {
  position: relative;
  margin-bottom: 22px;
  overflow: hidden;
}

.testi-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.testi-track::-webkit-scrollbar {
  display: none;
}

.testi-card {
  flex: 0 0 calc(33.333% - 11px);
  min-width: 0;
  scroll-snap-align: start;
  background: #f8fafc;
  padding: 18px 14px;
  border-radius: 14px;
  border: 1px solid #e8ecf0;
  box-shadow: 0 4px 14px rgba(0, 51, 102, 0.05);
}

.testi-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.testi-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #e2e8f0;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Indian Profile Photos - Replace with local images from assets/testimonials/ */
.av-1 {
  background: url('https://xsgames.co/randomusers/assets/avatars/female/1.jpg') center/cover;
}

.av-2 {
  background: url('https://xsgames.co/randomusers/assets/avatars/male/2.jpg') center/cover;
}

.av-3 {
  background: url('https://xsgames.co/randomusers/assets/avatars/female/3.jpg') center/cover;
}

.av-4 {
  background: url('https://xsgames.co/randomusers/assets/avatars/male/4.jpg') center/cover;
}

.av-5 {
  background: url('https://xsgames.co/randomusers/assets/avatars/female/5.jpg') center/cover;
}

.av-6 {
  background: url('https://xsgames.co/randomusers/assets/avatars/male/6.jpg') center/cover;
}

.testi-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1e293b;
}

.testi-org {
  font-size: 0.78rem;
  color: #64748b;
}

.testi-stars {
  color: #f59e0b;
  margin-bottom: 10px;
  font-size: 0.82rem;
  letter-spacing: 1px;
}

.testi-quote {
  font-size: 0.85rem;
  color: #475569;
  font-style: italic;
  line-height: 1.55;
}

.testi-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
}

.t-dot {
  width: 10px;
  height: 10px;
  background: #d1d5db;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}

.t-dot.active {
  width: 22px;
  background: #004aad;
  border-radius: 10px;
}

/* 4. FAQ */
.faq-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-weight: 700;
  color: #003366;
  margin-bottom: 24px;
  text-align: center;
}

.faq-list {
  background: #fff;
  border: 1px solid #e8ecf0;
  border-radius: 12px;
  margin-bottom: 24px;
  overflow: hidden;
}

.faq-item {
  padding: 16px 18px;
  border-bottom: 1px solid #e8ecf0;
  cursor: pointer;
  transition: background 0.2s ease;
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-item:hover {
  background: #f8fafc;
}

.faq-item.active {
  background: #f8fafc;
}

.faq-q {
  font-size: 0.9rem;
  font-weight: 600;
  color: #1e293b;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  line-height: 1.45;
}

.plus {
  font-size: 1.3rem;
  color: #94a3b8;
  font-weight: 300;
  flex-shrink: 0;
  line-height: 1;
  transition: color 0.2s ease;
}

.faq-item.active .plus {
  color: #004aad;
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  font-size: 0.84rem;
  color: #64748b;
  line-height: 1.65;
  padding-right: 28px;
  transition: max-height 0.35s ease, margin-top 0.35s ease, opacity 0.3s ease;
  opacity: 0;
}

.faq-item.active .faq-a {
  max-height: 220px;
  margin-top: 10px;
  opacity: 1;
}

.faq-action {
  text-align: center;
}

.faq-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #004aad;
  color: #fff;
  text-decoration: none;
  padding: 11px 26px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: background 0.25s ease;
}

.faq-btn:hover {
  background: #003366;
}

.faq-btn svg {
  width: 16px;
  height: 16px;
}

/* --- Bottom Grid Responsive --- */
@media (max-width: 1280px) {

  .top-row,
  .bottom-row {
    flex-direction: column;
  }

  .price-box.featured {
    transform: scale(1);
  }

  .testi-card {
    flex: 0 0 calc(50% - 6px);
  }
}

@media (max-width: 768px) {
  .bottom-grid-section {
    padding: 40px 0;
  }

  .why-card,
  .pricing-card,
  .testi-section,
  .faq-section {
    padding: 24px 20px;
  }

  .pricing-grid,
  .why-content {
    flex-direction: column;
  }

  .why-list {
    grid-template-columns: 1fr;
  }

  .why-shield {
    display: flex;
    justify-content: center;
  }

  .pricing-grid {
    flex-direction: column;
  }

  .price-box {
    width: 100%;
  }

  .testi-card {
    flex: 0 0 100%;
  }
}

/* =========================================
   DIGITIZE CTA SECTION
   ========================================= */
.digitize-cta-section {
  padding: 60px 0 80px;
  background: #fdfdfd;
}

.digitize-cta-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

.digitize-cta-banner {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  align-items: center;
  gap: 32px;
  padding: 40px 48px;
  border-radius: 24px;
  background: linear-gradient(105deg, #1545a0 0%, #1a6b5c 48%, #2db84d 100%);
  overflow: hidden;
  min-height: 220px;
}

/* Illustration */
.digitize-cta-illustration {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.digitize-cta-illustration svg {
  width: 100%;
  max-width: 220px;
  height: auto;
}

/* Center Content */
.digitize-cta-content {
  text-align: left;
}

.digitize-cta-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 12px;
}

.digitize-cta-desc {
  font-size: clamp(0.85rem, 1.2vw, 0.95rem);
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.6;
  margin-bottom: 24px;
  max-width: 420px;
}

.digitize-cta-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.digitize-btn-primary,
.digitize-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.digitize-btn-primary svg,
.digitize-btn-outline svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.digitize-btn-primary {
  background: #fff;
  color: #1545a0;
}

.digitize-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.digitize-btn-outline {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
}

.digitize-btn-outline:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}

/* Benefits Flow */
.digitize-cta-benefits {
  display: flex;
  justify-content: center;
  align-items: center;
}

.benefit-flow {
  position: relative;
  width: 200px;
  height: 130px;
}

.benefit-item {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.benefit-save {
  top: 0;
  left: 0;
}

.benefit-paperless {
  top: 0;
  right: 0;
}

.benefit-impact {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.benefit-icon-circle {
  width: 52px;
  height: 52px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.benefit-icon-circle svg {
  width: 32px;
  height: 32px;
}

.benefit-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}

.benefit-arrows {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* --- Digitize CTA Responsive --- */
@media (max-width: 1100px) {
  .digitize-cta-banner {
    grid-template-columns: 1fr 1.6fr;
    gap: 28px;
    padding: 36px 36px;
  }

  .digitize-cta-benefits {
    grid-column: 1 / -1;
    margin-top: 8px;
  }

  .benefit-flow {
    width: 280px;
    height: 120px;
  }
}

@media (max-width: 768px) {
  .digitize-cta-section {
    padding: 40px 0 60px;
  }

  .digitize-cta-banner {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 32px 24px;
    gap: 24px;
  }

  .digitize-cta-illustration svg {
    max-width: 180px;
  }

  .digitize-cta-content {
    text-align: center;
  }

  .digitize-cta-desc {
    margin-left: auto;
    margin-right: auto;
  }

  .digitize-cta-btns {
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .digitize-btn-primary,
  .digitize-btn-outline {
    width: 100%;
    max-width: 260px;
    justify-content: center;
  }

  .benefit-flow {
    width: 100%;
    max-width: 300px;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    position: static;
  }

  .benefit-item {
    position: static;
    transform: none;
  }

  .benefit-arrows {
    display: none;
  }
}

@media (max-width: 480px) {
  .digitize-cta-banner {
    padding: 28px 18px;
    border-radius: 18px;
  }

  .benefit-flow {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
}

/* =========================================
   DOCUMENTS YOU CAN GENERATE
   ========================================= */
.pricing-hero {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0) 56%, rgba(234, 248, 255, 0.95) 56%),
    #fff;
  padding: 54px 0 58px;
}

.pricing-hero-wrap {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
  align-items: center;
  gap: 42px;
}

.pricing-hero-content {
  position: relative;
  z-index: 2;
}

.pricing-hero-title {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-size: 48px;
  line-height: 1.18;
  font-weight: 700;
  color: #101828;
}

.pricing-hero-title span {
  color: #15933e;
}

.pricing-hero-title strong {
  color: #004aad;
  font-weight: 700;
}

.pricing-hero-text {
  max-width: 640px;
  margin: 24px 0 28px;
  color: #28364f;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.85;
}

.pricing-hero-points {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 32px;
  margin-top: 60px;
  max-width: 600px;
}

.pricing-hero-point {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  color: #26344d;
  font-size: 0.86rem;
  font-weight: 700;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid #e3e8f2;
  transition: all 0.3s ease;
}

.pricing-hero-point:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(88, 65, 189, 0.15);
  border-color: #5841bd;
}

.pricing-hero-point svg {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  fill: none;
  stroke: #5841bd;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pricing-hero-visual {
  position: relative;
  min-height: 282px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 92px 30px 0;
}

.pricing-dashboard {
  position: relative;
  width: min(100%, 570px);
  border: 1px solid #d7e2f5;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 36px rgba(24, 56, 118, 0.15);
  overflow: hidden;
  z-index: 2;
}

.pricing-dashboard-bar {
  height: 24px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  background: linear-gradient(90deg, #003bb1, #055eea);
}

.pricing-dashboard-bar span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.78);
}

.pricing-dashboard-body {
  min-height: 230px;
  display: grid;
  grid-template-columns: 54px 1fr;
  background: #f8fbff;
}

.pricing-dashboard-sidebar {
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-right: 1px solid #e7edf7;
  background: #fff;
}

.pricing-dashboard-sidebar span {
  width: 22px;
  height: 6px;
  border-radius: 6px;
  background: #dbe5f5;
}

.pricing-dashboard-main {
  padding: 18px 18px 20px;
}

.pricing-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.pricing-stat-row span,
.pricing-mini-grid span {
  min-height: 34px;
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(0, 74, 173, 0.16), transparent 62%),
    #fff;
  border: 1px solid #e4ebf7;
}

.pricing-chart-card {
  min-height: 110px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 16px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e4ebf7;
}

.pricing-bars {
  height: 80px;
  display: flex;
  align-items: end;
  gap: 8px;
  border-bottom: 1px solid #dce6f4;
}

.pricing-bars span {
  width: 12px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #27b35a, #004aad);
}

.pricing-line-chart {
  min-height: 80px;
  background:
    linear-gradient(145deg, transparent 45%, rgba(39, 179, 90, 0.28) 46%, rgba(39, 179, 90, 0.28) 50%, transparent 51%),
    linear-gradient(25deg, transparent 52%, rgba(0, 74, 173, 0.3) 53%, rgba(0, 74, 173, 0.3) 57%, transparent 58%),
    repeating-linear-gradient(0deg, transparent 0 19px, #eef3fa 20px),
    #fff;
  border-radius: 6px;
}

.pricing-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}

.pricing-ngo-badge {
  position: absolute;
  right: 18px;
  top: 54px;
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 30px rgba(0, 74, 173, 0.14);
  z-index: 3;
}

.pricing-ngo-badge svg {
  width: 94px;
  height: 94px;
}

.pricing-leaves {
  position: absolute;
  right: 92px;
  bottom: 16px;
  width: 72px;
  height: 118px;
  z-index: 1;
  border-left: 4px solid #71bd69;
  transform: rotate(12deg);
  transform-origin: bottom center;
}

.pricing-leaves span {
  position: absolute;
  width: 34px;
  height: 18px;
  border-radius: 100% 0 100% 0;
  background: #8dd986;
  opacity: 0.82;
}

.pricing-leaves span:nth-child(1) {
  left: 4px;
  top: 18px;
  transform: rotate(-36deg);
}

.pricing-leaves span:nth-child(2) {
  left: -34px;
  top: 44px;
  transform: rotate(210deg);
}

.pricing-leaves span:nth-child(3) {
  left: 0;
  top: 70px;
  transform: rotate(-28deg);
}

.pricing-leaves span:nth-child(4) {
  left: -30px;
  top: 92px;
  transform: rotate(205deg);
}

/* ── Tablet landscape (≤1100px) ── */
@media (max-width: 1100px) {
  .pricing-hero-wrap {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .pricing-hero-title {
    font-size: 40px;
  }

  .pricing-hero-visual {
    justify-content: center;
    padding: 10px 80px 24px 0;
    min-height: 260px;
  }

  .pricing-hero-points {
    gap: 16px 24px;
    margin-top: 32px;
    max-width: 100%;
  }

  .pricing-hero-point {
    font-size: 0.82rem;
    padding: 10px 14px;
  }
}

/* ── Tablet portrait (≤768px) ── */
@media (max-width: 768px) {
  .pricing-hero {
    padding: 40px 0 48px;
    background: #fff;
  }

  .pricing-hero-wrap {
    padding: 0 20px;
    gap: 28px;
  }

  .pricing-hero-title {
    font-size: 32px;
    line-height: 1.25;
  }

  .pricing-hero-text {
    font-size: 0.93rem;
    margin: 16px 0 20px;
    line-height: 1.75;
    max-width: 100%;
  }

  /* 2×2 grid for the 4 points */
  .pricing-hero-points {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 24px;
  }

  .pricing-hero-point {
    padding: 10px 14px;
    background: #f7faff;
    font-size: 0.82rem;
    gap: 8px;
  }

  min-height: unset;
}

.pricing-hero-point:first-child {
  padding-left: 14px;
}

.pricing-hero-point:last-child {
  border: 1px solid #e3e8f2;
}

.pricing-hero-point svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

/* Visual section */
.pricing-hero-visual {
  padding: 0 68px 20px 0;
  min-height: 220px;
  justify-content: center;
}

.pricing-dashboard-body {
  min-height: 190px;
  grid-template-columns: 42px 1fr;
}

.pricing-dashboard-sidebar {
  padding: 14px 9px;
}

.pricing-dashboard-main {
  padding: 14px;
}

.pricing-stat-row {
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.pricing-chart-card {
  grid-template-columns: 1fr;
  gap: 10px;
}

.pricing-line-chart {
  display: none;
}

.pricing-ngo-badge {
  right: 4px;
  top: 38px;
  width: 88px;
  height: 88px;
  border-radius: 12px;
}

.pricing-ngo-badge svg {
  width: 62px;
  height: 62px;
}

.pricing-leaves {
  right: 44px;
  bottom: 12px;
}
}

/* ── Mobile (≤480px) ── */
@media (max-width: 480px) {
  .pricing-hero {
    padding: 32px 0 40px;
  }

  .pricing-hero-wrap {
    padding: 0 16px;
    gap: 24px;
  }

  .pricing-hero-title {
    font-size: 26px;
    line-height: 1.3;
  }

  .pricing-hero-text {
    font-size: 0.88rem;
    margin: 14px 0 18px;
  }

  .pricing-hero-points {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 20px;
  }

  .pricing-hero-point {
    padding: 9px 12px;
    font-size: 0.78rem;
    gap: 7px;
    border-radius: 8px;
  }

  .pricing-hero-point svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
  }

  .pricing-hero-visual {
    padding: 0;
    min-height: 200px;
    justify-content: center;
  }

  .pricing-dashboard {
    width: 100%;
  }

  .pricing-dashboard-body {
    grid-template-columns: 36px 1fr;
    min-height: 170px;
  }

  .pricing-dashboard-sidebar {
    padding: 12px 8px;
    gap: 10px;
  }

  .pricing-dashboard-main {
    padding: 12px;
  }

  .pricing-stat-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    margin-bottom: 10px;
  }

  .pricing-stat-row span,
  .pricing-mini-grid span {
    min-height: 26px;
  }

  .pricing-mini-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 10px;
  }

  .pricing-ngo-badge,
  .pricing-leaves {
    display: none;
  }
}

/* =========================================
   PRICING PLANS SECTION
   ========================================= */

.plans-section {
  padding: 64px 0 72px;
  background: #f7faff;
}

.plans-wrapper {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Heading row with side lines */
.plans-heading-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 48px;
}

.plans-heading-line {
  flex: 1;
  max-width: 120px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #27b35a);
  border-radius: 2px;
}

.plans-heading-line:last-child {
  background: linear-gradient(90deg, #27b35a, transparent);
}

.plans-heading {
  font-family: 'Poppins', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: #101828;
  text-align: center;
  margin: 0;
  white-space: nowrap;
}

/* Grid */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: start;
}

/* Base card */
.plan-card {
  background: #fff;
  border: 1.5px solid #e3eaf7;
  border-radius: 20px;
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  transition: box-shadow 0.22s ease, transform 0.22s ease;
}

.plan-card:hover {
  box-shadow: 0 12px 40px rgba(0, 74, 173, 0.12);
  transform: translateY(-4px);
}

/* Featured (Professional) card */
.plan-featured {
  border-color: #27b35a;
  border-width: 2px;
  background: #f4fbf6;
  padding-top: 20px;
}

/* Most Popular badge */
.plan-popular-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: #27b35a;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 18px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: 0.3px;
}

/* Plan top area */
.plan-top {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.plan-name {
  font-family: 'Poppins', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0;
}

.plan-name--blue {
  color: #004aad;
}

.plan-name--green {
  color: #18a34a;
}

.plan-name--purple {
  color: #6b3fa0;
}

.plan-tagline {
  font-size: 0.82rem;
  color: #64748b;
  margin: 0;
  font-weight: 400;
}

/* Icon circle */
.plan-icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 12px auto 8px;
}

.plan-icon-wrap svg {
  width: 30px;
  height: 30px;
}

.plan-icon-wrap--blue {
  background: #e8f0fe;
  color: #004aad;
}

.plan-icon-wrap--green {
  background: #18a34a;
  color: #fff;
}

.plan-icon-wrap--purple {
  background: #ede8f9;
  color: #6b3fa0;
}

/* Price */
.plan-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  color: #004aad;
  margin-top: 4px;
}

.plan-price--green {
  color: #18a34a;
}

.plan-price--purple {
  color: #6b3fa0;
}

.plan-currency {
  font-size: 1.4rem;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
}

.plan-amount {
  font-size: 2.6rem;
  font-weight: 800;
  font-family: 'Poppins', sans-serif;
  line-height: 1;
}

.plan-amount--custom {
  font-size: 1.6rem;
  font-weight: 800;
  color: #6b3fa0;
  line-height: 1.2;
}

.plan-period {
  font-size: 0.88rem;
  font-weight: 500;
  color: #64748b;
  align-self: flex-end;
  padding-bottom: 6px;
}

.plan-billing {
  font-size: 0.78rem;
  color: #94a3b8;
  margin: 0;
  font-weight: 400;
}

/* Feature list */
.plan-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.plan-feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f0f5ff;
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 0.875rem;
  color: #26344d;
  font-weight: 500;
}

.plan-features--green .plan-feature-item {
  background: #e8f9ef;
}

.plan-feat-icon {
  display: grid;
  place-items: center;
  flex: 0 0 20px;
}

.plan-feat-icon svg {
  width: 20px;
  height: 20px;
  stroke: #004aad;
}

.plan-feat-icon--green svg {
  stroke: #18a34a;
}

.plan-feat-icon--purple svg {
  stroke: #6b3fa0;
}

.plan-feat-text strong {
  color: #004aad;
  font-weight: 700;
}

.plan-features--green .plan-feat-text strong {
  color: #18a34a;
}

.plan-enterprise .plan-feat-text strong {
  color: #6b3fa0;
}

/* CTA buttons */
.plan-btn {
  display: block;
  text-align: center;
  padding: 13px 24px;
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  margin-top: auto;
}

.plan-btn--outline {
  border: 2px solid #004aad;
  color: #004aad;
  background: transparent;
}

.plan-btn--outline:hover {
  background: #004aad;
  color: #fff;
}

.plan-btn--green {
  background: #18a34a;
  color: #fff;
  border: 2px solid #18a34a;
}

.plan-btn--green:hover {
  background: #146e33;
  border-color: #146e33;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .plans-grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin: 0 auto;
    gap: 32px;
  }

  .plans-heading {
    font-size: 1.35rem;
    white-space: normal;
    text-align: center;
  }

  .plans-heading-line {
    max-width: 60px;
  }
}

@media (max-width: 540px) {
  .plans-section {
    padding: 44px 0 52px;
  }

  .plans-wrapper {
    padding: 0 16px;
  }

  .plans-heading {
    font-size: 1.15rem;
  }

  .plans-heading-row {
    gap: 10px;
    margin-bottom: 36px;
  }

  .plan-card {
    padding: 28px 20px 24px;
  }

  .plan-amount {
    font-size: 2.1rem;
  }

  .plan-amount--custom {
    font-size: 1.35rem;
  }

  .plan-icon-wrap {
    width: 56px;
    height: 56px;
  }

  .plan-icon-wrap svg {
    width: 26px;
    height: 26px;
  }
}

/* =========================================
   COMPARE PLANS & FEATURES
   ========================================= */

.compare-section {
  padding: 64px 0 72px;
  background: #fff;
}

.compare-wrapper {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Heading row */
.compare-heading-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 40px;
}

.compare-heading-line {
  flex: 1;
  max-width: 100px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #27b35a);
  border-radius: 2px;
}

.compare-heading-line:last-child {
  background: linear-gradient(90deg, #27b35a, transparent);
}

.compare-heading {
  font-family: 'Poppins', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: #101828;
  margin: 0;
  white-space: nowrap;
  text-align: center;
}

/* Scrollable wrapper */
.compare-table-outer {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 16px;
  box-shadow: 0 4px 32px rgba(0, 74, 173, 0.09);
  border: 1.5px solid #e3eaf7;
}

/* Table */
.compare-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
}

/* Header */
.compare-table thead tr {
  background: transparent;
}

.compare-table thead th {
  padding: 16px 20px;
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
  white-space: nowrap;
  border-bottom: none;
}

.ct-feat-col {
  background: #004aad;
  color: #fff !important;
  text-align: left !important;
  border-radius: 14px 0 0 0;
  width: 34%;
}

.ct-starter-col {
  background: #004aad;
  color: #fff !important;
  width: 22%;
}

.ct-pro-col {
  background: #18a34a;
  color: #fff !important;
  width: 22%;
  position: relative;
}

.ct-ent-col {
  background: #5841bd;
  color: #fff !important;
  border-radius: 0 14px 0 0;
  width: 22%;
}

/* Most Popular badge inside header */
.ct-popular-badge {
  display: inline-block;
  background: #fff;
  color: #18a34a;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

/* Body rows */
.compare-table tbody tr {
  background: #fff;
  transition: background 0.15s;
}

.compare-table tbody tr:hover {
  background: #f5f8ff;
}

.ct-row-alt {
  background: #f9fbff !important;
}

.ct-row-alt:hover {
  background: #eef3ff !important;
}

/* Feature cell (left col) */
.ct-feat {
  padding: 13px 20px;
  color: #26344d;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  border-right: 1px solid #e8eef8;
  white-space: nowrap;
}

/* Value cells */
.ct-val {
  padding: 13px 20px;
  text-align: center;
  color: #26344d;
  font-weight: 500;
  border-right: 1px solid #e8eef8;
  vertical-align: middle;
}

.ct-val:last-child {
  border-right: none;
}

/* Pro column highlight */
.ct-val--pro {
  background: rgba(24, 163, 74, 0.05);
}

/* Enterprise column highlight */
.ct-val--ent {
  background: rgba(88, 65, 189, 0.04);
}

/* Icons */
.ct-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
}

.ct-icon svg {
  width: 18px;
  height: 18px;
}

.ct-icon--blue svg {
  stroke: #004aad;
}

/* Check marks */
.ct-check {
  font-size: 1rem;
  font-weight: 700;
}

.ct-check--blue {
  color: #004aad;
}

.ct-check--green {
  color: #18a34a;
}

/* Cross */
.ct-cross {
  color: #ef4444;
  font-size: 0.95rem;
  font-weight: 700;
}

/* Unlimited text */
.ct-unlimited--green {
  color: #18a34a;
  font-weight: 700;
}

.ct-unlimited--purple {
  color: #5841bd;
  font-weight: 700;
}

/* Inline labels (Basic, Advanced, Limited etc.) */
.ct-label {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 10px;
  display: inline-block;
  margin-left: 2px;
}

.ct-label--blue {
  background: #e8f0fe;
  color: #004aad;
}

.ct-label--green {
  background: #e8f9ef;
  color: #18a34a;
}

.ct-label--purple {
  background: #ede8f9;
  color: #5841bd;
}

/* Plain text labels (Standard, Priority, GB) */
.ct-label-plain {
  font-size: 0.82rem;
  font-weight: 600;
}

.ct-label-plain--blue {
  color: #004aad;
}

.ct-label-plain--green {
  color: #18a34a;
}

.ct-label-plain--purple {
  color: #5841bd;
}

/* Bottom border for last row */
.compare-table tbody tr:last-child td {
  border-bottom: none;
}

.compare-table tbody tr:last-child td:first-child {
  border-radius: 0 0 0 14px;
}

.compare-table tbody tr:last-child td:last-child {
  border-radius: 0 0 14px 0;
}

/* Row borders */
.compare-table tbody tr td {
  border-bottom: 1px solid #e8eef8;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .compare-heading {
    font-size: 1.35rem;
    white-space: normal;
    text-align: center;
  }

  .compare-heading-line {
    max-width: 60px;
  }
}

@media (max-width: 640px) {
  .compare-section {
    padding: 44px 0 52px;
  }

  .compare-wrapper {
    padding: 0 12px;
  }

  .compare-heading {
    font-size: 1.1rem;
  }

  .compare-heading-row {
    gap: 10px;
    margin-bottom: 28px;
  }

  .compare-table {
    font-size: 0.8rem;
  }

  .ct-feat {
    padding: 11px 12px;
    gap: 7px;
  }

  .ct-val {
    padding: 11px 10px;
  }

  .compare-table thead th {
    padding: 13px 10px;
    font-size: 0.8rem;
  }

  .ct-icon svg {
    width: 15px;
    height: 15px;
  }
}

/* =========================================
   FAQ SECTION
   ========================================= */

.faq-section {
  padding: 58px 19px 64px;
  background: #f7faff;
}

.faq-wrapper {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Heading row */
.faq-heading-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 44px;
}

.faq-heading-line {
  flex: 1;
  max-width: 100px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #27b35a);
  border-radius: 2px;
}

.faq-heading-line:last-child {
  background: linear-gradient(90deg, #27b35a, transparent);
}

.faq-heading {
  font-family: 'Poppins', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: #101828;
  margin: 0;
  white-space: nowrap;
  text-align: center;
}

/* 2-column grid */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 28px;
  align-items: start;
}

.faq-col {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Individual FAQ item */
.faq-item {
  border: 1.5px solid #e3eaf7;
  border-radius: 12px;
  margin-bottom: 12px;
  background: #fff;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.faq-item:hover {
  box-shadow: 0 4px 18px rgba(0, 74, 173, 0.08);
}

.faq-item.faq-open {
  border-color: #004aad;
  box-shadow: 0 4px 20px rgba(0, 74, 173, 0.1);
}

/* Question button */
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0px 20px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: #26344d;
  line-height: 1.4;
  transition: color 0.2s;
}

.faq-question:hover {
  color: #004aad;
}

.faq-item.faq-open .faq-question {
  color: #004aad;
}

/* +/× icon */
.faq-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #004aad;
  color: #004aad;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  transition: transform 0.25s ease, background 0.2s, color 0.2s;
  flex-shrink: 0;
}

.faq-item.faq-open .faq-icon {
  transform: rotate(45deg);
  background: #004aad;
  color: #fff;
}

/* Answer panel */
.faq-answer {
  padding: 0 20px 16px;
  overflow: hidden;
}

.faq-answer p {
  margin: 0;
  font-size: 0.875rem;
  color: #4a5568;
  line-height: 1.75;
  font-weight: 400;
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .faq-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .faq-heading {
    font-size: 1.35rem;
    white-space: normal;
  }

  .faq-heading-line {
    max-width: 60px;
  }
}

@media (max-width: 540px) {
  .faq-section {
    padding: 44px 0 52px;
  }

  .faq-wrapper {
    padding: 0 16px;
  }

  .faq-heading {
    font-size: 1.15rem;
  }

  .faq-heading-row {
    gap: 10px;
    margin-bottom: 30px;
  }

  .faq-question {
    padding: 14px 16px;
    font-size: 0.85rem;
  }

  .faq-answer {
    padding: 0 16px 14px;
  }

  .faq-answer p {
    font-size: 0.83rem;
  }

  .faq-icon {
    width: 22px;
    height: 22px;
    font-size: 1rem;
    flex: 0 0 22px;
  }
}

/* =========================================
   CTA BANNER
   ========================================= */

.cta-banner {
  padding: 0 24px;
  background: transparent;
  margin-bottom: 30px;
}

.cta-banner-inner {
  max-width: 1140px;
  margin: 0 auto;
  background: linear-gradient(100deg, #004aad 0%, #0d7fe9 42%, #18a34a 100%);
  border-radius: 20px;
  padding: 28px 40px 28px 0;
  display: grid;
  grid-template-columns: 280px 1fr auto;
  align-items: center;
  gap: 24px;
  overflow: hidden;
  position: relative;
}

/* Subtle glow overlay */
.cta-banner-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 60% 50%, rgba(255, 255, 255, 0.07) 0%, transparent 70%);
  pointer-events: none;
}

/* Illustration */
.cta-illustration {
  width: 280px;
  flex-shrink: 0;
  align-self: flex-end;
  line-height: 0;
}

.cta-illustration svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Text + buttons */
.cta-content {
  position: relative;
  z-index: 1;
}

.cta-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.55rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.25;
}

.cta-title span {
  color: #1cd65d;
}

.cta-text {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 20px;
  line-height: 1.65;
  max-width: 380px;
}

.cta-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.cta-btn {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
  white-space: nowrap;
}

.cta-btn:hover {
  transform: translateY(-2px);
}

.cta-btn--white {
  background: #fff;
  color: #004aad;
  border: 2px solid #fff;
}

.cta-btn--white:hover {
  background: #e8f0fe;
  border-color: #e8f0fe;
}

.cta-btn--outline {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.7);
}

.cta-btn--outline:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

/* Trust badges */
.cta-badges {
  display: flex;
  flex-direction: row;
  gap: 18px;
  position: relative;
  z-index: 1;
  padding-right: 12px;
}

.cta-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.cta-badge-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.1);
}

.cta-badge-icon svg {
  width: 20px;
  height: 20px;
  stroke: #fff;
}

.cta-badge-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  white-space: nowrap;
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .cta-banner-inner {
    grid-template-columns: 200px 1fr auto;
    padding: 24px 28px 24px 0;
    gap: 18px;
  }

  .cta-illustration {
    width: 200px;
  }

  .cta-title {
    font-size: 1.3rem;
  }
}

@media (max-width: 768px) {
  .cta-banner {
    padding: 0 16px;
  }

  .cta-banner-inner {
    grid-template-columns: 1fr;
    padding: 28px 24px 28px;
    text-align: center;
    gap: 20px;
    border-radius: 16px;
  }

  .cta-illustration {
    width: 220px;
    margin: 0 auto;
    order: -1;
  }

  .cta-text {
    max-width: 100%;
    margin-bottom: 16px;
  }

  .cta-btns {
    justify-content: center;
  }

  .cta-badges {
    flex-direction: row;
    justify-content: center;
    gap: 28px;
    padding-right: 0;
  }
}

@media (max-width: 480px) {
  .cta-banner-inner {
    padding: 24px 18px;
    border-radius: 14px;
  }

  .cta-title {
    font-size: 1.15rem;
  }

  .cta-text {
    font-size: 0.83rem;
  }

  .cta-btn {
    padding: 9px 18px;
    font-size: 0.82rem;
  }

  .cta-badges {
    gap: 18px;
  }

  .cta-badge-icon {
    width: 36px;
    height: 36px;
  }

  .cta-badge-icon svg {
    width: 17px;
    height: 17px;
  }

  .cta-badge-label {
    font-size: 0.68rem;
  }
}

/* =========================================
   DOCUMENTS YOU CAN GENERATE
   ========================================= */
.gen-docs-section {
  padding: 70px 0 80px;
  background: #fff;
}

.gen-docs-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

.gen-docs-heading {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: 700;
  color: #003399;
  text-align: center;
  margin-bottom: 48px;
}

.gen-docs-slider-outer {
  overflow: hidden;
  margin-bottom: 32px;
}

.gen-docs-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 8px 4px 12px;
}

.gen-docs-track::-webkit-scrollbar {
  display: none;
}

.gen-doc-card {
  flex: 0 0 calc((100% - 108px) / 7);
  min-width: 150px;
  cursor: pointer;
  scroll-snap-align: start;
  background: #fff;
  border-radius: 12px;
  padding: 14px 12px 16px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  border: 1px solid #f0f0f0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gen-doc-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.gen-doc-preview {
  background: #f8f9fb;
  border-radius: 8px;
  height: 155px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  overflow: hidden;
  border: 1px solid #eef1f5;
}

.gen-doc-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: #111827;
  text-align: center;
  line-height: 1.3;
}

/* Document Mockups */
.gen-mock {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ID Card */
.gen-mock-id {
  width: 72px;
  height: 108px;
  border-radius: 4px;
  border: 1px solid #dbeafe;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.gen-id-top {
  background: linear-gradient(135deg, #1a3a8f, #2563eb);
  padding: 5px 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.gen-id-logo {
  font-size: 5px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.3px;
}

.gen-id-type {
  font-size: 4px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
}

.gen-id-body {
  display: flex;
  gap: 5px;
  padding: 6px;
  flex: 1;
}

.gen-id-photo {
  width: 22px;
  height: 26px;
  background: linear-gradient(180deg, #fcd9b0, #e8b48a);
  border-radius: 2px;
  flex-shrink: 0;
}

.gen-id-info {
  flex: 1;
  padding-top: 2px;
}

.gen-id-name {
  font-size: 5px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 4px;
}

.gen-id-line {
  height: 2px;
  background: #e2e8f0;
  margin-bottom: 3px;
  border-radius: 1px;
}

.gen-id-line.short {
  width: 70%;
}

.gen-id-barcode {
  height: 10px;
  margin: 0 6px 5px;
  background: repeating-linear-gradient(90deg, #1e293b 0 1px, transparent 1px 3px);
  border-radius: 1px;
}

/* Volunteer Certificate */
.gen-mock-vol-cert {
  width: 100px;
  height: 72px;
  padding: 4px;
}

.gen-vcert-frame {
  width: 100%;
  height: 100%;
  border: 2px solid #d97706;
  border-radius: 2px;
  position: relative;
  padding: 6px;
  background: linear-gradient(135deg, #fffbeb, #fff);
}

.gen-vcert-frame::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid #fde68a;
  border-radius: 1px;
  pointer-events: none;
}

.gen-vcert-title {
  font-size: 6px;
  font-weight: 700;
  color: #92400e;
  text-align: center;
  margin-bottom: 6px;
  font-family: 'Poppins', sans-serif;
}

.gen-vcert-body {
  height: 28px;
  background: repeating-linear-gradient(#fef3c7 0 2px, transparent 2px 5px);
  margin-bottom: 4px;
}

.gen-vcert-seal {
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, #f59e0b, #d97706);
  border-radius: 50%;
  margin: 0 auto;
  border: 1px solid #b45309;
}

/* Membership Certificate */
.gen-mock-mem-cert {
  width: 100px;
  height: 72px;
  padding: 4px;
}

.gen-mcert-frame {
  width: 100%;
  height: 100%;
  border: 2px solid #2563eb;
  border-radius: 2px;
  position: relative;
  padding: 6px;
  background: linear-gradient(135deg, #eff6ff, #fff);
}

.gen-mcert-frame::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid #93c5fd;
  border-radius: 1px;
}

.gen-mcert-title {
  font-size: 6px;
  font-weight: 700;
  color: #1d4ed8;
  text-align: center;
  margin-bottom: 6px;
  font-family: 'Poppins', sans-serif;
}

.gen-mcert-body {
  height: 28px;
  background: repeating-linear-gradient(#dbeafe 0 2px, transparent 2px 5px);
  margin-bottom: 4px;
}

.gen-mcert-seal {
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, #3b82f6, #1d4ed8);
  border-radius: 50%;
  margin: 0 auto;
}

/* Receipt */
.gen-mock-receipt,
.gen-mock-80g {
  width: 68px;
  height: 100px;
  padding: 8px 7px;
  border: 1px solid #e2e8f0;
  border-radius: 2px;
  position: relative;
}

.gen-receipt-head {
  margin-bottom: 8px;
}

.gen-receipt-logo {
  width: 14px;
  height: 14px;
  background: #2563eb;
  border-radius: 50%;
  margin: 0 auto 4px;
}

.gen-receipt-logo.green {
  background: #16a34a;
}

.gen-receipt-title-line {
  height: 3px;
  background: #e2e8f0;
  border-radius: 2px;
  width: 80%;
  margin: 0 auto;
}

.gen-receipt-table {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gen-receipt-row {
  height: 3px;
  background: #f1f5f9;
  border-radius: 1px;
}

.gen-receipt-row.short {
  width: 60%;
}

.gen-receipt-footer {
  margin-top: 8px;
  height: 8px;
  border-top: 1px solid #e2e8f0;
}

.gen-80g-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 5px;
  font-weight: 800;
  color: #16a34a;
  background: #dcfce7;
  padding: 2px 4px;
  border-radius: 2px;
}

/* Letters */
.gen-mock-letter,
.gen-mock-offer {
  width: 62px;
  height: 100px;
  padding: 8px 7px;
  border: 1px solid #e2e8f0;
  border-radius: 2px;
}

.gen-letter-head {
  height: 4px;
  background: #64748b;
  width: 50%;
  margin-bottom: 8px;
  border-radius: 2px;
}

.gen-letter-head.blue {
  background: #2563eb;
}

.gen-letter-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.gen-letter-line {
  height: 2px;
  background: #e2e8f0;
  border-radius: 1px;
}

.gen-letter-line.short {
  width: 65%;
}

.gen-letter-sign {
  width: 24px;
  height: 3px;
  background: #94a3b8;
  border-radius: 1px;
  margin-top: auto;
}

/* Pagination Dots */
.gen-docs-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.gen-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d1d5db;
  cursor: pointer;
  transition: all 0.3s ease;
}

.gen-dot.active {
  background: #003399;
  transform: scale(1.1);
}

/* --- Gen Docs Responsive --- */
@media (max-width: 1200px) {
  .gen-doc-card {
    flex: 0 0 calc((100% - 54px) / 4);
    min-width: 160px;
  }
}

@media (max-width: 900px) {
  .gen-doc-card {
    flex: 0 0 calc((100% - 36px) / 3);
    min-width: 170px;
  }
}

@media (max-width: 640px) {
  .gen-docs-section {
    padding: 50px 0 60px;
  }

  .gen-docs-heading {
    margin-bottom: 32px;
  }

  .gen-doc-card {
    flex: 0 0 calc(50% - 9px);
    min-width: 145px;
  }

  .gen-doc-preview {
    height: 130px;
  }
}

@media (max-width: 420px) {
  .gen-doc-card {
    flex: 0 0 78%;
    min-width: 0;
  }
}

/* =========================================
   FOOTER
   ========================================= */
.site-footer {
  background: linear-gradient(180deg, #080f2a 0%, #0c1833 30%, #0f1d4a 70%, #080f2a 100%);
  position: relative;
  overflow: hidden;
}

.site-footer::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -150px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(24, 163, 74, 0.10) 0%, transparent 70%);
  pointer-events: none;
}

.site-footer::after {
  content: '';
  position: absolute;
  bottom: -120px;
  left: -100px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 74, 173, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

/* --- Footer Top CTA Banner --- */
.footer-cta {
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg, rgba(24, 163, 74, 0.12) 0%, rgba(0, 74, 173, 0.12) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 32px 0;
}

.footer-cta-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-cta-left {
  display: flex;
  align-items: center;
  gap: 18px;
}

.footer-cta-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, #18a34a 0%, #15803d 100%);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 4px 20px rgba(24, 163, 74, 0.35);
}

.footer-cta-icon svg {
  width: 24px;
  height: 24px;
  stroke: #fff;
}

.footer-cta-text h4 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 2px;
  line-height: 1.3;
}

.footer-cta-text p {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

.footer-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: linear-gradient(135deg, #18a34a 0%, #15803d 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(24, 163, 74, 0.3);
  white-space: nowrap;
}

.footer-cta-btn svg {
  width: 16px;
  height: 16px;
  stroke: #fff;
  transition: transform 0.3s ease;
}

.footer-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(24, 163, 74, 0.45);
}

.footer-cta-btn:hover svg {
  transform: translateX(4px);
}

/* --- Main Footer --- */
.footer-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 60px 40px 0;
  position: relative;
  z-index: 1;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1.4fr;
  gap: 40px 32px;
  padding-bottom: 48px;
}

.footer-col {
  padding: 0 16px;
}

.footer-col:first-child {
  padding-left: 0;
  text-align: center;
}

.footer-col:last-child {
  padding-right: 0;
}

/* Brand */
.footer-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  text-decoration: none;
  color: #fff;
}

.footer-logo img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: contain;
  flex-shrink: 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 0 0 2px rgba(24, 163, 74, 0.2);
}

.footer-logo:hover img {
  transform: scale(1.05);
  box-shadow: 0 0 0 3px rgba(24, 163, 74, 0.4), 0 0 20px rgba(24, 163, 74, 0.2);
}

.footer-logo-text {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  letter-spacing: 0.5px;
}

.footer-desc {
  font-size: 0.85rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 auto 24px;
  max-width: 320px;
}

/* Social icons */
.footer-socials {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.footer-socials a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.60);
  transition: all 0.3s ease;
}

.footer-socials a:hover {
  background: linear-gradient(135deg, #18a34a 0%, #15803d 100%);
  border-color: transparent;
  color: #fff;
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(24, 163, 74, 0.4);
}

.footer-socials svg {
  width: 18px;
  height: 18px;
}

/* Headings */
.footer-heading {
  font-family: 'Poppins', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 22px;
  color: #fff;
  letter-spacing: 0.3px;
  position: relative;
  padding-bottom: 14px;
}

.footer-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 3px;
  background: linear-gradient(90deg, #18a34a, #22c55e);
  border-radius: 2px;
}

/* Links */
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links a {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.50);
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  text-decoration: none;
  position: relative;
}

.footer-links a::before {
  content: '';
  width: 0;
  height: 2px;
  background: #18a34a;
  border-radius: 1px;
  transition: width 0.3s ease;
  flex-shrink: 0;
}

.footer-links a:hover {
  color: #22c55e;
  padding-left: 6px;
}

.footer-links a:hover::before {
  width: 16px;
}

/* Contact */
.footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.footer-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.83rem;
  color: rgba(255, 255, 255, 0.50);
  line-height: 1.65;
  transition: color 0.3s ease;
}

.footer-contact-list svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  color: #22c55e;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.footer-contact-list li:hover svg {
  opacity: 1;
}

.footer-contact-list a {
  color: rgba(255, 255, 255, 0.50);
  transition: color 0.3s ease;
  text-decoration: none;
}

.footer-contact-list a:hover {
  color: #22c55e;
}

.footer-contact-list li:hover {
  color: rgba(255, 255, 255, 0.85);
}

/* --- Newsletter (inside Contact col) --- */
.footer-newsletter {
  margin-top: 24px;
}

.footer-newsletter-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 10px;
  display: block;
}

.footer-newsletter-form {
  display: flex;
  gap: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.footer-newsletter-form:focus-within {
  border-color: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

.footer-newsletter-form input {
  flex: 1;
  padding: 12px 16px;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 0.85rem;
  font-family: 'Inter', sans-serif;
  min-width: 0;
}

.footer-newsletter-form input::placeholder {
  color: rgba(255, 255, 255, 0.30);
}

.footer-newsletter-form button {
  padding: 12px 20px;
  background: linear-gradient(135deg, #18a34a 0%, #15803d 100%);
  border: none;
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.3s ease;
  flex-shrink: 0;
}

.footer-newsletter-form button:hover {
  background: linear-gradient(135deg, #15803d 0%, #18a34a 100%);
}

.footer-newsletter-form button svg {
  width: 18px;
  height: 18px;
  stroke: #fff;
}

/* Bottom Bar */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 24px 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-copyright {
  font-size: 0.80rem;
  color: rgba(255, 255, 255, 0.35);
  margin: 0;
}

.footer-bottom-links {
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer-bottom-links a {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.35);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-bottom-links a:hover {
  color: #22c55e;
}

.footer-bottom-divider {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.12);
}

/* Scroll to Top */
.scroll-top-btn {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #2db84d;
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(45, 184, 77, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all 0.3s ease;
  z-index: 999;
}

.scroll-top-btn.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-top-btn:hover {
  background: #26a344;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(45, 184, 77, 0.55);
}

.scroll-top-btn svg {
  width: 22px;
  height: 22px;
}

/* --- Footer Responsive --- */
@media (max-width: 1200px) {
  .footer-wrapper {
    padding: 48px 32px 0;
  }

  .footer-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 40px 24px;
  }

  .footer-col:first-child {
    grid-column: 1 / -1;
    max-width: 500px;
    justify-self: center;
  }

  .footer-col:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .footer-cta-inner {
    padding: 0 24px;
    flex-direction: column;
    text-align: center;
  }

  .footer-cta-left {
    flex-direction: column;
  }

  .footer-wrapper {
    padding: 44px 24px 0;
  }

  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 36px 24px;
  }

  .footer-col:first-child {
    grid-column: 1 / -1;
    max-width: 480px;
    justify-self: center;
  }

  .footer-col:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 24px;
    padding-bottom: 36px;
  }

  .footer-col:first-child {
    grid-column: 1 / -1;
    max-width: none;
  }

  .footer-col:last-child {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

  .footer-cta {
    padding: 24px 0;
  }
}

@media (max-width: 480px) {
  .footer-wrapper {
    padding: 36px 16px 0;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer-col {
    padding: 0;
  }

  .footer-logo img {
    width: 40px;
    height: 40px;
  }

  .footer-logo-text {
    font-size: 12px;
  }

  .footer-cta-text h4 {
    font-size: 0.9rem;
  }

  .footer-cta-btn {
    padding: 10px 22px;
    font-size: 0.82rem;
  }

  .footer-heading::after {
    left: 0;
  }

  .footer-socials a {
    width: 38px;
    height: 38px;
  }

  .scroll-top-btn {
    bottom: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
  }
}

.docs-heading-blue {
  color: #003399;
  font-weight: bold;
}


/* =========================================
   CONTACT US — HERO SECTION
   ========================================= */

.contact-hero {
  position: relative;
  background: linear-gradient(135deg, #0a1f6e 0%, #0d3ea6 45%, #0a2d8a 100%);
  overflow: hidden;
  padding: 60px 0 56px;
  min-height: 260px;
  display: flex;
  align-items: center;
}

/* Circuit SVG background */
.contact-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.contact-hero-circuit {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Inner layout */
.contact-hero-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 48px;
}

/* ── Left content ── */
.contact-hero-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.contact-hero-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #27b35a;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.contact-hero-title {
  font-family: 'Poppins', sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.22;
  margin: 0 0 16px;
}

.contact-hero-text {
  font-size: 0.93rem;
  color: rgba(255, 255, 255, 0.80);
  line-height: 1.75;
  max-width: 480px;
  margin: 0 0 28px;
}

/* Trust badges row */
.contact-hero-badges {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

.contact-hero-badge {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chb-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.chb-icon svg {
  width: 18px;
  height: 18px;
  stroke: rgba(255, 255, 255, 0.85);
}

.chb-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chb-text strong {
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.chb-text span {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.3;
}

/* ── Right visual ── */
.contact-hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-hero-ring {
  position: relative;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  border: 2px solid rgba(255, 255, 255, 0.22);
  display: grid;
  place-items: center;
  box-shadow:
    0 0 0 12px rgba(255, 255, 255, 0.05),
    0 0 48px rgba(41, 182, 246, 0.18);
}

.contact-hero-logo-img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* circuit connector SVG */
.contact-hero-connectors {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 260px;
  height: 260px;
  pointer-events: none;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .contact-hero-title {
    font-size: 1.9rem;
  }

  .contact-hero-wrap {
    gap: 32px;
    padding: 0 28px;
  }

  .contact-hero-ring {
    width: 155px;
    height: 155px;
  }

  .contact-hero-logo-img {
    width: 122px;
    height: 122px;
  }

  .contact-hero-connectors {
    width: 210px;
    height: 210px;
  }
}

@media (max-width: 680px) {
  .contact-hero {
    padding: 44px 0 40px;
  }

  .contact-hero-wrap {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 0 20px;
    text-align: center;
  }

  .contact-hero-visual {
    order: -1;
  }

  .contact-hero-text {
    margin: 0 auto 24px;
  }

  .contact-hero-badges {
    justify-content: center;
  }

  .contact-hero-ring {
    width: 140px;
    height: 140px;
  }

  .contact-hero-logo-img {
    width: 110px;
    height: 110px;
  }

  .contact-hero-connectors {
    width: 190px;
    height: 190px;
  }
}

@media (max-width: 420px) {
  .contact-hero-title {
    font-size: 1.5rem;
  }

  .contact-hero-badges {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  .contact-hero-badge {
    justify-content: center;
  }
}


/* =========================================
   CONTACT FORM & OFFICE DETAILS
   ========================================= */

.contact-main {
  padding: 64px 0 72px;
  background: #f7faff;
}

.contact-main-wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 28px;
  align-items: start;
}

/* ── Shared card base ── */
.contact-form-card,
.contact-office-card {
  background: #fff;
  border: 1.5px solid #e3eaf7;
  border-radius: 18px;
  padding: 36px 32px;
  box-shadow: 0 4px 24px rgba(0, 74, 173, 0.06);
}

/* ── Form card header ── */
.contact-form-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 28px;
}

.contact-form-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #e8f0fe;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.contact-form-icon svg {
  width: 22px;
  height: 22px;
  stroke: #004aad;
}

.contact-form-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: #101828;
  margin: 0 0 4px;
  line-height: 1.2;
}

.contact-form-title span {
  color: #18a34a;
}

.contact-form-sub {
  font-size: 0.82rem;
  color: #64748b;
  margin: 0;
}

/* ── Form fields ── */
.cf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.cf-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cf-field--full {
  grid-column: 1 / -1;
}

.cf-field label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #344054;
}

.cf-required {
  color: #ef4444;
  margin-left: 2px;
}

.cf-field input,
.cf-field textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid #d0d9ee;
  border-radius: 8px;
  font-size: 0.875rem;
  font-family: 'Inter', sans-serif;
  color: #26344d;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  resize: vertical;
}

.cf-field input::placeholder,
.cf-field textarea::placeholder {
  color: #aab4cc;
}

.cf-field input:focus,
.cf-field textarea:focus {
  border-color: #004aad;
  box-shadow: 0 0 0 3px rgba(0, 74, 173, 0.1);
}

/* Select */
.cf-select-wrap {
  position: relative;
}

.cf-select-wrap select {
  width: 100%;
  padding: 11px 40px 11px 14px;
  border: 1.5px solid #d0d9ee;
  border-radius: 8px;
  font-size: 0.875rem;
  font-family: 'Inter', sans-serif;
  color: #26344d;
  background: #fff;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.cf-select-wrap select:focus {
  border-color: #004aad;
  box-shadow: 0 0 0 3px rgba(0, 74, 173, 0.1);
}

.cf-select-wrap select option[value=""] {
  color: #aab4cc;
}

.cf-select-arrow {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  display: flex;
}

.cf-select-arrow svg {
  width: 16px;
  height: 16px;
  stroke: #64748b;
}

/* Submit button */
.cf-submit {
  width: 100%;
  margin-top: 4px;
  padding: 14px 24px;
  background: linear-gradient(90deg, #004aad 0%, #18a34a 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: opacity 0.2s, transform 0.15s;
}

.cf-submit svg {
  width: 18px;
  height: 18px;
  stroke: #fff;
}

.cf-submit:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.cf-submit:active {
  transform: translateY(0);
}

/* Secure note */
.cf-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.76rem;
  color: #94a3b8;
  margin-top: 12px;
}

.cf-secure svg {
  width: 13px;
  height: 13px;
  stroke: #94a3b8;
  flex-shrink: 0;
}

/* ── Office card header ── */
.contact-office-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}

.contact-office-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #e8f0fe;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.contact-office-icon svg {
  width: 22px;
  height: 22px;
  stroke: #004aad;
}

.contact-office-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: #101828;
  margin: 0;
}

.contact-office-title span {
  color: #18a34a;
}

/* Office items list */
.contact-office-items {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.co-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid #eef2fb;
}

.co-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.co-item:first-child {
  padding-top: 0;
}

.co-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.co-icon--blue {
  background: #e8f0fe;
}

.co-icon svg {
  width: 18px;
  height: 18px;
  stroke: #004aad;
}

.co-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.co-text strong {
  font-size: 0.9rem;
  font-weight: 700;
  color: #101828;
  display: block;
}

.co-text span {
  font-size: 0.82rem;
  color: #4a5568;
  line-height: 1.7;
}

.co-text a {
  color: #4a5568;
  text-decoration: none;
  transition: color 0.2s;
}

.co-text a:hover {
  color: #004aad;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .contact-main-wrap {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .contact-form-card,
  .contact-office-card {
    padding: 28px 24px;
  }
}

@media (max-width: 560px) {
  .contact-main {
    padding: 44px 0 52px;
  }

  .contact-main-wrap {
    padding: 0 16px;
  }

  .cf-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .contact-form-card,
  .contact-office-card {
    padding: 24px 18px;
    border-radius: 14px;
  }

  .contact-form-title,
  .contact-office-title {
    font-size: 1.15rem;
  }

  .cf-submit {
    font-size: 0.88rem;
    padding: 12px 18px;
  }
}


/* =========================================
   OUR LOCATION SECTION
   ========================================= */

.location-section {
  padding: 64px 0 72px;
  background: #fff;
}

.location-wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 40px;
  align-items: stretch;
}

/* ── Left content ── */
.location-content {
  display: flex;
  flex-direction: column;
}

.location-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: #101828;
  margin: 0 0 10px;
  line-height: 1.2;
}

.location-title span {
  color: #18a34a;
}

.location-title-bar {
  width: 40px;
  height: 3px;
  background: #18a34a;
  border-radius: 3px;
  margin-bottom: 16px;
}

.location-desc {
  font-size: 0.875rem;
  color: #4a5568;
  line-height: 1.75;
  margin: 0 0 32px;
}

/* Feature list */
.location-features {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.location-feat {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.lf-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e8f0fe;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.lf-icon svg {
  width: 18px;
  height: 18px;
  stroke: #004aad;
}

.lf-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 2px;
}

.lf-text strong {
  font-size: 0.9rem;
  font-weight: 700;
  color: #101828;
  display: block;
}

.lf-text span {
  font-size: 0.81rem;
  color: #64748b;
  line-height: 1.5;
}

/* ── Map ── */
.location-map {
  border-radius: 16px;
  overflow: hidden;
  border: 1.5px solid #e3eaf7;
  box-shadow: 0 4px 24px rgba(0, 74, 173, 0.08);
  min-height: 360px;
}

.location-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 360px;
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .location-wrap {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .location-title {
    font-size: 1.4rem;
  }

  .location-map {
    min-height: 300px;
  }

  .location-map iframe {
    min-height: 300px;
  }
}

@media (max-width: 540px) {
  .location-section {
    padding: 44px 0 52px;
  }

  .location-wrap {
    padding: 0 16px;
    gap: 22px;
  }

  .location-title {
    font-size: 1.25rem;
  }

  .location-map {
    min-height: 240px;
    border-radius: 12px;
  }

  .location-map iframe {
    min-height: 240px;
  }
}


/* =========================================
   CONTACT PAGE — FAQ SECTION
   ========================================= */

.cfaq-section {
  padding: 64px 0 72px;
  background: #f7faff;
}

.cfaq-wrapper {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Heading */
.cfaq-head {
  text-align: center;
  margin-bottom: 44px;
}

.cfaq-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: #101828;
  margin: 0 0 10px;
  line-height: 1.25;
}

.cfaq-title span {
  color: #18a34a;
}

.cfaq-sub {
  font-size: 0.875rem;
  color: #64748b;
  margin: 0;
}

/* 2-column grid */
.cfaq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
  align-items: start;
}

.cfaq-col {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* FAQ item */
.cfaq-item {
  background: #fff;
  border: 1.5px solid #e3eaf7;
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.cfaq-item:hover {
  box-shadow: 0 4px 16px rgba(0, 74, 173, 0.08);
}

.cfaq-item.cfaq-open {
  border-color: #004aad;
  box-shadow: 0 4px 20px rgba(0, 74, 173, 0.10);
}

/* Question button */
.cfaq-question {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: #26344d;
  line-height: 1.4;
  transition: color 0.2s;
}

.cfaq-question:hover,
.cfaq-item.cfaq-open .cfaq-question {
  color: #004aad;
}

/* Left icon */
.cfaq-q-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #e8f0fe;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background 0.2s;
}

.cfaq-q-icon svg {
  width: 15px;
  height: 15px;
  stroke: #004aad;
}

.cfaq-item.cfaq-open .cfaq-q-icon {
  background: #004aad;
}

.cfaq-item.cfaq-open .cfaq-q-icon svg {
  stroke: #fff;
}

/* Question text */
.cfaq-q-text {
  flex: 1;
}

/* Chevron */
.cfaq-chevron {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  transition: transform 0.25s ease;
}

.cfaq-chevron svg {
  width: 16px;
  height: 16px;
  stroke: #94a3b8;
}

.cfaq-item.cfaq-open .cfaq-chevron {
  transform: rotate(180deg);
}

.cfaq-item.cfaq-open .cfaq-chevron svg {
  stroke: #004aad;
}

/* Answer */
.cfaq-answer {
  padding: 0 18px 16px 62px;
}

.cfaq-answer p {
  margin: 0;
  font-size: 0.845rem;
  color: #4a5568;
  line-height: 1.75;
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .cfaq-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .cfaq-title {
    font-size: 1.4rem;
  }
}

@media (max-width: 540px) {
  .cfaq-section {
    padding: 44px 0 52px;
  }

  .cfaq-wrapper {
    padding: 0 16px;
  }

  .cfaq-title {
    font-size: 1.2rem;
  }

  .cfaq-head {
    margin-bottom: 28px;
  }

  .cfaq-question {
    padding: 14px 14px;
    font-size: 0.83rem;
    gap: 10px;
  }

  .cfaq-answer {
    padding: 0 14px 14px 56px;
  }

  .cfaq-answer p {
    font-size: 0.81rem;
  }
}


/* =========================================
   BOOK A DEMO BANNER
   ========================================= */

.demo-banner {
  padding: 0 24px 64px;
  background: #f7faff;
}

.demo-banner-inner {
  max-width: 1140px;
  margin: 0 auto;
  background: linear-gradient(105deg, #003a9e 0%, #0055cc 38%, #0b8f4a 80%, #0fa84f 100%);
  border-radius: 20px;
  padding: 38px 52px 38px 0;
  display: grid;
  grid-template-columns: 240px 1fr auto;
  align-items: center;
  gap: 32px;
  overflow: hidden;
  position: relative;
}

/* faint radial glow in centre */
.demo-banner-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 55% 50%, rgba(255, 255, 255, 0.06) 0%, transparent 68%);
  pointer-events: none;
}

/* ── Illustration ── */
.demo-illustration {
  position: relative;
  height: 160px;
  flex-shrink: 0;
}

.demo-calendar {
  position: absolute;
  bottom: 0;
  left: 28px;
  width: 130px;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.22));
}

.demo-clock {
  position: absolute;
  bottom: 2px;
  left: 8px;
  width: 58px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.18));
}

.demo-dots {
  position: absolute;
  top: 4px;
  left: 0;
  width: 80px;
  opacity: 0.7;
}

/* Green leaves cluster */
.demo-leaves {
  position: absolute;
  bottom: 0;
  left: 4px;
  width: 48px;
  height: 52px;
  z-index: 2;
}

.demo-leaves span {
  position: absolute;
  border-radius: 100% 0 100% 0;
  background: #27b35a;
  opacity: 0.88;
}

.demo-leaves span:nth-child(1) {
  width: 26px;
  height: 14px;
  bottom: 18px;
  left: 14px;
  transform: rotate(-30deg);
}

.demo-leaves span:nth-child(2) {
  width: 22px;
  height: 12px;
  bottom: 8px;
  left: 2px;
  transform: rotate(20deg);
  background: #1e9644;
}

.demo-leaves span:nth-child(3) {
  width: 18px;
  height: 10px;
  bottom: 24px;
  left: 0;
  transform: rotate(-50deg);
  background: #34c96a;
}

/* ── Content ── */
.demo-content {
  position: relative;
  z-index: 1;
}

.demo-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1.8px;
  color: #6ee9a0;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.demo-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.55rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
  line-height: 1.25;
}

.demo-text {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 22px;
  line-height: 1.7;
  max-width: 420px;
}

/* Buttons */
.demo-btns {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.demo-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.demo-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.demo-btn--white {
  background: #fff;
  color: #004aad;
  border: 2px solid #fff;
}

.demo-btn--white svg {
  stroke: #004aad;
}

.demo-btn--white:hover {
  background: #e8f0fe;
  border-color: #e8f0fe;
  transform: translateY(-2px);
}

.demo-btn--ghost {
  background: transparent;
  color: #fff;
  border: none;
  padding-left: 0;
  padding-right: 0;
}

.demo-btn--ghost svg {
  stroke: #fff;
}

.demo-btn--ghost:hover {
  color: #6ee9a0;
  gap: 12px;
}

.demo-btn--ghost:hover svg {
  stroke: #6ee9a0;
}

/* Right dot grid */
.demo-dots-right {
  position: absolute;
  right: 0;
  top: 0;
  width: 130px;
  height: 100%;
  pointer-events: none;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .demo-banner-inner {
    grid-template-columns: 180px 1fr;
    padding: 32px 32px 32px 0;
    gap: 20px;
  }

  .demo-illustration {
    height: 130px;
  }

  .demo-calendar {
    width: 110px;
    left: 22px;
  }

  .demo-clock {
    width: 48px;
  }

  .demo-title {
    font-size: 1.3rem;
  }

  .demo-dots-right {
    display: none;
  }
}

@media (max-width: 640px) {
  .demo-banner {
    padding: 0 16px 48px;
  }

  .demo-banner-inner {
    grid-template-columns: 1fr;
    padding: 32px 24px 28px;
    text-align: center;
    gap: 16px;
    border-radius: 16px;
  }

  .demo-illustration {
    display: none;
  }

  .demo-content {
    order: 1;
  }

  .demo-text {
    max-width: 100%;
    margin-bottom: 18px;
  }

  .demo-btns {
    justify-content: center;
  }

  .demo-title {
    font-size: 1.25rem;
  }
}

@media (max-width: 420px) {
  .demo-title {
    font-size: 1.1rem;
  }

  .demo-btn--white {
    padding: 10px 18px;
    font-size: 0.83rem;
  }
}


/* =========================================
   ABOUT US — HERO SECTION
   ========================================= */

.about-hero {
  background: #fff;
  padding: 56px 0 60px;
  overflow: hidden;
}

.about-hero-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 52px;
  align-items: center;
}

/* ── Left content ── */
.about-hero-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.about-hero-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #18a34a;
  letter-spacing: 0.3px;
  margin-bottom: 14px;
}

.about-hero-label svg {
  stroke: #18a34a;
}

.about-hero-title {
  font-family: 'Poppins', sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
  color: #101828;
  line-height: 1.18;
  margin: 0 0 20px;
}

.about-hero-title span {
  color: #18a34a;
}

.about-hero-text {
  font-size: 0.9rem;
  color: #4a5568;
  line-height: 1.8;
  margin: 0 0 12px;
  max-width: 500px;
}

/* Trust badges */
.about-hero-badges {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.about-badge {
  display: flex;
  align-items: center;
  gap: 10px;
}

.abadge-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.abadge-icon svg {
  width: 18px;
  height: 18px;
}

.abadge-icon--blue {
  background: #e8f0fe;
}

.abadge-icon--blue svg {
  stroke: #004aad;
}

.abadge-icon--green {
  background: #e8f9ef;
}

.abadge-icon--green svg {
  stroke: #18a34a;
}

.abadge-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.abadge-text strong {
  font-size: 0.78rem;
  font-weight: 700;
  color: #101828;
  line-height: 1.2;
  display: block;
}

.abadge-text span {
  font-size: 0.73rem;
  color: #64748b;
  line-height: 1.2;
}

/* ── Right: Dashboard ── */
.about-hero-visual {
  position: relative;
}

/* Dashboard window */
.ahv-dashboard {
  background: #fff;
  border: 1.5px solid #dce6f5;
  border-radius: 12px;
  box-shadow: 0 12px 48px rgba(0, 74, 173, 0.13);
  overflow: hidden;
}

.ahv-titlebar {
  height: 26px;
  background: #004aad;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
}

.ahv-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.ahv-dot--red {
  background: #ff5f57;
}

.ahv-dot--yellow {
  background: #febc2e;
}

.ahv-dot--green {
  background: #28c840;
}

.ahv-body {
  display: grid;
  grid-template-columns: 110px 1fr;
  min-height: 260px;
}

/* Sidebar */
.ahv-sidebar {
  background: #fff;
  border-right: 1px solid #e8eef8;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ahv-sidebar-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  font-size: 0.7rem;
  font-weight: 500;
  color: #64748b;
  cursor: default;
  border-radius: 6px;
  margin: 0 4px;
  white-space: nowrap;
}

.ahv-sidebar-item svg {
  width: 13px;
  height: 13px;
  stroke: #94a3b8;
  flex-shrink: 0;
}

.ahv-sidebar-item--active {
  background: #e8f0fe;
  color: #004aad;
  font-weight: 700;
}

.ahv-sidebar-item--active svg {
  stroke: #004aad;
}

/* Main area */
.ahv-main {
  padding: 14px;
  background: #f8fbff;
}

/* Stats row */
.ahv-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.ahv-stat {
  background: #fff;
  border: 1px solid #e4ecf7;
  border-radius: 8px;
  padding: 10px;
}

.ahv-stat-label {
  display: block;
  font-size: 0.62rem;
  color: #94a3b8;
  font-weight: 500;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ahv-stat-value {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #004aad;
  line-height: 1;
  margin-bottom: 6px;
}

.ahv-stat-value--sm {
  font-size: 0.78rem;
}

.ahv-stat-bar {
  height: 4px;
  background: #e8eef8;
  border-radius: 4px;
  overflow: hidden;
}

.ahv-stat-bar span {
  display: block;
  height: 100%;
  border-radius: 4px;
}

/* Charts row */
.ahv-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.ahv-chart-card {
  background: #fff;
  border: 1px solid #e4ecf7;
  border-radius: 8px;
  padding: 10px;
}

.ahv-chart-title {
  font-size: 0.65rem;
  font-weight: 700;
  color: #26344d;
  margin-bottom: 8px;
}

/* Bar chart */
.ahv-bar-chart {
  height: 68px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  border-bottom: 1px solid #e8eef8;
  padding-bottom: 2px;
}

.ahv-bar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 1;
}

.ahv-bar {
  width: 100%;
  border-radius: 3px 3px 0 0;
}

.ahv-bar-wrap span {
  font-size: 0.55rem;
  color: #94a3b8;
}

/* Line chart */
.ahv-line-chart svg {
  width: 100%;
  height: 68px;
  display: block;
}

.ahv-line-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
}

.ahv-line-labels span {
  font-size: 0.55rem;
  color: #94a3b8;
}

/* Floating plant */
.ahv-plant {
  position: absolute;
  right: -18px;
  bottom: 20px;
  width: 52px;
  z-index: 2;
}

.ahv-plant svg {
  width: 100%;
}

/* Logo badge */
.ahv-badge {
  position: absolute;
  bottom: -16px;
  right: 28px;
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 74, 173, 0.16);
  overflow: hidden;
  z-index: 3;
  border: 2px solid #e8eef8;
}

.ahv-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .about-hero-title {
    font-size: 2.1rem;
  }

  .ahv-body {
    grid-template-columns: 90px 1fr;
  }

  .ahv-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 860px) {
  .about-hero-wrap {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 0 20px;
  }

  .about-hero-title {
    font-size: 2rem;
  }

  .about-hero-text {
    max-width: 100%;
  }

  .about-hero-visual {
    padding-bottom: 20px;
  }
}

@media (max-width: 560px) {
  .about-hero {
    padding: 40px 0 44px;
  }

  .about-hero-wrap {
    padding: 0 16px;
  }

  .about-hero-title {
    font-size: 1.65rem;
  }

  .ahv-body {
    grid-template-columns: 1fr;
  }

  .ahv-sidebar {
    display: none;
  }

  .ahv-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .ahv-charts {
    grid-template-columns: 1fr;
  }

  .about-hero-badges {
    gap: 14px;
  }

  .abadge-icon {
    width: 34px;
    height: 34px;
  }

  .abadge-icon svg {
    width: 15px;
    height: 15px;
  }
}


/* ── About Hero — Trust Row Card ── */
.about-trust-row {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1.5px solid #e3eaf7;
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(0, 74, 173, 0.07);
  margin-top: 28px;
  overflow: hidden;
}

.about-trust-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
}

.atc-divider {
  width: 1px;
  background: #e3eaf7;
  margin: 12px 0;
  flex-shrink: 0;
}

.atc-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.atc-icon svg {
  width: 18px;
  height: 18px;
}

.atc-icon--blue {
  background: #e8f0fe;
}

.atc-icon--blue svg {
  stroke: #004aad;
}

.atc-icon--green {
  background: #e8f9ef;
}

.atc-icon--green svg {
  stroke: #18a34a;
}

.atc-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.atc-text strong {
  font-size: 0.8rem;
  font-weight: 700;
  color: #101828;
  line-height: 1.2;
  display: block;
}

.atc-text span {
  font-size: 0.74rem;
  color: #64748b;
  line-height: 1.2;
}

/* Responsive */
@media (max-width: 720px) {
  .about-trust-row {
    flex-wrap: wrap;
    border-radius: 12px;
  }

  .about-trust-card {
    flex: 0 0 50%;
    padding: 14px 16px;
  }

  .atc-divider {
    display: none;
  }

  /* add border between wrapped items */
  .about-trust-card:nth-child(odd) {
    border-right: 1px solid #e3eaf7;
  }

  .about-trust-card:nth-child(1),
  .about-trust-card:nth-child(3) {
    border-bottom: 1px solid #e3eaf7;
  }
}

@media (max-width: 400px) {
  .about-trust-card {
    flex: 0 0 100%;
    border-right: none !important;
    border-bottom: 1px solid #e3eaf7;
  }

  .about-trust-card:last-child {
    border-bottom: none;
  }
}


/* =========================================
   MISSION, VISION & VALUES SECTION
   ========================================= */

.mvv-section {
  padding: 64px 0 72px;
  background: #f7faff;
}

.mvv-wrapper {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Heading row */
.mvv-heading-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 48px;
}

.mvv-heading-line {
  flex: 1;
  max-width: 80px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #27b35a);
  border-radius: 2px;
}

.mvv-heading-line:last-child {
  background: linear-gradient(90deg, #27b35a, transparent);
}

.mvv-heading {
  font-family: 'Poppins', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: #101828;
  margin: 0;
  text-align: center;
  white-space: nowrap;
}

/* 3-column grid */
.mvv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}

/* Base card */
.mvv-card {
  border-radius: 18px;
  padding: 36px 28px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  position: relative;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.mvv-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.10);
}

.mvv-card--blue {
  background: #eef3ff;
  border: 1.5px solid #d0dcf8;
}

.mvv-card--green {
  background: #edfbf3;
  border: 1.5px solid #b6eece;
}

.mvv-card--purple {
  background: #f3eeff;
  border: 1.5px solid #d8cafc;
}

/* Icon circle */
.mvv-icon-wrap {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
}

.mvv-icon-wrap svg {
  width: 32px;
  height: 32px;
}

.mvv-icon-wrap--blue {
  background: #dce8fe;
}

.mvv-icon-wrap--blue svg {
  stroke: #004aad;
}

.mvv-icon-wrap--green {
  background: #d0f5e2;
}

.mvv-icon-wrap--green svg {
  stroke: #18a34a;
}

.mvv-icon-wrap--purple {
  background: #e8dcfe;
}

.mvv-icon-wrap--purple svg {
  stroke: #6b3fa0;
}

/* Title */
.mvv-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 14px;
}

.mvv-title--blue {
  color: #004aad;
}

.mvv-title--green {
  color: #18a34a;
}

.mvv-title--purple {
  color: #6b3fa0;
}

/* Text */
.mvv-text {
  font-size: 0.875rem;
  color: #4a5568;
  line-height: 1.8;
  margin: 0 0 20px;
}

/* Values list */
.mvv-values-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mvv-values-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  color: #26344d;
  font-weight: 500;
}

.mvv-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e8dcfe;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.mvv-check svg {
  width: 12px;
  height: 12px;
  stroke: #6b3fa0;
}

/* Bottom bar */
.mvv-bar {
  display: block;
  height: 3px;
  width: 40px;
  border-radius: 3px;
  margin-top: auto;
}

.mvv-bar--blue {
  background: #004aad;
}

.mvv-bar--green {
  background: #18a34a;
}

.mvv-bar--purple {
  background: #6b3fa0;
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .mvv-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
  }

  .mvv-heading {
    font-size: 1.35rem;
    white-space: normal;
  }

  .mvv-heading-line {
    max-width: 50px;
  }
}

@media (max-width: 540px) {
  .mvv-section {
    padding: 44px 0 52px;
  }

  .mvv-wrapper {
    padding: 0 16px;
  }

  .mvv-heading {
    font-size: 1.15rem;
  }

  .mvv-heading-row {
    gap: 10px;
    margin-bottom: 32px;
  }

  .mvv-card {
    padding: 28px 20px 22px;
  }

  .mvv-icon-wrap {
    width: 60px;
    height: 60px;
  }

  .mvv-icon-wrap svg {
    width: 26px;
    height: 26px;
  }
}


/* =========================================
   WHY NGOs CHOOSE AXSEM
   ========================================= */

.why-section {
  padding: 64px 0 72px;
  background: #fff;
}

.why-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Heading row */
.why-heading-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 44px;
}

.why-heading-line {
  flex: 1;
  max-width: 80px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #27b35a);
  border-radius: 2px;
}

.why-heading-line:last-child {
  background: linear-gradient(90deg, #27b35a, transparent);
}

.why-heading {
  font-family: 'Poppins', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: #101828;
  margin: 0;
  white-space: nowrap;
  text-align: center;
}

/* 5-column grid */
.why-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

/* Card */
.why-card {
  background: #fff;
  border: 1.5px solid #e3eaf7;
  border-radius: 16px;
  padding: 28px 18px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.why-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 36px rgba(0, 74, 173, 0.10);
  border-color: transparent;
}

/* Icon wrapper */
.why-icon-wrap {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}

.why-icon-main {
  width: 40px;
  height: 40px;
}

.why-icon--blue {
  background: #e8f0fe;
}

.why-icon--green {
  background: #e8f9ef;
}

.why-icon--purple {
  background: #f0eaff;
}

.why-icon--blue2 {
  background: #e3f2fd;
}

.why-icon--green2 {
  background: #e8f9ef;
}

/* Title */
.why-title {
  font-family: 'Poppins', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 10px;
  line-height: 1.3;
}

.why-title--blue {
  color: #004aad;
}

.why-title--green {
  color: #18a34a;
}

.why-title--purple {
  color: #6b3fa0;
}

.why-title--blue2 {
  color: #1e88e5;
}

.why-title--green2 {
  color: #18a34a;
}

/* Text */
.why-text {
  font-size: 0.82rem;
  color: #64748b;
  line-height: 1.7;
  margin: 0;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .why-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

@media (max-width: 700px) {
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .why-heading {
    font-size: 1.35rem;
    white-space: normal;
  }

  .why-heading-line {
    max-width: 50px;
  }
}

@media (max-width: 480px) {
  .why-section {
    padding: 44px 0 52px;
  }

  .why-wrapper {
    padding: 0 16px;
  }

  .why-heading {
    font-size: 1.15rem;
  }

  .why-heading-row {
    gap: 10px;
    margin-bottom: 28px;
  }

  .why-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .why-card {
    padding: 22px 14px 18px;
  }

  .why-icon-wrap {
    width: 58px;
    height: 58px;
  }

  .why-icon-main {
    width: 32px;
    height: 32px;
  }
}


/* =========================================
   STATS BANNER
   ========================================= */

.stats-banner {
  padding: 0 24px;
  background: #f7faff;
}

.stats-banner-inner {
  max-width: 1140px;
  margin: 0 auto;
  background: linear-gradient(100deg, #003a9e 0%, #0055cc 45%, #0b8f4a 80%, #12a852 100%);
  border-radius: 16px;
  padding: 28px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  overflow: hidden;
  position: relative;
}

/* subtle shimmer */
.stats-banner-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
  flex: 1;
  justify-content: center;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.12);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.stat-icon svg {
  width: 22px;
  height: 22px;
  stroke: #fff;
}

.stat-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-info strong {
  font-family: 'Poppins', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.stat-info span {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.80);
  font-weight: 400;
  white-space: nowrap;
}

.stat-divider {
  width: 1px;
  height: 48px;
  background: rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
}

/* =========================================
   OUR JOURNEY SECTION
   ========================================= */

.journey-section {
  padding: 64px 0 72px;
  background: #f7faff;
}

.journey-wrapper {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: center;
}

/* Illustration */
.journey-illustration svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Content */
.journey-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.journey-heading-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.journey-line {
  flex: 0 0 36px;
  height: 2px;
  background: #27b35a;
  border-radius: 2px;
}

.journey-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.55rem;
  font-weight: 700;
  color: #101828;
  margin: 0;
  white-space: nowrap;
}

.journey-text {
  font-size: 0.9rem;
  color: #4a5568;
  line-height: 1.8;
  margin: 0 0 16px;
}

.journey-text:last-child {
  margin-bottom: 0;
}

.journey-text--bold {
  font-size: 0.95rem;
  font-weight: 600;
  color: #101828;
  line-height: 1.7;
}

/* ── Stats banner responsive ── */
@media (max-width: 860px) {
  .stats-banner-inner {
    padding: 22px 24px;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
  }

  .stat-divider {
    display: none;
  }

  .stat-item {
    flex: 0 0 calc(50% - 10px);
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  .stats-banner {
    padding: 0 16px;
  }

  .stats-banner-inner {
    border-radius: 12px;
    padding: 20px 18px;
    gap: 14px;
  }

  .stat-item {
    flex: 0 0 100%;
  }

  .stat-info strong {
    font-size: 1.3rem;
  }
}

/* ── Journey responsive ── */
@media (max-width: 860px) {
  .journey-wrapper {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .journey-illustration {
    max-width: 400px;
    margin: 0 auto;
  }

  .journey-title {
    font-size: 1.35rem;
  }
}

@media (max-width: 480px) {
  .journey-section {
    padding: 44px 0 52px;
  }

  .journey-wrapper {
    padding: 0 16px;
    gap: 24px;
  }

  .journey-title {
    font-size: 1.2rem;
  }

  .journey-text {
    font-size: 0.86rem;
  }
}


/* =========================================
   DOCUMENT PREVIEW MODAL
   ========================================= */

/* cursor on cards */
.doc-card {
  cursor: pointer;
}

.doc-card:hover .doc-preview,
.doc-card:hover .receipt-image,
.doc-card:hover .letter-image {
  transform: scale(1.04);
}

.doc-preview,
.receipt-image,
.letter-image {
  transition: transform 0.25s ease;
}

/* Overlay */
.doc-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 50, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.doc-modal-overlay.doc-modal-visible {
  opacity: 1;
}

.doc-modal-overlay[hidden] {
  display: none;
}

/* Modal box */
.doc-modal {
  background: #fff;
  border-radius: 18px;
  width: 100%;
  max-width: 560px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(24px) scale(0.97);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.doc-modal-overlay.doc-modal-visible .doc-modal {
  transform: translateY(0) scale(1);
}

/* Header */
.doc-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid #e8eef8;
}

.doc-modal-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #101828;
  margin: 0;
}

.doc-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #f1f5f9;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s;
  flex-shrink: 0;
}

.doc-modal-close:hover {
  background: #e2e8f0;
}

.doc-modal-close svg {
  width: 16px;
  height: 16px;
  stroke: #475569;
}

/* Image area */
.doc-modal-body {
  padding: 20px 22px;
  background: #f8fbff;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
}

.doc-modal-img {
  max-width: 100%;
  max-height: 420px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 74, 173, 0.12);
  object-fit: contain;
  display: block;
}

/* Footer buttons */
.doc-modal-footer {
  padding: 14px 22px 18px;
  display: flex;
  gap: 12px;
  border-top: 1px solid #e8eef8;
}

.doc-modal-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 9px;
  font-size: 0.875rem;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
  border: 2px solid transparent;
}

.doc-modal-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.doc-modal-btn--primary {
  background: linear-gradient(90deg, #004aad, #18a34a);
  color: #fff;
  border-color: transparent;
}

.doc-modal-btn--primary:hover {
  opacity: 0.9;
}

.doc-modal-btn--outline {
  background: transparent;
  color: #475569;
  border-color: #d0d9ee;
}

.doc-modal-btn--outline:hover {
  background: #f1f5f9;
  border-color: #b0bdd6;
}

/* Responsive */
@media (max-width: 480px) {
  .doc-modal {
    border-radius: 14px;
  }

  .doc-modal-body {
    min-height: 240px;
    padding: 16px;
  }

  .doc-modal-footer {
    flex-direction: column;
    gap: 8px;
  }

  .doc-modal-title {
    font-size: 0.92rem;
  }
}


/* =========================================
   BREADCRUMB SECTION
   ========================================= */
.breadcrumb-section {
  background: linear-gradient(135deg, #004aad 0%, #0066cc 50%, #1aa34a 100%);
  padding: 80px 20px 60px;
  position: relative;
  overflow: hidden;
}

.breadcrumb-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(26, 163, 74, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(0, 74, 173, 0.15) 0%, transparent 50%);
  pointer-events: none;
}

.breadcrumb-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Breadcrumb Navigation */
.breadcrumb-nav {
  margin-bottom: 24px;
}

.breadcrumb-list {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
}

.breadcrumb-link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 6px;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.1);
}

.breadcrumb-link:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  transform: translateX(-2px);
}

.breadcrumb-link svg {
  width: 16px;
  height: 16px;
}

.breadcrumb-separator {
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 4px;
}

.breadcrumb-separator svg {
  width: 14px;
  height: 14px;
}

.breadcrumb-active {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 6px;
}

/* Breadcrumb Title */
.breadcrumb-title {
  font-family: 'Poppins', sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 16px 0;
  line-height: 1.2;
}

.breadcrumb-highlight {
  color: #1aa34a;
  text-shadow: 0 2px 10px rgba(26, 163, 74, 0.3);
}

.breadcrumb-desc {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  line-height: 1.6;
  max-width: 700px;
}

/* Responsive */
@media (max-width: 768px) {
  .breadcrumb-section {
    padding: 60px 20px 40px;
  }

  .breadcrumb-title {
    font-size: 1.8rem;
  }

  .breadcrumb-desc {
    font-size: 1rem;
  }

  .breadcrumb-link,
  .breadcrumb-active {
    font-size: 0.85rem;
    padding: 5px 10px;
  }
}

@media (max-width: 480px) {
  .breadcrumb-section {
    padding: 50px 15px 35px;
  }

  .breadcrumb-title {
    font-size: 1.5rem;
  }

  .breadcrumb-desc {
    font-size: 0.95rem;
  }

  .breadcrumb-link svg {
    width: 14px;
    height: 14px;
  }

  .breadcrumb-separator svg {
    width: 12px;
    height: 12px;
  }
}


/* =========================================
   TEMPLATES SECTION
   ========================================= */
.templates-section {
  padding: 80px 20px;
  background: linear-gradient(to bottom, #f8fbff 0%, #ffffff 100%);
}

.templates-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

/* Section Heading */
.templates-heading {
  font-family: 'Poppins', sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  color: #101828;
  margin: 0 0 12px 0;
  line-height: 1.3;
}

.templates-heading .text-blue {
  color: #004aad;
}

.templates-heading .text-green {
  color: #1aa34a;
}

.templates-subheading {
  text-align: center;
  font-size: 1.1rem;
  color: #64748b;
  margin: 0 0 60px 0;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Templates Grid */
.templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 32px;
}

/* Template Card */
.template-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
  border: 2px solid transparent;
}

.template-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(0, 74, 173, 0.15);
  border-color: #004aad;
}

.template-card:focus {
  outline: 3px solid #004aad;
  outline-offset: 2px;
}

/* Template Preview */
.template-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #f1f5f9;
}

.template-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.template-card:hover .template-preview img {
  transform: scale(1.08);
}

/* Template Overlay */
.template-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 74, 173, 0.92) 0%, rgba(26, 163, 74, 0.92) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.template-card:hover .template-overlay {
  opacity: 1;
}

.template-overlay svg {
  width: 48px;
  height: 48px;
  stroke: #fff;
  animation: zoomPulse 1.5s ease-in-out infinite;
}

@keyframes zoomPulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.15);
  }
}

.template-overlay span {
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.02em;
}

/* Template Info */
.template-info {
  padding: 20px 24px;
}

.template-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: #101828;
  margin: 0 0 6px 0;
  line-height: 1.4;
}

.template-category {
  font-size: 0.9rem;
  color: #64748b;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.template-category::before {
  content: '';
  width: 6px;
  height: 6px;
  background: #1aa34a;
  border-radius: 50%;
}

/* Responsive */
@media (max-width: 1200px) {
  .templates-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 28px;
  }
}

@media (max-width: 768px) {
  .templates-section {
    padding: 60px 20px;
  }

  .templates-heading {
    font-size: 2rem;
  }

  .templates-subheading {
    font-size: 1rem;
    margin-bottom: 40px;
  }

  .templates-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 24px;
  }

  .template-overlay svg {
    width: 40px;
    height: 40px;
  }

  .template-overlay span {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .templates-section {
    padding: 50px 15px;
  }

  .templates-heading {
    font-size: 1.6rem;
  }

  .templates-subheading {
    font-size: 0.95rem;
  }

  .templates-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .template-info {
    padding: 16px 20px;
  }

  .template-title {
    font-size: 1.05rem;
  }

  .template-category {
    font-size: 0.85rem;
  }
}


/* =========================================
   DOCUMENT HERO SECTION
   ========================================= */
.doc-hero-section {
  padding: 80px 20px;
  background: linear-gradient(to bottom, #f8fbff 0%, #ffffff 100%);
}

.doc-hero-wrapper {
  max-width: 1300px;
  margin: 0 auto;
}

/* Heading */
.doc-hero-heading {
  font-family: 'Poppins', sans-serif;
  font-size: 2.8rem;
  font-weight: 700;
  text-align: center;
  color: #101828;
  margin: 0 0 60px 0;
  position: relative;
}

.doc-hero-heading::before,
.doc-hero-heading::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 80px;
  height: 3px;
  /* background: linear-gradient(90deg, transparent, #1aa34a); */
}

.doc-hero-heading::before {
  left: calc(50% - 250px);
}

.doc-hero-heading::after {
  right: calc(50% - 250px);
  /* background: linear-gradient(90deg, #1aa34a, transparent); */
}

/* Categories Grid */
.doc-categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
}

/* Category Card */
.doc-category-card {
  background: #fff;
  border-radius: 20px;
  padding: 36px 28px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border: 2px solid transparent;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.doc-category-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #004aad, #1aa34a);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.doc-category-card:hover::before {
  transform: scaleX(1);
}

.doc-category-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(0, 74, 173, 0.15);
}

/* Blue cards */
.doc-cat-blue {
  background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
}

.doc-cat-blue .doc-cat-icon-wrap {
  background: linear-gradient(135deg, #004aad 0%, #0066cc 100%);
}

/* Green cards */
.doc-cat-green {
  background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
}

.doc-cat-green .doc-cat-icon-wrap {
  background: linear-gradient(135deg, #18a34a 0%, #22c55e 100%);
}

/* Purple cards */
.doc-cat-purple {
  background: linear-gradient(135deg, #faf5ff 0%, #ffffff 100%);
}

.doc-cat-purple .doc-cat-icon-wrap {
  background: linear-gradient(135deg, #6b3fa0 0%, #8b5cf6 100%);
}

/* Icon Wrap */
.doc-cat-icon-wrap {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 74, 173, 0.2);
  transition: transform 0.3s ease;
}

.doc-category-card:hover .doc-cat-icon-wrap {
  transform: scale(1.1) rotate(5deg);
}

.doc-cat-icon-wrap svg {
  width: 36px;
  height: 36px;
  stroke: #fff;
  fill: none;
}

/* Title */
.doc-cat-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: #101828;
  margin: 0 0 12px 0;
  line-height: 1.4;
}

/* Description */
.doc-cat-desc {
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0 0 20px 0;
}

/* Count */
.doc-cat-count {
  font-size: 0.9rem;
  font-weight: 600;
  color: #004aad;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
}

.doc-cat-green .doc-cat-count {
  color: #18a34a;
}

.doc-cat-purple .doc-cat-count {
  color: #6b3fa0;
}

/* Responsive */
@media (max-width: 1024px) {
  .doc-categories-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
  }
}

@media (max-width: 768px) {
  .doc-hero-section {
    padding: 60px 20px;
  }

  .doc-hero-heading {
    font-size: 2.2rem;
    margin-bottom: 40px;
  }

  .doc-hero-heading::before,
  .doc-hero-heading::after {
    width: 50px;
  }

  .doc-hero-heading::before {
    left: calc(50% - 180px);
  }

  .doc-hero-heading::after {
    right: calc(50% - 180px);
  }

  .doc-categories-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
  }

  .doc-category-card {
    padding: 30px 24px;
  }

  .doc-cat-icon-wrap {
    width: 70px;
    height: 70px;
  }

  .doc-cat-icon-wrap svg {
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 480px) {
  .doc-hero-section {
    padding: 50px 15px;
  }

  .doc-hero-heading {
    font-size: 1.8rem;
  }

  .doc-hero-heading::before,
  .doc-hero-heading::after {
    display: none;
  }

  .doc-categories-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .doc-category-card {
    padding: 28px 20px;
  }

  .doc-cat-title {
    font-size: 1.2rem;
  }

  .doc-cat-desc {
    font-size: 0.9rem;
  }
}


/* =========================================
   DEMO FORM SECTION
   ========================================= */
.demo-form-section {
  padding: 80px 20px;
  background: linear-gradient(135deg, #f8fbff 0%, #ffffff 50%, #f0fdf4 100%);
}

.demo-form-container {
  max-width: 1300px;
  margin: 0 auto;
}

.demo-form-wrapper {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: start;
}

/* Left Side */
.demo-left {
  position: sticky;
  top: 100px;
}

.demo-tag {
  display: inline-block;
  padding: 8px 20px;
  background: linear-gradient(135deg, #004aad 0%, #0066cc 100%);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-radius: 30px;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.demo-form-heading {
  font-family: 'Poppins', sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: #101828;
  margin: 0 0 16px 0;
  line-height: 1.2;
}

.demo-form-text {
  font-size: 1.05rem;
  color: #64748b;
  line-height: 1.7;
  margin: 0 0 40px 0;
}

/* Features List */
.demo-features {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border-left: 4px solid #1aa34a;
  transition: all 0.3s ease;
}

.feature-item:hover {
  transform: translateX(8px);
  box-shadow: 0 6px 16px rgba(26, 163, 74, 0.15);
}

.feature-item svg {
  width: 24px;
  height: 24px;
  stroke: #1aa34a;
  flex-shrink: 0;
}

.feature-item span {
  font-size: 0.95rem;
  font-weight: 600;
  color: #26344d;
}

/* Right Side - Form */
.demo-right {
  background: #fff;
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
}

.demo-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Form Group */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 4px;
}

.form-group .required {
  color: #ef4444;
  font-size: 1rem;
}

/* Input Fields */
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 14px 16px;
  font-size: 0.95rem;
  color: #1e293b;
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  transition: all 0.3s ease;
  font-family: 'Inter', sans-serif;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  background: #fff;
  border-color: #004aad;
  box-shadow: 0 0 0 4px rgba(0, 74, 173, 0.1);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #94a3b8;
}

.form-group select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
  padding-right: 40px;
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

/* Submit Button */
.demo-submit-btn {
  padding: 16px 32px;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #004aad 0%, #0066cc 100%);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 74, 173, 0.3);
  margin-top: 12px;
}

.demo-submit-btn:hover {
  background: linear-gradient(135deg, #003a8c 0%, #0052a3 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 74, 173, 0.4);
}

.demo-submit-btn:active {
  transform: translateY(0);
}

.demo-submit-btn svg {
  width: 20px;
  height: 20px;
  stroke: #fff;
  transition: transform 0.3s ease;
}

.demo-submit-btn:hover svg {
  transform: translateX(4px);
}

/* Responsive */
@media (max-width: 1024px) {
  .demo-form-wrapper {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .demo-left {
    position: relative;
    top: 0;
  }
}

@media (max-width: 768px) {
  .demo-form-section {
    padding: 60px 20px;
  }

  .demo-form-heading {
    font-size: 2rem;
  }

  .demo-right {
    padding: 32px 24px;
  }

  .demo-features {
    gap: 16px;
  }

  .feature-item {
    padding: 14px 16px;
  }
}

@media (max-width: 480px) {
  .demo-form-section {
    padding: 50px 15px;
  }

  .demo-form-heading {
    font-size: 1.7rem;
  }

  .demo-form-text {
    font-size: 0.95rem;
  }

  .demo-right {
    padding: 28px 20px;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 12px 14px;
    font-size: 0.9rem;
  }

  .demo-submit-btn {
    padding: 14px 28px;
    font-size: 0.95rem;
  }
}


/* Testimonial Card - Additional Elements */
.testi-quote-icon {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 4rem;
  font-family: Georgia, serif;
  color: #e0e7ff;
  font-weight: 700;
  line-height: 1;
  z-index: 0;
  user-select: none;
}

.testi-card {
  position: relative;
  overflow: hidden;
}

.testi-badge {
  display: inline-block;
  padding: 3px 10px;
  background: linear-gradient(135deg, #004aad 0%, #0066cc 100%);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 12px;
  margin-top: 4px;
  letter-spacing: 0.3px;
}

.testi-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
  font-size: 0.75rem;
}

.testi-date,
.testi-verified {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #64748b;
  font-weight: 500;
}

.testi-date svg,
.testi-verified svg {
  width: 14px;
  height: 14px;
  stroke: #94a3b8;
}

.testi-verified {
  color: #1aa34a;
  font-weight: 600;
}

.testi-verified svg {
  stroke: #1aa34a;
}

/* =========================================
   TESTIMONIALS MODULE
   ========================================= */
.testimonials-module {
  padding: 80px 20px;
  background: linear-gradient(135deg, #f8fbff 0%, #ffffff 50%, #f0fdf4 100%);
  position: relative;
  overflow: hidden;
}

.testimonials-container {
  max-width: 1400px;
  margin: 0 auto;
}

/* Section Header */
.testimonials-header {
  text-align: center;
  margin-bottom: 60px;
}

.testimonials-label {
  display: inline-block;
  padding: 8px 24px;
  background: linear-gradient(135deg, #004aad 0%, #0066cc 100%);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 1px;
  border-radius: 30px;
  margin-bottom: 16px;
  text-transform: uppercase;
}

.testimonials-heading {
  font-family: 'Poppins', sans-serif;
  font-size: 2.8rem;
  font-weight: 700;
  color: #101828;
  margin: 0 0 16px 0;
  line-height: 1.2;
}

.testimonials-heading .text-highlight {
  color: #1aa34a;
  position: relative;
}

.testimonials-subheading {
  font-size: 1.1rem;
  color: #64748b;
  margin: 0;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Slider Wrapper */
.testimonials-slider-wrapper {
  position: relative;
  padding: 0 60px;
}

/* Testimonials Track */
.testimonials-track {
  display: flex;
  gap: 32px;
  overflow-x: scroll;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 20px 0;
}

.testimonials-track::-webkit-scrollbar {
  display: none;
}

/* Testimonial Card */
.testimonial-card {
  flex: 0 0 calc(33.333% - 22px);
  min-width: 320px;
  background: #fff;
  padding: 32px 28px;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 2px solid #f1f5f9;
  scroll-snap-align: start;
  position: relative;
  transition: all 0.3s ease;
}

.testimonial-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0, 74, 173, 0.15);
  border-color: #004aad;
}

/* Quote Icon */
.testimonial-quote-icon {
  position: absolute;
  top: 16px;
  right: 24px;
  font-size: 5rem;
  font-family: Georgia, serif;
  color: #e0e7ff;
  font-weight: 700;
  line-height: 1;
  z-index: 0;
  user-select: none;
}

/* Header */
.testimonial-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.testimonial-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #e2e8f0;
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}

/* Indian Profile Photos - Replace with local images from assets/testimonials/ */
.av-1 {
  background: url('https://xsgames.co/randomusers/assets/avatars/female/1.jpg') center/cover;
}

.av-2 {
  background: url('https://xsgames.co/randomusers/assets/avatars/male/2.jpg') center/cover;
}

.av-3 {
  background: url('https://xsgames.co/randomusers/assets/avatars/female/3.jpg') center/cover;
}

.av-4 {
  background: url('https://xsgames.co/randomusers/assets/avatars/male/4.jpg') center/cover;
}

.av-5 {
  background: url('https://xsgames.co/randomusers/assets/avatars/female/5.jpg') center/cover;
}

.av-6 {
  background: url('https://xsgames.co/randomusers/assets/avatars/male/6.jpg') center/cover;
}

.testimonial-info {
  flex: 1;
}

.testimonial-name {
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 4px 0;
}

.testimonial-org {
  font-size: 0.85rem;
  color: #64748b;
  margin: 0 0 8px 0;
}

.testimonial-badge {
  display: inline-block;
  padding: 4px 12px;
  background: linear-gradient(135deg, #004aad 0%, #0066cc 100%);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 12px;
  letter-spacing: 0.5px;
}

/* Stars */
.testimonial-stars {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
}

.testimonial-stars svg {
  width: 18px;
  height: 18px;
  fill: #f59e0b;
}

/* Quote Text */
.testimonial-text {
  font-size: 0.95rem;
  color: #334155;
  line-height: 1.7;
  margin: 0 0 20px 0;
  position: relative;
  z-index: 1;
}

/* Footer */
.testimonial-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
  font-size: 0.8rem;
}

.testimonial-date,
.testimonial-verified {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #64748b;
  font-weight: 500;
}

.testimonial-date svg,
.testimonial-verified svg {
  width: 14px;
  height: 14px;
  stroke: #94a3b8;
}

.testimonial-verified {
  color: #1aa34a;
  font-weight: 600;
}

.testimonial-verified svg {
  stroke: #1aa34a;
}

/* Navigation Buttons */
.testimonials-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.testimonials-nav:hover {
  background: #004aad;
  border-color: #004aad;
  transform: translateY(-50%) scale(1.1);
}

.testimonials-nav:hover svg {
  stroke: #fff;
}

.testimonials-prev {
  left: 0;
}

.testimonials-next {
  right: 0;
}

.testimonials-nav svg {
  width: 24px;
  height: 24px;
  stroke: #004aad;
}

/* Dots Navigation */
.testimonials-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 40px;
}

.testimonial-dot {
  width: 12px;
  height: 12px;
  background: #cbd5e1;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}

.testimonial-dot.active {
  background: #004aad;
  width: 32px;
  border-radius: 6px;
}

.testimonial-dot:hover {
  background: #004aad;
}

/* Responsive */
@media (max-width: 1024px) {
  .testimonial-card {
    flex: 0 0 calc(50% - 16px);
    min-width: 300px;
  }

  .testimonials-slider-wrapper {
    padding: 0 50px;
  }
}

@media (max-width: 768px) {
  .testimonials-module {
    padding: 60px 20px;
  }

  .testimonials-heading {
    font-size: 2.2rem;
  }

  .testimonials-subheading {
    font-size: 1rem;
  }

  .testimonial-card {
    flex: 0 0 calc(100% - 16px);
    min-width: 280px;
    padding: 28px 24px;
  }

  .testimonials-slider-wrapper {
    padding: 0 40px;
  }

  .testimonials-nav {
    width: 40px;
    height: 40px;
  }

  .testimonials-nav svg {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 480px) {
  .testimonials-module {
    padding: 50px 15px;
  }

  .testimonials-heading {
    font-size: 1.8rem;
  }

  .testimonial-card {
    padding: 24px 20px;
  }

  .testimonials-slider-wrapper {
    padding: 0 35px;
  }

  .testimonials-nav {
    width: 36px;
    height: 36px;
  }

  .testimonial-quote-icon {
    font-size: 3.5rem;
  }
}