.floating-block {
    position: fixed;
    z-index: 3100;
    bottom: 50px;
    right: 30px
}


.floating-block__btn {
    --btn-size: 72px;
    --icon-size: 40px;
    position: relative;
    width: var(--btn-size);
    height: var(--btn-size);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffa589;
    transition: all 300ms;
    transition-property: transform, background-color
}





.floating-block__btn:focus, .floating-block__btn:hover {
    transform: scale(1.1)
}



.floating-block__options {
    position: absolute;
    bottom: 100%;
    left: 50%;
    padding: 15px 0;
    transform-origin: 50% 100%;
    transform: translate(-50%, 50px) scale(0);
    transition: transform 300ms
}

.floating-block.active .floating-block__options {
    transform: translate(-50%, 0) scale(1)
}

.floating-block__options > .floating-block__btn {
    --btn-size: 60px;
    margin-bottom: 10px
}

.floating-block__btn--pulsating::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    opacity: .4;
    background-color: #b9140b;
    transform: scale(1.1);
    animation: pulse 2s 1s infinite
}


@keyframes pulse {
    0% {
        transform: scale(1.1)
    }
    60% {
        transform: scale(1.3)
    }
    100% {
        transform: scale(1.1)
    }
}

.floating-block__btn--full-svg {
    --icon-size: 100%;
    background-color: transparent !important
}

.floating-block__btn--telegram {
    background-color: #249bda;
}

.floating-block__btn--telegram:hover {
    background-color: #1299dc;
}


.floating-block__btn--viber {
    background-color: #7360f2
}

.floating-block__btn--phone {
    background-color: #ffa589
}

.floating-block__btn--whatsapp {
    background-color: #25d366
}
.floating-block__btn--instagram {
    fill: white;
    width: 60px;
    height: 60px;
    padding: 3px;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
    border-radius: 50%;
    z-index: 10;
}
.floating-block__btn--facebook {
    fill: white;
    width: 60px;
    height: 60px;
    padding: 3px;
    background: #3b5998;
    border-radius: 50%;
    z-index: 10;
}

.whatsapp-ico{
    fill: white;
    width: 60px;
    height: 60px;
    padding: 3px;
    background-color: #4dc247;
    border-radius: 50%;
    z-index: 10;
}
.messenger-ico{
    fill: white;
    width: 60px;
    height: 60px;
    padding: 3px;
    background: linear-gradient(135deg, #006AFF 0%, #00ACFF 100%);
    border-radius: 50%;
    z-index: 10;
}

.whatsapp-ico:hover{
    box-shadow: 2px 2px 11px rgba(0,0,0,0.7);
}

.floating-block__icon {
    position: relative;
    width: var(--icon-size);
    height: var(--icon-size)
}

.inner-bracket-path, .outer-bracket-path {
    animation: appearRightTop 1s infinite
}

.inner-bracket-path {
    animation-delay: 2s
}

.outer-bracket-path {
    animation-delay: 2.35s
}

@keyframes appearRightTop {
    0% {
        opacity: 0;
        transform: translate(0, 0)
    }
    50% {
        opacity: 1;
        transform: translate(1px, -1px)
    }
    75% {
        opacity: 1;
        transform: translate(1.5px, -1.5px)
    }
    100% {
        opacity: 0;
        transform: translate(2px, -2px)
    }
}

.phone-path {
    transform-origin: 20% 60%;
    animation: shaking 2s infinite
}





@keyframes shaking {
    0% {
        transform: rotate(0deg)
    }
    10% {
        transform: rotate(-8deg)
    }
    30% {
        transform: rotate(8deg)
    }
    50% {
        transform: rotate(-8deg)
    }
    60% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(0deg)
    }
}