.statistics{ max-width:1200px; margin:auto; padding:15px 10px; display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:14px; } .stat-box{ background:rgba(255,255,255,.75); backdrop-filter:blur(12px); border-radius:16px; padding:14px 10px; text-align:center; box-shadow:0 8px 18px rgba(0,0,0,.07); transition:.35s; position:relative; overflow:hidden; } .stat-box::before{ content:''; position:absolute; width:110px; height:110px; background:linear-gradient(135deg,#4facfe,#00f2fe); border-radius:50%; top:-70px; left:-60px; opacity:.12; transition:.35s; } .stat-box:hover{ transform:translateY(-6px); box-shadow:0 12px 24px rgba(0,0,0,.12); } .stat-box:hover::before{ transform:scale(1.3); } .icon{ width:48px; height:48px; margin:auto; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; color:#fff; margin-bottom:10px; animation:float 3s ease-in-out infinite; } .icon1{background:linear-gradient(135deg,#2563eb,#60a5fa);} .icon2{background:linear-gradient(135deg,#16a34a,#4ade80);} .icon3{background:linear-gradient(135deg,#ea580c,#fb923c);} .icon4{background:linear-gradient(135deg,#7c3aed,#a855f7);} .icon5{background:linear-gradient(135deg,#dc2626,#f87171);} .number{ font-size:24px; font-weight:800; color:#0f172a; margin-bottom:4px; line-height:1; } .label{ font-size:13px; font-weight:700; color:#64748b; } @keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } } @media(max-width:768px){ .statistics{ grid-template-columns:repeat(2,1fr); gap:10px; } } @media(max-width:480px){ .statistics{ grid-template-columns:repeat(2,1fr); } .stat-box{ padding:12px 8px; } .icon{ width:42px; height:42px; font-size:18px; } .number{ font-size:21px; } .label{ font-size:12px; } }