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

:root {
    --white: rgb(255,255,255);
    --yellow: rgb(255,182,43);
    --blue: rgb(0,158,227);
    --darkblue: rgb(5,24,64);
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--darkblue);
    scroll-behavior: smooth;
    font-family: 'Lato', sans-serif;
}

/* header start */

.header__main {
    height: 100vh;
    overflow: hidden;
    opacity: 1;
}

.header__animation {
    -webkit-animation: background--animation 3s 1 ease-in-out;
            animation: background--animation 3s 1 ease-in-out;
}

@-webkit-keyframes background--animation {
    0% {
        opacity: 0;
    }

    100% {}
}

@keyframes background--animation {
    0% {
        opacity: 0;
    }

    100% {}
}

.header__bg__mobile {
    display: none;
}

.header__background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/header_bg.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: scroll;
    background-size: cover;
}

.header__logo {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    left: 52%;
    top: 50%;
    transform: translate(0,-50%);
    width: 17vw;
}

.header__logo--sign {
    left: 0;
    top: 0;
    width: 100%;
}

.header__logo--image {
    width: 100%;
}

.header__logo--txt {
    left: 0;
    top: 0;
    width: 100%;
}

.header__logo--svg {
    width: 100%;
    margin-top: 2vh;
}

.header__logo--subtxt {
    left: 0;
    top: 0;
    width: 90%;
}

.header__logo--svg2 {
    width: 100%;
    margin-top: 1.5vh;
}

/* header end */

/* navigation start */

.nav__hamburger {
    display: none;
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-direction: column;
    z-index: 1;
    position: fixed;
}

.navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 50px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: var(--blue);
    z-index: 2;
    -webkit-animation: navigation--animation 1s 3s ease-in-out both;
            animation: navigation--animation 1s 3s ease-in-out both;
}

@-webkit-keyframes navigation--animation {
    0% {
        transform: translateX(-100%);
    }

    100% {}
}

@keyframes navigation--animation {
    0% {
        transform: translateX(-100%);
    }

    100% {}
}

.navigation__menu {
    display: flex;
    list-style: none;
}

.menu__link {
    position: relative;
    font-weight: 300;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-decoration: none;
    padding: 18px 15px;
    color: var(--white);
    transition: .1s;
}

.menu__link::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 0;
    left: 0;
    bottom: 0;
    background-color: var(--darkblue);
    transition: .1s;
    z-index: -1;
}

.menu__link:hover::after {
    height: 100%;
}

.menu__link:hover {
    color: var(--blue);
}

.nav__top {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 60px;
    right: 30px;
    width: 50px;
    height: 50px;
    color: var(--blue);
    border-radius: 5px;
    cursor: pointer;
    visibility: hidden;
    transition-property: background-color, color;
    transition-duration: .3s;
}

.nav__top:hover {
    background-color: var(--blue);
    color: var(--darkblue);
}

.nav__top--show {
    visibility: visible;
}

.fa-angle-double-up {
    font-size: 40px;
}

/* navigation end */

/* trading start */

.trading {
    width: 100%;
    height: auto;
    background-image: url("../img/trade_bg.jpg");
    background-repeat: no-repeat;
    background-position: top;
    background-attachment: scroll;
    background-size: cover;
}

.trade__img__mobile {
    display: none;
}

.trading::before {
    content: "";
    display: block;
    height: 70px;
    width: 100%;
    margin: 0 auto;
    background-color: var(--darkblue);
}

.trading__sail,
.trading__gsail,
.trading__liquidity,
.trading__track {
    display: flex;
    flex-direction: column;
    width: 45%;
    height: 100%;
    margin: 0 auto;
}

.trading__sail__title,
.trading__liquidity__title,
.trading__track__title {
    font-weight: 100;
    font-size: 36px;
    letter-spacing: 5px;
    text-align: left;
    line-height: 100%;
    color: var(--blue);
    width: 100%;
    margin: 10px 0 10px 0;
    word-wrap: break-word;
}

