<section>
  <div class="container">
    <div class="card row no-gutters flex-column flex-md-row flex-md-row-reverse">
      <div class="flex-column col-md-6">
        <img class="card-img flex-grow-1 h-100" src="assets/img/lending-3.jpg"
        alt="Build a beautiful performant website with Insight" />
      </div>
      <div class="card-body d-flex align-items-center col-md-6 p-lg-5 p-md-4 p-3">
        <div>
          <span class="h2 d-block">Build a beautiful performant website with Insight</span>
          <p class="lead">Speed up your workflow with tons of pre-made content blocks. Assembling
            your site is easier than ever before.</p> <a class="lead" href="#">Learn More</a>

        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row no-gutters">
      <div class="col text-image-2">
        <img class="join-bottom" src="assets/img/wide-large-3.jpg" alt="Image">
        <div class="bg-white position-lg-absolute join-top col-lg-6 px-3 py-3 px-md-5 py-md-4">
          <span class="h4 d-block">Build a beautiful, performant site with Insight</span>
          <p class="lead">Speed up your workflow with tons of pre-made content blocks. Assembling
            your site is easier than ever before.</p> <a href="#" class="lead">Learn More</a>

        </div>
      </div>
    </div>
  </div>
</section>

<section class="row no-gutters p-0">
  <div class="col-md-5 col-lg-6 d-flex flex-column order-md-2">
    <img src="assets/img/header-3.jpg" alt="Image" class="flex-grow-1">
  </div>
  <div class="col-md-7 col-lg-6 d-flex bg-white order-md-1 align-items-center">
    <div class="row no-gutters justify-content-center py-md-4">
      <div class="col-md-10 col-lg-9 col-xl-8 p-3 py-md-5">
        <span class="h2 d-block">Building an attractive site with Bootstrap has never been easier.</span>
        <p
        class="lead">Speed up your workflow with tons of pre-made content blocks. Assembling
          your site is easier than ever before.</p> <a href="#" class="lead">Learn More</a>

          <hr>
          <div class="d-flex">
            <img src="assets/img/avatar-female-2.jpg" alt="Avatar" class="avatar">
            <div class="ml-3">
              <p class="mb-0">&ldquo;The customer service team were prompt, friendly and above all extremely
                helpful.&rdquo;</p>
            </div>
          </div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row justify-content-around align-items-center">
      <div class="col-sm-6 col-lg-4 mb-3 mb-sm-0">
        <img class="rounded" src="assets/img/card-image-background-2.jpg" alt="Image">
      </div>
      <div class="col-sm-6 col-lg-5">
        <span class="h5">Build it with Insight</span>
        <span class="h2 d-block mt-3 mt-md-4">Speed up your workflow with tons of pre-made content blocks. Assembling
          your site is easier than ever before.</span>
      </div>
    </div>
  </div>
</section>

<section class="row no-gutters p-0">
  <div class="col-md-5 col-lg-6 d-flex flex-column order-md-2">
    <img src="assets/img/header-1.jpg" alt="Image" class="flex-grow-1">
  </div>
  <div class="col-md-7 col-lg-6 d-flex bg-white order-md-1 align-items-center">
    <div class="row no-gutters justify-content-center py-md-4">
      <div class="col-md-10 col-lg-9 col-xl-8 p-3 py-md-5">
        <span class="h5">Build it with Insight</span>
        <span class="h2 d-block mt-3 mt-md-4">Speed up your workflow with tons of pre-made content blocks. Assembling
          your site is easier than ever before.</span>
      </div>
    </div>
  </div>
</section>

<section class="p-0">
  <img src="assets/img/wide-large-1.jpg" alt="Image" class="bg-image position-md-absolute">
  <div class="container spacer-y-5">
    <div class="row">
      <div class="col-md-6 col-lg-5">
        <span class="h2 text-white d-block">Start building beautiful websites with modular building blocks.</span>
        <p
        class="lead text-white">Speed up your workflow with tons of pre-made content blocks. Assembling
          your site is easier than ever before.</p> <a href="#" class="lead text-white">Get Started</a>

      </div>
    </div>
  </div>
</section>

<section class="p-0 bg-white">
  <img src="assets/img/header-inner-1.jpg" alt="Image" class="bg-image position-md-absolute">
  <div class="container-fluid p-0">
    <div class="row no-gutters">
      <div class="col-md-7 col-lg-6 col-xl-5">
        <div class="card p-0 p-md-3 m-3">
          <div class="card-body p-0 p-md-4">
            <span class="h2 d-block">Build a beautiful, performant site with Insight</span>
            <p class="lead">Speed up your workflow with tons of pre-made content blocks. Assembling
              your site is easier than ever before.</p> <a href="#" class="btn btn-primary btn-lg">Learn More</a>

          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="bg-white spacer-y-1">
  <div class="container">
    <div class="row text-center">
      <div class="col">
        <span>&#x1F389; Use this handy bar to announce new features and call your users
          to <a href="#">perform an action</a>.</span>
      </div>
    </div>
  </div>
</section>

<section class="p-0 bg-dark">
  <img src="assets/img/header-1.jpg" alt="Image" class="bg-image position-md-absolute opacity-80">
  <div class="container py-4 height-md-60">
    <div class="row">
      <div class="col-md-7 col-lg-6 spacer-y-3">
        <h1 class="display-4 text-white">Build a beautiful, performant site with Insight</h1>
        <p class="lead text-white">Speed up your workflow with tons of pre-made content blocks. Assembling
          your site is easier than ever before.</p> <a href="#" class="btn btn-lg btn-primary">Learn More</a>

      </div>
    </div>
  </div>
</section>

<section class="p-0 bg-dark">
  <img src="assets/img/header-2.jpg" alt="Image" class="bg-image position-md-absolute">
  <div class="container-fluid py-4 height-md-60">
    <div class="row justify-content-between align-items-center spacer-y-4">
      <div class="col-md-7 col-lg-5 pl-md-4 pl-lg-5">
        <h1 class="display-4 text-white">Build a beautiful, performant site with Insight</h1>
        <p class="lead mb-0 text-white">Speed up your workflow with tons of pre-made content blocks. Assembling
          your site is easier than ever before.</p>
      </div>
      <div class="col-lg-4 col-md-5 mt-3 mt-md-0">
        <div class="list-group mb-0 mx-xl-3"> <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
        <div class="d-flex align-items-center">
            <img src="assets/img/icons/icon01.svg" alt="assets/img/icons/icon01.svg" class="d-block mr-3 icon">
            <span class="mb-0 h6 mb-0">Media Hub</span>
        </div>
        <i class="material-icons d-block">keyboard_arrow_right</i>
    </a>
 <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
        <div class="d-flex align-items-center">
            <img src="assets/img/icons/icon02.svg" alt="assets/img/icons/icon02.svg" class="d-block mr-3 icon">
            <span class="mb-0 h6 mb-0">Our Commitment</span>
        </div>
        <i class="material-icons d-block">keyboard_arrow_right</i>
    </a>
 <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
        <div class="d-flex align-items-center">
            <img src="assets/img/icons/icon03.svg" alt="assets/img/icons/icon03.svg" class="d-block mr-3 icon">
            <span class="mb-0 h6 mb-0">Partner Program</span>
        </div>
        <i class="material-icons d-block">keyboard_arrow_right</i>
    </a>
 <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
        <div class="d-flex align-items-center">
            <img src="assets/img/icons/icon08.svg" alt="assets/img/icons/icon08.svg" class="d-block mr-3 icon">
            <span class="mb-0 h6 mb-0">Sustainability</span>
        </div>
        <i class="material-icons d-block">keyboard_arrow_right</i>
    </a>

        </div>
      </div>
    </div>
  </div>
</section>

<section class="header-3 p-0">
  <img src="assets/img/header-8.jpg" alt="Image" class="bg-image">
  <div class="container">
    <div class="row no-gutters justify-content-center justify-content-md-start">
      <div class="col-10 col-md-8 col-lg-7 col-xl-6 bg-white spacer-y-4 height-60 height-md-70">
        <div class="px-4">
          <h1 class="display-4 d-block">Build a beautiful, performant site with Insight</h1>
          <p class="lead">Speed up your workflow with tons of pre-made content blocks. Assembling
            your site is easier than ever before.</p>
          <form class="d-flex">
            <div class="input-group input-group-lg mr-2">
              <div class="input-group-prepend">
                <span class="input-group-text"> <i class="material-icons">search</i>

                </span>
              </div>
              <input type="text" class="form-control" placeholder="Search" aria-label="Search">
            </div>
            <button class="btn btn-primary btn-lg" type="submit">Go</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="row no-gutters p-0 bg-white">
  <div class="col-md-5 col-xl-6 d-flex flex-column order-md-2">
    <img src="assets/img/header-4.jpg" alt="Image" class="flex-grow-1">
  </div>
  <div class="col-md-7 col-xl-6 order-md-1 height-60 height-md-70">
    <div class="row w-100 no-gutters justify-content-center py-4">
      <div class="col-md-10 col-lg-9 col-xl-8 p-3">
        <h1 class="display-4 display-4">Build a stylish website with ease.</h1>
        <p class="lead">Speed up your workflow with tons of pre-made content blocks. Assembling
          your site is easier than ever before.</p> <a href="#" class="btn btn-lg btn-primary">Learn More</a>

      </div>
    </div>
  </div>
</section>

<section class="row no-gutters p-0 bg-white">
  <div class="col-md-3 col-lg-4 col-xl-5 d-flex flex-column order-md-2">
    <img src="assets/img/header-5.jpg" alt="Image" class="flex-grow-1">
  </div>
  <div class="col-md-9 col-lg-8 col-xl-7 order-md-1 height-md-60">
    <div class="row no-gutters justify-content-center w-100 py-3 py-md-4">
      <div class="col-md-11 col-lg-10 p-3">
        <h1 class="display-4">Build a beautiful, performant site with Insight</h1>
        <p class="lead mb-3">Speed up your workflow with tons of pre-made content blocks. Assembling
          your site is easier than ever before.</p>
        <form class="d-sm-flex align-items-center">
          <span class="mr-1 d-none d-sm-block">I'm searching for</span>
          <select class="custom-select form-control-lg w-auto mr-1"
          name="custom-select-1">
            <option value="1" selected>Personal</option>
            <option value="2">Business</option>
            <option value="3">Enterprise</option>
          </select>
          <span class="mr-1">in</span>
          <select class="custom-select form-control-lg w-auto mr-1" name="custom-select-2">
            <option value="1" selected>VIC</option>
            <option value="2">QLD</option>
            <option value="3">NSW</option>
            <option value="4">NT</option>
            <option value="5">SA</option>
            <option value="6">ACT</option>
            <option value="7">TAS</option>
            <option value="8">WA</option>
          </select>
          <button class="btn btn-lg btn-primary mt-2 mt-sm-0" type="submit">Start Now</button>
        </form>
      </div>
    </div>
  </div>
</section>

<section class="p-0 bg-dark">
  <img src="assets/img/header-1.jpg" alt="Image" class="bg-image position-md-absolute">
  <div class="container">
    <div class="row height-md-60">
      <div class="col-md-8 col-lg-6">
        <div class="card p-0 p-md-3 my-3">
          <div class="card-body py-md-4 py-lg-5 px-md-4">
            <h1 class="display-4">Build a beautiful, performant site with Insight</h1>
            <p class="lead">Speed up your workflow with tons of pre-made content blocks. Assembling
              your site is easier than ever before.</p> <a href="#" class="btn btn-primary btn-lg">Learn More</a>

          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="bg-white">
  <img src="assets/img/header-inner-1.jpg" alt="Image" class="bg-image">
  <div class="container height-md-30">
    <div class="row">
      <div class="col-md-8 col-lg-7 col-xl-6">
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb p-0 bg-transparent">
            <li class="breadcrumb-item"> <a href="index.html">Overview</a>

            </li>
            <li class="breadcrumb-item"> <a href="pages-inner.html">Inner Pages</a>

            </li>
            <li class="breadcrumb-item active" aria-current="page">Current Page</li>
          </ol>
        </nav>
        <h1 class="display-4">Page Title</h1>
        <p class="lead mb-0">Include a brief description of your page here to provide the user with
          a little more context</p>
      </div>
    </div>
  </div>
</section>

<section class="controls-inside p-0 controls-light bg-dark" data-flickity='{ "cellAlign": "left", "contain": true, "imagesLoaded": true, "wrapAround": true }'>
  <div class="height-70 carousel-cell py-3 py-md-4 height-40">
    <img class="bg-image opacity-50" src="assets/img/wide-large-3.jpg" alt="Interview with Melbourne startup Insight">
    <div class="container">
      <div class="row">
        <div class="col-12 col-md-6">
          <h1 class="display-4 text-white">Interview with Melbourne startup Insight</h1>
          <p class="lead text-white">Launching an idea successfuly is always a matter of teamwork.</p> <a href="#"
          class="btn btn-primary btn-lg">Read story</a>

        </div>
      </div>
    </div>
  </div>
  <div class="height-70 carousel-cell py-3 py-md-4 height-40">
    <img class="bg-image opacity-50" src="assets/img/wide-large-1.jpg" alt="Building a sustainable business">
    <div class="container">
      <div class="row">
        <div class="col-12 col-md-6">
          <h1 class="display-4 text-white">Building a sustainable business</h1>
          <p class="lead text-white">The path to success is never easy, take it from restauranteur Rob Hanlan.</p>
          <a
          href="#" class="btn btn-primary btn-lg">Read story</a>
        </div>
      </div>
    </div>
  </div>
  <div class="height-70 carousel-cell py-3 py-md-4 height-40">
    <img class="bg-image opacity-50" src="assets/img/wide-large-2.jpg" alt="Transitioning from hobby to career">
    <div class="container">
      <div class="row">
        <div class="col-12 col-md-6">
          <h1 class="display-4 text-white">Transitioning from hobby to career</h1>
          <p class="lead text-white">Danielle Yates shares wisdom for budding business upstarts.</p> <a href="#"
          class="btn btn-primary btn-lg">Read story</a>

        </div>
      </div>
    </div>
  </div>
