index.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="bg-home">
  <canvas id="backgroundCanvas"></canvas>
  <div id="snow-container"></div>
  <div class="seed-container">
    <div class="row">
      <!-- <div class="col-lg-12"> -->
      <div class="slick-carousel mb-0">
        <div class="carousel-cont">
          <div class="slider-container">
            <div class="slider-typo">
              <div>
                <h1 class="display-4 mb-5 font-weight-bold text-white">
                  ZERO-FAILURE
                  <span style="display: inline-flex">
                    <div class="stack text-primary" style="--stacks: 3">
                      <span style="--index: 0">DELIEVERY</span>
                      <span style="--index: 1">DELIEVERY</span>
                      <span style="--index: 2">DELIEVERY</span>
                    </div>
                  </span>
                  <span style="display: inline-flex">
                    <div class="stack text-primary" style="--stacks: 4">
                      <span style="--index: 0">FOR YOUR NEXT</span>
                      <span style="--index: 1">FOR YOUR NEXT</span>
                      <span style="--index: 2">FOR YOUR NEXT</span>
                      <span style="--index: 3">FOR YOUR NEXT</span>
                    </div> </span
                  ><br />
                  BIG IDEA.
                </h1>
                <h4 class="text-white font-weight-500 mb-4">
                  From infancy to growth, we are your growth partners
                </h4>
              </div>
            </div>
            <!-- <div class="img-cont">
              <img
                loading="lazy"
                src="images/banner-circle.webp"
                alt="banner-img"
                width="50%"
                height="50%"
                class="slider-img"
              />
            </div>  -->
          </div>
        </div>
        <div class="carousel-cont">
          <div class="slider-container">
            <div class="slider-typo">
              <div>
                <h1 class="display-4 mb-4 font-weight-bold text-white">
                  TRANSFORMING
                  <span style="display: inline-flex">
                    <div class="stack text-primary" style="--stacks: 3">
                      <span style="--index: 0">IDEAS</span>
                      <span style="--index: 1">IDEAS</span>
                      <span style="--index: 2">IDEAS</span>
                    </div>
                  </span>
                  INTO DIGITALS
                  <span style="display: inline-flex">
                    <div class="stack text-primary" style="--stacks: 3">
                      <span style="--index: 0">REALITY</span>
                      <span style="--index: 1">REALITY</span>
                      <span style="--index: 2">REALITY</span>
                    </div>
                  </span>
                </h1>
                <h4 class="text-white font-weight-500 mb-4">
                  We specialize in creating innovative custom digital solutions
                  and software products. With our expertise, creativity, and
                  commitment, we transform your ideas into reality.
                </h4>
              </div>
            </div>
            <!-- <div class="img-cont">
              <img
                loading="lazy"
                src="images/banner/seedinov-banner-2.svg"
                alt="banner-img"
                width="auto"
                height="auto"
                class="slider-img"
              />
            </div> -->
          </div>
        </div>
        <div class="carousel-cont">
          <div class="slider-container">
            <div class="slider-typo">
              <div>
                <h1 class="display-4 mb-4 font-weight-bold text-white">
                  <span style="display: inline-flex">
                    <div class="stack text-primary" style="--stacks: 3">
                      <span style="--index: 0">ELEVATE</span>
                      <span style="--index: 1">ELEVATE</span>
                      <span style="--index: 2">ELEVATE</span>
                    </div>
                  </span>
                  YOUR PRESENSE WITH
                  <span style="display: inline-flex">
                    <div class="stack text-primary" style="--stacks: 3">
                      <span style="--index: 0">SEEDINOV</span>
                      <span style="--index: 1">SEEDINOV</span>
                      <span style="--index: 2">SEEDINOV</span>
                    </div>
                  </span>
                </h1>
                <h4 class="text-white font-weight-500 mb-4">
                  We design websites, e-commerce stores, and seamless
                  integrations that boost sales. Once built, our qualified
                  marketing and sales team ensures your product reaches its
                  target audience effectively. Empower your business to excel in
                  the digital era with our expert solutions.
                </h4>
              </div>
            </div>
            <!-- <div class="img-cont">
              <img
                loading="lazy"
                src="images/banner/seedinov-banner-3.svg"
                alt="banner-img"
                width="auto"
                height="auto"
                class="slider-img"
              />
            </div> -->
          </div>
        </div>
        <div class="carousel-cont">
          <div class="slider-container">
            <div class="slider-typo">
              <div>
                <h1 class="display-4 mb-4 font-weight-bold text-white">
                  <span style="display: inline-flex">
                    <div class="stack text-primary" style="--stacks: 3">
                      <span style="--index: 0">MAXIMIZING</span>
                      <span style="--index: 1">MAXIMIZING</span>
                      <span style="--index: 2">MAXIMIZING</span>
                    </div>
                  </span>
                  YOUR GROWTH WITH
                  <span style="display: inline-flex">
                    <div class="stack text-primary" style="--stacks: 3">
                      <span style="--index: 0">ERP</span>
                      <span style="--index: 1">ERP</span>
                      <span style="--index: 2">ERP</span>
                    </div>
                  </span>
                  SOLUTION
                </h1>
                <h4 class="text-white font-weight-500 mb-4">
                  We help optimize operations, enhance your organization's
                  efficiency, and boost profitability through seamless
                  implementation of ERP and cloud solutions. Our qualified
                  marketing and sales team ensures your product reaches its
                  target audience, maximizing your growth potential.
                </h4>
              </div>
            </div>
            <!-- <div class="img-cont">
              <img
                loading="lazy"
                src="images/banner/seedinov-banner-3.svg"
                alt="banner-img"
                width="auto"
                height="auto"
                class="slider-img"
              />
            </div> -->
          </div>
        </div>
      </div>
      <!-- </div> -->
    </div>
  </div>
