@import"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap";*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}section{position:relative;min-height:100vh;width:100%;background:linear-gradient(135deg,#13101b,#1e172c,#13101b);display:flex;align-items:center;justify-content:center;color:#fff;perspective:1000px;overflow:hidden}section:before,section:after,section .glow-1,section .glow-2,section .glow-3{content:"";position:absolute;border-radius:50%;opacity:.3;filter:blur(80px);z-index:0;pointer-events:none}section:before{top:10%;left:15%;width:400px;height:400px;background:radial-gradient(circle,#a255ffe6,#a255ff00 70%);animation:float 20s infinite alternate ease-in-out}section:after{bottom:10%;right:15%;width:350px;height:350px;background:radial-gradient(circle,#ba68ffd9,#ba68ff00 70%);animation:float 15s infinite alternate-reverse ease-in-out}.glow-1,.glow-2,.glow-3{position:absolute;border-radius:50%;opacity:.3;filter:blur(80px);z-index:0;pointer-events:none}.glow-1{top:35%;left:25%;width:320px;height:320px;background:radial-gradient(circle,#8a2be2e6,#8a2be200 70%);animation:float 18s infinite alternate ease-in-out}.glow-2{top:15%;right:25%;width:380px;height:380px;background:radial-gradient(circle,#7b1fa2d9,#7b1fa200 70%);animation:float 22s infinite alternate-reverse ease-in-out}.glow-3{bottom:25%;left:40%;width:300px;height:300px;background:radial-gradient(circle,#b166ffcc,#b166ff00 70%);animation:float 17s infinite alternate ease-in-out}@keyframes float{0%{transform:translate(0)}50%{transform:translate(40px,20px)}to{transform:translate(-40px,-20px)}}#card-container{position:relative;width:100%;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center}.container{position:relative;height:225px;width:375px;max-width:375px;max-height:225px;z-index:2;transition:transform .6s;transform-style:preserve-3d;cursor:pointer;-webkit-tap-highlight-color:transparent;transform-origin:center center;touch-action:manipulation;will-change:transform}.container.flipped{transform:rotateY(180deg)}.front-face,.back-face{position:absolute;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;border-radius:25px;transform-style:preserve-3d}.front-face{transform:rotateY(0)}.back-face{transform:rotateY(180deg)}.container:after{content:"";position:absolute;top:50%;left:50%;width:100px;height:100px;background:#ffffff4d;border-radius:50%;transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none;transition:transform .4s,opacity .4s;z-index:100}.container.tapped:after{transform:translate(-50%,-50%) scale(3);opacity:0;transition:transform .4s,opacity .4s}.container .card{position:absolute;height:100%;width:100%;padding:25px;border-radius:25px;-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px);background:#ffffff1a;box-shadow:0 25px 45px #00000040,inset 0 0 1px #fff9;border:1px solid rgba(255,255,255,.1);backface-visibility:hidden;overflow:hidden;transform-style:preserve-3d}.front-face header,.front-face .logo{display:flex;align-items:center}.front-face header{justify-content:space-between}.front-face .logo img{width:48px;margin-right:10px}h5{font-size:16px;font-weight:400}.front-face .chip{width:50px}.front-face .card-details{display:flex;margin-top:40px;align-items:flex-end;justify-content:space-between}h6{font-size:10px;font-weight:400}h5.number{font-size:18px;letter-spacing:1px}h5.name{margin-top:20px}.card.back-face{border:none;padding:15px 25px 25px;transform:rotateY(180deg) translateZ(0);transform-origin:center center}.card.back-face h6{font-size:8px}.card.back-face .magnetic-strip{position:absolute;top:40px;left:0;height:45px;width:100%;background:#000}.card.back-face .signature{display:flex;justify-content:flex-end;align-items:center;margin-top:80px;height:30px;width:85%;border-radius:6px;background:repeating-linear-gradient(#fff,#fff 3px,#efefef 0px,#efefef 9px)}.signature i{color:#000;font-size:12px;padding:4px 6px;border-radius:4px;background-color:#fff;margin-right:-30px;z-index:-1}.card.back-face h5{font-size:8px;margin-top:15px}