@import url("base.css");
@import url("fontawesome.css");
@import url("animate.css");

/******************** header ********************/
header {
width: 100%;
height: 70px;
top: 0;
padding-right:20px;
position: sticky;
background-color: var(--white);
color:var(--black);
display: flex;
align-items: center;
z-index: 1000;
transition: all 0.3s ease;
justify-content: space-between}

#header.scrolled {height: 60px;box-shadow: 0 2px 8px rgba(0,0,0,0.1)}

.btn_login {
left: 20px;
padding: 5px 20px;
position: absolute;
background-color: var(--base);
color: var(--white2);
border: none;
border-radius: 12px;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
box-shadow: var(--shadow)}

.btn_login img {width: 25px;object-fit: contain}

.btn_login_mobile {
width: 170px;
height: 40px;
margin: 15px auto;
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
background-color: var(--base);
color: var(--white);
border: none;
border-radius: 12px}

.btn_login_mobile img {width: 25px;object-fit: contain;fill: var(--base)}
.logo{width:190px;cursor:pointer}
/******************** header ********************/


/******************** menu ********************/
.menu {
display: flex;
position: absolute;
left: 50%;
transform: translateX(-50%);
gap: 30px}

.menu > li {list-style: none;float: right;position: relative}

.menu > li > a {
height: 40px;
display: block;
margin-left: 10px;
color: var(--black);
line-height: 40px;
border-bottom:2px solid var(--white);
transition: all 0.5s}

.menu > li:hover > a {border-bottom: 2px solid var(--base)}
.menu li:hover > a {color: var(--base)}

.menu > li > ul {
width: 200px;
padding: 10px;
right: 0;
top: 60px;
position: absolute;
opacity: 0;
visibility: hidden;
background-color: var(--white);
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
border-radius: 2px;
border-top: 2px solid var(--base);
transition: opacity 300ms ease-in-out, top 300ms ease-in-out}

.menu > li:hover > ul {top: 40px;opacity: 1;visibility: visible}
.menu > li > ul li a {padding: 0.5rem 0;display: block;color: var(--black)}
.menu > li > ul li {list-style: none}


.menu_mobile_btn {display: inline-block;text-align: right}
.menu_mobile_btn i {font-size: 35px;color: var(--base)}

.menu_mobile_container {
width: 60%;
height: 100vh;
right: -60%;
top: 0;
position: fixed;
background-color: var(--black);
z-index: 30;
transition: all 0.4s}

.menu_mobile_close {padding: 10px;position: absolute;left: 0}
.menu_mobile_close i {font-size: 24px;color: var(--white)}

.btn_login_mobile {
width: 170px;
height: 40px;
margin: 40px auto 10px auto;
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
background-color: var(--white);
color: var(--base);
border: none;
border-radius: 12px}

.menu_mobile_items_container {padding: 0 20px;margin-bottom: 20px;display: block}

.menu_mobile_item {
padding: 12px 10px;
display: block;
position: relative;
color: var(--white)}

.menu_mobile_item::after {
right: 0;
left: 5%;
bottom: 0;
height: 1px;
content: '';
position: absolute;
background: linear-gradient(to right, #444 0%,#fff 50%,#444 100%)}

.menu_mobile_item:last-child:after {background: none}

.menu_mobile_show {right: 0}

.fade {
width: 100vw;
height: 100vh;
z-index: 20;
top: 0;
left: 0;
display: none;
position: fixed;
background: rgba(0, 0, 0, 0.4)}
/******************** menu ********************/


/******************** slide ********************/
.slide {
width: 100%;
height: 90vh;
background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url(../img/background.webp);
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: 100% 100%}

.slide_title{
display:block;
margin:0 auto;
padding-top:13%;
padding-bottom:0%;
text-align:center;
font-weight:bold;
color:var(--white)}

.slide_des {
display: block;
margin: 2% auto 5% auto;
text-align: center;
font-weight: bold;
color: var(--white2)}

.slide_btn {
width: fit-content;
height: 50px;
padding: 5px 20px;
margin: 15px auto;
border: none;
border-radius: 12px;
text-align: center;
display: block;
color: var(--white2);
background-color:#ffffff7b;
position: relative;
cursor: pointer;
border: none}

.slide_btn::after, .slide_btn::before {
width: 50%;
height: 50%;
content: "";
display: block;
position: absolute;
border: 2px solid;
border-radius: 4px;
transition: all 0.6s ease}

.slide_btn::after {
bottom: 0;
right: 0;
border-top-color: transparent;
border-left-color: transparent;
border-bottom-color: var(--white);
border-right-color: var(--white)}

.slide_btn::before {
top: 0;
left: 0;
border-bottom-color: transparent;
border-right-color: transparent;
border-top-color: var(--white);
border-left-color: var(--white)}

.slide_btn:hover:after, .slide_btn:hover:before {width: 102%;height: 102%}

.slide_btn i{margin-right:8px}

.bubble {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.2));
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate}

