/* Main container for the floating button */
.floating-whatsapp-container {
    position: fixed;
    bottom: 80px; /* Increased distance from bottom */
    right: 30px;  /* Increased distance from right */
    z-index: 1000;
}

/* WhatsApp Button Styles */
.floating-whatsapp-button {
    width: 65px;  /* Slightly larger button */
    height: 65px; /* Slightly larger button */
    background-color: #25D366; /* WhatsApp green */
    color: #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); /* Refined shadow for a better look */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    animation: whatsapp-wobble 2.5s infinite; /* New wobble animation */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.floating-whatsapp-button:hover {
    transform: scale(1.1); /* Enlarge on hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* Enhance shadow on hover */
    animation-play-state: paused; /* Pause the animation on hover */
}

.floating-whatsapp-button svg {
    width: 35px; /* Adjusted icon size */
    height: 35px;
    fill: #FFFFFF;
}

/* New 'wobble' animation */
@keyframes whatsapp-wobble {
    0% { transform: scale(1); }
    15% { transform: scale(0.95) rotate(-5deg); }
    30% { transform: scale(1.1) rotate(5deg); }
    45% { transform: scale(1.05) rotate(-3deg); }
    60% { transform: scale(1) rotate(0); }
    100% { transform: scale(1); }
}

/* Responsive adjustments for smaller screens */
@media (max-width: 480px) {
    .floating-whatsapp-container {
        right: 20px;
        bottom: 90px;
    }
    .floating-whatsapp-button {
        width: 60px;
        height: 60px;
    }
    .floating-whatsapp-button svg {
        width: 32px;
        height: 32px;
    }
}