html {
    font-size: 16px;

    @media (max-width: 500px) {
        font-size: 14px;
    }
    @media (max-width: 320px) {
        font-size: 12px;
    }

}

.mainbg {
    background: white;
}

.ref-header {
    width: 100%;
    min-height: 30rem;
    background: linear-gradient(299.37deg, #96C1F5 27.07%, #D7D7D7 100%);
    position: relative;
    overflow: hidden;

    .ref-header-sun {
        position: absolute;
        width: 24vmax;
        height: 24vmax;
        right: -12vmax;
        bottom: -12vmax;

        background: #FFC502;
        opacity: 0.7;
        filter: blur(15vmin);

    }

    h1 {
        line-height: 1.1;
        @media (min-width: 960px) {
            font-size: 4.5rem !important;
        }
        @media (max-width: 959px) {
            font-size: 2.5rem !important;
        }
    }

    .box {
        background: linear-gradient(180deg, rgba(233, 232, 248, 0.6) 0%, rgba(255, 255, 255, 0.6) 99.87%), rgba(255, 255, 255, 0.5);
        backdrop-filter: blur(1rem);
        border-radius: 1rem;
        box-shadow: none;
        border: none;
        .box {
            background: #FFFFFF;
            box-sizing: border-box;
            border: 1px solid rgba(255,255,255,0);

            &.p-6 {
                padding: 1.75rem !important;
            }

            &:hover {
                border: 1px solid #FFC502;
            }
        }


    }

    .ref-v-spacer {

        width: 0.25rem;
        height: 2.5rem;

        background: linear-gradient(0deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 81%);
        border-radius: 3.5rem;

        margin: 0 auto;
    }
}

.ref-users {
    display: flex;
    flex-direction: row;

    .ref-user {
        width: 1.75rem;
        height: 4rem;
        position: relative;
        img {
            position: absolute;
            top: 0;
            left: 0;
            width: 2.8rem !important;
            max-width: none !important;
        }
    }
}

.ref-thats-it {

    min-height: 14rem;

    background-color: #F6F5F4;
    border-radius: 1rem;

    background-image: url('/i/waves.svg');
    background-position: bottom right;
    background-size: initial;
    background-repeat: no-repeat;

    @media (max-width: 960px) {
        min-height: 20rem;
        background-size: 100%;
    }

    h4.is-size-1 {
        font-size: 4rem !important;
    }
}

.box.is-rounded {
    border-radius: 1rem;
}

.svg-check {
    appearance: none;
    -webkit-appearance: none;

    width: 1.5em;   /* your desired size */
    height: 1.5em;
    cursor: pointer;

    position: relative;
    top: 0.33em;
    margin-right: 0.5em;

    /* Unchecked SVG */
    background: url("/i/cb-off.svg") no-repeat center/contain;
    border: none;  /* no native border */
}

.svg-check:checked {
    /* Checked SVG */
    background: url("/i/cb-on.svg") no-repeat center/contain;
}