:root {
    --transition: all .3s ease-out;
    --ease: cubic-bezier(.625, .05, 0, 1);
    --swiper-transition: transform .8s cubic-bezier(.075, .82, .165, 1);
    --font-180: clamp(100px, calc(16rem + 6px) , 18rem);
    --font-90: clamp(50px, calc(8.5rem + 6px) , 9rem);
    --font-25: clamp(15px, calc(2.1rem + 8px) , 2.5rem);
    --font-24: clamp(13px, calc(2.3rem + 6px) , 2.4rem);
    --font-22: clamp(13px, calc(2.1rem + 6px) , 2.2rem);
    --font-20: clamp(12px, calc(1.8rem + 6px) , 2rem);
    --font-50: clamp(30px, calc(4.5rem + 6px) , 5rem);
    --font-45: clamp(25px, calc(4rem + 6px) , 4.5rem);
    --font-35: clamp(20px, calc(3.8rem + 6px) , 3.5rem);
    --font-112: clamp(80px, calc(11.2rem + 5px) , 12.9rem);
    --font-40: clamp(20px, calc(3.6rem + 6px) , 4rem)
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-weight: 500;
    font-style: normal
}

img,video {
    width: 100%;
    height: 100%;
    object-fit: cover
}

picture {
    height: 100%
}

button {
    background: transparent;
    border: none
}

a {
    text-decoration: none;
    color: inherit
}

li {
    list-style: none
}

body {
    background: #171717
}

html {
    font-size: clamp(8px,calc(10 * (calc(100vw + 2.1rem) / 1920)),19px)
}

@media screen and (min-width: 1500px)and (max-width:1600px)and (orientation:landscape) {
    html {
        font-size:clamp(7.5px,calc(10 * (calc(100vw + 2.1rem) / 1920)),19px)
    }
}

@media screen and (min-width: 1300px)and (max-width:1499px)and (orientation:landscape) {
    html {
        font-size:clamp(7px,calc(10 * (calc(100vw + 2.1rem) / 1920)),19px)
    }
}

@media screen and (min-width: 1101px)and (max-width:1299px)and (orientation:landscape) {
    html {
        font-size:clamp(6px,calc(10 * (calc(100vw + 2.1rem) / 1920)),19px)
    }
}

@media screen and (max-width: 1100px)and (orientation:landscape) {
    html {
        font-size:calc(10 * (100vw / 1920))
    }
}

@media screen and (max-width: 481px)and (orientation:portrait) {
    html {
        font-size:calc(10 * (100vw / 375))
    }
}

@media screen and (min-width: 482px)and (max-width:991px)and (orientation:portrait) {
    html {
        font-size:calc(10 * (100vw / 550))
    }
}

@media screen and (min-width: 992px)and (orientation:portrait) {
    html {
        font-size:calc(10 * (100vw / 600))
    }
}

::-webkit-scrollbar {
    display: none
}

::-webkit-scrollbar-thumb {
    background-color: #00000080;
    border-radius: 4px
}

::selection {
    color: #009ca8;
    background-color: #fff
}

.clippy {
    position: absolute;
    top: -999px;
    left: -999px;
    width: 0;
    height: 0
}

.overflow-wrapper {
    overflow: hidden;
    width: 100%;
    margin-inline:auto;max-width: 3440px
}

html.lenis,html.lenis body {
    height: auto
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
    overflow: clip
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain
}

.lenis.lenis-smooth iframe {
    pointer-events: none
}

.lenis.lenis-autoToggle {
    transition-property: overflow;
    transition-duration: 1ms;
    transition-behavior: allow-discrete
}

.cursor {
    width: 19rem;
    height: 19rem;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: center;
    transition: all .6s cubic-bezier(.2,.8,.4,1);
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    display: grid;
    grid-template-areas: "stack";
    place-items: center;
    opacity: 0;
    z-index: 10
}

@media screen and (orientation: portrait) {
    .cursor {
        display:none
    }
}

.cursor-inner-bg {
    grid-area: stack;
    background-color: #009ca8;
    width: 13.5rem;
    height: 13.5rem;
    transform: rotate(43.26deg)
}

.cursor .cursor-inner-text {
    position: relative;
    grid-area: stack;
    color: #fff;
    text-align: center;
    font-size: 1.8rem;
    line-height: normal;
    letter-spacing: 3.24px;
    width: fit-content;
    height: fit-content
}

.navbar {
    --navbar-text: #fff;
    --navbar-line: linear-gradient( to right, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .2) 40%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, .2) 60%, rgba(255, 255, 255, .94) 100% );
    --filter: blur(5.5px);
    --menu-bars: #fff
}

.navbar[data-nav-style=dark] {
    --navbar-text: #000;
    --navbar-line: linear-gradient( to right, rgba(0, 0, 0, .94) 0%, rgba(255, 255, 255, .2) 40%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, .2) 60%, rgba(0, 0, 0, .94) 100% );
    --filter: blur(0px);
    --menu-bars: #009ca8
}

