<?php
/*
 * This file is part of the CLIENTXCMS project.
 * It is the property of the CLIENTXCMS association.
 *
 * Personal and non-commercial use of this source code is permitted.
 * However, any use in a project that generates profit (directly or indirectly),
 * or any reuse for commercial purposes, requires prior authorization from CLIENTXCMS.
 *
 * To request permission or for more information, please contact our support:
 * https://clientxcms.com/client/support
 *
 * Learn more about CLIENTXCMS License at:
 * https://clientxcms.com/eula
 *
 * Year: 2025
 */
?>
<section class="pt-20 pb-12 lg:pt-[120px] lg:pb-[90px] dark:bg-dark">
    <div class="container mx-auto">
        <div class="-mx-4 flex flex-wrap">
            <div class="w-full px-4">
                <div class="mx-auto mb-12 max-w-[510px] text-center lg:mb-20">
               <span class="text-primary mb-2 block text-lg font-semibold">
               Lorem ipsum
               </span>
                    <h2
                        class="text-dark dark:text-white mb-3 text-3xl leading-[1.2] font-bold sm:text-4xl md:text-[40px]"
                    >
                        Lorem ipsum
                    </h2>
                    <p class="text-body-color text-base dark:text-dark-6">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    </p>
                </div>
            </div>
        </div>
        <div class="-mx-4 flex flex-wrap">
            <div class="w-full px-4 md:w-1/2 lg:w-1/3">
                <div
                    class="mb-9 rounded-[20px] bg-white dark:bg-neutral-800 dark:hover:bg-neutral-900 p-10 shadow-2 hover:shadow-lg md:px-7 xl:px-10"
                >
                    <div
                        class="bg-primary mb-8 flex h-[70px] w-[70px] items-center justify-center rounded-2xl"
                    >
                        <i class="bi bi-hdd-stack shrink-0 icon-width text-white"></i>
                    </div>
                    <h4 class="text-dark dark:text-white mb-[14px] text-2xl font-semibold">
                        Lorem ipsum dolor sit amet
                    </h4>
                    <p class="text-body-color dark:text-dark-6">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    </p>
                </div>
            </div>
            <div class="w-full px-4 md:w-1/2 lg:w-1/3">
                <div
                    class="mb-9 rounded-[20px] bg-white dark:bg-neutral-800 dark:hover:bg-neutral-900 p-10 shadow-2 hover:shadow-lg md:px-7 xl:px-10"
                >
                    <div
                        class="bg-primary mb-8 flex h-[70px] w-[70px] items-center justify-center rounded-2xl"
                    >
                        <i class="bi bi-hdd-stack shrink-0 icon-width text-white"></i>
                    </div>
                    <h4 class="text-dark dark:text-white mb-[14px] text-2xl font-semibold">
                        Lorem ipsum dolor sit amet
                    </h4>
                    <p class="text-body-color dark:text-dark-6">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    </p>
                </div>
            </div>
            <div class="w-full px-4 md:w-1/2 lg:w-1/3">
                <div
                    class="mb-9 rounded-[20px] bg-white dark:bg-neutral-800 dark:hover:bg-neutral-900 p-10 shadow-2 hover:shadow-lg md:px-7 xl:px-10"
                >
                    <div
                        class="bg-primary mb-8 flex h-[70px] w-[70px] items-center justify-center rounded-2xl"
                    >
                        <i class="bi bi-hdd-stack shrink-0 icon-width text-white"></i>
                    </div>
                    <h4 class="text-dark dark:text-white mb-[14px] text-2xl font-semibold">
                        Lorem ipsum dolor sit amet
                    </h4>
                    <p class="text-body-color dark:text-dark-6">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    </p>
                </div>
            </div>
            <div class="w-full px-4 md:w-1/2 lg:w-1/3">
                <div
                    class="mb-9 rounded-[20px] bg-white dark:bg-neutral-800 dark:hover:bg-neutral-900 p-10 shadow-2 hover:shadow-lg md:px-7 xl:px-10"
                >
                    <div
                        class="bg-primary mb-8 flex h-[70px] w-[70px] items-center justify-center rounded-2xl"
                    >
                        <i class="bi bi-hdd-stack shrink-0 icon-width text-white"></i>
                    </div>
                    <h4 class="text-dark dark:text-white mb-[14px] text-2xl font-semibold">
                        Speed Optimized
                    </h4>
                    <p class="text-body-color dark:text-dark-6">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    </p>
                </div>
            </div>
            <div class="w-full px-4 md:w-1/2 lg:w-1/3">
                <div
                    class="mb-9 rounded-[20px] bg-white dark:bg-neutral-800 dark:hover:bg-neutral-900 p-10 shadow-2 hover:shadow-lg md:px-7 xl:px-10"
                >
                    <div
                        class="bg-primary mb-8 flex h-[70px] w-[70px] items-center justify-center rounded-2xl"
                    >
                        <i class="bi bi-hdd-stack shrink-0 icon-width text-white"></i>
                    </div>
                    <h4 class="text-dark dark:text-white mb-[14px] text-2xl font-semibold">
                        Lorem ipsum dolor sit amet
                    </h4>
                    <p class="text-body-color dark:text-dark-6">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    </p>
                </div>
            </div>
            <div class="w-full px-4 md:w-1/2 lg:w-1/3">
                <div
                    class="mb-9 rounded-[20px] bg-white dark:bg-neutral-800 dark:hover:bg-neutral-900 p-10 shadow-2 hover:shadow-lg md:px-7 xl:px-10"
                >
                    <div
                        class="bg-primary mb-8 flex h-[70px] w-[70px] items-center justify-center rounded-2xl"
                    >
                        <i class="bi bi-hdd-stack shrink-0 icon-width text-white"></i>

                    </div>
                    <h4 class="text-dark dark:text-white mb-[14px] text-2xl font-semibold">
                        Lorem ipsum dolor sit amet
                    </h4>
                    <p class="text-body-color dark:text-dark-6">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- ====== Services Section End -->
