description = "Team 1 Section"

[viewBag]
==
<div {% if data.section_team1_id %}id="{{ data.section_team1_id }}"{% endif %} class="team1 py-24 {{ data.section_team1_bg }}">
    <div class="{{ data.section_team1_container }}">
        <!-- Row  -->
        {% if data.section_team1_header or data.section_team1_subheader %}
            <div class="row mb-10 justify-content-center">
                <div class="col-md-7 text-center">
                    <h2 class="pt-5 pb-4">{{ data.section_team1_header }}</h2>
                    <h6 class="text-body line-height-normal">{{ data.section_team1_subheader }}</h6>
                </div>
            </div>
        {% endif %}
        <!-- Row  -->
        <div class="row">
            {% set aos = ['flip-left', 'flip-up', 'flip-right', 'flip-left', 'flip-down', 'flip-right'] %}
            {% for fields in data.section_team1 %}
            <!-- Column -->
            <div class="{{ data.section_team1_column }} team1-wrap" {% if data.section_team1_animation %}data-aos="{{ aos[ loop.index0 % 6 ] }}" data-aos-duration="1200"{% endif %}>
                <div class="card bg-transparent border-0 mb-7">
                    <div class="position-relative">
                        {% if data.section_team1_hover %}
                        <div class="team-overlay position-absolute pos-0 bg-black-50 opacity-0 z-10 transition-40 overflow-hidden w-100 h-100 {{ data.section_team1_round ? 'rounded-circle' }}">
                            <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_team1_social %}
                                    <li class="list-inline-item mr-2">
                                        <a class="pr-4 text-white hover-text-default" href="{{ social.section_team1_social_url }}"><i class="{{ social.section_team1_social_icon }}"></i></a>
                                    </li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </div>
                        {% endif %}
                    <img class="img-fluid w-100 {{ data.section_team1_round ? 'rounded-circle' }}" src="{{ fields.section_team1_image|media|resize(350, 340, { mode: 'crop' }) }}">
                    </div>
                    <div class="pt-2 {{ data.section_team1_align }}">
                        <h5 class="mt-7 font-weight-medium">{{ fields.section_team1_title }}</h5>
                        <h6 class="mb-5 display-13 text-body">{{ fields.section_team1_subtitle }}</h6>
                        <p class="">{{ fields.section_team1_desc }}</p>
                        {% if data.section_team1_hover == 0 %}
                        <ul class="list-inline mt-7">
                            {% for social in fields.section_team1_social %}
                            <li class="list-inline-item mr-2">
                                <a class="pr-4 text-body hover-text-default" href="{{ social.section_team1_social_url }}"><i class="{{ social.section_team1_social_icon }}"></i></a>
                            </li>
                            {% endfor %}
                        </ul>
                        {% endif %}
                    </div>
                </div>
            </div>
            <!-- Column -->
            {% endfor %}
        </div>
    </div>
</div>