.icon-anim-component {
  border-radius: 50%;
  margin-top: 30px;
}
.icon-anim-component>div {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.icon-anim-top {
    align-content: center;
    /* background-color: white; */
    /*pointer-events: none;*/
    animation: iconHoverOff .4s forwards;
    position: relative;
    z-index: 1;
    margin: auto;
    width: 65%;
}

.icon-anim-bottom {
    align-items: center;
    position: absolute;
    z-index: 0;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    opacity: 0;
    transition: opacity 350ms;
}

.icon-anim-bottom p {
  margin-bottom: 0px;
}

.icon-anim-component>h3 {
  text-align: center;
  margin-top: 18px;
}

.icon-anim-component button {
    width: fit-content;
}

/* .icon-anim-component:hover > .icon-anim-top {
    animation-name: iconHoverOn;
    animation-duration: 400ms;
  }

  .icon-anim-component:hover > .icon-anim-bottom {
    opacity: 1;
  } */

/*Icon animation start*/
@keyframes iconHoverOn {
    0%{
      transform: scale(1) translateY(0px);
      opacity: 1;
    }
    70%{
        opacity: 0;
    }
    100%{
        transform: scale(1.4) translateY(12px);
        opacity: 0;
        display: none;
    }
  }
  
  
  @keyframes iconHoverOff {
    0%{
      transform: scale(1.4) translateY(12px);
      opacity: 0;
    }
    100%{
      transform: scale(1) translateY(0px);
      opacity: 1;
      display: block;
    }
  }
  /*Icon animation end*/
  
  /*Text animation start*/
  @keyframes textAnimationIn {
    0%{
      transform: scale(.8) translateY(-210px);
      opacity: 0;
    }
    100%{
      transform: scale(1) translateY(-250px);
      opacity: 1;
    }
  }
  
  @keyframes textAnimationOut {
    0%{
      transform: scale(1) translateY(-250px);
      opacity: 1;
    }
    70%{
      opacity: 0;
    }
    100%{
      transform: scale(.8) translateY(-210px);
      opacity: 0;
    }
  }
  /*Text animation end*/