chatbot-solution copy.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 -->
<!-- NAVBAR
    ================================================= -->
<nav
  id="mainNavbar"
  class="navbar navbar-expand-lg navbar-dark trans-navigation header-white navbar-togglable position-md-sticky"
>
  <div style="background: #30ab89; width: 100%" class="py-2 mb-2">
    <div class="container" style="display: flex; justify-content: end">
      <div
        class="d-flex flex-wrap justify-content-center justify-content-sm-end text-white align-items-center"
        style="gap: 1rem"
      >
        <a
          class="d-flex gap-3 text-white"
          style="gap: 0.5rem"
          href="mailto:contact@seedinov.com"
        >
          <img
            src="../../images/icon/mail-icon.png"
            width="16px"
            class="img-fluid"
            style="object-fit: contain; filter: invert(1)"
          />
          <p class="mb-0">contact@seedinov.com</p>
        </a>
        <a
          class="d-flex gap-3 text-white"
          href="tel:+12282061226"
          style="gap: 0.5rem"
        >
          <img
            src="../../images/icon/phone.png"
            width="16px"
            class="img-fluid"
            style="object-fit: contain; filter: invert(1)"
          />
          <p class="mb-0">+1&nbsp;228&nbsp;206&nbsp;1826</p>
        </a>

        <!-- Socials -->
        <div
          class="d-flex px-4 align-items-center justify-content-center"
          style="gap: 15px"
        >
          <a
            class="d-flex gap-3 text-white"
            href="https://www.instagram.com/_seedinov/"
            style="gap: 0.5rem"
          >
            <img
              src="../../images/icon/instagram-black.png"
              width="16px"
              class="img-fluid"
              style="object-fit: contain; filter: invert(1)"
            />
          </a>
          <a
            class="d-flex gap-3 text-white"
            href="https://www.linkedin.com/company/seedinov"
            style="gap: 0.5rem"
          >
            <img
              loading="lazy"
              src="../../images/icon/linkedin-black.png"
              width="16px"
              class="img-fluid"
              style="object-fit: contain; filter: invert(1)"
            />
          </a>
          <a
            class="d-flex gap-3 text-white"
            href="https://www.facebook.com/seedinov"
            style="gap: 0.5rem"
          >
            <img
              loading="lazy"
              src="../../images/icon/facebook-black.png"
              width="16px"
              class="img-fluid"
              style="object-fit: contain; filter: invert(1)"
            />
          </a>
          <a
            class="d-flex gap-3 text-white"
            href="https://wa.me/+12282061826"
            style="gap: 0.5rem"
          >
            <img
              loading="lazy"
              src="../../images/icon/whatsapp-black2.png"
              width="16px"
              class="img-fluid"
              style="object-fit: contain; filter: invert(1)"
            />
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="seed-container">
    <div class="d-flex justify-content-between align-items-center">
      <div class="brand">
        <a class="d-block" href="/">
          <img
            loading="lazy"
            class="logo"
            style="height: 3rem"
            src="../../images/icon/logo.png"
            alt="seedinov logo"
          />
        </a>
      </div>
      <!-- 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 -->
      <!-- / .navbar-collapse -->
     
      <div
        class="d-none d-lg-flex gap-4 align-items-center justify-content-center"
        style="gap: 1rem"
      >
      <div class="d-none d-lg-block">
        <div class="collapse navbar-collapse has-dropdown" id="navbarCollapse">
          <!-- Links -->
          <ul class="navbar-nav ml-auto d-flex align-items-center">
            <li class="collapse navbar-collapse js-navbar-collapse">
              <ul class="nav navbar-nav">
                <li class="dropdown dropdown-large">
                  <a
                    href="#"
                    class="dropdown-toggle nav-link"
                    data-toggle="dropdown"
                    >AI</a
                  >
                  <ul
                    class="dropdown-menu dropdown-menu-large row p-2"
                    style="list-style: none"
                  >
                    <div class="d-flex row m-0 flex-nowrap">
                      <li class="col-sm-5 left-main-page bg-white flex-grow">
                        <ul>
                          <li class="border-0 border-bottom-1 list-group-item">
                            <a class="border-0" href="/computer-vision.html"
                              >Computer Vision</a
                            >
                          </li>
                          <li class="border-0 border-bottom-1 list-group-item">
                            <a class="border-0" href="/ai-chatbot-company.html"
                              >AI Chatbot</a
                            >
                          </li>
                          <!-- <li><a href="/predictive-analysis.html">Predictive Analytics</a></li> -->
                          <!-- <li><a href="/machine-learning-service.html">Machine Learning</a></li> -->
                          <li class="border-0 border-b-2 list-group-item">
                            <a class="border-0" href="/nlp.html"
                              >Natural Language Processing</a
                            >
                          </li>
                        </ul>
                      </li>
                      <li class="col-sm-9 right-small-nav">
                        <ul>
                          <li class="dropdown-header">Industries</li>
                          <div class="row">
                            <div class="col-4">
                              <li>
                                <a href="/security-solutions.html">Security</a>
                              </li>
                              <li><a href="/ai-fitness.html">Fitness</a></li>
                              <li><a href="/automotive.html">Automotive</a></li>
                            </div>
                            <div class="col-4">
                              <li>
                                <a href="/transportation.html"
                                  >Transportation</a
                                >
                              </li>
                              <li><a href="/travel.html">Travel</a></li>
                              <li><a href="/education.html">Education</a></li>
                            </div>
                          </div>
                          <li class="divider"></li>
                        </ul>
                      </li>
                    </div>
                  </ul>
                </li>
              </ul>
            </li>
            <a href="/sass.html" class="nav-link">SaaS</a>
          </ul>
        </div>
      </div>
        <div
          class="primary-btn d-none d-lg-flex gap-4 align-items-center justify-content-center"
        >
          <a href="contact.html" class="nav-link js-scroll-trigger text-white">
            Contact Us
          </a>
        </div>
        <button id="letTalkModalButton" class="modal-open-btn primary-btn">
          Let's Talk
        </button>
        <a href="/pricing-page.html">
          <button id="letTalkModalButton" class="modal-open-btn primary-btn">
            Pricing
          </button>
        </a>
      </div>
    </div>
    <div class="d-block d-lg-none">
      <div
        class="collapse navbar-collapse has-dropdown py-4"
        id="navbarCollapse"
      >
        <!-- Links -->
        <ul class="navbar-nav ml-auto d-flex align-items-center">
          <li class="navbar-collapse js-navbar-collapse nav-item">
            <ul class="nav navbar-nav">
              <li class="dropdown dropdown-large">
                <a
                  href="#"
                  class="dropdown-toggle nav-link"
                  data-toggle="dropdown"
                  >AI</a
                >

                <ul class="dropdown-menu dropdown-menu-large row p-2">
                  <div class="row m-0">
                    <li class="col-sm-12 left-main-page bg-white flex-grow">
                      <ul>
                        <li class="border-0 border-bottom-1 list-group-item">
                          <a class="border-0" href="/computer-vision.html"
                            >Computer Vision</a
                          >
                        </li>
                        <li class="border-0 border-bottom-1 list-group-item">
                          <a class="border-0" href="/ai-chatbot-company.html"
                            >AI Chatbot</a
                          >
                        </li>
                        <li class="border-0 border-b-2 list-group-item">
                          <a class="border-0" href="/nlp.html"
                            >Natural Language Processing</a
                          >
                        </li>
                      </ul>
                    </li>
                    <li class="col-sm-12 right-small-nav">
                      <ul>
                        <li class="dropdown-header">Industries</li>
                        <div class="row">
                          <div class="col-6 col-md-4">
                            <li>
                              <a href="/security-solutions.html">Security</a>
                            </li>
                            <li><a href="/ai-fitness.html">Fitness</a></li>
                          </div>
                          <div class="col-6 col-md-4">
                            <li><a href="/automotive.html">Automotive</a></li>
                            <li>
                              <a href="/transportation.html">Transportation</a>
                            </li>
                          </div>
                          <div class="col-12 col-md-4">
                            <li><a href="/travel.html">Travel</a></li>
                            <li><a href="education.html">Education</a></li>
                          </div>
                        </div>
                        <li class="divider"></li>
                      </ul>
                    </li>
                  </div>
                </ul>
              </li>
              <li>
                <a href="/sass.html" class="dropdown-toggle nav-link">SaaS</a>
              </li>
            </ul>
          </li>

          <li class="nav-item">
            <a href="project.html" class="nav-link js-scroll-trigger">
              Portfolio
            </a>
          </li>
          <li class="primary-btn">
            <a href="contact.html" class="nav-link js-scroll-trigger">
              Contact Us
            </a>
          </li>
          <li class="primary-btn" style="margin-top: 8px">
            <a href="/pricing-page.html" class="nav-link js-scroll-trigger">
              Pricing
            </a>
          </li>

        </ul>
      </div>
    </div>
  </div>
  <!-- / .container -->
