*,  *::before, *::after {
  box-sizing: border-box;
}

:root {
  --black: #1A1A1A;
  --white: #FFF;
  --grayWhite: rgba(255, 255, 255, 0.55);
  --orange: #FE8704;
  --red: #EC4C37;
  --darkGreen: #666D73;
  --green: #3A4249;
  --indianRed: #3A4249;
  --mediumDark: #292929;

  --menuBgLight: #F9EEDA;
  --menuBgDark: #1A1A1A;

  --bgLight: #FEFBF3;
  --bgDark: #1A1A1A;

  --grayDark: rgba(0, 0, 0, 0.5);
  --grayLight: rgba(255, 255, 255, 0.5);

  --strokeDark: rgba(0, 0, 0, 0.25);
  --strokeLight: rgba(255, 255, 255, 0.25);

  --background: var(--bgLight);
  --text-color: var(--black);
  --pText-color: var(--black);
  --span-color: var(--white);
  --stroke-color: var(--strokeDark);
  --tagbg-color: var(--grayLight);
  --menu-color: var(--menuBgLight);
  --grayFill-color: var(--grayLight);
  --border-btn-color: var(--indianRed);

  --menu-height: 100px;
  --swiper-bullet-size: 11px;
  --icon-size: 30px;
}

html, body {
  position: relative;
  height: 100%;
  font-size: 16px;

}

html[data-theme="dark"], body[data-theme="dark"] {
    --background: var(--bgDark);
    --text-color: var(--white);
    --pText-color: var(--grayWhite);
    --span-color: var(--grayWhite);
    --stroke-color: var(--strokeLight);
    --tagbg-color: var(--grayDark);
    --menu-color: var(--menuBgDark);
    --grayFill-color: var(--grayDark);
    --border-btn-color: var(--mediumDark);
  }

:is(html[data-theme="dark"] .menu,body[data-theme="dark"] .menu,html[data-theme="dark"] .footer > .footer-container > .footer-top,body[data-theme="dark"] .footer > .footer-container > .footer-top) .logo .logo-light {display: none; }

:is(html[data-theme="dark"] .menu,body[data-theme="dark"] .menu,html[data-theme="dark"] .footer > .footer-container > .footer-top,body[data-theme="dark"] .footer > .footer-container > .footer-top) .logo .logo-dark {display: block;}


html[data-theme="dark"] .hero-shape, body[data-theme="dark"] .hero-shape {
      background: url('../imgs/shape-dark.svg') no-repeat center center;
      background-size: contain;
      background-position: left;
    }

html[data-theme="dark"] .about-child, body[data-theme="dark"] .about-child, html[data-theme="dark"] .careers-child, body[data-theme="dark"] .careers-child {background: var(--mediumDark);}

html[data-theme="dark"] .brands-wrapper, body[data-theme="dark"] .brands-wrapper {background: var(--black);}

body {
  margin: 0;
  padding: 0;
  font-family: "Barlow Condensed", "Roboto", Helvetica, sans-serif;
  background-color: var(--background);
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: "Barlow Condensed";
  text-transform: uppercase;
  line-height: 100%;
  margin: 0;
  color: var(--text-color);
  text-wrap: balance;
}
h1 { font-size: 6.25rem; }
h2 { font-size: 3.75rem; }
h3 { font-size: 3rem; }
h4 { font-size: 2.25rem; }
h5 { font-size: 1.5rem; }
h6 { font-size: 1.125rem; }

p {
  margin: 0;
  font-size: 1.125rem;
  line-height: 150%;
  font-family: Roboto, sans-serif;
  color: var(--text-color);
  text-align: left;
  display: inline-block;
  text-wrap: pretty;
}
span { 
  margin: 0;
  color:var(--span-color); 
}
.content .content-wrapper .game-content .info .game-card span { 
  margin: 0;
  color:var(--text-color); 
}
a { -webkit-tap-highlight-color: transparent; }
a:link, a:visited {
  color: var(--text-color);
  text-decoration: none;
}
a:link:active, a:visited:active {
  color: var(--text-color);
}
ul { padding: 0; }

input, textarea, select {
  border: none;
  outline: none;
  margin: 0;
  font-family: Roboto;
}

.hide { display: none !important;}

