truncgit/citrus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
truncgilcom
citrus/public/docs/blocks/testimonials.html
T
Ümit Tunç 0ca75829bb frontend style fix
2026-01-01 16:25:27 +03:00

4391 lines
356 KiB
HTML
Raw Permalink Blame History

<!DOCTYPE html>
<html lang="en">
<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/docs/blocks/testimonials by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 11:01:40 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="An impressive and flawless site template that includes various UI elements and countless features, attractive ready-made blocks and rich pages, basically everything you need to create a unique and professional website.">
<meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
<meta name="author" content="elemis">
<title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
<link rel="shortcut icon" href="../../assets/img/favicon.png">
<link rel="stylesheet" type="text/css" href="../../assets/fonts/unicons/unicons.css">
<link rel="stylesheet" href="../../assets/css/plugins.css">
<link rel="stylesheet" href="../../assets/css/style.css">
</head>
<body>
<div class="grow shrink-0">
<header class="relative wrapper bg-soft-primary !bg-[#edf2fc]">
<nav class="navbar navbar-expand-lg center-nav transparent navbar-light">
<div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
<div class="navbar-brand w-full">
<a href='../../index.html'>
<img src="../../assets/img/truncgil-yatay.svg" alt="image">
</a>
</div>
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div class="offcanvas-header xl:!hidden lg:!hidden flex items-center justify-between flex-row p-6">
<button type="button" class="btn-close btn-close-white !mr-[-0.75rem] m-0 p-0 leading-none !text-[#343f52] transition-all duration-[0.2s] ease-in-out border-0 motion-reduce:transition-none before:text-[1.05rem] before:text-white before:content-['\ed3b'] before:w-[1.8rem] before:h-[1.8rem] before:leading-[1.8rem] before:shadow-none before:transition-[background] before:duration-[0.2s] before:ease-in-out before:!flex before:justify-center before:items-center before:m-0 before:p-0 before:rounded-[100%] hover:no-underline bg-inherit before:bg-[rgba(255,255,255,.08)] before:font-Unicons hover:before:bg-[rgba(0,0,0,.11)]" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body xl:!ml-auto lg:!ml-auto flex flex-col !h-full">
<ul class="navbar-nav">
<li class="nav-item dropdown dropdown-mega">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Demos</a>
<ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
<li class="mega-menu-content mega-menu-scroll">
<ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo1.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi1.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 1</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo2.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi2.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 2</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo3.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi3.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 3</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo4.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi4.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 4</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo5.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi5.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 5</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo6.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi6.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 6</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo7.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi7.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 7</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo8.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi8.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 8</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo9.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi9.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 9</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo10.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi10.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 10</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo11.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi11.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 11</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo12.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi12.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 12</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo13.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi13.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 13</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo14.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi14.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 14</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo15.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi15.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 15</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo16.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi16.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 16</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo17.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi17.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 17</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo18.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi18.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 18</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo19.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi19.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 19</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo20.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi20.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 20</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo21.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi21.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 21</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo22.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi22.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 22</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo23.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi23.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 23</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo24.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi24.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 24</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo25.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi25.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 25</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo26.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi26.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 26</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo27.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi27.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 27</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo28.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi28.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 28</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo29.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi29.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 29</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo30.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi30.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 30</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo31.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi31.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 31</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo32.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi32.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 32</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo33.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi33.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 33</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo34.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi34.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 34</span>
</a>
</li>
</ul>
<!--/.row -->
<span class="hidden xl:!flex lg:!flex"><i class="uil uil-direction before:content-['\ea93']"></i><strong>Scroll to view more</strong></span>
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Pages</a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Services</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class='dropdown-item' href='../../services.html'>Services I</a></li>
<li class="nav-item"><a class='dropdown-item' href='../../services2.html'>Services II</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">About</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class='dropdown-item' href='../../about.html'>About I</a></li>
<li class="nav-item"><a class='dropdown-item' href='../../about2.html'>About II</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Shop</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class='dropdown-item' href='../../shop.html'>Shop I</a></li>
<li class="nav-item"><a class='dropdown-item' href='../../shop2.html'>Shop II</a></li>
<li class="nav-item"><a class='dropdown-item' href='../../shop-product.html'>Product Page</a></li>
<li class="nav-item"><a class='dropdown-item' href='../../shop-cart.html'>Shopping Cart</a></li>
<li class="nav-item"><a class='dropdown-item' href='../../shop-checkout.html'>Checkout</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Contact</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class='dropdown-item' href='../../contact.html'>Contact I</a></li>
<li class="nav-item"><a class='dropdown-item' href='../../contact2.html'>Contact II</a></li>
<li class="nav-item"><a class='dropdown-item' href='../../contact3.html'>Contact III</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Career</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class='dropdown-item' href='../../career.html'>Job Listing I</a></li>
<li class="nav-item"><a class='dropdown-item' href='../../career2.html'>Job Listing II</a></li>
<li class="nav-item"><a class='dropdown-item' href='../../career-job.html'>Job Description</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Utility</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class='dropdown-item' href='../../404.html'>404 Not Found</a></li>
<li class="nav-item"><a class='dropdown-item' href='../../page-loader.html'>Page Loader</a></li>
<li class="nav-item"><a class='dropdown-item' href='../../signin.html'>Sign In I</a></li>
<li class="nav-item"><a class='dropdown-item' href='../../signin2.html'>Sign In II</a></li>
<li class="nav-item"><a class='dropdown-item' href='../../signup.html'>Sign Up I</a></li>
<li class="nav-item"><a class='dropdown-item' href='../../signup2.html'>Sign Up II</a></li>
<li class="nav-item"><a class='dropdown-item' href='../../terms.html'>Terms</a></li>
</ul>
</li>
<li class="nav-item"><a class='dropdown-item' href='../../pricing.html'>Pricing</a></li>
<li class="nav-item"><a class='dropdown-item' href='../../onepage.html'>One Page</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Projects</a>
<div class="dropdown-menu dropdown-lg">
<div class="dropdown-lg-content">
<div>
<h6 class="dropdown-header">Project Pages</h6>
<ul class="pl-0 list-none">
<li><a class='dropdown-item' href='../../projects.html'>Projects I</a></li>
<li><a class='dropdown-item' href='../../projects2.html'>Projects II</a></li>
<li><a class='dropdown-item' href='../../projects3.html'>Projects III</a></li>
<li><a class='dropdown-item' href='../../projects4.html'>Projects IV</a></li>
</ul>
</div>
<!-- /.column -->
<div>
<h6 class="dropdown-header">Single Projects</h6>
<ul class="pl-0 list-none">
<li><a class='dropdown-item' href='../../single-project.html'>Single Project I</a></li>
<li><a class='dropdown-item' href='../../single-project2.html'>Single Project II</a></li>
<li><a class='dropdown-item' href='../../single-project3.html'>Single Project III</a></li>
<li><a class='dropdown-item' href='../../single-project4.html'>Single Project IV</a></li>
</ul>
</div>
<!-- /.column -->
</div>
<!-- /auto-column -->
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class='dropdown-item' href='../../blog.html'>Blog without Sidebar</a></li>
<li class="nav-item"><a class='dropdown-item' href='../../blog2.html'>Blog with Sidebar</a></li>
<li class="nav-item"><a class='dropdown-item' href='../../blog3.html'>Blog with Left Sidebar</a></li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog Posts</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class='dropdown-item' href='../../blog-post.html'>Post without Sidebar</a></li>
<li class="nav-item"><a class='dropdown-item' href='../../blog-post2.html'>Post with Sidebar</a></li>
<li class="nav-item"><a class='dropdown-item' href='../../blog-post3.html'>Post with Left Sidebar</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown dropdown-mega">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blocks</a>
<ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
<li class="mega-menu-content">
<ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='about.html'>
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block1.svg" alt="image"></div>
<span>About</span>
</a>
</li>
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='blog.html'>
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block2.svg" alt="image"></div>
<span>Blog</span>
</a>
</li>
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='call-to-action.html'>
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block3.svg" alt="image"></div>
<span>Call to Action</span>
</a>
</li>
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='clients.html'>
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block4.svg" alt="image"></div>
<span>Clients</span>
</a>
</li>
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='contact.html'>
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block5.svg" alt="image"></div>
<span>Contact</span>
</a>
</li>
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='facts.html'>
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block6.svg" alt="image"></div>
<span>Facts</span>
</a>
</li>
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='faq.html'>
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block7.svg" alt="image"></div>
<span>FAQ</span>
</a>
</li>
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='features.html'>
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block8.svg" alt="image"></div>
<span>Features</span>
</a>
</li>
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='footer.html'>
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block9.svg" alt="image"></div>
<span>Footer</span>
</a>
</li>
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='hero.html'>
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block10.svg" alt="image"></div>
<span>Hero</span>
</a>
</li>
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='misc.html'>
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block17.svg" alt="image"></div>
<span>Misc</span>
</a>
</li>
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='navbar.html'>
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block11.svg" alt="image"></div>
<span>Navbar</span>
</a>
</li>
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='portfolio.html'>
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block12.svg" alt="image"></div>
<span>Portfolio</span>
</a>
</li>
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='pricing.html'>
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block13.svg" alt="image"></div>
<span>Pricing</span>
</a>
</li>
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='process.html'>
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block14.svg" alt="image"></div>
<span>Process</span>
</a>
</li>
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='team.html'>
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block15.svg" alt="image"></div>
<span>Team</span>
</a>
</li>
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='testimonials.html'>
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block16.svg" alt="image"></div>
<span>Testimonials</span>
</a>
</li>
</ul>
<!--/.row -->
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
<li class="nav-item dropdown dropdown-mega">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Documentation</a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-content">
<div class="flex flex-wrap mx-0 xl:mx-[-7.5px] lg:mx-[-7.5px]">
<div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] max-w-full">
<h6 class="dropdown-header">Usage</h6>
<ul class="pl-0 list-none xl:columns-2 lg:columns-2 xl:pb-1 lg:pb-1">
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../index.html'>Get Started</a></li>
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../forms.html'>Forms</a></li>
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../faq.html'>FAQ</a></li>
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../changelog.html'>Changelog</a></li>
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../credits.html'>Credits</a></li>
</ul>
<h6 class="dropdown-header xl:!mt-6 lg:!mt-6">Styleguide</h6>
<ul class="pl-0 list-none xl:columns-2 lg:columns-2 ">
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../styleguide/colors.html'>Colors</a></li>
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../styleguide/fonts.html'>Fonts</a></li>
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../styleguide/misc.html'>Misc</a></li>
</ul>
</div>
<!--/column -->
<div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] max-w-full xl:border-l-[rgba(164,174,198,0.2)] xl:border-l xl:border-solid lg:border-l-[rgba(164,174,198,0.2)] lg:border-l lg:border-solid">
<h6 class="dropdown-header">Elements</h6>
<ul class="pl-0 list-none xl:columns-3 lg:columns-3 ">
<li><a class='dropdown-item' href='../elements/accordion.html'>Accordion</a></li>
<li><a class='dropdown-item' href='../elements/alerts.html'>Alerts</a></li>
<li><a class='dropdown-item' href='../elements/animations.html'>Animations</a></li>
<li><a class='dropdown-item' href='../elements/avatars.html'>Avatars</a></li>
<li><a class='dropdown-item' href='../elements/background.html'>Background</a></li>
<li><a class='dropdown-item' href='../elements/badges.html'>Badges</a></li>
<li><a class='dropdown-item' href='../elements/buttons.html'>Buttons</a></li>
<li><a class='dropdown-item' href='../elements/card.html'>Card</a></li>
<li><a class='dropdown-item' href='../elements/carousel.html'>Carousel</a></li>
<li><a class='dropdown-item' href='../elements/dividers.html'>Dividers</a></li>
<li><a class='dropdown-item' href='../elements/form-elements.html'>Form Elements</a></li>
<li><a class='dropdown-item' href='../elements/image-hover.html'>Image Hover</a></li>
<li><a class='dropdown-item' href='../elements/image-mask.html'>Image Mask</a></li>
<li><a class='dropdown-item' href='../elements/lightbox.html'>Lightbox</a></li>
<li><a class='dropdown-item' href='../elements/player.html'>Media Player</a></li>
<li><a class='dropdown-item' href='../elements/modal.html'>Modal</a></li>
<li><a class='dropdown-item' href='../elements/pagination.html'>Pagination</a></li>
<li><a class='dropdown-item' href='../elements/progressbar.html'>Progressbar</a></li>
<li><a class='dropdown-item' href='../elements/shadows.html'>Shadows</a></li>
<li><a class='dropdown-item' href='../elements/shapes.html'>Shapes</a></li>
<li><a class='dropdown-item' href='../elements/tables.html'>Tables</a></li>
<li><a class='dropdown-item' href='../elements/tabs.html'>Tabs</a></li>
<li><a class='dropdown-item' href='../elements/text-animations.html'>Text Animations</a></li>
<li><a class='dropdown-item' href='../elements/text-highlight.html'>Text Highlight</a></li>
<li><a class='dropdown-item' href='../elements/tiles.html'>Tiles</a></li>
<li><a class='dropdown-item' href='../elements/tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li><a class='dropdown-item' href='../elements/typography.html'>Typography</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
</ul>
<!-- /.navbar-nav -->
<div class="offcanvas-footer xl:!hidden lg:!hidden">
<div>
<a href="mailto:first.last@email.com" class="link-inverse">info@truncgil.com</a>
<br> 00 (123) 456 78 90 <br>
<nav class="nav social social-white !mt-4">
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] !text-white text-[1rem]"></i></a>
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] !text-white text-[1rem]"></i></a>
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] !text-white text-[1rem]"></i></a>
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-youtube before:content-['\edb5'] !text-white text-[1rem]"></i></a>
</nav>
<!-- /.social -->
</div>
</div>
<!-- /.offcanvas-footer -->
</div>
<!-- /.offcanvas-body -->
</div>
<!-- /.navbar-collapse -->
<div class="navbar-other w-full !flex !ml-auto">
<ul class="navbar-nav !flex-row !items-center !ml-auto">
<li class="nav-item dropdown language-select uppercase group">
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">Es</a></li>
</ul>
</li>
<li class="nav-item hidden xl:block lg:block md:block">
<a class='btn btn-sm btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
</li>
<li class="nav-item xl:!hidden lg:!hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.container -->
</nav>
<!-- /.navbar -->
</header>
<!-- /header -->
<section class="wrapper !bg-[#edf2fc]">
<div class="container pt-10 pb-14 xl:pt-[4.5rem] lg:pt-[4.5rem] md:pt-[4.5rem] xl:pb-24 lg:pb-24 md:pb-24 !text-center">
<div class="flex flex-wrap mx-[-15px]">
<div class="md:w-9/12 lg:w-7/12 xl:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
<h1 class="!text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-3">Blocks - Testimonials</h1>
<p class="lead xxl:!px-[2.5rem] !leading-[1.65] text-[0.9rem] font-medium">Copy any custom block snippet below and paste it on your page to build your website easily.</p>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
<div class="container py-12">
<h2 class="h5">Filter Blocks:</h2>
<ul class="pl-0 list-none !mb-0">
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='about.html'>About</a></li>
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='blog.html'>Blog</a></li>
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='call-to-action.html'>Call to Action</a></li>
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='clients.html'>Clients</a></li>
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='contact.html'>Contact</a></li>
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='facts.html'>Facts</a></li>
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='faq.html'>FAQ</a></li>
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='features.html'>Features</a></li>
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='footer.html'>Footer</a></li>
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='hero.html'>Hero</a></li>
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='misc.html'>Misc</a></li>
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='navbar.html'>Navbar</a></li>
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='portfolio.html'>Portfolio</a></li>
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='pricing.html'>Pricing</a></li>
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='process.html'>Process</a></li>
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded' href='team.html'>Team</a></li>
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded !text-[#e31e24] pointer-events-none' href='testimonials.html'>Testimonials</a></li>
</ul>
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-1" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
<div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-center">
<div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !relative xl:!px-[35px] lg:!px-[20px] !mt-[50px]">
<div class="absolute hidden xl:block lg:block md:block" style="top: 50%; left: 50%; width: 130%; height: auto; transform: translate(-50%,-50%); z-index:-1"><img class="w-full" src="../../assets/img/photos/blurry.png" alt="image"></div>
<div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
<div class="md:w-6/12 lg:w-6/12 xl:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !self-end xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px]">
<div class="card !bg-[#fef3e4]">
<div class="card-body flex-[1_1_auto] p-[40px]">
<blockquote class="!text-[0.85rem] !leading-[1.7] !font-medium !pl-4 icon !mb-0 m-[0_0_1rem] relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
<p>“Cum sociis natoque penatibus et magnis dis parturient montes.”</p>
<div class="flex items-center text-left">
<div class="info p-0">
<h5 class="!mb-1 text-[.9rem] !leading-[1.5]">Coriss Ambady</h5>
<p class="!mb-0 text-[.8rem]">Financial Analyst</p>
</div>
</div>
</blockquote>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!--/column -->
<div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !self-end xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px]">
<div class="card !bg-[#fae6e7]">
<div class="card-body flex-[1_1_auto] p-[40px]">
<blockquote class="!text-[0.85rem] !leading-[1.7] !font-medium !pl-4 icon !mb-0 m-[0_0_1rem] relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper.”</p>
<div class="flex items-center text-left">
<div class="info p-0">
<h5 class="!mb-1 text-[.9rem] !leading-[1.5]">Cory Zamora</h5>
<p class="!mb-0 text-[.8rem]">Marketing Specialist</p>
</div>
</div>
</blockquote>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!--/column -->
<div class="md:w-6/12 lg:w-6/12 xl:w-5/12 flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-[8.33333333%] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px]">
<div class="card !bg-[#eaf3ef]">
<div class="card-body flex-[1_1_auto] p-[40px]">
<blockquote class="!text-[0.85rem] !leading-[1.7] !font-medium !pl-4 icon !mb-0 m-[0_0_1rem] relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
<p>“Donec id elit non porta gravida at eget metus. Duis mollis est commodo luctus, nisi erat porttitor.”</p>
<div class="flex items-center text-left">
<div class="info p-0">
<h5 class="!mb-1 text-[.9rem] !leading-[1.5]">Barclay Widerski</h5>
<p class="!mb-0 text-[.8rem]">Sales Specialist</p>
</div>
</div>
</blockquote>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!--/column -->
<div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !self-start xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px]">
<div class="card !bg-[#e0e9fa]">
<div class="card-body flex-[1_1_auto] p-[40px]">
<blockquote class="!text-[0.85rem] !leading-[1.7] !font-medium !pl-4 icon !mb-0 m-[0_0_1rem] relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
<p>“Nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean eu leo pellentesque ornare.”</p>
<div class="flex items-center text-left">
<div class="info p-0">
<h5 class="!mb-1 text-[.9rem] !leading-[1.5]">Jackie Sanders</h5>
<p class="!mb-0 text-[.8rem]">Investment Planner</p>
</div>
</div>
</blockquote>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
<h2 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-3">Our Community</h2>
<p class="lead !text-[1.05rem] !leading-[1.6] font-medium">Customer satisfaction is our major goal. See what our customers are saying about us.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper.</p>
<a href="#" class="btn btn-navy !text-white !bg-[#343f52] border-[#343f52] hover:text-white hover:bg-[#343f52] hover:!border-[#343f52] focus:shadow-[rgba(82,92,108,1)] active:text-white active:bg-[#343f52] active:border-[#343f52] disabled:text-white disabled:bg-[#343f52] disabled:border-[#343f52] !rounded-[50rem] !mt-3 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">All Testimonials</a>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
<div class="card">
<div class="card-footer border-0 !relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-1">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-1" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;section class=&quot;wrapper !bg-[#ffffff] &quot;&gt;
&#60;div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20"&#62;
&#60;div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-center"&#62;
&#60;div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !relative xl:!px-[35px] lg:!px-[20px] !mt-[50px]"&#62;
&#60;div class="absolute hidden xl:block lg:block md:block" style="top: 50%; left: 50%; width: 130%; height: auto; transform: translate(-50%,-50%); z-index:-1"&#62;&#60;img class="w-full" src="../../assets/img/photos/blurry.png" alt="image"&#62;&#60;/div&#62;
&#60;div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]"&#62;
&#60;div class="md:w-6/12 lg:w-6/12 xl:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !self-end xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px]"&#62;
&#60;div class="card !bg-[#fef3e4]"&#62;
&#60;div class="card-body flex-[1_1_auto] p-[40px]"&#62;
&#60;blockquote class="!text-[0.85rem] !leading-[1.7] !font-medium !pl-4 icon !mb-0 m-[0_0_1rem] relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]"&#62;
&#60;p&#62;&#8220;Cum sociis natoque penatibus et magnis dis parturient montes.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;div class="info p-0"&#62;
&#60;h5 class="!mb-1 text-[.9rem] !leading-[1.5]"&#62;Coriss Ambady&#60;/h5&#62;
&#60;p class="!mb-0 text-[.8rem]"&#62;Financial Analyst&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!--/.card-body --&#62;
&#60;/div&#62;
&#60;!--/.card --&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !self-end xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px]"&#62;
&#60;div class="card !bg-[#fae6e7]"&#62;
&#60;div class="card-body flex-[1_1_auto] p-[40px]"&#62;
&#60;blockquote class="!text-[0.85rem] !leading-[1.7] !font-medium !pl-4 icon !mb-0 m-[0_0_1rem] relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]"&#62;
&#60;p&#62;&#8220;Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;div class="info p-0"&#62;
&#60;h5 class="!mb-1 text-[.9rem] !leading-[1.5]"&#62;Cory Zamora&#60;/h5&#62;
&#60;p class="!mb-0 text-[.8rem]"&#62;Marketing Specialist&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!--/.card-body --&#62;
&#60;/div&#62;
&#60;!--/.card --&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;div class="md:w-6/12 lg:w-6/12 xl:w-5/12 flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-[8.33333333%] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px]"&#62;
&#60;div class="card !bg-[#eaf3ef]"&#62;
&#60;div class="card-body flex-[1_1_auto] p-[40px]"&#62;
&#60;blockquote class="!text-[0.85rem] !leading-[1.7] !font-medium !pl-4 icon !mb-0 m-[0_0_1rem] relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]"&#62;
&#60;p&#62;&#8220;Donec id elit non porta gravida at eget metus. Duis mollis est commodo luctus, nisi erat porttitor.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;div class="info p-0"&#62;
&#60;h5 class="!mb-1 text-[.9rem] !leading-[1.5]"&#62;Barclay Widerski&#60;/h5&#62;
&#60;p class="!mb-0 text-[.8rem]"&#62;Sales Specialist&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!--/.card-body --&#62;
&#60;/div&#62;
&#60;!--/.card --&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !self-start xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px]"&#62;
&#60;div class="card !bg-[#e0e9fa]"&#62;
&#60;div class="card-body flex-[1_1_auto] p-[40px]"&#62;
&#60;blockquote class="!text-[0.85rem] !leading-[1.7] !font-medium !pl-4 icon !mb-0 m-[0_0_1rem] relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]"&#62;
&#60;p&#62;&#8220;Nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean eu leo pellentesque ornare.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;div class="info p-0"&#62;
&#60;h5 class="!mb-1 text-[.9rem] !leading-[1.5]"&#62;Jackie Sanders&#60;/h5&#62;
&#60;p class="!mb-0 text-[.8rem]"&#62;Investment Planner&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!--/.card-body --&#62;
&#60;/div&#62;
&#60;!--/.card --&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;/div&#62;
&#60;!--/.row --&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full"&#62;
&#60;h2 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-3"&#62;Our Community&#60;/h2&#62;
&#60;p class="lead !text-[1.05rem] !leading-[1.6] font-medium"&#62;Customer satisfaction is our major goal. See what our customers are saying about us.&#60;/p&#62;
&#60;p&#62;Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper.&#60;/p&#62;
&#60;a href="#" class="btn btn-navy !text-white !bg-[#343f52] border-[#343f52] hover:text-white hover:bg-[#343f52] hover:!border-[#343f52] focus:shadow-[rgba(82,92,108,1)] active:text-white active:bg-[#343f52] active:border-[#343f52] disabled:text-white disabled:bg-[#343f52] disabled:border-[#343f52] !rounded-[50rem] !mt-3 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"&#62;All Testimonials&#60;/a&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;/div&#62;
&#60;!--/.row --&#62;
&#60;/div&#62;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-2" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
<div class="flex flex-wrap mx-[-15px] !relative">
<figure class="!rounded-[.4rem] absolute hidden lg:block xl:block !px-[15px]" style="top: 50%; right:0; width: 45%; height: auto; transform: translateY(-50%); z-index:2"><img class="!rounded-[.4rem]" src="../../assets/img/photos/tei1.jpg" alt="image"></figure>
<div class="xl:w-9/12 lg:w-9/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !text-center">
<div class="card !bg-[rgba(246,247,249,1)]">
<div class="card-body xl:!p-10 lg:!p-10 md:!p-10 xxl:!py-24 p-[40px]">
<div class="flex flex-wrap mx-0">
<div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] max-w-full xl:!pl-10">
<span class="ratings inline-block relative w-20 h-[0.8rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five text-[1rem] !mb-3"></span>
<blockquote class="!pl-0 text-[1rem] !mb-0 border-0 !leading-[1.7] font-medium m-[0_0_1rem]">
<p>“Donec id elit non mi porta gravida at eget metus. Vivamus mollis est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis porta est non commodo luctus.”</p>
<div class="flex items-center justify-center !text-center">
<div class="info p-0">
<h4 class="tracking-[-0.03em] !mb-1">Coriss Ambady</h4>
<p class="!mb-0 text-[.8rem]">Financial Analyst</p>
</div>
</div>
</blockquote>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
<div class="card">
<div class="card-footer border-0 !relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-2">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-2" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;section class=&quot;wrapper !bg-[#ffffff] &quot;&gt;
&#60;div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20"&#62;
&#60;div class="flex flex-wrap mx-[-15px] !relative"&#62;
&#60;figure class="!rounded-[.4rem] absolute hidden lg:block xl:block !px-[15px]" style="top: 50%; right:0; width: 45%; height: auto; transform: translateY(-50%); z-index:2"&#62;&#60;img class="!rounded-[.4rem]" src="../../assets/img/photos/tei1.jpg" alt="image"&#62;&#60;/figure&#62;
&#60;div class="xl:w-9/12 lg:w-9/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !text-center"&#62;
&#60;div class="card !bg-[rgba(246,247,249,1)]"&#62;
&#60;div class="card-body xl:!p-10 lg:!p-10 md:!p-10 xxl:!py-24 p-[40px]"&#62;
&#60;div class="flex flex-wrap mx-0"&#62;
&#60;div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] max-w-full xl:!pl-10"&#62;
&#60;span class="ratings inline-block relative w-20 h-[0.8rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five text-[1rem] !mb-3"&#62;&#60;/span&#62;
&#60;blockquote class="!pl-0 text-[1rem] !mb-0 border-0 !leading-[1.7] font-medium m-[0_0_1rem]"&#62;
&#60;p&#62;&#8220;Donec id elit non mi porta gravida at eget metus. Vivamus mollis est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis porta est non commodo luctus.&#8221;&#60;/p&#62;
&#60;div class="flex items-center justify-center !text-center"&#62;
&#60;div class="info p-0"&#62;
&#60;h4 class="tracking-[-0.03em] !mb-1"&#62;Coriss Ambady&#60;/h4&#62;
&#60;p class="!mb-0 text-[.8rem]"&#62;Financial Analyst&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!-- /column --&#62;
&#60;/div&#62;
&#60;!-- /.row --&#62;
&#60;/div&#62;
&#60;!--/.card-body --&#62;
&#60;/div&#62;
&#60;!--/.card --&#62;
&#60;/div&#62;
&#60;!-- /column --&#62;
&#60;/div&#62;
&#60;!-- /.row --&#62;
&#60;/div&#62;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-3" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
<div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] !mt-[-50px]">
<div class="xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[35px] !mt-[50px]">
<h2 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mt-10 !mb-3">Our Community</h2>
<p class="lead text-[1.05rem] !leading-[1.6] !mb-6">Customer satisfaction is our major goal. See what our clients are saying about our services.</p>
<a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">All Testimonials</a>
</div>
<!-- /column -->
<div class="xl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[35px] !mt-[50px]">
<div class="!relative">
<div class="shape !rounded-[50%] !bg-[#fff8ee] rellax !w-[6rem] !h-[6rem] absolute " data-rellax-speed="1" style="top: -0.7rem; right: -1.7rem;"></div>
<div class="shape !rounded-[50%] bg-line red rellax !w-[6rem] !h-[6rem] absolute opacity-50" data-rellax-speed="1" style="bottom: -0.5rem; left: -1.4rem;"></div>
<div class="swiper-container dots-closer !mb-6 relative z-10" data-margin="0" data-dots="true" data-items-md="2" data-items-xs="1">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="item-inner">
<div class="card">
<div class="card-body flex-[1_1_auto] p-[40px]">
<blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis sed posuere.”</p>
<div class="flex items-center text-left">
<img class="!rounded-[50%] !w-[3.5rem]" src="../../assets/img/avatars/te1.jpg" alt="image">
<div class="info !pl-4">
<h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Coriss Ambady</h5>
<p class="!mb-0 text-[.85rem]">Financial Analyst</p>
</div>
</div>
</blockquote>
</div>
<!--/.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.item-inner -->
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<div class="item-inner">
<div class="card">
<div class="card-body flex-[1_1_auto] p-[40px]">
<blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
<p>“Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus.”</p>
<div class="flex items-center text-left">
<img class="!rounded-[50%] !w-[3.5rem]" src="../../assets/img/avatars/te2.jpg" alt="image">
<div class="info !pl-4">
<h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Cory Zamora</h5>
<p class="!mb-0 text-[.85rem]">Marketing Specialist</p>
</div>
</div>
</blockquote>
</div>
<!--/.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.item-inner -->
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<div class="item-inner">
<div class="card">
<div class="card-body flex-[1_1_auto] p-[40px]">
<blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
<p>“Nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida.”</p>
<div class="flex items-center text-left">
<img class="!rounded-[50%] !w-[3.5rem]" src="../../assets/img/avatars/te3.jpg" alt="image">
<div class="info !pl-4">
<h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Nikolas Brooten</h5>
<p class="!mb-0 text-[.85rem]">Sales Manager</p>
</div>
</div>
</blockquote>
</div>
<!--/.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.item-inner -->
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<div class="item-inner">
<div class="card">
<div class="card-body flex-[1_1_auto] p-[40px]">
<blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
<p>“Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus posuere consectetur.”</p>
<div class="flex items-center text-left">
<img class="!rounded-[50%] !w-[3.5rem]" src="../../assets/img/avatars/te4.jpg" alt="image">
<div class="info !pl-4">
<h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Coriss Ambady</h5>
<p class="!mb-0 text-[.85rem]">Financial Analyst</p>
</div>
</div>
</blockquote>
</div>
<!--/.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.item-inner -->
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<div class="item-inner">
<div class="card">
<div class="card-body flex-[1_1_auto] p-[40px]">
<blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
<p>“Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque.”</p>
<div class="flex items-center text-left">
<img class="!rounded-[50%] !w-[3.5rem]" src="../../assets/img/avatars/te5.jpg" alt="image">
<div class="info !pl-4">
<h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Jackie Sanders</h5>
<p class="!mb-0 text-[.85rem]">Investment Planner</p>
</div>
</div>
</blockquote>
</div>
<!--/.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.item-inner -->
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<div class="item-inner">
<div class="card">
<div class="card-body flex-[1_1_auto] p-[40px]">
<blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
<p>“Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam eget risus varius blandit sit amet non magna.”</p>
<div class="flex items-center text-left">
<img class="!rounded-[50%] !w-[3.5rem]" src="../../assets/img/avatars/te6.jpg" alt="image">
<div class="info !pl-4">
<h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Laura Widerski</h5>
<p class="!mb-0 text-[.85rem]">Sales Specialist</p>
</div>
</div>
</blockquote>
</div>
<!--/.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.item-inner -->
</div>
<!--/.swiper-slide -->
</div>
<!--/.swiper-wrapper -->
</div>
<!-- /.swiper -->
</div>
<!-- /.swiper-container -->
</div>
<!-- /.relative -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
<div class="card">
<div class="card-footer border-0 !relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-3">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-3" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;section class=&quot;wrapper !bg-[#ffffff] &quot;&gt;
&#60;div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20"&#62;
&#60;div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] !mt-[-50px]"&#62;
&#60;div class="xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[35px] !mt-[50px]"&#62;
&#60;h2 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mt-10 !mb-3"&#62;Our Community&#60;/h2&#62;
&#60;p class="lead text-[1.05rem] !leading-[1.6] !mb-6"&#62;Customer satisfaction is our major goal. See what our clients are saying about our services.&#60;/p&#62;
&#60;a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"&#62;All Testimonials&#60;/a&#62;
&#60;/div&#62;
&#60;!-- /column --&#62;
&#60;div class="xl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[35px] !mt-[50px]"&#62;
&#60;div class="!relative"&#62;
&#60;div class="shape !rounded-[50%] !bg-[#fff8ee] rellax !w-[6rem] !h-[6rem] absolute " data-rellax-speed="1" style="top: -0.7rem; right: -1.7rem;"&#62;&#60;/div&#62;
&#60;div class="shape !rounded-[50%] bg-line red rellax !w-[6rem] !h-[6rem] absolute opacity-50" data-rellax-speed="1" style="bottom: -0.5rem; left: -1.4rem;"&#62;&#60;/div&#62;
&#60;div class="swiper-container dots-closer !mb-6 relative z-10" data-margin="0" data-dots="true" data-items-md="2" data-items-xs="1"&#62;
&#60;div class="swiper"&#62;
&#60;div class="swiper-wrapper"&#62;
&#60;div class="swiper-slide"&#62;
&#60;div class="item-inner"&#62;
&#60;div class="card"&#62;
&#60;div class="card-body flex-[1_1_auto] p-[40px]"&#62;
&#60;blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]"&#62;
&#60;p&#62;&#8220;Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis sed posuere.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;img class="!rounded-[50%] !w-[3.5rem]" src="../../assets/img/avatars/te1.jpg" alt="image"&#62;
&#60;div class="info !pl-4"&#62;
&#60;h5 class="!mb-1 text-[.95rem] !leading-[1.5]"&#62;Coriss Ambady&#60;/h5&#62;
&#60;p class="!mb-0 text-[.85rem]"&#62;Financial Analyst&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!--/.card-body --&#62;
&#60;/div&#62;
&#60;!-- /.card --&#62;
&#60;/div&#62;
&#60;!-- /.item-inner --&#62;
&#60;/div&#62;
&#60;!--/.swiper-slide --&#62;
&#60;div class="swiper-slide"&#62;
&#60;div class="item-inner"&#62;
&#60;div class="card"&#62;
&#60;div class="card-body flex-[1_1_auto] p-[40px]"&#62;
&#60;blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]"&#62;
&#60;p&#62;&#8220;Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;img class="!rounded-[50%] !w-[3.5rem]" src="../../assets/img/avatars/te2.jpg" alt="image"&#62;
&#60;div class="info !pl-4"&#62;
&#60;h5 class="!mb-1 text-[.95rem] !leading-[1.5]"&#62;Cory Zamora&#60;/h5&#62;
&#60;p class="!mb-0 text-[.85rem]"&#62;Marketing Specialist&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!--/.card-body --&#62;
&#60;/div&#62;
&#60;!-- /.card --&#62;
&#60;/div&#62;
&#60;!-- /.item-inner --&#62;
&#60;/div&#62;
&#60;!--/.swiper-slide --&#62;
&#60;div class="swiper-slide"&#62;
&#60;div class="item-inner"&#62;
&#60;div class="card"&#62;
&#60;div class="card-body flex-[1_1_auto] p-[40px]"&#62;
&#60;blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]"&#62;
&#60;p&#62;&#8220;Nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;img class="!rounded-[50%] !w-[3.5rem]" src="../../assets/img/avatars/te3.jpg" alt="image"&#62;
&#60;div class="info !pl-4"&#62;
&#60;h5 class="!mb-1 text-[.95rem] !leading-[1.5]"&#62;Nikolas Brooten&#60;/h5&#62;
&#60;p class="!mb-0 text-[.85rem]"&#62;Sales Manager&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!--/.card-body --&#62;
&#60;/div&#62;
&#60;!-- /.card --&#62;
&#60;/div&#62;
&#60;!-- /.item-inner --&#62;
&#60;/div&#62;
&#60;!--/.swiper-slide --&#62;
&#60;div class="swiper-slide"&#62;
&#60;div class="item-inner"&#62;
&#60;div class="card"&#62;
&#60;div class="card-body flex-[1_1_auto] p-[40px]"&#62;
&#60;blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]"&#62;
&#60;p&#62;&#8220;Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus posuere consectetur.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;img class="!rounded-[50%] !w-[3.5rem]" src="../../assets/img/avatars/te4.jpg" alt="image"&#62;
&#60;div class="info !pl-4"&#62;
&#60;h5 class="!mb-1 text-[.95rem] !leading-[1.5]"&#62;Coriss Ambady&#60;/h5&#62;
&#60;p class="!mb-0 text-[.85rem]"&#62;Financial Analyst&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!--/.card-body --&#62;
&#60;/div&#62;
&#60;!-- /.card --&#62;
&#60;/div&#62;
&#60;!-- /.item-inner --&#62;
&#60;/div&#62;
&#60;!--/.swiper-slide --&#62;
&#60;div class="swiper-slide"&#62;
&#60;div class="item-inner"&#62;
&#60;div class="card"&#62;
&#60;div class="card-body flex-[1_1_auto] p-[40px]"&#62;
&#60;blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]"&#62;
&#60;p&#62;&#8220;Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;img class="!rounded-[50%] !w-[3.5rem]" src="../../assets/img/avatars/te5.jpg" alt="image"&#62;
&#60;div class="info !pl-4"&#62;
&#60;h5 class="!mb-1 text-[.95rem] !leading-[1.5]"&#62;Jackie Sanders&#60;/h5&#62;
&#60;p class="!mb-0 text-[.85rem]"&#62;Investment Planner&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!--/.card-body --&#62;
&#60;/div&#62;
&#60;!-- /.card --&#62;
&#60;/div&#62;
&#60;!-- /.item-inner --&#62;
&#60;/div&#62;
&#60;!--/.swiper-slide --&#62;
&#60;div class="swiper-slide"&#62;
&#60;div class="item-inner"&#62;
&#60;div class="card"&#62;
&#60;div class="card-body flex-[1_1_auto] p-[40px]"&#62;
&#60;blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]"&#62;
&#60;p&#62;&#8220;Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam eget risus varius blandit sit amet non magna.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;img class="!rounded-[50%] !w-[3.5rem]" src="../../assets/img/avatars/te6.jpg" alt="image"&#62;
&#60;div class="info !pl-4"&#62;
&#60;h5 class="!mb-1 text-[.95rem] !leading-[1.5]"&#62;Laura Widerski&#60;/h5&#62;
&#60;p class="!mb-0 text-[.85rem]"&#62;Sales Specialist&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!--/.card-body --&#62;
&#60;/div&#62;
&#60;!-- /.card --&#62;
&#60;/div&#62;
&#60;!-- /.item-inner --&#62;
&#60;/div&#62;
&#60;!--/.swiper-slide --&#62;
&#60;/div&#62;
&#60;!--/.swiper-wrapper --&#62;
&#60;/div&#62;
&#60;!-- /.swiper --&#62;
&#60;/div&#62;
&#60;!-- /.swiper-container --&#62;
&#60;/div&#62;
&#60;!-- /.relative --&#62;
&#60;/div&#62;
&#60;!-- /column --&#62;
&#60;/div&#62;
&#60;!-- /.row --&#62;
&#60;/div&#62;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-4" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
<div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-30px] items-center">
<div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!order-2 lg:!order-2 xl:!px-[35px] lg:!px-[20px] !mt-[30px]">
<figure class="m-0 p-0"><img class="w-auto" src="../../assets/img/illustrations/i4.png" alt="image"></figure>
</div>
<!--/column -->
<div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-12 xl:!px-[35px] lg:!px-[20px] !mt-[30px]">
<div class="swiper-container dots-closer !mb-6 relative z-10" data-margin="30" data-dots="true">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<blockquote class="icon icon-top text-[1rem] !text-center relative pt-[3.75rem] p-0 border-0 !leading-[1.7] font-medium m-[0_0_1rem] before:translate-x-[-52%] before:left-2/4 before:content-['\201c'] before:!text-[#aab0bc] before:opacity-30 before:text-[6.5rem] before:font-normal before:absolute before:leading-none before:z-[1] before:top-0">
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur.”</p>
<div class="flex items-center justify-center !text-center">
<div class="info !pl-0">
<h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Coriss Ambady</h5>
<p class="!mb-0 text-[.85rem]">Financial Analyst</p>
</div>
</div>
</blockquote>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<blockquote class="icon icon-top text-[1rem] !text-center relative pt-[3.75rem] p-0 border-0 !leading-[1.7] font-medium m-[0_0_1rem] before:translate-x-[-52%] before:left-2/4 before:content-['\201c'] before:!text-[#aab0bc] before:opacity-30 before:text-[6.5rem] before:font-normal before:absolute before:leading-none before:z-[1] before:top-0">
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur.”</p>
<div class="flex items-center justify-center !text-center">
<div class="info !pl-0">
<h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Cory Zamora</h5>
<p class="!mb-0 text-[.85rem]">Marketing Specialist</p>
</div>
</div>
</blockquote>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<blockquote class="icon icon-top text-[1rem] !text-center relative pt-[3.75rem] p-0 border-0 !leading-[1.7] font-medium m-[0_0_1rem] before:translate-x-[-52%] before:left-2/4 before:content-['\201c'] before:!text-[#aab0bc] before:opacity-30 before:text-[6.5rem] before:font-normal before:absolute before:leading-none before:z-[1] before:top-0">
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur.”</p>
<div class="flex items-center justify-center !text-center">
<div class="info !pl-0">
<h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Nikolas Brooten</h5>
<p class="!mb-0 text-[.85rem]">Sales Manager</p>
</div>
</div>
</blockquote>
</div>
<!--/.swiper-slide -->
</div>
<!--/.swiper-wrapper -->
</div>
<!-- /.swiper -->
</div>
<!-- /.swiper-container -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
<div class="card">
<div class="card-footer border-0 !relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-4">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-4" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;section class=&quot;wrapper !bg-[#ffffff] &quot;&gt;
&#60;div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20"&#62;
&#60;div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-30px] items-center"&#62;
&#60;div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!order-2 lg:!order-2 xl:!px-[35px] lg:!px-[20px] !mt-[30px]"&#62;
&#60;figure class="m-0 p-0"&#62;&#60;img class="w-auto" src="../../assets/img/illustrations/i4.png" alt="image"&#62;&#60;/figure&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-12 xl:!px-[35px] lg:!px-[20px] !mt-[30px]"&#62;
&#60;div class="swiper-container dots-closer !mb-6 relative z-10" data-margin="30" data-dots="true"&#62;
&#60;div class="swiper"&#62;
&#60;div class="swiper-wrapper"&#62;
&#60;div class="swiper-slide"&#62;
&#60;blockquote class="icon icon-top text-[1rem] !text-center relative pt-[3.75rem] p-0 border-0 !leading-[1.7] font-medium m-[0_0_1rem] before:translate-x-[-52%] before:left-2/4 before:content-['\201c'] before:!text-[#aab0bc] before:opacity-30 before:text-[6.5rem] before:font-normal before:absolute before:leading-none before:z-[1] before:top-0"&#62;
&#60;p&#62;&#8220;Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur.&#8221;&#60;/p&#62;
&#60;div class="flex items-center justify-center !text-center"&#62;
&#60;div class="info !pl-0"&#62;
&#60;h5 class="!mb-1 text-[.95rem] !leading-[1.5]"&#62;Coriss Ambady&#60;/h5&#62;
&#60;p class="!mb-0 text-[.85rem]"&#62;Financial Analyst&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!--/.swiper-slide --&#62;
&#60;div class="swiper-slide"&#62;
&#60;blockquote class="icon icon-top text-[1rem] !text-center relative pt-[3.75rem] p-0 border-0 !leading-[1.7] font-medium m-[0_0_1rem] before:translate-x-[-52%] before:left-2/4 before:content-['\201c'] before:!text-[#aab0bc] before:opacity-30 before:text-[6.5rem] before:font-normal before:absolute before:leading-none before:z-[1] before:top-0"&#62;
&#60;p&#62;&#8220;Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur.&#8221;&#60;/p&#62;
&#60;div class="flex items-center justify-center !text-center"&#62;
&#60;div class="info !pl-0"&#62;
&#60;h5 class="!mb-1 text-[.95rem] !leading-[1.5]"&#62;Cory Zamora&#60;/h5&#62;
&#60;p class="!mb-0 text-[.85rem]"&#62;Marketing Specialist&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!--/.swiper-slide --&#62;
&#60;div class="swiper-slide"&#62;
&#60;blockquote class="icon icon-top text-[1rem] !text-center relative pt-[3.75rem] p-0 border-0 !leading-[1.7] font-medium m-[0_0_1rem] before:translate-x-[-52%] before:left-2/4 before:content-['\201c'] before:!text-[#aab0bc] before:opacity-30 before:text-[6.5rem] before:font-normal before:absolute before:leading-none before:z-[1] before:top-0"&#62;
&#60;p&#62;&#8220;Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur.&#8221;&#60;/p&#62;
&#60;div class="flex items-center justify-center !text-center"&#62;
&#60;div class="info !pl-0"&#62;
&#60;h5 class="!mb-1 text-[.95rem] !leading-[1.5]"&#62;Nikolas Brooten&#60;/h5&#62;
&#60;p class="!mb-0 text-[.85rem]"&#62;Sales Manager&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!--/.swiper-slide --&#62;
&#60;/div&#62;
&#60;!--/.swiper-wrapper --&#62;
&#60;/div&#62;
&#60;!-- /.swiper --&#62;
&#60;/div&#62;
&#60;!-- /.swiper-container --&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;/div&#62;
&#60;!--/.row --&#62;
&#60;/div&#62;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-5" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
<h2 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-3 !text-center">Happy Customers</h2>
<p class="lead text-[0.9rem] font-medium !leading-[1.65] !text-center !mb-6 md:!px-24 lg:!px-0">Customer satisfaction is our major goal. See what our customers are saying about us.</p>
<div class="!relative">
<div class="shape !rounded-[50%] !bg-[#fff8ee] rellax !w-[6rem] !h-[6rem] absolute z-[1]" data-rellax-speed="1" style="bottom: 0.5rem; right: -1.7rem;"></div>
<div class="shape bg-dot primary rellax !w-[6rem] !h-[6rem] bg-[radial-gradient(#e31e24_2px,transparent_2.5px)] absolute z-[1] opacity-50" data-rellax-speed="1" style="top: -1rem; left: -1.7rem;"></div>
<div class="swiper-container dots-closer !mb-6 relative z-10" data-margin="0" data-dots="true" data-items-xl="3" data-items-md="2" data-items-xs="1">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="item-inner">
<div class="card">
<div class="card-body flex-[1_1_auto] p-[40px]">
<blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
<div class="flex items-center text-left">
<img class="!rounded-[50%] !w-[3.5rem]" src="../../assets/img/avatars/te1.jpg" alt="image">
<div class="info !pl-4">
<h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Coriss Ambady</h5>
<p class="!mb-0 text-[.85rem]">Financial Analyst</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.item-inner -->
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<div class="item-inner">
<div class="card">
<div class="card-body flex-[1_1_auto] p-[40px]">
<blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
<div class="flex items-center text-left">
<img class="!rounded-[50%] !w-[3.5rem]" src="../../assets/img/avatars/te2.jpg" alt="image">
<div class="info !pl-4">
<h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Cory Zamora</h5>
<p class="!mb-0 text-[.85rem]">Marketing Specialist</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.item-inner -->
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<div class="item-inner">
<div class="card">
<div class="card-body flex-[1_1_auto] p-[40px]">
<blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
<div class="flex items-center text-left">
<img class="!rounded-[50%] !w-[3.5rem]" src="../../assets/img/avatars/te3.jpg" alt="image">
<div class="info !pl-4">
<h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Nikolas Brooten</h5>
<p class="!mb-0 text-[.85rem]">Sales Manager</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.item-inner -->
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<div class="item-inner">
<div class="card">
<div class="card-body flex-[1_1_auto] p-[40px]">
<blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
<div class="flex items-center text-left">
<img class="!rounded-[50%] !w-[3.5rem]" src="../../assets/img/avatars/te4.jpg" alt="image">
<div class="info !pl-4">
<h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Coriss Ambady</h5>
<p class="!mb-0 text-[.85rem]">Financial Analyst</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.item-inner -->
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<div class="item-inner">
<div class="card">
<div class="card-body flex-[1_1_auto] p-[40px]">
<blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
<div class="flex items-center text-left">
<img class="!rounded-[50%] !w-[3.5rem]" src="../../assets/img/avatars/te5.jpg" alt="image">
<div class="info !pl-4">
<h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Jackie Sanders</h5>
<p class="!mb-0 text-[.85rem]">Investment Planner</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.item-inner -->
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<div class="item-inner">
<div class="card">
<div class="card-body flex-[1_1_auto] p-[40px]">
<blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
<div class="flex items-center text-left">
<img class="!rounded-[50%] !w-[3.5rem]" src="../../assets/img/avatars/te6.jpg" alt="image">
<div class="info !pl-4">
<h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Laura Widerski</h5>
<p class="!mb-0 text-[.85rem]">Sales Specialist</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.item-inner -->
</div>
<!--/.swiper-slide -->
</div>
<!--/.swiper-wrapper -->
</div>
<!-- /.swiper -->
</div>
<!-- /.swiper-container -->
</div>
<!-- /.relative -->
</div>
<!-- /.container -->
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
<div class="card">
<div class="card-footer border-0 !relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-5">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-5" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;section class=&quot;wrapper !bg-[#ffffff] &quot;&gt;
&#60;div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20"&#62;
&#60;h2 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-3 !text-center"&#62;Happy Customers&#60;/h2&#62;
&#60;p class="lead text-[0.9rem] font-medium !leading-[1.65] !text-center !mb-6 md:!px-24 lg:!px-0"&#62;Customer satisfaction is our major goal. See what our customers are saying about us.&#60;/p&#62;
&#60;div class="!relative"&#62;
&#60;div class="shape !rounded-[50%] !bg-[#fff8ee] rellax !w-[6rem] !h-[6rem] absolute z-[1]" data-rellax-speed="1" style="bottom: 0.5rem; right: -1.7rem;"&#62;&#60;/div&#62;
&#60;div class="shape bg-dot primary rellax !w-[6rem] !h-[6rem] bg-[radial-gradient(#e31e24_2px,transparent_2.5px)] absolute z-[1] opacity-50" data-rellax-speed="1" style="top: -1rem; left: -1.7rem;"&#62;&#60;/div&#62;
&#60;div class="swiper-container dots-closer !mb-6 relative z-10" data-margin="0" data-dots="true" data-items-xl="3" data-items-md="2" data-items-xs="1"&#62;
&#60;div class="swiper"&#62;
&#60;div class="swiper-wrapper"&#62;
&#60;div class="swiper-slide"&#62;
&#60;div class="item-inner"&#62;
&#60;div class="card"&#62;
&#60;div class="card-body flex-[1_1_auto] p-[40px]"&#62;
&#60;blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]"&#62;
&#60;p&#62;&#8220;Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;img class="!rounded-[50%] !w-[3.5rem]" src="../../assets/img/avatars/te1.jpg" alt="image"&#62;
&#60;div class="info !pl-4"&#62;
&#60;h5 class="!mb-1 text-[.95rem] !leading-[1.5]"&#62;Coriss Ambady&#60;/h5&#62;
&#60;p class="!mb-0 text-[.85rem]"&#62;Financial Analyst&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!-- /.card-body --&#62;
&#60;/div&#62;
&#60;!-- /.card --&#62;
&#60;/div&#62;
&#60;!-- /.item-inner --&#62;
&#60;/div&#62;
&#60;!--/.swiper-slide --&#62;
&#60;div class="swiper-slide"&#62;
&#60;div class="item-inner"&#62;
&#60;div class="card"&#62;
&#60;div class="card-body flex-[1_1_auto] p-[40px]"&#62;
&#60;blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]"&#62;
&#60;p&#62;&#8220;Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;img class="!rounded-[50%] !w-[3.5rem]" src="../../assets/img/avatars/te2.jpg" alt="image"&#62;
&#60;div class="info !pl-4"&#62;
&#60;h5 class="!mb-1 text-[.95rem] !leading-[1.5]"&#62;Cory Zamora&#60;/h5&#62;
&#60;p class="!mb-0 text-[.85rem]"&#62;Marketing Specialist&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!-- /.card-body --&#62;
&#60;/div&#62;
&#60;!-- /.card --&#62;
&#60;/div&#62;
&#60;!-- /.item-inner --&#62;
&#60;/div&#62;
&#60;!--/.swiper-slide --&#62;
&#60;div class="swiper-slide"&#62;
&#60;div class="item-inner"&#62;
&#60;div class="card"&#62;
&#60;div class="card-body flex-[1_1_auto] p-[40px]"&#62;
&#60;blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]"&#62;
&#60;p&#62;&#8220;Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;img class="!rounded-[50%] !w-[3.5rem]" src="../../assets/img/avatars/te3.jpg" alt="image"&#62;
&#60;div class="info !pl-4"&#62;
&#60;h5 class="!mb-1 text-[.95rem] !leading-[1.5]"&#62;Nikolas Brooten&#60;/h5&#62;
&#60;p class="!mb-0 text-[.85rem]"&#62;Sales Manager&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!-- /.card-body --&#62;
&#60;/div&#62;
&#60;!-- /.card --&#62;
&#60;/div&#62;
&#60;!-- /.item-inner --&#62;
&#60;/div&#62;
&#60;!--/.swiper-slide --&#62;
&#60;div class="swiper-slide"&#62;
&#60;div class="item-inner"&#62;
&#60;div class="card"&#62;
&#60;div class="card-body flex-[1_1_auto] p-[40px]"&#62;
&#60;blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]"&#62;
&#60;p&#62;&#8220;Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;img class="!rounded-[50%] !w-[3.5rem]" src="../../assets/img/avatars/te4.jpg" alt="image"&#62;
&#60;div class="info !pl-4"&#62;
&#60;h5 class="!mb-1 text-[.95rem] !leading-[1.5]"&#62;Coriss Ambady&#60;/h5&#62;
&#60;p class="!mb-0 text-[.85rem]"&#62;Financial Analyst&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!-- /.card-body --&#62;
&#60;/div&#62;
&#60;!-- /.card --&#62;
&#60;/div&#62;
&#60;!-- /.item-inner --&#62;
&#60;/div&#62;
&#60;!--/.swiper-slide --&#62;
&#60;div class="swiper-slide"&#62;
&#60;div class="item-inner"&#62;
&#60;div class="card"&#62;
&#60;div class="card-body flex-[1_1_auto] p-[40px]"&#62;
&#60;blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]"&#62;
&#60;p&#62;&#8220;Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;img class="!rounded-[50%] !w-[3.5rem]" src="../../assets/img/avatars/te5.jpg" alt="image"&#62;
&#60;div class="info !pl-4"&#62;
&#60;h5 class="!mb-1 text-[.95rem] !leading-[1.5]"&#62;Jackie Sanders&#60;/h5&#62;
&#60;p class="!mb-0 text-[.85rem]"&#62;Investment Planner&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!-- /.card-body --&#62;
&#60;/div&#62;
&#60;!-- /.card --&#62;
&#60;/div&#62;
&#60;!-- /.item-inner --&#62;
&#60;/div&#62;
&#60;!--/.swiper-slide --&#62;
&#60;div class="swiper-slide"&#62;
&#60;div class="item-inner"&#62;
&#60;div class="card"&#62;
&#60;div class="card-body flex-[1_1_auto] p-[40px]"&#62;
&#60;blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]"&#62;
&#60;p&#62;&#8220;Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;img class="!rounded-[50%] !w-[3.5rem]" src="../../assets/img/avatars/te6.jpg" alt="image"&#62;
&#60;div class="info !pl-4"&#62;
&#60;h5 class="!mb-1 text-[.95rem] !leading-[1.5]"&#62;Laura Widerski&#60;/h5&#62;
&#60;p class="!mb-0 text-[.85rem]"&#62;Sales Specialist&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!-- /.card-body --&#62;
&#60;/div&#62;
&#60;!-- /.card --&#62;
&#60;/div&#62;
&#60;!-- /.item-inner --&#62;
&#60;/div&#62;
&#60;!--/.swiper-slide --&#62;
&#60;/div&#62;
&#60;!--/.swiper-wrapper --&#62;
&#60;/div&#62;
&#60;!-- /.swiper --&#62;
&#60;/div&#62;
&#60;!-- /.swiper-container --&#62;
&#60;/div&#62;
&#60;!-- /.relative --&#62;
&#60;/div&#62;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-6" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
<div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-30px] items-center">
<div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[30px] max-w-full !relative">
<div class="shape bg-dot primary rellax !w-[8rem] !h-[8rem] absolute opacity-50 bg-[radial-gradient(#e31e24_2px,transparent_2.5px)]" data-rellax-speed="1" style="top: 0; left: -1.4rem; z-index: 0;"></div>
<div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
<div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px] max-w-full">
<figure class="rounded-[0.4rem] xl:!mt-10 lg:!mt-10 md:!mt-10 !relative"><img class="!rounded-[0.4rem]" src="../../assets/img/photos/g5.jpg" alt="image"></figure>
</div>
<!--/column -->
<div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px] max-w-full">
<div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
<div class="w-full flex-[0_0_auto] px-[12.5px] !mt-[25px] max-w-full xl:!order-2 lg:!order-2 md:!order-2">
<figure class="rounded-[0.4rem]"><img class="!rounded-[0.4rem]" src="../../assets/img/photos/g6.jpg" alt="image"></figure>
</div>
<!--/column -->
<div class="xl:w-10/12 lg:w-10/12 md:w-10/12 w-full flex-[0_0_auto] px-[12.5px] !mt-[25px] max-w-full">
<div class="card !bg-[#e0e9fa] !text-center counter-wrapper">
<div class="card-body !py-12">
<h3 class="counter !whitespace-nowrap xl:!text-[2rem] !text-[calc(1.325rem_+_0.9vw)] !tracking-[normal] !leading-none !mb-2">5000+</h3>
<p class="!mb-0 text-[0.8rem] font-medium">Satisfied Customers</p>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[25px] max-w-full">
<div class="swiper-container dots-closer !mb-6" data-margin="30" data-dots="true">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<blockquote class="icon icon-top text-[1rem] !text-center relative pt-[3.75rem] p-0 border-0 !leading-[1.7] font-medium m-[0_0_1rem] before:translate-x-[-52%] before:left-2/4 before:content-['\201c'] before:!text-[#aab0bc] before:opacity-30 before:text-[6.5rem] before:font-normal before:absolute before:leading-none before:z-[1] before:top-0">
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur.”</p>
<div class="flex items-center justify-center !text-center">
<div class="info !pl-0">
<h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Coriss Ambady</h5>
<p class="!mb-0 text-[0.8rem]">Financial Analyst</p>
</div>
</div>
</blockquote>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<blockquote class="icon icon-top text-[1rem] !text-center relative pt-[3.75rem] p-0 border-0 !leading-[1.7] font-medium m-[0_0_1rem] before:translate-x-[-52%] before:left-2/4 before:content-['\201c'] before:!text-[#aab0bc] before:opacity-30 before:text-[6.5rem] before:font-normal before:absolute before:leading-none before:z-[1] before:top-0">
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur.”</p>
<div class="flex items-center justify-center !text-center">
<div class="info !pl-0">
<h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Cory Zamora</h5>
<p class="!mb-0 text-[0.8rem]">Marketing Specialist</p>
</div>
</div>
</blockquote>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<blockquote class="icon icon-top text-[1rem] !text-center relative pt-[3.75rem] p-0 border-0 !leading-[1.7] font-medium m-[0_0_1rem] before:translate-x-[-52%] before:left-2/4 before:content-['\201c'] before:!text-[#aab0bc] before:opacity-30 before:text-[6.5rem] before:font-normal before:absolute before:leading-none before:z-[1] before:top-0">
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur.”</p>
<div class="flex items-center justify-center !text-center">
<div class="info !pl-0">
<h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Nikolas Brooten</h5>
<p class="!mb-0 text-[0.8rem]">Sales Manager</p>
</div>
</div>
</blockquote>
</div>
<!--/.swiper-slide -->
</div>
<!--/.swiper-wrapper -->
</div>
<!-- /.swiper -->
</div>
<!-- /.swiper-container -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
<div class="card">
<div class="card-footer border-0 !relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-6">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-6" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;section class=&quot;wrapper !bg-[#ffffff] &quot;&gt;
&#60;div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20"&#62;
&#60;div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-30px] items-center"&#62;
&#60;div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[30px] max-w-full !relative"&#62;
&#60;div class="shape bg-dot primary rellax !w-[8rem] !h-[8rem] absolute opacity-50 bg-[radial-gradient(#e31e24_2px,transparent_2.5px)]" data-rellax-speed="1" style="top: 0; left: -1.4rem; z-index: 0;"&#62;&#60;/div&#62;
&#60;div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]"&#62;
&#60;div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px] max-w-full"&#62;
&#60;figure class="rounded-[0.4rem] xl:!mt-10 lg:!mt-10 md:!mt-10 !relative"&#62;&#60;img class="!rounded-[0.4rem]" src="../../assets/img/photos/g5.jpg" alt="image"&#62;&#60;/figure&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px] max-w-full"&#62;
&#60;div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]"&#62;
&#60;div class="w-full flex-[0_0_auto] px-[12.5px] !mt-[25px] max-w-full xl:!order-2 lg:!order-2 md:!order-2"&#62;
&#60;figure class="rounded-[0.4rem]"&#62;&#60;img class="!rounded-[0.4rem]" src="../../assets/img/photos/g6.jpg" alt="image"&#62;&#60;/figure&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;div class="xl:w-10/12 lg:w-10/12 md:w-10/12 w-full flex-[0_0_auto] px-[12.5px] !mt-[25px] max-w-full"&#62;
&#60;div class="card !bg-[#e0e9fa] !text-center counter-wrapper"&#62;
&#60;div class="card-body !py-12"&#62;
&#60;h3 class="counter !whitespace-nowrap xl:!text-[2rem] !text-[calc(1.325rem_+_0.9vw)] !tracking-[normal] !leading-none !mb-2"&#62;5000+&#60;/h3&#62;
&#60;p class="!mb-0 text-[0.8rem] font-medium"&#62;Satisfied Customers&#60;/p&#62;
&#60;/div&#62;
&#60;!--/.card-body --&#62;
&#60;/div&#62;
&#60;!--/.card --&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;/div&#62;
&#60;!--/.row --&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;/div&#62;
&#60;!--/.row --&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[25px] max-w-full"&#62;
&#60;div class="swiper-container dots-closer !mb-6" data-margin="30" data-dots="true"&#62;
&#60;div class="swiper"&#62;
&#60;div class="swiper-wrapper"&#62;
&#60;div class="swiper-slide"&#62;
&#60;blockquote class="icon icon-top text-[1rem] !text-center relative pt-[3.75rem] p-0 border-0 !leading-[1.7] font-medium m-[0_0_1rem] before:translate-x-[-52%] before:left-2/4 before:content-['\201c'] before:!text-[#aab0bc] before:opacity-30 before:text-[6.5rem] before:font-normal before:absolute before:leading-none before:z-[1] before:top-0"&#62;
&#60;p&#62;&#8220;Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur.&#8221;&#60;/p&#62;
&#60;div class="flex items-center justify-center !text-center"&#62;
&#60;div class="info !pl-0"&#62;
&#60;h5 class="!mb-1 text-[.95rem] !leading-[1.5]"&#62;Coriss Ambady&#60;/h5&#62;
&#60;p class="!mb-0 text-[0.8rem]"&#62;Financial Analyst&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!--/.swiper-slide --&#62;
&#60;div class="swiper-slide"&#62;
&#60;blockquote class="icon icon-top text-[1rem] !text-center relative pt-[3.75rem] p-0 border-0 !leading-[1.7] font-medium m-[0_0_1rem] before:translate-x-[-52%] before:left-2/4 before:content-['\201c'] before:!text-[#aab0bc] before:opacity-30 before:text-[6.5rem] before:font-normal before:absolute before:leading-none before:z-[1] before:top-0"&#62;
&#60;p&#62;&#8220;Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur.&#8221;&#60;/p&#62;
&#60;div class="flex items-center justify-center !text-center"&#62;
&#60;div class="info !pl-0"&#62;
&#60;h5 class="!mb-1 text-[.95rem] !leading-[1.5]"&#62;Cory Zamora&#60;/h5&#62;
&#60;p class="!mb-0 text-[0.8rem]"&#62;Marketing Specialist&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!--/.swiper-slide --&#62;
&#60;div class="swiper-slide"&#62;
&#60;blockquote class="icon icon-top text-[1rem] !text-center relative pt-[3.75rem] p-0 border-0 !leading-[1.7] font-medium m-[0_0_1rem] before:translate-x-[-52%] before:left-2/4 before:content-['\201c'] before:!text-[#aab0bc] before:opacity-30 before:text-[6.5rem] before:font-normal before:absolute before:leading-none before:z-[1] before:top-0"&#62;
&#60;p&#62;&#8220;Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur.&#8221;&#60;/p&#62;
&#60;div class="flex items-center justify-center !text-center"&#62;
&#60;div class="info !pl-0"&#62;
&#60;h5 class="!mb-1 text-[.95rem] !leading-[1.5]"&#62;Nikolas Brooten&#60;/h5&#62;
&#60;p class="!mb-0 text-[0.8rem]"&#62;Sales Manager&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!--/.swiper-slide --&#62;
&#60;/div&#62;
&#60;!--/.swiper-wrapper --&#62;
&#60;/div&#62;
&#60;!-- /.swiper --&#62;
&#60;/div&#62;
&#60;!-- /.swiper-container --&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;/div&#62;
&#60;!--/.row --&#62;
&#60;/div&#62;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-7" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
<div class="flex flex-wrap mx-[-15px]">
<div class="md:w-10/12 md:!ml-[8.33333333%] lg:w-8/12 lg:!ml-[16.66666667%] xl:w-8/12 xl:!ml-[16.66666667%] w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center">
<h2 class="!text-[.75rem] uppercase !text-[#aab0bc] !mb-3 !tracking-[0.02rem] !leading-[1.35]">Happy Customers</h2>
<h3 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-10 xl:!px-10 xxl:!px-20">Don't take our word for it. See what customers are saying about us.</h3>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="itemgrid">
<div class="flex flex-wrap mx-[-15px] isotope !mt-[-30px]">
<div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
<div class="card">
<div class="card-body flex-[1_1_auto] p-[40px]">
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"></span>
<blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
<div class="flex items-center text-left">
<img class="!rounded-[50%] !w-[3.5rem]" src="../../assets/img/avatars/te1.jpg" alt="image">
<div class="info !pl-4">
<h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Coriss Ambady</h5>
<p class="!mb-0 text-[.85rem]">Financial Analyst</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!--/column -->
<div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
<div class="card">
<div class="card-body flex-[1_1_auto] p-[40px]">
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"></span>
<blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
<p>“Fusce dapibus, tellus ac cursus tortor mauris condimentum fermentum massa justo sit amet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.”</p>
<div class="flex items-center text-left">
<img class="!rounded-[50%] !w-[3.5rem]" src="../../assets/img/avatars/te2.jpg" alt="image">
<div class="info !pl-4">
<h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Cory Zamora</h5>
<p class="!mb-0 text-[.85rem]">Marketing Specialist</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!--/column -->
<div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
<div class="card">
<div class="card-body flex-[1_1_auto] p-[40px]">
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"></span>
<blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
<p>“Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget porta ac consectetur vestibulum. Donec sed odio dui consectetur adipiscing elit.”</p>
<div class="flex items-center text-left">
<img class="!rounded-[50%] !w-[3.5rem]" src="../../assets/img/avatars/te3.jpg" alt="image">
<div class="info !pl-4">
<h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Nikolas Brooten</h5>
<p class="!mb-0 text-[.85rem]">Sales Manager</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!--/column -->
<div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
<div class="card">
<div class="card-body flex-[1_1_auto] p-[40px]">
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"></span>
<blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
<p>“Etiam adipiscing tincidunt elit convallis felis suscipit ut. Phasellus rhoncus tincidunt auctor. Nullam eu sagittis mauris. Donec non dolor ac elit aliquam tincidunt at at sapien. Aenean tortor libero condimentum ac laoreet vitae.”</p>
<div class="flex items-center text-left">
<img class="!rounded-[50%] !w-[3.5rem]" src="../../assets/img/avatars/te4.jpg" alt="image">
<div class="info !pl-4">
<h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Coriss Ambady</h5>
<p class="!mb-0 text-[.85rem]">Financial Analyst</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!--/column -->
<div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
<div class="card">
<div class="card-body flex-[1_1_auto] p-[40px]">
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"></span>
<blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
<p>“Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus magnis dis montes, nascetur ridiculus mus. Donec sed odio dui. Nulla vitae elit libero a pharetra.”</p>
<div class="flex items-center text-left">
<img class="!rounded-[50%] !w-[3.5rem]" src="../../assets/img/avatars/te5.jpg" alt="image">
<div class="info !pl-4">
<h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Jackie Sanders</h5>
<p class="!mb-0 text-[.85rem]">Investment Planner</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!--/column -->
<div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
<div class="card">
<div class="card-body flex-[1_1_auto] p-[40px]">
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"></span>
<blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
<p>“Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.”</p>
<div class="flex items-center text-left">
<img class="!rounded-[50%] !w-[3.5rem]" src="../../assets/img/avatars/te6.jpg" alt="image">
<div class="info !pl-4">
<h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Laura Widerski</h5>
<p class="!mb-0 text-[.85rem]">Sales Specialist</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!--/column -->
</div>
<!-- /.row -->
</div>
<!-- /.grid-view -->
</div>
<!-- /.container -->
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
<div class="card">
<div class="card-footer border-0 !relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-7">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-7" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;section class=&quot;wrapper !bg-[#ffffff] &quot;&gt;
&#60;div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20"&#62;
&#60;div class="flex flex-wrap mx-[-15px]"&#62;
&#60;div class="md:w-10/12 md:!ml-[8.33333333%] lg:w-8/12 lg:!ml-[16.66666667%] xl:w-8/12 xl:!ml-[16.66666667%] w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center"&#62;
&#60;h2 class="!text-[.75rem] uppercase !text-[#aab0bc] !mb-3 !tracking-[0.02rem] !leading-[1.35]"&#62;Happy Customers&#60;/h2&#62;
&#60;h3 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-10 xl:!px-10 xxl:!px-20"&#62;Don't take our word for it. See what customers are saying about us.&#60;/h3&#62;
&#60;/div&#62;
&#60;!-- /column --&#62;
&#60;/div&#62;
&#60;!-- /.row --&#62;
&#60;div class="itemgrid"&#62;
&#60;div class="flex flex-wrap mx-[-15px] isotope !mt-[-30px]"&#62;
&#60;div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]"&#62;
&#60;div class="card"&#62;
&#60;div class="card-body flex-[1_1_auto] p-[40px]"&#62;
&#60;span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"&#62;&#60;/span&#62;
&#60;blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]"&#62;
&#60;p&#62;&#8220;Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;img class="!rounded-[50%] !w-[3.5rem]" src="../../assets/img/avatars/te1.jpg" alt="image"&#62;
&#60;div class="info !pl-4"&#62;
&#60;h5 class="!mb-1 text-[.95rem] !leading-[1.5]"&#62;Coriss Ambady&#60;/h5&#62;
&#60;p class="!mb-0 text-[.85rem]"&#62;Financial Analyst&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!-- /.card-body --&#62;
&#60;/div&#62;
&#60;!-- /.card --&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]"&#62;
&#60;div class="card"&#62;
&#60;div class="card-body flex-[1_1_auto] p-[40px]"&#62;
&#60;span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"&#62;&#60;/span&#62;
&#60;blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]"&#62;
&#60;p&#62;&#8220;Fusce dapibus, tellus ac cursus tortor mauris condimentum fermentum massa justo sit amet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;img class="!rounded-[50%] !w-[3.5rem]" src="../../assets/img/avatars/te2.jpg" alt="image"&#62;
&#60;div class="info !pl-4"&#62;
&#60;h5 class="!mb-1 text-[.95rem] !leading-[1.5]"&#62;Cory Zamora&#60;/h5&#62;
&#60;p class="!mb-0 text-[.85rem]"&#62;Marketing Specialist&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!-- /.card-body --&#62;
&#60;/div&#62;
&#60;!-- /.card --&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]"&#62;
&#60;div class="card"&#62;
&#60;div class="card-body flex-[1_1_auto] p-[40px]"&#62;
&#60;span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"&#62;&#60;/span&#62;
&#60;blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]"&#62;
&#60;p&#62;&#8220;Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget porta ac consectetur vestibulum. Donec sed odio dui consectetur adipiscing elit.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;img class="!rounded-[50%] !w-[3.5rem]" src="../../assets/img/avatars/te3.jpg" alt="image"&#62;
&#60;div class="info !pl-4"&#62;
&#60;h5 class="!mb-1 text-[.95rem] !leading-[1.5]"&#62;Nikolas Brooten&#60;/h5&#62;
&#60;p class="!mb-0 text-[.85rem]"&#62;Sales Manager&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!-- /.card-body --&#62;
&#60;/div&#62;
&#60;!-- /.card --&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]"&#62;
&#60;div class="card"&#62;
&#60;div class="card-body flex-[1_1_auto] p-[40px]"&#62;
&#60;span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"&#62;&#60;/span&#62;
&#60;blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]"&#62;
&#60;p&#62;&#8220;Etiam adipiscing tincidunt elit convallis felis suscipit ut. Phasellus rhoncus tincidunt auctor. Nullam eu sagittis mauris. Donec non dolor ac elit aliquam tincidunt at at sapien. Aenean tortor libero condimentum ac laoreet vitae.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;img class="!rounded-[50%] !w-[3.5rem]" src="../../assets/img/avatars/te4.jpg" alt="image"&#62;
&#60;div class="info !pl-4"&#62;
&#60;h5 class="!mb-1 text-[.95rem] !leading-[1.5]"&#62;Coriss Ambady&#60;/h5&#62;
&#60;p class="!mb-0 text-[.85rem]"&#62;Financial Analyst&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!-- /.card-body --&#62;
&#60;/div&#62;
&#60;!-- /.card --&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]"&#62;
&#60;div class="card"&#62;
&#60;div class="card-body flex-[1_1_auto] p-[40px]"&#62;
&#60;span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"&#62;&#60;/span&#62;
&#60;blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]"&#62;
&#60;p&#62;&#8220;Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus magnis dis montes, nascetur ridiculus mus. Donec sed odio dui. Nulla vitae elit libero a pharetra.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;img class="!rounded-[50%] !w-[3.5rem]" src="../../assets/img/avatars/te5.jpg" alt="image"&#62;
&#60;div class="info !pl-4"&#62;
&#60;h5 class="!mb-1 text-[.95rem] !leading-[1.5]"&#62;Jackie Sanders&#60;/h5&#62;
&#60;p class="!mb-0 text-[.85rem]"&#62;Investment Planner&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!-- /.card-body --&#62;
&#60;/div&#62;
&#60;!-- /.card --&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]"&#62;
&#60;div class="card"&#62;
&#60;div class="card-body flex-[1_1_auto] p-[40px]"&#62;
&#60;span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"&#62;&#60;/span&#62;
&#60;blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]"&#62;
&#60;p&#62;&#8220;Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;img class="!rounded-[50%] !w-[3.5rem]" src="../../assets/img/avatars/te6.jpg" alt="image"&#62;
&#60;div class="info !pl-4"&#62;
&#60;h5 class="!mb-1 text-[.95rem] !leading-[1.5]"&#62;Laura Widerski&#60;/h5&#62;
&#60;p class="!mb-0 text-[.85rem]"&#62;Sales Specialist&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!-- /.card-body --&#62;
&#60;/div&#62;
&#60;!-- /.card --&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;/div&#62;
&#60;!-- /.row --&#62;
&#60;/div&#62;
&#60;!-- /.grid-view --&#62;
&#60;/div&#62;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-8" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-0 lg:pb-0 md:pb-20">
<div class="flex flex-wrap mx-[-15px] lg:mx-[-20px] xl:mx-0 items-center">
<div class="md:w-5/12 lg:w-5/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] lg:!px-[20px] xl:px-0 max-w-full xl:!ml-[8.33333333%] max-lg:!hidden xl:!flex lg:!flex !relative !self-end">
<div class="shape !rounded-[50%] !bg-[#e0e9fa] rellax !w-[12.5rem] !h-[12.5rem] hidden xl:block lg:block z-[1] absolute" data-rellax-speed="1" style="top: 7rem; left: 1rem"></div>
<figure class=" relative z-[2]"><img class="w-full max-w-full !h-auto" src="../../assets/img/photos/co1.png" alt="image"></figure>
</div>
<!--/column -->
<div class="lg:w-6/12 xl:w-6/12 xxl:w-5/12 w-full flex-[0_0_auto] !px-[15px] lg:!px-[20px] xl:px-0 max-w-full xl:!ml-[8.33333333%]">
<div class="swiper-container dots-start dots-closer !mt-6 !mb-6 relative !z-10" data-margin="30" data-dots="true">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<blockquote class="icon relative p-0 border-0 text-[1rem] !leading-[1.7] font-medium m-[0_0_1rem] before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur nulla dapibus curabitur blandit.”</p>
<div class="flex items-center text-left">
<div class="info !pl-0">
<h5 class="!mb-1 text-[.9rem] !leading-[1.5]">Coriss Ambady</h5>
<p class="!mb-0 text-[0.8rem]">Financial Analyst</p>
</div>
</div>
</blockquote>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<blockquote class="icon relative p-0 border-0 text-[1rem] !leading-[1.7] font-medium m-[0_0_1rem] before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur adipiscing dapibus curabitur blandit.”</p>
<div class="flex items-center text-left">
<div class="info !pl-0">
<h5 class="!mb-1 text-[.9rem] !leading-[1.5]">Cory Zamora</h5>
<p class="!mb-0 text-[0.8rem]">Marketing Specialist</p>
</div>
</div>
</blockquote>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<blockquote class="icon relative p-0 border-0 text-[1rem] !leading-[1.7] font-medium m-[0_0_1rem] before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur adipiscing dapibus curabitur blandit.”</p>
<div class="flex items-center text-left">
<div class="info !pl-0">
<h5 class="!mb-1 text-[.9rem] !leading-[1.5]">Nikolas Brooten</h5>
<p class="!mb-0 text-[0.8rem]">Sales Manager</p>
</div>
</div>
</blockquote>
</div>
<!--/.swiper-slide -->
</div>
<!--/.swiper-wrapper -->
</div>
<!-- /.swiper -->
</div>
<!-- /.swiper-container -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
<div class="card">
<div class="card-footer border-0 !relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-8">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-8" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;section class=&quot;wrapper !bg-[#ffffff] &quot;&gt;
&#60;div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-0 lg:pb-0 md:pb-20"&#62;
&#60;div class="flex flex-wrap mx-[-15px] lg:mx-[-20px] xl:mx-0 items-center"&#62;
&#60;div class="md:w-5/12 lg:w-5/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] lg:!px-[20px] xl:px-0 max-w-full xl:!ml-[8.33333333%] max-lg:!hidden xl:!flex lg:!flex !relative !self-end"&#62;
&#60;div class="shape !rounded-[50%] !bg-[#e0e9fa] rellax !w-[12.5rem] !h-[12.5rem] hidden xl:block lg:block z-[1] absolute" data-rellax-speed="1" style="top: 7rem; left: 1rem"&#62;&#60;/div&#62;
&#60;figure class=" relative z-[2]"&#62;&#60;img class="w-full max-w-full !h-auto" src="../../assets/img/photos/co1.png" alt="image"&#62;&#60;/figure&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;div class="lg:w-6/12 xl:w-6/12 xxl:w-5/12 w-full flex-[0_0_auto] !px-[15px] lg:!px-[20px] xl:px-0 max-w-full xl:!ml-[8.33333333%]"&#62;
&#60;div class="swiper-container dots-start dots-closer !mt-6 !mb-6 relative !z-10" data-margin="30" data-dots="true"&#62;
&#60;div class="swiper"&#62;
&#60;div class="swiper-wrapper"&#62;
&#60;div class="swiper-slide"&#62;
&#60;blockquote class="icon relative p-0 border-0 text-[1rem] !leading-[1.7] font-medium m-[0_0_1rem] before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]"&#62;
&#60;p&#62;&#8220;Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur nulla dapibus curabitur blandit.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;div class="info !pl-0"&#62;
&#60;h5 class="!mb-1 text-[.9rem] !leading-[1.5]"&#62;Coriss Ambady&#60;/h5&#62;
&#60;p class="!mb-0 text-[0.8rem]"&#62;Financial Analyst&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!--/.swiper-slide --&#62;
&#60;div class="swiper-slide"&#62;
&#60;blockquote class="icon relative p-0 border-0 text-[1rem] !leading-[1.7] font-medium m-[0_0_1rem] before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]"&#62;
&#60;p&#62;&#8220;Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur adipiscing dapibus curabitur blandit.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;div class="info !pl-0"&#62;
&#60;h5 class="!mb-1 text-[.9rem] !leading-[1.5]"&#62;Cory Zamora&#60;/h5&#62;
&#60;p class="!mb-0 text-[0.8rem]"&#62;Marketing Specialist&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!--/.swiper-slide --&#62;
&#60;div class="swiper-slide"&#62;
&#60;blockquote class="icon relative p-0 border-0 text-[1rem] !leading-[1.7] font-medium m-[0_0_1rem] before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]"&#62;
&#60;p&#62;&#8220;Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur adipiscing dapibus curabitur blandit.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;div class="info !pl-0"&#62;
&#60;h5 class="!mb-1 text-[.9rem] !leading-[1.5]"&#62;Nikolas Brooten&#60;/h5&#62;
&#60;p class="!mb-0 text-[0.8rem]"&#62;Sales Manager&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!--/.swiper-slide --&#62;
&#60;/div&#62;
&#60;!--/.swiper-wrapper --&#62;
&#60;/div&#62;
&#60;!-- /.swiper --&#62;
&#60;/div&#62;
&#60;!-- /.swiper-container --&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;/div&#62;
&#60;!--/.row --&#62;
&#60;/div&#62;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-9" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
<div class="container py-[4.5rem] xl:!py-[6rem] lg:!py-[6rem] md:!py-[6rem] xl:!pt-[10rem] lg:!pt-[10rem] md:!pt-[10rem]">
<div class="card !bg-[#edf2fc]">
<div class="card-body xl:!p-[2.5rem] lg:!p-[2.5rem] md:!p-[2.5rem] xxl:!py-24 p-[40px] !relative">
<div class="absolute hidden lg:block xl:block" style="bottom:0; left:10%; width: 28%; z-index:2">
<figure class="m-0 p-0"><img class="w-full max-w-full !h-auto" src="../../assets/img/photos/co2.png" alt="image"></figure>
</div>
<div class="flex flex-wrap max-md:mx-[-15px] xl:mx-[-35px] mx-0 !text-center">
<div class="lg:w-7/12 lg:!ml-[41.66666667%] xl:w-6/12 xl:!ml-[41.66666667%] w-full flex-[0_0_auto] max-md:!px-[15px] xl:!px-[35px] px-0 max-w-full">
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"></span>
<blockquote class="!pl-0 text-[1rem] !mb-0 border-0 !leading-[1.7] font-medium m-[0_0_1rem]">
<p>“Fusce dapibus tellus ac cursus commodo, tortor mauris condimentum nibh ut fermentum massa, justo sit amet vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed”</p>
<div class="flex items-center justify-center !text-center">
<div class="info p-0">
<h5 class="!mb-1 text-[.9rem] !leading-[1.5]">Coriss Ambady</h5>
<div class="!text-[0.65rem] uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc] !mb-0">Financial Analyst</div>
</div>
</div>
</blockquote>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /.container -->
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
<div class="card">
<div class="card-footer border-0 !relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-9">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-9" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;section class=&quot;wrapper !bg-[#ffffff] &quot;&gt;
&#60;div class="container py-[4.5rem] xl:!py-[6rem] lg:!py-[6rem] md:!py-[6rem] xl:!pt-[10rem] lg:!pt-[10rem] md:!pt-[10rem]"&#62;
&#60;div class="card !bg-[#edf2fc]"&#62;
&#60;div class="card-body xl:!p-[2.5rem] lg:!p-[2.5rem] md:!p-[2.5rem] xxl:!py-24 p-[40px] !relative"&#62;
&#60;div class="absolute hidden lg:block xl:block" style="bottom:0; left:10%; width: 28%; z-index:2"&#62;
&#60;figure class="m-0 p-0"&#62;&#60;img class="w-full max-w-full !h-auto" src="../../assets/img/photos/co2.png" alt="image"&#62;&#60;/figure&#62;
&#60;/div&#62;
&#60;div class="flex flex-wrap max-md:mx-[-15px] xl:mx-[-35px] mx-0 !text-center"&#62;
&#60;div class="lg:w-7/12 lg:!ml-[41.66666667%] xl:w-6/12 xl:!ml-[41.66666667%] w-full flex-[0_0_auto] max-md:!px-[15px] xl:!px-[35px] px-0 max-w-full"&#62;
&#60;span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"&#62;&#60;/span&#62;
&#60;blockquote class="!pl-0 text-[1rem] !mb-0 border-0 !leading-[1.7] font-medium m-[0_0_1rem]"&#62;
&#60;p&#62;&#8220;Fusce dapibus tellus ac cursus commodo, tortor mauris condimentum nibh ut fermentum massa, justo sit amet vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed&#8221;&#60;/p&#62;
&#60;div class="flex items-center justify-center !text-center"&#62;
&#60;div class="info p-0"&#62;
&#60;h5 class="!mb-1 text-[.9rem] !leading-[1.5]"&#62;Coriss Ambady&#60;/h5&#62;
&#60;div class="!text-[0.65rem] uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc] !mb-0"&#62;Financial Analyst&#60;/div&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!-- /column --&#62;
&#60;/div&#62;
&#60;!-- /.row --&#62;
&#60;/div&#62;
&#60;!--/.card-body --&#62;
&#60;/div&#62;
&#60;!--/.card --&#62;
&#60;/div&#62;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-10" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
<div class="!relative">
<div class="shape !rounded-[50%] bg-line primary rellax !w-[8rem] !h-[8rem] absolute opacity-50" data-rellax-speed="1" style="top: -2rem; right: -2.7rem; z-index:0;"></div>
<div class="shape !rounded-[50%] !bg-[#edf2fc] rellax !w-[8rem] !h-[8rem] absolute" data-rellax-speed="1" style="bottom: -1rem; left: -3rem; z-index:0;"></div>
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
<div class="flex flex-wrap mx-0">
<div class="lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] max-w-full image-wrapper bg-image rounded-t-[0.4rem] rounded-lg-start bg-cover bg-[center_center] bg-no-repeat bg-scroll relative z-0 xl:rounded-tl-[0.4rem] xl:rounded-tr-none xl:rounded-br-none xl:rounded-bl-[0.4rem] lg:rounded-tl-[0.4rem] lg:rounded-tr-none lg:rounded-br-none lg:rounded-bl-[0.4rem] md:min-h-[25rem] max-md:min-h-[25rem]" data-image-src="../../assets/img/photos/tm1.jpg">
</div>
<!--/column -->
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
<div class="!p-10 md:!p-12 xl:!p-[4rem] lg:!p-[4rem]">
<div class="swiper-container dots-closer !mb-6 relative z-10" data-margin="30" data-dots="true">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<blockquote class="icon icon-top text-[1rem] !text-center relative pt-[3.75rem] p-0 border-0 !leading-[1.7] font-medium m-[0_0_1rem] before:translate-x-[-52%] before:left-2/4 before:content-['\201c'] before:!text-[#aab0bc] before:opacity-30 before:text-[6.5rem] before:font-normal before:absolute before:leading-none before:z-[1] before:top-0">
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio.”</p>
<div class="flex items-center justify-center !text-center">
<div class="info !pl-0">
<h5 class="!mb-1 text-[.9rem] !leading-[1.5]">Coriss Ambady</h5>
<p class="!mb-0 text-[0.8rem]">Financial Analyst</p>
</div>
</div>
</blockquote>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<blockquote class="icon icon-top text-[1rem] !text-center relative pt-[3.75rem] p-0 border-0 !leading-[1.7] font-medium m-[0_0_1rem] before:translate-x-[-52%] before:left-2/4 before:content-['\201c'] before:!text-[#aab0bc] before:opacity-30 before:text-[6.5rem] before:font-normal before:absolute before:leading-none before:z-[1] before:top-0">
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio.”</p>
<div class="flex items-center justify-center !text-center">
<div class="info !pl-0">
<h5 class="!mb-1 text-[.9rem] !leading-[1.5]">Cory Zamora</h5>
<p class="!mb-0 text-[0.8rem]">Marketing Specialist</p>
</div>
</div>
</blockquote>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<blockquote class="icon icon-top text-[1rem] !text-center relative pt-[3.75rem] p-0 border-0 !leading-[1.7] font-medium m-[0_0_1rem] before:translate-x-[-52%] before:left-2/4 before:content-['\201c'] before:!text-[#aab0bc] before:opacity-30 before:text-[6.5rem] before:font-normal before:absolute before:leading-none before:z-[1] before:top-0">
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio.”</p>
<div class="flex items-center justify-center !text-center">
<div class="info !pl-0">
<h5 class="!mb-1 text-[.9rem] !leading-[1.5]">Nikolas Brooten</h5>
<p class="!mb-0 text-[0.8rem]">Sales Manager</p>
</div>
</div>
</blockquote>
</div>
<!--/.swiper-slide -->
</div>
<!--/.swiper-wrapper -->
</div>
<!-- /.swiper -->
</div>
<!-- /.swiper-container -->
</div>
<!--/div -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.card -->
</div>
<!-- /div -->
</div>
<!-- /.container -->
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
<div class="card">
<div class="card-footer border-0 !relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-10">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-10" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;section class=&quot;wrapper !bg-[#ffffff] &quot;&gt;
&#60;div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20"&#62;
&#60;div class="!relative"&#62;
&#60;div class="shape !rounded-[50%] bg-line primary rellax !w-[8rem] !h-[8rem] absolute opacity-50" data-rellax-speed="1" style="top: -2rem; right: -2.7rem; z-index:0;"&#62;&#60;/div&#62;
&#60;div class="shape !rounded-[50%] !bg-[#edf2fc] rellax !w-[8rem] !h-[8rem] absolute" data-rellax-speed="1" style="bottom: -1rem; left: -3rem; z-index:0;"&#62;&#60;/div&#62;
&#60;div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"&#62;
&#60;div class="flex flex-wrap mx-0"&#62;
&#60;div class="lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] max-w-full image-wrapper bg-image rounded-t-[0.4rem] rounded-lg-start bg-cover bg-[center_center] bg-no-repeat bg-scroll relative z-0 xl:rounded-tl-[0.4rem] xl:rounded-tr-none xl:rounded-br-none xl:rounded-bl-[0.4rem] lg:rounded-tl-[0.4rem] lg:rounded-tr-none lg:rounded-br-none lg:rounded-bl-[0.4rem] md:min-h-[25rem] max-md:min-h-[25rem]" data-image-src="../../assets/img/photos/tm1.jpg"&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full"&#62;
&#60;div class="!p-10 md:!p-12 xl:!p-[4rem] lg:!p-[4rem]"&#62;
&#60;div class="swiper-container dots-closer !mb-6 relative z-10" data-margin="30" data-dots="true"&#62;
&#60;div class="swiper"&#62;
&#60;div class="swiper-wrapper"&#62;
&#60;div class="swiper-slide"&#62;
&#60;blockquote class="icon icon-top text-[1rem] !text-center relative pt-[3.75rem] p-0 border-0 !leading-[1.7] font-medium m-[0_0_1rem] before:translate-x-[-52%] before:left-2/4 before:content-['\201c'] before:!text-[#aab0bc] before:opacity-30 before:text-[6.5rem] before:font-normal before:absolute before:leading-none before:z-[1] before:top-0"&#62;
&#60;p&#62;&#8220;Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio.&#8221;&#60;/p&#62;
&#60;div class="flex items-center justify-center !text-center"&#62;
&#60;div class="info !pl-0"&#62;
&#60;h5 class="!mb-1 text-[.9rem] !leading-[1.5]"&#62;Coriss Ambady&#60;/h5&#62;
&#60;p class="!mb-0 text-[0.8rem]"&#62;Financial Analyst&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!--/.swiper-slide --&#62;
&#60;div class="swiper-slide"&#62;
&#60;blockquote class="icon icon-top text-[1rem] !text-center relative pt-[3.75rem] p-0 border-0 !leading-[1.7] font-medium m-[0_0_1rem] before:translate-x-[-52%] before:left-2/4 before:content-['\201c'] before:!text-[#aab0bc] before:opacity-30 before:text-[6.5rem] before:font-normal before:absolute before:leading-none before:z-[1] before:top-0"&#62;
&#60;p&#62;&#8220;Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio.&#8221;&#60;/p&#62;
&#60;div class="flex items-center justify-center !text-center"&#62;
&#60;div class="info !pl-0"&#62;
&#60;h5 class="!mb-1 text-[.9rem] !leading-[1.5]"&#62;Cory Zamora&#60;/h5&#62;
&#60;p class="!mb-0 text-[0.8rem]"&#62;Marketing Specialist&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!--/.swiper-slide --&#62;
&#60;div class="swiper-slide"&#62;
&#60;blockquote class="icon icon-top text-[1rem] !text-center relative pt-[3.75rem] p-0 border-0 !leading-[1.7] font-medium m-[0_0_1rem] before:translate-x-[-52%] before:left-2/4 before:content-['\201c'] before:!text-[#aab0bc] before:opacity-30 before:text-[6.5rem] before:font-normal before:absolute before:leading-none before:z-[1] before:top-0"&#62;
&#60;p&#62;&#8220;Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio.&#8221;&#60;/p&#62;
&#60;div class="flex items-center justify-center !text-center"&#62;
&#60;div class="info !pl-0"&#62;
&#60;h5 class="!mb-1 text-[.9rem] !leading-[1.5]"&#62;Nikolas Brooten&#60;/h5&#62;
&#60;p class="!mb-0 text-[0.8rem]"&#62;Sales Manager&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!--/.swiper-slide --&#62;
&#60;/div&#62;
&#60;!--/.swiper-wrapper --&#62;
&#60;/div&#62;
&#60;!-- /.swiper --&#62;
&#60;/div&#62;
&#60;!-- /.swiper-container --&#62;
&#60;/div&#62;
&#60;!--/div --&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;/div&#62;
&#60;!--/.row --&#62;
&#60;/div&#62;
&#60;!-- /.card --&#62;
&#60;/div&#62;
&#60;!-- /div --&#62;
&#60;/div&#62;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-11" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
<div class="flex flex-wrap mx-[-15px] !text-white !text-center">
<div class="xl:w-10/12 flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !mb-[4.5rem] xl:!mb-[-1.5rem] lg:!mb-[-1.5rem]">
<div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-400 [background-size:100%] bg-[center_center] bg-no-repeat !bg-scroll relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:rounded-[0.4rem] before:left-0 before:top-0 before:bg-[rgba(30,34,40,.4)]" data-image-src="../../assets/img/photos/bg2.jpg">
<div class="card-body p-9 xl:!p-14">
<div class="flex flex-wrap mx-0">
<div class="xxl:w-9/12 w-full flex-[0_0_auto] max-w-full !mx-auto">
<div class="swiper-container dots-light dots-closer !mb-6 relative z-10" data-margin="30" data-dots="true">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"></span>
<blockquote class="!border-0 text-[1rem] !mb-2">
<p>“Vivamus sagittis lacus augue laoreet rutrum faucibus auctor vestibulum ligula porta felis, euismod semper cras justo odio consectetur.”</p>
<div class="flex items-center justify-center !text-center">
<div class="info !pl-0">
<h5 class="!mb-1 !text-white">Coriss Ambady</h5>
<p class="!mb-0 text-[0.8rem]">Financial Analyst</p>
</div>
</div>
</blockquote>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"></span>
<blockquote class="!border-0 text-[1rem] !mb-2">
<p>“Vivamus sagittis lacus augue laoreet rutrum faucibus auctor vestibulum ligula porta felis, euismod semper cras justo odio consectetur.”</p>
<div class="flex items-center justify-center !text-center">
<div class="info !pl-0">
<h5 class="!mb-1 !text-white">Cory Zamora</h5>
<p class="!mb-0 text-[0.8rem]">Marketing Specialist</p>
</div>
</div>
</blockquote>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"></span>
<blockquote class="!border-0 text-[1rem] !mb-2">
<p>“Vivamus sagittis lacus augue laoreet rutrum faucibus auctor vestibulum ligula porta felis, euismod semper cras justo odio consectetur.”</p>
<div class="flex items-center justify-center !text-center">
<div class="info !pl-0">
<h5 class="!mb-1 !text-white">Nikolas Brooten</h5>
<p class="!mb-0 text-[0.8rem]">Sales Manager</p>
</div>
</div>
</blockquote>
</div>
<!--/.swiper-slide -->
</div>
<!--/.swiper-wrapper -->
</div>
<!-- /.swiper -->
</div>
<!-- /.swiper-container -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
<div class="card">
<div class="card-footer border-0 !relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-11">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-11" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;section class=&quot;wrapper !bg-[#ffffff] &quot;&gt;
&#60;div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20"&#62;
&#60;div class="flex flex-wrap mx-[-15px] !text-white !text-center"&#62;
&#60;div class="xl:w-10/12 flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !mb-[4.5rem] xl:!mb-[-1.5rem] lg:!mb-[-1.5rem]"&#62;
&#60;div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-400 [background-size:100%] bg-[center_center] bg-no-repeat !bg-scroll relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:rounded-[0.4rem] before:left-0 before:top-0 before:bg-[rgba(30,34,40,.4)]" data-image-src="../../assets/img/photos/bg2.jpg"&#62;
&#60;div class="card-body p-9 xl:!p-14"&#62;
&#60;div class="flex flex-wrap mx-0"&#62;
&#60;div class="xxl:w-9/12 w-full flex-[0_0_auto] max-w-full !mx-auto"&#62;
&#60;div class="swiper-container dots-light dots-closer !mb-6 relative z-10" data-margin="30" data-dots="true"&#62;
&#60;div class="swiper"&#62;
&#60;div class="swiper-wrapper"&#62;
&#60;div class="swiper-slide"&#62;
&#60;span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"&#62;&#60;/span&#62;
&#60;blockquote class="!border-0 text-[1rem] !mb-2"&#62;
&#60;p&#62;&#8220;Vivamus sagittis lacus augue laoreet rutrum faucibus auctor vestibulum ligula porta felis, euismod semper cras justo odio consectetur.&#8221;&#60;/p&#62;
&#60;div class="flex items-center justify-center !text-center"&#62;
&#60;div class="info !pl-0"&#62;
&#60;h5 class="!mb-1 !text-white"&#62;Coriss Ambady&#60;/h5&#62;
&#60;p class="!mb-0 text-[0.8rem]"&#62;Financial Analyst&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!--/.swiper-slide --&#62;
&#60;div class="swiper-slide"&#62;
&#60;span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"&#62;&#60;/span&#62;
&#60;blockquote class="!border-0 text-[1rem] !mb-2"&#62;
&#60;p&#62;&#8220;Vivamus sagittis lacus augue laoreet rutrum faucibus auctor vestibulum ligula porta felis, euismod semper cras justo odio consectetur.&#8221;&#60;/p&#62;
&#60;div class="flex items-center justify-center !text-center"&#62;
&#60;div class="info !pl-0"&#62;
&#60;h5 class="!mb-1 !text-white"&#62;Cory Zamora&#60;/h5&#62;
&#60;p class="!mb-0 text-[0.8rem]"&#62;Marketing Specialist&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!--/.swiper-slide --&#62;
&#60;div class="swiper-slide"&#62;
&#60;span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"&#62;&#60;/span&#62;
&#60;blockquote class="!border-0 text-[1rem] !mb-2"&#62;
&#60;p&#62;&#8220;Vivamus sagittis lacus augue laoreet rutrum faucibus auctor vestibulum ligula porta felis, euismod semper cras justo odio consectetur.&#8221;&#60;/p&#62;
&#60;div class="flex items-center justify-center !text-center"&#62;
&#60;div class="info !pl-0"&#62;
&#60;h5 class="!mb-1 !text-white"&#62;Nikolas Brooten&#60;/h5&#62;
&#60;p class="!mb-0 text-[0.8rem]"&#62;Sales Manager&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!--/.swiper-slide --&#62;
&#60;/div&#62;
&#60;!--/.swiper-wrapper --&#62;
&#60;/div&#62;
&#60;!-- /.swiper --&#62;
&#60;/div&#62;
&#60;!-- /.swiper-container --&#62;
&#60;/div&#62;
&#60;!-- /column --&#62;
&#60;/div&#62;
&#60;!-- /.row --&#62;
&#60;/div&#62;
&#60;!--/.card-body --&#62;
&#60;/div&#62;
&#60;!--/.card --&#62;
&#60;/div&#62;
&#60;!-- /column --&#62;
&#60;/div&#62;
&#60;!-- /.row --&#62;
&#60;/div&#62;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-12" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
<div class="flex flex-wrap mx-[-15px]">
<div class="md:w-10/12 lg:w-8/12 xl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
<div class="swiper-container dots-closer !text-center !mb-6 relative z-10" data-margin="30" data-dots="true">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<blockquote class="border-0 !text-[1rem] !leading-[1.7] !font-medium m-[0_0_1rem]">
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur adipiscing dapibus.”</p>
<div class="flex items-center text-left justify-center">
<img class="!rounded-[50%] !w-[3.5rem]" src="../../assets/img/avatars/te1.jpg" alt="image">
<div class="info !pl-4">
<h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Coriss Ambady</h5>
<p class="!mb-0 text-[.85rem]">Financial Analyst</p>
</div>
</div>
</blockquote>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<blockquote class="border-0 !text-[1rem] !leading-[1.7] !font-medium m-[0_0_1rem]">
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur adipiscing dapibus.”</p>
<div class="flex items-center text-left justify-center">
<img class="!rounded-[50%] !w-[3.5rem]" src="../../assets/img/avatars/te2.jpg" alt="image">
<div class="info !pl-4">
<h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Cory Zamora</h5>
<p class="!mb-0 text-[.85rem]">Marketing Specialist</p>
</div>
</div>
</blockquote>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<blockquote class="border-0 !text-[1rem] !leading-[1.7] !font-medium m-[0_0_1rem]">
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur adipiscing dapibus.”</p>
<div class="flex items-center text-left justify-center">
<img class="!rounded-[50%] !w-[3.5rem]" src="../../assets/img/avatars/te3.jpg" alt="image">
<div class="info !pl-4">
<h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Nikolas Brooten</h5>
<p class="!mb-0 text-[.85rem]">Sales Manager</p>
</div>
</div>
</blockquote>
</div>
<!--/.swiper-slide -->
</div>
<!--/.swiper-wrapper -->
</div>
<!-- /.swiper -->
</div>
<!-- /.swiper-container -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
<div class="card">
<div class="card-footer border-0 !relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-12">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-12" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;section class=&quot;wrapper !bg-[#ffffff] &quot;&gt;
&#60;div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20"&#62;
&#60;div class="flex flex-wrap mx-[-15px]"&#62;
&#60;div class="md:w-10/12 lg:w-8/12 xl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto"&#62;
&#60;div class="swiper-container dots-closer !text-center !mb-6 relative z-10" data-margin="30" data-dots="true"&#62;
&#60;div class="swiper"&#62;
&#60;div class="swiper-wrapper"&#62;
&#60;div class="swiper-slide"&#62;
&#60;blockquote class="border-0 !text-[1rem] !leading-[1.7] !font-medium m-[0_0_1rem]"&#62;
&#60;p&#62;&#8220;Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur adipiscing dapibus.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left justify-center"&#62;
&#60;img class="!rounded-[50%] !w-[3.5rem]" src="../../assets/img/avatars/te1.jpg" alt="image"&#62;
&#60;div class="info !pl-4"&#62;
&#60;h5 class="!mb-1 text-[.95rem] !leading-[1.5]"&#62;Coriss Ambady&#60;/h5&#62;
&#60;p class="!mb-0 text-[.85rem]"&#62;Financial Analyst&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!--/.swiper-slide --&#62;
&#60;div class="swiper-slide"&#62;
&#60;blockquote class="border-0 !text-[1rem] !leading-[1.7] !font-medium m-[0_0_1rem]"&#62;
&#60;p&#62;&#8220;Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur adipiscing dapibus.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left justify-center"&#62;
&#60;img class="!rounded-[50%] !w-[3.5rem]" src="../../assets/img/avatars/te2.jpg" alt="image"&#62;
&#60;div class="info !pl-4"&#62;
&#60;h5 class="!mb-1 text-[.95rem] !leading-[1.5]"&#62;Cory Zamora&#60;/h5&#62;
&#60;p class="!mb-0 text-[.85rem]"&#62;Marketing Specialist&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!--/.swiper-slide --&#62;
&#60;div class="swiper-slide"&#62;
&#60;blockquote class="border-0 !text-[1rem] !leading-[1.7] !font-medium m-[0_0_1rem]"&#62;
&#60;p&#62;&#8220;Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur adipiscing dapibus.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left justify-center"&#62;
&#60;img class="!rounded-[50%] !w-[3.5rem]" src="../../assets/img/avatars/te3.jpg" alt="image"&#62;
&#60;div class="info !pl-4"&#62;
&#60;h5 class="!mb-1 text-[.95rem] !leading-[1.5]"&#62;Nikolas Brooten&#60;/h5&#62;
&#60;p class="!mb-0 text-[.85rem]"&#62;Sales Manager&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!--/.swiper-slide --&#62;
&#60;/div&#62;
&#60;!--/.swiper-wrapper --&#62;
&#60;/div&#62;
&#60;!-- /.swiper --&#62;
&#60;/div&#62;
&#60;!-- /.swiper-container --&#62;
&#60;/div&#62;
&#60;!-- /column --&#62;
&#60;/div&#62;
&#60;!-- /.row --&#62;
&#60;/div&#62;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-13" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
<div class="container-card pt-[4.5rem] xl:pt-24 lg:pt-24 md:pt-24">
<div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-light-500 pb-20 [background-size:100%] bg-[center_center] bg-no-repeat !bg-scroll relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.5)] xxl:rounded-[.8rem] rounded-0" data-image-src="../../assets/img/photos/bg22.png">
<div class="card-body py-[4.5rem] px-0">
<div class="container">
<div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] xl:!mt-0 lg:!mt-0">
<div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] xl:!mt-0 lg:!mt-0 max-w-full text-center lg:text-left xl:text-left">
<h3 class="xl:!text-[1.8rem] !text-[calc(1.305rem_+_0.66vw)] font-bold !leading-[1.3] !tracking-[normal] !mb-3 xxl:!pr-20">We are proud of our works</h3>
<p class="lead !text-[1.05rem] !leading-[1.6] font-medium !mb-0 xxl:!pr-10">We bring solutions to make life easier for our customers.</p>
</div>
<!-- /column -->
<div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] xl:!mt-2 lg:!mt-2 max-w-full">
<div class="flex flex-wrap mx-[-15px] items-center counter-wrapper !mt-[-30px] !text-center">
<div class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256.1 256.01" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/solid/target.svg" class="svg-inject icon-svg !w-[2.2rem] !h-[2.2rem] solid-duo text-grape-fuchsia !mb-3 m-[0_auto]"><path class="fill-secondary" d="M178.66 79.37L166.93 91.1a76.68 76.68 0 014.91 11.52 85.77 85.77 0 0114.93-1.28h1.39a93.65 93.65 0 00-9.5-21.97zM0 128a96.1 96.1 0 00109.65 95 82.93 82.93 0 01-5.65-15.42 67 67 0 01-8 .43A80 80 0 0196 48a79 79 0 0137 9.17l11.73-11.73A94.73 94.73 0 0096 32a96.14 96.14 0 00-96 96z"></path><path class="fill-secondary" d="M37.33 128A58.78 58.78 0 0096 186.68a47.26 47.26 0 005.44-.32A82.71 82.71 0 01103 170a37.32 37.32 0 01-7 .64 42.67 42.67 0 010-85.34 32.88 32.88 0 018 .84l12.91-12.91a57 57 0 00-20.91-4A58.81 58.81 0 0037.33 128z"></path><path class="fill-secondary" d="M96 106.68A21.33 21.33 0 10117.33 128 21.39 21.39 0 0096 106.68zm0 26.66a5.33 5.33 0 115.33-5.33 5.28 5.28 0 01-5.33 5.33z"></path><path class="fill-primary" d="M96.1 136a8 8 0 01-5.67-13.65L159.76 53a8 8 0 0111.31 11.31l-69.33 69.33A8 8 0 0196.1 136z"></path><path class="fill-primary" d="M194.77 64H168.1a8 8 0 01-8-8V29.34a8.08 8.08 0 012.33-5.67l21.33-21.33A8 8 0 01197.42 8v18.68h18.68a8 8 0 015.66 13.66l-21.33 21.33a8 8 0 01-5.66 2.33zm-8 53.34a69.34 69.34 0 1069.33 69.34 69.4 69.4 0 00-69.33-69.34zm29.87 56.11L182 210.78a8 8 0 01-11.09.64l-18.67-16a8 8 0 1110.41-12.15l12.84 11 29.44-31.69a8 8 0 0111.74 10.88z"></path></svg>
<h3 class="counter xl:!text-[2rem] !text-[calc(1.325rem_+_0.9vw)] !tracking-[normal] !leading-none !mb-2">1000+</h3>
<p class="!mb-0">Completed Projects</p>
</div>
<!--/column -->
<div class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 245.34" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/solid/bar-chart.svg" class="svg-inject icon-svg !w-[2.2rem] !h-[2.2rem] solid-duo text-grape-fuchsia !mb-3 m-[0_auto]"><path class="fill-secondary" d="M32 106.67A10.67 10.67 0 0124.91 88l48-42.67a10.62 10.62 0 018.37-2.61l83 10.07 47-44.56A10.66 10.66 0 01226 23.74l-50.67 48a10.73 10.73 0 01-8.61 2.85L83.49 64.5 39.09 104a10.61 10.61 0 01-7.09 2.7z"></path><path class="fill-secondary" d="M226.67 53.34A8 8 0 01221 51l-37.32-37.34A8 8 0 01189.33 0h37.33a8 8 0 018 8v37.33a8 8 0 01-4.95 7.39 7.66 7.66 0 01-3.04.62z"></path><path class="fill-primary" d="M74.67 184v29.33h-64V184A13.33 13.33 0 0124 170.67h37.33A13.34 13.34 0 0174.67 184zM160 120v93.33H96V120a13.33 13.33 0 0113.33-13.33h37.33A13.33 13.33 0 01160 120zm85.33 21.34v72h-64v-72A13.32 13.32 0 01194.66 128H232a13.31 13.31 0 0113.33 13.34z"></path><path class="fill-secondary" d="M248 245.34H8a8 8 0 010-16h240a8 8 0 010 16z"></path></svg>
<h3 class="counter xl:!text-[2rem] !text-[calc(1.325rem_+_0.9vw)] !tracking-[normal] !leading-none !mb-2">4x</h3>
<p class="!mb-0">Revenue Growth</p>
</div>
<!--/column -->
<div class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/solid/employees.svg" class="svg-inject icon-svg !w-[2.2rem] !h-[2.2rem] solid-duo text-grape-fuchsia !mb-3 m-[0_auto]"><path class="fill-secondary" d="M72.11 86.51l-3.52-21 1.41-1.4-4.36-4.48a24.12 24.12 0 01-5.78-24.43c.11-.32.2-.53.32-.85l-1.4-.21-9-18.88a8 8 0 00-14.49 0l-8.88 19-19.69 3.07a8 8 0 00-6.29 5.44 7.94 7.94 0 001.92 8.11l14.51 14.83-3.42 21A8.07 8.07 0 0021.33 96a8.33 8.33 0 004-1l17.49-9.81 17.6 9.6a8.2 8.2 0 008.53-.43 8 8 0 003.21-7.89zm183.46-44.06a7.85 7.85 0 00-6.4-5.33l-19.73-3-9-18.88a8 8 0 00-14.5 0l-8.86 19-1.17.21c0 .11.11.21.11.32a23.76 23.76 0 01-5.44 24.32L185.81 64l1.71 1.71-3.41 21A8.07 8.07 0 00192 96a8.33 8.33 0 004-1l17.49-9.81 17.6 9.6a8.2 8.2 0 008.53-.43 8.06 8.06 0 003.2-7.89l-3.52-21 14.51-14.92a8.09 8.09 0 001.81-8.13z"></path><path class="fill-primary" d="M100.18 106.67a8 8 0 01-7.91-9.25l4.61-28.8L77 48.37a8 8 0 014.46-13.51l27.09-4.22 12.11-26a8 8 0 017.2-4.64 8 8 0 017.23 4.58l12.29 25.9 27.12 4.05A8 8 0 01179.09 48l-19.78 20.38 4.8 28.77a8 8 0 01-11.74 8.34l-24.19-13.25-24.12 13.42a7.94 7.94 0 01-3.88 1z"></path><circle class="fill-secondary" cx="42.67" cy="160" r="21.33"></circle><path class="fill-secondary" d="M71.15 196.27A44.71 44.71 0 0053.34 232v2.67H8a8.06 8.06 0 01-8-8v-5.33A29.32 29.32 0 0129.33 192H56a29.13 29.13 0 0115.15 4.27z"></path><circle class="fill-secondary" cx="213.33" cy="160" r="21.33"></circle><path class="fill-secondary" d="M256 221.33v5.33a8.07 8.07 0 01-8 8h-45.33V232a44.69 44.69 0 00-17.81-35.73A29.07 29.07 0 01200 192h26.67A29.32 29.32 0 01256 221.33z"></path><circle class="fill-primary" cx="128" cy="154.67" r="32"></circle><path class="fill-primary" d="M157.33 202.67H98.66A29.35 29.35 0 0069.33 232v16a8 8 0 008 8h101.33a8 8 0 008-8v-16a29.35 29.35 0 00-29.33-29.33z"></path></svg>
<h3 class="counter xl:!text-[2rem] !text-[calc(1.325rem_+_0.9vw)] !tracking-[normal] !leading-none !mb-2">99.7%</h3>
<p class="!mb-0">Customer Satisfaction</p>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /.container-card -->
<div class="container">
<div class="itemgrid !mb-20">
<div class="flex flex-wrap mx-[-15px] isotope !mt-[-8rem]">
<div class="item md:w-6/12 lg:w-6/12 xl:w-3/12 flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full">
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] card-border-bottom !border-[#c5d7f6] after:!border-t-[calc(0.4rem_-_6px)] after:!border-b-[6px]">
<div class="card-body flex-[1_1_auto] p-[40px]">
<blockquote class="!text-[.85rem] !leading-[1.7] font-medium m-[0_0_1rem] !pl-4 icon !mb-0 relative p-0 border-0">
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta. Cras mattis consectetur.”</p>
<div class="flex items-center text-left">
<div class="info !pl-0">
<h5 class="!mb-1 text-[.9rem] !leading-[1.5]">Coriss Ambady</h5>
<p class="!mb-0 text-[0.8rem]">Financial Analyst</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!--/column -->
<div class="item md:w-6/12 lg:w-6/12 xl:w-3/12 flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full">
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] card-border-bottom !border-[#c5d7f6] after:!border-t-[calc(0.4rem_-_6px)] after:!border-b-[6px]">
<div class="card-body flex-[1_1_auto] p-[40px]">
<blockquote class="!text-[.85rem] !leading-[1.7] font-medium m-[0_0_1rem] !pl-4 icon !mb-0 relative p-0 border-0">
<p>“Fusce dapibus, tellus ac cursus tortor mauris condimentum fermentum massa justo sit amet purus sit amet fermentum.”</p>
<div class="flex items-center text-left">
<div class="info !pl-0">
<h5 class="!mb-1 text-[.9rem] !leading-[1.5]">Cory Zamora</h5>
<p class="!mb-0 text-[0.8rem]">Marketing Specialist</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!--/column -->
<div class="item md:w-6/12 lg:w-6/12 xl:w-3/12 flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full">
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] card-border-bottom !border-[#c5d7f6] after:!border-t-[calc(0.4rem_-_6px)] after:!border-b-[6px]">
<div class="card-body flex-[1_1_auto] p-[40px]">
<blockquote class="!text-[.85rem] !leading-[1.7] font-medium m-[0_0_1rem] !pl-4 icon !mb-0 relative p-0 border-0">
<p>“Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor eu rutrum. Nulla vitae libero.”</p>
<div class="flex items-center text-left">
<div class="info !pl-0">
<h5 class="!mb-1 text-[.9rem] !leading-[1.5]">Nikolas Brooten</h5>
<p class="!mb-0 text-[0.8rem]">Sales Manager</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!--/column -->
<div class="item md:w-6/12 lg:w-6/12 xl:w-3/12 flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full">
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] card-border-bottom !border-[#c5d7f6] after:!border-t-[calc(0.4rem_-_6px)] after:!border-b-[6px]">
<div class="card-body flex-[1_1_auto] p-[40px]">
<blockquote class="!text-[.85rem] !leading-[1.7] font-medium m-[0_0_1rem] !pl-4 icon !mb-0 relative p-0 border-0">
<p>“Etiam adipiscing tincidunt elit convallis felis suscipit ut. Phasellus rhoncus eu tincidunt auctor nullam rutrum, pharetra augue.”</p>
<div class="flex items-center text-left">
<div class="info !pl-0">
<h5 class="!mb-1 text-[.9rem] !leading-[1.5]">Coriss Ambady</h5>
<p class="!mb-0 text-[0.8rem]">Financial Analyst</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!--/column -->
</div>
<!-- /.row -->
</div>
<!-- /.grid-view -->
</div>
<!-- /.container -->
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
<div class="card">
<div class="card-footer border-0 !relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-13">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-13" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;section class=&quot;wrapper !bg-[#ffffff] &quot;&gt;&#60;div class="container-card pt-[4.5rem] xl:pt-24 lg:pt-24 md:pt-24"&#62;
&#60;div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-light-500 pb-20 [background-size:100%] bg-[center_center] bg-no-repeat !bg-scroll relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.5)] xxl:rounded-[.8rem] rounded-0" data-image-src="../../assets/img/photos/bg22.png"&#62;
&#60;div class="card-body py-[4.5rem] px-0"&#62;
&#60;div class="container"&#62;
&#60;div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] xl:!mt-0 lg:!mt-0"&#62;
&#60;div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] xl:!mt-0 lg:!mt-0 max-w-full text-center lg:text-left xl:text-left"&#62;
&#60;h3 class="xl:!text-[1.8rem] !text-[calc(1.305rem_+_0.66vw)] font-bold !leading-[1.3] !tracking-[normal] !mb-3 xxl:!pr-20"&#62;We are proud of our works&#60;/h3&#62;
&#60;p class="lead !text-[1.05rem] !leading-[1.6] font-medium !mb-0 xxl:!pr-10"&#62;We bring solutions to make life easier for our customers.&#60;/p&#62;
&#60;/div&#62;
&#60;!-- /column --&#62;
&#60;div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] xl:!mt-2 lg:!mt-2 max-w-full"&#62;
&#60;div class="flex flex-wrap mx-[-15px] items-center counter-wrapper !mt-[-30px] !text-center"&#62;
&#60;div class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full"&#62;
&#60;img src="../../assets/img/icons/solid/target.svg" class="svg-inject icon-svg !w-[2.2rem] !h-[2.2rem] solid-duo text-grape-fuchsia !mb-3 m-[0_auto]" alt="image"&#62;
&#60;h3 class="counter xl:!text-[2rem] !text-[calc(1.325rem_+_0.9vw)] !tracking-[normal] !leading-none !mb-2"&#62;1000+&#60;/h3&#62;
&#60;p class="!mb-0"&#62;Completed Projects&#60;/p&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;div class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full"&#62;
&#60;img src="../../assets/img/icons/solid/bar-chart.svg" class="svg-inject icon-svg !w-[2.2rem] !h-[2.2rem] solid-duo text-grape-fuchsia !mb-3 m-[0_auto]" alt="image"&#62;
&#60;h3 class="counter xl:!text-[2rem] !text-[calc(1.325rem_+_0.9vw)] !tracking-[normal] !leading-none !mb-2"&#62;4x&#60;/h3&#62;
&#60;p class="!mb-0"&#62;Revenue Growth&#60;/p&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;div class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full"&#62;
&#60;img src="../../assets/img/icons/solid/employees.svg" class="svg-inject icon-svg !w-[2.2rem] !h-[2.2rem] solid-duo text-grape-fuchsia !mb-3 m-[0_auto]" alt="image"&#62;
&#60;h3 class="counter xl:!text-[2rem] !text-[calc(1.325rem_+_0.9vw)] !tracking-[normal] !leading-none !mb-2"&#62;99.7%&#60;/h3&#62;
&#60;p class="!mb-0"&#62;Customer Satisfaction&#60;/p&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;/div&#62;
&#60;!--/.row --&#62;
&#60;/div&#62;
&#60;!-- /column --&#62;
&#60;/div&#62;
&#60;!-- /.row --&#62;
&#60;/div&#62;
&#60;!-- /.container --&#62;
&#60;/div&#62;
&#60;!--/.card-body --&#62;
&#60;/div&#62;
&#60;!--/.card --&#62;
&#60;/div&#62;
&#60;!-- /.container-card --&#62;
&#60;div class="container"&#62;
&#60;div class="itemgrid !mb-20"&#62;
&#60;div class="flex flex-wrap mx-[-15px] isotope !mt-[-8rem]"&#62;
&#60;div class="item md:w-6/12 lg:w-6/12 xl:w-3/12 flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full"&#62;
&#60;div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] card-border-bottom !border-[#c5d7f6] after:!border-t-[calc(0.4rem_-_6px)] after:!border-b-[6px]"&#62;
&#60;div class="card-body flex-[1_1_auto] p-[40px]"&#62;
&#60;blockquote class="!text-[.85rem] !leading-[1.7] font-medium m-[0_0_1rem] !pl-4 icon !mb-0 relative p-0 border-0"&#62;
&#60;p&#62;&#8220;Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta. Cras mattis consectetur.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;div class="info !pl-0"&#62;
&#60;h5 class="!mb-1 text-[.9rem] !leading-[1.5]"&#62;Coriss Ambady&#60;/h5&#62;
&#60;p class="!mb-0 text-[0.8rem]"&#62;Financial Analyst&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!-- /.card-body --&#62;
&#60;/div&#62;
&#60;!-- /.card --&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;div class="item md:w-6/12 lg:w-6/12 xl:w-3/12 flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full"&#62;
&#60;div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] card-border-bottom !border-[#c5d7f6] after:!border-t-[calc(0.4rem_-_6px)] after:!border-b-[6px]"&#62;
&#60;div class="card-body flex-[1_1_auto] p-[40px]"&#62;
&#60;blockquote class="!text-[.85rem] !leading-[1.7] font-medium m-[0_0_1rem] !pl-4 icon !mb-0 relative p-0 border-0"&#62;
&#60;p&#62;&#8220;Fusce dapibus, tellus ac cursus tortor mauris condimentum fermentum massa justo sit amet purus sit amet fermentum.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;div class="info !pl-0"&#62;
&#60;h5 class="!mb-1 text-[.9rem] !leading-[1.5]"&#62;Cory Zamora&#60;/h5&#62;
&#60;p class="!mb-0 text-[0.8rem]"&#62;Marketing Specialist&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!-- /.card-body --&#62;
&#60;/div&#62;
&#60;!-- /.card --&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;div class="item md:w-6/12 lg:w-6/12 xl:w-3/12 flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full"&#62;
&#60;div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] card-border-bottom !border-[#c5d7f6] after:!border-t-[calc(0.4rem_-_6px)] after:!border-b-[6px]"&#62;
&#60;div class="card-body flex-[1_1_auto] p-[40px]"&#62;
&#60;blockquote class="!text-[.85rem] !leading-[1.7] font-medium m-[0_0_1rem] !pl-4 icon !mb-0 relative p-0 border-0"&#62;
&#60;p&#62;&#8220;Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor eu rutrum. Nulla vitae libero.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;div class="info !pl-0"&#62;
&#60;h5 class="!mb-1 text-[.9rem] !leading-[1.5]"&#62;Nikolas Brooten&#60;/h5&#62;
&#60;p class="!mb-0 text-[0.8rem]"&#62;Sales Manager&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!-- /.card-body --&#62;
&#60;/div&#62;
&#60;!-- /.card --&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;div class="item md:w-6/12 lg:w-6/12 xl:w-3/12 flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full"&#62;
&#60;div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] card-border-bottom !border-[#c5d7f6] after:!border-t-[calc(0.4rem_-_6px)] after:!border-b-[6px]"&#62;
&#60;div class="card-body flex-[1_1_auto] p-[40px]"&#62;
&#60;blockquote class="!text-[.85rem] !leading-[1.7] font-medium m-[0_0_1rem] !pl-4 icon !mb-0 relative p-0 border-0"&#62;
&#60;p&#62;&#8220;Etiam adipiscing tincidunt elit convallis felis suscipit ut. Phasellus rhoncus eu tincidunt auctor nullam rutrum, pharetra augue.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;div class="info !pl-0"&#62;
&#60;h5 class="!mb-1 text-[.9rem] !leading-[1.5]"&#62;Coriss Ambady&#60;/h5&#62;
&#60;p class="!mb-0 text-[0.8rem]"&#62;Financial Analyst&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!-- /.card-body --&#62;
&#60;/div&#62;
&#60;!-- /.card --&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;/div&#62;
&#60;!-- /.row --&#62;
&#60;/div&#62;
&#60;!-- /.grid-view --&#62;
&#60;/div&#62;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-14" class="wrapper !bg-[#ffffff] ">
<div class="wrapper image-wrapper bg-image bg-overlay !text-white !mb-[3.5rem] xl:!mb-[4.5rem] lg:!mb-[4.5rem] md:!mb-[4.5rem] bg-no-repeat bg-[center_center] bg-cover relative z-0 !bg-fixed before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,.5)]
" data-image-src="../../assets/img/photos/bg32.jpg">
<div class="container py-[4.5rem] xl:!py-24 lg:!py-24 md:!py-24 !text-center">
<i class="icn-flower !text-white xl:!text-[1.5rem] !text-[calc(1.275rem_+_0.3vw)] opacity-50 before:content-['\e907'] font-CustomFont"></i>
<div class="flex flex-wrap mx-[-15px] !mt-3">
<div class="xl:w-9/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
<div class="swiper-container dots-light dots-closer !mb-6 relative z-10" data-margin="30" data-dots="true">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<blockquote class="border-0 !text-[1.2rem] !mb-0 m-[0_0_1rem] !leading-[1.7] font-medium">
<p>“Fusce dapibus tellus ac cursus commodo, tortor mauris condimentum nibh fermentum massa, justo sit amet vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus.”</p>
<div class="flex items-center text-left justify-center">
<div class="info p-0">
<h6 class="!mb-0 !text-white !text-[.85rem] !leading-[1.55] !tracking-[normal] font-semibold">Julia & David</h6>
</div>
</div>
</blockquote>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<blockquote class="border-0 !text-[1.2rem] !mb-0 m-[0_0_1rem] !leading-[1.7] font-medium">
<p>“Fusce dapibus tellus ac cursus commodo, tortor mauris condimentum nibh fermentum massa, justo sit amet vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus.”</p>
<div class="flex items-center text-left justify-center">
<div class="info p-0">
<h6 class="!mb-0 !text-white !text-[.85rem] !leading-[1.55] !tracking-[normal] font-semibold">Jolene & Andrea</h6>
</div>
</div>
</blockquote>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<blockquote class="border-0 !text-[1.2rem] !mb-0 m-[0_0_1rem] !leading-[1.7] font-medium">
<p>“Fusce dapibus tellus ac cursus commodo, tortor mauris condimentum nibh fermentum massa, justo sit amet vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus.”</p>
<div class="flex items-center text-left justify-center">
<div class="info p-0">
<h6 class="!mb-0 !text-white !text-[.85rem] !leading-[1.55] !tracking-[normal] font-semibold">Eve & Will</h6>
</div>
</div>
</blockquote>
</div>
<!--/.swiper-slide -->
</div>
<!--/.swiper-wrapper -->
</div>
<!--/.swiper -->
</div>
<!-- /.swiper-container -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</div>
<!-- /section -->
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
<div class="card">
<div class="card-footer border-0 !relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-14">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-14" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;section class=&quot;wrapper image-wrapper bg-image bg-overlay !text-white&quot; data-image-src=&quot;./assets/img/photos/bg32.jpg&quot;&gt;
&#60;div class="container py-[4.5rem] xl:!py-24 lg:!py-24 md:!py-24 !text-center"&#62;
&#60;i class="icn-flower !text-white xl:!text-[1.5rem] !text-[calc(1.275rem_+_0.3vw)] opacity-50 before:content-['\e907'] font-CustomFont"&#62;&#60;/i&#62;
&#60;div class="flex flex-wrap mx-[-15px] !mt-3"&#62;
&#60;div class="xl:w-9/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto"&#62;
&#60;div class="swiper-container dots-light dots-closer !mb-6 relative z-10" data-margin="30" data-dots="true"&#62;
&#60;div class="swiper"&#62;
&#60;div class="swiper-wrapper"&#62;
&#60;div class="swiper-slide"&#62;
&#60;blockquote class="border-0 !text-[1.2rem] !mb-0 m-[0_0_1rem] !leading-[1.7] font-medium"&#62;
&#60;p&#62;&#8220;Fusce dapibus tellus ac cursus commodo, tortor mauris condimentum nibh fermentum massa, justo sit amet vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left justify-center"&#62;
&#60;div class="info p-0"&#62;
&#60;h6 class="!mb-0 !text-white !text-[.85rem] !leading-[1.55] !tracking-[normal] font-semibold"&#62;Julia &#38; David&#60;/h6&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!--/.swiper-slide --&#62;
&#60;div class="swiper-slide"&#62;
&#60;blockquote class="border-0 !text-[1.2rem] !mb-0 m-[0_0_1rem] !leading-[1.7] font-medium"&#62;
&#60;p&#62;&#8220;Fusce dapibus tellus ac cursus commodo, tortor mauris condimentum nibh fermentum massa, justo sit amet vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left justify-center"&#62;
&#60;div class="info p-0"&#62;
&#60;h6 class="!mb-0 !text-white !text-[.85rem] !leading-[1.55] !tracking-[normal] font-semibold"&#62;Jolene &#38; Andrea&#60;/h6&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!--/.swiper-slide --&#62;
&#60;div class="swiper-slide"&#62;
&#60;blockquote class="border-0 !text-[1.2rem] !mb-0 m-[0_0_1rem] !leading-[1.7] font-medium"&#62;
&#60;p&#62;&#8220;Fusce dapibus tellus ac cursus commodo, tortor mauris condimentum nibh fermentum massa, justo sit amet vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left justify-center"&#62;
&#60;div class="info p-0"&#62;
&#60;h6 class="!mb-0 !text-white !text-[.85rem] !leading-[1.55] !tracking-[normal] font-semibold"&#62;Eve &#38; Will&#60;/h6&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!--/.swiper-slide --&#62;
&#60;/div&#62;
&#60;!--/.swiper-wrapper --&#62;
&#60;/div&#62;
&#60;!--/.swiper --&#62;
&#60;/div&#62;
&#60;!-- /.swiper-container --&#62;
&#60;/div&#62;
&#60;!-- /column --&#62;
&#60;/div&#62;
&#60;!-- /.row --&#62;
&#60;/div&#62;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-15" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
<div class="wrapper image-wrapper bg-image bg-overlay !mb-14 xl:!mb-[4.5rem] lg:!mb-[4.5rem] md:!mb-[4.5rem] bg-no-repeat bg-[center_center] bg-cover relative z-0 !bg-fixed before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,.5)]" data-image-src="../../assets/img/photos/bg35.jpg">
<div class="container py-[5rem] xl:!py-[7rem] lg:!py-[7rem] md:!py-[7rem]">
<h2 class="!text-[calc(1.285rem_+_0.42vw)] font-bold xl:!text-[1.6rem] !leading-[1.3] !mb-4 !text-center !text-white">Happy Customers</h2>
<div class="swiper-container dots-closer dots-light dots-light-75" data-margin="0" data-dots="true" data-items-xl="3" data-items-md="2" data-items-xs="1">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="item-inner">
<div class="card border-0 !bg-[rgba(255,255,255,.9)]">
<div class="card-body flex-[1_1_auto] p-[40px]">
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"></span>
<blockquote class="!text-[0.85rem] !leading-[1.7] font-medium m-[0_0_1rem] !mb-0">
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
<div class="flex items-center text-left">
<div class="info p-0">
<h5 class="!mb-0">Coriss Ambady</h5>
<p class="!mb-0 text-[0.8rem]">Financial Analyst</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.item-inner -->
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<div class="item-inner">
<div class="card border-0 !bg-[rgba(255,255,255,.9)]">
<div class="card-body flex-[1_1_auto] p-[40px]">
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"></span>
<blockquote class="!text-[0.85rem] !leading-[1.7] font-medium m-[0_0_1rem] !mb-0">
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
<div class="flex items-center text-left">
<div class="info p-0">
<h5 class="!mb-0">Cory Zamora</h5>
<p class="!mb-0 text-[0.8rem]">Marketing Specialist</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.item-inner -->
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<div class="item-inner">
<div class="card border-0 !bg-[rgba(255,255,255,.9)]">
<div class="card-body flex-[1_1_auto] p-[40px]">
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"></span>
<blockquote class="!text-[0.85rem] !leading-[1.7] font-medium m-[0_0_1rem] !mb-0">
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
<div class="flex items-center text-left">
<div class="info p-0">
<h5 class="!mb-0">Nikolas Brooten</h5>
<p class="!mb-0 text-[0.8rem]">Sales Manager</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.item-inner -->
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<div class="item-inner">
<div class="card border-0 !bg-[rgba(255,255,255,.9)]">
<div class="card-body flex-[1_1_auto] p-[40px]">
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"></span>
<blockquote class="!text-[0.85rem] !leading-[1.7] font-medium m-[0_0_1rem] !mb-0">
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
<div class="flex items-center text-left">
<div class="info p-0">
<h5 class="!mb-0">Coriss Ambady</h5>
<p class="!mb-0 text-[0.8rem]">Financial Analyst</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.item-inner -->
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<div class="item-inner">
<div class="card border-0 !bg-[rgba(255,255,255,.9)]">
<div class="card-body flex-[1_1_auto] p-[40px]">
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"></span>
<blockquote class="!text-[0.85rem] !leading-[1.7] font-medium m-[0_0_1rem] !mb-0">
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
<div class="flex items-center text-left">
<div class="info p-0">
<h5 class="!mb-0">Jackie Sanders</h5>
<p class="!mb-0 text-[0.8rem]">Investment Planner</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.item-inner -->
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<div class="item-inner">
<div class="card border-0 !bg-[rgba(255,255,255,.9)]">
<div class="card-body flex-[1_1_auto] p-[40px]">
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"></span>
<blockquote class="!text-[0.85rem] !leading-[1.7] font-medium m-[0_0_1rem] !mb-0">
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
<div class="flex items-center text-left">
<div class="info p-0">
<h5 class="!mb-0">Laura Widerski</h5>
<p class="!mb-0 text-[0.8rem]">Sales Specialist</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.item-inner -->
</div>
<!--/.swiper-slide -->
</div>
<!--/.swiper-wrapper -->
</div>
<!-- /.swiper -->
</div>
<!-- /.swiper-container -->
</div>
<!-- /.container -->
</div>
<!-- /.wrapper -->
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
<div class="card">
<div class="card-footer border-0 !relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-15">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-15" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;section class=&quot;wrapper image-wrapper bg-image bg-overlay&quot; data-image-src=&quot;./assets/img/photos/bg35.jpg&quot;&gt;
&#60;div class="container py-[5rem] xl:!py-[7rem] lg:!py-[7rem] md:!py-[7rem]"&#62;
&#60;h2 class="!text-[calc(1.285rem_+_0.42vw)] font-bold xl:!text-[1.6rem] !leading-[1.3] !mb-4 !text-center !text-white"&#62;Happy Customers&#60;/h2&#62;
&#60;div class="swiper-container dots-closer dots-light dots-light-75" data-margin="0" data-dots="true" data-items-xl="3" data-items-md="2" data-items-xs="1"&#62;
&#60;div class="swiper"&#62;
&#60;div class="swiper-wrapper"&#62;
&#60;div class="swiper-slide"&#62;
&#60;div class="item-inner"&#62;
&#60;div class="card border-0 !bg-[rgba(255,255,255,.9)]"&#62;
&#60;div class="card-body flex-[1_1_auto] p-[40px]"&#62;
&#60;span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"&#62;&#60;/span&#62;
&#60;blockquote class="!text-[0.85rem] !leading-[1.7] font-medium m-[0_0_1rem] !mb-0"&#62;
&#60;p&#62;&#8220;Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;div class="info p-0"&#62;
&#60;h5 class="!mb-0"&#62;Coriss Ambady&#60;/h5&#62;
&#60;p class="!mb-0 text-[0.8rem]"&#62;Financial Analyst&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!-- /.card-body --&#62;
&#60;/div&#62;
&#60;!-- /.card --&#62;
&#60;/div&#62;
&#60;!-- /.item-inner --&#62;
&#60;/div&#62;
&#60;!--/.swiper-slide --&#62;
&#60;div class="swiper-slide"&#62;
&#60;div class="item-inner"&#62;
&#60;div class="card border-0 !bg-[rgba(255,255,255,.9)]"&#62;
&#60;div class="card-body flex-[1_1_auto] p-[40px]"&#62;
&#60;span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"&#62;&#60;/span&#62;
&#60;blockquote class="!text-[0.85rem] !leading-[1.7] font-medium m-[0_0_1rem] !mb-0"&#62;
&#60;p&#62;&#8220;Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;div class="info p-0"&#62;
&#60;h5 class="!mb-0"&#62;Cory Zamora&#60;/h5&#62;
&#60;p class="!mb-0 text-[0.8rem]"&#62;Marketing Specialist&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!-- /.card-body --&#62;
&#60;/div&#62;
&#60;!-- /.card --&#62;
&#60;/div&#62;
&#60;!-- /.item-inner --&#62;
&#60;/div&#62;
&#60;!--/.swiper-slide --&#62;
&#60;div class="swiper-slide"&#62;
&#60;div class="item-inner"&#62;
&#60;div class="card border-0 !bg-[rgba(255,255,255,.9)]"&#62;
&#60;div class="card-body flex-[1_1_auto] p-[40px]"&#62;
&#60;span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"&#62;&#60;/span&#62;
&#60;blockquote class="!text-[0.85rem] !leading-[1.7] font-medium m-[0_0_1rem] !mb-0"&#62;
&#60;p&#62;&#8220;Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;div class="info p-0"&#62;
&#60;h5 class="!mb-0"&#62;Nikolas Brooten&#60;/h5&#62;
&#60;p class="!mb-0 text-[0.8rem]"&#62;Sales Manager&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!-- /.card-body --&#62;
&#60;/div&#62;
&#60;!-- /.card --&#62;
&#60;/div&#62;
&#60;!-- /.item-inner --&#62;
&#60;/div&#62;
&#60;!--/.swiper-slide --&#62;
&#60;div class="swiper-slide"&#62;
&#60;div class="item-inner"&#62;
&#60;div class="card border-0 !bg-[rgba(255,255,255,.9)]"&#62;
&#60;div class="card-body flex-[1_1_auto] p-[40px]"&#62;
&#60;span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"&#62;&#60;/span&#62;
&#60;blockquote class="!text-[0.85rem] !leading-[1.7] font-medium m-[0_0_1rem] !mb-0"&#62;
&#60;p&#62;&#8220;Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;div class="info p-0"&#62;
&#60;h5 class="!mb-0"&#62;Coriss Ambady&#60;/h5&#62;
&#60;p class="!mb-0 text-[0.8rem]"&#62;Financial Analyst&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!-- /.card-body --&#62;
&#60;/div&#62;
&#60;!-- /.card --&#62;
&#60;/div&#62;
&#60;!-- /.item-inner --&#62;
&#60;/div&#62;
&#60;!--/.swiper-slide --&#62;
&#60;div class="swiper-slide"&#62;
&#60;div class="item-inner"&#62;
&#60;div class="card border-0 !bg-[rgba(255,255,255,.9)]"&#62;
&#60;div class="card-body flex-[1_1_auto] p-[40px]"&#62;
&#60;span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"&#62;&#60;/span&#62;
&#60;blockquote class="!text-[0.85rem] !leading-[1.7] font-medium m-[0_0_1rem] !mb-0"&#62;
&#60;p&#62;&#8220;Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;div class="info p-0"&#62;
&#60;h5 class="!mb-0"&#62;Jackie Sanders&#60;/h5&#62;
&#60;p class="!mb-0 text-[0.8rem]"&#62;Investment Planner&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!-- /.card-body --&#62;
&#60;/div&#62;
&#60;!-- /.card --&#62;
&#60;/div&#62;
&#60;!-- /.item-inner --&#62;
&#60;/div&#62;
&#60;!--/.swiper-slide --&#62;
&#60;div class="swiper-slide"&#62;
&#60;div class="item-inner"&#62;
&#60;div class="card border-0 !bg-[rgba(255,255,255,.9)]"&#62;
&#60;div class="card-body flex-[1_1_auto] p-[40px]"&#62;
&#60;span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"&#62;&#60;/span&#62;
&#60;blockquote class="!text-[0.85rem] !leading-[1.7] font-medium m-[0_0_1rem] !mb-0"&#62;
&#60;p&#62;&#8220;Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;div class="info p-0"&#62;
&#60;h5 class="!mb-0"&#62;Laura Widerski&#60;/h5&#62;
&#60;p class="!mb-0 text-[0.8rem]"&#62;Sales Specialist&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!-- /.card-body --&#62;
&#60;/div&#62;
&#60;!-- /.card --&#62;
&#60;/div&#62;
&#60;!-- /.item-inner --&#62;
&#60;/div&#62;
&#60;!--/.swiper-slide --&#62;
&#60;/div&#62;
&#60;!--/.swiper-wrapper --&#62;
&#60;/div&#62;
&#60;!-- /.swiper --&#62;
&#60;/div&#62;
&#60;!-- /.swiper-container --&#62;
&#60;/div&#62;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-16" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
<div class="card !bg-[#edf2fc] !rounded-[0.8rem]">
<div class="card-body py-[4.5rem] xl:!px-0 lg:!px-0 px-[40px]">
<div class="flex flex-wrap mx-[-15px] !text-center">
<div class="lg:w-8/12 xl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-[16.66666667%] lg:!ml-[16.66666667%]">
<h2 class="!text-[0.8rem] uppercase !text-[#e31e24] !mb-3 !leading-[1.35] !tracking-[0.02rem]">Happy Customers</h2>
<h3 class="xl:!text-[1.8rem] !text-[calc(1.305rem_+_0.66vw)] !leading-[1.3] font-semibold !mb-10 xxl:!px-10">Don't take our word for it. See what customers are saying about us.</h3>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] items-center">
<div class="lg:w-5/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !ml-auto hidden xl:!flex lg:!flex xl:!px-[35px] lg:!px-[20px]">
<div class="img-mask mask-3"><img src="../../assets/img/photos/about28.jpg" alt="image"></div>
</div>
<!--/column -->
<div class="lg:w-6/12 xl:w-6/12 xxl:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mr-auto xl:!px-[35px] lg:!px-[20px]">
<div class="swiper-container dots-start dots-closer !mb-6 relative z-10" data-margin="30" data-dots="true">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"></span>
<blockquote class="!pl-0 !text-[1rem] !leading-[1.7] font-medium m-[0_0_1rem] !mb-0">
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur nulla dapibus curabitur blandit faucibus.”</p>
<div class="flex items-center text-left">
<div class="info !pl-0">
<h5 class="!mb-1 text-[.9rem] !leading-[1.5]">Coriss Ambady</h5>
<p class="!mb-0 text-[0.8rem]">Financial Analyst</p>
</div>
</div>
</blockquote>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"></span>
<blockquote class="!pl-0 !text-[1rem] !leading-[1.7] font-medium m-[0_0_1rem] !mb-0">
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur nulla dapibus curabitur blandit faucibus.”</p>
<div class="flex items-center text-left">
<div class="info !pl-0">
<h5 class="!mb-1 text-[.9rem] !leading-[1.5]">Cory Zamora</h5>
<p class="!mb-0 text-[0.8rem]">Marketing Specialist</p>
</div>
</div>
</blockquote>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"></span>
<blockquote class="!pl-0 !text-[1rem] !leading-[1.7] font-medium m-[0_0_1rem] !mb-0">
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur nulla dapibus curabitur blandit faucibus.”</p>
<div class="flex items-center text-left">
<div class="info !pl-0">
<h5 class="!mb-1 text-[.9rem] !leading-[1.5]">Nikolas Brooten</h5>
<p class="!mb-0 text-[0.8rem]">Sales Manager</p>
</div>
</div>
</blockquote>
</div>
<!--/.swiper-slide -->
</div>
<!--/.swiper-wrapper -->
</div>
<!-- /.swiper -->
</div>
<!-- /.swiper-container -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /.container -->
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
<div class="card">
<div class="card-footer border-0 !relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-16">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-16" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;section class=&quot;wrapper !bg-[#ffffff] &quot;&gt;
&#60;div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20"&#62;
&#60;div class="card !bg-[#edf2fc] !rounded-[0.8rem]"&#62;
&#60;div class="card-body py-[4.5rem] xl:!px-0 lg:!px-0 px-[40px]"&#62;
&#60;div class="flex flex-wrap mx-[-15px] !text-center"&#62;
&#60;div class="lg:w-8/12 xl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-[16.66666667%] lg:!ml-[16.66666667%]"&#62;
&#60;h2 class="!text-[0.8rem] uppercase !text-[#e31e24] !mb-3 !leading-[1.35] !tracking-[0.02rem]"&#62;Happy Customers&#60;/h2&#62;
&#60;h3 class="xl:!text-[1.8rem] !text-[calc(1.305rem_+_0.66vw)] !leading-[1.3] font-semibold !mb-10 xxl:!px-10"&#62;Don't take our word for it. See what customers are saying about us.&#60;/h3&#62;
&#60;/div&#62;
&#60;!-- /column --&#62;
&#60;/div&#62;
&#60;!-- /.row --&#62;
&#60;div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] items-center"&#62;
&#60;div class="lg:w-5/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !ml-auto hidden xl:!flex lg:!flex xl:!px-[35px] lg:!px-[20px]"&#62;
&#60;div class="img-mask mask-3"&#62;&#60;img src="../../assets/img/photos/about28.jpg" alt="image"&#62;&#60;/div&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;div class="lg:w-6/12 xl:w-6/12 xxl:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mr-auto xl:!px-[35px] lg:!px-[20px]"&#62;
&#60;div class="swiper-container dots-start dots-closer !mb-6 relative z-10" data-margin="30" data-dots="true"&#62;
&#60;div class="swiper"&#62;
&#60;div class="swiper-wrapper"&#62;
&#60;div class="swiper-slide"&#62;
&#60;span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"&#62;&#60;/span&#62;
&#60;blockquote class="!pl-0 !text-[1rem] !leading-[1.7] font-medium m-[0_0_1rem] !mb-0"&#62;
&#60;p&#62;&#8220;Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur nulla dapibus curabitur blandit faucibus.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;div class="info !pl-0"&#62;
&#60;h5 class="!mb-1 text-[.9rem] !leading-[1.5]"&#62;Coriss Ambady&#60;/h5&#62;
&#60;p class="!mb-0 text-[0.8rem]"&#62;Financial Analyst&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!--/.swiper-slide --&#62;
&#60;div class="swiper-slide"&#62;
&#60;span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"&#62;&#60;/span&#62;
&#60;blockquote class="!pl-0 !text-[1rem] !leading-[1.7] font-medium m-[0_0_1rem] !mb-0"&#62;
&#60;p&#62;&#8220;Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur nulla dapibus curabitur blandit faucibus.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;div class="info !pl-0"&#62;
&#60;h5 class="!mb-1 text-[.9rem] !leading-[1.5]"&#62;Cory Zamora&#60;/h5&#62;
&#60;p class="!mb-0 text-[0.8rem]"&#62;Marketing Specialist&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!--/.swiper-slide --&#62;
&#60;div class="swiper-slide"&#62;
&#60;span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"&#62;&#60;/span&#62;
&#60;blockquote class="!pl-0 !text-[1rem] !leading-[1.7] font-medium m-[0_0_1rem] !mb-0"&#62;
&#60;p&#62;&#8220;Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur nulla dapibus curabitur blandit faucibus.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;div class="info !pl-0"&#62;
&#60;h5 class="!mb-1 text-[.9rem] !leading-[1.5]"&#62;Nikolas Brooten&#60;/h5&#62;
&#60;p class="!mb-0 text-[0.8rem]"&#62;Sales Manager&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!--/.swiper-slide --&#62;
&#60;/div&#62;
&#60;!--/.swiper-wrapper --&#62;
&#60;/div&#62;
&#60;!-- /.swiper --&#62;
&#60;/div&#62;
&#60;!-- /.swiper-container --&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;/div&#62;
&#60;!--/.row --&#62;
&#60;/div&#62;
&#60;!--/.card-body --&#62;
&#60;/div&#62;
&#60;!--/.card --&#62;
&#60;/div&#62;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-17" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
<div class="flex flex-wrap mx-[-15px]">
<div class="md:w-11/12 lg:w-10/12 xl:w-9/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center !relative">
<img src="../../assets/img/svg/doodle1.svg" class="h-9 !absolute hidden xl:block lg:block" style="top: 2%; left: 9%" alt="image">
<img src="../../assets/img/svg/doodle10.svg" class="h-7 absolute hidden xl:block lg:block" style="top: -45%; left: -17%" alt="image">
<img src="../../assets/img/svg/doodle11.svg" class="!h-[4rem] absolute hidden xl:block lg:block" style="top: -40%; right: -15%" alt="image">
<h2 class="!text-[0.8rem] !tracking-[0.02rem] uppercase !text-[#aab0bc] !mb-3 !leading-[1.35]">Happy Customers</h2>
<h3 class="!text-[calc(1.325rem_+_0.9vw)] font-bold !leading-[1.25] xl:!text-[2rem] !mb-12 xl:!px-10 xxl:!px-16">Don't take our word for it. See what <span class="text-gradient gradient-7">customers</span> are saying about us.</h3>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="itemgrid">
<div class="flex flex-wrap mx-[-15px] isotope !mt-[-30px]">
<div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
<div class="card !shadow-none !rounded-[0.8rem] !bg-[#f0f0f8]">
<div class="card-body flex-[1_1_auto] p-[40px]">
<blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
<div class="flex items-center text-left">
<div class="info !pl-0">
<h5 class="!mb-1 text-[.9rem] !leading-[1.5]">Coriss Ambady</h5>
<p class="!mb-0 text-[0.8rem]">Financial Analyst</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!--/column -->
<div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
<div class="card !shadow-none !rounded-[0.8rem] !bg-[#edf9f6]">
<div class="card-body flex-[1_1_auto] p-[40px]">
<blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
<p>“Fusce dapibus, tellus ac cursus tortor mauris condimentum fermentum massa justo sit amet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.”</p>
<div class="flex items-center text-left">
<div class="info !pl-0">
<h5 class="!mb-1 text-[.9rem] !leading-[1.5]">Cory Zamora</h5>
<p class="!mb-0 text-[0.8rem]">Marketing Specialist</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!--/column -->
<div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
<div class="card !shadow-none !rounded-[0.8rem] !bg-[#fef4f2]">
<div class="card-body flex-[1_1_auto] p-[40px]">
<blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
<p>“Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget porta ac consectetur vestibulum. Donec sed odio dui consectetur adipiscing elit.”</p>
<div class="flex items-center text-left">
<div class="info !pl-0">
<h5 class="!mb-1 text-[.9rem] !leading-[1.5]">Nikolas Brooten</h5>
<p class="!mb-0 text-[0.8rem]">Sales Manager</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!--/column -->
<div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
<div class="card !shadow-none !rounded-[0.8rem] !bg-[#fbf1f4]">
<div class="card-body flex-[1_1_auto] p-[40px]">
<blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
<p>“Etiam adipiscing tincidunt elit convallis felis suscipit ut. Phasellus rhoncus tincidunt auctor. Nullam eu sagittis mauris. Donec non dolor ac elit aliquam tincidunt at at sapien. Aenean tortor libero condimentum ac laoreet vitae.”</p>
<div class="flex items-center text-left">
<div class="info !pl-0">
<h5 class="!mb-1 text-[.9rem] !leading-[1.5]">Coriss Ambady</h5>
<p class="!mb-0 text-[0.8rem]">Financial Analyst</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!--/column -->
<div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
<div class="card !shadow-none !rounded-[0.8rem] !bg-[#edf2fc]">
<div class="card-body flex-[1_1_auto] p-[40px]">
<blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
<p>“Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus magnis dis montes, nascetur ridiculus mus. Donec sed odio dui. Nulla vitae elit libero a pharetra.”</p>
<div class="flex items-center text-left">
<div class="info !pl-0">
<h5 class="!mb-1 text-[.9rem] !leading-[1.5]">Jackie Sanders</h5>
<p class="!mb-0 text-[0.8rem]">Investment Planner</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!--/column -->
<div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
<div class="card !shadow-none !rounded-[0.8rem] !bg-[#fff8ee]">
<div class="card-body flex-[1_1_auto] p-[40px]">
<blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
<p>“Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.”</p>
<div class="flex items-center text-left">
<div class="info !pl-0">
<h5 class="!mb-1 text-[.9rem] !leading-[1.5]">Laura Widerski</h5>
<p class="!mb-0 text-[0.8rem]">Sales Specialist</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!--/column -->
</div>
<!-- /.row -->
</div>
<!-- /.grid-view -->
</div>
<!-- /.container -->
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
<div class="card">
<div class="card-footer border-0 !relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-17">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-17" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;section class=&quot;wrapper&quot;&gt;
&#60;div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20"&#62;
&#60;div class="flex flex-wrap mx-[-15px]"&#62;
&#60;div class="md:w-11/12 lg:w-10/12 xl:w-9/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center !relative"&#62;
&#60;img src="../../assets/img/svg/doodle1.svg" class="h-9 !absolute hidden xl:block lg:block" style="top: 2%; left: 9%" alt="image"&#62;
&#60;img src="../../assets/img/svg/doodle10.svg" class="h-7 absolute hidden xl:block lg:block" style="top: -45%; left: -17%" alt="image"&#62;
&#60;img src="../../assets/img/svg/doodle11.svg" class="!h-[4rem] absolute hidden xl:block lg:block" style="top: -40%; right: -15%" alt="image"&#62;
&#60;h2 class="!text-[0.8rem] !tracking-[0.02rem] uppercase !text-[#aab0bc] !mb-3 !leading-[1.35]"&#62;Happy Customers&#60;/h2&#62;
&#60;h3 class="!text-[calc(1.325rem_+_0.9vw)] font-bold !leading-[1.25] xl:!text-[2rem] !mb-12 xl:!px-10 xxl:!px-16"&#62;Don't take our word for it. See what &#60;span class="text-gradient gradient-7"&#62;customers&#60;/span&#62; are saying about us.&#60;/h3&#62;
&#60;/div&#62;
&#60;!-- /column --&#62;
&#60;/div&#62;
&#60;!-- /.row --&#62;
&#60;div class="itemgrid"&#62;
&#60;div class="flex flex-wrap mx-[-15px] isotope !mt-[-30px]"&#62;
&#60;div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]"&#62;
&#60;div class="card !shadow-none !rounded-[0.8rem] !bg-[#f0f0f8]"&#62;
&#60;div class="card-body flex-[1_1_auto] p-[40px]"&#62;
&#60;blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]"&#62;
&#60;p&#62;&#8220;Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;div class="info !pl-0"&#62;
&#60;h5 class="!mb-1 text-[.9rem] !leading-[1.5]"&#62;Coriss Ambady&#60;/h5&#62;
&#60;p class="!mb-0 text-[0.8rem]"&#62;Financial Analyst&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!-- /.card-body --&#62;
&#60;/div&#62;
&#60;!-- /.card --&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]"&#62;
&#60;div class="card !shadow-none !rounded-[0.8rem] !bg-[#edf9f6]"&#62;
&#60;div class="card-body flex-[1_1_auto] p-[40px]"&#62;
&#60;blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]"&#62;
&#60;p&#62;&#8220;Fusce dapibus, tellus ac cursus tortor mauris condimentum fermentum massa justo sit amet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;div class="info !pl-0"&#62;
&#60;h5 class="!mb-1 text-[.9rem] !leading-[1.5]"&#62;Cory Zamora&#60;/h5&#62;
&#60;p class="!mb-0 text-[0.8rem]"&#62;Marketing Specialist&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!-- /.card-body --&#62;
&#60;/div&#62;
&#60;!-- /.card --&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]"&#62;
&#60;div class="card !shadow-none !rounded-[0.8rem] !bg-[#fef4f2]"&#62;
&#60;div class="card-body flex-[1_1_auto] p-[40px]"&#62;
&#60;blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]"&#62;
&#60;p&#62;&#8220;Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget porta ac consectetur vestibulum. Donec sed odio dui consectetur adipiscing elit.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;div class="info !pl-0"&#62;
&#60;h5 class="!mb-1 text-[.9rem] !leading-[1.5]"&#62;Nikolas Brooten&#60;/h5&#62;
&#60;p class="!mb-0 text-[0.8rem]"&#62;Sales Manager&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!-- /.card-body --&#62;
&#60;/div&#62;
&#60;!-- /.card --&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]"&#62;
&#60;div class="card !shadow-none !rounded-[0.8rem] !bg-[#fbf1f4]"&#62;
&#60;div class="card-body flex-[1_1_auto] p-[40px]"&#62;
&#60;blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]"&#62;
&#60;p&#62;&#8220;Etiam adipiscing tincidunt elit convallis felis suscipit ut. Phasellus rhoncus tincidunt auctor. Nullam eu sagittis mauris. Donec non dolor ac elit aliquam tincidunt at at sapien. Aenean tortor libero condimentum ac laoreet vitae.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;div class="info !pl-0"&#62;
&#60;h5 class="!mb-1 text-[.9rem] !leading-[1.5]"&#62;Coriss Ambady&#60;/h5&#62;
&#60;p class="!mb-0 text-[0.8rem]"&#62;Financial Analyst&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!-- /.card-body --&#62;
&#60;/div&#62;
&#60;!-- /.card --&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]"&#62;
&#60;div class="card !shadow-none !rounded-[0.8rem] !bg-[#edf2fc]"&#62;
&#60;div class="card-body flex-[1_1_auto] p-[40px]"&#62;
&#60;blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]"&#62;
&#60;p&#62;&#8220;Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus magnis dis montes, nascetur ridiculus mus. Donec sed odio dui. Nulla vitae elit libero a pharetra.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;div class="info !pl-0"&#62;
&#60;h5 class="!mb-1 text-[.9rem] !leading-[1.5]"&#62;Jackie Sanders&#60;/h5&#62;
&#60;p class="!mb-0 text-[0.8rem]"&#62;Investment Planner&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!-- /.card-body --&#62;
&#60;/div&#62;
&#60;!-- /.card --&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]"&#62;
&#60;div class="card !shadow-none !rounded-[0.8rem] !bg-[#fff8ee]"&#62;
&#60;div class="card-body flex-[1_1_auto] p-[40px]"&#62;
&#60;blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]"&#62;
&#60;p&#62;&#8220;Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;div class="info !pl-0"&#62;
&#60;h5 class="!mb-1 text-[.9rem] !leading-[1.5]"&#62;Laura Widerski&#60;/h5&#62;
&#60;p class="!mb-0 text-[0.8rem]"&#62;Sales Specialist&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!-- /.card-body --&#62;
&#60;/div&#62;
&#60;!-- /.card --&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;/div&#62;
&#60;!-- /.row --&#62;
&#60;/div&#62;
&#60;!-- /.grid-view --&#62;
&#60;/div&#62;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-18" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
<div class="pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-[12.5rem] xl:pb-[17.5rem] lg:pb-[17.5rem] md:pb-[17.5rem]">
<section class="section-frame xxl:!mx-12">
<div class="wrapper image-wrapper bg-image bg-cover bg-overlay bg-overlay-light-500 section-frame-wrapper bg-[center_center] bg-no-repeat bg-scroll relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.5)]" data-image-src="../../assets/img/photos/bg23.png">
<div class="container py-24 xl:!py-[8rem] lg:!py-[8rem] md:!py-[8rem]">
<div class="flex flex-wrap mx-[-15px]">
<div class="md:w-10/12 lg:w-9/12 xl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center">
<h3 class="!text-[calc(1.345rem_+_1.14vw)] font-semibold !leading-[1.25] xl:!text-[2.2rem] !mb-10 xxl:!px-10">Don't take our word for it. See what customers are saying about us.</h3>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="flex flex-wrap mx-[-15px]">
<div class="itemgrid xl:w-11/12 lg:w-11/12 md:w-11/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto xl:!mb-[-17.5rem] lg:!mb-[-17.5rem]">
<div class="flex flex-wrap mx-[-15px] isotope !mt-[-30px]">
<div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
<div class="card-body flex-[1_1_auto] p-[40px]">
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"></span>
<blockquote class="!text-[0.85rem] !leading-[1.7] !font-medium !pl-4 icon !mb-0 m-[0_0_1rem] relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis.”</p>
<div class="flex items-center text-left">
<div class="info !pl-0">
<h5 class="!mb-1 text-[.9rem] !leading-[1.5]">Coriss Ambady</h5>
<p class="!mb-0 text-[.8rem]">Financial Analyst</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!--/column -->
<div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
<div class="card-body flex-[1_1_auto] p-[40px]">
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"></span>
<blockquote class="!text-[0.85rem] !leading-[1.7] !font-medium !pl-4 icon !mb-0 m-[0_0_1rem] relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
<p>“Fusce dapibus, tellus ac cursus tortor mauris condimentum fermentum massa justo sit amet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum.”</p>
<div class="flex items-center text-left">
<div class="info !pl-0">
<h5 class="!mb-1 text-[.9rem] !leading-[1.5]">Cory Zamora</h5>
<p class="!mb-0 text-[.8rem]">Marketing Specialist</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!--/column -->
<div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
<div class="card-body flex-[1_1_auto] p-[40px]">
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"></span>
<blockquote class="!text-[0.85rem] !leading-[1.7] !font-medium !pl-4 icon !mb-0 m-[0_0_1rem] relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
<p>“Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget porta ac consectetur vestibulum. Donec sed odio dui consectetur.”</p>
<div class="flex items-center text-left">
<div class="info !pl-0">
<h5 class="!mb-1 text-[.9rem] !leading-[1.5]">Nikolas Brooten</h5>
<p class="!mb-0 text-[.8rem]">Sales Manager</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!--/column -->
<div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
<div class="card-body flex-[1_1_auto] p-[40px]">
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"></span>
<blockquote class="!text-[0.85rem] !leading-[1.7] !font-medium !pl-4 icon !mb-0 m-[0_0_1rem] relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
<p>“Etiam adipiscing tincidunt elit convallis felis suscipit ut. Phasellus rhoncus tincidunt auctor. Nullam eu sagittis mauris. Donec non dolor ac elit aliquam tincidunt at at sapien.”</p>
<div class="flex items-center text-left">
<div class="info !pl-0">
<h5 class="!mb-1 text-[.9rem] !leading-[1.5]">Coriss Ambady</h5>
<p class="!mb-0 text-[.8rem]">Financial Analyst</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!--/column -->
<div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
<div class="card-body flex-[1_1_auto] p-[40px]">
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"></span>
<blockquote class="!text-[0.85rem] !leading-[1.7] !font-medium !pl-4 icon !mb-0 m-[0_0_1rem] relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
<p>“Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus magnis dis montes, nascetur ridiculus mus. Donec sed odio dui.”</p>
<div class="flex items-center text-left">
<div class="info !pl-0">
<h5 class="!mb-1 text-[.9rem] !leading-[1.5]">Jackie Sanders</h5>
<p class="!mb-0 text-[.8rem]">Investment Planner</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!--/column -->
<div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
<div class="card-body flex-[1_1_auto] p-[40px]">
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"></span>
<blockquote class="!text-[0.85rem] !leading-[1.7] !font-medium !pl-4 icon !mb-0 m-[0_0_1rem] relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
<p>“Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.”</p>
<div class="flex items-center text-left">
<div class="info !pl-0">
<h5 class="!mb-1 text-[.9rem] !leading-[1.5]">Laura Widerski</h5>
<p class="!mb-0 text-[.8rem]">Sales Specialist</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!--/column -->
</div>
<!-- /.row -->
</div>
<!-- /.grid-view -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</div>
<!-- /.wrapper -->
</section>
<!-- /section -->
</div>
<!-- /.container -->
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
<div class="card">
<div class="card-footer border-0 !relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-18">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-18" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;section class=&quot;section-frame xxl:!mx-12&quot;&gt;
&lt;div class=&quot;wrapper image-wrapper bg-image bg-cover bg-overlay bg-overlay-light-500 section-frame-wrapper&quot; data-image-src=&quot;./assets/img/photos/bg23.png&quot;&gt;
&#60;div class="container py-24 xl:!py-[8rem] lg:!py-[8rem] md:!py-[8rem]"&#62;
&#60;div class="flex flex-wrap mx-[-15px]"&#62;
&#60;div class="md:w-10/12 lg:w-9/12 xl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center"&#62;
&#60;h3 class="!text-[calc(1.345rem_+_1.14vw)] font-semibold !leading-[1.25] xl:!text-[2.2rem] !mb-10 xxl:!px-10"&#62;Don't take our word for it. See what customers are saying about us.&#60;/h3&#62;
&#60;/div&#62;
&#60;!-- /column --&#62;
&#60;/div&#62;
&#60;!-- /.row --&#62;
&#60;div class="flex flex-wrap mx-[-15px]"&#62;
&#60;div class="itemgrid xl:w-11/12 lg:w-11/12 md:w-11/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto xl:!mb-[-17.5rem] lg:!mb-[-17.5rem]"&#62;
&#60;div class="flex flex-wrap mx-[-15px] isotope !mt-[-30px]"&#62;
&#60;div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]"&#62;
&#60;div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"&#62;
&#60;div class="card-body flex-[1_1_auto] p-[40px]"&#62;
&#60;span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"&#62;&#60;/span&#62;
&#60;blockquote class="!text-[0.85rem] !leading-[1.7] !font-medium !pl-4 icon !mb-0 m-[0_0_1rem] relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]"&#62;
&#60;p&#62;&#8220;Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;div class="info !pl-0"&#62;
&#60;h5 class="!mb-1 text-[.9rem] !leading-[1.5]"&#62;Coriss Ambady&#60;/h5&#62;
&#60;p class="!mb-0 text-[.8rem]"&#62;Financial Analyst&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!-- /.card-body --&#62;
&#60;/div&#62;
&#60;!-- /.card --&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]"&#62;
&#60;div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"&#62;
&#60;div class="card-body flex-[1_1_auto] p-[40px]"&#62;
&#60;span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"&#62;&#60;/span&#62;
&#60;blockquote class="!text-[0.85rem] !leading-[1.7] !font-medium !pl-4 icon !mb-0 m-[0_0_1rem] relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]"&#62;
&#60;p&#62;&#8220;Fusce dapibus, tellus ac cursus tortor mauris condimentum fermentum massa justo sit amet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;div class="info !pl-0"&#62;
&#60;h5 class="!mb-1 text-[.9rem] !leading-[1.5]"&#62;Cory Zamora&#60;/h5&#62;
&#60;p class="!mb-0 text-[.8rem]"&#62;Marketing Specialist&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!-- /.card-body --&#62;
&#60;/div&#62;
&#60;!-- /.card --&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]"&#62;
&#60;div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"&#62;
&#60;div class="card-body flex-[1_1_auto] p-[40px]"&#62;
&#60;span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"&#62;&#60;/span&#62;
&#60;blockquote class="!text-[0.85rem] !leading-[1.7] !font-medium !pl-4 icon !mb-0 m-[0_0_1rem] relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]"&#62;
&#60;p&#62;&#8220;Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget porta ac consectetur vestibulum. Donec sed odio dui consectetur.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;div class="info !pl-0"&#62;
&#60;h5 class="!mb-1 text-[.9rem] !leading-[1.5]"&#62;Nikolas Brooten&#60;/h5&#62;
&#60;p class="!mb-0 text-[.8rem]"&#62;Sales Manager&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!-- /.card-body --&#62;
&#60;/div&#62;
&#60;!-- /.card --&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]"&#62;
&#60;div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"&#62;
&#60;div class="card-body flex-[1_1_auto] p-[40px]"&#62;
&#60;span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"&#62;&#60;/span&#62;
&#60;blockquote class="!text-[0.85rem] !leading-[1.7] !font-medium !pl-4 icon !mb-0 m-[0_0_1rem] relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]"&#62;
&#60;p&#62;&#8220;Etiam adipiscing tincidunt elit convallis felis suscipit ut. Phasellus rhoncus tincidunt auctor. Nullam eu sagittis mauris. Donec non dolor ac elit aliquam tincidunt at at sapien.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;div class="info !pl-0"&#62;
&#60;h5 class="!mb-1 text-[.9rem] !leading-[1.5]"&#62;Coriss Ambady&#60;/h5&#62;
&#60;p class="!mb-0 text-[.8rem]"&#62;Financial Analyst&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!-- /.card-body --&#62;
&#60;/div&#62;
&#60;!-- /.card --&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]"&#62;
&#60;div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"&#62;
&#60;div class="card-body flex-[1_1_auto] p-[40px]"&#62;
&#60;span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"&#62;&#60;/span&#62;
&#60;blockquote class="!text-[0.85rem] !leading-[1.7] !font-medium !pl-4 icon !mb-0 m-[0_0_1rem] relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]"&#62;
&#60;p&#62;&#8220;Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus magnis dis montes, nascetur ridiculus mus. Donec sed odio dui.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;div class="info !pl-0"&#62;
&#60;h5 class="!mb-1 text-[.9rem] !leading-[1.5]"&#62;Jackie Sanders&#60;/h5&#62;
&#60;p class="!mb-0 text-[.8rem]"&#62;Investment Planner&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!-- /.card-body --&#62;
&#60;/div&#62;
&#60;!-- /.card --&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]"&#62;
&#60;div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"&#62;
&#60;div class="card-body flex-[1_1_auto] p-[40px]"&#62;
&#60;span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"&#62;&#60;/span&#62;
&#60;blockquote class="!text-[0.85rem] !leading-[1.7] !font-medium !pl-4 icon !mb-0 m-[0_0_1rem] relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]"&#62;
&#60;p&#62;&#8220;Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.&#8221;&#60;/p&#62;
&#60;div class="flex items-center text-left"&#62;
&#60;div class="info !pl-0"&#62;
&#60;h5 class="!mb-1 text-[.9rem] !leading-[1.5]"&#62;Laura Widerski&#60;/h5&#62;
&#60;p class="!mb-0 text-[.8rem]"&#62;Sales Specialist&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/blockquote&#62;
&#60;/div&#62;
&#60;!-- /.card-body --&#62;
&#60;/div&#62;
&#60;!-- /.card --&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;/div&#62;
&#60;!-- /.row --&#62;
&#60;/div&#62;
&#60;!-- /.grid-view --&#62;
&#60;/div&#62;
&#60;!-- /.row --&#62;
&#60;/div&#62;
&lt;/div&gt;
&lt;!-- /.wrapper --&gt;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
</div>
<!-- /.content-wrapper -->
<section class="wrapper bg-[#21262c] opacity-100 !text-white">
<div class="container pt-[4.5rem] xl:pt-24 lg:pt-24 md:pt-24 !text-center">
<div class="flex flex-wrap mx-[-15px]">
<div class="md:w-10/12 lg:w-9/12 xl:w-8/12 xxl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
<h2 class="!text-[calc(1.325rem_+_0.9vw)] font-bold !leading-[1.25] xl:!text-[2rem] !text-white !mt-3 !mb-3 xl:!px-8 lg:!px-8">Think unique and be creative. Make a difference with Trunçgil.</h2>
<p class="lead text-[1.05rem] !leading-[1.6] !mb-6">Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.</p>
<a href="https://truncgil.com.tr" target="_blank" class="btn btn-lg btn-white !rounded-[50rem] !mb-10 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">Buy Trunçgil</a>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<img class="max-w-full h-auto m-[0_auto]" src="../../assets/img/demos/f1.png" alt="image">
</div>
<!-- /.container -->
</section>
<!-- /section -->
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#e31e24] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path class="fill-none stroke-[#e31e24] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
</svg>
</div>
<script src="../../assets/js/plugins.js"></script>
<script src="../../assets/js/theme.js"></script>
</body>
<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/docs/blocks/testimonials by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 11:01:41 GMT -->
</html>
Reference in New Issue View Git Blame Copy Permalink