/* ===== COMPREHENSIVE SCROLLBAR HIDING ===== */
/* Hide scrollbars globally while preserving scroll functionality */

/* Firefox */
html, body, * {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

/* Webkit browsers (Chrome, Safari, Edge, Opera) */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar,
::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
}

/* Webkit scrollbar components */
::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-corner,
::-webkit-scrollbar-button {
  display: none !important;
  background: transparent !important;
  width: 0 !important;
  height: 0 !important;
}

/* Ensure scrolling still works */
html, body {
  overflow-y: scroll !important;
  overflow-x: hidden !important;
}

/* Additional specificity for stubborn elements */
div::-webkit-scrollbar,
section::-webkit-scrollbar,
main::-webkit-scrollbar,
aside::-webkit-scrollbar,
nav::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* Force hide on all elements with overflow */
[style*="overflow"]::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* Modal/Popup specific scrollbar hiding */
.modal::-webkit-scrollbar,
.modal-content::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.modal-dialog::-webkit-scrollbar,
.popup::-webkit-scrollbar,
.popup-content::-webkit-scrollbar,
[class*="modal"]::-webkit-scrollbar,
[class*="popup"]::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* Bootstrap modal specific */
.modal-dialog .modal-content::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.modal-header::-webkit-scrollbar,
.modal-footer::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* Any element with modal or popup in class name */
[class*="modal"] {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

[class*="popup"] {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
@font-face {
  font-family:"DS-DIGI";
  src: url("../fonts/DS-DIGI.ttf");
}
@font-face {
  font-family:"Lato";
  src: url("../fonts/Lato-Bold.ttf");
  font-weight: 700;
}
@font-face {
  font-family:"Lato";
  src: url("../fonts/Lato-Medium.ttf");
  font-weight: 500;
}
@font-face {
  font-family:"Lato";
  src: url("../fonts/Lato-Regular.ttf");
  font-weight: 400;
}
@font-face {
  font-family:"OpenSans";
  src: url("../fonts/OpenSans-Bold.ttf");
  font-weight: 700;
}
@font-face {
  font-family:"Oswald";
  src: url("../fonts/Oswald-DemiBold.ttf");
  font-weight: 600;
}
@font-face {
  font-family:"Poppins";
  src: url("../fonts/Poppins-SemiBold.otf");
  font-weight: 600;
}
@font-face {
  font-family:"Poppins";
  src: url("../fonts/Poppins-Medium.otf");
  font-weight: 500;
}
@font-face {
  font-family:"Poppins";
  src: url("../fonts/Poppins-Regular.otf");
  font-weight: 400;
}
:root {
  --c_primary: #B92C2C;
  --c_secondary: #caab71;
  --c_black: #000000;
  --c_dark: #1A202C;
  --c_gray: #222939;
  --c_light: #f4f4f5;
  --c_white: #ffffff;

  --bg_primary: #B92C2C;
  --bg_secondary: #caab71;
  --bg_black: #000000;
  --bg_dark: #1A202C;
  --bg_gray: #222939;
  --bg_light: #f4f4f5;
  --bg_white: #ffffff;

  --ff_DS_DIGI:"DS-DIGI", sans-serif;
  --ff_Lato:"Lato", sans-serif;
  --ff_OpenSans:"OpenSans", sans-serif;
  --ff_Oswald:"Oswald", sans-serif;
  --ff_Poppins:"Poppins", sans-serif;

  --fs_53:3.3125rem;
  --fs_50:3.125rem;
  --fs_41:2.5625rem;
  --fs_30:1.875rem;
  --fs_26:1.625rem;
  --fs_20:1.25rem;
  --fs_16:1rem;
  --fs_15:0.9375rem;
  --fs_14:0.875rem;
  --fs_13:0.8125rem;
  --fs_12:0.75rem;
  --fs_11:0.6875rem;
  --fs_10:0.625rem;
  --fs_9:0.5625rem;

  --space_top:7.375rem;
  --space_bottom:4.365rem;

  --rounded_def:0.75rem;
}
body {
  color: var(--c_light);
  font-family: var(--ff_Poppins);
  background-color: var(--bg_gray);
  padding: var(--space_top) 0rem var(--space_bottom);
}
a{color: var(--c_secondary);}

.c_primary{color: var(--c_primary);}
.c_secondary{color: var(--c_secondary);}
.c_black{color: var(--c_black);}
.c_dark{color: var(--c_dark);}
.c_gray{color: var(--c_gray);}
.c_light{color: var(--c_light);}
.c_white{color: var(--c_white);}

.bg_primary{background-color: var(--bg_primary);}
.bg_secondary{background-color: var(--bg_secondary);}
.bg_black{background-color: var(--bg_black);}
.bg_dark{background-color: var(--bg_dark);}
.bg_gray{background-color: var(--bg_gray);}
.bg_light{background-color: var(--bg_light);}
.bg_white{background-color: var(--bg_white);}

.ff_DS_DIGI{font-family: var(--ff_DS_DIGI);}
.ff_Lato{font-family: var(--ff_Lato);}
.ff_OpenSans{font-family: var(--ff_OpenSans);}
.ff_Oswald{font-family: var(--ff_Oswald);}
.ff_Poppins{font-family: var(--ff_Poppins);}

.fs_53{font-size: var(--fs_53);}
.fs_50{font-size: var(--fs_50);}
.fs_41{font-size: var(--fs_41);}
.fs_30{font-size: var(--fs_30);}
.fs_26{font-size: var(--fs_26);}
.fs_20{font-size: var(--fs_20);}
.fs_16{font-size: var(--fs_16);}
.fs_15{font-size: var(--fs_15);}
.fs_14{font-size: var(--fs_14);}
.fs_13{font-size: var(--fs_13);}
.fs_12{font-size: var(--fs_12);}
.fs_11{font-size: var(--fs_11);}
.fs_10{font-size: var(--fs_10);}
.fs_9{font-size: var(--fs_9);}

/* */
.btn{
  font-size: var(--fs_9);
  font-weight: 600;
  font-family: "poppins";
  padding: 1em 1.2em;
  text-transform: uppercase;
}
.btn_md{
  font-size: var(--fs_15);
  padding: 0.6em 1.2em;
}
.btn_primary{
  --bs-btn-bg: var(--bg_primary);
  --bs-btn-border-color: var(--c_secondary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #bb2d3b;
  --bs-btn-hover-border-color: #b02a37;
  --bs-btn-focus-shadow-rgb: 225,83,97;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #b02a37;
  --bs-btn-active-border-color: #a52834;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bg_primary);
  --bs-btn-disabled-border-color: var(--bg_primary);
}
.btn_secondary{
  color: var(--c_dark);
  border: 1px solid var(--c_secondary);
  background-image: -o-linear-gradient(left, #aa8f68 0%, #e2bf82 100%);
  background-image: -webkit-gradient(linear, left top, right top, from(#aa8f68), to(#e2bf82));
  background-image: linear-gradient(90deg, #aa8f68 0%, #e2bf82 100%);
}
.btn_secondary:hover,
.btn_secondary:active{
  background-image: -o-linear-gradient(left, #aa8f68 0%, #aa8f68 100%);
  background-image: -webkit-gradient(linear, left top, right top, from(#aa8f68), to(#aa8f68));
  background-image: linear-gradient(90deg, #aa8f68 0%, #aa8f68 100%);
}
.btn_dark{
  color: var(--c_white);
  border: 1px solid var(--c_white);
  background: var(--bg_dark);
}
.btn_dark:hover,
.btn_dark:active{
  background: var(--bg_gray);
}
.btn:active{
  -webkit-transform: scale(0.95);
      -ms-transform: scale(0.95);
          transform: scale(0.95);
}
.form-control{
  font-size: var(--fs_12);
  padding: 0.8em 1.2em;
  border: none;
  background-color: rgba(244, 244, 245, 0.12);
}
.dropdown-menu {
  --bs-dropdown-padding-x: 0.5rem;
  --bs-dropdown-padding-y: 0.5rem;
  --bs-dropdown-border-radius: 0.8rem;
  --bs-dropdown-link-active-bg: var(--bg_primary);

  font-size: var(--ff_Poppins);
}
.dropdown-item{
  border-radius: 0.5rem;
}
.hide_scrollbar::-webkit-scrollbar {
  display: none;
}
.hide_scrollbar {
  -ms-overflow-style: none; 
  scrollbar-width: none; 
}

@media(min-width:1200px){
  html{
    font-size: 13px;
  }
  .container{
    max-width: 90rem;
  }
  .container_sm{
    max-width: 69.375rem;
  }
}
@media(min-width:1400px){
  html{
    font-size: 16px;
  }
}
@media(min-width:1600px){
  html{
    font-size: 18px;
  }
}
@media(min-width:1900px){
  html{
    font-size: 20px;
  }
}

/* ____________________ start home page ____________________ */
/* ..... start header .....*/
.header {
  background-color: var(--bg_dark);
}
.header_logo{
  width: 4.75rem;
  height: 2.875rem;
  -o-object-fit: contain;
     object-fit: contain;
}
/* header top */
.header_top{
  padding: 1.25rem 0rem;
}
.header_lngIcon{
  width: 1.5rem;
  height: 1.5rem;
}

/* header bottom menu */
.header_bottom{
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: 100%;
  background-color: var(--bg_secondary);
  background-image: -o-linear-gradient(bottom, #aa8f68 0%, #e2bf82 100%);
  background-image: -webkit-gradient(linear, left bottom, left top, from(#aa8f68), to(#e2bf82));
  background-image: linear-gradient(0deg, #aa8f68 0%, #e2bf82 100%);
}
.header_navbar .navbar-nav{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.header_navbar .nav-item{
  color: var(--c_dark);
  font-size: var(--fs_12);
  width: 20%;
  text-align: center;
}
.header_navbar .nav-link{
  position: relative;
}
.header_navbar .nav_icon{
  font-size: 2em;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  margin: auto;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.header_navbar .nav_icon .nav_iconImg{
  width: 1em;
  height: 1em;
  border-radius: 50%;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.header_navbar .navbar-nav{
  position: relative;
}
.nav_indicator{
  position: absolute;
  top: 0px;
  left: 10%;
  width: 5rem;
  height: 5rem;
  /* background-color: var(--bg_white); */
  -webkit-transform: translate(-50%,-57%);
      -ms-transform: translate(-50%,-57%);
          transform: translate(-50%,-57%);
  border-radius: 100%;
  z-index: -1;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  -webkit-transform-origin: bottom center;
      -ms-transform-origin: bottom center;
          transform-origin: bottom center;
}
.nav_indicator::before{
  content: "";
  display: block;
  position: absolute;
  top: 0rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  height: 100%;
  width: 240%;
  background-image: url("../img/home/menu-bg.svg");
  background-size: contain;
  background-repeat: no-repeat;
}
.header_navbar .nav-item:hover{
  color: var(--c_primary);
}
.header_navbar .nav-item.active:nth-of-type(1) ~ .nav_indicator{
  left: 10%;
}
.header_navbar .nav-item.active:nth-of-type(2) ~ .nav_indicator{
  left: 30%;
}
.header_navbar .nav-item.active:nth-of-type(3) ~ .nav_indicator{
  left: 50%;
}
.header_navbar .nav-item.active:nth-of-type(4) ~ .nav_indicator{
  left: 70%;
}
.header_navbar .nav-item.active:nth-of-type(5) ~ .nav_indicator{
  left: 90%;
}
.header_navbar .nav-item.active .nav_icon{
  -webkit-transform: translateY(-80%);
      -ms-transform: translateY(-80%);
          transform: translateY(-80%);
}
.header_navbar .nav-item.active .nav_icon .nav_iconImg{
  -webkit-transform: scale(3) translateY(-7%);
      -ms-transform: scale(3) translateY(-7%);
          transform: scale(3) translateY(-7%);
}
.header_navbar .nav_badge{
  font-size: var(--fs_9);
  color: var(--c_white);
  position: absolute;
  top: 0.3rem;
  left: 50%;
  background-color: var(--bg_primary);
  border-radius: 0.5rem;
  padding: 0.2rem 0.5rem;
}
.header_marquee{
  font-size: var(--fs_11);
  padding: 0.5rem;
  background-color: var(--bg_primary);
  height: 2rem;
  overflow: hidden;
}
.btn_liveHelp{
  font-size: var(--fs_16);
  position: fixed;
  z-index: 100;
  right: 1rem;
  bottom: 5.5rem;
  border-radius: 50rem;
  padding: 0.6em 1.2em;
  background: #484c56 !important;
}
.btn_liveHelp i{
  color: var(--c_secondary);
}
@media(max-width:767.98px){
  :root{
    --space_top: 5.8rem;
    --space_bottom: 3.8rem;
  }
  .header_top {
    padding: 0.8rem 0rem;
  }
  .header_logo {
    width: 3.7rem;
    height: 2.2rem;
  }
  .header_navbar .nav-item {
    font-size: var(--fs_10);
  }
  .nav_indicator {
    width: 4rem;
    height: 4rem;
  }
  .btn_liveHelp {
    font-size: var(--fs_12);
    right: 0.8rem;
    bottom: 4.5rem;
  }
}
/* ..... end header .....*/

/* ..... start main .....*/

/* main area */
.main{}
.main_left,
.main_right{
  padding-top: 0.5rem;
}
.main_left{-webkit-box-ordinal-group: 3;-ms-flex-order: 2;order: 2;}
.main_right{-webkit-box-ordinal-group: 2;-ms-flex-order: 1;order: 1;}
.main_center{-webkit-box-ordinal-group: 4;-ms-flex-order: 3;order: 3;}
.main_right{
  background-color: var(--bg_gray);
  background-image: url("../img/home/light.png"),url("../img/home/dice.png");
  background-repeat: no-repeat;
  background-position: top -3.125rem left 55%, top right -3.125rem;
  background-size: 13.125rem, 11.875rem;
  background-blend-mode: screen,normal;
}
@media(min-width:768px){
  .main_left{-webkit-box-ordinal-group: 2;-ms-flex-order: 1;order: 1;}
  .main_right{-webkit-box-ordinal-group: 3;-ms-flex-order: 2;order: 2;}
  .main_center{-webkit-box-ordinal-group: 4;-ms-flex-order: 3;order: 3;}
}
@media(min-width:1200px){
  .main_left{-webkit-box-ordinal-group: 2;-ms-flex-order: 1;order: 1;}
  .main_right{-webkit-box-ordinal-group: 4;-ms-flex-order: 3;order: 3;}
  .main_center{-webkit-box-ordinal-group: 3;-ms-flex-order: 2;order: 2;}

  .main_left,
  .main_right{
    width: 25%;
  }
  .main_center{
    width: 50%;
  }
}
@media(max-width:767.98px){
  .main_left{
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
  .main_right{
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  .main_center{
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
  }
}

/* action cards */
.card_wrap{
  width: 100%;
  height: 0rem;
  padding-bottom: 53%;
  padding-bottom: 11.25rem;
  background-color: #0F1621;
  background-image: url("../img/home/card-bg.png");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: contain;
  border-radius: var(--rounded_def);
  position: relative;
}
.card_wrap_2{
  background-image: url("../img/home/card-bg-2.png");
  background-position: left bottom;
}
.card_box{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.card_content{
  width: 55%;
  width: calc(100% - 10rem);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  z-index: 1;
  padding: 0.75rem 0px 0.75rem 1.25rem;
}
.card_content>*{
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.card_wrap_2 .card_content{
  padding: 0.75rem 1.25rem;
  width: 100%;
}
.card_imgBox{
  width: 45%;
  width: 10rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.card_img{
  width: 100%;
  /* transform: scale(1.4); */
  -webkit-transform-origin: right bottom;
      -ms-transform-origin: right bottom;
          transform-origin: right bottom;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.card_img_1{
  -webkit-transform: scale(1.6);
      -ms-transform: scale(1.6);
          transform: scale(1.6);
}
.card_img_2{
  -webkit-transform: scale(1.4);
      -ms-transform: scale(1.4);
          transform: scale(1.4);
}
.card_img_3{
  -webkit-transform: scale(1.2);
      -ms-transform: scale(1.2);
          transform: scale(1.2);
}
.card_grd{
  margin-left: -1.25rem;
  padding-left: 1.25rem;
  background-image: -o-linear-gradient(left, rgba(185,44,44,0.9999999999999999) 0%, rgba(0,0,0,0) 100%);
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(185,44,44,0.9999999999999999)), to(rgba(0,0,0,0)));
  background-image: linear-gradient(90deg, rgba(185,44,44,0.9999999999999999) 0%, rgba(0,0,0,0) 100%);
}
.card_box .btn{
  min-width: 5.5rem;
}

/* transaction table */
.transaction_card{
  border-radius: var(--rounded_def);
  background-color: var(--bg_dark);
  background-image: url("../img/home/transaction-bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.live{
  -webkit-animation: blinkme 1.5s linear infinite;
          animation: blinkme 1.5s linear infinite;
}
@-webkit-keyframes blinkme {
  0% {
    opacity:0
  }
  38% {
    opacity:0
  }
  39% {
    opacity:1
  }
  100% {
    opacity:1
  }
}
@keyframes blinkme {
  0% {
    opacity:0
  }
  38% {
    opacity:0
  }
  39% {
    opacity:1
  }
  100% {
    opacity:1
  }
}
.transaction_card .table{
  font-family: var(--ff_Lato);
  font-size: var(--fs_9);
}
.transaction_card .table th{
  text-align: center;
  background-color: var(--bg_primary);
}
.transaction_card .table td{
  background-color: transparent;
}
.sec_title{
  font-size: var(--fs_15);
  margin-bottom: 0.8em;
}
.sec_title::after,
.underline::after{
  content: "";
  display: block;
  width: 2.625rem;
  height: 2px;
  border-radius: 2px;
  margin-top: 0.25rem;
  background-color: var(--bg_secondary);
}
.sec_title.text-center::after{
  margin-left: auto;
  margin-right: auto;
}


/* image card */
.img_wrap{
  display: block;
  width: 100%;
  height: 0rem;
  padding-bottom: 53%;
  border-radius: var(--rounded_def);
  position: relative;
  text-decoration: none;
  overflow: hidden;
}
.img_wrap img{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.owl-dots{
  text-align: center;
}
.owl-dot{
  padding-top: 0.5rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--bg_white) !important;
  margin: 0rem 0.2rem;
}
.owl-dot.active{
  background: var(--bg_primary) !important;
}
.vertical_center{
  vertical-align: middle;
}
.icon__crown{
  position: relative;
}
.icon__crown img{
  position: absolute;
  top: 0rem;
  left: 0rem;
  width: 0.9em;
  -webkit-transform: translate(-50%,-72%);
      -ms-transform: translate(-50%,-72%);
          transform: translate(-50%,-72%);
  z-index: -1;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

/* match card */
.match_card{
  color: var(--c_white);
  text-decoration: none;
  display: block;
  border-radius: var(--rounded_def);
  background-color: var(--bg_dark);
  background-image: url("../img/home/match-bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.team_logo{
  width: 4rem;
  height: 4rem;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
  margin: auto;
}
.match_vs{
  width: 2.8rem;
  height: 2.8rem;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
  margin: auto;
}
.match_info{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.match_team{
  font-size: var(--fs_10);
  font-family: var(--ff_Lato);
  width: 40%;
  text-align: center;
  position: relative;
  background-repeat: repeat-x;
  background-size: 100% 100%;
}
.match_team::before{
  content: "";
  position: absolute;
  top:0px;
  width: 0.625rem;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position:center;
}
.match_team_1{
  background-image:url("../img/home/bg_left_center.png");
}
.match_team_1::before{
  background-image:
    url("../img/home/bg_left.png");
  left: 0px;
  -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
          transform: translateX(-100%);
}
.match_team_2{
  background-image:url("../img/home/bg_right_center.png");
}
.match_team_2::before{
  background-image:
    url("../img/home/bg_right.png");
  right: 0px;
  -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
          transform: translateX(100%);
}
.match_time{
  color: var(--c_dark);
  font-size: var(--fs_12);
  font-family: var(--ff_DS_DIGI);
  text-align: center;
  width: 20%;
  background-image: 
    url("../img/home/bg_center_left.png"),
    url("../img/home/bg_center_right.png"),
    url("../img/home/bg_center_center.png");
  background-repeat: no-repeat,no-repeat,repeat-x;
  background-size: contain,contain,100% 100%;
  background-position: left,right,center;
}
/* site tabs */
.site_tabs{
  font-size: var(--fs_13);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  overflow-x: auto;
  padding: 0rem;
}
.site_tab{
  margin-right: 0.8rem;
  cursor:pointer;
  position: relative;
}
.site_tab a{
  display: block;
  text-decoration: none;
  position: relative;
}
.site_tab img{
  width: 4.5rem;
  height: 5rem;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: bottom center;
     object-position: bottom center;
  position: relative;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.site_tab:hover img{
  -webkit-transform: scale(1.05) translateY(-10%);
      -ms-transform: scale(1.05) translateY(-10%);
          transform: scale(1.05) translateY(-10%);
}
.site_tab::before{
  content: "";
  display: block;
  width: 4rem;
  height: 4rem;
  border-radius: 0.625rem;
  background-color: var(--bg_gray);
  position: absolute;
  bottom: 0rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}
/* filter tabs */
.filter_tabs{
  font-size: var(--fs_13);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  padding: 0rem 0.8rem;
  border-radius: 50rem;
  background-image: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.9999999999999999) 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.9999999999999999)));
  background-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.9999999999999999) 100%);
  overflow-x: auto;
}
.filter_tab{
  padding: 0.3rem;
  margin-right: 1.2rem;
  border-bottom: 2px solid transparent;
  cursor:pointer;
}
.filter_tab:hover{
  color: var(--c_secondary);
}
.filter_tab.active{
  color: var(--c_secondary);
  border-color: var(--c_secondary);
}
/* game cards */
.game_card{
  color: var(--c_white);
  text-decoration: none;
  display: block;
}
.game_imgBox{
  position: relative;
  height: 0rem;
  padding-bottom: 72.03%;
  margin-bottom: 0.4rem;
}
.game_badge{
  position: absolute;
  top: -0.3rem;
  left: -0.3rem;
  width: 1.5rem;
  z-index: 1;
}
.game_img,
.game_actBtn{
  position: absolute;
  top: 0rem;
  left: 0rem;
  width: 100%;
  height: 100%;
  border-radius: 0.625rem;
}
.game_img{
  -o-object-fit: cover;
     object-fit: cover;
}
.game_actBtn{
  display: -ms-grid;
  display: grid;
  place-items: center;
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.game_card:hover .game_actBtn{
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);

}
.game_name{
  font-size: var(--fs_11);
  text-align: center;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.game_card:hover .game_name{
  color: var(--c_secondary);
}

/* highlighted games */
.highlighted_games{
  margin-bottom: -3rem;
}
.highlighted_games .game_imgBox{
  padding-bottom: 138.2165%;
}

/* partners */
.partners_section{
  color: var(--c_dark);
  /* padding-top: 1rem; */
  /* padding-bottom: 1rem; */
  background-color: var(--bg_light);
  text-align: center
}
.partners_content{
  max-width: 100%;
  margin: auto;
}

/* footer bottom info */
.footer-bottom-info{
  color: var(--c_dark);
  text-align: center;
  padding: 1rem 0;
  margin-top: 1rem;
}

.footer-bottom-info h3{
  font-size: var(--fs_14);
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--c_dark);
}

.footer-bottom-info p{
  font-size: var(--fs_9);
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.footer-bottom-info img{
  max-width: 100%;
  height: auto;
  margin: 0.5rem 0;
}

/* modal */
.modal{
  text-transform: uppercase;
}
.modal-content{
  border-radius: 1.25rem;
  background-color: var(--bg_dark);
}
.modal_img{
  margin-bottom: -1.5rem;
  -webkit-transform: scale(1.2);
      -ms-transform: scale(1.2);
          transform: scale(1.2);
  width: 100%;
  -webkit-transform-origin: left bottom;
      -ms-transform-origin: left bottom;
          transform-origin: left bottom;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
@media(min-width:992px){
  .modal_lg .modal-dialog{
    max-width: 50rem;
  }
}
@media(min-width:1200px){
  .modal_lg .modal-dialog{
    max-width: 64rem;
  }
}
@media(max-width:991.98px){
  .modal_img{
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
    width: 60%;
    -webkit-transform-origin: right bottom;
        -ms-transform-origin: right bottom;
            transform-origin: right bottom;
    margin-left: auto;
    display: block;
  }
}
/* ..... end main .....*/

/* ____________________ end home page ____________________ */

/* ____________________ start promotion page ____________________ */
.title_box{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  max-width: calc(100% - 2rem);
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  position: relative;
  z-index: 1;
  background: -webkit-gradient(linear,left top, right top,color-stop(40%, #caab71), to(#caab711c));
  background: -o-linear-gradient(left,#caab71 40%, #caab711c 100%);
  background: linear-gradient(to right,#caab71 40%, #caab711c 100%);
  text-transform: uppercase;
}
.title_boxContent{
  padding-right: 2rem;
}
.title_box>*{
  position: relative;
  z-index: 1;
}
.title_box::before{
  content: "";
  display: block;
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  border-radius: inherit;
  background: -webkit-gradient(linear,left top, right top,from(var(--bg_primary)),to(var(--bg_dark)));
  background: -o-linear-gradient(left,var(--bg_primary),var(--bg_dark));
  background: linear-gradient(to right,var(--bg_primary),var(--bg_dark));
}
.title_boxContent{
  -webkit-box-flex:1;
      -ms-flex-positive:1;
          flex-grow:1;
}
.title_boxTitle{
  font-size: var(--fs_15);
  font-weight: 400;
  margin-bottom: 0rem;
}
.title_boxIcon{
  width: 3rem;
  -webkit-transform: scale(2.4) translateX(10%);
      -ms-transform: scale(2.4) translateX(10%);
          transform: scale(2.4) translateX(10%);
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.promoCard{
  border-radius: var(--rounded_def);
  background-repeat: no-repeat;
  background-position: top 2rem center, center;
  background-size: 4rem,cover;
  text-align: center;
  padding: 1rem 0.5rem 0.6rem;
  text-transform: uppercase;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  min-height: 8.6rem;
  position: relative;
  overflow: hidden;
}
.promoCard.disabled{
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  opacity: 0.3;
}
.promoCard>*{
  position: relative;
}
.promoCard::before{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 110%;
  height: 4rem;
  border-top: 2px solid var(--c_secondary);
  background-color: var(--bg_gray);
  background-image: url("../img/promotion/bg-dots.png");
  background-repeat: repeat-x;
  background-size: cover;
  background-position: 50%;
  -webkit-transform: rotate(5deg) translate(-50%,45%);
      -ms-transform: rotate(5deg) translate(-50%,45%);
          transform: rotate(5deg) translate(-50%,45%);
}
.promoCard_content{
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  margin-bottom: 0.5rem;
}
.promoCard_title{
  font-size: var(--fs_12);
  font-family: var(--ff_Oswald);
  line-height: 1;
  margin-bottom: 0.2em;
}
.promoCard_grd{
  font-size: 0.375rem;
  padding: 0.3em 1em;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  margin: auto;
  background-image: -o-linear-gradient(left, rgba(185,44,44,0.9999999999999999) 0%, rgba(0,0,0,0) 100%);
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(185,44,44,0.9999999999999999)), to(rgba(0,0,0,0)));
  background-image: linear-gradient(90deg, rgba(185,44,44,0.9999999999999999) 0%, rgba(0,0,0,0) 100%);
}
.promoCard_price{
  font-size: var(--fs_26);
  font-family: var(--ff_Oswald);
  text-shadow: -0.05rem -0.05rem 0rem var(--c_dark);
}
.promoCard_btnBox .btn{
  padding: 0.5em 1em;
  border-color: var(--c_light);
}
/* ____________________ end promotion page ____________________ */