</section>

<section class="height-70 bg-gradient">
  <img src="assets/img/header-12.jpg" alt="Image" class="bg-image opacity-60">
  <div class="container">
    <div class="row text-center">
      <div class="col">
        <h1 class="display-2 font-alt-1 text-white">Build it your way.</h1>
        <span class="lead d-block mb-3 text-white">Build beautiful, diverse websites with Insight&apos;s modular components.</span>
        <a
        href="#" class="btn btn-lg btn-primary">Get Started</a>
      </div>
    </div>
  </div>
</section>

<section class="bg-white pb-0 pt-3">
  <div class="container">
    <section class="bg-white pb-0">
      <div class="container">
        <div class="row justify-content-center align-items-center">
          <div class="col-lg-5 mb-3 mb-sm-0">
            <h1 class="display-4">Build beautiful, modular websites.</h1>
            <p class="lead">Insight includes everything you'll need to create beautiful websites.</p>
            <a
            href="" class="btn btn-lg btn-primary">Get Started</a>
          </div>
          <div class="col-lg-7">
            <img src="assets/img/group-isolated-1.jpg" alt="Image" class="pt-md-5 pt-lg-0">
          </div>
        </div>
      </div>
    </section>
  </div>
</section>

<section class="pt-md-3 pb-md-0">
  <div class="container">
    <div class="row justify-content-between align-items-center">
      <div class="col-lg-8 col-md-9">
        <h1 class="display-3 font-alt-1">Get started now.</h1>
        <p class="lead">Insight includes everything you'll need to build a beautiful website.</p>
        <form
        class="d-flex">
          <div class="input-group input-group-lg mr-2">
            <div class="input-group-prepend">
              <span class="input-group-text"> <i class="material-icons">search</i>

              </span>
            </div>
            <input type="text" class="form-control" placeholder="Search" aria-label="Search">
          </div>
          <button class="btn btn-primary btn-lg" type="submit">Go</button>
          </form>
          <ul class="list-unstyled d-flex flex-wrap mt-2 mb-0">
            <li class="mr-2 mb-2 mb-lg-0"> <a href="#" class="btn btn-sm btn-light">Travel Protection</a>
            </li>
            <li class="mr-2 mb-2 mb-lg-0"> <a href="#" class="btn btn-sm btn-light">Home Insurance</a>
            </li>
            <li class="mr-2 mb-2 mb-lg-0"> <a href="#" class="btn btn-sm btn-light">Pet Insurance</a>
            </li>
            <li class="mr-2 mb-2 mb-lg-0"> <a href="#" class="btn btn-sm btn-light">Natural Disaster Cover</a>
            </li>
          </ul>
      </div>
      <div class="col-md-3">
        <img src="assets/img/male-isolated-2.jpg" alt="Image" class="pt-md-4 pt-lg-0 d-none d-md-block">
      </div>
    </div>
  </div>
</section>

<section class="bg-white">
  <div class="container">
    <section class="bg-white">
      <div class="container">
        <div class="row justify-content-center text-center">
          <div class="col-lg-10 col-xl-9">
            <nav aria-label="breadcrumb">
              <ol class="breadcrumb p-0 bg-transparent justify-content-center">
                <li class="breadcrumb-item"> <a href="index.html">Overview</a>

                </li>
                <li class="breadcrumb-item active" aria-current="page">Landing Pages</li>
              </ol>
            </nav>
            <h1 class="mb-3 display-3 font-alt-1">Make an impression.</h1>
            <p class="lead mb-0">Put your business's best foot forward with these stylish landing page
              variations, all built with Insight's modular content blocks.</p>
          </div>
        </div>
      </div>
    </section>
  </div>
</section>

<section class="bg-dark height-70 overlay-dark overlay-top">
  <img src="assets/img/header-13.jpg" alt="Background Image" class="bg-image bg-image opacity-20">
  <div class="container">
    <div class="row align-items-center justify-content-between">
      <div class="col-lg-5 mb-3 mb-lg-0">
        <h1 class="display-3 text-white font-alt-1">Block-based &amp; Beautiful.</h1>
        <p class="lead text-white">Insight includes everything you'll need to build beautiful, Bootstrap-based
          websites.</p> <a href="" class="btn btn-lg btn-primary">Get Started</a>

      </div>
      <div class="col-lg-7">
        <div class="video-cover rounded shadow-lg">
          <img alt="Image" src="assets/img/video-1.jpg" class="bg-image" />
          <div class="video-play-icon"></div>
          <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" data-src="https://www.youtube.com/embed/DYaq2sWTWAA?rel=0&amp;showinfo=0&amp;autoplay=1"
            allowfullscreen allow="autoplay; encrypted-media"></iframe>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="bg-gradient-3 height-lg-60">
  <div class="container">
    <div class="row justify-content-around align-items-center">
      <div class="col-md-6 mb-3 mb-md-0">
        <h1 class="font-alt-1 text-white display-3">Data-licious mobile plans!</h1>
        <p class="lead text-white">For use in Australia. Must be over 18. Calls and text to standard Australian
          landline and mobile numbers.</p> <a href="#" class="btn btn-lg btn-primary">Explore Mobile Plans</a>

      </div>
      <div class="col-md-5 col-xl-4">
        <div class="card card-body shadow flex-row align-items-center">
          <div class="icon-rounded bg-success mr-3 flex-shrink-0"> <i class="material-icons text-white">check</i>

          </div>
          <span class="h2 mb-0">30GB Data*</span>
        </div>
        <div class="card card-body shadow flex-row align-items-center">
          <div class="icon-rounded bg-success mr-3 flex-shrink-0"> <i class="material-icons text-white">check</i>

          </div>
          <span class="h2 mb-0">$15/mth</span>
        </div>
        <div class="card card-body shadow flex-row align-items-center">
          <div class="icon-rounded bg-success mr-3 flex-shrink-0"> <i class="material-icons text-white">check</i>

          </div>
          <span class="h5 mb-0">Unlimited calls and text in Australia</span>
        </div>
        <div class="text-center">
          <small class="text-white">* Terms &amp; Conditions apply. View our <a class="text-white" href="#">Fair Use Policy</a>
          </small>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="height-80 bg-gradient-2">
  <img src="assets/img/header-7.jpg" alt="Image" class="bg-image opacity-20">
  <div class="container">
    <div class="row text-center">
      <div class="col"> <a class="video-play-icon video-play-icon-lg" data-fancybox href="https://www.youtube.com/watch?v=c8aFcHFu8QM"></a>

        <h1
        class="display-3 text-white">Build beautiful, modular sites.</h1>
          <p class="lead text-white">Insight includes everything you'll need to build beautiful, Bootstrap-based
            websites.</p> <a href="#" class="btn btn-primary btn-lg">Get Started</a>

      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row">
      <div class="col-lg-6 d-flex">
        <div class="card justify-content-center p-lg-4 p-3">
          <div class="card-body py-3 flex-grow-0">
            <span class="d-block h2">&ldquo;Our aim is to help and inspire our customers to achieve their goals&rdquo;</span>
            <p
            class="lead">Our success is based on the success of our customers and our communities.</p>
              <a
              class="lead" href="#">Start Your Journey</a>
          </div>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="row">
          <div class="col-6"> <a href="#" class="card hover-effect">
  <img class="card-img-top" src="assets/img/card-image-small-1.jpg" alt="Startup" />
  <div class="card-body">
    <div class="d-flex justify-content-between align-items-center">
      <h6 class="mb-0">Startup</h6>
      <i class="material-icons text-dark">keyboard_arrow_right</i>
    </div>
  </div>
</a>

          </div>
          <div class="col-6"> <a href="#" class="card hover-effect">
  <img class="card-img-top" src="assets/img/card-image-small-2.jpg" alt="Small Business" />
  <div class="card-body">
    <div class="d-flex justify-content-between align-items-center">
      <h6 class="mb-0">Small Business</h6>
      <i class="material-icons text-dark">keyboard_arrow_right</i>
    </div>
  </div>
</a>

          </div>
          <div class="col-6"> <a href="#" class="card hover-effect">
  <img class="card-img-top" src="assets/img/card-image-small-3.jpg" alt="Multinational" />
  <div class="card-body">
    <div class="d-flex justify-content-between align-items-center">
      <h6 class="mb-0">Multinational</h6>
      <i class="material-icons text-dark">keyboard_arrow_right</i>
    </div>
  </div>
</a>

          </div>
          <div class="col-6"> <a href="#" class="card hover-effect">
  <img class="card-img-top" src="assets/img/card-image-small-4.jpg" alt="Non-profit" />
  <div class="card-body">
    <div class="d-flex justify-content-between align-items-center">
      <h6 class="mb-0">Non-profit</h6>
      <i class="material-icons text-dark">keyboard_arrow_right</i>
    </div>
  </div>
</a>

          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row">
      <div class="col-lg-8 d-flex">
<a href="" class="card bg-dark hover-effect justify-content-end flex-fill">
  <img class="card-img flex-grow-1" src="assets/img/header-8.jpg" alt="A guide to building your online presence" />
  <div class="card-img-overlay bg-dark w-100">
    <span class="mb-0 h4 text-white">A guide to building your online presence</span>
  </div>
</a> 
      </div>
      <div class="col-lg-4 d-flex">
        <div class="card">
          <div class="card-body">
            <div class="mb-3 mt-2">
              <span class="h6">Start the Journey</span>
            </div>
            <div class="mb-sm-5">
              <span class="h2">Work directly with our dedicated account team.</span>
            </div>
          </div>
          <div class="card-footer">
            <div class="d-flex align-items-center justify-content-between"> <a href="#">More Information</a>
 <i class="material-icons text-dark">keyboard_arrow_right</i>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row">
      <div class="col-12 col-md d-flex">
        <div class="card">
          <img class="card-img-top" src="assets/img/card-image-small-1.jpg" alt="Modular Structure"
          />
          <div class="card-body py-3">
            <h5>Modular Structure</h5>
            <div class="mb-4">
              <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
                praesentium voluptatum deleniti.</p>
            </div>
          </div>
          <div class="card-footer">
            <div class="d-flex align-items-center justify-content-between"> <a href="#">Get Started</a>
 <i class="material-icons text-dark">keyboard_arrow_right</i>

            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-md d-flex">
        <div class="card">
          <img class="card-img-top" src="assets/img/card-image-small-2.jpg" alt="Modern Workflow"
          />
          <div class="card-body py-3">
            <h5>Modern Workflow</h5>
            <div class="mb-4">
              <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit
                quo minus.</p>
            </div>
          </div>
          <div class="card-footer">
            <div class="d-flex align-items-center justify-content-between"> <a href="#">Learn More</a>
 <i class="material-icons text-dark">keyboard_arrow_right</i>

            </div>
          </div>
        </div>
      </div>
      <div class="col-md-3 d-md-flex">
        <div class="row flex-md-fill">
          <div class="col-6 col-md-12 d-flex">
<a href="#" class="card text-center flex-fill hover-effect">
    <div class="card-body d-flex flex-column align-items-center justify-content-center py-2">
        <img src="assets/img/icons/icon01.svg"  class="icon mt-2 mb-3 icon-lg" alt="assets/img/icons/icon01.svg">
        <span class="h6 mb-2">Small Business</span>
    </div>
</a> 
          </div>
          <div class="col-6 col-md-12 d-flex">
<a href="#" class="card text-center flex-fill bg-dark hover-effect">
    <div class="card-body d-flex flex-column align-items-center justify-content-center py-2">
        <img src="assets/img/icons/icon71.svg"  class="icon mt-2 mb-3 icon-lg text-white" alt="assets/img/icons/icon71.svg">
        <span class="h6 mb-2 text-white">Startup</span>
    </div>
</a> 
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-xl-10">
        <div class="row">
          <div class="col-lg-7">
            <div class="card justify-content-center p-lg-4 p-3 mb-lg-0">
              <div class="card-body py-3 flex-grow-0">
                <span class="d-block h6">Our best rate</span>
                <span class="d-block display-3 mb-2 text-dark">3.96%pa</span>
                <p class="lead">Our success is based on providing responsible loan options.</p> <a class="lead"
                href="#">Calculate Repayments</a>

              </div>
            </div>
          </div>
          <div class="col-lg-5 d-flex">
            <div class="list-group d-flex flex-fill"> <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center flex-fill">
        <div class="d-flex align-items-center">
            <img src="assets/img/icons/icon01.svg" alt="assets/img/icons/icon01.svg" class="d-block mr-3 icon">
            <span class="mb-0 h6 mb-0">Media Hub</span>
        </div>
        <i class="material-icons d-block">keyboard_arrow_right</i>
    </a>
 <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center flex-fill">
        <div class="d-flex align-items-center">
            <img src="assets/img/icons/icon02.svg" alt="assets/img/icons/icon02.svg" class="d-block mr-3 icon">
            <span class="mb-0 h6 mb-0">Our Commitment</span>
        </div>
        <i class="material-icons d-block">keyboard_arrow_right</i>
    </a>
 <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center flex-fill">
        <div class="d-flex align-items-center">
            <img src="assets/img/icons/icon03.svg" alt="assets/img/icons/icon03.svg" class="d-block mr-3 icon">
            <span class="mb-0 h6 mb-0">Partner Program</span>
        </div>
        <i class="material-icons d-block">keyboard_arrow_right</i>
    </a>
 <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center flex-fill">
        <div class="d-flex align-items-center">
            <img src="assets/img/icons/icon08.svg" alt="assets/img/icons/icon08.svg" class="d-block mr-3 icon">
            <span class="mb-0 h6 mb-0">Sustainability</span>
        </div>
        <i class="material-icons d-block">keyboard_arrow_right</i>
    </a>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row">
      <div class="col align-self-center mb-3 mb-lg-0">
        <div class="pr-lg-4">
          <span class="h2 d-block">Dedicated to high quality customer service.</span>
          <p class="lead mb-0">Speed up your workflow with tons of pre-made content blocks. Assembling
            your site is easier than ever before.</p>
        </div>
      </div>
      <div class="col-lg-7">
        <div class="row">
          <div class="col-md-7 d-lg-flex">
