/home/moonrcjl/template.moontelict.com/vorix/home-1.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>

   <!-- Popup Video Container -->
   <div id="videoPopup" class="video-popup-iframe">
      <div class="video-content">
         <span class="close-btn" id="videoCloseButton">&times;</span>
         <div class="ratio ratio-16x9">
            <iframe id="videoFrame" allowfullscreen></iframe>
         </div>
      </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...">
         <button type="submit" class="btn btn-dark">
            <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>

   <!-- Hero Wrapper -->
   <section class="hero-wrapper">
      <div class="divider"></div>

      <div class="container">
         <div class="row">
            <div class="col-12">
               <div class="hero-content">
                  <h2 class="mb-0 wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="500ms">Creative Digital</h2>
                  <h2 class="mb-0 d-md-flex align-items-center wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="800ms">Agency
                     <span class=" hero-subtitle mt-3 wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="1000ms">Studio agencies excel in graphic design, design, branding, and visual elements, offering comprehensive solutions for businesses' design needs across graphic platforms.</span>
                  </h2>
               </div>
            </div>
         </div>
      </div>

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

   <!-- CTA Wrapper -->
   <div class="cta-wrap jarallax" data-jarallax="" data-speed="0.6" style="background-image: url('img/bg-img/1.jpg');">
      <div class="divider"></div>

      <div class="container">
         <div class="row justify-content-end">
            <div class="col-12 col-sm-11 col-md-10 col-lg-7 col-xl-6 col-xxl-5">
               <div class="cta-card">
                  <!-- Total Clients -->
                  <div class="total-clients-wrap">
                     <div class="total-number">
                        <h3>200+</h3>
                        <p class="mb-0">Satisfied Customers</p>
                     </div>

                     <!-- Clients Image -->
                     <div class="clients-images">
                        <img src="img/bg-img/5.jpg" alt="">
                        <img src="img/bg-img/4.jpg" alt="">
                        <img src="img/bg-img/3.jpg" alt="">
                        <img src="img/bg-img/2.jpg" alt="">
                     </div>
                  </div>

                  <!-- Stats -->
                  <div class="cta-stats">
                     <div>
                        <h2>100+</h2>
                        <p class="mb-0">Global Clients</p>
                     </div>

                     <div>
                        <h2>150+</h2>
                        <p class="mb-0">Team Members</p>
                     </div>

                     <div>
                        <h2>15+</h2>
                        <p class="mb-0">Business Experience</p>
                     </div>

                     <div>
                        <h2>300+</h2>
                        <p class="mb-0">Projects Complete</p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>

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

   <!-- Services Wrapper -->
   <div class="latest-service-wrapper bg-secondary">
      <div class="divider"></div>

      <div class="container">
         <div class="row g-4 align-items-end">
            <div class="col-12 col-sm-6">
               <div class="section-heading">
                  <h2 class="mb-0">Our Latest Client Solutions</h2>
               </div>
            </div>

            <div class="col-12 col-sm-6">
               <!-- If we need navigation buttons -->
               <div class="swiper-navigation-container service-swiper-navigation">
                  <div class="service-button-prev">
                     <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
                        <path
                           d="M3.93875 17.0605L12.9387 26.0605C13.2205 26.3423 13.6027 26.5006 14.0012 26.5006C14.3998 26.5006 14.782 26.3423 15.0637 26.0605C15.3455 25.7787 15.5039 25.3965 15.5039 24.998C15.5039 24.5995 15.3455 24.2173 15.0637 23.9355L8.625 17.4992H27C27.3978 17.4992 27.7794 17.3412 28.0607 17.0599C28.342 16.7786 28.5 16.3971 28.5 15.9992C28.5 15.6014 28.342 15.2199 28.0607 14.9386C27.7794 14.6573 27.3978 14.4992 27 14.4992H8.625L15.0613 8.05924C15.343 7.77745 15.5014 7.39526 15.5014 6.99674C15.5014 6.59823 15.343 6.21603 15.0613 5.93424C14.7795 5.65245 14.3973 5.49414 13.9988 5.49414C13.6002 5.49414 13.218 5.65245 12.9363 5.93424L3.93625 14.9342C3.79639 15.0738 3.68547 15.2396 3.60986 15.4221C3.53426 15.6046 3.49546 15.8003 3.49569 15.9979C3.49592 16.1955 3.53518 16.391 3.61122 16.5734C3.68725 16.7557 3.79856 16.9213 3.93875 17.0605Z"
                           fill="#0E0E0E" />
                     </svg>
                  </div>

                  <div class="service-button-next">
                     <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
                        <path
                           d="M28.0613 17.0605L19.0613 26.0605C18.7795 26.3423 18.3973 26.5006 17.9988 26.5006C17.6002 26.5006 17.218 26.3423 16.9363 26.0605C16.6545 25.7787 16.4961 25.3965 16.4961 24.998C16.4961 24.5995 16.6545 24.2173 16.9363 23.9355L23.375 17.4992H5C4.60218 17.4992 4.22064 17.3412 3.93934 17.0599C3.65804 16.7786 3.5 16.3971 3.5 15.9992C3.5 15.6014 3.65804 15.2199 3.93934 14.9386C4.22064 14.6573 4.60218 14.4992 5 14.4992H23.375L16.9387 8.05924C16.657 7.77745 16.4986 7.39526 16.4986 6.99674C16.4986 6.59823 16.657 6.21603 16.9387 5.93424C17.2205 5.65245 17.6027 5.49414 18.0012 5.49414C18.3998 5.49414 18.782 5.65245 19.0637 5.93424L28.0637 14.9342C28.2036 15.0738 28.3145 15.2396 28.3901 15.4221C28.4657 15.6046 28.5045 15.8003 28.5043 15.9979C28.5041 16.1955 28.4648 16.391 28.3888 16.5734C28.3127 16.7557 28.2014 16.9213 28.0613 17.0605Z"
                           fill="#0E0E0E" />
                     </svg>
                  </div>
               </div>
            </div>
         </div>
      </div>

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

      <div class="container">
         <div class="swiper service-swiper">
            <div class="swiper-wrapper">
               <!-- Service Slide -->
               <a href="service-details.html" class="swiper-slide">
                  <div class="service-slide-card">
                     <span class="material-symbols-outlined">ads_click</span>
                     <h2>Digital Marketing</h2>
                     <p class="mb-0">Designed user interface contributes to a positive and a good user
                        experience.
                     </p>
                  </div>
               </a>

               <!-- Service Slide -->
               <a href="service-details.html" class="swiper-slide">
                  <div class="service-slide-card">
                     <span class="material-symbols-outlined">web</span>
                     <h2>Web Development</h2>
                     <p class="mb-0">Designed user interface contributes to a positive and a good user
                        experience.
                     </p>
                  </div>
               </a>

               <!-- Service Slide -->
               <a href="service-details.html" class="swiper-slide">
                  <div class="service-slide-card">
                     <span class="material-symbols-outlined">stream_apps</span>
                     <h2>Mobile Apps</h2>
                     <p class="mb-0">Designed user interface contributes to a positive and a good user experience.
                     </p>
                  </div>
               </a>

               <!-- Service Slide -->
               <a href="service-details.html" class="swiper-slide">
                  <div class="service-slide-card">
                     <span class="material-symbols-outlined">design_services</span>
                     <h2>UI/UX Design</h2>
                     <p class="mb-0">Designed user interface contributes to a positive and a good user experience.
                     </p>
                  </div>
               </a>

               <!-- Service Slide -->
               <a href="service-details.html" class="swiper-slide">
                  <div class="service-slide-card">
                     <span class="material-symbols-outlined">ads_click</span>
                     <h2>Digital Marketing</h2>
                     <p class="mb-0">Designed user interface contributes to a positive and a good user experience.
                     </p>
                  </div>
               </a>

               <!-- Service Slide -->
               <a href="service-details.html" class="swiper-slide">
                  <div class="service-slide-card">
                     <span class="material-symbols-outlined">web</span>
                     <h2>Web Development</h2>
                     <p class="mb-0">Designed user interface contributes to a positive and a good user
                        experience.
                     </p>
                  </div>
               </a>

               <!-- Service Slide -->
               <a href="service-details.html" class="swiper-slide">
                  <div class="service-slide-card">
                     <span class="material-symbols-outlined">stream_apps</span>
                     <h2>Mobile Apps</h2>
                     <p class="mb-0">Designed user interface contributes to a positive and a good user experience.
                     </p>
                  </div>
               </a>

               <!-- Service Slide -->
               <a href="service-details.html" class="swiper-slide">
                  <div class="service-slide-card">
                     <span class="material-symbols-outlined">design_services</span>
                     <h2>UI/UX Design</h2>
                     <p class="mb-0">Designed user interface contributes to a positive and a good user experience.
                     </p>
                  </div>
               </a>
            </div>
         </div>
      </div>

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

   <!-- About Us -->
   <div class="about-us-wrapper">
      <div class="divider"></div>

      <div class="container">
         <div class="row g-4 g-xl-5 align-items-center">
            <!-- Thumbnail -->
            <div class="col-12 col-md-6">
               <div class="about-us-thumbnail">
                  <img src="img/bg-img/6.jpg" alt="">

                  <!-- Top Content -->
                  <div class="top-content">
                     <!-- Clients Image -->
                     <div class="clients-images">
                        <img src="img/bg-img/5.jpg" alt="">
                        <img src="img/bg-img/4.jpg" alt="">
                        <img src="img/bg-img/3.jpg" alt="">
                        <img src="img/bg-img/2.jpg" alt="">
                     </div>
                     <h6 class="mb-0">2566+ More Then Clients Global Reviews</h6>
                  </div>
               </div>
            </div>

            <!-- Text Content -->
            <div class="col-12 col-md-6">
               <div class="about-us-text-content ps-md-4">
                  <div class="section-heading">
                     <h2 class="mb-0">Passionate About Quality Design</h2>
                  </div>
                  <p class="mb-0">If you ask our clients what it's like working with 36, they'll
                     talk about how much we care about their success. For us, real relationships fuel
                     real success.</p>

                  <ul class="ps-0 list-unstyled mb-0">
                     <li>
                        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none">
                           <path
                              d="M12.1473 23.354C12.144 23.354 12.1402 23.354 12.1369 23.354C12.0013 23.3512 11.8733 23.2932 11.7814 23.1937L2.40471 12.9978C2.24392 12.8228 2.22916 12.5592 2.36971 12.3672C2.51025 12.1758 2.76619 12.1102 2.98166 12.2108L11.5638 16.2293C11.636 16.2632 11.7213 16.2468 11.7765 16.1893L24.8676 2.50708C25.0448 2.32169 25.3346 2.30145 25.5359 2.46114C25.7371 2.62083 25.7836 2.90739 25.6431 3.12231L12.6209 23.0712C12.6023 23.1002 12.5804 23.1265 12.5563 23.1511L12.4989 23.2085C12.4054 23.3015 12.2785 23.354 12.1473 23.354Z"
                              fill="#FEFEFE" />
                        </svg>
                        Simplicity The Biggest Idea A Looked</li>
                     <li>
                        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none">
                           <path
                              d="M12.1473 23.354C12.144 23.354 12.1402 23.354 12.1369 23.354C12.0013 23.3512 11.8733 23.2932 11.7814 23.1937L2.40471 12.9978C2.24392 12.8228 2.22916 12.5592 2.36971 12.3672C2.51025 12.1758 2.76619 12.1102 2.98166 12.2108L11.5638 16.2293C11.636 16.2632 11.7213 16.2468 11.7765 16.1893L24.8676 2.50708C25.0448 2.32169 25.3346 2.30145 25.5359 2.46114C25.7371 2.62083 25.7836 2.90739 25.6431 3.12231L12.6209 23.0712C12.6023 23.1002 12.5804 23.1265 12.5563 23.1511L12.4989 23.2085C12.4054 23.3015 12.2785 23.354 12.1473 23.354Z"
                              fill="#FEFEFE" />
                        </svg>
                        Mastering The Art Of Conversion</li>
                     <li>
                        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none">
                           <path
                              d="M12.1473 23.354C12.144 23.354 12.1402 23.354 12.1369 23.354C12.0013 23.3512 11.8733 23.2932 11.7814 23.1937L2.40471 12.9978C2.24392 12.8228 2.22916 12.5592 2.36971 12.3672C2.51025 12.1758 2.76619 12.1102 2.98166 12.2108L11.5638 16.2293C11.636 16.2632 11.7213 16.2468 11.7765 16.1893L24.8676 2.50708C25.0448 2.32169 25.3346 2.30145 25.5359 2.46114C25.7371 2.62083 25.7836 2.90739 25.6431 3.12231L12.6209 23.0712C12.6023 23.1002 12.5804 23.1265 12.5563 23.1511L12.4989 23.2085C12.4054 23.3015 12.2785 23.354 12.1473 23.354Z"
                              fill="#FEFEFE" />
                        </svg>
                        Keeping Advertising Standards High</li>
                  </ul>

                  <div>
                     <a href="#" class="btn btn-primary mt-1"><span>MORE ABOUT US</span><span>MORE ABOUT US</span></a>
                  </div>
               </div>
            </div>
         </div>
      </div>

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

      <!-- Partners -->
      <div class="our-partners-wrapper">
         <div class="container">
            <div class="row g-4 align-items-center">
               <div class="col-12 col-md-3">
                  <h4 class="mb-0">
                     <span class="text-primary">2337+</span>
                     Our Trusted & Valuable Clients</h4>
               </div>
               <!-- Partner Slide -->
               <div class="col-12 col-md-9">
                  <div class="partners-slide ms-md-4 d-flex flex-wrap align-items-center justify-content-between">
                     <img src="img/partner-img/1.png" alt="">
                     <img src="img/partner-img/2.png" alt="">
                     <img src="img/partner-img/3.png" alt="">
                     <img src="img/partner-img/4.png" alt="">
                     <img src="img/partner-img/3.png" alt="">
                     <img src="img/partner-img/5.png" alt="">
                  </div>
               </div>
            </div>
         </div>
      </div>

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

   <!-- Our Projects -->
   <div class="projects-wrapper bg-secondary">
      <div class="divider"></div>

      <div class="container">
         <div class="row g-4 align-items-end justify-content-between">
            <div class="col-12 col-md-6 col-lg-5">
               <div class="section-heading">
                  <h2 class="mb-0">Let's See Our Projects</h2>
               </div>
            </div>

            <div class="col-12 col-md-6 col-lg-4">
               <div class="text-md-end">
                  <a href="#" class="btn btn-primary"><span>VIEW MORE</span><span>VIEW MORE</span></a>
               </div>
            </div>
         </div>

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

         <div class="row g-4 g-xl-5">
            <!-- Portfolio Card -->
            <div class="col-md-6">
               <div class="portfolio-card">
                  <img src="img/bg-img/7.jpg" alt="">

                  <!-- Overlay Content -->
                  <div class="portfolio-overlay-content d-flex align-items-center justify-content-between">
                     <div class="me-4">
                        <h3 class="mb-0">Website Design</h3>
                        <p class="mb-0">Branding Design</p>
                     </div>

                     <a href="#" class="btn">
                        <span>
                           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                              fill="none">
                              <path
                                 d="M21.0459 12.796L14.2959 19.546C14.0846 19.7573 13.7979 19.8761 13.4991 19.8761C13.2002 19.8761 12.9135 19.7573 12.7022 19.546C12.4908 19.3346 12.3721 19.048 12.3721 18.7491C12.3721 18.4502 12.4908 18.1636 12.7022 17.9522L17.5312 13.125H3.75C3.45163 13.125 3.16548 13.0065 2.9545 12.7955C2.74353 12.5846 2.625 12.2984 2.625 12C2.625 11.7017 2.74353 11.4155 2.9545 11.2045C3.16548 10.9936 3.45163 10.875 3.75 10.875H17.5312L12.7041 6.04504C12.4927 5.8337 12.374 5.54705 12.374 5.24817C12.374 4.94928 12.4927 4.66264 12.7041 4.45129C12.9154 4.23995 13.2021 4.12122 13.5009 4.12122C13.7998 4.12122 14.0865 4.23995 14.2978 4.45129L21.0478 11.2013C21.1527 11.3059 21.2359 11.4303 21.2926 11.5672C21.3493 11.7041 21.3784 11.8508 21.3782 11.999C21.3781 12.1472 21.3486 12.2939 21.2916 12.4307C21.2346 12.5674 21.1511 12.6916 21.0459 12.796Z"
                                 fill="#0E0E0E" />
                           </svg>
                        </span>
                        <span>
                           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                              fill="none">
                              <path
                                 d="M21.0459 12.796L14.2959 19.546C14.0846 19.7573 13.7979 19.8761 13.4991 19.8761C13.2002 19.8761 12.9135 19.7573 12.7022 19.546C12.4908 19.3346 12.3721 19.048 12.3721 18.7491C12.3721 18.4502 12.4908 18.1636 12.7022 17.9522L17.5312 13.125H3.75C3.45163 13.125 3.16548 13.0065 2.9545 12.7955C2.74353 12.5846 2.625 12.2984 2.625 12C2.625 11.7017 2.74353 11.4155 2.9545 11.2045C3.16548 10.9936 3.45163 10.875 3.75 10.875H17.5312L12.7041 6.04504C12.4927 5.8337 12.374 5.54705 12.374 5.24817C12.374 4.94928 12.4927 4.66264 12.7041 4.45129C12.9154 4.23995 13.2021 4.12122 13.5009 4.12122C13.7998 4.12122 14.0865 4.23995 14.2978 4.45129L21.0478 11.2013C21.1527 11.3059 21.2359 11.4303 21.2926 11.5672C21.3493 11.7041 21.3784 11.8508 21.3782 11.999C21.3781 12.1472 21.3486 12.2939 21.2916 12.4307C21.2346 12.5674 21.1511 12.6916 21.0459 12.796Z"
                                 fill="#0E0E0E" />
                           </svg>
                        </span>
                     </a>
                  </div>
               </div>
            </div>

            <!-- Portfolio Card -->
            <div class="col-md-6">
               <div class="portfolio-card">
                  <img src="img/bg-img/8.jpg" alt="">

                  <!-- Overlay Content -->
                  <div class="portfolio-overlay-content d-flex align-items-center justify-content-between">
                     <div class="me-4">
                        <h3 class="mb-0">Website Design</h3>
                        <p class="mb-0">Branding Design</p>
                     </div>

                     <a href="#" class="btn">
                        <span>
                           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                              fill="none">
                              <path
                                 d="M21.0459 12.796L14.2959 19.546C14.0846 19.7573 13.7979 19.8761 13.4991 19.8761C13.2002 19.8761 12.9135 19.7573 12.7022 19.546C12.4908 19.3346 12.3721 19.048 12.3721 18.7491C12.3721 18.4502 12.4908 18.1636 12.7022 17.9522L17.5312 13.125H3.75C3.45163 13.125 3.16548 13.0065 2.9545 12.7955C2.74353 12.5846 2.625 12.2984 2.625 12C2.625 11.7017 2.74353 11.4155 2.9545 11.2045C3.16548 10.9936 3.45163 10.875 3.75 10.875H17.5312L12.7041 6.04504C12.4927 5.8337 12.374 5.54705 12.374 5.24817C12.374 4.94928 12.4927 4.66264 12.7041 4.45129C12.9154 4.23995 13.2021 4.12122 13.5009 4.12122C13.7998 4.12122 14.0865 4.23995 14.2978 4.45129L21.0478 11.2013C21.1527 11.3059 21.2359 11.4303 21.2926 11.5672C21.3493 11.7041 21.3784 11.8508 21.3782 11.999C21.3781 12.1472 21.3486 12.2939 21.2916 12.4307C21.2346 12.5674 21.1511 12.6916 21.0459 12.796Z"
                                 fill="#0E0E0E" />
                           </svg>
                        </span>
                        <span>
                           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                              fill="none">
                              <path
                                 d="M21.0459 12.796L14.2959 19.546C14.0846 19.7573 13.7979 19.8761 13.4991 19.8761C13.2002 19.8761 12.9135 19.7573 12.7022 19.546C12.4908 19.3346 12.3721 19.048 12.3721 18.7491C12.3721 18.4502 12.4908 18.1636 12.7022 17.9522L17.5312 13.125H3.75C3.45163 13.125 3.16548 13.0065 2.9545 12.7955C2.74353 12.5846 2.625 12.2984 2.625 12C2.625 11.7017 2.74353 11.4155 2.9545 11.2045C3.16548 10.9936 3.45163 10.875 3.75 10.875H17.5312L12.7041 6.04504C12.4927 5.8337 12.374 5.54705 12.374 5.24817C12.374 4.94928 12.4927 4.66264 12.7041 4.45129C12.9154 4.23995 13.2021 4.12122 13.5009 4.12122C13.7998 4.12122 14.0865 4.23995 14.2978 4.45129L21.0478 11.2013C21.1527 11.3059 21.2359 11.4303 21.2926 11.5672C21.3493 11.7041 21.3784 11.8508 21.3782 11.999C21.3781 12.1472 21.3486 12.2939 21.2916 12.4307C21.2346 12.5674 21.1511 12.6916 21.0459 12.796Z"
                                 fill="#0E0E0E" />
                           </svg>
                        </span>
                     </a>
                  </div>
               </div>
            </div>

            <!-- Portfolio Card -->
            <div class="col-md-6">
               <div class="portfolio-card">
                  <img src="img/bg-img/9.jpg" alt="">

                  <!-- Overlay Content -->
                  <div class="portfolio-overlay-content d-flex align-items-center justify-content-between">
                     <div class="me-4">
                        <h3 class="mb-0">Website Design</h3>
                        <p class="mb-0">Branding Design</p>
                     </div>

                     <a href="#" class="btn">
                        <span>
                           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                              fill="none">
                              <path
                                 d="M21.0459 12.796L14.2959 19.546C14.0846 19.7573 13.7979 19.8761 13.4991 19.8761C13.2002 19.8761 12.9135 19.7573 12.7022 19.546C12.4908 19.3346 12.3721 19.048 12.3721 18.7491C12.3721 18.4502 12.4908 18.1636 12.7022 17.9522L17.5312 13.125H3.75C3.45163 13.125 3.16548 13.0065 2.9545 12.7955C2.74353 12.5846 2.625 12.2984 2.625 12C2.625 11.7017 2.74353 11.4155 2.9545 11.2045C3.16548 10.9936 3.45163 10.875 3.75 10.875H17.5312L12.7041 6.04504C12.4927 5.8337 12.374 5.54705 12.374 5.24817C12.374 4.94928 12.4927 4.66264 12.7041 4.45129C12.9154 4.23995 13.2021 4.12122 13.5009 4.12122C13.7998 4.12122 14.0865 4.23995 14.2978 4.45129L21.0478 11.2013C21.1527 11.3059 21.2359 11.4303 21.2926 11.5672C21.3493 11.7041 21.3784 11.8508 21.3782 11.999C21.3781 12.1472 21.3486 12.2939 21.2916 12.4307C21.2346 12.5674 21.1511 12.6916 21.0459 12.796Z"
                                 fill="#0E0E0E" />
                           </svg>
                        </span>
                        <span>
                           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                              fill="none">
                              <path
                                 d="M21.0459 12.796L14.2959 19.546C14.0846 19.7573 13.7979 19.8761 13.4991 19.8761C13.2002 19.8761 12.9135 19.7573 12.7022 19.546C12.4908 19.3346 12.3721 19.048 12.3721 18.7491C12.3721 18.4502 12.4908 18.1636 12.7022 17.9522L17.5312 13.125H3.75C3.45163 13.125 3.16548 13.0065 2.9545 12.7955C2.74353 12.5846 2.625 12.2984 2.625 12C2.625 11.7017 2.74353 11.4155 2.9545 11.2045C3.16548 10.9936 3.45163 10.875 3.75 10.875H17.5312L12.7041 6.04504C12.4927 5.8337 12.374 5.54705 12.374 5.24817C12.374 4.94928 12.4927 4.66264 12.7041 4.45129C12.9154 4.23995 13.2021 4.12122 13.5009 4.12122C13.7998 4.12122 14.0865 4.23995 14.2978 4.45129L21.0478 11.2013C21.1527 11.3059 21.2359 11.4303 21.2926 11.5672C21.3493 11.7041 21.3784 11.8508 21.3782 11.999C21.3781 12.1472 21.3486 12.2939 21.2916 12.4307C21.2346 12.5674 21.1511 12.6916 21.0459 12.796Z"
                                 fill="#0E0E0E" />
                           </svg>
                        </span>
                     </a>
                  </div>
               </div>
            </div>

            <!-- Portfolio Card -->
            <div class="col-md-6">
               <div class="portfolio-card">
                  <img src="img/bg-img/10.jpg" alt="">

                  <!-- Overlay Content -->
                  <div class="portfolio-overlay-content d-flex align-items-center justify-content-between">
                     <div class="me-4">
                        <h3 class="mb-0">Website Design</h3>
                        <p class="mb-0">Branding Design</p>
                     </div>

                     <a href="#" class="btn">
                        <span>
                           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                              fill="none">
                              <path
                                 d="M21.0459 12.796L14.2959 19.546C14.0846 19.7573 13.7979 19.8761 13.4991 19.8761C13.2002 19.8761 12.9135 19.7573 12.7022 19.546C12.4908 19.3346 12.3721 19.048 12.3721 18.7491C12.3721 18.4502 12.4908 18.1636 12.7022 17.9522L17.5312 13.125H3.75C3.45163 13.125 3.16548 13.0065 2.9545 12.7955C2.74353 12.5846 2.625 12.2984 2.625 12C2.625 11.7017 2.74353 11.4155 2.9545 11.2045C3.16548 10.9936 3.45163 10.875 3.75 10.875H17.5312L12.7041 6.04504C12.4927 5.8337 12.374 5.54705 12.374 5.24817C12.374 4.94928 12.4927 4.66264 12.7041 4.45129C12.9154 4.23995 13.2021 4.12122 13.5009 4.12122C13.7998 4.12122 14.0865 4.23995 14.2978 4.45129L21.0478 11.2013C21.1527 11.3059 21.2359 11.4303 21.2926 11.5672C21.3493 11.7041 21.3784 11.8508 21.3782 11.999C21.3781 12.1472 21.3486 12.2939 21.2916 12.4307C21.2346 12.5674 21.1511 12.6916 21.0459 12.796Z"
                                 fill="#0E0E0E" />
                           </svg>
                        </span>
                        <span>
                           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                              fill="none">
                              <path
                                 d="M21.0459 12.796L14.2959 19.546C14.0846 19.7573 13.7979 19.8761 13.4991 19.8761C13.2002 19.8761 12.9135 19.7573 12.7022 19.546C12.4908 19.3346 12.3721 19.048 12.3721 18.7491C12.3721 18.4502 12.4908 18.1636 12.7022 17.9522L17.5312 13.125H3.75C3.45163 13.125 3.16548 13.0065 2.9545 12.7955C2.74353 12.5846 2.625 12.2984 2.625 12C2.625 11.7017 2.74353 11.4155 2.9545 11.2045C3.16548 10.9936 3.45163 10.875 3.75 10.875H17.5312L12.7041 6.04504C12.4927 5.8337 12.374 5.54705 12.374 5.24817C12.374 4.94928 12.4927 4.66264 12.7041 4.45129C12.9154 4.23995 13.2021 4.12122 13.5009 4.12122C13.7998 4.12122 14.0865 4.23995 14.2978 4.45129L21.0478 11.2013C21.1527 11.3059 21.2359 11.4303 21.2926 11.5672C21.3493 11.7041 21.3784 11.8508 21.3782 11.999C21.3781 12.1472 21.3486 12.2939 21.2916 12.4307C21.2346 12.5674 21.1511 12.6916 21.0459 12.796Z"
                                 fill="#0E0E0E" />
                           </svg>
                        </span>
                     </a>
                  </div>
               </div>
            </div>

         </div>
      </div>

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

   <!-- Work Process Wrapper -->
   <div class="work-process-wrapper">
      <div class="divider"></div>

      <div class="container">
         <div class="row g-5">
            <div class="col-md-5 col-xl-6">
               <div class="section-heading">
                  <h2 class="mb-4">Our Working Process</h2>
                  <p class="mb-5">We aim to empower brands of all sizes and industries with
                     data-driven strategies that yield tangible results. believe in crafting
                     campaigns that not only drive.</p>
                  <a href="#" class="btn btn-primary"><span>READ MORE</span><span>READ MORE</span></a>
               </div>
            </div>

            <div class="col-md-7 col-xl-6">
               <div class="work-process">
                  <!-- Work Process Card -->
                  <div class="process-card">
                     <div class="number">1</div>
                     <div class="process-text">
                        <h4>Fusion Labs</h4>
                        <p class="mb-0">Etiam imperdiet imperdiet orci. Curabitur nisi. Fusce fermentum.
                           Nunc nonummy metus. Phasellus orci ullamcorper ipsum rutrum nunc.</p>
                     </div>
                  </div>

                  <!-- Work Process Card -->
                  <div class="process-card">
                     <div class="number">2</div>
                     <div class="process-text">
                        <h4>Quirk Media</h4>
                        <p class="mb-0">Etiam imperdiet imperdiet orci. Curabitur nisi. Fusce fermentum.
                           Nunc nonummy metus. Phasellus orci ullamcorper ipsum rutrum nunc.</p>
                     </div>
                  </div>

                  <!-- Work Process Card -->
                  <div class="process-card">
                     <div class="number">3</div>
                     <div class="process-text">
                        <h4>Spark Pulse</h4>
                        <p class="mb-0">Etiam imperdiet imperdiet orci. Curabitur nisi. Fusce fermentum.
                           Nunc nonummy metus. Phasellus orci ullamcorper ipsum rutrum nunc.</p>
                     </div>
                  </div>

                  <!-- Work Process Card -->
                  <div class="process-card">
                     <div class="number">4</div>
                     <div class="process-text">
                        <h4>Nova Web</h4>
                        <p class="mb-0">Etiam imperdiet imperdiet orci. Curabitur nisi. Fusce fermentum.
                           Nunc nonummy metus. Phasellus orci ullamcorper ipsum rutrum nunc.</p>
                     </div>
                  </div>

               </div>
            </div>
         </div>
      </div>

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

   <!-- Video -->
   <div class="video-wrapper jarallax" data-jarallax="" data-speed="0.6"
      style="background-image: url('img/bg-img/11.jpg');">
      <div class="video-popup">
         <div class="popup-video">
            <div class="video-btn wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="1000ms"
               data-video="https://player.vimeo.com/video/1004501259">
               <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_434)">
                     <path
                        d="M5.10545 0.529181C2.94172 -0.711968 1.1875 0.304796 1.1875 2.79837V21.1999C1.1875 23.6959 2.94172 24.7114 5.10545 23.4714L21.1893 14.2474C23.3538 13.0059 23.3538 10.9943 21.1893 9.753L5.10545 0.529181Z"
                        fill="#0E0E0E" />
                  </g>
                  <defs>
                     <clipPath id="clip0_1_434">
                        <rect width="24" height="24" fill="white" />
                     </clipPath>
                  </defs>
               </svg>
               <span class="video-sonar"></span>
            </div>
         </div>
      </div>
   </div>

   <!-- Awards & Honors -->
   <div class="awards-honors-wrapper">
      <div class="divider"></div>

      <div class="container">
         <div class="row justify-content-center">
            <div class="col-12 col-lg-7">
               <div class="section-heading">
                  <h2 class="mb-0">Awards &amp; Honors</h2>
               </div>
            </div>
         </div>

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

         <div class="award-card-container">
            <!-- Award Card -->
            <div class="award-card">
               <div class="award-name-description">
                  <h3>Blue Host SEO Awards</h3>
                  <p>Business consulting many lawyers to offer free way is a professional service or firms with
                     expertise.</p>
               </div>
               <div class="award-image">
                  <img src="img/bg-img/12.png" alt="">
               </div>
               <div class="awarded-year">
                  <h2>2025</h2>
               </div>
            </div>

            <!-- Award Card -->
            <div class="award-card">
               <div class="award-name-description">
                  <h3>Newyork Design Years</h3>
                  <p>Business consulting many lawyers to offer free way is a professional service or firms with
                     expertise.</p>
               </div>
               <div class="award-image">
                  <img src="img/bg-img/13.png" alt="">
               </div>
               <div class="awarded-year">
                  <h2>2022</h2>
               </div>
            </div>

            <!-- Award Card -->
            <div class="award-card">
               <div class="award-name-description">
                  <h3>Envato Author Awards</h3>
                  <p>Business consulting many lawyers to offer free way is a professional service or firms with
                     expertise.</p>
               </div>
               <div class="award-image">
                  <img src="img/bg-img/14.png" alt="">
               </div>
               <div class="awarded-year">
                  <h2>2020</h2>
               </div>
            </div>

            <!-- Award Card -->
            <div class="award-card">
               <div class="award-name-description">
                  <h3>Marketing Awards</h3>
                  <p>Business consulting many lawyers to offer free way is a professional service or firms with
                     expertise.</p>
               </div>
               <div class="award-image">
                  <img src="img/bg-img/15.png" alt="">
               </div>
               <div class="awarded-year">
                  <h2>2018</h2>
               </div>
            </div>
         </div>
      </div>

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

   <!-- Testimonial & Contact -->
   <div class="testimonial-contact-wrapper">
      <div class="divider"></div>

      <div class="container">
         <div class="row">
            <div class="col-12 col-lg-6">
               <div class="section-heading">
                  <h2 class="mb-0">Testimonials</h2>
               </div>

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

               <!-- Testimonial Slide -->
               <div class="testimonial-slide">
                  <div class="swiper testimonial-swiper">
                     <!-- Quote Icon -->
                     <svg class="mb-3" xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60"
                        fill="none">
                        <path
                           d="M16.2504 7.5C24.2359 7.5 30.0004 14.0926 30.0002 23.8541C29.9491 38.0369 19.2871 48.0646 3.90567 49.9903C2.47864 50.169 1.9284 48.1922 3.24251 47.6078C9.14448 44.9835 12.1253 41.6533 12.5103 38.3571C12.798 35.8944 11.4592 33.7372 9.77821 33.3333C5.42025 32.286 2.50038 26.859 2.50038 21.25C2.50038 13.6561 8.65647 7.5 16.2504 7.5Z"
                           fill="#ECC80B" />
                        <path
                           d="M46.2504 7.5C54.2359 7.5 60.0004 14.0926 60.0002 23.8541C59.9491 38.0369 49.2871 48.0646 33.9057 49.9903C32.4786 50.169 31.9284 48.1922 33.2425 47.6078C39.1445 44.9835 42.1253 41.6533 42.5103 38.3571C42.798 35.8944 41.4592 33.7372 39.7782 33.3333C35.4203 32.286 32.5004 26.859 32.5004 21.25C32.5004 13.6561 38.6565 7.5 46.2504 7.5Z"
                           fill="#ECC80B" />
                     </svg>

                     <div class="swiper-wrapper">
                        <!-- Testimonial Slide -->
                        <div class="swiper-slide">
                           <p>“He quickly delivered excellent design a per required specifications. New landing page
                              will
                              have refreshing simple look, while keeping page load light on images and at the same
                              keeping
                              professional look. Finally, it also seems very reasonable to implement responsive design,
                              so
                              I'm very happy with that.”</p>
                           <div class="border-line"></div>
                           <div class="testimonial-info d-flex align-items-center">
                              <img src="img/bg-img/16.png" alt="">
                              <div>
                                 <h4>Daniyel Karlos</h4>
                                 <p class="mb-0">UX Designer</p>
                              </div>
                           </div>
                        </div>

                        <!-- Testimonial Slide -->
                        <div class="swiper-slide">
                           <p>“He quickly delivered excellent design a per required specifications. New landing page
                              will
                              have refreshing simple look, while keeping page load light on images and at the same
                              keeping
                              professional look. Finally, it also seems very reasonable to implement responsive design,
                              so
                              I'm very happy with that.”</p>
                           <div class="border-line"></div>
                           <div class="testimonial-info d-flex align-items-center">
                              <img src="img/bg-img/16.png" alt="">
                              <div>
                                 <h4>Daniyel Karlos</h4>
                                 <p class="mb-0">UX Designer</p>
                              </div>
                           </div>
                        </div>

                        <!-- Testimonial Slide -->
                        <div class="swiper-slide">
                           <p>“He quickly delivered excellent design a per required specifications. New landing page
                              will
                              have refreshing simple look, while keeping page load light on images and at the same
                              keeping
                              professional look. Finally, it also seems very reasonable to implement responsive design,
                              so
                              I'm very happy with that.”</p>
                           <div class="border-line"></div>
                           <div class="testimonial-info d-flex align-items-center">
                              <img src="img/bg-img/16.png" alt="">
                              <div>
                                 <h4>Daniyel Karlos</h4>
                                 <p class="mb-0">UX Designer</p>
                              </div>
                           </div>
                        </div>
                     </div>

                     <!-- If we need navigation buttons -->
                     <div class="swiper-navigation-container">
                        <div class="swiper-button-prev">
                           <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26"
                              fill="none">
                              <path
                                 d="M3.22024 13.8603L10.5175 21.1576C10.746 21.3861 11.0559 21.5144 11.379 21.5144C11.7021 21.5144 12.012 21.3861 12.2405 21.1576C12.469 20.9291 12.5973 20.6192 12.5973 20.2961C12.5973 19.973 12.469 19.6631 12.2405 19.4346L7.0199 14.216H21.9185C22.2411 14.216 22.5505 14.0879 22.7785 13.8598C23.0066 13.6317 23.1348 13.3224 23.1348 12.9998C23.1348 12.6773 23.0066 12.3679 22.7785 12.1398C22.5505 11.9117 22.2411 11.7836 21.9185 11.7836H7.0199L12.2385 6.56199C12.467 6.33351 12.5953 6.02362 12.5953 5.7005C12.5953 5.37738 12.467 5.0675 12.2385 4.83902C12.01 4.61054 11.7001 4.48218 11.377 4.48218C11.0539 4.48218 10.744 4.61054 10.5155 4.83902L3.21821 12.1363C3.10481 12.2495 3.01487 12.3839 2.95357 12.5319C2.89227 12.6799 2.86081 12.8385 2.861 12.9987C2.86119 13.1589 2.89302 13.3175 2.95467 13.4654C3.01632 13.6132 3.10657 13.7474 3.22024 13.8603Z"
                                 fill="#0E0E0E" />
                           </svg>
                        </div>

                        <div class="swiper-button-next">
                           <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26"
                              fill="none">
                              <path
                                 d="M22.7798 13.8603L15.4825 21.1576C15.254 21.3861 14.9441 21.5144 14.621 21.5144C14.2979 21.5144 13.988 21.3861 13.7595 21.1576C13.531 20.9291 13.4027 20.6192 13.4027 20.2961C13.4027 19.973 13.531 19.6631 13.7595 19.4346L18.9801 14.216H4.08145C3.75889 14.216 3.44954 14.0879 3.22146 13.8598C2.99337 13.6317 2.86523 13.3224 2.86523 12.9998C2.86523 12.6773 2.99337 12.3679 3.22146 12.1398C3.44954 11.9117 3.75889 11.7836 4.08145 11.7836H18.9801L13.7615 6.56199C13.533 6.33351 13.4047 6.02362 13.4047 5.7005C13.4047 5.37738 13.533 5.0675 13.7615 4.83902C13.99 4.61054 14.2999 4.48218 14.623 4.48218C14.9461 4.48218 15.256 4.61054 15.4845 4.83902L22.7818 12.1363C22.8952 12.2495 22.9851 12.3839 23.0464 12.5319C23.1077 12.6799 23.1392 12.8385 23.139 12.9987C23.1388 13.1589 23.107 13.3175 23.0453 13.4654C22.9837 13.6132 22.8934 13.7474 22.7798 13.8603Z"
                                 fill="#0E0E0E" />
                           </svg>
                        </div>
                     </div>

                  </div>
               </div>
            </div>
         </div>
      </div>

      <!-- Contact Wrapper -->
      <div class="contact-wrapper" style="background-image: url('img/bg-img/12.jpg');">
         <div class="contact-form">
            <h3 class="mb-4">Get in Touch</h3>
            <!-- Form -->
            <form action="#" method="post" class="mt-3">
               <input type="text" name="text" class="form-control" placeholder="Your Name">
               <input type="email" name="email" class="form-control" placeholder="Email Address">
               <textarea name="message" class="form-control" placeholder="Message" id="message"></textarea>
               <button class="btn btn-primary mt-3"><span>SEND MESSAGE</span><span>SEND MESSAGE</span></button>
            </form>
         </div>
      </div>

      <div class="divider d-none d-lg-block"></div>
   </div>

   <!-- Blog Wrapper -->
   <div class="blog-wrapper">
      <div class="divider"></div>

      <div class="container">
         <div class="row">
            <div class="col-12">
               <div class="section-heading d-md-flex align-items-end justify-content-between">
                  <h2 class="mb-4 mb-md-0">Our Latest Blog <br>& News</h2>
                  <a href="#" class="btn btn-primary"><span>ALL BLOGS</span><span>ALL BLOGS</span></a>
               </div>
            </div>
         </div>
      </div>

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

      <div class="container">
         <div class="row g-4">

            <!-- Blog Card -->
            <div class="col-12 col-md-6 col-lg-4">
               <div class="blog-card">
                  <img src="img/bg-img/17.jpg" alt="">
                  <div class="blog-meta d-flex align-items-center">
                     <a href="#">March 26, 24</a>
                     <div class="dot"></div>
                     <a href="#">Branding</a>
                  </div>
                  <a class="post-title" href="blog-details.html">Providing brilliant ideas For your business</a>
               </div>
            </div>

            <!-- Blog Card -->
            <div class="col-12 col-md-6 col-lg-4">
               <div class="blog-card">
                  <img src="img/bg-img/18.jpg" alt="">
                  <div class="blog-meta d-flex align-items-center">
                     <a href="#">March 26, 24</a>
                     <div class="dot"></div>
                     <a href="#">Branding</a>
                  </div>
                  <a class="post-title" href="blog-details.html">Everything You Should Know About Return</a>
               </div>
            </div>

            <!-- Blog Card -->
            <div class="col-12 col-md-6 col-lg-4">
               <div class="blog-card">
                  <img src="img/bg-img/19.jpg" alt="">
                  <div class="blog-meta d-flex align-items-center">
                     <a href="#">March 26, 24</a>
                     <div class="dot"></div>
                     <a href="#">Branding</a>
                  </div>
                  <a class="post-title" href="blog-details.html">Top tools for efficient web development</a>
               </div>
            </div>

         </div>
      </div>

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

   <!-- CTA Wrapper -->
   <div class="cta-wrapper">
      <div class="divider"></div>

      <div class="container">
         <div class="row g-4 align-items-center">
            <div class="col-12 col-lg-6">
               <h2 class="wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="700ms">Let's Work Together</h2>
            </div>
            <div class="col-12 col-lg-6">
               <p class="wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="900ms">Studio agencies excel in
                  graphic design, design, branding, and visual elements, offering comprehensive
                  solutions for businesses' design needs across graphic platforms.</p>
               <a href="#" class="btn btn-primary wow fadeInUp" data-wow-duration="1000ms"
                  data-wow-delay="1100ms"><span>CONTACT US</span><span>CONTACT US</span></a>
            </div>
         </div>
      </div>

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

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

      <div class="container">
         <div class="row g-5">

            <!-- Footer Card -->
            <div class="col-12 col-md-6 col-xl">
               <div class="footer-card">
                  <a href="#">
                     <img class="dark-logo" src="img/core-img/logo.png" alt="">
                     <img class="light-logo" src="img/core-img/logo-light.png" alt="">
                  </a>

                  <p class="mb-0">Creative design agency specializes in innovative visual solutions</p>
                  <!-- Social Nav -->
                  <div class="social-nav">
                     <a href="#">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                           class="bi bi-facebook" viewBox="0 0 16 16">
                           <path
                              d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951" />
                        </svg>
                     </a>
                     <a href="#">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                           class="bi bi-twitter-x" viewBox="0 0 16 16">
                           <path
                              d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z" />
                        </svg>
                     </a>
                     <a href="#">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                           class="bi bi-linkedin" viewBox="0 0 16 16">
                           <path
                              d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" />
                        </svg>
                     </a>
                     <a href="#">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                           class="bi bi-instagram" viewBox="0 0 16 16">
                           <path
                              d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334" />
                        </svg>
                     </a>
                  </div>
               </div>
            </div>

            <!-- Footer Card -->
            <div class="col-12 col-md-6 col-xl">
               <div class="footer-card">
                  <h5 class="mb-0">Services</h5>
                  <!-- Footer Nav -->
                  <ul class="footer-nav">
                     <li><a href="#">UI/UX Design</a></li>
                     <li><a href="#">Mobile Apps Design</a></li>
                     <li><a href="#">Web Development</a></li>
                     <li><a href="#">SaaS Design</a></li>
                     <li><a href="#">Webflow Design</a></li>
                  </ul>
               </div>
            </div>

            <!-- Footer Card -->
            <div class="col-12 col-md-6 col-xl">
               <div class="footer-card">
                  <h5 class="mb-0">Resources</h5>
                  <!-- Footer Nav -->
                  <ul class="footer-nav">
                     <li><a href="#">About Us</a></li>
                     <li><a href="#">Portfolio</a></li>
                     <li><a href="#">Expert Team</a></li>
                     <li><a href="#">Pricing Plan</a></li>
                     <li><a href="#">Blog & News</a></li>
                  </ul>
               </div>
            </div>

            <!-- Footer Card -->
            <div class="col-12 col-md-6 col-xl-4">
               <div class="footer-card">
                  <h5 class="mb-0">Subscribe</h5>

                  <!-- Subscribe Form -->
                  <form action="#" class="subscribe-form">
                     <input type="email" class="form-control" placeholder="Email address">
                     <button class="btn">
                        <span class="material-symbols-outlined">arrow_forward</span>
                        <span class="material-symbols-outlined">arrow_forward</span>
                     </button>
                  </form>

                  <div class="form-check">
                     <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                     <label class="form-check-label ps-2" for="flexCheckDefault">
                        I agree with the terms and conditions.
                     </label>
                  </div>
               </div>
            </div>

         </div>
      </div>

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

      <div class="container">
         <div class="row g-3 align-items-center">
            <!-- Copyright -->
            <div class="col-12 col-md-6">
               <p class="mb-0 copyright">Copyright © <span id="year"></span> <a href="#">MOONTEL_ICT</a></p>
            </div>
            <!-- Footer Bottom Nav -->
            <div class="col-12 col-md-6">
               <div class="footer-bottom-nav">
                  <a href="#">Terms & conditions</a>
                  <a href="#">Privacy policy</a>
               </div>
            </div>
         </div>
      </div>

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

   <!-- Cookie Alert -->
   <div class="cookiealert shadow-lg show">
      <h2 class="mb-3">Cookie's Notice</h2>
      <p class="mb-4">We use cookies for the best experience on our website, for social media features and to anal
         traffic. accepting
         you agree to our use of cookies. Read <a href="#" target="_blank"> Cookies Policy.</a></p>
      <button class="btn btn-dark acceptcookies" type="button"
         aria-label="Close"><span>Accept</span><span>Accept</span></button>
   </div>

   <!-- 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>