.template2_v1 {
  position: relative;
}

.template2_v1 .question {
  font-size: 25px;
  position: relative;
  top: 151px;
  left: 85px;
  line-height: 1.6;
}
.inst {
  padding: 17px 16px;
  color: #fff;
  border-radius: 10px;
  position: relative;
  left: 40px;
  cursor: pointer;
  animation: sentenseZoomLeftRight 0.3s infinite alternate;
}
.zoom {
  animation: sentenseZoomLeftRight 0.3s infinite alternate;
}
.header {
  overflow-y: overlay;
  width: 102%;
  z-index: 9999999999;
}

.template2_v1 .text {
  position: absolute;
  width: 100%;
  right: 18px;
  top: -32px;
}

.template2_v1 .text p {
  margin-bottom: 15px;
  line-height: 1.2;
}

h1 {
  font-size: 40px;
}

.ex-image {
  position: absolute;
  right: 10px;
  top: 45px;
  transform: rotate(2deg);
}

.purple-l {
  color: #61298a !important;
  font-weight: 900;
}

.pink-l {
  color: #df3b96 !important;
  font-weight: 900;
}

.green-l {
  color: #3ead48 !important;
  font-weight: 900;
}

.red-l {
  color: #d1232a !important;
  font-weight: 900;
}

.yellow-l {
  color: #fba51d !important;
  font-weight: 900;
}

.blue-l {
  color: #0095da !important;
  font-weight: 900;
}

.c1 {
  position: relative;
}

.c1::after {
  position: absolute;
  content: attr(data-text);
  inset: 0;
  color: inherit;
}

.bg {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 100% 5px;
}

.book {
  position: absolute;
  width: 30%;
  top: 35px;
  left: 858px;
}

.a-style {
  border: 9px solid #f72b62;
  border-radius: 50%;
  width: 300px;
  height: 300px;
  line-height: 1.7;
  text-align: center;
}
.queBox img {
  cursor: pointer;
}

.queBox {
  text-align: center;
}

.clickableBox {
  cursor: pointer;
  display: inline-block;
  margin-top: 0px;
}
.clickableBox img {
  /* border: 6px solid #FBB428; */
  /* border-radius: 15px; */
}

.queBox .textBox {
  font-size: 38px;
}

.pagePopup .content {
  margin-top: 60px;
}

/*------- Page Popup Css -------*/
.pagePopup {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  top: 0;
  left: 0;
  display: none;
  z-index: 2;
}

.pagePopupContainer {
  position: relative;
  width: 1230px;
  height: 730px;
  background-color: #fff;
  border: 5px solid #fbb428;
  border-radius: 20px;
  padding: 20px;
  position: fixed;
  top: 51%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.pagePopup .col-xs-12 {
  overflow: auto;
  width: 100%;
  height: 100%;
  padding: 0;
}

.pagePopup .popup-content {
  width: 100%;
  height: 100%;
}

.pagePopup .popupTextBox {
  font-size: 140px;
  margin-right: 100px;
  line-height: 1;
}

.pagePopup .textBox {
  font-size: 80px;
  text-align: center;
  padding: 0px 25px 20px;
  display: inline-block;
  line-height: 1;
  margin-left: 30px;
}

.pagePopup .audio_Icon {
  cursor: pointer;
}

.pagePopup .popupBottomContent {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
}
.popupBottomContent p {
  margin: 0 !important;
}
.popupBottomContent .pagePopup .textBox {
  padding: 0px 25px 5px !important;
}
.pagePopup .popupBottomContent .imgContainer {
  display: inline-block;
  padding-bottom: 12px;
}
.divPop img {
  width: 25%;
}
.pagePopup .carouselLeft,
.pagePopup .carouselRight {
  position: absolute;
  top: 302px;
}

.pagePopup .carouselLeft {
  left: 5px;
}

.pagePopup .carouselRight {
  right: 5px;
}

.arrow {
  position: absolute;
  display: block;
  width: 27px;
  height: 25px;
  border-top: 3px solid #000;
  border-left: 3px solid #000;
  z-index: 1;
}

.arrow {
  transform: rotate(46deg);
}

.arrow::after {
  content: "";
  display: block;
  width: 3px;
  height: 45px;
  background-color: black;
  transform: rotate(-45deg) translate(15px, 4px);
  left: 0;
  top: 0;
}
.d-flex {
  display: flex;
}
.arrow-1 {
  top: 183px;
  left: 266px;
}
.arrow-2 {
  top: 183px;
  left: 151px;
}
.arrow-3 {
  top: 183px;
  left: 266px;
}
.arrow-4 {
  top: 183px;
  left: 149px;
}
.bounce {
  position: relative;
  display: inline-block;
  color: #ee1c25;
  transform: scale(1);
  animation: lll 0.7s ease-in-out infinite alternate;
}

@keyframes lll {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.5);
  }
}

