@charset "utf-8";

*{margin:0px; padding:0px;}

@import url('https://fonts.googleapis.com/css2?family=Onest:wght@100..900&display=swap');

html{overflow-x: hidden;}
body{overflow-x: hidden; font-size: 15px;  color:#ADADAD; font-family: "Onest", sans-serif; background-color: #0a0a0b ; font-weight: 400;}
a, a:active, a:focus, a:hover {outline: none; transition: all 0.5s ease; text-decoration: none;}
button, button:active, button:focus, button:hover {outline: none; transition: all 0.5s ease; text-decoration: none;}

.overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100000000;}
.overlay .overlayDoor:before, .overlay .overlayDoor:after {content: ""; position: absolute; width: 50%; height: 100%; background: #000; transition: 0.5s; transition-delay: 0.8s; }
.overlay .overlayDoor:before {left: 0; }
.overlay .overlayDoor:after {right: 0;}
.overlay.loaded .overlayDoor:before {left: -50%;}
.overlay.loaded .overlayDoor:after {right: -50%;}
.overlay.loaded .overlayContent {opacity: 0; margin-top: -15px;}
.overlay .overlayContent {position: relative; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column;	transition: 0.5s}
.overlayContent img{width:220px;}

.pb-5 {padding-bottom: 4rem !important;}
.pt-5 {padding-top: 4rem !important;}

.fw-400{font-weight: 400 !important;}
.fw-500{font-weight: 500 !important;}
.fw-600{font-weight: 600 !important;}
.fw-700{font-weight: 700 !important;}
.fw-800{font-weight: 800 !important;}
.fw-900{font-weight: 900 !important;}

.font-10{font-size: 10px !important;}
.font-11{font-size: 11px !important;}
.font-12{font-size: 12px !important;}
.font-13{font-size: 13px !important;}
.font-14{font-size: 14px !important;}
.font-15{font-size: 15px !important;}
.font-16{font-size: 16px !important;}
.font-17{font-size: 17px !important;}
.font-18{font-size: 18px !important;}
.font-19{font-size: 19px !important;}
.font-20{font-size: 20px !important;}
.font-21{font-size: 21px !important;}
.font-22{font-size: 22px !important;}
.font-23{font-size: 23px !important;}
.font-24{font-size: 24px !important;}
.font-25{font-size: 25px !important;}

.width-15{width: 15px;}
.width-20{width: 20px;}
.width-25{width: 25px;}
.width-30{width: 30px;}
.width-35{width: 35px;}
.width-40{width: 40px;}
.width-45{width: 45px;}
.width-50{width: 50px;}
.width-60{width: 60px;}
.width-70{width: 70px;}
.width-80{width: 80px;}
.width-90{width: 90px;}
.width-100{width: 100px;}

.btn_style{color: #fff; z-index: 1; position: relative; font-size: .875rem; border: none; border-radius: 8px;  text-align: center; display: inline-block;  padding: 11px 20px; background-image: linear-gradient(165.91deg,#503578,#3baaac 100.95%);}
.btn_style::before {content: "";z-index: -1;position: absolute; left: 1px; right: 1px; top: 1px; bottom: 1px; border-radius:.438rem; background:linear-gradient(180deg,#110f15,#0f1618); transition:opacity .2s ease-in-out;}
.btn_style:hover::before {opacity: .9;}

header { z-index: 111;}
.navbar-brand {margin-right: 10px; padding-top: 0px; padding-bottom: 0px; padding-right: 30px;}
.header_logo{width: 145px;}
.navbar-nav .nav-item .nav-link{color: #fff; font-weight: 500; }
.navbar-nav .nav-item .nav-link:hover{color:#afc9f0;}
.navbar-nav .nav-item .nav-link.active{color:#afc9f0;}
.navbar-nav .nav-item{margin-left: 10px;}
.navbar-collapse {flex-grow: unset;}
.navbar {padding: 0px;}
.navbar-toggler-icon {filter: brightness(0) invert(1);}
p{font-size: 15px;}
.container{max-width: 1300px;}

.heading_text h2{color:#fff;  font-size: 35px; font-weight: 600}
.heading_text p{color: #fff; margin-bottom: 0; font-size: 18px;}
.middle_heading{max-width: 800px; margin: auto; text-align: center;}
.heading_width{max-width: 850px;}

.plus_icon{position: relative;}
.plus_icon::after {content: ""; position: absolute; top: -.313rem; left: 50%; transform: translate(-50%); width: .625rem; height: .625rem; background-size: cover; background-repeat: no-repeat; background-image: url(../img/plus_icon.svg); z-index: 2;}
.plus_icon::before {content: ""; position: absolute; width: 100%; top: 0; left: 0; height: 1px; background-image: linear-gradient(90deg,transparent,hsla(0,0%,100%,.1),transparent);}
.hero-bg::after { content: ""; z-index: 0; width: 200px; height: 200px; background-color: #02e3f7; position: absolute; top: 55%; right: 20%; transform: translate(-50%,-50%); border-radius: 100%; filter: blur(100px); -webkit-filter:blur(100px); opacity: .25;}
.hero-bg::before {content: ""; position: absolute; z-index: 2; width: 52%; height: 100%; left: 0; top: 0; background: linear-gradient(197.12deg,rgba(10,10,11,.53) 32.87%,rgba(10,10,11,0) 71.3%);
    background: #030303fa;

filter: blur(50px);
-webkit-filter: blur(50px);
}
.sh-dashed::before {
    background-image: linear-gradient(90deg,transparent,transparent 50%,#0a0a0b 0,#0a0a0b),linear-gradient(90deg,transparent,hsla(0,0%,100%,.08),transparent);
    background-size: 20px 3px,100% 3px;
  }

.hero-bg {overflow: hidden; min-height: 650px; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-position: 50%; background-repeat: no-repeat; background-image: url(../img/hero-bg.svg);}
.d-flex-center {display: flex;justify-content: center; align-items: center;}
.hero-bg img {max-width: 1100px; position: relative;z-index: 1;}

.banner_content{z-index: 11; position: relative;}
.banner_section{padding-top: 100px; padding-bottom: 150px;}
.sh-tag {font-size: 17px; color: #07e6f9; margin-bottom: 1rem;}
.sh-tag-shadow{position: relative;}
.sh-tag-text {display: inline-block; position: relative; padding-right: 7.5rem;}
.sh-tag-text::after {right: 0;}
.sh-tag-text::after, .sh-tag-text::before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 6.25rem; height: 1px; background: linear-gradient(to right,#04e6f9,transparent); pointer-events: none;}
.sh-tag-text::before {left: 0; transform: translateY(-50%) scaleX(-1); display: none; }
.sh-tag-shadow::before { content: ""; width: 100px; height: 5px; background-color: #05e3f6; position: absolute;left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: -1; filter: blur(10px);  -webkit-filter: blur(10px); pointer-events: none;}
.sh-tag-text.right_open::before {display: block;}
.sh-tag-text.right_open {padding-left: 7.5rem;}
.gradient_text {background:linear-gradient(112.14deg,#476592 15.69%,#afc9f0 56.96%); background-clip: border-box; -webkit-background-clip: text;  -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; }
.banner_content{max-width: 550px;}
.banner_content h1{font-weight: 700; line-height: 1.1; font-size: 72px; color: #fff;}
.bg_line_box {background-image: url(../img/bg_line_box.png); background-position:45vw -1px; background-repeat: no-repeat;}
.middle_section_shadow::before {content: ""; height: 15.625rem; width: 4.25rem; position: absolute; left: 50%; top: -7rem; transform: translate(-50%); background: linear-gradient(165.91deg,#503578,#3baaac 100.95%); border-radius: 100%;filter: blur(142px);}
.middle_section_shadow.shadow_l::before{left: 0;}
.about_bg{background-image: url(../img/about-bg.svg);background-repeat: no-repeat;background-position:calc(50vw - 600px);}
.word-wrap {word-wrap:break-word;}

.t-icon{width: 150px; float: right; margin-right: 100px;}

.square_box_bg{background-color: #0e0f12; border-radius:1.45rem; overflow: hidden; background-image: url(../img/square_box_bg.svg); background-repeat: no-repeat; background-position: 0 0; position: relative;}
.success-box-shadow {width: 5rem; height: 5rem; border-radius:100%;background-color: #05e5f8;position: absolute;z-index: 1; filter: blur(50px); -webkit-filter:blur(50px); opacity: .75;}
.success-box-shadow.left {left: -5px; top: -5px;}
.success-box-shadow.right {right: -5px;bottom: 3rem;opacity: .4;}
.success-box-shadow.shadow_bg2{background-color: #f8b27f;}


.token-flip{animation-timing-function: ease-in-out;
animation-duration: 3s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-name: flip-r;}
@keyframes flip-r {
    0% { transform: perspective(400px) rotateY(0); }
    100% { transform: perspective(400px) rotateY(180deg); }
}
.token_m_img{max-width: 320px;}

.moving_border{position: relative; margin-bottom: 1px; margin-right: 1px;}
.moving_border::before{content: "";position: absolute; top: -1px; left: 0px; right: -1px; bottom: -1px; border-radius: 0px; background:linear-gradient(90deg, #000, #fff, #000, #fff); background-size: 300% 300%; z-index: -1;  animation:borderAnimation 4s linear infinite;}

@keyframes borderAnimation {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
   100% {background-position: 0% 50%;}
}
.moving_border_bg{background-color: #0a0a0b; padding: 45px 35px;}      
.moving_border_bg img{width: 85px; margin-bottom: 25px;}
.moving_border_bg h4{color: #fff; margin-bottom: 20px;}

.moving_border.bottom_b::before{bottom: 0;}
.moving_border.top_b::before{top: 0;}
.moving_border.r_borer_n::before{right: 0;}
.shadow_holder{min-height: 250px; z-index: -1; overflow: hidden; position: absolute; left: 0; right: 0; top: 0;}
.token_box::before{content: ""; opacity: 0.5; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-image: radial-gradient(at top center, #83ACF0AB 0%, #000000 100%); overflow: hidden;}
.token_box{position: relative; box-shadow: 0px 0.5px 3px 0px #FFFFFF inset; padding: 60px 50px;  overflow: hidden; border-radius: 20px;}
.coins-bg-1{position: absolute; top: 0; bottom: 0; right: 0; height: 100%;}

.token_box_width{ max-width: 600px;  z-index: 1; position: relative;}
.token_box_width h2{font-size: 40px; font-weight: 600; line-height: 1.1; color: #fff;}
.nft_image_box{max-width: 400px;}

.accordion-item {text-align: left; overflow: hidden; margin-bottom: 15px; position: relative; width: 100%;  display: block;  border-radius: 20px !important;  color: #ADADAD;}
.accordion-item{border: 1px solid #212126; background-color: #14151a;}
.faq_btn {background: transparent; font-size: 18px; font-weight: 500; text-align: left; color: #fff; display: block; width: 100%; border: none; padding: 22px; padding-right: 34px;}
.faq_btn::before {font-family: bootstrap-icons !important; position: absolute; right: 15px; top: 19px;}
.faq_btn.collapsed::before {content: "\f282";}
.faq_btn::before {content: "\f286";}
.accordion-collapse{ padding: 15px 15px; padding-top: 0;}
.accordion-button:not(.collapsed) {color: #fff;}
.accordion-item:last-child{border-bottom: none;}
.faq_box{max-width: 1100px; margin: auto;}
.accordion-item::before{content: ""; position: absolute; left: 0; top: 0; width: 4.688rem; height: 4.688rem; border-radius:60%; background-color: #437993; filter: blur(90px);-webkit-filter:blur(90px);}

.footer_logo {width: 210px;}
footer{background: linear-gradient(180deg,#101013,#0a0a0b);}
footer::before {content: "";position: absolute;width: 100%;top: 0;left: 0; height: 1px; background-image: linear-gradient(90deg,transparent,hsla(0,0%,100%,.1),transparent);}

.lien_tab.nav-tabs .nav-link {position: relative; font-size: 15px; border-bottom: 2px solid #76ADDF5C; padding: 10px 30px !important; background: transparent !important; border-radius: 0 !important;}
.lien_tab.nav-tabs .nav-link::before{content: ""; border: 1px solid #76ADDF5C; height: 12px; width: 12px;display: inline-block;position: absolute; left: 0; right: 0; bottom: -6px; margin:auto; border-radius: 50%; background: #0a0a0b;}
.lien_tab.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {color: #fff  !important; border-bottom: 2px solid #76ADDF ;}
.lien_tab.nav-tabs {border-bottom: none !important;}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {background: #fff; color: #000;}
.nav-tabs .nav-link {color: #ffffff80; border-radius: 5px; font-weight: 500; background: #1e1e1e;border: none;}
.nav-tabs {border-bottom: transparent; }
.lien_tab.nav-tabs .nav-link.active::before{border: 1px solid #76ADDF; background: #76ADDF;}

.road_map_box{background-size: 100% 100%; min-height: 80px; text-align: center; padding: 20px 20px; background-image: url("../img/faq_box.png"); background-position: center center; background-repeat: no-repeat}
.road_map_box_width{max-width: 900px; margin: auto}
.road_map_box span{display: block; margin-bottom: 10px; font-size: 10px; color: #848484;}
.road_map_box p{color: #fff; }

