@keyframes floatUpRight {
0% {transform: translate(0, 0) scale(1);opacity: 0.3}
100% {transform: translate(30px, -120px) scale(1.2);opacity: 0.8}}

@keyframes floatUpLeft {
0% {transform: translate(0, 0) scale(1);opacity: 0.3}
100% {transform: translate(-30px, -120px) scale(1.2);opacity: 0.8}}

@keyframes pulse {
0%, 100% {transform: scale(1);opacity: 0.6}
50% {transform: scale(1.4);opacity: 1}}

@keyframes floatSideways {
0%, 100% {transform: translateX(0) translateY(0)}
50% {transform: translateX(20px) translateY(-40px)}}

@keyframes bubbleFall {
0% {transform: translateY(-20px) scale(0.7);opacity: 0.5}
50% {transform: translateY(150px) scale(1.2);opacity: 1}
100% {transform: translateY(300px) scale(0.7);opacity: 0.5}}
/******************** slide ********************/


/******************** general ********************/
.head_title {
margin: 30px auto 10px auto;
font-weight: bold;
color: var(--base);
text-align: center}
.head_hr {margin:0 auto;display: block}

.i_about_block, .p_block_contact_us, .p_block_about_us {
width: 100%;
margin:20px auto;
padding:0 20px 0 20px;
display: block;
position: relative}

