{{ if .Site.Params.hero.enable | default false }}
<section id="hero" class="py-5 align-middle">
    <div class="container px-3 px-sm-5 px-md-5 px-lg-5 pt-lg-3">
        <div class="row">
            <div class="col-sm-12 col-md-12 col-lg-8 content {{ if .Site.Params.animate }}animate{{ end }}" id="primary-font">
                <span class="subtitle">
                    {{ .Site.Params.hero.intro }}
                </span>
                <h2>
                    {{ .Site.Params.hero.title }}
                </h2>
                <h3>
                    {{ .Site.Params.hero.subtitle }}
                </h3>
                <p class="hero-content">
                    {{ .Site.Params.hero.content | markdownify }}
                </p>
                <div class="row">
                    <div class="col-auto h-100">
                        {{ if .Site.Params.hero.button.enable }}
                        <a href="{{ .Site.Params.hero.button.url }}" class="btn" {{ cond .Site.Params.hero.button.download "download" "" }}
			  {{ if .Site.Params.hero.button.newPage | default true }}
                          target="_blank"
                          {{ end }}>
                            {{ .Site.Params.hero.button.name }}
                        </a>
                        {{ end }}
                    </div>
                    <div class="col-auto px-0 h-100">
                        {{- partial "sections/hero/social.html" . -}}
                    </div>
                </div>
            </div>
            <!-- <div class="col-sm-12 col-md-12 col-lg-4">
                <div class="row justify-content-center">
                    <div class="col-sm-12 col-md-9 pt-5 image {{ if .Site.Params.animate }}animate{{ end }} px-5 px-md-5 px-lg-0 text-center">
                        <img src="{{ .Site.Params.hero.image }}"
                            class="img-thumbnail mx-auto{{ if .Site.Params.hero.roundImage }} rounded-circle{{ end }}"
                            alt=""
                        >
                    </div>
                </div>
            </div> -->
        </div>
    </div>
    {{ if .Site.Params.hero.bottomImage.enable | default true }}
    <div class="hero-bottom-svg d-md-block d-lg-block d-none">
        <svg xmlns="http://www.w3.org/2000/svg" width="201" height="201" viewBox="0 0 201 201">
            <g id="Group_1168" data-name="Group 1168" transform="translate(-384 -1392)">
                <rect id="Rectangle_2206" data-name="Rectangle 2206" width="12" height="2" rx="1"
                    transform="translate(391 1392) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2271" data-name="Rectangle 2271" width="12" height="2" rx="1"
                    transform="translate(391 1500) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2238" data-name="Rectangle 2238" width="12" height="2" rx="1"
                    transform="translate(391 1446) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2278" data-name="Rectangle 2278" width="12" height="2" rx="1"
                    transform="translate(391 1554) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2222" data-name="Rectangle 2222" width="12" height="2" rx="1"
                    transform="translate(391 1419) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2272" data-name="Rectangle 2272" width="12" height="2" rx="1"
                    transform="translate(391 1527) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2241" data-name="Rectangle 2241" width="12" height="2" rx="1"
                    transform="translate(391 1473) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2288" data-name="Rectangle 2288" width="12" height="2" rx="1"
                    transform="translate(391 1581) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2214" data-name="Rectangle 2214" width="12" height="2" rx="1"
                    transform="translate(499 1392) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2289" data-name="Rectangle 2289" width="12" height="2" rx="1"
                    transform="translate(499 1500) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2256" data-name="Rectangle 2256" width="12" height="2" rx="1"
                    transform="translate(499 1446) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2290" data-name="Rectangle 2290" width="12" height="2" rx="1"
                    transform="translate(499 1554) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2231" data-name="Rectangle 2231" width="12" height="2" rx="1"
                    transform="translate(499 1419) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2291" data-name="Rectangle 2291" width="12" height="2" rx="1"
                    transform="translate(499 1527) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2257" data-name="Rectangle 2257" width="12" height="2" rx="1"
                    transform="translate(499 1473) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2292" data-name="Rectangle 2292" width="12" height="2" rx="1"
                    transform="translate(499 1581) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2210" data-name="Rectangle 2210" width="12" height="2" rx="1"
                    transform="translate(445 1392) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2279" data-name="Rectangle 2279" width="12" height="2" rx="1"
                    transform="translate(445 1500) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2248" data-name="Rectangle 2248" width="12" height="2" rx="1"
                    transform="translate(445 1446) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2280" data-name="Rectangle 2280" width="12" height="2" rx="1"
                    transform="translate(445 1554) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2226" data-name="Rectangle 2226" width="12" height="2" rx="1"
                    transform="translate(445 1419) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2281" data-name="Rectangle 2281" width="12" height="2" rx="1"
                    transform="translate(445 1527) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2249" data-name="Rectangle 2249" width="12" height="2" rx="1"
                    transform="translate(445 1473) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2293" data-name="Rectangle 2293" width="12" height="2" rx="1"
                    transform="translate(445 1581) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2219" data-name="Rectangle 2219" width="12" height="2" rx="1"
                    transform="translate(553 1392) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2310" data-name="Rectangle 2310" width="12" height="2" rx="1"
                    transform="translate(553 1500) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2262" data-name="Rectangle 2262" width="12" height="2" rx="1"
                    transform="translate(553 1446) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2311" data-name="Rectangle 2311" width="12" height="2" rx="1"
                    transform="translate(553 1554) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2232" data-name="Rectangle 2232" width="12" height="2" rx="1"
                    transform="translate(553 1419) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2312" data-name="Rectangle 2312" width="12" height="2" rx="1"
                    transform="translate(553 1527) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2263" data-name="Rectangle 2263" width="12" height="2" rx="1"
                    transform="translate(553 1473) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2313" data-name="Rectangle 2313" width="12" height="2" rx="1"
                    transform="translate(553 1581) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2209" data-name="Rectangle 2209" width="12" height="2" rx="1"
                    transform="translate(418 1392) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2273" data-name="Rectangle 2273" width="12" height="2" rx="1"
                    transform="translate(418 1500) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2242" data-name="Rectangle 2242" width="12" height="2" rx="1"
                    transform="translate(418 1446) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2282" data-name="Rectangle 2282" width="12" height="2" rx="1"
                    transform="translate(418 1554) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2223" data-name="Rectangle 2223" width="12" height="2" rx="1"
                    transform="translate(418 1419) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2274" data-name="Rectangle 2274" width="12" height="2" rx="1"
                    transform="translate(418 1527) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2243" data-name="Rectangle 2243" width="12" height="2" rx="1"
                    transform="translate(418 1473) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2294" data-name="Rectangle 2294" width="12" height="2" rx="1"
                    transform="translate(418 1581) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2217" data-name="Rectangle 2217" width="12" height="2" rx="1"
                    transform="translate(526 1392) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2314" data-name="Rectangle 2314" width="12" height="2" rx="1"
                    transform="translate(526 1500) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2258" data-name="Rectangle 2258" width="12" height="2" rx="1"
                    transform="translate(526 1446) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2315" data-name="Rectangle 2315" width="12" height="2" rx="1"
                    transform="translate(526 1554) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2233" data-name="Rectangle 2233" width="12" height="2" rx="1"
                    transform="translate(526 1419) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2316" data-name="Rectangle 2316" width="12" height="2" rx="1"
                    transform="translate(526 1527) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2259" data-name="Rectangle 2259" width="12" height="2" rx="1"
                    transform="translate(526 1473) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2317" data-name="Rectangle 2317" width="12" height="2" rx="1"
                    transform="translate(526 1581) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2211" data-name="Rectangle 2211" width="12" height="2" rx="1"
                    transform="translate(472 1392) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2295" data-name="Rectangle 2295" width="12" height="2" rx="1"
                    transform="translate(472 1500) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2250" data-name="Rectangle 2250" width="12" height="2" rx="1"
                    transform="translate(472 1446) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2296" data-name="Rectangle 2296" width="12" height="2" rx="1"
                    transform="translate(472 1554) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2227" data-name="Rectangle 2227" width="12" height="2" rx="1"
                    transform="translate(472 1419) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2297" data-name="Rectangle 2297" width="12" height="2" rx="1"
                    transform="translate(472 1527) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2251" data-name="Rectangle 2251" width="12" height="2" rx="1"
                    transform="translate(472 1473) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2298" data-name="Rectangle 2298" width="12" height="2" rx="1"
                    transform="translate(472 1581) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2221" data-name="Rectangle 2221" width="12" height="2" rx="1"
                    transform="translate(580 1392) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2318" data-name="Rectangle 2318" width="12" height="2" rx="1"
                    transform="translate(580 1500) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2264" data-name="Rectangle 2264" width="12" height="2" rx="1"
                    transform="translate(580 1446) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2319" data-name="Rectangle 2319" width="12" height="2" rx="1"
                    transform="translate(580 1554) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2236" data-name="Rectangle 2236" width="12" height="2" rx="1"
                    transform="translate(580 1419) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2320" data-name="Rectangle 2320" width="12" height="2" rx="1"
                    transform="translate(580 1527) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2265" data-name="Rectangle 2265" width="12" height="2" rx="1"
                    transform="translate(580 1473) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2321" data-name="Rectangle 2321" width="12" height="2" rx="1"
                    transform="translate(580 1581) rotate(90)" fill="#282f49" />
                <rect id="Rectangle_2207" data-name="Rectangle 2207" width="12" height="2" rx="1"
                    transform="translate(396 1399) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2270" data-name="Rectangle 2270" width="12" height="2" rx="1"
                    transform="translate(396 1507) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2239" data-name="Rectangle 2239" width="12" height="2" rx="1"
                    transform="translate(396 1453) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2283" data-name="Rectangle 2283" width="12" height="2" rx="1"
                    transform="translate(396 1561) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2224" data-name="Rectangle 2224" width="12" height="2" rx="1"
                    transform="translate(396 1426) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2275" data-name="Rectangle 2275" width="12" height="2" rx="1"
                    transform="translate(396 1534) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2244" data-name="Rectangle 2244" width="12" height="2" rx="1"
                    transform="translate(396 1480) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2299" data-name="Rectangle 2299" width="12" height="2" rx="1"
                    transform="translate(396 1588) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2215" data-name="Rectangle 2215" width="12" height="2" rx="1"
                    transform="translate(504 1399) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2300" data-name="Rectangle 2300" width="12" height="2" rx="1"
                    transform="translate(504 1507) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2252" data-name="Rectangle 2252" width="12" height="2" rx="1"
                    transform="translate(504 1453) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2301" data-name="Rectangle 2301" width="12" height="2" rx="1"
                    transform="translate(504 1561) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2228" data-name="Rectangle 2228" width="12" height="2" rx="1"
                    transform="translate(504 1426) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2302" data-name="Rectangle 2302" width="12" height="2" rx="1"
                    transform="translate(504 1534) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2253" data-name="Rectangle 2253" width="12" height="2" rx="1"
                    transform="translate(504 1480) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2303" data-name="Rectangle 2303" width="12" height="2" rx="1"
                    transform="translate(504 1588) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2212" data-name="Rectangle 2212" width="12" height="2" rx="1"
                    transform="translate(450 1399) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2284" data-name="Rectangle 2284" width="12" height="2" rx="1"
                    transform="translate(450 1507) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2245" data-name="Rectangle 2245" width="12" height="2" rx="1"
                    transform="translate(450 1453) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2285" data-name="Rectangle 2285" width="12" height="2" rx="1"
                    transform="translate(450 1561) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2229" data-name="Rectangle 2229" width="12" height="2" rx="1"
                    transform="translate(450 1426) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2286" data-name="Rectangle 2286" width="12" height="2" rx="1"
                    transform="translate(450 1534) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2246" data-name="Rectangle 2246" width="12" height="2" rx="1"
                    transform="translate(450 1480) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2304" data-name="Rectangle 2304" width="12" height="2" rx="1"
                    transform="translate(450 1588) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2218" data-name="Rectangle 2218" width="12" height="2" rx="1"
                    transform="translate(558 1399) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2322" data-name="Rectangle 2322" width="12" height="2" rx="1"
                    transform="translate(558 1507) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2266" data-name="Rectangle 2266" width="12" height="2" rx="1"
                    transform="translate(558 1453) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2323" data-name="Rectangle 2323" width="12" height="2" rx="1"
                    transform="translate(558 1561) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2234" data-name="Rectangle 2234" width="12" height="2" rx="1"
                    transform="translate(558 1426) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2324" data-name="Rectangle 2324" width="12" height="2" rx="1"
                    transform="translate(558 1534) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2267" data-name="Rectangle 2267" width="12" height="2" rx="1"
                    transform="translate(558 1480) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2325" data-name="Rectangle 2325" width="12" height="2" rx="1"
                    transform="translate(558 1588) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2208" data-name="Rectangle 2208" width="12" height="2" rx="1"
                    transform="translate(423 1399) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2276" data-name="Rectangle 2276" width="12" height="2" rx="1"
                    transform="translate(423 1507) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2240" data-name="Rectangle 2240" width="12" height="2" rx="1"
                    transform="translate(423 1453) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2287" data-name="Rectangle 2287" width="12" height="2" rx="1"
                    transform="translate(423 1561) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2225" data-name="Rectangle 2225" width="12" height="2" rx="1"
                    transform="translate(423 1426) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2277" data-name="Rectangle 2277" width="12" height="2" rx="1"
                    transform="translate(423 1534) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2247" data-name="Rectangle 2247" width="12" height="2" rx="1"
                    transform="translate(423 1480) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2305" data-name="Rectangle 2305" width="12" height="2" rx="1"
                    transform="translate(423 1588) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2216" data-name="Rectangle 2216" width="12" height="2" rx="1"
                    transform="translate(531 1399) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2326" data-name="Rectangle 2326" width="12" height="2" rx="1"
                    transform="translate(531 1507) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2260" data-name="Rectangle 2260" width="12" height="2" rx="1"
                    transform="translate(531 1453) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2327" data-name="Rectangle 2327" width="12" height="2" rx="1"
                    transform="translate(531 1561) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2235" data-name="Rectangle 2235" width="12" height="2" rx="1"
                    transform="translate(531 1426) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2328" data-name="Rectangle 2328" width="12" height="2" rx="1"
                    transform="translate(531 1534) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2261" data-name="Rectangle 2261" width="12" height="2" rx="1"
                    transform="translate(531 1480) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2329" data-name="Rectangle 2329" width="12" height="2" rx="1"
                    transform="translate(531 1588) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2213" data-name="Rectangle 2213" width="12" height="2" rx="1"
                    transform="translate(477 1399) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2306" data-name="Rectangle 2306" width="12" height="2" rx="1"
                    transform="translate(477 1507) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2254" data-name="Rectangle 2254" width="12" height="2" rx="1"
                    transform="translate(477 1453) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2307" data-name="Rectangle 2307" width="12" height="2" rx="1"
                    transform="translate(477 1561) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2230" data-name="Rectangle 2230" width="12" height="2" rx="1"
                    transform="translate(477 1426) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2308" data-name="Rectangle 2308" width="12" height="2" rx="1"
                    transform="translate(477 1534) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2255" data-name="Rectangle 2255" width="12" height="2" rx="1"
                    transform="translate(477 1480) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2309" data-name="Rectangle 2309" width="12" height="2" rx="1"
                    transform="translate(477 1588) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2220" data-name="Rectangle 2220" width="12" height="2" rx="1"
                    transform="translate(585 1399) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2330" data-name="Rectangle 2330" width="12" height="2" rx="1"
                    transform="translate(585 1507) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2268" data-name="Rectangle 2268" width="12" height="2" rx="1"
                    transform="translate(585 1453) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2331" data-name="Rectangle 2331" width="12" height="2" rx="1"
                    transform="translate(585 1561) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2237" data-name="Rectangle 2237" width="12" height="2" rx="1"
                    transform="translate(585 1426) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2332" data-name="Rectangle 2332" width="12" height="2" rx="1"
                    transform="translate(585 1534) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2269" data-name="Rectangle 2269" width="12" height="2" rx="1"
                    transform="translate(585 1480) rotate(-180)" fill="#282f49" />
                <rect id="Rectangle_2333" data-name="Rectangle 2333" width="12" height="2" rx="1"
                    transform="translate(585 1588) rotate(-180)" fill="#282f49" />
            </g>
        </svg>
    </div>
    {{ end }}
</section>
{{ end }}