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

html {
    scroll-behavior: smooth;
}

body {

    overflow-x: hidden;
    background-image: url(../images/web-bg.png);
    background-size: cover;
    background-position: top;
    width: 100%;
    height: 100%;

}

@font-face {
    font-family: font;
    src: url(../font/CCMaladroit\ W00\ Bold.ttf);
}

@font-face {
    font-family: sponge;
    src: url(../font/coconutz.ttf);
}

@font-face {
    font-family: patrick;
    src: url(../font/MamaBear.ttf);
}

h4 {
    font-family: font;
}

p {
    font-family: font;
}

a {
    text-decoration: none;
    font-family: font;
}

h1 {
    font-family: patrick;
}


span,
p {
    font-family: font;
    font-size: 1.5vw;

}

/* -------------------header---------------- */
.header {
    background-image: url(../images/header-bg.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 75vw;
    position: relative;
    /* animation:rotateIn 1S cubic-bezier(0.165, 0.84, 0.44, 1)  infinite alternate; */
}

.txt {
    display: flex;
    flex-direction: column;
    gap: 1vw;
    /* margin: auto; */
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: auto;
    padding-top: 8vw;

}

.header .txt h1 {
    font-size: 9VW;
    text-align: center;
    color: #fff;
    -webkit-text-stroke: 1px #000;
    font-family: patrick;

}

.txt-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10vw;
}

.left img {
    width: 45vw;
    transform: translateY(7vw);
}

.rihgt p {
    text-align: center;
    color: #000;
    font-size: 1.5vw;
    width: 65%;
    line-height: 2.5vw;
}

.links {
    display: flex;
    align-items: center;
    gap: 3vw;
    margin-top: 2vw;
}

.btn .buy-btn {
    display: flex;
    width: 12.5vw;
    padding: 1vw 1vw;
    transform: rotate(5deg);
    font-size: 1.5vw;
    text-align: center;
    border: 2px solid #000;
    justify-content: center;
    background-color: #eeea5a;
    color: #000;
    transition: .3s;
}

.btn .buy-btn:hover {
    transform: rotate(0deg);
}

.icuns {
    display: flex;
    align-items: center;
    gap: 1.5vw;
    transition: .3s;
}

.icuns img {
    width: 4vw;
    transition: .3s;


}

.icuns img:hover {
    transform: translateY(-.5vw);
}

/* ------------------------links-bg----------------------- */
.links-bg-sec {
    position: relative;

}

.links-bg {
    width: 100%;


}

.youtube {
    position: absolute;
    width: 10vw;
    left: 46%;
    top: 61%;
    z-index: 2;
}

.tiktok {
    position: absolute;
    width: 10vw;
    left: 65%;
    top: 62%;
    z-index: 2;
}

.insta {
    position: absolute;
    width: 12vw;
    left: 25.5%;
    top: 61%;
    z-index: 2;
}

.sol {
    position: absolute;
    width: 10vw;
    left: 6%;
    top: 63%;
    z-index: 2;
}

.tele {
    position: absolute;
    width: 12vw;
    left: 83.5%;
    top: 65%;
    z-index: 2;
}

/* -----------------------only-sec----------------- */
.only-sec {
    background-image: url(../images/bg-2.png);
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: relative;
    margin-top: 19vw;
}

.row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7vw;
    transform: translateY(18vw);
}

.left-side {
    width: 30%;
}

.left-side p {
    font-size: 1.3vw;
    color: #000;
    text-align: center;
    width: 87%;
    line-height: 2.5vw;
}

.pr-2 {
    margin-top: 1vw;
}

.right-side {
    width: 30%;
}

.right-side img {
    width: 34vw;
    animation: shakeY 3S cubic-bezier(0.165, 0.84, 0.44, 1) infinite alternate;
}

/* -------------------------rules-sec----------------------- */
.rules-sec {
    background-image: url(../images/rule0bg.png);
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: relative;
    margin-top: 17vw;


}

.rule-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7vw;

}

.man {
    width: 30%;
}

.man img {
    width: 28vw;
    animation: flipInY 3S cubic-bezier(0.165, 0.84, 0.44, 1) infinite alternate;
}

