/* CSS Floating WA */
.floatingWA {
    cursor: pointer;
    position: fixed;
    bottom: 2em;
    right: 2em;
    background: #23cc62;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .1)
}

.floatingWA.animation {
    animation-name: wobble;
    -webkit-animation-name: wobble;
    -webkit-animation-duration: .8s;
    -webkit-animation-timing-function: linear;
    -webkit-transform-origin: 50% 100%
}

.notifyWA {
    display: none;
    position: absolute;
    right: 0px;
    top: -25px;
    background: #e91b43;
    color: #fff;
    font-size: 10px;
    height: 20px;
    line-height: 20px;
    border-radius: 10px;
    width: max-content;
    padding: 0 10px;
    text-align: center;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .1)
}

@keyframes wobble {
    10%, 90% {
      transform: translate3d(-1px, 0, 0);
    }
    
    20%, 80% {
      transform: translate3d(2px, 0, 0);
    }
  
    30%, 50%, 70% {
      transform: translate3d(-4px, 0, 0);
    }
  
    40%, 60% {
      transform: translate3d(4px, 0, 0);
    }
}
/* ------------------------------ */