.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 .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 ===*/