{{ define "main" }}

{{ partial "page-title.html" . }}

{{ with .Params.about }}
{{ if .enable }}
<section class="service-about section">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        {{ with .title }}<h2>{{ . | markdownify }}</h2>{{ end }}
        {{ with .content }}<div class="mt-30 fixed-text">{{ . | $.Page.RenderString (dict "display" "block") }}</div>{{ end }}
      </div>
      {{ with .image -}}
      <div class="col-md-6">
        <img class="img-fluid" src="{{ . | relURL }}">
      </div>
      {{- end }}
    </div>
  </div>
</section>
{{ end }}
{{ end }}

{{ with .Params.featured_service }}
{{ if .enable }}
<section class="service-arrow">
  <div class="container">
    {{ range .service_item }}
    <div class="row mb-6">
      <div class="col-md-12 bg-{{ .color }} no-float">
        <div class="block d-flex align-items-center justify-content-between">
          <div class="service-icon">
            <i class="{{ .icon }}"></i>
          </div>
          <div class="service-content flex-grow-1">
            {{ with .name }}<h3 class="service-title">{{ . | markdownify }}</h3>{{ end }}
            {{ with .content }}<div class="service-description">{{ . | $.Page.RenderString (dict "display" "block") }}</div>{{ end }}
          </div>
          {{ if .image }}
          <div class="service-image">
            <img src="{{ .image | relURL }}" alt="{{ .name }}" class="responsive-image">
          </div>
          {{ end }}
        </div>
      </div>
    </div>
    {{ end }}
  </div>
</section>
{{ end }}
{{ end }}

<!-- Call to action -->
{{ if .Params.cta.enable }}
{{ partial "cta.html" . }}
{{ end }}
<!-- /Call to action -->

{{ end }}