:root.lenis-stopped .navbar {
    --navbar-text: #fff;
    --navbar-line: linear-gradient( to right, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .2) 40%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, .2) 60%, rgba(255, 255, 255, .94) 100% );
    --menu-bars: #fff
}

:root.lenis-stopped .navbar[data-nav-style=dark] {
    --filter: blur(0px)
}

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 50;
    transition: opacity .3s ease-out;
    overflow: hidden
}

.navbar:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    width: calc(100% - 10rem);
    height: 1.3px;
    background: var(--navbar-line);
    opacity: .9
}

body[data-scrolling-direction=down] .navbar {
    opacity: 0
}

@media screen and (orientation: portrait) {
    .navbar:after {
        width:100%;
        height: 1.2px
    }
}

.navbar .navbar-flex {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: min(4rem,4vh) 5rem
}

@media screen and (orientation: portrait) {
    .navbar .navbar-flex {
        padding:3rem 1.5rem
    }
}

.navbar .navbar-flex .navbar-navigation {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5rem
}

@media screen and (orientation: portrait) {
    .navbar .navbar-flex .navbar-navigation {
        display:none
    }
}

.navbar .navbar-flex .navbar-navigation .navbar-navigation__link {
    color: var(--navbar-text);
    text-align: center;
    font-size: clamp(18px,1.8rem + 4px,2.2rem);
    line-height: normal;
    opacity: .6;
    transition: opacity .3s ease-out
}

@media screen and (min-width: 482px)and (max-width:991px)and (orientation:landscape) {
    .navbar .navbar-flex .navbar-navigation .navbar-navigation__link {
        font-size:clamp(12px,1.8rem + 4px,2.2rem)
    }
}

.navbar .navbar-flex .navbar-navigation .navbar-navigation__link.--is-active {
    opacity: 1
}

.navbar .navbar-flex .navbar-navigation:hover .navbar-navigation__link {
    opacity: .6
}

.navbar .navbar-flex .navbar-navigation:hover .navbar-navigation__link:hover {
    opacity: 1
}

.navbar .navbar-flex .navbar-logo {
    width: 13rem;
    height: max-content;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    cursor: pointer;
    transition: transform .3s ease-out;
    will-change: transform
}

.navbar .navbar-flex .navbar-logo:hover {
    transform: translate(-50%,-50%) scale(.95)
}

@media screen and (orientation: portrait) {
    .navbar .navbar-flex .navbar-logo {
        width:8.7rem;
        height: auto;
        position: static;
        transform: unset
    }

    .navbar .navbar-flex .navbar-logo:hover {
        transform: unset
    }
}

.navbar .navbar-flex .navbar-hamburger {
    position: relative;
    width: 85.136px;
    height: 29px;
    flex-shrink: 0;
    cursor: pointer
}

@media screen and (orientation: portrait) {
    .navbar .navbar-flex .navbar-hamburger {
        width:70px;
        height: 23.844px
    }
}

@media screen and (min-width: 2800px) {
    .navbar .navbar-flex .navbar-hamburger {
        transform:scale(1.3)
    }
}

@media screen and (min-width: 482px)and (max-width:991px)and (orientation:landscape) {
    .navbar .navbar-flex .navbar-hamburger {
        transform:scale(.7)
    }
}

.navbar .navbar-flex .navbar-hamburger .navbar-hamburger__line {
    position: absolute;
    background: var(--navbar-text);
    width: 60px;
    height: 2px;
    transition: .5s var(--ease);
    transform-origin: center
}

@media screen and (orientation: portrait) {
    .navbar .navbar-flex .navbar-hamburger .navbar-hamburger__line {
        width:49px;
        height: 1.6px
    }
}

.navbar .navbar-flex .navbar-hamburger .navbar-hamburger__line.navbar-hamburger__line-top {
    top: 0;
    left: 0;
    transform: translateY(600%)
}

.navbar .navbar-flex .navbar-hamburger .navbar-hamburger__line.navbar-hamburger__line-bottom {
    bottom: 0;
    right: 0
}

@media screen and (orientation: portrait) {
    .navbar .navbar-flex .navbar-hamburger .navbar-hamburger__line.navbar-hamburger__line-top {
        left:0
    }
}

.navbar .navbar-flex .navbar-hamburger .navbar-hamburger__icon {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--navbar-text);
    transform: rotate(43.26deg);
    top: 2px;
    right: 2px;
    transition: .8s var(--ease)
}

@media screen and (orientation: portrait) {
    .navbar .navbar-flex .navbar-hamburger .navbar-hamburger__icon {
        width:8.22px;
        height: 8.22px;
        top: 2px;
        right: 2px
    }
}

