.homeBannerAnimation{
    
    width: 540px;
    height: 500px;
   /* background-image: linear-gradient(#160337, #3b3659);*/
   margin-left: 50px;
}


@media (max-width: 1400px) {
    .homeBannerAnimation {
        transform: scale(0.8); /* Zoom out to 90% */
    }
}

@media (max-width: 1240px) {
    .homeBannerAnimation {
        transform: scale(0.6); /* Zoom out to 90% */
    }

    .homeBannerAnimation {
        margin-left: 0px;
    }
}

@media (max-width: 992px) {
    .homeBannerAnimation {
        transform: scale(0.8); /* Zoom out to 80% */
    }
}

@media (max-width: 768px) {
    .homeBannerAnimation {
        transform: scale(0.7); /* Zoom out to 70% */
    }
    .homeBannerAnimation {
        margin-left: -100px;
    }

    .col-lg-6.order-2.order-lg-2.hero-img {
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .homeBannerAnimation {
        transform: scale(0.6); /* Zoom out to 60% */
        /*margin-left: -139px;*/
    }
}



.indexBanner {
    background: radial-gradient(ellipse at 50% 120%, #5E20A7, #150659) !important;
}

.Animationbox {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.5);
    transition: all 0.5s ease-out; /* Smooth pop-up effect */
}

.AnimationShow {
    opacity: 1;
    visibility: visible;
    transform: scale(1); /* Pop-up effect */
}



.homeBannerAnimation > div {
    transform: scale(0.3); /* Scale the Animationbox content down to 80% */
    position: relative;
}

.AlertBox {
    background: url(../img/Home/banner/HomeBanner.webp) no-repeat -112px -1636px;
    width: 477px;
    height: 132px;
    bottom: 697px;
    left: -118px;
}

.AlertToDonationLine {
    background: url(../img/Home/banner/HomeBanner.webp) no-repeat -350px -1501px;
    width: 4px;
    height: 75px;
    bottom: 625px;
    left: 118px;
}

.PromotionBox {
    background: url(../img/Home/banner/HomeBanner.webp) no-repeat -112px -1309px;
    width: 477px;
    height: 132px;
    top: -407px;
    right: 116px;
}

.DonationToPromotionLine {
    background: url(../img/Home/banner/HomeBanner.webp) no-repeat -350px -1174px;
    width: 4px;
    height: 75px;
    bottom: 480px;
    right: -119px;
}


.DonationBox {
    background: url(../img/Home/banner/HomeBanner.webp) no-repeat -112px -982px;
    width: 477px;
    height: 132px;
    bottom: 552px;
    left: -116px;
}

.DonationToPTLine {
    background: url(../img/Home/banner/HomeBanner.webp) no-repeat -347px -751px;
    width: 4px;
    height: 171px;
    top: -303px;
    right: -118px;
}


.PTBox {
    background: url(../img/Home/banner/HomeBanner.webp) no-repeat -112px -409px;
    width: 477px;
    height: 282px;
    
    top: -143px;
    left: -114px;
}

.PTToMobileLine {
	background: url('../img/Home/banner/HomeBanner.webp') no-repeat -347px -221px;
	width: 344px;
	height: 128px;
}


.MobileBox {
	background: url('../img/Home/banner/HomeBanner.webp') no-repeat -778px -121px;
	width: 660px;
	height: 1334px;
    bottom:1587px;
    left: -13px;
    
}





.MobileMessageBoxParent {
    width: 507px;
    height: 306px;
    bottom: 2491px;
    left: 63px;
    /*background-color: #4a90e2;
    border-radius: 10px;*/
    overflow: hidden;
}

.MobileMessageBox {
    background: url('../img/Home/banner/HomeBanner.webp') no-repeat -838px -1537px;
    position: absolute !important;
    width: 507px;
    height: 306px;
    /* bottom: 2491px;
    left: 63px;*/
    top: 50%;
    left: 50%;
    /*transform: translate(-50%, -50%) scale(0);
    transition: transform 0.8s ease;*/
    transform: translate(-50%, 100%) scale(0); /* Start from off-screen, scaled down */
    transition: transform 0.8s ease; /* Smooth transition for movement and scaling */



}




.MobileMessageBoxAnimate {
    transform: translate(-50%, -50%) scale(1);
}












.MobileToPeople3Lines {
    background: url(../img/Home/banner/HomeBanner.webp) no-repeat -1491px -428px;
    width: 247px;
    height: 719px;
    bottom: 2923px;
    left: 328px;
}

.person1 {
    background: url('../img/Home/banner/HomeBanner.webp') no-repeat -1803px -307px;
    width: 397px;
    height: 240px;
    bottom: 3512px;
    left: 350px;
}


.person2 {
    background: url('../img/Home/banner/HomeBanner.webp') no-repeat -1803px -667px;
    width: 397px;
    height: 240px;
    bottom: 3645px;
    left: 344px;
}


.person3 {
    background: url('../img/Home/banner/HomeBanner.webp') no-repeat -1803px -1027px;
    width: 397px;
    height: 240px;
    bottom: 3778px;
    left: 350px;
}