</nav>

<div id="letsTalkModal" class="modal">
  <div class="modal-content">
    <span id="closeModalBtn" class="modal-close">&times;</span>

    <!-- Modal Body -->
    <div class="d-flex align-items-center gap-3">
      <h5 class="team-name">
        HELLO,
        <span style="display: inline-flex">
          <div
            class="stack text-primary"
            style="--stacks: 4; background: transparent"
          >
            <span style="--index: 0">SEEDINOV</span>
            <span style="--index: 1">SEEDINOV</span>
            <span style="--index: 2">SEEDINOV</span>
            <span style="--index: 3">SEEDINOV</span>
          </div>
        </span>
        TEAM!
      </h5>
    </div>

    <!-- Basic Form -->
    <form id="contactFormModal" class="basic-form flex-column">

      <div class="form-wrapper ">
        <div class="group-1 d-flex align-items-center">
          <label for="text-email">Contact me back at</label>
          <div class="input-wrapper">
            <input
              type="email"
              id="text-email"
              name="email"
              placeholder="Your email*"
              required
            />
          </div>
        </div>
      </div>

      <div class="d-flex justify-content-between py-5">
        <button
          type="button"
          id="toggleFormBtn"
          class="secondary-btn btn-circled px-3 toAdvanceFormBtn"
        >
         Advanced
        </button>
        <button type="submit" class="modal-submit-btn primary-btn">
          Submit
        </button>
      </div>
    </form>


    <!-- Lets Talk Modal Detailed -->
    <form id="contactFormModal" class="advanced-form flex-column" style="display: none">
      <div
        class="form-wrapper gap-3 flex-column"
        
      >
        <div class="group-1 d-flex gap-5 align-items-center">
          <label for="text-name">My name is</label>
          <div class="input-wrapper">
            <input
              type="text"
              id="text-name"
              name="name"
              placeholder="Your name*"
              required
            />
          </div>
          <label for="text-company">from</label>
          <div class="input-wrapper">
            <input
              type="text"
              id="text-company"
              name="company"
              placeholder="Website or company name"
            />
          </div>
        </div>

        <div class="group-1 d-flex align-items-center">
          <label for="discuss">I’d like to discuss</label>
          <div class="select-menu">
            <div class="select-btn">
              <span class="sBtn-text">Select your option</span>
              <i class="bx bx-chevron-down"></i>
            </div>

            <ul class="options">
              <li class="option">
                <i class="bx bxl-instagram-alt" style="color: #e1306c"></i>
                <span class="option-text">Chat bot</span>
              </li>
              <li class="option">
                <i class="bx bxl-linkedin-square" style="color: #0e76a8"></i>
                <span class="option-text">Custom AI</span>
              </li>
              <li class="option">
                <i class="bx bxl-facebook-circle" style="color: #4267b2"></i>
                <span class="option-text">Saas</span>
              </li>
              <li class="option">
                <i class="bx bxl-twitter" style="color: #1da1f2"></i>
                <span class="option-text">Automation</span>
              </li>
              <li class="option">
                <i class="bx bxl-twitter" style="color: #1da1f2"></i>
                <span class="option-text">Product Design</span>
              </li>
              <li class="option">
                <i class="bx bxl-twitter" style="color: #1da1f2"></i>
                <span class="option-text">Development Hub</span>
              </li>
            </ul>
          </div>

          <label for="project-idea">project idea & design brief.</label>
        </div>

        <div class="form-group" style="width: 100%">
          <textarea
            id="project-idea"
            rows="1"
            name="projectIdea"
            placeholder="Pitch your project idea*"
            required
          ></textarea>
        </div>

        <div class="group-1 d-flex align-items-center">
          <label>A budget for this project is</label>
          <div class="radio-buttons">
            <label class="custom-radio">
              <input type="radio" name="radio" checked />
              <span class="radio-btn">
                <div class="hobbies-icon">
                  <h3 class=""><$20k</h3>
                </div>
              </span>
            </label>
            <label class="custom-radio">
              <input type="radio" name="radio" />
              <span class="radio-btn">
                <div class="hobbies-icon">
                  <h3 class="">$20k - 50k</h3>
                </div>
              </span>
            </label>
            <label class="custom-radio">
              <input type="radio" name="radio" />
              <span class="radio-btn">
                <div class="hobbies-icon">
                  <h3 class="">$50k - 100k</h3>
                </div>
              </span>
            </label>
            <label class="custom-radio">
              <input type="radio" name="radio" />
              <span class="radio-btn">
                <div class="hobbies-icon">
                  <h3 class="">$50k - 200k</h3>
                </div>
              </span>
            </label>
            <label class="custom-radio">
              <input type="radio" name="radio" />
              <span class="radio-btn">
                <div class="hobbies-icon">
                  <h3 class="">$200k></h3>
                </div>
              </span>
            </label>
          </div>
        </div>

        <div class="group-1 d-flex align-items-center">
          <label for="learned-through"
            >I learned about your company through</label
          >
          <div class="input-wrapper">
            <input
              type="text"
              id="learned-through"
              name="referral"
              placeholder="How did you hear about us?"
              required
            />
          </div>
        </div>

        <div class="group-1 d-flex align-items-center">
          <label for="text-email">Contact me back at</label>
          <div class="input-wrapper">
            <input
              type="email"
              id="text-email"
              name="email"
              placeholder="Your email*"
              required
            />
          </div>
          <div class="input-wrapper">
            <input
              type="tel"
              id="your-phone"
              name="phone"
              placeholder="Your phone"
              minlength="10"
              maxlength="13"
            />
          </div>
        </div>
        <div class="d-flex justify-content-between py-3">
          <button
            type="button"
            id="toggleFormBtn"
            class="secondary-btn btn-circled toBasicFormBtn px-3"
          >
            Basic
          </button>
          <button type="submit" class="modal-submit-btn primary-btn">
            Submit
          </button>
        </div>
      </div>
    </form>
  </div>
