index-2.html

<!DOCTYPE html>

<!--
 // WEBSITE: https://themefisher.com
 // TWITTER: https://twitter.com/themefisher
 // FACEBOOK: https://www.facebook.com/themefisher
 // GITHUB: https://github.com/themefisher/
-->

<html lang="en">
  <head>
    <!-- Basic Page Needs
  ================================================== -->
    <meta charset="utf-8" />
    <title>Seed Innovation Technologies</title>

    <!-- Mobile Specific Metas
  ================================================== -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="description" content="Corporate Html5 Template" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=5.0"
    />
    <meta name="author" content="Themefisher" />
    <meta name="generator" content="Themefisher Rappo HTML Template v1.0" />

    <!-- theme meta -->
    <meta name="theme-name" content="rappo" />

    <!-- bootstrap -->
    <link rel="stylesheet" href="plugins/bootstrap/bootstrap.min.css" />
    <script src="/plugins/bootstrap/bootstrap.min.js" defer></script>
    <!-- Animate -->
    <link rel="stylesheet" href="plugins/animate-css/animate.css" />
    <!-- Icon Font css -->
    <link rel="stylesheet" href="plugins/fontawesome/css/all.css" />
    <link rel="stylesheet" href="plugins/fonts/Pe-icon-7-stroke.css" />
    <!-- Themify icon Css -->
    <link rel="stylesheet" href="plugins/themify/css/themify-icons.css" />
    <!-- Slick Carousel CSS -->
    <link rel="stylesheet" href="plugins/slick-carousel/slick/slick.css" />
    <link
      rel="stylesheet"
      href="plugins/slick-carousel/slick/slick-theme.css"
    />

    <!-- Google fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="css/style.css" />
    <!--Favicon-->
    <link rel="icon" href="images/favicon.png" type="image/x-icon" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <!-- Socials -->

    <!-- Primary Meta Tags -->
    <title>Seed Inov</title>
    <meta name="title" content="Seed Inov" />
    <meta
      name="description"
      content="SeedInov harnesses cutting-edge technology to craft transformative solutions. Through a fusion of creativity and expertise, SeedInov paves the way for advancements that shape the future."
    />

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://seedinov.com/" />
    <meta property="og:title" content="Seed Inov" />
    <meta
      property="og:description"
      content="SeedInov harnesses cutting-edge technology to craft transformative solutions. Through a fusion of creativity and expertise, SeedInov paves the way for advancements that shape the future."
    />
    <meta
      property="og:image"
      content="https://seedinov.com/images/icon/logo.png"
    />

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:url" content="https://seedinov.com/" />
    <meta property="twitter:title" content="Seed Inov" />
    <meta
      property="twitter:description"
      content="SeedInov harnesses cutting-edge technology to craft transformative solutions. Through a fusion of creativity and expertise, SeedInov paves the way for advancements that shape the future."
    />
    <meta
      property="twitter:image"
      content="https://seedinov.com/images/icon/logo.png"
    />

    <!-- Meta Tags Generated with https://metatags.io -->
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        var tooltipElements = document.querySelectorAll(
          '[data-toggle="tooltip"]',
        );
        tooltipElements.forEach(function (element) {
          new bootstrap.Tooltip(element);
        });
      });
    </script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js" defer></script>
    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=G-0VCSYBHKJC"
    ></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag("js", new Date());

      gtag("config", "G-0VCSYBHKJC");
    </script>
  </head>

  <body id="top-header"></body>
</html>


<!-- LOADER TEMPLATE -->
<div id="page-loader">
  <div class="loader-icon fa fa-spin colored-border"></div>
</div>
<!-- /LOADER TEMPLATE -->
<div class="logo-bar d-none d-md-block d-lg-block bg-light">
  <div class="container">
    <div class="row">
      <div class="col-lg-2">
        <div class="logo d-none d-lg-block">
          <!-- Brand -->
          <a class="navbar-brand js-scroll-trigger" href="index-2.html">
            <h2>Rappo</h2>
          </a>
        </div>
      </div>

      <div class="col-lg-8 justify-content-end ml-lg-auto d-flex col-12">
        <div class="top-info-block d-inline-flex">
          <div class="icon-block">
            <i class="ti-mobile"></i>
          </div>
          <div class="info-block">
            <h5 class="font-weight-500">+7809346657</h5>
            <p>Call Free</p>
          </div>
        </div>

        <div class="top-info-block d-inline-flex">
          <div class="icon-block">
            <i class="ti-email"></i>
          </div>
          <div class="info-block">
            <h5 class="font-weight-500">info@example.com</h5>
            <p>Email Us</p>
          </div>
        </div>
        <div class="top-info-block d-inline-flex">
          <div class="icon-block">
            <i class="ti-time"></i>
          </div>
          <div class="info-block">
            <h5 class="font-weight-500">Mon-Sat 9:00-12.00 </h5>
            <p>Sunday Closed</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- NAVBAR
    ================================================= -->
<div class="main-navigation menu-2" id="mainmenu-area">
  <div class="container">
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary main-nav navbar-togglable rounded-radius">

      <a class="navbar-brand d-lg-none d-block" href="index-2.html">
        <h4 class="h3 mb-0">Rappo</h4>
      </a>
      <!-- Toggler -->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"
        aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="fa fa-bars"></span>
      </button>

      <!-- Collapse -->
      <div class="collapse navbar-collapse has-dropdown" id="navbarCollapse">
        <!-- Links -->
        <ul class="navbar-nav ">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#!" id="navbarWelcome" role="button" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">
              Home
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarWelcome">
              <li><a class="dropdown-item" href="index.html">Home-1</a></li>
              <li><a class="dropdown-item" href="index-2.html">Home-2</a></li>
              <li><a class="dropdown-item" href="index-3.html">Home-3</a></li>
              <li><a class="dropdown-item" href="index-4.html">Home-4</a></li>

              <li class="dropdown dropdown-submenu dropright">
                <a class="dropdown-item dropdown-toggle" href="#!" id="dropdown0301" role="button"
                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sub Menu</a>

                <ul class="dropdown-menu" aria-labelledby="dropdown0301">
                  <li><a class="dropdown-item" href="index.html">Submenu 01</a></li>
                  <li><a class="dropdown-item" href="index.html">Submenu 02</a></li>
                </ul>
              </li>

              <li class="dropdown dropdown-submenu dropleft">
                <a class="dropdown-item dropdown-toggle" href="#!" id="dropdown0301" role="button"
                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sub Menu</a>

                <ul class="dropdown-menu" aria-labelledby="dropdown0301">
                  <li><a class="dropdown-item" href="index.html">Submenu 01</a></li>
                  <li><a class="dropdown-item" href="index.html">Submenu 02</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li class="nav-item ">
            <a href="about.html" class="nav-link js-scroll-trigger">
              About
            </a>
          </li>
          <li class="nav-item ">
            <a href="service.html" class="nav-link js-scroll-trigger">
              Services
            </a>
          </li>
          <li class="nav-item ">
            <a href="pricing.html" class="nav-link js-scroll-trigger">
              Pricing
            </a>
          </li>

          <li class="nav-item ">
            <a href="project.html" class="nav-link js-scroll-trigger">
              Projects
            </a>
          </li>

          <li class="nav-item ">
            <a href="contact.html" class="nav-link">
              Contact
            </a>
          </li>
        </ul>

        <ul class="ml-lg-auto list-unstyled m-0">
          <li><a href="contact.htm" class="btn btn-trans-white btn-circled">Book Consultation</a></li>
        </ul>
      </div> <!-- / .navbar-collapse -->
    </nav>
  </div> <!-- / .container -->
</div>


    <!-- HERO
    ================================================== -->
    <section class="banner-area py-5" id="banner">
       <div class="overlay"></div>
        <!-- Content -->
        <div class="container">
            <div class="row  align-items-center justify-content-center">
                <div class="col-md-12 col-lg-8">
                   <div class="banner-content text-center text-lg-left">
                        <!-- Heading -->
                        <h1 class="display-4 mb-4 ">
                            Industry <br>Leading Managed Services Solutions
                        </h1>

                        <!-- Subheading -->
                        <p class="lead mb-5">
                            Pindom is set of landing and support pages aimed at helping companies promote new products and business launches.
                        </p>

                        <!-- Button -->
                        <p class="mb-0">
                            <a href="#!" target="_blank" class="btn btn-primary btn-circled">
                                Purchase now
                            </a>
                        </p>
                    </div>
                </div>

                <div class="col-lg-4 ">
                    <div class="banner-contact-form bg-white">
                        <form action="#" >
                            <div class="form-group">
                                <input type="text" name="name" id="name" class="form-control" placeholder="your Name">
                            </div>
                            <div class="form-group">
                                <input type="text" name="email" id="email" class="form-control" placeholder="your Email">
                            </div>
                            <div class="form-group">
                                <input type="text" class="form-control" name="subject" id="subject" placeholder="your Subject">
                            </div>
                            <div class="form-group">
                                <textarea name="message" id="message" cols="30" rows="4" class="form-control" placeholder="Your message"></textarea>
                            </div>
                            <a href="#!" class="btn btn-dark btn-block btn-circled">Submit a query</a>
                        </form>
                    </div>
                </div>
            </div> <!-- / .row -->
        </div> <!-- / .container -->
    </section>