.game {
  display: flex;
  height: 100%;
  padding: 10px;
  flex-direction: column;
  /* background-image: url(../../assets/images/war.avif); */
  background-repeat: no-repeat;
  background-size: 100%;
}
.word_area,
.game_area {
  /* border-top: 4px solid #5eb45c; */
  height: 100%;
}
.word_area {
  width: 100%;
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 30px;
  padding: 30px 0;
  height: 100px;
  flex-direction: row;
  animation-name: MoveUpDown;
  animation-duration: 0.4s;
  transition: 0.4s;
  border: none;
}
.imgSentense img {
  width: 951px;
  height: 100px;
  position: absolute;
  left: 230px;
  top: 15px;
}
.manSpace {
  position: relative;
  top: 23em;
  left: 48em;
  animation-name: sentenseZoom2;
  animation-duration: 0.9s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.game_area {
  width: 100%;
  position: relative;
  /* overflow: hidden; */
}

.word,
.static_word {
  width: fit-content;
  height: fit-content;
  display: flex;
  /* border-bottom: 3px solid; */
  font-size: 48px;
  font-weight: bold;
  padding: 0px 41px;
  position: relative;
  top: -96px;
  transition: 0.3s;
  justify-content: center;
  /* color: #fff; */
}
.tit img {
  /* width: 58px;
  margin: 0 22px; */
}
.word.answerd {
  top: 7px !important;
}
#box {
  width: 10px;
  height: 10px;
  position: absolute;
  top: 617px;
  left: 514px;
  margin-left: -40px;
  display: flex;
  flex-direction: column-reverse;
}
#box.shot {
  animation-name: shot;
  animation-duration: 0.2s;
}
#box img.madfa3 {
  width: 230px;
  position: absolute;
}
#box img.boomb {
  width: 49px;
  height: 202px;
  position: absolute;
  bottom: 159px;
  left: 87px;
}

.boomb {
  animation-name: shooted;
  animation-duration: 3s;
}
@keyframes shooted {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-1000px);
  }
}

.ballon {
  display: flex;
  justify-content: space-around;
}
.ballon .ballon_word {
  font-size: 2.2em;
  width: 155px;
  height: 155px;
  margin-top: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  flex-direction: column-reverse;
  animation: MoveUpDown;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  background-size: 100%;
  background-repeat: no-repeat;
  padding-right: 4px;
  padding-bottom: 47px;
  color: #000;
}
.ballon_word::after {
  content: attr(data-name);
  -webkit-text-stroke: 10px white;
  position: relative;
  top: 51px;
  left: 0;
  z-index: -1;
}
.startDiv {
  position: absolute;
  inset: 0;
  background-image: url(../../assets/images/startCard.png);
  background-color: rgba(255, 255, 255, 0.5);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 9;
}
.startBtn {
  position: absolute;
  bottom: 250px;
  left: 38.5%;
}
.startBtn:hover .hovrring {
  z-index: -1;
  visibility: hidden;
  display: none;
}
.startBtnPos {
  position: absolute;
  cursor: pointer;
}
.reloadBtnAll.inner {
  top: -260px;
  position: relative;
  left: 562px;
}
#inner.reloadBtnAll.inner img {
  width: 100px !important;
  height: 100px !important;
}
.visibility_hidden {
  visibility: hidden;
  opacity: 0;
}