.navbar .navbar-flex .navbar-hamburger:hover .navbar-hamburger__line-top {
    transform: translate(10%,600%)
}

.navbar .navbar-flex .navbar-hamburger:hover .navbar-hamburger__line-bottom {
    transform: translate(-32%)
}

.navbar .navbar-flex .navbar-hamburger:hover .navbar-hamburger__icon {
    transform: translateY(12px) rotate(135deg)
}

@media screen and (orientation: portrait) {
    .navbar .navbar-flex .navbar-hamburger:hover .navbar-hamburger__line-top {
        transform:translateY(600%)
    }

    .navbar .navbar-flex .navbar-hamburger:hover .navbar-hamburger__line-bottom {
        transform: translate(0)
    }

    .navbar .navbar-flex .navbar-hamburger:hover .navbar-hamburger__icon {
        transform: translateY(0) rotate(43.26deg)
    }
}

.menu {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 40;
    background-color: #000000a8;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    opacity: 0;
    visibility: hidden;
    transition: .8s var(--ease);
    transform: translateY(10px)
}

.menu.--is-active {
    opacity: 1;
    transform: translateY(0);
    visibility: visible
}

@media screen and (orientation: portrait) {
    .menu {
        display:flex
    }
}

.menu .menu-inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    isolation: isolate
}

@media screen and (orientation: portrait) {
    .menu .menu-inner {
        background:#171717
    }
}

.menu .menu-image {
    height: 100%;
    width: 62.5rem;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    margin-left: 10.5rem
}

@media screen and (orientation: portrait) {
    .menu .menu-image {
        position:absolute;
        height: 100%;
        width: 100%;
        z-index: -1;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        -webkit-mask-image: linear-gradient(to bottom,black,transparent 50%);
        mask-image: linear-gradient(to bottom,black,transparent 50%);
        margin-left: 0;
        display: none
    }
}

.menu .menu-flex {
    display: grid;
    width: 100%;
    height: 100%;
    padding-inline:9.6rem 4.8rem;padding-block:min(15.9rem,15.9vh) 3rem;grid-template-areas: "tagline tagline" "navigation navigation" "cta cta" "socials contact"
}

@media screen and (orientation: portrait) {
    .menu .menu-flex {
        padding-inline:2rem;
        padding-block:min(11.6rem,11.6rem) 2.5rem;grid-template-areas: "tagline tagline" "navigation navigation" "socials socials" "cta cta" "contact contact";
        justify-items: start;
        grid-template-rows: auto auto 1fr auto auto auto
    }
}

.menu .menu-flex .menu-tagline {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: min(4.8rem,4.8vh);
    grid-area: tagline
}

.menu .menu-flex .menu-tagline .menu-tagline__icon {
    width: min(1.5rem,1.5vh);
    height: min(1.5rem,1.5vh);
    flex-shrink: 0;
    background-color: #009ca8;
    transform: rotate(-43.264deg)
}

.menu .menu-flex .menu-tagline .menu-tagline__text {
    color: #fff;
    font-size: min(2rem,2vh);
    line-height: normal
}

@media screen and (orientation: portrait) {
    .menu .menu-flex .menu-tagline {
        gap:.8rem;
        margin-bottom: min(3rem,3vh)
    }

    .menu .menu-flex .menu-tagline .menu-tagline__icon {
        width: .7rem;
        height: .7rem
    }

    .menu .menu-flex .menu-tagline .menu-tagline__text {
        font-size: 1.4rem
    }
}

@media screen and (min-width: 482px)and (max-width:991px)and (orientation:portrait) {
    .menu .menu-flex .menu-tagline .menu-tagline__text {
        font-size:2rem
    }
}

.menu .menu-flex .menu-navigation {
    display: grid;
    gap: min(3rem,3vh);
    grid-area: navigation;
    width: fit-content
}

.menu .menu-flex .menu-navigation .menu-navigation__link {
    color: #ffffff40;
    font-size: min(6rem,6vh);
    line-height: .8;
    display: inline-block;
    transition: var(--transition);
    text-transform: uppercase;
}

.menu .menu-flex .menu-navigation .menu-navigation__link.--is-active {
    color: #fff;
    pointer-events: none
}

.menu .menu-flex .menu-navigation:hover .menu-navigation__link {
    color: #ffffff40
}

.menu .menu-flex .menu-navigation:hover .menu-navigation__link:hover {
    color: #fff
}

@media screen and (orientation: portrait) {
    .menu .menu-flex .menu-navigation {
        gap:min(1.4rem,1.4vh);
        gap: 1.4rem;
        margin-bottom: min(10rem,10vh)
    }

    .menu .menu-flex .menu-navigation .menu-navigation__link {
        font-size: min(3.5rem,3.5vh)
    }

    .menu .menu-flex .menu-navigation:hover .menu-navigation__link.--is-active {
        color: #fff
    }
}

