/* ================= CSS Default ================= */ 
@font-face {
    font-family: "Rajdhani-Bold";
    src: url('../fonts/Rajdhani-Bold.ttf') format('truetype');
}

@font-face {
    font-family: "Rajdhani-Light";
    src: url('../fonts/Rajdhani-Light.ttf') format('truetype');
}

@font-face {
    font-family: "Rajdhani-Medium";
    src: url('../fonts/Rajdhani-Medium.ttf') format('truetype');
}

@font-face {
    font-family: "Rajdhani-Regular";
    src: url('../fonts/Rajdhani-Regular.ttf') format('truetype');
}

:root{
    --text      : #c8c8c8;
    --title     : #3f434c;
    --border    : #282828;
	--dark		: #010d01;
	--shadow	: 0 4px 26px #256f5d;
    
	--black		: #000000;
    --green     : #01ffc3;
	--green_d	: #1f2a26;
    --white     : #ffffff;
	--yellow	: #fee54b;
	
	--gradient  : linear-gradient(to bottom, #00ffc3 0%, #0ee4ae 50%, #189075 100%);
    --gradient_2: linear-gradient(to bottom, #fff 0%, #b9b9b9 70%, #808080 100%);
	--gradient_3: linear-gradient(to left, #00ffc3 0%, rgba(255,255,255,0) 100%);
	--d_gradient: linear-gradient(to bottom, #181a19 0%, #101010 100%);
	--gradient_d: linear-gradient(to bottom, #32483c 0%, #1c1c1c 100%);
	--gradient_4: linear-gradient(to bottom, #182e23 0%, #0f0f0f 100%);
	
	--font-fallback: Roboto, Arial, -apple-system, BlinkMacSystemFont,
                   "Segoe UI", "Helvetica Neue", "Noto Sans", sans-serif,
                   "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
				   
	--font      : "Rajdhani-Regular", var(--font-fallback);
    --font_b    : "Rajdhani-Bold", var(--font-fallback);
	--font_m    : "Rajdhani-Medium", var(--font-fallback);
	--font_l    : "Rajdhani-Light", var(--font-fallback);
}

html{scroll-behavior:smooth;}
*{margin:0;padding:0;}
li{list-style-type:none;}
a, img{transition: all 0.3s ease;}
a:focus{outline:none;}
a, a:hover, a:active, a:link, a:visited{text-decoration:none;}
.padding0{padding:0;}
h1,h2,h3,h4,h5,h6{
    margin:0;
    font-weight:normal;
    line-height:1.25;
}

h1,h2,h3,h4{
    font-family:var(--font_b);
}

h5,h6{
    font-family:var(--font_m);
}

b, strong{
    font-family:var(--font_b);
    font-weight:normal;
}

body{
	background:var(--dark);
    font-family: var(--font);
    font-size:18px;
	color:var(--text);
	overflow-x:hidden;
}

p{
    line-height:1.85;
    margin-bottom:0;
}

.space_section{
	padding:70px 0;
}

/* ======================== CSS FULL ======================== */
/* ======================== HEADER ======================== */
.screen-darken {
    height: 100%;
    width: 0%;
    z-index: 30;
    position: fixed;
    top: 0;
    right: 0;
    opacity: 0;
    visibility: hidden;
    background-color: rgba(1, 255, 195, 0.4);
    transition: opacity 0.2s linear, visibility 0.2s, width 2s ease-in;
}

.screen-darken.active {
    z-index: 4;
    transition: opacity 0.3s, width;
    opacity: 1;
    width: 100%;
    visibility: visible;
}

#header{
	position:relative;
	z-index:9;
}

.sticky {
    width: 100%;
    position: fixed !important;
    top: 0;
	z-index:8;
    background:rgba(3, 22, 36, 0.9);
}

.sticky + main {
    padding-top: 70px;
}

.offcanvas-header{
    display: none;
}
.onlyMobile, .onlyPC {
	display:block;
}

.navbar-brand img{
	width:140px;
}

.navbar-nav .nav-item{
	margin-left:40px;
}

.navbar-nav .nav-item .nav-link{
	font-size:20px;
	font-family:var(--font_b);
	padding:7px 0;
	color:var(--white);
}

.navbar-nav .nav-item:last-child .nav-link{
	background:var(--gradient);
	border-radius:7px;
	padding-left:20px;
	padding-right:20px;
	color:var(--dark);
}

.navbar-nav .active .nav-link{
	color:var(--green);
	border-bottom:3px solid var(--green);
}

/* ======================== MAIN ======================== */
#countdown {
	display:flex;
	font-size: 25px;
	color: var(--white);
	text-align: center;
	justify-content:center;
}

.text-time-count{
	justify-content:center;
	font-size:30px;
	display:flex;
	text-align:center;
	background:var(--gradient_2);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom:10px;
}

.time-count{
	margin:0 5px;
	width:85px;
	line-height:1.1;
	border:1px solid var(--green);
	padding:20px 0;
	border-radius:6px;
	color:var(--white);
	font-size:17px;
	font-family:var(--font_m);
	display:block;
}

.time-count small{
	display:block;
	font-family:var(--font_b);
	color:var(--green);
	font-size:46px;
}

.bg-deepsea{
	background: url('../images/deepsea.jpg') no-repeat center top;
	background-size:100%;
	position:relative;
}

.bg-deepsea:after{
	position:absolute;
	content:'';
	background:url('../images/rada.png') no-repeat;
	width:500px;
	height:500px;
	left: -10%;
  	top: 36%;
	transform: translateY(-50%);
	animation: spin 10s linear infinite;
	z-index: 0;
	opacity: 0.4;
}

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

#highlight-top{
	margin-top:-70px;
	padding:230px 0 120px;
}

#highlight-top article h1{
	font-size:58px;
	line-height:1;
	color:white;
}

#highlight-top article h1 b{
	color:yellow;
}

#highlight-top article h1 span{
	font-size:70px;
	display:block;
	background:var(--gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

#highlight-top article h2{
	background:var(--gradient_2);
	font-family:var(--font_m);
	font-size:36px;
	margin:7px 0 15px;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

#highlight-top article p{
	font-size:21px;
	line-height:1.5;
}

#highlight-top h6{
	margin:20px 0;
	font-size:28px;
	color:var(--white);
}

