{{ define "main" }}

{{ $data := index site.Data site.Language.Lang }}

{{ if $data.homepage.banner.enable }}
{{ with $data.homepage.banner }}
<!-- start of banner -->
<section class="banner bg-cover-bottom has-shapes bg-light-gray has-bg-brash bg-brash-bottom"
  style="background-image: url('{{`images/brushes/banner.svg` | absURL }}')" data-aos="fade-in" data-aos-delay="150">
  <div class="container h-100">
    <div class="d-block d-lg-flex no-gutters align-items-center h-100">
      <div class="col-12 col-xl-8 col-lg-8 order-lg-1">
        <div class="banner-image has-video-popup has-shapes mb-4 mb-md-5 mb-lg-0">
          {{ if .video.enable }}
          {{ with .video }}
          <button type="button" class="video-play-btn" data-toggle="modal" data-src="{{ .video_embed_link }}"
            data-target="#videoModal"><svg width="1.8em" height="1.8em" viewBox="0 0 16 16" fill="currentColor"
              xmlns="http://www.w3.org/2000/svg">
              <path
                d="M11.596 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z" />
            </svg>
          </button>
          {{ end }}
          {{ end }}
          <img loading="lazy" class="img-fluid" src="{{ .image | absURL }}" alt="">
        </div>
      </div>
      <div class="col-xl-5 col-lg-6 order-lg-0">
        <h2 class="h1 mb-20">{{ .title | markdownify }}</h2>
        <p>{{ .content | markdownify }}</p>

        {{if .form.enable }}
        {{with .form }}
        <form action="{{.form_action}}" method="post" class="needs-validation mt-30" novalidate>
          <div class="input-group d-block d-sm-flex">
            <input type="email" class="form-control bg-transparent" placeholder="name@email.com" required>
            <div class="input-group-append">
              <button type="submit" class="btn btn-primary has-icon ml-15">{{.button_label}}
                <span class="icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M12.5522 6.66669L20.5522 14.6667C21.0329 15.1473 21.0699 15.9036 20.6632 16.4267L20.5522 16.5523L12.5522 24.5523L10.6666 22.6667L17.7228 15.6095L10.6666 8.55231L12.5522 6.66669Z"
                      fill="currentColor" /></svg></span>
              </button>
            </div>
          </div>
        </form>

        <div class="divider-text mt-25 mb-25"><span class="bg-light-gray">OR</span></div>
        {{ end }}
        {{ end }}

        {{ if .button.enable }}
        {{ with .button }}
        <a href="{{.link | absLangURL}}"
          class="btn btn-outline-secondary d-flex align-items-center justify-content-center">
          {{with .icon}} <img loading="lazy" class="mr-2" src="{{ . }}">{{end}} {{.label}}</a>

        <p class="content has-underdot-link text-black-700 mt-15">{{ .content | markdownify }}</p>
        {{ end }}
        {{ end }}
      </div>
    </div>
  </div>
</section>
<!-- end of banner -->

<!-- start of videoModal -->
{{ if .video.enable }}
<div class="modal fade rounded" id="videoModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered border-0" role="document">
    <div class="modal-content">
      <div class="modal-body p-0 bg-transparent">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
            aria-hidden="true">&times;</span></button>
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item" src="" id="showVideo" allowscriptaccess="always"
            allow="autoplay"></iframe>
        </div>
      </div>
    </div>
  </div>
</div>
{{ end }}
<!-- end of videoModal -->
{{ end }}
{{ end }}

<!-- start of brand-carousel -->
{{ if $data.homepage.clients_logo_slider.enable }}
{{ with $data.homepage.clients_logo_slider }}
<section class="section-padding overflow-hidden">
  <div class="container">
    <div class="row">
      <div class="col-md-12" data-aos="fade-left">
        <div class="brand-carousel">
          {{ range .logos }}
          <div class="brand-item d-flex align-items-center justify-content-center">
            <img loading="lazy" class="img-fluid" src="{{ . |absURL}}" alt=""></div>
          {{ end }}
        </div>
      </div>
    </div>
  </div>
