html,body{
    height: 100%;
    position: relative;
   }
   body
   {
    background-image: url(../media/bg.jpeg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
/*        position: fixed !important;*/
   }
    .live-number {
/*        background: black;*/
        text-align: center;
        padding: 20px;
        margin: 5px 0;
        height: 170px;
        border-radius: 16px;
    }
    .live-number h2 {
            color: blue;
    padding-top: 9px;
    font-weight: 700;
    font-size: 33px;
    }
    .live-number p {
        color: white;
    }
    .live-number h1 {
        color: red;
    }
    .number {
    display: contents;
    align-items: center;
    justify-content: center;
    background: #bc1e2d;
    height: 75px;
    width: 75px;
    border-radius: 50%;
}


.number {
    position: relative;
}
img.logo-img {
    height: 75px;
/*    margin-bottom: 14px;*/
}
.time-date {
    background-image: linear-gradient(to bottom,#ab0405 0,#e73b3b 100%);
    padding: 27px 0;
}
.fire {
    color: #f00;
    text-shadow: 0px -2px 4px #fff, 0px -2px 10px #FF3, 0px -10px 20px #F90, 0px -20px 40px #C33;
    font-size: 40px;
    font-weight: bold;
}
.result h2{
    text-align: center;
    padding: 12px 0;
        margin-bottom: 2px;
}
.blink {
/*          animation: blinker 1.5s linear infinite;*/
          color: white;
          font-family: sans-serif;
          background: black;
      }
      @keyframes blinker {
          50% {
              opacity: 0;
          }
      }

.name-acc{
      font-size: 17px;
    font-weight: 900;
}

span.click-btn{
  background: whitesmoke;
    color: black;
    padding: 6px 11px;
    border-radius: 20px;
    position: relative;
    width: 107px;
    left: 47%;
    bottom: 48px;
}




#neonShadow{
  height:50px;
  width:100px;
  border:none;
  border-radius:50px;
  transition:0.3s;
  background-color:red;
  animation: glow 1s infinite ;
  transition:0.5s;
}
span{
    display: block;
    width: 100%;
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
/*    padding-top: 15%;*/
    padding-right: 2.5%;
    margin-right: 0px;
    font-size: 1.2rem;
    transition: 0.3s;
/*    opacity: 0;*/
    }
span:hover{
    transition: 0.3s;
    opacity: 1;
    font-weight: 700;
    }

#neonShadow:hover{
  transform:translateX(-20px)rotate(30deg);
  border-radius:5px;
  background-color:#c3bacc;
  transition:0.5s;
}


.col-lg-6.bannerimage>img{
    height: 480px;
}

.bannerimage{
    text-align: center;
}
  .ad-banner {
    background: black;
    padding: 19px 5px;
}
.ad-banner>p {
    color: white;
    font-size: 18px;
    font-weight: 600;
} 

@keyframes glow{
  0%{
  box-shadow: 5px 5px 20px rgb(93, 52, 168),-5px -5px 20px rgb(93, 52, 168);}
  
  50%{
  box-shadow: 5px 5px 20px rgb(81, 224, 210),-5px -5px 20px rgb(81, 224, 210)
  }
  100%{
  box-shadow: 5px 5px 20px rgb(93, 52, 168),-5px -5px 20px rgb(93, 52, 168)
  }
}





@media (max-width: 575.98px)
         {
            span.click-btn
               {
                  left: 35%;
               }
         }



.machine_div img {
    width: 100%;
}
.machine_div {
    padding: 0 10% 0 15%;
    margin: 15px 0 10px 0;
}
.logo img {
    width: 100%;
}
.top-bar {
    background: gray;
    padding: 5px 5px !important;
    text-align: center;
    color: white;
    align-items: center;
}

.date-time-bar p {
    display: block;
    width: 100%;
    margin: 0;
    color: white;
    margin-left: 10px;
}
.date-time-bar {
    margin-top: 7px !important;
}
.footer-item {
    background: #196f3e;
    border: 2px solid white;
    border-radius: 5px;
    color: white;
    font-weight: 700;
    text-align: center;
    padding: 5px 0;
}
.footer-item p {
    margin: 0;
}

.result-number, .result-name {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 22px;
    color: white;
    font-weight: 800;
}

.result-number {
    top: 395px;
/*    top: 200px;*/
}
.result-name
{
    top: 294px;
/*    top: 320px;*/
}
.splash {
    position: fixed;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 99999;
    display: grid;
    align-items: center;
    text-align: center;
}
.splash img {
    margin: 0 auto;
    transform: scale(0);
    transition: all 2.5s;
}
.splash img.show {
    transform: scale(1);
}
.footer {
    position: fixed;
    width: 100%;
    bottom: 31px;
/*    bottom: -10px;*/
/*    bottom: -40px;*/
}



a.see-result {
    color: white;
    position: relative;
    bottom: -69px;
/*    bottom: -22px;*/
    padding: 6px;
    background: #196f3e;
    border: 1px solid white;
}


.random-number {
    position: relative;
}

a.random1{
    position: relative;
    top: 124px;
    left: 83px;
    color: white;
    font-weight: 800;
}
a.random2{
    position: relative;
    top: 124px;
    left: 132px;
    font-weight: 800;
    color: white;
}
a.random3{
    position: relative;
    top: 124px;
    left: 180px;
    color: white;
    font-weight: 800;
}


