<header class="navbar-light navbar-sticky">
    <!-- Nav top START -->
    <div class="navbar-top bg-dark d-none d-md-block py-1">
        <div class="container">
            <div class="d-md-flex justify-content-between align-items-center">
                <!-- Navbar top Left-->
                <div class="d-flex align-items-center justify-content-center">
                    <!-- Top info -->
                    <ul class="nav justify-content-center justify-content-md-start">
                        <li class="nav-item me-3">
                            <a class="navbar-link" href="#"><i class="fas fa-map-marker-alt me-2"></i>{{config.get('PROJECT_LOCATION')}}</a>
                        </li>
                        <li class="nav-item">
                            <a class="navbar-link" href="mailto:{{config.get('PROJECT_EMAIL')}}"><i
                                    class="fas fa-envelope me-2"></i>{{config.get('PROJECT_EMAIL')}}</a>
                        </li>
                    </ul>
                </div>

                <!-- Navbar top Right-->
                <div class="d-flex align-items-center justify-content-center">
                    <!-- Top social -->
                    <ul class="nav list-unstyled d-flex mb-0">
                        <li class="nav-item"> <a class="px-2 navbar-link" href="#"><i
                                    class="fab fa-facebook-f"></i></a> </li>
                        <li class="nav-item"> <a class="px-2 navbar-link" href="#"><i
                                    class="fab fa-instagram"></i></a> </li>
                        <li class="nav-item"> <a class="px-2 navbar-link" href="#"><i
                                    class="fab fa-twitter"></i></a> </li>
                        <li class="nav-item"> <a class="ps-2 navbar-link" href="#"><i
                                    class="fab fa-pinterest-p"></i></a> </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- Nav top END -->

    <!-- Logo Nav START -->
    <nav class="navbar navbar-expand-lg">
        <div class="container">
            <!-- Logo START -->
            <a class="navbar-brand" href="{{url_for('index')}}">
                <img class="navbar-brand-item" src="{{url_for('static', filename='dets/assets/images/logo.png')}}"
                    alt="logo">
            </a>
            <!-- Logo END -->

            <!-- Responsive navbar toggler -->
            <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <!-- Main navbar START -->
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="navbar-nav navbar-nav-scroll mx-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="{{url_for('index')}}">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{url_for('services')}}">Services</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{url_for('about_us')}}">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{url_for('contacts')}}">Contact</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{url_for('team')}}">Team</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{url_for('gallery')}}">Gallery</a>
                    </li>

                </ul>
            </div>
            <!-- Main navbar END -->

            <!-- Right nav START -->
            <div class="nav ms-3 ms-lg-0 d-none d-sm-block">
                <div class="nav-item d-flex">
                    <i class="bi bi-telephone-fill fs-4 text-success"></i>
                    <!-- Icon -->
                    <div class="ms-2">
                        <!-- Contact -->
                        <p class="mb-0">Call us now!</p>
                        <h6 class="mb-0"><a href="#">{{config.get('PROJECT_NUMBER')}}</a></h6>
                    </div>
                </div>

            </div>
            <!-- Right nav START -->
            <!-- <div class="nav-item d-none d-lg-block">
                <a class="nav-link fs-4 text-reset pe-0" data-bs-toggle="offcanvas" href="#offcanvasExample"
                    role="button" aria-controls="offcanvasExample"><i class="bi bi-text-right fs-2"> </i></a>
            </div> -->
        </div>
    </nav>
    <!-- Logo Nav END -->

</header>