.ballon_word:first-child {
  left: 10%;
  /* position: absolute; */
}

.ballon_word:nth-child(2) {
  position: relative;
}

@-webkit-keyframes MoveUpDown {
  from {
    /* top: 0px; */
    transform: translateY(10px) scale(0.9);
  }
  to {
    /* top: 20px; */
    transform: translateY(-10px) scale(1);
  }
}
@-webkit-keyframes sentenseZoom {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}
@-webkit-keyframes sentenseZoom2 {
  from {
    transform: translateY(-10px);
  }
  to {
    transform: translateY(10px);
  }
}
@-webkit-keyframes sentenseZoomLeftRight {
  from {
    transform: rotate(4deg);
  }
  to {
    transform: rotate(-4deg);
  }
}
@-webkit-keyframes shot {
  from {
    top: 584px;
  }
  to {
    top: 560px;
  }
}

.celebrate {
  position: absolute;
  top: -7px;
  left: -2px;
  z-index: 999999999;
}
.prevent_click {
  pointer-events: none !important;
}
.sentense {
  /* position: absolute; */
  left: 35px;
  background: #03a9f4;
  padding: 12px 17px;
  color: #fff;
  text-shadow: 1px 1px 1px #000;
  box-shadow: 1px 1px 6px #000;
  border-radius: 10px;
  top: 0px;
  animation-name: sentenseZoom;
  animation-duration: 0.4s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  opacity: 0;
}

.loseImg {
  position: relative;
  left: -37px !important;
  top: -29px !important;
  width: 1303px !important;
  position: relative;
  left: -133px;
  top: 8px;
  padding: 0;
  margin: 0;
  color: #fff;
  padding: 8px 16px;
  font-size: 40px;
  width: 209px;
  left: -75px;
  position: relative;
}

.keyboard_img {
  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
  left: -131px;
  width: 1318px !important;
}
.keyboard_img div {
  position: absolute;
}
.leftArrow {
  font-size: 106px;
  transform: scale(0.8, 2.4) rotateZ(90deg) translate(-27px, -183px);
}
.rightArrow {
  font-size: 106px;
  transform: scale(1.5, 0.9) translate(201px, 155px) rotate3d(2, 0, 13, 45deg);
}
.spaceKey {
  font-size: 106px;
  transform: scale(0.6, 1.7) translate(-251px, 96px);
}

.leftText {
  top: 65px;
  left: 668px;
  font-size: 30px;
  font-weight: bold;
  animation-name: sentenseZoom;
  animation-duration: 0.4s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  background: #03a9f4;
  color: #fff;
  padding: 7px;
}
.rightText {
  top: 540px;
  left: 900px;
  width: 360px;
  font-size: 30px;
  text-align: center;
  font-weight: bold;
  animation-name: sentenseZoom;
  animation-duration: 0.4s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  background: #03a9f4;
  color: #fff;
  padding: 7px;
}
.spaceText {
  top: 582px;
  left: 403px;
  font-size: 30px;
  font-weight: bold;
  animation-name: sentenseZoom;
  animation-duration: 0.4s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  background: #03a9f4;
  color: #fff;
  padding: 7px;
}
.congratulatoins {
  width: 92.3%;
  height: 59%;
  background: #d21f53e0;
  position: absolute;
  top: 27%;
  left: 52px;
  z-index: 9999999999999999;
  border-radius: 20px;
  border: 4px solid #5eb45c;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 114px;
  color: #fff;
  text-shadow: 3px 4px 15px #000;
}
#nextLevel {
  /* background: red; */
  padding: 0;
  margin: 0;
  color: #fff;
  padding: 8px 16px;
  font-size: 40px;
  width: 209px;
  left: -75px;
  position: relative;
}
#nextLevel img {
  width: 4em;
}
#pButton {
  cursor: pointer;
  width: 100px;
  height: 116px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(../../assets/images/emptyBtn.png);
  background-repeat: no-repeat;
  background-size: 95% 97.2%;
  background-position-y: 0px;
}
.reloadBtnAll img {
  width: 97.8%;
  height: 7.3em;
  top: -2px;
  position: relative;
}
.reloadBtnAll img.tryAgainBtn {
  width: 100% !important;
  animation: rotate 0.6s infinite alternate;
}
#pButton img {
  top: -10px;
  position: relative;
}

