@font-face {
  font-family: "rokh";
  src: url("../rokh/Rokh-Bold.otf");
  src: url("../rokh/Rokh-Black.otf") format("TTF"),
    url("../rokh/Rokh-ExtraBold.otf") format("TTF");
  font-weight: normal;
  font-style: normal
}

* {
  margin: 0;
  padding: 0;
}

.text {
  font-family: "rokh" !important;
}

.text2 {
  font-size: 14px;
  direction: rtl !important;
}

.img {
  width: 30%;
}

.imgttr {
  width: 35px !important;
  position: relative;
  z-index: 999999999999999999 !important;
}

.mt1 {
  margin-top: 10px;
}

body {
  background: url(../img/bg.svg);
  background-size: cover;
  background-position: center;
  color: #fff;
  font-size: 18px;
  font-family: 'Exo 2', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100% !important;
  height: 100% !important;
  backdrop-filter: blur(5px);
}

a {
  color: #34495e;
}

.modal-content {
  width: 300px !important;
}

.modal-dialog {
  display: flex;
  justify-content: center;
  align-items: center;
}

.bgshow {
  width: 300px;
  position: absolute;
  inset: 0px !important;
}

.modal-content {
  position: relative;
  background-color: transparent !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 0px;
}

.modal-content::after {
  content: "";
  width: 123%;
  height: 200px;
  background: url(../img/win-show.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: -66px;
  z-index: 500000000;
}

.modal-content::before {
  content: "";
  width: 130%;
  height: 204px;
  background: url(../img/boxs-show.svg);
  background-size: contain ;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: -178px;
  z-index: 500000000;
}


#solidafter::after{
  content: "";
  width: 123% !important;
  height: 200px !important;
  background: url(../img/show-solid.svg) !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  position: absolute !important;
  top: -80px !important;
  z-index: 500000000 !important;
}

#solidafter::before{
  background: none !important;
}


.modal-content>* {
  font-family: "rokh";
  text-align: center !important;
  direction: rtl !important;
}

.modal-content h4 {
  font-size: 20px !important;
  margin-top: 40px;
}

.textshow1 {
  font-size: 30px !important;
  margin: 10px 0px !important;
  margin-top: 20px !important;
  color: #1B1B1B !important;
}

.textshow2 {
  font-size: 30px !important;
  margin: 10px 0px !important;
  color: #BE0101 !important;
}

