<section class="hero-slider-wrapper">

    <!-- Background Slider -->
    <div id="heroCarousel" class="carousel slide carousel-fade" data-ride="carousel" data-interval="6000">

        <div class="carousel-inner">

            <div class="carousel-item active">
                <div class="hero-slide" style="background-image: url('assets/images/hero1.webp');"></div>
            </div>

            <div class="carousel-item">
                <div class="hero-slide" style="background-image: url('assets/images/hero2.webp');"></div>
            </div>

            <div class="carousel-item">
                <div class="hero-slide" style="background-image: url('assets/images/hero3.webp');"></div>
            </div>

        </div>

    </div>

    <!-- Overlay Content -->
    <div class="hero-overlay">
        <div class="container">
            <div class="row align-items-center hero-content">

                <!-- Left Text -->
                <div class="col-lg-6">
                    <h1 class="hero-title">
                        Executive Mobility.<br>
                        <span class="gold-text">Elevated Experience.</span>
                    </h1>

                    <p class="mt-4 text-muted">
                        Premium airport transfers, chauffeur services,
                        and executive concierge coordination across Singapore.
                    </p>

                    <a href="#contact" class="btn btn-gold mt-4">
                        Book Now
                    </a>
                </div>

                <!-- Right Estimator -->
                <div class="col-lg-6">
                    <div class="price-card">

                        <h5 class="gold-text mb-4">Quick Price Estimate</h5>

                        <form id="priceForm">

                            <select id="service" class="form-control mb-3">
                                <option value="arrival">Airport Arrival ($65)</option>
                                <option value="departure">Airport Departure</option>
                                <option value="point">Point to Point ($65)</option>
                                <option value="city">City Tour ($120)</option>
                                <option value="limo">Limousine ($120)</option>
                                <option value="hourly">Hourly Booking</option>
                            </select>

                            <select id="zone" class="form-control mb-3">
                                <option value="0">Select Zone</option>
                                <option value="60">East ($60)</option>
                                <option value="70">North ($70)</option>
                                <option value="70">West ($70)</option>
                                <option value="70">Central ($70)</option>
                            </select>

                            <input type="number" id="hours" min="1" value="1" class="form-control mb-3">

                            <h4 class="gold-text mt-3" id="estimatedPrice">$65</h4>

                            <button type="button" class="btn btn-gold btn-block mt-3">
                                Proceed to Booking
                            </button>

                        </form>

                    </div>
                </div>

            </div>
        </div>
    </div>

</section>
