/* general */

 /*===================================*
01. GENERAL STYLE
*===================================*/
 body {
     font-size: 15px;
     color: #222;
     line-height: 28px;
     font-family: 'Lato', sans-serif;
     font-weight: 400;
     letter-spacing: 1px;
     font-weight: 300;
 }

 a {
     color: #f9f9f9;
     -webkit-transition: all 500ms;
     transition: all 500ms
 }

 a:hover,
 a:focus {
     color: #f6aa35;
     text-decoration: none;
     outline: 0;
 }

 h1,
 h2,
 h3,
 h4 {
     font-family: 'Nunito', sans-serif;
     font-weight: 400;
 }

 h1 {
     font-weight: 400;
     font-size: 52px;
 }

 h2 {
     font-size: 2.6rem;
 }

 h3 {
     font-weight: 400;
     font-size: 36px;
 }

 img {
     max-width: 100%;
 }

 .wrapper {}

 .lead,
 p.lead {
     font-size: 20px;
     font-weight: 300;
     line-height: 1.6;
 }


 .sub-txt {
     max-width: 740px;
     margin: 0 auto;
     font-size: 18px;
     margin-bottom: 40px;
 }

 .section_title {
     margin-bottom: 60px;
 }

 .section_title h3,
 .section_title h2 {
     margin-bottom: 20px;
 }

 .white-sec .sub-txt {
     color: #bbb;
 }

 .carbon-layout .white-sec .sub-txt {
     color: #ffffff;
     font-size: inherit;
 }

 .owl-carousel .owl-dots {
     display: block;
     margin-top: 40px;
     text-align: center;
 }

 .owl-carousel .owl-dots button.active {
     background: #000aff;
 }

 .owl-carousel .owl-dots button {
     height: 8px;
     width: 8px;
     margin: 0 3px;
     outline: 0;
     -webkit-border-radius: 50%;
     border-radius: 50%;
     background: #00b8ff;
 }

 .owl-carousel .owl-dots button.active {
     width: 30px;
     -webkit-border-radius: 3px;
     border-radius: 3px;
 }

 .owl-carousel .owl-nav {
     margin: 15px 0px;
 }

 .owl-carousel .owl-nav button {
     border: 2px solid #a5a5a5 !important;
     ;
     background: none;
     padding: 5px;
     width: 32px !important;
     height: 32px !important;
     line-height: 28px;
     font-size: 18px;
     margin-right: 10px;
     outline: 0;
 }

 .owl-carousel .owl-nav button span {
     font-size: 30px;
     line-height: 24px;
     outline: 0;
 }

 ol,
 ul,
 dl {
     padding: 0px 0px 0px 15px;
 }

 .mobile-visible {
     display: none;
 }

 /*===================================*
02. HEADER DESIGN
*===================================*/
 header {
     position: absolute;
     top: 0;
     width: 100%;
     z-index: 1;
     padding-top: 34px;
     padding-bottom: 10px;
     transition: all 300ms;
     z-index: 1000000;
 }

 header.light {
     position: relative;
     top: 0;
     width: 100%;
     z-index: 1;
     padding-top: 15px;
     padding-bottom: 15px;
     transition: all 300ms;
     z-index: 1000000;
 }

 .logo .dark {
     display: none;
 }

 header.fixed .logo img,
 header.light .logo img {
     display: none
 }

 header.fixed .logo .dark,
 header.light .logo .dark {
     display: block;
 }

 .menu-icon {
     display: none
 }

 nav {
     margin-top: 8px;
     text-align: right;
 }

 nav ul {
     margin: 0;
     padding: 0;
 }

 nav ul li {
     list-style: none;
     display: inline-block;
     margin-left: 35px;
 }

 nav ul li.m_btn a {
     background-color: #020230;
     color: #fff !important;
     padding: 10px 20px;
     border-radius: 50px;
     box-shadow: inset 0 0 7px 0px #fff;
 }

 nav ul li:first-child {
     margin-left: 0;
 }

 nav ul li a {
     color: #fff;
     font-weight: 700;
     font-size: 16px;
     text-transform: uppercase;
     padding: 10px 0;
     display: block;
 }

 img.dark,
 img.light {
     max-width: 170px;
 }

 nav ul li a:hover,
 nav ul li.active a {
     color: #f6aa35;
     text-decoration: none
 }

 nav ul li.nav-btn a {
     color: #1d1d1d;
     padding: 10px 32px;
     background: #fbbd18;
     -webkit-border-radius: 4px;
     border-radius: 50px;
 }

 nav ul li.nav-btn a:hover {
     background: #f0931e;
     color: #1d1d1d
 }

 header.fixed nav ul li.m_btn a {
     box-shadow: inset 0 0 10px 5px #0767e0;
     background-color: #0767e0;
 }

 header.fixed {
     position: fixed;
     padding-top: 8px;
     background: rgb(1 6 24 / 50%);
     box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
 }

 .fixed nav ul li a,
 .light nav ul li a {
     color: #ffffff;
 }

 .fixed nav ul li a:hover,
 .fixed nav ul li.active a,
 .light nav ul li a:hover,
 .light nav ul li.active a {
     color: #0504a5;
 }

 .fixed nav ul li.nav-btn a:hover,
 .light nav ul li.nav-btn a:hover {
     color: #1d1d1d
 }

 a.logo {
     align-items: center;
 }

 /*===================================*
03. BANNER SECTION
*===================================*/
 #silver-tech-bg {
     top: 0;
     position: absolute;
     width: 100%;
     height: 100%;
     left: 0px;
     opacity: 0.8;
 }

 #gold-tech-bg {
     top: 0;
     position: absolute;
     width: 100%;
     height: 100%;
     left: 0px;
     opacity: 0.3;
 }

 .hero-main {
     padding-top: 100px;
     color: #fff;
     position: relative;
     background-image: url('../img/hero.jpg');
     background-size: cover !important;
     background-position: center;
     background-repeat: no-repeat !important;
     height: 100vh;
     padding-bottom: 60px;
     background-attachment: fixed;
 }

 /*.hero-main:before {
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}*/
 .layout-2 .hero-left p {
     font-size: 20px;
     line-height: 1.5;
 }

 .layout-2 .row {
     padding: 130px 0px
 }

 .hero-left h2 {
     color: #fff;
     font-weight: 700;
     font-size: 58px;
     font-family: 'Nunito', sans-serif;
 }

 .hero-left h1 span {
     font-weight: 600;
     color: #fff;
     display: block;
 }

 .hero-left p {
     font-size: 16px;
 }

 .hero-caption h1 span {
     font-weight: 300;
     color: #fbbd18;
 }

 .hero-left .hero-btns {
     margin-top: 15px;
     width: 100%;
     clear: both;
     float: left;
 }

 .hero-left .hero-btns a+a {
     margin-left: 30px;
 }

 /* scrollbar styling */
 /*
 * {
     /* scrollbar-color: red #ffffff;
     scrollbar-width: thin; */
 }

 *::-webkit-scrollbar {
     width: 3px;
     background-color: #ffffff;
 }

 *::-webkit-scrollbar-thumb {
     background-color: red;
 }
