/* Custom styles for animations and gradients */
    .hero-gradient {
      background: linear-gradient(135deg, theme('colors.muted-blue.100') 0%, theme('colors.sage.100') 100%);
    }

    .dark .hero-gradient {
      background: linear-gradient(135deg, #1E293B 0%, #111827 100%);
    }

    .cta-gradient {
      background: linear-gradient(135deg, theme('colors.muted-blue.600') 0%, theme('colors.sage.600') 100%);
    }

    /* Scroll-in animation */
    .fade-in {
      opacity: 0;
      transition: opacity 0.7s ease-out, transform 0.7s ease-out;
      transform: translateY(30px);
    }

    .fade-in.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Custom scrollbar */
    body::-webkit-scrollbar {
      width: 8px;
    }

    body::-webkit-scrollbar-track {
      background: theme('colors.gray.100');
    }

    body::-webkit-scrollbar-thumb {
      background-color: theme('colors.sage.300');
      border-radius: 20px;
    }

    .dark body::-webkit-scrollbar-track {
      background: theme('colors.gray.800');
    }

    .dark body::-webkit-scrollbar-thumb {
      background-color: theme('colors.sage.600');
    }

    /* Custom styles for content modals */
    .content-modal-body h3 {
      @apply font-serif text-2xl font-bold text-muted-blue-600 dark:text-muted-blue-100 mb-4;
    }

    .content-modal-body h4 {
      @apply font-sans text-xl font-semibold text-text-primary dark:text-white mt-6 mb-2;
    }

    .content-modal-body p {
      @apply text-text-secondary dark:text-gray-300 mb-4;
    }

    .content-modal-body ul {
      @apply list-disc list-outside ml-5 text-text-secondary dark:text-gray-300 mb-4;
    }
/* Soft Fade Animation */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s ease forwards;
}

.fade-in:nth-child(2) {
  animation-delay: 0.15s;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Optional: Muted Blue tone if not in Tailwind config */
.bg-muted-blue-100 { background-color: #e0f2fe; }
.text-muted-blue-700 { color: #0369a1; }
.bg-muted-blue-600 { background-color: #0284c7; }
.text-muted-blue-100 { color: #e0f2fe; }