.h-banner-top-banner-body { background: #f5f5f5; display: flex; justify-content: center; align-items: center; padding: 20px; } .h-banner-top-banner-container { font-weight: 300; width: 100%; max-width: 1200px; overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 128, 0.1); position: relative; padding: 28px 14px; } .h-banner-top-banner-container h2 { font-weight: 500; margin: 0; font-size: 20px; } .mobile-h2-top h2 { font-weight: 500; margin: 0; font-size: 14px; color: #1f347c; } .h-banner-top-banner-content { padding: 60px 40px; position: relative; z-index: 2; } .h-banner-top-offer-text { color: #333; font-size: 20px; line-height: 1.8; margin-bottom: 15px; animation: fadeInUp-h 1s ease-out 0.4s both; } .h-banner-top-highlight { color: var(--orange); font-weight: 600; } .h-banner-top-decorative-circle { position: absolute; border-radius: 50%; background: white; opacity: 0.05; animation: float-h 6s ease-in-out infinite; } .h-banner-top-circle-1 { width: 300px; height: 300px; top: -150px; right: -100px; animation-delay: 0s; } .h-banner-top-circle-2 { width: 200px; height: 200px; bottom: -100px; left: -50px; animation-delay: 2s; } .h-banner-top-circle-3 { width: 150px; height: 150px; top: 50%; right: 5%; animation-delay: 4s; } @keyframes fadeInUp-h { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes float-h { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-20px) scale(1.05); } } @media (max-width: 768px) { .h-banner-top-banner-content { padding: 40px 25px; } .h-banner-top-offer-text { font-size: 18px; } }