@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand+SC&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: chibold;
    src: url(../fonts/CHIBOLD\ demo.ttf);
}

@keyframes zoom_in {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

@keyframes text {
    from {
        transform: rotateZ(0deg);
    }
    to {
        transform: rotateZ(20deg);
    }
}

@keyframes text1 {
    from {
        transform: rotateZ(0deg);
    }
    to {
        transform: rotateZ(-20deg);
    }
}

.text {
    animation: text 1s infinite linear alternate;
}

.text1 {
    animation: text 1s infinite linear alternate-reverse;
}

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
    cursor: default;
    font-family: "Patrick Hand SC", cursive;
    font-weight: 400;
    font-style: normal;
}

a {
    text-decoration: none;
    cursor: pointer;
}



li {
    list-style: none;
    font-size: 1.1vw;
    line-height: 120%;
    color: #000000;
}

p {
    color: #000000;
    font-size: 1.2vw;
    font-weight: 400;
    line-height: 120%;
}

h1 {
    font-family: kings;
    font-size: 4vw;
    font-weight: 400;
    color: #000000;
    line-height: 100%;
}

h2 {
    font-size: 2vw;
    font-weight: 800;
    color: #000000;
    line-height: 150%;
}

h3 {
    font-family: chibold;
    font-size: 1.1vw;
    line-height: 100%;
    color: #000000;
}

a.btn {
    font-family: chibold;
    font-size: 1vw;
    color: rgb(255, 255, 255);
    background-color: #3766ff;
    padding: 1vw 2vw;
    border-radius: 1vw;
    border: 0.1vw solid #ffffff;
    border-bottom: 0.3vw solid #ffffff;
}

a.btn:hover {
    background-color: #002aff;
    border: 0.1vw solid #ffffff;
    border-bottom: 0.3vw solid #ffffff;
}

body{
    background: #0095ff;
    overflow-x: hidden;
}

.body {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
}

.body::-webkit-scrollbar {
    width: 0;
}

.navbar-toggle {
    display: none;
    cursor: pointer;
}