</section>


<div id="letsTalkModal" class="modal">
  <div class="modal-content">
    <span id="closeModalBtn" class="modal-close">&times;</span>
    <h5>Hello, <span>Eventyr</span> team!</h5>

    <!-- Modal Body -->
    <form id="contactForm">
      <div class="form-group">
        <label for="text-name">My name is</label>
        <input type="text" id="text-name" placeholder="Your name*" required />
      </div>

      <div class="form-group">
        <label for="text-company">from</label>
        <input
          type="text"
          id="text-company"
          placeholder="Website or company name"
        />
      </div>

      <div class="form-group">
        <label for="discuss">I’d like to discuss</label>
        <select id="discuss" required>
          <option value="">Select a topic</option>
          <option value="Game Dev">Game Dev</option>
          <option value="Mobile Dev">Mobile Dev</option>
          <option value="Software Dev">Software Dev</option>
          <option value="Web Dev">Web Dev</option>
          <option value="AR/VR Dev">AR/VR Dev</option>
          <option value="Metaverse Dev">Metaverse Dev</option>
        </select>
      </div>

      <div class="form-group">
        <label for="project-idea">Pitch your project idea*</label>
        <textarea
          id="project-idea"
          rows="3"
          placeholder="Pitch your project idea*"
          required
        ></textarea>
      </div>

      <div class="form-group">
        <label>A budget for this project is</label>
        <div>
          <input
            type="radio"
            name="budget"
            id="budget1"
            value="<$20k"
            checked
          />
          <label for="budget1">&lt;$20k</label>
        </div>
        <div>
          <input type="radio" name="budget" id="budget2" value="$20k - 50k" />
          <label for="budget2">$20k - 50k</label>
        </div>
        <div>
          <input type="radio" name="budget" id="budget3" value="$50k - 100k" />
          <label for="budget3">$50k - 100k</label>
        </div>
        <div>
          <input type="radio" name="budget" id="budget4" value="$100k - 200k" />
          <label for="budget4">$100k - 200k</label>
        </div>
        <div>
          <input type="radio" name="budget" id="budget5" value="$200k+" />
          <label for="budget5">$200k+</label>
        </div>
      </div>

      <div class="form-group">
        <label for="learned-through"
          >I learned about your company through</label
        >
        <input
          type="text"
          id="learned-through"
          placeholder="How did you hear about us?"
          required
        />
      </div>

      <div class="form-group">
        <label for="text-email">Contact me back at</label>
        <input
          type="email"
          id="text-email"
          placeholder="Your email*"
          required
        />
        <input
          type="tel"
          id="your-phone"
          placeholder="Your phone"
          minlength="10"
          maxlength="13"
        />
      </div>

      <div class="form-group">
        <button type="submit" class="modal-submit-btn">Submit</button>
      </div>
    </form>
  </div>
