/* Hide the Messenger and Viber icons initially */
#messenger-icon.hidden, #viber-icon.hidden {
  display: none;
}

 
/* Style for the chat widget icon and icons */
#chat-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000; /* Ensure it's above other content */
  display: flex;
  flex-direction: column; /* Arrange icons and chat icon vertically */
  align-items: center; /* Center icons and chat icon horizontally */
}

#chat-icon {
  background-color: rgb(241, 50, 3);
  color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  margin-top: 10px; /* Create space between icons and chat icon */
  
}

/* Keyframes for fading and sliding in */
@keyframes fadeInSlideIn {
  0% {
      opacity: 0;
      transform: translateY(20px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}

/* Style for the Messenger and Viber icons */
#viber-icon {
  background-color: #7904d8;
  color: #fff;
  margin: 2px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  opacity: 0; /* Initially hide the icons */
  transform: translateY(20px); /* Initially move the icons down */
  animation: fadeInSlideIn 0.5s ease forwards; /* Apply the animation */
  animation-play-state: paused; /* Pause the animation by default */
  
}

#messenger-icon {
  background-color: #007BFF;
  color: #fff;
  margin: 2px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  opacity: 0; /* Initially hide the icons */
  transform: translateY(10px); /* Initially move the icons down */
  animation: fadeInSlideIn 0.9s ease forwards; /* Apply the animation */
  animation-play-state: paused; /* Pause the animation by default */
}

/* When the icons are visible, play the animation */
#messenger-icon:not(.hidden), #viber-icon:not(.hidden) {
  animation-play-state: running;
}

#viber-icon2 {
  background-color: #7904d8;
  color: #fff;
  margin: 2px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  opacity: 0; /* Initially hide the icons */
  transform: translateY(20px); /* Initially move the icons down */
  animation: fadeInSlideIn 0.5s ease forwards; /* Apply the animation */
  animation-play-state: paused; /* Pause the animation by default */
  
}

#messenger-icon2 {
  background-color: #007BFF;
  color: #fff;
  margin: 2px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  opacity: 0; /* Initially hide the icons */
  transform: translateY(10px); /* Initially move the icons down */
  animation: fadeInSlideIn 0.9s ease forwards; /* Apply the animation */
  animation-play-state: paused; /* Pause the animation by default */
}

/* When the icons are visible, play the animation */
#messenger-icon2:not(.hidden), #viber-icon2:not(.hidden) {
  animation-play-state: running;
}