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;
    margin: 0 auto;
}

.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;
}

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

.btn .btn-here {
    width: 250px;
    left: 0%;
    position: relative;
    animation: pulseGlow 2s ease-in-out infinite, float 3s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 20px rgba(255, 165, 0, 0.6));
    transition: transform 0.3s ease;
}

.btn .btn-here:hover {
    transform: scale(1.05);
    animation: pulseGlow 1s ease-in-out infinite, float 2s ease-in-out infinite, shimmer 2s infinite;
}

.btn .btn-here::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: shine 3s infinite;
}

@keyframes pulseGlow {
    0%, 100% {
        filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 20px rgba(255, 165, 0, 0.6));
    }
    50% {
        filter: drop-shadow(0 0 20px rgba(255, 215, 0, 1)) drop-shadow(0 0 30px rgba(255, 165, 0, 0.8)) drop-shadow(0 0 40px rgba(255, 140, 0, 0.6));
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes shine {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

@keyframes shimmer {
    0%, 100% {
        filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 20px rgba(255, 165, 0, 0.6));
    }
    25% {
        filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 25px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 35px rgba(255, 165, 0, 0.7));
    }
    50% {
        filter: drop-shadow(0 0 20px rgba(255, 215, 0, 1)) drop-shadow(0 0 30px rgba(255, 165, 0, 0.8)) drop-shadow(0 0 40px rgba(255, 140, 0, 0.6));
    }
    75% {
        filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 25px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 35px rgba(255, 165, 0, 0.7));
    }
}

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

.person img {
    max-width: 600px;
    object-fit: contain;
}

.left-one-img {
    position: absolute;
    top: 80%;
    left: 14%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 250px;
    z-index: 9;
}

.left-one-img img {
    width: 100%;
    height: auto;
    object-fit: contain;
}


.middle-one-img {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}
.middle-one-img img {
    width: 100%;
    height: auto;
    object-fit: contain;
}
.right-one-img {
    position: absolute;
    top: 80%;
    right: 14%;
    transform: translate(50%, -50%);
    z-index: 10;
    max-width: 200px;
}
.right-one-img img {
    width: 100%;
    height: auto;
    object-fit: contain;
}


.main-bank {
    position: absolute;
    top: 68%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    z-index: 12;
    width: 100%;
    max-width: 550px;
    padding: 0 20px;
}

.main-bank .left-img {
    max-width: 200px;
    height: auto;
    position: relative;
    z-index: 11;
    margin-left: 0;
   
    animation: buttonPulse 2.5s ease-in-out infinite, buttonFloat 3.5s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(0, 255, 0, 0.7)) drop-shadow(0 0 15px rgba(50, 205, 50, 0.5));
    transition: transform 0.3s ease;
}



.main-bank .left-img::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    animation: buttonShimmer 3s infinite;
    pointer-events: none;
}

.main-bank .right-img {
    max-width: 200px;
    height: auto;
    position: relative;
    z-index: 11;
    margin-right: 0;
   
    filter: drop-shadow(0 0 8px rgba(255, 20, 147, 0.7)) drop-shadow(0 0 15px rgba(255, 105, 180, 0.5));
    transition: transform 0.3s ease;
}

.main-bank .right-img::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    animation: buttonShimmer 3s infinite;
    pointer-events: none;
}

@keyframes buttonPulse {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(0, 255, 0, 0.7)) drop-shadow(0 0 15px rgba(50, 205, 50, 0.5));
    }
    50% {
        filter: drop-shadow(0 0 15px rgba(0, 255, 0, 0.9)) drop-shadow(0 0 25px rgba(50, 205, 50, 0.7)) drop-shadow(0 0 35px rgba(0, 255, 127, 0.5));
    }
}

.main-bank .right-img {
    animation: buttonPulseRight 2.5s ease-in-out infinite, buttonFloat 3.5s ease-in-out infinite;
}

@keyframes buttonPulseRight {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(255, 20, 147, 0.7)) drop-shadow(0 0 15px rgba(255, 105, 180, 0.5));
    }
    50% {
        filter: drop-shadow(0 0 15px rgba(255, 20, 147, 0.9)) drop-shadow(0 0 25px rgba(255, 105, 180, 0.7)) drop-shadow(0 0 35px rgba(255, 0, 127, 0.5));
    }
}

@keyframes buttonShineRight {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(255, 20, 147, 0.7)) drop-shadow(0 0 15px rgba(255, 105, 180, 0.5));
    }
    25% {
        filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 20px rgba(255, 20, 147, 0.8)) drop-shadow(0 0 30px rgba(255, 105, 180, 0.6));
    }
    50% {
        filter: drop-shadow(0 0 15px rgba(255, 20, 147, 0.9)) drop-shadow(0 0 25px rgba(255, 105, 180, 0.7)) drop-shadow(0 0 35px rgba(255, 0, 127, 0.5));
    }
    75% {
        filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 20px rgba(255, 20, 147, 0.8)) drop-shadow(0 0 30px rgba(255, 105, 180, 0.6));
    }
}

@keyframes buttonFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@keyframes buttonShimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

