{% extends "base.html" %}

{%- block content %}

    <section class="hero-sub" style="background-image: url({{ page.extra.hero_image | safe }})">
        <div class="container hero-sub__container">
            <nav class="bred-crum">
                <ul class="bred-crum__row">
                    <li class="bred-crum__item">
                        <a class="nav-bred bred-crum__link" href="/">{{ page.extra.menu_title_pre }}</a>
                    </li>
                    <li class="bred-crum__item">
                    <span class="nav-bred">
                        >
                    </span>
                    </li>
                    <li class="bred-crum__item">
                        <a class="nav-bred bred-crum__link bred-crum--active"
                           href="/{{ page.extra.hero_title | lower }}">{{ page.extra.hero_title }}</a>
                    </li>
                </ul>
            </nav>
            <div class="hero-sub__content">
                <h1 class="h1 hero-sub__title">
                    {{ page.extra.hero_title | safe }}
                </h1>


            </div>
        </div>
    </section>

    <section class="section-volunteering">
        <div class="container section-volunteering__container">
            <div class="section-volunteering__item">
                <div class="section-volunteering__select">
                    <h2 class="h5-boold  section-volunteering__title">
                        {{ page.extra.section_item_title_1 | safe }}
                    </h2>
                    <div class="section-volunteering__button">

                    </div>
                </div>
                <div class="section-volunteering__content">
                    <div class="section-volunteering__block">
                        <h3>
                            {{ page.extra.section_marketing_title_1 | safe }}
                        </h3>
                        <p>
                            {{ page.extra.section_marketing_description_1 | safe }}
                        </p>
                        <button class="button button--main">
                            {{ trans(key='volunteer-button', lang=lang) }}
                        </button>
                    </div>
                    <div class="section-volunteering__block">
                        <h3>
                            {{ page.extra.section_marketing_title_2 | safe }}
                        </h3>
                        <ul>
                            <li>{{ page.extra.marketing_section_list_item_1| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_2| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_3| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_4| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_5| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_6| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_7| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_8| safe }}</li>
                        </ul>
                        <button class="button button--main">
                            {{ trans(key='volunteer-button', lang=lang) }}
                        </button>
                    </div>
                </div>
            </div>
            <div class="section-volunteering__item">
                <div class="section-volunteering__select">
                    <h2 class="h5-boold  section-volunteering__title">
                        {{ page.extra.section_item_title_2 | safe }}
                    </h2>
                    <div class="section-volunteering__button">

                    </div>
                </div>
               <div class="section-volunteering__content">
                    <div class="section-volunteering__block">
                        <h3>
                            {{ page.extra.section_marketing_title_1 | safe }}
                        </h3>
                        <p>
                            {{ page.extra.section_marketing_description_1 | safe }}
                        </p>
                        <button class="button button--main">
                            {{ trans(key='volunteer-button', lang=lang) }}
                        </button>
                    </div>
                    <div class="section-volunteering__block">
                        <h3>
                            {{ page.extra.section_marketing_title_2 | safe }}
                        </h3>
                        <ul>
                            <li>{{ page.extra.marketing_section_list_item_1| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_2| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_3| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_4| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_5| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_6| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_7| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_8| safe }}</li>
                        </ul>
                        <button class="button button--main">
                            {{ trans(key='volunteer-button', lang=lang) }}
                        </button>
                    </div>
                </div>
            </div>
            <div class="section-volunteering__item">
                <div class="section-volunteering__select">
                    <h2 class="h5-boold  section-volunteering__title">
                        {{ page.extra.section_item_title_3 | safe }}
                    </h2>
                    <div class="section-volunteering__button">

                    </div>
                </div>
                  <div class="section-volunteering__content">
                    <div class="section-volunteering__block">
                        <h3>
                            {{ page.extra.section_marketing_title_1 | safe }}
                        </h3>
                        <p>
                            {{ page.extra.section_marketing_description_1 | safe }}
                        </p>
                        <button class="button button--main">
                            {{ trans(key='volunteer-button', lang=lang) }}
                        </button>
                    </div>
                    <div class="section-volunteering__block">
                        <h3>
                            {{ page.extra.section_marketing_title_2 | safe }}
                        </h3>
                        <ul>
                            <li>{{ page.extra.marketing_section_list_item_1| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_2| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_3| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_4| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_5| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_6| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_7| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_8| safe }}</li>
                        </ul>
                        <button class="button button--main">
                            {{ trans(key='volunteer-button', lang=lang) }}
                        </button>
                    </div>
                </div>
            </div>
            <div class="section-volunteering__item">
                <div class="section-volunteering__select">
                    <h2 class="h5-boold  section-volunteering__title">
                        {{ page.extra.section_item_title_3 | safe }}
                    </h2>
                    <div class="section-volunteering__button">

                    </div>
                </div>
                <div class="section-volunteering__content">
                    <div class="section-volunteering__block">
                        <h3>
                            {{ page.extra.section_marketing_title_1 | safe }}
                        </h3>
                        <p>
                            {{ page.extra.section_marketing_description_1 | safe }}
                        </p>
                        <button class="button button--main">
                            {{ trans(key='volunteer-button', lang=lang) }}
                        </button>
                    </div>
                    <div class="section-volunteering__block">
                        <h3>
                            {{ page.extra.section_marketing_title_2 | safe }}
                        </h3>
                        <ul>
                            <li>{{ page.extra.marketing_section_list_item_1| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_2| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_3| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_4| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_5| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_6| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_7| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_8| safe }}</li>
                        </ul>
                        <button class="button button--main">
                            {{ trans(key='volunteer-button', lang=lang) }}
                        </button>
                    </div>
                </div>
            </div>
            <div class="section-volunteering__item">
                <div class="section-volunteering__select">
                    <h2 class="h5-boold  section-volunteering__title">
                        {{ page.extra.section_item_title_4 | safe }}
                    </h2>
                    <div class="section-volunteering__button">

                    </div>
                </div>
                 <div class="section-volunteering__content">
                 <div class="section-volunteering__content">
                    <div class="section-volunteering__block">
                        <h3>
                            {{ page.extra.section_marketing_title_1 | safe }}
                        </h3>
                        <p>
                            {{ page.extra.section_marketing_description_1 | safe }}
                        </p>
                        <button class="button button--main">
                            {{ trans(key='volunteer-button', lang=lang) }}
                        </button>
                    </div>
                    <div class="section-volunteering__block">
                        <h3>
                            {{ page.extra.section_marketing_title_2 | safe }}
                        </h3>
                        <ul>
                            <li>{{ page.extra.marketing_section_list_item_1| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_2| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_3| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_4| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_5| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_6| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_7| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_8| safe }}</li>
                        </ul>
                        <button class="button button--main">
                            {{ trans(key='volunteer-button', lang=lang) }}
                        </button>
                    </div>
                </div>

                </div>
            </div>
            <div class="section-volunteering__item">
                <div class="section-volunteering__select">
                    <h2 class="h5-boold  section-volunteering__title">
                        {{ page.extra.section_item_title_4 | safe }}
                    </h2>
                    <div class="section-volunteering__button">

                    </div>
                </div>
               <div class="section-volunteering__content">
                    <div class="section-volunteering__block">
                        <h3>
                            {{ page.extra.section_marketing_title_1 | safe }}
                        </h3>
                        <p>
                            {{ page.extra.section_marketing_description_1 | safe }}
                        </p>
                        <button class="button button--main">
                            {{ trans(key='volunteer-button', lang=lang) }}
                        </button>
                    </div>
                    <div class="section-volunteering__block">
                        <h3>
                            {{ page.extra.section_marketing_title_2 | safe }}
                        </h3>
                        <ul>
                            <li>{{ page.extra.marketing_section_list_item_1| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_2| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_3| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_4| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_5| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_6| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_7| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_8| safe }}</li>
                        </ul>
                        <button class="button button--main">
                            {{ trans(key='volunteer-button', lang=lang) }}
                        </button>
                    </div>
                </div>
            </div>
            <div class="section-volunteering__item">
                <div class="section-volunteering__select">
                    <h2 class="h5-boold  section-volunteering__title">
                        {{ page.extra.section_marketing_title_1 | safe }}
                    </h2>
                    <div class="section-volunteering__button">

                    </div>
                </div>
                <div class="section-volunteering__content">
                    <div class="section-volunteering__block">
                        <h3>
                            {{ page.extra.section_marketing_title_1 | safe }}
                        </h3>
                        <p>
                            {{ page.extra.section_marketing_description_1 | safe }}
                        </p>
                        <button class="button button--main">
                            {{ trans(key='volunteer-button', lang=lang) }}
                        </button>
                    </div>
                    <div class="section-volunteering__block">
                        <h3>
                            {{ page.extra.section_marketing_title_2 | safe }}
                        </h3>
                        <ul>
                            <li>{{ page.extra.marketing_section_list_item_1| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_2| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_3| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_4| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_5| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_6| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_7| safe }}</li>
                            <li>{{ page.extra.marketing_section_list_item_8| safe }}</li>
                        </ul>
                        <button class="button button--main">
                            {{ trans(key='volunteer-button', lang=lang) }}
                        </button>
                    </div>
                </div>
            </div>
        </div>

    </section>

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


{%- endblock content %}