* {
margin:0;
box-sizing:border-box;
}

body {
font-family:Arial,Helvetica,sans-serif;
background-color:#111;
color:#fff;
}

body.offcanvas-menu:before {
opacity:1;
visibility:visible;
}

a {
-webkit-transition:.3s all ease;
-o-transition:.3s all ease;
transition:.3s all ease;
}

a,a:hover {
text-decoration:none !important;
}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4 {
font-family:Arial,Helvetica,sans-serif;
font-weight:300;
}

h1,h2,h3,h4,h5,h6 {
margin:0;
margin-bottom:1.5rem;
}

h1 {
font-size:2.3rem;
}

ol,ul {
list-style:none;
}
/* Menu */
.site-navbar {
margin-bottom:0px;
position:absolute;
width:100%;
}

.site-navbar.transparent {
background:transparent;
}

.site-navbar.absolute {
position:absolute;
top:0;
left:0;
width:100%;
}

.site-navbar .site-navigation .site-menu {
margin-bottom:0;
}

.site-navbar .site-navigation .site-menu .active >a span {
background:#36abd7;
color:#fff;
border-radius:30px;
display:inline-block;
padding:5px 20px;
}

.site-navbar .site-navigation .site-menu a {
text-decoration:none !important;
display:inline-block;
}

.site-navbar .site-navigation .site-menu >li {
display:inline-block;
}

.site-navbar .site-navigation .site-menu >li >a {
padding:10px 0px;
color:#fff;
font-size:16px;
text-decoration:none !important;
}

.site-navbar .site-navigation .site-menu >li >a >span {
padding:10px 10px;
display:inline-block;
-webkit-transition:.3s all ease;
-o-transition:.3s all ease;
transition:.3s all ease;
font-family:Montserrat,sans-serif !important;
font-size:1.25rem;
line-height:1;
font-weight:600;
white-space:nowrap;
color:#f5f7fa !important;
border:2px solid transparent;
}

.site-navbar .site-navigation .site-menu >li >a:hover >span {
background-color:transparent;
border:2px solid blue;
display:inline-block;
}

.site-navbar .site-navigation .site-menu .has-children {
position:relative;
}

.site-navbar .site-navigation .site-menu .has-children >a span,.site-navbar .site-navigation .site-menu li.dropdown-link >a span {
position:relative;
padding-right:30px;
}

.site-navbar .site-navigation .site-menu .has-children >a span:before,.site-navbar .site-navigation .site-menu li.dropdown-link >a span:before {
position:absolute;
content: "\e313";
font-size:16px;
top:50%;
right:10px;
-webkit-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%);
font-family: 'icomoon';
}

.site-navbar .site-navigation .site-menu .has-children .dropdown {
visibility:hidden;
opacity:0;
top:100%;
position:absolute;
text-align:left;
border-top:2px solid #36abd7;
-webkit-box-shadow:0 2px 10px -2px rgba(0,0,0,0.1);
box-shadow:0 2px 10px -2px rgba(0,0,0,0.1);
padding:0px 0;
margin-top:20px;
margin-left:0px;
background:#fff;
-webkit-transition:0.2s 0s;
-o-transition:0.2s 0s;
transition:0.2s 0s;
}

.site-navbar .site-navigation .site-menu .has-children .dropdown.arrow-top {
position:absolute;
}

.site-navbar .site-navigation .site-menu .has-children .dropdown.arrow-top:before {
bottom:100%;
left:20%;
border:solid transparent;
content: " ";
height:0;
width:0;
position:absolute;
pointer-events:none;
}

.site-navbar .site-navigation .site-menu .has-children .dropdown.arrow-top:before {
border-color:rgba(136,183,213,0);
border-bottom-color:#fff;
border-width:10px;
margin-left:-10px;
}

.site-navbar .site-navigation .site-menu .has-children .dropdown a {
text-transform:none;
letter-spacing:normal;
-webkit-transition:0s all;
-o-transition:0s all;
transition:0s all;
color:#343a40;
}

