description = "Porfolio Details 1 Section"

[viewBag]
==
<div {% if data.section_portfoliodetails1_id %}id="{{ data.section_portfoliodetails1_id }}"{% endif %} class="portfoliodetails1 py-24 {{ data.section_portfoliodetails1_bg }}">
    <div class="{{ data.section_portfoliodetails1_container }}">
        <!-- Row  -->
        {% if data.section_portfoliodetails1_header or data.section_portfoliodetails1_subheader %}
        <div class="row mb-10 justify-content-center">
            <div class="col-md-7 text-center">
                <h2 class="pt-5 pb-4">{{ data.section_portfoliodetails1_header }}</h2>
                <h6 class="text-body line-height-normal">{{ data.section_portfoliodetails1_subheader }}</h6>
            </div>
        </div>
        {% endif %}
        <!-- Row  -->
        <!-- Row  -->
        <div class="row">
            {% set total = 12 %}
            {% set size_1 = data.section_portfoliodetails1_size %}
            {% set size_2 = total - size_1 %}
            {% set size_3 = data.section_portfoliodetails1_isize %}
            {% set size_4 = total - size_3 %}
            {% if size_1 == 12 %}
            {% set size_2 = total %}
            {% else %}
            {% set size_3 = total %}
            {% set size_4 = total %}
            {% endif %}
            <div class="col-md-{{ size_1 }} mb-7" {% if data.section_portfoliodetails1_animation %}data-aos="fade-up" data-aos-duration="1200"{% endif %}>
                {% if data.section_portfoliodetails1_type == 'image' %}
                {% if data.section_portfoliodetails1_images|length <= 1  %}
                {% for fields in data.section_portfoliodetails1_images %}
                <img class="w-100" src="{{ fields.section_portfoliodetails1_image|media|resize(1200, (data.section_portfoliodetails1_height), { mode: 'crop' }) }}" alt="" />
                {% endfor %}
                {% else %}
                <div id="portfoliodetails1Carousel-{{ data.section_portfoliodetails1_id }}-{{ data.section_portfoliodetails1_title|slug }}" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                        {% for fields in data.section_portfoliodetails1_images %}
                        <li data-target="#portfoliodetails1Carousel-{{ data.section_portfoliodetails1_id }}-{{ data.section_portfoliodetails1_title|slug }}" data-slide-to="{{ loop.index0 }}" {% if loop.index0 == 0 %}class="active"{% endif %}></li>
                        {% endfor %}
                    </ol>
                    <div class="carousel-inner" role="listbox">
                        {% for fields in data.section_portfoliodetails1_images %}
                        <div class="carousel-item {{ loop.first ? 'active' }}">
                            <img src="{{ fields.section_portfoliodetails1_image|media|resize(1200, (data.section_portfoliodetails1_height), { mode: 'crop' }) }}" class="d-block w-100" alt="{{ data.section_portfoliodetails1_title }}">
                        </div>
                        {% endfor %}
                    </div>
                    <a class="carousel-control-prev" href="#portfoliodetails1Carousel-{{ data.section_portfoliodetails1_id }}-{{ data.section_portfoliodetails1_title|slug }}" role="button" data-slide="prev">
                        <span class="fa fa-angle-left icon-prev" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#portfoliodetails1Carousel-{{ data.section_portfoliodetails1_id }}-{{ data.section_portfoliodetails1_title|slug }}" role="button" data-slide="next">
                        <span class="fa fa-angle-right icon-next" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
                {% endif %}
                {% elseif data.section_portfoliodetails1_type == 'video' %}
                <div class="embed-responsive embed-responsive-16by9" style="height:{{ data.section_portfoliodetails1_height }}px;">
                    <iframe class="embed-responsive-item" width="550" height="400" src="https://www.youtube.com/embed/{{ data.section_portfoliodetails1_video }}" frameborder="0" allowfullscreen></iframe>
                </div>
                {% endif %}
            </div>
            <div class="col-md-{{ size_2 }} mb-7">
                <div class="row justify-content-center">
                    <div class="col-md-{{ size_4 }} {{ data.section_portfoliodetails1_align }} mb-7" {% if data.section_portfoliodetails1_animation %}data-aos="fade-up" data-aos-duration="1200"{% endif %}>
                        <h2 class="mb-7">{{ data.section_portfoliodetails1_title }}</h2>
                        <h4 class="text-muted font-weight-light">{{ data.section_portfoliodetails1_subtitle }}</h4>
                        {{ data.section_portfoliodetails1_desc|raw }}
						{% if data.section_portfoliodetails1_btn_link is not empty %}
                        <a href="{{ data.section_portfoliodetails1_btn_clink ? data.section_portfoliodetails1_btn_clink : (data.section_portfoliodetails1_btn_plink | staticPage) }}" class="btn btn-default text-white btn-chevron px-10 mt-5">
                            <span>{{ data.section_portfoliodetails1_btn_label }} <i class="{{ data.section_portfoliodetails1_btn_icon }}"></i></span>
                        </a>
						{% endif %}
                    </div>
                    {% if data.section_portfoliodetails1_infos or data.section_portfoliodetails1_social %}
                    <div class="col-md-{{ size_3 }} mb-7">
                        {% for fields in data.section_portfoliodetails1_infos %}
                        <div class="mb-7" {% if data.section_portfoliodetails1_animation %}data-aos="fade-up" data-aos-duration="1200"{% endif %}>
                            {% if fields.section_portfoliodetails1_info_title %}<h4 class="mb-5">{{ fields.section_portfoliodetails1_info_title }}</h4>{% endif %}
                            <ul class="list-inline">
                            {% for info in fields.section_portfoliodetails1_info %}
                            <li class="py-2 d-flex align-items-center">
                                {% if info.section_portfoliodetails1_info_url %}<a class="d-flex" href="{{ info.section_portfoliodetails1_info_url }}">{% endif %}
                                    {% if info.section_portfoliodetails1_info_icon %}<i class="{{ info.section_portfoliodetails1_info_icon }} d-flex justify-content-center align-items-center rounded-circle bg-default text-white w-8r h-8r mr-3"></i>{% endif %}
                                    {{ info.section_portfoliodetails1_info_text }}
                                {% if info.section_portfoliodetails1_info_url %}</a>{% endif %}
                            </li>
                            {% endfor %}
                            </ul>
                        </div>
                        {% endfor %}
                        {% if data.section_portfoliodetails1_social %}
                        <div class="mb-7" {% if data.section_portfoliodetails1_animation %}data-aos="fade-up" data-aos-duration="1200"{% endif %}>
                            {% if data.section_portfoliodetails1_stitle %}<h4 class="mb-5">{{ data.section_portfoliodetails1_stitle }}</h4>{% endif %}
                            <ul class="list-inline">
                                {% for fields in data.section_portfoliodetails1_social %}
                                <li class="list-inline-item">
                                    <a class="d-flex justify-content-center align-items-center btn btn-outline-default rounded-circle p-1 w-10r h-10r" href="{{ fields.section_portfoliodetails1_social_url }}">
                                        <i class="{{ fields.section_portfoliodetails1_social_icon }}"></i>
                                    </a>
                                </li>
                                {% endfor %}
                            </ul>
                        </div>
                        {% endif %}
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <!-- Row  -->
    </div>
</div>