body { font-family: 'Inter', sans-serif; /* Animated gradient background for a subtle dynamic feel */ background: linear-gradient(-45deg, #ffffff, #f8fafc, #f1f5f9, #f8fafc); background-size: 400% 400%; animation: gradientBG 15s ease infinite; background-attachment: fixed; color: #1E293B; position: relative; min-height: 100vh; } @keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Background blobs are visible and animated */ .bg-blob { display: block !important; pointer-events: none; } .opacity-10 { opacity: 0.1; } .hover-lift { transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } .hover-lift:hover { transform: translateY(-5px); box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1) !important; } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .floating-animation { animation: floating 3s ease-in-out infinite; } @keyframes floating { 0% { transform: translate(0, 0px); } 50% { transform: translate(0, 15px); } 100% { transform: translate(0, -0px); } } .btn-success { background-color: #10B981; border-color: #10B981; } .btn-success:hover { background-color: #059669; border-color: #059669; } .text-success { color: #10B981 !important; } .bg-success { background-color: #10B981 !important; } .bg-primary { background-color: #3B82F6 !important; } .bg-warning { background-color: #F59E0B !important; } .bg-success-subtle { background-color: #ECFDF5 !important; } .rounded-4 { border-radius: 1rem !important; } .rounded-5 { border-radius: 1.5rem !important; } /* Navbar styling with glassmorphism */ .navbar { background: rgba(255, 255, 255, 0.8) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, 0.3); } .navbar-brand { font-size: 1.25rem; } /* Card styling */ .card { border: none; background-color: #FFFFFF; } /* Mobile adjustments to match the screenshot */ @media (max-width: 767.98px) { .display-4 { font-size: 2rem !important; line-height: 1.2; } .lead { font-size: 1rem; } .btn-lg { padding: 0.75rem 1.5rem; font-size: 1rem; } .card-title { font-size: 0.85rem; } }