.trading__gsail__title {
    font-weight: 100;
    font-size: 36px;
    letter-spacing: 5px;
    text-align: left;
    line-height: 100%;
    color: var(--blue);
    width: 100%;
    margin: 70px 0 10px 0;
    word-wrap: break-word;
}

.trading__sail__text,
.trading__gsail__text,
.trading__liquidity__text,
.trading__track__text {
    font-weight: 300;
    font-size: 14px;
    letter-spacing: 2px;
    text-align: left;
    line-height: 150%;
    color: var(--yellow);
    width: 100%;
    margin: 0 0 20px 0;
    word-wrap: break-word;
}

.trading__sail__list,
.trading__gsail__list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width: 70%;
}

.trading__liquidity__list,
.trading__track__list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width: 100%;
}

.trading__container {
    display: flex;
    width: 25%;
    margin: 10px 20px 10px 0;
}

.trading__link {
    font-weight: 900;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    list-style: none;
    color: var(--blue);
}

.trading__link:hover {
    color: var(--yellow);
}

.trading__gears,
.trading__gears__sail {
    left: 0;
    top: 0;
    width: 10%;
    height: auto;
    margin: 50px auto;
}

.trading__gears__sail {
    display: none;
}

.trading__gears--img {
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
}

/* trading end */

/* tokenomic start */

.tokenomic {
    width: 100%;
    height: auto;
}

.tokenomic::before {
    content: "";
    display: block;
    height: 20px;
    width: 100%;
    margin: 0 auto;
    background-color: var(--darkblue);
}

.tokenomic__sail_gsail {
    display: flex;
    flex-direction: column;
    width: 45%;
    height: 100%;
    margin: 0 auto;
}

.tokenomic__title {
    font-weight: 100;
    font-size: 36px;
    letter-spacing: 5px;
    text-align: left;
    text-transform: uppercase;
    line-height: 100%;
    color: var(--blue);
    width: 100%;
    margin: 50px 0 10px 0;
    word-wrap: break-word;
}

.tokenomic__text {
    font-weight: 300;
    font-size: 14px;
    letter-spacing: 2px;
    text-align: left;
    line-height: 150%;
    color: var(--yellow);
    width: 100%;
    margin: 0 0 20px 0;
    word-wrap: break-word;
}