@media screen and (min-width: 482px)and (max-width:991px)and (orientation:portrait) {
    .menu .menu-flex .menu-navigation {
        gap:min(2rem,2vh)
    }

    .menu .menu-flex .menu-navigation .menu-navigation__link {
        font-size: min(5.5rem,5.5vh)
    }
}

.menu .menu-flex .menu-socials {
    margin-bottom: 0;
    grid-area: socials;
    height: fit-content;
    align-self: end
}

.menu .menu-flex .menu-socials .menu-socials__title {
    color: #fff;
    font-size: min(2rem,2vh);
    font-weight: 5;
    line-height: normal;
    margin-bottom: min(2.4rem,2.4vh)
}

.menu .menu-flex .menu-socials .menu-socials__container {
    display: flex;
    align-items: center;
    gap: 5rem
}

.menu .menu-flex .menu-socials .menu-socials__link {
    width: min(2.8rem,2.8vh);
    height: min(2.8rem,2.8vh);
    flex-shrink: 0
}

.menu .menu-flex .menu-socials .menu-socials__link svg {
    width: 100%;
    height: 100%;
    overflow: visible
}

.menu .menu-flex .menu-socials .menu-socials__link:hover path {
    transition: var(--transition)
}

.menu .menu-flex .menu-socials .menu-socials__link:hover path {
    fill: #009ca8;
    stroke: #009ca8!important
}

.menu .menu-flex .menu-socials .menu-socials__link[aria-label="LinkedIn link"]:hover path {
    stroke: #009ca8!important;
    fill: transparent!important
}

@media screen and (orientation: portrait) {
    .menu .menu-flex .menu-socials {
        margin-bottom:min(4.5rem,4.5vh);
        margin-top: auto
    }

    .menu .menu-flex .menu-socials .menu-socials__title {
        font-size: 1.4rem;
        margin-bottom: min(1.8rem,1.8vh)
    }

    .menu .menu-flex .menu-socials .menu-socials__container {
        gap: 3.5rem
    }

    .menu .menu-flex .menu-socials .menu-socials__link {
        width: 2rem;
        height: 2rem
    }
}

@media screen and (min-width: 482px)and (max-width:991px)and (orientation:portrait) {
    .menu .menu-flex .menu-socials .menu-socials__title {
        font-size:2rem
    }
}

.menu .menu-flex .CTA-btn {
    width: 95%;
    grid-area: cta;
    justify-self: end;
    width: fit-content
}

.menu .menu-flex .CTA-btn .CTA-btn__icon {
    width: 1.2rem;
    height: 1.2rem
}

.menu .menu-flex .CTA-btn .CTA-btn__background {
    -webkit-backdrop-filter: var(--filter);
    backdrop-filter: var(--filter)
}

.menu .menu-flex .CTA-btn .CTA-btn__text {
    font-size: min(1.8rem,1.8vh)
}

@media screen and (orientation: portrait) {
    .menu .menu-flex .CTA-btn {
        width:95%;
        grid-area: cta;
        margin-bottom: min(3.9rem,3.9vh);
        justify-self: center
    }

    .menu .menu-flex .CTA-btn .CTA-btn__icon {
        width: 1.2rem;
        height: 1.2rem
    }

    .menu .menu-flex .CTA-btn .CTA-btn__text {
        font-size: min(1.8rem,1.8vh);
        font-size: 1.8rem
    }
}

.menu .menu-flex .menu-terms {
    display: flex;
    align-items: center;
    gap: 4.5rem;
    grid-area: contact;
    justify-self: end;
    align-self: end
}

.menu .menu-flex .menu-terms a {
    color: #fff;
    font-size: min(2rem,2vh);
    line-height: normal;
    transition: var(--transition)
}

.menu .menu-flex .menu-terms a:hover {
    opacity: .6
}

@media screen and (orientation: portrait) {
    .menu .menu-flex .menu-terms {
        display:flex;
        align-items: center;
        justify-content: space-between;
        grid-area: contact;
        justify-self: start;
        width: 100%
    }

    .menu .menu-flex .menu-terms a {
        font-size: 1.4rem;
        line-height: normal
    }
}

.footer {
    position: relative;
    padding-block:min(17.5rem,17.5vh) min(4.5rem,4.5vh);width: 100%;
    display: flex;
    flex-direction: column
}

@media screen and (orientation: portrait) {
    .footer {
        padding-block:6rem 2.5rem
    }
}

.footer .marquee-advanced {
    width: 100%;
    position: relative;
    overflow: hidden;
    margin-bottom: min(9.5rem,7.5vh);
    margin-top: auto
}

@media screen and (orientation: portrait) {
    .footer .marquee-advanced {
        margin-bottom:4rem
    }
}