@-webkit-keyframes rotate {
  from {
    transform: rotate(30deg);
  }
  to {
    transform: rotate(-30deg);
  }
}

.start_game {
  background-color: #85c7e5;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 999;
}
.start_game .cannon {
  position: absolute;
  bottom: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 50%;
  animation: CANNON_MOVE_LEFT_AND_RIGHT 8s infinite alternate;
}

.tit {
  display: flex;
  align-items: center;
}
.tit span {
  margin-right: 0.4em;
}
.shot_icon_tries {
  width: 55px;
  height: 55px;
  background-color: #000;
  border-radius: 50%;
  display: inline-block;
}
.shot_icon_tries::after {
  content: "";
  position: absolute;
  top: 46px;
  left: 42px;
  width: 10px;
  height: 10px;
  background-color: #f5f3f3;
  border-radius: 55%;
  box-shadow: 0px 2px 8px #fff, 0px -2px 8px #fff;
}
.start_game .shot_icon {
  width: 45px;
  height: 45px;
  background-color: #000;
  border-radius: 50%;
  animation: shooting 3s infinite;
}
.shot_icon::after {
  content: "";
  position: absolute;
  top: 11px;
  left: 36px;
  width: 10px;
  height: 10px;
  background-color: #909090;
  border-radius: 50%;
}

.start_game .cannon img {
  width: 6em;
}

@-webkit-keyframes CANNON_MOVE_LEFT_AND_RIGHT {
  from {
    transform: translateX(70em);
  }
  to {
    transform: translateX(0%);
  }
}
@-webkit-keyframes shooting {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-70em);
  }
}
.planes {
  position: relative;
  top: 3%;
}
.planes img {
  width: 10em;
  position: absolute;
}
.planes img:first-child {
  animation: fly 8s ease 0s infinite forwards;
  -webkit-animation: fly 8s ease 0s infinite forwards;
}
.planes img:nth-child(2) {
  animation: fly2 10s ease 0s infinite forwards;
  -webkit-animation: fly2 15s ease 0s infinite forwards;
  margin-top: 120px;
}

@keyframes fly {
  0% {
    left: 5%;
    top: 5%;
    transform: rotatey(0deg);
  }

  10% {
    transform: rotatey(180deg);
  }

  25% {
    top: 10%;
  }

  50% {
    left: 89%;
  }

  75% {
    top: 5%;
  }

  100% {
    left: 5%;
    top: 5%;
  }
}

@keyframes fly2 {
  0% {
    top: 50%;
    left: 20%;
  }

  10% {
    left: 10%;
    transform: rotatey(90deg);
  }

  15% {
    transform: rotatey(180deg);
  }

  25% {
    top: 35%;
  }

  45% {
    transform: rotatey(180deg);
  }

  50% {
    left: 85%;
    transform: rotatey(90deg);
  }

  55% {
    transform: rotatey(0deg);
  }

  75% {
    top: 65%;
  }

  100% {
    left: 20%;
    top: 50%;
  }
}
.btn {
  pointer-events: none !important;
  cursor: default;
}
.btn img {
  pointer-events: all;
}

