@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap");

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html {
   font-size: 20px;
   height: 100%;
   font-family: "Montserrat", sans-serif;
   font-weight: 400;
   line-height: 1.4;
   scroll-behavior: smooth;
   background-color: #fff;
   color: #000;
   /* -webkit-user-select: none;
	-ms-user-select: none;
	user-select: none; */
}
body {
   font-size: 1rem;
   height: 100%;
   scroll-behavior: smooth;
   overflow-x: hidden;
   width: 100%;
}
section {
   border-bottom: 3px solid #f5f5f5;
}

.container {
   display: block;
   max-width: 1200px;
   width: 100%;
   margin: 0 auto;
   box-sizing: border-box;
   padding: 10px 20px;
}
.pageLogoBox {
   display: flex;
   width: 100%;
   align-items: flex-start;
}
.pageLogoBox .LogoDetails {
   display: block;
   width: auto;
   margin: 0 7px 0 0;
}
.LogoDetails .LogoImageBox {
   width: 60px;
   height: 60px;
}
.LogoDetails .LogoImageBox img {
   width: 100%;
   height: auto;
}
.LogoDetails .LogoHeading {
   color: #33691e;
   font: 22px/20px "Montserrat", sans-serif;
}
.TagsBox {
   display: flex;
   flex-wrap: wrap;
   width: fit-content;
   align-items: center;
   margin-top: 8px;
}

.TagsBox .LogoTags {
   display: inline-block;
   width: fit-content;
   color: #33691e;
   margin: 5px 5px 5px 0;
   padding: 5px;
   border-radius: 20px;
   background-color: #fff;
   border: 1px solid #d0d0d0;
   font: 11px/15px "Montserrat", sans-serif;
}
.stats-container {
   display: flex;
   flex-wrap: wrap;
   width: 100%;
   box-sizing: border-box;
}
.stats-container .statsDetailCover {
   width: 33%;
   margin: 5px 0;
   box-sizing: border-box;
   position: relative;
   padding: 0 0 0 5px;
}

.statsDetailCover::before {
   color: #0003;
   content: "|";
   font-size: 1.2rem;
   left: 90%;
   position: absolute;
   top: 50%;
   transform: translateY(-80%);
}
.statsDetailCover:last-child::before {
   content: "";
}
.statsDetailCover a {
   color: inherit;
   text-decoration: none;
}
.ratingDiv {
   display: flex;
   align-items: center;
   margin-bottom: 8px;
}
.ratingDiv .rates {
   font-size: 12px;
   font-weight: 700;
   color: black;
   margin: 0;
   padding: 0;
}
.ratingDiv .ratingIcons {
   display: flex;
}
.ratingDiv .ratingIcons i {
   font-size: 12px;
   font-weight: 700;
}
.ratingIcons.downloadDivChild {
   background-color: #000;
   border-radius: 1px;
   height: 16px;
   width: 16px;
}
.DetailDesc {
   margin: -4px 0 0;
   padding: 0;
   font-size: 12px;
   min-width: 82px;
   display: flex;
   color: #7a7a7a;
}

.insatllButton {
   width: 100%;
   background-color: #39875f;
   border: 1px solid #39875f;
   color: #fff;
   text-align: center;
   border-radius: 6px;
   text-decoration: none;
   display: block;
   margin: 5px 0;
   text-transform: uppercase;
   font: 500 14px/18px "Montserrat", sans-serif;
}
.installButtonBox.bottom .insatllButton {
   position: fixed;
   bottom: 0;
   margin: 0;
   border-radius: 0;
}
.button-animation {
   background: linear-gradient(
         121.19deg,
         rgba(133, 239, 49, 0) 25.73%,
         rgba(255, 255, 255, 0.3) 45.27%,
         rgba(133, 239, 49, 0) 62.27%
      ),
      rgba(255, 255, 255, 0);
   position: relative;
   padding: 10px 8px 10px 8px;
   animation-duration: 40s;
   width: 100%;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
   animation-name: placeholder-two;
   animation-timing-function: linear;
   display: flex;
   justify-content: space-around;
   align-items: center !important;
}
@keyframes placeholder-two {
   0% {
      background-position: -10000px 0;
   }
   100% {
      background-position: 10000px 0;
   }
}
.installButtonBox.bottom .insatllButton .button-animation {
   animation-duration: 30s;
}
.MoreBox {
   display: none;
}
.appDescription {
   width: 100%;

   margin: 10px 0;
}
.appDescriptionHeading {
   word-wrap: break-word;
   width: 95%;
   margin-bottom: 1em;
   font: 700 15px/18px "Montserrat", sans-serif;
}
.appDescriptionPara {
   word-wrap: break-word;
   width: 95%;
   margin-bottom: 1em;
   font: 400 12px/15px "Montserrat", sans-serif;
}
.ReadCloseBox {
   width: 100%;
   text-align: center;
}
.ReadClose {
   color: #39875f;
   font: 700 12px/15px "Montserrat", sans-serif;
   cursor: pointer;
}
hr {
   border-top: 0.6px solid #eee;
}