</section>
{{ end }}
{{ end }}
<!-- end of brand-carousel -->

<!-- start of how-it-works tab -->
{{ if $data.homepage.homepage_tab.enable }}
{{ with $data.homepage.homepage_tab }}
<section class="section-padding how-it-works-tab pt-0 overflow-hidden">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-6 col-md-9 text-center mb-40">
        <h2 class="section-title">{{ .title | markdownify }}</h2>
        <p>{{ .content | markdownify }}</p>
      </div>
      <div class="col-lg-11">
        <ul class="nav nav-pills justify-content-center mb-20" id="pills-tab" role="tablist">
          {{ range $i, $e:= .tablist }}
          <li class="nav-item mb-20" role="presentation">
            <a class="nav-link {{if eq $i 0}}active{{end}}" id="pill-{{.title| urlize}}" data-toggle="pill"
              href="#{{.title| urlize}}" role="tab" aria-controls="{{.title| urlize}}" aria-selected="true">
              <i class="circle-shape"></i>{{.name}}
            </a>
          </li>
          {{ end }}
        </ul>

        <div class="tab-content" id="pills-tabContent" data-aos="fade-in">
          {{ range $i, $e:= .tablist }}
          <div class="tab-pane fade {{if eq $i 0}}show active{{end}}" id="{{.name | urlize}}" role="tabpanel"
            aria-labelledby="pill-{{.name | urlize}}">
            <div class="row align-items-center">
              <div class="col-lg-8 anim-to-top">
                <img loading="lazy" class="img-fluid rounded-lg shadow" src="{{ .image | absURL }}" alt="">
              </div>
              <div class="col-lg-4 mt-4 mt-lg-0 anim-to-bottom">
                <h2 class="section-title">{{ .title | markdownify }}</h2>
                <p class="mb-30">{{ .content | markdownify }}</p>
                {{ if .button.enable }}
                {{ with .button }}
                <a href="{{ .link | absLangURL }}" class="btn btn-primary has-icon">{{ .label }}
                  <span class="icon">
                    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path
                        d="M12.5522 6.66669L20.5522 14.6667C21.0329 15.1473 21.0699 15.9036 20.6632 16.4267L20.5522 16.5523L12.5522 24.5523L10.6666 22.6667L17.7228 15.6095L10.6666 8.55231L12.5522 6.66669Z"
                        fill="currentColor" />
                    </svg>
                  </span>
                </a>
                {{ end }}
                {{ end }}
              </div>
            </div>
          </div>
          {{ end }}
        </div>
      </div>
    </div>
  </div>
</section>
{{ end }}
{{ end }}
<!-- end of how-it-works tab -->

<!-- start of tools-use -->
{{ if $data.homepage.tools.enable }}
{{ with $data.homepage.tools }}
<section class="section-padding tools-use-section has-shapes bg-light-gray has-bg-brash bg-brash-y"
  style="background-image: url('{{`images/brushes/section-top.svg` | absURL}}'), url('{{`images/brushes/section-bottom.svg` | absURL}}');">
  <div class="container">
    <div class="row align-items-center justify-content-center">
      <div class="col-lg-4 mt-4 mt-lg-0">
        <h2 class="section-title">{{ .title | markdownify }}</h2>
        <p>{{ .content | markdownify }}</p>
      </div>
      <div class="col-lg-6">
        <ul class="inCircle-tools d-block d-sm-flex align-items-center justify-content-center" id="inCircle-element">
          {{ range $i, $e:= .logos}}
          <li
            class="{{if modBool $i 2}} {{if eq $i 0}} has-centered lg {{else}}sm{{end}}{{else}}md{{end}} d-inline-flex align-items-center justify-content-center bg-white shadow rounded-circle">
            <img loading="lazy" src="{{. | absURL}}">
          </li>
          {{ end }}
        </ul>
      </div>
    </div>
  </div>
