travel.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">
              AI for the  <span>Travel Industry</span>
            </h1>
            <p class="text-white d-block d-lg-none text-center">
              Tailor-made AI and machine learning solutions for the travel and hospitality industry
            </p>
            <p class="text-white tag-line d-none d-lg-block">Tailor-made AI and machine learning solutions for the travel and hospitality industry</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>Fully Personalize travel services with AI</h2>
        <p>
          Leverage the power of AI and machine learning to transform your digital travel and hospitality services, like fully personalized recommendations for travelers when they’re at the booking stage. Utilize AI-powered chatbots to manage the most frequently asked questions and concerns instantly and handly different tasks.
        </p>
        <!-- <button class="primary-btn">Want Help?</button> -->
      </div>
      <div class="col-8 col-md-8 col-lg-5">
        <img loading="lazy"
          src=../../../images/travel.png
          alt="ecommerce"
          width="100%"
          class="img-fluid mt-4"
        />
      </div>
    </div>
  </div>
</div>


<section class="section">
  <div class="container">
    <div class="">
      <div
        class="d-flex justify-content-center align-items-center flex-column"
        style="max-width: 700px; margin: 0 auto"
      >
        <!-- Heading -->
        <h2 class="section-title mb-2 text-center" id="service-heading">
          Benefits Of Implementing AI In <span>Travel Services</span>
        </h2>
        <!-- Subheading -->
        <p class="mb-5 text-center" id="service-subheading">
          Using AI to augment processes in travel in hospitality, like managing reservations, handling queries, etc., can help you create seamless experiences that delight your customers each time.
        </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/response.png"
                width="auto"
                height="auto"
                alt="Chat Bots Service"
              />
            </div>
            <h3>
              Lightning Quick Responses to Queries</h3>
            <p>
              Use AI-powered chatbots to reduce the load on your employees while handling customer queries efficiently round the clock.
            </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">
              <img loading="lazy"
                src="../../images/why-us/handshake.png"
                width="auto"
                height="auto"
                alt="Optimized Business Processes"
              />
            </div>
            <h3>Increased Customer Satisfaction</h3>
            <p>
              With AI, you can create personalized offerings and experiences for your customers resulting in greater customer satisfaction.
            </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">
              <img loading="lazy"
                src="../../images/why-us/data-visualization.png"
                width="auto"
                height="auto"
                alt="Optimized Business Processes"
              />
            </div>
            <h3>In-depth Insights for Management</h3>
            <p>
              AI also helps the management discover key insights from data gathered enabling them to make better pricing decisions, package offerings better, and improve overall efficiency.
            </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="section ai-chatbot-niche" id="services-2">
  <div class="container">
    <div class="service-container">
      <div
        class="d-flex justify-content-center align-items-center flex-column"
        style="max-width: 700px; margin: 0 auto"
      >
        <!-- Heading -->
        <h2 class="section-title mb-2 text-center" id="service-heading">
          Applications Of AI in the <span>Travel Industry</span>
        </h2>
        <!-- Subheading -->
        <p class="mb-5 text-center" id="service-subheading">With extensive experience in delivering customized AI and enterprise solutions to our clients, we have the necessary expertise to become your technology partner and help you create sustainable, future-proof business systems.</p>
      </div>
      <!-- / .row -->

      <div class="row">
        <div class="col-lg-4 col-sm-6 mb-4">
          <div class="box">
            <div class="img-box">
              <img loading="lazy"
                src="../../images/aiapplications/Identify-Customer-Segments.png"
                width="auto"
                height="auto"
                class="img-fluid"
                style="width: 100%"
                alt="Chat Bots Service"
              />
            </div>
            <h3 class="">Identify Customer Segments</h3>
            <p class="">
              Use customer shared data to create customized experiences and offerings for your customers that delight each time.
            </p>
          </div>
        </div>
        <div class="col-lg-4 col-sm-6 mb-4">
          <div class="box">
            <div class="img-box">
              <img loading="lazy"
                src="../../images/aiapplications/Smart-Pricing-Solutions.png"
                width="auto"
                height="auto"
                class="img-fluid"
                style="width: 100%"
                alt="Chat Bots Service"
              />
            </div>
            <h3 class="">Smart Pricing Solutions</h3>
            <p class="">
              Stay on top of the game by optimizing your pricing based on factors like season, competition, availability, etc.
            </p>
          </div>
        </div>
        <div class="col-lg-4 col-sm-6 mb-4">
          <div class="box">
            <div class="img-box">
              <img loading="lazy"
                src="../../images/aiapplications/Smart-Feedback-Analysis.png"
                width="auto"
                height="auto"
                style="width: 100%"
                class="img-fluid"
                alt="Chat Bots Service"
              />
            </div>

            <h3 class="">Smart Feedback Analysis</h3>
            <p class="">
              Using AI and sentiment analysis, stay vigilant about what your customers are saying about your services and brand.
            </p>
          </div>
        </div>
        <div class="col-lg-4 col-sm-6 mb-4">
          <div class="box">
            <div class="img-box">
              <img loading="lazy"
                src="../../images/aiapplications/Forecasting-Demand.png"
                width="auto"
                height="auto"
                style="width: 100%"
                class="img-fluid"
                alt="Chat Bots Service"
              />
            </div>

            <h3 class="">Forecasting Demand</h3>
            <p class="">
              Predict occupancy and reservations based on the data, such as rates, popularity, season, etc.
            </p>
          </div>
        </div>
        <div class="col-lg-4 col-sm-6 mb-4">
          <div class="box">
            <div class="img-box">
              <img loading="lazy"
                src="../../images/aiapplications/Intelligent-Chatbots.png"
                width="auto"
                height="auto"
                style="width: 100%"
                class="img-fluid"
                alt="Chat Bots Service"
              />
            </div>

            <h3 class="">Intelligent Chatbots</h3>
            <p class="">
              Utilize AI-powered chatbots to answer customer queries and help them research and make decisions quickly while removing the burden off of your service personnel.
            </p>
          </div>
        </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>
