<section class="relative overflow-hidden bg-white">

    <div class="relative min-h-[820px] md:min-h-[760px] lg:min-h-[640px] bg-cover bg-center"
        style="background-image: url('/driftly/public/assets/img/general/hero-premium.jpg');">

        <div class="absolute inset-0 bg-black/55 lg:bg-black/25"></div>
        <div class="absolute inset-0 bg-gradient-to-b from-black/40 via-black/20 to-black/60 lg:bg-gradient-to-r lg:from-black/35 lg:via-black/10 lg:to-transparent"></div>

        <div class="relative z-10 max-w-7xl mx-auto px-5 md:px-6 pt-20 md:pt-24 pb-12 md:pb-16">

            <div class="max-w-2xl">

                <div class="fade-up inline-flex items-center gap-2 bg-white/90 border border-white/40 rounded-full px-4 py-2 text-[14px] md:text-sm text-slate-700 shadow-sm mb-6">
                    <span class="w-2 h-2 rounded-full bg-[#06B6D4]"></span>
                    Trusted ride sharing marketplace
                </div>

                <h1 class="fade-up text-white text-[44px] md:text-[56px] lg:text-6xl font-bold leading-[1.04] mb-6 drop-shadow-lg">
                    Travel together.<br>
                    <span class="text-transparent bg-clip-text bg-gradient-to-r from-[#60A5FA] to-[#22D3EE]">
                        Save more.
                    </span>
                </h1>

                <p class="fade-up text-white/95 text-[19px] md:text-[22px] lg:text-xl font-medium leading-8 md:leading-9 mb-9 max-w-xl">
                    Find affordable rides or offer your empty seats and make every journey better for everyone.
                </p>

            </div>

            <div class="mt-7 bg-white/15 backdrop-blur-xl border border-white/20 shadow-[0_20px_80px_rgba(0,0,0,0.35)] rounded-[2rem] p-5 md:p-6">

                <form class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">

                    <div>
                        <label class="block text-[15px] font-semibold text-white mb-2">From</label>
                        <input type="text" placeholder="Departure city"
                            class="w-full h-14 rounded-2xl border border-white/60 bg-white px-4 text-[17px] md:text-base outline-none focus:border-[#06B6D4]">
                    </div>

                    <div>
                        <label class="block text-[15px] font-semibold text-white mb-2">To</label>
                        <input type="text" placeholder="Destination city"
                            class="w-full h-14 rounded-2xl border border-white/60 bg-white px-4 text-[17px] md:text-base outline-none focus:border-[#06B6D4]">
                    </div>

                    <div>
                        <label class="block text-[15px] font-semibold text-white mb-2">Date</label>
                        <input type="date"
                            class="w-full h-14 rounded-2xl border border-white/60 bg-white px-4 text-[17px] md:text-base outline-none focus:border-[#06B6D4]">
                    </div>

                    <div>
                        <label class="block text-[15px] font-semibold text-white mb-2">Passengers</label>
                        <select
                            class="w-full h-14 rounded-2xl border border-white/60 bg-white px-4 text-[17px] md:text-base outline-none focus:border-[#06B6D4]">
                            <option>1 passenger</option>
                            <option>2 passengers</option>
                            <option>3 passengers</option>
                            <option>4 passengers</option>
                        </select>
                    </div>

                    <div class="flex items-end md:col-span-2 lg:col-span-1">
                        <button type="submit"
                            class="w-full h-14 rounded-2xl bg-gradient-to-r from-[#3B82F6] to-[#06B6D4] text-white text-[17px] md:text-base font-semibold shadow-[0_0_35px_rgba(6,182,212,0.35)] hover:opacity-95 transition">
                            Search rides
                        </button>
                    </div>

                </form>

            </div>

            <div class="mt-6 flex flex-wrap items-center gap-3">

                <span class="w-full md:w-auto text-white font-semibold text-[15px]">
                    Popular routes:
                </span>

                <button class="bg-white/90 backdrop-blur px-4 py-2.5 rounded-full text-[14px] md:text-sm text-slate-700 hover:bg-white transition">
                    New York → Boston
                </button>

                <button class="bg-white/90 backdrop-blur px-4 py-2.5 rounded-full text-[14px] md:text-sm text-slate-700 hover:bg-white transition">
                    Paris → Lyon
                </button>

                <button class="bg-white/90 backdrop-blur px-4 py-2.5 rounded-full text-[14px] md:text-sm text-slate-700 hover:bg-white transition">
                    New York → Los Angeles
                </button>

            </div>

        </div>

    </div>