.site-navbar .site-navigation .site-menu .has-children .dropdown .active >a {
color:#36abd7 !important;
}

.site-navbar .site-navigation .site-menu .has-children .dropdown >li {
list-style:none;
padding:0;
margin:0;
min-width:200px;
}

.site-navbar .site-navigation .site-menu .has-children .dropdown >li >a {
padding:9px 20px;
display:block;
}

.site-navbar .site-navigation .site-menu .has-children .dropdown >li >a:hover {
background:#fafafb;
}

.site-navbar .site-navigation .site-menu .has-children .dropdown >li.has-children >a {
position:relative;
}

.site-navbar .site-navigation .site-menu .has-children .dropdown >li.has-children >a:after {
position:absolute;
right:0;
content: "\e315";
right:20px;
font-family: 'icomoon';
}

.site-navbar .site-navigation .site-menu .has-children .dropdown >li.has-children >.dropdown,.site-navbar .site-navigation .site-menu .has-children .dropdown >li.has-children >ul {
left:100%;
top:0;
}

.site-navbar .site-navigation .site-menu .has-children .dropdown >li.has-children:hover >a,.site-navbar .site-navigation .site-menu .has-children .dropdown >li.has-children:active >a,.site-navbar .site-navigation .site-menu .has-children .dropdown >li.has-children:focus >a {
background:#fafafb;
}

.site-navbar .site-navigation .site-menu .has-children:hover >a,.site-navbar .site-navigation .site-menu .has-children:focus >a,.site-navbar .site-navigation .site-menu .has-children:active >a {
color:#36abd7;
}

.site-navbar .site-navigation .site-menu .has-children:hover >a span,.site-navbar .site-navigation .site-menu .has-children:focus >a span,.site-navbar .site-navigation .site-menu .has-children:active >a span {
background:#36abd7;
color:#fff;
}

.site-navbar .site-navigation .site-menu .has-children:hover,.site-navbar .site-navigation .site-menu .has-children:focus,.site-navbar .site-navigation .site-menu .has-children:active {
cursor:pointer;
}

.site-navbar .site-navigation .site-menu .has-children:hover >.dropdown,.site-navbar .site-navigation .site-menu .has-children:focus >.dropdown,.site-navbar .site-navigation .site-menu .has-children:active >.dropdown {
-webkit-transition-delay:0s;
-o-transition-delay:0s;
transition-delay:0s;
margin-top:0px;
visibility:visible;
opacity:1;
}

.site-mobile-menu {
width:300px;
position:fixed;
left:0;
z-index:2000;
padding-top:20px;
background:#000;
height:calc(100vh);
-webkit-transform:translateX(-110%);
-ms-transform:translateX(-110%);
transform:translateX(-110%);
-webkit-box-shadow:-10px 0 20px -10px rgba(0,0,0,0.1);
box-shadow:-10px 0 20px -10px rgba(0,0,0,0.1);
-webkit-transition:.3s all ease-in-out;
-o-transition:.3s all ease-in-out;
transition:.3s all ease-in-out;
}

.offcanvas-menu .site-mobile-menu {
-webkit-transform:translateX(0%);
-ms-transform:translateX(0%);
transform:translateX(0%);
}

.site-mobile-menu .site-mobile-menu-header {
width:100%;
float:left;
padding-left:20px;
padding-right:20px;
}

.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-close {
float:right;
margin-top:8px;
}

.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-close span {
font-size:30px;
display:inline-block;
padding-left:10px;
padding-right:0px;
line-height:1;
cursor:pointer;
-webkit-transition:.3s all ease;
-o-transition:.3s all ease;
transition:.3s all ease;
}

.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-close span:hover {
color:#f8f9fa;
}

.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-logo {
float:left;
margin-top:10px;
margin-left:0px;
}

.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-logo a {
display:inline-block;
text-transform:uppercase;
}

.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-logo a img {
max-width:70px;
}

.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-logo a:hover {
text-decoration:none;
}

