/*Header start*/

body {
	width: 430px;
	margin: 0 auto;
}



/* css for scrolling */

.section-overflow {
	overflow: auto !important;
	height: 100vh;
}

.dash-wrap {
	height: 80vh;
	overflow: hidden;
	overflow-y: scroll;
	position: relative;
	z-index: 9;
	-webkit-overflow-scrolling: touch;
	pointer-events: auto;
	scrollbar-width: thin;
	scrollbar-color: #40bad2 #ddd;
}

/* default menu */

@font-face {
	font-family: 'News701 BT';
	src: url('../fonts/News701BT-ItalicA.woff2') format('woff2'),
		url('../fonts/News701BT-ItalicA.woff') format('woff');
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'News701 BT';
	src: url('../fonts/News701BT-BoldA.woff2') format('woff2'),
		url('../fonts/News701BT-BoldA.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Alternox';
	src: url('../fonts/AlternoxBold.woff2') format('woff2'),
		url('../fonts/AlternoxBold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Alternox';
	src: url('../fonts/AlternoxExtraBold.woff2') format('woff2'),
		url('../fonts/AlternoxExtraBold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Alternox';
	src: url('../fonts/AlternoxExtraLight.woff2') format('woff2'),
		url('../fonts/AlternoxExtraLight.woff') format('woff');
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Alternox';
	src: url('../fonts/AlternoxRegular.woff2') format('woff2'),
		url('../fonts/AlternoxRegular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Alternox';
	src: url('../fonts/AlternoxLight.woff2') format('woff2'),
		url('../fonts/AlternoxLight.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Alternox';
	src: url('../fonts/AlternoxSemiBold.woff2') format('woff2'),
		url('../fonts/AlternoxSemiBold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}




.alter {
	font-family: 'Alternox';
	letter-spacing: 3px;
}




.head-font {
	font-family: 'News701 BT';
}


/* footer */
.footer-link li {
	display: inline-block;
	margin: -8px 13px;
	position: relative;
	padding: 0px 0px;
}

.coming-soon {
	position: relative;
	top: -36px;
	left: 5px;
}

.footer-link-list li iconify-icon {
	font-size: 25px;
	/* background: #000; */
	padding: 7px 7px;
	border-radius: 50px;
	background: linear-gradient(#04314d 32%, #060606 100%) padding-box, linear-gradient(0deg, #041c3a 32%, #fff 100%) border-box;
	/* background-origin: padding-box, border-box; */
	background-clip: padding-box, border-box;
	border: 2px solid transparent;
	background-origin: border-box;
	/* background-clip: padding-box, border-box; */
	position: relative;
	z-index: 1;
}

.footer-link-list li iconify-icon::after {
	position: absolute;
	content: "";
	background: #00d5ff;
	width: 20px;
	height: 20px;
	top: 9px;
	right: 0;
	left: 0;
	bottom: 0;
	margin: 0 auto;
	z-index: -1;
	filter: blur(9px);
}

.footer-link-list li a {
	color: #fff;
}

.footer-link-list li a:hover {
	color: #00ffe9;
}

.footer-link-list li a:hover::after {
	position: absolute;
	content: "";
	background: #00fce6;
	width: 75%;
	height: 4px;
	right: 0;
	left: 0;
	bottom: -10px;
	margin: 0 auto;
	filter: blur(0px);
	border-radius: 12px;
	box-shadow: 0px 10px 2px 10px #00ffe9;
}

.footer-link-list .coming-soon a:hover::after {
	display: none;
}

.footer-link-list .coming-soon iconify-icon {

	font-size: 40px;
}

.footer {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 1000;
	bottom: 0px !important;
	height: 80px;
	width: 430px;
	margin: 0 auto;
	background: rgb(157, 36, 8);
	background: url("../images/footer-bg.png") no-repeat scroll 0 0;
	background-size: cover;
}

.footer-link-list li a h6 {
	font-size: 11px;
	font-family: Alternox;
	letter-spacing: 2px;
}

/* .footer-link-list li:hover::before {
	position: absolute;
	content: "";
	top: -23px;
	left: 0px;
	right: 0px;
	margin: 0 auto;
	width: 100%;
	height: 5px;
	border-top: 7px solid rgb(255, 185, 103);
	border-radius: 5px;
} */


.connect-wallet-btn {
	position: relative;
	display: inline-block;
	padding: 10px 30px;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 12px;
	border: 2px solid transparent;
	background: linear-gradient(135deg, #04314D, #00FFE9);
	/* background-size: 300% 300%; */
	box-shadow: 0 0 15px rgba(0, 255, 233, 0.25);
	transition: all 0.4s ease-in-out;
	overflow: hidden;
	z-index: 1;
	font-family: Alternox;
}

/* Inner span for shine */
.connect-wallet-btn span {
	position: relative;
	z-index: 2;
}

/* Glowing border & animated gradient on hover */
.connect-wallet-btn::before {
	content: '';
	position: absolute;
	top: -2px;
	left: -2px;
	right: -2px;
	bottom: -2px;
	background: linear-gradient(45deg, #00FFE9, #04314D, #00FFE9);
	background-size: 400%;
	z-index: 0;
	filter: blur(8px);
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
	border-radius: 14px;
}

/* Hover effect: glow + move + shine */
.connect-wallet-btn:hover {
	background-position: right center;
	transform: translateY(-3px) scale(1.03);
	box-shadow: 0 0 20px #00FFE9, 0 0 40px #04314D;
}

.connect-wallet-btn:hover::before {
	opacity: 1;
	animation: pulseGlow 3s linear infinite;
}

/* Active: button press */
.connect-wallet-btn:active {
	transform: translateY(1px) scale(0.97);
	box-shadow: 0 0 10px #00FFE9;
}

/* Focus ring */
.connect-wallet-btn:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 255, 233, 0.4);
}

/* Glowing pulse animation */
@keyframes pulseGlow {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}









/**********************************flash **********************************/


.custom-select-arrow {
	appearance: none;
	/* Remove default arrow */
	-webkit-appearance: none;
	-moz-appearance: none;
	background: url('arrow-down.png') no-repeat right 1rem center;
	background-size: 16px;
	padding-right: 2.5rem;
	/* Space for arrow */
	border: 1px solid #ccc;
	border-radius: 4px;
	height: 38px;
}

.custom-select-no-arrow {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 2.5rem;
	height: 38px;
	width: 100%;
}

.custom-arrow-img {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	pointer-events: none;
	/* So clicks go through to the select */
}


#language {
	padding: 7px 9px;
	font-size: 16px;
	border-radius: 10px;
	border: 1px solid #40bad2;
	width: 111px;
	background: #04314D;
	background: linear-gradient(90deg, rgba(4, 49, 77, 1) 0%, rgba(1, 209, 229, 1) 100%);
	color: #fff;
	font-family: Alternox;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 1px;
}

#language option {
	color: #000;
	background: #40bad2;
}



.home-banner {
	background: rgba(1, 156, 187, 0.5);
	padding: 20px 0px 20px 0;
	border-radius: 20px;
	margin: 0px 0px 0 0;
	position: relative;
	z-index: 1;
	border: 1px solid #03b2e0;
	position: relative;
}

.text-gradient {
	background: -webkit-linear-gradient(90deg, #04314d 32%, #00ecff 78%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;

	position: relative;
}

.logo h1 {
	font-size: 75px;
	font-style: italic;
	/* font-weight: bold; */
}

.stroke-text {
	-webkit-text-stroke: 1px #00ecff;
	/* Stroke color */
	text-stroke: 1px #00ecff;
	/* Fallback for other engines */
}

.flash-img {
	margin: 60px 0px;
	animation: animate 4s ease-in-out infinite;
}

.main-btn {
	margin-bottom: 140px;
}

.home::after {
	position: absolute;
	content: "";
	background: #00ffe6;
	width: 258px;
	height: 252px;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
	border-radius: 60px;
	filter: blur(70px);
}

/**********************************Pop-up **********************************/

.modal-content {
	border-radius: 15px;
	background: linear-gradient(145deg, #04314d, #00ecff);
	color: white;
	box-shadow: 0 5px 20px rgba(0, 255, 255, 0.3);
}

.pop-up-bg {
	background: rgb(44, 15, 100);
	padding: 15px 15px;
}

/*.pop-style {
	padding-top: 30px;
	padding-bottom: 20px;
	margin-top: 0px;
	margin-bottom: 0px;
	border-radius: 25px;
}*/

.pop-style1 {
	padding-top: 30px;
	padding-bottom: 20px;

	margin-bottom: 0px;
	border-radius: 25px;
}

#togglePassword {
	position: absolute;
	top: 51px;
	right: 18px;
	color: #000;
}

.form-ico {
	position: absolute;
	content: "";
	left: 0px;
	top: 0px;
	bottom: 0px;
	margin: auto;
	font-size: 21px;
	color: #ffffff;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	text-align: center;
	padding: 7px 0px;

}

.form-ico iconify-icon {
	color: #999595;
}




.google-btn {
	display: flex;
	align-items: center;
	justify-content: start;
	gap: 10px;
	background-color: #fff;
	color: #444;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 10px 10px;
	font-weight: 500;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	text-decoration: none;
}

.google-btn:hover {
	background-color: #f7f7f7;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.12);
	text-decoration: none;
}

.google-logo {
	height: 20px;
}

.either::after {
	position: absolute;
	content: "";
	background: #000;
	width: 45%;
	height: 1px;
	top: 24px;
	left: 0;
}

.either::before {
	position: absolute;
	content: "";
	background: #000;
	width: 45%;
	height: 1px;
	top: 24px;
	right: 0;
}

.social-link-list li {
	display: inline-block;
	padding: 4px 0px;
	background: #fff;
	border-radius: 10px;
	width: 32px;
	height: 32px;
	text-align: center;
	margin: 0 25px;
}

.social-link-list a {
	color: #000;
}

.wallet-btn .btn-primary {
	padding: 2px 3px;
	font-size: 9px;
}

.wallet-icon {
	display: flex;
	align-items: center;
}

.connect-wallet-list {
	margin: 26px 20px;
}

.w-icon {
	background: #fff;
	width: 32px;
	height: 32px;
	border-radius: 5px;
	justify-content: center;
	padding: 4px 4px;
}

.w-icon {
	background: #fff;
	width: 32px;
	height: 32px;
	border-radius: 5px;
	justify-content: center;
	padding: 4px 4px;
	margin-right: 17px;
}

.split {
	display: flex;
	justify-content: space-between;
}

.connect-wallet-list li {
	padding: 10px 0px;
}

/**********************************Home **********************************/


.home {
	min-height: 100vh;
	background: url("../images/bg-circle.png") #0e1f29 no-repeat scroll 0 0;
	background-size: cover;
}

.head-btn .btn-primary {
	padding: 6px 14px;
	font-size: 12px;
	text-transform: none;
	border: 1px solid #40bad2;
	background: linear-gradient(90deg, rgba(4, 49, 77, 1) 0%, rgba(1, 209, 229, 1) 100%);
}

.navbar-head h4 {
	display: none;
}

.globe-img {
	margin: 30px 0px 55px 0px;
	animation-name: rotate;
	animation-duration: 6.2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.rank.grad-box {
	background: #04314D;
	background: linear-gradient(0deg, rgba(4, 49, 77, 1) 32%, rgba(64, 186, 210, 1) 100%);
	width: 299px;
	height: 87px;
	margin: 20px auto 180px auto;
	border-radius: 10px;
	padding: 24px 0px;
	position: relative;
}

.rank.grad-box::after {
	position: absolute;
	content: "";
	background: #00ffe9;
	width: 50%;
	height: 5px;
	left: 0;
	right: 0;
	bottom: -1px;
	margin: 0 auto;
	box-shadow: 0px 0px 8px 2px #00ffe9;
	border-radius: 10px;
	mask-image: linear-gradient(#000, #000);
	mask-size: 0% 70%;
	mask-position: 0 45%, 25% 25%, 50% 50%, 75% 0, 100% 50%;
	mask-repeat: no-repeat;
	animation: mask 5s linear infinite;
}

/**********************************Home end **********************************/

/********************************** Referral **********************************/

.team-tab #pills-tab {
	background: linear-gradient(0deg, rgba(4, 49, 77, 1) 32%, rgba(64, 186, 210, 1) 100%);
	padding: 10px 0px;
	border-radius: 15px;
}

.process span {
	color: #fff;
	font-size: 10px;
	font-weight: bold;
	letter-spacing: 2px;
}

.tab-view {
	background: linear-gradient(0deg, rgba(4, 49, 77, 1) 32%, rgba(64, 186, 210, 1) 100%);
	margin: 20px 20px;
	border-radius: 10px;
}

.ref_link {
	margin: 15px 0px;
	width: 100%;
	position: relative;
	padding: 0px 9px;
}

.ref_link input[type="text"] {
	width: 100%;
	height: 40px;
	color: #000;
	padding-left: 20px;
	padding-top: 3px;
	font-weight: 600;
	font-size: 14px;
	background: #fff;
	border-radius: inherit;
	font-weight: normal;
	border-radius: 10px;
}

.err_msg {
	position: absolute;
	right: 15px;
	top: 2px;
	width: 33px;
	height: 33px;
	text-align: center;
	padding-top: 7px;
	border-radius: 50%;
	font-size: 14px;
	cursor: pointer;
}

.scan-code {
	background: #0e1f29;
	width: 242px;
	height: 296px;
	margin: 30px auto;
	border-radius: 10px;
	position: relative;
	z-index: 1;
}

.scan-code::after {
	position: absolute;
	content: "";
	background: url("../images/scan-bg.png");
	width: 242px;
	height: 296px;
	top: 0;
	right: 0;
	z-index: -1;
	animation-name: flash;
	animation-duration: 3s;
	animation-iteration-count: infinite;
}

.scan-code::before {
	position: absolute;
	content: "";
	background: url("../images/scan-bfr.png");
	width: 39px;
	height: 36px;
	bottom: 49px;
	right: 0;
	left: 13px;
	margin: 0 auto;
	animation-name: swing;
	animation-duration: 3s;
	animation-iteration-count: infinite;
}

.content h5 {
	font-family: Mulish;
	letter-spacing: 2px;
	font-weight: bold;
	font-size: 13px;
}

.social-icos li {
	display: inline-block;
	padding: 20px 20px;
}

.social-icos {
	text-align: center;
	margin: 30px 0px;
}

.content {
	margin: 26px 0px;
}

.earn-spilt {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}

.earn-box {
	background: #0e1f29;
	padding: 10px 0px;
	clip-path: polygon(10% 0, 100% 0%, 90% 100%, 0% 100%);
	border: 3px solid #40bad2;
}

.earn-banner {
	margin: 50px 0px;
}

.earn-details span {
	font-size: 22px;
	font-weight: bold;
}

.details-text-view {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #0e1f29;
	padding: 10px 20px;
	border-radius: 60px;
	margin: 5px 10px;
}

.details-text-view h5 {
	font-size: 14px;
}

.details-text-view span {
	font-size: 20px;
}

.sub-tit {
	margin: 10px 20px;
}

/********************************** Task **********************************/



.coming-soon-img {
	position: relative;
	top: 71px;
	bottom: 0;
	right: 0;
	left: 0;
	margin: 0 auto;
	align-content: center;
}

.coming-soon-img::after {
	position: absolute;
	content: "";
	background: url("../images/coming=flash.png") no-repeat scroll 0 0;
	top: 0px;
	right: 0;
	left: 0;
	bottom: 0;
	margin: 0 auto;
	z-index: 99;
	width: 186px;
	height: 186px;
	animation-name: flash;
	animation-duration: 3s;
	animation-iteration-count: infinite;
}

/********************************** Footer **********************************/


.footer-inner {
	top: 0;
	position: sticky;
	bottom: 0;
	z-index: 2;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	border-top: 2px solid #ff6309;
	padding: 10px 0;
	background: #f2cfc1;
	margin-top: 96px !important;
}

/********************************** upgrade start **********************************/

.upgrade.grad-box {
	background: #04314D;
	background: linear-gradient(0deg, rgba(4, 49, 77, 1) 32%, rgba(64, 186, 210, 1) 100%);
	width: 89%;
	height: auto;
	margin: 20px auto 20px auto;
	border-radius: 10px;
	padding: 24px 10px;
	position: relative;
}

.upgrade.grad-box::after {
	position: absolute;
	content: "";
	background: #00ffe9;
	width: 50%;
	height: 5px;
	left: 0;
	right: 0;
	bottom: -1px;
	margin: 0 auto;
	box-shadow: 0px 0px 8px 2px #00ffe9;
	border-radius: 10px;
	mask-image: linear-gradient(#000, #000);
	mask-size: 0% 70%;
	mask-position: 0 45%, 25% 25%, 50% 50%, 75% 0, 100% 50%;
	mask-repeat: no-repeat;
	animation: mask 5s linear infinite;
}

.upgrades.grad-box {
	background: #04314D;
	background: linear-gradient(0deg, rgba(4, 49, 77, 1) 32%, rgba(64, 186, 210, 1) 100%);
	width: 98%;
	height: auto;
	margin: 20px auto 20px auto;
	border-radius: 10px;
	padding: 24px 10px;
	position: relative;
}
.upgrades.grad-box::after {
	/* position: absolute; */
	content: "";
	/* background: #00ffe9; */
	width: 50%;
	height: 5px;
	left: 0;
	right: 0;
	bottom: -1px;
	margin: 0 auto;
	box-shadow: 0px 0px 8px 2px #00ffe9;
	border-radius: 10px;
	mask-image: linear-gradient(#000, #000);
	mask-size: 0% 70%;
	mask-position: 0 45%, 25% 25%, 50% 50%, 75% 0, 100% 50%;
	mask-repeat: no-repeat;
	animation: mask 5s linear infinite;
}


.add-upgrade span {
	font-size: 12px;
}

.upgrade-details li {
	padding: 6px 0px;
}

.upgrade-details {
	margin: 15px 0 0px 0;
}

.acc-info-list li {
	padding: 5px 0px 0px 0px;
}

.acc-info {
	margin-bottom: 20px;
}

.level-det {
	margin: 14px 0px;
}

.level-det {
	margin: 14px 0px;
	background: #0e1f29;
	padding: 15px 0px;
	clip-path: polygon(10% 0, 100% 0%, 90% 100%, 0% 100%);
}

.level-box {
	background: linear-gradient(0deg, rgba(4, 49, 77, 1) 32%, rgba(64, 186, 210, 1) 100%);
	padding: 10px 20px;
	margin: 15px 5px;
	border-radius: 10px;
	border: 1px solid #40bad2;
	position: relative;
}

.level-box::after {
	position: absolute;
	content: "";
	background: #00ffe9;
	width: 2px;
	height: 60%;
	left: 78px;
}

.acc-info-list {
	margin-bottom: 60px;
}



/************************ Wallet **********************************/

.wallet-tab li button {
	margin: 10px;
	width: 175px;
	font-size: 14px;
	border: none;
	border-radius: 10px;
	color: #fff;
	font-weight: 600;
	background: linear-gradient(135deg, #04314D 0%, #00FFE9 100%);
	background-size: 200% 200%;
	transition: all 0.4s ease;
	position: relative;
	z-index: 1;
	overflow: hidden;
	box-shadow: 0 8px 20px rgba(0, 255, 233, 0.15), 0 0 5px rgba(0, 255, 233, 0.1);
}

/* Hover: glowing, animated gradient */
.wallet-tab li button:hover {
	background-position: right center;
	box-shadow: 0 0 15px #00FFE9, 0 0 25px #04314D;
	transform: translateY(-4px) scale(1.03);
	color: #000;
}

/* Active: pressed effect */
.wallet-tab li button:active {
	color: #00ffe9;
	transform: translateY(1px) scale(0.97);
	box-shadow: 0 0 10px #00FFE9;
}

/* Focus for accessibility */
.wallet-tab li button:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 255, 233, 0.4);
}


/* .wallet-tab li button {
	margin: 10px 10px;
	background: #04314D;
	background: linear-gradient(0deg, rgba(4, 49, 77, 1) 32%, rgba(0, 255, 233, 1) 100%);
	border: none !important;
	color: #fff;
	width: 175px;
	border-radius: 10px !important;
	font-size: 14px;
} */
/* 
.wallet-tab li button:hover {
	color: #fff !important;
	background: #04314D;
	background: linear-gradient(180deg, rgba(4, 49, 77, 1) 32%, rgba(0, 255, 233, 1) 100%);
} */

.wallet-tab {
	border: none;
}

.earn-tot {
	display: flex;
	justify-content: space-around;
	align-items: center;
	background: #04314d;
	padding: 10px 10px;
	border-radius: 5px;
	margin: 30px 0px 0px 0px;
}

.earn-achive {
	background: #04314d;
	margin: 20px 0px 70px 0px;
	padding: 20px 10px;
	border-radius: 5px;
}

.earn-list-details {
	text-align: start;
}

.earn-achive ul li {
	padding: 8px 13px;
}

.log-out a {
	color: #fff;
}

.log-out {
	margin: 0px 21px;
}

.log-out a:hover {
	color: #00ffe6;
}

.wallet-tab li button iconify-icon {
	position: relative;
	top: 4px;
}

.coming-soon-img h1 span {
	mask-image: linear-gradient(#000, #000);
	mask-size: 0% 70%;
	mask-position: 0 45%, 25% 25%, 50% 50%, 75% 0, 100% 50%;
	mask-repeat: no-repeat;
	animation: mask 1s linear infinite;
	z-index: 99;
}



/************************ PHASE**********************************/
/************************ 2222222 **********************************/

/* commom css */

.bg-grade1
{
background: #04314D;
  background: linear-gradient(0deg, rgba(4, 49, 77, 1) 32%, rgba(64, 186, 210, 1) 100%);
}
.bg-grade2
{
background: linear-gradient(#04314d 32%, #060606 100%) padding-box, linear-gradient(0deg, #041c3a 32%, #fff 100%) border-box;
}
.bg-shade{
	background: #0e1f29;
}
.bg-shade2{
background: #04314d;
}
.rounded-10 {
	border-radius: 10px;
}
.rounded-20 {
	border-radius: 20px;
}

.glossy-bg{
	background: rgba(1, 156, 187, 0.5);
	border: 1px solid #03b2e0;
}

.z-in1 {
	z-index: 1;
}
.z-in2 {
	z-index: 2;
}
.z-in3 {
	
z-index: 3;

}
/* commom css */
#myInput:focus-visible {
	outline: none;
}
/************************ global pool st **********************************/



.pool {
	padding: 3px 9px;
	border: 2px solid #40bad2;
}
.pool-value-sec {
	padding: 25px 10px;
}
.deposit-box .form-control {
	color: #fff;
}
.deposit-box  .form-ico iconify-icon {
	color: #00ffe9;
}
.form-ico {

	z-index: 10;
}
.ball-blur {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	text-align: center;
	animation-name: flash;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}
.detail-btn .btn.btn-primary {
	font-size: 12px;
	padding: 10px 30px;
}
.pool-ball img {
	animation-name: rotateOut;
	animation-duration: 6.2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
.pool-ball img {
	animation-name: flipInY;
	animation-duration: 6.2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
/************************ global pool end **********************************/


/************************  pool Wallet st **********************************/

.profile-info {
	padding: 10px 15px;
	border: 2px solid #40bad2;
}
.profile-link .err_msg {
	position: absolute;
	right: -23px;
	top: 0px;
	width: 33px;
	height: 33px;
	text-align: center;
	border-radius: 50%;
	font-size: 14px;
	cursor: pointer;
	padding-top: 0px;
}
.profile-link #myInput {
	background: transparent;
	border: none;
	color: #fff;
	font-size: 13px;
	width: 100%;
}
.profile-avatar {
	border-radius: 50%;
	border: 2px solid #03b2e0;
	width: 60px;
	height: 57px;
	margin-right: 8px;
}
.profile-link  label {
	display: block ruby;
}
.profile-link {
	display: flex;
	margin-top: 11px;
	margin-right: 10px;
}

.redirect-icon a {
	color: #051824;
}
.redirect-icon {
	background: rgba(255,255,255,0.3);
	border-radius: 50%;
	width: 35px;
	height: 35px;
	text-align: center;
	padding: 2px 0px;
}
.company-detail {
	margin-bottom: 25px;
	justify-content: space-between;
}
.redirect-icon:hover {
	background: rgba(255,255,255,0.8);
}
.company-table {
	margin-top: 35px;
	padding: 20px 10px 20px 20px;
}
.view-btn .btn-primary {
	padding: 5px 8px;
	font-size: 11px;
}


.footer {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 1000;
	bottom: 0px !important;
	height: 80px;
	width: 430px;
	margin: 0 auto;
	background: rgb(157, 36, 8);
	background: #04314d;
	background-size: cover;
	border: 1px solid #00ebda;
}

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

h1 {
	font-size: 30px;
}


}
/************************  node st **********************************/

.node-status {
	background: #0e1f29;
	border-radius: 10px;
	padding: 8px 10px;

}
.node-status .nav-link {
	color:#fff;
}
.ls-0 {
	letter-spacing: 0px;
}
.node-top {
	clip-path: polygon(5% 0, 95% 0, 100% 10%, 100% 90%, 95% 100%, 5% 100%, 0 90%, 0 10%);
}
.nodes-bg  {
	clip-path: polygon(5% 0, 95% 0, 100% 10%, 100% 90%, 95% 100%, 5% 100%, 0 90%, 0 10%);
	border: none;
}
.underway-tab-inner {
	box-shadow: 0 0 10px #00cfff;
	padding: 12px 0px;
}
.underway-tab-inner li {
	display: flex;
	justify-content: space-between;
	position: relative;
	/* margin-bottom: 20px; */
	padding: 10px 19px;
}
.underway-tab-inner li h6 {
	color: #b6b6b6;
	font-weight: 400;
}
.underway-tab-inner li small {
	color: #fff;
	font-weight: 400;
}
.underway-tab-inner li:nth-child(2n) {
	background: #0c2533;
}

.underway-tab-inner li:not(:last-child) {
	border-bottom: 2px dotted rgba(255,255,255,0.7);
}
   body {
      background-color: #000;
      color: #fff;
      font-family: Arial, sans-serif;
      /* padding: 20px; */
    }

.progress-container {
	width: 100%;
	max-width: 400px;
	background: rgb(7, 18, 25);
	padding: 20px;
	border-radius: 10px;
}
   

    .bar-wrapper {
      position: relative;
      background: #333;
      height: 14px;
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 10px;
    }

.bar-fill {
	background: linear-gradient(0deg, rgb(7, 185, 227) 32%, rgb(0, 255, 233) 100%);
	height: 100%;
	width: 0%;
	border-radius: 10px;
	transition: width 0.3s ease;
}

.cursor {
	position: absolute;
	top: 50%;
	left: 0%;
	transform: translate(-50%, -50%);
	width: 20px;
	height: 20px;
	background: white;
	border: 2px solid #006077;
	border-radius: 50%;
	transition: left 0.3s ease;
	z-index: 1;
}

    .value-label {
      text-align: center;
      margin-bottom: 10px;
    }



.node-link #myInput {
	background: transparent;
	border: none;
	color: #fff;
	font-size: 13px;
}


.completed-tab-inner li:not(:last-child) {
	border-bottom: 1px dashed rgba(255,255,255,0.7);
}
.completed-tab-inner li {
	display: flex;
	justify-content: space-between;
	position: relative;
	/* margin-bottom: 20px; */
	padding: 10px 19px;
}

/************************ withdraw st **********************************/

.withdraw-sec {
	padding: 33px 16px;
}
.withdraw-box .form-control {
	color: #fff;
}
.withdraw-box .form-ico iconify-icon {
	color: #00ffe9;
}
/************************ animation **********************************/

@keyframes sineWave {
	0% {
		transform: translateY(0);
	}

	25% {
		transform: translateY(-5px);
	}

	50% {
		transform: translateY(0);
	}

	75% {
		transform: translateY(5px);
	}

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

.sine-animation {
	animation: sineWave 2s ease-in-out infinite;
}

.text-gradient-wave {
	background: linear-gradient(90deg, #065f87, #00ecff, #065f87);
	background-size: 200% 100%;
	background-position: 0% 50%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 1px #00ecff;
	animation: waveGradient 3s ease-in-out infinite;
}

@keyframes waveGradient {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

.masked {
	mask-image: linear-gradient(#000, #000);
	mask-size: 0% 70%;
	mask-position: 0 45%, 25% 25%, 50% 50%, 75% 0, 100% 50%;
	mask-repeat: no-repeat;
	animation: mask 6s linear infinite;
}

@keyframes mask {
	0% {
		mask-size: 0% 70%;
	}

	20% {
		mask-size: 20% 100%;
	}

	30% {
		mask-size: 30% 100%;
	}

	40% {
		mask-size: 40% 100%;
	}

	60% {
		mask-size: 60% 100%;
	}

	80% {
		mask-size: 80% 100%;
	}

	100% {
		mask-size: 100% 100%;
	}
}


.spinner {
	-webkit-transition-property: -webkit-transform;
	-webkit-transition-duration: 1.2s;
	-webkit-animation-name: rotate;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;

	-moz-transition-property: -moz-transform;
	-moz-animation-name: rotate;
	-moz-animation-duration: 1.2s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;

	transition-property: transform;
	animation-name: rotate;
	animation-duration: 1.2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@-webkit-keyframes rotate {
	from {
		-webkit-transform: rotate(0deg);
	}

	to {
		-webkit-transform: rotate(360deg);
	}
}

@-moz-keyframes rotate {
	from {
		-moz-transform: rotate(0deg);
	}

	to {
		-moz-transform: rotate(360deg);
	}
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

@keyframes play {
	from {
		background-position: 0px;
	}

	to {
		background-position: -1024px;
	}
}

@keyframes marquee {
	0% {
		background-position: 0;
	}

	100% {
		background-position: -1190px;
	}
}


.typewriter h1 {
	color: #fff;
	/* overflow: inherit; */
	white-space: break-spaces;
	margin: 0 auto;
	letter-spacing: 0px;
	animation: typing 3.5s, blink-caret .5s step-end alternate;
}

/* The typing effect */
@keyframes typing {
	from {
		width: 0
	}

	to {
		width: 100%
	}
}


@keyframes blink-caret {

	from,
	to {
		border-color: transparent
	}

}

@keyframes animate {
	0% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-30px);
	}

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


/********************************** Responsive **********************************/

.inner-title-small h5 {
	margin-bottom: 0px !important;
	margin-top: 5px;
}

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

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

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

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



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

	body {
		background: #fff;
		width: 100%;
		margin: 0 auto;
	}

}




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

	.coming-soon {
		left: 9px;
	}

}




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


	.mission-tit h1 {
		font-size: 27px;
	}

	.level-bg {
		padding: 9px 14px;
	}

	.level-main {
		padding: 4px 0;
	}

	.ico-lists li {
		display: inline-block;
		padding: 10px 15px;
	}

	.static-title h5 {
		font-size: 12px;
	}

	.mine-list ul li {
		padding: 10px 3px;

	}

	.mine-head h6 {
		font-size: 12px;
	}

	.mine-list ul li {
		padding: 10px 15px;
	}

	.footer {
		width: 100%;
	}


	.h4,
	h4 {
		font-size: 15px;
	}

	.connect-wallet-list {
		margin: 26px 0px;
	}

	.social-link-list li {
		margin: 0 18px;
	}

	.wallet-tab {
		justify-content: center;
	}

	.tab-view {
		margin: 20px 8px;

	}

	.h3,
	h3 {
		font-size: 20px;
	}

	.h5,
	h5 {
		font-size: 16px;
	}

	.coming-soon {
		left: 3px;
	}

	.footer-link-list .coming-soon iconify-icon {
		font-size: 36px;
	}

}

@media only screen and (max-width: 360px) {
	.pad {
		padding: 0px 12px;
	}



	.mission-tit h1 {
		font-size: 27px;
	}

	.level-bg {
		padding: 9px 14px;
	}

	.level-main {
		padding: 0;
	}

	.ico-name h6 {
		font-size: 15px;
	}

	.static-title h5 {
		font-size: 10px;
		/* font-weight: 500 !important; */
	}



	.mine-list-two ul li {
		padding: 10px 18px;
		text-align: center;
		display: inline-block;
	}

	.level-box::after {
		left: 73px;
	}


	.footer-link-list .coming-soon iconify-icon {
		font-size: 35px;
		position: relative;
		left: 4px;
		top: -12px;
	}

	.footer-link li {
		margin: 0px 10px;
	}

	.star-value h5 {
		font-size: 15px;

	}

	.footer-link-list {
		padding: 10px 0px !important;
	}

	.coming-soon {
		top: -30px;
		left: 0;
	}
}