.whatss-container, .whatss-icons {
    align-items: center;
    display: flex
}

.whatss-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    flex-direction: row-reverse;
    z-index: 1000
}

.whatss-icons {
    width: 60px;
    height: 60px;
    background-color: #25d366;
    border-radius: 50%;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    z-index: 2;
    transition: transform .3s;
    animation: 2s infinite pulse-green
}

    .whatss-icons:hover {
        transform: scale(1.1)
    }

    .whatss-icons svg {
        width: 34px;
        height: 34px;
        fill: white
    }

.whatss-balloon {
    position: relative;
    background: #f5f5f5;
    color: #444;
    padding: 10px 16px;
    border-radius: 15px;
    margin-right: -150px;
    box-shadow: 0 4px 15px rgba(0,0,0,.1);
    font-weight: 500;
    font-size: 15px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s,transform .5s;
    transform: translateX(10px);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 1px;
}

.wave-emoji {
    display: inline-block;
    font-size: 20px;
    animation: 2.5s infinite wave-animation;
    transform-origin: 70% 70%
}

@keyframes wave-animation {
    0%,100% {
        transform: rotate(0)
    }

    10%,30%,50% {
        transform: rotate(14deg)
    }

    20%,40% {
        transform: rotate(-8deg)
    }
}

.whatss-balloon::after {
    content: "";
    position: absolute;
    right: -200px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #f5f5f5;
}

.whatss-balloon.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    width: 190px;
    margin-right: 15px;
}

.icon-hi {
    width: 24px;
    height: 24px;
    fill: #25d366
}

@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0 rgba(37,211,102,.6)
    }

    70% {
        box-shadow: 0 0 0 15px rgba(37,211,102,0)
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37,211,102,0)
    }
}

@media screen and (max-width: 767px) {
    .whatss-container {
        position: fixed !important;
        bottom: 30px;
        right: 175px;
    }
}