/*Styling untuk container*/
#background-container {
    background-image: url('/img/Background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#popup-container {
    background-image: url('/assets/PopUpContainer.png'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 90%
}

#inside-container {
    background-image: url('/assets/InsideContainer.png');
    background-size: cover;
    background-repeat: no-repeat;
    width: 70%;
    height: 60%;
    top: 20%
}

#popup-forgotPassword-container {
    background-image: url('/img/ForgotPasswordContainer.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}


/*Styling untuk Button*/
.childFun_floatingBtn {
    position: fixed;
    top: 30px;
    left: 80%;
    z-index: 1000;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/*Styling untuk Title Page*/
.childFun_floatingVersioning {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1000; /* ensures it stays on top */
}
.childFun_floatingLogout {
    position: fixed;
    bottom: 40px;
    left: 20px;
    z-index: 1000; /* ensures it stays on top */
}
.childFund_floatingFullscreen {
    display: none;
    position: fixed;
    top: 20px;
    left: 50%; /* center horizontally */
    transform: translateX(-50%);
    z-index: 1000; /* ensures it stays on top */
}
.childFun_floatingLogo {
    position: fixed;
    top: 40px;
    left: 40px;
    z-index: 1000;
}
.childFund_Logo {
    max-width: 680px;
    width: 80vw;
}
.childFund_GameLogo {
    width: 75%;
    max-width: 1200px;
    margin-bottom: 120px;
    margin-top: 120px;
}
.childFund_ButtonTitle {
    width: 60%;
    max-width: 920px;
}
.childFund_FontButtonTitle {
    font-size: 3.2rem;
}
@media (max-width: 2000px) {
    .childFun_floatingLogo {
        top: 20px;
        left: 20px;
    }
    .childFund_Logo {
        max-width: 600px;
    }
    .childFund_GameLogo {
        max-width: 840px;
        margin-bottom: 64px;
        margin-top: 64px;
    }
    .childFund_ButtonTitle {
        max-width: 600px;
    }
    .childFund_FontButtonTitle {
        font-size: 2.4rem;
    }
}
@media (max-width: 1600px) {
    .childFun_floatingLogo {
        top: 20px;
        left: 20px;
    }
    .childFund_Logo {
        max-width: 480px;
    }
    .childFund_GameLogo {
        max-width: 560px;
        margin-bottom: 56px;
        margin-top: 56px;
    }
    .childFund_ButtonTitle {
        max-width: 400px;
    }
    .childFund_FontButtonTitle {
        font-size: 1.6rem;
    }
}
@media (max-width: 1200px) {
    .childFund_Logo {
        width: 50vw;
    }
    .childFund_GameLogo {
        margin-bottom: 52px;
        margin-top: 52px;
    }
}
@media (max-width: 720px) {
    .childFund_Logo {
        width: 60vw;
    }
    .childFund_GameLogo {
        margin-bottom: 48px;
        margin-top: 48px;
    }
    .childFund_FontButtonTitle {
        font-size: 1.2rem;
    }
}
@media (max-width: 600px) {
    .childFund_Logo {
        width: 75vw;
    }
    .childFund_GameLogo {
        margin-bottom: 44px;
        margin-top: 44px;
    }
}
@media (max-width: 420px) {
    .childFund_GameLogo {
        margin-bottom: 40px;
        margin-top: 40px;
    }
    .childFund_FontButtonTitle {
        font-size: 0.8rem;
    }
}
@media (max-height: 600px) {
    .childFund_Logo {
        max-width: 320px;
    }
}

/*Styling untuk Login & Register Page*/
.childFund_GameLogoLogin {
    width: 75%;
    max-width: 580px;
    margin-top: 120px;
}
.childFund_ContainerParent {
    justify-content: center;
}
.childFund_ContainerLogin {
    width: 80%;
    max-width: 720px; 
    margin-top: 48px;
}
.childFund_LargeInput {
    height: 100px;
    font-size: 2.2rem;
    padding: 20px;
}
.childFund_ButtonPassword {
    width: 100px;
    font-size: 2.2rem;
    background-color: white;
}
.childFund_TextDanger {
    font-size: 1.6rem;
    margin: 0;
}
.childFund_FontButtonLogin {
    font-size: 2.6rem;
}
.childFund_GoogleLogoLogin {
    max-height: 56px;
    max-width: 56px;
    height: auto;
    width: auto;
}
.childFund_FontRedirectLogin {
    font-size: 2.2rem;
}
.childFund_FormMargin {
    margin-bottom: 16px;
}
.childFund_ForgotPasswordLayer {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1010;
}
.childFund_ForgotPasswordPopup {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 1000px;
    padding: 72px;
    padding-bottom: 52px;
}
.childFund_ForgotPasswordClip {
    position: absolute;
    top: -28px;
    left: 40px;
    width: 40px;
}
.childFund_ForgotPasswordTitle {
    color: #9F6B4C;
    font-size: 3rem;
    margin-bottom: 24px;
    font-weight: 1000;
}
.childFund_ForgotPasswordDesc {
    font-size: 1.8rem;
    margin-bottom: 20px;
    font-weight: 600;
}
.childFund_ForgotPasswordButton {
    height: 80px;
}
.childFund_MediumInput {
    height: 88px;
    font-size: 2rem;
    padding: 20px;
}
@media (max-width: 2000px) {
    .childFund_GameLogoLogin {
        max-width: 400px;
        margin-top: 72px;
    }
    .childFund_ContainerLogin {
        max-width: 480px;
        margin-top: 32px;
    }
    .childFund_LargeInput {
        height: 64px;
        font-size: 1.6rem;
        padding: 20px;
    }
    .childFund_ButtonPassword {
        width: 64px;
        font-size: 1.6rem;
    }
    .childFund_TextDanger {
        font-size: 1rem;
    }
    .childFund_FontButtonLogin {
        font-size: 1.8rem;
    }
    .childFund_GoogleLogoLogin {
        max-height: 40px;
        max-width: 40px;
        height: auto;
        width: auto;
    }
    .childFund_FontRedirectLogin {
        font-size: 1.6rem;
    }
    .childFund_FormMargin {
        margin-bottom: 8px;
    }
    .childFund_ForgotPasswordPopup {
        max-width: 720px;
        padding: 64px;
        padding-bottom: 48px;
    }
    .childFund_ForgotPasswordClip {
        top: -20px;
        left: 36px;
        width: 36px;
    }
    .childFund_ForgotPasswordTitle {
        font-size: 2.2rem;
        margin-bottom: 16px;
    }
    .childFund_ForgotPasswordDesc {
        font-size: 1.2rem;
        margin-bottom: 12px;
    }
    .childFund_ForgotPasswordButton {
        height: 64px;
    }
    .childFund_MediumInput {
        height: 60px;
        font-size: 1.4rem;
        padding: 16px;
    }
}
@media (max-width: 1600px) {
    .childFund_GameLogoLogin {
        max-width: 300px;
        margin-top: 72px;
    }
    .childFund_ContainerLogin {
        max-width: 360px;
        margin-top: 20px;
    }
    .childFund_LargeInput {
        height: 44px;
        font-size: 1rem;
        padding: 10px;
    }
    .childFund_ButtonPassword {
        width: 44px;
        font-size: 1rem;
    }
    .childFund_TextDanger {
        font-size: 0.8rem;
    }
    .childFund_FontButtonLogin {
        font-size: 1.2rem;
    }
    .childFund_GoogleLogoLogin {
        max-height: 24px;
        max-width: 24px;
        height: auto;
        width: auto;
    }
    .childFund_FontRedirectLogin {
        font-size: 1rem;
    }
    .childFund_FormMargin {
        margin-bottom: 8px;
    }
    .childFund_ForgotPasswordPopup {
        max-width: 640px;
        padding: 56px;
        padding-bottom: 40px;
    }
    .childFund_ForgotPasswordClip {
        top: -16px;
        left: 28px;
        width: 28px;
    }
    .childFund_ForgotPasswordTitle {
        font-size: 1.8rem;
        margin-bottom: 14px;
    }
    .childFund_ForgotPasswordDesc {
        font-size: 1rem;
        margin-bottom: 10px;
    }
    .childFund_ForgotPasswordButton {
        height: 52px;
    }
    .childFund_MediumInput {
        height: 52px;
        font-size: 1.2rem;
        padding: 12px;
    }
}
@media (max-width: 420px) {
    .childFund_LargeInput {
        height: 44px;
        font-size: 1rem;
        padding: 10px;
    }
    .childFund_ButtonPassword {
        width: 44px;
        font-size: 1rem;
    }
    .childFund_TextDanger {
        font-size: 0.8rem;
    }
    .childFund_FontButtonLogin {
        font-size: 1rem;
    }
    .childFund_GoogleLogoLogin {
        max-height: 24px;
        max-width: 24px;
        height: auto;
        width: auto;
    }
    .childFund_FontRedirectLogin {
        font-size: 0.8rem;
    }
}

/*Styling untuk Game Page*/
.childFun_containerGame {
    aspect-ratio: 1920 / 1080;
    width: min(100dvw, 100dvh * (1920/1080));
    height: auto;
}
.childFun_CheckPortrait {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    z-index: 1010; /* ensures it stays on top */
}
@media screen and (orientation: portrait) {
    .childFun_CheckPortrait {
        display: block;
        width: 100vw;
        height: 100%;
        overflow: hidden;
        background-color: black;
    }
}
.childFun_CheckPortraitText {
    font-family: 'Montserrat';
    font-weight: 500;
    color: white;
    text-align: center;
    margin: 0;
    font-size: 2.6rem;
}
.childFund_GameLogoLoading {
    width: 80%;
    max-width: 1360px;
}
.loading-container {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 60px;
}
.loading-text {
    color: white;
    font-size: 2.8rem;
    margin-bottom: 16px;
    display: inline-block;
}
.progress-bar {
    width: 92%;
    height: 40px;
    margin: 0 auto;
    background-color: #3a2f1c;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    clip-path: polygon( 
        20px 0%, /* top-left indent */
        calc(100% - 20px) 0%, /* top-right indent */
        100% 50%, /* right-middle notch */
        calc(100% - 20px) 100%, /* bottom-right indent */
        20px 100%, /* bottom-left indent */
        0% 50% /* left-middle notch */
    );
}
.progress-fill {
    width: 0%; /* Change this to simulate progress (e.g., 0% to 100%) */
    height: 100%;
    background-color: #f4b942;
    clip-path: polygon( 
        20px 0%, /* top-left indent */
        calc(100% - 20px) 0%, /* top-right indent */
        100% 50%, /* right-middle notch */
        calc(100% - 20px) 100%, /* bottom-right indent */
        20px 100%, /* bottom-left indent */
        0% 50% /* left-middle notch */
    );
    transition: width 0.3s ease-in-out;
}
@media (max-width: 2000px) {
    .childFun_CheckPortraitText {
        font-size: 2.2rem;
    }
    .childFund_GameLogoLoading {
        width: 80%;
        max-width: 880px;
    }
    .loading-container {
        bottom: 48px;
    }
    .loading-text {
        font-size: 2.4rem;
        margin-bottom: 12px;
    }
    .progress-bar {
        width: 92%;
        height: 32px;
        clip-path: polygon( 
            16px 0%, /* top-left indent */
            calc(100% - 16px) 0%, /* top-right indent */
            100% 50%, /* right-middle notch */
            calc(100% - 16px) 100%, /* bottom-right indent */
            16px 100%, /* bottom-left indent */
            0% 50% /* left-middle notch */
        );
    }
    .progress-fill {
        width: 0%; /* Change this to simulate progress (e.g., 0% to 100%) */
        clip-path: 
            polygon( 16px 0%, /* top-left indent */
            calc(100% - 16px) 0%, /* top-right indent */
            100% 50%, /* right-middle notch */
            calc(100% - 16px) 100%, /* bottom-right indent */
            16px 100%, /* bottom-left indent */
            0% 50% /* left-middle notch */
        );
    }
}
@media (max-width: 1600px) {
    .childFun_CheckPortraitText {
        font-size: 1.2rem;
    }
    .childFund_GameLogoLoading {
        width: 80%;
        max-width: 640px;
    }
    .loading-container {
        bottom: 24px;
    }
    .loading-text {
        font-size: 1.4rem;
        margin-bottom: 8px;
    }
    .progress-bar {
        width: 92%;
        height: 20px;
        clip-path: polygon(
            10px 0%, /* top-left indent */
            calc(100% - 10px) 0%, /* top-right indent */
            100% 50%, /* right-middle notch */
            calc(100% - 10px) 100%, /* bottom-right indent */
            10px 100%, /* bottom-left indent */
            0% 50% /* left-middle notch */
        );
    }
    .progress-fill {
        width: 0%; /* Change this to simulate progress (e.g., 0% to 100%) */
        clip-path: polygon( 
            10px 0%, /* top-left indent */
            calc(100% - 10px) 0%, /* top-right indent */
            100% 50%, /* right-middle notch */
            calc(100% - 10px) 100%, /* bottom-right indent */
            10px 100%, /* bottom-left indent */
            0% 50% /* left-middle notch */
        );
    }
}
@media (max-height: 800px) {
    .childFun_CheckPortraitText {
        font-size: 1rem;
    }
}
@media (max-height: 600px) {
    .childFun_CheckPortraitText {
        font-size: 1rem;
    }
    .childFund_GameLogoLoading {
        width: 80%;
        max-width: 400px;
    }
    .loading-container {
        bottom: 16px;
    }
    .loading-text {
        font-size: 1.2rem;
        margin-bottom: 8px;
    }
    .progress-bar {
        width: 92%;
        height: 20px;
        clip-path: polygon( 10px 0%, /* top-left indent */
        calc(100% - 10px) 0%, /* top-right indent */
        100% 50%, /* right-middle notch */
        calc(100% - 10px) 100%, /* bottom-right indent */
        10px 100%, /* bottom-left indent */
        0% 50% /* left-middle notch */
        );
    }
    .progress-fill {
        width: 0%; /* Change this to simulate progress (e.g., 0% to 100%) */
        clip-path: polygon( 160x 0%, /* top-left indent */
        calc(100% - 10px) 0%, /* top-right indent */
        100% 50%, /* right-middle notch */
        calc(100% - 10px) 100%, /* bottom-right indent */
        10px 100%, /* bottom-left indent */
        0% 50% /* left-middle notch */
        );
    }
}


    #register-floating {
        position: fixed;
        top: 20px;
        left: 24%;
        z-index: 1000;
    }

    .custom-btn-container {
        position: relative;
        display: inline-block;
        width: 100%;
    }

        .custom-btn-container img {
            width: 100%;
            transition: filter 0.3s ease;
        }

        .custom-btn-container button,
        .custom-btn-container a {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: transparent;
            border: none;
            font-weight: bold;
            cursor: pointer;
            color: inherit;
            text-decoration: none;
            z-index: 2;
        }

    /* Brown Button */
    .btn-brown img {
        filter: brightness(1);
    }

    .btn-brown:hover img {
        filter: brightness(0.9);
    }

    .btn-brown:active img {
        filter: brightness(0.8);
    }

    .btn-brown button,
    .btn-brown a {
        color: #514736;
    }

    /* Gold Button */
    .btn-gold img {
        filter: brightness(1);
    }

    .btn-gold:hover img {
        filter: brightness(0.9);
    }

    .btn-gold:active img {
        filter: brightness(0.85);
    }

    .btn-gold button,
    .btn-gold a {
        color: #333;
    }

    /* Cream Button */
    .btn-cream img {
        filter: brightness(1);
    }

    .btn-cream:hover img {
        filter: brightness(0.92);
    }

    .btn-cream:active img {
        filter: brightness(0.85);
    }

    .btn-cream button,
    .btn-cream a {
        color: #333;
    }

    /* Cross Button (X) */
    .custom-btn-cross {
        background-image: url('/assets/CrossButton.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        border: none;
        background-color: transparent;
        width: 80px;
        height: 80px;
        padding: 0;
        transition: filter 0.3s ease, transform 0.2s ease;
    }

        .custom-btn-cross:hover {
            filter: brightness(0.9);
            transform: scale(1.05);
        }

        .custom-btn-cross:active {
            filter: brightness(0.8);
            transform: scale(0.95);
        }

    .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
    }

    /* Google Button with icon */
    .google-btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .google-icon {
        height: 40px;
    }

    .google-icon-wrapper {
        margin-right: 10px;
    }
    /*Styling Ornament Container*/
    .tilted-header-container {
        position: relative;
        display: inline-block;
        width: 28%;
        margin-bottom: 20px;
        z-index: 10;
    }

    .tilted-header-bg {
        width: 100%;
        height: auto;
        display: block;
    }

    .tilted-header-text {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .tilted-header-text h1 {
            margin: 0;
            font-size: 3rem;
            font-weight: bold;
            color: #514736;
            transform: rotate(-2deg);
            transform-origin: center;
            padding-bottom: 5px;
        }

        .tilted-header-text h1 {
            text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
        }

    #register-floating {
        margin-bottom: 20px;
    }

    /*Styling tulisan*/
    .custom-link {
        color: #724600;
        font-weight: bold;
        text-decoration: none;
        transition: opacity 0.3s ease;
    }

        .custom-link:hover {
            opacity: 0.8;
            text-decoration: none;
            color: #724600;
        }

        .custom-link:active {
            opacity: 0.7;
            color: #724600;
        }

    a {
        text-decoration: none;
    }

    #scroll-container {
        display: flex;
        flex-direction: column;
        position: relative;
        width: 100%;
        max-width: 1200px; 
        margin: 0 auto; 
        padding: 20px;
        top:5%
    }

        #outer-scroll-container {
            width: 100%;
            max-width: 1600px; 
            height: auto; 
            object-fit: contain; 
            margin: 0 auto;
            display: block;
            z-index: 3;
        }

    #ornament-scroll {
        position: absolute;
        width: auto;
        height: auto;
        max-width: 100px;
        left: 8%; 
        top: 15%;
        z-index: 2;
        transform-origin: center;
    }

    #privacy-policy {
        position: absolute;
        width: auto;
        height: auto;
        max-width: 220px;
        left: 30%; 
        top: -6%;
        z-index: 4;
        transform-origin: center;
    }

    #terms-condition {
        position: absolute;
        width: auto;
        height: auto;
        max-width: 220px; 
        left: 30%;
        top: -6%; 
        z-index: 4;
        transform-origin: center;
    }

    #rectangle-scroll {
        position: absolute;
        left: 16%;
        top: 18%;
        width: 70%;
        z-index: 4;
    }

    #rectangle-scroll img:first-child {
        position: relative;
        height: auto;
        width: 100%;
        z-index: 4;
        transform-origin: center;
    }

    #text-scroll {
        z-index: 5;
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 85%;
        height: 90%;
        justify-content: start;
        align-items: start;
        overflow: hidden;
        padding: 20px;
        padding-right: 60px; 
    }

    .scroll-content-wrapper {
        width: 100%;
        height: 100%;
        overflow-y: scroll;
        padding-right: 20px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

        .scroll-content-wrapper::-webkit-scrollbar {
            display: none;
        }

    .custom-scrollbar-track {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 100%;
        background-image: url('/assets//ScrollBar.png');
        background-repeat: repeat-y;
        background-size: 100% auto;
        border-radius: 15px;
        cursor: pointer;
    }

    .custom-scrollbar-thumb {
        position: absolute;
        width: 100%;
        min-height: 40px;
        background: linear-gradient(135deg, #8B4513 0%, #CD853F 50%, #8B4513 100%);
        border: 2px solid #654321;
        border-radius: 15px;
        cursor: grab;
        transition: all 0.2s ease;
        box-shadow: inset 0 2px 4px rgba(255,255,255,0.3), 0 2px 8px rgba(0,0,0,0.2);
    }

    .custom-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #A0522D 0%, #DEB887 50%, #A0522D 100%);
        box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 4px 12px rgba(0,0,0,0.3);
    }

    .custom-scrollbar-thumb:active {
        cursor: grabbing;
        background: linear-gradient(135deg, #654321 0%, #8B4513 50%, #654321 100%);
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.2), 0 1px 4px rgba(0,0,0,0.3);
    }

    #text-scroll h1 {
        margin: 0;
        text-align: start;
        font-size: 48px;
        color: #9F6B4C;
        font-weight: 600;
    }

    #text-scroll h2 {
        margin: 0;
        text-align: start;
        font-size: 36px;
        color: #9F6B4C;
        font-weight: 600;
    }

    #text-scroll h3 {
        margin: 0;
        text-align: start;
        font-size: 24px;
        color: #9F6B4C;
        font-weight: 500;
    }

    #text-scroll h4 {
        margin: 0;
        text-align: start;
        font-size: 24px;
        color: #9F6B4C;
        font-weight: normal;
    }

    /* Optional: Add smooth transitions for responsive changes */
    #outer-scroll-container,
    #ornament-scroll,
    #privacy-policy,
    #terms-condition,
    #rectangle-scroll,
    #text-scroll {
        transition: all 0.3s ease-in-out;
    }

    /* Large Desktop (1400px and up) */
    @media (min-width: 1400px) {
        #scroll-container {
            max-width: 1000px;
        }

        #outer-scroll-container {
            max-width: 1000px;
        }

        #ornament-scroll {
            max-width: 150px;
            left: -1%;
            top: 17%;
        }

        #privacy-policy {
            max-width: 40%;
            left: 28%;
            top: -4%;
        }

        #terms-condition {
            max-width: 50%;
            left: 28%;
            top: -4%;
        }

        #rectangle-scroll {
            left: 10%;
            top: 17%;
            width: 80%;
        }

        #text-scroll {
            max-height: 90%;
        }

            #text-scroll h1 {
                font-size: 1.5rem;
            }

            #text-scroll h3 {
                font-size: 1.2rem;
            }
    }

    /* Desktop (1200px to 1399px) */
    @media (min-width: 1200px) and (max-width: 1399px) {
        #scroll-container {
            max-width: 1000px;
        }

        #outer-scroll-container {
            max-width: 1000px;
        }

        #ornament-scroll {
            max-width: 180px;
            left: -2%;
            top: 13%;
        }

        #privacy-policy {
            max-width: 43%;
            left: 30%;
            top: -4%;
        }

        #terms-condition {
            max-width: 50%;
            left: 25%;
            top: -4%;
        }

        #rectangle-scroll {
            left: 9%;
            top: 18%;
            width: 82%;
        }

        #text-scroll {
            max-height: 90%;
        }

        #text-scroll h1 {
            font-size: 1.2rem;
        }

        #text-scroll h3 {
            font-size: 1.2rem;
        }
    }

    /* Large Tablet/Small Desktop (992px to 1199px) */
    @media (min-width: 992px) and (max-width: 1199px) {
        #scroll-container {
            max-width: 80%;
            padding: 15px;
        }

        #outer-scroll-container {
            max-width: 1000px;
        }

        #ornament-scroll {
            max-width: 140px;
            left: -1%;
            top: 14%;
        }

        #privacy-policy {
            max-width: 40%;
            left: 28%;
            top: -4%;
        }

        #terms-condition {
            max-width: 50%;
            left: 25%;
            top: -5%;
        }

        #rectangle-scroll {
            left: 10%;
            top: 17%;
            width: 83%;
        }

        #text-scroll {
            max-height: 90%;
        }

        #text-scroll h1 {
            font-size: 1.5rem;
        }

        #text-scroll h3 {
            font-size: 1.3rem;
        }

    }

    /* Tablet (768px to 991px) */
    @media (min-width: 768px) and (max-width: 991px) {
        #scroll-container {
            max-width: 900px;
            padding: 10px;
        }

        #outer-scroll-container {
            max-width: 900px;
        }

        #ornament-scroll {
            max-width: 120px;
            left: -1%;
            top: 16%;
        }

        #privacy-policy {
            max-width: 40%;
            left: 30%;
            top: -5%;
        }

        #terms-condition {
            max-width: 45%;
            left: 29%;
            top: -5%;
        }

        #rectangle-scroll {
            left: 9%;
            top: 14%;
            width: 83%;
        }

        #text-scroll {
            max-height: 90%;
        }

        #text-scroll h1 {
            font-size: 1.2rem;
        }

        #text-scroll h3 {
            font-size: 1.1rem;
        }

    }

    /* Small Tablet (576px to 767px) */
    @media (min-width: 576px) and (max-width: 767px) {
        #scroll-container {
            max-width: 800px;
            padding: 10px;
        }

        #outer-scroll-container {
            max-width: 800px;
        }

        #ornament-scroll {
            max-width: 100px;
            left: 1%;
            top: 18%;
        }

        #privacy-policy {
            max-width: 43%;
            left: 28%;
            top: -4%;
        }

        #terms-condition {
            max-width: 43%;
            left: 28%;
            top: -4%;
        }

        #rectangle-scroll {
            left: 10%;
            top: 15%;
            width: 80%;
        }

        #text-scroll {
            max-height: 90%;
        }

        #text-scroll h1 {
            font-size: 1rem;
        }

        #text-scroll h3 {
            font-size: 1rem;
        }
    }

    /* Mobile (up to 575px) */
    @media (max-width: 575px) {
        #scroll-container {
            max-width: 900px;
            padding: 5px;
        }

        #outer-scroll-container {
            max-width: 900px;
            width: 95%;
        }

        #ornament-scroll {
            max-width: 80px;
            left: 3%;
            top: 15%;
        }

        #privacy-policy {
            max-width: 40%;
            left: 30%;
            top: -4%;
        }

        #terms-condition {
            max-width: 40%;
            left: 30%;
            top: -4%;
        }

        #rectangle-scroll {
            left: 10%;
            top: 15%;
            width: 80%;
        }

        #text-scroll {
            max-height: 90%;
        }

        #text-scroll h1 {
            font-size: 0.7rem;
        }

        #text-scroll h3 {
            font-size: 0.7rem;
        }

    }

    /* Extra Small Mobile (up to 400px) */
    @media (max-width: 400px) {
        #outer-scroll-container {
            max-width: 300px;
            width: 90%;
        }

        #ornament-scroll {
            max-width: 60px;
            left: 6%;
            top: 16%;
        }

        #privacy-policy {
            max-width: 30%;
            left: 35%;
            top: -4%;
        }

        #terms-condition {
            max-width: 30%;
            left: 35%;
            top: -4%;
        }

        #rectangle-scroll {
            left: 17%;
            top: 13%;
            width: 67%;
        }

        #text-scroll h1 {
            font-size: 0.9rem;
        }

        .custom-btn-container {
            width: 100%;
        }
    }

    /* Landscape orientation for mobile */
    @media (max-width: 767px) and (orientation: landscape) {
        #scroll-container {
            max-width: 700px;
            padding: 5px;
        }

        #outer-scroll-container {
            max-width: 700px;
        }

        #ornament-scroll {
            max-width: 100px;
            left: -1%;
            top: 15%;
        }

        #privacy-policy {
            max-width: 250px;
            left: 33%;
            top: -4%;
        }

        #terms-condition {
            max-width: 250px;
            left: 33%;
            top: -4%;
        }

        #rectangle-scroll {
            left: 8%;
            top: 14%;
            width: 85%;
        }

        #text-scroll h1 {
            font-size: 1rem;
        }

    }

    /* Fix for very wide screens */
    @media (min-width: 1600px) {
        #scroll-container {
            max-width: 1300px;
            z-index: 3;
        }

        #ornament-scroll {
            left: -1%;
            z-index: 1;
            top: 17%;
            max-width: 220px;
        }

        #privacy-policy {
            max-width: 100%;
            left: 30%;
            top: -5%;
        }

        #terms-condition {
            max-width: 100%;
            left: 30%;
            top: -5%;
        }

        #rectangle-scroll {
            left: 10%;
            top: 17%;
            width: 80%;
        }

        #text-scroll {
            max-height: 90%;
        }

        #text-scroll h1 {
            font-size: 48px;
        }

        #text-scroll h2 {
            font-size: 36px;
        }

        #text-scroll h3 {
            font-size: 24px;
        }
    }