.site-mobile-menu .site-mobile-menu-body {
overflow-y:scroll;
-webkit-overflow-scrolling:touch;
position:relative;
padding:0 20px 20px 20px;
height:calc(100vh - 52px);
padding-bottom:150px;
scrollbar-width:thin;
scroll-margin-top:0px;
scrollbar-color:#ffffff20 #00000020;
}

.site-mobile-menu .site-nav-wrap {
padding:0;
margin:0;
list-style:none;
position:relative;
}

.site-mobile-menu .site-nav-wrap a {
padding:10px 20px;
display:block;
position:relative;
font-family:Montserrat,sans-serif !important;
font-size:1.25rem;
line-height:1;
font-weight:600;
white-space:nowrap;
color:#f5f7fa !important;
border:2px solid transparent;
}

.site-mobile-menu .site-nav-wrap a:hover {
color:#red;
}

.site-mobile-menu .site-nav-wrap li {
position:relative;
display:block;
}

.site-mobile-menu .site-nav-wrap li.active >a {
color:#red;
}

.site-mobile-menu .site-nav-wrap .arrow-collapse {
position:absolute;
right:0px;
top:10px;
z-index:20;
width:36px;
height:36px;
text-align:center;
cursor:pointer;
}

.site-mobile-menu .site-nav-wrap .arrow-collapse:hover {
background:#f8f9fa;
}

.site-mobile-menu .site-nav-wrap .arrow-collapse:before {
font-size:12px;
z-index:20;
font-family: "icomoon";
content: "\f078";
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%) rotate(-180deg);
-ms-transform:translate(-50%,-50%) rotate(-180deg);
transform:translate(-50%,-50%) rotate(-180deg);
-webkit-transition:.3s all ease;
-o-transition:.3s all ease;
transition:.3s all ease;
color:#fff;
}

.site-mobile-menu .site-nav-wrap .arrow-collapse.collapsed:before {
-webkit-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}

.site-mobile-menu .site-nav-wrap >li {
display:block;
position:relative;
float:left;
width:100%;
}

.site-mobile-menu .site-nav-wrap >li a:hover {
background-color:transparent;
border:2px solid blue;
color:red !important;
}

.site-mobile-menu .site-nav-wrap >li >a {
padding-left:20px;
font-size:20px;
}

.site-mobile-menu .site-nav-wrap >li >ul {
padding:0;
margin:0;
list-style:none;
}

.site-mobile-menu .site-nav-wrap >li >ul >li {
display:block;
}

.site-mobile-menu .site-nav-wrap >li >ul >li >a {
padding-left:40px;
font-size:16px;
}

.site-mobile-menu .site-nav-wrap >li >ul >li >ul {
padding:0;
margin:0;
}

.site-mobile-menu .site-nav-wrap >li >ul >li >ul >li {
display:block;
}

.site-mobile-menu .site-nav-wrap >li >ul >li >ul >li >a {
font-size:16px;
padding-left:60px;
}

.site-mobile-menu .site-nav-wrap [data-class= "social " ] {
float:left;
width:100%;
margin-top:30px;
padding-bottom:5em;
}

.site-mobile-menu .site-nav-wrap [data-class= "social " ] >li {
width:auto;
}

.site-mobile-menu .site-nav-wrap [data-class= "social " ] >li:first-child a {
padding-left:15px !important;
}
/* End Menu */
.content {
padding:1em 3em;
}

.row__posters {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  padding: 10px;
  justify-content: flex-start;
}
.row__posters.slick-initialized {
visibility:inherit;
}

.row__poster-item {
padding-left:10px;
padding-right:10px;
height:calc(((100vw / 2) - 20px - 40px - 1.275rem) / 1.777778);
cursor:pointer;
}

.game-image {
    cursor:pointer;
    display:flex;
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
}

.row__poster-item .game-wrapper {
border-style:solid;
border-radius:30px;
border-color:#ffffff;
border-width:2px;
position:relative;
overflow:hidden;
position:relative;
width:100%;
height:100%;
}

