@import url(https://fonts.googleapis.com/css?family=Montserrat:300,400,400i,500,500i,600,600i,700,700i,800|Open+Sans:400,400i,600,600i,700,700i,800&display=swap);
/* Typography
================================================== */
body {
  background: #350b2d;
  color: #555;
}

body,
p {
  font-family: "Open Sans", sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased !important;
  line-height: 26px;
  font-size: 15px;
  color: #fff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #ffffff;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased !important;
}

h1 {
  font-size: 36px;
  line-height: 48px;
}

h2 {
  font-size: 28px;
  line-height: 36px;
  text-transform: uppercase;
  letter-spacing: -1px;
}

h3 {
  font-size: 24px;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: -0.5px;
}

h4 {
  font-size: 18px;
  line-height: 28px;
  text-transform: uppercase;
  letter-spacing: -0.2px;
}

h5 {
  font-size: 14px;
  line-height: 24px;
}

.alert .icon {
  margin-right: 15px;
}

/* Global styles
================================================== */
html {
  overflow-x: hidden !important;
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  border: 0;
  margin: 0;
  padding: 0;
}

.body-inner {
	position: relative;
	overflow: hidden;
	border: 2px solid #ffb600;
}

.preload {
  position: fixed;
  background: #fff url(../images/preload.gif) center center no-repeat;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 99999;
}

a:link,
a:visited {
  text-decoration: none;
}

a {
  color: inherit;
  transition: 0.2s ease;
}

a:hover {
  text-decoration: none;
  color: #000;
}

a.read-more {
  color: #ffb600;
  font-weight: 700;
  text-transform: uppercase;
}

a.read-more:hover {
  color: #222;
}

section,
.section-padding {
  padding: 70px 0;
  position: relative;
}

.no-padding {
  padding: 0;
}

.gap-60 {
  clear: both;
  height: 60px;
}

.gap-40 {
  clear: both;
  height: 40px;
}

.gap-30 {
  clear: both;
  height: 30px;
}

.gap-20 {
  clear: both;
  height: 20px;
}

.mrb-30 {
  margin-bottom: 30px;
}

.mrb-80 {
  margin-bottom: -80px;
}

.mrt-0 {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
}

.pab {
  padding-bottom: 0;
}

a:focus {
  outline: 0;
}

.ts-padding {
  padding: 60px;
}

.solid-bg {
	background: #000;
}

.dark-bg {
  background: #252525;
  color: #fff;
}

.dark-bg h2,
.dark-bg h3 {
  color: #fff;
}

.solid-row {
  background: #f0f0f0;
}

.bg-overlay {
  position: relative;
}

.bg-overlay .container {
  position: relative;
  z-index: 1;
}

.bg-overlay:after {
  background-color: rgba(0, 46, 91, 0.8);
  z-index: 0;
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.bg-overlay:after {
  position: relative;
}

.bg-overlay:after {
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 0;
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.content-hidden {
  position: absolute;
  height: 1px;
  width: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  border: 0;
  overflow: hidden;
}

/* Dropcap */
.dropcap {
  font-size: 48px;
  line-height: 60px;
  padding: 0 7px;
  display: inline-block;
  font-weight: 700;
  margin: 5px 15px 5px 0;
  position: relative;
  text-transform: uppercase;
}

.dropcap.primary {
  background: #ffb600;
  color: #fff;
}

.dropcap.secondary {
  background: #3a5371;
  color: #fff;
}

/* Title */
.title {
  font-size: 32px;
  line-height: 36px;
  margin-bottom: 20px;
}

/* Title Border */
/* Section title */
.section-title {
	font-size: 18px;
	line-height: 28px;
	margin: 0;
	text-transform: uppercase;
	font-weight: 300;
	color: #ffb600;
}

.section-sub-title {
	font-weight: 900;
	font-size: 36px;
	line-height: 46px;
	margin: 0 0 60px;
	color: #ffb600;
}
@media (max-width: 575px) {
  .section-sub-title {
    font-size: 28px;
  }
}

/* Column title */
.column-title {
  margin: 0 0 40px;
}

.column-title-small {
  font-size: 20px;
  margin: 0 0 25px;
}

.glitch {
  font-size: 28px;
  font-weight: 700;
  position: relative;
  text-transform: uppercase;
}

.glitch {
  animation: glitch 1000ms infinite;
}

.glitch span {
  position: absolute;
  top: 0;
  left: 0;
}

.glitch span:first-child {
  animation: glitch 650ms infinite;
  clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%);
  transform: translate(-0.05em, -0.025em)
}

.glitch span:last-child {
  animation: glitch 650ms infinite;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
  transform: translate(0.05em, 0.025em)
}


@keyframes glitch {
  0% {
    text-shadow:
    0.05em 0 0 rgba(255,0,0,.75),
    -0.025em -0.05em 0 rgba(0,255,0,.75),
    0.025em 0.05em 0 rgba(0,0,255,.75);
  }
  14% {
    text-shadow:
    0.05em 0 0 rgba(255,0,0,.75),
    -0.025em -0.05em 0 rgba(0,255,0,.75),
    0.025em 0.05em 0 rgba(0,0,255,.75);
  }
  15% {
    text-shadow:
    -0.05em -0.025em 0 rgba(255,0,0,.75),
    0.025em 0.025em 0 rgba(0,255,0,.75),
    -0.05em -0.05em 0 rgba(0,0,255,.75);
  }
  49% {
    text-shadow:
    -0.05em -0.025em 0 rgba(255,0,0,.75),
    0.025em 0.025em 0 rgba(0,255,0,.75),
    -0.05em -0.05em 0 rgba(0,0,255,.75);
  }
  50% {
    text-shadow:
    0.025em 0.05em 0 rgba(255,0,0,.75),
    -0.025em -0.05em 0 rgba(0,255,0,.75),
    0 -0.05em 0 rgba(0,0,255,.75);
  }
  99% {
    text-shadow:
    0.025em 0.05em 0 rgba(255,0,0,.75),
    -0.025em -0.05em 0 rgba(0,255,0,.75),
    0 -0.05em 0 rgba(0,0,255,.75);
  }
  100% {
    text-shadow:
    -0.025em 0 0 rgba(255,0,0,.75),
    -0.025em -0.025em 0 rgba(0,255,0,.75),
    -0.025em -0.05em 0 rgba(0,0,255,.75);
  }
}

/* Page content title */
.page-content-title.first {
  margin-top: 0;
}

/* Video responsive */
.embed-responsive {
  padding-bottom: 56.25%;
  position: relative;
  display: block;
  height: 0;
  overflow: hidden;
}

.embed-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Input form */
.form-control {
  box-shadow: none;
  border: 1px solid #dadada;
  padding: 5px 20px;
  height: 44px;
  background: none;
  color: #959595;
  font-size: 14px;
  border-radius: 0;
}

.form-control:focus {
  box-shadow: none;
  border: 1px solid #ffb600;
}

hr {
  background-color: #e7e7e7;
  border: 0;
  height: 1px;
  margin: 40px 0;
}

.alert hr {
  background: initial;
  margin: initial;
  border-top: 1px solid;
  height: initial;
  margin-bottom: 1rem;
  opacity: 0.2;
}

blockquote {
  padding: 25px;
  margin: 20px 0;
  background: #f9f9f9;
  position: relative;
  border-left: 3px solid #ffb600;
  padding-left: 40px;
}
blockquote.text-center {
  border-top: 3px solid #ffb600;
  border-left: 0;
  padding-left: 25px;
  padding-top: 50px;
}
blockquote.text-center:before {
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
}
blockquote.text-right {
  border-right: 3px solid #ffb600;
  padding-right: 40px;
  border-left: 0;
  padding-left: 25px;
}
blockquote.text-right:before {
  left: auto;
  right: 5px;
}
blockquote:before {
  content: "\f10d";
  font-family: "Font Awesome 6 Free";
  position: absolute;
  font-size: 28px;
  color: #E5E5E5;
  top: 5px;
  left: 5px;
  font-weight: 700;
  z-index: 0;
}

blockquote p {
	font-size: 14px;
	line-height: 22px;
	position: relative;
	z-index: 1;
	font-style: italic;
	margin-bottom: 0;
	color: #ffb600;
}

cite {
  display: block;
  font-size: 14px;
  margin-top: 10px;
}

/* Ul, Ol */
.list-round,
.list-arrow,
.list-check {
  list-style: none;
  margin: 0;
  padding: 0 0 0 15px;
}

.list-round li {
  line-height: 28px;
}

.list-round li:before {
  font-family: "Font Awesome 6 Free";
  content: "\f138";
  margin-right: 10px;
  color: #ffb600;
  font-size: 12px;
}

.list-arrow {
  padding: 0;
}

ul.list-arrow li:before {
  font-family: "Font Awesome 6 Free";
  content: "\f11b";
  margin-right: 10px;
  color: #ffb600;
  font-size: 16px;
  font-weight: bold;
}

ul.list-check li:before {
  font-family: "Font Awesome 6 Free";
  content: "\f00c";
  margin-right: 10px;
  color: #ffb600;
  font-size: 14px;
}

/* Bootstrap */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover,
.nav-tabs > li > a:hover,
.nav-tabs > li > a {
  border: 0;
}

.nav > li > a:focus,
.nav > li > a:hover {
  background: none;
}

.pattern-bg {
  background: #f5f5f5 url(../images/crossword.png);
}

a[href^=tel] {
  color: inherit;
  text-decoration: none;
}

/* Button */
.btn:active, .btn:focus {
  box-shadow: none !important;
}

.btn-primary,
.btn-dark {
  border: 0;
  border-radius: 3px;
  padding: 12px 20px 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  transition: 350ms;
  font-size: 14px;
}
@media (max-width: 767px) {
  .btn-primary,
.btn-dark {
    font-size: 13px;
  }
}

.btn-white.btn-primary {
  background: #fff;
  color: #ffb600;
}

.btn-primary {
  background: #ffb600;
}

.btn-dark {
  background: #23282d;
}

.btn-primary:hover,
.btn-dark:hover,
.btn-white.btn-primary:hover {
  background: #111;
  color: #fff;
}
.btn-primary:hover:active, .btn-primary:hover:focus,
.btn-dark:hover:active,
.btn-dark:hover:focus,
.btn-white.btn-primary:hover:active,
.btn-white.btn-primary:hover:focus {
  color: #fff;
  background-color: #111 !important;
}

.general-btn {
  margin-top: 50px;
}

/* Bootstrap */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover,
.nav-tabs > li > a:hover,
.nav-tabs > li > a {
  border: 0;
}

.nav > li > a:focus,
.nav > li > a:hover {
  background: none;
}

.pattern-bg {
  background: #f5f5f5 url(../images/crossword.png);
}

a[href^=tel] {
  color: inherit;
  text-decoration: none;
}

/* Top Bar
================================================== */
.top-bar {
	padding: 8px 0;
	background: #ffb600;
	position: relative;
	color: #fff;
}

/* Top info */
ul.top-info {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.top-info li {
  position: relative;
  line-height: 10px;
  display: inline-block;
  margin-left: 0;
  padding-right: 15px;
}

ul.top-info li i {
  font-size: 18px;
  position: relative;
  top: 2px;
  margin-right: 5px;
}

ul.top-info li p.info-text {
  margin: 0;
  line-height: normal;
  display: inline-block;
  flex-direction: column;
}

/* Top social */
.top-social ul {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-right: -12px;
}
@media (max-width: 767px) {
  .top-social ul {
    margin-right: 0;
  }
}
.top-social ul li {
  display: inline-block;
  padding: 0;
}
.top-social ul li a {
  color: #ffffff;
  font-size: 14px;
  transition: 400ms;
  padding: 9px 12px;
}
.top-social ul li a:hover {
  color: #333;
}

/* Top bar border */
.top-bar-border {
  padding: 8px 20px 8px;
  border-bottom: 1px solid #ddd;
}

.top-bar-border ul.top-info {
  color: #707070;
  font-weight: 400;
}

.top-bar-border .top-social li a {
  color: #fff;
}

.top-bar-border ul.top-info li i {
  color: #ffb600;
}

/* Header area
================================================== */
.header {
  background: #fff;
  position: relative;
  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.1);
}
.navbar-fixed {
  z-index: 9999;
  position: fixed;
  width: 100%;
  top: 0;
}

.header-two {
  background: #000;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15);
  padding: 15px 0;
}
.header-two .navbar-fixed {
	background-color: #000;
}

ul.navbar-nav > li > a {
  padding: 15px 0 !important;
  color: #fff;
}

@media (max-width: 991px) {
  ul.navbar-nav > li > a {
    padding: 1px 0 !important;
  }
  .navbar-nav {
    margin-bottom: 15px;
  }
}
ul.navbar-nav > li:hover > a,
ul.navbar-nav > li.active > a {
  color: #ffb600 !important;
}

/*-- Logo --*/
.logo img {
  width: auto;
  height: 35px;
}

.header-two .logo img {
  height: 30px;
}

/* header right */
.header-right {
  float: right;
}

ul.top-info-box {
  list-style: none;
  margin: 0;
  padding: 0;
  float: right;
}
@media (max-width: 767px) {
  ul.top-info-box {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
  }
}

ul.top-info-box li {
  position: relative;
  float: left;
  margin-left: 0;
  border-right: 1px solid #dedede;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  padding-right: 25px;
  margin-right: 25px;
}
@media (max-width: 767px) {
  ul.top-info-box li {
    border: 0;
    text-align: center;
    margin: 0;
    flex: 0 0 50%;
    padding: 0;
    margin-top: 10px;
  }
}
@media (max-width: 400px) {
  ul.top-info-box li {
    border: 0;
    text-align: center;
    margin: 0;
    flex: 0 0 100%;
    margin-top: 15px;
  }
}

ul.top-info-box li:last-child {
  margin-right: 0;
  padding-right: 0;
  border-right: 0;
}

ul.top-info-box li.last {
  border-right: 0;
}

ul.top-info-box li .info-box span.info-icon {
  font-size: 20px;
  display: inline-block;
  text-align: center;
  margin: 2px 5px 0 0;
  position: relative;
}

ul.top-info-box li .info-box .info-box-content {
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  flex-direction: column;
}

ul.top-info-box li .info-box .info-box-title {
  font-size: 14px;
  margin-bottom: 8px;
  line-height: normal;
}

ul.top-info-box li .info-box .info-box-subtitle {
  margin: 0;
  line-height: normal;
  font-size: 15px;
  font-weight: 700;
  color: #111;
}

/*-- Search start --*/
ul.top-info-box > li.nav-search {
  cursor: pointer;
  padding-left: 30px;
  margin-left: 30px;
}

ul.top-info-box > li.nav-search:before {
  position: absolute;
  content: "";
  background: #ddd;
  left: 0;
  width: 1px;
  height: 40px;
  top: 50%;
  margin-top: -10px;
}

ul.top-info-box > li.nav-search i {
  font-size: 20px;
  top: 10px;
  position: relative;
  cursor: pointer;
  color: #999;
}

/* Main navigation */
.navbar-toggler {
  float: left;
  margin-top: 10px;
  padding: 12px;
}

.navbar {
  border-radius: 0;
  border: 0;
  margin-bottom: 0;
}

.navbar-toggler {
  margin: 10px 0;
  padding: 6px;
  border-radius: 0;
  font-size: 1rem;
  background: #ffb600;
}
.navbar-toggler:focus {
  outline: 0;
}

.navbar-dark .navbar-toggler-icon,
.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

ul.navbar-nav > li:hover > a,
ul.navbar-nav > li.active > a {
  color: #ffb600;
  position: relative;
}

ul.navbar-nav > li {
  padding: 0 13px;
  position: relative;
}
@media (max-width: 1200px) {
  ul.navbar-nav > li {
    padding: 0 9px;
  }
  ul.navbar-nav > li .nav-link {
    font-size: 12px;
  }
}

.header-two .navbar-nav > .header-get-a-quote {
  top: -4px;
}

@media (max-width: 991px) {
  .header-two ul.navbar-nav > li {
    padding: 0;
    width: 100%;
  }
}

ul.navbar-nav > li:last-child {
  padding-right: 0;
}

ul.navbar-nav > li:last-child:after {
  background: none;
}

ul.navbar-nav > li > a:hover,
ul.navbar-nav > li > a:focus {
  background: none;
}

ul.navbar-nav > li > a i {
  font-weight: 700;
}

@media (max-width: 991px) {
  ul.navbar-nav > li > a i {
    float: right;
    background: #222;
    padding: 6px 10px;
    margin-top: 7px;
  }
  .header-two ul.navbar-nav > li > a i {
    color: #fff;
  }
  .header-two ul.navbar-nav > li.active > a i,
.header-two ul.navbar-nav > li > a.active i {
    color: #ffb600;
  }
}
ul.navbar-nav > li > a:after,
ul.navbar-nav > li > a:after {
  display: none;
}

ul.navbar-nav > li > a {
  font-family: "Montserrat", sans-serif;
  color: #fff !important;
  text-rendering: optimizeLegibility;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: -0.2px;
  font-size: 14px;
  margin: 0;
  line-height: 40px;
  padding: 30px 0;
  transition: 350ms;
}

.navbar-light ul.navbar-nav > li > a {
  color: #ffffff !important;
  font-size: 13px;
}

/* Dropdown */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -2px;
  border-radius: 0;
}

.dropdown-submenu > a:after {
  display: block;
  content: "\f105";
  font-family: "Font Awesome 6 Free";
  float: right;
  margin-top: 0;
  margin-right: -5px;
  border: 0;
}

.dropdown-submenu:hover > a:after {
  border-left-color: #fff;
}

.dropdown-menu {
  text-align: left;
  background: #fff;
  z-index: 100;
  min-width: 200px;
  border-radius: 0;
  border: 0;
  border-top: 2px solid #ffb600;
  padding: 0 20px;
  margin: 0;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
@media (max-width: 991px) {
  .dropdown-menu {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05);
  }
}

.dropdown-menu-large {
  min-width: 400px;
}

.dropdown-menu-large > li > ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.dropdown-menu-large > li > ul > li > a {
  padding-left: 0;
}

.dropdown-menu-large > li > ul > li.active > a {
  color: #ffb600 !important;
}

.navbar-nav > li > .dropdown-menu a {
  background: none;
}

.dropdown-menu li a {
  font-family: "Montserrat", sans-serif;
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
  line-height: normal;
  text-decoration: none;
  padding: 15px 0;
  letter-spacing: 0.3px;
  border-bottom: 1px solid #e5e5e5;
  color: #333333;
}
@media (max-width: 991px) {
  .dropdown-menu li a {
    padding: 12px 0;
  }
}

.dropdown-menu li:last-child > a {
  border-bottom: 0;
}

.dropdown-menu li a:hover,
.dropdown-menu li a:focus {
  color: #ffb600;
}

@media (min-width: 991px) {
  ul.nav li.dropdown:hover ul.dropdown-menu {
    display: block;
  }
}
@media (min-width: 991px) {
  ul.nav li.dropdown ul.dropdown-menu li.dropdown-submenu .dropdown-menu {
    left: 100%;
    top: 0;
    display: none;
  }
  ul.nav li.dropdown ul.dropdown-menu li.dropdown-submenu:hover .dropdown-menu {
    display: block;
  }
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus,
.dropdown-menu > .active > .dropdown-menu > .active > a {
  background: none;
  color: #ffb600;
}

/*-- Nav Search start --*/
.site-navigation .container,
.search-area {
  position: relative;
}

.search-area {
  min-height: 70px;
  padding-right: 0;
}

.nav-search {
  position: absolute;
  cursor: pointer;
  top: 22px;
  right: 18px;
  color: #999;
}
@media (max-width: 991px) {
  .nav-search {
    top: 17px;
  }
}

.search-block {
  background-color: rgba(0, 0, 0, 0.65);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  display: none;
  padding: 10px;
  position: absolute;
  right: 15px;
  top: 100%;
  width: 300px;
  z-index: 10;
  margin-top: 0;
}
@media (max-width: 991px) {
  .search-block {
    top: 58px;
  }
}

.search-block .form-control {
  background-color: #222;
  border: none;
  color: #fff;
  width: 100%;
  height: 40px;
  padding: 0 12px;
}

.search-block .search-close {
  color: #999;
  position: absolute;
  top: -53px;
  right: -4px;
  font-size: 32px;
  cursor: pointer;
  background: #23282d;
  padding: 5px;
}
@media (max-width: 991px) {
  .search-block .search-close {
    top: -46px;
  }
}

.search-area .nav-search {
  top: 23px;
}

.search-area .search-block .search-close {
  top: -50px;
}

.search-area .search-block {
  right: 0;
}

/* Get a quote */
.header-get-a-quote .btn-primary {
  padding: 12px 25px !important;
  font-size: 13px;
  border-radius: 3px;
  line-height: normal;
  text-transform: capitalize;
  color: #fff;
  margin-top: 5px;
}
@media (max-width: 1200px) {
  .header-get-a-quote .btn-primary {
    padding: 12px !important;
  }
}
@media (max-width: 991px) {
  .header-get-a-quote .btn-primary {
    padding: 12px 30px !important;
  }
}

.header-get-a-quote .btn-primary:hover {
  background: #272d33;
  color: #ffb600 !important;
}

ul.navbar-nav > li.header-get-a-quote:hover > a:after {
  position: relative;
  content: no-close-quote;
}

/*-- Main slide --*/
.banner-carousel .banner-carousel-item {
  height: 700px;
  color: #fff;
  background-position: 50% 50%;
  background-size: cover;
}
@media (max-width: 991px) {
  .banner-carousel .banner-carousel-item {
    height: 550px;
  }
}
@media (max-width: 575px) {
  .banner-carousel .banner-carousel-item {
    height: 450px;
  }
}

.slider-content {
  position: relative;
  height: 100%;
  width: 100%;
}

.slide-title-box {
  font-size: 16px;
  line-height: 39px;
  background: #ffb600;
  color: #fff;
  display: inline-block;
  padding: 0 15px;
  margin: 0 0 10px;
}

.slide-title {
  font-size: 30px;
  line-height: 36px;
  font-weight: 300;
  color: #fff;
  margin: 20px 0 10px;
}
@media (max-width: 991px) {
  .slide-title {
    font-size: 22px;
  }
}
@media (max-width: 575px) {
  .slide-title {
    font-size: 16px;
  }
}

.slide-sub-title {
  font-style: normal;
  font-size: 60px;
  line-height: 58px;
  margin: 20px 0;
  color: #fff;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -1px;
}
@media (max-width: 991px) {
  .slide-sub-title {
    font-size: 46px;
  }
}
@media (max-width: 575px) {
  .slide-sub-title {
    font-size: 30px;
    line-height: 30px;
  }
}

.slider-text {
  display: table;
  vertical-align: bottom;
  color: #fff;
  padding-left: 40%;
  width: 100%;
  padding-bottom: 0;
  padding-top: 20px;
}

.slider-text .slide-head {
  font-size: 36px;
  color: #0052a5;
  position: relative;
}

.slider-img {
  display: block;
  position: absolute;
  top: -80px;
  left: 20%;
  width: 314px;
  max-height: 100%;
}

.slider-img img {
  display: block;
  position: relative;
  max-height: 100%;
  width: auto;
}

.slider.btn {
  margin: 15px 5px 0;
  border: 2px solid transparent;
}
@media (max-width: 575px) {
  .slider.btn {
    font-size: 12px;
  }
}

.slider.border {
  background: none;
  border: 2px solid #ffb600 !important;
}

.slider.border:hover {
  background: #ffb600;
  border: 2px solid transparent;
}

/* Carousel control */
.banner-carousel .carousel-control {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: inline-block;
  transform: translateY(-50%);
  background-color: transparent;
  opacity: 0;
  filter: alpha(opacity=0);
  text-shadow: none;
  transition: all 0.25s ease;
  padding: 0;
  outline: 0;
  border: 0;
}
@media (max-width: 575px) {
  .banner-carousel .carousel-control {
    display: none !important;
  }
}

.banner-carousel .slick-dots {
  opacity: 0;
  filter: alpha(opacity=0);
  bottom: 60px;
}

.slick-dots li button::before {
  font-size: 12px;
}
.slick-dots li button:hover:before, .slick-dots .slick-dots li button:focus:before,
.slick-dots li.slick-active button:before {
  opacity: 1;
  color: #ffb600;
}

.slick-slide {
  outline: 0;
}

.banner-carousel:hover .carousel-control,
.banner-carousel:hover .carousel-control,
.banner-carousel:hover .slick-dots {
  opacity: 1;
  filter: alpha(opacity=100);
}

.banner-carousel .carousel-control.left {
  left: 20px;
}

.banner-carousel .carousel-control.right {
  right: 20px;
}

.banner-carousel .carousel-control i {
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  line-height: 58px;
  width: 60px;
  height: 60px;
  font-size: 22px;
  border-radius: 0;
  transition: all 500ms ease;
}

.banner-carousel .carousel-control i:hover {
  background: #ffb600;
  color: #fff;
}

/*-- Animation */
.banner-carousel [data-animation-in] {
  opacity: 0;
}

/* slick Box slider */
.box-slider-content {
	top: 50%;
	padding: 0;
	position: absolute;
	width: 100%;
	transform: translateY(-50%);
	left: 25%;
}
@media (max-width: 767px) {
  .box-slider-content {
    top: auto;
    transform: translateY(0);
    left: 13px;
    bottom: 20px;
    width: calc(100% - 40px);
  }
}

.box-slider-text {
  background: #111;
  background: rgba(0, 0, 0, 0.65);
  display: inline-block;
  padding: 20px 30px;
  max-width: 650px;
}

.box-slide-title {
  font-size: 18px;
  font-weight: 300;
  margin: 0;
  color: #fff;
}
@media (max-width: 767px) {
  .box-slide-title {
    font-size: 16px;
  }
}

.box-slide-sub-title {
  font-size: 36px;
  margin: 8px 0 10px;
  color: #fff;
}
@media (max-width: 767px) {
  .box-slide-sub-title {
    font-size: 26px;
  }
}

.box-slide-description {
  color: #fff;
}
@media (max-width: 767px) {
  .box-slide-description {
    font-size: 15px;
  }
}

.box-slider-text .btn {
  padding: 10px 20px;
}

.box-slide.owl-theme .owl-controls {
  margin: -20px;
}

/* News
================================================== */
.call-to-action {
  background-color: #272d33;
  padding: 30px;
}

.news-to-action-title {
  color: #fff;
  margin: 0;
  padding: 25px 0;
  line-height: normal;
  font-size: 22px;
  text-transform: capitalize;
}

/* Action style box */
.News-to-action-box {
	margin-top: -62px;
	/* background: #fff; */
	/* clip-path: polygon(11% 0%, 89% 0%, 100% 100%, 0% 100%); */
	/* padding: 15px; */
}
.News-to-action-box .action-style-box {
	background: #ffb600;
	padding: 30px;
	/* border-radius: 60px; */
	clip-path: polygon(5% 0, 95% 0, 100% 50%, 100% 100%, 0 100%, 0% 50%);
}
.action-title {
  color: #fff;
  margin: 0;
  line-height: 36px;
  font-size: 18px;
  text-transform: uppercase;
}
.action-style-box{
  position: relative;
  z-index: 2;
}
 

/* Jackpot
================================================== */

.jackpot_info {
  font-size: 66px;
}
.jack_pot i{
  color: #ffb600;
  font-size: 60px;
}
.jack_pot h2{
  color: #ffb600;
}
.jack_pot h6{
  color: #ffb600;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .jackpot_info {
    font-size: 62px;
  }
  .dollar {
    line-height: 95px !important;
    width: 105px !important;
    height: 105px !important;
    font-size: 95px !important;
  }
}
@media only screen and (max-width: 767px) {
  .jackpot_info {
    font-size: 24px;
  }
  .dollar {
    line-height: 47px !important;
    width: 50px !important;
    height: 50px !important;
    font-size: 47px !important;
    margin-top: 0px !important;
  }
}
.dollar {
	color: #ffffff;
	background: #ffb600;
	/* padding: 30px 20px; */
	border-radius: 50%;
	margin-left: 5px;
	line-height: 103px;
	/* font-size: 134px; */
	width: 112px;
	height: 112px;
	font-size: 100px;
	display: block;
	margin-top: 16px;
}
.odometer.odometer-auto-theme, .odometer.odometer-theme-slot-machine {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  position: relative;
}
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-slot-machine .odometer-digit {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  position: relative;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-digit-spacer {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  visibility: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-digit-inner {
  text-align: left;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-ribbon {
  display: block;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-ribbon-inner {
  display: block;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-value {
  display: block;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-value.odometer-last-value {
  position: absolute;
}
.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-slot-machine.odometer-animating-up .odometer-ribbon-inner {
  -webkit-transition: -webkit-transform 2s;
  -moz-transition: -moz-transform 2s;
  -ms-transition: -ms-transform 2s;
  -o-transition: -o-transform 2s;
  transition: transform 2s;
}
.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-slot-machine.odometer-animating-up.odometer-animating .odometer-ribbon-inner {
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}
.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-slot-machine.odometer-animating-down .odometer-ribbon-inner {
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}
.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-slot-machine.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
  -webkit-transition: -webkit-transform 2s;
  -moz-transition: -moz-transform 2s;
  -ms-transition: -ms-transform 2s;
  -o-transition: -o-transform 2s;
  transition: transform 2s;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

.odometer.odometer-auto-theme, .odometer.odometer-theme-slot-machine {
	/* -webkit-border-radius: 0.34em; */
	/* border-radius: 6.34em; */
	/* background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmYwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmYTUwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); */
	background-size: 100%;
	/* background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffff00), color-stop(100%, #ffa500)); */
	/* background-image: -moz-linear-gradient(#ffff00, #ffa500); */
	/* background-image: -webkit-linear-gradient(#ffff00, #ffa500); */
	/* background-image: linear-gradient(#ffff00, #ffa500); */
	/* background-color: #fc0; */
	font-family: "Rye", monospace;
	padding: 0.15em;
	color: #ffb600;
	line-height: 1.35em;
	/* border: 0.03em solid #000; */
	-webkit-text-stroke: 0.05em #000;
	border-radius: 0px 20px 20px 0px;
  background: #350b2d;
}
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-slot-machine .odometer-digit {
  -moz-box-shadow: inset 0 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em #fff, 0 0 0 0.05em rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em #fff, 0 0 0 0.05em rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em #fff, 0 0 0 0.05em rgba(0, 0, 0, 0.2);
  -moz-border-radius: 0.2em;
  -webkit-border-radius: 0.2em;
  border-radius: 0.2em;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NjY2NjYyIvPjxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIi8+PHN0b3Agb2Zmc2V0PSI4MCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjY2NjY2MiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cccccc), color-stop(20%, #ffffff), color-stop(80%, #ffffff), color-stop(100%, #cccccc));
  background-image: -moz-linear-gradient(top, #cccccc 0%, #ffffff 20%, #ffffff 80%, #cccccc 100%);
  background-image: -webkit-linear-gradient(top, #cccccc 0%, #ffffff 20%, #ffffff 80%, #cccccc 100%);
  background-image: linear-gradient(to bottom, #cccccc 0%, #ffffff 20%, #ffffff 80%, #cccccc 100%);
  border: 0.03em solid #444;
  padding: 0.1em 0.15em 0;
}
.odometer.odometer-auto-theme .odometer-digit:first-child, .odometer.odometer-theme-slot-machine .odometer-digit:first-child {
  -moz-box-shadow: inset 0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em #fff, 0 0 0 0.05em rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em #fff, 0 0 0 0.05em rgba(0, 0, 0, 0.2);
  box-shadow: inset 0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em #fff, 0 0 0 0.05em rgba(0, 0, 0, 0.2);
}
.odometer.odometer-auto-theme .odometer-digit:last-child, .odometer.odometer-theme-slot-machine .odometer-digit:last-child {
  -moz-box-shadow: inset -0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em #fff, 0 0 0 0.05em rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset -0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em #fff, 0 0 0 0.05em rgba(0, 0, 0, 0.2);
  box-shadow: inset -0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em #fff, 0 0 0 0.05em rgba(0, 0, 0, 0.2);
}
.odometer.odometer-auto-theme .odometer-digit + .odometer-digit, .odometer.odometer-theme-slot-machine .odometer-digit + .odometer-digit {
  margin-left: 0.15em;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-digit-inner {
  padding-top: 0.08em;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-value.odometer-last-value {
  left: 0;
  right: 0;
  text-align: center;
}

/* Intro
================================================== */
/* Intro */
.ts-intro {
  padding-right: 20px;
}

.into-title {
  font-weight: 300;
  text-transform: uppercase;
  font-size: 18px;
  line-height: normal;
  margin: 0;
  color: #ffb600;
}

.into-sub-title {
	font-weight: 900;
	text-transform: uppercase;
	font-size: 32px;
	line-height: normal;
	margin: 10px 0;
	color: #ffb600;
}

/*-- Featured Tab --*/
.featured-tab {
  padding-left: 15px;
}

.featured-tab .nav-tabs {
  border: 0;
}

.featured-tab .nav-tabs > li > a {
  font-family: "Roboto Slab", serif;
  background: #272d33;
  color: #fff;
  text-shadow: none;
  font-weight: 700;
  border-radius: 0;
  text-transform: uppercase;
  line-height: 50px;
  margin: 0 1px 20px;
  padding: 0 20px;
  border: 0 !important;
  transition: all 300ms ease;
}

.featured-tab .tab-content {
  border-top: 0;
  padding: 0;
  overflow: hidden;
}

.featured-tab .nav.nav-tabs {
  margin-bottom: 10px;
}

.featured-tab .nav-tabs > li.active > a {
  color: #fff;
  background: #ffb600;
  position: relative;
}

.featured-tab .nav-tabs > li.active > a:after {
  position: absolute;
  content: " ";
  width: auto;
  height: auto;
  bottom: -20px;
  left: 50%;
  border-width: 10px;
  border-style: solid;
  border-color: #ffb600 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
  transform: translateX(-50%);
}

.featured-tab .lead {
  font-size: 18px;
  line-height: 28px;
  color: #303030;
  font-weight: 400;
}

.featured-tab .tab-pane img.pull-left {
  margin: 0 30px 10px 0;
}

.featured-tab .tab-pane img.pull-right {
  margin: 0 0 0 30px;
}

.featured-tab .tab-icon i {
  font-size: 230px;
}

.tab-image-content {
  padding-left: 0;
}

.featured-tab .border-title.border-left {
  display: inline-block;
  margin-bottom: 25px;
  font-size: 20px;
}

/* Tab services */
.featured-tab.tab-services .nav-tabs > li > a {
  font-size: 14px;
  padding: 0 21px;
  text-transform: capitalize;
}

.featured-tab.tab-services .nav.nav-tabs {
  margin-bottom: 20px;
}

/* Facts
================================================== */
.facts-wrapper {
  text-align: center;
}

.facts-wrapper .ts-facts {
  color: #fff;
}

.ts-facts .ts-facts-icon i {
  font-size: 42px;
  color: #ffb600;
}

.ts-facts .ts-facts-content .ts-facts-num {
  color: #fff;
  font-size: 44px;
  margin: 30px 0 20px;
}

.ts-facts .ts-facts-content .ts-facts-title {
  font-size: 16px;
  color: #ffb600;
  margin: 0;
}

/* Services
================================================== */
/* Service box */
.ts-service-box .ts-service-icon i {
  font-size: 36px;
  float: left;
  color: #ffb600;
}

.ts-service-box .ts-service-box-content {
  margin-left: 62px;
  margin-bottom: 30px;
}

.tab-content .ts-service-box .ts-service-box-content {
  margin-left: 90px;
}

.ts-service-box .ts-service-box-content h3 {
	font-size: 16px;
	margin-bottom: 10px;
	line-height: 28px;
	color: #fff;
}

.ts-service-box .ts-service-box-info {
  margin-left: 25px;
  margin-bottom: 40px;
}

.service-box-title {
  font-size: 16px;
  margin: 0 0 10px;
}
.service-box-title a {
	color: #ffb600;
}
.service-box-title a:hover {
  color: #ffb600;
}

/* Service box bg */
.ts-service-box-bg {
  background: #252525;
  color: #fff;
  padding: 30px;
}

.ts-service-box-bg h4,
.ts-service-box-bg h3 {
  color: #fff;
}

/* Service box 

.ts-service-box .ts-service-icon i {
  font-size: 24px;
  float: left;
  color: #fff;
  background: $color-primary;
  border-radius: 100%;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}

.ts-service-box .ts-service-box-content {
  margin-left: 80px;
  margin-bottom: 30px;
}

.tab-content .ts-service-box .ts-service-box-content {
  margin-left: 90px;
}

.ts-service-box .ts-service-box-content h3 {
  font-size: 18px;
  margin-bottom: 15px;
}

.ts-service-box .ts-service-box-info {
  margin-left: 90px;
  margin-bottom: 40px;
}

.service-box-title {
  font-size: 18px;
  margin: 0 0 10px;
}

.service-box-title a {
  color: #333;
}

.service-box-title a:hover {
  color: $color-primary;
}

.service-center-img {
  padding: 0 20px;
}
*/
/* Icon squre */
.ts-service-icon.icon-round i {
  font-size: 24px;
  color: #fff;
  background: #ffb600;
  text-align: center;
  border-radius: 100%;
  width: 60px;
  height: 60px;
  line-height: 60px;
  margin-bottom: 20px;
  position: relative;
  float: none;
}

/* Icon left */
.ts-service-box.icon-left .ts-service-box-icon {
  float: left;
}

.ts-service-box.icon-left .ts-service-box-icon i {
  background: #ffb600;
  color: #fff;
}

.ts-service-box.icon-left .ts-service-box-info {
  margin-left: 90px;
}

.ts-service-box.icon-left .ts-service-box-info h3 {
  margin-top: 0;
  margin-bottom: 5px;
}

/* Service no box */
.service-no {
  font-size: 48px;
  color: #dbdbdb;
  float: left;
  margin-top: 10px;
}

.ts-service-box-content .ts-service-box-info {
  margin-left: 90px;
}

/* Service Image */
.ts-service-image-wrapper {
  margin-bottom: 30px;
}

.ts-service-icon i {
  font-size: 28px;
  margin-right: 15px;
  margin-top: 2px;
}

.ts-service-info {
  margin-left: 30px;
}
.ts-service-info h3 {
  font-size: 16px;
}
.ts-service-info .learn-more {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
}
.ts-service-info .learn-more:hover {
  color: #ffb600;
}

/* Service Classic */
.ts-service-classic .ts-service-icon i {
  font-size: 24px;
  float: left;
  color: #fff;
  background: #ffb600;
  border-radius: 100%;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  transition: all 0.3s;
}

.ts-service-classic .ts-service-box-info {
  margin-left: 80px;
}

.ts-service-classic:hover .ts-service-icon i {
  background: #ffb600;
}

/* games area
================================================== */
/* game filter nav */
.shuffle-btn-group {
  display: inline-block;
  margin: 20px 0 50px;
  width: 100%;
  border-bottom: 3px solid #ffb600;
}
.shuffle-btn-group label {
  display: inline-block;
  color: #ffffff;
  font-size: 14px;
  padding: 6px 25px;
  padding-top: 10px;
  font-weight: 700;
  text-transform: uppercase;
  transition: all 0.3s;
  cursor: pointer;
  margin: 0;
}
.shuffle-btn-group label.active {
	color: #fff;
	background: #ffb600;
}
.shuffle-btn-group label input {
  display: none;
}

/* game shuffle Item */
.shuffle-item {
  padding: 0;
}
.shuffle-item .game-img-container {
  position: relative;
  overflow: hidden;
}
.shuffle-item .game-img-container img {
  transform: perspective(1px) scale3d(1.1, 1.1, 1);
  transition: all 400ms;
}
.shuffle-item .game-img-container:hover img {
  transform: perspective(1px) scale3d(1.15, 1.15, 1);
}
.shuffle-item .game-img-container:after {
  opacity: 0;
  position: absolute;
  content: "";
  top: 0;
  right: auto;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  transition: all 400ms;
}
.shuffle-item .game-img-container:hover:after {
  opacity: 1;
}
.shuffle-item .game-img-container .gallery-popup .gallery-icon {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  padding: 5px 12px;
  background: #ffb600;
  color: #fff;
  opacity: 0;
  transform: perspective(1px) scale3d(0, 0, 0);
  transition: all 400ms;
}
.shuffle-item .game-img-container:hover .gallery-popup .gallery-icon {
  opacity: 1;
  transform: perspective(1px) scale3d(1, 1, 1);
}
.shuffle-item .game-img-container .game-item-info {
  position: absolute;
  top: 50%;
  margin-top: -10%;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 30px;
  z-index: 1;
}
.shuffle-item .game-img-container .game-item-info-content {
  opacity: 0;
  transform: perspective(1px) translate3d(0, 15px, 0);
  transition: all 400ms;
}
.shuffle-item .game-img-container .game-item-info-content .game-item-title {
  font-size: 20px;
}
.shuffle-item .game-img-container .game-item-info-content .game-item-title a {
  color: #fff;
}
.shuffle-item .game-img-container .game-item-info-content .game-item-title a:hover {
  color: #ffb600;
}
.shuffle-item .game-img-container .game-item-info-content .game-cat {
  background: #ffb600;
  display: inline-block;
  padding: 2px 8px;
  font-weight: 700;
  color: #000;
  font-size: 10px;
  text-transform: uppercase;
}
.shuffle-item .game-img-container:hover .game-item-info-content {
  opacity: 1;
  transform: perspective(1px) translate3d(0, 0, 0);
}

.general-btn .btn-primary:hover {
  background: #000;
}

/* game owl */
.owl-theme.game-slide {
  margin-top: 60px;
}

.game-slide .item {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.game-item img {
  width: 100%;
  max-width: auto;
  transition: all 0.6s ease 0s;
}

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

.game-item-content {
  position: absolute;
  bottom: -1px;
  padding: 15px 20px;
  width: 100%;
  background: #ffb600;
}

.owl-theme.game-slide .owl-nav > div {
  position: absolute;
  top: -70px;
  right: 0;
  transform: translateY(-50%);
}

.game-slide .owl-nav > div {
  display: inline-block;
  margin: 0 2px;
  font-size: 20px;
  background: #ffb600;
  color: #fff;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
}

.owl-theme.game-slide .owl-nav > .owl-prev {
  right: 35px;
  left: auto;
}

/* games Single page */
.game-title {
  font-size: 30px;
}

.game-info-label {
  color: #303030;
  font-weight: 700;
  font-size: 14px;
}

.game-info-content {
  font-size: 12px;
}

.game-info li {
  margin-bottom: 5px;
}

.game-link {
  margin-top: 15px;
}
.single_game_topic h3{
  color: #ffb600;
}
.review i {
	font-size: 25px;
	color: #ffb600;
}
.review p {
	font-size: 25px;
	color: #ffb600;
}
.project-info-label{
  color: #ffb600;
  font-weight: 800;
}

/* Content area
================================================== */
/* Accordion */
.accordion-group .card {
  border-radius: 0;
  margin-bottom: 10px;
  background-color: transparent;
	border: none;
}
.accordion-group .card-body {
	padding: 15px 20px;
	color: #000;
	background: #fff;
}
.accordion-group .card-body img {
  max-width: 100px;
  margin-bottom: 10px;
}
.accordion-group .card-header .btn {
	font-size: 16px;
	text-transform: uppercase;
	font-weight: 700;
	padding: 13px 15px;
	padding-bottom: 10px;
	background: #ffb600;
}
.accordion-group .card-header .btn:before {
  font-family: "Font Awesome 6 Free";
  position: absolute;
  z-index: 0;
  font-size: 14px;
  right: 16px;
  padding: 3px 8px 1px;
  text-align: center;
  border-radius: 3px;
  top: 12px;
  content: "\f107";
  font-weight: 700;
  background-color: #333;
  color: #fff;
  transition: 0.3s;
}
.accordion-group .card-header .btn[aria-expanded=true] {
  color: #fff;
}
.accordion-group .card-header .btn[aria-expanded=true]::before {
  content: "\f106";
  background-color: #ffb600;
}
.accordion-group.accordion-classic .card-header .btn:before {
  display: none;
}

/* Clients */
.clients-logo {
  margin: 0 0 30px;
  border: 1px solid #dadada;
  min-height: 105px;
  padding: 0 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  background: #fff;
}

/* .clients-logo img {
  filter: grayscale(100%);
  filter: gray;
} */

/* Testimonial
================================================== */
.testimonial-area {
  padding: 100px 0;
  background-color: #ffb600;
  background-image: url(../images/parallax2.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: 50% 50%;
}

.testimonial-area .border-title,
.testimonial-area .border-sub-title {
  color: #fff;
}

.quote-item .quote-text {
	margin: 0 0 10px;
	display: inline-block;
	padding: 0 40px 30px 60px;
	background-color: #350b2d;
	position: relative;
	font-size: 16px;
	font-style: italic;
}
@media (max-width: 575px) {
  .quote-item .quote-text {
    padding: 0 40px 30px 50px;
  }
}

.quote-item .quote-text:before {
  content: "\f10d";
  font-family: "Font Awesome 6 Free";
  position: absolute;
  font-size: 30px;
  left: 0;
  top: 0;
  font-weight: 700;
  color: #ffc009;
}

.testimonial-slide .slick-dots {
  bottom: -35px;
}

img.testimonial-thumb {
  max-width: 80px;
  float: left;
  margin-right: 20px;
  border-radius: 5px;
}

.quote-item-info {
  padding-top: 15px;
  display: inline-block;
}

.quote-author {
  font-size: 16px;
  line-height: 18px;
  margin: 0 0 2px;
  font-weight: 700;
  display: block;
  color: #ffb600;
}

.quote-item-footer {
  margin-top: 0;
  margin-left: 60px;
}
@media (max-width: 575px) {
  .quote-item-footer {
    margin-left: 0;
  }
}

/* Testimonial Border */
.quote-item.quote-border .quote-text-border {
	border: 1px solid #ffb600;
	padding: 20px;
	position: relative;
	line-height: 28px;
	color: #fff;
	font-size: 18px;
	text-align: center;
	background: #ffb600;
}

.quote-item.quote-border .quote-text-border:before {
  border: 12px solid;
  border-color: #e1e1e1 transparent transparent;
  border-top-color: #ffb600;
  bottom: -24px;
  position: absolute;
  content: "";
  display: block;
  height: 0;
  width: 0;
  left: 0;
  margin: 0 auto;
  right: 0;
}

.quote-item.quote-border .quote-text-border::after {
	border: 12px solid;
	border-color: #ffb600 transparent transparent;
	bottom: -22px;
	position: absolute;
	content: "";
	display: block;
	height: 0;
	width: 0;
	left: 0;
	margin: 0 auto;
	right: 0;
}

.quote-item.quote-border .quote-item-footer {
  margin-left: 0;
  text-align: center;
  margin-top: 35px;
}

.quote-item.quote-border .quote-item-footer img.testimonial-thumb {
  float: none;
  margin: 0;
}

.quote-item.quote-border .quote-item-footer .quote-item-info {
  display: block;
}

/* Subscribe area
================================================== */
.subscribe {
  background: #ffb600;
  padding: 0;
}

/* Call to action */
.subscribe-call-to-acton {
  min-height: 115px;
  padding: 30px 0 0 30px;
}
@media (max-width: 575px) {
  .subscribe-call-to-acton {
    text-align: center;
    padding: 30px 0;
    min-height: auto;
  }
}

.subscribe-call-to-acton h3 {
  font-size: 18px;
  margin-top: 0;
  margin-bottom: 5px;
}

.subscribe-call-to-acton h4 {
  color: #fff;
  font-size: 24px;
  margin: 0;
}

/* Newsletter */
.ts-newsletter {
  background: #252525;
  position: relative;
  min-height: 115px;
  padding: 15px 0 0 50px;
}
@media (max-width: 767px) {
  .ts-newsletter {
    padding-top: 20px;
    padding-bottom: 10px;
  }
}
@media (max-width: 575px) {
  .ts-newsletter {
    padding: 30px 5px 15px 5px;
    min-height: auto;
    text-align: center;
  }
}
.ts-newsletter:after {
  content: "";
  position: absolute;
  background: #252525;
  display: block;
  width: 100%;
  height: 100%;
  right: -100%;
  top: 0;
}

.newsletter-form input {
	background: none;
	font-size: 12px;
	height: 45px;
	border: 1px solid rgba(255, 182, 0, 0.56);
}

/* News section
================================================== */
.latest-post {
  position: relative;
}

.latest-post .image-angle:before {
  border-bottom: 20px solid #f9f9f9;
}

.latest-post .post-title {
  font-size: 16px;
  line-height: 24px;
  margin: 0;
  font-weight: 600;
}

.latest-post .post-title a {
  color: #ffffff;
}
.post-title span{
  background: #ffb600;
  padding: 6px;
  margin-bottom: 20px;
  display: inline-block;
}

.latest-post .post-title .post_link:hover {
  color: #ffb600;
}
.latest-post .post-title a:hover span {
  color: #ffffff !important;
}

.latest-post-meta {
  font-size: 13px;
  text-transform: uppercase;
}

.latest-post .post-body {
	padding: 20px;
	background: #000;
}

/* Footer
================================================== */
/*- Footer common */
.footer {
  background-color: #0d0d0d;
  color: #fff;
}

.footer-main {
  padding: 80px 0 60px;
}

.footer .widget-title {
  font-size: 16px;
  font-weight: 700;
  position: relative;
  margin: 0 0 30px;
  padding-left: 15px;
  text-transform: uppercase;
  color: #fff;
  border-left: 3px solid #ffb600;
}

/* Footer about us */
.footer-logo {
  margin-bottom: 25px;
}

/* Footer social */
.footer-social {
  margin-top: 15px;
}

.footer-social .widget-title {
  font-size: 14px;
  margin-bottom: 10px;
}

.footer-social ul {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: -13px;
}
.footer-social ul li {
  display: inline-block;
}
.footer-social ul li a i {
  display: block;
  font-size: 16px;
  color: #999;
  transition: 400ms;
  padding: 10px 13px;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}
.footer-social ul li a i:hover {
  color: #ffb600;
}
.footer-social ul li:hover {
  color: #fff;
}

/* Links */
.footer-widget ul.list-arrow li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding: 8px 0;
}

.footer-widget ul.list-arrow li:last-child {
  border-bottom: 0;
}

.footer-widget ul.list-arrow li a,
.footer-widget ul.list-arrow li:before {
  color: #ffffff;
}

.footer-widget ul.list-arrow li:hover a,
.footer-widget ul.list-arrow li:hover {
  color: #ffb600;
}

.working-hours {
  padding-right: 10px;
}

.working-hours .text-right {
  float: right;
}

/*-- Copyright --*/
.copyright {
  background: #ffb600;
  color: #111;
  padding: 25px 0;
  position: relative;
  z-index: 1;
  font-weight: 600;
  font-size: 12px;
}

.footer-menu ul li {
  display: inline-block;
  line-height: 12px;
  padding-left: 15px;
}

.footer-menu ul.nav li a {
  background: none;
  color: #111;
  padding: 0;
}

.footer-menu ul li a:hover {
  color: #fff;
}

#back-to-top {
  right: 40px;
  top: auto;
  z-index: 10;
  display: none;
}
#back-to-top .btn:focus {
  outline: 0;
  box-shadow: none;
}
@media (max-width: 767px) {
  #back-to-top {
    right: 15px;
  }
}

#back-to-top.position-fixed {
  bottom: 20px;
}

#back-to-top .btn.btn-primary {
  width: 36px;
  height: 36px;
  line-height: 36px;
  background: rgba(0, 0, 0, 0.9);
  border-radius: 3px;
  color: #ffb600;
  font-weight: 700;
  font-size: 16px;
  padding: 0;
}
@media (max-width: 767px) {
  #back-to-top .btn.btn-primary {
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
  }
}

#back-to-top .btn.btn-primary:hover {
  color: #fff;
}

/* Sub Pages
================================================== */
/*-- Title border --*/
.main-container .border-left {
  margin-bottom: 30px;
}

/*-- Banner --*/
.banner-carousel{
  clip-path: polygon(50% 0%, 100% 0, 100% 92%, 91% 100%, 9% 100%, 0 90%, 0 0);
}
.banner-area {
  position: relative;
  min-height: 300px;
  color: #fff;
  background-position: 50% 50%;
  background-size: cover;
}

.banner-title {
  color: #fff;
  text-transform: uppercase;
  font-size: 58px;
  font-weight: 900;
}
@media (max-width: 767px) {
  .banner-title {
    font-size: 48px;
  }
}
@media (max-width: 575px) {
  .banner-title {
    font-size: 32px;
  }
}

.banner-text {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  max-width: 1170px;
  margin: 0 auto;
  width: 100%;
  z-index: 1;
  transform: translateY(-50%);
}

.banner-heading {
  text-align: center;
}

.breadcrumb {
  padding: 0;
  background: none;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
}
.breadcrumb li a,
.breadcrumb .breadcrumb-item,
.breadcrumb li a:focus,
.breadcrumb li a:hover {
  color: #fff !important;
}
.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: #fff;
}

/*-- About us page --*/
/* Slider pages */
.page-slider .carousel-control {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: inline-block;
  transform: translateY(-50%);
  background-color: transparent;
  text-shadow: none;
  transition: all 0.25s ease;
  padding: 0;
  outline: 0;
  border: 0;
}
.page-slider .carousel-control.left {
  left: 0;
}
.page-slider .carousel-control.right {
  right: 0;
}
.page-slider .carousel-control i {
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  line-height: 70px;
  width: 40px;
  height: 70px;
  font-size: 22px;
  border-radius: 0;
  transition: all 500ms ease;
}
.page-slider .carousel-control i:hover {
  background: #ffb600;
  color: #fff;
}

.page-slider.small-bg .item {
  min-height: 330px;
  background-size: cover;
}



.page-slider.small-bg .box-slider-text {
  background: rgba(0, 0, 0, 0.55);
  padding: 5px 20px;
}

.page-slider.small-bg .box-slide-title {
  font-size: 28px;
  color: #fff;
  font-weight: 900;
}

/*-- Get a quote page --*/
.page-quote-form {
  background: #f2f2f2;
  padding: 30px 50px 50px;
}

.get-a-quote-img {
  margin-bottom: -190px;
}

/*-- Partners carousel --*/
.partner-logo {
  border: 1px solid #eee;
  padding: 20px;
  margin-top: 40px;
  margin-bottom: 10px;
}

.partner-logo img {
  transition: 350ms;
  opacity: 0.6;
  filter: grayscale(100%);
}

.partner-logo:hover img {
  opacity: 1;
  filter: grayscale(0%);
}

#partners-carousel .partner-logo {
  border: 0;
  border-right: 1px solid #eee;
  padding: 0 15px;
  margin-top: 20px;
}

#partners-carousel .partner-logo.last {
  border-right: 0;
}

/*-- Team page --*/
.team-slide .slick-slide {
  margin-left: 25px;
  padding-bottom: 60px;
}
.team-slide .slick-list {
  margin-left: -25px;
}
.team-slide .carousel-control {
  position: absolute;
  bottom: 0;
  left: 50%;
  border: 0;
  background-color: #ddd;
  height: 37px;
  width: 37px;
  border-radius: 4px;
  transition: 0.3s;
  z-index: 6;
}
.team-slide .carousel-control:hover {
  background-color: #ffb600;
  color: #fff;
}
.team-slide .carousel-control.left {
  transform: translateX(calc(-50% - 25px));
}
.team-slide .carousel-control.right {
  transform: translateX(calc(-50% + 25px));
}
.team-slide .carousel-control.slick-disabled {
  opacity: 0.4;
}
.team-slide .carousel-control.slick-disabled:hover {
  background-color: #ddd;
  color: #000;
}
.ts-team-wrapper {
	position: relative;
	overflow: hidden;
	transition: all linear .3s;
	-webkit-transition: all linear .3s;
	-moz-transition: all linear .3s;
	-ms-transition: all linear .3s;
	-o-transition: all linear .3s;
}
.shadow{
  box-shadow: 0px 0px 7px 9px #ffb600 !important;
}
.team-img-wrapper {
  overflow: hidden;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}
.ts-team-wrapper:hover
.team-img-wrapper img {
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
}
.team-img-wrapper img {
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}
.ts-team-wrapper .ts-team-content {
  position: absolute;
  top: 76%;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 15px 25px;
  margin-top: 0;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  transition: 350ms;
}
@media (max-width: 1200px) {
  .ts-team-wrapper .ts-team-content {
    top: 72%;
  }
}
@media (max-width: 575px) {
  .ts-team-wrapper .ts-team-content {
    text-align: center;
  }
}
.ts-team-wrapper .ts-name {
  font-size: 16px;
  margin-top: 0;
  margin-bottom: 3px;
  line-height: normal;
  color: #ffb600;
}
.ts-team-wrapper .ts-designation {
  color: #fff;
  font-size: 14px;
  margin-bottom: 15px;
  font-weight: 700;
}
.ts-team-wrapper .team-social-icons a i {
  text-align: center;
  transition: 400ms;
}
.ts-team-wrapper:hover .ts-team-content {
  top: 0;
  padding-top: 50px;
}

/* Team Classic */
.ts-team-content-classic {
	/* margin-top: 15px; */
	background: #000;
	padding: 13px 11px;
}
.ts-team-content-classic .ts-name {
	font-size: 16px;
	margin-bottom: 5px;
	color: #ffb600;
}
.ts-team-content-classic .ts-designation {
	color: #c69d37;
	margin-bottom: 5px;
	font-weight: 600;
}
.team-social-icons a {
  color: #fff;
	background: #ffb600;
	padding: 2px 20px;
	text-align: center;
	/* border: 1px solid #000; */
}
.team-social-icons a:hover {
	background: #ffffff;
  color: #ffb600;
	padding: 2px 20px;
	text-align: center;
	/* border: 1px solid #000; */
}

/*-- Pricing table  --*/
.ts-pricing-box {
  margin: 20px 0;
  padding: 0;
  text-align: center;
  background: #f9f9f9;
}
.ts-pricing-box .ts-pricing-header {
  background: #252525;
  color: #fff;
  position: relative;
  padding: 30px 20px;
}
.ts-pricing-box .ts-pricing-name {
  font-size: 18px;
  line-height: normal;
  margin: 0 0 5px 0;
  color: #fff;
}
.ts-pricing-box .ts-pricing-price {
  font-size: 44px;
  color: #fff;
  margin: 15px 0 0;
  display: inline-block;
}
.ts-pricing-box .ts-pricing-price > small {
  font-size: 16px;
  line-height: 16px;
  display: block;
  margin-top: 15px;
  color: #fff;
}
.ts-pricing-box .ts-pricing-features {
  padding: 15px 0;
}
.ts-pricing-box .ts-pricing-features ul {
  padding: 0 20px;
}
.ts-pricing-box .ts-pricing-features ul > li {
  padding: 20px 0;
  border-top: 1px dotted #e5e5e5;
}
.ts-pricing-box .ts-pricing-features ul > li:first-child {
  border-top: 0;
}
.ts-pricing-box .plan-action {
  padding-bottom: 40px;
}

/* Pricing featured */
.ts-pricing-box.ts-pricing-featured .ts-pricing-header {
  background: #ff9800;
}
.list-unstyled li{
  color: #000;
}

/* Contact Us
================================================== */
.map {
  height: 450px;
  z-index: 1;
}

.contact-info-box {
  margin-top: 20px;
}

.contact-info-box i {
  float: left;
  font-size: 24px;
  color: #ffb600;
}

.contact-info-box-content {
  padding-left: 40px;
}

.contact-info-box-content h4 {
  font-size: 16px;
  margin-top: 0;
  line-height: normal;
  font-weight: 700;
}

.contact-info-box-content p {
  margin-bottom: 0;
}

label {
  font-weight: 400;
}

/* Contact page 2 */
.ts-service-box.text-center .ts-service-icon.icon-squre i {
  float: none;
  margin-bottom: 20px;
}

.ts-service-box.text-center .ts-service-box-content {
  margin: 0;
}

/* News Listing
================================================== */
.post {
  border-bottom: 1px solid #dadada;
  padding: 0 0 30px;
  margin: 0 0 45px;
}

.post.last {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

.post-body {
  padding: 20px 0;
}

.entry-header .entry-title {
  font-size: 24px;
  margin: 5px 0 15px;
  position: relative;
  line-height: 34px;
  text-transform: capitalize;
}

.entry-header .entry-title a {
  color: #ffffff;
}

.entry-header .entry-title a:hover {
  color: #ffb600;
}

.post-single .entry-header .entry-title {
  font-size: 28px;
}

/* Meta */
.post-meta {
  padding-bottom: 10px;
}

.post-meta a {
  color: #ffffff;
}

.post-meta a:hover {
  color: #ffb600;
}

.post-meta span {
  margin-right: 10px;
  padding-right: 10px;
  border-right: 1px solid #dadada;
  line-height: 12px;
  display: inline-block;
}

.post-meta i {
  color: #bbb;
  margin-right: 3px;
}

.post-meta .post-comment {
  border-right: 0;
}

.post-meta .post-comment .comments-link {
  margin-left: 5px;
}

.post-footer .btn.btn-primary {
  font-size: 12px;
  margin-top: 10px;
}

/* Pagination */
.paging {
  margin-bottom: -5px;
}

.pagination li a {
	border-radius: 0 !important;
	margin-right: 8px;
	color: #ffb600;
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > li > a:hover {
  color: #fff;
  background: #ffb600;
  border: 1px solid transparent;
}
.page-link {
	background-color: #000;
	border: 1px solid #ffb600;
}

/* News Single
================================================== */
.tags-area {
  margin: 20px 0;
}

.post-tags a {
	border: 1px solid #ffb600;
	color: #ffb600;
	display: inline-block;
	font-size: 12px;
	padding: 3px 10px;
	margin-left: 3px;
}

.post-tags a:hover {
  background: #ffb600;
  color: #fff;
  border: 1px solid transparent;
}

/* Post social */
.post-social-icons > li {
  display: inline-block;
}

.post-social-icons a i {
  margin-left: 5px;
  font-size: 12px;
  width: 28px;
  height: 26px;
  line-height: 26px;
  color: #fff;
  text-align: center;
}

.post-social-icons a i.fa-facebook-f {
  background: #41578a;
}

.post-social-icons a i.fa-twitter {
  background: #64bae2;
}

.post-social-icons a i.fa-google-plus {
  background: #c0343d;
}

.post-social-icons a i.fa-linkedin {
  background: #3397b6;
}

/* Author box */
.author-box {
  border: 1px solid #dadada;
  padding: 20px 20px 15px;
  margin: 20px 0;
}

.author-img img {
  width: 110px;
  height: 110px;
  margin-right: 30px;
}

.author-info h3 {
  margin-top: 0;
  margin-bottom: 5px;
  font-size: 18px;
  font-weight: 600;
}

.author-info h3 span {
	font-size: 12px;
	color: #ffb600;
	border-left: 1px solid #AFAFAF;
	padding-left: 10px;
	margin-left: 10px;
	font-weight: 500;
}
.author-info a:hover{
  color: #ffb600;
}

/* Comments area */
.comments-area {
  margin: 40px 0;
}

.comments-list .comment-content {
  margin: 15px 0;
}

.comments-list .comment-reply {
  color: #ffffff;
  font-weight: 400;
}

.comments-list .comment-reply:hover {
  color: #ffb600;
}

.comments-counter {
  font-size: 18px;
}

.comments-counter a {
  color: #323232;
}

.comments-list {
  list-style: none;
  margin: 0;
  padding: 20px 0;
}

.comments-list .comment {
	border-bottom: 1px solid #000;
	padding-bottom: 20px;
	margin-bottom: 30px;
}

.comments-list .comment.last {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

.comments-list img.comment-avatar {
  width: 84px;
  height: 84px;
  margin-right: 30px;
}
@media (max-width: 575px) {
  .comments-list img.comment-avatar {
    width: 40px;
    height: 40px;
    margin-right: 25px;
  }
}

.comments-list .comment-author {
	margin-bottom: 0;
	margin-top: 0;
	font-weight: 600;
	font-size: 16px;
	color: #ffb600;
}

.comments-list .comment-date {
  color: #959595;
  margin-bottom: 5px;
  font-size: 12px;
}
@media (max-width: 575px) {
  .comments-list .comment-date {
    float: none !important;
    display: inline-block;
  }
}

.comments-reply {
  list-style: none;
  margin: 0 0 0 70px;
}
@media (max-width: 767px) {
  .comments-reply {
    margin: 0;
    padding: 0;
  }
}

.comments-form {
  margin-bottom: 0;
}

.comments-form .title-normal {
  margin-bottom: 20px;
}

.comments-form .btn.btn-primary {
  margin-top: 20px;
}

/* Sidebar
================================================== */
.sidebar .widget-title {
	font-size: 16px;
	font-weight: 700;
	position: relative;
	margin: 0 0 30px;
	padding-left: 15px;
	text-transform: uppercase;
	border-left: 3px solid #ffb600;
	color: #ffb600;
}
.border-title{
  color: #ffb600;
  border-left: 3px solid #ffb600;
  padding-left: 15px;
}

/* Widget common */
.sidebar .widget {
  margin-bottom: 40px;
}

.sidebar-left .widget {
  margin-right: 20px;
}

.sidebar-right .widget {
  margin-left: 20px;
}

.sidebar .widget.box {
  padding: 25px;
}

.widget.box.solid {
  background: #f2f2f2;
}

.widget.box.red {
  background: #ec483b;
  color: #fff;
}

.widget.box.red .widget-title {
  color: #fff;
}

.widget ul li {
  line-height: 30px;
}

.sidebar .widget ul li a {
  color: #303030;
}

.sidebar .widget ul li a:hover {
  color: #ffb600;
}

.sidebar .widget ul li i {
  margin-right: 5px;
}

.sidebar .btn {
  font-weight: 700;
  font-size: 12px;
  margin-top: 15px;
  padding: 10px 25px;
}

/* Sidebar nav */
.sidebar ul.nav-tabs {
  border: 0;
}

.sidebar ul.nav-tabs li {
  width: 100%;
}
.sidebar ul.nav-tabs li a {
	color: #fff;
	border-radius: 0;
	padding: 15px 0;
	padding-left: 0;
	font-weight: 400;
	border-bottom: 1px solid #000;
	display: block;
	transition: 400ms;
}

.sidebar ul.nav-tabs li.active a,
.sidebar ul.nav-tabs li:hover a {
  color: #ffb600;
}

.sidebar ul.nav-tabs li {
  color: #303030;
  line-height: normal;
}

.sidebar ul.nav-tabs li:last-child a {
  border-bottom: 0;
}

/* Service menu */
.sidebar ul.service-menu li {
  width: 100%;
}
.sidebar ul.service-menu li a {
  background-color: #f4f4f4;
  padding: 15px 20px;
  border: 0;
  margin-bottom: 8px;
  position: relative;
  transition: 400ms;
  display: block;
}
.sidebar ul.service-menu li.active a, .sidebar ul.service-menu li:hover a {
  background: #ffb600;
  color: #fff;
  cursor: pointer;
}

/* Recent News */
.widget.recent-posts .widget-title {
  margin-bottom: 35px;
}

.widget.recent-posts ul li {
  border-bottom: 1px solid #000000;
  padding-bottom: 15px;
  margin-bottom: 17px;
}
.widget.recent-posts ul li:last-child {
  border: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}
.widget.recent-posts .posts-thumb img {
  margin-right: 15px;
  width: 90px;
  height: 70px;
}
.widget.recent-posts .post-info .entry-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  margin: 0;
}
.widget.recent-posts .post-info .entry-title a {
	color: #fff;
	display: inline-block;
}
.widget.recent-posts .post-info .entry-title a:hover {
	color: #ffb600;
}
.widget.recent-posts .post-date {
  font-weight: 400;
  color: #999;
  text-transform: capitalize;
}

/* Widget tags */
.widget-tags ul > li {
  float: left;
  margin: 3px;
}

.sidebar .widget-tags ul > li a {
	border: 1px solid #ffb600;
	color: #ffb600;
	display: block;
	font-size: 14px;
	padding: 3px 15px;
	transition: all 0.3s ease 0s;
}

.sidebar .widget-tags ul > li a:hover {
  background: #ffb600;
  color: #fff;
  border: 1px solid transparent;
}

/* Error page
================================================== */
.error-page .error-code h2 {
	display: block;
	font-size: 200px;
	line-height: 200px;
	color: #f00;
	margin-bottom: 20px;
}

.error-page .error-body .btn {
  margin-top: 30px;
  font-weight: 700;
}

/* modal
================================================== */

.wrap-modal1 {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 9000;
  overflow: auto;

  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;

  visibility: hidden;
  opacity: 0;
}

.overlay-modal1 {
  position: fixed;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.8;
}

.show-modal1 {
  visibility: visible;
  opacity: 1;
}

.how-pos3-parent {
  position: relative;
}

.how-pos3 {
  position: absolute;
  top: 0px;
  right: 0px;
  color: #fff;
  background: transparent;
  border: transparent;
  font-size: 44px;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.how-pos3:hover {
  color: #ffb600;
}

.p-t-60 {
  padding-top: 60px;
}

.p-b-30 {
  padding-bottom: 30px;
}

.form-label {
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
}

.form-check-label {
  color: #ffff;
}

.form_icons a {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-size: 30px;
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  margin: 5px;
  margin-top: 20px;
}

.form_icons .icon_tit {
  color: #fff;
  padding-top: 20px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 600;
}

.modal_btn {
  background: #ffb600;
  border: none;
  padding: 10px 20px;
  color: #fff;
  text-transform: uppercase;
  margin: 0 auto;
  display: block;
  border-radius: 10px;
}

.modal_btn:hover {
  background: #fff;
  color: #ffb600;
}

.form-control {
  font-weight: 800;
  color: #ffffff;
  background-color: rgba(255, 183, 0, 0.541);
  border: #fff;
}

.form-check-input:checked {
  background-color: #ffb600;
  border-color: #ffb600;
}

.tit_form h3 {
  color: #ffb600;
  text-align: center;
  padding: 30px;
  text-transform: uppercase;
  font-size: 30px;
  font-weight: 600;
  margin-right: 10px;
}

.form_text {
  color: #fff;
}
.red-text {
color: red;
}

.top-games-section {
  background: linear-gradient(180deg, #2b0a37 0%, #1b0624 100%);
}

.top-games-section .section-kicker {
  display: inline-block;
  margin-bottom: 12px;
  color: #c9a24d;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.top-games-section .games-title {
  color: #ffffff !important;
  font-size: 2.4rem !important;
  line-height: 1.2;
  margin-bottom: 15px;
  text-transform: none;
  letter-spacing: 0;
}

.top-games-section .games-intro {
  max-width: 720px;
  margin: 0 auto;
  color: rgba(255,255,255,0.78);
  font-size: 16px;
  line-height: 1.7;
}

.top-games-section .game-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #120617;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 14px 34px rgba(0,0,0,0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.top-games-section .game-card img {
  display: block;
  width: 100%;
  transition: transform 0.35s ease, filter 0.35s ease;
}

.top-games-section .game-card:hover {
  transform: translateY(-6px);
  border-color: rgba(201,162,77,0.45);
  box-shadow: 0 18px 42px rgba(0,0,0,0.5);
}

.top-games-section .game-card:hover img {
  transform: scale(1.06);
  filter: brightness(0.72);
}

.top-games-section .hover-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(8,3,12,0.35);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.top-games-section .game-card:hover .hover-overlay {
  opacity: 1;
}

.top-games-section .btn-primary {
  background: #c9a24d;
  border: 0;
  color: #111;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: none;
}

.top-games-section .btn-primary:hover {
  background: #ffffff;
  color: #111;
}

.rewards-highlight {
  padding: 90px 0;
  background:
    radial-gradient(circle at 15% 10%, rgba(201,162,77,0.22), transparent 32%),
    radial-gradient(circle at 85% 90%, rgba(120,37,142,0.28), transparent 35%),
    linear-gradient(180deg, #1b0624 0%, #2b0a37 100%);
}

.rewards-card {
  position: relative;
  overflow: hidden;
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 48px;
  border-radius: 32px;
  background: rgba(18, 6, 23, 0.92);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 28px 80px rgba(0,0,0,0.5);
}

.rewards-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(201,162,77,0.28), transparent 28%),
    linear-gradient(315deg, rgba(255,255,255,0.08), transparent 30%);
  pointer-events: none;
}

.rewards-content {
  position: relative;
  z-index: 1;
}

.rewards-icon {
  width: 74px;
  height: 74px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #111;
  background: linear-gradient(135deg, #f2d27a, #c9a24d);
  font-size: 28px;
  box-shadow: 0 12px 30px rgba(201,162,77,0.35);
}

.rewards-content .section-kicker {
  display: inline-block;
  margin-bottom: 14px;
  color: #c9a24d;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.rewards-content h2 {
  max-width: 820px;
  margin: 0 auto 22px;
  color: #ffffff;
  font-size: 40px;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0;
}

.bonus-badge {
  display: inline-block;
  max-width: 850px;
  margin: 0 auto 24px;
  padding: 16px 26px;
  border-radius: 999px;
  background: rgba(201,162,77,0.16);
  border: 1px solid rgba(201,162,77,0.45);
  color: #f2d27a;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
}

.rewards-content p {
  max-width: 760px;
  margin: 0 auto 34px;
  color: rgba(255,255,255,0.78);
  font-size: 16px;
  line-height: 1.7;
}

.rewards-features,
.registration-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 0 auto 28px;
}

.rewards-features div,
.registration-step {
  padding: 24px 18px;
  border-radius: 20px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.09);
}

.rewards-features i {
  display: block;
  margin-bottom: 12px;
  color: #c9a24d;
  font-size: 24px;
}

.rewards-features strong,
.registration-step h3 {
  display: block;
  color: #ffffff;
  font-size: 16px;
  margin-bottom: 8px;
  text-transform: none;
}

.rewards-features span,
.registration-step p {
  display: block;
  color: rgba(255,255,255,0.68);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

.registration-step span {
  display: inline-flex;
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #c9a24d;
  color: #111;
  font-weight: 800;
}

.rewards-btn {
  margin-top: 10px;
  border-radius: 999px;
  padding: 14px 34px;
  background: #c9a24d;
  color: #111;
  border: 0;
  font-weight: 800;
  text-transform: uppercase;
}

.rewards-btn:hover {
  background: #ffffff;
  color: #111;
}

@media (max-width: 767px) {
  .rewards-card {
    padding: 42px 24px;
  }

  .rewards-content h2 {
    font-size: 28px;
  }

  .bonus-badge {
    border-radius: 18px;
    font-size: 16px;
  }

  .rewards-features,
  .registration-steps {
    grid-template-columns: 1fr;
  }
}

.live-games-section {
  background: linear-gradient(180deg, #1b0624 0%, #2b0a37 100%);
}

.live-games-section .section-kicker {
  display: inline-block;
  margin-bottom: 12px;
  color: #c9a24d;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.live-games-section .live-games-title {
  color: #ffffff !important;
  font-size: 2.4rem !important;
  line-height: 1.2;
  margin-bottom: 15px;
  text-transform: none;
  letter-spacing: 0;
}

.live-games-section .live-games-intro {
  max-width: 740px;
  margin: 0 auto;
  color: rgba(255,255,255,0.78);
  font-size: 16px;
  line-height: 1.7;
}

.live-games-section .live-game-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #120617;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 14px 34px rgba(0,0,0,0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.live-games-section .live-game-card img {
  display: block;
  width: 100%;
  transition: transform 0.35s ease, filter 0.35s ease;
}

.live-games-section .live-game-card:hover {
  transform: translateY(-6px);
  border-color: rgba(201,162,77,0.45);
  box-shadow: 0 18px 42px rgba(0,0,0,0.5);
}

.live-games-section .live-game-card:hover img {
  transform: scale(1.06);
  filter: brightness(0.72);
}

.live-games-section .live-hover-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(8,3,12,0.35);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.live-games-section .live-game-card:hover .live-hover-overlay {
  opacity: 1;
}

.live-games-section .btn-primary {
  background: #c9a24d;
  border: 0;
  color: #111;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: none;
}

.live-games-section .btn-primary:hover {
  background: #ffffff;
  color: #111;
}

.bonus-buys-section {
  background: linear-gradient(180deg, #2b0a37 0%, #1b0624 100%);
}

.bonus-buys-section .section-kicker {
  display: inline-block;
  margin-bottom: 12px;
  color: #c9a24d;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.bonus-buys-section .bonus-buys-title {
  color: #ffffff !important;
  font-size: 2.4rem !important;
  line-height: 1.2;
  margin-bottom: 15px;
  text-transform: none;
  letter-spacing: 0;
}

.bonus-buys-section .bonus-buys-intro {
  max-width: 740px;
  margin: 0 auto;
  color: rgba(255,255,255,0.78);
  font-size: 16px;
  line-height: 1.7;
}

.bonus-buys-section .bonus-game-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #120617;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 14px 34px rgba(0,0,0,0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.bonus-buys-section .bonus-game-card img {
  display: block;
  width: 100%;
  transition: transform 0.35s ease, filter 0.35s ease;
}

.bonus-buys-section .bonus-game-card:hover {
  transform: translateY(-6px);
  border-color: rgba(201,162,77,0.45);
  box-shadow: 0 18px 42px rgba(0,0,0,0.5);
}

.bonus-buys-section .bonus-game-card:hover img {
  transform: scale(1.06);
  filter: brightness(0.72);
}

.bonus-buys-section .bonus-hover-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(8,3,12,0.35);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.bonus-buys-section .bonus-game-card:hover .bonus-hover-overlay {
  opacity: 1;
}

.bonus-buys-section .btn-primary {
  background: #c9a24d;
  border: 0;
  color: #111;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: none;
}

.bonus-buys-section .btn-primary:hover {
  background: #ffffff;
  color: #111;
}

.table-games-section {
  background: linear-gradient(180deg, #1b0624 0%, #2b0a37 100%);
}

.table-games-section .section-kicker {
  display: inline-block;
  margin-bottom: 12px;
  color: #c9a24d;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.table-games-section .table-games-title {
  color: #ffffff !important;
  font-size: 2.4rem !important;
  line-height: 1.2;
  margin-bottom: 15px;
  text-transform: none;
  letter-spacing: 0;
}

.table-games-section .table-games-intro {
  max-width: 740px;
  margin: 0 auto;
  color: rgba(255,255,255,0.78);
  font-size: 16px;
  line-height: 1.7;
}

.table-games-section .table-game-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #120617;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 14px 34px rgba(0,0,0,0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.table-games-section .table-game-card img {
  display: block;
  width: 100%;
  transition: transform 0.35s ease, filter 0.35s ease;
}

.table-games-section .table-game-card:hover {
  transform: translateY(-6px);
  border-color: rgba(201,162,77,0.45);
  box-shadow: 0 18px 42px rgba(0,0,0,0.5);
}

.table-games-section .table-game-card:hover img {
  transform: scale(1.06);
  filter: brightness(0.72);
}

.table-games-section .table-hover-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(8,3,12,0.35);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.table-games-section .table-game-card:hover .table-hover-overlay {
  opacity: 1;
}

.table-games-section .btn-primary {
  background: #c9a24d;
  border: 0;
  color: #111;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: none;
}

.table-games-section .btn-primary:hover {
  background: #ffffff;
  color: #111;
}

.about-casino-section {
  position: relative;
  overflow: hidden;
  padding: 95px 0;
  background:
    radial-gradient(circle at 12% 15%, rgba(201,162,77,0.18), transparent 32%),
    radial-gradient(circle at 85% 80%, rgba(120,37,142,0.24), transparent 36%),
    linear-gradient(180deg, #1b0624 0%, #2b0a37 100%);
}

.about-casino-section::before {
  content: "";
  position: absolute;
  top: 60px;
  right: -120px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 1px solid rgba(201,162,77,0.18);
}

.about-casino-section::after {
  content: "";
  position: absolute;
  left: -90px;
  bottom: 80px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(201,162,77,0.06);
}

.about-casino-content,
.about-highlight-card,
.about-info-strip {
  position: relative;
  z-index: 1;
}

.about-casino-section .section-kicker {
  display: inline-block;
  margin-bottom: 14px;
  color: #c9a24d;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.about-casino-content h2 {
  max-width: 620px;
  margin: 0 0 22px;
  color: #ffffff;
  font-size: 42px;
  line-height: 1.18;
  text-transform: none;
  letter-spacing: 0;
}

.about-casino-content p {
  color: rgba(255,255,255,0.76);
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 18px;
}

.about-casino-content .about-lead {
  color: rgba(255,255,255,0.9);
  font-size: 18px;
}

.about-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 32px;
}

.about-badges span {
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(201,162,77,0.28);
  color: #f2d27a;
  font-size: 13px;
  font-weight: 700;
}

.about-btn {
  border-radius: 999px;
  padding: 14px 34px;
  background: #c9a24d;
  color: #111;
  border: 0;
  font-weight: 800;
  text-transform: uppercase;
}

.about-btn:hover {
  background: #ffffff;
  color: #111;
}

.about-highlight-card {
  padding: 34px;
  border-radius: 30px;
  background: rgba(18,6,23,0.9);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 28px 80px rgba(0,0,0,0.45);
}

.highlight-top {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 26px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.highlight-icon {
  width: 62px;
  height: 62px;
  min-width: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: linear-gradient(135deg, #f2d27a, #c9a24d);
  color: #111;
  font-size: 24px;
}

.highlight-top span {
  display: block;
  margin-bottom: 4px;
  color: rgba(255,255,255,0.62);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.highlight-top h3 {
  margin: 0;
  color: #ffffff;
  font-size: 22px;
  text-transform: none;
  letter-spacing: 0;
}

.about-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.about-feature-card {
  padding: 24px 20px;
  border-radius: 20px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.about-feature-card:hover {
  transform: translateY(-5px);
  background: rgba(255,255,255,0.075);
  border-color: rgba(201,162,77,0.42);
}

.about-feature-card i {
  display: block;
  margin-bottom: 16px;
  color: #c9a24d;
  font-size: 26px;
}

.about-feature-card h4 {
  margin-bottom: 10px;
  color: #ffffff;
  font-size: 17px;
  text-transform: none;
  letter-spacing: 0;
}

.about-feature-card p {
  margin: 0;
  color: rgba(255,255,255,0.68);
  font-size: 14px;
  line-height: 1.6;
}

.about-info-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 38px;
}

.about-info-strip div {
  padding: 24px 20px;
  border-radius: 20px;
  background: rgba(18,6,23,0.72);
  border: 1px solid rgba(255,255,255,0.08);
}

.about-info-strip strong {
  display: block;
  margin-bottom: 8px;
  color: #ffffff;
  font-size: 16px;
}

.about-info-strip span {
  display: block;
  color: rgba(255,255,255,0.66);
  font-size: 14px;
  line-height: 1.6;
}

@media (max-width: 991px) {
  .about-casino-content h2 {
    font-size: 34px;
  }

  .about-info-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .about-casino-section {
    padding: 70px 0;
  }

  .about-highlight-card {
    padding: 26px 20px;
  }

  .about-feature-grid,
  .about-info-strip {
    grid-template-columns: 1fr;
  }

  .highlight-top {
    align-items: flex-start;
  }

  .about-casino-content h2 {
    font-size: 29px;
  }
}

.advantages-section {
  position: relative;
  overflow: hidden;
  padding: 95px 0;
  background:
    radial-gradient(circle at 8% 20%, rgba(201,162,77,0.2), transparent 30%),
    radial-gradient(circle at 90% 75%, rgba(120,37,142,0.26), transparent 34%),
    linear-gradient(180deg, #2b0a37 0%, #1b0624 100%);
}

.advantages-section::before {
  content: "";
  position: absolute;
  top: 80px;
  left: -120px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 1px solid rgba(201,162,77,0.18);
}

.advantages-section::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: 90px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(201,162,77,0.06);
}

.advantages-section .section-kicker {
  display: inline-block;
  margin-bottom: 12px;
  color: #c9a24d;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.advantages-title {
  color: #ffffff !important;
  font-size: 2.5rem !important;
  line-height: 1.2;
  margin-bottom: 15px;
  text-transform: none;
  letter-spacing: 0;
}

.advantages-intro {
  max-width: 820px;
  margin: 0 auto;
  color: rgba(255,255,255,0.78);
  font-size: 16px;
  line-height: 1.7;
}

.advantages-wrapper {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 1.4fr;
  gap: 28px;
  align-items: stretch;
}

.advantages-main-card {
  position: relative;
  overflow: hidden;
  padding: 38px 34px;
  border-radius: 30px;
  background: rgba(18,6,23,0.92);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 26px 70px rgba(0,0,0,0.45);
}

.advantages-main-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(201,162,77,0.2), transparent 36%);
  pointer-events: none;
}

.advantages-badge {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-bottom: 18px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(201,162,77,0.16);
  border: 1px solid rgba(201,162,77,0.42);
  color: #f2d27a;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.advantages-main-card h3 {
  position: relative;
  z-index: 1;
  margin-bottom: 18px;
  color: #ffffff;
  font-size: 28px;
  line-height: 1.25;
  text-transform: none;
  letter-spacing: 0;
}

.advantages-main-card p {
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,0.76);
  font-size: 15px;
  line-height: 1.75;
  margin-bottom: 24px;
}

.advantages-list {
  position: relative;
  z-index: 1;
  list-style: none;
  padding: 0;
  margin: 0;
}

.advantages-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
  color: rgba(255,255,255,0.86);
  font-size: 14px;
  line-height: 1.55;
}

.advantages-list i {
  margin-top: 4px;
  color: #c9a24d;
}

.advantages-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.advantage-card {
  padding: 28px 24px;
  border-radius: 24px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: 0 16px 42px rgba(0,0,0,0.28);
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.advantage-card:hover {
  transform: translateY(-6px);
  background: rgba(255,255,255,0.075);
  border-color: rgba(201,162,77,0.42);
}

.advantage-icon {
  width: 58px;
  height: 58px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: linear-gradient(135deg, #f2d27a, #c9a24d);
  color: #111;
  font-size: 23px;
}

.advantage-card h3 {
  color: #ffffff;
  font-size: 18px;
  line-height: 1.35;
  margin-bottom: 12px;
  text-transform: none;
  letter-spacing: 0;
}

.advantage-card p {
  margin: 0;
  color: rgba(255,255,255,0.68);
  font-size: 14px;
  line-height: 1.65;
}

.advantages-cta {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  margin-top: 34px;
  padding: 28px 32px;
  border-radius: 24px;
  background: rgba(18,6,23,0.78);
  border: 1px solid rgba(201,162,77,0.22);
}

.advantages-cta span {
  display: block;
  margin-bottom: 6px;
  color: #c9a24d;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.advantages-cta h3 {
  margin: 0;
  color: #ffffff;
  font-size: 22px;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
}

.advantages-btn {
  white-space: nowrap;
  border-radius: 999px;
  padding: 14px 34px;
  background: #c9a24d;
  color: #111;
  border: 0;
  font-weight: 800;
  text-transform: uppercase;
}

.advantages-btn:hover {
  background: #ffffff;
  color: #111;
}

@media (max-width: 991px) {
  .advantages-wrapper {
    grid-template-columns: 1fr;
  }

  .advantages-title {
    font-size: 2rem !important;
  }

  .advantages-cta {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 575px) {
  .advantages-section {
    padding: 70px 0;
  }

  .advantages-grid {
    grid-template-columns: 1fr;
  }

  .advantages-main-card {
    padding: 30px 24px;
  }

  .advantages-main-card h3 {
    font-size: 24px;
  }

  .advantages-cta {
    padding: 26px 22px;
  }
}

.loyalty-section {
  position: relative;
  padding: 95px 0;
  background:
    radial-gradient(circle at 10% 20%, rgba(201,162,77,0.18), transparent 30%),
    radial-gradient(circle at 90% 80%, rgba(120,37,142,0.24), transparent 35%),
    linear-gradient(180deg, #1b0624 0%, #2b0a37 100%);
}

.loyalty-section .section-kicker {
  color: #c9a24d;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
}

.loyalty-title {
  color: #fff;
  font-size: 2.5rem;
}

.loyalty-intro {
  max-width: 780px;
  margin: 0 auto;
  color: rgba(255,255,255,0.78);
}

.loyalty-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}

.loyalty-card {
  padding: 34px;
  border-radius: 26px;
  background: rgba(18,6,23,0.9);
  border: 1px solid rgba(255,255,255,0.08);
}

.loyalty-card.highlight {
  border-color: rgba(201,162,77,0.4);
}

.loyalty-badge {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 12px;
}

.loyalty-badge.gold {
  background: rgba(201,162,77,0.2);
  color: #f2d27a;
}

.loyalty-card h3 {
  color: #fff;
  margin-bottom: 16px;
}

.loyalty-card p {
  color: rgba(255,255,255,0.75);
}

.loyalty-list {
  list-style: none;
  padding: 0;
}

.loyalty-list li {
  margin-bottom: 10px;
  color: rgba(255,255,255,0.85);
}

.loyalty-list i {
  color: #c9a24d;
  margin-right: 8px;
}

.promo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.promo-item {
  padding: 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.05);
}

.promo-item strong {
  display: block;
  color: #fff;
}

.promo-item span {
  color: rgba(255,255,255,0.7);
  font-size: 13px;
}

.vip-block {
  margin-top: 40px;
  padding: 28px;
  border-radius: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(18,6,23,0.75);
  border: 1px solid rgba(201,162,77,0.25);
}

.vip-content span {
  color: #c9a24d;
  font-size: 12px;
  text-transform: uppercase;
}

.vip-content h3 {
  color: #fff;
}

.vip-content p {
  color: rgba(255,255,255,0.75);
}

.vip-content ul {
  margin-top: 12px;
  padding-left: 18px;
  color: rgba(255,255,255,0.75);
}

.loyalty-btn {
  border-radius: 999px;
  padding: 14px 30px;
  background: #c9a24d;
  color: #111;
  font-weight: 700;
}

.loyalty-btn:hover {
  background: #fff;
}

@media (max-width: 991px) {
  .loyalty-wrapper {
    grid-template-columns: 1fr;
  }

  .vip-block {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
}

.loyalty-extra {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.loyalty-extra div {
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}

.loyalty-extra strong {
  display: block;
  color: #ffffff;
  font-size: 14px;
  margin-bottom: 4px;
}

.loyalty-extra span {
  color: rgba(255,255,255,0.65);
  font-size: 13px;
}

.parallax-cta-section {
  --banner-overlay: 0.18;

  position: relative;
  height: 420px; 
  display: flex;
  align-items: center;
  overflow: hidden;

  background-image: url("../images/slider-main/bg2.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.parallax-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(8,3,12,0.92) 0%,
      rgba(8,3,12,0.72) 42%,
      rgba(8,3,12,var(--banner-overlay)) 100%
    );
  z-index: 1;
}

.parallax-cta-section .container {
  position: relative;
  z-index: 2;
}

.parallax-cta-content {
  max-width: 620px;
  padding: 0; 
}

.parallax-cta-content .section-kicker {
  display: inline-block;
  margin-bottom: 12px;
  color: #c9a24d;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.parallax-cta-content h2 {
  margin: 0 0 18px;
  color: #ffffff;
  font-size: 40px; 
  line-height: 1.15;
}

.parallax-cta-content p {
  max-width: 520px;
  margin-bottom: 20px;
  color: rgba(255,255,255,0.8);
  font-size: 16px;
  line-height: 1.7;
}

.parallax-cta-bonus {
  display: inline-block;
  margin-bottom: 22px;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(201,162,77,0.16);
  border: 1px solid rgba(201,162,77,0.45);
  color: #f2d27a;
  font-size: 14px;
  font-weight: 800;
}

.parallax-cta-btn {
  display: inline-flex;
  border-radius: 999px;
  padding: 13px 30px;
  background: #c9a24d;
  color: #111;
  border: 0;
  font-weight: 800;
  text-transform: uppercase;
}

.parallax-cta-btn:hover {
  background: #ffffff;
  color: #111;
}

/* TABLET */
@media (max-width: 991px) {
  .parallax-cta-section {
    height: auto; 
    padding: 60px 0;
    background-attachment: scroll;
  }

  .parallax-cta-content {
    padding: 0;
  }

  .parallax-cta-content h2 {
    font-size: 34px;
  }
}

/* MOBILE */
@media (max-width: 575px) {
  .parallax-cta-section {
    padding: 50px 0;
  }

  .parallax-cta-content h2 {
    font-size: 28px;
  }

  .parallax-cta-bonus {
    border-radius: 18px;
  }
}

.parallax-games-section {
  --banner-overlay: 0.25;

  position: relative;
  height: 420px;
  display: flex;
  align-items: center;
  overflow: hidden;

  background-image: url("../images/slider-main/bg3.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.parallax-games-section .parallax-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg, 
      rgba(8,3,12,0.92) 0%,
      rgba(8,3,12,0.72) 45%,
      rgba(8,3,12,var(--banner-overlay)) 100%
    );
  z-index: 1;
}

.parallax-games-section .container {
  position: relative;
  z-index: 2;
}

.parallax-games-content {
  max-width: 600px;
  margin-left: 0; 
  text-align: left;
}

.parallax-games-content .section-kicker {
  display: inline-block;
  margin-bottom: 12px;
  color: #c9a24d;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.parallax-games-content h2 {
  margin-bottom: 18px;
  color: #ffffff;
  font-size: 40px;
  line-height: 1.15;
}

.parallax-games-content p {
  margin-bottom: 20px;
  color: rgba(255,255,255,0.8);
  font-size: 16px;
  line-height: 1.7;
}

.games-features {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.games-features span {
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(201,162,77,0.35);
  color: #f2d27a;
  font-size: 13px;
  font-weight: 700;
}

.games-cta-btn {
  display: inline-flex;
  border-radius: 999px;
  padding: 13px 30px;
  background: #c9a24d;
  color: #111;
  font-weight: 800;
  text-transform: uppercase;
}

.games-cta-btn:hover {
  background: #ffffff;
  color: #111;
}

/* TABLET */
@media (max-width: 991px) {
  .parallax-games-section {
    height: auto;
    padding: 60px 0;
    background-attachment: scroll;
  }

  .parallax-games-content h2 {
    font-size: 34px;
  }
}

/* MOBILE */
@media (max-width: 575px) {
  .parallax-games-section {
    padding: 50px 0;
  }

  .parallax-games-content h2 {
    font-size: 28px;
  }
}

.parallax-final-section {
  --banner-overlay: 0.1;

  position: relative;
  height: 420px;
  display: flex;
  align-items: center;
  overflow: hidden;

  background-image: url("../images/slider-main/bg4.jpg"); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.parallax-final-section .parallax-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(8,3,12,0.92) 0%,
      rgba(8,3,12,0.72) 45%,
      rgba(8,3,12,var(--banner-overlay)) 100%
    );
  z-index: 1;
}

.parallax-final-section .container {
  position: relative;
  z-index: 2;
}

.parallax-final-content {
  max-width: 600px;
  margin-left: 0;
  text-align: left;
}

.parallax-final-content .section-kicker {
  display: inline-block;
  margin-bottom: 12px;
  color: #c9a24d;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.parallax-final-content h2 {
  margin-bottom: 18px;
  color: #ffffff;
  font-size: 40px;
  line-height: 1.15;
  text-transform: none;
  letter-spacing: 0;
}

.parallax-final-content p {
  margin-bottom: 20px;
  color: rgba(255,255,255,0.8);
  font-size: 16px;
  line-height: 1.7;
}

.final-features {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.final-features span {
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(201,162,77,0.35);
  color: #f2d27a;
  font-size: 13px;
  font-weight: 700;
}

.final-cta-btn {
  display: inline-flex;
  border-radius: 999px;
  padding: 13px 30px;
  background: #c9a24d;
  color: #111;
  font-weight: 800;
  text-transform: uppercase;
}

.final-cta-btn:hover {
  background: #ffffff;
  color: #111;
}

@media (max-width: 991px) {
  .parallax-final-section {
    height: auto;
    padding: 60px 0;
    background-attachment: scroll;
  }

  .parallax-final-content h2 {
    font-size: 34px;
  }
}

@media (max-width: 575px) {
  .parallax-final-section {
    padding: 50px 0;
  }

  .parallax-final-content h2 {
    font-size: 28px;
  }
}

.gaming-section {
  position: relative;
  overflow: hidden;
  padding: 95px 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(201,162,77,0.18), transparent 30%),
    radial-gradient(circle at 88% 78%, rgba(120,37,142,0.25), transparent 36%),
    linear-gradient(180deg, #1b0624 0%, #2b0a37 100%);
}

.gaming-section::before {
  content: "";
  position: absolute;
  top: 90px;
  left: -120px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 1px solid rgba(201,162,77,0.18);
}

.gaming-section::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: 110px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(201,162,77,0.06);
}

.gaming-section .section-kicker {
  display: inline-block;
  margin-bottom: 12px;
  color: #c9a24d;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.gaming-title {
  color: #ffffff !important;
  font-size: 2.5rem !important;
  line-height: 1.2;
  margin-bottom: 15px;
  text-transform: none;
  letter-spacing: 0;
}

.gaming-intro {
  max-width: 900px;
  margin: 0 auto;
  color: rgba(255,255,255,0.78);
  font-size: 16px;
  line-height: 1.75;
}

.gaming-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.95fr 1.35fr;
  gap: 28px;
}

.gaming-card {
  position: relative;
  overflow: hidden;
  padding: 34px;
  border-radius: 30px;
  background: rgba(18,6,23,0.92);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 26px 70px rgba(0,0,0,0.42);
}

.gaming-card-featured {
  border-color: rgba(201,162,77,0.28);
}

.gaming-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(201,162,77,0.16), transparent 34%);
  pointer-events: none;
}

.gaming-card > * {
  position: relative;
  z-index: 1;
}

.gaming-card-label {
  display: inline-block;
  margin-bottom: 16px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.gaming-card-label.gold {
  background: rgba(201,162,77,0.16);
  border-color: rgba(201,162,77,0.42);
  color: #f2d27a;
}

.gaming-card h3 {
  margin-bottom: 16px;
  color: #ffffff;
  font-size: 28px;
  line-height: 1.25;
  text-transform: none;
  letter-spacing: 0;
}

.gaming-card p {
  color: rgba(255,255,255,0.74);
  font-size: 15px;
  line-height: 1.75;
  margin-bottom: 18px;
}

.gaming-extra-text {
  color: rgba(255,255,255,0.68);
  font-size: 14.5px;
  line-height: 1.72;
  margin-bottom: 16px;
}

.gaming-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 24px 0;
}

.gaming-stats div {
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.08);
}

.gaming-stats strong {
  display: block;
  margin-bottom: 4px;
  color: #f2d27a;
  font-size: 24px;
  line-height: 1.1;
}

.gaming-stats span {
  display: block;
  color: rgba(255,255,255,0.72);
  font-size: 14px;
}

.gaming-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.gaming-tags span {
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(201,162,77,0.28);
  color: rgba(255,255,255,0.84);
  font-size: 13px;
  font-weight: 700;
}

.gaming-note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 22px;
  padding: 18px 18px;
  border-radius: 18px;
  background: rgba(201,162,77,0.08);
  border: 1px solid rgba(201,162,77,0.22);
}

.gaming-note i {
  margin-top: 4px;
  color: #c9a24d;
  font-size: 18px;
}

.gaming-note p {
  margin: 0;
  color: rgba(255,255,255,0.72);
  font-size: 14px;
  line-height: 1.65;
}

.gaming-category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 24px;
}

.gaming-category-grid > div {
  padding: 22px 20px;
  border-radius: 22px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.gaming-category-grid > div:hover {
  transform: translateY(-5px);
  background: rgba(255,255,255,0.075);
  border-color: rgba(201,162,77,0.42);
}

.gaming-category-grid i {
  display: block;
  margin-bottom: 14px;
  color: #c9a24d;
  font-size: 24px;
}

.gaming-category-grid h4 {
  margin-bottom: 12px;
  color: #ffffff;
  font-size: 17px;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
}

.gaming-category-grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.gaming-category-grid li {
  position: relative;
  padding-left: 15px;
  margin-bottom: 8px;
  color: rgba(255,255,255,0.68);
  font-size: 13px;
  line-height: 1.45;
}

.gaming-category-grid li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c9a24d;
}

.gaming-conversion {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  margin-top: 34px;
  padding: 30px 34px;
  border-radius: 26px;
  background: rgba(18,6,23,0.78);
  border: 1px solid rgba(201,162,77,0.24);
  box-shadow: 0 18px 45px rgba(0,0,0,0.28);
}

.gaming-conversion span {
  display: block;
  margin-bottom: 8px;
  color: #c9a24d;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.gaming-conversion h3 {
  margin: 0 0 10px;
  color: #ffffff;
  font-size: 22px;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
}

.gaming-conversion p {
  max-width: 780px;
  margin: 0;
  color: rgba(255,255,255,0.68);
  font-size: 14.5px;
  line-height: 1.65;
}

.gaming-btn {
  white-space: nowrap;
  border-radius: 999px;
  padding: 14px 34px;
  background: #c9a24d;
  color: #111;
  border: 0;
  font-weight: 800;
  text-transform: uppercase;
}

.gaming-btn:hover {
  background: #ffffff;
  color: #111;
}

@media (max-width: 991px) {
  .gaming-layout {
    grid-template-columns: 1fr;
  }

  .gaming-title {
    font-size: 2rem !important;
  }

  .gaming-conversion {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 575px) {
  .gaming-section {
    padding: 70px 0;
  }

  .gaming-card {
    padding: 28px 22px;
  }

  .gaming-card h3 {
    font-size: 24px;
  }

  .gaming-category-grid {
    grid-template-columns: 1fr;
  }

  .gaming-conversion {
    padding: 26px 22px;
  }

  .gaming-btn {
    width: 100%;
    justify-content: center;
  }
}

.table-live-section {
  padding: 100px 0;
  background: linear-gradient(180deg, #2b0a37 0%, #1b0624 100%);
}

.tl-title {
  color: #fff;
  font-size: 2.4rem;
}

.tl-intro {
  max-width: 800px;
  margin: 0 auto;
  color: rgba(255,255,255,0.75);
}

.tl-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.tl-card {
  background: rgba(18,6,23,0.9);
  border-radius: 26px;
  padding: 30px;
  border: 1px solid rgba(255,255,255,0.08);
}

.tl-badge {
  display: inline-block;
  margin-bottom: 12px;
  color: #c9a24d;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
}

.tl-badge.gold {
  color: #f2d27a;
}

.tl-card h3 {
  color: #fff;
  margin-bottom: 15px;
}

.tl-card p {
  color: rgba(255,255,255,0.7);
  font-size: 14.5px;
  line-height: 1.7;
}

.tl-game {
  margin-top: 18px;
}

.tl-game h4 {
  color: #fff;
  font-size: 16px;
}

.tl-live-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 20px;
}

.tl-live-grid div {
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.05);
}

.tl-note {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}

.tl-note i {
  color: #c9a24d;
}

.tl-cta {
  margin-top: 40px;
  text-align: center;
}

.tl-cta h3 {
  color: #fff;
  margin-bottom: 20px;
}

.tl-cta .btn {
  background: #c9a24d;
  border: none;
  padding: 12px 30px;
  border-radius: 999px;
}

@media (max-width: 991px) {
  .tl-layout {
    grid-template-columns: 1fr;
  }
}

.table-live-section .section-kicker {
  display: inline-block;
  margin-bottom: 12px;
  color: #c9a24d;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.table-live-section .tl-title {
  color: #ffffff !important;
  font-size: 2.5rem !important;
  line-height: 1.2;
  margin-bottom: 15px;
  text-transform: none;
  letter-spacing: 0;
}

.table-live-section .tl-intro {
  max-width: 850px;
  margin: 0 auto;
  color: rgba(255,255,255,0.78);
  font-size: 16px;
  line-height: 1.75;
}

.slots-section {
  padding: 100px 0;
  background: linear-gradient(180deg, #2b0a37 0%, #1b0624 100%);
}

.slots-section .section-kicker {
  display: inline-block;
  margin-bottom: 12px;
  color: #c9a24d;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.slots-title {
  color: #ffffff !important;
  max-width: 1200px;
  margin: 0 auto 18px;
  font-size: 2.5rem !important;
  line-height: 1.25;
  text-transform: none;
  letter-spacing: 0;
}

.slots-intro {
  max-width: 800px;
  margin: 0 auto;
  color: rgba(255,255,255,0.75);
}

.slots-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.slots-card {
  background: rgba(18,6,23,0.9);
  border-radius: 26px;
  padding: 30px;
  border: 1px solid rgba(255,255,255,0.08);
}

.slots-featured {
  border-color: rgba(201,162,77,0.35);
}

.slots-badge {
  color: #c9a24d;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 10px;
}

.slots-badge.gold {
  color: #f2d27a;
}

.slots-card h3 {
  color: #fff;
}

.slots-card p {
  color: rgba(255,255,255,0.7);
  font-size: 14.5px;
  line-height: 1.7;
}

.slots-stats {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.slots-stats strong {
  color: #c9a24d;
  font-size: 20px;
}

.slots-tags {
  margin-top: 20px;
}

.slots-tags span {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  margin: 4px;
  font-size: 12px;
}

.slots-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 20px;
}

.slots-grid div {
  background: rgba(255,255,255,0.05);
  padding: 14px;
  border-radius: 16px;
}

.slots-note {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}

.slots-note i {
  color: #c9a24d;
}

.slots-cta {
  margin-top: 40px;
  text-align: center;
}

.slots-cta h3 {
  color: #fff;
  margin-bottom: 15px;
}

.slots-cta .btn {
  background: #c9a24d;
  border: none;
  padding: 12px 30px;
  border-radius: 999px;
}

@media (max-width: 991px) {
  .slots-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 991px) {
  .slots-title {
    font-size: 2rem !important;
    line-height: 1.3;
  }
}

@media (max-width: 575px) {
  .slots-title {
    font-size: 1.7rem !important;
    line-height: 1.35;
  }
}

.providers-section {
  padding: 100px 0;
  background: linear-gradient(180deg, #1b0624 0%, #120417 100%);
}

.providers-section .section-kicker {
  color: #c9a24d;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.providers-title {
  color: #ffffff !important;
  max-width: 1100px;
  margin: 0 auto 18px;
  font-size: 2.5rem !important;
  line-height: 1.25;
  text-transform: none;
  letter-spacing: 0;
}

.providers-intro {
  max-width: 800px;
  margin: 0 auto;
  color: rgba(255,255,255,0.75);
}

.providers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 22px;
}

.provider-card {
  background: rgba(255,255,255,0.04);
  border-radius: 18px;
  padding: 20px;
  text-align: center;
  transition: 0.25s;
}

.provider-card:hover {
  transform: translateY(-6px);
  background: rgba(255,255,255,0.08);
}

.provider-card img {
  max-height: 40px;
  margin-bottom: 15px;
}

.provider-card h4 {
  color: #fff;
  font-size: 16px;
  margin-bottom: 8px;
}

.provider-card p {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 8px;
}

.provider-card span {
  font-size: 12px;
  color: #c9a24d;
}

.visitor-section {
  padding: 100px 0;
    position: relative;
  overflow: hidden;
  padding: 100px 0;
  background:
    radial-gradient(circle at 12% 20%, rgba(201,162,77,0.18), transparent 30%),
    radial-gradient(circle at 88% 80%, rgba(120,37,142,0.25), transparent 36%),
    linear-gradient(180deg, #1b0624 0%, #2b0a37 100%);
}

.visitor-section .section-kicker {
  color: #c9a24d;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.visitor-title {
  color: #fff;
  font-size: 2.4rem;
  max-width: 1000px;
  margin: 0 auto 15px;
  line-height: 1.25;
}

.visitor-intro {
  max-width: 800px;
  margin: 0 auto;
  color: rgba(255,255,255,0.75);
}

.visitor-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.visitor-card {
  background: rgba(255,255,255,0.05);
  padding: 28px;
  border-radius: 22px;
}

.visitor-card h3 {
  color: #fff;
  margin-bottom: 15px;
}

.visitor-card p {
  color: rgba(255,255,255,0.7);
  font-size: 14.5px;
  line-height: 1.7;
}

.visitor-list {
  margin-top: 15px;
  padding-left: 0;
  list-style: none;
}

.visitor-list li {
  margin-bottom: 8px;
  color: rgba(255,255,255,0.8);
}

.visitor-list i {
  color: #c9a24d;
  margin-right: 8px;
}

.visitor-extra {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.visitor-extra div {
  background: rgba(255,255,255,0.04);
  padding: 20px;
  border-radius: 16px;
}

.visitor-extra h4 {
  color: #fff;
  margin-bottom: 10px;
}

.visitor-extra p {
  font-size: 13.5px;
  color: rgba(255,255,255,0.7);
}

@media (max-width: 991px) {
  .visitor-layout {
    grid-template-columns: 1fr;
  }

  .visitor-extra {
    grid-template-columns: 1fr;
  }
}

.app-section {
  position: relative;
  overflow: hidden;
  padding: 100px 0;
  background:
    radial-gradient(circle at 12% 20%, rgba(201,162,77,0.18), transparent 30%),
    radial-gradient(circle at 88% 80%, rgba(120,37,142,0.25), transparent 36%),
    linear-gradient(180deg, #1b0624 0%, #2b0a37 100%);
}

.app-section .section-kicker {
  display: inline-block;
  margin-bottom: 12px;
  color: #c9a24d;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.app-title {
  color: #ffffff !important;
  max-width: 1050px;
  margin: 0 auto 18px;
  font-size: 2.5rem !important;
  line-height: 1.25;
  text-transform: none;
  letter-spacing: 0;
}

.app-intro {
  max-width: 850px;
  margin: 0 auto;
  color: rgba(255,255,255,0.78);
  font-size: 16px;
  line-height: 1.75;
}

.app-layout {
  display: grid;
  grid-template-columns: 0.95fr 1.35fr;
  gap: 30px;
  position: relative;
  z-index: 1;
}

.app-card {
  position: relative;
  overflow: hidden;
  padding: 34px;
  border-radius: 30px;
  background: rgba(18,6,23,0.92);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 26px 70px rgba(0,0,0,0.42);
}

.app-visual-card {
  border-color: rgba(201,162,77,0.32);
}

.app-image-wrap {
  margin-bottom: 24px;
  padding: 22px;
  border-radius: 26px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(201,162,77,0.22);
  text-align: center;
}

.app-image-wrap img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  border-radius: 22px;
}

.app-store-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.app-store-buttons a {
  display: inline-flex;
}

.app-store-buttons img {
  height: 44px;
  width: auto;
  display: block;
}

.app-card p {
  color: rgba(255,255,255,0.72);
  font-size: 14.5px;
  line-height: 1.7;
}

.app-mini-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 22px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(201,162,77,0.08);
  border: 1px solid rgba(201,162,77,0.22);
}

.app-mini-note i {
  margin-top: 4px;
  color: #c9a24d;
}

.app-mini-note span {
  color: rgba(255,255,255,0.74);
  font-size: 14px;
  line-height: 1.6;
}

.app-badge {
  display: inline-block;
  margin-bottom: 16px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(201,162,77,0.16);
  border: 1px solid rgba(201,162,77,0.42);
  color: #f2d27a;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.app-card h3 {
  margin-bottom: 16px;
  color: #ffffff;
  font-size: 28px;
  line-height: 1.25;
  text-transform: none;
  letter-spacing: 0;
}

.app-features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 24px 0;
}

.app-features-grid > div {
  padding: 22px 20px;
  border-radius: 22px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.app-features-grid > div:hover {
  transform: translateY(-5px);
  background: rgba(255,255,255,0.075);
  border-color: rgba(201,162,77,0.42);
}

.app-features-grid i {
  display: block;
  margin-bottom: 14px;
  color: #c9a24d;
  font-size: 24px;
}

.app-features-grid h4,
.app-install-box h4 {
  margin-bottom: 12px;
  color: #ffffff;
  font-size: 17px;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
}

.app-features-grid p {
  margin: 0;
  color: rgba(255,255,255,0.68);
  font-size: 13.5px;
  line-height: 1.6;
}

.app-install-box {
  margin-top: 24px;
  padding: 22px;
  border-radius: 22px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(201,162,77,0.2);
}

.install-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 14px;
}

.install-step span {
  width: 34px;
  height: 34px;
  min-width: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #c9a24d;
  color: #111;
  font-size: 12px;
  font-weight: 900;
}

.install-step p {
  margin: 0;
  color: rgba(255,255,255,0.72);
  font-size: 14px;
  line-height: 1.6;
}

.app-btn {
  margin-top: 24px;
  border-radius: 999px;
  padding: 14px 34px;
  background: #c9a24d;
  color: #111;
  border: 0;
  font-weight: 800;
  text-transform: uppercase;
}

.app-btn:hover {
  background: #ffffff;
  color: #111;
}

@media (max-width: 991px) {
  .app-layout {
    grid-template-columns: 1fr;
  }

  .app-title {
    font-size: 2rem !important;
    line-height: 1.3;
  }
}

@media (max-width: 575px) {
  .app-section {
    padding: 70px 0;
  }

  .app-card {
    padding: 26px 20px;
  }

  .app-features-grid {
    grid-template-columns: 1fr;
  }

  .app-title {
    font-size: 1.7rem !important;
    line-height: 1.35;
  }

  .app-store-buttons img {
    height: 40px;
  }

  .app-btn {
    width: 100%;
    justify-content: center;
  }
}

.payments-section {
  position: relative;
  overflow: hidden;
  padding: 100px 0;
  background:
    radial-gradient(circle at 12% 20%, rgba(201,162,77,0.18), transparent 30%),
    radial-gradient(circle at 88% 80%, rgba(120,37,142,0.25), transparent 36%),
    linear-gradient(180deg, #2b0a37 0%, #1b0624 100%);
}

.payments-section .section-kicker {
  display: inline-block;
  margin-bottom: 12px;
  color: #c9a24d;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.payments-title {
  color: #ffffff !important;
  max-width: 1100px;
  margin: 0 auto 18px;
  font-size: 2.5rem !important;
  line-height: 1.25;
  text-transform: none;
  letter-spacing: 0;
}

.payments-intro {
  max-width: 900px;
  margin: 0 auto;
  color: rgba(255,255,255,0.78);
  font-size: 16px;
  line-height: 1.75;
}

.payments-table-wrap {
  max-width: 860px;
  margin: 0 auto;
}

.payments-table-wrap input {
  display: none;
}

.payment-tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 26px;
}

.payment-tabs label {
  cursor: pointer;
  padding: 13px 24px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(201,162,77,0.35);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  transition: 0.25s ease;
}

.payment-tabs label:first-of-type {
  border-radius: 999px 0 0 999px;
}

.payment-tabs label:last-of-type {
  border-radius: 0 999px 999px 0;
}

#deposit-tab:checked ~ .payment-tabs label[for="deposit-tab"],
#withdrawal-tab:checked ~ .payment-tabs label[for="withdrawal-tab"] {
  background: #c9a24d;
  color: #111;
  box-shadow: 0 12px 30px rgba(201,162,77,0.28);
}

.payment-panel {
  display: none;
}

#deposit-tab:checked ~ .deposit-panel,
#withdrawal-tab:checked ~ .withdrawal-panel {
  display: block;
}

.payment-table {
  padding: 14px;
  border-radius: 26px;
  background: rgba(18,6,23,0.92);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 26px 70px rgba(0,0,0,0.42);
}

.payment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  margin-bottom: 10px;
  border-radius: 16px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.08);
}