.active {
  color: var(--orange) !important;
  outline: none;
  transition: color 0.2s ease;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 3rem;
  border: none;
  border-radius: 44px;
  background: linear-gradient(270deg, #F48C2D 0%, #F3782A 49.5%, #ED5534 100%);
  color: var(--white);
  font-family: Roboto;
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: 0.02rem;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s ease;

  -webkit-tap-highlight-color: transparent;
}
.btn:hover, .btn:focus {
    background: linear-gradient(270deg, #F48C2D 20%, #F3782A 69.5%, #ED5534 120%);
    outline: none;
  }

.theme-toggle {
  --switch-size: 60px;
  --icon-fill: var(--black);
  --icon-fill-hover: var(--orange);
  
  border: none;
  border-radius: 44px;
  width: auto;
  height: var(--switch-size);
  background: linear-gradient(270deg, #F48C2D 0%, #F3782A 49.5%, #ED5534 100%);;
  padding: 0.75rem 2rem 0.75rem 0rem;


  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  outline-offset: 5px;


  transition: all 0.3s ease-out;
}
.theme-toggle > svg {
    inline-size: 100%;
    block-size: 100%;
    stroke-linecap: round;
  }
[data-theme="dark"] .theme-toggle {
    --icon-fill: var(--orange);
    --icon-fill-hover: var(--orange);
    padding: 0.75rem 0rem 0.75rem 2rem;
    background: var(--mediumDark);
  }

.sun-and-moon > :is(.moon, .sun, .sun-beams) {
    transform-origin: center center;
  }

.sun-and-moon > :is(.moon, .sun) {
    fill: var(--icon-fill);

  }

.sun-and-moon > .sun-beams {
    stroke: var(--icon-fill);
    stroke-width: 2px;

  }

[data-theme="dark"] .sun-and-moon > .sun {
      transform: scale(1.75);
    }

[data-theme="dark"] .sun-and-moon > .sun-beams {
      opacity: 0;
    }

[data-theme="dark"] .sun-and-moon > .moon > circle {
      transform: translateX(-7px);
    }


.sun-and-moon > .sun {
    transition: transform .5s var(--ease-elastic-3);
  }

.sun-and-moon > .sun-beams {
    transition: 
      transform .5s var(--ease-elastic-4),
      opacity .5s var(--ease-3)
    ;
  }

.sun-and-moon .moon > circle {
    transition: transform .25s var(--ease-out-5);
  }

@supports (cx: 1) {

.sun-and-moon .moon > circle {
      transition: cx .25s var(--ease-out-5);
  }
    }

[data-theme="dark"] .sun-and-moon > .sun {
      transform: scale(1.75);
      transition-timing-function: var(--ease-3);
      transition-duration: .25s;
    }

[data-theme="dark"] .sun-and-moon > .sun-beams {
      transform: rotateZ(-25deg);
      transition-duration: .15s;
    }

[data-theme="dark"] .sun-and-moon > .moon > circle {
      transition-delay: .25s;
      transition-duration: .5s;
    }

.menu {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  top: 0;
  left: 0;
  padding: 2.8vh 5.8vw;
  height: var(--menu-height);
  width: 100%;
  background-color: var(--menu-color);
  opacity: 0.95;
  z-index: 10;
}
.menu .logo {
    width: 185px;
    height: 52px;
    transition: opacity 0.3s ease-in-out;
  }
.menu .logo .logo-light {display: block;}
.menu .logo .logo-dark {display: none;}
.menu .menu-right {
    display: flex;
    align-items: center;
  }
.menu .menu-right .menu-list {
      display: inline-flex;
      align-items: center;
      gap: 2.8vw;
      list-style: none;
    }
.menu .menu-right .menu-list .menu-links {
        color: var(--text-color);
        font-family: "Roboto";
        font-size: 1rem;
        font-weight: 700;
        line-height: 100%;
        letter-spacing: 0.32px;
        text-transform: uppercase;
        text-wrap: nowrap;
      }
.menu .menu-right .menu-list .menu-links:hover, .menu .menu-right .menu-list .menu-links:focus {
          color: var(--orange);
          outline: none;
          transition: color 0.2s ease;
        }
.menu .menu-right .full-screen-menu {
      display: none;
      position: fixed;
      padding: 8vw;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--bgDark);
      z-index: 50;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
.menu .menu-right .full-screen-menu .menu-list {
        margin: 0;
        height: 50%;
        margin-top: 10vh;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 4rem;
        list-style: none;
        text-align: center;
      }
.menu .menu-right .full-screen-menu .menu-list .menu-links-popup {
          color: var(--white);
          font-family: Roboto;
          font-size: 1.5rem;
          font-weight: 700;
          line-height: 100%;
          letter-spacing: 0.1rem;
          text-transform: uppercase;
          text-decoration: none;
        }
.menu .menu-right .full-screen-menu .menu-footer {
        position: absolute;
        margin: 16vw 8vw;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 2rem;
      }
.menu .menu-right .nav-container {
      display: flex;
      position: relative;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      margin-left: 2.8vw;
      z-index: 100;
    }
.menu .menu-right .nav-container .checkbox {
        position: absolute;
        display: flex;
        height: 100%;
        width: 100%;
        z-index: 5;
        opacity: 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
      }
.menu .menu-right .nav-container .hamburger-lines {
        position: absolute;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        height: 75%;
        z-index: 2;
      }
.menu .menu-right .nav-container .hamburger-lines .line {
          display: block;
          height: 3px;
          width: 100%;
          border-radius: 10px;
          background: var(--text-color);
        }
.menu .menu-right .nav-container .hamburger-lines .line.line1 {
            transform-origin: 0% 0%;
            transition: transform 0.4s ease-in-out;
          }
.menu .menu-right .nav-container .hamburger-lines .line.line2 {
            transition: transform 0.2s ease-in-out;
          }
.menu .menu-right .nav-container .hamburger-lines .line.line3 {
            transform-origin: 0% 100%;
            transition: transform 0.4s ease-in-out;
          }
:is(.menu .menu-right .nav-container) input[type="checkbox"]:checked ~ .hamburger-lines .line.line1, :is(.menu .menu-right .nav-container) input[type="checkbox"]:checked ~ .hamburger-lines .line.line2, :is(.menu .menu-right .nav-container) input[type="checkbox"]:checked ~ .hamburger-lines .line.line3 {
          background: var(--white);
        }
:is(.menu .menu-right .nav-container) input[type="checkbox"]:checked ~ .hamburger-lines .line.line1 {
          transform: rotate(45deg);
        }
:is(.menu .menu-right .nav-container) input[type="checkbox"]:checked ~ .hamburger-lines .line.line2 {
          transform: scaleY(0);
        }
:is(.menu .menu-right .nav-container) input[type="checkbox"]:checked ~ .hamburger-lines .line.line3 {
          transform: rotate(-45deg);
        }
@media screen and (min-width: 1601px) {
.menu {
    --menu-height: 120px;
    padding: 2.8vh 8vw;
}
  }
@media screen and (max-width: 979px) {
    .menu .menu-right .menu-list .menu-links { display: none; }
    .menu .menu-right .nav-container { display: flex !important; }
  }
@media screen and (max-width: 767px) {
.menu {
    padding: 2vh 5.8vw;
}
    .menu .menu-right .menu-list { display: none; }
  }
@media screen and (max-width: 480px) {
.menu {
    --menu-height: 80px;
}
  }
@media screen and (max-width: 600px) {
	.hero {
	  height: 85vh;
	}
}
@media screen and (max-width: 400px) {
	.hero {
	  height: 90vh;
	}
} 
.hero .inner-hero {
    position: relative;
    padding-top: 25.5vh;
  }
.hero .inner-hero .hero-left {
      position: absolute;
      padding: 14vh 9vw 1vh 9vw;
      width: 100%;
      z-index: 2;
    }
.hero .inner-hero .hero-left .switch {
        width: 100px; 
        margin-bottom: 20px;
        cursor: pointer;
      }
.hero .inner-hero .hero-left .hero-text {
        position: relative;
        width: fit-content;
      }
.hero .inner-hero .hero-left .hero-text h1 {
          font-size: clamp(3rem, 10vw + 1rem, 6.25rem);
        }
.hero .inner-hero .hero-left .hero-text h2 {
          font-size: clamp(2rem, 2vw + 2rem, 3.75rem);
        }
.hero .inner-hero .hero-left .hero-text .hero-tag {
          position: absolute;
          margin-top: 8px;
          right: 0;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          padding: 15px 30px;
          border-radius: 50px;
          border: 1px solid var(--stroke-color);
          background: var(--tagbg-color);
          color: var(--text-color);
          font-family: Roboto;
          font-size: 1rem;
          font-weight: 500;
          line-height: 100%;
          letter-spacing: 0.1rem;
          text-transform: uppercase;
        }
.hero .hero-shape {
    position: absolute;
    top: 10%;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2;
    background: url('../imgs/shape-light.svg') no-repeat center center;
    background-size: contain;
    background-position: left;
  }
.hero .swiper-custom .swiper-custom-wrapper {
      --swiper-pagination-bullet-horizontal-gap: 6px;
    }
.hero .swiper-custom .swiper {
      position: relative;
      display: flex;
      padding: 0px 9vw 60px 9vw;
	  margin-bottom: 60px;
      justify-content: flex-end;
      width: 100%;
      /*height: 491px; */
    }
.hero .swiper-custom .swiper-slide {
      display: flex;
      justify-content: flex-end;
      align-items: flex-start;
    }
.hero .swiper-custom .swiper-slide .hero-content {
        position: relative;
        width: 734px;
        height: 441px;
        border-radius: 20px;
        overflow: hidden;
      }
.hero .swiper-custom .swiper-slide .hero-content .hero-img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
.hero .swiper-custom .swiper-slide .hero-content .hero-img-blend {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(to right, var(--grayFill-color) 0%, rgba(255, 255, 255, 0) 50%);
          pointer-events: none;
        }
.hero .swiper-custom .swiper-pagination.swiper-pagination-horizontal {
        position: absolute;
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        z-index: 21;
        right: 5.8vw;
        width: fit-content;
        text-align: center;
        left: 45%;
        top: 96%;
        bottom: auto;
        transform: translateY(-50%);
      }
.hero .swiper-custom .swiper-pagination.swiper-pagination-horizontal .swiper-pagination-bullet {
          display: block;
          width: var(--swiper-bullet-size);
          height: var(--swiper-bullet-size);
          border-radius: var(--swiper-bullet-size);
          opacity: 0.4;
          background: var(--text-color);
          transition: all 0.3s;
        }
.hero .swiper-custom .swiper-pagination.swiper-pagination-horizontal .swiper-pagination-bullet.swiper-pagination-bullet-active {
            opacity: 1;
            width: calc(var(--swiper-bullet-size)*3);
            background: linear-gradient(0deg, #F48C2D 0%, #F3782A 49.5%, #ED5534 100%);
          }
		  
		  
.swiper-wrapper {
	padding-bottom: 4vh;
}		  
		  
		  
		  
.hero .btn-scroll {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 0;
    margin-right: 9vw;
    margin-top: 2.8vh;
    width: 8vh;
    height: 8vh;
    border: 1px solid var(--stroke-color);
    border-radius: 50%;
    cursor: pointer;
    z-index: 5;
    -webkit-tap-highlight-color: transparent;
  }
.hero .btn-scroll .arrow-scroll {
      width: 50%;
      height: 50%;
    }
@media screen and (min-width: 1601px) {
.hero {
    height: 86vh;
}
    .hero .inner-hero .hero-left { padding: 0 13vw; }
    .hero #heroSwiper { padding: 0 13vw; }
    .hero .swiper-custom .swiper-pagination.swiper-pagination-horizontal { right: 10vw; }
    .hero .btn-scroll { margin-right: 13vw; }
  }
@media screen and (max-width: 767px) {
    .hero .inner-hero { padding-top: 13vh; }
    .hero .inner-hero .hero-left .switch { 
      width: 96px;
      --switch-size: 54px;
    }
    .hero .btn-scroll { top: 86vh; width: 6vh; height: 6vh; }
    .hero .swiper-custom .swiper { height: 400px; top: 30vh; }
    .hero .swiper-custom .swiper-slide .hero-content { height: 400px; }
    .hero .swiper-custom .swiper-pagination.swiper-pagination-horizontal { right: 3vw; }
  }
@media screen and (max-width: 480px) {
    .hero .inner-hero .hero-left .hero-text > .hero-tag { padding: 12px 24px; }
  }
@media screen and (max-width: 414px) { 
    .hero .inner-hero { padding-top: 15vh; }
    .hero .inner-hero .hero-left .switch { 
      width: 80px;
      margin-bottom: 12px;
      --switch-size: 44px;
    }
    .hero .inner-hero .hero-left .hero-text > .hero-tag { padding: 10px 20px; }
    .hero .swiper-custom .swiper { height: 100%; top: 30vh; }  /* 350px */
    .hero .swiper-custom .swiper-slide .hero-content { height: 300px; }
    .hero .btn-scroll { top: 87vh; }
  }
@media screen and (max-width: 375px) {
    .hero .btn-scroll { top: 89vh; }
  }
@media screen and (max-width: 350px) {
    .hero .inner-hero { padding-top: 17vh; }
    .hero .inner-hero .hero-left .switch { 
      width: 68px;
      margin-bottom: 10px;
      --switch-size: 40px;
    }
    .hero .inner-hero .hero-left .hero-text > h1 { font-size: clamp(1rem, 10vw + 1rem, 3rem); }
    .hero .swiper-custom .swiper { height: 220px; top: 32vh; }
    .hero .swiper-custom .swiper-slide .hero-content { height: 220px; }
    .hero .btn-scroll { top: 87vh; }
  }

.about-content {
  z-index: 1;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: auto;
  margin-top: 7vh;
  padding: 7.5vh 5.8vw 7.5vh 0;
  text-align: left;
  color: #fff;
}
.about-content .about-child {
    position: absolute;
    top: 0;
    right: 5.8vw;
    border-radius: 0 40px 40px 0;
    background: var(--darkGreen);
    width: 100%;
    height: 100%;
  }
.about-content .about-inner {
    position: absolute;
    top: 0;
    left: 5.8vw;
    background: var(--strokeLight);
    width: 1px;
    height: 100%;
  }
.about-content .about-text {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 36px;
    padding: 0 9vw;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
.about-content .about-text .h2-title {
      position: relative;
      color: #fff;
    }
.about-content .about-text .archer-studio-l-container {
      position: relative;
      padding-left: 48px;
    }
.about-content .about-text .archer-studio-l-container .archer-studio-l-cng-ty-sn-x {
        margin: 0;
        text-wrap: pretty;
      }
.about-content .about-text .archer-studio-l-container .archer-studio-l-cng-ty-sn-x .text-highlight { color: #fe8704; }
.about-content .about-thumb {
    position: relative;
    margin-right: 3.3vw;
    border-radius: 20px;
    width: 374px;
    height: 374px;
    object-fit: cover;
  }
@media screen and (min-width: 1601px) {
.about-content {
    padding-right: 8vw;
}
    .about-content .about-child { right: 8vw; }
    .about-content .about-inner { left: 8vw; }
    .about-content .about-text { padding: 0 5vw 0 13vw; }
    .about-content .about-thumb { width: 450px; height: 450px; }
  }
@media screen and (max-width: 979px) {
.about-content {
    flex-direction: column; gap: 5.5vh;
}
    .about-content .about-thumb { width: 80%; margin-right: 0; }
  }
@media screen and (max-width: 767px) {
.about-content {
    padding-right: 0;
}
    .about-content .about-child { right: 0; border-radius: 0; }
    .about-content .about-inner { display: none; }
    .about-content .about-text { padding: 0 8vw; }
    .about-content .about-text .archer-studio-l-container { padding: 0; }
    .about-content .about-thumb { width: 88.4vw; margin-right: 0; }
  }

.brands-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  top: -7.5vh;
  padding-left: 5.8vw;
  width: 100%;
  height: 352px;
  background-color: var(--green);
  overflow-x: hidden;
}
.brands-wrapper .brands-control {
    display: flex;
    flex-direction: column;
    gap: 1vh;
    z-index: 5;
  }
.brands-wrapper .brands-control .pagination-arrow-btn {
      display: flex;
      justify-content: center;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: 2px solid var(--white);
      opacity: 0.3;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
.brands-wrapper .brands-control .pagination-arrow-btn svg { color: var(--white); }
.brands-wrapper .brands-control .pagination-arrow-btn:hover, .brands-wrapper .brands-control .pagination-arrow-btn:focus {
        opacity: 1;
        background: linear-gradient(270deg, #F48C2D 0%, #F3782A 49.5%, #ED5534 100%);
        border: none;
      }
.brands-wrapper .swiper {
    display: flex;
    align-items: center;
    gap: 3vw;
    padding-top: 7vh;
  }
.brands-wrapper .swiper .swiper-wrapper .swiper-slide .brand-thumb {
      border-radius: 20px;
      width: 100%;
      height: auto;
      object-fit: cover;
    }
@media screen and (min-width: 1601px) {
.brands-wrapper { padding-left: 8vw; height: 420px;
} }
@media screen and (max-width: 414px) {
.brands-wrapper { height: 300px;
} .brands-wrapper .brands-control {width: 12vw;} }
@media screen and (max-width: 375px) {
.brands-wrapper { height: 260px;
} }
@media screen and (max-width: 350px) {
.brands-wrapper { height: 230px;
} }
  
.games {
  margin-top: 7vh;
}
.games .games-section-title {
    display: inline-flex;
    width: 100%;
    padding: 0 9vw;
  }
.games .games-wrapper {
    margin-top: 44px;
  }
.games .games-wrapper #gameSwiper {
      height: 620px;
      padding: 0 9vw;
    }
.games .games-wrapper #gameSwiper .swiper-wrapper {
        padding-left: 3vw;
      }
.games .games-wrapper #gameSwiper .swiper-wrapper .swiper-slide .game-content {
            display: flex;
            justify-content: space-between;
            font-family: Roboto;
            gap: 4vw;
            padding-right: 2vw;
          }
.games .games-wrapper #gameSwiper .swiper-wrapper .swiper-slide .game-content .game-img {
              position: relative;
              border-radius: 20px;
              height: 597px;
              width: 50%;
              object-fit: cover;
              overflow: hidden;
            }
.games .games-wrapper #gameSwiper .swiper-wrapper .swiper-slide .game-content .info {
              width: 50%;
            }
.games .games-wrapper #gameSwiper .swiper-wrapper .swiper-slide .game-content .info .game-type {
                width: fit-content;
                padding: 8px 16px;
                border-radius: 40px;
                border: 1px solid var(--stroke-color);
                text-align: left;
                font-size: 1rem;
                font-weight: 500;
                color: var(--text-color);
                letter-spacing: 0.1em;
                line-height: 150%;
                text-transform: uppercase;
              }
.games .games-wrapper #gameSwiper .swiper-wrapper .swiper-slide .game-content .info .game-card {
                display: flex;
                flex-direction: column;
                gap: 2.5vw;
                margin-top: 1.5vw;
              }