</div>

<section class="collaborators-section">
  <h1 class="collaborators-title">Our Endorsement & Collaboration</h1>

  <div class="scroller">
    <div class="scroller-inner">
      <div class="image">
        <img
          loading="lazy"
          src="/images/companies/school_for_life.svg"
          alt="school for life"
        />
      </div>
      <div class="image">
        <img loading="lazy" src="/images/companies/podcut.svg" alt="podcut" />
      </div>
      <div class="image">
        <img loading="lazy" src="/images/companies/tribify.svg" alt="tribify" />
      </div>
      <div><img loading="lazy" src="/images/companies/bw.svg" alt="bw" /></div>
      <div class="image">
        <img loading="lazy" src="/images/companies/luvvi.svg" alt="luvvi" />
      </div>
      <div class="image">
        <img loading="lazy" src="/images/companies/bird.svg" alt="bird" />
      </div>
      <div class="image">
        <img
        loading="lazy"
        src="/images/companies/school_for_life.svg"
        alt="school for life"
        />
      </div>
      <div class="image">
        <img loading="lazy" src="/images/companies/podcut.svg" alt="podcut" />
      </div>
      <div class="image">
      <img loading="lazy" src="/images/companies/tribify.svg" alt="tribify" />
    </div>
    <div><img loading="lazy" src="/images/companies/bw.svg" alt="bw" /></div>
    <div class="image">
      <img loading="lazy" src="/images/companies/luvvi.svg" alt="luvvi" />
    </div>
    <div class="image">
      <img loading="lazy" src="/images/companies/bird.svg" alt="bird" />
    </div>
  </div>

  
</div>
<div class="divider">
  <img loading="lazy" src="/images/companies/divider.png" alt="divider">
</div>
</section>

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-element-bundle.min.js"></script>

<section class="whats-new-section">
  
  <h1 class="whats-new-title">What's new at <span style="display: inline-flex">
    <div class="stack text-primary" style="--stacks: 4; background: transparent !important;">
      <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
  ></h1>

  <swiper-container autoplay pagination style="
    --swiper-pagination-color: white;
    --swiper-pagination-color-inactive: transparent;
    "
   
   class="whats-new-slider">
   
    <swiper-slide class="slide">
      <div class="slide-content">
        <div class="text-left">
          <h3>EMPOWERING YOUR CAREER, ADVANCING YOUR SUCCESS!</h3>

          <h1><span class="thin">With innovative product of SeedInov </span><br/> <span class="highlight">MindOrbi, </span>Service Delivery Designation</h1>
        </div>
        <div class="right">
          <img src="/images/home/circle-with-dot.png" alt="">

        </div>
        <div class="waves-bottom">
          <img src="/images/home/waves_bottom.png" alt="">
        </div>
        <div class="gradient">
          <img src="/images/home/green-soft-gradient.png" alt="">
        </div>
      </div>
    </swiper-slide>
    <swiper-slide class="slide">
      <div class="slide-content">
        <div class="text-left">
          <h3>EMPOWERING YOUR CAREER, ADVANCING YOUR SUCCESS!</h3>

          <h1><span class="thin">With innovative product of SeedInov </span><br/> <span class="highlight">MindOrbi, </span>Service Delivery Designation</h1>
        </div>
        <div class="right">
          <img src="/images/home/circle-with-dot.png" alt="">

        </div>
        <div class="waves-bottom">
          <img src="/images/home/waves_bottom.png" alt="">
        </div>
        <div class="gradient">
          <img src="/images/home/green-soft-gradient.png" alt="">
        </div>
      </div>
    </swiper-slide>
    <swiper-slide class="slide">
      <div class="slide-content">
        <div class="text-left">
          <h3>EMPOWERING YOUR CAREER, ADVANCING YOUR SUCCESS!</h3>

          <h1><span class="thin">With innovative product of SeedInov </span><br/> <span class="highlight">MindOrbi, </span>Service Delivery Designation</h1>
        </div>
        <div class="right">
          <img src="/images/home/circle-with-dot.png" alt="">

        </div>
        <div class="waves-bottom">
          <img src="/images/home/waves_bottom.png" alt="">
        </div>
        <div class="gradient">
          <img src="/images/home/green-soft-gradient.png" alt="">
        </div>
      </div>
    </swiper-slide>

   
  </swiper-container>


