body {
  font-family: "Tajawal", sans-serif;
  margin: 0px;
  padding: 0px;

  color: #fff;
  background: rgb(12, 2, 24);
  direction: rtl;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1b0b2f+0,000000+100 */
  background: #1b0b2f; /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover, #1b0b2f 0%, #000000 100%); /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover, #1b0b2f 0%, #000000 100%); /* Chrome10-25,Safari5.1-6 */
  background: radial-gradient(
    ellipse at center,
    #1b0b2f 0%,
    #000000 100%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1b0b2f', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.center {
  margin: auto;
  margin-top: 1%;
}
.center img {
  width: 100px;
}
.center .mainicon {
  width: 150px;
  margin-top: -34px;
}
.center .mainiconlogo {
  width: 160px;
}

.hexagon {
  color: #0c0218;

  background: #ffffff;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  position: relative;
  margin-left: 8px;
  float: right;
  transition: all 0.3s ease;
}
.hexagon:hover {
  background: #0c0218;
  color: #fff;
  box-shadow: 0px 0px 22px 1px #222;
}
.hexagon i {
  position: absolute;
  top: 17px;
  right: 17px;
}
.boxContent .boxImage {
  margin-top: -39px;
  margin-bottom: -34px;
}
.boxContent .desc {
  margin-top: 33px;
  color: #00ffff;
  font-size: 12px;
  text-align: justify;
  padding: 10px;
  margin-bottom: 30px;
  font-weight: 100;
}
.boxContent .desc .enter {
  transition: all 0.3s ease;
  width: 44px;
  background: #ffdd2d;
  text-align: center;
  float: left;
  color: #0c0218;
  border-radius: 4px;
  margin-top: 8px;
  margin-bottom: 6px;
  padding: 5px;
  bottom: 0px;
  position: absolute;
  left: 16px;
  cursor: pointer;
}
.boxContent .desc .enter:hover {
  background: #fff;
  color: red;
}
.boxContent {
  background: #1b0b2f;
  border: 2px solid #571a9a;
  padding: 10px;
  border-radius: 23px;
  width: 70%;
  position: relative;
  box-shadow: 0px 0px 5px 1px #000;
  margin-right: 20px;
}
.apps_cont {
  margin-bottom: 80px;
  margin-top: 5%;

  margin-right: -28px;
}
.ifr {
  display: block;
  width: 58%;
  height: 500px;
  border: none;
  border-radius: 25px;
  display: block;
  width: 58%;
  height: 500px;
  border: none;
  border-radius: 25px;
}
.link_cont .version {
  background: #ff0000;
  border-radius: 20px;
  padding-right: 10;
  padding-left: 10;
}
@media screen and (max-width: 600px) {
  .ifr {
    display: block;
    width: 90%;
  }
  .apps_cont {
    display: block;
  }
  .boxContent {
    background: #1b0b2f;
    border: 2px solid #571a9a;
    padding: 10px;
    border-radius: 23px;
    margin-top: 40px;
    position: relative;
    box-shadow: 0px 0px 5px 1px #000;
    margin-right: 20px;
    width: 90%;
  }
}
a {
  color: #fff;
  text-decoration: none;
}
.links_cont {
  display: inline-flex;
  width: 100%;
  margin: auto;
  text-align: center;
}
.link_cont {
  width: 50%;
  background: #0b0413;
  margin: 10px;
  padding: 10px;
  border-radius: 10px;
}
.link_cont img {
  width: auto;
  display: list-item;
  margin: auto;
}
#mubasher_version,
#estra7ah_version {
  text-align: center;
  font-size: 15px;
  background: red;
  width: 85px;
  margin-right: auto;
  margin-left: auto;
  border-radius: 20px;
  color: #fff;
}
.setup_or_update {
  background: red;
  padding: 4px;
  border-radius: 10px;
  padding-left: 14px;
  padding-right: 14px;
}
.modal {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100vh;
  background: #00000087;
  text-align: center;
}
.modal .modal-body {
  background: #36146c;
  width: 70%;
  margin: auto;
  top: 5%;
  position: relative;
  border-radius: 32px;
  padding: 30px;
}
.modal .modal-body ul {
  text-align: right;
}
.modal .btn {
  background: #4b1a9a;
  padding: 20px;
  margin-top: 32px;
  border-radius: 10px;
}
.modal .btn2 {
  background: #cb5252;
  padding: 20px;
  margin-top: 12px;
  border-radius: 10px;
  cursor: pointer;
}
.modal .btn3 {
  background: #25d366;
  padding: 10px;
  margin-top: 12px;
  border-radius: 10px;
  cursor: pointer;
  width: fit-content;
  padding-left: 11px;
  padding-right: 9px;
}
.modal .btn4 {
  background: #3b5998;
  padding: 10px;
  margin-top: 12px;
  border-radius: 10px;
  cursor: pointer;
  width: fit-content;
  margin-right: 10px;
  padding-left: 15px;
  margin-right: 10px;
}
#otherversions {
  width: 63%;
  height: 74px;
  font-size: 20px;
  background: #1b0b2f;
  color: #fff;
  padding: 10px;
  margin-top: 30px;
  margin-bottom: 30px;
  border: 2px solid #571a9a;
  border-radius: 10px;
}
.footer {
  text-align: center;
  color: #a090b3;
  font-weight: 100;
  font-size: 12px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.select-dev {
  width: 63%;
  height: 74px;
  font-size: 20px;
  background: #1b0b2f;
  color: #fff;
  padding: 10px;
  border: 2px solid #571a9a;
  border-radius: 10px;
}