.games .games-wrapper #gameSwiper .swiper-wrapper .swiper-slide .game-content .info .game-card .game-title {
                  font-size: 2.75rem;
                  color: var(--text-color);
                  font-family: 'Barlow Condensed';
                  text-wrap: pretty;
                }
.games .games-wrapper #gameSwiper .swiper-wrapper .swiper-slide .game-content .info .game-card .game-desc { text-wrap: pretty; }
.games .games-wrapper #gameSwiper .swiper-pagination-game.swiper-pagination-horizontal {
          position: absolute;
          display: flex;
          flex-direction: row;
          align-items: flex-end;
          z-index: 21;
          left: 50%;
          width: fit-content;
          text-align: center;
          top: 93%;
          bottom: auto;
          transform: translateY(-50%);
        }
.games .games-wrapper #gameSwiper .swiper-pagination-game .swiper-pagination-bullet {
          display: block;
          width: var(--swiper-bullet-size);
          height: var(--swiper-bullet-size);
          border-radius: var(--swiper-bullet-size);
          opacity: 0.2;
          background: var(--text-color);
          transition: all 0.3s;
        }
.games .games-wrapper #gameSwiper .swiper-pagination-game .swiper-pagination-bullet.swiper-pagination-bullet-active {
            opacity: 1;
            width: calc(var(--swiper-bullet-size)*3);
            background: linear-gradient(0deg, #F48C2D 0%, #F3782A 49.5%, #ED5534 100%);
          }
