@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; line-height: 1.6; color: #1f2937; } /* Smooth scrolling */ html { scroll-behavior: smooth; } /* Custom animations */ @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } } .animate-float { animation: float 6s ease-in-out infinite; } .animate-fade-in-up { animation: fadeInUp 0.8s ease-out; } .animate-slide-in-left { animation: slideInLeft 0.8s ease-out; } .animate-slide-in-right { animation: slideInRight 0.8s ease-out; } /* Gradient text effect */ .gradient-text { background: linear-gradient(135deg, #3b82f6, #f59e0b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Custom shadows */ .shadow-soft { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); } .shadow-strong { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15); } /* 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); } /* Loading animation for images */ img { transition: opacity 0.3s ease; } img:not([src]) { opacity: 0; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f1f5f9; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* Responsive design improvements */ @media (max-width: 768px) { .text-6xl { font-size: 3rem; } .text-8xl { font-size: 4rem; } } /* Focus styles for accessibility */ a:focus, button:focus { outline: 2px solid #3b82f6; outline-offset: 2px; } /* Print styles */ @media print { .no-print { display: none; } } /* Dark mode support */ @media (prefers-color-scheme: dark) { .dark-mode-support { background-color: #1f2937; color: #f9fafb; } }