<a href="#" class="card hover-effect">
  <img class="card-img flex-lg-grow-1" src="assets/img/card-image-background-3.jpg" alt="Small Business" />
  <div class="card-img-overlay">
    <span class="mb-0 h5 text-white">Small Business</span>
  </div>
</a> 
          </div>
          <div class="col-md-5 d-md-flex">
            <div class="row flex-md-fill">
              <div class="col-6 col-md-12 d-flex">
<a href="#" class="card text-center hover-effect flex-fill">
    <div class="card-body d-flex flex-column align-items-center justify-content-center py-2">
        <img src="assets/img/icons/icon01.svg"  class="icon mt-2 mb-3 icon-lg" alt="assets/img/icons/icon01.svg">
        <span class="h6 mb-2 text-dark">Small Business</span>
    </div>
</a> 
              </div>
              <div class="col-6 col-md-12 d-flex">
<a href="#" class="card text-center flex-fill bg-dark hover-effect">
    <div class="card-body d-flex flex-column align-items-center justify-content-center py-2">
        <img src="assets/img/icons/icon71.svg"  class="icon mt-2 mb-3 icon-lg text-white" alt="assets/img/icons/icon71.svg">
        <span class="h6 mb-2 text-white">Startup</span>
    </div>
</a> 
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row">
      <div class="col-lg-4 d-flex mb-3 mb-lg-0">
        <div class="row">
          <div class="col-md-6 col-lg-12">
            <span class="h2 d-block mb-lg-3">Navigate our popular products and services</span>
          </div>
          <div class="d-flex col-md-6 col-lg-12 mb-2 mb-md-0 align-items-end">
            <div class="list-group flex-fill"> <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center mb-lg-0">
        <div class="d-flex align-items-center">
            <span class="mb-0 text-primary py-1 font-weight-bold">Media Hub</span>
        </div>
        <i class="material-icons d-block">keyboard_arrow_right</i>
    </a>
 <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center mb-lg-0">
        <div class="d-flex align-items-center">
            <span class="mb-0 text-primary py-1 font-weight-bold">Our Commitment</span>
        </div>
        <i class="material-icons d-block">keyboard_arrow_right</i>
    </a>
 <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center mb-lg-0">
        <div class="d-flex align-items-center">
            <span class="mb-0 text-primary py-1 font-weight-bold">Partner Program</span>
        </div>
        <i class="material-icons d-block">keyboard_arrow_right</i>
    </a>
 <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center mb-lg-0">
        <div class="d-flex align-items-center">
            <span class="mb-0 text-primary py-1 font-weight-bold">Sustainability</span>
        </div>
        <i class="material-icons d-block">keyboard_arrow_right</i>
    </a>
 <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center mb-lg-0">
        <div class="d-flex align-items-center">
            <span class="mb-0 text-primary py-1 font-weight-bold">National Partnerships</span>
        </div>
        <i class="material-icons d-block">keyboard_arrow_right</i>
    </a>

            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-8 d-flex">
<a href="" class="card bg-dark justify-content-end flex-fill mb-lg-0">
  <img class="card-img flex-grow-1" src="assets/img/wide-large-3.jpg" alt="How web agencies are using insight" />
  <div class="card-img-overlay bg-dark w-100">
    <span class="mb-0 h4 text-white">How web agencies are using insight</span>
  </div>
</a> 
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row">
      <div class="col-lg-9 d-lg-flex">
        <div class="row no-gutters flex-fill mb-3">
          <div class="col-lg-7 d-flex">
            <div class="card join-lg-right join-bottom mb-0 w-100 justify-content-center">
              <div class="card-body flex-md-grow-0 p-4">
                <span class="h6 d-block">Start Exploring</span>
                <span class="h2 d-block mb-3">I'd like more information on</span>
                <form class="d-sm-flex align-items-center">
                  <select class="custom-select form-control-lg">
                    <option selected value="null">Select an option</option>
                    <option value="Onez">The first option</option>
                    <option value="Two">The second option</option>
                    <option value="Three">The third option</option>
                  </select>
                  <button type="submit" class="btn btn-primary btn-lg ml-sm-1 mt-1 mt-sm-0 col col-sm-auto">Go</button>
                </form>
              </div>
            </div>
          </div>
          <div class="col-lg-5 d-flex flex-column">
            <img class="flex-grow-1 join-lg-left join-top" src="assets/img/tall-small-1.jpg"
            alt="Image">
          </div>
        </div>
      </div>
      <div class="col-lg-3 d-md-flex">
        <div class="row">
          <div class="col-lg-12 col-6 d-md-flex"> <a href="#" class="card hover-effect">
  <img class="card-img-top flex-grow-1" src="assets/img/card-image-small-1.jpg" alt="Startup" />
  <div class="card-body flex-grow-0">
    <div class="d-flex justify-content-between align-items-center">
      <h6 class="mb-0">Startup</h6>
      <i class="material-icons text-dark">keyboard_arrow_right</i>
    </div>
  </div>
</a>

          </div>
          <div class="col-lg-12 col-6 d-md-flex"> <a href="#" class="card hover-effect">
  <img class="card-img-top flex-grow-1" src="assets/img/card-image-small-2.jpg" alt="Small Business" />
  <div class="card-body flex-grow-0">
    <div class="d-flex justify-content-between align-items-center">
      <h6 class="mb-0">Small Business</h6>
      <i class="material-icons text-dark">keyboard_arrow_right</i>
    </div>
  </div>
</a>

          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-xl-10">
        <div class="row">
          <div class="col-lg-7 d-flex flex-lg-column">
            <div class="row">
              <div class="col-md-6 col-lg-12 d-md-flex">
                <div class="card">
                  <div class="card-body d-sm-flex py-4">
                    <img src="assets/img/icons/icon39.svg" alt="Modular Structure" class="icon mr-sm-3 flex-shrink-0">
                    <div>
                      <h5 class="mb-1">Modular Structure</h5>
                      <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
                        praesentium voluptatum deleniti.</p> <a href="#">Learn More</a>

                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-6 col-lg-12 d-md-flex">
                <div class="card">
                  <div class="card-body d-sm-flex py-4">
                    <img src="assets/img/icons/icon33.svg" alt="Modern Workflow" class="icon mr-sm-3 flex-shrink-0">
                    <div>
                      <h5 class="mb-1">Modern Workflow</h5>
                      <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit
                        quo minus.</p> <a href="#">Start Exploring</a>

                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-5 d-flex">
            <div class="card bg-dark">
              <div class="card-body">
                <div class="mb-3 mt-2">
                  <span class="h6 text-white">Start the Journey</span>
                </div>
                <div class="mb-sm-5">
                  <span class="h2 text-white">Work directly with our dedicated account team.</span>
                </div>
              </div>
              <div class="card-footer bg-dark">
                <div class="d-flex align-items-center justify-content-between"> <a href="#" class="text-white">More Information</a>
 <i class="material-icons text-white">keyboard_arrow_right</i>

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row justify-content-around">
      <div class="col-lg-5 align-self-center mb-3 mb-lg-0">
        <div class="pr-lg-4">
          <span class="h2 d-block">Dedicated to high quality customer service.</span>
          <p class="lead mb-0">Speed up your workflow with tons of pre-made content blocks. Assembling
            your site is easier than ever before.</p>
        </div>
      </div>
      <div class="col-lg-6 d-flex flex-lg-column">
        <div class="row">
          <div class="col-md-6 col-lg-12 d-md-flex">
            <div class="card">
              <div class="card-body d-sm-flex py-4">
                <img src="assets/img/icons/icon39.svg" alt="Modular Structure" class="icon mr-sm-3 flex-shrink-0">
                <div>
                  <h5 class="mb-1">Modular Structure</h5>
                  <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
                    praesentium voluptatum deleniti.</p> <a href="#">Learn More</a>

                </div>
              </div>
            </div>
          </div>
          <div class="col-md-6 col-lg-12 d-md-flex">
            <div class="card">
              <div class="card-body d-sm-flex py-4">
                <img src="assets/img/icons/icon33.svg" alt="Modern Workflow" class="icon mr-sm-3 flex-shrink-0">
                <div>
                  <h5 class="mb-1">Modern Workflow</h5>
                  <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit
                    quo minus.</p> <a href="#">Start Exploring</a>

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-xl-10">
        <div class="row">
          <div class="col-lg-5 d-lg-flex">
<a href="#" class="card bg-dark">
  <img class="card-img flex-lg-grow-1" src="assets/img/card-image-background-1.jpg" alt="Small Business" />
  <div class="card-img-overlay">
    <span class="mb-0 h5 text-white">Small Business</span>
  </div>
</a> 
          </div>
          <div class="col-lg-7 d-flex flex-lg-column">
            <div class="row flex-fill flex-lg-column">
              <div class="col-md-6 col-lg-12 d-md-flex flex-lg-fill">
                <div class="card justify-content-center">
                  <div class="card-body d-sm-flex flex-grow-0">
                    <img src="assets/img/icons/icon39.svg" alt="Modular Structure" class="icon mr-sm-3 flex-shrink-0">
                    <div>
                      <h5 class="mb-1">Modular Structure</h5>
                      <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
                        praesentium voluptatum deleniti.</p> <a href="#">Learn More</a>

                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-6 col-lg-12 d-md-flex flex-lg-fill">
                <div class="card justify-content-center">
                  <div class="card-body d-sm-flex flex-grow-0">
                    <img src="assets/img/icons/icon33.svg" alt="Modern Workflow" class="icon mr-sm-3 flex-shrink-0">
                    <div>
                      <h5 class="mb-1">Modern Workflow</h5>
                      <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit
                        quo minus.</p> <a href="#">Start Exploring</a>

                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-6 d-flex flex-lg-column">
        <div class="row justify-content-center mb-3 mb-lg-0">
          <div class="col-md-6 col-lg-11 d-md-flex">
            <div class="d-flex mb-3">
              <img src="assets/img/icons/icon39.svg" alt="Modular Structure" class="icon mr-2 mr-sm-3 flex-shrink-0">
              <div>
                <h5 class="mb-1">Modular Structure</h5>
                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
                  praesentium voluptatum deleniti.</p> <a href="#">Learn More</a>

              </div>
            </div>
          </div>
          <div class="col-md-6 col-lg-11 d-md-flex">
            <div class="d-flex mb-3">
              <img src="assets/img/icons/icon33.svg" alt="Modern Workflow" class="icon mr-2 mr-sm-3 flex-shrink-0">
              <div>
                <h5 class="mb-1">Modern Workflow</h5>
                <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit
                  quo minus.</p> <a href="#">Start Exploring</a>

              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="card justify-content-center p-lg-4 p-3">
          <div class="card-body py-3 flex-grow-0">
            <span class="d-block h6">Our best rate</span>
            <span class="d-block display-3 mb-2 text-dark">3.96%pa</span>
            <p class="lead">Our success is based on providing responsible loan options.</p> <a class="lead"
            href="#">Calculate Repayments</a>

          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <span class="h2 d-block mb-4">Dedicated to high quality customer service.</span>
        <ul class="list-group">
          <li class="list-group-item bg-transparent px-0">
            <div class="d-flex align-items-center">
              <img src="assets/img/icons/icon09.svg" alt="assets/img/icons/icon09.svg"
              class="icon d-block mr-3">
              <span class="mb-0 h6">Fully Responsive</span>
            </div>
          </li>
          <li class="list-group-item bg-transparent px-0">
            <div class="d-flex align-items-center">
              <img src="assets/img/icons/icon32.svg" alt="assets/img/icons/icon32.svg"
              class="icon d-block mr-3">
              <span class="mb-0 h6">Stellar Support</span>
            </div>
          </li>
          <li class="list-group-item bg-transparent px-0">
            <div class="d-flex align-items-center">
              <img src="assets/img/icons/icon39.svg" alt="assets/img/icons/icon39.svg"
              class="icon d-block mr-3">
              <span class="mb-0 h6">Modular Structure</span>
            </div>
          </li>
          <li class="list-group-item bg-transparent px-0">
            <div class="d-flex align-items-center">
              <img src="assets/img/icons/icon40.svg" alt="assets/img/icons/icon40.svg"
              class="icon d-block mr-3">
              <span class="mb-0 h6">Stylish Design</span>
            </div>
          </li>
          <li class="list-group-item bg-transparent px-0">
            <div class="d-flex align-items-center">
              <img src="assets/img/icons/icon16.svg" alt="assets/img/icons/icon16.svg"
              class="icon d-block mr-3">
              <span class="mb-0 h6">Thorough Documenation</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="col-md-4 d-flex">
        <div class="card"> <a href="#">
    <img class="card-img-top" src="assets/img/insurance-6.jpg" alt="10 Tips for savvy travellers" />
  </a>

          <div class="card-body py-3"> <a href="#" class="mb-2 d-block">Lifestyle</a>
 <a href="#"><h5>10 Tips for savvy travellers</h5></a>

            <div
            class="mb-4">
              <p>Work closely to create opportunities and provide marketing support.</p>
          </div>
        </div>
        <div class="card-footer">
          <div class="d-flex align-items-center">
            <img src="assets/img/avatar-male-1.jpg" alt="Robert Simmons" class="avatar mr-2"
            />
            <span>Robert Simmons</span>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-4 d-flex">
      <div class="card"> <a href="#">
    <img class="card-img-top" src="assets/img/lending-6.jpg" alt="Securing your first-round of capital" />
  </a>

        <div class="card-body py-3"> <a href="#" class="mb-2 d-block">Finance</a>
 <a href="#"><h5>Securing your first-round of capital</h5></a>

          <div
          class="mb-4">
            <p>Entrepreneur Joanne Halsey shares her tips for delivering an investor
              pitch.</p>
        </div>
      </div>
      <div class="card-footer">
        <div class="d-flex align-items-center">
          <img src="assets/img/avatar-female-2.jpg" alt="Joanne Halsey" class="avatar mr-2"
          />
          <span>Joanne Halsey</span>
        </div>
      </div>
    </div>
  </div>
  </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-xl-6 col-lg-7 col-md-8 d-md-flex flex-md-column"> <a href="#" class="card row no-gutters flex-column flex-md-row flex-fill hover-effect">
  <div  class="flex-column col-md-4">
    <img class="card-img flex-grow-1 h-100" src="assets/img/card-image-small-3.jpg" alt="Experience prompts new action for reef citizen scientists" />
  </div>
  <div class="card-body d-flex align-items-center col-md-8 p-3">
    <div>
      <span class="h5 mb-0 d-block">Experience prompts new action for reef citizen scientists</span>
    </div>
  </div>