<section id="about" class="section">
        <!-- <div class="container">
            <div class="row">
                <div class="col-12">
                    <p>
                        We consistently put forth our best effort and consistently left a meaningful impression with the outcomes of our Endeavors.
                    </p>
                </div>
            </div> -->
            <div class="row justify-content-center">
                
                <div class="col-lg-4 col-md-6">
                    <div class="img-block">
                        <img loading="lazy" src="images/blog-lg.jpg" alt="" class="img-fluid">
                    </div>
                </div>
                <div class="col-lg-8 pt-6 col-md-12">
                    <div class="row justy-content-center">
                        <div class="col-lg-6 col-sm-6 col-md-6 mb-5">
                            <div class="text-center about-block">
                                <div class="img-icon mb-4">
                                     <i class="ti-thumb-up"></i>
                                </div>
                                <h4 class="mb-2">The right advices</h4>
                                <p>Our team are experts in matching you with the right provider.</p>
                            </div>
                        </div>

                        <div class="col-lg-6 col-sm-6 col-md-6 mb-5">
                            <div class="text-center about-block">
                                <div class="img-icon mb-4">
                                   <i class="ti-cup"></i>
                                </div>
                                <h4 class="mb-2">Recognised for excellence</h4>
                                <p>We've been awarded for our high rate of customer satisfaction.</p>
                            </div>
                        </div>

                        <div class="col-lg-6 col-sm-6 col-md-6">
                            <div class="text-center about-block">
                                <div class="img-icon mb-4">
                                    <i class="ti-wallet"></i>
                                </div>
                                <h4 class="mb-2">Compare the best</h4>
                                <p>We only compare market leaders with a reputation for service quality.</p>
                            </div>
                        </div>

                        <div class="col-lg-6 col-sm-6 col-md-6">
                            <div class="text-center about-block">
                                <div class="img-icon mb-4">
                                    <i class="ti-dashboard"></i>
                                </div>
                                <h4 class="mb-2">Premium Services</h4>
                                <p>We only compare market leaders with a reputation for service quality.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

 <section class="section bg-grey" id="process">
        <div class="container">
            <div class="row justify-content-center mb-4">
                <div class="col-md-8 col-lg-6 text-center">
                    <div class="section-heading">
                        <!-- Heading -->
                        <h2 class="section-title ">
                            Our Working process
                        </h2>

                        <!-- Subheading -->
                        <p>
                            Rappo can be used to create anything from a small marketing page to a sophisticated website.
                        </p>
                    </div>
                </div>
            </div> <!-- / .row -->

            <div class="row justify-content-center">
                <div class="col-lg-4 col-sm-6 col-md-6">
                    <div class="process-block">
                        <img loading="lazy" src="images/process/process-1.jpg" alt="" class="img-fluid">

                        <h3>Project Research</h3>
                        <p>Nihil facere delectus eaque aut possimus nobis laudantium reprehenderit.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6 col-md-6">
                    <div class="process-block">
                        <img loading="lazy" src="images/process/process-2.jpg" alt="" class="img-fluid">

                        <h3>Project demostration</h3>
                        <p>Nihil facere delectus eaque aut possimus nobis laudantium reprehenderit.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6 col-md-6">
                    <div class="process-block">
                        <img loading="lazy" src="images/process/process-3.jpg" alt="" class="img-fluid">

                        <h3>Development & delivery</h3>
                        <p>Nihil facere delectus eaque aut possimus nobis laudantium reprehenderit.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
