{# ==========================================================
   Franklin Theme v2.0
   Hero Section
========================================================== #}

<section class="hero-section">

    <div class="container">

        <div class="swiper heroSwiper">

            <div class="swiper-wrapper">

                {% if heroes %}
                    {% for hero in heroes %}

                        <div class="swiper-slide">

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

                                <!-- LEFT CONTENT -->
                                <div class="col-lg-6">

                                    <div class="hero-content">

                                        {% if hero.subtitle %}
                                        <span class="hero-subtitle">
                                            <i class="bi bi-flower1"></i>
                                            {{ hero.subtitle }}
                                        </span>
                                        {% endif %}

                                        <h1>
                                            {{ hero.title }}
                                        </h1>

                                        <p>
                                            {{ hero.description }}
                                        </p>

                                        <div class="hero-buttons">

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

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

                                        </div>

                                    </div>

                                </div>

                                <!-- RIGHT IMAGE -->
                                <div class="col-lg-6">

                                    <div class="hero-image">

                                        <picture>

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

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

                                        </picture>

                                    </div>

                                </div>

                            </div>

                        </div>

                    {% endfor %}
                {% endif %}

            </div>

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

        </div>

    </div>

</section>

<!-- ===========================
FEATURES
============================ -->

<section class="trust-section">

    <div class="container">

        <div class="row g-4">

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

                <div class="hero-feature">

                    <i class="bi bi-flower1"></i>

                    <h5>100% Herbal</h5>

                    <p>Prepared using carefully selected herbal ingredients.</p>

                </div>

            </div>

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

                <div class="hero-feature">

                    <i class="bi bi-shield-check"></i>

                    <h5>Trusted Quality</h5>

                    <p>Quality-focused herbal products for everyday wellness.</p>

                </div>

            </div>

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

                <div class="hero-feature">

                    <i class="bi bi-truck"></i>

                    <h5>Cash on Delivery</h5>

                    <p>Convenient ordering with nationwide COD availability.</p>

                </div>

            </div>

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

                <div class="hero-feature">

                    <i class="bi bi-headset"></i>

                    <h5>Expert Support</h5>

                    <p>Friendly customer assistance whenever you need help.</p>

                </div>

            </div>

        </div>

    </div>

</section>

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

<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,

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

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

    });

});

</script>