</section>

<section class="max-w-7xl mx-auto px-5 md:px-6 py-16 md:py-20">

    <div class="text-center mb-12 md:mb-14">

        <div class="inline-flex items-center gap-2 bg-[#06B6D4]/10 text-[#06B6D4] px-4 py-2 rounded-full text-[14px] font-semibold mb-5">
            <span class="w-2 h-2 bg-[#06B6D4] rounded-full"></span>
            Trending routes
        </div>

        <h2 class="text-[38px] md:text-[48px] lg:text-[60px] font-bold leading-tight text-[#0F172A] mb-5">
            Popular rides
        </h2>

        <p class="text-slate-600 text-[19px] md:text-[22px] lg:text-[24px] max-w-3xl mx-auto leading-8 lg:leading-9">
            Explore routes people are booking right now and find your next trip.
        </p>

    </div>

    <div id="popular-rides">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 md:gap-6 animate-pulse">
            <div class="h-56 bg-white rounded-[2rem] shadow-sm"></div>
            <div class="h-56 bg-white rounded-[2rem] shadow-sm"></div>
            <div class="h-56 bg-white rounded-[2rem] shadow-sm md:col-span-2 lg:col-span-1"></div>
        </div>
    </div>

</section>

<section class="max-w-7xl mx-auto px-5 md:px-6 py-16 md:py-24 lg:py-28">

    <div class="text-center mb-6">
        <div class="fade-up inline-flex items-center gap-2 bg-[#06B6D4]/10 border border-[#06B6D4]/10 rounded-full px-4 py-2 text-[14px] text-slate-700 shadow-sm">
            <span class="w-2 h-2 rounded-full bg-[#06B6D4]"></span>
            Why choose Driftly
        </div>
    </div>

    <div class="text-center max-w-3xl mx-auto mb-14 md:mb-16 lg:mb-20">
        <h2 class="fade-up text-[38px] md:text-[48px] lg:text-[60px] font-bold leading-tight text-[#0F172A] mb-6">
            Make your trip
            <span class="text-transparent bg-clip-text bg-gradient-to-r from-[#3B82F6] to-[#06B6D4]">
                your way
            </span>
        </h2>

        <p class="fade-up text-[19px] md:text-[22px] lg:text-[24px] text-slate-600 leading-8 lg:leading-9">
            Enjoy safe, affordable and comfortable rides with trusted drivers and a seamless booking experience.
        </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-12 lg:gap-14">

        <div class="fade-up text-center group">
            <div class="mx-auto mb-7 w-24 h-24 rounded-full bg-[#06B6D4]/10 flex items-center justify-center group-hover:bg-[#06B6D4]/20 group-hover:scale-110 transition duration-500">
                <i data-lucide="shield-check" class="w-11 h-11 text-[#06B6D4]"></i>
            </div>

            <h3 class="text-[28px] md:text-[26px] lg:text-[30px] xl:text-[32px] leading-tight font-bold text-[#0F172A] mb-4">
                Safety first
            </h3>

            <p class="text-slate-600 leading-8 text-[19px] md:text-[18px] lg:text-[20px]">
                Travel with verified drivers, real reviews and booking protection built for peace of mind.
            </p>
        </div>

        <div class="fade-up text-center group">
            <div class="mx-auto mb-7 w-24 h-24 rounded-full bg-[#06B6D4]/10 flex items-center justify-center group-hover:bg-[#06B6D4]/20 group-hover:scale-110 transition duration-500">
                <i data-lucide="badge-dollar-sign" class="w-11 h-11 text-[#06B6D4]"></i>
            </div>

            <h3 class="text-[28px] md:text-[26px] lg:text-[30px] xl:text-[32px] leading-tight font-bold text-[#0F172A] mb-4">
                Transparent pricing
            </h3>

            <p class="text-slate-600 leading-8 text-[19px] md:text-[18px] lg:text-[20px]">
                No hidden costs or surprise fees. See the price clearly before every ride.
            </p>
        </div>

        <div class="fade-up text-center group">
            <div class="mx-auto mb-7 w-24 h-24 rounded-full bg-[#06B6D4]/10 flex items-center justify-center group-hover:bg-[#06B6D4]/20 group-hover:scale-110 transition duration-500">
                <i data-lucide="car-front" class="w-11 h-11 text-[#06B6D4]"></i>
            </div>

            <h3 class="text-[28px] md:text-[26px] lg:text-[30px] xl:text-[32px] leading-tight font-bold text-[#0F172A] mb-4">
                Comfortable travel
            </h3>

            <p class="text-slate-600 leading-8 text-[19px] md:text-[18px] lg:text-[20px]">
                Find flexible rides, connect with drivers and enjoy a smoother way to travel.
            </p>
        </div>

    </div>

