body,
html {
    scroll-behavior: smooth
}

b,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--title)
}

.btn,
body,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font)
}

.btn-text,
.text-green,
a {
    text-decoration: none
}

.btn-main,
header {
    background-color: var(--black);
    background-color: var(--black)
}

.pro-details .titlemini,
body,
label,
p,
span {
    font-size: 16px
}

.box-gs,
.filter-box,
.pro-item {
    overflow: hidden
}

.filter-box,
.side-menu,
section {
    position: relative
}

.side-menu a i,
.titlemini {
    font-size: 18px
}

:root {
    --grey: #9FA8B8;
    --darkgrey: #495057;
    --litegrey: #F9FAFB;
    --white2: #F5F7F9;
    --white: #ffffff;
    --blue: #2E90FA;
    --red: #ED3969;
    --red2: #FF2146;
    --black: #232528;
    --liteblack: #2a3751;
    --font: 'Inter', sans-serif
}

body {
    background: var(--white);
    color: var(--darkgrey);
    font-weight: 400;
    line-height: 1
}

.container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    max-width: 1200px
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700
}

a {
    color: inherit;
    transition: .5s;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s
}

.box-shadow {
    box-shadow: 0 4px 6px -2px rgba(0 0 0 / 5%), 0 12px 16px -4px rgba(0 0 0 / 5%);
    transition: .5s
}

.box-shadow2 {
    box-shadow: 0 0 5px rgb(0 0 0 / 5%);
    transition: .5s
}

.text-pink {
    color: var(--red) !important;
    font-weight: 700
}

.cst-header .nav-link.active,
.cst-header .nav-link:hover,
.text-white {
    color: var(--white) !important
}

.text-green {
    color: #63f430 !important
}

.btn-main,
.btn-main:hover,
header {
    color: var(--white)
}

.btn {
    font-weight: 500
}

.btn-main {
    border-color: transparent
}

.btn-main:hover {
    background-color: var(--liteblack)
}

.btn-text {
    color: var(--blue);
    padding: 7px 0
}

.btn-second,
.side-menu a:hover i {
    color: var(--darkgrey)
}

.btn-text:hover {
    opacity: .75;
    box-shadow: 0 0 10px rgb(0 0 0 /0%)
}

.btn-second {
    border-color: var(--litegrey);
    background-color: #fff
}

.btn-second.active,
.btn-second:hover {
    border-color: var(--blue);
    background-color: var(--blue);
    color: var(--white)
}

.title {
    font-size: 28px
}

.subtitle {
    font-size: 20px;
    font-weight: 700
}

header {
    padding: 32px 0 64px
}

.xtop {
    height: 75px
}

.navbar-brand img {
    height: 30px
}

.cst-header {
    transition: .5s;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s
}

.cst-header.active,
.cst-header.scrolled {
    background-color: rgba(255 255 255 / 75%);
    backdrop-filter: blur(7px)
}

.cst-header .side-bar .icon,
.cst-header .side-bar .icon:hover,
.cst-header .side-bar .nav-link:hover,
.nav-link.cart {
    background-color: rgb(255 255 255 / 7%)
}

.cst-header .nav-link {
    font-family: var(--font) !important;
    color: var(--grey) !important;
    padding: 5px 0 !important;
    font-size: 16px;
    align-items: center;
    display: inline-flex
}

.cst-header .side-bar .nav-link {
    color: var(--white) !important;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    display: inline-block;
    border: 1px solid transparent
}

.nav-link.cart {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border: 1px solid transparent;
    color: #fff !important
}

.nav-link.cart i {
    padding: 0 5px
}

.nav-link.cart:hover {
    border: 1px solid #fff
}

.cst-header .side-bar .icon:hover {
    border: 1px solid #fff
}

.cst-header .nav-link i {
    font-size: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px
}

.navbar-toggler {
    color: #fff;
    font-size: 30px;
    padding: 0 7px !important
}

.filter-box {
    margin: -2.5rem 0 0;
    background-color: #fff;
    height: 54px;
    display: flex;
    justify-content: space-between
}

.box-cari .form-control {
    width: 100%;
    padding: 6px 12px 6px 48px;
    height: 100%;
    border-color: var(--litegrey);
    transition: .5s;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s
}

