/* Custom animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fadeIn 1s ease-out; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #10b981; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #059669; } /* Smooth scrolling */ html { scroll-behavior: smooth; } /* Custom button hover effects */ .btn-hover-effect { transition: all 0.3s ease; } .btn-hover-effect:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); } /* Gradient text */ .gradient-text { background: linear-gradient(135deg, #10b981, #f59e0b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Card hover effects */ .card-hover { transition: all 0.3s ease; } .card-hover:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); } /* Responsive typography */ @media (max-width: 640px) { .text-responsive { font-size: 2.5rem; } } /* Custom form styles */ .form-input { transition: all 0.3s ease; } .form-input:focus { transform: scale(1.02); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1); } /* Loading animation */ .loading { display: inline-block; width: 20px; height: 20px; border: 3px solid #f3f3f3; border-top: 3px solid #10b981; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }