{% assign footer_data = site.data.languages[page.language].footer_section %}
{% if footer_data.cta_section.i_image %}
  {% assign client_cta_bg = '' %}
  {% capture client_cta_bg %}{% picture direct-url pages/{{ footer_data.cta_section.i_image}} %}{% endcapture %}
{% endif %}
<footer>
  <div class="custom_container_fluid">
    <div class="common_container">
      <div class="hero_section_footer">
        <div class="footer_bg_and_cta" style="background-image: url('{{ client_cta_bg }}')">
          <div class="blue_card_wrapper">
            <div class="blue_card">
              <h2>{{ site.data.languages[page.language].footer_section.cta_section.t_title_normal }} <span>{{ site.data.languages[page.language].footer_section.cta_section.t_title_highlight }}</span></h2>
              <p>{{ site.data.languages[page.language].footer_section.cta_section.t_desc }}</p>
              <a href="{{ site.url }}/{{ footer_section.cta_section.p_link }}" class="btn_white">{{ site.data.languages[page.language].footer_section.cta_section.t_name }}</a>
            </div>
          </div>
        </div>

<div class="hub-section footer_bottom_bg pt-0">
	<div class="container-fluid">
		<div class="footer-space">
    <div class="row justify-content-lg-between">

      {% for entry in site.data.languages[page.language].footer limit: 1 %}
      <div class="col-12 col-md-3 mb-4 mb-md-0">
        {% for subcategory in entry.column %}
          {% if subcategory.i_logo %}
          <div class="footer_brand_logo mb-3">
            <a href="{{ site.url }}/{% if page.language != 'default' %}{{ page.language }}/{% endif %}">
              {{ subcategory.i_logo }}
            </a>
          </div>
        {% endif %}
          {% if subcategory.t_title %}
            <h4 class="text-white font-weight-normal mb-3 {% if forloop.index == 2 %} pt-3{% endif %}">
              {{ subcategory.t_title }}
            </h4>
          {% endif %}

          <ul class="nav nav-sm nav-x-0 nav-white flex-column">
            {% for subcat in subcategory.col-row %}
            <li class="nav-item {% if subcat.p_type == 'address' and subcat.p_link == null or subcat.p_link == '' %}d-flex align-items-center{% endif %}">
              {% if subcat.p_external == true %}
                <a class="nav-link px-0" href="{{ subcat.p_link }}" target="_blank" {% if subcat.p_link_target == 'model' %} data-toggle="modal" data-target="#contactModal{{ subcat.p_form_id }}" {% endif %}>
                  {% if subcat.i_icon %}{{ subcat.i_icon }} {% endif %}{{ subcat.t_name }}
                </a>
              {% elsif subcat.p_type == 'address' and (subcat.p_link == null or subcat.p_link == '') %}
                {% if subcat.i_icon %}{{ subcat.i_icon }} {% endif %}<span class="nav-link px-0">{{ subcat.t_name }}</span>
              {% elsif subcat.p_link == null or subcat.p_link == '' %}
                <a href="javascript:void(0)" class="nav-link px-0">
                  {% if subcat.i_icon %}{{ subcat.i_icon }} {% endif %}{{ subcat.t_name }}
                </a>
              {% else %}
                <a class="nav-link px-0" href="{{ site.url }}/{% if page.language != 'default' %}{{ page.language }}/{% endif %}{{ subcat.p_link }}">
                  {% if subcat.i_icon %}{{ subcat.i_icon }} {% endif %}{{ subcat.t_name }}
                </a>
              {% endif %}
            </li>
            {% endfor %}
          </ul>
          {% if entry.social_icon %}
          <div class="social_links d-flex align-items-center gap-2 mt-3">
            {% for social in entry.social_icon %}
              <a href="{% if social.p_link %}{{ social.p_link }}{% else %}javascript:void(0){% endif %}" class="social_icon d-inline-block" aria-label="{{ social.img_key }}" {% if social.p_link %}target="_blank" rel="noopener noreferrer"{% endif %}>
                {{ social.i_logo }}
              </a>
            {% endfor %}
          </div>
        {% endif %}
        {% endfor %}
        
      </div>
      {% endfor %}

      <div class="col-12 col-md-9">
        <div class="row">
          {% for entry in site.data.languages[page.language].footer offset: 1 %}
          <div class="col-12 col-sm-6 col-md-3 mb-4">
            {% for subcategory in entry.column %}
              {% if subcategory.t_title %}
                <h4 class="text-white font-weight-normal mb-3 {% if forloop.index == 2 %} pt-3{% endif %}">
                  {{ subcategory.t_title }}
                </h4>
              {% endif %}

              <ul class="nav nav-sm nav-x-0 nav-white flex-column">
                {% for subcat in subcategory.col-row %}
                <li class="nav-item {% if subcat.p_type == 'address' and subcat.p_link == null or subcat.p_link == '' %}d-flex align-items-center{% endif %}">
                  {% if subcat.p_external == true %}
                    <a class="nav-link px-0" href="{{ subcat.p_link }}" target="_blank" {% if subcat.p_link_target == 'model' %} data-toggle="modal" data-target="#contactModal{{ subcat.p_form_id }}" {% endif %}>
                      {% if subcat.i_icon %}{{ subcat.i_icon }} {% endif %}{{ subcat.t_name }}
                    </a>
                  {% elsif subcat.p_type == 'address' and (subcat.p_link == null or subcat.p_link == '') %}
                    {% if subcat.i_icon %}{{ subcat.i_icon }} {% endif %}<span class="nav-link px-0">{{ subcat.t_name }}</span>
                  {% elsif subcat.p_link == null or subcat.p_link == '' %}
                    <a href="javascript:void(0)" class="nav-link px-0">
                      {% if subcat.i_icon %}{{ subcat.i_icon }} {% endif %}{{ subcat.t_name }}
                    </a>
                  {% else %}
                    <a class="nav-link px-0" href="{{ site.url }}/{% if page.language != 'default' %}{{ page.language }}/{% endif %}{{ subcat.p_link }}">
                      {% if subcat.i_icon %}{{ subcat.i_icon }} {% endif %}{{ subcat.t_name }}
                    </a>
                  {% endif %}
                </li>
                {% endfor %}
              </ul>
            {% endfor %}
          </div>
          {% endfor %}
        </div>
      </div>

    </div>
		</div>
		<hr class="my-0" style="border-color: #e7eaf3; opacity: .2;">
		<div class="py-4 footer-copyright">
			<div class="row align-items-md-center mb-3">
				<div class="col-md-3 mb-4 mb-md-0">
					<ul class="nav nav-sm nav-white nav-x-sm align-items-center">
						<li class="nav-item text-sm text-white">
							&copy; {{ "now" | date: "%Y" }} {{ site.data.languages[page.language]global.t_title }}.
							{{site.data.languages[page.language]global.t_copyright}}
						</li>
					</ul>
				</div>
				<div class="col-md-9 mb-4 mb-md-0">
					<!-- Nav Link -->
					<ul class="nav nav-sm nav-white nav-x-sm d-flex justify-content-end align-items-center">

						<li class="nav-item">
							<a class="nav-link text-sm p-0"
								href="{{ site.url }}/{{ site.data.languages[page.language]navigation_other.p_termsofuse_url }}">
								{{ site.data.languages[page.language]navigation_other.t_termsofuse }}
							</a>
						</li>
						<li class="nav-item mx-3">|</li>
						<li class="nav-item">
							<a class="nav-link text-sm p-0"
								href="{{ site.url }}/{{ site.data.languages[page.language]navigation_other.p_privacypolicy_url }}">
								{{ site.data.languages[page.language]navigation_other.t_privacypolicy }}
							</a>
						</li>
						<li class="nav-item mx-3">|</li>
						<li class="nav-item">
							<a class="nav-link text-sm p-0"
								href="{{ site.url }}/{{ site.data.languages[page.language]navigation_other.p_salesandrefund_url }}">
								{{ site.data.languages[page.language]navigation_other.t_salesandrefund }}
							</a>
						</li>
						<li class="nav-item mx-3">|</li>
						<li class="nav-item">
							<a class="nav-link text-sm p-0" rel="nofollow"
								href="{% if page.language == 'default' %}{{ site.url }}{% else %}{{ site.url }}/{{ page.language}}{% endif %}/sitemap.html">
								{{ site.data.languages[page.language]navigation_other.t_sitemap }}
							</a>
						</li>
						<li class="nav-item mx-3">|</li>
						<li class="nav-item">
							<a href="{{site.url}}/{{ site.data.languages[page.language]navigation_other.p_region_url }}"
								class="nav-link text-sm p-0">{{
								site.data.languages[page.language].navigation_other.languagetitle }}</a>
						</li>
						<li class="nav-item mx-2">
							<a href="{{site.url}}/{{ site.data.languages[page.language]navigation_other.p_region_url }}"
								class="text-white nav-link text-sm p-0">{{
								site.data.languages[page.language].navigation_other.lang_name }}</a>
						</li>
						<li class="nav-item  mx-1">
							{% if site.data.languages[page.language]navigation_other.flag %}
							<a href="{{site.url}}/{{ site.data.languages[page.language]navigation_other.p_region_url }}"
								class="">{% picture flag flags/{{
								site.data.languages[page.language]navigation_other.flag }} alt="{{
								site.data.languages[page.language]navigation_other.flag | remove: '.png' | replace:
								'-',' ' | replace: '_',' ' }}" style="background-image" class="flag flag-ci"%}</a>
							{% endif %}
						</li>
					</ul>
					<!-- End Nav Link -->
				</div>
			</div>
		</div>
	</div>
</div>
<!-- Do not remove This is in use this modal use for video pop product page -->
<div id="quickViewModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="quickViewModalTitle"
	aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title font-weight-normal text-dark" id="quickViewModalTitle">...</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<svg class="icon-close" xmlns="http://www.w3.org/2000/svg" width="25" height="25"
						viewBox="0 0 18 18">
						<path d="M15 4l-5 5 5 5v1h-1l-5-5-5 5H3v-1l5-5-5-5V3h1l5 5 5-5h1v1z"></path>
					</svg>
				</button>
			</div>
			<div class="modal-body">
				...
			</div>
		</div>
	</div>
</div>
<div class="sticky-footer fixed-bottom text-white bg-white" data-aos="fade-up" data-aos-offset="300"
	data-aos-mirror="true" data-aos-once="false">
	<div class="text-right">
		<button type="button" class="btn btn-link btn-lg text-muted close-sticky-footer d-none">
			<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none"
				stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
				class="feather feather-x">
				<line x1="18" y1="6" x2="6" y2="18"></line>
				<line x1="6" y1="6" x2="18" y2="18"></line>
			</svg>
		</button>
	</div>
</div>
</div>
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>