.Image-container {
    background-image: url(/Images/Ramzan_kareem.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#exampleModalCenteredScrollable .modal-body {
    height: 498px;
}

#exampleModalCenteredScrollable .btn-close {
    margin-left: 0px;
    margin-right: 0px;
    justify-self: end;
}

#exampleModalCenteredScrollable .btn-close-custom {
    filter: invert(1) saturate(0);
    --bs-btn-close-opacity: '';
    --bs-btn-close-hover-opacity: '';
    --bs-btn-close-focus-opacity: '';
    --bs-btn-close-disabled-opacity: '';
    --bs-btn-close-white-filter: '';
}

#exampleModalCenteredScrollable .modal-footer {
    border: 0px;
}

#exampleModalCenteredScrollable .modal-header {
    border: 0px;
}

.light {
    position: absolute;
}



/* The image with the drop animation */
.drop-image {
    width: 13%; /*Adjust size */
    position: absolute;
    top: -100px; /* Start position (above the screen) */
    animation: dropAnimation 1s ease-in-out forwards;
}

/* Keyframes for drop effect */
@keyframes dropAnimation {
    0% {
        transform: translateY(-200px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.moon1 {
    top: -9%;
    height: 300px;
    position: absolute;
    width: 107px;
    margin-right: 35px;
}

.moon2 {
    top: 100px;
    position: absolute;
    height: 300px;
    width: 107px;
}

@keyframes moonAnimation1 {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(100%);
    }
}

/*.moon-cotainer {

    width: 250px;
    height: 98vh;
    top: 0px;
    left: 83%;
    position: absolute;
    background-image: url(/Images/moon.png);
  
    background-position: center;
    background-repeat: repeat-y;
}*/
.moon-parent {
    position: absolute;
    display: flex;
    justify-content: end;
    width: 250px;
    top: 0;
}

.moon-flex {
    display: flex;
    justify-content: end
}

.card-ramadan {
    --bs-card-bg: '';
    border: 0px;
}

    .card-ramadan span, .card-ramadan p, .card-ramadan label {
        color: white !important;
    }

    .card-ramadan h3 {
        color: #F4D195 !important;
    }

    .card-ramadan .card-body {
        padding-top: 8px !important;
    }

    .card-ramadan .fw-normal.text-success {
        margin-bottom: 20px;
    }

p {
    margin-top: 10px;
}

.card-ramadan .btn-primary, .card-ramadan .btn-primary:is(:hover,:focus,:active,:active:focus) {
    background-color: #F4D195;
    color: #234161 !important;
}

.moon-rotate {
    transform: rotate(180deg) !important;
    top: -145px !important;
    right: 22px;
}

@media (min-width: 1000px) {
    .moon-parent {
        margin-right: 47px;
    }
}

.light {
    right: -1px;
}

.medal.ltr {
    height: 46px;
    right: auto;
    top: 55px;
    right: auto;
    width: 34px;
    left: 64px;
    transform: rotate(-10deg);
    animation: rotateAnimation 1s infinite alternate ease-in;
}

@keyframes rotateAnimation {
    from {
        left: 64px;
        transform: rotate(0deg);
    }

    to {
        left: 74px;
        transform: rotate(-15deg);
    }
}

@keyframes rotateAnimation2 {
    from {
        right: 64px;
        transform: rotate(0deg);
    }

    to {
        right: 74px;
        transform: rotate(15deg);
    }
}

.relative {
    position: relative;
}

.medal.rtl {
    height: 46px;
    top: 55px;
    right: auto;
    width: 34px;
    right: 64px;
    transform: rotate(-10deg);
    animation: rotateAnimation2 1s infinite alternate ease-in;
    /**/
}

.moon-fade {
    left: -1px;
    right: auto;
}

.ramadan-image {
    background-image: url(/Images/Ramzan_kareem_price.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

    .ramadan-image .card-body {
        padding-top: 46px !important;
        padding-bottom: 56px !important;
    }

@media (max-width: 600px) {


    #exampleModalCenteredScrollable .modal-body {
        height: 300px;
    }

    .light {
        height: 300px;
        top: -104px;
    }
}


@media (max-width: 950px) {
    .medal.ltr {
        height: 46px;
        right: auto;
        top: 55px;
        right: auto;
        width: 34px;
        left: 17px;
        transform: rotate(-10deg);
        animation: rotateAnimation600 1s infinite alternate ease-in;
    }

    .medal.rtl {
        height: 46px;
        top: 55px;
        right: auto;
        width: 34px;
        right: 17px;
        transform: rotate(-10deg);
        animation: rotateAnimation2600 1s infinite alternate ease-in;
        /**/
    }

    @keyframes rotateAnimation2600 {
        from {
            right: 17px;
            transform: rotate(0deg);
        }

        to {
            right: 27px;
            transform: rotate(15deg);
        }
    }

    @keyframes rotateAnimation600 {
        from {
            left: 17px;
            transform: rotate(0deg);
        }

        to {
            left: 27px;
            transform: rotate(-15deg);
        }
    }
}
@media (max-width: 500px) {

    .drop-image.d-flex.justify-content-end {
        top: -50px;
    }
   .moon-rotate{
       display:none;
   }
    .light {
        top: -181px;
    }
    .moon1 ,.moon2{
        width: 86px;
    }
}