@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source "../views";
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
        --font-roboto: 'Roboto', sans-serif; 
        --font-bebas:'Bebas Neue';

}

  @layer components{
    fonsfamily : bebas:'Bebas Neue'
  }
  @layer utilities {
    
    @keyframes slideLeft {
      0% {
        transform: translateX(100px);
        opacity: 0;
      }
      100% {
        transform: translateX(0);
        opacity: 1;
      }
    }
  
    @keyframes slideRight {
      0% {
        transform: translateX(-100px);
        opacity: 0;
      }
      100% {
        transform: translateX(0);
        opacity: 1;
      }
    }
@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.animate-marquee {
  animation: marquee 40s linear infinite;
}

.animate-marquee:hover {
  animation-play-state: paused;
}
  
    .animate-slide-left {
      animation: slideLeft 0.7s ease-out forwards;
    }
  
    .animate-slide-right {
      animation: slideRight 0.7s ease-out forwards;
    }
    .animation-delay-500 {
      animation-delay: 0.5s;
    }
    
  }