security-solutions.html

<!DOCTYPE html>

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

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

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

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

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

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

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

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

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

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

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

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

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

        <!-- Socials -->
        <div
          class="d-flex px-4 align-items-center justify-content-center"
          style="gap: 15px"
        >
          <a
            class="d-flex gap-3 text-white"
            href="https://www.instagram.com/_seedinov/"
            style="gap: 0.5rem"
          >
            <img
              src="../../images/icon/instagram-black.png"
              width="16px"
              class="img-fluid"
              style="object-fit: contain; filter: invert(1)"
            />
          </a>
          <a
            class="d-flex gap-3 text-white"
            href="https://www.linkedin.com/company/seedinov"
            style="gap: 0.5rem"
          >
            <img
              loading="lazy"
              src="../../images/icon/linkedin-black.png"
              width="16px"
              class="img-fluid"
              style="object-fit: contain; filter: invert(1)"
            />
          </a>
          <a
            class="d-flex gap-3 text-white"
            href="https://www.facebook.com/seedinov"
            style="gap: 0.5rem"
          >
            <img
              loading="lazy"
              src="../../images/icon/facebook-black.png"
              width="16px"
              class="img-fluid"
              style="object-fit: contain; filter: invert(1)"
            />
          </a>
          <a
            class="d-flex gap-3 text-white"
            href="https://wa.me/+12282061826"
            style="gap: 0.5rem"
          >
            <img
              loading="lazy"
              src="../../images/icon/whatsapp-black2.png"
              width="16px"
              class="img-fluid"
              style="object-fit: contain; filter: invert(1)"
            />
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="seed-container">
    <div class="d-flex justify-content-between align-items-center">
      <div class="brand">
        <a class="d-block" href="/">
          <img
            loading="lazy"
            class="logo"
            style="height: 3rem"
            src="../../images/icon/logo.png"
            alt="seedinov logo"
          />
        </a>
      </div>
      <!-- Toggler -->
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarCollapse"
        aria-controls="navbarCollapse"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="fa fa-bars"></span>
      </button>

      <!-- Collapse -->
      <!-- / .navbar-collapse -->
     
      <div
        class="d-none d-lg-flex gap-4 align-items-center justify-content-center"
        style="gap: 1rem"
      >
      <div class="d-none d-lg-block">
        <div class="collapse navbar-collapse has-dropdown" id="navbarCollapse">
          <!-- Links -->
          <ul class="navbar-nav ml-auto d-flex align-items-center">
            <li class="collapse navbar-collapse js-navbar-collapse">
              <ul class="nav navbar-nav">
                <li class="dropdown dropdown-large">
                  <a
                    href="#"
                    class="dropdown-toggle nav-link"
                    data-toggle="dropdown"
                    >AI</a
                  >
                  <ul
                    class="dropdown-menu dropdown-menu-large row p-2"
                    style="list-style: none"
                  >
                    <div class="d-flex row m-0 flex-nowrap">
                      <li class="col-sm-5 left-main-page bg-white flex-grow">
                        <ul>
                          <li class="border-0 border-bottom-1 list-group-item">
                            <a class="border-0" href="/computer-vision.html"
                              >Computer Vision</a
                            >
                          </li>
                          <li class="border-0 border-bottom-1 list-group-item">
                            <a class="border-0" href="/ai-chatbot-company.html"
                              >AI Chatbot</a
                            >
                          </li>
                          <!-- <li><a href="/predictive-analysis.html">Predictive Analytics</a></li> -->
                          <!-- <li><a href="/machine-learning-service.html">Machine Learning</a></li> -->
                          <li class="border-0 border-b-2 list-group-item">
                            <a class="border-0" href="/nlp.html"
                              >Natural Language Processing</a
                            >
                          </li>
                        </ul>
                      </li>
                      <li class="col-sm-9 right-small-nav">
                        <ul>
                          <li class="dropdown-header">Industries</li>
                          <div class="row">
                            <div class="col-4">
                              <li>
                                <a href="/security-solutions.html">Security</a>
                              </li>
                              <li><a href="/ai-fitness.html">Fitness</a></li>
                              <li><a href="/automotive.html">Automotive</a></li>
                            </div>
                            <div class="col-4">
                              <li>
                                <a href="/transportation.html"
                                  >Transportation</a
                                >
                              </li>
                              <li><a href="/travel.html">Travel</a></li>
                              <li><a href="/education.html">Education</a></li>
                            </div>
                          </div>
                          <li class="divider"></li>
                        </ul>
                      </li>
                    </div>
                  </ul>
                </li>
              </ul>
            </li>
            <a href="/sass.html" class="nav-link">SaaS</a>
          </ul>
        </div>
      </div>
        <div
          class="primary-btn d-none d-lg-flex gap-4 align-items-center justify-content-center"
        >
          <a href="contact.html" class="nav-link js-scroll-trigger text-white">
            Contact Us
          </a>
        </div>
        <button id="letTalkModalButton" class="modal-open-btn primary-btn">
          Let's Talk
        </button>
        <a href="/pricing-page.html">
          <button id="letTalkModalButton" class="modal-open-btn primary-btn">
            Pricing
          </button>
        </a>
      </div>
    </div>
    <div class="d-block d-lg-none">
      <div
        class="collapse navbar-collapse has-dropdown py-4"
        id="navbarCollapse"
      >
        <!-- Links -->
        <ul class="navbar-nav ml-auto d-flex align-items-center">
          <li class="navbar-collapse js-navbar-collapse nav-item">
            <ul class="nav navbar-nav">
              <li class="dropdown dropdown-large">
                <a
                  href="#"
                  class="dropdown-toggle nav-link"
                  data-toggle="dropdown"
                  >AI</a
                >

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<script type="module">
  import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-app.js";
  import {
    getDatabase,
    ref,
    push,
    set,
  } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-database.js";
  document.addEventListener("DOMContentLoaded", function () {
    const firebaseConfig = {
      apiKey: "AIzaSyC0nJZwyOT4Q9A2uT8eFfuRak_0SfQER6g",
      authDomain: "seedinov-portfolio.firebaseapp.com",
      databaseURL: "https://seedinov-portfolio-default-rtdb.firebaseio.com",
      projectId: "seedinov-portfolio",
      storageBucket: "seedinov-portfolio.appspot.com",
      messagingSenderId: "357131043562",
      appId: "1:357131043562:web:a914294845d85ba9f20d93",
    };

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

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

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

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

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

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

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

<section
  class="service-banner"
  style="
    background: url('/images/services-page/saas-services/banner-bg.png');
    background-position: right;
    background-repeat: no-repeat;
  "
>
  <div class="container-fluid">
    <div class="row align-items-center justify-content-center">
      <div class="col-lg-12">
        <div class="path d-flex gap-3">
          <div class="text-white">
            <p>Home</p>
          </div>
          <div>
            <p>
              <img loading="lazy"
                width="50px"
                src="/images/services-page/ai-services/banner-arrow.svg"
              />
            </p>
          </div>
          <div class="text-white">
            <p>Services</p>
          </div>
        </div>
      </div>
      <div class="col-lg-12">
        <div
          class="service-banner-content d-flex justify-content-between align-items-center"
        >
          <div class="left-container">
            <h1 class="text-center text-lg-left">
              Machine Learning  <span>Security Solutions</span>
            </h1>
            <p class="text-white d-block d-lg-none text-center">
              Leverage our machine learning and AI solutions to help you create advanced threat prevention systems
            </p>
            <p class="text-white tag-line d-none d-lg-block">Leverage our machine learning and AI solutions to help you create advanced threat prevention systems</p>
            <link
              href="https://assets.calendly.com/assets/external/widget.css"
              rel="stylesheet"
            />
            <script
              src="https://assets.calendly.com/assets/external/widget.js"
              type="text/javascript"
              async
            ></script>
                            <button
              onclick="Calendly.initPopupWidget({url: 'https://calendly.com/ehtisham-wruh/30min'});return false;"
              class="primary-btn border-0 m-auto m-lg-none d-block d-lg-inline">Schedule a Free
                                Call</button>
          </div>
          <div class="right-container d-none d-lg-block">
           
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


<div class="seed-section">
  <div class="container">
    <div class="row align-items-center justify-content-center">
      <div class="col-lg-7">
        <h2>Machine Learning and Security</h2>
        <p>
          Today, organizations and enterprises rely on applications that are updated, modified, and used constantly in order to maintain delivery of services or keep business functions running smoothly. In these uncertain environments, ML-enabled applications can cut through terabytes of data at machine speed and find threats, vulnerabilities, and anomalies that can lead to harm.
        </p>
        <!-- <button class="primary-btn">Want Help?</button> -->
      </div>
      <div class="col-8 col-md-8 col-lg-5">
        <img loading="lazy"
          src=../../../images/cybersecurity.jpg
          alt="ecommerce"
          width="100%"
          class="img-fluid mt-4"
        />
      </div>
    </div>
  </div>
</div>


<section style="
background: url('../../../../images/abstract-banner.jpg');
background-position: right;
background-size: cover;
background-repeat: no-repeat;
" class="section" id="services-2">
  <div class="container">
    <div class="service-container ">
      <div
        class="d-flex justify-content-center align-items-center flex-column"
        style="max-width: 1000px; margin: 0 auto"
      >
        <!-- Heading -->
        <h1 class="h1 text-center text-white mb-4" id="">
          How SeedInov Does Machine Learning and Security?
        </h1>
        <!-- Subheading -->
        <p class="mb-5 text-center text-white" id="service-subheading">
          We work very closely with our clients to create bespoke solutions and applications that complement their existing systems by creating a seamless fit. We take a holistic approach toward security by collecting and utilizing data and insightfully training our machine-learning model to produce enriched security information and checks. These are then applied and implemented to run your threat prevention, detection, and response scenarios.
        </p>
      </div>
      <!-- / .row -->

      
      <div>
        <a href="contact.html">
          <button class="primary-btn border-0 m-auto m-lg-none d-block text-lg">
            Get Free Consultations
          </button>
        </a>
      </div>
    </div>
  </div>
</section>

<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">
          Benefits of <span>Machine Learning</span> Security Solutions
        </h2>
        <!-- Subheading -->
        <p class="mb-5 text-center" id="service-subheading">
          Machine Learning makes it increasingly harder for attackers to penetrate and compromise systems. Leveraging advanced ML practices can bolster your security systems to fight the most difficult threats. 
        </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 mb-5">
          <div class="web-service-block card-hover-effect why-choose-card align-items-center justify-content-around text-center">
            <!-- <i class="ti-light-bulb"></i> -->
            <div class="image-container-black">
              <img loading="lazy"
                src="../../images/why-us/data-breach.png"
                width="auto"
                height="auto"
                alt="Chat Bots Service"
              />
            </div>
            <h3>
              Minimize Data Breaches</h3>
            <p>
              Ensure that your data remains secure, prevent breaches, data theft.
            </p>
            
          </div>
  
          <div class="web-service-block card-hover-effect why-choose-card align-items-center justify-content-around text-center">
            <div class="image-container-black">
              <img loading="lazy"
                src="../../images/why-us/encrypted.png"
                width="auto"
                height="auto"
                alt="Optimized Business Processes"
              />
            </div>
            <h3>More Efficient Security Ops</h3>
            <p>
              Focus on the right incidents and problems to stay always on top.
            </p>
          </div>
          
          <div class="web-service-block card-hover-effect why-choose-card align-items-center justify-content-around text-center">
            <div class="image-container-black">
              <img loading="lazy"
                src="../../images/why-us/compliant.png"
                width="auto"
                height="auto"
                alt="Optimized Business Processes"
              />
            </div>
            <h3>Easy Compliance</h3>
            <p>
              Implement and adapt to new security or government compliances with ease.
            </p>
          </div>
          
          <div class="web-service-block card-hover-effect why-choose-card align-items-center justify-content-around text-center">
            <div class="image-container-black">
              <img loading="lazy"
                src="../../images/why-us/secure-data.png"
                width="auto"
                height="auto"
                alt="Optimized Business Processes"
              />
            </div>
            <h3>Safeguard Assets Across the Cloud</h3>
            <p>
              Make sure that your data is secure across your cloud footprint.
            </p>
          </div>
          
         
        </div>
        <div>
          <a href="contact.html">
            <button class="primary-btn border-0 m-auto m-lg-none d-block text-lg">
              Get Free Consultations
            </button>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>


<!-- <section class="seed-section technology-stack">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 d-flex justify-content-center">
        <div>
          <p class="alumni-description text-center m-auto mx-100">
            We Engage with an Extensive Spectrum of <span>Technologies</span>
          </p>
        </div>
      </div>
      <div class="col-lg-12 d-flex justify-content-end technology-arrow">
        <div>
            <button class="technology-prev slider-prev">
              <img src="../../images/arrow.png" width="40px" height="20px" />
            </button>
            <button class="technology-next slider-next">
              <img src="../../images/arrow.png" width="40px" height="20px"/>
            </button>
        </div>
      </div>
      <div class="col-lg-12">
        <div class="technology-slider">
          <div class="element element-1">
            <div class="technology-slide">
              <div
                class="technology-box d-flex flex-column justify-content-center align-items-center gap-3"
              >
                <img
                  src="../../images/technology/js.png"
                  alt="js"
                  width="60px"
                  height="60px"
                />
                <p class="alumni-description">JavaScript</p>
              </div>
            </div>
          </div>
          <div class="element element-2">
            <div class="technology-slide">
              <div
                class="technology-box d-flex flex-column justify-content-center align-items-center gap-3"
              >
                <img
                  src="../../images/technology/ts.png"
                  alt="js"
                  width="60px"
                  height="60px"/>
               <p class="alumni-description">TypeScript</p>
              </div>
            </div>
          </div>
          <div class="element element-3">
            <div class="technology-slide">
              <div
                class="technology-box d-flex flex-column justify-content-center align-items-center gap-3"
              >
                <img
                  src="../../images/technology/py.png"
                  alt="js"
                  width="60px"
                  height="60px"
                />
                <p class="alumni-description">Python</p>
              </div>
            </div>
          </div>
          <div class="element element-4">
            <div class="technology-slide">
              <div
                class="technology-box d-flex flex-column justify-content-center align-items-center gap-3"
              >
                <img
                  src="../../images/technology/tf.png"
                  alt="js"
                  width="60px"
                  height="60px"
                />
                <p class="alumni-description">TensorFLow</p>
              </div>
            </div>
          </div>
          <div class="element element-5">
            <div class="technology-slide">
              <div
                class="technology-box d-flex flex-column justify-content-center align-items-center gap-3"
              >
                <img
                  src="../../images/technology/figma.png"
                  alt="js"
                  width="60px"
                  height="60px"
                />
                <p class="alumni-description">Figma</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section> -->
 <div class="seed-section">
<section id="work-wrap">
    <div class="container">
        <div class="section-heading mb-5">
            <!-- Subheading -->
            <p class="col-md-11 col-lg-11 alumni-description" style="margin: 0 auto;">
                Showcasing Our Latest <span>Software</span> Creations
            </p>
        </div>
</section>

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

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

            <div class="col-lg-4 col-md-6 p-0 mb-4">
                <a href="sfl-project.html">
                    <div class="work-block m-1" style="background: #F0F0F0;">
                        <img loading="lazy" src="images/projects/sfl1.png" alt="work-img" width="auto" height="auto" class="img-fluid">
                    </div>
                    <div class="card-content">
                        <h4>School For Life NGO Portal</h4>
                        <p>A platform for resource management in your organizations and tracking the wellbeing of your workforce</p>
                        <a href="sfl-project.html" class="link">Read Case Study&nbsp;&nbsp;<img loading="lazy"
                                src="../../images/icon/right-arrow.svg" alt="" srcset=""></a>
                    </div>
            </div>
            <div class="col-lg-4 col-md-6 p-0 mb-4">
                <a href="tribify-project.html">
                    <div class="work-block m-1" style="background: #EBEEFB;">
                        <img loading="lazy" src="images/projects/tribify.png" alt="work-img" width="auto" height="auto" class="img-fluid">
                    </div>
                    <div class="card-content">
                        <h4>Tribify - Happiness Hub</h4>
                        <p>a platform for resource management in your organizations and tracking the wellbeing of your workforce</p>
                        <a href="tribify-project.html" class="link">Read Case Study&nbsp;&nbsp;<img loading="lazy"
                                src="../../images/icon/right-arrow.svg" alt="" srcset=""></a>
                    </div>
                </a>
            </div>
            <div class="col-lg-4 col-md-6 p-0 mb-4">
                <a href="projects-project.html">
                    <div class="work-block m-1" style="background: #F3EEC9a0;">
                        <img loading="lazy" src="images/projects/projectS.jpg" alt="work-img" width="auto" height="auto" class="img-fluid">
                    </div>
                    <div class="card-content">
                        <h4>Project-S</h4>
                        <p>Project S is a game and tournament management platform for Call of Duty: MW3  tournaments, integrating AI for fair play and enhanced user experience.</p>
                        <a href="projects-project.html" class="link">Read Case Study&nbsp;&nbsp;<img loading="lazy"
                                src="../../images/icon/right-arrow.svg" alt="" srcset=""></a>
                    </div>
                </a>
            </div>
            <div class="col-lg-4 col-md-6 p-0 mb-4">
                <a href="refussion-project.html">
                    <div class="work-block m-1" style="background: #E5F1EB;">
                        <img loading="lazy" src="images/projects/refussion.jpg" alt="work-img" width="auto" height="auto" class="img-fluid">
                    </div>
                    <div class="card-content">
                        <h4>Refusion AI</h4>
                        <p>An all AI anything AI platform along with a marketplace, where users can browse for AI/ML models and solutions and integrate them to their projects.</p>
                        <a href="refussion-project.html" class="link">Read Case Study&nbsp;&nbsp;<img loading="lazy"
                                src="../../images/icon/right-arrow.svg" alt="" srcset=""></a>
                    </div>
                </a>
            </div>
            <div class="col-lg-4 col-md-6 p-0 mb-4">
                <a href="brainbee-project.html">
                    <div class="work-block m-1" style="background: #F0F0F0;">
                        <img loading="lazy" src="images/projects/brainbee.jpg" alt="work-img" width="auto" height="auto" class="img-fluid">
                    </div>
                    <div class="card-content">
                        <h4>BrainBee</h4>
                        <p>A no code AI builder platform where you can make and deploy AI solutions which cater to your needs</p>
                        <a href="brainbee-project.html" class="link">Read Case Study&nbsp;&nbsp;<img loading="lazy"
                                src="../../images/icon/right-arrow.svg" alt="" srcset=""></a>
                    </div>
                </a>
            </div>
            <div class="col-lg-4 col-md-6 p-0 mb-4">
                <a href="housingxpert-project.html">
                    <div class="work-block m-1" style="background: #EBEEFB;">
                        <img loading="lazy" src="images/projects/housingXpert.jpg" class="object-cover" width="auto" height="auto" class="img-fluid">
                    </div>
                    <div class="card-content">
                        <h4>HousingXpert</h4>
                        <p>HousingXpert is an innovative and comprehensive real estate platform which offers a streamlined and intuitive experience for property buyers.</p>
                        <a href="housingxpert-project.html" class="link">Read Case Study&nbsp;&nbsp;<img loading="lazy"
                                src="../../images/icon/right-arrow.svg" alt="" srcset=""></a>
                    </div>
                </a>
            </div>
            <div class="col-lg-4 col-md-6 p-0 mb-4">
                <a href="esperwise-project.html">
                    <div class="work-block m-1">
                        <img loading="lazy" src="images/projects/esperwise.jpg" alt="work-img" width="auto" height="auto" class="img-fluid">
                    </div>
                    <div class="card-content">
                        <h4>EsperWise</h4>
                        <p>
                            EsperWise AI is a multilingual patient-doctor conversation recorder and analyzer. This tool captures, transcribes, and analyzes medical consultations in real-time, offering valuable insights to enhance patient care.</p>
                        <a href="esperwise-project.html" class="link">Read Case Study&nbsp;&nbsp;<img loading="lazy"
                                src="../../images/icon/right-arrow.svg" alt="" srcset=""></a>
                    </div>
                </a>
            </div>
        </div>
    </div>
</section>
</div>
<section class="section" id="section-testimonial">
  <div class="container">
    <div class="testimonial-container">
      <div
        class="d-flex justify-content-center align-items-center flex-column"
        style="max-width: 600px; margin: 0 auto"
      >
        <!-- Heading -->
        <h2
          class="section-title mb-2 text-white text-center"
          id="service-heading"
        >
          Raving Reviews: Client <span>Testimonials</span>
        </h2>
        <!-- Subheading -->
        <p class="text-white text-center" id="service-subheading">
          We place a strong emphasis on ensuring client satisfaction, and we are
          proud to share testimonials from our valued clients
        </p>
      </div>
      <div class="row align-items-center">
        <div class="col-lg-12 d-flex justify-content-end technology-arrow">
          <div>
            <button class="testimonial-prev slider-prev">
              <img loading="lazy" src="../../images/arrow.png" width="40px" height="20px" />
            </button>
            <button class="testimonial-next slider-next">
              <img loading="lazy" src="../../images/arrow.png" width="40px" height="20px" />
            </button>
          </div>
        </div>
        <div class="col-lg-12 col-sm-12 col-md-12">
          <div class="testimonals-slider">

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

  <div id="video-modal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      
      <div class="player">
        <video width="100%" height="auto" class="viewer">
          <source src="" type="video/mp4" />
          Your browser does not support the video tag.
        </video>
        <div class="player__controls">
          <button class="player__button toggle" title="Toggle Play">⏵︎</button>
          <div class="progress">
            <div class="progress__filled"></div>
          </div>
        </div>
      </div>
        
    
      <div class=" mx-3">
        <div class="test-author-thumb mt-4 d-flex mb-2">
          <img loading="lazy"
            src=""
            alt="Testimonial author"
            class="img-fluid"
            width="auto"
            height="auto"
          />
          <div class="test-author-info">
            <h4></h4>
            <!-- <h6></h6> -->
            <!-- <div
              class="star-ratings"
              style="
                display: inline-flex;
                align-items: flex-start;
                gap: 0px;
                margin-bottom: 10px;
              "
            ></div> -->
          </div>
        </div>
        <!-- <p class="text-white"></p> -->
      </div>
    </div>
  </div>
</section>
 <section id="contactform" class="seed-section seed-contact-form">
  <h2 class="section-heading mb-4 d-block" id="service-heading">
    Got a Business Idea? Let us Help You Bring It To <span>&nbsp;Life!</span>
  </h2>

  <div class="smallform">
    <div class="chat-messages">
      <div class="chat-message d-flex gap-4">
        <img
          loading="lazy"
          src="../../images/favicon.png"
          width="32px"
          height="32px"
          class="img-fluid"
        />
        <div class="max-w-300px">
          <p>Hi, There can you share your email?</p>
        </div>
      </div>
    </div>
    <div id="loader" class="chat-loader" style="display: none">
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
    <div class="input-container" id="input-wrapper">
      <div class="d-flex gap-2 justify-content-center items-center">
        <textarea
          id="user-input"
          data-min-rows="1"
          placeholder="Please enter the asked details?"
          rows="1"
          style="overflow: hidden; resize: none"
        ></textarea>
        <button id="chat-submit-btn" class="primary-btn" style="height: 42px">
          Submit
        </button>
      </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>