/* Onboarding Page */

.onboarding {
    height: 100vh !important;
    max-height: 1080px;
    overflow: hidden;
}

.bg-stemcells {
    object-position: center;
    object-fit: cover;
    background-repeat: no-repeat;
    height: 100%;
    width: 100vw;
    background-image: url('/images/bg-onboarding.png');
    background-size: cover;
}

.bg-dryanti {
    height: 140px;
    width: 100vw;
}

.card-onboarding-top {
    height: 80vh;
    overflow: hidden;
    transition: all ease-in-out;
    transition-duration: 400ms;
    max-width: 1920px;
}

.card-onboarding-top-min {
    height: 18vh;
    transition: all ease-in-out;
    transition-duration: 400ms;
}

.card-onboarding-bottom {
    height: 80vh;
    overflow: hidden;
    transition: all ease-in-out;
    transition-duration: 400ms;
    max-width: 1920px;
}

.card-onboarding-bottom-min {
    height: 18vh;
    transition: all ease-in-out;
    transition-duration: 400ms;
}

.img-text-logo {
    max-width: 100vw;
    max-height: 158px;
    object-fit: contain;
}

.img-logo {
    max-width: 100%;
    height: 100%;
    max-height: 163px;
    object-fit: contain;
}

.img-logo-big {
    max-height: 329px;
    max-width: 100vw;
    object-fit: contain;
}

.onboarding-desc {
    max-width: 558px;
    margin-inline: auto;
    padding-inline: 24px;
}

.onboarding-desc-link {
    margin-top: 5%;
}

@media only screen and (max-width: 1510px) {
    .img-logo-big {
        max-height: 250px;
        max-width: 100vw;
        object-fit: contain;
    }

    .img-logo {
        max-width: 100%;
        height: 100%;
        max-height: 123px;
        object-fit: contain;
    }

    .card-onboarding-top {
        height: 78vh;
        overflow: hidden;
        transition: all ease-in-out;
        transition-duration: 400ms;
        max-width: 1920px;
    }

    .card-onboarding-top-min {
        height: 20vh;
        transition: all ease-in-out;
        transition-duration: 400ms;
    }

    .card-onboarding-bottom {
        height: 78vh;
        overflow: hidden;
        transition: all ease-in-out;
        transition-duration: 400ms;
        max-width: 1920px;
    }

    .card-onboarding-bottom-min {
        height: 20vh;
        transition: all ease-in-out;
        transition-duration: 400ms;
    }
}

@media only screen and (max-width: 600px) {
    .onboarding-desc-link {
        margin-top: 20% !important;
    }

    .img-logo {
        max-width: 100%;
        height: 100%;
        max-height: 123px;
        object-fit: contain;
    }

    .card-onboarding-bottom-min {
        height: 18vh;
        transition: all ease-in-out;
        transition-duration: 400ms;
        padding: 24px 0;
    }

    .card-onboarding-top-min {
        height: 18vh;
        transition: all ease-in-out;
        transition-duration: 400ms;
        padding: 24px 0;
    }
}