@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap');

h1 {
  font-family: "IBM Plex Sans", "Montserrat", sans-serif;
  font-size: 3rem;
  font-weight: 100;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}

body {
	font-family: "IBM Plex Sans", "Montserrat", sans-serif;
/*	letter-spacing: 0.1rem;*/
	overflow-x:hidden;
	background: #f6f7fb;
	top: 0 !important;
	position: static !important;
    color: #101010 !important;
}

::selection {
    background-color: rgba(226, 227, 230, 0.7) !important;
}

::-webkit-selection {
    background-color: rgba(226, 227, 230, 0.7) !important;
}

::-moz-selection {
    background-color: rgba(226, 227, 230, 0.7) !important;
}  

.nav-tabs .nav-link.active {
    color: #3cd2a5 !important;
    border-color: #3cd2a5 !important;
    background-color: transparent;
}

.range .thumb:after {
    background: #3dd2a5;
}

.badge {
	font-size: 13px;
}

.page-item.active .page-link {
    background-color: #3dd2a5;
}

.range {
	height: 1.55rem;
}

.nav-pills:not(.menu-sidebar) .nav-link.active, .nav-pills:not(.menu-sidebar) .show>.nav-link {
    color: #7F00FF;
    background-color: #FFFFFF;
}

.table-responsive {
    border-radius: 8px !important;
}

.badge-vhs {
    border: none;
    border-radius: 8px;
    padding: 8px;
    color: #101010;
    background: rgba(51,51,51,0.1) !important;
}

input[type='range']::-webkit-slider-thumb {
	margin-top: -4px !important;
	cursor: ew-resize;
	-webkit-appearance: none;
	background: #7F00FF !important;
	height: 18px;
	width: 18px;
}

input[type='range']::-ms-thumb {
	cursor: ew-resize;
	-webkit-appearance: none;
	background: #fff !important;
	height: 9px;
  	border-radius: 100px;
}

input[type='range']::-moz-range-thumb {
	cursor: ew-resize;
	-webkit-appearance: none;
	background: #fff !important;
	height: 9px;
  	border-radius: 100px;
}

input[type=range]::-webkit-slider-runnable-track {
	cursor: ew-resize;
	-webkit-appearance: none;
  height: 9px;
  border-radius: 100px;
  background: #fff !important;
}
 
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #7F00FF;
}
 
input[type=range]::-moz-range-track {
  height: 9px;
  border-radius: 100px;
}
 
input[type=range]::-ms-track {
  height: 9px;
  border-radius: 100px;
}

.nowrap {
	white-space: nowrap;
}

.swal2-styled.swal2-confirm {
    background-color: #7F00FF !important;
}

.swal2-styled:focus {
    box-shadow: none !important;
}

.swal2-styled.swal2-default-outline:focus {
    box-shadow: none !important;
}

.swal2-container.swal2-backdrop-show, .swal2-container.swal2-noanimation {
	background: rgba(0, 0, 0, 0.2) !important;
}

.swal2-container:not(.swal2-top):not(.swal2-top-start):not(.swal2-top-end):not(.swal2-top-left):not(.swal2-top-right):not(.swal2-center-start):not(.swal2-center-end):not(.swal2-center-left):not(.swal2-center-right):not(.swal2-bottom):not(.swal2-bottom-start):not(.swal2-bottom-end):not(.swal2-bottom-left):not(.swal2-bottom-right):not(.swal2-grow-fullscreen) > .swal2-modal {
    border-radius: 8px !important;
}

.tradingview-widget-copyright {
	display: none !important;
}

.without-saving {
	border-radius: inherit;
}

.product-img{
	width: 46px;
	background: white;
	border-radius: 25px;
}

.form-select {
	background: transparent;
    border-color: #bdbdbd;
    color: white;
}

.btn-check:active+.btn-primary, .btn-check:checked+.btn-primary, .btn-primary.active, .btn-primary:active, .show>.btn-primary.dropdown-toggle {
    background-color: #7F00FF !important;
    color: #fff;
    box-shadow: none !important;
}

.btn-check:active+.btn-calculator, .btn-check:checked+.btn-calculator, .btn-calculator.active, .btn-calculator:active, .show>.btn-calculator.dropdown-toggle {
    background-color: #7F00FF !important;
    color: #fff;
}

.form-control:focus {
    border-color: #7F00FF !important;
    box-shadow: inset 0 0 0 1px #7F00FF;
}

.form-select:focus {
    outline: 0;
    box-shadow: none;
    border-color: white;
}

a:not(.sidenav-link):not(.btn):not(.dropdown-item):not(.nav-link):not(.navbar-brand):not(.page-link):not(.carousel-control-prev):not(.carousel-control-next) {
    color: #101010;
}

a:hover {
	color: #7F00FF !important;
}

.form-floating>.form-control:focus~label::after, .form-floating>.form-control:not(:placeholder-shown)~label::after, .form-floating>.form-control-plaintext~label::after, .form-floating>.form-select~label::after {
    background-color: #EDEFF1 !important;
}

.title {
	font-weight: 900;
	font-size: 5rem;
	margin-top: 4rem;
}

.text-primary {
	color: #7F00FF !important;
}

.nav-link:focus, .nav-link:hover {
    color: #7F00FF;
}

.btn-primary {
	background-color: #7F00FF;
    color: #fff;
    border-radius: 4px;
    padding: 12px 24px;
    box-shadow: none !important;
}

.btn-primary-header {
	background-color: #7F00FF;
    color: #fff;
    border-radius: 4px;
    padding: 8px 18px;
    text-transform: none !important;
    box-shadow: none !important;
}

.btn-hero-primary {
	background-color: #7F00FF;
    color: #fff;
    border-radius: 4px;
    padding: 16px 24px;
    font-size: 20px;
    font-weight: 600;
    text-transform: none !important;
}

.btn-hero-primary.focus, .btn-hero-primary:focus, .btn-hero-primary:hover{
	background-color: #6600cd;
    color: #fff;
}

.description-hero {
	font-weight: 400;
	font-size: 17px;
	line-height: 28px;
	color: #A7A7A7;
}

.btn-calculator {
	background: #191919;
}

.title-hero {
	font-weight: 800;
	font-size: 48px;
	line-height: 68px;
	/* text-shadow: 0 2px 16px rgba(174,207,242,.24); */
}

.statistic-numbers {
	/* text-shadow: 0 2px 16px rgba(174,207,242,.24); */
}

.bg-primary {
	background-color: #7F00FF !important;
	color: #fff !important;
}

.btn-primary.focus, .btn-primary:focus, .btn-primary:hover {
    background-color: #6600cd;
    color: #fff;
    box-shadow: none !important;
}

.btn-primary-header.focus, .btn-primary-header:focus, .btn-primary-header:hover {
    background-color: #6600cd;
    color: #fff;
    box-shadow: none !important;
}

.btn-outline-primary {
    color: #333;
    border-color: #333;
    text-transform: none !important;
}

.btn-outline-primary.focus .btn-outline-primary:focus, .btn-outline-primary:hover {
    background-color: #333;
    color: #fff;
	border-color: transparent !important;
}

.site-logo-text {
	font-size: 2rem;
    color: white !important;
    font-weight: 800;
}

.hero-logo-text {
	margin-left: 3px;
    padding-left: 3px;
    padding-right: 3px;
    color: #333;
    background: #7F00FF;
}

.btn-outline-theme {
    color: #333;
    border-color: #333;
    border-radius: 4px;
    padding: 12px 24px;
    text-transform: none !important;
}

.btn-outline-theme-header {
    color: #fff; /* Цвет текста */
    background-color: #101010; /* Фоновый цвет кнопки */
    border: none; /* Убираем стандартную границу */
    border-radius: 4px; /* Радиус границы */
    padding: 8px 18px; /* Внутренние отступы */
    position: relative; /* Устанавливаем позицию */
    overflow: hidden; /* Скрываем лишнее содержимое */
    text-transform: none !important;
}

.btn-outline-theme-header::before {
    content: ""; /* Псевдоэлемент перед */
    position: absolute; /* Абсолютное позиционирование */
    top: 0; /* Сверху */
    left: 0; /* Слева */
    right: 0; /* Справа */
    bottom: 0; /* Снизу */
    border-radius: 4px;
    pointer-events: none; /* Игнорируем события мыши */
    box-sizing: border-box; /* Учитываем границу в расчете размеров */
}

.btn-outline-theme-header:hover {
    color: #fff;
    background: #7F00FF;
}

.btn-hero-outline-theme {
    color: #fff;
    background: #101010;
    border-radius: 4px;
    padding: 16px 24px;
    font-size: 20px;
    font-weight: 600;
    box-shadow: none;
    text-transform: none !important;
}

.btn-outline-theme:hover {
    color: #fff;
    background: #101010;
}

.btn-hero-outline-theme:hover {
    color: #fff;
    background: #7F00FF;
}

.text-theme {
	color: #7F00FF;
}

.img-transform {
    transform: rotate(5deg);
}

@media screen and (max-width: 576px) {
	.title {
		margin-top: 1rem;
    	font-size: 3rem;
	}
	.btn-login {
		padding-left: calc(var(--mdb-gutter-x)*0.5) !important;
		padding-top: 1rem !important;
	}
	.input-login {
		padding-right: calc(var(--mdb-gutter-x)*0.5) !important;
	}
	#particles-js {
  		max-width: 366px !important;
	}
	#calculator {
		margin-top: 3.8rem;
	}
}

.input-group-text {
	line-height: 1.5 !important;
    background: #FFFFFF !important;
}

@media screen and (max-width: 768px) {
	.btn-login {
		padding-left: calc(var(--mdb-gutter-x)*0.5) !important;
		padding-top: 1rem !important;
	}
	.input-login {
		padding-right: calc(var(--mdb-gutter-x)*0.5) !important;
	}
}

@media screen and (max-width: 992px) {
	.btn-login {
		padding-left: calc(var(--mdb-gutter-x)*0.5) !important;
		padding-top: 1rem !important;
	}
	.input-login {
		padding-right: calc(var(--mdb-gutter-x)*0.5) !important;
	}
}

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

}

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

}

.text-right {
	text-align: right;
}

.float-right {
	float: right !important;
}

