/* Custom animations and additional styles */ @keyframes fade-in { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fade-in 1s ease-out; } /* Smooth scrolling */ html { scroll-behavior: smooth; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #6366f1; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #4f46e5; } /* Mobile menu animation */ #mobile-menu { transition: all 0.3s ease; } /* Hover effects */ .hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; } .hover-lift:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); } /* Background patterns */ .bg-pattern { background-image: radial-gradient(circle at 1px 1px, rgba(99, 102, 241, 0.1) 1px, transparent 0); background-size: 20px 20px; } /* Loading animation for images */ img { transition: opacity 0.3s ease; } img:not([src]) { opacity: 0; } /* Custom button styles */ .btn-primary { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); transition: all 0.3s ease; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(99, 102, 241, 0.3); } /* Responsive text sizes */ @media (max-width: 640px) { .text-responsive-xl { font-size: 2rem; line-height: 2.5rem; } .text-responsive-2xl { font-size: 2.5rem; line-height: 3rem; } } /* Focus styles for accessibility */ button:focus, a:focus { outline: 2px solid #6366f1; outline-offset: 2px; } /* Print styles */ @media print { .no-print { display: none !important; } body { background: white !important; color: black !important; } }