html {
      scroll-behavior: smooth;
}

body {
      padding: 0;
      margin: 0;
      background-color: #000000;
      color: white;
}

.no-scroll {
      overflow: hidden;
      height: 100vh;
}

@font-face {
      font-family: 'Gotham';
      src: url('/assets/fonts/GOTHAM-BLACK.TTF') format('woff2');
}

@font-face {
      font-family: 'GothamMedium';
      src: url('/assets/fonts/GOTHAM-MEDIUM.TTF') format('woff2');
}

@font-face {
      font-family: 'GothamLight';
      src: url('/assets/fonts/GOTHAM-LIGHT.TTF') format('woff2');
}




.HeroInner,
.WordwidePlayers,
.AboutPOPGame,
.LovePOPGAME,
.Nav_Inner,
.Footer {
      max-width: 1160px;
      margin: 0 auto;
      padding: 0px 10%;
}

nav {
      background-color: black;
      border-bottom: 1px solid #b82bff70;
}

.Nav_Inner {
      padding-top: 25px;
      padding-bottom: 25px;
      display: flex;
      align-items: center;
}

.Nav_items {
      margin-left: 75px;
}

.Nav_items a,
.MobileManu a {
      color: white;
      font-size: 2rem;
      text-decoration: none;
      font-family: 'GothamLight';
      font-weight: 400;
      margin-right: 25px;
}

.Nav_items a:hover {
      font-weight: 800;
}

.Hamburger button {
      background-color: transparent;
      border: none;
}

.Hamburger {
      display: none;
}

.MobileManu {
      display: flex;
      flex-direction: column;
      background-color: black;
      position: absolute;
      width: 50%;
      height: 100%;
      left: -52%;
      top: 0;
      z-index: 9;
      align-items: center;
      padding-top: 150px;
      transition: all 0.5s ease;
}

.MobileManu.active {
      left: 0;
      /* Slide into view */
}

.MobileManu a {
      font-size: 2.8rem;
      font-weight: 600;
      margin-bottom: 25px;
}
.MobileManu a:nth-child(1)
{
      margin-bottom: 50px;
}
.HeroInner {
      padding: 0px 10%;
      z-index: 2;
      position: relative;
      display: flex;
      align-items: center;
}

.SecretEdge .HeroInner {
      height: 84vh;
}

.HeroSection {
      background-image: url(../images/hero-bg.webp);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 0% 35%;
      position: relative;
}


