{{ header }}
<style type="text/css">
    .ltn__gallery-item-img{
        text-align: center;
    }
    .ltn__gallery-item-img img{
        height: 230px;
    }
    .slick-dots li{
        margin: 0 4px !important;
    }
    .ltn__blog-item-3-normal .ltn__blog-item-3 {
        margin-bottom: 18px;
    }
    .ltn__gallery-filter-menu button, .ltn__tab-menu a{
        padding: 12px 30px;
    }
    .ltn__gallery-filter-menu .active, .ltn__tab-menu a.active {
        background-color: #C15B27;
        border-color: #C15B27;
    }
</style>
<!-- BREADCRUMB AREA START -->
    <div class="ltn__breadcrumb-area ltn__breadcrumb-area-2 ltn__breadcrumb-color-white bg-overlay-theme-black-90 bg-image" data-bg="{{ base }}catalog/view/theme/vb/img/banner/B1.png">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="ltn__breadcrumb-inner ltn__breadcrumb-inner-2 justify-content-between">
                        <div class="section-title-area ltn__section-title-2">
                            <h6 class="section-subtitle ltn__secondary-color">//  Welcome to v Believers</h6>
                            <h1 class="section-title">Our Gallery</h1>
                            <div class="ltn__breadcrumb-list">
                                <ul>
                                    <li><a href="{{ base }}">Home</a></li>
                                    <li>Gallery</li>
                                </ul>
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- BREADCRUMB AREA END -->

    <!-- Gallery area start -->
    <div class="ltn__gallery-area mb-120">
        <div class="container">
            
            <div class="row">
                <div class="col-lg-12">
                    <div class="ltn__gallery-menu">
                        <div class="ltn__gallery-filter-menu portfolio-filter text-uppercase mb-50">
                            <button data-filter="*" class="active">all</button>
                            {% for cat in cats %}
                                <button data-filter=".filter_category_{{cat.category_id}}">{{cat.name}}</button>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
           

            <!-- Portfolio Wrapper Start -->
            <div class="ltn__gallery-active row ltn__gallery-style-2 ltn__gallery-info-hide---">
                <div class="ltn__gallery-sizer col-1"></div>

                <!-- gallery-item -->
                {% for image in gallery %}
                    <div class="ltn__gallery-item filter_category_{{ image.cat_id }} col-lg-3 col-md-3 col-12">
                        <div class="ltn__gallery-item-inner">
                            <div class="ltn__gallery-item-img">
                                <a href="{{ image.image_url }}" data-rel="lightcase:myCollection">
                                    <img src="{{ image.image_url }}" alt="Image">
                                    <span class="ltn__gallery-action-icon">
                                        <i class="fas fa-search"></i>
                                    </span>
                                </a>
                            </div>
                            <div class="ltn__gallery-item-info">
                                <h4><a href="{{ image.prod_url }}">{{ image.prod_name }}</a></h4>
                                <p>{{ image.prod_des }}</p>
                            </div>
                        </div>
                    </div>    
                {% endfor %}
                
        </div>
    </div>
    <!-- Gallery area end -->


    <!-- BLOG AREA START (blog-3) -->
    <div class="ltn__blog-area pt-70 pb-70">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="section-title-area ltn__section-title-2 text-center">
                        <h1 class="section-title mb-4">Our Top Achievers</h1>
                    </div>
                </div>
            </div>
            <div class="row  ltn__blog-slider-one-active slick-arrow-1 ltn__blog-item-3-normal">
                <!-- Blog Item -->
                <div class="col-lg-12">
                    <div class="ltn__blog-item ltn__blog-item-3">
                        <div class="ltn__blog-img">
                            <img src="catalog/view/theme/vb/img/Achievers/Picture1.png" alt="#">
                        </div>
                       
                    </div>
                </div>
                <!-- Blog Item -->
                <div class="col-lg-12">
                    <div class="ltn__blog-item ltn__blog-item-3">
                        <div class="ltn__blog-img">
                         <img src="catalog/view/theme/vb/img/Achievers/Picture2.png" alt="#">
                        </div>
                        
                    </div>
                </div>
                <!-- Blog Item -->
                <div class="col-lg-12">
                    <div class="ltn__blog-item ltn__blog-item-3">
                        <div class="ltn__blog-img">
                            <img src="catalog/view/theme/vb/img/Achievers/Picture3.jpg" alt="#">
                        </div>
                      
                    </div>
                </div>
                <!-- Blog Item -->
                <div class="col-lg-12">
                    <div class="ltn__blog-item ltn__blog-item-3">
                        <div class="ltn__blog-img">
                            <img src="catalog/view/theme/vb/img/Achievers/Picture4.jpg" alt="#">
                        </div>
                       
                    </div>
                </div>
                <!-- Blog Item -->
                <div class="col-lg-12">
                    <div class="ltn__blog-item ltn__blog-item-3">
                        <div class="ltn__blog-img">
                           <img src="catalog/view/theme/vb/img/Achievers/Picture5.png" alt="#">
                        </div>
                      
                    </div>
                </div>
                <!--  -->
                 <!-- Blog Item -->
                 <div class="col-lg-12">
                    <div class="ltn__blog-item ltn__blog-item-3">
                        <div class="ltn__blog-img">
                           <img src="catalog/view/theme/vb/img/Achievers/Picture6.jpg" alt="#">
                        </div>
                      
                    </div>
                </div>
                <!--  -->
                 <!-- Blog Item -->
                 <div class="col-lg-12">
                    <div class="ltn__blog-item ltn__blog-item-3">
                        <div class="ltn__blog-img">
                           <img src="catalog/view/theme/vb/img/Achievers/Picture7.jpg" alt="#">
                        </div>
                      
                    </div>
                </div>
                <!--  -->
                 <!-- Blog Item -->
                 <div class="col-lg-12">
                    <div class="ltn__blog-item ltn__blog-item-3">
                        <div class="ltn__blog-img">
                           <img src="catalog/view/theme/vb/img/Achievers/Picture8.png" alt="#">
                        </div>
                      
                    </div>
                </div>
                <!--  -->
                 <!-- Blog Item -->
                 <div class="col-lg-12">
                    <div class="ltn__blog-item ltn__blog-item-3">
                        <div class="ltn__blog-img">
                           <img src="catalog/view/theme/vb/img/Achievers/Picture9.png" alt="#">
                        </div>
                      
                    </div>
                </div>
                <!--  -->
                 <!-- Blog Item -->
                 <div class="col-lg-12">
                    <div class="ltn__blog-item ltn__blog-item-3">
                        <div class="ltn__blog-img">
                           <img src="catalog/view/theme/vb/img/Achievers/Picture10.png" alt="#">
                        </div>
                      
                    </div>
                </div>
                <!--  -->
                 <!-- Blog Item -->
                 <div class="col-lg-12">
                    <div class="ltn__blog-item ltn__blog-item-3">
                        <div class="ltn__blog-img">
                           <img src="catalog/view/theme/vb/img/Achievers/Picture11.png" alt="#">
                        </div>
                      
                    </div>
                </div>
                <!--  -->
                 <!-- Blog Item -->
                 <div class="col-lg-12">
                    <div class="ltn__blog-item ltn__blog-item-3">
                        <div class="ltn__blog-img">
                           <img src="catalog/view/theme/vb/img/Achievers/Picture12.png" alt="#">
                        </div>
                      
                    </div>
                </div>
                <!--  -->
                 <!-- Blog Item -->
                 <div class="col-lg-12">
                    <div class="ltn__blog-item ltn__blog-item-3">
                        <div class="ltn__blog-img">
                           <img src="catalog/view/theme/vb/img/Achievers/Picture13.png" alt="#">
                        </div>
                      
                    </div>
                </div>
                <!--  -->
                 <!-- Blog Item -->
                 <div class="col-lg-12">
                    <div class="ltn__blog-item ltn__blog-item-3">
                        <div class="ltn__blog-img">
                           <img src="catalog/view/theme/vb/img/Achievers/Picture14.png" alt="#">
                        </div>
                      
                    </div>
                </div>
                <!--  -->
                
            </div>
        </div>
    </div>
    <!-- BLOG AREA END -->
{{ footer }}