.payment-row:last-child {
  margin-bottom: 0;
}

.payment-method {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.payment-method img {
  width: 34px;
  height: 22px;
  min-width: 34px;
  object-fit: contain;
  display: block;
}

.payment-method span {
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
}

.payment-row strong {
  white-space: nowrap;
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
}

.payments-info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 40px;
}

.payments-info-card {
  padding: 24px 22px;
  border-radius: 22px;
  background: rgba(18,6,23,0.78);
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: 0 16px 42px rgba(0,0,0,0.28);
}

.payments-info-card i {
  display: block;
  margin-bottom: 16px;
  color: #c9a24d;
  font-size: 24px;
}

.payments-info-card h3 {
  color: #ffffff;
  font-size: 17px;
  line-height: 1.35;
  margin-bottom: 12px;
  text-transform: none;
  letter-spacing: 0;
}

.payments-info-card p {
  margin: 0;
  color: rgba(255,255,255,0.68);
  font-size: 13.5px;
  line-height: 1.65;
}

@media (max-width: 991px) {
  .payments-title {
    font-size: 2rem !important;
    line-height: 1.3;
  }

  .payments-info-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .payments-section {
    padding: 70px 0;
  }

  .payments-title {
    font-size: 1.7rem !important;
    line-height: 1.35;
  }

  .payment-tabs label {
    padding: 12px 14px;
    font-size: 12px;
  }

  .payment-table {
    padding: 10px;
  }

  .payment-row {
    align-items: flex-start;
    padding: 14px;
  }

  .payment-method {
    gap: 10px;
  }

  .payment-method img {
    width: 30px;
    height: 20px;
    min-width: 30px;
  }

  .payment-method span,
  .payment-row strong {
    font-size: 12.5px;
  }

  .payments-info-grid {
    grid-template-columns: 1fr;
  }
}