.hr {
border: none;
height: 1px;
margin: 2.5rem 0;
background: linear-gradient(to right, transparent, #00b894, transparent);
position: relative}

.hr::after {
content: "★";
position: absolute;
top: -0.7rem;
left: 50%;
transform: translateX(-50%);
background: #fff;
padding: 0 0.5rem;
color: #00b894;
font-size: 1.2rem}
/******************** general ********************/


/******************** features ********************/
.block_features, .block_security {
margin:20px auto;
padding:0 20px 0 20px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px}

.features {
height: 180px;
margin:10px auto;
padding: 20px 25px;
position: relative;
overflow: hidden;
text-align: center;
background-color: var(--white);
border-radius: 12px;
box-shadow: var(--shadow);
transition: all 0.5s ease-in-out}

.features.ico:before{
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 0;
position:absolute;
user-select: none;
font-size:140px;
color: #003f7d11;
transition: all 0.5s ease-in-out}

.features.free{
font-style: normal;
font-variant: normal;
line-height: 1;
text-rendering: auto;
font-family: "Font Awesome 6 Free";
font-weight: 900}

.features.user::before {content: "\f21b"}
.features.swap::before {content: "\f021"}
.features.transaction::before {content: "\e528"} 
.features:hover {box-shadow: none;transition: all 0.5s ease-in-out}
.features:hover.ico:before {color:#003f7d3e;transition: all 0.5s ease-in-out}
.features_title {margin: 5px auto 15px auto;color: var(--base);font-weight:bold}
.features p {line-height: 2.2;text-align: justify;font-weight:normal}
.features span{font-family:tahoma}
/******************** features ********************/


/******************** bg efect ********************/
.bg_efect_1{
width: 100%;
height: 100%;
position: relative;
top: 0;
left: 0;
overflow: hidden}

.bg_efect_1 span{
width: 10px;
height: 10px;
position: absolute;
display: block;
list-style: none;
animation: bg_efect_1 20s linear infinite;
bottom: -150px}

.bg_efect_1 span:nth-child(1){
width: 25px;
height: 25px;
background:var(--purple);
left: 25%;
animation-delay: 0s}

.bg_efect_1 span:nth-child(2){
width: 30px;
height: 15px;
background:var(--blue);
left: 10%;
animation-delay: 2s;
animation-duration: 12s}

.bg_efect_1 span:nth-child(3){
width: 25px;
height: 25px;
border-radius: 50%;
background:var(--green);
left: 70%;
animation-delay: 4s}

.bg_efect_1 span:nth-child(4){
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid var(--red);
left: 40%;
animation-delay: 0s;
animation-duration: 18s}

.bg_efect_1 span:nth-child(5){
width: 25px;
height: 25px;
background:var(--orange);
left: 65%;
animation-delay: 0s}

.bg_efect_1 span:nth-child(6){
width: 30px;
height: 15px;
background:var(--yellow);
left: 75%;
animation-delay: 3s}

.bg_efect_1 span:nth-child(7){
width: 25px;
height: 25px;
border-radius: 50%;
background:var(--base);
left: 35%;
animation-delay: 7s}

.bg_efect_1 span:nth-child(8){
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid var(--black);
left: 50%;
animation-delay: 15s;
animation-duration: 45s}

.bg_efect_1 span:nth-child(9){
width: 25px;
height: 25px;
background:var(--purple);
left: 20%;
animation-delay: 2s;
animation-duration: 35s}

.bg_efect_1 span:nth-child(10){
width: 30px;
height: 15px;
background:var(--blue);
left: 85%;
animation-delay: 0s;
animation-duration: 11s}

@keyframes bg_efect_1 {
0% {transform: translateY(0) rotate(0deg);opacity: 0.3}
100% {transform: translateY(-1000px) rotate(720deg);opacity: 0}}
/******************** bg efect ********************/


/******************** index about us ********************/
.i_about_block img {
width: 50%;
height: auto;
float: left;
margin-top: -7%;
display: inline-block}

.i_about_block_txt {width: 50%;display: inline-block;margin-top: 7%}
.i_about_block_txt h3{margin-bottom:20px}
.i_about_block_txt p{text-align:justify;line-height:2.5}
.i_about_block a {color: var(--blue)}
/******************** index about us ********************/


/******************** security ********************/
.security {
padding: 10px;
background-color: var(--white);
border-radius: 12px;
text-align: center}

.icon_title {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px}

.icon_title video {width: 60px}

.icon_title p {
margin-right: 15px;
font-weight:bold;
color: var(--base)}

.security > p {text-align: right;color: var(--black)}
/******************** security ********************/


/******************** footer ********************/
footer {
background-color: var(--base);
color: var(--white) ;
padding: 10px 0;
text-align: center;
border-top: 1px solid var(--base)}
/******************** footer ********************/


/******************** header page ********************/
.header_page {
width: 100%;
height: 80px;
display:block;
position:relative;
background-color: var(--base);
color: var(--white);
margin:0 auto 20px auto;
text-align:center;
padding-top: 20px;
font-weight:bold}

.header_page:before{
width: 100%;
height: 100%;
top: 0;
right: 0;
content: "";
background: url(../img/header-page.png) no-repeat center;
position: absolute}
/******************** header page ********************/


/******************** contact us ********************/
.p_block_contact_us_screen { 
width:90%;
margin:0 auto;
text-align:center;
position: relative;
background:var(--white);
border-radius: 15px}

.p_block_contact_us_screen:after {
top: 0;
left: 20px;
right: 20px;
bottom: 0;
content: '';
display: block;
position: absolute;
border-radius: 15px;
box-shadow: 0 20px 40px rgba(0, 0, 0, .4);
z-index: -1}

.p_block_contact_us_screen_header {
display: block;
text-align:left;
padding: 10px 20px;
background: var(--black);
border-top-left-radius: 15px;
border-top-right-radius: 15px}

.p_block_contact_us_screen_header_btn {
width: 8px;
height: 8px;
display: inline-block;
margin-right: 3px;
border-radius: 8px}

.p_block_contact_us_screen_header_btn.close {background-color: var(--red)}
.p_block_contact_us_screen_header_btn.maximize {background-color: var(--yellow)}
.p_block_contact_us_screen_header_btn.minimize {background-color: var(--green)}
.p_block_contact_us_screen_body {display: flex}
.p_block_contact_us_screen_body_item {flex: 1;padding: 50px}
.p_block_contact_us_screen_body_item.left {display: flex;flex-direction: column}
.p_block_contact_us_screen_body_title {
margin-top:40px;
display: flex;
flex-direction: column;
position: relative;
text-align: justify}

.contact_us_input_block input, .contact_us_input_block textarea{
height: 40px;
flex: 1;
padding-bottom:10px;
background-color: transparent;
border: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.30)}

.p_block_contact_us_screen_body textarea {height: 100px}

.p_block_contact_us_screen_body button {
width: 30%;
height: 40px;
padding:15px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-color: var(--base);
color: var(--white);
border: none;
border-radius: 10px;
cursor: pointer;
box-shadow: var(--shadow)}

.p_block_contact_us_screen_body button i{margin-left:8px}

.contact_us_input_block {
display: flex;
gap: 20px;
flex-wrap: wrap;
margin:20px auto}
/******************** contact us ********************/


/******************** about us ********************/
.p_block_about_us{
width:98%;
padding:30px;
background-color: var(--white);
box-shadow: var(--shadow);
border-radius:12px}

.p_block_about_us p {line-height: 2.7}
/******************** about us ********************/


/******************** faqs ********************/
.accordion {
position: relative;
padding:10px;
border-radius: 10px;
background-color:var(--white)}

.accordion_box {border-bottom: 1px solid var(--base)}
.accordion_box:last-child {border-bottom:none}
.accordion_title .accordion button{padding:1%}

.accordion .accordion-button {
width: 100%;
position: relative;
display: block;
text-align: right;
padding: 1em 0;
color: var(--black);
font-weight: bold;
border: none;
background: none}

.accordion .accordion-button:hover, .accordion .accordion-button:focus, .accordion .accordion-button:hover::after, 
.accordion .accordion-button:focus::after {cursor: pointer;color: var(--base)}

.accordion_icon {
display: inline-block;
position: absolute;
top: 18px;
left: 0;
width: 22px;
height: 22px;
border: 1px solid;
border-radius: 20px}

.accordion_icon::before {
display: block;
position: absolute;
content: '';
top: 9px;
left: 5px;
width: 10px;
height: 2px;
background: currentColor}

.accordion_icon::after {
display: block;
position: absolute;
content: '';
top: 5px;
left: 9px;
width: 2px;
height: 10px;
background: currentColor}

.accordion button[aria-expanded='true'] {color: var(--base)}
.accordion button[aria-expanded='true'] .accordion_icon::after {width: 0}

.accordion button[aria-expanded='true'] + .accordion_content {
opacity: 1;
max-height: 9em;
transition: all 500ms linear;
will-change: opacity, max-height}

.accordion_content {
opacity: 0;
max-height: 0;
overflow: hidden;
-webkit-transition: opacity 400ms linear, max-height 500ms linear;
transition: opacity 500ms linear, max-height 500ms linear;
will-change: opacity, max-height}

.accordion_content p {margin-bottom:10px;text-align:right}
/******************** faqs ********************/


/******************** check net ********************/
#check_net {
height: 100vh;
top: 0;
left: 0;
right: 0;
margin:0 auto;
padding-top:25%;
position: fixed;
text-align:center;
font-weight:bold;
background-color: rgba(0, 0, 0, 0.8); 
color: var(--white2);
z-index: 20;
display: none}
/******************** check net ********************/