.cotent {
    width: 35%;
}

.cotent h1 {
    font-size: 4vw;
    -webkit-text-stroke: 2px #000;
    color: #fff;
    font-family: font;
}

.cotent ul {
    margin-top: 3vw;
    margin-left: 2vw;
}

.cotent ul li {
    font-size: 1.5vw;
    font-family: font;
    padding: .5vw;
    list-style: none;
}

/* ---------------about-------- */
/* .about{
    background-image: url(../images/about-bg.png);
    background-position:center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 200vw;
    position: relative;
    margin-top: 20vw;
    

} */
.abt-bg {
    width: 100%;
    /* height: 20vw;
    margin-top: -80vw; */
}

.about h1 {
    font-size: 4vw;
    text-align: center;
    color: #fff;
    -webkit-text-stroke: 2px #000;

}

.about-cnt {
    display: flex;
    flex-direction: column;
    gap: 3vw;
    justify-content: center;
    text-align: center;
    margin-top: 2vw;
}

.upr img {
    width: 44vw;
    margin: auto;
    text-align: center;
    animation: flipInY 3S cubic-bezier(0.165, 0.84, 0.44, 1) infinite alternate;
}

.cotnts {
    font-size: 1.5vw;
    line-height: 2.5vw;
    width: 65%;
    margin: auto;
}

/* ---------------------------------token-sec-------------------- */
.token-sec {
    background-image: url(../images/token-bg.png);
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 60vw;
    position: relative;
    /* margin-top: 20vw; */
    /* z-index: -1; */
    z-index: 1;

}

.layers {
    position: absolute;
    width: 100%;
    z-index: -1;
    top: 0%;
}

.c1 {
    position: absolute;
    width: 8vw;
    right: 1%;
    top: 39%;

}

.c2 {
    position: absolute;
    width: 9vw;
    top: 10%;
    left: 0;
}

.toke-txt {
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding-top: 17vw;
    gap: 2vw;
    z-index: 2;
}

.toke-txt h1 {
    font-size: 4vw;
    color: #fff;
    -webkit-text-stroke: 2px #000;
}

.copy {
    width: 60%;
    padding: 2vw 1vw;
    box-shadow: 0px 7px #a2b4c5;
    background-color: #fff;
    border-radius: 1vw;
    margin: auto;

}

.copy-click {
    font-size: 1.5vw;
    background-color: #2e2e2e;
    color: #fff;
    padding: 1.2vw 1.5vw;
    border-radius: .5vw;
    box-shadow: 0px 5px #1b1b1b;
    margin-left: 2vw;
    z-index: 6;
    /* position: absolute; */

    z-index: 8;
}

/* -------suplyss- */
.suplyss {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.6vw;
    flex-wrap: wrap;
}

.box {
    width: 19vw;
    padding: 1vw 1vw;
    background-color: #fdec5d;
    border: 4px solid #262107;
    border-radius: 1vw;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1vw;
    margin-top: 4vw;
}

.box span {
    background-color: #fd8348;
    padding: .3vw 4vw;
    text-align: center;
    font-size: 1.4vw;
    font-family: font;
    width: 100%;
    color: #fff;
}

.box p {
    font-size: 1.5vw;
    text-align: center;
    font-weight: bold;
    color: #000;
    animation: jello 3S cubic-bezier(0.165, 0.84, 0.44, 1) infinite alternate;
}

/* -------------------road-sec----------------- */
.road-sec {
    background-image: url(../images/road-bg.png);
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 48vw;
    position: relative;
    z-index: 5;
    margin-top: 19vw;
    padding-top: 195px;
}

.lft-man {
    position: absolute;
    width: 30vw;
    left: 0;
    z-index: 2;
    top: 28%;
}

.right-man {
    position: absolute;
    width: 30vw;
    right: 0;
    top: 10%;
    margin-top: 220px;
}

.road-sec h2 a {
    font-size: 4vw;
    text-align: center;
    /* transform: translateY(-10vw); */
    width: 46%;
    color: #fff;
    background-color: #4d4d4d;
    box-shadow: 0px 4px #f5a14b;
    padding: 3.5vw 4vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    height: 7.5vw;
    border-radius: 1.2vw;
    gap: 7vw;
    padding: 3.5vw 4vw;
}