.overley {
      background-image: linear-gradient(to top, #0000008a, transparent);
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 1;
}




.image-wrapper img {
      display: block;
      width: 100%;
      height: auto;
}

.HeadText {
      font-size: 5rem;
      color: white;
      font-family: 'GothamMedium';
      font-weight: 100;
      padding-right: 50px;
      margin-bottom: 25px;
}

.HeadText span {
      color: #89FF00;
}

.HeroInnerLeft {
      width: 50%;
      margin-top: -40px;
}

.DetailText {
      font-family: 'GothamLight';
      color: white;
      font-size: 2.5rem;
      margin-top: 0px;
      line-height: 1.3;
}

.HeroInnerLeft form div {
      display: flex;
      margin-top: 60px;
}

.HeroInnerLeft form input {
      background-color: #ffffff;
      padding: 10px 18px;
      font-size: 2.4rem;
      font-family: 'GothamMedium';
      font-weight: 100;
      color: black;
      border: none;
}

.HeroInnerLeft form input:focus-visible {
      outline: none;
}

.HeroInnerLeft form button {
      border: none;
      background-color: #89FF00;
      color: black;
      font-family: 'GothamMedium';
      font-weight: 100;
      padding: 15px 18px;
      font-size: 2.4rem;
      white-space: nowrap;
      cursor: pointer;
}

.HeroInnerLeft form p {
      font-size: 1.9rem;
      margin-top: 10px;
      font-family: 'GothamLight';
}

.HeroInner .HeroInnerRight {
      width: 65%;
      text-align: center;
      padding-top: 60px;
}

/* .HeroInner .HeroInnerRight
{
      width: 65%;
    text-align: center;
    background-image: url(../images/players-image.webp);
    height: 83vh;
    background-repeat: no-repeat;
    background-size: 75%;
    background-position: 18% 35%;
} */
.HeroInner .HeroInnerRight {

      display: flex;
      align-items: center;

}


.HeroInnerRight img {
      width: 85%;
}



.PlayersValues {
      margin: -165px 0px 0px -90px;
}

.PlayersValues p {
      font-size: 3.2rem;
      font-family: 'GothamMedium';
      margin: 0;
      text-transform: uppercase;
}

.PlayersValues>p:nth-of-type(2) {
      margin-bottom: 15px;
}

.PlayersValues div p:nth-child(2) {
      background-color: #89FF00;
      color: black;
      border-radius: 25px;
      border-top-left-radius: 0px;
      padding: 2px 0px;
      margin-top: 5px;
      font-size: 3rem;
}

.PlayersValues>div:nth-child(2) {
      margin-top: 10px;
}

.WordwidePlayers {
      margin-top: 80px;
}

.PeterVideoSection {
      text-align: center;
      margin-top: 100px;
}

.PeterVideoSection img {
      width: auto;
}

.AboutPOPGame,
.LovePOPGAME {
      margin-top: 180px;
}

.AboutPOPGame .DetailText {
      width: 75%;
}

.LoveContainer {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      column-gap: 50px;
      row-gap: 50px;
}

.LoveContainer>div {
      display: flex;
      align-items: center;
      gap: 20px;
      width: 45%;

}

.LoveContainer div .DetailText {
      font-weight: 800;
      font-family: 'GothamLight';
      margin-bottom: 0;
}

.Footer {
      margin-top: 180px;
      padding-bottom: 50px;
}

.Footer p {
      font-size: 1.5rem;
      color: #6C6C6C;
      width: 80%;
      font-weight: 800;
      font-family: 'GothamLight';
      line-height: 1.4;
}

.SocailMedia {
      margin-top: 40px;
}

.SocailMedia a {
      color: #909090;
      cursor: pointer;
      display: inline-block;
      font-size: 20px;
      margin-right: 17px;
      position: relative;
      text-decoration: none;
}

.SocailMedia a:hover {
      color: white;
}

/********************************************************************
*******************  BONUS PAGE STYLE *********************************
*************************************************************************/


.BonusHeroSection {
      background-image: url(../images/bonus-hero-bg-image.webp);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 0% 15%;
      position: relative;
      padding-top: 50px;
      height: 85vh;
}

.BonusHeroSection .HeroInner {
      z-index: auto;
}

.BonusHeroSection .overley {
      background-image: linear-gradient(to top, #0000001c 20%, #00000036 32%);
      width: 100%;
      top: 0px;
      z-index: 2;
}

.BonusHeroSection .HeroInnerLeft {
      z-index: 4;
}

.BonusHeroSection .HeroInnerRight {
      z-index: 4;
}

.BonusHeroSection .HeroInnerLeft {
      width: 60%;
      margin-top: -80px;
}

.HeadTextMobile,
.PopVipHeroImageTablet,
.PopVipHeroImageMobile,
.HeadTextMobile {
      display: none;
}

.BonusHeroInnerRight img {
      width: 100%;
}

.BonusHeroInnerRight {
      justify-content: end;
      width: 48% !important;
}

.BonusBody .WordwidePlayers {
      margin-top: 50px;
}



.video-container {
      position: relative;
      width: 78%;
      margin: 0 auto;
}

video {
      width: 100%;
      height: auto;
      display: block;
}

.play-button {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #47474787;
      color: white;
      border: none;
      border-radius: 50%;
      width: 80px;
      height: 80px;
      font-size: 2.5rem;
      cursor: pointer;
      z-index: 2;
}

.play-button:focus {
      outline: none;
}


/********************************************************************
*******************  BONUS PAGE STYLE END *********************************
*************************************************************************/



/********************************************************************
*******************  BONUS PAGE STYLE START *********************************
*************************************************************************/
.PopgVip .HeroSection {
      background-image: url(../images/pop-vip-hero-banner.webp);
      background-position: 0% 0%;
}

.PopgVip .HeroSection .HeroInnerRight img {
      width: auto;
}

.PopgVip .HeroSection .HeroInner {
      height: 82vh;
}

.PopgVip .HeroSection .HeroInner .HeroInnerRight {
      justify-content: end;
      padding-top: 0px;
}

.PopgVip .HeroSection .HeroInner .HeroInnerLeft {
      margin-top: 60px;
}

.PopgVip .HeroSection .HeroInner .HeadText {
      padding-right: 0px;
}

/********************************************************************
*******************  BONUS PAGE STYLE END *********************************
*************************************************************************/