body {
    background: #070710;
    color: #ccceef;
    font-family: "Roboto", sans-serif;
    font-style: normal;
	overflow-x:hidden;
}
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  width: 50px;
  height: 50px;
  line-height: 15px;
  font-size: 18px;
  border: none;
  border: 1px solid #FFFFFF;
  outline: none;
  border-radius: 100%;
  color: white;
  cursor: pointer;
  padding: 15px;
}
.wrapper {
    position: relative;
    margin-top: -12%;
    z-index: 1;
}
/*header section start*/
header {
    line-height: 60px;
	backdrop-filter: saturate(180%) blur(20px);
}
.color-purple {
	color: rgb(113, 48, 195);
}
.secondary-heading {
	font-size: 40px;
}
.color-text {
    color: #ccceef;
}
.navigation-link a {
    position: relative;
    z-index: 1;
}
.navigation-link a:hover{
    color: #FF3BD4;
}
.color-pink {
    color: #FF3BD4;
}
.btn-creative {
    background: #000000;
    position: relative;
    z-index: 1;
    border-radius: 10px;
}
.btn-creative::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 100%;
    top: 0;
    left: 0;
    border-radius: 10px;
    height: 100%;
    transition: 0.5s;
    background-image: linear-gradient(to right, rgb(113, 48, 195)0%, rgb(7, 7, 16) 30%);
}
.btn-creative::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 104%;
    top: -2px;
    left: -3px;
    border-radius: 10px;
    height: 110%;
    animation-name: glowing;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    filter: blur(0px);
    transition: opacity 0.3s ease-in-out;
    background-image: linear-gradient(45deg, rgb(255, 59, 212), rgb(113, 48, 195));
    opacity: 1;
}
.btn-creative:hover::after {
    opacity: 0;
    transition: 0.3s;
}
@keyframes glowing {
    0% {background-position: 0, 0;}
    50% {background-position: 200%, 0;}
    0% {background-position: 0, 0;}
}
/*header-section end*/

