@tailwind base;
@tailwind components;
@tailwind utilities;

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


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

@font-face {
    font-family: Simpsonfont;
    src: url(/assets/font/Simpsonfont.otf);
}

html {
    scroll-behavior: smooth;
}

.my-element {
    --animate-duration: 3s;
}



body {
    font-weight: 400;
    color: #000;
    font-family: "Single Day", cursive;
    overflow-x: hidden;
    text-transform: lowercase;
}

p,
a,
span {
    font-size: 1.3vw;
    font-family: "Patrick Hand", cursive;
}

a {
    transition: all 0.3s ease-in-out;
}

a:hover {
    transform: scale(1.1);
}



.header,
.about,
.help_section {
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;

}


.header {
    background-image: url('../images/header.png');
    height: 63vw;
    z-index: 10;
    position: relative;
}


nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0vw 5vw;
}

nav .sky {
    animation: fadeIn 1S cubic-bezier(0.165, 0.84, 0.44, 1) infinite alternate;
    width: 13vw;
}

.links {
    display: flex;
    align-items: center;
    gap: 1vw;
    transition: all 0.3 ease-in-out;
}

.links a img {
    width: 100%;
    max-width: 4vw;
}

.links a {
    transition: all 0.3s ease-in-out;
}

.links a:hover {
    transform: scale(1.1);

}

.links .adress {
    background-color: #fff;
    padding: 1vw 3vw;
    border-radius: 37px;
    border: 2px solid #000;
}

.header .content {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2vw;
    padding-top: 4vw;
    width: 50%;
    margin: auto;
    color: #fff;
}

.text {
    position: absolute;
    left: 5vw;
    rotate: -12deg;
    top: 15vw;
    font-size: 1vw;
    color: #fff;
}

.header .content img {
    width: 13vw;
    margin: auto;
}


.head1,
.head2,
.head3,
.head4 {
    position: absolute;
    z-index: 10;
}

.head1 {
    width: 18vw;
    left: 6vw;
    rotate: 5deg;
    bottom: 14vw;
}

.head2 {
    width: 15vw;
    left: 22vw;
    bottom: 9vw;
    rotate: 5deg;
}

.head3 {
    width: 16vw;
    right: 20vw;
    bottom: 13vw;
}

.head4 {
    width: 18vw;
    right: 6vw;
    bottom: 18.5vw;
}


