/* =========================
   RESET
========================= */

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

html{
    scroll-behavior:smooth;
}

body{

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

    background:#f8f6f4;

    color:#111;

    overflow-x:hidden;
}

img{
    display:block;
    max-width:100%;
}

a{
    text-decoration:none;
}

button{
    border:none;
    cursor:pointer;
    font-family:'Inter',sans-serif;
}

/* =========================
   PAGE CONTAINER
========================= */

body::before{

    content:'';

    position:fixed;

    inset:0;

    background:
    radial-gradient(
        circle at top center,
        rgba(255,255,255,.95),
        rgba(245,243,240,.98)
    );

    z-index:-2;
}

/* =========================
   NAVBAR
========================= */

.navbar{

    width:100%;

    max-width:1600px;

    margin:auto;

    height:100px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 55px;

    position:relative;

    z-index:100;
}

.logo img{

    height:42px;

    width:auto;
}

.nav-links{

    display:flex;

    gap:42px;
}

.nav-links a{

    color:#111;

    font-size:14px;

    font-weight:500;
}

.download-btn{

    height:54px;

    padding:0 28px;

    border-radius:16px;

    background:#f4c21f;

    color:#111;

    font-weight:700;

    font-size:14px;
}

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

.hero{
    height:920px;
    position:relative;
    max-width:1600px;
    margin:auto;
}

.hero-left{
    position:absolute;
    left:60px;
    top:120px;
    width:520px;
    z-index:100;
}

.hero-tag{
    display:block;
    font-size:12px;
    letter-spacing:5px;
    color:#8b8b8b;
    margin-bottom:25px;
}

.hero h1{
    font-size:82px;
    line-height:.95;
    font-weight:800;
    letter-spacing:-3px;
    margin-bottom:25px;
}

.hero h1 span{
    color:#f4c21f;
}

.hero p{
    font-size:18px;
    color:#555;
    line-height:1.8;
    margin-bottom:35px;
}

.hero-actions{
    display:flex;
    align-items:center;
    gap:24px;
}

.ride-btn{
    height:58px;
    padding:0 34px;
    border-radius:40px;
    background:#111;
    color:#fff;
    font-weight:600;
}

.video-btn{
    background:none;
    color:#111;
    font-weight:600;
}

/* =========================
   MAIN JOURNEY SECTION
========================= */

.journey-section{
    position:relative;
    width:100%;
    max-width:1600px;
    margin:-180px auto 0;
    height:4300px;
    overflow:hidden;
}
/* =========================
   ASSET BASE
========================= */

.road-image,
.airport-image,
.city-image,
.forest-image,
.mountain-image,
.beach-image,
.taxi,
.pin{

    position:absolute;
}

/* =========================
   SERVICE CARDS
========================= */

.service-card{

    position:absolute;

    background:#fff;

    border-radius:28px;

    padding:34px;

    box-shadow:
    0 8px 25px rgba(0,0,0,.03),
    0 30px 80px rgba(0,0,0,.05);

    backdrop-filter:blur(10px);

    z-index:40;
  
}
.service-card > span{

    font-size:24px;

    font-weight:400;

    color:#9ea84c;

    margin-bottom:14px;
}
.service-card h3{

    font-size:18px;

    font-weight:600;

    line-height:1.3;

    margin-bottom:10px;

    color:#151515;
}

.service-card p{

    font-size:12px;

    line-height:1.7;

    color:#7c7c7c;

    margin-bottom:20px;
}
  .card-features{
.feature{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:8px;
}
.route-list{

    display:flex;

    flex-direction:column;

    gap:10px;
}

.route-list div{

    display:flex;

    align-items:center;

    gap:8px;
}

.route-list img{

    width:10px;

    height:10px;

    opacity:.85;
}

.route-list span{

    font-size:11px;

    color:#2b2b2b;

    font-weight:400;
}

.feature img{

    width:18px;

    height:18px;

    object-fit:contain;
}

.feature small{

    font-size:10px;

    color:#666;
}
    margin-top:28px;

    display:flex;

    justify-content:space-between;

    align-items:center;
}

