.animatable {
    /* initially hide animatable objects */
    visibility: hidden;
  
    /* initially pause animatable objects their animations */
    animation-play-state: paused;
  }
  
  /* show objects being animated */
  .animated {
    visibility: visible;
  
    animation-fill-mode: both;
    animation-duration: 1s;
    animation-play-state: running;
  }
  
  /* CSS Animations (extracted from http://glifo.uiparade.com/) */
  @keyframes fadeIn {
    0%,
    60% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  
  @keyframes fadeInDown {
    0% {
      opacity: 0;
      transform: translateY(-20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes fadeInUp {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes fadeInUpText {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes bounceIn {
    0% {
      opacity: 0;
      transform: scale(0.3);
    }
    50% {
      transform: scale(1.05);
    }
    70% {
      transform: scale(0.9);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
  @keyframes fadeInLeft {
    0% {
      opacity: 0;
      transform: translateX(-60px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
  @keyframes bounceInLeft {
    0% {
      opacity: 0;
      transform: translateX(-2000px);
    }
    60% {
      transform: translateX(20px);
    }
    80% {
      transform: translateX(-5px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes bounceInRight {
    0% {
      opacity: 0;
      transform: translateX(2000px);
    }
    60% {
      transform: translateX(-20px);
    }
    80% {
      transform: translateX(5px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes moveUp {
    0% {
      transform: translateY(40px);
    }
    100% {
      transform: translateY(0);
    }
  }
  
  @keyframes fadeBgColor {
    0%,
    70% {
      background: none;
    }
    100% {
      background: #464646;
    }
  }
  
  .animated.animationDelay {
    animation-delay: 0.4s;
  }
  .animated.animationDelayMed {
    animation-delay: 1.2s;
  }
  .animated.animationDelayLong {
    animation-delay: 1.6s;
  }
  .animated.fadeBgColor {
    animation-name: fadeBgColor;
  }
  .animated.bounceIn {
    animation-name: bounceIn;
  }
  .animated.bounceInRight {
    animation-name: bounceInRight;
  }
  .animated.bounceInLeft {
    animation-name: bounceInLeft;
  }
  .animated.fadeIn {
    animation-name: fadeIn;
  }
  .animated.fadeInDown {
    animation-name: fadeInDown;
  }
  .animated.fadeInUp {
    animation-name: fadeInUp;
  }
  .animated.moveUp {
    animation-name: moveUp;
  }
.fadeInUpText{
    animation-name: fadeInUpText;
    animation: fadeInUpText 2s 1;
    
}
  /* header */
  .fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 12;
    /* backdrop-filter: blur(128px); */
    /* background-color: #fff; */
    background-color: #F6F7FA;
    box-shadow: 0 -6px 10px 5px rgba(0, 0, 0, 0.2);
   
}
.padd-top{
    padding-top: 78px;
}