description = "Testimonials 1 Section"

[viewBag]
==
{% set size_1 = data.section_testimonials1_size %}
{% set size_2 = 12 - size_1 %}
<div {% if data.section_testimonials1_id %}id="{{ data.section_testimonials1_id }}"{% endif %} class="testimonials1 py-24 {{ data.section_testimonials1_bg }}">
    <div class="{{ data.section_testimonials1_container }}">
        <!-- Row  -->
        {% if data.section_testimonials1_header or data.section_testimonials1_subheader %}
        <div class="row mb-10 justify-content-center">
            <div class="col-md-7 text-center">
                <h2 class="pt-5 pb-4">{{ data.section_testimonials1_header }}</h2>
                <h6 class="text-body line-height-normal">{{ data.section_testimonials1_subheader }}</h6>
            </div>
        </div>
        {% endif %}
        <!-- Row  -->
        <div id="testimonialsCarousel-{{ data.section_testimonials1_id }}" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner" role="listbox">
                {% for fields in data.section_testimonials1 %}
                <div class="carousel-item {% if loop.first %}active{% endif %}">
                    <div class="row position-relative">
                        <div class="col-lg-{{ size_2 }} align-self-center {{ data.section_testimonials1_align }} {% if data.section_testimonials1_position == 'order-1' %}order-2{% else %}order-1{% endif %}" {% if data.section_testimonials1_animation %}data-aos="fade-right" data-aos-duration="1200"{% endif %}>
                            {% if fields.section_testimonials1_btn_link is not empty %}
                            <a class="d-flex justify-content-center align-items-center rounded-circle w-16r h-16r p-0 btn btn-danger btn-lg {% if data.section_testimonials1_align == 'text-right' %}ml-auto{% endif %}" href="{{ fields.section_testimonials1_btn_clink ? fields.section_testimonials1_btn_clink : (fields.section_testimonials1_btn_plink | staticPage) }}">
                                <i class="display-8 {{ fields.section_testimonials1_btn_icon }}"></i>
                            </a>
                            {% endif %}
                            <h3 class="my-5">{{ fields.section_testimonials1_title }}</h3>
                            <p class="font-italic">{{ fields.section_testimonials1_desc }}</p>
                            <h5 class="mt-7">{{ fields.section_testimonials1_subtitle }}</h5>
                            <h6 class="text-body line-height-normal">{{ fields.section_testimonials1_extra }}</h6>
                        </div>
                        <div class="col-lg-{{ size_1 }} d-none d-lg-block {{ data.section_testimonials1_position }}" {% if data.section_testimonials1_animation %}data-aos="fade-left" data-aos-duration="1200"{% endif %}>
                            <img src="{{ fields.section_testimonials1_image|media|resize(500, 500, { mode: 'crop' }) }}" class="m-auto rounded-circle d-block w-100 py-4" alt="{{ fields.section_testimonials1_title }}">
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            <div id="testimonialsThumbCarousel-{{ data.section_testimonials1_id }}" class="carousel slide" data-interval="false" {% if data.section_testimonials1_animation %}data-aos="fade-up" data-aos-duration="1200"{% endif %}>
            <div class="carousel-inner {% if data.section_testimonials1_position == 'order-1' %}d-flex justify-content-end{% endif %}" role="listbox">
                {% for fields in data.section_testimonials1 %}
                <div class="carousel-item d-inline-block w-16r y-16 mr-2 {% if loop.index0 == 0 %}active{% endif %}" data-target="#testimonialsCarousel-{{ data.section_testimonials1_id }}" data-slide-to="{{ loop.index0 }}">
                    <img src="{{ fields.section_testimonials1_image|media|resize(50, (50), { mode: 'crop' }) }}" class="rounded-circle d-block w-100" alt="{{ fields.section_testimonials1_title }}">
				</div>
                {% endfor %}
            </div>
            </div>
        </div>
    </div>
</div>