/* 
.numbers {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 3vw;
    gap: 2vw;
    transform: translateY(-9vw)
}

 .nmbr-1 {
    width: 46%;
    background-color: #4d4d4d;
    box-shadow: 0px 4px #f5a14b;
    padding: 3.5vw 4vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    height: 7.5vw;
    border-radius: 1.2vw;
    gap: 7vw;
    z-index: 3;
    padding: 3.5vw 4vw;
}

.lft img {
    width: 4vw;
}

.rgt ul li {
    font-size: 1.5vw;
    list-style: disc;
    font-family: font;
    color: #fff;
} */

/* ---------end--------- */
.end {
    width: 100%;
    background-color: #0000;
    height: 6vw;
    text-align: center;
    background-color: #000;
    padding: 3vw 3vw;

}

.end p {
    color: #FFDD00;
    font-size: 1.3vw;
}

.right-man {
    /* margin-top: 220px; */
    /* Adjust the value as needed */
}

/* --------------------buy-sec-------------------- */
.buy-sec {
    position: relative;
    z-index: 2;
}

.buy-sec h2 {
    font-size: 5vw;
    color: #fff;
    -webkit-text-stroke: 1px #000;
    text-align: center;
    font-size: font;
    font-family: patrick;
    margin-top: -8vw;
}

.buys-first {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2vw;
    margin-top: 6vw;
    position: relative;
}

.texts-1 {
    position: absolute;
    width: 7vw;
    left: 18%;
    z-index: 3;
    top: -3%;
}

.texts-2 {
    position: absolute;
    width: 7.5vw;
    left: 55%;
    z-index: 3;
    top: 0%;
}

.buys-first h4 {
    font-size: 2vw;
    color: #000;
    font-family: patrick;
    /* margin-left: 6vw; */
    animation: flash 3S cubic-bezier(0.165, 0.84, 0.44, 1) infinite alternate;
}

.buys-first p {
    font-size: 1.3vw;
    color: #000;
    margin-top: 2vw;
    line-height: 2vw;
}

.left-box {
    width: 33vw;
    height: 22vw;
    padding: 3vw 2vw;
    border-radius: 4vw;
    border: 3px solid #000;
    background-color: #fff;
    z-index: 2;
    transform: rotate(-2deg);
}

.left-box h4 {
    transform: translateX(7vw);
}

.right-box {
    width: 33vw;
    height: 22vw;
    padding: 3vw 2vw;
    border-radius: 4vw;
    border: 3px solid #000;
    background-color: #fff;
    transform: rotate(3deg);
    margin-top: 4vw;

}

.right-box h4 {
    transform: translateX(10vw);
}

/* --------- */
.buys-second {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2vw;
    margin-top: 1vw;
    position: relative;


}

.texts-3 {
    position: absolute;
    width: 7vw;
    left: 18%;
    z-index: 3;
    top: -25%;
}

.texts-4 {
    position: absolute;
    width: 7.5vw;
    left: 53%;
    z-index: 3;
    top: -20%;
}

.buys-second h4 {
    font-size: 2vw;
    color: #000;
    font-family: patrick;
    /* margin-left: 6vw; */
    animation: flash 3S cubic-bezier(0.165, 0.84, 0.44, 1) infinite alternate;
}

.buys-second p {
    font-size: 1.3vw;
    color: #000;
    margin-top: 2vw;
    line-height: 2vw;
}

.lefts-box {
    width: 35vw;
    height: 24vw;
    padding: 3vw 2vw;
    border-radius: 4vw;
    border: 3px solid #000;
    background-color: #fff;
    z-index: 2;
    transform: rotate(5deg);
    margin-top: -1vw;
    margin-left: 3vw;

}

.lefts-box h4 {
    transform: translateX(5vw);
}

.rights-box {
    width: 35vw;
    height: 19vw;
    padding: 3vw 2vw;
    border-radius: 4vw;
    border: 3px solid #000;
    background-color: #fff;
    transform: rotate(-4deg);
    margin-top: -6vw;

}

.rights-box h4 {
    transform: translateX(4vw);
}