/* ============================================================

   Kilkari FOUNDATION — MAIN STYLESHEET

   Author: Kilkari Dev Team

   Version: 1.0

   ============================================================ */



/* ===== CSS CUSTOM PROPERTIES (DESIGN TOKENS) ===== */



:root {

  --primary: #ff6b35;

  --primary-dark: #e8521a;

  --primary-light: #ff9f1c;

  --secondary: #9b5de5;

  --secondary-dark: #6a0dad;

  --accent: #2ec4b6;

  --accent-dark: #0077b6;

  --success: #06d6a0;

  --warning: #ffd166;

  --danger: #ef476f;

  --dark: #0d0d1a;

  --dark-2: #151528;

  --dark-3: #1e1e38;

  --body-bg: #fafafa;

  --text-dark: #1a1a2e;

  --text-muted: #6b7280;

  --text-light: #9ca3af;

  --white: #ffffff;

  --border-color: #e5e7eb;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);

  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);

  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.18);

  --shadow-color: 0 8px 32px rgba(255, 107, 53, 0.25);

  --gradient-primary: linear-gradient(135deg, #ff6b35 0%, #ff9f1c 100%);

  --gradient-secondary: linear-gradient(135deg, #9b5de5 0%, #6a0dad 100%);

  --gradient-accent: linear-gradient(135deg, #2ec4b6 0%, #0077b6 100%);

  --gradient-hero: linear-gradient(

    135deg,

    #0d0d1a 0%,

    #1e0533 50%,

    #0d1b3a 100%

  );

  --radius-sm: 8px;

  --radius-md: 16px;

  --radius-lg: 24px;

  --radius-xl: 40px;

  --radius-full: 999px;

  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  --font-heading: "Nunito", sans-serif;

  --font-body: "Poppins", sans-serif;

  --header-h: 140px;

}



/* ===== DROPDOWN ARROW STYLES ===== */

.navbar-nav .dropdown-toggle {

  outline: none !important;

  border: none !important;

  position: relative;

}



.navbar-nav .dropdown-toggle::after {

  display: none !important;

}



.navbar-nav .dropdown-toggle:focus {

  box-shadow: none !important;

  outline: none !important;

}



/* Arrow Icon */

.arrow-icon {

  display: inline-block;

  font-size: 0.75rem;

  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



.dropdown-toggle[aria-expanded="true"] .arrow-icon {

  transform: rotate(180deg);

}



/* Dropdown Menu Styling */

.navbar-nav .dropdown-menu {

  background: linear-gradient(

    145deg,

    rgba(18, 24, 38, 0.96),

    rgba(12, 17, 29, 0.96)

  ) !important;

  border: 1px solid rgba(255, 159, 28, 0.35) !important;

  border-radius: 8px !important;

  box-shadow:

    0 14px 34px rgba(0, 0, 0, 0.34),

    0 0 0 1px rgba(255, 107, 53, 0.08) inset !important;

  backdrop-filter: blur(10px);

  animation: dropdownSlide 0.25s ease-out;

  margin-top: 10px !important;

  padding: 6px !important;

  min-width: 190px !important;

  overflow: hidden;

}



@keyframes dropdownSlide {

  from {

    opacity: 0;

    transform: translateY(-8px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



.navbar-nav .dropdown-item {

  color: rgba(255, 255, 255, 0.85) !important;

  font-size: 0.88rem;

  font-weight: 500;

  padding: 10px 16px !important;

  transition:

    background-color 0.22s ease,

    color 0.22s ease;

  border-left: 2px solid transparent;

  margin: 0 !important;

  border-radius: 6px;

  position: relative;

  background: transparent !important;

}



.navbar-nav .dropdown-item:hover {

  background: rgba(255, 107, 53, 0.22) !important;

  color: var(--primary) !important;

  border-left-color: var(--primary) !important;

}



@media (min-width: 1200px) {

  .navbar-nav .dropdown:hover > .dropdown-menu,

  .navbar-nav .dropdown:focus-within > .dropdown-menu {

    display: block;

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

  }



  .navbar-nav .dropdown-menu {

    display: block;

    opacity: 0;

    visibility: hidden;

    transform: translateY(-8px);

    transition:

      opacity 0.2s ease,

      visibility 0.2s ease,

      transform 0.2s ease;

    pointer-events: none;

  }



  .navbar-nav .dropdown:hover > .dropdown-menu,

  .navbar-nav .dropdown:focus-within > .dropdown-menu {

    pointer-events: auto;

  }

}



/* Language Switcher Styles */

.topbar-language {

  position: relative;

}



.topbar-language .dropdown-toggle {

  background: transparent;

  border: none;

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 0.85rem;

  color: var(--white);

  padding: 0;

  font-weight: 500;

}



.topbar-language .dropdown-toggle::after {

  display: none;

}



.topbar-language .dropdown-menu {

  background: var(--white);

  border: none !important;

  box-shadow: var(--shadow-md);

  border-radius: var(--radius-sm);

  padding: 8px 0;

  min-width: 140px;

  margin-top: 10px !important;

  z-index: 9999;

}



.topbar-language .dropdown-item {

  font-size: 0.82rem;

  font-weight: 600;

  color: var(--text-dark);

  padding: 8px 16px;

  transition: var(--transition);

}



.topbar-language .dropdown-item:hover {

  background: rgba(255, 107, 53, 0.1);

  color: var(--primary);

}



/* Hide Google Translate Bar */

iframe.goog-te-banner-frame {

  display: none !important;

}



body {

  top: 0 !important;

}



.goog-te-gadget {

  font-family: var(--font-body) !important;

}



.goog-te-gadget img {

  display: none !important;

}



.skiptranslate.goog-te-gadget > span {

  display: none !important;

}



/* ===== GLOBAL RESET & BASE ===== */

*,

*::before,

*::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



html {

  scroll-behavior: smooth;

  width: 100%;

  max-width: 100%;

  overflow-x: hidden;

}



body {

  font-family: var(--font-body);

  background-color: var(--body-bg);

  color: var(--text-dark);

  line-height: 1.7;

  width: 100%;

  max-width: 100%;

  overflow-x: hidden;

  /* position: relative; */

}



h1,

h2,

h3,

h4,

h5,

h6 {

  font-family: var(--font-heading);

  font-weight: 800;

  line-height: 1.25;

}



img {

  max-width: 100%;

  height: auto;

  display: block;

}



a {

  text-decoration: none;

  transition: var(--transition);

}



ul {

  list-style: none;

  padding: 0;

  margin: 0;

}



.section-padding {

  padding: 100px 0;

}



/* ===== SCROLLBAR ===== */

::-webkit-scrollbar {

  width: 6px;

}



::-webkit-scrollbar-track {

  background: var(--dark-2);

}



::-webkit-scrollbar-thumb {

  background: var(--primary);

  border-radius: var(--radius-full);

}



/* ===== SELECTION ===== */

::selection {

  background: var(--primary);

  color: var(--white);

}



/* ============================================================

   REUSABLE UI ELEMENTS

   ============================================================ */



/* Section Tag */

.section-tag {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  background: rgba(255, 107, 53, 0.1);

  color: var(--primary);

  font-size: 0.8rem;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  padding: 8px 18px;

  border-radius: var(--radius-full);

  border: 1px solid rgba(255, 107, 53, 0.2);

  margin-bottom: 16px;

  margin-top: 50px;

}



/* Section Titles */

.section-title {

  font-size: clamp(1.8rem, 4vw, 2.8rem);

  font-weight: 900;

  color: var(--text-dark);

  margin-bottom: 16px;

}



.section-desc {

  color: var(--text-muted);

  font-size: 1rem;

  margin-bottom: 0;

}



/* Gradient Text */

.gradient-text {

  background: var(--gradient-primary);

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

}



/* Buttons */

.btn-primary-custom {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  background: var(--gradient-primary);

  color: var(--white);

  font-family: var(--font-heading);

  font-size: 0.95rem;

  font-weight: 700;

  padding: 14px 32px;

  border-radius: var(--radius-full);

  border: none;

  cursor: pointer;

  box-shadow: var(--shadow-color);

  transition: var(--transition);

  text-decoration: none;

}



.btn-primary-custom:hover {

  transform: translateY(-3px);

  box-shadow: 0 16px 40px rgba(255, 107, 53, 0.4);

  color: var(--white);

}



.btn-secondary-custom {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  background: rgba(255, 255, 255, 0.12);

  color: var(--white);

  font-family: var(--font-heading);

  font-size: 0.95rem;

  font-weight: 700;

  padding: 14px 32px;

  border-radius: var(--radius-full);

  border: 1px solid rgba(255, 255, 255, 0.25);

  cursor: pointer;

  backdrop-filter: blur(10px);

  transition: var(--transition);

  text-decoration: none;

}



.btn-secondary-custom:hover {

  background: rgba(255, 255, 255, 0.2);

  color: var(--white);

  transform: translateY(-3px);

}



/* Navbar Donate Button */

.btn-donate {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  background: var(--gradient-primary);

  color: var(--white) !important;

  font-size: 0.85rem;

  font-weight: 700;

  padding: 10px 22px;

  border-radius: var(--radius-full);

  transition: var(--transition);

}



.btn-donate:hover {

  transform: translateY(-2px);

  box-shadow: var(--shadow-color);

  color: var(--white) !important;

}



/* ============================================================

   NAVBAR

   ============================================================ */

.site-topbar {

  position: relative;

  background-color: #d54427;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

  color: var(--white);

}



.topbar-content {

  min-height: 42px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  font-size: 0.82rem;

}



.topbar-contact,

.topbar-actions,

.topbar-social {

  display: flex;

  align-items: center;

  gap: 14px;

}



.topbar-link,

.topbar-login,

.topbar-social a {

  color: rgba(255, 255, 255, 0.88);

}



.topbar-link {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  white-space: nowrap;

}



.topbar-link:hover,

.topbar-login:hover,

.topbar-social a:hover {

  color: var(--primary);

}



.topbar-divider {

  width: 1px;

  height: 18px;

  background: rgba(255, 255, 255, 0.14);

}



.topbar-social a {

  width: 30px;

  height: 30px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.06);

}



.topbar-login {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  font-weight: 600;

}



/* #mainNavbar {

  background: rgba(13, 13, 26, 0.95);

  backdrop-filter: blur(0px);

  top: 43px;

  padding: 12px 0px;

  transition: all 0.4s ease;

  z-index: 1000;

} */



#mainNavbar {

  background: #000;

  padding: 15px 0px;

}



#mainNavbar.scrolled {

  background: #000;

  padding: 12px 0;

}



/* Brand */

.navbar-brand {

  display: flex;

  align-items: center;

  gap: 10px;

}



.brand-icon {

  width: 250px;

  height: 42px;

  /* background: var(--gradient-primary); */

  border-radius: var(--radius-md);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.2rem;

  color: var(--white);

  flex-shrink: 0;

}



.brand-text {

  font-family: var(--font-heading);

  font-size: 1.5rem;

  font-weight: 900;

  color: var(--white);

  letter-spacing: -0.02em;

}



/* Nav Links */

.navbar-nav .nav-link {

  color: rgba(255, 255, 255, 0.85) !important;

  font-size: 0.88rem;

  font-weight: 600;

  padding: 8px 12px !important;

  border-radius: var(--radius-sm);

  transition: var(--transition);

  position: relative;

}



.navbar-nav .nav-link::after {

  content: "";

  position: absolute;

  bottom: 4px;

  left: 50%;

  transform: translateX(-50%);

  width: 0;

  height: 2px;

  background: var(--primary);

  border-radius: var(--radius-full);

  transition: var(--transition);

}



.navbar-nav .nav-link:hover::after,

.navbar-nav .nav-link.active::after {

  width: 70%;

}



.navbar-nav .nav-link:hover {

  color: var(--white) !important;

}



/* Toggler */

.toggler-icon {

  width: 40px;

  height: 40px;

  background: #ffc107;

  border-radius: var(--radius-sm);

  display: flex;

  align-items: center;

  justify-content: center;

  color: #000;

  font-size: 1.4rem;

}



.footer-desc {

  color: rgba(255, 255, 255, 0.6);

  font-size: 0.85rem;

  line-height: 1.7;

  margin-bottom: 25px;

}



/* Footer Contact Info */

.footer-contact-info {

  list-style: none;

  padding: 0;

  margin: 0;

}



.footer-contact-info li {

  display: flex;

  gap: 12px;

  margin-bottom: 12px;

  color: rgba(255, 255, 255, 0.7);

  font-size: 0.82rem;

  align-items: flex-start;

}



.footer-contact-info li i {

  color: var(--primary);

  font-size: 1rem;

  margin-top: 2px;

}



.footer-contact-info li span {

  line-height: 1.5;

}



.footer-map iframe {

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

  transition: var(--transition);

}



.footer-map iframe:hover {

  filter: grayscale(0) invert(0) opacity(1) !important;

}



.footer-badges {

  display: flex;

  gap: 8px;

}



.navbar-toggler {

  border: none;

  padding: 0;

}



.navbar-toggler:focus {

  box-shadow: none;

}



/* Tablet/Mobile Nav */

@media (max-width: 1199px) {

  #mainNavbar {

    padding: 15px 25px;

  }



  .topbar-content {

    font-size: 0.7rem;

    gap: 8px;

  }



  .topbar-contact {

    gap: 6px;

  }



  .topbar-social {

    gap: 6px;

  }



  .topbar-social a {

    width: 24px;

    height: 24px;

    font-size: 0.7rem;

  }



  .topbar-login span {

    display: none;

  }



  .brand-text {

    font-size: 1.1rem;

  }



  #navMenu {

    background: rgba(13, 13, 26, 0.98);

    border-radius: var(--radius-md);

    padding: 20px;

    margin-top: 12px;

    border: 1px solid rgba(255, 255, 255, 0.08);

  }



  .navbar-nav {

    gap: 4px !important;

  }



  .navbar-nav .nav-link {

    font-size: 0.86rem;

    padding: 8px 10px !important;

  }



  .navbar-nav .dropdown-menu {

    position: static !important;

    float: none;

    width: 100%;

    margin-top: 6px !important;

    min-width: 100% !important;

    display: none;

  }



  .navbar-nav .dropdown .dropdown-menu.show,

  .navbar-nav .dropdown.mobile-open .dropdown-menu {

    display: block;

  }

}

.hero-section {

  --hero-header-offset: 118px;

  background: var(--gradient-hero);

  height: calc(100vh - var(--hero-header-offset));

  min-height: 620px;

  margin-top: var(--hero-header-offset);

  position: relative;

  overflow: hidden;

  display: flex;

  align-items: center;

}



.hero-background-slider {

  position: absolute;

  inset: 0;

  z-index: 0;

}



.hero-background-slider .hero-image-slider,

.hero-background-slider .swiper-wrapper,

.hero-background-slider .swiper-slide,

.hero-background-slider .hero-img-card,

.hero-background-slider .hero-img-main {

  width: 100%;

  height: 100%;

}



.hero-background-slider .hero-img-main {

  min-height: 100svh;

}



.hero-slider-overlay {

  position: absolute;

  inset: 0;



  z-index: 1;

}



/* BG Shapes */

.hero-bg-shapes {

  position: absolute;

  inset: 0;

  pointer-events: none;

  overflow: hidden;

  z-index: 2;

}



.shape {

  position: absolute;

  border-radius: 50%;

  opacity: 0.08;

  filter: blur(80px);

  animation: floatShapes 10s ease-in-out infinite;

}



.shape-1 {

  width: 600px;

  height: 600px;

  background: var(--primary);

  top: -200px;

  left: -200px;

  animation-delay: 0s;

}



.shape-2 {

  width: 500px;

  height: 500px;

  background: var(--secondary);

  bottom: -200px;

  right: -200px;

  animation-delay: -3s;

}



.shape-3 {

  width: 300px;

  height: 300px;

  background: var(--accent);

  top: 50%;

  left: 40%;

  animation-delay: -6s;

}



.shape-4 {

  width: 200px;

  height: 200px;

  background: var(--warning);

  top: 20%;

  right: 30%;

  animation-delay: -9s;

}



@keyframes floatShapes {

  0%,

  100% {

    transform: translate(0, 0) scale(1);

  }



  50% {

    transform: translate(30px, -30px) scale(1.05);

  }

}



/* Hero Content */

.hero-content {

  position: relative;

  z-index: 4;

  padding-top: 100px;

  padding-bottom: 60px;

  display: flex;

  flex-direction: column;

  align-items: center;

  transition:

    opacity 0.35s ease,

    transform 0.35s ease;

}



.hero-content.is-updating {

  opacity: 0.55;

  transform: translateY(6px);

}



.hero-badge {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  background: rgba(255, 107, 53, 0.15);

  color: var(--primary-light);

  font-size: 0.8rem;

  font-weight: 700;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  padding: 8px 18px;

  border-radius: var(--radius-full);

  border: 1px solid rgba(255, 159, 28, 0.3);

  margin-bottom: 20px;

  backdrop-filter: blur(10px);

}



.hero-title {

  font-size: clamp(2.2rem, 5.5vw, 4rem);

  font-weight: 900;

  color: var(--white);

  line-height: 1.15;

  margin-bottom: 20px;

  max-width: 950px;

}



.hero-title .highlight-text {

  background: var(--gradient-primary);

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

  position: relative;

}



.hero-title .highlight-text:empty {

  display: none;

}



.hero-subtitle {

  color: rgba(255, 255, 255, 0.7);

  font-size: 1.05rem;

  margin-bottom: 36px;

  max-width: 520px;

  line-height: 1.8;

  margin-left: auto;

  margin-right: auto;

}



.hero-subtitle strong {

  color: var(--primary-light);

}



.hero-buttons {

  display: flex;

  gap: 16px;

  flex-wrap: wrap;

  justify-content: center;

  margin-bottom: 0;

}



/* ===== HERO STATS — Premium Glass Cards ===== */

.hero-stats-grid {

  display: flex;

  gap: 14px;

  flex-wrap: wrap;

  margin-top: 44px;

}



.hero-stat-card {

  position: relative;

  display: flex;

  align-items: center;

  gap: 14px;

  background: rgba(255, 255, 255, 0.06);

  backdrop-filter: blur(16px);

  -webkit-backdrop-filter: blur(16px);

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: var(--radius-lg);

  padding: 16px 22px 16px 16px;

  flex: 1 1 150px;

  overflow: hidden;

  cursor: default;

  transition: var(--transition);

}



.hero-stat-card:hover {

  transform: translateY(-4px);

  border-color: rgba(255, 255, 255, 0.22);

  background: rgba(255, 255, 255, 0.1);

}



/* Gradient Icon Box */

.hsc-icon {

  width: 50px;

  height: 50px;

  border-radius: var(--radius-md);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.4rem;

  color: var(--white);

  flex-shrink: 0;

  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);

  transition: var(--transition);

}



.hero-stat-card:hover .hsc-icon {

  transform: scale(1.1) rotate(-5deg);

}



/* Text Body */

.hsc-body {

  display: flex;

  flex-direction: column;

  gap: 3px;

  position: relative;

  z-index: 1;

}



.hsc-number {

  display: flex;

  align-items: baseline;

  gap: 2px;

  line-height: 1;

}



.hsc-number .stat-num {

  font-family: var(--font-heading);

  font-size: 1.75rem;

  font-weight: 900;

  color: var(--white);

  letter-spacing: -0.02em;

}



.hsc-plus {

  font-family: var(--font-heading);

  font-size: 1.3rem;

  font-weight: 900;

  color: var(--primary-light);

  line-height: 1;

}



.hsc-label {

  font-size: 0.7rem;

  font-weight: 600;

  color: rgba(255, 255, 255, 0.55);

  text-transform: uppercase;

  letter-spacing: 0.07em;

  white-space: nowrap;

}



/* Bottom glow accent */

.hsc-glow {

  position: absolute;

  bottom: -10px;

  left: 0;

  right: 0;

  height: 40px;

  border-radius: 50%;

  filter: blur(20px);

  pointer-events: none;

  z-index: 0;

  opacity: 0.7;

  transition: opacity 0.3s ease;

}



.hero-stat-card:hover .hsc-glow {

  opacity: 1;

}



/* ── Responsive ── */

@media (max-width: 767px) {

  .hero-stats-grid {

    gap: 10px;

  }



  .hero-stat-card {

    padding: 13px 16px 13px 13px;

    flex: 1 1 130px;

  }



  .hsc-icon {

    width: 42px;

    height: 42px;

    font-size: 1.15rem;

  }



  .hsc-number .stat-num {

    font-size: 1.4rem;

  }



  .hsc-plus {

    font-size: 1rem;

  }

}



@media (max-width: 400px) {

  .hero-stats-grid {

    flex-direction: column;

    gap: 10px;

  }



  .hero-stat-card {

    flex: 1 1 auto;

  }

}



/* ── Hero Stat Card — Color Variants ── */



/* Orange (Children Supported) */

.hsc-icon-orange {

  background: linear-gradient(135deg, #ff6b35, #ff9f1c);

}



.hsc-glow-orange {

  background: rgba(255, 107, 53, 0.18);

}



.hsc-orange:hover {

  border-color: rgba(255, 107, 53, 0.35);

}



/* Purple (Volunteers) */

.hsc-icon-purple {

  background: linear-gradient(135deg, #9b5de5, #6a0dad);

}



.hsc-glow-purple {

  background: rgba(155, 93, 229, 0.18);

}



.hsc-purple:hover {

  border-color: rgba(155, 93, 229, 0.35);

}



/* Teal (Years of Service) */

.hsc-icon-teal {

  background: linear-gradient(135deg, #2ec4b6, #0077b6);

}



.hsc-glow-teal {

  background: rgba(46, 196, 182, 0.18);

}



.hsc-teal:hover {

  border-color: rgba(46, 196, 182, 0.35);

}



/* Hero Images */

.hero-img-card {

  border-radius: 0;

  overflow: hidden;

}



.hero-img-main {

  position: relative;

  width: 100%;

  height: 100%;

}



.hero-img-main img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center center;

}



.hero-image-slider {

  height: 100%;

  width: 100%;

}



.hero-image-slider .swiper-wrapper {

  height: 100%;

}



.hero-image-slider .swiper-slide {

  height: 100%;

}



.hero-image-pagination {

  position: absolute;

  bottom: 26px !important;

  left: 0;

  right: 0;

  text-align: center;

  z-index: 4;

}



.hero-image-pagination .swiper-pagination-bullet {

  width: 10px;

  height: 10px;

  background: rgba(255, 255, 255, 0.85);

  opacity: 1;

}



.hero-image-pagination .swiper-pagination-bullet-active {

  background: var(--secondary-color);

}



.hero-img-sm {

  position: absolute;

  width: 180px;

  height: 150px;

  border: 3px solid rgba(255, 255, 255, 0.2);

}



.hero-img-sm img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.top-card {

  top: -30px;

  right: -40px;

}



.bottom-card {

  bottom: 30px;

  left: -40px;

}



.card-badge {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  background: rgba(0, 0, 0, 0.6);

  backdrop-filter: blur(8px);

  color: var(--white);

  font-size: 0.7rem;

  font-weight: 700;

  padding: 6px 10px;

  text-align: center;

}



.floating-badge {

  position: absolute;

  background: var(--white);

  border-radius: var(--radius-md);

  box-shadow: var(--shadow-md);

  padding: 10px 16px;

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 0.8rem;

  font-weight: 700;

  color: var(--text-dark);

  animation: floatBadge 3s ease-in-out infinite;

}



.badge-award {

  top: 50%;

  right: -20px;

}



.badge-award i {

  color: var(--warning);

  font-size: 1rem;

}



@keyframes floatBadge {

  0%,

  100% {

    transform: translateY(0);

  }



  50% {

    transform: translateY(-10px);

  }

}



/* Hero Wave */

.hero-wave {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  height: 1px;

  background: var(--white);

  line-height: 0;

  z-index: 5;

}



.hero-wave svg {

  display: none;

}



/* ============================================================

   HERO BANNER SLIDER — background-image cover style

   ============================================================ */



.hero-banner-section {

  position: relative;

  width: 100%;

}



.hero-banner-slider {

  width: 100%;

  height: 100vh;

}



.hero-banner-slide {

  width: 100%;

  height: 100vh;

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  position: relative;

}



.hero-banner-overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(

    to bottom,

    rgba(0, 0, 0, 0.3) 0%,

    rgba(0, 0, 0, 0.6) 50%,

    rgba(0, 0, 0, 0.5) 100%

  );

  z-index: 1;

}



.hero-banner-content {

  position: absolute;

  inset: 0;

  z-index: 2;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

}



.hero-banner-badge {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 6px 18px;

  background: rgba(0, 0, 0, 0.5);

  color: #fff;

  border-radius: 99px;

  font-size: 0.85rem;

  font-weight: 600;

  text-transform: uppercase;

  margin-bottom: 20px;

  backdrop-filter: blur(10px);

  border: 1px solid rgba(255, 255, 255, 0.3);

}



.hero-banner-title {

  font-family: "Nunito", sans-serif;

  font-size: clamp(2rem, 5vw, 4.5rem);

  font-weight: 800;

  color: #ffffff;

  line-height: 1.15;

  margin-bottom: 35px;

  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.9);

}