.compliance-section {
  position: relative;
  padding: 110px 0;
  background:
    radial-gradient(circle at 10% 20%, rgba(201,162,77,0.18), transparent 30%),
    linear-gradient(180deg, #1b0624 0%, #2b0a37 100%);
}

.compliance-section .section-kicker {
  color: #c9a24d;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.compliance-title {
  color: #fff !important;
  font-size: 2.5rem !important;
  line-height: 1.3;
  max-width: 1000px;
  margin: 0 auto 15px;
}

.compliance-intro {
  max-width: 850px;
  margin: 0 auto;
  color: rgba(255,255,255,0.75);
  line-height: 1.7;
}

.compliance-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
  margin-top: 50px;
}

.compliance-card {
  background: rgba(18,6,23,0.92);
  border-radius: 26px;
  padding: 28px;
  border: 1px solid rgba(255,255,255,0.08);
}

.compliance-card i {
  color: #c9a24d;
  font-size: 24px;
  margin-bottom: 14px;
}

.compliance-card h3 {
  color: #fff;
  font-size: 20px;
  margin-bottom: 14px;
}

.compliance-card p {
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  line-height: 1.7;
}

.compliance-card ul {
  margin: 15px 0;
  padding-left: 18px;
}

.compliance-card li {
  color: rgba(255,255,255,0.75);
  margin-bottom: 6px;
  font-size: 14px;
}