.icon-menu {
	line-height: 1.2;
	font-size: 1.75rem;
}

.site-navbar {
	margin-bottom: 0px;
	z-index: 997;
	position: absolute;
	top: 0;
	width: 100%;
}

.site-navbar .site-logo {
	position: relative;
	left: 0;
	font-size: 24px;
}

.site-navbar .site-navigation .site-menu {
	margin-bottom: 0;
}

.site-navbar .site-navigation .site-menu .active {
	color: #007bff;
	display: inline-block;
	padding: 20px 20px;
}

.site-navbar .site-navigation .site-menu a {
	text-decoration: none !important;
	display: inline-block;
}

.site-navbar .site-navigation .site-menu>li {
	display: inline-block;
}

.site-navbar .site-navigation .site-menu>li>a {
	padding: 10px 10px;
	font-size: 16px;
	display: inline-block;
	text-decoration: none !important;
	font-weight: 600;
	line-height: 20px;
}

.site-navbar .site-navigation .site-menu>li>a:hover {
	color: #007bff;
}

.site-navbar .site-navigation .site-menu>li.social>a {
	padding-left: 5px;
	padding-right: 5px;
}

.site-navbar .site-navigation .site-menu .has-children {
	position: relative;
}

.site-navbar .site-navigation .site-menu .has-children>a {
	position: relative;
	padding-right: 20px;
}

.site-navbar .site-navigation .site-menu .has-children>a:before {
	position: absolute;
	content: "\e313";
	font-size: 16px;
	top: 50%;
	right: 0;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	font-family: 'icomoon';
}

.site-navbar .site-navigation .site-menu .has-children .dropdown {
	visibility: hidden;
	opacity: 0;
	top: 100%;
	position: absolute;
	text-align: left;
	border-top: 2px solid #3dd2a5;
	-webkit-box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.1);
	box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.1);
	padding: 0px 0;
	margin-top: 20px;
	margin-left: 0px;
	background: #151515;
	-webkit-transition: 0.2s 0s;
	-o-transition: 0.2s 0s;
	transition: 0.2s 0s;
}

.site-navbar .site-navigation .site-menu .has-children .dropdown.arrow-top {
	position: absolute;
}

.site-navbar .site-navigation .site-menu .has-children .dropdown.arrow-top:before {
	bottom: 100%;
	left: 20%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.site-navbar .site-navigation .site-menu .has-children .dropdown.arrow-top:before {
	border-color: rgba(136, 183, 213, 0);
	border-bottom-color: #333;
	border-width: 10px;
	margin-left: -10px;
}

.site-navbar .site-navigation .site-menu .has-children .dropdown a {
	text-transform: none;
	letter-spacing: normal;
	-webkit-transition: 0s all;
	-o-transition: 0s all;
	transition: 0s all;
	color: #101010;
}

.site-navbar .site-navigation .site-menu .has-children .dropdown .active {
	color: #007bff !important;
}

.site-navbar .site-navigation .site-menu .has-children .dropdown>li {
	list-style: none;
	padding: 0;
	margin: 0;
	min-width: 210px;
}

.site-navbar .site-navigation .site-menu .has-children .dropdown>li>a {
	padding: 9px 20px;
	display: block;
}

.site-navbar .site-navigation .site-menu .has-children .dropdown>li>a:hover {
	background: #eff1f3;
	color: #101010;
}

.site-navbar .site-navigation .site-menu .has-children .dropdown>li.has-children>a:before {
	content: "\e315";
	right: 20px;
}

.site-navbar .site-navigation .site-menu .has-children .dropdown>li.has-children>.dropdown,
.site-navbar .site-navigation .site-menu .has-children .dropdown>li.has-children>ul {
	left: 100%;
	top: 0;
}

.site-navbar .site-navigation .site-menu .has-children:hover>a,
.site-navbar .site-navigation .site-menu .has-children:focus>a,
.site-navbar .site-navigation .site-menu .has-children:active>a {
	color: #007bff;
}

.site-navbar .site-navigation .site-menu .has-children:hover,
.site-navbar .site-navigation .site-menu .has-children:focus,
.site-navbar .site-navigation .site-menu .has-children:active {
	cursor: pointer;
}

.site-navbar .site-navigation .site-menu .has-children:hover>.dropdown,
.site-navbar .site-navigation .site-menu .has-children:focus>.dropdown,
.site-navbar .site-navigation .site-menu .has-children:active>.dropdown {
	-webkit-transition-delay: 0s;
	-o-transition-delay: 0s;
	transition-delay: 0s;
	margin-top: 0px;
	visibility: visible;
	opacity: 1;
}

.site-mobile-menu {
	width: 300px;
	position: fixed;
	right: 0;
	z-index: 998;
	background: #F6F7FB;
	height: calc(100vh);
	-webkit-transform: translateX(110%);
	-ms-transform: translateX(110%);
	transform: translateX(110%);
	-webkit-box-shadow: -10px 0 20px -10px rgba(0, 0, 0, 0.1);
	box-shadow: -10px 0 20px -10px rgba(0, 0, 0, 0.1);
	-webkit-transition: .3s all ease-in-out;
	-o-transition: .3s all ease-in-out;
	transition: .3s all ease-in-out;
}

.offcanvas-menu .site-mobile-menu {
	-webkit-transform: translateX(0%);
	-ms-transform: translateX(0%);
	transform: translateX(0%);
}

.site-mobile-menu .site-mobile-menu-header {
	width: 100%;
	float: left;
	padding-left: 20px;
	padding-right: 20px;
}

.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-close {
	float: right;
	margin-top: 8px;
}

.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-close span {
	color: #101010;
	font-size: 30px;
	display: inline-block;
	padding-left: 10px;
	padding-right: 0px;
	line-height: 1;
	cursor: pointer;
	-webkit-transition: .3s all ease;
	-o-transition: .3s all ease;
	transition: .3s all ease;
}

.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-logo {
	float: left;
	margin-top: 10px;
	margin-left: 0px;
}

.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-logo a {
	display: inline-block;
	text-transform: none;
}

.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-logo a img {
	max-width: 70px;
}

.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-logo a:hover {
	text-decoration: none;
}

.site-mobile-menu .site-mobile-menu-body {
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	position: relative;
	padding: 0 20px 20px 20px;
	height: calc(100vh - 52px);
	padding-bottom: 150px;
}

.site-mobile-menu .site-nav-wrap {
	padding: 0;
	margin: 0;
	list-style: none;
	position: relative;
}

.site-mobile-menu .site-nav-wrap a {
	padding: 10px 20px;
	display: block;
	position: relative;
	color: #333;
}

.site-mobile-menu .site-nav-wrap a:hover {
	color: #3cd2a5;
}

.site-mobile-menu .site-nav-wrap li {
	position: relative;
	display: block;
}

.site-mobile-menu .site-nav-wrap li .active {
	color: #3cd2a5;
}

.site-mobile-menu .site-nav-wrap .social {
	display: inline-block;
}

.site-mobile-menu .site-nav-wrap .arrow-collapse {
	position: absolute;
	right: 0px;
	top: 10px;
	z-index: 20;
	width: 36px;
	height: 36px;
	text-align: center;
	cursor: pointer;
	border-radius: 50%;
}

.site-mobile-menu .site-nav-wrap .arrow-collapse:hover {
	background: #242424;
}

.site-mobile-menu .site-nav-wrap .arrow-collapse:before {
	font-size: 12px;
	z-index: 20;
	font-family: "icomoon";
	content: "\f078";
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%) rotate(-180deg);
	-ms-transform: translate(-50%, -50%) rotate(-180deg);
	transform: translate(-50%, -50%) rotate(-180deg);
	-webkit-transition: .3s all ease;
	-o-transition: .3s all ease;
	transition: .3s all ease;
}

.site-mobile-menu .site-nav-wrap .arrow-collapse.collapsed:before {
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.site-mobile-menu .site-nav-wrap>li {
	display: block;
	position: relative;
	float: left;
	width: 100%;
}

.site-mobile-menu .site-nav-wrap>li.social {
	float: none !important;
	width: auto !important;
}

.site-mobile-menu .site-nav-wrap>li>a {
	padding-left: 20px;
	font-size: 20px;
}

.site-mobile-menu .site-nav-wrap>li>ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

.site-mobile-menu .site-nav-wrap>li>ul>li {
	display: block;
}

.site-mobile-menu .site-nav-wrap>li>ul>li>a {
	padding-left: 40px;
	font-size: 16px;
}

.site-mobile-menu .site-nav-wrap>li>ul>li>ul {
	padding: 0;
	margin: 0;
}

.site-mobile-menu .site-nav-wrap>li>ul>li>ul>li {
	display: block;
}

.site-mobile-menu .site-nav-wrap>li>ul>li>ul>li>a {
	font-size: 16px;
	padding-left: 20px;
}

.site-mobile-menu .site-nav-wrap[data-class="social"] {
	float: left;
	width: 100%;
	margin-top: 30px;
	padding-bottom: 5em;
}

.site-mobile-menu .site-nav-wrap[data-class="social"]>li {
	width: auto;
}

.site-mobile-menu .site-nav-wrap[data-class="social"]>li:first-child a {
	padding-left: 15px !important;
}

.sticky-wrapper {
	position: absolute;
	z-index: 100;
	width: 100%;
}

.sticky-wrapper .site-navbar {
	-webkit-transition: .3s all ease;
	-o-transition: .3s all ease;
	transition: .3s all ease;
}

.sticky-wrapper .site-navbar {
	border-bottom: none;
}

.sticky-wrapper .site-navbar .site-menu-toggle {
	color: #333 !important;
}

.sticky-wrapper .site-navbar .site-logo a {
	color: #333;
}

.sticky-wrapper .site-navbar .site-menu>li>a {
	color: #333 !important;
}

.sticky-wrapper .site-navbar .site-menu>li>a:hover,
.sticky-wrapper .site-navbar .site-menu>li>a.active {
	color: #7F00FF !important;
}

.sticky-wrapper.is-sticky .site-navbar {
	background: #EDEFF1;
	box-shadow: 4px 0 20px -5px rgb(0 0 0 / 15%);
}

.sticky-wrapper.is-sticky .site-navbar .site-menu-toggle {
	color: #333;
}

.sticky-wrapper.is-sticky .site-navbar .site-logo a {
	color: #007bff;
}

.sticky-wrapper.is-sticky .site-navbar .site-menu>li>a {
	color: #333 !important;
}

.sticky-wrapper.is-sticky .site-navbar .site-menu>li>a:hover,
.sticky-wrapper.is-sticky .site-navbar .site-menu>li>a.active {
	color: #7F00FF !important;
}

canvas {
  display: block;
  vertical-align: bottom;
}

.preloader {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    place-items: center;
    background-color: #f6f7fb;
    z-index: 999;
    opacity: 1;
    transition: opacity 1s ease;
}

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}