@media(min-width:767px)
{
    .logo img {
        width: 25%;
    }
    .machine_div {
        padding: 0 39.5% 0 40.5%;
        margin: 15px 0 10px 0;
    }
    .reload {
        text-align: right;
    }
    .result-number {
        top: 408px;
/*        top: 190px;*/
        font-size: 35px;
    }
    .result-name {
        font-size: 26px;
        top: 313px;
    }

     .result-name {
            top: 313px;
/*            top: 295px;*/
/*            top: 248px;*/
            /* top: 320px; */
        }
        .result-number {
            top: 410px;
/*            top: 328px;*/
            /* top: 200px; */
        }
        a.random1 {
    position: relative;
    top: 119px;
    left: 86px;
   /* top: 96px;
    left: 66px;*/
    color: white;
    font-weight: 800;
}
a.random2 {
    position: relative;
    top: 118px;
    left: 133px;
    /*top: 96px;
    left: 97px;*/
    font-weight: 800;
    color: white;
}
a.random3 {
    position: relative;
    top: 118px;
    left: 180px;
    /*top: 96px;
    left: 131px;*/
    color: white;
    font-weight: 800;
}
    

}


/* On screens that are 992px wide or less, the background color is blue */
@media screen and (max-width: 320px) {
  a.random1 {
    position: relative;
    top: 93px!important;
    left: 62px!important;}
    a.random2 {
    position: relative;
    top: 94px!important;
    left: 94px!important;}
    a.random3 {
    position: relative;
    top: 94px!important;
    left: 128px!important;}
    .result-name {
    top: 247px;
        }
        .result-number {
    top: 324px!important;}
    a.see-result {
    color: white;
    position: relative;
    bottom: -107px!important;}
}

@media screen and (max-width: 360px) {
  a.random1 {
    position: relative;
    top: 93px;
    left: 62px;}
    a.random2 {
    position: relative;
    top: 94px;
    left: 94px;}
    a.random3 {
    position: relative;
    top: 94px;
    left: 128px;}
    .result-name {
    top: 247px;
        }
        .result-number {
    top: 324px;}
    a.see-result {
    color: white;
    position: relative;
    bottom: -107px;}
}


/* On screens that are 600px wide or less, the background color is olive */
@media screen and (max-width: 600px) {
    a.see-result {
    color: white;
    position: relative;
    bottom: 27px;}
    .result-number {
    top: 353px;
    /* top: 200px; */
}
.result-name {
    top: 266px;
}
a.random1 {
    position: relative;
    top: 104px;
    left: 72px;}
    a.random2 {
    position: relative;
    top: 104px;
    left: 108px;}
    a.random3 {
    position: relative;
    top: 104px;
    left: 147px;}
  
}


@media screen and (max-width: 412px) {
    
  a.random3 {
    position: relative;
    top: 117px;
    left: 174px;
}
a.random2 {
    position: relative;
    top: 117px;
    left: 124px;
}
a.random1 {
    position: relative;
    top: 117px;
    left: 79px;
}
.result-number {
    top: 395px;
}
.result-name {
    top: 293px;
}

a.see-result {
    color: white;
    position: relative;
    bottom: 8px;
}

}

@media screen and (max-width: 414px) {
    a.see-result {
    color: white;
    position: relative;
    bottom: -225px;
}
.result-number {
    top: 395px;
    /* top: 200px; */
}
.result-name {
    top: 295px;
}
a.random1 {
    position: relative;
    top: 117px;
    left: 81px;
}
a.random2 {
    position: relative;
    top: 117px;
    left: 127px;
}
a.random3 {
    position: relative;
    top: 117px;
    left: 177px;
}
  

}

@media screen and (max-width: 390px) {
    a.see-result {
    color: white;
    position: relative;
    bottom: -208px;
}
.result-number {
    top: 378px;
    /* top: 200px; */
}
.result-name {
    top: 283px;
}
a.random1 {
    position: relative;
    top: 114px;
    left: 77px;
}
a.random2 {
    position: relative;
    top: 114px;
    left: 121px;
}
a.random3 {
    position: relative;
    top: 114px;
    left: 165px;
}
  

}


@media screen and (max-width: 360px) {
    .result-number {
    top: 354px;
    /* top: 200px; */
}
.result-name {
    top: 267px;
}
a.random1 {
    position: relative;
    top: 105px;
    left: 70px;
}
a.random2 {
    position: relative;
    top: 105px;
    left: 108px;
}
a.random3 {
    position: relative;
    top: 105px;
    left: 145px;
}
a.see-result {
    color: white;
    position: relative;
    bottom: -141px;
}
  

}


@media screen and (max-width: 414px) {
a.see-result {
    color: white;
    position: relative;
    bottom: -247px;
}
  

}


@media screen and (max-width: 820px) {
.result-number {
    top: 262px;
    font-size: 21px;
}
.result-name {
    top: 212px;
    font-size: 15px;}
    a.random1 {
    position: relative;
    top: 68px;
    left: 42px;}
    a.random2 {
    position: relative;
    top: 68px;
    left: 59px;}
    a.random3 {
    position: relative;
    top: 68px;
    left: 77px;}
    a.see-result {
    color: white;
    position: relative;
    bottom: -751px;} 

}


