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

   .hero {
       background: url('../img/banner-img.webp') center/cover no-repeat;
       padding: 10px 15px;
       position: relative;
       height: 100vh;
       position: relative;
   }



   .bonus-box img {
       width: 60px;
       margin-bottom: 10px;
   }

   .bonus-box h4 {
       font-weight: bold;
   }

   .btn-bonus {
       background: #e63946;
       border: none;
       padding: 12px 30px;
       font-size: 18px;
       border-radius: 8px;
   }

   .provider-logos img,
   .payment-logos img {
       max-height: 40px;
       margin: 10px;
       filter: brightness(0) invert(1);
   }

   .footer {
       font-size: 12px;
       color: #ccc;
   }

   .ejWheel {
       margin-top: 5rem;
       --width: 100%;
       left: 50%;
       position: absolute;
       text-align: center;
       top: 40%;
       transform: translate(-50%, -50%);
       width: 400px;
   }

   @media (min-width: 48rem) {
       .ejWheel {
           transform: scale(1.6) translate(-50%, -50%);
           transform-origin: 0 0
       }
   }

   @media (min-width: 62rem) {
       .ejWheel {
           transform: scale(1.8) translate(-50%, -50%);
           transform-origin: 0 50%
       }
   }

   @media (min-width: 75rem) {
       .ejWheel {
           margin-top: 10rem;
           transform: scale(1.8) translate(-50%, -50%)
       }
   }

   .ejWheel__inner {
       align-items: center;
       display: flex;
       height: var(--height);
       justify-content: center;
       margin-inline: auto;
       position: relative;
       width: var(--width);
       z-index: 5
   }

   @media (orientation: landscape) {
       .ejWheel__inner {
           margin-top: 10rem
       }
   }

   @media (min-width: 24.375rem) and (max-width:47.9375rem) and (min-height:50rem) {
       .ejWheel__inner {
           margin-top: -1.875rem
       }
   }

   @media (min-width: 48rem) {
       .ejWheel__inner {
           margin-top: 1.875rem
       }
   }

   @media (min-width: 62rem) {
       .ejWheel__inner {
           /* margin-top: 26.25rem; */
       }
   }

   .ejWheel__inner>img {
       position: absolute;


   }

   img.estop.ejWheel__pointer.setShakeY {
       animation-name: box-jump;
       animation-duration: 2s;
       animation-timing-function:
           ease-in-out;
       animation-fill-mode: forwards;
       animation-iteration-count: infinite;
   }

   .ejWheel__content {
       width: 31.25rem
   }

   .ejWheel__middle {
       background: #d3d3d3 .35438rem .43619rem/82.907% 82.907% no-repeat;
       border-radius: 50%;
       box-shadow: -1.94px -1.94px .30313rem #ffebbe, 1.94px 1.94px .30313rem #fffaef;
       width: 4.625rem;
       z-index: 12
   }

   .ejWheel__middle>span {
       color: #fff;
       font-size: 10px;
       font-weight: 900;
       left: 50%;
       line-height: 1;
       position: absolute;
       text-shadow: 0 0 .25rem #ff0004, 0 0 .75rem #ff6f5c;
       text-transform: uppercase;
       top: 50%;
       cursor: pointer;
       transform: translate(-50%, -50%)
   }

   .ejWheel__pointer {
       top: -9rem;
       width: 5.875rem;
       z-index: 3
   }

   .ejWheel__win {
       left: 15.5rem;
       opacity: 0;
       position: absolute;
       top: 9.9375rem;
       width: 6.3125rem
   }

   .ejWheel__btn {
       margin-top: 3.125rem;
       position: relative;
       text-align: center;
       z-index: 15
   }

   @media (min-width: 48rem) {
       .ejWheel__btn {
           margin-top: 9.375rem;
           transform: scale(1.1);
           transform-origin: 50% 0
       }
   }

   @media (min-width: 75rem) {
       .ejWheel__btn {
           margin-top: 13.75rem
       }
   }

   .ejWheel__btn .button {
       animation: pulseAnimation 2s ease-in-out infinite, gradientAnimation 8s linear infinite;
       background-color: transparent;
       background-position: 50%;
       background-repeat: no-repeat;
       background-size: cover;
       background: linear-gradient(-45deg, #fc7903, #5eff3d, #fba901, #85e72c);
       background-size: 400%;
       border: .127rem solid #d0ffc5;
       border-radius: 2.54031rem;
       box-shadow: 0 .16938rem 1.4395rem #5eff3d;
       color: #3c8300;
       font-family: Unbounded;
       font-size: clamp(.875rem, 12vw, 2.9rem);
       font-weight: 700;
       letter-spacing: .44px;
       min-height: 4.8125rem;
       min-width: 19.25rem;
       padding: .5rem 2.1875rem
   }

   .estop.ejWheel__middle.setPulseBtn img {
       width: 100%;
   }

   .ejWheel__btn .button.lang-az,
   .ejWheel__btn .button.lang-tr,
   .ejWheel__btn .button.lang-uz {
       font-size: clamp(.875rem, 10vw, 2.9rem)
   }

   .hue-image {
       width: 100%;
       display: block;

       /* Initial filter */
       -webkit-filter: hue-rotate(0deg);
       filter: hue-rotate(0deg);

       /* Animation */
       -webkit-animation: hueCycle 3s linear infinite;
       animation: hueCycle 3s linear infinite;
   }

 

   @keyframes box-jump {
       0% {
           transform: translateY(0px);
       }

       30% {
           transform: translateY(16px);
       }

       33% {
           transform: translateY(15px);
       }

       50% {
           transform: translateY(0px);
       }

       50% {
           transform: translateY(16px);
       }

       75% {
           transform: translateY(15px);
       }

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

   section.hero.text-center:after {
       background: #00000061;
       position: absolute;
       content: '';
       width: 100%;
       height: 100%;
       left: 0;
       top: 0;
       z-index: 0;
   }

   nav.navbar.navbar-dark {
       position: absolute;
       z-index: 9999;
       width: 100%;
   }

   section.hero.text-center {
       padding-top: 71px;
       overflow: hidden;
   }

   .container.hero-overlay {
       position: relative;
       z-index: 1;
       height: 100%;
   }

   .gold-particles {
       position: absolute;
       inset: 0;
       pointer-events: none;
   }

   /* Individual particles */
   .gold-particles span {
       position: absolute;
       top: -20px;
       width: 16px;
       height: 16px;
       background: radial-gradient(circle, #ffd700, #ffb700);
       border-radius: 50%;
       opacity: 0.8;
       animation: floatGold 8s linear infinite;
       filter: blur(0.5px);
   }

   /* Random positions & delays */
   .gold-particles span:nth-child(1) {
       left: 10%;
       animation-delay: 0s;
   }

   .gold-particles span:nth-child(2) {
       left: 20%;
       animation-delay: 2s;
   }

   .gold-particles span:nth-child(3) {
       left: 30%;
       animation-delay: 4s;
   }

   .gold-particles span:nth-child(4) {
       left: 40%;
       animation-delay: 1s;
   }

   .gold-particles span:nth-child(5) {
       left: 50%;
       animation-delay: 3s;
   }

   .gold-particles span:nth-child(6) {
       left: 60%;
       animation-delay: 5s;
   }

   .gold-particles span:nth-child(7) {
       left: 70%;
       animation-delay: 2s;
   }

   .gold-particles span:nth-child(8) {
       left: 80%;
       animation-delay: 4s;
   }

   .gold-particles span:nth-child(9) {
       left: 90%;
       animation-delay: 1s;
   }

   .gold-particles span:nth-child(10) {
       left: 95%;
       animation-delay: 6s;
   }

   /* Floating animation */
   @keyframes floatGold {
       0% {
           transform: translateY(0) scale(1);
           opacity: 0;
       }

       10% {
           opacity: 1;
       }

       100% {
           transform: translateY(700px) scale(1.4);
           opacity: 0;
       }
   }
nav.navbar.navbar-dark img {
    width: 170px;
    object-fit: contain;
    position: relative;
    top: -11px;
}

h1.fw-bold {
    text-shadow: 2px 2px #231919ab;
    font-family: revert-layer;
    text-transform: inherit;
    font-weight: 600;
}

/* ===============================
   WHEEL ROTATION
================================ */
.ejWheel__content {
    transition: transform 10s cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: transform;
}

.ejWheel.spinning .ejWheel__content {
    pointer-events: none;
}

/* ===============================
   RESULT MODAL
================================ */
.result-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.result-modal.active {
    display: flex;
}

.result-box {
    background: #1f262b;
    border-radius: 18px;
    padding: 30px;
    max-width: 420px;
    width: 90%;
    text-align: center;
    border: 2px solid #f2c94c;
    animation: popIn 0.5s ease;
}

.result-box h2 {
    color: #27ae60;
    font-weight: 800;
}

.result-box p {
    color: #f3c94d;
    margin: 15px 0;
    font-size: 36px;
    font-weight: 700;
}

.result-box .btn-claim {
    background: linear-gradient(90deg,#00ff88,#00cc66);
    border: none;
    color: #050303;
    font-weight: 700;
    padding: 14px 30px;
    border-radius: 10px;
    text-decoration: none;
    display: inline-block;
}

@keyframes popIn {
    from {
        transform: scale(0.7);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}


.ejWheel__middle.disabled {
    pointer-events: none;
    transform: scale(0.95);
}


.dataList {
    position: absolute;
    list-style: none;
}
.dataList li:nth-child(1) {font-size: 15px;transform: rotate(87deg);font-weight: 900;top: -25px;position: relative;}

.dataList li:nth-child(2) {font-size: 15px;transform: rotate(
144deg);font-weight: 900;top: -26px;position: relative;left: 52px;}

.dataList li:nth-child(3) {font-size: 15px;transform: rotate(
218deg);font-weight: 900;top: 47px;position: relative;left: 52px;}

.dataList li:nth-child(4) {font-size: 15px;transform: rotate(
46deg);font-weight: 900;top: -74px;position: relative;left: -55px;}

.dataList li:nth-child(5) {font-size: 15px;transform: rotate(
322deg);font-weight: 900;top: 6px;position: relative;left: -53px;}


@media(max-width:767px){
    section.hero.text-center {
    overflow: hidden;
    background-position: -1099px 0px;
}
}

@-webkit-keyframes hueCycle {
    0% {
        -webkit-filter: hue-rotate(0deg);
    }
    100% {
        -webkit-filter: hue-rotate(-60deg);
    }
}

/* Standard Keyframes */
@keyframes hueCycle {
    0% {
        filter: hue-rotate(0deg);
    }
     50% {
        filter: hue-rotate(-160deg);
    }

    
    100% {
        filter: hue-rotate(0deg);
    }
}
p.lead {
    display: none;
}