{% 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="sectionblock-wrap layout2">

     
<!--====================== 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>

<!--====================== Service Section======================-->
{% if services %}
<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>Services</h2>

            </div>
        </div>
        <div class="swiper services-slider">
            <div class="swiper-wrapper">
                {% for service in services %}
                    <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 service.fontawesome_icon_class %}
                                <div class="icon">
                                    <i class="{{ service.fontawesome_icon_class }} service-ico"></i>
                                </div>
                            {% endif %}
                            {% if service.name %}
                                <h4>{{ service.name }}</h4>
                            {% endif %}
                            {% if service.short_description %}
                                <p>{{ service.short_description }}</p>
                            {% endif %}
                            <div class="read-btn">
                                <a href="{% url "serviceDetail" service.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 %}