@media (max-width: 1280px) {

    .trading__sail,
    .trading__gsail,
    .trading__liquidity,
    .trading__track {
        width: 55%;
    }

    .tokenomic__sail_gsail {
        width: 55%;
    }

    .ecosystem__sail_gsail {
        width: 55%;
    }

    .roadmap__solanasail {
        width: 55%;
    }

    .faq__solanasail {
        width: 55%;
    }

    .contact__solanasail {
        width: 55%;
    }

    .trading__container {
        width: 33%;
        margin: 15px 0;
    }

}


@media (max-width: 1080px) {

    .header__logo {
        width: 18vw;
    }

    .menu__link {
        font-size: 11px;
        padding: 18px 10px;
    }

    .trading__sail,
    .trading__gsail,
    .trading__liquidity,
    .trading__track {
        width: 75%;
    }

    .trading__link {
        font-size: 13px;
    }

    .tokenomic__sail_gsail {
        width: 75%;
    }

    .ecosystem__sail_gsail {
        width: 75%;
    }

    .roadmap__solanasail {
        width: 75%;
    }

    .faq__solanasail {
        width: 75%;
    }

    .contact__solanasail {
        width: 75%;
    }

    .footer__twitter,
    .footer__discord,
    .footer__telegram,
    .footer__medium,
    .footer__reddit {
        margin: 0 20px;
    }

}


@media (max-width: 930px) {

    .navigation {
        display: none;
    }

    /* hamburger menu start */

    #menu {
        z-index: 2;
    }

    #menu-bar {
        width: 45px;
        height: 40px;
        margin: 30px 0 0 20px;
    }

    .bar {
        height: 5px;
        width: 100%;
        background-color: var(--blue);
        display: block;
        border-radius: 5px;
        transition: 0.3s ease;
    }

    #bar1 {
        transform: translateY(-4px);
    }

    #bar3 {
        transform: translateY(4px);
    }

    .nav__hamburger {
        transition: 0.3s ease;
        display: none;
    }

    .nav__hamburger__list {
        padding: 0 20px;
    }

    .nav__hamburger__elem {
        list-style: none;
        padding: 4px 0;
    }

    .nav__hamburger__link {
        font-weight: 300;
        font-size: 16px;
        text-transform: uppercase;
        letter-spacing: 2px;
        text-align: left;
        line-height: 170%;
        color: var(--white);
        text-decoration: none;
    }

    .menu-bg,
    #menu {
        top: 0;
        left: 0;
        position: fixed;
    }

    .menu-bg {
        z-index: 1;
        width: 0;
        height: 0;
        margin: 30px 0 20px 20px;
        background-color: var(--blue);
        border-radius: 50%;
        transition: 0.3s ease;
    }

    .change {
        display: block;
    }

    .change .bar {
        background-color: var(--white);
    }

    .change #bar1 {
        transform: translateY(4px) rotateZ(-45deg);
    }

    .change #bar2 {
        opacity: 0;
    }

    .change #bar3 {
        transform: translateY(-6px) rotateZ(45deg);
    }

    .change-bg {
        width: 400px;
        height: 600px;
        transform: translate(-60%, -20%);
    }

    /* hamburger menu end */

    .trading__sail,
    .trading__gsail,
    .trading__liquidity,
    .trading__track {
        width: 80%;
    }

    .trading__sail__title,
    .trading__liquidity__title,
    .trading__track__title {
        font-weight: 300;
        font-size: 32px;
        margin: 10px 0 10px 0;
    }

    .trading__gsail__title {
        font-weight: 300;
        font-size: 32px;
        margin: 50px 0 10px 0;
    }

    .trading__sail__text,
    .trading__gsail__text,
    .trading__liquidity__text,
    .trading__track__text {
        font-size: 12px;
    }

    .trading__gears {
        width: 20%;
        margin: 30px auto;
    }

    .tokenomic__sail_gsail {
        width: 80%;
    }

    .tokenomic__title {
        font-weight: 300;
        font-size: 32px;
    }

    .tokenomic__text {
        font-size: 12px;
    }

    .ecosystem__sail_gsail {
        width: 80%;
    }

    .ecosystem__title {
        font-weight: 300;
        font-size: 32px;
    }

    .ecosystem__text {
        font-size: 12px;
    }

    .roadmap__solanasail {
        width: 80%;
    }

    .roadmap__title {
        font-weight: 300;
        font-size: 32px;
    }

    .roadmap__text {
        font-size: 12px;
    }

    .faq__solanasail {
        width: 80%;
    }

    .faq__title {
        font-weight: 300;
        font-size: 32px;
        margin: 20px 0 10px 0;
    }

    .faq__question {
        font-size: 14px;
    }

    .faq__answer {
        font-size: 12px;
    }

    .contact__solanasail {
        width: 80%;
    }

    .contact__title {
        font-weight: 300;
        font-size: 32px;
        margin: 30px 0 10px 0;
    }

    .contact__subtitle {
        font-weight: 300;
    }

    .contact__yacht {
        top: 50%;
        transform: translate(0, 10%);
    }

    .contact__img {
        height: 400px;
    }

}


