/*==========================================================
ARENASA
FLOATING BUTTON
Version 2.0
==========================================================*/

/*==========================================================
WHATSAPP
==========================================================*/

.floating-whatsapp{

    position:fixed;

    right:28px;

    bottom:100px;

    z-index:9999;

    width:64px;

    height:64px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    text-decoration:none;

    color:#FFFFFF;

    font-size:32px;

    background:linear-gradient(
        135deg,
        #25D366,
        #128C7E
    );

    border:2px solid rgba(255,255,255,.18);

    backdrop-filter:blur(12px);

    box-shadow:

        0 12px 35px rgba(37,211,102,.45),

        inset 0 1px 0 rgba(255,255,255,.20);

    overflow:hidden;

    transition:
        all .35s ease;

    animation:
        waPulse 2.5s infinite;

}

/*==========================================================
SHINE
==========================================================*/

.floating-whatsapp::before{

    content:"";

    position:absolute;

    top:0;

    left:-140%;

    width:80%;

    height:100%;

    background:linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transform:skewX(-25deg);

}

.floating-whatsapp:hover::before{

    animation:waShine .8s forwards;

}

/*==========================================================
PULSE RING
==========================================================*/

.floating-whatsapp::after{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

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

    animation:ring 2.5s infinite;

}

/*==========================================================
ICON
==========================================================*/

.floating-whatsapp i{

    position:relative;

    z-index:2;

}

/*==========================================================
HOVER
==========================================================*/

.floating-whatsapp:hover{

    transform:

        translateY(-8px)

        scale(1.10);

    box-shadow:

        0 25px 60px rgba(37,211,102,.60);

}

/*==========================================================
ANIMATION
==========================================================*/

@keyframes waPulse{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-5px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes ring{

    0%{

        transform:scale(.9);

        opacity:1;

    }

    100%{

        transform:scale(1.4);

        opacity:0;

    }

}

@keyframes waShine{

    from{

        left:-140%;

    }

    to{

        left:170%;

    }

}

/*==========================================================
RESPONSIVE
==========================================================*/

@media(max-width:768px){

    .floating-whatsapp{

        width:58px;

        height:58px;

        font-size:28px;

        right:18px;

        bottom:82px;

    }

}