#highlight-top h6 b{
	color:var(--yellow);
}

#highlight-top ul{
	padding-left:0;
}

.button{
	padding:13px 25px;
	border-radius:8px;
	border:1px solid transparent;
	font-family:var(--font_b);
	font-size:18px;
	margin-right:10px;
	transition:all 0.25s ease;
}

.button:hover{
	box-shadow:var(--shadow);
}

.btn-green{
	background:var(--gradient);
	color:var(--dark);	
}

.btn-green-outline{
	background:var(--green_d);
	color:var(--green);
	border:1px solid var(--green);
}

.border-gradient{
	display:block;
	width:90px;
	height:5px;
	background:var(--gradient_3) !important;
	margin-bottom:20px;
}

.group-button button{
	width:220px;
	padding:13px 10px;
}

.bg-group-img{
	position:relative;
}

#only-whale{
	position: absolute;
	bottom: -25%;
	left: -10%;
	z-index: 1;
	width: 500px;
}

#launch h2{
	font-size:46px;
	line-height:1.1;
	background:var(--gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

#launch h6{
	margin:20px 0;
	font-size:21px;
}

#launch h6 b{
	color:yellow;
	font-size:28px;
}

#launch p{
	font-size:20px;
}

#launch p b{
	color:var(--white);
}

#launch ul{
	padding-left:0;
	margin-top:30px;
}

#launch ul li,
#highlight-top ul li{
	margin-bottom:30px;
	font-size:18px;
	color:var(--white);
	font-family:var(--font_m);
	display: flex;
	align-items: center;
}

#launch ul li img,
#highlight-top ul li img{
	width:56px;
	height:56px;
	border:1px solid var(--border);
	border-radius:6px;
	margin-right:15px;
	padding:8px;
}

#highlight-top ul li img{
	border:1px solid var(--green);
}

#highlight-top ul li span{
	font-size:28px;
	color:var(--white);
}

#highlight-top ul li span b{
	color:yellow;
	font-size:38px;
	text-decoration:underline;
}

.hr-gradient, .hr-gradient-center{
	background:linear-gradient(to right, #fff 0%, #b9b9b9 70%, rgba(255, 255, 255, 0) 100%);
	border:0;
	height:1px;
	width:70%;
	margin:25px 0 30px;
	display:block;
	opacity:0.6;
}

.hr-gradient-center{
	margin:20px auto;
	background:linear-gradient(to left, rgba(255, 255, 255, 0) 0%, var(--green) 50%, rgba(255, 255, 255, 0) 100%);
}

#why-us{
	background:url('../images/bg-electric.png') no-repeat center left;
	background-size:646px;
}

#why-us .title-group{
	margin-top:60px;
}

#why-us .container, #faqs .container, #roadmap .container{
	position:relative;
	z-index:2;
}

#roadmap .container:after{
	background:url('../images/whale-2.jpg') no-repeat;
	width:450px;
	height:348px;
	opacity:0.8;
	top:auto;
	bottom:0 !important;
}

 #faqs .container:after{
	left:auto;
	right:-15%;
	top:10%;
 }

.title-group{
	margin-bottom:35px;
}

.title-group h6{
	background:var(--gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size:24px;
	font-family:var(--font_b);
}

.title-group h6 img{
	width:42px;
}

.title-group h5{
	margin-top:10px;
	line-height:1.5;
	font-size:21px;
}

.title-group h2{
	margin-top:10px;
	font-size:64px;
	background:var(--gradient_2);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height:1;
}

.title-group h2 b{
	font-family:var(--font_m);
	font-size:50px;
}

.item-box{
	box-shadow: inset 0 5px 27px rgba(0, 0, 0, 0.8);
	background:var(--d_gradient);
	border-radius:10px;
	border:1px solid var(--border);
	margin-bottom:20px;
	overflow:hidden;
}

.bg-shadow{
	padding:30px;
	background:	url('../images/border.png') no-repeat top right,
				var(--gradient_4);
	box-shadow: inset 0 5px 27px rgba(0, 0, 0, 0.8);
	height: 100%;
}

.bg-border{
	background: url('../images/border.png') no-repeat top right;
}

.pd-30{
	padding:30px;
}

.item-box h5{
	margin-bottom:10px;
	font-size:24px;
	font-family:var(--font_b);
	background:var(--gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	display:flex;
	align-items:center;
}

.item-box p{
	line-height:1.7;
}

.box-img{	
	background:var(--gradient);
	border:5px solid var(--dark);
	border-radius:10px;
	padding:10px;
	width:64px;
	height:64px;
	margin-bottom:20px;
}

.item-box .box-img{
	margin-bottom:0;
	margin-right:10px;
}

#tokenomic{
	background:url('../images/bg-whale.jpg') no-repeat top right;
	background-size:900px;
}

#tokenomic h2, #community h2{
	background:var(--gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

#tokenomic h2 b, #community h2 b{
	display:block;
	background:var(--gradient_2);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.txt-gradient{
	background:var(--gradient) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
}

.bg-gradient-dark{
	background:var(--d_gradient) !important;
}

#join-us{
	text-align:center;
}

#join-us .title-group h2 span{
	display:block;
}

#team{
	padding-top:80px;
}

#team article{
	position:relative;
	margin-bottom:30px;
}

#team article img{
	max-width:100%;
	border:1px solid var(--green);
	padding:4px;
}

#team article img:hover{
	filter:brightness(120%);
}

#team article h5{
	width:100%;
	background:linear-gradient(to right, #00ffc3 0%, rgba(255, 255, 255, 0) 100%);
	padding:15px 20px 0 0;
	position:absolute;
	bottom:0;
	left:0;
	color:var(--dark);
	font-family:var(--font_b);
	font-size:28px;
	margin:5px;
	padding:12px 15px;
}

#team article .border-gradient{
	height:3px;
}

#team article h5 small{
	display:block;
	font-size:18px;
	font-family:var(--font_m);
	color:var(--dark);
}

#roadmap .title-group h5{
	font-size:36px;
	margin-bottom:0;
	color: white;
}

#roadmap .title-group h2{
	margin-top:0;
}

#roadmap .title-group{
	margin-bottom:0;
}

#roadmap{
	background:url('../images/roadmap.jpg') no-repeat bottom right;
	background-size:700px;
}

#roadmap article h5{
	background:var(--gradient) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color:var(--white);
	font-size:24px;
	margin-bottom:10px;
	font-family:var(--font_b);
}

#roadmap article{
	position:relative;
	padding-left:20px;
	padding-right:40px;
}

#roadmap article:after{
	position:absolute;
	content:'';
	bottom:-10px;
	left:0;
	height:125px;
	border:1px dashed var(--green);
}

#roadmap article:before{
	position:absolute;
	content:'';
	bottom:-20px;
	left:-9px;
	width:20px;
	height:20px;
	border-radius:50%;
	background:var(--green);
}

#roadmap article p{
	line-height:1.5;
	font-size:17px;
	color: white;
}

#roadmap .nth-article:first-child article{
	margin-top:60%;
}

#roadmap .nth-article:nth-child(2) article{
	margin-top:40%;
}

#roadmap .nth-article:nth-child(3) article{
	margin-top:20%;
}

.accordion .accordion-button{
	background:var(--green_d);
	color:var(--white);
	font-size:20px;
	padding:15px 30px;
}

.accordion .accordion-button span{
	background:var(--gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-right:10px;
	font-size:26px;
}

.accordion-body{
	padding:30px;
	background:var(--dark);
	color:var(--text);
}

.accordion-item{
	border-radius:10px;
	overflow:hidden;
	border:1px solid var(--border);
	margin-bottom:20px;
}

.accordion-button:not(.collapsed)::after{
	filter:brightness(100%);
}

.accordion-button:not(.collapsed){
	box-shadow:none;
}

#join-us{
	background:url('../images/background2.jpg') no-repeat center bottom;
	background-size:100%;
}

#join-us .title-group h5{
	color:var(--white);
}

.bg-gradient{
	background: linear-gradient(to top,rgba(255, 255, 255, 0) 0%, var(--dark) 100%) !important;
}

.list-community{
	display:flex;
	overflow-x: auto;
	white-space: nowrap;
	padding: 10px;
	gap: 15px; 
	cursor:grab;
	scrollbar-width: none;
}

#community .container{
	position:relative;
}

#community .container:after{
	content:'';
	position:absolute;
	bottom:0;
	right:0;
	height:350px;
	width:100px;
	z-index:1;
	background:linear-gradient(to right,rgba(255, 255, 255, 0) 0%, var(--dark) 100%);
}

.list-community::-webkit-scrollbar {
  display: none; 
}

.item-community{
	background:var(--d_gradient);
	box-shadow: inset 0 5px 27px rgba(0, 0, 0, 0.8);
	flex: 0 0 auto;
	border:1px solid var(--border);
	padding: 20px;
	border-radius: 6px;
	max-width: 400px;
	white-space: normal;
	word-break: break-word;
	position:relative;
}

.item-community img{
	margin-top: 40px;
	height:64px;
	padding:10px 30px;
}

.item-community .content-item{
	width:100%;
	text-align:left;
}

.align-content-center{
	align-content: center;
}

.item-community .content-item span{
	font-size:90px;
	background:var(--gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-family:var(--font_b);
	text-align:right;
	display:block;
	position:absolute;
	top:-10px;
	right:20px;
}

.item-community .content-item h4{
	font-family:var(--font_b);
	font-size:24px;
	margin:10px 0;
	background:var(--gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.item-community .content-item h5{
	position:relative;
	padding-left:40px;
	margin-bottom:10px;
	background:var(--gradient_2);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-family:var(--font_b);
}

.item-community .content-item h5 span{
	width:29px;
	height:3px;
	right:auto;
	left:0;
	top:8px;
}

.item-community .content-item p{
	width:100%;
	display:block;
	line-height:1.5;
	margin-bottom:0;
	font-size:16px;
}


#tokenomic .item-box p{
	line-height:1.5;
}

#tokenomic .item-box span{
	color:var(--white);
	display:block;
	font-size:26px;
	font-family:var(--font_b);
	margin-bottom: 20px;
}

#tokenomic .item-box b{
	color:var(--green);
	font-size:40px;
}

.item-box p,.item-box ul li{
	font-size: 18px;
}

.item-box ul li{
	list-style: disc;
}











/* ======================== FOOTER ======================== */
footer{
	background:url('../images/map.png?v=1.0') no-repeat center center;
	background-size:300px;
	padding:40px 0 30px;
}

.logo-footer img{
	width:150px;
}

.list-navigation{
	padding-left:0;
	float:right;
	margin-bottom:0;
}

.list-navigation li{
	display:inline;
	position:relative;
}

.list-navigation li:after{
	position:absolute;
	content:'/';
	bottom: -2px;
	left: 3px;
}

.list-navigation li a{
	display:inline-block;
	color:var(--white);
	font-family:var(--font_m);
	padding-left:8px;
	margin-left:8px;
}

.list-navigation li:first-child:after{
	display:none;
}

.list-navigation li a:hover{
	color:var(--green);
}

.copyright b{
	color:var(--green);
}

/* ======================== Few Option ======================== */
#clickToTop {
    transition: 0.3s;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 9;
    border: none;
    outline: 0;
    cursor: pointer;
    padding: 12px 14px;
    border-radius: 50%;
	background:var(--gradient);
}

#clickToTop:after {
    position: absolute;
    top: -27px;
    left: 10px;
    content: "Top";
    color: var(--white);
    font-family: var(--font_b);
}

#clickToTop img {
    width: 24px;
    height: 20px;
    transform: rotate(-90deg);
}

a.btn-joinus{
	color: var(--green);
	font-size: 24px !important;
	font-weight: bold;
}

a.btn-joinus i{
	margin-left: 5px;
}