{% extends 'front/base.html' %}
{% load static %}
{% block title %} {{meta.meta_title}} - {{meta.meta_description}} {% endblock title %}
{% block title1 %} {{meta.meta_title}} - {{seo_settings.tag_line}} {% endblock title1 %}
{% block title2 %} {{meta.meta_title}} - {{seo_settings.tag_line}} {% endblock title2 %}
{% block content %}

<main class="creasoft-wrap layout2">

    <div class="line_wrap layout2">
        <div class="line_item"></div>
        <div class="line_item"></div>
        <div class="line_item"></div>
        <div class="line_item"></div>
        <div class="line_item"></div>
    </div>
      
<!--====================== background Section======================-->
<div id="particles-js" class="particles-cls"></div>
<!--======================  ===============  ======================-->
{% for slider in sliders %}
<div class="swiper-slide">
        {% if settings.slider_particle_is_active %}                   
            <div id="particles-js-{{ forloop.counter }}" class="particles-cls"></div>
        {% endif %}
    </section>
</div>

{% endfor %}

<script>
    const sliderCounting = {{sliders.count}}
</script>

<!--====================== Product Section======================-->
{% if products %}
<section class="services-area layout2 sec-mar">
    <div class="container">
        <div class="title-wrap wow animate fadeInUp" data-wow-delay="200ms" data-wow-duration="1500ms">
            <div class="sec-title white">
                <span>Our Solutions</span>
                <h2>Products</h2>

            </div>
        </div>
        <div class="swiper services-slider">
            <div class="swiper-wrapper">
                {% for product in products %}
                    <div class="swiper-slide wow animate fadeInUp" data-wow-delay="400ms" data-wow-duration="1500ms">
                        <div class="single-service layout2">
                            <span>0{{ forloop.counter }}</span>
                            {% if product.name %}
                                <h4>{{ product.name }}</h4>
                            {% endif %}
                            {% if product.short_description %}
                                <p>{{ product.short_description }}</p>
                            {% endif %}
                            <div class="read-btn">
                                <a href="{% url "productDetail" product.slug %}">Read More</a>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
            <div class="swiper-pagination d-md-none d-md-block"></div>
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
</section>
{% endif %}

{% endblock content %}