description = "Tabs 1 Section"

[viewBag]
==
{% set size_1 = data.section_tabs1_size %}
{% set size_2 = 12 - size_1 %}
<div {% if data.section_tabs1_id %}id="{{ data.section_tabs1_id }}"{% endif %} class="tabs1 py-24 {{ data.section_tabs1_bg }}">
    <div class="{{ data.section_tabs1_container }}">
        <!-- Row  -->
        {% if data.section_tabs1_header or data.section_tabs1_subheader %}
        <div class="row mb-10 justify-content-center">
            <div class="col-md-7 text-center">
                <h2 class="pt-5 pb-4">{{ data.section_tabs1_header }}</h2>
                <h6 class="text-body line-height-normal">{{ data.section_tabs1_subheader }}</h6>
            </div>
        </div>
        {% endif %}
        <!-- Row  -->
        <div class="row tabs1-wrap">
            <!-- Column -->
            <div class="col-lg-{{ size_2 }} col-md-6 {% if data.section_tabs1_position == 'order-1' %}order-2{% else %}order-1{% endif %}" {% if data.section_tabs1_animation %}data-aos="fade-right" data-aos-duration="1200"{% endif %}>
                <ul class="nav tabs1-tab d-block">
                    {% for fields in data.section_tabs1 %}
                    <li class="nav-item">
                        <a class="nav-link {{ loop.index0 == 0 ? 'active' }} d-flex mb-5 p-6" id="{{ data.section_tabs1_id }}-{{ fields.section_tabs1_title|slug }}-tab" data-toggle="tab" href="#tab-{{ data.section_tabs1_id }}-{{ fields.section_tabs1_title|slug }}" role="tab" aria-controls="{{ fields.section_tabs1_title|slug }}" aria-expanded="true">
                            {% if fields.section_tabs1_icon %}<div class="display-6 mr-6"><i class="{{ fields.section_tabs1_icon }} text-default-gradient"></i></div>{% endif %}
                            <div>
                                <h5 class="mb-0 font-weight-medium">{{ fields.section_tabs1_title }}</h5>
                                <h6 class="text-body line-height-normal">{{ fields.section_tabs1_subtitle }}</h6>
                            </div>
                        </a>
                    </li>
                    {% endfor %}
                </ul>
            </div>
            <!-- Column -->
            <!-- Column -->
            <div class="col-lg-{{ size_1 }} col-md-6 ml-auto {{ data.section_tabs1_position }}" {% if data.section_tabs1_animation %}data-aos="fade-left" data-aos-duration="1200"{% endif %}>
                <div class="tab-content" id="myTabContent">
                    {% for fields in data.section_tabs1 %}
                    <div class="tab-pane fade {{ loop.first ? 'show active' }}" id="tab-{{ data.section_tabs1_id }}-{{ fields.section_tabs1_title|slug }}" role="tabpanel" aria-labelledby="{{ data.section_tabs1_id }}-{{ fields.section_tabs1_title|slug }}-tab">
                        <div class="{{ data.section_tabs1_parallax ? 'jarallax-keep-img' }}">
                            <img src="{{ fields.section_tabs1_image|media|resize(650, 350, { mode: 'crop' }) }}" alt="{{ fields.section_tabs1_title }}" class="rounded img-fluid w-100 jarallax-img" />
                        </div>
                        <p class="mt-10">{{ fields.section_tabs1_desc|raw }}</p> 
                        {% if fields.section_tabs1_btn_link is not empty %}
                        <a class="btn btn-default-gradient text-white btn-lg btn-chevron mt-5" href="{{ fields.section_tabs1_btn_clink ? fields.section_tabs1_btn_clink : (fields.section_tabs1_btn_plink | staticPage) }}">
                            <span>{{ fields.section_tabs1_btn_label }} <i class="{{ fields.section_tabs1_btn_icon }}"></i></span>
                        </a>
                        {% endif %}
                    </div>
                    {% endfor %}
                </div>
            </div>
            <!-- Column -->
        </div>
    </div>
</div>