@keyframes buttonShine {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(0, 255, 0, 0.7)) drop-shadow(0 0 15px rgba(50, 205, 50, 0.5));
    }
    25% {
        filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 20px rgba(0, 255, 0, 0.8)) drop-shadow(0 0 30px rgba(50, 205, 50, 0.6));
    }
    50% {
        filter: drop-shadow(0 0 15px rgba(0, 255, 0, 0.9)) drop-shadow(0 0 25px rgba(50, 205, 50, 0.7)) drop-shadow(0 0 35px rgba(0, 255, 127, 0.5));
    }
    75% {
        filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 20px rgba(0, 255, 0, 0.8)) drop-shadow(0 0 30px rgba(50, 205, 50, 0.6));
    }
}

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

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

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

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

/* Responsive Styles */

/* For screens up to 428px */
@media (max-width: 428px) {
    .background {
        width: 100%;
        max-width: 428px;
    }

    .logo img {
        width: 150px;
        top: 30px;
    }

    .text {
        width: 320px;
        top: 90px;
    }

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

    .btn .btn-here {
        width: 200px;
        left: 0%;
    }

    .person {
        top: 45%;
    }

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

    .left-one-img {
        top: 75%;
        left: 10%;
        max-width: 180px;
    }

    .middle-one-img {
        top: 75%;
    }

    .middle-one-img img {
        width: 200px !important;
    }

    .right-one-img {
        top: 75%;
        right: 10%;
        max-width: 150px;
    }

    .main-bank {
        top: 65%;
        padding: 0 15px;
    }

    .main-bank .left-img {
        max-width: 160px;
    }

    .main-bank .right-img {
        max-width: 160px;
    }

    .mormoney {
        top: 88%;
    }

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

    .coin {
        top: 97%;
    }

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

/* For screens up to 414px */
@media (max-width: 414px) {
    .background {
        width: 100%;
        max-width: 414px;
    }

    .logo img {
        width: 140px;
        top: 25px;
    }

    .text {
        width: 300px;
        top: 85px;
    }

    .btn {
        top: 33%;
        width: 180px;
    }

    .btn .btn-here {
        width: 180px;
    }

    .person {
        top: 46%;
    }

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

    .left-one-img {
        top: 74%;
        left: 8%;
        max-width: 160px;
    }

    .middle-one-img img {
        width: 180px !important;
    }

    .right-one-img {
        top: 74%;
        right: 8%;
        max-width: 140px;
    }

    .main-bank {
        top: 64%;
        padding: 0 12px;
    }

    .main-bank .left-img {
        max-width: 150px;
    }

    .main-bank .right-img {
        max-width: 150px;
    }

    .mormoney img {
        max-width: 420px;
    }

    .coin img {
        max-width: 420px;
    }
}

/* For screens up to 390px */
@media (max-width: 390px) {
    .background {
        width: 100%;
        max-width: 390px;
    }

    .logo img {
        width: 130px;
        top: 20px;
    }

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

    .btn {
        top: 32%;
        width: 170px;
    }

    .btn .btn-here {
        width: 170px;
    }

    .person {
        top: 47%;
    }

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

    .left-one-img {
        top: 73%;
        left: 6%;
        max-width: 140px;
    }

    .middle-one-img img {
        width: 170px !important;
    }

    .right-one-img {
        top: 73%;
        right: 6%;
        max-width: 130px;
    }

    .main-bank {
        top: 63%;
        padding: 0 10px;
        gap: 15px;
    }

    .main-bank .left-img {
        max-width: 140px;
    }

    .main-bank .right-img {
        max-width: 140px;
    }

    .mormoney {
        top: 89%;
    }

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

    .coin {
        top: 98%;
    }

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

/* For screens up to 360px */
@media (max-width: 360px) {
    .background {
        width: 100%;
        max-width: 360px;
    }

    .logo img {
        width: 120px;
        top: 18px;
    }

    .text {
        width: 260px;
        top: 75px;
    }

    .btn {
        top: 30%;
        width: 160px;
    }

    .btn .btn-here {
        width: 160px;
    }

    .person {
        top: 48%;
    }

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

    .left-one-img {
        top: 72%;
        left: 5%;
        max-width: 120px;
    }

    .middle-one-img img {
        width: 150px !important;
    }

    .right-one-img {
        top: 72%;
        right: 5%;
        max-width: 120px;
    }

    .main-bank {
        top: 62%;
        padding: 0 8px;
        gap: 12px;
    }

    .main-bank .left-img {
        max-width: 130px;
    }

    .main-bank .right-img {
        max-width: 130px;
    }

    .mormoney img {
        max-width: 380px;
    }

    .coin img {
        max-width: 380px;
    }
}

/* For screens up to 320px */
@media (max-width: 320px) {
    .background {
        width: 100%;
        max-width: 320px;
    }

    .logo img {
        width: 110px;
        top: 15px;
    }

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

    .btn {
        top: 28%;
        width: 150px;
    }

    .btn .btn-here {
        width: 150px;
    }

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

    .left-one-img {
        max-width: 100px;
    }

    .middle-one-img img {
        width: 130px !important;
    }

    .right-one-img {
        max-width: 100px;
    }

    .main-bank {
        gap: 10px;
        padding: 0 5px;
    }

    .main-bank .left-img {
        max-width: 120px;
    }

    .main-bank .right-img {
        max-width: 120px;
    }

    .mormoney img {
        max-width: 350px;
    }

    .coin img {
        max-width: 350px;
    }
}