:root{
    --purple:#8424c9;
    --purple2:#8B7CFF;
    --purple-dark:#6c20a5;
    --dark:#0E0E12;
    --lav:#F3F0FF;
    --yellow:#FFD60A;
    --border:#EDE8FF;
    --muted:#717184;
    --green-bg:#E8FFF1;
    --green-text:#065F46;
    --green:#10B981;
    --shadow:0 15px 45px rgba(16,12,40,.08);
}

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

html{
    overflow-x:hidden;
    scroll-behavior:smooth;
}

body{
    font-family:"Open Sans", sans-serif;
    background:#FFFEFB;
    color:var(--dark);
    overflow-x:hidden;
    line-height:1.5;
}

img{
    max-width:100%;
    height:auto;
}

h1,h2,h3{
    font-family:"Open Sans", sans-serif;
    letter-spacing:-0.03em;
}

.container{
    width:100%;
    max-width:1280px;
    margin:0 auto;
    padding:0 24px;
}


/* =========================================================
   BUTTONS
========================================================= */

.btn{
    border:0;
    border-radius:12px;
    padding:12px 18px;
    font-weight:700;
    font-size:14px;
    cursor:pointer;
    transition:.2s ease;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    text-decoration:none;
}

.btn:hover{
    transform:translateY(-1px);
}

.btn-primary{
    background:var(--purple);
    color:#fff;
    box-shadow:0 8px 24px rgba(90,66,255,.25);
}

.btn-primary:hover{
    background:var(--purple-dark);
}

.btn-black{
    background:var(--dark);
    color:#fff;
}

.btn-yellow{
    background:var(--yellow);
    color:var(--dark);
}


/* =========================================================
   TOP BAR
========================================================= */

.topbar{
    background:var(--green-bg);
    color:var(--green-text);
    text-align:center;
    padding:10px;
    font-size:13px;
    font-weight:600;
    position:relative;
    overflow:hidden;
}

.topbar span.dot{
    display:inline-block;
    width:8px;
    height:8px;
    background:var(--green);
    border-radius:50%;
    margin-right:8px;
    animation:pulse 2s infinite;
}

@keyframes pulse{
    0%,100%{opacity:1}
    50%{opacity:.5}
}


/* =========================================================
   HEADER
========================================================= */

.header{
    height:72px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid var(--border);

    position:sticky;
    top:0;

    background:rgba(255,255,254,.90);
    backdrop-filter:blur(20px);

    z-index:100;
}

.logo{
    display:flex;
    align-items:center;
    gap:10px;

    font-weight:800;
    font-size:22px;

    text-decoration:none;
    color:var(--dark);
}

.logo-icon{
    width:36px;
    height:36px;

    background:var(--purple);

    border-radius:10px;

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

    color:#fff;
    font-size:18px;
}

.nav{
    display:flex;
    gap:28px;
    align-items:center;
}

.nav a{
    font-size:14px;
    font-weight:500;

    color:var(--muted);

    text-decoration:none;

    transition:.2s ease;
}

.nav a:hover{
    color:var(--dark);
}


/* =========================================================
   MOBILE MENU
========================================================= */

.mobile-toggle{
    display:none;

    width:44px;
    height:44px;

    border:1px solid var(--border);

    background:#fff;

    border-radius:12px;

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

    cursor:pointer;
}

.mobile-toggle span{
    display:block;

    width:18px;
    height:2px;

    background:var(--dark);

    margin:3px 0;
}

.mobile-menu{
    position:fixed;

    inset:0;

    z-index:200;

    pointer-events:none;
}

.mobile-menu-bg{
    position:absolute;

    inset:0;

    background:rgba(0,0,0,.4);

    opacity:0;

    transition:.3s;
}

.mobile-panel{
    position:absolute;

    top:0;
    right:0;

    width:85%;
    max-width:360px;

    height:100%;

    background:#fff;

    transform:translateX(100%);

    transition:transform .4s cubic-bezier(.16,1,.3,1);

    padding:24px;

    display:flex;
    flex-direction:column;

    box-shadow:-20px 0 60px rgba(0,0,0,.15);
}

.mobile-panel a{
    font-size:18px;
    font-weight:600;

    padding:16px 0;

    border-bottom:1px solid var(--border);

    color:var(--dark);

    text-decoration:none;
}

.mobile-menu.open{
    pointer-events:auto;
}

.mobile-menu.open .mobile-menu-bg{
    opacity:1;
}

.mobile-menu.open .mobile-panel{
    transform:translateX(0);
}

/* =========================================================
   FIZZ MEE HERO
   FULL WIDTH BACKGROUND IMAGE
   IMAGE NEVER CROPPED
========================================================= */

.hero{
    position:relative;
    width:100%;
    min-height:680px;

    display:flex;
    align-items:flex-start;

    padding:80px 0 45px;

    overflow:hidden;

    background-color:#FFFEFB;

    /* IMPORTANT */
    background-image:url("<?php echo url('/');?>/public/front/banner1.png");

    background-repeat:no-repeat;

    /*
       FULL IMAGE VISIBLE
       No cropping
    */
    background-size:100% auto;

    /*
       Image starts from top
    */
    background-position:center top;
}


/* =========================================================
   HERO CONTENT
========================================================= */

.hero-content{
    position:relative;
    z-index:5;

    width:55%;
    max-width:650px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding-top:45px;
}


/* =========================================================
   HERO HEADING
========================================================= */

.hero h1{
    font-family:"Open Sans", sans-serif;

    font-size:clamp(48px,5vw,68px);

    line-height:.98;

    letter-spacing:-2.5px;

    font-weight:800;

    margin:0 0 18px;

    color:#0E0E12;
}


.hero h1 span{
    color:var(--purple);
}


/* =========================================================
   HERO PARAGRAPH
========================================================= */

.hero p{
    max-width:560px;

    color:var(--muted);

    font-size:17px;

    line-height:1.65;

    margin:0 0 25px;
}


/* =========================================================
   EYEBROW
========================================================= */

.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;

    width:max-content;

    padding:8px 13px;

    background:#F3F0FF;

    border:1px solid #DDD2FF;

    border-radius:30px;

    color:var(--purple);

    font-size:12px;

    font-weight:800;

    margin-bottom:18px;
}


/* =========================================================
   CTA
========================================================= */

.ctas{
    display:flex;
    align-items:center;
    gap:12px;

    flex-wrap:wrap;

    margin-bottom:25px;
}

.ctas .btn{
    min-height:48px;
}


/* =========================================================
   MINI STEPS
========================================================= */

.mini-steps{
    display:flex;
    align-items:center;

    gap:12px;

    max-width:520px;

    background:rgba(243,240,255,.95);

    border:1px solid var(--border);

    border-radius:16px;

    padding:14px 18px;

    margin-bottom:22px;

    backdrop-filter:blur(8px);
}


.step-item{
    display:flex;
    align-items:center;

    gap:8px;
}


.step-dot{
    width:32px;
    height:32px;

    flex-shrink:0;

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

    background:#fff;

    border:1px solid var(--border);

    border-radius:50%;

    font-size:12px;

    font-weight:700;
}


.step-line{
    flex:1;

    height:2px;

    min-width:15px;

    background:var(--border);
}


/* =========================================================
   HERO RATING
========================================================= */

.hero-rating{
    display:flex;
    align-items:center;

    gap:16px;

    flex-wrap:wrap;

    color:var(--muted);

    font-size:13px;

    font-weight:500;
}



.repair-hero {
    position: relative;
    width: 100%;
    background: #FFFEFB;
    overflow: hidden;
    line-height: 1.2;
}

/* =========================================
   IMAGE - ALWAYS CLEAR, NO CROP
========================================= */
.repair-hero-picture {
    display: block;
    width: 100%;
    line-height: 0;
    position: relative;
    z-index: 1;
}

.repair-hero-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center top;
}

/* =========================================
   CONTENT - DESKTOP
========================================= */
.repair-hero-content {
    position: absolute;
    z-index: 10;
    left: 6.5%;
    top: 50%;
    transform: translateY(-50%);
    width: 40%;
    max-width: 560px;
}

.repair-hero-top-text {
    font-family: 'Inter', sans-serif;
    font-size: 19px;
    font-weight: 400;
    color: #222;
    margin-bottom: 22px;
}

.repair-hero-top-text span {
    color: var(--purple);
    font-weight: 700;
}

.repair-hero-title {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: clamp(46px, 4.2vw, 72px);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -2.2px;
    color: #121212;
    margin-bottom: 24px;
}

.repair-hero-title .highlight {
    color: var(--purple);
}

