/* Your custom styles here */ /* ===== FLOATING BADGES ANIMATION ===== */ @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } } @keyframes floatSlow { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-5px); } } @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 20px rgba(16,255,190,0.15); } 50% { box-shadow: 0 0 40px rgba(16,255,190,0.3); } } .badge-float-1 { animation: float 3s ease-in-out infinite; } .badge-float-2 { animation: floatSlow 4s ease-in-out infinite 0.5s; } .badge-float-3 { animation: float 3.5s ease-in-out infinite 1s; } .badge-float-4 { animation: floatSlow 3.8s ease-in-out infinite 0.3s; } /* ===== GLOW EFFECTS ===== */ .glow-green { box-shadow: 0 0 30px rgba(16, 255, 190, 0.2), 0 0 60px rgba(16, 255, 190, 0.1); } /* ===== VIDEO CARD STYLES ===== */ .video-card-wrapper { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid rgba(16, 255, 190, 0.25); background: linear-gradient(145deg, #1a1a2e 0%, #0f0f1a 100%); box-shadow: 0 0 0.5px rgba(16, 255, 190, 0.5), 0 0 30px rgba(16, 255, 190, 0.08), 0 20px 60px rgba(0, 0, 0, 0.5); transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .video-card-wrapper:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 0 1px rgba(16, 255, 190, 0.8), 0 0 50px rgba(16, 255, 190, 0.15), 0 30px 80px rgba(0, 0, 0, 0.6); border-color: rgba(16, 255, 190, 0.5); } /* ===== BADGE STYLES ===== */ .stat-badge { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); border-radius: 14px; padding: 10px 16px; display: flex; align-items: center; gap: 10px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); transition: transform 0.3s ease; } .stat-badge:hover { transform: scale(1.05); } /* ===== TAG PILLS ===== */ .tag-pill { display: inline-flex; align-items: center; width: 148px; height: 48px; justify-content: center; color: #FFF; text-align: center; font-family: Poppins; font-size: 16px; font-style: normal; font-weight: 600; line-height: 120%; text-transform: uppercase; border-radius: 50px; border: 1px solid #31DFAA; background: #282A2B; box-shadow: 0 0 7.5px 0 rgba(0, 0, 0, 0.25); transition: all 0.3s ease; } .tag-pill:hover { background: rgba(16, 255, 190, 0.15); border-color: #31DFAA; transform: translateY(-1px); } /* ===== HIGHLIGHT TEXT ===== */ .highlight-green { color: #31DFAA; font-weight: 600; } /* ===== STATS NUMBERS ===== */ .stat-number { font-size: 48px; font-weight: 800; line-height: 1; letter-spacing: -1px; background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .stat-label { font-size: 13px; color: #888; margin-top: 6px; font-weight: 500; } /* ===== DIVIDER ===== */ .section-divider { height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(16,255,190,0.2) 50%, transparent 100%); margin: 32px 0; } /* ===== RESPONSIVE ===== */ @media (max-width: 1024px) { .stat-number { font-size: 36px; } } @media (max-width: 768px) { .stat-number { font-size: 32px; } .video-card-wrapper { border-radius: 16px; } }