body,
html {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: white;
    overflow-x: hidden;
    height: 100%;
    font-family: "Inter", sans-serif;
}

:root {
    --nav-h: 4.5vw;
    --gap-h: 18px;
    --box-one-h: 145vw;
    --box-two-h: none;
    --box-six-h: none;
    --border-radius: 27px;
    --card-width: 75vw;
    --card-height: 55vw;
    --row-one-height: var(--card-height);
    --row-two-h: auto;
    --row-two-w: 100vw;
    --box-three-four-h: 145vw;
    --box-three-four-w: calc(100vw - 2 * var(--gap-h));
    --box-five-h: 150vw;
    --box-five-w: calc(100vw - 2 * var(--gap-h));
    --box-two-w: none;
    --box-six-w: none;
}

@media screen and (min-width: 768px) and (max-width: 1167px) {
    :root {
        --nav-h: 3.5vw;
        --gap-h: 27px;
        --box-one-h: 110vw;
        --box-two-h: none;
        --box-six-h: none;
        --border-radius: 36px;
        --card-width: 80vw;
        --card-height: 50vw;
        --row-one-height: var(--card-height);
        --row-two-h: auto;
        --row-two-w: 100vw;
        --box-three-four-h: 110vw;
        --box-three-four-w: calc(100vw - 2 * var(--gap-h));
        --box-five-h: 110vw;
        --box-five-w: calc(100vw - 2 * var(--gap-h));
        --box-two-w: none;
        --box-six-w: none;
    }
}

@media screen and (min-width: 1168px) {
    :root {
        --nav-h: 2.5vw;
        --gap-h: 27px;
        --box-one-h: 85vh;
        --box-one-w: calc(100vw - 2 * var(--gap-h));
        --box-two-h: 20vw;
        --border-radius: 36px;
        --card-width: 25vw;
        --card-height: 20vw;
        --row-one-height: var(--card-height);
        --row-two-h: 65vh;
        --row-two-w: 100vw;
        --box-three-four-h: 65vh;
        --box-three-four-w: calc(50vw - 1.5 * var(--gap-h));
        --box-five-h: 40vw;
        --box-five-w: calc(100vw - 2 * var(--gap-h));
        --box-two-w: calc(100vw - 2 * var(--gap-h));
        --box-six-w: var(--box-two-w);
    }
}

.box-one {
    margin: var(--gap-h);
    width: var(--box-one-w);
    height: var(--box-one-h);
    border-radius: var(--border-radius);
    position: relative;
    background-color: black;
    overflow: hidden;
    padding-top: 5.8vw;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

@media screen and (min-width: 768px) and (max-width: 1167px) {
    .box-one {
        padding-top: 4.4vw;
    }
}

@media screen and (min-width: 1168px) {
    .box-one {
        padding-top: 0;
    }
}

.box-one img {
    position: absolute;
    width: 200%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
    transform: none;
}

@media screen and (min-width: 768px) and (max-width: 1167px) {
    .box-one img {
        object-position: left 60%;
    }
}

@media screen and (min-width: 1168px) {
    .box-one img {
        width: 100%;
        object-position: left 60%;
    }
}

.box-five img {
    position: absolute;
    width: 200%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: -50%;
    object-position: center 25%;
}

@media screen and (min-width: 768px) and (max-width: 1167px) {
    .box-five img {
        width: 200%;
        height: 100%;
        left: -50%;
    }
}

@media screen and (min-width: 1168px) {
    .box-five img {
        width: 100%;
        height: 100%;
        left: 0;
    }
}

.row-one {
    height: var(--row-one-height);
    display: flex;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.row-one::-webkit-scrollbar {
    display: none;
}

.card-container {
    gap: var(--gap-h);
    padding: 0 var(--gap-h);
    display: flex;
    flex-wrap: nowrap;
}

.card {
    border-radius: var(--border-radius);
    width: var(--card-width);
    height: var(--card-height);
    background-color: black;
    color: white;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

#card-one {
    width: var(--card-width);
    align-items: end;
    background-color: rgba(255, 255, 255, 0);
}

@media screen and (min-width: 1168px) {
    #card-one {
        width: 40vw;
    }
}

.box-two {
    display: none;
}

@media screen and (min-width: 768px) and (max-width: 1167px) {
    .box-two {
        display: none;
    }
}

@media screen and (min-width: 1168px) {
    .box-two {
        margin: var(--gap-h);
        height: var(--box-two-h);
        border-radius: var(--border-radius);
        width: var(--box-two-w);
        background-color: black;
        position: relative;
        display: block;
    }
}

.row-two {
    margin-top: var(--gap-h);
    width: var(--row-two-w);
    height: var(--row-two-h);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--gap-h);
}

