{% 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>
<section class="hero-area">
    <div class="hero-slide">
        <div class="swiper-wrapper">
            {% for slider in sliders %}
            <div class="swiper-slide">
                <section class="hero-area">
                    {% if settings.slider_particle_is_active %}                   
                        <div id="particles-js-{{ forloop.counter }}" class="particles-cls"></div>
                    {% endif %}
                    <div class="hero-wrapper">
                        <div class="container">
                            <div class="row align-items-center">
                                <div class="col-lg-6">
                                    <div class="hero-content layout2">
                                        
                                        <h1>{% if slider.title %}{{ slider.title }}{% endif %}
                                            <span>{% if slider.subtitle %}{{ slider.subtitle }}{% endif %}</span>
                                        </h1>
                                        <p>{% if slider.description %}{{ slider.description|safe }}{% endif %}</p>
                                        <div class="buttons">
                                            {% if slider.button1_url or slider.button1_text %}
                                            <div class="cmn-btn">
                                                <div class="line-1"></div>
                                                <div class="line-2"></div>
                                                <a href="{{ slider.button1_url }}">{{ slider.button1_text }}</a>
                                            </div>
                                            {% endif %}
                                            {% if slider.button2_url or slider.button2_text %}
                                            <div class="cmn-btn layout-two">
                                                <div class="line-1"></div>
                                                <div class="line-2"></div>
                                                <a href="{{ slider.button2_url }}">{{ slider.button2_text }}</a>
                                            </div>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    {% if slider.image %}
                                    <div class="hero-img">
                                        <img src="{{ slider.image.url }}" class="slider_img"
                                            alt>
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
            
            {% endfor %}

        </div>
        <div class="swiper-button-next" id="slider_btn"></div>
        <div class="swiper-button-prev" id="slider_btn"></div>
    </div>
</section>

<!--====================== background Section======================-->
<div id="particles-js" class="particles-cls"></div>
<!--======================  ===============  ======================-->


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

<!--====================== About Section ======================-->
{% if about %}
<section class="about-area sec-mar-bottom">
    <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 white layout2">
                    {% if about.subtitle %}
                        <span>{{ about.subtitle }}</span>
                    {% endif %}
                    {% if about.title %}
                        <h2>{{ about.title }}</h2>
                    {% endif %}
                </div>
                <div class="about-left layout2">
                    {% 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 layout2">
                        {% if settings.logo_light %}
                            <div class="company-logo">
                                <img src="{{ settings.logo_light.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 %} <span>{% if about.experience %}{{ about.experience }}{% endif %}</span></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 layout2">
                    {% 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">
                            {% if about.video_url %}
                            <div class="play">
                                <a class="video-popup" href="{{ about.video_url }}"><i
                                        class="fas fa-play"></i></a>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</section>
{% endif %}
<!--====================== 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>Product</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 %}
<!--====================== Project Section ======================-->
{% if projects %}
<section class="project-area sec-mar">
    <div class="container">
        <div class="title-wrap">
            <div class="sec-title white">
                <span>Most Popular</span>
                <h2>Projects</h2>

            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <ul class="isotope-menu layout2">
                    <li class="active" data-filter="*">All</li>
                    {% for category in project_categories  %}
                    <li data-filter=".{{category.slug}}">{% if category.name %}{{category.name}}{% endif %}</li>
                    {% endfor %}
                </ul>
            </div>
        </div>
        <div class="row g-4 project-items">
            {% for project in projects|slice:":6" %}
                <div class="col-md-6 col-lg-4 single-item {{ project.category.slug }}">
                        <div class="item-img">
                            <a href="{% url "projectDetails" project.slug %}">
                                <img src="{{ project.getProjectImage }}" alt="Project image">
                            </a>
                        </div>
                    <div class="item-inner-cnt">
                        {% if project.category %}
                            <span>{{ project.category }}</span>
                        {% endif %}
                        {% if project.title %}
                            <h4>{{ project.title }}</h4>
                        {% endif %}
                        <div class="view-btn">
                            <a href="{% url "projectDetails" project.slug %}">view details</a>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
</section>
{% endif %}
<!--====================== Clients Section ======================-->
{% if clients %}
<section class="our-partner">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-3">
                <div class="sec-title white layout2">
                    <span></span>
                    <h2>Our Partner</h2>
                    <div class="-partnerslider-navigator">
                        <div class="swiper-button-prev-c"><i class="bi bi-chevron-left"></i></div>
                        <div class="swiper-button-next-c"><i class="bi bi-chevron-right"></i></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-9">
                <div class="swiper partner-slider">
                    <div class="swiper-wrapper">
                        {% for client in clients %}
                            {% if client.image %}
                                <div class="swiper-slide">
                                        <div class="single-partner">
                                                <img src="{{ client.image.url }}" alt="{{ client.name }}">
                                        </div>
                                </div>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endif %}
<script>
    const sliderCounting = {{sliders.count}}
</script>

{% endblock content %}