.games .games-wrapper .swiper-fade .swiper-slide { background: var(--background); }
@media screen and (min-width: 1601px) {
    .games .games-section-title { padding: 0 13vw; }
    .games .games-wrapper #gameSwiper { padding: 0 13vw; }
    .games .games-wrapper #gameSwiper .swiper-pagination-game.swiper-pagination-horizontal { left: 13vw; }
    .games .games-wrapper #gameSwiper .swiper-wrapper .swiper-slide .game-content .game-img { width: 40%; }
    .games .games-wrapper #gameSwiper .swiper-wrapper .swiper-slide .game-content .info { width: 60%; }
  }
@media screen and (max-width: 767px) {
.games {
    margin-top: 15px;

}
    .games .games-wrapper #gameSwiper { min-height: 95vh; }
    .games .games-wrapper #gameSwiper .swiper-wrapper { 
      padding-left: 0;
    } 

      .games .games-wrapper #gameSwiper .swiper-wrapper .swiper-slide .game-content { 
        flex-direction: column; 
        padding-right: 0;
      }

        .games .games-wrapper #gameSwiper .swiper-wrapper .swiper-slide .game-content .game-img { width: 100%; height: 400px; }
        .games .games-wrapper #gameSwiper .swiper-wrapper .swiper-slide .game-content .info { width: 100%; padding-top: 10px;}
        .games .games-wrapper #gameSwiper .swiper-wrapper .swiper-slide .game-content .info .game-card .game-title { font-size: 2.6rem; }    

    .games_bak .games-wrapper #gameSwiper .swiper-pagination-game.swiper-pagination-horizontal { 
      left: auto; 
      right: 3vw; 
      top: 20%;
    }
	.games .games-wrapper #gameSwiper .swiper-pagination-game.swiper-pagination-horizontal { 
     left: 40%;
     top: 43%;
    }
	
  }