@media (max-width: 768px) {
	.mt-md-5-custom {
		margin-top: 3rem;
	}
	.text-hero {
		font-size: 43px;
	}
}

.icon-price {
	background: #222228;
    padding: 9px;
    border-radius: 10px;
}

.slick-slide {
    margin: 0px 20px;
}

.slick-slide img {
    width: 100%;
}

.slick-slider
{
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;
    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

.VIpgJd-ZVi9od-aZ2wEe-wOHMyf-ti6hGc {
	display: none !important;
}

.VIpgJd-ZVi9od-aZ2wEe-wOHMyf {
	display: none !important;
}

.VIpgJd-ZVi9od-aZ2wEe-OiiCO-ti6hGc {
	display: none !important;
}

.VIpgJd-ZVi9od-aZ2wEe-OiiCO {
	display: none !important;
}

.small-btn-hero {
	transition: transform 0.3s ease;
}

.small-btn-hero:hover {
	transform: scale(1.1);
}

.card-hover {
	transition: transform 0.3s ease;
    background: #fff !important;
}

.card-hover:hover {
	transform: scale(1.03);
}

@keyframes move {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(1);
	}
}

.animation {
	position: relative;
	animation: move 5s infinite;
}

/* .background-image-2 {
	background-image: url('/assets/images/background-3.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
} */

#preloader {
    z-index: 9999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f6f7fb;
    display: flex;
    justify-content: center;
    align-items: center;
}

#loader {
    width: 50px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 8px solid;
    border-color: #7F00FF #f6f7fb;
    animation: l1 1s infinite;
    border-radius: 50%;
    background: rgba(51, 51, 51, 0.1);
}

@keyframes l1 {to{transform: rotate(.5turn)}}

.logo-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.dark-mode .steps {
    --si-steps-number-bg: #191919;
    --si-steps-number-inner-bg: #363636;
}

.steps {
    --si-steps-padding-y: 1.5rem;
    --si-steps-padding-x: 1.5rem;
    --si-steps-number-size: 7.625rem;
    --si-steps-number-inner-size: 5.625rem;
    --si-steps-number-size-sm: 5rem;
    --si-steps-number-inner-size-sm: 3.5rem;
    --si-steps-number-border-radius: 50%;
    --si-steps-number-bg: #F0F0F0;
    --si-steps-number-inner-bg: #FFFFFF;
    --si-steps-number-inner-box-shadow: 0 0.275rem 0.75rem -0.0625rem rgba(11, 15, 25, 0.06), 0 0.125rem 0.4rem -0.0625rem rgba(11, 15, 25, 0.03);
    --si-steps-number-font-size: 2rem;
    --si-steps-number-font-size-sm: 1.5rem;
    --si-steps-number-color: var(--si-heading-color);
    --si-steps-connect-width: var(--si-border-width);
    --si-steps-connect-color: var(--si-border-color);
    display: flex;
    flex-direction: column
}

.step {
    position: relative;
    display: flex;
    align-items: center;
    padding: var(--si-steps-padding-y) 0
}

.step:first-child {
    padding-top: 0 !important
}

.step:last-child {
    padding-bottom: 0 !important
}

.step::before,.step::after {
    position: absolute;
    left: calc(var(--si-steps-number-size)*.5);
    width: var(--si-steps-connect-width);
    height: 50%;
    content: ""
}

.step::before {
    top: 0
}

.step::after {
    top: 50%
}

.step:not(:first-child)::before {
    background-color: var(--si-steps-connect-color)
}

.step:not(:last-child)::after {
    background-color: var(--si-steps-connect-color)
}

.step-number {
    position: relative;
    width: var(--si-steps-number-size);
    height: var(--si-steps-number-size);
    flex-shrink: 0;
    padding-top: calc((var(--si-steps-number-size) - var(--si-steps-number-inner-size))*.5);
    padding-left: calc((var(--si-steps-number-size) - var(--si-steps-number-inner-size))*.5);
    border-radius: var(--si-steps-number-border-radius);
    background-color: var(--si-steps-number-bg);
    color: var(--si-steps-number-color);
    font-size: var(--si-steps-number-font-size);
    font-weight: 800;
    z-index: 2
}

.step-number .step-number-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--si-steps-number-inner-size);
    height: var(--si-steps-number-inner-size);
    border-radius: var(--si-steps-number-border-radius);
    background-color: var(--si-steps-number-inner-bg);
    box-shadow: var(--si-steps-number-inner-box-shadow);
    color: #7F00FF;
}

.step-body {
    padding-left: var(--si-steps-padding-x)
}

.step-body h3 {
    font-weight: 600 !important;
}

.steps-sm .step::before,.steps-sm .step::after {
    left: calc(var(--si-steps-number-size-sm)*.5)
}

.steps-sm .step-number {
    width: var(--si-steps-number-size-sm);
    height: var(--si-steps-number-size-sm);
    padding-top: .75rem;
    padding-left: .75rem;
    font-size: var(--si-steps-number-font-size-sm)
}

.steps-sm .step-number .step-number-inner {
    width: var(--si-steps-number-inner-size-sm);
    height: var(--si-steps-number-inner-size-sm)
}

@media(min-width: 500px) {
    .steps-horizontal-sm.steps {
        flex-direction:row;
        margin-right: calc(var(--si-steps-padding-x)*-1);
        margin-left: calc(var(--si-steps-padding-x)*-1)
    }

    .steps-horizontal-sm .step {
        display: block;
        flex-basis: 0;
        flex-grow: 1;
        padding: 0 var(--si-steps-padding-x)
    }

    .steps-horizontal-sm .step::before,.steps-horizontal-sm .step::after {
        top: calc(var(--si-steps-number-size)*.5);
        height: var(--si-steps-connect-width)
    }

    .steps-horizontal-sm .step::before {
        display: none;
        left: 0
    }

    .steps-horizontal-sm .step::after {
        left: var(--si-steps-padding-x);
        width: 100%
    }

    .steps-horizontal-sm.steps-sm .step::before,.steps-horizontal-sm.steps-sm .step::after {
        top: calc(var(--si-steps-number-size-sm)*.5)
    }

    .steps-horizontal-sm .step-number {
        margin-bottom: var(--si-steps-padding-y)
    }

    .steps-horizontal-sm .step-body {
        padding-left: 0
    }

    .steps-horizontal-sm.steps-center {
        text-align: center
    }

    .steps-horizontal-sm.steps-center .step::after {
        left: 50%;
        width: 50%
    }

    .steps-horizontal-sm.steps-center .step:not(:first-child)::before {
        display: block;
        width: 50%
    }

    .steps-horizontal-sm.steps-center .step-number {
        margin-right: auto;
        margin-left: auto
    }

    .steps-horizontal-sm.steps-end {
        text-align: right
    }

    .steps-horizontal-sm.steps-end .step:not(:first-child)::before {
        display: block;
        width: calc(100% - var(--si-steps-padding-x))
    }

    .steps-horizontal-sm.steps-end .step::after {
        right: 0;
        left: auto;
        width: var(--si-steps-padding-x)
    }

    .steps-horizontal-sm.steps-end .step:last-child::after {
        display: none
    }

    .steps-horizontal-sm.steps-end .step-number {
        margin-left: auto
    }
}

@media(min-width: 768px) {
    .steps-horizontal-md.steps {
        flex-direction:row;
        margin-right: calc(var(--si-steps-padding-x)*-1);
        margin-left: calc(var(--si-steps-padding-x)*-1)
    }

    .steps-horizontal-md .step {
        display: block;
        flex-basis: 0;
        flex-grow: 1;
        padding: 0 var(--si-steps-padding-x)
    }

    .steps-horizontal-md .step::before,.steps-horizontal-md .step::after {
        top: calc(var(--si-steps-number-size)*.5);
        height: var(--si-steps-connect-width)
    }

    .steps-horizontal-md .step::before {
        display: none;
        left: 0
    }

    .steps-horizontal-md .step::after {
        left: var(--si-steps-padding-x);
        width: 100%
    }

    .steps-horizontal-md.steps-sm .step::before,.steps-horizontal-md.steps-sm .step::after {
        top: calc(var(--si-steps-number-size-sm)*.5)
    }

    .steps-horizontal-md .step-number {
        margin-bottom: var(--si-steps-padding-y)
    }

    .steps-horizontal-md .step-body {
        padding-left: 0
    }

    .steps-horizontal-md.steps-center {
        text-align: center
    }

    .steps-horizontal-md.steps-center .step::after {
        left: 50%;
        width: 50%
    }

    .steps-horizontal-md.steps-center .step:not(:first-child)::before {
        display: block;
        width: 50%
    }

    .steps-horizontal-md.steps-center .step-number {
        margin-right: auto;
        margin-left: auto
    }

    .steps-horizontal-md.steps-end {
        text-align: right
    }

    .steps-horizontal-md.steps-end .step:not(:first-child)::before {
        display: block;
        width: calc(100% - var(--si-steps-padding-x))
    }

    .steps-horizontal-md.steps-end .step::after {
        right: 0;
        left: auto;
        width: var(--si-steps-padding-x)
    }

    .steps-horizontal-md.steps-end .step:last-child::after {
        display: none
    }

    .steps-horizontal-md.steps-end .step-number {
        margin-left: auto
    }
}

