<!-- ==== topbar start ==== -->
<div class="topbar d-none d-lg-block">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-12 col-lg-6">
                <div class="topbar__list-wrapper">
                    <ul class="topbar__list">
                        <li><a href="mailto:support@example.com"><i
                                    class="fa-regular fa-envelope"></i>support@example.com</a>
                        </li>
                        <li><a href="tel:2305-587-3407"><i class="fa-solid fa-phone"></i>+2(305)
                                587-3407</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-12 col-lg-6">
                <div class="topbar__items justify-content-end">
                    <div class="select-country">
                        <select name="country" class="country-select select">
                            <option data-flag="fi-gb-eng">English</option>
                            <option data-flag="fi-us">Spanish</option>
                            <option data-flag="fi-cn">Chinese</option>
                            <option data-flag="fi-it">Italian</option>
                        </select>
                    </div>
                    <div class="select-currency">
                        <select name="currency" class="currency-select select">
                            <option value="usd">USD</option>
                            <option value="gbp">GBP</option>
                            <option value="aud">AUD</option>
                            <option value="euro">Euro</option>
                        </select>
                    </div>
                    <div class="social">
                        <a href="https://www.facebook.com/" target="_blank" aria-label="share us on facebook"
                            title="facebook">
                            <i class="fa-brands fa-facebook-f"></i>
                        </a>
                        <a href="https://vimeo.com/" target="_blank" aria-label="share us on vimeo" title="vimeo">
                            <i class="fa-brands fa-vimeo-v"></i>
                        </a>
                        <a href="https://x.com/" target="_blank" aria-label="share us on twitter" title="twitter">
                            <i class="fa-brands fa-twitter"></i>
                        </a>
                        <a href="https://www.linkedin.com/" target="_blank" aria-label="share us on linkedin"
                            title="linkedin">
                            <i class="fa-brands fa-linkedin-in"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ==== / topbar end ==== -->
