jianyue00001
/
home-v2.html

<!DOCTYPE html>
<html>
  <head>
    <title>lander</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="author" content="">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/Swiper/10.3.1/swiper-bundle.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/vendor.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <!-- script
    ================================================== -->
  </head>
  <body class="homepage-v2">
    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
      <symbol xmlns="http://www.w3.org/2000/svg" id="navbar-icon" viewBox="0 0 16 16">
        <path d="M14 10.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 .5-.5zm0-3a.5.5 0 0 0-.5-.5h-7a.5.5 0 0 0 0 1h7a.5.5 0 0 0 .5-.5zm0-3a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0 0 1h11a.5.5 0 0 0 .5-.5z" />
      </symbol>
      <symbol xmlns="http://www.w3.org/2000/svg" id="facebook" viewBox="0 0 24 24">
        <path fill="currentColor" d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z" />
      </symbol>
      <symbol xmlns="http://www.w3.org/2000/svg" id="youtube" viewBox="0 0 32 32">
        <path fill="currentColor" d="M29.41 9.26a3.5 3.5 0 0 0-2.47-2.47C24.76 6.2 16 6.2 16 6.2s-8.76 0-10.94.59a3.5 3.5 0 0 0-2.47 2.47A36.13 36.13 0 0 0 2 16a36.13 36.13 0 0 0 .59 6.74a3.5 3.5 0 0 0 2.47 2.47c2.18.59 10.94.59 10.94.59s8.76 0 10.94-.59a3.5 3.5 0 0 0 2.47-2.47A36.13 36.13 0 0 0 30 16a36.13 36.13 0 0 0-.59-6.74ZM13.2 20.2v-8.4l7.27 4.2Z" />
      </symbol>
      <symbol xmlns="http://www.w3.org/2000/svg" id="instagram" viewBox="0 0 256 256">
        <path fill="currentColor" d="M128 80a48 48 0 1 0 48 48a48.05 48.05 0 0 0-48-48Zm0 80a32 32 0 1 1 32-32a32 32 0 0 1-32 32Zm48-136H80a56.06 56.06 0 0 0-56 56v96a56.06 56.06 0 0 0 56 56h96a56.06 56.06 0 0 0 56-56V80a56.06 56.06 0 0 0-56-56Zm40 152a40 40 0 0 1-40 40H80a40 40 0 0 1-40-40V80a40 40 0 0 1 40-40h96a40 40 0 0 1 40 40ZM192 76a12 12 0 1 1-12-12a12 12 0 0 1 12 12Z" />
      </symbol>
      <symbol xmlns="http://www.w3.org/2000/svg" id="twitter" viewBox="0 0 24 24">
        <path fill="currentColor" d="M22.46 6c-.77.35-1.6.58-2.46.69c.88-.53 1.56-1.37 1.88-2.38c-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29c0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15c0 1.49.75 2.81 1.91 3.56c-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07a4.28 4.28 0 0 0 4 2.98a8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21C16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56c.84-.6 1.56-1.36 2.14-2.23Z" />
      </symbol>
      <symbol xmlns="http://www.w3.org/2000/svg" id="linkedin" viewBox="0 0 512 512">
        <path fill="currentColor" d="M444.17 32H70.28C49.85 32 32 46.7 32 66.89v374.72C32 461.91 49.85 480 70.28 480h373.78c20.54 0 35.94-18.21 35.94-38.39V66.89C480.12 46.7 464.6 32 444.17 32Zm-273.3 373.43h-64.18V205.88h64.18ZM141 175.54h-.46c-20.54 0-33.84-15.29-33.84-34.43c0-19.49 13.65-34.42 34.65-34.42s33.85 14.82 34.31 34.42c-.01 19.14-13.31 34.43-34.66 34.43Zm264.43 229.89h-64.18V296.32c0-26.14-9.34-44-32.56-44c-17.74 0-28.24 12-32.91 23.69c-1.75 4.2-2.22 9.92-2.22 15.76v113.66h-64.18V205.88h64.18v27.77c9.34-13.3 23.93-32.44 57.88-32.44c42.13 0 74 27.77 74 87.64Z" />
      </symbol>
      <symbol xmlns="http://www.w3.org/2000/svg" id="arrow-down" viewBox="0 0 32 32">
        <path fill="currentColor" d="M24.59 16.59L17 24.17V4h-2v20.17l-7.59-7.58L6 18l10 10l10-10l-1.41-1.41z" />
      </symbol>
      <symbol xmlns="http://www.w3.org/2000/svg" id="cart" viewBox="0 0 512 512">
        <path fill="currentColor" d="M160 96.039v32h304v63.345l-35.5 112.655H149.932L109.932 16H16v32h66.068l40 288.039h329.9L496 196.306V96.039H160zm16.984 272.305a64.073 64.073 0 0 0-64 64a64 64 0 0 0 128 0a64.072 64.072 0 0 0-64-64Zm0 96a32 32 0 1 1 32-32a32.038 32.038 0 0 1-32 32Zm224-96a64.073 64.073 0 0 0-64 64a64 64 0 0 0 128 0a64.072 64.072 0 0 0-64-64Zm0 96a32 32 0 1 1 32-32a32.038 32.038 0 0 1-32 32Z" />
      </symbol>
      <symbol xmlns="http://www.w3.org/2000/svg" id="balloon" viewBox="0 0 24 24">
        <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5">
          <path d="M8 16.607c1.15.86 2.518 1.38 4 1.393c4.142.034 7.594-3.92 7.56-8.196C19.527 5.53 16.142 2.034 12 2c-4.142-.034-7.473 3.404-7.44 7.68A8.88 8.88 0 0 0 5.244 13" />
          <path d="M15.5 9a3.035 3.035 0 0 0-3-3M12 20.35c.321 0 .482 0 .593-.022c.654-.128 1.051-.772.858-1.39c-.033-.105-.109-.242-.261-.515M12 20.35c-.321 0-.482 0-.593-.022c-.654-.128-1.051-.772-.858-1.39c.033-.105.109-.242.261-.515M12 20.35v2.15" />
        </g>
      </symbol>
      <symbol xmlns="http://www.w3.org/2000/svg" id="bag-heart" viewBox="0 0 24 24">
        <g fill="none">
          <path fill="currentColor" d="m12 12.191l-.519.542a.75.75 0 0 0 1.038 0L12 12.191Zm-.957 3.675l-.444.604l.444-.604Zm1.914 0l-.444-.605l.444.605Zm-.957.462v.75v-.75Zm-.514-1.067c-.417-.307-.878-.69-1.227-1.093c-.368-.426-.509-.757-.509-.971h-1.5c0 .77.441 1.45.875 1.952c.453.525 1.014.984 1.474 1.321l.887-1.21ZM9.75 13.197c0-.576.263-.827.492-.907c.25-.088.714-.06 1.24.443l1.037-1.083c-.825-.79-1.861-1.096-2.773-.776c-.934.327-1.496 1.226-1.496 2.323h1.5Zm3.65 3.273c.46-.337 1.022-.796 1.475-1.32c.434-.502.875-1.183.875-1.953h-1.5c0 .214-.141.545-.51.971c-.348.403-.809.786-1.226 1.093l.887 1.21Zm2.35-3.273c0-1.097-.563-1.996-1.496-2.323c-.912-.32-1.948-.014-2.773.776l1.038 1.083c.525-.503.989-.531 1.24-.443c.228.08.491.33.491.907h1.5ZM10.6 16.47c.368.27.782.608 1.4.608v-1.5c-.024 0-.04 0-.094-.03a4 4 0 0 1-.42-.287l-.887 1.21Zm1.914-1.21a4 4 0 0 1-.42.289c-.054.029-.07.029-.094.029v1.5c.618 0 1.032-.337 1.4-.608l-.886-1.21Z" />
          <path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M9 6V5a3 3 0 1 1 6 0v1m5.224 6.526c-.586-3.121-.878-4.682-1.99-5.604C17.125 6 15.537 6 12.36 6h-.72c-3.176 0-4.764 0-5.875.922c-1.11.922-1.403 2.483-1.989 5.604c-.823 4.389-1.234 6.583-.034 8.029C4.942 22 7.174 22 11.639 22h.722c4.465 0 6.698 0 7.897-1.445c.696-.84.85-1.93.696-3.555" />
        </g>
      </symbol>
      <symbol xmlns="http://www.w3.org/2000/svg" id="handiplast" viewBox="0 0 24 24">
        <g fill="none">
          <path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M13.5 7.642L9.071 3.213a4.142 4.142 0 0 0-5.858 5.858L14.93 20.787a4.142 4.142 0 0 0 5.858-5.858l-4.358-4.358" />
          <path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="m12 17.858l-2.929 2.929A4.142 4.142 0 0 1 2.596 20m3.546-8l-2.929 2.929c-.322.322-.58.685-.774 1.071M12 6.142l2.929-2.929a4.142 4.142 0 1 1 5.858 5.858L17.857 12" />
          <path fill="currentColor" d="M15.841 12.871a.788.788 0 1 1-1.114 1.114a.788.788 0 0 1 1.114-1.114Zm-3.712-3.712a.787.787 0 1 0-1.114 1.114a.787.787 0 0 0 1.114-1.114Zm4.641 6.497a.787.787 0 1 1-1.114 1.114a.787.787 0 0 1 1.114-1.114ZM9.345 8.23A.788.788 0 1 0 8.23 9.346A.788.788 0 0 0 9.345 8.23Zm3.712 3.713a.787.787 0 1 1-1.113 1.114a.787.787 0 0 1 1.113-1.114Zm.928 2.785a.788.788 0 1 1-1.114 1.113a.788.788 0 0 1 1.114-1.113Zm-3.712-3.713a.787.787 0 1 0-1.114 1.114a.787.787 0 0 0 1.114-1.114Z" />
        </g>
      </symbol>
      <symbol xmlns="http://www.w3.org/2000/svg" id="star-fill" viewBox="0 0 16 16">
        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
      </symbol>
      <symbol xmlns="http://www.w3.org/2000/svg" id="star-empty" viewBox="0 0 16 16">
        <path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z" />
      </symbol>
      <symbol xmlns="http://www.w3.org/2000/svg" id="play" viewBox="0 0 32 32">
        <path fill="currentColor" d="M7 28a1 1 0 0 1-1-1V5a1 1 0 0 1 1.482-.876l20 11a1 1 0 0 1 0 1.752l-20 11A1 1 0 0 1 7 28ZM8 6.69v18.62L24.925 16Z" />
      </symbol>
      <symbol xmlns="http://www.w3.org/2000/svg" id="call-chat" viewBox="0 0 24 24">
        <path fill="currentColor" fill-rule="evenodd" d="M17 2.75a4.25 4.25 0 0 0-3.807 6.142c.16.32.225.71.12 1.102l-.253.946l.946-.253a1.567 1.567 0 0 1 1.102.12A4.25 4.25 0 1 0 17 2.75ZM11.25 7a5.75 5.75 0 1 1 3.19 5.15a.126.126 0 0 0-.04-.013h-.007l-1.112.297a1.4 1.4 0 0 1-1.715-1.714l.298-1.113V9.6a.126.126 0 0 0-.014-.04a5.73 5.73 0 0 1-.6-2.56ZM3.718 4.092c1.226-1.29 3.254-1.049 4.268.385l1.26 1.783c.811 1.147.743 2.74-.225 3.76l-.245.257c0 .002 0 .004-.002.006c-.013.037-.045.152-.013.372c.067.456.418 1.381 1.846 2.884c1.432 1.508 2.3 1.864 2.703 1.929a.608.608 0 0 0 .294-.007l.408-.43c.874-.92 2.236-1.101 3.335-.469l1.91 1.1c1.633.94 2.013 3.239.708 4.613l-1.42 1.495c-.443.467-1.048.866-1.795.94c-1.824.18-6.049-.055-10.478-4.718c-4.134-4.352-4.919-8.137-5.018-9.986c-.049-.914.358-1.697.894-2.261l.544.516l-.544-.516l1.57-1.653Zm3.043 1.25c-.512-.724-1.433-.767-1.956-.217l-1.57 1.653c-.33.349-.505.748-.483 1.148c.08 1.51.731 4.952 4.607 9.033c4.064 4.279 7.809 4.4 9.244 4.258c.283-.028.575-.186.854-.48l1.42-1.495c.614-.645.453-1.808-.368-2.28l-1.91-1.1c-.513-.295-1.114-.204-1.499.202l-.455.48l-.544-.517c.543.517.543.517.542.518l-.001.002l-.003.003l-.007.006l-.014.014a1.003 1.003 0 0 1-.136.112c-.08.057-.186.12-.321.172c-.276.11-.64.168-1.091.095c-.878-.143-2.028-.773-3.55-2.377c-1.528-1.608-2.113-2.807-2.243-3.7c-.067-.454-.014-.817.084-1.092a1.592 1.592 0 0 1 .23-.427l.03-.037l.014-.015l.006-.006l.003-.003l.002-.002s.001-.001.545.515l-.544-.516l.287-.302c.445-.47.51-1.264.088-1.86L6.76 5.342Z" clip-rule="evenodd" />
      </symbol>
      <symbol xmlns="http://www.w3.org/2000/svg" id="mail" viewBox="0 0 21 21">
        <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
          <path d="M3.5 6.5v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-10a2 2 0 0 0-2 2z" />
          <path d="m5.5 7.5l5 3l5-3" />
        </g>
      </symbol>
      <symbol xmlns="http://www.w3.org/2000/svg" id="location" viewBox="0 0 24 24">
        <path fill="currentColor" fill-rule="evenodd" d="M5.25 7.7c0-3.598 3.059-6.45 6.75-6.45c3.608 0 6.612 2.725 6.745 6.208l.478.16c.463.153.87.289 1.191.439c.348.162.667.37.911.709c.244.338.341.707.385 1.088c.04.353.04.78.04 1.269v5.748c0 .61 0 1.13-.047 1.547c-.05.438-.161.87-.463 1.237a2.25 2.25 0 0 1-.62.525c-.412.237-.855.276-1.296.253c-.42-.022-.933-.107-1.534-.208l-.041-.007c-1.293-.215-1.814-.296-2.322-.254a4.3 4.3 0 0 0-.552.083c-.498.109-.976.342-2.159.933l-.122.061c-1.383.692-2.234 1.118-3.154 1.251c-.276.04-.555.06-.835.06c-.928-.002-1.825-.301-3.28-.786a73.75 73.75 0 0 1-.127-.043l-.384-.128l-.037-.012c-.463-.154-.87-.29-1.191-.44c-.348-.162-.667-.37-.911-.709c-.244-.338-.341-.707-.385-1.088c-.04-.353-.04-.78-.04-1.269v-5.02c0-.786 0-1.448.067-1.967c.07-.542.23-1.072.666-1.47a2.25 2.25 0 0 1 .42-.304c.517-.287 1.07-.27 1.605-.166c.11.021.223.047.342.078c-.066-.446-.1-.89-.1-1.328Zm.499 3.01a9.414 9.414 0 0 0-1.028-.288c-.395-.077-.525-.03-.586.004a.747.747 0 0 0-.14.101c-.053.048-.138.156-.19.556c-.053.41-.055.974-.055 1.825v4.93c0 .539.001.88.03 1.138c.028.238.072.327.112.381c.039.055.109.125.326.226c.236.11.56.219 1.07.39l.384.127c1.624.541 2.279.75 2.936.752c.207 0 .413-.015.617-.044c.65-.094 1.276-.397 2.82-1.17l.093-.046c1.06-.53 1.714-.857 2.417-1.01c.246-.054.496-.092.747-.113c.717-.06 1.432.06 2.593.253l.1.017c.655.109 1.083.18 1.407.196c.312.016.419-.025.471-.055a.749.749 0 0 0 .207-.175c.039-.047.097-.146.132-.456c.037-.323.038-.757.038-1.42v-5.667c0-.539-.001-.88-.03-1.138c-.028-.238-.072-.327-.112-.381c-.039-.055-.109-.125-.326-.226c-.236-.11-.56-.219-1.07-.39l-.06-.019a10.701 10.701 0 0 1-1.335 3.788c-.912 1.568-2.247 2.934-3.92 3.663a3.505 3.505 0 0 1-2.794 0c-1.673-.73-3.008-2.095-3.92-3.663a10.856 10.856 0 0 1-.934-2.087ZM12 2.75c-2.936 0-5.25 2.252-5.25 4.95c0 1.418.437 2.98 1.23 4.341c.791 1.362 1.908 2.47 3.223 3.044c.505.22 1.089.22 1.594 0c1.316-.574 2.432-1.682 3.224-3.044c.792-1.36 1.229-2.923 1.229-4.34c0-2.699-2.314-4.951-5.25-4.951Zm0 4a1.25 1.25 0 1 0 0 2.5a1.25 1.25 0 0 0 0-2.5ZM9.25 8a2.75 2.75 0 1 1 5.5 0a2.75 2.75 0 0 1-5.5 0Z" clip-rule="evenodd" />
      </symbol>
    </svg>
    <header id="header" class="site-header bg-white position-fixed z-2 w-100 border-bottom mb-5" data-text-color="white">
      <nav id="header-nav" class="navbar navbar-expand-lg py-3">
        <div class="container-lg">
          <a class="navbar-brand pb-4" href="index.html">
            <img src="images/main-logo.png" class="logo">
          </a>
          <button class="navbar-toggler d-flex d-lg-none order-3 p-2 border-0 shadow-none bg-white" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
            <svg class="navbar-icon" width="50" height="50">
              <use xlink:href="#navbar-icon"></use>
            </svg>
          </button>
          <div class="offcanvas offcanvas-end" tabindex="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel">
            <div class="offcanvas-header px-4 pb-0">
              <button type="button" class="btn-close btn-close-black" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar"></button>
            </div>
            <div class="offcanvas-body">
              <ul class="navbar-nav scrollspy-nav justify-content-end flex-grow-1 gap-lg-5 pe-3">
                <li class="nav-item dropdown">
                  <a class="nav-link text-dark active dropdown-toggle" href="#intro" id="dropdownHome" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Home</a>
                  <div class="dropdown-menu" aria-labelledby="dropdownHome">
                    <a class="dropdown-item" href="index.html">Home V1</a>
                    <a class="dropdown-item" href="home-v2.html">Home V2</a>
                    <a class="dropdown-item" href="home-v3.html">Home V3</a>
                    <a class="dropdown-item" href="home-v4.html">Home V4</a>
                    <a class="dropdown-item" href="home-v5.html">Home V5</a>
                    <a class="dropdown-item" href="home-v6.html">Home V6</a>
                  </div>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link text-dark active dropdown-toggle" href="#" id="dropdownPages" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Pages</a>
                  <div class="dropdown-menu" aria-labelledby="dropdownPages">
                    <a class="dropdown-item" href="blog.html">Blog</a>
                    <a class="dropdown-item" href="single.html">Blog Single</a>
                    <a class="dropdown-item" href="faqs.html">FAQs</a>
                    <a class="dropdown-item" href="coming-soon.html">Coming Soon</a>
                    <a class="dropdown-item" href="404.html">404 Error</a>
                  </div>
                </li>
                <li class="scrollspy-link nav-item">
                  <a class="nav-link text-dark" data-target="about" href="#about">About</a>
                </li>
                <li class="scrollspy-link nav-item">
                  <a class="nav-link text-dark" data-target="why" href="#why">Why Us</a>
                </li>
                <li class="scrollspy-link nav-item">
                  <a class="nav-link text-dark" data-target="testimonials" href="#testimonials">Reviews</a>
                </li>
                <li class="scrollspy-link nav-item">
                  <a class="nav-link text-dark" data-target="features" href="#features">Features</a>
                </li>
                <li class="scrollspy-link nav-item">
                  <a class="nav-link text-dark" data-target="products" href="#products">Products</a>
                </li>
                <span class="scrollspy-indicator"></span>
              </ul>
            </div>
          </div>
        </div>
      </nav>
    </header>
    <section id="intro" class="scrollspy-section jarallax">
      <img src="images/banner-image-2.jpg" alt="banner" class="img-fluid jarallax-img">
      <div class="container-lg">
        <div class="row">
          <div class="col-lg-6 col-md-10 content-box d-flex align-items-center py-5 my-5">
            <div class="banner-content py-5 my-5">
              <h1 class="display-1 fw-bold" data-aos="fade-up">Your Product Landing Page</h1>
              <p class="lead my-4" data-aos="fade-up" data-aos-delay="300">Write here about your product short description.</p>
              <a href="#" class="btn btn-lg btn-primary rounded-pill text-uppercase mb-3" data-aos="fade-up" data-aos-delay="600">Order now</a>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section id="about" class="scrollspy-section py-5 my-5 overflow-hidden">
      <div class="container-lg">
        <div class="row align-items-center text-center">
          <div class="col-lg-6 mb-5">
            <div class="video-content" data-aos="fade-right">
              <div class="video-bg position-relative">
                <img src="images/video-item-2.jpg" alt="video" class="img-fluid rounded-5">
                <div class="player position-absolute d-flex justify-content-center align-items-center">
                  <a class='youtube play-btn d-flex justify-content-center align-items-center bg-white rounded-pill' href="#">
                    <svg class="play text-primary" width="32" height="42">
                      <use xlink:href="#play"></use>
                    </svg>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-6">
            <div class="section-header mt-0 text-center" data-aos="fade-left">
              <h2 class="display-3 fw-medium">Your Product Info</h2>
            </div>
            <div class="detail-content px-5">
              <p data-aos="fade-left" data-aos-delay="300">Suspen dise tempus oncu enim pellen tesque este pretium in neque, elit morbi sagittis lorem habi mattis empus oncu enim pellen. Suspen dise tempus oncu enim pellen tesque este pretium in neque, elit morbi sagittis lorem habi mattis empus oncu enim pellen.</p>
              <a href="#landing-pages" class="btn btn-lg btn-primary rounded-pill text-uppercase" data-aos="fade-left" data-aos-delay="300">About</a>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section id="why" class="scrollspy-section py-5" data-aos="fade-up">
      <div class="container-fluid mt-5">
        <div class="row g-0">
          <div class="col-lg-6 col-md-6">
            <div class="card border-0">
              <div class="row g-0">
                <div class="col-lg-6 col-md-12 col-sm-6">
                  <img src="images/info-item-1.jpg" class="img-fluid" alt="handwash">
                </div>
                <div class="col-lg-6 col-md-12 col-sm-6 border d-flex align-items-center">
                  <div class="card-body text-center">
                    <h2 class="fs-3 fw-medium">Your Product Quality</h2>
                    <p>Suspen dise tempus oncu enim pellen tesque este pretium in neque, elit morbi sagittis lorem habi mattis empus.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-6 col-md-6">
            <div class="card border-0">
              <div class="row g-0">
                <div class="col-lg-6 col-md-12 col-sm-6">
                  <img src="images/info-item-2.jpg" class="img-fluid" alt="water tap">
                </div>
                <div class="col-lg-6 col-md-12 col-sm-6 border d-flex align-items-center">
                  <div class="card-body text-center">
                    <h2 class="fs-3 fw-medium">Feature Of Your Product</h2>
                    <p>Suspen dise tempus oncu enim pellen tesque este pretium in neque, elit morbi sagittis lorem habi mattis empus.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row g-0">
          <div class="col-lg-6 col-md-6">
            <div class="card border-0">
              <div class="row g-0">
                <div class="col-lg-6 col-md-12 col-sm-6 border d-flex align-items-center">
                  <div class="card-body text-center">
                    <h2 class="fs-3 fw-medium">Customer Satisfaction</h2>
                    <p>A pellen tesque pretium feugiat vel morbi sagittis habi tasse cursus. Suspen dise tempus oncu enim pellen tesque.</p>
                  </div>
                </div>
                <div class="col-lg-6 col-md-12 col-sm-6">
                  <img src="images/info-item-3.jpg" class="img-fluid" alt="handwash">
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-6 col-md-6">
            <div class="card border-0">
              <div class="row g-0">
                <div class="col-lg-6 col-md-12 col-sm-6 border d-flex align-items-center">
                  <div class="card-body text-center">
                    <h2 class="fs-3 fw-medium">Instant access</h2>
                    <p>Euismod eget id posuere nisl ut me duis in lectus elementum tincidunt augue ut neger in tincidunt amet et ultrices.</p>
                  </div>
                </div>
                <div class="col-lg-6 col-md-12 col-sm-6">
                  <img src="images/info-item-4.jpg" class="img-fluid" alt="headphone">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section id="testimonials" class="scrollspy-section py-5 my-5">
      <div class="container-lg">
        <div class="section-header mt-0 text-center mb-5">
          <h2 class="display-3 fw-medium">Customer’s Reviews</h2>
        </div>
        <div class="d-flex">
          <div class="swiper review-swiper position-relative mb-5">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <div class="review-item text-center px-3">
                  <blockquote>Lorem ipsum dolor sit amet consectetur. Malesuada et ut vitae eget. Leo viverra fringilla faucibus proin lacinia ornare amet. Aliquam mi eros dapibus pulvinar morbi aenean. Sit in donec quisque turpis. Tortor aliquam auctor elementum sodales porttitor viverra.</blockquote>
                  <div class="author-detail mt-4">
                    <div class="rating d-flex justify-content-center">
                      <svg class="star-fill svg-yellow" width="15" height="15">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                      <svg class="star-fill svg-yellow" width="15" height="15">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                      <svg class="star-fill svg-yellow" width="15" height="15">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                      <svg class="star-fill svg-yellow" width="15" height="15">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                      <svg class="star-fill svg-yellow" width="15" height="15">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                    </div>
                    <div class="name fw-medium mt-3">David William - Feb 22, 2023</div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="review-item text-center px-3">
                  <blockquote>Amet non dolor pellentesque feugiat ac nec ac in. Dictumst turpis natoque eget suscipit arcu. Eu nunc quis consectetur iaculis sit et. Ipsum mattis eleifend arcu faucibus netus neque tellus amet. Accumsan enim cursus nulla tellus felis vitae.</blockquote>
                  <div class="author-detail mt-4">
                    <div class="rating d-flex justify-content-center">
                      <svg class="star-fill svg-yellow" width="15" height="15">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                      <svg class="star-fill svg-yellow" width="15" height="15">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                      <svg class="star-fill svg-yellow" width="15" height="15">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                      <svg class="star-fill svg-yellow" width="15" height="15">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                      <svg class="star-fill svg-yellow" width="15" height="15">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                    </div>
                    <div class="name fw-medium mt-3">Emma Turner - April 5, 2023</div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="review-item text-center px-3">
                  <blockquote>Adipiscing dictum adipiscing arcu venenatis dolor adipiscing. Iaculis mauris tellus morbi nisl suspendisse egestas augue at. In tortor tristique quisque faucibus dui. Fusce lacus dignissim vel integer sagittis. Aliquam in cras eget et turpis. Auctor purus hendrerit sit.</blockquote>
                  <div class="author-detail mt-4">
                    <div class="rating d-flex justify-content-center">
                      <svg class="star-fill svg-yellow" width="15" height="15">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                      <svg class="star-fill svg-yellow" width="15" height="15">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                      <svg class="star-fill svg-yellow" width="15" height="15">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                      <svg class="star-fill svg-yellow" width="15" height="15">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                      <svg class="star-fill svg-yellow" width="15" height="15">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                    </div>
                    <div class="name fw-medium mt-3">Rachel Bryan - April 18, 2023</div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="review-item text-center px-3">
                  <blockquote>Amet non dolor pellentesque feugiat ac nec ac in. Dictumst turpis natoque eget suscipit arcu. Eu nunc quis consectetur iaculis sit et. Ipsum mattis eleifend arcu faucibus netus neque tellus amet. Accumsan enim cursus nulla tellus felis vitae.</blockquote>
                  <div class="author-detail mt-4">
                    <div class="rating d-flex justify-content-center">
                      <svg class="star-fill svg-yellow" width="15" height="15">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                      <svg class="star-fill svg-yellow" width="15" height="15">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                      <svg class="star-fill svg-yellow" width="15" height="15">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                      <svg class="star-fill svg-yellow" width="15" height="15">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                      <svg class="star-fill svg-yellow" width="15" height="15">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                    </div>
                    <div class="name fw-medium mt-3">Park C - May 22, 2023</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="swiper-pagination position-absolute"></div>
          </div>
        </div>
      </div>
    </section>
    <section id="features" class="scrollspy-section py-5 overflow-hidden">
      <div class="container-lg pt-5 mt-5">
        <div class="row align-items-center justify-content-between">
          <div class="col-lg-4 col-md-6" data-aos="fade-right" data-aos-delay="600">
            <div class="featured-box mb-5 d-flex">
              <div class="featured-number display-2 fw-bold text-gray-200 pe-4">01.</div>
              <div class="featured-box-content">
                <h3 class="fs-3 fw-medium mb-1 mt-0">Feature One</h3>
                <p>Lorem ipsum dolor sit amet consectetur. Molestie aenean enim massa magna vulputate.</p>
              </div>
            </div>
            <div class="featured-box mb-5 d-flex">
              <div class="featured-number display-2 fw-bold text-gray-200 pe-4">02.</div>
              <div class="featured-box-content">
                <h3 class="fs-3 fw-medium mb-1 mt-0">Feature Two</h3>
                <p>Nisl vel porttitor feugiat ornare mollis ac. Dignissim amet feugiat vivamus urna eu justo.</p>
              </div>
            </div>
            <div class="featured-box mb-5 d-flex">
              <div class="featured-number display-2 fw-bold text-gray-200 pe-4">03.</div>
              <div class="featured-box-content">
                <h3 class="fs-3 fw-medium mb-1 mt-0">Feature Three</h3>
                <p>Urna posuere egestas nunc et sit vel. Nam cursus interdum urna rutrum ac elit purus ut.</p>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-6" data-aos="fade-right" data-aos-delay="300">
            <div class="featured-box mb-5 d-flex">
              <div class="featured-number display-2 fw-bold text-gray-200 pe-4">04.</div>
              <div class="featured-box-content">
                <h3 class="fs-3 fw-medium mb-1 mt-0">Feature Four</h3>
                <p>Neque aliquam risus ut gravida commodo nec integer viverra. Id sit bibendum mi sodales.</p>
              </div>
            </div>
            <div class="featured-box mb-5 d-flex">
              <div class="featured-number display-2 fw-bold text-gray-200 pe-4">05.</div>
              <div class="featured-box-content">
                <h3 class="fs-3 fw-medium mb-1 mt-0">Feature Five</h3>
                <p>In nulla laoreet amet platea feugiat purus at consequat orci. Velit in enim ac eu massa.</p>
              </div>
            </div>
            <div class="featured-box mb-5 d-flex">
              <div class="featured-number display-2 fw-bold text-gray-200 pe-4">06.</div>
              <div class="featured-box-content">
                <h3 class="fs-3 fw-medium mb-1 mt-0">Feature Six</h3>
                <p>Velit sed sem scelerisque gravida ornare enim. Venenatis pharetra orci eu morbi et justo. </p>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-6" data-aos="fade-right">
            <div class="image-holder">
              <img src="images/single-image-1.png" alt="lander" class="img-fluid">
            </div>
          </div>
        </div>
      </div>
    </section>
    <section id="products" class="scrollspy-section py-5 my-5">
      <div class="container-lg">
        <div class="col-lg-6 col-md-8 mx-auto">
          <div class="display-header mt-0 text-center mb-5">
            <h2 class="display-3 fw-medium">Our Products</h2>
            <p class="fs-5">List your other great products here.</p>
          </div>
        </div>
        <div class="row">
          <div class="swiper product-swiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <div class="product-card">
                  <div class="image-holder">
                    <a href="#">
                      <img src="images/product-item-1.jpg" alt="product-item" class="img-fluid rounded-4">
                    </a>
                  </div>
                  <div class="card-detail mt-3">
                    <div class="rating">
                      <svg class="star-fill svg-yellow" width="15" height="15">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                      <svg class="star-fill svg-yellow" width="15" height="15">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                      <svg class="star-fill svg-yellow" width="15" height="15">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                      <svg class="star-fill svg-yellow" width="15" height="15">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                      <svg class="star-fill svg-yellow" width="15" height="15">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                    </div>
                    <h3 class="card-title fs-3 mb-0 mt-2">
                      <a href="single-product.html" class="text-dark fw-bold">Your First Item</a>
                    </h3>
                    <div class="price fs-2 mb-3">
                      <strong class="text-primary">$99.99 </strong>
                      <del class="text-dark-gray fs-3">$190</del>
                    </div>
                    <a href="#landing-pages" class="btn btn-lg btn-outline-gray rounded-pill text-uppercase mb-3">Order now</a>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="product-card">
                  <div class="image-holder">
                    <a href="#">
                      <img src="images/product-item-2.jpg" alt="product-item" class="img-fluid rounded-4">
                    </a>
                  </div>
                  <div class="card-detail mt-3">
                    <div class="rating">
                      <svg class="star-fill svg-yellow" width="15" height="15">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                      <svg class="star-fill svg-yellow" width="15" height="15">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                      <svg class="star-fill svg-yellow" width="15" height="15">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                      <svg class="star-fill svg-yellow" width="15" height="15">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                      <svg class="star-fill svg-yellow" width="15" height="15">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                    </div>
                    <h3 class="card-title fs-3 mb-0 mt-2">
                      <a href="single-product.html" class="text-dark fw-bold">Your Second Item</a>
                    </h3>
                    <div class="price fs-2 mb-3">
                      <strong class="text-primary">$99.99 </strong>
                      <del class="text-dark-gray fs-3">$190</del>
                    </div>
                    <a href="#landing-pages" class="btn btn-lg btn-outline-gray rounded-pill text-uppercase mb-3">Order now</a>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="product-card">
                  <div class="image-holder">
                    <a href="#">
                      <img src="images/product-item-3.jpg" alt="product-item" class="img-fluid rounded-4">
                    </a>
                  </div>
                  <div class="card-detail mt-3">
                    <div class="rating">
                      <svg class="star-fill svg-yellow" width="15" height="15">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                      <svg class="star-fill svg-yellow" width="15" height="15">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                      <svg class="star-fill svg-yellow" width="15" height="15">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                      <svg class="star-fill svg-yellow" width="15" height="15">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                      <svg class="star-fill svg-yellow" width="15" height="15">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                    </div>
                    <h3 class="card-title fs-3 mb-0 mt-2">
                      <a href="single-product.html" class="text-dark fw-bold">Your Third Item</a>
                    </h3>
                    <div class="price fs-2 mb-3">
                      <strong class="text-primary">$99.99 </strong>
                      <del class="text-dark-gray fs-3">$190</del>
                    </div>
                    <a href="#landing-pages" class="btn btn-lg btn-outline-gray rounded-pill text-uppercase mb-3">Order now</a>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="product-card">
                  <div class="image-holder">
                    <a href="#">
                      <img src="images/product-item-4.jpg" alt="product-item" class="img-fluid rounded-4">
                    </a>
                  </div>
                  <div class="card-detail mt-3">
                    <div class="rating">
                      <svg class="star-fill svg-yellow" width="15" height="15">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                      <svg class="star-fill svg-yellow" width="15" height="15">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                      <svg class="star-fill svg-yellow" width="15" height="15">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                      <svg class="star-fill svg-yellow" width="15" height="15">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                      <svg class="star-fill svg-yellow" width="15" height="15">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                    </div>
                    <h3 class="card-title fs-3 mb-0 mt-2">
                      <a href="single-product.html" class="text-dark fw-bold">Your Fourth Item</a>
                    </h3>
                    <div class="price fs-2 mb-3">
                      <strong class="text-primary">$99.99 </strong>
                      <del class="text-dark-gray fs-3">$190</del>
                    </div>
                    <a href="#landing-pages" class="btn btn-lg btn-outline-gray rounded-pill text-uppercase mb-3">Order now</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="swiper-pagination position-absolute"></div>
          </div>
        </div>
      </div>
    </section>
    <section id="subscribe">
      <div class="container-lg">
        <div class="row align-items-center justify-content-center">
          <div class="col-lg-6 col-md-8">
            <div class="image-holder">
              <img src="images/single-image-2.jpg" alt="subscribe" class="rounded-4 img-fluid">
            </div>
          </div>
          <div class="col-lg-6 col-md-8">
            <div class="subscribe-content">
              <div class="display-header">
                <h2 class="display-3 fw-medium">Subscribe To Our Newsletter</h2>
                <p class="fs-5">Subscribe to our newsletter for discounts and updates.</p>
              </div>
              <form id="form" class="position-relative mt-5 me-5 pe-5">
                <input type="text" name="email" placeholder="Your Email Address.." class="w-100 p-3 ps-5 fs-5 rounded-pill border-gray">
                <button type="button" class="btn btn-subscribe btn-lg btn-primary rounded-pill position-absolute">Subscribe</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section id="faqs" class="py-5 my-5">
      <div class="container-lg">
        <div class="row">
          <div class="display-header mt-0 text-center mb-5">
            <h2 class="display-3 fw-medium">Frequently Asked Questions</h2>
            <p class="fs-5">Frequently asked questions.</p>
          </div>
          <div class="col-lg-8 mx-auto">
            <div class="accordion" id="accordionExample">
              <div class="accordion-item border-top mb-3 rounded-3">
                <h2 class="accordion-header m-0" id="headingOne">
                  <button class="accordion-button fs-3 fw-medium text-capitalize text-dark bg-transparent px-4 shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Write your first question here ?</button>
                </h2>
                <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                  <div class="accordion-body pt-0">Mattis morbi ipsum nunc viverra id. Ullamcorper vitae elementum tristique pellentesque tellus viverra non sed malesuada. Et nec ipsum tincidunt ut felis. Elementum proin eget dignissim egestas quis velit maecenas magnis. Etiam faucibus et ultrices sit aliquet ultrices.</div>
                </div>
              </div>
              <div class="accordion-item border-top mb-3 rounded-3">
                <h2 class="accordion-header m-0" id="headingTwo">
                  <button class="accordion-button fs-3 fw-medium text-capitalize text-dark bg-transparent px-4 collapsed shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Write your second question here ?</button>
                </h2>
                <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                  <div class="accordion-body pt-0">Mattis morbi ipsum nunc viverra id. Ullamcorper vitae elementum tristique pellentesque tellus viverra non sed malesuada. Et nec ipsum tincidunt ut felis. Elementum proin eget dignissim egestas quis velit maecenas magnis. Etiam faucibus et ultrices sit aliquet ultrices.</div>
                </div>
              </div>
              <div class="accordion-item border-top mb-3 rounded-3">
                <h2 class="accordion-header m-0" id="headingThree">
                  <button class="accordion-button fs-3 fw-medium text-capitalize text-dark bg-transparent px-4 collapsed shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Write your third question here ?</button>
                </h2>
                <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                  <div class="accordion-body pt-0">Mattis morbi ipsum nunc viverra id. Ullamcorper vitae elementum tristique pellentesque tellus viverra non sed malesuada. Et nec ipsum tincidunt ut felis. Elementum proin eget dignissim egestas quis velit maecenas magnis. Etiam faucibus et ultrices sit aliquet ultrices.</div>
                </div>
              </div>
              <div class="accordion-item border-top mb-3 rounded-3">
                <h2 class="accordion-header m-0" id="headingFour">
                  <button class="accordion-button fs-3 fw-medium text-capitalize text-dark bg-transparent px-4 collapsed shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">Write your fourth question here ?</button>
                </h2>
                <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionExample">
                  <div class="accordion-body pt-0">Mattis morbi ipsum nunc viverra id. Ullamcorper vitae elementum tristique pellentesque tellus viverra non sed malesuada. Et nec ipsum tincidunt ut felis. Elementum proin eget dignissim egestas quis velit maecenas magnis. Etiam faucibus et ultrices sit aliquet ultrices.</div>
                </div>
              </div>
              <div class="accordion-item border-top mb-3 rounded-3">
                <h2 class="accordion-header m-0" id="headingFive">
                  <button class="accordion-button fs-3 fw-medium text-capitalize text-dark bg-transparent px-4 collapsed shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">Write your fifth question here ?</button>
                </h2>
                <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#accordionExample">
                  <div class="accordion-body pt-0">Mattis morbi ipsum nunc viverra id. Ullamcorper vitae elementum tristique pellentesque tellus viverra non sed malesuada. Et nec ipsum tincidunt ut felis. Elementum proin eget dignissim egestas quis velit maecenas magnis. Etiam faucibus et ultrices sit aliquet ultrices.</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section id="mobile-app" class="position-relative overflow-hidden">
      <div class="container-md">
        <div class="bg-pattern position-absolute d-flex justify-content-center">
          <img src="images/bg-pattern-1.jpg" alt="pattern">
        </div>
        <div class="row">
          <div class="col-lg-4 col-md-6">
            <div class="image-holder text-lg-end" data-aos="fade-right">
              <img src="images/single-image-3.png" alt="mobile" class="img-fluid">
            </div>
          </div>
          <div class="col-lg-7 col-md-6 d-flex align-items-center">
            <div class="app-info py-lg-6">
              <h2 class="display-3 fw-medium" data-aos="fade-left">Our Mobile App</h2>
              <p data-aos="fade-left" data-aos-delay="300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sagittis sed ptibus liberolectus nonet psryroin. Amet sed lorem posuere sit iaculis amet, ac urna. Adipiscing fames semper erat ac in suspendisse iaculis. Amet blandit tortor praesent ante vitae. A, enim pretiummi senectus magna. Sagittis sed ptibus liberolectus non et psryroin.</p>
              <div class="image-wrap" data-aos="fade-left" data-aos-delay="600">
                <img src="images/app-item-1.jpg" alt="app" class="img-fluid">
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section id="contact-us" class="py-5 my-5">
      <div class="container-lg">
        <div class="row">
          <div class="display-header mt-0 text-center mb-5">
            <h2 class="display-3 fw-medium">Contact Us</h2>
            <p class="fs-5">Contact us for more information.</p>
          </div>
          <div class="contact-content">
            <div class="row">
              <div class="col-lg-4 col-md-6 mb-3">
                <div class="icon-box d-flex flex-wrap align-items-center justify-content-center border rounded-4 p-5">
                  <div class="icon-box-icon me-3">
                    <svg class="call-chat svg-primary" width="80" height="80">
                      <use xlink:href="#call-chat" />
                    </svg>
                  </div>
                  <div class="icon-box-content">
                    <p class="mb-0">123 456 7891</p>
                    <p>123 456 7891</p>
                  </div>
                </div>
              </div>
              <div class="col-lg-4 col-md-6 mb-3">
                <div class="icon-box d-flex flex-wrap align-items-center justify-content-center border rounded-4 p-5">
                  <div class="icon-box-icon me-3">
                    <svg class="mail svg-primary" width="80" height="80">
                      <use xlink:href="#mail" />
                    </svg>
                  </div>
                  <div class="icon-box-content">
                    <p class="mb-0">youremail1@gmail.com</p>
                    <p>youremail1@gmail.com</p>
                  </div>
                </div>
              </div>
              <div class="col-lg-4 col-md-6 mb-3">
                <div class="icon-box d-flex flex-wrap align-items-center justify-content-center border rounded-4 p-5">
                  <div class="icon-box-icon me-3">
                    <svg class="location svg-primary" width="80" height="80">
                      <use xlink:href="#location" />
                    </svg>
                  </div>
                  <div class="icon-box-content">
                    <p class="mb-0">Phoenix, Arizona </p>
                    <p>947 Dogwood Road</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="row mt-5">
              <div class="col-lg-6 mb-4">
                <iframe src="https://www.amap.com/" sandbox="" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" class="rounded-4 w-100"></iframe>
              </div>
              <div class="col-lg-6">
                <form class="needs-validation" novalidate="">
                  <div class="row">
                    <div class="col-md-6 mb-3">
                      <input type="text" class="form-control rounded-3 p-3" id="firstName" placeholder="Full Name" value="" required="">
                      <div class="invalid-feedback"> Valid full name is required. </div>
                    </div>
                    <div class="col-md-6 mb-3">
                      <input type="email" class="form-control rounded-3 p-3" id="email" placeholder="Email">
                      <div class="invalid-feedback"> Please enter a valid email address for shipping updates. </div>
                    </div>
                    <div class="col-md-12 mb-3">
                      <input type="email" class="form-control rounded-3 p-3" id="subject" placeholder="Subject">
                      <div class="invalid-feedback"> Please put a some words here. </div>
                    </div>
                    <div class="col-12 mb-3">
                      <textarea type="message" class="form-control rounded-3 p-3" id="message" placeholder="Your message" style="height: 200px;"></textarea>
                      <div class="invalid-feedback"> Please put a some words here. </div>
                    </div>
                  </div>
                  <button class="btn btn-primary btn-lg mt-3 rounded-pill text-uppercase" type="submit">Send Message</button>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section id="company-services">
      <div class="container-lg">
        <div class="row">
          <div class="col-lg-4 col-md-6 col-sm-12 mb-4">
            <div class="icon-box text-center px-3 rounded-4">
              <div class="icon-box-icon mb-3">
                <svg class="balloon svg-primary" width="69" height="69">
                  <use xlink:href="#balloon"></use>
                </svg>
              </div>
              <div class="icon-box-content ps-3">
                <h4 class="fs-3 fw-medium text-capitalize">100% high quality product</h4>
                <p>We have option of pick up in store</p>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-6 col-sm-12 mb-4">
            <div class="icon-box text-center px-3 rounded-4">
              <div class="icon-box-icon mb-3">
                <svg class="bag-heart svg-primary" width="69" height="69">
                  <use xlink:href="#bag-heart"></use>
                </svg>
              </div>
              <div class="icon-box-content ps-3">
                <h4 class="fs-3 fw-medium text-capitalize">Free shipping charge</h4>
                <p>Inside City delivery within 5 days</p>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-6 col-sm-12 mb-4">
            <div class="icon-box text-center px-3 rounded-4">
              <div class="icon-box-icon mb-3">
                <svg class="handiplast svg-primary" width="69" height="69">
                  <use xlink:href="#handiplast"></use>
                </svg>
              </div>
              <div class="icon-box-content ps-3">
                <h4 class="fs-3 fw-medium text-capitalize">Money back guarantee</h4>
                <p>We will take return in some cases</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section id="brand-collection" class="py-lg-7">
      <div class="container">
        <div class="row justify-content-between text-center">
          <div class="col my-3">
            <img src="images/brand-item-1.png" alt="brand">
          </div>
          <div class="col my-3">
            <img src="images/brand-item-2.png" alt="brand">
          </div>
          <div class="col my-3">
            <img src="images/brand-item-3.png" alt="brand">
          </div>
          <div class="col my-3">
            <img src="images/brand-item-4.png" alt="brand">
          </div>
          <div class="col my-3">
            <img src="images/brand-item-5.png" alt="brand">
          </div>
        </div>
      </div>
    </section>
    <section id="instagram-wrap" class="bg-overlay py-lg-7 pt-lg-0">
      <div class="container-fluid">
        <div class="display-header text-center mb-5">
          <h2 class="display-3 fw-medium">Instagram #YourBrand</h2>
        </div>
        <div class="row">
          <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
            <div class="image-holder position-relative">
              <a href="#">
                <img src="images/insta-item-1.jpg" alt="instagram" class="img-fluid rounded-3">
                <div class="insta-item overlay-item position-absolute d-flex align-items-center justify-content-center">
                  <svg class="instagram svg-white" width="45" height="45">
                    <use xlink:href="#instagram"></use>
                  </svg>
                </div>
              </a>
            </div>
          </div>
          <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
            <div class="image-holder position-relative">
              <a href="#">
                <img src="images/insta-item-2.jpg" alt="instagram" class="img-fluid rounded-3">
                <div class="insta-item overlay-item position-absolute d-flex align-items-center justify-content-center">
                  <svg class="instagram svg-white" width="45" height="45">
                    <use xlink:href="#instagram"></use>
                  </svg>
                </div>
              </a>
            </div>
          </div>
          <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
            <div class="image-holder position-relative">
              <a href="#">
                <img src="images/insta-item-3.jpg" alt="instagram" class="img-fluid rounded-3">
                <div class="insta-item overlay-item position-absolute d-flex align-items-center justify-content-center">
                  <svg class="instagram svg-white" width="45" height="45">
                    <use xlink:href="#instagram"></use>
                  </svg>
                </div>
              </a>
            </div>
          </div>
          <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
            <div class="image-holder position-relative">
              <a href="#">
                <img src="images/insta-item-4.jpg" alt="instagram" class="img-fluid rounded-3">
                <div class="insta-item overlay-item position-absolute d-flex align-items-center justify-content-center">
                  <svg class="instagram svg-white" width="45" height="45">
                    <use xlink:href="#instagram"></use>
                  </svg>
                </div>
              </a>
            </div>
          </div>
          <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
            <div class="image-holder position-relative">
              <a href="#">
                <img src="images/insta-item-5.jpg" alt="instagram" class="img-fluid rounded-3">
                <div class="insta-item overlay-item position-absolute d-flex align-items-center justify-content-center">
                  <svg class="instagram svg-white" width="45" height="45">
                    <use xlink:href="#instagram"></use>
                  </svg>
                </div>
              </a>
            </div>
          </div>
          <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
            <div class="image-holder position-relative">
              <a href="#">
                <img src="images/insta-item-6.jpg" alt="instagram" class="img-fluid rounded-3">
                <div class="insta-item overlay-item position-absolute d-flex align-items-center justify-content-center">
                  <svg class="instagram svg-white" width="45" height="45">
                    <use xlink:href="#instagram"></use>
                  </svg>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
    <footer id="footer">
      <div class="container-lg">
        <div class="row">
          <div class="col-lg-12">
            <div class="footer-menu text-center">
              <img src="images/main-logo.png" alt="brand name" class="pb-5">
              <p>Lander multi-purpose product landing page template.</p>
              <ul class="social-links list-unstyled d-flex justify-content-center">
                <li class="border rounded-3 me-3">
                  <a href="#" class="d-flex p-3">
                    <svg class="facebook svg-gray" width="25" height="25">
                      <use xlink:href="#facebook"></use>
                    </svg>
                  </a>
                </li>
                <li class="border rounded-3 me-3">
                  <a href="#" class="d-flex p-3">
                    <svg class="twitter svg-gray" width="25" height="25">
                      <use xlink:href="#twitter"></use>
                    </svg>
                  </a>
                </li>
                <li class="border rounded-3 me-3">
                  <a href="#" class="d-flex p-3">
                    <svg class="instagram svg-gray" width="25" height="25">
                      <use xlink:href="#instagram"></use>
                    </svg>
                  </a>
                </li>
                <li class="border rounded-3 me-3">
                  <a href="#" class="d-flex p-3">
                    <svg class="linkedin svg-gray" width="25" height="25">
                      <use xlink:href="#linkedin"></use>
                    </svg>
                  </a>
                </li>
                <li class="border rounded-3">
                  <a href="#" class="d-flex p-3">
                    <svg class="youtube svg-gray" width="25" height="25">
                      <use xlink:href="#youtube"></use>
                    </svg>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </footer>
    <div class="footer-bottom py-3 text-center">
      <div class="container-lg">
        <p class="m-0">© Lander.
        </p>
      </div>
    </div>
    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.2/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/10.3.1/swiper-bundle.min.js"></script>
    <script src="js/plugins.js"></script>
    <script src="js/script.js"></script>
  </body>
</html>