</section>
{{ end }}
{{ end }}
<!-- end of tools-use -->

<!-- start of growth-rate -->
{{ if $data.homepage.achivement.enable }}
{{ with $data.homepage.achivement }}
<section class="section-padding pb-50">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-xl-10">
        <div class="row align-items-center">
          <div class="col-lg-6">
            <h2 class="section-title">{{ .title | markdownify }}</h2>
            <p class="border-bottom pb-30 mr-0 mr-lg-5">{{ .content | markdownify }}</p>
            <div class="has-colored-text growth-rate-counter">
              {{ range .funfacts }}
              <div class="d-inline-block block-sm mr-30 mt-30">
                <h2 class="has-text-color font-weight-bold">
                  <span class="jsCounter" data-count="{{.count}}">0</span>{{.extension}}</h2>
                <p class="mt-10">{{ .name | markdownify }}</p>
              </div>
              {{ end }}
            </div>
          </div>
          <div class="col-lg-6 mt-5 mt-lg-0">
            <div class="row colored-icon-box">
              {{ range $i, $e:= .services }}
              <div class="col-sm-6" data-aos="fade-up" data-aos-delay="{{mul $i 100}}">
                <div class="icon-box text-center shadow px-3 px-md-5 px-lg-2 py-5 mb-30">
                  <i class="{{ .icon }} icon"></i>
                  <h4 class="font-weight-bold text-black-200">{{ .name | markdownify }}</h4>
                </div>
              </div>
              {{ end }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
{{ end }}
{{ end }}
<!-- end of growth-rate -->

<!-- start of image-info -->
{{ if $data.homepage.workflow.enable }}
{{ with $data.homepage.workflow }}
<section class="section-padding image-info-section has-shapes bg-light-gray has-bg-brash bg-brash-y"
  style="background-image: url('{{`images/brushes/section-top.svg` | absURL}}'), url('{{`images/brushes/section-bottom.svg` | absURL}}');">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-8 col-md-7">
        <div class="has-shapes">
          <img loading="lazy" class="img-fluid py-4 my-2" src="{{ .image | absURL }}">
        </div>
      </div>
      <div class="col-lg-4 col-md-5">
        <h2 class="section-title">{{ .title | markdownify }}</h2>
        <p>{{ .content | markdownify }}</p>
      </div>
    </div>
  </div>
</section>
{{ end }}
{{ end }}
<!-- end of image-info -->

{{ if $data.homepage.about_us.enable }}
{{ with $data.homepage.about_us }}
<!-- start section -->
<section class="section-padding">
  <div class="container">
    <div class="row align-items-center justify-content-around">
      <div class="col-lg-5 col-md-8 col-sm-10 mb-5">
        <h2 class="section-title">{{ .title | markdownify }}</h2>
        <p class="pb-20 border-bottom mb-20">{{ .content | markdownify }}</p>
        <ul class="check-list list-unstyled">
          {{ range .bulletpoints }}
          <li class="mb-15">
            <svg width="16" height="11" viewBox="0 0 18 13" class="text-primary mr-2" fill="none"
              xmlns="http://www.w3.org/2000/svg">
              <path d="M2 6.125L6.91892 11L16 2" stroke="currentColor" stroke-width="3" stroke-linecap="round"
                stroke-linejoin="round" /></svg>
            {{ . | markdownify }}
          </li>
          {{ end }}
        </ul>
      </div>
      <div class="col-lg-5 col-md-8 col-sm-10">
        <div class="d-inline-block has-shadow shadow-right has-shapes">
          <img loading="lazy" class="img-fluid rounded-sm" src="{{ .image | absURL }}">
        </div>
      </div>
    </div>
  </div>
</section>
{{ end }}
{{ end }}
<!-- end section -->

{{ if .Params.mission.enable }}
{{ partial "mission.html" . }}
{{ end }}

{{partial "testimonial.html" . }}

{{ end }}