.compliance-wide {
  grid-column: span 2;
}

.provider-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}

.provider-tags span {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(201,162,77,0.12);
  border: 1px solid rgba(201,162,77,0.3);
  color: #f2d27a;
  font-size: 12px;
}

@media (max-width: 991px) {
  .compliance-grid {
    grid-template-columns: 1fr;
  }

  .compliance-wide {
    grid-column: span 1;
  }
}

/* FAQ SECTION */
.faq-section {
   position: relative;
  overflow: hidden;
  padding: 100px 0;
  background:
    radial-gradient(circle at 12% 20%, rgba(201,162,77,0.18), transparent 30%),
    radial-gradient(circle at 88% 80%, rgba(120,37,142,0.25), transparent 36%),
    linear-gradient(180deg, #1b0624 0%, #2b0a37 100%);
}

/* Kicker  */
.faq-section .section-kicker {
  display: inline-block;
  margin-bottom: 12px;
  color: #c9a24d;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.faq-title {
  color: #ffffff !important;
  max-width: 1100px;
  margin: 0 auto 18px;
  font-size: 2.5rem !important;
  line-height: 1.25;
  text-transform: none;
  letter-spacing: 0;
  text-align: center;
}

.faq-intro {
  max-width: 720px;
  margin: 0 auto;
  color: rgba(255,255,255,0.75);
  line-height: 1.7;
}

/* ITEM */
.faq-item {
  margin-bottom: 18px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}

/* QUESTION */
.faq-question {
  width: 100%;
  text-align: left;
  padding: 18px 20px;
  background: transparent;
  border: none;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
}

.faq-question:hover {
  background: rgba(255,255,255,0.05);
}

/* PLUS ICON */
.faq-question::after {
  content: "+";
  position: absolute;
  right: 20px;
  font-size: 20px;
  color: #c9a24d;
}

/* ACTIVE */
.faq-item.active .faq-question::after {
  content: "−";
}

/* ANSWER */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 20px;
  color: rgba(255,255,255,0.75);
  font-size: 15px;
  line-height: 1.7;
  transition: all 0.3s ease;
}

.faq-item.active .faq-answer {
  max-height: 200px;
  padding: 0 20px 18px;
}

.reviews-section {
  position: relative;
  overflow: hidden;
  padding: 100px 0;
  background:
    radial-gradient(circle at 14% 20%, rgba(201,162,77,0.18), transparent 30%),
    radial-gradient(circle at 86% 80%, rgba(120,37,142,0.24), transparent 36%),
    linear-gradient(180deg, #1b0624 0%, #2b0a37 100%);
}

.reviews-section .section-kicker {
  display: inline-block;
  margin-bottom: 12px;
  color: #c9a24d;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.reviews-title {
  color: #ffffff !important;
  max-width: 1100px;
  margin: 0 auto 18px;
  font-size: 2.5rem !important;
  line-height: 1.25;
  text-transform: none;
  letter-spacing: 0;
}

.reviews-intro {
  max-width: 850px;
  margin: 0 auto;
  color: rgba(255,255,255,0.78);
  font-size: 16px;
  line-height: 1.75;
}

.reviews-layout {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 30px;
  align-items: stretch;
}

.reviews-image-card,
.reviews-slider-card {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  background: rgba(18,6,23,0.92);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 26px 70px rgba(0,0,0,0.42);
}

.reviews-image-card {
  min-height: 520px;
}

.reviews-image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.reviews-image-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 45%, rgba(8,3,12,0.72) 100%);
}

.reviews-slider-card {
  padding: 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.reviews-slider {
  position: relative;
  min-height: 320px;
}

.review-slide {
  display: none;
  animation: reviewFade 0.35s ease;
}

.review-slide.active {
  display: block;
}

@keyframes reviewFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.review-stars {
  display: flex;
  gap: 6px;
  margin-bottom: 22px;
  color: #c9a24d;
  font-size: 18px;
}

.review-slide p {
  color: rgba(255,255,255,0.82);
  font-size: 20px;
  line-height: 1.7;
  margin-bottom: 28px;
}

.review-slide h4 {
  color: #ffffff;
  font-size: 18px;
  margin-bottom: 4px;
  text-transform: none;
  letter-spacing: 0;
}

.review-slide span {
  color: rgba(255,255,255,0.58);
  font-size: 14px;
}

.reviews-controls {
  display: flex;
  gap: 12px;
  margin-top: 30px;
}

.reviews-controls button {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(201,162,77,0.42);
  background: rgba(201,162,77,0.14);
  color: #c9a24d;
  cursor: pointer;
  transition: 0.25s ease;
}

.reviews-controls button:hover {
  background: #c9a24d;
  color: #111;
}

@media (max-width: 991px) {
  .reviews-layout {
    grid-template-columns: 1fr;
  }

  .reviews-image-card {
    min-height: 360px;
  }

  .reviews-title {
    font-size: 2rem !important;
    line-height: 1.3;
  }
}

@media (max-width: 575px) {
  .reviews-section {
    padding: 70px 0;
  }

  .reviews-slider-card {
    padding: 28px 22px;
  }

  .reviews-slider {
    min-height: 360px;
  }

  .review-slide p {
    font-size: 16px;
  }

  .reviews-title {
    font-size: 1.7rem !important;
    line-height: 1.35;
  }
}

.site-footer {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 20%, rgba(201,162,77,0.14), transparent 30%),
    radial-gradient(circle at 88% 80%, rgba(120,37,142,0.22), transparent 36%),
    linear-gradient(180deg, #120417 0%, #07020a 100%);
  color: #ffffff;
}

.footer-main {
  padding: 70px 0 28px;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: center;
  padding-bottom: 36px;
  margin-bottom: 36px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-brand {
  max-width: 720px;
}

.footer-logo img {
  max-width: 170px;
  height: auto;
  display: block;
  margin-bottom: 20px;
}

.footer-brand p,
.footer-contact p,
.footer-disclaimer p {
  color: rgba(255,255,255,0.72);
  font-size: 14.5px;
  line-height: 1.7;
  margin: 0;
}

.footer-cta {
  text-align: right;
}

.footer-cta span {
  display: block;
  margin-bottom: 12px;
  color: #c9a24d;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.footer-btn {
  border-radius: 999px;
  padding: 13px 30px;
  background: #c9a24d;
  color: #111;
  border: 0;
  font-weight: 800;
  text-transform: uppercase;
}

.footer-btn:hover {
  background: #ffffff;
  color: #111;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.25fr;
  gap: 30px;
}

.footer-widget h3 {
  color: #ffffff;
  font-size: 17px;
  margin-bottom: 18px;
  text-transform: none;
  letter-spacing: 0;
}

.footer-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-widget li {
  margin-bottom: 10px;
}

.footer-widget a {
  color: rgba(255,255,255,0.68);
  font-size: 14px;
  transition: 0.25s ease;
}

.footer-widget a:hover {
  color: #c9a24d;
}

.footer-contact strong {
  color: #ffffff;
}

.footer-payments {
  margin-top: 42px;
  padding: 24px;
  border-radius: 22px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  text-align: center;
}

.footer-payments span {
  display: block;
  margin-bottom: 18px;
  color: #c9a24d;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.footer-payment-icons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
}

.footer-payment-icons img {
  width: 44px;
  height: 28px;
  object-fit: contain;
  display: block;
  filter: brightness(1.05);
}

.footer-disclaimer {
  max-width: 980px;
  margin: 28px auto 0;
  text-align: center;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.footer-bottom p {
  margin: 0;
  color: rgba(255,255,255,0.58);
  font-size: 13px;
}

.footer-bottom-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.footer-bottom-links a {
  color: rgba(255,255,255,0.58);
  font-size: 13px;
}

.footer-bottom-links a:hover {
  color: #c9a24d;
}

@media (max-width: 991px) {
  .footer-top,
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .footer-logo img {
    margin-left: auto;
    margin-right: auto;
  }

  .footer-cta {
    text-align: center;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .footer-main {
    padding: 55px 0 24px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-payment-icons img {
    width: 38px;
    height: 24px;
  }

  .footer-bottom-links {
    justify-content: center;
  }
}

/* ==================================================
        MRBEAST HEADER, HERO & TOP GAMES START
================================================== */

/* --------------------------------------------------
   MRBEAST COLOUR SYSTEM
-------------------------------------------------- */

.mrbeast-games-page {
  --mb-background: #061426;
  --mb-background-light: #0a213c;
  --mb-card: #102b4a;
  --mb-card-dark: #091b30;

  --mb-cyan: #10d9ff;
  --mb-blue: #168cff;
  --mb-purple: #7548ff;
  --mb-pink: #ff3f9f;
  --mb-yellow: #ffd84a;
  --mb-orange: #ff9f1c;

  --mb-white: #ffffff;
  --mb-text: #dbeeff;
  --mb-muted: #9eb9d2;
  --mb-dark-text: #071321;

  margin: 0;
  padding: 0;
  border: 0;
  overflow-x: hidden;
  overflow-y: visible;

  background: var(--mb-background);
  color: var(--mb-text);
}


/* --------------------------------------------------
   SHARED BUTTON STYLES
-------------------------------------------------- */

.mrbeast-header .btn-primary,
.mrbeast-hero .btn-primary,
.top-games-section .btn-primary {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;

  min-height: 48px;
  padding: 13px 25px !important;

  border: 2px solid var(--mb-yellow) !important;
  border-radius: 13px;

  background:
    linear-gradient(
      135deg,
      var(--mb-yellow) 0%,
      var(--mb-orange) 100%
    ) !important;

  color: var(--mb-dark-text) !important;

  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.4px;
  text-transform: uppercase;

  box-shadow:
    0 5px 0 #bb5e00,
    0 12px 25px rgba(255, 159, 28, 0.25);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}

.mrbeast-header .btn-primary:hover,
.mrbeast-hero .btn-primary:hover,
.top-games-section .btn-primary:hover {
  transform: translateY(-2px);

  background:
    linear-gradient(
      135deg,
      #ffe96d 0%,
      #ffb52e 100%
    ) !important;

  color: var(--mb-dark-text) !important;

  box-shadow:
    0 7px 0 #bb5e00,
    0 16px 30px rgba(255, 159, 28, 0.32);

  filter: brightness(1.05);
}

.mrbeast-header .btn-primary:active,
.mrbeast-hero .btn-primary:active,
.top-games-section .btn-primary:active {
  transform: translateY(3px);

  box-shadow:
    0 2px 0 #bb5e00,
    0 7px 16px rgba(255, 159, 28, 0.24);
}

.mrbeast-header a:focus-visible,
.mrbeast-hero a:focus-visible,
.top-games-section a:focus-visible {
  outline: 3px solid var(--mb-cyan);
  outline-offset: 4px;
}


/* ==================================================
                         HEADER
================================================== */

.mrbeast-header {
  position: sticky;
  top: 0;
  z-index: 1000;

  width: 100%;
  padding: 10px 0;

  border: 0;
  border-bottom: 3px solid var(--mb-cyan);

  background:
    linear-gradient(
      90deg,
      rgba(5, 21, 39, 0.98) 0%,
      rgba(10, 42, 70, 0.98) 52%,
      rgba(23, 54, 91, 0.98) 100%
    );

  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.35),
    0 2px 18px rgba(16, 217, 255, 0.14);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.mrbeast-header .site-navigation {
  background: transparent;
}

.mrbeast-header .navbar {
  min-height: 60px;
}

.mrbeast-header .logo {
  flex-shrink: 0;
}

.mrbeast-header .logo a {
  display: inline-flex !important;
  align-items: center;
}

.mrbeast-header .logo img {
  display: block;

  width: 150px;
  max-width: 100%;
  height: auto;

  filter:
    drop-shadow(0 3px 0 rgba(0, 0, 0, 0.25))
    drop-shadow(0 0 10px rgba(16, 217, 255, 0.18));
}

.mrbeast-header ul.navbar-nav {
  gap: 4px;
}

.mrbeast-header ul.navbar-nav > li {
  padding: 0 7px;
}

.mrbeast-header ul.navbar-nav > li > a,
.mrbeast-header .navbar-light ul.navbar-nav > li > a {
  position: relative;

  margin: 0;
  padding: 13px 4px !important;

  color: var(--mb-white) !important;

  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 800 !important;
  letter-spacing: 0.25px;
  text-transform: none;

  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.mrbeast-header ul.navbar-nav > li:not(.header-get-a-quote) > a::before {
  position: absolute;
  right: 4px;
  bottom: 5px;
  left: 4px;

  height: 3px;
  border-radius: 20px;

  background:
    linear-gradient(
      90deg,
      var(--mb-cyan),
      var(--mb-purple)
    );

  content: "";
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s ease;
}

.mrbeast-header ul.navbar-nav > li:not(.header-get-a-quote) > a:hover {
  color: var(--mb-cyan) !important;
  transform: translateY(-1px);
}

.mrbeast-header ul.navbar-nav > li:not(.header-get-a-quote) > a:hover::before,
.mrbeast-header ul.navbar-nav > li:not(.header-get-a-quote) > a:focus-visible::before {
  transform: scaleX(1);
}

.mrbeast-header .navbar-nav > .header-get-a-quote {
  top: auto;
  margin-left: 7px;
}

.mrbeast-header .header-get-a-quote .btn-primary {
  min-height: 44px;
  margin-top: 0;
  padding: 12px 22px !important;
}

.mrbeast-header .navbar-toggler {
  width: 46px;
  height: 42px;
  margin: 0;
  padding: 5px;

  border: 2px solid var(--mb-yellow);
  border-radius: 11px;

  background:
    linear-gradient(
      135deg,
      var(--mb-yellow),
      var(--mb-orange)
    );
}

.mrbeast-header .navbar-toggler:focus {
  outline: 3px solid rgba(16, 217, 255, 0.45);
  outline-offset: 3px;
}


/* ==================================================
                          HERO
================================================== */

.mrbeast-hero {
  position: relative;
  isolation: isolate;

  display: flex;
  align-items: center;

  min-height: 720px !important;

  border-bottom: 4px solid var(--mb-cyan);

  background-position: center !important;
  background-size: cover !important;
  overflow: hidden;
}

/* Dark overlay for text readability */

.mrbeast-hero::before {
  position: absolute;
  inset: 0;
  z-index: 0;

  background:
    linear-gradient(
      90deg,
      rgba(3, 13, 26, 0.97) 0%,
      rgba(4, 20, 38, 0.91) 34%,
      rgba(6, 27, 50, 0.58) 62%,
      rgba(6, 20, 37, 0.2) 100%
    );

  content: "";
  pointer-events: none;
}

/* Colourful cartoon-style glow */

.mrbeast-hero::after {
  position: absolute;
  inset: 0;
  z-index: 0;

  background:
    radial-gradient(
      circle at 12% 20%,
      rgba(16, 217, 255, 0.2),
      transparent 27%
    ),
    radial-gradient(
      circle at 79% 23%,
      rgba(117, 72, 255, 0.2),
      transparent 30%
    ),
    radial-gradient(
      circle at 80% 85%,
      rgba(255, 63, 159, 0.16),
      transparent 28%
    );

  content: "";
  pointer-events: none;
}

.mrbeast-hero .slider-content {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;

  width: 100%;
  min-height: inherit;
  padding: 100px 0;
}

.mrbeast-hero .container,
.mrbeast-hero .row {
  min-height: inherit;
}

.mrbeast-hero .hero-kicker {
  display: inline-flex;
  align-items: center;

  margin-bottom: 18px;
  padding: 9px 15px;

  border: 2px solid rgba(16, 217, 255, 0.72);
  border-radius: 999px;

  background: rgba(16, 217, 255, 0.12);
  color: var(--mb-cyan);

  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 1.3px;
  text-transform: uppercase;

  box-shadow:
    0 0 22px rgba(16, 217, 255, 0.12),
    inset 0 0 15px rgba(16, 217, 255, 0.06);
}

.mrbeast-hero .slide-sub-title {
  max-width: 800px;
  margin: 0 0 23px;

  color: var(--mb-white);

  font-family: "Montserrat", sans-serif;
  font-size: clamp(44px, 5.7vw, 76px);
  line-height: 0.98;
  font-weight: 900;
  letter-spacing: -2.5px;
  text-transform: none;

  text-shadow:
    0 5px 0 rgba(0, 0, 0, 0.25),
    0 10px 30px rgba(0, 0, 0, 0.45);
}

.mrbeast-hero .slide-sub-title::first-line {
  color: var(--mb-white);
}

.mrbeast-hero .hero-description {
  max-width: 660px;
  margin: 0 0 31px;

  color: var(--mb-text);

  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  line-height: 1.7;
  font-weight: 600;

  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65);
}

.mrbeast-hero .hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 17px;
}

.mrbeast-hero .hero-actions p {
  margin: 0;
}

.mrbeast-hero .hero-actions .btn {
  min-width: 154px;
}

.mrbeast-hero .btn-outline-light {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;

  min-height: 48px;
  padding: 13px 25px;

  border: 2px solid var(--mb-cyan);
  border-radius: 13px;

  background: rgba(6, 28, 50, 0.58);
  color: var(--mb-white);

  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.4px;
  text-transform: uppercase;

  box-shadow:
    0 5px 0 #00657a,
    0 12px 25px rgba(16, 217, 255, 0.17);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  transition:
    color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.mrbeast-hero .btn-outline-light:hover {
  border-color: var(--mb-cyan);
  background: var(--mb-cyan);
  color: var(--mb-dark-text);

  transform: translateY(-2px);

  box-shadow:
    0 7px 0 #00657a,
    0 16px 30px rgba(16, 217, 255, 0.25);
}

.mrbeast-hero .btn-outline-light:active {
  transform: translateY(3px);

  box-shadow:
    0 2px 0 #00657a,
    0 7px 15px rgba(16, 217, 255, 0.18);
}


/* ==================================================
                       TOP GAMES
================================================== */

.mrbeast-games-page .top-games-section {
  position: relative;
  isolation: isolate;

  padding: 95px 0 !important;

  border-bottom: 3px solid rgba(16, 217, 255, 0.24);

  background:
    radial-gradient(
      circle at 10% 10%,
      rgba(16, 217, 255, 0.16),
      transparent 27%
    ),
    radial-gradient(
      circle at 90% 17%,
      rgba(117, 72, 255, 0.18),
      transparent 30%
    ),
    radial-gradient(
      circle at 52% 100%,
      rgba(255, 63, 159, 0.1),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #07182d 0%,
      #09213a 50%,
      #061426 100%
    );
}

.mrbeast-games-page .top-games-section::before {
  position: absolute;
  inset: 0;
  z-index: -1;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.018) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.018) 1px,
      transparent 1px
    );

  background-size: 32px 32px;

  content: "";
  pointer-events: none;
}

.top-games-section .section-kicker {
  display: inline-flex;
  align-items: center;

  margin-bottom: 15px;
  padding: 8px 15px;

  border: 2px solid rgba(255, 216, 74, 0.62);
  border-radius: 999px;

  background: rgba(255, 216, 74, 0.09);
  color: var(--mb-yellow);

  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.top-games-section .games-title {
  max-width: 850px;
  margin: 0 auto 18px;

  color: var(--mb-white) !important;

  font-family: "Montserrat", sans-serif;
  font-size: clamp(34px, 4vw, 54px) !important;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -1.7px;
  text-transform: none;

  text-shadow:
    0 4px 0 rgba(0, 0, 0, 0.18),
    0 10px 30px rgba(0, 0, 0, 0.25);
}

.top-games-section .games-intro {
  max-width: 760px;
  margin: 0 auto;

  color: var(--mb-muted);

  font-family: "Open Sans", sans-serif;
  font-size: 17px;
  line-height: 1.7;
  font-weight: 600;
}

.top-games-section .game-card {
  position: relative;
  isolation: isolate;

  width: 100%;
  aspect-ratio: 2 / 3;

  border: 3px solid rgba(16, 217, 255, 0.36);
  border-radius: 18px;

  background: var(--mb-card-dark);

  box-shadow:
    0 7px 0 rgba(3, 9, 20, 0.78),
    0 15px 30px rgba(0, 0, 0, 0.34);

  overflow: hidden;

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.top-games-section .game-card::before {
  position: absolute;
  inset: 0;
  z-index: 2;

  border-radius: inherit;

  background:
    linear-gradient(
      140deg,
      rgba(255, 255, 255, 0.15) 0%,
      transparent 24%,
      transparent 76%,
      rgba(117, 72, 255, 0.12) 100%
    );

  content: "";
  pointer-events: none;
}

.top-games-section .game-card img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 0.35s ease,
    filter 0.35s ease;
}

.top-games-section .game-card:hover {
  z-index: 5;

  border-color: var(--mb-cyan);

  transform:
    translateY(-8px)
    rotate(-0.5deg);

  box-shadow:
    0 9px 0 #044e63,
    0 22px 42px rgba(0, 0, 0, 0.48),
    0 0 30px rgba(16, 217, 255, 0.17);
}

.top-games-section .game-card:hover img {
  transform: scale(1.07);
  filter: brightness(0.67) saturate(1.12);
}

.top-games-section .hover-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 15px;

  background:
    linear-gradient(
      180deg,
      rgba(4, 18, 34, 0.08) 0%,
      rgba(4, 18, 34, 0.5) 52%,
      rgba(4, 18, 34, 0.92) 100%
    );

  opacity: 0;

  transition: opacity 0.25s ease;
}

.top-games-section .game-card:hover .hover-overlay,
.top-games-section .game-card:focus-within .hover-overlay {
  opacity: 1;
}

.top-games-section .hover-overlay .btn-primary {
  min-width: 115px;
  min-height: 42px;
  padding: 11px 16px !important;

  font-size: 12px;

  transform: translateY(12px);
  opacity: 0;

  transition:
    transform 0.25s ease,
    opacity 0.25s ease,
    box-shadow 0.2s ease;
}

.top-games-section .game-card:hover .hover-overlay .btn-primary,
.top-games-section .game-card:focus-within .hover-overlay .btn-primary {
  transform: translateY(0);
  opacity: 1;
}


/* ==================================================
                    TABLET STYLES
================================================== */

@media (max-width: 1199px) {
  .mrbeast-header ul.navbar-nav > li {
    padding: 0 4px;
  }

  .mrbeast-header ul.navbar-nav > li > a,
  .mrbeast-header .navbar-light ul.navbar-nav > li > a {
    font-size: 12px;
  }

  .mrbeast-header .header-get-a-quote .btn-primary {
    padding: 11px 16px !important;
  }
}

@media (max-width: 991px) {
  .mrbeast-header {
    padding: 8px 0;
  }

  .mrbeast-header .navbar {
    min-height: 55px;
  }

  .mrbeast-header .logo img {
    width: 140px;
  }

  .mrbeast-header .navbar-collapse {
    margin-top: 9px;
    padding: 13px 16px 18px;

    border: 2px solid rgba(16, 217, 255, 0.2);
    border-radius: 15px;

    background:
      linear-gradient(
        180deg,
        rgba(8, 34, 59, 0.99),
        rgba(4, 20, 37, 0.99)
      );

    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.35);
  }

  .mrbeast-header ul.navbar-nav {
    align-items: stretch !important;
    gap: 2px;
    margin-bottom: 0;
  }

  .mrbeast-header ul.navbar-nav > li {
    width: 100%;
    padding: 0;
  }

  .mrbeast-header ul.navbar-nav > li > a,
  .mrbeast-header .navbar-light ul.navbar-nav > li > a {
    padding: 11px 5px !important;
    font-size: 14px;
  }

  .mrbeast-header .navbar-nav > .header-get-a-quote {
    margin: 10px 0 0;
  }

  .mrbeast-header .header-get-a-quote .btn-primary {
    width: 100%;
    min-height: 47px;
  }

  .mrbeast-hero {
    min-height: 680px !important;
  }

  .mrbeast-hero::before {
    background:
      linear-gradient(
        90deg,
        rgba(3, 13, 26, 0.96) 0%,
        rgba(4, 20, 38, 0.84) 55%,
        rgba(6, 20, 37, 0.48) 100%
      );
  }

  .mrbeast-hero .slider-content {
    padding: 90px 0;
  }

  .mrbeast-hero .slide-sub-title {
    max-width: 700px;
    letter-spacing: -2px;
  }
}


/* ==================================================
                    MOBILE STYLES
================================================== */

@media (max-width: 767px) {
  .mrbeast-hero {
    min-height: 660px !important;
    text-align: center;
    background-position: 62% center !important;
  }

  .mrbeast-hero::before {
    background:
      linear-gradient(
        180deg,
        rgba(3, 13, 26, 0.7) 0%,
        rgba(3, 13, 26, 0.88) 42%,
        rgba(3, 13, 26, 0.98) 100%
      );
  }

  .mrbeast-hero .slider-content {
    padding: 85px 0 75px;
  }

  .mrbeast-hero .hero-kicker {
    margin-right: auto;
    margin-left: auto;
  }

  .mrbeast-hero .slide-sub-title {
    margin-right: auto;
    margin-left: auto;

    font-size: clamp(38px, 10vw, 52px);
    line-height: 1.02;
    letter-spacing: -1.7px;
  }

  .mrbeast-hero .hero-description {
    max-width: 600px;
    margin-right: auto;
    margin-left: auto;

    font-size: 16px;
    line-height: 1.65;
  }

  .mrbeast-hero .hero-actions {
    justify-content: center;
  }

  .mrbeast-games-page .top-games-section {
    padding: 75px 0 !important;
  }

  .top-games-section .games-intro {
    font-size: 16px;
  }
}

@media (max-width: 575px) {
  .mrbeast-header .logo img {
    width: 126px;
  }

  .mrbeast-header .navbar-toggler {
    width: 43px;
    height: 40px;
  }

  .mrbeast-hero {
    min-height: 630px !important;
  }

  .mrbeast-hero .slider-content {
    padding: 70px 0 65px;
  }

  .mrbeast-hero .hero-kicker {
    padding: 8px 12px;
    font-size: 10px;
    letter-spacing: 0.9px;
  }

  .mrbeast-hero .slide-sub-title {
    font-size: 36px;
    line-height: 1.04;
    letter-spacing: -1.3px;
  }

  .mrbeast-hero .hero-description {
    margin-bottom: 26px;
    font-size: 15px;
  }

  .mrbeast-hero .hero-actions {
    flex-direction: column;
    gap: 14px;
  }

  .mrbeast-hero .hero-actions .btn {
    width: 100%;
    max-width: 290px;
  }

  .mrbeast-games-page .top-games-section {
    padding: 65px 0 !important;
  }

  .top-games-section .games-title {
    font-size: 34px !important;
    letter-spacing: -1px;
  }

  .top-games-section .games-intro {
    font-size: 15px;
    line-height: 1.65;
  }

  .top-games-section .game-card {
    border-width: 2px;
    border-radius: 15px;
  }

  .top-games-section .game-card:hover {
    transform: translateY(-5px);
  }
}


/* --------------------------------------------------
   TOUCH DEVICES

   The Play Now button remains visible because
   touchscreens do not have a normal hover state.
-------------------------------------------------- */

@media (hover: none) {
  .top-games-section .hover-overlay {
    justify-content: center;
    align-items: flex-end;

    padding-bottom: 16px;

    background:
      linear-gradient(
        180deg,
        transparent 48%,
        rgba(4, 18, 34, 0.94) 100%
      );

    opacity: 1;
  }

  .top-games-section .hover-overlay .btn-primary {
    min-width: 100px;
    min-height: 38px;
    padding: 9px 12px !important;

    transform: none;
    opacity: 1;

    font-size: 10px;
  }
}


/* --------------------------------------------------
   REDUCED MOTION
-------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .mrbeast-header *,
  .mrbeast-hero *,
  .top-games-section * {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ==================================================
         MRBEAST HEADER, HERO & TOP GAMES END
================================================== */
/* ==================================================
        MRBEAST HEADER, HERO & TOP GAMES START
================================================== */

/* --------------------------------------------------
   MRBEAST COLOUR SYSTEM
-------------------------------------------------- */

.mrbeast-games-page {
  --mb-background: #061426;
  --mb-background-light: #0a213c;
  --mb-card: #102b4a;
  --mb-card-dark: #091b30;

  --mb-cyan: #10d9ff;
  --mb-blue: #168cff;
  --mb-purple: #7548ff;
  --mb-pink: #ff3f9f;
  --mb-yellow: #ffd84a;
  --mb-orange: #ff9f1c;

  --mb-white: #ffffff;
  --mb-text: #dbeeff;
  --mb-muted: #9eb9d2;
  --mb-dark-text: #071321;

  margin: 0;
  padding: 0;
  border: 0;
  overflow-x: hidden;
  overflow-y: visible;

  background: var(--mb-background);
  color: var(--mb-text);
}


/* --------------------------------------------------
   SHARED BUTTON STYLES
-------------------------------------------------- */

.mrbeast-header .btn-primary,
.mrbeast-hero .btn-primary,
.top-games-section .btn-primary {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;

  min-height: 48px;
  padding: 13px 25px !important;

  border: 2px solid var(--mb-yellow) !important;
  border-radius: 13px;

  background:
    linear-gradient(
      135deg,
      var(--mb-yellow) 0%,
      var(--mb-orange) 100%
    ) !important;

  color: var(--mb-dark-text) !important;

  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.4px;
  text-transform: uppercase;

  box-shadow:
    0 5px 0 #bb5e00,
    0 12px 25px rgba(255, 159, 28, 0.25);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}

.mrbeast-header .btn-primary:hover,
.mrbeast-hero .btn-primary:hover,
.top-games-section .btn-primary:hover {
  transform: translateY(-2px);

  background:
    linear-gradient(
      135deg,
      #ffe96d 0%,
      #ffb52e 100%
    ) !important;

  color: var(--mb-dark-text) !important;

  box-shadow:
    0 7px 0 #bb5e00,
    0 16px 30px rgba(255, 159, 28, 0.32);

  filter: brightness(1.05);
}

.mrbeast-header .btn-primary:active,
.mrbeast-hero .btn-primary:active,
.top-games-section .btn-primary:active {
  transform: translateY(3px);

  box-shadow:
    0 2px 0 #bb5e00,
    0 7px 16px rgba(255, 159, 28, 0.24);
}

.mrbeast-header a:focus-visible,
.mrbeast-hero a:focus-visible,
.top-games-section a:focus-visible {
  outline: 3px solid var(--mb-cyan);
  outline-offset: 4px;
}


/* ==================================================
                         HEADER
================================================== */

.mrbeast-header {
  position: sticky;
  top: 0;
  z-index: 1000;

  width: 100%;
  padding: 10px 0;

  border: 0;
  border-bottom: 3px solid var(--mb-cyan);

  background:
    linear-gradient(
      90deg,
      rgba(5, 21, 39, 0.98) 0%,
      rgba(10, 42, 70, 0.98) 52%,
      rgba(23, 54, 91, 0.98) 100%
    );

  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.35),
    0 2px 18px rgba(16, 217, 255, 0.14);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.mrbeast-header .site-navigation {
  background: transparent;
}

.mrbeast-header .navbar {
  min-height: 60px;
}

.mrbeast-header .logo {
  flex-shrink: 0;
}

.mrbeast-header .logo a {
  display: inline-flex !important;
  align-items: center;
}

.mrbeast-header .logo img {
  display: block;

  width: 150px;
  max-width: 100%;
  height: auto;

  filter:
    drop-shadow(0 3px 0 rgba(0, 0, 0, 0.25))
    drop-shadow(0 0 10px rgba(16, 217, 255, 0.18));
}

.mrbeast-header ul.navbar-nav {
  gap: 4px;
}

.mrbeast-header ul.navbar-nav > li {
  padding: 0 7px;
}

.mrbeast-header ul.navbar-nav > li > a,
.mrbeast-header .navbar-light ul.navbar-nav > li > a {
  position: relative;

  margin: 0;
  padding: 13px 4px !important;

  color: var(--mb-white) !important;

  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 800 !important;
  letter-spacing: 0.25px;
  text-transform: none;

  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.mrbeast-header ul.navbar-nav > li:not(.header-get-a-quote) > a::before {
  position: absolute;
  right: 4px;
  bottom: 5px;
  left: 4px;

  height: 3px;
  border-radius: 20px;

  background:
    linear-gradient(
      90deg,
      var(--mb-cyan),
      var(--mb-purple)
    );

  content: "";
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s ease;
}

.mrbeast-header ul.navbar-nav > li:not(.header-get-a-quote) > a:hover {
  color: var(--mb-cyan) !important;
  transform: translateY(-1px);
}

.mrbeast-header ul.navbar-nav > li:not(.header-get-a-quote) > a:hover::before,
.mrbeast-header ul.navbar-nav > li:not(.header-get-a-quote) > a:focus-visible::before {
  transform: scaleX(1);
}

.mrbeast-header .navbar-nav > .header-get-a-quote {
  top: auto;
  margin-left: 7px;
}

.mrbeast-header .header-get-a-quote .btn-primary {
  min-height: 44px;
  margin-top: 0;
  padding: 12px 22px !important;
}

.mrbeast-header .navbar-toggler {
  width: 46px;
  height: 42px;
  margin: 0;
  padding: 5px;

  border: 2px solid var(--mb-yellow);
  border-radius: 11px;

  background:
    linear-gradient(
      135deg,
      var(--mb-yellow),
      var(--mb-orange)
    );
}

.mrbeast-header .navbar-toggler:focus {
  outline: 3px solid rgba(16, 217, 255, 0.45);
  outline-offset: 3px;
}


/* ==================================================
                          HERO
================================================== */

.mrbeast-hero {
  position: relative;
  isolation: isolate;

  display: flex;
  align-items: center;

  min-height: 720px !important;

  border-bottom: 4px solid var(--mb-cyan);

  background-position: center !important;
  background-size: cover !important;
  overflow: hidden;
}

/* Dark overlay for text readability */

.mrbeast-hero::before {
  position: absolute;
  inset: 0;
  z-index: 0;

  background:
    linear-gradient(
      90deg,
      rgba(3, 13, 26, 0.97) 0%,
      rgba(4, 20, 38, 0.91) 34%,
      rgba(6, 27, 50, 0.58) 62%,
      rgba(6, 20, 37, 0.2) 100%
    );

  content: "";
  pointer-events: none;
}

/* Colourful cartoon-style glow */

.mrbeast-hero::after {
  position: absolute;
  inset: 0;
  z-index: 0;

  background:
    radial-gradient(
      circle at 12% 20%,
      rgba(16, 217, 255, 0.2),
      transparent 27%
    ),
    radial-gradient(
      circle at 79% 23%,
      rgba(117, 72, 255, 0.2),
      transparent 30%
    ),
    radial-gradient(
      circle at 80% 85%,
      rgba(255, 63, 159, 0.16),
      transparent 28%
    );

  content: "";
  pointer-events: none;
}

.mrbeast-hero .slider-content {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;

  width: 100%;
  min-height: inherit;
  padding: 100px 0;
}

.mrbeast-hero .container,
.mrbeast-hero .row {
  min-height: inherit;
}

.mrbeast-hero .hero-kicker {
  display: inline-flex;
  align-items: center;

  margin-bottom: 18px;
  padding: 9px 15px;

  border: 2px solid rgba(16, 217, 255, 0.72);
  border-radius: 999px;

  background: rgba(16, 217, 255, 0.12);
  color: var(--mb-cyan);

  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 1.3px;
  text-transform: uppercase;

  box-shadow:
    0 0 22px rgba(16, 217, 255, 0.12),
    inset 0 0 15px rgba(16, 217, 255, 0.06);
}

.mrbeast-hero .slide-sub-title {
  max-width: 800px;
  margin: 0 0 23px;

  color: var(--mb-white);

  font-family: "Montserrat", sans-serif;
  font-size: clamp(44px, 5.7vw, 76px);
  line-height: 0.98;
  font-weight: 900;
  letter-spacing: -2.5px;
  text-transform: none;

  text-shadow:
    0 5px 0 rgba(0, 0, 0, 0.25),
    0 10px 30px rgba(0, 0, 0, 0.45);
}

.mrbeast-hero .slide-sub-title::first-line {
  color: var(--mb-white);
}

.mrbeast-hero .hero-description {
  max-width: 660px;
  margin: 0 0 31px;

  color: var(--mb-text);

  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  line-height: 1.7;
  font-weight: 600;

  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65);
}

.mrbeast-hero .hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 17px;
}