/******************** new & import wallet ********************/
.p_login_main {
width: 100%;
height:100vh;
display: flex;
text-align: center}

.p_login_right {width: 50%}

.bg_gradient{
overflow: auto;
background: linear-gradient(315deg, rgba(26, 188, 156, 0.70) 3%, rgba(46, 204, 113, 0.70) 38%, rgba(155, 89, 182, 0.70) 68%, rgba(255,25,25,0.70) 98%);
animation: gradient 15s ease infinite;
background-size: 400% 400%;
background-attachment: fixed}

@keyframes gradient {
0% {background-position: 0% 0%}
50% {background-position: 100% 100%}
100% {background-position: 0% 0%}}

.bg_wave {
width: 200%;
height: 12em; 
bottom: 0;
left: 0;
position: fixed;
z-index: 1;
background: rgb(255 255 255 / 25%);
border-radius: 1000% 1000% 0 0;
animation: wave 10s -3s linear infinite;
transform: translate3d(0, 0, 0);
opacity: 0.3}

.bg_wave:nth-of-type(2) {
bottom: -1.25em;
animation: wave 18s linear reverse infinite;
opacity: 0.4}

.bg_wave:nth-of-type(3) {
bottom: -2.5em;
animation: wave 20s -1s reverse infinite;
opacity: 0.5}

@keyframes wave {
25% {transform: translateX(-25%)}
50% {transform: translateX(-50%)}
75% {transform: translateX(-25%)}}

.panel_login_right_title {
width: fit-content;
margin: 0 auto 20px auto;
padding: 0px 10% 5px 10%;
text-align: center;
display: block;
background-color: rgba(255, 255, 255, 0.80);
border-bottom-right-radius: 100%;
border-bottom-left-radius: 100%}

.p_login_right p {
padding-right: 20px;
padding-left: 20px;
text-align: right;
margin-top:30px;
color: var(--white)}

.p_login_input_main {
width: 45%;
margin: 15px auto;
padding-top: 18px;
display: block;
position: relative}

.p_login_input_main.p1{margin-top:20%}
.p_login_input_main.p2 {margin-top: 5%;width: 75%}
.p_login_input_main.p2 input {padding-left: 30px}

.p_login_input {
width: 100%;
padding:5px;
border: none;
border-bottom: 2px solid var(--black);
color: var(--white);
background: transparent;
transition: border-color 0.5s}

.p_login_input:placeholder-shown ~ .p_login_input_label {top: 15px}

.p_login_input_label {
top: 0;
position: absolute;
display: block;
color: var(--black);
transition: 0.5s}

.p_login_input:focus {border-bottom: 2px solid var(--base)}

.p_login_input:focus ~ .p_login_input_label {
top: 0;
position: absolute;
display: block;
color: var(--base);
transition: 0.5s}

.paste_otp {
left: 0px;
top: 50%;
position: absolute;
transform: translateY(-50%);
cursor: pointer;
color: var(--black);
transition: color 0.3s;
user-select: none}

.p_login_btn1 {
width: 45%;
height: 40px;
margin:30px auto;
z-index: 2;
position: relative;
display:block;
border: 2px solid var(--base);
border-radius:10px;
background: transparent;
box-shadow:var(--shadow);
cursor: pointer;
transition: all 0.5s ease;
overflow: hidden}

.p_login_btn1:after {
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
content: " ";
position: absolute;
transition: all 0.5s ease}

.p_login_btn1:hover {color: var(--white)}
.p_login_btn1:hover:after {transform: scale(2) rotate(180deg);background: var(--base)}

.p_login_btn2 {
width: 20%;
height: 40px;
z-index: 2;
margin:20px 10px;
position: relative;
display:inline-block;
border:none;
border-radius:12px;
color:var(--white);
background-color: var(--blue);
cursor: pointer;
transition: all 0.5s ease;
overflow: hidden}

