{% if page.client_text.t_headline or page.product_client or page.integration_icon %}
<section class="hub-section py-5">
	{% if page.client_text.t_headline %}
	<div class="container">
        <div class="row mb-5 justify-content-center text-center">
			<div class="col-lg-12 col-md-12">
				<h2 class="h1 font-weight-normal mt-5 mb-4 max-width-75 mx-auto">
					{{ page.client_text.t_headline }}
				</h2>
				<p class="lead font-weight-normal">
					{{ page.client_text.t_subheadline }}
				</p>
			</div>
		</div>
	</div>
	{% endif %}
	{% if page.product_client %}
	<div class="overflow-hidden">
		<div class="logo-bubbles">
			<div
				class="logo-bubbles__bubble logo-bubbles__bubble--no-limits logo-bubbles--tangerine logo-bubbles__partner--tangerine-1">
			</div>
			<div
				class="logo-bubbles__bubble logo-bubbles__bubble--no-limits logo-bubbles--tangerine logo-bubbles__partner--tangerine-2">
			</div>
			<div
				class="logo-bubbles__bubble logo-bubbles__bubble--no-limits logo-bubbles--tangerine logo-bubbles__partner--tangerine-3">
			</div>
			<div
				class="logo-bubbles__bubble logo-bubbles__bubble--no-limits logo-bubbles--tangerine logo-bubbles__partner--tangerine-4">
			</div>
			<div
				class="logo-bubbles__bubble logo-bubbles__bubble--no-limits logo-bubbles--eggplant logo-bubbles__partner--eggplant-1">
			</div>
			<div
				class="logo-bubbles__bubble logo-bubbles__bubble--no-limits logo-bubbles--eggplant logo-bubbles__partner--eggplant-2">
			</div>
			<div
				class="logo-bubbles__bubble logo-bubbles__bubble--no-limits logo-bubbles--eggplant logo-bubbles__partner--eggplant-3">
			</div>
			<div
				class="logo-bubbles__bubble logo-bubbles__bubble--no-limits logo-bubbles--eggplant logo-bubbles__partner--eggplant-4">
			</div>
			{% if page.product_client_icon %}
			{% for item in page.product_client_icon  %}
			<div class="{{ item.p_class }}">
				{% picture thumbnail_image_sm pages/{{ item.i_client_icon }}  alt="{{ item.i_client_icon | remove: '.png' | remove: '.webp' | remove: '.jpg'| replace: '-',' ' | replace: '_',' ' }}" class="logo-bubbles__logo" %}
			</div>
			{% endfor %}
			{% endif %}
			{% for item in page.i_client_icon  %}
			<div class="{{ item.p_class }}">
				{% picture thumbnail_sm store-apps/{{ item.i_client_icon }}  alt="{{ item.i_client_icon | remove: '.png' | remove: '.webp' | remove: '.jpg'| replace: '-',' ' | replace: '_',' ' }}" class="logo-bubbles__full-image" %}
			</div>
			{% endfor %}
		</div>
	</div>
	{% endif %}

	{% if page.integration_icon %}
	<div class="client-group d-flex align-items-center justify-content-center">
		<div class="logo-bubbles logo-bubbles--partners logo-bubbles--wide my-4 ">
			<div
				class="logo-bubbles__bubble logo-bubbles__bubble--no-limits logo-bubbles--tangerine logo-bubbles__partner--tangerine-3">
			</div>
			<div
				class="logo-bubbles__bubble logo-bubbles__bubble--no-limits logo-bubbles--eggplant logo-bubbles__partner--eggplant-1">
			</div>
			<div class="logo-bubbles__flourish logo-bubbles__partner--flourish-1">
				<svg class="icon-section__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50.9 57.5" width="1000"><circle cx="7.2" cy="20.1" r="7.2" fill="#6d87dd"></circle><circle cx="26.2" cy="7.2" r="7.2" fill="#6d87dd"></circle><circle cx="26.2" cy="29.2" r="7.2" fill="#6d87dd"></circle><circle cx="43.7" cy="20.1" r="7.2" fill="#6d87dd"></circle><circle cx="43.7" cy="38.9" r="7.2" fill="#6d87dd"></circle><circle cx="26.2" cy="50.3" r="7.2" fill="#6d87dd"></circle><circle cx="7.2" cy="38.9" r="7.2" fill="#6d87dd"></circle></svg>
			</div>
			<div class="logo-bubbles__flourish logo-bubbles__partner--flourish-2">
				<svg class="icon-section__icon icon-section__icon--mint" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50.9 57.5" width="1000"><circle cx="7.2" cy="20.1" r="7.2" fill="#6d87dd"></circle><circle cx="26.2" cy="7.2" r="7.2" fill="#6d87dd"></circle><circle cx="26.2" cy="29.2" r="7.2" fill="#6d87dd"></circle><circle cx="43.7" cy="20.1" r="7.2" fill="#6d87dd"></circle><circle cx="43.7" cy="38.9" r="7.2" fill="#6d87dd"></circle><circle cx="26.2" cy="50.3" r="7.2" fill="#6d87dd"></circle><circle cx="7.2" cy="38.9" r="7.2" fill="#6d87dd"></circle></svg>
			</div>
			<div class="logo-bubbles__flourish logo-bubbles__partner--flourish-3">
				<svg class="icon-section__icon icon-section__icon--tangerine" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50.9 57.5" width="1000"><circle cx="7.2" cy="20.1" r="7.2" fill="#6d87dd"></circle><circle cx="26.2" cy="7.2" r="7.2" fill="#6d87dd"></circle><circle cx="26.2" cy="29.2" r="7.2" fill="#6d87dd"></circle><circle cx="43.7" cy="20.1" r="7.2" fill="#6d87dd"></circle><circle cx="43.7" cy="38.9" r="7.2" fill="#6d87dd"></circle><circle cx="26.2" cy="50.3" r="7.2" fill="#6d87dd"></circle><circle cx="7.2" cy="38.9" r="7.2" fill="#6d87dd"></circle></svg>
			</div>
			<div class="logo-bubbles__flourish logo-bubbles__partner--flourish-4">
				<svg class="icon-section__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50.9 57.5" width="1000"><circle cx="7.2" cy="20.1" r="7.2" fill="#6d87dd"></circle><circle cx="26.2" cy="7.2" r="7.2" fill="#6d87dd"></circle><circle cx="26.2" cy="29.2" r="7.2" fill="#6d87dd"></circle><circle cx="43.7" cy="20.1" r="7.2" fill="#6d87dd"></circle><circle cx="43.7" cy="38.9" r="7.2" fill="#6d87dd"></circle><circle cx="26.2" cy="50.3" r="7.2" fill="#6d87dd"></circle><circle cx="7.2" cy="38.9" r="7.2" fill="#6d87dd"></circle></svg>
			</div>
			{% for item in page.integration_icon %}
				<a href="#"
					title="{{ item.i_client_icon | remove: '.png' | remove: '.webp' | remove: '.jpg'| replace: '-',' ' | replace: '_',' ' }}" aria-label="{{ item.i_client_icon | remove: '.png' | remove: '.webp' | remove: '.jpg'| replace: '-',' ' | replace: '_',' ' }}"
					class="js-tracking-partner-bubbles">
					<div class="{{ item.p_class }}">
						{% picture thumbnail_sm pages/{{ item.i_client_icon }}  alt="{{ item.i_client_icon | remove: '.png' | remove: '.webp' | remove: '.jpg'| replace: '-',' ' | replace: '_',' ' }}" %}
					</div>
				</a>
			{% endfor %}
		</div>
	</div>
	{% endif %}
	{% if page.client_text.t_integration_btn %}
	<div class="container-fluid">
        <div class="row justify-content-center text-center mb-5">
			<div  class="w-md-80 w-75 text-center mx-md-auto" data-jarallax-element="-50" data-aos="slide-up" data-aos-offset="50">
				<div class="d-inline-block border border-warning bg-white text-center rounded-pill py-3 px-5">
					<a class="ml-3 text-warning" href="{{site.url}}/{{page.client_text.t_integration_url}}"> {{ page.client_text.t_integration_btn}}
						<span class="arrow_right_icon ml-2 fa-lg"></span></a>
				</div>
			</div>
		</div>
	</div>
	{% endif %}
</section>
{% endif %}