/* Mobile Landscape Responsiveness - Tambahkan ini ke CSS kamu */

/* Mobile Landscape untuk semua perangkat mobile dalam orientasi landscape */
@media screen and (max-width: 1024px) and (orientation: landscape) {

    /* Logo Game - diperkecil untuk landscape */
    .childFund_GameLogo {
        width: 50% !important;
        max-width: 400px !important;
        margin-bottom: 20px !important;
        margin-top: 20px !important;
    }

    /* Container button - diperkecil */
    .childFund_ButtonTitle {
        width: 40% !important;
        max-width: 300px !important;
    }

    /* Font size button - diperkecil */
    .childFund_FontButtonTitle {
        font-size: 1.2rem !important;
    }

    /* Logo ChildFund di pojok kiri atas */
    .childFund_Logo {
        max-width: 200px !important;
        width: 25vw !important;
    }

    .childFun_floatingLogo {
        top: 10px !important;
        left: 10px !important;
    }

    /* Versioning text */
    .childFun_floatingVersioning {
        bottom: 10px !important;
        left: 10px !important;
    }

        .childFun_floatingVersioning p {
            font-size: 14px !important;
        }
}

/* Mobile Landscape khusus untuk perangkat yang sangat kecil */
@media screen and (max-width: 768px) and (orientation: landscape) and (max-height: 500px) {

    /* Logo Game - lebih kecil lagi */
    .childFund_GameLogo {
        width: 35% !important;
        max-width: 250px !important;
        margin-bottom: 15px !important;
        margin-top: 15px !important;
    }

    /* Container button */
    .childFund_ButtonTitle {
        width: 35% !important;
        max-width: 200px !important;
    }

    /* Font button lebih kecil */
    .childFund_FontButtonTitle {
        font-size: 0.9rem !important;
    }

    /* Logo ChildFund */
    .childFund_Logo {
        max-width: 150px !important;
        width: 20vw !important;
    }

    /* Margin button dikurangi */
    .mb-3 {
        margin-bottom: 0.5rem !important;
    }
}