.releaseTable {
   margin: 10px 0 20px;
   width: 100%;
   border-collapse: collapse;
   border-spacing: 0;
}

.releaseTable td {
   text-align: left;
   font-size: 0.8rem;
   padding: 10px 0;
   vertical-align: top;
}
.releaseTable td .tableSpan {
   display: block;
   margin: 0 0 8px;
   color: #4a4a4a;
   font: 600 15px/15px "Montserrat", sans-serif;
}
.releaseTable td p {
   font: 400 13px/13px "Montserrat", sans-serif;
}
.h3 {
   font: 500 19px/23px "Montserrat", sans-serif;
}
.playRating {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
   margin: 0 auto 0 1.5rem;
   max-width: 90%;
   width: 100%;
   padding: 1.2rem 0 1.4rem;
   box-sizing: border-box;
}
.width30 {
   display: flex;
   flex-direction: column;
   margin-top: -4px;
   width: 30%;
}
.width30 .BigRating {
   font-size: 3.3rem;
   font-weight: 400;
}
.reviewCount {
   display: block;
   width: 100%;
}
.reviewCount .reviewSpan {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: flex-start;
}
.reviewCount .reviewPara {
   font: 400 12px/22px "Montserrat", sans-serif;
   margin: 5px 0 0;
}
.reviewSpan i {
   font-size: 12px;
   color: black;
}
.width70 {
   width: 70%;
   display: inline-block;
   margin-top: 2%;
}
.width70 a {
   text-decoration: none;
   color: inherit;
}
.flexBar {
   align-items: center;
   display: flex;
}

.flexBar span {
   font-size: 13px;
   margin-right: 10px;
}
.flexBar .progressBar {
   border-radius: 10px;
   background-color: #bfbfbf4d;
   height: 9px;
   width: 80%;
   overflow: hidden;
}

.progressComplete {
   background-color: #39875f;
   height: 100%;
   border-bottom-right-radius: 4px;
   border-top-right-radius: 4px;
}

.progressComplete.w64 {
   width: 64%;
}
.progressComplete.w16 {
   width: 16%;
}
.progressComplete.w12 {
   width: 12%;
}
.progressComplete.w6 {
   width: 6%;
}
.progressComplete.w2 {
   width: 2%;
}
.mostRate {
   display: flex;
   flex-wrap: wrap;
   width: 100%;
   margin: 8px 0;
}

.gameplay {
   width: 33%;
   margin: 0;
   padding: 4px 0;
   text-align: center;
}
.gameplay .ratingDiv {
   justify-content: center;
}
.LogoTags.mentioned {
   border-radius: 20px;
   color: black;
   padding: 7px 10px;
}
.note {
   font-size: 10px;
   margin: 10px 0;
   color: #7a7a7a;
}
.reviewCover {
   padding: 1rem;
   position: relative;
   border-bottom: 0.6px solid #eee;
}
.profile {
   align-items: center;
   display: flex;
   padding-right: 45px;
}
.initials {
   align-items: center;
   border-radius: 50%;
   box-shadow: 0 1px 2px #8d8d8d;
   color: #fff;
   display: flex;
   height: 30px;
   justify-content: center;
   margin-bottom: 0 !important;
   margin-right: 14px;
   min-width: 30px;
   width: 30px;
   text-transform: capitalize;
   background-color: #1c4d40;
   font-size: 12px;
}
.reviewername {
   font-size: 14px;
}
.appDescriptionPara.m10 {
   margin: 10px 0;
}
.reviewCount.gap10 p {
   font-size: 13px;
   font-weight: 400;
   margin: 0 0 0 5px;
}
.reviewCount.gap10 .reviewSpan i {
   color: #39875f;
}
.gallery_slides {
   display: none !important;
}
.gallery_slides .slide_item {
   background-color: white;
   width: 23%;
   margin: 10px 5px 10px 0;
   height: 100%;
   position: relative;
}

