<!-- Header -->
<div class="top-header">
    <div class="container">
        <div class="header-left">
            <button class="nav-toggle" aria-label="Toggle Navigation">
                <span class="hamburger-line"></span>
                <span class="hamburger-line"></span>
                <span class="hamburger-line"></span>
            </button>
        </div>
        
        <div class="logo">  
            <!-- <h1>THE AMERICAN CLUB</h1>
            <span>SINGAPORE</span> -->
            <a href="/lepas/">
                <img src="/lepas/images/lepas_image/home_page/white_logo_lepas-min.png" class="logo-img default-logo">
                <img src="/lepas/images/lepas_image/home_page/black_logo.png" class="logo-img sticky-logo">
            </a>
        </div>

        <div class="header-right">
            <a href="#" class="language-toggle">EN</a>
            <a href="#" class="language-toggle">BM</a>
            <a href="#" class="language-toggle">CN</a>
        </div>
    </div>
</div>

<!-- Fullscreen Navigation Menu -->
<div class="fullscreen-nav">
    <button class="nav-close" aria-label="Close Navigation"></button>
    <div class="nav-content">
        <div class="nav-split">
            <div class="overlay-menu-left">
                <div class="main-nav">
                    <ul>
                        <li class="nav-parent">
                            <a href="#">ABOUT US</a>
                        </li>
                        <li class="nav-parent has-children">
                            <a class="parent" data-child="models">MODELS</a>
                        </li>
                        <li class="nav-child">
                            <a href="#"><i class="fa-solid fa-chevron-right"></i> L4</a>
                        </li>
                        <li class="nav-child">
                            <a href="#"><i class="fa-solid fa-chevron-right"></i> L6</a>
                        </li>
                        <li class="nav-child">
                            <a href="#"><i class="fa-solid fa-chevron-right"></i> L8</a>
                        </li>
                        <li class="nav-parent has-children">
                            <a class="parent" data-child="world">WORLD OF LEPAS</a>
                        </li>
                        <li class="nav-parent has-children">
                            <a class="parent" data-child="aftersales">AFTERSALES</a>
                        </li>
                        <li class="nav-parent">
                            <a href="#">NEWS & MEDIA</a>
                        </li>
                        <li class="nav-parent">
                            <a href="#">SERVICES</a>
                        </li>
                        <li class="nav-parent">
                            <a href="#">CONTACT US</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="nav-contact">
                <!-- Empty space for background image to show through -->
            </div>
        </div>
    </div>
</div>