/* animations.css */
.floating-bubble-container {
  position: relative; /* Make the container position relative */
  width: 100%; /* Adjust width as needed */
  height: 100%; /* Adjust height as needed */
}

.floating-bubble {
  position: absolute; /* Position the image absolutely within the container */
  width: 200px; /* Set width of the image */
  height: 200px; /* Set height of the image */
}

.floating-bubble-1 {
  right: 0; /* Position the bubble on the right side */
  top: 0; /* Position the bubble at the top */
  z-index: -1; /* Put the bubble behind other content */
}

.floating-bubble {
  animation: fadeIn 1s ease-in-out, float 6s ease-in-out infinite;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}