@media screen and (max-width: 480px) {
    .games .games-wrapper #gameSwiper .swiper-wrapper .swiper-slide .game-content .info .game-card .game-title { font-size: 2.2rem; }
  }
@media screen and (max-width: 414px) {
    .games .games-wrapper #gameSwiper { min-height: 113vh; }
  }
@media screen and (max-width: 375px) {
    .games .games-wrapper #gameSwiper { min-height: 128vh; }
  }
@media screen and (max-width: 350px) {
    .games .games-wrapper #gameSwiper { min-height: 145vh; }
  }


.careers {
  z-index: 1;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: auto;
  margin-top: 7vh;
  padding: 7.5vh 5.8vw 7.5vh 0;
  text-align: left;
}
.careers .careers-child {
    position: absolute;
    top: 0px;
    right: 5.8vw;
    border-radius: 0px 40px 40px 0px;
    background: var(--indianRed);
    width: 100%;
    height: 100%;
  }
.careers .careers-inner {
    position: absolute;
    top: 0;
    left: 5.8vw;
    background: var(--strokeLight);
    width: 1px;
    height: 100%;
  }
.careers .careers-container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 36px;
    padding: 11vh 3.5vw 0 9vw;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
  }
.careers .careers-container .careers-title {
      display: flex;
      justify-content: space-between;
      gap: 6.6vw;
    }
.careers .careers-container .careers-title .h2-title {
        position: relative;
        color: #fff;
      }
.careers .careers-container .line-horizon {
      width: 100%;
      height: 1px;
      background: var(--strokeLight);
    }
.careers .careers-container .careers-content {
      position: relative;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      gap: 3.8vw;
    }
.careers .careers-container .careers-content .jobs, .careers .careers-container .careers-content .contact {
        width: 50%;
        position: relative;
      }