@media screen and (min-width: 1168px) {
    .row-two {
        gap: 0;
        padding-bottom: 0;
    }
}

.box-three {
    left: var(--gap-h);
    width: var(--box-three-four-w);
    border-radius: var(--border-radius);
    height: var(--box-three-four-h);
    position: relative;
    background-color: black;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

@media screen and (min-width: 1168px) {
    .box-three {
        position: absolute;
    }
}

.box-three img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
    width: 150%;
    height: 100%;
    object-fit: cover;
}

@media screen and (min-width: 1168px) {
    .box-three img {
        width: 100%;
    }
}

.box-four {
    margin-left: var(--gap-h);
    width: var(--box-three-four-w);
    height: var(--box-three-four-h);
    border-radius: var(--border-radius);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

@media screen and (min-width: 1168px) {
    .box-four {
        right: var(--gap-h);
        position: absolute;
    }
}

.box-four video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    object-position: center 25%;
    z-index: 0;
}

@media screen and (min-width: 768px) and (max-width: 1167px) {
    .box-four video {
        width: 100%;
    }
}

@media screen and (min-width: 1168px) {
    .box-four video {
        width: 100%;
    }
}

.gorkem-vector,
.meric-vector {
    display: none;
}

@media screen and (min-width: 1168px) {
    .gorkem-vector {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -125%);
        height: 7.5vw;
        width: auto;
        display: block;
    }

    .meric-vector {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, 25%);
        height: 7.5vw;
        width: auto;
        display: block;
    }

    .gorkem-vector svg,
    .meric-vector svg {
        display: block;
        height: 100%;
        width: auto;
    }

    .gorkem-vector svg path,
    .meric-vector svg path {
        fill: white;
        stroke: white;
        stroke-width: 36px;
    }
}

.box-five {
    width: var(--box-five-w);
    height: var(--box-five-h);
    border-radius: var(--border-radius);
    margin: var(--gap-h);
    position: relative;
    overflow: hidden;
}

.box-six {
    display: none;
}

@media screen and (min-width: 768px) and (max-width: 1167px) {
    .box-six {
        display: none;
    }
}

@media screen and (min-width: 1168px) {
    .box-six {
        margin: var(--gap-h);
        height: var(--box-two-h);
        border-radius: var(--border-radius);
        width: var(--box-six-w);
        background-color: black;
        position: relative;
        overflow: hidden;
        display: block;
    }
}

.box-seven {
    width: var(--box-five-w);
    height: var(--box-five-h);
    border-radius: var(--border-radius);
    margin: var(--gap-h);
    position: relative;
    overflow: hidden;
}

.box-seven img {
    position: absolute;
    width: 200%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: -50%;
    object-position: center 50%;
}

@media screen and (min-width: 768px) and (max-width: 1167px) {
    .box-seven img {
        width: 200%;
        height: 100%;
        left: -50%;
    }
}

@media screen and (min-width: 1168px) {
    .box-seven img {
        width: 100%;
        height: 100%;
        left: 0;
    }
}

.glo-vector,
.ry-vector,
.univ-vector,
.erse-vector {
    position: relative;
    height: 15%;
    width: 100%;
    margin-left: 10vw;
    align-self: flex-start;
    display: flex;
    justify-content: flex-start;
}

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

    .glo-vector,
    .ry-vector,
    .univ-vector,
    .erse-vector {
        align-self: center;
        justify-content: center;
        margin-left: 0;
    }
}

@media screen and (min-width: 1168px) {

    .glo-vector,
    .ry-vector,
    .univ-vector,
    .erse-vector {
        display: none;
    }
}

.glo-vector svg,
.ry-vector svg,
.univ-vector svg,
.erse-vector svg {
    width: auto;
    height: 100%;
    display: block;
}

.glo-vector svg path,
.ry-vector svg path,
.univ-vector svg path,
.erse-vector svg path {
    fill: white;
    stroke: white;
    stroke-width: 36px;
}

