/* /* ==========================================
   PREMIUM WHATSAPP FLOATING BUTTON
========================================== */

.whatsapp-float {
    position: fixed;
    right: 24px;
    bottom: 24px;

    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(
        135deg,
        #25D366,
        #16A085
    );

    color: #fff;

    border: 3px solid rgba(255,255,255,.85);
    border-radius: 50%;

    font-size: 29px;
    text-decoration: none;

    box-shadow:
        0 8px 25px rgba(22,160,133,.28),
        0 2px 8px rgba(0,0,0,.12);

    z-index: 9999;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


/* ICON */

.whatsapp-float i {
    position: relative;
    z-index: 2;
}


/* HOVER */

.whatsapp-float:hover {
    color: #fff;

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

    box-shadow:
        0 14px 35px rgba(22,160,133,.38),
        0 4px 12px rgba(0,0,0,.15);
}


/* PULSE */

.whatsapp-float::before {

    content: "";

    position: absolute;

    inset: -6px;

    border-radius: 50%;

    border: 2px solid rgba(37,211,102,.35);

    animation:
        whatsappPulse 2.5s infinite;
}


@keyframes whatsappPulse {

    0% {
        transform: scale(.95);
        opacity: .7;
    }

    70% {
        transform: scale(1.3);
        opacity: 0;
    }

    100% {
        transform: scale(1.3);
        opacity: 0;
    }

}


/* ==========================================
   TOOLTIP
========================================== */

.whatsapp-float::after {

    content: "Chat with us";

    position: absolute;

    right: 70px;
    top: 50%;

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

    padding: 8px 12px;

    white-space: nowrap;

    background: #173D45;
    color: #fff;

    border-radius: 8px;

    font-family: inherit;
    font-size: 11px;
    font-weight: 600;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .25s ease,
        transform .25s ease;
}


/* TOOLTIP ARROW */

.whatsapp-float span {
    display: none;
}


.whatsapp-float:hover::after {

    opacity: 1;
    visibility: visible;

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


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 768px) {

    .whatsapp-float {

        right: 18px;
        bottom: 18px;

        width: 54px;
        height: 54px;

        font-size: 27px;
    }

    .whatsapp-float::after {
        display: none;
    }

}