.popup {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 1;
   width: 100%;
   display: none;
   align-items: center;
   justify-content: center;
   height: 100%;
   background: rgb(0 0 0 / 66%);
}
.sliderCover {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 1;
   width: 100%;
   height: 100%;
   background: rgb(0 0 0 / 66%);
   display: none;
}
.gallery_slidesTwo {
   position: relative;
   margin-top: 10vh;
}
.gallery_slidesTwo .slide_item {
   text-align: center;
   margin: 10px 5px 10px 0;
   position: relative;
}

.gallery_slides .slide_item .slide_title {
   display: inline-block;
}

.gallery_slides .slide_item .slide_title img {
   width: 100%;
   height: 100%;
   max-height: 200px;
}
.gallery_slidesTwo .slide_item .slide_title {
   width: 306px !important;
   /* width: 100%; */
   margin: 0 auto;
}
.gallery_slidesTwo .slide_item .slide_title img {
   width: 100%;
   height: auto;
}
.gallery_slidesTwo .slide_item .sliderInstall {
   color: white;
   background-color: #39875f;
   padding: 10px 35px;
   font: 600 14px "Montserrat", sans-serif;
   text-decoration: none;
   display: block;
   width: fit-content;
   margin: 5px auto;
}

.gallery_slidesTwo .slick-dots li button:before {
   opacity: 0.75;
   color: #fff;
   font-size: 8px;
}
.gallery_slidesTwo .slick-dots li.slick-active button:before {
   opacity: 1;
   color: #fff;
   font-size: 8px;
}

.popupbox {
   max-width: 400px;
   width: 100%;
   margin: 0 auto;
   background-color: white;
   color: black;
   border-radius: 15px;
   padding: 15px;
   text-align: center;
   box-shadow: 2px 2px 5px 1px #ddd9d9;
   display: block;
   position: relative;
}
.popupbox a {
   text-decoration: none;
   color: inherit;
}
.popupClose {
   position: absolute;
   top: 1%;
   right: 4%;
   cursor: pointer;
}
.slideClose {
   position: absolute;
   top: 1%;
   right: 4%;
   cursor: pointer;
   z-index: 99999999999999999;
}
.slideClose {
   color: white;
}
.popupClose i {
   color: black;
}
.popup-Para {
   margin-bottom: 1em;
   font: 600 14px/17px "Montserrat", sans-serif;
}
.popup-lightpara {
   margin-bottom: 1em;
   font: 400 12px/14px "Montserrat", sans-serif;
}
.joinButton {
   background-color: #39875f;
   color: white;
   padding: 8px 25px;
   width: 190px;
   margin: 8px auto;
   display: block;
   border-radius: 20px;
   outline: none;
   border: none;
}
.time {
   display: block;
   margin: 5px auto;
   color: #39875f;
}
.popup-img {
   width: 300px;
   margin: auto;
   display: block;
}
.popup-img img {
   width: 100%;
}
.popup h6 {
   font: 600 18px/20px "Montserrat", sans-serif;
}
.desktop {
   display: block !important;
}
.android {
   display: none !important;
}
@media screen and (max-width: 500px) {
   .gallery_slides {
      display: initial !important;
   }
   #gallerySlider {
      margin-top: 8px;
   }
   .desktop {
      display: none !important;
   }
   .android {
      display: block !important;
   }
   .stats-container {
      padding: 20px 0;
   }
   .playRating {
      margin: 0 auto;
   }
   .width30 .BigRating {
      font-size: 2.3rem;
   }
   .ratingDiv .rates {
      margin-right: 4px;
   }
   .gameplay .ratingDiv {
      margin-top: 5px;
   }
   .stats-container .statsDetailCover:nth-child(2) .ratingDiv,
   .stats-container .statsDetailCover:nth-child(2) .DetailDesc,
   .stats-container .statsDetailCover:nth-child(3) .ratingDiv,
   .stats-container .statsDetailCover:nth-child(3) .DetailDesc {
      justify-content: center;
   }
   .stats-container .statsDetailCover::before {
      left: 100%;
   }
}