@font-face {
  font-family: "Roboto";
  font-weight: 400;
  src: url("../fonts/Roboto-Regular.woff2") format("woff2");
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  font-weight: 700;
  src: url("../fonts/Roboto-Bold.woff2") format("woff2");
  font-style: normal;
  font-display: swap;
}
html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

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

body {
  font-family: "Roboto";
  background-color: #FFFFFF;
  margin-right: auto;
  margin-left: auto;
  min-width: 320px;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: none;
}

p {
  margin: 0;
}

img {
  max-width: 100%;
}

li {
  list-style-type: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3 {
  margin: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
}

button {
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.container {
  max-width: 1230px;
  padding: 0 15px;
  margin-right: auto;
  margin-left: auto;
}

.header {
  background-color: #000;
  padding: 15px 0;
}
.header__flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.header__logo {
  border-right: 1px solid #fff;
  padding-right: 10px;
  color: #FFFFFF;
  max-width: -moz-min-content;
  max-width: min-content;
  text-align: center;
  font-weight: 700;
}
.header__block {
  display: flex;
  align-items: center;
  gap: 30px;
}
.header__nav {
  display: flex;
  align-items: center;
  gap: 15px;
}
.header__nav a {
  text-transform: uppercase;
  color: #FFFFFF;
  transition: color 0.25s ease;
}
.header__nav a:hover {
  color: #f6a91d;
}
.header__lang {
  padding-left: 10px;
  border-left: 1px solid #fff;
}
.header__select {
  background-color: unset;
  border: none;
  color: #FFFFFF;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  transition: color 0.25s ease;
  cursor: pointer;
}
.header__select option {
  color: #000;
}
.header__select:hover {
  color: #f6a91d;
}

.wrapper {
  min-height: 80vh;
  height: 100%;
}

.hero {
  background-image: url(../img/hero-bg.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  padding-top: 80px;
  height: calc(80vh - 85px);
}
.hero .hero__logo {
  width: 354px;
  height: 184px;
}

.store {
  background-color: #123f7d;
  background-image: url(../img/store-bg.webp);
  padding-bottom: 200px;
  position: relative;
}
.store::after {
  content: "";
  background: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
  width: 100%;
  height: 200px;
  position: absolute;
  bottom: 0;
  left: 0;
}
.store h1 {
  text-transform: uppercase;
  text-align: center;
  max-width: 870px;
  font-weight: 400;
  color: #ffc925;
  margin: 0 auto 50px;
  padding-top: 100px;
}
.store__grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.store__card {
  aspect-ratio: 1/1;
  border: 3px solid #b8d5ff;
  border-radius: 8px;
  max-width: 387px;
  width: 100%;
  padding: 20px;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 80%;
  background-color: #0756ae;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  z-index: 2;
}
.store__card button {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.store__card::after {
  content: "";
  background: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
  width: 100%;
  height: 200px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.store__card:hover {
  transform: scale(1.05);
  box-shadow: 0px 0px 40px 9px #96c2fe;
}
.store .store__card:nth-child(1) .store__bg {
  background-image: url(../img/store-4.webp);
  height: 200px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  z-index: 2;
}
.store .store__card:nth-child(2) .store__bg {
  background-image: url(../img/store-2.webp);
  height: 200px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  z-index: 2;
}
.store .store__card:nth-child(3) .store__bg {
  background-image: url(../img/store-3.webp);
  height: 230px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  z-index: 2;
  width: 100%;
  bottom: 0;
}
.store .store__card:nth-child(4) .store__bg {
  background-image: url(../img/store-1.webp);
  height: 200px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  z-index: 2;
}
.store__flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.store__flex .store__hit {
  font-family: "Roboto";
  font-weight: 900;
  font-size: 20px;
  color: #fff;
  background: linear-gradient(90deg, rgb(218, 30, 0) 0%, rgb(255, 69, 10) 100%);
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  text-transform: uppercase;
  max-width: 53px;
  width: 100%;
  text-align: center;
}
.store__flex .store__price {
  font-family: "Roboto";
  font-weight: 900;
  font-size: 20px;
  color: #FFF5E5;
  background: linear-gradient(90deg, rgb(247, 170, 30) 100%, rgb(255, 166, 34) 100%);
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
}

.game {
  padding: 150px 0;
  position: relative;
}
.game .game__block {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 50%;
}
.game .game__block h2 {
  color: #da1e00;
  text-transform: uppercase;
  font-size: 28px;
  font-weight: 400;
}
.game .game__block p {
  font-size: 18px;
  line-height: 150%;
  max-width: 80%;
  color: #000;
}
.game .game__block .game__btns {
  display: flex;
  align-items: center;
  gap: 15px;
}
.game .game__block .game__btns img {
  display: block;
  max-width: 200px;
  width: 100%;
  height: 60px;
  flex-shrink: 0;
}
.game .game__image {
  background-image: url(../img/phone.webp);
  background-repeat: no-repeat;
  background-size: contain;
  max-width: 600px;
  width: 100%;
  min-height: 340px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
}

.char {
  background-color: #000;
  padding: 150px 0;
}
.char .cahr__flex {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
}
.char .cahr__flex img {
  max-width: 480px;
  width: 100%;
  height: 520px;
}
.char .char__block {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 15px;
  max-width: 50%;
}
.char .char__block h2 {
  font-size: 28px;
  line-height: 110%;
  font-weight: 400;
  color: #ffc925;
}
.char .char__block p {
  color: #fff;
  font-size: 20px;
  line-height: 150%;
}

.news {
  padding: 75px 0;
  background-color: #fff;
}
.news h2 {
  text-align: center;
  font-size: 30px;
  font-weight: 400;
  margin-bottom: 30px;
}
.news .swiper-slide {
  max-width: 300px;
}
.news .news__card {
  position: relative;
  flex-shrink: 0;
  max-width: 300px;
  width: 100%;
}
.news .swiper-slide:nth-child(1) .news__img {
  background-image: url(../img/news-2.webp);
}
.news .swiper-slide:nth-child(2) .news__img {
  background-image: url(../img/news-3.webp);
}
.news .swiper-slide:nth-child(3) .news__img {
  background-image: url(../img/news-4.webp);
}
.news .swiper-slide:nth-child(4) .news__img {
  background-image: url(../img/news-5.webp);
}
.news .swiper-slide:nth-child(5) .news__img {
  background-image: url(../img/news-6.webp);
}
.news .swiper-slide:nth-child(6) .news__img {
  background-image: url(../img/news-1.webp);
}
.news .swiper-slide:nth-child(7) .news__img {
  background-image: url(../img/news-7.webp);
}
.news .swiper-slide:nth-child(8) .news__img {
  background-image: url(../img/news-8.webp);
}
.news .swiper-slide:nth-child(9) .news__img {
  background-image: url(../img/news-9.webp);
}
.news .swiper-slide:nth-child(10) .news__img {
  background-image: url(../img/news-10.webp);
}
.news .news__img {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  margin-bottom: 20px;
  max-width: 300px;
  min-height: 400px;
}
.news h3 {
  font-weight: 400;
  text-align: center;
}
.news a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.update {
  background-color: #ffc925;
  background-image: url(../img/update.webp);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 600px 600px;
  padding: 200px 0;
}
.update .update__block {
  max-width: 50%;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.update .update__block h2 {
  color: #000;
  font-weight: 400;
  font-size: 50px;
}
.update .update__block p {
  color: #fff;
  font-size: 20px;
  line-height: 150%;
}
.update .update__block span {
  color: #fff;
  font-size: 20px;
  line-height: 150%;
  text-transform: uppercase;
}
.update .update__links {
  display: flex;
  align-items: center;
  gap: 10px;
}
.update .update__links svg {
  width: 48px;
  height: 48px;
}
.update .update__links svg path {
  transition: fill 0.25s ease;
}
.update .update__links a:hover svg path {
  fill: #fff;
}

.footer {
  background-color: #000;
  padding: 30px 0 200px;
}
.footer .footer__flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #fff;
  margin-bottom: 20px;
}
.footer .footer__block span {
  display: block;
  color: #fff;
  font-size: 18px;
  margin-bottom: 10px;
}
.footer .footer__links {
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer .footer__links svg {
  width: 48px;
  height: 48px;
}
.footer .footer__links svg path {
  fill: #fff;
  transition: fill 0.25s ease;
}
.footer .footer__links a:hover svg path {
  fill: #f6a91d;
}
.footer .footer__btns {
  display: flex;
  align-items: center;
  gap: 15px;
}
.footer .footer__btns img {
  display: block;
  max-width: 200px;
  width: 100%;
  height: 60px;
  flex-shrink: 0;
}
.footer .footer__terms {
  display: flex;
  align-items: center;
  gap: 20px;
  color: #fff;
}
.footer .footer__terms a {
  transition: color 0.25s ease;
}
.footer .footer__terms a:hover {
  color: #f6a91d;
}/*# sourceMappingURL=style.css.map */