/* WhatsApp Floating Ribbon */
.whatsapp-ribbon {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #25d366; /* WhatsApp green */
  color: white;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  z-index: 99; /* High z-index to stay above other elements */
  transition: all 0.3s ease;
  text-decoration: none;
}

.whatsapp-ribbon:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.whatsapp-ribbon i {
  font-size: 40px; /* Larger icon size */
  color: white;
}

/* Adjust for footer visibility */
.whatsapp-ribbon.near-footer {
  bottom: 80px; /* Move up when near footer */
}

@media (max-width: 768px) {
  /* WhatsApp icon size increase by 50% on mobile */
  .whatsapp-ribbon {
    width: 90px; /* Increased from 60px */
    height: 90px; /* Increased from 60px */
    bottom: 15px;
    right: 15px;
    animation: bounce 2s infinite;
  }

  .whatsapp-ribbon i {
    font-size: 52px; /* Increased from 35px */
  }

  .whatsapp-ribbon.near-footer {
    bottom: 70px;
  }
}

@media (max-width: 480px) {
  /* Maintain WhatsApp icon size on smaller screens too */
  .whatsapp-ribbon {
    width: 75px; /* Still 50% bigger than original 50px */
    height: 75px;
    animation: bounce 2s infinite;
  }

  .whatsapp-ribbon i {
    font-size: 45px; /* Still 50% bigger than original 30px */
  }
}