@media screen and (orientation: landscape)and (max-height:450px) {
    .footer .marquee-advanced {
        margin-bottom:4rem
    }
}

.footer .marquee-advanced:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right,transparent 80%,#171717)
}

.footer .marquee-advanced__scroll,.footer .marquee-advanced__collection {
    will-change: transform;
    display: flex;
    position: relative
}

.footer .marquee-advanced__item-width {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6rem;
    margin-left: 6rem;
    color: #fff;
    font-size: min(19.4rem,19vh);
    line-height: .9;
    flex-shrink: 0;
    width: fit-content;
    white-space: nowrap;
    text-align: center
}

@media screen and (orientation: portrait) {
    .footer .marquee-advanced__item-width {
        margin-left:3.8rem;
        font-size: 11.5rem;
        gap: 3.8rem
    }
}

.footer .marquee-advanced__item-width span {
    width: min(10rem,10vh);
    height: min(10rem,10vh);
    border: 1.5px solid #009ca8
}

@media screen and (orientation: portrait) {
    .footer .marquee-advanced__item-width span {
        width:6rem;
        height: 6rem;
        border: .891px solid #009ca8
    }
}

.footer .marquee-advanced[data-marquee-status=inverted] span {
    transition: .5s var(--ease);
    transform: rotate(-45deg)
}

.footer .marquee-advanced[data-marquee-status=normal] span {
    transition: .5s var(--ease);
    transform: rotate(45deg)
}

.footer-grid {
    padding-inline:6rem 3.5rem;display: grid;
    grid-template-areas: "nav contact socials image" "nav contact careers image" "CTA CTA CTA image" "copyright copyright terms terms";
    column-gap: 10rem;
    grid-template-columns: auto auto auto 1fr
}

@media screen and (orientation: portrait) {
    .footer-grid {
        padding-inline:0;
        display: grid;
        grid-template-areas: "nav contact" "socials careers" "CTA CTA" "image image" "terms terms" "copyright copyright";
        justify-content: normal;
        column-gap: 0;
        grid-template-columns: 1fr 1fr
    }
}

.footer-navigation {
    grid-area: nav;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: min(1.4rem,1.4vh);
    margin: min(4.5rem,4.5vh) 13rem 0 0;
    margin: min(4.5rem,4.5vh) 0rem 0 0;
    height: fit-content;
    flex-shrink: 0
}

@media screen and (orientation: portrait) {
    .footer-navigation {
        gap:1.7rem;
        margin: 0rem 7.4rem 0 3.7rem
    }
}

.footer-navigation__link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: min(1.8rem,1.8vh);
    cursor: pointer;
    transform: translate(-3rem);
    transition: .5s var(--ease);
    flex-shrink: 0
}

@media screen and (orientation: portrait) {
    .footer-navigation__link {
        gap:1.2rem;
        transform: translate(-2.2rem)
    }
}

.footer-navigation__link-icon {
    width: 1rem;
    height: 1rem;
    transform: rotate(-43.264deg) scale(0);
    flex-shrink: 0;
    aspect-ratio: 1/1;
    background: #009ca8;
    transition: var(--transition)
}

.footer-navigation__link-text {
    color: #ffffff80;
    font-size: min(2rem,2vh);
    line-height: 170%;
    text-transform: uppercase;
    white-space: nowrap
}

@media screen and (orientation: portrait) {
    .footer-navigation__link-text {
        font-size:1.4rem;
        line-height: 100%
    }
}

@media screen and (min-width: 482px)and (max-width:991px)and (orientation:portrait) {
    .footer-navigation__link-text {
        font-size:1.8rem
    }
}

.footer-navigation__link.--is-active {
    transform: translate(0)
}

.footer-navigation__link.--is-active .footer-navigation__link-icon {
    transform: rotate(-43.264deg) scale(1)
}

.footer-navigation__link.--is-active .footer-navigation__link-text {
    color: #fff
}

.footer-navigation:hover .footer-navigation__link-icon {
    transform: rotate(0) scale(0)
}

.footer-navigation:hover .footer-navigation__link {
    transform: translate(-3rem)
}

.footer-navigation:hover .footer-navigation__link-text {
    color: #ffffff80
}

.footer-navigation:hover .footer-navigation__link:hover {
    transform: translate(0)
}

.footer-navigation:hover .footer-navigation__link:hover .footer-navigation__link-icon {
    transform: rotate(-43.264deg) scale(1)
}

.footer-navigation:hover .footer-navigation__link:hover .footer-navigation__link-text {
    color: #fff
}

.footer-contact {
    grid-area: contact;
    display: flex;
    flex-direction: column;
    gap: min(1.6rem,1.6vh);
    width: 31rem;
    width: fit-content;
    margin-top: min(4.5rem,4.5vh)
}