</div>

<script>
  window.addEventListener("scroll", function () {
    var navbar = document.getElementById("mainNavbar");
    if (window.scrollY > 50) {
      
      navbar.classList.add("fixed-top");
    } else {
      navbar.classList.remove("fixed-top");
    }
  });
</script>

<script defer>
  const optionMenu = document.querySelector(".select-menu"),
    selectBtn = optionMenu.querySelector(".select-btn"),
    options = optionMenu.querySelectorAll(".option"),
    sBtn_text = optionMenu.querySelector(".sBtn-text");

  selectBtn.addEventListener("click", () =>
    optionMenu.classList.toggle("active"),
  );

  options.forEach((option) => {
    option.addEventListener("click", () => {
      let selectedOption = option.querySelector(".option-text").innerText;
      sBtn_text.innerText = selectedOption;

      optionMenu.classList.remove("active");
    });
  });

  document.addEventListener("DOMContentLoaded", function () {
    console.log("DOM fully loaded and parsed");
    var letsTalkModal = document.getElementById("letsTalkModal");

    
    var letsTalkBtn = document.getElementById("letTalkModalButton");
    console.log("Lets talk", letsTalkBtn, letsTalkModal);

   
    var span = document.getElementById("closeModalBtn");

    
    letsTalkBtn.onclick = function () {
      letsTalkModal.style.display = "flex";
    };

    
    span.onclick = function () {
      letsTalkModal.style.display = "none";
    };

   
    window.onclick = function (event) {
      if (event.target == letsTalkModal) {
        letsTalkModal.style.display = "flex";
      }
    };
    const toAdvanceFormBtn = document.querySelector(".toAdvanceFormBtn");
    const toBasicFormBtn = document.querySelector(".toBasicFormBtn");
    const basicForm = document.querySelector(".basic-form");
    const advancedForm = document.querySelector(".advanced-form");

    toAdvanceFormBtn.addEventListener("click", function () {
     
        basicForm.style.display = "none";
        advancedForm.style.display = "flex";
       
    });
    toBasicFormBtn.addEventListener("click", function () {
     
      advancedForm.style.display = "none";
        basicForm.style.display = "flex";
       
    });
  });
