/* =========================================================
   FIXED WHATSAPP + CALL BUTTONS
   3D STYLE
========================================================= */

.floating-contact-buttons {
    position: fixed;
    right: 20px;
    bottom: 25px;

    display: flex;
    flex-direction: column;
    gap: 12px;

    z-index: 99999;
}


/* =========================================================
   3D FLOATING BUTTON
========================================================= */

.floating-contact {
    width: 46px;
    height: 46px;

    border-radius: 50%;

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

    position: relative;

    text-decoration: none;

    overflow: hidden;

    /* Main 3D shadow */

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

    /* Prevent unwanted tap highlight */
    -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   GLOSSY 3D HIGHLIGHT
========================================================= */

.floating-contact::before {
    content: "";

    position: absolute;

    top: 3px;
    left: 5px;

    width: 70%;
    height: 42%;

    border-radius: 50%;

    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.38),
        rgba(255, 255, 255, 0.04)
    );

    transform: rotate(-18deg);

    pointer-events: none;

    z-index: 1;
}


/* =========================================================
   INNER 3D SHADOW
========================================================= */

.floating-contact::after {
    content: "";

    position: absolute;

    left: 6px;
    right: 6px;
    bottom: 3px;

    height: 9px;

    border-radius: 50%;

    background: rgba(0, 0, 0, 0.10);

    filter: blur(3px);

    pointer-events: none;

    z-index: 0;
}


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

.floating-contact svg {
    width: 22px;
    height: 22px;

    fill: #ffffff;

    position: relative;

    z-index: 3;

   
}


/* =========================================================
   WHATSAPP 3D
========================================================= */

.floating-contact.whatsapp {

    background: linear-gradient(
        145deg,
        #70ed85 0%,
        #25D366 45%,
        #16a34a 100%
    );

}


/* =========================================================
   PHONE 3D
========================================================= */

.floating-contact.phone {

    background: linear-gradient(
        145deg,
        #7294ff 0%,
        #4169e1 45%,
        #294fc0 100%
    );

}


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

.floating-contact:hover {

    transform:
        translateY(-3px)
        scale(1.08);

    box-shadow:
        0 7px 0 rgba(0, 0, 0, 0.20),
        0 12px 20px rgba(0, 0, 0, 0.30);

}


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

.floating-contact:hover svg {

    filter:
       

}


/* =========================================================
   CLICK / PRESS EFFECT
========================================================= */

.floating-contact:active {

    transform:
        translateY(2px)
        scale(0.97);



}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .floating-contact-buttons {

        right: 12px;
        bottom: 18px;

        gap: 9px;

    }


    .floating-contact {

        width: 42px;
        height: 42px;

    

    }


    .floating-contact svg {

        width: 20px;
        height: 20px;

    }


    .floating-contact::before {

        top: 3px;
        left: 4px;

    }


    .floating-contact:hover {

        transform:
            translateY(-2px)
            scale(1.05);

    }

}