</section>

<section class="services-section">
 
  <div class="services-container">
    <div class="left">
      <h6 class="section-title">Featured Services</h6>
      <ul>
        <li
          class="service-tab"
          id="service-tab-1"
          data-active="true"
          data-target="service-1"
        >
          <span>Chat Bots</span>
          <span>Chat Bots</span>
        </li>
        <li
          class="service-tab"
          id="service-tab-2"
          data-active="false"
          data-target="service-2"
        >
          <span>Custom AI Solutions</span>
          <span>Custom AI Solutions</span>
        </li>
        <li
          class="service-tab"
          id="service-tab-3"
          data-active="false"
          data-target="service-3"
        >
          <span>SaaS (Software as a Service)</span>
          <span>SaaS (Software as a Service)</span>
        </li>
        <li
          class="service-tab"
          id="service-tab-4"
          data-active="false"
          data-target="service-4"
        >
          <span>Automation Services</span>
          <span>Automation Services</span>
        </li>
        <li
          class="service-tab"
          id="service-tab-5"
          data-active="false"
          data-target="service-5"
        >
          <span>Product Design</span>
          <span>Product Design</span>
        </li>
        <li
          class="service-tab"
          id="service-tab-6"
          data-active="false"
          data-target="service-6"
        >
          <span>Development Hub</span>
          <span>Development Hub</span>
        </li>
      </ul>
    </div>

    <div class="right">
      <div id="service-1" class="content-container active">
        <div class="content-image">
          <img loading="lazy" src="/images/service/chat-bot.jpg" alt="" />
        </div>

        <div class="bottom">
          <p>
            Engage and simplify customer interactions and enhance satisfaction
            effortlessly with SeedInov's Chat Bot Solutions.
          </p>
          <div class="call-to-actions">
            <a href="/contact.html"
              ><button class="connect">Connect with us</button></a
            >
            <a href="/chatbot-service.html"
              ><button class="learn-more">Learn more</button></a
            >
          </div>
        </div>
      </div>
      <div id="service-2" class="content-container">
        <div class="content-image">
          <img loading="lazy" src="/images/ai-solutions.jpg" alt="" />
        </div>

        <div class="bottom">
          <p>
            Optimize processes and make intelligent decisions with Seedinov's
            tailored Custom AI Solutions for business performance.
          </p>
          <div class="call-to-actions">
            <a href="/contact.html"
              ><button class="connect">Connect with us</button></a
            >
            <a href="/custom-solution.html"
              ><button class="learn-more">Learn more</button></a
            >
          </div>
        </div>
      </div>
      <div id="service-3" class="content-container">
        <div class="content-image">
          <img loading="lazy" src="/images/saas.jpg" alt="" />
        </div>

        <div class="bottom">
          <p>
            Take your business to new heights and gain a competitive edge by
            scaling your business with Seedinov's SaaS applications.
          </p>
          <div class="call-to-actions">
            <a href="/contact.html"
              ><button class="connect">Connect with us</button></a
            >
            <a href="/saas-service.html"
              ><button class="learn-more">Learn more</button></a
            >
          </div>
        </div>
      </div>
      <div id="service-4" class="content-container">
        <div class="content-image">
          <img loading="lazy" src="/images/automation-procurement.jpg" alt="" />
        </div>

        <div class="bottom">
          <p>
            Enhance efficiency and streamline operations with Seedinov's Automation Services, letting you focus on your core business activities.
          </p>
          <div class="call-to-actions">
            <a href="/contact.html"
              ><button class="connect">Connect with us</button></a
            >
            <a href="/automation-service.html"
              ><button class="learn-more">Learn more</button></a
            >
          </div>
        </div>
      </div>
      <div id="service-5" class="content-container">
        <div class="content-image">
          <img loading="lazy" src="/images/product-design.jpg" alt="" />
        </div>

        <div class="bottom">
          <p>
            Elevate your brand with Seedinov's Product Design expertise.
            Transform your vision into captivating products for a positive
            impact.
          </p>
          <div class="call-to-actions">
            <a href="/contact.html"
              ><button class="connect">Connect with us</button></a
            >
            <a href="/product-design-service.html"
              ><button class="learn-more">Learn more</button></a
            >
          </div>
        </div>
      </div>
      <div id="service-6" class="content-container">
        <div class="content-image">
          <img
            loading="lazy"
            src="/images/software-development.jpg"
            alt="software-development"
          />
        </div>

        <div class="bottom">
          <p>
            Innovate effortlessly with our user-centric approach, combining web
            and app development for a comprehensive digital experience.
          </p>
          <div class="call-to-actions">
            <a href="/contact.html"
              ><button class="connect">Connect with us</button></a
            >
            <a href="/dev-hub-service.html"
              ><button class="learn-more">Learn more</button></a
            >
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-12 accordion-collection">
    <h6 class="section-title">Featured Services</h6>
    <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"
            >
              Chat Bots
            </button>
          </h5>
        </div>
        <div
          id="collapseOne"
          class="collapse show"
          aria-labelledby="headingOne"
          data-parent="#accordion"
        >
          <div class="card-body">
            <div id="service-1" class="content-container active">
              <div class="content-image">
                <img loading="lazy" src="/images/service/chat-bot.png" alt="" />
              </div>
              <div class="bottom">
                <p>
                  Engage and simplify customer interactions and enhance
                  satisfaction effortlessly with SeedInov's Chat Bot Solutions.
                </p>
                <div class="call-to-actions">
                  <a href="/contact.html"
                    ><button class="connect">Connect with us</button></a
                  >
                  <a href="/chatbot-service.html"
                    ><button class="learn-more">Learn more</button></a
                  >
                </div>
              </div>
            </div>
          </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"
            >
              Custom AI Solutions
            </button>
          </h5>
        </div>
        <div
          id="collapseTwo"
          class="collapse"
          aria-labelledby="headingTwo"
          data-parent="#accordion"
        >
          <div class="card-body">
            <div id="service-2" class="content-container">
              <div class="content-image">
                <img loading="lazy" src="/images/ai-solutions.webp" alt="" />
              </div>

              <div class="bottom">
                <p>
                  Optimize processes and make intelligent decisions with
                  Seedinov's tailored Custom AI Solutions for business
                  performance.
                </p>
                <div class="call-to-actions">
                  <a href="/contact.html"
                    ><button class="connect">Connect with us</button></a
                  >
                  <a href="/custom-solution.html"
                    ><button class="learn-more">Learn more</button></a
                  >
                </div>
              </div>
            </div>
          </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"
            >
              SaaS (Software as a Service)
            </button>
          </h5>
        </div>
        <div
          id="collapseThree"
          class="collapse"
          aria-labelledby="headingThree"
          data-parent="#accordion"
        >
          <div class="card-body">
            <div id="service-3" class="content-container">
              <div class="content-image">
                <img loading="lazy" src="/images/saas.webp" alt="" />
              </div>

              <div class="bottom">
                <p>
                  Take your business to new heights and gain a competitive edge
                  by scaling your business with Seedinov's SaaS applications.
                </p>
                <div class="call-to-actions">
                  <a href="/contact.html"
                    ><button class="connect">Connect with us</button></a
                  >
                  <a href="/saas-service.html"
                    ><button class="learn-more">Learn more</button></a
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="card">
        <div class="card-header" id="headingFour">
          <h5 class="mb-0">
            <button
              class="btn btn-link collapsed accordion-btn"
              data-toggle="collapse"
              data-target="#collapseFour"
              aria-expanded="false"
              aria-controls="collapseFour"
            >
              Automation Services
            </button>
          </h5>
        </div>
        <div
          id="collapseFour"
          class="collapse"
          aria-labelledby="headingFour"
          data-parent="#accordion"
        >
          <div class="card-body">
            <div id="service-4" class="content-container">
              <div class="content-image">
                <img
                  loading="lazy"
                  src="/images/automation-procurement.jpg"
                  alt=""
                />
              </div>

              <div class="bottom">
                <p>
                  Simplify and boost efficiency and focus on core business tasks
                  with Seedinov's Automation Services.
                </p>
                <div class="call-to-actions">
                  <a href="/contact.html"
                    ><button class="connect">Connect with us</button></a
                  >
                  <a href="/automation-service.html"
                    ><button class="learn-more">Learn more</button></a
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-header" id="headingFive">
          <h5 class="mb-0">
            <button
              class="btn btn-link collapsed accordion-btn"
              data-toggle="collapse"
              data-target="#collapseFive"
              aria-expanded="false"
              aria-controls="collapseFive"
            >
              Product Design
            </button>
          </h5>
        </div>
        <div
          id="collapseFive"
          class="collapse"
          aria-labelledby="headingFive"
          data-parent="#accordion"
        >
          <div class="card-body">
            <div id="service-5" class="content-container">
              <div class="content-image">
                <img loading="lazy" src="/images/product-design.jpg" alt="" />
              </div>

              <div class="bottom">
                <p>
                  Elevate your brand with Seedinov's Product Design expertise.
                  Transform your vision into captivating products for a positive
                  impact.
                </p>
                <div class="call-to-actions">
                  <a href="/contact.html"
                    ><button class="connect">Connect with us</button></a
                  >
                  <a href="/product-design-service.html"
                    ><button class="learn-more">Learn more</button></a
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-header" id="headingSix">
          <h5 class="mb-0">
            <button
              class="btn btn-link collapsed accordion-btn"
              data-toggle="collapse"
              data-target="#collapseSix"
              aria-expanded="false"
              aria-controls="collapseSix"
            >
              Development Hub
            </button>
          </h5>
        </div>
        <div
          id="collapseSix"
          class="collapse"
          aria-labelledby="headingSix"
          data-parent="#accordion"
        >
          <div class="card-body">
            <div id="service-6" class="content-container">
              <div class="content-image">
                <img
                  loading="lazy"
                  src="/images/software-development.jpg"
                  alt=""
                />
              </div>

              <div class="bottom">
                <p>
                  Innovate effortlessly with our user-centric approach,
                  combining web and app development for a comprehensive digital
                  experience.
                </p>
                <div class="call-to-actions">
                  <a href="/contact.html"
                    ><button class="connect">Connect with us</button></a
                  >
                  <a href="/dev-hub-service.html"
                    ><button class="learn-more">Learn more</button></a
                  >
                </div>
              </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>