</section>

<section class="relative overflow-hidden bg-[#0F172A] py-16 md:py-24 lg:py-28 mt-4 md:mt-10">

    <div class="absolute inset-0 bg-gradient-to-br from-[#0F172A] via-[#111827] to-[#063B46]"></div>
    <div class="absolute -top-32 -right-32 w-72 h-72 md:w-96 md:h-96 bg-[#06B6D4]/20 rounded-full blur-3xl"></div>
    <div class="absolute -bottom-32 -left-32 w-72 h-72 md:w-96 md:h-96 bg-[#3B82F6]/20 rounded-full blur-3xl"></div>

    <div class="relative z-10 max-w-7xl mx-auto px-5 md:px-6 grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">

        <div class="fade-up">

            <div class="inline-flex items-center gap-2 bg-white/10 border border-white/10 rounded-full px-4 py-2 text-[14px] text-cyan-100 shadow-sm mb-6">
                <span class="w-2 h-2 rounded-full bg-[#06B6D4]"></span>
                For drivers
            </div>

            <h2 class="text-[38px] md:text-[48px] lg:text-[60px] font-bold leading-tight text-white mb-6">
                Turn empty seats into
                <span class="text-transparent bg-clip-text bg-gradient-to-r from-[#3B82F6] to-[#06B6D4]">
                    real income.
                </span>
            </h2>

            <p class="text-[19px] md:text-[22px] lg:text-[24px] text-slate-300 leading-8 lg:leading-9 mb-9">
                Offer rides, accept bookings and track your earnings from one simple driver dashboard.
            </p>

            <div class="flex flex-col md:flex-row gap-4">

                <a href="/driftly/public/register" data-link
                    class="w-full md:w-auto text-center bg-gradient-to-r from-[#3B82F6] to-[#06B6D4] text-white px-7 py-4 rounded-2xl text-[17px] font-semibold shadow-lg hover:scale-[1.02] transition">
                    Become a driver
                </a>

                <a href="/driftly/public/" data-link
                    class="w-full md:w-auto text-center bg-white/10 border border-white/10 text-white px-7 py-4 rounded-2xl text-[17px] font-semibold hover:bg-white/15 transition">
                    Learn more
                </a>

            </div>

        </div>

        <div class="fade-up relative">

            <div class="absolute -inset-3 md:-inset-6 bg-gradient-to-r from-[#3B82F6]/20 to-[#06B6D4]/20 rounded-[2rem] blur-2xl"></div>

            <div class="relative bg-white/10 backdrop-blur-xl border border-white/10 rounded-[2rem] p-4 md:p-6 shadow-2xl">

                <div class="bg-white rounded-[1.5rem] p-5 md:p-6">

                    <div class="flex items-center justify-between mb-7">
                        <div>
                            <div class="text-[15px] text-slate-500 font-semibold">
                                Driver earnings
                            </div>

                            <div class="text-3xl font-bold text-[#0F172A] mt-1">
                                €2,450.00
                            </div>
                        </div>

                        <div class="w-12 h-12 rounded-2xl bg-[#06B6D4]/10 flex items-center justify-center">
                            <i data-lucide="wallet" class="w-6 h-6 text-[#06B6D4]"></i>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 min-[420px]:grid-cols-3 gap-3 md:gap-4 mb-7">

                        <div class="bg-slate-50 rounded-2xl p-4">
                            <div class="text-[14px] text-slate-500">Rides</div>
                            <div class="text-3xl font-bold text-[#0F172A] mt-1">128</div>
                        </div>

                        <div class="bg-slate-50 rounded-2xl p-4">
                            <div class="text-[14px] text-slate-500">Rating</div>
                            <div class="text-3xl font-bold text-[#0F172A] mt-1">4.9</div>
                        </div>

                        <div class="bg-slate-50 rounded-2xl p-4">
                            <div class="text-[14px] text-slate-500">Seats</div>
                            <div class="text-3xl font-bold text-[#0F172A] mt-1">342</div>
                        </div>

                    </div>

                    <div class="space-y-4">

                        <div class="flex items-center justify-between gap-3 bg-slate-50 rounded-2xl p-4">
                            <div class="flex items-center gap-3 min-w-0">
                                <div class="shrink-0 w-11 h-11 rounded-xl bg-[#06B6D4]/10 flex items-center justify-center">
                                    <i data-lucide="route" class="w-5 h-5 text-[#06B6D4]"></i>
                                </div>

                                <div class="min-w-0">
                                    <div class="font-bold text-[16px] text-[#0F172A] truncate">New York → Boston</div>
                                    <div class="text-[14px] text-slate-500">Today, 14:30</div>
                                </div>
                            </div>

                            <div class="shrink-0 font-bold text-emerald-500 text-[16px]">
                                +€18
                            </div>
                        </div>

                        <div class="flex items-center justify-between gap-3 bg-slate-50 rounded-2xl p-4">
                            <div class="flex items-center gap-3 min-w-0">
                                <div class="shrink-0 w-11 h-11 rounded-xl bg-[#06B6D4]/10 flex items-center justify-center">
                                    <i data-lucide="route" class="w-5 h-5 text-[#06B6D4]"></i>
                                </div>

                                <div class="min-w-0">
                                    <div class="font-bold text-[16px] text-[#0F172A] truncate">Paris → Lyon</div>
                                    <div class="text-[14px] text-slate-500">Tomorrow, 09:00</div>
                                </div>
                            </div>

                            <div class="shrink-0 font-bold text-emerald-500 text-[16px]">
                                +€12
                            </div>
                        </div>

                        <div class="flex items-center justify-between gap-3 bg-slate-50 rounded-2xl p-4">
                            <div class="flex items-center gap-3 min-w-0">
                                <div class="shrink-0 w-11 h-11 rounded-xl bg-[#06B6D4]/10 flex items-center justify-center">
                                    <i data-lucide="route" class="w-5 h-5 text-[#06B6D4]"></i>
                                </div>

                                <div class="min-w-0">
                                    <div class="font-bold text-[16px] text-[#0F172A] truncate">Los Angeles → San Diego</div>
                                    <div class="text-[14px] text-slate-500">Friday, 08:15</div>
                                </div>
                            </div>

                            <div class="shrink-0 font-bold text-emerald-500 text-[16px]">
                                +€7
                            </div>
                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</section>

