@php
$about = App\About::find(1);

@endphp




<header>
    <div class="color-header color-header-2 c2 header-sticky" style="background-color: #FCC200;">
        <div class="container">
            <div class="row align-items-center">
                <div class="header__left d-flex align-items-center justify-content-between justify-content-lg-start">


                    <div class="col-xxl-3 col-xl-2 col-lg-2  col-md-2 col-sm-8">

                        <div class="logo-1">
                            <a href="{{ url('/') }}">
                                <img src="{{ asset('images/backend_images/' . $about->logo) }}" style="height:56px;"
                                    alt="logo">
                            </a>
                        </div>
                    </div>
                    <div class="col-xxl-7 col-xl-8 col-lg-10 d-none d-lg-block">
                        <div class="main-menu main-menu-3">
                            <nav id="mobile-menu">
                                <ul>
                                    <li><a href="{{ url('/') }}"
                                            style="color: #17662D;font-size:17px; font-weight:600">Home</a>

                                    </li>
                                    <li><a href="{{ url('/about') }}"
                                            style="color: #17662D;font-size:17px; font-weight:600">About Us</a></li>

                                    <li><a href="{{ url('/services') }}"
                                            style="color: #17662D;font-size:17px; font-weight:600">Services<i
                                                class="fal fa-angle-down"></i></a>
                                        <ul class="submenu">
                                            @foreach (App\Service::where('status', 1)->get() as $service)
                                                <li> <a
                                                        href="{{ url('/service_detail/' . $service->id) }}">{{ $service->name }}</a>
                                                </li>
                                            @endforeach

                                        </ul>
                                    </li>

                                    <li><a href="{{ url('/faq') }}"
                                            style="color: #17662D;font-size:17px; font-weight:600">FAQ</a> </li>


                                    <li><a href="{{ url('/news') }}"
                                            style="color: #17662D;font-size:17px; font-weight:600">News</a>

                                    </li>
                                    <li><a href="{{ url('/career') }}"
                                            style="color: #17662D;font-size:17px; font-weight:600">Careers</a>

                                    </li>
                                    <li><a href="{{ url('/contact') }}"
                                            style="color: #17662D;font-size:17px; font-weight:600">Contact Us</a></li>
                                </ul>


                            </nav>
                        </div>
                    </div>
                    <div class="col-xxl-2 col-xl-2 col-lg-1 col-md-4 col-sm-1  ">
                    <div class="header__right d-flex justify-content-end justify-content-xxl-between align-items-center pr-0">

                        <div class="header__btn d-none d-xl-block">
                            <a href="tel:{{ $about->mobile_no }}" class="btn py-3"
                                style="background-color:#17662D; color:#FCC200;font-size:17px;font-weight:bold">
                                <i class="flaticon-call py-3 px-1" style="font-size:20px;"></i>
                                {{ $about->mobile_no }}</a>
                        </div>

                    </div>
                </div>
                    <div class="col-2 col-sm-2 col-md-2 d-lg-none">
                        <div class="header__icons f-right c2">
                            <ul>
                                <li><a class="side-toggle" href="javascript:void(0)"><i
                                            class="pe-7s-keypad"></i></a>
                                </li>
                            </ul>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
</header>