/* cta button animation */

body {
    background-color: black;
}

.modal-content {
    background-color: rgba(255, 255, 255, 0);
    border: 0;
}

.txt-format {
    color: #fffcca;
    text-align: center;
    font-weight: bold;
}

#carousel-records {
    width: 40vw;
}

.carousel-container {
    margin-top: 115vw;
    position: absolute;
}

.carousel-container img {
    width: 30vw;
}





@media only screen and (min-width:770px) {

    .section-1 {
        content: url(https://ik.imagekit.io/akjv7d95x/bg.png?updatedAt=1749911637513);
        height: 155vw;
        width: 36vw;
        position: relative;
    }

    .logo {
        content: url(logo.png);
        width: 36vw;
        position: absolute;
        z-index: 1;
    }

    .header {
        content: url(https://ik.imagekit.io/akjv7d95x/banner-en.png?updatedAt=1749911637492);
        width: 36.5%;
        position: absolute;
    }

    .btn-1 {
        position: absolute;
        cursor: pointer;
        width: 29%;
        margin-top: 43vw;
        z-index: 1;
        content: url(https://ik.imagekit.io/akjv7d95x/cta1.png?updatedAt=1749911637412);
    }

    .wheel-bg {
        content: url(https://ik.imagekit.io/akjv7d95x/bg-wheel.png?updatedAt=1749911637510);
        position: absolute;
        width: 32vw;
        margin-top: 56vw;
    }

    .coin-l {
        content: url(https://ik.imagekit.io/akjv7d95x/coin1.png?updatedAt=1749911637406);
        position: absolute;
        width: 9vw;
        margin-top: 68vw;
        left: 31.6vw;
    }

    .coin-r {
        content: url(https://ik.imagekit.io/akjv7d95x/coin2.png?updatedAt=1749911637369);
        position: absolute;
        width: 8vw;
        margin-top: 71vw;
        right: 30.6vw;
    }

    .jackpot {
        content: url(https://ik.imagekit.io/akjv7d95x/jackpot.png?updatedAt=1749911637448);
        position: absolute;
        width: 24%;
        margin-top: 52vw;
    }

    .jackpot_amnt {
        position: absolute;
        color: #f6da1c;
        font-weight: bold;
        font-size: 2.4vw;
        margin-top: 57vw;
    }

    .wheel-border {
        content: url(https://ik.imagekit.io/akjv7d95x/wheel-border.png?updatedAt=1749911932521);
        width: 35vw;
        position: absolute;
        margin-top: 59vw;
        z-index: 1;
    }


    .bg-wheel {
        content: url(https://ik.imagekit.io/akjv7d95x/bg-wheel.png?updatedAt=1749911637510);
        width: 35vw;
        position: absolute;
        margin-top: 4%;
    }

    .d-wheel {
        content: url(https://ik.imagekit.io/akjv7d95x/wheel.png?updatedAt=1749911641752);
        width: 26vw;
        position: absolute;
        margin-top: 66.7vw;
        z-index: 2;
    }


    .spin {
        content: url(https://ik.imagekit.io/akjv7d95x/spin.png?updatedAt=1749911640649);
        width: 5%;
        position: absolute;
        margin-top: 76.5vw;
        cursor: pointer;
        z-index: 3;
    }

    .d-stand {
        content: url(https://ik.imagekit.io/akjv7d95x/stand.png?updatedAt=1749911640668);
        position: absolute;
        width: 19vw;
        height: 7vw;
        margin-top: 90vw;
    }

    .btn2 {
        content: url(https://ik.imagekit.io/akjv7d95x/spin_btn.png?updatedAt=1749911640728);
        position: absolute;
        width: 28%;
        margin-top: 96vw;
        z-index: 3;
    }

    .timer {
        position: absolute;
        text-align: center;
        color: white;
        font-weight: bold;
        font-size: 1.4vw;
        margin-top: 105vw;
    }

    .payment {
        content: url(https://ik.imagekit.io/akjv7d95x/games.png?updatedAt=1749912113627);
        position: absolute;
        margin-top: 110vw;
        width: 34%;
    }

    .modal-bg-1 {
        background-image: url(https://ik.imagekit.io/akjv7d95x/modal_btn_bg.png?updatedAt=1749911637513);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }

    .d-modal_btn1 {
        margin: 38% 0% 5% 0%;
        width: 40%;
        cursor: pointer;
    }

    .d-modal_btn2 {
        margin-top: -51%;
        width: 70%;
        cursor: pointer;
        position: relative;
        z-index: 1;
    }

    .modal-bg-2 {
        background-image: url(https://ik.imagekit.io/akjv7d95x/winner.png?updatedAt=1749911641810);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }

    .modal-text-content {
		margin: 15% 0% 15% 0%;
        color: white;
        text-transform: uppercase;
        font-size: 1.5rem;
        font-weight: bold;
    }

    .modal-footer {
        border: none;
        display: flex;
        justify-content: center;
    }
	.modal-headline{
	font-size: 3rem
}
}
@media only screen and (min-width: 576px){
	.modal{
		--bs-modal-width: 664px;
	}
}

@media only screen and (max-width:1199px){
	.modal-text-content{
		margin: 24% 0% 24% 0%;
	}
	
}

@media only screen and (max-width:1024px){
	.modal-text-content{
		font-size: 1.3rem;
	}
		.modal-headline{
	font-size: 2.5rem
	}
	.blinking {
	  font-size: 2.5rem;
	}
}

@media only screen and (max-width:991px){
	.modal-text-content{
		margin: 24% 0% 26% 0%;
	}
		.modal-headline{
	font-size: 2.5rem
	}
	.blinking {
	  font-size: 2.5rem;
	}
}

/* Tablets devices (tablets, 768px and down) */
@media only screen and (max-width:769px) {

    .section-1 {
        content: url(https://ik.imagekit.io/akjv7d95x/bg.png?updatedAt=1749911637513);
        height: 149vh;
        width: 100%;
        position: relative;
    }

    .logo {
        content: url(logo.png);
        width: 100%;
        position: absolute;
        z-index: 1;
    }

    .header {
        content: url(https://ik.imagekit.io/akjv7d95x/banner-en.png?updatedAt=1749911637492);
        width: 100%;
        position: absolute;
    }

    .btn-1 {
        position: absolute;
        width: 87%;
        margin-top: 115vw;
        z-index: 1;
        cursor: pointer;
        content: url(https://ik.imagekit.io/akjv7d95x/cta1.png?updatedAt=1749911637412);
    }

    .wheel-bg {
        content: url(https://ik.imagekit.io/akjv7d95x/bg-wheel.png?updatedAt=1749911637510);
        position: absolute;
        width: 91%;
        margin-top: 154vw;
    }

    .coin-l {
        content: url(https://ik.imagekit.io/akjv7d95x/coin1.png?updatedAt=1749911637406);
        position: absolute;
        width: 18%;
        margin-top: 180vw;
        left: 0vw;
    }

    .coin-r {
        content: url(https://ik.imagekit.io/akjv7d95x/coin2.png?updatedAt=1749911637369);
        position: absolute;
        width: 18%;
        margin-top: 180vw;
        right: 0vw;
    }

    .jackpot {
        content: url(https://ik.imagekit.io/akjv7d95x/jackpot.png?updatedAt=1749911637448);
        position: absolute;
        width: 67%;
        margin-top: 137vw;
    }

    .jackpot_amnt {
        position: absolute;
        color: #f6da1c;
        font-weight: bold;
        font-size: 6.5vw;
        margin-top: 150vw;
    }

    .wheel-border {
        content: url(https://ik.imagekit.io/akjv7d95x/wheel-border.png?updatedAt=1749911932521);
        position: absolute;
        width: 100%;
        margin-top: 156vw;
        z-index: 1;
    }


    .bg-wheel {
        content: url(https://ik.imagekit.io/akjv7d95x/bg-wheel.png?updatedAt=1749911637510);
        width: 35vw;
        position: absolute;
        margin-top: 4%;
    }

    .d-wheel {
        content: url(https://ik.imagekit.io/akjv7d95x/wheel.png?updatedAt=1749911641752);
        width: 75%;
        position: absolute;
        margin-top: 177.7%;
        z-index: 2;
    }


    .spin {
        content: url(https://ik.imagekit.io/akjv7d95x/spin.png?updatedAt=1749911640649);
        position: absolute;
        width: 14%;
        margin-top: 206vw;
        cursor: pointer;
        z-index: 3;
    }


    .d-stand {
        content: url(https://ik.imagekit.io/akjv7d95x/stand.png?updatedAt=1749911640668);
        position: absolute;
        width: 56vw;
        height: 24vw;
        margin-top: 245.6vw;
    }

    .btn2 {
        content: url(https://ik.imagekit.io/akjv7d95x/spin_btn.png?updatedAt=1749911640728);
        position: absolute;
        width: 85%;
        margin-top: 262vw;
		z-index: 3;
    }

    .timer {
        position: absolute;
        text-align: center;
        color: white;
        font-weight: bold;
        font-size: 3vw;
        margin-top: 289vw;
    }

    .payment {
        content: url(https://ik.imagekit.io/akjv7d95x/games.png?updatedAt=1749912113627);
        position: absolute;
        width: 100%;
        margin-top: 297vw;
        margin-bottom: 10vw;
    }

    .modal-bg-1 {
        background-image: url(https://ik.imagekit.io/akjv7d95x/modal_btn_bg.png?updatedAt=1749911637513);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }

    .d-modal_btn1 {
        margin: 38% 0% 5% 0%;
        width: 40%;
        cursor: pointer;
    }

    .d-modal_btn2 {
        margin-top: -39vw;
        width: 50vw;
        cursor: pointer;
        position: relative;
        z-index: 1;
    }

    .modal-bg-2 {
        background-image: url(https://ik.imagekit.io/akjv7d95x/winner.png?updatedAt=1749911641810);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }

    .modal-text-content {
        margin: 18vw 0 19vw 0;
        color: white;
        text-transform: uppercase;
        font-size: 3vw;
    }

    .modal-footer {
        border: none;
        display: flex;
        justify-content: center;
    }

      #carousel-records {
        width: 100vw;
    }

    .carousel-container {
        margin-top: 310vw;
        position: absolute;
    }

    .carousel-container img {
        width: 80vw;
    }
		.modal-headline{
	font-size: 2.5rem
	}
	.blinking {
	  font-size: 2.5rem;
	}
}

@media only screen and (max-width:425px){
	.modal-text-content{
		margin: 20% 0% 20% 0%;
	}
	.modal-headline{
	font-size: 1.4rem
}
.blinking {
  font-size: 1.2rem;
}

}

@media only screen and (max-width:320px){
	.modal-text-content{
		margin: 25% 0% 15% 0%;
	}
}

.blinking {
  animation: color-change 1s infinite;
}

@keyframes color-change {
  0% { color: #fff; }
  50% { color: #ffe500; }
  100% { color: #fff; }
}

h1.modal-text-content{
	text-shadow: 4px 4px 20px #111;
}