.grident_text {
    background: linear-gradient(#fff, #fff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 0.5px;
    font-size: 12vw;
    text-align: center;
    text-shadow: 4px 4px #fff;
    line-height: 12vw;
}

h1,
h2 {
    background: linear-gradient(#fff, #fff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 1px;
    font-weight: 900;
}


.about {
    background-image: url('../images/about-bg.jpg');
    height: 66.5vw;
    position: relative;
    padding: 5vw 10vw 5vw 10vw;
    margin-top: -3vw;
}

.about .main_content {
    display: flex;
    align-items: center;
    gap: 9vw;
    margin: auto;
    justify-content: center;
    transform: translateY(-17vw);
    height: 10vw;
    width: 100%;
    position: relative;
    z-index: 999;
}

.about .content_1 {
    position: relative;
    z-index: 999;
}


.about .box_1 .text-1 {
    display: flex;
    align-items: start;
    gap: 1vw;
}

.about .box_1 .text-1 h1 {
    font-size: 4vw;
    text-transform: uppercase;
    -webkit-text-stroke-width: 0.1px;
    font-weight: 900;
     font-family: Simpsonfont; 


}

.about .box_1 .text-1 h2 {
    text-align: center;
    font-size: 3.3vw;
     text-transform: lowercase;
     line-height: 3.3vw;
     font-weight: 800;
    -webkit-text-stroke-width: 0.1px;

}

.about .box_1 a {
    background-color: #9E7840;
    padding: 0.6vw 3vw;
    border-radius: 2vw;
    color: #fff;
    display: block; 
    width: fit-content;
    text-align: center;
    margin-left: 6vw;
     text-transform: lowercase;
}

.about .content_2 {
    position: relative;
    margin-top: -8vw;
    z-index: 999;
}

.about .about_gif_1 {
    position: absolute;
    left: 3vw;
    width: 27vw;
    top: 17vw;
    z-index: 9999;
}


.about .content_2 h3 {
    font-size: 5vw;
    background: linear-gradient(#fff, #fff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 1px;
    text-align: center;
    position: absolute;
    width: 100%;
    top: -1vw;
    transform: rotate(-3deg);
    margin-left: -2vw;
     text-transform: lowercase;
}

.about .content_2 p {
    width: 30vw;
    margin-left: 5vw;
    position: absolute;
    top: 10vw;
}

.about .sky {
    animation: fadeIn 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) infinite alternate;
    width: 15vw;
    position: absolute;
    top: 28vw;
    right: 5vw;
    z-index: 9999;
}

/* imges_section */
.imges_section {
    margin-top: -19vw;
    position: relative;
    z-index: 999;
}

.imges_section .byby {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 25vw;
    top: -5vw;
}

.help_section {
    background-image: url('../images/help-section.png');
    position: relative;
    margin-top: -12vw;
    padding: 13vw 7vw 16vw 7vw;
}

.help_section .main {
    width: 70vw;
    margin: auto;
    position: relative;
    z-index: 999;
    margin-top: -7vw;
}

.help_section .box_1 {
    display: flex;
    align-items: center;
    gap: 2vw;
    width: 55vw;
    position: absolute;
    top: 10vw;
    z-index: 9999;
    margin-left: 19vw;
}

.help_section .box_1 img {
    width: 30vw;

}

.help_section .box_1 h4 {
    font-size: 4vw;
    line-height: 4vw;
    margin-top: 2vw;
}

.help_section .box_2 {
    display: flex;
    align-items: center;
    gap: 2vw;
    width: 55vw;
    position: absolute;
    bottom: 18.5vw;
    z-index: 9999;
    margin-left: 17vw;
}

.help_section .box_2 img {
    width: 30vw;

}

.help_section .box_2 h4 {
   font-size: 4vw;
    line-height: 4vw;
    margin: 2vw 0;
}


.help_section .sky {
    animation: fadeIn 1S cubic-bezier(0.165, 0.84, 0.44, 1) infinite alternate;
    width: 14vw;
    position: absolute;
    top: 1vw;
    right: 10vw;
    z-index: 9999999;
}

.help_section .help {
    width: 20vw;
    position: absolute;
    top: -8vw;
    left: 5vw;
    z-index: 9999999;
}

.help_section .rotate {
    transform: rotate(-90deg);
    position: absolute;
    left: -18vw;
    top: 40vw;
    z-index: 99;
}

/* roadmap */
.roadmap {
    margin-top: -16vw;
    z-index: 99;
    position: relative;
    height: 95vw;
}

.roadmap .roadleft,
.roadmap .roadright {
    position: absolute;
}

.roadmap .roadleft {
    bottom: 15vw;
    left: 1vw;
    width: 25vw;
}

.roadmap .roadright {
    top: 0;
    right: 0;
    width: 20vw;
}



.roadmap h5 {
    font-size: 5vw;
    line-height: 5vw;
    background: linear-gradient(#fff, #fff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 1.5px;
    text-align: center;
    position: absolute;
    width: 100%;
    top: 5vw;
}

.roadmap h4 {
    font-size: 5vw;
    line-height: 5vw;
    background: linear-gradient(#fff, #fff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 1.5px;
    text-align: center;
    position: absolute;
    width: 100%;
    top: 61vw;
    rotate: -2deg;
}

.roadmap .box_1 {
    width: 100%;
    top: 22vw;
    width: 25vw;
    left: 19vw;
    position: absolute;
}

.roadmap .box_1 p {
    text-align: center;
}

.roadmap .box_2 {
    text-align: center;
    position: absolute;
    top: 20vw;
    width: 32vw;
    right: 15vw;
}

.footer {
    background-image: url('../images/footer.png');
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5vw;
    position: relative;
    z-index: 999999;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    height: 30vw;
    overflow: hidden;

}

.footer .right {
    display: flex;
    align-items: end;
    margin-top: auto;
}

.social p {
    width: 40vw;
    text-align: center;
    margin-bottom: 2vw;
    padding-top: 3vw;
    font-size: 1.5vw;
    color: #fff;
}

.footer .right img {
    width: 25vw;
}

.left {
    display: flex;
    align-items: end;
    margin-top: auto;
}

.footer .left img {
    width: 25vw;

}


@media screen and (max-width: 768px) {

    h1,
    h2 {

        -webkit-text-stroke-width: 1px;
    }

    .about h3 {
        -webkit-text-stroke-width: 1px;
    }

    .roadmap h5 {
        -webkit-text-stroke-width: 0.5px;
    }
}