/* ===========================================
   ПЛАВАЮЩАЯ КНОПКА ЗВОНКА
   =========================================== */

:root {
    --btn-call-shadow-color: 8, 202, 32;
}

.btn-call {
    text-decoration: none;
    color: inherit;
    background: rgba(var(--btn-call-shadow-color), 1);
    border: 2px solid rgba(var(--btn-call-shadow-color), 1);
    border-radius: 50%;
    box-shadow: 0 8px 10px rgba(var(--btn-call-shadow-color), 0.3);
    cursor: pointer;
    height: 60px;
    width: 60px;
    text-align: center;
    position: fixed;
    right: 50px;
    bottom: 50px;
    z-index: 999;
    transition: 0.3s;
    animation: hoverWave linear 5s infinite;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-call__ico {
    display: flex;
    justify-content: center;
    align-items: center;
    animation: shake 7200ms ease infinite;
    color: white;
    transition: 0.3s all;
    width: 60%;
    height: 60%;
}

@keyframes hoverWave {
    0% {
        box-shadow: 0 8px 10px rgba(var(--btn-call-shadow-color), 0.3),
            0 0 0 0 rgba(var(--btn-call-shadow-color), 0.2),
            0 0 0 0 rgba(var(--btn-call-shadow-color), 0.2);
    }
    40% {
        box-shadow: 0 8px 10px rgba(var(--btn-call-shadow-color), 0.3),
            0 0 0 15px rgba(var(--btn-call-shadow-color), 0.2),
            0 0 0 0 rgba(var(--btn-call-shadow-color), 0.2);
    }
    80% {
        box-shadow: 0 8px 10px rgba(var(--btn-call-shadow-color), 0.3),
            0 0 0 30px rgba(var(--btn-call-shadow-color), 0),
            0 0 0 26.7px rgba(var(--btn-call-shadow-color), 0.067);
    }
    100% {
        box-shadow: 0 8px 10px rgba(var(--btn-call-shadow-color), 0.3),
            0 0 0 30px rgba(var(--btn-call-shadow-color), 0),
            0 0 0 40px rgba(var(--btn-call-shadow-color), 0);
    }
}

@keyframes shake {
    0% { transform: rotateZ(0deg); }
    10% { transform: rotateZ(-30deg); }
    20% { transform: rotateZ(15deg); }
    30% { transform: rotateZ(-10deg); }
    40% { transform: rotateZ(7.5deg); }
    50% { transform: rotateZ(-6deg); }
    60% { transform: rotateZ(5deg); }
    70% { transform: rotateZ(-4.28571deg); }
    80% { transform: rotateZ(3.75deg); }
    90% { transform: rotateZ(-3.33333deg); }
    100% { transform: rotateZ(0deg); }
}

@media screen and (max-width: 448px) {
    .btn-call {
        right: 20px;
        bottom: 20px;
    }
}