.careers .careers-container .careers-content .jobs .normal-btn.btn, .careers .careers-container .careers-content .contact .normal-btn.btn {
          position: relative;
          transform: translateX(-100%);
          left: 100%;
          background: linear-gradient(270deg, #F48C2D 0%, #F3782A 49.5%, #ED5534 100%);
          border: 1px solid rgba(255, 255, 255, 0.33);
          -webkit-tap-highlight-color: transparent;
        }
.careers .careers-container .careers-content .jobs .normal-btn.btn:hover, .careers .careers-container .careers-content .contact .normal-btn.btn:hover, .careers .careers-container .careers-content .jobs .normal-btn.btn:focus, .careers .careers-container .careers-content .contact .normal-btn.btn:focus {
            background: linear-gradient(270deg, #F48C2D 0%, #F3782A 49.5%, #ED5534 100%);
            outline: none;
            border: 1px solid var(--border-btn-color);
          }
.careers .careers-container .careers-content .jobs .h3-title, .careers .careers-container .careers-content .contact .h3-title {
          font-family: 'Barlow Condensed';
          color: #f48c2d; /* rgba(255, 255, 255, 0.33); */
          text-transform: none;
        }
.careers .careers-container .careers-content .jobs .jobs-frame, .careers .careers-container .careers-content .contact .jobs-frame {
          display: flex;
          flex-direction: column;
          gap: 1.4vw;
          margin-top: 44px;
          margin-bottom: 36px;
        }
.careers .careers-container .careers-content .jobs .jobs-frame .job-devider, .careers .careers-container .careers-content .contact .jobs-frame .job-devider {
            width: 100%;
            height: 1px;
            background: #FE8704;
          }
.careers .careers-container .careers-content .jobs .jobs-frame .job-row, .careers .careers-container .careers-content .contact .jobs-frame .job-row {
            display: inline-flex;
            align-items: center;
            justify-content: space-between;
            gap: 1.5vw;
            color: var(--white);
          }
.careers .careers-container .careers-content .jobs .jobs-frame .job-row > a, .careers .careers-container .careers-content .contact .jobs-frame .job-row > a {
              color: var(--white);
            }
.careers .careers-container .careers-content .jobs .jobs-frame .job-row > a:hover, .careers .careers-container .careers-content .contact .jobs-frame .job-row > a:hover, .careers .careers-container .careers-content .jobs .jobs-frame .job-row > a:focus, .careers .careers-container .careers-content .contact .jobs-frame .job-row > a:focus {
                color: var(--orange);
                transition: color 0.2s ease;
              }
.careers .careers-container .careers-content .jobs .jobs-frame .job-row .h6-title, .careers .careers-container .careers-content .contact .jobs-frame .job-row .h6-title {
              font-family: 'Roboto';
              text-transform: uppercase;
              margin: 0;
            }
.careers .careers-container .careers-content .jobs .jobs-frame .job-row .job-info, .careers .careers-container .careers-content .contact .jobs-frame .job-row .job-info {
              display: inline-flex;
              gap: 0.7vw;
            }
.careers .careers-container .careers-content .jobs .jobs-frame .job-row .job-info .icon-text, .careers .careers-container .careers-content .contact .jobs-frame .job-row .job-info .icon-text {
                display: inline-flex;
                gap: 0.3vw;
                width: max-content;
                min-width: 125px;
              }
.careers .careers-container .careers-content .jobs .jobs-frame .job-row .job-info .icon-text .job-icon, .careers .careers-container .careers-content .contact .jobs-frame .job-row .job-info .icon-text .job-icon {
                  max-height: 36px;
                }
.careers .careers-container .careers-content .jobs .jobs-frame .job-row .job-info .icon-text .job-info-text, .careers .careers-container .careers-content .contact .jobs-frame .job-row .job-info .icon-text .job-info-text {
                  color: var(--white);
                  font-size: 1rem;
                }
.careers .careers-container .careers-content .jobs .contact-container, .careers .careers-container .careers-content .contact .contact-container {
          margin-top: 44px;
        }
.careers .careers-container .careers-content .jobs .contact-container .contact-form, .careers .careers-container .careers-content .contact .contact-container .contact-form {
            display: flex;
            flex-direction: column;
            gap: 1.4vw;
          }
.careers .careers-container .careers-content .jobs .contact-container .contact-form .inputs-info, .careers .careers-container .careers-content .contact .contact-container .contact-form .inputs-info {
              display: inline-flex;
              gap: 12px;
              justify-content: space-between;
            }
.careers .careers-container .careers-content .jobs .contact-container .contact-form .contact-inputs, .careers .careers-container .careers-content .contact .contact-container .contact-form .contact-inputs {
              width: 100%;
              border: none;
              outline: none;
              padding: 13px 20px;
              border-radius: 10px;
              font-size: 1rem;
              color: var(--text-color);
              background-color: var(--background);
            }
.careers .careers-container .careers-content .jobs .contact-container .contact-form .contact-inputs:focus, .careers .careers-container .careers-content .contact .contact-container .contact-form .contact-inputs:focus {
                border: 4px solid var(--orange);
              }
.careers .careers-container .careers-content .jobs .contact-container .contact-form textarea, .careers .careers-container .careers-content .contact .contact-container .contact-form textarea {
              height: 110px;
              margin-bottom: 16px;
            }
.careers .careers-container .careers-content .jobs .contact-container .contact-form .normal-btn.btn, .careers .careers-container .careers-content .contact .contact-container .contact-form .normal-btn.btn {
              width: fit-content;
            }
.careers .careers-container .careers-content .jobs .contact-container .contact-form select, .careers .careers-container .careers-content .contact .contact-container .contact-form select {
              appearance: auto;
            }
@media screen and (min-width: 1601px) {
.careers {
    margin-top: 14vh;
}
    .careers .careers-inner { left: 8vw; }
    .careers .careers-container { padding: 0 3.5vw 0 13vw; }
    .careers .careers-container .careers-title .h2-title { width: 76%; }
    .careers .careers-container .careers-content .contact .contact-container .contact-form { gap: 2vw; }
  }
@media screen and (max-width: 979px) { 
      .careers .careers-container .careers-title, .careers .careers-container .careers-content { flex-direction: column; }
      .careers .careers-container .careers-content .jobs, .careers .careers-container .careers-content .contact { width: 100%; }
  }
@media screen and (max-width: 767px) {
.careers {
    padding: 7.5vh 0;
}
    .careers .careers-container { padding: 0 8vw; }
    .careers .careers-inner { display: none; }
    .careers .careers-child { right: 0; border-radius: 0; }
  }
@media screen and (max-width: 480px) {
    .careers .careers-container .careers-content { 
      gap: 36px;
    } 

      .careers .careers-container .careers-content .jobs .jobs-frame { 
        gap: 3vw;
      } 

        .careers .careers-container .careers-content .jobs .jobs-frame .job-row {
          flex-direction: column;
          align-items: flex-start;
        }
        .careers .careers-container .careers-content .jobs .jobs-frame .job-row .job-info {
          justify-content: space-between;
          width: 100%;
        }
        .careers .careers-container .careers-content .jobs .jobs-frame .job-row .job-info .icon-text { gap: 1.5vw; }
    .careers .careers-container .careers-content .contact .contact-container .contact-form { gap: 3vw; }
  }
@media screen and (max-width: 375px) {
    .careers .careers-container .careers-content .jobs .jobs-frame .job-row .job-info .icon-text { gap: 0.3vw; }
  }
@media screen and (max-width: 350px) {
    .careers .careers-container .careers-content .jobs .jobs-frame .job-row .job-info .icon-text { display: none; }
  }

.gallery {
  margin-top: 7vh;
}
.gallery .gallery-section-title {
    display: inline-flex;
    width: 100%;
    padding: 0 9vw;
  }
.gallery .gallery-wrapper {
    margin-top: 44px;
	margin-bottom: 44px;
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 5.8vw;
    width: 100%;
    overflow: hidden;
  }
.gallery .gallery-wrapper .gallery-control {
      display: flex;
      flex-direction: row-reverse;
      gap: 1vh;
      z-index: 5;
	  position: absolute;
	  top: 85%;
	  left: 45%;
    }
.gallery .gallery-wrapper .gallery-control .pagination-arrow-btn {
        display: flex;
        justify-content: center;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: 2px solid var(--text-color);
        opacity: 0.3;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
      }
.gallery .gallery-wrapper .gallery-control .pagination-arrow-btn svg { color: var(--text-color); }
.gallery .gallery-wrapper .gallery-control .pagination-arrow-btn:hover, .gallery .gallery-wrapper .gallery-control .pagination-arrow-btn:focus {
          opacity: 1;
          background: linear-gradient(270deg, #F48C2D 0%, #F3782A 49.5%, #ED5534 100%);
          border: none;
        }
.gallery .gallery-wrapper .gallery-control .pagination-arrow-btn:hover svg, .gallery .gallery-wrapper .gallery-control .pagination-arrow-btn:focus svg { color: var(--white); }
.gallery .gallery-wrapper .swiper {
      display: flex;
      align-items: center;
      gap: 3vw;
      padding-top: 7vh;
	  padding-bottom: 12vh;
    }
.gallery .gallery-wrapper .swiper .swiper-wrapper .swiper-slide {
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
      }
:is(.gallery .gallery-wrapper .swiper .swiper-wrapper .swiper-slide) :hover ~ .gallery-info > .gallery-title, :is(.gallery .gallery-wrapper .swiper .swiper-wrapper .swiper-slide) :focus ~ .gallery-info > .gallery-title {
          color: var(--orange);
        }
:is(.gallery .gallery-wrapper .swiper .swiper-wrapper .swiper-slide) :hover ~ .gallery-info > .gallery-icon, :is(.gallery .gallery-wrapper .swiper .swiper-wrapper .swiper-slide) :focus ~ .gallery-info > .gallery-icon {
          color: var(--orange);
        }
.gallery .gallery-wrapper .swiper .swiper-wrapper .swiper-slide .gallery-thumb {
        border-radius: 20px;
        height: 222px;
        width: 100%;
        object-fit: cover;
      }
.gallery .gallery-wrapper .swiper .swiper-wrapper .swiper-slide .gallery-info {
          position: relative;
          margin-top: 1.5vh;
          width: 100%;
          display: flex;
          align-items: flex-start;
          justify-content: flex-start;
          gap: 0.6vw;
        }
.gallery .gallery-wrapper .swiper .swiper-wrapper .swiper-slide .gallery-info .gallery-icon {
            width: 10%;
            color: var(--text-color);
            margin: 0 0 auto 0;
            inline-size: var(--icon-size);
            block-size: var(--icon-size);
            aspect-ratio: 1;
          }
.gallery .gallery-wrapper .swiper .swiper-wrapper .swiper-slide .gallery-info .gallery-title {
            width: 90%;
            text-transform: capitalize;
            font-size: 1.5rem;
            color: var(--text-color);
            font-family: 'Barlow Condensed';
            text-align: left;
            text-wrap: pretty;
          }

.full-img {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;

  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.full-img .img-container {
    width: 100%;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    align-items: flex-end;
    gap: 1vw;
    z-index: 50;
  }
.full-img .img-container .x-icon {
      display: flex;
      width: 36px;
      height: 36px;
      color: white;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
.full-img .img-container .x-icon :hover, .full-img .img-container .x-icon :focus { color: var(--orange); }
.full-img .img-container .full-img-slide {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
.full-img .img-container .full-img-slide img {
        display: flex;
        width: 80%;
      }
.full-img .img-container .full-img-slide #fullImgPrev, .full-img .img-container .full-img-slide #fullImgNext {
        color: white;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
      }
.full-img .img-container .full-img-slide #fullImgPrev :hover, .full-img .img-container .full-img-slide #fullImgNext :hover, .full-img .img-container .full-img-slide #fullImgPrev :focus, .full-img .img-container .full-img-slide #fullImgNext :focus { color: var(--orange); }
.full-img .bg-full {
    position: absolute;
    background: rgba(0, 0, 0, 0.9);
    width: 100%;
    height: 100vh;
    z-index: 40;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
@media screen and (max-width: 480px) { 
    .full-img .img-container { 
      gap: 3vw;
    } 
      .full-img .img-container .x-icon { width: 24px; height: 24px; }
  }

.footer {
  display: block;
  margin-top: 7.5vh;
  padding: 4vw 5.8vw;
  background: var(--menu-color);
}
.footer .footer-container {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 24px;
    color: var(--text-color);
    font-family: Roboto;
  }
.footer .footer-container .footer-top {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: space-between;
      
    }
.footer .footer-container .footer-top .logo {
        width: 185px;
        height: 52px;
        transition: opacity 0.3s ease-in-out;
      }
.footer .footer-container .footer-top .logo .logo-light {display: block;}
.footer .footer-container .footer-top .logo .logo-dark {display: none;}
.footer .footer-container .footer-top .footer-nav {
        display: flex;
        gap: 16px;
        justify-content: space-between;
      }
.footer .footer-container .footer-top .footer-nav .menu-links {
          font-family: "Roboto";
          font-size: 1rem;
          font-weight: 700;
          line-height: 100%;
          letter-spacing: 0.32px;
          text-transform: uppercase;
          text-wrap: nowrap;
        }
.footer .footer-container .footer-top .footer-nav .menu-links:hover, .footer .footer-container .footer-top .footer-nav .menu-links:focus { color: var(--orange); }
.footer .footer-container .footer-top .footer-follow-us {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 2vw;
      }
.footer .footer-container .footer-top .footer-follow-us .footer-email {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 1vw;
        }
.footer .footer-container .footer-top .footer-follow-us .footer-email > p {
           
            text-overflow: ellipsis;
            white-space: nowrap;
          }
.footer .footer-container .footer-top .footer-follow-us .footer-email > p:hover, .footer .footer-container .footer-top .footer-follow-us .footer-email > p:focus { color: var(--orange); }
.footer .footer-container .footer-top .footer-follow-us .footer-socials {
          width: 36%;
          display: flex;
          align-items: center;
          gap: 1vw;
          justify-content: space-between;
        }
.footer .footer-container .footer-top .footer-follow-us .footer-email > .icon, .footer .footer-container .footer-top .footer-follow-us .footer-socials > a > .icon {
          color: var(--text-color);
          margin: auto;
          width: auto;
          height: var(--icon-size);
          inline-size: var(--icon-size);
          block-size: var(--icon-size);
          aspect-ratio: 1;
        }
:is(.footer .footer-container .footer-top .footer-follow-us .footer-email > .icon,.footer .footer-container .footer-top .footer-follow-us .footer-socials > a > .icon):hover, :is(.footer .footer-container .footer-top .footer-follow-us .footer-email > .icon,.footer .footer-container .footer-top .footer-follow-us .footer-socials > a > .icon):focus {
            color: var(--orange);
          }
:is(.footer .footer-container .footer-top .footer-follow-us .footer-email > .icon,.footer .footer-container .footer-top .footer-follow-us .footer-socials > a > .icon) > svg {
            inline-size: 100%;
            block-size: 100%;
            stroke-linecap: round;
          }
.footer .footer-container .devider-line {
      width: 100%;
      height: 1px;
      background: var(--text-color);
      opacity: 0.5;
    }
.footer .footer-container .footer-bot {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: space-between;
    }
.footer .footer-container .footer-bot .copyright {
        font-size: 0.875rem;
        text-transform: uppercase;
        color: var(--text-color);
        opacity: 0.5;
      }
.footer .footer-container .footer-bot .address {
        font-size: 0.875rem;
        color: var(--text-color);
      }
@media screen and (max-width: 1200px) {
    .footer .footer-container .footer-top .footer-follow-us {
      flex-direction: column;
      align-items: flex-end;
    }

      .footer .footer-container .footer-top .footer-follow-us .footer-socials {
        width: 100%;
        justify-content: end;
        gap: 2vw;
      }
  }
@media screen and (max-width: 1030px) {
    .footer .footer-container .footer-top .footer-follow-us {
      flex-direction: row;
      align-items: center ;
      gap: 2vw;
    }

      .footer .footer-container .footer-top .footer-follow-us .footer-email p { 
       
      }
  }
@media screen and (max-width: 979px) {
    .footer .footer-container .footer-top .footer-nav {
      display: none;
    }
    .footer .footer-container .footer-bot {
      flex-direction: column;
      align-items: flex-start;  
      gap: 1vw;
    }
  }
@media screen and (max-width: 480px) {
.footer {
    padding: 6vw 5.8vw;
}

    .footer .footer-container .footer-bot {
      gap: 2vw;
    }
  }
@media screen and (max-width: 430px) {
    .footer .footer-container .footer-top {
      flex-direction: column;
      gap: 4vw;
    }
    .footer .footer-container .footer-bot {
      align-items: center;
      gap: 4vw;
    }

      .footer .footer-container .footer-bot b, .footer .footer-container .footer-bot p {
        text-align: center;
      }
  }
@media screen and (max-width: 414px) {
.footer { padding: 8vw 5.8vw;
} }
@media screen and (max-width: 350px) {
.footer { 
    padding: 10vw 5.8vw;
} 
    .footer .footer-container .footer-top { gap: 6vw; }
  }
      
@media screen and (min-width: 1601px) {
  html { font-size: 18px; } 
  body { --icon-size: 36px;}
}


@media screen and (max-width: 767px) {
  .h2-title, .h3-title { font-size: 2.6rem; }
}

@media screen and (max-width: 480px) {
  body { --icon-size: 28px;}
  p { font-size: 1rem; }
  .normal-btn.btn, .game-card .btn { width: 80% !important; align:center }
}

@media screen and (max-width: 414px) { 
  .h2-title, .h3-title { font-size: 2.2rem; }
}

@media screen and (max-width: 375px) {
 :root { --swiper-bullet-size: 10px; }
 body { --icon-size: 26px;}
}

@media screen and (max-width: 350px) {
  html { font-size: 14px; }
  body { --icon-size: 24px;}
  .h2-title, .h3-title { font-size: 1.8rem; }
}