.launch-hero {
    margin-top: 152px;
    height: 486px;
    padding: 60px 0;
    background: linear-gradient(132.66deg, rgba(218, 101, 112, 0.3) 2.26%, rgba(237, 161, 200, 0.3) 51.95%, rgba(157, 137, 185, 0.3) 101.65%);

    .container {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: start;
        position: relative;

        .hero-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            max-width: 600px;
            margin: 0 auto;
            text-align: center;

            h1 {
                font-family: 'Raleway', sans-serif;
                font-weight: 700;
                font-size: 50px;
                margin-bottom: 20px;
            }

            h3 {
                margin: 10px auto;
                max-width: 600px;
                font-family: 'Inter', sans-serif;
                font-weight: 700;
                font-size: 30px;
                text-align: center;
                margin-bottom: 40px;
                z-index: 20;

                a {
                    color: var(--primary-orange);
                }

                a:hover {
                    color: var(--primary-pink);
                }
            }

            p {
                max-width: 400px;
                font-family: 'Inter', sans-serif;
                font-size: 20px;
                line-height: 1.2;
                margin-bottom: 20px;
            }

            .hero-clouds {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 10;
                mix-blend-mode: soft-light;
                object-fit: cover;
            }
        }
    }
}

/* Background Layer Container */
.ethereal-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Behind all existing content */
    overflow: hidden;
}

/* Individual Background Layers */
.ethereal-layer {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(1.5px);
    transition: opacity 1s ease-in-out, transform 0.1s ease-out;
    opacity: 0.75;

}

#ethereal-background-image {
    display: block;
    width: 120%;
    height: 120%;
    object-fit: cover;
    object-position: center;
    /* animation: fadeInOut 4s infinite; */

}

/* Fade in/out animation for background rotation */
/* @keyframes fadeInOut {
    0% { opacity: 0; }
    25% { opacity: 0.5; }
    50% { opacity: 1.0; }
    75% { opacity: 0.5; }
    100% { opacity: 0; }
} */

/* Pink Gradient Overlay - Maintains your brand colors */
.ethereal-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(135deg, rgba(255, 182, 193, 0.6) 0%, rgba(255, 218, 230, 0.6) 100%); */
    opacity: 0.6;
    z-index: 1;
}

/* Parallax effect class */
.ethereal-parallax {
    transition: transform 0.1s ease-out;
}

@media (max-width: 768px) {
    .launch-hero {
        margin-top: 94px;
        height: 486px;
        padding: 30px 0;

        .container {
            margin: 0;
            width: 100%;
            .hero-content {
                h1 {
                    padding: 10px 30px;
                    font-weight: 700;
                    font-size: 40px;
                    margin-bottom: 10px;
                }

                h3 {
                    margin: 8px auto;
                    max-width: 500px;
                    padding: 0px;
                    font-family: 'Inter', sans-serif;
                    font-weight: 700;
                    font-size: 18px;
                    margin-bottom: 20px;

                    a {
                        color: var(--primary-orange);
                    }

                    a:hover {
                        color: var(--primary-pink);
                    }
                }

                p {
                    max-width: 400px;
                    padding: 10px 30px;
                    font-family: 'Inter', sans-serif;
                    font-size: 16px;
                    line-height: 1.2;
                    margin-bottom: 10px;
                }
            }
        }
    }

    .ethereal-gradient-overlay {
        background: linear-gradient(135deg, rgb(255, 220, 225) 0%, rgba(255, 218, 230, 0.75) 100%);
        opacity: 0.9;

        .ethereal-gradient-shape {
            display: none;
        }
    }
}