.landing-container {
  overflow-x: hidden;
  background: #0D1016;
  margin-top: -10px;
}

.landing-home {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px 0 40px;
  background: rgba(13,16,22,1);
  background-image: linear-gradient(90deg, rgba(13,16,22,1) 0%, rgba(59, 196, 60, 20%) 30%, rgba(13,16,22,1) 90%);
}

.landing-container .footer,
.landing-container .footer-infos {
  position: relative;
}

.landing-about .landing-home {
  padding: 0px !important;
}

.landing-home .search-casino,
.landing-home .select-casino-category {
  border: 2px solid #4F614F;
  border-radius: 30px !important;
  background-color: #272A30;
  padding: 10px;
}

.landing-home .select-casino-category .landing-home .search-casino:focus {
  border: 2px solid #4F614F !important;
}

.landing-home .search-casino:focus::placeholder {
  opacity: 0.2;
}

.landing-home .filter-casino span.icon-search {
  left: auto;
  right: 10px;
}

@media screen and (max-width: 768px) {
  .landing-home .filter-casino span.icon-search {
    left: auto;
    right: 20px;
  }
}

.landing-home .filter-casino input {
  padding-left: 10px !important;
}

.landing-container .light-spot {
  position: relative;
  width: 100%;
}

.landing-container .light-spot .light-spot-1 {
  position: absolute;
  width: 220px;
  right: 0;
  height: 220px;
  border-radius: 500px;
  background: #3BC43C;
  filter: blur(200px);
  z-index: 0;
}

.landing-container .light-spot .light-spot-2 {
  position: absolute;
  bottom: 10%;
  right: 0;
  width: 220px;
  height: 220px;
  border-radius: 500px;
  background: #3BC43C;
  filter: blur(200px);
  z-index: 0;
}


.landing-home .banners-section {
  padding: 25px 20px;
}

.landing-container .container.footer {
  margin-top: 0px;
}

.slick-dots li button:before {
  line-height: 8px;
  border: 2px solid #4F614F;
  border-radius: 50%;
  width: 8px;
  color: transparent;
  height: 8px;
}

.slick-dots li.slick-active button:before {
  background: #3BC43C;
  border-color: #3BC43C;
  color: transparent;
}

@media (max-width: 768px) {
  .landing-home {
    padding: 20px 0 50px;
  }
}

.container.full-page .wrap.landing-about {
  max-width: 100vw;
  position: relative;
  background: var(--bg-color-body);
}

.landing-modality-top .slick-track {
  position: relative;
  padding-bottom: 30px;
}

.landing-modality-top .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.landing-modality-top .modality-top-img {
  padding: 0 16px;
  background-repeat: no-repeat;
  display: flex;
  background-position: center;
  background-size: contain;
  max-height: 120px;
  max-width: 120px;
  width: 100%;
  height: 100%;
  transition: 200ms linear;
}

.landing-modality-top .modality-top-img.live {
  padding: 4px 0px;
}

.landing-modality-top .content .modality-top-img:hover {
  filter: grayscale(30%) hue-rotate(30deg) brightness(70%);
}

.landing-modality-top .content .modality-top-info {
  color: #F0F0F0;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  /* line-height: 28px; */
  letter-spacing: 0.032px;
  position: absolute;
  margin: 0;
  bottom: 0;
}

@media screen and (max-width: 1680px) {
  .landing-modality-top {
    padding: 15px 15px 0 15px;
  }
}

