<!-- Header -->
<button class="nav-toggle" aria-label="Toggle Navigation">
    <span class="hamburger-line"></span>
    <span class="hamburger-line"></span>
    <span class="hamburger-line"></span>
</button>
<button class="nav-close" aria-label="Close Navigation">
</button>
<div class="logo">  
    <!-- <h1>THE AMERICAN CLUB</h1>
    <span>SINGAPORE</span> -->
    <a href="/tac/"><img src="/tac/images/tac-logo.webp" alt="The American Club Logo" class="logo-img"></a>
</div>
<div class="header-right">
    <a href="/tac/login.php" class="member-link">Member</a>
    <span class="divider">|</span>
    <a class="search-toggle">Search <i class="fa-solid fa-magnifying-glass"></i></a>
</div>

<!-- Fullscreen Navigation Menu -->
<div class="fullscreen-nav">
    <div class="nav-content">
    <div class="nav-header">
    </div>
    <div class="nav-split">
        <div class="overlay-menu-left">
        <div class="main-nav">
            <ul>
            <li class="nav-parent">
                <span class="roman-num">I</span>
                <a href="#home">About Us</a>
            </li>
            <li class="nav-parent has-children">
                <span class="roman-num">II</span>
                <a class="parent" data-child="services">Services</a>
            </li>
            <li class="nav-parent has-children">
                <span class="roman-num">III</span>
                <a class="parent" data-child="events">News & Events</a>
            </li>
            <li class="nav-parent has-children">
                <span class="roman-num">IV</span>
                <a class="parent" data-child="media">Media</a>
            </li>
            <li class="nav-parent">
                <span class="roman-num">V</span>
                <a href="#">Contact Us</a>
            </li>
            <li class="nav-parent">
                <span class="roman-num">VI</span>
                <a href="#">Shop</a>
            </li>
            </ul>
        </div>
        <div class="nav-children" data-parent="services">
            <a href="#" class="main-child">More about services<i class="fa-solid fa-chevron-right"></i></a>
            <div class="sub-children">
            <a href="#">Wine & Dine</a>
            <a href="#">Fitness & Leisure</a>
            <a href="#">Youth & Family</a>
            <a href="#">Club Services</a>
            <a href="#">Member Services</a>
            </div>
        </div>
        <div class="nav-children" data-parent="events">
            <a href="#" class="main-child">More about events<i class="fa-solid fa-chevron-right"></i></a>
            <div class="sub-children">
            <a href="#">For companies</a>
            <a href="#">Weddings and celebrations</a>
            </div>
        </div>
        <div class="nav-children" data-parent="media">
            <a href="#" class="main-child">Important information<i class="fa-solid fa-chevron-right"></i></a>
            <div class="sub-children">
            <a href="#">Loyalty program</a>
            <a href="#">We think ecologically</a>
            <a href="#">Dual education</a>
            <a href="#">General contract terms</a>
            </div>
        </div>
        </div>
        <div class="nav-contact">
        <div class="contact-content">
            <a href="/tac/"><img src="/tac/images/tac-logo.webp" alt="The American Club Logo" class="logo-img"></a>
            <div class="contact-details">
            <h2>The American Club</h2>
            <p class="address">10 Claymore Hill<br>Singapore, 229573</p>
            <div class="contact-info">
                <p class="contact-phone">+65 6737 3411</p>
                <p class="contact-email">info@amclub.org.sg</p>
            </div>
            </div>
            <div class="social-links">
            <a href="#" aria-label="Facebook"><i class="fab fa-facebook"></i></a>
            <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
            <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
            </div>
        </div>
        </div>
    </div>
    </div>
</div>