<!-- Navigation -->
<header class="nav">
    <div class="nav__holder nav--sticky">
        <div class="container-fluid nav__container nav__container--side-padding">
            <div class="flex-parent">

                <div class="nav__header">
                    <!-- Logo -->


                    <!-- Mobile toggle -->
                    <button type="button" class="nav__icon-toggle" id="nav__icon-toggle" data-toggle="collapse"
                            data-target="#navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="nav__icon-toggle-bar"></span>
                        <span class="nav__icon-toggle-bar"></span>
                        <span class="nav__icon-toggle-bar"></span>
                    </button>
                </div>

                <!-- Navbar -->
                <nav id="navbar-collapse" class="nav__wrap collapse nav--align-center navbar-collapse">
                    <ul class="nav__menu">
                        <li class="brand">
                            <a href="/brand" aria-haspopup="true">Brands</a>

                        </li>

                        <li class="about">
                            <a href="/about-us" aria-haspopup="true">About</a>

                        </li>
                        <li class="sector nav__dropdown ">
                            <a href="javascript:;" aria-haspopup="true">Sectors</a>
                            <i class="ui-arrow-down nav__dropdown-trigger" role="button" aria-haspopup="true"
                               aria-expanded="false"></i>
                            <ul class="nav__dropdown-menu">
                                <li><a href="/manufacturing">Manufacturing</a></li>
                                <li><a href="/sports-entertainment">Sports & Entertainment</a></li>
                                <li><a href="/realestate">Real Estate</a></li>
                                <li><a href="/services">Services</a></li>
                            </ul>

                        </li>
                        <!-- <li class="nav__dropdown">
                            <a href="#" aria-haspopup="true">Careers</a>
                            <i class="ui-arrow-down nav__dropdown-trigger" role="button" aria-haspopup="true" aria-expanded="false"></i>
                            <ul class="nav__dropdown-menu">
                                <li><a href="icons.html">Icons</a></li>
                                <li><a href="elements.html">Elements</a></li>
                            </ul>
                        </li> -->
                        <li class="news">
                            <a href="/news" aria-haspopup="true">News</a>

                        </li>

                        <a href="{{route('homepage')}}" class="logo-container flex-child">
                            <img class="logomob" src="{{asset('img/logo.png')}}" loading="lazy" width="125" alt="AQO">
                        </a>
                        <li class="Careers">
                            <a href="/careers" aria-haspopup="true">Careers</a>

                        </li>
                        <li class="Contact">
                            <a href="/contact-us" aria-haspopup="true">Contact</a>

                        </li>
                        <li>
                            <div class="so">
                                <form id="searchForm" action="{{route('search')}}" method="GET">
                                    <ul class="ul-search">
                                        <li><input name="keyword" placeholder="Search..." type="text" class="search" style="height:30px;"></li>
                                        <li class="icon-search">
                                            <a href="javascript:;" onclick="document.getElementById('searchForm').submit();">
                                                <i class="ui-search"></i>
                                            </a>
                                        </li>
                                    </ul>
                                </form>
                            </div>
                        </li>
                    </ul> <!-- end menu -->


                    <div class="nav__socials nav__socials--mobile d-lg-none">
                        <div class="socials">
                            <a href="{{route('homepage')}}" class="logo-container flex-child">
                                <img class="" src="{{asset('img/logo.png')}}" loading="lazy" width="125" alt="AQO">
                            </a>
                        </div>
                    </div>
                </nav> <!-- end nav-wrap -->


                <div class="nav__ nav--align-right d-none d-lg-block">
                    {{-- <div class="so">
                        <form action="">
                            <ul class="ul-search">
                        <li><input type="text" class="search" style="height:30px;" ></li>
                        <li class="icon-search"><a href="#" ><i class="ui-search"></i></a></li>
                    </ul>
                    </div> --}}
                </div>

            </div> <!-- end flex-parent -->
        </div> <!-- end container -->

    </div>
</header> <!-- end navigation -->