.row__poster-item .game-wrapper:hover {
    border-color:#dc3545;
}

.game-wrapper .overlay-image {
position:absolute;
top:0;
left:0;
width:100%;
object-fit:cover;
height:100%;
transition:opacity 0.3s;
}

.row__poster-item img:hover {
transform:scale(1.1);
}

.row__poster-item img {
width:100%;
}

.row__poster-item p {
margin-top:5px;
white-space:nowrap;
overflow:hidden;
display:block;
text-overflow:ellipsis;
margin-bottom:0px;
}

.row__poster-item p.v-title {
font-weight:700;
font-size:1rem;
line-height:1rem;
color:#cccccc;
}

.row__poster-item p.v-desc {
font-weight:600;
font-size:.75rem;
line-height:1rem;
color:#888888;
}

.row__poster-item a {
text-decoration:none;
color:#fff;
}

.row__poster-item a:hover {
text-decoration:none;
}

.row__category {
margin:1.5rem;
margin-top:0;
}

.row__category h2,.category-games h1 {
margin-bottom:10px;
color:#f50505 !important;
font-family:Oswald,sans-serif !important;
font-size:2.25rem;
font-weight:700;
margin:8px auto 8px 0;
line-height:1.1;
}

.row__title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  color: #fff;
}
.row__title a {
color:#f2f2f2;
}

.row__title a:hover {
color:red;
}
.row__title h2 {
  font-size: 24px;
  font-weight: 600;
  color: #00c6ff;
  margin: 0;
}
.row__games .row__poster-item {
max-width:33%;
width:calc(100vw / 3);
display:inline-block;
margin-bottom:2rem;
}

.promos h2 {
color:#fff;
}

.promos .slick-dots li button::before {
font-size:10px;
color:#fff;
}

.row__posters .slick-prev {
left:-30px;
display:none !important;
}

.row__posters .slick-next {
right:-30px;
display:none !important;
} [dir= 'rtl ' ].row__posters .slick-next {
right:auto;
left:-30px;
} [dir= 'rtl ' ].row__posters .slick-next {
right:auto;
left:-30px;
}

.promos .slick-prev {
left:15px,display:none;
}

.promos .slick-next {
right:15px,display:none;
} [dir= 'rtl ' ].promos .slick-next {
right:auto;
left:15px;
} [dir= 'rtl ' ].promos .slick-next {
right:auto;
left:15px;
}

video {
width:100%;
}

.detailspage {
display:flex;
color:white;
margin-left:20px;
}

.text-head-about {
margin-top:10px;
margin-bottom:10px;
}

.more {
padding:3px;
}

.font-semibold {
font-weight:600;
}

.font-bold {
font-weight:700;
}

.text-xs {
font-size:.75rem;
line-height:1rem;
}

.truncate {
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* banner */
.banner {
background-size:cover;
background-position:center center;
color:white;
object-fit:contain;
height:450px;
}

.playcontent {
/* background-image: url('images/banner.jpg'); */
background-size:cover;
background-position:center center;
color:white;
object-fit:contain;
height:auto;
}

.banner__contents {
padding-left:60px;
padding-top:8.4rem;
position:relative;
}

.banner__title {
font-size:3rem;
font-weight:800;
padding-bottom:0.3rem;
}

.banner__description {
width:60%;
line-height:1.3;
padding-top:1rem;
font-size:1rem;
}

.banner__button {
cursor:pointer;
color:#fff;
outline:none;
border:none;
padding-left:2rem;
padding-right:2rem;
margin-right:1rem;
padding-top:0.5rem;
padding-bottom:0.5rem;
}

.btn-play {
font-weight:700;
color:#fff;
background-color:rgba(54,171,215,0.9);
border-color:#f8f9fa;
border-radius:6px;
}

.btn-play:hover {
color:#000;
background-color:#e6e6e6;
transition:all 0.2s;
}

.promos_topbanners {
position:relative;
}

.banner--fadeBottom {
height:60%;
background-image:linear-gradient(180deg,transparent,rgba(37,37,37,0.05),#111);
position:absolute;
bottom:0px;
display:block;
width:100%;
}

.vjs-poster img {
object-fit:contain;
}

#vplayer {
width:100%;
height:500px;
margin-bottom:1rem;
}
/* nav */
.site-logo {
  width: 100%;
  display: flex;
  position: absolute;
  -webkit-box-pack: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
  top:1.5rem;
}
.nav-logo {
width:350px;
}

@media (max-width:1199px) {
    .nav-logo {
        width:350px;
    }
    .site-logo {
      top:1.2rem;
    }
}

@media (max-width:991px) {
.nav-logo {
width:300px;
}
.site-logo {
  top:1.0rem;
}
section.game-details h1 {
font-size:2rem;
padding:5px;
margin-bottom:0px;
}

.row__games .row__poster-item img {
margin-bottom:0px;
}

.row__games .row__poster-item {
max-width:32%;
width:calc(100vw / 3);
padding-left:10px;
padding-right:5px;
display:inline-block;
margin-bottom:1.5rem;
}

.content.pt-auto {
padding-top:80px;
}

#vplayer {
width:100%;
height:350px;
margin-bottom:0.675rem;
}
}