<section class="section" id="services-2">
  <div class="service-container">
    <div
      class="d-flex justify-content-center align-items-center flex-column"
      style="max-width: 700px; margin: 0 auto"
    >
      <!-- Heading -->
      <h2 class="section-title mb-2 text-center" id="service-heading">
        From Concept to Reality With <span>SeedInov</span> Scalable Digital
        Transformation
      </h2>
      <!-- Subheading -->
      <p class="mb-5 text-center" id="service-subheading">
        Seed Innov is an AI-powered software company and IT consultancy with a
        global presence, We specialize in delivering end-to-end, custom-built
        solutions, covering Product Design & Development and Artificial
        Intelligence solutions.
      </p>
    </div>
    <div class="swiper service-slider">
      <div class="swiper-wrapper">
        <div class="swiper-slide" data-swiper-slide-index="0">
          <div class="swiper-slide-info">
            <div class="swiper-slide-tags">
              <ul class="portfolio_tags">
                <li>
                  <a
                    href="https://eventyr.pro/portfolio-page//?tag_industry%5B%5D=travel-and-hospitality"
                    class="tag"
                    >Travel and Hospitality</a
                  >
                </li>
                <li>
                  <a
                    href="https://eventyr.pro/portfolio-page//?tag_country%5B%5D=uk"
                    class="tag"
                    >UK</a
                  >
                </li>
                <li>
                  <a
                    href="https://eventyr.pro/portfolio-page//?tag_development%5B%5D=mobile-development"
                    class="tag"
                    >Mobile Development</a
                  >
                </li>
                <li>
                  <a
                    href="https://eventyr.pro/portfolio-page//?tag_development%5B%5D=web-development"
                    class="tag"
                    >Web Development</a
                  >
                </li>
              </ul>
            </div>
            <div class="swiper-slide-year"></div>
            <h3 class="swiper-slide-title">
              <a
                href="https://eventyr.pro/portfolio/it-infrastructure-for-global-co-living-hotels/"
              >
                IT Infrastructure for global co-living hotels
              </a>
            </h3>
            <a
              href="https://eventyr.pro/portfolio/it-infrastructure-for-global-co-living-hotels/"
              class="primary-btn button-violet"
            >
              <span>See project</span>
            </a>
          </div>
          <div class="swiper-slide-image">
            <img
              decoding="async"
              width="1325"
              height="720"
              src="https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px-1325x720.png"
              class="project-image swiper-lazy lazyautosizes lazyloaded"
              alt=""
              data-src="https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px-1325x720.png"
              data-srcset="https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px-1325x720.png 1325w, https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px-620x337.png 620w, https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px-768x417.png 768w, https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px-1536x835.png 1536w, https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px.png 1840w"
              data-sizes="auto"
              data-eio-rwidth="1325"
              data-eio-rheight="720"
              sizes="1178px"
              srcset="
                https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px-1325x720.png 1325w,
                https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px-620x337.png   620w,
                https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px-768x417.png   768w,
                https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px-1536x835.png 1536w,
                https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px.png          1840w
              "
            /><noscript
              ><img
                decoding="async"
                width="1325"
                height="720"
                src="https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px-1325x720.png"
                class="project-image swiper-lazy"
                alt=""
                srcset="
                  https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px-1325x720.png 1325w,
                  https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px-620x337.png   620w,
                  https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px-768x417.png   768w,
                  https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px-1536x835.png 1536w,
                  https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px.png          1840w
                "
                sizes="(max-width: 1325px) 100vw, 1325px"
                data-eio="l"
            /></noscript>
          </div>
        </div>
        <div class="swiper-slide" data-swiper-slide-index="0">
          <div class="swiper-slide-info">
            <div class="swiper-slide-tags">
              <ul class="portfolio_tags">
                <li>
                  <a
                    href="https://eventyr.pro/portfolio-page//?tag_industry%5B%5D=travel-and-hospitality"
                    class="tag"
                    >Travel and Hospitality</a
                  >
                </li>
                <li>
                  <a
                    href="https://eventyr.pro/portfolio-page//?tag_country%5B%5D=uk"
                    class="tag"
                    >UK</a
                  >
                </li>
                <li>
                  <a
                    href="https://eventyr.pro/portfolio-page//?tag_development%5B%5D=mobile-development"
                    class="tag"
                    >Mobile Development</a
                  >
                </li>
                <li>
                  <a
                    href="https://eventyr.pro/portfolio-page//?tag_development%5B%5D=web-development"
                    class="tag"
                    >Web Development</a
                  >
                </li>
              </ul>
            </div>
            <div class="swiper-slide-year"></div>
            <h3 class="swiper-slide-title">
              <a
                href="https://eventyr.pro/portfolio/it-infrastructure-for-global-co-living-hotels/"
              >
                IT Infrastructure for global co-living hotels
              </a>
            </h3>
            <a
              href="https://eventyr.pro/portfolio/it-infrastructure-for-global-co-living-hotels/"
              class="primary-btn button-violet"
            >
              <span>See project</span>
            </a>
          </div>
          <div class="swiper-slide-image">
            <img
              decoding="async"
              width="1325"
              height="720"
              src="https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px-1325x720.png"
              class="project-image swiper-lazy lazyautosizes lazyloaded"
              alt=""
              data-src="https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px-1325x720.png"
              data-srcset="https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px-1325x720.png 1325w, https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px-620x337.png 620w, https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px-768x417.png 768w, https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px-1536x835.png 1536w, https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px.png 1840w"
              data-sizes="auto"
              data-eio-rwidth="1325"
              data-eio-rheight="720"
              sizes="1178px"
              srcset="
                https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px-1325x720.png 1325w,
                https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px-620x337.png   620w,
                https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px-768x417.png   768w,
                https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px-1536x835.png 1536w,
                https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px.png          1840w
              "
            /><noscript
              ><img
                decoding="async"
                width="1325"
                height="720"
                src="https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px-1325x720.png"
                class="project-image swiper-lazy"
                alt=""
                srcset="
                  https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px-1325x720.png 1325w,
                  https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px-620x337.png   620w,
                  https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px-768x417.png   768w,
                  https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px-1536x835.png 1536w,
                  https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px.png          1840w
                "
                sizes="(max-width: 1325px) 100vw, 1325px"
                data-eio="l"
            /></noscript>
          </div>
        </div>
        <div class="swiper-slide" data-swiper-slide-index="0">
          <div class="swiper-slide-info">
            <div class="swiper-slide-tags">
              <ul class="portfolio_tags">
                <li>
                  <a
                    href="https://eventyr.pro/portfolio-page//?tag_industry%5B%5D=travel-and-hospitality"
                    class="tag"
                    >Travel and Hospitality</a
                  >
                </li>
                <li>
                  <a
                    href="https://eventyr.pro/portfolio-page//?tag_country%5B%5D=uk"
                    class="tag"
                    >UK</a
                  >
                </li>
                <li>
                  <a
                    href="https://eventyr.pro/portfolio-page//?tag_development%5B%5D=mobile-development"
                    class="tag"
                    >Mobile Development</a
                  >
                </li>
                <li>
                  <a
                    href="https://eventyr.pro/portfolio-page//?tag_development%5B%5D=web-development"
                    class="tag"
                    >Web Development</a
                  >
                </li>
              </ul>
            </div>
            <div class="swiper-slide-year"></div>
            <h3 class="swiper-slide-title">
              <a
                href="https://eventyr.pro/portfolio/it-infrastructure-for-global-co-living-hotels/"
              >
                IT Infrastructure for global co-living hotels
              </a>
            </h3>
            <a
              href="https://eventyr.pro/portfolio/it-infrastructure-for-global-co-living-hotels/"
              class="primary-btn button-violet"
            >
              <span>See project</span>
            </a>
          </div>
          <div class="swiper-slide-image">
            <img
              decoding="async"
              width="1325"
              height="720"
              src="https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px-1325x720.png"
              class="project-image swiper-lazy lazyautosizes lazyloaded"
              alt=""
              data-src="https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px-1325x720.png"
              data-srcset="https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px-1325x720.png 1325w, https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px-620x337.png 620w, https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px-768x417.png 768w, https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px-1536x835.png 1536w, https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px.png 1840w"
              data-sizes="auto"
              data-eio-rwidth="1325"
              data-eio-rheight="720"
              sizes="1178px"
              srcset="
                https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px-1325x720.png 1325w,
                https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px-620x337.png   620w,
                https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px-768x417.png   768w,
                https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px-1536x835.png 1536w,
                https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px.png          1840w
              "
            /><noscript
              ><img
                decoding="async"
                width="1325"
                height="720"
                src="https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px-1325x720.png"
                class="project-image swiper-lazy"
                alt=""
                srcset="
                  https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px-1325x720.png 1325w,
                  https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px-620x337.png   620w,
                  https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px-768x417.png   768w,
                  https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px-1536x835.png 1536w,
                  https://eventyr.pro/wp-content/uploads/2022/07/vonder-920h500-px.png          1840w
                "
                sizes="(max-width: 1325px) 100vw, 1325px"
                data-eio="l"
            /></noscript>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section" id="services-2">
  <div class="container">
    <div class="service-container">
      <div
        class="d-flex justify-content-center align-items-center flex-column"
        style="max-width: 700px; margin: 0 auto"
      >
        <!-- Heading -->
        <h2 class="section-title mb-2 text-center" id="service-heading">
          From Concept to Reality With <span>SeedInov</span> Scalable Digital
          Transformation
        </h2>
        <!-- Subheading -->
        <p class="mb-5 text-center" id="service-subheading">
          Seed Innov is an AI-powered software company and IT consultancy with a
          global presence, We specialize in delivering end-to-end, custom-built
          solutions, covering Product Design & Development and Artificial
          Intelligence solutions.
        </p>
      </div>
      <!-- / .row -->

      <div class="service-blocks">
        <div class="web-service-block">
          <!-- <i class="ti-light-bulb"></i> -->
          <div class="image-container">
            <img loading="lazy"
              src="../../images/service/chatgpt.svg"
              width="auto"
              height="auto"
              alt="Chat Bots Service"
            />
          </div>
          <h3>Chat Bots</h3>
          <p>
            Engage customers effortlessly with Seedinov's Chat Bot solutions.
            We've designed them to simplify customer interactions, streamline
            support, and enhance overall satisfaction.
          </p>
          <a class="d-flex align-items-center" href="/chatbot-service.html"
            >Learn More&nbsp;
            <img loading="lazy"
              src="../../images/icon/right-arrow.svg"
              width="auto"
              height="auto"
              alt="arrow icon"
          /></a>
        </div>

        <div class="web-service-block">
          <!-- <i class="ti-announcement"></i> -->
          <div class="image-container">
            <img loading="lazy"
              src="../../images/service/gen-ai.svg"
              width="auto"
              height="auto"
              alt="Custom Ai Solutions"
            />
          </div>
          <h3>Custom AI Solutions</h3>
          <p>
            Unlock the potential of your business with Seedinov's Custom AI
            Solutions. Our tailored applications optimize your processes,
            analyze data effectively, and empower intelligent decision-making
            for enhanced business performance.
          </p>
          <a class="d-flex align-items-center" href="/custom-solution.html"
            >Learn More&nbsp;
            <img loading="lazy"
              src="../../images/icon/right-arrow.svg"
              width="auto"
              height="auto"
              alt="arrow icon"
          /></a>
        </div>
        <div class="web-service-block">
          <!-- <i class="ti-settings"></i> -->
          <div class="image-container">
            <img loading="lazy"
              src="../../images/service/cloud-service 1.svg"
              width="auto"
              height="auto"
              alt="Saas Icon"
            />
          </div>
          <h3>SaaS (Software as a Service)</h3>
          <p>
            Take your business to new heights with Seedinov's SaaS applications.
            Our cloud-based solutions offer user-friendly experiences,
            scalability to meet your needs, and a competitive edge in the
            digital landscape.
          </p>
          <a class="d-flex align-items-center" href="/sass-service.html"
            >Learn More&nbsp;
            <img loading="lazy"
              src="../../images/icon/right-arrow.svg"
              alt="arrow Icon"
              width="auto"
              height="auto"
          /></a>
        </div>
        <div class="web-service-block">
          <!-- <i class="ti-layers-alt"></i> -->
          <div class="image-container">
            <img loading="lazy"
              src="../../images/service/ux-design.svg"
              width="auto"
              height="auto"
              alt="UI UX icon"
            />
          </div>
          <h3>Automation Services</h3>
          <p>
            Simplify and boost efficiency with Seedinov's Automation Services.
            Our solutions make tasks faster and better, allowing you to focus on
            core aspects of your business.
          </p>
          <a class="d-flex align-items-center" href="/automation-service.html"
            >Learn More&nbsp;
            <img loading="lazy"
              src="../../images/icon/right-arrow.svg"
              width="auto"
              height="auto"
              alt="arrow icon"
          /></a>
        </div>
        <div class="web-service-block">
          <!-- <i class="ti-desktop"></i> -->
          <div class="image-container">
            <img loading="lazy"
              src="../../images/service/bespoke-ai.svg"
              width="auto"
              height="auto"
              alt="Web Dev Icon"
            />
          </div>
          <h3>Product Design</h3>
          <p>
            Elevate your brand with Seedinov's Product Design expertise. Our
            talented team transforms your vision into visually captivating
            products, ensuring a positive impact on your audience.
          </p>
          <a
            class="d-flex align-items-center"
            href="/product-design-service.html"
            href="#!"
            >Learn More&nbsp;
            <img loading="lazy"
              src="../../images/icon/right-arrow.svg"
              width="auto"
              height="auto"
              alt="arrow icon"
          /></a>
        </div>
        <div class="web-service-block">
          <!-- <i class="ti-mobile"></i> -->
          <div class="image-container">
            <img loading="lazy"
              src="../../images/service/web-dev.svg"
              width="auto"
              height="auto"
              alt="Development Hub Icon"
            />
          </div>
          <h3>Development Hub</h3>
          <p>
            Seedinov's Integrated Development Solutions: Innovate effortlessly
            with our user-centric approach, combining web and app development
            for a comprehensive digital experience. Enhance brand recognition
            through our efficient development process.
          </p>
          <a class="d-flex align-items-center" href="/dev-hub-service.html"
            >Learn More&nbsp;
            <img loading="lazy"
              src="../../images/icon/right-arrow.svg"
              width="auto"
              height="auto"
              alt="arrow icon"
          /></a>
        </div>
        <!-- <div class="web-service-block"> -->
        <!-- <i class="ti-mobile"></i> -->
        <!-- <div class="image-container">
            <img
              src="../../images/service/web-dev.svg"
              width="auto"
              height="auto"
              alt="Development Hub Icon"
            />
          </div>
          <h3>Rapid MVP Development</h3>
          <p>
            Seedinov's Integrated Development Solutions: Innovate effortlessly
            with our user-centric approach, combining web and app development
            for a comprehensive digital experience. Enhance brand recognition
            through our efficient development process.
          </p>
          <a
            class="d-flex align-items-center"
            href="/mvp-service.html"
            >Learn More&nbsp;
            <img
              src="../../images/icon/right-arrow.svg"
              width="auto"
              height="auto"
              alt="arrow icon"
          /></a>
        </div> -->
      </div>
    </div>
  </div>