.hero-banner-highlight {

  color: #ff9f1c;

  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);

}



.hero-banner-btns {

  display: flex;

  gap: 20px;

  flex-wrap: wrap;

  justify-content: center;

}



.hero-banner-btn-primary {

  padding: 14px 40px;

  background: #70c14a;

  color: #fff !important;

  border-radius: 50px;

  font-weight: 800;

  text-decoration: none;

  text-transform: uppercase;

  font-size: 0.95rem;

  transition: all 0.3s ease;

  border: 2px solid #70c14a;

  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);

  display: inline-block;

}



.hero-banner-btn-primary:hover {

  transform: translateY(-2px);

  background: #5ba33a;

  color: #fff !important;

}



.hero-banner-btn-secondary {

  padding: 14px 40px;

  background: rgba(0, 0, 0, 0.3);

  color: #fff !important;

  border: 2px solid #ff9f1c;

  border-radius: 50px;

  font-weight: 700;

  text-decoration: none;

  font-size: 0.95rem;

  transition: all 0.3s ease;

  backdrop-filter: blur(4px);

  display: inline-block;

}



.hero-banner-btn-secondary:hover {

  transform: translateY(-2px);

  background: #ff9f1c;

  color: #fff !important;

}



/* Pagination dots */

.hero-banner-pagination {

  position: absolute;

  bottom: 30px !important;

  left: 0;

  right: 0;

  z-index: 10;

  display: flex;

  justify-content: center;

  gap: 10px;

}



.hero-banner-pagination .swiper-pagination-bullet {

  width: 12px;

  height: 12px;

  background: rgba(255, 255, 255, 0.5);

  border-radius: 50%;

  cursor: pointer;

  opacity: 0.7;

  transition: all 0.3s ease;

}



.hero-banner-pagination .swiper-pagination-bullet-active {

  background: #70c14a;

  opacity: 1;

  width: 30px;

  border-radius: 6px;

}



/* Navigation arrows */

.hero-banner-arrows {

  position: absolute;

  top: 50%;

  left: 0;

  right: 0;

  z-index: 10;

  display: flex;

  justify-content: space-between;

  padding: 0 20px;

  transform: translateY(-50%);

  pointer-events: none;

}



.hero-banner-prev,

.hero-banner-next {

  width: 50px;

  height: 50px;

  background: rgba(0, 0, 0, 0.4);

  border: 2px solid rgba(255, 255, 255, 0.3);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: all 0.3s ease;

  pointer-events: auto;

  color: #fff;

  font-size: 1.3rem;

}



.hero-banner-prev:hover,

.hero-banner-next:hover {

  background: #70c14a;

  border-color: #70c14a;

}



/* Mobile / Tablet */

@media (max-width: 991px) {

  .hero-banner-slider,

  .hero-banner-slide {

    height: 70vh;

  }



  .hero-banner-title {

    font-size: clamp(1.5rem, 5vw, 2.2rem);

    margin-bottom: 20px;

  }



  .hero-banner-badge {

    padding: 4px 12px;

    font-size: 0.7rem;

    margin-bottom: 12px;

  }



  .hero-banner-btns {

    gap: 12px;

  }



  .hero-banner-btn-primary,

  .hero-banner-btn-secondary {

    padding: 10px 24px;

    font-size: 0.8rem;

  }



  .hero-banner-arrows {

    display: none;

  }



  .hero-banner-pagination {

    bottom: 15px !important;

  }

}



@media (max-width: 600px) {

  .hero-banner-slider,

  .hero-banner-slide {

    height: 450px;

  }



  .hero-banner-title {

    font-size: clamp(1.2rem, 5vw, 1.6rem);

    margin-bottom: 14px;

  }



  .hero-banner-badge {

    padding: 3px 10px;

    font-size: 0.6rem;

    margin-bottom: 8px;

  }



  .hero-banner-btns {

    gap: 8px;

  }



  .hero-banner-btn-primary,

  .hero-banner-btn-secondary {

    padding: 8px 16px;

    font-size: 0.7rem;

    min-width: 100px;

  }

}



/* ============================================================

   ABOUT SECTION

   ============================================================ */

.about-section {

  background: var(--white);

  margin-top: 0px;

}



.about-image-grid {

  position: relative;

  height: 480px;

}



.about-img {

  position: absolute;

  border-radius: var(--radius-md);

  overflow: hidden;

  box-shadow: var(--shadow-md);

  transition: var(--transition);

}



.about-img:hover {

  transform: translateY(-8px);

  box-shadow: var(--shadow-lg);

}



.about-img img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.about-img-1 {

  width: 58%;

  height: 65%;

  top: 0;

  left: 0;

}



.about-img-2 {

  width: 38%;

  height: 55%;

  top: 10%;

  right: 0;

}



.about-img-3 {

  width: 45%;

  height: 45%;

  bottom: 0;

  left: 15%;

}



.about-img-4 {

  width: 32%;

  height: 35%;

  bottom: 20px;

  right: 0;

  z-index: 1;

}



.about-experience-box {

  position: absolute;

  bottom: 20px;

  right: 0;

  background: var(--gradient-primary);

  color: var(--white);

  padding: 20px 24px;

  border-radius: var(--radius-md);

  text-align: center;

  box-shadow: var(--shadow-color);

  animation: floatBadge 4s ease-in-out infinite;

}



.exp-num {

  display: block;

  font-family: var(--font-heading);

  font-size: 2rem;

  font-weight: 900;

  line-height: 1;

}



.exp-text {

  display: block;

  font-size: 0.7rem;

  font-weight: 600;

  opacity: 0.9;

  text-transform: uppercase;

  letter-spacing: 0.05em;

}



/* About Features */

.about-features {

  margin-top: 28px;

  display: flex;

  flex-direction: column;

  gap: 20px;

}



.feature-item {

  display: flex;

  align-items: flex-start;

  gap: 16px;

}



.feature-icon {

  width: 50px;

  height: 50px;

  background: rgba(255, 107, 53, 0.1);

  color: var(--primary);

  border-radius: var(--radius-md);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.3rem;

  flex-shrink: 0;

  transition: var(--transition);

}



.feature-item:hover .feature-icon {

  background: var(--gradient-primary);

  color: var(--white);

  transform: rotate(5deg);

}



.feature-item h5 {

  font-size: 1rem;

  font-weight: 700;

  margin-bottom: 4px;

  color: var(--text-dark);

}



.feature-item p {

  font-size: 0.88rem;

  color: var(--text-muted);

  margin: 0;

}



/* ============================================================

   FOUNDER SECTION

   ============================================================ */

.founder-section {

  background: linear-gradient(180deg, #ffffff 0%, #fffaf4 100%);

  position: relative;

  overflow: hidden;

  /* margin-top: 40px; */

}



.founder-desc {

  max-width: 640px;

}



.founder-impact-grid {

  margin-top: 28px;

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 14px;

}



.founder-impact-card {

  background: var(--white);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-md);

  padding: 20px 16px;

  box-shadow: var(--shadow-sm);

  text-align: center;

  transform-style: preserve-3d;

  will-change: transform;

  transition:

    transform 0.35s ease,

    box-shadow 0.35s ease,

    border-color 0.35s ease;

}



.founder-impact-card:hover {

  transform: perspective(900px) rotateX(6deg) rotateY(-6deg) translateY(-6px);

  border-color: rgba(255, 107, 53, 0.4);

  box-shadow: var(--shadow-md);

}



.founder-impact-card:nth-child(even):hover {

  transform: perspective(900px) rotateX(6deg) rotateY(6deg) translateY(-6px);

}



.impact-number {

  display: block;

  font-family: var(--font-heading);

  font-size: 1.9rem;

  line-height: 1;

  font-weight: 900;

  color: var(--text-dark);

}



.impact-label {

  display: block;

  margin-top: 10px;

  font-size: 0.72rem;

  font-weight: 700;

  color: var(--text-muted);

  letter-spacing: 0.08em;

}



.founder-values-grid {

  margin-top: 22px;

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 14px;

}



.founder-value-card {

  display: flex;

  align-items: flex-start;

  gap: 14px;

  background: rgba(255, 255, 255, 0.75);

  border: 1px solid rgba(255, 107, 53, 0.18);

  border-radius: var(--radius-md);

  padding: 18px 16px;

  transform-style: preserve-3d;

  will-change: transform;

  transition:

    transform 0.35s ease,

    box-shadow 0.35s ease,

    border-color 0.35s ease;

}



.founder-value-card:hover {

  transform: perspective(900px) rotateX(5deg) rotateY(-5deg) translateY(-6px);

  border-color: rgba(255, 107, 53, 0.35);

  box-shadow: var(--shadow-md);

}



.founder-value-card:nth-child(even):hover {

  transform: perspective(900px) rotateX(5deg) rotateY(5deg) translateY(-6px);

}



.founder-value-icon {

  width: 42px;

  height: 42px;

  border-radius: 12px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.1rem;

  color: var(--white);

  background: var(--gradient-primary);

  flex-shrink: 0;

  transition: transform 0.35s ease;

}



.founder-value-card:hover .founder-value-icon {

  transform: translateZ(20px) scale(1.06);

}



.founder-value-card h5 {

  margin-bottom: 4px;

  font-size: 1rem;

  font-weight: 800;

}



.founder-value-card p {

  margin: 0;

  font-size: 0.86rem;

  color: var(--text-muted);

  line-height: 1.7;

}



.founder-image-wrap {

  position: relative;

  border-radius: var(--radius-lg);

  overflow: hidden;

  min-height: 480px;

  box-shadow: var(--shadow-lg);

}



.founder-image-wrap img {

  width: 100%;

  height: 100%;

  min-height: 480px;

  object-fit: cover;

}



.founder-image-badge {

  position: absolute;

  left: 20px;

  right: 20px;

  bottom: 20px;

  background: rgba(13, 13, 26, 0.82);

  color: var(--white);

  border: 1px solid rgba(255, 255, 255, 0.2);

  border-radius: var(--radius-md);

  backdrop-filter: blur(10px);

  padding: 12px 14px;

}



.founder-image-badge strong {

  display: block;

  font-size: 1rem;

  font-weight: 800;

}



.founder-image-badge span {

  display: block;

  font-size: 0.8rem;

  opacity: 0.85;

}



/* ============================================================

   LOGIN SHOWCASE SECTION

   ============================================================ */

.login-showcase-section {

  background:

    radial-gradient(

      circle at 12% 20%,

      rgba(255, 107, 53, 0.08),

      transparent 42%

    ),

    radial-gradient(

      circle at 86% 16%,

      rgba(46, 196, 182, 0.1),

      transparent 42%

    ),

    linear-gradient(180deg, #ffffff 0%, #fffaf4 100%);

}



.login-side-panel,

.login-form-card {

  background: rgba(255, 255, 255, 0.92);

  border: 1px solid rgba(255, 107, 53, 0.16);

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow-md);

}



.login-side-panel {

  padding: 34px;

}



.login-side-desc {

  max-width: 560px;

}



.login-feature-list {

  list-style: none;

  padding: 0;

  margin: 22px 0 0;

  display: grid;

  gap: 10px;

}



.login-feature-list li {

  display: flex;

  align-items: flex-start;

  gap: 10px;

  color: var(--text-dark);

  font-size: 0.95rem;

}



.login-feature-list i {

  color: var(--primary);

  font-size: 0.95rem;

  margin-top: 3px;

}



.login-trust-grid {

  margin-top: 24px;

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 12px;

}



.login-trust-card {

  background: var(--white);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-md);

  padding: 14px 10px;

  text-align: center;

}



.login-trust-card strong {

  display: block;

  font-family: var(--font-heading);

  font-size: 1.2rem;

  line-height: 1;

  color: var(--text-dark);

}



.login-trust-card span {

  display: block;

  margin-top: 7px;

  font-size: 0.74rem;

  font-weight: 600;

  color: var(--text-muted);

}



.login-form-card {

  padding: 34px;

}



.login-form-head h4 {

  margin-bottom: 6px;

  font-size: 1.7rem;

  font-weight: 900;

}



.login-form-head p {

  margin-bottom: 22px;

  color: var(--text-muted);

}



.login-form .form-label {

  font-size: 0.88rem;

  font-weight: 700;

  color: var(--text-dark);

}



.login-input-wrap {

  position: relative;

}



.login-input-wrap i {

  position: absolute;

  left: 14px;

  top: 50%;

  transform: translateY(-50%);

  color: var(--primary);

  font-size: 0.9rem;

}



.login-input-wrap .form-control {

  padding: 12px 14px 12px 40px;

  border-radius: 12px;

  border: 1px solid var(--border-color);

  box-shadow: none;

}



.login-input-wrap .form-control:focus {

  border-color: rgba(255, 107, 53, 0.55);

  box-shadow: 0 0 0 0.2rem rgba(255, 107, 53, 0.14);

}



.login-form-actions {

  margin: 8px 0 18px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

}



.login-form-actions .form-check-label {

  font-size: 0.86rem;

  color: var(--text-muted);

}



.login-link {

  font-size: 0.86rem;

  color: var(--primary);

  font-weight: 700;

  text-decoration: none;

}



.login-link:hover {

  color: var(--primary-dark);

}



.login-submit-btn {

  padding-top: 12px;

  padding-bottom: 12px;

  font-weight: 700;

}



.login-divider {

  margin: 22px 0 16px;

  position: relative;

  text-align: center;

}



.login-divider::before {

  content: "";

  position: absolute;

  left: 0;

  right: 0;

  top: 50%;

  height: 1px;

  background: var(--border-color);

}



.login-divider span {

  position: relative;

  background: var(--white);

  padding: 0 12px;

  font-size: 0.8rem;

  color: var(--text-muted);

  font-weight: 600;

}



.login-social-row {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 10px;

}



.login-social-btn {

  border: 1px solid var(--border-color);

  border-radius: 12px;

  padding: 10px 12px;

  text-decoration: none;

  color: var(--text-dark);

  background: var(--white);

  font-size: 0.88rem;

  font-weight: 700;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  transition: var(--transition);

}



.login-social-btn:hover {

  border-color: rgba(255, 107, 53, 0.5);

  transform: translateY(-2px);

  box-shadow: var(--shadow-sm);

  color: var(--primary);

}



.login-signup-text {

  margin: 18px 0 0;

  text-align: center;

  font-size: 0.9rem;

  color: var(--text-muted);

}



.login-signup-text a {

  color: var(--primary);

  font-weight: 700;

  text-decoration: none;

}



.login-signup-text a:hover {

  color: var(--primary-dark);

}



@media (max-width: 991px) {

  .login-side-panel,

  .login-form-card {

    padding: 24px;

  }



  .login-trust-grid {

    grid-template-columns: repeat(3, minmax(0, 1fr));

  }

}



@media (max-width: 575px) {

  .login-side-panel,

  .login-form-card {

    padding: 18px;

    border-radius: var(--radius-md);

  }



  .login-trust-grid,

  .login-social-row {

    grid-template-columns: 1fr;

  }

}



/* ============================================================

   MISSION & VISION SECTION

   ============================================================ */

.mission-vision-section {

  background: linear-gradient(180deg, #fffaf4 0%, #ffffff 100%);

  position: relative;

}



.mv-card {

  position: relative;

  background: var(--white);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-lg);

  padding: 28px 24px;

  box-shadow: var(--shadow-sm);

  transform-style: preserve-3d;

  will-change: transform;

  transition:

    transform 0.35s ease,

    box-shadow 0.35s ease,

    border-color 0.35s ease;

}



.mv-card-mission {

  border-top: 4px solid #ff6b35;

}



.mv-card-vision {

  border-top: 4px solid #1d9e75;

}



.mv-icon-wrap {

  width: 50px;

  height: 50px;

  border-radius: 14px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-size: 1.2rem;

  color: var(--white);

  margin-bottom: 14px;

  background: var(--gradient-primary);

}



.mv-card-vision .mv-icon-wrap {

  background: linear-gradient(135deg, #1d9e75 0%, #0f6e56 100%);

}



.mv-card h3 {

  margin-bottom: 10px;

  font-size: 1.35rem;

  font-weight: 800;

  color: var(--text-dark);

}



.mv-card p {

  margin-bottom: 16px;

  font-size: 0.95rem;

  line-height: 1.8;

  color: var(--text-muted);

}



.mv-list {

  list-style: none;

  margin: 0;

  padding: 0;

  display: grid;

  gap: 10px;

}



.mv-list li {

  display: flex;

  align-items: flex-start;

  gap: 8px;

  font-size: 0.9rem;

  line-height: 1.6;

  color: var(--text-dark);

  font-weight: 600;

}



.mv-list li i {

  margin-top: 3px;

  color: #1d9e75;

}



.mv-read-more {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  margin-top: 12px;

  font-size: 0.9rem;

  font-weight: 700;

  color: #ff6b35;

  text-decoration: none;

  transition:

    transform 0.25s ease,

    color 0.25s ease;

}



.mv-read-more:hover {

  color: #1d9e75;

  transform: translateX(4px);

}



/* ============================================================

   CAUSES / DONATION CARDS SECTION

   ============================================================ */

.causes-section {

  background: var(--white);

  position: relative;

  overflow: hidden;

}



.causes-bg-glow {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 600px;

  height: 600px;

  background: radial-gradient(

    circle,

    rgba(255, 107, 53, 0.05) 0%,

    transparent 70%

  );

  pointer-events: none;

  z-index: 1;

}



.causes-carousel-wrapper {

  overflow: hidden;

  position: relative;

  width: 100%;

}



.causes-carousel {

  display: flex;

  gap: 2px;

  width: 100%;

  will-change: transform;

}



.cause-card {

  will-change: transform;

  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);

  min-width: 33.333%;

  flex: 0 0 33.333%;

  padding: 15px;

}



.cause-card-active {

  transform: scale(1.08);

  z-index: 10;

}



.cause-card-active .cause-card-inner {

  border: 1px solid rgba(255, 107, 53, 0.3);

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);

}



.cause-card-inner {

  background: var(--white);

  border-radius: var(--radius-lg);

  overflow: hidden;

  box-shadow: var(--shadow-md);

  transition: all 0.4s ease;

  height: 100%;

  display: flex;

  flex-direction: column;

  border: 1px solid var(--border-color);

  transform-style: preserve-3d;

  will-change: transform;

}



.cause-card-image {

  position: relative;

  width: 100%;

  height: 230px;

  overflow: hidden;

}



.cause-card-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.6s ease;

}



.cause-card-inner:hover .cause-card-image img {

  transform: scale(1.1);

}



.cause-overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);

  display: flex;

  align-items: flex-end;

  padding: 20px;

}



.cause-badge {

  color: var(--white);

  font-size: 0.75rem;

  font-weight: 800;

  padding: 6px 14px;

  border-radius: var(--radius-full);

  text-transform: uppercase;

  letter-spacing: 0.05em;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

}



.bg-orange {

  background: var(--gradient-primary);

}



.bg-purple {

  background: var(--gradient-secondary);

}



.bg-teal {

  background: var(--gradient-accent);

}



.cause-card-content {

  padding: 25px;

  flex: 1;

  display: flex;

  flex-direction: column;

}



.cause-card-content h4 {

  font-size: 1.25rem;

  font-weight: 800;

  margin-bottom: 12px;

  color: var(--text-dark);

}



.cause-card-content p {

  font-size: 0.9rem;

  color: var(--text-muted);

  margin-bottom: 24px;

  line-height: 1.6;

}



/* Progress Section */

.cause-progress-wrapper {

  margin-top: auto;

  margin-bottom: 24px;

}



.progress-info {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 8px;

  font-size: 0.85rem;

}



.progress-info strong {

  color: var(--text-dark);

}



.cause-progress {

  height: 8px;

  background: #f3f4f6;

  border-radius: var(--radius-full);

  overflow: hidden;

  margin-bottom: 8px;

}



.progress-bar {

  height: 100%;

  border-radius: var(--radius-full);

}



.progress-orange {

  background: var(--gradient-primary);

}



.progress-purple {

  background: var(--gradient-secondary);

}



.progress-teal {

  background: var(--gradient-accent);

}



.progress-goal {

  font-size: 0.78rem;

  color: var(--text-muted);

  font-weight: 600;

}



.cause-donate-btn {

  background: var(--text-dark);

  color: var(--white);

  font-size: 0.9rem;

  font-weight: 700;

  padding: 14px 24px;

  border-radius: var(--radius-full);

  text-align: center;

  transition: all 0.3s ease;

  text-decoration: none;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 5px;

}



.cause-card-inner:hover .cause-donate-btn {

  background: var(--primary);

  box-shadow: var(--shadow-color);

}



.cause-donate-btn:hover {

  transform: translateY(-2px);

}



/* Responsive Causes */

@media (max-width: 1199px) {

  .cause-card {

    min-width: 33.333%;

    flex: 0 0 33.333%;

  }

}



@media (max-width: 991px) {

  .cause-card {

    min-width: 50%;

    flex: 0 0 50%;

  }



  .cause-card:hover,

  .cause-card:nth-child(even):hover {

    transform: translateY(-4px);

  }



  .cause-card-image {

    height: 180px;

  }

}



