/* Custom animations and utilities */ .animate-slide-in { animation: slideIn 0.5s ease-out; } @keyframes slideIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } /* Smooth scrolling */ html { scroll-behavior: smooth; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #c7c7c7; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #a0a0a0; } /* Gradient text support */ .gradient-text { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Card hover effects */ .feature-card { transition: all 0.3s ease; } .feature-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); } /* Button ripple effect */ .btn-ripple { position: relative; overflow: hidden; } .btn-ripple::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255,255,255,0.3); transform: translate(-50%, -50%); transition: width 0.6s, height 0.6s; } .btn-ripple:active::after { width: 300px; height: 300px; }