html, body {
    height: 100%;
    margin: 0;
    /* Remove overflow: hidden to allow scrolling */
}

.container-fluid.full-page-container {
    height: 100%;
    /* Allow vertical scrolling when content overflows */
    overflow-y: auto;
}
.mobyellowgirl {
    width: 80vw;
    position: absolute;
    border-radius: 10vw;
    top: -15vw;
    left: 11vw;
}
/* For desktop - full height layout */
@media (min-width: 768px) {
    .full-page-container {
        height: 100vh;
        overflow: hidden; /* Prevent scroll on desktop */
    }

    .row.h-md-100 {
        height: 100%;
    }

    .image-col img {
        height: 100%;
        object-fit: cover;
    }

    .text-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 6rem 2rem 2rem 2rem;
    }
}

/* For mobile - allow natural document flow with scrolling */
@media (max-width: 767.98px) {
    .container-fluid.full-page-container {
        height: auto;
        min-height: 100vh;
    }
    .row.h-md-100 {
        height: auto;
    }

    .text-col {
        padding: 2rem 1rem;
        height: auto;
    }

    .mobtopadding {
        padding-top: 85vw;
    }
    /* Ensure buttons stay visible at bottom */
    .mt-20 {
        margin-top: 20px;
        padding-bottom: 20px;
    }

    .list-unstyled {
        margin-left: 12vw !important;
    }
}

/* Rest of your existing styles */
.cross-btn {
    position: absolute;
    top: 1vw;
    right: 1vw;
    font-size: x-large;
}

.cross-btn1 {
    position: absolute;
    top: -48vw;
    right: -09vw;
    font-size: x-large;
}

.custom-list img,
.custom-list svg {
    vertical-align: middle;
    margin-right: 10px;
}

.btnwidth {
    width: 300px;
    max-width: 100%;
}