﻿/* ============================================================
   HELPMISSION FOUNDATION — DUAL THEME v3.0
   Logo: Green(Feed) + Blue(Edu) = DARK | Orange(Care) + Gold(Career) = LIGHT
   Inspired by: Stripe · Vercel · Linear · Salesforce
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ================================================================
   DARK THEME (Default) — Green(Feed) + Blue(Education)
   ================================================================ */
:root,
[data-theme="dark"] {
  --bg: #050811;
  /* Deepest Midnight */
  --bg2: #0a0f1e;
  --bg3: #12192c;
  --card: #0d1325;
  --card2: #161e33;
  --border: rgba(99, 102, 241, .12);
  --brdr2: rgba(99, 102, 241, .25);
  --text: #f8fafc;
  --text2: #94a3b8;
  --text3: #64748b;
  --head: #ffffff;
  /* Premium Indigo (Main) */
  --p1: #6366f1;
  --p1d: #4f46e5;
  --p1l: rgba(99, 102, 241, .14);
  /* Premium Cyan (Accent) */
  --p2: #06b6d4;
  --p2d: #0891b2;
  --p2l: rgba(6, 182, 212, .14);
  /* Gradients */
  --g-btn: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%);
  --g-btn2: linear-gradient(135deg, #4f46e5 0%, #0891b2 100%);
  --g-hero: linear-gradient(120deg, rgba(5, 8, 17, .95) 0%, rgba(99, 102, 241, .40) 100%);
  --g-bar: linear-gradient(90deg, #6366f1, #06b6d4, #3b82f6);
  /* Navbar */
  --nav-bg: rgba(5, 8, 17, .85);
  --nav-scrolled: rgba(5, 8, 17, .96);
  --nav-border: rgba(99, 102, 241, .18);
  --nav-link: rgba(255, 255, 255, .75);
  --nav-hover: #ffffff;
  --nav-drop: rgba(10, 15, 30, .98);
  --shadow: 0 24px 64px rgba(0, 0, 0, .6);
  /* Section alt BG */
  --sec-alt: #0a0f1e;
  /* Footer */
  --foot-bg: #030712;
}

/* ================================================================
   LIGHT THEME — Royal Indigo + Gold Accent
   ================================================================ */
[data-theme="light"] {
  --bg: #f8fafc;
  --bg2: #f1f5f9;
  --bg3: #e2e8f0;
  --card: #ffffff;
  --card2: #f8fafc;
  --border: rgba(99, 102, 241, .10);
  --brdr2: rgba(99, 102, 241, .20);
  --text: #1e293b;
  --text2: #475569;
  --text3: #64748b;
  --head: #0f172a;
  /* Royal Indigo */
  --p1: #4f46e5;
  --p1d: #3730a3;
  --p1l: rgba(79, 70, 229, .1);
  /* Gold Accent */
  --p2: #d97706;
  --p2d: #b45309;
  --p2l: rgba(217, 119, 6, .1);
  /* Gradients */
  --g-btn: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%);
  --g-btn2: linear-gradient(135deg, #3730a3 0%, #0891b2 100%);
  --g-hero: linear-gradient(120deg, rgba(79, 70, 229, .90) 0%, rgba(6, 182, 212, .70) 100%);
  --g-bar: linear-gradient(90deg, #4f46e5, #06b6d4);
  /* Navbar */
  --nav-bg: rgba(255, 255, 255, .90);
  --nav-scrolled: rgba(255, 255, 255, .98);
  --nav-border: rgba(99, 102, 241, .12);
  --nav-link: #334155;
  --nav-hover: #0f172a;
  --nav-drop: rgba(255, 255, 255, .99);
  --shadow: 0 20px 60px rgba(15, 23, 42, .1);
  --sec-alt: #f1f5f9;
  --foot-bg: #0f172a;
}

/* ================================================================
   SMOOTH THEME TRANSITION
   ================================================================ */
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition: background-color .30s ease, color .30s ease,
    border-color .30s ease, box-shadow .30s ease !important;
}

/* ── GLOBAL RESET ───────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box !important;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: 'Inter', 'Space Grotesk', -apple-system, sans-serif !important;
  color: var(--text) !important;
  background: var(--bg) !important;
  -webkit-font-smoothing: antialiased !important;
  overflow-x: hidden !important;
  line-height: 1.65 !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -.025em !important;
  line-height: 1.12 !important;
  color: var(--head) !important;
}

p {
  color: var(--text2) !important;
}

a {
  text-decoration: none !important;
}

img {
  max-width: 100%;
  height: auto;
}

::selection {
  background: var(--p1l);
  color: var(--head);
}

::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: var(--bg2);
}

::-webkit-scrollbar-thumb {
  background: var(--p1);
  border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--p1d);
}

/* ── SCROLL PROGRESS ───────────────────────────────────── */
#scroll-progress {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 0 !important;
  height: 3px !important;
  background: var(--g-bar) !important;
  z-index: 999999 !important;
  box-shadow: 0 0 10px var(--p1l) !important;
  transition: width .1s linear !important;
}

/* ── OLD THEME ELEMENTS → HIDDEN ──────────────────────── */
.loader-wrap,
.preloader,
.main-header,
.top-bar,
.header-upper,
.sticky-header,
.mobile-menu,
.nav-overlay,
.main-footer,
.footer-bottom-two,
.whatsapp-float,
.scroll-to-top,
.religious-marquee,
#donate-popup {
  display: none !important;
}

/* ── PUSH BODY DOWN FOR FIXED NAVBAR ──────────────────── */
.page-wrapper {
  padding-top: 72px !important;
  background: var(--bg) !important;
}

section {
  background: var(--bg) !important;
}

.sec-alt-bg,
.events-section,
.causes-section,
.volunteer-section,
.testimonials-section,
.partners-section {
  background: var(--sec-alt) !important;
}

/* ================================================================
   FC NAVBAR
   ================================================================ */
.fc-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--nav-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--nav-border);
  transition: background .30s ease, box-shadow .30s ease;
}

.fc-navbar.scrolled {
  background: var(--nav-scrolled) !important;
  box-shadow: 0 4px 32px rgba(0, 0, 0, .28);
  border-bottom-color: var(--brdr2);
}

.fc-nav-inner {
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 28px;
  height: 72px;
  display: flex;
  align-items: center;
  gap: 28px;
}

/* Brand */
.fc-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.fc-brand-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
}

.fc-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.fc-brand-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--nav-hover) !important;
}

.fc-brand-sub {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text3) !important;
  text-transform: uppercase;
  letter-spacing: .12em;
}

/* Links */
.fc-nav-menu {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

.fc-nav-menu>li {
  position: relative;
}

.fc-nav-menu>li>a {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 13px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--nav-link) !important;
  transition: color .18s ease, background .18s ease;
}

.fc-nav-menu>li>a .fc-arr {
  font-size: 8px;
  opacity: .55;
  transition: transform .18s ease;
}

.fc-nav-menu>li:hover>a {
  color: var(--nav-hover) !important;
  background: var(--border);
}

.fc-nav-menu>li:hover>a .fc-arr {
  transform: rotate(180deg);
}

/* Dropdown */
.fc-drop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 215px;
  background: var(--nav-drop);
  backdrop-filter: blur(20px);
  border: 1px solid var(--brdr2);
  border-radius: 14px;
  padding: 8px;
  box-shadow: var(--shadow, 0 20px 60px rgba(0, 0, 0, .4));
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 100;
}

.fc-nav-menu>li:hover .fc-drop {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

.fc-drop a {
  display: block;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text2) !important;
  transition: all .18s ease;
}

.fc-drop a:hover {
  color: var(--head) !important;
  background: var(--p1l);
  padding-left: 19px;
}