@media(min-width: 992px) {
    .steps-horizontal-lg.steps {
        flex-direction:row;
        margin-right: calc(var(--si-steps-padding-x)*-1);
        margin-left: calc(var(--si-steps-padding-x)*-1)
    }

    .steps-horizontal-lg .step {
        display: block;
        flex-basis: 0;
        flex-grow: 1;
        padding: 0 var(--si-steps-padding-x)
    }

    .steps-horizontal-lg .step::before,.steps-horizontal-lg .step::after {
        top: calc(var(--si-steps-number-size)*.5);
        height: var(--si-steps-connect-width)
    }

    .steps-horizontal-lg .step::before {
        display: none;
        left: 0
    }

    .steps-horizontal-lg .step::after {
        left: var(--si-steps-padding-x);
        width: 100%
    }

    .steps-horizontal-lg.steps-sm .step::before,.steps-horizontal-lg.steps-sm .step::after {
        top: calc(var(--si-steps-number-size-sm)*.5)
    }

    .steps-horizontal-lg .step-number {
        margin-bottom: var(--si-steps-padding-y)
    }

    .steps-horizontal-lg .step-body {
        padding-left: 0
    }

    .steps-horizontal-lg.steps-center {
        text-align: center
    }

    .steps-horizontal-lg.steps-center .step::after {
        left: 50%;
        width: 50%
    }

    .steps-horizontal-lg.steps-center .step:not(:first-child)::before {
        display: block;
        width: 50%
    }

    .steps-horizontal-lg.steps-center .step-number {
        margin-right: auto;
        margin-left: auto
    }

    .steps-horizontal-lg.steps-end {
        text-align: right
    }

    .steps-horizontal-lg.steps-end .step:not(:first-child)::before {
        display: block;
        width: calc(100% - var(--si-steps-padding-x))
    }

    .steps-horizontal-lg.steps-end .step::after {
        right: 0;
        left: auto;
        width: var(--si-steps-padding-x)
    }

    .steps-horizontal-lg.steps-end .step:last-child::after {
        display: none
    }

    .steps-horizontal-lg.steps-end .step-number {
        margin-left: auto
    }
}

@media(min-width: 1200px) {
    .steps-horizontal-xl.steps {
        flex-direction:row;
        margin-right: calc(var(--si-steps-padding-x)*-1);
        margin-left: calc(var(--si-steps-padding-x)*-1)
    }

    .steps-horizontal-xl .step {
        display: block;
        flex-basis: 0;
        flex-grow: 1;
        padding: 0 var(--si-steps-padding-x)
    }

    .steps-horizontal-xl .step::before,.steps-horizontal-xl .step::after {
        top: calc(var(--si-steps-number-size)*.5);
        height: var(--si-steps-connect-width)
    }

    .steps-horizontal-xl .step::before {
        display: none;
        left: 0
    }

    .steps-horizontal-xl .step::after {
        left: var(--si-steps-padding-x);
        width: 100%
    }

    .steps-horizontal-xl.steps-sm .step::before,.steps-horizontal-xl.steps-sm .step::after {
        top: calc(var(--si-steps-number-size-sm)*.5)
    }

    .steps-horizontal-xl .step-number {
        margin-bottom: var(--si-steps-padding-y)
    }

    .steps-horizontal-xl .step-body {
        padding-left: 0
    }

    .steps-horizontal-xl.steps-center {
        text-align: center
    }

    .steps-horizontal-xl.steps-center .step::after {
        left: 50%;
        width: 50%
    }

    .steps-horizontal-xl.steps-center .step:not(:first-child)::before {
        display: block;
        width: 50%
    }

    .steps-horizontal-xl.steps-center .step-number {
        margin-right: auto;
        margin-left: auto
    }

    .steps-horizontal-xl.steps-end {
        text-align: right
    }

    .steps-horizontal-xl.steps-end .step:not(:first-child)::before {
        display: block;
        width: calc(100% - var(--si-steps-padding-x))
    }

    .steps-horizontal-xl.steps-end .step::after {
        right: 0;
        left: auto;
        width: var(--si-steps-padding-x)
    }

    .steps-horizontal-xl.steps-end .step:last-child::after {
        display: none
    }

    .steps-horizontal-xl.steps-end .step-number {
        margin-left: auto
    }
}

@media(min-width: 1400px) {
    .steps-horizontal-xxl.steps {
        flex-direction:row;
        margin-right: calc(var(--si-steps-padding-x)*-1);
        margin-left: calc(var(--si-steps-padding-x)*-1)
    }

    .steps-horizontal-xxl .step {
        display: block;
        flex-basis: 0;
        flex-grow: 1;
        padding: 0 var(--si-steps-padding-x)
    }

    .steps-horizontal-xxl .step::before,.steps-horizontal-xxl .step::after {
        top: calc(var(--si-steps-number-size)*.5);
        height: var(--si-steps-connect-width)
    }

    .steps-horizontal-xxl .step::before {
        display: none;
        left: 0
    }

    .steps-horizontal-xxl .step::after {
        left: var(--si-steps-padding-x);
        width: 100%
    }

    .steps-horizontal-xxl.steps-sm .step::before,.steps-horizontal-xxl.steps-sm .step::after {
        top: calc(var(--si-steps-number-size-sm)*.5)
    }

    .steps-horizontal-xxl .step-number {
        margin-bottom: var(--si-steps-padding-y)
    }

    .steps-horizontal-xxl .step-body {
        padding-left: 0
    }

    .steps-horizontal-xxl.steps-center {
        text-align: center
    }

    .steps-horizontal-xxl.steps-center .step::after {
        left: 50%;
        width: 50%
    }

    .steps-horizontal-xxl.steps-center .step:not(:first-child)::before {
        display: block;
        width: 50%
    }

    .steps-horizontal-xxl.steps-center .step-number {
        margin-right: auto;
        margin-left: auto
    }

    .steps-horizontal-xxl.steps-end {
        text-align: right
    }

    .steps-horizontal-xxl.steps-end .step:not(:first-child)::before {
        display: block;
        width: calc(100% - var(--si-steps-padding-x))
    }

    .steps-horizontal-xxl.steps-end .step::after {
        right: 0;
        left: auto;
        width: var(--si-steps-padding-x)
    }

    .steps-horizontal-xxl.steps-end .step:last-child::after {
        display: none
    }

    .steps-horizontal-xxl.steps-end .step-number {
        margin-left: auto
    }
}

.steps-horizontal.steps {
    flex-direction: row;
    margin-right: calc(var(--si-steps-padding-x)*-1);
    margin-left: calc(var(--si-steps-padding-x)*-1)
}

.steps-horizontal .step {
    display: block;
    flex-basis: 0;
    flex-grow: 1;
    padding: 0 var(--si-steps-padding-x)
}

.steps-horizontal .step::before,.steps-horizontal .step::after {
    top: calc(var(--si-steps-number-size)*.5);
    height: var(--si-steps-connect-width)
}

.steps-horizontal .step::before {
    display: none;
    left: 0
}

.steps-horizontal .step::after {
    left: var(--si-steps-padding-x);
    width: 100%
}

.steps-horizontal.steps-sm .step::before,.steps-horizontal.steps-sm .step::after {
    top: calc(var(--si-steps-number-size-sm)*.5)
}

.steps-horizontal .step-number {
    margin-bottom: var(--si-steps-padding-y)
}

.steps-horizontal .step-body {
    padding-left: 0
}

.steps-horizontal.steps-center {
    text-align: center
}

.steps-horizontal.steps-center .step::after {
    left: 50%;
    width: 50%
}

.steps-horizontal.steps-center .step:not(:first-child)::before {
    display: block;
    width: 50%
}

.steps-horizontal.steps-center .step-number {
    margin-right: auto;
    margin-left: auto
}

.steps-horizontal.steps-end {
    text-align: right
}

.steps-horizontal.steps-end .step:not(:first-child)::before {
    display: block;
    width: calc(100% - var(--si-steps-padding-x))
}

.steps-horizontal.steps-end .step::after {
    right: 0;
    left: auto;
    width: var(--si-steps-padding-x)
}

.steps-horizontal.steps-end .step:last-child::after {
    display: none
}

.steps-horizontal.steps-end .step-number {
    margin-left: auto
}

@media(max-width: 499.98px) {
    .steps-sm .step,.step {
        padding:calc(var(--si-steps-padding-y)*.625) 0
    }

    .steps-sm .step::before,.steps-sm .step::after,.step::before,.step::after {
        left: calc(var(--si-steps-number-size)*.625*.5)
    }

    .steps-sm .step-number,.step-number {
        width: calc(var(--si-steps-number-size)*.625);
        height: calc(var(--si-steps-number-size)*.625);
        padding-top: calc((var(--si-steps-number-size)*.625 - var(--si-steps-number-inner-size)*.625)*.5);
        padding-left: calc((var(--si-steps-number-size)*.625 - var(--si-steps-number-inner-size)*.625)*.5);
        font-size: calc(var(--si-steps-number-font-size)*.625)
    }

    .steps-sm .step-number .step-number-inner,.step-number .step-number-inner {
        width: calc(var(--si-steps-number-inner-size)*.625);
        height: calc(var(--si-steps-number-inner-size)*.625)
    }

    .step-body {
        padding-left: calc(var(--si-steps-padding-x)*.875)
    }
}

.pulse {
	animation: pulseAnimation 2s ease 0s infinite normal forwards;
}

@keyframes pulseAnimation {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.1);
	}

	100% {
		transform: scale(1);
	}
}

.range-container {
	position: relative;
	align-items: center;
}

.custom-range-alt {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 48px;
	background: linear-gradient(to right, #EDEFF1 0%, #EDEFF1 var(--range-percent), #E2E3E6 var(--range-percent), #E2E3E6 100%);
	border-radius: 8px;
	outline: none;
	padding: 0 50px;
    border: 1px solid #E0E0E0 !important;
}

.custom-range-alt::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 24px;
	height: 24px;
	background: #E2E3E6;
	border-radius: 50%;
	cursor: pointer;
	margin-top: 12px;
	position: relative;
	z-index: 2;
}

.custom-range-alt::-webkit-slider-runnable-track {
	height: 48px;
	background: transparent;
}

.custom-range-alt::-moz-range-track {
	height: 48px;
	background: transparent;
}

.custom-range-alt::-moz-range-thumb {
	width: 24px;
	height: 24px;
	background: #E2E3E6;
	border-radius: 50%;
	cursor: pointer;
}