.p_login_btn2:after {
width: 100%;
height: 100%;
border-radius:12px;
top: 0;
left: 0;
z-index: -1;
position: absolute;
content: " ";
transition: all 0.5s ease;
transform: scale(.1)}

.p_login_btn2:hover:after {background-color: var(--black);transform: scale(1)}
.p_login_btn2 img{width: 23px;vertical-align: middle;margin-left: 8px}

.p_login_left {
width: 50%;
background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url(../img/background.webp);
background-size: cover;
background-repeat: round;
float: left}

.p_login_left p {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: var(--white)}

.p_login_rule{width:95%}

.p_login_rule_label {
display: flex;
align-items: center;
margin-bottom: 20px;
color: var(--white)}

.rule_checkbox {
width: 20px;
height: 20px;
margin-left:10px;
appearance: none;
border: 2px solid var(--base);
border-radius: 4px;
background-color: transparent;
position: relative;
cursor: pointer;
transition: all 0.4s ease-in-out}

.rule_checkbox:checked {background-color: var(--base);border-color: var(--white)}

.rule_checkbox:checked::after {
left: 3px;
top: -3px;
content: '✔';
color: var(--white);
position: absolute}

.p_new_block_Phrases {
width: 90%;
margin: 10px auto;
padding:8px;
display: block;
text-align: center;
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
direction: ltr}

.Phrase {
width: 31%;
display: inline-block;
margin: 5px 3px;
padding: 5px;
color:var(--silver);
text-align: left;
border: 1px solid var(--white2);
border-radius:5px}

.Phrase span {color:var(--white);margin-left:8px}

.p_login_warning_box {
max-width: 600px;
margin: 20px auto;
padding: 5px 10px;
background-color: var(--white2);
border: 1px solid var(--yellow);
color: var(--yellow);
border-radius: 8px;
display: flex;
justify-content: space-between;
align-items: center;
position: relative}

.p_login_warning_icon {margin-left: 8px;color: var(--yellow)}

.p_login_warning_text {
flex: 1;
text-align: right;
padding-left: 12px;
color: var(--yellow)}
/******************** new & import wallet ********************/


/******************** header wallet ********************/
.header_wallet {
height: 80px;
width: 100%;
position: sticky;
top: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
background: linear-gradient(90deg, rgb(255, 1, 150) 0%, rgb(124, 51, 185) 100%);
mask-repeat: repeat, repeat;
mask-clip: border-box, border-box;
mask-origin: border-box, border-box;
mask-position: 0px center, 0% 0%;
mask-size: 100% 100%, auto;
mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='56' height='44' width='100%' rx='22' ry='22' border='none'/></svg>"), linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));
mask-composite: exclude;
z-index: 1000}

.header_wallet.scrolled {
height: 80px;
padding: 0 20px;
background: linear-gradient(90deg, rgb(255, 1, 150) 0%, rgb(124, 51, 185) 100%);
mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='56' height='44' width='100%' rx='22' ry='22' border='none'/></svg>"), linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));
mask-composite: exclude;
mask-repeat: repeat, repeat;
mask-clip: border-box, border-box;
mask-origin: border-box, border-box;
mask-position: 0px center, 0% 0%;
mask-size: 100% 100%, auto}

.logo_right, .icons_left {
margin-top: -26px;
display: flex;
align-items: center;
height: 100%}

.logo_right img {
height: 50px;
object-fit: contain;
display: block}

.icons_left {
display: flex;
gap: 15px;
align-items: center; 
height: 100%}

.icon_btn {
background: transparent;
cursor: pointer;
padding: 5px;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
transition: background-color 0.3s ease;
border-radius: 6px;
height: 100%}
/******************** header wallet ********************/


/******************** sidebar wallet ********************/
main{padding:0 20px 0 20px}

.sidebar_wallet {
width: 22%;
padding: 10px;
margin-left:15px;
position: fixed;
text-align: center;
border-radius: 20px;
background-color: var(--white)}

.sidebar_wallet_item, .sidebar_wallet_submenu_item {
width: 95%;
margin: 15px auto;
padding:8px 20px 8px 0;
display: block;
text-align: right;
border-radius:20px;
background-color:transparent}

.sidebar_wallet_item img, .sidebar_wallet_submenu_item img{
width:25px;
height:25px;
vertical-align: middle;
margin-left:10px}

.sidebar_wallet_item.active {background-color: var(--silver)}
.sidebar_wallet_item.active:hover {background-color: var(--silver)}
.sidebar_wallet_item:hover, .sidebar_wallet_submenu_item:hover{background-color:var(--white2);cursor:pointer}
.sidebar_wallet_submenu {max-height: 0;overflow: hidden;transition: max-height 0.3s ease}
.sidebar_wallet_submenu.open {max-height: 300px}

.arrow_icon {
margin-left: 20px;
margin-top: 5px;
float: left;
transition: transform 0.3s ease}

.arrow_icon.rotate {transform: rotate(-90deg);}
/******************** sidebar wallet ********************/


