@import "tailwindcss";


@layer utilities {

    @keyframes marquee {
        0% {
          transform: translateX(0%);
        }
        100% {
          transform: translateX(-10%);
        }
      }
    
      .animate-marquee {
        animation: marquee 10s linear infinite;
      }

    @keyframes fadeUp {
      0% {
        opacity: 0;
        transform: translateY(0.5rem);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }
  
    .animate-fade-up {
      animation: fadeUp 4.8s ease-out forwards;
    }

    @keyframes slideUp {
        from {
          opacity: 0;  
          transform: translateY(1.5rem); /* slide from lower position */
        }
        to {
          opacity: 1;  
          transform: translateY(0); /* slide to normal position */
        }
      }
    
      .animate-slide-up {
        animation: slideUp 0.8s ease-out forwards;
      }
    
      .delay-0 {
        animation-delay: 0ms;
      }
    
      .delay-100 {
        animation-delay: 100ms;
      }
    
      .delay-200 {
        animation-delay: 200ms;
      }
    
      .delay-300 {
        animation-delay: 300ms;
      }
    
      .delay-400 {
        animation-delay: 400ms;
      }
    
      .delay-500 {
        animation-delay: 500ms;
      }
  }