description = "Page Header Section"

[viewBag]

[staticBreadcrumbs]
==
<div class="
{% if data.section_pageheader_type == 'dimage' or data.section_pageheader_type == 'image' %}
py-md-24 py-7 position-relative bg-cover {{ data.section_pageheader_parallax ? 'jarallax' }}
{% else %}
py-md-24 py-7 position-relative {{ data.section_pageheader_color }}
{% endif %} 
{% if this.theme.header_trans and this.theme.header|length == 3 %}pt-lg-64 pb-lg-36
{% elseif this.theme.header_trans and this.theme.header|length == 2 %}pt-lg-48 pb-lg-36
{% elseif this.theme.header|length == 1 %}pt-lg-36 pb-lg-36
{% endif %}
" 
{% if data.section_pageheader_type == 'dimage' %}
style="background-image:url({{ this.theme.settings_pageheader_image|media|resize(1920, 600, { mode: 'crop' }) }})"
{% elseif data.section_pageheader_type == 'image' %}
style="background-image:url({{ data.section_pageheader_image|media|resize(1920, 600, { mode: 'crop' }) }})"
{% endif %}
>
<div class="position-absolute pos-0 overflow-hidden w-100 h-100 {{ data.section_pageheader_opacity }} {{ data.section_pageheader_overlay }}"></div>
    <div class="{{ data.section_pageheader_container }}">
        <!-- Row  -->
        <div class="row justify-content-center">
            <!-- Column -->
            <div class="col-md-8 align-self-center text-center" {% if data.section_pageheader_animation %}data-aos="fade-down" data-aos-duration="1200"{% endif %}>
                <h1 class="{{ data.section_pageheader_fcolor }} font-weight-bold text-uppercase py-md-4 py-2">{{ this.page.meta_title ? this.page.meta_title : this.page.title }}</h1>
                {% if this.page.meta_description %}<h6 class="{{ data.section_pageheader_fcolor }} opacity-75">{{ this.page.meta_description }}</h6>{% endif %}
                {% if data.section_pageheader_breadcrumbs %}
                {% if breadcrumbs %}
                <ul class="list-inline mt-md-10 mt-4 d-flex justify-content-center ">
                    {% for breadcrumb in breadcrumbs %}
                    <li class="list-inline-item d-flex align-items-center">
                        {% if not loop.first %}<i class="fas fa-circle pr-2 display-16 text-white opacity-75"></i>{% endif %}
                        <a class="{{ data.section_pageheader_fcolor }} opacity-75 hover-opacity-100 display-13 {{ breadcrumb.isActive ? 'active opacity-100' : '' }}" href="{{ breadcrumb.url }}">{{ breadcrumb.title }}</a>
                    </li>
                    {% endfor %}
                </ul>
                {% endif %}
                {% endif %}
            <!-- Column -->
            </div>
        </div>
    </div>
</div>