<header class="header-container">
    <nav class="header-sub-container container mx-auto px-5">
        <div class="logo-container">
            <img src="https://gainskillsmedia.com/assets/logo/black-logo.webp" alt="gain skills" class="nav-logo" />
        </div>
        <div class="menu-btn-container">
            <div class="menu-btn-body" onclick="toggleNav()">
                <div class="menu-btn-lines"></div>
                <div class="menu-btn-lines"></div>
                <div class="menu-btn-lines"></div>
            </div>
        </div>
        <div class="nav-list-container lg:block hidden" id="nav-list-container">
            <ul class="ul-list">
                <li class="li-list"><a href="https://gainskillsmedia.com/" class="nav-link">Home</a></li>
                <li class="li-list" onclick="toggleAboutUs()">
                    <span class="nav-link p-0 border-none"><a class="nav-link" href="https://gainskillsmedia.com/pages/about.php"><span id="aboutUsText" class="nav-link-span">About Us <i id="aboutUsIcon" class="nav-icon"></i></span></a>
                        <ul class="sub-ul-list lg:block hidden" id="aboutUsList">
                            <li class="sub-li-list"><a href="https://gainskillsmedia.com/pages/about.php#meet-the-team" class="sub-link-list">Meet The Team</a></li>
                        </ul>
                    </span>
                </li>
                <li class="li-list" onclick="toggleEvents()">
                    <span class="nav-link"><span class="nav-link-span" id="eventsText">Events <i id="eventsIcon" class="nav-icon"></i></span>
                        <ul class="sub-ul-list lg:block hidden" id="eventsList">
                            <li class="sub-li-list"><a href="https://gainskillsmedia.com/pages/conference.php" class="sub-link-list">Conferences & Awards</a></li>
                            <li class="sub-li-list"><a href="https://gainskillsmedia.com/pages/bespoke.php" class="sub-link-list">Bespoke Events</a></li>
                            <li class="sub-li-list"><a href="https://gainskillsmedia.com/pages/digital.php" class="sub-link-list">Digital Events</a></li>
                        </ul>
                    </span>
                </li>
                <li class="li-list"><a href="https://gainskillsmedia.com/pages/sponsorship.php" class="nav-link">Sponsorship</a></li>
                <!-- <li class="li-list"><a href="" class="nav-link"></a></li> -->
                <li class="li-list" onclick="toggleHighlights()">
                    <span class="nav-link"><span class="nav-link-span" id="eventsText">Highlights <i id="eventsIcon" class="nav-icon"></i></span>
                        <ul class="sub-ul-list lg:block hidden" id="eventsList">
                            <li class="sub-li-list"><a href="https://gainskillsmedia.com/pages/bespoke.php" class="sub-link-list">Testimonials</a></li>
                            <li class="sub-li-list"><a href="https://gainskillsmedia.com/pages/gallery.php" class="sub-link-list">Gallery</a></li>
                        </ul>
                    </span>
                </li>
                <li class="li-list"><a href="https://article.gainskillsmedia.com/" class="nav-link">Article</a></li>
                <li class="li-list"><a href="https://gainskillsmedia.com/pages/contact.php" class="nav-link">Contact Us</a></li>
            </ul>
        </div>
    </nav>
</header>