.navbar-toggle span {
    display: block;
    width: 7vw;
    height: 1.5vw;
    margin: 0.7vw;
    background: linear-gradient(271.36deg, #3766ff 50.01%, #3766ff 72.39%);
    background: radial-gradient(380.37% 142.48% at 50% 50%, #ffffff 0%, #ffffff 45.31%, #ffffff 100%);
    border-radius: 50px;
    transition: all 0.5s;
}

.navbar-toggle span:nth-child(2) {
    width: 5vw;
    animation: bounceInRight 1.5s;
}

.navbar-toggle span:nth-child(1) {
    animation: bounceInRight 1s;
}

.navbar-toggle span:nth-child(3) {
    animation: bounceInRight 2s;
}

/* -------------------------------------------Navbar Management------------------
-------------------- */

.header {
    padding: 2vw 3vw;
    position: fixed;
    top: 0;
    z-index: 1000;
    width: 100%;
}

.header .navbar {
    border-radius: 4vw;
    padding: 0.5vw 2vw 0.5vw 2vw;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    transition: all .5s;
    box-shadow: none;
}

.header .navbar .left-side-menu {
    width: 20%;
}


.header .navbar .left-side-menu a img {
    width: 30%;
    cursor: pointer;
    animation: bounceInDown 1s;
}

.center-menu {
    width: 65%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1.7vw;
}

.center-menu a {
    display: flex;
    align-items: center;
    gap: 1vw;
}

.center-menu a .effect {
    width: 1vw;
    height: 1vw;
}

.header .center-menu a li {
    padding: 0.5vw .5vw;
    font-size: 1.5vw;
    font-weight: 400;
    border-radius:.5vw;
    color: #ffffff;
    transition: all 0.6s;
    border: .1vw solid rgba(255, 255, 255, 0);
    outline: .1vw solid rgba(255, 255, 255, 0);
}

.header .center-menu a:nth-child(1) {
    animation: bounceInDown 1.2s;
}
.header .center-menu a:nth-child(2) {
    animation: bounceInDown 1.4s;
}
.header .center-menu a:nth-child(3) {
    animation: bounceInDown 1.6s;
}
.header .center-menu a:nth-child(4) {
    animation: bounceInDown 2s;
}
.header .center-menu a:nth-child(5) {
    animation: bounceInDown 2.2s;
}

.header .center-menu a li:hover {
    color: #ffffff;
    border: .1vw solid rgb(0, 128, 255);
    outline: .1vw solid rgba(255, 255, 255, 0.2);
    background: radial-gradient(50% 50% at 50% 50%, #F0FAFF 0%, #00A7DB 100%);
    background: radial-gradient(380.37% 142.48% at 50% 50%, #D4F0FF 0%, #83D2FF 45.31%, #2A85BF 100%);
    background: linear-gradient(45deg, rgb(56, 89, 255) 20%, #D4F0FF 50%, rgb(0, 13, 255) 90%);
    border-radius:.5vw;
    /* transform: translateY(-0.2vw); */
}

.header .center-menu .right-side-menu {
    display: flex;
    flex-direction: row;
    gap: .7vw;
    margin-left: auto;
}

.header .center-menu .right-side-menu .a img {
    width: 3vw;
    height: auto;
    transition: all 0.3s;
}

.header .center-menu .right-side-menu a:nth-child(1) {
    animation: bounceInDown 2.5s;
}

.header .center-menu .right-side-menu a:nth-child(2) {
    animation: bounceInDown 2.8s;
}

.header .center-menu .right-side-menu .a img:hover {
    transform: translateY(-.2vw);
    filter: invert(100%);
}

/* hero section styling */
.hero_section {
    width: 100%;
    background-image: url("../images/hero_bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: top center;
    padding: 10vw;
    padding-bottom: 15vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.hero_title {
    width: 30vw;
    z-index: 3;
    animation: bounceInDown 1s;
}

.hero_mid_shinchan {
    width: 35vw;
    margin-top: -2.5vw;
    z-index: 1;
    animation: zoom_in 1s;
    transform-origin: bottom center;
}

.hero_section .btn {
    z-index: 2;
    box-shadow: 0 0 2vw 2vw rgba(0, 0, 0, .2);
}

.hero_left_shinchan {
    position: absolute;
    width: 22vw;
    top: 50%;
    left: 12vw;
    animation: wobble 2s infinite;
}

.hero_right_shinchan {
    position: absolute;
    width: 20vw;
    top: 50%;
    right: 13vw;
    animation: wobble 2s infinite;
}

.hero_left_cloud {
    position: absolute;
    width: 35vw;
    bottom: 3vw;
    left: -10vw;
    animation: fadeInLeft 1.5s linear forwards;
}

.hero_right_cloud {
    position: absolute;
    width: 35vw;
    bottom: 3vw;
    right: -10vw;
    animation: fadeInRight 1.5s linear forwards;
}

/*------------------ about-section ----------
---------*/

.about {
    width: 100%;
    padding: 5vw 25vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3vw;
    position: relative;
}

.about .heading {
    width: 100%;
    height: auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.about .heading img {
    width: 15%;
    margin-left: -.9vw;
}

.about .content {
    width: 100%;
    background: white;
    padding: 3vw 2vw;
    border:  .5vw solid #F39800;
    outline: .7vw solid #203afd;
    box-shadow: 0 1.3vw #CC321C;
    border-radius: 2vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.about .content .left {
    width: 60%;
}

.about .content .left img {
    width: 100%;
    animation: rollIn 2s infinite;
}

.about .content .right {
    width: 35%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1vw;
}
.about .content .right p{
    font-size: .8vw;
}

.abuot-right-shinchan {
    position: absolute;
    width: 20vw;
    top: 0;
    right: 0;
    animation: zoomInRight 2s infinite alternate-reverse;
}

.red_ball {
    position: absolute;
    width: 7vw;
    top: 20%;
    left: 5vw;
}

.blue_ball {
    position: absolute;
    width: 5vw;
    top: -4vw;
    right: 3vw;
}

.red1_ball {
    position: absolute;
    width: 7vw;
    top: 70%;
    right: 2vw;
}

.blue1_ball {
    position: absolute;
    width: 4vw;
    top: 78%;
    right: 1vw;
}

/*------------- partners ------------
-------*/

.partners {
    width: 100%;
    height: auto;
    padding: 5vw 0vw;
    padding-bottom: 10vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5vw;
}

.partners .heading {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.partners .heading img {
    width: 6vw;
    margin-left: -1.5vw;
}

.partners .parts {
    display: flex;
    align-items: center;
    gap: 5vw;
    flex-direction: row;
}

.partners .parts img {
    width: 9vw;
    
}

/*------------- shinomics ------------
-------*/

.shinomics {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5vw;
    padding: 5vw 25vw;
    padding-bottom: 15vw;
    background: url(../images/shinomics-bg.png) no-repeat;
    background-size: 100% 100%;
    background-position: top left;
    position: relative;
}

.shinomics .left-cloud {
    position: absolute;
    width: 35vw;
    top: 0;
    left: -15vw;
    animation: fadeInLeft 1s;
    z-index: 2;
}

.shinomics .right-cloud {
    position: absolute;
    width: 35vw;
    right: -15vw;
    top: 0;
    animation: fadeInRight 1s;
    z-index: 1;
}

.shinomics .left-box {
    position: absolute;
    width: 15vw;
    top: -7vw;
    left: -0vw;
    animation: text 1s infinite alternate-reverse;
}

.shinomics .right-box {
    position: absolute;
    width: 15vw;
    right: 0vw;
    top: -5vw;
    animation: text1 1s infinite alternate-reverse;

}

.shinomics .heading {
    width: 100%;
    display: flex;
    justify-content: center;
}

.shinomics .heading img {
    width: 10%;
    margin-left: -.5vw;
}

.shinomics .content {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.shinomics .content .box {
    width: 30%;
    background: white;
    padding: 3vw 1.5vw;
    border:  .5vw solid #F39800;
    outline: .7vw solid #203afd;
    box-shadow: 0 1.5vw #CC321C;
    border-radius: 2vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2vw;
}

.shinomics .content .box:nth-child(1) img {
    animation: jackInTheBox 1s infinite alternate-reverse;
}

.shinomics .content .box:nth-child(2) img {
    animation: jackInTheBox 1.1s infinite alternate-reverse;
}

.shinomics .content .box:nth-child(3) img {
    animation: jackInTheBox 1.2s infinite alternate-reverse;
}

.shinomics .content .box .top {
    width: 100%;
    text-align: center;
}

.shinomics .content .box .top img {
    width: 90%;
}

.shinomics .content .box .bottom {
    width: 100%;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1vw;
}

.shinomics .content .box .bottom ul li {
    list-style: disc;
    text-align: center;

}

/*--------------- tokenomics ----------
---------*/

.tokenomics {
    width: 100%;
    text-align: center;
    position: relative;
    margin-top: -9vw;
}

.tokenomics img {
    width: 30%;
}

.tokenomics .shinchan {
    width: 15vw;
    position: absolute;
    top: -10vw;
    left: 0;
    animation: bounceOutLeft 1s infinite alternate-reverse;
}

.tokenomics .green-ball {
    width: 7vw;
    position: absolute;
    right: 3vw;
    top: 40%;
}

.tokenomics .blue-ball {
    width: 4vw;
    position: absolute;
    top: 37%;
    left: 3vw;
    z-index: 2;
}

.tokenomics .red-ball {
    width: 8vw;
    position: absolute;
    top: 18%;
    left: 5vw;
}

/*---------------- workshop ------------
------------*/

.workshop {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5vw 20vw;
    margin: 5vw 0;
    position: relative;
    background: url(../images/workshop-bg.png) no-repeat;
    background-size: 100% 100%;
    background-position: top center;
}

.workshop .left-cloud {
    position: absolute;
    width: 30vw;
    left: -15vw;
    top: -5vw;
    animation: fadeInLeft 1s;
}

.workshop .right-cloud {
    position: absolute;
    width: 25vw;
    right: -10vw;
    top: 5vw;
    animation: fadeInRight 1s;
}

.workshop .left-box {
    position: absolute;
    width: 15vw;
    top: -7vw;
    left: 3vw;
}

.workshop .right-shinchan {
    position: absolute;
    width: 15vw;
    right: 1vw;
    top: 0;
}

.workshop .heading {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.workshop .heading img {
    width: 8vw;
    margin-left: -1vw;
}

.workshop .heading1 {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.workshop .heading1 img {
    width: 6vw;
    margin-left: -1vw;
}

.workshop .content {
    margin-top: 5vw;
    width: 100%;
    background: white;
    border:  .5vw solid #F39800;
    outline: .7vw solid #203afd;
    box-shadow: 0 1.5vw #CC321C;
    border-radius: 2vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.workshop .content .box {
    padding: 2vw 1vw;
    width: 33.33%;
    text-align: center;
    border-left: .1vw solid rgba(0, 0, 0, .1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1vw;
}

.workshop .content .box:nth-child(1) {
    border: none;
}

.workshop .content .box:nth-child(1) img {
    animation: rubberBand 1s infinite;
}

.workshop .content .box:nth-child(2) img {
    animation: rubberBand 1.2s infinite;
}

.workshop .content .box:nth-child(3) img {
    animation: rubberBand 1.4s infinite;
}

.workshop .content .box img {
    width: 70%;
}

/* ----------------------------smash--------
------- */

.smash {
    width: 100%;
    padding: 10vw 25vw;
    position: relative;
    z-index: 2;
}

.smash .red-ball {
    width: 7vw;
    position: absolute;
    top: 0;
    left: 5vw;
}

.smash .heading, .smash .heading1 {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.smash .heading img {
    width: 5vw;
    margin-left: -1vw;
}

.smash .heading1 img {
    width: 5vw;
    margin-left: -1vw;
}

.smash h3 {
    font-family: "Patrick Hand SC", cursive;
}

.smash .content {
    margin-top: 5vw;
    width: 100%;
    background: white;
    border:  .5vw solid #F39800;
    outline: .7vw solid #203afd;
    box-shadow: 0 1.5vw #CC321C;
    border-radius: 2vw;
    padding: 3vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.smash .content .left {
    width: 35%;
    text-align: center;
}

.smash .content .left img {
    width: 90%;
    animation: zoomInLeft 1s infinite alternate-reverse;
}

.smash .content .right {
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 1vw;
}



/* ----------------------------bonfire--------
------- */

.bonfire {
    width: 100%;
    padding: 5vw 25vw;
    padding-top: 15vw;
    margin-top: -17vw;
    position: relative;
    background: url(../images/shinomics-bg.png) no-repeat;
    background-size: 100% 100%;
    background-position: top left;
}

.bonfire .red-ball {
    width: 7vw;
    position: absolute;
    top: 0;
    left: 5vw;
}

.bonfire .heading, .bonfire .heading1 {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.bonfire .heading img {
    width: 5vw;
    margin-left: -1vw;
}

.bonfire .heading1 img {
    width: 5vw;
    margin-left: -1vw;
}

.bonfire h3 {
    font-family: "Patrick Hand SC", cursive;
}

.bonfire .content {
    margin-top: 5vw;
    width: 100%;
    background: white;
    border:  .5vw solid #F39800;
    outline: .7vw solid #203afd;
    box-shadow: 0 1.5vw #CC321C;
    border-radius: 2vw;
    padding: 3vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bonfire .content .left {
    width: 35%;
    text-align: center;
}

.bonfire .content .left img {
    width: 90%;
    animation: headShake 2s infinite alternate-reverse;
}

.bonfire .content .right {
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 1vw;
}

.bonfire .left-cloud {
    width: 30vw;
    position: absolute;
    top: 0;
    left: -10vw;
    z-index: 2;
}

.bonfire .right-cloud {
    width: 30vw;
    position: absolute;
    top: 0;
    right: -10vw;
    z-index: 2;
}

.bonfire .left-box {
    width: 15vw;
    position: absolute;
    top: 13vw;
    left: 0;
}

.bonfire .right-box {
    width: 13vw;
    position: absolute;
    top: -5vw;
    right: -3vw;
}

.bonfire .shinchan {
    width: 20vw;
    position: absolute;
    left: 0;
    top: -2vw;
    z-index: 3;
    animation: bounce 1s infinite;
}

/* ----------------------------Nfts--------
------- */

.nft {
    width: 100%;
    text-align: center;
    padding: 5vw;
    position: relative;
}

.nft .green-ball {
    width: 7vw;
    position: absolute;
    top: 15%;
    right: 3vw;
}

.nft .heading {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.nft .heading img {
    width: 10vw;
    margin-left: -2.5vw;
}

.nft .hero {
    width: 50%;
}


/* ----------------------------Nfts content--------
------- */ 

.nft-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0vw 20vw;
    position: relative;
}

.nft-content h3 {
    font-family: "Patrick Hand SC", cursive;
}

.nft-content .content {
    width: 100%;
    background: white;
    border:  .5vw solid #F39800;
    outline: .7vw solid #203afd;
    box-shadow: 0 1.5vw #CC321C;
    border-radius: 2vw;
    padding: 2vw 3vw;
    display: flex;
    justify-content: space-between;
}

.nft-content .content .left,
.nft-content .content .right {
    width: 48%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .7vw;
}

.nft-content .content .right .top {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .7vw;
}

.nft-content .left-cloud {
    width: 20vw;
    position: absolute;
    top: 0;
    left: -8vw;
    animation: fadeInLeft 1s infinite alternate-reverse;
}

.nft-content .right-cloud {
    width: 20vw;
    position: absolute;
    top: -3vw;
    right: -6vw;
    animation: fadeInRight 1.5s infinite alternate-reverse;
}

.map-bg {
    width: 100%;
    margin-top: -10vw;
}

/* roadmap */

.map {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 23vw;
    position: relative;
    margin-top: -35vw;
}

.map .heading {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.map .heading img {
    width: 7vw;
    margin-left: -2vw;
}

.map .content {
    width: 100%;  
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 5vw;
}

.map .content .box {
    padding: 3vw;
    width: 45%;
    background: white;
    border:  .5vw solid #F39800;
    outline: .7vw solid #203afd;
    box-shadow: 0 1.5vw #CC321C;
    border-radius: 2vw;
    margin-bottom: 5vw;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.map .content .box:nth-child(1) img {
    animation: shakeY 1s infinite;
}

.map .content .box:nth-child(2) img {
    animation: shakeX 1.5s infinite;
}

.map .content .box:nth-child(3) img {
    animation: zoomInLeft 1s infinite;
}

.map .content .box:nth-child(4) img {
    animation: zoomOutRight 1.3s infinite;
}

.map .content .box img {
    width: 60%;
    margin-bottom: 1vw;
}

.map .content .box h3 {
    margin-bottom: 1vw;
}

.map .left {
    position: absolute;
    width: 15vw;
    top: 30%;
    left: 0;
    animation: fadeInLeft 1s infinite alternate;
}

.map .right {
    position: absolute;
    width: 15vw;
    top: 35%;
    right: 0;
    animation: fadeInRight 1.3s infinite alternate;
}

.footer-bg {
    width: 100%;
    margin-top: -15vw;
}

/* footer */


footer .links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1vw;
    margin-top: -19vw;
}

footer .links a img {
    width: 3vw;
}

footer .links a img:hover {
    filter: invert(80%);
}

footer p {
    color: white;
    margin-top: 1vw;
}




/* ----------------------------@ 1280px--------
------- */

@media (max-width: 1280px) {

    /* -------------------------navbar 1280px--------------------------
    ----------------------- */
    
    .header {
        padding: 1vw 3vw 0 3vw;
    }

    .header ,.navbar {
        border-radius: 2vw;
    }

    .header .navbar .left-side-menu a img {
        width: 25%;
    }

    


}

/* ----------------------------@ 980px--------
------- */

@media (max-width: 980px) {

a.btn {
    font-size: 2vw;
    padding: 1vw 3vw;
    border: .3vw solid #E9451A;
    border-bottom: .7vw solid #E9451A;
}

a.btn:hover {
    border: .3vw solid #203afd;
    border-bottom: .7vw solid #FDC920;
}

    .header {
        padding: 1vw 7vw;
    }

.header .navbar {
    padding-top: 1vw;
    padding-bottom: 0vw;
    border-radius: 2vw;
}

.header .navbar .left-side-menu {
    width: 10%;
}

.header .navbar .left-side-menu a img {
    width: 100%;
    height: auto;
}

.header .navbar .left-side-menu a {
    font-size: 2vw;
    font-weight: 800;
    gap: 1vw;
}

.header .center-menu a li {
    font-size: 3.3vw;
    padding: 2vw;
    font-weight: 400;
    border: none;
    outline: none;
    transition: all 0.1s;
    /* border: .4vw solid transparent;
    outline: .4vw solid transparent; */
}

.header .center-menu a li:hover {
    /* border-radius: 0vw; */
    background: transparent;
    top: 0;
    border: none;
    outline: none;
    color: white;
    text-decoration: underline;
    /* transform: scale(1.1); */
    /* border: .4vw solid #125C82;
    outline: .4vw solid rgba(255, 255, 255, 0.5);
    background: radial-gradient(50% 50% at 50% 50%, #F0FAFF 0%, #00A7DB 100%); */
}
/* 
.header .center-menu .tg:hover li{
    color: #000000;
} */

.center-menu {
    display: flex;
    width: 86vw;
    height: 72vw;
    flex-direction: column;
    justify-content: center;
    gap: 1vw;
    padding-top: 13vw;
    /* display: none; */
    margin-top: -900px;
    transition: all 1s ease-in-out;
    position: absolute;
    top: 1vw;
    left: 7vw;
    background-color: rgb(35, 38, 235);
    border: 1px solid black;
    z-index: -1;
    border-radius: 2vw;
    /* border-left: 2px solid rgba(255, 255, 20, 0.5);
    border-top: 2px solid rgba(255, 255, 20, 0.5); */
}

.center-menu.active {
    margin-top: 0;
    /* display: flex; */
    background-color: rgb(48, 33, 255);
}

.center-menu .tg {
    background-color: rgb(0, 94, 255);
    width: 100%;
    display: flex;
    justify-content: center;
    transition: all 0s;
}


.center-menu .tg:hover {
    background: black;
}

.header .navbar .center-menu .right-side-menu {
    margin-left: 0%;
    margin-bottom: 1vw;
    row-gap: 3vw;
    column-gap: 2vw;
    flex-wrap: wrap-reverse;
    justify-content: center;
    width: 30%;
}

.header .navbar .center-menu .right-side-menu a img {
    width: 6.5vw;
}

.navbar-toggle span {
    display: block;
    width: 5vw;
    height: 1vw;
    margin: 0.7vw;
    border-radius: 50px;
    transition: all 0.5s;
}

.navbar-toggle span:nth-child(2) {
    width: 3.5vw;
}

.navbar-toggle {
    display: block;
  }
  
  .navbar-toggle.active span:nth-child(1) {
    transition-delay: 0.1s;
    transform: rotate(45deg) translate(1.3vw, 1.3vw);
  }
  
  .navbar-toggle.active span:nth-child(2) {
    opacity: 0;
  }
  
  .navbar-toggle.active span:nth-child(3) {
    transition-delay: 0.1s;
    transform: rotate(-45deg) translate(0vw, 0vw);
    position: relative;
    top: -1.6vw;
  }

  .shinomics {
    padding: 7vw 15vw;
  }

  .shinomics .content .box {
    padding: 2.5vw;
  }

}

/* ----------------------------@ 600px--------
------- */

@media (max-width: 600px) {
    a.btn {
        font-size: 3vw;
        padding: 2vw 5vw;
        border: .5vw solid #E9451A;
        border-bottom: 1.2vw solid #E9451A;
        border-radius: 2vw;
    }
    
    a.btn:hover {
        border: .5vw solid #FDC920;
        border-bottom: 1.2vw solid #FDC920;
    }
    
    h3 {
        font-size: 3vW;
    }

    li {
        font-size: 3vw;
    }

    p {
        font-size: 3vw;
    }

    .header {
        padding: 1vw 3vw;
    }

    .header .navbar {
        padding: 1vw 2vw;
        border-radius: 3vw;
    }

    p {
        text-align: center;
        font-size: 3vw;
        line-height: 120%;
    }

    h2 {
        font-size: 6vw;
    }


    .header .navbar .left-side-menu {
        width: 15%;
    }

    .header .navbar .left-side-menu a img {
        width: 50%;
        height: auto;
        position: relative;
        top: .5vw;
    }

    .header .navbar .left-side-menu a {
        font-size: 4vw;
    }
    
    .header .center-menu a li {
        font-size: 4vw;
        padding: 1vw;
    }

    .center-menu {
        width: 94vw;
        border-radius: 2vw;
        padding-top: 15vw;
        height: 93vw;
        top: 1vw;
        left: 3vw;
    }

    .header .navbar .center-menu .right-side-menu {
        width: 45%;
        row-gap: 5vw;
        column-gap: 3vw;
    }

    .header .navbar .center-menu .right-side-menu a img {
        width: 8vw;
    }

    .navbar-toggle span {
        display: block;
        width: 7vw;
        height: 1.5vw;
        margin: 0.7vw;
        border-radius: 50px;
        transition: all 0.5s;
    }
    
    .navbar-toggle span:nth-child(2) {
        width: 5vw;
    }
    
    .navbar-toggle {
        display: block;
      }
      
      .navbar-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(1.3vw, 1.3vw);
      }
      
      .navbar-toggle.active span:nth-child(2) {
        opacity: 0;
      }
      
      .navbar-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(0vw, 0vw);
        position: relative;
        top: -2.5vw;
      }

      
/* hero section styling */
.hero_section {
    width: 100%;
    background-image: url("../images/hero_bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: top center;
    padding-top: 20vw;
    padding-bottom: 20vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.hero_title {

    width: 40vw;
    z-index: 3;
}

.hero_mid_shinchan {
    width: 45vw;
    margin-top: -2.5vw;
    z-index: 1;
    transform-origin: bottom center;
}

.hero_section .btn {
    z-index: 2;
}

.hero_left_shinchan {
    position: absolute;
    width: 30vw;
    top: 55%;
    left: 5vw;
}

.hero_right_shinchan {
    position: absolute;
    width: 27vw;
    top: 55%;
    right: 5vw;
}

.hero_left_cloud {
    position: absolute;
    width: 45vw;
    bottom: 3vw;
    left: -10vw;
}

.hero_right_cloud {
    position: absolute;
    width: 45vw;
    bottom: 3vw;
    right: -10vw;
}

/*------------------ about-section ----------
---------*/

.about {
    width: 100%;
    padding: 10vw 12vw;
    padding-top: 15vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8vw;
    position: relative;
}

.about .heading {
    width: 100%;
    height: auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.about .heading img {
    width: 18%;
    margin-left: -1.3vw;
}

.about .content {
    width: 100%;
    background: white;
    padding: 5vw 2vw;
    border:  1vw solid #F39800;
    outline: 2vw solid #203afd;
    box-shadow: 0 5vw #CC321C;
    border-radius: 4vw;
    gap: 5vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.about .content .left {
    width: 100%;
}

.about .content .left img {
    width: 100%;
}

.about .content .left video {
    width: 100%;
    border-radius: 4vw;
}

.about .content .right {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5vw;
}

.about .content .right p {
    font-size: 3vw;
}

.abuot-right-shinchan {
    position: absolute;
    width: 25vw;
    top: -7vw;
    right: 0;
}

.red_ball {
    position: absolute;
    width: 13vw;
    top: 16.5%;
    left: 0vw;
}

.blue_ball {
    position: absolute;
    width: 10vw;
    top: 17%;
    right: 3vw;
}

.red1_ball {
    position: absolute;
    width: 13vw;
    top: 89%;
    right: 4vw;
}

.blue1_ball {
    position: absolute;
    width: 10vw;
    top: 90%;
    left: 5vw;
}

/*------------- partners ------------
-------*/

.partners {
    width: 100%;
    height: auto;
    padding: 5vw 0vw;
    padding-bottom: 10vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10vw;
}

.partners .heading {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.partners .heading img {
    width: 10vw;
    margin-left: -1.5vw;
}

.partners .parts {
    display: flex;
    align-items: center;
    gap: 5vw;
    flex-direction: row;
}

.partners .parts img {
    width: 22vw;
    
}

/*------------- shinomics ------------
-------*/

.shinomics {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5vw;
    padding: 25vw 10vw;
    padding-bottom: 15vw;
    background: url(../images/shinomics-bg.png) no-repeat;
    background-size: 100% 100%;
    background-position: top left;
    position: relative;
    margin-top: 15vw;
}

.shinomics .left-cloud {
    position: absolute;
    width: 35vw;
    top: 0;
    left: -15vw;
    z-index: 2;
}

.shinomics .right-cloud {
    position: absolute;
    width: 35vw;
    right: -15vw;
    top: 0;
    z-index: 1;
}

.shinomics .left-box {
    position: absolute;
    width: 15vw;
    top: -7vw;
    left: -0vw;
}

.shinomics .right-box {
    position: absolute;
    width: 15vw;
    right: 0vw;
    top: -5vw;
}

.shinomics .heading {
    width: 100%;
    display: flex;
    justify-content: center;
}

.shinomics .heading img {
    width: 9vw;
    margin-left: -.5vw;
    padding-top: 5vw;
}

.shinomics .content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8vw;
    justify-content: space-between;
    padding-top: 5vw;
}

.shinomics .content .box {
    width: 70%;
    background: white;
    padding: 3vw 8vw;
    border:  .5vw solid #F39800;
    outline: .7vw solid #203afd;
    box-shadow: 0 2.5vw #CC321C;
    border-radius: 2vw;
    display: flex;
    flex-direction: column;
    gap: 2vw;
}

.shinomics .content .box .top {
    width: 100%;
    text-align: center;
}

.shinomics .content .box .top img {
    width: 80%;
}

.shinomics .content .box .bottom {
    width: 100%;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: .5vw;
}

.shinomics .content .box .bottom ul li {
    list-style: disc;
}

/*--------------- tokenomics ----------
---------*/

.tokenomics {
    width: 100%;
    text-align: center;
    position: relative;
    margin-top: 0vw;
}

.tokenomics img {
    width: 60%;
}

.tokenomics .shinchan {
    width: 25vw;
    position: absolute;
    top: -10vw;
    left: 0;
}

.tokenomics .green-ball {
    width: 12vw;
    position: absolute;
    right: 3vw;
    top: 40%;
}

.tokenomics .blue-ball {
    width: 9vw;
    position: absolute;
    top: 65%;
    left: 3vw;
    z-index: 2;
}

.tokenomics .red-ball {
    width: 13vw;
    position: absolute;
    top: 50%;
    left: 5vw;
}


/*---------------- workshop ------------
------------*/

.workshop {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5vw 10vw;
    margin: 15vw 0;
    position: relative;
    background: url(../images/workshop-bg.png) no-repeat;
    background-size: cover;
    background-position: top center;
}

.workshop .left-cloud {
    position: absolute;
    width: 30vw;
    left: -15vw;
    top: -5vw;
}

.workshop .right-cloud {
    position: absolute;
    width: 25vw;
    right: -10vw;
    top: 5vw;
}

.workshop .left-box {
    position: absolute;
    width: 15vw;
    top: -7vw;
    left: 3vw;
}

.workshop .right-shinchan {
    position: absolute;
    width: 15vw;
    right: 1vw;
    top: 0;
}

.workshop .heading {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.workshop .heading img {
    width: 14vw;
    margin-left: -1.5vw;
}

.workshop .heading1 {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.workshop .heading1 img {
    width: 9vw;
    margin-left: -1vw;
}

.workshop .content {
    margin-top: 10vw;
    width: 100%;
    background: white;
    border:  1vw solid #F39800;
    outline: 1.5vw solid #203afd;
    box-shadow: 0 3.5vw #CC321C;
    border-radius: 4vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.workshop .content .box {
    padding: 5vw 5vw;
    width: 100%;
    text-align: left;
    border: none;
    border-bottom: .1vw solid rgba(0, 0, 0, .1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1vw;
}

.workshop .content .box:nth-child(1) {
    border-bottom: .1vw solid rgba(0, 0, 0, .1);
}

.workshop .content .box img {
    width: 40%;
}

/* ----------------------------smash--------
------- */

.smash {
    width: 100%;
    padding: 0vw 14vw;
    position: relative;
}

.smash .red-ball {
    width: 13vw;
    position: absolute;
    top: -15vw;
    left: 5vw;
}

.smash .heading, .smash .heading1 {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.smash .heading img {
    width: 8vw;
    margin-left: -1vw;
}

.smash .heading1 img {
    width: 8vw;
    margin-left: -1vw;
}

.smash h3 {
    font-family: "Patrick Hand SC", cursive;
}

.smash .content {
    margin-top: 5vw;
    width: 100%;
    background: white;
    border:  1vw solid #F39800;
    outline: 1.5vw solid #203afd;
    box-shadow: 0 3.5vw #CC321C;
    border-radius: 2vw;
    padding: 3vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.smash .content .left {
    width: 55%;
    text-align: center;
}

.smash .content .left img {
    width: 90%;
}

.smash .content .right {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1vw;
}


/* ----------------------------smash--------
------- */

.bonfire {
    width: 100%;
    padding: 10vw 14vw;
    position: relative;
    margin: 8vw;
}

.bonfire .red-ball {
    width: 13vw;
    position: absolute;
    top: -15vw;
    left: 5vw;
}

.bonfire .heading, .bonfire .heading1 {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.bonfire .heading img {
    width: 8vw;
    margin-left: -1vw;
}

.bonfire .heading1 img {
    width: 8vw;
    margin-left: -1vw;
}

.bonfire h3 {
    font-family: "Patrick Hand SC", cursive;
}

.bonfire .content {
    margin-top: 5vw;
    width: 100%;
    background: white;
    border:  1vw solid #F39800;
    outline: 1.5vw solid #203afd;
    box-shadow: 0 3.5vw #CC321C;
    border-radius: 2vw;
    padding: 3vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.bonfire .content .left {
    width: 55%;
    text-align: center;
}

.bonfire .content .left img {
    width: 90%;
}

.bonfire .content .right {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1vw;
}

.bonfire .left-cloud {
    width: 35vw;
    position: absolute;
    top: 0;
    left: -10vw;
    z-index: 2;
}

.bonfire .right-cloud {
    width: 30vw;
    position: absolute;
    top: 0;
    right: -10vw;
    z-index: 2;
}

.bonfire .left-box {
    width: 15vw;
    position: absolute;
    top: 13vw;
    left: 0;
}

.bonfire .right-box {
    width: 13vw;
    position: absolute;
    top: -5vw;
    right: -3vw;
}

.bonfire .shinchan {
    width: 25vw;
    position: absolute;
    left: 0;
    top: -5vw;
    z-index: 3;
}

/* ----------------------------Nfts--------
------- */

.nft {
    width: 100%;
    text-align: center;
    padding: 5vw;
}

.nft .heading {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.nft .heading img {
    width: 19vw;
    margin-left: -5vw;
}

.nft .hero {
    width: 100%;
}

/* ----------------------------Nfts content--------
------- */ 

.nft-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0vw 15vw;
    position: relative;
}

.nft-content h3 {
    font-family: "Patrick Hand SC", cursive;
    text-align: center;
}

.nft-content .content {
    width: 100%;
    background: white;
    border:  1vw solid #F39800;
    outline: 1.5vw solid #203afd;
    box-shadow: 0 3.5vw #CC321C;
    border-radius: 2vw;
    padding: 2vw 3vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7vw;
    text-align: center;
    justify-content: space-between;
}

.nft-content .content .left,
.nft-content .content .right {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5vw;
}

.nft-content .content .right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7vw;
}

.nft-content .content .right .top {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .7vw;
}

.nft-content .left-cloud {
    width: 25vw;
    position: absolute;
    top: -15vw;
    left: -8vw;
}

.nft-content .right-cloud {
    width: 25vw;
    position: absolute;
    top: -17vw;
    right: -6vw;
}

.map-bg {
    width: 100%;
    margin-top: -27vw;
}

/* roadmap */

.map {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 18vw;
    position: relative;
    margin-top: 5vw;
}

.map .heading {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.map .heading img {
    width: 15vw;
    margin-left: -3.5vw;
    margin-bottom: -4vw;
}

.map .content {
    width: 100%;  
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 15vw;
    gap: 5vw;
}

.map .content .box {
    padding: 5vw 7vw;
    width: 100%;
    background: white;
    border:  1vw solid #F39800;
    outline: 1.5vw solid #203afd;
    box-shadow: 0 3.5vw #CC321C;
    border-radius: 2vw;
    margin-bottom: 5vw;
    display: flex;
    flex-direction: column;
}

.map .content .box img {
    width: 60%;
    margin-bottom: 3vw;
    align-self: center;
}

.map .content .box h3 {
    margin-bottom: 1vw;
}

.map .left {
    position: absolute;
    width: 15vw;
    top: 3%;
    left: 0;
}

.map .right {
    position: absolute;
    width: 15vw;
    top: 0%;
    right: 0;
}

.footer-bg {
    width: 100%;
    margin-top: 0vw;
}

/* footer */


footer .links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1vw;
    margin-top: -41vw;
}

footer .links a img {
    width: 7vw;
}

footer .links a img:hover {
    filter: invert(80%);
}

footer p {
    color: white;
    margin-top: 1vw;
}

}