@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;700&display=swap');

html {
    scroll-behavior: smooth;
}

* {
    user-select: none;
}

header {
    font-family: 'Figtree', sans-serif;
    border-bottom: 0.093vh solid rgb(242 248 252 / 10%);
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.6vh;
    background-color: #050708;
    height: 6.5vh;
    text-transform: capitalize;
    position: fixed;
    z-index: 99;
    top: 0;
}

.blue {
    color: #0d9bfa;
    margin-left: 1vh;
}

.blue2 {
    color: #0d9bfa;
    margin-left: 0.5vh;
}


header .logo:hover,
header .logo:focus,
header .logo:active {
    border-color: #F2F8FC;
}

header .logo:hover .logo-text,
header .logo:focus .logo-text,
header .logo:active .logo-text {
    color: #F2F8FC;
}

header .navbar .navbar-list .navbar-list-element:hover,
header .navbar .navbar-list .navbar-list-element:focus {
    border-color: #186EA7;
}

header .navbar .navbar-list .navbar-list-element:active {
    border-color: #5BA4D5;
}

header .navbar .navbar-list .navbar-list-element:hover .navbar-list-element-link,
header .navbar .navbar-list .navbar-list-element:focus .navbar-list-element-link {
    color: #186EA7;
}

header .navbar .navbar-list .navbar-list-element:active .navbar-list-element-link {
    color: #5BA4D5;
}

iframe {
    width: 60vh;
    height: 33.8vh;
}

a {
    text-decoration: none;
    color: #F2F8FC;
}

.buynow-roadmap {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.4vh;
    color: #d4d4d4;
    font-weight: 500;
    width: 100%;
    background-color: #003253;
    height: 2.5vh;
}

header .logo .logo-image {
    width: 4vh;
    margin-right: 0.7vh;
    padding-left: 1vh;
    height: 4vh;
}

header .logo .logo-text {
    font-size: 2vh;
    color: white
}

header .logo {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    padding: 0 0.6vh;
    border-bottom: 0.1vh solid transparent;
}

.div-footer {
    position: fixed;
    text-align: center;
    border-top: 0.093vh solid rgb(242 248 252 / 10%);
    padding: 1.3vh;
    width: 100%;
    box-sizing: border-box;
    background-color: #050708;
    bottom: 0;
    display: flex;
    flex-direction: column;
    z-index: 999999;
}

.affiliated {
    font-size: 1.3vh;
    opacity: 0.4;
}

footer .copyright {
    font-size: 1.7vh;
    font-weight: 600;
}

.footer-grid {
    display: grid;
    grid-template-columns: 20% 60% 20%;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    width: 100%;
}

.footer-grid-mid {
    grid-area: 1 / 2 / 2 / 3;
}

.footer-grid-right {
    grid-area: 1 / 3 / 2 / 4;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-right: 5%;
}

.icon--full-color {
    margin-left: 1vh;
    width: 3.8vh;
    height: 2.4vh;
}

nav {
    display: block;
    unicode-bidi: isolate;
}

header .navbar .navbar-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.main-content {
    width: 100%;
    display: grid;
    grid-template-columns: 45% 55%;
    grid-template-rows: 100%;
    grid-column-gap: 0;
    grid-row-gap: 0;
    height: 95vh;
    background-image: url(background.png);
    background-position: center;
    background-size: cover;
    margin-top: 5vh;
}

.left-side-content {
    background-color: #000000c0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

header .navbar .navbar-list .navbar-list-element {
    display: inline-block;
    border-bottom: 0.1vh solid transparent;
    height: 100%;
}

header .navbar .navbar-list .navbar-list-element .navbar-list-element-link {
    display: block;
    padding: 2.1vh 1.2vh;
    color: #F2F8FC;
    font-size: 1.7vh;
}

.scroll-info {
    height: 92vh;
    width: 100%;
}

.main-label {
    margin-top: 3vh;
    font-size: 3vh;
    text-align: center;
    margin-bottom: 3vh;
    display: flex;
    justify-content: center;
}

.first-panel {
    height: 81.5vh;
    width: 100%;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 100%;
    grid-column-gap: 0;
    grid-row-gap: 0;
    background-image: url(first.png);
    background-position: center;
    background-size: cover;
}

.price-panel {
    height: 75.2vh;
    width: 100%;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 100%;
    grid-column-gap: 0;
    grid-row-gap: 0;
    background: #000000a6;
}

.price-main {
    background-image: url(background.png);
    background-position: center;
    background-size: cover;
}


iframe {
    width: 64vh;
    height: 36vh;
}

.hr-roadmap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -2.5vh;
    height: 0.2vh;
    border: none;
    background-color: white;
    width: 80vh;
}