.mrbeast-hero .hero-actions p {
  margin: 0;
}

.mrbeast-hero .hero-actions .btn {
  min-width: 154px;
}

.mrbeast-hero .btn-outline-light {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;

  min-height: 48px;
  padding: 13px 25px;

  border: 2px solid var(--mb-cyan);
  border-radius: 13px;

  background: rgba(6, 28, 50, 0.58);
  color: var(--mb-white);

  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.4px;
  text-transform: uppercase;

  box-shadow:
    0 5px 0 #00657a,
    0 12px 25px rgba(16, 217, 255, 0.17);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  transition:
    color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.mrbeast-hero .btn-outline-light:hover {
  border-color: var(--mb-cyan);
  background: var(--mb-cyan);
  color: var(--mb-dark-text);

  transform: translateY(-2px);

  box-shadow:
    0 7px 0 #00657a,
    0 16px 30px rgba(16, 217, 255, 0.25);
}

.mrbeast-hero .btn-outline-light:active {
  transform: translateY(3px);

  box-shadow:
    0 2px 0 #00657a,
    0 7px 15px rgba(16, 217, 255, 0.18);
}


/* ==================================================
                       TOP GAMES
================================================== */

.mrbeast-games-page .top-games-section {
  position: relative;
  isolation: isolate;

  padding: 95px 0 !important;

  border-bottom: 3px solid rgba(16, 217, 255, 0.24);

  background:
    radial-gradient(
      circle at 10% 10%,
      rgba(16, 217, 255, 0.16),
      transparent 27%
    ),
    radial-gradient(
      circle at 90% 17%,
      rgba(117, 72, 255, 0.18),
      transparent 30%
    ),
    radial-gradient(
      circle at 52% 100%,
      rgba(255, 63, 159, 0.1),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #07182d 0%,
      #09213a 50%,
      #061426 100%
    );
}

.mrbeast-games-page .top-games-section::before {
  position: absolute;
  inset: 0;
  z-index: -1;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.018) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.018) 1px,
      transparent 1px
    );

  background-size: 32px 32px;

  content: "";
  pointer-events: none;
}

.top-games-section .section-kicker {
  display: inline-flex;
  align-items: center;

  margin-bottom: 15px;
  padding: 8px 15px;

  border: 2px solid rgba(255, 216, 74, 0.62);
  border-radius: 999px;

  background: rgba(255, 216, 74, 0.09);
  color: var(--mb-yellow);

  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.top-games-section .games-title {
  max-width: 850px;
  margin: 0 auto 18px;

  color: var(--mb-white) !important;

  font-family: "Montserrat", sans-serif;
  font-size: clamp(34px, 4vw, 54px) !important;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -1.7px;
  text-transform: none;

  text-shadow:
    0 4px 0 rgba(0, 0, 0, 0.18),
    0 10px 30px rgba(0, 0, 0, 0.25);
}

.top-games-section .games-intro {
  max-width: 760px;
  margin: 0 auto;

  color: var(--mb-muted);

  font-family: "Open Sans", sans-serif;
  font-size: 17px;
  line-height: 1.7;
  font-weight: 600;
}

.top-games-section .game-card {
  position: relative;
  isolation: isolate;

  width: 100%;
  aspect-ratio: 2 / 3;

  border: 3px solid rgba(16, 217, 255, 0.36);
  border-radius: 18px;

  background: var(--mb-card-dark);

  box-shadow:
    0 7px 0 rgba(3, 9, 20, 0.78),
    0 15px 30px rgba(0, 0, 0, 0.34);

  overflow: hidden;

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.top-games-section .game-card::before {
  position: absolute;
  inset: 0;
  z-index: 2;

  border-radius: inherit;

  background:
    linear-gradient(
      140deg,
      rgba(255, 255, 255, 0.15) 0%,
      transparent 24%,
      transparent 76%,
      rgba(117, 72, 255, 0.12) 100%
    );

  content: "";
  pointer-events: none;
}

.top-games-section .game-card img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 0.35s ease,
    filter 0.35s ease;
}

.top-games-section .game-card:hover {
  z-index: 5;

  border-color: var(--mb-cyan);

  transform:
    translateY(-8px)
    rotate(-0.5deg);

  box-shadow:
    0 9px 0 #044e63,
    0 22px 42px rgba(0, 0, 0, 0.48),
    0 0 30px rgba(16, 217, 255, 0.17);
}

.top-games-section .game-card:hover img {
  transform: scale(1.07);
  filter: brightness(0.67) saturate(1.12);
}

.top-games-section .hover-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 15px;

  background:
    linear-gradient(
      180deg,
      rgba(4, 18, 34, 0.08) 0%,
      rgba(4, 18, 34, 0.5) 52%,
      rgba(4, 18, 34, 0.92) 100%
    );

  opacity: 0;

  transition: opacity 0.25s ease;
}

.top-games-section .game-card:hover .hover-overlay,
.top-games-section .game-card:focus-within .hover-overlay {
  opacity: 1;
}

.top-games-section .hover-overlay .btn-primary {
  min-width: 115px;
  min-height: 42px;
  padding: 11px 16px !important;

  font-size: 12px;

  transform: translateY(12px);
  opacity: 0;

  transition:
    transform 0.25s ease,
    opacity 0.25s ease,
    box-shadow 0.2s ease;
}

.top-games-section .game-card:hover .hover-overlay .btn-primary,
.top-games-section .game-card:focus-within .hover-overlay .btn-primary {
  transform: translateY(0);
  opacity: 1;
}


/* ==================================================
                    TABLET STYLES
================================================== */

@media (max-width: 1199px) {
  .mrbeast-header ul.navbar-nav > li {
    padding: 0 4px;
  }

  .mrbeast-header ul.navbar-nav > li > a,
  .mrbeast-header .navbar-light ul.navbar-nav > li > a {
    font-size: 12px;
  }

  .mrbeast-header .header-get-a-quote .btn-primary {
    padding: 11px 16px !important;
  }
}

@media (max-width: 991px) {
  .mrbeast-header {
    padding: 8px 0;
  }

  .mrbeast-header .navbar {
    min-height: 55px;
  }

  .mrbeast-header .logo img {
    width: 140px;
  }

  .mrbeast-header .navbar-collapse {
    margin-top: 9px;
    padding: 13px 16px 18px;

    border: 2px solid rgba(16, 217, 255, 0.2);
    border-radius: 15px;

    background:
      linear-gradient(
        180deg,
        rgba(8, 34, 59, 0.99),
        rgba(4, 20, 37, 0.99)
      );

    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.35);
  }

  .mrbeast-header ul.navbar-nav {
    align-items: stretch !important;
    gap: 2px;
    margin-bottom: 0;
  }

  .mrbeast-header ul.navbar-nav > li {
    width: 100%;
    padding: 0;
  }

  .mrbeast-header ul.navbar-nav > li > a,
  .mrbeast-header .navbar-light ul.navbar-nav > li > a {
    padding: 11px 5px !important;
    font-size: 14px;
  }

  .mrbeast-header .navbar-nav > .header-get-a-quote {
    margin: 10px 0 0;
  }

  .mrbeast-header .header-get-a-quote .btn-primary {
    width: 100%;
    min-height: 47px;
  }

  .mrbeast-hero {
    min-height: 680px !important;
  }

  .mrbeast-hero::before {
    background:
      linear-gradient(
        90deg,
        rgba(3, 13, 26, 0.96) 0%,
        rgba(4, 20, 38, 0.84) 55%,
        rgba(6, 20, 37, 0.48) 100%
      );
  }

  .mrbeast-hero .slider-content {
    padding: 90px 0;
  }

  .mrbeast-hero .slide-sub-title {
    max-width: 700px;
    letter-spacing: -2px;
  }
}


/* ==================================================
                    MOBILE STYLES
================================================== */

@media (max-width: 767px) {
  .mrbeast-hero {
    min-height: 660px !important;
    text-align: center;
    background-position: 62% center !important;
  }

  .mrbeast-hero::before {
    background:
      linear-gradient(
        180deg,
        rgba(3, 13, 26, 0.7) 0%,
        rgba(3, 13, 26, 0.88) 42%,
        rgba(3, 13, 26, 0.98) 100%
      );
  }

  .mrbeast-hero .slider-content {
    padding: 85px 0 75px;
  }

  .mrbeast-hero .hero-kicker {
    margin-right: auto;
    margin-left: auto;
  }

  .mrbeast-hero .slide-sub-title {
    margin-right: auto;
    margin-left: auto;

    font-size: clamp(38px, 10vw, 52px);
    line-height: 1.02;
    letter-spacing: -1.7px;
  }

  .mrbeast-hero .hero-description {
    max-width: 600px;
    margin-right: auto;
    margin-left: auto;

    font-size: 16px;
    line-height: 1.65;
  }

  .mrbeast-hero .hero-actions {
    justify-content: center;
  }

  .mrbeast-games-page .top-games-section {
    padding: 75px 0 !important;
  }

  .top-games-section .games-intro {
    font-size: 16px;
  }
}

@media (max-width: 575px) {
  .mrbeast-header .logo img {
    width: 126px;
  }

  .mrbeast-header .navbar-toggler {
    width: 43px;
    height: 40px;
  }

  .mrbeast-hero {
    min-height: 630px !important;
  }

  .mrbeast-hero .slider-content {
    padding: 70px 0 65px;
  }

  .mrbeast-hero .hero-kicker {
    padding: 8px 12px;
    font-size: 10px;
    letter-spacing: 0.9px;
  }

  .mrbeast-hero .slide-sub-title {
    font-size: 36px;
    line-height: 1.04;
    letter-spacing: -1.3px;
  }

  .mrbeast-hero .hero-description {
    margin-bottom: 26px;
    font-size: 15px;
  }

  .mrbeast-hero .hero-actions {
    flex-direction: column;
    gap: 14px;
  }

  .mrbeast-hero .hero-actions .btn {
    width: 100%;
    max-width: 290px;
  }

  .mrbeast-games-page .top-games-section {
    padding: 65px 0 !important;
  }

  .top-games-section .games-title {
    font-size: 34px !important;
    letter-spacing: -1px;
  }

  .top-games-section .games-intro {
    font-size: 15px;
    line-height: 1.65;
  }

  .top-games-section .game-card {
    border-width: 2px;
    border-radius: 15px;
  }

  .top-games-section .game-card:hover {
    transform: translateY(-5px);
  }
}


/* --------------------------------------------------
   TOUCH DEVICES

   The Play Now button remains visible because
   touchscreens do not have a normal hover state.
-------------------------------------------------- */

@media (hover: none) {
  .top-games-section .hover-overlay {
    justify-content: center;
    align-items: flex-end;

    padding-bottom: 16px;

    background:
      linear-gradient(
        180deg,
        transparent 48%,
        rgba(4, 18, 34, 0.94) 100%
      );

    opacity: 1;
  }

  .top-games-section .hover-overlay .btn-primary {
    min-width: 100px;
    min-height: 38px;
    padding: 9px 12px !important;

    transform: none;
    opacity: 1;

    font-size: 10px;
  }
}


/* --------------------------------------------------
   REDUCED MOTION
-------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .mrbeast-header *,
  .mrbeast-hero *,
  .top-games-section * {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ==================================================
         MRBEAST HEADER, HERO & TOP GAMES END
================================================== */
/* ==================================================
              MRBEAST LOGO SIZE START
================================================== */

.mrbeast-header .logo img {
  width: 260px !important;
  max-width: none;
  height: auto;
}

@media (max-width: 1199px) {
  .mrbeast-header .logo img {
    width: 225px !important;
  }
}

@media (max-width: 991px) {
  .mrbeast-header .logo img {
    width: 200px !important;
  }
}

@media (max-width: 575px) {
  .mrbeast-header .logo img {
    width: 165px !important;
  }
}

/* ==================================================
               MRBEAST LOGO SIZE END
================================================== */
/* ==================================================
               FIXED HEADER START
================================================== */

html {
  scroll-padding-top: 100px;
}

body.mrbeast-games-page {
  padding-top: 83px !important;
}

header#header.mrbeast-header {
  position: fixed !important;
  top: 0;
  right: 0;
  left: 0;

  width: 100%;
  z-index: 99999;
}

.mrbeast-games-page section[id],
.mrbeast-games-page #home {
  scroll-margin-top: 100px;
}

/* Tablet and mobile */

@media (max-width: 991px) {
  html {
    scroll-padding-top: 90px;
  }

  body.mrbeast-games-page {
    padding-top: 75px !important;
  }

  .mrbeast-games-page section[id],
  .mrbeast-games-page #home {
    scroll-margin-top: 90px;
  }
}

/* ==================================================
                FIXED HEADER END
================================================== */
/* ==================================================
                   BONUSES SECTION START
================================================== */

.mb-rewards {
  --rewards-bg: #08142e;
  --rewards-panel: #111d45;
  --rewards-cyan: #17d9ff;
  --rewards-blue: #2577ff;
  --rewards-pink: #ff3f9f;
  --rewards-purple: #9d5cff;
  --rewards-yellow: #ffd84a;
  --rewards-orange: #ff9e2b;
  --rewards-white: #ffffff;
  --rewards-muted: #aebdde;

  position: relative;
  isolation: isolate;
  overflow: hidden;

  scroll-margin-top: 120px;

  padding: 105px 0 72px;

  background:
    radial-gradient(
      circle at 10% 15%,
      rgba(23, 217, 255, 0.13),
      transparent 28%
    ),
    radial-gradient(
      circle at 88% 26%,
      rgba(255, 63, 159, 0.14),
      transparent 30%
    ),
    radial-gradient(
      circle at 50% 75%,
      rgba(157, 92, 255, 0.09),
      transparent 35%
    ),
    linear-gradient(
      180deg,
      #07162f 0%,
      #0b1230 52%,
      #111239 100%
    );

  color: var(--rewards-white);
}


.mb-rewards *,
.mb-rewards *::before,
.mb-rewards *::after {
  box-sizing: border-box;
}


.mb-rewards::before {
  content: "";

  position: absolute;
  z-index: -2;
  inset: 0;

  opacity: 0.34;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.035) 1px,
      transparent 1px
    );

  background-size: 55px 55px;

  pointer-events: none;
}


.mb-rewards .container {
  position: relative;
  z-index: 2;
}


.mb-rewards__glow {
  position: absolute;
  z-index: -1;

  width: 420px;
  height: 420px;

  border-radius: 50%;

  opacity: 0.18;
  filter: blur(100px);

  pointer-events: none;
}


.mb-rewards__glow--cyan {
  left: -210px;
  top: 500px;

  background: var(--rewards-cyan);
}


.mb-rewards__glow--pink {
  right: -210px;
  top: 1350px;

  background: var(--rewards-pink);
}


/* Bonuses Header
================================================== */

.mb-rewards__header {
  max-width: 900px;

  margin: 0 auto 48px;

  text-align: center;
}


.mb-rewards__eyebrow {
  display: block;

  margin-bottom: 14px;

  color: var(--rewards-cyan);

  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
}


.mb-rewards__header h2 {
  margin: 0 0 21px;

  color: var(--rewards-white);

  font-family: "Montserrat", sans-serif;
  font-size: clamp(41px, 5vw, 68px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -3px;
}


.mb-rewards__header h2 span {
  display: block;

  margin-top: 7px;

  color: var(--rewards-yellow);

  text-shadow:
    4px 5px 0 rgba(255, 63, 159, 0.26);
}


.mb-rewards__header p {
  max-width: 820px;

  margin: 0 auto;

  color: var(--rewards-muted);

  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  font-weight: 500;
}


/* Main Welcome Package
================================================== */

.mb-rewards-hero {
  position: relative;
  overflow: hidden;

  display: grid;
  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(380px, 0.85fr);
  gap: 30px;
  align-items: center;

  min-height: 610px;

  margin-bottom: 88px;
  padding: 55px;

  border:
    2px solid rgba(255, 216, 74, 0.48);

  border-radius: 30px;

  background:
    radial-gradient(
      circle at 88% 18%,
      rgba(255, 63, 159, 0.21),
      transparent 30%
    ),
    radial-gradient(
      circle at 12% 85%,
      rgba(23, 217, 255, 0.17),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      rgba(28, 38, 93, 0.98),
      rgba(55, 25, 92, 0.98)
    );

  box-shadow:
    0 12px 0 rgba(119, 88, 4, 0.8),
    0 35px 80px rgba(0, 0, 0, 0.35);
}


.mb-rewards-hero::before {
  content: "";

  position: absolute;
  left: -85px;
  top: -85px;

  width: 210px;
  height: 210px;

  border:
    30px solid rgba(23, 217, 255, 0.08);

  border-radius: 50%;
}


.mb-rewards-hero__content {
  position: relative;
  z-index: 3;
}


.mb-rewards-hero__label {
  display: block;

  margin-bottom: 15px;

  color: var(--rewards-yellow);

  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 900;
  letter-spacing: 1.7px;
  text-transform: uppercase;
}


.mb-rewards-hero__amount {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 20px;

  margin-bottom: 4px;
}


.mb-rewards-hero__amount strong {
  color: var(--rewards-white);

  font-family: "Montserrat", sans-serif;
  font-size: clamp(76px, 9vw, 125px);
  line-height: 0.83;
  font-weight: 900;
  letter-spacing: -7px;

  text-shadow:
    7px 8px 0 rgba(5, 10, 27, 0.5);
}


.mb-rewards-hero__amount span {
  padding-bottom: 8px;

  color: var(--rewards-yellow);

  font-family: "Montserrat", sans-serif;
  font-size: 24px;
  line-height: 1;
  font-weight: 900;
}


.mb-rewards-hero__spins {
  display: inline-block;

  margin: 12px 0 28px;

  color: var(--rewards-pink);

  font-family: "Montserrat", sans-serif;
  font-size: clamp(25px, 3vw, 39px);
  line-height: 1.05;
  font-weight: 900;

  text-shadow:
    0 0 22px rgba(255, 63, 159, 0.3);
}


.mb-rewards-hero__content h3 {
  max-width: 590px;

  margin: 0 0 16px;

  color: var(--rewards-white);

  font-family: "Montserrat", sans-serif;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 900;
}


.mb-rewards-hero__content > p {
  max-width: 610px;

  margin: 0 0 27px;

  color: rgba(255, 255, 255, 0.76);

  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  line-height: 1.72;
  font-weight: 500;
}


.mb-rewards-hero__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  border-top:
    1px solid rgba(255, 255, 255, 0.12);

  border-bottom:
    1px solid rgba(255, 255, 255, 0.12);
}


.mb-rewards-hero__facts div {
  padding: 16px 13px;

  border-right:
    1px solid rgba(255, 255, 255, 0.12);
}


.mb-rewards-hero__facts div:last-child {
  border-right: 0;
}


.mb-rewards-hero__facts span,
.mb-rewards-hero__facts strong {
  display: block;
}


.mb-rewards-hero__facts span {
  margin-bottom: 5px;

  color: rgba(255, 255, 255, 0.5);

  font-family: "Open Sans", sans-serif;
  font-size: 9px;
  line-height: 1.3;
  font-weight: 700;
  text-transform: uppercase;
}


.mb-rewards-hero__facts strong {
  color: var(--rewards-white);

  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 900;
}


/* Animated Welcome Visual
================================================== */

.mb-rewards-hero__visual {
  position: relative;

  min-height: 480px;
}


.mb-rewards-wheel {
  position: absolute;
  left: 50%;
  top: 50%;

  width: 360px;
  height: 360px;

  border:
    14px solid #23184f;

  border-radius: 50%;

  background:
    conic-gradient(
      var(--rewards-cyan) 0deg 90deg,
      var(--rewards-pink) 90deg 180deg,
      var(--rewards-yellow) 180deg 270deg,
      var(--rewards-purple) 270deg 360deg
    );

  box-shadow:
    0 0 0 7px rgba(255, 255, 255, 0.11),
    0 0 0 13px rgba(255, 216, 74, 0.28),
    0 30px 60px rgba(0, 0, 0, 0.45),
    0 0 48px rgba(23, 217, 255, 0.2);

  transform:
    translate(-50%, -50%)
    rotate(-7deg);

  animation:
    mb-rewards-wheel-float 5s ease-in-out infinite;
}


.mb-rewards-wheel::before,
.mb-rewards-wheel::after {
  content: "";

  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;

  background: rgba(255, 255, 255, 0.7);

  transform:
    translate(-50%, -50%);
}


.mb-rewards-wheel::before {
  width: 5px;
  height: 100%;

  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.34);
}


.mb-rewards-wheel::after {
  width: 100%;
  height: 5px;

  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.34);
}


.mb-rewards-wheel > span {
  position: absolute;
  z-index: 3;

  color: #08142e;

  font-family: "Montserrat", sans-serif;
  font-size: 17px;
  font-weight: 900;
}


.mb-rewards-wheel > span:nth-child(1) {
  right: 62px;
  top: 70px;
}


.mb-rewards-wheel > span:nth-child(2) {
  right: 55px;
  bottom: 75px;
}


.mb-rewards-wheel > span:nth-child(3) {
  left: 58px;
  bottom: 75px;
}


.mb-rewards-wheel > span:nth-child(4) {
  left: 55px;
  top: 70px;
}


.mb-rewards-wheel__centre {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;

  display: grid;
  place-items: center;
  align-content: center;

  width: 138px;
  height: 138px;

  border:
    8px solid rgba(255, 255, 255, 0.2);

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      #192b61,
      #10173a
    );

  box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.48);

  transform:
    translate(-50%, -50%);
}


.mb-rewards-wheel__centre strong {
  color: var(--rewards-white);

  font-family: "Montserrat", sans-serif;
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
}


.mb-rewards-wheel__centre small {
  margin-top: 5px;

  color: var(--rewards-yellow);

  font-family: "Montserrat", sans-serif;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1.3px;
}


.mb-rewards-coin {
  position: absolute;
  z-index: 7;

  display: grid;
  place-items: center;

  width: 90px;
  height: 90px;

  border:
    8px solid #ec9e11;

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      #ffe875,
      #ffb52c
    );

  color: #704100;

  box-shadow:
    0 10px 0 #a86108,
    0 22px 38px rgba(0, 0, 0, 0.35);

  animation:
    mb-rewards-coin-float 3.7s ease-in-out infinite;
}


.mb-rewards-coin strong {
  font-family: "Montserrat", sans-serif;
  font-size: 32px;
  font-weight: 900;
}


.mb-rewards-coin--left {
  left: 10px;
  bottom: 34px;

  transform: rotate(-12deg);
}


.mb-rewards-coin--right {
  right: 0;
  top: 30px;

  background:
    linear-gradient(
      145deg,
      #ff83c2,
      #ff3195
    );

  border-color: #b81c6b;

  color: var(--rewards-white);

  box-shadow:
    0 10px 0 #711343,
    0 22px 38px rgba(0, 0, 0, 0.35);

  animation-delay: -1.4s;
}


.mb-rewards-hero__spark {
  position: absolute;
  z-index: 8;

  color: var(--rewards-yellow);

  font-size: 27px;

  text-shadow:
    0 0 18px rgba(255, 216, 74, 0.7);

  animation:
    mb-rewards-spark 2.8s ease-in-out infinite;
}


.mb-rewards-hero__spark--one {
  left: 12%;
  top: 11%;
}


.mb-rewards-hero__spark--two {
  right: 7%;
  bottom: 11%;

  color: var(--rewards-cyan);

  animation-delay: -1s;
}


.mb-rewards-hero__spark--three {
  left: 9%;
  bottom: 38%;

  color: var(--rewards-pink);

  font-size: 18px;

  animation-delay: -1.8s;
}


/* Section Subheadings
================================================== */

.mb-rewards-subheading {
  max-width: 810px;

  margin: 0 auto 39px;

  text-align: center;
}


.mb-rewards-subheading > span {
  display: block;

  margin-bottom: 10px;

  color: var(--rewards-cyan);

  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  line-height: 1.3;
  font-weight: 900;
  letter-spacing: 1.7px;
  text-transform: uppercase;
}


.mb-rewards-subheading h3 {
  margin: 0 0 15px;

  color: var(--rewards-white);

  font-family: "Montserrat", sans-serif;
  font-size: clamp(33px, 4vw, 52px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -2px;
}


.mb-rewards-subheading p {
  margin: 0;

  color: var(--rewards-muted);

  font-family: "Open Sans", sans-serif;
  font-size: 15px;
  line-height: 1.72;
  font-weight: 500;
}


.mb-rewards-subheading--weekly {
  margin-top: 91px;
}


.mb-rewards-subheading--weekly > span {
  color: var(--rewards-pink);
}


/* Welcome Deposit Cards
================================================== */

.mb-rewards-deposits {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 18px;
}


.mb-deposit-card {
  position: relative;
  overflow: hidden;

  display: flex;
  flex-direction: column;

  min-height: 440px;

  padding: 28px;

  border:
    1px solid rgba(23, 217, 255, 0.25);

  border-radius: 23px;

  background:
    linear-gradient(
      155deg,
      rgba(14, 52, 78, 0.88),
      rgba(10, 24, 56, 0.97)
    );

  box-shadow:
    0 24px 55px rgba(0, 0, 0, 0.25);

  cursor: default;
}


.mb-deposit-card::before {
  content: "";

  position: absolute;
  left: 0;
  top: 0;

  width: 100%;
  height: 5px;

  background: var(--rewards-cyan);
}


.mb-deposit-card::after {
  content: "";

  position: absolute;
  right: -80px;
  bottom: -90px;

  width: 210px;
  height: 210px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(23, 217, 255, 0.15),
      transparent 68%
    );
}


.mb-deposit-card--pink {
  border-color:
    rgba(255, 63, 159, 0.25);

  background:
    linear-gradient(
      155deg,
      rgba(79, 25, 74, 0.85),
      rgba(30, 21, 65, 0.97)
    );
}


.mb-deposit-card--pink::before {
  background: var(--rewards-pink);
}


.mb-deposit-card--pink::after {
  background:
    radial-gradient(
      circle,
      rgba(255, 63, 159, 0.16),
      transparent 68%
    );
}


.mb-deposit-card--purple {
  border-color:
    rgba(157, 92, 255, 0.27);

  background:
    linear-gradient(
      155deg,
      rgba(58, 33, 102, 0.9),
      rgba(27, 22, 66, 0.97)
    );
}


.mb-deposit-card--purple::before {
  background: var(--rewards-purple);
}


.mb-deposit-card--purple::after {
  background:
    radial-gradient(
      circle,
      rgba(157, 92, 255, 0.17),
      transparent 68%
    );
}


.mb-deposit-card--yellow {
  border-color:
    rgba(255, 216, 74, 0.28);

  background:
    linear-gradient(
      155deg,
      rgba(83, 61, 20, 0.82),
      rgba(34, 26, 56, 0.97)
    );
}


.mb-deposit-card--yellow::before {
  background: var(--rewards-yellow);
}


.mb-deposit-card--yellow::after {
  background:
    radial-gradient(
      circle,
      rgba(255, 216, 74, 0.15),
      transparent 68%
    );
}


.mb-deposit-card__stage {
  position: relative;
  z-index: 2;

  display: block;

  margin-bottom: 23px;

  color: var(--rewards-cyan);

  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  line-height: 1.3;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}


.mb-deposit-card--pink
.mb-deposit-card__stage {
  color: var(--rewards-pink);
}


.mb-deposit-card--purple
.mb-deposit-card__stage {
  color: #ba91ff;
}


.mb-deposit-card--yellow
.mb-deposit-card__stage {
  color: var(--rewards-yellow);
}


.mb-deposit-card__percent {
  position: relative;
  z-index: 2;

  display: block;

  color: var(--rewards-white);

  font-family: "Montserrat", sans-serif;
  font-size: 55px;
  line-height: 0.95;
  font-weight: 900;
  letter-spacing: -3px;
}


.mb-deposit-card__limit {
  position: relative;
  z-index: 2;

  display: block;

  margin: 7px 0 14px;

  color: rgba(255, 255, 255, 0.67);

  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: 800;
}


.mb-deposit-card__spins {
  position: relative;
  z-index: 2;

  margin-bottom: 22px;

  color: var(--rewards-yellow);

  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 900;
}


.mb-deposit-card p {
  position: relative;
  z-index: 2;

  margin: 0 0 24px;

  color: var(--rewards-muted);

  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  line-height: 1.68;
  font-weight: 500;
}


.mb-deposit-card__info {
  position: relative;
  z-index: 2;

  display: grid;
  gap: 8px;

  margin-top: auto;
}


.mb-deposit-card__info span {
  position: relative;

  padding-left: 16px;

  color: rgba(255, 255, 255, 0.75);

  font-family: "Open Sans", sans-serif;
  font-size: 10px;
  line-height: 1.45;
  font-weight: 700;
}


.mb-deposit-card__info span::before {
  content: "";

  position: absolute;
  left: 0;
  top: 6px;

  width: 6px;
  height: 6px;

  border-radius: 2px;

  background: var(--rewards-cyan);

  transform: rotate(45deg);
}


.mb-deposit-card--pink
.mb-deposit-card__info span::before {
  background: var(--rewards-pink);
}


.mb-deposit-card--purple
.mb-deposit-card__info span::before {
  background: var(--rewards-purple);
}


.mb-deposit-card--yellow
.mb-deposit-card__info span::before {
  background: var(--rewards-yellow);
}


/* Weekly Rewards
================================================== */

.mb-weekly-rewards {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 18px;

  margin-bottom: 82px;
}


.mb-weekly-card {
  position: relative;
  overflow: hidden;

  min-height: 335px;

  padding: 28px;

  border:
    1px solid rgba(157, 92, 255, 0.25);

  border-radius: 22px;

  background:
    linear-gradient(
      155deg,
      rgba(53, 30, 94, 0.87),
      rgba(24, 22, 62, 0.98)
    );

  box-shadow:
    0 22px 50px rgba(0, 0, 0, 0.24);

  cursor: default;
}


.mb-weekly-card::after {
  content: "";

  position: absolute;
  right: -60px;
  top: -60px;

  width: 160px;
  height: 160px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(157, 92, 255, 0.25),
      transparent 67%
    );
}


.mb-weekly-card--cyan {
  border-color:
    rgba(23, 217, 255, 0.25);

  background:
    linear-gradient(
      155deg,
      rgba(13, 64, 88, 0.85),
      rgba(12, 27, 63, 0.98)
    );
}


.mb-weekly-card--pink {
  border-color:
    rgba(255, 63, 159, 0.26);

  background:
    linear-gradient(
      155deg,
      rgba(82, 27, 84, 0.88),
      rgba(34, 22, 67, 0.98)
    );
}


.mb-weekly-card--yellow {
  border-color:
    rgba(255, 216, 74, 0.28);

  background:
    linear-gradient(
      155deg,
      rgba(82, 62, 19, 0.82),
      rgba(35, 26, 61, 0.98)
    );
}


.mb-weekly-card__day {
  position: relative;
  z-index: 2;

  display: block;

  margin-bottom: 25px;

  color: #bc98ff;

  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  line-height: 1.3;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}


.mb-weekly-card--cyan
.mb-weekly-card__day {
  color: var(--rewards-cyan);
}


.mb-weekly-card--pink
.mb-weekly-card__day {
  color: var(--rewards-pink);
}


.mb-weekly-card--yellow
.mb-weekly-card__day {
  color: var(--rewards-yellow);
}


.mb-weekly-card__value {
  position: relative;
  z-index: 2;

  color: var(--rewards-white);

  font-family: "Montserrat", sans-serif;
  font-size: 54px;
  line-height: 0.95;
  font-weight: 900;
  letter-spacing: -3px;
}


.mb-weekly-card > strong {
  position: relative;
  z-index: 2;

  display: block;

  margin: 8px 0 20px;

  color: var(--rewards-yellow);

  font-family: "Montserrat", sans-serif;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 900;
}


.mb-weekly-card p {
  position: relative;
  z-index: 2;

  margin: 0 0 20px;

  color: var(--rewards-muted);

  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  line-height: 1.65;
  font-weight: 500;
}


.mb-weekly-card__note {
  position: relative;
  z-index: 2;

  display: block;

  padding-top: 13px;

  border-top:
    1px solid rgba(255, 255, 255, 0.1);

  color: rgba(255, 255, 255, 0.48);

  font-family: "Open Sans", sans-serif;
  font-size: 9px;
  line-height: 1.45;
  font-weight: 700;
}


/* Extra Rewards
================================================== */

.mb-extra-rewards {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 20px;

  margin-bottom: 76px;
}


