{% extends 'base.html' %}

{% block content %}

{% include 'section/hero.html' %}

{% include 'section/open_map.html' %}

<section class="services">
  <div class="container services__container">
      <!--Item-->
      <div class="services__item animation animation--right">
          <div class="services__content">
              <h3 class="h2 services__title">
                {{ section.extra.services_section_card_title_1 }}
              </h3>
              <p class="p services__description">
                {{ section.extra.services_section_card_description_1}}
              </p>
              <a class="button button--transparent services__btn" href="#">
                {{ trans(key='learn-more-link', lang=lang) }}
                  {% include 'ui/btn-arrow.html' %}
              </a>
          </div>
          <div class="services__card">
              <img class="services__img services__img--first animation-item" src="/images/sections/map-m-1.png" alt="img">
              <img class="services__img" src="/images/sections/map-s-1.png" alt="img">
              <a class="button button--card services__button " href="#">
                {{ section.extra.services_section_card_button_info_1 }}
                  {% include 'ui/icons/social/card/icon01.html' %}
              </a>
          </div>
      </div>
      <!--Item End-->
      <!--Item-->
      <div class="services__item animation animation--left">
          <div class="services__content">
              <h3 class="h2 services__title">
                {{ section.extra.services_section_card_title_2 }}
              </h3>
              <p class="p services__description">
                {{ section.extra.services_section_card_description_2}}
              </p>
              <a class="button button--transparent services__btn" href="#">
                {{ trans(key='learn-more-link', lang=lang) }}
                  {% include 'ui/btn-arrow.html' %}
              </a>
          </div>
          <div class="services__card">
              <img class="services__img services__img--first animation-item" src="/images/sections/map-m-2.png" alt="img">
              <img class="services__img" src="/images/sections/map-s-2.png" alt="img">
              <a class="button button--card services__button" href="#">
                {{ section.extra.services_section_card_button_info_2 }}
                  {% include 'ui/icons/social/card/icon02.html' %}
              </a>
          </div>
      </div>
      <!-- Item End-->
      <!--Item-->
      <div class="services__item animation animation--right-revers">
          <div class="services__content">
              <h3 class="h2 services__title">
                {{ section.extra.services_section_card_title_3 }}
              </h3>
              <p class="p services__description">
                {{ section.extra.services_section_card_description_3}}
              </p>
              <a class="button button--transparent services__btn" href="#">
                {{ trans(key='learn-more-link', lang=lang) }}
                  {% include 'ui/btn-arrow.html' %}
              </a>
          </div>
          <div class="services__card services__card--start">
              <img class="services__img services__img--first animation-item" src="/images/sections/map-m-3.png" alt="img">
              <img class="services__img" src="/images/sections/map-s-3.png" alt="img">
              <a class="button button--card services__button" href="#">
                <span> <b>34%</b> <br>  {{ section.extra.services_section_card_button_info_3 }}</span>
                 {% include 'ui/icons/social/card/icon03.html' %}
              </a>
          </div>
      </div>
      <!-- Item End-->
      <!--Item-->
      <div class="services__item animation animation--left">
          <div class="services__content">
              <h3 class="h2 services__title">
                {{ section.extra.services_section_card_title_4 }}
              </h3>
              <p class="p services__description">
                {{ section.extra.services_section_card_description_4}}
              </p>
              <a class="button button--transparent services__btn" href="#">
                  {{ trans(key='learn-more-link', lang=lang) }}
                  {% include 'ui/btn-arrow.html' %}
              </a>
          </div>
          <div class="services__card">
              <img class="services__img services__img--first animation-item" src="/images/sections/map-m-4.png" alt="img">
              <img class="services__img" src="/images/sections/map-s-4.png" alt="img">
              <a class="button button--card services__button" href="#">
                {{ section.extra.services_section_card_button_info_4 }}
                  {% include 'ui/icons/social/card/icon04.html' %}
              </a>
          </div>
      </div>
      <!-- Item End-->
  </div>
</section>

{% include 'section/single-section.html' %}
<section class="single-section">
  <div class="container single-section__container">
      <!--Item-->
      <div class="single-section__item animation animation--down">
          <div class="single-section__content">
              <h3 class="h2 single-section__title">
                {{ section.extra.single_section_title }}
              </h3>
              <p class="p single-section__description">
                {{ section.extra.single_section_description }}
              </p>
              {% include 'components/download-button.html' %}
          </div>
          <div class="single-section__card">
              <img class="single-section__img animation-item" src="/images/sections/singl-card-1.png">

          </div>
      </div>
      <!--Item End-->
  </div>
</section>
{{ section.extra.menu_title }}
{{ resource.content | safe }}



{% endblock content %}