@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Khudawadi&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

.loader {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.99);
    position: fixed;
    overflow: auto;
    top: 0;
    left: 0;
    z-index: 999;
    display: block;
}
@keyframes ldio-v6g4je6oqv {
  0% {
    top: 70.5px;
    left: 70.5px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 17.25px;
    left: 17.25px;
    width: 106.5px;
    height: 106.5px;
    opacity: 0;
  }
}

.ldio-v6g4je6oqv div {
  position: absolute;
  border-width: 4.5px;
  border-style: solid;
  opacity: 1;
  border-radius: 50%;
  animation: ldio-v6g4je6oqv 1s cubic-bezier(0,0.2,0.8,1) infinite;
}

.ldio-v6g4je6oqv div:nth-child(1) {
  border-color: #299904
}

.ldio-v6g4je6oqv div:nth-child(2) {
  border-color: #501991;
  animation-delay: -0.5s;
}

.loadingio-spinner-ripple-rf50obiksdm {
  width: 150px;
  height: 150px;
  display: inline-block;
  overflow: hidden;
  background: none;
  position:absolute;
  top:50%; left:50%; z-index:99; position:fixed; transform: translate(-50%, -50%);
}
.ldio-v6g4je6oqv {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(1);
  backface-visibility: hidden;
  transform-origin: 0 0; /* see note above */
}
.ldio-v6g4je6oqv div { box-sizing: content-box; }

.popup{background-color:rgba(0,0,0,0.9); width:100%; height:100%; position:fixed; top:0; left:0; display:none;}




body{margin:0; padding:0; height:100%; color:#000; font-family: "Noto Sans", sans-serif; font-size:20px; overflow-x:hidden; }
html{-webkit-tap-highlight-color: rgba(201, 224, 253, 0);  height:100%; }
a img{border:none;}
a{outline:none; text-decoration:none}
input, textarea{outline: none;}
ul{list-style:none; margin:0; padding:0;}
a, a:link, a:active, a:visited, .button{-webkit-transition: all 0.20s ease-out; -moz-transition: all 0.20s ease-out; -o-transition: all 0.20s ease-out; transition: all 0.20s ease-out; outline: none;}

.container{width:100%; max-width:520px; height:100%; margin:0 auto; position:relative; overflow:hidden; background: #F1F7E5;
background: linear-gradient(180deg,rgba(241, 247, 229, 1) 0%, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 1) 70%, rgba(241, 247, 229, 1) 100%);}
.logo{position:absolute; width:35%; max-width:211px; top:6%; left:50%; transform:translateX(-50%);}

.tag{position:absolute; width:80%; max-width:520px; top:12%; left:50%; transform:translateX(-50%);}
.plate{position:absolute; width:100%; bottom:-9%; }
.text1{position:absolute; width:75%; top:37%; left:50%; transform:translateX(-50%);}
.clickplay{position:absolute; top:73%; left:50%; transform:translateX(-50%); cursor:pointer; width:56%; height:18%; background-color:rgba(0,0,0,0.0)}

.gamebg{position:absolute; width:100%; top:12%; }
.game1{position:absolute; width:71%; top:12%; left:50%; transform:translateX(-50%);}

.game2{position:absolute;  width:80%; top:70%; left:50%; transform:translateX(-50%); background-color:rgba(0,0,0,0.0)}
.game2 img.op{width:100%;}
.game2 img.opt{position:absolute; width:13%; }
.game2 .veg1{top:19.5%; left:6.5%;}
.game2 .veg2{top:19.5%; left:25.5%;}
.game2 .veg3{top:19.5%; left:62.5%;}
.game2 .veg4{top:19.5%; left:44%;}

.game2 .cf1{top: 19.5%; left:81%;}
.game2 .cf2{top: 60%; left:81%;}

.game2 .pro1{top: 60%; left:6.5%;}
.game2 .pro2{top: 60%; left:25.5%;}
.game2 .pro3{top: 60%; left:44%;}
.game2 .pro4{top: 60%; left:62.5%;}

.game3{position:absolute; width:100%; top:19%; left:50%; transform:translateX(-50%); background-color:rgba(0,0,0,0.0)}
.game3 img.pla{width:100%;}
.game3 div{position:absolute; width:10.4%; background-color:rgba(0,0,0,0.0); border-radius:50%;}
.game3 div img{width:100%; height:auto;}
.game3 .veg1{top: 25.1%; left: 35.9%;}
.game3 .veg2{top: 35.1%; left: 25.9%;}
.game3 .veg3{top: 49%; left: 26%;}
.game3 .veg4{top: 59.1%; left: 35.9%;}

.game3 .cf1{top: 25%; left:53%;}
.cf2{top: 35%; left:63.2%;}

.game3 .pro1{top: 51%; left:52.1%;}
.game3 .pro2{top: 50%; left:64%;}
.game3 .pro3{top: 63%; left:52.1%;}
.game3 .pro4{top: 62.5%; left:63%;}


.clock{position:absolute;  top:1%; right:5%; background:url(../images/clock.png) no-repeat center; background-size:contain; text-align:center; color:#FF0000; font-size:1.4em;  font-weight:bold; background-color:rgba(0,0,0,0.0); padding:2% 2% 1% 2%;}


.resultpop{position:absolute; width:90%; top:62%; left:50%; background-color:rgba(255,255,255,0.9); border-radius:1em; border:3px solid #501991; transform:translateX(-50%); display:block; text-align:center; font-weight:900; font-size:1.8em; line-height:1.2em; color:#299904; padding:0.4em 0; display:none;}


.fail.glow{box-shadow:0px 0px 10px 01px #f00; border-radius:50%;}
.pass.glow{box-shadow:0px 0px 10px 1.5px #89b42c; border-radius:50%;}


#frame2{position:absolute; width:100%; top:12%; }

.frame2{position:absolute; width:98%; top:0%; left:50%; transform:translateX(-50%);}
.frame3{position:absolute; width:95%; top:2%; left:50%; transform:translateX(-50%);}
.frame4{position:absolute; width:100%; top:-2%; left:50%; transform:translateX(-50%);}
.palyagain{position:absolute; width:65%; height:9%; top:76%; left:50%; transform:translateX(-50%); background-color:rgba(0,0,0,0.0)}

.frame5{position:absolute; width:90%; top:31%; left:50%; transform:translateX(-50%); margin-left:1%;}
.web{position:absolute; width:69%; height:10%; top:52%; left:50%; transform:translateX(-50%); background-color:rgba(0,0,0,0.0)}
.tel{position:absolute; width:69%; height:10%; top:65.5%; left:50%; transform:translateX(-50%); background-color:rgba(0,0,0,0.0)}



@media screen and (max-width: 480px) {
.bg{width:100% !important; height:auto !important;}
.resultpop{font-size:1.6em; line-height:1.2em}
}