/* Landscape untuk tablet kecil */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

    .childFund_GameLogo {
        width: 40% !important;
        max-width: 350px !important;
        margin-bottom: 30px !important;
        margin-top: 30px !important;
    }

    .childFund_ButtonTitle {
        width: 35% !important;
        max-width: 280px !important;
    }

    .childFund_FontButtonTitle {
        font-size: 1.4rem !important;
    }

    .childFund_Logo {
        max-width: 180px !important;
    }
}

/* ===== REGISTER/LOGIN PAGE LANDSCAPE RESPONSIVENESS ===== */

/* Mobile Landscape untuk Register/Login Page */
@media screen and (max-width: 1023px) and (orientation: landscape) {

    /* Logo Game Login - diperkecil */
    .childFund_GameLogoLogin {
        width: 40% !important;
        max-width: 300px !important;
        margin-top: 170px !important;
    }

    /* Container Login - diperkecil */
    .childFund_ContainerLogin {
        width: 60% !important;
        max-width: 450px !important;
        margin-top: 20px !important;
    }

    /* Input fields - diperkecil */
    .childFund_LargeInput {
        height: 50px !important;
        font-size: 1.2rem !important;
        padding: 12px !important;
    }

    /* Password button */
    .childFund_ButtonPassword {
        width: 50px !important;
        font-size: 1.2rem !important;
    }

    /* Text danger */
    .childFund_TextDanger {
        font-size: 0.8rem !important;
    }

    /* Button Login font */
    .childFund_FontButtonLogin {
        font-size: 1.4rem !important;
    }

    /* Google Logo */
    .childFund_GoogleLogoLogin {
        max-height: 30px !important;
        max-width: 30px !important;
    }

    /* Redirect font */
    .childFund_FontRedirectLogin {
        font-size: 1.2rem !important;
    }

    /* Form margin - dikurangi */
    .childFund_FormMargin {
        margin-bottom: 8px !important;
    }

    /* Logo ChildFund di pojok */
    .childFund_Logo {
        max-width: 300px !important;
        width: 35vw !important;
    }

    .childFun_floatingLogo {
        top: 10px !important;
        left: 10px !important;
    }
}

