<?php
defined( 'ABSPATH' ) || exit;
return <<<'SHCD_FRAGMENT'
<div class="features section panel" id="features">
<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-8 sm:mb-9 xl:mb-10 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 text-center">
<div class="row child-cols-12 sm:child-cols-6 lg:child-cols-4 justify-center gx-3 gy-6 lg:g-4 xl:g-4 col-match" data-anime="onview: -300; targets: &gt;*; translateY: [24, 0]; opacity: [0, 1]; delay: anime.stagger(100, {start: 200});">
<div>
<div class="features-item panel vstack gap-4 xl:gap-6 px-4 pt-8 pb-6 xl:px-6 xl:py-9 border border-1 border-gray-100 border-opacity-40 rounded-4 bg-white bg-opacity-5">
<div class="feature-item-number position-absolute top-0 start-50 translate-middle">
<div class="cstack w-64px h-64px xl:w-80px xl:h-80px bg-white rounded-circle">
<h4 class="h5 xl:h4 m-0 stroke-text">%%SHCD_TEXT_t2%%</h4>
</div>
</div>
<div class="feature-item-image">
<img alt="تصویر" class="image h-100px xl:h-150px mx-auto" src="%%SHCD_IMG_i0%%"/>
</div>
<div class="feature-item-content">
<h4 class="title h5 xl:h4 mb-2 xl:mb-3 stroke-text">%%SHCD_TEXT_t3%%</h4>
<p class="desc fs-5 xl:fs-4">%%SHCD_TEXT_t4%%</p>
</div>
</div>
</div>
<div>
<div class="features-item panel vstack gap-4 xl:gap-6 px-4 pt-8 pb-6 xl:px-6 xl:py-9 border border-1 border-gray-100 border-opacity-40 rounded-4 bg-white bg-opacity-5">
<div class="feature-item-number position-absolute top-0 start-50 translate-middle">
<div class="cstack w-64px h-64px xl:w-80px xl:h-80px bg-white rounded-circle">
<h4 class="h5 xl:h4 m-0 stroke-text">%%SHCD_TEXT_t5%%</h4>
</div>
</div>
<div class="feature-item-image">
<img alt="تصویر" class="image h-100px xl:h-150px mx-auto" src="%%SHCD_IMG_i1%%"/>
</div>
<div class="feature-item-content">
<h4 class="title h5 xl:h4 mb-2 xl:mb-3 stroke-text">%%SHCD_TEXT_t6%%</h4>
<p class="desc fs-5 xl:fs-4">%%SHCD_TEXT_t7%%</p>
</div>
</div>
</div>
<div>
<div class="features-item panel vstack gap-4 xl:gap-6 px-4 pt-8 pb-6 xl:px-6 xl:py-9 border border-1 border-gray-100 border-opacity-40 rounded-4 bg-white bg-opacity-5">
<div class="feature-item-number position-absolute top-0 start-50 translate-middle">
<div class="cstack w-64px h-64px xl:w-80px xl:h-80px bg-white rounded-circle">
<h4 class="h5 xl:h4 m-0 stroke-text">%%SHCD_TEXT_t8%%</h4>
</div>
</div>
<div class="feature-item-image">
<img alt="تصویر" class="image h-100px xl:h-150px mx-auto" src="%%SHCD_IMG_i2%%"/>
</div>
<div class="feature-item-content">
<h4 class="title h5 xl:h4 mb-2 xl:mb-3 stroke-text">%%SHCD_TEXT_t9%%</h4>
<p class="desc fs-5 xl:fs-4">%%SHCD_TEXT_t10%%</p>
</div>
</div>
</div>
</div>
</div>
<div class="section-footer mt-6 sm:mt-8 lg:mt-9 xl:mt-10 text-center" data-anime="onview: -200; translateY: [24, 0]; opacity: [0, 1]; delay: 200;">
<div class="row child-cols-6 sm:child-cols-3 justify-center gx-0 gy-2">
<div class="order-1 sm:order-0">
<h2 class="h2 sm:h1 xl:display-6 text-secondary mb-1 xl:mb-2">%%SHCD_TEXT_t11%%</h2>
<span class="fs-6 sm:fs-5 xl:fs-4">%%SHCD_TEXT_t12%%</span>
</div>
<div class="order-1 sm:order-0">
<h2 class="h2 sm:h1 xl:display-6 text-secondary mb-1 xl:mb-2">%%SHCD_TEXT_t13%%</h2>
<span class="fs-6 sm:fs-5 xl:fs-4">%%SHCD_TEXT_t14%%</span>
</div>
<div class="order-0">
<h2 class="h2 sm:h1 xl:display-6 text-secondary mb-1 xl:mb-2">%%SHCD_TEXT_t15%%</h2>
<span class="fs-6 sm:fs-5 xl:fs-4">%%SHCD_TEXT_t16%%</span>
</div>
<div class="order-0">
<h2 class="h2 sm:h1 xl:display-6 text-secondary mb-1 xl:mb-2">%%SHCD_TEXT_t17%%</h2>
<span class="fs-6 sm:fs-5 xl:fs-4">%%SHCD_TEXT_t18%%</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
SHCD_FRAGMENT;