@media (max-width:767px) {
.nav-logo {
width:300px;
}

body {
font-size:14px;
padding:0px;
}

section.game-details h1 {
font-size:1.6rem;
padding:5px;
margin-bottom:0px;
}

.content {
padding:20px;
}

.row__posters.slick-slider .slick-prev {
left:-25px;
}

.row__posters.slick-slider .slick-next {
right:-25px;
}

.row__games .row__poster-item img {
margin-bottom:0px;
}

.row__games .row__poster-item {
max-width:49%;
width:calc(100vw / 2);
padding-left:10px;
padding-right:5px;
display:inline-block;
margin-bottom:1.5rem;
}

.content.pt-auto {
padding-top:50px;
}

#vplayer {
width:100%;
height:300px;
margin-bottom:0.675rem;
}
}

@media (max-width:575px) {
.nav-logo {
width:220px;
}

@media (max-width:350px) {
    .nav-logo {
        width:180px;
    }
}

.content {
padding:10px;
}

section.game-details h1 {
font-size:1.275rem;
padding:5px;
margin-bottom:0px;
}

.row__posters.slick-slider .slick-prev {
left:0px;
}

.row__posters.slick-slider .slick-next {
right:5px;
}

.row__poster-item p.v-title {
font-size:0.874rem;
}

.promos .slick-prev {
left:5px;
}

.promos .slick-next {
right:5px;
}

.row__poster-item {
padding-left:0px;
padding-right:5px;
max-width:275px;
}

.banner {
height:300px;
}

.banner__title {
font-size:1rem;
}

.banner__contents {
padding-left:60px;
padding-top:6.4rem;
}

.banner__description {
width:90%;
padding-top:0.35rem;
line-height:1.2;
font-size:0.875rem;
}

.row__games .row__poster-item img {
margin-bottom:0px;
}

.row__games .row__poster-item {
max-width:49%;
width:calc(100vw / 2);
display:inline-block;
margin-bottom:1.5rem;
}

.content.pt-auto {
padding-top:50px;
}

#vplayer {
width:100%;
height:300px;
margin-bottom:0.675rem;
}
}

.nav__avatar {
width:30px;
object-fit:contain;
}

@media screen and (min-width:850px) {
.right-content {
display:flex;
flex-direction:column;
width:60%;
}

.left-content {
display:flex;
flex-direction:column;
width:40%;
}
}

.nav__black {
background-color:#111;
padding:5px 20px;
}

.gameContainer {
display:none;
}

@media only screen and (max-width:768px) {
/* CSS styles for mobile devices */
.container {
width:100%;
padding:0 10px;
}
}

.myaccount-container {
display:flex;
justify-content:center; /* Center horizontally */
align-items:center; /* Center vertically */
height:100vh; /* Full viewport height */
}

