/* =========================================================
   Leo Forwarders
   ========================================================= */
:root {
 --mc-white:#ffffff;
 --mc-bg:#faf9ff;
 --mc-lavender:#f4f0ff;
 --mc-lavender-2:#eee8ff;
 --mc-purple:#8b5cf6;
 --mc-violet:#6d28d9;
 --mc-violet-dark:#4c1d95;
 --mc-green:#22c55e;
 --mc-green-dark:#15803d;
 --mc-text:#1f2937;
 --mc-muted:#6b7280;
 --mc-border:#e7e0f7;
 --mc-shadow:0 18px 55px rgba(76,29,149,.10);
}
html {
	scroll-behavior: smooth;
}
body {
	background: var(--mc-bg)!important;
	color: var(--mc-text)!important;
	overflow-x: hidden;
}
/* Header */
.header.navbar-area {
	background: rgba(255,255,255,.94)!important;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	box-shadow: 0 8px 30px rgba(76,29,149,.07);
	border-bottom: 1px solid rgba(139,92,246,.10);
}
.header .navbar-brand img {
	max-height: 58px;
	width: auto;
}
.header .navbar-nav .nav-item a {
	color: var(--mc-text)!important;
	font-weight: 600;
	transition: .25s ease;
}
.header .navbar-nav .nav-item a:hover, .header .navbar-nav .nav-item a.active {
	color: var(--mc-violet)!important;
}
.header .mobile-menu-btn .toggler-icon {
	background: var(--mc-violet)!important;
}
.connectWalletBtn {
	border: 0!important;
	color: #fff!important;
	background: linear-gradient(135deg, var(--mc-violet), var(--mc-purple))!important;
	box-shadow: 0 12px 26px rgba(109,40,217,.22);
	border-radius: 12px!important;
	font-weight: 700!important;
	padding: 12px 22px!important;
	transition: .25s ease!important;
}
.connectWalletBtn:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 32px rgba(109,40,217,.28);
}
/* Hero */
.light-theme-hero, .hero-area {
	background: linear-gradient(135deg, #fff 0%, #fbfaff 45%, #f1ebff 100%)!important;
	position: relative;
	overflow: hidden;
	min-height: 700px;
	display: flex;
	align-items: center;
}
.light-theme-hero:before {
	content: "";
	position: absolute;
	width: 560px;
	height: 560px;
	right: -220px;
	top: -180px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(139,92,246,.18), transparent 68%);
	pointer-events: none;
}
.light-theme-hero:after {
	content: "";
	position: absolute;
	width: 420px;
	height: 420px;
	left: -250px;
	bottom: -220px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(34,197,94,.12), transparent 70%);
	pointer-events: none;
}
.light-theme-hero .hero-content {
	position: relative;
	z-index: 3;
	padding: 70px 0;
}
.hero-kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--mc-border);
	box-shadow: 0 8px 25px rgba(76,29,149,.07);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.2px;
	color: var(--mc-violet);
	margin-bottom: 18px;
}
.hero-kicker:before {
	content: "";
	width: 8px;
	height: 8px;
	background: var(--mc-green);
	border-radius: 50%;
	box-shadow: 0 0 0 5px rgba(34,197,94,.12);
}
.light-theme-hero h1 {
	color: var(--mc-violet-dark)!important;
	font-size: clamp(38px, 5vw, 66px)!important;
	line-height: 1.08!important;
	font-weight: 800!important;
	letter-spacing: -1.8px;
	margin-bottom: 22px;
}
.light-theme-hero p {
	color: var(--mc-muted)!important;
	font-size: 17px;
	line-height: 1.8;
	max-width: 590px;
}
.light-theme-hero .button {
	margin-top: 28px;
}
/* AI Blockchain visual */
.ai-visual-wrap {
	position: relative;
	min-height: 560px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}
.ai-visual {
	position: relative;
	width: min(540px, 100%);
	aspect-ratio: 1/1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ai-orbit {
	position: absolute;
	border: 1px solid rgba(109,40,217,.18);
	border-radius: 50%;
	animation: mcSpin 18s linear infinite;
}
.ai-orbit.one {
	width: 82%;
	height: 46%;
	transform: rotate(-18deg);
}
.ai-orbit.two {
	width: 70%;
	height: 38%;
	transform: rotate(52deg);
	animation-duration: 14s;
	animation-direction: reverse;
}
.ai-orbit.three {
	width: 58%;
	height: 32%;
	transform: rotate(115deg);
	animation-duration: 11s;
}
.ai-blockchain-image {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: .42;
	mix-blend-mode: multiply;
	animation: mcPulse 6s ease-in-out infinite;
	pointer-events: none;
}
.ai-core {
	width: 245px;
	height: 245px;
	border-radius: 50%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(circle at 35% 30%, #fff 0%, #eee5ff 34%, #c4b5fd 64%, #8b5cf6 100%);
	box-shadow: 0 0 0 18px rgba(139,92,246,.06), 0 0 80px rgba(109,40,217,.28), inset 0 0 45px rgba(255,255,255,.8);
	animation: mcPulse 4s ease-in-out infinite;
}
.ai-core:before {
	content: "";
	position: absolute;
	inset: 24px;
	border: 1px solid rgba(76,29,149,.25);
	border-radius: 50%;
}
.ai-core:after {
	content: "AI";
	font-size: 68px;
	font-weight: 900;
	color: var(--mc-violet-dark);
	letter-spacing: -4px;
	filter: drop-shadow(0 5px 8px rgba(76,29,149,.16));
}
.ai-node {
	position: absolute;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--mc-green);
	box-shadow: 0 0 0 6px rgba(34,197,94,.13), 0 0 18px rgba(34,197,94,.45);
}
.node-a {
	top: 14%;
	left: 25%;
}
.node-b {
	right: 16%;
	top: 36%;
}
.node-c {
	bottom: 18%;
	left: 30%;
}
.node-d {
	right: 30%;
	bottom: 11%;
}
.ai-chain {
	position: absolute;
	width: 72px;
	height: 72px;
	border-radius: 20px;
	background: #fff;
	border: 1px solid var(--mc-border);
	box-shadow: var(--mc-shadow);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	font-weight: 900;
	color: var(--mc-violet);
	animation: mcFloat 5s ease-in-out infinite;
}
.ai-chain:before {
	content: "◆";
}
.chain-a {
	left: 4%;
	top: 30%;
	animation-delay: -1.3s;
}
.chain-b {
	right: 3%;
	top: 20%;
	animation-delay: -3s;
}
.chain-c {
	right: 7%;
	bottom: 21%;
	animation-delay: -2s;
}
.chain-d {
	left: 8%;
	bottom: 15%;
	animation-delay: -4s;
}
.float-card {
	position: absolute;
	background: rgba(255,255,255,.92);
	border: 1px solid rgba(231,224,247,.95);
	border-radius: 16px;
	padding: 12px 15px;
	box-shadow: 0 16px 40px rgba(76,29,149,.12);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	z-index: 5;
	min-width: 150px;
	animation: mcFloat 5.5s ease-in-out infinite;
}
.float-card .fc-top {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 11px;
	font-weight: 800;
	color: var(--mc-muted);
	text-transform: uppercase;
	letter-spacing: .6px;
}
.float-card .fc-icon {
	width: 30px;
	height: 30px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--mc-lavender);
	color: var(--mc-violet);
	font-weight: 900;
}
.float-card strong {
	display: block;
	font-size: 18px;
	color: var(--mc-violet-dark);
	margin-top: 6px;
}
.float-card small {
	font-size: 11px;
	color: var(--mc-green-dark);
	font-weight: 700;
}
.card-ai {
	top: 7%;
	left: 2%;
	animation-delay: -.8s;
}
.card-chain {
	top: 8%;
	right: 0;
	animation-delay: -2.1s;
}
.card-growth {
	bottom: 9%;
	right: 2%;
	animation-delay: -3.7s;
}
.card-secure {
	bottom: 6%;
	left: 2%;
	animation-delay: -1.7s;
}
/* Common section */
.light-section, .light-section-alt {
	position: relative;
	overflow: hidden;
}
.light-section {
	background: #fff!important;
}
.light-section-alt {
	background: linear-gradient(180deg, #fbfaff, #f5f1ff)!important;
}
.section-title {
	margin-bottom: 55px!important;
}
.section-title h3, .intro h6 {
	color: var(--mc-purple)!important;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: 800!important;
	font-size: 13px!important;
}
.section-title h2, .intro h1 {
	/*color: var(--mc-violet-dark)!important;*/
	color:#20243b;
	font-size:42px;
	line-height:1.2;
	font-weight: 800!important;
	/*letter-spacing: -1px;*/
	text-transform:none;
}
.section-title h2 {
	font-size: clamp(30px, 4vw, 44px)!important;
}
/* Services - crypto card grid */
#services {
	padding: 105px 0!important;
}
#services .intro {
	text-align: center;
	max-width: 760px;
	margin: 0 auto 50px;
}
#services .intro h1 {
	font-size: 44px;
	margin: 10px 0 14px;
}
#services .intro p {
	color: var(--mc-muted);
	font-size: 16px;
	line-height: 1.8;
}
#services>.container>.row:last-child {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
	margin: 0;
}
#services>.container>.row:last-child>[class*="col-"] {
width:auto;
max-width:none;
padding:0;
}
#services .blog-post {
	height: 100%;
	min-height: 245px;
	border-radius: 22px!important;
	background: #fff;
	border: 1px solid var(--mc-border);
	box-shadow: 0 12px 35px rgba(76,29,149,.06);
	overflow: hidden;
	position: relative;
	transition: .3s ease;
}
#services .blog-post:after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 4px;
	background: linear-gradient(90deg, var(--mc-violet), var(--mc-purple), var(--mc-green));
}
#services .blog-post img {
	width: 100%;
	height: 145px;
	object-fit: cover;
	display: block;
	transition: .4s ease;
}
#services .blog-post .content {
	padding: 17px 18px 20px!important;
}
#services .blog-post .tag {
	font-size: 10px!important;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--mc-purple)!important;
	font-weight: 800;
}
#services .blog-post h5 {
	font-size: 18px!important;
	color: var(--mc-violet-dark)!important;
	font-weight: 800;
	margin-top: 7px!important;
}
#services .blog-post:hover {
	transform: translateY(-8px);
	box-shadow: 0 22px 50px rgba(76,29,149,.13);
	border-color: #d9cef6;
}
#services .blog-post:hover img {
	transform: scale(1.05);
}
/* About - modern split panel */
#introduction {
	padding: 110px 0!important;
}
#introduction .img-about {
	/*background: linear-gradient(145deg, #fff, #f0eaff);
	border: 1px solid var(--mc-border);
	border-radius: 30px;
	padding: 25px;*/
	box-shadow: var(--mc-shadow);
	position: relative;
	overflow: hidden;
}
#introduction .img-about:after {
	content: "WEB3 • AI • BLOCKCHAIN";
	position: absolute;
	bottom: 20px;
	left: 25px;
	padding: 9px 13px;
	border-radius: 10px;
	background: #fff;
	border: 1px solid var(--mc-border);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 1px;
	color: var(--mc-violet);
	box-shadow: 0 10px 25px rgba(76,29,149,.08);
}
#introduction .text-left {
	padding: 12px 0 12px 35px;
}
#introduction .text-left h2 {
	font-size: 13px!important;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--mc-purple)!important;
	font-weight: 800!important;
}
#introduction .text-left h3 {
	font-size: clamp(32px, 4vw, 36px)!important;
	color: var(--mc-violet-dark)!important;
	font-weight: 800!important;
	margin-top: 8px;
}
#introduction .text-left p {
	color: var(--mc-muted)!important;
	line-height: 1.85;
	margin-bottom: 14px;
}
#introduction .text-left ul {
	list-style: none;
	padding: 0;
	margin: 25px 0 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
