.bg-happy-yellow {
  background-color: #FFD93D; /* Bright yellow */
}

.bg-happy-pink {
  background-color: #FF6F91; /* Cheerful pink */
}

.bg-happy-orange {
  background-color: #FF9671; /* Vibrant orange */
}

.bg-happy-green {
  background-color: #00C9A7; /* Fresh mint green */
}

.bg-happy-purple {
  background-color: #845EC2; /* Celebration purple */
}


.bg-gradient-sunrise {
  background: linear-gradient(135deg, #FFD93D, #FF6F91);
}

.bg-gradient-festival {
  background: linear-gradient(135deg, #845EC2, #FF9671, #FFC75F);
}

.bg-gradient-candy {
  background: linear-gradient(135deg, #FF6F91, #FF9671, #F9F871);
}

.bg-gradient-ocean-party {
  background: linear-gradient(135deg, #00C9A7, #845EC2);
}

.bg-gradient-confetti {
  background: linear-gradient(135deg, #FF9671, #FFC75F, #F9F871, #FF6F91);
}


.section-with-blurry-image {
  position: relative; /* Establishes a stacking context for the pseudo-element */
  z-index: 1; /* Puts the content of the section on top */
  overflow: hidden; /* Ensures the blurred image doesn't bleed outside the section */
}

.section-with-blurry-image::before {
  content: ''; /* Required for pseudo-elements to render */
  position: absolute; /* Positions the pseudo-element relative to its parent */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/balloon.png'); /* Replace with your image URL */
  /* background-size: ; Ensures the image covers the entire area */
  background-position: center; /* Centers the background image */
  filter: blur(10px); /* Adjust the blur intensity (e.g., 5px, 15px) */
  z-index: -1; /* Pushes the pseudo-element behind the main content */
  transform: scale(1.05); /* Slight scale to prevent blurred edges from showing */
}