<section class="relative overflow-hidden bg-white py-16 md:py-24 lg:py-28">

    <div class="absolute top-20 left-1/2 -translate-x-1/2 w-[320px] h-[320px] md:w-[600px] md:h-[600px] bg-[#06B6D4]/10 rounded-full blur-xl"></div>

    <div class="relative z-10 max-w-7xl mx-auto px-5 md:px-6">

        <div class="text-center mb-14 md:mb-16 lg:mb-20">

            <div class="fade-up inline-flex items-center gap-2 bg-[#06B6D4]/10 border border-[#06B6D4]/10 rounded-full px-4 py-2 text-[14px] text-slate-700 shadow-sm mb-6">
                <span class="w-2 h-2 rounded-full bg-[#06B6D4]"></span>
                How it works
            </div>

            <h2 class="fade-up text-[38px] md:text-[48px] lg:text-[60px] font-bold leading-tight text-[#0F172A] mb-6">
                Book your ride in
                <span class="text-transparent bg-clip-text bg-gradient-to-r from-[#3B82F6] to-[#06B6D4]">
                    three simple steps
                </span>
            </h2>

            <p class="fade-up text-[19px] md:text-[22px] lg:text-[24px] text-slate-600 max-w-3xl mx-auto leading-8 lg:leading-9">
                Driftly makes shared travel simple, fast and comfortable from search to arrival.
            </p>

        </div>

        <div class="relative">

            <div class="hidden md:block absolute top-20 left-[16%] right-[16%] h-[2px] bg-gradient-to-r from-[#3B82F6]/20 via-[#06B6D4] to-[#3B82F6]/20"></div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-12">

                <div class="fade-up relative group text-center">
                    <div class="relative mx-auto mb-7 w-36 h-36 md:w-40 md:h-40 rounded-[2rem] bg-white shadow-xl border border-slate-100 flex items-center justify-center group-hover:-translate-y-2 transition duration-500">
                        <div class="absolute -top-4 -right-3 md:-top-5 md:-right-5 text-6xl font-black text-slate-300">01</div>
                        <div class="w-20 h-20 rounded-3xl bg-[#06B6D4]/10 flex items-center justify-center group-hover:bg-[#06B6D4]/20 transition">
                            <i data-lucide="search" class="w-10 h-10 text-[#06B6D4]"></i>
                        </div>
                    </div>

                    <h3 class="text-[28px] md:text-[26px] lg:text-[30px] font-bold text-[#0F172A] mb-4">
                        Search your route
                    </h3>

                    <p class="text-slate-600 text-[19px] md:text-[18px] lg:text-[20px] leading-8">
                        Enter your departure city, destination and date to discover available rides instantly.
                    </p>
                </div>

                <div class="fade-up relative group text-center">
                    <div class="relative mx-auto mb-7 w-36 h-36 md:w-40 md:h-40 rounded-[2rem] bg-white shadow-xl border border-slate-100 flex items-center justify-center group-hover:-translate-y-2 transition duration-500">
                        <div class="absolute -top-4 -right-3 md:-top-5 md:-right-5 text-6xl font-black text-slate-300">02</div>
                        <div class="w-20 h-20 rounded-3xl bg-[#06B6D4]/10 flex items-center justify-center group-hover:bg-[#06B6D4]/20 transition">
                            <i data-lucide="ticket-check" class="w-10 h-10 text-[#06B6D4]"></i>
                        </div>
                    </div>

                    <h3 class="text-[28px] md:text-[26px] lg:text-[30px] font-bold text-[#0F172A] mb-4">
                        Book your seat
                    </h3>

                    <p class="text-slate-600 text-[19px] md:text-[18px] lg:text-[20px] leading-8">
                        Choose a trusted driver, reserve your seat and get all trip details in one place.
                    </p>
                </div>

                <div class="fade-up relative group text-center">
                    <div class="relative mx-auto mb-7 w-36 h-36 md:w-40 md:h-40 rounded-[2rem] bg-white shadow-xl border border-slate-100 flex items-center justify-center group-hover:-translate-y-2 transition duration-500">
                        <div class="absolute -top-4 -right-3 md:-top-5 md:-right-5 text-6xl font-black text-slate-300">03</div>
                        <div class="w-20 h-20 rounded-3xl bg-[#06B6D4]/10 flex items-center justify-center group-hover:bg-[#06B6D4]/20 transition">
                            <i data-lucide="car-front" class="w-10 h-10 text-[#06B6D4]"></i>
                        </div>
                    </div>

                    <h3 class="text-[28px] md:text-[26px] lg:text-[30px] font-bold text-[#0F172A] mb-4">
                        Travel together
                    </h3>

                    <p class="text-slate-600 text-[19px] md:text-[18px] lg:text-[20px] leading-8">
                        Meet your driver, enjoy the trip and share your experience with a rating.
                    </p>
                </div>

            </div>

        </div>

    </div>