.glory-vector,
.universe-vector {
    display: none;
}

@media screen and (min-width: 1168px) {
    .glory-vector {
        position: absolute;
        left: 50%;
        bottom: 40%;
        transform: translateX(-50%);
        width: 70vw;
        display: block;
    }
}

@media screen and (min-width: 1168px) {
    .universe-vector {
        position: absolute;
        top: calc(60% + 5vw);
        left: 50%;
        width: 40vw;
        transform: translateX(-50%);
        display: block;
    }
}

.glory-vector svg,
.universe-vector svg {
    width: 100%;
    height: auto;
    display: block;
}

.glory-vector svg path,
.universe-vector svg path {
    fill: white;
    stroke: white;
    stroke-width: 36px;
}

.one-tree-vectors {
    display: none;
}

@media screen and (min-width: 768px) and (max-width: 1167px) {
    .one-tree-vectors {
        display: none;
    }
}

@media screen and (min-width: 1168px) {
    .one-tree-vectors {
        display: flex;
        align-items: flex-end;
        gap: 3vw;
        flex-wrap: wrap;
        position: absolute;
        right: 3.5vw;
        top: 3.5vw;
    }
}

.one-vector-one,
.tree-vector {
    display: inline-block;
}

.one-tree-vectors svg {
    height: 5vw;
    display: block;
    height: auto;
    width: auto;
}

@media screen and (min-width: 768px) and (max-width: 1167px) {
    .one-tree-vectors svg {
        height: 5vw;
    }
}

@media screen and (min-width: 1168px) {
    .one-tree-vectors svg {
        height: 5vw;
    }
}

.one-vector-one svg path,
.tree-vector svg path {
    fill: #FF9D00;
    stroke: #FF9D00;
    stroke-width: 36px;
}

.tree-text {
    display: none;
}

@media screen and (min-width: 768px) and (max-width: 1167px) {
    .tree-text {
        display: none;
    }
}

@media screen and (min-width: 1168px) {
    .tree-text {
        position: absolute;
        top: 13vw;
        right: 3.5vw;
        width: 45%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex-shrink: 0;
        text-align: right;
        color: #FFC465;
        font-family: "Inter", sans-serif;
        font-size: 1vw;
        font-style: normal;
        font-weight: 200;
        line-height: normal;
    }
}

.box-two .tree-image {
    display: none;
}

@media screen and (min-width: 768px) and (max-width: 1167px) {
    .box-two .tree-image {
        display: none;
    }
}

@media screen and (min-width: 1168px) {
    .box-two .tree-image {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        height: 80%;
        width: auto;
        max-width: 45%;
        display: block;
    }
}

.box-two .tree-image svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.one-world-vectors {
    display: none;
}

@media screen and (min-width: 768px) and (max-width: 1167px) {
    .one-world-vectors {
        display: none;
    }
}

@media screen and (min-width: 1168px) {
    .one-world-vectors {
        display: flex;
        align-items: flex-start;
        gap: 3vw;
        flex-wrap: wrap;
        position: absolute;
        left: 3.5vw;
        top: 3.5vw;
    }
}

.one-world-vectors svg {
    display: block;
    height: auto;
    width: auto;
    height: 5vw;
}

@media screen and (min-width: 768px) and (max-width: 1167px) {
    .one-world-vectors svg {
        height: 5vw;
    }
}

@media screen and (min-width: 1168px) {
    .one-world-vectors svg {
        height: 5vw;
    }
}

.one-vector-two svg path,
.world-vector svg path {
    fill: #C9A99A;
    stroke: #C9A99A;
    stroke-width: 36px;
}

.blackhole-text {
    display: none;
}

@media screen and (min-width: 768px) and (max-width: 1167px) {
    .blackhole-text {
        display: none;
    }
}

@media screen and (min-width: 1168px) {
    .blackhole-text {
        position: absolute;
        top: 13vw;
        left: 3.5vw;
        width: 55%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex-shrink: 0;
        text-align: left;
        color: #D5C0B2;
        font-family: "Inter", sans-serif;
        font-size: 1vw;
        font-style: normal;
        font-weight: 200;
        line-height: normal;
    }
}

.box-six .blackhole-image {
    display: none;
}

@media screen and (min-width: 768px) and (max-width: 1167px) {
    .box-six .blackhole-image {
        display: none;
    }
}

