/*!
Theme Name: Seargin
Theme URI: https://wp.xpressbuddy.com/seargin/
Author: XpressBuddy
Author URI: https://xpressbuddy.com/
Description: Seargin is a WordPress theme for Business Consulting company
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: seargin
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/
    /* Wrapper for chat icons */
    .chat-icons {
      position: fixed;
      bottom: 100px;
      right: 20px;
      z-index: 9999;
      display: flex;
      flex-direction: column;
      gap: 15px;
    }

    /* Chat icon styles */
    .chat-icon {
      position: relative;
      width: 60px;
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      overflow: visible;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .chat-icon img {
      width: 40px;
      height: 40px;
      z-index: 2;
    }

    .chat-icon .ripple {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: rgba(255, 71, 71, 0.3);
      z-index: 1;
      opacity: 0;
      transform: scale(1);
      transition: transform 0.3s ease, opacity 0.3s ease;
    }

    /* Hotline icon should have effects by default */
    .chat-icon.hotline {
      animation: shake 1s infinite;
    }

    .chat-icon.hotline .ripple {
      opacity: 1;
      transform: scale(3);
      animation: ripple 2s infinite;
    }

    /* Hover effects for other icons */
    .chat-icon:hover {
      transform: rotate(0deg);
      animation: shake 1s infinite;
    }

    .chat-icon:hover .ripple {
      opacity: 1;
      transform: scale(3); /* Ripple spreads on hover */
      animation: ripple 2s infinite;
    }

    /* Ripple animation */
    @keyframes ripple {
      0% {
        transform: scale(1);
        opacity: 1;
      }
      100% {
        transform: scale(3);
        opacity: 0;
      }
    }

    /* Shake animation */
    @keyframes shake {
      0% { transform: rotate(0deg); }
      10% { transform: rotate(15deg); }
      20% { transform: rotate(-15deg); }
      30% { transform: rotate(10deg); }
      40% { transform: rotate(-10deg); }
      50%, 100% { transform: rotate(0deg); }
    }