<header>
    <div class="header-area">
        <div class="main-header">

            <!-- upper info section  -->
            <div class="header-top d-none d-sm-block">
                <div class="container">
                    <div class="row">
                        <div class="col-xl-12">
                            <div class="d-flex justify-content-between flex-wrap align-items-center">
                                <div class="header-info-left">
                                    <ul>
                                        <li><i class="fas fa-phone-alt"></i>{{ $settings->phone }}</li>

                                        <li>
                                            <i class="ti-email"></i>
                                            <a href="mailto:{{ $settings->email }}">{{ $settings->email }}</a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="header-info-right">
                                    <ul class="header-social">
                                        <li>
                                            <a href="#"><i class="fab fa-facebook"></i></a>
                                        </li>
                                        <li>
                                            <a href="#"><i class="fab fa-instagram"></i></a>
                                        </li>
                                        <li>
                                            <a href="#"><i class="fab fa-youtube"></i></a>
                                        </li>
                                        <li>
                                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- bottom navigation section -->
            <div class="header-bottom header-sticky header-v2">
                <div class="container">
                    <div class="row align-items-center">
                        <div class="col-xl-2 col-lg-2">
                            <div class="logo">
                                <a href="{{ url('') }}"><img loading="lazy" src="{{ asset($settings->logo) }}"
                                        alt="{{ $settings->site_name }}" /></a>
                            </div>
                        </div>
                        <div class="col-xl-10 col-lg-10">
                            <div class="main-menu f-right d-none d-lg-block">
                                <nav>
                                    <ul id="navigation">
                                        <li><a href="{{ url('') }}">Home</a></li>
                                        <li><a href="{{ url('about-us') }}">About</a></li>
                                        <li>
                                            <a href="{{ url('projects') }}">Projects</a>
                                            <ul class="submenu">
                                                @foreach ($settings->projects as $item)
                                                    <li>
                                                        <a href="{{ url('project/' . $item->slug) }}">
                                                            {{ $item->name }}
                                                        </a>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </li>
                                        <li><a href="{{ url('project/sports') }}">Sports</a></li>
                                        <li><a href="{{ url('project/agriculture') }}">Agriculture</a></li>
                                        <!--<li><a href="{{ url('scholarship') }}">Scholarship</a></li>-->
                                        <li><a href="{{ url('gallery') }}">Gallery</a></li>
                                        <li><a href="{{ url('master') }}">Login</a></li>
                                        <li>
                                            <div class="header-right-btn f-right ml-5">
                                                <a href="{{ url('volunteer') }}" class="header-btn"
                                                    style="">Volunteer</a>
                                                <a href="{{ url('donate-now') }}" class="header-btn2">Donate</a>
                                            </div>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="mobile_menu d-block d-lg-none"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