.myaccount-centered-div {
width:300px;
height:200px;
color:white;
display:flex;
justify-content:center; /* Center content horizontally */
align-items:center; /* Center content vertically */
text-align:center;
}

.bg-full-page {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width:100%;
height:100%;
}

.card-center {
position:absolute;
width:100%;
top:20%;
left:50%;
transform:translate(-50%,0);
z-index:2;
}

.card-blue {
max-width:500px !important;
background:#5576c3;
padding:20px;
border:2px solid #ffffff;
color:#f5f7fa;
}

.card-login {
width:100%;
max-width:450px !important;
margin:30px 0px;
}

.card-blue.rounded {
border:1px solid aliceblue;
border-radius:18px !important;
}

.page-login {
padding-top:4em;
padding-bottom:4em;
}

.lead.lead-sm {
font-size:1.2rem;
margin-bottom:2.6rem;
}

.slick-track {
margin-left:0;
}

header.nav {
position:relative;
color:#ffffff;
width:100%;
display:block;
transition-timing-function:ease-in;
transition:all 0.5s;
background-size:cover;
background-position:50% 50%;
background-repeat:no-repeat;
min-height:85px;
}

header.nav .container {
max-width:100% !important;
}

header.nav .container .nav-left {
display:-webkit-flex;
display:-moz-flex;
display:-o-flex;
display:-ms-flex;
display:flex;
-webkit-align-items:center;
-moz-align-items:center;
-o-align-items:center;
-ms-align-items:center;
align-items:center;
}

header.nav .container .nav-right ul.category-dropdown {
padding:0px;
}

header.nav .nav-right ul.category-dropdown {
height:calc(100vh - 95px);
overflow-y:scroll;
text-align:left;
scrollbar-width:thin;
scroll-margin-top:50px;
scrollbar-color:#ffffff20 #00000020;
}

header.nav .container .nav-right .site-menu >li {
position:relative;
vertical-align:middle;
}

header.nav .container .nav-right .site-menu >li .dropdown ul li {
margin-bottom:0;
transition:all .5s;
-o-transition:all .5s;
-moz-transition:all .5s;
-ms-transition:all .5s;
-webkit-transition:all .5s;
display:block;
padding:0 20px;
}

header.nav .container .nav-right .site-menu >li .dropdown ul li a {
color:#fff;
font-size:16px;
text-decoration:none;
display:block;
padding:8px 0px;
font-style:normal;
line-height:normal;
}

header.nav .container .nav-right .site-menu >li .dropdown ul li:hover {
background:#eaeaea;
}

header.nav .container .nav-right .site-menu >li .dropdown ul li:hover a {
color:#111111;
}

header.nav .container .nav-right .site-menu >li .dropdown.category-dropdown ul li a {
white-space:nowrap;
}

header.nav .container .nav-right .site-menu >li .dropdown {
position:absolute;
top:0px;
left:0%;
min-width:160px;
font-size:15px;
color:#212529;
list-style:none;
background-color:#36abd7;
background-clip:padding-box;
opacity:0;
visibility:hidden;
transition:all .2s;
-o-transition:all .2s;
-ms-transition:all .2s;
-webkit-transition:all .2s;
-moz-transition:all .2s;
index:0;
text-align:left;
}

header.nav .container .nav-right .site-menu >li .dropdown.account-box {
min-width:130px;
}

header.nav .container .nav-right .site-menu >li .dropdown.account-box ul {
padding-left:0;
margin-left:0;
}

header.nav .container .nav-right .site-menu >li:hover .dropdown,header.nav .container .nav-right .site-menu >li.active .dropdown {
visibility:visible;
opacity:1;
z-index:1;
top:75px;
}

footer {
background-color:#000000;
min-height:100px;
color:whitesmoke;
}

section.hero {
background-image:url( '../images/Sportcafe_banners.gif ');
object-fit:cover;
display:block;
vertical-align:middle;
background-size:cover;
background-position:50% 50%;
background-repeat:no-repeat;
background-position:0% 8.67%;
}