.mb-extra-card {
  position: relative;
  overflow: hidden;

  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 25px;
  align-items: start;

  min-height: 325px;

  padding: 38px;

  border:
    1px solid rgba(23, 217, 255, 0.23);

  border-radius: 26px;

  background:
    radial-gradient(
      circle at 100% 0,
      rgba(23, 217, 255, 0.14),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      rgba(15, 49, 79, 0.92),
      rgba(12, 25, 59, 0.98)
    );

  box-shadow:
    0 25px 58px rgba(0, 0, 0, 0.28);

  cursor: default;
}


.mb-extra-card--wheel {
  border-color:
    rgba(255, 63, 159, 0.24);

  background:
    radial-gradient(
      circle at 100% 0,
      rgba(255, 63, 159, 0.16),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      rgba(69, 28, 85, 0.93),
      rgba(27, 23, 65, 0.98)
    );
}


.mb-extra-card__icon {
  display: grid;
  place-items: center;

  width: 88px;
  height: 88px;

  border:
    7px solid rgba(23, 217, 255, 0.25);

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      var(--rewards-cyan),
      var(--rewards-blue)
    );

  color: #07142d;

  font-size: 39px;
  font-weight: 900;

  box-shadow:
    0 9px 0 #0b6d9d,
    0 20px 35px rgba(0, 0, 0, 0.3);
}


.mb-extra-card--wheel
.mb-extra-card__icon {
  border-color:
    rgba(255, 216, 74, 0.33);

  background:
    linear-gradient(
      145deg,
      var(--rewards-yellow),
      var(--rewards-orange)
    );

  color: #634000;

  box-shadow:
    0 9px 0 #a86408,
    0 20px 35px rgba(0, 0, 0, 0.3);
}


.mb-extra-card__content {
  position: relative;
  z-index: 2;
}


.mb-extra-card__content > span {
  display: block;

  margin-bottom: 8px;

  color: var(--rewards-cyan);

  font-family: "Montserrat", sans-serif;
  font-size: 9px;
  line-height: 1.3;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}


.mb-extra-card--wheel
.mb-extra-card__content > span {
  color: var(--rewards-yellow);
}


.mb-extra-card h3 {
  margin: 0 0 15px;

  color: var(--rewards-white);

  font-family: "Montserrat", sans-serif;
  font-size: 26px;
  line-height: 1.13;
  font-weight: 900;
}


.mb-extra-card p {
  margin: 0 0 22px;

  color: var(--rewards-muted);

  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  line-height: 1.68;
  font-weight: 500;
}


.mb-extra-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}


.mb-extra-card__facts span {
  position: relative;

  padding-left: 14px;

  color: rgba(255, 255, 255, 0.72);

  font-family: "Open Sans", sans-serif;
  font-size: 10px;
  line-height: 1.4;
  font-weight: 700;
}


.mb-extra-card__facts span::before {
  content: "";

  position: absolute;
  left: 0;
  top: 5px;

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: var(--rewards-cyan);
}


.mb-extra-card--wheel
.mb-extra-card__facts span::before {
  background: var(--rewards-yellow);
}


/* Moving Rewards Strip
================================================== */

.mb-rewards-ticker {
  position: relative;
  z-index: 3;
  overflow: hidden;

  margin-bottom: 52px;
  padding: 19px 0;

  border-top:
    1px solid rgba(23, 217, 255, 0.22);

  border-bottom:
    1px solid rgba(255, 63, 159, 0.22);

  background:
    linear-gradient(
      90deg,
      rgba(23, 217, 255, 0.07),
      rgba(255, 63, 159, 0.08),
      rgba(23, 217, 255, 0.07)
    );
}


.mb-rewards-ticker__track {
  display: flex;
  align-items: center;
  gap: 27px;

  width: max-content;

  animation:
    mb-rewards-ticker 29s linear infinite;
}


.mb-rewards-ticker__track span {
  color: rgba(255, 255, 255, 0.84);

  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;

  white-space: nowrap;
}


.mb-rewards-ticker__track i {
  color: var(--rewards-yellow);

  font-size: 12px;
  font-style: normal;

  text-shadow:
    0 0 15px rgba(255, 216, 74, 0.65);
}


/* Bonus Notice
================================================== */

.mb-rewards-notice {
  display: flex;
  align-items: flex-start;
  gap: 15px;

  max-width: 980px;

  margin: 0 auto;
  padding: 20px 23px;

  border:
    1px solid rgba(255, 255, 255, 0.1);

  border-radius: 16px;

  background:
    rgba(255, 255, 255, 0.045);
}


.mb-rewards-notice > span {
  display: grid;
  flex: 0 0 28px;
  place-items: center;

  width: 28px;
  height: 28px;

  border-radius: 50%;

  background:
    rgba(255, 216, 74, 0.14);

  color: var(--rewards-yellow);

  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: 900;
}


.mb-rewards-notice p {
  margin: 0;

  color: rgba(255, 255, 255, 0.55);

  font-family: "Open Sans", sans-serif;
  font-size: 10px;
  line-height: 1.65;
  font-weight: 600;
}


/* Bonus Animations
================================================== */

@keyframes mb-rewards-wheel-float {

  0%,
  100% {
    transform:
      translate(-50%, -50%)
      rotate(-7deg);
  }

  50% {
    transform:
      translate(-50%, calc(-50% - 12px))
      rotate(1deg);
  }

}


@keyframes mb-rewards-coin-float {

  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -14px;
  }

}


@keyframes mb-rewards-spark {

  0%,
  100% {
    opacity: 0.45;
    transform:
      scale(0.85)
      rotate(0deg);
  }

  50% {
    opacity: 1;
    transform:
      scale(1.15)
      rotate(18deg);
  }

}


@keyframes mb-rewards-ticker {

  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }

}


/* Bonus Responsive
================================================== */

@media (max-width: 1199px) {

  .mb-rewards-hero {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(330px, 0.75fr);

    padding: 45px;
  }


  .mb-rewards-wheel {
    width: 310px;
    height: 310px;
  }


  .mb-rewards-wheel__centre {
    width: 120px;
    height: 120px;
  }


  .mb-rewards-deposits,
  .mb-weekly-rewards {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .mb-deposit-card {
    min-height: 390px;
  }

}


@media (max-width: 991px) {

  .mb-rewards {
    padding-top: 85px;
  }


  .mb-rewards-hero {
    grid-template-columns: 1fr;
  }


  .mb-rewards-hero__visual {
    min-height: 440px;
  }


  .mb-extra-rewards {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 767px) {

  .mb-rewards__header h2 {
    letter-spacing: -2px;
  }


  .mb-rewards-hero {
    padding: 33px 27px;
  }


  .mb-rewards-hero__amount strong {
    font-size: 78px;
    letter-spacing: -5px;
  }


  .mb-rewards-hero__amount span {
    font-size: 18px;
  }


  .mb-rewards-hero__facts {
    grid-template-columns: 1fr;
  }


  .mb-rewards-hero__facts div {
    border-right: 0;
    border-bottom:
      1px solid rgba(255, 255, 255, 0.1);
  }


  .mb-rewards-hero__facts div:last-child {
    border-bottom: 0;
  }


  .mb-rewards-hero__visual {
    min-height: 390px;
  }


  .mb-rewards-wheel {
    width: 275px;
    height: 275px;
  }


  .mb-rewards-wheel > span {
    font-size: 14px;
  }


  .mb-rewards-wheel > span:nth-child(1) {
    right: 47px;
    top: 54px;
  }


  .mb-rewards-wheel > span:nth-child(2) {
    right: 42px;
    bottom: 56px;
  }


  .mb-rewards-wheel > span:nth-child(3) {
    left: 44px;
    bottom: 57px;
  }


  .mb-rewards-wheel > span:nth-child(4) {
    left: 42px;
    top: 55px;
  }


  .mb-rewards-coin {
    width: 70px;
    height: 70px;
  }


  .mb-rewards-coin strong {
    font-size: 24px;
  }


  .mb-rewards-deposits,
  .mb-weekly-rewards {
    grid-template-columns: 1fr;
  }


  .mb-deposit-card,
  .mb-weekly-card {
    min-height: auto;
  }


  .mb-extra-card {
    grid-template-columns: 1fr;
  }


  .mb-extra-card__icon {
    width: 74px;
    height: 74px;
  }

}


@media (max-width: 480px) {

  .mb-rewards {
    padding-top: 72px;
  }


  .mb-rewards__header h2 {
    font-size: 38px;
  }


  .mb-rewards__header p,
  .mb-rewards-subheading p {
    font-size: 14px;
  }


  .mb-rewards-hero {
    border-radius: 23px;
  }


  .mb-rewards-hero__amount strong {
    font-size: 68px;
  }


  .mb-rewards-hero__visual {
    min-height: 340px;
  }


  .mb-rewards-wheel {
    width: 235px;
    height: 235px;

    border-width: 10px;
  }


  .mb-rewards-wheel__centre {
    width: 92px;
    height: 92px;
  }


  .mb-rewards-wheel__centre strong {
    font-size: 22px;
  }


  .mb-rewards-wheel > span {
    font-size: 11px;
  }


  .mb-rewards-wheel > span:nth-child(1) {
    right: 42px;
    top: 45px;
  }


  .mb-rewards-wheel > span:nth-child(2) {
    right: 37px;
    bottom: 47px;
  }


  .mb-rewards-wheel > span:nth-child(3) {
    left: 37px;
    bottom: 47px;
  }


  .mb-rewards-wheel > span:nth-child(4) {
    left: 37px;
    top: 46px;
  }


  .mb-rewards-coin {
    width: 59px;
    height: 59px;

    border-width: 5px;
  }


  .mb-rewards-coin--left {
    left: -6px;
  }


  .mb-rewards-coin--right {
    right: -8px;
  }


  .mb-deposit-card,
  .mb-weekly-card,
  .mb-extra-card {
    padding: 24px;
  }


  .mb-rewards-notice {
    padding: 17px;
  }

}


@media (prefers-reduced-motion: reduce) {

  .mb-rewards *,
  .mb-rewards *::before,
  .mb-rewards *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

}

/* ==================================================
                    BONUSES SECTION END
================================================== */
/* ==================================================
              CASINO GAMES LIBRARY START
================================================== */

.mb-library {
  --lib-bg: #07142d;
  --lib-panel: #0d2041;
  --lib-cyan: #18d9ff;
  --lib-pink: #ff3f9f;
  --lib-yellow: #ffd84a;
  --lib-purple: #9b61ff;
  --lib-green: #25dda0;
  --lib-white: #ffffff;
  --lib-muted: #aebdd8;

  position: relative;
  isolation: isolate;
  overflow: hidden;

  padding: 95px 0 105px;

  background:
    radial-gradient(
      circle at 8% 12%,
      rgba(24, 217, 255, 0.12),
      transparent 28%
    ),
    radial-gradient(
      circle at 92% 32%,
      rgba(255, 63, 159, 0.11),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #07142d 0%,
      #0a1532 50%,
      #101338 100%
    );

  color: var(--lib-white);
}


.mb-library *,
.mb-library *::before,
.mb-library *::after {
  box-sizing: border-box;
}


.mb-library::before {
  content: "";

  position: absolute;
  z-index: -2;
  inset: 0;

  opacity: 0.25;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.035) 1px,
      transparent 1px
    );

  background-size: 48px 48px;
}


.mb-library .container {
  position: relative;
  z-index: 2;
}


.mb-library__orb {
  position: absolute;
  z-index: -1;

  width: 420px;
  height: 420px;

  border-radius: 50%;

  opacity: 0.15;
  filter: blur(100px);

  pointer-events: none;
}


.mb-library__orb--cyan {
  left: -220px;
  top: 600px;

  background: var(--lib-cyan);
}


.mb-library__orb--pink {
  right: -220px;
  top: 1450px;

  background: var(--lib-pink);
}


/* Library Header
================================================== */

.mb-library__header {
  max-width: 920px;

  margin: 0 auto 38px;

  text-align: center;
}


.mb-library__eyebrow {
  display: block;

  margin-bottom: 12px;

  color: var(--lib-cyan);

  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
}


.mb-library__header h2 {
  margin: 0 0 20px;

  color: var(--lib-white);

  font-family: "Montserrat", sans-serif;
  font-size: clamp(41px, 5vw, 67px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -3px;
}


.mb-library__header h2 span {
  display: block;

  margin-top: 7px;

  color: var(--lib-yellow);

  text-shadow:
    4px 5px 0 rgba(255, 63, 159, 0.24);
}


.mb-library__header p {
  max-width: 840px;

  margin: 0 auto;

  color: var(--lib-muted);

  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  line-height: 1.74;
  font-weight: 500;
}


/* Library Overview
================================================== */

.mb-library__overview {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 14px;

  margin-bottom: 42px;
}


.mb-library__overview article {
  display: flex;
  align-items: center;
  gap: 13px;

  min-height: 85px;

  padding: 16px;

  border:
    1px solid rgba(255, 255, 255, 0.09);

  border-radius: 17px;

  background:
    rgba(255, 255, 255, 0.04);

  cursor: default;
}


.mb-library__overview article > span {
  display: grid;
  flex: 0 0 45px;
  place-items: center;

  width: 45px;
  height: 45px;

  border-radius: 13px;

  background:
    rgba(24, 217, 255, 0.12);

  color: var(--lib-cyan);

  font-family: "Montserrat", sans-serif;
  font-size: 17px;
  font-weight: 900;
}


.mb-library__overview article:nth-child(2) > span {
  background:
    rgba(255, 63, 159, 0.12);

  color: var(--lib-pink);
}


.mb-library__overview article:nth-child(3) > span {
  background:
    rgba(255, 216, 74, 0.12);

  color: var(--lib-yellow);
}


.mb-library__overview article:nth-child(4) > span {
  background:
    rgba(155, 97, 255, 0.12);

  color: var(--lib-purple);
}


.mb-library__overview strong {
  display: block;

  margin-bottom: 3px;

  color: var(--lib-white);

  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 900;
}


.mb-library__overview p {
  margin: 0;

  color: var(--lib-muted);

  font-family: "Open Sans", sans-serif;
  font-size: 9px;
  line-height: 1.4;
  font-weight: 600;
}


/* Library Ticker
================================================== */

.mb-library__ticker {
  position: relative;
  z-index: 3;
  overflow: hidden;

  margin-bottom: 35px;
  padding: 16px 0;

  border-top:
    1px solid rgba(24, 217, 255, 0.2);

  border-bottom:
    1px solid rgba(255, 63, 159, 0.2);

  background:
    rgba(255, 255, 255, 0.025);
}


.mb-library__ticker-track {
  display: flex;
  align-items: center;
  gap: 25px;

  width: max-content;

  animation:
    mbLibraryTicker 28s linear infinite;
}


.mb-library__ticker-track span {
  color: rgba(255, 255, 255, 0.78);

  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;

  white-space: nowrap;
}


.mb-library__ticker-track i {
  color: var(--lib-yellow);

  font-size: 11px;
  font-style: normal;
}


/* Library Zones
================================================== */

.mb-library-zone {
  position: relative;

  scroll-margin-top: 120px;

  margin-bottom: 27px;
  padding: 38px;

  border:
    1px solid rgba(24, 217, 255, 0.2);

  border-radius: 27px;

  background:
    radial-gradient(
      circle at 100% 0,
      rgba(24, 217, 255, 0.1),
      transparent 30%
    ),
    rgba(8, 29, 57, 0.88);

  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.27);
}


.mb-library-zone--live {
  border-color:
    rgba(255, 63, 159, 0.2);

  background:
    radial-gradient(
      circle at 100% 0,
      rgba(255, 63, 159, 0.11),
      transparent 30%
    ),
    rgba(31, 23, 64, 0.89);
}


.mb-library-zone--tables {
  border-color:
    rgba(37, 221, 160, 0.2);

  background:
    radial-gradient(
      circle at 100% 0,
      rgba(37, 221, 160, 0.1),
      transparent 30%
    ),
    rgba(10, 42, 55, 0.89);
}


.mb-library-zone--instant {
  margin-bottom: 0;

  border-color:
    rgba(155, 97, 255, 0.22);

  background:
    radial-gradient(
      circle at 100% 0,
      rgba(155, 97, 255, 0.12),
      transparent 30%
    ),
    rgba(28, 22, 65, 0.91);
}


.mb-library-zone__header {
  display: grid;
  grid-template-columns:
    minmax(280px, 0.8fr)
    minmax(420px, 1.2fr);
  gap: 40px;
  align-items: end;

  margin-bottom: 27px;
}


.mb-library-zone__header div > span {
  display: block;

  margin-bottom: 7px;

  color: var(--lib-cyan);

  font-family: "Montserrat", sans-serif;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}


.mb-library-zone--live
.mb-library-zone__header div > span {
  color: var(--lib-pink);
}


.mb-library-zone--tables
.mb-library-zone__header div > span {
  color: var(--lib-green);
}


.mb-library-zone--instant
.mb-library-zone__header div > span {
  color: #bd95ff;
}


.mb-library-zone__header h2 {
  margin: 0;

  color: var(--lib-white);

  font-family: "Montserrat", sans-serif;
  font-size: clamp(31px, 3.5vw, 45px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -1.6px;
}


.mb-library-zone__header p {
  margin: 0;

  color: var(--lib-muted);

  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  line-height: 1.65;
  font-weight: 500;
}


/* Shared Game Grid
================================================== */

.mb-library-grid {
  display: grid;
  grid-template-columns:
    repeat(6, minmax(0, 1fr));
  gap: 14px;
}


.mb-library-card {
  position: relative;
  overflow: hidden;

  border:
    1px solid rgba(255, 255, 255, 0.1);

  border-radius: 17px;

  background:
    rgba(5, 16, 37, 0.79);

  box-shadow:
    0 16px 33px rgba(0, 0, 0, 0.24);

  cursor: default;
}


.mb-library-card__media {
  position: relative;
  overflow: hidden;

  aspect-ratio: 2 / 3;

  background: #050d1d;
}


.mb-library-card__media::after {
  content: "";

  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;

  height: 28%;

  background:
    linear-gradient(
      transparent,
      rgba(4, 12, 28, 0.83)
    );
}


.mb-library-card__media img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center top;
}


.mb-library-card__media > span {
  position: absolute;
  z-index: 2;
  left: 10px;
  top: 10px;

  color: var(--lib-white);

  font-family: "Montserrat", sans-serif;
  font-size: 7px;
  line-height: 1.3;
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;

  text-shadow:
    0 2px 7px rgba(0, 0, 0, 0.85);
}


.mb-library-card__content {
  min-height: 92px;

  padding: 13px;
}


.mb-library-card__content h3 {
  margin: 0 0 5px;

  color: var(--lib-white);

  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 900;
}


.mb-library-card__content p {
  margin: 0;

  color: var(--lib-muted);

  font-family: "Open Sans", sans-serif;
  font-size: 8px;
  line-height: 1.45;
  font-weight: 600;
}


/* Instant Games
================================================== */

.mb-quick-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 14px;

  margin-bottom: 18px;
}


.mb-quick-card {
  overflow: hidden;

  min-height: 250px;

  border:
    1px solid rgba(24, 217, 255, 0.18);

  border-radius: 19px;

  background:
    linear-gradient(
      150deg,
      rgba(13, 60, 87, 0.9),
      rgba(8, 23, 55, 0.97)
    );

  cursor: default;
}


.mb-quick-card--plinko {
  border-color:
    rgba(255, 63, 159, 0.2);

  background:
    linear-gradient(
      150deg,
      rgba(75, 27, 79, 0.88),
      rgba(29, 21, 62, 0.97)
    );
}


.mb-quick-card--mines {
  border-color:
    rgba(255, 216, 74, 0.2);

  background:
    linear-gradient(
      150deg,
      rgba(76, 57, 20, 0.86),
      rgba(32, 25, 58, 0.97)
    );
}


.mb-quick-card--limbo {
  border-color:
    rgba(155, 97, 255, 0.21);

  background:
    linear-gradient(
      150deg,
      rgba(56, 34, 101, 0.9),
      rgba(26, 22, 63, 0.97)
    );
}


.mb-quick-card__visual {
  display: grid;
  place-items: center;
  align-content: center;

  min-height: 135px;

  border-bottom:
    1px solid rgba(255, 255, 255, 0.08);

  background:
    radial-gradient(
      circle,
      rgba(24, 217, 255, 0.15),
      transparent 65%
    );
}


.mb-quick-card__visual > span {
  margin-bottom: 5px;

  color: var(--lib-yellow);

  font-size: 28px;
}


.mb-quick-card__visual strong {
  color: var(--lib-white);

  font-family: "Montserrat", sans-serif;
  font-size: 22px;
  line-height: 1;
  font-weight: 900;
}


.mb-quick-card__content {
  padding: 17px;
}


.mb-quick-card__content > span {
  display: block;

  margin-bottom: 5px;

  color: var(--lib-cyan);

  font-family: "Montserrat", sans-serif;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}


.mb-quick-card__content h3 {
  margin: 0 0 7px;

  color: var(--lib-white);

  font-family: "Montserrat", sans-serif;
  font-size: 17px;
  font-weight: 900;
}


.mb-quick-card__content p {
  margin: 0;

  color: var(--lib-muted);

  font-family: "Open Sans", sans-serif;
  font-size: 9px;
  line-height: 1.52;
  font-weight: 600;
}


/* Compact Jackpot
================================================== */

.mb-jackpot-compact {
  display: grid;
  grid-template-columns:
    minmax(260px, 0.7fr)
    minmax(500px, 1.3fr);
  gap: 32px;
  align-items: center;

  min-height: 330px;

  padding: 32px;

  border:
    1px solid rgba(255, 216, 74, 0.27);

  border-radius: 23px;

  background:
    radial-gradient(
      circle at 0 50%,
      rgba(255, 216, 74, 0.11),
      transparent 36%
    ),
    rgba(37, 25, 69, 0.91);
}


.mb-jackpot-compact__visual {
  position: relative;

  display: grid;
  place-items: center;

  min-height: 250px;
}


.mb-jackpot-compact__ring {
  position: absolute;

  width: 225px;
  height: 225px;

  border:
    4px dashed rgba(255, 216, 74, 0.35);

  border-radius: 50%;

  box-shadow:
    0 0 0 15px rgba(255, 63, 159, 0.06),
    0 0 45px rgba(255, 216, 74, 0.12);

  animation:
    mbLibraryRing 17s linear infinite;
}


.mb-jackpot-compact__visual > div {
  position: relative;
  z-index: 2;

  display: grid;
  place-items: center;
  align-content: center;

  width: 170px;
  height: 170px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 35% 30%,
      #6a42ab,
      #241951 69%
    );

  box-shadow:
    0 0 0 7px rgba(255, 216, 74, 0.22),
    0 18px 37px rgba(0, 0, 0, 0.37);
}


.mb-jackpot-compact__visual small {
  color: var(--lib-yellow);

  font-family: "Montserrat", sans-serif;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}


.mb-jackpot-compact__visual strong {
  margin: 5px 0;

  color: var(--lib-white);

  font-family: "Montserrat", sans-serif;
  font-size: 23px;
  font-weight: 900;
  text-transform: uppercase;
}


.mb-jackpot-compact__visual div > span {
  color: var(--lib-cyan);

  font-family: "Montserrat", sans-serif;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}


.mb-jackpot-compact__content > span {
  display: block;

  margin-bottom: 7px;

  color: var(--lib-yellow);

  font-family: "Montserrat", sans-serif;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}


.mb-jackpot-compact__content h3 {
  margin: 0 0 12px;

  color: var(--lib-white);

  font-family: "Montserrat", sans-serif;
  font-size: 31px;
  font-weight: 900;
}


.mb-jackpot-compact__content > p {
  margin: 0 0 19px;

  color: var(--lib-muted);

  font-family: "Open Sans", sans-serif;
  font-size: 11px;
  line-height: 1.65;
  font-weight: 500;
}


.mb-jackpot-compact__types {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 9px;
}


.mb-jackpot-compact__types div {
  padding: 11px;

  border:
    1px solid rgba(255, 255, 255, 0.08);

  border-radius: 11px;

  background:
    rgba(255, 255, 255, 0.035);
}


.mb-jackpot-compact__types strong,
.mb-jackpot-compact__types span {
  display: block;
}


.mb-jackpot-compact__types strong {
  margin-bottom: 3px;

  color: var(--lib-white);

  font-family: "Montserrat", sans-serif;
  font-size: 9px;
  font-weight: 900;
}


.mb-jackpot-compact__types span {
  color: var(--lib-muted);

  font-family: "Open Sans", sans-serif;
  font-size: 7px;
  font-weight: 600;
}


/* Animations
================================================== */

@keyframes mbLibraryTicker {

  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }

}


@keyframes mbLibraryRing {

  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }

}


/* Responsive
================================================== */

@media (max-width: 1199px) {

  .mb-library-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }


  .mb-quick-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


@media (max-width: 991px) {

  .mb-library {
    padding:
      80px 0 90px;
  }


  .mb-library__overview {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .mb-library-zone__header {
    grid-template-columns: 1fr;
    gap: 12px;
  }


  .mb-jackpot-compact {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 767px) {

  .mb-library__header h2 {
    letter-spacing: -2px;
  }


  .mb-library__header p {
    font-size: 14px;
  }


  .mb-library-zone {
    padding: 25px;
  }


  .mb-library-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .mb-library-card__content {
    min-height: 84px;
  }


  .mb-jackpot-compact {
    padding: 24px;
  }

}


@media (max-width: 480px) {

  .mb-library {
    padding:
      68px 0 75px;
  }


  .mb-library__header h2 {
    font-size: 37px;
  }


  .mb-library__overview {
    grid-template-columns: 1fr;
  }


  .mb-library-zone {
    padding:
      22px 16px;
  }


  .mb-library-zone__header h2 {
    font-size: 31px;
  }


  .mb-library-card__content {
    padding: 10px;
  }


  .mb-library-card__content h3 {
    font-size: 10px;
  }


  .mb-quick-grid {
    grid-template-columns: 1fr;
  }


  .mb-jackpot-compact__types {
    grid-template-columns: 1fr;
  }

}


@media (prefers-reduced-motion: reduce) {

  .mb-library *,
  .mb-library *::before,
  .mb-library *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

}

/* ==================================================
               CASINO GAMES LIBRARY END
================================================== */

/* ==================================================
          REWARDS & VIP PROGRAMME START
================================================== */

.mb-rewards {
  position: relative;
  padding: 110px 0 95px;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 10% 20%,
      rgba(0, 214, 255, 0.16),
      transparent 32%
    ),
    radial-gradient(
      circle at 90% 35%,
      rgba(255, 51, 180, 0.15),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      #07172c 0%,
      #10153c 52%,
      #21134d 100%
    );
  overflow: hidden;
  isolation: isolate;
  scroll-margin-top: 110px;
}

.mb-rewards::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.22;
  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.055) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.055) 1px,
      transparent 1px
    );
  background-size: 54px 54px;
}

.mb-rewards::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -260px;
  width: 760px;
  height: 500px;
  z-index: -1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(116, 61, 255, 0.2);
  filter: blur(90px);
}

.mb-rewards__glow {
  position: absolute;
  z-index: -1;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  filter: blur(75px);
  pointer-events: none;
}

.mb-rewards__glow--cyan {
  top: 170px;
  left: -180px;
  background: rgba(0, 214, 255, 0.24);
}

.mb-rewards__glow--pink {
  top: 260px;
  right: -190px;
  background: rgba(255, 41, 173, 0.21);
}

/* Heading */

.mb-rewards__header {
  max-width: 830px;
  margin: 0 auto 48px;
  text-align: center;
}

.mb-rewards__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 15px;
  color: #21d9ff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 2.2px;
}

.mb-rewards__eyebrow::before,
.mb-rewards__eyebrow::after {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.mb-rewards__header h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(40px, 5vw, 66px);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -2.2px;
}

.mb-rewards__header h2 span {
  display: block;
  margin-top: 8px;
  color: #ffd43b;
}

.mb-rewards__intro {
  max-width: 720px;
  margin: 24px auto 0;
  color: #afbed7;
  font-size: 17px;
  line-height: 1.75;
}

/* Main Layout */

.mb-rewards__main {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 24px;
  align-items: stretch;
}

/* Featured Reward Pool */

.mb-rewards__vault {
  position: relative;
  min-height: 510px;
  padding: 48px;
  border: 1px solid rgba(255, 213, 59, 0.42);
  border-radius: 34px;
  background:
    radial-gradient(
      circle at 80% 22%,
      rgba(255, 62, 181, 0.3),
      transparent 31%
    ),
    linear-gradient(
      145deg,
      rgba(39, 42, 112, 0.97),
      rgba(54, 25, 99, 0.98)
    );
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.3),
    inset 0 0 45px rgba(255, 255, 255, 0.045);
  overflow: hidden;
}

.mb-rewards__vault::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 -9px 0 rgba(111, 68, 0, 0.72),
    inset 0 -13px 0 #ffd43b;
  pointer-events: none;
}

.mb-rewards__vault-copy {
  position: relative;
  z-index: 2;
  width: 61%;
}

.mb-rewards__vault-label {
  margin: 0 0 27px;
  color: #ffd43b;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2px;
}

.mb-rewards__amount {
  margin: 0;
  line-height: 1;
}

.mb-rewards__amount span {
  display: block;
  margin-bottom: 4px;
  color: #ffffff;
  font-size: 20px;
  font-weight: 800;
}

.mb-rewards__amount strong {
  display: block;
  color: #ffffff;
  font-size: clamp(57px, 6vw, 90px);
  font-weight: 950;
  letter-spacing: -5px;
  text-shadow: 0 7px 0 rgba(0, 0, 0, 0.2);
}

.mb-rewards__plus {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 12px;
  color: #ff54b6;
}

.mb-rewards__plus::before,
.mb-rewards__plus::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 84, 182, 0.45);
}

.mb-rewards__plus span {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.8px;
}

.mb-rewards__spins {
  margin: 0;
}

.mb-rewards__spins strong {
  display: block;
  color: #24ddff;
  font-size: clamp(48px, 5vw, 72px);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -3px;
}

.mb-rewards__spins span {
  display: block;
  margin-top: 3px;
  color: #ffffff;
  font-size: 25px;
  font-weight: 900;
}

.mb-rewards__vault-text {
  margin: 26px 0 0;
  color: #c8c9e6;
  font-size: 15px;
  line-height: 1.7;
}

/* CSS Reward Illustration */

.mb-rewards__vault-art {
  position: absolute;
  right: -6px;
  bottom: 18px;
  width: 42%;
  height: 390px;
}

.mb-rewards__crown {
  position: absolute;
  top: 8px;
  left: 50%;
  z-index: 3;
  width: 116px;
  height: 82px;
  transform: translateX(-50%) rotate(5deg);
  color: #713d00;
  background: linear-gradient(180deg, #fff07a, #ffb921);
  clip-path: polygon(
    0 25%,
    24% 50%,
    38% 5%,
    55% 49%,
    78% 0,
    100% 27%,
    88% 100%,
    11% 100%
  );
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.32));
}

.mb-rewards__crown span {
  position: absolute;
  left: 46px;
  bottom: 8px;
  font-size: 28px;
}

.mb-rewards__chest {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 230px;
  height: 190px;
  border: 8px solid #10172d;
  border-radius: 34px 34px 26px 26px;
  background:
    linear-gradient(
      90deg,
      transparent 46%,
      #ffd43b 46%,
      #ffd43b 55%,
      transparent 55%
    ),
    linear-gradient(
      180deg,
      #ff4fad 0%,
      #a42ed9 48%,
      #5c31b7 49%,
      #271c73 100%
    );
  box-shadow:
    0 23px 0 #071126,
    0 34px 40px rgba(0, 0, 0, 0.45),
    inset 0 0 0 6px rgba(255, 255, 255, 0.1);
}

.mb-rewards__chest::before {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  top: 76px;
  height: 20px;
  border: 5px solid #10172d;
  background: linear-gradient(90deg, #ffce36, #fff087);
}

.mb-rewards__chest-lock {
  position: absolute;
  top: 66px;
  left: 50%;
  z-index: 2;
  width: 49px;
  height: 58px;
  transform: translateX(-50%);
  border: 6px solid #10172d;
  border-radius: 12px;
  background: #ffd43b;
}

.mb-rewards__chest-lock::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 50%;
  width: 9px;
  height: 18px;
  transform: translateX(-50%);
  border-radius: 8px;
  background: #5e3b00;
}

.mb-rewards__coin {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  border: 5px solid #8c5100;
  border-radius: 50%;
  color: #704000;
  background: linear-gradient(145deg, #fff37c, #ffb313);
  box-shadow:
    0 9px 0 #925300,
    0 15px 20px rgba(0, 0, 0, 0.34);
  font-weight: 950;
}

.mb-rewards__coin--one {
  top: 114px;
  left: 4px;
  width: 73px;
  height: 73px;
  transform: rotate(-17deg);
  font-size: 34px;
}

.mb-rewards__coin--two {
  top: 174px;
  right: 0;
  width: 58px;
  height: 58px;
  transform: rotate(19deg);
  font-size: 23px;
}

.mb-rewards__coin--three {
  bottom: 38px;
  left: 4px;
  width: 63px;
  height: 63px;
  transform: rotate(11deg);
  font-size: 17px;
}

.mb-rewards__spark {
  position: absolute;
  z-index: 5;
  color: #25ddff;
  text-shadow: 0 0 16px currentColor;
}

.mb-rewards__spark--one {
  top: 35px;
  left: 19px;
  font-size: 29px;
}

.mb-rewards__spark--two {
  top: 96px;
  right: 15px;
  color: #ff5bbb;
  font-size: 23px;
}

.mb-rewards__spark--three {
  bottom: 16px;
  right: 15px;
  color: #ffd43b;
  font-size: 31px;
}

/* Benefits */

.mb-rewards__benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.mb-rewards__benefit {
  position: relative;
  min-height: 247px;
  padding: 27px 24px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 25px;
  background: rgba(8, 24, 52, 0.83);
  box-shadow:
    0 18px 35px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.mb-rewards__benefit::before {
  content: "";
  position: absolute;
  top: -50px;
  right: -45px;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.12;
  filter: blur(4px);
}

.mb-rewards__benefit--yellow {
  color: #ffd43b;
}

.mb-rewards__benefit--cyan {
  color: #22dbff;
}

.mb-rewards__benefit--pink {
  color: #ff58b8;
}

.mb-rewards__benefit--purple {
  color: #a988ff;
}

.mb-rewards__benefit-icon {
  position: relative;
  display: grid;
  width: 52px;
  height: 52px;
  margin-bottom: 24px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.04);
  font-size: 24px;
  font-weight: 900;
}

.mb-rewards__benefit h3 {
  margin: 0 0 11px;
  color: #ffffff;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.2;
}

.mb-rewards__benefit p {
  margin: 0;
  color: #aebcd4;
  font-size: 14px;
  line-height: 1.65;
}

/* Reward Journey */

.mb-rewards__journey {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 38px;
  align-items: center;
  margin-top: 25px;
  padding: 30px 34px;
  border: 1px solid rgba(35, 218, 255, 0.22);
  border-radius: 27px;
  background: rgba(6, 21, 48, 0.72);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.2);
}

.mb-rewards__journey-label {
  margin: 0 0 7px;
  color: #23dbff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.8px;
}

.mb-rewards__journey-heading h3 {
  margin: 0;
  color: #ffffff;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.3;
}

.mb-rewards__path {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.mb-rewards__path::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 12px;
  right: 12px;
  height: 3px;
  border-radius: 5px;
  background: linear-gradient(
    90deg,
    #23dbff,
    #7b6cff,
    #ff56b7,
    #ffd43b
  );
  opacity: 0.6;
}

.mb-rewards__path-item {
  position: relative;
  z-index: 1;
}

.mb-rewards__path-dot {
  display: block;
  width: 24px;
  height: 24px;
  margin-bottom: 13px;
  border: 5px solid #081730;
  border-radius: 50%;
  background: #23dbff;
  box-shadow: 0 0 16px rgba(35, 219, 255, 0.7);
}

.mb-rewards__path-item:nth-child(2)
.mb-rewards__path-dot {
  background: #7b6cff;
  box-shadow: 0 0 16px rgba(123, 108, 255, 0.7);
}

.mb-rewards__path-item:nth-child(3)
.mb-rewards__path-dot {
  background: #ff56b7;
  box-shadow: 0 0 16px rgba(255, 86, 183, 0.7);
}

.mb-rewards__path-item:nth-child(4)
.mb-rewards__path-dot {
  background: #ffd43b;
  box-shadow: 0 0 16px rgba(255, 212, 59, 0.7);
}

.mb-rewards__path-item strong {
  display: block;
  margin-bottom: 4px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
}

.mb-rewards__path-item small {
  display: block;
  max-width: 145px;
  color: #8fa1bc;
  font-size: 12px;
  line-height: 1.45;
}

/* Notice */

.mb-rewards__notice {
  max-width: 800px;
  margin: 23px auto 0;
  color: #7487a5;
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
}

/* Responsive */

@media (max-width: 1199px) {

  .mb-rewards__vault {
    padding: 42px 36px;
  }

  .mb-rewards__vault-copy {
    width: 65%;
  }

  .mb-rewards__vault-art {
    right: -25px;
    transform: scale(0.9);
    transform-origin: bottom right;
  }

  .mb-rewards__benefit {
    padding: 25px 20px;
  }
}

@media (max-width: 991px) {

  .mb-rewards {
    padding: 90px 0 80px;
  }

  .mb-rewards__main {
    grid-template-columns: 1fr;
  }

  .mb-rewards__vault {
    min-height: 490px;
  }

  .mb-rewards__vault-copy {
    width: 58%;
  }

  .mb-rewards__vault-art {
    right: 20px;
  }

  .mb-rewards__benefit {
    min-height: 215px;
  }

  .mb-rewards__journey {
    grid-template-columns: 1fr;
    gap: 25px;
  }
}

