.pre-loading {
    overflow: hidden;
    height: 100%;
  }
  
  .spinner-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
  
    background: #fff; /* fallback for old browsers */
    /* background: -webkit-linear-gradient(to right, #E9E4F0, #D3CCE3); 
      background: linear-gradient(to right, #E9E4F0, #D3CCE3); */
  }
  
  .spinner {
    position: absolute;
    height: 100%;
    position: relative;
    text-align: center;
  }
  
  .hello-parent {
    margin: 0;
    height: 100%;
    width: 100%;
    display: flex;
    background: #fff;
    background: #fff; /* fallback for old browsers */
    /* background: -webkit-linear-gradient(to right, #E9E4F0, #D3CCE3);  
      background: linear-gradient(to right, #E9E4F0, #D3CCE3);  */
  }
  
  .hello-word {
    margin: auto;
  }
  /* H Animation */
  
  .H-left-stroke {
    stroke-dasharray: 124px;
    stroke-dashoffset: 124px;
    animation: H-left-move 20s ease forwards;
  }
  
  .H-mid-stroke {
    stroke-dasharray: 37px;
    stroke-dashoffset: 37px;
    animation: H-mid-move 9s ease forwards;
  }
  
  .H-right-stroke {
    stroke-dasharray: 124px;
    stroke-dashoffset: 124px;
    animation: H-right-move 13s ease forwards;
  }
  
  @keyframes H-left-move {
    0% {
      stroke-dashoffset: 124px;
    }
    5% {
      stroke-dashoffset: 0px;
    }
    100% {
      stroke-dashoffset: 0px;
    }
  }
  
  @keyframes H-mid-move {
    0% {
      stroke-dashoffset: 37px;
    }
    5% {
      stroke-dashoffset: 37px;
    }
    10% {
      stroke-dashoffset: 0px;
    }
    100% {
      stroke-dashoffset: 0px;
    }
  }
  
  @keyframes H-right-move {
    0% {
      stroke-dashoffset: 124px;
    }
    5% {
      stroke-dashoffset: 124px;
    }
    10% {
      stroke-dashoffset: 0px;
    }
    100% {
      stroke-dashoffset: 0px;
    }
  }
  
  /* E Animation */
  
  .E-left-stroke {
    stroke-dasharray: 124px;
    stroke-dashoffset: 124px;
    animation: E-left-move 20s ease forwards;
  }
  
  .E-top-stroke {
    stroke-dasharray: 47px;
    stroke-dashoffset: 47px;
    animation: E-top-move 10s ease forwards;
  }
  
  .E-mid-stroke {
    stroke-dasharray: 42px;
    stroke-dashoffset: 42px;
    animation: E-mid-move 10s ease forwards;
  }
  
  .E-bottom-stroke {
    stroke-dasharray: 47px;
    stroke-dashoffset: 47px;
    animation: E-bottom-move 10s ease forwards;
  }
  
  @keyframes E-left-move {
    0% {
      stroke-dashoffset: 124px;
    }
    2% {
      stroke-dashoffset: 124px;
    }
    6% {
      stroke-dashoffset: 0px;
    }
    100% {
      stroke-dashoffset: 0px;
    }
  }
  
  @keyframes E-top-move {
    0% {
      stroke-dashoffset: 47px;
    }
    6% {
      stroke-dashoffset: 47px;
    }
    11% {
      stroke-dashoffset: 0px;
    }
    100% {
      stroke-dashoffset: 0px;
    }
  }
  
  @keyframes E-mid-move {
    0% {
      stroke-dashoffset: 42px;
    }
    8% {
      stroke-dashoffset: 42px;
    }
    13% {
      stroke-dashoffset: 0px;
    }
    100% {
      stroke-dashoffset: 0px;
    }
  }
  
  @keyframes E-bottom-move {
    0% {
      stroke-dashoffset: 47px;
    }
    11% {
      stroke-dashoffset: 47px;
    }
    16% {
      stroke-dashoffset: 0px;
    }
    100% {
      stroke-dashoffset: 0px;
    }
  }
  
  /* L One Animation */
  
  .L-one-long-stroke {
    stroke-dasharray: 124px;
    stroke-dashoffset: 124px;
    animation: L-one-long-move 20s ease forwards;
  }
  
  .L-one-short-stroke {
    stroke-dasharray: 44px;
    stroke-dashoffset: 44px;
    animation: L-one-short-move 10s ease forwards;
  }
  
  @keyframes L-one-long-move {
    0% {
      stroke-dashoffset: 124px;
    }
    2% {
      stroke-dashoffset: 124px;
    }
    7% {
      stroke-dashoffset: 0px;
    }
    100% {
      stroke-dashoffset: 0px;
    }
  }
  
  @keyframes L-one-short-move {
    0% {
      stroke-dashoffset: 44px;
    }
    13% {
      stroke-dashoffset: 44px;
    }
    18% {
      stroke-dashoffset: 0px;
    }
    100% {
      stroke-dashoffset: 0px;
    }
  }
  
  /* L Two Animation */
  
  .L-two-long-stroke {
    stroke-dasharray: 124px;
    stroke-dashoffset: 124px;
    animation: L-two-long-move 20s ease forwards;
  }
  
  .L-two-short-stroke {
    stroke-dasharray: 44px;
    stroke-dashoffset: 44px;
    animation: L-two-short-move 10s ease forwards;
  }
  
  @keyframes L-two-long-move {
    0% {
      stroke-dashoffset: 124px;
    }
    3% {
      stroke-dashoffset: 124px;
    }
    8% {
      stroke-dashoffset: 0px;
    }
    100% {
      stroke-dashoffset: 0px;
    }
  }
  
  @keyframes L-two-short-move {
    0% {
      stroke-dashoffset: 44px;
    }
    15% {
      stroke-dashoffset: 44px;
    }
    20% {
      stroke-dashoffset: 0px;
    }
    100% {
      stroke-dashoffset: 0px;
    }
  }
  
  /* O Animation */
  
  .O-stroke {
    stroke-dasharray: 302px;
    stroke-dashoffset: 302px;
    animation: O-move 20s ease forwards;
  }
  
  @keyframes O-move {
    0% {
      stroke-dashoffset: 302px;
    }
    4% {
      stroke-dashoffset: 302px;
    }
    9% {
      stroke-dashoffset: 0px;
    }
    100% {
      stroke-dashoffset: 0px;
    }
  }
  
  /* Red Dot Animation */
  
  .red-dot {
    stroke-width: 44px;
    stroke-linecap: round;
    animation: red-dot-grow 8s ease-out forwards;
  }
  
  @keyframes red-dot-grow {
    0% {
      stroke-width: 0px;
    }
    15% {
      stroke-width: 0px;
    }
    20% {
      stroke-width: 44px;
    }
    100% {
      stroke-width: 44px;
    }
  }
  
  #hello {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.5s ease-out;
  }
  
  #hello.hidden {
    opacity: 0;
    pointer-events: none;
  }
  
  .abt-pre {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #fff;
  }
  
  h4 {
    position: relative;
    font-size: 14vw;
    color: #252839;
    /*     -webkit-text-stroke: 0.3vw #383d52; */
    text-transform: uppercase;
    font-weight: 900;
  }
  h4::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fda228;
    -webkit-text-stroke: 0vw #383d52;
    border-right: 2px solid #fda228;
    overflow: hidden;
    animation: animate 3.1s linear infinite;
  }
  @keyframes animate {
    0%,
    10%,
    100% {
      width: 0;
    }
    70%,
    90% {
      width: 100%;
    }
  }
  
  /*=== ABOUT PRELOADER ===*/
  
  .abt-preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
    background: #fff;
  }
  
  .loader-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .slide-effect {
    position: relative;
    overflow: hidden;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .slideUp {
    position: relative;
    font-family: "Anton";
    font-size: 160px;
    opacity: 0;
  }
  
  .slideUp {
    top: 40px;
    left: 10px;
    animation: slideUp ease 1s forwards 0.5s;
  }
  
  @keyframes slideUp {
    0% {
      transform: translateY(0);
    }
  
    100% {
      transform: translateY(-40px);
      opacity: 1;
    }
  }
  
  @media only screen and (max-width: 600px) {
    .slide-effect,
    .slideUp {
      font-size: 120px;
    }
  }
  
  /*=== END OF ABOUT PRELOADER ===*/