<footer class="bg-light pt-5">
    <div class="container">
        <div class="row g-4">

            <!-- Widget 1 START -->
            <div class="col-sm-6 col-lg-4">
                <!-- Logo -->
                <img src="{{url_for('static', filename='dets/assets/images/logo.png')}}"
                    class="footer-brand-item mb-3" alt="logo">
                <!-- Content -->
                <p class="text-dark">We are a professional oil energy providerd who are
                    experienced in handling various kinds of oil products. we strongly maintain
                    quality in product. let's make a big deal!</p>
                <!-- Social Button -->
                <ul class="list-inline mb-0">
                    <li class="list-inline-item">
                        <a href="#" class="btn btn-dark-social btn-round mb-0"><i
                                class="fab fa-fw fa-facebook-f"></i></a>
                    </li>
                    <li class="list-inline-item">
                        <a href="#" class="btn btn-dark-social btn-round mb-0"><i
                                class="fab fa-fw fa-twitter"></i></a>
                    </li>
                    <li class="list-inline-item">
                        <a href="#" class="btn btn-dark-social btn-round mb-0"><i
                                class="fab fa-fw fa-instagram"></i></a>
                    </li>
                    <li class="list-inline-item">
                        <a href="#" class="btn btn-dark-social btn-round mb-0"><i
                                class="fab fa-fw fa-linkedin-in"></i></a>
                    </li>
                </ul>
            </div>
            <!-- Widget 1 END -->

            <!-- Widget 2 START -->
            <div class="col-sm-6 col-lg-2">
                <h6 class="mb-4">Useful link</h6>
                
                <ul class="nav flex-column text-primary-hover">
                    <li class="nav-item"><a class="nav-link pt-0" href="{{url_for('index')}}">Home</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('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>
                </ul>
            </div>
            <!-- Widget 2 END -->

            <!-- Widget 3 START -->
            <div class="col-sm-6 col-lg-2">
                <h6 class="mb-4">Service</h6>
                <ul class="nav flex-column text-primary-hover">
                    <li>
                        {% for service in config.get('SERVICES').get('services') %}
                        {% set serv = config.get('SERVICES').get('services').get(service) %}
                        <li class="nav-item">
                        <a class="nav-link pt-0" href="{{url_for('service', id=service)}}">
                            {{serv.get('name')}} </a></li>
                        {% endfor %}
                    </li>
                </ul>
            </div>
            <!-- Widget 3 END -->

            <!-- Widget 4 START -->
            <div class="col-sm-6 col-lg-4">
                <h6 class="mb-4">Contact</h6>
                <p class="text-dark"><i class="fas fa-fw fa-map-marker-alt me-2"></i>{{config.get('PROJECT_LOCATION')}}</p>
                <ul class="nav flex-column text-primary-hover">
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fas fa-fw fa-phone-alt me-2"></i>{{config.get('PROJECT_NUMBER')}}</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="mailto:{{config.get('PROJECT_EMAIL')}}"><i class="fas fa-fw fa-envelope me-2"></i>{{config.get('PROJECT_EMAIL')}}</a>
                    </li>
                </ul>
            </div>
            <!-- Widget 4 END -->

        </div><!-- Row END -->

        <!-- Divider -->
        <hr class="mt-4 mb-0">

        <!-- Bottom footer -->
        <div class="row justify-content-md-between align-items-center py-4">

            <!-- Copy rights -->
            <div class="col-md-6">
                <div class="text-center text-md-start text-primary-hover text-dark">©{{config.get('YEAR')}} Site by
                    <a href="{{config.get('PROJECT_AUTHOR_URL')}}" class="text-info btn-link" target="_blank">{{config.get('PROJECT_AUTHOR')}}</a>.
                    All rights reserved</div>
            </div>

            <!-- Copy links -->
            <div class="col-md-6 ">
                <ul class="nav justify-content-center justify-content-md-end mt-3 mt-md-0">
                    <li class="nav-item"><a class="nav-link text-dark text-primary-hover p-0" href="{{url_for('terms_and_condition')}}">Terms</a>
                    </li>
                    <li class="nav-item"><a class="nav-link text-dark text-primary-hover p-0 ms-3"
                            href="{{url_for('privacy_policy')}}">Privacy</a></li>
                </ul>
            </div>
        </div>

    </div>
</footer>