@media screen and (max-width: 768px) {
a.see-result {
    color: white;
    position: relative;
    bottom: -609px;
}
.result-name {
    top: 209px;
    font-size: 13px;
}
.result-number {
    top: 251px;
    font-size: 21px;
}
a.random1 {
    position: relative;
    top: 65px;
    left: 37px;
}
a.random2 {
    position: relative;
    top: 65px;
    left: 53px;
}
a.random3 {
    position: relative;
    top: 65px;
    left: 72px;
}
  

}



@media screen and (max-width: 912px) {
    a.random3 {
    position: relative;
    top: 72px;
    left: 92px;}    
    a.random2 {
    position: relative;
    top: 72px;
    left: 69px;}
    a.random1 {
    position: relative;
    top: 72px;
    left: 46px;}
    .result-number {
    top: 272px;}
    .result-name {
    top: 225px;
    font-size: 16px;
}
a.see-result {
    color: white;
    position: relative;
    bottom: -906px;}

}

@media screen and (max-width: 540px) {
   .result-name {
    top: 368px;
    font-size: 19px;
}
.result-number {
    top: 501px;
}
a.random1 {
    position: relative;
    top: 150px;
    left: 109px;
}
a.random2 {
    position: relative;
    top: 150px;
    left: 172px;
}
a.random3 {
    position: relative;
    top: 150px;
    left: 240px;
}
a.see-result {
    color: white;
    position: relative;
    bottom: 117px;
}

}



@media screen and (max-width: 280px) {
    .footer {
    position: fixed;
    width: 100%;
    bottom: 34px;}
    a.see-result {
    color: white;
    position: relative;
    bottom: -153px;
}.result-name {
    top: 232px;
    font-size: 19px;
}
.result-number {
    top: 297px;
}
a.random1 {
    position: relative;
    top: 85px;
    left: 54px;
}
a.random2 {
    position: relative;
    top: 85px;
    left: 79px;
}
a.random3 {
    position: relative;
    top: 85px;
    left: 111px;
}  

}



@media screen and (max-width: 412px) {
    .result-name {
    top: 296px;
    font-size: 19px;
}
.result-number {
    top: 393px;
}
a.random1 {
    position: relative;
    top: 118px;
    left: 83px;
}
a.random2 {
    position: relative;
    top: 118px;
    left: 126px;
}
a.random3 {
    position: relative;
    top: 118px;
    left: 177px;
}
a.see-result {
    color: white;
    position: relative;
    bottom: -246px;
}

}


@media screen and (max-width: 1024px) {
 
a.see-result {
    color: white;
    position: relative;
    bottom: -97px;
}
a.random1 {
    position: relative;
    top: 82px;
    left: 50px;}
    a.random2 {
    position: relative;
    top: 82px;
    left: 81px;}
    a.random3 {
    position: relative;
    top: 82px;
    left: 106px;}
    .result-name {
    top: 240px;
    font-size: 17px;
}
.result-number {
    top: 294px;}

}


@media screen and (max-width: 1280px) {
 
a.see-result {
    color: white;
    position: relative;
    bottom: -206px;}
    .result-name {
    top: 280px;
    font-size: 17px;}
    a.random1 {
    position: relative;
    top: 100px;
    left: 66px;}
    a.random2 {
    position: relative;
    top: 100px;
    left: 100px;}
    a.random3 {
    position: relative;
    top: 100px;
    left: 139px;}
    .result-number {
    top: 347px;}

}


@media screen and (max-width: 360px) {
 
.result-name {
    top: 271px;
    font-size: 17px;
}
.result-number {
    top: 353px;
}
a.random2 {
    position: relative;
    top: 104px;
    left: 109px;
}
a.random3 {
    position: relative;
    top: 104px;
    left: 149px;
}
a.see-result {
    color: white;
    position: relative;
    bottom: -42px;
}

}


@media screen and (max-width: 411px) {
 
.result-name {
    top: 299px!important;
    font-size: 17px!important;
}

.result-number {
    top: 394px!important;
}
a.random1 {
    position: relative;
    top: 115px!important;
    left: 80px!important;
}
a.random2 {
    position: relative;
    top: 115px!important;
    left: 126px!important;
}
a.random3 {
    position: relative;
    top: 115px!important;
    left: 174px!important;
}
a.see-result {
    color: white;
    position: relative;
    bottom: -65px!important;
}

}



@media screen and (max-width: 320px) {
 a.see-result {
    color: white;
    position: relative;
    bottom: -19px!important;
}
.result-number {
    top: 322px!important;
}
.result-name {
    top: 251px!important;
    font-size: 17px!important;
}
a.random1 {
    position: relative;
    top: 94px!important;
    left: 63px!important;
}
a.random2 {
    position: relative;
    top: 94px!important;
    left: 95px!important;
}
a.random3 {
    position: relative;
    top: 94px!important;
    left: 127px!important;
}


}


@media screen and (max-width: 375px) {
.result-name {
    top: 279px!important;
    font-size: 17px!important;
}
.result-number {
    top: 364px!important;
}
a.random1 {
    position: relative;
    top: 107px;!important
    left: 73px!important;
}
a.random2 {
    position: relative;
    top: 107px!important;
    left: 115px!important;
}
a.random3 {
    position: relative;
    top: 107px!important;
    left: 156px!important;
}
a.see-result {
    color: white;
    position: relative;
    bottom: -52px!important;
}


}



