/*=========================
FLOATING CONTACT BUTTONS
=========================*/

.floating-contact{
    position:fixed;
    right:20px;
    bottom:25px;
    z-index:9999;

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

/* Common */

.floating-contact a{
    width:62px;
    height:62px;

    border-radius:50%;

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

    color:#fff;
    text-decoration:none;

    font-size:24px;

    backdrop-filter:blur(20px);

    box-shadow:
    0 10px 25px rgba(0,0,0,.25);

    transition:.4s ease;
}

/* Phone */

.phone-btn{
    background:linear-gradient(
    135deg,
    #1e90ff,
    #4ea1ff
    );

    animation:phonePulse 2s infinite;
}

/* WhatsApp */

.whatsapp-btn{
    background:linear-gradient(
    135deg,
    #25D366,
    #1db954
    );

    animation:whatsappPulse 2s infinite;
}

/* Hover */

.floating-contact a:hover{
    transform:translateY(-5px) scale(1.08);
}

/* Pulse */

@keyframes phonePulse{
    0%{
        box-shadow:0 0 0 0 rgba(78,161,255,.6);
    }

    70%{
        box-shadow:0 0 0 15px rgba(78,161,255,0);
    }

    100%{
        box-shadow:0 0 0 0 rgba(78,161,255,0);
    }
}

@keyframes whatsappPulse{
    0%{
        box-shadow:0 0 0 0 rgba(37,211,102,.6);
    }

    70%{
        box-shadow:0 0 0 15px rgba(37,211,102,0);
    }

    100%{
        box-shadow:0 0 0 0 rgba(37,211,102,0);
    }
}


/*=========================
Large Desktop (>1400px)
=========================*/

@media (min-width:1400px){

    .floating-contact{
        right:30px;
        bottom:35px;
        gap:18px;
    }

    .floating-contact a{
        width:70px;
        height:70px;
        font-size:28px;
    }

}


/*=========================
Desktop (1200px)
=========================*/

@media (max-width:1200px){

    .floating-contact{
        right:20px;
        bottom:25px;
    }

    .floating-contact a{
        width:60px;
        height:60px;
        font-size:22px;
    }

}


/*=========================
Tablet (992px)
=========================*/

@media (max-width:992px){

    .floating-contact{
        right:18px;
        bottom:22px;
        gap:12px;
    }

    .floating-contact a{
        width:56px;
        height:56px;
        font-size:20px;
    }

}


/*=========================
Mobile (768px)
=========================*/

@media (max-width:768px){

    .floating-contact{
        right:15px;
        bottom:18px;
        gap:10px;
    }

    .floating-contact a{
        width:52px;
        height:52px;
        font-size:18px;
    }

}


/*=========================
Small Mobile (576px)
=========================*/

@media (max-width:576px){

    .floating-contact{
        right:12px;
        bottom:15px;
        gap:8px;
    }

    .floating-contact a{
        width:48px;
        height:48px;
        font-size:17px;
    }

}


/*=========================
Very Small Devices (360px)
=========================*/

@media (max-width:360px){

    .floating-contact{
        right:10px;
        bottom:12px;
        gap:8px;
    }

    .floating-contact a{
        width:44px;
        height:44px;
        font-size:16px;
    }

}