.AppLandingBox0 { position: relative; float: left; width: 100%; height: 60vh; padding: 0 15% 0 ; margin-top: 3.5rem ; display: flex; align-items: center;  }

.AppLandingBox2 { position: absolute ; bottom: 0 ; left: 0; width: 80% ; height: 100% ; display: flex ; justify-content: center; flex-direction: column ; z-index: 1 ; padding-left: 16%; padding-right: 20%; padding-top: 10%; background-color: rgba(226, 43, 180, 0);
}



.AppLandingBgBox { position: absolute ; top: 0 ; right: 0 ; width: 70% ; height: 100% ; display: flex; justify-content: center; align-items: center; overflow: hidden; background-color: rgba(137, 43, 226, 0); }
/* .AppLandingBgBox { position: absolute ; top: 0 ; right: 0 ; width: 100% ; height: 100% ; display: flex; justify-content: center; align-items: center; overflow: hidden; background-color: rgba(137, 43, 226, 0); } */
.AppLandingBg { width: 100% ; }




.AppLandingBox00  { float: left; width: 100%; display: flex; align-items: center; background-color: rgba(137, 43, 226, 0) ; margin-top: -1rem ; z-index: 5 ; }
.AppLandingLogoBox { float: left; width: 5rem; height: auto; display: flex; align-content: center; justify-content: center; background-color: rgba(0, 255, 255, 0); overflow: hidden; padding: 10px; }
.AppLandingLogo { width: 100% ; }





.AppLandingRelativeBox { float: left; width: 100% ; position: relative ; }
.AppLandingText { font-size: 1.2rem ; line-height: 1.5rem ; }


.LandingBgShadingBase { position: absolute ; bottom: 0 ; left: 0 ; width: 50% ; height: 100% ; }





@media screen and ( max-width: 800px ) {
    .AppLandingBox0 {  padding-left: 5%; padding-right: 5%; height: 80vh; }
    .AppLandingBg { position: absolute ; top: 0 ; height: 60% ; width: auto ; }
    .AppLandingBgBox { width: 100% ; }
    .LandingBgShadingBase { bottom: 39% ; width: 100% ; height: 25% ; }
    .AppLandingBox2  { position: absolute ; bottom: -2px ; width: 100% ; padding-left: 5%; padding-right: 5% ; height: fit-content; }
}