/* Xsolla roles: Sharp Grotesk for display, Graphik for text.
   Cabinet Grotesk and General Sans (Fontshare, free for commercial use) are the stand-ins. */

@font-face {
  font-family: "Cabinet Grotesk";
  src: url("../fonts/xso/cabinet-grotesk-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cabinet Grotesk";
  src: url("../fonts/xso/cabinet-grotesk-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cabinet Grotesk";
  src: url("../fonts/xso/cabinet-grotesk-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/xso/general-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/xso/general-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/xso/general-sans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/xso/general-sans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body,
p,
li,
a,
span,
button,
input,
textarea,
.btn,
.product-tag a,
.lg-tag a,
.breadcrumb-content .breadcrumb li,
.footer-text,
.fw-link a,
.header-top-offer p,
.navigation li a {
  font-family: "General Sans", Graphik, "Avenir Next", "Segoe UI", sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.slider-content h2,
.section-title h2,
.breadcrumb-content h2,
.newsletter-title h2,
.fact-item h2 {
  font-family: "Cabinet Grotesk", "Sharp Grotesk", "General Sans", sans-serif !important;
}

.logo-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.logo-lockup img {
  width: 36px;
  height: 36px;
}

.logo-lockup strong {
  color: #fff;
  font-family: "Cabinet Grotesk", "Sharp Grotesk", sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
}

.header-discuss {
  margin-left: 18px;
}

.navigation li.active > a {
  color: #80eaff;
}

.latest-games-content p,
.about-content p,
.features-head p,
.shop-item .product-content p,
.coming-match-info p {
  color: #d5d5d5;
}

.shop-note,
.brand-note,
.section-note {
  color: #bdbdbd;
  font-size: 14px;
  margin-top: 18px;
}

.inner-copy h3 {
  margin: 28px 0 12px;
}

.inner-copy ul {
  padding-left: 18px;
}

.inner-copy li + li {
  margin-top: 8px;
}

.fact-item .counter-item h2 {
  font-size: 42px;
}

.newsletter-form .btn {
  margin-left: 0;
}

body {
  background: #100d14;
}

.navbar-wrap ul li a {
  padding: 43px 16px;
  font-size: 13px;
}

.breadcrumb-content h2 {
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: -1px;
}

.breadcrumb-content p {
  color: #ededed;
  max-width: 760px;
  margin: 18px auto 0;
  font-weight: 500;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 1000;
  background: #12372f;
  color: #f5f6f4;
  padding: 8px 12px;
}

.skip-link:focus {
  top: 16px;
}

.table,
.table th,
.table td {
  color: #ededed;
  border-color: rgba(255, 255, 255, 0.12);
}

.latest-games-thumb img,
.product-thumb img,
.about-img img,
.features-list-img img {
  width: 100%;
  height: auto;
  display: block;
}

details summary {
  cursor: pointer;
}

details summary h4 {
  display: inline;
}

/* Team XSO palette: near-black, graphite, emerald, off-white, cyan. */
.transparent-header {
  top: 0;
  padding-top: 22px;
}

.menu-style-two .logo {
  margin-right: 36px;
  flex: 0 0 auto;
}

.menu-style-two .navbar-wrap ul li a {
  padding: 15px 16px;
}

.menu-style-two .navbar-wrap ul li:hover > a,
.menu-style-two .navbar-wrap ul li.active > a,
.menu-style-two .navbar-wrap ul li.active:hover > a,
.menu-style-two .navbar-wrap ul li:hover > a:hover {
  color: #f5f6f4 !important;
}

.menu-style-two .navbar-wrap ul li:hover > a::before,
.menu-style-two .navbar-wrap ul li.active > a::before,
.menu-style-two .navbar-wrap ul li.active:hover > a::before {
  opacity: 1 !important;
  background: #12372f !important;
}

.menu-style-two .header-action ul li.header-search a {
  color: #80eaff !important;
  background: #12372f !important;
}

.navbar-wrap ul li a::before {
  background-color: #12372f;
}

.btn:not(.btn-style-two),
.btn:not(.btn-style-two):hover,
.newsletter-form button {
  background-color: #f5f6f4;
  color: #18171c !important;
}

.btn:not(.btn-style-two)::before {
  background-image: none !important;
  background-color: #f5f6f4 !important;
  bottom: 0;
  height: 100%;
}

.btn.btn-style-two,
.btn.btn-style-two:hover {
  color: #18171c !important;
}

.btn.btn-style-two::after {
  background-color: #f5f6f4 !important;
}

.btn.btn-style-two::before {
  background-image: none !important;
  background-color: #80eaff !important;
}

.slider-content h6,
.slider-content h2 span,
.section-title h2 span,
.breadcrumb-content h2 span,
.title-style-three h2 span,
.product-price h5,
.featured-game-content h4 span,
.featured-game-meta i {
  background: transparent !important;
  color: #80eaff !important;
}

.breadcrumb-content .breadcrumb li a {
  color: #f5f6f4;
}

.breadcrumb-content .breadcrumb li.active,
.breadcrumb-content .breadcrumb > .active {
  color: #80eaff;
}

.skip-link {
  background: #12372f;
  color: #f5f6f4;
}

.slider-img.animated {
  animation-duration: 1s;
  animation-delay: 0.4s;
}

.gray-bg,
.blog-area {
  background: #18171c;
}

.released-game-item {
  background: #292d31;
}

.released-games-area .title-style-three h2,
.blog-area .title-style-three h2,
.released-game-content h4,
.released-game-content p,
.released-game-list li,
.blog-post-content h4 a,
.blog-post-content p {
  color: #f5f6f4;
}

.released-game-content h4::before {
  display: none;
}

.released-game-content h4 span {
  color: #80eaff !important;
  background: transparent !important;
}

.featured-game-item::before {
  background-color: rgba(24, 23, 28, 0.9) !important;
}

.featured-game-overlay-content h4,
.featured-game-overlay-content h4 a,
.featured-game-overlay-content h4 a:hover {
  color: #f5f6f4 !important;
}

.featured-game-overlay-content h4 span,
.featured-game-overlay-content .featured-game-meta,
.featured-game-overlay-content .featured-game-meta i {
  color: #80eaff !important;
}

.released-games-area .title-style-three p,
.blog-area .title-style-three p,
.released-game-list li span {
  color: #c9cdc9;
}

@media (prefers-reduced-motion: reduce) {
  .slider-img.animated,
  .rotateme {
    animation: none;
  }
}

.title-style-two::before,
.title-style-three::before,
.title-style-two.text-center::before {
  background-image: none;
  width: 64px;
  height: 3px;
  background-color: #80eaff;
}

.featured-game-area .title-style-three h2,
.featured-game-area .title-style-three.white-title h2,
.inner-about-area .title-style-three h2,
.inner-about-area .title-style-three.white-title h2 {
  color: #f5f6f4;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.4px;
}

.featured-game-area .title-style-three p,
.inner-about-content p,
.inner-about-content p:nth-child(3),
.about-content.xso-copy p,
.about-content.xso-copy p:first-child,
.about-content.xso-copy p:nth-child(2),
.features-head p,
.just-gamers-list-content p,
.xso-note p {
  color: #d8ddd8;
  line-height: 1.7;
}

.about-content.xso-copy {
  padding-right: 12px;
}

.about-content.xso-copy p,
.about-content.xso-copy p:first-child,
.about-content.xso-copy p:nth-child(2),
.inner-about-content p,
.inner-about-content p:nth-child(3) {
  margin-bottom: 18px;
}

.features-item .product-tag a,
.product-content .product-tag a,
.lg-tag a {
  color: #80eaff !important;
}

.features-item .product-tag a::before,
.product-content .product-tag a::before,
.lg-tag a::before {
  background: #292d31 !important;
}

.features-head .btn {
  margin-top: 22px;
}

.features-item .features-list-img {
  margin-left: 0;
  margin-top: 22px;
}

.product-content p {
  line-height: 1.7;
  margin-bottom: 0;
}

.features-head h4,
.product-content h4,
.just-gamers-list-content h5,
.xso-funding h2 {
  color: #f5f6f4;
}

.xso-funding h2 {
  font-size: 42px;
  line-height: 1;
  margin-bottom: 12px;
}

.xso-funding .features-head > span {
  display: block;
  margin-bottom: 14px;
  color: #80eaff;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.xso-card p,
.features-item p {
  margin-bottom: 0;
}

.xso-table th,
.xso-table td {
  padding: 18px 16px;
  vertical-align: top;
}

.xso-table a {
  color: #80eaff;
}

.breadcrumb-content .btn {
  margin-top: 28px;
}

.inner-about-content p {
  font-size: 16px;
}

.newsletter-area .newsletter-wrap {
  margin-top: 0;
  margin-bottom: 0;
}