/* =========================
   FLOATING ICONS start
========================= */

.floating-icons{
    position:fixed;
    right:20px;
    top:50%;
    transform:translateY(-50%);
    z-index:9999;

    display:flex;
    flex-direction:column;
    gap:14px;
}

.floating-icon{
    width:50px;
    height:50px;

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

    border-radius:50%;
    text-decoration:none;

    color:#fff;
    font-size:20px;

    box-shadow:0 6px 18px rgba(0,0,0,.18);

    transition:all .35s ease;

    position:relative;
    overflow:visible;
}

.floating-icon:hover{
    transform:translateY(-4px) scale(1.08);
}
.twiter{
    background:#242424;
}
.linkedin{
    background:#0077B5;
}

.instagram{
    background:radial-gradient(circle at 30% 107%,
    #fdf497 0%,
    #fdf497 5%,
    #fd5949 45%,
    #d6249f 60%,
    #285AEB 90%);
}

.facebook{
    background:linear-gradient(135deg,#1877F2,#3b5998);
}

.whatsapp{
    background:#25D366;
}

.call{
    background:#34C759;
}

.floating-icon::before{
    content:attr(title);
    position:absolute;

    right:75px;
    top:50%;
    transform:translateY(-50%);

    background:#D4AF37;
    color:#fff;

    padding:8px 14px;
    border-radius:6px;

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

    white-space:nowrap;

    opacity:0;
    visibility:hidden;

    transition:.3s ease;
}

.floating-icon:hover::before{
    opacity:1;
    visibility:visible;
}

.ring-effect::after{
    content:"";
    position:absolute;

    width:100%;
    height:100%;

    border-radius:50%;
    background:inherit;

    z-index:-1;

    animation:ring 2s infinite;
    opacity:.5;
}

@keyframes ring{
    0%{
        transform:scale(1);
        opacity:.5;
    }

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

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

/* Mobile */

@media(max-width:768px){

    .floating-icons{
        right:12px;
        top:70%;
        transform:translateY(-50%);
        gap:12px;
    }

    .floating-icon{
        width:48px;
        height:48px;
        font-size:20px;
    }

    .floating-icon::before{
        display:none;
    }
} 
/* =========================
   FLOATING ICONS END
========================= */