#introduction .text-left ul li {
	background: #fff;
	border: 1px solid var(--mc-border);
	border-radius: 13px;
	padding: 13px 14px 13px 39px;
	color: var(--mc-text);
	font-size: 14px;
	position: relative;
	box-shadow: 0 8px 20px rgba(76,29,149,.05);
}
#introduction .text-left ul li:before {
	content: "✓";
	position: absolute;
	left: 13px;
	top: 11px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #dcfce7;
	color: var(--mc-green-dark);
	font-weight: 900;
	font-size: 12px;
}
/* Wallets - crypto onboarding cards */
#howtojoin {
	padding: 105px 0!important;
	background: #fff!important;
}
#howtojoin .section-title {
	text-align: center;
}
#howtojoin .section-title h2 {
	font-size: 42px!important;
}
#howtojoin>.container>.row:last-child {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin: 0;
}
#howtojoin>.container>.row:last-child>[class*="col-"] {
width:auto;
padding:0;
}
#howtojoin .single-feature {
	height: 150px!important;
	background: #fff!important;
	border: 1px solid var(--mc-border);
	border-radius: 20px!important;
	box-shadow: 0 12px 35px rgba(76,29,149,.06);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 25px!important;
	transition: .3s ease;
}
#howtojoin .single-feature img {
	max-height: 78px;
	width: auto;
	object-fit: contain;
}
#howtojoin .single-feature:hover {
	transform: translateY(-7px);
	border-color: #d7caf8;
	box-shadow: 0 20px 45px rgba(76,29,149,.12);
}
/* Roadmap */
#roadmap {
	background: linear-gradient(135deg, #f4f0ff, #fff)!important;
	padding: 105px 0!important;
}
#roadmap .timeline-content .inner-circle {
	background: var(--mc-violet)!important;
	border-color: #fff!important;
	box-shadow: 0 0 0 5px rgba(109,40,217,.12), 0 8px 20px rgba(109,40,217,.2);
}
#roadmap .timeline-content p {
	color: var(--mc-violet-dark)!important;
	font-weight: 700;
}
/* Footer */
.footer {
	background: var(--mc-violet-dark)!important;
	color: rgba(255,255,255,.78)!important;
	position: relative;
	overflow: hidden;
}
.footer:before {
	content: "";
	position: absolute;
	width: 420px;
	height: 420px;
	right: -180px;
	top: -250px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(139,92,246,.35), transparent 70%);
	pointer-events: none;
}
.footer-top {
	background: #222!important;
	position: relative;
	z-index: 2;
	padding: 70px 0 30px;
}
.footer p, .footer li, .footer span {
	color: rgba(255,255,255,.72)!important;
}
.footer h3, .footer h4, .footer h5, .footer h6, .footer a {
	color: #fff!important;
}
.footer a:hover {
	color: #c4b5fd!important;
}
.footer .footer-top img {
	max-width: 180px;
}

/* Responsive */
@media(max-width:1199px) {
#services>.container>.row:last-child {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ai-visual-wrap {
	min-height: 500px;
}
}
@media(max-width:991px) {
.light-theme-hero {
	min-height: auto;
}
.light-theme-hero .hero-content {
	padding: 0px 0 20px;
	text-align: center;
}
.light-theme-hero p {
	margin-left: auto;
	margin-right: auto;
}
.hero-kicker {
	margin-left: auto;
	margin-right: auto;
}
.light-theme-hero .button {
	display: flex;
	justify-content: center;
}
.ai-visual-wrap {
	min-height: 500px;
	margin-top: 15px;
}
#introduction .text-left {
	padding: 40px 5px;
}
}
@media(max-width:767px) {
.header .navbar-brand img {
	max-height: 48px;
}
.header .button.add-list-button {
	margin-left: 8px;
}
.connectWalletBtn {
	padding: 10px 14px!important;
	font-size: 13px!important;
}
.light-theme-hero h1 {
	font-size: 39px!important;
}
.light-theme-hero p {
	font-size: 15px;
	line-height: 1.7;
}
.ai-visual-wrap {
	min-height: 430px;
}
.ai-blockchain-image {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: .42;
	mix-blend-mode: multiply;
	animation: mcPulse 6s ease-in-out infinite;
	pointer-events: none;
}
.ai-core {
	width: 190px;
	height: 190px;
}
.ai-core:after {
	font-size: 54px;
}
.ai-chain {
	width: 55px;
	height: 55px;
	border-radius: 15px;
	font-size: 20px;
}
.float-card {
	min-width: 125px;
	padding: 9px 11px;
}
.float-card strong {
	font-size: 15px;
}
.card-ai {
	left: 0
}
.card-chain {
	right: 0
}
.card-growth {
	right: 0
}
.card-secure {
	left: 0
}
#services, #introduction, #howtojoin, #roadmap {
	padding: 75px 0!important;
}
#services>.container>.row:last-child {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 15px;
}
#services .blog-post {
	min-height: 225px;
	border-radius: 18px!important;
}
#services .blog-post img {
	height: 125px;
}
#services .intro h1 {
	font-size: 36px;
}
#introduction .text-left ul {
	grid-template-columns: 1fr;
}
#howtojoin>.container>.row:last-child {
	grid-template-columns: repeat(2, 1fr);
	gap: 15px;
}
#howtojoin .single-feature {
	height: 125px!important;
	padding: 18px!important;
}
#roadmap .timeline-steps {
	overflow-x: auto;
	padding-bottom: 20px;
}
}
@media(max-width:480px) {
.light-theme-hero h1 {
	font-size: 34px!important;
}
.ai-visual-wrap {
	min-height: 365px;
}
.ai-blockchain-image {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: .42;
	mix-blend-mode: multiply;
	animation: mcPulse 6s ease-in-out infinite;
	pointer-events: none;
}
.ai-core {
	width: 155px;
	height: 155px;
}
.ai-core:before {
	inset: 16px;
}
.ai-core:after {
	font-size: 44px;
}
.ai-orbit.one {
	width: 90%;
}
.ai-orbit.two {
	width: 78%;
}
.ai-orbit.three {
	width: 65%;
}
.float-card {
	min-width: 108px;
	padding: 8px 9px;
	border-radius: 12px;
}
.float-card .fc-icon {
	width: 24px;
	height: 24px;
	border-radius: 7px;
	font-size: 10px;
}
.float-card strong {
	font-size: 13px;
	margin-top: 4px;
}
.float-card small {
	font-size: 9px;
}
#services>.container>.row:last-child {
	grid-template-columns: 1fr;
}
#services .blog-post {
	min-height: 0;
}
#howtojoin>.container>.row:last-child {
	grid-template-columns: 1fr 1fr;
}
#howtojoin .single-feature {
	height: 110px!important;
}
#howtojoin .single-feature img {
	max-height: 58px;
}
}
 @keyframes mcFloat {
0%, 100% {
transform:translateY(0)
}
50% {
transform:translateY(-12px)
}
}
@keyframes mcPulse {
0%, 100% {
transform:scale(1)
}
50% {
transform:scale(1.035)
}
}
@keyframes mcSpin {
from {
transform:rotate(0deg)
}
to {
	transform: rotate(360deg)
}
}
@media(prefers-reduced-motion:reduce) {
*, *:before, *:after {
	animation-duration: .01ms!important;
	animation-iteration-count: 1!important;
	scroll-behavior: auto!important;
}
}
/* =========================================================
   HOW TO JOIN - WALLET SECTION
   ========================================================= */