<div class="seed-stats seed-section">
  <div class="container">
    <div class="row">
      <div class="col-lg-6 d-flex align-items-center">
        <div>
            <h2 class="default-section-heading text-lg-left text-center" id="service-heading">Upholding Our Commitment </br>to <span>Excellence</span></h2>
            <p class="default-text-para text-lg-left text-center">
                Empowering growth and success for all stakeholders through our unique
                approach to delivering exceptional experiences. Join us as we ascend
                to new heights through the transformative power of digital innovation.
            </p>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="row justify-content-center mt-lg-0 mt-2">
            <div class="col-lg-5 col-md-3 col-sm-6 col-6">
                <div class="stats-count text-center">
                    <h2 class="count">100+</h2>
                    <p>Served Clients Across the Globe</p>
                </div>
            </div>
            <div class="col-lg-5 col-md-3 col-sm-6 col-6">
                <div class="stats-count text-center">
                    <h2 class="count">10+</h2>
                    <p>Team Members and Advisors</p>
                </div>
            </div>
            <div class="col-lg-5 col-md-3 col-sm-6 col-6">
                <div class="stats-count text-center">
                    <h2 class="count">10+</h2>
                    <p>Projects Built and Deployed</p>
                </div>
            </div>
            <div class="col-lg-5 col-md-3 col-sm-6 col-6">
                <div class="stats-count text-center">
                    <h2 class="count">4+</h2>
                    <p>Years of Excellence</p>
                </div>
            </div>
        </div>
      </div>
      <div class="col-lg-2"></div>
    </div>
  </div>