@media (max-width: 767px) {

  .cause-card {

    min-width: 100%;

    flex: 0 0 100%;

  }



  .cause-card:hover,

  .cause-card:nth-child(even):hover {

    transform: translateY(-3px);

  }



  .cause-card-image {

    height: 200px;

  }

}



/* ============================================================

   PROGRAMS SECTION

   ============================================================ */

.programs-section {

  background: var(--body-bg);

  position: relative;

  overflow: hidden;

}



.programs-bg-decoration {

  position: absolute;

  top: -300px;

  right: -300px;

  width: 600px;

  height: 600px;

  background: radial-gradient(

    circle,

    rgba(155, 93, 229, 0.06) 0%,

    transparent 70%

  );

  border-radius: 50%;

  pointer-events: none;

}



/* Program Cards */

.program-card {

  background: var(--white);

  border-radius: var(--radius-lg);

  padding: 36px 30px;

  height: 100%;

  border: 1px solid var(--border-color);

  border-bottom: 4px solid transparent;

  box-shadow: var(--shadow-sm);

  transition: var(--transition);

  position: relative;

  overflow: hidden;

}



.program-card::before {

  content: "";

  position: absolute;

  inset: 0;

  background: var(--gradient-primary);

  opacity: 0;

  transition: var(--transition-slow);

  pointer-events: none;

}



.program-card > * {

  position: relative;

  z-index: 1;

}



.program-card:hover {

  transform: translateY(-10px);

  box-shadow: var(--shadow-lg);

  border-color: var(--primary);

}



.program-card:hover::before {

  opacity: 0.04;

}



.featured-card {

  background: linear-gradient(180deg, #1e0533 0%, #0d0d1a 100%);

  border-color: rgba(155, 93, 229, 0.4);

  border-bottom-color: var(--secondary);

}



.featured-card h4 {

  color: var(--white);

}



.featured-card p {

  color: rgba(255, 255, 255, 0.65) !important;

}



.featured-card .prog-features li {

  color: rgba(255, 255, 255, 0.7) !important;

}



.featured-card .prog-link {

  color: var(--primary-light) !important;

}



.program-card--education {

  background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);

  border-color: rgba(59, 130, 246, 0.28);

  border-bottom-color: #3b82f6;

}



.program-card--flood {

  background: linear-gradient(180deg, #1f2937 0%, #0f172a 100%);

  border-color: rgba(244, 114, 182, 0.24);

  border-bottom-color: #ec4899;

}



.program-card--health {

  background: linear-gradient(180deg, #052e2b 0%, #092629 100%);

  border-color: rgba(20, 184, 166, 0.24);

  border-bottom-color: #14b8a6;

}



.program-card--kids {

  background: linear-gradient(180deg, #2b1d52 0%, #18112f 100%);

  border-color: rgba(168, 85, 247, 0.24);

  border-bottom-color: #a855f7;

}



.program-card--winter {

  background: linear-gradient(180deg, #1e293b 0%, #10263f 100%);

  border-color: rgba(96, 165, 250, 0.24);

  border-bottom-color: #60a5fa;

}



.program-card--ration {

  background: linear-gradient(180deg, #3a1f0d 0%, #1f130a 100%);

  border-color: rgba(251, 146, 60, 0.24);

  border-bottom-color: #fb923c;

}



.program-card--education h4,

.program-card--flood h4,

.program-card--health h4,

.program-card--kids h4,

.program-card--winter h4,

.program-card--ration h4 {

  color: var(--white);

}



.program-card--education p,

.program-card--flood p,

.program-card--health p,

.program-card--kids p,

.program-card--winter p,

.program-card--ration p,

.program-card--education .prog-features li,

.program-card--flood .prog-features li,

.program-card--health .prog-features li,

.program-card--kids .prog-features li,

.program-card--winter .prog-features li,

.program-card--ration .prog-features li {

  color: rgba(255, 255, 255, 0.78) !important;

}



.program-card--education .prog-link,

.program-card--flood .prog-link,

.program-card--health .prog-link,

.program-card--kids .prog-link,

.program-card--winter .prog-link,

.program-card--ration .prog-link {

  color: #fff !important;

}



.prog-icon-wrap--education {

  background: linear-gradient(135deg, #3b82f6, #0ea5e9);

}



.prog-icon-wrap--flood {

  background: linear-gradient(135deg, #ec4899, #f97316);

}



.prog-icon-wrap--health {

  background: linear-gradient(135deg, #14b8a6, #06b6d4);

}



.prog-icon-wrap--kids {

  background: linear-gradient(135deg, #a855f7, #ec4899);

}



.prog-icon-wrap--winter {

  background: linear-gradient(135deg, #60a5fa, #38bdf8);

}



.prog-icon-wrap--ration {

  background: linear-gradient(135deg, #fb923c, #f59e0b);

}



.featured-button {

  background: var(--gradient-primary);

  border: none;

  color: var(--white);

}



/* ── Swiper Custom Styles ── */

.testimonials-slider {

  padding: 40px 0 60px;

}



.swiper-pagination-bullet {

  width: 12px;

  height: 12px;

  background: var(--primary);

  opacity: 0.3;

}



.swiper-pagination-bullet-active {

  opacity: 1;

  width: 30px;

  border-radius: var(--radius-full);

}



.swiper-button-next,

.swiper-button-prev {

  color: var(--primary);

  background: var(--white);

  width: 50px;

  height: 50px;

  border-radius: 50%;

  box-shadow: var(--shadow-md);

  transition: var(--transition);

}



.swiper-button-next:after,

.swiper-button-prev:after {

  font-size: 1.2rem;

  font-weight: 900;

}



.swiper-button-next:hover,

.swiper-button-prev:hover {

  background: var(--primary);

  color: var(--white);

  transform: scale(1.1);

}



@media (max-width: 768px) {

  .swiper-button-next,

  .swiper-button-prev {

    display: none;

  }

}



.featured-ribbon {

  position: absolute;

  top: 16px;

  right: -28px;

  background: var(--gradient-primary);

  color: var(--white);

  font-size: 0.68rem;

  font-weight: 800;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  padding: 4px 36px;

  transform: rotate(40deg);

}



.prog-icon-wrap {

  width: 70px;

  height: 70px;

  border-radius: var(--radius-md);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.8rem;

  color: var(--white);

  margin: 0 auto 20px auto;

  /* Centered */

  box-shadow: var(--shadow-md);

  transition: var(--transition);

  position: relative;

  z-index: 2;

}



/* Program Icon Variants */

.prog-icon-orange {

  background: var(--gradient-primary);

}



.prog-icon-purple {

  background: var(--gradient-secondary);

}



.prog-icon-teal {

  background: var(--gradient-accent);

}



.prog-icon-pink {

  background: linear-gradient(135deg, #f72585, #b5179e);

}



.prog-icon-green {

  background: linear-gradient(135deg, #06d6a0, #118ab2);

}



.prog-icon-yellow {

  background: linear-gradient(135deg, #ffd166, #ef8c2a);

}



.program-card:hover .prog-icon-wrap {

  transform: scale(1.1) rotate(-5deg);

}



.program-card h4 {

  font-size: 1.25rem;

  font-weight: 800;

  color: var(--white);

  margin-bottom: 15px;

}



.program-card p {

  font-size: 0.9rem;

  color: var(--text-muted);

  margin-bottom: 24px;

  line-height: 1.7;

}



.prog-features {

  margin-bottom: 24px;

  display: flex;

  flex-direction: column;

  align-items: center;

  /* Center items */

  padding: 0;

}



.prog-features li {

  display: flex;

  align-items: center;

  gap: 10px;

  font-size: 0.85rem;

  color: var(--text-muted);

  margin-bottom: 10px;

  width: fit-content;

}



.prog-features li i {

  color: var(--success);

  font-size: 1rem;

}



.prog-link {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  color: var(--primary);

  font-size: 0.85rem;

  font-weight: 700;

  transition: var(--transition);

}



.prog-link:hover {

  gap: 12px;

  color: var(--primary-dark);

}



/* ============================================================

   STATS SECTION

   ============================================================ */

.stats-section {

  background: linear-gradient(135deg, #0d0d1a 0%, #1a0b2e 50%, #0d1b3a 100%);

  padding: 80px 0;

  position: relative;

  overflow: hidden;

}



.stats-section::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.02'%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");

}



.stat-card {

  text-align: center;

  padding: 30px 20px;

  position: relative;

}



.stat-icon {

  font-size: 2rem;

  color: var(--primary);

  margin-bottom: 16px;

  display: block;

}



.stat-number {

  font-family: var(--font-heading);

  font-size: clamp(2.5rem, 5vw, 3.5rem);

  font-weight: 900;

  color: var(--white);

  line-height: 1;

  display: inline-block;

}



.stat-plus {

  font-family: var(--font-heading);

  font-size: 2rem;

  font-weight: 900;

  color: var(--primary);

  display: inline-block;

}



.stat-label {

  display: block;

  font-size: 0.82rem;

  color: rgba(255, 255, 255, 0.5);

  text-transform: uppercase;

  letter-spacing: 0.1em;

  margin-top: 8px;

}



/* ============================================================

   GALLERY SECTION

   ============================================================ */

.gallery-section {

  background: var(--white);

}



/* Filter Buttons */

.gallery-filters {

  display: flex;

  gap: 10px;

  flex-wrap: wrap;

  justify-content: center;

}



.filter-btn {

  padding: 8px 22px;

  border-radius: var(--radius-full);

  border: 2px solid var(--border-color);

  background: transparent;

  color: var(--text-muted);

  font-size: 0.85rem;

  font-weight: 600;

  cursor: pointer;

  transition: var(--transition);

  font-family: var(--font-body);

}



.filter-btn:hover,

.filter-btn.active {

  background: var(--primary);

  border-color: var(--primary);

  color: var(--white);

}



/* Gallery Grid */

.gallery-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  grid-auto-rows: 220px;

  gap: 16px;

}



.gallery-item {

  border-radius: var(--radius-md);

  overflow: hidden;

}



.gallery-item.gallery-wide {

  grid-column: span 2;

}



.gallery-item.gallery-tall {

  grid-row: span 2;

}



.gallery-item.hidden {

  display: none;

}



.gallery-img-wrap {

  position: relative;

  width: 100%;

  height: 100%;

  overflow: hidden;

}



.gallery-img-wrap img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.5s ease;

}



.gallery-item:hover .gallery-img-wrap img {

  transform: scale(1.08);

}



.gallery-overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(

    135deg,

    rgba(255, 107, 53, 0.85),

    rgba(155, 93, 229, 0.85)

  );

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 8px;

  opacity: 0;

  transition: var(--transition);

  color: var(--white);

  cursor: pointer;

}



.gallery-item:hover .gallery-overlay {

  opacity: 1;

}



.gallery-overlay i {

  font-size: 2rem;

}



.gallery-overlay span {

  font-size: 0.85rem;

  font-weight: 700;

  letter-spacing: 0.08em;

}



/* Lightbox */

.lightbox-modal {

  position: fixed;

  inset: 0;

  background: rgba(0, 0, 0, 0.95);

  z-index: 9999;

  display: flex;

  align-items: center;

  justify-content: center;

  opacity: 0;

  pointer-events: none;

  transition: var(--transition);

}



.lightbox-modal.active {

  opacity: 1;

  pointer-events: all;

}



.lightbox-img-wrap img {

  max-width: 90vw;

  max-height: 85vh;

  border-radius: var(--radius-md);

  object-fit: contain;

}



.lightbox-close {

  position: absolute;

  top: 20px;

  right: 20px;

  width: 46px;

  height: 46px;

  background: rgba(255, 255, 255, 0.1);

  border: 1px solid rgba(255, 255, 255, 0.2);

  border-radius: var(--radius-full);

  color: var(--white);

  font-size: 1.1rem;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: var(--transition);

}



.lightbox-close:hover {

  background: var(--danger);

}



.lightbox-nav {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: 52px;

  height: 52px;

  background: rgba(255, 255, 255, 0.1);

  border: 1px solid rgba(255, 255, 255, 0.2);

  border-radius: var(--radius-full);

  color: var(--white);

  font-size: 1.2rem;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: var(--transition);

}



.lightbox-nav:hover {

  background: var(--primary);

}



.lightbox-nav.prev {

  left: 20px;

}



.lightbox-nav.next {

  right: 20px;

}



/* ============================================================

   TEAM SECTION

   ============================================================ */

.team-section {

  background: var(--body-bg);

}



.team-slider,

.volunteer-slider {

  padding: 10px 4px 50px;

}



.team-slider .swiper-button-prev,

.team-slider .swiper-button-next,

.volunteer-slider .swiper-button-prev,

.volunteer-slider .swiper-button-next {

  width: 40px;

  height: 40px;

  border-radius: var(--radius-full);

  background: rgba(255, 255, 255, 0.95);

  border: 1px solid var(--border-color);

  color: var(--primary);

  box-shadow: var(--shadow-sm);

}



.team-slider .swiper-button-prev::after,

.team-slider .swiper-button-next::after,

.volunteer-slider .swiper-button-prev::after,

.volunteer-slider .swiper-button-next::after {

  font-size: 14px;

  font-weight: 800;

}



.team-slider .swiper-pagination,

.volunteer-slider .swiper-pagination {

  bottom: 8px !important;

}



@media (max-width: 767px) {

  .team-slider .swiper-button-prev,

  .team-slider .swiper-button-next,

  .volunteer-slider .swiper-button-prev,

  .volunteer-slider .swiper-button-next {

    display: none;

  }

}



.team-card {

  background: var(--white);

  border-radius: var(--radius-lg);

  overflow: hidden;

  box-shadow: var(--shadow-sm);

  border: 1px solid var(--border-color);

  transition: var(--transition);

  text-align: center;

}



.team-card:hover {

  transform: translateY(-10px);

  box-shadow: var(--shadow-lg);

}



.team-img-wrap {

  position: relative;

  height: 260px;

  overflow: hidden;

}



.team-img-wrap img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.5s ease;

}



.team-card:hover .team-img-wrap img {

  transform: scale(1.05);

}



.team-social {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  display: flex;

  justify-content: center;

  gap: 10px;

  padding: 20px;

  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));

  transform: translateY(100%);

  transition: var(--transition);

}



.team-card:hover .team-social {

  transform: translateY(0);

}



.team-social a {

  width: 36px;

  height: 36px;

  background: rgba(255, 255, 255, 0.15);

  border: 1px solid rgba(255, 255, 255, 0.3);

  border-radius: var(--radius-full);

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--white);

  font-size: 0.9rem;

  backdrop-filter: blur(8px);

}



.team-social a:hover {

  background: var(--primary);

  border-color: var(--primary);

}



.team-info {

  padding: 20px;

}



.team-info h5 {

  font-size: 1rem;

  font-weight: 800;

  color: var(--text-dark);

  margin-bottom: 4px;

}



.team-info span {

  font-size: 0.8rem;

  color: var(--primary);

  font-weight: 600;

}



/* ============================================================

   BLOG SECTION

   ============================================================ */

.blog-section {

  background: var(--white);

}



.blog-card {

  perspective: 1000px;

  height: 100%;

}



.blog-card-inner {

  background: var(--white);

  border-radius: var(--radius-lg);

  overflow: hidden;

  box-shadow: var(--shadow-sm);

  border: 1px solid var(--border-color);

  height: 100%;

  display: flex;

  flex-direction: column;

  transition:

    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),

    box-shadow 0.4s ease,

    border-color 0.4s ease;

  transform-style: preserve-3d;

}



.blog-card-inner:hover {

  box-shadow: var(--shadow-lg);

  border-color: var(--primary);

}



.blog-img-wrap {

  position: relative;

  height: 240px;

  overflow: hidden;

}



.blog-img-wrap img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.6s ease;

}



.blog-card-inner:hover .blog-img-wrap img {

  transform: scale(1.1);

}



/* Blog Date Badge */

.blog-date {

  position: absolute;

  top: 20px;

  left: 20px;

  background: var(--white);

  padding: 8px 14px;

  border-radius: var(--radius-md);

  text-align: center;

  box-shadow: var(--shadow-md);

  z-index: 2;

  transition: var(--transition);

}



.blog-card-inner:hover .blog-date {

  background: var(--primary);

  color: var(--white);

}



.blog-date strong {

  display: block;

  font-size: 1.2rem;

  line-height: 1;

  font-family: var(--font-heading);

}



.blog-date span {

  display: block;

  font-size: 0.75rem;

  font-weight: 700;

  text-transform: uppercase;

}



/* Category Tag */

.blog-category-tag {

  position: absolute;

  bottom: 20px;

  right: 20px;

  background: var(--gradient-primary);

  color: var(--white);

  font-size: 0.75rem;

  font-weight: 700;

  padding: 6px 16px;

  border-radius: var(--radius-full);

  z-index: 2;

  box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);

}



.blog-info {

  padding: 24px;

  flex: 1;

  display: flex;

  flex-direction: column;

}



.blog-meta {

  display: flex;

  gap: 15px;

  margin-bottom: 15px;

  font-size: 0.82rem;

  color: var(--text-muted);

}



.blog-meta span {

  display: flex;

  align-items: center;

  gap: 5px;

}



.blog-meta i {

  color: var(--primary);

}



.blog-info h4 {

  font-size: 1.25rem;

  font-weight: 800;

  color: var(--text-dark);

  margin-bottom: 12px;

  line-height: 1.4;

  transition: var(--transition);

}



.blog-card-inner:hover h4 {

  color: var(--primary);

}



.blog-info p {

  font-size: 0.9rem;

  color: var(--text-muted);

  margin-bottom: 20px;

  line-height: 1.6;

  flex: 1;

}



.blog-link {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  color: var(--text-dark);

  font-weight: 700;

  font-size: 0.9rem;

  transition: var(--transition);

}



.blog-link i {

  color: var(--primary);

  transition: var(--transition);

}



.blog-link:hover {

  color: var(--primary);

  gap: 12px;

}



/* ============================================================

   TESTIMONIALS SECTION

   ============================================================ */

.testimonials-section {

  background: linear-gradient(180deg, #fafafa 0%, #f0f0ff 100%);

}



.testimonials-slider .swiper-slide {

  display: flex;

  height: auto;

}



.testimonial-card {

  background: var(--white);

  border-radius: var(--radius-lg);

  padding: 24px;

  height: 100%;

  width: 100%;

  box-shadow: var(--shadow-sm);

  border: 1px solid var(--border-color);

  position: relative;

  display: flex;

  flex-direction: column;

  transition:

    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),

    box-shadow 0.4s ease,

    border-color 0.4s ease;

  transform-style: preserve-3d;

  perspective: 1000px;

}



.testimonial-card:hover {

  box-shadow: var(--shadow-lg);

  border-color: var(--primary);

}



.featured-testimonial {

  background: linear-gradient(135deg, #1e0533, #0d0d1a);

  border-color: rgba(155, 93, 229, 0.3);

}



.featured-testimonial .quote-text {

  color: rgba(255, 255, 255, 0.85) !important;

}



.featured-testimonial .quote-icon {

  color: rgba(255, 255, 255, 0.8) !important;

}



.featured-testimonial .testimonial-author strong {

  color: var(--white);

}



.featured-testimonial .testimonial-author span {

  color: var(--primary-light);

}



.quote-icon {

  color: var(--primary);

  font-size: 2rem;

  line-height: 1;

  margin-bottom: 10px;

  opacity: 0.6;

}



.testimonial-card .quote-text-wrap {

  position: relative;

  margin-bottom: 16px;

}



.testimonial-card .quote-text {

  font-size: 0.85rem;

  color: var(--text-muted);

  font-style: italic;

  line-height: 1.7;

  max-height: 4.5em;

  overflow: hidden;

  transition: max-height 0.3s ease;

}



.testimonial-card .quote-text.expanded {

  max-height: none;

}



.testimonial-card .quote-text-fade {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  height: 1.5em;

  background: linear-gradient(transparent, var(--white));

  pointer-events: none;

  transition: opacity 0.3s ease;

}



.testimonial-card .quote-text.expanded + .quote-text-fade {

  opacity: 0;

}



.read-more-btn {

  background: none;

  border: none;

  color: var(--primary);

  font-size: 0.8rem;

  font-weight: 600;

  cursor: pointer;

  padding: 0;

  margin-bottom: 16px;

  display: inline-flex;

  align-items: center;

  gap: 4px;

  transition: gap 0.2s ease;

}



.read-more-btn:hover {

  gap: 8px;

  color: var(--primary-dark);

}



.featured-testimonial .quote-text {

  color: rgba(255, 255, 255, 0.8);

}



.featured-testimonial .quote-text-fade {

  background: linear-gradient(transparent, #1e0533);

}



.testimonial-author {

  display: flex;

  align-items: center;

  gap: 14px;

}



.testimonial-author img {

  width: 50px;

  height: 50px;

  border-radius: var(--radius-full);

  object-fit: cover;

  border: 2px solid var(--primary);

}



.testimonial-author strong {

  display: block;

  font-size: 0.9rem;

  color: var(--text-dark);

}



.testimonial-author span {

  font-size: 0.78rem;

  color: var(--text-muted);

}



/* ============================================================

   DONATE SECTION

   ============================================================ */

.donate-section {

  background: var(--gradient-hero);

  padding: 100px 0;

  position: relative;

  overflow: hidden;

}



.donate-bg-shapes {

  position: absolute;

  inset: 0;

  pointer-events: none;

}



.d-shape {

  position: absolute;

  border-radius: 50%;

  filter: blur(100px);

  opacity: 0.12;

}



.d-shape-1 {

  width: 500px;

  height: 500px;

  background: var(--primary);

  top: -200px;

  right: -100px;

}



.d-shape-2 {

  width: 400px;

  height: 400px;

  background: var(--secondary);

  bottom: -150px;

  left: -100px;

}



.donate-card {

  background: rgba(255, 255, 255, 0.05);

  backdrop-filter: blur(20px);

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: var(--radius-xl);

  padding: clamp(30px, 5vw, 60px);

  position: relative;

}



.donate-icon-wrap {

  display: inline-flex;

  width: 60px;

  height: 60px;

  background: var(--gradient-primary);

  border-radius: var(--radius-md);

  align-items: center;

  justify-content: center;

  font-size: 1.8rem;

  color: var(--white);

  margin-bottom: 20px;

  animation: pulse 2s ease-in-out infinite;

}



@keyframes pulse {

  0%,

  100% {

    box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.4);

  }



  50% {

    box-shadow: 0 0 0 16px rgba(255, 107, 53, 0);

  }

}



.donate-card h2 {

  font-size: clamp(1.6rem, 4vw, 2.5rem);

  font-weight: 900;

  color: var(--white);

  margin-bottom: 14px;

}



.donate-card h2 span {

  background: var(--gradient-primary);

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

}



.donate-card > .row > div > p {

  color: rgba(255, 255, 255, 0.65);

  margin-bottom: 28px;

}



.donate-amounts {

  display: flex;

  gap: 12px;

  flex-wrap: wrap;

}



.amount-btn {

  padding: 10px 22px;

  border-radius: var(--radius-full);

  border: 2px solid rgba(255, 255, 255, 0.2);

  background: transparent;

  color: rgba(255, 255, 255, 0.7);

  font-family: var(--font-heading);

  font-size: 0.9rem;

  font-weight: 700;

  cursor: pointer;

  transition: var(--transition);

}



.amount-btn:hover,

.amount-btn.active {

  background: var(--gradient-primary);

  border-color: var(--primary);

  color: var(--white);

  box-shadow: var(--shadow-color);

}



.donate-form-wrap {

  background: var(--white);

  border-radius: var(--radius-lg);

  padding: 32px;

  transition:

    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),

    box-shadow 0.4s ease,

    border-color 0.4s ease;

  transform-style: preserve-3d;

  box-shadow: var(--shadow-md);

}



.donate-form-wrap:hover {

  box-shadow: var(--shadow-lg);

}



.donate-form-wrap h5 {

  font-size: 1rem;

  font-weight: 800;

  color: var(--text-dark);

  margin-bottom: 20px;

}



.donate-form-wrap h5 i {

  color: var(--danger);

}



.donate-input-wrap {

  position: relative;

  margin-bottom: 14px;

}



.donate-form-icon {

  position: absolute;

  left: 16px;

  top: 50%;

  transform: translateY(-50%);

  font-size: 1.1rem;

  color: var(--primary);

  opacity: 0.8;

}



.rupee-symbol {

  position: absolute;

  left: 18px;

  top: 50%;

  transform: translateY(-50%);

  font-size: 1.2rem;

  font-weight: 800;

  color: var(--primary);

}



.donate-input {

  width: 100%;

  padding: 14px 16px 14px 44px;

  border: 2px solid var(--border-color);

  border-radius: var(--radius-md);

  font-size: 0.9rem;

  outline: none;

  font-family: var(--font-body);

  transition: var(--transition);

  background: var(--white);

}



.donate-input:focus {

  border-color: var(--primary);

  box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.1);

}



.donate-select {

  width: 100%;

  padding: 14px 16px;

  border: 2px solid var(--border-color);

  border-radius: var(--radius-md);

  font-size: 0.95rem;

  font-family: var(--font-body);

  outline: none;

  margin-bottom: 14px;

  cursor: pointer;

  transition: var(--transition);

  background: var(--body-bg);

  color: var(--text-dark);

}



.donate-select:focus {

  border-color: var(--primary);

  box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.1);

}



.font-awesome-select {

  font-family:

    "Poppins", "Font Awesome 6 Free", "Font Awesome 6 Brands", sans-serif;

  font-weight: 600;

}



.font-awesome-select option {

  font-weight: 600;

  padding: 10px;

}



.donate-btn {

  width: 100%;

  padding: 16px;

  background: var(--gradient-primary);

  color: var(--white);

  border: none;

  border-radius: var(--radius-md);

  font-family: var(--font-heading);

  font-size: 1rem;

  font-weight: 800;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  transition: var(--transition);

  margin-bottom: 12px;

}



.donate-btn:hover {

  transform: translateY(-2px);

  box-shadow: var(--shadow-color);

}



.donate-note {

  text-align: center;

  font-size: 0.78rem;

  color: var(--success);

  font-weight: 600;

  margin: 0;

}



/* ============================================================

   CONTACT SECTION

   ============================================================ */

.contact-section {

  background: var(--body-bg);

}



.contact-info-card {

  background: var(--white);

  border-radius: var(--radius-lg);

  padding: 40px;

  height: 100%;

  box-shadow: var(--shadow-sm);

  border: 1px solid var(--border-color);

  transition:

    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),

    box-shadow 0.4s ease,

    border-color 0.4s ease;

  transform-style: preserve-3d;

}



.contact-info-card:hover {

  box-shadow: var(--shadow-lg);

  border-color: var(--primary);

}



.contact-info-card h4 {

  font-size: 1.3rem;

  font-weight: 800;

  color: var(--text-dark);

  margin-bottom: 28px;

  padding-bottom: 16px;

  border-bottom: 2px solid var(--border-color);

}



.contact-info-item {

  display: flex;

  gap: 16px;

  margin-bottom: 24px;

  align-items: flex-start;

}



.c-icon {

  width: 46px;

  height: 46px;

  background: rgba(255, 107, 53, 0.1);

  color: var(--primary);

  border-radius: var(--radius-md);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.1rem;

  flex-shrink: 0;

}



.contact-info-item strong {

  display: block;

  font-size: 0.85rem;

  color: var(--text-dark);

  margin-bottom: 4px;

}



.contact-info-item p {

  font-size: 0.85rem;

  color: var(--text-muted);

  margin: 0;

  line-height: 1.7;

}



.contact-social {

  display: flex;

  gap: 10px;

  margin-top: 28px;

  padding-top: 24px;

  border-top: 1px solid var(--border-color);

  flex-wrap: wrap;

}



.social-link {

  width: 42px;

  height: 42px;

  background: var(--body-bg);

  border: 2px solid var(--border-color);

  border-radius: var(--radius-full);

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--text-muted);

  font-size: 1rem;

  transition: var(--transition);

}