#howtojoin.how-to-join-section {
	position: relative;
	background: #f8f6ff;
	padding: 20px 0 70px;
	overflow: hidden;
}
#howtojoin .how-to-join-box {
	position: relative;
	background: #ffffff;
	border: 1px solid #e6dcff;
	border-radius: 34px;
	min-height: 665px;
	padding: 74px 40px 72px;
	text-align: center;
	box-shadow: 0 10px 35px rgba(116, 76, 190, 0.04);
}
/* Top wallet icon */

#howtojoin .how-join-icon {
	width: 86px;
	height: 86px;
	margin: 0 auto 23px;
	border-radius: 27px;
	background: #f0e9ff;
	color: #823cff;
	display: flex;
	align-items: center;
	justify-content: center;
}
#howtojoin .how-join-icon svg {
	width: 50px;
	height: 50px;
}
/* HOW TO JOIN */

#howtojoin .how-join-kicker {
	color: #7738ed;
	font-size: 15px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: 1.8px;
	margin-bottom: 20px;
}
/* Main title */

#howtojoin .how-to-join-box h2 {
	margin: 0;
	color: #20243b;
	font-size: 42px;
	line-height: 1.2;
	font-weight: 700;
}
/* Description */

#howtojoin .how-join-description {
	margin: 17px auto 0;
	color: #74758a;
	font-size: 18px;
	line-height: 1.6;
	max-width: 720px;
}
/* Connect wallet area */

#howtojoin .how-join-connect {
	margin-top: 35px;
}
#howtojoin .how-connect-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-width: 189px;
	height: 48px;
	padding: 0 22px;
	border-radius: 13px;
	background: linear-gradient(135deg, #7b35ed 0%, #9631e9 100%);
	color: #ffffff !important;
	font-size: 16px;
	font-weight: 700;
	border: none;
	box-shadow: 0 12px 25px rgba(126, 55, 235, 0.20);
	transition: all 0.25s ease;
}
#howtojoin .how-connect-btn:hover {
	color: #ffffff !important;
	transform: translateY(-2px);
	box-shadow: 0 15px 30px rgba(126, 55, 235, 0.28);
}
#howtojoin .wallet-button-icon {
	width: 18px;
	height: 18px;
	display: inline-flex;
}
#howtojoin .wallet-button-icon svg {
	width: 18px;
	height: 18px;
}
/* Connection status */

#howtojoin .wallet-connection-status {
	margin-top: 19px;
	color: #77778a;
	font-size: 15px;
}
/* Wallet cards */

#howtojoin .wallet-options {
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: 20px;
	margin-top: 61px;
}
#howtojoin .wallet-option {
	width: 114px;
	height: 102px;
	border: 1px solid #e5dcf5;
	border-radius: 18px;
	background: #ffffff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	transition: all 0.25s ease;
}
#howtojoin .wallet-option:hover {
	transform: translateY(-4px);
	border-color: #cdb9f7;
	box-shadow: 0 10px 25px rgba(113, 62, 196, 0.09);
}
#howtojoin .wallet-option-icon {
	height: 43px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #8543ff;
}
#howtojoin .wallet-option-icon svg {
	width: 34px;
	height: 34px;
}
#howtojoin .wallet-option-name {
	color: #55556c;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	margin-top: 5px;
	white-space: nowrap;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
#howtojoin.how-to-join-section {
	padding: 10px 12px 45px;
}
#howtojoin .how-to-join-box {
	min-height: auto;
	padding: 50px 18px 45px;
	border-radius: 25px;
}
#howtojoin .how-join-icon {
	width: 74px;
	height: 74px;
	border-radius: 23px;
	margin-bottom: 20px;
}
#howtojoin .how-join-icon svg {
	width: 43px;
	height: 43px;
}
#howtojoin .how-join-kicker {
	font-size: 13px;
	margin-bottom: 15px;
}
#howtojoin .how-to-join-box h2 {
	font-size: 29px;
}
#howtojoin .how-join-description {
	font-size: 15px;
	line-height: 1.5;
	margin-top: 14px;
}
#howtojoin .how-join-connect {
	margin-top: 28px;
}
#howtojoin .wallet-options {
	gap: 10px;
	margin-top: 45px;
	flex-wrap: wrap;
}
#howtojoin .wallet-option {
	width: calc(50% - 5px);
	max-width: 120px;
	height: 100px;
}
#howtojoin .wallet-option-name {
	font-size: 13px;
}
}
/* =========================================================
   LEO AI HERO VISUAL
   Existing functionality/design remains untouched
   ========================================================= */

.leo-ai-hero {
	position: relative;
	overflow: hidden;
	min-height: 690px;
	display: flex;
	align-items: center;
	padding: 65px 0 75px;
}
.leo-ai-hero .container {
	position: relative;
	z-index: 5;
}
.leo-hero-content {
	position: relative;
	z-index: 10;
}
.leo-hero-content h1 {
	margin-top: 15px;
	margin-bottom: 22px;
}
.leo-hero-content p {
	max-width: 570px;
}
/* =========================================================
   AI VISUAL AREA
   ========================================================= */

.leo-ai-visual {
	position: relative;
	width: 100%;
	height: 570px;
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 1000px;
}
/* Main glow */

.ai-glow {
	position: absolute;
	width: 310px;
	height: 310px;
	border-radius: 50%;
	background: rgba(125, 72, 220, 0.14);
	filter: blur(45px);
	animation: aiGlowPulse 4s ease-in-out infinite;
}
 @keyframes aiGlowPulse {
 0%, 100% {
 transform: scale(.9);
 opacity: .55;
}
 50% {
 transform: scale(1.15);
 opacity: .9;
}
}
/* =========================================================
   ORBIT RINGS
   ========================================================= */

.ai-orbit {
	position: absolute;
	border: 1px solid rgba(126, 72, 220, .18);
	border-radius: 50%;
	pointer-events: none;
}
.ai-orbit-one {
	width: 440px;
	height: 440px;
	transform: rotateX(68deg) rotateZ(15deg);
	animation: orbitRotateOne 15s linear infinite;
}
.ai-orbit-two {
	width: 370px;
	height: 370px;
	transform: rotateX(68deg) rotateZ(-35deg);
	border-color: rgba(126, 72, 220, .25);
	animation: orbitRotateTwo 11s linear infinite reverse;
}
.ai-orbit-three {
	width: 510px;
	height: 220px;
	transform: rotateX(65deg) rotateZ(25deg);
	border-color: rgba(80, 180, 140, .14);
	animation: orbitRotateThree 18s linear infinite;
}
 @keyframes orbitRotateOne {
 from {
 transform: rotateX(68deg) rotateZ(15deg) rotate(0deg);
}
to {
	transform: rotateX(68deg) rotateZ(15deg) rotate(360deg);
}
}
 @keyframes orbitRotateTwo {
 from {
 transform: rotateX(68deg) rotateZ(-35deg) rotate(0deg);
}
to {
	transform: rotateX(68deg) rotateZ(-35deg) rotate(360deg);
}
}
 @keyframes orbitRotateThree {
 from {
 transform: rotateX(65deg) rotateZ(25deg) rotate(0deg);
}
to {
	transform: rotateX(65deg) rotateZ(25deg) rotate(360deg);
}
}
/* =========================================================
   AI CORE
   ========================================================= */

.ai-core-wrap {
	position: relative;
	z-index: 4;
}
.ai-core {
	width: 230px;
	height: 230px;
	border-radius: 50%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(  circle at 35% 30%,  rgba(255,255,255,.98),  rgba(245,240,255,.95) 35%,  rgba(220,205,250,.9) 100%  );
	border: 1px solid rgba(126,72,220,.35);
	box-shadow: 0 0 0 12px rgba(126,72,220,.035),  0 0 0 28px rgba(126,72,220,.025),  0 25px 80px rgba(85,55,150,.18),  inset 0 0 40px rgba(126,72,220,.12);
	animation: aiCoreFloat 5s ease-in-out infinite;
}
 @keyframes aiCoreFloat {
 0%, 100% {
 transform: translateY(0);
}
 50% {
 transform: translateY(-12px);
}
}
/* Inner AI circle */