.box-cari .form-control:focus {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0
}

.form-control::placeholder {
    font-family: var(--font)
}

.box-cari .icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    left: 20px;
    font-size: 22px
}

.box-categ {
    display: flex;
    align-items: center;
    gap: .25rem
}

.box-allcateg {
    display: flex;
    align-items: center;
    gap: .25rem;
    border-left: 1px solid var(--litegrey);
    padding: 0 1.2rem
}

.game-slider,
.game-slider li,
.pro-item {
    display: block
}

.box-allcateg .btn,
.box-categ .btn {
    font-weight: 700;
    font-size: 12px
}

.main-slider .pro-item {
    margin: 0 auto;
    width: 90%
}

.pro-item {
    max-width: 236px;
    width: 100%;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    background-color: var(--white);
    z-index: 1
}

.pro-item:hover {
    box-shadow: 0 0 26px rgba(0 0 0 / 5%);
    z-index: 3
}

.game-slider li .frame iframe,
.game-slider li .frame img,
.game-slider li .frame video,
.pro-item .pi-img {
    width: 100%
}

.pro-item .pi-img img {
    width: 100%;
    aspect-ratio: 3/2;
    object-fit: cover
}

.pi-desc .item-name {
    color: var(--grey);
    font-size: 12px
}

.pi-desc .kirim {
    padding: 3px 5px;
    background-color: #c5fae1;
    border: 1px solid #198754;
    font-size: 12px
}

.pi-foot {
    border-top: 1px solid #d4cfcf;
    color: var(--grey)
}

.box-gs {
    border-radius: 1rem 1rem 0 0;
    -webkit-border-radius: 1rem 1rem 0 0;
    -moz-border-radius: 1rem 1rem 0 0;
    -ms-border-radius: 1rem 1rem 0 0;
    -o-border-radius: 1rem 1rem 0 0;
    background-color: var(--litegrey)
}

.cst-card .card-header,
.game-table,
.game-table tr td,
.game-table tr th {
    background-color: transparent !important
}

.game-slider li {
    list-style: none
}

.game-slider li .frame {
    display: block;
    width: 100%;
    position: relative
}

.game-table {
    border-color: transparent !important;
    margin: 5px 0 !important
}

.game-table tr td,
.game-table tr th {
    border-color: transparent !important;
    padding: 0
}

.game-desc,
.game-desc p {
    font-size: 13px
}

.box-game-foot {
    background-color: var(--grey);
    border-radius: 0 0 1rem 1rem;
    -webkit-border-radius: 0 0 1rem 1rem;
    -moz-border-radius: 0 0 1rem 1rem;
    -ms-border-radius: 0 0 1rem 1rem;
    -o-border-radius: 0 0 1rem 1rem
}

.side-menu a {
    display: flex;
    align-items: baseline;
    margin: 1px 0;
    gap: .5rem;
    width: 100%;
    color: var(--grey);
    padding: 5px 7px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px
}

.side-menu a.active,
.side-menu a:hover {
    color: var(--darkgrey);
    background-color: var(--white2)
}

.side-menu a i {
    width: 30px;
    color: var(--grey);
    transition: .5s;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s
}

.cst-card .card-header {
    padding: 1rem
}

.cst-card .card-header .subtitle {
    font-weight: 500;
    font-size: 1.15rem;
    margin: 0
}

.newsletter {
    background-color: var(--litegrey)
}

.box-order {
    border: 1px solid rgba(0, 0, 0, .175);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px
}

.pro-footer .titlemini {
    font-size: 14px;
    font-weight: 400;
    margin: 0
}

@media (min-width:576px) {
    .pro-footer .titlemini {
        font-size: 16px;
        font-weight: 700
    }

    .pro-details .titlemini {
        font-size: 18px
    }
}

@media (min-width:768px) {
    .cst-header .nav-item {
        align-items: center;
        display: flex;
        justify-content: center
    }

    .cst-header .nav-link {
        padding: 10px 14px !important
    }

    /* .filter-box {
        height: 80px
    } */
}

@media (min-width:992px) {

    .box-allcateg,
    .box-categ {
        gap: 1rem
    }

    .box-allcateg .btn,
    .box-categ .btn {
        font-size: 16px
    }
}