@media screen and (min-width: 1168px) {
    .box-six .blackhole-image {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        height: 100%;
        width: auto;
        right: 0;
        display: block;
    }
}

.box-six .blackhole-image svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.holo-vector,
.earth-vector {
    display: none;
}

@media screen and (min-width: 1168px) {
    .holo-vector {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -125%);
        height: 7.5vw;
        width: auto;
        display: block;
    }

    .holo-vector svg {
        display: block;
        height: 100%;
        width: auto;
    }

    .holo-vector svg path {
        fill: #C3E8E3;
        stroke: #C3E8E3;
        stroke-width: 36px;
    }

    .earth-vector {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, 25%);
        height: 7.5vw;
        width: auto;
        display: block;
    }

    .earth-vector svg {
        display: block;
        height: 100%;
        width: auto;
    }

    .earth-vector svg path {
        fill: #C3E8E3;
        stroke: #C3E8E3;
        stroke-width: 36px;
    }
}

.castle-vector {
    height: auto;
    width: 100%;
}

.castle-vector svg {
    display: block;
    height: auto;
    width: 100%;
}

.menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 101;
    background: #111;
    transform: translateY(-100%);
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    overflow: hidden;
    visibility: hidden;
    transition: transform .6s cubic-bezier(.77, 0, .175, 1), visibility 0s linear .6s;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

html.menu-is-open,
body.menu-is-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

body.menu-is-open .menu-overlay {
    transform: translateY(0);
    visibility: visible;
    transition: transform .6s cubic-bezier(.77, 0, .175, 1), visibility 0s;
}

.overlay-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    text-align: center;
    padding-top: 36px;
    padding-bottom: 36px;
}

@media screen and (min-width: 768px) {
    .overlay-content {
        padding-top: 72px;
        padding-bottom: 72px;
    }
}

html.menu-is-open {
    overflow: hidden;
}

.box-one .navbar .menu-stick,
.box-one .navbar .menu-stick * {
    -webkit-user-select: none;
    user-select: none;
}

.box-one .navbar .menu-stick:focus {
    outline: none;
}

.module-one-link,
.module-two-link,
.module-three-link {
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: 45px;
    text-decoration: none;
    z-index: 102;
}

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

    .module-one-link,
    .module-two-link,
    .module-three-link {
        border-radius: 63px;
    }
}

@media screen and (min-width: 1168px) {

    .module-one-link,
    .module-two-link,
    .module-three-link {
        border-radius: 63px;
    }
}

.module-four-link {
    display: none;
}

@media screen and (min-width: 1168px) {
    .module-four-link {
        display: inline-block;
        width: 100%;
        height: 100%;
        border-radius: 63px;
        text-decoration: none;
        z-index: 102;
        display: block;
    }
}

.modules-row {
    display: flex;
    flex-direction: column;
    gap: 36px;
    width: calc(100vw - 72px);
    align-items: center;
}

@media screen and (min-width: 768px) and (max-width: 1167px) {
    .modules-row {
        gap: 72px;
        width: calc(100vw - 144px);
    }
}

@media screen and (min-width: 1168px) {
    .modules-row {
        gap: 72px;
        width: calc(100vw - 144px);
        flex-direction: row;
    }
}

.module-one,
.module-two,
.module-three,
.module-four {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.module-one {
    position: relative;
    width: calc(100vw - 72px);
    margin-bottom: 36px;
    height: 35vh;
    border-radius: 45px;
    flex: 0 0 35vh;
    overflow: hidden;
    background-color: #D1D1D1;
}

@media screen and (min-width: 768px) and (max-width: 1167px) {
    .module-one {
        width: calc(100vw - 144px);
        margin-bottom: 72px;
        border-radius: 63px;
    }
}

@media screen and (min-width: 1168px) {
    .module-one {
        width: calc(100vw - 144px);
        margin-bottom: 72px;
        height: 50vh;
        border-radius: 63px;
        flex: 0 0 50vh;
    }
}

.module-two,
.module-three {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(100vw - 72px);
    border-radius: 45px;
    height: calc(32.5vh - 72px);
    flex: 0 0 auto;
    background-color: #D1D1D1;
}

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

    .module-two,
    .module-three {
        width: calc(100vw - 144px);
        border-radius: 63px;
        height: calc(32.5vh - 144px);
    }
}