@media (max-width: 820px) {
    .header__logo {
        width: 28vw;
    }
}


@media (max-width: 680px) {

    .nav__hamburger__link {
        font-size: 15px;
    }

    .trading__container {
        width: 25%;
        margin: 15px 25px 15px 0;
    }

    .contact__yacht {
        transform: translate(0, 20%);
    }

    .contact__img {
        height: 350px;
    }

}


@media (orientation: landscape) and (max-width: 640px) {

    /* hamburger menu start */

    #menu-bar {
        width: 35px;
    }

    .nav__hamburger__link {
        font-size: 13px;
        line-height: 150%;
    }

    /* hamburger menu end */

    .trading__sail,
    .trading__gsail,
    .trading__liquidity,
    .trading__track {
        width: 90%;
    }

    .tokenomic__sail_gsail {
        width: 90%;
    }

    .ecosystem__sail_gsail {
        width: 90%;
    }

    .roadmap__solanasail {
        width: 90%;
    }

    .faq__solanasail {
        width: 90%;
    }

    .contact__solanasail {
        width: 90%;
    }

    .contact__yacht {
        transform: translate(0, 30%);
    }

    .contact__img {
        height: 300px;
    }
}


@media (max-width: 430px) {

    .header__main {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        width: 100%;
    }

    .header__background {
        display: none;
    }

    .header__bg__mobile {
        display: block;

    }

    .header__bg__mobile--img {
        left: 0;
        top: 0;
        width: 100%;
        height: auto;
        margin: -20px auto 0;
    }

    .header__logo {
        left: 50%;
        transform: translate(-50%, 0);
        top: 0;
        width: 50%;
    }

    .navigation {
        display: none;
    }

    /* hamburger menu start */

    #menu-bar {
        width: 45px;
        margin: 30px 0 20px 20px;
    }

    .nav__hamburger__link {
        font-size: 16px;
        line-height: 150%;
    }

    .nav__hamburger__elem {
        padding: 10px 0;
    }

    .change-bg {
        width: 500px;
        height: 700px;
        transform: translate(-60%, -20%);
    }

    /* hamburger menu end */

    .nav__top {
        bottom: 80px;
        right: 10px;
        width: 50px;
        height: 50px;
    }

    .trading {
        background-image: none;
    }

    .trade__img__mobile {
        display: block;
        left: 0;
        top: 0;
        width: 100%;
        height: auto;
        margin: 0 auto;
    }

    .trading__sail,
    .trading__gsail,
    .trading__liquidity,
    .trading__track {
        width: 90%;
    }

    .trading__sail__title,
    .trading__liquidity__title,
    .trading__track__title {
        font-weight: 300;
        font-size: 32px;
        margin: 40px 0 10px 0;
    }

    .trading__gsail__title {
        font-weight: 300;
        font-size: 32px;
        margin: 40px 0 10px 0;
    }

    .trading__sail__list,
    .trading__gsail__list,
    .trading__liquidity__list {
        width: 100%;
    }

    .trading__container {
        width: 44%;
        margin: 20px 20px 20px 0;
    }

    .trading__link {
        font-size: 16px;
    }

    .trading__gears {
        width: 40%;
        margin: 30px auto 0;
    }

    .trading__gears__sail {
        display: block;
        width: 40%;
        margin: 30px auto 0;
    }

    .tokenomic__sail_gsail {
        width: 90%;
    }

    .tokenomic__img {
        display: none;
    }

    .tokenomic__img__mobile {
        display: block;
        left: 0;
        top: 0;
        width: 100%;
        height: auto;
        margin: 0 auto;
    }

    .ecosystem__sail_gsail {
        width: 90%;
    }

    .ecosystem__img {
        display: none;
    }

    .ecosystem__img__mobile {
        display: block;
        left: 0;
        top: 0;
        width: 100%;
        height: auto;
        margin: 0 auto;
    }

    .roadmap__solanasail {
        width: 90%;
    }

    .roadmap__img {
        display: none;
    }

    .roadmap__img__mobile {
        display: block;
        left: 0;
        top: 0;
        width: 100%;
        height: auto;
        margin: 0 auto;
    }

    .faq::before {
        height: 10px;
    }

    .faq {
        background-image: none;
        height: auto;
    }

    .faq__solanasail {
        width: 90%;
    }

    .contact {
        background-image: none;
    }

    .contact__solanasail {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        width: 90%;
    }

    .contact__data {
        width: 100%;
    }

    .contact__yacht {
        display: none;
    }

    .contact__img__mobile {
        display: block;
        left: 0;
        top: 0;
        width: 100%;
        height: auto;
        margin: 50px auto 0;
    }

    .footer__social {
        justify-content: space-evenly;
    }

    .footer__twitter,
    .footer__discord,
    .footer__telegram,
    .footer__medium,
    .footer__reddit {
        margin: 0;
    }

}