@media (max-width: 767px) {

  .mb-rewards {
    padding: 76px 0 68px;
  }

  .mb-rewards__header {
    margin-bottom: 35px;
  }

  .mb-rewards__header h2 {
    font-size: 42px;
    letter-spacing: -1.5px;
  }

  .mb-rewards__intro {
    font-size: 15px;
  }

  .mb-rewards__vault {
    min-height: 670px;
    padding: 35px 27px;
  }

  .mb-rewards__vault-copy {
    width: 100%;
  }

  .mb-rewards__amount strong {
    font-size: 64px;
    letter-spacing: -3px;
  }

  .mb-rewards__spins strong {
    font-size: 55px;
  }

  .mb-rewards__vault-text {
    max-width: none;
  }

  .mb-rewards__vault-art {
    right: 50%;
    bottom: 12px;
    width: 300px;
    height: 300px;
    transform: translateX(50%) scale(0.83);
    transform-origin: bottom center;
  }

  .mb-rewards__benefits {
    grid-template-columns: 1fr;
  }

  .mb-rewards__benefit {
    display: flex;
    min-height: 0;
    gap: 20px;
    align-items: flex-start;
  }

  .mb-rewards__benefit-icon {
    flex: 0 0 52px;
    margin-bottom: 0;
  }

  .mb-rewards__journey {
    padding: 28px 25px;
  }

  .mb-rewards__path {
    grid-template-columns: 1fr 1fr;
    gap: 28px 20px;
  }

  .mb-rewards__path::before {
    display: none;
  }
}

@media (max-width: 480px) {

  .mb-rewards__header h2 {
    font-size: 36px;
  }

  .mb-rewards__vault {
    min-height: 650px;
    border-radius: 27px;
  }

  .mb-rewards__amount strong {
    font-size: 54px;
  }

  .mb-rewards__spins strong {
    font-size: 48px;
  }

  .mb-rewards__spins span {
    font-size: 22px;
  }

  .mb-rewards__benefit {
    display: block;
  }

  .mb-rewards__benefit-icon {
    margin-bottom: 20px;
  }

  .mb-rewards__path {
    grid-template-columns: 1fr;
  }

  .mb-rewards__path-item {
    padding-left: 38px;
  }

  .mb-rewards__path-dot {
    position: absolute;
    top: 0;
    left: 0;
  }

  .mb-rewards__path-item small {
    max-width: none;
  }
}

/* ==================================================
           REWARDS & VIP PROGRAMME END
================================================== */
/* ==================================================
                 WHY MRBEAST GAMES START
================================================== */

.mb-why,
.mb-why * {
  box-sizing: border-box;
}

.mb-why {
  --mb-cyan: #20d8ff;
  --mb-yellow: #ffd43b;
  --mb-pink: #ff48b6;
  --mb-purple: #7657ff;
  --mb-dark: #07152f;
  --mb-card: #102452;
  --mb-text: #ffffff;
  --mb-muted: #afc4df;

  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 110px 0;
  color: var(--mb-text);
  background:
    radial-gradient(
      circle at 0% 15%,
      rgba(32, 216, 255, 0.18),
      transparent 32%
    ),
    radial-gradient(
      circle at 100% 65%,
      rgba(255, 72, 182, 0.16),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      #07182f 0%,
      #101746 48%,
      #24134e 100%
    );
}

.mb-why::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  opacity: 0.23;
  background-image:
    linear-gradient(
      rgba(68, 151, 231, 0.18) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(68, 151, 231, 0.18) 1px,
      transparent 1px
    );
  background-size: 48px 48px;
  pointer-events: none;
}

.mb-why__glow {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.22;
  pointer-events: none;
}

.mb-why__glow--cyan {
  top: 180px;
  left: -250px;
  background: var(--mb-cyan);
}

.mb-why__glow--pink {
  right: -230px;
  bottom: 300px;
  background: var(--mb-pink);
}

.mb-why__header {
  width: min(870px, 100%);
  margin: 0 auto 52px;
  text-align: center;
}

.mb-why__eyebrow,
.mb-why__card-label {
  margin: 0 0 14px;
  color: var(--mb-cyan);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

.mb-why__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.mb-why__eyebrow::before,
.mb-why__eyebrow::after {
  width: 36px;
  height: 2px;
  content: "";
  background: var(--mb-cyan);
}

.mb-why__header h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(42px, 5.7vw, 76px);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -2.7px;
  text-transform: uppercase;
  text-shadow: 0 8px 0 rgba(2, 10, 29, 0.5);
}

.mb-why__header h2 span {
  display: block;
  color: var(--mb-yellow);
}

.mb-why__intro {
  max-width: 760px;
  margin: 26px auto 0;
  color: var(--mb-muted);
  font-size: 18px;
  line-height: 1.75;
}


/* ==================================================
                      PROVIDERS
================================================== */

.mb-why__providers,
.mb-why__mobile,
.mb-why__payments {
  position: relative;
  border: 1px solid rgba(117, 169, 226, 0.28);
  border-radius: 34px;
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.27),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.mb-why__providers {
  padding: 42px;
  background:
    linear-gradient(
      135deg,
      rgba(14, 45, 85, 0.96),
      rgba(39, 28, 91, 0.96)
    );
}

.mb-why__providers::after {
  position: absolute;
  top: -7px;
  right: 50px;
  width: 76px;
  height: 14px;
  border-radius: 20px;
  content: "";
  background: var(--mb-yellow);
  box-shadow:
    94px 0 0 var(--mb-pink),
    -94px 0 0 var(--mb-cyan);
}

.mb-why__providers-heading,
.mb-why__payments-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.78fr);
  gap: 45px;
  align-items: end;
  margin-bottom: 34px;
}

.mb-why__providers-heading h3,
.mb-why__mobile h3,
.mb-why__payments-heading h3 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(29px, 3.4vw, 46px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -1.3px;
}

.mb-why__providers-heading > p,
.mb-why__payments-heading > p,
.mb-why__mobile-copy > p {
  margin: 0;
  color: var(--mb-muted);
  font-size: 16px;
  line-height: 1.75;
}

.mb-why__provider-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
}

.mb-why__provider {
  display: flex;
  min-width: 0;
  min-height: 126px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 14px 14px;
  border: 1px solid rgba(91, 157, 217, 0.25);
  border-radius: 20px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(224, 238, 255, 0.94)
    );
  box-shadow:
    0 8px 0 rgba(2, 10, 29, 0.42),
    0 15px 24px rgba(0, 0, 0, 0.15);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.mb-why__provider:hover {
  transform: translateY(-5px);
  box-shadow:
    0 12px 0 rgba(2, 10, 29, 0.4),
    0 20px 30px rgba(0, 0, 0, 0.2);
}

.mb-why__provider:nth-child(4n + 1) {
  border-top: 4px solid var(--mb-cyan);
}

.mb-why__provider:nth-child(4n + 2) {
  border-top: 4px solid var(--mb-yellow);
}

.mb-why__provider:nth-child(4n + 3) {
  border-top: 4px solid var(--mb-pink);
}

.mb-why__provider:nth-child(4n + 4) {
  border-top: 4px solid var(--mb-purple);
}

.mb-why__provider img {
  display: block;
  width: auto;
  max-width: 138px;
  height: 48px;
  margin: auto;
  object-fit: contain;
}

.mb-why__provider span {
  display: block;
  margin-top: 10px;
  overflow: hidden;
  color: #0b1b3c;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mb-why__providers-note {
  margin: 26px 0 0;
  color: #90aaca;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}


/* ==================================================
                    MOBILE CASINO
================================================== */

.mb-why__mobile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 50px;
  min-height: 530px;
  align-items: center;
  margin-top: 28px;
  padding: 52px;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 85% 50%,
      rgba(32, 216, 255, 0.2),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      rgba(25, 28, 82, 0.97),
      rgba(65, 25, 90, 0.97)
    );
}

.mb-why__mobile::before {
  position: absolute;
  right: -70px;
  bottom: -130px;
  width: 430px;
  height: 430px;
  border: 70px solid rgba(255, 72, 182, 0.09);
  border-radius: 50%;
  content: "";
}

.mb-why__mobile-copy {
  position: relative;
  z-index: 2;
}

.mb-why__mobile-copy > p {
  max-width: 650px;
  margin-top: 20px;
}

.mb-why__mobile-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
  margin-top: 30px;
}

.mb-why__mobile-feature {
  min-width: 0;
  padding: 17px;
  border: 1px solid rgba(116, 169, 225, 0.25);
  border-radius: 18px;
  background: rgba(5, 20, 54, 0.65);
}

.mb-why__mobile-feature > span {
  display: grid;
  width: 42px;
  height: 42px;
  margin-bottom: 13px;
  place-items: center;
  border-radius: 13px;
  color: #07152f;
  font-size: 18px;
  background: var(--mb-cyan);
  box-shadow: 0 6px 0 #0785aa;
}

.mb-why__mobile-feature:nth-child(2) > span {
  background: var(--mb-yellow);
  box-shadow: 0 6px 0 #bf7900;
}

.mb-why__mobile-feature:nth-child(3) > span {
  background: var(--mb-pink);
  box-shadow: 0 6px 0 #a61970;
}

.mb-why__mobile-feature strong,
.mb-why__mobile-feature small {
  display: block;
}

.mb-why__mobile-feature strong {
  color: #ffffff;
  font-size: 14px;
  line-height: 1.35;
}

.mb-why__mobile-feature small {
  margin-top: 5px;
  color: #8fa7c7;
  font-size: 11px;
  line-height: 1.45;
}

.mb-why__phone-wrap {
  position: relative;
  display: flex;
  min-height: 425px;
  align-items: center;
  justify-content: center;
}

.mb-why__phone {
  position: relative;
  z-index: 2;
  width: 236px;
  padding: 13px;
  border: 4px solid #8a71ff;
  border-radius: 40px;
  background: #050d24;
  box-shadow:
    0 18px 0 #03091b,
    0 30px 50px rgba(0, 0, 0, 0.42),
    0 0 45px rgba(32, 216, 255, 0.22);
  transform: rotate(5deg);
  animation: mbPhoneFloat 4.5s ease-in-out infinite;
}

.mb-why__phone-speaker {
  width: 68px;
  height: 7px;
  margin: 2px auto 10px;
  border-radius: 10px;
  background: #273458;
}

.mb-why__phone-screen {
  min-height: 355px;
  padding: 24px 13px 15px;
  overflow: hidden;
  border-radius: 27px;
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(255, 72, 182, 0.38),
      transparent 32%
    ),
    linear-gradient(
      160deg,
      #0c294e,
      #17124d
    );
}

.mb-why__phone-logo {
  display: block;
  width: 132px;
  height: auto;
  margin: 0 auto 18px;
}

.mb-why__phone-screen > p {
  margin: 0 0 13px;
  color: var(--mb-yellow);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-align: center;
}

.mb-why__phone-games {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.mb-why__phone-game {
  overflow: hidden;
  aspect-ratio: 0.82;
  border: 1px solid rgba(32, 216, 255, 0.55);
  border-radius: 13px;
  background: #17234f;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.25);
}

.mb-why__phone-game img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mb-why__phone-navigation {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
}

.mb-why__phone-navigation span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7081a8;
}

.mb-why__phone-navigation span:first-child {
  background: var(--mb-cyan);
  box-shadow: 0 0 10px var(--mb-cyan);
}

.mb-why__phone-coin {
  position: absolute;
  z-index: 3;
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border: 5px solid #ffdc5d;
  border-radius: 50%;
  color: #5d3900;
  font-size: 25px;
  font-weight: 900;
  background: var(--mb-yellow);
  box-shadow: 0 9px 0 #b86d00;
}

.mb-why__phone-coin--one {
  top: 70px;
  left: 18px;
  transform: rotate(-14deg);
}

.mb-why__phone-coin--two {
  right: 3px;
  bottom: 50px;
  transform: rotate(12deg);
}

.mb-why__phone-spark {
  position: absolute;
  z-index: 3;
  color: var(--mb-pink);
  font-size: 36px;
  text-shadow: 0 0 16px currentColor;
  animation: mbSparkPulse 2s ease-in-out infinite;
}

.mb-why__phone-spark--one {
  top: 22px;
  right: 42px;
}

.mb-why__phone-spark--two {
  bottom: 8px;
  left: 45px;
  color: var(--mb-cyan);
  animation-delay: 0.8s;
}


/* ==================================================
                       PAYMENTS
================================================== */

.mb-why__payments {
  margin-top: 28px;
  padding: 48px;
  background:
    radial-gradient(
      circle at 0% 100%,
      rgba(32, 216, 255, 0.13),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      rgba(8, 31, 64, 0.98),
      rgba(31, 23, 76, 0.98)
    );
}

.mb-why__payment-switcher {
  position: relative;
}

.mb-why__payment-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.mb-why__payment-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 660px;
  margin: 0 auto 24px;
  padding: 8px;
  border: 1px solid rgba(100, 158, 219, 0.25);
  border-radius: 24px;
  background: rgba(3, 15, 42, 0.75);
}

.mb-why__payment-tab {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin: 0;
  padding: 14px 22px;
  border: 2px solid transparent;
  border-radius: 18px;
  color: #b8c8df;
  cursor: pointer;
  transition:
    color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.mb-why__payment-tab:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

.mb-why__payment-tab-icon {
  display: grid;
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  place-items: center;
  border-radius: 13px;
  color: #06142c;
  background: #7185aa;
}

.mb-why__payment-tab strong,
.mb-why__payment-tab small {
  display: block;
}

.mb-why__payment-tab strong {
  font-size: 16px;
  line-height: 1.2;
}

.mb-why__payment-tab small {
  margin-top: 3px;
  color: inherit;
  font-size: 11px;
  opacity: 0.72;
}

#mb-payment-deposit:checked
  ~ .mb-why__payment-tabs
  .mb-why__payment-tab--deposit {
  color: #07152f;
  background: var(--mb-yellow);
  box-shadow: 0 7px 0 #bb7400;
  transform: translateY(-3px);
}

#mb-payment-deposit:checked
  ~ .mb-why__payment-tabs
  .mb-why__payment-tab--deposit
  .mb-why__payment-tab-icon {
  color: #ffffff;
  background: #10295a;
}

#mb-payment-withdrawal:checked
  ~ .mb-why__payment-tabs
  .mb-why__payment-tab--withdrawal {
  color: #ffffff;
  background: var(--mb-pink);
  box-shadow: 0 7px 0 #9d1468;
  transform: translateY(-3px);
}

#mb-payment-withdrawal:checked
  ~ .mb-why__payment-tabs
  .mb-why__payment-tab--withdrawal
  .mb-why__payment-tab-icon {
  color: #ffffff;
  background: #31104a;
}

#mb-payment-deposit:focus-visible
  ~ .mb-why__payment-tabs
  .mb-why__payment-tab--deposit,
#mb-payment-withdrawal:focus-visible
  ~ .mb-why__payment-tabs
  .mb-why__payment-tab--withdrawal {
  outline: 3px solid #ffffff;
  outline-offset: 4px;
}

.mb-why__payment-panel {
  display: none;
  padding: 30px;
  border: 1px solid rgba(99, 160, 221, 0.25);
  border-radius: 27px;
  background: rgba(4, 18, 49, 0.72);
}

#mb-payment-deposit:checked
  ~ .mb-why__payment-panels
  .mb-why__payment-panel--deposit,
#mb-payment-withdrawal:checked
  ~ .mb-why__payment-panels
  .mb-why__payment-panel--withdrawal {
  display: block;
  animation: mbPanelReveal 0.35s ease;
}

.mb-why__panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 24px;
}

.mb-why__panel-heading > div {
  display: flex;
  align-items: center;
  gap: 11px;
}

.mb-why__panel-heading strong {
  color: #ffffff;
  font-size: 18px;
}

.mb-why__panel-heading p {
  max-width: 510px;
  margin: 0;
  color: #91a9c7;
  font-size: 13px;
  line-height: 1.55;
  text-align: right;
}

.mb-why__status-dot {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border-radius: 50%;
  background: var(--mb-cyan);
  box-shadow: 0 0 14px var(--mb-cyan);
}

.mb-why__status-dot--pink {
  background: var(--mb-pink);
  box-shadow: 0 0 14px var(--mb-pink);
}

.mb-why__method-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
}

.mb-why__method {
  display: flex;
  min-width: 0;
  min-height: 92px;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(106, 164, 223, 0.22);
  border-radius: 18px;
  background:
    linear-gradient(
      145deg,
      rgba(15, 39, 78, 0.96),
      rgba(13, 27, 64, 0.96)
    );
  box-shadow: 0 7px 0 rgba(1, 8, 26, 0.45);
}

.mb-why__method-icon {
  display: grid;
  width: 62px;
  height: 52px;
  flex: 0 0 62px;
  place-items: center;
  padding: 7px;
  overflow: hidden;
  border-radius: 13px;
  color: #172545;
  font-size: 31px;
  background: #ffffff;
}

.mb-why__method-icon img {
  display: block;
  width: 100%;
  max-width: 51px;
  height: 34px;
  object-fit: contain;
}

.mb-why__method-icon--dark {
  color: #ffffff;
  background: #050505;
}

.mb-why__method-icon--paypal {
  color: #0876bc;
}

.mb-why__method-icon--paysafe {
  color: #173516;
  background: #a9e65c;
}

.mb-why__method-icon--paysafe b {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: -0.4px;
}

.mb-why__method > div:last-child {
  min-width: 0;
}

.mb-why__method strong,
.mb-why__method small {
  display: block;
}

.mb-why__method strong {
  overflow: hidden;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.3;
  text-overflow: ellipsis;
}

.mb-why__method small {
  margin-top: 5px;
  color: #8fa6c4;
  font-size: 11px;
  line-height: 1.35;
}

.mb-why__payment-notice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 22px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 212, 59, 0.3);
  border-radius: 18px;
  background: rgba(255, 212, 59, 0.07);
}

.mb-why__payment-notice > span {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 12px;
  color: #07152f;
  background: var(--mb-yellow);
}

.mb-why__payment-notice p {
  margin: 0;
  color: #b7c8de;
  font-size: 13px;
  line-height: 1.65;
}


/* ==================================================
                       ANIMATIONS
================================================== */

@keyframes mbPhoneFloat {
  0%,
  100% {
    transform: rotate(5deg) translateY(0);
  }

  50% {
    transform: rotate(3deg) translateY(-12px);
  }
}

@keyframes mbSparkPulse {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.85) rotate(0deg);
  }

  50% {
    opacity: 1;
    transform: scale(1.15) rotate(18deg);
  }
}

@keyframes mbPanelReveal {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ==================================================
                       RESPONSIVE
================================================== */

@media (max-width: 1199px) {

  .mb-why__provider-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .mb-why__mobile {
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 25px;
    padding: 42px;
  }

  .mb-why__mobile-features {
    grid-template-columns: 1fr;
  }

  .mb-why__phone-wrap {
    min-height: 410px;
  }

  .mb-why__method-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 991px) {

  .mb-why {
    padding: 90px 0;
  }

  .mb-why__providers-heading,
  .mb-why__payments-heading {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .mb-why__provider-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mb-why__mobile {
    grid-template-columns: 1fr;
    padding: 42px;
  }

  .mb-why__mobile-features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mb-why__phone-wrap {
    min-height: 440px;
    margin-top: 15px;
  }

}

@media (max-width: 767px) {

  .mb-why {
    padding: 75px 0;
  }

  .mb-why__header {
    margin-bottom: 38px;
  }

  .mb-why__header h2 {
    font-size: clamp(37px, 11vw, 56px);
    letter-spacing: -1.5px;
  }

  .mb-why__intro {
    font-size: 16px;
  }

  .mb-why__providers,
  .mb-why__mobile,
  .mb-why__payments {
    padding: 28px 20px;
    border-radius: 25px;
  }

  .mb-why__provider-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
  }

  .mb-why__provider {
    min-height: 112px;
    padding: 14px 9px 11px;
    border-radius: 16px;
  }

  .mb-why__provider img {
    max-width: 112px;
    height: 40px;
  }

  .mb-why__provider span {
    font-size: 10px;
  }

  .mb-why__mobile-features {
    grid-template-columns: 1fr;
  }

  .mb-why__payment-tabs {
    gap: 8px;
    padding: 6px;
  }

  .mb-why__payment-tab {
    min-height: 68px;
    gap: 8px;
    padding: 11px 8px;
  }

  .mb-why__payment-tab-icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .mb-why__payment-tab strong {
    font-size: 13px;
  }

  .mb-why__payment-tab small {
    font-size: 9px;
  }

  .mb-why__payment-panel {
    padding: 20px 14px;
    border-radius: 20px;
  }

  .mb-why__panel-heading {
    display: block;
  }

  .mb-why__panel-heading p {
    margin-top: 10px;
    text-align: left;
  }

  .mb-why__method-grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 420px) {

  .mb-why__phone {
    width: 218px;
  }

  .mb-why__phone-coin--one {
    left: -2px;
  }

  .mb-why__phone-coin--two {
    right: -5px;
  }

  .mb-why__payment-tab-icon {
    display: none;
  }

}

@media (prefers-reduced-motion: reduce) {

  .mb-why__phone,
  .mb-why__phone-spark,
  .mb-why__payment-panel {
    animation: none !important;
  }

  .mb-why__provider,
  .mb-why__payment-tab {
    transition: none;
  }

}

/* ==================================================
                  WHY MRBEAST GAMES END
================================================== */
/* ==================================================
             EXPANDED PAYMENT METHODS START
================================================== */

/* Payment Groups */
.mb-why__method-group + .mb-why__method-group {
  margin-top: 32px;
}

.mb-why__method-group {
  padding: 22px;
  border: 1px solid rgba(101, 161, 222, 0.2);
  border-radius: 23px;
  background: rgba(8, 27, 61, 0.48);
}

.mb-why__method-group--crypto {
  border-color: rgba(118, 87, 255, 0.34);
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(118, 87, 255, 0.15),
      transparent 34%
    ),
    rgba(8, 22, 57, 0.65);
}

.mb-why__method-group-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.mb-why__method-group-icon {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border-radius: 14px;
  color: #07152f;
  font-size: 18px;
  background: #20d8ff;
  box-shadow: 0 6px 0 #087fa5;
}

.mb-why__method-group-icon--crypto {
  color: #ffffff;
  background: #7657ff;
  box-shadow: 0 6px 0 #3c269f;
}

.mb-why__method-group-heading > div {
  min-width: 0;
}

.mb-why__method-group-heading strong,
.mb-why__method-group-heading small {
  display: block;
}

.mb-why__method-group-heading strong {
  color: #ffffff;
  font-size: 17px;
  line-height: 1.3;
}

.mb-why__method-group-heading small {
  margin-top: 4px;
  color: #8fa8c8;
  font-size: 12px;
  line-height: 1.4;
}

.mb-why__method-count {
  margin-left: auto;
  padding: 7px 12px;
  border: 1px solid rgba(32, 216, 255, 0.45);
  border-radius: 30px;
  color: #20d8ff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 1.2px;
}

.mb-why__method-count--crypto {
  border-color: rgba(255, 72, 182, 0.55);
  color: #ff65c1;
}


/* Expanded Crypto Grid */
.mb-why__method-grid--crypto {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mb-why__method--crypto {
  border-color: rgba(118, 87, 255, 0.33);
  background:
    linear-gradient(
      145deg,
      rgba(26, 37, 91, 0.98),
      rgba(28, 21, 72, 0.98)
    );
}

.mb-why__method--crypto:nth-child(3n + 1) {
  border-top: 2px solid #20d8ff;
}

.mb-why__method--crypto:nth-child(3n + 2) {
  border-top: 2px solid #7657ff;
}

.mb-why__method--crypto:nth-child(3n + 3) {
  border-top: 2px solid #ff48b6;
}


/* Payment Icons */
.mb-why__method-icon--apple {
  color: #ffffff;
  background: #050505;
}

.mb-why__method-icon--bank {
  border: 1px solid rgba(32, 216, 255, 0.55);
  background:
    linear-gradient(
      135deg,
      #19447f,
      #17265a
    );
}

.mb-why__method-icon--bank img {
  width: 100%;
  max-width: 54px;
  height: 35px;
  object-fit: contain;
}

.mb-why__method-icon--crypto {
  border: 1px solid rgba(118, 87, 255, 0.48);
  background:
    linear-gradient(
      145deg,
      #192650,
      #111832
    );
  box-shadow:
    inset 0 0 15px rgba(118, 87, 255, 0.15),
    0 5px 12px rgba(0, 0, 0, 0.2);
}

.mb-why__method-icon--crypto img {
  width: 100%;
  max-width: 52px;
  height: 36px;
  object-fit: contain;
}


/* Payment Notices */
.mb-why__payment-notices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.mb-why__payment-notices .mb-why__payment-notice {
  margin-top: 0;
}

.mb-why__payment-notice--crypto {
  border-color: rgba(118, 87, 255, 0.42);
  background: rgba(118, 87, 255, 0.09);
}

.mb-why__payment-notice--crypto > span {
  color: #ffffff;
  background: #7657ff;
}

.mb-why__payment-footnote {
  max-width: 900px;
  margin: 18px auto 0;
  color: #7f99bc;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}


/* Responsive Expanded Payments */
@media (max-width: 1199px) {

  .mb-why__method-grid--crypto {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

}

@media (max-width: 991px) {

  .mb-why__method-grid--crypto {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mb-why__payment-notices {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 767px) {

  .mb-why__method-group {
    padding: 16px 12px;
    border-radius: 18px;
  }

  .mb-why__method-group-heading {
    align-items: flex-start;
  }

  .mb-why__method-count {
    display: none;
  }

  .mb-why__method-grid--crypto {
    grid-template-columns: 1fr;
  }

  .mb-why__method-group-heading strong {
    font-size: 15px;
  }

  .mb-why__method-group-heading small {
    font-size: 11px;
  }

}

/* ==================================================
              EXPANDED PAYMENT METHODS END
================================================== */
/* Original Visa and Mastercard logo from the old template */
.mb-why__method-icon--cards {
  width: 78px;
  flex-basis: 78px;
  padding: 8px;
  border: 1px solid rgba(32, 216, 255, 0.4);
  background: linear-gradient(
    135deg,
    #172d60,
    #0c1739
  );
}

.mb-why__method-icon--cards img {
  width: 100%;
  max-width: 68px;
  height: 32px;
  object-fit: contain;
}
/* Dark background for the original white CashToCode logo */
.mb-why__method-icon--cash2code {
  border: 1px solid rgba(255, 72, 182, 0.55);
  background: linear-gradient(
    135deg,
    #6d236f,
    #2f174f
  );
}

.mb-why__method-icon--cash2code img {
  width: 100%;
  max-width: 55px;
  height: 35px;
  object-fit: contain;
}
/* ==================================================
          FINAL PAYMENT ICON BACKGROUNDS START
================================================== */

/* Uniform size for every payment icon */
.mb-why__method-icon,
.mb-why__method-icon--cards {
  display: grid;
  width: 78px;
  height: 64px;
  flex: 0 0 78px;
  place-items: center;
  padding: 10px;
  overflow: hidden;
  border: 1px solid rgba(32, 216, 255, 0.45);
  border-radius: 17px;
  color: #102451;
  font-size: 34px;
  background: linear-gradient(
    135deg,
    #8fd8ff,
    #a9bcff
  );
  box-shadow:
    0 6px 0 rgba(4, 13, 39, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.mb-why__method-icon img,
.mb-why__method-icon--cards img {
  display: block;
  width: 100%;
  max-width: 64px;
  height: 38px;
  object-fit: contain;
}


/* Visa and Mastercard */
.mb-why__method-icon--cards {
  border-color: rgba(32, 216, 255, 0.7);
  background: linear-gradient(
    135deg,
    #183b75,
    #111d48
  );
}


/* Apple Pay */
.mb-why__method-icon--apple {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
  background: linear-gradient(
    135deg,
    #161616,
    #000000
  );
}


/* Google Pay */
.mb-why__method-icon:has(.fa-google-pay) {
  color: #162b55;
  border-color: rgba(61, 132, 220, 0.45);
  background: linear-gradient(
    135deg,
    #a8e4ff,
    #b8caff
  );
}


/* PayPal */
.mb-why__method-icon--paypal {
  color: #0878bd;
  border-color: rgba(0, 122, 193, 0.55);
  background: linear-gradient(
    135deg,
    #8cddff,
    #9abaff
  );
}


/* Skrill */
.mb-why__method-icon:has(img[src*="skrill.svg"]) {
  border-color: rgba(202, 65, 184, 0.55);
  background: linear-gradient(
    135deg,
    #ffd1f1,
    #d9b3ff
  );
}


/* Neteller */
.mb-why__method-icon:has(img[src*="neteller.svg"]) {
  border-color: rgba(112, 190, 57, 0.65);
  background: linear-gradient(
    135deg,
    #dcffa4,
    #a7ed82
  );
}


/* Open Banking and Bank Transfer */
.mb-why__method-icon--bank {
  border-color: rgba(32, 216, 255, 0.75);
  background: linear-gradient(
    135deg,
    #235398,
    #17275f
  );
}


/* PaysafeCard */
.mb-why__method-icon--paysafe {
  color: #173516;
  border-color: rgba(165, 233, 83, 0.7);
  background: linear-gradient(
    135deg,
    #b9f868,
    #8fd83d
  );
}


/* CashToCode */
.mb-why__method-icon--cash2code {
  border-color: rgba(255, 72, 182, 0.75);
  background: linear-gradient(
    135deg,
    #8f2b88,
    #47185f
  );
}


/* All cryptocurrency icons */
.mb-why__method-icon--crypto {
  border-color: rgba(118, 87, 255, 0.65);
  background: linear-gradient(
    145deg,
    #28396f,
    #171c48
  );
  box-shadow:
    0 6px 0 rgba(4, 10, 31, 0.48),
    inset 0 0 18px rgba(118, 87, 255, 0.18);
}

.mb-why__method-icon--crypto img {
  width: 100%;
  max-width: 62px;
  height: 38px;
  object-fit: contain;
}


/* Mobile icon sizing */
@media (max-width: 575px) {

  .mb-why__method-icon,
  .mb-why__method-icon--cards {
    width: 68px;
    height: 58px;
    flex-basis: 68px;
    padding: 8px;
    border-radius: 15px;
  }

  .mb-why__method-icon img,
  .mb-why__method-icon--cards img,
  .mb-why__method-icon--crypto img {
    max-width: 55px;
    height: 34px;
  }

}

/* ==================================================
           FINAL PAYMENT ICON BACKGROUNDS END
================================================== */
/* ==================================================
                  ABOUT MRBEAST GAMES START
================================================== */

.mb-about,
.mb-about * {
  box-sizing: border-box;
}

.mb-about {
  --about-cyan: #20d8ff;
  --about-pink: #ff48b6;
  --about-yellow: #ffd43b;
  --about-purple: #7657ff;
  --about-green: #78e763;
  --about-dark: #06142e;
  --about-card: #102551;
  --about-muted: #adc1dc;

  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 110px 0;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 8% 30%,
      rgba(32, 216, 255, 0.16),
      transparent 30%
    ),
    radial-gradient(
      circle at 95% 70%,
      rgba(255, 72, 182, 0.16),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      #06152e 0%,
      #111944 48%,
      #21124b 100%
    );
}

.mb-about::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  opacity: 0.23;
  background-image:
    linear-gradient(
      rgba(79, 152, 226, 0.16) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(79, 152, 226, 0.16) 1px,
      transparent 1px
    );
  background-size: 52px 52px;
  pointer-events: none;
}

.mb-about::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  content: "";
  background: linear-gradient(
    90deg,
    var(--about-cyan),
    var(--about-purple),
    var(--about-pink),
    var(--about-yellow)
  );
}

.mb-about__glow {
  position: absolute;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  opacity: 0.2;
  filter: blur(110px);
  pointer-events: none;
}

.mb-about__glow--cyan {
  top: 240px;
  left: -270px;
  background: var(--about-cyan);
}

.mb-about__glow--pink {
  right: -260px;
  bottom: 220px;
  background: var(--about-pink);
}


/* Section Heading */
.mb-about__header {
  max-width: 950px;
  margin: 0 auto 52px;
  text-align: center;
}

.mb-about__eyebrow,
.mb-about__label {
  margin: 0 0 14px;
  color: var(--about-cyan);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 2.3px;
  text-transform: uppercase;
}

.mb-about__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.mb-about__eyebrow::before,
.mb-about__eyebrow::after {
  width: 38px;
  height: 2px;
  content: "";
  background: var(--about-cyan);
}

.mb-about__header h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(42px, 5.5vw, 74px);
  font-weight: 900;
  line-height: 0.99;
  letter-spacing: -2.7px;
  text-transform: uppercase;
  text-shadow: 0 8px 0 rgba(2, 8, 25, 0.48);
}

.mb-about__header h2 span {
  display: block;
  color: var(--about-yellow);
}

.mb-about__header > p:last-child {
  max-width: 820px;
  margin: 25px auto 0;
  color: var(--about-muted);
  font-size: 18px;
  line-height: 1.75;
}


/* Main Story */
.mb-about__story {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: 25px;
}

.mb-about__copy,
.mb-about__showcase {
  position: relative;
  min-width: 0;
  min-height: 590px;
  border: 1px solid rgba(101, 163, 222, 0.3);
  border-radius: 34px;
  box-shadow:
    0 22px 55px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.mb-about__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 52px;
  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(32, 216, 255, 0.13),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      rgba(14, 42, 81, 0.98),
      rgba(25, 25, 75, 0.98)
    );
}

.mb-about__copy::after {
  position: absolute;
  top: 38px;
  right: 38px;
  width: 52px;
  height: 52px;
  border: 12px solid rgba(255, 72, 182, 0.33);
  border-radius: 14px;
  content: "";
  transform: rotate(18deg);
}

.mb-about__copy h3 {
  max-width: 650px;
  margin: 0 0 23px;
  color: #ffffff;
  font-size: clamp(31px, 3.5vw, 48px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -1.4px;
}

.mb-about__copy > p:not(.mb-about__label) {
  margin: 0 0 17px;
  color: var(--about-muted);
  font-size: 16px;
  line-height: 1.75;
}

.mb-about__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 12px;
}

.mb-about__tags span {
  padding: 9px 13px;
  border: 1px solid rgba(32, 216, 255, 0.35);
  border-radius: 30px;
  color: #d8e9ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.35px;
  background: rgba(4, 20, 51, 0.68);
}

.mb-about__tags span:nth-child(2) {
  border-color: rgba(255, 72, 182, 0.45);
}

.mb-about__tags span:nth-child(3) {
  border-color: rgba(255, 212, 59, 0.48);
}

.mb-about__tags span:nth-child(4) {
  border-color: rgba(118, 87, 255, 0.55);
}

.mb-about__tags span:nth-child(5) {
  border-color: rgba(120, 231, 99, 0.45);
}


/* Visual Showcase */
.mb-about__showcase {
  display: flex;
  align-items: flex-end;
  margin: 0;
  padding: 42px;
  overflow: hidden;
  isolation: isolate;
  background-image:
    linear-gradient(
      180deg,
      rgba(4, 12, 38, 0.1),
      rgba(5, 13, 42, 0.92)
    ),
    url("../images/slider-main/mrbeast-hero.webp");
  background-position: 68% center;
  background-size: cover;
}

.mb-about__showcase-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      135deg,
      rgba(3, 14, 38, 0.12),
      rgba(35, 15, 81, 0.35)
    );
}

.mb-about__showcase-content {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 27px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 24px;
  background: rgba(5, 16, 47, 0.8);
  box-shadow:
    0 16px 35px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
}

.mb-about__showcase-content > img {
  display: block;
  width: 180px;
  max-width: 70%;
  height: auto;
  margin-bottom: 21px;
}

.mb-about__showcase-content > p {
  margin: 0 0 5px;
  color: var(--about-cyan);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2.6px;
}

.mb-about__showcase-content > strong {
  display: block;
  color: #ffffff;
  font-size: clamp(36px, 4vw, 57px);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -2px;
  text-shadow: 0 6px 0 rgba(0, 0, 0, 0.45);
}

.mb-about__showcase-content > strong span {
  display: block;
  color: var(--about-yellow);
}

.mb-about__showcase-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 20px;
}

.mb-about__showcase-pills span {
  padding: 7px 10px;
  border-radius: 20px;
  color: #07152f;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.8px;
  background: var(--about-cyan);
}

.mb-about__showcase-pills span:nth-child(2) {
  background: var(--about-pink);
}

.mb-about__showcase-pills span:nth-child(3) {
  background: var(--about-yellow);
}

.mb-about__showcase-pills span:nth-child(4) {
  color: #ffffff;
  background: var(--about-purple);
}

.mb-about__coin {
  position: absolute;
  z-index: 4;
  display: grid;
  width: 65px;
  height: 65px;
  place-items: center;
  border: 5px solid #ffe46f;
  border-radius: 50%;
  color: #5d3600;
  font-size: 25px;
  font-weight: 900;
  background: var(--about-yellow);
  box-shadow: 0 9px 0 #b76c00;
}

.mb-about__coin--one {
  top: 48px;
  left: 34px;
  transform: rotate(-14deg);
}

.mb-about__coin--two {
  top: 112px;
  right: 30px;
  transform: rotate(12deg);
}

.mb-about__spark {
  position: absolute;
  z-index: 4;
  color: var(--about-pink);
  font-size: 38px;
  text-shadow: 0 0 17px currentColor;
  animation: mbAboutSpark 2.2s ease-in-out infinite;
}