</a>
 <a href="#" class="card row no-gutters flex-column flex-md-row flex-fill hover-effect">
  <div  class="flex-column col-md-4">
    <img class="card-img flex-grow-1 h-100" src="assets/img/card-image-small-4.jpg" alt="Treatment turning down the volume of patient influx" />
  </div>
  <div class="card-body d-flex align-items-center col-md-8 p-3">
    <div>
      <span class="h5 mb-0 d-block">Treatment turning down the volume of patient influx</span>
    </div>
  </div>
</a>

      </div>
      <div class="col-md-4 d-md-flex mb-md-3">
        <div class="list-group"> <a class="list-group-item list-group-item-action d-flex align-items-center w-100 flex-fill"
          href="#">
        <div class="d-flex align-items-center">
            <div class="py-2 px-3 mr-2 text-center">
                <span class="d-block h4 mb-0">11</span>
                <span class="text-small">April</span>
            </div>
            <span class="mb-0 h6 text-primary">Health Matters: Nature vs Nurture</span>
        </div>
    </a>
 <a class="list-group-item list-group-item-action d-flex align-items-center w-100 flex-fill"
          href="#">
        <div class="d-flex align-items-center">
            <div class="py-2 px-3 mr-2 text-center">
                <span class="d-block h4 mb-0">16</span>
                <span class="text-small">April</span>
            </div>
            <span class="mb-0 h6 text-primary">Semester 1 classes recommence after mid-semester break</span>
        </div>
    </a>
 <a class="list-group-item list-group-item-action d-flex align-items-center w-100 flex-fill"
          href="#">
        <div class="d-flex align-items-center">
            <div class="py-2 px-3 mr-2 text-center">
                <span class="d-block h4 mb-0">18</span>
                <span class="text-small">April</span>
            </div>
            <span class="mb-0 h6 text-primary">Masterclass with Marty Linsky</span>
        </div>
    </a>

        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <img class="bg-image" src="assets/img/header-8.jpg" alt="Background Image">
  <div class="container">
    <div class="row">
      <div class="col-lg-4 d-flex mb-3 mb-lg-0">
        <div class="row">
          <div class="col-md-6 col-lg-12">
            <span class="h2 d-block mb-lg-3 text-white">Navigate our popular products and services</span>
          </div>
          <div class="d-flex col-md-6 col-lg-12 mb-2 mb-md-0 align-items-end">
            <div class="list-group flex-fill"> <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center mb-lg-0">
        <div class="d-flex align-items-center">
            <span class="mb-0 text-primary py-1 font-weight-bold">Media Hub</span>
        </div>
        <i class="material-icons d-block">keyboard_arrow_right</i>
    </a>
 <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center mb-lg-0">
        <div class="d-flex align-items-center">
            <span class="mb-0 text-primary py-1 font-weight-bold">Our Commitment</span>
        </div>
        <i class="material-icons d-block">keyboard_arrow_right</i>
    </a>
 <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center mb-lg-0">
        <div class="d-flex align-items-center">
            <span class="mb-0 text-primary py-1 font-weight-bold">Partner Program</span>
        </div>
        <i class="material-icons d-block">keyboard_arrow_right</i>
    </a>
 <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center mb-lg-0">
        <div class="d-flex align-items-center">
            <span class="mb-0 text-primary py-1 font-weight-bold">Sustainability</span>
        </div>
        <i class="material-icons d-block">keyboard_arrow_right</i>
    </a>
 <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center mb-lg-0">
        <div class="d-flex align-items-center">
            <span class="mb-0 text-primary py-1 font-weight-bold">National Partnerships</span>
        </div>
        <i class="material-icons d-block">keyboard_arrow_right</i>
    </a>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-3 mb-3 mb-md-0">
        <span class="h2 d-block">Dedicated to stellar customer service.</span> <a href="#" class="lead">Meet our people</a> 
      </div>
      <div class="col-lg-9">
        <div class="row">
          <div class="col-md-4 d-flex">
            <div class="card">
              <img class="card-img-top" src="assets/img/portrait-female-1.jpg" alt="Amanda Shah"
              />
              <div class="card-body py-3">
                <h5 class="mb-0">Amanda Shah</h5>
                <span>Co-Founder, CTO</span>
              </div>
              <div class="card-footer pt-0 border-top-0"> <a href="#">amanda@insight.io</a>

              </div>
            </div>
          </div>
          <div class="col-md-4 d-flex">
            <div class="card">
              <img class="card-img-top" src="assets/img/portrait-male-2.jpg" alt="Lucas Brüner"
              />
              <div class="card-body py-3">
                <h5 class="mb-0">Lucas Brüner</h5>
                <span>Co-Founder, Marketing</span>
              </div>
              <div class="card-footer pt-0 border-top-0"> <a href="#">lucas@insight.io</a>

              </div>
            </div>
          </div>
          <div class="col-md-4 d-flex">
            <div class="card">
              <img class="card-img-top" src="assets/img/portrait-female-2.jpg" alt="Lucille Hobson"
              />
              <div class="card-body py-3">
                <h5 class="mb-0">Lucille Hobson</h5>
                <span>Marketing</span>
              </div>
              <div class="card-footer pt-0 border-top-0"> <a href="#">lucille@insight.io</a>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="pt-md-4 pb-md-0">
  <div class="container">
    <div class="row align-items-center justify-content-around">
      <div class="col-lg-5 col-md-6">
        <span class="h2 d-block">Dedicated to high quality customer service.</span>
        <p class="lead mb-4">Insight includes everything you'll need to build a beautiful website.</p>
        <div
        class="list-group"> <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
        <div class="d-flex align-items-center">
            <img src="assets/img/icons/icon16.svg" alt="assets/img/icons/icon16.svg" class="d-block mr-3 icon icon-sm">
            <span class="mb-0 h6">Browse the Knowledgebase</span>
        </div>
        <i class="material-icons d-block">keyboard_arrow_right</i>
    </a>
 <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
        <div class="d-flex align-items-center">
            <img src="assets/img/avatar-female-1.jpg" alt="assets/img/avatar-female-1.jpg" class="d-block mr-3 avatar">
            <span class="mb-0 h6">Speak with a team member</span>
        </div>
        <i class="material-icons d-block">keyboard_arrow_right</i>
    </a>

      </div>
    </div>
    <div class="col-lg-3 col-md-4">
      <img src="assets/img/female-isolated-1.jpg" alt="Image" class="d-none d-md-block">
    </div>
  </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row justify-content-around align-items-center">
      <div class="col-lg-4">
        <span class="h2 d-block">Build a beautiful, performant site with Insight</span>
        <p class="lead mb-lg-0">Speed up your workflow with tons of pre-made content blocks. Assembling
          your site is easier than ever before.</p>
      </div>
      <div class="col-xl-7 col-md-8">
        <div class="row align-items-center">
          <div class="col-6"> <a href="assets/img/portfolio-1.jpg" data-fancybox="Gallery-1">
          <img src="assets/img/portfolio-1.jpg" alt="Image" class="hover-effect rounded">
        </a>

          </div>
          <div class="col-5"> <a href="assets/img/portfolio-2.jpg" data-fancybox="Gallery-1">
          <img src="assets/img/portfolio-2.jpg" alt="Image" class="hover-effect rounded mb-3">
        </a>
 <a href="assets/img/portfolio-3.jpg" data-fancybox="Gallery-1">
          <img src="assets/img/portfolio-3.jpg" alt="Image" class="hover-effect rounded">
        </a>

          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row">
      <div class="col-6 col-lg-3 d-flex"> <a href="#" class="card hover-effect">
  <img class="card-img-top" src="assets/img/card-image-small-1.jpg" alt="Startup" />
  <div class="card-body">
    <div class="d-flex justify-content-between align-items-center">
      <h6 class="mb-0">Startup</h6>
      <i class="material-icons text-dark">keyboard_arrow_right</i>
    </div>
  </div>
</a>

      </div>
      <div class="col-6 col-lg-3 d-flex"> <a href="#" class="card hover-effect">
  <img class="card-img-top" src="assets/img/card-image-small-2.jpg" alt="Small Business" />
  <div class="card-body">
    <div class="d-flex justify-content-between align-items-center">
      <h6 class="mb-0">Small Business</h6>
      <i class="material-icons text-dark">keyboard_arrow_right</i>
    </div>
  </div>
</a>

      </div>
      <div class="col-6 col-lg-3 d-flex"> <a href="#" class="card hover-effect">
  <img class="card-img-top" src="assets/img/card-image-small-3.jpg" alt="Multinational" />
  <div class="card-body">
    <div class="d-flex justify-content-between align-items-center">
      <h6 class="mb-0">Multinational</h6>
      <i class="material-icons text-dark">keyboard_arrow_right</i>
    </div>
  </div>
</a>

      </div>
      <div class="col-6 col-lg-3 d-flex"> <a href="#" class="card hover-effect">
  <img class="card-img-top" src="assets/img/card-image-small-4.jpg" alt="Non-profit" />
  <div class="card-body">
    <div class="d-flex justify-content-between align-items-center">
      <h6 class="mb-0">Non-profit</h6>
      <i class="material-icons text-dark">keyboard_arrow_right</i>
    </div>
  </div>
</a>

      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-4 d-flex">
        <div class="card">
          <img class="card-img-top" src="assets/img/card-image-small-1.jpg" alt="Modular Structure"
          />
          <div class="card-body py-3">
            <h5>Modular Structure</h5>
            <div class="mb-4">
              <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
                praesentium voluptatum deleniti.</p>
            </div>
          </div>
          <div class="card-footer">
            <div class="d-flex align-items-center justify-content-between"> <a href="#">Get Started</a>
 <i class="material-icons text-dark">keyboard_arrow_right</i>

            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-4 d-flex">
        <div class="card">
          <img class="card-img-top" src="assets/img/card-image-small-2.jpg" alt="Modern Workflow"
          />
          <div class="card-body py-3">
            <h5>Modern Workflow</h5>
            <div class="mb-4">
              <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit
                quo minus.</p>
            </div>
          </div>
          <div class="card-footer">
            <div class="d-flex align-items-center justify-content-between"> <a href="#">Learn More</a>
 <i class="material-icons text-dark">keyboard_arrow_right</i>

            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-4 d-flex">
        <div class="card">
          <img class="card-img-top" src="assets/img/card-image-small-4.jpg" alt="Fully Responsive"
          />
          <div class="card-body py-3">
            <h5>Fully Responsive</h5>
            <div class="mb-4">
              <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus
                saepe.</p>
            </div>
          </div>
          <div class="card-footer">
            <div class="d-flex align-items-center justify-content-between"> <a href="#">Become a Partner</a>
 <i class="material-icons text-dark">keyboard_arrow_right</i>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-4 d-flex">
        <div class="card"> <a href="#">
    <img class="card-img-top" src="assets/img/insurance-6.jpg" alt="10 Tips for savvy travellers" />
  </a>

          <div class="card-body py-3"> <a href="#" class="mb-2 d-block">Lifestyle</a>
 <a href="#"><h5>10 Tips for savvy travellers</h5></a>

            <div
            class="mb-4">
              <p>Work closely to create opportunities and provide marketing support.</p>
          </div>
        </div>
        <div class="card-footer">
          <div class="d-flex align-items-center">
            <img src="assets/img/avatar-male-1.jpg" alt="Robert Simmons" class="avatar mr-2"
            />
            <span>Robert Simmons</span>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12 col-md-4 d-flex">
      <div class="card"> <a href="#">
    <img class="card-img-top" src="assets/img/lending-6.jpg" alt="Securing your first-round of capital" />
  </a>

        <div class="card-body py-3"> <a href="#" class="mb-2 d-block">Finance</a>
 <a href="#"><h5>Securing your first-round of capital</h5></a>

          <div
          class="mb-4">
            <p>Entrepreneur Joanne Halsey shares her tips for delivering an investor
              pitch.</p>
        </div>
      </div>
      <div class="card-footer">
        <div class="d-flex align-items-center">
          <img src="assets/img/avatar-female-2.jpg" alt="Joanne Halsey" class="avatar mr-2"
          />
          <span>Joanne Halsey</span>
        </div>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-4 d-flex">
    <div class="card"> <a href="#">
    <img class="card-img-top" src="assets/img/insurance-4.jpg" alt="Leverage these growth hacks to supercharge your startup" />
  </a>

      <div class="card-body py-3"> <a href="#" class="mb-2 d-block">Freelance</a>
 <a href="#"><h5>Leverage these growth hacks to supercharge your startup</h5></a>

        <div
        class="mb-4">
          <p>Simple strategies that are easy to set up and monitor</p>
      </div>
    </div>
    <div class="card-footer">
      <div class="d-flex align-items-center">
        <img src="assets/img/avatar-female-3.jpg" alt="Marianne Blake" class="avatar mr-2"
        />
        <span>Marianne Blake</span>
      </div>
    </div>
  </div>
  </div>
  </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row">
      <div class="col-6 col-md d-flex"> <a href="#" class="card text-center flex-fill hover-effect">
    <div class="card-body d-flex flex-column align-items-center justify-content-center py-2">
        <img src="assets/img/icons/icon01.svg"  class="icon mt-2 mb-3" alt="assets/img/icons/icon01.svg">
        <span class="h6 mb-2">Small Business</span>
    </div>