</section>


<section class="section" id="pricing">
        <!-- Content -->
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-8 col-lg-6 text-center">
                    <div class="section-heading">
                        <!-- Heading -->
                        <h2 class="section-title">
                            Affordable Price Plan
                        </h2>

                        <!-- Subheading -->
                        <p>
                            Rappo can be used to create anything from a small marketing page to a sophisticated website.
                        </p>
                    </div>
                </div>
            </div> <!-- / .row -->

            <div class="row justify-content-center">
                <div class="col-lg-4 col-sm-6 col-md-6">
                    <div class="pricing-box">
                       <h3>Standard</h3>
                        <div class="price-block">
                             <h2><small>$</small>13<span>monthly</span></h2>
                        </div>

                        <ul class="price-features list-unstyled">
                            <li>Unlimited Domain</li>
                            <li>Unmetered Bandwidth</li>
                            <li>Free SSL Certificate </li>
                            <li>20 Email Subscription</li>
                            <li>SSD Hosting</li>
                        </ul>

                        <a href="#!" class="btn btn-outline-dark btn-circled">Purchase Now</a>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6 col-md-6">
                    <div class="pricing-box">
                        <h3>Premium</h3>
                        <div class="price-block">
                             <h2><small>$</small>23<span>monthly</span></h2>
                        </div>

                        <ul class="price-features list-unstyled">
                            <li>Unlimited Domain</li>
                            <li>Unmetered Bandwidth</li>
                            <li>Free SSL Certificate </li>
                            <li>20 Email Subscription</li>
                            <li>SSD Hosting</li>
                        </ul>

                        <a href="#!" class="btn btn-primary btn-circled">Purchase Now</a>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-8 col-md-6">
                    <div class="pricing-box ">
                        <h3>Business</h3>
                        <div class="price-block">
                             <h2><small>$</small>33<span>monthly</span></h2>
                        </div>

                        <ul class="price-features list-unstyled">
                            <li>Unlimited Domain</li>
                            <li>Unmetered Bandwidth</li>
                            <li>Free SSL Certificate </li>
                            <li>20 Email Subscription</li>
                            <li>SSD Hosting</li>
                        </ul>

                        <a href="#!" class="btn btn-outline-dark btn-circled">Purchase Now</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<div class="seed-section">
<section id="work-wrap">
    <div class="container">
        <div class="section-heading mb-5">
            <!-- Subheading -->
            <p class="col-md-11 col-lg-11 alumni-description" style="margin: 0 auto;">
                Showcasing Our Latest <span>Software</span> Creations
            </p>
        </div>
</section>

<section id="work">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-6 p-0 mb-4">
                <a href="podcut-project.html">

                    <div class="work-block m-1">
                        <img loading="lazy" src="images/projects/podcut.png" alt="work-img" width="auto" height="auto" class="img-fluid">
                    </div>
                    <div class="card-content">
                        <h4>Podcut.Ai</h4>
                        <p>Our team's expertise was instrumental in evolving Podcut.ai's user interface into an advanced
                            web application.
                        </p>
                        <a href="podcut-project.html" class="link">Read Case Study&nbsp;&nbsp;<img loading="lazy"
                                src="../../images/icon/right-arrow.svg" alt="" srcset=""></a>
                    </div>
                </a>
            </div>

            <div class="col-lg-4 col-md-6 p-0 mb-4">
                <a href="sfl-project.html">
                    <div class="work-block m-1" style="background: #F0F0F0;">
                        <img loading="lazy" src="images/projects/sfl1.png" alt="work-img" width="auto" height="auto" class="img-fluid">
                    </div>
                    <div class="card-content">
                        <h4>School For Life NGO Portal</h4>
                        <p>A platform for resource management in your organizations and tracking the wellbeing of your workforce</p>
                        <a href="sfl-project.html" class="link">Read Case Study&nbsp;&nbsp;<img loading="lazy"
                                src="../../images/icon/right-arrow.svg" alt="" srcset=""></a>
                    </div>
            </div>
            <div class="col-lg-4 col-md-6 p-0 mb-4">
                <a href="tribify-project.html">
                    <div class="work-block m-1" style="background: #EBEEFB;">
                        <img loading="lazy" src="images/projects/tribify.png" alt="work-img" width="auto" height="auto" class="img-fluid">
                    </div>
                    <div class="card-content">
                        <h4>Tribify - Happiness Hub</h4>
                        <p>a platform for resource management in your organizations and tracking the wellbeing of your workforce</p>
                        <a href="tribify-project.html" class="link">Read Case Study&nbsp;&nbsp;<img loading="lazy"
                                src="../../images/icon/right-arrow.svg" alt="" srcset=""></a>
                    </div>
                </a>
            </div>
            <div class="col-lg-4 col-md-6 p-0 mb-4">
                <a href="projects-project.html">
                    <div class="work-block m-1" style="background: #F3EEC9a0;">
                        <img loading="lazy" src="images/projects/projectS.jpg" alt="work-img" width="auto" height="auto" class="img-fluid">
                    </div>
                    <div class="card-content">
                        <h4>Project-S</h4>
                        <p>Project S is a game and tournament management platform for Call of Duty: MW3  tournaments, integrating AI for fair play and enhanced user experience.</p>
                        <a href="projects-project.html" class="link">Read Case Study&nbsp;&nbsp;<img loading="lazy"
                                src="../../images/icon/right-arrow.svg" alt="" srcset=""></a>
                    </div>
                </a>
            </div>
            <div class="col-lg-4 col-md-6 p-0 mb-4">
                <a href="refussion-project.html">
                    <div class="work-block m-1" style="background: #E5F1EB;">
                        <img loading="lazy" src="images/projects/refussion.jpg" alt="work-img" width="auto" height="auto" class="img-fluid">
                    </div>
                    <div class="card-content">
                        <h4>Refusion AI</h4>
                        <p>An all AI anything AI platform along with a marketplace, where users can browse for AI/ML models and solutions and integrate them to their projects.</p>
                        <a href="refussion-project.html" class="link">Read Case Study&nbsp;&nbsp;<img loading="lazy"
                                src="../../images/icon/right-arrow.svg" alt="" srcset=""></a>
                    </div>
                </a>
            </div>
            <div class="col-lg-4 col-md-6 p-0 mb-4">
                <a href="brainbee-project.html">
                    <div class="work-block m-1" style="background: #F0F0F0;">
                        <img loading="lazy" src="images/projects/brainbee.jpg" alt="work-img" width="auto" height="auto" class="img-fluid">
                    </div>
                    <div class="card-content">
                        <h4>BrainBee</h4>
                        <p>A no code AI builder platform where you can make and deploy AI solutions which cater to your needs</p>
                        <a href="brainbee-project.html" class="link">Read Case Study&nbsp;&nbsp;<img loading="lazy"
                                src="../../images/icon/right-arrow.svg" alt="" srcset=""></a>
                    </div>
                </a>
            </div>
            <div class="col-lg-4 col-md-6 p-0 mb-4">
                <a href="housingxpert-project.html">
                    <div class="work-block m-1" style="background: #EBEEFB;">
                        <img loading="lazy" src="images/projects/housingXpert.jpg" class="object-cover" width="auto" height="auto" class="img-fluid">
                    </div>
                    <div class="card-content">
                        <h4>HousingXpert</h4>
                        <p>HousingXpert is an innovative and comprehensive real estate platform which offers a streamlined and intuitive experience for property buyers.</p>
                        <a href="housingxpert-project.html" class="link">Read Case Study&nbsp;&nbsp;<img loading="lazy"
                                src="../../images/icon/right-arrow.svg" alt="" srcset=""></a>
                    </div>
                </a>
            </div>
            <div class="col-lg-4 col-md-6 p-0 mb-4">
                <a href="esperwise-project.html">
                    <div class="work-block m-1">
                        <img loading="lazy" src="images/projects/esperwise.jpg" alt="work-img" width="auto" height="auto" class="img-fluid">
                    </div>
                    <div class="card-content">
                        <h4>EsperWise</h4>
                        <p>
                            EsperWise AI is a multilingual patient-doctor conversation recorder and analyzer. This tool captures, transcribes, and analyzes medical consultations in real-time, offering valuable insights to enhance patient care.</p>
                        <a href="esperwise-project.html" class="link">Read Case Study&nbsp;&nbsp;<img loading="lazy"
                                src="../../images/icon/right-arrow.svg" alt="" srcset=""></a>
                    </div>
                </a>
            </div>
        </div>
    </div>