/* Actions */
.fc-nav-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.fc-btn-ghost {
  padding: 8px 18px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 600;
  color: var(--nav-link) !important;
  border: 1px solid var(--brdr2);
  transition: all .18s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fc-btn-ghost:hover {
  color: var(--nav-hover) !important;
  border-color: var(--p1);
  background: var(--p1l);
}

.fc-btn-donate {
  padding: 9px 22px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 700;
  color: #fff !important;
  background: var(--g-btn);
  box-shadow: 0 4px 18px var(--p1l);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: transform .18s ease, box-shadow .18s ease;
}

.fc-btn-donate:hover {
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px var(--p1l);
}

/* Theme Toggle */
.fc-theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--card2);
  border: 1px solid var(--brdr2);
  color: var(--text2);
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .18s ease;
  flex-shrink: 0;
  outline: none;
}

.fc-theme-toggle:hover {
  background: var(--p1l);
  border-color: var(--p1);
  color: var(--p1);
  transform: rotate(20deg) scale(1.1);
}

/* Hamburger */
.fc-ham {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: background .18s ease;
}

.fc-ham:hover {
  background: var(--border);
}

.fc-ham span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--nav-hover);
  border-radius: 2px;
  transition: transform .32s cubic-bezier(.4, 0, .2, 1), opacity .18s ease;
}

.fc-ham.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.fc-ham.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.fc-ham.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile drawer */
.fc-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .65);
  z-index: 99998;
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
}

.fc-overlay.show {
  opacity: 1;
  visibility: visible;
}

.fc-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: min(360px, 92vw);
  height: 100dvh;
  height: 100vh;
  background: var(--bg2);
  border-left: 1px solid var(--border);
  z-index: 99999;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  transition: right .28s cubic-bezier(.4, 0, .2, 1);
}

.fc-drawer.show {
  right: 0;
}

.fc-drawer-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid var(--border);
}

.fc-drawer-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--border);
  border: none;
  cursor: pointer;
  color: var(--text2);
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .18s ease;
}

.fc-drawer-close:hover {
  background: var(--p1l);
  color: var(--p1);
}

.fc-drawer-body {
  flex: 1;
  padding: 14px 14px 0;
  overflow-y: auto;
}

.fc-dm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text2);
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all .18s ease;
  text-align: left;
}

.fc-dm-item:hover,
.fc-dm-item.open {
  color: var(--head);
  background: var(--p1l);
}

.fc-dm-item a {
  color: inherit !important;
  display: block;
  width: 100%;
}

.fc-dm-arr {
  font-size: 10px;
  opacity: .55;
  transition: transform .18s ease;
}

.fc-dm-item.open .fc-dm-arr {
  transform: rotate(180deg);
}

.fc-dm-sub {
  display: none;
  padding: 0 0 6px 14px;
}

.fc-dm-sub.show {
  display: block;
}

.fc-dm-sub a {
  display: block;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text3);
  transition: all .18s ease;
}

.fc-dm-sub a:hover {
  color: var(--head);
  background: var(--border);
}

.fc-drawer-ft {
  padding: 18px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fc-d-login {
  display: block;
  text-align: center;
  padding: 12px;
  border-radius: 99px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text2) !important;
  border: 1.5px solid var(--brdr2);
  transition: all .18s ease;
}

.fc-d-login:hover {
  color: var(--head) !important;
  border-color: var(--p1);
  background: var(--p1l);
}

.fc-d-donate {
  display: block;
  text-align: center;
  padding: 13px;
  border-radius: 99px;
  font-size: 14px;
  font-weight: 700;
  color: #fff !important;
  background: var(--g-btn);
  box-shadow: 0 4px 20px var(--p1l);
  transition: transform .18s ease;
}

/* Marquee */
.fc-marquee {
  background: var(--g-bar);
  padding: 10px 0;
  position: relative;
  z-index: 1;
}

.fc-marquee-wrap {
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  overflow: hidden;
}

.fc-mq-badge {
  background: rgba(255, 255, 255, .18);
  border-radius: 99px;
  padding: 4px 14px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .08em;
  flex-shrink: 0;
}

.fc-marquee marquee {
  color: rgba(255, 255, 255, .88);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
}

/* ================================================================
   PAGE TITLE & PAGE BANNER (inner pages — modern upgrade)
   ================================================================ */

/* ── Shared Hero Base ── */
.page-title,
.page-banner {
  background-size: cover !important;
  background-position: center !important;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.page-title {
  padding: 100px 0 80px !important;
}

/* Gradient overlay */
.page-title::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: var(--g-hero) !important;
  z-index: 1 !important;
}

/* Decorative floating shapes */
.page-title::after,
.page-banner::after {
  content: '' !important;
  position: absolute !important;
  width: 320px !important;
  height: 320px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255, 255, 255, .08), transparent 70%) !important;
  top: -100px !important;
  right: -80px !important;
  z-index: 1 !important;
  pointer-events: none !important;
  animation: fc-hero-float 8s ease-in-out infinite !important;
}

@keyframes fc-hero-float {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(-15px, 12px) scale(1.05);
  }
}

/* Second decorative orb via box-shadow trick on the parent */
.page-title .auto-container::before,
.page-banner .auto-container::before {
  content: '' !important;
  position: absolute !important;
  width: 200px !important;
  height: 200px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255, 255, 255, .06), transparent 70%) !important;
  bottom: -60px !important;
  left: -40px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  animation: fc-hero-float 10s ease-in-out 1s infinite !important;
}

/* Content z-index */
.page-title .auto-container,
.page-banner .auto-container {
  position: relative !important;
  z-index: 2 !important;
}

/* ── Typography ── */
.page-title h1,
.page-title .title,
.page-banner h1,
.page-banner .title h1 {
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  font-size: clamp(32px, 5vw, 54px) !important;
  font-weight: 800 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  letter-spacing: -.03em !important;
  margin-bottom: 14px !important;
  line-height: 1.15 !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .18) !important;
}

.page-banner .title p,
.page-banner .content-box>p {
  color: rgba(255, 255, 255, .88) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .88) !important;
  font-size: 16px !important;
  max-width: 640px !important;
  line-height: 1.7 !important;
  font-family: 'Inter', sans-serif !important;
}

.page-banner .content-box[style*="text-align: center"] .title p,
.page-banner .content-box[style*="text-align:center"] .title p {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ── Breadcrumbs — Modern Pill Style ── */
.bread-crumb,
.breadcrumb,
.breadcrumb-nav {
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  list-style: none !important;
}

.bread-crumb li,
.breadcrumb li,
.breadcrumb-nav li {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, .55) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .55) !important;
  display: inline-flex !important;
  align-items: center !important;
}

.bread-crumb li a,
.breadcrumb li a,
.breadcrumb-nav li a {
  color: rgba(255, 255, 255, .82) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .82) !important;
  font-size: 13px !important;
  transition: all .2s ease !important;
  text-decoration: none !important;
  background: rgba(255, 255, 255, .10) !important;
  padding: 4px 14px !important;
  border-radius: 99px !important;
  backdrop-filter: blur(6px) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
}

.bread-crumb li a:hover,
.breadcrumb li a:hover,
.breadcrumb-nav li a:hover {
  background: rgba(255, 255, 255, .20) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.bread-crumb li:last-child,
.breadcrumb li.active,
.breadcrumb-nav li.active {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-weight: 600 !important;
}

/* Separator */
.bread-crumb li::before {
  color: rgba(255, 255, 255, .35) !important;
  font-size: 11px !important;
}

.breadcrumb-item+.breadcrumb-item::before {
  color: rgba(255, 255, 255, .35) !important;
}

/* ── Animated gradient border at bottom ── */
.page-title .auto-container::after,
.page-banner .auto-container::after {
  content: '' !important;
  position: absolute !important;
  bottom: -80px !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  border-radius: 99px !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25), transparent) !important;
  z-index: 3 !important;
}

/* ── Light theme hero overrides ── */
[data-theme="light"] .page-title::before {
  background: linear-gradient(135deg, rgba(234, 88, 12, .92) 0%, rgba(217, 119, 6, .88) 100%) !important;
}

[data-theme="light"] .page-title::after,
[data-theme="light"] .page-banner::after {
  background: radial-gradient(circle, rgba(255, 255, 255, .12), transparent 70%) !important;
}

[data-theme="light"] .page-banner {
  filter: none !important;
}

