@keyframes fadeUp {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      .animate-fade-up {
        animation: fadeUp 0.8s ease-out forwards;
      }

      @keyframes fadeUp {
        from {
          opacity: 0;
          transform: translateY(40px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      @keyframes fadeDown {
        from {
          opacity: 0;
          transform: translateY(-40px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      @keyframes fadeLeft {
        from {
          opacity: 0;
          transform: translateX(-40px);
        }
        to {
          opacity: 1;
          transform: translateX(0);
        }
      }
      @keyframes fadeRight {
        from {
          opacity: 0;
          transform: translateX(40px);
        }
        to {
          opacity: 1;
          transform: translateX(0);
        }
      }
      @keyframes fadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      .fade-up {
        opacity: 0;
        animation: fadeUp 0.9s ease-out forwards;
      }

      .fade-down {
        opacity: 0;
        animation: fadeDown 0.9s ease-out forwards;
      }

      .fade-left {
        opacity: 0;
        animation: fadeLeft 0.9s ease-out forwards;
      }

      .fade-right {
        opacity: 0;
        animation: fadeRight 0.9s ease-out forwards;
      }

      .fade-in {
        opacity: 0;
        animation: fadeIn 1s ease-out forwards;
      }

      /* Delay utilities */
      .delay-100 {
        animation-delay: 0.1s;
      }
      .delay-200 {
        animation-delay: 0.2s;
      }
      .delay-300 {
        animation-delay: 0.3s;
      }
      .delay-400 {
        animation-delay: 0.4s;
      }
      .delay-500 {
        animation-delay: 0.5s;
      }