@media screen and (orientation: portrait) {
    .footer-contact {
        grid-area:contact;
        gap: 1.5rem;
        width: 13.4rem;
        margin-top: 0rem
    }
}

@media screen and (min-width: 482px)and (max-width:991px)and (orientation:portrait) {
    .footer-contact {
        width:20.4rem
    }
}

.footer-contact__title {
    color: #fff;
    font-size: min(2rem,2vh);
    text-transform: uppercase;
    line-height: normal
}

@media screen and (orientation: portrait) {
    .footer-contact__title {
        font-size:1.4rem
    }
}

.footer-contact__link {
    color: #ffffff80;
    font-size: min(2rem,2vh);
    line-height: normal;
    transition: var(--transition)
}

@media screen and (orientation: portrait) {
    .footer-contact__link {
        font-size:1.4rem
    }
}

@media screen and (min-width: 482px)and (max-width:991px)and (orientation:portrait) {
    .footer-contact__link {
        font-size:1.8rem
    }
}

.footer-contact__link:hover {
    color: #fff
}

.footer-socials {
    grid-area: socials;
    width: 37rem;
    width: fit-content;
    margin-top: min(4.5rem,4.5vh)
}

@media screen and (orientation: portrait) {
    .footer-socials {
        width:9.7rem;
        margin-top: 2.7rem;
        margin-left: 3.7rem
    }
}

.footer-socials__title {
    color: #fff;
    font-size: min(2rem,2vh);
    text-transform: uppercase;
    margin-bottom: min(2rem,2vh);
    line-height: normal
}

@media screen and (orientation: portrait) {
    .footer-socials__title {
        font-size:1.4rem;
        margin-bottom: 1.8rem
    }
}

.footer-socials__container {
    display: flex;
    align-items: center;
    gap: 3.9rem
}

@media screen and (orientation: portrait) {
    .footer-socials__container {
        width:100%;
        justify-content: space-between;
        gap: 0rem
    }
}

.footer-socials__link {
    width: 2.1rem;
    height: 2.1rem;
    flex-shrink: 0
}

.footer-socials__link svg {
    width: 100%;
    height: 100%;
    overflow: visible
}

.footer-socials__link path {
    transition: var(--transition)
}

.footer-socials__link:hover path {
    fill: #009ca8;
    stroke: #009ca8!important
}

.footer-socials__link[aria-label="LinkedIn link"]:hover path {
    stroke: #009ca8!important;
    fill: transparent!important
}

@media screen and (orientation: portrait) {
    .footer-socials__link {
        width:1.6rem;
        height: 1.9rem
    }
}

.footer-careers {
    grid-area: careers;
    display: flex;
    flex-direction: column;
    gap: min(1.6rem,1.6vh);
    width: 37rem;
    width: fit-content
}

@media screen and (orientation: portrait) {
    .footer-careers {
        width:13.9rem;
        margin-top: 2.7rem;
        word-wrap: break-word;
        white-space: normal
    }
}

@media screen and (min-width: 482px)and (max-width:991px)and (orientation:portrait) {
    .footer-careers {
        width:23.9rem
    }
}

.footer-careers__title {
    color: #fff;
    font-size: min(2rem,2vh);
    text-transform: uppercase;
    line-height: normal
}

@media screen and (orientation: portrait) {
    .footer-careers__title {
        font-size:1.4rem
    }
}

.footer-careers__text,.footer-careers__link {
    color: #ffffff80;
    font-size: min(2rem,2vh);
    line-height: normal
}

.footer-careers__link {
    transition: var(--transition)
}

.footer-careers__link:hover {
    color: #fff
}

@media screen and (orientation: portrait) {
    .footer-careers__text,.footer-careers__link {
        font-size:1.4rem
    }
}

@media screen and (min-width: 482px)and (max-width:991px)and (orientation:portrait) {
    .footer-careers__text,.footer-careers__link {
        font-size:1.8rem
    }
}

.footer .footer-image__wrapper {
    grid-area: image;
    position: relative;
    width: 100%;
    height: min(46.9rem,46.9vh);
    margin-bottom: min(7.4rem,7.4vh)
}

.footer .footer-image__wrapper img {
    mask-image: linear-gradient(transparent 0%,black 10%,black 95%,transparent 100%);
    -webkit-mask-image: linear-gradient(transparent 0%,black 10%,black 95%,transparent 100%)
}

@media screen and (orientation: portrait) {
    .footer .footer-image__wrapper {
        width:100%;
        height: 19.5rem;
        width: calc(100% - 4rem);
        margin-inline:auto;margin-bottom: 4.5rem
    }
}

.footer-back-to-top {
    position: absolute;
    bottom: 1.55rem;
    right: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: min(14rem,14vh);
    height: min(14rem,14vh);
    isolation: isolate;
    cursor: pointer
}