</a>

      </div>
      <div class="col-6 col-md d-flex"> <a href="#" class="card text-center flex-fill hover-effect">
    <div class="card-body d-flex flex-column align-items-center justify-content-center py-2">
        <img src="assets/img/icons/icon71.svg"  class="icon mt-2 mb-3" alt="assets/img/icons/icon71.svg">
        <span class="h6 mb-2">Startup</span>
    </div>
</a>

      </div>
      <div class="col-6 col-md d-flex"> <a href="#" class="card text-center flex-fill hover-effect">
    <div class="card-body d-flex flex-column align-items-center justify-content-center py-2">
        <img src="assets/img/icons/icon82.svg"  class="icon mt-2 mb-3" alt="assets/img/icons/icon82.svg">
        <span class="h6 mb-2">Non-profit</span>
    </div>
</a>

      </div>
      <div class="col-6 col-md d-flex"> <a href="#" class="card text-center flex-fill hover-effect">
    <div class="card-body d-flex flex-column align-items-center justify-content-center py-2">
        <img src="assets/img/icons/icon08.svg"  class="icon mt-2 mb-3" alt="assets/img/icons/icon08.svg">
        <span class="h6 mb-2">Multinational</span>
    </div>
</a>

      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-4"> <a href="#" class="card bg-dark">
  <img class="card-img opacity-90" src="assets/img/card-image-background-1.jpg" alt="Small Business" />
  <div class="card-img-overlay">
    <span class="mb-0 h5 text-white">Small Business</span>
  </div>
</a>

      </div>
      <div class="col-12 col-md-4"> <a href="#" class="card bg-dark">
  <img class="card-img opacity-90" src="assets/img/card-image-background-3.jpg" alt="Non-profit" />
  <div class="card-img-overlay">
    <span class="mb-0 h5 text-white">Non-profit</span>
  </div>
</a>

      </div>
      <div class="col-12 col-md-4"> <a href="#" class="card bg-dark">
  <img class="card-img opacity-90" src="assets/img/card-image-background-2.jpg" alt="Multinational" />
  <div class="card-img-overlay">
    <span class="mb-0 h5 text-white">Multinational</span>
  </div>
</a>

      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-4"> <a href="#" class="card bg-dark ext-center justify-content-center align-items-center">
  <img class="card-img opacity-80" src="assets/img/card-image-background-1.jpg" alt="Small Business" />
  <div class="card-img-overlay">
    <span class="mb-0 h5 text-white">Small Business</span>
  </div>
</a>

      </div>
      <div class="col-12 col-md-4"> <a href="#" class="card bg-dark ext-center justify-content-center align-items-center">
  <img class="card-img opacity-80" src="assets/img/card-image-background-3.jpg" alt="Non-profit" />
  <div class="card-img-overlay">
    <span class="mb-0 h5 text-white">Non-profit</span>
  </div>
</a>

      </div>
      <div class="col-12 col-md-4"> <a href="#" class="card bg-dark ext-center justify-content-center align-items-center">
  <img class="card-img opacity-80" src="assets/img/card-image-background-2.jpg" alt="Multinational" />
  <div class="card-img-overlay">
    <span class="mb-0 h5 text-white">Multinational</span>
  </div>
</a>

      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-6 d-md-flex">
        <div class="card">
          <div class="card-body d-flex py-4">
            <img src="assets/img/icons/icon39.svg" alt="Modular Structure" class="icon mr-3 flex-shrink-0">
            <div>
              <h5 class="mb-1">Modular Structure</h5>
              <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
                praesentium voluptatum deleniti.</p> <a href="#">Learn More</a>

            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6 d-md-flex">
        <div class="card">
          <div class="card-body d-flex py-4">
            <img src="assets/img/icons/icon33.svg" alt="Modern Workflow" class="icon mr-3 flex-shrink-0">
            <div>
              <h5 class="mb-1">Modern Workflow</h5>
              <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit
                quo minus.</p> <a href="#">Start Exploring</a>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-6 d-md-flex mb-4 mb-md-0">
        <div class="d-flex">
          <img src="assets/img/icons/icon39.svg" alt="Modular Structure" class="icon mr-3 flex-shrink-0">
          <div>
            <h5 class="mb-1">Modular Structure</h5>
            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
              praesentium voluptatum deleniti.</p> <a href="#">Learn More</a>

          </div>
        </div>
      </div>
      <div class="col-12 col-md-6 d-md-flex mb-4 mb-md-0">
        <div class="d-flex">
          <img src="assets/img/icons/icon33.svg" alt="Modern Workflow" class="icon mr-3 flex-shrink-0">
          <div>
            <h5 class="mb-1">Modern Workflow</h5>
            <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit
              quo minus.</p> <a href="#">Start Exploring</a>

          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-4 d-md-flex mb-4 mb-md-0">
        <div class="text-center">
          <img src="assets/img/icons/icon39.svg" alt="Modular Structure" class="icon">
          <div>
            <h5 class="mb-1 mt-2">Modular Structure</h5>
            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
              praesentium voluptatum deleniti.</p> <a href="#">Learn More</a>

          </div>
        </div>
      </div>
      <div class="col-12 col-md-4 d-md-flex mb-4 mb-md-0">
        <div class="text-center">
          <img src="assets/img/icons/icon33.svg" alt="Modern Workflow" class="icon">
          <div>
            <h5 class="mb-1 mt-2">Modern Workflow</h5>
            <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit
              quo minus.</p> <a href="#">Start Exploring</a>

          </div>
        </div>
      </div>
      <div class="col-12 col-md-4 d-md-flex mb-4 mb-md-0">
        <div class="text-center">
          <img src="assets/img/icons/icon09.svg" alt="Fully Responsive" class="icon">
          <div>
            <h5 class="mb-1 mt-2">Fully Responsive</h5>
            <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus
              saepe.</p> <a href="#">Get Started</a>

          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-4 d-md-flex">
        <div class="text-center card">
          <div class="card-body py-4">
            <img src="assets/img/icons/icon39.svg" alt="Modular Structure" class="icon">
            <div>
              <h5 class="mb-1 mt-2">Modular Structure</h5>
              <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
                praesentium voluptatum deleniti.</p> <a href="#">Learn More</a>

            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-4 d-md-flex">
        <div class="text-center card">
          <div class="card-body py-4">
            <img src="assets/img/icons/icon33.svg" alt="Modern Workflow" class="icon">
            <div>
              <h5 class="mb-1 mt-2">Modern Workflow</h5>
              <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit
                quo minus.</p> <a href="#">Start Exploring</a>

            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-4 d-md-flex">
        <div class="text-center card">
          <div class="card-body py-4">
            <img src="assets/img/icons/icon09.svg" alt="Fully Responsive" class="icon">
            <div>
              <h5 class="mb-1 mt-2">Fully Responsive</h5>
              <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus
                saepe.</p> <a href="#">Get Started</a>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="bg-white">
  <div class="container">
    <div class="row text-center text-md-left">
      <div class="col-6 col-lg-3"> <a href="#" class="d-sm-flex mb-3 mb-lg-0">
    <img src="assets/img/icons/icon10.svg" alt="Call 14 88271" class="icon mr-sm-3 flex-shrink-0">
    <div>
        <h5 class="mb-1">Call 14 88271</h5>
        <p class="mb-0">8am - 8pm, any day</p>
    </div>
</a>

      </div>
      <div class="col-6 col-lg-3">
        <div class="d-sm-flex mb-3 mb-lg-0">
          <img src="assets/img/icons/icon83.svg" alt="Visit a branch" class="icon mr-sm-3 flex-shrink-0">
          <div>
            <h5 class="mb-1">Visit a branch</h5>
            <p class="mb-0"></p> <a href="#">Locate your nearest</a>

          </div>
        </div>
      </div>
      <div class="col-6 col-lg-3">
        <div class="d-sm-flex mb-3 mb-lg-0">
          <img src="assets/img/icons/icon89.svg" alt="Request a visit" class="icon mr-sm-3 flex-shrink-0">
          <div>
            <h5 class="mb-1">Request a visit</h5>
            <p class="mb-0"></p> <a href="#">Make an appointment</a>

          </div>
        </div>
      </div>
      <div class="col-6 col-lg-3">
        <div class="d-sm-flex mb-3 mb-lg-0">
          <img src="assets/img/icons/icon32.svg" alt="Video Call" class="icon mr-sm-3 flex-shrink-0">
          <div>
            <h5 class="mb-1">Video Call</h5>
            <p class="mb-0"></p> <a href="#">Chat live now</a>

          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row">
      <div class="col-6 col-lg-3 d-flex"> <a href="#" class="card hover-effect">
  <img class="card-img-top" src="assets/img/card-image-small-1.jpg" alt="Startup" />
  <div class="card-body">
    <div class="d-flex justify-content-between align-items-center">
      <h6 class="mb-0">Startup</h6>
      <i class="material-icons text-dark">keyboard_arrow_right</i>
    </div>
  </div>
</a>

      </div>
      <div class="col-6 col-lg-3 d-flex"> <a href="#" class="card hover-effect">
  <img class="card-img-top" src="assets/img/card-image-small-2.jpg" alt="Small Business" />
  <div class="card-body">
    <div class="d-flex justify-content-between align-items-center">
      <h6 class="mb-0">Small Business</h6>
      <i class="material-icons text-dark">keyboard_arrow_right</i>
    </div>
  </div>
</a>

      </div>
      <div class="col-6 col-lg-3 d-flex"> <a href="#" class="card hover-effect">
  <img class="card-img-top" src="assets/img/card-image-small-3.jpg" alt="Multinational" />
  <div class="card-body">
    <div class="d-flex justify-content-between align-items-center">
      <h6 class="mb-0">Multinational</h6>
      <i class="material-icons text-dark">keyboard_arrow_right</i>
    </div>
  </div>
</a>

      </div>
      <div class="col-6 col-lg-3 d-flex"> <a href="#" class="card hover-effect">
  <img class="card-img-top" src="assets/img/card-image-small-4.jpg" alt="Non-profit" />
  <div class="card-body">
    <div class="d-flex justify-content-between align-items-center">
      <h6 class="mb-0">Non-profit</h6>
      <i class="material-icons text-dark">keyboard_arrow_right</i>
    </div>
  </div>
