\n* {\n  font-family: 'Fredoka', 'Space Grotesk', sans-serif;\n}\n\nbody {\n  background-color: #000;\n  color: #fff;\n  overflow-x: hidden;\n}\n\n/* Smooth Scrolling */\nhtml {\n  scroll-behavior: smooth;\n}\n\n/* Gradient Text Animation */\n.text-gradient {\n  background: linear-gradient(135deg, #FF6B35, #FFD60A, #FF6B35);\n  background-size: 300% 300%;\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n  animation: gradientShift 5s ease infinite;\n}\n\n@keyframes gradientShift {\n  0% { background-position: 0% 50%; }\n  50% { background-position: 100% 50%; }\n  100% { background-position: 0% 50%; }\n}\n\n/* Glow Effect */\n.glow-orange {\n  box-shadow: 0 0 20px rgba(255, 107, 53, 0.5), 0 0 40px rgba(255, 107, 53, 0.3);\n}\n\n.glow-yellow {\n  box-shadow: 0 0 20px rgba(255, 214, 10, 0.5), 0 0 40px rgba(255, 214, 10, 0.3);\n}\n\n/* Button Hover Effects */\nbutton {\n  position: relative;\n  overflow: hidden;\n}\n\nbutton::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: -100%;\n  width: 100%;\n  height: 100%;\n  background: rgba(255, 255, 255, 0.2);\n  transition: left 0.3s ease;\n  z-index: -1;\n}\n\nbutton:hover::before {\n  left: 100%;\n}\n\n/* Responsive Images */\nimg {\n  max-width: 100%;\n  height: auto;\n  display: block;\n}\n\n/* Media Queries */\n@media (max-width: 768px) {\n  h1 {\n    font-size: 2.25rem;\n  }\n  \n  h2 {\n    font-size: 1.875rem;\n  }\n}\n\n/* Animations */\n@keyframes slideInUp {\n  from {\n    opacity: 0;\n    transform: translateY(30px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Hero Video Background */\nvideo {\n  object-fit: cover;\n}\n\n/* Scroll Animation */\n@keyframes bounce {\n  0%, 100% {\n    transform: translateY(0);\n  }\n  50% {\n    transform: translateY(-10px);\n  }\n}\n\n.animate-bounce {\n  animation: bounce 2s infinite;\n}\n"