.ai-core::before {
	content: "";
	position: absolute;
	width: 175px;
	height: 175px;
	border-radius: 50%;
	border: 1px solid rgba(126,72,220,.2);
	box-shadow: inset 0 0 35px rgba(126,72,220,.08),  0 0 35px rgba(126,72,220,.08);
}
/* AI brain */

.ai-brain {
	position: absolute;
	width: 105px;
	height: 105px;
	border-radius: 50%;
	background: linear-gradient(135deg, #7c45d7, #a56bea);
	box-shadow: 0 15px 35px rgba(126,72,220,.30),  0 0 45px rgba(126,72,220,.18);
	overflow: hidden;
}
.ai-brain::before, .ai-brain::after {
	content: "";
	position: absolute;
	border: 1px solid rgba(255,255,255,.55);
	border-radius: 50%;
}
.ai-brain::before {
	width: 72px;
	height: 72px;
	left: 16px;
	top: 16px;
}
.ai-brain::after {
	width: 45px;
	height: 45px;
	left: 30px;
	top: 30px;
}
/* Brain connection lines */

.brain-line {
	position: absolute;
	height: 1px;
	background: rgba(255,255,255,.75);
	transform-origin: left center;
	z-index: 2;
}
.line-one {
	width: 45px;
	left: 13px;
	top: 32px;
	transform: rotate(25deg);
}
.line-two {
	width: 52px;
	left: 42px;
	top: 27px;
	transform: rotate(90deg);
}
.line-three {
	width: 48px;
	left: 48px;
	top: 73px;
	transform: rotate(-25deg);
}
.line-four {
	width: 43px;
	left: 20px;
	top: 70px;
	transform: rotate(-65deg);
}
/* Brain nodes */

.brain-node {
	position: absolute;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 10px rgba(255,255,255,.8);
	z-index: 3;
	animation: nodePulse 2s ease-in-out infinite;
}
.node-one {
	left: 18px;
	top: 29px;
}
.node-two {
	left: 68px;
	top: 20px;
}
.node-three {
	left: 76px;
	top: 68px;
}
.node-four {
	left: 27px;
	top: 73px;
}
.node-five {
	left: 48px;
	top: 48px;
}
 @keyframes nodePulse {
 0%, 100% {
 transform: scale(.8);
 opacity: .65;
}
 50% {
 transform: scale(1.35);
 opacity: 1;
}
}
.ai-core-text {
	position: absolute;
	z-index: 5;
	text-align: center;
	color: #fff;
	display: flex;
	flex-direction: column;
	line-height: 1;
	text-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.ai-core-text strong {
	font-size: 28px;
	font-weight: 800;
}
.ai-core-text span {
	font-size: 7px;
	letter-spacing: 2px;
	margin-top: 5px;
}
/* =========================================================
   FLOATING CARDS
   ========================================================= */

.ai-floating-card {
	position: absolute;
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 175px;
	padding: 13px 17px;
	background: rgba(255,255,255,.88);
	border: 1px solid rgba(126,72,220,.13);
	border-radius: 15px;
	box-shadow: 0 18px 45px rgba(68,40,120,.10),  0 3px 10px rgba(68,40,120,.04);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	animation: floatingCard 5s ease-in-out infinite;
}
.ai-floating-card strong {
	display: block;
	color: #28213b;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
}
.ai-floating-card small {
	display: block;
	margin-top: 4px;
	color: #8c849d;
	font-size: 10px;
	line-height: 1.2;
}
.ai-card-icon {
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 11px;
	background: linear-gradient(  135deg,  rgba(126,72,220,.13),  rgba(126,72,220,.04)  );
	color: #7c45d7;
	font-size: 19px;
	font-weight: 700;
}
 @keyframes floatingCard {
 0%, 100% {
 transform: translateY(0px);
}
 50% {
 transform: translateY(-13px);
}
}
/* Individual card positions */

.card-ai {
	top: 75px;
	left: 8%;
	animation-delay: 0s;
}
.card-web3 {
	top: 45px;
	right: 5%;
	animation-delay: -1.3s;
}
.card-trading {
	bottom: 75px;
	left: 7%;
	animation-delay: -2.3s;
}
.card-blockchain {
	bottom: 50px;
	right: 5%;
	animation-delay: -3.4s;
}
/* =========================================================
   PARTICLES
   ========================================================= */

.ai-particle {
	position: absolute;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #8c5ad9;
	opacity: .5;
	box-shadow: 0 0 12px rgba(126,72,220,.35);
	animation: particleFloat 4s ease-in-out infinite;
}
.particle-one {
	left: 22%;
	top: 35%;
}
.particle-two {
	right: 22%;
	top: 27%;
	animation-delay: -1s;
}
.particle-three {
	left: 25%;
	bottom: 25%;
	animation-delay: -2s;
}
.particle-four {
	right: 27%;
	bottom: 30%;
	animation-delay: -3s;
}
.particle-five {
	left: 50%;
	top: 12%;
	animation-delay: -1.5s;
}
 @keyframes particleFloat {
 0%, 100% {
 transform: translateY(0) scale(.8);
 opacity: .25;
}
 50% {
 transform: translateY(-18px) scale(1.2);
 opacity: .75;
}
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {
.leo-ai-hero {
	min-height: auto;
	padding: 70px 0 45px;
}
.leo-hero-content {
	text-align: center;
	margin-bottom: 20px;
}
.leo-hero-content p {
	margin-left: auto;
	margin-right: auto;
}
.leo-hero-content .button {
	justify-content: center;
}
.leo-ai-visual {
	height: 500px;
	margin-top: 5px;
}
.ai-orbit-one {
	width: 390px;
	height: 390px;
}
.ai-orbit-two {
	width: 330px;
	height: 330px;
}
.ai-orbit-three {
	width: 450px;
}
}

/* =========================================================
   MOBILE HERO FIX
   ========================================================= */

@media (max-width: 575px) {
/* Reduce unnecessary vertical space */
.leo-ai-hero {
	min-height: auto !important;
	height: auto !important;
	padding: 38px 0 10px !important;
}
.leo-ai-hero .container {
	padding-left: 15px;
	padding-right: 15px;
}
.leo-hero-content {
	margin-bottom: 0 !important;
}
.leo-hero-content h1 {
	font-size: 30px;
	line-height: 1.18;
	margin-bottom: 16px;
}
.leo-hero-content p {
	font-size: 13px;
	line-height: 1.6;
	margin-bottom: 18px;
}
/* AI visual */
.leo-ai-visual {
	height: 360px !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	transform: scale(.92);
	transform-origin: center top;
}
/* AI Core */
.ai-core {
	width: 165px;
	height: 165px;
}
.ai-core::before {
	width: 128px;
	height: 128px;
}
.ai-brain {
	width: 76px;
	height: 76px;
}
.ai-brain::before {
	width: 53px;
	height: 53px;
	left: 11px;
	top: 11px;
}
.ai-brain::after {
	width: 34px;
	height: 34px;
	left: 21px;
	top: 21px;
}
.ai-core-text strong {
	font-size: 21px;
}
.ai-core-text span {
	font-size: 6px;
}
/* Orbit rings */
.ai-orbit-one {
	width: 285px;
	height: 285px;
}
.ai-orbit-two {
	width: 245px;
	height: 245px;
}
.ai-orbit-three {
	width: 315px;
	height: 155px;
}
/* =====================================================
       FLOATING CARDS - MOBILE
       ===================================================== */

.ai-floating-card {
	display: flex !important;
	visibility: visible !important;
	opacity: 1 !important;
	min-width: 132px;
	max-width: 145px;
	padding: 9px 10px;
	gap: 8px;
	border-radius: 11px;
	/* Make sure cards stay above orbit/core */
	z-index: 50;
}
.ai-floating-card strong {
	font-size: 10px;
	line-height: 1.2;
}
.ai-floating-card small {
	font-size: 7px;
	margin-top: 3px;
}
.ai-card-icon {
	width: 29px;
	height: 29px;
	flex: 0 0 29px;
	border-radius: 8px;
	font-size: 14px;
}
/* Top left */
.card-ai {
	left: 2px !important;
	top: 30px !important;
	animation-delay: 0s;
}
/* Top right */
.card-web3 {
	right: 2px !important;
	top: 22px !important;
	animation-delay: -1s;
}
/* Bottom left */
.card-trading {
	left: 2px !important;
	bottom: 25px !important;
	animation-delay: -2s;
}
/* Bottom right */
.card-blockchain {
	right: 2px !important;
	bottom: 18px !important;
	animation-delay: -3s;
}
/* Keep particles hidden on small screens */
.ai-particle {
	display: none;
}
}
/* =========================================================
   CONNECT WALLET ICON
   ========================================================= */

.connect-wallet-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 19px;
	height: 19px;
	margin-right: 8px;
	vertical-align: middle;
}
.connect-wallet-icon svg {
	width: 19px;
	height: 19px;
	display: block;
}
.connectWalletBtn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 2px;
}
.connectWalletBtn:hover .connect-wallet-icon {
	transform: translateY(-1px);
}
.connect-wallet-icon {
	transition: transform .25s ease;
}
/* ========================================================= NEW WEB3 ROADMAP ========================================================= */ .leo-roadmap-section {
	position: relative;
	overflow: hidden;
	padding: 115px 0 125px;
	background: radial-gradient(circle at 10% 20%, rgba(126, 87, 255, 0.10), transparent 32%), radial-gradient(circle at 90% 80%, rgba(99, 220, 170, 0.08), transparent 30%), #faf9ff;
}
.leo-roadmap-section:before {
	content: "";
	position: absolute;
	width: 520px;
	height: 520px;
	border: 1px solid rgba(111, 77, 255, 0.07);
	border-radius: 50%;
	top: -220px;
	right: -150px;
}
.leo-roadmap-section:after {
	content: "";
	position: absolute;
	width: 360px;
	height: 360px;
	border: 1px solid rgba(111, 77, 255, 0.06);
	border-radius: 50%;
	bottom: -180px;
	left: -120px;
}
.leo-roadmap-header {
	position: relative;
	z-index: 2;
	text-align: center;
	max-width: 760px;
	margin: 0 auto 75px;
}
.leo-roadmap-label {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 8px 17px;
	border: 1px solid rgba(111, 77, 255, 0.16);
	border-radius: 30px;
	background: rgba(255,255,255,0.75);
	color: #7357e8;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom: 20px;
}
.leo-roadmap-label:before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #6f4cff;
	box-shadow: 0 0 0 5px rgba(111,76,255,0.10);
}
.leo-roadmap-header h2 {
	font-size: 46px;
	line-height: 1.15;
	font-weight: 800;
	color: #19162b;
	margin-bottom: 18px;
}
.leo-roadmap-header p {
	max-width: 650px;
	margin: 0 auto;
	color: #77738b;
	font-size: 16px;
	line-height: 1.8;
} /* ROADMAP NETWORK */
.leo-roadmap-network {
	position: relative;
	z-index: 2;
	max-width: 1180px;
	margin: 0 auto;
}
.leo-roadmap-line {
	position: absolute;
	top: 74px;
	left: 9%;
	right: 9%;
	height: 3px;
	background: linear-gradient( 90deg, rgba(111,76,255,0.12), #866cff, rgba(104,211,170,0.75), rgba(111,76,255,0.12) );
	border-radius: 10px;
}
.leo-roadmap-line:before {
	content: "";
	position: absolute;
	top: -4px;
	left: 0;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #7657ef;
	box-shadow: 0 0 0 7px rgba(118,87,239,0.10);
}
.leo-roadmap-line:after {
	content: "";
	position: absolute;
	top: -4px;
	right: 0;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #61cda4;
	box-shadow: 0 0 0 7px rgba(97,205,164,0.10);
}
.leo-roadmap-items {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 22px;
	position: relative;
}
.leo-roadmap-item {
	position: relative;
	text-align: center;
}
.leo-roadmap-node {
	position: relative;
	z-index: 5;
	width: 62px;
	height: 62px;
	margin: 44px auto 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
	border: 3px solid #7758ed;
	color: #7758ed;
	font-size: 17px;
	font-weight: 800;
	box-shadow: 0 0 0 9px rgba(119,88,237,0.08), 0 12px 30px rgba(76,57,150,0.12);
}
.leo-roadmap-item:nth-child(3) .leo-roadmap-node {
	border-color: #62cda5;
	color: #43a982;
	box-shadow: 0 0 0 9px rgba(98,205,165,0.10), 0 12px 30px rgba(61,157,122,0.12);
}
.leo-roadmap-card {
	min-height: 245px;
	padding: 30px 22px 27px;
	background: rgba(255,255,255,0.88);
	border: 1px solid rgba(113,91,194,0.13);
	border-radius: 20px;
	box-shadow: 0 15px 45px rgba(47,38,94,0.07);
	transition: all .35s ease;
}
.leo-roadmap-card:hover {
	transform: translateY(-9px);
	border-color: rgba(111,76,255,0.30);
	box-shadow: 0 25px 55px rgba(65,50,135,0.13);
}
.leo-roadmap-phase {
	display: inline-block;
	margin-bottom: 13px;
	color: #8469ee;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 1.7px;
	text-transform: uppercase;
}
.leo-roadmap-card h4 {
	font-size: 19px;
	font-weight: 800;
	color: #211d35;
	margin-bottom: 13px;
}
.leo-roadmap-card p {
	margin: 0;
	color: #858197;
	font-size: 13px;
	line-height: 1.75;
}
.leo-roadmap-icon {
	width: 44px;
	height: 44px;
	margin: 0 auto 17px;
	border-radius: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient( 135deg, rgba(119,88,237,0.12), rgba(119,88,237,0.04) );
	color: #7457e8;
	font-size: 19px;
	font-weight: 800;
}
.leo-roadmap-item:nth-child(3) .leo-roadmap-icon {
	background: rgba(98,205,165,0.12);
	color: #48ad88;
} /* ========================================================= NEW LEO WEB3 FOOTER ========================================================= */
.leo-web3-footer {
	position: relative;
	overflow: hidden;
	background: #141126;
	color: #ffffff;
}
.leo-web3-footer:before {
	content: "";
	position: absolute;
	width: 650px;
	height: 650px;
	border-radius: 50%;
	border: 1px solid rgba(143,116,255,0.10);
	top: -390px;
	right: -130px;
}
.leo-web3-footer:after {
	content: "";
	position: absolute;
	width: 430px;
	height: 430px;
	border-radius: 50%;
	border: 1px solid rgba(102,208,168,0.08);
	bottom: -280px;
	left: -160px;
} /* FOOTER CTA */
.leo-footer-cta {
	position: relative;
	z-index: 2;
	padding: 80px 0;
	border-bottom: 1px solid rgba(255,255,255,0.08);
}
.leo-footer-cta-box {
	position: relative;
	overflow: hidden;
	padding: 55px 60px;
	border-radius: 28px;
	border: 1px solid rgba(151,128,255,0.22);
	background: radial-gradient(circle at 85% 10%, rgba(119,88,237,0.25), transparent 30%), radial-gradient(circle at 10% 100%, rgba(88,191,151,0.10), transparent 32%), rgba(255,255,255,0.025);
}
.leo-footer-cta-box:after {
	content: "";
	position: absolute;
	width: 220px;
	height: 220px;
	border: 1px solid rgba(151,128,255,0.12);
	border-radius: 50%;
	right: 7%;
	top: -130px;
}
.leo-footer-cta-content {
	position: relative;
	z-index: 2;
}
.leo-footer-cta-label {
	color: #a994ff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 2px;
	margin-bottom: 13px;
}
.leo-footer-cta h2 {
	color: #ffffff;
	font-size: 36px;
	font-weight: 800;
	margin-bottom: 12px;
}
.leo-footer-cta p {
	max-width: 650px;
	margin: 0;
	color: #aaa6ba;
	font-size: 15px;
	line-height: 1.8;
}
.leo-footer-cta-button {
	position: relative;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 25px;
	border-radius: 12px;
	background: linear-gradient(135deg, #8468ef, #6547d7);
	color: #fff !important;
	text-decoration: none;
	font-size: 13px;
	font-weight: 800;
	box-shadow: 0 14px 30px rgba(95,68,214,0.30);
	transition: all .3s ease;
}
.leo-footer-cta-button:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 38px rgba(95,68,214,0.40);
} /* FOOTER MAIN */
.leo-footer-main {
	position: relative;
	z-index: 2;
	padding: 50px 0 55px;
}
.leo-footer-brand {
	padding-right: 35px;
}
.leo-footer-logo {
	display: inline-block;
	margin-bottom: 22px;
}
.leo-footer-logo img {
	max-width: 145px;
	height: auto;
	/*filter: brightness(0) invert(1);*/
}
.leo-footer-brand p {
	color: #9792a8;
	font-size: 13px;
	line-height: 1.85;
	max-width: 330px;
}
.leo-footer-title {
	color: #ffffff;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 1.5px;
	margin-bottom: 22px;
	text-transform: uppercase;
}
.leo-footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
}
.leo-footer-links li {
	margin-bottom: 12px;
}
.leo-footer-links a {
	color: #9994a9;
	font-size: 13px;
	text-decoration: none;
	transition: all .25s ease;
}
.leo-footer-links a:hover {
	color: #ffffff;
	padding-left: 4px;
} /* COMMUNITY ICONS */
.leo-footer-social {
	display: flex;
	gap: 9px;
	margin-top: 22px;
}
.leo-social-link {
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255,255,255,0.10);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #aaa5b8;
	font-size: 13px;
	text-decoration: none;
	transition: all .3s ease;
}
.leo-social-link:hover {
	color: #ffffff;
	border-color: rgba(139,111,255,0.55);
	background: rgba(118,87,237,0.13);
	transform: translateY(-3px);
} /* NETWORK STATUS */
.leo-network-status {
	position: relative;
	z-index: 2;
	padding: 20px 0;
	border-top: 1px solid rgba(255,255,255,0.07);
	border-bottom: 1px solid rgba(255,255,255,0.07);
}
.leo-status-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}
.leo-status-items {
	display: flex;
	gap: 25px;
	flex-wrap: wrap;
}
.leo-status-item {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #858093;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.leo-status-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #59c99c;
	box-shadow: 0 0 0 4px rgba(89,201,156,0.10);
}
.leo-status-live {
	color: #59c99c;
} /* COPYRIGHT */
.leo-footer-bottom {
	position: relative;
	z-index: 2;
	padding: 22px 0;
}
.leo-footer-bottom-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
}
.leo-copyright {
	color: #706b7e;
	font-size: 11px;
}
.leo-legal-links {
	display: flex;
	gap: 20px;
}
.leo-legal-links a {
	color: #706b7e;
	font-size: 11px;
	text-decoration: none;
}
.leo-legal-links a:hover {
	color: #aaa5b8;
} /* ========================================================= RESPONSIVE ========================================================= */
@media (max-width: 991px) {
.leo-roadmap-header h2 {
	font-size: 38px;
}
.leo-roadmap-items {
	grid-template-columns: repeat(2, 1fr);
	gap: 25px;
}
.leo-roadmap-line {
	display: none;
}
.leo-roadmap-node {
	margin-top: 15px;
}
.leo-footer-cta-box {
	padding: 45px 35px;
}
.leo-footer-cta h2 {
	font-size: 30px;
}
.leo-footer-cta-button {
	margin-top: 25px;
}
.leo-footer-brand {
	margin-bottom: 35px;
}
}
@media (max-width: 575px) {
.leo-roadmap-section {
	padding: 80px 0;
}
.leo-roadmap-header {
	margin-bottom: 45px;
}
.leo-roadmap-header h2 {
	font-size: 30px;
}
.leo-roadmap-header p {
	font-size: 14px;
}
.leo-roadmap-items {
	grid-template-columns: 1fr;
}
.leo-roadmap-card {
	min-height: auto;
}
.leo-footer-cta {
	padding: 55px 0;
}
.leo-footer-cta-box {
	padding: 35px 25px;
}
.leo-footer-cta h2 {
	font-size: 27px;
}
.leo-footer-main {
	padding: 55px 0 35px;
}
.leo-status-inner, .leo-footer-bottom-inner {
	align-items: flex-start;
	flex-direction: column;
}
.leo-legal-links {
	gap: 14px;
	flex-wrap: wrap;
}
}



