/* Custom Animations */ @keyframes fade-in-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes slide-in-left { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } } @keyframes slide-in-right { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } } @keyframes slide-in-up { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } @keyframes count-up { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* Animation Classes */ .animate-fade-in-up { animation: fade-in-up 1s ease-out forwards; } .animate-fade-in { animation: fade-in 1s ease-out forwards; } .animate-slide-in-left { animation: slide-in-left 0.8s ease-out forwards; } .animate-slide-in-right { animation: slide-in-right 0.8s ease-out forwards; } .animate-slide-in-up { animation: slide-in-up 0.8s ease-out forwards; } .animate-float { animation: float 6s ease-in-out infinite; } .animate-count-up { animation: count-up 1s ease-out forwards; } .animation-delay-300 { animation-delay: 0.3s; } .animation-delay-600 { animation-delay: 0.6s; } .animation-delay-900 { animation-delay: 0.9s; } .animation-delay-1000 { animation-delay: 1s; } .animation-delay-2000 { animation-delay: 2s; } .animation-delay-400 { animation-delay: 0.4s; } /* Smooth Scrolling */ html { scroll-behavior: smooth; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #3b82f6; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #2563eb; } /* Glass Morphism Effect */ .glass { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); } /* Hover Effects */ .hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; } .hover-lift:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }