/home/moonrcjl/template.moontelict.com/vorix/index.html
<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="Vorix - Creative Digital Agency HTML Template">

   <!-- Title & Favicon -->
   <title>Vorix - Creative Digital Agency HTML Template</title>
   <link rel="shortcut icon" href="img/core-img/favicon.ico" type="image/x-icon">

   <!-- Stylesheet -->
   <link rel="stylesheet" href="css/animate.css">
   <link rel="stylesheet" href="css/bootstrap.min.css">
   <link rel="stylesheet" href="css/swiper-bundle.min.css">
   <link rel="stylesheet" href="style.css">
</head>

<body>
   <!-- Preloader -->
   <div class="preloader" id="preloader">
      <div class="spinner-grow" role="status">
         <span class="visually-hidden">Loading...</span>
      </div>
   </div>

   <!-- Search Form -->
   <div class="search-bg-overlay" id="searchOverlay"></div>
   <div class="search-form-popup">
      <h2 class="mb-4">Ask me anything...</h2>
      <button type="button" class="close-btn" id="searchClose" aria-label="Close">
         &times;
      </button>
      <form class="search-form">
         <input type="search" class="form-control" placeholder="Search..." aria-label="Search">
         <button type="submit" class="btn btn-dark" aria-label="Search">
            <span>Search</span>
            <span>Search</span>
         </button>
      </form>
   </div>

   <!-- Header Area-->
   <header class="header-area">
      <nav class="navbar navbar-expand-lg">
         <div class="container">
            <!-- Navbar Brand -->
            <a class="navbar-brand" href="index.html">
               <img class="dark-logo" src="img/core-img/logo.png" alt="">
               <img class="light-logo" src="img/core-img/logo-light.png" alt="">
            </a>

            <!-- Navbar Toggler -->
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#vorixNav"
               aria-controls="vorixNav" aria-expanded="false" aria-label="Toggle navigation">
               <span class="material-symbols-outlined">view_cozy</span>
            </button>

            <!-- Navbar Nav -->
            <div class="collapse navbar-collapse justify-content-end" id="vorixNav">
               <ul class="navbar-nav navbar-nav-scroll">
                  <li class="vorix-dd">
                     <a href="#">Home</a>
                     <ul class="vorix-dd-menu">
                        <li>
                           <a href="home-1.html">Digital Agency</a>
                        </li>
                        <li>
                           <a href="home-2.html">Web Agency</a>
                        </li>
                        <li>
                           <a href="home-3.html">Creative Agency</a>
                        </li>
                        <li>
                           <a href="home-4.html">Marketing Agency</a>
                        </li>
                     </ul>
                  </li>
                  <li class="vorix-dd">
                     <a href="#">Pages</a>
                     <ul class="vorix-dd-menu">
                        <li class="vorix-dd">
                           <a href="about-us.html">About Us</a>
                        </li>
                        <li class="vorix-dd">
                           <a href="#">Service</a>
                           <ul class="vorix-dd-menu">
                              <li>
                                 <a href="service.html">Service</a>
                              </li>
                              <li>
                                 <a href="service-details.html">Service Details</a>
                              </li>
                           </ul>
                        </li>
                        <li class="vorix-dd">
                           <a href="#">Authentification</a>
                           <ul class="vorix-dd-menu">
                              <li>
                                 <a href="register.html">Register</a>
                              </li>
                              <li>
                                 <a href="login.html">Login</a>
                              </li>
                           </ul>
                        </li>
                        <li>
                           <a href="pricing-plan.html">Pricing Plan</a>
                        </li>
                        <li>
                           <a href="faq.html">FAQ</a>
                        </li>
                        <li>
                           <a href="team.html">Team</a>
                        </li>
                        <li>
                           <a href="team-details.html">Team Details</a>
                        </li>
                        <li>
                           <a href="contact.html">Contact</a>
                        </li>
                        <li>
                           <a href="404.html">404 - Error</a>
                        </li>
                     </ul>
                  </li>
                  <li class="vorix-dd">
                     <a href="#">Portfolio</a>
                     <ul class="vorix-dd-menu">
                        <li>
                           <a href="portfolio.html">Portfolio</a>
                        </li>
                        <li>
                           <a href="portfolio-details.html">Portfolio Details</a>
                        </li>
                     </ul>
                  </li>
                  <li class="vorix-dd">
                     <a href="#">Blog</a>
                     <ul class="vorix-dd-menu">
                        <li>
                           <a href="blog.html">Blog</a>
                        </li>
                        <li>
                           <a href="blog-details.html">Blog Details</a>
                        </li>
                     </ul>
                  </li>
               </ul>

               <div class="d-flex align-items-center">
                  <!-- Search Button -->
                  <div class="header-search-btn" id="searchButton">
                     <button class="btn">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                           <g clip-path="url(#clip0_1_195)">
                              <path fill-rule="evenodd" clip-rule="evenodd"
                                 d="M10.5003 2C9.14485 2.00012 7.80912 2.32436 6.60451 2.94569C5.3999 3.56702 4.36135 4.46742 3.57549 5.57175C2.78963 6.67609 2.27926 7.95235 2.08696 9.29404C1.89466 10.6357 2.026 12.004 2.47003 13.2846C2.91406 14.5652 3.6579 15.7211 4.63949 16.6557C5.62108 17.5904 6.81196 18.2768 8.11277 18.6576C9.41358 19.0384 10.7866 19.1026 12.1173 18.8449C13.448 18.5872 14.6977 18.015 15.7623 17.176L19.4143 20.828C19.6029 21.0102 19.8555 21.111 20.1177 21.1087C20.3799 21.1064 20.6307 21.0012 20.8161 20.8158C21.0015 20.6304 21.1066 20.3796 21.1089 20.1174C21.1112 19.8552 21.0104 19.6026 20.8283 19.414L17.1763 15.762C18.1642 14.5086 18.7794 13.0024 18.9514 11.4157C19.1233 9.82905 18.8451 8.22602 18.1485 6.79009C17.4519 5.35417 16.3651 4.14336 15.0126 3.29623C13.66 2.44911 12.0962 1.99989 10.5003 2ZM4.00025 10.5C4.00025 8.77609 4.68507 7.12279 5.90406 5.90381C7.12305 4.68482 8.77635 4 10.5003 4C12.2242 4 13.8775 4.68482 15.0964 5.90381C16.3154 7.12279 17.0003 8.77609 17.0003 10.5C17.0003 12.2239 16.3154 13.8772 15.0964 15.0962C13.8775 16.3152 12.2242 17 10.5003 17C8.77635 17 7.12305 16.3152 5.90406 15.0962C4.68507 13.8772 4.00025 12.2239 4.00025 10.5Z"
                                 fill="#FEFEFE" />
                           </g>
                           <defs>
                              <clipPath id="clip0_1_195">
                                 <rect width="24" height="24" fill="white" />
                              </clipPath>
                           </defs>
                        </svg>
                     </button>
                  </div>

                  <!-- Dark/Light Button -->
                  <button id="theme-toggle" class="theme-btn">
                     <span class="material-symbols-outlined sun">clear_day</span>
                     <span class="material-symbols-outlined moon">bedtime</span>
                  </button>

                  <!-- Login Button -->
                  <a class="btn btn-primary" href="contact.html"><span>GET IN TOUCH</span><span>GET IN TOUCH</span></a>
               </div>
            </div>
         </div>
      </nav>
   </header>

   <!-- Preview Hero -->
   <div class="preview-hero-wrap">
      <div class="divider"></div>

      <div class="container">
         <h2 class="wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="500ms">Creative Digital Agency HTML
            Template</h2>
         <p class="wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="700ms">The best solution to build Digital
            Agency & Portfolio website to showcase your portfolio.</p>

         <!-- Hero Image Group -->
         <div class="hero-img-group wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="900ms">
            <img class="img-small" src="img/demo-img/2.png" alt="">
            <img class="img-big" src="img/demo-img/1.png" alt="">
            <img class="img-small" src="img/demo-img/3.png" alt="">
         </div>

         <!-- Background Shape -->
         <img class="bg-shape1" src="img/core-img/curved-arrow2.png" alt="">
         <img class="bg-shape2" src="img/core-img/logo-star.png" alt="">
         <img class="bg-shape3" src="img/core-img/curved-arrow.png" alt="">
      </div>
   </div>

   <!-- Marquee -->
   <div class="catagory-slide" id="catagorySlide">
      <div class="marquee3k" data-speed="1">
         <div>
            <h2 class="d-flex align-items-center mb-0">
               <span># Vorix - Creative Digital Agency</span>
               <span># Vorix - Creative Digital Agency</span>
            </h2>
         </div>
      </div>
   </div>

   <!-- Homepage Wrapper -->
   <div class="homepage-wrap">
      <div class="divider"></div>

      <div class="container">
         <div class="row justify-content-center">
            <div class="col-12 col-lg-9 col-xl-8">
               <div class="section-heading text-center">
                  <h2 class="mb-3">4 Unique<br>Homepage</h2>
                  <p class="mb-0">Vorix offers two unique homepage designs tailored for your Creative Agency and
                     Portfolio website. Built with modern technologies and handcrafted with care, Vorix combines
                     functionality and aesthetics seamlessly.</p>
               </div>
            </div>
         </div>

         <div class="divider-sm"></div>

         <div class="row g-4 g-xl-5">
            <!-- Home Page Card -->
            <div class="col-12 col-md-6">
               <div class="homepage-card">
                  <div class="d-flex align-items-end">
                     <img src="img/demo-img/home1.png" alt="">
                  </div>
                  <a href="home-1.html" target="_blank" class="shadow-lg">
                     <span class="material-symbols-outlined">arrow_outward</span>
                  </a>
               </div>
               <h3 class="mb-0 text-center mt-4">Digital Agency</h3>
            </div>

            <!-- Home Page Card -->
            <div class="col-12 col-md-6">
               <div class="homepage-card">
                  <div class="d-flex align-items-end">
                     <img src="img/demo-img/home2.png" alt="">
                  </div>
                  <a href="home-2.html" target="_blank" class="shadow-lg">
                     <span class="material-symbols-outlined">arrow_outward</span>
                  </a>
               </div>
               <h3 class="mb-0 text-center mt-4">Web Agency</h3>
            </div>

            <!-- Home Page Card -->
            <div class="col-12 col-md-6">
               <div class="homepage-card">
                  <div class="d-flex align-items-end">
                     <img src="img/demo-img/home3.png" alt="">
                  </div>
                  <a href="home-3.html" target="_blank" class="shadow-lg">
                     <span class="material-symbols-outlined">arrow_outward</span>
                  </a>
               </div>
               <h3 class="mb-0 text-center mt-4">Creative Agency</h3>
            </div>

            <!-- Home Page Card -->
            <div class="col-12 col-md-6">
               <div class="homepage-card">
                  <div class="d-flex align-items-end">
                     <img src="img/demo-img/home4.png" alt="">
                  </div>
                  <a href="home-4.html" target="_blank" class="shadow-lg">
                     <span class="material-symbols-outlined">arrow_outward</span>
                  </a>
               </div>
               <h3 class="mb-0 text-center mt-4">Marketing Agency</h3>
            </div>
         </div>
      </div>

      <div class="divider"></div>
   </div>

   <!-- Core Features -->
   <div class="core-features-wrap bg-secondary">
      <div class="divider"></div>

      <div class="container">
         <div class="row justify-content-center">
            <div class="col-12 col-lg-9 col-xl-8">
               <div class="section-heading text-center">
                  <h2 class="mb-0">Core Feature</h2>
               </div>
            </div>
         </div>

         <div class="divider-sm"></div>
      </div>

      <div class="container">
         <div class="row g-4 justify-content-center">
            <!-- Feature Card -->
            <div class="col-12 col-sm-6 col-md-4 col-xl-3">
               <div class="core-feature-card">
                  <span class="material-symbols-outlined">home_work</span>
                  <h6 class="mb-0">4 Home Page</h6>
               </div>
            </div>
            <!-- Feature Card -->
            <div class="col-12 col-sm-6 col-md-4 col-xl-3">
               <div class="core-feature-card">
                  <span class="material-symbols-outlined">
                     note_add
                  </span>
                  <h6 class="mb-0">18+ Other Page</h6>
               </div>
            </div>
            <!-- Feature Card -->
            <div class="col-12 col-sm-6 col-md-4 col-xl-3">
               <div class="core-feature-card">
                  <span class="material-symbols-outlined">clear_day</span>
                  <h6 class="mb-0">Dark/Light Mode</h6>
               </div>
            </div>
            <!-- Feature Card -->
            <div class="col-12 col-sm-6 col-md-4 col-xl-3">
               <div class="core-feature-card">
                  <span class="material-symbols-outlined">
                     javascript
                  </span>
                  <h6 class="mb-0">Vanilla JS</h6>
               </div>
            </div>
            <!-- Feature Card -->
            <div class="col-12 col-sm-6 col-md-4 col-xl-3">
               <div class="core-feature-card">
                  <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" fill="currentColor"
                     class="bi bi-bootstrap" viewBox="0 0 16 16">
                     <path
                        d="M5.062 12h3.475c1.804 0 2.888-.908 2.888-2.396 0-1.102-.761-1.916-1.904-2.034v-.1c.832-.14 1.482-.93 1.482-1.816 0-1.3-.955-2.11-2.542-2.11H5.062zm1.313-4.875V4.658h1.78c.973 0 1.542.457 1.542 1.237 0 .802-.604 1.23-1.764 1.23zm0 3.762V8.162h1.822c1.236 0 1.887.463 1.887 1.348 0 .896-.627 1.377-1.811 1.377z" />
                     <path
                        d="M0 4a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4zm4-3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3z" />
                  </svg>
                  <h6 class="mb-0">Bootstrap 5</h6>
               </div>
            </div>
            <!-- Feature Card -->
            <div class="col-12 col-sm-6 col-md-4 col-xl-3">
               <div class="core-feature-card">
                  <span class="material-symbols-outlined">css</span>
                  <h6 class="mb-0">Built with Scss</h6>
               </div>
            </div>
            <!-- Feature Card -->
            <div class="col-12 col-sm-6 col-md-4 col-xl-3">
               <div class="core-feature-card">
                  <div class="npm">npm</div>
                  <h6 class="mb-0">npm</h6>
               </div>
            </div>
            <!-- Feature Card -->
            <div class="col-12 col-sm-6 col-md-4 col-xl-3">
               <div class="core-feature-card">
                  <div class="npm gulp">gulp</div>
                  <h6 class="mb-0">Gulp JS</h6>
               </div>
            </div>
            <!-- Feature Card -->
            <div class="col-12 col-sm-6 col-md-4 col-xl-3">
               <div class="core-feature-card">
                  <span class="material-symbols-outlined">
                     swipe_right
                  </span>
                  <h6 class="mb-0">Swiper Slider</h6>
               </div>
            </div>
            <!-- Feature Card -->
            <div class="col-12 col-sm-6 col-md-4 col-xl-3">
               <div class="core-feature-card">
                  <span class="material-symbols-outlined">
                     unfold_more
                  </span>
                  <h6 class="mb-0">Parallax</h6>
               </div>
            </div>
            <!-- Feature Card -->
            <div class="col-12 col-sm-6 col-md-4 col-xl-3">
               <div class="core-feature-card">
                  <span class="material-symbols-outlined">
                     contact_phone
                  </span>
                  <h6 class="mb-0">Contact Form</h6>
               </div>
            </div>
            <!-- Feature Card -->
            <div class="col-12 col-sm-6 col-md-4 col-xl-3">
               <div class="core-feature-card">
                  <span class="material-symbols-outlined">
                     code
                  </span>
                  <h6 class="mb-0">Clean Coded</h6>
               </div>
            </div>
            <!-- Feature Card -->
            <div class="col-12 col-sm-6 col-md-4 col-xl-3">
               <div class="core-feature-card">
                  <span class="material-symbols-outlined">
                     travel_explore
                  </span>
                  <h6 class="mb-0">Cross Browser</h6>
               </div>
            </div>
            <!-- Feature Card -->
            <div class="col-12 col-sm-6 col-md-4 col-xl-3">
               <div class="core-feature-card">
                  <span class="material-symbols-outlined">
                     brand_family
                  </span>
                  <h6 class="mb-0">Google Fonts</h6>
               </div>
            </div>
            <!-- Feature Card -->
            <div class="col-12 col-sm-6 col-md-4 col-xl-3">
               <div class="core-feature-card">
                  <span class="material-symbols-outlined">
                     add_reaction
                  </span>
                  <h6 class="mb-0">Material Icons</h6>
               </div>
            </div>
            <!-- Feature Card -->
            <div class="col-12 col-sm-6 col-md-4 col-xl-3">
               <div class="core-feature-card">
                  <span class="material-symbols-outlined">
                     design_services
                  </span>
                  <h6 class="mb-0">Modern Design</h6>
               </div>
            </div>
            <!-- Feature Card -->
            <div class="col-12 col-sm-6 col-md-4 col-xl-3">
               <div class="core-feature-card">
                  <span class="material-symbols-outlined">
                     edit_note
                  </span>
                  <h6 class="mb-0">Easy Customizable</h6>
               </div>
            </div>
            <!-- Feature Card -->
            <div class="col-12 col-sm-6 col-md-4 col-xl-3">
               <div class="core-feature-card">
                  <span class="material-symbols-outlined">
                     description
                  </span>
                  <h6 class="mb-0">Well Documented</h6>
               </div>
            </div>
            <!-- Feature Card -->
            <div class="col-12 col-sm-6 col-md-4 col-xl-3">
               <div class="core-feature-card">
                  <span class="material-symbols-outlined">
                     support
                  </span>
                  <h6 class="mb-0">24/7 Support</h6>
               </div>
            </div>

         </div>
      </div>

      <div class="divider"></div>
   </div>

   <!-- Others Page -->
   <div class="other-pages-wrap">
      <div class="divider"></div>

      <div class="container">
         <div class="row justify-content-center">
            <div class="col-12 col-lg-9 col-xl-8">
               <div class="section-heading text-center">
                  <h2><span class="counter">18</span>Clean &amp; Modern<br>Inner Page</h2>
                  <p class="mb-0">Carefully designed to generate more leads and conversions with stunning 14+ premade
                     design website samples.</p>
               </div>
            </div>
         </div>

         <div class="divider-sm"></div>
      </div>

      <div class="container-fluid">
         <div class="row g-4 g-xxl-5 justify-content-center">
            <!-- Other Page Card -->
            <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
               <div class="other-page-card">
                  <img src="img/demo-img/about-us.png" alt="">

                  <a href="about-us.html" target="_blank" class="shadow-lg">
                     <span class="material-symbols-outlined">arrow_outward</span>
                  </a>
               </div>
            </div>
            <!-- Other Page Card -->
            <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
               <div class="other-page-card">
                  <img src="img/demo-img/services.png" alt="">

                  <a href="service.html" target="_blank" class="shadow-lg">
                     <span class="material-symbols-outlined">arrow_outward</span>
                  </a>
               </div>
            </div>
            <!-- Other Page Card -->
            <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
               <div class="other-page-card">
                  <img src="img/demo-img/sevice-details.png" alt="">

                  <a href="service-details.html" target="_blank" class="shadow-lg">
                     <span class="material-symbols-outlined">arrow_outward</span>
                  </a>
               </div>
            </div>
            <!-- Other Page Card -->
            <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
               <div class="other-page-card">
                  <img src="img/demo-img/sign-in.png" alt="">

                  <a href="register.html" target="_blank" class="shadow-lg">
                     <span class="material-symbols-outlined">arrow_outward</span>
                  </a>
               </div>
            </div>
            <!-- Other Page Card -->
            <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
               <div class="other-page-card">
                  <img src="img/demo-img/pricing.png" alt="">

                  <a href="pricing-plan.html" target="_blank" class="shadow-lg">
                     <span class="material-symbols-outlined">arrow_outward</span>
                  </a>
               </div>
            </div>
            <!-- Other Page Card -->
            <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
               <div class="other-page-card">
                  <img src="img/demo-img/faq.png" alt="">

                  <a href="faq.html" target="_blank" class="shadow-lg">
                     <span class="material-symbols-outlined">arrow_outward</span>
                  </a>
               </div>
            </div>
            <!-- Other Page Card -->
            <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
               <div class="other-page-card">
                  <img src="img/demo-img/team.png" alt="">

                  <a href="team.html" target="_blank" class="shadow-lg">
                     <span class="material-symbols-outlined">arrow_outward</span>
                  </a>
               </div>
            </div>
            <!-- Other Page Card -->
            <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
               <div class="other-page-card">
                  <img src="img/demo-img/team-details.png" alt="">

                  <a href="team-details.html" target="_blank" class="shadow-lg">
                     <span class="material-symbols-outlined">arrow_outward</span>
                  </a>
               </div>
            </div>
            <!-- Other Page Card -->
            <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
               <div class="other-page-card">
                  <img src="img/demo-img/contact.png" alt="">

                  <a href="contact.html" target="_blank" class="shadow-lg">
                     <span class="material-symbols-outlined">arrow_outward</span>
                  </a>
               </div>
            </div>
            <!-- Other Page Card -->
            <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
               <div class="other-page-card">
                  <img src="img/demo-img/404.png" alt="">

                  <a href="404.html" target="_blank" class="shadow-lg">
                     <span class="material-symbols-outlined">arrow_outward</span>
                  </a>
               </div>
            </div>
            <!-- Other Page Card -->
            <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
               <div class="other-page-card">
                  <img src="img/demo-img/portfolio.png" alt="">

                  <a href="portfolio.html" target="_blank" class="shadow-lg">
                     <span class="material-symbols-outlined">arrow_outward</span>
                  </a>
               </div>
            </div>
            <!-- Other Page Card -->
            <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
               <div class="other-page-card">
                  <img src="img/demo-img/portfolio-details.png" alt="">

                  <a href="portfolio-details.html" target="_blank" class="shadow-lg">
                     <span class="material-symbols-outlined">arrow_outward</span>
                  </a>
               </div>
            </div>
            <!-- Other Page Card -->
            <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
               <div class="other-page-card">
                  <img src="img/demo-img/blog.png" alt="">

                  <a href="blog.html" target="_blank" class="shadow-lg">
                     <span class="material-symbols-outlined">arrow_outward</span>
                  </a>
               </div>
            </div>
            <!-- Other Page Card -->
            <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
               <div class="other-page-card">
                  <img src="img/demo-img/blog-details.png" alt="">

                  <a href="blog-details.html" target="_blank" class="shadow-lg">
                     <span class="material-symbols-outlined">arrow_outward</span>
                  </a>
               </div>
            </div>

         </div>
      </div>

      <div class="divider"></div>
   </div>

   <!-- Client Testimonial -->
   <div class="client-testimonial bg-secondary">
      <div class="divider"></div>

      <div class="container">
         <div class="row justify-content-center">
            <div class="col-12 col-lg-9 col-xl-8">
               <div class="section-heading text-center">
                  <h2 class="mb-0">Trusted by Thousands</h2>
               </div>
            </div>
         </div>

         <div class="divider-sm"></div>

         <div class="row g-4 vorix-filter">

            <!-- Testimonial Card -->
            <div class="col-12 col-md-6 col-lg-4 filter-item">
               <div class="client-testimonial-card">
                  <div class="ratings">
                     <span class="material-symbols-outlined">star</span>
                     <span class="material-symbols-outlined">star</span>
                     <span class="material-symbols-outlined">star</span>
                     <span class="material-symbols-outlined">star</span>
                     <span class="material-symbols-outlined">star</span>
                  </div>
                  <div>for <h2>Design Quality</h2>
                  </div>
                  <p>“Excquisite Pixel Perfect design, with an abundance of content, well documented, an actual NFT if i
                     ever saw one. Can't wait to see what you put out next. Massive Thanks!”</p>
                  <a href="#">by webpixie</a>
               </div>
            </div>

            <!-- Testimonial Card -->
            <div class="col-12 col-md-6 col-lg-4 filter-item">
               <div class="client-testimonial-card">
                  <div class="ratings">
                     <span class="material-symbols-outlined">star</span>
                     <span class="material-symbols-outlined">star</span>
                     <span class="material-symbols-outlined">star</span>
                     <span class="material-symbols-outlined">star</span>
                     <span class="material-symbols-outlined">star</span>
                  </div>
                  <div>for <h2>Other</h2>
                  </div>
                  <p>“After trying the product, I recommend buying it because it is one of the best projects I have
                     purchased, and one of the best products on the platform, modern colors, professional user interface
                     programming, it deserves more than five stars.”</p>
                  <a href="#">by iliasseMezzat</a>
               </div>
            </div>

            <!-- Testimonial Card -->
            <div class="col-12 col-md-6 col-lg-4 filter-item">
               <div class="client-testimonial-card">
                  <div class="ratings">
                     <span class="material-symbols-outlined">star</span>
                     <span class="material-symbols-outlined">star</span>
                     <span class="material-symbols-outlined">star</span>
                     <span class="material-symbols-outlined">star</span>
                     <span class="material-symbols-outlined">star</span>
                  </div>
                  <div>for <h2>Documentation</h2>
                  </div>
                  <p>“All Complete, great craft.”</p>
                  <a href="#">by Mazatlumm</a>
               </div>
            </div>

            <!-- Testimonial Card -->
            <div class="col-12 col-md-6 col-lg-4 filter-item">
               <div class="client-testimonial-card">
                  <div class="ratings">
                     <span class="material-symbols-outlined">star</span>
                     <span class="material-symbols-outlined">star</span>
                     <span class="material-symbols-outlined">star</span>
                     <span class="material-symbols-outlined">star</span>
                     <span class="material-symbols-outlined">star</span>
                  </div>
                  <div>for <h2>Customer Support</h2>
                  </div>
                  <p>“The template will save me many hours of work. The code looks clean, and the designs are excellent.
                     Great support from the team too. I recommend.”</p>
                  <a href="#">by mrrickez</a>
               </div>
            </div>

            <!-- Testimonial Card -->
            <div class="col-12 col-md-6 col-lg-4 filter-item">
               <div class="client-testimonial-card">
                  <div class="ratings">
                     <span class="material-symbols-outlined">star</span>
                     <span class="material-symbols-outlined">star</span>
                     <span class="material-symbols-outlined">star</span>
                     <span class="material-symbols-outlined">star</span>
                     <span class="material-symbols-outlined">star</span>
                  </div>
                  <div>for <h2>Code Quality</h2>
                  </div>
                  <p>“It's a good template and works fine. I had a good strong support to my questions so thanks for
                     their kindly helps and supports. I recommend people to buy this and use on own project. Thanks!”
                  </p>
                  <a href="#">by yusufonureren</a>
               </div>
            </div>

            <!-- Testimonial Card -->
            <div class="col-12 col-md-6 col-lg-4 filter-item">
               <div class="client-testimonial-card">
                  <div class="ratings">
                     <span class="material-symbols-outlined">star</span>
                     <span class="material-symbols-outlined">star</span>
                     <span class="material-symbols-outlined">star</span>
                     <span class="material-symbols-outlined">star</span>
                     <span class="material-symbols-outlined">star</span>
                  </div>
                  <div>for <h2>Feature Availability</h2>
                  </div>
                  <p>“Excellent features and code and design.”</p>
                  <a href="#">by muendra_2004</a>
               </div>
            </div>

            <!-- Testimonial Card -->
            <div class="col-12 col-md-6 col-lg-4 filter-item">
               <div class="client-testimonial-card">
                  <div class="ratings">
                     <span class="material-symbols-outlined">star</span>
                     <span class="material-symbols-outlined">star</span>
                     <span class="material-symbols-outlined">star</span>
                     <span class="material-symbols-outlined">star</span>
                     <span class="material-symbols-outlined">star</span>
                  </div>
                  <div>for <h2>Customizability</h2>
                  </div>
                  <p>“The coding is simple and easy to customize."</p>
                  <a href="#">by dblossoms</a>
               </div>
            </div>

            <!-- Testimonial Card -->
            <div class="col-12 col-md-6 col-lg-4 filter-item">
               <div class="client-testimonial-card">
                  <div class="ratings">
                     <span class="material-symbols-outlined">star</span>
                     <span class="material-symbols-outlined">star</span>
                     <span class="material-symbols-outlined">star</span>
                     <span class="material-symbols-outlined">star</span>
                     <span class="material-symbols-outlined">star</span>
                  </div>
                  <div>for <h2>Customizability</h2>
                  </div>
                  <p>“The template looks pretty good, and the design quality i like very much. So I thought I appreciate
                     you for these."</p>
                  <a href="#">by schenr</a>
               </div>
            </div>

         </div>
      </div>

      <div class="divider"></div>
   </div>

   <!-- Footer -->
   <footer class="footer-wrapper">
      <div class="divider"></div>

      <div class="preview-footer-content">
         <div class="container">
            <h2 class="wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="500ms">Let's Build a Creative Website
               Today!</h2>
            <p class="wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="700ms">One-time payment and get all
               features, templates & demos!</p>
            <a href="https://preview.themeforest.net/item/vorix-creative-digital-agency-html-template/full_screen_preview/58999476" class="btn btn-primary wow fadeInUp" data-wow-duration="1000ms"
               data-wow-delay="900ms"><span>PURCHASE NOW</span><span>PURCHASE NOW</span></a>
            <img class="curve-arrow wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="1000ms"
               src="img/core-img/curved-arrow.png" alt="">
         </div>
      </div>

      <div class="container">
         <div class="footer-line"></div>
      </div>

      <div class="container">
         <div class="text-center">
            <p class="mb-0 copyright">Copyright © <span id="year"></span> <a href="#">MOONTEL_ICT</a></p>
         </div>
      </div>

      <div class="divider-sm"></div>
   </footer>

   <!-- Scroll To Top -->
   <button id="scrollTopButton" class="scrolltop-hide">
      <span class="material-symbols-outlined">arrow_upward_alt</span>
   </button>

   <!-- All JavaScript Files-->
   <script src="js/bootstrap.bundle.min.js"></script>
   <script src="js/slideToggle.min.js"></script>
   <script src="js/swiper-bundle.min.js"></script>
   <script src="js/jarallax.min.js"></script>
   <script src="js/index.js"></script>
   <script src="js/marquee3k.min.js"></script>
   <script src="js/cookiealert.js"></script>
   <script src="js/imagesloaded.pkgd.min.js"></script>
   <script src="js/isotope.pkgd.min.js"></script>
   <script src="js/wow.min.js"></script>
   <script src="js/active.js"></script>

</body>

</html>