.delivery-bg{

            position:relative;

            width:100%;

            min-height:100vh;

            overflow:hidden;

            display:flex;

            justify-content:center;

            align-items:center;

            background:

            radial-gradient(circle at top,

            #9c4b2d 0%,

            #1c0f0a 45%,

            #050505 100%);

        }

        .glow{

            position:absolute;

            border-radius:50%;

            filter:blur(170px);

        }

        .glow-1{

            width:500px;

            height:500px;

            left:-200px;

            top:-180px;

            background:rgba(218,103,56,.30);

        }

        .glow-2{

            width:600px;

            height:600px;

            right:-250px;

            bottom:-250px;

            background:rgba(218,103,56,.18);

        }

        .map-grid{

            position:absolute;

            inset:0;

            opacity:.06;

            background-image:

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

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

            background-size:90px 90px;

        }

        .route-svg{

            position:absolute;

            inset:0;

            width:100%;

            height:100%;

        }
        .route{

             fill:none;

            stroke:#DA6738;

            stroke-width:5;

            stroke-linecap:round;

            stroke-dasharray:10 20;

            animation:routeMove 1.4s linear infinite;

        }

        .route2{

            opacity:.35;

            animation-duration:6s;

        }

        .pin{

            position:absolute;

            width:18px;

            height:18px;

            border-radius:50%;

            background:#DA6738;

            box-shadow:

            0 0 15px #DA6738,

            0 0 40px rgba(218,103,56,.5);

            animation:pinPulse 2.5s infinite;

        }

        .p1{

            left:14%;

            bottom:18%;

        }

        .p2{

            left:39%;

            top:48%;

        }

        .p3{

            right:24%;

            top:28%;

        }

        .p4{

            right:12%;

            bottom:22%;

        }

        .login-wrapper{

            position:relative;

            z-index:100;

            width:100%;

            max-width:430px;

        }

        .restaurant-point,
        .home-point{

            position:absolute;

            width:70px;
            height:70px;

            border-radius:50%;

            background:rgba(218,103,56,.12);

            border:2px solid #DA6738;

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

            backdrop-filter:blur(8px);

            animation:pulsePoint 2.5s infinite;

        }

        .restaurant-point{

            left:10%;
            bottom:16%;

        }

        .home-point{

            right:10%;
            top:18%;

        }

        .shop-icon,
        .home-icon{

            font-size:28px;

        }

        .scooter{

            position:absolute;

            left:8%;
            bottom:14%;

            width:120px;
            height:70px;

            z-index:50;

            animation:ride 12s linear infinite;

        }

        .bike-body{

            position:absolute;

            left:25px;
            top:28px;

            width:58px;
            height:10px;

            background:#DA6738;

            border-radius:30px;

        }

        .bike-body::before{

            content:"";

            position:absolute;

            left:8px;
            top:-12px;

            width:18px;
            height:18px;

            border-left:4px solid #DA6738;
            border-top:4px solid #DA6738;

            transform:rotate(-25deg);

        }

        .bike-body::after{

            content:"";

            position:absolute;

            right:0;
            top:-10px;

            width:20px;
            height:4px;

            background:#DA6738;

            transform:rotate(-30deg);

        }

        .front-wheel,
        .rear-wheel{

            position:absolute;

            bottom:0;

            width:24px;
            height:24px;

            border-radius:50%;

            border:4px solid #f5f5f5;

            animation:wheelSpin .7s linear infinite;

        }

        .front-wheel{

            right:8px;

        }

        .rear-wheel{

            left:12px;

        }

        .driver{

            position:absolute;

            left:45px;
            top:4px;

            width:18px;
            height:28px;

            background:#fff;

            border-radius:8px;

        }

        .helmet{

            position:absolute;

            top:-12px;
            left:0;

            width:18px;
            height:18px;

            border-radius:50%;

            background:#DA6738;

        }

        .delivery-box{

            position:absolute;

            left:72px;
            top:8px;

            width:22px;
            height:20px;

            background:#ffcf9d;

            border:2px solid #DA6738;

            border-radius:4px;

            animation:boxBounce .4s ease-in-out infinite alternate;

        }

        .headlight{

            position:absolute;

            right:-50px;
            top:28px;

            width:60px;
            height:8px;

            background:

            linear-gradient(

            to right,

            rgba(255,240,180,.9),

            transparent);

            filter:blur(4px);

        }

        .marker{

            position:absolute;

            width:72px;

            height:72px;

            display:flex;

            justify-content:center;

            align-items:center;

            z-index:20;

        }

        .restaurant-marker{

            left:10%;

            bottom:18%;

        }

        .home-marker{

            right:12%;

            top:18%;

        }

        .marker-ring{

            position:absolute;

            width:70px;

            height:70px;

            border-radius:50%;

            border:2px solid rgba(218,103,56,.45);

            animation:ringPulse 2s infinite;

        }

        .marker-icon{

            width:48px;

            height:48px;

            border-radius:50%;

            background:#111;

            color:#DA6738;

            display:flex;

            justify-content:center;

            align-items:center;

            box-shadow:

            0 0 25px rgba(218,103,56,.4);

        }

        .marker-icon svg{

            width:24px;

            height:24px;

        }
        .delivery-dot{

            position:absolute;

            left:10%;

            bottom:18%;

            width:14px;

            height:14px;

            border-radius:50%;

            background:#FFD27F;

            box-shadow:

                0 0 15px #FFD27F,

                0 0 40px #DA6738;

            animation:deliveryTravel 12s linear infinite;

        }
        @keyframes routeMove{

            from{

                stroke-dashoffset:0;

            }

            to{

                stroke-dashoffset:-60;

            }

        }
        @keyframes ringPulse{

            0%{

                transform:scale(.7);

                opacity:1;

            }

            100%{

                transform:scale(1.6);

                opacity:0;

            }

        }
        @keyframes ride{

            0%{

                left:8%;
                bottom:14%;

            }

            25%{

                left:30%;
                bottom:32%;

            }

            50%{

                left:50%;
                bottom:48%;

            }

            75%{

                left:72%;
                bottom:38%;

            }

            100%{

                left:82%;
                bottom:70%;

            }

        }

        @keyframes wheelSpin{

            from{

                transform:rotate(0deg);

            }

            to{

                transform:rotate(360deg);

            }

        }

        @keyframes boxBounce{

            from{

                transform:translateY(0);

            }

            to{

                transform:translateY(-3px);

            }

        }

        @keyframes pulsePoint{

            0%,100%{

                transform:scale(1);

            }

            50%{

                transform:scale(1.15);

            }

        }
        @keyframes moveRoute{

            from{

                stroke-dashoffset:0;

            }

            to{

                stroke-dashoffset:-80;

            }

        }

        @keyframes pinPulse{

            0%,100%{

                transform:scale(1);

            }

            50%{

                transform:scale(1.35);

            }

        }