<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Exclusive Concierge | Premium Executive Mobility</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Montserrat:wght@300;400;500;600&display=swap" rel="stylesheet">

    <!-- Bootstrap 4.6 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    

    <!-- Custom Luxury Styles -->
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/fleet.css">
    
</head>

<body>

<!-- NAVIGATION -->
<nav class="navbar navbar-expand-lg fixed-top">
    <div class="container">

        <a class="navbar-brand" href="index.php">
            Exclusive Concierge
        </a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse justify-content-end" id="navbarContent">
            <ul class="navbar-nav align-items-center">

                <li class="nav-item ml-2">
                    <a class="nav-link" href="#about">About</a>
                </li>

                <li class="nav-item ml-2">
                    <a class="nav-link" href="#services">Services</a>
                </li>

                <li class="nav-item ml-2">
                    <a class="nav-link" href="#fleet">Fleet</a>
                </li>

                <li class="nav-item ml-2">
                    <a class="nav-link" href="#whyus">Concierge</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#contact">Contact</a>
                </li>

                <!-- View Booking -->
                <li class="nav-item ml-2">
                    <a href="view_booking.php"
                       class="btn btn-outline-light btn-sm">
                        View Booking
                    </a>
                </li>
                
                <li class="nav-item ml-2">
                    <a href="booking.php" class="btn btn-gold-nav">
                        Book Now
                    </a>
                </li>

            </ul>
        </div>

    </div>
</nav>

<!-- Spacer to prevent content overlap -->
<div style="height:100px;"></div>

<script>
/* =====================================
   Scroll Effect (Shrink + Solid Background)
====================================== */
window.addEventListener("scroll", function() {
    const navbar = document.querySelector(".navbar");
    if (window.scrollY > 50) {
        navbar.classList.add("scrolled");
    } else {
        navbar.classList.remove("scrolled");
    }
});
</script>