</script>

<script type="module">
  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";
  document.addEventListener("DOMContentLoaded", function () {
    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",
    };

    var app = initializeApp(firebaseConfig);
    var database = getDatabase(app);

    // BASIC FORM DATA
    const basicContactForm = document.querySelector(".basic-form");
    
    basicContactForm.addEventListener("submit", function (event) {
      event.preventDefault(); 
      
      
      const email = document.getElementById("text-email").value;
      
      
      saveMessage(email, {email});
    });
    
    
    // ADVANCE FORM DATA
    const advanceContactForm = document.querySelector(".advanced-form");
    advanceContactForm.addEventListener("submit", function (event) {
      event.preventDefault(); 

     
      const name = document.getElementById("text-name").value;
      const company = document.getElementById("text-company").value;
      const discuss = document.querySelector(".sBtn-text").innerText;
      const projectIdea = document.getElementById("project-idea").value;
      const budget = document.querySelector('input[name="radio"]:checked')
        .nextElementSibling.innerText;
      const referral = document.getElementById("learned-through").value;
      const email = document.getElementById("text-email").value;
      const phone = document.getElementById("your-phone").value;

     
      saveMessage(email, {
        name: name,
        company: company,
        discuss: discuss,
        projectIdea: projectIdea,
        budget: budget,
        referral: referral,
        phone: phone,
      });
    });

    // Save message function
    function saveMessage(email, formData) {
      const messagesRef = ref(database, "contactFormModal");
      const newMessageRef = push(messagesRef);
      var letsTalkModal = document.getElementById("letsTalkModal");

      console.log({
        email: email,
        formData: formData,
        timestamp: new Date().toISOString(),
      });

      set(newMessageRef, {
        email: email,
        formData: formData,
        timestamp: new Date().toISOString(),
      })
        .then(() => {
          console.log("Data saved successfully.");
          contactForm.reset();
          letsTalkModal.style.display = "none";
          alert("Form submitted successfully.");
        })
        .catch((error) => {
          console.error("Data could not be saved.", error);
        });
    }
  });