</section>

<section class="max-w-7xl mx-auto px-5 md:px-6 py-16 md:py-24 lg:py-28">

    <div class="text-center mb-14">

        <div class="fade-up inline-flex items-center gap-2 bg-[#06B6D4]/10 border border-[#06B6D4]/10 rounded-full px-4 py-2 text-[14px] text-slate-700 shadow-sm mb-6">
            <span class="w-2 h-2 rounded-full bg-[#06B6D4]"></span>
            Loved by riders and drivers
        </div>

        <h2 class="fade-up text-[38px] md:text-[48px] lg:text-[60px] font-bold leading-tight text-[#0F172A] mb-6">
            Real stories from
            <span class="text-transparent bg-clip-text bg-gradient-to-r from-[#3B82F6] to-[#06B6D4]">
                happy users
            </span>
        </h2>

        <p class="fade-up text-[19px] md:text-[22px] lg:text-[24px] text-slate-600 max-w-3xl mx-auto leading-8 lg:leading-9">
            See how Driftly helps riders travel smarter and drivers earn more from every journey.
        </p>

    </div>

    <div id="testimonials">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 md:gap-6 animate-pulse">
            <div class="h-64 bg-white rounded-3xl shadow-sm"></div>
            <div class="h-64 bg-white rounded-3xl shadow-sm"></div>
            <div class="h-64 bg-white rounded-3xl shadow-sm"></div>
            <div class="h-64 bg-white rounded-3xl shadow-sm"></div>
        </div>
    </div>