@media screen and (max-width: 890px) {
  .landing-modality-top .content .modality-top-info {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .banners-section {
    padding: 20px 20px !important;
  }

  .landing-home {
    padding: 20px 0 20px;
  }

  .landing-modality-top .slick-track {
    padding-bottom: 20px;
  }

  .landing-modality-top .modality-top-img.live {
    padding: 0px 4px;
  }
}

@media screen and (max-width: 440px) {
  .landing-modality-top .content .modality-top-info {
    font-size: 10px;
    letter-spacing: 0.016px;
  }
}

/* End Modality Top */

/* Start BANNERS */
.landing-home .banners-top {
  overflow: initial;
}

.landing-home .nav-banners {
  bottom: 1%;
  left: auto;
  gap: 20px;
  display: flex;
  margin-right: inherit;
  margin-top: 0;
  right: 50%;
  transform: translate(50%, -50%);
  top: auto;
  align-items: center;
}

.banners-top img {
  border-radius: 15px;
}

.landing-home .banners-section .banners-top img {
  object-fit: cover;
}

.landing-home .banners-section .slick-slide {
  margin: 0 5px;
}

/* setas */
.landing-home .banners-section .slick-prev,
.landing-home .banners-section .slick-next {
  width: 30px;
  height: 100%;
}

.landing-home .banners-section .slick-prev {
  left: -35px;
}

.landing-home .banners-section .slick-next {
  right: -35px;
}

.landing-home .banners-section .slick-prev:hover,
.landing-home .banners-section .slick-next:hover {
  transition: background-image 200ms linear;
  cursor: auto;
}

.landing-home .banners-section .slick-prev i:hover,
.landing-home .banners-section .slick-next i:hover {
  background-color: #f0f0f0;
  cursor: pointer;
  transition: background-color 200ms linear;
}

.landing-home .banners-section .slick-prev:before,
.landing-home .banners-section .slick-next:before {
  content: "";
}

.landing-home .banners-section .slick-prev i,
.landing-home .banners-section .slick-next i {
  background: #3BC43C;
  font-size: 35px;
  position: absolute;
  height: 50px;
  width: 50px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media screen and (max-width: 1680px) {
  .landing-home .banners-section .slick-prev {
    left: -25px;
  }

  .landing-home .banners-section .slick-next {
    right: -25px;
  }
}

@media screen and (max-width: 640px) {

  .landing-home .banners-section .slick-prev i,
  .landing-home .banners-section .slick-next i {
    height: 25px;
    width: 25px;
  }

  .banners-top img {
    border-radius: 8px;
  }

  .landing-home .banners-section .slick-prev,
  .landing-home .banners-section .slick-next {
    width: 35px;
  }
}

.landing-home .nav {
  padding: initial;
}

.landing-home .nav-item {
  background-color: transparent;
  border: 2px solid #fff;
  height: 6px;
  width: 6px;
}

.landing-home .nav-item.nav-item-arrow,
.landing-home .nav-item.nav-item-arrow.activated {
  background-color: transparent;
  border: none;
  width: auto;
  display: flex;
  align-items: center;
}

.landing-home .nav-item.activated {
  background-color: #fff;
  border-color: #fff;
  border-width: 2px;
  height: 6px;
  width: 6px;
}

.landing-home .nav-next,
.landing-home .nav-previous,
.landing-home .nav-next:focus,
.landing-home .nav-previous:focus {
  background: transparent !important;
  box-shadow: none;
  height: 100%;
  width: 45px;
  position: absolute;
}

.landing-home .nav-next:hover .fa,
.landing-home .nav-previous:hover .fa {
  background-color: #3BC43C;
}

.landing-home .nav-next .fa,
.landing-home .nav-previous .fa {
  transform: translate(0%, -50%);
  background: #17C117;
  margin-left: initial;
  margin-top: initial;
  position: absolute;
  font-size: 35px;
  margin: 0 auto;
  left: initial;
  height: 100%;
  width: 100%;
  top: 50%;
  transition: 100ms linear;
}

.landing-home .nav-next {
  border-radius: 8px 0px 0px 8px;
  right: -45px;

}

.landing-home .nav-previous {
  border-radius: 0px 8px 8px 0px;
  left: -45px;
}

.landing-home .nav-next .fa {
  left: auto;
  margin-left: initial;
  margin-right: initial;
  right: auto;
}

.landing-home .pure-vacate {
  display: initial !important;
}

@media screen and (max-width: 767px) {
  .landing-home .pure-sm-vacate {
    display: flex !important;
  }
}

.landing-home .nav-item-arrow {
  top: -20%;
  display: initial;
}

.landing-home .nav-item-arrow i {
  width: 16px;
  height: 16px;
  background: #fff;
}

@media screen and (max-width: 1700px) {
  .landing-home .nav-previous {
    left: -34px;
  }

  .landing-home .nav-next {
    right: -34px;
  }
}

@media screen and (max-width: 640px) {
  .landing-home .nav-previous {
    left: -22px;
  }

  .landing-home .nav-next {
    right: -22px;
  }

  .landing-home .nav-next,
  .landing-home .nav-previous,
  .landing-home .nav-next:focus,
  .landing-home .nav-previous:focus {
    width: 30px;
  }
}

/* End BANNERS */

/* Start CASINO Filter */

.casino-filter-section {
  padding: 0 20px;
}

.casino-filter-section .filter-casino {
  padding: 0px;
}

@media (max-width: 576px) {
  .casino-filter-section {
    padding: 0 15px;
  }
}

.filter-casino-landing.game-hall {
  display: grid;
  align-items: center;
  justify-content: center;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 12px;
}

.filter-casino-landing.game-hall .grid-games-item {
  grid-column: span 1;
  min-height: 100%;
  display: grid;
}

.landing-casino .grid-games-item {
  box-shadow: 0px 4px 4px 0px #00000040;
  border-radius: 16px;
}

@media screen and (min-width: 540px) {
  .filter-casino-landing.game-hall {
    grid-template-columns: repeat(3, 1fr);
  }

  .filter-casino-landing .grid-games-item {
    grid-column: span 4;
  }
}

@media screen and (min-width: 768px) {
  .filter-casino-landing.game-hall {
    grid-template-columns: repeat(4, 1fr);
  }

  .filter-casino-landing .grid-games-item {
    grid-column: span 3;
  }
}

@media screen and (min-width: 1024px) {
  .filter-casino-landing.game-hall {
    grid-template-columns: repeat(5, 1fr);
  }

  .filter-casino-landing .grid-games-item {
    grid-column: span 2;
  }

  .filter-casino-landing .grid-games-pic {
    grid-area: 1/1/-1/-1;
  }
}

@media screen and (min-width: 1280px) {
  .filter-casino-landing.game-hall {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media screen and (min-width: 1440px) {
  .filter-casino-landing.game-hall {
    grid-template-columns: repeat(7, 1fr);
  }

  .filter-casino-landing .grid-games-item {
    grid-column: span 1;
  }
}

.null_games_filter {
  display: flex;
  justify-content: center;
  padding: 20px;
  box-shadow: var(--box-shadow-theme-light);
  margin: 0px 6px;
}

.null_games_filter p {
  color: #f0f0f0;
}

/* End Casino Filter */

/* Start CASINO */
.landing-casino {
  padding: 15px 20px;
  display: flex;
  flex-direction: column;
}

.landing-casino .header-casino {
  display: flex;
  justify-content: space-between;
  padding: 8px 16px;
  align-items: center;
  border-radius: 30px 30px 0 0;
  /* border: 1px solid #ADADAD; */
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.landing-casino .header-casino .header-casino-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.landing-casino .header-casino .header-casino-info .title {
  color: #f0f0f0;
  user-select: none;
  font-size: 28px;
  font-style: normal;
  font-weight: 600;
  line-height: 0px;
  letter-spacing: 0.056px;
  white-space: nowrap;
}

.landing-casino .header-casino .header-casino-img {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 60px;
  padding: 1px 1px 3px 3px;
  height: 60px;
  object-fit: contain;
  transition: 100ms linear;
}

.landing-casino .header-casino .header-casino-info:hover .header-casino-img {
  transition: 200ms linear;
  filter: grayscale(30%) hue-rotate(30deg) brightness(70%);
}

.landing-casino .header-casino .all-games {
  padding: 10px;
  color: #f0f0f0;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
  text-decoration: underline;
  transition: 100ms linear;
  white-space: nowrap;
  user-select: none;
}

.landing-casino .header-casino .all-games:hover {
  color: #3BC43C;
}

.landing-casino .content-casino {
  border-radius: 0 0 30px 30px;
  box-shadow: 6px 12px 20px 0px #000000;
  padding: 10px;
}

.landing-casino .games-inner {
  overflow: hidden;
  display: grid;
  border-radius: 16px;
  position: relative;
  -webkit-clip-path: content-box;
  clip-path: content-box;
  width: 100%;
}

.landing-casino .games-inner-badge {
  position: absolute;
  left: 12px;
  top: -12px;
  margin: 8px 6px;
  font-size: 8px;
  display: flex;
  text-transform: uppercase;
  gap: 8px;
}

.ribbon:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-top-width: 10px;
  border-top-style: solid;
}

.ribbon span {
  position: relative;
  display: block;
  text-align: center;
  font-size: 7px;
  line-height: 1;
  letter-spacing: 0.5px;
  padding: 12px 0px 4px;
  font-weight: 900;
  white-space: nowrap;
}

/* hottest */
.ribbon.ribbon-hottest:after {
  border-top-color: #9747FF;
  border-left: 27px solid transparent;
  border-right: 27px solid transparent;
}

.ribbon.ribbon-hottest span {
  background: #9747FF;
  color: #fff;
  width: 54px;
}

/* hottest */

/* newest */
.ribbon.ribbon-newest:after {
  border-top-color: #17C117;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

.ribbon.ribbon-newest span {
  background: #17C117;
  color: #fff;
  width: 40px;
}

/* newest */

/* popular */
.ribbon.ribbon-popular:after {
  border-top-color: #FFBA00;
  border-left: 27px solid transparent;
  border-right: 27px solid transparent;
}

.ribbon.ribbon-popular span {
  background: #FFBA00;
  color: #0f0f0f;
  width: 54px;
}

/* popular */

@media screen and (max-width: 1300px) {
  .landing-casino .games-inner-badge {
    gap: 8px;
  }
}

@media screen and (max-width: 1100px) {
  .landing-casino .games-inner-badge {
    gap: 5px;
  }
}

@media screen and (max-width: 890px) {}

@media screen and (max-width: 760px) {}

@media screen and (max-width: 600px) {
  .landing-casino .custom-button-wrapper {
    gap: 16px !important;
  }
}

@media screen and (max-width: 500px) {
  .landing-casino.casino .slick-slide>div {
    padding: 8px 4px;
  }

  .landing-casino .is_highlight_unit {
    padding: 4px !important;
  }

  .landing-casino .custom-button-wrapper {
    gap: 8px !important;
  }

  .ribbon span {
    font-size: 6px;
  }

  .games-inner-badge.three-flags .ribbon span:before {
    height: 0;
    width: 0;
    left: 0;
    top: 0;
    border-radius: 0;
  }

  .games-inner-badge.three-flags .ribbon span:after {
    height: 0;
    width: 0;
    left: 0;
    top: 0;
    border-radius: 0;
  }

  .ribbon.ribbon-popular span {
    width: 44px;
  }

  .ribbon.ribbon-newest span {
    width: 30px;
  }

  .ribbon.ribbon-hottest span {
    width: 44px;
  }

  .ribbon.ribbon-popular:after {
    border-left: 22px solid transparent;
    border-right: 22px solid transparent;
  }

  .ribbon.ribbon-newest:after {
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
  }

  .ribbon.ribbon-hottest:after {
    border-left: 22px solid transparent;
    border-right: 22px solid transparent;
  }

  .ribbon:after {
    border-top-width: 8px;
  }

  .games-inner-badge.three-flags .ribbon span {
    border-top-right-radius: 0px;
  }

  .games-inner-badge.three-flags {
    left: 6px;
    gap: 2px;
    top: -8px;
  }
}

@media screen and (max-width: 360px) {
  .landing-casino.casino .slick-slide>div {
    padding: 4px 2px !important;
  }

  .landing-casino.casino .slick-slide>div:first-child {
    margin-bottom: 0px !important;
  }

  .landing-casino {
    padding: 10px 15px !important;
  }
}

.landing-casino .grid-games-pic {
  width: 100%;
  display: block;
  border-radius: 16px;
  transition: transform .3s ease;
  object-fit: cover;
}

.landing-casino .gradient {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
  position: absolute;
  border-radius: 16px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.landing-casino .info-game {
  display: flex;
  flex-direction: column;
  position: absolute;
  bottom: 3%;
  padding-left: 10px;
  padding-bottom: 5px;
  gap: 2px;
  font-size: 10px;
}

.landing-casino .games-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #282a2fe6, #202022e6);
  border-radius: 16px;
  transition: opacity .3s ease;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}

.landing-casino .custom-button-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
}

.landing-casino a.button-play {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  border: none;
  background-size: 300% 100%;
  text-decoration: none;
  padding: 10px 20px;
  background: linear-gradient(0deg, rgba(255, 186, 0, 1) 0%, rgba(255, 213, 100, 1) 100%);
  box-shadow: 0 4px 15px 0 #af8000;
  border-radius: 50px;
  transition: all .4s ease-in-out;
  /* animation: pulseButton 1.5s linear infinite; */
}

.landing-casino a.games-demo {
  color: #fff;
  font-weight: 600;
  transition: .5s;
  font-size: 12px;
}

.landing-casino .games-inner:hover .games-content {
  opacity: 1;
}

.landing-casino a.button-play:hover {
  background-position: 100% 0;
  transform: scale(1.1);
  animation: none;
}

.landing-casino a.games-demo:hover {
  color: #fff6a9;
  text-decoration: none;
  transform: scale(1.3);
}

.landing-casino .info-game>span {
  display: flex;
  color: #eee;
  text-shadow: 1px 2px 1px black;
  font-size: 12px;
}

.landing-casino .info-game>span:first-child {
  font-weight: 900;
  font-size: 12px;
}

/* Casino */
.landing-casino.casino {
  position: relative;
  z-index: 1;
}

.landing-casino.casino .slick-prev {
  left: 0;
}

.landing-casino.casino .slick-next {
  right: 0;
}

.landing-casino.casino .slick-prev:hover,
.landing-casino.casino .slick-next:hover {
  transition: background-image 200ms linear;
}

.landing-casino.casino .slick-prev:hover i,
.landing-casino.casino .slick-next:hover i {
  background-color: #0f0f0f;
  transition: background-color 200ms linear;
}

.landing-casino.casino .slick-prev:before,
.landing-casino.casino .slick-next:before {
  content: "";
}

.landing-casino.casino .slick-prev i,
.landing-casino.casino .slick-next i {
  background: #3BC43C;
  font-size: 35px;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.landing-casino.casino .slick-track {
  display: grid;
  grid-template-columns: repeat(99999, 1fr);
}

.landing-casino.casino .slick-slide>div {
  padding: 10px 6px 0px 6px;
}

.landing-casino .header-casino .header-casino-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}

.landing-casino .header-casino .header-casino-actions>div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-casino-actions .btn-arrow-carousel {
  border-radius: 50%;
  border: 1px solid #8A8D8B;
  background-color: #272A30;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-casino-actions .btn-arrow-carousel:hover {
  background-color: #0D1016;
  border-color: #8A8D8B;
}

.header-casino-actions .btn-arrow-carousel span {
  display: flex;
}

.header-casino-actions .btn-arrow-carousel:hover i {
  background: #3BC43C;
}

.header-casino-actions .btn-arrow-carousel i {
  background: #8A8D8B;
  width: 30px;
  height: 30px;
}

.header-casino-actions .btn-arrow-carousel:active {
  background-color: #3BC43C;
  border-color: #0D1016;
}

.header-casino-actions .btn-arrow-carousel:active i {
  background: #0D1016;
}

/* Casino */

/* Providers */
.landing-casino.casino-provider .casino-provider-item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #3BC43C;
  background-color: var(--secondary) !important;
  color: var(--text-color);
  cursor: pointer;
  flex-direction: column;
  border-radius: 3px;
  font-size: 0.68rem;
  width: auto;
  height: 120px;
}

.landing-casino.casino-provider {
  position: relative;
}

.landing-casino.casino-provider .slick-slider {
  position: initial;
}

.landing-casino.casino-provider .slick-slide {
  margin: 0 20px;
  grid-column: span 1;
  min-height: 100%;
  display: grid;
}

@media (max-width: 540px) {
  .landing-container .light-spot .light-spot-1,
  .landing-container .light-spot .light-spot-2 {
    width: 100px;
    height: 100px;
  }

  .landing-casino.casino-provider .casino-provider-item {
    height: 90px;
  }
}

.landing-casino.casino-provider .slick-prev {
  left: 0;
}

.landing-casino.casino-provider .slick-next {
  right: 0;
}

.landing-casino.casino-provider .slick-prev:hover,
.landing-casino.casino-provider .slick-next:hover {
  transition: background-image 200ms linear;
}

.landing-casino.casino-provider .slick-prev:hover i,
.landing-casino.casino-provider .slick-next:hover i {
  background-color: #f0f0f0;
  transition: background-color 200ms linear;
}

.landing-casino.casino-provider .slick-prev:before,
.landing-casino.casino-provider .slick-next:before {
  content: "";
}

.landing-casino.casino-provider .slick-prev i,
.landing-casino.casino-provider .slick-next i {
  background: #3BC43C;
  font-size: 35px;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.landing-casino.casino-provider .slick-track {
  display: grid;
  grid-template-columns: repeat(9999999, 1fr);
}

/* providers */
.landing-casino .slick-disabled {
  opacity: 0.3;
}

@media screen and (max-width: 890px) {
  .landing-casino .header-casino .header-casino-img {
    width: 56px;
    height: 56px;
  }
}

@media screen and (max-width: 760px) {
  .landing-casino .header-casino .header-casino-info .title {
    font-size: 22px;
  }

  .landing-casino .header-casino .header-casino-info {
    gap: 10px;
  }

  .header-casino-actions .btn-arrow-carousel {
    width: 30px;
    height: 30px;
  }

  .header-casino-actions .btn-arrow-carousel i {
    width: 20px;
    height: 20px;
  }

  .landing-casino .header-casino .all-games {
    font-size: 12px;
    line-height: 14px;
  }
}

@media screen and (max-width: 600px) {
  .landing-container .light-spot .light-spot-1,
  .landing-container .light-spot .light-spot-2 {
    width: 150px;
    height: 150px;
  }

  .landing-casino .header-casino .all-games {
    font-size: 10px;
    line-height: 12px;
  }

  .landing-casino .info-game span:nth-child(1) {
    font-size: 12px;
  }

  .landing-casino .info-game span:nth-child(2) {
    font-size: 10px;
  }

  .landing-casino .games-inner-badge {
    /* margin: 2px 5px; */
    line-height: 16px;
    font-size: 6px;
  }

  .landing-casino .header-casino .header-casino-img {
    width: 42px;
    height: 42px;
  }

  .landing-casino.casino-slots .header-casino .header-casino-info .title {
    margin-top: 10px;
  }

  .grid-games-item.slick-slide,
  .landing-casino.casino-provider .slick-slide {
    margin: 0 2px;
  }
}

@media (max-width: 576px) {
  .landing-casino {
    padding: 15px 15px;
  }
}

@media screen and (max-width: 500px) {
  .landing-casino .header-casino .header-casino-img {
    width: 32px;
    height: 32px;
  }

  .landing-casino .header-casino .all-games {
    font-size: 10px;
  }

  .landing-casino .header-casino .header-casino-info {
    gap: 6px
  }

  .landing-casino .header-casino .header-casino-info .title {
    font-size: 12px;
  }

  .landing-casino .header-casino .header-casino-actions,
  .landing-casino .header-casino .header-casino-actions>div {
    gap: 6px;
  }
}

@media screen and (max-width: 360px) {
  .landing-casino .header-casino .all-games {
    font-size: 8px;
  }

  .landing-casino .header-casino .header-casino-info .title {
    font-size: 10px;
  }

  .landing-casino .header-casino .header-casino-img {
    width: 26px;
    height: 26px;
  }
}

/* highlight config */
.landing-casino .is_highlight {
  display: flex;
  align-items: center;
  justify-content: start;
}

.landing-casino .is_highlight_unit {
  padding: 4px 4px 0 4px;
  width: 40%;
}

.landing-casino .is_highlight_list {
  width: 60%;
}

@media screen and (max-width: 1025px) {

  .landing-casino .is_highlight_unit,
  .landing-casino .is_highlight_list {
    width: 50%;
  }
}

@media screen and (max-width: 840px) {
  .landing-casino .is_highlight_unit {
    width: 67%;
  }

  .landing-casino .is_highlight_list {
    width: 33%;
  }
}

@media screen and (max-width: 600px) {
  .landing-casino .is_highlight {
    flex-direction: column;
  }

  .landing-casino .is_highlight_unit {
    width: 100%;
  }

  .landing-casino .is_highlight_list {
    width: 100%;
  }
}

/* highlight config */
/* End CASINO */

/* Start ABOUT US */
.landing-about-us {
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
  background-size: cover;
  align-self: stretch;
}

.landing-about-us>div {
  display: flex;
  padding: 140px 0px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 25px;
  max-width: 1680px;
  flex: 1 0 0;
}

.landing-about-us>div .title {
  color: #fff;
  text-align: center;
  font-size: 58px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.116px;
  text-transform: uppercase;
  margin: 0;
}

.landing-about-us>div .title .business-name {
  background: #5AFF5C;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.landing-about-us>div .sub-title {
  color: #fff;
  text-align: center;
  font-size: 36px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.72px;
  flex: 1 0 0;
  margin: 0;
}

.landing-about-us>div .text {
  color: #d0cfd2;
  text-align: center;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.48px;
  margin: 0;
  max-width: 680px;
}

@media screen and (max-width: 760px) {
  .landing-about-us>div {
    padding: 68px 0px;
  }

  .landing-about-us>div .title {
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.072px;
  }
}

@media screen and (max-width: 600px) {
  .landing-about-us>div {
    padding: 40px 20px;
  }

  .landing-about-us>div .title {
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.072px;
  }

  .landing-about-us>div .sub-title {
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0.024px;
  }

  .landing-about-us>div .text {
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.48px;
  }

}

.modality-btn-link {
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.032px;
  display: flex;
  padding: 10px 16px;
  justify-content: center;
  gap: 8px;
  align-items: center;
  text-transform: uppercase;
  border-radius: 25px;
  background-color: #212121;
  border: 2px solid #3BC43C;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.10);
  transition: 100ms linear;
}

.modality-btn-link .icon-fixed {
  display: inline-flex;
  filter: drop-shadow(0 0 1px rgb(2 253 4));
}

.modality-btn-link .icon-fixed:before {
  content: "";
  background: #00FF02;
  mask: url('/icons/arrow-right.svg') no-repeat center / contain;
  -webkit-mask: url('/icons/arrow-right.svg') no-repeat center / contain;
  height: 24px;
  width: 24px;
}


.modality-btn-link:hover {
  background: #272A30 !important;
  border-color: #3BC43C !important;
  color: #3BC43C;
}

.modality-btn-link:hover .icon-fixed:before {
  background: #00FF02;
}

.modality-btn-link:active {
  background: #FAFAFA !important;
  border-color: #272A30 !important;
  color: #272A30;
}

.modality-btn-link:active .icon-fixed:before {
  background: #272A30;
}

@media screen and (max-width: 1024px) {
  .modality-btn-link {
    font-size: 12px;
    padding: 6px 10px;
  }
}

@media screen and (max-width: 890px) {
  .modality-btn-link {
    font-size: 10px;
  }
}

@media screen and (max-width: 760px) {
  .modality-btn-link {
    font-size: 16px;
  }
}

@media screen and (max-width: 580px) {
  .modality-btn-link {
    font-size: 12px;
  }
}

@media screen and (max-width: 440px) {
  .modality-btn-link {
    font-size: 10px;
    padding: 0px 10px;
  }
}

.landing-about .landing-home {
  padding: 0px;
}

/* End ABOUT US */

/* Start COMMISSION */
.landing-commission-container {
  /* background: #1a212a; */
  box-shadow: var(--box-shadow-theme-light);
}

.landing-commission {
  display: flex;
  flex-direction: row;
  gap: 20px;
  justify-content: space-between;
}

.landing-commission .about {
  color: var(--text-color);
  display: flex;
  flex-direction: column;
}

.landing-commission .about h2 {
  margin: 0;
  padding: 8px 0;
  font-weight: 100;
  text-transform: uppercase;
}

.landing-commission .about h1 {
  margin: 0;
  padding: 8px 0;
  text-transform: uppercase;
}

.landing-commission .about p {
  margin: 0;
  padding: 16px 0;
}

.landing-commission .about .about-actions > a {
  display: flex;
  padding: 8px 16px 8px 16px;
  border-radius: 100px;
  font-size: 16px;
  font-style: normal;
  line-height: 28px;
  letter-spacing: 0.032px;
  transition: 100ms linear;
  white-space: nowrap;
  text-transform: uppercase;
  user-select: none;
  font-weight: 600;
}

.landing-commission .about .about-actions > a:first-child {
  border: 1px solid var(--accent);
  color: #FFF;
  background-color: var(--accent);
}

.landing-commission .about .about-actions > a:last-child {
  border: 2px solid var(--accent);
  background-color: #1A212A;
  color: #fff;
}

.landing-commission .about .about-actions {
  display: flex;
  flex-direction: row;
  gap: 16px;
}

.landing-commission .about .about-actions > a:first-child:hover {
  background-color: var(--accentVariant1);
}

.landing-commission .about .about-actions > a:last-child:hover {
  background-color: var(--accentVariant1);
  color: #FFF; 
}

.landing-commission .about-video {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.landing-commission .about-video .about-video-content {
  position: relative;
}

.landing-commission .about-video .about-video-content .video {
  display: flex;
  width: 340px;
  align-items: center;
  justify-content: center;
}

.landing-commission .about-video .overlay {
  background-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.landing-commission .about-video .about-video-content {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 16px;
}

.landing-commission .about-video .about-video-content p {
  color: var(--text-color);
  margin: 0;
}

.landing-commission .about-video .about-video-content p b {
  color: var(--accent);
  text-transform: uppercase;
}

@media (max-width: 1200px) and (min-width: 1151px) {
  .landing-commission .about .about-actions>a {
    padding: 8px 16px 8px 16px;
    line-height: 26px;
    font-size: 16px;
  }
}

@media (max-width: 1150px) and (min-width: 781px) {
  .landing-commission {
    flex-direction: column;
  }

  .landing-commission .about-video .about-video-content .video {
    width: 100%;
  }
}

@media (max-width: 780px) {
  .landing-commission {
    flex-direction: column;
  }

  .landing-commission .about h2 {
    padding: 2px 0;
    font-size: 18px;
  }

  .landing-commission .about h1 {
    padding: 4px 0;
    font-size: 24px;
  }

  .landing-commission .about p {
    padding: 12px 0;
    font-size: 14px;
  }

  .landing-commission .about .about-actions>a {
    padding: 5px 10px 5px 10px;
    line-height: 20px;
    font-size: 14px;
  }

  .landing-commission .about-video .about-video-content .video {
    width: 100%;
  }
}


@media (max-width: 760px) {
  .landing-commission {
    flex-direction: column;
  }

  .landing-commission .about-video {
    flex-direction: column;
  }
}


@media (max-width: 400px) {
  .landing-commission .about .about-actions {
    flex-direction: column;
  }

  .landing-commission .about .about-actions>a {
    width: 100%;
    text-align: center;
  }
}

/* End COMMISSION */

@media (min-width: 1281px) {
  .commission-detail-modal {
    width: 90%;
    transform: translate(-50%, -50%);
    left: 50%;
    margin: 0 !important;
    top: 50%;
  }
}

.commission-detail-content {
  border-radius: 3px;
  padding: 8px;
  overflow: auto;
  text-align: left;
}

.commission-detail-content p,
.commission-detail-content h3,
.commission-detail-content h4,
.commission-detail-content h1 {
  margin: 8px 0px;
}

.commission-detail-content::-webkit-scrollbar {
  width: 12px;
}

.commission-detail-content::-webkit-scrollbar-track {
  background: transparent;
}

.commission-detail-content::-webkit-scrollbar-thumb {
  background-color: var(--primary);
  border-radius: 20px;
}

.commission-detail-container>div {
  padding: 8px 0;
  border-radius: 5px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.commission-detail-container:last-child {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.commission-detail-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.commission-detail-container .about-actions {
  padding-top: 12px;
  padding-bottom: 12px;
}

.commission-detail-container .about-actions > a:hover {
  background-color: var(--accentVariant1);
}

.commission-detail-container .about-actions > a {
  border: 1px solid var(--accent);
  color: #fff;
  background-color: var(--accent);
  display: flex;
  padding: 8px 16px 8px 16px;
  border-radius: 100px;
  font-size: 14px;
  font-style: normal;
  line-height: 20px;
  letter-spacing: 0.032px;
  transition: 100ms linear;
  white-space: nowrap;
  text-transform: uppercase;
  user-select: none;
  justify-content: center;
  font-weight: 600;
}

@media (min-width: 1281px) {
  .commission-detail-container {
    display: flex;
    flex-direction: row !important;
    gap: 8px;
  }

  .commission-detail-modal {
    width: 90%;
    transform: translate(-50%, -50%);
    left: 50%;
    margin: 0 !important;
    top: 50%;
  }
}
/* End COMMISSION */