@font-face {
  font-family: MahoneSans;
  src: url(../fonts/MahoneSansBold.ttf);
}

body {
  margin: 0px auto;
}
body * {
  font-family: "Philosopher", sans-serif;
}
.download.d-flex img {
  max-width: 25%;
  object-fit: contain;
}
section.banner {
  min-height: 100vh;
  text-align: center;
  background: url(../images/1920x1080.png);
  background-size: cover;
  margin-top: -225px;
}
.up-arrow img {
  background: #fff;
  border-radius: 100px;
  max-width: 63px;
  position: absolute;
  right: 33px;
  bottom: 0px;
}
section.banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background: rgba(0, 0, 0, 0.3);*/ /* black overlay with 50% opacity */
  z-index: 1;
}
footer {
  position: relative;
}
.dwnld {
  display: flex;
  flex-direction: row;
  align-items: center;
}
button.play-now {
  background: transparent;
  border: none;
  padding: 10px 10px;
  display: inline;
}
button.play-now img {
  max-width: 70%;
}
.banner-text h3 {
  font-family: MahoneSans;
  font-size: 54px;
  color: #fff;
  text-shadow: 0px 8px 0.016px #000, 7.84px 1.68px 0.016px #000,
    3.36px -7.28px 0.016px #000, -6.4px -4.8px 0.016px #000,
    -6.08px 5.2px 0.016px #000, 3.84px 7.04px 0.016px #000,
    7.68px -2.24px 0.016px #000, -0.56px -8px 0.016px #000,
    -7.92px -1.2px 0.016px #000, -2.8px 7.52px 0.016px #000,
    6.72px 4.32px 0.016px #000, 5.68px -5.6px 0.016px #000,
    -4.32px -6.72px 0.016px #000, -7.52px 2.8px 0.016px #000,
    1.12px 7.92px 0.016px #000, 8px 0.64px 0.016px #000,
    2.32px -7.68px 0.016px #000, -6.96px -3.84px 0.016px #000,
    -5.28px 6px 0.016px #000, 4.72px 6.4px 0.016px #000,
    7.28px -3.28px 0.016px #000, -1.68px -7.84px 0.016px #000,
    -8px -0.08px 0.016px #000, -1.76px 7.84px 0.016px #000,
    7.28px 3.36px 0.016px #000, 4.88px -6.4px 0.016px #000,
    -5.2px -6.08px 0.016px #000, -7.04px 3.76px 0.016px #000,
    2.16px 7.68px 0.016px #000, 8px -0.48px 0.016px #000,
    1.2px -7.92px 0.016px #000, -7.44px -2.88px 0.016px #000,
    -4.4px 6.72px 0.016px #000, 5.6px 5.76px 0.016px #000,
    6.8px -4.24px 0.016px #000, -2.72px -7.52px 0.016px #000,
    -7.92px 1.04px 0.016px #000, -0.64px 8px 0.016px #000,
    7.68px 2.32px 0.016px #000, 3.92px -6.96px 0.016px #000,
    -6px -5.36px 0.016px #000, -6.48px 4.72px 0.016px #000,
    3.2px 7.36px 0.016px #000, 7.84px -1.6px 0.016px #000,
    0.16px -8px 0.016px #000, -7.76px -1.84px 0.016px #000,
    -3.44px 7.2px 0.016px #000, 6.32px 4.88px 0.016px #000;
}

