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

  * {
      font-family: 'Vazirmatn', sans-serif;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

  html {
      scroll-behavior: smooth;
  }

  body {
      background: #FAFAFA;
      color: #22382B;
      overflow-x: hidden;
  }

  .lang-en,
  .lang-en * {
      font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important;
  }

  /* Colors & Aesthetics */
  .bg-charity-darkGreen {
      background-color: #22382B;
  }

  .text-charity-darkGreen {
      color: #22382B;
  }

  .bg-charity-gold {
      background-color: #C79A53;
  }

  .text-charity-gold {
      color: #C79A53;
  }

  .border-charity-gold {
      border-color: #C79A53;
  }

  .text-charity-leafGreen {
      color: #4D654E;
  }

  .text-charity-sage {
      color: #82967A;
  }

  /* Premium Hero Dynamic Background */
  .hero-advanced-bg {
      background:
          linear-gradient(90deg, rgba(34, 56, 43, 0.90) 0%, rgba(117, 106, 30, 0.25) 100%),
          url('/images/bg/2.webp');
      /* 
                linear-gradient(135deg, rgba(34, 56, 43, 0.95) 0%, rgba(26, 43, 32, 0.85) 100%),

                url('/images/headerBg.jpg');              
              url('https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?w=1600&auto=format&fit=crop&q=80'); */
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
  }

  html[lang="en"] .hero-advanced-bg {
      background:
          linear-gradient(270deg, rgba(34, 56, 43, 0.90) 0%, rgba(117, 106, 30, 0.25) 100%),
          url('/images/bg/2-flip.webp');
            background-size: cover;
      background-position: center;
      background-attachment: fixed;

  }

  .card-shadow {
      box-shadow: 0 10px 40px rgba(34, 56, 43, 0.05), 0 2px 12px rgba(34, 56, 43, 0.02);
  }

  .card-shadow-hover {
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .card-shadow-hover:hover {
      box-shadow: 0 30px 60px rgba(34, 56, 43, 0.12);
      transform: translateY(-5px);
  }

  .divider-warm {
      height: 3px;
      width: 80px;
      background: linear-gradient(90deg, transparent, #C79A53, transparent);
      margin: 0.75rem auto 1rem;
      border-radius: 4px;
  }

  /* Animations */
  .fade-in {
      animation: fadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  @keyframes fadeIn {
      from {
          opacity: 0;
          transform: translateY(30px);
      }

      to {
          opacity: 1;
          transform: translateY(0);
      }
  }

  .delay-1 {
      animation-delay: 0.15s;
  }

  .delay-2 {
      animation-delay: 0.3s;
  }

  .lang-toggle {
      transition: all 0.3s ease;
      /* border: 2px solid #C79A53; */
  }

  .lang-toggle:hover {
      /* background: #C79A53; */
      color: #C79A53 !important;
  }

  .nav-link {
      position: relative;
      transition: color 0.3s;
  }

  .nav-link::after {
      content: '';
      position: absolute;
      bottom: -4px;
      right: 0;
      width: 0;
      height: 2px;
      background: #C79A53;
      transition: width 0.3s ease;
  }

  .nav-link:hover::after {
      width: 100%;
  }

  html[dir="ltr"] .nav-link::after {
      left: 0;
      right: auto;
  }

  .account-box {
      background: linear-gradient(145deg, #FAFAFA, #f5efe4);
      transition: all 0.3s ease;
  }

  .account-box:hover {
      border-color: #C79A53;
      transform: scale(1.02);
  }

  .hero-title {
      font-size: clamp(2.2rem, 5vw, 3.5rem);
      line-height: 1.2;
  }

  /* Premium Ambient Float Animations */
  @keyframes elegantFloat {

      0%,
      100% {
          transform: translateY(0) rotate(3deg);
      }

      50% {
          transform: translateY(-12px) rotate(1.5deg);
      }
  }

  @keyframes counterFloat {

      0%,
      100% {
          transform: translateY(0) rotate(-6deg);
      }

      50% {
          transform: translateY(8px) rotate(-4deg);
      }
  }

  @keyframes pulseGlow {

      0%,
      100% {
          opacity: 0.25;
          transform: scale(1);
      }

      50% {
          opacity: 0.45;
          transform: scale(1.08);
      }
  }

  .animate-elegant-float {
      animation: elegantFloat 6s ease-in-out infinite;
  }

  .animate-counter-float {
      animation: counterFloat 5.5s ease-in-out infinite;
  }

  .animate-pulse-glow {
      animation: pulseGlow 4s ease-in-out infinite;
  }

  /* Force the language spans to inherit the parent link's color, even on hover */
  #videoTrigger .lang-fa,
  #videoTrigger .lang-en {
      color: inherit !important;
  }