description = "Tabs 2 Section"

[viewBag]
==
<div {% if data.section_tabs2_id %}id="{{ data.section_tabs2_id }}"{% endif %} class="tabs2 py-24 {{ data.section_tabs2_bg }}">
    <div class="{{ data.section_tabs2_container }}">
        <!-- Row  -->
        {% if data.section_tabs2_header or data.section_tabs2_subheader %}
        <div class="row mb-10 justify-content-center">
            <div class="col-md-7 text-center">
                <h2 class="pt-5 pb-4">{{ data.section_tabs2_header }}</h2>
                <h6 class="text-body line-height-normal">{{ data.section_tabs2_subheader }}</h6>
            </div>
        </div>
        {% endif %}
        <!-- Row  -->
        <div class="row tabs2-wrap">
            <div class="col-lg-12">
                <!-- Tabs -->
                <nav class="nav tabs2-tab d-flex" id="myTabs2" {% if data.section_tabs2_animation %}data-aos="fade-down" data-aos-duration="1200"{% endif %}>
                    {% for fields in data.section_tabs2 %}
                    <a class="nav-item nav-link {{ loop.index0 == 0 ? 'active' }} d-md-flex align-items-center p-5" id="{{ data.section_tabs2_id }}-{{ fields.section_tabs2_title|slug }}-tab" data-toggle="tab" href="#tab-{{ data.section_tabs2_id }}-{{ fields.section_tabs2_title|slug }}" aria-expanded="true">
                        {% if fields.section_tabs2_icon %}<i class="{{ fields.section_tabs2_icon }} text-default-gradient display-7 mr-lg-4"></i>{% endif %}
                        <h5 class="font-weight-medium d-none d-lg-block mb-0">{{ fields.section_tabs2_title }}</h5>
                    </a>
                    {% endfor %}
                </nav>
                <!-- Tabs content -->
                <div class="tab-content" id="nav-tabContent" {% if data.section_tabs2_animation %}data-aos="fade-up" data-aos-duration="1200"{% endif %}>
                    {% for fields in data.section_tabs2 %}
                    {% set size_1 = fields.section_tabs2_size %}
                    {% set size_2 = 12 - size_1 %}
                    <div class="tab-pane fade {{ loop.first ? 'show active' }} py-4 py-lg-10" id="tab-{{ data.section_tabs2_id }}-{{ fields.section_tabs2_title|slug }}" role="tabpanel" aria-labelledby="{{ data.section_tabs2_id }}-{{ fields.section_tabs1_title|slug }}-tab">
                        <div class="row align-items-center">
                            <div class="col-lg-{{ size_2 }} {% if fields.section_tabs2_position == 'order-1' %}order-2{% else %}order-1{% endif %} mt-10">
                                <h3 class="pt-5 pb-4">{{ fields.section_tabs2_subtitle }}</h3>
                                <p>{{ fields.section_tabs2_desc|raw }}</p>
                                {% if fields.section_tabs2_btn_link is not empty %}
                                <a class="btn btn-default-gradient text-white btn-lg btn-chevron mt-5" data-toggle="collapse" href="{{ fields.section_tabs2_btn_clink ? fields.section_tabs2_btn_clink : (fields.section_tabs2_btn_plink | staticPage) }}">
                                    <span>{{ fields.section_tabs2_btn_label }} <i class="{{ fields.section_tabs2_btn_icon }}"></i></span>
                                </a>
                                {% endif %}
                            </div>
                            <div class="col-lg-{{ size_1 }} {{ fields.section_tabs2_position }} ml-auto mt-10">
                                <div class="{{ data.section_tabs2_parallax ? 'jarallax-keep-img' }}">
                                    <img src="{{ fields.section_tabs2_image|media|resize(550, 300, { mode: 'crop' }) }}" class="img-fluid w-100 rounded jarallax-img" alt="{{ fields.section_tabs2_title }}" />
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>