.social-link:hover {

  background: var(--primary);

  border-color: var(--primary);

  color: var(--white);

  transform: translateY(-3px);

}



/* Contact Form */

.contact-form-card {

  background: var(--white);

  border-radius: var(--radius-lg);

  padding: 40px;

  box-shadow: var(--shadow-sm);

  border: 1px solid var(--border-color);

  height: 100%;

  transition:

    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),

    box-shadow 0.4s ease,

    border-color 0.4s ease;

  transform-style: preserve-3d;

}



.contact-form-card:hover {

  box-shadow: var(--shadow-lg);

  border-color: var(--primary);

}



.contact-form-card h4 {

  font-size: 1.3rem;

  font-weight: 800;

  color: var(--text-dark);

  margin-bottom: 28px;

  padding-bottom: 16px;

  border-bottom: 2px solid var(--border-color);

}



.form-group-custom label {

  display: block;

  font-size: 0.82rem;

  font-weight: 600;

  color: var(--text-dark);

  margin-bottom: 8px;

}



.input-icon-wrap {

  position: relative;

}



.input-icon-wrap i {

  position: absolute;

  left: 14px;

  top: 50%;

  transform: translateY(-50%);

  color: var(--text-light);

  font-size: 0.95rem;

  pointer-events: none;

}



.form-control-custom {

  width: 100%;

  padding: 12px 14px 12px 40px;

  border: 2px solid var(--border-color);

  border-radius: var(--radius-md);

  font-size: 0.88rem;

  font-family: var(--font-body);

  outline: none;

  transition: var(--transition);

  background: var(--body-bg);

  color: var(--text-dark);

  resize: none;

}



.form-control-custom:focus {

  border-color: var(--primary);

  box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.1);

  background: var(--white);

}



textarea.form-control-custom {

  padding-top: 14px;

}



.input-icon-wrap:has(textarea) i {

  top: 18px;

  transform: none;

}



/* Form Success Message */

.form-success-msg {

  display: none;

  text-align: center;

  padding: 40px;

  background: rgba(6, 214, 160, 0.05);

  border-radius: var(--radius-md);

  border: 1px solid rgba(6, 214, 160, 0.2);

  margin-top: 20px;

}



.form-success-msg i {

  font-size: 3rem;

  color: var(--success);

  display: block;

  margin-bottom: 16px;

}



.form-success-msg h5 {

  color: var(--text-dark);

  margin-bottom: 8px;

}



.form-success-msg p {

  color: var(--text-muted);

  margin: 0;

}



.form-success-msg.visible {

  display: block;

  animation: fadeInUp 0.5s ease forwards;

}



@keyframes fadeInUp {

  from {

    opacity: 0;

    transform: translateY(20px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



/* ============================================================

   FOOTER

   ============================================================ */

.site-footer {

  background: var(--dark);

}



.footer-top {

  padding: 80px 0 60px;

}



.footer-brand {

  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 16px;

}



.footer-desc {

  color: rgba(255, 255, 255, 0.5);

  font-size: 0.88rem;

  line-height: 1.8;

  margin-bottom: 24px;

  text-align: justify;

}



.footer-social {

  display: flex;

  gap: 10px;

  flex-wrap: wrap;

}



.footer-social a {

  width: 38px;

  height: 38px;

  background: rgba(255, 255, 255, 0.06);

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: var(--radius-full);

  display: flex;

  align-items: center;

  justify-content: center;

  color: rgba(255, 255, 255, 0.5);

  font-size: 0.9rem;

  transition: var(--transition);

}



.footer-social a:hover {

  background: var(--primary);

  border-color: var(--primary);

  color: var(--white);

  transform: translateY(-3px);

}



.footer-heading {

  font-size: 0.95rem;

  font-weight: 800;

  color: var(--white);

  margin-bottom: 20px;

  padding-bottom: 12px;

  border-bottom: 2px solid rgba(255, 255, 255, 0.08);

}



.footer-links li {

  margin-bottom: 10px;

}



.footer-links a {

  color: rgba(255, 255, 255, 0.5);

  font-size: 0.85rem;

  display: flex;

  align-items: center;

  gap: 6px;

  transition: var(--transition);

}



.footer-links a i {

  font-size: 0.7rem;

}



.footer-links a:hover {

  color: var(--primary);

  gap: 10px;

}



/* Newsletter */

.footer-newsletter {

  display: flex;

  gap: 10px;

  margin-bottom: 20px;

}



.footer-newsletter input {

  flex: 1;

  padding: 12px 16px;

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: var(--radius-md);

  background: rgba(255, 255, 255, 0.06);

  color: var(--white);

  font-size: 0.85rem;

  font-family: var(--font-body);

  outline: none;

  transition: var(--transition);

}



.footer-newsletter input::placeholder {

  color: rgba(255, 255, 255, 0.3);

}



.footer-newsletter input:focus {

  border-color: var(--primary);

}



.footer-newsletter button {

  width: 46px;

  height: 46px;

  background: var(--gradient-primary);

  border: none;

  border-radius: var(--radius-md);

  color: var(--white);

  font-size: 1rem;

  cursor: pointer;

  transition: var(--transition);

  flex-shrink: 0;

}



.footer-newsletter button:hover {

  transform: scale(1.05);

}



.footer-badges {

  display: flex;

  gap: 10px;

  flex-wrap: nowrap;

}



.f-badge {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  background: rgba(255, 255, 255, 0.06);

  border: 1px solid rgba(255, 255, 255, 0.1);

  color: rgba(255, 255, 255, 0.6);

  font-size: 0.72rem;

  font-weight: 600;

  padding: 6px 12px;

  border-radius: var(--radius-full);

}



.f-badge i {

  color: var(--success);

}



.footer-bottom {

  border-top: 1px solid rgba(255, 255, 255, 0.06);

  padding: 20px 0;

  background-color: black;

}



.footer-bottom p {

  margin: 0;

  font-size: 0.82rem;

  color: darkorange;

}



/* ============================================================

   BACK TO TOP BUTTON

   ============================================================ */

.back-to-top {

  position: fixed;

  bottom: 30px;

  right: 30px;

  width: 48px;

  height: 48px;

  background: var(--gradient-primary);

  color: var(--white);

  border: none;

  border-radius: var(--radius-full);

  font-size: 1.1rem;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  z-index: 999;

  box-shadow: var(--shadow-color);

  opacity: 0;

  transform: translateY(20px);

  pointer-events: none;

  transition: var(--transition);

}



.back-to-top.visible {

  opacity: 1;

  transform: translateY(0);

  pointer-events: all;

}



.back-to-top:hover {

  transform: translateY(-4px);

}

/* ============================================================

   RESPONSIVE BREAKPOINTS

   ============================================================ */



/* ---- MOBILE / TABLET / SMALL LAPTOP HERO FIT ---- */

@media (max-width: 1199px) {

  .hero-section {

    --header-h: 95px;

    height: 560px;

    min-height: 0;

  }



  .hero-section .row.min-vh-100 {

    min-height: inherit !important;

    height: auto;

  }



  .hero-background-slider .hero-image-slider,

  .hero-background-slider .swiper-wrapper,

  .hero-background-slider .swiper-slide,

  .hero-background-slider .hero-img-card,

  .hero-background-slider .hero-img-main {

    width: 100% !important;

    height: 100% !important;

    min-height: 0 !important;

  }



  .hero-background-slider .hero-img-main img {

    width: 100% !important;

    height: 100% !important;

    object-fit: cover !important;

    object-position: center center !important;

  }

}



/* ---- TABLET (max-width: 991px / lg) ---- */

@media (max-width: 991px) {

  .section-padding {

    padding: 72px 0;

  }



  .hero-section {

    --header-h: 95px;

  }



  .hero-content {

    padding-top: 105px;

    padding-bottom: 46px;

  }



  .hero-img-main {

    height: 100%;

    min-height: 0;

  }



  .hero-background-slider .hero-img-main img {

    object-fit: cover;

    object-position: center center;

  }



  .floating-badge {

    display: none;

  }



  .badge-award {

    display: none;

  }



  .about-image-grid {

    height: 380px;

  }



  .founder-impact-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }



  .founder-impact-card:last-child {

    grid-column: 1 / -1;

  }



  .founder-image-wrap,

  .founder-image-wrap img {

    min-height: 360px;

  }



  .mv-card {

    padding: 24px 20px;

  }



  .gallery-grid {

    grid-template-columns: repeat(2, 1fr);

    grid-auto-rows: 200px;

  }



  .gallery-item.gallery-wide {

    grid-column: span 1;

  }



  .gallery-item.gallery-tall {

    grid-row: span 1;

  }



  .donate-card {

    padding: 36px 28px;

  }



  .contact-info-card,

  .contact-form-card {

    padding: 30px;

  }



  .stats-section {

    padding: 60px 0;

  }

}



/* ---- TABLET SMALL (max-width: 767px / md) ---- */

@media (max-width: 767px) {

  .section-padding {

    padding: 60px 0;

  }



  .hero-title {

    font-size: clamp(1.8rem, 8vw, 2.6rem);

  }



  .hero-subtitle {

    font-size: 0.95rem;

  }



  .hero-buttons {

    gap: 12px;

  }



  .btn-primary-custom,

  .btn-secondary-custom {

    padding: 12px 24px;

    font-size: 0.88rem;

  }



  .hero-stats {

    gap: 20px;

  }



  .hero-stat-item .stat-num {

    font-size: 1.6rem;

  }



  .about-image-grid {

    height: 300px;

  }



  .founder-values-grid {

    grid-template-columns: 1fr;

  }



  .founder-impact-card:hover,

  .founder-impact-card:nth-child(even):hover,

  .founder-value-card:hover,

  .founder-value-card:nth-child(even):hover {

    transform: translateY(-3px);

  }



  .founder-image-wrap,

  .founder-image-wrap img {

    min-height: 320px;

  }



  .mv-card h3 {

    font-size: 1.2rem;

  }



  .about-img-3 {

    display: none;

  }



  .gallery-grid {

    grid-template-columns: 1fr 1fr;

    grid-auto-rows: 160px;

  }



  .team-card {

    max-width: 320px;

    margin: 0 auto;

  }



  .testimonial-card {

    padding: 20px 18px;

  }



  .donate-form-wrap {

    padding: 24px;

    margin-top: 20px;

  }



  .donate-amounts {

    gap: 8px;

  }



  .amount-btn {

    padding: 8px 16px;

    font-size: 0.82rem;

  }



  .footer-top {

    padding: 60px 0 40px;

  }



  .back-to-top {

    bottom: 20px;

    right: 20px;

    width: 42px;

    height: 42px;

  }



  .contact-form-card h4,

  .contact-info-card h4 {

    font-size: 1.1rem;

  }



  .lightbox-nav {

    display: none;

  }

}



@media (max-width: 575px) {

  .section-padding {

    padding: 30px 20px;

  }



  .brand-text {

    font-size: 0.78rem;

    max-width: 180px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

  }



  .brand-icon {

    width: 160px;

    height: 36px;

  }



  .hero-section {

    --header-h: 86px; /* Mobile Navbar height */

    height: auto;

    min-height: 100vh;

    padding-top: var(--header-h);

    align-items: center;

  }



  .hero-background-slider .hero-img-main img {

    object-fit: cover !important;

    object-position: center center !important;

  }



  .hero-section .container,

  .hero-section .row.min-vh-100 {

    height: 100%;

  }



  .hero-section .row.min-vh-100 {

    align-items: center !important;

  }



  .hero-content {

    padding-top: 88px;

    padding-bottom: 24px;

  }



  .hero-img-main {

    height: 100%;

  }



  .hero-badge {

    font-size: 0.7rem;

    padding: 6px 14px;

    margin-bottom: 16px;

  }



  .hero-title {

    margin-bottom: 22px;

  }



  .hero-buttons {

    margin-bottom: 0;

  }



  .hero-stats {

    gap: 16px;

  }



  .hero-stat-divider {

    height: 30px;

  }



  .about-image-grid {

    height: 260px;

  }



  .about-img-2 {

    display: none;

  }



  .about-img-1 {

    width: 100%;

    height: 100%;

  }



  .founder-impact-grid {

    grid-template-columns: 1fr;

  }



  .founder-impact-card:last-child {

    grid-column: auto;

  }



  .impact-number {

    font-size: 1.6rem;

  }



  .impact-label {

    font-size: 0.68rem;

  }



  .founder-image-wrap,

  .founder-image-wrap img {

    min-height: 280px;

  }



  .gallery-grid {

    grid-template-columns: 1fr;

    grid-auto-rows: 220px;

  }



  .gallery-item.gallery-wide {

    grid-column: span 1;

  }



  .gallery-item.gallery-tall {

    grid-row: span 1;

  }



  .program-card {

    padding: 28px 22px;

  }



  .stat-card {

    padding: 20px 10px;

  }



  .donate-form-wrap {

    padding: 20px;

  }



  .donate-amounts {

    justify-content: center;

  }



  .contact-info-card,

  .contact-form-card {

    padding: 24px 20px;

  }



  .footer-newsletter {

    flex-direction: column;

  }



  .footer-newsletter button {

    width: 100%;

    height: 44px;

  }



  .section-title {

    font-size: clamp(1.5rem, 7vw, 2rem);

  }



  .footer-bottom .row > div {

    margin-bottom: 6px;

  }

}



/* ---- LARGE DESKTOP (min-width: 1400px / xxl) ---- */

@media (min-width: 1400px) {

  .hero-title {

    font-size: 4.2rem;

  }



  .section-title {

    font-size: 3rem;

  }



  .hero-img-main {

    height: 100%; /* Fit perfectly in screen */

  }

}



/* ============================================================

   24. FLOATING CONTACT ACTIONS (LEFT SIDE)

   ============================================================ */

.floating-actions-left {

  position: fixed;

  left: 20px;

  bottom: 30px;

  display: flex;

  flex-direction: column;

  gap: 15px;

  z-index: 999;

}



.action-btn {

  width: 55px;

  height: 55px;

  border-radius: var(--radius-full);

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--white);

  font-size: 1.5rem;

  box-shadow: var(--shadow-md);

  transition: var(--transition);

  position: relative;

  text-decoration: none;

}



.action-btn:hover {

  transform: scale(1.1);

  box-shadow: var(--shadow-lg);

  color: var(--white);

}



.btn-whatsapp {

  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);

  animation: pulse-whatsapp 2s infinite;

}



.btn-call {

  background: linear-gradient(135deg, #0077b6 0%, #023e8a 100%);

  animation: pulse-call 2s infinite;

  animation-delay: 1s;

}



.btn-label {

  position: absolute;

  left: 100%;

  margin-left: 15px;

  background: var(--dark);

  color: var(--white);

  padding: 6px 15px;

  border-radius: var(--radius-sm);

  font-size: 0.8rem;

  font-weight: 600;

  white-space: nowrap;

  opacity: 0;

  visibility: hidden;

  transition: var(--transition);

  box-shadow: var(--shadow-sm);

}



.btn-label::before {

  content: "";

  position: absolute;

  right: 100%;

  top: 50%;

  transform: translateY(-50%);

  border-width: 6px;

  border-style: solid;

  border-color: transparent var(--dark) transparent transparent;

}



.action-btn:hover .btn-label {

  opacity: 1;

  visibility: visible;

  left: 110%;

}



@keyframes pulse-whatsapp {

  0% {

    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4);

  }



  70% {

    box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);

  }



  100% {

    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);

  }

}



@keyframes pulse-call {

  0% {

    box-shadow: 0 0 0 0 rgba(0, 119, 182, 0.4);

  }



  70% {

    box-shadow: 0 0 0 15px rgba(0, 119, 182, 0);

  }



  100% {

    box-shadow: 0 0 0 0 rgba(0, 119, 182, 0);

  }

}



@media (max-width: 768px) {

  .floating-actions-left {

    left: 15px;

    bottom: 20px;

    gap: 10px;

  }



  .action-btn {

    width: 48px;

    height: 48px;

    font-size: 1.2rem;

  }



  .btn-label {

    display: none;

    /* Hide labels on mobile to save space */

  }

}



/* ============================================================

   25. FAQ SECTION

   ============================================================ */

.faq-section {

  background: var(--white);

}



.accordion-custom .accordion-item {

  background: var(--white);

  border-radius: var(--radius-md) !important;

  overflow: hidden;

  border: 1px solid var(--border-color) !important;

  transition: var(--transition);

}



.accordion-custom .accordion-button {

  padding: 24px 30px;

  font-family: var(--font-heading);

  font-weight: 700;

  font-size: 1.1rem;

  color: var(--text-dark);

  background: transparent;

  box-shadow: none;

  transition: var(--transition);

}



.accordion-custom .accordion-button:not(.collapsed) {

  color: var(--primary);

  background: rgba(255, 107, 53, 0.03);

}



.faq-num {

  font-size: 0.9rem;

  font-weight: 800;

  color: var(--primary-light);

  opacity: 0.5;

}



.accordion-custom .accordion-button:not(.collapsed) .faq-num {

  opacity: 1;

}



.accordion-custom .accordion-body {

  padding: 0 30px 30px 30px;

  font-size: 0.95rem;

  color: var(--text-muted);

  line-height: 1.8;

  background: rgba(255, 107, 53, 0.03);

}



.accordion-custom .accordion-button::after {

  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231A1A2E'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");

  background-size: 1.25rem;

  transition: transform 0.3s ease;

}



.accordion-custom .accordion-button:not(.collapsed)::after {

  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FF6B35'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");

}



.accordion-item:hover {

  border-color: var(--primary) !important;

  box-shadow: var(--shadow-sm) !important;

}



/* FAQ Image Styles */

.faq-image-wrapper {

  padding: 20px;

}



.faq-image-tilt {

  position: relative;

  border-radius: var(--radius-lg);

  overflow: hidden;

  box-shadow: var(--shadow-lg);

  transform-style: preserve-3d;

  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);

}



.faq-image-tilt img {

  width: 100%;

  height: 500px;

  object-fit: cover;

  display: block;

}



.faq-image-badge {

  position: absolute;

  bottom: 30px;

  right: 30px;

  background: var(--white);

  padding: 15px 25px;

  border-radius: var(--radius-md);

  box-shadow: var(--shadow-md);

  display: flex;

  align-items: center;

  gap: 12px;

  transform: translateZ(50px);

  /* 3D effect */

  z-index: 2;

}



.faq-image-badge i {

  color: var(--primary);

  font-size: 1.5rem;

}



.faq-image-badge span {

  font-family: var(--font-heading);

  font-weight: 800;

  color: var(--text-dark);

  font-size: 1rem;

}