/* For .page-banner pages that have inline gradient colors —
   light theme gets a warm overlay */
[data-theme="light"] .page-banner::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, rgba(234, 88, 12, .06) 0%, rgba(217, 119, 6, .04) 100%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
  mix-blend-mode: overlay !important;
}

/* page-title-section (services.php one-off) */
.page-title-section {
  position: relative !important;
  overflow: hidden !important;
}

.page-title-section::after {
  content: '' !important;
  position: absolute !important;
  width: 280px !important;
  height: 280px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255, 255, 255, .08), transparent 70%) !important;
  top: -80px !important;
  right: -60px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  animation: fc-hero-float 8s ease-in-out infinite !important;
}

/* ================================================================
   SECTION TITLES
   ================================================================ */
.sec-title {
  margin-bottom: 50px !important;
}

.sec-title .sub-title,
.sec-title h5 {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  background: var(--p1l) !important;
  color: var(--p1d) !important;
  padding: 5px 15px !important;
  border-radius: 99px !important;
  margin-bottom: 16px !important;
  font-family: 'Inter', sans-serif !important;
  border: none !important;
}

.sec-title.light .sub-title,
.sec-title.light h5 {
  background: rgba(255, 255, 255, .14) !important;
  color: #fff !important;
}

.sec-title h1,
.sec-title h2 {
  font-size: clamp(26px, 3.8vw, 50px) !important;
  font-weight: 700 !important;
  letter-spacing: -.03em !important;
  color: var(--head) !important;
  line-height: 1.10 !important;
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
}

.sec-title.light h1,
.sec-title.light h2 {
  color: #fff !important;
}

.sec-title .text,
.sec-title p {
  font-size: 16px !important;
  color: var(--text2) !important;
  line-height: 1.75 !important;
  margin-top: 14px !important;
}

.sec-title.text-center .text {
  margin: 14px auto 0 !important;
  max-width: 600px !important;
}

.sec-title::after,
.title-separator {
  display: none !important;
}

/* icon-box in sec-title: visible, themed */
.sec-title .icon-box {
  display: block;
  margin: 0 auto 10px;
}

.sec-title .icon-box span[class^="flaticon-"],
.sec-title .icon-box i.fa {
  color: var(--p1) !important;
  font-size: 40px !important;
}

/* ================================================================
   BUTTONS
   ================================================================ */
.theme-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border-radius: 99px !important;
  border: none !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}

.theme-btn:hover {
  transform: translateY(-3px) !important;
  text-decoration: none !important;
}

.theme-btn:active {
  transform: translateY(-1px) scale(.97) !important;
}

.theme-btn.btn-style-one,
.theme-btn.btn-style-fourteen {
  background: var(--g-btn) !important;
  color: #fff !important;
  padding: 13px 30px !important;
  box-shadow: 0 6px 24px var(--p1l) !important;
}

.theme-btn.btn-style-one:hover,
.theme-btn.btn-style-fourteen:hover {
  box-shadow: 0 12px 32px var(--p1l) !important;
  color: #fff !important;
}

.theme-btn.btn-style-four,
.donate-box-btn {
  background: var(--g-btn2) !important;
  color: #fff !important;
  padding: 13px 30px !important;
  box-shadow: 0 6px 22px var(--p2l) !important;
}

.theme-btn.btn-style-four:hover,
.donate-box-btn:hover {
  box-shadow: 0 12px 30px var(--p2l) !important;
  color: #fff !important;
}

.theme-btn.btn-style-five,
.theme-btn.btn-style-fifteen {
  background: transparent !important;
  color: var(--text2) !important;
  border: 1.5px solid var(--brdr2) !important;
  padding: 12px 28px !important;
}

.theme-btn.btn-style-five:hover,
.theme-btn.btn-style-fifteen:hover {
  background: var(--p1l) !important;
  color: var(--head) !important;
  border-color: var(--p1) !important;
}

/* ================================================================
   HERO BANNER
   ================================================================ */
.banner-section .swiper-slide,
.banner-section.style-five .swiper-slide {
  min-height: 650px !important;
  background-size: cover !important;
  background-position: center !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

.banner-section .swiper-slide::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: var(--g-hero) !important;
  z-index: 1 !important;
}

.banner-section .content-outer,
.banner-section .row {
  position: relative !important;
  z-index: 3 !important;
}

.banner-section .content-box .inner h1 {
  font-size: clamp(36px, 5.5vw, 80px) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: -.038em !important;
  line-height: 1.04 !important;
  margin-bottom: 20px !important;
}

.banner-section .content-box .inner h1 em {
  font-style: normal !important;
  background: linear-gradient(90deg, var(--p1), var(--p2)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.banner-section .content-box .inner .text,
.banner-section .content-box .inner p {
  font-size: clamp(15px, 2vw, 18px) !important;
  color: rgba(255, 255, 255, .76) !important;
  line-height: 1.72 !important;
  max-width: 580px !important;
  margin-bottom: 36px !important;
}

.banner-section .btn-box,
.banner-section .link-btn {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  align-items: center !important;
}

.banner-section-nav button,
.swiper-btn-prev,
.swiper-btn-next {
  background: rgba(255, 255, 255, .10) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 12px !important;
  color: #fff !important;
  transition: all .18s ease !important;
}

.banner-section-nav button:hover,
.swiper-btn-prev:hover,
.swiper-btn-next:hover {
  background: var(--p1) !important;
  border-color: var(--p1) !important;
  box-shadow: 0 6px 20px var(--p1l) !important;
}

/* ================================================================
   ABOUT / INTRO
   ================================================================ */
.intro-section,
.about-section {
  background: var(--bg) !important;
  padding: 100px 0 !important;
}

.about-section-three,
.about-section-two {
  background: var(--sec-alt) !important;
  padding: 90px 0 !important;
}

.intro-block-one .inner-box {
  border-radius: 20px !important;
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
  background: var(--card) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .08) !important;
  transition: transform .28s ease, box-shadow .28s ease !important;
}

.intro-block-one .inner-box:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .18) !important;
}

.intro-block-one .lower-content {
  padding: 24px !important;
}

.intro-block-one .campaigns a {
  color: var(--p1) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .10em !important;
}

.intro-block-one .lower-content h4 {
  font-weight: 700 !important;
  color: var(--head) !important;
}

.intro-block-one .lower-content .text {
  color: var(--text2) !important;
  font-size: 14px !important;
}

.intro-block-one .image img,
.intro-block-one img {
  transition: transform .6s ease !important;
}

.intro-block-one .inner-box:hover img {
  transform: scale(1.07) !important;
}

.intro-block-one .link-btn a,
.intro-block-one a.theme-btn {
  background: var(--p1l) !important;
  color: var(--p1d) !important;
  border-radius: 99px !important;
  padding: 8px 20px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  transition: all .18s ease !important;
  box-shadow: none !important;
}

.intro-block-one .link-btn a:hover,
.intro-block-one a.theme-btn:hover {
  background: var(--p1) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px var(--p1l) !important;
}

/* Experience block */
.experience-block {
  background: var(--g-btn) !important;
  border-radius: 20px !important;
  padding: 48px 36px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 8px 32px var(--p1l) !important;
}

.experience-block::before {
  content: '' !important;
  position: absolute !important;
  top: -80px;
  right: -80px;
  width: 260px !important;
  height: 260px !important;
  background: radial-gradient(circle, rgba(255, 255, 255, .18) 0, transparent 70%) !important;
  border-radius: 50% !important;
}

.experience-block h4 {
  color: rgba(255, 255, 255, .70) !important;
}

.experience-block h1 {
  font-size: 90px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* ================================================================
   SERVICES
   ================================================================ */
.services-section,
.our-services {
  background: var(--sec-alt) !important;
  padding: 90px 0 !important;
}

.service-block-one .inner-box,
.service-box {
  background: var(--card) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .08) !important;
  position: relative !important;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease !important;
}

.service-block-one .inner-box::after,
.service-box::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 20px !important;
  border: 2px solid var(--p1) !important;
  opacity: 0 !important;
  transition: opacity .28s ease !important;
  pointer-events: none !important;
}