@media screen and (max-width: 414px) {
a.see-result {
    color: white;
    position: relative;
    bottom: 5px!important;
/*    bottom: -64px!important;*/
}
.result-number {
    top: 398px!important;
}
.result-name {
    top: 299px!important;
    font-size: 17px!important;
}
a.random1 {
    position: relative;
    top: 117px!important;
    left: 81px;!important
}
a.random2 {
    position: relative;
    top: 117px!important;
    left: 128px!important;
}
a.random3 {
    position: relative;
    top: 117px!important;
    left: 175px!important;
}

}

@media screen and (max-width: 375px) {
.result-name {
    top: 278px!important;
    font-size: 17px!important;
}
.result-number {
    top: 363px!important;
}
a.random1 {
    position: relative;
    top: 107px!important;
    left: 73px!important;
}
a.random2 {
    position: relative;
    top: 107px!important;
    left: 114px!important;
}
a.random3 {
    position: relative;
    top: 107px!important;
    left: 156px!important;
}
a.see-result {
    color: white;
    position: relative;
    bottom: -194px!important;
}

}


/*@media screen and (max-width: 768px) {
    .result-number {
    top: 252px;
}
a.random1 {
    position: relative;
    top: 63px;
    left: 38px;
}
a.random2 {
    position: relative;
    top: 63px;
    left: 54px;
}
a.random3 {
    position: relative;
    top: 63px;
    left: 70px;
}
.result-name {
    top: 207px;
    font-size: 13px;
}
a.see-result {
    color: white;
    position: relative;
    bottom: -608px;
}

}*/
/* =====================================================
   HOMEPAGE UI ENHANCEMENT
   ===================================================== */

body{
    margin:0;
    overflow-x:hidden;
}

