<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasExample">
    <div class="offcanvas-header bg-primary bg-opacity-10 justify-content-end">
        <!-- Close button  -->
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <!-- Body START -->
    <div class="offcanvas-body">
        <!-- Image -->
        <div class="navbar-brand">
            <img class="navbar-brand-item" src="{{url_for('static', filename='dets/assets/images/logo.png')}}"
                alt="logo">
        </div>
        <ul class="nav d-block flex-column mb-4">
            <li class="nav-item">
                <a class="nav-link fs-5" href="{{url_for('index')}}">Home</a>
            <li class="nav-item">
                <a class="nav-link fs-5" href="{{url_for('about_us')}}">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link fs-5" href="{{url_for('services')}}">Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link fs-5" href="{{url_for('contacts')}}">Contact Us</a>
            </li>
            <li class="nav-item">
                <a class="nav-link fs-5" href="{{url_for('team')}}">Team</a>
            </li>
            <li class="nav-item">
                <a class="nav-link fs-5" href="{{url_for('gallery')}}">Gellery</a>
            </li>
        </ul>
        <!-- Nav END -->

        <div class="mt-auto pb-3">
            <!-- Address -->
            <address class="mb-0">{{config.get('PROJECT_LOCATION')}}</address>
            <p class="mb-2">Call: <a href="#" class="text-body text-primary-hover">{{config.get('PROJECT_NUMBER')}}</a> </p>
            <a href="mailto:{{config.get('PROJECT_EMAIL')}}" class="text-body d-block">{{config.get('PROJECT_EMAIL')}}</a>
        </div>

    </div>
</div>