</script>

<section
  class="service-banner"
  style="
    background: url('/images/services-page/customChatbot-services/banner-Image.svg');
    background-position: right;
    background-repeat: no-repeat;
  "
>
  <div class="container-fluid">
    <div class="row align-items-center justify-content-center">
      <div class="col-lg-12">
        <div class="path d-flex gap-3">
          <div class="text-white">
            <p>Home</p>
          </div>
          <div>
            <p>
              <img loading="lazy"
                width="50px"
                src="/images/services-page/ai-services/banner-arrow.svg"
              />
            </p>
          </div>
          <div class="text-white">
            <p>Services</p>
          </div>
        </div>
      </div>
      <div class="col-lg-12">
        <div
          class="service-banner-content d-flex justify-content-between align-items-center"
        >
          <div class="left-container">
            <h1 class="text-center text-lg-left">
              Chatbot <span>Solutions</span>
            </h1>
            <p class="text-white d-block d-lg-none text-center">
              Seedinov's Custom Chat Solution transforms interactions, ensuring intelligent and tailored experiences for enhanced user engagement and satisfaction across diverse platforms.
            </p>
            <p class="text-white tag-line d-none d-lg-block">Seedinov's Custom Chat Solution transforms interactions, ensuring intelligent and tailored experiences for enhanced user engagement and satisfaction across diverse platforms.</p>
            <link
              href="https://assets.calendly.com/assets/external/widget.css"
              rel="stylesheet"
            />
            <script
              src="https://assets.calendly.com/assets/external/widget.js"
              type="text/javascript"
              async
            ></script>
                            <button
              onclick="Calendly.initPopupWidget({url: 'https://calendly.com/ehtisham-wruh/30min'});return false;"
              class="primary-btn border-0 m-auto m-lg-none d-block d-lg-inline">Schedule a Free
                                Call</button>
          </div>
          <div class="right-container d-none d-lg-block">
           
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