</div>


<section class="section">
  <div class="container">
    <div class="">
      <div
        class="d-flex justify-content-center align-items-center flex-column"
        style="max-width: 700px; margin: 0 auto"
      >
        <!-- Heading -->
        <h2 class="section-title mb-2 text-center" id="service-heading">
         Transforming Industries with <span>AI Development</span> Services
        </h2>
        <!-- Subheading -->
        <p class="mb-5 text-center" id="service-subheading">
          Our solutions and software can be used in a wide variety of industries and professions.
        </p>
      </div>
      <!-- / .row -->

      <div
        class="row pt-5 flex-column-reverse justify-content-center align-items-center flex-md-row"
      >
        <div
          class="col-12 col-sm-12 col-sm-offset-1 text-center text-md-left "
        >
        <div class="service-blocks-4 mb-5">
          <div class="web-service-block align-items-center card-hover-effect">
            <!-- <i class="ti-light-bulb"></i> -->
            <div class="image-container">
              <img loading="lazy"
                src="../../images/experts-in-building/healthcare.png"
                width="auto"
                height="auto"
                alt="Chat Bots Service"
              />
            </div>
            <h3>
              Healthcare</h3>
          </div>
  
          <div class="web-service-block align-items-center card-hover-effect">
            <!-- <i class="ti-announcement"></i> -->
            <div class="image-container">
              <img loading="lazy"
                src="../../images/experts-in-building/football.png"
                width="auto"
                height="auto"
                alt="Optimized Business Processes"
              />
            </div>
            <h3>Sports</h3>
          </div>
          <div class="web-service-block align-items-center card-hover-effect">
            <div class="image-container">
              <img loading="lazy"
              src="../../images/experts-in-building/car.png"
              width="auto"
              height="auto"
              alt="Saas Icon"
              />
            </div>
            <h3>Transportation</h3>
          </div>
          <div class="web-service-block align-items-center card-hover-effect">
            <!-- <i class="ti-settings"></i> -->
            <div class="image-container">
              <img loading="lazy"
              src="../../images/experts-in-building/drone.png"
              width="auto"
              height="auto"
              alt="Saas Icon"
              />
            </div>
            <h3>Agtech</h3>
          </div>
          <div class="web-service-block align-items-center card-hover-effect">
            <!-- <i class="ti-settings"></i> -->
            <div class="image-container">
              <img loading="lazy"
              src="../../images/experts-in-building/conveyor.png"
              width="auto"
              height="auto"
              alt="Saas Icon"
              />
            </div>
            <h3>Manufacturing</h3>
          </div>
          <div class="web-service-block align-items-center card-hover-effect">
            <!-- <i class="ti-settings"></i> -->
            <div class="image-container">
              <img loading="lazy"
              src="../../images/experts-in-building/logistic.png"
              width="auto"
              height="auto"
              alt="Saas Icon"
              />
            </div>
            <h3>Logistics</h3>
          </div>
          <div class="web-service-block align-items-center card-hover-effect">
            <!-- <i class="ti-settings"></i> -->
            <div class="image-container">
              <img loading="lazy"
              src="../../images/experts-in-building/shopping-store.png"
              width="auto"
              height="auto"
              alt="Saas Icon"
              />
            </div>
            <h3>Retail</h3>
          </div>
          <div class="web-service-block align-items-center card-hover-effect">
            <!-- <i class="ti-settings"></i> -->
            <div class="image-container">
              <img loading="lazy"
              src="../../images/experts-in-building/ecommerce.png"
              width="auto"
              height="auto"
              alt="Saas Icon"
              />
            </div>
            <h3>E-commerce</h3>
          </div>
          <div class="web-service-block align-items-center card-hover-effect">
            <!-- <i class="ti-settings"></i> -->
            <div class="image-container-black">
              <img loading="lazy"
              src="../../images/experts-in-building/airplane.png"
              width="auto"
              height="auto"
              alt="airplane Icon"
              />
            </div>
            <h3>Aviation</h3>
          </div>
          <div class="web-service-block align-items-center card-hover-effect">
            <!-- <i class="ti-settings"></i> -->
            <div class="image-container-black">
              <img loading="lazy"
              src="../../images/experts-in-building/restaurant.png"
              width="auto"
              height="auto"
              alt="Restaurant Icon"
              />
            </div>
            <h3>Restaurants</h3>
          </div>
          <div class="web-service-block align-items-center card-hover-effect">
            <!-- <i class="ti-settings"></i> -->
            <div class="image-container">
              <img loading="lazy"
              src="../../images/experts-in-building/health-fitness.png"
              width="auto"
              height="auto"
              alt="Fitness Icon"
              />
            </div>
            <h3>Fitness</h3>
          </div>
          <div class="web-service-block align-items-center card-hover-effect">
            <!-- <i class="ti-settings"></i> -->
            <div class="image-container-black">
              <img loading="lazy"
              src="../../images/experts-in-building/telecommunication.png"
              width="auto"
              height="auto"
              alt="Telecom Icon"
              />
            </div>
            <h3>Telecom</h3>
          </div>
          
          <div class="web-service-block align-items-center justify-content-center card-hover-effect">
            <!-- <i class="ti-settings"></i> -->
            <div class="image-container">
              <img loading="lazy"
                src="../../images/experts-in-building/education.png"
                width="auto"
                height="auto"
                alt="Saas Icon"
              />
            </div>
            <h3>
              Education</h3>
            
          </div>
          <div class="web-service-block align-items-center justify-content-center card-hover-effect">
            <!-- <i class="ti-settings"></i> -->
            <div class="image-container-black">
              <img loading="lazy"
                src="../../images/experts-in-building/solar-energy.png"
                width="auto"
                height="auto"
                alt="Solar Icon"
              />
            </div>
            <h3>
              Solar</h3>
            
            </div>


      </div>

        <div>
          <button
            class="primary-btn border-0 m-auto m-lg-none d-block text-lg"
          >
            Get Free Consultations
          </button>
        </div>
      </div>
    </div>
  </div>
