{{ if .Site.Data.about.enable}}
{{"<!-- Start About Section -->" | safeHTML}}
<section class="bg-one about section" id="requirements">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                {{"<!-- section title -->" | safeHTML}}
                <div class="title text-center wow fadeIn" data-wow-duration="1500ms">
                    <h2>{{ .Site.Data.about.heading}} <span class="color">{{ .Site.Data.about.headingSpan}}</span> </h2>
                    <div class="border-meghna"></div>
                </div>
            </div>
            {{"<!-- /section title -->" | safeHTML}}

            {{"<!-- About item -->" | safeHTML}}
            <div class="mx-auto wow fadeInUp" data-wow-duration="500ms">
                <div class="block" id="requirements">
                    {{"<!-- Express About Yourself -->" | safeHTML}}
                    <ul>
                      {{ range $requirement := $.Site.Data.about.requirements }}
                      <li>{{ $requirement }}</li>
                      {{ end }}
                    </ul>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                {{"<!-- section title -->" | safeHTML}}
                <div class="title text-center wow fadeIn" data-wow-duration="1500ms">
                    <h2>Benefits</h2>
                    <div class="border-meghna"></div>
                </div>
            </div>
            {{"<!-- /section title -->" | safeHTML}}

            {{"<!-- About item -->" | safeHTML}}
            <div class="mx-auto wow fadeInUp" data-wow-duration="500ms">
                <div class="block" id="benefits">
                    {{"<!-- Express About Yourself -->" | safeHTML}}
                    <ul>
                      {{ range $benefit := $.Site.Data.about.benefits }}
                      <li>{{ $benefit }}</li>
                      {{ end }}
                    </ul>
                </div>
            </div>
        </div>
        <div class="row">
          <!-- <img id="clan-logo" class="img-fluid mx-auto" src="/images/clan-logo.png" alt="clan-logo"/> -->
          <img id="clan-logo" class="img-fluid mx-auto"
          src="/images/clan-logo-christmas.png" alt="clan-logo"/>
        </div>
    </div>
</section>
{{"<!-- /about -->" | safeHTML}}
{{ end }}

{{ if .Site.Data.about2.enable }}
{{"<!-- about 2 -->" | safeHTML}}
<section class="section section-bg about-2 padding-0" id="about">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-6 padding-0 ">
                <img class="img-fluid" src="{{ .Site.Data.about2.image | absURL}}" alt="image">
            </div>
            <div class="col-lg-6">
                <div class="content-block">
                    {{with .Site.Data.about2.title}} <h2>{{ . }}</h2> {{ end }}
                    {{with .Site.Data.about2.description}} <p>{{ . }}</p> {{ end }}
                    {{with .Site.Data.about2.description2}} <p>{{ . }}</p> {{ end }}
                    <div class="row">
                        {{ range .Site.Data.about2.aboutItem }}
                        <div class="col-lg-6">
                            <div class="media">
                                <div class="align-self-start mr-3">
                                    {{with .icon}} <i class="{{ . }}"></i> {{ end }}
                                </div>
                                <div class="media-body">
                                    {{with .title}} <h4 class="media-heading">{{ . }}</h4>{{ end }}
                                    {{ with .content}} <p>{{ . }}</p> {{ end }}
                                </div>
                            </div>
                        </div>
                        {{ end }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{{"<!-- /about 2 -->" | safeHTML}}
{{ end }}
