*{
margin: 0;
padding: 0;
box-sizing: border-box;
overflow-x: hidden;
}
body{
font-family: "DM Sans", sans-serif;
background-color: #000;
overflow-x: hidden;
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1{
font-family: "Jost", sans-serif;
font-size: 48px;
color: #fff;
text-transform: uppercase;
}
p{
font-size: 17px;
color: #fff;
font-weight: 200;
}
a{
text-decoration: none;
}
.py-100{
padding: 100px 0;
}
.py-80{
padding: 80px 0;
}
.my-2{
margin: 20px 0;
}
.my-3{
margin: 30px 0;
}
.mb-0{
margin-bottom: 0;
}
.bold{
font-weight: 700;
}
.light{
font-weight: 300;
}
.white{
color: #fff;
}
.yellow{
color: rgba(255, 213, 0, 1);
}
.navigation {
height: 55px;
background: transparent;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 2;
margin-top: 20px;
}
.brand {
padding-left: 20px;
float: left;
line-height: 55px;
text-transform: uppercase;
font-size: 1.4em;
}
.brand a, .brand a:visited {
color: #ffffff;
text-decoration: none;
}
.nav-container {
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
nav {
float: right;
background: linear-gradient(89.24deg, rgba(0, 0, 0, 0.35) 0%, rgba(13, 13, 13, 0.35) 100%);
border-radius: 10px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a,nav ul li a:visited {
display: block;
padding: 0 30px;
line-height: 55px;
color: #fff;
background: #262626 ;
text-decoration: none;
}
nav ul li a{
background: transparent;
color: #FFF;
}
/* nav ul li a:hover, nav ul li a:visited:hover {
background: #2581DC;
color: #ffffff;
}*/
.navbar-dropdown li a{
background: #2581DC;
}
nav ul li a:not(:only-child):after, nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: ' \025BE';
}
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.navbar-dropdown {
position: absolute;
display: none;
z-index: 1;
background: #fff;
box-shadow: 0 0 35px 0 rgba(0,0,0,0.25);
}
/* Mobile navigation */
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: transparent;
height: 55px;
width: 70px;
}
@media only screen and (max-width: 800px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 55px 0 15px;
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
background: #262626;
}
nav ul li ul li a {
padding-left: 30px;
}
.navbar-dropdown {
position: static;
}
}
@media screen and (min-width:800px) {
.nav-list {
display: block !important;
}
}
#navbar-toggle {
position: absolute;
left: 18px;
top: 15px;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
#navbar-toggle span, #navbar-toggle span:before, #navbar-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 3px;
width: 30px;
background: #ffffff;
position: absolute;
display: block;
content: '';
transition: all 300ms ease-in-out;
}
#navbar-toggle span:before {
top: -10px;
}
#navbar-toggle span:after {
bottom: -10px;
}
#navbar-toggle.active span {
background-color: transparent;
}
#navbar-toggle.active span:before, #navbar-toggle.active span:after {
top: 0;
}
#navbar-toggle.active span:before {
transform: rotate(45deg);
}
#navbar-toggle.active span:after {
transform: rotate(-45deg);
}
.common-btn{
position: relative;
}
.common-btn{
background: linear-gradient(90deg, #B89900 0%, #FFD500 50%, #B89900 100%);
color: #000;
padding:10px 15px;
border-radius: 50px;
display: inline-block;
overflow: hidden;
border: 2px solid transparent;
}
.common-btn1{
background: radial-gradient(191.35% 274.35% at 50% 50%, rgba(0, 0, 0, 0) 0%, #FFD500 100%),
linear-gradient(0, #000000, #000000);
color:#fff;
z-index: 2;
border: 2px solid transparent;
border-radius: 50px;
overflow: hidden;
}
.common-btn:before,
.common-btn:after,
.common-btn1:before,
.common-btn1:after {
content: "";
position: absolute;
width: 0;
height: 100%;
top: 0;
transition: all 0.4s ease;
background-color: #fff;
z-index: -1;
}
.common-btn:before,
.common-btn1:before {
left: 0;
}
.common-btn:after,
.common-btn1:after {
right: 0;
}
.common-btn:hover,
.common-btn1:hover {
transition: all 0.4s ease;
box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.2);
color: #000 !important;
z-index: 1;
border: 2px solid #ffd500;
}
.common-btn:hover:before,
.common-btn:hover:after,
.common-btn1:hover:before,
.common-btn1:hover:after {
width: 50%;
}
.main-banner{
background-image: url(../img/Pattern.png);
display: block;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
position: relative;
}
.main-banner .banner-text{
/*position: absolute;
top: 50%;
transform: translatey(-50%);*/
padding: 200px 0 130px;
}
.main-banner .banner-text p{
margin: 25px 0;
}
.main-banner .banner-text .img-div{
display: flex;
align-items: flex-end;
}
.main-banner .banner-text .img-div img:nth-child(2){
margin-bottom: -21%;
}
.main-banner .banner-text .button a{
border-radius: 20px;
border: 1px solid rgba(255, 213, 0, 0.5);
background: radial-gradient(191.35% 274.35% at 50% 50%, rgba(0, 0, 0, 0) 0%, #FFD500 100%),
linear-gradient(0, #000000, #000000);
margin-right: 10px;
color: #fff;
padding: 5px 10px;
display: inline-block;
}
.banner-left{
padding-right: 20%;
}
.banner-text ul{
display: flex;
flex-wrap: wrap;
padding-left: 0;
padding-top: 30px;
margin-bottom: 50px;
}
.banner-text li{
width: 30%;
border-left: 1px solid rgba(255, 213, 0, 1);
margin-top: 30px;
padding-left:30px;
}
.presale-banner .banner-text {
padding: 200px 0 0;
}
.presale-banner .banner-left p {
margin: 10px 0;
}
.presale-banner li p{
margin: 0 0 10px !important;
}
.presale-banner li h2{
margin-bottom: 0;
font-size: 24px;
}
.banner-text li:nth-child(1){
width: 100%;
}
.main-banner .logo-name{
padding-top: 100px;
}
.main-banner .logo-name img{
position: relative;
}
.main-banner .logo-name img::after {
content: "";
position: absolute;
inset: -20%;
background: linear-gradient(45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 60%);
animation: shark-wrap 2.5s infinite;
transform: translateX(-100%);
}
@keyframes shark-wrap {
to {
transform: translateX(100%);
}
}
.main-banner .logo-name img{
width: 100%;
}
.what-is{
/* background-image: url(../img/Coin.png);*/
display: block;
background-repeat: no-repeat;
background-size: inherit;
height: 100%;
background-position: left;
padding: 350px 0;
position: relative;
overflow: hidden;
}
.coin{
position: absolute;
left: 0;
top: -25%;
z-index: 0;
animation: pulse 1.5s infinite ease-in-out alternate;
}
.what-text{
position: relative;
z-index: 1;
}
.pulse {
}
@keyframes pulse {
from { transform: scale(1); }
to { transform: scale(1.05); }
}
.client{
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 30px 0;
}
.client .owl-carousel .owl-item img{
width: auto;
margin: 0 auto;
}
.client .owl-carousel .owl-item .item{
text-align: center;
}
.what-text p{
margin: 20px 0;
}
.features ul{
display: flex;
flex-wrap: wrap;
gap: 30px;
padding: 0 0 100px;
margin-bottom: 0;
margin-top: -5%;
}
.features ul li{
width: 47%;
background: linear-gradient(90deg, #000000 0%, #0D0D0D 100%);
border: 1px solid rgba(37, 37, 37, 1);
border-radius: 10px;
padding:20px 200px 20px 40px;
text-transform: uppercase;
}
.features ul li p{
margin-bottom: 0;
margin-top: 20px;
}
.work-wrap{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 20px;
margin-top: 80px;
}
.how-work{
position: relative;
}
.how-work:before{
position: absolute;
content: "";
background-image: url(../img/bg/Vector-1.png);
top: 0;
left: 0;
width: 100%;
height: 380px;
background-position:top;
background-repeat: no-repeat;
background-size: cover;
}
.how-work:after{
position: absolute;
content:"" ;
bottom: 0;
background-image: url(../img/bg/Vector.png);
left: 0;
width: 100%;
height: 380px;
background-repeat: no-repeat;
background-position:bottom;
background-size: cover;
}
.work-single{
width: 31%;
text-align: center;
padding: 30px;
background: linear-gradient(#000, #000) padding-box,
linear-gradient(to left, #FFD50080, #99800000) border-box;
border-radius: 15px;
border: 1px solid transparent;
}
.work-single h2{
font-size: 22px;
text-transform: uppercase;
margin: 20px 0;
}
.work-single p{
font-size: 16px;
margin: 0;
}
.blink{
text-decoration: blink;
-webkit-animation-name: blinker;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:ease-in-out;
-webkit-animation-direction: alternate;
}
@-webkit-keyframes blinker {
from {opacity: 1.0;}
to {opacity: 0.0;}
}
.counter .common-title p{
text-transform: uppercase;
width: 40%;
margin: 0 auto;
}
.counter ul{
display: flex;
justify-content: space-between;
gap: 30px;
margin-bottom: 0;
width: 90%;
margin: 70px auto 0;
}
.counter ul li{
width: 25%;
text-align: center;
border-right:1px solid rgba(255, 213, 0, 1);
}
.counter ul li:nth-last-child(1){
border-right: none;
}
.common-title{
margin-bottom: 60px;
}
.mentions ul{
display: flex;
justify-content: center;
gap: 50px;
margin-bottom: 0;
margin: 0 auto 0;
}
.mentions li{
border: 1px solid rgba(255, 213, 0, 0.5);
border-radius: 10px;
padding: 15px;
}
.future{
background-image: url(../img/future.png);
display: block;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.future .common-title{
margin-bottom: 0;
}
.timeline,
.tokenomics{
background-image: url(../img/bg/Pattern1.png);
display: block;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
/*timeline*/
.timeline-rightbox .rightbox {
padding: 0em 34rem 0em 0em;
height: 100%;
}
.timeline-rightbox .rb-container {
margin: auto;
display: block;
position: relative;
}
.timeline-rightbox .rb-container ul.rb {
margin: 0;
padding: 0;
display: inline-block;
}
.timeline-rightbox .rb-container ul.rb li {
list-style: none;
margin: auto;
margin-left: 5em;
min-height: 50px;
border-left: 1px solid rgba(255, 213, 0, 1);
padding: 0 0 50px 30px;
position: relative;
}
.timeline-rightbox .rb-container ul.rb li::before {
position: absolute;
left: -6px;
top: 20px;
content: " ";/*
border: 8px solid rgba(255, 255, 255, 1);*/
border-radius: 500%;
background: rgba(255, 213, 0, 1);
height: 12px;
width: 12px;
transition: all 500ms ease-in-out;
}
.timeline-rightbox .rb-container ul.rb li:hover::before {
border-color: #232931;
transition: all 1000ms ease-in-out;
}
.timeline-rightbox ul.rb li .timestamp {
color: #fff;
position: relative;
font-size:36px;
margin-bottom: 20px;
}
.timeline-rightbox .item-title {
color: #fff;
font-weight: 300;
line-height: 25px;
}
.timeline-rightbox .container-3 {
width: 5em;
vertical-align: right;
white-space: nowrap;
position: absolute;
}
.timeline-rightbox .container-3 input#search {
width: 150px;
height: 30px;
background: #fbfbfb;
border: none;
font-size: 10pt;
color: #262626;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: 0.9em 0 0 28.5em;
box-shadow: 3px 3px 15px rgba(119, 119, 119, 0.5);
}
.timeline-rightbox .container-3 .icon {
margin: 1.3em 3em 0 31.5em;
position: absolute;
width: 150px;
height: 30px;
z-index: 1;
color: #4f5b66;
}
/*timeline*/
footer h3{
font-size: 20px;
font-weight: 600;
}
footer .col1{
padding-right: 30%;
}
footer .col1 h3{
margin-top: 40px;
}
footer p,
footer a{
font-size: 16px;
color: #fff;
font-weight: normal;
}
footer .col3 p{
text-decoration: underline;
}
footer .social{
margin-top: 30px;
}
footer .social img{
margin-right: 10px;
}
footer .col2 h3{
margin-bottom: 20px;
}
.footer-links{
text-align: right;
}
.footer-links a{
margin: 0 15px;
}
.bottom-strip{
padding: 30px 0;
}
.navbar-dropdown li a,
nav ul li a{
position: relative;
}
.navbar-dropdown li a:before,
nav ul li a:before{
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px; /* adjust thickness as needed */
background: linear-gradient(90deg, rgba(255, 213, 0, 0) 0%, #FFD500 49.52%, rgba(255, 213, 0, 0) 100%);
opacity: 0;
}
.navbar-dropdown li a:hover:before,
nav ul li a:hover:before,
.navbar-dropdown li a.active:before,
nav ul li a.active:before {
opacity: 1;
}
/*about page*/
.main-banner .about-logo-name{
padding-top: 0;
}
.about-features ul{
margin-top: 0;
}
.about-work .work-single {
background:none;
}
.about-features ul li{
width: 30%;
padding: 20px 40px 20px 40px;
}
.about-features ul li p{
display: flex;
align-items: center;
margin: 0;
}
.about-features ul li p:nth-child(2){
text-transform: initial;
margin-top: 5px;
}
.about-features ul {
padding: 0 ;
}
.team-slider .item{
position: relative;
}
.team-slider .item:before{
position: absolute;
height: 100%;
width: 100%;
/*background-color: rgb(0 0 0 / 45%);*/
opacity: 0.5;
content: "";
z-index: -1;
}
.team .team-text{
padding: 20px 10px;
position: static;
bottom: 0;
left: 0;
}
.team .team-text h3{
font-size: 26px;
text-transform: uppercase;
font-weight: 700;
}
.team .team-text h4{
font-size: 18px;
font-weight: 600;
text-transform: uppercase;
}
.team .team-text p{
font-size: 16px;
line-height: 22px;
font-weight: 300;
}
.team .team-text img{
width: auto !important;
}
.team .team-text hr{
color: rgba(255, 213, 0, 1);
}
.team .img-box{
/*border-radius: 20px;*/
overflow: hidden;
}
/*.team-slider.owl-carousel .owl-stage-outer {
margin-right: 210px;
}*/
.team-slider.owl-theme .owl-nav {
margin-top:0 !important;
position: absolute;
right: 0;
}
.team-slider.owl-theme .owl-nav [class*=owl-]{
background: 0 0;
color: #ffd500;
padding: 0 !important;
border: 1px solid #ffd500;
border-radius: 50px;
heo: 30px;
width: 30px;
height: 30px;
font-size: 26px;
line-height: 17px;
}
.team-slider.owl-theme .owl-nav [class*=owl-]:hover{
background: #ffd500;
}
.team-slider.owl-theme .owl-dots{
position: absolute;
}
.team-slider.owl-theme .owl-dots .owl-dot span{
background: rgba(255, 213, 0, 0.3);
}
.team-slider.owl-theme .owl-dots .owl-dot.active span,
.team-slider.owl-theme .owl-dots .owl-dot:hover span{
background: rgba(255, 213, 0, 1);
}
.about-client{
position: static;
}
.problem{
background-image: url(../img/bg/Pattern-sol.png);
display: block;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.solution-wrap{
display: flex;
justify-content: space-between;
padding-top: 40px;
}
.solution-single .box{
text-align: center;
margin: 0 70px 70px;
}
.solution-single .box p{
font-weight: 500;
line-height: 25px;
margin: 20px 0 0 0;
}
.security{
position: relative;
}
.security .patch{
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
.content-security ul{
display: flex;
gap: 20px;
}
.content-security ul li{
width: 48%;
padding:0 20px 0;
margin: 40px 0;
}
.content-security ul h3{
font-size: 22px;
}
.content-security ul:nth-child(1){
border-bottom: 1px solid rgba(37, 37, 37, 1);
}
.content-security ul:nth-child(1) li{
margin-top: 0;
}
.content-security ul li:nth-child(1){
border-right: 1px solid rgba(37, 37, 37, 1);
}
.flow-wrap{
margin-bottom: 30px;
}
.flow-wrap h2{
font-size: 36px;
text-transform: uppercase;
margin-bottom: 0;
margin-top: 30px;
}
.flow-wrap .flow-right{
display: flex;
align-items: center;
gap: 20px;
}
.flow-wrap .flow-right .f1,
.flow-wrap .flow-right .f3{
background: linear-gradient(90deg, #000000 0%, #0D0D0D 100%);
border: 1px solid rgba(37, 37, 37, 1);
border-radius: 10px;
padding: 20px 90px 20px 20px;
}
.what-can-do:before,
.what-can-do:after{
display: none;
}
.what-can-do .work-single{
text-align: left;
}
.what-can-do .work-single h2{
display: flex;
align-items: center;
gap: 10px;
margin-top: 0;
}
.what-can-do .work-single {
padding: 15px 50px;
}
.summary .common-title{
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding-right: 50px;
}
.summary-right img{
width: -webkit-fill-available;
}
.ps-timeline-sec {
position: relative;
}
.ps-timeline-sec .container {
position: relative;
}
@media screen and (max-width: 992px) {
.ps-timeline-sec .container ol.ps-timeline {
margin: 40px 0 0 !important;
border-left: 1px solid rgba(255, 213, 0, 1);
padding-left: 0 !important;
padding-top: 0 !important;
border-top: 0 !important;
margin-left: 10px !important;
}
.ps-timeline-sec .container ol.ps-timeline li {
height: 145px;
float: none !important;
width: inherit !important;
/* &:nth-child(2) {
.img-handler-bot {
img {
width: 70px;
}
}
} */
}
.ps-timeline-sec .container ol.ps-timeline li span {
left: 20px !important;
}
.ps-timeline-sec .container ol.ps-timeline li span.ps-sp-top:before {
content: none !important;
}
.ps-timeline-sec .container ol.ps-timeline li span.ps-sp-top:after {
content: none !important;
}
.ps-timeline-sec .container ol.ps-timeline li span.ps-sp-bot:before {
content: none !important;
}
.ps-timeline-sec .container ol.ps-timeline li span.ps-sp-bot:after {
content: none !important;
}
.ps-timeline-sec .container ol.ps-timeline li p {
text-align: left !important;
/*width: 100% !important;*/
margin: 0 auto !important;
margin-top: 0px !important;
}
.ps-timeline-sec .container ol.ps-timeline li p:nth-child(1){
width: 67%;
}
.ps-timeline-sec .container ol.ps-timeline li p:nth-child(2){
width: 100%;
}
.ps-timeline-sec ol.ps-timeline li:nth-last-child(1) .ps-top div p{
width: 100%;
}
.ps-timeline-sec .container ol.ps-timeline li .ps-top {
width: 80% !important;
float: right !important;
right: 0;
top: -5px;
}
.ps-timeline-sec .container ol.ps-timeline li .ps-bot {
width: 80% !important;
float: right !important;
right: 0;
top: -5px;
}
}
/*.ps-timeline-sec .container ol:before {
background: #348e80;
content: "";
width: 10px;
height: 10px;
border-radius: 100%;
position: absolute;
left: 8px;
top: 49.5%;
}*/
/*.ps-timeline-sec .container ol:after {
background: #348e80;
content: "";
width: 10px;
height: 10px;
border-radius: 100%;
position: absolute;
right: 8px;
top: 49.5%;
}*/
.ps-timeline-sec .container ol.ps-timeline {
margin:270px 0 180px;
padding: 0;
border-top: 1px solid rgba(255, 213, 0, 1);
list-style: none;
}
.ps-timeline-sec .container ol.ps-timeline li {
float: left;
width: 16%;
padding-top: 30px;
position: relative;
}
.ps-timeline-sec .container ol.ps-timeline li h5 {
text-align: center;
margin: -30px 0 -40px 50px;
font-weight: 700px;
color: maroon;
}
.ps-timeline-sec .container ol.ps-timeline li span {
width:10px;
height: 10px;
margin-left: -25px;
background: rgba(255, 213, 0, 1);
/* border-left-color: 4px solid $brand-color-g;
border-right-color: transparent;
border-top: 4px solid $brand-color-g;
border-bottom-color: transparent; */
border-radius: 50%;
text-align: center;
line-height: 50px -10;
color:rgba(255, 213, 0, 1);
font-size: 2em;
font-style: normal;
position: absolute;
top: -4px;
left: 50%;
}
.ps-timeline-sec .container ol.ps-timeline li span.ps-sp-top {
border-top: 4px solid rgba(255, 213, 0, 1);
}
/*.ps-timeline-sec .container ol.ps-timeline li span.ps-sp-top:before {
content: "";
color: #348e80;
width: 2px;
height: 50px;
background: #348e80;
position: absolute;
top: -50px;
left: 50%;
}*/
/*.ps-timeline-sec .container ol.ps-timeline li span.ps-sp-top:after {
content: "";
color: #348e80;
width: 8px;
height: 8px;
background: #348e80;
position: absolute;
bottom: 90px;
left: 44%;
border-radius: 100%;
}*/
.ps-timeline-sec .container ol.ps-timeline li span.ps-sp-bot {
border-bottom: 4px solid rgba(255, 213, 0, 1);
}
/*.ps-timeline-sec .container ol.ps-timeline li span.ps-sp-bot:before {
content: "";
color: #348e80;
width: 2px;
height: 50px;
background: #348e80;
position: absolute;
bottom: -50px;
left: 50%;
}*/
/*.ps-timeline-sec .container ol.ps-timeline li span.ps-sp-bot:after {
content: "";
color: #348e80;
width: 8px;
height: 8px;
background: #348e80;
position: absolute;
top: 90px;
left: 44%;
border-radius: 100%;
}*/
.ps-timeline-sec .container ol.ps-timeline li h4 {
font-size: 20px;
font-weight: 600;
text-transform: uppercase;
}
.ps-timeline-sec .container ol.ps-timeline li .ps-top {
position: absolute;
bottom: 35px;
margin-bottom: 20px;
left: 35%;
width: 100%;
}
.ps-timeline-sec .container ol.ps-timeline li .ps-bot {
position: absolute;
margin-top: 20px;
left: 35%;
width: 100%;
}
.ps-timeline-sec .container ol.ps-timeline li .ps-bottom {
position: absolute;
margin: 5px;
}
.ps-timeline-sec ol.ps-timeline li .ps-top div,
.ps-timeline-sec ol.ps-timeline li .ps-bot div{
display: flex;
align-items: center;
gap: 10px;
}
.ps-timeline-sec ol.ps-timeline li .ps-top p,
.ps-timeline-sec ol.ps-timeline li .ps-bot p{
font-size: 14px;
margin-bottom: 7px;
font-weight: 500;
}
.ps-timeline-sec ol.ps-timeline li .ps-top div p:nth-child(2),
.ps-timeline-sec ol.ps-timeline li .ps-bot div p:nth-child(2){
color: rgba(255, 213, 0, 1);
}
.presale-client{
position: static;
}
.tokenomics ul{
display: flex;
flex-wrap: wrap;
padding: 0;
}
.tokenomics ul li{
width: 45%;
display: flex;
gap: 20px;
align-items: center;
margin-bottom: 30px;
}
.tokenomics ul li div{
color: #ffffff;
font-size: 20px;
font-weight: bold;
border-radius: 50px;
height: 65px;
width: 65px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
padding: 15px;
}
.tokenomics ul li p{
margin-bottom: 0;
}
.tokenomics ul li:nth-child(1) div{
color: #000;
}
.tokenomics ul li:nth-child(3) div{
border: 1px solid rgba(0, 0, 224, 1);
background-color: rgba(0, 0, 224, 0.25);
}
.tokenomics ul li:nth-child(2) div{
background: rgba(0, 0, 128, 1);
}
.tokenomics ul li:nth-child(5) div{
background: rgba(255, 213, 0, 1);
}
.tokenomics ul li:nth-child(4) div{
background: radial-gradient(191.35% 274.35% at 50% 50%, rgba(0, 0, 0, 0) 0%, #FFD500 100%),
linear-gradient(0, #000000, #000000);
border: 1px solid rgba(255, 213, 0, 1);
}
a:hover {
color: #fff !important;
}
.chart{
width: 100%;
}
.tokenomics .common-title{
margin-top: 50px;
}
.trust .row div{
display: flex;
}
.presale-bar-overlay {
position: absolute; /* or fixed if you want it always on top while scrolling */
top: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.8);
z-index: 9999;
padding: 6px 0;
border-bottom: 1px solid #e8cf46;
}
.presale-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
flex-wrap: wrap;
gap: 20px;
}
.presale-title {
font-weight: bold;
font-size: 20px;
white-space: nowrap;
color: white;
}
.presale-logos {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.partner-link {
display: flex;
align-items: center;
gap: 6px;
text-decoration: none;
color: white;
}
.partner-logo {
width: 100%;
height: 100%;
}
.partner-name {
font-size: 14px;
}
.close-btn {
position: absolute;
right: 10px;
background: none;
border: none;
color: white;
font-size: 20px;
cursor: pointer;
top: 50%;
transform: translateY(-50%);
}
@media (max-width: 768px) {
.presale-inner {
flex-direction: column;
align-items: flex-start;
justify-content: center;
text-align: left;
}
.close-btn {
position: static;
align-self: flex-end;
transform: none;
}
}
body {
margin: 0;
font-family: Arial, sans-serif;
background: #000;
}
.video-section {
padding: 40px;
display: flex;
justify-content: center;
align-items: center;
}
.video-wrapper {
position: relative;
width: 100%;
max-width: 800px;
aspect-ratio: 16 / 9;
background-color: #000;
overflow: hidden;
border-radius: 12px;
}
.video-wrapper video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 12px;
}
.play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgb(255 213 0);
border: none;
border-radius: 50%;
width: 90px;
height: 90px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
transition: background 0.3s ease;
}
.play-button:hover {
background: rgba(255, 255, 255, 1);
}
.play-button::before {
content: '';
display: block;
width: 0;
height: 0;
border-left: 20px solid #000;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
margin-left: 3px;
}
@media (max-width: 600px) {
.play-button {
width: 50px;
height: 50px;
}
.play-button::before {
border-left: 15px solid #000;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
}
}