.btnshow {
  margin-top: 30px;
  background: linear-gradient(#E50509, #FF6E70);
  border: none;
  padding: 10px 35px;
  color: #fff;
  border-radius: 200px !important;
  position: relative;
}

.btnshow span {
  position: relative;
  z-index: 2000;
  margin: 0 2px !important;
}


.btnshow::before {
  z-index: 100;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0px;
  border-radius: 200px !important;
  background: url(../img/bg-btn-show.svg);
  background-size: cover;
  background-position: center;
  opacity: .7;
}


.btnspin {
  border: none;
  padding: 10px 20px;
  font-family: "rokh";
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(#A8DF84, #306F16);
  border: 3px solid #446B28;
  font-size: 20px;
  margin: 4px;
  direction: rtl !important;
  transition: .3s;
}


.bgspinbtn1 {
  background: linear-gradient(#FFEF64, #AD6733);
  border-radius: 10px;
  border: 3px solid #BE6F34;
  display: flex;
  justify-content: center;
  align-items: center;
}

.imgshowfist {
  width: 400px;
}


/*WRAPPER*/
#wrapper {
  width: 310px;
  height: 310px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(rgb(110, 44, 28) 0%, rgb(251, 246, 146) 100%);
}

.bg-round-1 {
  width: 360px;
  height: 360px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(../img/bg-round.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: .9;
  transform: rotate(0deg);
}


.border-round-1 {
  width: 375px;
  height: 370px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(90deg, rgba(174, 62, 48, 1) 0%, rgba(84, 9, 4, 1) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.border-round-2 {
  width: 385px;
  height: 385px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(90deg, rgba(240, 158, 82, 1) 0%, rgba(125, 24, 14, 1) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
}



/*WHEEL*/
#wheel {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px, rgba(0, 0, 0, 0.05) 0px 3px 0px;
  transform: rotate(0deg);
  background-color: #fff;

}


#inner-wheel {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  -webkit-transition: all 6s cubic-bezier(0, .99, .44, .99);
  -moz-transition: all 6 cubic-bezier(0, .99, .44, .99);
  -o-transition: all 6s cubic-bezier(0, .99, .44, .99);
  -ms-transition: all 6s cubic-bezier(0, .99, .44, .99);
  transition: all 6s cubic-bezier(0, .99, .44, .99);
}

#wheel div.sec {
  height: 50%;
  width: 122px;
  position: absolute;
  clip-path: polygon(100% 0, 50% 100%, 0 0);
  transform: translateX(-50%);
  transform-origin: bottom;
  text-align: center;
  display: flex;
  ;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  font-family: sans-serif;
  color: #fff;
  top: 0px;
}

.insec {
  height: 100%;
  width: 100%;
  clip-path: polygon(100% 0, 50% 100%, 0 0);
  position: relative;
  display: flex;
  align-items: center !important;
  justify-content: start !important;
  flex-direction: column;
}

.insec span:nth-child(1) {
  margin-top: 10px;
}

.insec::before {
  content: "";
  width: 104%;
  height: 91%;
  top: 0px;
  bottom: 0px;
  left: -7px;
  right: 0px;
  transform: rotate(-88deg);
  position: absolute;
  background-image: url(../img/border.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

.insec::after {
  content: "";
  width: 147%;
  height: 91%;
  top: 0px;
  bottom: 0px;
  right: -7px;
  left: -7px;
  transform: rotate(135deg);
  position: absolute;
  background-image: url(../img/border.svg);
  background-size: contain;
  background-repeat: no-repeat;
}


/* #wheel div.sec::before{
    content: "";
    width: 100px;
    height: 100px;
    po
    background-color: blue;
} */

#wheel div.sec:nth-child(1) {
  transform: rotate(45deg);
  background: linear-gradient(90deg, #B92C1B 0%, #EC6C2F 100%);
}

#wheel div.sec:nth-child(2) {
  transform: rotate(90deg);
  background: linear-gradient(90deg, #428420 0%, #B9F24D 100%);
}

#wheel div.sec:nth-child(3) {
  transform: rotate(135deg);
  background: linear-gradient(90deg, #214AD8 0%, #54A5F4 100%);
}

#wheel div.sec:nth-child(4) {
  transform: rotate(180deg);
  background: linear-gradient(90deg, #E47130 0%, #F3C144 100%);
}

#wheel div.sec:nth-child(5) {
  transform: rotate(225deg);
  background: linear-gradient(90deg, #9E1DB8 0%, #DA53ED 100%);
}

#wheel div.sec:nth-child(6) {
  transform: rotate(270deg);
  background: linear-gradient(90deg, #3E75AD 0%, #6DE5F3 100%);
}

#wheel div.sec:nth-child(7) {
  transform: rotate(315deg);
  background: linear-gradient(90deg, #9E1DB8 0%, #DA53ED 100%);
}

#wheel div.sec:nth-child(8) {
  transform: rotate(360deg);
  background: linear-gradient(90deg, #E47130 0%, #F3C144 100%);
}

.endtext {
  font-size: 15px !important;
  text-align: justify !important;
  text-align-last: center !important;
  margin-top: 40px;
  line-height: 150%;
  margin-bottom: 21px;
}

.spin {
  width: 180px;
  height: 180px;
  position: absolute;
  top: 30%;
  left: 31%;
  margin: -34px 0 0 -34px;
  border-radius: 50%;
  z-index: 1000;
  transform: rotate(1deg);
}



.spin:active:after {
  font-size: 15px;
}



#shine {
  width: 250px;
  height: 250px;
  position: absolute;
  top: 0;
  left: 0;
  background: -moz-radial-gradient(center, ellipse cover, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.99) 1%, rgba(0, 0, 0, 0.91) 9%, rgba(0, 0, 0, 0) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(0, 0, 0, 1)), color-stop(1%, rgba(0, 0, 0, 0.99)), color-stop(9%, rgba(0, 0, 0, 0.91)), color-stop(100%, rgba(0, 0, 0, 0)));
  /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.99) 1%, rgba(0, 0, 0, 0.91) 9%, rgba(0, 0, 0, 0) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.99) 1%, rgba(0, 0, 0, 0.91) 9%, rgba(0, 0, 0, 0) 100%);
  /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.99) 1%, rgba(0, 0, 0, 0.91) 9%, rgba(0, 0, 0, 0) 100%);
  /* IE10+ */
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.99) 1%, rgba(0, 0, 0, 0.91) 9%, rgba(0, 0, 0, 0) 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */

  opacity: .1;

}



/*ANIMATION*/
@-webkit-keyframes hh {

  0%,
  100% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }

  50% {
    transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
  }
}

@keyframes hh {

  0%,
  100% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }

  50% {
    transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
  }
}

.spin {
  -webkit-animation: hh 0.1s;
  /* Chrome, Safari, Opera */
  animation: hh 0.1s;
}










@media (max-width: 768px) {
  .imgshowfist {
    width: 350px;
  }

  .spin {
    width: 140px;
    height: 140px;
    top: 36%;
    left: 36%;
  }

  #wheel {
    width: 260px;
    height: 260px;
  }

  #wrapper {
    width: 270px;
    height: 270px;
  }

  .bg-round-1 {
    width: 320px;
    height: 320px;
  }

  .border-round-1 {
    width: 335px;
    height: 335px;
  }

  .border-round-2 {
    width: 345px;
    height: 345px;
  }


  .bgshow {
    width: 240px !important;
  }

  .modal-content {
    width: 240px !important;
  }

  .textshow1,
  .textshow2 {
    font-size: 22px !important;
  }

  .btnshow {
    margin-top: 5px !important;
    padding: 5px 20px !important;
    padding-top: 7px !important;
  }

  .modal-content::before {
    content: "";
    width: 120%;
    height: 246px;
    top: -178px;
    z-index: 500000000;
  }

  .modal-content::after {
    content: "";
    width: 119%;
    height: 198px;
    top: -66px;
    z-index: 500000000;
  }

  .text2 {
    margin: 0px !important;
  }

  .img {
    width: 20%;
  }



  #wheel div.sec {
    width: 105px !important;
  }



  .insec::before {
    content: "";
    width: 104%;
    height: 89%;
    top: 0px;
    bottom: 0px;
    left: -7px;
    right: 0px;
  }



}