/* Mobile Landscape untuk perangkat sangat kecil - Register/Login */
@media screen and (max-width: 768px) and (orientation: landscape) and (max-height: 500px) {

    /* Logo Game Login - lebih kecil */
    .childFund_GameLogoLogin {
        width: 40% !important;
        max-width: 260px !important;
        margin-top: 200px !important;
    }

    /* Container Login */
    .childFund_ContainerLogin {
        width: 70% !important;
        max-width: 350px !important;
        margin-top: 10px !important;
    }

    /* Input fields - lebih kecil */
    .childFund_LargeInput {
        height: 40px !important;
        font-size: 0.9rem !important;
        padding: 8px !important;
    }

    /* Password button */
    .childFund_ButtonPassword {
        width: 40px !important;
        font-size: 0.9rem !important;
    }

    /* Text danger */
    .childFund_TextDanger {
        font-size: 0.7rem !important;
    }

    /* Button Login font */
    .childFund_FontButtonLogin {
        font-size: 1rem !important;
    }

    /* Google Logo */
    .childFund_GoogleLogoLogin {
        max-height: 20px !important;
        max-width: 20px !important;
    }

    /* Redirect font */
    .childFund_FontRedirectLogin {
        font-size: 0.9rem !important;
    }

    /* Form margin - dikurangi lebih banyak */
    .childFund_FormMargin {
        margin-bottom: 4px !important;
    }

    /* Logo ChildFund */
    .childFund_Logo {
        max-width: 300px !important;
        width: 35vw !important;
    }

    /* Container parent - scroll jika perlu */
    .childFund_ContainerParent {
        padding: 5px !important;
    }
}

