.slide-texts p {
    opacity: 0;
    transition: opacity 1s;
}

.slide-texts p.active {
    opacity: 1;
}

/* Container to hold bubbles */
.bubble-container {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none; /* So bubbles don’t block clicks */
}

/* Bubble animations */
@keyframes floatUp {
0% { transform: translateY(100vh) translateX(0); opacity: 0; }
20% { opacity: 0.7; }
50% { transform: translateY(30vh) translateX(15px); }
100% { transform: translateY(-10vh) translateX(-15px); opacity: 0; }
}

.bubble {
position: absolute;
border-radius: 9999px;
opacity: 0.7;
background-color: rgba(150, 150, 255, 0.4);
}

/* Bubbles with different sizes & speeds */
.bubble:nth-child(1) { 
width: 30px; height: 30px; 
left: 10%; 
animation: floatUp 8s linear infinite; 
}

.bubble:nth-child(2) { 
width: 20px; height: 20px; 
left: 30%; 
animation: floatUp 17s linear infinite; 
}

.bubble:nth-child(3) { 
width: 40px; height: 40px; 
left: 50%; 
animation: floatUp 19s linear infinite; 
}

.bubble:nth-child(4) { 
width: 25px; height: 25px; 
left: 70%; 
animation: floatUp 20s linear infinite; 
}

.bubble:nth-child(5) { 
width: 15px; height: 15px; 
left: 90%; 
animation: floatUp 18.5s linear infinite; 
}