.imageBox {
      position: relative;
      float: left;
      margin: 0 auto;

  }

  .imageBox .hoverImg {
      position: absolute;
      left: 0;
      top: 0;
      display: none;
  }

  .imageBox:hover .hoverImg {
      display: block;
  }


  .path {
      stroke-dasharray: 1000;
      stroke-dashoffset: 1000;
      animation: dash 3s linear forwards;
      animation-iteration-count: 1;
      animation-delay: 1s;
  }

  @keyframes dash {
      to {
          stroke-dashoffset: 0;
      }
  }

  .dashed {
      stroke-dasharray: 5, 12;

  }

  #arrow {
      animation: arrow 2s linear forwards;
      opacity: 0;
  }

  @keyframes arrow {
      to {
          opacity: 1;
      }
  }


  .textdisplay h3::before {

      animation: fadein 4s;
  }

  @keyframes fadein {
      from {
          opacity: 0;
      }

      to {
          opacity: 1;
      }
  }

  .displaytext {

      animation: fadein 5s ease forwards;
      animation-delay: 3s;
      opacity: 0;
  }



  @keyframes fade {

      100% {
          opacity: 1;
      }
  }