/* =========================================================
   LEO FAQ SECTION
========================================================= */

.leo-faq-section {
    position: relative;
    padding: 100px 0;
    background: #f8f7ff;
    overflow: hidden;
}

.leo-faq-section::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.07);
    filter: blur(80px);
    top: -180px;
    right: -120px;
}

.leo-faq-section::after {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.05);
    filter: blur(80px);
    bottom: -180px;
    left: -120px;
}

.leo-faq-header {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 750px;
    margin: 0 auto 55px;
}

.leo-faq-label {
    display: inline-block;
    margin-bottom: 14px;
    padding: 7px 16px;
    border: 1px solid rgba(124, 58, 237, 0.18);
    border-radius: 50px;
    background: rgba(124, 58, 237, 0.06);
    color: #7c3aed;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}

.leo-faq-header h2 {
    margin-bottom: 15px;
    color: #18152d;
    font-size: 42px;
    font-weight: 700;
}

.leo-faq-header p {
    margin: 0;
    color: #68657a;
    font-size: 16px;
    line-height: 1.8;
}

/* FAQ List */

.leo-faq-list {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
}

.leo-faq-item {
    margin-bottom: 16px;
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 8px 30px rgba(55, 40, 100, 0.05);
    overflow: hidden;
    transition: all 0.3s ease;
}

.leo-faq-item:hover {
    border-color: rgba(124, 58, 237, 0.28);
    box-shadow: 0 12px 35px rgba(55, 40, 100, 0.08);
}

.leo-faq-question {
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    padding: 22px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    color: #211c38;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.leo-faq-question:hover {
    color: #7c3aed;
}

.leo-faq-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    margin-left: 20px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.08);
    color: #7c3aed;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    font-weight: 400;
    transition: all 0.3s ease;
}