@media screen and (orientation: portrait) {
    .footer-back-to-top {
        bottom:-1.55rem;
        right: 0rem;
        width: 10.5rem;
        height: 10.5rem
    }
}

.footer-back-to-top:hover .footer-back-to-top__background {
    transform: rotate(-135deg) scale(.9)
}

.footer-back-to-top:hover .footer-back-to-top__text {
    transform: scale(.9)
}

.footer-back-to-top__background {
    position: absolute;
    z-index: -1;
    width: min(14rem,14vh);
    height: min(14rem,14vh);
    background: #009ca8;
    transform: rotate(-45deg);
    transition: .5s var(--ease)
}

@media screen and (orientation: portrait) {
    .footer-back-to-top__background {
        width:7.4rem;
        height: 7.4rem
    }
}

.footer-back-to-top__text {
    color: #fff;
    font-size: min(1.8rem,1.6vh);
    text-align: center;
    line-height: normal;
    letter-spacing: .9px;
    text-transform: uppercase;
    transition: .5s var(--ease)
}

@media screen and (orientation: portrait) {
    .footer-back-to-top__text {
        font-size:1rem;
        letter-spacing: .5px
    }
}

.footer .CTA-btn {
    grid-area: CTA
}

@media screen and (orientation: portrait) {
    .footer .CTA-btn {
        margin:4rem 2rem 4.5rem;
        width: calc(100% - 4rem)
    }

    .footer .CTA-btn .CTA-btn__inner {
        padding: 1.4rem 2.5rem
    }
}

@media screen and (min-width: 482px)and (max-width:991px)and (orientation:portrait) {
    .footer .CTA-btn {
        max-width:40rem;
        margin-inline:auto}
}

.footer-copyright {
    grid-area: copyright;
    display: flex;
    align-items: center;
    gap: min(1rem,1vh);
    color: #fff;
    font-size: min(2rem,2vh);
    line-height: normal
}

@media screen and (orientation: portrait) {
    .footer-copyright {
        gap:.5rem;
        font-size: 1.2rem;
        padding-inline:1.5rem;width: 100%
    }
}

@media screen and (min-width: 482px)and (max-width:991px)and (orientation:portrait) {
    .footer-copyright {
        font-size:1.4rem
    }
}

.footer-copyright span {
    color: #009ca8
}

.footer-terms {
    grid-area: terms;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: 15rem
}

@media screen and (orientation: portrait) {
    .footer-terms {
        gap:.6rem;
        margin-left: 1.5rem;
        margin-bottom: 1rem
    }
}

.footer-terms a,.footer-terms span {
    color: #fff;
    font-size: min(2rem,2vh);
    line-height: normal;
    transition: var(--transition)
}

@media screen and (orientation: portrait) {
    .footer-terms a,.footer-terms span {
        font-size:1.2rem
    }
}

@media screen and (min-width: 482px)and (max-width:991px)and (orientation:portrait) {
    .footer-terms a,.footer-terms span {
        font-size:1.4rem
    }
}

.footer-terms a:hover {
    color: #009ca8
}

.footer-by-mdx {
    grid-area: terms;
    color: #fff;
    font-size: min(2rem,2vh);
    line-height: normal;
    justify-self: end
}

.footer-by-mdx a {
    transition: var(--transition)
}

.footer-by-mdx a:hover {
    opacity: .5
}

@media screen and (orientation: portrait) {
    .footer-by-mdx {
        grid-area:copyright;
        font-size: 1.2rem;
        margin-right: 1.5rem
    }
}

@media screen and (min-width: 482px)and (max-width:991px)and (orientation:portrait) {
    .footer-by-mdx {
        font-size:1.4rem
    }
}