section.banner h1 {
  padding: 0px 0px 0px 0px;
  font-size: 134px;
  font-family: MahoneSans;
  color: #fff;
  text-shadow: 0px 8px 0.016px #000, 7.84px 1.68px 0.016px #000,
    3.36px -7.28px 0.016px #000, -6.4px -4.8px 0.016px #000,
    -6.08px 5.2px 0.016px #000, 3.84px 7.04px 0.016px #000,
    7.68px -2.24px 0.016px #000, -0.56px -8px 0.016px #000,
    -7.92px -1.2px 0.016px #000, -2.8px 7.52px 0.016px #000,
    6.72px 4.32px 0.016px #000, 5.68px -5.6px 0.016px #000,
    -4.32px -6.72px 0.016px #000, -7.52px 2.8px 0.016px #000,
    1.12px 7.92px 0.016px #000, 8px 0.64px 0.016px #000,
    2.32px -7.68px 0.016px #000, -6.96px -3.84px 0.016px #000,
    -5.28px 6px 0.016px #000, 4.72px 6.4px 0.016px #000,
    7.28px -3.28px 0.016px #000, -1.68px -7.84px 0.016px #000,
    -8px -0.08px 0.016px #000, -1.76px 7.84px 0.016px #000,
    7.28px 3.36px 0.016px #000, 4.88px -6.4px 0.016px #000,
    -5.2px -6.08px 0.016px #000, -7.04px 3.76px 0.016px #000,
    2.16px 7.68px 0.016px #000, 8px -0.48px 0.016px #000,
    1.2px -7.92px 0.016px #000, -7.44px -2.88px 0.016px #000,
    -4.4px 6.72px 0.016px #000, 5.6px 5.76px 0.016px #000,
    6.8px -4.24px 0.016px #000, -2.72px -7.52px 0.016px #000,
    -7.92px 1.04px 0.016px #000, -0.64px 8px 0.016px #000,
    7.68px 2.32px 0.016px #000, 3.92px -6.96px 0.016px #000,
    -6px -5.36px 0.016px #000, -6.48px 4.72px 0.016px #000,
    3.2px 7.36px 0.016px #000, 7.84px -1.6px 0.016px #000,
    0.16px -8px 0.016px #000, -7.76px -1.84px 0.016px #000,
    -3.44px 7.2px 0.016px #000, 6.32px 4.88px 0.016px #000;
}
header {
  z-index: 999;
  position: relative;
  text-align: center;
  background: transparent;
  padding-top: 23px;
}
img.google-play:hover {
  cursor: pointer;
}
img.pre-btn:hover {
  filter: brightness(1.2);
  cursor: pointer;
}
img.pre-btn {
  margin-top: 20px;
}
header img {
  max-width: 400px;
}
.banner-text {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translate(-50%);
  z-index: 999;
}
.download.d-flex {
  gap: 20px;
  justify-content: center;
  margin-top: 30px;
}
.video-wrapper {
  position: relative;
  width: 733px;
  height: 499px;
  margin: 0px auto;
}
img.video-thumbnail {
  object-fit: cover;
  border-radius: 20px;
}
.video-checkbox {
  display: none;
}

.video-thumbnail,
.video-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-checkbox:not(:checked) ~ .video-iframe {
  display: none;
}

.video-checkbox:checked ~ .video-thumbnail {
  display: none;
}