@media (max-width: 992px) {

  .faq-image-tilt img {

    height: 400px;

  }

}



@media (max-width: 768px) {

  .accordion-custom .accordion-button {

    padding: 18px 20px;

    font-size: 1rem;

  }



  .faq-image-tilt img {

    height: 300px;

  }

}



/* ============================================================

   26. ACCREDITATIONS / COMPLIANCE SECTION

   ============================================================ */

.vol-form-scroll {

  max-height: 420px;

  overflow-y: auto;

  padding-right: 4px;

}



.vol-form-scroll::-webkit-scrollbar {

  width: 4px;

}



.vol-form-scroll::-webkit-scrollbar-thumb {

  background: var(--primary);

  border-radius: 4px;

}



.section-padding-sm {

  padding: 60px 0;

}



.compliance-section {

  background: var(--body-bg);

  border-bottom: 1px solid var(--border-color);

}



.compliance-card {

  background: var(--white);

  padding: 30px 20px;

  border-radius: var(--radius-lg);

  display: flex;

  align-items: center;

  gap: 20px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

  border: 1px solid var(--border-color);

  transition:

    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),

    box-shadow 0.4s ease,

    border-color 0.4s ease;

  transform-style: preserve-3d;

  height: 100%;

}



.compliance-card:hover {

  box-shadow: var(--shadow-md);

  border-color: var(--primary);

}



.comp-icon {

  width: 60px;

  height: 60px;

  background: rgba(255, 107, 53, 0.1);

  border-radius: var(--radius-md);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.8rem;

  color: var(--primary);

  flex-shrink: 0;

  transition: var(--transition);

  transform: translateZ(30px);

  /* 3D effect */

}



.compliance-card:hover .comp-icon {

  background: var(--primary);

  color: var(--white);

}



.comp-info h5 {

  font-size: 0.95rem;

  font-weight: 800;

  color: var(--text-dark);

  margin-bottom: 4px;

  font-family: var(--font-heading);

}



.comp-info span {

  font-size: 0.75rem;

  font-weight: 600;

  color: var(--text-muted);

  letter-spacing: 0.5px;

}



/* ============================================================

   27. BANK ACCOUNT SECTION

   ============================================================ */

.bank-section {

  background: #fdfdfd;

}



.bank-qr-card,

.bank-details-card {

  background: var(--white);

  padding: 40px;

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow-sm);

  border: 1px solid var(--border-color);

  transition:

    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),

    box-shadow 0.4s ease,

    border-color 0.4s ease;

  transform-style: preserve-3d;

}



.bank-qr-card:hover,

.bank-details-card:hover {

  box-shadow: var(--shadow-lg);

  border-color: var(--primary);

}



.qr-img-wrap {

  width: 240px;

  margin: 0 auto;

  padding: 15px;

  background: var(--white);

  border: 4px solid var(--primary-light);

  border-radius: var(--radius-md);

  transform: translateZ(40px);

  /* 3D effect */

  box-shadow: var(--shadow-md);

}



.qr-img-wrap img {

  width: 100%;

}



.bank-details-inner h4,

.bank-qr-inner h4 {

  font-family: var(--font-heading);

  font-weight: 800;

  color: var(--text-dark);

  position: relative;

  padding-bottom: 12px;

}



.bank-details-inner h4::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: 0;

  width: 50px;

  height: 3px;

  background: var(--gradient-primary);

  border-radius: var(--radius-full);

}



.bank-info-table {

  display: flex;

  flex-direction: column;

  gap: 15px;

}



.info-row {

  display: flex;

  justify-content: space-between;

  padding-bottom: 10px;

  border-bottom: 1px dashed var(--border-color);

  transform: translateZ(20px);

}



.info-row .label {

  font-size: 0.85rem;

  font-weight: 600;

  color: var(--text-muted);

}



.info-row .value {

  font-size: 0.95rem;

  font-weight: 700;

  color: var(--text-dark);

}



.info-row .value.highlight {

  color: var(--primary);

  letter-spacing: 0.5px;

}



.bg-success-soft {

  background: rgba(46, 204, 113, 0.1);

}



/* ============================================================

   28. PROJECTS & ACTIVITIES SECTION

   ============================================================ */

.projects-section {

  background: var(--body-bg);

}



.nav-custom-tabs {

  border-bottom: none;

  gap: 15px;

}



.nav-custom-tabs .nav-link {

  border: 2px solid var(--border-color);

  border-radius: var(--radius-full);

  padding: 12px 30px;

  font-family: var(--font-heading);

  font-weight: 700;

  color: var(--text-muted);

  background: var(--white);

  transition: var(--transition);

}



.nav-custom-tabs .nav-link:hover {

  border-color: var(--primary-light);

  color: var(--primary);

}



.nav-custom-tabs .nav-link.active {

  background: var(--gradient-primary);

  color: var(--white);

  border-color: transparent;

  box-shadow: var(--shadow-sm);

}



.project-card {

  background: var(--white);

  border-radius: var(--radius-lg);

  overflow: hidden;

  box-shadow: var(--shadow-sm);

  border: 1px solid var(--border-color);

  height: 100%;

  display: flex;

  flex-direction: column;

  transition:

    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),

    box-shadow 0.4s ease,

    border-color 0.4s ease;

  transform-style: preserve-3d;

}



.project-card:hover {

  transform: translateY(-8px);

  box-shadow: var(--shadow-lg);

  border-color: var(--primary);

}



.project-img {

  position: relative;

  overflow: hidden;

  height: 190px;

}



.project-img img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.6s ease;

}



.project-card:hover .project-img img {

  transform: scale(1.08);

}



.project-category {

  position: absolute;

  top: 15px;

  left: 15px;

  background: var(--white);

  color: var(--primary);

  padding: 6px 14px;

  border-radius: var(--radius-full);

  font-size: 0.8rem;

  font-weight: 800;

  box-shadow: var(--shadow-sm);

}



.date-badge {

  background: var(--dark);

  color: var(--white);

}



.project-content {

  padding: 22px;

  flex: 1;

  display: flex;

  flex-direction: column;

}



.project-content h4 {

  font-family: var(--font-heading);

  font-size: 1.1rem;

  font-weight: 800;

  color: var(--text-dark);

  margin-bottom: 10px;

  line-height: 1.4;

  transition: var(--transition);

}



.project-card:hover .project-content h4 {

  color: var(--primary);

}



.project-content p {

  font-size: 0.82rem;

  color: var(--text-muted);

  line-height: 1.5;

  margin-bottom: 16px;

  flex: 1;

}



.project-link {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  color: var(--primary);

  font-weight: 700;

  font-size: 0.9rem;

  border-bottom: 2px solid transparent;

  padding-bottom: 2px;

  transition: var(--transition);

  align-self: flex-start;

}



.project-link:hover {

  gap: 12px;

  border-bottom-color: var(--primary);

}



.projects-slider,

.activities-slider {

  padding-bottom: 48px;

  /* Space for pagination */

}



.projects-slider .swiper-slide,

.activities-slider .swiper-slide {

  height: auto;

}



.projects-slider .swiper-wrapper,

.activities-slider .swiper-wrapper {

  align-items: stretch;

}



/* ============================================================

   29. JOIN OUR TEAM BANNER

   ============================================================ */

.join-team-banner {

  background: var(--gradient-primary);

  padding: 50px 0;

  position: relative;

  overflow: hidden;

  border-radius: var(--radius-lg);

  margin: 40px auto;

  max-width: 95%;

  box-shadow: 0 15px 35px rgba(255, 107, 53, 0.2);

}



.join-team-banner::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: url("https://www.transparenttextures.com/patterns/cubes.png");

  opacity: 0.1;

  pointer-events: none;

}



.join-banner-inner {

  position: relative;

  z-index: 2;

}



.join-now-btn {

  color: var(--primary) !important;

  background: var(--white);

  padding: 12px 35px;

  font-size: 1.1rem;

  transition: var(--transition);

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

}



.join-now-btn:hover {

  transform: translateY(-3px);

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);

  background: var(--dark);

}



.join-team-banner h2 {

  font-family: var(--font-heading);

  letter-spacing: -0.5px;

}



/* ============================================================

   30. GALLERY TABS & SLIDERS

   ============================================================ */

.gallery-image-slider,

.gallery-video-slider {

  padding-bottom: 50px;

}



.gallery-card {

  perspective: 1000px;

  height: 100%;

}



.gallery-img-wrap,

.gallery-video-wrap {

  position: relative;

  border-radius: var(--radius-lg);

  overflow: hidden;

  box-shadow: var(--shadow-sm);

  background: var(--dark);

  transition:

    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),

    box-shadow 0.4s ease;

  transform-style: preserve-3d;

}



.gallery-img-wrap {

  height: 280px;

}



.gallery-video-wrap {

  height: 280px;

  /* aspect-ratio: 16/9; for videos */

}



.gallery-video-player {

  width: 100%;

  height: 100%;

  display: block;

  object-fit: cover;

  background: #000;

}



.gallery-img-wrap:hover,

.gallery-video-wrap:hover {

  transform: translateY(-5px);

  box-shadow: var(--shadow-lg);

}



.gallery-img-wrap img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.6s ease;

}



.gallery-img-wrap:hover img {

  transform: scale(1.08);

}



.gallery-hover-tag {

  position: absolute;

  bottom: 20px;

  left: 20px;

  background: var(--gradient-primary);

  color: var(--white);

  padding: 8px 16px;

  border-radius: var(--radius-full);

  font-size: 0.85rem;

  font-weight: 700;

  transform: translateY(20px);

  opacity: 0;

  transition: all 0.4s ease;

  box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);

  z-index: 2;

  display: flex;

  align-items: center;

  gap: 6px;

}



.gallery-img-wrap:hover .gallery-hover-tag {

  transform: translateY(0);

  opacity: 1;

}



.gallery-video-wrap iframe {

  width: 100%;

  height: 100%;

  border: none;

}



/* our-partners-section */

.compliance-section {

  background: #f8fafc;

}



.compliance-card {

  background: #fff;

  padding: 25px 20px;

  border-radius: 12px;

  display: flex;

  align-items: center;

  gap: 15px;

  transition: 0.3s ease;

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);

  height: 100%;

}



.compliance-card:hover {

  transform: translateY(-8px);

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);

}



.comp-icon {

  font-size: 28px;

  color: #ff6b35;

  background: #fff3ed;

  padding: 12px;

  border-radius: 50%;

}



.comp-info h5 {

  margin: 0;

  font-size: 16px;

  font-weight: 600;

}



.comp-info span {

  font-size: 13px;

  color: #777;

}



/* Pagination Style */

.swiper-pagination-bullet {

  background: #ff6b35;

}



/* ---branch-section--- */

/* Animated background blobs */

.bg-blobs {

  position: fixed;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  overflow: hidden;

}



.blob {

  position: absolute;

  border-radius: 50%;

  filter: blur(80px);

  opacity: 0.18;

  animation: blobMove 12s ease-in-out infinite alternate;

}



.blob-1 {

  width: 420px;

  height: 420px;

  background: var(--purple);

  top: -100px;

  left: -100px;

  animation-delay: 0s;

}



.blob-2 {

  width: 300px;

  height: 300px;

  background: var(--teal);

  top: 60%;

  right: -80px;

  animation-delay: 3s;

}



.blob-3 {

  width: 250px;

  height: 250px;

  background: var(--amber);

  bottom: 10%;

  left: 30%;

  animation-delay: 6s;

}



@keyframes blobMove {

  0% {

    transform: translate(0, 0) scale(1);

  }



  100% {

    transform: translate(40px, 30px) scale(1.1);

  }

}



.wrapper {

  position: relative;

  z-index: 1;

  max-width: 1200px;

  margin: 0 auto;

  padding: 32px 24px;

}



/* Header */

.header {

  display: flex;

  align-items: center;

  gap: 16px;

  margin-bottom: 36px;

  animation: fadeDown 0.7s ease both;

}



.header-logo {

  width: 52px;

  height: 52px;

  border-radius: 16px;

  background: linear-gradient(135deg, var(--purple), var(--teal));

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 6px 20px rgba(124, 111, 224, 0.3);

}



.header-logo svg {

  width: 28px;

  height: 28px;

  fill: white;

}



.header-text h1 {

  font-family: "Playfair Display", serif;

  font-size: 22px;

  font-weight: 700;

  color: var(--text);

  line-height: 1.2;

}



.header-text p {

  font-size: 12px;

  color: var(--text-muted);

  letter-spacing: 0.08em;

  text-transform: uppercase;

  margin-top: 2px;

}



.header-badge {

  margin-left: auto;

  background: var(--teal-light);

  color: var(--teal);

  font-size: 11px;

  font-weight: 600;

  padding: 6px 14px;

  border-radius: 20px;

  letter-spacing: 0.05em;

  display: flex;

  align-items: center;

  gap: 6px;

}



.live-dot {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: #ff4444;

  box-shadow: 0 0 0 #ff4444;

  animation: livePulse 0.8s infinite;

}



@keyframes livePulse {

  0% {

    opacity: 1;

    transform: scale(1);

    box-shadow:

      0 0 4px #ff4444,

      0 0 8px #ff4444;

  }



  50% {

    opacity: 0.3;

    transform: scale(0.6);

    box-shadow: 0 0 2px #ff4444;

  }



  100% {

    opacity: 1;

    transform: scale(1);

    box-shadow:

      0 0 4px #ff4444,

      0 0 8px #ff4444;

  }

}



/* Dashboard grid */

.dashboard {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 20px;

  align-items: start;

  padding: 20px;

}



/* Cards column */

.cards-col {

  display: flex;

  flex-direction: column;

  gap: 10px;

}



/* Stat card */

.stat-card {

  align-items: center;

  gap: 12px;

  padding: 14px 18px;

  cursor: pointer;

  position: relative;

  overflow: hidden;

  transform-style: preserve-3d;

  transition: box-shadow 0.2s;

  animation: fadeUp 0.6s ease both;

}



.stat-card:nth-child(1) {

  animation-delay: 0.1s;

}



.stat-card:nth-child(2) {

  animation-delay: 0.2s;

}



.stat-card:nth-child(3) {

  animation-delay: 0.3s;

}



.stat-card:nth-child(4) {

  animation-delay: 0.4s;

}



.stat-card::before {

  content: "";

  position: absolute;

  inset: 0;

  opacity: 0;

  transition: opacity 0.3s;

  border-radius: inherit;

}



.stat-card:hover::before {

  opacity: 1;

}



.card-purple {

  background: #f9f8ff;

}



