* { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Inter', sans-serif; background-color: #ffffff; } ::selection { background-color: #d4a843; color: #0f1e2e; } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: #f0f4f8; } ::-webkit-scrollbar-thumb { background: #1a3a5c; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #c0392b; } .nav-link { position: relative; transition: all 0.3s ease; } .nav-link::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 0; height: 2px; background-color: #c0392b; transition: width 0.3s ease; } .nav-link:hover::after { width: 100%; } .nav-link.active::after { width: 100%; background-color: #1a3a5c; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in-up { animation: fadeInUp 0.8s ease-out forwards; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .animate-fade-in { animation: fadeIn 0.6s ease-out forwards; } @keyframes slideDown { from { opacity: 0; max-height: 0; } to { opacity: 1; max-height: 500px; } } #mobile-menu.open { display: block; animation: slideDown 0.3s ease-out forwards; } .donate-btn.active { background-color: #1a3a5c; border-color: #1a3a5c; color: white; transform: scale(1.05); } .donate-btn:hover { transform: scale(1.05); } img { max-width: 100%; height: auto; } @media (max-width: 768px) { h1 { font-size: 2.5rem !important; } h2 { font-size: 2rem !important; } } .section-hidden { opacity: 0; transform: translateY(30px); transition: all 0.6s ease-out; } .section-visible { opacity: 1; transform: translateY(0); }