.whatsapp-container{
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:99999;
}

.whatsapp-btn{
    width:54px;
    height:54px;
    border-radius:50%;
    background:#25D366;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;

    box-shadow:
        0 8px 22px rgba(0,0,0,.18),
        0 2px 8px rgba(0,0,0,.12);

    transition:
        transform .45s cubic-bezier(.22,1,.36,1),
        box-shadow .45s cubic-bezier(.22,1,.36,1);

    animation: whatsappPulse 3s infinite;
}

.whatsapp-btn svg{
    width:28px;
    height:28px;
}

.whatsapp-btn:hover{

    transform:
        translateY(-4px)
        scale(1.08);

    box-shadow:
        0 16px 35px rgba(0,0,0,.25),
        0 4px 12px rgba(0,0,0,.15);

    animation:none;
}

.whatsapp-tooltip{

    position:absolute;

    right:72px;
    top:50%;

    transform:
        translateY(-50%)
        translateX(15px);

    background:#2D5F66;
    color:#fff;

    padding:12px 18px;

    border-radius:10px;

    font-size:14px;
    font-weight:500;

    white-space:nowrap;

    opacity:0;

    pointer-events:none;

    transition:
        opacity .45s ease,
        transform .45s cubic-bezier(.22,1,.36,1);

    box-shadow:
        0 10px 28px rgba(0,0,0,.22);
}

.whatsapp-tooltip::after{

    content:"";

    position:absolute;

    right:-7px;

    top:50%;

    transform:translateY(-50%);

    border:7px solid transparent;
    border-left-color:#2D5F66;
}

.whatsapp-container:hover .whatsapp-tooltip{

    opacity:1;

    transform:
        translateY(-50%)
        translateX(0);
}

@keyframes whatsappPulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.06);
    }

    100%{
        transform:scale(1);
    }

}