{{ define "main" }}

<!-- start of career-section -->
{{ if .Params.intro.enable }}
{{ with .Params.intro }}
<section class="section-padding" data-aos="fade-in" data-aos-delay="150">
  <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 mb-lg-0">
        <h2 class="section-title">{{ .title | markdownify }}</h2>
        <p class="mb-30">{{ .content | markdownify }}</p>
        {{ if .button.enable }}
        {{ with .button }}
        <a href="{{ .link }}" class="btn btn-primary has-icon smooth-scroll">{{ .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 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 }}" alt="">
        </div>
      </div>
    </div>
  </div>
</section>
{{ end }}
{{ end }}
<!-- end of career-section -->

<!-- start of horizontal-accordion -->
{{ if .Params.flexibility.enable }}
{{ with .Params.flexibility }}
<section class="section-padding pt-100 horizontal-accordion bg-light-gray has-shapes 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 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>
    <div class="has-colored-text row justify-content-center">
      {{ range $i,$e:= .item }}
      <div class="col-md-5 col-sm-6 mb-30">
        <div class="bg-white shadow rounded p-30" data-aos="fade-up" data-aos-delay="50">
          <div class="d-flex justify-content-between mb-2 mb-lg-3">
            <h5 class="text-black-500">0{{add $i 1}}</h5>
            <div class="has-text-color h2">
              <i class="{{ .icon }}"></i>
            </div>
          </div>
          <h3 class="mb-2 mb-lg-4 font-weight-600">{{ .name | markdownify }}</h3>
          <div class="accordion-panel">
            <p>{{ .content | markdownify }}</p>
          </div>
        </div>
      </div>
      {{ end }}
    </div>
  </div>
</section>
{{ end }}
{{ end }}
<!-- end of horizontal-accordion -->

<!-- start of benifits section -->
{{ if .Params.benifits.enable }}
{{ with .Params.benifits }}
<section class="section-padding pb-50">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-6 col-md-9 text-center mb-40" data-aos="fade-in">
        <h2 class="section-title">{{ .title | markdownify }}</h2>
        <p>{{ .content | markdownify}}</p>
      </div>
    </div>
    <div class="has-colored-text row">
      {{ range .item }}
      <div class="col-lg-4 col-md-6">
        <div class="text-center p-0 p-md-2 mb-30" data-aos="fade-up">
          <div class="has-text-color h2">
            <i class="{{ .icon }}"></i>
          </div>
          <h5 class="font-weight-600 mt-20 mb-15 text-capitalize">{{ .name | markdownify }}</h5>
          <p>{{ .content | markdownify }}</p>
        </div>
      </div>
      {{ end }}
    </div>
  </div>
</section>
{{ end }}
{{ end }}
<!-- end of benifits section -->

<!-- start of life-at-gallery -->
{{ if .Params.gallery.enable }}
{{ with .Params.gallery }}
<section class="section-padding life-at-gallery bg-light-gray has-shapes 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 justify-content-center mt-30">
      <div class="col-lg-10" data-aos="fade-in">
        <div class="row text-center">
          {{ range .item }}
          <div class="col-lg-{{.width}} col-md-4 col-sm-6 mb-30">
            <img loading="lazy" class="img-fluid" src="{{ .image | absURL }}" alt="">
          </div>
          {{ end }}
        </div>
      </div>
    </div>
  </div>
</section>
{{end}}
{{end}}
<!-- end of life-at-gallery -->

<!-- start of join-team section -->
<section id="join-team" class="section-padding pb-50 join-team-section has-shapes">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-6 col-md-9 text-center mb-40" data-aos="fade-in">
        <div class="content">{{.Content}}</div>
      </div>
    </div>
    <div class="row justify-content-center mt-30">
      <div class="col-lg-9">
        <div class="row">
          {{ range .Data.Pages }}
          <div class="col-md-6" data-aos="fade-up">
            <div class="bg-white text-center shadow rounded p-30 mb-30">
              <h3 class="mb-2 font-weight-bold">{{ .Title | markdownify }}</h3>
              <h6 class="text-black-800 mb-15">{{ .Params.Job_type }}</h6>
              <a href="{{ .Permalink }}" class="btn btn-link text-primary p-0 font-weight-bold">{{ i18n "view_job"}}<svg
                  width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-arrow-right-short" fill="currentColor"
                  xmlns="http://www.w3.org/2000/svg" style="vertical-align: middle;">
                  <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z" />
                </svg></a>
            </div>
          </div>
          {{ end }}
        </div>
      </div>
    </div>
  </div>
</section>
<!-- end of join-team section -->

{{ end }}