body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #0d2b49;
}

.container {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
    overflow: hidden;
    position: relative;

}

.background {
    width: 550px;
    height: 100%;
    position: relative;
    background-color: red;
    overflow: hidden;
}

.background .bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.logo img {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
}

.money {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 100px;
    left: 42%;
    transform: translateX(-50%);
    width: 200px;
}

.money img {
    width: 50%;
    height: auto;
}

.text {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
}

.text img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 14px rgba(255, 0, 128, 0.65));
    animation: textShadowGlow 5s linear infinite;
}

.btn {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 20%;
    left: 30%;
    width: 250px;
    height: auto;
    align-items: center;
    z-index: 99;
    cursor: pointer;
}

.btn .btn-here {
    width: 250px;
    left: 50%;
    filter: drop-shadow(0 0 10px rgba(255, 255, 0, 0.5));
    animation: btnPulse 2.5s ease-in-out infinite, btnShadowGlow 3.5s linear infinite;
    transform-origin: center;
}

@keyframes btnPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes textShadowGlow {
    0% {
        filter: drop-shadow(0 0 12px rgba(255, 0, 128, 0.65));
    }

    33% {
        filter: drop-shadow(0 0 16px rgba(0, 200, 255, 0.7));
    }

    66% {
        filter: drop-shadow(0 0 14px rgba(0, 255, 170, 0.65));
    }

    100% {
        filter: drop-shadow(0 0 12px rgba(255, 0, 128, 0.65));
    }
}

@keyframes btnShadowGlow {
    0% {
        filter: drop-shadow(0 0 10px rgba(255, 255, 0, 0.5));
    }

    25% {
        filter: drop-shadow(0 0 14px rgba(255, 0, 0, 0.6));
    }

    50% {
        filter: drop-shadow(0 0 12px rgba(0, 200, 255, 0.65));
    }

    75% {
        filter: drop-shadow(0 0 14px rgba(0, 255, 170, 0.6));
    }

    100% {
        filter: drop-shadow(0 0 10px rgba(255, 255, 0, 0.5));
    }
}

.point1 {
    position: absolute;
    top: 25%;
    left: 68%;
    width: 50px;
    height: 50px;
    z-index: 10;
}
.point1 img{
    width: 60%;
}


.two-img {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 25%;
    left: -10%;
    width: 400px;
    height: auto;
    align-items: center;
    z-index: 9;
    gap: 10px;
}

.two-img img {
    width: 80%;
    height: auto;
}

.two-img1 {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 25%;
    left: 50%;
    width: 300px;
    height: auto;
    align-items: center;
    z-index: 9;
    gap: 10px;
}

.two-img1 img {
    width: 80%;
    height: auto;
}

.person {
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 9;
    display: flex;
    justify-content: center;
}

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

.tree-img {
    position: absolute;
    top: 72%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 9;
    display: flex;
    justify-content: center;
}

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

.main-bank {
    position: absolute;
    top: 70%;
    /* adjust between 40–45% until it looks right */
    left: -5%;
    transform: translateX(-50%,-50%);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    /* spacing between images */
    z-index: 9;
    width: 150%;
}

.main-bank img {
    max-width: 600px;
    /* control size */
    height: auto;
    position: relative;
    z-index: 10;
}

/* Optional: tilt effect to mimic overlapping */
.main-bank img:nth-child(1) {
    position: absolute;
    left: 1px;
    width: 80%;
    top: 15px;
}

.main-bank img:nth-child(2) {
    left: 23%;
    top: -15px;
}

.main-bank img:nth-child(3) {
    z-index: -1;
    left: 10%;
    width: 90%;
    top: 15PX;
}


.mormoney {
    position: absolute;
    top: 92%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 9;
    display: flex;
    justify-content: center;
}

.mormoney img {
    width: 100%;
    height: auto;
    max-width: 600px;
}

.coin {
    position: absolute;
    top: 95%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 9;
    display: flex;
    justify-content: center;
}

.coin img {
    width: 100%;
    height: auto;
    max-width: 600px;
}

/* Default styles already included above */

/* For screens up to 428px */
@media (max-width: 428px) {
    .logo img {
        width: 150px;
        top: 30px;
    }

    .money {
        top: 85px;
        left: 40%;
        width: 150px;
    }

    .text {
        width: 350px;
        top: 80px;
    }

    .btn {
        top: 22%;
        left: 50%;
        transform: translateX(-50%);
        width: 200px;
    }

    .person img {
        max-width: 250px;
    }

    .two-img {
        display: flex;
        justify-content: center;
        position: absolute;
        top: 30%;
        left: -10%;
        width: 400px;
        height: auto;
        align-items: center;
        z-index: 9;
        gap: 10px;
    }

    .two-img1 {
        display: flex;
        justify-content: center;
        position: absolute;
        top: 30%;
        left: 50%;
        width: 300px;
        height: auto;
        align-items: center;
        z-index: 9;
        gap: 10px;
    }

    .tree-img {
        position: absolute;
        top: 75%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        z-index: 9;
        display: flex;
        justify-content: center;
    }


    .main-bank img {
        max-width: 450px;
        left: 22%;
    }

    .main-bank img:nth-child(1) {
        position: absolute;
        left: -3PX;
        width: 80%;
        top: 15px;
    }

    .main-bank img:nth-child(2) {
        left: 30%;
        top: -15px;
    }

    .main-bank img:nth-child(3) {
        z-index: -1;
        left: 10%;
        width: 90%;
        top: 15PX;
    }

    .mormoney img,
    .coin img {
        max-width: 450px;
    }
}