</section>
</div>

<section class="section" id="section-testimonial">
  <div class="container">
    <div class="testimonial-container">
      <div
        class="d-flex justify-content-center align-items-center flex-column"
        style="max-width: 600px; margin: 0 auto"
      >
        <!-- Heading -->
        <h2
          class="section-title mb-2 text-white text-center"
          id="service-heading"
        >
          Raving Reviews: Client <span>Testimonials</span>
        </h2>
        <!-- Subheading -->
        <p class="text-white text-center" id="service-subheading">
          We place a strong emphasis on ensuring client satisfaction, and we are
          proud to share testimonials from our valued clients
        </p>
      </div>
      <div class="row align-items-center">
        <div class="col-lg-12 d-flex justify-content-end technology-arrow">
          <div>
            <button class="testimonial-prev slider-prev">
              <img loading="lazy" src="../../images/arrow.png" width="40px" height="20px" />
            </button>
            <button class="testimonial-next slider-next">
              <img loading="lazy" src="../../images/arrow.png" width="40px" height="20px" />
            </button>
          </div>
        </div>
        <div class="col-lg-12 col-sm-12 col-md-12">
          <div class="testimonals-slider">

            <!-- Video Review -->
            <div class="element video-gallery element-1" data-video-src="../../images/testimonials/sam-cropped.mp4" data-author-img="../../images/client/sam.png" data-author-name="Oscar van Maarseveen" data-author-role="Orthopedic resident & Entrepreneur AI Healthcare" data-star-rating="5" data-description="The SeedInov team have been a pleasure to work with. We're partnering to build a complex AI-driven tech product, and every step of the way I've been impressed with their communication, pace, quality, and flexibility. I've had some staff engineers review their code, and they've concluded the same thing -- these guys are killer. Cannot recommend highly enough.">
              
              <div class="test-inner mx-3">
                The SeedInov team have been a pleasure to work with. We're partnering to build a complex AI-driven tech product, and every step of the way I've been impressed with their communication, pace, quality, and flexibility. I've had some staff engineers review their code, and they've concluded the same thing -- these guys are killer. Cannot recommend highly enough.
                <div
                  style="
                    display: inline-flex;
                    align-items: flex-start;
                    gap: 4px;
                    margin-bottom: 10px;
                  "
                >
                  <img loading="lazy"
                    src="../../images/icon/star.svg"
                    width="auto"
                    height="auto"
                    alt="star"
                  />
                  <img loading="lazy"
                    src="../../images/icon/star.svg"
                    width="auto"
                    height="auto"
                    alt="star"
                  />
                  <img loading="lazy"
                    src="../../images/icon/star.svg"
                    width="auto"
                    height="auto"
                    alt="star"
                  />
                  <img loading="lazy"
                    src="../../images/icon/star.svg"
                    width="auto"
                    height="auto"
                    alt="star"
                  />
                  <img loading="lazy"
                    src="../../images/icon/star.svg"
                    width="auto"
                    height="auto"
                    alt="star"
                  />
                </div>
                <div class="test-author-thumb d-flex">
                  <img loading="lazy"
                    src="images/client/sam.png"
                    alt="Testimonial author"
                    class="img-fluid"
                    width="auto"
                    height="auto"
                  />
                  <div class="test-author-info">
                    <h4>Sam Slezek</h4>
                    <h6>Product Owner Of Thespian</h6>
                  </div>
                  <div class="play-button" data-video-src="../../images/testimonials/sam-cropped.mp4" data-author-img="../../images/client/sam.png" data-author-name="Sam Slezek" data-author-role="Product Owner Of Thespian" data-star-rating="5" data-description="The SeedInov team have been a pleasure to work with. We're partnering to build a complex AI-driven tech product, and every step of the way I've been impressed with their communication, pace, quality, and flexibility. I've had some staff engineers review their code, and they've concluded the same thing -- these guys are killer. Cannot recommend highly enough.">&#9658;</div>
                </div>
              </div>
             
            </div>
            
             <!-- Video Review -->
            <div class="element video-gallery element-2" >
              
              <div class="test-inner mx-3">
                I want to share how much I value my partnership with SeedInov. As the CEO of EsperWise, I have seen first-hand the amazing AI applications they create. These tools have become a part of our business and help us innovate and work more efficiently. SeedInov's skill and dedication have played a big role in our success!
                <div
                  style="
                    display: inline-flex;
                    align-items: flex-start;
                    gap: 4px;
                    margin-bottom: 10px;
                  "
                >
                  <img loading="lazy"
                    src="../../images/icon/star.svg"
                    width="auto"
                    height="auto"
                    alt="star"
                  />
                  <img loading="lazy"
                    src="../../images/icon/star.svg"
                    width="auto"
                    height="auto"
                    alt="star"
                  />
                  <img loading="lazy"
                    src="../../images/icon/star.svg"
                    width="auto"
                    height="auto"
                    alt="star"
                  />
                  <img loading="lazy"
                    src="../../images/icon/star.svg"
                    width="auto"
                    height="auto"
                    alt="star"
                  />
                  <img loading="lazy"
                    src="../../images/icon/star.svg"
                    width="auto"
                    height="auto"
                    alt="star"
                  />
                </div>
                <div class="test-author-thumb d-flex">
                  <img loading="lazy"
                    src="images/client/oscar.png"
                    alt="Testimonial author"
                    class="img-fluid"
                    width="auto"
                    height="auto"
                  />
                  <div class="test-author-info">
                    <h4>Oscar van Maarseveen</h4>
                    <h6>Orthopedic resident & Entrepreneur AI Healthcare</h6>
                  </div>
                  <div class="play-button" data-video-src="../../images/testimonials/oscar.mp4" data-author-img="../../images/client/oscar.png" data-author-name="Oscar van Maarseveen" data-author-role="Orthopedic resident & Entrepreneur AI Healthcare" data-star-rating="5" data-description="Great Experience!">&#9658;</div>
                </div>
              </div>
             
            </div>
            <div class="element element-3">
              
              <div class="test-inner mx-3">
                The seedinnov  team are highly communicative professionals, always available to keep you informed about all project updates. They are known for their respectfulness and consistently deliver excellent results on time.
                <div
                  style="
                    display: inline-flex;
                    align-items: flex-start;
                    gap: 4px;
                    margin-bottom: 10px;
                  "
                >
                  <img loading="lazy"
                    src="../../images/icon/star.svg"
                    width="auto"
                    height="auto"
                    alt="star"
                  />
                  <img loading="lazy"
                    src="../../images/icon/star.svg"
                    width="auto"
                    height="auto"
                    alt="star"
                  />
                  <img loading="lazy"
                    src="../../images/icon/star.svg"
                    width="auto"
                    height="auto"
                    alt="star"
                  />
                  <img loading="lazy"
                    src="../../images/icon/star.svg"
                    width="auto"
                    height="auto"
                    alt="star"
                  />
                  <img loading="lazy"
                    src="../../images/icon/star.svg"
                    width="auto"
                    height="auto"
                    alt="star"
                  />
                </div>
                <div class="test-author-thumb d-flex">
                  <img loading="lazy"
                    src="images/client/ayoub.png"
                    alt="Testimonial author"
                    class="img-fluid"
                    width="auto"
                    height="auto"
                  />
                  <div class="test-author-info">
                    <h4>Ayoub Khefifi</h4>
                    <h6>CoFounder, Podcut.ai</h6>
                  </div>
                </div>
              </div>
            </div>
            <div class="element element-4">
              <div class="test-inner mx-3">
               "Our dream team: Where time zones are our greatest enemy."
                <div
                  style="
                    display: inline-flex;
                    align-items: flex-start;
                    gap: 4px;
                    margin-bottom: 10px;
                  "
                >
                  <img loading="lazy"
                    src="../../images/icon/star.svg"
                    width="auto"
                    height="auto"
                    alt="star"
                  />
                  <img loading="lazy"
                    src="../../images/icon/star.svg"
                    width="auto"
                    height="auto"
                    alt="star"
                  />
                  <img loading="lazy"
                    src="../../images/icon/star.svg"
                    width="auto"
                    height="auto"
                    alt="star"
                  />
                  <img loading="lazy"
                    src="../../images/icon/star.svg"
                    width="auto"
                    height="auto"
                    alt="star"
                  />
                  <img loading="lazy"
                    src="../../images/icon/star.svg"
                    width="auto"
                    height="auto"
                    alt="star"
                  />
                </div>
                <div class="test-author-thumb d-flex">
                  <img loading="lazy"
                    src="images/client/emin.png"
                    alt="Testimonial author"
                    class="img-fluid"
                    width="auto"
                    height="auto"
                  />
                  <div class="test-author-info">
                    <h4>Emin Khefifi</h4>
                    <h6>Founder, Lemino 1.0</h6>
                  </div>
                </div>
              </div>
            </div>
           
            <div class="element element-5">
              <div class="test-inner mx-3">
                An excellent start to our project! Highly recommended for their
                great communication skills, on-time delivery, and flexibility.
                <div
                  style="
                    display: inline-flex;
                    align-items: flex-start;
                    gap: 4px;
                    margin-bottom: 10px;
                  "
                >
                  <img loading="lazy"
                    src="../../images/icon/star.svg"
                    width="auto"
                    height="auto"
                    alt="star"
                  />
                  <img loading="lazy"
                    src="../../images/icon/star.svg"
                    width="auto"
                    height="auto"
                    alt="star"
                  />
                  <img loading="lazy"
                    src="../../images/icon/star.svg"
                    width="auto"
                    height="auto"
                    alt="star"
                  />
                  <img
                    src="../../images/icon/star.svg"
                    width="auto"
                    height="auto"
                    alt="star"
                  />
                  <img loading="lazy"
                    src="../../images/icon/star.svg"
                    width="auto"
                    height="auto"
                    alt="star"
                  />
                </div>
                <div class="test-author-thumb d-flex">
                  <img loading="lazy"
                    src="images/client/cameron.jpg"
                    alt="Testimonial author"
                    width="auto"
                    height="auto"
                    class="img-fluid"
                  />
                  <div class="test-author-info">
                    <h4>Cameron D’Arcy</h4>
                    <h6>
                      CEO of Brightworks - TVC and Video Content Production
                    </h6>
                  </div>
                </div>
              </div>
            </div>
            <div class="element element-6">
              <div class="test-inner mx-3">
                I had a fruitful collaboration with seedinov. Eager to continue
                working together for at least 10 years. Highly recommend for
                project starters.
                <div
                  style="
                    display: inline-flex;
                    align-items: flex-start;
                    gap: 4px;
                    margin-bottom: 10px;
                  "
                >
                  <img loading="lazy"
                    src="../../images/icon/star.svg"
                    width="auto"
                    height="auto"
                    alt="star"
                  />
                  <img loading="lazy"
                    src="../../images/icon/star.svg"
                    width="auto"
                    height="auto"
                    alt="star"
                  />
                  <img loading="lazy"
                    src="../../images/icon/star.svg"
                    width="auto"
                    height="auto"
                    alt="star"
                  />
                  <img loading="lazy"
                    src="../../images/icon/star.svg"
                    width="auto"
                    height="auto"
                    alt="star"
                  />
                  <img loading="lazy"
                    src="../../images/icon/star.svg"
                    width="auto"
                    height="auto"
                    alt="star"
                  />
                </div>
                <div class="test-author-thumb d-flex">
                  <img loading="lazy"
                    src="https://fiverr-res.cloudinary.com/image/upload/f_auto,q_auto,t_profile_small/v1/attachments/profile/photo/7d9a4e8f9dfb5a84f5c969de453e1b7a-1590644561119/160db798-63d5-4d81-978b-24babf593dae.jpg"
                    alt="Testimonial author"
                    class="img-fluid"
                    width="auto"
                    height="auto"
                  />
                  <div class="test-author-info">
                    <h4>leonaslt</h4>
                    <h6>Entrepreneur</h6>
                  </div>
                </div>
              </div>
            </div>
            <div class="element element-7">
              <div class="test-inner mx-3">
               "Flexible, well-behaved. Wish them the best."
                <div
                  style="
                    display: inline-flex;
                    align-items: flex-start;
                    gap: 4px;
                    margin-bottom: 10px;
                  "
                >
                  <img loading="lazy"
                    src="../../images/icon/star.svg"
                    width="auto"
                    height="auto"
                    alt="star"
                  />
                  <img loading="lazy"
                    src="../../images/icon/star.svg"
                    width="auto"
                    height="auto"
                    alt="star"
                  />
                  <img loading="lazy"
                    src="../../images/icon/star.svg"
                    width="auto"
                    height="auto"
                    alt="star"
                  />
                  <img loading="lazy"
                    src="../../images/icon/star.svg"
                    width="auto"
                    height="auto"
                    alt="star"
                  />
                  <img loading="lazy"
                    src="../../images/icon/star.svg"
                    width="auto"
                    height="auto"
                    alt="star"
                  />
                </div>
                <div class="test-author-thumb d-flex">
                  <img loading="lazy"
                    src="images/client/tranziner.png"
                    alt="Testimonial author"
                    class="img-fluid"
                    width="auto"
                    height="auto"
                  />
                  <div class="test-author-info">
                    <h4>Tranziner</h4>
                    <h6>Youtube Community</h6>
                  </div>
                </div>
              </div>
            </div>
            
            <div class="element element-8">
              <div class="test-inner mx-3">
                An incredible seller! Exceeded my expectations and delivered
                within time frame. Looking forward to working together again.
                <div
                  style="
                    display: inline-flex;
                    align-items: flex-start;
                    gap: 4px;
                    margin-bottom: 10px;
                  "
                >
                  <img loading="lazy"
                    src="../../images/icon/star.svg"
                    width="auto"
                    height="auto"
                    alt="star"
                  />
                  <img loading="lazy"
                    src="../../images/icon/star.svg"
                    width="auto"
                    height="auto"
                    alt="star"
                  />
                  <img loading="lazy"
                    src="../../images/icon/star.svg"
                    width="auto"
                    height="auto"
                    alt="star"
                  />
                  <img loading="lazy"
                    src="../../images/icon/star.svg"
                    width="auto"
                    height="auto"
                    alt="star"
                  />
                  <img loading="lazy"
                    src="../../images/icon/star.svg"
                    width="auto"
                    height="auto"
                    alt="star"
                  />
                </div>
                <div class="test-author-thumb d-flex">
                  <img loading="lazy"
                    src="images/client/shahbbir.png"
                    alt="Testimonial author"
                    class="img-fluid"
                    width="auto"
                    height="auto"
                  />
                  <div class="test-author-info">
                    <h4>Muhammad Shabbir</h4>
                    <h6>Founder @mrwebgcc</h6>
                  </div>
                </div>
              </div>
            </div>
            
          
            </div>
           
          </div>
        </div>
      </div>
    </div>
  </div>

  <div id="video-modal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      
      <div class="player">
        <video width="100%" height="auto" class="viewer">
          <source src="" type="video/mp4" />
          Your browser does not support the video tag.
        </video>
        <div class="player__controls">
          <button class="player__button toggle" title="Toggle Play">⏵︎</button>
          <div class="progress">
            <div class="progress__filled"></div>
          </div>
        </div>
      </div>
        
    
      <div class=" mx-3">
        <div class="test-author-thumb mt-4 d-flex mb-2">
          <img loading="lazy"
            src=""
            alt="Testimonial author"
            class="img-fluid"
            width="auto"
            height="auto"
          />
          <div class="test-author-info">
            <h4></h4>
            <!-- <h6></h6> -->
            <!-- <div
              class="star-ratings"
              style="
                display: inline-flex;
                align-items: flex-start;
                gap: 0px;
                margin-bottom: 10px;
              "
            ></div> -->
          </div>
        </div>
        <!-- <p class="text-white"></p> -->
      </div>
    </div>
  </div>
