{# ==========================================================
   Kottal Premium Theme
   Hero Section
=========================================================== #}

<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">

<section class="hero-section">
    
    <div class="swiper heroSwiper">

<div class="swiper-wrapper">
    
    {% if heroes %}
{% for hero in heroes %}

<div class="swiper-slide">

    <div class="container">

        <div class="row align-items-center">

            <!-- Left Content -->
            <div class="col-lg-6">

                <div class="hero-content">

                  <span class="hero-tag hero-animate hero-tag-animate">
    {{ hero.subtitle }}
</span>

                    <h1 class="hero-animate hero-title">
    {{ hero.title }}
</h1>

                    <p class="hero-animate hero-description">
    {{ hero.description }}
</p>

                    <div class="hero-buttons hero-animate hero-buttons-animate">

    <a href="{{ hero.button1_link }}" class="btn-primary">
        {{ hero.button1_text }}
    </a>

    <a href="{{ hero.button2_link }}" class="btn-outline">
        {{ hero.button2_text }}
    </a>

</div>

                    <div class="hero-features">

                        <div>

                            <strong>100%</strong>

                            Natural

                        </div>

                        <div>

                            <strong>5000+</strong>

                            Happy Customers

                        </div>

                        <div>

                            <strong>50+</strong>

                            Ayurvedic Products

                        </div>

                    </div>

                </div>

            </div>

            <!-- Right Image -->

            <div class="col-lg-6">

                <div class="hero-image">

                 <picture>

    {% if hero.mobile_image %}
    <source media="(max-width:768px)"
            srcset="{{ hero.mobile_image }}">
    {% endif %}

    <img src="{{ hero.desktop_image }}"
         alt="{{ hero.title }}">

</picture>

                    <div class="floating-card card-1">

                        🌿 Herbal Ingredients

                    </div>

                    <div class="floating-card card-2">

                        🚚 Free Shipping

                    </div>

                    <div class="floating-card card-3">

                        ⭐ Premium Quality

                    </div>

                </div>

            </div>

        </div>

    </div>

    <div class="hero-shape hero-leaf"></div>

    <div class="hero-shape hero-circle"></div>
    
    </div>
    
    {% endfor %}
{% endif %}

</div>


<div class="swiper-pagination"></div>

<div class="swiper-button-next"></div>

<div class="swiper-button-prev"></div>

</div>

</section>

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {

    new Swiper('.heroSwiper',{

loop:true,

speed:700,

spaceBetween:0,

slidesPerView:1,

autoplay:{
delay:5000,
disableOnInteraction:false,
},

pagination:{
el:'.swiper-pagination',
clickable:true,
},

navigation:{
nextEl:'.swiper-button-next',
prevEl:'.swiper-button-prev',
},

});

});
</script>