</a>

      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row justify-content-around">
      <div class="col-6 col-lg col-md-2 mb-4 mb-sm-0 d-flex justify-content-center">
        <img class="icon icon-sm text-dark opacity-50" src="assets/img/logo-amazon.svg"
        alt="Amazon">
      </div>
      <div class="col-6 col-lg col-md-2 mb-4 mb-sm-0 d-flex justify-content-center">
        <img class="icon icon-sm text-dark opacity-50" src="assets/img/logo-volkswagen.svg"
        alt="Volkswagen">
      </div>
      <div class="col-6 col-lg col-md-2 mb-4 mb-sm-0 d-flex justify-content-center">
        <img class="icon icon-sm text-dark opacity-50" src="assets/img/logo-coca-cola.svg"
        alt="Coca Cola">
      </div>
      <div class="col-6 col-lg col-md-2 mb-4 mb-sm-0 d-flex justify-content-center">
        <img class="icon icon-sm text-dark opacity-50" src="assets/img/logo-netflix.svg"
        alt="Netflix">
      </div>
      <div class="col-6 col-lg col-md-2 mb-4 mb-sm-0 d-flex justify-content-center">
        <img class="icon icon-sm text-dark opacity-50" src="assets/img/logo-apple.svg"
        alt="Apple">
      </div>
      <div class="col-6 col-lg col-md-2 mb-4 mb-sm-0 d-flex justify-content-center">
        <img class="icon icon-sm text-dark opacity-50" src="assets/img/logo-spotify.svg"
        alt="Spotify">
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row">
      <div class="col-lg-4 d-lg-flex">
        <div class="card">
          <div class="card-body py-4">
            <span class="d-block h1 display-4">38,000+</span>
            <p>Satisfied customers that have used a Medium Rare template in their project.</p>
            <a
            href="">Become one now</a>
          </div>
        </div>
      </div>
      <div class="col-lg-4 d-lg-flex">
        <div class="card">
          <div class="card-body py-4">
            <span class="d-block h1 display-4">&#x1F44C; 4.79</span>
            <p>Average review score out of over 1,600 customer reviews.</p> <a href="">Purchase now</a>

          </div>
        </div>
      </div>
      <div class="col-lg-4 d-lg-flex">
        <div class="card">
          <div class="card-body py-4">
            <span class="d-block h1 display-4">Unlimited</span>
            <p>Potential layout combinations are limited only by your imagination.</p>
            <a
            href="">Browse pages</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row">
      <div class="col">
        <table class="table-responsive table-borderless">
          <thead>
            <tr>
              <th scope="col"></th>
              <th scope="col" class="bg-primary text-white p-2 p-lg-3 border">Day-to-Day Account</th>
              <th scope="col" class="bg-primary text-white p-2 p-lg-3 border">Cash Management Account</th>
              <th scope="col" class="bg-primary text-white p-2 p-lg-3 border">Reverse Charges Account</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row" style="min-width:225px;" class="pr-lg-3">Account features</th>
              <td class="bg-white p-2 p-lg-3 border">Our award winning, no fee bank account</td>
              <td class="bg-white p-2 p-lg-3 border">Earn high interest on your everyday transaction account</td>
              <td class="bg-white p-2 p-lg-3 border">Get paid a monthly bonus for your everyday banking activity</td>
            </tr>
            <tr>
              <th scope="row" style="min-width:225px;" class="pr-lg-3">Who can open this account?</th>
              <td class="bg-white p-2 p-lg-3 border">Personal customers only (excluding Self Maneged Super Funds)</td>
              <td class="bg-white p-2 p-lg-3 border">Personal customers only</td>
              <td class="bg-white p-2 p-lg-3 border">Pensioner Concession Card holders only</td>
            </tr>
            <tr>
              <th scope="row" style="min-width:225px;" class="pr-lg-3">Interested calculated daily</th>
              <td class="bg-white p-2 p-lg-3 border"> <i class='material-icons text-success'>check</i>

              </td>
              <td class="bg-white p-2 p-lg-3 border"> <i class='material-icons text-success'>check</i>

              </td>
              <td class="bg-white p-2 p-lg-3 border"> <i class='material-icons text-success'>check</i>

              </td>
            </tr>
            <tr>
              <th scope="row" style="min-width:225px;" class="pr-lg-3">Interested paid monthly</th>
              <td class="bg-white p-2 p-lg-3 border"> <i class='material-icons text-success'>close</i>

              </td>
              <td class="bg-white p-2 p-lg-3 border"> <i class='material-icons text-success'>check</i>

              </td>
              <td class="bg-white p-2 p-lg-3 border"> <i class='material-icons text-success'>check</i>

              </td>
            </tr>
            <tr>
              <th scope="row" style="min-width:225px;" class="pr-lg-3">Bonus interest payment</th>
              <td class="bg-white p-2 p-lg-3 border"> <i class='material-icons text-success'>close</i>

              </td>
              <td class="bg-white p-2 p-lg-3 border"> <i class='material-icons text-success'>check</i>

              </td>
              <td class="bg-white p-2 p-lg-3 border"> <i class='material-icons text-success'>close</i>

              </td>
            </tr>
            <tr>
              <th scope="row" style="min-width:225px;" class="pr-lg-3">Interest rate per annum</th>
              <td class="bg-white p-2 p-lg-3 border">1.4% pa.</td>
              <td class="bg-white p-2 p-lg-3 border">3% pa.</td>
              <td class="bg-white p-2 p-lg-3 border">3% pa.</td>
            </tr>
            <tr>
              <th scope="row" style="min-width:225px;" class="pr-lg-3">Minimum balance</th>
              <td class="bg-white p-2 p-lg-3 border">$1</td>
              <td class="bg-white p-2 p-lg-3 border">$5,000</td>
              <td class="bg-white p-2 p-lg-3 border">$500</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <div class="card py-3 px-xl-3">
          <div class="card-body">
            <span class="h6 d-block">Freelance</span>
            <span class="d-block display-4 mb-2 text-dark">$10/m</span>
            <p>For growing business looking to try the product</p> <a href="#">Get Started</a>

          </div>
        </div>
        <ul>
          <li class="mb-2">A simple call-tracking algorithm for accepting an application</li>
          <li
          class="mb-2">3 days constant monitoring</li>
            <li class="mb-2">Simple appeals in the format of the assistant editor</li>
        </ul>
      </div>
      <div class="col-md-4">
        <div class="card py-3 px-xl-3 bg-primary">
          <div class="card-body">
            <span class="h6 d-block text-white">Small Company</span>
            <span class="d-block display-4 mb-2 text-white">$29/m</span>
            <p class="text-white">For established businesses looking to expand</p> <a class="text-white"
            href="#">Get started</a>

          </div>
        </div>
        <ul>
          <li class="mb-2">A simple call-tracking algorithm for accepting an application</li>
          <li
          class="mb-2">7 days constant monitoring</li>
            <li class="mb-2">Simple appeals in the format of the assistant editor</li>
        </ul>
      </div>
      <div class="col-md-4">
        <div class="card py-3 px-xl-3">
          <div class="card-body">
            <span class="h6 d-block">Enterprise</span>
            <span class="d-block display-4 text-dark mb-2">$99/m</span>
            <p>For large, multi-location organisations</p> <a href="#">Get started</a>

          </div>
        </div>
        <ul>
          <li class="mb-2">A simple call-tracking algorithm for accepting an application</li>
          <li
          class="mb-2">28 days constant monitoring</li>
            <li class="mb-2">Simple appeals in the format of the assistant editor</li>
        </ul>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row">
      <div class="col-md-4 d-flex">
        <div class="card flex-fill text-center shadow">
          <div class="card-body py-4">
            <div class="mb-3">
              <span class="h4 d-block">Basic</span>
              <div class="d-flex justify-content-center align-items-center">
                <span class="h5 mb-0">$</span>
                <span class="h1 display-3 mb-0">19</span>
              </div>
              <span class="text-muted">Per user, per month.</span>
            </div>
            <ul class="list-unstyled lead mb-3">
              <li class="mt-1">10 Users</li>
              <li class="mt-1">Unlimited Storage</li>
              <li class="mt-1">Basic Support</li>
            </ul> <a href="#" class="btn btn-primary">Get Started</a>

          </div>
          <div class="card-footer">
            <span class="text-small">* Includes 14 day free trial</span>
          </div>
        </div>
      </div>
      <div class="col-md-4 d-flex">
        <div class="card flex-fill text-center shadow-lg">
          <span class="badge badge-md badge-success position-absolute"><i class="material-icons">star</i> Best Value</span>
          <div class="card-body py-4">
            <div class="mb-3">
              <span class="h4 d-block">Professional</span>
              <div class="d-flex justify-content-center align-items-center">
                <span class="h5 mb-0">$</span>
                <span class="h1 display-3 mb-0">39</span>
              </div>
              <span class="text-muted">Per user, per month.</span>
            </div>
            <ul class="list-unstyled lead mb-3">
              <li class="mt-1">50 Users</li>
              <li class="mt-1">Unlimited Storage</li>
              <li class="mt-1">Priority Support</li>
            </ul> <a href="#" class="btn btn-primary">Get Started</a>

          </div>
          <div class="card-footer">
            <span class="text-small">* Includes 14 day free trial</span>
          </div>
        </div>
      </div>
      <div class="col-md-4 d-flex">
        <div class="card flex-fill text-center shadow">
          <div class="card-body py-4">
            <div class="mb-3">
              <span class="h4 d-block">Premium</span>
              <div class="d-flex justify-content-center align-items-center">
                <span class="h5 mb-0">$</span>
                <span class="h1 display-3 mb-0">59</span>
              </div>
              <span class="text-muted">Per user, per month.</span>
            </div>
            <ul class="list-unstyled lead mb-3">
              <li class="mt-1">Unlimited Users</li>
              <li class="mt-1">Unlimited Storage</li>
              <li class="mt-1">Premium Support</li>
            </ul> <a href="#" class="btn btn-primary">Get Started</a>

          </div>
          <div class="card-footer">
            <span class="text-small">* Includes 14 day free trial</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="bg-primary spacer-y-3">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col col-12 text-center">
        <span class="d-block mb-3 h2 text-white">Start building beautiful block-based websites.</span> <a class="btn btn-light btn-lg"
        href="#">Learn More</a>

        <span class="d-block mt-3 mt-3 text-white">Available exclusively at Bootstrap Themes.</span>
      </div>
    </div>
  </div>
</section>

