*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
@font-face {
    font-family: "Comic Kings" ;
    src: url("../fonts/Comic\ Kings.ttf");
}
body{
    overflow-x: hidden;
    font-family:"Comic Kings";
    background: #FFF799;
}
a{
    text-decoration: none;
}
img{
    width: 100%;
}
p{
    color: #FFF3F3;
    text-align: center;
    font-family: Comic Kings;
    font-size: 1.3vw;
    font-style: normal;
    font-weight: 400;
    line-height: 2vw; /* 122.727% */
}
h1{
    color: #F00;
    font-family: Comic Kings;
    font-size: 6.25vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
h2{
    color: #FF9700;
    font-family: Comic Kings;
    font-size: 2.5vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
/* ------header----
--------- */
header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2vw 5vw;
}
header .logo a img {
    width: 6vw;
}
header .social-icons {
    display: flex;
    align-items: center;
    gap: 1vw;
}
header .social-icons a img {
    width: 4vw;
    filter: drop-shadow(0 20px 5px rgba(0,0,0,.10));
    transition: all .3s;
}
header .social-icons a img:hover{
    transform: translateY(-10px);
}
.hero-section .charac-1{
    width: 24vw;
    margin-top: -2vw;
    margin-left: -2vw;
    position: relative;
}
/* ----------------hero-
section-------
----------- */
.hero-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url(../images/hero-bg.png)no-repeat;
    background-size: cover;
    background-position: top center;
    height: 75vw;
    position: relative;
}
.hero-section .h-logo{
    width: 30vw;
}
.hero-section .hero-h3{
    color: #000;
    font-family: Comic Kings;
    font-size: 1.375vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    background: #FFF100;
    border: 3px solid #000;
    border-radius: 20px;
    padding: .8vw 4vw;
    position: relative;
    z-index: 4;
}
.hero-section .hero-h4{
    background: #E4007F;
    border: 3px solid #000;
    color: #000;
    font-family: Comic Kings;
    font-size: 1.375vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border-radius: 20px;
    padding: .7vw 4vw;
    position: relative;
    z-index: 2;
    margin-top: -2.9vw;
}
@keyframes zoomIn {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}
.hero-section .sticker-1{
    position: absolute;
    left: 5vw;
    top: 25vw;
    width: 22vw;
    animation: zoomIn .3s linear;
}
.clock {
    position: absolute;
    width: 20vw;
    bottom: 0vw;
    left: 5vw;
    z-index: 100;
    animation: shakeX 1s cubic-bezier(0.075, 0.82, 0.165, 1) 1s infinite alternate;
}
.star-1{
    position: absolute;
    width: 2.3vw;
    bottom: 7vw;
    right: 12vw;
    animation: fadeIn 2s linear infinite alternate;
}
.star-2{
    position: absolute;
    width: 2.3vw;
    bottom: 3vw;
    right: 35vw;
    animation: fadeIn 2s linear 1s infinite alternate;
}
.star-3{
    position: absolute;
    width: 4vw;
    bottom: -1.5vw;
    right: 4vw;
    animation: fadeIn 2s linear .5s infinite alternate;
}
.hero-clouds{
    position: absolute;
    width: 100%;
    bottom: -7vw;
    left: 0;
}
.hero-section .hero-heading{
    
    width: 50vw;
    margin-top: 7vw;
}
.hero-section .hero-desc{
    width: 40vw;
    margin-top: 25vw;
}
/* -------------------about----------
--------- */
.about{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5vw 0 20vw 0;
    background: url(../images/about-bg.png)no-repeat;
    background-size: 65%;
    background-position: 50% 35%;
    position: relative;
    overflow: hidden;
}
.about .overflow{
    max-height:22vw;
    overflow-y:auto;
}
.about .overflow::-webkit-scrollbar{
    display: none;
}
.about h2{
    -webkit-text-stroke: 2px;
    -webkit-text-stroke-color: #000;
    background: #FFF100;
    border: 6px solid #000;
    padding: .8vw 4vw;
    border-radius: 2vw;
}
.about p{
    padding: 1vw 28vw;
}
.about p:nth-child(2){
    margin-top: 1vw;
}
.about p:not(:last-child){
    margin-bottom: 2vw;
}
.about a img {
    width: 12vw;
    filter: drop-shadow(0 10px 5px rgba(0,0,0,.10));
    transition:all .5s;
    margin-top: 2vw;
}
.about a img:hover{
    transform: translateY(-10px);
    filter: brightness(200%);
}
.jet {
    position: absolute;
    width: 17vw;
    top: -2vw;
    right: 10vw;
}
@keyframes cloudMove {
    0% {
        transform: translateX(0%); /* Start position, cloud is off-screen to the left */
    }
    100% {
        transform: translateX(100%); /* End position, cloud is off-screen to the right */
    }
}
.cloud-1{
    position: absolute;
    width: 30vw;
    top: 2.5vw;
    left: -5.5vw;
    z-index: -1;
    animation: cloudMove 20s linear infinite alternate;
}
.cloud-2{
    position: absolute;
    width: 25vw;
    right: -5vw;
    top: 18vw;
    animation: cloudMove 15s linear infinite alternate-reverse;
}
.cloud-3{
    position: absolute;
    width: 23vw;
    bottom: 4vw;
    left: 51vw;
    animation: cloudMove 10s linear infinite alternate;
}
.speaker {
    position: absolute;
    width: 18vw;
    top: 32vw;
    left: 19vw;
    animation: flash 1s cubic-bezier(0.075, 0.82, 0.165, 1) infinite alternate;
}
.charac-2{
    position: absolute;
    width: 25vw;
    bottom: -18vw;
    left: 31vw;
    animation: shakeX 1s cubic-bezier(0.075, 0.82, 0.165, 1) 1s infinite alternate;
}
/* -------------tokenomics--------
-------- */
.tokenomics {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 22vw 15vw;
    padding-top: 20vw;
    background: url(../images/token-bg.png)no-repeat;
    background-size: cover;
    background-position: 5%0 -20%;
    position: relative;
}
.tokenomics h2{
    color: #fff;
    -webkit-text-stroke: 2px;
    -webkit-text-stroke-color: #000;
}
.tokenomics .token-h1{
    color: #000;
    font-family: Comic Kings;
    font-size: 1.3vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    background: #FFF100;
    border: 3px solid #000;
    border-radius: 1.4vw;
    padding: .8vw 4vw;
    position: relative;
    z-index: 2;
}
.tokenomics .token-h2{
    color: #000;
    font-family: Comic Kings;
    font-size: 1.3vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    background: #E4007F;
    border: 3px solid #000;
    border-radius: 1.4vw;
    padding: .8vw 4vw;
    margin-top: -3.1vw;
    position: relative;
    z-index: 1;
}
.token-wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 5vw;
    row-gap: 2vw;
}
.token-wrap h1{
    background: #FFF;
    border: 4px solid #000;
    border-radius: 2vw;
    -webkit-text-stroke: 3px;
    -webkit-text-stroke-color: #000;
    padding: 4vw 0;
    text-align: center;
    margin-bottom: 1vw;
}
.token-wrap .token-box {
    width: 48%;
    text-align: right;
}
.token-wrap h4{
    color: #FFF100;
    text-align: right;
    font-family: Comic Kings;
    font-size: 1.3vw;
    font-style: normal;
    font-weight: 400;
    border-radius: 30px;
    display: inline;
    border: 3px solid #000;
    background: #E8261D;
    padding: .6vw 3vw;
}
.sticker-2 {
    position: absolute;
    width: 23vw;
    top: 5vw;
    right: 4vw;
}
.design-1{
    position: absolute;
    width: 18vw;
    top: -7vw;
    left: 0;
}
.lips{
    position: absolute;
    width: 10vw;
    top: -7vw;
    left: 9vw;
}