.card-features div{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

    font-size:12px;

    color:#555;
}

.card-features span{

    font-size:12px !important;

    color:#666 !important;

    margin:0 !important;

    font-weight:500 !important;
}
/* =========================
   START CARD
========================= */

.start-card{

    width:240px;

    padding:20px 24px;

    border-radius:18px;

    background:#fff;

    box-shadow:
0 15px 40px rgba(0,0,0,.04),
0 40px 80px rgba(0,0,0,.03);
    z-index:50;
}

.start-card span{

    display:block;

    font-size:11px;

    font-weight:600;

    letter-spacing:2px;

    color:#888;

    margin-bottom:12px;
}

.start-card h3{
    font-size:11px;

    color:#666;

    margin-bottom:6px;
}

.start-card h2{
    font-size:18px;

    font-weight:700;

    margin-bottom:8px;
}

.start-card p{
    font-size:10px;

    color:#888;
}
/* =========================
   APP SECTION
========================= */

.app-section{

    width:100%;

    max-width:1400px;

    margin:0 auto 70px;

    background:#fff;

    border-radius:40px;

    min-height:500px;

    position:relative;
}

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

.booking-bar{

    width:100%;

    max-width:1400px;

    margin:0 auto 120px;

    background:#fff;

    border-radius:28px;

    min-height:110px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 40px;
}

.booking-item{

    display:flex;

    flex-direction:column;

    gap:8px;
}

.booking-item span{

    color:#777;

    font-size:14px;
}

.booking-item strong{

    font-size:18px;
}
/* =====================================
   ROAD
===================================== */

.road-image{
    width:991px;
    height:3550px;

    object-fit:fill;

    left:51.5%;

    transform:translateX(-50%);

    top:-71px;

    z-index:1;
}
/* =====================================
   AIRPORT
===================================== */

.airport-image{
    position:absolute;

    width:1050px;

    top:20px;

    right:-140px;

    z-index:5;
}

.city-image{

    width:980px;

    top:-155px;

    right:147px;

    z-index:8;

    filter:
    drop-shadow(0 35px 60px rgba(0,0,0,.08));
}

.forest-image{
    width:620px;
    top:395px;
    left:322px;
}

.mountain-image{

    width:620px;

    top:640px;

    left:152px;

    z-index:35;
}

.corporate-city-image{

    position:absolute;

    width:600px;

    top:800px;

    left:745px;

    z-index:15;

    filter:drop-shadow(
        0 25px 45px rgba(0,0,0,.08)
    );
}

.beach-image{
    width:760px;
    top:1614px;
    right:25px;
    z-index:5;
}
.taxi{
    width:100px;
    z-index:30;
}

.taxi-1{
    top:654px;
    right:655px;
    transform:rotate(-33deg);
        width: 100px;

}
.taxi-2{

    top:1620px;

    left:610px;

    transform:rotate(8deg);
}

.taxi-3{

    top:3260px;

    left:660px;

    transform:rotate(-20deg);
}
.pin{
    width:100px;
    z-index:25;
}

.pin-1{
    top:310px;
    right:513px;
}

.pin-2{

    top:952px;
    left:707px;
}

.pin-3{

    top:1585px;
    right:769px;
}

.pin-4{

    top:2210px;

    left:530px;
}

.pin-5{

    top:3170px;

    left:560px;
}
/* =====================================
   START CARD
===================================== */

.start-card{
    position:absolute;

    width:290px;

    top:240px;

    right:90px;

    z-index:30;
}


/* =====================================
   CARD 01
===================================== */

.card-01{

    top:75px;

    left:115px;

    width:350px;

    height:210px;

    padding:30px;

    z-index:40;
}

/* =====================================
   CARD 02
===================================== */