.footer .footer__lines {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(transparent,#000 30%);
    mask-image: linear-gradient(transparent,#000 30%)
}

@media screen and (orientation: portrait) {
    .footer .footer__lines {
        -webkit-mask-image:linear-gradient(transparent,#000 30%);
        mask-image: linear-gradient(transparent,#000 30%)
    }
}

.uptown-link {
    display: flex;
    gap: 1.6rem;
    align-items: center;
    cursor: pointer
}

.uptown-link-icon {
    width: 1.4rem;
    height: 1.4rem;
    flex-shrink: 0;
    transform: rotate(0) scale(0);
    background: #009ca8;
    transition: .5s var(--ease)
}

@media screen and (orientation: portrait) {
    .uptown-link-icon {
        width:.7rem;
        height: .7rem;
        flex-shrink: 0;
        transform: rotate(0) scale(0);
        background: #009ca8;
        transition: .5s var(--ease)
    }
}

.uptown-link-text {
    color: #ffffff80;
    font-size: 2.2rem;
    line-height: normal;
    transition: var(--transition)
}

.uptown-link:hover .uptown-link-icon {
    transform: rotate(-43.264deg) scale(1)
}

.uptown-link:hover .uptown-link-text {
    color: #fff
}

.uptown-link-t1 {
    display: flex;
    gap: 1.3rem;
    align-items: center
}

.uptown-link-t1-icon {
    width: 1.2rem;
    height: 1.2rem;
    flex-shrink: 0;
    transform: rotate(-43.264deg) scale(1);
    background: #009ca8;
    transition: .5s var(--ease)
}

.uptown-link-t1-text {
    font-size: var(--font-25);
    line-height: normal;
    color: #009ca8
}

@media screen and (orientation: portrait) {
    .uptown-link-t1 {
        gap:.85rem
    }

    .uptown-link-t1-icon {
        width: .765rem;
        height: .765rem
    }

    .uptown-link-t1-text {
        font-size: 1.4rem
    }
}

.CTA-btn {
    position: relative;
    width: fit-content;
    height: fit-content;
    isolation: isolate;
    display: inline-block;
    cursor: pointer
}

.CTA-btn:hover .CTA-btn__inner .CTA-btn__icon {
    transform: rotate(-135deg) scale(.8)
}

.CTA-btn:hover .CTA-btn__border {
    width: 100%;
    height: 100%
}

.CTA-btn .CTA-btn__border {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: calc(100% + 1.2rem);
    height: calc(100% + 1rem);
    transition: .5s var(--ease);
    pointer-events: none
}

@media screen and (orientation: portrait) {
    .CTA-btn .CTA-btn__border {
        width:calc(100% + 1.2rem);
        height: calc(100% + 1rem)
    }
}

.CTA-btn .CTA-btn__border:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    border-radius: inherit;
    padding: 1px;
    mask: linear-gradient(rgb(255,255,255) 0px,rgb(255,255,255) 0px) content-box exclude,linear-gradient(rgb(255,255,255) 0px,rgb(255,255,255) 0px);
    border: 1px solid rgba(255,255,255,.1)
}

.CTA-btn .CTA-btn__border:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    border-radius: inherit;
    padding: 1px;
    mask: linear-gradient(rgb(255,255,255) 0px,rgb(255,255,255) 0px) content-box exclude,linear-gradient(rgb(255,255,255) 0px,rgb(255,255,255) 0px);
    background: linear-gradient(90deg,#009ca8,#fff0 10%,#fff0 89.92%,#009ca8)
}

.CTA-btn .CTA-btn__blur {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: 2.5rem;
    flex-shrink: 0;
    filter: blur(11px);
    -webkit-filter: blur(11px);
    background: radial-gradient(50% 50% at 50% 50%,#009ca8,#009ca800 81.52%);
    pointer-events: none;
    z-index: -1
}

.CTA-btn .CTA-btn__background {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #d9d9d914;
    backdrop-filter: blur(5.5px);
    -webkit-backdrop-filter: blur(5.5px)
}

.CTA-btn .CTA-btn__inner {
    display: flex;
    align-items: center;
    padding: 1rem 2.5rem;
    gap: 1.5rem
}

@media screen and (orientation: portrait) {
    .CTA-btn .CTA-btn__inner {
        display:flex;
        align-items: center;
        padding: 1rem 2.5rem;
        gap: 1.5rem;
        justify-content: center
    }
}

.CTA-btn .CTA-btn__inner .CTA-btn__icon {
    width: 1.2rem;
    height: 1.2rem;
    flex-shrink: 0;
    background: #009ca8;
    transform: rotate(-43.264deg);
    transition: .5s var(--ease)
}

@media screen and (orientation: portrait) {
    .CTA-btn .CTA-btn__inner .CTA-btn__icon {
        width:.8rem;
        height: .8rem
    }
}

.CTA-btn .CTA-btn__inner .CTA-btn__text {
    color: #fff;
    font-size: 1.8rem;
    line-height: normal;
    flex-shrink: 0
}

@media screen and (orientation: portrait) {
    .CTA-btn .CTA-btn__inner .CTA-btn__text {
        color:#fff;
        font-size: 1.8rem;
        line-height: normal;
        flex-shrink: 0
    }
}

.oturumacik {
    right: 0;
    text-align: center;
    background: #141414;
    color: white;
    position: fixed;
    bottom: 0%;
    left: 50%;
    z-index: 9999999;
    max-width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    font-weight: 600;
    font-family: system-ui !important;
    transform: translate(-50%, 0%);
    transition: width 0.4s ease, max-height 0.4s ease;
    max-height: 40px;
    /* Başlangıç yüksekliği */
    overflow: hidden;
    /* Taşmaları gizlemek için */
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.oturumacik:hover {
    max-width: 100%;
    max-height: 500px;
    /* Hover durumunda geniş yüksekliğe geçiş */
    background: #141414;
}

.oturumacik p {
    color: white;
}

.butontg {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1000;
    background: #141414;
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    padding-left: 20px;
    padding-right: 20px
}