.startGameBtn {
  position: relative;
  left: 50%;
  top: 44%;
  margin-left: -120px;
  font-size: 50px;
  border: 5px solid;
  width: fit-content;
  padding: 14px;
  cursor: pointer;
  text-shadow: 10px 10px 10px #3f51b5;
  font-weight: bold;
  border-radius: 10px;
  animation: vibs 10s infinite alternate;
  -webkit-animation: vibs 0.5s infinite alternate;
}
.btn:active {
  box-shadow: unset;
}
.vibs {
  animation: vibs 10s infinite alternate;
  -webkit-animation: vibs 0.5s infinite alternate;
}
@keyframes vibs {
  0% {
    /* transform: rotateY(-40deg); */
    transform: skew(3deg, 3deg);
  }

  100% {
    /* transform: rotateY(40deg); */
    transform: skew(-3deg, -3deg);
  }
}

.clouds {
  position: absolute;
}
.clouds img {
  width: 12em;
  position: absolute;
}
.clouds img:first-child {
  left: 10px;
  top: 124px;
}
.clouds img:nth-child(2) {
  left: 315px;
  top: 15px;
}
.clouds img:nth-child(3) {
  left: 715px;
  top: 124px;
}
.clouds img:last-child {
  left: 1015px;
  top: 17px;
}

.level_number {
  font-size: 25px;
  font-weight: bold;
  background-image: url(../../assets/images/cloud.png);
  width: 180px;
  height: 58px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  line-height: 3.6;
  padding-left: 31px;
  animation: vibs 10s infinite alternate;
  -webkit-animation: vibs 0.5s infinite alternate;
  position: absolute;
  left: 20px;
}
#bgVideo {
  position: absolute;
  top: 0px;
  left: -10px;
  z-index: -1;
}

.level_word {
  position: relative;
  left: 32px;
  top: -15px;
}
@keyframes vibs {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.1);
  }
}

.word.answerd.font_size_4 {
  font-size: 35px;
  padding: 0px 27px;
}
.word.answerd.font_size_5 {
  font-size: 30px;
  padding: 0px 22px;
}
.word.answerd.font_size_6 {
  font-size: 25px;
  padding: 0px 19px;
}

.devices {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 14%;
  position: absolute;
  flex-direction: row-reverse;
  left: 67%;
}
.devices .choes_device {
  padding: 5px;
}
.devices .choes_device.pc {
  padding: 12px;
}
.devices img {
  cursor: pointer;
}
.pc img {
  width: 4em;
}
.tablat img {
  width: 5.2em;
}
.mobile img {
  width: 2.2em;
}
.selected {
  background-color: #ce509f;
  border-radius: 10px;
}
.btns_controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  position: absolute;
  left: 540px;
  margin-left: 300px;
}
.btns_controls .shot {
  position: relative;
  left: -155px;
}

.arrows {
  display: flex;
  justify-content: space-between;
  width: 160px;
  position: relative;
  left: -6em;
}
.btns_controls img {
  width: 7em;
  height: 8em;
  cursor: pointer;
}
.btns_controls img.vibs {
  animation: vibs 10s infinite alternate;
  -webkit-animation: vibs 0.5s infinite alternate;
}
.arrows img {
  display: inline-block;
  margin: 0 1.5em;
}
.box3 {
  position: relative;
  left: -4em;
}

.finish {
  animation: finish 10s infinite alternate;
  -webkit-animation: finish 0.5s infinite alternate;
}

@keyframes finish {
  0% {
    transform: skew(-5deg);
  }

  100% {
    transform: skew(5deg);
  }
}

.boombs_numbers {
  display: flex;
  align-items: center;
  color: #fff;
  display: none;
}
.boombs_numbers img {
  width: 4em;
}
.boombs_numbers span {
  font-weight: bold;
  font-size: 2em;
  padding: 0 7px;
}

.footer {
  /* top: -10px; */
}
.pageContainer {
  position: relative;
  top: 17px;
}

#madfa3 {
  top: -132px;
  left: 200px;
  z-index: 9999;
  width: 10em;
}