.card-02{

    top:500px;

    right:120px;

    width:350px;

    height:210px;
}


/* =====================================
   CARD 03
===================================== */

.card-03{

    top:720px;

    left:80px;

    width:300px;

    height:245px;

    padding:28px;

    border-radius:24px;

    background:#fff;

    box-shadow:
    0 12px 40px rgba(0,0,0,.05);

    z-index:50;
}
.card-03 h3{

    font-size:16px;

    font-weight:600;

    margin-bottom:10px;

    color:#151515;
}

.card-03 p{

    font-size:11px;

    line-height:1.8;

    color:#777;

    margin-bottom:18px;
}
.card-03 > span{

    font-size:26px;

    font-weight:300;

    color:#9ea84c;

    margin-bottom:10px;
}


/* =====================================
   CARD 04
===================================== */

.card-04{

    top:2140px;

    right:120px;

    width:320px;

    height:230px;

    z-index:50;
}

/* =====================================
   CARD 05
===================================== */

.card-05{

    top:2830px;

    left:90px;

    width:370px;

    z-index:40;
}


/* =====================================
   CARD 06
===================================== */

.card-06{

    top:3050px;

    right:90px;

    width:370px;

    z-index:40;
}
.airport-image,
.city-image,
.forest-image,
.mountain-image,
.beach-image{

    filter:
        drop-shadow(0 20px 30px rgba(0,0,0,.08));
}
/* =====================================
   APP SECTION
===================================== */

.app-section{

    position:relative;

    width:1200px;

    height:420px;

    margin:0 auto;

    background:#ffffff;

    border-radius:36px;

    box-shadow:
        0 10px 40px rgba(0,0,0,.04);

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:60px;

    overflow:hidden;
}


/* LEFT CARD */

.destination-card{

    width:320px;
}

.success-icon{

    width:72px;
    height:72px;

    border-radius:50%;

    background:#21c55d;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    margin-bottom:20px;
}

.destination-label{

    display:block;

    font-size:11px;

    letter-spacing:2px;

    color:#888;

    margin-bottom:18px;
}

.destination-card h2{

    font-size:44px;

    line-height:1.1;

    margin-bottom:18px;
}

.destination-card p{

    color:#666;

    line-height:1.8;

    margin-bottom:28px;
}

.download-app-btn{

    height:54px;

    padding:0 26px;

    border-radius:18px;

    background:#f4c21f;

    font-weight:700;
}
/* =====================================
   PHONE
===================================== */

.phone-holder{

    left:50%;

    top:50%;

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

.phone-holder img{

    width:260px;
}
/* =====================================
   APP DETAILS
===================================== */

.app-details{

    width:370px;
}

.app-details h3{

    font-size:28px;

    line-height:1.4;

    margin-bottom:20px;
}

.rating-row{

    display:flex;

    gap:20px;

    align-items:center;

    margin-bottom:15px;
}

.rating-number{

    font-size:34px;

    font-weight:700;

    color:#f4c21f;
}

.app-details p{

    color:#666;

    margin-bottom:24px;
}

.store-buttons{

    display:flex;

    gap:12px;
}

.store-buttons button{

    height:48px;

    padding:0 18px;

    border-radius:14px;

    background:#111;

    color:#fff;
}
/* =====================================
   BOOKING BAR
===================================== */

.booking-bar{

    width:1200px;

    height:90px;

    margin:35px auto 120px;

    background:#fff;

    border-radius:24px;

    display:flex;

    align-items:center;

    justify-content:space-around;

    box-shadow:
        0 10px 40px rgba(0,0,0,.04);
}

.booking-item{

    display:flex;

    flex-direction:column;

    gap:8px;
}

.booking-item span{

    font-size:13px;

    color:#888;
}

.booking-item strong{

    font-size:18px;

    font-weight:600;
}
.city-image{

    pointer-events:none;
}

.card-01{

    z-index:30;
}

.city-image{

    z-index:35;
}