/******************** general panel ********************/
.panel_title {
width: fit-content;
margin:-20px auto 20px auto;

padding: 0px 10% 5px 10%;
text-align: center;
display: block;
color:var(--white);
background-color:var(--base);
border-bottom-right-radius: 100%;
border-bottom-left-radius: 100%;
margin-top: -20px;}
/******************** general panel ********************/


/******************** balance & price wallet ********************/
.block_wallet_left {
width: 75.5%;
margin-right: 24%;
display: inline-block;
text-align: center}

.block_wallet_balance, .block_wallet_price {
width: 100%;
padding: 20px;
margin: 0px 0 20px 0;
text-align: center;
float: right;
border-radius: 12px;
background-color: var(--white)}

.block_wallet_balance_left{float:left}
.block_wallet_balance_right {float: right}
.block_wallet_balance strong{margin-left:5px}

.crypto-list {display: grid;grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));gap: 15px}

.wallet_card {
padding: 12px;
background-color: var(--white2);
border-radius: 12px;
border: 1px solid #e0e0e0;
box-shadow: 0 2px 8px rgba(0,0,0,0.04)}

.wallet_card_header {
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 12px}

.wallet_card_header img {width: 40px;height: 40px}
.wallet_card button{background-color: transparent;border: none;cursor:pointer}

.name .fa {font-family:vazir;color: var(--black);font-weight: bold}
.name .en {font-size: 0.85rem;color: #666}
.wallet_card_block_value .label {font-size: 0.8rem;color: #999}

.wallet_card_block_value {
width:100%;
margin:5px auto;
display: inline-block;
padding: 5px;
background-color: #f9f9f9;
border-radius: 6px}

.wallet_card_block_value_right {float: right;direction:rtl}
.wallet_card_block_value_left {float: left;direction: ltr}
.wallet_card_block_value_center{text-align:center;direction:ltr}

#searchModal {
width:20%;
top: 20%;
right: 50%;
position: fixed;
background-color: var(--white2);
padding: 12px;
border-radius: 12px;
box-shadow: 0 6px 20px rgba(0,0,0,0.15);
z-index: 99;
display: none}

#searchModal input {
width: 100%;
padding: 5px;
background-color:transparent;
border: none;
border-bottom: 1px solid var(--black);
text-align:center}
/******************** balance & price wallet ********************/


/******************** footer app ********************/
.footer_app {
width: 100%;
height: 60px;
bottom: 0;
left: 50%;
transform: translateX(-50%);
display: flex;
position: fixed;
background-color: var(--white);
border-top: 1px solid #ddd;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
justify-content: space-around;
align-items: center;
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1)}

.footer_item {text-align: center;cursor:pointer}
.footer_item img {width:22px;height:22px}

.footer_item span {
margin-top: -5px;
display: block;
font-size: 12px;
color: var(--black)}
/******************** footer app ********************/


/******************** modal setting ********************/
.overlay {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
pointer-events: none;
transition: opacity 0.5s ease;
z-index: 998}

.overlay.active {opacity: 1;pointer-events: auto}

.modal_setting {
height: 50vh;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
position: fixed;
background: var(--white2);
border-radius: 20px 20px 0 0;
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
transform: translateY(110%);
transition: transform 0.5s ease;
z-index: 999}

.modal_setting.active {transform: translateY(0%)}

.modal_setting i{
float:left;
color: var(--red);
cursor: pointer;
font-size: 30px}

.modal_setting_menu {display: flex;flex-direction: column;align-items: flex-start}

.modal_setting_menu_item {
width: 100%;
margin: 15px 0;
padding-bottom: 5px;
display: flex;
justify-content: flex-start;
gap: 10px;
align-items: center;
text-align: right;
color: var(--black);
border-bottom: 1px solid #dfdfdf;
cursor:pointer}

.modal_setting_menu_item img {width: 30px;height: 30px;object-fit: contain}
/******************** modal setting ********************/


/******************** swap ********************/
.p_swap_block_input {
width: 45%;
margin:40px auto;
display: block;
position: relative}

.p_swap_block_input input {
width: 100%;
padding:5px;
border: none;
text-align:center;
border-bottom: 2px solid var(--black);
color: var(--black);
background-color: transparent;
cursor:pointer}

#amount-box {margin-top: 1rem;display: none}
#btn_swap {display: none}

.paste_amount {
left: 0px;
top: 10%;
position: absolute;
transform: translateY(-50%);
background-color: var(--base);
padding:3px 8px;
color: var(--white);
border-radius:7px;
cursor: pointer}

.p_swap_block_input.search_coin {width: 70%}

.p_swap_block_input .search-icon, .p_swap_block_input .clear-icon {
top: 40%;
position: absolute;
transform: translateY(-50%);
color: var(--black);
cursor: pointer}

#coin-search {padding: 8px 0 8px 0}
.p_swap_block_input .search-icon {left: 8px;pointer-events: none}
.p_swap_block_input .clear-icon {left: 30px;display: none}