.repair-hero-features {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 34px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.repair-hero-feature {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    white-space: nowrap;
}

.repair-hero-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 380px;
    height: 72px;
    background: var(--purple);
    color: #fff;
    text-decoration: none;
    border-radius: 14px;
    font-size: 20px;
    font-weight: 600;
    box-shadow: 0 14px 30px rgba(91, 75, 255, 0.28);
    transition: all .25s ease;
}

.repair-hero-button:hover {
    background: var(--purple-dark);
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(91, 75, 255, 0.35);
}

/* =========================================
   PURANE CONFLICT WALE HERO KO BAND
========================================= */
.hero,
.fizz-hero,
.hero-banner,
.fizz-hero-bg,
.hero-content {
    display: none !important;
    background-image: none !important;
}

/* =========================================
   TABLET - 1200px
========================================= */
@media (max-width: 1200px) {
    .repair-hero-content {
        left: 5%;
        width: 44%;
    }
    .repair-hero-top-text { 
        font-size: 17px; 
        margin-bottom: 18px;
    }
    .repair-hero-title { 
        font-size: clamp(38px, 4vw, 56px); 
        margin-bottom: 20px;
    }
    .repair-hero-features {
        gap: 16px;
        margin-bottom: 28px;
    }
    .repair-hero-button { 
        max-width: 320px; 
        height: 62px; 
        font-size: 18px; 
    }
}

/* =========================================
   MOBILE - 767px
   Content Upar Center, Image Niche Clear
========================================= */
@media (max-width: 767px) {
    .repair-hero {
        display: flex;
        flex-direction: column;
        background: #FFFEFB;
    }
    .section.lav{
        display: block!important;
    }
    .repair-hero-content {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: 100%;
        max-width: 100%;
        padding: 32px 20px 12px;
        text-align: center;
        order: 1;
    }

    .repair-hero-top-text {
        font-size: 14px;
        margin-bottom: 14px;
        text-align: center;
    }

    .repair-hero-title {
        font-size: 33px;
        line-height: 1.1;
        letter-spacing: -1px;
        margin: 0 auto 18px;
        text-align: center;
    }

    .repair-hero-features {
        justify-content: center;
        gap: 10px;
        margin-bottom: 20px;
        flex-wrap: nowrap;
        margin-top: 10px;
    }

    .repair-hero-feature {
        font-size: 10px;
    }

    .repair-hero-button {
        max-width: 220px;
        height: 48px;
        font-size: 15px;
        border-radius: 10px;
        margin: 0 auto;
    }

    .repair-hero-picture {
        order: 2;
        width: 100%;
        margin-top: 25px;
    }

    .repair-hero-image {
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: center top;
    }
}

/* =========================================
   SMALL MOBILE - 390px
========================================= */
@media (max-width: 390px) {
    .repair-hero-content {
        padding: 28px 16px 8px;
    }
    .repair-hero-title {
        font-size: 28px;
    }
    .repair-hero-features {
        gap: 8px;
        margin-top:15px;
    }
    .repair-hero-feature {
        font-size: 8.5px;
    }
    .repair-hero-button {
        max-width: 200px;
        height: 46px;
        font-size: 14px;
    }
}


/* =========================================================
   REMOVE OLD HERO IMAGE BEHAVIOUR
========================================================= */

/*
   VERY IMPORTANT:

   hero-banner ab actual image container nahi hai.
   Hero ke background mein image lagi hui hai.
*/

.hero-banner{
    display:none !important;
}


/* =========================================================
   SCOOTER TRACKING
========================================================= */

.scooter-row{
    position:relative;

    z-index:6;

    width:100%;

    margin-top:35px;
}


.delivery-card{
    width:100%;

    border:1px solid var(--border);

    border-radius:18px;

    padding:18px 22px;

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

    overflow:hidden;

    box-shadow:0 10px 35px rgba(16,12,40,.06);

    backdrop-filter:blur(12px);
}


/* =========================================================
   DELIVERY TOP
========================================================= */

.delivery-top{
    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:10px;
}


.delivery-top h3{
    margin:5px 0 2px;

    font-size:17px;

    line-height:1.2;
}


.delivery-top p{
    margin:0;

    color:var(--muted);

    font-size:12px;
}


.live-badge{
    background:#E9FBED;

    color:#16A34A;

    padding:3px 8px;

    border-radius:20px;

    font-size:9px;

    font-weight:700;
}


.pickup-time{
    text-align:right;

    flex-shrink:0;
}


.pickup-time strong{
    display:block;

    font-size:18px;

    line-height:1;
}


.pickup-time span{
    font-size:10px;

    color:var(--muted);
}



/* =========================================================
   FIZZ MEE HERO
========================================================= */

.fizz-hero{
    position:relative;

    width:100%;

    /*
       Desktop screenshot ratio approximately:
       2048 x 770
    */

    aspect-ratio:2048 / 770;

    min-height:650px;

    overflow:hidden;

    background:#f5f5f7;
}


/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.fizz-hero-bg{

    position:absolute;

    inset:0;

    z-index:1;

    background-image:url("<?php echo url('/');?>/public/front/banner1.png");

    background-repeat:no-repeat;

    /*
       VERY IMPORTANT

       Image ko stretch/crop nahi karna.
    */

    background-size:100% 100%;

    background-position:center center;
}


/* =========================================================
   CONTENT CONTAINER
========================================================= */

.fizz-hero-container{

    position:relative;

    z-index:5;

    width:100%;

    max-width:1280px;

    height:100%;

    margin:0 auto;

    padding:0 30px;
}


/* =========================================================
   CONTENT
========================================================= */

.fizz-hero-content{

    position:absolute;

    left:30px;

    top:50%;

    transform:translateY(-50%);

    width:48%;

    max-width:600px;

}


/* =========================================================
   EYEBROW
========================================================= */

.fizz-hero-eyebrow{

    font-family:"Inter",sans-serif;

    font-size:16px;

    font-weight:500;

    color:#26262b;

    margin-bottom:20px;
}

.fizz-hero-eyebrow strong{

    color:#5b45ff;

    font-weight:700;
}


/* =========================================================
   HEADING
========================================================= */

.fizz-hero-content h1{

    margin:0;

    padding:0;

    font-family:"Space Grotesk",Inter,sans-serif;

    font-size:clamp(48px,4.2vw,70px);

    line-height:1.03;

    letter-spacing:-2.8px;

    font-weight:700;

    color:#222226;
}


/* PURPLE WORDS */

.fizz-hero-content h1 span{

    color:#5b45ff;
}


/* =========================================================
   FEATURES
========================================================= */

.fizz-hero-features{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:18px;

    margin-top:22px;

    margin-bottom:25px;
}


.fizz-hero-features span{

    font-family:"Inter",sans-serif;

    font-size:12px;

    color:#85858d;

    white-space:nowrap;
}


/* =========================================================
   BUTTON
========================================================= */

.fizz-hero-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:395px;

    max-width:100%;

    height:82px;

    border-radius:14px;

    background:#5b45ff;

    color:#fff;

    text-decoration:none;

    font-family:"Inter",sans-serif;

    font-size:22px;

    font-weight:500;

    box-shadow:
        0 12px 30px rgba(91,69,255,.25);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