.range-btn {
	position: absolute;
	width: 40px;
	height: 40px;
	background-color: transparent;
	color: #7F00FF;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
}

.minus-btn {
	left: 5px;
	z-index: 3;
}

.plus-btn {
	right: 5px;
	z-index: 3;
}

.coin-marquee {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.coin-marquee::before,
.coin-marquee::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50px;
    z-index: 1;
    pointer-events: none;
}

.coin-marquee::before {
    left: 0;
    background: linear-gradient(to right, rgba(11, 15, 25, 1), rgba(11, 15, 25, 0));
}

.coin-marquee::after {
    right: 0;
    background: linear-gradient(to left, rgba(11, 15, 25, 1), rgba(11, 15, 25, 0));
}

.coin-marquee-content {
    display: flex;
    width: calc(64px * 8 + 40px * 8);
    animation: marquee 7.5s linear infinite;
}

.coin-marquee-content img {
    margin-right: 40px;
}

@keyframes marquee {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(-50%);
    }
}

.email-verification-banner {
    border-radius: 8px;
    display: flex;
    width: 393px;
    padding: 12px 20px;
    justify-content: space-between;
    align-items: flex-start;
    background: #7F00FF;
    cursor: pointer;
    color: #fff;
}

.email-verification-banner:active {
    display: flex;
    padding: 12px 20px;
    justify-content: space-between;
    align-items: flex-start;
    background: #6600cd;
}

.email-verification-banner:hover {
    display: flex;
    padding: 12px 20px;
    justify-content: space-between;
    align-items: flex-start;
    background: #6600cd;
}

.deposit-banner {
    border-radius: 8px;
    display: flex;
    width: 393px;
    padding: 12px 20px;
    justify-content: center;
    align-items: center;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    cursor: pointer;
    font-weight: 800;
    transition: background 0.3s ease; ;
}

.deposit-banner:active {
    background: #EDEFF1;
}

.deposit-banner:hover {
    background: #EDEFF1;
}

.bg-success {
    background: #fff !important;
}

.accordion-button:not(.collapsed) {
    color: #7F00FF !important;
}

.btn-custom {
    background-color: transparent;
    border: 1px solid #e84142;
    color: #e84142;
    border-radius: 25px;
}
.btn-custom:hover {
    background-color: #e84142;
    color: #fff;
}
.rounded-input {
    background-color: #1e1e1e;
    border: 1px solid #444;
    color: #fff;
    border-radius: 25px;
    padding: 10px 15px;
}
.icon {
    font-size: 1.5rem;
}
.highlight {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.divider {
    height: 2px;
    background-color: #f5f5f5;
    margin: 20px 0;
}

.form-label {
    text-align: start !important;
}

button {
    border-radius: 8px !important;
}

input {
    border-radius: 8px !important;
}

/* Mobile Bottom Navigation Styles */
.mobile-bottom-nav {
    position: fixed;
    bottom: 16px;
    left: 40%;
    background: #ffffff;
    border-radius: 24px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 12px 8px;
    z-index: 1000;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(0, 0, 0, 0.05);
    max-width: 600px;
}

.mobile-bottom-nav .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #666;
    transition: all 0.3s ease;
    padding: 12px 8px;
    border-radius: 16px;
    min-width: 50px;
    position: relative;
}

.mobile-bottom-nav .nav-item:hover {
    color: #7F00FF;
    text-decoration: none;
    transform: translateY(-2px);
}

.mobile-bottom-nav .nav-item.active {
    color: #7F00FF;
    background-color: rgba(127, 0, 255, 0.1);
    transform: translateY(-2px);
}

.mobile-bottom-nav .nav-item i {
    font-size: 20px;
    margin-bottom: 4px;
}

.mobile-bottom-nav .nav-item span {
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
}

/* Add bottom padding to body when mobile nav is visible */
body.has-mobile-nav {
    padding-bottom: 100px;
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .mobile-bottom-nav {
        bottom: 12px;
        left: 12px;
        right: 12px;
        padding: 10px 6px;
    }
    
    .mobile-bottom-nav .nav-item {
        padding: 10px 6px;
        min-width: 45px;
    }
    
    .mobile-bottom-nav .nav-item span {
        font-size: 10px;
    }
    
    .mobile-bottom-nav .nav-item i {
        font-size: 18px;
    }
    
    body.has-mobile-nav {
        padding-bottom: 90px;
    }
}

/* Hero Section Styles */
.hero-section {
    padding: 120px 0 60px;
    position: relative;
    overflow: hidden;
    width: 100%;
}

.hero-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #7F00FF;
    color: white;
    padding: 8px 16px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(127, 0, 255, 0.3);
}

.hero-title {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 24px;
    color: #1a1a1a;
}

.hero-description {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #666;
    margin-bottom: 32px;
    max-width: 500px;
}

.hero-features {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 40px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #333;
}

.feature-item i {
    color: #7F00FF;
    font-size: 16px;
}

.hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.hero-actions .btn-lg {
    padding: 12px 32px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 12px;
    text-decoration: none;
}

/* Hero Visual Styles */
.hero-visual {
    position: relative;
    z-index: 2;
}

.mining-stats-card {
    background: white;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.stats-header h4 {
    margin: 0;
    font-weight: 700;
    color: #1a1a1a;
}

.status-badge {
    background: #10b981;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.stat-item {
    text-align: center;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 12px;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #7F00FF;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 0.9rem;
    color: #666;
    font-weight: 500;
}

.mining-progress {
    margin-top: 24px;
}

.progress-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
}

