/* ===== ANIMATIONS ===== */ @keyframes slideInDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } @keyframes countUp { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } } /* ===== RESPONSIVE ===== */ @media (max-width: 768px) { .hero h1 { font-size: 2.5rem; } .hero p { font-size: 1rem; } .stat-item h3 { font-size: 2rem; } .feature-box { margin: 15px 0; } footer h5 { margin-top: 20px; } .cta-section h2 { font-size: 2rem; } } @media (max-width: 576px) { .hero { padding: 50px 0; margin-top: 30px; } .hero h1 { font-size: 2rem; } .hero p { font-size: 0.95rem; } .button-group { display: flex; flex-direction: column; gap: 10px; } .button-group .btn { width: 100%; justify-content: center; } .stat-item h3 { font-size: 1.8rem; } }