</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">
         Why Choose <span>SeedInov?</span>
        </h2>
        <!-- Subheading -->
        <p class="mb-5 text-center" id="service-subheading">
          <!-- We offer tailored solutions for our clients with the flexibility that they need to stay competitive in their respective industries. Our experience of working in different verticals gives us an insight into business-specific tech solutions. -->
        </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">
            <!-- <i class="ti-settings"></i> -->
            <div class="image-container">
              <img
                src="../../images/why-us/experience.png"
                width="auto"
                height="auto"
                alt="Saas Icon"
              />
            </div>
            <h3>
              15+ Years of Experience</h3>
            <p>
              We have developed purpose-built AI solutions that help maximize performance based on more than 15 years of experience. We have worked in various scenarios that help us identify your problem quickly and develop insightful solutions!
            </p>
          </div>
          <div class="web-service-block card-hover-effect why-choose-card">
            <!-- <i class="ti-settings"></i> -->
            <div class="image-container">
              <img
                src="../../images/why-us/certified.png"
                width="auto"
                height="auto"
                alt="Saas Icon"
              />
            </div>
            <h3>Certified Software Engineers</h3>
            <p>
              With innovative tactics and tailored solutions created just for businesses, our AI professionals assist enterprises in resolving critical issues that limit performance.
            </p>
          </div>
          <div class="web-service-block card-hover-effect why-choose-card">
            <!-- <i class="ti-settings"></i> -->
            <div class="image-container">
              <img
                src="../../images/why-us/handshake.png"
                width="auto"
                height="auto"
                alt="Saas Icon"
              />
            </div>
            <h3>1000+ Enterprise-Level Clients</h3>
            <p>
              Over the last 15 years, we've built an extensive client base of delighted customers!
            </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>

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