.image10 {
    background-image: url(https://i.imgur.com/fNLG23n.jpg);
    background-position: center;
    background-size: cover;
    width: 64vh;
    height: 36vh;
    cursor: pointer;
}

.pointer {
    cursor: pointer;
}

.pointer:hover {
    color: #29a9ff;
}

.ti-click {
    margin-left: 0.25vh;
}

.ti-help-hexagon {
    color: #2196f3;
}

.image11 {
    background-image: url(https://i.imgur.com/ktfQxRw.jpg);
    background-position: center;
    background-size: cover;
    width: 64vh;
    height: 36vh;
}

.image115 {
    background-image: url(https://i.imgur.com/ZVaBtVE.png);
    background-position: center;
    background-size: cover;
    width: 64vh;
    height: 36vh;
}

.image12 {
    background-image: url(https://i.imgur.com/TgqnSI1.jpg);
    background-position: center;
    background-size: cover;
    width: 64vh;
    height: 36vh;
}

.anchor {
    position: absolute;
    margin-top: 598vh;
}

.image125 {
    background-image: url(https://i.imgur.com/AlMDyNX.png);
    background-position: center;
    background-size: cover;
    width: 64vh;
    height: 36vh;
}

.image13 {
    background-image: url(https://i.imgur.com/cvfoAv2.png);
    background-position: center;
    background-size: cover;
    width: 64vh;
    height: 36vh;
}

.image135 {
    background-image: url(https://i.imgur.com/cJXUkjh.png);
    background-position: center;
    background-size: cover;
    width: 64vh;
    height: 36vh;
}

.image14 {
    background-image: url(https://i.imgur.com/S7q4oI2.png);
    background-position: center;
    background-size: cover;
    width: 64vh;
    height: 36vh;
}

.image145 {
    background-image: url(https://i.imgur.com/YwPB41j.png);
    background-position: center;
    background-size: cover;
    width: 64vh;
    height: 36vh;
}

.image146 {
    background-image: url(https://i.imgur.com/WXWFnqD.png);
    background-position: center;
    background-size: cover;
    width: 64vh;
    height: 36vh;
}

.discordchoice {
    background-image: url(discordchoice.png);
    background-position: center;
    background-size: cover;
    width: 64vh;
    height: 36vh;
    cursor: pointer;
}

a.anchora {
    display: block;
    position: relative;
    top: -250px;
    visibility: hidden;
}

a.anchorb {
    display: block;
    position: relative;
    top: 93.5vh;
    visibility: hidden;
}

a.anchorc {
    display: block;
    position: relative;
    top: 187vh;
    visibility: hidden;
}

a.anchord {
    display: block;
    position: relative;
    top: 280.5vh;
    visibility: hidden;
}

.slider-panel {
    height: 81.4vh;
}

.slider {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.slider-panel {
    display: flex;
    transition: transform 0.5s ease;
}

.first-panel-left {
    flex: 0 0 100%;
}

.slider-panel-left {
    flex: 0 0 100%;
    background-image: url(first.png);
    background-position: center;
    background-size: cover;
}

.slider-panel-main {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    height: 100%;
    width: 50%;
    flex-direction: column;
    background: #00000080;
}

.prev-btn,
.next-btn {
    position: absolute;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    outline: none;
    font-size: 2vh;
    cursor: pointer;
}

.prev-btn {
    bottom: 49%;
    left: 0%;
    height: 2.5vh;
    color: white;
    font-size: 7vh;
}

.nav-div {
    position: fixed;
    z-index: 1;
    right: 1%;
    top: 45%;
    width: 3.3vh;
    background-color: #000000bf;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    height: 35vh;
}

.selected-nav {
    color: #0d9bfa !important;
    border-color: #0d9bfa;
    border-bottom: 0.1vh solid;
}

.selected-div {
    height: 5.2vh !important;
    background: #0d9bfa !important;
    margin-top: 1.8vh !important;
    margin-bottom: 1.8vh !important;
}

.nav-one {
    height: 1.8vh;
    width: 1.8vh;
    background: white;
    margin-top: 3.4vh;
    margin-bottom: 3.4vh;
    cursor: pointer;
}

.nav-two {
    height: 1.8vh;
    width: 1.8vh;
    background: white;
    margin-top: 3.4vh;
    margin-bottom: 3.4vh; 
    cursor: pointer;
    transition: height 0.5s;
}

.nav-three {
    height: 1.8vh;
    width: 1.8vh;
    background: white;
    margin-top: 3.4vh;
    margin-bottom: 3.4vh;
    cursor: pointer;
    transition: height 0.5s;
}

.nav-four {
    height: 1.8vh;
    width: 1.8vh;
    background: white;
    margin-top: 3.4vh;
    margin-bottom: 3.4vh;
    cursor: pointer;
    transition: height 0.5s;
}

.next-btn {
    color: white;
    bottom: 49%;
    right: 2%;
    height: 2.5vh;
    font-size: 7vh;
    transition: height 0.5s;
}

.prev-btn:hover {
    color: #0d9bfa;
}

.next-btn:hover {
    color: #0d9bfa;
}

.panel-title {
    height: 12vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4vh;
    background-color: #000000;
}

.first-panel-main {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    height: 100%;
    flex-direction: column;
}

.first-panel-main-title {
    font-size: 4.4vh;
    font-weight: 500;
    width: 80%;
}

.first-panel-main-desc {
    text-transform: initial;
    color: #ffffff87;
    width: 80%;
    font-size: 1.5vh;
    font-family: 'Figtree';
}

.first-panel-left {
    background: #000000b5;
}

.first-panel-right {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-roadmap {
    margin-top: 7vh;
}

.main-main-roadmap {
    display: grid;
    grid-template-columns: 25% 50% 25%;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    width: 100%;
    height: 100%;
}

.desc-content {
    width: 60vh;
    height: -webkit-fill-available;
    background: #0f0f0fdb;
    padding: 2vh;
}

.ti-square-rotated {
    color: #0d9bfa;
}

.list-position-roadmap {
    font-size: 2vh;
    margin-bottom: 1vh;
}

.list-position-roadmap-last {
    font-size: 2vh;
}

.arrow-down {
    width: 60vh;
    height: 40vh;
    background-image: url(roadmap-arrow.png);
    background-position: center;
    background-size: cover;
    opacity: 0.25;
    margin-top: -40vh;
}

.arrow-down2 {
    width: 60vh;
    height: 40vh;
    background-image: url(roadmap-arrow.png);
    background-position: center;
    background-size: cover;
    opacity: 0.25;
    margin-top: -34vh;
}

.arrow-down3 {
    width: 60vh;
    height: 40vh;
    background-image: url(roadmap-arrow.png);
    background-position: center;
    background-size: cover;
    opacity: 0.25;
    margin-top: -31vh;
}

.desc-title {
    width: 100%;
    background-color: #003253;
    height: 2.5vh;
}

.left-main-roadmap {
    height: 100%;
    background-image: linear-gradient(to right, #001c2b, #050708);
}

.right-main-roadmap {
    height: 100%;
    background-image: linear-gradient(to left, #001c2b, #050708);
}

.desc-title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.4vh;
    color: #d4d4d4;
    font-weight: 500;
}

.items-roadmap {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin-top: 4vh;
}

.item-label {
    font-size: 2vh;
    padding-left: 1.5vh;
    padding-bottom: 0.5vh;
    font-weight: 500;
    font-family: 'Figtree';
    display: flex;
}

.item-roadmap {
    margin-bottom: 15vh;
    z-index: 95;
}

.items-div {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.nav-line {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 6vh;
}

.nav-line-point {
    width: 1.5vh;
    height: 4vh;
    background: #0d9bfa;
    margin-top: 3.5vh;
    box-shadow: 0px 0px 0.5vh 0.1vh #0d9bfa;
}

.nav-line-two {
    width: 1vh;
    height: 48vh;
    background: #ffffff1a;
    margin-top: 2vh;
}

.nav-line-three {
    width: 1vh;
    height: 70vh;
    background: #ffffff1a;
    margin-top: 2vh;
}

.nav-line-four {
    width: 1vh;
    height: 64.5vh;
    background: #ffffff1a;
    margin-top: 2vh;
}

.nav-line-five {
    width: 1vh;
    height: 60.5vh;
    background: #ffffff1a;
    margin-top: 2vh;
}

.nav-line-six {
    width: 1vh;
    height: 61vh;
    background: #ffffff1a;
    margin-top: 2vh;
}

.nav-line-seven {
    width: 1vh;
    height: 60.5vh;
    background: #ffffff1a;
    margin-top: 2vh;
}

.nav-line-eight {
    width: 1vh;
    height: 61vh;
    background: #ffffff1a;
    margin-top: 2vh;
}

.nav-line-nine {
    width: 1vh;
    height: 61vh;
    background: #ffffff1a;
    margin-top: 2vh;
}

.nav-line-ten {
    width: 1vh;
    height: 60.5vh;
    background: #ffffff1a;
    margin-top: 2vh;
}

.nav-line-eleven {
    width: 1vh;
    height: 63.5vh;
    background: #ffffff1a;
    margin-top: 2vh;
}

.nav-line-point2 {
    width: 1.5vh;
    height: 4vh;
    background: #0d9bfa;
    margin-top: 2vh;
    box-shadow: 0px 0px 0.5vh 0.1vh #0d9bfa;
}

body {
    margin: 0;
    font-family: 'Raleway', sans-serif;
    font-size: 1.6vh;
    color: #fff;
    width: 100%;
    height: 100%;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    text-shadow: 0 0 0.2vh #000;
    position: relative;
    overflow-x: hidden;
    background-color: #050708;
}

::-webkit-scrollbar {
    width: 1vh;
    height: 10px;
}

::-webkit-scrollbar-button {
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background: #35343d;
}

::-webkit-scrollbar-track {
    opacity: 0;
}

.background {
    position: absolute;
    width: 105%;
    height: 105%;
    background-image: url('background.png');
    background-position: center;
    background-size: cover;
    filter: blur(0.4vh);
    transform: scale(1.1); 
    transition: transform 4s, filter 4s;
    z-index: -1;
}

.buy-scroll-div {
    opacity: 0;
}

.scroll-down-div {
    margin-top: 1vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2vh;
    color: #ffffff6b;
}

.button-buy-now {
    border: 0.1vh solid #ffffff;
    transition: all 0.3s ease-in-out;
    font-family: 'Figtree', sans-serif;
    cursor: pointer;
    color: white;
    background: rgb(0 0 0 / 48%);
    text-decoration: none;
    font-size: 2.1vh;
    text-align: center;
    width: 10vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2vh 15.6vh 2vh;
    margin-top: 5vh;
}

.button-buy-now:hover {
    border-color: #0d9bfa;
    color: #0d9bfa;
    background: rgba(0, 0, 0, 0.685);
}

iframe {
    pointer-events:none !important;
}

.right-side-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #00000070;
    flex-direction: column;
}

.right-side-main {
    opacity: 0;
}

.teaser-button {
    margin-top: 0.4vh;
    padding: 1.1vh 4.85vh 1.1vh;
    border: 0.1vh solid #ffffff;
    transition: all 0.3s ease-in-out;
    font-family: 'Figtree', sans-serif;
    cursor: pointer;
    color: white;
    background: rgb(0 0 0 / 48%);
    text-decoration: none;
    font-size: 1.5vh;
    text-align: center;
    margin-right: 0.2vh;
    margin-left: 0.2vh;
}

.trailer-button {
    margin-top: 0.7vh;
    padding: 1.6vh 24vh 1.6vh;
    border: 0.1vh solid #ffffff;
    transition: all 0.3s ease-in-out;
    font-family: 'Figtree', sans-serif;
    cursor: pointer;
    color: white;
    background: rgb(0 0 0 / 48%);
    text-decoration: none;
    font-size: 1.5vh;
    text-align: center;
}

.pricing-card {
    height: 90%;
    width: 50%;
    background: #000000d4;
    outline: white solid 0.2vh;
}

.affiliated {
    font-size: 1.3vh;
    opacity: 0.4;
    text-transform: none;
    font-family: 'Figtree', sans-serif;
}

.copyright {
    font-size: 1.7vh;
    font-weight: 600;
    text-transform: none;
    font-family: 'Figtree', sans-serif;
}

.footer-link:hover {
    color: #C0DCEF;
}

.list {
    padding: 3vh;
    height: 41.1vh;
}

.list-position {
    margin-bottom: 1vh;
}

.blue-list-position {
    margin-bottom: 1vh;
    color: #0d9bfa;
}

.title {
    display: flex;
    justify-content: center;
    outline: white solid 0.2vh;
    padding: 3vh;
    font-size: 3vh;
    color: #0d9bfa;
}

.pricing-buy-button {
    display: flex;
    justify-content: center;
    outline: white solid 0.2vh;
    padding: 3vh;
    font-size: 3vh;
    color: #0d9bfa;
    flex-direction: column;
    align-content: center;
    align-items: center;
}

.price-under {
    color: rgba(255, 255, 255, 0.358);
    font-size: 1.4vh;
    font-family: 'Figtree';
}

.pricing-buy-button:hover .price-under {
    background: white;
    color: black !important;
    cursor: pointer;
}

.pricing-buy-button:hover {
    background: white;
    color: black !important;
    cursor: pointer;
}

.price-panel-right {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 4vh;
}

.price-panel-left {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-right: 4vh;
}

.selected-button {
    border-color: #0d9bfa;
    color: #0d9bfa;
    background: rgba(0, 0, 0, 0.685);
}

.buttons-content {
    display: flex;
}

.teaser-button:hover {
    color: black;
    background: white;
}

.trailer-button:hover {
    color: black;
    background: white;
}


.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 9999;
    transition: opacity 4s;
}


    .project {
        font-size: 3vh;
        text-shadow: 0 0 0.4vh #000;
        margin-bottom: -18;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 54vh;
    }

    .sandyshores {
        font-size: 9vh;
        text-shadow: 0 0 0.4vh #000;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .reborn {
        font-size: 16.9vh;
        font-weight: 700;
        margin-top: -5vh;
        margin-bottom: -2.4vh;
        text-shadow: 0 0 0.6vh #000;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .comingsoon {
        font-size: 4.9vh;
        text-shadow: 0 0 0.2vh #000;
        margin-top: -1.55vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .developed {
        margin-top: 6vh;
        font-size: 2vh;
        text-transform: lowercase;
        text-shadow: 0 0 0.2vh #000;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .developed a {
        color: #fff;
        text-decoration: none;
        margin-left: 0.3vh;
    }

    .youtube-main-page {
        width: 60vh;
        height: 33.8vh;
        cursor: pointer;
    }

    .developed a:hover {
        color: #0d9bfa;
        text-decoration: none;
    }

    .project, .sandyshores, .reborn, .comingsoon, .developed {
        opacity: 0;
        transition: opacity 2s;
    }

    @keyframes fadeOut {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }

    @keyframes fadeIn {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

    @media screen and (max-width: 960px) {
        header .navbar .navbar-list .navbar-list-element .navbar-list-element-link {
            font-size: 0;
        }

        header .logo .logo-image {
            margin-right: 0.7vh;
            padding-left: 1vh;
        }

        header .navbar .navbar-list .navbar-list-element .navbar-list-element-link .ti {
            font-size: 2.3vh;
        }

        header .logo .logo-text {
            display: none;
        }
    }

        @media(max-width: 985px) {
        .footer-grid-right {
            display: none;
        }
        
        .footer-grid {
            grid-template-columns: 0% 100% 0%;
        }
    }