#hero.page{
    background: linear-gradient(180deg, #DDEDFF 0%, #D2E7FF 23.95%, #C2DEFF 100%);
    min-height: 90svh;
    overflow: hidden;
    position: relative;
    & > .bg{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: clip;
        --bgOffsetX: calc(50vw - var(--cursorX));
        --bgOffsetY: calc(50vh - var(--cursorY));
    }
    & > .content{
        z-index: 2;
        display: flex;
        flex-direction: column;
        gap: 32px;
        align-items: center;
        justify-content: center;
        & > .available{
            background: #ffffff;
            border-radius: 100px;
            height: 33px;
            display: flex;
            flex-direction: row;
            gap: 8px;
            padding: 8px 16px;
            box-sizing: border-box;
            align-items: center;
            & > .greenDot{
                background: #00BE35;
                width: 8px;
                height: 8px;
                border-radius: 100px;
            }
            & > p{
                font-weight: 500;
                font-size: 14px;
                line-height: 33px
            }
        }
        & > .text{
            display: flex;
            flex-direction: column;
            gap: 16px;
            align-items: center;
            justify-content: center;
            max-width: 700px;
            text-align: center;
            & > h1{
                white-space: nowrap;
            }
            & > p{
                color: #0037c1;
                line-height: 130%;
                font-size: 18px;
                font-weight: 500;
            }
        }
    }
}

#bgsvg1{
    mix-blend-mode: overlay;
    position: absolute;
    width: 200%;
    height: auto;
    left: calc(-30% + var(--bgOffsetX) / 4);
    bottom: calc(-20svw - var(--bgOffsetY)/ 5);
}
#bgsvg2{
    mix-blend-mode: overlay;
    position: absolute;
    width: 175%;
    height: auto;
    left: calc(-20% + var(--bgOffsetX) / 20);
    bottom: calc(-40svw - var(--bgOffsetY) / 10)
}
#bgsvg3{
    mix-blend-mode: overlay;
    position: absolute;
    width: 150%;
    height: auto;
    left: calc(-20% + var(--bgOffsetX) / 50);
    bottom: calc(-40svw - var(--bgOffsetY) / 20);
}