@media screen and (min-width: 1168px) {

    .module-two,
    .module-three {
        width: calc((100vw - 288px) / 3);
        border-radius: 63px;
        height: calc(50vh - 216px);
        flex: 1 1 1;
    }
}

.module-four {
    display: none;
}

@media screen and (min-width: 1168px) {
    .module-four {
        width: calc((100vw - 288px) / 3);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 63px;
        height: calc(50vh - 216px);
        flex: 1 1 1;
        background-color: #D1D1D1;
    }
}

.box-one .navbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 18vw;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 103;
    pointer-events: none;
    transition: transform 0.9s ease;
}

@media screen and (min-width: 768px) and (max-width: 1167px) {
    .box-one .navbar {
        height: 13.3vw;
    }
}

@media screen and (min-width: 1168px) {
    .box-one .navbar {
        height: 9.6vw;
    }
}

body.menu-is-open .box-one .navbar {
    transform: translateY(18px);
}

@media screen and (min-width: 768px) and (max-width: 1167px) {
    body.menu-is-open .box-one .navbar {
        transform: translateY(36px);
    }
}

@media screen and (min-width: 1168px) {
    body.menu-is-open .box-one .navbar {
        transform: translateY(36px);
    }
}

.box-one .navbar .menu-stick {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 104;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
    outline: none;
    transition: width .45s ease;
}

.box-one .navbar .menu-stick span:first-child {
    position: relative;
    width: 18%;
    height: var(--nav-h);
    background: white;
    border-radius: 9999px;
    transition: width .45s ease;
}


body.menu-is-open .box-one .navbar .menu-stick span:first-child {
    width: 45%;
    transition: width .45s ease;
}

.gorkem-text {
    position: absolute;
    bottom: 5.8vw;
    left: 5.8vw;
    width: 15%;
    height: 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    text-align: left;
    color: white;
    font-family: "Inter", sans-serif;
    font-size: 5.8vw;
    font-style: normal;
    font-weight: 1000;
    line-height: normal;
}

@media screen and (min-width: 768px) and (max-width: 1167px) {
    .gorkem-text {
        left: 50%;
        bottom: 5.8vw;
        transform: translateX(-50%);
        width: 75%;
        text-align: center;
    }
}

@media screen and (min-width: 1168px) {
    .gorkem-text {
        bottom: 0vw;
        left: 3vw;
        width: 15%;
        height: auto;
        text-align: left;
        font-size: 3vw;
        font-weight: 1000;
    }
}

.ho-vector,
.lo-vector,
.ear-vector,
.th-vector {
    position: relative;
    height: 15%;
    width: 100%;
    margin-left: 10vw;
    align-self: flex-start;
    display: flex;
    justify-content: flex-start;
}

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

    .ho-vector,
    .lo-vector,
    .ear-vector,
    .th-vector {
        align-self: center;
        justify-content: center;
        margin-left: 0;
    }
}

@media screen and (min-width: 1168px) {

    .ho-vector,
    .lo-vector,
    .ear-vector,
    .th-vector {
        display: none;
    }
}

.ho-vector svg,
.lo-vector svg,
.ear-vector svg,
.th-vector svg {
    width: auto;
    height: 100%;
    display: block;
}

.ho-vector svg path,
.lo-vector svg path,
.ear-vector svg path,
.th-vector svg path {
    fill: #C3E8E3;
    stroke: #C3E8E3;
    stroke-width: 36px;
}


.gor-vector,
.kem-vector,
.mer-vector,
.ic-vector {
    position: relative;
    height: 15%;
    width: 100%;
    margin-left: 10vw;
    align-self: flex-start;
    display: flex;
    justify-content: flex-start;
}

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

    .gor-vector,
    .kem-vector,
    .mer-vector,
    .ic-vector {
        align-self: center;
        justify-content: center;
        margin-left: 0;
    }
}

@media screen and (min-width: 1168px) {

    .gor-vector,
    .kem-vector,
    .mer-vector,
    .ic-vector {
        display: none;
    }
}

.gor-vector svg,
.kem-vector svg,
.mer-vector svg,
.ic-vector svg {
    width: auto;
    height: 100%;
    display: block;
}

.gor-vector svg path,
.kem-vector svg path,
.mer-vector svg path,
.ic-vector svg path {
    fill: white;
    stroke: white;
    stroke-width: 36px;
}