.progress {
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #7F00FF 0%, #a855f7 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Responsive Design */
@media (max-width: 991px) {
    .hero-title {
        font-size: 2.2rem;
    }
    
    .hero-section {
        text-align: center;
        padding: 100px 0 40px;
    }
    
    .hero-description { 
        text-align: center;
    }

    .mining-stats-card {
        margin-top: 40px;
    }

    .hero-features {
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .hero-title {
        font-size: 1.8rem;
    }
    
    .hero-features {
        flex-direction: column;
        gap: 16px;
        justify-content: center;
        align-items: center;
    }
    
    .hero-actions {
        flex-direction: column;
    }

    .hero-section {
        text-align: center;
    }

    .hero-description { 
        text-align: center;
    }
    
    .hero-actions .btn-lg {
        width: 100%;
        text-align: center;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .mining-stats-card {
        padding: 24px;
    }
}

/* Section Titles */
.section-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 16px;
}

.section-description {
    font-size: 1.1rem;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
}

/* Pricing Section */
.pricing-section {
    padding: 80px 0;
    /* background: #ffffff; */
}

.pricing-card {
    background: white;
    border-radius: 24px;
    padding: 32px;
    border: 2px solid #f0f0f0;
    transition: all 0.3s ease;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.pricing-card.popular {
    border-color: #7F00FF;
    transform: scale(1.05);
    box-shadow: 0 20px 40px rgba(127, 0, 255, 0.2);
}

.plan-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #e5e7eb;
    color: #374151;
    padding: 6px 20px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.popular-badge {
    background: linear-gradient(135deg, #7F00FF 0%, #a855f7 100%);
    color: white;
}

.plan-header {
    text-align: center;
    margin-bottom: 32px;
    margin-top: 16px;
}

.plan-header h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 16px;
}

.plan-price .price {
    display: block;
    font-size: 3.5rem;
    font-weight: 800;
    color: #7F00FF;
    margin-bottom: 4px;
}

.plan-price .period {
    font-size: 0.9rem;
    color: #666;
    font-weight: 500;
}

.plan-features {
    flex-grow: 1;
    margin-bottom: 32px;
}

.feature {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 0;
}

.feature i {
    color: #7F00FF;
    font-size: 16px;
    width: 20px;
    text-align: center;
}

.feature span {
    font-size: 0.95rem;
    color: #374151;
}

.plan-action {
    margin-top: auto;
}

.btn-plan {
    width: 100%;
    padding: 16px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
    background: #f8f9fa;
    color: #374151;
    border: 2px solid #e5e7eb;
    display: block;
}

.btn-plan:hover {
    background: #7F00FF;
    color: white !important;
    border-color: #7F00FF;
    text-decoration: none;
    transform: translateY(-2px);
}

.btn-plan.popular {
    background: #7F00FF;
    color: white !important;
    border-color: #7F00FF;
}

.btn-plan.popular:hover {
    background: #6b1395;
    border-color: #6b1395;
}

/* Responsive Pricing */
@media (max-width: 991px) {
    .pricing-card.popular {
        transform: none;
        margin-bottom: 2rem;
    }
    
    .pricing-card.popular:hover {
        transform: translateY(-8px);
    }
    
    .section-title {
        font-size: 2rem;
    }
}

@media (max-width: 576px) {
    .pricing-section {
        padding: 60px 0;
    }
    
    .pricing-card {
        padding: 24px;
    }
    
    .plan-price .price {
        font-size: 2rem;
    }
    
    .plan-header h3 {
        font-size: 1.5rem;
    }
}

/* Calculator Section */
.calculator-section {
    /* padding: 80px 0; */
    /* background: #f8f9fa; */
}

.calculator-card {
    background: white;
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.calculator-inputs {
    margin-bottom: 40px;
}

.input-label {
    display: block;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.currency-input {
    position: relative;
    display: flex;
    align-items: center;
}

.currency-input .form-control {
    border-radius: 12px;
    border: 2px solid #e5e7eb;
    padding: 16px 20px;
    padding-right: 60px;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.currency-input .form-control:focus {
    border-color: #7F00FF;
    box-shadow: 0 0 0 3px rgba(127, 0, 255, 0.1);
}

.currency-symbol {
    position: absolute;
    right: 16px;
    color: #666;
    font-weight: 600;
    font-size: 14px;
    pointer-events: none;
}

.calculator-results {
    margin-bottom: 40px;
}

.result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
}

.result-item {
    background: #f8f9fa;
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    transition: all 0.3s ease;
}

.result-item:hover {
    background: #7F00FF;
    color: white;
    transform: translateY(-4px);
}

.result-item:hover .result-icon i {
    color: white;
}

.result-icon {
    margin-bottom: 16px;
}

.result-icon i {
    font-size: 24px;
    color: #7F00FF;
    transition: color 0.3s ease;
}

.result-value {
    font-size: 1.8rem;
    font-weight: 800;
    color: #1a1a1a;
}

.result-item:hover .result-value {
    color: white;
}

.result-label {
    font-size: 0.9rem;
    color: #666;
    font-weight: 500;
}

.result-item:hover .result-label {
    color: rgba(255, 255, 255, 0.9);
}

.days-input {
    width: 60px;
    background: transparent;
    border: none;
    border-bottom: 2px solid #7F00FF;
    text-align: center;
    font-weight: 600;
    color: inherit;
    padding: 2px 4px;
    margin: 0 4px;
}

.result-item:hover .days-input {
    border-bottom-color: white;
    color: white;
}

.calculator-action {
    text-align: center;
}

.btn-calculator {
    background: #7F00FF;
    color: white;
    padding: 16px 40px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
    border: none;
}

.btn-calculator:hover {
    background: #6b1395;
    color: white;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(127, 0, 255, 0.3);
}

/* Responsive Calculator */
@media (max-width: 991px) {
    .calculator-section {
        /* padding: 60px 0; */
    }
    
    .calculator-card {
        padding: 32px;
    }
    
    .result-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (max-width: 576px) {
    .calculator-card {
        padding: 24px;
    }
    
    .result-value {
        font-size: 1.5rem;
    }
    
    .currency-input .form-control {
        padding: 12px 16px;
        padding-right: 50px;
    }
}

/* Modern Dashboard Styles */
.dashboard-main {
    background: #f8f9fa;
    min-height: 100vh;
    padding-bottom: 2rem;
}

/* Welcome Header */
.dashboard-header {
    margin-bottom: 2rem;
}

.welcome-card {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid #e5e7eb;
}

.welcome-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0.5rem;
}

/* Compact Welcome Card Styles */
.welcome-card-compact {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid #e5e7eb;
}

.welcome-info {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.user-greeting {
    margin-right: 1rem;
}

.user-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 0.25rem 0;
}

.account-status {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.plan-name {
    background: #f8f9fa;
    color: #7F00FF;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
}

.plan-rate {
    color: #666;
    font-size: 0.85rem;
    font-weight: 500;
}

.earnings-info {
    display: flex;
    gap: 1.5rem;
}

.earning-item {
    display: flex;
    flex-direction: column;
}

.earning-label {
    font-size: 0.75rem;
    color: #666;
    margin-bottom: 0.25rem;
}

.earning-value {
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a1a;
}

.mining-status-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.status-indicator.mining {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.status-indicator.stopped {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.status-dot-large {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: statusPulse 2s infinite;
}

.status-indicator.mining .status-dot-large {
    background: #22c55e;
}

.status-indicator.stopped .status-dot-large {
    background: #ef4444;
}

@keyframes statusPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.status-text-large {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.status-indicator.mining .status-text-large {
    color: #22c55e;
}

.status-indicator.stopped .status-text-large {
    color: #ef4444;
}

.power-display {
    text-align: center;
}

.power-value {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: #7F00FF;
    margin-bottom: 0.25rem;
}

.power-label {
    font-size: 0.7rem;
    color: #666;
}

/* Transactions Table Styles */
.transactions-section {
    margin-top: 2rem;
}

.transactions-panel {
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid #e5e7eb;
    overflow: hidden;
}

.transactions-panel .panel-header {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8f9fa;
}

.transactions-panel .panel-title {
    display: flex;
    align-items: center;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}

.transactions-count {
    background: #7F00FF;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.transactions-table {
    background: white;
}

.table-header {
    display: grid;
    grid-template-columns: 2fr 2fr 1.5fr 1fr;
    gap: 1rem;
    padding: 1rem 2rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e5e7eb;
}

.header-cell {
    font-size: 0.85rem;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table-body {
    max-height: 600px;
    overflow-y: auto;
}

.transaction-row {
    display: grid;
    grid-template-columns: 2fr 2fr 1.5fr 1fr;
    gap: 1rem;
    padding: 1.25rem 2rem;
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.2s ease;
    align-items: center;
}

.transaction-row:hover {
    background: #f8f9fa;
}

.transaction-row:last-child {
    border-bottom: none;
}

.transaction-cell {
    display: flex;
    align-items: center;
}

/* Amount Cell */
.coin-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.coin-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.coin-icon img {
    width: 24px;
    height: 24px;
}

.amount-info {
    display: flex;
    flex-direction: column;
}

.amount {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
}

.currency {
    font-size: 0.8rem;
    color: #666;
    font-weight: 500;
}

/* Transaction ID Cell */
.txid-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.txid-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #7F00FF;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.txid-link:hover {
    color: #6b21a8;
    transform: translateX(2px);
}

.txid-short {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.85rem;
}

.system-name {
    font-size: 0.75rem;
    color: #666;
    font-weight: 500;
}

/* Date Cell */
.date-info {
    display: flex;
    flex-direction: column;
}

.date-main {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.2;
}

.time-sub {
    font-size: 0.8rem;
    color: #666;
    font-weight: 500;
}

/* Type Cell */
.transaction-type {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.transaction-type.deposit {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.transaction-type.payout {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.transaction-type svg {
    flex-shrink: 0;
}

/* Empty State */
.empty-transactions {
    padding: 4rem 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.empty-icon svg {
    color: #94a3b8;
}

.empty-text h4 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0.5rem;
}

.empty-text p {
    color: #666;
    font-size: 1rem;
    margin: 0;
    max-width: 400px;
}

/* Deposit Calculator Styles */
.deposit-calculator-section {
    margin: 2rem 0;
}

.calculator-panel {
    background: white;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
}

.calculator-panel .panel-header {
    padding: 2rem 2rem 1rem 2rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    text-align: center;
}

.calculator-panel .panel-title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 0.5rem 0;
}

.panel-subtitle {
    color: #666;
    margin: 0;
    font-size: 1rem;
}

.calculator-content {
    padding: 2rem;
}

/* Investment Input Section */
/* .investment-input-section {
    margin-bottom: 2rem;
} */

.input-header {
    text-align: start;
    margin-bottom: 1.5rem;
}

.input-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0.5rem;
}

.input-description {
    color: #666;
    margin: 0;
}

.investment-input-container {
    /* max-width: 400px;
    margin: 0 auto; */
    display: block;
    flex-direction: column;
    align-items: center;
    justify-content: start;
}

.amount-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 0.5rem;
    margin-bottom: 1rem;
    transition: all 0.2s ease;
}

.amount-input-wrapper:focus-within {
    border-color: #7F00FF;
    box-shadow: 0 0 0 3px rgba(127, 0, 255, 0.1);
}

.currency-symbol {
    padding: 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #7F00FF;
}

.amount-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1.25rem;
    font-weight: 600;
    padding: 0.75rem 0;
    background: transparent;
    color: #1a1a1a;
}

.currency-label {
    padding: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: #666;
}

.quick-amounts {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: start;
}

.quick-label {
    font-size: 0.9rem;
    color: #666;
    margin-right: 0.5rem;
}

.quick-btn {
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-btn:hover {
    background: #7F00FF;
    color: white;
    border-color: #7F00FF;
    transform: translateY(-1px);
}

/* Calculator Results Section */
/* .calculator-results-section {
    margin-bottom: 2rem;
} */

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.results-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}

.btn-deposit {
    background: #7F00FF;
    border: none;
    border-radius: 10px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    color: white;
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
}

.btn-deposit:hover {
    background: #6b21a8;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(127, 0, 255, 0.3);
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
    gap: 1rem;
}

.result-card {
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
}

.result-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #7F00FF;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0 auto;
    color: white;
}

.result-icon.rate-icon {
    background: #22c55e;
}

.result-icon.profit-icon {
    background: #f59e0b;
}

.result-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1a1a1a;
}

.result-label {
    color: #666;
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.period-input {
    width: 60px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 0.25rem;
    text-align: center;
    font-size: 0.9rem;
    background: white;
}

.mobile-deposit-action {
    display: none;
    text-align: center;
    padding: 1rem 0;
}

.btn-mobile-deposit {
    background: #7F00FF;
    border: none;
    border-radius: 10px;
    padding: 1rem 2rem;
    font-weight: 600;
    color: white;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-mobile-deposit:hover {
    background: #6b21a8;
    transform: translateY(-2px);
}

/* Deposit Modal Styles */
.deposit-modal {
    border-radius: 16px;
    border: none;
    overflow: hidden;
}

.deposit-modal .modal-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    color: black;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #e5e7eb;
}

.deposit-modal .modal-title {
    display: flex;
    align-items: center;
    font-weight: 700;
    margin: 0;
}

.deposit-modal .btn-close {
    padding: 0.75rem;
    background-color: #f8f9fa;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    opacity: 0.8;
    color: black;
}

.deposit-modal .btn-close:hover {
    opacity: 1;
}

.deposit-step {
    padding: 1rem 0;
}

.step-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.back-btn {
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
}

.back-btn:hover {
    background: #e5e7eb;
    color: #1a1a1a;
}

.step-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 0.25rem 0;
}

.step-description {
    color: #666;
    margin: 0;
    font-size: 0.9rem;
}

/* Crypto Selection Grid */
.crypto-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.crypto-option {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.crypto-option:hover {
    border-color: #7F00FF;
    transform: translateY(-2px);
}

.crypto-option.active {
    border-color: #7F00FF;
    background: linear-gradient(135deg, rgba(127, 0, 255, 0.05) 0%, rgba(127, 0, 255, 0.1) 100%);
}

.crypto-icon {
    width: 50px;
    height: 50px;
    background: #f8f9fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.crypto-icon img {
    width: 30px;
    height: 30px;
}

.crypto-info {
    flex: 1;
}

.crypto-name {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0.25rem;
}

.crypto-symbol {
    font-size: 0.9rem;
    font-weight: 600;
    color: #7F00FF;
    margin-bottom: 0.25rem;
}

.crypto-network {
    font-size: 0.8rem;
    color: #666;
}

.crypto-rate {
    font-size: 0.9rem;
    font-weight: 600;
    color: #22c55e;
    text-align: right;
}

/* Payment Details */
.payment-details {
    max-width: 500px;
    margin: 0 auto;
}

.payment-summary {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.summary-item:last-child {
    margin-bottom: 0;
}

.summary-label {
    color: #666;
    font-size: 0.9rem;
}

.summary-value {
    font-weight: 700;
    color: #1a1a1a;
}

.qr-section {
    text-align: center;
    margin-bottom: 2rem;
}

.deposit-qr {
    width: 200px;
    height: 200px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

.address-section,
.amount-section {
    margin-bottom: 1.5rem;
}

.payment-label {
    display: block;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.address-input-group,
.amount-input-group {
    display: flex;
    gap: 0.5rem;
}

.address-input,
.amount-input-display {
    flex: 1;
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.75rem;
    font-size: 0.9rem;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    color: #1a1a1a;
}

.copy-address-btn,
.copy-amount-btn {
    background: #7F00FF;
    border: none;
    border-radius: 8px;
    padding: 0.75rem;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.copy-address-btn:hover,
.copy-amount-btn:hover {
    background: #6b21a8;
    transform: scale(1.05);
}

.payment-notice {
    background: #fef3cd;
    border: 1px solid #fdd835;
    border-radius: 8px;
    padding: 1rem;
}

.notice-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: #7d6608;
}

.notice-item:last-child {
    margin-bottom: 0;
}

.notice-icon {
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.welcome-subtitle {
    color: #666;
    margin: 0;
    font-size: 1rem;
}

.plan-badge-large {
    text-align: center;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 12px;
    min-width: 120px;
}

.plan-percentage {
    font-size: 2rem;
    font-weight: 800;
    color: #7F00FF;
    line-height: 1;
}

.plan-label {
    font-size: 0.85rem;
    color: #666;
    margin-top: 0.25rem;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}

.stat-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid #e5e7eb;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-icon {
    width: 48px;
    height: 48px;
    background: #f8f9fa;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7F00FF;
    font-size: 1.25rem;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
}

.stat-label {
    font-size: 0.875rem;
    color: #666;
    margin-top: 0.25rem;
}

/* Panel Styles */
.mining-panel, .network-stats, .referral-panel {
    background: white;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transition: all 0.3s ease;
}

.mining-panel.bg-success {
    background: #dcfce7 !important;
    border-color: #16a34a !important;
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.2) !important;
}

.panel-header {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.panel-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}

.mining-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #666;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
}

.status-dot.active {
    background: #10b981;
}

.status-dot.inactive {
    background: #ef4444;
}

/* Chart Styles */
.mining-chart-container {
    padding: 2rem;
    border-bottom: 1px solid #e5e7eb;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.chart-header h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
}

.chart-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #7F00FF;
}

.hashrate-chart {
    position: relative;
}

.chart-container {
    position: relative;
    height: 180px;
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

#hashrateCanvas {
    width: 100% !important;
    height: 100% !important;
}

.chart-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Animated line effect - smooth flowing animation */
#hashrate-line {
    stroke-dasharray: 8 4;
    animation: flowLine 2s linear infinite;
}

@keyframes flowLine {
    0% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: 12;
    }
}

/* Alternative smooth wave effect */
#hashrate-line.wave-mode {
    stroke-dasharray: none;
    animation: none;
    filter: drop-shadow(0 0 3px rgba(127, 0, 255, 0.4));
}

/* Chart overlay */
.chart-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.chart-point {
    position: absolute;
    transform: translate(-50%, -50%);
}

.point-dot {
    width: 8px;
    height: 8px;
    background: #7F00FF;
    border: 2px solid white;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(127, 0, 255, 0.4);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 0 6px rgba(127, 0, 255, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(127, 0, 255, 0);
    }
}

.point-tooltip {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.chart-point:hover .point-tooltip {
    opacity: 1;
}

.point-value {
    font-weight: 600;
    display: block;
}

.point-time {
    font-size: 0.65rem;
    opacity: 0.8;
}

/* Peak indicator */
.peak-indicator {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.peak-dot {
    width: 6px;
    height: 6px;
    background: #22c55e;
    border: 2px solid white;
    border-radius: 50%;
    animation: peakPulse 3s infinite;
}

@keyframes peakPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
    }
    50% {
        transform: scale(1.2);
        box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

.peak-label {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: #22c55e;
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.6rem;
    font-weight: 600;
    white-space: nowrap;
}

.chart-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #666;
    padding: 0.5rem 1rem 0;
    border-top: 1px solid #e5e7eb;
    background: rgba(248, 249, 250, 0.5);
    border-radius: 0 0 12px 12px;
}

.label-time {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.label-time:hover {
    background: rgba(127, 0, 255, 0.1);
    color: #7F00FF;
}

.label-current {
    background: #7F00FF;
    color: white;
    font-weight: 600;
}

.label-current:hover {
    background: #6b1395;
}

/* Real-time data animation */
.chart-svg path {
    filter: drop-shadow(0 2px 4px rgba(127, 0, 255, 0.1));
}

.chart-svg #moving-dot {
    filter: drop-shadow(0 2px 4px rgba(127, 0, 255, 0.3));
}

/* Power Allocation */
.power-allocation {
    padding: 2rem;
    border-bottom: 1px solid #e5e7eb;
}

.allocation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.allocation-header h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
}

.allocation-info {
    font-size: 0.875rem;
    color: #666;
}

/* Power controls layout - buttons inside slider track */
.power-slider-container {
    position: relative;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

.control-btn-left,
.control-btn-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: 1.5px solid #e5e7eb;
    background: white;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7F00FF;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.8rem;
    z-index: 10;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.control-btn-left {
    left: 8px;
}

.control-btn-right {
    right: 8px;
}

.control-btn-left:hover,
.control-btn-right:hover {
    border-color: #7F00FF;
    background: #f8f9fa;
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.control-btn-left:active,
.control-btn-right:active {
    transform: translateY(-50%) scale(0.95);
}

/* Legacy slider button support */
.slider-btn {
    width: 40px;
    height: 40px;
    border: 2px solid #e5e7eb;
    background: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7F00FF;
    cursor: pointer;
    transition: all 0.2s ease;
}

.slider-btn:hover {
    border-color: #7F00FF;
    background: #f8f9fa;
}

.slider-track {
    position: relative;
    height: 8px;
    background: white;
    border-radius: 4px;
    border: 1px solid #e5e7eb;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
    margin: 0 40px; /* Space for buttons */
}

.power-slider {
    position: absolute;
    top: -12px;
    left: -1px;
    width: calc(100% + 2px);
    height: 32px;
    opacity: 0;
    cursor: pointer;
}

.slider-fill {
    height: 100%;
    background: #7F00FF;
    border-radius: 3px;
    transition: width 0.3s ease;
    margin-left: 2px; /* Small offset to avoid button overlap */
    width: calc(var(--fill-width, 0%) - 4px);
}

/* Mining Actions */
.mining-actions {
    padding: 2rem;
    display: flex;
    gap: 1rem;
}

.action-btn {
    flex: 1;
    padding: 1rem 1.5rem;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-btn.primary {
    background: #7F00FF !important;
    color: white !important;
    border: none !important;
}

.action-btn.primary:hover {
    background: #6b1395 !important;
    transform: translateY(-1px);
}

.action-btn.secondary {
    background: #f8f9fa !important;
    color: #1a1a1a !important;
    border: 2px solid #e5e7eb !important;
}

.action-btn.secondary:hover {
    background: #e5e7eb !important;
    transform: translateY(-1px);
}

/* Compatibility with old range buttons */
.range-btn {
    width: 40px;
    height: 40px;
    border: 2px solid #e5e7eb;
    background: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7F00FF;
    cursor: pointer;
    transition: all 0.2s ease;
}

.range-btn:hover {
    border-color: #7F00FF;
    background: #f8f9fa;
}

/* Network Stats */
.network-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 2rem;
}

.network-item {
    text-align: center;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.network-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #7F00FF;
    margin-bottom: 0.25rem;
}

.network-label {
    font-size: 0.8rem;
    color: #666;
}

/* Referral Panel */
.referral-content {
    padding: 2rem;
}

.referral-description {
    color: #666;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.referral-link {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.referral-input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.875rem;
    background: #f8f9fa;
}

.copy-btn {
    padding: 0.75rem 1rem !important;
    background: #7F00FF !important;
    color: white !important;
    border: none !important;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.copy-btn:hover {
    background: #6b1395 !important;
}

.copy-btn:focus {
    box-shadow: none !important;
}

.referral-stats {
    display: flex;
    gap: 1rem;
}

.ref-stat {
    flex: 1;
    text-align: center;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.ref-number {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: #7F00FF;
}

.ref-label {
    font-size: 0.75rem;
    color: #666;
    margin-top: 0.25rem;
}

/* Deposits Table Styles - Same as Transactions */
.deposits-section {
    margin-top: 2rem;
}

.deposits-panel {
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid #e5e7eb;
    overflow: hidden;
}

.deposits-panel .panel-header {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8f9fa;
}

.deposits-panel .panel-title {
    display: flex;
    align-items: center;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}

.deposits-count {
    background: #7F00FF;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.deposits-table {
    background: white;
}

.deposits-table .table-header {
    display: grid;
    grid-template-columns: 2fr 2fr 1.5fr 1fr;
    gap: 1rem;
    padding: 1rem 2rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e5e7eb;
}

.deposits-table .table-body {
    max-height: 600px;
    overflow-y: auto;
}

.deposit-row {
    display: grid;
    grid-template-columns: 2fr 2fr 1.5fr 1fr;
    gap: 1rem;
    padding: 1.25rem 2rem;
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.2s ease;
    align-items: center;
}

.deposit-row:hover {
    background: #f8f9fa;
}

.deposit-row:last-child {
    border-bottom: none;
}

.deposit-cell {
    display: flex;
    align-items: center;
}

/* Expires Cell */
.expires-info {
    display: flex;
    flex-direction: column;
}

.expires-main {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.2;
}

.expires-sub {
    font-size: 0.8rem;
    color: #666;
    font-weight: 500;
}

/* Power Cell */
.power-info {
    display: flex;
    gap: 0.25rem;
    /* align-items: center; */
}

.power-value {
    font-size: 1rem;
    font-weight: 700;
    color: #7F00FF;
    line-height: 1.2;
}

.power-unit {
    font-size: 0.8rem;
    color: #666;
    font-weight: 500;
}

/* Status Cell */
.deposit-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.deposit-status.active {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.deposit-status svg {
    flex-shrink: 0;
}

/* Empty State for Deposits */
.empty-deposits {
    padding: 4rem 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.empty-deposits .empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.empty-deposits .empty-icon svg {
    color: #94a3b8;
}

.empty-deposits .empty-text h4 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0.5rem;
}

.empty-deposits .empty-text p {
    color: #666;
    font-size: 1rem;
    margin: 0;
    max-width: 400px;
}

/* Modern Authentication Styles */
.auth-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    position: relative;
    overflow: hidden;
}

.auth-container {
    position: relative;
    z-index: 10;
    width: 100%;
}

.auth-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 3rem 2.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.auth-header {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-logo {
    width: 80px;
    height: auto;
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

.auth-title {
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.auth-subtitle {
    color: #666;
    font-size: 1rem;
    margin: 0;
    line-height: 1.5;
}

.auth-tabs {
    display: flex;
    background: #f8f9fa;
    border-radius: 16px;
    padding: 0.5rem;
    margin-bottom: 2rem;
    gap: 0.5rem;
}

.auth-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    background: transparent;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    color: #666;
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 0.9rem;
}

.auth-tab:hover {
    color: #7F00FF;
    background: rgba(127, 0, 255, 0.05);
}

.auth-tab.active {
    background: white;
    color: #7F00FF;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.auth-tab svg {
    width: 18px;
    height: 18px;
}

.google-auth {
    margin-bottom: 1.5rem;
}

.google-signin-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-weight: 600;
    color: #374151;
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 1rem;
}

.google-signin-btn:hover {
    border-color: #d1d5db;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.auth-divider {
    display: flex;
    align-items: center;
    margin: 1.5rem 0;
    text-align: center;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

.auth-divider span {
    padding: 0 1rem;
    color: #666;
    font-size: 0.9rem;
    font-weight: 500;
}

.auth-form {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.3s ease;
}

.auth-form.hidden {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: 1rem;
    color: #666;
    z-index: 2;
}

.form-input {
    width: 100%;
    padding: 1rem 1rem 1rem 3rem;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1rem;
    color: #1a1a1a;
    background: white;
    transition: all 0.3s ease;
}

.form-input:focus {
    outline: none;
    border-color: #7F00FF;
    box-shadow: 0 0 0 3px rgba(127, 0, 255, 0.1);
}

.form-input::placeholder {
    color: #9ca3af;
}

.password-toggle {
    position: absolute;
    right: 1rem;
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: color 0.2s ease;
}

.password-toggle:hover {
    color: #7F00FF;
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.remember-me,
.terms-agreement {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #666;
    cursor: pointer;
    position: relative;
}

.remember-me input,
.terms-agreement input {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
    margin: 0;
}

.remember-me input:checked,
.terms-agreement input:checked {
    background: #7F00FF;
    border-color: #7F00FF;
}

.remember-me input:checked::after,
.terms-agreement input:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.forgot-password {
    color: #7F00FF;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.forgot-password:hover {
    color: #6b21a8;
    text-decoration: underline;
}

.auth-submit-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #7F00FF, #6b21a8);
    border: none;
    border-radius: 12px;
    color: white;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 1rem;
}

.auth-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(127, 0, 255, 0.3);
}

.auth-submit-btn:active {
    transform: translateY(0);
}

.auth-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.btn-text {
    flex: 1;
}

.btn-icon {
    width: 20px;
    height: 20px;
}

.auth-footer {
    margin-top: 2rem;
    text-align: center;
}

.captcha-notice {
    font-size: 0.8rem;
    color: #666;
    line-height: 1.4;
    margin: 0;
}

.captcha-notice a {
    color: #7F00FF;
    text-decoration: none;
}

.captcha-notice a:hover {
    text-decoration: underline;
}

/* Background Elements */
.auth-bg-elements {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

.bg-element {
    position: absolute;
    border-radius: 50%;
    opacity: 0.1;
    animation: float 6s ease-in-out infinite;
}

.bg-element-1 {
    width: 300px;
    height: 300px;
    background: linear-gradient(45deg, #7F00FF, #667eea);
    top: -150px;
    right: -150px;
    animation-delay: 0s;
}

.bg-element-2 {
    width: 200px;
    height: 200px;
    background: linear-gradient(45deg, #764ba2, #7F00FF);
    bottom: -100px;
    left: -100px;
    animation-delay: 2s;
}

.bg-element-3 {
    width: 150px;
    height: 150px;
    background: linear-gradient(45deg, #667eea, #764ba2);
    top: 50%;
    left: -75px;
    animation-delay: 4s;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33% { transform: translateY(-20px) rotate(5deg); }
    66% { transform: translateY(10px) rotate(-5deg); }
}

/* Loading States */
.auth-submit-btn.loading .btn-text {
    opacity: 0;
}

.auth-submit-btn.loading::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid transparent;
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Development Notice Styles */
.dev-notice {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #fef3c7, #fbbf24);
    border: 2px solid #f59e0b;
    border-radius: 12px;
    color: #92400e;
    font-size: 0.9rem;
    line-height: 1.4;
}

.dev-notice-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.dev-notice-text {
    flex: 1;
}

.dev-notice strong {
    color: #78350f;
    font-weight: 600;
}

/* Auth Mobile Responsive */
@media (max-width: 576px) {
    .auth-card {
        padding: 2rem 1.5rem;
        margin: 1rem;
    }
    
    .auth-title {
        font-size: 1.75rem;
    }
    
    .form-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .dev-notice {
        padding: 0.75rem 1rem;
        font-size: 0.8rem;
    }
    
    .dev-notice-icon {
        font-size: 1.25rem;
    }
}

/* Responsive Design */
@media (max-width: 991px) {
    .welcome-card {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }
    
    .welcome-card-compact {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .welcome-info {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .earnings-info {
        gap: 1rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
    }
    
    /* Transactions Mobile */
    .transactions-panel .panel-header {
        padding: 1rem;
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
    
    .table-header {
        display: none;
    }
    
    .transaction-row {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        padding: 1rem;
        border-radius: 8px;
        margin-bottom: 0.75rem;
        background: #f8f9fa;
        border: 1px solid #e5e7eb;
    }
    
    .transaction-cell {
        justify-content: space-between;
        border-bottom: 1px solid #e5e7eb;
        padding-bottom: 0.5rem;
    }
    
    .transaction-cell:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    
    .transaction-cell::before {
        content: attr(data-label);
        font-size: 0.75rem;
        font-weight: 600;
        color: #666;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        min-width: 80px;
    }
    
    .amount-cell::before {
        content: "Amount";
    }
    
    .txid-cell::before {
        content: "TX ID";
    }
    
    .date-cell::before {
        content: "Date";
    }
    
    .type-cell::before {
        content: "Type";
    }
    
    /* Deposits Mobile */
    .deposits-panel .panel-header {
        padding: 1rem;
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
    
    .deposits-table .table-header {
        display: none;
    }
    
    .deposit-row {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        padding: 1rem;
        border-radius: 8px;
        margin-bottom: 0.75rem;
        background: #f8f9fa;
        border: 1px solid #e5e7eb;
    }
    
    .deposit-cell {
        justify-content: space-between;
        border-bottom: 1px solid #e5e7eb;
        padding-bottom: 0.5rem;
    }
    
    .deposit-cell:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    
    .deposit-cell::before {
        content: attr(data-label);
        font-size: 0.75rem;
        font-weight: 600;
        color: #666;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        min-width: 80px;
    }
    
    .amount-cell::before {
        content: "Deposit";
    }
    
    .expires-cell::before {
        content: "Expires";
    }
    
    .power-cell::before {
        content: "Power";
    }
    
    .status-cell::before {
        content: "Status";
    }
    
    .stat-card {
        padding: 1rem;
    }
    
    /* Deposit Calculator Mobile */
    .calculator-panel .panel-header {
        padding: 1.5rem 1rem;
    }
    
    .calculator-content {
        padding: 1rem;
    }
    
    .results-header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .results-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .mobile-deposit-action {
        display: block;
    }
    
    .deposit-action {
        display: none;
    }
    
    /* Deposit Modal Mobile */
    .crypto-selection-grid {
        grid-template-columns: 1fr;
    }
    
    .crypto-option {
        padding: 1rem;
    }
    
    .payment-details {
        max-width: 100%;
    }
    
    .deposit-qr {
        width: 150px;
        height: 150px;
    }
    
    .mining-actions {
        flex-direction: column;
    }
    
    .network-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {

    .input-header  {
        text-align: center;
    }

    .investment-input-section {
        margin-bottom: 2rem;
    }

    .dashboard-main .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .welcome-card {
        padding: 1.5rem;
    }
    
    .welcome-title {
        font-size: 1rem;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .panel-header {
        padding: 1rem 1.5rem;
    }
    
    .mining-chart-container,
    .power-allocation,
    .mining-actions {
        padding: 1.5rem;
    }
    
    .referral-content {
        padding: 1.5rem;
    }
    
    /* Mobile power controls */
    .power-slider-container {
        padding: 1.2rem;
    }
    
    .control-btn-left,
    .control-btn-right {
        width: 36px;
        height: 36px;
        font-size: 0.7rem;
    }
    
    .control-btn-left {
        left: 6px;
    }
    
    .control-btn-right {
        right: 6px;
    }
    
    .slider-track {
        height: 6px;
        margin: 0 32px; /* Adjusted for smaller buttons */
    }
    
    .power-slider {
        top: -10px;
        height: 26px;
    }
    
    .chart-container {
        height: 150px;
        padding: 0.75rem;
    }
    
    .chart-labels {
        padding: 0.25rem 0.5rem 0;
        font-size: 0.7rem;
    }
    
    .label-time {
        padding: 0.2rem 0.3rem;
        font-size: 0.65rem;
    }
    
    .peak-label {
        font-size: 0.55rem;
        padding: 1px 4px;
    }
}

/* JavaScript update functions for slider */
.custom-range-alt::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    background: #7F00FF;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

.custom-range-alt::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #7F00FF;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    position: relative;
    z-index: 2;
}