.bouncing-blob {
    position: absolute;
    width: 32vw;
    aspect-ratio: 1;
    border-radius: 50%;
    z-index: 1;
    top: 0;
    left: 0;
    transform-origin: left top;
    will-change: transform;
    opacity: 0; /* Start with 0 opacity */
    transition: opacity 3s ease-out; /* Add smooth transition */
}

.bouncing-blob--visible {
    opacity: 0.15; /* Lower opacity for a subtle effect */
}

/* Different shades of blue for the blobs */
.bouncing-blob:nth-child(1) {
    background: #1e40af; /* Dark blue */
}

.bouncing-blob:nth-child(2) {
    background: #3b82f6; /* Medium blue */
}

.bouncing-blob:nth-child(3) {
    background: #60a5fa; /* Light blue */
}

.bouncing-blob:nth-child(4) {
    background: #93c5fd; /* Lighter blue */
}

.bouncing-blob:nth-child(5) {
    background: #bfdbfe; /* Lightest blue */
}


.page-blob-container {
    position: relative;
    min-height: 100vh;
    background-color: #ffffff;
    overflow: hidden;
}

.bouncing-blobs-container {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.bouncing-blobs-glass {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(100px);
    -webkit-backdrop-filter: blur(100px);
    pointer-events: none;
}

.bouncing-blobs {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.outer_container_auth {
    position: relative;
    z-index: 2;
    padding: 20px;
}

@media (max-width: 1200px) {
    .bouncing-blobs-glass {
        backdrop-filter: blur(80px);
        -webkit-backdrop-filter: blur(80px);
    }
}

@media (max-width: 500px) {
    .bouncing-blob {
        width: 60vw;
    }
    .bouncing-blobs-glass {
        backdrop-filter: blur(60px);
        -webkit-backdrop-filter: blur(60px);
    }
}