.leo-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.leo-faq-answer-inner {
    padding: 0 25px 24px;
    color: #6c687d;
    font-size: 15px;
    line-height: 1.8;
}

.leo-faq-item.active {
    border-color: rgba(124, 58, 237, 0.28);
}

.leo-faq-item.active .leo-faq-question {
    color: #7c3aed;
}

.leo-faq-item.active .leo-faq-icon {
    background: #7c3aed;
    color: #fff;
    transform: rotate(45deg);
}

/* Mobile */

@media (max-width: 767px) {

    .leo-faq-section {
        padding: 70px 15px;
    }

    .leo-faq-header {
        margin-bottom: 35px;
    }

    .leo-faq-header h2 {
        font-size: 30px;
    }

    .leo-faq-header p {
        font-size: 14px;
    }

    .leo-faq-question {
        padding: 18px;
        font-size: 14px;
    }

    .leo-faq-answer-inner {
        padding: 0 18px 20px;
        font-size: 14px;
    }

    .leo-faq-icon {
        flex: 0 0 28px;
        width: 28px;
        height: 28px;
        font-size: 18px;
    }
}


/* ==========================================
   LEO HERO - SUBTLE VISUAL POLISH
   ========================================== */

#home {
    position: relative;
    overflow: hidden;
}

/* Soft purple atmospheric glow */
#home::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    top: -220px;
    right: -140px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(124, 92, 255, 0.10) 0%,
        rgba(124, 92, 255, 0.04) 45%,
        transparent 72%
    );
    pointer-events: none;
}

/* Very subtle lower glow */
#home::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 300px;
    left: -180px;
    bottom: -180px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(155, 110, 255, 0.07) 0%,
        transparent 70%
    );
    pointer-events: none;
}

/* Keep hero content above the background */
#home .container,
#home .row {
    position: relative;
    z-index: 2;
}

/* Small refinement to the main heading */
#home h1 {
    letter-spacing: -0.5px;
}

/* Improve the main CTA slightly */
#home .btn {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

#home .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(124, 92, 255, 0.18);
}

/* Mobile */
@media (max-width: 767px) {
    #home::before {
        width: 320px;
        height: 320px;
        top: -130px;
        right: -120px;
    }

    #home::after {
        width: 280px;
        height: 220px;
        left: -130px;
        bottom: -120px;
    }
}




/* =========================================================
   DASHBOARD MODERN LAYOUT
   ========================================================= */

.register.section {
    padding-top: 45px;
    padding-bottom: 60px;
}

.register .bg_form {
    width: 100%;
    max-width: 100%;
    padding: 30px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 15px 45px rgba(80, 55, 130, 0.12);
}

/* Dashboard heading */
.register .bg_form > .text-left > h3 {
    margin-bottom: 28px;
    font-size: 30px;
    font-weight: 800;
    color: #5b3ca8;
    position: relative;
    padding-bottom: 14px;
}

.register .bg_form > .text-left > h3:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 70px;
    height: 4px;
    border-radius: 10px;
    background: linear-gradient(90deg, #7652d6, #24c98a);
}


/* =========================================================
   TOPUP / USER INFORMATION
   ========================================================= */

.dashboard-top-section {
    width: 100%;
    margin: 0 0 25px 0;
    padding: 22px 25px;
    border-radius: 18px;
    background: linear-gradient(
        135deg,
        rgba(118, 82, 214, 0.08),
        rgba(36, 201, 138, 0.07)
    );
    border: 1px solid rgba(118, 82, 214, 0.12);
}

.dashboard-top-section h4 {
    margin-bottom: 22px;
    color: #53369b;
    font-size: 20px;
    font-weight: 700;
}

