*{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }

        html,
        body{

            width:100%;
            height:100%;
            overflow-x:hidden;
            font-family:Poppins,sans-serif;

        }

        body{

            background:#050505;

        }

        .mall-bg{

            position:relative;
            min-height:100vh;
            display:flex;
            align-items:center;
            justify-content:center;
            overflow:hidden;
            padding:40px;
            background:
            radial-gradient(circle at top left,
            #c91db5 0%,
            #8C0F7B 25%,
            #33052d 60%,
            #050505 100%);

        }
        .glow{

            position:absolute;
            border-radius:50%;
            filter:blur(180px);

        }

        .glow-left{

            width:600px;
            height:600px;

            left:-220px;
            top:-220px;

            background:rgba(140,15,123,.35);

        }

        .glow-right{

            width:700px;
            height:700px;

            right:-260px;
            bottom:-260px;

            background:rgba(140,15,123,.18);

        }
        .grid-overlay{

            position:absolute;
            inset:0;

            opacity:.05;

            background-image:

            linear-gradient(rgba(255,255,255,.15) 1px,transparent 1px),

            linear-gradient(90deg,
            rgba(255,255,255,.15) 1px,
            transparent 1px);

            background-size:55px 55px;

        }
        .login-card{

            position:relative;

            z-index:100;

            padding:40px;

            border-radius:28px;

            background:rgba(255,255,255,.07);

            backdrop-filter:blur(18px);

            border:1px solid rgba(255,255,255,.08);

            box-shadow:

            0 20px 60px rgba(0,0,0,.6),

            0 0 40px rgba(140,15,123,.25);

        }
        .login-card::before{

            content:"";

            position:absolute;

            width:250px;
            height:250px;

            left:50%;
            top:50%;

            transform:translate(-50%,-50%);

            background:

            linear-gradient(

            transparent,

            #d61cc2,

            transparent);

            animation:borderRotate 6s linear infinite;

        }

        .login-card::after{

            content:"";

            position:absolute;

            inset:2px;

            border-radius:26px;

            background:#111;

            z-index:0;

        }

        .login-card>*{

            position:relative;

            z-index:2;

        }
        .beam{

            position:absolute;

            width:220px;

            height:130vh;

            transform:rotate(25deg);

            background:

            linear-gradient(

            transparent,

            rgba(255,255,255,.06),

            transparent);

            animation:beamMove 8s linear infinite;

        }

        .beam1{

            left:-100px;

        }

        .beam2{

            left:45%;

            animation-delay:2s;

        }

        .beam3{

            right:-120px;

            animation-delay:4s;

        }
        .circle{

            position:absolute;

            border-radius:50%;

            background:#d61cc2;

            box-shadow:

            0 0 20px #d61cc2;

            animation:floatCircle linear infinite;

        }

        .c1{

            width:8px;
            height:8px;

            left:8%;

            bottom:-50px;

            animation-duration:14s;

        }

        .c2{

            width:14px;
            height:14px;

            left:22%;

            animation-duration:18s;

        }

        .c3{

            width:10px;
            height:10px;

            left:55%;

            animation-duration:16s;

        }

        .c4{

            width:18px;
            height:18px;

            right:18%;

            animation-duration:22s;

        }

        .c5{

            width:12px;
            height:12px;

            right:8%;

            animation-duration:17s;

        }
        .shopping-area{

            position:absolute;
            inset:0;

            pointer-events:none;
            overflow:hidden;

        }

        /* Common */

        .mall-icon{

            position:absolute;

            color:#c218ac;

            opacity:.15;

            text-shadow:
            0 0 18px rgba(194,24,172,.8);

            animation:floatItem linear infinite;

        }

        .mall-icon i{

            display:block;

        }
        .bag i{

            font-size:55px;

        }

        .bag1{

            left:8%;
            bottom:-120px;

            animation-duration:20s;

        }

        .bag2{

            left:82%;
            bottom:-180px;

            animation-duration:24s;
            animation-delay:5s;

        }

        .bag3{

            left:45%;
            bottom:-150px;

            animation-duration:28s;
            animation-delay:2s;

        }
        .cart i{

            font-size:65px;

        }

        .cart1{

            left:22%;
            bottom:-160px;

            animation-duration:22s;

        }

        .cart2{

            right:18%;
            bottom:-120px;

            animation-duration:26s;
            animation-delay:4s;

        }

        .gift i{

            font-size:52px;

        }

        .gift1{

            left:68%;
            bottom:-180px;

            animation-duration:23s;

        }

        .gift2{

            left:30%;
            bottom:-200px;

            animation-duration:29s;
            animation-delay:3s;

        }
        .discount{

            position:absolute;

            width:65px;
            height:65px;

            border-radius:50%;

            border:2px solid rgba(194,24,172,.35);

            display:flex;
            justify-content:center;
            align-items:center;

            color:#d81ec0;

            font-size:28px;
            font-weight:bold;

            box-shadow:
            0 0 30px rgba(194,24,172,.35);

            animation:floatItem linear infinite;

            opacity:.18;

        }

        .tag1{

            left:12%;
            bottom:-140px;

            animation-duration:21s;

        }

        .tag2{

            right:12%;
            bottom:-220px;

            animation-duration:27s;
            animation-delay:6s;

        }
        .ring{

            position:absolute;

            border:2px solid rgba(140,15,123,.22);

            border-radius:50%;

            animation:ringRotate linear infinite;

        }

        .ring1{

            width:220px;
            height:220px;

            top:10%;
            right:8%;

            animation-duration:18s;

        }

        .ring2{

            width:320px;
            height:320px;

            bottom:8%;
            left:5%;

            animation-duration:26s;
            animation-direction:reverse;

        }

        .ring3{

            width:150px;
            height:150px;

            top:42%;
            left:82%;

            animation-duration:14s;

        }
        .payment-card{

            position:absolute;

            color:#c218ac;

            font-size:48px;

            opacity:.12;

            animation:paymentFloat linear infinite;

            text-shadow:
                0 0 25px rgba(194,24,172,.8);

        }

        .card1{

            left:15%;
            bottom:-120px;

            animation-duration:18s;

        }

        .card2{

            right:25%;
            bottom:-180px;

            animation-duration:24s;
            animation-delay:5s;

        }
        .qr-payment{

            position:absolute;

            color:#e43ad0;

            font-size:46px;

            opacity:.10;

            animation:paymentFloat linear infinite;

        }

        .qr1{

            left:70%;
            bottom:-150px;

            animation-duration:22s;

        }

        .qr2{

            left:40%;
            bottom:-200px;

            animation-duration:27s;
            animation-delay:6s;

        }
        .spark{

            position:absolute;

            width:5px;
            height:5px;

            background:#fff;

            border-radius:50%;

            box-shadow:

            0 0 12px #fff,
            0 0 25px #d81ec0;

            animation:sparkle 3s infinite;

        }

        .s1{top:12%;left:10%;}
        .s2{top:18%;left:65%;animation-delay:1s;}
        .s3{top:38%;left:82%;animation-delay:2s;}
        .s4{bottom:20%;left:25%;animation-delay:.5s;}
        .s5{bottom:15%;right:18%;animation-delay:1.5s;}
        .s6{bottom:35%;right:35%;animation-delay:2.5s;}
        .trail{

            position:absolute;

            width:3px;

            height:240px;

            border-radius:20px;

            background:

            linear-gradient(

            transparent,

            rgba(255,255,255,.45),

            transparent);

            filter:blur(1px);

            opacity:.20;

            animation:trailMove linear infinite;

        }

        .trail1{

            left:18%;
            top:-250px;

            animation-duration:10s;

        }

        .trail2{

            left:55%;
            top:-250px;

            animation-duration:14s;
            animation-delay:2s;

        }

        .trail3{

            right:18%;
            top:-250px;

            animation-duration:12s;
            animation-delay:4s;

        }
        @keyframes ringRotate{

            from{

                transform:rotate(0deg);

            }

            to{

                transform:rotate(360deg);

            }

        }

        @keyframes paymentFloat{

            0%{

                transform:translateY(0) rotate(0deg);

                opacity:0;

            }

            20%{

                opacity:.15;

            }

            100%{

                transform:translateY(-120vh) rotate(360deg);

                opacity:0;

            }

        }

        @keyframes sparkle{

            0%,100%{

                opacity:.2;

                transform:scale(.8);

            }

            50%{

                opacity:1;

                transform:scale(2);

            }

        }

        @keyframes trailMove{

            from{

                transform:translateY(-100px);

            }

            to{

                transform:translateY(120vh);

            }

        }
        @keyframes floatItem{

            0%{

                transform:
                translateY(0)
                rotate(0deg);

                opacity:0;

            }

            15%{

                opacity:.18;

            }

            50%{

                opacity:.28;

            }

            100%{

                transform:
                translateY(-125vh)
                rotate(360deg);

                opacity:0;

            }

        }
        @keyframes borderRotate{

            from{

                transform:translate(-50%,-50%) rotate(0);

            }

            to{

                transform:translate(-50%,-50%) rotate(360deg);

            }

        }

        @keyframes beamMove{

            0%{

                transform:translateY(-200px) rotate(25deg);

            }

            100%{

                transform:translateY(300px) rotate(25deg);

            }

        }

        @keyframes floatCircle{

            0%{

                transform:translateY(0);

                opacity:0;

            }

            20%{

                opacity:1;

            }

            100%{

                transform:translateY(-120vh);

                opacity:0;

            }

        }