</section>

<section class="relative overflow-hidden py-16 md:py-24 lg:py-28">

    <div class="absolute inset-0 bg-gradient-to-br from-[#3B82F6] via-[#06B6D4] to-[#0891B2]"></div>
    <div class="absolute -top-32 left-1/2 -translate-x-1/2 w-[360px] h-[360px] md:w-[700px] md:h-[700px] bg-white/20 rounded-full blur-3xl"></div>

    <div class="relative z-10 max-w-5xl mx-auto px-5 md:px-6 text-center">

        <div class="fade-up inline-flex items-center gap-2 bg-white/15 border border-white/20 rounded-full px-4 py-2 text-[14px] text-white shadow-sm mb-8">
            <span class="w-2 h-2 rounded-full bg-white"></span>
            Start your journey today
        </div>

        <h2 class="fade-up text-[40px] md:text-[56px] lg:text-6xl font-bold leading-tight text-white mb-7">
            Ready for your
            <span class="text-white/80">
                next ride?
            </span>
        </h2>

        <p class="fade-up text-[19px] md:text-[22px] lg:text-[24px] text-cyan-50 leading-8 lg:leading-9 max-w-3xl mx-auto mb-10">
            Join thousands of riders and drivers already using Driftly to travel smarter, save money and connect cities.
        </p>

        <div class="fade-up flex flex-col md:flex-row justify-center gap-4 md:gap-5">

            <a href="/driftly/public/" data-link
                class="w-full md:w-auto bg-white text-[#0F172A] px-8 py-4 rounded-2xl text-[17px] font-semibold shadow-2xl hover:scale-[1.03] transition duration-300">
                Find a ride
            </a>

            <a href="/driftly/public/register" data-link
                class="w-full md:w-auto bg-white/10 backdrop-blur-xl border border-white/20 text-white px-8 py-4 rounded-2xl text-[17px] font-semibold hover:bg-white/15 transition duration-300">
                Become a driver
            </a>

        </div>

        <div class="fade-up mt-14 md:mt-20 grid grid-cols-1 md:grid-cols-3 gap-5 md:gap-6">

            <div class="bg-white/10 backdrop-blur-xl border border-white/10 rounded-3xl p-6">
                <div class="text-5xl md:text-4xl lg:text-5xl font-bold text-white mb-2">
                    12k+
                </div>

                <div class="text-cyan-100 text-[17px] md:text-base">
                    Completed rides
                </div>
            </div>

            <div class="bg-white/10 backdrop-blur-xl border border-white/10 rounded-3xl p-6">
                <div class="text-5xl md:text-4xl lg:text-5xl font-bold text-white mb-2">
                    4.9
                </div>

                <div class="text-cyan-100 text-[17px] md:text-base">
                    Average rating
                </div>
            </div>

            <div class="bg-white/10 backdrop-blur-xl border border-white/10 rounded-3xl p-6">
                <div class="text-5xl md:text-4xl lg:text-5xl font-bold text-white mb-2">
                    25+
                </div>

                <div class="text-cyan-100 text-[17px] md:text-base">
                    Connected cities
                </div>
            </div>

        </div>

    </div>
</section>