</section>

<section class="seed-section" id="blog">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-8 col-lg-6 text-center">
        <div class="section-heading mb-4">
          <!-- Subheading -->
          <p class="col-md-11 col-lg-11 alumni-description">
            Sharing Our Journey, <br />
            Enriching Your <span>Experience</span>
          </p>
        </div>
      </div>
      <!-- / .row -->

      <div class="row justify-content-center">
        <div class="col-lg-4 col-md-6 p-0">
          <div class="blog-box m-2">
            <div class="blog-img-box">
              <img loading="lazy"
                src="images/blog/html-video-thumbnail.jpg"
                alt=""
                class="img-fluid blog-img"
              />
            </div>
            <div class="single-blog">
              <div class="blog-content">
                <h6>7 Feb 2021</h6>
                <a href="#!">
                  <h3 class="card-title">
                    Complete HTML Course Beginners to Advanced
                  </h3>
                </a>
                <p>
                  Learn HTML with a step-by-step process, including projects and
                  sources provided in the lectures. Each topic will begin with a
                  brief introduction to the previous lecture.
                </p>
                <a
                  target="_blank"
                  style="margin-top: auto"
                  href="https://www.youtube.com/watch?v=-p9X4tOQsSs&t=26s&ab_channel=ehtishamdot"
                  class="link d-flex align-items-center"
                  >Read More&nbsp;&nbsp;<img
                    src="../../images/icon/right-arrow.svg"
                    alt="arrow"
                /></a>
              </div>
            </div>
          </div>
        </div>

        <div class="col-lg-4 col-md-6 p-0">
          <div class="blog-box m-2">
            <div class="blog-img-box">
              <img loading="lazy"
                src="images/blog/programming-career.jpg"
                alt=""
                class="img-fluid blog-img"
              />
            </div>
            <div class="single-blog">
              <div class="blog-content">
                <h6>14 Jan 2021</h6>
                <a href="#!">
                  <h3 class="card-title">
                    "The only way to learn programming..." by George Hotz
                  </h3>
                </a>
                <p>
                  "The only way to learn programming is by immersing yourself in
                  hands-on projects," stated George Hotz.
                </p>
                <a
                  target="_blank"
                  style="margin-top: auto"
                  href="https://www.youtube.com/watch?v=kL2Q2ctCJys&ab_channel=ehtishamdot"
                  class="link d-flex align-items-center"
                  >Read More&nbsp;&nbsp;<img
                    src="../../images/icon/right-arrow.svg"
                    alt="arrow"
                /></a>
              </div>
            </div>
          </div>
        </div>

        <div class="col-lg-4 col-md-6 p-0">
          <div class="blog-box m-2">
            <div class="blog-img-box">
              <img loading="lazy"
                src="images/blog/visual-studio-faster.jpg"
                alt=""
                class="img-fluid blog-img"
              />
            </div>
            <div class="single-blog">
              <div class="blog-content">
                <h6>6 DEC 2020</h6>
                <a href="#!">
                  <h3 class="card-title">MAKE VISUAL STUDIO FASTER</h3>
                </a>
                <p>
                  Improve Visual Studio's performance with these optimization
                  tips. For a detailed description, explore the techniques to
                  boost its speed and efficiency.
                </p>
                <a
                  target="_blank"
                  style="margin-top: auto"
                  href="https://www.youtube.com/watch?v=D2_haCjrarE&ab_channel=ehtishamdot"
                  class="link d-flex align-items-center"
                  >Read More&nbsp;&nbsp;<img loading="lazy"
                    src="../../images/icon/right-arrow.svg"
                    alt="arrow"
                /></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<footer class="section" id="footer">
  <div class="overlay footer-overlay"></div>
  <!--Content -->
  <div class="container">
    <div class="row justify-content-start">
      <div class="col-lg-4 col-sm-12">
        <div class="footer-widget">
          <!-- Brand -->
          <a
            href="index.html"
            class="footer-brand text-white"
            aria-label="Visit Seedinov Website"
          >
            <img loading="lazy"
              style="max-width: 200px"
              class="logo"
              src="../../images/icon/logo.png"
              alt="seedinov logo"
            />
          </a>
          <p
            style="
              color: var(--white-color, #fafafa);
              font-size: 14px;
              font-style: normal;
              font-weight: 400;
              line-height: normal;
            "
          >
            SeedInov harnesses cutting-edge technology to craft transformative
            solutions. Through a fusion of creativity and expertise, SeedInov
            paves the way for advancements that shape the future.
          </p>
        </div>
      </div>

      <div class="col-lg-2 col-sm-6">
        <div class="footer-widget">
          <h3
            class="m-0"
            style="
              color: var(--white-color, #fafafa);
              font-size: 16px;
              font-style: normal;
              font-weight: 500;
              line-height: normal;
            "
          >
            Our Socials
          </h3>
          <a
            href="mailto:contact@seedinov.com"
            style="
              color: var(--white-color, #fafafa);
              font-size: 16px;
              font-style: normal;
              font-weight: 400;
              line-height: normal;
            "
            >contact@seedinov.com</a
          >
        </div>
        <div class="d-flex align-items-center social-icons">
          <a
            href="https://www.facebook.com/seedinov"
            target="_blank"
            class="social-icon"
            aria-label="Visit Seedinov on Facebook"
          >
            <img loading="lazy"
              src="../../images/icon/facebook.svg"
              alt="facebook icon"
              width="auto"
              height="auto"
            />
          </a>
          <!-- <a
            href="https://twitter.com/seedinov"
            target="_blank"
            class="social-icon"
            aria-label="Visit Seedinov on Twitter"
          >
            <img
              src="../../images/icon/twitter.png"
              alt="twitter icon"
              width="auto"
              height="auto"
            />
          </a> -->
          <a
            href="https://wa.me/+12282061826"
            target="_blank"
            class="social-icon"
            aria-label="Visit Seedinov on LinkedIn"
          >
            <img loading="lazy"
              src="../../images/icon/whatsapp-green.png"
              alt="linkedin icon"
              style="filter: brightness(0) invert(1)"
              width="auto"
              height="auto"
            />
          </a>
          <a
            href="https://www.linkedin.com/company/seedinov/"
            target="_blank"
            class="social-icon"
            aria-label="Visit Seedinov on LinkedIn"
          >
            <img loading="lazy"
              src="../../images/icon/linkedin.png"
              alt="linkedin icon"
              width="auto"
              height="auto"
            />
          </a>
          <a
            href="https://www.instagram.com/_seedinov/"
            target="_blank"
            class="social-icon"
            aria-label="Visit Seedinov on LinkedIn"
          > 
            <img loading="lazy"
              src="../../images/icon/instagram-green.png"
              style="filter: brightness(0) invert(1)"
              alt="instagram icon"
              width="auto"
              height="auto"
            />
          </a>
        </div>
      </div>
      <div class="col-lg-3 col-sm-6 ml-auto mt-4-mobile">
        <div class="footer-widget">
          <h3
            class="m-0"
            style="
              color: var(--white-color, #fafafa);
              font-size: 16px;
              font-style: normal;
              font-weight: 500;
              line-height: normal;
            "
          >
            Have a Project to Discuss?
          </h3>
          <a
            href="mailto:info@seedinov.com"
            style="
              color: var(--white-color, #fafafa);
              font-size: 16px;
              font-style: normal;
              font-weight: 400;
              line-height: normal;
            "
            >We’re Ready</a
          >
        </div>
        <a href="mailto:contact@seedinov.com">
          <button class="primary-btn mt-3">Contact Us</button>
        </a>
      </div>
    </div>
    <!-- / .row -->

    <div class="row pt-5">
      <div class="col-lg-12">
        <div class="overflow-hidden">
          <!-- Copyright -->
          <p class="footer-copy">
            SeedInov &copy;
            <span id="currentYear"></span>
            <script>
              var CurrentYear = new Date().getFullYear();
              document.getElementById("currentYear").innerHTML = CurrentYear;
            </script>
            . All Rights Reserved
          </p>
        </div>
      </div>
    </div>
    <!-- / .row -->
  </div>
  <!-- / .container -->
</footer>

<!--  Page Scroll to Top  -->

<a
  id="scroll-to-top"
  class="scroll-to-top green top js-scroll-trigger"
  href="#top-header"
  aria-label="Visit Seedinov on LinkedIn"
>
  <i class="fa fa-angle-up"></i>
</a>

<!-- <div class="handle-side-navbar scroll-to-top js-scroll-trigger">
  <a href="https://wa.me/+12282061826">
    <img
      src="../../images/icon/whatsapp-green.png"
      alt="twitter icon"
      width="24px"
      height="24px"
    />
  </a>
  <a href="https://www.linkedin.com/company/seedinov">
    <img
      src="../../images/icon/linkedin-green.png"
      alt="twitter icon"
      width="24px"
      height="24px"
    />
  </a>
  <a href="https://www.facebook.com/seedinov">
    <img
      src="../../images/icon/facebook-green.png"
      alt="twitter icon"
      width="24px"
      height="24px"
    />
  </a>
  <a href="https://www.instagram.com/_seedinov/">
    <img
      src="../../images/icon/instagram-green.png"
      alt="twitter icon"
      width="24px"
      height="24px"
    />
  </a>
  <a href="https://www.linkedin.com/company/seedinov">
    <img
      src="../../images/icon/twitter-x-green.png"
      alt="twitter icon"
      width="24px"
      height="24px"
    />
  </a>
</div> -->


  <!-- 
  Essential Scripts
  =====================================-->
  <!-- jQuery -->
  <!-- <script
  defer
  src="https://cdn.jsdelivr.net/npm/simplex-noise@4.0.3/dist/cjs/simplex-noise.min.js"
></script> -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/simplex-noise@4.0.3/dist/cjs/simplex-noise.min.js" type="module"></script> -->
  <script src="plugins/jquery/jquery.min.js"></script>
  <!-- Bootstrap -->
  <script src="plugins/bootstrap/bootstrap.min.js"></script>
  <!-- Slick Slider -->
  <script src="plugins/slick-carousel/slick/slick.min.js"></script>
  <!-- Google Map -->
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCcABaamniA6OL5YvYSpB3pFMNrXwXnLwU"></script>
  <script src="plugins/google-map/gmap.js"></script>

  <script type="module">
    // Import the functions you need from the SDKs you need
    import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-app.js";
    import { getDatabase, ref, push, set } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-database.js";
    // TODO: Add SDKs for Firebase products that you want to use
    // https://firebase.google.com/docs/web/setup#available-libraries
  
    // Your web app's Firebase configuration
    const firebaseConfig = {
    apiKey: "AIzaSyC0nJZwyOT4Q9A2uT8eFfuRak_0SfQER6g",
    authDomain: "seedinov-portfolio.firebaseapp.com",
    databaseURL: "https://seedinov-portfolio-default-rtdb.firebaseio.com",
    projectId: "seedinov-portfolio",
    storageBucket: "seedinov-portfolio.appspot.com",
    messagingSenderId: "357131043562",
    appId: "1:357131043562:web:a914294845d85ba9f20d93"
  };
    // Initialize Firebase
    var app = initializeApp(firebaseConfig);
    var database = getDatabase(app);

    var chatMessages = document.querySelector(".chat-messages");
    var userInput = document.getElementById("user-input");
    var submitBtn = document.getElementById("chat-submit-btn");
    var userInputWarpper = document.getElementById("input-wrapper");
    var loader = document.getElementById("loader");

if(submitBtn) {
  var step = 1;
  var userEmail = "";
  var userPainPoint = "";

  function getScrollHeight(elm){
    var savedValue = elm.value
    elm.value = ''
    elm._baseScrollHeight = elm.scrollHeight
    elm.value = savedValue
  }

  const handleChatSubmit = (e) => {
    e.preventDefault();
    var userInputValue = userInput.value.trim();
    if (userInputValue === "") return;

    if (step === 1) {
        userEmail = userInputValue;
        appendUserMessage(userEmail);
        userInput.value = "";
        step++;
        showLoader();
        setTimeout(function() {
            hideLoader();
            appendBotMessage("Can you share more details about your problem?");
        }, 2000); // 2-second delay
    } else if (step === 2) {
        userPainPoint = userInputValue;
        appendUserMessage(userPainPoint);
        userInput.value = "";
        userInput.disabled = true;
        submitBtn.disabled = true;
        showLoader();
        setTimeout(function() {
            hideLoader();
            appendBotMessage("Thank you! Our team will get back to you soon.");
            userInputWarpper.style.display = "none";
        }, 2000); // 2-second delay

        // Save data to Firebase
        saveMessage(userEmail, userPainPoint);
    } 
  }
  
  submitBtn.addEventListener("click", handleChatSubmit);

  userInput.addEventListener("keydown", function (e) {
    if (e.key === "Enter") {
        handleChatSubmit(e);
    }
  });

  userInput.addEventListener('input', onExpandableTextareaInput);

  function onExpandableTextareaInput() {
    console.log("Hello");
    userInput.style.height = 'auto';
    userInput.style.height = (userInput.scrollHeight) + 'px';
  }

  function appendUserMessage(message) {
    var userMessage = document.createElement("div");
    userMessage.classList.add("chat-message", "d-flex", "gap-4","flex-row-reverse");
    userMessage.innerHTML = `
        <img src="../../images/avatar.png" width="32px" height="32px" class="img-fluid"/>
        <div class="max-w-300px">
            <p style="color:#30ab89">${message}</p>
        </div>
    `;
    chatMessages.appendChild(userMessage);
  }

  function appendBotMessage(message) {
    var botMessage = document.createElement("div");
    botMessage.classList.add("chat-message", "d-flex", "gap-4");
    botMessage.innerHTML = `
        <img src="../../images/favicon.png" width="32px" height="32px" class="img-fluid"/>
        <div class="max-w-300px">
            <p>${message}</p>
        </div>
    `;
    chatMessages.appendChild(botMessage);
    chatMessages.scrollTop = chatMessages.scrollHeight; // Scroll to the bottom
  }

  function showLoader() {
    loader.style.display = 'flex';
  }

  function hideLoader() {
    loader.style.display = 'none';
  }

  // Save message to Firebase
  function saveMessage(email, painPoint) {
    const messagesRef = ref(database, 'chatForm');
    const newMessageRef = push(messagesRef);
    set(newMessageRef, {
        email: email,
        painPoint: painPoint,
        timestamp: new Date().toISOString()
    }).then(() => {
        console.log("Data saved successfully.");
    }).catch((error) => {
        console.error("Data could not be saved.", error);
    });
  }
}

document.getElementById('contactForm')
  .addEventListener('submit', contactSubmitForm);

  console.log('submitForm')
function contactSubmitForm(e) {
  e.preventDefault();

  // // Get values
  var name = getInputVal('name');
  var phone = getInputVal('phone');
  var email = getInputVal('email');
  var message = getInputVal("message");
  var subject = getInputVal("subject");

  // console.log(name, phone, email, subject, message);
  saveContactMessage(name, phone, email, subject, message);
  
  alert("Thank you for contacting us. We will get back to you shortly.");
  document.getElementById('contactForm').reset();
}

// Function to get form values
function getInputVal(id) {
  return document.getElementById(id).value;
}

// Save message to firebase
function saveContactMessage(name, phone, email, subject, message) {
    const messagesRef = ref(database, '/contact-form');
    var newMessageRef = push(messagesRef);

    try {
        set(newMessageRef, {
            name: name,
            phone: phone,
            email: email,
            subject: subject,
            message: message,
            timestamp: new Date().toISOString()
        }, function(error) {
            if (error) {
                console.error("Data could not be saved.", error);
            } else {
                console.log("Data saved successfully.");
            }
        });
    } catch (err) {
        console.log("Error:", err);
    }
}
 </script>

<script src="js/script.js" defer></script>
<script src="plugins/simplex-noise/simplex-noise.min.js" type="module"></script>
<script type="module">
    const canvas = document.getElementById('backgroundCanvas');
const ctx = canvas.getContext('2d');

let width, height;
canvas.width = width = window.innerWidth;
canvas.height = height = window.innerHeight;

const width_half = width / 2;
const height_half = height / 2;

function hsl(h, s, l, a = 1) {
    return `hsla(${h}, ${s}%, ${l}%, ${a})`;
}

function map(value, start1, stop1, start2, stop2) {
    return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1));
}

function floor(value) {
    return Math.floor(value);
}

function cos(value) {
    return Math.cos(value);
}

function sin(value) {
    return Math.sin(value);
}

function beginPath() {
    ctx.beginPath();
}

function moveTo(x, y) {
    ctx.moveTo(x, y);
}

function lineTo(x, y) {
    ctx.lineTo(x, y);
}

function stroke(color, width) {
    ctx.strokeStyle = color;
    ctx.lineWidth = width;
    ctx.stroke();
}

function compositeOperation(op) {
    ctx.globalCompositeOperation = op;
}
const noise = new SimplexNoise();

function draw(e) {
    let xCount = 35;
    let yCount = 40;
    let iXCount = 1 / (xCount - 1);
    let iYCount = 1 / (yCount - 1);
    let time = e * 0.001;
    let timeStep = 0.005; // Slowed down
    let grad = ctx.createLinearGradient(-width, 0, width, height);
    let t = time % 1;
    let tSide = floor(time % 2) === 0;
    let hueA = tSide ? 120 : 240;  // Adjusted for light and dark green hues
    let hueB = !tSide ? 240 : 240; // Adjusted for light and dark green hues
    let colorA = hsl(hueA, 100, 50,0.1);
    let colorB = hsl(hueB, 120, 50,0.1);
    grad.addColorStop(map(t, 0, 1, 0, 0.33), colorA);
    grad.addColorStop(map(t, 0, 1, 0.33, 0.66), colorB);
    grad.addColorStop(map(t, 0, 1, 0.66, 1), colorA);

    ctx.globalAlpha = map(cos(time), -1, 1, 0.15, 0.3);
    ctx.clearRect(0, 0, width, height); // Clear the canvas instead of using background color
    ctx.globalAlpha = 1;

    let opacityGrad = ctx.createLinearGradient(0, 0, width, 0);
    opacityGrad.addColorStop(0, 'rgba(0, 0, 0, 0)');
    opacityGrad.addColorStop(1, 'rgba(0, 0, 0, 1)');

    beginPath();
    for (let j = 0; j < yCount; j++) {
        let tj = j * iYCount;
        let c = cos(tj * Math.PI * 2 + time) * 0.3;
        for (let i = 0; i < xCount; i++) {
            let t = i * iXCount;
            let n = noise.noise3D(t, time, c);
            let y = height_half + n * height_half;  // Center the y-coordinate
            let x = width_half + t * (width + 20) - width_half - 10; // Center the x-coordinate
            (i ? lineTo : moveTo)(x, y);
        }
        time += timeStep;
    }
    compositeOperation('lighter');

    ctx.strokeStyle = opacityGrad;
    stroke(grad, 5);

    // ctx.filter = 'blur(10px)';
    stroke(grad, 5);
    // ctx.filter = 'blur(5px)';
    ctx.strokeStyle = opacityGrad;
    stroke(hsl(0, 0, 100, 0.8), 2);
}

let animationFrame = 0;
function animate() {
    draw(animationFrame);
    animationFrame++;
    requestAnimationFrame(animate);
}

animate();

window.addEventListener('resize', () => {
    canvas.width = width = window.innerWidth;
    canvas.height = height = window.innerHeight;
});
</script>

</body>
</html>
   