contact.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="page-banner-area page-contact">
  <div class="overlay"></div>
  <!-- Content -->
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-9 col-md-12 col-12 text-center">
        <div class="page-banner-content">
          <p>Let's connect</p>
          <h1 class="display-4 font-weight-bold">
            Get in touch to build scalable digital solutions. In weeks, not
            months.
          </h1>
          <div class="flex meeting-button-wrapper mt-4">
            <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
              class="filled-button"
              onclick="Calendly.initPopupWidget({url: 'https://calendly.com/ehtisham-wruh/30min'});return false;"
            >
              Book a meeting
            </button>
            <a href="#message-form">Drop a message</a>
          </div>
        </div>
      </div>
    </div>
    <!-- / .row -->
  </div>
  <!-- / .container -->
</section>

<!-- SECTIONS
    ================================================== -->
<section id="contact-info">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-4 col-sm-6 col-md-6">
        <div class="contact-info-block text-center">
          <i class="pe-7s-map-marker"></i>
          <h4>Address</h4>
          <p class="lead">Remote</p>
        </div>
      </div>
      <div class="col-lg-4 col-sm-6 col-md-6">
        <div class="contact-info-block text-center">
          <i class="pe-7s-mail"></i>
          <h4>Email</h4>
          <a class="lead" href="mailto:contact@seedinov.com" target="_blank"
            >contact@seedinov.com</a
          >
        </div>
      </div>
      <div class="col-lg-4 col-sm-6 col-md-6">
        <div class="contact-info-block text-center">
          <i class="pe-7s-phone"></i>
          <h4>WhatsApp Number</h4>
          <a class="lead" href="https://wa.me/+12282061826" target="_blank"
            >+1 228 206 1826</a
          >
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section" id="contact">
  <div class="container" id="message-form">
    <div class="row mb-4">
      <div class="col-12">
        <!-- Heading -->
        <h2 class="contact-section-title mb-2">
          Submit your technical problem<br />
          <span class="font-weight-normal"
            >and we will provide you with a solution.</span
          >
        </h2>

        <!-- Subheading -->
        <!-- <p class="mb-5 ">
                    Whether you have questions or you would just like to say hello, contact us.
                </p> -->
      </div>
    </div>
    <!-- / .row -->

    <div class="row">
      <div class="col-lg-12">
        <!-- form message -->
        <div class="row">
          <div class="col-12">
            <div
              class="alert alert-success contact__msg"
              style="display: none"
              role="alert"
            >
              Your message was sent successfully.
            </div>
          </div>
        </div>
        <!-- end message -->
        <!-- Contacts Form -->
        <div class="row">
          <div class="col-lg-6">
            <div class="form-left-details">
              <p class="seconday-heading">Tell us about your project</p>
              <h2 class="primary-heading mb-4">
                What is your immediate business goal?
              </h2>
              <ul class="unordered-check-list">
                <li>Digital Transformation / BPO</li>
                <li>Modernise Legacy Systems &amp; Technology</li>
                <li>Develop Robust Apps &amp; Products</li>
                <li>Unlock Value With Data &amp; Analytics</li>
                <li>Scale or Build In-house Tech Teams</li>
                <li>Create Stunning Digital Experiences</li>
              </ul>
            </div>
          </div>
          <div class="col-lg-6">
            <form class="contact_form" id="contactForm">
              <div class="row">
                <!-- Input -->
                <div class="col-sm-6 mb-6">
                  <div class="form-group">
                    <label class="h6 small d-block text-uppercase">
                      Your name
                      <span class="text-danger">*</span>
                    </label>

                    <div class="input-group">
                      <input
                        class="form-control"
                        name="name"
                        id="name"
                        required=""
                        placeholder="John Doe"
                        type="text"
                      />
                    </div>
                  </div>
                </div>
                <!-- End Input -->

                <!-- Input -->
                <div class="col-sm-6 mb-6">
                  <div class="form-group">
                    <label class="h6 small d-block text-uppercase">
                      Your email address
                      <span class="text-danger">*</span>
                    </label>

                    <div class="input-group">
                      <input
                        class="form-control"
                        name="email"
                        id="email"
                        required=""
                        placeholder="john@gmail.com"
                        type="email"
                      />
                    </div>
                  </div>
                </div>
                <!-- End Input -->

                <div class="w-100"></div>

                <!-- Input -->
                <div class="col-sm-6 mb-6">
                  <div class="form-group">
                    <label class="h6 small d-block text-uppercase">
                      Subject
                      <span class="text-danger">*</span>
                    </label>

                    <div class="input-group">
                      <input
                        class="form-control"
                        name="subject"
                        id="subject"
                        required=""
                        placeholder="Web design"
                        type="text"
                      />
                    </div>
                  </div>
                </div>
                <!-- End Input -->

                <!-- Input -->
                <div class="col-sm-6 mb-6">
                  <div class="form-group">
                    <label class="h6 small d-block text-uppercase">
                      Your Phone Number
                      <span class="text-danger">*</span>
                    </label>

                    <div class="input-group">
                      <input
                        class="form-control"
                        id="phone"
                        name="phone"
                        required=""
                        placeholder="1-800-643-4500"
                        type="text"
                      />
                    </div>
                  </div>
                </div>
                <!-- End Input -->
              </div>

              <!-- Input -->
              <div class="form-group mb-4">
                <label class="h6 small d-block text-uppercase">
                  How can we help you?
                  <span class="text-danger">*</span>
                </label>

                <div class="input-group">
                  <textarea
                    class="form-control"
                    rows="4"
                    name="message"
                    id="message"
                    required=""
                    placeholder="Hi there, I would like to ..."
                  ></textarea>
                </div>
              </div>
              <!-- End Input -->

              <div class="">
                <input
                  name="submit"
                  type="submit"
                  class="btn btn-primary btn-circled m-auto d-block"
                  value="Send Message"
                />

                <p class="small pt-3 text-center">
                  We'll get back to you in 1-2 business days.
                </p>
              </div>
            </form>
          </div>
        </div>
        <!-- End Contacts Form -->
      </div>
    </div>
  </div>
</section>

<style>
  /* #contact .col-lg-6 {
    flex: none !important;
    max-width: 100% !important;
  } */
</style>
 <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>