@media (max-width: 375px) {

    .header__bg__mobile--img {
        margin: -50px auto 0;
    }

    /* hamburger menu start */

    .nav__hamburger__link {
        font-size: 15px;
        line-height: 150%;
    }

    .change-bg {
        width: 500px;
        height: 650px;
        transform: translate(-60%, -20%);
    }

    /* hamburger menu end */

    .trading__sail__title,
    .trading__gsail__title,
    .trading__liquidity__title,
    .trading__track__title {
        font-size: 30px;
    }

    .trading__sail__text,
    .trading__gsail__text,
    .trading__liquidity__text,
    .trading__track__text {
        font-size: 12px;
    }

    .trading__container {
        width: 43%;
    }

    .trading__link {
        font-size: 14px;
    }

    .tokenomic__title {
        font-size: 30px;
    }

    .tokenomic__text {
        font-size: 13px;
    }

    .ecosystem__title {
        font-size: 30px;
    }

    .ecosystem__text {
        font-size: 13px;
    }

    .roadmap__title {
        font-size: 30px;
    }

    .roadmap__text {
        font-size: 13px;
    }

    .faq__title {
        font-size: 30px;
    }

    .faq__question {
        font-size: 15px;
    }

    .faq__answer {
        font-size: 13px;
    }

    .contact__title {
        font-size: 30px;
    }

    .contact__subtitle {
        font-size: 20px;
    }

    .contact__mail {
        font-size: 15px;
    }

    .footer__twitter,
    .footer__discord,
    .footer__telegram,
    .footer__medium,
    .footer__reddit {
        width: 35px;
        height: 35px;
    }

}


@media (max-width: 320px) {

    /* hamburger menu start */

    #menu-bar {
        width: 35px;
    }

    .bar {
        height: 4px;
    }

    #bar1 {
        transform: translateY(-5px);
    }

    #bar3 {
        transform: translateY(5px);
    }

    .nav__hamburger__link {
        font-size: 14px;
        line-height: 170%;
    }

    .nav__hamburger__elem {
        padding: 7px 0;
    }

    .change #bar3 {
        transform: translateY(-4px) rotateZ(45deg);
    }

    .change-bg {
        width: 600px;
        height: 600px;
        transform: translate(-65%, -20%);
    }

    /* hamburger menu end */

    .trading__link {
        font-size: 12px;
    }

}