.service-block-one .inner-box:hover,
.service-box:hover {
  transform: translateY(-12px) !important;
  border-color: transparent !important;
  box-shadow: 0 8px 32px var(--p1l), 0 20px 50px rgba(0, 0, 0, .10) !important;
}

.service-block-one .inner-box:hover::after,
.service-box:hover::after {
  opacity: 1 !important;
}

.service-block-one h4,
.service-box h4 {
  color: var(--head) !important;
  font-weight: 700 !important;
}

.service-block-one p,
.service-box p {
  color: var(--text2) !important;
  font-size: 14px !important;
}

.service-block-one img,
.service-box img {
  transition: transform .6s ease !important;
}

.service-block-one .inner-box:hover img,
.service-box:hover img {
  transform: scale(1.07) !important;
}

/* Dark feature blocks */
.feature-section-two {
  background: var(--bg2) !important;
  padding: 90px 0 !important;
}

.feature-block-four .inner-box {
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  padding: 36px 28px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all .28s ease !important;
}

.feature-block-four .inner-box::before {
  content: '' !important;
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  height: 2px !important;
  background: var(--g-btn) !important;
  opacity: 0 !important;
  transition: opacity .28s ease !important;
}

.feature-block-four .inner-box:hover {
  background: var(--p1l) !important;
  border-color: var(--p1) !important;
  transform: translateY(-8px) !important;
}

.feature-block-four .inner-box:hover::before {
  opacity: 1 !important;
}

.feature-block-four h4 {
  color: var(--head) !important;
  font-weight: 700 !important;
}

.feature-block-four p {
  color: var(--text2) !important;
}

.feature-block-four .icon-box span,
.feature-block-four .icon-box i {
  color: var(--p1) !important;
  font-size: 36px !important;
}

/* ================================================================
   COUNTER STATS
   ================================================================ */
.counter-section,
.fun-facts-section {
  background: var(--g-btn) !important;
  padding: 70px 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

.count-text,
.counter-block .count-text,
.fact-block .count-text,
.odometer {
  font-size: clamp(42px, 5vw, 64px) !important;
  font-weight: 700 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  color: #fff !important;
  line-height: 1 !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}

.counter-block .title,
.fact-block .title,
.counter-block h4,
.fact-block h4 {
  color: rgba(255, 255, 255, .78) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  margin-top: 8px !important;
}

/* ================================================================
   CAUSES
   ================================================================ */
.causes-section,
.causes-section-five {
  background: var(--bg) !important;
  padding: 90px 0 !important;
}

.cause-block-five .inner-box,
.cause-block .inner-box {
  border-radius: 20px !important;
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .08) !important;
  background: var(--card) !important;
  transition: transform .28s ease, box-shadow .28s ease !important;
}

.cause-block-five .inner-box:hover,
.cause-block .inner-box:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .14) !important;
}

.cause-block-five .image img,
.cause-block .image img {
  transition: transform .55s ease !important;
}

.cause-block-five .inner-box:hover .image img,
.cause-block .inner-box:hover .image img {
  transform: scale(1.07) !important;
}

.cause-block-five .lower-content,
.cause-block .lower-content {
  padding: 24px !important;
}

.cause-block-five .lower-content h4 a,
.cause-block .lower-content h4 a {
  color: var(--head) !important;
  font-weight: 700 !important;
  transition: color .18s ease !important;
}

.cause-block-five .lower-content h4 a:hover,
.cause-block .lower-content h4 a:hover {
  color: var(--p1) !important;
}

.progress-line .bar-inner {
  background: var(--p1) !important;
  border-radius: 99px !important;
}

.progress-line .bar {
  border-radius: 99px !important;
  background: var(--border) !important;
}

/* ================================================================
   TEAM
   ================================================================ */
.team-section,
.team-section-five {
  background: var(--sec-alt) !important;
  padding: 90px 0 !important;
}

.team-block .inner-box,
.team-block-five .inner-box {
  border-radius: 20px !important;
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .08) !important;
  background: var(--card) !important;
  transition: transform .28s ease, box-shadow .28s ease !important;
}

.team-block .inner-box:hover,
.team-block-five .inner-box:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .14) !important;
}

.team-block .image img,
.team-block-five .image img {
  transition: transform .55s ease !important;
}

.team-block .inner-box:hover .image img,
.team-block-five .inner-box:hover .image img {
  transform: scale(1.06) !important;
}

.team-block h4 a,
.team-block-five h4 a {
  color: var(--head) !important;
  font-weight: 700 !important;
  transition: color .18s ease !important;
}

.team-block h4 a:hover,
.team-block-five h4 a:hover {
  color: var(--p1) !important;
}

.team-block .designation,
.team-block-five .designation {
  color: var(--p1) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.team-block .social-icon li a {
  background: var(--border) !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--text2) !important;
  border: 1px solid var(--brdr2) !important;
  transition: all .18s ease !important;
}

.team-block .social-icon li a:hover {
  background: var(--p1) !important;
  border-color: var(--p1) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}

/* ================================================================
   TESTIMONIALS
   ================================================================ */
.testimonial-section,
.testimonial-section-three {
  background: var(--bg2) !important;
  padding: 80px 0 60px !important;
}

.testimonial-block .inner-box,
.testimonial-block-three .inner-box {
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  padding: 36px !important;
  backdrop-filter: blur(10px) !important;
  position: relative !important;
  transition: all .28s ease !important;
}

.testimonial-block .inner-box::before,
.testimonial-block-three .inner-box::before {
  content: '\201C' !important;
  position: absolute !important;
  top: 18px !important;
  left: 26px !important;
  font-size: 72px !important;
  line-height: 1 !important;
  color: var(--p1) !important;
  opacity: .22 !important;
  font-family: Georgia, serif !important;
}

.testimonial-block .inner-box:hover,
.testimonial-block-three .inner-box:hover {
  border-color: var(--p1) !important;
  background: var(--p1l) !important;
  transform: translateY(-6px) !important;
}

.testimonial-block .author-title,
.testimonial-block-three .author-title {
  color: var(--head) !important;
  font-weight: 700 !important;
}

.testimonial-block .designation,
.testimonial-block-three .designation {
  color: var(--p1) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.testimonial-block .text,
.testimonial-block-three .text {
  color: var(--text2) !important;
  line-height: 1.78 !important;
}

.testimonial-section .sec-title h1,
.testimonial-section-three .sec-title h1 {
  color: var(--head) !important;
}

/* ================================================================
   BLOG
   ================================================================ */
.blog-section,
.news-section {
  background: var(--bg) !important;
  padding: 90px 0 !important;
}

.news-block .inner-box,
.news-block-one .inner-box,
.blog-block .inner-box {
  border-radius: 20px !important;
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .09) !important;
  background: var(--card) !important;
  transition: transform .28s ease, box-shadow .28s ease !important;
}

[data-theme="dark"] .news-block-one .inner-box,
[data-theme="dark"] .news-block .inner-box {
  border-color: rgba(255, 255, 255, .11) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .40) !important;
  background: var(--card) !important;
}

.news-block .inner-box:hover,
.news-block-one .inner-box:hover,
.blog-block .inner-box:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .14) !important;
}

.news-block img,
.news-block-one img,
.blog-block img {
  transition: transform .55s ease !important;
}

.news-block .inner-box:hover img,
.news-block-one .inner-box:hover img,
.blog-block .inner-box:hover img {
  transform: scale(1.07) !important;
}

.news-block .lower-content,
.news-block-one .lower-content {
  padding: 24px !important;
}

.news-block h4 a,
.news-block-one h4 a,
.blog-block h4 a {
  color: var(--head) !important;
  font-weight: 700 !important;
  transition: color .18s ease !important;
}

.news-block h4 a:hover,
.news-block-one h4 a:hover,
.blog-block h4 a:hover {
  color: var(--p1) !important;
}

.news-block-one .category a {
  background: var(--p1l) !important;
  color: var(--p1d) !important;
  border-radius: 99px !important;
  padding: 3px 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}