/* Tablet Landscape - Register/Login */
@media screen and (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {

    /* Logo Game Login */
    .childFund_GameLogoLogin {
        width: 35% !important;
        max-width: 300px !important;
        margin-top: 315px !important;
    }

    /* Container Login */
    .childFund_ContainerLogin {
        width: 50% !important;
        max-width: 400px !important;
        margin-top: 25px !important;
    }

    /* Input fields */
    .childFund_LargeInput {
        height: 45px !important;
        font-size: 1.1rem !important;
        padding: 10px !important;
    }

    /* Password button */
    .childFund_ButtonPassword {
        width: 45px !important;
        font-size: 1.1rem !important;
    }

    /* Button Login font */
    .childFund_FontButtonLogin {
        font-size: 1.3rem !important;
    }

    /* Google Logo */
    .childFund_GoogleLogoLogin {
        max-height: 25px !important;
        max-width: 25px !important;
    }

    /* Redirect font */
    .childFund_FontRedirectLogin {
        font-size: 1.1rem !important;
    }
}

/* Mobile Landscape Responsiveness - Tambahkan ini ke CSS kamu */

/* Mobile Landscape untuk semua perangkat mobile dalam orientasi landscape */
@media screen and (max-width: 1024px) and (orientation: landscape) {

    /* Logo Game - diperkecil untuk landscape */
    .childFund_GameLogo {
        width: 50% !important;
        max-width: 400px !important;
        margin-bottom: 20px !important;
        margin-top: 20px !important;
    }

    /* Container button - diperkecil */
    .childFund_ButtonTitle {
        width: 40% !important;
        max-width: 300px !important;
    }

    /* Font size button - diperkecil */
    .childFund_FontButtonTitle {
        font-size: 1.2rem !important;
    }

    /* Logo ChildFund di pojok kiri atas */
    .childFund_Logo {
        max-width: 200px !important;
        width: 40vw !important;
    }

    .childFun_floatingLogo {
        top: 10px !important;
        left: 10px !important;
    }

    /* Versioning text */
    .childFun_floatingVersioning {
        bottom: 10px !important;
        left: 10px !important;
    }

        .childFun_floatingVersioning p {
            font-size: 14px !important;
        }
}

/* Mobile Landscape khusus untuk perangkat yang sangat kecil */
@media screen and (max-width: 768px) and (orientation: landscape) and (max-height: 500px) {

    /* Logo Game - lebih kecil lagi */
    .childFund_GameLogo {
        width: 35% !important;
        max-width: 250px !important;
        margin-bottom: 15px !important;
        margin-top: 15px !important;
    }

    /* Container button */
    .childFund_ButtonTitle {
        width: 35% !important;
        max-width: 200px !important;
    }

    /* Font button lebih kecil */
    .childFund_FontButtonTitle {
        font-size: 0.9rem !important;
    }

    /* Logo ChildFund */
    .childFund_Logo {
        max-width: 150px !important;
        width: 20vw !important;
    }

    /* Margin button dikurangi */
    .mb-3 {
        margin-bottom: 0.5rem !important;
    }
}

/* Landscape untuk tablet kecil */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

    .childFund_GameLogo {
        width: 40% !important;
        max-width: 350px !important;
        margin-bottom: 30px !important;
        margin-top: 30px !important;
    }

    .childFund_ButtonTitle {
        width: 35% !important;
        max-width: 280px !important;
    }

    .childFund_FontButtonTitle {
        font-size: 1.4rem !important;
    }

    .childFund_Logo {
        max-width: 400px !important;
    }
}