.fizz-hero-btn:hover{

    background:#4935e8;

    transform:translateY(-2px);

    box-shadow:
        0 16px 35px rgba(91,69,255,.32);
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media(min-width:1600px){

    .fizz-hero-content{

        left:5%;
    }

    .fizz-hero-content h1{

        font-size:72px;

        letter-spacing:-3px;
    }

    .fizz-hero-eyebrow{

        font-size:17px;
    }

}


/* =========================================================
   LAPTOP
========================================================= */

@media(max-width:1300px){

    .fizz-hero{

        min-height:580px;
    }

    .fizz-hero-container{

        padding:0 24px;
    }

    .fizz-hero-content{

        left:24px;

        width:49%;
    }

    .fizz-hero-content h1{

        font-size:52px;

        letter-spacing:-2px;
    }

    .fizz-hero-btn{

        width:360px;

        height:68px;

        font-size:19px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:991px){

    .fizz-hero{

        /*
           Desktop background still maintained
        */

        aspect-ratio:auto;

        min-height:560px;
    }

    .fizz-hero-content{

        width:50%;

        left:20px;
    }

    .fizz-hero-content h1{

        font-size:45px;

        line-height:1.02;
    }

    .fizz-hero-eyebrow{

        font-size:14px;

        margin-bottom:15px;
    }

    .fizz-hero-features{

        gap:10px;

        margin-top:17px;
    }

    .fizz-hero-features span{

        font-size:10px;
    }

    .fizz-hero-btn{

        width:300px;

        height:58px;

        font-size:17px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767px){

    .fizz-hero{

        /*
           MOBILE IMPORTANT

           Ab desktop image ko simply crop nahi karna.

           Hero ki height manually set karenge.
        */

        width:100%;

        min-height:616px;

        height:616px;

        aspect-ratio:auto;

        background:#f5f5f7;
    }


    /* =====================================================
       MOBILE BACKGROUND
    ===================================================== */

    .fizz-hero-bg{

        /*
           Image full width mein rahegi.

           Height automatic proportion maintain karegi.
        */

        background-size:100% auto;

        background-position:center top;

        background-repeat:no-repeat;
    }


    /* =====================================================
       MOBILE CONTENT
    ===================================================== */

    .fizz-hero-container{

        height:100%;

        padding:0 14px;

        max-width:none;
    }


    .fizz-hero-content{

        position:absolute;

        top:0;

        left:0;

        transform:none;

        width:100%;

        max-width:none;

        padding:32px 18px 0;

        text-align:center;
    }


    /* =====================================================
       MOBILE EYEBROW
    ===================================================== */

    .fizz-hero-eyebrow{

        font-size:14px;

        margin-bottom:17px;
    }


    /* =====================================================
       MOBILE HEADING
    ===================================================== */

    .fizz-hero-content h1{

        font-size:32px;

        line-height:1.08;

        letter-spacing:-1.2px;

        font-weight:700;
    }


    /* =====================================================
       MOBILE FEATURES
    ===================================================== */

    .fizz-hero-features{

        justify-content:center;

        gap:10px;

        margin-top:15px;

        margin-bottom:21px;
    }


    .fizz-hero-features span{

        font-size:9px;
    }


    /* =====================================================
       MOBILE BUTTON
    ===================================================== */

    .fizz-hero-btn{

        width:220px;

        height:48px;

        border-radius:10px;

        font-size:15px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:480px){

    .fizz-hero{

        /*
           Screenshot jaisa mobile height
        */

        height:616px;

        min-height:616px;
    }


    .fizz-hero-content{

        padding:
            31px
            14px
            0;
    }


    .fizz-hero-eyebrow{

        font-size:14px;

        margin-bottom:17px;
    }


    .fizz-hero-content h1{

        font-size:31px;

        line-height:1.08;

        letter-spacing:-1.1px;
    }


    .fizz-hero-features{

        gap:9px;

        margin-top:14px;

        margin-bottom:20px;
    }


    .fizz-hero-features span{

        font-size:8.5px;
    }


    .fizz-hero-btn{

        width:220px;

        height:48px;

        font-size:15px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media(max-width:380px){

    .fizz-hero{

        height:570px;

        min-height:570px;
    }


    .fizz-hero-content h1{

        font-size:28px;
    }


    .fizz-hero-eyebrow{

        font-size:12px;
    }


    .fizz-hero-features span{

        font-size:8px;
    }


    .fizz-hero-btn{

        width:200px;

        height:44px;

        font-size:14px;
    }

}
/* =========================================================
   ROAD
========================================================= */

.road{
    height:75px;

    position:relative;

    display:flex;
    align-items:center;

    width:100%;
}


.road-line{
    position:absolute;

    left:7%;
    right:7%;

    height:3px;

    background:#E5E7EB;

    border-radius:20px;
}


.location{
    position:absolute;

    top:50%;

    transform:translateY(-50%);

    text-align:center;

    z-index:2;
}


.location span{
    position:absolute;

    top:24px;
    left:50%;

    transform:translateX(-50%);

    white-space:nowrap;

    font-size:10px;

    font-weight:600;

    color:#555;
}


.start{
    left:7%;
}


.middle{
    left:50%;
}


.end{
    right:7%;
}


.pin{
    width:12px;
    height:12px;

    background:#111;

    border:3px solid #fff;

    border-radius:50%;

    box-shadow:0 0 0 1px #111;
}


/* =========================================================
   SCOOTER
========================================================= */

.scooter{
    position:absolute;

    top:50%;
    left:7%;

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

    animation:ride 8s linear infinite;

    z-index:5;
}


.scooter-icon{
    font-size:28px;

    display:inline-block;

    filter:drop-shadow(
        0 4px 5px rgba(0,0,0,.12)
    );
}


.scooter-tooltip{
    position:absolute;

    bottom:32px;
    left:50%;

    transform:translateX(-50%);

    background:#111;

    color:#fff;

    padding:5px 8px;

    border-radius:6px;

    font-size:9px;

    white-space:nowrap;
}


@keyframes ride{

    0%{
        left:7%;
    }

    45%{
        left:50%;
    }

    100%{
        left:93%;
    }

}


/* =========================================================
   DELIVERY STATUS
========================================================= */

.delivery-status{
    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:8px;

    margin-top:8px;
}


.delivery-status div{
    background:#F8FAFC;

    padding:9px 8px;

    border-radius:10px;

    text-align:center;
}


.delivery-status strong{
    display:block;

    font-size:12px;

    line-height:1.2;
}


.delivery-status span{
    font-size:9px;

    color:var(--muted);
}


/* =========================================================
   DESKTOP LARGE
========================================================= */

@media(min-width:1400px){

    .hero{
        min-height:720px;

        background-size:100% auto;

        padding-top:95px;
    }

    .hero-content{
        width:54%;

        padding-top:50px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1100px){

    .hero{
        min-height:620px;

        padding-top:65px;

        background-size:100% auto;
    }

    .hero-content{
        width:58%;

        padding-top:35px;
    }

    .hero h1{
        font-size:52px;
    }

    .hero p{
        font-size:15px;
    }

}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media(max-width:900px){

    .hero{

        /*
           IMPORTANT:

           Ab image right side nahi hogi.
           Poora image hero ka background hoga.
        */

        display:block;

        width:100%;

        /*
           Image ki original ratio maintain
        */
        background-size:100% auto;

        background-position:center top;

        background-repeat:no-repeat;

        /*
           Hero ki height image ke neeche tak
        */
        min-height:720px;

        padding:40px 16px 45px;

        overflow:hidden;
    }


    .hero-content{

        width:100%;

        max-width:650px;

        padding-top:10px;

        position:relative;

        z-index:5;
    }


    .hero h1{

        font-size:clamp(40px,9vw,52px);

        line-height:.96;

        letter-spacing:-1.8px;

        max-width:600px;
    }


    .hero p{

        max-width:520px;

        font-size:15px;

        line-height:1.55;
    }


    /*
       Tracking image ke baad aaye
    */

    .scooter-row{

        margin-top:300px;

        position:relative;

        z-index:10;
    }


    .hero-banner{
        display:none !important;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:650px){

    .hero{

        /*
           Mobile par image ko width ke according
           scale karo.
           
           NO object-fit
           NO crop
        */

        background-size:100% auto;

        background-position:center top;

        background-repeat:no-repeat;

        /*
           Content upar
           image ka blank area uske neeche
           actual people uske baad
        */

        min-height:690px;

        padding:32px 14px 35px;
    }


    .hero-content{

        width:100%;

        padding-top:0;

    }


    .eyebrow{

        font-size:10px;

        padding:7px 11px;

        margin-bottom:15px;
    }


    .hero h1{

        font-size:38px;

        line-height:.98;

        letter-spacing:-1.3px;

        margin-bottom:14px;
    }


    .hero p{

        font-size:14px;

        line-height:1.55;

        max-width:100%;

        margin-bottom:18px;
    }


    /*
       Mobile par CTA agar chahiye
    */

    .ctas{

        display:none;
    }


    .mini-steps{

        display:none;
    }


    .hero-rating{

        display:none;
    }


    /*
       IMAGE KE PEOPLE / MAIN IMAGE
       content ke neeche visible rahegi

       Isliye tracking ko fixed large margin
       nahi dena hai.
    */

    .scooter-row{

        width:100%;

        margin-top:300px;
    }


    .delivery-card{

        padding:14px;

        border-radius:16px;
    }


    .delivery-top{

        align-items:flex-start;

        gap:10px;
    }


    .delivery-top h3{

        font-size:14px;
    }


    .delivery-top p{

        font-size:10px;
    }


    .pickup-time strong{

        font-size:15px;
    }


    .road{

        height:62px;
    }


    .scooter-icon{

        font-size:23px;
    }


    .location span{

        font-size:8px;
    }


    .delivery-status div{

        padding:8px 4px;
    }


    .delivery-status strong{

        font-size:10px;
    }


    .delivery-status span{

        font-size:8px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:480px){

    .hero{

        /*
           Full image width maintain
        */

        background-size:100% auto;

        background-position:center top;

        min-height:650px;

        padding:30px 14px 30px;
    }


    .hero h1{

        font-size:36px;

        line-height:.98;
    }


    .hero p{

        font-size:13px;

        line-height:1.5;
    }


    /*
       Image ke lower part ke liye
    */

    .scooter-row{

        margin-top:270px;
    }


    .delivery-card{

        padding:12px;

        border-radius:15px;
    }


    .delivery-top h3{

        font-size:13px;
    }


    .delivery-top p{

        font-size:9px;
    }


    .pickup-time strong{

        font-size:14px;
    }


    .road{

        height:58px;
    }


    .scooter-icon{

        font-size:21px;
    }

}


/* =========================================================
   DELIVERY TOP
========================================================= */

.delivery-top{
    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:10px;
}

.delivery-top h3{
    margin:5px 0 2px;

    font-size:17px;

    line-height:1.2;
}

.delivery-top p{
    margin:0;

    color:var(--muted);

    font-size:12px;
}

.live-badge{
    background:#e9fbed;

    color:#16a34a;

    padding:3px 8px;

    border-radius:20px;

    font-size:9px;

    font-weight:700;
}

.pickup-time{
    text-align:right;

    flex-shrink:0;
}

.pickup-time strong{
    display:block;

    font-size:18px;

    line-height:1;
}

.pickup-time span{
    font-size:10px;

    color:var(--muted);
}


/* =========================================================
   ROAD
========================================================= */

.road{
    height:75px;

    position:relative;

    display:flex;

    align-items:center;

    width:100%;
}

.road-line{
    position:absolute;

    left:7%;
    right:7%;

    height:3px;

    background:#e5e7eb;

    border-radius:20px;
}

.location{
    position:absolute;

    top:50%;

    transform:translateY(-50%);

    text-align:center;

    z-index:2;
}

.location span{
    position:absolute;

    top:24px;

    left:50%;

    transform:translateX(-50%);

    white-space:nowrap;

    font-size:10px;

    font-weight:600;

    color:#555;
}

.start{
    left:7%;
}

.middle{
    left:50%;
}

.end{
    right:7%;
}

.pin{
    width:12px;

    height:12px;

    background:#111;

    border:3px solid #fff;

    border-radius:50%;

    box-shadow:0 0 0 1px #111;
}


/* =========================================================
   SCOOTER
========================================================= */

.scooter{
    position:absolute;

    top:50%;

    left:7%;

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

    animation:ride 8s linear infinite;

    z-index:5;
}

.scooter-icon{
    font-size:28px;

    display:inline-block;

    filter:drop-shadow(
        0 4px 5px rgba(0,0,0,.12)
    );
}

.scooter-tooltip{
    position:absolute;

    bottom:32px;

    left:50%;

    transform:translateX(-50%);

    background:#111;

    color:#fff;

    padding:5px 8px;

    border-radius:6px;

    font-size:9px;

    white-space:nowrap;
}

@keyframes ride{

    0%{
        left:7%;
    }

    45%{
        left:50%;
    }

    100%{
        left:93%;
    }
}


/* =========================================================
   DELIVERY STATUS
========================================================= */

.delivery-status{
    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:8px;

    margin-top:8px;
}

.delivery-status div{
    background:#f8fafc;

    padding:9px 8px;

    border-radius:10px;

    text-align:center;
}

.delivery-status strong{
    display:block;

    font-size:12px;

    line-height:1.2;
}

.delivery-status span{
    font-size:9px;

    color:var(--muted);
}


/* =========================================================
   MARQUEE
========================================================= */

.marquee{
    background:var(--purple);

    color:#fff;

    padding:16px 0;

    overflow:hidden;

    white-space:nowrap;

    font-weight:700;

    font-size:14px;

    letter-spacing:.1em;
}

.marquee-track{
    display:inline-flex;

    animation:marq 30s linear infinite;

    gap:40px;
}

@keyframes marq{
    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }
}


/* =========================================================
   GENERAL SECTION
========================================================= */

.section{
    padding:100px 0;
}

.section.lav{
    background:#FAF9FF;
    display:none;
}

.h2{
    font-size:48px;

    line-height:1;

    font-weight:800;

    text-align:center;

    margin-bottom:12px;
}

.sub{
    text-align:center;

    color:var(--muted);

    font-size:18px;

    margin-bottom:48px;
}


/* =========================================================
   BENTO
========================================================= */

.bento{
    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:16px;
}

.bento-card{
    background:#fff;

    border:1px solid var(--border);

    border-radius:20px;

    padding:24px;

    transition:all .3s;

    cursor:pointer;

    min-height:140px;
}

.bento-card:hover{
    background:var(--purple);

    color:#fff;

    transform:translateY(-6px);

    box-shadow:0 20px 40px rgba(90,66,255,.15);
}

.bento-card .icon{
    width:48px;

    height:48px;

    background:var(--lav);

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    margin-bottom:16px;
}

.bento-card:hover .icon{
    background:rgba(255,255,255,.15);
}


/* =========================================================
   HOW IT WORKS
========================================================= */

.how-steps{
    display:flex;

    justify-content:space-between;

    gap:20px;

    max-width:1000px;

    margin:0 auto;

    position:relative;
}

.how-steps::before{
    content:'';

    position:absolute;

    top:24px;

    left:10%;
    right:10%;

    height:2px;

    background:var(--border);

    z-index:0;
}

.h-step{
    text-align:center;

    flex:1;

    position:relative;

    z-index:1;
}

.h-num{
    width:48px;

    height:48px;

    background:var(--lav);

    border:2px solid #fff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:800;

    margin:0 auto 12px;

    box-shadow:0 4px 12px rgba(0,0,0,.06);
}


/* =========================================================
   DEVICE SECTION
========================================================= */

.device-section{
    padding:90px 0;

    background:#fff;
}

.device-hero{
    display:grid;

    grid-template-columns:1fr .95fr;

    gap:50px;

    align-items:stretch;

    margin-bottom:45px;
}

.device-hero-content{
    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:20px 0;
}

.device-header{
    max-width:650px;
}

.device-header h2{
    font-size:clamp(38px,4vw,58px);

    line-height:1.05;

    letter-spacing:-2px;

    margin:0 0 18px;

    color:#0e0e12;

    font-weight:800;
}

.device-header h2 span{
    color:var(--purple);
}

.device-header p{
    font-size:17px;

    line-height:1.7;

    color:var(--muted);

    max-width:580px;

    margin:0;
}


/* =========================================================
   DEVICE SWITCH
========================================================= */

.device-switch{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:14px;

    margin-top:32px;

    max-width:650px;
}

.device-tab{
    position:relative;

    display:flex;

    align-items:center;

    gap:14px;

    width:100%;

    border:1px solid var(--border);

    background:#fff;

    border-radius:18px;

    padding:17px 18px;

    text-align:left;

    cursor:pointer;

    transition:all .25s ease;
}

.device-tab:hover{
    transform:translateY(-2px);

    border-color:#cdb6f8;
}

.device-tab.active{
    background:#f3f0ff;

    border-color:var(--purple);

    box-shadow:0 10px 30px rgba(132,36,201,.10);
}

.device-tab-icon{
    width:44px;

    height:44px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fff;

    border-radius:12px;

    font-size:23px;

    flex-shrink:0;
}

.device-tab strong{
    display:block;

    font-size:15px;

    color:#0e0e12;

    margin-bottom:4px;
}

.device-tab small{
    display:block;

    color:#717184;

    font-size:12px;
}

.device-arrow{
    margin-left:auto;

    font-size:20px;

    color:var(--purple);

    transition:transform .25s ease;
}

.device-tab:hover .device-arrow,
.device-tab.active .device-arrow{
    transform:translateX(4px);
}


/* =========================================================
   DEVICE TEAM IMAGE
========================================================= */

.device-team-image{
    position:relative;

    min-height:390px;

    border-radius:30px;

    overflow:hidden;

    background:#f3f0ff;
}

.device-team-image img{
    width:100%;

    height:100%;

    min-height:390px;

    display:block;

    object-fit:cover;

    object-position:center;

    transition:transform .5s ease;
}

.device-team-image:hover img{
    transform:scale(1.03);
}

.team-image-overlay{
    position:absolute;

    inset:0;

    background:linear-gradient(
        180deg,
        rgba(14,14,18,0) 45%,
        rgba(14,14,18,.65) 100%
    );

    pointer-events:none;
}

.team-badge{
    position:absolute;

    left:22px;

    bottom:22px;

    display:flex;

    align-items:center;

    gap:11px;

    padding:12px 16px;

    border-radius:15px;

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

    backdrop-filter:blur(10px);

    box-shadow:0 12px 35px rgba(0,0,0,.15);
}

.team-badge-icon{
    width:32px;

    height:32px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#e8fff1;

    color:#065f46;

    border-radius:50%;

    font-weight:800;
}

.team-badge strong{
    display:block;

    font-size:13px;
}

.team-badge small{
    display:block;

    font-size:11px;

    color:var(--muted);

    margin-top:2px;
}


/* =========================================================
   DEVICE CONTENT
========================================================= */

.device-content{
    display:none;

    background:#FAF9FF;

    border:1px solid var(--border);

    border-radius:28px;

    padding:35px;
}

.device-content.active{
    display:block;

    animation:deviceFade .3s ease;
}

@keyframes deviceFade{
    from{
        opacity:0;

        transform:translateY(8px);
    }

    to{
        opacity:1;

        transform:translateY(0);
    }
}

.device-content-header{
    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

    margin-bottom:25px;
}

.small-label{
    display:inline-block;

    font-size:12px;

    font-weight:800;

    letter-spacing:.8px;

    color:var(--purple);

    margin-bottom:8px;
}

.device-content-header h3{
    font-size:30px;

    line-height:1.2;

    margin:0 0 8px;
}

.device-content-header h3 span{
    color:var(--purple);
}

.device-content-header p{
    margin:0;

    color:var(--muted);

    line-height:1.6;
}


/* =========================================================
   SERVICE MINI GRID
========================================================= */

.service-mini-grid{
    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:14px;
}

.service-mini{
    display:block;

    padding:20px;

    border:1px solid var(--border);

    border-radius:16px;

    text-decoration:none;

    background:#fff;

    transition:all .25s ease;
}

.service-mini:hover{
    transform:translateY(-3px);

    border-color:#cdb6f8;

    box-shadow:0 12px 30px rgba(132,36,201,.08);
}

.service-mini > div{
    font-size:25px;

    margin-bottom:12px;
}

.service-mini strong{
    display:block;

    color:#0e0e12;

    font-size:14px;

    margin-bottom:5px;
}

.service-mini span{
    display:block;

    color:#717184;

    font-size:12px;

    line-height:1.4;
}


/* =========================================================
   BRANDS
========================================================= */

.brand-grid{
    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:14px;
}

.brand-card{
    background:#fff;

    border:1px solid var(--border);

    border-radius:18px;

    padding:25px 18px;

    text-align:center;

    transition:.3s;
}

.brand-card:hover{
    transform:translateY(-5px);

    border-color:#cdb6f8;

    box-shadow:0 15px 35px rgba(90,66,255,.12);
}

.brand-logo{
    height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:21px;

    font-weight:800;

    letter-spacing:-1px;

    margin-bottom:12px;
}

.brand-logo.apple{
    font-size:40px;
}

.brand-card span{
    font-size:13px;

    color:var(--muted);

    font-weight:600;
}


/* =========================================================
   REPAIR GRID
========================================================= */

.repair-grid{
    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:14px;
}

.repair-card{
    display:grid;

    grid-template-columns:52px 1fr auto;

    align-items:center;

    gap:15px;

    padding:20px;

    background:#fff;

    border:1px solid var(--border);

    border-radius:18px;

    transition:.3s;
}

.repair-card:hover{
    transform:translateY(-4px);

    box-shadow:0 15px 35px rgba(0,0,0,.07);

    border-color:#cdb6f8;
}

.repair-icon{
    width:52px;

    height:52px;

    border-radius:14px;

    background:var(--lav);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:25px;
}

.repair-card h3{
    font-size:15px;

    margin-bottom:4px;
}

.repair-card p{
    font-size:12px;

    color:var(--muted);
}

.repair-arrow{
    font-size:22px;

    color:var(--purple);
}


/* =========================================================
   WHY
========================================================= */

.why-grid{
    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:16px;
}

.why-card{
    background:#fff;

    border:1px solid var(--border);

    border-radius:20px;

    padding:26px;

    position:relative;

    overflow:hidden;

    transition:.3s;
}

.why-card:hover{
    transform:translateY(-5px);

    box-shadow:0 18px 40px rgba(90,66,255,.1);
}

.why-number{
    position:absolute;

    right:18px;

    top:15px;

    color:#e8e4ff;

    font-size:42px;

    font-weight:800;
}

.why-icon{
    font-size:28px;

    margin-bottom:18px;
}

.why-card h3{
    font-size:17px;

    margin-bottom:8px;
}

.why-card p{
    color:var(--muted);

    font-size:13px;
}


/* =========================================================
   PRICE
========================================================= */

.price-header{
    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;

    margin-bottom:35px;
}

.price-header h2{
    font-family:'Space Grotesk';

    font-size:44px;

    line-height:1;

    max-width:600px;

    margin-top:12px;
}

.price-header p{
    color:var(--muted);

    margin-top:14px;

    max-width:600px;
}

.price-grid{
    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:14px;
}

.price-card{
    background:#fff;

    border:1px solid var(--border);

    border-radius:20px;

    padding:22px;
}

.price-icon{
    font-size:25px;

    margin-bottom:15px;
}

.price-card h3{
    font-size:14px;

    margin-bottom:12px;
}

.price-card strong{
    display:block;

    font-family:'Space Grotesk';

    font-size:25px;
}

.price-card span{
    font-size:11px;

    color:var(--muted);
}


/* =========================================================
   BEFORE AFTER
========================================================= */

.before-after{
    display:grid;

    grid-template-columns:1fr 80px 1fr;

    align-items:center;

    gap:20px;

    max-width:900px;

    margin:auto;
}

.repair-stage{
    background:#fff;

    border:1px solid var(--border);

    border-radius:24px;

    padding:25px;

    text-align:center;
}

.stage-label{
    display:inline-block;

    padding:6px 12px;

    border-radius:100px;

    background:var(--lav);

    color:var(--purple);

    font-size:11px;

    font-weight:800;

    margin-bottom:20px;
}

.fake-laptop{
    background:#222;

    padding:12px;

    border-radius:15px;

    margin-bottom:18px;
}

.screen{
    height:130px;

    border-radius:8px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:800;

    font-size:13px;
}

.cracked-screen{
    background:#555;

    color:#fff;
}

.working-screen{
    background:var(--purple);

    color:#fff;
}

.keyboard{
    height:30px;

    background:#111;

    margin-top:8px;

    border-radius:5px;
}

.repair-stage h3{
    font-size:17px;

    margin-bottom:5px;
}

.repair-stage p{
    font-size:12px;

    color:var(--muted);
}

.stage-arrow{
    width:60px;

    height:60px;

    border-radius:50%;

    background:var(--yellow);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    font-weight:800;
}


/* =========================================================
   SERVICE AREA
========================================================= */

.area-section{
    display:grid;

    grid-template-columns:.8fr 1.2fr;

    gap:60px;

    align-items:center;
}

.area-section h2{
    font-family:'Space Grotesk';

    font-size:44px;

    line-height:1;

    margin:15px 0;
}

.area-section p{
    color:var(--muted);

    max-width:450px;
}

.area-list{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;
}

.area-list a{
    background:var(--lav);

    color:var(--dark);

    padding:14px 16px;

    border-radius:12px;

    text-decoration:none;

    font-size:13px;

    font-weight:600;

    transition:.2s;
}

.area-list a:hover{
    background:var(--purple);

    color:#fff;
}


/* =========================================================
   BOOKING
========================================================= */

.booking-section{
    padding:0px 0 0px;

   
}

.booking-box{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    background:linear-gradient(
        135deg,
        #191820,
        #242038
    );

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

    border-radius:30px;

    padding:45px;

    color:#fff;
}

.booking-badge{
    display:inline-block;

    background:var(--yellow);

    color:var(--dark);

    padding:8px 13px;

    border-radius:100px;

    font-size:11px;

    font-weight:800;
}

.booking-content h2{
    font-family:'Space Grotesk';

    font-size:48px;

    line-height:1;

    margin:20px 0;
}

.booking-content h2 span{
    color:var(--purple2);
}

.booking-content p{
    color:rgba(255,255,255,.65);

    max-width:480px;
}

.booking-points{
    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:25px;
}

.booking-points span{
    background:rgba(255,255,255,.07);

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

    padding:9px 12px;

    border-radius:10px;

    font-size:12px;
}

.booking-form{
    background:#fff;

    color:var(--dark);

    border-radius:22px;

    padding:24px;
}

.form-group{
    margin-bottom:14px;
}

.form-group label{
    display:block;

    font-size:12px;

    font-weight:700;

    margin-bottom:6px;
}

.form-group input,
.form-group select,
.form-group textarea{
    width:100%;

    border:1px solid #e4e0ef;

    background:#faf9ff;

    border-radius:10px;

    padding:12px;

    font-family:inherit;

    font-size:13px;

    outline:none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    border-color:var(--purple);
}

.form-row{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;
}

.booking-btn{
    width:100%;

    justify-content:center;

    margin-top:5px;
}

.form-note{
    text-align:center;

    font-size:10px;

    color:var(--muted);

    margin-top:10px;
}


/* =========================================================
   FAQ
========================================================= */

.faq-list{
    max-width:850px;

    margin:auto;
}

.faq-item{
    background:#fff;

    border:1px solid var(--border);

    border-radius:15px;

    margin-bottom:10px;

    overflow:hidden;
}

.faq-item summary{
    list-style:none;

    cursor:pointer;

    padding:19px 20px;

    font-size:14px;

    font-weight:700;

    display:flex;

    justify-content:space-between;

    align-items:center;
}

.faq-item summary::-webkit-details-marker{
    display:none;
}

.faq-item summary span{
    color:var(--purple);

    font-size:22px;
}

.faq-item p{
    padding:0 20px 20px;

    color:var(--muted);

    font-size:13px;

    line-height:1.6;
}


/* =========================================================
   REPARA STANDARD
========================================================= */


/* =========================================================
   FOOTER
========================================================= */

.footer{
    background:var(--purple);

    color:#fff;

    padding:80px 0 40px;

    border-radius:32px 32px 0 0;

    margin-top:80px;
}

.footer a{
    color:rgba(255,255,255,.8);

    text-decoration:none;

    font-size:14px;

    line-height:2;
}

.footer a:hover{
    color:#fff;
}


/* =========================================================
   REVEAL
========================================================= */

.reveal{
    opacity:0;

    transform:translateY(24px);

    transition:all .8s cubic-bezier(.16,1,.3,1);
}

.reveal.in{
    opacity:1;

    transform:translateY(0);
}


/* =========================================================
   PROGRESS
========================================================= */

.progress-bar{
    position:fixed;

    top:0;
    left:0;

    height:3px;

    background:var(--purple);

    width:0%;

    z-index:999;

    transition:width .1s;
}


/* =========================================================
   BOOKING HERO
========================================================= */

.booking-hero{
    background:
        linear-gradient(
            135deg,
            #FAF8FF 0%,
            #F2ECFF 55%,
            #fff 100%
        );

    padding:54px 0 30px;
}

.hero-inner{
    text-align:center;

    max-width:780px;

    margin:auto;
}

.booking-hero h1{
    font-family:"Space Grotesk",Inter,sans-serif;

    font-size:52px;

    line-height:1.02;

    margin:17px 0 14px;

    font-weight:700;

    letter-spacing:-1.8px;
}

.gradient{
    color:var(--purple);
}

.hero-inner p{
    color:var(--muted);

    font-size:16px;
}


/* =========================================================
   STEPPER
========================================================= */

.stepper-wrap{
    padding:20px 0 34px;

    background:
        linear-gradient(
            135deg,
            #FAF8FF,
            #F2ECFF
        );
}

.stepper{
    max-width:950px;

    margin:auto;

    background:#fff;

    border:1px solid var(--border);

    border-radius:18px;

    padding:17px 22px;

    display:flex;

    align-items:center;

    box-shadow:0 8px 30px rgba(50,20,100,.05);
}

.step{
    display:flex;

    align-items:center;

    gap:9px;

    min-width:max-content;
}

.step-num{
    width:31px;

    height:31px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#F0EDF5;

    color:#777;

    font-size:12px;

    font-weight:800;

    border:1px solid #E1DCEB;
}

.step-label{
    font-size:12px;

    font-weight:700;

    color:#8A8790;
}

.step.active .step-num,
.step.done .step-num{
    background:var(--purple);

    color:#fff;

    border-color:var(--purple);
}

.step.active .step-label,
.step.done .step-label{
    color:var(--dark);
}

.step.done .step-num::after{
    content:"✓";
}

.step.done .step-num{
    font-size:0;
}

.step-line{
    height:1px;

    background:var(--border);

    flex:1;

    margin:0 12px;
}


/* =========================================================
   BOOKING AREA
========================================================= */

.booking-area{
    padding:42px 0 80px;

    background:#fff;
}

.layout{
    display:grid;

    grid-template-columns:minmax(0,1fr) 330px;

    gap:28px;

    align-items:start;
}

.panel{
    background:#fff;

    border:1px solid var(--border);

    border-radius:24px;

    box-shadow:var(--shadow);

    padding:30px;
}

.panel-head{
    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:15px;

    margin-bottom:26px;
}

.panel-head h2{
    font-family:"Space Grotesk",Inter,sans-serif;

    font-size:29px;

    line-height:1.1;
}

.panel-head p{
    font-size:13px;

    color:var(--muted);

    margin-top:6px;
}

.back-btn{
    background:#fff;

    border:1px solid var(--border);

    border-radius:11px;

    padding:9px 13px;

    font-size:12px;

    font-weight:700;

    color:var(--dark);

    display:none;
}

.back-btn.show{
    display:block;
}


/* =========================================================
   SELECTION
========================================================= */

.selection-grid{
    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:16px;
}

.choice{
    position:relative;

    background:#fff;

    border:1.5px solid var(--border);

    border-radius:18px;

    padding:22px;

    text-align:left;

    min-height:142px;

    transition:.2s ease;
}

.choice:hover{
    border-color:#C7B4F4;

    transform:translateY(-2px);

    box-shadow:0 10px 30px rgba(108,43,217,.08);
}

.choice.selected{
    border-color:var(--purple);

    background:var(--lav);

    box-shadow:0 0 0 3px rgba(108,43,217,.08);
}

.choice-check{
    position:absolute;

    right:14px;

    top:14px;

    width:23px;

    height:23px;

    border-radius:50%;

    border:1px solid #DDD8E7;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:11px;

    color:#fff;
}

.choice.selected .choice-check{
    background:var(--purple);

    border-color:var(--purple);
}

.choice-icon{
    width:48px;

    height:48px;

    border-radius:14px;

    background:var(--lav);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:25px;

    margin-bottom:14px;
}

.choice.selected .choice-icon{
    background:#fff;
}

.choice strong{
    display:block;

    font-size:15px;
}

.choice small{
    display:block;

    color:var(--muted);

    font-size:12px;

    margin-top:4px;
}


/* =========================================================
   SEARCH
========================================================= */

.search-box{
    position:relative;

    margin-bottom:18px;
}

.search-box input{
    width:100%;

    height:48px;

    border:1px solid var(--border);

    border-radius:13px;

    padding:0 15px 0 43px;

    outline:0;

    background:#FAFAFC;
}

.search-box input:focus{
    border-color:var(--purple);

    box-shadow:0 0 0 3px rgba(108,43,217,.08);
}

.search-icon{
    position:absolute;

    left:15px;

    top:14px;

    color:#888;
}


/* =========================================================
   OPTION LIST
========================================================= */

.option-list{
    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:12px;
}

.list-option{
    border:1px solid var(--border);

    background:#fff;

    border-radius:15px;

    padding:16px;

    text-align:left;

    min-height:82px;

    transition:.18s ease;
}

.list-option:hover{
    border-color:#C7B4F4;

    background:var(--lav);
}

.list-option.selected{
    border:1.5px solid var(--purple);

    background:var(--lav);
}

.list-option .option-icon{
    font-size:22px;

    margin-bottom:7px;
}

.list-option strong{
    font-size:13px;

    display:block;
}

.list-option span{
    font-size:11px;

    color:var(--muted);

    display:block;

    margin-top:2px;
}


/* =========================================================
   FAULTS
========================================================= */

.fault-grid{
    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:12px;
}

.fault{
    border:1px solid var(--border);

    background:#fff;

    border-radius:15px;

    padding:15px;

    display:flex;

    align-items:center;

    gap:12px;

    text-align:left;

    position:relative;

    transition:.18s ease;
}

.fault:hover{
    border-color:#C7B4F4;
}

.fault.selected{
    border-color:var(--purple);

    background:var(--lav);
}

.fault-icon{
    width:42px;

    height:42px;

    flex:0 0 42px;

    border-radius:12px;

    background:var(--lav);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;
}

.fault-info strong{
    font-size:13px;

    display:block;
}

.fault-info span{
    font-size:11px;

    color:var(--muted);
}

.fault-check{
    margin-left:auto;

    width:21px;

    height:21px;

    border:1px solid #D9D4E0;

    border-radius:6px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:11px;
}

.fault.selected .fault-check{
    background:var(--purple);

    border-color:var(--purple);
}

.fault-price{
    font-size:11px;

    font-weight:800;

    color:var(--purple);

    margin-top:3px;
}


/* =========================================================
   ACTION
========================================================= */

.action-row{
    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:26px;

    padding-top:22px;

    border-top:1px solid var(--border);
}

.action-row .hint{
    font-size:11px;

    color:var(--muted);
}

.action-row .btn{
    min-width:145px;
}


/* =========================================================
   FORMS
========================================================= */

.form-grid{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:17px;
}

.form-group{
    display:flex;

    flex-direction:column;

    gap:7px;
}

.form-group.full{
    grid-column:1/-1;
}

.form-group label{
    font-size:12px;

    font-weight:800;
}

.form-group input,
.form-group textarea,
.form-group select{
    width:100%;

    border:1px solid var(--border);

    border-radius:12px;

    background:#fff;

    padding:13px 14px;

    outline:0;

    color:var(--dark);
}

.form-group textarea{
    min-height:90px;

    resize:vertical;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{
    border-color:var(--purple);

    box-shadow:0 0 0 3px rgba(108,43,217,.08);
}

.slot-grid{
    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:10px;
}

.slot{
    border:1px solid var(--border);

    border-radius:12px;

    padding:12px;

    text-align:center;

    background:#fff;

    font-size:12px;

    font-weight:700;
}

.slot.selected{
    border-color:var(--purple);

    background:var(--lav);

    color:var(--purple);
}

.consent{
    display:flex;

    gap:9px;

    align-items:flex-start;

    font-size:11px;

    color:var(--muted);

    margin-top:17px;
}

.consent input{
    margin-top:2px;

    accent-color:var(--purple);
}


/* =========================================================
   SUMMARY
========================================================= */

.summary{
    background:var(--dark);

    color:#fff;

    border-radius:24px;

    padding:25px;

    position:sticky;

    top:90px;

    box-shadow:0 25px 60px rgba(0,0,0,.16);
}

.summary h3{
    font-family:"Space Grotesk";

    font-size:19px;
}

.summary-sub{
    color:#A9A5AE;

    font-size:11px;

    margin-top:3px;
}

.device-preview{
    background:#242229;

    border:1px solid #39353E;

    border-radius:17px;

    padding:15px;

    margin-top:20px;

    display:flex;

    gap:12px;

    align-items:center;
}

.device-preview-icon{
    width:48px;

    height:48px;

    background:#fff;

    border-radius:13px;

    color:var(--purple);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;
}

.device-preview strong{
    font-size:13px;

    display:block;
}

.device-preview span{
    font-size:11px;

    color:#B9B5BD;
}

.summary-block{
    padding:17px 0;

    border-bottom:1px solid #302D34;
}

.summary-title{
    font-size:10px;

    color:#A9A5AE;

    text-transform:uppercase;

    letter-spacing:1px;

    font-weight:800;
}

.summary-list{
    margin-top:9px;

    display:grid;

    gap:7px;
}

.summary-list div{
    font-size:12px;

    display:flex;

    justify-content:space-between;

    gap:8px;
}

.summary-list div span:last-child{
    color:#D8D4DB;
}

.summary-empty{
    font-size:12px;

    color:#8F8A94;

    margin-top:8px;
}

.summary-total{
    padding-top:18px;

    display:flex;

    justify-content:space-between;

    align-items:end;
}

.summary-total small{
    color:#A9A5AE;

    font-size:10px;

    display:block;
}

.summary-total strong{
    font-size:18px;
}

.summary-total .free{
    color:#55D98B;
}

.trust{
    margin-top:18px;

    display:grid;

    gap:8px;
}

.trust div{
    font-size:10px;

    color:#C9C5CC;

    display:flex;

    gap:8px;

    align-items:center;
}

.trust b{
    color:#55D98B;
}


/* =========================================================
   LOADING
========================================================= */

.loading{
    display:none;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:55px 0;

    color:var(--muted);
}

.loading.show{
    display:flex;
}

.spinner{
    width:21px;

    height:21px;

    border:3px solid #E8E2F4;

    border-top-color:var(--purple);

    border-radius:50%;

    animation:spin .7s linear infinite;
}

@keyframes spin{
    to{
        transform:rotate(360deg);
    }
}


/* =========================================================
   SUCCESS
========================================================= */

.success{
    text-align:center;

    padding:30px 10px 10px;
}

.success-icon{
    width:72px;

    height:72px;

    border-radius:50%;

    background:#E7FAF1;

    color:var(--green);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:35px;

    margin:0 auto 17px;
}

.success h2{
    font-family:"Space Grotesk";

    font-size:32px;
}

.success p{
    color:var(--muted);

    font-size:13px;

    max-width:500px;

    margin:8px auto 22px;
}

.booking-id{
    display:inline-block;

    background:var(--lav);

    color:var(--purple);

    padding:12px 18px;

    border-radius:12px;

    font-weight:800;

    font-size:13px;
}


/* =========================================================
   TOAST
========================================================= */

.toast{
    position:fixed;

    right:22px;

    bottom:22px;

    background:var(--dark);

    color:#fff;

    padding:13px 17px;

    border-radius:12px;

    font-size:12px;

    font-weight:700;

    transform:translateY(100px);

    opacity:0;

    transition:.3s;

    z-index:50;
}

.toast.show{
    transform:translateY(0);

    opacity:1;
}


/* =========================================================
   =========================================================
   TABLET
=========================================================
========================================================= */

@media(max-width:1200px){

    .hero{
        min-height:600px;

        /*
           Image full width rahegi.
        */

        background-size:100% auto;
    }

    .hero-content{
        padding-left:40px;

        padding-right:40px;
    }

    .hero-content-inner{
        width:52%;
    }

    .hero h1{
        font-size:52px;
    }

    .bento{
        grid-template-columns:repeat(2,1fr);
    }

    .repara-standard{
        padding:50px 25px 0;
    }

    .repara-standard-header h2{
        font-size:44px;
    }

    .repara-service-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));

        gap:20px;
    }

    .layout{
        grid-template-columns:minmax(0,1fr) 300px;
    }
}


/* =========================================================
   =========================================================
   TABLET / SMALL LAPTOP
=========================================================
========================================================= */

@media(max-width:991px){

    .device-hero{
        grid-template-columns:1fr;

        gap:30px;
    }

    .device-team-image{
        min-height:350px;

        order:2;
    }

    .device-hero-content{
        order:1;
    }

    .device-header h2{
        font-size:45px;
    }

    .service-mini-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .layout{
        grid-template-columns:1fr;
    }

    .summary{
        position:static;

        order:-1;
    }
}


/* =========================================================
   =========================================================
   MOBILE
=========================================================
========================================================= */

@media(max-width:900px){

    .container{
        width:100%;

        max-width:100%;

        padding-left:16px;

        padding-right:16px;
    }

    
    .header{
        height:64px;

        padding:0 16px !important;
    }


    /* =====================================================
       MOBILE HERO
    ===================================================== */

    .hero{

        /*
           Mobile par background image ko crop nahi karna.

           Image complete visible hogi.

           Hero height image ratio ke according
           approximately maintain ki gayi hai.
        */

        min-height:720px;

        display:block;

        background-position:center top;

        background-size:100% auto;

        background-repeat:no-repeat;
    }


    /*
       Mobile image ke upar content.

       Left blank space ko use karne ke liye
       content top par rakha gaya hai.
    */

    .hero-content{

        width:100%;

        max-width:100%;

        padding:40px 16px 240px;

        display:block;
    }

    .hero-content-inner{
        width:100%;

        max-width:550px;
    }

    .hero h1{
        font-size:clamp(40px,10vw,52px);

        line-height:.95;

        letter-spacing:-2px;

        max-width:500px;
    }

    .hero p{
        font-size:15px;

        line-height:1.55;

        max-width:500px;
    }

    .eyebrow{
        font-size:11px;

        padding:7px 11px;
    }

    .ctas{
        flex-direction:column;

        width:100%;

        display:none;
    }

    .ctas .btn{
        width:100%;

        min-height:52px;
    }

    .mini-steps{
        max-width:none;

        width:100%;

        display:none;
    }

    .hero-rating{
        display:none;
    }


    /* =====================================================
       MOBILE TRACKING
    ===================================================== */

    .scooter-row{

        position:absolute;

        left:16px;

        right:16px;

        bottom:20px;

        transform:none;

        width:auto;

        max-width:none;
    }

    .delivery-card{
        padding:15px;

        border-radius:16px;
    }

    .delivery-top{
        gap:10px;
    }

    .delivery-top h3{
        font-size:15px;
    }

    .delivery-top p{
        font-size:10px;
    }

    .pickup-time strong{
        font-size:16px;
    }

    .road{
        height:65px;
    }

    .scooter-icon{
        font-size:24px;
    }

    .scooter-tooltip{
        display:none;
    }

    .location span{
        font-size:9px;
    }

    .delivery-status div{
        padding:8px 4px;
    }


    /* =====================================================
       OTHER SECTIONS
    ===================================================== */

    .section{
        padding:64px 0;
    }

    .h2{
        font-size:clamp(34px,9vw,44px);
    }

    .sub{
        font-size:15px;

        margin-bottom:32px;
    }

    .bento{
        grid-template-columns:1fr 1fr;
    }


    /* HOW */

    .how-steps{
        flex-direction:column;

        gap:20px;
    }

    .how-steps::before{
        display:block;

        left:23px;

        right:auto;

        top:24px;

        bottom:24px;

        width:2px;

        height:auto;
    }

    .h-step{
        display:grid;

        grid-template-columns:48px 1fr;

        column-gap:16px;

        text-align:left;

        align-items:center;
    }

    .h-num{
        grid-row:span 2;

        margin:0;
    }


    /* DEVICE */

    .device-section{
        padding:60px 0;
    }

    .device-header h2{
        font-size:38px;
    }

    .device-switch{
        grid-template-columns:1fr;

        margin-top:-50px;
    }

    .device-content{
        padding:20px;

        border-radius:22px;
    }

    .device-content-header{
        flex-direction:column;

        align-items:flex-start;

        gap:18px;
    }

    .device-content-header h3{
        font-size:30px;
    }

    .device-content-header .btn{
        width:100%;
    }

    .service-mini-grid{
        grid-template-columns:1fr 1fr;
    }


    /* BRANDS */

    .brand-grid{
        grid-template-columns:1fr 1fr;
    }


    /* REPAIR */

    .repair-grid{
        grid-template-columns:1fr;
    }


    /* WHY */

    .why-grid{
        grid-template-columns:1fr;
    }


    /* PRICE */

    .price-header{
        flex-direction:column;

        align-items:flex-start;

        gap:20px;
    }

    .price-header h2{
        font-size:36px;
    }

    .price-grid{
        grid-template-columns:1fr 1fr;
    }


    /* BEFORE AFTER */

    .before-after{
        grid-template-columns:1fr;

        gap:15px;
    }

    .stage-arrow{
        margin:auto;

        transform:rotate(90deg);
    }


    /* AREA */

    .area-section{
        grid-template-columns:1fr;

        gap:30px;
    }

    .area-section h2{
        font-size:36px;
    }


    /* BOOKING */

    .booking-box{
        grid-template-columns:1fr;

        padding:24px;

        gap:30px;

        border-radius:22px;
    }

    .booking-content h2{
        font-size:38px;
    }


    /* STANDARD */

    .repara-standard{
        padding:40px 18px 0;
    }

    .repara-standard-header{
        margin-bottom:35px;
    }

    .repara-standard-header h2{
        font-size:34px;

        letter-spacing:-1px;
    }

    .repara-standard-header p{
        font-size:15px;

        margin-top:14px;
    }

    .repara-service-grid{
        grid-template-columns:repeat(2,1fr);

        gap:14px;
    }

    .repara-service-card{
        height:380px;
    }

    .service-content{
        padding:25px 20px 0;
    }

    .service-small-title{
        font-size:12px;
    }

    .service-content h3{
        font-size:20px;
    }

    .service-description{
        font-size:12px;

        margin-top:20px;
    }

    .service-image{
        height:160px;
    }


    /* FOOTER */

    .footer{
        margin-top:40px;

        padding:52px 0 30px;

        border-radius:24px 24px 0 0;
    }

    .footer .container{
        grid-template-columns:1fr !important;

        gap:30px !important;
    }
}


/* =========================================================
   =========================================================
   SMALL MOBILE
=========================================================
========================================================= */

@media(max-width:575px){

    .container{
        padding-left:14px;

        padding-right:14px;
    }


    /* =====================================================
       SMALL MOBILE HERO

       IMPORTANT:
       Background image full visible.
    ===================================================== */

    .hero{

        /*
           Image width = viewport.

           Height image ke ratio se grow karegi.
        */

        min-height:680px;

        background-size:100% auto;

        background-position:center top;
    }

    .hero-content{

        padding:

            28px
            14px
            210px
            14px;
    }

    .hero-content-inner{
        width:100%;

        max-width:100%;
    }

    .hero h1{
        font-size:39px;

        line-height:.96;

        letter-spacing:-1.5px;
    }

    .hero p{
        font-size:14px;

        line-height:1.55;
    }

    .hero .eyebrow{
        font-size:10px;

        padding:7px 10px;
    }


    /* TRACKING */

    .scooter-row{
        left:14px;

        right:14px;

        bottom:14px;
    }

    .track-wrap{
        padding:15px 10px;
    }

    .stations label{
        font-size:9px;
    }

    .track-line{
        margin-top:28px;
    }

    .delivery-top{
        align-items:flex-start;
    }

    .pickup-time strong{
        font-size:15px;
    }

    .delivery-status strong{
        font-size:11px;
    }

    .delivery-status span{
        font-size:8px;
    }


    /* BENTO */

    .bento{
        grid-template-columns:1fr;
    }

    .bento-card{
        padding:16px;
    }

    .bento-card .icon{
        width:42px;

        height:42px;

        font-size:20px;
    }


    /* GENERAL */

    .h2{
        font-size:34px;
    }

    .section{
        padding:52px 0;
    }


    /* DEVICE */

    .device-header h2{
        font-size:34px;
    }

    .device-tab-icon{
        width:44px;

        height:44px;
    }

    .device-content-header h3{
        font-size:27px;
    }

    .service-mini-grid{
        grid-template-columns:1fr;
    }


    /* BRAND */

    .brand-grid{
        grid-template-columns:1fr 1fr;

        gap:10px;
    }

    .brand-card{
        padding:18px 10px;
    }

    .brand-logo{
        font-size:17px;

        height:45px;
    }


    /* REPAIR */

    .repair-card{
        grid-template-columns:45px 1fr;
    }

    .repair-icon{
        width:45px;

        height:45px;
    }

    .repair-arrow{
        display:none;
    }


    /* PRICE */

    .price-grid{
        grid-template-columns:1fr;
    }


    /* AREA */

    .area-list{
        grid-template-columns:1fr;
    }


    /* BOOKING */

    .booking-box{
        padding:18px;
    }

    .booking-content h2{
        font-size:34px;
    }

    .form-row{
        grid-template-columns:1fr;

        gap:0;
    }

    .booking-form{
        padding:18px;
    }


    /* REPARA */

    .repara-service-grid{
        grid-template-columns:1fr;
    }

    .repara-service-card{
        height:400px;
    }

    .service-content h3{
        font-size:23px;
    }

    .service-image{
        height:200px;
    }


    /* BOOKING */

    .booking-hero{
        padding:38px 0 22px;
    }

    .booking-hero h1{
        font-size:34px;

        letter-spacing:-1px;
    }

    .hero-inner p{
        font-size:13px;
    }

    .stepper-wrap{
        padding:12px 0 20px;
    }

    .stepper{
        padding:12px 10px;

        overflow-x:auto;

        justify-content:flex-start;
    }

    .step-label{
        display:none;
    }

    .step-line{
        min-width:20px;
    }

    .panel{
        padding:20px;

        border-radius:19px;
    }

    .panel-head h2{
        font-size:24px;
    }

    .selection-grid,
    .fault-grid{
        grid-template-columns:1fr;
    }

    .option-list{
        grid-template-columns:1fr 1fr;
    }

    .form-grid{
        grid-template-columns:1fr;
    }

    .form-group.full{
        grid-column:auto;
    }

    .slot-grid{
        grid-template-columns:1fr;
    }

    .action-row{
        gap:10px;
    }

    .action-row .hint{
        display:none;
    }

    .action-row .btn{
        width:100%;
    }

    .summary-block,
    .trust{
        display:none;
    }

    .summary{
        padding:17px;
    }

    .device-preview{
        margin-top:13px;
    }
}


/* =========================================================
   =========================================================
   VERY SMALL MOBILE
=========================================================
========================================================= */

@media(max-width:390px){

    .hero{
        min-height:630px;

        background-size:100% auto;
    }

    .hero-content{
        padding-top:25px;

        padding-bottom:190px;
    }

    .hero h1{
        font-size:35px;
    }

    .hero p{
        font-size:13px;
    }

    .scooter-row{
        bottom:10px;
    }

    .delivery-card{
        padding:12px;
    }
}