/*banner section start*/
.section-heading {
    font-size: 60px;
}
.font-size-20px {
    font-size: 20px;
}
.font-size-25px {
    font-size: 25px;
}
.banner-section {
    background: url("../images/shape_net_ico_hero_section_bg.svg");
    background-size: 100% auto;
    background-repeat: no-repeat;
}
.dropdown ul li a {
    font-weight: 500;
    text-transform: uppercase;
}
.dropdown:hover ul {
    display: block;
}
.dropdown:hover ul li:hover {
    margin: 0 10px;
}
.dropdown:hover ul li:hover a {
    background: #000000;
}
.btn-creative-one {
    position: relative;
    z-index: 1;
    content: "";
    border-radius: 6px;
    text-align: center;
    color:  #FF3BD4;
    background-image: linear-gradient(to right, rgb(255, 59, 212), rgb(113, 48, 195));
    transition: 0.3s;
    box-shadow: 0px -8px 18px -7px rgba(255, 59, 212, 1);
}
.btn-creative-one:hover {
    transform: translatey(-6px);
    color: #FFFFFF;
    box-shadow: 0px 24px 26px -20px rgba(255, 59, 212);
    background-image: linear-gradient(0deg, rgb(255, 59, 212), rgb(113, 48, 195));
}
.btn-wrapper {
    position: relative;
    background-color: #070710;
    z-index: 1;
    transition: 0.3s;
    border-radius: 6px;
}
.btn-wrapper:hover {
    background-color: transparent;
}
.btn-wrapper::before {
    z-index: -1;
    position: absolute;
    content: "";
    background-image: linear-gradient(#FF3BD4, #7130C3, transparent);
    border-radius: 50%;
    transition: 400ms ease;
    filter: blur(12px);
    opacity: 0.4;
    left: 0;
    right: 0;
    top: 45%;
}
.countdown-progress {
    max-width: 880px;
    margin: auto;
    background-color: #000000;
    border: 1px solid rgb(47, 51, 109);
    position: relative;
    border-radius: 20px;
    padding: 15px;
}
.countdown-progress::before {
    content: "";
    position: absolute;
    z-index: -1;
    background-image: linear-gradient(140deg, #7064E9, #FC6500, #7064E9);
    inset: 0;
    padding: 10px;
    opacity: 0.24;
    filter: blur(12px);
}
.progress-heading {
    position: relative;
    z-index: 1;
}
.progress-heading h2 {
    font-size: 16px;
    font-weight: 700;
}
.progress-heading::before {
    content: "";
    position: absolute;
    z-index: -1;
    background-image: radial-gradient(#5349CA, transparent);
    width: 8px;
    height: 8px;
    left: 36%;
    top: 30%;
}
.progress-heading::after {
    content: "";
    position: absolute;
    z-index: -1;
    background-image: radial-gradient(#5349CA, transparent);
    width: 8px;
    height: 8px;
    right: 36%;
    top: 30%; 
}
.progress-inner-box {
    background-image: url("../images/shape_bg_ico_countdown.svg");
    background-size: cover cover;
    background-repeat: no-repeat;
}
.progress-inner-box > div {
	margin: 4rem 0;
}
.progress-inner-box > div > div {
	margin: 0 1.4rem;
}
.count-number {
    background-color: #070710;
    border: 1px solid rgb(47, 51, 109);
    padding: 0.6rem;
	border-radius: 15px;
	
}
.blue-dots {
	position: relative;
}
.blue-dots::after {
	position: absolute;
	content: "";
	width: 8px;
	height: 8px;
	background-image: radial-gradient(#5349CA, transparent);
	right: 0;
	top: 3rem;
}
.blue-dots:last-child::after {
	display: none;
}
.blue-dots::before {
	position: absolute;
	content: "";
	width: 8px;
	height: 8px;
	background-image: radial-gradient(#5349CA, transparent);
	left: 0;
	top: 3rem;
}
.blue-dots:first-child::before {
	display: none;
} 
.bg-light-grey {
    background-color: rgba(255, 255, 255, 0.1);
}
.bg-gredient-purple {
    background-image: linear-gradient(90deg, rgb(255, 59, 212), rgb(113, 48, 195));
    border-radius: 10px;
}
.border-box {
    background-image: none;
    background-color: #0F1021;
    border: 1px solid #2F336D;
    padding: 20px;
    border-radius: 10px;
}
.progress-bar-tags {
    position: relative;
    z-index: 1;
}
.progress-bar-tags::before {
    content: "";
    position: absolute;
    z-index: 1;
    background-image: linear-gradient(0deg, transparent, #FF3BD4);
    width: 2px;
    height: 18px;
    left: 4rem;
    top: 24px;
}
.progress-bar-tags:last-child::before {
    left: 1.5rem;
}
.shape-globe {
	position: absolute;
	top: 35%;
	z-index: -1;
	left: 2%;
	max-width: 188px;
}
.shape-coin {
	z-index: -1;
	position: absolute;
	top: 35%;
	right: 98px;
	max-width: 227px;
}
.shape-globe img, .shape-coin img {
	max-width: 100%;
	height: auto;
}
.shape-coin {
	animation-name: uptodown;
	animation-iteration-count: infinite;
    animation-duration: 3s;
	animation-fill-mode: alternate;
}
.shape-globe {
    animation-name: uptodown;
	animation-iteration-count: infinite;
    animation-delay: 0.5s;
    animation-duration: 3s;
	animation-fill-mode: alternate;
}
@keyframes uptodown {
	0% {transform: translatey(-37px);}
	50% {transform: translatey(-17px);}
    100% {transform: translatey(-37px);}
}
/* banner section end */

/* swipe slider start */
.swiper-slider {
    position: relative;
    margin-top: -5%;
    z-index: 1;
}
.marquee {
    overflow: hidden;
}
.marquee-content {
    white-space: nowrap;
      display: flex;
      animation: scroll-marquee 15s linear infinite;
    }
    @keyframes scroll-marquee {
      0% {
        transform: translateX(0%);
      }
      100% {
        transform: translateX(-50%);
      }
    }
.slider {
    position: relative;
    z-index: 1;
    pointer-events: auto;
    padding: 1px;
    border-radius: 10px;
    background-color: rgba(47, 51, 109, 0.8);
}
.slider a {
    background-color: #070710;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}
.slider a img {
    width: 120px;
    height: 70px;
    margin: 0 20px;
    vertical-align: middle;
}
.slider:hover::before {
    opacity: 1;
}
.slider::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: 0.3s ease-in-out;
    border-radius: 10px;
    background-image: linear-gradient(120deg, #944FEB 0%, #DB5D41 37%, #944FEB 100%);
}
.slider::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 22%;
    left: 0px;
    right: 0px;
    height: 55%;
    background-color: #070710;
}
/* swipe slider end */

/* about section start */
.ico-block li {
    position: relative;
    z-index: 1;
}
.ico-block li::before {
    position: absolute;
    z-index: -1;
    content: "";
    width: 30px;
    height: 30px;
    left: -50px;
    border-radius: 100%;
    background-image: linear-gradient(0deg, #4E47A6, #101122);
}
.ico-block li::after {
    position: absolute;
    z-index: -2;
    content: "";
    width: 5px;
    height: 170px;
    left: -38px;
    top: 20px;
    border-radius: 100%;
    background-image: linear-gradient(0deg, #4E47A6, #101122);
}
.about-img {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 1;
	bottom: 12px;
    animation-name: uptodown;
	animation-iteration-count: infinite;
    animation-delay: 0.5s;
    animation-duration: 3s;
	animation-fill-mode: alternate;
}
@keyframes uptodown {
	0% {transform: translatey(-37px);}
	50% {transform: translatey(0px);}
    100% {transform: translatey(-37px);}
}


.polygon-shape {
	width: 252px;
	position: absolute;
	z-index: -1;
	filter: blur(100px);
}
.polygon-shape-1 {
	top: 30%;
	left: 0;
}
.polygon-shape-2 {
	top: 0;
	right: 0;
}
.polygon-shape img {
	height: auto;
	max-width: 100%;
}
/* about section end */

/*problem solution section start*/
.box-glow {
	position: relative;
}
.box-glow::before {
	position: absolute;
	z-index: -1;
	content: "";
	filter: blur(22px);
	opacity: 0.24;
	inset: 1px;
	background: linear-gradient(145deg, #FC6500, #7064E9, #FC6500);
}
.box-glow::after {
        left: 0;
    right: 0;
    bottom: 10px;
    content: "";
    z-index: 1;
    height: 30px;
    filter: blur(45px);
    position: absolute;
    background-image: linear-gradient(45deg, #FC6500, #7064E9);
}
.icon {
	background: #070710;
	border: 1px solid #2F336D;
	width: 70px;
	display: inline-flex;
	flex: 0 0 auto;
	justify-content: center;
	align-items: center;
	border-radius: 100%;
	height: 70px;
}
.icon img {
	max-height: 36px;
}
.check-icon {
	width: 22px;
	flex: 0 0 auto;
	margin-top: 4%;
}
.check-icon img {
	width: 100%;
}
.icon-label {
	font-size: 20px;
	font-weight: 600;
	display: inline-flex;
	flex-direction: column;
}
.icon-label small {
	font-weight: 400;
}
/*problem solution section end*/

/*ICO feature section start*/
.feature-icon {
	width: 50px;
	display: flex;
}
.feature-icon img {
	width: 100%;
}
.change-animation {
	margin-top: 15rem;
	position: relative;
	z-index: 1;
}
.change-animation::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	opacity: 0.4;
	filter: blur(100px);
	height: 130px;
	background-size: 400% 400%;
	animation: change-animation 5s infinite;
	animation-direction: alternate-reverse;
	background-image: linear-gradient(45deg, #7130C3, #FF3BD4);
}
@keyframes change-animation {
	from {background-position-x: 100%;}
	to {background-position-y: 50%;}
}
/*ICO feature section end*/

/*ICO choose section start*/
.card-personal {
    background-color: transparent;
    color: #FFFFFF;
    background-image: linear-gradient(0deg, transparent, #2F336D);
    padding: 20px;
    position: relative;
    z-index: 1;
    border-radius: 20px;
}
.card-personal::before {
    position: absolute;
    content: "";
    z-index: -1;
    top: 1px;
    left: 1px;
    border-radius: 20px;
    right: 1px;
    bottom: -1px;
    background-color: #070710;
}
.card-personal img {
    width: 100px;
}
.mobile-img img {
    width: 100%;
}
/*ICO choose section end*/

/*Token section start*/
.percentage-section li {
	padding-bottom: 15px;
	margin-bottom: 10px;
	border-bottom: 1px solid #2F336D;
}
.percentage-section li:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: none;
}
.percentage-section li:nth-child(1) .percent {
	background: #FC1CCF;
}
.percentage-section li:nth-child(2) .percent {
	background: #DF5E08;
}
.percentage-section li:nth-child(3) .percent {
	background: #07C87F;
}
.percentage-section li:nth-child(4) .percent {
	background: #49B7F7;
}
.percentage-section li:nth-child(5) .percent {
	background: #DABA5E;
}
.percentage-section li:nth-child(6) .percent {
	background: #FF0054;
}
.percent {
	display: inline-block;
	text-align: center;
	width: 76px;
	font-size: 24px;
	height: 46px;
	border-bottom-right-radius: 10px;
	border-top-left-radius: 10px;
}
.coin-img {
	position: relative;
	top: 1em;
}

/*Token section end*/

/*roadmap section start*/
.roadmap-main {
    display: flex;
    flex: nowrap;
}
.roadmap-block {
    flex: 1;
}
.roadmap-block:hover {
    transition: 1s;
    flex: 0 0 400px;
}
.roadmap-block ul {
    opacity: 0;
}
.roadmap-block:hover ul {
    opacity: 1;
}
.circle-img {
    position: absolute;
    content: "";
    top: 26rem;
    right: 10%;
}
.roadmap-block:hover .circle-img {
    top: -3rem;
    right: -10%;
}
/*roadmap section end*/

/*team section start*/
.team-sec-header a:focus {
    background-color: #2F336D;
}
.front-card span {
    background-image: url(../images/shape_circle_1.svg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 150px;
    height: 150px;
    padding: 5px;
}
.front-card span img {
    width: 100%;
}
.card-main-box:nth-child(1) .front-card span {
    background-image: url(../images/shape_circle_1.svg);
}
.card-main-box:nth-child(2) .front-card span {
    background-image: url("../images/shape_circle_2.svg");
}
.card-main-box:nth-child(3) .front-card span {
    background-image: url("../images/shape_circle_3.svg");
}
.card-main-box:nth-child(4) .front-card span {
    background-image: url("../images/shape_circle_4.svg");
}
.team-section ul:last-child .card-main-box:nth-child(1) .front-card span {
    background-image: url("../images/shape_circle_5.svg");
}
.team-section ul:last-child .card-main-box:nth-child(2) .front-card span {
    background-image: url("../images/shape_circle_6.svg");
}
.team-section ul:last-child .card-main-box:nth-child(3) .front-card span {
    background-image: url("../images/shape_circle_7.svg");
}
.team-section ul:last-child .card-main-box:nth-child(4) .front-card span {
    background-image: url("../images/shape_circle_8.svg");
}
.card-main-box .card-fliping:hover {
    transform: rotatey(180deg);
}
.card-fliping {
    width: 100%;
    transform-style: preserve-3d;
    transition: transform 0.5s;
}
.social-link {
    width: 58px;
    height: 58px;
    line-height: 17px;
    text-align: center;
    color: #FFFFFF;
    border-radius: 100%;
}
.social-link:hover {
    background-color: #FFFFFF;
    color: #000000;
}
.back-card, .front-card {
    padding: 10px;
    width: 100%;
	height: 306px;
    backface-visibility: hidden;
}
.back-card {
    top: 0;
    left: 0;
    position: absolute;
    padding: 20px;
    transform: rotatey(180deg);
}
/*team section end*/

/*whitepaper section start*/
.whitepaper-bg {
    background-image: url(../images/whitepaper_image_bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: 1;
}
.whitepaper-bg::before {
    position: absolute;
    content: "";
    z-index: -1;
    background: linear-gradient(0deg, #070710, #231740, #35225F);
    opacity: 0.7;
    width: 100%;
    inset: 0;
    height: 100%;
}
.whitepaper-img {
    margin: 5rem;
    animation-name: uptodown;
	animation-iteration-count: infinite;
    animation-delay: 0.5s;
    animation-duration: 3s;
	animation-fill-mode: alternate;
    position: relative;
}
.whitepaper-img::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 1.6%;
    filter: blur(30px);
    height: 5rem;
    width: 100%;
    background: linear-gradient(0deg, #FB3AD4, #5A19AB, #010314);
    z-index: -1;
}
.whitepaper-img img {
    width: 100%;
}
.whitepaper-right-bar1, .whitepaper-right-bar2 {
    padding: 10px 150px 10px 10px;
}
.whitepaper-right-bar1 {
    border-bottom: 1px solid #2F336D;
}
/*whitepaper section end*/

/*events section start*/
.event-img {
    background-color: #0F1021;
    position: relative;
}
.event-img a {
    background: linear-gradient(0deg, #7130C3, #FC6500);
}
.event-img img {
    width: 100%;
    mix-blend-mode: luminosity;
}
.event-date {
    position: absolute;
    top: 40%;
    text-align: center;
    line-height: 1;
    font-size: 24px;
    transform: translate(35%);
    font-weight: 600;
    color: #FFFFFF;
    opacity: 0;
    transition: 0.2s ease;
}
.event-sec-left:hover .event-date {
    opacity: 1;
}
.event-img-right img {
    width: 100%;
}
.calendar-icon i {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    line-height: 50px;
    text-align: center;
    background-color: #49B7F7;
}
/*events section end*/

/*faq section start*/
/*faq section end*/

/*footer section start*/
.footer-section {
    position: relative;
    z-index: 1;
    margin-top: -6%;
}
.border-top-bottom {
    border-top: 1px solid #2f336d;
    border-bottom: 1px solid #2f336d;
}
.border-right {
    border-right: 1px solid #2f336d;
}
.social-link-footer a {
    position: relative;
    z-index: 1;
    display: inline-block;
    width: 40px;
    overflow: hidden;
    height: 40px;
    border-radius: 6px;
    font-size: 20px;
    line-height: 2.6rem;
    text-align: center;
    background-image: linear-gradient(60deg, #DD00AC, #7130C3, #DD00AC);
    transition: 0.3s ease;
}
.social-link-footer a i {
    font-size: 24px;
}
.social-link-footer a:hover {
    transform: translatey(-2px);
    box-shadow: 0 6px 20px 0 rgba(255, 59, 212);
}
.social-link-footer a::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 90%;
    top: 2px;
    left: 2px;
    border-radius: 6px;
    height: 90%;
    inset: 1;
    background-color: #0F1021;
}
.footer-form {
    background-color: #FFFFFF;
}
.footer-form button {
    padding-top: 10px;
    padding-bottom: 10px;
}
/*footer section end*/


















@media screen and (max-width: 768px) {
    .progress-heading::after {
        right: 32%;
        top: 30%;
    }
    .progress-heading::before {
        left: 32%;
        top: 30%;
    }
    .roadmap-block {
        flex: 0 0 auto;
    }
    .shape-coin, .shape-globe {
        padding-top: 10px;
        right: 0;
    }
    .shape-coin, .shape-globe img {
        width: 80px;
    }
    .section-heading {
        font-size: 40px;
    }
}
@media screen and (min-width: 255px) and (max-width: 992px) {
    .progress-inner-box {
        background: none;
    }
     .roadmap-block:hover {
        flex: auto;
    }
}
@media screen and (max-width: 400px) {
    .btn-creative-one {
        font-size: 11px;
    }
    .about-img img {
        width: 70%;
    }
    #mainprogress {
        padding: 0;
    }
}