<section class="seed-section what-we-offer">
  <div class="container">
    <div class="row justify-content-between align-items-center">
      <div class="col-lg-6 col-xl-6">
        <div class="left-container">
          <h2 class="mb-3" id="service-heading">What we <span>Offer</span></h2>
          <p class="default-text-black">At Seedinov, we enhance digital interactions with tailored chatbot experiences across diverse channels, providing innovative solutions to elevate your engagement.</p>
        </div>
      </div>
      <div class="col-lg-6 col-xl-6">
        <div id="accordion">
          <div class="card">
            <div class="card-header" id="headingOne">
              <h5 class="mb-0">
                <button
                  class="btn btn-link collapsed accordion-btn"
                  data-toggle="collapse"
                  data-target="#collapseOne"
                  aria-expanded="true"
                  aria-controls="collapseOne"
                >
                  Tailored Applications
                </button>
              </h5>
            </div>
            <div
              id="collapseOne"
              class="collapse"
              aria-labelledby="headingOne"
              data-parent="#accordion"
            >
              <div class="card-body">
                <p class="default-text-black mb-0">
                  We Specialized in crafting custom AI applications that fit
                  your business requirements. ensuring efficency in every
                  solution.
                </p>
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-header" id="headingTwo">
              <h5 class="mb-0">
                <button
                  class="btn btn-link collapsed accordion-btn"
                  data-toggle="collapse"
                  data-target="#collapseTwo"
                  aria-expanded="false"
                  aria-controls="collapseTwo"
                >
                  Process Optimization
                </button>
              </h5>
            </div>
            <div
              id="collapseTwo"
              class="collapse"
              aria-labelledby="headingTwo"
              data-parent="#accordion"
            >
              <div class="card-body">
                <p class="default-text-black mb-0">
                  Boost Efficency with AI: Streamline your workflows efforlessly
                  through our cutting-edge, AI-driven solutions.
                </p>
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-header" id="headingThree">
              <h5 class="mb-0">
                <button
                  class="btn btn-link collapsed accordion-btn"
                  data-toggle="collapse"
                  data-target="#collapseThree"
                  aria-expanded="false"
                  aria-controls="collapseThree"
                >
                  Effective Data Analysis
                </button>
              </h5>
            </div>
            <div
              id="collapseThree"
              class="collapse"
              aria-labelledby="headingThree"
              data-parent="#accordion"
            >
              <div class="card-body">
                <p class="default-text-black mb-0">
                  Unlock valuable insights using our sophisticated analytics
                  tools, empowering you with full potential of your data.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

    
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<section class="seed-section process-steps">
  <div class="scroll-content">
    <div class="container mb-5">
      <div class="row">
        <div class="col-12">
          <p class="alumni-description text-center m-auto mx-100">
            Our <span>Process</span>
          </p>
        </div>
      </div>
    </div>
    <div class="section--vertical desktop" id="second">
      <div class="block-list" style="padding: 0 50px">
        <div class="block-list__item">
          <div class="block-list__item-inner">
            <div class="card-content">
              <img
                src="../../images/services-page/ai-services/evaluation1.svg"
                width="60px"
                height="60px"
                class="mb-3"
              />
              <h4 class="mb-2">Need Assessment</h4>
              <p>
                We kick off by understanding your unique business requirements
                and goals.
              </p>
            </div>
          </div>
        </div>
        <div class="block-list__item">
          <div class="block-list__item-inner">
            <div class="card-content">
              <img
                src="../../images/services-page/ai-services/web-development1.svg"
                width="60px"
                height="60px"
                class="mb-3"
              />
              <h4 class="mb-2">Custom Application Development</h4>
              <p>
                We kick off by understanding your unique business requirements
                and goals.
              </p>
            </div>
          </div>
        </div>
        <div class="block-list__item">
          <div class="block-list__item-inner">
            <div class="card-content">
              <img
                src="../../images/services-page/ai-services/analysis1.svg"
                width="60px"
                height="60px"
                class="mb-3"
              />
              <h4 class="mb-2">Data Analysis Mastery</h4>
              <p>
                We kick off by understanding your unique business requirements
                and goals.
              </p>
            </div>
          </div>
        </div>
        <div class="block-list__item">
          <div class="block-list__item-inner">
            <div class="card-content">
              <img
                src="../../images/services-page/ai-services/gear1.svg"
                width="60px"
                height="60px"
                class="mb-3"
              />
              <h4 class="mb-2">Need Assessment</h4>
              <p>
                We kick off by understanding your unique business requirements
                and goals.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mobile">
      <div class="container">
        <div class="row">
          <div class="col-sm-6 col-12">
            <div class="block-list__item-inner">
              <div class="card-content">
                <img
                  src="../../images/services-page/ai-services/evaluation1.svg"
                  width="60px"
                  height="60px"
                  class="mb-3"
                />
                <h4 class="mb-2">Need Assessment</h4>
                <p>
                  We kick off by understanding your unique business requirements
                  and goals.
                </p>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-12">
            <div class="block-list__item-inner">
              <div class="card-content">
                <img
                  src="../../images/services-page/ai-services/evaluation1.svg"
                  width="60px"
                  height="60px"
                  class="mb-3"
                />
                <h4 class="mb-2">Need Assessment</h4>
                <p>
                  We kick off by understanding your unique business requirements
                  and goals.
                </p>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-12">
            <div class="block-list__item-inner">
              <div class="card-content">
                <img
                  src="../../images/services-page/ai-services/evaluation1.svg"
                  width="60px"
                  height="60px"
                  class="mb-3"
                />
                <h4 class="mb-2">Need Assessment</h4>
                <p>
                  We kick off by understanding your unique business requirements
                  and goals.
                </p>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-12">
            <div class="block-list__item-inner">
              <div class="card-content">
                <img
                  src="../../images/services-page/ai-services/evaluation1.svg"
                  width="60px"
                  height="60px"
                  class="mb-3"
                />
                <h4 class="mb-2">Need Assessment</h4>
                <p>
                  We kick off by understanding your unique business requirements
                  and goals.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<script src="https://unpkg.com/scrollmagic@2.0.7/scrollmagic/uncompressed/ScrollMagic.js"></script>