section.hero .hero-content {
position:relative;
min-height:627px;
padding-top:10px;
}

section.hero p {
font-size:2.25rem;
font-weight:700;
margin-top:6em;
font-family:Roboto,sans-serif !important;
line-height:1.6;
word-wrap:break-word;
position:relative;
}

section.hero p.text-white {
color:#f5f7fa !important;
}

.text-black {
color:#000000 !important;
}

.m-show {
display:none !important;
}

.login-box {
max-width:550px;
margin:0 auto;
padding:0 40px 40px 40px;
width:90%;
background:#36abd7;
background-size:auto;
background-size:cover;
border:2px solid #1d1d1d;
position:relative;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-ms-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}

header.nav .container .nav-right .site-menu >li .dropdown.account-box .login-box {
width:400px;
padding:5px 30px 30px 30px;
position:absolute;
right:0;
top:0;
}

header.nav .container .nav-right .site-menu >li .dropdown.account-box .login-box .form-container {
padding-top:10px;
}

.form-row .input-box {
display:flex;
background-color:transparent;
transition:background .5s,border-color .5s;
-o-transition:background .5s,border-color .5s;
-moz-transition:background .5s,border-color .5s;
-webkit-transition:background .5s,border-color .5s;
-ms-transition:background .5s,border-color .5s;
align-items:center;
}

.form-row .input-box .input-control {
transition:background .2s;
-o-transition:background .2s;
-moz-transition:background .2s;
-ms-transition:background .2s;
-webkit-transition:background .2s;
font-size:20px;
color:#1a1a1a;
display:block;
width:100%;
height:40px;
border:1px solid #f5f7fa;
border-radius:6px;
background:transparent !important;
padding:0px 10px;
}

.form-row.border-bottom {
border-bottom:1px solid #f5f7fa;
}

.form-row.border-bottom .input-box {
padding:0;
}

.form-row .input-box label {
font-size:18px;
}

.form-row .input-box.isdcode-input {
width:85px;
}

.form-row .input-box.isdcode-input .input-control {
border:none;
text-align:center;
}

.form-row .mobile-input {
width:calc(100% - 85px);
}

.form-row .input-box.mobile-input .input-control {
border:none;
text-align:center;
}

textarea:focus,input:focus {
outline:none;
}

header.nav .container .nav-right .site-menu >li .dropdown.account-box .login-box .form-container .form-row .input-box .input-control {
font-size:16px;
}

.theme-btn {
border:none;
font-size:18px;
font-weight:500;
display:inline-block;
text-transform:uppercase;
color:#fff;
-webkit-transition-duration:.4s;
cursor:pointer;
width:auto;
border-radius:5px;
line-height:50px;
text-align:center;
text-decoration:none;
padding:0 25px 0 25px;
position:relative;
transition:.3s;
background:#0d77cc;
}

button,html input [type= "button " ],input [type= "reset " ],input [type= "submit " ] {
-webkit-appearance:button;
cursor:pointer;
}

.theme-btn.noplay-btn {
padding:0 20px 0 20px;
}

.form-row .theme-btn {
width:200px;
margin-top:25px;
}

select option {
margin:40px;
background:rgba(0,0,0,0.3);
color:#fff;
text-shadow:0 1px 0 rgba(0,0,0,0.4);
}

select option:not(:checked) {
background-color:#fff;
}

.alert-error {
color:#721c24;
text-align:center;
padding:0px 10px;
margin:0;
margin-top:0.5rem !important;
}

.card-blue .form-row .input-box .input-control {
color:#f5f7fa;
}

.card-blue select option {
color:#010e31;
}

.card-blue h1 {
color:#000000;
}

.card-blue h3 {
color:#000000;
}

header.nav .container .nav-right .site-menu >li .dropdown.account-box .login-box .form-container .form-row .theme-btn {
width:140px;
}

