landing-saas-v4.html

<!DOCTYPE html>
<html lang="en" data-bs-theme="light">
  <head>
    <meta charset="utf-8">

    <!-- Viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, viewport-fit=cover">
    
    <!-- SEO meta tags -->
    <title>Around | SaaS v.4</title>
    <meta name="description" content="Around - Multipurpose Bootstrap HTML Template">
    <meta name="keywords" content="bootstrap, business, corporate, coworking space, services, creative agency, dashboard, e-commerce, mobile app showcase, saas, multipurpose, product landing, shop, software, ui kit, web studio, landing, light and dark mode, html5, css3, javascript, gallery, slider, touch, creative">
    <meta name="author" content="Createx Studio">

    <!-- Webmanifest + Favicon / App icons -->
    <link rel="manifest" href="/manifest.json">
    <link rel="icon" type="image/png" href="assets/app-icons/icon-32x32.png" sizes="32x32">
    <link rel="apple-touch-icon" href="assets/app-icons/icon-180x180.png">
        
    <!-- Theme switcher (color modes) -->
    <script src="assets/js/theme-switcher.js"></script>

    <!-- Import Google font (Inter) -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&amp;display=swap" rel="stylesheet" id="google-font">

    <!-- Vendor styles -->
    <link rel="stylesheet" media="screen" href="assets/vendor/swiper/swiper-bundle.min.css">
    <link rel="stylesheet" media="screen" href="assets/vendor/lightgallery/css/lightgallery-bundle.min.css">

    <!-- Font icons -->
    <link rel="stylesheet" href="assets/icons/around-icons.min.css">

    <!-- Theme styles + Bootstrap -->
    <link rel="stylesheet" media="screen" href="assets/css/theme.min.css">

    <!-- Page loading styles -->
    <style>
      .page-loading {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-transition: all .4s .2s ease-in-out;
        transition: all .4s .2s ease-in-out;
        background-color: #fff;
        opacity: 0;
        visibility: hidden;
        z-index: 9999;
      }
      [data-bs-theme="dark"] .page-loading {
        background-color: #121519;
      }
      .page-loading.active {
        opacity: 1;
        visibility: visible;
      }
      .page-loading-inner {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        text-align: center;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        -webkit-transition: opacity .2s ease-in-out;
        transition: opacity .2s ease-in-out;
        opacity: 0;
      }
      .page-loading.active > .page-loading-inner {
        opacity: 1;
      }
      .page-loading-inner > span {
        display: block;
        font-family: "Inter", sans-serif;
        font-size: 1rem;
        font-weight: normal;
        color: #6f788b;
      }
      [data-bs-theme="dark"] .page-loading-inner > span {
        color: #fff;
        opacity: .6;
      }
      .page-spinner {
        display: inline-block;
        width: 2.75rem;
        height: 2.75rem;
        margin-bottom: .75rem;
        vertical-align: text-bottom;
        background-color: #d7dde2; 
        border-radius: 50%;
        opacity: 0;
        -webkit-animation: spinner .75s linear infinite;
        animation: spinner .75s linear infinite;
      }
      [data-bs-theme="dark"] .page-spinner {
        background-color: rgba(255,255,255,.25);
      }
      @-webkit-keyframes spinner {
        0% {
          -webkit-transform: scale(0);
          transform: scale(0);
        }
        50% {
          opacity: 1;
          -webkit-transform: none;
          transform: none;
        }
      }
      @keyframes spinner {
        0% {
          -webkit-transform: scale(0);
          transform: scale(0);
        }
        50% {
          opacity: 1;
          -webkit-transform: none;
          transform: none;
        }
      }
    </style>

    <!-- Page loading scripts -->
    <script>
      (function () {
        window.onload = function () {
          const preloader = document.querySelector('.page-loading')
          preloader.classList.remove('active')
          setTimeout(function () {
            preloader.remove()
          }, 1500)
        }
      })()
    </script>
  </head>


  <!-- Body -->
  <body>


    <!-- Page loading spinner -->
    <div class="page-loading active">
      <div class="page-loading-inner">
        <div class="page-spinner"></div>
        <span>Loading...</span>
      </div>
    </div>


    <!-- Page wrapper -->
    <main class="page-wrapper">
      <header data-bs-theme="dark">

        <!-- Navbar. Remove 'fixed-top' class to make the navigation bar scrollable with the page -->
        <div class="navbar navbar-expand-lg fixed-top">
          <div class="container">

            <!-- Navbar brand (Logo) -->
            <a class="navbar-brand pe-sm-3" href="index.html">
              <span class="text-primary flex-shrink-0 me-2">
                <svg width="35" height="32" viewBox="0 0 36 33" xmlns="http://www.w3.org/2000/svg">
                  <path fill="currentColor" d="M35.6,29c-1.1,3.4-5.4,4.4-7.9,1.9c-2.3-2.2-6.1-3.7-9.4-3.7c-3.1,0-7.5,1.8-10,4.1c-2.2,2-5.8,1.5-7.3-1.1c-1-1.8-1.2-4.1,0-6.2l0.6-1.1l0,0c0.6-0.7,4.4-5.2,12.5-5.7c0.5,1.8,2,3.1,3.9,3.1c2.2,0,4.1-1.9,4.1-4.2s-1.8-4.2-4.1-4.2c-2,0-3.6,1.4-4,3.3H7.7c-0.8,0-1.3-0.9-0.9-1.6l5.6-9.8c2.5-4.5,8.8-4.5,11.3,0L35.1,24C36,25.7,36.1,27.5,35.6,29z"></path>
                </svg>
              </span>
              Around
            </a>

            <!-- Theme switcher -->
            <div class="form-check form-switch mode-switch order-lg-2 me-3 me-lg-4 ms-auto" data-bs-toggle="mode">
              <input class="form-check-input" type="checkbox" id="theme-mode">
              <label class="form-check-label" for="theme-mode">
                <i class="ai-sun fs-lg"></i>
              </label>
              <label class="form-check-label" for="theme-mode">
                <i class="ai-moon fs-lg"></i>
              </label>
            </div>

            <a class="btn btn-primary btn-sm fs-sm rounded-pill order-lg-3 d-none d-sm-inline-flex" href="https://themes.getbootstrap.com/product/around-multipurpose-template-ui-kit/" target="_blank" rel="noopener">
              <i class="ai-cart fs-xl me-2 ms-n1"></i>
              Buy now
            </a>

            <!-- Mobile menu toggler (Hamburger) -->
            <button class="navbar-toggler ms-sm-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>

            <!-- Navbar collapse (Main navigation) -->
            <nav class="collapse navbar-collapse" id="navbarNav">
              <ul class="navbar-nav navbar-nav-scroll me-auto" style="--ar-scroll-height: 520px;">
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle active" href="#" data-bs-toggle="dropdown" aria-expanded="false">Landings</a>
                  <div class="dropdown-menu overflow-hidden p-0">
                    <div class="d-lg-flex">
                      <div class="mega-dropdown-column pt-1 pt-lg-3 pb-lg-4">
                        <ul class="list-unstyled mb-0">
                          <li>
                            <a class="dropdown-item" href="index.html">Template Intro Page</a>
                            <span class="mega-dropdown-column position-absolute top-0 end-0 h-100 bg-size-cover bg-repeat-0 rounded-3 rounded-start-0" style="background-image: url(assets/img/megamenu/landings.jpg);"></span>
                          </li>
                          <li>
                            <a class="dropdown-item" href="landing-mobile-app-showcase.html">Mobile App Showcase</a>
                            <span class="mega-dropdown-column position-absolute top-0 end-0 h-100 bg-size-cover bg-repeat-0 z-2 opacity-0" style="background-image: url(assets/img/megamenu/mobile-app.jpg);"></span>
                          </li>
                          <li>
                            <a class="dropdown-item" href="landing-product.html">Product Landing</a>
                            <span class="mega-dropdown-column position-absolute top-0 end-0 h-100 bg-size-cover bg-repeat-0 z-2 opacity-0" style="background-image: url(assets/img/megamenu/product-landing.jpg);"></span>
                          </li>
                          <li>
                            <a class="dropdown-item" href="landing-saas-v1.html">SaaS v.1</a>
                            <span class="mega-dropdown-column position-absolute top-0 end-0 h-100 bg-size-cover bg-repeat-0 z-2 opacity-0" style="background-image: url(assets/img/megamenu/saas-1.jpg);"></span>
                          </li>
                          <li>
                            <a class="dropdown-item" href="landing-saas-v2.html">SaaS v.2</a>
                            <span class="mega-dropdown-column position-absolute top-0 end-0 h-100 bg-size-cover bg-repeat-0 z-2 opacity-0" style="background-image: url(assets/img/megamenu/saas-2.jpg);"></span>
                          </li>
                          <li>
                            <a class="dropdown-item" href="landing-saas-v3.html">SaaS v.3</a>
                            <span class="mega-dropdown-column position-absolute top-0 end-0 h-100 bg-size-cover bg-repeat-0 z-2 opacity-0" style="background-image: url(assets/img/megamenu/saas-3.jpg);"></span>
                          </li>
                          <li>
                            <a class="dropdown-item" href="landing-saas-v4.html">
                              SaaS v.4
                              <span class="text-danger fs-xs ms-2">New</span>
                            </a>
                            <span class="mega-dropdown-column position-absolute top-0 end-0 h-100 bg-size-cover bg-repeat-0 z-2 opacity-0" style="background-image: url(assets/img/megamenu/saas-4.jpg);"></span>
                          </li>
                          <li>
                            <a class="dropdown-item" href="landing-shop-v1.html">Shop Homepage v.1</a>
                            <span class="mega-dropdown-column position-absolute top-0 end-0 h-100 bg-size-cover bg-repeat-0 z-2 opacity-0" style="background-image: url(assets/img/megamenu/shop-homepage-1.jpg);"></span>
                          </li>
                          <li>
                            <a class="dropdown-item" href="landing-shop-v2.html">
                              Shop Homepage v.2
                              <span class="text-danger fs-xs ms-2">New</span>
                            </a>
                            <span class="mega-dropdown-column position-absolute top-0 end-0 h-100 bg-size-cover bg-repeat-0 z-2 opacity-0" style="background-image: url(assets/img/megamenu/shop-homepage-2.jpg);"></span>
                          </li>
                          <li>
                            <a class="dropdown-item" href="landing-marketing-agency.html">Marketing Agency</a>
                            <span class="mega-dropdown-column position-absolute top-0 end-0 h-100 bg-size-cover bg-repeat-0 z-2 opacity-0" style="background-image: url(assets/img/megamenu/marketing-agency.jpg);"></span>
                          </li>
                        </ul>
                      </div>
                      <div class="mega-dropdown-column pb-2 pt-lg-3 pb-lg-4">
                        <ul class="list-unstyled mb-0">
                          <li>
                            <a class="dropdown-item" href="landing-creative-agency.html">Creative Agency</a>
                            <span class="mega-dropdown-column position-absolute top-0 end-0 h-100 bg-size-cover bg-repeat-0 z-2 opacity-0" style="background-image: url(assets/img/megamenu/creative-agency.jpg);"></span>
                          </li>
                          <li>
                            <a class="dropdown-item" href="landing-conference.html">Conference (Event)</a>
                            <span class="mega-dropdown-column position-absolute top-0 end-0 h-100 bg-size-cover bg-repeat-0 z-2 opacity-0" style="background-image: url(assets/img/megamenu/conference.jpg);"></span>
                          </li>
                          <li>
                            <a class="dropdown-item" href="landing-web-studio.html">Web Studio</a>
                            <span class="mega-dropdown-column position-absolute top-0 end-0 h-100 bg-size-cover bg-repeat-0 z-2 opacity-0" style="background-image: url(assets/img/megamenu/web-studio.jpg);"></span>
                          </li>
                          <li>
                            <a class="dropdown-item" href="landing-corporate.html">Corporate</a>
                            <span class="mega-dropdown-column position-absolute top-0 end-0 h-100 bg-size-cover bg-repeat-0 z-2 opacity-0" style="background-image: url(assets/img/megamenu/corporate.jpg);"></span>
                          </li>
                          <li>
                            <a class="dropdown-item" href="landing-insurance.html">
                              Insurance Company
                              <span class="text-danger fs-xs ms-2">New</span>
                            </a>
                            <span class="mega-dropdown-column position-absolute top-0 end-0 h-100 bg-size-cover bg-repeat-0 z-2 opacity-0" style="background-image: url(assets/img/megamenu/insurance.jpg);"></span>
                          </li>
                          <li>
                            <a class="dropdown-item" href="landing-business-consulting.html">Business Consulting</a>
                            <span class="mega-dropdown-column position-absolute top-0 end-0 h-100 bg-size-cover bg-repeat-0 z-2 opacity-0" style="background-image: url(assets/img/megamenu/business-consulting.jpg);"></span>
                          </li>
                          <li>
                            <a class="dropdown-item" href="landing-coworking-space.html">Coworking Space</a>
                            <span class="mega-dropdown-column position-absolute top-0 end-0 h-100 bg-size-cover bg-repeat-0 z-2 opacity-0" style="background-image: url(assets/img/megamenu/coworking.jpg);"></span>
                          </li>
                          <li>
                            <a class="dropdown-item" href="landing-yoga-studio.html">Yoga Studio</a>
                            <span class="mega-dropdown-column position-absolute top-0 end-0 h-100 bg-size-cover bg-repeat-0 z-2 opacity-0" style="background-image: url(assets/img/megamenu/yoga-studio.jpg);"></span>
                          </li>
                          <li>
                            <a class="dropdown-item" href="landing-influencer.html">Influencer</a>
                            <span class="mega-dropdown-column position-absolute top-0 end-0 h-100 bg-size-cover bg-repeat-0 z-2 opacity-0" style="background-image: url(assets/img/megamenu/influencer.jpg);"></span>
                          </li>
                          <li>
                            <a class="dropdown-item" href="landing-blog.html">Blog Homepage</a>
                            <span class="mega-dropdown-column position-absolute top-0 end-0 h-100 bg-size-cover bg-repeat-0 z-2 opacity-0" style="background-image: url(assets/img/megamenu/blog-homepage.jpg);"></span>
                          </li>
                        </ul>
                      </div>
                      <div class="mega-dropdown-column position-relative border-start z-3"></div>
                    </div>
                  </div>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">Pages</a>
                  <ul class="dropdown-menu">
                    <li class="dropdown">
                      <a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Portfolio</a>
                      <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="portfolio-list-v1.html">List View v.1</a></li>
                        <li><a class="dropdown-item" href="portfolio-list-v2.html">List View v.2</a></li>
                        <li><a class="dropdown-item" href="portfolio-grid-v1.html">Grid View v.1</a></li>
                        <li><a class="dropdown-item" href="portfolio-grid-v2.html">Grid View v.2</a></li>
                        <li><a class="dropdown-item" href="portfolio-slider.html">Slider View</a></li>
                        <li><a class="dropdown-item" href="portfolio-single-v1.html">Single Project v.1</a></li>
                        <li><a class="dropdown-item" href="portfolio-single-v2.html">Single Project v.2</a></li>
                      </ul>
                    </li>
                    <li class="dropdown">
                      <a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Shop</a>
                      <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="shop-catalog.html">Catalog (Listing)</a></li>
                        <li><a class="dropdown-item" href="shop-single.html">Product Page</a></li>
                        <li><a class="dropdown-item" href="shop-checkout.html">Checkout</a></li>
                      </ul>
                    </li>
                    <li class="dropdown">
                      <a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Blog</a>
                      <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="blog-grid-sidebar.html">Grid View with Sidebar</a></li>
                        <li><a class="dropdown-item" href="blog-grid.html">Grid View no Sidebar</a></li>
                        <li><a class="dropdown-item" href="blog-list-sidebar.html">List View with Sidebar</a></li>
                        <li><a class="dropdown-item" href="blog-list.html">List View no Sidebar</a></li>
                        <li><a class="dropdown-item" href="blog-single-v1.html">Single post v.1</a></li>
                        <li><a class="dropdown-item" href="blog-single-v2.html">Single post v.2</a></li>
                        <li><a class="dropdown-item" href="blog-single-v3.html">Single post v.3</a></li>
                      </ul>
                    </li>
                    <li class="dropdown">
                      <a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">About</a>
                      <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="about-agency.html">About - Agency</a></li>
                        <li><a class="dropdown-item" href="about-product.html">About - Product</a></li>
                      </ul>
                    </li>
                    <li class="dropdown">
                      <a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Services</a>
                      <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="services-v1.html">Services v.1</a></li>
                        <li><a class="dropdown-item" href="services-v2.html">Services v.2</a></li>
                        <li><a class="dropdown-item" href="services-v3.html">Services v.3</a></li>
                      </ul>
                    </li>
                    <li><a class="dropdown-item" href="pricing.html">Pricing</a></li>
                    <li class="dropdown">
                      <a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Contacts</a>
                      <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="contacts-v1.html">Contacts v.1</a></li>
                        <li><a class="dropdown-item" href="contacts-v2.html">Contacts v.2</a></li>
                        <li><a class="dropdown-item" href="contacts-v3.html">Contacts v.3</a></li>
                      </ul>
                    </li>
                    <li class="dropdown">
                      <a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Specialty Pages</a>
                      <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="coming-soon-v1.html">Coming Soon v.1</a></li>
                        <li><a class="dropdown-item" href="coming-soon-v2.html">Coming Soon v.2</a></li>
                        <li><a class="dropdown-item" href="404-v1.html">404 Error v.1</a></li>
                        <li><a class="dropdown-item" href="404-v2.html">404 Error v.2</a></li>
                        <li><a class="dropdown-item" href="404-v3.html">404 Error v.3</a></li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">Account</a>
                  <ul class="dropdown-menu">
                    <li class="dropdown">
                      <a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Auth pages</a>
                      <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="account-signin.html">Sign In</a></li>
                        <li><a class="dropdown-item" href="account-signup.html">Sign Up</a></li>
                        <li><a class="dropdown-item" href="account-signinup.html">Sign In / Up</a></li>
                        <li><a class="dropdown-item" href="account-password-recovery.html">Password Recovery</a></li>
                      </ul>
                    </li>
                    <li><a class="dropdown-item" href="account-overview.html">Overview</a></li>
                    <li><a class="dropdown-item" href="account-settings.html">Settings</a></li>
                    <li><a class="dropdown-item" href="account-billing.html">Billing</a></li>
                    <li><a class="dropdown-item" href="account-orders.html">Orders</a></li>
                    <li><a class="dropdown-item" href="account-earnings.html">Earnings</a></li>
                    <li><a class="dropdown-item" href="account-chat.html">Chat (Messages)</a></li>
                    <li><a class="dropdown-item" href="account-favorites.html">Favorites (Wishlist)</a></li>
                  </ul>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="components/typography.html">UI Kit</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="docs/getting-started.html">Docs</a>
                </li>
              </ul>
              <div class="d-sm-none p-3 mt-n3">
                <a class="btn btn-primary w-100 rounded-pill mb-1" href="https://themes.getbootstrap.com/product/around-multipurpose-template-ui-kit/" target="_blank" rel="noopener">
                  <i class="ai-cart fs-xl me-2 ms-n1"></i>
                  Buy now
                </a>
              </div>
            </nav>
          </div>
        </div>
      </header>
      

      <!-- Hero section -->
      <section class="position-relative bg-dark pt-lg-4 pt-xl-5">
        <div class="jarallax position-absolute top-0 start-0 w-100 h-100" data-jarallax data-speed="0.4">
          <div class="jarallax-img" style="background-image: url(assets/img/landing/saas-4/hero-bg-pattern.png);"></div>
        </div>
        <div class="container position-relative z-2 pt-2 pt-sm-4 pt-md-5">
          <div class="row justify-content-center pt-5">
            <div class="col-lg-9 col-xl-8 text-center pt-5 mt-1">
              <a href="#" class="d-inline-flex align-items-center fs-sm fw-semibold text-decoration-none bg-warning bg-opacity-10 text-warning rounded-pill py-2 px-3">
                <span class="fw-semibold lh-sm">New Around v2.0</span>
                <i class="ai-arrow-right fs-lg ms-2 me-n1"></i>
              </a>
              <h1 class="display-4 text-white pt-3 mt-3 mb-4">Powerful AI models to serve your business needs</h1>
              <p class="text-white opacity-70 fs-xl">Our robust platform is designed to handle large volumes of data and processing power, making it perfect for businesses of all sizes.</p>
            </div>
          </div>
        </div>
        <div class="d-none d-lg-block" style="height: 480px;"></div>
        <div class="d-lg-none" style="height: 400px;"></div>
        <div class="d-flex position-absolute bottom-0 start-0 w-100 overflow-hidden mb-n1" style="color: var(--ar-body-bg);">
          <div class="position-relative start-50 translate-middle-x flex-shrink-0" style="width: 3774px;">
            <svg width="3774" height="201" viewBox="0 0 3774 201" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 200.003C0 200.003 1137.52 0.188224 1873.5 0.000134392C2614.84 -0.189325 3774 200.003 3774 200.003H0Z" fill="currentColor"/></svg>
          </div>
        </div>
      </section>


      <!-- Categories (Slider) -->
      <section class="container position-relative z-3">
        <div class="d-none d-lg-block" style="margin-top: -428px;"></div>
        <div class=" d-lg-none" style="margin-top: -370px;"></div>
        <div class="swiper" data-swiper-options='{
          "slidesPerView": 1,
          "spaceBetween": 24,
          "pagination": {
            "el": ".swiper-pagination",
            "clickable": true
          },
          "breakpoints": {
            "560": {
              "slidesPerView": 2
            },
            "960": {
              "slidesPerView": 3
            }
          }
        }'>
          <div class="swiper-wrapper">

            <!-- Item -->
            <div class="swiper-slide">
              <a href="#" class="card card-hover zoom-effect border-0 rounded-5 overflow-hidden">
                <span class="position-absolute top-0 start-0 w-100 h-100 z-1" style="background: linear-gradient(180deg, rgba(18, 21, 25, 0.00) 35.56%, #121519 95.3%);"></span>
                <div class="position-absolute bottom-0 w-100 z-2 p-4">
                  <div class="px-md-3">
                    <h3 class="h4 text-white mb-0">E-commerce</h3>
                    <div class="d-flex align-items-center justify-content-between opacity-0">
                      <span class="text-white fs-xs text-truncate opacity-70 pe-3">Order processing, price suggestions, user research</span>
                      <i class="ai-circle-arrow-right fs-3 text-primary"></i>
                    </div>
                  </div>
                </div>
                <div class="zoom-effect-wrapper">
                  <div class="zoom-effect-img">
                    <img src="assets/img/landing/saas-4/categories/ecommerce.jpg" alt="Ecommerce">
                  </div>
                </div>
              </a>
            </div>

            <!-- Item -->
            <div class="swiper-slide">
              <a href="#" class="card card-hover zoom-effect border-0 rounded-5 overflow-hidden">
                <span class="position-absolute top-0 start-0 w-100 h-100 z-1" style="background: linear-gradient(180deg, rgba(18, 21, 25, 0.00) 35.56%, #121519 95.3%);"></span>
                <div class="position-absolute bottom-0 w-100 z-2 p-4">
                  <div class="px-md-3">
                    <h3 class="h4 text-white mb-0">Transportation</h3>
                    <div class="d-flex align-items-center justify-content-between opacity-0">
                      <span class="text-white fs-xs text-truncate opacity-70 pe-3">Itinerary planning, freight pricing culculations, etc.</span>
                      <i class="ai-circle-arrow-right fs-3 text-primary"></i>
                    </div>
                  </div>
                </div>
                <div class="zoom-effect-wrapper">
                  <div class="zoom-effect-img">
                    <img src="assets/img/landing/saas-4/categories/transportation.jpg" alt="Transportation">
                  </div>
                </div>
              </a>
            </div>

            <!-- Item -->
            <div class="swiper-slide">
              <a href="#" class="card card-hover zoom-effect border-0 rounded-5 overflow-hidden">
                <span class="position-absolute top-0 start-0 w-100 h-100 z-1" style="background: linear-gradient(180deg, rgba(18, 21, 25, 0.00) 35.56%, #121519 95.3%);"></span>
                <div class="position-absolute bottom-0 w-100 z-2 p-4">
                  <div class="px-md-3">
                    <h3 class="h4 text-white mb-0">Marketing</h3>
                    <div class="d-flex align-items-center justify-content-between opacity-0">
                      <span class="text-white fs-xs text-truncate opacity-70 pe-3">Market research, data visualization, user testing</span>
                      <i class="ai-circle-arrow-right fs-3 text-primary"></i>
                    </div>
                  </div>
                </div>
                <div class="zoom-effect-wrapper">
                  <div class="zoom-effect-img">
                    <img src="assets/img/landing/saas-4/categories/marketing.jpg" alt="Marketing">
                  </div>
                </div>
              </a>
            </div>

            <!-- Item -->
            <div class="swiper-slide">
              <a href="#" class="card card-hover zoom-effect border-0 rounded-5 overflow-hidden">
                <span class="position-absolute top-0 start-0 w-100 h-100 z-1" style="background: linear-gradient(180deg, rgba(18, 21, 25, 0.00) 35.56%, #121519 95.3%);"></span>
                <div class="position-absolute bottom-0 w-100 z-2 p-4">
                  <div class="px-md-3">
                    <h3 class="h4 text-white mb-0">Robotics</h3>
                    <div class="d-flex align-items-center justify-content-between opacity-0">
                      <span class="text-white fs-xs text-truncate opacity-70 pe-3">Enhancing robot learning, improve robotic precision</span>
                      <i class="ai-circle-arrow-right fs-3 text-primary"></i>
                    </div>
                  </div>
                </div>
                <div class="zoom-effect-wrapper">
                  <div class="zoom-effect-img">
                    <img src="assets/img/landing/saas-4/categories/robotics.jpg" alt="Robotics">
                  </div>
                </div>
              </a>
            </div>

            <!-- Item -->
            <div class="swiper-slide">
              <a href="#" class="card card-hover zoom-effect border-0 rounded-5 overflow-hidden">
                <span class="position-absolute top-0 start-0 w-100 h-100 z-1" style="background: linear-gradient(180deg, rgba(18, 21, 25, 0.00) 35.56%, #121519 95.3%);"></span>
                <div class="position-absolute bottom-0 w-100 z-2 p-4">
                  <div class="px-md-3">
                    <h3 class="h4 text-white mb-0">Programming</h3>
                    <div class="d-flex align-items-center justify-content-between opacity-0">
                      <span class="text-white fs-xs text-truncate opacity-70 pe-3">Code generation, code debugging and optimization</span>
                      <i class="ai-circle-arrow-right fs-3 text-primary"></i>
                    </div>
                  </div>
                </div>
                <div class="zoom-effect-wrapper">
                  <div class="zoom-effect-img">
                    <img src="assets/img/landing/saas-4/categories/programming.jpg" alt="Programming">
                  </div>
                </div>
              </a>
            </div>
          </div>

          <!-- Pagination (bullets) -->
          <div class="swiper-pagination position-relative bottom-0 pt-2 pt-md-3 mt-4"></div>
        </div>
      </section>


      <!-- Use cases -->
      <section class="position-relative overflow-hidden py-5">
        <span class="position-absolute top-0 start-0 w-100 h-100 d-dark-mode-none" style="background: linear-gradient(141deg, rgba(255, 255, 255, .01) 17.3%, #f6f9fc 78.21%);"></span>
        <div class="position-absolute top-0 start-0 w-100 h-100 d-none d-dark-mode-block" style="background: linear-gradient(141deg, rgba(18, 21, 25, .00) 17.3%, rgba(255, 255, 255, .03) 78.21%);"></div>

        <div class="container position-relative z-2 pt-3 pt-md-4 pt-lg-5 mt-lg-2 mt-xl-4">
          <h2 class="h1 text-center pb-1 mb-2">What you can build with Around</h2>
          <p class="fs-lg text-center pb-lg-2">Well, lots of things. Some of them are listed below</p>


          <!-- Use case -->
          <div class="row align-items-center justify-content-center py-4 py-md-5 my-1 my-sm-3 my-md-0 my-xl-3">
            <div class="col-11 col-sm-9 col-md-7 col-lg-6 offset-lg-1 order-md-2 pb-2 pb-sm-3 pb-md-0 mb-4 mb-md-0">
              <div class="parallax" style="max-width: 636px;">
                <div class="parallax-layer" data-depth="0">
                  <div class="ratio" style="--ar-aspect-ratio: 89.6%"></div>
                </div>
                <div class="parallax-layer" style="padding-right: 24.2%;" data-depth="0.1">
                  <img src="assets/img/landing/saas-4/use-cases/data-analysis/line-chart-light.png" class="d-dark-mode-none position-relative rounded-4" style="top: 27.5%; max-width: 482px; box-shadow: 0 12px 48px -8px rgba(189, 196, 221, .35);" alt="Total users line chart">
                  <img src="assets/img/landing/saas-4/use-cases/data-analysis/line-chart-dark.png" class="d-none d-dark-mode-block position-relative rounded-4" style="top: 27.5%; max-width: 482px; box-shadow: 0 12px 48px -8px rgba(0, 0, 0, .25);" alt="Total users line chart">
                </div>
                <div class="parallax-layer" style="padding-left: 45.75%;" data-depth="-0.12">
                  <img src="assets/img/landing/saas-4/use-cases/data-analysis/bar-chart-light.png" class="d-dark-mode-none position-relative rounded-4" style="max-width: 345px; box-shadow: 0 0 48px -4px rgba(189, 196, 221, .35);" alt="Traffic bar chart">
                  <img src="assets/img/landing/saas-4/use-cases/data-analysis/bar-chart-dark.png" class="d-none d-dark-mode-block position-relative rounded-4" style="max-width: 345px; box-shadow: 0 12px 48px -8px rgba(0, 0, 0, .35);" alt="Traffic bar chart">
                </div>
                <div class="parallax-layer" style="padding-right: 7.547%; padding-left: 44.97%;" data-depth="0.3">
                  <img src="assets/img/landing/saas-4/use-cases/data-analysis/donut-chart-light.png" class="d-dark-mode-none position-relative rounded-4" style="top: 60.75%; max-width: 302px; box-shadow: 0 0 48px -4px rgba(189, 196, 221, .35);" alt="Traffic donut chart">
                  <img src="assets/img/landing/saas-4/use-cases/data-analysis/donut-chart-dark.png" class="d-none d-dark-mode-block position-relative rounded-4" style="top: 60.75%; max-width: 302px; box-shadow: 0 -12px 48px -8px rgba(0, 0, 0, .35);" alt="Traffic donut chart">
                </div>
              </div>
            </div>
            <div class="col-md-5 col-xl-4 offset-xl-1 order-md-1 text-center text-md-start">
              <h3 class="h2 mb-lg-4">Data analysis tools</h3>
              <p class="fs-lg pb-lg-2 mb-4">From complex analysis to stunning visualizations, our advanced AI technology can help you extract valuable insights and make data-driven decisions faster than ever before.</p>
              <a href="#" class="btn btn-outline-primary rounded-pill">
                Learn more
                <i class="ai-arrow-right fs-lg ms-2 me-n1"></i>
              </a>
            </div>
          </div>


          <!-- Use case -->
          <div class="row align-items-center justify-content-center justify-content-md-start py-4 py-md-5 my-2 my-sm-3 my-md-0 my-xl-3">
            <div class="col-11 col-sm-9 col-md-7 col-lg-6 pb-2 pb-sm-3 pb-md-0 mb-4 mb-md-0">
              <div class="parallax" style="max-width: 636px;">
                <div class="parallax-layer" data-depth="0.05">
                  <img src="assets/img/landing/saas-4/use-cases/task-automation/circle-1.png" alt="Circle 1">
                </div>
                <div class="parallax-layer" data-depth="0.1">
                  <img src="assets/img/landing/saas-4/use-cases/task-automation/circle-2.png" alt="Circle 2">
                </div>
                <div class="parallax-layer" data-depth="0.15">
                  <img src="assets/img/landing/saas-4/use-cases/task-automation/circle-3.png" alt="Circle 3">
                </div>
                <div class="parallax-layer" data-depth="0.2">
                  <div class="position-absolute top-50 start-50 translate-middle bg-primary rounded-circle p-4">
                    <div class="h1 text-white lh-1 p-sm-1 p-lg-3 m-1">AI</div>
                  </div>
                </div>
                <div class="parallax-layer" style="padding-right: 28.7%; padding-left: 57%;" data-depth="0.3">
                  <div class="position-relative">
                    <div class="ratio ratio-1x1"></div>
                    <span class="position-absolute top-0 start-0 w-100 h-100 bg-white rounded-circle d-dark-mode-none" style="box-shadow: 0 12px 48px -8px rgba(189, 196, 221, .35);"></span>
                    <span class="position-absolute top-0 start-0 w-100 h-100 rounded-circle d-none d-dark-mode-block" style="background-color: #1c2126;"></span>
                    <svg class="position-absolute top-0 start-0 z-2 text-dark" viewBox="0 0 92 91" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M46.4935 24.9077C34.8988 24.9077 25.4961 34.3472 25.4961 45.9917C25.4961 55.3052 31.5126 63.2065 39.8601 65.9968C40.9101 66.1911 41.2933 65.5401 41.2933 64.981C41.2933 64.4796 41.275 63.154 41.2645 61.3952C35.4238 62.6683 34.1901 58.5681 34.1901 58.5681C33.2372 56.1321 31.8591 55.4837 31.8591 55.4837C29.9507 54.1765 32.0008 54.2027 32.0008 54.2027C34.1087 54.3523 35.2165 56.3762 35.2165 56.3762C37.0907 59.5971 40.1331 58.6678 41.3301 58.1271C41.5191 56.7647 42.0625 55.8355 42.6636 55.3078C38.0016 54.775 33.0981 52.9663 33.0981 44.8892C33.0981 42.5871 33.9171 40.705 35.2611 39.2297C35.0432 38.6968 34.324 36.5522 35.4658 33.6516C35.4658 33.6516 37.2298 33.0846 41.2408 35.812C42.9156 35.3447 44.7111 35.1111 46.4987 35.1032C48.2811 35.1137 50.0792 35.3447 51.7566 35.8146C55.765 33.0872 57.5263 33.6542 57.5263 33.6542C58.6708 36.5575 57.9516 38.6995 57.7363 39.2323C59.083 40.7076 59.8941 42.5897 59.8941 44.8918C59.8941 52.99 54.9853 54.7723 50.3076 55.2947C51.061 55.9457 51.733 57.232 51.733 59.1981C51.733 62.0173 51.7067 64.2906 51.7067 64.981C51.7067 65.5453 52.0847 66.2016 53.1505 65.9942C61.4848 63.2012 67.4961 55.3026 67.4961 45.9917C67.4961 34.3472 58.0933 24.9077 46.4935 24.9077Z"/></svg>
                  </div>
                </div>
                <div class="parallax-layer" style="padding-right: 60%; padding-left: 27.6%;" data-depth="0.45">
                  <div class="position-relative" style="top: 13.3%;">
                    <div class="ratio ratio-1x1"></div>
                    <span class="position-absolute top-0 start-0 w-100 h-100 bg-white rounded-circle d-dark-mode-none" style="box-shadow: 0 12px 48px -8px rgba(189, 196, 221, .35);"></span>
                    <span class="position-absolute top-0 start-0 w-100 h-100 rounded-circle d-none d-dark-mode-block" style="background-color: #1c2126;"></span>
                    <svg class="position-absolute top-0 start-0 z-2" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg" fill="none"><path d="M24.233 52.279l1.671 2.898c.347.61.847 1.09 1.434 1.439l5.993-4.249.011-6.1-5.98-2.694-5.99 2.673c-.001.675.172 1.35.519 1.96l2.343 4.074z" fill="#06d"/><path d="M40.392 34.091l.313-7.946-6.279-2.424c-.588.347-1.09.825-1.439 1.434l-11.09 19.133c-.349.609-.525 1.283-.526 1.958l11.97.021 7.052-12.175z" fill="#00ad3c"/><path d="M40.392 34.091l5.752-3.094.251-7.254c-.587-.349-1.261-.525-1.958-.526l-8.053-.014c-.696-.001-1.371.193-1.96.519l5.967 10.37z" fill="#00831e"/><path d="M47.401 46.292l-14.059-.025-6.004 10.349c.587.349 1.261.525 1.958.526l22.112.039c.697.001 1.371-.193 1.96-.519l.023-6.951-5.99-3.419z" fill="#0084ff"/><path d="M53.367 56.662c.588-.347 1.09-.825 1.439-1.434l.699-1.196 3.34-5.761c.349-.609.525-1.283.526-1.958l-6.919-3.641-5.03 3.619 5.945 10.37z" fill="#ff4131"/><path d="M53.341 34.768l-5.511-9.586c-.347-.61-.847-1.09-1.434-1.439l-6.004 10.349 7.008 12.2 11.949.021c.001-.675-.172-1.35-.519-1.96l-5.489-9.586z" fill="#ffba00"/></svg>
                  </div>
                </div>
                <div class="parallax-layer" style="padding-right: 85.8%;" data-depth="0.3">
                  <div class="position-relative" style="top: 32.7%;">
                    <div class="ratio ratio-1x1"></div>
                    <span class="position-absolute top-0 start-0 w-100 h-100 bg-white rounded-circle d-dark-mode-none" style="box-shadow: 0 12px 48px -8px rgba(189, 196, 221, .35);"></span>
                    <span class="position-absolute top-0 start-0 w-100 h-100 rounded-circle d-none d-dark-mode-block" style="background-color: #1c2126;"></span>
                    <svg class="position-absolute top-0 start-0 z-2" viewBox="0 0 92 92" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#D)"><path d="M65.381 38.179c-.097-2.129-.435-3.583-.93-4.855a9.8 9.8 0 0 0-2.307-3.543c-.999-1.017-2.208-1.805-3.542-2.308-1.272-.494-2.726-.832-4.855-.929l-8.246-.121-8.246.12c-2.129.097-3.582.435-4.855.93a9.8 9.8 0 0 0-3.542 2.307c-1.017.999-1.805 2.208-2.307 3.542-.494 1.272-.832 2.726-.929 4.855l-.121 8.246.121 8.246c.097 2.129.435 3.582.93 4.855a9.8 9.8 0 0 0 2.307 3.542 9.8 9.8 0 0 0 3.543 2.307c1.272.495 2.726.833 4.855.93l8.246.12 8.246-.12c2.129-.097 3.582-.435 4.855-.93 2.686-1.039 4.81-3.163 5.849-5.849.495-1.272.832-2.726.93-4.855l.12-8.246-.12-8.246zm-3.6 16.328c-.089 1.95-.415 3.009-.688 3.714-.673 1.744-2.051 3.123-3.796 3.796-.705.274-1.764.6-3.714.688l-8.082.117c-5.341 0-5.973-.02-8.082-.117-1.95-.089-3.009-.415-3.714-.688a6.2 6.2 0 0 1-2.3-1.496c-.664-.645-1.175-1.431-1.496-2.3-.274-.705-.6-1.764-.688-3.714l-.117-8.082.117-8.082c.089-1.95.415-3.009.688-3.714a6.2 6.2 0 0 1 1.496-2.3c.645-.664 1.431-1.176 2.3-1.496.705-.274 1.764-.6 3.714-.689l8.082-.116h0l8.082.117c1.95.089 3.009.415 3.714.689a6.2 6.2 0 0 1 2.299 1.496 6.19 6.19 0 0 1 1.496 2.3c.274.705.6 1.764.689 3.714l.117 8.082-.117 8.082z" fill="url(#A)"/><path d="M45.501 36.155c-5.672 0-10.27 4.598-10.27 10.27s4.598 10.27 10.27 10.27 10.27-4.598 10.27-10.27-4.598-10.27-10.27-10.27zm0 16.937a6.67 6.67 0 0 1-6.666-6.667 6.67 6.67 0 0 1 6.667-6.666 6.67 6.67 0 0 1 6.666 6.666 6.67 6.67 0 0 1-6.667 6.667z" fill="url(#B)"/><path d="M58.577 35.749a2.4 2.4 0 0 1-4.8 0 2.4 2.4 0 1 1 4.8 0z" fill="url(#C)"/></g><defs><linearGradient id="A" x1="28.858" y1="63.068" x2="62.144" y2="29.782" gradientUnits="userSpaceOnUse"><stop stop-color="#ffd600"/><stop offset=".5" stop-color="#ff0100"/><stop offset="1" stop-color="#d800b9"/></linearGradient><linearGradient id="B" x1="38.239" y1="53.687" x2="52.763" y2="39.163" gradientUnits="userSpaceOnUse"><stop stop-color="#ff6400"/><stop offset=".5" stop-color="#ff0100"/><stop offset="1" stop-color="#fd0056"/></linearGradient><linearGradient id="C" x1="54.48" y1="37.446" x2="57.874" y2="34.052" gradientUnits="userSpaceOnUse"><stop stop-color="#f30072"/><stop offset="1" stop-color="#e50097"/></linearGradient><clipPath id="D"><path fill="#fff" transform="translate(25.501 26.425)" d="M0 0h40v40H0z"/></clipPath></defs></svg>
                  </div>
                </div>
                <div class="parallax-layer" style="padding-left: 85.8%;" data-depth="0.25">
                  <div class="position-relative" style="top: 35.5%;">
                    <div class="ratio ratio-1x1"></div>
                    <span class="position-absolute top-0 start-0 w-100 h-100 bg-white rounded-circle d-dark-mode-none" style="box-shadow: 0 12px 48px -8px rgba(189, 196, 221, .35);"></span>
                    <span class="position-absolute top-0 start-0 w-100 h-100 rounded-circle d-none d-dark-mode-block" style="background-color: #1c2126;"></span>
                    <svg class="position-absolute top-0 start-0 z-2" viewBox="0 0 92 92" xmlns="http://www.w3.org/2000/svg"><path d="M34.921 50.845a4.211 4.211 0 1 1-4.21-4.211h4.211v4.211zm2.105 0a4.211 4.211 0 1 1 8.421 0v10.526a4.211 4.211 0 0 1-8.421 0V50.845z" fill="#ff185b"/><path d="M41.236 34.003a4.211 4.211 0 1 1 4.211-4.21v4.211h-4.211zm0 2.105a4.211 4.211 0 1 1 0 8.421H30.71a4.211 4.211 0 1 1 0-8.421h10.526z" fill="#00c5f1"/><path d="M58.079 40.319a4.211 4.211 0 1 1 4.21 4.211h-4.211v-4.211zm-2.106 0a4.211 4.211 0 1 1-8.421 0V29.793a4.211 4.211 0 1 1 8.421 0v10.526z" fill="#00b67b"/><path d="M51.763 57.161a4.21 4.21 0 1 1-4.211 4.211v-4.211h4.211zm0-2.105a4.211 4.211 0 1 1 0-8.421h10.526a4.211 4.211 0 1 1 0 8.421H51.763z" fill="#ffb20f"/></svg>
                  </div>
                </div>
                <div class="parallax-layer" style="padding-right: 27.8%; padding-left: 62.9%;" data-depth="0.35">
                  <div class="position-relative" style="top: 30.7%;">
                    <div class="ratio ratio-1x1"></div>
                    <span class="position-absolute top-0 start-0 w-100 h-100 bg-white rounded-circle d-dark-mode-none" style="box-shadow: 0 12px 48px -8px rgba(189, 196, 221, .45);"></span>
                    <span class="position-absolute top-0 start-0 w-100 h-100 rounded-circle d-none d-dark-mode-block" style="background-color: #1c2126;"></span>
                    <svg class="position-absolute top-0 start-0 z-2" viewBox="0 0 62 62" fill="#03a9f4" xmlns="http://www.w3.org/2000/svg"><path d="M44.73 22.4611C43.6887 22.9178 42.5792 23.2206 41.4225 23.3676C42.6125 22.6571 43.5207 21.5406 43.9477 20.1948C42.8382 20.8563 41.6132 21.3236 40.3077 21.5843C39.2542 20.4626 37.7527 19.7678 36.1147 19.7678C32.9367 19.7678 30.3782 22.3473 30.3782 25.5096C30.3782 25.9646 30.4167 26.4021 30.5112 26.8186C25.739 26.5858 21.5162 24.2986 18.6795 20.8143C18.1842 21.6736 17.8937 22.6571 17.8937 23.7158C17.8937 25.7038 18.9175 27.4661 20.4435 28.4863C19.5212 28.4688 18.6165 28.2011 17.85 27.7793C17.85 27.7968 17.85 27.8196 17.85 27.8423C17.85 30.6318 19.8397 32.9488 22.449 33.4826C21.9817 33.6103 21.4725 33.6716 20.944 33.6716C20.5765 33.6716 20.2055 33.6506 19.8572 33.5736C20.601 35.8468 22.7115 37.5181 25.221 37.5723C23.268 39.1001 20.7882 40.0206 18.1037 40.0206C17.633 40.0206 17.1815 39.9996 16.73 39.9418C19.2727 41.5816 22.2862 42.5178 25.536 42.5178C36.099 42.5178 41.874 33.7678 41.874 26.1833C41.874 25.9296 41.8652 25.6846 41.853 25.4413C42.9922 24.6328 43.9495 23.6231 44.73 22.4611Z"/></svg>
                  </div>
                </div>
                <div class="parallax-layer" style="padding-right: 45%; padding-left: 45%;" data-depth="0.45">
                  <div class="position-relative" style="top: 73.5%;">
                    <div class="ratio ratio-1x1"></div>
                    <span class="position-absolute top-0 start-0 w-100 h-100 bg-white rounded-circle d-dark-mode-none" style="box-shadow: 0 12px 48px -8px rgba(189, 196, 221, .45);"></span>
                    <span class="position-absolute top-0 start-0 w-100 h-100 rounded-circle d-none d-dark-mode-block" style="background-color: #1c2126;"></span>
                    <svg class="position-absolute top-0 start-0 z-2" viewBox="0 0 61 62" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M38.7451 44.777H22.1996C21.1496 44.777 20.2905 43.9179 20.2905 42.8679V18.6861C20.2905 17.6361 21.1496 16.777 22.1996 16.777H33.6542L40.6542 23.777V42.8679C40.6542 43.9179 39.7951 44.777 38.7451 44.777Z" fill="#00ad3c"/><path d="M33.6543 16.777L40.6543 23.777H33.6543V16.777Z" fill="#00831e"/><path d="M24.1089 27.7543V36.6634H36.8361V27.7543H24.1089ZM29.6771 35.0724H25.6999V33.0043H29.6771V35.0724ZM29.6771 31.4134H25.6999V29.3452H29.6771V31.4134ZM35.2453 35.0724H31.268V33.0043H35.2453V35.0724ZM35.2453 31.4134H31.268V29.3452H35.2453V31.4134Z" fill="#fbffff"/></svg>
                  </div>
                </div>
                <div class="parallax-layer" style="padding-right: 73.3%; padding-left: 11.1%;" data-depth="0.25">
                  <div class="position-relative" style="top: 78.8%;">
                    <div class="ratio ratio-1x1"></div>
                    <span class="position-absolute top-0 start-0 w-100 h-100 bg-white rounded-circle d-dark-mode-none" style="box-shadow: 0 12px 48px -8px rgba(189, 196, 221, .35);"></span>
                    <span class="position-absolute top-0 start-0 w-100 h-100 rounded-circle d-none d-dark-mode-block" style="background-color: #1c2126;"></span>
                    <svg class="position-absolute top-0 start-0 z-2" viewBox="0 0 102 102" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M33.1883 66.9909H39.8702V50.7636L35.4948 43.1234L30.3247 43.6045V64.1273C30.3247 65.7094 31.6062 66.9909 33.1883 66.9909Z" fill="#0085f7"/><path d="M62.7793 66.9909H69.4612C71.0433 66.9909 72.3248 65.7094 72.3248 64.1273V43.6045L67.1621 43.1234L62.7794 50.7636V66.9909H62.7793Z" fill="#00a94b"/><path d="M62.7794 38.3545L58.8545 45.8442L62.7794 50.7636L72.3249 43.6045V39.7863C72.3249 36.2473 68.2848 34.2261 65.4522 36.35L62.7794 38.3545Z" fill="#ffbc00"/><path fill-rule="evenodd" clip-rule="evenodd" d="M39.8704 50.7636L36.1304 42.8632L39.8704 38.3545L51.3249 46.9454L62.7795 38.3545V50.7636L51.3249 59.3545L39.8704 50.7636Z" fill="#ff4131"/><path d="M30.3247 39.7863V43.6045L39.8702 50.7636V38.3545L37.1974 36.35C34.3648 34.2261 30.3247 36.2473 30.3247 39.7863Z" fill="#e51c19"/></svg>
                  </div>
                </div>
                <div class="parallax-layer" style="padding-right: 68.2%; padding-left: 21%;" data-depth="0.4">
                  <div class="position-relative" style="top: 52.9%;">
                    <div class="ratio ratio-1x1"></div>
                    <span class="position-absolute top-0 start-0 w-100 h-100 bg-white rounded-circle d-dark-mode-none" style="box-shadow: 0 12px 48px -8px rgba(189, 196, 221, .4);"></span>
                    <span class="position-absolute top-0 start-0 w-100 h-100 rounded-circle d-none d-dark-mode-block" style="background-color: #1c2126;"></span>
                    <svg class="position-absolute top-0 start-0 z-2" viewBox="0 0 72 71" xmlns="http://www.w3.org/2000/svg" fill="#0061ff"><path d="M35.8477 27.045L27.8477 32.1402L35.8477 37.2356L27.8477 42.3308L19.8477 37.2356L27.8477 32.1402L19.8477 27.045L27.8477 21.9498L35.8477 27.045Z"/><path d="M27.8237 44.0212L35.8237 38.926L43.8237 44.0212L35.8237 49.1164L27.8237 44.0212Z"/><path d="M35.8477 37.2356L43.8477 32.1402L35.8477 27.045L43.8477 21.9498L51.8477 27.045L43.8477 32.1402L51.8477 37.2356L43.8477 42.3308L35.8477 37.2356Z"/></svg>
                  </div>
                </div>
                <div class="parallax-layer" style="padding-right: 16%; padding-left: 71.4%;" data-depth="0.3">
                  <div class="position-relative" style="top: 67.6%;">
                    <div class="ratio ratio-1x1"></div>
                    <span class="position-absolute top-0 start-0 w-100 h-100 bg-white rounded-circle d-dark-mode-none" style="box-shadow: 0 12px 48px -8px rgba(189, 196, 221, .35);"></span>
                    <span class="position-absolute top-0 start-0 w-100 h-100 rounded-circle d-none d-dark-mode-block" style="background-color: #1c2126;"></span>
                    <svg class="position-absolute top-0 start-0 z-2" viewBox="0 0 82 81" fill="#5865f2" xmlns="http://www.w3.org/2000/svg"><path d="M55.3042 27.7464C52.7547 26.5766 50.0208 25.7147 47.1623 25.2211C47.1103 25.2115 47.0582 25.2354 47.0314 25.2829C46.6798 25.9083 46.2903 26.7241 46.0176 27.3654C42.9431 26.905 39.8844 26.905 36.873 27.3654C36.6002 26.7099 36.1966 25.9083 35.8434 25.2829C35.8166 25.2369 35.7645 25.2131 35.7125 25.2211C32.8556 25.7131 30.1217 26.575 27.5706 27.7464C27.5485 27.7559 27.5296 27.7718 27.5171 27.7924C22.3314 35.5397 20.9108 43.0965 21.6077 50.5597C21.6108 50.5961 21.6313 50.6311 21.6597 50.6533C25.081 53.1659 28.3953 54.6912 31.6478 55.7023C31.6999 55.7182 31.755 55.6992 31.7881 55.6563C32.5575 54.6056 33.2434 53.4977 33.8314 52.3326C33.8661 52.2644 33.833 52.1834 33.762 52.1565C32.6742 51.7438 31.6383 51.2406 30.6418 50.6693C30.563 50.6233 30.5567 50.5105 30.6292 50.4565C30.8389 50.2994 31.0487 50.1359 31.2489 49.9708C31.2852 49.9407 31.3356 49.9343 31.3782 49.9533C37.9245 52.9422 45.0116 52.9422 51.4806 49.9533C51.5231 49.9327 51.5736 49.9391 51.6114 49.9692C51.8117 50.1343 52.0214 50.2993 52.2327 50.4565C52.3052 50.5104 52.3004 50.6232 52.2217 50.6692C51.2252 51.2517 50.1893 51.7437 49.0999 52.1548C49.0289 52.1818 48.9974 52.2643 49.0321 52.3325C49.6328 53.496 50.3187 54.6039 51.0738 55.6547C51.1054 55.6991 51.1621 55.7182 51.2142 55.7022C54.4825 54.6912 57.7967 53.1658 61.2181 50.6532C61.2481 50.6311 61.267 50.5977 61.2701 50.5612C62.1042 41.933 59.8731 34.4381 55.356 27.794C55.3451 27.7718 55.3262 27.7559 55.3042 27.7464ZM34.8092 46.0154C32.8383 46.0154 31.2143 44.206 31.2143 41.9838C31.2143 39.7617 32.8067 37.9522 34.8092 37.9522C36.8272 37.9522 38.4355 39.7775 38.4039 41.9838C38.4039 44.206 36.8114 46.0154 34.8092 46.0154ZM48.1003 46.0154C46.1296 46.0154 44.5056 44.206 44.5056 41.9838C44.5056 39.7617 46.098 37.9522 48.1003 37.9522C50.1185 37.9522 51.7267 39.7775 51.6952 41.9838C51.6952 44.206 50.1185 46.0154 48.1003 46.0154Z"/></svg>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-5 col-xl-4 offset-lg-1 text-center text-md-start">
              <h3 class="h2 mb-lg-4">Tasks automation</h3>
              <p class="fs-lg pb-lg-2 mb-4">Integrate our smart AI with the tools you already know and use. 10x times increase your productivity and efficiency of your team.</p>
              <a href="#" class="btn btn-outline-primary rounded-pill">
                Learn more
                <i class="ai-arrow-right fs-lg ms-2 me-n1"></i>
              </a>
            </div>
          </div>


          <!-- Use case -->
          <div class="row align-items-center justify-content-center py-4 py-md-5 my-2 my-sm-3 my-md-0 my-xl-3">
            <div class="col-11 col-sm-9 col-md-7 col-lg-6 offset-lg-1 order-md-2 pb-2 pb-sm-3 pb-md-0 mb-4 mb-md-0">
              <div class="parallax" style="max-width: 636px;">
                <div class="parallax-layer" data-depth="0.1">
                  <img src="assets/img/landing/saas-4/use-cases/chat-bot/window-light.png" class="d-dark-mode-none rounded-4" style="box-shadow: 0 10.2px 41px -6.8px rgba(189, 196, 221, .30);" alt="Chat bot UI window">
                  <img src="assets/img/landing/saas-4/use-cases/chat-bot/window-dark.png" class="d-none d-dark-mode-block rounded-4" style="box-shadow: 0 10.2px 41px -6.8px rgba(0, 0, 0, .20);" alt="Chat bot UI window">
                </div>
                <div class="parallax-layer" data-depth="0.15">
                  <img src="assets/img/landing/saas-4/use-cases/chat-bot/message1-light.png" class="d-dark-mode-none" alt="Message">
                  <img src="assets/img/landing/saas-4/use-cases/chat-bot/message1-dark.png" class="d-none d-dark-mode-block" alt="Message">
                </div>
                <div class="parallax-layer" data-depth="0.25">
                  <img src="assets/img/landing/saas-4/use-cases/chat-bot/message2-light.png" class="d-dark-mode-none" alt="Message">
                  <img src="assets/img/landing/saas-4/use-cases/chat-bot/message2-dark.png" class="d-none d-dark-mode-block" alt="Message">
                </div>
                <div class="parallax-layer" data-depth="0.35">
                  <img src="assets/img/landing/saas-4/use-cases/chat-bot/message3-light.png" class="d-dark-mode-none" alt="Message">
                  <img src="assets/img/landing/saas-4/use-cases/chat-bot/message3-dark.png" class="d-none d-dark-mode-block" alt="Message">
                </div>
              </div>
            </div>
            <div class="col-md-5 col-xl-4 offset-xl-1 order-md-1 text-center text-md-start">
              <h3 class="h2 mb-lg-4">Advanced chat bot</h3>
              <p class="fs-lg pb-lg-2 mb-4">Seamlessly integrate natural language processing and machine learning capabilities into your chat bot and provide a personalized experience to your end users.</p>
              <a href="#" class="btn btn-outline-primary rounded-pill">
                Learn more
                <i class="ai-arrow-right fs-lg ms-2 me-n1"></i>
              </a>
            </div>
          </div>


          <!-- More button -->
          <div class="d-flex flex-column flex-sm-row align-items-center justify-content-center gap-3 gap-sm-4 pt-4 pb-3 py-md-5 my-1 my-sm-3 my-md-0 mt-xl-3 mb-xl-4">
            <div class="fs-xl">And many more...</div>
            <a href="#" class="btn btn-lg btn-outline-primary rounded-pill">Explore all use cases</a>
          </div>
        </div>
      </section>


      <!-- Map -->
      <section class="bg-dark py-5" data-bs-theme="dark">
        <div class="container pt-2 py-sm-3 py-md-4 py-lg-5 my-xxl-3">
          <div class="row pt-md-2 pt-lg-3 pt-xl-4 pb-lg-2 pb-xl-3">
            <div class="col-md-6">
              <h2 class="h1 pe-xxl-5 me-xl-4 mb-md-0">Our <span class="text-warning">data centers</span> spread all over the world. Get access  to the API from anywhere</h2>
            </div>
            <div class="col-md-6 col-xl-5 offset-xl-1">
              <p class="text-body fs-xl mb-0">Our data centers are a key component of our global infrastructure, providing reliable and scalable computing resources to customers around the world. We offer a highly distributed and resilient platform that can support the most demanding workloads.</p>
            </div>
          </div>
          <div class="pt-5 mt-sm-2 mt-md-3 mt-lg-4 mt-xl-5">
            <img src="assets/img/landing/saas-4/map.png" alt="Map">
          </div>
        </div>
      </section>


      <!-- Video -->
      <section class="position-relative py-5">
        <span class="position-absolute top-0 start-0 w-100 h-100 d-dark-mode-none" style="background: linear-gradient(360deg, #fff 5.39%, #f6f9fc 78.66%);"></span>
        <span class="position-absolute top-0 start-0 w-100 h-100 d-none d-dark-mode-block" style="background: linear-gradient(360deg, #121519 5.39%, rgba(255, 255, 255, .03) 78.66%);"></span>
        <div class="container position-relative z-2 py-2 py-sm-3 py-sm-4 py-md-5">
          <div class="row align-items-center py-lg-2 py-xl-3 my-xl-1 my-xxl-3">
            <div class="col-md-5 col-xl-4">
              <h2 class="h1 pb-2 pb-sm-3 mb-md-0">Learn <span class="text-gradient-primary">how Around works</span> in a nutshell. Watch a short introductory video</h2>
            </div>
            <div class="col-md-7 offset-xl-1">
              <div class="position-relative">
                <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center z-5">
                  <a href="https://www.youtube.com/watch?v=ADpOLD2z1Ns" class="btn btn-icon btn-xl btn-primary rounded-circle stretched-link" data-bs-toggle="video" aria-label="Play video">
                    <i class="ai-play-filled"></i>
                  </a>
                </div>
                <img src="assets/img/landing/saas-4/video-cover-light.jpg" class="d-dark-mode-none rounded-3" alt="Video cover">
                <img src="assets/img/landing/saas-4/video-cover-dark.png" class="d-none d-dark-mode-block rounded-3" alt="Video cover">
              </div>
            </div>
          </div>
        </div>
      </section>


      <!-- Testimonials -->
      <section class="position-relative pt-2 pt-sm-0 pt-md-2 pt-lg-3 pt-xl-4 pb-lg-4">
        <div class="container pb-2">
          <h2 class="h1 text-center">Trusted by leading companies</h2>
          <p class="fs-lg text-center pb-4 pb-lg-5 mb-2 mb-sm-3 mb-xl-4">Learn why top companies from around the globe choose us</p>
          <div class="masonry-grid row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-4 g-sm-3 g-md-4">
  
            <!-- Item -->
            <div class="masonry-grid-item col">
              <div class="card border-0 bg-secondary p-1 p-sm-0 p-md-2">
                <img src="assets/img/landing/saas-4/integrations/envato-light.svg" class="d-block d-dark-mode-none mx-auto" width="165" alt="Envato">
                <img src="assets/img/landing/saas-4/integrations/envato-dark.svg" class="d-none d-dark-mode-block mx-auto" width="165" alt="Envato">
                <div class="card-body text-center pt-1">
                  <p class="pb-3 mb-3">Streamline your workflow and save valuable time with this SaaS platform's powerful AI models, which takes care of the heavy lifting and delivers top-notch results.</p>
                  <img src="assets/img/avatar/50.jpg" class="d-inline-block rounded-circle" width="80" alt="Avatar">
                  <div class="pt-2 mt-1">
                    <h3 class="h5 mb-1">Emma Johnson</h3>
                    <p class="fs-sm text-body-secondary mb-0">CEO, Co-Founder</p>
                  </div>
                </div>
              </div>
            </div>
  
            <!-- Item -->
            <div class="masonry-grid-item col">
              <div class="card border-0 bg-secondary p-1 p-sm-0 p-md-2">
                <img src="assets/img/landing/saas-4/integrations/firefox-light.svg" class="d-block d-dark-mode-none mx-auto" width="165" alt="Firefox">
                <img src="assets/img/landing/saas-4/integrations/firefox-dark.svg" class="d-none d-dark-mode-block mx-auto" width="165" alt="Firefox">
                <div class="card-body text-center pt-1">
                  <p class="pb-3 mb-3">Transform your business with this SaaS platform's outstanding AI models API, which delivers unparalleled efficiency, great service, and outstanding results.</p>
                  <div class="pt-2 mt-1">
                    <h3 class="h5 mb-1">Robert Thompson</h3>
                    <p class="fs-sm text-body-secondary mb-0">Chief Information Officer</p>
                  </div>
                </div>
              </div>
            </div>
  
            <!-- Item -->
            <div class="masonry-grid-item col">
              <div class="card border-0 bg-secondary p-1 p-sm-0 p-md-2">
                <img src="assets/img/landing/saas-4/integrations/magento-light.svg" class="d-block d-dark-mode-none mx-auto" width="165" alt="Magento">
                <img src="assets/img/landing/saas-4/integrations/magento-dark.svg" class="d-none d-dark-mode-block mx-auto" width="165" alt="Magento">
                <div class="card-body text-center pt-1">
                  <p class="pb-3 mb-3">Differentiate your app from the competition with this SaaS platform's outstanding performance and exceptional API for implementing AI models into your application.</p>
                  <img src="assets/img/avatar/51.jpg" class="d-inline-block rounded-circle" width="80" alt="Avatar">
                  <div class="pt-2 mt-1">
                    <h3 class="h5 mb-1">Christopher Davis</h3>
                    <p class="fs-sm text-body-secondary mb-0">Network Administrator</p>
                  </div>
                </div>
              </div>
            </div>
  
            <!-- Item -->
            <div class="masonry-grid-item col">
              <div class="card border-0 bg-secondary p-1 p-sm-0 p-md-2">
                <img src="assets/img/landing/saas-4/integrations/pingdom-light.svg" class="d-block d-dark-mode-none mx-auto" width="165" alt="Pingdom">
                <img src="assets/img/landing/saas-4/integrations/pingdom-dark.svg" class="d-none d-dark-mode-block mx-auto" width="165" alt="Pingdom">
                <div class="card-body text-center pt-1">
                  <p class="pb-3 mb-3">Experience game-changing AI models that are accessible and user-friendly, thanks to this exceptional SaaS platform that offers an API for seamless integration.</p>
                  <img src="assets/img/avatar/52.jpg" class="d-inline-block rounded-circle" width="80" alt="Avatar">
                  <div class="pt-2 mt-1">
                    <h3 class="h5 mb-1">Samantha Grace</h3>
                    <p class="fs-sm text-body-secondary mb-0">Data Analyst</p>
                  </div>
                </div>
              </div>
            </div>
  
            <!-- Item -->
            <div class="masonry-grid-item col">
              <div class="card border-0 bg-secondary p-1 p-sm-0 p-md-2">
                <img src="assets/img/landing/saas-4/integrations/woocommerce-light.svg" class="d-block d-dark-mode-none mx-auto" width="165" alt="WooCommerce">
                <img src="assets/img/landing/saas-4/integrations/woocommerce-dark.svg" class="d-none d-dark-mode-block mx-auto" width="165" alt="WooCommerce">
                <div class="card-body text-center pt-1">
                  <p class="pb-3 mb-3">This SaaS platform offers an API for integrating AI models into your app with ease, delivering impressive results and enabling you to take your business to the next level.</p>
                  <div class="pt-2 mt-1">
                    <h3 class="h5 mb-1">William Matthews</h3>
                    <p class="fs-sm text-body-secondary mb-0">Software Developer</p>
                  </div>
                </div>
              </div>
            </div>
  
            <!-- Item -->
            <div class="masonry-grid-item col">
              <div class="card border-0 bg-secondary p-1 p-sm-0 p-md-2">
                <img src="assets/img/landing/saas-4/integrations/shopify-light.svg" class="d-block d-dark-mode-none mx-auto" width="165" alt="Shopify">
                <img src="assets/img/landing/saas-4/integrations/shopify-dark.svg" class="d-none d-dark-mode-block mx-auto" width="165" alt="Shopify">
                <div class="card-body text-center pt-1">
                  <p class="pb-3 mb-3">Get ahead of the competition with this SaaS platform's AI models API, which effortlessly automates processes and delivers exceptional service to ensure your success.</p>
                  <div class="pt-2 mt-1">
                    <h3 class="h5 mb-1">Olivia Rodriguez</h3>
                    <p class="fs-sm text-body-secondary mb-0">Human Resources</p>
                  </div>
                </div>
              </div>
            </div>
  
            <!-- Item -->
            <div class="masonry-grid-item col">
              <div class="card border-0 bg-secondary p-1 p-sm-0 p-md-2">
                <img src="assets/img/landing/saas-4/integrations/laravel.svg" class="d-block mx-auto" width="165" alt="Laravel">
                <div class="card-body text-center pt-1">
                  <p class="pb-3 mb-3">Implementing AI models has never been easier or more reliable, thanks to this SaaS platform's seamless API integration and accurate, dependable results.</p>
                  <div class="pt-2 mt-1">
                    <h3 class="h5 mb-1">Benjamin Smith</h3>
                    <p class="fs-sm text-body-secondary mb-0">Project Manager</p>
                  </div>
                </div>
              </div>
            </div>
  
            <!-- Item -->
            <div class="masonry-grid-item col">
              <div class="card border-0 bg-secondary p-1 p-sm-0 p-md-2">
                <img src="assets/img/landing/saas-4/integrations/vite-light.svg" class="d-block d-dark-mode-none mx-auto" width="165" alt="Vite">
                <img src="assets/img/landing/saas-4/integrations/vite-dark.svg" class="d-none d-dark-mode-block mx-auto" width="165" alt="Vite">
                <div class="card-body text-center pt-1">
                  <p class="pb-3 mb-3">Stay ahead of the curve and leverage cutting-edge technology with this SaaS platform's unparalleled performance and impressive results.</p>
                  <div class="pt-2 mt-1">
                    <h3 class="h5 mb-1">Abigail Collins</h3>
                    <p class="fs-sm text-body-secondary mb-0">Chief Technology Officer</p>
                  </div>
                </div>
              </div>
            </div>
  
            <!-- Item -->
            <div class="masonry-grid-item col">
              <div class="card border-0 bg-secondary p-1 p-sm-0 p-md-2">
                <img src="assets/img/landing/saas-4/integrations/angular-light.svg" class="d-block d-dark-mode-none mx-auto" width="165" alt="Angular">
                <img src="assets/img/landing/saas-4/integrations/angular-dark.svg" class="d-none d-dark-mode-block mx-auto" width="165" alt="Angular">
                <div class="card-body text-center pt-1">
                  <p class="pb-3 mb-3">Efficiently harness the power of AI models with this reliable and easy-to-use SaaS platform, featuring an API that provides excellent support and streamlines your processes.</p>
                  <div class="pt-2 mt-1">
                    <h3 class="h5 mb-1">Elijah Brown</h3>
                    <p class="fs-sm text-body-secondary mb-0">Project Manager</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Gradient -->
        <div class="d-none d-md-block">
          <span class="position-absolute start-0 bottom-0 w-100 z-1 d-dark-mode-none" style="height: 390px; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 50.14%);"></span>
          <span class="position-absolute start-0 bottom-0 w-100 z-2 d-none d-dark-mode-block" style="height: 375px; background: linear-gradient(180deg, rgba(11, 15, 25, 0) 0%, #121519 50.14%);"></span>
        </div>
        <div class="d-md-none">
          <span class="position-absolute start-0 bottom-0 w-100 z-1 d-dark-mode-none" style="height: 300px; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 50.14%);"></span>
          <span class="position-absolute start-0 bottom-0 w-100 z-2 d-none d-dark-mode-block" style="height: 290px; background: linear-gradient(180deg, rgba(11, 15, 25, 0) 0%, #121519 50.14%);"></span>
        </div>

        <!-- More button -->
        <div class="position-absolute start-0 bottom-0 w-100 d-flex justify-content-center z-2 pb-5 px-3 mb-3 mb-md-4 mb-lg-5">
          <a href="#" class="btn btn-outline-primary rounded-pill mb-xl-3 mb-xxl-4">Read more reviews</a>
        </div>
      </section>


      <!-- Pricing / Comparison -->
      <section class="position-relative bg-dark pt-2 pt-lg-4 pt-xl-5" style="background: linear-gradient(90deg, #121519 0%, #191C20 51.04%, #121519 100%);
      ">
        <div class="jarallax position-absolute top-0 start-0 w-100 h-100" data-jarallax data-speed="0.4">
          <div class="jarallax-img" style="background-image: url(assets/img/landing/saas-4/pricing-bg-pattern.png);"></div>
        </div>
        <div class="container position-relative z-2 pt-5" data-bs-theme="dark">
          <h2 class="h1 text-center pt-2 pt-sm-3 pb-4 pb-md-5 mb-2 mb-md-0 mb-lg-2">Around vs Custom development</h2>

          <!-- Table visible on screens > 768px -->
          <div class="position-relative ms-n4 ms-md-0 d-none d-md-block">

            <div class="position-absolute top-0 start-50 translate-middle-x h-100 bg-secondary rounded-3 rounded-bottom-0 d-none d-lg-block" style="width: 342px;"></div>
            <div class="position-absolute top-0 start-50 translate-middle-x h-100 bg-secondary rounded-3 rounded-bottom-0 d-lg-none" style="width: 300px;"></div>

            <!-- Row -->
            <div class="row row-cols-3 align-items-center position-relative z-2 g-0">
              <div class="col">&nbsp;</div>
              <div class="col py-2 py-md-3">
                <div class="text-center py-4 mx-auto" style="width: 264px;">
                  <h3 class="h4 mb-sm-4">Around</h3>
                  <a href="#" class="btn btn-primary w-100 rounded-pill mb-2">Get started - Free</a>
                  <p class="text-body fs-xs mb-0">Our pricing starts at as low as $1,299 per team</p>
                </div>
              </div>
              <div class="col text-center pe-lg-5">
                <h3 class="h4 pt-3 pt-md-4 mb-0 mx-auto" style="width: 264px;">Building In-House</h3>
              </div>
              <div class="position-relative w-100 opacity-40">
                <span class="position-absolute top-0 start-0 w-100" style="height: 1px; background: linear-gradient(270deg, #121519 0%, rgba(11, 15, 25, 0) 54.17%, #121519 98.44%);"></span>
                <span class="d-block w-100 bg-primary" style="height: 1px;"></span>
              </div>
            </div>

            <!-- Row -->
            <div class="row row-cols-3 align-items-center position-relative z-2 g-0">
              <div class="col py-3 py-md-4 ps-lg-5">
                <div class="text-white opacity-80 fs-lg py-1 px-4 mx-auto" style="width: 208px;">Data Models Infrastructure Cost</div>
              </div>
              <div class="col py-3 py-md-4">
                <div class="text-center py-1 px-4 mx-auto" style="width: 264px;">
                  <div  class="text-white fs-lg fw-semibold">Included</div>
                  <div class="text-body fs-xs">Cloud hosted AI/ML capacities</div>
                </div>
              </div>
              <div class="col py-3 py-md-4 pe-lg-5">
                <div class="text-center py-1 px-4 mx-auto" style="width: 264px;">
                  <div  class="text-white fs-lg fw-semibold">From $10k to $50k</div>
                  <div class="text-body fs-xs">per month</div>
                </div>
              </div>
              <div class="position-relative w-100 opacity-40">
                <span class="position-absolute top-0 start-0 w-100 h-1" style="height: 1px; background: linear-gradient(270deg, #121519 0%, rgba(11, 15, 25, 0) 54.17%, #121519 98.44%);"></span>
                <span class="d-block w-100 bg-primary" style="height: 1px;"></span>
              </div>
            </div>

            <!-- Row -->
            <div class="row row-cols-3 align-items-center position-relative z-2 g-0">
              <div class="col py-3 py-md-4 ps-lg-5">
                <div class="text-white opacity-80 fs-lg py-1 px-4 mx-auto" style="width: 208px;">Engineering Cost</div>
              </div>
              <div class="col py-3 py-md-4">
                <div class="text-center py-1 px-4 mx-auto" style="width: 264px;">
                  <div  class="text-white fs-lg fw-semibold">Included</div>
                  <div class="text-body fs-xs">with our premium plans</div>
                </div>
              </div>
              <div class="col py-3 py-md-4 pe-lg-5">
                <div class="text-center py-1 px-4 mx-auto" style="width: 264px;">
                  <div  class="text-white fs-lg fw-semibold">From $25k to $30k</div>
                  <div class="text-body fs-xs">per engineer per month</div>
                </div>
              </div>
              <div class="position-relative w-100 opacity-40">
                <span class="position-absolute top-0 start-0 w-100 h-1" style="height: 1px; background: linear-gradient(270deg, #121519 0%, rgba(11, 15, 25, 0) 54.17%, #121519 98.44%);"></span>
                <span class="d-block w-100 bg-primary" style="height: 1px;"></span>
              </div>
            </div>

            <!-- Row -->
            <div class="row row-cols-3 align-items-center position-relative z-2 g-0">
              <div class="col py-3 py-md-4 ps-lg-5">
                <div class="text-white opacity-80 fs-lg py-1 px-4 mx-auto" style="width: 208px;">Time to Implement</div>
              </div>
              <div class="col py-4">
                <div class="text-center py-1 px-4 mx-auto" style="width: 264px;">
                  <div  class="text-white fs-lg fw-semibold">Get started in minutes</div>
                </div>
              </div>
              <div class="col py-3 py-md-4 pe-lg-5">
                <div class="text-center py-1 px-4 mx-auto" style="width: 264px;">
                  <div  class="text-white fs-lg fw-semibold">Average 6-9 months</div>
                  <div class="text-body fs-xs">depends on team qualification</div>
                </div>
              </div>
              <div class="position-relative w-100 opacity-40">
                <span class="position-absolute top-0 start-0 w-100 h-1" style="height: 1px; background: linear-gradient(270deg, #121519 0%, rgba(11, 15, 25, 0) 54.17%, #121519 98.44%);"></span>
                <span class="d-block w-100 bg-primary" style="height: 1px;"></span>
              </div>
            </div>

            <!-- Row -->
            <div class="row row-cols-3 align-items-center position-relative z-2 g-0">
              <div class="col py-3 py-md-4 ps-lg-5">
                <div class="text-white opacity-80 fs-lg py-1 px-4 mx-auto" style="width: 208px;">Maintenance &amp; Operational Cost</div>
              </div>
              <div class="col py-3 py-md-4">
                <div class="text-center py-1 px-4 mx-auto" style="width: 264px;">
                  <div  class="text-white fs-lg fw-semibold">Included</div>
                  <div class="text-body fs-xs">with our premium plans</div>
                </div>
              </div>
              <div class="col py-3 py-md-4 pe-lg-5">
                <div class="text-center py-1 px-4 mx-auto" style="width: 264px;">
                  <div  class="text-white fs-lg fw-semibold">Average $20k</div>
                  <div class="text-body fs-xs">per engineer per month</div>
                </div>
              </div>
              <div class="position-relative w-100 opacity-40">
                <span class="position-absolute top-0 start-0 w-100 h-1" style="height: 1px; background: linear-gradient(270deg, #121519 0%, rgba(11, 15, 25, 0) 54.17%, #121519 98.44%);"></span>
                <span class="d-block w-100 bg-primary" style="height: 1px;"></span>
              </div>
            </div>
          </div>

          <!-- Tbale visible on screens < 768px -->
          <table class="table table-layout-fixed d-md-none" style="--ar-table-bg: transparent;">
            <thead>
              <tr>
                <th scope="col" class="text-center">
                  <div class="h5">Around</div>
                  <a href="#" class="btn btn-sm btn-primary w-100 rounded-pill mb-2">Get started - Free</a>
                  <p class="text-body fs-xs mb-0">Our pricing starts at as low as $1,299 per team</p>
                </th>
                <th scope="col" class="align-middle text-center">
                  <div class="h5 mb-0">Building In-House</div>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row" colspan="2" class="bg-secondary text-white text-center">Data Models Infrastructure Cost</th>
              </tr>
              <tr>
                <td class="text-center">
                  <div  class="text-white fw-semibold">Included</div>
                  <div class="text-body fs-xs">Cloud hosted AI/ML capacities</div>
                </td>
                <td class="text-center">
                  <div  class="text-white fw-semibold">From $10k to $50k</div>
                  <div class="text-body fs-xs">per month</div>
                </td>
              </tr>
              <tr>
                <th scope="row" colspan="2" class="bg-secondary text-white text-center">
                  Engineering Cost
                </th>
              </tr>
              <tr>
                <td class="text-center">
                  <div  class="text-white fw-semibold">Included</div>
                  <div class="text-body fs-xs">with our premium plans</div>
                </td>
                <td class="text-center">
                  <div  class="text-white fw-semibold">From $25k to $30k</div>
                  <div class="text-body fs-xs">per engineer per month</div>
                </td>
              </tr>
              <tr>
                <th scope="row" colspan="2" class="bg-secondary text-white text-center">
                  Time to Implement
                </th>
              </tr>
              <tr>
                <td class="text-center">
                  <div  class="text-white fw-semibold">Get started in minutes</div>
                </td>
                <td class="text-center">
                  <div  class="text-white fw-semibold">Average 6-9 months</div>
                  <div class="text-body fs-xs">depends on team qualification</div>
                </td>
              </tr>
              <tr>
                <th scope="row" colspan="2" class="bg-secondary text-white text-center">
                  Maintenance &amp; Operational Cost
                </th>
              </tr>
              <tr>
                <td class="text-center">
                  <div  class="text-white fw-semibold">Included</div>
                  <div class="text-body fs-xs">with our premium plans</div>
                </td>
                <td class="text-center">
                  <div  class="text-white fw-semibold">Average $20k</div>
                  <div class="text-body fs-xs">per engineer per month</div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="d-none d-md-block" style="height: 300px;"></div>
        <div class="d-md-none" style="height: 260px;"></div>
        <div class="d-flex position-absolute bottom-0 start-0 w-100 overflow-hidden mb-n1" style="color: var(--ar-body-bg);">
          <div class="position-relative start-50 translate-middle-x flex-shrink-0" style="width: 3774px;">
            <svg width="3774" height="201" viewBox="0 0 3774 201" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 200.003C0 200.003 1137.52 0.188224 1873.5 0.000134392C2614.84 -0.189325 3774 200.003 3774 200.003H0Z" fill="currentColor"/></svg>
          </div>
        </div>
      </section>
    </main>


    <!-- Footer -->
    <footer class="footer position-relative z-2 pb-3 pb-xl-0">
      <div class="d-none d-lg-block" style="margin-top: -70px;"></div>
      <div class="d-none d-md-block d-lg-none" style="margin-top: -100px;"></div>
      <div class="d-md-none" style="margin-top: -130px;"></div>
      <div class="container">
        <div class="row">

          <!-- About links -->
          <div class="col-12 col-xl-3 pb-sm-2 pb-md-3 mb-4 mb-lg-5 mb-xl-0">
            <div class="d-flex align-items-center mb-3 mb-xl-0">
              <div class="navbar-brand text-dark pb-xl-3 pe-2 pe-xl-0 mb-xl-2 me-4 me-xl-0">
                <span class="text-primary flex-shrink-0 me-2">
                  <svg width="35" height="32" viewBox="0 0 36 33" xmlns="http://www.w3.org/2000/svg">
                    <path fill="currentColor" d="M35.6,29c-1.1,3.4-5.4,4.4-7.9,1.9c-2.3-2.2-6.1-3.7-9.4-3.7c-3.1,0-7.5,1.8-10,4.1c-2.2,2-5.8,1.5-7.3-1.1c-1-1.8-1.2-4.1,0-6.2l0.6-1.1l0,0c0.6-0.7,4.4-5.2,12.5-5.7c0.5,1.8,2,3.1,3.9,3.1c2.2,0,4.1-1.9,4.1-4.2s-1.8-4.2-4.1-4.2c-2,0-3.6,1.4-4,3.3H7.7c-0.8,0-1.3-0.9-0.9-1.6l5.6-9.8c2.5-4.5,8.8-4.5,11.3,0L35.1,24C36,25.7,36.1,27.5,35.6,29z"></path>
                  </svg>
                </span>
                Around
              </div>
              <select class="form-select form-select-sm d-xl-none" style="max-width: 130px;">
                <option value="English">English</option>
                <option value="Français">Français</option>
                <option value="Deutsch">Deutsch</option>
                <option value="Italiano">Italiano</option>
              </select>

            </div>
            <div class="d-flex flex-wrap flex-xl-column ps-xl-5 ms-n3 ms-xl-2">
              <ul class="nav flex-xl-column">
                <li class="nav-item mb-1">
                  <a href="#" class="nav-link py-1 px-xl-0">About us</a>
                </li>
                <li class="nav-item mb-1">
                  <a href="#" class="nav-link py-1 px-xl-0">Careers<span class="badge bg-danger bg-opacity-10 rounded-pill ms-2"><span class="text-danger">Hiring</span></span></a>
                </li>
                <li class="nav-item mb-1">
                  <a href="#" class="nav-link py-1 px-xl-0">Contact us</a>
                </li>
                <li class="nav-item mb-1">
                  <a href="#" class="nav-link py-1 px-xl-0">Terms of service</a>
                </li>
              </ul>
              <ul class="nav flex-xl-column pt-xl-3">
                <li class="nav-item mb-1">
                  <a href="#" class="nav-link py-1 px-xl-0">GitHub</a>
                </li>
                <li class="nav-item mb-1">
                  <a href="#" class="nav-link py-1 px-xl-0">Twitter</a>
                </li>
                <li class="nav-item mb-1">
                  <a href="#" class="nav-link py-1 px-xl-0">Telegram</a>
                </li>
              </ul>
            </div>
            <div class="d-none d-xl-block pt-4 ps-5 ms-2">
              <select class="form-select form-select-sm" style="max-width: 130px;">
                <option value="English">English</option>
                <option value="Français">Français</option>
                <option value="Deutsch">Deutsch</option>
                <option value="Italiano">Italiano</option>
              </select>
            </div>
          </div>

          <!-- AI models links -->
          <div class="col-sm-6 col-md-4 col-xl-3 pb-1 mb-4">
            <h5 class="pb-md-1">AI models</h5>
            <div class="position-relative d-flex align-items-center py-2 my-1">
              <div class="bg-primary bg-opacity-10 text-primary rounded-circle lh-1 p-3">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M18 1.5C18.3442 1.5 18.6441 1.73422 18.7276 2.0681L18.9865 3.10356C19.2216 4.04406 19.9559 4.7784 20.8964 5.01353L21.9319 5.27239C22.2658 5.35586 22.5 5.65585 22.5 6C22.5 6.34415 22.2658 6.64414 21.9319 6.72761L20.8964 6.98647C19.9559 7.2216 19.2216 7.95594 18.9865 8.89644L18.7276 9.9319C18.6441 10.2658 18.3442 10.5 18 10.5C17.6558 10.5 17.3559 10.2658 17.2724 9.9319L17.0135 8.89644C16.7784 7.95594 16.0441 7.2216 15.1036 6.98647L14.0681 6.72761C13.7342 6.64414 13.5 6.34415 13.5 6C13.5 5.65585 13.7342 5.35586 14.0681 5.27239L15.1036 5.01353C16.0441 4.7784 16.7784 4.04406 17.0135 3.10356L17.2724 2.0681C17.3559 1.73422 17.6558 1.5 18 1.5ZM18 4.59616C17.6534 5.17111 17.1711 5.65342 16.5962 6C17.1711 6.34658 17.6534 6.82889 18 7.40384C18.3466 6.82889 18.8289 6.34658 19.4038 6C18.8289 5.65342 18.3466 5.17111 18 4.59616ZM9 4.5C9.33486 4.5 9.62915 4.72198 9.72114 5.04396L10.5343 7.89015C10.8903 9.13593 11.8641 10.1097 13.1099 10.4657L15.956 11.2789C16.278 11.3709 16.5 11.6651 16.5 12C16.5 12.3349 16.278 12.6291 15.956 12.7211L13.1098 13.5343C11.8641 13.8903 10.8903 14.8641 10.5343 16.1099L9.72114 18.956C9.62915 19.278 9.33486 19.5 9 19.5C8.66514 19.5 8.37085 19.278 8.27886 18.956L7.46566 16.1098C7.10972 14.8641 6.13593 13.8903 4.89015 13.5343L2.04396 12.7211C1.72198 12.6291 1.5 12.3349 1.5 12C1.5 11.6651 1.72198 11.3709 2.04396 11.2789L4.89015 10.4657C6.13593 10.1097 7.10972 9.13593 7.46566 7.89015L8.27886 5.04396C8.37085 4.72198 8.66514 4.5 9 4.5ZM9 7.98004L8.90795 8.30223C8.40963 10.0463 7.04632 11.4096 5.30223 11.9079L4.98004 12L5.30223 12.0921C7.04632 12.5904 8.40963 13.9537 8.90795 15.6978L9 16.02L9.09205 15.6978C9.59037 13.9537 10.9537 12.5904 12.6978 12.0921L13.02 12L12.6978 11.9079C10.9537 11.4096 9.59037 10.0463 9.09205 8.30223L9 7.98004ZM16.5 15C16.8228 15 17.1094 15.2066 17.2115 15.5128L17.6058 16.6956C17.7551 17.1435 18.1065 17.4949 18.5544 17.6442L19.7372 18.0385C20.0434 18.1406 20.25 18.4272 20.25 18.75C20.25 19.0728 20.0434 19.3594 19.7372 19.4615L18.5544 19.8558C18.1065 20.0051 17.7551 20.3565 17.6058 20.8044L17.2115 21.9872C17.1094 22.2934 16.8228 22.5 16.5 22.5C16.1772 22.5 15.8906 22.2934 15.7885 21.9872L15.3942 20.8044C15.2449 20.3565 14.8935 20.0051 14.4456 19.8558L13.2628 19.4615C12.9566 19.3594 12.75 19.0728 12.75 18.75C12.75 18.4272 12.9566 18.1406 13.2628 18.0385L14.4456 17.6442C14.8935 17.4949 15.2449 17.1435 15.3942 16.6956L15.7885 15.5128C15.8906 15.2066 16.1772 15 16.5 15ZM16.5 17.8354C16.2653 18.203 15.953 18.5153 15.5854 18.75C15.953 18.9847 16.2653 19.297 16.5 19.6646C16.7347 19.297 17.047 18.9847 17.4146 18.75C17.047 18.5153 16.7347 18.203 16.5 17.8354Z"/></svg>
              </div>
              <div class="nav flex-column ps-3">
                <a href="#" class="nav-link fw-semibold stretched-link p-0">Generative model</a>
                <div class="fs-xs">Generation of texts and images</div>
              </div>
            </div>
            <div class="position-relative d-flex align-items-center py-2 my-1">
              <div class="bg-warning bg-opacity-10 rounded-circle lh-1 p-3">
                <i class="ai-message text-warning fs-4 lh-1"></i>
              </div>
              <div class="nav flex-column ps-3">
                <a href="#" class="nav-link fw-semibold stretched-link p-0">Speech recognition</a>
                <div class="fs-xs">Transforms voice speech into text</div>
              </div>
            </div>
            <div class="position-relative d-flex align-items-center py-2 my-1">
              <div class="bg-success bg-opacity-10 rounded-circle lh-1 p-3">
                <i class="ai-file text-success fs-4 lh-1"></i>
              </div>
              <div class="nav flex-column ps-3">
                <a href="#" class="nav-link fw-semibold stretched-link p-0">Files transcription</a>
                <div class="fs-xs">Converts different types of files</div>
              </div>
            </div>
            <div class="position-relative d-flex align-items-center py-2 my-1">
              <div class="bg-info bg-opacity-10 rounded-circle lh-1 p-3">
                <i class="ai-terminal text-info fs-4 lh-1"></i>
              </div>
              <div class="nav flex-column ps-3">
                <a href="#" class="nav-link fw-semibold stretched-link p-0">Code generation</a>
                <div class="fs-xs">Autocompletion and generation</div>
              </div>
            </div>
            <div class="position-relative d-flex align-items-center py-2 my-1">
              <div class="bg-danger bg-opacity-10 rounded-circle lh-1 p-3">
                <i class="ai-search text-danger fs-4 lh-1"></i>
              </div>
              <div class="nav flex-column ps-3">
                <a href="#" class="nav-link fw-semibold stretched-link p-0">Smart search</a>
                <div class="fs-xs">Responds to search queries</div>
              </div>
            </div>
          </div>

          <!-- Integrations links -->
          <div class="col-sm-6 col-md-4 col-xl-3 pb-1 mb-4">
            <h5 class="pb-md-1">Integrations</h5>
            <div class="position-relative d-flex align-items-center py-2 my-1">
              <div class="bg-primary bg-opacity-10 rounded-circle lh-1 p-3">
                <i class="ai-share text-primary fs-4 lh-1"></i>
              </div>
              <div class="nav flex-column ps-3">
                <a href="#" class="nav-link fw-semibold stretched-link p-0">Social networks</a>
                <div class="fs-xs">Facebook, Instagram, Twitter...</div>
              </div>
            </div>
            <div class="position-relative d-flex align-items-center py-2 my-1">
              <div class="bg-primary bg-opacity-10 rounded-circle lh-1 p-3">
                <i class="ai-cart text-primary fs-4 lh-1"></i>
              </div>
              <div class="nav flex-column ps-3">
                <a href="#" class="nav-link fw-semibold stretched-link p-0">E-commerce</a>
                <div class="fs-xs">Shopify, WordPress, Magento...</div>
              </div>
            </div>
            <div class="position-relative d-flex align-items-center py-2 my-1">
              <div class="bg-primary bg-opacity-10 rounded-circle lh-1 p-3">
                <i class="ai-calendar-check text-primary fs-4 lh-1"></i>
              </div>
              <div class="nav flex-column ps-3">
                <a href="#" class="nav-link fw-semibold stretched-link p-0">Task / time management</a>
                <div class="fs-xs">Trello, Notion, Asana, Teams...</div>
              </div>
            </div>
            <div class="position-relative d-flex align-items-center py-2 my-1">
              <div class="bg-primary bg-opacity-10 rounded-circle lh-1 p-3">
                <i class="ai-mail text-primary fs-4 lh-1"></i>
              </div>
              <div class="nav flex-column ps-3">
                <a href="#" class="nav-link fw-semibold stretched-link p-0">Email / Chat apps</a>
                <div class="fs-xs">Gmail, MailChimp, Telegram...</div>
              </div>
            </div>
            <div class="position-relative d-flex align-items-center py-2 my-1">
              <div class="bg-primary bg-opacity-10 rounded-circle lh-1 p-3">
                <i class="ai-code text-primary fs-4 lh-1"></i>
              </div>
              <div class="nav flex-column ps-3">
                <a href="#" class="nav-link fw-semibold stretched-link p-0">Code editors</a>
                <div class="fs-xs">VS Code, Web Storm, Atom...</div>
              </div>
            </div>
          </div>

          <!-- Resources links -->
          <div class="col-md-4 col-xl-3 pb-1 mb-4">
            <h5 class="pb-md-1">Resources</h5>
            <div class="position-relative d-flex align-items-center py-2 my-1">
              <div class="bg-primary bg-opacity-10 rounded-circle lh-1 p-3">
                <i class="ai-file-text text-primary fs-4 lh-1"></i>
              </div>
              <div class="nav flex-column ps-3">
                <a href="#" class="nav-link fw-semibold stretched-link p-0">Documentation</a>
                <div class="fs-xs">API, knowledge base, tutorials</div>
              </div>
            </div>
            <div class="position-relative d-flex align-items-center py-2 my-1">
              <div class="bg-primary bg-opacity-10 rounded-circle lh-1 p-3">
                <i class="ai-circle-info text-primary fs-4 lh-1"></i>
              </div>
              <div class="nav flex-column ps-3">
                <a href="#" class="nav-link fw-semibold stretched-link p-0">Help center</a>
                <div class="fs-xs">FAQs, articles, community forum</div>
              </div>
            </div>
            <div class="position-relative d-flex align-items-center py-2 my-1">
              <div class="bg-primary bg-opacity-10 rounded-circle lh-1 p-3">
                <i class="ai-edit-alt text-primary fs-4 lh-1"></i>
              </div>
              <div class="nav flex-column ps-3">
                <a href="#" class="nav-link fw-semibold stretched-link p-0">Blog articles</a>
                <div class="fs-xs">Recent news and updates</div>
              </div>
            </div>
            <div class="position-relative d-flex align-items-center py-2 my-1">
              <div class="bg-primary bg-opacity-10 rounded-circle lh-1 p-3">
                <i class="ai-github text-primary fs-4 lh-1"></i>
              </div>
              <div class="nav flex-column ps-3">
                <a href="#" class="nav-link fw-semibold stretched-link p-0">GitHub projects</a>
                <div class="fs-xs">Use our open source projects</div>
              </div>
            </div>
          </div>
        </div>
        <div class="text-sm-center pb-3 py-sm-3 py-md-4 py-xl-5">
          <p class="nav d-block fs-sm mb-0">
            <span class="text-body">&copy; All rights reserved. Made by </span>
            <a class="nav-link d-inline-block p-0" href="https://createx.studio/" target="_blank" rel="noopener">Createx Studio</a>
          </p>
        </div>
      </div>
    </footer>


    <!-- Back to top button -->
    <a class="btn-scroll-top" href="#top" data-scroll aria-label="Scroll back to top">
      <svg viewBox="0 0 40 40" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <circle cx="20" cy="20" r="19" fill="none" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10"></circle>
      </svg>
      <i class="ai-arrow-up"></i>
    </a>


    <!-- Vendor scripts: JS libraries and plugins -->
    <script src="assets/vendor/imagesloaded/imagesloaded.pkgd.min.js"></script>
    <script src="assets/vendor/shufflejs/dist/shuffle.min.js"></script>
    <script src="assets/vendor/jarallax/dist/jarallax.min.js"></script>
    <script src="assets/vendor/parallax-js/dist/parallax.min.js"></script>
    <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
    <script src="assets/vendor/lightgallery/lightgallery.min.js"></script>
    <script src="assets/vendor/lightgallery/plugins/video/lg-video.min.js"></script>

    <!-- Bootstrap + Theme scripts -->
    <script src="assets/js/theme.min.js"></script>
  </body>
</html>