.dashboard-top-section .btn {
    border: 0;
    border-radius: 8px;
    padding: 8px 20px;
    margin-left: 8px;
    background: linear-gradient(135deg, #7652d6, #5b3ca8);
    box-shadow: 0 5px 15px rgba(91, 60, 168, 0.22);
}

.dashboard-user-info {
    padding-top: 10px;
}

.dashboard-user-item {
    padding: 15px 18px;
    border-radius: 12px;
    background: rgba(255,255,255,0.8);
    border: 1px solid rgba(118, 82, 214, 0.10);
}

.dashboard-user-item p {
    margin-bottom: 5px;
}

.dashboard-user-item strong {
    color: #555;
    font-size: 14px;
}

.dashboard-user-item span {
    color: #5f46b2 !important;
    font-size: 16px !important;
    font-weight: 700;
}


/* =========================================================
   REFERRAL BOX
   ========================================================= */

.dashboard-referral {
    width: 100%;
    margin-bottom: 28px;
}

.dashboard-referral .dash_box {
    width: 100%;
}

.dashboard-referral .dashbox_inner {
    padding: 25px;
}

.dashboard-referral h5 {
    margin-bottom: 18px;
    color: #53369b;
    font-size: 19px;
    font-weight: 700;
}

.dashboard-referral .input-group {
    width: 100%;
}

.dashboard-referral .form-control {
    height: 48px;
    border-radius: 10px 0 0 10px;
    border: 1px solid #ddd;
    box-shadow: none;
    font-size: 14px;
}

.dashboard-referral .input-group-text {
    height: 48px;
    min-width: 52px;
    justify-content: center;
    border: 0;
    border-radius: 0 10px 10px 0;
    background: linear-gradient(135deg, #7652d6, #5b3ca8) !important;
}

.dashboard-referral .input-group-text i {
    color: #ffffff !important;
}


/* =========================================================
   STATISTICS GRID
   ========================================================= */

.dashboard-stats {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.dashboard-stat-col {
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 20px;
}

.dashboard-stat-card {
    width: 100%;
    height: 100%;
    min-height: 155px;
}


/* =========================================================
   DASHBOARD CARDS
   ========================================================= */

.dashboard-stat-card .dash_box {
    width: 100%;
    height: 100%;
    min-height: 155px;
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(
        145deg,
        #ffffff 0%,
        #faf8ff 55%,
        #f4fff9 100%
    );
    box-shadow:
        0 8px 25px rgba(75, 48, 140, 0.10),
        0 2px 5px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
    position: relative;
}

/* Colored top line */
.dashboard-stat-card .dash_box:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #7652d6, #24c98a);
}

/* Decorative glow */
.dashboard-stat-card .dash_box:after {
    content: "";
    position: absolute;
    right: -35px;
    top: -35px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(118, 82, 214, 0.07);
}

.dashboard-stat-card .dash_box:hover {
    transform: translateY(-6px);
    box-shadow:
        0 16px 35px rgba(75, 48, 140, 0.16),
        0 5px 10px rgba(0,0,0,0.04);
}

.dashboard-stat-card .dashbox_inner {
    height: 100%;
    min-height: 155px;
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.dashboard-stat-card h4 {
    margin: 0 0 15px 0;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 700;
    color: #4d4562;
}

.dashboard-stat-card h4 span {
    display: inline-block;
    margin-left: 4px;
    font-size: 11px;
    font-weight: 800;
    color: #7652d6 !important;
    background: rgba(118, 82, 214, 0.09);
    padding: 4px 8px;
    border-radius: 20px;
}

.dashboard-stat-card .price {
    margin: 0;
}

.dashboard-stat-card .price h2 {
    margin: 0;
    font-size: 27px;
    line-height: 1.2;
    font-weight: 800;
    color: #51399a;
    word-break: break-word;
}


/* =========================================================
   SPECIAL CARDS
   ========================================================= */

.dashboard-stat-card:nth-child(1) .dash_box:before {
    background: linear-gradient(90deg, #7652d6, #9a73ed);
}

.dashboard-stat-card:nth-child(2) .dash_box:before {
    background: linear-gradient(90deg, #24a9c9, #24c98a);
}

.dashboard-stat-card:nth-child(3) .dash_box:before {
    background: linear-gradient(90deg, #24c98a, #65d9a8);
}

.dashboard-stat-card:nth-child(4) .dash_box:before {
    background: linear-gradient(90deg, #f0b90b, #ffce48);
}


/* =========================================================
   REMOVE BOOTSTRAP / OLD LAYOUT GAPS
   ========================================================= */

.dashboard-main-row {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.dashboard-main-row > [class*="col-"] {
    padding-left: 10px;
    padding-right: 10px;
}

.dashboard-full-width {
    width: 100%;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (min-width: 1200px) {

    .dashboard-stat-col {
        width: 25%;
    }

}

@media (max-width: 1199px) {

    .dashboard-stat-col {
        width: 25%;
    }

    .dashboard-stat-card .price h2 {
        font-size: 24px;
    }

}

@media (max-width: 991px) {

    .register .bg_form {
        padding: 22px;
    }

    .dashboard-stat-col {
        width: 50%;
    }

}

@media (max-width: 575px) {

    .register.section {
        padding-top: 25px;
    }

    .register .bg_form {
        padding: 15px;
        border-radius: 15px;
    }

    .register .bg_form > .text-left > h3 {
        font-size: 25px;
    }

    .dashboard-top-section {
        padding: 18px 15px;
    }

    .dashboard-stat-col {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .dashboard-stat-card .dashbox_inner {
        min-height: 140px;
    }

    .dashboard-stat-card .price h2 {
        font-size: 25px;
    }

}



/* =========================================================
   DIRECT PAGE FOOTER ONLY
   Does NOT affect index.php footer
   ========================================================= */

.direct-page-footer {
    position: relative;
    z-index: 2;
    width: 100%;
    margin-top: 0;
    background: linear-gradient(
        135deg,
        #f5f1ff 0%,
        #ffffff 50%,
        #edfff7 100%
    ) !important;
    border-top: 1px solid rgba(118, 82, 214, 0.12);
    box-shadow: 0 -8px 25px rgba(80, 55, 130, 0.06);
}

.direct-page-footer .footer-top {
    padding: 22px 15px !important;
    background: transparent !important;
}

.direct-page-footer .footer-top p {
    margin: 0;
    color: #5b3ca8 !important;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* Small green accent */
.direct-page-footer .footer-top p::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 50%;
    background: #24c98a;
    vertical-align: middle;
    box-shadow: 0 0 8px rgba(36, 201, 138, 0.45);
}

@media (max-width: 575px) {

    .direct-page-footer .footer-top {
        padding: 18px 10px !important;
    }

    .direct-page-footer .footer-top p {
        font-size: 13px;
    }

}



/* =========================================================
   DOWNLINE PAGE
   ========================================================= */

.register.section {
    padding-top: 45px;
    padding-bottom: 60px;
}

.downline-page {
    width: 100%;
}

.downline-page > .row {
    margin-left: 0;
    margin-right: 0;
}

.downline-title {
    width: 100%;
    margin: 0 0 25px 0;
    padding: 0;
}

.downline-title h3 {
    margin: 0;
    color: #5b3ca8;
    font-size: 30px;
    font-weight: 800;
    position: relative;
    padding-bottom: 14px;
}

.downline-title h3:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 70px;
    height: 4px;
    border-radius: 10px;
    background: linear-gradient(90deg, #7652d6, #24c98a);
}


/* Main content box */

.downline-content {
    width: 100%;
    padding: 25px;
    border-radius: 20px;
    background: linear-gradient(
        145deg,
        rgba(255,255,255,0.98),
        rgba(248,246,255,0.98)
    );
    border: 1px solid rgba(118,82,214,0.10);
    box-shadow: 0 12px 35px rgba(80,55,130,0.10);
}


/* Level heading */

.downline-content > h3 {
    margin: 30px 0 15px;
    padding: 12px 18px;
    border-radius: 12px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    background: linear-gradient(135deg, #7652d6, #5b3ca8);
    box-shadow: 0 7px 18px rgba(91,60,168,0.18);
}

.downline-content > h3:first-child {
    margin-top: 0;
}


/* =========================================================
   TABLE
   ========================================================= */

.downline-table-wrapper {
    width: 100%;
    margin-bottom: 25px;
    overflow-x: auto;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(80,55,130,0.08);
}


/* Main table */

.downline-table {
    width: 100%;
    min-width: 650px;
    margin: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0;
    background: #ffffff !important;
    border: 1px solid rgba(118,82,214,0.12);
    overflow: hidden;
}


/* Header */

.downline-table thead th {
    padding: 15px 16px !important;
    background: linear-gradient(
        135deg,
        #7652d6,
        #5b3ca8
    ) !important;

    color: #ffffff !important;
    border: 0 !important;

    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
    vertical-align: middle;
}


/* Header first / last corners */

.downline-table thead th:first-child {
    border-radius: 12px 0 0 0;
}

.downline-table thead th:last-child {
    border-radius: 0 12px 0 0;
}


/* Body rows */

.downline-table tbody tr {
    background: #ffffff !important;
    transition: all 0.2s ease;
}

.downline-table tbody tr:nth-child(even) {
    background: #faf8ff !important;
}

.downline-table tbody tr:hover {
    background: #f1edff !important;
    transform: none;
}


/* Cells */

.downline-table tbody td {
    padding: 14px 16px !important;
    color: #4e4760 !important;
    background: transparent !important;

    border-top: 1px solid rgba(118,82,214,0.08) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;

    font-size: 14px;
    font-weight: 500;
    vertical-align: middle;
}


/* First column */

.downline-table tbody td:first-child {
    color: #7652d6 !important;
    font-weight: 700;
}


/* User ID */

.downline-table tbody td:nth-child(2) {
    color: #5b3ca8 !important;
    font-weight: 700;
}


/* Amount column */

.downline-table tbody td:nth-child(5) {
    color: #15996d !important;
    font-weight: 700;
}


/* Total row */

.downline-table .total-row td {
    padding: 15px 16px !important;
    background: linear-gradient(
        90deg,
        #f1edff,
        #edfff7
    ) !important;

    color: #53369b !important;
    font-weight: 800 !important;

    border-top: 2px solid rgba(118,82,214,0.15) !important;
}


/* Total amount */

.downline-table .total-row td:last-child {
    color: #15996d !important;
    font-size: 16px;
}


/* Empty table message */

.downline-table .empty-row td {
    padding: 25px !important;
    text-align: center;
    color: #777 !important;
    background: #ffffff !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .register.section {
        padding-top: 25px;
        padding-bottom: 40px;
    }

    .downline-title h3 {
        font-size: 25px;
    }

    .downline-content {
        padding: 15px;
        border-radius: 15px;
    }

    .downline-content > h3 {
        font-size: 16px;
        padding: 11px 14px;
    }

    .downline-table-wrapper {
        margin-bottom: 20px;
        border-radius: 10px;
    }

    .downline-table {
        min-width: 650px;
    }

    .downline-table thead th,
    .downline-table tbody td {
        padding: 12px 13px !important;
        font-size: 13px;
    }

}


/* =========================================================
   FOOTER SPACE
   ========================================================= */

.direct-page-footer {
    margin-top: 0;
}




/* =========================================================
           MAIN PAGE
           ========================================================= */


.register.section {
	padding-top: 45px;
	padding-bottom: 60px;
	width: 100%;
}
.downline-page {
	width: 100%;
	margin: 0;
}
.downline-page > .col-12 {
	width: 100%;
	padding-left: 12px;
	padding-right: 12px;
}
/* =========================================================
           PAGE TITLE
           ========================================================= */

.downline-title {
	width: 100%;
	margin: 0 0 25px 0;
	padding: 0;
}
.downline-title h3 {
	margin: 0;
	padding-bottom: 14px;
	color: #5b3ca8;
	font-size: 30px;
	line-height: 1.3;
	font-weight: 800;
	position: relative;
}
.downline-title h3:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 70px;
	height: 4px;
	border-radius: 10px;
	background: linear-gradient(  90deg,  #7652d6,  #24c98a  );
}
/* =========================================================
           MAIN CONTENT BOX
           ========================================================= */

.downline-content {
	width: 100%;
	max-width: 100%;
	padding: 25px;
	border-radius: 20px;
	background: linear-gradient(  145deg,  rgba(255,255,255,0.98),  rgba(248,246,255,0.98)  );
	border: 1px solid rgba(118,82,214,0.10);
	box-shadow: 0 12px 35px rgba(80,55,130,0.10),  0 2px 5px rgba(0,0,0,0.02);
}
/* =========================================================
           LEVEL HEADING
           ========================================================= */

.downline-content > h3 {
	margin: 30px 0 15px 0;
	padding: 13px 18px;
	border-radius: 12px;
	color: #ffffff;
	font-size: 18px;
	line-height: 1.4;
	font-weight: 700;
	background: linear-gradient(  135deg,  #7652d6,  #5b3ca8  );
	box-shadow: 0 7px 18px rgba(91,60,168,0.18);
}
.downline-content > h3:first-child {
	margin-top: 0;
}
/* =========================================================
           TABLE WRAPPER
           ========================================================= */

.downline-table-wrapper {
	width: 100%;
	max-width: 100%;
	margin: 0 0 28px 0;
	overflow-x: auto;
	border-radius: 14px;
	box-shadow: 0 6px 20px rgba(80,55,130,0.08);
	-webkit-overflow-scrolling: touch;
}
/* =========================================================
           MAIN TABLE
           ========================================================= */

.downline-table {
	width: 100%;
	min-width: 650px;
	margin: 0 !important;
	border-collapse: separate !important;
	border-spacing: 0;
	background: #ffffff !important;
	border: 1px solid rgba(118,82,214,0.12);
	overflow: hidden;
}
/* =========================================================
           TABLE HEADER
           ========================================================= */

.downline-table thead th {
	padding: 15px 16px !important;
	color: #ffffff !important;
	background: linear-gradient(  135deg,  #7652d6,  #5b3ca8  ) !important;
	border: 0 !important;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	white-space: nowrap;
	vertical-align: middle;
	text-align: left;
}
.downline-table thead th:first-child {
	text-align: center;
	border-radius: 12px 0 0 0;
}
.downline-table thead th:last-child {
	border-radius: 0 12px 0 0;
}
/* =========================================================
           TABLE BODY
           ========================================================= */

.downline-table tbody tr {
	background: #ffffff !important;
	transition: background 0.2s ease,  box-shadow 0.2s ease;
}
.downline-table tbody tr:nth-child(even) {
	background: #faf8ff !important;
}
.downline-table tbody tr:hover {
	background: #f1edff !important;
}
/* =========================================================
           TABLE CELLS
           ========================================================= */

.downline-table tbody td {
	padding: 14px 16px !important;
	color: #4e4760 !important;
	background: transparent !important;
	border-top: 1px solid rgba(118,82,214,0.08) !important;
	border-left: 0 !important;
	border-right: 0 !important;
	border-bottom: 0 !important;
	font-size: 14px;
	font-weight: 500;
	vertical-align: middle;
	text-align: left;
}
/* Serial number */

.downline-table tbody td:first-child {
	color: #7652d6 !important;
	font-weight: 700;
	text-align: center;
}
/* User ID */

.downline-table tbody td:nth-child(2) {
	color: #5b3ca8 !important;
	font-weight: 700;
}
/* Amount */

.downline-table tbody td:nth-child(5) {
	color: #15996d !important;
	font-weight: 700;
}
/* =========================================================
           TOTAL ROW
           ========================================================= */

.downline-table .total-row td {
	padding: 15px 16px !important;
	background: linear-gradient(  90deg,  #f1edff,  #edfff7  ) !important;
	color: #53369b !important;
	font-size: 14px;
	font-weight: 800 !important;
	border-top: 2px solid rgba(118,82,214,0.15) !important;
}
.downline-table .total-row td:first-child {
	text-align: left;
}
.downline-table .total-row td:last-child {
	color: #15996d !important;
	font-size: 16px;
	text-align: left;
}
/* =========================================================
           NO RECORDS
           ========================================================= */

.downline-table .empty-row td {
	padding: 25px !important;
	text-align: center;
	color: #777 !important;
	background: #ffffff !important;
	font-weight: 500;
}
/* =========================================================
           FOOTER
           ========================================================= */

.direct-page-footer {
	position: relative;
	z-index: 2;
	width: 100%;
	margin-top: 0;
	background: linear-gradient(  135deg,  #f5f1ff 0%,  #ffffff 50%,  #edfff7 100%  ) !important;
	border-top: 1px solid rgba(118,82,214,0.12);
	box-shadow: 0 -8px 25px rgba(80,55,130,0.06);
}
.direct-page-footer .footer-top {
	padding: 22px 15px !important;
	background: transparent !important;
}
.direct-page-footer .footer-top p {
	margin: 0;
	color: #5b3ca8 !important;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.3px;
}
.direct-page-footer .footer-top p:before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 8px;
	border-radius: 50%;
	background: #24c98a;
	vertical-align: middle;
	box-shadow: 0 0 8px rgba(36,201,138,0.45);
}


        /* =========================================================
           TABLET
           ========================================================= */

        @media (max-width: 991px) {
.register.section {
	padding-top: 35px;
	padding-bottom: 50px;
}
.downline-content {
	padding: 20px;
}
.downline-title h3 {
	font-size: 27px;
}
}


        /* =========================================================
           MOBILE
           ========================================================= */

        @media (max-width: 767px) {
.register.section {
	padding-top: 25px;
	padding-bottom: 40px;
}
.downline-page > .col-12 {
	padding-left: 8px;
	padding-right: 8px;
}
.downline-title {
	margin-bottom: 18px;
}
.downline-title h3 {
	font-size: 25px;
}
.downline-content {
	padding: 15px;
	border-radius: 15px;
}
.downline-content > h3 {
	margin-top: 22px;
	margin-bottom: 12px;
	padding: 11px 14px;
	font-size: 16px;
}
.downline-table-wrapper {
	margin-bottom: 20px;
	border-radius: 10px;
}
.downline-table {
	min-width: 650px;
}
.downline-table thead th,  .downline-table tbody td {
	padding: 12px 13px !important;
	font-size: 13px;
}
}


        /* =========================================================
           SMALL MOBILE
           ========================================================= */

        @media (max-width: 575px) {
.downline-content {
	padding: 12px;
}
.downline-title h3 {
	font-size: 23px;
}
.downline-content > h3 {
	font-size: 15px;
}
.direct-page-footer .footer-top {
	padding: 18px 10px !important;
}
.direct-page-footer .footer-top p {
	font-size: 13px;
}
}