{% 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>

      </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>

      </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">

      </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>

      </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>

      </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">
          Freedom Is Here
        </h3>
        <p class="p single-section__description">
          Discover your journey, navigate the world with privacy and community at the forefront.
        </p>
        {% include 'components/download-button.html' %}
      </div>
      <div class="single-section__card">
        <img alt="img" class="single-section__img animation-item" src="/images/sections/singl-card-1.png">

      </div>
    </div>
    <!--Item End-->
  </div>
</section>

{{ resource.content | safe }}



{% endblock content %}