<header id="" class="navbar navbar-expand-lg navbar-light">
    <div class="header-area header-area--absolute">
        <div class="header-top-bar-info border-bottom">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="top-bar-wrap nav">
                            <div class="top-bar-left">
                                <ul class="mod-menu mod-list nav topbar-menu" style="font-family: 'ProximaNova-Semibold' !important;">
                                    <li class="nav-item item-1878" style="font-family: 'ProximaNova-Semibold' !important;"><a href="{{ route('home') }}" tabindex="0" style="font-family: 'ProximaNova-Semibold' !important;">Home</a></li>
                                    <li class="nav-item item-102"><a href="#" tabindex="0">Markets</a></li>
                                    <li class="nav-item item-212"><a href="#" tabindex="0">FAQs</a></li>
                                    <li class="nav-item item-1503"><a href="#" tabindex="0">About Us</a></li>
                                    <li class="nav-item item-105"><a href="#" tabindex="0">Products</a></li>
                                    <li class="nav-item item-349"><a href="#" tabindex="0">Resources</a></li>
                                </ul>
                            </div>
                            <div class="top-bar-right top-bar-right--actions">
                                @auth
                                    <a class="topbar-btn topbar-btn--primary" href="{{ route('member.account') }}">Invest Now</a>
                                @else
                                    @if (Route::has('register'))
                                        <a class="topbar-btn topbar-btn--dark" href="{{ route('register') }}">Register</a>
                                    @endif
                                    <a class="topbar-btn topbar-btn--primary" href="{{ route('login') }}">Invest Now</a>
                                @endauth
                                <a class="topbar-btn topbar-btn--dark" href="#">Help</a>
                                <div class="header-search-form-two d-none d-md-inline-block">
                                    <form action="#" class="search-form-top-active">
                                        <div class="search-icon" id="search-overlay-trigger"><a href="javascript:void(0)" aria-label="Search"><i class="fa-solid fa-magnifying-glass"></i></a></div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="body-overlay"></div>
        <div class="header-bottom-wrap header-sticky">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="header position-relative">
                            <div class="header__logo">
                                <a class="navbar-brand" href="{{ route('home') }}">
                                    <img src="{{ asset('media/zidii') }}/assets/img/ziidi3.png" alt="{{ config('app.name') }}" width="250" height="70">
                                </a>
                            </div>
                            <div class="header-right">
                                <div class="header__navigation menu-style-four d-none d-lg-flex">
                                    <nav class="navigation-menu">
                                        <ul>
                                            <li><a href="{{ route('home') }}">Home</a></li>
                                            <li><a href="#">Markets</a></li>
                                            <li><a href="#">FAQs</a></li>
                                            <li><a href="#">About Us</a></li>
                                            <li><a href="#">Products</a></li>
                                            <li><a href="#">Resources</a></li>
                                        </ul>
                                    </nav>
                                </div>
                                <div class="header-search-form-two d-block d-lg-none mobile-search">
                                    <form action="#" class="search-form-top-active">
                                        <div class="search-icon" id="search-overlay-trigger2"><a href="javascript:void(0)"><i class="fa-solid fa-magnifying-glass"></i></a></div>
                                    </form>
                                </div>
                                @auth
                                    <a href="{{ route('member.account') }}" class="nav-account-btn d-none d-lg-inline-flex">
                                        <i class="fa-solid fa-user" aria-hidden="true"></i>
                                        <span>My Account</span>
                                    </a>
                                    <a href="{{ route('member.account') }}" class="nav-account-btn nav-account-btn--mobile d-inline-flex d-lg-none">Account</a>
                                @else
                                    @if (Route::has('register'))
                                        <a href="{{ route('register') }}" class="nav-account-btn d-none d-lg-inline-flex">
                                            <span>Register</span>
                                        </a>
                                    @endif
                                    <a href="{{ route('login') }}" class="nav-account-btn d-none d-lg-inline-flex">
                                        <i class="fa-solid fa-user" aria-hidden="true"></i>
                                        <span>Log in</span>
                                    </a>
                                    @if (Route::has('register'))
                                        <a href="{{ route('register') }}" class="nav-account-btn nav-account-btn--mobile d-inline-flex d-lg-none">Register</a>
                                    @endif
                                    <a href="{{ route('login') }}" class="nav-account-btn nav-account-btn--mobile d-inline-flex d-lg-none">Log in</a>
                                @endauth
                                <div class="mobile-navigation-icon white-md-icon d-block d-lg-none" id="mobile-menu-trigger" aria-label="Open menu"><i></i></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Mobile menu overlay --}}
    <div class="mobile-menu-overlay" id="mobile-menu-overlay" aria-hidden="true">
        <div class="mobile-menu-overlay__inner">
            <div class="mobile-menu-overlay__header">
                <span class="mobile-navigation-close-icon" id="mobile-menu-close" aria-label="Close menu" role="button" tabindex="0"></span>
            </div>
            <div class="mobile-menu-overlay__body">
                <nav class="offcanvas-navigation">
                    <ul>
                        <li><a href="{{ route('home') }}">Home</a></li>
                        <li><a href="#">Markets</a></li>
                        <li><a href="#">FAQs</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Products</a></li>
                        <li><a href="#">Resources</a></li>
                        <li><a href="#">Help</a></li>
                        @auth
                            <li><a href="{{ route('member.account') }}">My Account</a></li>
                            <li><a href="{{ route('member.account') }}">Invest Now</a></li>
                        @else
                            @if (Route::has('register'))
                                <li><a href="{{ route('register') }}">Register</a></li>
                            @endif
                            <li><a href="{{ route('login') }}">Log in</a></li>
                            <li><a href="{{ route('login') }}">Invest Now</a></li>
                        @endauth
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</header>