@media (max-width:1199px) {
header.nav {
min-height:70px;
}

section.hero .hero-content {
min-height:669px;
}

.row__category {
  margin: 40px 0;
}
.row__poster-item {
height:calc(((100vw / 2) - 20px - 40px - 1.275rem) / 1.777778);
}

.row__category h2,.category-games h1 {
font-size:2rem;
}
}

@media (max-width:991px) {
header.nav {
min-height:65px;
}

section.hero .hero-content {
min-height:500px;
}

.row__category {
margin:0.875rem;
margin-bottom:0;
}

.row__poster-item .game-wrapper {
border-radius:26px;
}

.row__poster-item {
height:calc(((100vw / 2) - 20px - 20px - 0.875rem) / 1.777778);
}

.row__category h2,.category-games h1 {
font-size:1.875rem;
}
}

@media (max-width:767px) {
header.nav {
min-height:65px;
}

header.nav .container {
max-width:100% !important;
padding:0px;
}

section.hero .hero-content {
min-height:352px;
}

section.hero p {
font-size:1.675rem;
margin-top:5em;
}

.row__category {
margin:1.75rem;
margin-bottom:0;
}

.row__poster-item .game-wrapper {
border-radius:20px;
}

.row__poster-item {
height:calc(((100vw / 1.5) - 20px - 0px - 1.75rem) / 1.777778);
}

.row__category h2,.category-games h1 {
font-size:1.375rem;
}
}

@media (max-width:575px) {
header.nav {
min-height:50px;
}

section.hero .hero-content {
min-height:250px;
}

section.hero p {
font-size:1.375rem;
margin-top:5em;
}

.row__category {
margin:0;
}

.row__poster-item .game-wrapper {
border-radius:10px;
}

.row__poster-item {
height:calc(((100vw / 1) - 20px) / 1.777778);
}

.row__category h2,.category-games h1 {
font-size:1rem;
}
}

@media (max-width:350px) {
    header.nav {
        min-height:40px;
    }
}

.swiper-slide img {
    display:flex;
    width:90%;
    justify-content:center;
    align-items:center;
    height:250px; /* Adjust height */
    object-fit:cover;
    border-radius:10px;
}

.swiper-slide {
    display:flex;
    height:200px;
    position:relative;
    top:20px;
    align-items:center;
    font-size:20px;
    color:#fff;
}

img.responsive {max-width:100%;}
.game-details a.btn-play-game {
   margin-top: 0.875rem;
   border-radius: 6rem;
   border: 5px solid white;
   text-shadow:0 1px 0 rgba(0,0,0,0.4);
}



.category-btn {
  background: #00c6ff;
  border: none;
  color: #111;
  font-size: 16px;
  padding: 8px 12px;
  border-radius: 50px;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px rgba(0, 198, 255, 0.4);
}

.category-btn:hover {
  background: #00a0d1;
  color: #fff;
  box-shadow: 0 0 15px rgba(0, 198, 255, 0.6);
}

.game-title {
  color: white;
  font-size: 13px;
  text-align: center;
  margin-top: 5px;
}


.abx-search-wrapper {
  display: flex;
  justify-content: center;
  padding: 1rem 1.5rem;
  background: #121212;
}

.abx-search-box {
  width: 100%;
  max-width: 600px;
  position: relative;
  display: flex;
  align-items: center;
  background-color: #1e1e1e;
  border-radius: 30px;
  padding: 0.5rem 1rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
}

.abx-search-box i.fas.fa-search {
  color: #999;
  margin-right: 10px;
}

.abx-search-box input {
  flex: 1;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 16px;
  outline: none;
}

.abx-search-box button {
  background: transparent;
  border: none;
  color: #ccc;
  font-size: 18px;
  cursor: pointer;
  padding-left: 10px;
}

.search-results {
  margin: -10px auto 20px;
  max-width: 600px;
  background: #1a1a1a;
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
  z-index: 10;
}

.search-results .card {
  background-color: #222;
  color: #fff;
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.search-results .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}

.card-title {
  font-size: 14px;
  margin: 0;
  font-weight: 500;
  color: #fff;
}