/* ===== REGISTER/LOGIN PAGE LANDSCAPE RESPONSIVENESS ===== */

/* Mobile Landscape untuk Register/Login Page */
@media screen and (max-width: 1023px) and (orientation: landscape) {

    /* Logo Game Login - diperkecil */
    .childFund_GameLogoLogin {
        width: 40% !important;
        max-width: 300px !important;
        margin-top: 170px !important;
    }

    /* Container Login - diperkecil */
    .childFund_ContainerLogin {
        width: 60% !important;
        max-width: 450px !important;
        margin-top: 20px !important;
    }

    /* Input fields - diperkecil */
    .childFund_LargeInput {
        height: 50px !important;
        font-size: 1.2rem !important;
        padding: 12px !important;
    }

    /* Password button */
    .childFund_ButtonPassword {
        width: 50px !important;
        font-size: 1.2rem !important;
    }

    /* Text danger */
    .childFund_TextDanger {
        font-size: 0.8rem !important;
    }

    /* Button Login font */
    .childFund_FontButtonLogin {
        font-size: 1.4rem !important;
    }

    /* Google Logo */
    .childFund_GoogleLogoLogin {
        max-height: 30px !important;
        max-width: 30px !important;
    }

    /* Redirect font */
    .childFund_FontRedirectLogin {
        font-size: 1.2rem !important;
    }

    /* Form margin - dikurangi */
    .childFund_FormMargin {
        margin-bottom: 8px !important;
    }

    /* Logo ChildFund di pojok */
    .childFund_Logo {
        max-width: 300px !important;
        width: 35vw !important;
    }

    .childFun_floatingLogo {
        top: 10px !important;
        left: 10px !important;
    }
}

/* Mobile Landscape untuk perangkat sangat kecil - Register/Login */
@media screen and (max-width: 768px) and (orientation: landscape) and (max-height: 500px) {

    /* Logo Game Login - lebih kecil */
    .childFund_GameLogoLogin {
        width: 40% !important;
        max-width: 260px !important;
        margin-top: 200px !important;
    }

    /* Container Login */
    .childFund_ContainerLogin {
        width: 70% !important;
        max-width: 350px !important;
        margin-top: 10px !important;
    }

    /* Input fields - lebih kecil */
    .childFund_LargeInput {
        height: 40px !important;
        font-size: 0.9rem !important;
        padding: 8px !important;
    }

    /* Password button */
    .childFund_ButtonPassword {
        width: 40px !important;
        font-size: 0.9rem !important;
    }

    /* Text danger */
    .childFund_TextDanger {
        font-size: 0.7rem !important;
    }

    /* Button Login font */
    .childFund_FontButtonLogin {
        font-size: 1rem !important;
    }

    /* Google Logo */
    .childFund_GoogleLogoLogin {
        max-height: 20px !important;
        max-width: 20px !important;
    }

    /* Redirect font */
    .childFund_FontRedirectLogin {
        font-size: 0.9rem !important;
    }

    /* Form margin - dikurangi lebih banyak */
    .childFund_FormMargin {
        margin-bottom: 4px !important;
    }

    /* Logo ChildFund */
    .childFund_Logo {
        max-width: 300px !important;
        width: 35vw !important;
    }

    /* Container parent - scroll jika perlu */
    .childFund_ContainerParent {
        padding: 5px !important;
    }
}