*/
 /* selection styling */
 *::-moz-selection {
     background-color: rgba(127, 73, 183, 0.8);
     color: #ffffff;
 }

 *::selection {
     background-color: rgba(127, 73, 183, 0.8);
     color: #ffffff;
 }

 /* selection placeholder */
 ::-webkit-input-placeholder {
     color: inherit;
     opacity: 0.3;
 }

 ::-moz-placeholder {
     color: inherit;
     opacity: 0.3;
 }

 ::-ms-input-placeholder {
     color: inherit;
     opacity: 0.3;
 }

 /* * */

 html,
 body {
     color: #fff;
     font-size: 16px;
     line-height: 26px;
     font-family: 'Nunito', sans-serif;
     font-weight: 400;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     scroll-behavior: smooth;
 }


 /* footer */
 footer {
     text-align: center;
 }


 .copyright {
     text-align: center;
     padding: 30px 0;
 }



 .pre-sale-timer {
     text-align: center;
     max-width: 420px;
     width: 100%;
     float: right;
     padding: 30px;
     padding-top: 0px;
     padding-bottom: 0px;
     background: -moz-linear-gradient(bottom, rgba(251, 189, 24, 1) 0%, rgba(251, 189, 24, 0) 100%);
     background: -webkit-linear-gradient(bottom, #5d8a00 0%, rgba(251, 189, 24, 0) 100%);
     background: linear-gradient(to top, #5d8a00 0%, rgba(251, 189, 24, 0) 100%);
     bottom: 0px;
     position: relative;
     height: 100vh;
     display: table;
 }

 .pre-sale-timer>div {
     display: table-cell;
     vertical-align: middle;
 }

 .pre-sale-timer h3 {
     font-size: 28px;
     margin-bottom: 25px;
 }

 .pre-sale-timer h3 span {
     font-weight: 300;
 }

 #clock ul {
     list-style: none;
     margin: 0 -14px;
     padding: 0;
 }

 #clock li {
     width: 25%;
     padding: 0 15px;
     float: left;
     position: relative;
     text-align: center;
 }

 #clock li span {
     border: 1px dashed #c186ef;
     display: block;
     padding: 15px 2px;
     font-size: 36px;
     font-weight: 700;
     color: #ffffff;
     font-family: 'Poppins', sans-serif;
     -webkit-border-radius: 4px;
     border-radius: 5px;
     line-height: 36px;
     background-color: rgb(0 27 255 / 51%);
 }

 #clock li span em {
     display: block;
     font-family: 'PT Sans', sans-serif;
     font-weight: 400;
     font-size: 16px;
     line-height: 20px;
     color: #ffffff;
 }

 #clock li+li:before,
 #clock li+li:after {
     background: #ffffff;
     position: absolute;
     top: 50%;
     left: -3px;
     content: "";
     -webkit-border-radius: 50%;
     border-radius: 50%;
     width: 6px;
     height: 6px;
 }

 #clock li+li:before {
     margin-top: -12px;
 }

 #clock li+li:after {
     margin-top: 6px;
 }

 div#clock {
     display: block;
     margin-top: 20px;
     margin-bottom: 100px;
 }


 a.button {
     border: none;
     text-decoration: none;
     color: rgba(255, 255, 255, 0.95);
     cursor: pointer;
 }

 /*
.div {
  padding-top: 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  text-align: center;
  position: relative;
  max-width: 1200px;
  margin: auto;
}
*/

 .split_logo {
     width: 25px !important;
     height: 35% !important;
     fill: white !important;
     transform: rotate(15deg);
 }

 .roadmap .roadmap-icon i {
     font-size: 50px;
 }

 .fa-hourglass-half {
     opacity: 0.3;
 }

 .psuedo-text {
     color: #ddd;
     position: relative;
     top: 0px;
     height: 100%;
     width: 100%;
     display: inline;
     height: auto;
     font-size: 18px;
     font-weight: 700;
     transition: 0.25s ease-in;
     transition-delay: 0.1s;
 }

 nav .psuedo-text {
     top: 2px;
 }

 li {
     position: relative !important;
 }

 .fa-ul {
     padding-left: 0;
     margin-left: 0;
 }

 li {
     font-weight: 800 !important;
 }

 .rm-coming-soon {
     opacity: 0.3;
 }

 .button {
     padding: 1.1rem 1.8em;
     background: linear-gradient(to right, rgba(0, 1, 255, 1) 0%, rgba(0, 197, 255, 1) 100%);
     text-align: center;
     display: inline-block;
     font-size: 18px;
     text-transform: capitalize;
     font-weight: 600;
     position: relative;
     will-change: transform;
 }

 .button-mat {
     color: #5533ff;
     border: 0px transparent;
     border-radius: 50px;
     transition: 0.3s ease-in-out;
     transition-delay: 0.35s;
     overflow: hidden;
 }

 .button-mat:before {
     content: "";
     display: block;
     background: #7f49b7;
     position: absolute;
     width: 200%;
     height: 500%;
     border-radius: 100%;
     transition: 0.36s cubic-bezier(0.4, 0, 1, 1);
 }

 .button-mat:hover .psuedo-text {
     color: white;
 }

 .button-mat:hover {
     color: transparent;
 }

 .btn_hover {
     box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
 }

 .btn_hover:before {
     transform: translate(-110%, -110%) translateZ(0);
 }

 .btn_hover:hover:before {
     transform: translate(-45%, -34%) translateZ(0);
 }

 .btn-sm {
     padding: .7rem 1.5rem !important;
     font-size: 14px;
 }

 section {
     padding: 120px 0;
     overflow: hidden;
 }

 .up_down img {
     animation: move 2.5s linear infinite;
 }

 .up_down {
     text-align: center;
 }

 @-webkit-keyframes move {
     0% {
         transform: translateY(0px);
     }

     50% {
         transform: translateY(25px);
     }

     100% {
         transform: translateY(0px);
     }
 }

 @-moz-keyframes move {
     0% {
         transform: translateY(0px);
     }

     50% {
         transform: translateY(25px);
     }

     100% {
         transform: translateY(0px);
     }
 }

 @-o-keyframes move {
     0% {
         transform: translateY(0px);
     }

     50% {
         transform: translateY(25px);
     }

     100% {
         transform: translateY(0px);
     }
 }

 @keyframes move {
     0% {
         transform: translateY(0px);
     }

     50% {
         transform: translateY(25px);
     }

     100% {
         transform: translateY(0px);
     }
 }

 img {
     max-width: 100%;
 }

 .b_g {
     background-image: url('../img/incubator.png');
     background-size: cover;
     background-position: right;
     background-repeat: no-repeat;
     padding-bottom: 0;
 }


 .sec_title h2 {
     margin-bottom: 20px;
 }

 .sec_title {
     margin-bottom: 60px;
 }

 /*About Us*/
 .about_us {
     background-image: url('../img/bg2.png');
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
     background-attachment: fixed;
 }

 .hidd_thumb {
     display: none;
 }

 .about_us_content h4 {
     margin-bottom: 10px;
 }

 .about_us_content h2 {
     margin-bottom: 10px;
     font-weight: 900;
 }

 .about_us_content p {
     margin-bottom: 50px;
 }

 .about_us_thumb,
 .about_us_content {
     margin-bottom: 50px;
 }

 /*Different*/

 /*.different_item {
    background-image: linear-gradient(to right, rgb(137 66 192), rgb(137 66 192 / 5%));
    padding: 20px;
    border-radius: 10px;
    align-items: center;
    backdrop-filter: blur(8px);
}
.different_item h4{
    margin-bottom: 10px;
}
.different_item .icon {
    max-width: 80px;
    position: relative;
    margin-bottom: 20px;
    margin-right: 10px;
    padding: 10px;
    border-radius: 20px;
    box-shadow: inset 0 0px 10px 5px #00b3ff;
    background-color: #0013ff;
}
.different_item .icon img {
    max-width: 60px;
}
*/

 /*Mission*/
 .our_mission {
     background-image: url('../img/incubator.png');
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
     background-attachment: fixed;
 }

 /*
.mission_content h2{
    font-size: 62px;
    line-height: 75px;
}
.mission_itm {
    background-color: rgba(0,0,0,.5);
    border-left: 2px solid #fff;
    padding: 20px;
    border-radius: 20px 0 1px 20px;
    position: relative;
    transition: .3s;
}
.mission_itm img {
    margin-bottom: 15px;
}
.mission_itm:after {
    content: "";
    width: 50%;
    height: 100%;
    top: 0;
    right: 0;
    position: absolute;
    border-radius: 0;
    border-style: solid;
    border-width: 61px;
    border-color: transparent #7b4bb3 transparent transparent;
    z-index: -1;
    transition: .3s;
}
.mission_itm:hover:after { 
    border-color: transparent #000fff transparent transparent; 
}

.mission_itm:hover { 
    border-color: #000fff; 
}
*/



 /*RoaadMap*/
 .roadmap-sec {
     padding-bottom: 0;
 }

 .roadmap .roadmap-item {
     clear: none;
     text-align: center;
     display: flex;
     width: 100%;
     flex-wrap: wrap;
     padding: 180px 0px 0px;
 }

 .roadmap .roadmap-item.even {
     padding: 0px 0px 180px;
 }

 .roadmap .roadmap-icon {
     display: table;
     margin: auto;
     background: #000000;
     padding: 20px 0 0 2px;
     -webkit-border-radius: 50%;
     border-radius: 50%;
     position: absolute;
     top: 15px;
     left: 50%;
     transform: translateX(-50%);
     border: 6px solid #ffffff;
     box-shadow: 0 0 10px 5px #0767e0;
     width: 100px;
     height: 100px;
 }

 .roadmap .roadmap-icon img {
     position: relative;
     top: 0;
 }

 .roadmap .roadmap-icon:after {
     background: #0767e0;
     content: "";
     height: 65px;
     width: 2px;
     position: absolute;
     left: 50%;
     top: 100%;
     margin-left: -1px;
     margin-top: 7px;
 }

 .roadmap .roadmap-item.even .roadmap-icon:after {
     top: auto;
     bottom: 100%;
     margin-top: 0;
     margin-bottom: 7px;
     /*background: #ffffff;*/
 }

 .roadmap .roadmap-item.even .roadmap-icon {
     top: auto;
     bottom: 15px;
     /*background: #0504a5;
     box-shadow: inset 0 0 10px 1px #050611;*/
 }

 .roadmap .roadmap-text {
     float: none;
     width: 100%;
     padding: 30px 15px 30px;
     display: table;
     position: relative;
     color: #fff;
     margin: 0;
     background-color: rgba(0, 0, 0, .2);
 }

 span.lead {
     color: #7e4ab6;
 }

 .roadmap .roadmap-item-text h4 {
     font-weight: normal;
     font-size: 20px;
     color: #000000;
 }

 .roadmap .roadmap-item-text p {
     margin: 0px;
     line-height: 1.4;
 }

 .roadmap .roadmap-item .roadmap-day {
     position: static;
     transform: none;
     padding: 0;
     background: none;
     margin: 0px 0px 10px 0px;
     text-align: center;
     text-transform: uppercase;
     font-size: 15px;
     color: #0767e0;
 }

 .roadmap .roadmap-item:nth-child(2n+1) .roadmap-day::after {
     display: none;
 }

 .roadmap .roadmap-item:after {
     height: 9px;
     content: "";
     width: 100%;
     background: #7f49b7;
     position: absolute;
     top: 179px;
     left: 0px;
     right: 0px;
 }

 .roadmap .roadmap-item:before {
     width: 0;
     height: 0;
     border-left: 16px solid transparent;
     border-right: 16px solid transparent;
     border-bottom: 12px solid #7f49b7;
     content: "";
     display: block;
     position: absolute;
     left: 50%;
     top: 168px;
     margin-left: -16px;
 }

 .roadmap .roadmap-item.even .roadmap-text {
     padding: 0px 15px 30px;
 }

 .roadmap .roadmap-item.even:after {
     background: #ffffff;
     top: auto;
     bottom: 179px;
 }

 .roadmap .roadmap-item.even:before {
     border-top: 12px solid #ffffff;
     border-bottom: 0px;
     top: auto;
     bottom: 168px;
 }




 /*Toenomics*/
 .token-sale {
     background-image: url('../img/how-it-works.png');
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
     padding-top: 0;
 }


 .livefeed-list {
     list-style: none;
     margin: 0px;
     padding: 0px;
 }

 .livefeed-list li {
     display: block;
 }

 .livefeed-list li span {
     color: #fbbd18;
     font-weight: bold;
 }

 .token-allocation-box {
     background: #0767e0;
     -webkit-border-radius: 0;
     border-radius: 10px;
     -webkit-box-shadow: none;
     box-shadow: none;
     color: #ffffff;
     padding: 15px 15px;
     margin-bottom: 20px;
 }

 .token-allocation-box .token-sale-left {
     -ms-flex: 0 0 40%;
     flex: 0 0 100%;
     max-width: 100%;
     text-align: center;
 }

 .token-allocation-box .token-sale-right {
     -ms-flex: 0 0 40%;
     flex: 0 0 100%;
     max-width: 100%;
 }

 .token-allocation-box .row {
     margin: 0px;
 }

 .token-allocation-box .sale-list {
     padding: 25px 10px !important;
     margin: 0px 0px 30px 0px !important;
     border-bottom: 2px solid #dda204;
     text-align: center;
     box-shadow: inset 0 0 10px 1px #aaaacd;
     border-radius: 5px;
 }

 .sale-chart-view {
     padding: 0px 30px;
     margin-bottom: 50px;
 }

 .sale-chart-view+.sale-chart-view {
     margin-top: 30px;
 }

 .token-allocation-box .sale-list h4 {
     font-weight: bold;
     margin-bottom: 5px;
 }

 .token-allocation-box .sale-list .price-tag {
     line-height: 1.5;
 }

 .token-allocation-box .row:last-child .sale-list {
     width: 100%;
     padding: 0;
     margin: 0px;
     border: none;
 }

 .livefeed-list li {
     display: inline-block;
 }

 .token_distribution {
     background: url('assets/images/token_dist.jpg');
     background-size: cover;
     background-position: center center;
     background-repeat: no-repeat;
     padding: 120px 0;
 }

 .doughnut {
     display: flex;
     align-items: center;
 }

 .doughnutChartContainer {
     width: 50%;
     margin-right: 10px;
     position: relative;
     padding: 20px 0;
 }

 .doughnut .chart-legend {
     width: 50%;
     list-style-type: none;
     text-align: center;
     -moz-padding-start: 0;
     padding-left: 0;
 }

 canvas#doughnutChart {
     height: 440px !important;
     width: 440px !important;
 }

 .doughnut .chart-legend {
     float: left;
     list-style-type: none;
     text-align: center;
     -moz-padding-start: 0;
     padding-left: 0;
 }

 .doughnut .chart-legend ul {
     margin: 0;
     padding: 0;
     padding: 50px;
     border-radius: 5px;
 }

 .doughnut .chart-legend li {
     list-style: none;
     text-align: left;
     display: table;
     line-height: normal;
     padding: 5px 0;
 }

 .doughnut .chart-legend li+li {
     margin-top: 16px;
 }

 .doughnut .chart-legend li span {
     display: table-cell;
     font-size: 18px;
     color: #fff;
 }

 .doughnut .chart-legend li .line-legend-icon,
 .doughnut .chart-legend li .doughnut-legend-icon {
     position: relative;
     float: left;
     left: 0;
     top: 2px;
     width: 15px;
     height: 15px;
     border-radius: 3px;
 }

 .doughnut .chart-legend li .doughnut-legend-text,
 .doughnut .chart-legend li .line-legend-text {
     padding-left: 10px;
     font-weight: 700;
 }

 .token-sale .button-wrapper .btn {
     min-width: calc(50% - 17px);
 }

 ul.allocation-list {
     padding: 0;
     list-style: none;
     margin: 0;
     font-size: 18px;
 }

 ul.allocation-list li {
     margin-bottom: 10px;
     position: relative;
     padding-left: 35px;
 }

 ul.allocation-list span {
     min-width: 60px;
     font-weight: 700;
     display: inline-block;
     color: #000000;
 }

 ul.allocation-list li:before {
     background: #000000;
     height: 16px;
     width: 16px;
     content: "";
     border-radius: 16px;
     position: absolute;
     left: 0;
     top: 6px;
 }

 .allocation-list-point {
     position: absolute;
     width: 480px;
     height: 480px;
     padding: 0;
     margin: 0;
     z-index: 100000;
 }

 .allocation-list-point li {
     position: absolute;
     top: 0;
     right: 0;
     width: 50%;
     height: 50%;
     transform-origin: 0% 100%;
 }

 .allocation-list-point li span {
     position: absolute;
     background: #fbbd18;
     padding: 8px 15px;
     z-index: 1;
     color: #fff;
     line-height: 20px;
     left: -100px;
     top: -70px;
     opacity: 0;
     visibility: hidden;
     transition: all 300ms;
 }

 .token-sale-box {
     background-image: linear-gradient(to right, rgb(137 66 192), rgb(137 66 192 / 5%));
     padding: 20px;
     border-radius: 5px;
 }

 .token-sale-box h4 {
     background: linear-gradient(to right, rgb(17, 6, 26), rgba(137, 66, 192, 0.05));
     padding: 10px 15px;
     border-left: 2px solid;
     border-radius: 10px;
 }

 .token-sale-box span {
     background-image: linear-gradient(to right, rgb(17 165 90), rgb(137 66 192 / 5%));
     padding: 5px;
     display: block;
     border-left: 5px solid #0f9752;
     border-radius: 10px 0px 0 10px;
     margin-bottom: 10px;
 }

 .sec_title h2 {
     color: #00bcff;
     margin: 0px;
     font-size: 52px;
     font-weight: 900;
     margin-bottom: 10px;
 }


 body {
     margin: 0;
     width: 100%;
     height: 100vh;
     background: linear-gradient(-45deg, #000116, #010719, #101c40, #000025);
     background: -webkit-linear-gradient(-45deg, #000116, #010719, #101c40, #000025);
     background: -moz-linear-gradient(-45deg, #000116, #010719, #101c40, #000025);
     background-size: 400% 400%;
     animation: gradientBG 10s ease infinite;
 }

 @keyframes gradientBG {
     0% {
         background-position: 0% 50%;
     }

     50% {
         background-position: 100% 50%;
     }

     100% {
         background-position: 0% 50%;
     }
 }

 /*.container {
    width: 100%;
    position: absolute;
    top: 35%;
    text-align: center;
}*/




 .js-play-icon {
     align-items: center;
     display: flex;
     height: 100%;
     left: 0;
     position: absolute;
     text-align: center;
     top: 0;
     width: 100%;
 }

 .js-play-icon a {
     margin: auto;
 }

 .js-play-icon img {
     margin: 0 auto;
     max-width: 150px;
 }

 /* Video Button */
 .roadmap-icon {
     display: inline-block;
 }

 .roadmap-icon a {
     display: inline-block;
     vertical-align: middle;
     border-radius: 999px;
 }

 .roadmap-icon:before,
 .roadmap-icon:after {
     border-radius: 999px;
     content: "";
     height: 100%;
     left: 51%;
     margin-left: -45px;
     margin-top: -50px;
     position: absolute;
     top: 57%;
     width: 100%;
 }

 .roadmap-icon:before {
     /*background: rgba(0, 20, 255, 1);*/
     z-index: -1;
     -webkit-animation: tmGrowShrink 1.2s ease-in-out 0s infinite both;
     animation: tmGrowShrink 1.2s ease-in-out 0s infinite both;
 }

 .roadmap-icon:after {
     background: rgba(255, 255, 255, 0.7);
     z-index: -2;
     -webkit-animation: tmGrowShrink 1.2s ease-in-out 0.3s infinite both;
     animation: tmGrowShrink 1.2s ease-in-out 0.3s infinite both;
 }

 .roadmap-icon img {
     display: inline-block;
     width: 90px;
     line-height: 90px;
     text-align: center;
     background: #ffffff;
     border-radius: 999px;
     -webkit-transition: all 0.3s ease-in-out 0s;
     -o-transition: all 0.3s ease-in-out 0s;
     transition: all 0.3s ease-in-out 0s;
 }

 .roadmap-icon img i {
     font-size: 26px;
     vertical-align: middle;
     padding-left: 4px;
 }

 .roadmap-icon:hover img {
     color: #ffffff;
 }



 /** Animations **/
 @-webkit-keyframes tmGrowShrink {
     0% {
         -webkit-transform: scale(1);
         transform: scale(1);
         opacity: 1;
     }

     100% {
         -webkit-transform: scale(1.55);
         transform: scale(1.55);
         opacity: 0;
     }
 }

 @keyframes tmGrowShrink {
     0% {
         -webkit-transform: scale(1);
         transform: scale(1);
         opacity: 1;
     }

     100% {
         -webkit-transform: scale(1.55);
         transform: scale(1.55);
         opacity: 0;
     }
 }

 @-webkit-keyframes tmSpin {
     0% {
         -webkit-transform: rotate(0);
         transform: rotate(0);
     }

     100% {
         -webkit-transform: rotate(360deg);
         transform: rotate(360deg);
     }
 }

 @keyframes tmSpin {
     0% {
         -webkit-transform: rotate(0);
         transform: rotate(0);
     }

     100% {
         -webkit-transform: rotate(360deg);
         transform: rotate(360deg);
     }
 }

 @-webkit-keyframes tmSpinReverse {
     0% {
         -webkit-transform: rotate(0);
         transform: rotate(0);
     }

     100% {
         -webkit-transform: rotate(-360deg);
         transform: rotate(-360deg);
     }
 }

 @keyframes tmSpinReverse {
     0% {
         -webkit-transform: rotate(0);
         transform: rotate(0);
     }

     100% {
         -webkit-transform: rotate(-360deg);
         transform: rotate(-360deg);
     }
 }



 /*===============*
  FOOTER SECTION
*================*/
 footer {
     float: left;
     color: #fff;
     background-image: url('../img/footer.jpg');
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
 }

 .copyright-area {
     padding: 20px 0;
     background-color: rgb(0 11 36 / 31%);
 }

 footer .sec-title h4.widget-title {
     color: #ffffff;
 }

 .footer-logo {
     margin-bottom: 22px;
     max-width: 120px;
 }

 .copyrights {
     color: #fff;
     margin-top: 10px;
 }

 .copyrights a {
     color: #fbbd18;
 }

 footer li a {
     font-size: 18px;
     font-weight: 700;
 }

 footer li a:hover {
     color: #0767e0;
 }

 .socials {
     clear: both;
     float: left;
     width: 100%;
     margin-top: 25px;
 }

 .socials:after {
     content: "";
     display: block;
     visibility: hidden;
     clear: both;
 }

 .socials ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .socials li {
     list-style: none;
     float: left;
     width: 50%;
     margin-top: 15px;
 }

 .socials li a {
     color: rgba(242, 242, 242, 0.6);
 }

 .socials li a:hover {
     color: #fbbd18;
 }

 .socials li i {
     font-size: 16px;
     color: rgba(255, 255, 255, 0.8);
     margin: 5px;
 }

 .footer-block {
     max-width: 550px;
     padding: 0px 15px;
 }

 .footer-widget-area {
     padding: 120px 0px;
 }

 .widget-area .widget-title {
     font-size: 24px;
     font-weight: bold;
     margin-bottom: 30px;
 }

 .contact-info ul {
     margin: 0px;
     padding: 0px;
     list-style: none;
 }

 .contact-info ul li {
     margin-bottom: 10px;
     position: relative;
     font-family: "Poppins", sans-serif;
     font-size: 18px;
     padding-left: 35px;
 }

 .contact-info ul li:last-child {
     margin-bottom: 0;
 }

 .contact-info ul li:before {
     opacity: 1;
     font-family: "Font Awesome 5 Free";
     color: #0767e0;
     font-size: 24px;
     position: absolute;
     top: 0;
     left: 0;
 }

 .contact-info ul li.email:before {
     content: "\f1fa";
     font-weight: 900;
 }

 .contact-info ul li.phone:before {
     content: "\f2a0";
     font-weight: 900;
     transform: rotate(-45deg);
 }

 .widget-area .socials {
     margin-top: 0px;
 }

 .widget-area .socials ul {
     margin: 0;
     padding: 0;
 }

 .widget-area .socials ul li {
     margin: 0 5px;
     padding: 0;
     list-style: none;
     display: inline-block;
     float: none;
     width: auto;
 }

 .widget-area .socials ul li a {
     border: 1px solid rgba(255, 255, 255, 0.2);
     -webkit-border-radius: 5px;
     border-radius: 50px;
     width: 48px;
     height: 48px;
     line-height: 46px;
     text-align: center;
     color: #fbbd17;
     font-size: 20px;
     display: block;
     -webkit-transition: all 300ms;
     transition: all 300ms;
     background-color: #0767e0;
 }

 .widget-area .socials li i {
     color: #ffffff;
     font-size: 20px;
     -webkit-transition: all 400ms;
     transition: all 400ms;
     margin: 0;
 }

 .widget-area .socials ul li a:hover,
 .widget-area .socials ul li:hover a {
     color: #fff;
     background: #0767e0;
 }

 .widget-area .socials li:hover i,
 .widget-area .socials li a:hover i {
     color: #fff;
 }

 .widget-area .newsletter {
     position: relative;
 }

 .widget-area .newsletter input[type="email"] {
     border: 1px solid rgba(255, 255, 255, 0.2);
     -webkit-border-radius: 5px;
     border-radius: 5px;
     background: transparent;
     color: #ffffff;
     height: 48px;
     padding-right: 55px;
 }

 .widget-area .newsletter button {
     font-size: 0;
     padding: 0px;
     position: absolute;
     top: 0px;
     right: 0px;
     width: 48px;
     height: 48px;
     padding: 0;
 }

 .widget-area .newsletter button:before {
     font-family: "Font Awesome 5 Brands";
     color: #000000;
     font-size: 24px;
     content: "\f3fe";
 }

 .widget-area .newsletter label {
     margin: 15px 0px 0px;
     color: #ffffff;
 }

 .widget-area .newsletter label input[type="radio"] {
     margin-right: 5px;
     position: relative;
     top: 2px;
 }

 .widget-area .newsletter label a {
     font-weight: 700;
 }

 .copy-text {
     text-align: right;
     font-weight: 600;
 }

 ul.horizontal-menu {
     padding: 0px;
     margin: 0px;
 }

 ul.horizontal-menu li {
     list-style: none;
     display: inline-block;
 }

 ul.horizontal-menu li:not(:last-child):after {
     width: 6px;
     height: 6px;
     content: "";
     margin: 0px 12px;
     display: inline-block;
     background: #0767e0;
     -webkit-border-radius: 5px;
     border-radius: 5px;
     position: relative;
     top: -2px;
 }

 ul.horizontal-menu li a {
     font-size: 15px;
 }


 /*Dao*/

 .responsive_block {
     display: none;
 }

 .scene {
     width: 400px;
     height: 400px;
     margin: 2% auto;
     perspective: 100rem;
 }

 .wrapper {
     width: 100%;
     height: 100%;
     transform: rotateX(-8deg) rotateY(0deg);
     transform-style: preserve-3d;
 }

 .globe {
     position: relative;
     width: 100%;
     height: 100%;
     margin: 0 auto;
     transform-style: preserve-3d;
     animation: spin 25s 0ms infinite linear;
 }

 .ring {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border: 3px;
     border-style: dashed;
     border-radius: 50%;
     color: #47c4f6;
     animation: opacity 0.5s forwards ease-in-out;
     opacity: 0;
 }

 .ring:nth-child(1) {
     transform: rotateY(4deg);
 }

 .ring:nth-child(2) {
     transform: rotateY(30deg);
 }

 .ring:nth-child(3) {
     transform: rotateY(56deg);
 }

 .ring:nth-child(4) {
     transform: rotateY(82deg);
 }

 .ring:nth-child(5) {
     transform: rotateY(108deg);
 }

 .ring:nth-child(6) {
     transform: rotateY(134deg);
 }

 .ring:nth-child(7) {
     transform: rotateY(160deg);
 }

 .ring:nth-child(8) {
     transform: rotateX(24deg);
     color: #78b94d;
     border-style: solid;
     border-width: 3px;
 }

 .ring:nth-child(9) {
     transform: rotateX(-54deg);
     color: #78b94d;
     border-style: solid;
     border-width: 3px;
 }

 .ring:nth-child(10) {
     transform: rotateX(35deg);
     color: #78b94d;
     border-style: solid;
     border-width: 3px;
 }

 .ring:nth-child(11) {
     transform: rotateX(53deg);
     color: #78b94d;
     border-style: solid;
     border-width: 3px;
 }

 .ring:nth-child(12) {
     transform: rotateX(70deg);
     color: #78b94d;
     border-style: solid;
     border-width: 3px;
 }

 .ring:nth-child(13) {
     transform: rotateX(113deg);
     color: #78b94d;
     border-style: solid;
     border-width: 3px;
 }

 .ring:nth-child(14) {
     transform: rotateX(141deg);
     color: #78b94d;
     border-style: solid;
     border-width: 3px;
 }


 @keyframes spin {
     to {
         transform: rotateY(-360deg);
     }
 }

 @keyframes opacity {
     to {
         opacity: 1;
     }
 }

 .our_dao {

     background: linear-gradient(to bottom, #151935 0%, #151935 100%);

 }


 .metaverses {
     background-image: url('../img/metaverses_bg.jpg');
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
     padding-top: 180px;
     padding-bottom: 100px;
 }
 .metaverses{    
     max-width: 100vw;
    overflow: hidden;
}
 .metaverse_itm img {
     width: 250px !important;
     height: 250px !important;
 }

 .ufo {
     text-align: center;
     background-color: #8340BA;
     border: solid 1px #8340BA;
     height: 95%;
     width: 100%;
     border-radius: 100%;
 }

 .ufo svg {
     margin: 0;
     position: absolute;
     top: 50%;
     left: 50%;
     -ms-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     width: 60%;
 }

 /*Token*/
 .our_token {
     position: relative;
     padding-left: 50px;
     padding-right: 50px;
     background-image: url('../img/bg3.png');
     background-size: cover;
     background-position: center !important;
     background-repeat: no-repeat;
     background-attachment: fixed;
 }

 .our_token .sec_title {
     margin-bottom: 150px;
 }

 .margin_top {
     margin-top: 150px;
 }

 .margin_bottom {
    margin-bottom: 150px;
}

 #dc {
     --border: 3px dotted #00b8ff;
     text-align: center;
     /* padding: 100px 50px!important; */
     /* max-width: 400px; */
     margin: 0 auto;
 }

 #dc .tit {
     z-index: 50;
 }

 #dc .p {
     z-index: 50;
 }

 #dc .cir {
     z-index: 0;
     --circle: calc(50px + 10 * (100vw - 367px) / 25px);
     /* --circle:calc(450px + 200 * (100vw - 320px) / 1080);*/
     margin: auto;
     margin-top: 176px;
     pointer-events: none;
     user-select: none;
     -moz-user-select: none;
     border-radius: 50%;
     max-width: 50px;
     max-height: 50px;
     width: 100%;
     height: 100%;
     font-weight: bolder;
 }

 #dc .cir:before,
 #dc .cir:after {
     opacity: 0;
     --time: 4s;
     animation: light var(--time) infinite linear;
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     border-radius: 50%;
     border: var(--border);
     content: "";
 }

 #dc .cir:after {
     animation-delay: 2s;
 }

 #dc .cir>div:not(.logo) {
     z-index: 100;
     border-radius: 50%;
     position: absolute;
     width: var(--percent);
     height: var(--percent);
     transform: translate(-50%, -50%);
     top: 50%;
     left: 50%;
 }

 #dc .cir>div.cir1 {
     --percent: 150%;
     --rotate: rotate_l;
     font-size: 5px;
     font-weight: 900;
     letter-spacing: .00rem;
 }

 #dc .cir>div.cir2 {
     --percent: 112%;
     --rotate: rotate_r;
     font-size: 5px;
     font-weight: 900;
     letter-spacing: .00rem;
 }

 #dc .cir>div.cir3 {
     --percent: 65%;
     --rotate: rotate_l;
     font-size: 6px;
     font-weight: 900;
     letter-spacing: .00rem;
 }

 #dc .cir>div>div {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     font-family: 'General Sans', sans-serif;
 }

 #dc .cir>div:not(.logo) svg {
     animation: 50s infinite linear var(--rotate);
     fill: var(--white);
     font-weight: 500;
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
 }

 #dc .cir>div:not(.logo) svg tspan {
     fill: #001bff;
 }

 #dc .logo {
     z-index: 100;
     border: var(--border);
     border-radius: 50%;
     padding: 15px;
     --dim: 55%;
     display: flex;
     align-items: center;
     justify-content: center;
     position: absolute;
     width: 200px;
     height: 200px;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     text-transform: uppercase;
 }

 #dc .logo svg {
     width: 100%;
 }

 #dc .logo .txt {
     fill: var(--white);
 }

 #dc .logo .symb {
     fill: #fff;
 }

 #dc .logo img {
     border-radius: 5%;
 }

 @keyframes rotate_r {
     0% {
         transform: rotate(0);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 @keyframes rotate_l {
     0% {
         transform: rotate(0);
     }

     100% {
         transform: rotate(-360deg);
     }
 }

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

     5% {
         transform: scale(1.025);
         opacity: 0.5;
     }

     100% {
         transform: scale(1.5);
         opacity: 0;
     }
 }



 /* case */



 .step {
     text-align: center;
     margin-bottom: 60px;
 }

 .step .ico:after {
     border-top: 5px dotted #0bf;
     content: "";
     width: 118%;
     z-index: -1;
     height: 1px;
     position: absolute;
     top: 50%;
     left: 99%;
 }

 .step.three .ico:after {
     content: none;
 }

 .step .ico {
     box-shadow: 0 0 50px 50px #162348;
     width: 180px;
     height: 180px;
     border-radius: 50%;
     border: 2px dotted #00b8ff;
     position: relative;
     margin: 0 auto;
     margin-bottom: 50px;
     animation: 50s infinite linear var(--rotate);
 }

 .step .ico svg {
     z-index: 10;
     fill: #fff;
     width: 80px;
     height: 80px;
     line-height: 258px;
     margin: 0 auto;
     top: 50px;
     position: relative;
 }

 .step h3 {
     font-size: calc(17px + 3 * (100vw - 320px) / 1080);
     font-weight: bold;
     color: #bfedff;
 }

 .step p {
     font-size: 90%;
     line-height: 1.6;
 }

 footer {
     /* box-shadow: 0px 10px 22px 0px rgba(0, 0, 0, 0.3) !important;
 }

 footer .container a {
     padding: 4rem 8rem !important;
     background-color: #00bbffa2 !important;
     color: white !important;
     border-radius: 18px !important;
     font-size: 20px !important;
 }

 footer .container a:nth-child(odd) {
     padding: 4rem 8.55rem !important;
 }

 footer .container a:hover {
     color: #00bbff !important;
     background-color: white !important;
 }
======= */
    box-shadow: 0px 10px 22px 0px rgba(0, 0, 0, 0.3) !important;
  }

  footer .container a {
    padding: 4rem 8rem !important;
    background-color: #00bbffa2 !important;
    color: white !important;
    border-radius: 18px !important;
    font-size: 20px !important;
  }
  
  footer .container a:nth-child(odd) {
    padding: 4rem 8.55rem !important;
  }
  
  footer .container a:hover {
    color: #00bbff !important;
    background-color: white !important;
  }

  #hero_right{
    position: absolute;
    right: 5%;
    width: 55%;
    top: 20%;
    opacity: 0.7;
  }

  #token_address{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }