* {
	font-family: 'League Spartan', sans-serif;
}

.content-wrap {
	min-height: 87vh;
}

.custom-button-1 {
	padding: 10px 0px;
	font-weight: 700;
	color: black;
	background: linear-gradient(0deg, rgba(128, 128, 128, 1) 0%, rgba(255, 255, 255, 1) 100%);
}

.custom-button-2 {
	padding: 10px 0px;
	font-weight: 700;
	color: white;
	background: linear-gradient(0deg,#CA3700 0%,#F47C05 100%);
}

.custom-button-3 {
	padding: 10px 0px;
	font-weight: 700;
	color: white;
	background: linear-gradient(0deg,#CA3700 0%,#F47C05 100%);
}

/* Mobile home DEPOSIT/LOGOUT (or LOGIN/REGISTER) buttons.
   Scoped so the shared .custom-button-* classes stay unchanged elsewhere. */
.mobile-login-resgiter .custom-button-1 {
	background: linear-gradient(180deg, #CA3700 0%, #100F0E 100%);
}

.mobile-login-resgiter .custom-button-2 {
	background: linear-gradient(180deg, #F47C05 0%, #CA3700 100%), linear-gradient(180deg, #CA3700 0%, #100F0E 100%);
}

/* right button text: same gold gradient as the header btn-2 text */
.mobile-login-resgiter .custom-button-2 a {
	background: linear-gradient(180deg, #FFFDC6 0%, #FFEA6E 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.custom-form-1 {
	background-color: rgba(255, 255, 255, 0.93);
	border-radius: 5px;
}

.custom-form-2 {
	background-color: rgba(0, 0, 0, 0.8);
	border-radius: 5px;
	color: white;
}

.form-title {
	border-bottom: 5px #F47C05 solid;
	margin: 20px auto;
	padding: 0px 10px;
	text-align: center;
	font-size: 28px;
	font-weight: bold;
	border-radius: 10px;
}

#register-form i,
#login-form i {
	color: #F47C05;
}

#depositTab .nav-link {
	color: #F47C05;
}

/*HEADER*/
.top-bar-color {
	background-color: #100F0E;
}

#header-wrap {
    background:
        linear-gradient(0deg, #C0761C 0%, #FFCE41 15%, #F8B641 30%, #DF8A09 52%, #FCD64E 75%, #F9B643 85%, #BD6E17 100%) top / 100% 5px no-repeat,
        linear-gradient(0deg, #C0761C 0%, #FFCE41 15%, #F8B641 30%, #DF8A09 52%, #FCD64E 75%, #F9B643 85%, #BD6E17 100%) bottom / 100% 5px no-repeat,
        linear-gradient(180deg, #F47C05 0%, #CA3700 100%),
        #D9D9D9;
}

#logo img {
	height: 100px;
}

#top-bar .login-register-btn img {
	height: 50px;
	transform: scale(1.05);
}

#top-bar .login-register-btn .header-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* btn-1 trapezium slants toward the top-right corner, so nudge the
	   centred label slightly left to sit in the button's wider left area. */
	padding-right: 16px;
	width: 156px;
	height: 50px;
	transform: scale(1.05);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	color: #fff;
	font-weight: bold;
	font-size: 20px;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
}

/* btn-2 trapezium slants toward the bottom-left corner, so reverse the
   btn-1 nudge and push the centred label slightly right instead. */
#top-bar .login-register-btn .header-btn-2 {
	padding-right: 0;
	padding-left: 16px;
}

/* JOIN NOW */
#top-bar .login-register-btn .header-btn-2 span {
	background: linear-gradient(180deg, #FFFDC6 0%, #FFEA6E 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* MOBILE TOP BAR: menu left, logo dead-centre.
   1fr auto 1fr keeps the logo centred on screen no matter how wide the menu button is. */
.mobile-top-bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
}

.mobile-top-bar .primary-menu-trigger {
	justify-self: start;
}

.mobile-top-bar__logo {
	justify-self: center;
}

/* On mobile the gold-bordered #header-wrap is hidden, so the top bar's only
   border is the theme's faint 1px line. Restyle it to match the desktop
   header's 5px gold gradient border. */
@media (max-width: 991px) {
	#top-bar {
		border-bottom: 5px solid;
		border-image: linear-gradient(0deg, #C0761C 0%, #FFCE41 15%, #F8B641 30%, #DF8A09 52%, #FCD64E 75%, #F9B643 85%, #BD6E17 100%);
		border-image-slice: 1;
	}
}

/*HEADER END*/

/* The Canvas theme sets ::selection to white-on-white (its --cnvs-themecolor is
   #fff), so highlighted text becomes invisible. Restore a normal highlight. */
::selection {
	background: #3390ff;
	color: #fff;
	text-shadow: none;
}

::-moz-selection {
	background: #3390ff;
	color: #fff;
	text-shadow: none;
}

.member-form-background {
	background-image: url('../../../images/member-page-background.png');
	background-position: center;
	background-size: cover;
}

/*PROFILE*/
.profile-container {
	background-color: rgba(255, 255, 255, 0.92);
	border-radius: 10px;
	padding: 20px;
	height: 100%;
	color: #222;
}

.profile-container a {
	color: #222;
}

.profile-container a:hover {
	color: #F47C05;
}

/* Sidebar: uppercase kept here only (not on the whole panel), full-width links */
.side-bar-item {
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.3px;
	border-radius: 6px;
	margin-bottom: 4px;
	transition: background-color 0.15s ease;
}

.side-bar-item a {
	display: block;
	padding: 11px 14px;
	font-size: 0.9rem;
}

.side-bar-item:not(.active):hover {
	background: rgba(244, 124, 5, 0.08);
}

.side-bar-item.active {
	background: linear-gradient(180deg, #F47C05 0%, #CA3700 100%);
}

.side-bar-item.active a {
	color: white;
}

/* ===== MEMBER ACCOUNT PAGES — red/gold theme to match home & header =====
   Scoped to .profile-container, which is used ONLY by the 4 member account
   pages (Dashboard, Change Password, Game ID, History) and their sidebar, so
   shared classes like .custom-button-2 stay blue everywhere else. */

/* "MY ACCOUNT" title bar: blue -> red gradient with gold underline */
.page-title.member-page-title {
	background: linear-gradient(180deg, #F47C05 0%, #CA3700 100%);
	border-bottom: 4px solid;
	border-image: linear-gradient(0deg, #C0761C 0%, #FFCE41 15%, #F8B641 30%, #DF8A09 52%, #FCD64E 75%, #F9B643 85%, #BD6E17 100%);
	border-image-slice: 1;
}

/* SAVE / SUBMIT buttons: blue -> red gradient */
.profile-container .custom-button-2 {
	background: linear-gradient(180deg, #F47C05 0%, #CA3700 100%);
}

.profile-container .custom-button-2:hover {
	background: linear-gradient(180deg, #D96A00 0%, #CA3700 100%);
	color: #fff;
}

/* Game ID cards: red title + gold/red accent border */
.profile-container .card-dashboard {
	border: 1px solid #F7C93E;
	border-top: 4px solid #F47C05;
	border-radius: 8px;
}

.profile-container .card-dashboard .card-title {
	color: #F47C05;
	font-weight: 700;
}

/* Form fields focus: blue ring -> red ring */
.profile-container .form-control:focus {
	border-color: #F47C05;
	box-shadow: 0 0 0 0.2rem rgba(244, 124, 5, 0.25);
}

/* ----- Game ID cards: clearer rows, monospace values, copy buttons ----- */
.profile-container .card-dashboard.game-id-card {
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.profile-container .card-dashboard.game-id-card:hover {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.profile-container .game-id-card .card-body {
	padding: 1rem 1.25rem 1.1rem;
}

.profile-container .game-id-card .card-title {
	margin-bottom: 0.75rem;
	padding-bottom: 0.55rem;
	border-bottom: 1px solid #f0e2c6;
	font-size: 1.15rem;
	letter-spacing: 0.3px;
}

.game-id-field {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.45rem 0;
}

.game-id-field + .game-id-field {
	border-top: 1px dashed #eee;
}

.game-id-label {
	flex: 0 0 42px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #b08a2e;
}

.game-id-value {
	flex: 1 1 auto;
	min-width: 0;
	font-family: "Consolas", "Menlo", "Courier New", monospace;
	font-size: 0.98rem;
	font-weight: 600;
	color: #222;
	word-break: break-all;
	-webkit-user-select: all;
	user-select: all;
}

.game-id-value.game-id-empty {
	font-family: inherit;
	font-weight: 400;
	font-style: italic;
	color: #adadad;
	-webkit-user-select: none;
	user-select: none;
}

.game-id-copy {
	flex: 0 0 auto;
	border: 0;
	background: transparent;
	color: #F47C05;
	font-size: 1.05rem;
	line-height: 1;
	padding: 4px 7px;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.game-id-copy:hover {
	background: rgba(244, 124, 5, 0.1);
}

.game-id-copy:active {
	transform: scale(0.9);
}

.game-id-copy.copied {
	color: #1e9e57;
	background: rgba(30, 158, 87, 0.12);
}

/* Shown when the member has no game IDs at all */
.game-id-empty-state {
	text-align: center;
	padding: 2.5rem 1rem;
	color: #8a8a8a;
	border: 1px dashed #e0c98a;
	border-radius: 10px;
	background: rgba(231, 178, 74, 0.06);
}

.game-id-empty-state svg {
	display: block;
	margin: 0 auto 0.6rem;
	color: #e0c98a;
}

/* Game IDs / passwords must keep their real casing (panel no longer forces
   uppercase, but stay explicit so copied text always matches what's shown). */
.game-id-value {
	text-transform: none;
}

.game-id-copy svg {
	display: block;
}

/* ----- Shared building blocks for the member account pages ----- */

/* Section heading */
.account-heading {
	margin: 0 0 1.25rem;
	padding-bottom: 0.6rem;
	font-size: 1.25rem;
	font-weight: 700;
	color: #F47C05;
	border-bottom: 2px solid #f0e2c6;
}

/* Form labels + hints */
.profile-container .form-label {
	margin-bottom: 0.35rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: #444;
}

.account-hint {
	margin: 0.2rem 0 1.1rem;
	font-size: 0.8rem;
	color: #888;
}

/* Password field with a show/hide toggle */
.password-field {
	position: relative;
}

.password-field .form-control {
	padding-right: 44px;
}

.password-toggle {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	border: 0;
	background: transparent;
	color: #999;
	padding: 6px;
	line-height: 0;
	border-radius: 6px;
	cursor: pointer;
}

.password-toggle:hover {
	color: #F47C05;
}

/* Dashboard: welcome banner + quick links */
.account-welcome {
	margin-bottom: 1.25rem;
	padding: 1.5rem;
	border-radius: 10px;
	background: linear-gradient(135deg, #F47C05 0%, #CA3700 100%);
	color: #fff;
}

.account-welcome__hi {
	font-size: 0.9rem;
	opacity: 0.85;
}

.account-welcome__name {
	font-size: 1.6rem;
	font-weight: 700;
	word-break: break-word;
}

/* Dashboard: customer details list */
.account-info {
	margin: 0;
	border: 1px solid #eadfca;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}

.account-info__row {
	display: flex;
	gap: 1rem;
	padding: 0.85rem 1.1rem;
}

.account-info__row + .account-info__row {
	border-top: 1px solid #f1e7d3;
}

.account-info__label {
	flex: 0 0 120px;
	margin: 0;
	font-size: 0.85rem;
	font-weight: 600;
	color: #8a7a55;
}

.account-info__value {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-weight: 600;
	color: #222;
	word-break: break-word;
}

.account-info__empty {
	color: #b3b3b3;
	font-weight: 400;
}

/* History table tidy-up */
.profile-container .table {
	margin-bottom: 0;
}

.profile-container .table thead th {
	background: #f7f2e6;
	color: #7a5b1e;
	font-weight: 700;
	border-bottom: 2px solid #F7C93E;
	white-space: nowrap;
}

.profile-container .table td,
.profile-container .table th {
	vertical-align: middle;
}

@media (max-width: 400px) {
	.account-info__label {
		flex-basis: 90px;
	}
}

/*PROFILE END*/

/* ===== MEMBER FORM PAGES — red theme to match home & account =====
   .custom-form-2 wraps ONLY the member form panels (Login, Register, Deposit,
   Withdraw, Withdraw-success), so scoping here flips their blue accents to the
   home/account red while shared classes stay blue everywhere else. */
.custom-form-2 .form-title {
	border-bottom-color: #F47C05;
}

.custom-form-2 .custom-button-2 {
	background: linear-gradient(180deg, #F47C05 0%, #CA3700 100%);
}

.custom-form-2 .custom-button-2:hover {
	background: linear-gradient(180deg, #D96A00 0%, #CA3700 100%);
	color: #fff;
}

/* form fields focus: blue ring -> red ring */
.custom-form-2 .form-control:focus {
	border-color: #F47C05;
	box-shadow: 0 0 0 0.2rem rgba(244, 124, 5, 0.25);
}

/*HOME*/
.slider-border {
	background: linear-gradient(0deg, rgba(192, 118, 28, 1) 0%, rgba(255, 206, 65, 1) 15%, rgba(248, 182, 65, 1) 30%, rgba(223, 138, 9, 1) 52%, rgba(252, 214, 78, 1) 75%, rgba(249, 182, 67, 1) 85%, rgba(189, 110, 23, 1) 100%);
	padding: 5px 0px;
}

.announcement {
	background-color: rgba(0, 0, 0, 1);
}

.announcement-speaker img {
	animation: speaker-shake 0.5s infinite;
}

.ticker-container {
	color: white;
	overflow: hidden;
}

.ticker-container img {
	height: 50px;
	width: 50px;
}

.home-page-step {
    background: linear-gradient(180deg, #F47C05 0%, #CA3700 100%);
    color: #ffffff;
    font-weight: 700;
}


.home-bg {
	/* ONE continuous background image for BOTH sections below (they're wrapped together) —
	   top-anchored so the gold arcs stay at the top; #0a0806 fills any area below the image. */
	background: #0a0806 url("../../../images/home/bg-image.png") top center / 100% auto no-repeat;
}

.home-page-main {
	/* default background for EVERY content page that reuses this class (login, register,
	   member, deposit, withdraw, …) — same continuous bg-image, dark fill below. */
	background: #0a0806 url("../../../images/home/bg-image.png") top center / 100% auto no-repeat;
	color: white;
	/* pull the footer (character + banners) up toward the LIVE TRANSACTION table:
	   the theme's pb-6/py-lg-6 add a 5rem gap below the table — trim it right down. */
	padding-bottom: 1rem !important;
}

/* on the home page the .home-bg wrapper already paints ONE continuous image across both
   sections — so don't double it up on the inner main section there */
.home-bg .home-page-main {
	background: transparent;
}

.ranking-title-trophy img {
	height: 200px;
}

.ranking-title {
	font-family: 'League Spartan';
	font-weight: 700;
	font-size: 50px;
	line-height: 75px;
	text-align: center;
	background: linear-gradient(180deg, #FFFFFF 0%, #FBF292 40.38%, #EC8E0D 79.81%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0px 2px 2px rgba(190, 50, 6, 0.8)) drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.8));
}

/* ===== LIVE TRANSACTION table ===== */
/* gold gradient frame with rounded corners */
.ranking-table-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 3px;
	border-radius: 14px;
	background: linear-gradient(180deg, #f9e08a 0%, #F7C93E 50%, #b87118 100%);
}

/* clips the table's square corners to the rounded frame */
.ranking-table-clip {
	border-radius: 12px;
	overflow: hidden;
}

.home-ranking-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	table-layout: fixed;
	background: #100E0B;
	color: #ffffff;
}

.home-ranking-table thead th {
	padding: 15px 12px;
	text-align: center;
	font-weight: 700;
	letter-spacing: 1px;
	color: #ffffff;
	background: linear-gradient(180deg, #F47C05 0%, #DD5A02 55%, #CA3700 100%);
	border-bottom: 2px solid #F7C93E;
}

.home-ranking-table tbody td {
	padding: 13px 16px;
	text-align: center;
	font-weight: 700;
	border-top: 1px solid #924401;
	border-right: 1px solid #924401;
}

.home-ranking-table tbody tr:first-child td {
	border-top: none;
}

.home-ranking-table tbody td:last-child {
	border-right: none;
}

/* amount column in gold */
.home-ranking-table tbody td.amount {
	color: #F7B803;
}

/* footer continues the home-bg; dark fill blends with the image bottom, room for character + banners */
.home-footer {
	position: relative;
	/* transparent — the .home-bg wrapper supplies ONE continuous image across both sections */
	background: transparent;
	/* tall section so the character renders large, mirroring mcmclub-main
	   (its footer-bg was 1440×449 ≈ 31vw; the character below is 115% of this) */
	height: clamp(300px, 31vw, 560px);
}

.home-footer .footer-bg {
	display: none;
}

/* character: flush to the left edge, large, spilling slightly above the section */
.home-footer .footer-image {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 115%;   /* large — spills ~15% above the section, like mcmclub-main */
	z-index: 2;
}

.home-footer .footer-image img {
	display: block;
	height: 100%;
	width: auto;
}

/* social banners: right side, vertically centered */
.home-footer .footer-banners {
	position: absolute;
	right: 8%;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	gap: 1rem;
	z-index: 1;
}

.home-footer .footer-banners a {
	display: block;
	width: 160px;
	max-width: 100%;
	cursor: pointer;
}

.home-footer .footer-banners img {
	display: block;
	width: 100%;
	height: auto;
}

/*HOME END*/

/*CUSTOM CANVAS CODE*/
.menu-link {
	font-size: 1.25rem;
}

/*CUSTOM CANVAS CODE END*/

/*SLOT*/
.slot-page-background {
	background-image: url('../../images/slot-bg.png');
	background-position: center;
	background-size: 100% 100%;
}

.overlay-container {
	cursor: pointer;
	position: relative;
	/*	background-image: url('../../images/lucky-draw/treasure-box.png');*/
	background-position: center;
	background-size: 100% 100%;
}

.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.3);
	/* Adjust the alpha value for transparency */
	opacity: 1;
	transition: 0.5s ease;
	/* Add a smooth transition effect */
}

.overlay-container:hover .overlay {
	opacity: 0;
}

.overlay-container:hover img {
	/*	animation: speaker-shake 1s infinite;*/
}

.slot-game-effect {
	transition: 0.5s ease;
}

.slot-game-effect:hover {
	transform: scale(1.05);
	filter: drop-shadow(0 0 1rem rgb(255, 255, 255));
}

.slot-amount {
	position: absolute;
	font-weight: 600;
	color: white;
	bottom: 5%;
	right: 5%;
	font-size: 26px;
}

/*SLOT END*/

/*LUCKY DRAW*/
.lucky-draw-container {
	max-width: 800px;
}

.lucky-draw-page-background {
	background-image: url('../../images/lucky-draw/lucky-draw-bg.png');
	background-position: center;
	background-size: 100% 100%;
	padding: 0px;
}

.treasure-box-container {
	background-image: url('../../images/lucky-draw/treasure-box-container.png');
	background-position: center;
	background-size: 100% 100%;
}

.treasure-box-container img {
	width: 100%;
}

.lucky-draw-button {
	background-image: url('../../images/lucky-draw/button-bg.png');
	background-position: center;
	background-size: 100% 100%;
	font-size: 36px;
}

.golden-word img {
	height: 55px;
}

.black-bg-counter {
	display: inline-block;
	background-color: black;
	color: white;
	padding: 0px 20px;
	border-radius: 10px;
}

/*LUCKY DRAW END*/

/*PROMOTION*/
.promotion-page-background {
	background-color: #010001;
	padding: 0px;
}

.promotion-header {
	background-image: url('../../images/promotion/top-haze-forest.png');
	background-position: center;
	background-size: 100% 100%;
}

.promotion-container {
	border-radius: 10px;
	transition: 0.5s;
}

.promotion-container:hover {
	box-shadow: 0px 0px 10px 5px white;
}

.promotion-image {
	border-right: 5px solid transparent;
	border-image: linear-gradient(0deg, rgba(192, 118, 28, 1) 0%, rgba(255, 206, 65, 1) 15%, rgba(248, 182, 65, 1) 30%, rgba(223, 138, 9, 1) 52%, rgba(252, 214, 78, 1) 74%, rgba(249, 182, 67, 1) 85%, rgba(189, 110, 23, 1) 100%);
	border-image-slice: 1;
	/* Ensure the entire border is filled with the gradient */
}

.promotion-image img {
	width: 100%;
	height: auto;
	/* Ensure the image scales proportionally */
}

.promotion-more-info-button {
	background: linear-gradient(0deg, rgba(1, 1, 1, 1) 0%, rgba(65, 65, 65, 1) 100%);
	font-size: 40px;
	text-align: center;
	color: white;
	font-weight: bold;
	border-radius: 0px 10px 10px 0px;
	cursor: pointer;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/*PROMOTION END*/

/*VIP*/
.vip-header {
	background-image: url('../../images/vip/vip-title.png');
	background-position: center;
	background-size: 100% 100%;
}

.vip-table {
	background-image: url('../../images/vip/table-bg.png');
	background-position: center;
	background-size: cover;
	text-align: center;
}

.vip-table .table {
	--bs-table-bg: transparent;
}

.vip-logo {
	height: 100px;
}

.true-false-icon img {
	height: 40px;
}

/*VIP END*/

/*RESULT*/
.result-header {
	background: url("../../images/result/top-background.png");
	background-position: center;
	background-size: 100% 100%;
}

.result-title-background {
	background: url("../../images/result/title-background.png");
	background-position: center;
	background-size: cover;
}

.stage-container {
	text-align: center;
}

.result-name {
	color: white;
	font-size: 60px;
	font-weight: bold;
	white-space: nowrap;
}

.stage-3 {
	padding: 100px 0px 80px 0px;
}

.stage-2 {
	padding: 100px 0px 160px 0px;
}

.stage-1 {
	padding: 100px 0px 280px 0px;
}

.stage-container .stage-main-part {
	background: linear-gradient(0deg, rgba(157, 7, 11, 1) 0%, rgba(174, 11, 14, 1) 50%, rgba(214, 12, 15, 1) 100%);
	box-shadow: inset 0px 15px 2px 0px rgba(255, 255, 255, .5);
}

.stage-container .stage-border-part {
	background: linear-gradient(0deg, rgba(138, 127, 133, 1) 0%, rgba(160, 157, 164, 1) 50%, rgba(206, 205, 203, 1) 100%);
	box-shadow: inset 0px 15px 2px 0px rgba(255, 255, 255, .5);
	padding: 0px;
}

.result-main {
	background: url("../../images/result/bottom-background.png");
	background-position: center;
	background-size: 100% 100%;
}

.result-reward {
	background: linear-gradient(0deg, rgba(84, 0, 0, 1) 0%, rgba(255, 44, 44, 1) 100%);
	box-shadow: 0 -3px 3px white, 0 3px 1px darkred;
	font-size: 50px;
	color: white;
	text-align: center;
	font-weight: bold;
	border-radius: 5px;
}

/*RESULT END*/

/*FOOTER*/
.desktop-footer {
	color: white;
	background: linear-gradient(0deg, rgba(27, 23, 23, 1) 0%, rgba(48, 48, 48, 1) 100%);
}

.footer-spacing {
	height: 72px;
	background-color: black;
}

.mobile-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 72px;
	display: flex;
	align-items: stretch;
	/* match the home page steps section background */
	background: linear-gradient(180deg, #F47C05 0%, #CA3700 100%);
	/* sit above the home footer banners (z-index 3) and side icons (z-index 100) */
	z-index: 1030;
}

/* four equal-width, evenly spaced items */
.mobile-footer-item {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 6px 2px;
	text-decoration: none;
}

.mobile-footer-item img {
	width: 40px;
	height: 40px;
	object-fit: contain;
	display: block;
}

.mobile-footer-item span {
	font-weight: 600;
	font-size: 12px;
	line-height: 1;
	color: #fff;
	white-space: nowrap;
}

/*FOOTER END*/



.testing-123456 {
	width: 300px;
	height: 200px;
	background: linear-gradient(to bottom, #3498db, #2980b9, #2ecc71);
	/* Blue, light blue, and green gradient background */
	clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
	filter: drop-shadow(0 0 0.75rem rgb(255, 217, 0));
	position: relative;
}



.custom-grey-bg {
	background-color: #f5f8fa;
	box-shadow: 2px 2px 5px 2px grey;
	padding: 1rem;
}

.trash-can-icon {
	color: red;
	cursor: pointer;
}

.custom-rainbow-color-button {
	background: linear-gradient(90deg, rgba(225, 25, 77, 1) 0%, rgba(236, 103, 40, 1) 17%, rgba(252, 177, 23, 1) 34%, rgba(37, 178, 74, 1) 51%, rgba(35, 139, 199, 1) 68%, rgba(103, 97, 171, 1) 85%, rgba(144, 41, 142, 1) 100%);
}

.custom-gradient-color-button-1 {
	color: white;
	background: linear-gradient(180deg, #5693F6 0%, #4A83F6 49.08%, #3F64EB 100%);
	background-size: 100% 200%;
	font-weight: bold;
	transition: 0.5s;
}

.custom-gradient-color-button-1:hover {
	background-position: 0% 100%;
	color: white;
}

.custom-gradient-color-button-2 {
	background: linear-gradient(90deg, rgba(58, 243, 193, 1) 0%, rgba(137, 194, 254, 1) 18%, rgba(155, 161, 255, 1) 33%, rgba(158, 144, 255, 1) 48%, rgba(196, 122, 248, 1) 63%, rgba(252, 138, 192, 1) 78%, rgba(255, 188, 89, 1) 100%);
	color: white;
	background-size: 150% auto;
	font-weight: bold;
	transition: 0.5s;
}

.custom-gradient-color-button-2:hover {
	background-position: 100% 0%;
}

.border-radius-with-inset-shadow {
	border-radius: 30px;
	box-shadow: 0px 0px 12px 0px rgba(0, 87, 255, 0.33) inset;
}

.btn-custom-1 {
	border: 1px solid #CDCDCD;
	color: black;
	border-radius: 50px;
	background: #F2F2F2;
	text-align: center;
	padding: 10px 0px;
}

.btn-custom-2 {
	border: 1px solid #CDCDCD;
	color: white;
	border-radius: 50px;
	background: linear-gradient(180deg, #5693F6 0%, #4A83F6 49.08%, #3F64EB 100%);
	text-align: center;
	padding: 10px 0px;
}

/*END OF CUSTOM CLASS*/
.contact-us-header {
	padding: 5px;
}

.contact-us-header i {
	color: white;
}

.page-title-banner {
	background-image: url("../../images/title-banner.png");
	background-position: center;
	text-align: center;
	color: white;
	font-weight: bold;
	padding: 150px 0px;
}

.page-title {
	border-radius: 10px;
	background: linear-gradient(0deg,#243bb8 0%,   #3F64EB 100% );
	font-weight: bold;
	color: white;
}

/*HOME CSS*/
.home-main-content {
	background-color: #080c2c;
}

.home-main-content img {
	width: 100%;
}

.home-main-content-shape {
	background-color: white;
	border-radius: 5vw;
}

.home-sub-content {
	background-image: url("../../images/icon-background.png");
}

.home-sub-content-icon {
	text-align: center;
}

.home-sub-content-icon img {
	transition: 0.5s;
}

.home-sub-content-icon img:hover {
	filter: drop-shadow(0px 0px 30px #04F1FF);
	cursor: pointer;
}

.home-sub-content-icon-text {
	color: #FFF;
	padding: 10px 0px;
}

.home-slider-content {
	background-color: #3B51B0;
}

.home-slider-content img {
	width: 100%;
}

.home-fade-slider-content {
	background: radial-gradient(circle, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 51, 1) 75%, rgba(0, 0, 102, 1) 90%, rgba(0, 0, 153, 1) 100%);
}

.home-fade-slider-content video {
	margin: 10px auto;
	border-radius: 20px;
	border: 5px solid black;
	box-shadow: 0px -3px 6px grey;
}

.home-contact-us-content {
	background-image: url("../../images/home-contact-us-background.png");
}

/*HOME CSS END*/

/*ABOUT CSS*/
.about-us-main-content-list li {
	margin: 10px auto;
}

.about-us-icon .home-sub-content-title {
	line-height: 1;
	margin: 20px auto;
}

.about-us-icon {
	border-right: 3px solid lightgrey;
}

.about-us-icon:last-child {
	border-right: none;
}

.about-us-icon img {
	transition: 0.5s;
}

.about-us-icon img:hover {
	filter: drop-shadow(0px 0px 20px #04F1FF);
	cursor: pointer;
}

/*ABOUT US CSS END*/



.top-bar-text {
	color: white;
	font-weight: 600;
	padding: 15px;
	cursor: pointer;
	transition: 0.3s;
}

.top-bar-text:hover {
	color: black;
	background-color: #ffe5cc;
}

#productForm .form-control:focus {
	border-color: var(--bs-border-color);
	box-shadow: none;
}

#cart_icon,
#wishlist_icon {
	position: relative;
	color: #e1194d;
	cursor: pointer;
}

#cart_icon:hover,
#wishlist_icon:hover {
	color: black;
}

.totalItem {
	position: absolute;
	right: -10px;
	top: -10px;
	background-color: orange;
	color: white;
	padding: 0px 5px;
	border-radius: 50%;
	font-size: 12px;
}

/*EDIT CANVAS CSS*/
.primary-menu-trigger {
	padding: 5px;
	border-radius: 5px;
}

.is-expanded-menu .sub-menu-container,
.is-expanded-menu .mega-menu-content {
	background-color: #011351;
}

.cnvs-hamburger .cnvs-hamburger-inner,
.cnvs-hamburger .cnvs-hamburger-inner::before,
.cnvs-hamburger .cnvs-hamburger-inner::after {
	background-color: white;
}

.product-category.nav-pills .nav-link {
	padding: 20px 0px;
	font-weight: 700;
	border-radius: 50px;
	border: 1px solid #CDCDCD;
	background: #F2F2F2;
	color: black;
}

.product-category.nav-pills .nav-link.active,
.product-category.nav-pills .show>.nav-link {
	color: white;
	border-radius: 50px;
	background: linear-gradient(180deg, #5693F6 0%, #4A83F6 49.08%, #3F64EB 100%);
}

.product-category li {
	margin: 0px 5px;
}

.mobile-product-category .swiper-slide {
	cursor: pointer;
	padding: 10px 30px;
	width: auto;
	text-align: center;
	font-weight: 700;
	border-radius: 50px;
	border: 1px solid #CDCDCD;
	background: #F2F2F2;
	color: black;
}

.mobile-product-category .swiper-slide.active {
	color: white;
	border-radius: 50px;
	background: linear-gradient(180deg, #5693F6 0%, #4A83F6 49.08%, #3F64EB 100%);
}

/*7 COLOR IN HEADER WRAP*/
.color-1 {
	background-color: #e1194d;
}

.color-2 {
	background-color: #ec6728;
}

.color-3 {
	background-color: #fcb117;
}

.color-4 {
	background-color: #25b24a;
}

.color-5 {
	background-color: #238bc7;
}

.color-6 {
	background-color: #6761ab;
}

.color-7 {
	background-color: #90298e;
}

.home-title {
	text-align: center;
	font-weight: bold;
	margin: 20px auto;
	font-size: 26px;
}

.footer-title {
	font-weight: bold;
	margin: 5px auto;
}

.footer-details a,
.product-title a {
	cursor: pointer;
	color: black;
}

.footer-details:hover,
.footer-details a:hover,
.product-title a:hover {
	color: #e1194d;
}

.copyrights {
	padding: 20px 0px;
	background-color: #14204F;
	color: white;
	font-weight: bold;
}

.product-box-shadow {
	height: 100%;
}

.product-box-shadow:hover {
	box-shadow: 0px 10px 20px grey;
}

.product-image {
	/*	height: 75%;*/
}

.product .product-image>a,
.product .product-image .slide a,
.product .product-image img {
	height: 100%;
	object-fit: cover;
}

.product-title {
	font-weight: 1000;
}

.product-price {
	font-size: unset;
	font-weight: 600;
}

.category-title {
	font-weight: bold;
	font-size: 20px;
	border-bottom: 1px solid grey;
	text-align: center;
}

/*MEMBER ACCOUNT CSS*/
.member-account-title {
	font-weight: bold;
	padding-bottom: 1rem;
	font-size: 20px;
	border-bottom: 1px solid grey;
}

.member-account-details {
	padding-top: 1rem;
}

.wishlist-table td img {
	height: 200px;
	width: 130px;
	object-fit: cover;
}

.mobile-wishlist-title {
	font-weight: bold;
	font-size: 12px;
}

.mobile-wishlist-details {
	font-size: 10px;
}

/*RESPONSIVE TABLE DISPLAY*/
.display-table-desktop {
	display: table-cell;
}

.display-table-mobile {
	display: none;
}

/*PRODUCT DETAILS*/
.radio-box input[type="radio"] {
	display: none;
}

.radio-box label {
	border: 2px solid grey;
	padding: 10px;
	cursor: pointer;
	border-radius: 3px;
	text-align: center;
}

.radio-box input[type="radio"]:checked+label {
	background-color: #e1194d;
	color: #fff;
	border: 2px solid white;
}

.product-details-title {
	font-weight: 700;
	font-size: 18px;
	margin: 5px 0px;
}

.attribute-name {
	font-size: smaller;
}

.attribute-description {
	color: grey;
}

.quantity-in-cart {
	font-weight: 700;
	font-size: 12px;
	position: absolute;
	bottom: 0px;
	right: 10px;
}

.text-truncate-2-line {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	-webkit-line-clamp: 2;
}

/*CART VIEW CSS*/
.process-steps li .i-bordered.disabled {
	--cnvs-i-bg-color: lightgrey !important;
	border: none;
}

.canvas-tabs {
	border-bottom: 1px solid grey;
}

/* new update */
@keyframes floatUpDown {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(60px);
	}

}

.floating-icon {
	cursor: pointer;
}

.floating-icon img {
	animation: floatUpDown 5s ease-in-out infinite;
}



.py-lg-7 {
    padding-top: 5rem !important;
    padding-bottom: 9rem !important;
}

.kiosk-card {
    padding: 0;
    margin: 0;
    width: 100%;
}

.kiosk-img {
    width: 100%;
    height: auto;
    display: block;
}


@media (max-width: 991px) {

	#logo img {
		height: 80px;
	}

	.announcement-speaker {
		width: 90px;
	}

	/* only the home page's wrapped main section is transparent; the base .home-page-main
	   rule still gives every OTHER page (login/register/member) its bg-image on mobile too */
	.home-bg .home-page-main {
		background: transparent;
	}

	/* centre the trophy + LIVE TRANSACTION title */
	.ranking-title-box {
		display: block;
	}

	.ranking-title-trophy img {
		height: 150px;
	}

	.ranking-title {
		font-size: 36px;
	}

	.lucky-draw-button {
		font-size: 24px;
	}

	.golden-word img {
		height: 30px;
	}

	.promotion-more-info-button {
		font-size: 32px;
	}

	/*	SLOT*/
	.slot-amount {
		font-size: 20px;
	}

	/*	RESULT*/
	.stage-3 {
		padding: 0px 0px 10px 0px;
	}

	.stage-2 {
		padding: 0px 0px 40px 0px;
	}

	.stage-1 {
		padding: 0px 0px 60px 0px;
	}

	.stage-container .stage-main-part img {
		transform: scale(0.5);
	}

	.stage-container .stage-main-part {
		box-shadow: inset 0px 10px 2px 0px rgba(255, 255, 255, .5);
	}

	.stage-container .stage-border-part {
		box-shadow: inset 0px 10px 2px 0px rgba(255, 255, 255, .5);
	}

	.result-name {
		font-size: 20px;
	}

	.result-reward {
		box-shadow: 0 -1px 1px white, 0 1px 1px darkred;
		font-size: 18px;
	}

	/*    RESULT END*/
	/* MOBILE footer: character centered & large, its top poking out; banners overlap its bottom */
	.home-footer {
		/* transparent — the .home-bg wrapper supplies the continuous image */
		background: transparent;
		/* undo the desktop vw height — on mobile the character flows in normal flow */
		height: auto;
		/* top padding = space below the LIVE TRANSACTION table;
		   bottom padding = the spacing left below the banners */
		padding: 28px 0 40px;
	}

	.home-footer .footer-bg {
		display: none;
	}

	.home-footer .footer-image {
		position: static;
		width: 100%;
		height: auto;
		text-align: center;
		margin-top: -10px;   /* barely overlaps the section top, leaving clear space below the LIVE TRANSACTION table */
	}

	.home-footer .footer-image img {
		display: block;
		width: 104%;         /* slightly wider than full-bleed; the extra bleeds off-screen */
		max-width: none;
		height: auto;
		margin: 0 0 0 5%;    /* shift right: the character sits left in the PNG, so this visually centres her */
	}

	/* banners flow below the character, then pulled up to overlap its bottom */
	.home-footer .footer-banners {
		position: relative;
		left: auto;
		right: auto;
		top: auto;
		transform: none;
		/* pulled up to overlap the character's bottom, but eased so the character sits higher, away from the banners */
		margin: -55px auto 0;
		width: 94%;
		max-width: 384px;
		justify-content: center;
		gap: 10px;
		z-index: 3;
	}

	.home-footer .footer-banners a {
		flex: 1 1 0;
		width: auto;
		max-width: 120px;
	}

	#header-wrap #logo img {
		height: 60px;
	}

	.about-us-icon {
		border: 3px solid lightgrey;
		padding-top: 20px;
	}

	.about-us-icon:last-child {
		border: 3px solid lightgrey;
	}

	.about-us-icon:nth-child(1),
	.about-us-icon:nth-child(3) {
		border-right: none;
	}

	.about-us-icon:nth-child(1),
	.about-us-icon:nth-child(2) {
		border-bottom: none;
	}

	.product-desc {
		font-size: smaller;
	}

	.page-title-banner {
		padding: 80px 0px;
	}

	/*RESPONSIVE TABLE DISPLAY*/
	.display-table-desktop {
		display: none;
	}

	.display-table-mobile {
		display: table-cell;
	}

	.product-name,
	.product-price {
		font-size: smaller;
	}

	.vip-logo {
		height: 80px;
	}
}

@media (max-width: 768px) {

	.promotion-more-info-button {
		font-size: 28px;
	}

	.vip-logo {
		height: 60px;
	}

	.vip-table {
		background-position: 30%;
	}
	/* ===== MOBILE SIDE MENU (#mobileMenu) — restyled: dark panel, gold hairlines,
	   pill rows with a chevron, red-gradient hover, indented submenu rail.
	   Brand-red / rgba(244, 124, 5) recolor via §2g; gold rgba(255,206,65) stays gold. ===== */
	.offcanvas-start {
		width: 86% !important;
		max-width: 360px !important;
	}

	div#mobileMenu {
		background: linear-gradient(180deg, #1c1311 0%, #0b0807 100%);
		border-right: 1px solid rgba(255, 206, 65, 0.18);
		box-shadow: 8px 0 28px rgba(0, 0, 0, 0.55);
		color: #fff;
	}

	#mobileMenu .offcanvas-header {
		align-items: center;
		padding: 16px 18px 14px;
		border-bottom: 1px solid;
		border-image: linear-gradient(90deg, rgba(255, 206, 65, 0), rgba(255, 206, 65, 0.55) 50%, rgba(255, 206, 65, 0)) 1;
	}

	#mobileMenu #logo img {
		height: 52px;
		width: auto;
	}

	.custom-close {
		background: rgba(255, 255, 255, 0.06);
		border: 1px solid rgba(255, 255, 255, 0.22);
		border-radius: 50%;
		width: 38px;
		height: 38px;
		padding: 0;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: background 0.15s ease, border-color 0.15s ease;
	}

	.custom-close:hover {
		background: linear-gradient(180deg, #F47C05 0%, #CA3700 100%);
		border-color: rgba(255, 206, 65, 0.5);
	}

	.offcanvas-body {
		line-height: normal;
		padding: 12px 14px 26px;
	}

	.mobile-menu-container {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.offcanvas-body .list-group-item {
		list-style: none;
		border: 0;
		background: transparent;
		margin: 5px 0;
		padding: 0;
	}

	.offcanvas-body .list-group-item > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 13px 16px;
		border-radius: 10px;
		background: rgba(255, 255, 255, 0.035);
		border: 1px solid rgba(255, 255, 255, 0.06);
		color: #f2f2f2;
		font-weight: 600;
		font-size: 1rem;
		letter-spacing: 0.3px;
		text-decoration: none;
		transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
	}

	.offcanvas-body .list-group-item > a::after {
		content: "\203A";
		font-size: 1.25rem;
		line-height: 1;
		color: rgba(255, 206, 65, 0.65);
		transition: transform 0.15s ease, color 0.15s ease;
	}

	.offcanvas-body .list-group-item > a:hover,
	.offcanvas-body .list-group-item > a:focus {
		background: linear-gradient(180deg, #F47C05 0%, #CA3700 100%);
		border-color: rgba(255, 206, 65, 0.4);
		color: #fff;
	}

	.offcanvas-body .list-group-item > a:hover::after,
	.offcanvas-body .list-group-item > a:focus::after {
		color: #fff;
		transform: translateX(3px);
	}

	.offcanvas-body .list-group-item > a:active {
		transform: translateY(1px);
	}

	a.list-group-item-100 {
		color: #f2f2f2;
	}

	/* submenu: indented gold rail, lighter rows, no chevron */
	.sub-menu {
		list-style: none;
		margin: 4px 0 8px 8px;
		padding: 2px 0 2px 12px;
		border-left: 2px solid rgba(255, 206, 65, 0.22);
	}

	.sub-menu .list-group-item {
		margin: 2px 0;
	}

	.sub-menu .list-group-item > a {
		padding: 9px 14px;
		font-size: 0.9rem;
		font-weight: 500;
		color: #c9c9c9;
		background: transparent;
		border: 0;
		border-radius: 8px;
	}

	.sub-menu .list-group-item > a::after {
		content: "";
	}

	.sub-menu .list-group-item > a:hover,
	.sub-menu .list-group-item > a:focus {
		background: rgba(244, 124, 5, 0.16);
		color: #fff;
	}

	.home-ranking-table thead th {
		padding: 11px 8px;
	}

	.home-ranking-table tbody td {
		padding: 9px 8px;
		font-size: 12px;
	}
}

@media (max-width: 576px) {

	#logo img {
		height: 60px;
	}

	.ranking-title-trophy img {
		height: 120px;
	}

	.ranking-title {
		font-size: 24px;
	}

	.promotion-more-info-button {
		font-size: 20px;
		line-height: 1.2;
	}
}

@media (max-width: 478px) {

	.slot-amount {
		font-size: 14px;
	}
}

@keyframes speaker-shake {

	0%,
	100% {
		transform: rotate(0deg);
	}

	25%,
	75% {
		transform: rotate(10deg);
	}

	50% {
		transform: rotate(-10deg);
	}
}
/* =========================================================================
   STICKY SITE HEADER (top bar + desktop nav) — always visible
   The top bar and desktop nav (#header) are wrapped in .site-header-sticky in
   header.php. position:sticky pins the whole block to the top on both mobile
   and desktop while keeping it in normal flow, so no spacer is needed and the
   page content never jumps. The mobile bottom menu (.mobile-footer) is already
   position:fixed at the bottom, so both bars stay visible at all times.
   ========================================================================= */
.site-header-sticky {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	/* above the home swiper/banners (z-index 3), side icons (100) and the
	   mobile footer (1030); below the open side-menu offcanvas (1045). */
	z-index: 1040;
}

/* The Canvas theme pins #header-wrap with position:fixed and offsets it with a
   .header-wrap-clone spacer. Inside the sticky wrapper we want the gold nav to
   flow in place, so force it static and drop the now-redundant spacer. */
.site-header-sticky #header-wrap {
	position: relative !important;
}

.site-header-sticky .header-wrap-clone {
	display: none !important;
}
/* =========================================================================
   MOBILE SIDE-MENU AUTH BUTTONS — a two-up row sitting between the offcanvas
   logo and the menu list (see #mobileMenu in header.php). Left = primary
   action (Login / Deposit), right = secondary (Register / Logout).
   ========================================================================= */
.mobile-menu-auth {
	display: flex;
	gap: 10px;
	padding: 12px 16px 16px;
}

.mobile-menu-auth .auth-btn {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22);
	transition: transform 0.1s ease, filter 0.15s ease;
}

.mobile-menu-auth .auth-btn:hover {
	filter: brightness(1.06);
}

.mobile-menu-auth .auth-btn:active {
	transform: translateY(1px);
}

/* left: red gradient, white label (recolors with §2g) */
.mobile-menu-auth .auth-btn-left {
	background: linear-gradient(180deg, #F47C05 0%, #CA3700 100%);
	color: #fff;
}

/* right: gold gradient, dark label (stays gold under §2g) */
.mobile-menu-auth .auth-btn-right {
	background: linear-gradient(180deg, #FFCE41 0%, #DF8A09 100%);
	color: #CA3700;
}

/* Login/Register: fill the viewport with the home-bg image on mobile too
   (overrides the .home-page-main mobile '100% auto' rule that otherwise
   left a bare #000a2e area on these short, form-only pages). */
.home-page-main.auth-page {
	background-size: cover;
	background-position: center;
}

/* Homepage SEO copy - sits between the home footer banner and the site footer.
   Continues the footer's dark gradient so it doesn't read as a white gap.
   Sizes are px, NOT rem: wonderwin / houseofwinners set html{font-size:62.5%},
   which would shrink this whole band to ~62%.
   Per-brand: override --seo-accent only. */
.home-seo-content {
	--seo-bg-top: #241f1f;
	--seo-bg-bottom: #1b1717;
	--seo-accent: #F47C05;
	/* 0.62 was too dim to read comfortably at 13px against #1b1717. */
	--seo-text: rgba(255, 255, 255, 0.82);

	background: linear-gradient(180deg, var(--seo-bg-top) 0%, var(--seo-bg-bottom) 100%);
	border-top: 2px solid var(--seo-accent);
	color: var(--seo-text);
	font-size: 13px;
	line-height: 1.75;
	padding: 36px 0 40px;
}

.home-seo-content .container {
	max-width: 1100px;
	padding-left: 16px;
	padding-right: 16px;
	/* CKEditor content is user-authored - never let a long word or a pasted URL
	   push the page wider than the viewport. */
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* CKEditor emits h2/h3/p/ul/a/table - style them explicitly or they inherit
   page defaults that were never designed to sit on a dark band. */
.home-seo-content h1,
.home-seo-content h2,
.home-seo-content h3,
.home-seo-content h4 {
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	margin: 24px 0 10px;
}

.home-seo-content > .container > :first-child {
	margin-top: 0;
}

/* Colour the descendants EXPLICITLY rather than relying on inheritance from
   .home-seo-content. Any theme rule that matches these elements directly beats
   an inherited value, which is how houseofwinners ended up with dim body copy.
   Inline colours set in CKEditor still win over all of this, as they should. */
.home-seo-content p,
.home-seo-content li,
.home-seo-content td,
.home-seo-content th,
.home-seo-content strong,
.home-seo-content em,
.home-seo-content u,
.home-seo-content s,
.home-seo-content span {
	color: var(--seo-text);
}

.home-seo-content p {
	margin: 0 0 14px;
}

.home-seo-content ul,
.home-seo-content ol {
	margin: 0 0 14px 18px;
	padding: 0;
}

.home-seo-content img {
	max-width: 100%;
	height: auto;
}

.home-seo-content a {
	color: var(--seo-accent);
	filter: brightness(1.4);
	text-decoration: none;
}

.home-seo-content a:hover {
	text-decoration: underline;
}

/* A wide table must scroll inside its own box - otherwise it stretches the
   whole page sideways on a phone. */
.home-seo-content table {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	margin: 0 0 16px;
}

.home-seo-content th,
.home-seo-content td {
	border: 1px solid rgba(255, 255, 255, 0.12);
	padding: 7px 10px;
}

/* Mobile: just tighten the type. Do NOT clamp the height here - an
   overflow:hidden container makes the rest of the copy unreachable, since
   there is no expander and the page cannot scroll inside it. */
@media (max-width: 767.98px) {
	.home-seo-content {
		padding: 24px 0 28px;
		font-size: 12px;
	}

	.home-seo-content h1,
	.home-seo-content h2,
	.home-seo-content h3,
	.home-seo-content h4 {
		font-size: 15px;
	}
}