.label-wrapper {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
section.video-section {
  background: url(../images/video-back.png);
  text-align: center;
  padding: 50px 20px;
  background-attachment: fixed;
  background-size: cover;
  display: none;
}
.hero-inner {
  background: url(../images/hero-inner.png);
  background-size: cover;
  max-width: 1200px;
  margin: 0px auto;
}
img.divider {
  width: 31%;
  margin-bottom: 30px;
}
.image-divider {
  height: 1px;
  background-color: rgb(0 0 0 / 42%);
  margin: 0 auto;
}
h2 {
  color: #fff;
  font-size: 50px;
  font-family: MahoneSans;
  text-shadow: 0px 8px 0.016px #000, 7.84px 1.68px 0.016px #000,
    3.36px -7.28px 0.016px #000, -6.4px -4.8px 0.016px #000,
    -6.08px 5.2px 0.016px #000, 3.84px 7.04px 0.016px #000,
    7.68px -2.24px 0.016px #000, -0.56px -8px 0.016px #000,
    -7.92px -1.2px 0.016px #000, -2.8px 7.52px 0.016px #000,
    6.72px 4.32px 0.016px #000, 5.68px -5.6px 0.016px #000,
    -4.32px -6.72px 0.016px #000, -7.52px 2.8px 0.016px #000,
    1.12px 7.92px 0.016px #000, 8px 0.64px 0.016px #000,
    2.32px -7.68px 0.016px #000, -6.96px -3.84px 0.016px #000,
    -5.28px 6px 0.016px #000, 4.72px 6.4px 0.016px #000,
    7.28px -3.28px 0.016px #000, -1.68px -7.84px 0.016px #000,
    -8px -0.08px 0.016px #000, -1.76px 7.84px 0.016px #000,
    7.28px 3.36px 0.016px #000, 4.88px -6.4px 0.016px #000,
    -5.2px -6.08px 0.016px #000, -7.04px 3.76px 0.016px #000,
    2.16px 7.68px 0.016px #000, 8px -0.48px 0.016px #000,
    1.2px -7.92px 0.016px #000, -7.44px -2.88px 0.016px #000,
    -4.4px 6.72px 0.016px #000, 5.6px 5.76px 0.016px #000,
    6.8px -4.24px 0.016px #000, -2.72px -7.52px 0.016px #000,
    -7.92px 1.04px 0.016px #000, -0.64px 8px 0.016px #000,
    7.68px 2.32px 0.016px #000, 3.92px -6.96px 0.016px #000,
    -6px -5.36px 0.016px #000, -6.48px 4.72px 0.016px #000,
    3.2px 7.36px 0.016px #000, 7.84px -1.6px 0.016px #000,
    0.16px -8px 0.016px #000, -7.76px -1.84px 0.016px #000,
    -3.44px 7.2px 0.016px #000, 6.32px 4.88px 0.016px #000;
}
.more-heroes-text {
  color: #fff;
  font-family: MahoneSans;
  font-size: 24px;
  text-shadow: 0px 4px 0.008px #000, 3.92px 0.84px 0.008px #000,
    1.68px -3.64px 0.008px #000, -3.2px -2.4px 0.008px #000,
    -3.04px 2.6px 0.008px #000, 1.92px 3.52px 0.008px #000,
    3.84px -1.12px 0.008px #000, -0.28px -4px 0.008px #000,
    -3.96px -0.6px 0.008px #000, -1.4px 3.76px 0.008px #000,
    3.36px 2.08px 0.008px #000, 2.84px -2.8px 0.008px #000,
    -2.08px -3.36px 0.008px #000, -3.76px 1.4px 0.008px #000,
    0.56px 3.96px 0.008px #000, 4px 0.32px 0.008px #000,
    1.12px -3.84px 0.008px #000, -3.52px -1.92px 0.008px #000,
    -2.68px 3.04px 0.008px #000, 2.4px 3.2px 0.008px #000,
    3.64px -1.52px 0.008px #000, -0.84px -3.92px 0.008px #000,
    -4px -0.04px 0.008px #000, -0.88px 3.92px 0.008px #000,
    3.64px 1.68px 0.008px #000, 2.44px -3.2px 0.008px #000,
    -2.6px -3.04px 0.008px #000, -3.52px 1.68px 0.008px #000,
    0.96px 3.84px 0.008px #000, 4px -0.24px 0.008px #000,
    0.6px -3.96px 0.008px #000, -3.68px -1.44px 0.008px #000,
    -2.2px 3.36px 0.008px #000, 2.8px 2.84px 0.008px #000,
    3.36px -1.92px 0.008px #000, -1.2px -3.76px 0.008px #000,
    -3.96px 0.48px 0.008px #000, -0.32px 4px 0.008px #000,
    3.84px 1.12px 0.008px #000, 1.96px -3.52px 0.008px #000,
    -3.04px -2.6px 0.008px #000, -3.12px 2.16px 0.008px #000,
    1.44px 3.68px 0.008px #000, 3.92px -0.72px 0.008px #000,
    0.08px -4px 0.008px #000, -3.88px -0.88px 0.008px #000,
    -1.72px 3.64px 0.008px #000, 3.2px 2.36px 0.008px #000;
}
.image-divider {
  height: 0.5px;
  background-color: rgb(0 0 0 / 42%);
  margin: 0 auto;
}
section.gallery-section {
  padding: 50px 20px;
  text-align: center;
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url(../images/slider.png);
  background-size: cover;
}
section.heros {
  padding: 50px 20px;
  text-align: center;
  background: url(../images/heros.png);
  background-size: cover;
}
section.gallery-section .img-slider img {
  border: solid 5px rgba(160, 137, 96, 0.7);
  padding: 7px;
  height: 100%;
}
.slick-arrow {
  position: absolute;
  top: 44%;
  background: unset;
  border: unset;
}
button.custom-prev.slick-arrow {
  left: -90px;
}
.gallery-images {
  position: relative;
  max-width: 900px;
  margin: 0px auto;
}
button.custom-next.slick-arrow {
  right: -90px;
}
ul.slick-dots img {
  border: unset !important;
}
ul.slick-dots {
  bottom: -43px !important;
  display: none !important;
}
div#heroInfo h3#heroName {
  background: url(../images/name-bg.png);
  background-size: contain;
  background-position: center;
  padding: 50px 0px;
  background-repeat: no-repeat;
  max-width: 250px;
  margin: 0px auto;
  font-size: 42px;
}
div#heroInfo p {
  color: #fff;
  font-size: 23px;
  text-shadow: 0px 4.48px 0.0088px #000, 4.39px 0.94px 0.0088px #000,
    1.88px -4.08px 0.0088px #000, -3.58px -2.69px 0.0088px #000,
    -3.41px 2.91px 0.0088px #000, 2.15px 3.94px 0.0088px #000,
    4.3px -1.26px 0.0088px #000, -0.31px -4.48px 0.0088px #000,
    -4.43px -0.67px 0.0088px #000, -1.57px 4.21px 0.0088px #000,
    3.76px 2.42px 0.0088px #000, 3.18px -3.14px 0.0088px #000,
    -2.42px -3.76px 0.0088px #000, -4.21px 1.57px 0.0088px #000,
    0.62px 4.43px 0.0088px #000, 4.48px 0.36px 0.0088px #000,
    1.3px -4.3px 0.0088px #000, -3.9px -2.15px 0.0088px #000,
    -2.96px 3.36px 0.0088px #000, 2.64px 3.58px 0.0088px #000,
    4.08px -1.84px 0.0088px #000, -0.94px -4.39px 0.0088px #000,
    -4.48px -0.05px 0.0088px #000, -0.98px 4.39px 0.0088px #000,
    4.08px 1.88px 0.0088px #000, 2.74px -3.58px 0.0088px #000,
    -2.91px -3.41px 0.0088px #000, -3.94px 2.1px 0.0088px #000,
    1.21px 4.3px 0.0088px #000, 4.48px -0.27px 0.0088px #000,
    0.67px -4.43px 0.0088px #000, -4.17px -1.62px 0.0088px #000,
    -2.46px 3.76px 0.0088px #000, 3.14px 3.22px 0.0088px #000,
    3.81px -2.38px 0.0088px #000, -1.52px -4.21px 0.0088px #000,
    -4.43px 0.58px 0.0088px #000, -0.36px 4.48px 0.0088px #000,
    4.3px 1.3px 0.0088px #000, 2.19px -3.9px 0.0088px #000,
    -3.36px -3px 0.0088px #000, -3.63px 2.64px 0.0088px #000,
    1.79px 4.12px 0.0088px #000, 4.39px -0.9px 0.0088px #000,
    0.09px -4.48px 0.0088px #000, -4.34px -1.03px 0.0088px #000,
    -1.93px 4.03px 0.0088px #000, 3.54px 2.74px 0.0088px #000;
  margin-bottom: 10px;
}
div#heroInfo {
  margin-top: -100px !important;
  z-index: 999999;
  position: relative;
}
.hero-inner.row .col-md-5 {
  padding: 70px 20px 0px 80px;
}
div#imageList img {
  border: 1px solid #fff;
  max-width: 88px;
}

