<!– Header Hero Start –> <header class=“hero”>

<!-- Animation Start -->
<!-- <div class="hero-animation">
  <ul class="cubes">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div> -->
<!-- Animation End -->

<!-- Content Start -->
<div class="container">
  <div class="row">
    <div class="col-lg-8 col-md-10 mx-auto">
      <div class="site-heading">
        <!-- Heading Start -->
        <h1 class="text-white text-center mb-4 display-4 font-weight-bold block-effect">
          <div class="block-reveal">
            {{ site.title | escape }}
          </div>
        </h1>
        <!-- Heading End -->

        <!-- Subheading Start -->
        <p class="lead text-white text-center mb-5">{{ site.tagline | escape }}</p>
        <!-- Subheading End -->
      </div>
    </div>
  </div>
</div>
<!-- Content End -->

<!-- <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div> -->

<!-- <div class="white">
  <div class="squares">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
  </div>
</div>
<div class="grey"></div> -->

</header> <!– Header Hero Start –>

<!– <div class=“area” >

<ul class="circles">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
</ul>

</div > –>