.gradient-border {
        position: relative;
        background: #111827; 
        background-clip: padding-box;
        border: 2px solid transparent;
        border-radius: 1rem;
    }

    .gradient-border::before {
        content: '';
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        z-index: -1;
        margin: -2px;
        border-radius: inherit;
        background: linear-gradient(to right, #FFB7C5, #F19CBB, #1E3A8A);
    }

    @keyframes scroll {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-50%);
        }
    }

.animate-scroll {
  display: flex;
  animation: scroll 20s linear infinite;
}

/* Definições das bolhas e animações */
@keyframes bubble-rise {
    0% {
        transform: translateY(100vh) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 0.5;
        transform: translateY(90vh) scale(0.2);
    }
    100% {
        transform: translateY(-20vh) scale(1.5); /* Bolhas sobem além da tela */
        opacity: 0;
    }
}

@keyframes bubble-pop {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(2.5);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

.bubble {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 183, 197, 0.7), rgba(241, 156, 187, 0.7), rgba(30, 58, 138, 0.7)); /* Cores do seu gradiente */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
    pointer-events: auto; /* Permite interações do mouse */
    animation-name: bubble-rise;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}

.bubble.popped {
    animation: bubble-pop 0.3s ease-out forwards; /* Animação de estouro */
    pointer-events: none; /* Desativa interações após estourar */
}