@keyframes bubblePulse {
  0% { transform: scale(2, 1) translate(-50%, 50%); } /* bottom left */
  25% { transform:  scale(1, 1) translate(50%, 50%); } /* bottom right */
  50% { transform: scale(2, 1) translate(50%, -50%); } /* top right */
  75% { transform: scale(1, 1) translate(-50%, -50%); } /* top left */
  100% { transform: scale(2, 1) translate(-50%, 50%); } /* bottom left */
}

@keyframes bubblePulse2 {
  0% { transform: scale(2, 1) translate(50%, -50%); } /* top right */
  25% { transform:  scale(1, 1) translate(-50%, -50%); } /* top left */
  50% { transform: scale(2, 1) translate(-50%, 50%); } /* bottom left */
  75% { transform: scale(1, 1) translate(50%, 50%); } /* bottom right */
  100% { transform: scale(2, 1) translate(50%, -50%); } /* top right */
}

#bubble1 {
  width: 75%;
  height: 75%;
  flex-shrink: 0;

  border-radius: 100%;
  background: linear-gradient(45deg, #A8F6EF 39.5%, #F2E4FF 69.89%);
  filter: blur(100px);

  z-index: 0;
  
  animation: bubblePulse 20s ease-in-out infinite;
}

#bubble2 {
  width: 75%;
  height: 75%;
  flex-shrink: 0;

  border-radius: 100%;
  background: linear-gradient(-45deg, #FFEFEB 39.5%, #B5ABE5 69.89%);
  filter: blur(100px); 

  z-index: 0;
  
  animation: bubblePulse2 21s linear infinite;
}

#demo-container {
  z-index: 1;
}

#customer-logo-container {
  z-index: 1;
}