:root{
  --rich-black-fogra-29_95:hsla(222, 18%, 11%, 0.95);
  --raisin-black-1:hsl(0, 0%, 16%);
  --raisin-black-2:hsl(236, 17%, 17%);
  --raisin-black-3:hsl(280, 11%, 11%);
  --raisin-black-4:hsl(280, 8%, 15%);
  --english-violet:hsl(274, 21%, 23%);
  --eerie-black-1:hsl(277, 25%, 10%);
  --eerie-black-2:hsl(280, 7%, 8%);
  --roman-silver:hsl(220, 6%, 59%);
  --quick-silver:hsl(0, 1%, 65%);
  --light-gray-1:hsl(0, 0%, 80%);
  --light-gray-2:hsl(0, 2%, 82%);
  --marigold_75:hsla(42, 99%, 46%, 0.75);
  --xiketic_90:hsla(280, 37%, 8%, 0.9);
  --cultured-2:hsl(0, 0%, 97%);
  --marigold:hsl(42, 99%, 46%);
  --platinum:hsl(0, 0%, 89%);
  --dim-gray:hsl(0, 0%, 42%);
  --white_15:hsla(0, 0%, 100%, 0.15);
  --white_10:hsla(0, 0%, 100%, 0.1);
  --xiketic:hsl(277, 25%, 10%);
  --silver:hsl(0, 0%, 78%);
  --white:hsl(0, 0%, 100%);
  --jet:hsl(236, 13%, 23%);
  --ff-oxanium:'Oxanium',cursive;
  --ff-poppins:'Poppins',sans-serif;
  --fs-1:7rem;
  --fs-2:4.5rem;
  --fs-3:3.6rem;
  --fs-4:2.4rem;
  --fs-5:2.2rem;
  --fs-6:2rem;
  --fs-7:1.6rem;
  --fs-8:1.5rem;
  --fs-9:1.4rem;
  --fs-10:1.3rem;
  --fs-11:1.2rem;
  --fw-500:500;
  --fw-600:600;
  --fw-700:700;
  --fw-800:800;
  --section-padding:120px;
  --gradient:radial-gradient(circle, hsl(250, 7%, 17%), hsl(250, 11%, 11%));
  --shadow-1:0px 2px 8px 0px hsla(0, 0%, 0%, 0.2),inset 0px 2px 8px 0px hsla(0, 0%, 0%, 0.4);
  --shadow-2:0px 5px 10px 1px hsla(0, 0%, 0%, 0.4);
  --shadow-3:0px 5px 10px 1px hsla(219, 98%, 17%, 0.2);
  --shadow-4:0px 5px 10px 1px hsla(0, 0%, 0%, 0.15);
  --transition:0.25s ease;
  --cubic-out:cubic-bezier(0.33, 0.85, 0.4, 0.96)
}
*,::after,::before{
  margin:0;
  padding:0;
  box-sizing:border-box
}
li{
  list-style:none
}
a{
  text-decoration:none;
  color:inherit
}
a,button,img,ion-icon,span,time{
  display:block
}
img{
  height:auto
}
button{
  background:0 0;
  border:none;
  font:inherit
}
button{
  cursor:pointer
}
ion-icon{
  pointer-events:none
}
html{
  font-family:var(--ff-poppins);
  font-size:10px;
  scroll-behavior:smooth
}
body{
  background-color:#2d2e40;
  background-image: url(images/overlay.png);
  font-size:1.6rem;
  line-height:1.5
}
:focus-visible{
  outline-offset:4px
}
.container{
  padding-inline:15px
}
.section{
  padding-block:var(--section-padding)
}
.h1,.h2,.h3{
  color:var(--white);
  font-family:var(--ff-oxanium);
  font-weight:var(--fw-800);
  line-height:1
}
.h1{
  font-size:var(--fs-2);
  letter-spacing:-3px
}
.h2{
  font-size:var(--fs-3)
}
.h3{
  font-size:var(--fs-6);
  text-transform:uppercase
}
:is(.h1,.h2,.h3,.card-price) .span{
  display:inline-block;
  color:#fff
}
.btn{
  margin-inline:auto;
  color:var(--eerie-black-1);
  font-size:var(--fs-8);
  text-transform:uppercase;
  font-weight:var(--fw-700);
  min-height:55px;
  padding-inline:35px
}
.skewBg{
  position:relative;
  z-index:1
}
.skewBg::before{
  content:"";
  position:absolute;
  inset:0;
  transform:skewX(var(--skewX,-16deg));
  z-index:-1
}
.btn::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:calc(100% + 8px);
  width:5px;
  transform:skewX(-16deg) translateX(var(--translateX,0));
  background-color:var(--marigold);
  transition:var(--transition)
}
.btn:is(:hover,:focus)::after{
  --translateX:-13px
}
.has-scrollbar{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding-block-end:30px;
  scroll-snap-type:inline mandatory;
}
.has-scrollbar::-webkit-scrollbar{
  height:12px;
}
.has-scrollbar::-webkit-scrollbar-thumb{
  background-color: #fd9b21;
}
.has-scrollbar::-webkit-scrollbar-button{
  width:calc(25% - 40px)
}
.section-subtitle,.section-title{
  position:relative;
  text-align:center;
  text-transform:uppercase
}
.section-subtitle{
  color:var(--silver);
  font-size:var(--fs-9);
  font-weight:var(--fw-700);
  margin-block-end:10px
}
.scrollbar-item{
  min-width:100%;
  scroll-snap-align:start
}
.card-banner{
  background-color:var(--light-gray-1)
}
.img-holder{
  aspect-ratio:var(--width)/var(--height)
}
.img-cover{
  width:100%;
  height:100%;
  object-fit:cover;
}
.img-cover1{
  width:75%;
  height:75%;
  object-fit:cover;
}
.card-badge{
  min-height:30px;
  color:var(--eerie-black-1);
  font-size:var(--fs-11);
  font-weight:var(--fw-700);
  text-transform:uppercase;
  max-width:max-content;
  display:grid;
  align-items:center;
  padding-inline:20px
}
.card-badge::before{
  --skewX:-10deg
}
.section-text{
  color:var(--color,var(--light-gray-1));
  font-size:var(--fs-8);
  font-weight:var(--fw-500);
  max-width:65ch;
  margin-inline:auto;
  text-align:center;
  line-height:1.8
}
.header-bottom::before,.header-top,.navbar-link::before{
  display:none
}
.header{
  position:relative;
  min-height:1px
}
.header-bottom{
  position:absolute;
  top:calc(100% - 1px);
  left:0;
  width:100%;
  background-color:var(--raisin-black-2);
  padding-block:20px;
  z-index:4
}
.header-bottom.active{
  position:fixed;
  top:-85px;
  animation:slideIn .5s var(--cubic-out) forwards
}
@keyframes slideIn{
  0%{
    transform:translateY(0)
}
  100%{
    transform:translateY(100%)
}
}
.header-bottom .container{
  display:flex;
  justify-content:space-between;
  align-items:center
}
.logo{
  color:var(--white);
  font-family:var(--ff-oxanium);
  font-size:3rem;
  font-weight:var(--fw-800);
  margin-left:auto;
  margin-right:auto
}
.header-actions{
  display:flex;
  align-items:center;
  gap:20px
}
.search-btn{
  color:#fff;
  padding:13px
}
.search-btn ion-icon{
  --ionicon-stroke-width:80px
}
.nav-toggle-btn{
  color:var(--white);
  font-size:30px;
  padding:4px;
  float:right
}
.nav-toggle-btn .close,.nav-toggle-btn.active .menu{
  display:none
}
.nav-toggle-btn .menu,.nav-toggle-btn.active .close{
  display:block
}
.navbar{
  background-color: #242533;
  color:var(--white);
  position:absolute;
  top:100%;
  right:0;
  width:100%;
  max-width:100;
  visibility:hidden;
  max-height:0;
  transition:.25s var(--cubic-out);
  overflow:hidden
}
.navbar.active{
  visibility:visible;
  max-height:275px;
  transition-duration:.5s
}
.navbar-item:not(:last-child){
  border-block-end:1px solid var(--white_15)
}
.navbar-link{
  padding:10px 25px;
  transition:var(--transition)
}
.navbar-link:is(:hover,:focus){
  background-color:var(--white_10)
}
.search-container{
  background-color:var(--rich-black-fogra-29_95);
  position:fixed;
  inset:0;
  display:flex;
  justify-content:center;
  align-items:center;
  padding-inline:40px;
  z-index:6;
  visibility:hidden;
  opacity:0;
  transition:var(--transition)
}
.search-container.active{
  visibility:visible;
  opacity:1
}
.search-container .search-close{
  position:fixed;
  inset:0;
  cursor:default;
  z-index:-1
}
.hero-banner{
  display:none
}
.hero{
  --section-padding:60px;
  margin-block-start:84px;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  text-align:center;
  min-height:100vh;
  display:grid;
  align-items:center
}
.hero-subtitle{
  color:red;
  font-size:var(--fs-6);
  font-weight:var(--fw-700);
  text-transform:uppercase
}
.hero-title{
  margin-block:15px 12px
}
.hero-text{
  color:var(--light-gray-2);
  margin-block-end:45px
}
.section-wrapper{
  position:relative;
  z-index:1
}
.section-wrapper::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:57%;
  background-color:#2d2e40;
  background-image: url(images/overlay.png);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  z-index:-1
}
.latest-game .section-title{
  margin-block-end:80px
}
.latest-game .has-scrollbar{
  margin-inline:-15px;
  padding-inline:15px;
  scroll-padding-inline-start:15px
}
.latest-game-card{
  position:relative;
  box-shadow:var(--shadow-2)
}
.latest-game-card .card-content{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background-color:var(--xiketic_90);
  padding:5px 5px
}
.latest-game-card .card-badge{
  position:absolute;
  bottom:100%;
  left:25px
}
.latest-game-card .card-title{
  margin-block-end:12px;
  transition:var(--transition)
}
.latest-game-card .card-title:is(:hover,:focus){
  color:var(--marigold)
}
.latest-game-card .card-price{
  color:var(--silver);
  font-size:var(--fs-10);
  font-weight:var(--fw-600)
}
.latest-game-card .card-price .span{
  margin-inline-start:5px;
  margin-bottom: 5px;
}
.footer{
  color: #fff;
}
.footer-top{
  padding-block-end:var(--section-padding)
}
.footer-top .container{
  display:grid;
  gap:50px
}
.footer .logo{
  margin-block-end:35px
}
.footer-text{
  font-size:var(--fs-8);
  font-weight:var(--fw-500);
  line-height:1.8
}
.footer-text{
  margin-block-end:15px
}
.footer-list-title{
  position:relative;
  color: #fff;
  font-family:var(--ff-oxanium);
  text-transform:uppercase;
  font-weight:var(--fw-800);
  padding-block-end:20px;
  margin-block-end:35px
}
.footer-list-title::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:30px;
  height:3px;
  background-color:var(--marigold)
}
.footer-link{
  font-size:var(--fs-9);
  max-width:max-content;
  transition:var(--transition);
  padding-block:8px;
  font-weight:var(--fw-500)
}
.footer-link:is(:hover,:focus){
  color:var(--marigold);
  transform:translateX(5px)
}
.footer .social-wrapper{
  margin-block-end:50px
}
.footer .social-list{
  display:flex;
  gap:10px
}
.footer .social-link{
  color:var(--white);
  padding:10px;
  border-radius:2px
}
.footer-btn{
  position:absolute;
  top:0;
  right:0;
  height:100%;
  width:53px;
  background-color:var(--marigold);
  color:var(--xiketic);
  display:grid;
  place-content:center
}
.footer-bottom-img{
  display:none
}
.footer-bottom{
  background-color:var(--eerie-black-2);
  padding-block:20px;
  text-align:center;
  font-size: 12px;
  font-weight: 200;
}
.back-top-btn{
  position:fixed;
  bottom:10px;
  right:15px;
  background-color: #ffb601;
  padding:12px;
  z-index:4;
  transition:var(--transition);
  opacity:0;
  visibility:hidden
}
.back-top-btn.active{
  opacity:1;
  visibility:visible;
  transform:translateY(-10px)
}
@media (min-width:576px){
  .container{
    max-width:540px;
    width:100%;
    margin-inline:auto
}
  .h1{
    --fs-2:7rem
}
  .header-actions{
    gap:40px
}
  .footer-top .container{
    grid-template-columns:1fr 1fr
}
  .footer-wrapper{
    grid-column:1/3
}
}
@media (min-width:768px){
  .container{
    max-width:720px
}
  .scrollbar-item{
    min-width:calc(50% - 15px)
}
  .hero-text{
    max-width:60ch;
    margin-inline:auto
}
  .footer-wrapper{
    grid-column:auto
}
  .footer-bottom-img{
    display:block
}
  .footer-bottom{
    text-align:left
}
  .footer-bottom .container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px
}
  .back-top-btn{
    bottom:50px;
    right:45px
}
}
@media (min-width:992px){
  .container{
    max-width:960px
}
  .scrollbar-item{
    min-width:calc(33.33% - 20px)
}
  .header-top{
    display:block;
    background-image:url(../images/header-top-bg.jpg);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    width:100%;
    padding-block:20px
}
  .header-top .container{
    display:flex;
    justify-content:space-between;
    align-items:center
}
  .countdown-text{
    color: #fff;
    font-size:var(--fs-10);
    font-weight:var(--fw-600)
}
  .countdown-text .span{
    display:inline-block;
    color:var(--xiketic);
    font-size:1.8rem;
    font-weight:var(--fw-700);
    padding:10px 20px;
    margin-inline:5px
}
  .header :is(.social-wrapper,.social-list){
    display:flex;
    align-items:center
}
  .header .social-wrapper{
    gap:15px
}
  .header .social-list{
    gap:10px
}
  .social-title{
    color:var(--white);
    font-family:var(--ff-oxanium);
    font-size:var(--fs-8);
    font-weight:var(--fw-700)
}
  .header .social-link{
    background-color:var(--jet);
    color:var(--white);
    font-size:var(--fs-9);
    padding:8px 10px
}
  .header-bottom{
    outline:1px solid hsla(0,0%,0%,.2)
}
  .header-bottom::before{
    display:block;
    top:0;
    left:-15px;
    right:auto;
    width:170px;
    --skewX:16deg
}
  .nav-toggle-btn{
    display:none
}
  .navbar,.navbar.active{
    all:unset;
    margin-inline:auto 15px
}
  .navbar-list{
    display:flex
}
  .navbar-item:not(:last-child){
    border-block-end:none
}
  .navbar-link{
    color:var(--white);
    font-family:var(--ff-oxanium);
    font-size:var(--fs-11);
    text-transform:uppercase;
    font-weight:var(--fw-700);
    padding:10px 20px
}
  .navbar-link::before{
    display:block;
    opacity:0;
    transition:var(--transition)
}
  .navbar-link:is(:hover,:focus){
    background-color:transparent;
    color:var(--xiketic)
}
  .navbar-link:is(:hover,:focus)::before{
    opacity:1
}
  .hero{
    text-align:left
}
  .hero-banner{
    display:block
}
  .hero .container{
    display:grid;
    grid-template-columns:1fr .9fr;
    align-items:center;
    gap:50px
}
  .btn{
    margin-inline:0
}
  .latest-game .has-scrollbar{
    padding-block-end:0
}
  .footer .container{
    grid-template-columns:1fr .7fr .7fr;
    column-gap:80px
}
}
@media (min-width:1200px){
  .container{
    max-width:1230px
}
  .h1{
    --fs-2:7.5rem
}
  .scrollbar-item{
    min-width:calc(25% - 22.5px)
}
  .header-bottom::before{
    width:270px
}
  .navbar-link{
    font-size:var(--fs-9);
    padding-inline:25px
}
  .hero .container{
    grid-template-columns:1fr 1fr
}
  .section-wrapper::before{
    height:72%
}
  .footer .container{
    grid-template-columns:1fr .7fr .7fr 1fr
}
}
.contact-area-wrap {
  background: #242533;
  color: #fff;
  padding-top: 5px;
  padding-bottom: 5px;
  box-shadow: -6px -8px 7px -10px rgba(0,0,0,0.1),0px 10px 15px -3px rgba(0,0,0,0.1);
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  font-weight: 600;
  margin-top: 130px;
  margin-bottom: 50px;
}
.contact-area-wrap1 {
  color: #fff;
  margin-top: -200px;
  margin-bottom: 300px;
  padding-top: 5px;
  padding-bottom: 5px;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  font-weight: 600;
}
.gallery{
  width:100%;
  display:block;
  min-height:100vh;
  padding:100px 0;
  margin-top:-100px
}
.gallery .gallery-filter{
  padding:0 15px;
  width:100%;
  text-align:center;
  margin-bottom:40px
}
.gallery .gallery-filter .filter-item{
  background:#242533;
  color:#fff;
  font-size:15px;
  font-weight:500;
  display:inline-block;
  border-radius:20px;
  margin-right:2px;
  cursor:pointer;
  padding:6px 12px 6px 12px;
  line-height:1.2;
  transition:all .3s ease
}
.gallery .gallery-filter .filter-item.active{
  color:#fff;
  background:#242533
}
.gallery .gallery-item.show{
  animation:fadeIn .5s ease
}
@keyframes fadeIn{
  0%{
    opacity:0
}
  100%{
    opacity:1
}
}
.gallery .gallery-item.hide{
  display:none
}
@media (max-width:467px){
  .gallery .gallery-item{
    width:100%
}
  .gallery .gallery-filter .filter-item{
    margin-bottom:10px
}
}
/*-----------------------------------*\
  #FEATURED GAME
\*-----------------------------------*/

.featured-game { background-color: var(--cultured-2); }

.featured-game .section-title {
  color: #fff;
  margin-block-end: 90px;
}

.featured-game .has-scrollbar { gap: 0; }

.featured-game-card { position: relative; }

.featured-game-card :is(.card-content, .card-content-overlay) { position: absolute; }

.featured-game-card .card-content {
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px 35px;
  transition: var(--transition);
}

.featured-game-card .card-content-overlay {
  inset: 0;
  background-color: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: var(--transition);
}

.featured-game-card .card-title { margin-block-end: 5px; }

.featured-game-card .card-meta {
  color: #fff;
  font-size: var(--fs-11);
  font-weight: var(--fw-500);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 4px;
}

.featured-game-card .card-content .card-meta { color: #fff; }

.featured-game-card .card-content ion-icon {
  color: #fff;
  font-size: 14px;
}

.featured-game-card .card-icon { margin-block-end: 20px; }

.featured-game-card .card-content-overlay .card-title { color: #fff; }

.featured-game-card .card-content-overlay .span { color: #fff; }

.featured-game-card:is(:hover, :focus-within) .card-content { opacity: 0; }

.featured-game-card:is(:hover, :focus-within) .card-content-overlay { opacity: 0.9; }