<!DOCTYPE html>
<html lang="en">

<head>

    <title>{{config.get('PROJECT_NAME')}} | Team</title>
    {% include 'front/includes/import.top.html' %}
</head>

<body>

    <!-- Offcanvas START -->
    {% include 'front/includes/top.header.html' %}
    <!-- Offcanvas END -->

    <!-- =======================
Header START -->
    {% include 'front/includes/header.html' %}
    <!-- =======================
Header END -->

    <!-- **************** MAIN CONTENT START **************** -->
    <main>
        <!-- =======================
Portfolio START -->
        <div class="position-relative mb-4">
            <div class="container">

                <!-- Svg START -->
                <figure class="position-absolute top-0 start-0 d-none d-lg-block">
                    <svg class="fill-success" width="100" height="120" viewBox="0 0 28 36" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M12.938 35.125C12.138 34.625 11.538 34.325 11.038 33.825C9.53802 32.225 8.13802 30.625 6.73802 28.925C4.83802 26.725 3.13802 24.525 1.23802 22.325C-0.261981 20.625 -0.361981 20.125 0.738019 18.125C3.63802 12.525 7.63802 7.625 11.338 2.525C11.838 1.825 12.538 1.225 13.238 0.625C14.638 -0.375 15.938 -0.175 16.938 1.225C20.138 6.225 23.238 11.225 26.338 16.225C27.738 18.525 27.538 18.925 25.738 20.825C23.238 23.425 20.738 26.025 18.438 28.725C17.138 30.225 16.038 31.925 14.838 33.425C14.238 34.125 13.638 34.525 12.938 35.125ZM14.738 3.625C10.538 9.025 7.43802 14.625 4.03802 19.825C7.03802 23.725 9.83802 27.425 12.738 31.125C16.738 26.625 20.438 22.325 24.438 17.825C21.238 13.225 18.138 8.625 14.738 3.625Z">
                        </path>
                    </svg>
                </figure>
                <!-- Svg END -->
                <nav aria-label="breadcrumb my-3">
					<ol class="breadcrumb justify-content-cente mb-0 py-0">
						<li class="breadcrumb-item"><a href="{{url_for('index')}}" class="text-black">Home</a></li>
						<li class="breadcrumb-item"><a href="{{url_for('gallery')}}" class="text-black">Gallery</a>
						</li>
					</ol>
				</nav>
                <div class="row">
                    <div class="col-lg-6 text-center mx-auto">
                        <!-- Title -->
                        <h2 class="mb-3">Our Gallery</h2>
                    </div>
                </div><!-- Row END -->

                <!-- Nav Filters -->
                <div class="row">
                    <div class="col-lg-8 ms-lg-auto">
                        <!-- Nav tab START -->
                        <!-- <div class="grid-menu" data-target=".grid-container2">
                            <ul class="nav nav-pills nav-pill-bg-success mb-3">
                                <li class="nav-item"> <a data-filter="*" class="nav-link active">All</a> </li>
                                <li class="nav-item"> <a data-filter=".commercial" class="nav-link">Commercial</a> </li>
                                <li class="nav-item"> <a data-filter=".residential" class="nav-link">Residential</a>
                                </li>
                                <li class="nav-item"> <a data-filter=".hospital" class="nav-link">Hospital</a> </li>
                                <li class="nav-item"> <a data-filter=".repair" class="nav-link">Repair</a> </li>
                            </ul>
                        </div> -->
                        <!-- Nav tab END -->
                    </div>
                </div><!-- Row END -->

                <!-- Filter Items START -->
                <div class="row g-4 grid-container2 overflow-hidden" data-isotope='{"layoutMode": "masonry"}'>

                    <div class="col-sm-6 col-md-4 col-lg-3 grid-item commercial residential">
                        <!-- Card START -->
                        <div class="card rounded-3 card-hover-overlay">
                            <!-- Image -->
                            <img src="{{url_for('static', filename='dets/assets/images/project/14.jpg')}}"
                                class="card-image" alt="">
                            <!-- Card hover content -->
                            <div class="card-element-hover">
                                <div class="ms-auto">
                                    <!-- Popup -->
                                    <a class="icon-md rounded bg-white p-2 fs-6 text-primary" data-glightbox=""
                                        data-gallery="office-tour"
                                        href="{{url_for('static', filename='dets/assets/images/project/14.jpg')}}"><i
                                            class="fas fa-expand-arrows-alt"></i></a>
                                </div>
                                <div class="mt-auto text-white">
                                    <h6 class="mb-0"><a href="#" class="text-white text-primary-hover">Office
                                            renovation</a></h6>
                                </div>
                            </div>
                        </div>
                        <!-- Card END -->
                    </div>

                    <div class="col-sm-6 col-md-4 col-lg-3 grid-item commercial residential hospital repair">
                        <!-- Card START -->
                        <div class="card rounded-3 card-hover-overlay">
                            <!-- Image -->
                            <img src="{{url_for('static', filename='dets/assets/images/project/16.jpg')}}"
                                class="card-image" alt="">
                            <!-- Card hover content -->
                            <div class="card-element-hover">
                                <div class="ms-auto">
                                    <!-- Popup -->
                                    <a class="icon-md rounded bg-white p-2 fs-6 text-primary" data-glightbox=""
                                        data-gallery="office-tour"
                                        href="{{url_for('static', filename='dets/assets/images/project/16.jpg')}}"><i
                                            class="fas fa-expand-arrows-alt"></i></a>
                                </div>
                                <div class="mt-auto text-white">
                                    <h6 class="mb-0"><a href="#" class="text-white text-primary-hover">Office
                                            renovation</a></h6>
                                </div>
                            </div>
                        </div>
                        <!-- Card END -->
                    </div>

                    <div class="col-sm-6 col-md-4 col-lg-3 grid-item commercial repair">
                        <!-- Card START -->
                        <div class="card rounded-3 card-hover-overlay">
                            <!-- Image -->
                            <img src="{{url_for('static', filename='dets/assets/images/project/15.jpg')}}"
                                class="card-image" alt="">
                            <!-- Card hover content -->
                            <div class="card-element-hover">
                                <div class="ms-auto">
                                    <!-- Popup -->
                                    <a class="icon-md rounded bg-white p-2 fs-6 text-primary" data-glightbox=""
                                        data-gallery="office-tour"
                                        href="{{url_for('static', filename='dets/assets/images/project/15.jpg')}}"><i
                                            class="fas fa-expand-arrows-alt"></i></a>
                                </div>
                                <div class="mt-auto text-white">
                                    <h6 class="mb-0"><a href="#" class="text-white text-primary-hover">Office
                                            renovation</a></h6>
                                </div>
                            </div>
                        </div>
                        <!-- Card END -->
                    </div>

                    <div class="col-sm-6 col-md-4 col-lg-3 grid-item residential hospital">
                        <!-- Card START -->
                        <div class="card rounded-3 card-hover-overlay">
                            <!-- Image -->
                            <img src="{{url_for('static', filename='dets/assets/images/project/17.jpg')}}"
                                class="card-image" alt="">
                            <!-- Card hover content -->
                            <div class="card-element-hover">
                                <div class="ms-auto">
                                    <!-- Popup -->
                                    <a class="icon-md rounded bg-white p-2 fs-6 text-primary" data-glightbox=""
                                        data-gallery="office-tour" href="assets/images/project/17.jpg"><i
                                            class="fas fa-expand-arrows-alt"></i></a>
                                </div>
                                <div class="mt-auto text-white">
                                    <h6 class="mb-0"><a href="#" class="text-white text-primary-hover">Office
                                            renovation</a></h6>
                                </div>
                            </div>
                        </div>
                        <!-- Card END -->
                    </div>

                    <div class="col-sm-6 col-md-4 col-lg-3 grid-item commercial residential hospital">
                        <!-- Card START -->
                        <div class="card rounded-3 card-hover-overlay">
                            <!-- Image -->
                            <img src="{{url_for('static', filename='dets/assets/images/project/18.jpg')}}"
                                class="card-image" alt="">
                            <!-- Card hover content -->
                            <div class="card-element-hover">
                                <div class="ms-auto">
                                    <!-- Popup -->
                                    <a class="icon-md rounded bg-white p-2 fs-6 text-primary" data-glightbox=""
                                        data-gallery="office-tour" href="assets/images/project/18.jpg"><i
                                            class="fas fa-expand-arrows-alt"></i></a>
                                </div>
                                <div class="mt-auto text-white">
                                    <h6 class="mb-0"><a href="#" class="text-white text-primary-hover">Office
                                            renovation</a></h6>
                                </div>
                            </div>
                        </div>
                        <!-- Card END -->
                    </div>

                    <div class="col-sm-6 col-md-4 col-lg-3 grid-item commercial hospital ">
                        <!-- Card START -->
                        <div class="card rounded-3 card-hover-overlay">
                            <!-- Image -->
                            <img src="{{url_for('static', filename='dets/assets/images/project/20.jpg')}}"
                                class="card-image" alt="">
                            <!-- Card hover content -->
                            <div class="card-element-hover">
                                <div class="ms-auto">
                                    <!-- Popup -->
                                    <a class="icon-md rounded bg-white p-2 fs-6 text-primary" data-glightbox=""
                                        data-gallery="office-tour" href="assets/images/project/20.jpg"><i
                                            class="fas fa-expand-arrows-alt"></i></a>
                                </div>
                                <div class="mt-auto text-white">
                                    <h6 class="mb-0"><a href="#" class="text-white text-primary-hover">Office
                                            renovation</a></h6>
                                </div>
                            </div>
                        </div>
                        <!-- Card END -->
                    </div>

                    <div class="col-sm-6 col-md-4 col-lg-6 grid-item residential repair">
                        <!-- Card START -->
                        <div class="card rounded-3 card-hover-overlay">
                            <!-- Image -->
                            <img src="{{url_for('static', filename='dets/assets/images/project/16.jpg')}}"
                                class="card-image" alt="">

                            <!-- Card hover content -->
                            <div class="card-element-hover">
                                <div class="ms-auto">
                                    <!-- Popup -->
                                    <a class="icon-md rounded bg-white p-2 fs-6 text-primary" data-glightbox=""
                                        data-gallery="office-tour" href="assets/images/project/16.jpg"><i
                                            class="fas fa-expand-arrows-alt"></i></a>
                                </div>
                                <div class="mt-auto text-white">
                                    <h6 class="mb-0"><a href="#" class="text-white text-primary-hover">Office
                                            renovation</a></h6>
                                </div>
                            </div>
                        </div>
                        <!-- Card END -->
                    </div>

                    <div class="col-sm-6 col-md-4 col-lg-3 grid-item Commercial residentiall hospital">
                        <!-- Card START -->
                        <div class="card rounded-3 card-hover-overlay">
                            <!-- Image -->
                            <img src="{{url_for('static', filename='dets/assets/images/project/19.jpg')}}"
                                class="card-image" alt="">
                            <!-- Card hover content -->
                            <div class="card-element-hover">
                                <div class="ms-auto">
                                    <!-- Popup -->
                                    <a class="icon-md rounded bg-white p-2 fs-6 text-primary" data-glightbox=""
                                        data-gallery="office-tour" href="assets/images/project/19.jpg"><i
                                            class="fas fa-expand-arrows-alt"></i></a>
                                </div>
                                <div class="mt-auto text-white">
                                    <h6 class="mb-0"><a href="#" class="text-white text-primary-hover">Office
                                            renovation</a></h6>
                                </div>
                            </div>

                        </div>
                        <!-- Card END -->
                    </div>

                    <div class="col-sm-6 col-md-4 col-lg-3 grid-item hospital repair">
                        <!-- Card START -->
                        <div class="card rounded-3 card-hover-overlay">
                            <!-- Image -->
                            <img src="{{url_for('static', filename='dets/assets/images/project/21.jpg')}}"
                                class="card-image" alt="">

                            <!-- Card hover content -->
                            <div class="card-element-hover">
                                <div class="ms-auto">
                                    <!-- Popup -->
                                    <a class="icon-md rounded bg-white p-2 fs-6 text-primary" data-glightbox=""
                                        data-gallery="office-tour" href="assets/images/project/21.jpg"><i
                                            class="fas fa-expand-arrows-alt"></i></a>
                                </div>
                                <div class="mt-auto text-white">
                                    <h6 class="mb-0"><a href="#" class="text-white text-primary-hover">Office
                                            renovation</a></h6>
                                </div>
                            </div>

                        </div>
                        <!-- Card END -->
                    </div>

                    <div class="col-sm-6 col-md-4 col-lg-3 grid-item commercial residential hospital">
                        <!-- Card START -->
                        <div class="card rounded-3 card-hover-overlay">
                            <!-- Image -->
                            <img src="{{url_for('static', filename='dets/assets/images/project/22.jpg')}}"
                                class="card-image" alt="">
                            <!-- Card hover content -->
                            <div class="card-element-hover">
                                <div class="ms-auto">
                                    <!-- Popup -->
                                    <a class="icon-md rounded bg-white p-2 fs-6 text-primary" data-glightbox=""
                                        data-gallery="office-tour" href="assets/images/project/22.jpg"><i
                                            class="fas fa-expand-arrows-alt"></i></a>
                                </div>
                                <div class="mt-auto text-white">
                                    <h6 class="mb-0"><a href="#" class="text-white text-primary-hover">Office
                                            renovation</a></h6>
                                </div>
                            </div>
                        </div>
                        <!-- Card END -->
                    </div>

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

            </div>
        </div>
        <section class="position-relative py-4">
            <div class="container">
                <div class="row mb-4">
                    <div class="col-lg-8 mx-auto text-center">
                        <!-- Title -->
                        <h2 class="mb-0">Why Choose Us?</h2>
                    </div>
                </div><!-- Row END -->
                <div class="row g-0">

                    <div class="col-xxl-7">
                        <div class="row g-4">

                            <div class="col-sm-6">
                                <!-- Card START -->
                                <div class="card card-body bg-transparent p-0">
                                    <!-- icon -->
                                    <div class="icon-md bg-primary bg-opacity-10 rounded">
                                        <img src="{{url_for('static', filename='dets/assets/images/element/24-hours-support.svg')}}"
                                            class="w-30" alt="">
                                    </div>
                                    <!-- Title -->
                                    <h5 class="my-3">24/7 availability</h5>
                                    <!-- Content -->
                                    <p class="mb-0">Continuous availability and access every day, all day, without
                                        interruption or limitation, encompassing all 24 hours of each day and all 7 days
                                        of each week.</p>
                                </div>
                                <!-- Card END -->
                            </div>

                            <div class="col-sm-6">
                                <!-- Card START -->
                                <div class="card card-body bg-transparent p-0">
                                    <!-- icon -->
                                    <div class="icon-md bg-primary bg-opacity-10 rounded">
                                        <img src="{{url_for('static', filename='dets/assets/images/element/winner.svg')}}"
                                            class="w-30" alt="">
                                    </div>
                                    <!-- Title -->
                                    <h5 class="my-3">Certified products</h5>
                                    <!-- Content -->
                                    <p class="mb-0">Products that have undergone rigorous testing and evaluation to meet
                                        established standards and have received official certification, confirming their
                                        quality, safety, and reliability.</p>
                                </div>
                                <!-- Card END -->
                            </div>

                            <div class="col-sm-6">
                                <!-- Card START -->
                                <div class="card card-body bg-transparent p-0">
                                    <!-- icon -->
                                    <div class="icon-md bg-primary bg-opacity-10 rounded">
                                        <img src="{{url_for('static', filename='dets/assets/images/element/calendar.svg')}}"
                                            class="w-30" alt="">
                                    </div>
                                    <!-- Title -->
                                    <h5 class="my-3">No hidden cost</h5>
                                    <!-- Content -->
                                    <p class="mb-0">Transparent pricing with no additional or unexpected charges,
                                        ensuring that all costs are clearly disclosed and there are no concealed fees or
                                        expenses.</p>
                                </div>
                                <!-- Card END -->
                            </div>

                            <div class="col-sm-6">
                                <!-- Card START -->
                                <div class="card card-body bg-transparent p-0">
                                    <!-- icon -->
                                    <div class="icon-md bg-primary bg-opacity-10 rounded">
                                        <img src="{{url_for('static', filename='dets/assets/images/element/offer.svg')}}"
                                            class="w-30" alt="">
                                    </div>
                                    <!-- Title -->
                                    <h5 class="my-3">Affordable prices</h5>
                                    <!-- Content -->
                                    <p class="mb-0">Prices that are reasonable and within reach for a wide range of
                                        budgets, providing good value for the quality of the products or services
                                        offered.</p>
                                </div>
                                <!-- Card END -->
                            </div>
                        </div><!-- Row END -->
                    </div>

                </div><!-- RoW END -->
            </div>

            <!-- Right side image -->
            <div class="col-5 position-absolute top-50 end-0 translate-middle-y d-none d-xxl-block">
                <!-- Image -->
                <img src="{{url_for('static', filename='dets/assets/images/bg/10.jpg')}}" alt="">
            </div>

        </section>
        <section class="bg-dark py-0">
            <div class="container position-relative">

                <div class="position-absolute start-0 bottom-0 d-none d-lg-block">
                    <!-- Image -->
                    <img src="{{url_for('static', filename='dets/assets/images/element/plumber-03.png')}}" alt="">
                </div>

                <div class="row py-4 justify-content-sm-end mt-4">
                    <div class="col-lg-10 text-center">
                        <!-- Title -->
                        <h3 class="text-white mb-3">Contact us to get our products and services</h3>
                        <div class="d-flex flex-wrap gap-3 justify-content-center">
                            <!-- Title -->
                            <h4 class="text-white mb-0 me-3">Call Now</h4>
                            <h4 class="mb-0"><a href="#"
                                    class="text-success text-primary-hover mb-0">{{config.get('PROJECT_NUMBER')}}</a>
                            </h4>
                        </div>
                    </div>
                </div><!-- Row END -->
            </div>
        </section>

    </main>
    <!-- **************** MAIN CONTENT END **************** -->

    <!-- **************** MAIN CONTENT END **************** -->

    <!-- =======================
Footer START -->

    {% include 'front/includes/footer.html' %}
    <!-- =======================
Footer END -->

    <!-- Back to top -->
    <div class="back-top"><i class="bi bi-arrow-up-short"></i></div>

    <!-- =======================
JS libraries, plugins and custom scripts -->

    <!-- Bootstrap JS -->
    {% include 'front/includes/import.bottom.html' %}

</body>

</html>