.card-purple::before {

  background: linear-gradient(135deg, #e0ddf9 0%, #f9f8ff 100%);

}



.card-blue {

  background: #f4f9ff;

}



.card-blue::before {

  background: linear-gradient(135deg, #d0e7fa 0%, #f4f9ff 100%);

}



.card-amber {

  background: #fffaf2;

}



.card-amber::before {

  background: linear-gradient(135deg, #fce3b0 0%, #fffaf2 100%);

}



.card-teal {

  background: #f2fbf7;

}



.card-teal::before {

  background: linear-gradient(135deg, #b8edda 0%, #f2fbf7 100%);

}



.icon-wrap {

  width: 46px;

  height: 46px;

  border-radius: 15px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  position: relative;

  z-index: 1;

  transition: transform 0.2s;

}



.stat-card:hover .icon-wrap {

  transform: scale(1.08) rotate(-4deg);

}



.icon-purple {

  background: linear-gradient(135deg, #9b8eea, #7c6fe0);

  box-shadow: 0 6px 18px rgba(124, 111, 224, 0.35);

}



.icon-blue {

  background: linear-gradient(135deg, #5ca4e8, #378add);

  box-shadow: 0 6px 18px rgba(55, 138, 221, 0.35);

}



.icon-amber {

  background: linear-gradient(135deg, #f5b84a, #ef9f27);

  box-shadow: 0 6px 18px rgba(239, 159, 39, 0.35);

}



.icon-teal {

  background: linear-gradient(135deg, #2ec48e, #1d9e75);

  box-shadow: 0 6px 18px rgba(29, 158, 117, 0.35);

}



.icon-wrap svg {

  width: 22px;

  height: 22px;

  fill: white;

}



.card-info {

  position: relative;

  z-index: 1;

}



.card-num {

  font-size: 26px;

  font-weight: 800;

  line-height: 1;

  color: var(--text, var(--text-dark));

  transition: transform 0.2s;

}



.stat-card:hover .card-num {

  transform: scale(1.04);

}



.card-label {

  font-size: 10px;

  font-weight: 600;

  letter-spacing: 0.1em;

  color: var(--text-muted);

  margin-top: 2px;

  text-transform: uppercase;

}



.card-sub {

  font-size: 9px;

  color: #aaa;

  margin-top: 1px;

  letter-spacing: 0.06em;

  text-transform: uppercase;

}



/* Shimmer effect on card corner */

.stat-card::after {

  content: "";

  position: absolute;

  top: -40px;

  right: -40px;

  width: 100px;

  height: 100px;

  border-radius: 50%;

  opacity: 0.07;

  transition:

    opacity 0.3s,

    transform 0.3s;

  transform: scale(1);

}



.card-purple::after {

  background: var(--purple);

}



.card-blue::after {

  background: var(--blue);

}



.card-amber::after {

  background: var(--amber);

}



.card-teal::after {

  background: var(--teal);

}



.stat-card:hover::after {

  opacity: 0.18;

  transform: scale(1.5);

}



/* Compact override for branch dashboard cards */

.cards-col .stat-card {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 10px 14px;

  min-height: 72px;

}



.cards-col .icon-wrap {

  width: 40px;

  height: 40px;

  border-radius: 12px;

}



.cards-col .icon-wrap svg {

  width: 18px;

  height: 18px;

}



.cards-col .card-num {

  font-size: 22px;

}



.cards-col .card-label,

.cards-col .card-sub {

  margin-top: 0;

}



/* Map column */

.map-col {

  border-radius: 24px;

  overflow: hidden;

  border: 1px solid var(--border, var(--border-color));

  box-shadow: var(--shadow, var(--shadow-md));

  background: var(--surface, #ffffff);

  animation: fadeUp 0.6s ease 0.2s both;

  position: relative;

}



#map {

  height: 500px;

  width: 100%;

}



/* Map overlay info */

.map-info-card {

  position: absolute;

  bottom: 20px;

  left: 20px;

  z-index: 1000;

  background: rgba(255, 255, 255, 0.95);

  backdrop-filter: blur(12px);

  border: 1px solid rgba(29, 158, 117, 0.2);

  border-radius: 16px;

  padding: 14px 18px;

  max-width: 230px;

  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);

  animation: slideUp 0.6s ease 1.2s both;

}



@keyframes slideUp {

  from {

    opacity: 0;

    transform: translateY(20px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



.map-info-name {

  font-size: 13px;

  font-weight: 700;

  color: #0f6e56;

  margin-bottom: 4px;

}



.map-info-addr {

  font-size: 11px;

  color: #555;

  line-height: 1.6;

}



.map-info-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 5px;

  margin-top: 10px;

}



.tag {

  font-size: 10px;

  font-weight: 600;

  padding: 3px 9px;

  border-radius: 12px;

  letter-spacing: 0.04em;

}



.tag-green {

  background: #e1f5ee;

  color: #0f6e56;

}



.tag-blue {

  background: #e6f1fb;

  color: #185fa5;

}



.tag-orange {

  background: #faeeda;

  color: #854f0b;

}



/* Pulse dot for live */

.map-live {

  position: absolute;

  top: 16px;

  right: 16px;

  z-index: 1000;

  background: rgba(255, 255, 255, 0.92);

  border-radius: 20px;

  padding: 6px 12px;

  font-size: 11px;

  font-weight: 600;

  color: var(--teal, #1d9e75);

  display: flex;

  align-items: center;

  gap: 6px;

  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

}



/* Animations */

@keyframes fadeUp {

  from {

    opacity: 0;

    transform: translateY(24px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@keyframes fadeDown {

  from {

    opacity: 0;

    transform: translateY(-18px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



/* Leaflet custom marker */

.custom-marker {

  width: 40px;

  height: 40px;

  position: relative;

}



.marker-ring {

  position: absolute;

  inset: 0;

  border-radius: 50%;

  background: rgba(29, 158, 117, 0.2);

  animation: markerPulse 2s infinite;

}



.marker-core {

  position: absolute;

  inset: 6px;

  border-radius: 50%;

  background: var(--teal);

  border: 2.5px solid white;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 3px 12px rgba(29, 158, 117, 0.4);

}



.marker-core svg {

  width: 13px;

  height: 13px;

  fill: white;

}



@keyframes markerPulse {

  0%,

  100% {

    transform: scale(1);

    opacity: 0.6;

  }



  50% {

    transform: scale(1.8);

    opacity: 0;

  }

}



/* Footer */

.footer {

  margin-top: 24px;

  text-align: center;

  font-size: 11px;

  color: #bbb;

  letter-spacing: 0.06em;

  animation: fadeUp 0.6s ease 0.5s both;

}



/* Responsive */

@media (max-width: 860px) {

  .dashboard {

    grid-template-columns: 1fr;

  }



  #map {

    height: 380px;

  }

}



/* .mission-page-section {

  position: relative;

  padding: 150px 0 90px;

  background:

    radial-gradient(circle at 10% 15%, rgba(255, 107, 53, 0.16), transparent 38%),

    radial-gradient(circle at 90% 25%, rgba(46, 196, 182, 0.15), transparent 42%),

    linear-gradient(135deg, #0f172a 0%, #111827 52%, #1f2937 100%);

  overflow: hidden;

} */



.mission-orb {

  position: absolute;

  border-radius: 50%;

  filter: blur(26px);

  pointer-events: none;

  opacity: 0.55;

}



.mission-orb-1 {

  width: 190px;

  height: 190px;

  background: rgba(255, 107, 53, 0.42);

  top: -55px;

  right: 8%;

}



.mission-orb-2 {

  width: 160px;

  height: 160px;

  background: rgba(46, 196, 182, 0.36);

  bottom: -45px;

  left: 4%;

}



.mission-panel {

  background: rgba(255, 255, 255, 0.97);

  border: 1px solid rgba(255, 107, 53, 0.16);

  border-radius: 22px;

  padding: 32px;

  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.2);

  position: relative;

  z-index: 2;

}



.mission-media-card {

  position: relative;

  border-radius: 22px;

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.2);

  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);

  min-height: 100%;

  z-index: 2;

}



.mission-media-card img {

  width: 100%;

  height: 100%;

  min-height: 520px;

  object-fit: cover;

  display: block;

}



.mission-media-overlay {

  position: absolute;

  inset: 0;

  /* background: linear-gradient(to top, rgba(15, 23, 42, 0.78) 12%, rgba(15, 23, 42, 0.08) 60%); */

  display: flex;

  align-items: flex-end;

  padding: 22px;

}



.mission-media-overlay span {

  color: #fff;

  font-weight: 700;

  font-size: 0.95rem;

  letter-spacing: 0.03em;

  background: rgba(255, 107, 53, 0.86);

  padding: 7px 14px;

  border-radius: 999px;

}



.mission-tag {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  font-size: 0.82rem;

  font-weight: 700;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  background: rgba(255, 107, 53, 0.12);

  color: #d9480f;

  padding: 7px 14px;

  border-radius: 999px;

  margin-bottom: 14px;

}



.mission-main-title {

  font-family: "Nunito", sans-serif;

  font-weight: 900;

  font-size: clamp(1.9rem, 2.3vw, 2.9rem);

  color: #111827;

  line-height: 1.16;

  margin-bottom: 16px;

}



.mission-main-title span {

  color: #ff6b35;

}



.mission-intro {

  color: #374151;

  font-size: 1rem;

  line-height: 1.8;

  margin-bottom: 0;

}



.donation-form {

  margin-top: 22px;

}



.donation-form .form-label {

  font-weight: 700;

  color: #111827;

  margin-bottom: 0.35rem;

}



.donation-form .form-control,

.donation-form .form-select,

.donation-form .input-group-text {

  border-radius: 12px;

  border: 1px solid rgba(17, 24, 39, 0.18);

}



.donation-form .form-control,

.donation-form .form-select {

  min-height: 44px;

  color: #111827;

}



.donation-form .input-group-text {

  background: #fff4eb;

  color: #d9480f;

  font-weight: 700;

}



.donation-form .form-control:focus,

.donation-form .form-select:focus,

.donation-form .form-check-input:focus {

  border-color: rgba(255, 107, 53, 0.65);

  box-shadow: 0 0 0 0.22rem rgba(255, 107, 53, 0.2);

}



.donation-consent {

  padding: 10px 12px;

  background: rgba(255, 107, 53, 0.07);

  border: 1px solid rgba(255, 107, 53, 0.2);

  border-radius: 12px;

}



.donation-submit-btn {

  padding: 11px 20px;

  border-radius: 12px;

  font-weight: 700;

}



.donation-help-btn {

  padding: 11px 18px;

  border-radius: 12px;

  border: 1px solid rgba(17, 24, 39, 0.2);

  color: #111827;

  font-weight: 700;

  background: #f8fafc;

}



.donation-help-btn:hover {

  color: #d9480f;

  border-color: rgba(255, 107, 53, 0.45);

  background: #fff;

}



.donation-support-points {

  margin-top: 18px;

}



.mission-points-wrap {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 14px;

  margin-top: 24px;

}



.mission-point {

  background: rgba(255, 255, 255, 0.94);

  border: 1px solid rgba(17, 24, 39, 0.08);

  border-radius: 14px;

  padding: 15px 14px;

  display: flex;

  align-items: flex-start;

  gap: 10px;

  min-height: 82px;

  transition:

    transform 0.25s ease,

    box-shadow 0.25s ease;

}



.mission-point:hover {

  box-shadow: 0 8px 20px rgba(17, 24, 39, 0.12);

}



.mission-point i {

  color: #ff6b35;

  font-size: 1rem;

  margin-top: 2px;

  flex-shrink: 0;

}



.mission-point p {

  margin: 0;

  color: #1f2937;

  font-weight: 600;

  font-size: 0.93rem;

  line-height: 1.5;

}



@media (max-width: 991.98px) {

  .mission-page-section {

    padding: 0px 0 74px;

  }



  .mission-panel {

    padding: 24px;

  }



  .mission-media-card img {

    min-height: 360px;

  }



  .mission-points-wrap {

    grid-template-columns: 1fr;

  }

}



@media (max-width: 575.98px) {

  .mission-panel {

    padding: 20px;

    border-radius: 16px;

  }



  .mission-main-title {

    font-size: 1.62rem;

  }



  .mission-intro {

    font-size: 0.95rem;

  }



  .mission-media-card img {

    min-height: 300px;

  }

}



.about-breadcrumb-section {

  margin-top: 119px;

  min-height: 360px;

  padding: 132px 0 82px;

  position: relative;

  overflow: hidden;

  background:

    linear-gradient(

      115deg,

      rgba(15, 23, 42, 0.88) 0%,

      rgba(17, 24, 39, 0.78) 48%,

      rgba(17, 24, 39, 0.9) 100%

    ),

    url("./Imges/Education/education (7).jpg") center/cover no-repeat;

}



@media (max-width: 1199.98px) {

  .about-breadcrumb-section {

    margin-top: 76px;

    min-height: 320px;

    padding: 98px 0 62px;

  }

}



.about-breadcrumb-overlay {

  position: absolute;

  inset: 0;

  background:

    radial-gradient(

      circle at 12% 20%,

      rgba(255, 107, 53, 0.28),

      transparent 36%

    ),

    radial-gradient(

      circle at 88% 72%,

      rgba(46, 196, 182, 0.22),

      transparent 40%

    );

}



.about-breadcrumb-content {

  position: relative;

  z-index: 1;

}



.about-breadcrumb-kicker {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 8px 14px;

  border-radius: 999px;

  font-size: 0.8rem;

  font-weight: 700;

  letter-spacing: 0.07em;

  text-transform: uppercase;

  color: #ffffff;

  background: rgba(255, 159, 28, 0.26);

  border: 1px solid rgba(255, 255, 255, 0.24);

  margin-bottom: 14px;

}



.about-breadcrumb-title {

  font-family: "Nunito", sans-serif;

  font-weight: 900;

  color: #ffffff;

  font-size: clamp(2.1rem, 3.4vw, 3.2rem);

  letter-spacing: 0.01em;

  margin-bottom: 10px;

  text-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);

}



.about-breadcrumb .breadcrumb-item,

.about-breadcrumb .breadcrumb-item a {

  font-weight: 600;

  font-size: 0.96rem;

}



.about-breadcrumb .breadcrumb-item a {

  color: rgba(255, 255, 255, 0.88);

  text-decoration: none;

  transition: color 0.25s ease;

}



.about-breadcrumb .breadcrumb-item a:hover {

  color: #ffffff;

}



.about-breadcrumb .breadcrumb-item.active {

  color: #ff9f1c;

}



.about-breadcrumb .breadcrumb-item + .breadcrumb-item::before {

  color: rgba(255, 255, 255, 0.65);

}



@media (max-width: 991.98px) {

  .about-breadcrumb-section {

    margin-top: 72px;

    min-height: 320px;

    padding: 92px 0 62px;

  }



  .about-breadcrumb-info {

    margin: 24px auto 0;

  }

}



@media (max-width: 575.98px) {

  .about-breadcrumb-section {

    margin-top: 68px;

    min-height: 290px;

    padding: 86px 0 50px;

  }



  .about-breadcrumb-title {

    font-size: 1.8rem;

  }



  .about-breadcrumb .breadcrumb-item,

  .about-breadcrumb .breadcrumb-item a {

    font-size: 0.9rem;

  }



  .about-breadcrumb-info {

    padding: 16px;

  }

}



/* ============================================================

   CHILD EDUCATION CONTENT SECTION

   ============================================================ */

.child-edu-section {

  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);

}



.child-edu-donate-card {

  background: linear-gradient(150deg, #111827 0%, #1f2937 100%);

  border-radius: 18px;

  padding: 22px;

  color: #ffffff;

  box-shadow: 0 16px 36px rgba(17, 24, 39, 0.25);

  position: sticky;

  top: 110px;

}



.child-edu-donate-badge {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  font-size: 0.8rem;

  font-weight: 700;

  letter-spacing: 0.03em;

  text-transform: uppercase;

  background: rgba(255, 255, 255, 0.16);

  border: 1px solid rgba(255, 255, 255, 0.22);

  padding: 7px 12px;

  border-radius: 999px;

  margin-bottom: 14px;

}



.child-edu-donate-card h3 {

  font-size: 1.35rem;

  margin-bottom: 10px;

}



.child-edu-donate-card p {

  color: rgba(255, 255, 255, 0.86);

  font-size: 0.92rem;

  line-height: 1.65;

  margin-bottom: 16px;

}



.child-edu-qr-wrap {

  border-radius: 14px;

  padding: 10px;

  background: rgba(255, 255, 255, 0.12);

  border: 1px solid rgba(255, 255, 255, 0.22);

  margin-bottom: 16px;

}



.child-edu-qr-wrap img {

  width: 100%;

  height: auto;

  border-radius: 10px;

  display: block;

}



.child-edu-donate-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 100%;

}



.child-edu-side-stats {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 8px;

  margin-top: 14px;

}



.child-edu-side-stat {

  background: rgba(255, 255, 255, 0.12);

  border: 1px solid rgba(255, 255, 255, 0.2);

  border-radius: 10px;

  padding: 10px 8px;

  text-align: center;

}



.child-edu-side-stat strong {

  display: block;

  font-size: 1rem;

  color: #ffffff;

  line-height: 1.2;

}



.child-edu-side-stat span {

  display: block;

  margin-top: 3px;

  font-size: 0.72rem;

  color: rgba(255, 255, 255, 0.82);

}



.child-edu-side-list {

  list-style: none;

  padding: 0;

  margin: 14px 0;

}



.child-edu-side-list li {

  display: flex;

  align-items: flex-start;

  gap: 8px;

  font-size: 0.82rem;

  color: rgba(255, 255, 255, 0.9);

  line-height: 1.5;

}



.child-edu-side-list li + li {

  margin-top: 7px;

}



.child-edu-side-list i {

  color: #ff9f1c;

  margin-top: 2px;

  flex-shrink: 0;

}



.child-edu-side-actions {

  display: grid;

  grid-template-columns: 1fr;

  gap: 8px;

}



.child-edu-side-link {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  text-decoration: none;

  font-size: 0.83rem;

  font-weight: 600;

  color: #ffffff;

  background: rgba(255, 255, 255, 0.12);

  border: 1px solid rgba(255, 255, 255, 0.2);

  border-radius: 10px;

  padding: 10px 12px;

  transition: all 0.25s ease;

}



.child-edu-side-link:hover {

  color: #ffffff;

  transform: translateY(-1px);

  background: rgba(255, 159, 28, 0.22);

  border-color: rgba(255, 159, 28, 0.55);

}



.child-edu-content-wrap {

  background: #ffffff;

  border-radius: 18px;

  padding: 24px;

  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);

  border: 1px solid rgba(15, 23, 42, 0.06);

}



.child-edu-desc {

  max-width: 900px;

  margin-bottom: 22px;

}



.child-edu-highlights {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 12px;

  margin-bottom: 16px;

}



.child-edu-highlight-item {

  background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%);

  border: 1px solid rgba(255, 107, 53, 0.16);

  border-radius: 14px;

  padding: 14px;

}



.child-edu-highlight-item i {

  color: #ff6b35;

  font-size: 1.05rem;

  display: inline-block;

  margin-bottom: 6px;

}



.child-edu-highlight-item h6 {

  font-size: 0.95rem;

  margin-bottom: 6px;

  color: #1f2937;

}



.child-edu-highlight-item p {

  margin: 0;

  color: #4b5563;

  font-size: 0.84rem;

  line-height: 1.55;

}



.child-edu-keypoints {

  background: #f8fafc;

  border: 1px solid rgba(15, 23, 42, 0.08);

  border-radius: 14px;

  padding: 14px 16px;

  margin-bottom: 18px;

}



.child-edu-keypoints h5 {

  font-size: 1rem;

  margin-bottom: 10px;

  color: #0f172a;

}



.child-edu-keypoints ul {

  list-style: none;

  padding: 0;

  margin: 0;

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 8px 16px;

}



.child-edu-keypoints li {

  font-size: 0.88rem;

  color: #374151;

  display: flex;

  align-items: flex-start;

  gap: 8px;

  line-height: 1.55;

}



.child-edu-keypoints li i {

  color: #ff6b35;

  margin-top: 2px;

  flex-shrink: 0;

}



.child-edu-main-image-wrap {

  border-radius: 16px;

  overflow: hidden;

  margin-bottom: 16px;

  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.18);

}



.child-edu-main-image-wrap img {

  width: 100%;

  height: 460px;

  object-fit: cover;

  display: block;

  transition: transform 0.4s ease;

}



.child-edu-main-image-wrap:hover img {

  transform: scale(1.02);

}



.child-edu-thumb-row {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 12px;

}



.child-edu-thumb {

  border: 2px solid transparent;

  border-radius: 12px;

  overflow: hidden;

  padding: 0;

  background: #e5e7eb;

  cursor: pointer;

  transition:

    transform 0.25s ease,

    border-color 0.25s ease,

    box-shadow 0.25s ease;

}



.child-edu-thumb img {

  width: 100%;

  height: 118px;

  object-fit: cover;

  display: block;

}



.child-edu-thumb:hover {

  transform: translateY(-2px);

  border-color: rgba(255, 107, 53, 0.65);

}



.child-edu-thumb.is-active {

  border-color: #ff6b35;

  box-shadow: 0 8px 18px rgba(255, 107, 53, 0.28);

}



.child-edu-thumb-note {

  margin-top: 12px;

  color: #6b7280;

  font-size: 0.88rem;

  line-height: 1.5;

}



.child-edu-thumb-wrap {

  display: flex;

  flex-direction: column;

}



.child-edu-thumb-caption {

  margin-top: 6px;

  color: #4b5563;

  font-size: 0.82rem;

  line-height: 1.45;

  text-align: center;

  font-weight: 500;

}



.child-edu-card {

  background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%);

  border: 1px solid rgba(59, 130, 246, 0.16);

  border-radius: 14px;

  padding: 18px 16px;

  text-align: center;

  transition:

    transform 0.25s ease,

    box-shadow 0.25s ease;

}



.child-edu-card:hover {

  transform: translateY(-3px);

  box-shadow: 0 10px 25px rgba(59, 130, 246, 0.12);

}



.child-edu-card h5 {

  font-size: 1rem;

  font-weight: 700;

  color: #0f172a;

  margin-bottom: 8px;

}



.child-edu-card p {

  margin: 0;

  color: #4b5563;

  font-size: 0.84rem;

  line-height: 1.55;

}



@media (max-width: 991.98px) {

  .child-edu-donate-card {

    position: static;

    top: auto;

  }



  .child-edu-highlights {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }



  .child-edu-keypoints ul {

    grid-template-columns: 1fr;

  }



  .child-edu-main-image-wrap img {

    height: 380px;

  }

}



@media (max-width: 767.98px) {

  .child-edu-content-wrap {

    padding: 18px;

  }



  .child-edu-main-image-wrap img {

    height: 285px;

  }



  .child-edu-highlights {

    grid-template-columns: 1fr;

  }



  .child-edu-thumb-row {

    gap: 8px;

  }



  .child-edu-thumb img {

    height: 86px;

  }



  .child-edu-side-stats {

    grid-template-columns: 1fr;

  }

}



/* ============================================================

   TERMS AND CONDITIONS PAGE

   ============================================================ */

.terms-section {

  background:

    radial-gradient(

      circle at 8% 12%,

      rgba(255, 107, 53, 0.09),

      transparent 34%

    ),

    radial-gradient(

      circle at 92% 0%,

      rgba(46, 196, 182, 0.11),

      transparent 34%

    ),

    linear-gradient(180deg, #ffffff 0%, #fffaf4 100%);

}



.terms-shell {

  background: rgba(255, 255, 255, 0.92);

  border: 1px solid rgba(255, 107, 53, 0.2);

  border-radius: 24px;

  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.1);

  padding: 34px;

}



.terms-header {

  max-width: 760px;

  margin: 0 auto 26px;

}



.terms-badge {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  background: rgba(255, 107, 53, 0.12);

  color: #c24412;

  border: 1px solid rgba(255, 107, 53, 0.25);

  border-radius: 999px;

  font-size: 0.78rem;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  padding: 8px 16px;

}



.terms-main-title {

  margin-top: 14px;

  margin-bottom: 12px;

  font-size: clamp(1.7rem, 3.5vw, 2.4rem);

  color: var(--text-dark);

}



.terms-intro {

  color: #4b5563;

  font-size: 0.98rem;

  line-height: 1.8;

  margin-bottom: 0;

}



.terms-grid {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 18px;

}



.terms-card-item {

  position: relative;

  background: #ffffff;

  border: 1px solid #e5e7eb;

  border-radius: 16px;

  padding: 20px;

  transition:

    transform 0.28s ease,

    box-shadow 0.28s ease,

    border-color 0.28s ease;

}



.terms-card-item:hover {

  transform: translateY(-4px);

  border-color: rgba(255, 107, 53, 0.34);

  box-shadow: 0 14px 30px rgba(255, 107, 53, 0.14);

}



.terms-number {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 42px;

  height: 30px;

  background: linear-gradient(135deg, #ff6b35, #ff9f1c);

  color: #ffffff;

  border-radius: 999px;

  font-size: 0.75rem;

  font-weight: 800;

  letter-spacing: 0.05em;

  margin-bottom: 12px;

}



.terms-card-item h3 {

  font-size: 1.06rem;

  margin-bottom: 10px;

  color: #111827;

}



.terms-card-item p {

  margin-bottom: 0;

  color: #4b5563;

  line-height: 1.75;

  font-size: 0.92rem;

}



.terms-list {

  list-style: none;

  margin-top: 10px;

  margin-bottom: 0;

  padding-left: 0;

  display: grid;

  gap: 8px;

}



.terms-list li {

  position: relative;

  padding-left: 22px;

  color: #374151;

  line-height: 1.65;

  font-size: 0.9rem;

}



.terms-list li::before {

  content: "";

  position: absolute;

  left: 0;

  top: 0.66em;

  width: 10px;

  height: 10px;

  border-radius: 50%;

  background: linear-gradient(135deg, #ff6b35, #ff9f1c);

}



.terms-contact-card {

  margin-top: 22px;

  border: 1px solid rgba(46, 196, 182, 0.34);

  border-radius: 16px;

  background: linear-gradient(

    135deg,

    rgba(46, 196, 182, 0.08),

    rgba(255, 255, 255, 0.94)

  );

  padding: 22px;

}



.terms-contact-head h3 {

  font-size: 1.12rem;

  margin-bottom: 6px;

}



.terms-contact-head p {

  margin-bottom: 14px;

  color: #4b5563;

  font-size: 0.93rem;

}



.terms-contact-grid {

  display: grid;

  gap: 8px;

}



.terms-contact-grid p {

  margin: 0;

  color: #1f2937;

  line-height: 1.6;

  font-size: 0.92rem;

}



.terms-contact-grid i {

  color: #ff6b35;

  margin-right: 8px;

}



.terms-contact-grid a {

  color: #0f766e;

  font-weight: 600;

}



.terms-contact-grid a:hover {

  color: #0d9488;

}



@media (max-width: 991.98px) {

  .terms-shell {

    padding: 24px;

  }



  .terms-grid {

    grid-template-columns: 1fr;

  }

}



@media (max-width: 575.98px) {

  .terms-shell {

    padding: 18px;

    border-radius: 16px;

  }



  .terms-card-item,

  .terms-contact-card {

    padding: 16px;

  }



  .terms-main-title {

    font-size: 1.45rem;

  }

}



/* new-bank */

/* Premium Styles */

.donate-pro-section {

  min-height: 100vh;

  padding: 80px 0;

}



.particles-bg {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-image:

    radial-gradient(2px 2px at 20px 30px, #eee, transparent),

    radial-gradient(

      2px 2px at 40px 70px,

      rgba(255, 255, 255, 0.8),

      transparent

    ),

    radial-gradient(1px 1px at 90px 40px, #fff, transparent),

    radial-gradient(

      1px 1px at 130px 80px,

      rgba(255, 255, 255, 0.6),

      transparent

    );

  background-size: 160px 100px;

  animation: float 20s infinite linear;

}



@keyframes float {

  0% {

    transform: translateY(0px) rotate(0deg);

  }



  100% {

    transform: translateY(-20px) rotate(360deg);

  }

}



.donate-badge-premium {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  background: rgba(255, 255, 255, 0.2);

  backdrop-filter: blur(10px);

  padding: 8px 20px;

  border-radius: 50px;

  border: 1px solid rgba(255, 255, 255, 0.3);

  font-weight: 600;

  color: white;

  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

}



.premium-icon {

  font-size: 1.2rem;

  animation: pulse 2s infinite;

}



@keyframes pulse {

  0%,

  100% {

    transform: scale(1);

  }



  50% {

    transform: scale(1.1);

  }

}



.donate-heading-premium {

  font-size: clamp(2.5rem, 5vw, 4rem);

  font-weight: 800;

  background: linear-gradient(45deg, #fff, #f0f8ff);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

  margin-bottom: 1rem;

  text-shadow: 0 0 30px rgba(255, 255, 255, 0.5);

}



.gradient-text {

  /* background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1); */

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}



.donate-desc-premium {

  font-size: 1.3rem;

  color: rgba(255, 255, 255, 0.9);

  max-width: 600px;

  margin: 0 auto;

}



/* Glassmorphism Effect */

.glassmorphism {

  background: rgba(255, 255, 255, 0.1);

  backdrop-filter: blur(20px);

  border: 1px solid rgba(255, 255, 255, 0.2);

  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);

  border-radius: 24px;

  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}



.glassmorphism:hover {

  transform: translateY(-10px);

  box-shadow: 0 35px 60px rgba(0, 0, 0, 0.2);

  border-color: rgba(255, 255, 255, 0.4);

}



/* QR Card Premium */

.donate-qr-card-premium {

  padding: 2.5rem 2rem;

  text-align: center;

}



.card-header-premium h5 {

  color: #333;

  font-weight: 700;

  margin-bottom: 2rem;

  font-size: 1.4rem;

}



.qr-box-premium {

  position: relative;

  margin: 2rem 0;

  padding: 2rem;

  background: rgba(255, 255, 255, 0.9);

  border-radius: 20px;

  border: 2px solid rgba(255, 255, 255, 0.3);

}



.qr-glow {

  position: relative;

  display: inline-block;

}



.qr-glow::before {

  content: "";

  position: absolute;

  top: -10px;

  left: -10px;

  right: -10px;

  bottom: -10px;

  background: linear-gradient(45deg, #4ecdc4, #45b7d1);

  border-radius: 50%;

  z-index: -1;

  filter: blur(20px);

  opacity: 0.6;

  animation: glow 3s ease-in-out infinite alternate;

}



@keyframes glow {

  from {

    opacity: 0.4;

    transform: scale(1);

  }



  to {

    opacity: 0.8;

    transform: scale(1.1);

  }

}



/* ============================================================

   CARD TILT EFFECTS - Applied to all cards

   ============================================================ */



/* Apply perspective to card containers */

.gallery-card,

.hero-stat-card,

.founder-impact-card,

.founder-value-card,

.event-card,

.blog-card,

.team-card,

.program-card,

.cause-card,

.volunteer-card,

.partner-card,

.testimonial-card,

.project-card,

.activity-card,

.bank-qr-card,

.donate-bank-card,

.contact-info-card,

.contact-form-card,

.stat-card,

.donate-card,

.trust-card,

.hero-img-card {

  perspective: 1000px;

  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);

}



/* Tilt effect on hover for gallery cards */

.gallery-img-wrap:hover,

.gallery-video-wrap:hover {

  transform: translateY(-5px) rotateX(5deg) rotateY(-5deg) rotateZ(2deg);

  box-shadow: var(--shadow-lg);

}



/* Tilt effect on hover for hero stat cards */

.hero-stat-card:hover {

  transform: translateY(-8px) rotateX(6deg) rotateY(4deg) rotateZ(1deg);

}



/* Tilt effect on hover for founder impact cards */

.founder-impact-card:hover {

  transform: translateY(-8px) rotateX(5deg) rotateY(-5deg) rotateZ(2deg);

}



.founder-impact-card:nth-child(even):hover {

  transform: translateY(-8px) rotateX(5deg) rotateY(5deg) rotateZ(-2deg);

}



/* Tilt effect on hover for founder value cards */

.founder-value-card:hover {

  transform: translateY(-8px) rotateX(6deg) rotateY(-4deg) rotateZ(2deg);

}



.founder-value-card:nth-child(even):hover {

  transform: translateY(-8px) rotateX(6deg) rotateY(4deg) rotateZ(-2deg);

}



/* Generic card tilt utility class */

.card-tilt {

  perspective: 1000px;

  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);

}



.card-tilt:hover {

  transform: translateY(-8px) rotateX(5deg) rotateY(-5deg) rotateZ(2deg);

}



/* Project and Activity Cards Tilt */

.project-card:hover,

.activity-card:hover {

  transform: translateY(-8px) rotateX(5deg) rotateY(-4deg) rotateZ(2deg);

}



/* Donation Cards Tilt */

.donate-card:hover,

.trust-card:hover {

  transform: translateY(-8px) rotateX(6deg) rotateY(-5deg) rotateZ(1deg);

}



/* Bank and Contact Cards Tilt */

.bank-qr-card:hover,

.donate-bank-card:hover,

.contact-info-card:hover,

.contact-form-card:hover {

  transform: translateY(-8px) rotateX(5deg) rotateY(-4deg) rotateZ(2deg);

}



/* Stat and Counter Cards Tilt */

.stat-card:hover,

.hero-stat-card:hover {

  transform: translateY(-8px) rotateX(6deg) rotateY(4deg) rotateZ(1deg);

}



/* Hero Image Cards Tilt */

.hero-img-card:hover {

  transform: translateY(-8px) rotateX(4deg) rotateY(-6deg) rotateZ(2deg);

}



to {

  opacity: 0.8;

  transform: scale(1.05);

}



.qr-image {

  width: 160px;

  height: 160px;

  border-radius: 12px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

}



.scan-animation {

  position: absolute;

  top: 0;

  left: 50%;

  transform: translateX(-50%) translateY(-100%);

  width: 100%;

  height: 4px;

  background: linear-gradient(

    90deg,

    transparent,

    #4ecdc4,

    #45b7d1,

    transparent

  );

  border-radius: 2px;

  transition: transform 1.5s ease-in-out;

}



.payment-methods {

  display: flex;

  justify-content: center;

  gap: 8px;

  flex-wrap: wrap;

  margin: 1.5rem 0;

}



.method-badge {

  background: linear-gradient(45deg, #667eea, #764ba2);

  color: white;

  padding: 6px 12px;

  border-radius: 20px;

  font-size: 0.8rem;

  font-weight: 600;

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

}



.secure-line-premium {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  background: rgba(76, 175, 80, 0.2);

  color: #2e7d32;

  padding: 12px 20px;

  border-radius: 50px;

  border: 1px solid rgba(76, 175, 80, 0.3);

  font-weight: 600;

}



.premium-shield {

  font-size: 1.2rem;

  animation: shieldPulse 2s infinite;

}



@keyframes shieldPulse {

  0%,

  100% {

    transform: scale(1) rotate(0deg);

  }



  50% {

    transform: scale(1.1) rotate(5deg);

  }

}



/* Bank Cards Premium */

.donate-bank-grid-premium {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 1.5rem;

  margin-bottom: 2rem;

}



.donate-card-premium {

  padding: 2rem;

  height: 100%;

}



.primary-bank {

  border: 2px solid #4ecdc4;

}



.secondary-bank {

  border: 2px solid #ff6b6b;

}



.card-top-premium {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 1.5rem;

  padding-bottom: 1rem;

  border-bottom: 2px solid rgba(255, 255, 255, 0.1);

}



.bank-logo {

  width: 50px;

  height: 50px;

  background: linear-gradient(45deg, #667eea, #764ba2);

  border-radius: 12px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: white;

  font-size: 1.5rem;

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);

}



.premium-bank-icon {

  font-size: 1.3rem;

}



.card-top-premium h5 {

  color: #333;

  font-weight: 700;

  margin: 0;

  font-size: 1.3rem;

}



.badge-bank-premium {

  padding: 6px 16px;

  border-radius: 20px;

  font-size: 0.85rem;

  font-weight: 600;

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

}



.primary-badge {

  background: linear-gradient(45deg, #4ecdc4, #44a08d);

  color: white;

}



.secondary-badge {

  background: linear-gradient(45deg, #ff6b6b, #ee5a52);

  color: white;

}



.bank-details-grid {

  display: flex;

  flex-direction: column;

  gap: 1rem;

}



.bank-line-premium {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 12px 0;

  border-bottom: 1px solid rgba(0, 0, 0, 0.05);

}



.bank-line-premium:last-child {

  border-bottom: none;

  padding-bottom: 0;

}



.label {

  color: #666;

  font-weight: 500;

  min-width: 100px;

}



.account-number,

.ifsc-code {

  font-weight: 700;

  font-family: "SF Mono", monospace;

  letter-spacing: 1px;

  color: #333;

}



.account-no-row {

  position: relative;

}



.copy-btn-premium {

  background: linear-gradient(45deg, #667eea, #764ba2);

  border: none;

  width: 40px;

  height: 40px;

  border-radius: 12px;

  color: white;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all 0.3s ease;

  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);

}



.copy-btn-premium:hover {

  transform: translateY(-3px) scale(1.05);

  box-shadow: 0 10px 25px rgba(102, 126, 234, 0.6);

}



/* Premium Note */

.donate-note-premium {

  display: flex;

  align-items: flex-start;

  gap: 15px;

  padding: 1.5rem 2rem;

}



.note-icon {

  width: 45px;

  height: 45px;

  background: linear-gradient(45deg, #4ecdc4, #45b7d1);

  border-radius: 12px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: white;

  font-size: 1.3rem;

}



/* ---newbank */

.donate-bank-section {

  background: #f9fbfd;

  font-family: "Poppins", sans-serif;

}



/* Heading */

.donate-tag {

  background: #eaf3ff;

  color: #0d6efd;

  padding: 6px 15px;

  border-radius: 20px;

  display: inline-block;

}



.donate-title {

  font-size: 32px;

  font-weight: 700;

}



.donate-highlight {

  color: #0d6efd;

}



.donate-desc {

  color: #666;

  max-width: 600px;

}



/* QR */

.donate-qr-card {

  background: #fff;

  padding: 25px;

  border-radius: 15px;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);

}



.donate-qr-img img {

  max-width: 180px;

}



.donate-secure {

  display: inline-block;

  margin-top: 15px;

  background: #e6f7ee;

  color: #28a745;

  padding: 6px 12px;

  border-radius: 20px;

}



/* BANK WRAPPER */

.donate-bank-wrapper {

  display: flex;

  flex-direction: column;

  gap: 20px;

}



/* CARD */

.donate-bank-card {

  background: #fff;

  padding: 20px;

  border-radius: 12px;

  border-left: 4px solid #ed8f5f;

  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);

  transition: 0.3s;

}



.donate-bank-card:hover {

  transform: translateY(-5px);

}



/* ROW */

.donate-row {

  display: flex;

  justify-content: space-between;

  margin-bottom: 10px;

  font-size: 14px;

}



.donate-row span {

  color: #777;

}



.donate-row b {

  color: #222;

}



.highlight {

  color: #0d6efd;

}



/* INFO */

.donate-info-box {

  background: #fff3cd;

  padding: 15px;

  border-radius: 10px;

  font-size: 13px;

}



/* Responsive */

@media (max-width: 992px) {

  .donate-row {

    flex-direction: column;

  }

}



@media (max-width: 768px) {

  .donate-title {

    font-size: 24px;

  }



  .donate-qr-img img {

    max-width: 140px;

  }

}



/* ---keypoints */

.donate-cards {

  margin-top: 25px;

}



/* Card Style */

.donate-card {

  /* background: #ffffff; */

  /* border-radius: 12px; */

  padding: 18px 20px;

  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 15px;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

  transition: all 0.3s ease;

  /* border: 1px solid #eee; */

}



/* Icon */

.donate-card span {

  font-size: 22px;

  min-width: 30px;

}



/* Text */

.donate-card p {

  margin: 0;

  font-size: 15px;

  color: white;

  font-weight: 500;

}



/* Hover Effect */

.donate-card:hover {

  transform: translateY(-5px);

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);

  /* border-color: #ddd; */

}



/* Responsive */

@media (max-width: 576px) {

  .donate-card {

    padding: 15px;

  }



  .donate-card p {

    font-size: 14px;

  }

}



.donate-card span i {

  font-size: 20px;

  color: darkorange;

  /* 🔥 icon color */

  transition: 0.3s ease;

}



.donate-card:hover span i {

  transform: scale(1.2);

  color: #ff8c00;

  /* hover par thoda strong orange */

}



/* donation-icon */

.trust-card {

  background: #ffffff;

  padding: 0px 0px;

  border-radius: 101px;

  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);

  transition: all 0.3s ease;

  height: 100%;

  margin-right: 40px;

}



.trust-card i {

  font-size: 15px;

  color: #ff6b6b;

  margin-bottom: 15px;

}



.trust-card h5 {

  font-weight: 400;

  margin-bottom: 10px;

}



.trust-card p {

  font-size: 10px;

  color: #666;

}



.trust-card:hover {

  transform: translateY(-8px);

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);

}



/* --donation-type-- */

.btn-outline-danger {

  border-radius: 10px;

  font-weight: 500;

}



.btn-check:checked + .btn {

  color: #fff;

  border-color: transparent;

  background: #ff9f1c;

}



/* Amount Donation Buttons */



.amount-group .btn {

  flex: 1;

  border-radius: 8px !important;

  padding: 6px 12px;

  /* Button Size Small */

  font-size: 14px;

  /* Text Small */

  min-height: 38px;

  /* Height Small */

}



.amount-group .btn-check:checked + .btn {

  color: #fff;

  border: none;

}



/* our-partners */

.comp-icon {

  width: 60px;

  height: 60px;

  border-radius: 50%;

  overflow: hidden;

  background: #eee;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 2px solid #fff;

  /* white border */

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

  /* soft shadow */

}



/* our-supporting-partners */

.support-card {

  background: #fff;

  padding: 25px 20px;

  border-radius: 16px;

  text-align: center;

  transition: all 0.35s ease;

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);

  height: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

}



/* 🔥 Card Hover */

.support-card:hover {

  transform: translateY(-8px) scale(1.03);

  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.15);

}



/* Image */

.support-img {

  width: 80px;

  height: 80px;

  border-radius: 50%;

  object-fit: cover;

  margin-bottom: 15px;

  border: 3px solid #f1f1f1;

  transition: all 0.35s ease;

}



/* 🔥 Image Hover */

.support-card:hover .support-img {

  transform: scale(1.12);

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);

}



.btn-group {

  color: gray !important;

}



/* pdf view */

.pdf-header {

  width: 100%;

  background: #ffffff;

  border-radius: 18px;

  padding: 20px 25px;

  margin-bottom: 20px;



  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  flex-wrap: wrap;



  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

  border: 1px solid #e9e9e9;

}



.pdf-title-box {

  display: flex;

  align-items: center;

  gap: 16px;

}



.pdf-icon {

  width: 60px;

  height: 60px;

  min-width: 60px;



  display: flex;

  align-items: center;

  justify-content: center;



  border-radius: 15px;

  background: linear-gradient(135deg, #ff4d4d, #d60000);



  color: #fff;

  font-size: 28px;



  box-shadow: 0 4px 15px rgba(214, 0, 0, 0.3);

}



.pdf-title-content h2 {

  font-size: 28px;

  color: #222;

  margin-bottom: 5px;

  font-weight: 700;

}



.pdf-title-content p {

  color: #666;

  font-size: 15px;

  margin: 0;

}



.download-btn {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  padding: 10px 11px;

  background: linear-gradient(135deg, #ff6b35 0%, #ff9f1c 100%);

  color: #fff;

  text-decoration: none;



  border-radius: 12px;

  font-size: 16px;

  font-weight: 600;



  transition: 0.3s ease;

  box-shadow: 0 4px 15px rgba(13, 110, 253, 0.3);

}



.download-btn:hover {

  transform: translateY(-2px);

  color: #fff;

  background-color: #5277b2;

}



.download-btn i {

  font-size: 18px;

}



/* Responsive */



@media (max-width: 768px) {

  .pdf-header {

    padding: 18px;

    text-align: center;

    justify-content: center;

  }



  .pdf-title-box {

    width: 100%;

    justify-content: center;

    flex-direction: column;

  }



  .pdf-title-content h2 {

    font-size: 22px;

  }



  .download-btn {

    width: 100%;

    justify-content: center;

  }

}



/* ===== PROJECTS & ACTIVITIES SLIDER NAVIGATION ===== */

.projects-slider .swiper-button-next,

.projects-slider .swiper-button-prev,

.activities-slider .swiper-button-next,

.activities-slider .swiper-button-prev {

  width: 45px;

  height: 45px;

  background: var(--white);

  border-radius: var(--radius-full);

  box-shadow: var(--shadow-md);

  color: var(--primary);

  border: 2px solid var(--border-color);

  transition: var(--transition);

  margin-top: -22.5px;

}



.projects-slider .swiper-button-next::after,

.projects-slider .swiper-button-prev::after,

.activities-slider .swiper-button-next::after,

.activities-slider .swiper-button-prev::after {

  font-size: 16px;

  font-weight: 900;

}



.projects-slider .swiper-button-next:hover,

.projects-slider .swiper-button-prev:hover,

.activities-slider .swiper-button-next:hover,

.activities-slider .swiper-button-prev:hover {

  background: var(--primary);

  color: var(--white);

  border-color: var(--primary);

  transform: scale(1.1);

  box-shadow: var(--shadow-color);

}



.projects-slider .swiper-button-next {

  right: -20px;

}



.projects-slider .swiper-button-prev {

  left: -20px;

}



.activities-slider .swiper-button-next {

  right: -20px;

}



.activities-slider .swiper-button-prev {

  left: -20px;

}



/* Pagination Styles for Projects & Activities */

.projects-pagination .swiper-pagination-bullet,

.activities-pagination .swiper-pagination-bullet {

  width: 12px;

  height: 12px;

  background: var(--text-light);

  opacity: 0.5;

  transition: var(--transition);

}



.projects-pagination .swiper-pagination-bullet-active,

.activities-pagination .swiper-pagination-bullet-active {

  background: var(--primary);

  opacity: 1;

  width: 30px;

  border-radius: var(--radius-full);

}



/* Mobile Responsive */

@media (max-width: 768px) {

  .projects-slider .swiper-button-next,

  .projects-slider .swiper-button-prev,

  .activities-slider .swiper-button-next,

  .activities-slider .swiper-button-prev {

    display: none;

  }



  .projects-slider,

  .activities-slider {

    padding-bottom: 60px;

  }

}



/* Enhanced Project Cards for Better Slider Experience */

.project-card {

  height: 100%;

  display: flex;

  flex-direction: column;

  transition: var(--transition);

}



.project-card:hover {

  transform: translateY(-5px);

  box-shadow: var(--shadow-lg);

}



.project-content {

  flex-grow: 1;

  display: flex;

  flex-direction: column;

}



.project-content p {

  flex-grow: 1;

}



.project-link {

  margin-top: auto;

}



/* Slider Container Styling */

.projects-slider,

.activities-slider {

  padding: 20px 0 60px;

  overflow: hidden;

}



.projects-slider .swiper-slide,

.activities-slider .swiper-slide {

  height: auto;

  width: 100%;

}



.projects-slider .swiper-wrapper,

.activities-slider .swiper-wrapper {

  align-items: stretch;

}



/* Ensure cards have equal height in rows */

.projects-slider .row,

.activities-slider .row {

  display: flex;

  flex-wrap: wrap;

}



.projects-slider .row .col-lg-4,

.activities-slider .row .col-lg-4 {

  display: flex;

  margin-bottom: 20px;

}



.projects-slider .project-card,

.activities-slider .project-card {

  width: 100%;

}



/* ===== FIX FOR SLIDER VISIBILITY ===== */

.projects-slider .swiper-container,

.activities-slider .swiper-container {

  width: 100%;

  height: auto;

  overflow: hidden;

}



.projects-slider .swiper-slide,

.activities-slider .swiper-slide {

  display: flex;

  align-items: stretch;

  justify-content: center;

  width: 100%;

  opacity: 1;

  visibility: visible;

}



/* Ensure proper initialization */

.swiper-initialized .swiper-slide {

  opacity: 1 !important;

  visibility: visible !important;

}



/* Clean slider styling */

.projects-slider,

.activities-slider {

  min-height: 400px;

  width: 100%;

}



.swiper-wrapper {

  display: flex;

  transition-property: transform;

}



/* Force visibility */

.projects-slider .swiper-slide,

.activities-slider .swiper-slide {

  flex-shrink: 0;

  width: 100%;

  height: auto;

  position: relative;

}



/* ===== GALLERY SLIDER NAVIGATION ===== */

.gallery-image-slider .swiper-button-next,

.gallery-image-slider .swiper-button-prev,

.gallery-video-slider .swiper-button-next,

.gallery-video-slider .swiper-button-prev {

  width: 45px;

  height: 45px;

  background: var(--white);

  border-radius: var(--radius-full);

  box-shadow: var(--shadow-md);

  color: var(--primary);

  border: 2px solid var(--border-color);

  transition: var(--transition);

  margin-top: -22.5px;

}



.gallery-image-slider .swiper-button-next::after,

.gallery-image-slider .swiper-button-prev::after,

.gallery-video-slider .swiper-button-next::after,

.gallery-video-slider .swiper-button-prev::after {

  font-size: 16px;

  font-weight: 900;

}



.gallery-image-slider .swiper-button-next:hover,

.gallery-image-slider .swiper-button-prev:hover,

.gallery-video-slider .swiper-button-next:hover,

.gallery-video-slider .swiper-button-prev:hover {

  background: var(--primary);

  color: var(--white);

  border-color: var(--primary);

  transform: scale(1.1);

  box-shadow: var(--shadow-color);

}



.gallery-image-next {

  right: -20px;

}



.gallery-image-prev {

  left: -20px;

}



.gallery-video-next {

  right: -20px;

}



.gallery-video-prev {

  left: -20px;

}



/* Gallery Pagination Styles */

.image-pagination .swiper-pagination-bullet,

.video-pagination .swiper-pagination-bullet {

  width: 12px;

  height: 12px;

  background: var(--text-light);

  opacity: 0.5;

  transition: var(--transition);

}



.image-pagination .swiper-pagination-bullet-active,

.video-pagination .swiper-pagination-bullet-active {

  background: var(--primary);

  opacity: 1;

  width: 30px;

  border-radius: var(--radius-full);

}



/* Gallery Slider Container */

.gallery-image-slider,

.gallery-video-slider {

  padding: 20px 0 60px;

  overflow: hidden;

}



.gallery-image-slider .swiper-slide,

.gallery-video-slider .swiper-slide {

  height: auto;

}



.gallery-image-slider .swiper-wrapper,

.gallery-video-slider .swiper-wrapper {

  align-items: stretch;

}



/* Mobile Responsive for Gallery */

@media (max-width: 768px) {

  .gallery-image-slider .swiper-button-next,

  .gallery-image-slider .swiper-button-prev,

  .gallery-video-slider .swiper-button-next,

  .gallery-video-slider .swiper-button-prev {

    display: none;

  }



  .gallery-image-slider,

  .gallery-video-slider {

    padding-bottom: 60px;

  }

}



/* ===== EVENTS SLIDER NAVIGATION ===== */

.upcoming-events-slider .swiper-button-next,

.upcoming-events-slider .swiper-button-prev,

.completed-events-slider .swiper-button-next,

.completed-events-slider .swiper-button-prev {

  width: 45px;

  height: 45px;

  background: var(--white);

  border-radius: var(--radius-full);

  box-shadow: var(--shadow-md);

  color: var(--primary);

  border: 2px solid var(--border-color);

  transition: var(--transition);

  margin-top: -22.5px;

}



.upcoming-events-slider .swiper-button-next::after,

.upcoming-events-slider .swiper-button-prev::after,

.completed-events-slider .swiper-button-next::after,

.completed-events-slider .swiper-button-prev::after {

  font-size: 16px;

  font-weight: 900;

}



.upcoming-events-slider .swiper-button-next:hover,

.upcoming-events-slider .swiper-button-prev:hover,

.completed-events-slider .swiper-button-next:hover,

.completed-events-slider .swiper-button-prev:hover {

  background: var(--primary);

  color: var(--white);

  border-color: var(--primary);

  transform: scale(1.1);

  box-shadow: var(--shadow-color);

}



.upcoming-next {

  right: -20px;

}



.upcoming-prev {

  left: -20px;

}



.completed-next {

  right: -20px;

}



.completed-prev {

  left: -20px;

}



/* Events Pagination Styles */

.upcoming-pagination .swiper-pagination-bullet,

.completed-pagination .swiper-pagination-bullet {

  width: 12px;

  height: 12px;

  background: var(--text-light);

  opacity: 0.5;

  transition: var(--transition);

}



.upcoming-pagination .swiper-pagination-bullet-active,

.completed-pagination .swiper-pagination-bullet-active {

  background: var(--primary);

  opacity: 1;

  width: 30px;

  border-radius: var(--radius-full);

}



/* Events Slider Container */

.upcoming-events-slider,

.completed-events-slider {

  padding: 20px 0 60px;

  overflow: hidden;

}



.upcoming-events-slider .swiper-slide,

.completed-events-slider .swiper-slide {

  height: auto;

}



.upcoming-events-slider .swiper-wrapper,

.completed-events-slider .swiper-wrapper {

  align-items: stretch;

}



/* Mobile Responsive for Events */

@media (max-width: 768px) {

  .upcoming-events-slider .swiper-button-next,

  .upcoming-events-slider .swiper-button-prev,

  .completed-events-slider .swiper-button-next,

  .completed-events-slider .swiper-button-prev {

    display: none;

  }



  .upcoming-events-slider,

  .completed-events-slider {

    padding-bottom: 60px;

  }

}



/* ===== TEAM SLIDER NAVIGATION ===== */

.team-slider .swiper-button-next,

.team-slider .swiper-button-prev {

  width: 45px;

  height: 45px;

  background: var(--white);

  border-radius: var(--radius-full);

  box-shadow: var(--shadow-md);

  color: var(--primary);

  border: 2px solid var(--border-color);

  transition: var(--transition);

  margin-top: -22.5px;

}



.team-slider .swiper-button-next::after,

.team-slider .swiper-button-prev::after {

  font-size: 16px;

  font-weight: 900;

}



.team-slider .swiper-button-next:hover,

.team-slider .swiper-button-prev:hover {

  background: var(--primary);

  color: var(--white);

  border-color: var(--primary);

  transform: scale(1.1);

  box-shadow: var(--shadow-color);

}



.team-button-next {

  right: -20px;

}



.team-button-prev {

  left: -20px;

}



/* Team Pagination Styles */

.team-pagination .swiper-pagination-bullet {

  width: 12px;

  height: 12px;

  background: var(--text-light);

  opacity: 0.5;

  transition: var(--transition);

}



.team-pagination .swiper-pagination-bullet-active {

  background: var(--primary);

  opacity: 1;

  width: 30px;

  border-radius: var(--radius-full);

}



/* Team Slider Container */

.team-slider {

  padding: 20px 0 60px;

  overflow: hidden;

}



.team-slider .swiper-slide {

  height: auto;

}



.team-slider .swiper-wrapper {

  align-items: stretch;

}



/* Team Card Enhancements */

.team-card {

  height: 100%;

  transition: var(--transition);

}



.team-card:hover {

  transform: translateY(-8px);

  box-shadow: var(--shadow-lg);

}



.team-card:hover .team-social {

  opacity: 1;

  visibility: visible;

}



/* Mobile Responsive for Team */

@media (max-width: 768px) {

  .team-slider .swiper-button-next,

  .team-slider .swiper-button-prev {

    display: none;

  }



  .team-slider {

    padding-bottom: 60px;

  }

}



/* ============================================================

   CROWD FUNDING — Premium Modern Styles

   ============================================================ */



/* ── Section ── */

.cf-section {

  background: var(--bg-light, #f8f9fa);

}



/* ── Hero Stats ── */

.cf-hero-stats {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 1.5rem;

  background: linear-gradient(135deg, #1e3a8a 0%, #e8401c 100%);

  border-radius: 16px;

  padding: 2rem;

  margin-bottom: 3rem;

  text-align: center;

}

.cf-hero-stat-val {

  font-size: 2rem;

  font-weight: 800;

  color: #fff;

  line-height: 1;

  margin-bottom: 0.3rem;

}

.cf-hero-stat-label {

  font-size: 0.8rem;

  color: rgba(255, 255, 255, 0.75);

  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: 0.5px;

}



/* ── Filters ── */

.cf-filters {

  display: flex;

  flex-direction: column;

  gap: 1rem;

  margin-bottom: 2.5rem;

}

.cf-search-wrap {

  position: relative;

  max-width: 480px;

}

.cf-search-icon {

  position: absolute;

  left: 1rem;

  top: 50%;

  transform: translateY(-50%);

  color: #999;

}

.cf-search-input {

  width: 100%;

  padding: 0.75rem 1rem 0.75rem 2.5rem;

  border: 1.5px solid #e0e0e0;

  border-radius: 50px;

  font-size: 0.9rem;

  outline: none;

  transition: border-color 0.2s;

}

.cf-search-input:focus {

  border-color: #e8401c;

}



.cf-category-tabs {

  display: flex;

  flex-wrap: wrap;

  gap: 0.5rem;

}

.cf-cat-btn {

  padding: 0.4rem 1rem;

  border: 1.5px solid #e0e0e0;

  border-radius: 50px;

  background: #fff;

  font-size: 0.82rem;

  font-weight: 600;

  color: #555;

  cursor: pointer;

  transition: all 0.2s;

}

.cf-cat-btn:hover {

  border-color: #e8401c;

  color: #e8401c;

}

.cf-cat-btn.active {

  background: #e8401c;

  border-color: #e8401c;

  color: #fff;

}



/* ── Campaign Grid ── */

.cf-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

  gap: 1.75rem;

}



/* ── Campaign Card ── */

.cf-card {

  background: #fff;

  border-radius: 16px;

  overflow: hidden;

  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);

  transition:

    transform 0.25s ease,

    box-shadow 0.25s ease;

  display: flex;

  flex-direction: column;

}

.cf-card:hover {

  transform: translateY(-6px);

  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);

}



.cf-card-img-wrap {

  position: relative;

  height: 200px;

  overflow: hidden;

}

.cf-card-img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.4s ease;

}

.cf-card:hover .cf-card-img {

  transform: scale(1.05);

}



.cf-card-badge {

  position: absolute;

  top: 12px;

  left: 12px;

  padding: 4px 10px;

  border-radius: 50px;

  font-size: 0.7rem;

  font-weight: 700;

  color: #fff;

  text-transform: capitalize;

}

.cf-card-featured {

  position: absolute;

  top: 12px;

  right: 12px;

  background: #f59e0b;

  color: #fff;

  padding: 4px 10px;

  border-radius: 50px;

  font-size: 0.7rem;

  font-weight: 700;

}

.cf-card-category {

  position: absolute;

  bottom: 12px;

  left: 12px;

  background: rgba(0, 0, 0, 0.6);

  color: #fff;

  padding: 3px 10px;

  border-radius: 50px;

  font-size: 0.68rem;

  font-weight: 600;

  backdrop-filter: blur(4px);

}



.cf-card-body {

  padding: 1.25rem;

  flex: 1;

  display: flex;

  flex-direction: column;

  gap: 0.75rem;

}

.cf-card-title {

  font-size: 1rem;

  font-weight: 700;

  color: #1a1a2e;

  line-height: 1.3;

  margin: 0;

}

.cf-card-tagline {

  font-size: 0.82rem;

  color: #666;

  margin: 0;

}



/* Progress bar */

.cf-progress-wrap {

  height: 8px;

  background: #f0f0f0;

  border-radius: 99px;

  overflow: hidden;

}

.cf-progress-bar {

  height: 100%;

  border-radius: 99px;

  transition: width 0.8s ease;

  background: linear-gradient(90deg, #e8401c, #f59e0b);

}



.cf-card-stats {

  display: flex;

  justify-content: space-between;

  align-items: flex-end;

}

.cf-stat {

  display: flex;

  flex-direction: column;

}

.cf-stat-center {

  align-items: center;

}

.cf-stat-right {

  align-items: flex-end;

}

.cf-stat-val {

  font-size: 0.95rem;

  font-weight: 800;

  color: #1a1a2e;

}

.cf-pct {

  color: #e8401c;

}

.cf-stat-label {

  font-size: 0.65rem;

  color: #999;

  text-transform: uppercase;

  letter-spacing: 0.5px;

}



.cf-card-meta {

  display: flex;

  gap: 1rem;

  flex-wrap: wrap;

}

.cf-meta-item {

  font-size: 0.75rem;

  color: #777;

  display: flex;

  align-items: center;

  gap: 0.3rem;

}

.cf-meta-item i {

  color: #e8401c;

}



.cf-card-btn {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.4rem;

  padding: 0.7rem;

  background: linear-gradient(135deg, #e8401c, #f59e0b);

  color: #fff !important;

  border-radius: 10px;

  font-weight: 700;

  font-size: 0.88rem;

  text-decoration: none;

  transition:

    opacity 0.2s,

    transform 0.2s;

  margin-top: auto;

}

.cf-card-btn:hover {

  opacity: 0.9;

  transform: translateY(-1px);

  color: #fff !important;

}



/* ── Trust Row ── */

.cf-trust-row {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 2rem;

  margin-top: 3rem;

  padding: 1.5rem 2rem;

  background: #fff;

  border-radius: 12px;

  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);

}

.cf-trust-item {

  display: flex;

  align-items: center;

  gap: 0.5rem;

  font-size: 0.85rem;

  font-weight: 600;

  color: #444;

}

.cf-trust-item i {

  color: #e8401c;

  font-size: 1.1rem;

}



/* ── Loading / Empty ── */

.cf-loading {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 1rem;

  padding: 4rem;

  color: #999;

}

.cf-spinner {

  width: 40px;

  height: 40px;

  border: 3px solid #f0f0f0;

  border-top-color: #e8401c;

  border-radius: 50%;

  animation: spin 0.7s linear infinite;

}

.cf-empty {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 1rem;

  padding: 4rem;

  color: #999;

  text-align: center;

}



/* ============================================================

   CROWD FUNDING DETAIL PAGE

   ============================================================ */



/* Main image */

.cf-detail-img-wrap {

  position: relative;

  border-radius: 16px;

  overflow: hidden;

  margin-bottom: 1rem;

}

.cf-detail-img {

  width: 100%;

  height: 420px;

  object-fit: cover;

  display: block;

}

.cf-detail-status {

  position: absolute;

  top: 16px;

  left: 16px;

  padding: 5px 14px;

  border-radius: 50px;

  font-size: 0.75rem;

  font-weight: 700;

  color: #fff;

  text-transform: capitalize;

}

.cf-status-active {

  background: #2ecc40;

}

.cf-status-completed {

  background: #2563eb;

}

.cf-status-paused {

  background: #d97706;

}



/* Thumbnails */

.cf-thumb-row {

  display: flex;

  gap: 0.5rem;

  flex-wrap: wrap;

  margin-bottom: 1.5rem;

}

.cf-thumb {

  width: 72px;

  height: 56px;

  border-radius: 8px;

  overflow: hidden;

  border: 2px solid transparent;

  cursor: pointer;

  padding: 0;

  transition: border-color 0.2s;

}

.cf-thumb.active {

  border-color: #e8401c;

}

.cf-thumb img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



/* Progress card */

.cf-detail-progress-card {

  background: #fff;

  border-radius: 12px;

  padding: 1.25rem;

  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);

  margin-bottom: 1.5rem;

}

.cf-detail-progress-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 0.75rem;

}

.cf-detail-raised {

  font-size: 1.3rem;

  font-weight: 800;

  color: #e8401c;

}

.cf-detail-pct {

  font-size: 1.1rem;

  font-weight: 700;

  color: #1a1a2e;

}

.cf-detail-progress-wrap {

  height: 10px;

  background: #f0f0f0;

  border-radius: 99px;

  overflow: hidden;

  margin-bottom: 0.75rem;

}

.cf-detail-progress-bar {

  height: 100%;

  border-radius: 99px;

  background: linear-gradient(90deg, #e8401c, #f59e0b);

  transition: width 0.8s ease;

}

.cf-detail-progress-footer {

  display: flex;

  justify-content: space-between;

  font-size: 0.78rem;

  color: #777;

}



/* Tabs */

.cf-tabs {

  display: flex;

  gap: 0.25rem;

  border-bottom: 2px solid #f0f0f0;

  margin-bottom: 1.5rem;

  flex-wrap: wrap;

}

.cf-tab-btn {

  padding: 0.65rem 1.25rem;

  background: none;

  border: none;

  font-size: 0.88rem;

  font-weight: 600;

  color: #777;

  cursor: pointer;

  border-bottom: 2px solid transparent;

  margin-bottom: -2px;

  transition: all 0.2s;

  display: flex;

  align-items: center;

  gap: 0.4rem;

}

.cf-tab-btn:hover {

  color: #e8401c;

}

.cf-tab-btn.active {

  color: #e8401c;

  border-bottom-color: #e8401c;

}

.cf-tab-count {

  background: #e8401c;

  color: #fff;

  font-size: 0.65rem;

  padding: 1px 6px;

  border-radius: 99px;

}



/* Tab content */

.cf-tab-content {

  padding: 0.5rem 0;

}

.cf-detail-title {

  font-size: 1.5rem;

  font-weight: 800;

  color: #1a1a2e;

  margin-bottom: 0.5rem;

}

.cf-detail-tagline {

  font-size: 1rem;

  color: #e8401c;

  font-weight: 600;

  margin-bottom: 1rem;

}

.cf-detail-desc {

  font-size: 0.9rem;

  color: #555;

  line-height: 1.8;

  margin-bottom: 1rem;

}



/* Highlights */

.cf-highlights {

  display: flex;

  flex-direction: column;

  gap: 1rem;

  margin: 1.5rem 0;

}

.cf-highlight-item {

  display: flex;

  gap: 1rem;

  align-items: flex-start;

  padding: 1rem;

  background: #fff8f6;

  border-radius: 10px;

  border-left: 3px solid #e8401c;

}

.cf-highlight-icon {

  width: 40px;

  height: 40px;

  background: #e8401c;

  border-radius: 10px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff;

  font-size: 1.1rem;

  flex-shrink: 0;

}

.cf-highlight-item h5 {

  font-size: 0.9rem;

  font-weight: 700;

  margin-bottom: 0.25rem;

  color: #1a1a2e;

}

.cf-highlight-item p {

  font-size: 0.82rem;

  color: #666;

  margin: 0;

}



/* Milestones */

.cf-section-subtitle {

  font-size: 1.1rem;

  font-weight: 700;

  color: #1a1a2e;

  margin: 1.5rem 0 1rem;

}

.cf-milestones {

  display: flex;

  flex-direction: column;

  gap: 0.75rem;

}

.cf-milestone {

  display: flex;

  gap: 1rem;

  align-items: flex-start;

  padding: 0.85rem 1rem;

  background: #f8f9fa;

  border-radius: 10px;

  opacity: 0.6;

  transition: opacity 0.2s;

}

.cf-milestone.achieved {

  opacity: 1;

  background: #ecfdf5;

}

.cf-milestone-icon {

  font-size: 1.2rem;

  color: #ccc;

  flex-shrink: 0;

  margin-top: 2px;

}

.cf-milestone.achieved .cf-milestone-icon {

  color: #2ecc40;

}

.cf-milestone-amount {

  font-size: 1rem;

  font-weight: 800;

  color: #e8401c;

}

.cf-milestone-title {

  font-size: 0.88rem;

  font-weight: 700;

  color: #1a1a2e;

}

.cf-milestone-desc {

  font-size: 0.78rem;

  color: #777;

}



/* Stats row */

.cf-stats-row {

  display: flex;

  gap: 1rem;

  flex-wrap: wrap;

  margin: 1.5rem 0;

}

.cf-stat-box {

  flex: 1;

  min-width: 100px;

  background: linear-gradient(135deg, #e8401c, #f59e0b);

  border-radius: 12px;

  padding: 1rem;

  text-align: center;

  color: #fff;

}

.cf-stat-box-val {

  font-size: 1.4rem;

  font-weight: 800;

}

.cf-stat-box-label {

  font-size: 0.72rem;

  opacity: 0.85;

  text-transform: uppercase;

  letter-spacing: 0.5px;

}



/* Organizer */

.cf-organizer {

  display: flex;

  gap: 1rem;

  align-items: flex-start;

  padding: 1.25rem;

  background: #fff;

  border-radius: 12px;

  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);

  margin-top: 1.5rem;

}

.cf-organizer-av {

  width: 52px;

  height: 52px;

  border-radius: 50%;

  background: linear-gradient(135deg, #e8401c, #f59e0b);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.2rem;

  font-weight: 800;

  color: #fff;

  flex-shrink: 0;

  overflow: hidden;

}

.cf-organizer-av img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.cf-organizer-name {

  font-weight: 700;

  color: #1a1a2e;

}

.cf-organizer-role {

  font-size: 0.78rem;

  color: #e8401c;

  font-weight: 600;

}

.cf-organizer-msg {

  font-size: 0.82rem;

  color: #666;

  font-style: italic;

  margin-top: 0.4rem;

}



/* Updates */

.cf-update-item {

  padding: 1.25rem 0;

  border-bottom: 1px solid #f0f0f0;

}

.cf-update-item:last-child {

  border-bottom: none;

}

.cf-update-img {

  width: 100%;

  height: 200px;

  object-fit: cover;

  border-radius: 10px;

  margin-bottom: 0.75rem;

}

.cf-update-date {

  font-size: 0.75rem;

  color: #e8401c;

  font-weight: 600;

  margin-bottom: 0.4rem;

}

.cf-update-title {

  font-size: 1rem;

  font-weight: 700;

  color: #1a1a2e;

  margin-bottom: 0.5rem;

}

.cf-update-content {

  font-size: 0.88rem;

  color: #555;

  line-height: 1.7;

}



/* Donors */

.cf-donors-list {

  display: flex;

  flex-direction: column;

  gap: 0.75rem;

}

.cf-donor-item {

  display: flex;

  align-items: center;

  gap: 0.85rem;

  padding: 0.85rem;

  background: #f8f9fa;

  border-radius: 10px;

}

.cf-donor-av {

  width: 40px;

  height: 40px;

  border-radius: 50%;

  background: linear-gradient(135deg, #e8401c, #f59e0b);

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: 800;

  color: #fff;

  font-size: 0.9rem;

  flex-shrink: 0;

}

.cf-donor-info {

  flex: 1;

}

.cf-donor-name {

  font-weight: 600;

  font-size: 0.88rem;

  color: #1a1a2e;

}

.cf-donor-meta {

  font-size: 0.72rem;

  color: #999;

}

.cf-donor-amount {

  font-weight: 800;

  color: #e8401c;

  font-size: 0.95rem;

}



/* FAQ */

.cf-faq-list {

  display: flex;

  flex-direction: column;

  gap: 0.5rem;

}

.cf-faq-item {

  background: #f8f9fa;

  border-radius: 10px;

  overflow: hidden;

}

.cf-faq-q {

  padding: 1rem 1.25rem;

  font-weight: 600;

  font-size: 0.9rem;

  color: #1a1a2e;

  cursor: pointer;

  list-style: none;

  display: flex;

  align-items: center;

}

.cf-faq-q::-webkit-details-marker {

  display: none;

}

.cf-faq-a {

  padding: 0 1.25rem 1rem;

  font-size: 0.85rem;

  color: #555;

  line-height: 1.7;

  margin: 0;

}

.cf-empty-tab {

  padding: 2rem;

  text-align: center;

  color: #999;

  font-size: 0.9rem;

}



/* ── Sticky Right Column ── */

.cf-sticky-col {

  position: sticky;

  top: 120px;

  display: flex;

  flex-direction: column;

  gap: 1.25rem;

}



/* Donation Card */

.cf-donate-card {

  background: #fff;

  border-radius: 16px;

  padding: 1.5rem;

  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);

  border-top: 4px solid #e8401c;

}

.cf-donate-title {

  font-size: 1.1rem;

  font-weight: 800;

  color: #1a1a2e;

  margin-bottom: 1rem;

}



.cf-type-toggle {

  display: flex;

  gap: 0.5rem;

  margin-bottom: 1rem;

}

.cf-type-btn {

  flex: 1;

  padding: 0.6rem;

  border: 1.5px solid #e0e0e0;

  border-radius: 8px;

  background: #f8f9fa;

  font-size: 0.82rem;

  font-weight: 600;

  color: #555;

  cursor: pointer;

  transition: all 0.2s;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.3rem;

}

.cf-type-btn.active {

  background: #e8401c;

  border-color: #e8401c;

  color: #fff;

}



.cf-amount-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 0.5rem;

  margin-bottom: 0.75rem;

}

.cf-amount-btn {

  padding: 0.6rem;

  border: 1.5px solid #e0e0e0;

  border-radius: 8px;

  background: #f8f9fa;

  font-size: 0.85rem;

  font-weight: 700;

  color: #333;

  cursor: pointer;

  transition: all 0.2s;

}

.cf-amount-btn:hover {

  border-color: #e8401c;

  color: #e8401c;

}

.cf-amount-btn.active {

  background: #e8401c;

  border-color: #e8401c;

  color: #fff;

}



.cf-input-wrap {

  position: relative;

  margin-bottom: 0.75rem;

}

.cf-input-prefix {

  position: absolute;

  left: 0.85rem;

  top: 50%;

  transform: translateY(-50%);

  font-weight: 700;

  color: #e8401c;

  font-size: 1rem;

}

.cf-input {

  width: 100%;

  padding: 0.65rem 0.85rem 0.65rem 1.75rem;

  border: 1.5px solid #e0e0e0;

  border-radius: 8px;

  font-size: 0.88rem;

  outline: none;

  transition: border-color 0.2s;

}

.cf-input:focus {

  border-color: #e8401c;

}



.cf-form-fields {

  display: flex;

  flex-direction: column;

  gap: 0.5rem;

  margin-bottom: 0.75rem;

}

.cf-field-wrap {

  position: relative;

}

.cf-field-icon {

  position: absolute;

  left: 0.85rem;

  top: 50%;

  transform: translateY(-50%);

  color: #999;

  font-size: 0.9rem;

}

.cf-input-field {

  padding-left: 2.25rem;

}



.cf-donate-btn {

  width: 100%;

  padding: 0.9rem;

  background: linear-gradient(135deg, #e8401c, #f59e0b);

  color: #fff;

  border: none;

  border-radius: 10px;

  font-size: 0.95rem;

  font-weight: 800;

  cursor: pointer;

  transition:

    opacity 0.2s,

    transform 0.2s;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.4rem;

  margin-bottom: 0.75rem;

}

.cf-donate-btn:hover:not(:disabled) {

  opacity: 0.9;

  transform: translateY(-1px);

}

.cf-donate-btn:disabled {

  opacity: 0.6;

  cursor: not-allowed;

}



.cf-secure-note {

  text-align: center;

  font-size: 0.75rem;

  color: #888;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.3rem;

}

.cf-secure-note i {

  color: #2ecc40;

}



/* Share Card */

.cf-share-card {

  background: #fff;

  border-radius: 12px;

  padding: 1.25rem;

  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);

}

.cf-share-card h4 {

  font-size: 0.9rem;

  font-weight: 700;

  color: #1a1a2e;

  margin-bottom: 0.75rem;

}

.cf-share-btns {

  display: flex;

  gap: 0.5rem;

  flex-wrap: wrap;

}

.cf-share-btn {

  flex: 1;

  min-width: 80px;

  padding: 0.5rem 0.75rem;

  border-radius: 8px;

  font-size: 0.75rem;

  font-weight: 700;

  text-decoration: none;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.3rem;

  cursor: pointer;

  border: none;

  transition: opacity 0.2s;

}

.cf-share-btn:hover {

  opacity: 0.85;

}

.cf-share-wa {

  background: #25d366;

  color: #fff;

}

.cf-share-fb {

  background: #1877f2;

  color: #fff;

}

.cf-share-copy {

  background: #f0f0f0;

  color: #333;

}



/* Contact Card */

.cf-contact-card {

  background: #fff;

  border-radius: 12px;

  padding: 1.25rem;

  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);

}

.cf-contact-card h4 {

  font-size: 0.9rem;

  font-weight: 700;

  color: #1a1a2e;

  margin-bottom: 0.75rem;

}

.cf-contact-btn {

  display: flex;

  align-items: center;

  gap: 0.5rem;

  padding: 0.6rem 1rem;

  border-radius: 8px;

  font-size: 0.82rem;

  font-weight: 700;

  text-decoration: none;

  margin-bottom: 0.5rem;

  transition: opacity 0.2s;

}

.cf-contact-btn:hover {

  opacity: 0.85;

}

.cf-contact-wa {

  background: #25d366;

  color: #fff;

}

.cf-contact-call {

  background: #e8401c;

  color: #fff;

}



/* ── Responsive ── */

@media (max-width: 991px) {

  .cf-hero-stats {

    grid-template-columns: repeat(2, 1fr);

  }

  .cf-detail-img {

    height: 280px;

  }

  .cf-sticky-col {

    position: static;

  }

}

@media (max-width: 576px) {

  .cf-hero-stats {

    grid-template-columns: 1fr 1fr;

    gap: 1rem;

    padding: 1.25rem;

  }

  .cf-hero-stat-val {

    font-size: 1.5rem;

  }

  .cf-grid {

    grid-template-columns: 1fr;

  }

  .cf-detail-img {

    height: 220px;

  }

  .cf-amount-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}