</section> 
<section class="seed-section map">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 d-flex justify-content-center">
        <div>
        <p class="earn-trust mb-5 text-center m-auto text-white">
            Connecting with <span>Clients</span> Across Continents
        </p>
        <div class="map-wrapper d-block m-auto">
          <div class="map-image">
            <img loading="lazy" alt="map" src="../../images/map/map.png" class="img-fluid">
          </div>
          <div class="map-icons usa">
          </div>
          <div class="map-icons france">
          </div>
          <div class="map-icons columbia">
          </div>
          <div class="map-icons saudia">
          </div>
          <div class="map-icons pakistan">
          </div>
          <div class="map-icons sa">
          </div>
          <div class="map-icons japan">
          </div>
          <div class="map-icons aus">
          </div>
        </div>
        </div>
      </div>
    </div>
  </div>
</section>
    

<section class="alumni seed-section" id="process">
    <div class="container " id="alumni-container">
        <div class="row justify-content-center">
            <div class="col-md-10 col-lg-10 text-center m-30">
                <div class="section-heading">

                    <!-- Subheading -->
                    <p class="col-md-11 col-lg-11 alumni-description">
                        Distinguished <span>graduates</span> and <span>mentors</span> with remarkable accomplishments in
                        renowned
                        global corporations, prepared to provide guidance in various industries worldwide.
                    </p>

                </div>
            </div>
        </div> <!-- / .row -->

        <div class="row justify-content-center align-items-center" style="max-width: 740px; margin: 0 auto;">
            <div class="col-lg-4 col-sm-4 align-items-center justify-content-center">

                <img loading="lazy" style="width: 180px;" src="../../images/alumni/Slash.png" alt="" width="auto" height="auto" class="img-fluid">

            </div>
            <div class="col-lg-4 col-sm-4 align-items-center justify-content-center">

                <img loading="lazy" style="width: 210px;" src="../../images/alumni/Invinci.png" alt="" width="auto" height="auto" class="img-fluid">

            </div>
            <div class="col-lg-4 col-sm-4 align-items-center justify-content-center ">

                <img loading="lazy" style="width: 250px;" src="../../images/alumni/Giants Solution.png" alt="" width="auto" height="auto" class="img-fluid">

            </div>
            <div class="col-lg-3 col-sm-4 align-items-center justify-content-center">

                <img loading="lazy" id="JafferLogo" src="../../images/alumni/Jaffer.png" alt="" width="auto" height="auto" class="img-fluid">

            </div>
            <div class="col-lg-3 col-sm-4 align-items-center justify-content-center">

                <img loading="lazy" id="bytecorpimg" src="../../images/alumni/Bytecorp.png" alt="" width="auto" height="auto" class="img-fluid">

            </div>
            <div class="col-lg-3 col-sm-4 align-items-center justify-content-center ">

                <img loading="lazy" id="Foliologo" src="../../images/alumni/Folio.png" alt="" width="auto" height="auto" class="img-fluid">

            </div>
            <div class="col-lg-3 col-sm-6 align-items-center justify-content-center ">

                <img loading="lazy" id="nustlogo" src="../../images/alumni/NUST_PNEC_logo 1.png" alt="" width="auto" height="auto" class="img-fluid">

            </div>
        </div> 

    </div>
</section>

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


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