.news-block .date,
.news-block-one .date {
  color: var(--text3) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.news-block-one .lower-content p {
  color: var(--text2) !important;
  font-size: 13px !important;
}

/* ================================================================
   GALLERY
   ================================================================ */
.gallery-section {
  background: var(--sec-alt) !important;
  padding: 90px 0 !important;
}

.gallery-section-two {
  background: var(--bg2) !important;
  padding: 0 !important;
}

.gallery-section-two .content-column {
  padding: 60px 50px !important;
  background: var(--bg3) !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.gallery-section-two .content-column .sec-title h5 {
  background: var(--p1l) !important;
  color: var(--p1d) !important;
}

.gallery-section-two .content-column .sec-title h1,
.gallery-section-two .content-column .sec-title h2 {
  color: var(--head) !important;
}

[data-theme="dark"] .gallery-section-two .content-column {
  background: rgba(255, 255, 255, .03) !important;
}

.gallery-section-two .link-btn a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--p1) !important;
  font-size: 14px;
  padding: 10px 22px;
  border-radius: 99px;
  background: var(--p1l);
  transition: all .18s ease;
}

.gallery-section-two .link-btn a:hover {
  background: var(--p1);
  color: #fff !important;
}

.gallery-block .inner-box,
.gallery-block-two .inner-box {
  border-radius: 14px !important;
  overflow: hidden !important;
}

.gallery-block img,
.gallery-block-two img {
  transition: transform .6s ease !important;
  display: block !important;
  width: 100% !important;
}

.gallery-block .inner-box:hover img,
.gallery-block-two .inner-box:hover img {
  transform: scale(1.10) !important;
}

.gallery-block .overlay,
.gallery-block-two .overlay {
  background: rgba(0, 0, 0, .75) !important;
}

/* ================================================================
   CALL TO ACTION
   ================================================================ */
.call-to-action,
.call-to-action-two {
  background-size: cover !important;
  background-position: center !important;
  padding: 110px 0 !important;
  position: relative !important;
}

.call-to-action::before,
.call-to-action-two::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: var(--g-hero) !important;
}

.call-to-action .auto-container,
.call-to-action-two .auto-container {
  position: relative !important;
  z-index: 2 !important;
}

.call-to-action h5,
.call-to-action-two h5 {
  color: var(--p1) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .14em !important;
}

.call-to-action h1,
.call-to-action-two h1 {
  color: #fff !important;
  font-size: clamp(28px, 4vw, 58px) !important;
  font-weight: 700 !important;
  letter-spacing: -.035em !important;
}

.call-to-action .text,
.call-to-action-two .text {
  color: rgba(255, 255, 255, .72) !important;
  font-size: 16px !important;
}

/* ================================================================
   DONATE SECTION
   ================================================================ */
.payment-donate-section,
.payment-donate-section-three {
  background: var(--bg2) !important;
  padding: 90px 0 !important;
}

.payment-donate-section .sec-bg-one,
.payment-donate-section .sec-bg-two,
.payment-donate-section-three .sec-bg-one,
.payment-donate-section-three .sec-bg-two {
  display: none !important;
}

.payment-donate-section .wrapper-box,
.payment-donate-section-three .wrapper-box {
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  padding: 44px !important;
  backdrop-filter: blur(18px) !important;
}

.chicklet-list {
  list-style: none !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.chicklet-list label {
  border: 2px solid var(--brdr2) !important;
  background: var(--bg3) !important;
  color: var(--text2) !important;
  border-radius: 14px !important;
  padding: 12px 26px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all .18s ease !important;
}

.chicklet-list label:hover,
.chicklet-list input[type=radio]:checked+label {
  background: var(--p1) !important;
  border-color: var(--p1) !important;
  color: #fff !important;
  box-shadow: 0 4px 20px var(--p1l) !important;
}

.bar-fill {
  background: var(--p1) !important;
  border-radius: 99px !important;
}

/* ================================================================
   FORMS
   ================================================================ */
.default-form input,
.default-form select,
.default-form textarea {
  border-radius: 14px !important;
  border: 1.5px solid var(--border) !important;
  background: var(--bg3) !important;
  color: var(--text) !important;
  padding: 14px 18px !important;
  font-size: 14.5px !important;
  font-family: 'Inter', sans-serif !important;
  transition: border-color .18s ease, box-shadow .18s ease !important;
}

.default-form input:focus,
.default-form select:focus,
.default-form textarea:focus {
  border-color: var(--p1) !important;
  box-shadow: 0 0 0 3px var(--p1l) !important;
  outline: none !important;
}

.default-form input::placeholder,
.default-form textarea::placeholder {
  color: var(--text3) !important;
}

/* ================================================================
   PARTNERS / SPONSORS
   ================================================================ */
.client-section,
.sponsors-section {
  border-top: none !important;
  border-bottom: none !important;
  background: var(--bg) !important;
  padding: 72px 0 !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
}

.client-section .sec-title {
  margin-bottom: 36px !important;
}

.sponsors-carousel .image {
  padding: 10px 16px;
}

.sponsors-carousel .image img {
  filter: grayscale(50%) !important;
  opacity: .65 !important;
  transition: all .28s ease !important;
}

.sponsors-carousel .image:hover img {
  filter: none !important;
  opacity: 1 !important;
  transform: scale(1.07) !important;
}

.client-section .text-two {
  text-align: center;
  color: var(--text3);
  font-size: 14px;
  margin-top: 28px;
}

.client-section .text-two a {
  color: var(--p1);
  font-weight: 600;
}

/* Events */
.event-block .inner-box {
  border-radius: 20px !important;
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .08) !important;
  background: var(--card) !important;
  transition: transform .28s ease, box-shadow .28s ease !important;
}

.event-block .inner-box:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .14) !important;
}

.event-block h4 a {
  color: var(--head) !important;
  font-weight: 700 !important;
  transition: color .18s ease !important;
}

.event-block h4 a:hover {
  color: var(--p1) !important;
}

/* Owl dots */
.owl-dots .owl-dot span {
  background: var(--border) !important;
  border-radius: 99px !important;
  transition: all .18s ease !important;
  width: 10px !important;
  height: 10px !important;
}

.owl-dots .owl-dot.active span,
.owl-dots .owl-dot:hover span {
  background: var(--p1) !important;
  width: 28px !important;
}

/* ================================================================
   FC FOOTER + NEWSLETTER (ULTRA MODERN v3)
   ================================================================ */
.fc-f-container {
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ════ NEWSLETTER v3 — ULTRA MODERN ════ */
.fc-nl3 {
  position: relative;
  overflow: hidden;
  padding: 72px 0 64px;
  background: var(--g-btn);
}

.fc-nl3-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.fc-nl3-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .35;
}

.fc-nl3-orb1 {
  width: 500px;
  height: 500px;
  top: -150px;
  right: -100px;
  background: rgba(255, 255, 255, .15);
  animation: fcNl3Float 8s ease-in-out infinite alternate;
}

.fc-nl3-orb2 {
  width: 350px;
  height: 350px;
  bottom: -120px;
  left: -80px;
  background: rgba(255, 255, 255, .10);
  animation: fcNl3Float 10s ease-in-out infinite alternate-reverse;
}

@keyframes fcNl3Float {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(30px, -20px) scale(1.1);
  }
}

.fc-nl3-mesh {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(255, 255, 255, .06) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, .04) 0%, transparent 40%);
}

.fc-nl3-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}

.fc-nl3-content {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 1;
  min-width: 300px;
}

.fc-nl3-icon-box {
  position: relative;
  flex-shrink: 0;
  width: 68px;
  height: 68px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .14);
  backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255, 255, 255, .22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #fff;
}

.fc-nl3-icon-pulse {
  position: absolute;
  inset: -8px;
  border-radius: 26px;
  border: 2px solid rgba(255, 255, 255, .18);
  animation: fcNl3Pulse 2.5s ease-out infinite;
}

@keyframes fcNl3Pulse {
  0% {
    transform: scale(1);
    opacity: .6;
  }

  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}

.fc-nl3-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 99px;
  margin-bottom: 8px;
  border: 1px solid rgba(255, 255, 255, .20);
}