.coin_modal {
width: 100%;
height: 100%;
top: 0;
left: 0;
display: none;
position: fixed;
background-color: rgba(0, 0, 0, 0.6);
justify-content: center;
align-items: center;
z-index: 999;
animation-duration: 0.3s}

.coin_modal.show {display: flex;animation-name: fadeIn}
.coin_modal.hide {animation-name: fadeOut}

.modal_content {
width: 30%;
height: 60vh;
padding:10px;
background-color: var(--white);
border-radius: 12px;
overflow-y: auto;
animation: scaleIn 0.3s ease-in-out}

@keyframes fadeIn {from {opacity: 0}to {opacity: 1}}
@keyframes fadeOut {from {opacity: 1}to {opacity: 0}}
@keyframes scaleIn {from {opacity: 0;transform: scale(0.9)}to {opacity: 1;transform: scale(1)}}

.coin-item {
padding: 10px;
display: flex;
align-items: center;
gap: 12px;
cursor: pointer}

.coin-item:hover {background: var(--silver);border-radius:7px}
.coin-item img {width: 25px; height: 25px}

.loader-box {
height: 300px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center}

.loader {
width: 40px;
height: 40px;
border: 4px solid var(--silver);
border-top: 4px solid var(--base);
border-radius: 50%;
animation: spin 1s linear infinite}

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

.paper {
width:50%;
margin:20px auto;
padding:25px;
position:relative}

.paper:before, .paper:after {
content: "";
height: 98%;
position: absolute;
width: 100%;
z-index: 1}

.paper:before {
background: var(--base);
box-shadow: 0 0 8px rgba(0,0,0,0.2);
left: -5px;
top: 4px;
border-radius:10px;
transform: rotate(-2.5deg)}

.paper:after {
background: var(--base);
box-shadow: 0 0 3px rgba(0,0,0,0.2);
right: -3px;
top: 1px;
border-radius:10px;
transform: rotate(1.4deg)}

.paper p {
color: black;
z-index: 2;
position: relative;
text-align: center;
color: var(--white)}
/******************** swap ********************/


/******************** transactions ********************/
.p_transactions_block_no {
width: 30%;
height: 100px;
display:block;
margin:20px auto;
position: relative}

.svg_circle {width: 100%;height: 100%}