div#imageList {
  display: grid;
  grid-template-columns: auto auto auto auto;
  gap: 20px;
}
img#mainGif {
  max-height: 400px;
  object-fit: contain;
}
img.active {
  border: 3px solid #aa9137 !important;
}
.hero-inner button.custom-prev-hero,
.hero-inner button.custom-next-hero {
  display: none;
}
.icons {
  display: flex;
  justify-content: center;
  gap: 30px;
}
.social-icons .icons img {
  max-width: 113px;
  padding: 17px;
  background: #000;
  border-radius: 400px;
}
.social-icons {
  padding-top: 50px;
}
section.download-app {
  background: url(../images/download-app.png);
  background-size: cover;
  background-position: center;
  padding: 50px 20px;
  text-align: center;
}
footer a {
  font-size: 25px;
  text-decoration: none;
  padding-right: 30px;
}

footer * {
  color: #fff;
}
footer {
  text-align: center;
  padding: 50px 20px;
  background: #000;
}
footer p {
  margin-bottom: 0px;
  margin-top: 20px;
  font-size: 20px;
}
footer img {
  max-width: 300px;
  margin-bottom: 20px;
}
.slick-track img {
  object-fit: cover;
}
.gallery-images {
  max-width: 550px !important;
}

@media screen and (max-width: 767px) {
  section.banner h1 {
    padding: 0px 0px 0px 0px;
    font-size: 30px;
    font-family: MahoneSans;
    color: #fff;
    text-shadow: 0px 8px 0.016px #000, 7.84px 1.68px 0.016px #000,
      3.36px -7.28px 0.016px #000, -6.4px -4.8px 0.016px #000,
      -6.08px 5.2px 0.016px #000, 3.84px 7.04px 0.016px #000,
      7.68px -2.24px 0.016px #000, -0.56px -8px 0.016px #000,
      -7.92px -1.2px 0.016px #000, -2.8px 7.52px 0.016px #000,
      6.72px 4.32px 0.016px #000, 5.68px -5.6px 0.016px #000,
      -4.32px -6.72px 0.016px #000, -7.52px 2.8px 0.016px #000,
      1.12px 7.92px 0.016px #000, 8px 0.64px 0.016px #000,
      2.32px -7.68px 0.016px #000, -6.96px -3.84px 0.016px #000,
      -5.28px 6px 0.016px #000, 4.72px 6.4px 0.016px #000,
      7.28px -3.28px 0.016px #000, -1.68px -7.84px 0.016px #000,
      -8px -0.08px 0.016px #000, -1.76px 7.84px 0.016px #000,
      7.28px 3.36px 0.016px #000, 4.88px -6.4px 0.016px #000,
      -5.2px -6.08px 0.016px #000, -7.04px 3.76px 0.016px #000,
      2.16px 7.68px 0.016px #000, 8px -0.48px 0.016px #000,
      1.2px -7.92px 0.016px #000, -7.44px -2.88px 0.016px #000,
      -4.4px 6.72px 0.016px #000, 5.6px 5.76px 0.016px #000,
      6.8px -4.24px 0.016px #000, -2.72px -7.52px 0.016px #000,
      -7.92px 1.04px 0.016px #000, -0.64px 8px 0.016px #000,
      7.68px 2.32px 0.016px #000, 3.92px -6.96px 0.016px #000,
      -6px -5.36px 0.016px #000, -6.48px 4.72px 0.016px #000,
      3.2px 7.36px 0.016px #000, 7.84px -1.6px 0.016px #000,
      0.16px -8px 0.016px #000, -7.76px -1.84px 0.016px #000,
      -3.44px 7.2px 0.016px #000, 6.32px 4.88px 0.016px #000;
  }
  .banner-text h3 {
    font-family: MahoneSans;
    font-size: 25px;
    color: #fff;
    text-shadow: 0px 8px 0.016px #000, 7.84px 1.68px 0.016px #000,
      3.36px -7.28px 0.016px #000, -6.4px -4.8px 0.016px #000,
      -6.08px 5.2px 0.016px #000, 3.84px 7.04px 0.016px #000,
      7.68px -2.24px 0.016px #000, -0.56px -8px 0.016px #000,
      -7.92px -1.2px 0.016px #000, -2.8px 7.52px 0.016px #000,
      6.72px 4.32px 0.016px #000, 5.68px -5.6px 0.016px #000,
      -4.32px -6.72px 0.016px #000, -7.52px 2.8px 0.016px #000,
      1.12px 7.92px 0.016px #000, 8px 0.64px 0.016px #000,
      2.32px -7.68px 0.016px #000, -6.96px -3.84px 0.016px #000,
      -5.28px 6px 0.016px #000, 4.72px 6.4px 0.016px #000,
      7.28px -3.28px 0.016px #000, -1.68px -7.84px 0.016px #000,
      -8px -0.08px 0.016px #000, -1.76px 7.84px 0.016px #000,
      7.28px 3.36px 0.016px #000, 4.88px -6.4px 0.016px #000,
      -5.2px -6.08px 0.016px #000, -7.04px 3.76px 0.016px #000,
      2.16px 7.68px 0.016px #000, 8px -0.48px 0.016px #000,
      1.2px -7.92px 0.016px #000, -7.44px -2.88px 0.016px #000,
      -4.4px 6.72px 0.016px #000, 5.6px 5.76px 0.016px #000,
      6.8px -4.24px 0.016px #000, -2.72px -7.52px 0.016px #000,
      -7.92px 1.04px 0.016px #000, -0.64px 8px 0.016px #000,
      7.68px 2.32px 0.016px #000, 3.92px -6.96px 0.016px #000,
      -6px -5.36px 0.016px #000, -6.48px 4.72px 0.016px #000,
      3.2px 7.36px 0.016px #000, 7.84px -1.6px 0.016px #000,
      0.16px -8px 0.016px #000, -7.76px -1.84px 0.016px #000,
      -3.44px 7.2px 0.016px #000, 6.32px 4.88px 0.016px #000;
  }
  div#heroInfo {
    margin-top: 0px !important;
  }

  .video-wrapper {
    width: 100%;
    height: 300px;
  }
  img#mainGif {
    width: 100%;
  }
  section.heros ul.slick-dots {
    display: none !important;
  }

  .hero-inner.row .col-md-5 {
    padding: 0px;
  }
  div#imageList {
    display: block !important;
    padding: 25px 30px;
  }
  .left-side .slick-track {
    display: flex;
    gap: 10px;
  }
  .download.d-flex img {
    width: 100%;
    max-width: 122px;
  }
  .banner-text {
    width: 100%;
    padding: 0px 20px;
  }
  section.banner {
    background-position: center;
  }
  .slick-arrow img {
    max-width: 26px !important;
  }
  button.custom-prev.slick-arrow {
    left: -50px;
  }
  button.custom-next.slick-arrow {
    right: -50px;
  }
  .slick-arrow {
    top: 40%;
  }
  section.gallery-section {
    padding: 85px 47px;
  }
  .hero-inner.row .col-md-5 {
    position: relative;
  }
  div#imageList img {
    min-height: 52px;
    object-fit: contain;
  }
  button.custom-next-hero.slick-arrow {
    right: -18px;
  }

  button.custom-prev-hero.slick-arrow {
    left: -18px;
  }
  button.custom-prev-hero.slick-arrow,
  button.custom-next-hero.slick-arrow {
    top: 33%;
  }
  div#heroInfo h3#heroName {
    font-size: 30px;
  }

  header img,
  .banner-text img {
    width: 100% !important;
  }
  h2 {
    font-size: 30px;
  }
  .social-icons .icons img {
    max-width: 100%;
    padding: 4px;
  }
  img.pre-btn {
    width: 100%;
  }
  .icons {
    gap: 10px;
  }
  img.divider {
    width: 100%;
  }
  footer a {
    font-size: 15px;
    padding-right: 10px;
  }
  footer p {
    font-size: 16px;
  }
}