#floating-button {
  position: fixed;
  z-index: 9999;
  right: 50px;
  bottom: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;

  cursor: pointer;

  @media (max-width: 640px) {
    right: 0px;
    bottom: 15px;
    padding: 10px;
  }

}

#floating-button:hover .text-right{
  animation: bounce-out 0.1s linear;
  animation-fill-mode:  forwards;
}

.contato-whats-rodape {
  background-color: var( --color-green-whatsapp);
  border-radius: 60px;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: ease-in-out 200ms;
}

#floating-button object {
  width: 30px;
  height: 30px;
}

#floating-button .text-right {
  padding: 16px;
  border-radius: 16px;
  gap: 20px;
  font-weight: var(--font-weight-light);
  color: white;
  transform:  scale(0);
  background-color: var(--color-fourth);
  transition: ease-in-out 200ms;
}

#floating-button .text-right:hover, #floating-button .contato-whats-rodape:hover {
  background-color: var(--color-second);
}

#floating-button .text-right a {
  text-decoration: none;
  color: white;

  &:hover {
    text-decoration: underline;
    cursor: pointer;
  }
}

@media (max-width: 640px) {
  .text-right {
    font-size: 14px;
  }

  #floating-button svg {
    width: 20px;
    height: 20px;
  }
}