/* Floating Box (entire container) */
    .floating-box {
      position: fixed;
      top: 60%;
      right: 20px; /* shifted to right side */
      transform: translateY(-50%);
      background: #ffffff;
      border-radius: 40px;
      padding: 20px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 18px;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
      z-index: 1000;
      animation: floatBox 3s infinite ease-in-out;
    }

    /* Floating effect for whole box */
    @keyframes floatBox {
      0%, 100% {
        transform: translateY(-50%) translateX(0);
      }
      50% {
        transform: translateY(-58%) translateX(0);
      }
    }

    /* Floating Items (icons in circle) */
    .floating-item {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: #e6f3fc;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    /* Icon */
    .floating-item i {
      font-size: 24px;
      color: #0099e6;
      transition: color 0.3s ease;
    }

    /* Hover effect */
    .floating-item:hover {
      transform: scale(1.1);
      background: #0099e6;
    }
    .floating-item:hover i {
      color: #fff;
    }

    /* Responsive Adjustments */
    @media (max-width: 768px) {
      .floating-box {
        right: 10px;
        padding: 15px 8px;
        gap: 15px;
      }
      .floating-item {
        width: 40px;
        height: 40px;
      }
      .floating-item i {
        font-size: 20px;
      }
    }

    @media (max-width: 480px) {
      .floating-box {
        right: 5px;
        gap: 12px;
      }
      .floating-item {
        width: 35px;
        height: 35px;
      }
      .floating-item i {
        font-size: 18px;
      }
    }