<?php
defined( 'ABSPATH' ) || exit;
return <<<'SHCD_FRAGMENT'
<div class="roadmap section panel overflow-hidden" id="roadmap">
<div class="section-outer panel py-6 sm:py-8 lg:py-9 xl:py-10 bg-primary">
<div class="container sm:max-w-lg xl:max-w-xl">
<div class="section-inner panel">
<div class="section-header panel sm:max-w-500px xl:max-w-800px mx-auto mb-4 sm:mb-6 xl:mb-9 text-center" data-anime="onview: true; translateY: [48, 0]; opacity: [0, 1]; delay: 200;">
<span class="fs-5 xl:fs-4 text-secondary fw-bold">%%SHCD_TEXT_t0%%</span>
<h2 class="h4 sm:h3 xl:h2 mb-0 mt-2 text-white text-uppercase ls-0">%%SHCD_TEXT_t1%%</h2>
</div>
<div class="section-content panel">
<img alt="victor" class="position-absolute start-50 top-50 translate-middle d-none lg:d-block" src="%%SHCD_IMG_i0%%" style="height: 90%"/>
<div class="row child-cols-12 items-center g-4 sm:g-6 lg:gx-10 lg:gy-8 xl:gy-9">
<div class="sm:col-8 lg:col-6">
<div class="roadmap-item panel" data-anime="onview: -300; translateY: [48, 0]; opacity: [0, 1]; delay: 200;">
<img alt="victor" class="position-absolute z-1 w-150px xl:w-auto d-none lg:d-block" src="%%SHCD_IMG_i1%%" style="top: -31%; left: 36%"/>
<img alt="victor" class="position-absolute z-1 w-150px xl:w-auto d-none sm:d-block lg:d-none" src="%%SHCD_IMG_i2%%" style="top: -31%; left: 24%"/>
<div class="px-3 sm:px-4 py-6 xl:px-6 xl:py-8 border border-1 border-gray-100 border-opacity-40 rounded-4 text-white bg-white bg-opacity-5 rotate-1">
<span class="fw-semibold text-opacity-70">%%SHCD_TEXT_t2%%</span>
<h4 class="h5 my-2 xl:my-3 ft-primary text-secondary">%%SHCD_TEXT_t3%%</h4>
<ul class="uc-list uc-list-disc fs-5 xl:fs-4 m-0">
<li>%%SHCD_TEXT_t4%%</li>
<li class="m-0">%%SHCD_TEXT_t5%%</li>
<li class="m-0">%%SHCD_TEXT_t6%%</li>
</ul>
</div>
</div>
</div>
<div class="sm:col-4 lg:col-6 d-none sm:d-block">
<div class="panel">
<h4 class="h5 xl:h4 m-0 text-secondary -rotate-2">%%SHCD_TEXT_t7%%</h4>
<img alt="victor" class="position-absolute top-0 d-none xl:d-block" src="%%SHCD_IMG_i3%%" style="left: -15.5%"/>
<img alt="victor" class="position-absolute top-0 w-40px d-none lg:d-block xl:d-none" src="%%SHCD_IMG_i4%%" style="left: -19.5%"/>
</div>
</div>
<div class="sm:col-4 lg:col-6 d-none sm:d-block">
<div class="panel">
<h4 class="h5 xl:h4 m-0 text-secondary rotate-2 float-end">%%SHCD_TEXT_t8%%</h4>
<img alt="victor" class="position-absolute top-0 d-none xl:d-block" src="%%SHCD_IMG_i5%%" style="right: -15.5%"/>
<img alt="victor" class="position-absolute top-0 w-40px d-none lg:d-block xl:d-none" src="%%SHCD_IMG_i6%%" style="right: -19.5%"/>
</div>
</div>
<div class="sm:col-8 lg:col-6">
<div class="roadmap-item panel" data-anime="onview: -300; translateY: [48, 0]; opacity: [0, 1]; delay: 200;">
<img alt="victor" class="position-absolute z-1 w-200px xl:w-auto d-none sm:d-block" src="%%SHCD_IMG_i7%%" style="top: -31%; right: 5%"/>
<div class="px-3 sm:px-4 py-6 xl:px-6 xl:py-8 border border-1 border-gray-100 border-opacity-40 rounded-4 bg-white bg-opacity-5 rotate-1">
<span class="fw-semibold text-opacity-70">%%SHCD_TEXT_t9%%</span>
<h4 class="h5 my-2 xl:my-3 ft-primary text-secondary">%%SHCD_TEXT_t10%%</h4>
<ul class="uc-list uc-list-disc fs-5 xl:fs-4 m-0">
<li>%%SHCD_TEXT_t11%%</li>
<li class="m-0">%%SHCD_TEXT_t12%%</li>
<li class="m-0">%%SHCD_TEXT_t13%%</li>
</ul>
</div>
</div>
</div>
<div class="sm:col-8 lg:col-6">
<div class="roadmap-item panel" data-anime="onview: -300; translateY: [48, 0]; opacity: [0, 1]; delay: 200;">
<img alt="victor" class="position-absolute z-1 w-128px xl:w-auto d-none sm:d-block" src="%%SHCD_IMG_i8%%" style="bottom: -7%; right: 7%"/>
<div class="px-3 sm:px-4 py-6 xl:px-6 xl:py-8 border border-1 border-gray-100 border-opacity-40 rounded-4 bg-white bg-opacity-5 -rotate-1">
<span class="fw-semibold text-opacity-70">%%SHCD_TEXT_t14%%</span>
<h4 class="h5 my-2 xl:my-3 ft-primary text-secondary">%%SHCD_TEXT_t15%%</h4>
<ul class="uc-list uc-list-disc fs-5 xl:fs-4 m-0">
<li>%%SHCD_TEXT_t16%%</li>
<li class="m-0">%%SHCD_TEXT_t17%%</li>
<li class="m-0">%%SHCD_TEXT_t18%%</li>
</ul>
</div>
</div>
</div>
<div class="sm:col-4 lg:col-6 d-none sm:d-block">
<div class="panel">
<h4 class="h5 xl:h4 m-0 text-secondary -rotate-2">%%SHCD_TEXT_t19%%</h4>
<img alt="victor" class="position-absolute top-0 d-none xl:d-block" src="%%SHCD_IMG_i9%%" style="left: -15.5%"/>
<img alt="victor" class="position-absolute top-0 w-40px d-none lg:d-block xl:d-none" src="%%SHCD_IMG_i10%%" style="left: -19.5%"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
SHCD_FRAGMENT;