/* Tablet Landscape - Register/Login */
@media screen and (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {

    /* Logo Game Login */
    .childFund_GameLogoLogin {
        width: 35% !important;
        max-width: 300px !important;
        margin-top: 315px !important;
    }

    /* Container Login */
    .childFund_ContainerLogin {
        width: 50% !important;
        max-width: 400px !important;
        margin-top: 25px !important;
    }

    /* Input fields */
    .childFund_LargeInput {
        height: 45px !important;
        font-size: 1.1rem !important;
        padding: 10px !important;
    }

    /* Password button */
    .childFund_ButtonPassword {
        width: 45px !important;
        font-size: 1.1rem !important;
    }

    /* Button Login font */
    .childFund_FontButtonLogin {
        font-size: 1.3rem !important;
    }

    /* Google Logo */
    .childFund_GoogleLogoLogin {
        max-height: 25px !important;
        max-width: 25px !important;
    }

    /* Redirect font */
    .childFund_FontRedirectLogin {
        font-size: 1.1rem !important;
    }
}

/* ===== FORGOT PASSWORD / CHANGE PASSWORD PAGE LANDSCAPE RESPONSIVENESS ===== */

/* Mobile Landscape untuk Forgot Password Page */
@media screen and (max-width: 1023px) and (orientation: landscape) {

    /* Forgot Password Popup Container */
    .childFund_ForgotPasswordPopup {
        width: 70% !important;
        max-width: 500px !important;
        padding: 20px !important;
        margin: 10px auto !important;
        max-height: 90vh !important;
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    /* Forgot Password Clip Image */
    .childFund_ForgotPasswordClip {
        width: 60px !important;
        height: 60px !important;
        margin-bottom: 15px !important;
    }

    /* Forgot Password Title */
    .childFund_ForgotPasswordTitle {
        font-size: 1.4rem !important;
        margin-bottom: 10px !important;
    }

    /* Forgot Password Description */
    .childFund_ForgotPasswordDesc {
        font-size: 1rem !important;
        margin-bottom: 15px !important;
    }

    /* Medium Input fields untuk forgot password */
    .childFund_MediumInput {
        height: 45px !important;
        font-size: 1rem !important;
        padding: 10px !important;
    }

    /* Password button dalam forgot password */
    .childFund_ButtonPassword {
        width: 45px !important;
        font-size: 1rem !important;
        padding: 10px !important;
    }

    /* Forgot Password Button Container */
    .childFund_ForgotPasswordButton {
        height: 45px !important;
        margin-bottom: 10px !important;
    }

    /* Button font dalam forgot password */
    .childFund_FontButtonLogin {
        font-size: 1.1rem !important;
    }

    /* Margin bottom adjustments */
    .mb-3 {
        margin-bottom: 0.8rem !important;
    }

    .mb-5 {
        margin-bottom: 1.5rem !important;
    }

    .childFun_floatingLogo {
        top: 10px !important;
        left: 10px !important;
        z-index: 1000 !important;
    }
}

/* Mobile Landscape untuk perangkat sangat kecil - Forgot Password */
@media screen and (max-width: 768px) and (orientation: landscape) and (max-height: 500px) {

    /* Forgot Password Popup Container - lebih kecil */
    .childFund_ForgotPasswordPopup {
        width: 85% !important;
        max-width: 450px !important;
        padding: 30px !important;
        margin: 15px auto !important;
        max-height: 95vh !important;
    }

    /* Forgot Password Clip Image - lebih kecil */
    .childFund_ForgotPasswordClip {
        width: 40px !important;
        height: 55px !important;
        top: -12px;
        margin-bottom: 10px !important;
    }

    /* Forgot Password Title - lebih kecil */
    .childFund_ForgotPasswordTitle {
        font-size: 1.1rem !important;
        margin-bottom: 8px !important;
    }

    /* Forgot Password Description - lebih kecil */
    .childFund_ForgotPasswordDesc {
        font-size: 0.8rem !important;
        margin-bottom: 10px !important;
    }

    /* Medium Input fields - lebih kecil */
    .childFund_MediumInput {
        height: 35px !important;
        font-size: 0.8rem !important;
        padding: 8px !important;
    }

    /* Password button - lebih kecil */
    .childFund_ButtonPassword {
        width: 35px !important;
        font-size: 0.8rem !important;
        padding: 8px !important;
    }

    /* Forgot Password Button Container - lebih kecil */
    .childFund_ForgotPasswordButton {
        height: 35px !important;
        margin-bottom: 8px !important;
    }

    /* Button font - lebih kecil */
    .childFund_FontButtonLogin {
        font-size: 0.8rem !important;
    }

    /* Margin adjustments - lebih kecil */
    .mb-3 {
        margin-bottom: 0.5rem !important;
    }

    .mb-5 {
        margin-bottom: 1rem !important;
    }

    /* Container parent padding */
    .childFund_ContainerParent {
        padding: 2px !important;
    }
}

/* Tablet Landscape - Forgot Password */
@media screen and (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {

    /* Forgot Password Popup Container - proporsi yang lebih seimbang */
    .childFund_ForgotPasswordPopup {
        width: 55% !important;
        max-width: 480px !important;
        padding: 25px !important;
        margin: 15px auto !important;
        max-height: 80vh !important;
        position: fixed !important;
        top: 53% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    /* Forgot Password Clip Image - ukuran proporsional */
    .childFund_ForgotPasswordClip {
        width: 40px !important;
        height: 55px !important;
        margin-bottom: 15px !important;
    }

    /* Forgot Password Title - ukuran yang seimbang */
    .childFund_ForgotPasswordTitle {
        font-size: 1.3rem !important;
        margin-bottom: 10px !important;
    }

    /* Forgot Password Description - ukuran yang proporsional */
    .childFund_ForgotPasswordDesc {
        font-size: 0.95rem !important;
        margin-bottom: 15px !important;
    }

    /* Medium Input fields - ukuran yang seimbang */
    .childFund_MediumInput {
        height: 42px !important;
        font-size: 0.95rem !important;
        padding: 10px !important;
    }

    /* Password button - proporsional dengan input */
    .childFund_ButtonPassword {
        width: 42px !important;
        font-size: 0.95rem !important;
        padding: 10px !important;
    }

    /* Forgot Password Button Container - seimbang */
    .childFund_ForgotPasswordButton {
        height: 42px !important;
        margin-bottom: 10px !important;
    }

    /* Button font - ukuran yang tepat */
    .childFund_FontButtonLogin {
        font-size: 1rem !important;
    }

    /* Margin adjustments untuk spacing yang baik */
    .mb-3 {
        margin-bottom: 0.7rem !important;
    }

    .mb-5 {
        margin-bottom: 1.3rem !important;
    }

    .childFun_floatingLogo {
        top: 10px !important;
        left: 10px !important;
        z-index: 1000 !important;
    }
}

    /* ===== ADDITIONAL RESPONSIVE UTILITIES ===== */

    /* Ensure scrollable content for all landscape orientations */
    @media screen and (orientation: landscape) {
        .childFund_ContainerParent {
            overflow-y: auto !important;
            height: 100vh !important;
        }

        /* Prevent horizontal overflow */
        body, html {
            overflow-x: hidden !important;
        }

        /* Ensure popup stays within viewport */
        .childFund_ForgotPasswordPopup {
            box-sizing: border-box !important;
        }
    }

    /* Fix for very wide but short screens */
    @media screen and (min-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
        .childFund_ForgotPasswordPopup {
            width: 50% !important;
            max-width: 600px !important;
            padding: 30px !important;
        }
    }

/* ===== TERMS & CONDITIONS PAGE LANDSCAPE RESPONSIVENESS ===== */

/* Mobile Landscape untuk Terms & Conditions Page */
@media screen and (max-width: 1023px) and (orientation: landscape) {

    #scroll-container {
        max-width: 95vw !important;
        padding: 10px !important;
        top: -3% !important;
        height: 64vh !important;
    }

    #outer-scroll-container {
        max-width: 95vw !important;
        height: 96vh !important;
        object-fit: contain !important;
    }

    #ornament-scroll {
        max-width: 60px !important;
        left: 1% !important;
        top: 22% !important;
    }

    #privacy-policy {
        max-width: 180px !important;
        left: 33% !important;
        top: -3% !important;
    }

    #terms-condition {
        max-width: 180px !important;
        left: 33% !important;
        top: -3% !important;
    }

    #rectangle-scroll {
        left: 11% !important;
        top: 16% !important;
        width: 79% !important;
        height: 79% !important;
    }

        #rectangle-scroll img:first-child {
            height: 100% !important;
            width: 100% !important;
            object-fit: fill !important;
        }

    #text-scroll {
        width: 88% !important;
        height: 85% !important;
        padding: 15px !important;
        padding-right: 50px !important;
        top: 52% !important;
        left: 50% !important;
    }

        #text-scroll h1 {
            font-size: 1.1rem !important;
            margin-bottom: 8px !important;
        }

        #text-scroll h2 {
            font-size: 1rem !important;
            margin-bottom: 6px !important;
        }

        #text-scroll h3 {
            font-size: 0.85rem !important;
            line-height: 1.3 !important;
            margin-bottom: 8px !important;
        }

        #text-scroll h4 {
            font-size: 0.8rem !important;
            line-height: 1.2 !important;
        }

    /* Optimize scrollbar for landscape */
    .custom-scrollbar-track {
        right: 10px !important;
        width: 16px !important;
        height: 95% !important;
    }

    .custom-scrollbar-thumb {
        min-height: 30px !important;
    }

    /* Adjust content spacing for landscape */
    .scroll-content-wrapper {
        padding-right: 15px !important;
    }

    .terms-content div {
        margin-bottom: 12px !important;
    }

    .terms-content br {
        display: none !important;
    }

    /* List styling optimization */
    .terms-content ul {
        margin: 8px 0 !important;
        padding-left: 20px !important;
    }

    .terms-content ol {
        margin: 8px 0 !important;
        padding-left: 20px !important;
    }

    .terms-content li {
        margin-bottom: 6px !important;
        font-size: 0.85rem !important;
        line-height: 1.3 !important;
    }

    .childFun_floatingLogo {
        top: 10px !important;
        left: 10px !important;
        z-index: 1000 !important;
    }
}