.svg_icon {
width: 40px;
height: 40px;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
stroke: #003f7d;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none}

.p_transactions_block_no_txt {color: var(--black);margin: 10px auto}
.p_transactions_block_no_txt p{margin-top:10px}
.p_transactions_table {display: flex;flex-direction: column;gap: 16px}

.p_transactions_table_row {
padding: 10px;
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: space-between;
align-items: center;
background-color: var(--white2);
border-radius: 12px;
box-shadow: 0 0 8px rgba(0,0,0,0.05)}

.p_transactions_table_row_right {
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0}

.p_transactions_table_row_icon {
width: 40px;
height: 40px;
margin-bottom: 6px;
border-radius: 50%;
background-size: 22px;
background-position: center;
background-repeat: no-repeat;
background-color: #003f7da7}

.p_transactions_table_row_icon.send {background-image: url('../img/transactions-send.png')}
.p_transactions_table_row_icon.receive {background-image: url('../img/transactions-receive.png')}
.p_transactions_table_row_icon.swap {background-image: url('../img/transactions-swap.png')}

.p_transactions_table_row_des {
padding: 0 8px;
flex: 1;
color: #333;
text-align: center;
word-break: break-word;
line-height: 2}

.p_transactions_table_row_date {padding-left:10px;text-align: left;color: #666}
.p_transactions_table_row_date span {display: block;font-size: 12px;color: #aaa}
/******************** transactions ********************/


/******************** crypto ********************/
.block_wallet_price .block_crypto {width: 100%;padding:0px 20px 0px 20px}

.block_crypto_header {
margin-bottom: 25px;
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap}

.block_crypto_header img {width: 50px;height: 50px}
.block_crypto_header .info p {text-align:right;line-height:inherit}
.block_crypto_header .info span, .block_crypto_prices_row span.label{color: #777}
.block_crypto_balance {text-align: center;margin-bottom: 20px}
.block_crypto_prices {margin-bottom: 24px}
.block_crypto_prices_row {display: flex;justify-content: space-between;margin: 10px 0}
.block_crypto_prices_row span.value {font-weight: bold}

.block_crypto_actions {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap}

.block_crypto_actions form {display: contents}

.block_crypto_actions button {
padding: 10px 15px;
color: var(--white);
background-color: var(--base);
flex: 1 1 45%;    
border: none;
border-radius: 12px;
cursor: pointer}

.block_crypto_actions button img{width:25px;vertical-align:middle;margin-left:10px}
.block_crypto_actions button:hover{opacity:0.8}
/******************** crypto ********************/

/******************** crypto receive ********************/
.crypto_receive_header h3 {color: #222}
.crypto_receive_header span {color: #777}

.network-type {
padding: 6px 12px;
margin:5px auto;
color: var(--black);
background-color: var(--silver);
border-radius: 12px;
display: inline-block}

.crypto_receive_qr {display: flex;justify-content: center;margin:15px auto}

.crypto_receive_qr img {
width: 220px;
height: 220px;
border-radius: 12px;
border: 1px solid #eee}

.crypto_receive_wallet_address {
padding:8px;
margin-bottom:10px;
position: relative;
word-break: break-all;
letter-spacing:2px;
text-align: center;
direction: ltr;
font-family:Tahoma;
background-color: #f5f7fa;
color: var(--black);
border-radius: 12px}
/******************** crypto receive ********************/


/******************** show recovery phrases ********************/
.show_Phrases {
width: 90%;
margin: 10px auto;
padding: 8px;
display: block;
text-align: center;
background: var(--white);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
direction: ltr}

.show_Phrases .Phrase span {color: var(--black)}
/******************** show recovery phrases ********************/


/******************** noti toast ********************/
.noti_toast {
bottom: 20px;
left: 20px;
padding: 8px 10px;
position: fixed;
background-color: var(--blue);
color: var(--white);
border-radius:12px;
opacity: 0;
pointer-events: none;
animation: toastInOut 3s ease-out forwards}

@keyframes toastInOut {
0% {opacity: 0; transform: translateY(20px)}
10% {opacity: 1; transform: translateY(0)}
90% {opacity: 1}
100% {opacity: 0; transform: translateY(20px)}}
/******************** noti toast ********************/


/******************** noti ********************/
.box_notification {
max-width: 360px;
top: 20px;
left: 20px;
margin: 0;
padding: 15px 20px 15px 60px;
display: flex;      
align-items: center;
position: fixed;
z-index: 1000;
gap: 12px;    
border-radius: 12px;
color: var(--white);
overflow: hidden;
box-shadow: 0 12px 30px rgba(0,0,0,0.15);
animation: slideIn 0.5s ease-out forwards, fadeOut 0.5s ease-in 4.5s forwards}

.box_notification::before {
top: -20px;
left: -20px;
content: '';
position: absolute;
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 120px;
color: rgba(255,255,255,0.20);
pointer-events: none;
z-index: 0}

.box_notification .noti_main_icon {
top: 16px;
left: 20px;
position: absolute;
color: var(--white);
z-index: 2}

.box_notification.success {background-color: var(--green)}
.box_notification.success::before {content: '\f058'}
.box_notification.success .noti_main_icon {content: '\f058'}
.box_notification.error {background-color: var(--red)}
.box_notification.error::before {content: '\f06a'}
.box_notification.error .noti_main_icon {content: '\f06a'}

.box_notification p {
margin: 0;
z-index: 2;
line-height: 1.6;
flex: 1}

@keyframes slideIn {
from {opacity: 0;transform: translateY(-20px)}
to {opacity: 1;transform: translateY(0)}}
@keyframes fadeOut {
from {opacity: 1;transform: translateY(0)}
to {opacity: 0;transform: translateY(-20px)}}
/******************** noti ********************/


/******************** 404 ********************/
.body_404 {
height: 100vh;
background-color: #f4f7fb;    
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 20px}

.container {
text-align: center;
max-width: 600px;
position: relative;
animation: fadeIn 1.2s ease-out}

@keyframes fadeIn {
from {opacity: 0; transform: translateY(30px)}
to {opacity: 1; transform: translateY(0)}}

.logo_404 {margin-bottom: 1rem;animation: float 3s ease-in-out infinite}
@keyframes float {0%, 100% {transform: translateY(0)}50% {transform: translateY(-10px)}}

.code {
font-size: 6rem;
font-weight: 900;
color: #2d89ef;
animation: pulse 1.5s infinite}

@keyframes pulse {0%, 100% {transform: scale(1)}50% { transform: scale(1.05)}}
.title_404 {font-size: 1.8rem;margin-top: 1rem;color: #222}
.desc_404 {font-size: 1rem;color: #555;margin-top: 0.5rem}

.btn_404 {
display: inline-block;
margin-top: 2rem;
background: #2d89ef;
color: white;
padding: 12px 28px;
border: none;
border-radius: 10px;
text-decoration: none;
font-weight: bold;
font-size: 1rem;
transition: all 0.3s ease;
animation: fadeIn 2s ease forwards}

.bubble {
position: absolute;
width: 15px;
height: 15px;
background-color: #2d89ef22;
border-radius: 50%;
animation: bubble 8s infinite ease-in-out}

.bubble:nth-child(1) {top: 20%; left: 10%; animation-delay: 0s}
.bubble:nth-child(2) {top: 40%; left: 80%; animation-delay: 2s}
.bubble:nth-child(3) {top: 70%; left: 50%; animation-delay: 4s}
@keyframes bubble {
0% { transform: translateY(0) scale(1); opacity: 0.4}
50% { transform: translateY(-40px) scale(1.3); opacity: 0.8}
100% { transform: translateY(0) scale(1); opacity: 0.4}}
/******************** 404 ********************/