<!-- ==== header start ==== -->
<header class="header header-primary">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="main-header__menu-box">
                    <nav class="navbar p-0">
                        <div class="navbar-logo">
                            <a href="{{ route('home') }}">
                                <img src="{{ asset('assets/images/logo.png') }}" alt="Image">
                            </a>
                        </div>
                        <div class="navbar__menu d-none d-xl-block">
                            <ul class="navbar__list">
                                <li class="navbar__item navbar__item--has-children nav-fade">
                                    <a href="#" aria-label="dropdown menu"
                                        class="navbar__dropdown-label dropdown-label-alter">Home</a>
                                    <ul class="navbar__sub-menu mega-menu">
                                        <li>
                                            <div class="mega-content-wrapper">
                                                <img src="{{ asset('assets/images/home-one.png') }}" alt="Image">
                                                <div class="mega-content">
                                                    <a href="{{ route('home') }}" class="btn--primary">View</a>
                                                </div>
                                            </div>
                                            <a href="{{ route('home') }}">Home One</a>
                                        </li>
                                        <li>
                                            <div class="mega-content-wrapper">
                                                <img src="{{ asset('assets/images/home-two.png') }}" alt="Image">
                                                <div class="mega-content">
                                                    <a href="{{ route('indexTwo') }}" class="btn--primary">View</a>
                                                </div>
                                            </div>
                                            <a href="{{ route('indexTwo') }}">Home Two</a>
                                        </li>
                                        <li>
                                            <div class="mega-content-wrapper">
                                                <img src="{{ asset('assets/images/home-three.png') }}" alt="Image">
                                                <div class="mega-content">
                                                    <a href="{{ route('indexThree') }}" class="btn--primary">View</a>
                                                </div>
                                            </div>
                                            <a href="{{ route('indexThree') }}">Home Three</a>
                                        </li>
                                        <li>
                                            <div class="mega-content-wrapper">
                                                <img src="{{ asset('assets/images/home-four.png') }}" alt="Image">
                                                <div class="mega-content">
                                                    <a href="{{ route('indexFour') }}" class="btn--primary">View</a>
                                                </div>
                                                <span class="new">New</span>
                                            </div>
                                            <a href="{{ route('indexFour') }}">Home Four</a>
                                        </li>
                                        <li>
                                            <div class="mega-content-wrapper">
                                                <img src="{{ asset('assets/images/home-five.png') }}" alt="Image">
                                                <div class="mega-content">
                                                    <a href="{{ route('indexFive') }}" class="btn--primary">View</a>
                                                </div>
                                                <span class="new">New</span>
                                            </div>
                                            <a href="{{ route('indexFive') }}">Home Five</a>
                                        </li>

                                        <li>
                                            <div class="mega-content-wrapper">
                                                <img src="{{ asset('assets/images/home-six.png') }}" alt="Image">
                                                <div class="mega-content">
                                                    <a href="{{ route('indexSix') }}" class="btn--primary">View</a>
                                                </div>
                                                <span class="new">New</span>
                                            </div>
                                            <a href="{{ route('indexSix') }}">Home Six</a>
                                        </li>
                                        <li>
                                            <div class="mega-content-wrapper">
                                                <img src="{{ asset('assets/images/home-seven.png') }}" alt="Image">
                                                <div class="mega-content">
                                                    <a href="{{ route('indexSeven') }}" class="btn--primary">View</a>
                                                </div>
                                                <span class="new">New</span>
                                            </div>
                                            <a href="{{ route('indexSeven') }}">Home Seven</a>
                                        </li>
                                        <li>
                                            <div class="mega-content-wrapper">
                                                <img src="{{ asset('assets/images/home-eight.png') }}" alt="Image">
                                                <div class="mega-content">
                                                    <a href="{{ route('indexEight') }}" class="btn--primary">View</a>
                                                </div>
                                                <span class="new">New</span>
                                            </div>
                                            <a href="{{ route('indexEight') }}">Home Eight</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="navbar__item nav-fade">
                                    <a href="{{ route('about') }}">About Us</a>
                                </li>
                                <li class="navbar__item navbar__item--has-children nav-fade">
                                    <a href="#" aria-label="dropdown menu"
                                        class="navbar__dropdown-label dropdown-label-alter">Causes</a>
                                    <ul class="navbar__sub-menu">
                                        <li>
                                            <a href="{{ route('our.causes') }}">Our Causes</a>
                                        </li>
                                        <li>
                                            <a href="{{ route('cause.details') }}">Cause Details</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="navbar__item navbar__item--has-children nav-fade">
                                    <a href="#" aria-label="dropdown menu"
                                        class="navbar__dropdown-label dropdown-label-alter">Pages</a>
                                    <ul class="navbar__sub-menu">
                                        <li>
                                            <a href="{{ route('faq') }}">FAQ</a>
                                        </li>
                                        <li>
                                            <a href="{{ route('donate.us') }}">Donate Us</a>
                                        </li>
                                        <li class="navbar__item navbar__item--has-children">
                                            <a aria-label="dropdown menu"
                                                class="navbar__dropdown-label navbar__dropdown-label-sub">Events</a>
                                            <ul class="navbar__sub-menu navbar__sub-menu__nested">
                                                <li>
                                                    <a href="{{ route('events') }}">Events</a>
                                                </li>
                                                <li>
                                                    <a href="{{ route('events.details') }}">Event Details</a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="navbar__item navbar__item--has-children">
                                            <a aria-label="dropdown menu"
                                                class="navbar__dropdown-label navbar__dropdown-label-sub">Shop</a>
                                            <ul class="navbar__sub-menu navbar__sub-menu__nested">
                                                <li>
                                                    <a href="{{ route('shop') }}">Our Shop</a>
                                                </li>
                                                <li>
                                                    <a href="{{ route('product.details') }}">Product Details</a>
                                                </li>
                                                <li>
                                                    <a href="{{ route('cart') }}">View Cart</a>
                                                </li>
                                                <li>
                                                    <a href="{{ route('checkout') }}">Cehckout</a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="navbar__item navbar__item--has-children">
                                            <a aria-label="dropdown menu"
                                                class="navbar__dropdown-label navbar__dropdown-label-sub">Team</a>
                                            <ul class="navbar__sub-menu navbar__sub-menu__nested">
                                                <li>
                                                    <a href="{{ route('our.team') }}">Our Teams</a>
                                                </li>
                                                <li>
                                                    <a href="{{ route('team.details') }}">Team Details</a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="{{ route('not.found') }}">Error</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="navbar__item navbar__item--has-children nav-fade">
                                    <a href="#" aria-label="dropdown menu"
                                        class="navbar__dropdown-label dropdown-label-alter">News</a>
                                    <ul class="navbar__sub-menu">
                                        <li>
                                            <a href="{{ route('blog') }}">News List View</a>
                                        </li>
                                        <li>
                                            <a href="{{ route('blog.grid') }}">News Grid View</a>
                                        </li>
                                        <li>
                                            <a href="{{ route('blog.details') }}">News Details</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="navbar__item nav-fade">
                                    <a href="{{ route('contact') }}">Contact Us</a>
                                </li>
                            </ul>
                        </div>
                        <div class="navbar__options">
                            <div class="navbar__mobile-options ">
                                <div class="contact-btn d-none d-xxl-flex">
                                    <div class="contact-icon">
                                        <i class="fa-solid fa-phone-volume"></i>
                                    </div>
                                    <div class="contact-content">
                                        <p>Call Us Now</p>
                                        <a href="tel:01-793-7938">(+01)-793-7938 </a>
                                    </div>
                                </div>
                                <div class="search-box">
                                    <button class="open-search" aria-label="search products" title="open search box">
                                        <i class="fa-solid fa-magnifying-glass"></i>
                                    </button>
                                </div>
                                <a href="{{ route('donate.us') }}" class="btn--primary d-none d-md-flex">Donate Now <i
                                        class="icon-circle-arrow"></i></a>
                            </div>
                            <button class="open-offcanvas-nav d-flex d-xl-none" aria-label="toggle mobile menu"
                                title="open offcanvas menu">
                                <span class="icon-bar top-bar"></span>
                                <span class="icon-bar middle-bar"></span>
                                <span class="icon-bar bottom-bar"></span>
                            </button>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</header>
<!-- ==== / header end ==== -->

<!-- ==================== Mobile Menu Start Here ==================== -->
@include('frontend.includes.partials.navbar')
<!-- ==================== Mobile Menu End Here ==================== -->

<!-- ==== search popup start ==== -->
<div class="search-popup">
    <button class="close-search" aria-label="close search box" title="close search box">
        <i class="fa-solid fa-xmark"></i>
    </button>
    <form action="#" method="post">
        @csrf
        <div class="search-popup__group">
            <input type="text" name="search-field" id="searchField" placeholder="Search...." required>
            <button type="submit" aria-label="search" title="search">
                <i class="fa-solid fa-magnifying-glass"></i>
            </button>
        </div>
    </form>
</div>
<!-- ==== / search popup end ==== -->