/* .tiktok */

.tiktok {
     padding: 20vw 25vw 10vw 25vw;
     position: relative;
    background: url(../images/tiktok-bg.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 100% 100%;
    text-align: center;
}
.tiktok .t-1{
    position: absolute;
    width: 20vw;
    top: 0vw;
    left: 5vw;
}
.tiktok .t-2{
    position: absolute;
    width: 17vw;
    top: 15vw;
    right: 5vw;
}
.tiktok h2{
    color: #fff;
    -webkit-text-stroke: 2px;
    -webkit-text-stroke-color: #000;
    display: inline-block;
}
.tiktok p{
    color: #000;
    font-family: Comic Kings;
    font-size: 1.3vw;
    font-style: normal;
    font-weight: 400;
    line-height: 2vw; /* 122.727% */
    margin-top: 2vw;
}
/* -----------------roadmap----------
----------- */
.roadmap {
    padding: 10vw 15vw;
    position: relative;
    background: url(../images/road-wrap-bg.png),url(../images/footer-bg.png);
    background-repeat: no-repeat,no-repeat;
    background-position: 50% 42%, 50% 100%;
    background-size:85%,100%;
}
.road-heading {
    position: absolute;
    width: 40vw;
    top: -3vw;
    left: 30vw;
    z-index: 2;
}
.charac-3{
    position: absolute;
    width: 18vw;
    top: 2.5vw;
    right: 13vw;
    z-index: 1;
}
.road-wrap {
    display: flex;
    justify-content: space-between;
    margin-top: 25vw;
}
.road-wrap .road-box{
    width: 32%;
    text-align: center;
    position: relative;
    isolation: isolate;
    padding: .55vw;
    box-sizing: border-box;
}
.road-wrap .road-box::before {
    content: "";
    position: absolute;
    inset: -.55vw -.7vw -.85vw -.55vw;
    background: #050505;
    border: .18vw solid #000;
    border-radius: 1.4vw 1.9vw 1.2vw 1.7vw;
    clip-path: polygon(2% 8%, 97% 1%, 100% 88%, 93% 100%, 5% 96%, 0 15%);
    transform: rotate(-1.4deg);
    z-index: 1;
}
.road-wrap .road-box:nth-child(2)::before {
    inset: -.65vw -.55vw -.7vw -.65vw;
    border-radius: 1.9vw 1.2vw 1.7vw 1.4vw;
    clip-path: polygon(1% 4%, 95% 0, 100% 12%, 98% 96%, 8% 100%, 0 88%);
    transform: rotate(.9deg);
}
.road-wrap .road-box:nth-child(3)::before {
    inset: -.5vw -.75vw -.8vw -.5vw;
    border-radius: 1.2vw 1.7vw 1.9vw 1.3vw;
    clip-path: polygon(4% 1%, 100% 6%, 96% 94%, 88% 100%, 1% 97%, 0 10%);
    transform: rotate(1.6deg);
}
.road-wrap .road-box img {
    width: 100%;
    display: block;
    text-align: center;
    position: relative;
    z-index: 2;
    border: .28vw solid #000;
    border-radius: .9vw;
    box-shadow: .28vw .35vw 0 rgba(0, 0, 0, .7);
    box-sizing: border-box;
    transform: rotate(-.7deg);
}
.road-wrap .road-box:nth-child(2) img {
    transform: rotate(.5deg);
}
.road-wrap .road-box:nth-child(3) img {
    transform: rotate(1deg);
}
.road-wrap .road-box ul {
    text-align: left;
    min-height: 29vw;
    background: #FFF;
    border: 5px solid #000;
    border-radius: .8vw;
    padding: 3vw;
    margin-top: -2vw;
    box-shadow: 5px 5px #000;
    position: relative;
    z-index: 1;
}
.road-wrap .road-box h3{
    font-size: 1.2vw;
    margin-bottom: 1vw;
    color: #f00;
    -webkit-text-stroke: 1px;
    -webkit-text-stroke-color: #000;
}
.road-wrap .road-box ul::before{
    content: "";
    position: absolute;
    width: 95%;
    height: 95%;
    border: 2px solid #000;
    border-radius: .7vw;
    top: .4vw;
    left: .4vw;
}
.road-wrap .road-box ul li {
    color: #000;
    font-family: Comic Kings;
    font-size: 1vw;
    font-style: normal;
    font-weight: 400;
    line-height: 1.7vw;
}
/* ---------footer-----
----- */
.footer{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 15vw;
    margin-bottom: 10vw;
}
.footer .social-icons {
    display: flex;
    align-items: center;
    gap: 1vw;
}
.footer .social-icons a img{
    width: 4vw;
    transition: all .3s;
}
.footer .social-icons a img:hover{
    transform: translateY(-10px);
}
.footer p{
    color: #000;
    text-align: center;
    font-family: Comic Kings;
    font-size: 1vw;
    font-style: normal;
    font-weight: 400;
    margin-top: 1vw;
}
@media (max-width:600px) {
    *{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    @font-face {
        font-family: "Comic Kings" ;
        src: url("../fonts/Comic\ Kings.ttf");
    }
    body{
        overflow-x: hidden;
        font-family:"Comic Kings";
        background: #FFF799;
    }
    a{
        text-decoration: none;
    }
    img{
        width: 100%;
    }
    p{
        color: #FFF3F3;
        text-align: center;
        font-family: Comic Kings;
        font-size: 4vw;
        font-style: normal;
        font-weight: 400;
        line-height: 6vw; /* 122.727% */
    }
    h1{
        color: #F00;
        font-family: Comic Kings;
        font-size: 8.25vw;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }
    h2{
        color: #FF9700;
        font-family: Comic Kings;
        font-size: 5.5vw;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }
    /* ------header----
    --------- */
    header {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 2vw 5vw;
    }
    header .logo a img {
        width: 10vw;
    }
    header .social-icons {
        display: flex;
        align-items: center;
        gap: 1vw;
    }
    header .social-icons a img {
        width: 8vw;
        filter: drop-shadow(0 20px 5px rgba(0,0,0,.10));
        transition: all .3s;
    }
    header .social-icons a img:hover{
        transform: translateY(-10px);
    }
    .hero-section .charac-1{
        width: 36vw;
        margin-top: -1vw;
        position: relative;
    }
    /* ----------------hero-section-------
    ----------- */
    .hero-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        background: url(../images/hero-bg.png)no-repeat;
        background-size: cover;
        background-position: top center;
        height: 75vw;
        position: relative;
    }
    .hero-section .h-logo{
        width: 38vw;
    }
    .hero-section .hero-h3{
        color: #000;
        font-family: Comic Kings;
        font-size: 2.2vw;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        background: #FFF100;
        border: 3px solid #000;
        border-radius: 20px;
        padding: .8vw 4vw;
        position: relative;
        z-index: 4;
    }
    .hero-section .hero-h4{
        background: #E4007F;
        border: 3px solid #000;
        color: #000;
        font-family: Comic Kings;
        font-size: 2.2vw;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        border-radius: 20px;
        padding: .7vw 4vw;
        position: relative;
        z-index: 2;
        margin-top: -3.9vw;
    }
    .hero-section .sticker-1{
        position: absolute;
        left: 5vw;
        top: 13vw;
        width: 22vw;
    }
    .hero-section .hero-heading{
    
    width: 60vw;
    margin-top: 0vw;
}
.hero-section .hero-desc{
    width: 60vw;
    margin-top: 15vw;
}
    .clock {
        position: absolute;
        width: 48vw;
        bottom: -10vw;
        left: 0vw;
    }
    .star-1{
        position: absolute;
        width: 2.3vw;
        bottom: 7vw;
        right: 12vw;
    }
    .star-2{
        position: absolute;
        width: 2.3vw;
        bottom: 3vw;
        right: 35vw;
    }
    .star-3{
        position: absolute;
        width: 4vw;
        bottom: -1.5vw;
        right: 4vw;
    }
    /* -------------------about----------
    --------- */
    .about{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 5vw 0 20vw 0;
        background: url(../images/about-bg.png)no-repeat;
        background-size: 80% 90%;
        background-position: 50% 45%;
        position: relative;
    }
    .about .overflow {
        max-height: 78vw;
    }
    .about h2{
        -webkit-text-stroke: 2px;
        -webkit-text-stroke-color: #000;
        background: #FFF100;
        border: 6px solid #000;
        padding: .8vw 4vw;
        width: 60%;
        text-align: center;
        font-size: 7vw;
        border-radius: 4vw;
    }
    .about p{
        padding: 1vw 18vw;
    }
    .about p:nth-child(2){
        margin-top: 1vw;
    }
    .about p:nth-child(3){
        margin-bottom: 2vw;
    }
    .about a img {
        width: 43vw;
        filter: drop-shadow(0 10px 5px rgba(0,0,0,.10));
        transition:all .5s;
    }
    .about a img:hover{
        transform: translateY(-10px);
        filter: brightness(200%);
    }
    .jet {
        position: absolute;
        width: 25vw;
        top: 15vw;
        right: -4vw;
    }
    .cloud-1{
        position: absolute;
        width: 30vw;
        top: 21.5vw;
        left: -5.5vw;
        z-index: -1;
    }
    .cloud-2{
        position: absolute;
        width: 25vw;
        right: -5vw;
        top: 18vw;
        z-index: -1;
    }
    .cloud-3{
        position: absolute;
        width: 23vw;
        bottom: -2vw;
        left: 61vw;
    }
    .speaker {
        position: absolute;
        width: 21vw;
        top: 70vw;
        left: 1cqw;
    }
    .charac-2{
        position: absolute;
        width: 25vw;
        bottom: -31vw;
        left: 53vw;
    }
.tiktok {
    padding: 60vw 10vw 20vw 10vw;
     position: relative;
     background: url(../images/tiktok-bg-mobile.png)no-repeat;
     background-size: 100% 100%;
     margin-top: -28vw;
}
.tiktok .t-1 {
    position: absolute;
    width: 33vw;
    top: 20vw;
    left: 5vw;
}
.tiktok .t-2 {
    position: absolute;
    width: 28vw;
    bottom: -11vw;
    top: unset;
    right: 3vw;
}
.tiktok h2{
    font-size: 7vw;
}
    .tiktok p{
        font-size: 4vw;
        line-height: 8vw;
    }
    /* -------------tokenomics--------
    -------- */
    .tokenomics {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 22vw 15vw;
        padding-top: 30vw;
        background: url(../images/token-bg.png)no-repeat;
        background-size: cover;
        background-position: 5%0 -20%;
        position: relative;
    }
    .tokenomics h2{
        color: #fff;
        -webkit-text-stroke: 2px;
        -webkit-text-stroke-color: #000;
    }
    .tokenomics .token-h1{
        color: #000;
        font-family: Comic Kings;
        font-size: 2vw;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        background: #FFF100;
        border: 3px solid #000;
        border-radius: 1.4vw;
        padding: .8vw 4vw;
        position: relative;
        z-index: 2;
    }
    .tokenomics .token-h2{
        color: #000;
        font-family: Comic Kings;
        font-size: 2vw;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        background: #E4007F;
        border: 3px solid #000;
        border-radius: 1.4vw;
        padding: .8vw 4vw;
        margin-top: -3.8vw;
        position: relative;
        z-index: 1;
    }
    .token-wrap {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        margin-top: 5vw;
        gap: 5vw;
    }
    .token-wrap h1{
        background: #FFF;
        border: 4px solid #000;
        border-radius: 2vw;
        -webkit-text-stroke: 2px;
        -webkit-text-stroke-color: #000;
        padding: 4vw 0;
        text-align: center;
        margin-bottom: 3vw;
    }
    .token-wrap .token-box {
        width: 82%;
        text-align: center;
    }
    .token-wrap h4{
        color: #FFF100;
        text-align: center;
        font-family: Comic Kings;
        font-size: 2.8vw;
        font-style: normal;
        font-weight: 400;
        border-radius: 15px;
        display: inline;
        border: 3px solid #000;
        background: #E8261D;
        padding: 2vw 6vw;
    }
    .sticker-2 {
        position: absolute;
        width: 23vw;
        top: 5vw;
        right: 4vw;
    }
    .design-1{
        position: absolute;
        width: 18vw;
        top: -7vw;
        left: 0;
    }
    .lips{
        position: absolute;
        width: 20vw;
        bottom: -6vw;
        left: 2vw;
    }
    /* -----------------roadmap----------
    ----------- */
    .roadmap {
        padding: 10vw 15vw;
        position: relative;
        background: url(../images/road-wrap-bg-mobile.png),url(../images/footer-bg.png);
        background-repeat: no-repeat,no-repeat;
        background-position: 66% 30%, 50% 100%;
        background-size: 88%, 100%;
    }
    .road-heading {
        position: absolute;
        width: 62vw;
        top: -3vw;
        left: 18vw;
        z-index: 2;
    }
    .charac-3{
        position: absolute;
        width: 34vw;
        top:20.5vw;
        right: 0vw;
        z-index: 1;
        transform: rotate(33deg);
    }
    .road-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3vw;
        justify-content: space-between;
        margin-top: 25vw;
    }
    .road-wrap .road-box{
        width: 75%;
        text-align: center;
        padding: 1.5vw;
    }
    .road-wrap .road-box h3{
        font-size: 4.2vw;
    }
    .road-wrap .road-box img {
        width: 100%;
        display: block;
        text-align: center;
        position: relative;
        z-index: 2;
        border-width: .8vw;
        border-radius: 2.4vw;
        box-shadow: .8vw .9vw 0 rgba(0, 0, 0, .72);
    }
    .road-wrap .road-box::before {
        inset: -1.3vw -1.6vw -1.8vw -1.4vw;
        border-width: .45vw;
        border-radius: 3.5vw 4.6vw 3.2vw 4vw;
    }
    .road-wrap .road-box ul {
        text-align: left;
        background: #FFF;
        border: 5px solid #000;
        border-radius: .8vw;
        padding: 4vw;
        margin-top: -2vw;
        box-shadow: 5px 5px #000;
        position: relative;
        z-index: 1;
    }
    .road-wrap .road-box ul::before{
        content: "";
        position: absolute;
        width: 98%;
        height: 95%;
        border: 2px solid #000;
        border-radius: .7vw;
        top: .4vw;
        left: .4vw;
    }
    .road-wrap .road-box ul li {
        color: #000;
        font-family: Comic Kings;
        font-size: 2vw;
        font-style: normal;
        font-weight: 400;
        line-height: 4vw;
    }
    /* ---------footer-----
    ----- */
    .footer{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 15vw;
        margin-bottom: 10vw;
    }
    .footer .social-icons {
        display: flex;
        align-items: center;
        gap: 1vw;
    }
    .footer .social-icons a img{
        width: 8vw;
        transition: all .3s;
    }
    .footer .social-icons a img:hover{
        transform: translateY(-10px);
    }
    .footer p{
        color: #000;
        text-align: center;
        font-family: Comic Kings;
        font-size: 3vw;
        font-style: normal;
        font-weight: 400;
        margin-top: 3vw;
    }
}