/* For screens up to 414px */
@media (max-width: 415px) {
    .logo img {
        width: 140px;
    }

    .money {
        width: 140px;
    }

    .text {
        width: 280px;
    }

    .btn {
        width: 180px;
    }

    .two-img {
        display: flex;
        justify-content: center;
        position: absolute;
        top: 30%;
        left: -10%;
        width: 400px;
        height: auto;
        align-items: center;
        z-index: 9;
        gap: 10px;
    }

    .two-img1 {
        display: flex;
        justify-content: center;
        position: absolute;
        top: 30%;
        left: 50%;
        width: 300px;
        height: auto;
        align-items: center;
        z-index: 9;
        gap: 10px;
    }

    .tree-img {
        position: absolute;
        top: 80%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        z-index: 9;
        display: flex;
        justify-content: center;
    }

    .person img {
        max-width: 240px;
    }
    .main-bank{
        top: 75%;
     }
    .main-bank img {
        max-width: 400px;
        
        left: 25%;
    }

    .main-bank img:nth-child(1) {
        position: absolute;
        left: -3PX;
        width: 80%;
        top: 40px;
    }

    .main-bank img:nth-child(2) {
        left: 20%;
        top: 40px;
    }

    .main-bank img:nth-child(3) {
        z-index: -1;
        left: 15%;
        width: 90%;
        top: 40px;
    }

    .mormoney img,
    .coin img {
        top: 90%;
        max-width: 400px;
    }
}

/* For screens up to 390px */
@media (max-width: 390px) {
    .logo img {
        width: 130px;
    }

    .money {
        width: 120px;
    }

    .text {
        width: 260px;
    }

    .btn {
        width: 170px;
    }

    .two-img {
        display: flex;
        justify-content: center;
        position: absolute;
        top: 30%;
        left: -10%;
        width: 400px;
        height: auto;
        align-items: center;
        z-index: 9;
        gap: 10px;
    }

    .two-img1 {
        display: flex;
        justify-content: center;
        position: absolute;
        top: 30%;
        left: 50%;
        width: 300px;
        height: auto;
        align-items: center;
        z-index: 9;
        gap: 10px;
    }

    .tree-img {
        position: absolute;
        top: 80%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        z-index: 9;
        display: flex;
        justify-content: center;
    }


    .person img {
        max-width: 220px;
    }
    
    .main-bank{
        top: 68%;
        left: -5%;
     }
    .main-bank img {
        max-width: 450px;
       
    }

    .mormoney img,
    .coin img {
        max-width: 400px;
    }

    .main-bank img:nth-child(1) {
        position: absolute;
        left: -3PX;
        width: 80%;
        top: 30px;
    }

    .main-bank img:nth-child(2) {
        left: 20%;
        top: 30px;
    }

    .main-bank img:nth-child(3) {
        z-index: -1;
        left: 15%;
        width: 90%;
        top: 30px;
    }
}

/* For screens up to 360px */
@media (max-width: 360px) {
    .logo img {
        width: 120px;
    }

    .money {
        width: 100px;
    }

    .text {
        top: 70px;
        width: 220px;
    }

    .btn {
        width: 150px;
    }

    .two-img {
        display: flex;
        justify-content: center;
        position: absolute;
        top: 30%;
        left: -10%;
        width: 300px;
        height: auto;
        align-items: center;
        z-index: 9;
        gap: 10px;
    }

    .two-img1 {
        display: flex;
        justify-content: center;
        position: absolute;
        top: 30%;
        left: 50%;
        width: 200px;
        height: auto;
        align-items: center;
        z-index: 9;
        gap: 10px;
    }

    .tree-img {
        position: absolute;
        top: 75%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        z-index: 9;
        display: flex;
        justify-content: center;
    }

    .person img {
        max-width: 200px;
    }
    .main-bank {
        top: 65%;
        left: -1%;
    }
    .main-bank img {
        max-width: 400px;
    }

    .main-bank img:nth-child(1) {
        position: absolute;
        left: -3PX;
        width: 80%;
        top: 30px;
    }

    .main-bank img:nth-child(2) {
        left: 25%;
        top: 30px;
    }

    .main-bank img:nth-child(3) {
        z-index: -1;
        left: 15%;
        width: 90%;
        top: 30px;
    }
    .coin{
        top: 95%;
    }
    .mormoney img,
    .coin img {
        max-width: 400px;
        top: 70px;
    }
}