{% 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>

{% if aboutpage %}
        <section class="why-choose sec-mar wow animate fadeIn" data-wow-delay="200ms" data-wow-duration="1500ms">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="why-choose-left">
                            {% if aboutpage.image1 %}
                                <div class="choose-banner1">
                                    <img src="{{ aboutpage.image1.url }}" alt>
                                </div>
                            {% endif %}
                            <div class="choose-banner2">
                                {% if aboutpage.image2 %}
                                    <img src="{{ aboutpage.image2.url }}" alt>
                                {% endif %}
                                {% if aboutpage.image3 %}
                                    <img src="{{ aboutpage.image3.url }}" alt>
                                {% endif %}
                            </div>
                            {% if aboutpage.years_of_experience %}
                                <div class="years">
                                    <h5>{{ aboutpage.years_of_experience }}</h5>
                                    <span>Years</span>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="why-choose-right">
                            <div class="sec-title layout2">
                                {% if aboutpage.subtitle %}
                                    <span>{{ aboutpage.subtitle }}</span>
                                {% endif %}
                                {% if aboutpage.title %}
                                    <h2>{{ aboutpage.title }}</h2>
                                {% endif %}
                            </div>
                            <div class="counter-boxes">
                                {% for fact in funfact|slice:":3" %}
                                    <div class="count-box">
                                        <span class="">{% if fact.count %}{{ fact.count }}{% endif %}</span><sup>{% if fact.count_after %}{{ fact.count_after }}{% endif %}</sup>
                                        {% if fact.title %}
                                            <h5>{{ fact.title }}</h5>
                                        {% endif %}
                                    </div>
                                {% endfor %}
                            </div>
                            {% if aboutpage.description %}
                                <p>{{ aboutpage.description|safe }}</p>
                            {% endif %}
                            <div class="buttons-group">
                                {% if aboutpage.feature1 %}
                                    <span>{{ aboutpage.feature1 }}</span>
                                {% endif %}
                                {% if aboutpage.feature2 %}
                                    <span>{{ aboutpage.feature2 }}</span>
                                {% endif %}
                                {% if aboutpage.feature3 %}
                                    <span>{{ aboutpage.feature3 }}</span>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        {% endif %}
        <!--====================== background Section======================-->
        <div id="particles-js" class="particles-cls"></div>
        <!--====================== Hero Section======================-->
        <!--====================== About Section ======================-->
        {% if about %}
        <section class="about-area sec-mar-bottom wow animate slideInUp" data-wow-delay="200ms"
            data-wow-duration="1500ms">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 or-2 wow animate fadeIn" data-wow-delay="200ms" data-wow-duration="1500ms">
                        <div class="sec-title layout2">
                            {% if about.subtitle %}
                                <span>{{ about.subtitle }}</span>
                            {% endif %}
                            {% if about.title %}
                                <h2>{{ about.title }}</h2>
                            {% endif %}
                        </div>
                        <div class="about-left">
                            {% if about.short_description %}
                            <h3>{{ about.short_description }}</h3>
                            {% endif %}
                            {% if about.long_description %}
                            <p>{{ about.long_description|safe }}</p>
                            {% endif %}
                            <div class="company-since">
                                {% if settings.logo_dark %}
                                <div class="company-logo">
                                    <img src="{{ settings.logo_dark.url }}" width="300" alt>
                                </div>
                                {% endif %}
                                {% if about.ranking_number %}
                                <strong>#{{ about.ranking_number }}</strong>
                                {% endif %}
                                
                                <h4>{% if about.tag_line %}{{ about.tag_line }}{% endif %} {% if about.experience %}<span>{{ about.experience }}</span>{% endif %}</h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 or-1 wow animate fadeIn" data-wow-delay="200ms" data-wow-duration="1500ms">
                        <div class="about-right">
                            {% if about.image %}
                            <div class="banner-1">
                                <img src="{{ about.image.url }}" alt>
                            </div>
                            {% endif %}
                            {% if about.video_thumbnail %}
                            <div class="banner-2">
                                <img src="{{ about.video_thumbnail.url }}" alt>
                                <div class="banner2-inner">
                                    <div class="play">
                                        <a class="video-popup" href="{{ about.video_url }}"><i
                                                class="fas fa-play"></i></a>
                                    </div>
                                </div>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </section>
        {% endif %}

{% endblock %}