{{ with .Site.Data.serviceSection }}
{{ if .enable }}
<section class="section service" id="service">
    <div class="service__background">
        <svg viewBox="0 0 1283 1126">
            <path fill="#f1f6f9" d="M100 0h1183v1126l-1183-80A100 100 0 010 946V100A100 100 0 01100 0z"
                data-name="Path 1369" />
        </svg>
    </div>
    <div class="service__background_shape">
        <svg viewBox="0 0 550 550">
            <defs>
                <linearGradient id="b" x1="0.209" y1="0.085" x2="1.071" y2="1.164" gradientUnits="objectBoundingBox">
                    <stop offset="0" stop-color="#f1f6f9" />
                    <stop offset="1" stop-color="#f1f6f9" stop-opacity="0" />
                </linearGradient>
            </defs>
            <g data-name="blob-shape (3)">
                <path class="blob" fill="url(#b)"
                    d="M455.4 151.1c43.1 36.7 73.4 92.8 60.8 136.3-12.7 43.5-68.1 74.4-111.3 119.4-43.1 45-74 104.1-109.8 109-35.9 5-76.7-44.2-111.8-89.2-35.2-45-64.7-85.8-70.8-132.6-6-46.8 11.6-99.6 46.7-136.3 35.2-36.6 88-57.2 142.4-58.8 54.5-1.7 110.6 15.6 153.8 52.2z" />
            </g>
        </svg>
    </div>

    <div class="service__background_pattern">
        <img src="images/service/background-pattern.svg" alt="background-pattern">
    </div>

    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-md-12 col-sm-12">
                <div class="service__header">
                    <span>{{ .topTitle }}</span>
                    {{ .content | markdownify }}
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="service__slider">
                    {{ $Section := .service }}
                    {{ range $Section }}
                    <div class="service__slider_item">
                        <div class="service__slider_item-icon">
                            <div class="icon-background">
                                <svg xmlns="http://www.w3.org/2000/svg" width="122.457" height="109.702"
                                    viewBox="0 0 122.457 109.702">
                                    <path fill="#f1f6f9"
                                        d="M49.855527 9.984102c-4.337424-.815024-8.766002-1.633779-13.152776-1.113889-8.196034.975107-15.344329 6.696991-19.41555 13.879649s-5.363288 15.655094-5.187042 23.907191c.156996 7.385448 1.479849 14.875357 4.972905 21.38465s9.337384 11.961229 16.458344 13.922244c4.833752 1.331211 10.056683 1.044827 14.74081 2.829827 7.560693 2.881382 12.209757 10.489626 19.01235 14.870016a25.650039 25.650039 0 0024.16316 1.698928c8.342551-3.846451 14.03857-12.107291 16.641338-20.918947s2.471077-18.187687 1.756125-27.346305c-.843101-10.912846-3.01686-22.783019-11.354287-29.869462-6.037066-5.130853-14.208558-6.772976-21.995428-8.235353z"
                                        data-name="Path 1354" />
                                </svg>
                            </div>
                            <div class="icon">
                                <img src=" {{ .image | absURL }} " alt="ui-ux">
                            </div>
                        </div>
                        {{ .content | markdownify }}
                    </div>
                    {{ end }}
                </div>
            </div>
        </div>
    </div>
</section>
{{ end }}
{{ end }}