{{"<!-- service -->" | safeHTML }}
{{ with .Params.service }}
{{ if .enable }}
<section class="section pb-0" id="services">
  <div class="container">
    <div class="row">
      <div class="col-lg-10 mx-auto pe-md-4">
        <h2 class="section-title" data-aos="fade-up">{{ .title }}</h2>
        <p class="subtitle pb-4" data-aos="fade-up" data-aos-delay="200">{{ .subtitle | markdownify }}</p>
      </div>
      {{ range $index, $element:= .service_item }}
      {{ $delay := mul $index 100 }}
      <div class="col-xl-4 col-lg-6 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="{{$delay}}">
        <div class="card border-0 shadow rounded-xs py-3 px-2 text-center hover-bg-primary">
          <div class="card-body">
            <i class="icon-lg icon-{{ .icon_color }} icon-bg-{{ .icon_color }} icon-bg-circle mb-3">
              <i class="{{ .icon }}"></i>
            </i>
            <h3 class="mt-4 mb-3">{{ .title }}</h3>
            <p>{{ .content | markdownify }}</p>
            {{ if .link }}
              <a class="btn btn-sm btn-outline-primary px-4" href="{{ .link }}"><i class="fas fa-sm fa-info-circle"></i>{{ i18n "more_info" }}</a>
            {{ end }}
          </div>
        </div>
      </div>
      {{ end }}
    </div>
  </div>
</section>
{{ end }}
{{ end }}
{{"<!-- service -->" | safeHTML }}