.mb-about__spark--one {
  top: 28px;
  right: 130px;
}

.mb-about__spark--two {
  top: 155px;
  left: 40px;
  color: var(--about-cyan);
  animation-delay: 0.7s;
}


/* Advantages Heading */
.mb-about__advantages-heading {
  max-width: 790px;
  margin: 72px auto 35px;
  text-align: center;
}

.mb-about__advantages-heading h3 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(33px, 4vw, 51px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -1.5px;
}

.mb-about__advantages-heading > p:last-child {
  margin: 17px auto 0;
  color: var(--about-muted);
  font-size: 16px;
  line-height: 1.7;
}


/* Advantages Grid */
.mb-about__advantages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.mb-about__advantage {
  position: relative;
  min-width: 0;
  min-height: 245px;
  padding: 28px;
  overflow: hidden;
  border: 1px solid rgba(103, 164, 223, 0.28);
  border-radius: 25px;
  background:
    linear-gradient(
      145deg,
      rgba(17, 44, 86, 0.97),
      rgba(20, 25, 70, 0.97)
    );
  box-shadow:
    0 10px 0 rgba(2, 9, 29, 0.45),
    0 20px 35px rgba(0, 0, 0, 0.16);
}

.mb-about__advantage::after {
  position: absolute;
  right: -35px;
  bottom: -35px;
  width: 110px;
  height: 110px;
  border: 24px solid rgba(255, 255, 255, 0.035);
  border-radius: 50%;
  content: "";
}

.mb-about__advantage--cyan {
  border-top: 4px solid var(--about-cyan);
}

.mb-about__advantage--pink {
  border-top: 4px solid var(--about-pink);
}

.mb-about__advantage--yellow {
  border-top: 4px solid var(--about-yellow);
}

.mb-about__advantage--purple {
  border-top: 4px solid var(--about-purple);
}

.mb-about__advantage--blue {
  border-top: 4px solid #4b9eff;
}

.mb-about__advantage--green {
  border-top: 4px solid var(--about-green);
}

.mb-about__advantage-icon {
  display: grid;
  width: 58px;
  height: 58px;
  margin-bottom: 21px;
  place-items: center;
  border-radius: 17px;
  color: #07152f;
  font-size: 23px;
  background: var(--about-cyan);
  box-shadow: 0 7px 0 #0982a8;
}

.mb-about__advantage--pink .mb-about__advantage-icon {
  color: #ffffff;
  background: var(--about-pink);
  box-shadow: 0 7px 0 #a51d70;
}

.mb-about__advantage--yellow .mb-about__advantage-icon {
  background: var(--about-yellow);
  box-shadow: 0 7px 0 #b97300;
}

.mb-about__advantage--purple .mb-about__advantage-icon {
  color: #ffffff;
  background: var(--about-purple);
  box-shadow: 0 7px 0 #3c269f;
}

.mb-about__advantage--blue .mb-about__advantage-icon {
  color: #ffffff;
  background: #4b9eff;
  box-shadow: 0 7px 0 #1760b5;
}

.mb-about__advantage--green .mb-about__advantage-icon {
  background: var(--about-green);
  box-shadow: 0 7px 0 #319e31;
}

.mb-about__advantage h4 {
  margin: 0;
  color: #ffffff;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.25;
}

.mb-about__advantage p {
  margin: 11px 0 0;
  color: #a9bdd7;
  font-size: 14px;
  line-height: 1.65;
}


/* Final Summary */
.mb-about__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
  margin-top: 34px;
  padding: 29px 34px;
  border: 1px solid rgba(255, 212, 59, 0.38);
  border-radius: 25px;
  background:
    linear-gradient(
      135deg,
      rgba(255, 212, 59, 0.1),
      rgba(255, 72, 182, 0.08),
      rgba(118, 87, 255, 0.12)
    );
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.mb-about__summary-title {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mb-about__summary-title > span {
  display: grid;
  width: 53px;
  height: 53px;
  flex: 0 0 53px;
  place-items: center;
  border-radius: 16px;
  color: #07152f;
  font-size: 22px;
  background: var(--about-yellow);
  box-shadow: 0 7px 0 #b97300;
}

.mb-about__summary-title small,
.mb-about__summary-title strong {
  display: block;
}

.mb-about__summary-title small {
  color: var(--about-cyan);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.4px;
}

.mb-about__summary-title strong {
  margin-top: 5px;
  color: #ffffff;
  font-size: 20px;
  line-height: 1.25;
}

.mb-about__summary-points {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.mb-about__summary-points span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border: 1px solid rgba(120, 231, 99, 0.3);
  border-radius: 30px;
  color: #d4e4f7;
  font-size: 11px;
  font-weight: 700;
  background: rgba(4, 18, 48, 0.5);
}

.mb-about__summary-points i {
  color: var(--about-green);
}


/* Animation */
@keyframes mbAboutSpark {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.86) rotate(0deg);
  }

  50% {
    opacity: 1;
    transform: scale(1.16) rotate(18deg);
  }
}


/* Responsive */
@media (max-width: 1199px) {

  .mb-about__story {
    grid-template-columns: minmax(0, 1fr) minmax(330px, 0.8fr);
  }

  .mb-about__copy {
    padding: 42px;
  }

  .mb-about__advantages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 991px) {

  .mb-about {
    padding: 90px 0;
  }

  .mb-about__story {
    grid-template-columns: 1fr;
  }

  .mb-about__copy,
  .mb-about__showcase {
    min-height: auto;
  }

  .mb-about__showcase {
    min-height: 570px;
  }

  .mb-about__summary {
    display: block;
  }

  .mb-about__summary-points {
    justify-content: flex-start;
    margin-top: 22px;
  }

}

@media (max-width: 767px) {

  .mb-about {
    padding: 75px 0;
  }

  .mb-about__header h2 {
    font-size: clamp(37px, 11vw, 56px);
    letter-spacing: -1.5px;
  }

  .mb-about__header > p:last-child {
    font-size: 16px;
  }

  .mb-about__copy,
  .mb-about__showcase {
    border-radius: 25px;
  }

  .mb-about__copy {
    padding: 31px 22px;
  }

  .mb-about__copy::after {
    display: none;
  }

  .mb-about__showcase {
    min-height: 520px;
    padding: 20px;
  }

  .mb-about__showcase-content {
    padding: 22px;
  }

  .mb-about__coin {
    width: 54px;
    height: 54px;
    border-width: 4px;
    font-size: 20px;
  }

  .mb-about__advantages {
    grid-template-columns: 1fr;
  }

  .mb-about__advantage {
    min-height: auto;
    padding: 25px 22px;
  }

  .mb-about__summary {
    padding: 25px 20px;
  }

  .mb-about__summary-points {
    display: grid;
    grid-template-columns: 1fr;
  }

}

@media (max-width: 420px) {

  .mb-about__showcase {
    min-height: 480px;
    background-position: 70% center;
  }

  .mb-about__showcase-content > strong {
    font-size: 35px;
  }

  .mb-about__coin--one {
    left: 18px;
  }

  .mb-about__coin--two {
    right: 18px;
  }

}

@media (prefers-reduced-motion: reduce) {

  .mb-about__spark {
    animation: none;
  }

}

/* ==================================================
                   ABOUT MRBEAST GAMES END
================================================== */
/* ==================================================
                       FAQ START
================================================== */

.mb-faq,
.mb-faq * {
  box-sizing: border-box;
}

.mb-faq {
  --faq-cyan: #20d8ff;
  --faq-pink: #ff48b6;
  --faq-yellow: #ffd43b;
  --faq-purple: #7657ff;
  --faq-green: #78e763;
  --faq-blue: #4b9eff;
  --faq-dark: #06142e;
  --faq-card: #102552;
  --faq-muted: #a9bfdc;

  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 110px 0;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 0% 25%,
      rgba(32, 216, 255, 0.16),
      transparent 30%
    ),
    radial-gradient(
      circle at 100% 75%,
      rgba(255, 72, 182, 0.15),
      transparent 31%
    ),
    linear-gradient(
      145deg,
      #06152f 0%,
      #111945 50%,
      #21134c 100%
    );
}

.mb-faq::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  opacity: 0.22;
  background-image:
    linear-gradient(
      rgba(79, 153, 225, 0.16) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(79, 153, 225, 0.16) 1px,
      transparent 1px
    );
  background-size: 52px 52px;
  pointer-events: none;
}

.mb-faq::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  content: "";
  background: linear-gradient(
    90deg,
    var(--faq-cyan),
    var(--faq-purple),
    var(--faq-pink),
    var(--faq-yellow)
  );
}

.mb-faq__glow {
  position: absolute;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  opacity: 0.2;
  filter: blur(115px);
  pointer-events: none;
}

.mb-faq__glow--cyan {
  top: 250px;
  left: -280px;
  background: var(--faq-cyan);
}

.mb-faq__glow--pink {
  right: -270px;
  bottom: 150px;
  background: var(--faq-pink);
}


/* FAQ Heading */
.mb-faq__header {
  max-width: 920px;
  margin: 0 auto 55px;
  text-align: center;
}

.mb-faq__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  color: var(--faq-cyan);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

.mb-faq__eyebrow::before,
.mb-faq__eyebrow::after {
  width: 38px;
  height: 2px;
  content: "";
  background: var(--faq-cyan);
}

.mb-faq__header h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(45px, 6vw, 78px);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -2.8px;
  text-transform: uppercase;
  text-shadow: 0 8px 0 rgba(2, 8, 25, 0.48);
}

.mb-faq__header h2 span {
  color: var(--faq-yellow);
}

.mb-faq__header > p:last-child {
  max-width: 780px;
  margin: 24px auto 0;
  color: var(--faq-muted);
  font-size: 18px;
  line-height: 1.75;
}


/* FAQ Layout */
.mb-faq__layout {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 25px;
  align-items: start;
}


/* FAQ Guide */
.mb-faq__guide {
  position: sticky;
  top: 120px;
  padding: 34px;
  overflow: hidden;
  border: 1px solid rgba(102, 164, 223, 0.3);
  border-radius: 30px;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(255, 72, 182, 0.16),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      rgba(17, 48, 91, 0.98),
      rgba(29, 24, 76, 0.98)
    );
  box-shadow:
    0 18px 0 rgba(2, 9, 28, 0.42),
    0 28px 50px rgba(0, 0, 0, 0.22);
}

.mb-faq__guide::after {
  position: absolute;
  right: -50px;
  bottom: -50px;
  width: 150px;
  height: 150px;
  border: 32px solid rgba(255, 255, 255, 0.035);
  border-radius: 50%;
  content: "";
}

.mb-faq__question-mark {
  display: grid;
  width: 86px;
  height: 86px;
  margin-bottom: 27px;
  place-items: center;
  border: 5px solid #86ecff;
  border-radius: 27px;
  color: #07152f;
  font-size: 53px;
  font-weight: 900;
  line-height: 1;
  background: var(--faq-cyan);
  box-shadow:
    0 10px 0 #0781a7,
    0 0 30px rgba(32, 216, 255, 0.25);
  transform: rotate(-6deg);
}

.mb-faq__guide-label {
  margin: 0 0 10px;
  color: var(--faq-cyan);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
}

.mb-faq__guide h3 {
  margin: 0;
  color: #ffffff;
  font-size: 34px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -1px;
}

.mb-faq__guide h3 span {
  display: block;
  color: var(--faq-yellow);
}

.mb-faq__guide > p:not(.mb-faq__guide-label) {
  margin: 19px 0 0;
  color: var(--faq-muted);
  font-size: 14px;
  line-height: 1.7;
}

.mb-faq__topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 25px;
}

.mb-faq__topics span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid rgba(32, 216, 255, 0.27);
  border-radius: 30px;
  color: #d5e5f7;
  font-size: 10px;
  font-weight: 800;
  background: rgba(4, 18, 49, 0.58);
}

.mb-faq__topics i {
  color: var(--faq-cyan);
}

.mb-faq__responsible {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-top: 27px;
  padding: 17px;
  border: 1px solid rgba(255, 212, 59, 0.33);
  border-radius: 19px;
  background: rgba(255, 212, 59, 0.07);
}

.mb-faq__responsible > span {
  display: grid;
  width: 45px;
  height: 45px;
  flex: 0 0 45px;
  place-items: center;
  border-radius: 50%;
  color: #07152f;
  font-size: 14px;
  font-weight: 900;
  background: var(--faq-yellow);
  box-shadow: 0 5px 0 #b46e00;
}

.mb-faq__responsible strong {
  display: block;
  color: #ffffff;
  font-size: 13px;
}

.mb-faq__responsible p {
  margin: 5px 0 0;
  color: #a9bdd7;
  font-size: 11px;
  line-height: 1.55;
}


/* Question Columns */
.mb-faq__questions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 17px;
  align-items: start;
}

.mb-faq__column {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 17px;
}


/* FAQ Item */
.mb-faq__item {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(101, 163, 223, 0.28);
  border-radius: 23px;
  color: #ffffff;
  background:
    linear-gradient(
      145deg,
      rgba(15, 43, 84, 0.98),
      rgba(20, 24, 69, 0.98)
    );
  box-shadow:
    0 9px 0 rgba(2, 9, 28, 0.43),
    0 16px 28px rgba(0, 0, 0, 0.16);
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.mb-faq__item--cyan {
  border-top: 4px solid var(--faq-cyan);
}

.mb-faq__item--purple {
  border-top: 4px solid var(--faq-purple);
}

.mb-faq__item--pink {
  border-top: 4px solid var(--faq-pink);
}

.mb-faq__item--yellow {
  border-top: 4px solid var(--faq-yellow);
}

.mb-faq__item--green {
  border-top: 4px solid var(--faq-green);
}

.mb-faq__item--blue {
  border-top: 4px solid var(--faq-blue);
}

.mb-faq__item[open] {
  transform: translateY(-3px);
  border-color: rgba(32, 216, 255, 0.45);
  box-shadow:
    0 12px 0 rgba(2, 9, 28, 0.38),
    0 20px 34px rgba(0, 0, 0, 0.22),
    0 0 28px rgba(32, 216, 255, 0.08);
}

.mb-faq__item summary {
  display: grid;
  grid-template-columns: 51px minmax(0, 1fr) 38px;
  gap: 14px;
  min-height: 103px;
  align-items: center;
  padding: 20px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.mb-faq__item summary::-webkit-details-marker {
  display: none;
}

.mb-faq__item summary::marker {
  display: none;
  content: "";
}

.mb-faq__item summary:focus-visible {
  outline: 3px solid var(--faq-yellow);
  outline-offset: -5px;
  border-radius: 19px;
}

.mb-faq__item-icon {
  display: grid;
  width: 51px;
  height: 51px;
  place-items: center;
  border-radius: 16px;
  color: #07152f;
  font-size: 19px;
  background: var(--faq-cyan);
  box-shadow: 0 6px 0 #0782a8;
}

.mb-faq__item--purple .mb-faq__item-icon {
  color: #ffffff;
  background: var(--faq-purple);
  box-shadow: 0 6px 0 #3d279f;
}

.mb-faq__item--pink .mb-faq__item-icon {
  color: #ffffff;
  background: var(--faq-pink);
  box-shadow: 0 6px 0 #a51d70;
}

.mb-faq__item--yellow .mb-faq__item-icon {
  background: var(--faq-yellow);
  box-shadow: 0 6px 0 #b57100;
}

.mb-faq__item--green .mb-faq__item-icon {
  background: var(--faq-green);
  box-shadow: 0 6px 0 #309d31;
}

.mb-faq__item--blue .mb-faq__item-icon {
  color: #ffffff;
  background: var(--faq-blue);
  box-shadow: 0 6px 0 #175fb2;
}

.mb-faq__question {
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.45;
}

.mb-faq__toggle {
  position: relative;
  display: block;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(108, 169, 226, 0.3);
  border-radius: 12px;
  background: rgba(4, 17, 47, 0.63);
}

.mb-faq__toggle::before,
.mb-faq__toggle::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 3px;
  border-radius: 4px;
  content: "";
  background: var(--faq-cyan);
  transform: translate(-50%, -50%);
  transition: transform 0.25s ease;
}

.mb-faq__toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.mb-faq__item[open] .mb-faq__toggle::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.mb-faq__answer {
  padding: 0 21px 23px 85px;
  animation: mbFaqReveal 0.3s ease;
}

.mb-faq__answer::before {
  display: block;
  width: 100%;
  height: 1px;
  margin-bottom: 17px;
  content: "";
  background: linear-gradient(
    90deg,
    rgba(32, 216, 255, 0.35),
    transparent
  );
}

.mb-faq__answer p {
  margin: 0;
  color: #abc0db;
  font-size: 13px;
  line-height: 1.72;
}


/* FAQ Animation */
@keyframes mbFaqReveal {
  from {
    opacity: 0;
    transform: translateY(-7px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* FAQ Responsive */
@media (max-width: 1199px) {

  .mb-faq__layout {
    grid-template-columns: 285px minmax(0, 1fr);
  }

  .mb-faq__guide {
    padding: 27px;
  }

  .mb-faq__guide h3 {
    font-size: 29px;
  }

  .mb-faq__item summary {
    grid-template-columns: 46px minmax(0, 1fr) 34px;
    gap: 11px;
    padding: 17px;
  }

  .mb-faq__item-icon {
    width: 46px;
    height: 46px;
  }

  .mb-faq__question {
    font-size: 14px;
  }

  .mb-faq__answer {
    padding: 0 17px 21px 74px;
  }

}

@media (max-width: 991px) {

  .mb-faq {
    padding: 90px 0;
  }

  .mb-faq__layout {
    grid-template-columns: 1fr;
  }

  .mb-faq__guide {
    position: relative;
    top: auto;
  }

  .mb-faq__question-mark {
    width: 72px;
    height: 72px;
    font-size: 44px;
  }

  .mb-faq__topics {
    max-width: 600px;
  }

  .mb-faq__responsible {
    max-width: 600px;
  }

}

@media (max-width: 767px) {

  .mb-faq {
    padding: 75px 0;
  }

  .mb-faq__header h2 {
    font-size: clamp(40px, 12vw, 58px);
    letter-spacing: -1.5px;
  }

  .mb-faq__header > p:last-child {
    font-size: 16px;
  }

  .mb-faq__questions {
    grid-template-columns: 1fr;
  }

  .mb-faq__guide {
    border-radius: 24px;
  }

  .mb-faq__item {
    border-radius: 20px;
  }

  .mb-faq__item summary {
    min-height: 94px;
  }

}

@media (max-width: 480px) {

  .mb-faq__guide {
    padding: 24px 20px;
  }

  .mb-faq__item summary {
    grid-template-columns: 43px minmax(0, 1fr) 30px;
    gap: 9px;
    padding: 15px 13px;
  }

  .mb-faq__item-icon {
    width: 43px;
    height: 43px;
    border-radius: 14px;
  }

  .mb-faq__question {
    font-size: 13px;
  }

  .mb-faq__toggle {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }

  .mb-faq__answer {
    padding: 0 14px 19px;
  }

}

@media (prefers-reduced-motion: reduce) {

  .mb-faq__item,
  .mb-faq__toggle::before,
  .mb-faq__toggle::after,
  .mb-faq__answer {
    transition: none;
    animation: none;
  }

}

/* ==================================================
                        FAQ END
================================================== */

/* ==================================================
                    MRBEAST FOOTER START
================================================== */

.mb-footer {
  position: relative;
  overflow: hidden;
  padding: 58px 0 22px;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 8% 10%,
      rgba(27, 210, 255, 0.16),
      transparent 28%
    ),
    radial-gradient(
      circle at 92% 35%,
      rgba(255, 63, 178, 0.16),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #06152f 0%,
      #0c1942 48%,
      #24134f 100%
    );
  border-top: 3px solid #22d3f6;
}

.mb-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.23;
  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.05) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.05) 1px,
      transparent 1px
    );
  background-size: 54px 54px;
}

.mb-footer::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -180px;
  width: 430px;
  height: 430px;
  pointer-events: none;
  border: 70px solid rgba(113, 75, 255, 0.08);
  border-radius: 50%;
}

.mb-footer .container {
  position: relative;
  z-index: 1;
  max-width: 1320px;
}

.mb-footer a {
  text-decoration: none;
}

/* Main Footer Layout */

.mb-footer__main {
  display: grid;
  grid-template-columns:
    minmax(320px, 1.25fr)
    minmax(360px, 0.9fr);
  gap: 80px;
  align-items: start;
}

.mb-footer__brand {
  max-width: 620px;
}

.mb-footer__logo {
  display: inline-flex;
  align-items: center;
  margin-bottom: 20px;
}

.mb-footer__logo img {
  display: block;
  width: 235px;
  max-width: 100%;
  height: auto;
  max-height: 78px;
  object-fit: contain;
  object-position: left center;
}

.mb-footer__description {
  max-width: 590px;
  margin: 0;
  color: #aebfe0;
  font-size: 16px;
  line-height: 1.75;
}

/* Responsible Gaming */

.mb-footer__responsible {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 580px;
  margin-top: 24px;
}

.mb-footer__age {
  display: inline-flex;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  align-items: center;
  justify-content: center;
  color: #071632;
  background: linear-gradient(
    145deg,
    #ffe263,
    #ffb824
  );
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-radius: 18px;
  box-shadow: 0 8px 0 #b86d00;
  font-size: 19px;
  font-weight: 900;
}

.mb-footer__responsible p {
  margin: 0;
  color: #9eafd0;
  font-size: 14px;
  line-height: 1.6;
}

.mb-footer__responsible strong {
  display: block;
  margin-bottom: 2px;
  color: #ffffff;
  font-size: 15px;
}

/* Navigation */

.mb-footer__navigation {
  display: grid;
  grid-template-columns: repeat(2, minmax(145px, 1fr));
  gap: 46px;
}

.mb-footer__nav-group h3 {
  position: relative;
  margin: 0 0 19px;
  padding-bottom: 12px;
  color: #2bd8ff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.mb-footer__nav-group h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 42px;
  height: 3px;
  background: linear-gradient(
    90deg,
    #2bd8ff,
    #ff42b7
  );
  border-radius: 999px;
}

.mb-footer__links {
  display: grid;
  gap: 12px;
}

.mb-footer__links a {
  position: relative;
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 9px;
  color: #dce7ff;
  font-size: 15px;
  font-weight: 700;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.mb-footer__links a::before {
  content: "";
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  background: #ff42b7;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255, 66, 183, 0.65);
}

.mb-footer__links a:hover,
.mb-footer__links a:focus-visible {
  color: #ffd23f;
  transform: translateX(4px);
}

/* Payments */

.mb-footer__payments {
  display: grid;
  grid-template-columns: minmax(210px, 0.55fr) minmax(0, 1.45fr);
  gap: 28px;
  align-items: center;
  margin-top: 38px;
  padding: 20px 22px;
  background: linear-gradient(
    120deg,
    rgba(20, 42, 92, 0.86),
    rgba(48, 27, 100, 0.82)
  );
  border: 1px solid rgba(72, 207, 255, 0.25);
  border-radius: 24px;
  box-shadow:
    0 16px 35px rgba(1, 7, 28, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.mb-footer__payments-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mb-footer__payments-heading span {
  color: #2bd8ff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.mb-footer__payments-heading strong {
  color: #ffffff;
  font-size: 18px;
  line-height: 1.3;
}

.mb-footer__payment-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
}

.mb-footer__pay-icon {
  display: inline-flex;
  width: 72px;
  height: 48px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 13px;
  box-shadow: 0 6px 12px rgba(0, 6, 28, 0.22);
  user-select: none;
}

.mb-footer__pay-icon img {
  display: block;
  width: 76%;
  max-width: 58px;
  max-height: 30px;
  object-fit: contain;
}

.mb-footer__pay-icon i {
  line-height: 1;
}

/* Individual Payment Backgrounds */

.mb-footer__pay-icon--card {
  background: #152d5d;
  border-color: rgba(43, 216, 255, 0.55);
}

.mb-footer__pay-icon--apple {
  color: #ffffff;
  background: #050505;
}

.mb-footer__pay-icon--apple i {
  font-size: 34px;
}

.mb-footer__pay-icon--google {
  color: #182646;
  background: #f7f9ff;
}

.mb-footer__pay-icon--google i {
  font-size: 34px;
}

.mb-footer__pay-icon--paypal {
  color: #087bbd;
  background: #e9f6ff;
  border-color: rgba(8, 123, 189, 0.35);
}

.mb-footer__pay-icon--paypal i {
  font-size: 28px;
}

.mb-footer__pay-icon--skrill {
  background: #fff0fc;
  border-color: rgba(197, 81, 183, 0.45);
}

.mb-footer__pay-icon--neteller {
  background: #efffde;
  border-color: rgba(131, 186, 59, 0.45);
}

.mb-footer__pay-icon--bank {
  background: #173a75;
  border-color: rgba(43, 216, 255, 0.55);
}

.mb-footer__pay-icon--paysafe {
  color: #10212c;
  background: #9fe84d;
  border-color: rgba(189, 255, 110, 0.6);
}

.mb-footer__pay-icon--paysafe b {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.mb-footer__pay-icon--bitcoin {
  background: #39270e;
  border-color: rgba(247, 147, 26, 0.65);
}

.mb-footer__pay-icon--ethereum {
  background: #28245d;
  border-color: rgba(126, 112, 255, 0.7);
}

.mb-footer__pay-icon--usdt {
  background: #103d38;
  border-color: rgba(38, 161, 123, 0.7);
}

.mb-footer__pay-icon--usdc {
  background: #132f5a;
  border-color: rgba(39, 117, 202, 0.75);
}

/* Footer Bottom */

.mb-footer__bottom {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  margin-top: 22px;
  padding-top: 19px;
  border-top: 1px solid rgba(174, 191, 224, 0.15);
}

.mb-footer__copyright,
.mb-footer__notice {
  margin: 0;
  color: #7f91b7;
  font-size: 13px;
  line-height: 1.5;
}

.mb-footer__notice {
  text-align: center;
}

.mb-footer__top-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #dce7ff;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.mb-footer__top-link span {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  color: #071632;
  background: #2bd8ff;
  border-radius: 9px;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 5px 0 #057c9c;
}

.mb-footer__top-link:hover,
.mb-footer__top-link:focus-visible {
  color: #ffd23f;
  transform: translateY(-2px);
}

/* Tablet */

@media (max-width: 991px) {

  .mb-footer__main {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .mb-footer__brand {
    max-width: 720px;
  }

  .mb-footer__navigation {
    max-width: 620px;
  }

  .mb-footer__payments {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .mb-footer__payment-icons {
    justify-content: flex-start;
  }

  .mb-footer__bottom {
    grid-template-columns: 1fr auto;
  }

  .mb-footer__notice {
    grid-column: 1 / -1;
    grid-row: 2;
    text-align: left;
  }

}

/* Mobile */

@media (max-width: 575px) {

  .mb-footer {
    padding: 46px 0 20px;
  }

  .mb-footer__main {
    gap: 36px;
  }

  .mb-footer__logo img {
    width: 205px;
  }

  .mb-footer__description {
    font-size: 14px;
    line-height: 1.7;
  }

  .mb-footer__responsible {
    align-items: flex-start;
  }

  .mb-footer__age {
    flex-basis: 52px;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    font-size: 17px;
  }

  .mb-footer__responsible p {
    font-size: 13px;
  }

  .mb-footer__navigation {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .mb-footer__links a {
    font-size: 13px;
  }

  .mb-footer__payments {
    padding: 18px;
    border-radius: 20px;
  }

  .mb-footer__payment-icons {
    justify-content: center;
    gap: 8px;
  }

  .mb-footer__pay-icon {
    width: 64px;
    height: 44px;
    border-radius: 11px;
  }

  .mb-footer__bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .mb-footer__notice {
    text-align: left;
  }

  .mb-footer__top-link {
    margin-top: 5px;
  }

}

/* Very Small Mobile */

@media (max-width: 370px) {

  .mb-footer__navigation {
    grid-template-columns: 1fr;
  }

}

/* ==================================================
                    MRBEAST FOOTER END
================================================== */
/* ==================================================
        DARK ICON AND PROVIDER BACKGROUNDS START
================================================== */

/* ==================================================
                  FOOTER PAYMENT ICONS
================================================== */

.mb-footer__pay-icon {
  background:
    linear-gradient(
      145deg,
      #142958 0%,
      #0a1736 100%
    ) !important;
  border-color: rgba(74, 208, 255, 0.35) !important;
  box-shadow:
    0 6px 12px rgba(0, 6, 28, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Visa and Mastercard */

.mb-footer__pay-icon--card {
  background:
    linear-gradient(
      145deg,
      #18366d,
      #0c1d43
    ) !important;
  border-color: rgba(43, 216, 255, 0.55) !important;
}

/* Apple Pay */

.mb-footer__pay-icon--apple {
  color: #ffffff !important;
  background:
    linear-gradient(
      145deg,
      #151d31,
      #050914
    ) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Google Pay */

.mb-footer__pay-icon--google {
  color: #ffffff !important;
  background:
    linear-gradient(
      145deg,
      #21386b,
      #101d42
    ) !important;
  border-color: rgba(80, 156, 255, 0.45) !important;
}

/* PayPal */

.mb-footer__pay-icon--paypal {
  color: #56bdff !important;
  background:
    linear-gradient(
      145deg,
      #153f68,
      #0a203c
    ) !important;
  border-color: rgba(52, 169, 236, 0.55) !important;
}

/* Skrill */

.mb-footer__pay-icon--skrill {
  background:
    linear-gradient(
      145deg,
      #4c214b,
      #24122f
    ) !important;
  border-color: rgba(255, 92, 213, 0.5) !important;
}

/* Neteller */

.mb-footer__pay-icon--neteller {
  background:
    linear-gradient(
      145deg,
      #244b32,
      #112a25
    ) !important;
  border-color: rgba(139, 221, 76, 0.5) !important;
}

/* Open Banking */

.mb-footer__pay-icon--bank {
  background:
    linear-gradient(
      145deg,
      #1a4582,
      #102456
    ) !important;
  border-color: rgba(43, 216, 255, 0.55) !important;
}

/* PaysafeCard */

.mb-footer__pay-icon--paysafe {
  color: #b9f86d !important;
  background:
    linear-gradient(
      145deg,
      #294b2a,
      #142b21
    ) !important;
  border-color: rgba(159, 232, 77, 0.55) !important;
}

/* Cryptocurrency */

.mb-footer__pay-icon--bitcoin {
  background:
    linear-gradient(
      145deg,
      #4a3011,
      #261806
    ) !important;
  border-color: rgba(247, 147, 26, 0.65) !important;
}

.mb-footer__pay-icon--ethereum {
  background:
    linear-gradient(
      145deg,
      #353274,
      #1b1948
    ) !important;
  border-color: rgba(126, 112, 255, 0.7) !important;
}

.mb-footer__pay-icon--usdt {
  background:
    linear-gradient(
      145deg,
      #16594c,
      #0c2f2b
    ) !important;
  border-color: rgba(38, 161, 123, 0.7) !important;
}

.mb-footer__pay-icon--usdc {
  background:
    linear-gradient(
      145deg,
      #184476,
      #10264d
    ) !important;
  border-color: rgba(39, 117, 202, 0.75) !important;
}

/* Preserve logo visibility */

.mb-footer__pay-icon img {
  filter:
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))
    drop-shadow(0 0 5px rgba(255, 255, 255, 0.08));
}


/* ==================================================
                    PROVIDER CARDS
================================================== */

.mb-why__provider {
  background:
    radial-gradient(
      circle at 50% 10%,
      rgba(71, 136, 255, 0.14),
      transparent 55%
    ),
    linear-gradient(
      145deg,
      #142a59 0%,
      #0b1739 100%
    ) !important;
  border-color: rgba(83, 163, 235, 0.35);
  box-shadow:
    0 8px 0 rgba(2, 9, 28, 0.58),
    0 15px 26px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.mb-why__provider:hover {
  background:
    radial-gradient(
      circle at 50% 10%,
      rgba(92, 159, 255, 0.22),
      transparent 58%
    ),
    linear-gradient(
      145deg,
      #19356d 0%,
      #101d49 100%
    ) !important;
  box-shadow:
    0 11px 0 rgba(2, 9, 28, 0.55),
    0 20px 32px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Provider names */

.mb-why__provider span {
  color: #f2f6ff !important;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
}

/* Provider logos */

.mb-why__provider img {
  filter:
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35))
    drop-shadow(0 0 7px rgba(255, 255, 255, 0.13));
}

/* Slightly brighten darker provider logos */

.mb-why__provider:nth-child(2) img,
.mb-why__provider:nth-child(3) img,
.mb-why__provider:nth-child(4) img,
.mb-why__provider:nth-child(6) img,
.mb-why__provider:nth-child(11) img,
.mb-why__provider:nth-child(13) img,
.mb-why__provider:nth-child(15) img {
  filter:
    brightness(1.16)
    contrast(1.06)
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35))
    drop-shadow(0 0 7px rgba(255, 255, 255, 0.16));
}

/* ==================================================
        DARK ICON AND PROVIDER BACKGROUNDS END
================================================== */
/* ==================================================
              WIDER CONTENT SECTIONS START
================================================== */

/*
  Make the main visual sections wider without changing
  the Hero section or stretching text across the screen.
*/

@media (min-width: 1200px) {

  #top-games > .container,
  #bonuses > .container,
  #games-library > .container,
  #rewards > .container,
  #why-mrbeast > .container,
  #about > .container,
  #faq > .container {
    width: calc(100% - 48px);
    max-width: 1320px;
    padding-right: 24px;
    padding-left: 24px;
  }

}

/* ==================================================
               WIDER CONTENT SECTIONS END
================================================== */
/* ==================================================
                  UPDATED HEADER WIDTH START
================================================== */

@media (min-width: 1200px) {

  .mrbeast-header .container {
    width: calc(100% - 48px);
    max-width: 1320px;
    padding-right: 24px;
    padding-left: 24px;
  }

  .mrbeast-header .logo img {
    width: 170px;
  }

  .mrbeast-header ul.navbar-nav {
    gap: 2px;
  }

  .mrbeast-header ul.navbar-nav > li {
    padding-right: 5px;
    padding-left: 5px;
  }

}

/* ==================================================
                   UPDATED HEADER WIDTH END
================================================== */

/* ==================================================
              LEGAL PAGES START
================================================== */
.legal-page { background:#17081d; color:#f7f3fb; }
.legal-page .mrbeast-header { position:relative; }
.legal-hero {
  padding:110px 0 75px;
  background:
    radial-gradient(circle at 15% 20%, rgba(0,229,255,.22), transparent 34%),
    radial-gradient(circle at 85% 15%, rgba(255,38,180,.24), transparent 32%),
    linear-gradient(135deg,#090611 0%,#29102b 55%,#090611 100%);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.legal-hero__eyebrow { display:inline-block; color:#ffb600; font-weight:800; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:16px; }
.legal-hero h1 { max-width:900px; font-size:52px; line-height:1.08; text-transform:none; margin-bottom:20px; }
.legal-hero p { max-width:800px; color:#ddd3e5; font-size:17px; }
.legal-updated { margin-top:24px; display:inline-flex; padding:9px 15px; border:1px solid rgba(255,182,0,.45); background:rgba(255,182,0,.08); border-radius:999px; color:#fff; font-weight:700; }
.legal-layout { padding:70px 0 90px; }
.legal-grid { display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:40px; align-items:start; }
.legal-card { background:linear-gradient(145deg,rgba(58,18,55,.95),rgba(20,9,30,.98)); border:1px solid rgba(255,255,255,.1); border-radius:22px; padding:42px; box-shadow:0 24px 60px rgba(0,0,0,.28); }
.legal-card section { padding:0; margin:0 0 38px; }
.legal-card section:last-child { margin-bottom:0; }
.legal-card h2 { color:#ffb600; font-size:28px; line-height:1.25; text-transform:none; letter-spacing:0; margin-bottom:15px; }
.legal-card h3 { color:#fff; font-size:20px; text-transform:none; letter-spacing:0; margin:20px 0 10px; }
.legal-card p,.legal-card li { color:#eee6f2; font-size:16px; line-height:1.8; }
.legal-card p+p { margin-top:13px; }
.legal-card ul { margin:14px 0 0; padding:0; }
.legal-card li { position:relative; padding-left:24px; margin-bottom:9px; }
.legal-card li::before { content:'★'; position:absolute; left:0; top:0; color:#00e5ff; font-size:12px; }
.legal-card a { color:#00e5ff; text-decoration:underline; text-underline-offset:3px; }
.legal-aside { position:sticky; top:24px; background:#0d0915; border:1px solid rgba(0,229,255,.18); border-radius:20px; padding:26px; }
.legal-aside h2 { font-size:18px; text-transform:none; letter-spacing:0; margin-bottom:16px; }
.legal-aside a { display:block; color:#eee6f2; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.legal-aside a:hover { color:#ffb600; }
.legal-note { margin-top:22px; padding:18px; border-radius:14px; background:rgba(255,182,0,.09); border-left:4px solid #ffb600; color:#fff; }
.legal-page .mb-footer__navigation { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media(max-width:991px){.legal-grid{grid-template-columns:1fr}.legal-aside{position:static}.legal-hero h1{font-size:40px}.legal-card{padding:30px}.legal-page .mb-footer__navigation{grid-template-columns:1fr 1fr}}
@media(max-width:575px){.legal-hero{padding:80px 0 55px}.legal-hero h1{font-size:32px}.legal-card{padding:22px;border-radius:16px}.legal-page .mb-footer__navigation{grid-template-columns:1fr}}
/* ==================================================
               LEGAL PAGES END
================================================== */