<script src="https://unpkg.com/scrollmagic@2.0.7/scrollmagic/uncompressed/plugins/animation.gsap.js"></script>
<script src="https://unpkg.com/scrollmagic@2.0.7/scrollmagic/uncompressed/plugins/debug.addIndicators.js"></script>
<script src="https://unpkg.com/gsap@3.10.1/dist/gsap.js"></script>
<script>
  window.addEventListener("load", function () {
    var blockList = document.querySelector(".block-list");
    var blockItems = document.querySelectorAll(".block-list__item");
    var blockItemWidth = blockItems[0].offsetWidth;
    var totalWidth = blockItemWidth * blockItems.length;
    var travelDistance = totalWidth - 200;

    var controller = new ScrollMagic.Controller();

    var horizontalScroll = gsap.to(blockList, {
      x: -travelDistance,
      ease: "none",
    });

    var scene = new ScrollMagic.Scene({
      triggerElement: "#second",
      duration: totalWidth, // Adjust duration based on your requirement
      triggerHook: 0.3,
    })
      .setPin(".block-list")
      .setTween(horizontalScroll)
      .addTo(controller);
  });
</script>


<!-- <section class="seed-section technology-stack">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 d-flex justify-content-center">
        <div>
          <p class="alumni-description text-center m-auto mx-100">
            We Engage with an Extensive Spectrum of <span>Technologies</span>
          </p>
        </div>
      </div>
      <div class="col-lg-12 d-flex justify-content-end technology-arrow">
        <div>
            <button class="technology-prev slider-prev">
              <img src="../../images/arrow.png" width="40px" height="20px" />
            </button>
            <button class="technology-next slider-next">
              <img src="../../images/arrow.png" width="40px" height="20px"/>
            </button>
        </div>
      </div>
      <div class="col-lg-12">
        <div class="technology-slider">
          <div class="element element-1">
            <div class="technology-slide">
              <div
                class="technology-box d-flex flex-column justify-content-center align-items-center gap-3"
              >
                <img
                  src="../../images/technology/js.png"
                  alt="js"
                  width="60px"
                  height="60px"
                />
                <p class="alumni-description">JavaScript</p>
              </div>
            </div>
          </div>
          <div class="element element-2">
            <div class="technology-slide">
              <div
                class="technology-box d-flex flex-column justify-content-center align-items-center gap-3"
              >
                <img
                  src="../../images/technology/ts.png"
                  alt="js"
                  width="60px"
                  height="60px"/>
               <p class="alumni-description">TypeScript</p>
              </div>
            </div>
          </div>
          <div class="element element-3">
            <div class="technology-slide">
              <div
                class="technology-box d-flex flex-column justify-content-center align-items-center gap-3"
              >
                <img
                  src="../../images/technology/py.png"
                  alt="js"
                  width="60px"
                  height="60px"
                />
                <p class="alumni-description">Python</p>
              </div>
            </div>
          </div>
          <div class="element element-4">
            <div class="technology-slide">
              <div
                class="technology-box d-flex flex-column justify-content-center align-items-center gap-3"
              >
                <img
                  src="../../images/technology/tf.png"
                  alt="js"
                  width="60px"
                  height="60px"
                />
                <p class="alumni-description">TensorFLow</p>
              </div>
            </div>
          </div>
          <div class="element element-5">
            <div class="technology-slide">
              <div
                class="technology-box d-flex flex-column justify-content-center align-items-center gap-3"
              >
                <img
                  src="../../images/technology/figma.png"
                  alt="js"
                  width="60px"
                  height="60px"
                />
                <p class="alumni-description">Figma</p>
              </div>
            </div>
          </div>
        </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>