.tokenomic__img {
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.tokenomic__img__mobile {
    display: none;
}

/* tokenomic end */

/* ecosystem start */

.ecosystem {
    width: 100%;
    height: auto;
}

.ecosystem::before {
    content: "";
    display: block;
    height: 20px;
    width: 100%;
    margin: 0 auto;
    background-color: var(--darkblue);
}

.ecosystem__sail_gsail {
    display: flex;
    flex-direction: column;
    width: 45%;
    height: 100%;
    margin: 0 auto;
}

.ecosystem__title {
    font-weight: 100;
    font-size: 36px;
    letter-spacing: 5px;
    text-align: left;
    text-transform: uppercase;
    line-height: 100%;
    color: var(--blue);
    width: 100%;
    margin: 50px 0 10px 0;
    word-wrap: break-word;
}

.ecosystem__text {
    font-weight: 300;
    font-size: 14px;
    letter-spacing: 2px;
    text-align: left;
    line-height: 150%;
    color: var(--yellow);
    width: 100%;
    margin: 0 0 20px 0;
    word-wrap: break-word;
}

.ecosystem__img {
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.ecosystem__img__mobile {
    display: none;
}

/* ecosystem end */

/* roadmap start */

.roadmap {
    width: 100%;
    height: auto;
}

.roadmap::before {
    content: "";
    display: block;
    height: 20px;
    width: 100%;
    margin: 0 auto;
    background-color: var(--darkblue);
}

.roadmap__solanasail {
    display: flex;
    flex-direction: column;
    width: 45%;
    height: 100%;
    margin: 0 auto;
}

.roadmap__title {
    font-weight: 100;
    font-size: 36px;
    letter-spacing: 5px;
    text-align: left;
    text-transform: uppercase;
    line-height: 100%;
    color: var(--blue);
    width: 100%;
    margin: 50px 0 10px 0;
    word-wrap: break-word;
}

.roadmap__text {
    font-weight: 300;
    font-size: 14px;
    letter-spacing: 2px;
    text-align: left;
    line-height: 150%;
    color: var(--yellow);
    width: 100%;
    margin: 0 0 20px 0;
    word-wrap: break-word;
}

.roadmap__img {
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.roadmap__img__mobile {
    display: none;
}

/* roadmap end */

/* faq start */

.faq {
    width: 100%;
    height: 100%;
    background-image: url("../img/faq_bg.jpg");
    background-repeat: no-repeat;
    background-position: top;
    background-attachment: scroll;
    background-size: cover;
}

.faq::before {
    content: "";
    display: block;
    height: 20px;
    width: 100%;
    margin: 0 auto;
    background-color: var(--darkblue);
}

.faq__solanasail {
    display: flex;
    flex-direction: column;
    width: 45%;
    height: 100%;
    margin: 0 auto;
}

.faq__title {
    font-weight: 100;
    font-size: 36px;
    letter-spacing: 5px;
    text-align: left;
    text-transform: uppercase;
    line-height: 100%;
    color: var(--blue);
    width: 100%;
    margin: 50px 0 10px 0;
    word-wrap: break-word;
}

.faq__question {
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 2px;
    text-align: left;
    line-height: 120%;
    color: var(--yellow);
    width: 100%;
    margin: 25px 0 10px 0;
    word-wrap: break-word;
}

.faq__answer {
    font-weight: 300;
    font-size: 14px;
    letter-spacing: 2px;
    text-align: left;
    line-height: 150%;
    color: var(--blue);
    width: 100%;
    word-wrap: break-word;
}

/* faq end */

/* contact start */

.contact {
    width: 100%;
    height: auto;
    background-image: url("../img/contact_bg.jpg");
    background-repeat: no-repeat;
    background-position: top;
    background-attachment: scroll;
    background-size: cover;
}

.contact::before {
    content: "";
    display: block;
    height: 50px;
    width: 100%;
    margin: 0 auto;
    background-color: var(--darkblue);
}

.contact__solanasail {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 45%;
    height: 100%;
    margin: 0 auto;
}

.contact__yacht {
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
}

.contact__img {
    left: 0;
    top: 0;
    width: auto;
    height: 500px;
}

.contact__img__mobile {
    display: none;
}

.contact__data {
    display: flex;
    flex-direction: column;
    width: 50%;
    height: 100%;
}

.contact__title {
    font-weight: 100;
    font-size: 36px;
    letter-spacing: 5px;
    text-align: left;
    text-transform: uppercase;
    line-height: 100%;
    color: var(--blue);
    width: 100%;
    margin: 50px 0 10px 0;
    word-wrap: break-word;
}

.contact__subtitle {
    font-weight: 100;
    font-size: 24px;
    letter-spacing: 2px;
    text-align: left;
    text-transform: uppercase;
    line-height: 150%;
    color: var(--blue);
    width: 100%;
    word-wrap: break-word;
}

.contact__mail {
    font-weight: 300;
    font-size: 16px;
    letter-spacing: 2px;
    text-align: left;
    line-height: 120%;
    color: var(--yellow);
    width: 100%;
    margin: 0 0 25px 0;
    word-wrap: break-word;
}

.contact__mail a {
    text-decoration: none;
    color: var(--yellow);
}

.contact__mail a:hover {
    text-decoration: underline;
    font-weight: 700;
}

/* contact end */

/* footer start */

.footer__main {
width: 100%;
height: auto;
}

.footer::before {
    content: "";
    display: block;
    height: 50px;
    width: 100%;
    margin: 0 auto;
    background-color: var(--darkblue);
}

.footer__social {
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background-color: var(--darkblue);
}

.footer__twitter,
.footer__discord,
.footer__telegram,
.footer__medium,
.footer__reddit {
width: 40px;
height: 40px;
margin: 0 10px;
}