.fc-nl3-label i {
  font-size: 10px;
}

.fc-nl3-text h3 {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 800 !important;
  font-size: 24px !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  margin: 0 0 6px !important;
  line-height: 1.2 !important;
}

.fc-nl3-text p {
  font-size: 14px !important;
  color: rgba(255, 255, 255, .72) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .72) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

.fc-nl3-action {
  flex-shrink: 0;
  min-width: 380px;
}

.fc-nl3-form {
  width: 100%;
}

.fc-nl3-input-group {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255, 255, 255, .10);
  backdrop-filter: blur(14px);
  border: 1.5px solid rgba(255, 255, 255, .22);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .2s, background .2s, box-shadow .3s;
}

.fc-nl3-input-group:focus-within {
  border-color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .16);
  box-shadow: 0 0 30px rgba(255, 255, 255, .08);
}

.fc-nl3-input-group>i {
  color: rgba(255, 255, 255, .45);
  font-size: 15px;
  padding-left: 20px;
  flex-shrink: 0;
}

.fc-nl3-input-group input {
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  font-size: 14.5px;
  padding: 16px 14px;
  width: 100%;
  outline: none !important;
  font-family: 'Inter', sans-serif;
  -webkit-text-fill-color: #fff !important;
}

.fc-nl3-input-group input::placeholder {
  color: rgba(255, 255, 255, .42) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .42) !important;
}

.fc-nl3-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 30px;
  margin: 4px;
  border-radius: 13px;
  background: #fff;
  color: var(--p1d, #16a34a);
  border: none;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
  transition: all .25s ease;
}

.fc-nl3-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .32);
}

.fc-nl3-submit i {
  font-size: 12px;
  transition: transform .2s;
}

.fc-nl3-submit:hover i {
  transform: translateX(4px);
}

.fc-nl3-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
}

.fc-nl3-perks span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, .58);
}

.fc-nl3-perks span i {
  color: rgba(255, 255, 255, .75);
  font-size: 12px;
}

/* ════ FOOTER v3 — ULTRA MODERN ════ */
.fc-foot3 {
  background: var(--foot-bg, #070d1c);
  position: relative;
  overflow: hidden;
}

/* Animated gradient top bar */
.fc-foot3-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--p1), var(--p2), var(--p1), var(--p2));
  background-size: 300% 100%;
  animation: fcFoot3Bar 6s linear infinite;
}

@keyframes fcFoot3Bar {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 300% 50%;
  }
}

/* Ambient glow */
.fc-foot3-glow1 {
  position: absolute;
  top: -250px;
  left: 20%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, var(--p1l) 0%, transparent 70%);
  opacity: .25;
  filter: blur(50px);
}

.fc-foot3-glow2 {
  position: absolute;
  top: -180px;
  right: 15%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(59, 130, 246, .15) 0%, transparent 70%);
  opacity: .20;
  filter: blur(60px);
}

/* ── Impact Stats Ribbon ── */
.fc-foot3-ribbon {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: rgba(255, 255, 255, .03);
  backdrop-filter: blur(8px);
  margin-top: 56px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.fc-foot3-ribbon-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 28px 32px;
  position: relative;
  transition: background .3s;
}

.fc-foot3-ribbon-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: var(--border);
}

.fc-foot3-ribbon-item:hover {
  background: rgba(255, 255, 255, .04);
}

.fc-foot3-ri-num {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  font-size: 32px;
  line-height: 1;
  background: var(--g-btn);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.fc-foot3-ri-label {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ── Main Footer Grid ── */
.fc-foot3-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1.4fr;
  gap: 48px;
  padding: 56px 0 52px;
}

/* Brand */
.fc-foot3-logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  margin-bottom: 20px;
}

.fc-foot3-logo-img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .25));
}

.fc-foot3-logo-name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: var(--head);
  line-height: 1.15;
}

.fc-foot3-logo-sub {
  font-size: 10px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 700;
  margin-top: 2px;
}

.fc-foot3-desc {
  color: var(--text2) !important;
  font-size: 13.5px !important;
  line-height: 1.85 !important;
  margin: 0 0 22px !important;
}

.fc-foot3-social {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.fc-foot3-social a {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  position: relative;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text2);
  font-size: 15px;
  transition: all .28s cubic-bezier(.34, 1.56, .64, 1);
  overflow: hidden;
}

.fc-foot3-social a::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--g-btn);
  opacity: 0;
  transition: opacity .28s;
  border-radius: 13px;
}

.fc-foot3-social a:hover {
  border-color: transparent;
  color: #fff;
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 8px 26px var(--p1l);
}

.fc-foot3-social a:hover::before {
  opacity: 1;
}

.fc-foot3-social a i {
  position: relative;
  z-index: 1;
}

/* Columns */
.fc-foot3-heading {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--head) !important;
  -webkit-text-fill-color: var(--head) !important;
  margin-bottom: 24px !important;
  padding-bottom: 14px !important;
  position: relative;
}

.fc-foot3-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 36px;
  height: 3px;
  border-radius: 99px;
  background: var(--g-btn);
}

.fc-foot3-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fc-foot3-links li {
  margin-bottom: 6px;
}

.fc-foot3-links a {
  color: var(--text2) !important;
  -webkit-text-fill-color: var(--text2) !important;
  font-size: 13.5px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all .22s ease;
  text-decoration: none;
  padding: 5px 0;
}

.fc-foot3-links a i {
  font-size: 8px;
  color: var(--p1);
  opacity: .3;
  transition: opacity .22s, transform .22s;
}

.fc-foot3-links a:hover {
  color: var(--head) !important;
  -webkit-text-fill-color: var(--head) !important;
  padding-left: 6px;
}

.fc-foot3-links a:hover i {
  opacity: 1;
  transform: translateX(2px);
}

/* Contact */
.fc-foot3-contact {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fc-foot3-contact li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.fc-foot3-ci {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--p1l), rgba(59, 130, 246, .08));
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--p1);
  font-size: 15px;
  transition: all .25s;
}

.fc-foot3-contact li:hover .fc-foot3-ci {
  background: var(--g-btn);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 20px var(--p1l);
  transform: translateY(-2px);
}

.fc-foot3-contact small {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--text3) !important;
  -webkit-text-fill-color: var(--text3) !important;
  display: block;
  margin-bottom: 3px;
}

.fc-foot3-contact a,
.fc-foot3-contact span {
  color: var(--text2) !important;
  -webkit-text-fill-color: var(--text2) !important;
  font-size: 13.5px;
  text-decoration: none;
  transition: color .2s;
}

.fc-foot3-contact a:hover {
  color: var(--p1) !important;
  -webkit-text-fill-color: var(--p1) !important;
}

/* Map */
.fc-foot3-map {
  margin-top: 18px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
  transition: box-shadow .3s, transform .3s;
}

.fc-foot3-map:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
  transform: translateY(-2px);
}

/* ── Copyright ── */
.fc-foot3-copyright {
  border-top: 1px solid var(--border);
  padding: 20px 0;
  background: rgba(0, 0, 0, .18);
}

.fc-foot3-cr-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.fc-foot3-cr-inner p {
  color: var(--text3) !important;
  -webkit-text-fill-color: var(--text3) !important;
  font-size: 13px !important;
  margin: 0 !important;
}

.fc-foot3-cr-inner a {
  color: var(--text3) !important;
  -webkit-text-fill-color: var(--text3) !important;
  text-decoration: none;
  transition: color .2s;
}

.fc-foot3-cr-inner a:hover {
  color: var(--p1) !important;
  -webkit-text-fill-color: var(--p1) !important;
}

.fc-foot3-cr-links {
  display: flex;
  gap: 20px;
}

.fc-foot3-cr-links a {
  font-size: 12.5px;
  font-weight: 500;
}

.fc-foot3-dev {
  font-size: 12.5px !important;
}

/* ════ Light theme footer — stays dark ════ */
[data-theme="light"] .fc-foot3 {
  background: #0f172a;
}

[data-theme="light"] .fc-foot3 .fc-foot3-logo-name {
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
}

