* {
    margin: 0;
    box-sizing: border-box;
    font-family: "Prompt", sans-serif;
  }
  
  html {
    background-color: #333;
  }
  
  main {
    flex: 1;
  }
  
  body {
    background-image: url("../images/bg.png");
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed !important;
    background-size: cover;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* background: #f7f7f7 !important; */
  }

  @media only screen and (max-width: 600px) {
              body {
    background-image: url("../images/bg-moblie.png");
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed !important;
    background-size: cover;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* background: #f7f7f7 !important; */
  }

        }
  
  .shadow_container {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
      rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  }
  
  .bg-head {
    background-image: linear-gradient(
      to top,
      #000000,
      #0d0d0d,
      #161616,
      #1d1d1d,
      #252525
    );
  }
  
  .head-second {
    background-color: #0171ce;
   
  }
  
  .uppp {
    -webkit-transition: all 2s ease-in-out 0s;
    -o-transition: all 2s ease-in-out 0s;
    -moz-transition: all 2s ease-in-out 0s;
    transition: all 2s ease-in-out 0s;
    animation: up 2s ease-in-out infinite;
  }
  
  @keyframes up {
    0% {
      transform: translatey(0px) rotate(0deg);
    }
  
    50% {
      transform: translatey(-10px) rotate(0deg);
    }
  }
  
  footer {
    margin-top: 60px;
    background-image: radial-gradient(
      circle,
      #000000,
      #0a0a0a,
      #121212,
      #181818,
      #1d1d1d
    );
  }
  
  table {
    text-align: center;
  }
  
  table td {
    vertical-align: middle;
  }
  
  .pointer {
    cursor: pointer;
  }
  
  .default {
    cursor: default;
  }
  
  p {
    font-size: clamp(16px, 2.5vw, 18px);
    margin-bottom: 3px !important;
  }
  
  h1 {
    font-size: clamp(34px, 2.5vw, 40px);
  }
  
  h2 {
    font-size: clamp(24px, 2.5vw, 28px) !important;
  }
  
  a {
    text-decoration: none !important;
  }
  
  .text-orange {
    color: #ff8400;
  }
  
  .text-yellow {
    color: #ffe06a;
  }
  
  .text-gray {
    color: #aeaeae;
  }
  
  p.text-danger {
    color: #ffc2c2 !important;
  }
  
  .text-danger {
    color: #ffc2c2 !important;
  }
  
  span.text-danger {
    color: #ffc2c2 !important;
  }
  
  .text-red {
    color: #ff1c1c;
  }
  
  .text-green {
    color: #115700;
  }
  
  .text-blue {
    color: #003467;
  }
  
  ::-webkit-scrollbar {
    width: 3px;
    height: 2px;
  }
  
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #edd58a 0%, #af7f36 100%) !important;
    border-radius: 25px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background-color: #000;
    border-radius: 25px;
  }
  
  ::-webkit-scrollbar-track {
    background-color: #000;
  }
  
  ::-moz-selection {
    /* Code for Firefox */
    color: #fff;
    background: #af7f36;
  }
  
  ::selection {
    color: #fff;
    background: #af7f36;
  }
  
  /* ==================== button style ==================== */
  
  button.btn-transparent {
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    border: none !important;
    cursor: pointer !important;
    overflow: hidden !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0px !important;
    border-radius: 0px !important;
  }
  
  .btn {
    position: relative;
    overflow: hidden;
    border-radius: 15px !important;
    /* box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px; */
    border: 0;
    font-weight: bold !important;
  }
  
  .btn:focus {
    outline: none;
    box-shadow: none;
    /* box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px !important; */
  }
  
  button {
    transition: background 400ms;
    color: #fff;
    outline: 0;
    border: 0;
    border-radius: 0;
    cursor: pointer;
  }
  
  span.ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: ripple 600ms linear;
    background-color: rgba(255, 255, 255, 0.1);
  }
  
  @keyframes ripple {
    to {
      transform: scale(4);
      opacity: 0;
    }
  }
  
  .btn-danger {
    background-image: linear-gradient(180deg, #c00101 0%, #4f0a0a 100%);
  }
  
  .btn-danger:hover {
    background-image: linear-gradient(180deg, #c00101 0%, #c00101 100%);
  }
  
  a.btn-one {
    color: #fff;
    background-image: linear-gradient(180deg, #c00101 0%, #c00101 100%);
    border: none;
    padding: 9px 25px;
    transition: all 0.5s;
    box-shadow: inset 0px 0px 8px rgb(0 0 0 / 50%);
  }
  
  a.btn-one:hover {
    color: #fff;
    background-image: linear-gradient(180deg, #c00101 0%, #c00101 100%);
    box-shadow: none !important;
  }
  
  button.btn-one {
    color: #fff;
    background-image: linear-gradient(180deg, #a4fe22 0%, #2c9f00 100%);
    border: none;
    padding: 9px 25px;
    transition: all 0.5s;
    box-shadow: inset 0px 0px 8px rgb(0 0 0 / 50%);
  }
  
  button.btn-one:hover {
    color: #fff;
    background-image: linear-gradient(180deg, #c00101 0%, #c00101 100%);
    box-shadow: none !important;
  }
  
  button.btn-two {
    color: #fff;
    background-image: linear-gradient(180deg, #404040 0%, #1c1c1c 100%);
    border: none;
    padding: 9px 25px;
    transition: all 0.5s;
    box-shadow: inset 0px 0px 8px rgb(0 0 0 / 50%);
  }
  
  button.btn-two:hover {
    color: #fff;
    background-image: linear-gradient(180deg, #1c1c1c 0%, #1c1c1c 100%);
    box-shadow: none !important;
  }
  
  a.btn-two {
    color: #fff;
    background-image: linear-gradient(180deg, #404040 0%, #1c1c1c 100%);
    border: none;
    padding: 9px 25px;
    transition: all 0.5s;
    box-shadow: inset 0px 0px 8px rgb(0 0 0 / 50%);
  }
  
  a.btn-two:hover {
    color: #fff;
    background-image: linear-gradient(180deg, #1c1c1c 0%, #1c1c1c 100%);
    box-shadow: none !important;
  }
  
  .-zoom {
    animation: x-zoom 0.6s infinite alternate;
  }
  
  @keyframes x-zoom {
    0% {
      transform: scale(0.95);
    }
  
    100% {
      transform: scale(1);
    }
  }
  
  /* ========================== navbar ========================== */
  
  .text-name {
    color: #fff;
    cursor: default;
  }
  
  .text-name:hover {
    color: #edd58a;
  }
  
  .column:hover .text-name {
    color: #edd58a !important;
  }
  
  .sub-menu {
    color: #fff !important;
    font-size: bold !important;
  }
  
  .sub-menu:hover {
    color: #212121 !important;
  }
  
  .-account {
    color: #e4d9ff !important;
    font-size: bold !important;
  }
  
  .-account:hover {
    color: #000 !important;
  }
  
  .-logout {
    color: #ff4747 !important;
    font-size: bold !important;
  }
  
  .-logout:hover {
    color: #000 !important;
  }
  
  a.js-ag-nav_link {
    position: relative;
    color: #000;
    cursor: pointer;
  }
  
  .js-ag-nav_link:hover {
    text-decoration: none;
    color: #fff !important;
  }
  
  .js-ag-active {
    color: #fff !important;
  }
  
  .js-ag-active:before,
  .js-ag-nav_link:before {
    content: "";
    height: 3px;
    background-color: #fff;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: -17px;
    -webkit-transition: 0.3s cubic-bezier(0.45, 1.06, 0.58, 1.31);
    -moz-transition: 0.3s cubic-bezier(0.45, 1.06, 0.58, 1.31);
    -o-transition: 0.3s cubic-bezier(0.45, 1.06, 0.58, 1.31);
    transition: 0.3s cubic-bezier(0.45, 1.06, 0.58, 1.31);
  }
  
  .js-ag-active:before,
  .js-ag-nav_link:hover:before {
    left: 0;
    right: 0;
  }
  
  /* ==================== menu mobile ==================== */
  
  .head_mobile {
    background-color: transparent;
  }
  
  .header-mobile {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 100;
  }
  
  .navbar-mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 4rem;
    margin: 0 auto;
  }
  
  .menu-mobile {
    position: fixed;
    left: 0;
    bottom: 0;
    display: grid;
    align-content: center;
    width: 100%;
    height: 4.2rem;
    background-color: #00bae0;
    border-radius: 10px 10px 0px 0px;
}
  
  .menu-list-mobile {
    display: flex;
    align-items: center;
    justify-content: space-around;
    list-style-type: none;
  }
  
  .menu-item-mobile:nth-child(3) {
    z-index: 10;
  }
  
  .menu-link-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: none;
    outline: none;
    color: #fff;
    text-decoration: none;
  }
  
  .menu-link-mobile.is-active {
    position: relative;
    color: #edd58a;
    transition: all 0.35s ease;
  }
  
  .menu-icon-mobile {
    font-size: 1.35rem;
    line-height: 1;
    color: inherit;
    margin-bottom: 5px;
    width: 90%;
  }
  
  .menu-name-mobile {
    display: none;
    font-size: clamp(10px, 3.5vw, 16px);
    line-height: 1.25;
    margin-bottom: 40px;
    visibility: hidden;
    text-transform: capitalize;
  }
  
  @media only screen and (min-width: 280px) {
    header {
      display: none !important;
    }
  
    /* ul.nav {
          display: none;
      } */
  
    .menu-name-mobile {
      display: block;
      visibility: visible;
    }
  
  
  
    #qr_img {
      position: fixed;
      top: 40%;
      width: 120px;
      z-index: 9999;
      right: 10px;
      padding: 10px 0 0;
      -webkit-transition: all .5s ease-in-out 0s;
      -o-transition: all .5s ease-in-out 0s;
      -moz-transition: all .5s ease-in-out 0s;
      transition: all .5s ease-in-out 0s;
      animation: up 5s ease-in-out infinite;
      display: block;
  }
  
  
    .mar-top {
      margin-top: 10px;
    }
  
    .logo-mobile {
      display: inline-block;
    }
  }
  
  @media only screen and (min-width: 576px) {
    header {
      display: none !important;
    }
  
    #qr_img {
      position: fixed;
      top: 40%;
      width: 190px;
      z-index: 9999;
      right: 10px;
      padding: 10px 0 0;
      -webkit-transition: all .5s ease-in-out 0s;
      -o-transition: all .5s ease-in-out 0s;
      -moz-transition: all .5s ease-in-out 0s;
      transition: all .5s ease-in-out 0s;
      animation: up 5s ease-in-out infinite;
      display: block;
  }
  
    .mar-top {
      margin-top: 10px;
    }
  }
  
  @media only screen and (max-width: 768px) {
    /* ul.nav {
      display: inline-flex;
    } */
  
    header {
      display: none !important;
    }
  
    #qr_img {
      position: fixed;
      top: 40%;
      width: 190px;
      z-index: 9999;
      right: 10px;
      padding: 10px 0 0;
      -webkit-transition: all .5s ease-in-out 0s;
      -o-transition: all .5s ease-in-out 0s;
      -moz-transition: all .5s ease-in-out 0s;
      transition: all .5s ease-in-out 0s;
      animation: up 5s ease-in-out infinite;
      display: block;
  }
  
    /* .navbar-mobile {
      display: none;
    } */
  
    .mar-top {
      margin-top: 10px;
    }
  }
  
  @media only screen and (min-width: 1000px) {
    header {
      display: inline-block !important;
    }
    .navbar-mobile {
      display: none;
    }
  
    .header-mobile {
      display: none;
    }
  
    #qr_img {
      display: block;
    }
  
    .mar-top {
      margin-top: 80px;
    }
  
    .logo-mobile {
      display: none;
    }
  }
  
  /* ==================== card game ==================== */
  
  .cards_games {
    margin: 20px 0px;
    background-image: url("../images/bggame.jpeg");
    background-position: center;
    background-size: cover;
    border: 1px solid #ffe9a566 !important;
    border-radius: 20px !important;
  }
  
  .a-game {
    text-decoration: none;
  }
  
  .a-game button {
    color: #fff;
  }
  
  .a-game button:hover {
    color: rgba(255, 255, 255, 0.7);
  }
  
  .card.card_game {
    border: none;
    background-color: transparent;
  }
  
  .button-float {
    border: 2px solid #fff !important;
    padding: 7px 0px;
    color: #8f671f !important;
    background-image: radial-gradient(
      circle,
      #f4eed7,
      #d9cca6,
      #c0aa78,
      #a7884b,
      #8f671f
    );
    animation: float 1s linear alternate infinite;
    transition: 3s all;
    border-radius: 30px !important;
  }
  
  .button-float:hover {
    color: #8f671f !important;
    background-image: radial-gradient(circle, #fff, #fff);
  }
  
  @keyframes float {
    50% {
      transform: translateY(-px);
    }
  
    100% {
      transform: translateY(-7px);
    }
  }
  
  .heading {
    display: grid;
    grid-template-columns: minmax(50px, 1fr) auto minmax(50px, 1fr);
    align-items: center;
    text-align: center;
    gap: 15px;
    margin-bottom: 20px;
    color: #2c2c2c;
    letter-spacing: 0.05em;
    text-shadow: 4px 4px 0px #d5d5d5, 7px 7px 0px rgba(0, 0, 0, 0.2);
    font-size: clamp(30px, 2.5vw, 36px);
  }
  
  .heading::before,
  .heading::after {
    content: "";
    border-top: 6px double #bfbfbf;
  }
  
  .retroshadow {
    color: #2c2c2c;
    letter-spacing: 0.05em;
    text-shadow: 4px 4px 0px #d5d5d5, 7px 7px 0px rgba(0, 0, 0, 0.2);
  }
  
  /* ========================== hot promotion ========================== */
  
  @-webkit-keyframes blinker {
    from {
      opacity: 1;
    }
  
    to {
      opacity: 0;
    }
  }
  
  span.blink {
    text-decoration: blink;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-direction: alternate;
    position: absolute;
    font-size: 14px;
  }
  
  .blink-text {
    text-decoration: blink-text;
    -webkit-animation-name: blink-text;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-direction: alternate;
    font-size: 14px;
  }
  
  @-webkit-keyframes blink-text {
    from {
      opacity: 1;
    }
  
    to {
      opacity: 0.1;
    }
  }
  
  span.badge {
    border-radius: 5px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
      rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
  }
  
  span.outline-dark {
    background-image: linear-gradient(180deg, #72bc3a 0%, #165905 100%);
    border-radius: 25px;
    color: #fff;
    padding: 10px 50px;
  }
  
  span
  
  /* ========================== promotion ========================== */
  
  .owl-dot {
    box-shadow: none !important;
  }
  
  .game-section {
    padding: 0px;
  }
  
  .game-section .owl-stage {
    margin: 15px 0;
    display: flex;
    display: -webkit-flex;
  }
  
  .game-section .item {
    margin: 0 15px 60px;
    width: 320px;
    height: 400px;
    display: flex;
    display: -webkit-flex;
    align-items: flex-end;
    -webkit-align-items: flex-end;
    background: #343434 no-repeat center center / cover;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
      rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    cursor: pointer;
  }
  
  .game-section .item.active {
    width: 500px;
    /* box-shadow: 12px 40px 40px rgba(0, 0, 0, 0.25);
      -webkit-box-shadow: 12px 40px 40px rgba(0, 0, 0, 0.25); */
  }
  
  .game-section .item:after {
    content: "";
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    background-image: none;
  }
  
  .game-section .item-desc {
    padding: 0 20px 14px;
    color: #fff;
    position: relative;
    z-index: 1;
    overflow: hidden;
    transform: translateY(calc(100% - 54px));
    -webkit-transform: translateY(calc(100% - 54px));
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
  }
  
  .game-section .item.active .item-desc {
    transform: none;
    -webkit-transform: none;
  }
  
  .game-section .item-desc p {
    opacity: 0;
    -webkit-transform: translateY(32px);
    transform: translateY(32px);
    transition: all 0.4s ease-in-out 0.2s;
    -webkit-transition: all 0.4s ease-in-out 0.2s;
  }
  
  .game-section .item.active .item-desc p {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  
  .game-section .owl-theme.custom-carousel .owl-dots {
    margin-top: -20px;
    position: relative;
    z-index: 5;
  }
  
  /******** Middle section CSS End *******/
  
  /***** responsive css Start ******/
  
  @media (min-width: 992px) and (max-width: 1199px) {
    /* -------- Landing page ------- */
    .game-section {
      padding: 0px;
    }
  
    .game-section .item {
      margin: 0 12px 60px;
      width: 260px;
      height: 360px;
    }
  
    .game-section .item.active {
      width: 400px;
    }
  
    .game-section .item-desc {
      transform: translateY(calc(100% - 46px));
      -webkit-transform: translateY(calc(100% - 46px));
    }
  }
  
  @media (min-width: 768px) and (max-width: 991px) {
    /* -------- Landing page ------- */
    .game-section {
      padding: 0px;
    }
  
    .game-section .item {
      margin: 0 12px 60px;
      width: 240px;
      height: 330px;
    }
  
    .game-section .item.active {
      width: 360px;
    }
  
    .game-section .item-desc {
      transform: translateY(calc(100% - 42px));
      -webkit-transform: translateY(calc(100% - 42px));
    }
  }
  
  @media (max-width: 767px) {
    /* -------- Landing page ------- */
    .game-section {
      padding: 0px;
    }
  
    .game-section .item {
      margin: 0 10px 40px;
      width: 200px;
      height: 280px;
    }
  
    .game-section .item.active {
      width: 270px;
      /* box-shadow: 6px 10px 10px rgba(0, 0, 0, 0.25);
          -webkit-box-shadow: 6px 10px 10px rgba(0, 0, 0, 0.25); */
    }
  
    .game-section .item-desc {
      padding: 0 14px 5px;
      transform: translateY(calc(100% - 42px));
      -webkit-transform: translateY(calc(100% - 42px));
    }
  }
  
  /* ========================== wallet ========================== */
  .wallet {
    color: #fff !important;
    box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.15);
    border-radius: 20px;
    border: 2px solid #383e43;
    background-color: #0000008a;
  }
  
  .toggle {
    border-radius: 5px !important;
  }
  
  span.toggle-handle {
    background-color: #fff;
    border-color: #ccc;
  }
  
  @-webkit-keyframes blink {
    from {
      opacity: 1;
    }
  
    to {
      opacity: 0;
    }
  }
  
  .blink {
    text-decoration: blink;
    -webkit-animation-name: blink;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-direction: alternate;
  }
  
  a.btn-withdraw {
    color: #fff;
    background-image: radial-gradient(
      circle,
      #04619f,
      #00568d,
      #004c7b,
      #004169,
      #023758,
      #03314d,
      #042a43,
      #052439,
      #052033,
      #041c2d,
      #031827,
      #011421
    );
  
    /* background-image: radial-gradient(
      circle,
      #007400,
      #046a00,
      #076001,
      #095601,
      #0a4c01,
      #074503,
      #063e04,
      #053704,
      #033106,
      #022c07,
      #022607,
      #002106
    ); */
  
    border: none;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    border-radius: 5px !important;
  }
  
  a.btn-deposit {
    color: #fff;
    background-image: radial-gradient(
      circle,
      #04619f,
      #00568d,
      #004c7b,
      #004169,
      #023758,
      #03314d,
      #042a43,
      #052439,
      #052033,
      #041c2d,
      #031827,
      #011421
    );
    /* background-image: radial-gradient(
      circle,
      #cd0606,
      #bd0406,
      #ad0305,
      #9d0205,
      #8e0103,
      #810005,
      #750005,
      #680005,
      #5a0006,
      #4d0006,
      #3f0004,
      #320000
    ); */
    border: none;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    border-radius: 5px !important;
  }
  
  .menu-wallet-name {
    color: #fff;
  }
  
  .previous {
    background-color: #f1f1f1;
    color: #000;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    text-decoration: none;
    display: inline-block;
    padding: 8px 16px;
    border-radius: 5px;
  }
  
  /* ========================== deposit ========================== */
  /* .bank {
    border-radius: 5px;
    background-color: #fefefe;
    background-image: linear-gradient(315deg, #fefefe 0%, #00a4e4 74%);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  } */
  
  /* ========================== withdraw ========================== */
  
  /* .bank-withdraw {
    border-radius: 3px;
    border: 2px solid #052439;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
      rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
  } */
  
  /* ========================== withdraw ========================== */
  
  .promotion {
    border-radius: 20px;
    border: 1px solid #dc3545 !important;
    color: #fff !important;
    background-image: linear-gradient(
      180deg,
      #c00101 0%,
      #4f0a0a 100%
    ) !important;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  }
  
  .promotion-loding {
    border-radius: 5px;
    background-color: #045de9;
    background-image: linear-gradient(315deg, #045de9 0%, #09c6f9 74%);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  }
  
  /* .promotion-accept {
    border-radius: 5px;
    border: 3px solid #09c6f9;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  } */
  
  .shadow-img {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    border-radius: 15px;
  }
  
  /* .turnover-on {
    border-radius: 5px;
    background-color: #990000;
    background-image: linear-gradient(147deg, #990000 0%, #ff0000 74%);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  }
  
  .turnover-off {
    border-radius: 5px;
    background-color: #045de9;
    background-image: linear-gradient(315deg, #045de9 0%, #09c6f9 74%);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  } */
  
  table tr {
    vertical-align: middle;
  }
  
  /* ========================== account ========================== */
  
  /* .account {
    border-radius: 5px;
    background-color: #000000;
    background-image: linear-gradient(315deg, #000000 0%, #7f8c8d 74%);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  } */
  
  /* ========================== history ========================== */
  /* .history-deposit {
    color: #000;
    box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
  }
  
  .history-withdraw {
    color: #000;
    box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
  }
  
  .history-navlink {
    color: #00568d !important;
    background-color: #fff !important;
    border-radius: 0px !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.5) !important;
  }
  
  .history-navitem .active {
    color: #fff !important;
    border-radius: 5px !important;
    background-color: #09c6f9 !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.8) !important;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
      rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  }
  
  .nav-pills {
    cursor: pointer;
  } */
  
  /* ========================== login - register ========================== */
  
  .login {
    color: #fff !important;
    box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.15);
    border-radius: 20px;
    border: 2px solid #383e43;
    background-color: #0000008a;
  }
  
  a.btn-bdlight {
    border-color: #fff;
  }
  
  button.btn-bdlight {
    border-color: #fff;
  }
  
  .text-validation {
    font-size: clamp(13px, 2vw, 15px);
  }
  
  span.outline-light {
    border: 1px solid #fff;
    color: #fff;
  }
  
  /* ========================== Modal ========================== */
  
  .modal-transparent {
    background-color: transparent !important;
    border: none !important;
  }
  
  .modal-radius-none {
    border-radius: 0px !important;
    border: none !important;
  }
  
  .text-modal-center {
    text-align: center !important;
    display: inline-block !important;
  }
  
  /* ========================== Promotion ========================== */
  
  .play {
    animation-name: play;
    transition: all 0.2s ease-in-out 0s;
    animation: play 2.5s ease-in-out infinite;
  }
  
  @keyframes play {
    0% {
      transform: translateY(0px) rotate(0deg);
    }
  
    50% {
      transform: translateY(-4px) rotate(0deg);
    }
  }
  
  .nav-promotion .nav-link {
    border-radius: 50px !important;
    cursor: pointer;
    color: #fff !important;
    background-image: linear-gradient(
      to top,
      #000000,
      #131313,
      #1f1f1f,
      #2c2c2c,
      #393939
    ) !important;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    margin-top: 2px;
    box-shadow: -2px 0px 10px rgba(0, 0, 0, 0.5) !important;
    border: 1px solid #000 !important;
    transition: all 0.5s;
  }
  
  .nav-promotion .nav-link.active,
  .nav-promotion .show > .nav-link {
    border-radius: 50px !important;
    cursor: pointer;
    color: #fff !important;
    background: linear-gradient(180deg, #edd58a 0%, #af7f36 100%) !important;
    border: 1px solid #edd58a !important;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    margin-top: 2px;
    box-shadow: -2px 0px 10px rgba(0, 0, 0, 0.5) !important;
  }
  
  .nav-promotion a {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.8) !important;
    /* border: 1px solid #fff !important; */
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
  }
  
  .nav-promotion a:hover {
    border-radius: 50px !important;
    cursor: pointer;
    color: #fff !important;
    background: linear-gradient(180deg, #edd58a 0%, #af7f36 100%) !important;
    border: 1px solid #fff !important;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    margin-top: 2px;
    box-shadow: -2px 0px 10px rgba(0, 0, 0, 0.5) !important;
  }
  
  .promotion-card {
    background: linear-gradient(180deg, #c4aa58 0%, #674207 100%);
    border: 1px solid #edd58a;
    color: #fff;
    padding: 10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    border-radius: 20px;
  }
  
  span.soon {
    padding: 20px 50px 20px 50px;
  }
  
  /* ========================== game pc ========================== */
  .game-name {
    padding: 10px 0px 20px 0px;
    color: #000;
  }
  
  /* .game-name:hover {
    color: #09c6f9;
  } */
  
  /* .a-name:hover {
    
  } */
  
  .a-name:hover {
    color: #09c6f9;
    text-align: center;
  }