<section class="bg-dark spacer-y-4">
  <div class="container">
    <div class="row justify-content-around align-items-center">
      <div class="col-md-6 col-lg-5 col-xl-4">
        <span class="h1 d-block mb-lg-0 text-white">Friendly help and support whenever you need it</span>
      </div>
      <div class="col-md-6">
        <p class="lead mb-3 text-white">Check out our great support options and get qualified assistance through
          our live chat.</p>
        <div class="d-flex align-items-center"> <a class="btn btn-primary btn-lg" href="#">Get started</a>

          <span class="d-block mx-1 mx-sm-2 text-small text-white">or</span> <a class="btn btn-light btn-lg" href="#">Request Demo</a>

        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col col-sm-auto d-md-flex align-items-center text-center">
        <span class="d-block mr-md-3 mb-md-0 h4 mb-md-0">Build a beautiful modular website with Insight</span> <a class="btn btn-primary btn-lg"
        href="#">Get Started</a>

      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="slider-cards" data-flickity='{ "cellAlign": "left", "contain": true, "imagesLoaded": true, "wrapAround": true }'>
          <div class="carousel-cell">
            <img class="rounded" src="assets/img/wide-large-3.jpg" alt="Interview with Melbourne startup Insight">
            <div class="card col-lg-5 col-xl-4 py-2 flex-fill">
              <div class="card-body">
                <span class="badge badge-success badge-md d-inline-block mb-2">Featured</span>
                <span class="d-block h1 d-block">Interview with Melbourne startup Insight</span>
                <p class="lead">Launching an idea successfuly is always a matter of teamwork.</p> <a class="lead"
                href="#">Read story</a>

              </div>
            </div>
          </div>
          <div class="carousel-cell">
            <img class="rounded" src="assets/img/wide-large-1.jpg" alt="Building a sustainable business">
            <div class="card col-lg-5 col-xl-4 py-2 flex-fill">
              <div class="card-body">
                <span class="badge badge-success badge-md d-inline-block mb-2">Featured</span>
                <span class="d-block h1 d-block">Building a sustainable business</span>
                <p class="lead">The path to success is never easy, take it from restauranteur Rob Hanlan.</p>
                <a
                class="lead" href="#">Read story</a>
              </div>
            </div>
          </div>
          <div class="carousel-cell">
            <img class="rounded" src="assets/img/wide-large-2.jpg" alt="Transitioning from hobby to career">
            <div class="card col-lg-5 col-xl-4 py-2 flex-fill">
              <div class="card-body">
                <span class="badge badge-success badge-md d-inline-block mb-2">Featured</span>
                <span class="d-block h1 d-block">Transitioning from hobby to career</span>
                <p class="lead">Danielle Yates shares wisdom for budding business upstarts.</p> <a class="lead"
                href="#">Read story</a>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row no-gutters flex-fill mb-3">
      <div class="col-lg-7 d-flex">
        <div class="card join-lg-right join-bottom mb-0 w-100 justify-content-center">
          <div class="card-body flex-md-grow-0 p-4">
            <span class="h6 d-block">Start Exploring</span>
            <span class="h2 d-block mb-3">I'd like more information on</span>
            <form class="d-sm-flex align-items-center">
              <select class="custom-select form-control-lg">
                <option selected value="null">Select an option</option>
                <option value="One">The first option</option>
                <option value="Two">The second option</option>
                <option value="Three">The third option</option>
              </select>
              <button type="submit" class="btn btn-primary btn-lg ml-sm-1 mt-1 mt-sm-0 col col-sm-auto">Go</button>
            </form>
          </div>
        </div>
      </div>
      <div class="col-lg-5 d-flex flex-column">
        <img class="flex-grow-1 join-lg-left join-top" src="assets/img/tall-small-1.jpg"
        alt="Image">
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-xl-9 col-lg-10">
        <span class="h3 d-block">Find a course</span>
        <form class="d-flex align-items-center mb-2">
          <div class="input-group input-group-lg">
            <div class="input-group-prepend">
              <span class="input-group-text"> <i class="material-icons">search</i>

              </span>
            </div>
            <input type="search" class="form-control" placeholder="Search" aria-label="Search">
          </div>
          <button class="btn btn-lg btn-primary ml-2" type="submit">Search</button>
        </form>
        <div class="d-md-flex align-items-center">
          <span class="d-block mr-2 mb-2 mb-md-0">Popular:</span>
          <ul class="list-unstyled d-md-flex mb-0">
            <li class="mr-1 mr-sm-2 mb-1 mb-sm-0 d-inline-block"><a href="#" class="btn btn-sm btn-light">Architecture</a>
            </li>
            <li class="mr-1 mr-sm-2 mb-1 mb-sm-0 d-inline-block"><a href="#" class="btn btn-sm btn-light">Commerce</a>
            </li>
            <li class="mr-1 mr-sm-2 mb-1 mb-sm-0 d-inline-block"><a href="#" class="btn btn-sm btn-light">International Business</a>
            </li>
            <li class="mr-1 mr-sm-2 mb-1 mb-sm-0 d-inline-block"><a href="#" class="btn btn-sm btn-light">Engineering</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row justify-content-between align-items-center">
      <div class="col-md-6 col-lg-5">
        <address class="h2 d-block">328 Swanston St
          <br>Melbourne, VIC 3000</address>
        <div class="mb-3">
          <span class="d-block lead">E: <a href="#">contact@insight.io</a>
          </span>
          <span class="d-block lead">T: +61 7264 2927</span>
        </div>
        <p class="lead">Give us a call or drop by anytime, we endeavour to answer all enquiries
          within 24 hours on business days.</p>
      </div>
      <div class="col-md-6">
        <form>
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Your Name">
          </div>
          <div class="form-group">
            <input type="email" class="form-control" placeholder="you@yoursite.com">
          </div>
          <div class="form-group">
            <textarea class="form-control" rows="4" placeholder="Type message here"></textarea>
          </div>
          <div>
            <button class="btn btn-primary" type="submit">Send Message</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row justify-content-around align-items-center">
      <div class="col-lg-4 mb-3 mb-lg-0">
        <span class="h2 d-block">Receive no-obligation quotes instantly on your selected cover.</span>
        <p
        class="lead">Insight includes everything you'll need to build a beautiful website.</p>
      </div>
      <div class="col-xl-6 col-lg-7">
        <form>
          <div class="row">
            <div class="col-sm-6">
              <div class="form-group">
                <label for="rich-form-2-name">Full Name:</label>
                <input id="rich-form-2-name" name="name" type="text"
                class="form-control">
              </div>
            </div>
            <div class="col-sm-6">
              <div class="form-group">
                <label for="rich-form-2-phone">Phone:</label>
                <input id="rich-form-2-phone" name="phone" type="tel" class="form-control">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="form-group">
                <label for="rich-form-2-email">Email Address:</label>
                <input id="rich-form-2-email" name="email" type="email"
                class="form-control">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-6">
              <div class="form-group">
                <label for="rich-form-1-select-2">State:</label>
                <select class="custom-select form-control" id="rich-form-1-select-2">
                  <option value="1" selected>Victoria</option>
                  <option value="2">New South Wales</option>
                  <option value="3">Queensland</option>
                  <option value="4">ACT</option>
                  <option value="5">Tasmania</option>
                  <option value="6">South Australia</option>
                  <option value="7">Western Australia</option>
                  <option value="8">Northern Territory</option>
                </select>
              </div>
            </div>
            <div class="col-sm-6">
              <div class="form-group">
                <label for="rich-form-2-select-2a">Age:</label>
                <select class="custom-select form-control" id="rich-form-2-select-2a">
                  <option selected>Select One</option>
                  <option value="2">18 - 25</option>
                  <option value="3">25 - 30</option>
                  <option value="4">30 - 40</option>
                  <option value="5">40 - 50</option>
                  <option value="6">50+</option>
                </select>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="form-group mb-0">
                <label>Cover For:</label>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-6">
              <div class="custom-control custom-checkbox p-0">
                <input type="checkbox" class="custom-control-input" id="customCheck1">
                <label class="card card-body flex-md-row align-items-center text-center"
                for="customCheck1">
                  <img src="assets/img/icons/icon81.svg" alt="Icon" class="icon icon-sm">
                  <span class="h6 mb-0 ml-md-2">Life Insurance</span>
                </label>
              </div>
            </div>
            <div class="col-6">
              <div class="custom-control custom-checkbox p-0">
                <input type="checkbox" class="custom-control-input" id="customCheck2">
                <label class="card card-body flex-md-row align-items-center text-center"
                for="customCheck2">
                  <img src="assets/img/icons/icon65.svg" alt="Icon" class="icon icon-sm">
                  <span class="h6 mb-0 ml-md-2">Income Protection</span>
                </label>
              </div>
            </div>
            <div class="col-6">
              <div class="custom-control custom-checkbox p-0">
                <input type="checkbox" class="custom-control-input" id="customCheck3">
                <label class="card card-body flex-md-row align-items-center text-center"
                for="customCheck3">
                  <img src="assets/img/icons/icon34.svg" alt="Icon" class="icon icon-sm">
                  <span class="h6 mb-0 ml-md-2">Home &amp; Contents</span>
                </label>
              </div>
            </div>
            <div class="col-6">
              <div class="custom-control custom-checkbox p-0">
                <input type="checkbox" class="custom-control-input" id="customCheck4">
                <label class="card card-body flex-md-row align-items-center text-center"
                for="customCheck4">
                  <img src="assets/img/icons/icon70.svg" alt="Icon" class="icon icon-sm">
                  <span class="h6 mb-0 ml-md-2">Business Insurance</span>
                </label>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <button class="btn btn-lg btn-primary btn-block mb-1" type="submit">Display Quotes</button>
              <small>* 100% Privacy Guaranteed, view our <a href="#">Privacy Policy</a> here.</small>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row justify-content-between align-items-center">
      <div class="col-lg-4 mb-3">
        <span class="h2 d-block">Request your personalised product demonstration.</span>
        <p class="lead">Insight includes everything you'll need to build a beautiful website.</p>
        <ul
        class="list-unstyled mt-3">
          <li class="d-flex align-items-center my-2">
            <img src="assets/img/icons/icon71.svg" alt="Icon" class="icon icon-sm mr-3">
            <span class="h6 mb-0">Rapid Deployment</span>
          </li>
          <li class="d-flex align-items-center my-2">
            <img src="assets/img/icons/icon26.svg" alt="Icon" class="icon icon-sm mr-3">
            <span class="h6 mb-0">Improve team communication</span>
          </li>
          <li class="d-flex align-items-center my-2">
            <img src="assets/img/icons/icon40.svg" alt="Icon" class="icon icon-sm mr-3">
            <span class="h6 mb-0">Accessible, anywhere</span>
          </li>
          </ul>
      </div>
      <div class="col-lg-7">
        <form>
          <div class="row">
            <div class="col">
              <div class="form-group">
                <label for="rich-form-1-email">Email / Work Email:</label>
                <input id="rich-form-1-email" type="email"
                class="form-control" placeholder="you@domain.com" name="email" />
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-6">
              <div class="form-group">
                <label for="rich-form-1-first">First Name:</label>
                <input id="rich-form-1-first" type="text" class="form-control"
                name="first-name">
              </div>
            </div>
            <div class="col-sm-6">
              <div class="form-group">
                <label for="rich-form-1-last">Last Name:</label>
                <input id="rich-form-1-last" type="text" class="form-control"
                name="last-name">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="form-group">
                <label for="rich-form-1-org">Company / Organisation</label>
                <input class="form-control" id="rich-form-1-org"
                type="text" name="org">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-6">
              <div class="form-group">
                <label for="rich-form-1-select">Size of organisation</label>
                <select class="custom-select form-control"
                id="rich-form-1-select">
                  <option selected>Select Size</option>
                  <option value="1">0 - 10 Members</option>
                  <option value="2">10 - 100 Members</option>
                  <option value="3">100+ Members</option>
                </select>
              </div>
            </div>
            <div class="col-sm-6">
              <div class="form-group">
                <label for="rich-form-1-role">Your Role:</label>
                <input id="rich-form-1-role" name="role" type="text"
                class="form-control" />
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="form-group">
                <label for="rich-form-1-text">Additional Information</label>
                <textarea name="text" id="rich-form-1-text"
                rows="5" class="form-control"></textarea>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="form-group">
                <div class="custom-control custom-checkbox custom-checkbox-switch">
                  <input type="checkbox" class="custom-control-input" id="rich-form-1-switch">
                  <label class="custom-control-label" for="rich-form-1-switch">Request Slack channel invite</label>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <button class="btn btn-primary btn-lg btn-block mb-1" type="submit">Submit Request</button>
              <small>We'll repond to your request personally within 24 hours.</small>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row justify-content-around">
      <div class="col-md-6 d-flex">
        <div class="position-relative rounded o-hidden w-100 h-100 shadow">
          <div class="position-absolute w-100 h-100" data-marker-image="assets/img/map-marker.svg"
          data-maps-api-key="AIzaSyCfo_V3gmpPm1WzJEC9p_sRbgvyVbiO83M" data-address="328 Swanston St Melbourne Victoria"
          data-map-zoom="14">
            <div class="map-marker" data-address="328 Swanston St Melbourne Victoria"></div>
          </div>
        </div>
      </div>
      <div class="col-lg-5 col-md-6">
        <address class="h2 d-block">328 Swanston St
          <br>Melbourne, VIC 3000</address>
        <div class="mb-3">
          <span class="d-block lead">E: <a href="#">contact@insight.io</a>
          </span>
          <span class="d-block lead">T: +61 7264 2927</span>
        </div>
        <form>
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Your Name">
          </div>
          <div class="form-group">
            <input type="email" class="form-control" placeholder="you@yoursite.com">
          </div>
          <div class="form-group">
            <textarea class="form-control" rows="4" placeholder="Type message here"></textarea>
          </div>
          <div>
            <button class="btn btn-primary" type="submit">Send Message</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

<section class="bg-dark">
  <img src="assets/img/contact-1.jpg" alt="bg" class="bg-image">
  <div class="container">
    <div class="row">
      <div class="col-lg-5">
        <div class="card mb-0 card-body py-4">
          <address class="h2 d-block">328 Swanston St,
            <br>Melbourne, VIC 3000</address>
          <div class="mb-3">
            <span class="d-block lead">E: <a href="#">contact@insight.io</a>
            </span>
            <span class="d-block lead">T: +61 7264 2927</span>
          </div>
          <form>
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Your Name">
            </div>
            <div class="form-group">
              <input type="email" class="form-control" placeholder="you@yoursite.com">
            </div>
            <div class="form-group">
              <textarea class="form-control" rows="4" placeholder="Type message here"></textarea>
            </div>
            <div>
              <button class="btn btn-primary" type="submit">Send Message</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-xl-9 col-lg-10">
        <form class="wizard card">
          <ul class="nav nav-tabs card-header text-center bg-light p-0">
            <li class="nav-item flex-fill"> <a class="nav-link" href="#first">1. Business Type</a>

            </li>
            <li class="nav-item flex-fill"> <a class="nav-link" href="#second">2. Information</a>

            </li>
            <li class="nav-item flex-fill"> <a class="nav-link" href="#third">3. Your Details</a>

            </li>
            <li class="nav-item flex-fill"> <a class="nav-link" href="#fourth">4. Confirm</a>

            </li>
          </ul>
          <div class="tab-content">
            <div id="first">
              <div class="card-body py-4">
                <div class="mb-4 text-center">
                  <span class="h3 d-block">What kind of business are you?</span>
                  <p class="lead">Here's a brief description of this step in the process.</p>
                </div>
                <div class="row">
                  <div class="col-sm mb-3 mb-sm-0">
                    <button class="sw-btn-next btn btn-block btn-outline-light border py-4"
                    type="button">
                      <img src="assets/img/icons/icon14.svg" alt="Image" class="icon mb-3">
                      <span class="h6 mb-0 d-block">Solo / Freelance</span>
                    </button>
                  </div>
                  <div class="col-sm mb-3 mb-sm-0">
                    <button class="sw-btn-next btn btn-block btn-outline-light border py-4"
                    type="button">
                      <img src="assets/img/icons/icon71.svg" alt="Image" class="icon mb-3">
                      <span class="h6 mb-0 d-block">Startup</span>
                    </button>
                  </div>
                  <div class="col-sm mb-3 mb-sm-0">
                    <button class="sw-btn-next btn btn-block btn-outline-light border py-4"
                    type="button">
                      <img src="assets/img/icons/icon70.svg" alt="Image" class="icon mb-3">
                      <span class="h6 mb-0 d-block">Established Business</span>
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <div id="second">
              <div class="card-body py-4">
                <div class="mb-4 text-center">
                  <span class="h3 d-block">Tell us about your business</span>
                  <p class="lead">Here's a brief description of this step in the process.</p>
                </div>
                <div class="row justify-content-center">
                  <div class="col-xl-8 col-lg-10">
                    <div class="form-group">
                      <label for="business-name">Business Name:</label>
                      <input id="business-name" type="text" class="form-control"
                      name="business-name">
                    </div>
                    <div class="form-group">
                      <label for="business-website">Website URL:</label>
                      <input id="business-website" type="url" class="form-control"
                      name="business-website" placeholder="eg: http://companywebsite.co/">
                    </div>
                    <div class="form-group">
                      <label for="business-industry">Industry:</label>
                      <input id="business-industry" type="text" class="form-control"
                      name="business-industry">
                    </div>
                    <div class="form-group">
                      <label for="business-size">Number of employees:</label>
                      <select id="business-size" class="custom-select form-control">
                        <option selected>Select an option</option>
                        <option value="1">Just me</option>
                        <option value="2">1 - 10</option>
                        <option value="3">10 - 50</option>
                        <option value="4">50+</option>
                      </select>
                    </div>
                    <div class="form-group">
                      <label for="business-budget">Approximate budget:</label>
                      <select id="business-budget" class="custom-select form-control">
                        <option selected>Select an option</option>
                        <option value="1">0 - $1,000</option>
                        <option value="2">$1,000 - $5,000</option>
                        <option value="3">$5,000 - $10,000</option>
                        <option value="4">$10,000+</option>
                      </select>
                    </div>
                    <button class="btn btn-block btn-primary sw-btn-next">Next Step</button>
                  </div>
                </div>
              </div>
            </div>
            <div id="third">
              <div class="card-body py-4">
                <div class="mb-4 text-center">
                  <span class="h3 d-block">How can we contact you?</span>
                  <p class="lead">Here's a brief description of this step in the process.</p>
                </div>
                <div class="row justify-content-center">
                  <div class="col-xl-8 col-lg-10">
                    <div class="row">
                      <div class="col-sm-6">
                        <div class="form-group">
                          <label for="contact-first-name">First Name:</label>
                          <input id="contact-first-name" type="text" class="form-control"
                          name="contact-first-name">
                        </div>
                      </div>
                      <div class="col-sm-6">
                        <div class="form-group">
                          <label for="contact-last-name">Last Name:</label>
                          <input id="contact-last-name" type="text" class="form-control"
                          name="contact-last-name">
                        </div>
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="contact-email">Email Address:</label>
                      <input id="contact-email" type="email" class="form-control"
                      name="contact-email">
                      <small>* We will never share your email address with third parties.</small>
                    </div>
                    <div class="form-group">
                      <label for="contact-number">Contact Number:</label>
                      <input id="contact-number" type="tel" class="form-control"
                      name="contact-number">
                    </div>
                    <button class="btn btn-block btn-primary sw-btn-next">Next Step</button>
                  </div>
                </div>
              </div>
            </div>
            <div id="fourth">
              <div class="card-body p-4 px-lg-5">
                <div class="mb-4 text-center">
                  <div class="icon-rounded bg-success mx-auto mb-3"> <i class="material-icons text-white">check</i>

                  </div>
                  <span class="h3 d-block">Thanks for providing your details.</span>
                  <p class="lead">Please ensure you read our <a href="#">Privacy Policy</a> before submitting
                    your proposal request. You will recieve a personal response within 24 hours.</p>
                  <hr>
                  <div class="custom-control custom-checkbox mb-3">
                    <input type="checkbox" class="custom-control-input" id="privact-policy-agree">
                    <label class="custom-control-label" for="privact-policy-agree">I have read and agree to the Privacy Policy</label>
                  </div>
                  <button class="btn btn-primary" type="submit">Submit Planner</button>
                </div>
              </div>
            </div>
          </div>
        </form>
        <div class="card-footer text-center">
          <small>Having trouble filling out this form? <a href="#">Contact Support</a>

          </small>
        </div>
      </div>
    </div>
  </div>