[data-theme="light"] .fc-foot3 .fc-foot3-logo-sub {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
}

[data-theme="light"] .fc-foot3 .fc-foot3-desc {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
}

[data-theme="light"] .fc-foot3 .fc-foot3-heading {
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
}

[data-theme="light"] .fc-foot3 .fc-foot3-heading::after {
  background: linear-gradient(90deg, #ea580c, #d97706) !important;
}

[data-theme="light"] .fc-foot3 .fc-foot3-links a {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
}

[data-theme="light"] .fc-foot3 .fc-foot3-links a i {
  color: #ea580c !important;
}

[data-theme="light"] .fc-foot3 .fc-foot3-links a:hover {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

[data-theme="light"] .fc-foot3 .fc-foot3-ci {
  background: rgba(234, 88, 12, .10) !important;
  color: #ea580c !important;
  border-color: rgba(234, 88, 12, .18) !important;
}

[data-theme="light"] .fc-foot3 .fc-foot3-contact li:hover .fc-foot3-ci {
  background: linear-gradient(135deg, #ea580c, #d97706) !important;
  color: #fff !important;
}

[data-theme="light"] .fc-foot3 .fc-foot3-contact small {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
}

[data-theme="light"] .fc-foot3 .fc-foot3-contact a,
[data-theme="light"] .fc-foot3 .fc-foot3-contact span {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
}

[data-theme="light"] .fc-foot3 .fc-foot3-contact a:hover {
  color: #ea580c !important;
  -webkit-text-fill-color: #ea580c !important;
}

[data-theme="light"] .fc-foot3 .fc-foot3-social a {
  background: rgba(255, 255, 255, .06) !important;
  border-color: rgba(255, 255, 255, .10) !important;
  color: #94a3b8 !important;
}

[data-theme="light"] .fc-foot3 .fc-foot3-social a:hover {
  color: #fff !important;
}

[data-theme="light"] .fc-foot3 .fc-foot3-social a::before {
  background: linear-gradient(135deg, #ea580c, #d97706) !important;
}

[data-theme="light"] .fc-foot3 .fc-foot3-ribbon {
  border-color: rgba(255, 255, 255, .08) !important;
}

[data-theme="light"] .fc-foot3 .fc-foot3-ribbon-item::after {
  background: rgba(255, 255, 255, .06) !important;
}

[data-theme="light"] .fc-foot3 .fc-foot3-ri-num {
  background: linear-gradient(135deg, #ea580c, #d97706) !important;
  -webkit-background-clip: text !important;
}

[data-theme="light"] .fc-foot3 .fc-foot3-ri-label {
  color: #94a3b8 !important;
}

[data-theme="light"] .fc-foot3 .fc-foot3-map {
  border-color: rgba(255, 255, 255, .10) !important;
}

[data-theme="light"] .fc-foot3 .fc-foot3-copyright {
  border-color: rgba(255, 255, 255, .06) !important;
}

[data-theme="light"] .fc-foot3 .fc-foot3-cr-inner p,
[data-theme="light"] .fc-foot3 .fc-foot3-cr-inner a {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
}

[data-theme="light"] .fc-foot3 .fc-foot3-cr-inner a:hover {
  color: #ea580c !important;
  -webkit-text-fill-color: #ea580c !important;
}

[data-theme="light"] .fc-foot3 .fc-foot3-topbar {
  background: linear-gradient(90deg, #ea580c, #d97706, #ea580c, #d97706) !important;
  background-size: 300% 100% !important;
}

[data-theme="light"] .fc-foot3-glow1 {
  opacity: .12 !important;
}

[data-theme="light"] .fc-foot3-glow2 {
  opacity: .08 !important;
}

/* ── FLOATING ACTION BUTTONS (WhatsApp + Scroll-Top) ── */
.fc-wa {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9990;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid rgba(37, 211, 102, .45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #25d366;
  font-size: 22px;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(37, 211, 102, .18);
  transition: all .32s cubic-bezier(.34, 1.56, .64, 1);
  overflow: hidden;
}

.fc-wa::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25d366;
  transform: scale(0);
  transition: transform .32s cubic-bezier(.34, 1.56, .64, 1);
  z-index: -1;
}

.fc-wa:hover {
  color: #fff;
  border-color: transparent;
  transform: scale(1.16) translateY(-3px);
  box-shadow: 0 14px 36px rgba(37, 211, 102, .55);
}

.fc-wa:hover::before {
  transform: scale(1);
}

/* Pulse ring on WhatsApp */
.fc-wa::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, .35);
  animation: fcWaPulse 2.2s ease-out infinite;
}

@keyframes fcWaPulse {
  0% {
    transform: scale(1);
    opacity: .7;
  }

  100% {
    transform: scale(1.55);
    opacity: 0;
  }
}

.fc-totop {
  position: fixed;
  bottom: 92px;
  right: 28px;
  z-index: 9990;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid rgba(var(--p1-rgb, 34, 197, 94), .45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--p1);
  border-color: var(--p1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 4px 16px var(--p1l);
  opacity: 0;
  visibility: hidden;
  transition: all .32s cubic-bezier(.34, 1.56, .64, 1);
  overflow: hidden;
}

.fc-totop::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--g-btn);
  transform: scale(0);
  transition: transform .32s cubic-bezier(.34, 1.56, .64, 1);
  z-index: -1;
}

.fc-totop.show {
  opacity: 1;
  visibility: visible;
}

.fc-totop:hover {
  color: #fff;
  border-color: transparent;
  transform: translateY(-4px) scale(1.1);
  box-shadow: 0 12px 32px var(--p1l);
}

.fc-totop:hover::before {
  transform: scale(1);
}

.fc-totop i {
  transition: transform .2s ease;
}

.fc-totop:hover i {
  transform: translateY(-2px);
}

/* ================================================================
   FC NEWSLETTER BAR
   ================================================================ */
.fc-newsletter-bar {
  background: linear-gradient(135deg, var(--p1) 0%, var(--p2) 100%);
  padding: 52px 0;
  position: relative;
  overflow: hidden;
}

.fc-newsletter-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.fc-f-container {
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 28px;
}

.fc-nl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.fc-nl-left {
  flex: 1;
  min-width: 280px;
}

.fc-nl-badge {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  margin-bottom: 14px;
  backdrop-filter: blur(8px);
}

.fc-nl-left h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #fff !important;
  margin-bottom: 6px;
  letter-spacing: -.02em;
}

.fc-nl-left p {
  color: rgba(255, 255, 255, .82) !important;
  font-size: 14.5px;
  margin-bottom: 16px;
}

.fc-nl-perks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fc-nl-perks li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, .86) !important;
}

.fc-nl-perks li i {
  color: rgba(255, 255, 255, .9) !important;
  font-size: 14px;
  flex-shrink: 0;
}

.fc-nl-form {
  flex: 0 0 380px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fc-nl-email {
  width: 100%;
  padding: 14px 20px;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .12) !important;
  color: #fff !important;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  outline: none;
  transition: border-color .2s ease, background .2s ease;
  backdrop-filter: blur(8px);
}

.fc-nl-email::placeholder {
  color: rgba(255, 255, 255, .6) !important;
}

.fc-nl-email:focus {
  border-color: rgba(255, 255, 255, .6) !important;
  background: rgba(255, 255, 255, .18) !important;
  box-shadow: none !important;
}

.fc-nl-submit {
  width: 100%;
  padding: 14px 24px;
  border-radius: 12px;
  background: #fff;
  color: var(--p1d) !important;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.fc-nl-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
  background: #f1f5f9;
}

/* ================================================================
   FC FOOTER
   ================================================================ */
.fc-footer {
  background: var(--foot-bg, #030712);
  border-top: 1px solid rgba(99, 102, 241, .12);
  position: relative;
}

.fc-footer-top {
  padding: 72px 0 56px;
}

.fc-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: 40px;
}

/* Col: Brand */
.fc-f-brand-col {
  padding-right: 16px;
}

.fc-f-brand-tag {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  text-decoration: none !important;
}