/* HEADER */
.top-bar{
    background:linear-gradient(135deg,#202020,#424242) !important;
    min-height:72px;
    padding:8px 12px !important;
    box-shadow:0 5px 18px rgba(0,0,0,.25);
    animation:headerDrop .6s ease both;
}

.satta-title{
    font-size:clamp(20px,4vw,32px);
    font-weight:800;
    letter-spacing:.5px;
    text-shadow:0 2px 5px rgba(0,0,0,.3);
}

.logo img{
    max-height:58px;
    width:auto !important;
    max-width:100%;
    transition:transform .35s ease;
}

.logo img:hover{
    transform:scale(1.08);
}

.reload{
    font-size:24px;
}

.reload i{
    cursor:pointer;
    width:42px;
    height:42px;
    line-height:42px;
    text-align:center;
    border-radius:50%;
    background:rgba(255,255,255,.12);
    transition:.35s ease;
}

.reload i:hover{
    transform:rotate(180deg);
    background:rgba(255,255,255,.25);
}

/* DATE TIME */
.date-time-bar{
    width:calc(100% - 24px);
    max-width:620px;
    margin:12px auto 0 !important;
    padding:8px 12px !important;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-radius:12px;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    box-shadow:0 5px 15px rgba(0,0,0,.15);
    animation:fadeUp .7s ease both;
}

.date-time-bar p{
    width:auto !important;
    margin:0 !important;
    font-size:14px;
}

/* MACHINE AREA */
.machine_div{
    position:relative;
    animation:machineEntry .8s cubic-bezier(.2,.8,.2,1) both;
}

.machine_div img{
    filter:drop-shadow(0 12px 15px rgba(0,0,0,.32));
    transition:transform .35s ease,filter .35s ease;
}

.machine_div:hover img{
    transform:translateY(-3px);
    filter:drop-shadow(0 16px 20px rgba(0,0,0,.38));
}

/* RESULT TEXT */
.result-number{
    text-shadow:
        0 2px 4px rgba(0,0,0,.8),
        0 0 10px rgba(255,255,255,.35);
    animation:resultPulse 2.4s ease-in-out infinite;
}

.result-name{
    text-shadow:0 2px 5px rgba(0,0,0,.75);
}

/* RANDOM DIGITS */
.random1,
.random2,
.random3{
    text-decoration:none !important;
    text-shadow:0 2px 6px rgba(0,0,0,.8);
}

/* BOTTOM RESULTS */
.footer-item{
    background:linear-gradient(135deg,#116b3b,#23975b) !important;
    border:1px solid rgba(255,255,255,.75) !important;
    border-radius:10px !important;
    padding:8px 5px !important;
    box-shadow:0 5px 12px rgba(0,0,0,.2);
    transition:transform .25s ease,box-shadow .25s ease;
}

.footer-item:hover{
    transform:translateY(-4px);
    box-shadow:0 9px 18px rgba(0,0,0,.28);
}

.footer-number{
    font-size:18px;
    font-weight:800;
}

.footer-time{
    font-size:12px;
    opacity:.95;
}

/* SEE RESULT BUTTON */
a.see-result{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:125px;
    min-height:40px;
    padding:8px 20px !important;
    border-radius:24px;
    background:linear-gradient(135deg,#137342,#23975b) !important;
    border:1px solid rgba(255,255,255,.8) !important;
    box-shadow:0 5px 15px rgba(0,0,0,.25);
    font-weight:700;
    text-decoration:none !important;
    transition:transform .25s ease,box-shadow .25s ease;
}

a.see-result:hover{
    color:#fff;
    transform:translateY(-2px) scale(1.03);
    box-shadow:0 8px 20px rgba(0,0,0,.32);
}

/* ANIMATIONS */
@keyframes headerDrop{
    from{
        opacity:0;
        transform:translateY(-18px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(15px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes machineEntry{
    from{
        opacity:0;
        transform:translateY(25px) scale(.96);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

@keyframes resultPulse{
    0%,100%{
        transform:scale(1);
    }
    50%{
        transform:scale(1.06);
    }
}

/* MOBILE POLISH */
@media(max-width:600px){

    .top-bar{
        min-height:62px;
        padding:6px 8px !important;
    }

    .satta-title{
        font-size:20px;
        line-height:1.15;
    }

    .logo img{
        max-height:45px;
    }

    .reload{
        font-size:18px;
    }

    .reload i{
        width:34px;
        height:34px;
        line-height:34px;
    }

    .date-time-bar{
        width:calc(100% - 20px);
        padding:7px 10px !important;
    }

    .date-time-bar p{
        font-size:12px;
    }

    .footer-item{
        border-radius:8px !important;
    }

    .footer-number{
        font-size:16px;
    }

}

/* Accessibility */
@media(prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
}

/* =====================================================
   END HOMEPAGE UI ENHANCEMENT
   ===================================================== */

/* ===== MACHINE DISPLAY EMERGENCY FIX ===== */

.machine_div{
    position:relative !important;
    z-index:2 !important;
}

/* RANDOM 3 DIGITS */
.machine_div .random-number{
    display:block !important;
    position:absolute !important;
    z-index:50 !important;
    top:0 !important;
    left:0 !important;
    width:100% !important;
    height:100% !important;
    pointer-events:none;
}

.machine_div a.random1,
.machine_div a.random2,
.machine_div a.random3{
    display:block !important;
    position:absolute !important;
    z-index:60 !important;

    top:23.5% !important;

    width:18% !important;
    height:auto !important;

    margin:0 !important;
    padding:0 !important;

    color:#fff !important;
    opacity:1 !important;
    visibility:visible !important;

    font-size:clamp(18px,2vw,30px) !important;
    font-weight:900 !important;
    line-height:1 !important;
    text-align:center !important;

    text-shadow:
        0 2px 4px #000,
        0 0 6px rgba(255,255,255,.35) !important;

    transform:none !important;
}

.machine_div a.random1{
    left:21% !important;
}

.machine_div a.random2{
    left:41% !important;
}

.machine_div a.random3{
    left:61% !important;
}


/* GAME NAME */
.machine_div .result-name{
    display:flex !important;
    position:absolute !important;
    z-index:60 !important;

    left:15% !important;
    top:36% !important;

    width:70% !important;
    height:13% !important;

    align-items:center !important;
    justify-content:center !important;

    margin:0 !important;
    padding:0 5px !important;

    color:#fff !important;
    opacity:1 !important;
    visibility:visible !important;

    font-size:clamp(14px,1.6vw,25px) !important;
    font-weight:900 !important;
    line-height:1.1 !important;
    text-align:center !important;

    text-shadow:0 2px 5px #000 !important;

    transform:none !important;
}


/* MAIN RESULT */
.machine_div .result-number{
    display:flex !important;
    position:absolute !important;
    z-index:60 !important;

    left:18% !important;
    top:54% !important;

    width:64% !important;
    height:17% !important;

    align-items:center !important;
    justify-content:center !important;

    margin:0 !important;
    padding:0 !important;

    color:#fff !important;
    opacity:1 !important;
    visibility:visible !important;

    font-size:clamp(24px,3vw,42px) !important;
    font-weight:900 !important;
    line-height:1 !important;
    text-align:center !important;

    text-shadow:
        0 3px 5px #000,
        0 0 8px rgba(255,255,255,.25) !important;

    transform:none !important;
    animation:none !important;
}


/* PHONE */
@media(max-width:600px){

    .machine_div a.random1,
    .machine_div a.random2,
    .machine_div a.random3{
        top:23% !important;
        font-size:22px !important;
    }

    .machine_div .result-name{
        top:36% !important;
        font-size:18px !important;
    }

    .machine_div .result-number{
        top:54% !important;
        font-size:32px !important;
    }
}

/* ===== END MACHINE DISPLAY FIX ===== */


/* =====================================================
   MACHINE V2 - STABLE OVERLAY
   ===================================================== */

.machine-v2{
    position:relative !important;
    width:min(430px,92vw) !important;
    margin:18px auto 20px !important;
    padding:0 !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    z-index:10 !important;
}

.machine-v2 .machine-image{
    display:block !important;
    position:relative !important;
    width:100% !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    z-index:1 !important;
    filter:drop-shadow(0 14px 16px rgba(0,0,0,.35));
}

.machine-v2 .machine-overlay{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    z-index:20 !important;
    pointer-events:none !important;
}

/* TOP THREE DIGITS */

.machine-v2 .machine-digits{
    position:absolute !important;
    top:21.5% !important;
    left:20.5% !important;
    width:59% !important;

    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    column-gap:8% !important;

    color:white !important;
}

.machine-v2 .machine-digits span{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:100% !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;

    color:#fff !important;
    font-size:clamp(21px,6vw,34px) !important;
    line-height:1 !important;
    font-weight:900 !important;

    text-align:center !important;
    text-shadow:
        0 2px 4px rgba(0,0,0,.95),
        0 0 7px rgba(255,255,255,.35) !important;
}

/* GAME NAME */

.machine-v2 .machine-game{
    position:absolute !important;

    top:35.5% !important;
    left:17% !important;
    width:66% !important;
    height:12% !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    color:#fff !important;
    font-size:clamp(15px,4.5vw,25px) !important;
    line-height:1.05 !important;
    font-weight:900 !important;
    text-align:center !important;

    white-space:nowrap !important;
    overflow:hidden !important;

    text-shadow:
        0 2px 4px rgba(0,0,0,.9),
        0 0 6px rgba(255,255,255,.25) !important;
}

/* FINAL RESULT */

.machine-v2 .machine-result{
    position:absolute !important;

    top:52% !important;
    left:18% !important;
    width:64% !important;
    height:18% !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    color:#fff !important;
    font-size:clamp(32px,9vw,54px) !important;
    line-height:1 !important;
    font-weight:900 !important;
    text-align:center !important;

    text-shadow:
        0 3px 5px rgba(0,0,0,.95),
        0 0 10px rgba(255,255,255,.3) !important;
}

/* subtle animation only */
.machine-v2{
    animation:machineV2Entry .6s ease-out both !important;
}

@keyframes machineV2Entry{
    from{
        opacity:0;
        transform:translateY(15px) scale(.97);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

@media(max-width:600px){

    .machine-v2{
        width:min(400px,94vw) !important;
        margin:14px auto 18px !important;
    }

    .machine-v2 .machine-digits span{
        font-size:clamp(20px,6.5vw,28px) !important;
    }

    .machine-v2 .machine-game{
        font-size:clamp(15px,4.7vw,20px) !important;
    }

    .machine-v2 .machine-result{
        font-size:clamp(30px,10vw,44px) !important;
    }
}

/* =====================================================
   END MACHINE V2
   ===================================================== */


/* ===== MACHINE V2 FINAL ===== */

.machine_div.machine-v2{
    position:relative !important;
    width:min(430px,92vw) !important;
    margin:18px auto 20px !important;
    padding:0 !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    z-index:20 !important;
}

.machine-v2 .machine-image{
    display:block !important;
    position:relative !important;
    width:100% !important;
    height:auto !important;
    margin:0 !important;
    z-index:1 !important;
    filter:drop-shadow(0 14px 18px rgba(0,0,0,.38));
}

.machine-v2 .machine-overlay{
    position:absolute !important;
    inset:0 !important;
    z-index:50 !important;
    pointer-events:none;
}

/* TOP 3 NUMBERS */
.machine-v2 .machine-digits{
    position:absolute !important;
    top:22% !important;
    left:20% !important;
    width:60% !important;

    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:8% !important;
}

.machine-v2 .machine-digits span{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    margin:0 !important;
    padding:0 !important;
    width:100% !important;
    height:auto !important;

    color:#fff !important;
    opacity:1 !important;
    visibility:visible !important;

    font-size:30px !important;
    font-weight:900 !important;
    line-height:1 !important;

    text-shadow:
        0 2px 4px #000,
        0 0 7px rgba(255,255,255,.45) !important;
}

/* GAME NAME */
.machine-v2 .machine-game{
    position:absolute !important;
    top:35.5% !important;
    left:16% !important;
    width:68% !important;
    height:13% !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    color:#fff !important;
    opacity:1 !important;
    visibility:visible !important;

    font-size:23px !important;
    font-weight:900 !important;
    line-height:1 !important;
    text-align:center !important;

    text-shadow:0 2px 5px #000 !important;
}

/* FINAL RESULT */
.machine-v2 .machine-result{
    position:absolute !important;
    top:52% !important;
    left:18% !important;
    width:64% !important;
    height:18% !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    color:#fff !important;
    opacity:1 !important;
    visibility:visible !important;

    font-size:48px !important;
    font-weight:900 !important;
    line-height:1 !important;

    text-shadow:
        0 3px 5px #000,
        0 0 9px rgba(255,255,255,.35) !important;
}

@media(max-width:600px){

    .machine_div.machine-v2{
        width:94vw !important;
        max-width:410px !important;
        margin:14px auto !important;
    }

    .machine-v2 .machine-digits span{
        font-size:24px !important;
    }

    .machine-v2 .machine-game{
        font-size:18px !important;
    }

    .machine-v2 .machine-result{
        font-size:38px !important;
    }
}

/* ===== END MACHINE V2 FINAL ===== */



/* ===== BOTTOM RESULT VISIBILITY FIX ===== */

body{
    padding-bottom:105px !important;
}

.footer{
    bottom:0 !important;
    z-index:100 !important;
}

a.see-result{
    position:fixed !important;
    z-index:150 !important;
    left:50% !important;
    bottom:72px !important;
    transform:translateX(-50%) !important;
    margin:0 !important;
}

a.see-result:hover{
    transform:translateX(-50%) translateY(-2px) !important;
}

@media(max-width:600px){

    body{
        padding-bottom:120px !important;
    }

    .machine-v2-clean{
        width:min(340px,88vw) !important;
        margin-top:12px !important;
        margin-bottom:110px !important;
    }

    a.see-result{
        bottom:76px !important;
    }
}

/* ===== END BOTTOM RESULT VISIBILITY FIX ===== */

/* ===== SEE RESULT SCROLL FIX ===== */

/* page ko bottom me scrolling space */
html,
body{
    min-height:100% !important;
    height:auto !important;
}

body{
    overflow-x:hidden !important;
    overflow-y:auto !important;
    padding-bottom:150px !important;
}

/* bottom 3 result cards */
.footer{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100% !important;
    z-index:100 !important;
}

/* See Result ko fixed se hatao */
a.see-result{
    position:absolute !important;
    left:50% !important;
    bottom:-58px !important;

    transform:translateX(-50%) !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    min-width:130px !important;
    height:42px !important;
    padding:7px 20px !important;

    margin:0 !important;

    z-index:110 !important;

    color:#fff !important;
    background:#16824b !important;
    border:2px solid #fff !important;
    border-radius:25px !important;

    font-weight:800 !important;
    text-decoration:none !important;

    box-shadow:0 5px 15px rgba(0,0,0,.30) !important;
}

/* footer ke baad enough scrollable space */
section{
    position:relative !important;
    padding-bottom:85px !important;
}

@media(max-width:600px){

    body{
        padding-bottom:165px !important;
    }

    a.see-result{
        bottom:-58px !important;
        min-width:125px !important;
        height:40px !important;
    }

    section{
        padding-bottom:90px !important;
    }
}

/* ===== END SEE RESULT SCROLL FIX ===== */

/* ===== FINAL FOOTER NORMAL FLOW FIX ===== */

/* Page normally scroll kare */
html,
body{
    height:auto !important;
    min-height:100% !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
}

body{
    padding-bottom:25px !important;
}

/* Section normal document flow */
section{
    position:relative !important;
    display:block !important;
    width:100% !important;
    padding:0 0 30px !important;
    margin:0 !important;
}

/* 3 result cards AB FIXED NAHI HONGE */
.footer,
.footer.owl-carousel{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;

    width:100% !important;
    margin:10px 0 0 !important;

    z-index:10 !important;
}

/* See Result cards ke neeche normal flow me */
.text-center{
    position:relative !important;
    display:block !important;
    width:100% !important;
    margin-top:16px !important;
    margin-bottom:20px !important;
}

a.see-result{
    position:relative !important;

    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;

    transform:none !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    min-width:130px !important;
    height:42px !important;

    margin:0 auto !important;
    padding:7px 22px !important;

    color:#fff !important;
    background:#16824b !important;
    border:2px solid #fff !important;
    border-radius:24px !important;

    font-weight:800 !important;
    text-decoration:none !important;

    box-shadow:0 5px 15px rgba(0,0,0,.28) !important;
}

/* Previous hover transform bhi cancel */
a.see-result:hover{
    transform:translateY(-2px) !important;
}

/* Mobile */
@media(max-width:600px){

    body{
        padding-bottom:20px !important;
    }

    .footer,
    .footer.owl-carousel{
        position:relative !important;
        bottom:auto !important;
        margin-top:8px !important;
    }

    .text-center{
        margin-top:14px !important;
        margin-bottom:25px !important;
    }

    a.see-result{
        position:relative !important;
        left:auto !important;
        bottom:auto !important;
        transform:none !important;
    }
}

/* ===== END FINAL FOOTER NORMAL FLOW FIX ===== */

/* ===== CLEAN RESULT STRIP ===== */

.result-strip.owl-carousel{
    position:relative !important;
    display:block;
    width:100% !important;

    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;

    margin:12px 0 0 !important;
    padding:0 6px !important;

    z-index:5 !important;
    box-sizing:border-box !important;
}

/* Owl generated wrappers */
.result-strip .owl-stage-outer{
    position:relative !important;
    overflow:hidden !important;
}

.result-strip .owl-stage{
    position:relative !important;
}

.result-strip .owl-item{
    position:relative !important;
}

/* Cards */
.result-strip .footer-item{
    min-height:54px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;

    margin:0 !important;
    padding:6px 4px !important;

    background:#16824b !important;
    border:2px solid #fff !important;
    border-radius:7px !important;
}

/* See Result - carousel ke proper neeche */
section > .text-center{
    position:relative !important;
    display:block !important;

    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;

    width:100% !important;
    clear:both !important;

    margin:18px 0 35px !important;
    padding:0 !important;

    z-index:5 !important;
}

section > .text-center > a.see-result{
    position:relative !important;

    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;

    transform:none !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    margin:0 auto !important;
}

/* Whole section naturally scrolls */
section{
    position:relative !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
    padding-bottom:20px !important;
}

html,
body{
    height:auto !important;
    min-height:100% !important;
    overflow-y:auto !important;
}

/* ===== END CLEAN RESULT STRIP ===== */

/* ===== MACHINE -> SEE RESULT -> RESULTS ===== */

html,
body{
    height:auto !important;
    min-height:100% !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
}

body{
    padding-bottom:0 !important;
}

/* Machine ke baad button */
.machine-see-result{
    position:relative !important;
    display:block !important;
    width:100% !important;

    margin:4px 0 14px !important;
    padding:0 !important;

    top:auto !important;
    bottom:auto !important;
    left:auto !important;
    right:auto !important;

    z-index:20 !important;
}

.machine-see-result .see-result{
    position:relative !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    top:auto !important;
    bottom:auto !important;
    left:auto !important;
    right:auto !important;

    transform:none !important;

    min-width:130px !important;
    height:40px !important;

    margin:0 auto !important;
    padding:7px 20px !important;

    color:#fff !important;
    background:#16824b !important;

    border:2px solid #fff !important;
    border-radius:22px !important;

    font-weight:800 !important;
    text-decoration:none !important;

    box-shadow:0 4px 12px rgba(0,0,0,.28) !important;
}

/* Result strip button ke neeche */
section{
    position:relative !important;
    height:auto !important;
    min-height:0 !important;

    margin:0 !important;
    padding:0 0 20px !important;

    background:transparent !important;
    overflow:visible !important;
}

.result-strip.owl-carousel{
    position:relative !important;

    top:auto !important;
    bottom:auto !important;
    left:auto !important;
    right:auto !important;

    width:100% !important;

    margin:0 !important;
    padding:0 6px !important;

    background:transparent !important;
}

/* unwanted old See Result space */
section > .text-center{
    margin:0 !important;
    padding:0 !important;
}

/* White empty screen/space remove */
body:after,
section:after{
    content:none !important;
}

@media(max-width:600px){

    .machine-see-result{
        margin:0 0 12px !important;
    }

    section{
        padding-bottom:15px !important;
    }
}

/* ===== END FLOW FIX ===== */

/* ===== SEE RESULT DEDICATED ROW - FINAL ===== */

/* Machine ke neeche button ke liye dedicated space */
.machine-see-result{
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:100% !important;
    height:55px !important;
    min-height:55px !important;

    margin:0 !important;
    padding:5px 0 10px !important;

    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;

    clear:both !important;
    float:none !important;
    overflow:visible !important;

    z-index:50 !important;
}

/* See Result */
.machine-see-result a.see-result{
    position:static !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:auto !important;
    min-width:130px !important;
    height:40px !important;

    margin:0 !important;
    padding:7px 22px !important;

    transform:none !important;

    color:#fff !important;
    background:#16824b !important;

    border:2px solid #fff !important;
    border-radius:22px !important;

    font-size:15px !important;
    line-height:1 !important;
    font-weight:800 !important;

    text-decoration:none !important;
    white-space:nowrap !important;

    z-index:auto !important;
}

/* Result section button ki row ke BAAD hi start hoga */
.machine-see-result + section{
    position:relative !important;
    display:block !important;

    width:100% !important;
    height:auto !important;
    min-height:65px !important;

    clear:both !important;

    margin:0 !important;
    padding:0 5px 15px !important;

    top:auto !important;
    bottom:auto !important;

    overflow:visible !important;
    z-index:10 !important;
}

/* Green result cards normal flow */
.machine-see-result + section .result-strip,
.machine-see-result + section .result-strip.owl-carousel{
    position:relative !important;

    display:block !important;
    width:100% !important;

    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;

    margin:0 !important;
    padding:0 !important;

    transform:none !important;

    clear:both !important;
    z-index:10 !important;
}

/* Owl wrappers ko bhi fixed/absolute hone se roko */
.result-strip .owl-stage-outer{
    position:relative !important;
    display:block !important;
    width:100% !important;
    overflow:hidden !important;
}

.result-strip .owl-stage{
    position:relative !important;
}

.result-strip .owl-item{
    position:relative !important;
}

/* Mobile */
@media(max-width:600px){

    .machine-see-result{
        height:58px !important;
        min-height:58px !important;
        padding:6px 0 12px !important;
    }

    .machine-see-result + section{
        min-height:65px !important;
    }
}

/* ===== END SEE RESULT DEDICATED ROW ===== */

/* ===== DATE TIME CENTER ALIGNMENT ===== */

.date-time-bar{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-wrap:wrap !important;
    gap:8px 22px !important;

    width:fit-content !important;
    max-width:calc(100% - 24px) !important;

    margin:12px auto !important;
    padding:8px 18px !important;

    border-radius:12px !important;
    text-align:center !important;
}

.date-time-bar p{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:auto !important;
    height:auto !important;

    margin:0 !important;
    padding:0 !important;

    font-size:13px !important;
    line-height:1.5 !important;
    text-align:center !important;
}

.date-time-bar p b,
.date-time-bar .clocktimer{
    font-size:13px !important;
    font-weight:600 !important;
}

.date-time-bar .clocktimer{
    display:inline !important;
    width:auto !important;
    height:auto !important;
    padding:0 !important;
}

/* MOBILE */
@media(max-width:600px){

    .date-time-bar{
        gap:5px 12px !important;
        padding:7px 12px !important;
        margin:10px auto !important;
    }

    .date-time-bar p,
    .date-time-bar p b,
    .date-time-bar .clocktimer{
        font-size:12px !important;
    }
}

/* ===== END DATE TIME ALIGNMENT ===== */