</section>

<footer class="spacer-y-3 bg-dark">
  <div class="container">
    <div class="row">
      <div class="col-6 col-md-3 mb-3 mb-md-0">
        <h5 class="text-white">Product</h5>
        <ul class="list-unstyled">
          <li class="py-0 py-md-1"><a href="#" class="text-white">Features</a>
          </li>
          <li class="py-0 py-md-1"><a href="#" class="text-white">Pricing</a>
          </li>
          <li class="py-0 py-md-1"><a href="#" class="text-white">Case studies</a>
          </li>
          <li class="py-0 py-md-1"><a href="#" class="text-white">Signup</a>
          </li>
          <li class="py-0 py-md-1"><a href="#" class="text-white">Support</a>
          </li>
        </ul>
      </div>
      <div class="col-6 col-md-3 mb-3 mb-md-0">
        <h5 class="text-white">Company</h5>
        <ul class="list-unstyled">
          <li class="py-0 py-md-1"><a href="#" class="text-white">About us</a>
          </li>
          <li class="py-0 py-md-1"><a href="#" class="text-white">Leadership Team</a>
          </li>
          <li class="py-0 py-md-1"><a href="#" class="text-white">Careers</a>
          </li>
          <li class="py-0 py-md-1"><a href="#" class="text-white">Press</a>
          </li>
        </ul>
      </div>
      <div class="col-12 col-md-3 mb-3 mb-md-0">
        <h5 class="text-white">Help &amp; Support</h5>
        <ul class="list-unstyled">
          <li class="py-0 py-md-1"><a href="#" class="text-white">Contact us</a>
          </li>
          <li class="py-0 py-md-1"><a href="#" class="text-white">Locate a branch</a>
          </li>
          <li class="py-0 py-md-1"><a href="#" class="text-white">Important information</a>
          </li>
          <li class="py-0 py-md-1"><a href="#" class="text-white">FAQs</a>
          </li>
        </ul>
      </div>
      <div class="col-12 col-md-3">
        <ul class="list-social-links">
          <li class="text-white"><a href="#"><i class="socicon-facebook"></i></a>
          </li>
          <li class="text-white"><a href="#"><i class="socicon-twitter"></i></a>
          </li>
          <li class="text-white"><a href="#"><i class="socicon-youtube"></i></a>
          </li>
          <li class="text-white"><a href="#"><i class="socicon-linkedin"></i></a>
          </li>
          <li class="text-white"><a href="#"><i class="socicon-instagram"></i></a>
          </li>
        </ul>
      </div>
    </div>
    <div class="row mt-3 mt-md-4">
      <div class="col">
        <span class="text-small text-white opacity-50">&copy; 2018 Medium Rare ABN: 88 88888 88888 and Australian Credit License
          No 88888888</span>
      </div>
    </div>
    <div class="row mt-3">
      <div class="col">
        <ul class="list-unstyled d-flex list-pipe-separator">
          <li><a href="#" class="text-white text-small">Privacy Policy</a>
          </li>
          <li><a href="#" class="text-white text-small">Terms and Conditions</a>
          </li>
          <li><a href="#" class="text-white text-small">Information Statement</a>
          </li>
          <li><a href="#" class="text-white text-small">Sitemap</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</footer>

<footer class="bg-dark spacer-y-3">
  <div class="container">
    <div class="row">
      <div class="col-xl-6 col-lg-5 col-md-4 mb-3 mb-md-0"> <a href="index.html">
          <img src="assets/img/logo-white.svg" alt="Logo" />
        </a>

      </div>
      <div class="col-xl-6 col-lg-7 col-md-8">
        <div class="list-group"> <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center bg-dark px-0">
        <div class="d-flex align-items-center">
            <span class="mb-0 h5 text-white">Product Features</span>
        </div>
        <i class="material-icons d-block text-white">keyboard_arrow_right</i>
    </a>
 <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center bg-dark px-0">
        <div class="d-flex align-items-center">
            <span class="mb-0 h5 text-white">Why Insight?</span>
        </div>
        <i class="material-icons d-block text-white">keyboard_arrow_right</i>
    </a>
 <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center bg-dark px-0">
        <div class="d-flex align-items-center">
            <span class="mb-0 h5 text-white">Our Company</span>
        </div>
        <i class="material-icons d-block text-white">keyboard_arrow_right</i>
    </a>

        </div>
        <ul class="list-unstyled mt-2 mt-md-3">
          <li class="py-1"><a href="#" class="text-white">Support Center</a>
          </li>
          <li class="py-1"><a href="#" class="text-white">Terms &amp; Conditions</a>
          </li>
          <li class="py-1"><a href="#" class="text-white">Privacy Policy</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="row justify-content-between align-items-center mt-3 mt-md-4">
      <div class="col-lg-auto col-12 order-lg-2">
        <ul class="list-social-links d-flex mb-lg-0">
          <li class="text-white"><a href="#"><i class="socicon-facebook"></i></a>
          </li>
          <li class="text-white"><a href="#"><i class="socicon-twitter"></i></a>
          </li>
          <li class="text-white"><a href="#"><i class="socicon-youtube"></i></a>
          </li>
          <li class="text-white"><a href="#"><i class="socicon-linkedin"></i></a>
          </li>
          <li class="text-white"><a href="#"><i class="socicon-instagram"></i></a>
          </li>
        </ul>
      </div>
      <div class="col order-lg-1">
        <span class="text-small text-white opacity-50">&copy; 2018 Medium Rare ABN: 88 88888 88888 and Australian Credit License
          No 88888888</span>
      </div>
    </div>
  </div>
</footer>

<footer class="bg-dark spacer-y-3">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-auto mb-3 mb-md-0"> <a href="index.html">
          <img src="assets/img/logo-white.svg" alt="Logo" />
        </a>

      </div>
      <div class="col-12 col-md-auto">
        <ul class="list-unstyled d-md-flex mb-0">
          <li class="mx-md-2"><a href="#" class="text-white">Product Features</a>
          </li>
          <li class="mx-md-2"><a href="#" class="text-white">Why Insight?</a>
          </li>
          <li class="mx-md-2"><a href="#" class="text-white">Customers</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="row justify-content-between align-items-center mt-3 mt-md-4">
      <div class="col-lg-auto col-12 order-lg-2">
        <ul class="list-social-links d-flex mb-lg-0">
          <li class="text-white"><a href="#"><i class="socicon-facebook"></i></a>
          </li>
          <li class="text-white"><a href="#"><i class="socicon-twitter"></i></a>
          </li>
          <li class="text-white"><a href="#"><i class="socicon-youtube"></i></a>
          </li>
          <li class="text-white"><a href="#"><i class="socicon-linkedin"></i></a>
          </li>
          <li class="text-white"><a href="#"><i class="socicon-instagram"></i></a>
          </li>
        </ul>
      </div>
      <div class="col order-lg-1">
        <span class="text-small text-white opacity-50">&copy; 2018 Medium Rare ABN: 88 88888 88888 and Australian Credit License
          No 88888888</span>
      </div>
    </div>
  </div>
</footer>

<section class="bg-white pb-md-0 pt-md-4">
  <div class="container">
    <div class="row justify-content-around align-items-center flex-md-row-reverse">
      <div class="col-md col-lg-6">
        <div class="d-flex mb-3"> <i class="material-icons text-warning">star</i>
 <i class="material-icons text-warning">star</i>

          <i
          class="material-icons text-warning">star</i> <i class="material-icons text-warning">star</i>
 <i class="material-icons text-warning">star</i>

        </div>
        <span class="h2 d-block">&ldquo;Using Insight has allowed me to expand my business beyond my wildest
          dreams, the team knew all the tricks.&rdquo;</span>
        <span>Adam Richards, Business Owner</span>
      </div>
      <div class="col-3 mt-md-4 mt-lg-0">
        <img class="d-none d-md-block" src="assets/img/male-isolated-1.jpg" alt="Image"
        />
      </div>
    </div>
  </div>
</section>

<section class="o-hidden">
  <div class="container">
    <div class="slider-highlight-selected" data-flickity='{ "cellAlign": "center", "contain": true, "imagesLoaded": true, "wrapAround": true }'>
      <div class="col-md-6 col-xl-5 text-center carousel-cell">
        <div class="d-flex justify-content-center mb-3"> <i class="material-icons text-warning">star</i>
 <i class="material-icons text-warning">star</i>

          <i
          class="material-icons text-warning">star</i> <i class="material-icons text-warning">star</i>
 <i class="material-icons text-warning">star</i>

        </div>
        <span class="h4 d-block">&ldquo;Using Insight has allowed me to expand my business beyond my wildest
          dreams, the team knew all the tricks.&rdquo;</span>
        <img src="assets/img/avatar-male-3.jpg"
        alt="Adam Richards, Business Owner" class="avatar mr-2">
        <span class="d-block mt-2">Adam Richards, Business Owner</span>
      </div>
      <div class="col-md-6 col-xl-5 text-center carousel-cell">
        <div class="d-flex justify-content-center mb-3"> <i class="material-icons text-warning">star</i>
 <i class="material-icons text-warning">star</i>

          <i
          class="material-icons text-warning">star</i> <i class="material-icons text-warning">star</i>
 <i class="material-icons text-warning">star</i>

        </div>
        <span class="h4 d-block">&ldquo;After Insight, I can't see myself going back to the old way of
          doings things. It has been a total life-saver!&rdquo;</span>
        <img src="assets/img/avatar-female-3.jpg"
        alt="Lou-Anne, Freelancer" class="avatar mr-2">
        <span class="d-block mt-2">Lou-Anne, Freelancer</span>
      </div>
      <div class="col-md-6 col-xl-5 text-center carousel-cell">
        <div class="d-flex justify-content-center mb-3"> <i class="material-icons text-warning">star</i>
 <i class="material-icons text-warning">star</i>

          <i
          class="material-icons text-warning">star</i> <i class="material-icons text-warning">star</i>
 <i class="material-icons text-warning">star</i>

        </div>
        <span class="h4 d-block">&ldquo;Big ups for the support team. They were on-hand to assist me within
          minutes and were all too happy to help.&rdquo;</span>
        <img src="assets/img/avatar-male-4.jpg"
        alt="Jason Tyrell" class="avatar mr-2">
        <span class="d-block mt-2">Jason Tyrell</span>
      </div>
      <div class="col-md-6 col-xl-5 text-center carousel-cell">
        <div class="d-flex justify-content-center mb-3"> <i class="material-icons text-warning">star</i>
 <i class="material-icons text-warning">star</i>

          <i
          class="material-icons text-warning">star</i> <i class="material-icons text-warning">star</i>
 <i class="material-icons text-warning">star</i>

        </div>
        <span class="h4 d-block">&ldquo;Couldn't be happier with the work.&rdquo;</span>
        <img src="assets/img/avatar-female-2.jpg"
        alt="Abigail Standley" class="avatar mr-2">
        <span class="d-block mt-2">Abigail Standley</span>
      </div>
    </div>
  </div>
</section>

<section>
  <img src="assets/img/header-11.jpg" alt="Image" class="bg-image">
  <div class="container">
    <div class="row">
      <div class="col-lg-6 col-xl-5 col-md-7">
        <div class="card card-body p-4 p-lg-5">
          <div class="d-flex mb-3"> <i class="material-icons text-warning">star</i>
 <i class="material-icons text-warning">star</i>

            <i
            class="material-icons text-warning">star</i> <i class="material-icons text-warning">star</i>
 <i class="material-icons text-warning">star</i>

          </div>
          <span class="h3 d-block mb-4">“Using Insight has allowed me to expand my business beyond my wildest
            dreams, the team knew all the tricks.”</span>
          <div class="d-flex align-items-center">
            <img src="assets/img/avatar-male-4.jpg" alt="Image" class="avatar">
            <div class="ml-2">
              <span class="h6 d-block mb-0">David Houser</span>
              <span>Business Owner</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row justify-content-around">
      <div class="col-lg-5 align-self-center mb-3 mb-lg-0">
        <div class="pr-lg-4">
          <span class="h2 d-block">A video to demontstrate your product or service</span>
          <p class="lead mb-0">Include some additional text here to help describe an important facet
            of your product or service.</p>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="video-cover rounded">
          <img alt="Image" src="assets/img/header-11.jpg" class="bg-image" />
          <div class="video-play-icon"></div>
          <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" data-src="https://www.youtube.com/embed/DYaq2sWTWAA?rel=0&amp;showinfo=0&amp;autoplay=1"
            allowfullscreen allow="autoplay; encrypted-media"></iframe>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>