.fc-f-brand-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 10px;
  background: var(--card);
  padding: 4px;
  border: 1px solid var(--border);
}

.fc-f-brand-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #fff !important;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.fc-f-brand-sub {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, .45) !important;
  text-transform: uppercase;
  letter-spacing: .18em;
  margin-top: 2px;
}

.fc-f-about {
  color: rgba(148, 163, 184, .85) !important;
  font-size: 13.5px;
  line-height: 1.75;
  margin-bottom: 22px;
}

/* Social icons */
.fc-f-social {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.fc-f-social a {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text3) !important;
  font-size: 14px;
  transition: all .18s ease;
}

.fc-f-social a:hover {
  background: var(--p1l);
  border-color: var(--p1);
  color: var(--p1) !important;
  transform: translateY(-3px);
}

/* Impact mini stats */
.fc-impact-stats-wrap {
  border-top: 1px solid var(--border);
  padding-top: 22px;
}

.fc-stats-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text3) !important;
  margin-bottom: 14px;
}

.fc-stats-mini-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.fc-mini-stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
  --sc: var(--p1);
}

.fc-stat-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: var(--sc) !important;
  line-height: 1;
  margin-bottom: 4px;
}

.fc-stat-lbl {
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text3) !important;
}

/* Columns: links */
.fc-f-col-title {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  color: rgba(255, 255, 255, .4) !important;
  margin-bottom: 20px !important;
}

.fc-f-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fc-f-links li a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 0;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(148, 163, 184, .85) !important;
  transition: color .18s ease, padding-left .18s ease;
  border-bottom: none;
}

.fc-f-links li a::before {
  content: '→';
  font-size: 11px;
  opacity: 0;
  margin-left: -12px;
  transition: opacity .18s ease, margin-left .18s ease;
  color: var(--p1);
}

.fc-f-links li a:hover {
  color: #fff !important;
  padding-left: 8px;
}

.fc-f-links li a:hover::before {
  opacity: 1;
  margin-left: 0;
}

/* Col 4: Contact */
.fc-f-contact {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fc-f-contact li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13.5px;
  color: rgba(148, 163, 184, .85) !important;
  line-height: 1.55;
}

.fc-f-contact li i {
  color: var(--p1) !important;
  font-size: 15px;
  margin-top: 2px;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

.fc-f-contact li a {
  color: rgba(148, 163, 184, .85) !important;
  transition: color .18s ease;
}

.fc-f-contact li a:hover {
  color: var(--p1) !important;
}

/* Map */
.fc-footer-map-box {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
}

/* Copyright */
.fc-copyright-bar {
  border-top: 1px solid var(--border);
  padding: 20px 0;
}

.fc-cr-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.fc-cr-text {
  font-size: 13px;
  color: rgba(100, 116, 139, .85) !important;
  margin: 0;
}

.fc-cr-text a {
  color: var(--p1) !important;
  font-weight: 600;
  transition: color .18s ease;
}

.fc-cr-text a:hover {
  color: var(--p2) !important;
}

.fc-cr-links {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fc-cr-links a {
  font-size: 12px;
  color: rgba(100, 116, 139, .75) !important;
  padding: 4px 10px;
  border-radius: 6px;
  transition: all .18s ease;
}

.fc-cr-links a:hover {
  color: var(--p1) !important;
  background: var(--p1l);
}

.fc-cr-dev {
  font-size: 12px;
  color: rgba(100, 116, 139, .65) !important;
  margin: 0;
}

.fc-cr-dev a {
  color: var(--p1) !important;
  font-weight: 600;
  transition: color .18s ease;
}

.fc-cr-dev a:hover {
  color: var(--p2) !important;
}

/* WhatsApp Button */
.fc-wa {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25d366;
  color: #fff !important;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  box-shadow: 0 6px 24px rgba(37, 211, 102, .45);
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), box-shadow .22s ease;
  text-decoration: none !important;
}

.fc-wa:hover {
  transform: scale(1.12) translateY(-4px);
  box-shadow: 0 12px 36px rgba(37, 211, 102, .55);
  color: #fff !important;
}

/* ================================================================
   RESPONSIVE - FOOTER
   ================================================================ */
@media (max-width: 1100px) {
  .fc-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }

  .fc-f-brand-col {
    padding-right: 0;
  }

  .fc-stats-mini-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .fc-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  .fc-nl-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .fc-nl-form {
    flex: 1 1 100%;
    width: 100%;
  }

  .fc-cr-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

@media (max-width: 540px) {
  .fc-footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .fc-footer-top {
    padding: 48px 0 36px;
  }

  .fc-newsletter-bar {
    padding: 36px 0;
  }

  .fc-nl-left h3 {
    font-size: 20px;
  }

  .fc-stats-mini-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media(max-width:1200px) {
  .fc-nav-menu>li>a {
    padding: 8px 10px;
    font-size: 13px;
  }
}

@media(max-width:991px) {

  .fc-nav-menu,
  .fc-nav-cta {
    display: none !important;
  }

  .fc-ham {
    display: flex !important;
  }

  .fc-foot3-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }

  .fc-foot3-ribbon {
    grid-template-columns: repeat(2, 1fr);
  }

  .fc-foot3-ribbon-item:nth-child(2)::after {
    display: none;
  }

  .fc-nl3-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .fc-nl3-action {
    min-width: 100%;
    width: 100%;
  }
}

@media(max-width:600px) {
  .fc-foot3-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 40px 0 36px;
  }

  .fc-foot3-ribbon {
    grid-template-columns: 1fr 1fr;
  }

  .fc-foot3-ribbon-item {
    padding: 20px 18px;
  }

  .fc-foot3-ri-num {
    font-size: 24px;
  }

  .fc-nl3-input-group {
    flex-direction: column;
    border-radius: 16px;
  }

  .fc-nl3-input-group>i {
    display: none;
  }

  .fc-nl3-input-group input {
    padding: 14px 18px;
  }

  .fc-nl3-submit {
    width: 100%;
    justify-content: center;
    margin: 0;
    border-radius: 0 0 14px 14px;
  }

  .fc-nl3-content {
    min-width: unset;
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .fc-nl3-action {
    min-width: unset;
  }

  .fc-foot3-cr-inner {
    flex-direction: column;
    text-align: center;
  }

  .fc-wa {
    bottom: 18px;
    right: 14px;
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  .fc-totop {
    bottom: 74px;
    right: 14px;
    width: 36px;
    height: 36px;
    font-size: 13px;
  }

  .banner-section .content-box .inner h1 {
    font-size: clamp(28px, 8vw, 44px) !important;
  }
}

/* ── ADDITIONAL UI & DASHBOARD THEME FIXES ── */
input,
select,
textarea,
.form-control {
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  border-color: var(--p1) !important;
  box-shadow: 0 0 0 3px var(--p1l) !important;
}

.inner-box,
.info-box,
.feature-box,
.donation-box,
.stat-card,
.info-card,
.action-card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

.alert-success {
  background: rgba(34, 197, 94, .15) !important;
  border: 1px solid rgba(34, 197, 94, .3) !important;
  color: #86efac !important;
}

.alert-danger {
  background: rgba(239, 68, 68, .15) !important;
  border: 1px solid rgba(239, 68, 68, .3) !important;
  color: #fca5a5 !important;
}

[data-theme="light"] .alert-success {
  background: #f0fdf4 !important;
  color: #166534 !important;
}

[data-theme="light"] .alert-danger {
  background: #fef2f2 !important;
  color: #991b1b !important;
}

[data-theme="dark"] .table th {
  background: var(--bg3) !important;
  color: var(--head) !important;
  border-color: var(--border) !important;
}

[data-theme="dark"] .table td {
  background: var(--card) !important;
  color: var(--text2) !important;
  border-color: var(--border) !important;
}

.stat-card-gradient-1 {
  background: var(--g-btn) !important;
}

.stat-card-gradient-2 {
  background: var(--g-btn2) !important;
}

.stat-card-gradient-3 {
  background: linear-gradient(135deg, var(--p1) 0%, var(--p2) 100%) !important;
}