/* Mobile Landscape untuk perangkat sangat kecil - Terms & Conditions */
@media screen and (max-width: 768px) and (orientation: landscape) and (max-height: 500px) {

    #scroll-container {
        max-width: 75vw !important;
        padding: 5px !important;
        top: -2% !important;
        height: 64vh !important;
    }

    #outer-scroll-container {
        max-width: 98vw !important;
        height: 70vh !important;
    }

    #ornament-scroll {
        max-width: 45px !important;
        left: -1% !important;
        top: 20% !important;
    }

    #privacy-policy {
        max-width: 140px !important;
        left: 34% !important;
        top: -5% !important;
    }

    #terms-condition {
        max-width: 140px !important;
        left: 34% !important;
        top: -5% !important;
    }

    #rectangle-scroll {
        left: 10% !important;
        top: 17% !important;
        width: 81% !important;
        height: 81% !important;
    }

    #text-scroll {
        width: 92% !important;
        height: 90% !important;
        padding: 10px !important;
        padding-right: 40px !important;
    }

        #text-scroll h1 {
            font-size: 0.9rem !important;
            margin-bottom: 6px !important;
        }

        #text-scroll h2 {
            font-size: 0.8rem !important;
            margin-bottom: 5px !important;
        }

        #text-scroll h3 {
            font-size: 0.75rem !important;
            line-height: 1.2 !important;
            margin-bottom: 6px !important;
        }

        #text-scroll h4 {
            font-size: 0.7rem !important;
            line-height: 1.1 !important;
        }

    .custom-scrollbar-track {
        right: 8px !important;
        width: 14px !important;
    }

    .custom-scrollbar-thumb {
        min-height: 25px !important;
    }

    .terms-content li {
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
        margin-bottom: 4px !important;
    }

    .terms-content div {
        margin-bottom: 8px !important;
    }

    /* Container parent padding */
    .childFund_ContainerParent {
        padding: 2px !important;
    }
}

/* Tablet Landscape - Terms & Conditions */
@media screen and (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {

    #scroll-container {
        max-width: 54vw !important;
        padding: 15px !important;
        top: -3% !important;
        height: 62vh !important;
    }

    #outer-scroll-container {
        max-width: 90vw !important;
        height: 75vh !important;
    }

    #ornament-scroll {
        max-width: 70px !important;
        left: 1% !important;
        top: 21% !important;
    }

    #privacy-policy {
        max-width: 200px !important;
        left: 32% !important;
        top: -3% !important;
    }

    #terms-condition {
        max-width: 200px !important;
        left: 32% !important;
        top: -3% !important;
    }

    #rectangle-scroll {
        left: 12% !important;
        top: 18% !important;
        width: 76% !important;
        height: 75% !important;
    }

    #text-scroll {
        width: 90% !important;
        height: 88% !important;
        padding: 12px !important;
        padding-right: 45px !important;
    }

        #text-scroll h1 {
            font-size: 1.2rem !important;
            margin-bottom: 10px !important;
        }

        #text-scroll h2 {
            font-size: 1.1rem !important;
            margin-bottom: 8px !important;
        }

        #text-scroll h3 {
            font-size: 0.9rem !important;
            line-height: 1.4 !important;
            margin-bottom: 10px !important;
        }

        #text-scroll h4 {
            font-size: 0.85rem !important;
            line-height: 1.3 !important;
        }

    .terms-content li {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        margin-bottom: 8px !important;
    }

    .terms-content div {
        margin-bottom: 15px !important;
    }

    .childFun_floatingLogo {
        top: 10px !important;
        left: 10px !important;
        z-index: 1000 !important;
    }
}

/*Samsung S8 +*/
@media screen and (min-width: 720px) and (max-width: 760px) and (min-height: 340px) and (max-height: 380px) and (orientation: landscape) {
    #rectangle-scroll {
        left: 17% !important;
        top: 17% !important;
        width: 66% !important;
        height: 79% !important;
    }

    #ornament-scroll {
        max-width: 45px !important;
        left: 7% !important;
        top: 20% !important;
    }
}

/*Samsung Z Fold*/
@media screen and (min-width: 860px) and (max-width: 900px) and (min-height: 320px) and (max-height: 350px) and (orientation: landscape) {
    #rectangle-scroll {
        left: 17% !important;
        top: 21% !important;
        width: 66% !important;
        height: 71% !important;
    }

    #ornament-scroll {
        max-width: 70px !important;
        left: 7% !important;
        top: 21% !important;
    }

    .childFund_ForgotPasswordTitle {
        margin-bottom: 0px !important;
    }

    .childFund_ForgotPasswordDesc {
        margin-bottom: 0.3rem !important;
    }

    .mb-5 {
        margin-bottom: 0.3rem !important;
    }

    .childFund_GameLogoLogin {
        margin-top: 355px !important
    }
}