description = "Team 2 Section"

[viewBag]
==
<div {% if data.section_team2_id %}id="{{ data.section_team2_id }}"{% endif %} class="team2 py-24 {{ data.section_team2_bg }}">
    <div class="{{ data.section_team2_container }}">
        <!-- Row  -->
        {% if data.section_team2_header or data.section_team2_subheader %}
        <div class="row mb-10 justify-content-center">
            <div class="col-md-7 text-center">
                <h2 class="pt-5 pb-4">{{ data.section_team2_header }}</h2>
                <h6 class="text-body line-height-normal">{{ data.section_team2_subheader }}</h6>
            </div>
        </div>
        {% endif %}
        <!-- Row  -->
        <div class="row team2-wrap">
            {% set aos = ['fade-right', 'fade-left'] %}
            {% for fields in data.section_team2 %}
            <!-- Column  -->
            <div class="{{ data.section_team2_column }}" {% if data.section_team2_animation %}data-aos="{{ aos[ loop.index0 % 2 ] }}" data-aos-duration="1200"{% endif %}>
                <!-- card  -->
                <div class="card mb-7 border-0 shadow-md">
                    <div class="row no-gutters">
                        <div class="col-md-5 bg-cover min-h-xxs rounded-left overflow-hidden" style="background-image:url({{ fields.section_team2_image|media|resize(300, 260, { mode: 'crop' }) }})">
                            {% if data.section_team2_hover %}
                            <div class="team-overlay position-absolute pos-0 bg-black-50 opacity-0 z-10 transition-40 overflow-hidden w-100 h-100">
                                <div class="h-100 d-flex justify-content-center align-items-center">
                                    <ul class="list-inline text-center mt-7">
                                        {% for social in fields.section_team2_social %}
                                        <li class="list-inline-item mr-2">
                                            <a class="pr-4 text-white hover-text-default" href="{{ social.section_team2_social_url }}"><i class="{{ social.section_team2_social_icon }}"></i></a>
                                        </li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                            {% endif %}
                        </div>
                        <div class="col-md-7">
                            <div class="card-body p-7">
                                <h4 class="font-weight-medium">{{ fields.section_team2_title }}</h4>
                                <h6 class="mb-5 display-13 text-body">{{ fields.section_team2_subtitle }}</h6>
                                <p>{{ fields.section_team2_desc }}</p>
                                {% if data.section_team2_hover == 0 %}
                                <ul class="list-inline mt-7">
                                    {% for social in fields.section_team2_social %}
                                    <li class="list-inline-item mr-2">
                                        <a class="pr-4 text-body hover-text-default" href="{{ social.section_team2_social_url }}"><i class="{{ social.section_team2_social_icon }}"></i></a>
                                    </li>
                                    {% endfor %}
                                </ul>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Column  -->
            {% endfor %}
        </div>
    </div>
</div>