@font-face {
    font-family: VisbyRoundCF;
    src: url(../fonts/VisbyRoundCF-ExtraLight.woff2) format('woff2'),
        url(../fonts/VisbyRoundCF-ExtraLight.woff) format('woff');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: VisbyRoundCF;
    src: url(../fonts/VisbyRoundCF-Light.woff2) format('woff2'),
        url(../fonts/VisbyRoundCF-Light.woff) format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: VisbyRoundCF;
    src: url(../fonts/VisbyRoundCF-Regular.woff2) format('woff2'),
        url(../fonts/VisbyRoundCF-Regular.woff) format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: VisbyRoundCF;
    src: url(../fonts/VisbyRoundCF-Medium.woff2) format('woff2'),
        url(../fonts/VisbyRoundCF-Medium.woff) format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: VisbyRoundCF;
    src: url(../fonts/VisbyRoundCF-DemiBold.woff2) format('woff2'),
        url(../fonts/VisbyRoundCF-DemiBold.woff) format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: VisbyRoundCF;
    src: url(../fonts/VisbyRoundCF-Bold.woff2) format('woff2'),
        url(../fonts/VisbyRoundCF-Bold.woff) format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: VisbyRoundCF;
    src: url(../fonts/VisbyRoundCF-ExtraBold.woff2) format('woff2'),
        url(../fonts/VisbyRoundCF-ExtraBold.woff) format('woff');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: VisbyRoundCF;
    src: url(../fonts/VisbyRoundCF-Heavy.woff2) format('woff2'),
        url(../fonts/VisbyRoundCF-Heavy.woff) format('woff');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: VisbyRoundCF;
    src: url(../fonts/VisbyRoundCF-ExtraLight.woff2) format('woff2'),
        url(../fonts/VisbyRoundCF-ExtraLight.woff) format('woff');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: VisbyRoundCF;
    src: url(../fonts/VisbyRoundCF-Light.woff2) format('woff2'),
        url(../fonts/VisbyRoundCF-Light.woff) format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: VisbyRoundCF;
    src: url(../fonts/VisbyRoundCF-Regular.woff2) format('woff2'),
        url(../fonts/VisbyRoundCF-Regular.woff) format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: VisbyRoundCF;
    src: url(../fonts/VisbyRoundCF-Medium.woff2) format('woff2'),
        url(../fonts/VisbyRoundCF-Medium.woff) format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: VisbyRoundCF;
    src: url(../fonts/VisbyRoundCF-DemiBold.woff2) format('woff2'),
        url(../fonts/VisbyRoundCF-DemiBold.woff) format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: VisbyRoundCF;
    src: url(../fonts/VisbyRoundCF-Bold.woff2) format('woff2'),
        url(../fonts/VisbyRoundCF-Bold.woff) format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: VisbyRoundCF;
    src: url(../fonts/VisbyRoundCF-ExtraBold.woff2) format('woff2'),
        url(../fonts/VisbyRoundCF-ExtraBold.woff) format('woff');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: VisbyRoundCF;
    src: url(../fonts/VisbyRoundCF-Heavy.woff2) format('woff2'),
        url(../fonts/VisbyRoundCF-Heavy.woff) format('woff');
    font-weight: 900;
    font-style: normal;
}

*,
::after,
::before {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

html {
    font-size: 10px;
}

body {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow-x: hidden;
    background: #000;
    color: #fff;
    position: relative;
    z-index: 1;
    background: #000;
}


/* !white theme ======================  */

.black-text,
.black-text * {
    color: #000000 !important;

}

body.black-text {
    background-color: #fff;
}

.black-text .animatedImageOverlayWrapper .animatedImageOverlay {
    background-color: #fff;
}

.black-text footer {

    background-color: #e6e6e6;
}


.black-text footer img {

    filter: invert(1);
}


.black-text footer path {

    /* fill: black; */
    stroke: black;
}


.black-text .footer-subscribe-social .form-group>input[type='submit'] {
    color: #fff !important;
}



.black-text footer .footerDripping {
    background-color: #fff;
}


.black-text footer .footerDripping .drip,
.black-text footer .footerDripping .drip .drop,
.black-text footer .footerDripping .drip .droplet2.dripit {
    background: #fff !important;
}




.black-text nav {
    background-color: #fff;

}


.black-text nav>.nav .nav-links li::after {
    background: #000;
}


.black-text nav>.nav .nav-logo a>svg {
    filter: invert(1);
}

.black-text nav>.nav .nav-links li a {


    color: grey !important;
}

/*! ========================================== */


.white-bg,
.white-bg * {
    background-color: #fff;
}



body::-webkit-scrollbar {
    background-color: #292929;
    width: 0.5rem;
    border-radius: 0.2rem;
}

body::-webkit-scrollbar-thumb {
    background-color: #439fc0;
    border-radius: 0.2rem;
}

main {
    min-height: 100vh;
}

section {
    background: #000;
}

section.noBg-color {
    background: 0 0;
}

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

img {
    max-width: 100%;
    display: block;
    height: auto;
}

ul {
    list-style: none;
}

article,
p {
    word-break: break-word;
    hyphens: none;
}

body {
    opacity: 0.1;
    visibility: hidden;
}

body.no-scroll {
    overflow: hidden;
}

.loading-screen {
    position: relative;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    background-color: #07bcff;
    width: 0%;
    height: 100vh;
    z-index: 9999999;
}

.load-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: 10;
    pointer-events: none;
    z-index: 9999999;
}

.gYReNf {
    height: 100% !important;
    width: 60px !important;
}

figure.image.sc-dWZqqJ.gYReNf.is-launcher__avatar {
    height: 100%;
    width: 60px;
}


.gs_reveal {
    overflow: hidden;
    display: inline-block;
}

.bg-grey {
    background: #292929;
}

body {
    font-family: VisbyRoundCF, Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.6;
}

nav {
    background: #000;
}

nav>.nav {
    max-width: 120rem;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    z-index: 20;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 1.2rem 0;
}

@media screen and (max-width: 1500px) {
    nav>.nav {
        padding-right: 10rem;
    }
}

@media screen and (max-width: 1200px) {
    nav>.nav {
        padding-left: 5vw;
        padding-right: 10rem;
    }
}

nav>.nav .nav-logo a {
    display: block;
}

nav>.nav .nav-logo a>svg {
    width: 12rem;
    display: block;
}

nav>.nav .nav-links {
    width: 60%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media only screen and (max-width: 48em) {
    nav>.nav .nav-links {
        display: none;
    }
}

nav>.nav .nav-links li {
    font-weight: 700;
    position: relative;
    padding: 1.2rem;
    color: #727272;
    display: block;
}

nav>.nav .nav-links li::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 12.5rem;
    background: #fff;
    z-index: 20;
    -webkit-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transition: 0.5s cubic-bezier(0.33, 1, 0.68, 1);
    -o-transition: 0.5s cubic-bezier(0.33, 1, 0.68, 1);
    transition: 0.5s cubic-bezier(0.33, 1, 0.68, 1);
    -webkit-transform-origin: top;
    -ms-transform-origin: top;
    transform-origin: top;
}

nav>.nav .nav-links li a {
    display: block;
    overflow: visible;
}

nav>.nav .nav-links li span.linkDesc {
    display: block;
    position: absolute;
    top: 100%;
    left: 1.2rem;
    width: 16rem;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: 0.7s cubic-bezier(0.33, 1, 0.68, 1);
    -o-transition: 0.7s cubic-bezier(0.33, 1, 0.68, 1);
    transition: 0.7s cubic-bezier(0.33, 1, 0.68, 1);
    font-size: 1.4rem;
    -webkit-transform-origin: top;
    -ms-transform-origin: top;
    transform-origin: top;
    color: #fff;
    z-index: 20;
}

nav>.nav .nav-links li:hover a {
    color: #07bcff;
}

nav>.nav .nav-links li:hover::after {
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
}

nav>.nav .nav-links li:hover span.linkDesc {
    max-height: 20rem;
    height: auto;
}

nav>.nav .mobileMenu-container {
    display: none;
}

@media only screen and (max-width: 48em) {
    nav>.nav .mobileMenu-container {
        display: block;
    }

    nav>.nav .mobileMenu-container #nav-container {
        margin-left: auto;
        position: relative;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding: 10rem 5rem;
        overflow: hidden;
        color: #fff;
        width: 100vw;
        height: 100vh;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 250;
        -webkit-transition: ease-in-out 0.25s;
        -o-transition: ease-in-out 0.25s;
        transition: ease-in-out 0.25s;
        -webkit-transition-delay: 0.25s;
        -o-transition-delay: 0.25s;
        transition-delay: 0.25s;
        visibility: hidden;
        opacity: 0;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen::after {
        content: '';
        position: absolute;
        inset: 0;
        background: #292929;
        z-index: -1;
        -webkit-clip-path: circle(0 at 100% 0);
        clip-path: circle(0 at 100% 0);
        -webkit-transition: 0.5s ease-in-out;
        -o-transition: 0.5s ease-in-out;
        transition: 0.5s ease-in-out;
        pointer-events: none;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen::before {
        content: '';
        position: absolute;
        top: 10rem;
        left: 5.4rem;
        width: 2px;
        height: calc(100% - 20rem);
        background: #fff;
        -webkit-transform: scaleY(0);
        -ms-transform: scaleY(0);
        transform: scaleY(0);
        -webkit-transform-origin: top;
        -ms-transform-origin: top;
        transform-origin: top;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen ul {
        position: relative;
        z-index: 20;
        background: 0 0;
        padding-bottom: 2rem;
        list-style: none;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen ul li {
        opacity: 0;
        -webkit-transition: 0.3s ease-in-out;
        -o-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen ul li a {
        color: #fff;
        text-decoration: none;
        font-size: 3.1rem;
        font-weight: 600;
        padding: 0.8rem 0;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen .nav-Socials {
        position: relative;
        z-index: 20;
        display: grid;
        grid-template-columns: 5rem 5rem;
        gap: 2rem;
        padding-top: 2rem;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen .nav-Socials .nav-Socials--item img {
        display: block;
        width: 3.6rem;
        height: 3.6rem;
        -o-object-fit: contain;
        object-fit: contain;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen .nav-Socials .nav-Socials--item {
        opacity: 0;
        -webkit-transition: 0.3s ease-in-out;
        -o-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen.open {
        visibility: visible;
        opacity: 1;
        -webkit-transition: ease-in-out 0.5s;
        -o-transition: ease-in-out 0.5s;
        transition: ease-in-out 0.5s;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen.open::after {
        -webkit-clip-path: circle(172.6% at 100% 0);
        clip-path: circle(172.6% at 100% 0);
        -webkit-transition: 0.5s ease-in-out;
        -o-transition: 0.5s ease-in-out;
        transition: 0.5s ease-in-out;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen.open::before {
        -webkit-transform: scaleY(1);
        -ms-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transition: 0.8s ease-in-out;
        -o-transition: 0.8s ease-in-out;
        transition: 0.8s ease-in-out;
        -webkit-transition-delay: 0.8s;
        -o-transition-delay: 0.8s;
        transition-delay: 0.8s;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen.open ul li {
        opacity: 1;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen.open ul {
        background: #292929;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen.open ul li:nth-child(1) {
        -webkit-transition-delay: 650ms;
        -o-transition-delay: 650ms;
        transition-delay: 650ms;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen.open ul li:nth-child(2) {
        -webkit-transition-delay: 0.7s;
        -o-transition-delay: 0.7s;
        transition-delay: 0.7s;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen.open ul li:nth-child(3) {
        -webkit-transition-delay: 750ms;
        -o-transition-delay: 750ms;
        transition-delay: 750ms;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen.open ul li:nth-child(4) {
        -webkit-transition-delay: 0.8s;
        -o-transition-delay: 0.8s;
        transition-delay: 0.8s;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen.open ul li:nth-child(5) {
        -webkit-transition-delay: 850ms;
        -o-transition-delay: 850ms;
        transition-delay: 850ms;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen.open .nav-Socials {
        background: #292929;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen.open .nav-Socials .nav-Socials--item {
        opacity: 1;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen.open .nav-Socials .nav-Socials--item:nth-child(1) {
        -webkit-transition-delay: 950ms;
        -o-transition-delay: 950ms;
        transition-delay: 950ms;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen.open .nav-Socials .nav-Socials--item:nth-child(2) {
        -webkit-transition-delay: 1s;
        -o-transition-delay: 1s;
        transition-delay: 1s;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen.open .nav-Socials .nav-Socials--item:nth-child(3) {
        -webkit-transition-delay: 1.15s;
        -o-transition-delay: 1.15s;
        transition-delay: 1.15s;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen.open .nav-Socials .nav-Socials--item:nth-child(4) {
        -webkit-transition-delay: 1.2s;
        -o-transition-delay: 1.2s;
        transition-delay: 1.2s;
    }

    nav>.nav .mobileMenu-container .menu {
        --color: #fff;
        width: 36px;
        height: 36px;
        padding: 0;
        margin: 0;
        outline: 0;
        position: fixed;
        top: 2rem;
        right: 2rem;
        z-index: 9999;
        border: none;
        background: 0 0;
        cursor: pointer;
        -webkit-appearence: none;
        -webkit-tap-highlight-color: transparent;
    }

    nav>.nav .mobileMenu-container .menu svg {
        width: 64px;
        height: 48px;
        top: -6px;
        left: -14px;
        stroke: var(--color);
        stroke-width: 4px;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
        display: block;
        position: absolute;
    }

    nav>.nav .mobileMenu-container .menu svg path {
        -webkit-transition: stroke-dasharray var(--duration, 0.85s) var(--easing, ease) var(--delay, 0s),
            stroke-dashoffset var(--duration, 0.85s) var(--easing, ease) var(--delay, 0s);
        -o-transition: stroke-dasharray var(--duration, 0.85s) var(--easing, ease) var(--delay, 0s),
            stroke-dashoffset var(--duration, 0.85s) var(--easing, ease) var(--delay, 0s);
        transition: stroke-dasharray var(--duration, 0.85s) var(--easing, ease) var(--delay, 0s),
            stroke-dashoffset var(--duration, 0.85s) var(--easing, ease) var(--delay, 0s);
        stroke-dasharray: var(--array-1, 26px) var(--array-2, 100px);
        stroke-dashoffset: var(--offset, 126px);
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    nav>.nav .mobileMenu-container .menu svg path:nth-child(2) {
        --duration: 0.7s;
        --easing: ease-in;
        --offset: 100px;
        --array-2: 74px;
    }

    nav>.nav .mobileMenu-container .menu svg path:nth-child(3) {
        --offset: 133px;
        --array-2: 107px;
    }

    nav>.nav .mobileMenu-container .menu.active svg path {
        --offset: 57px;
    }

    nav>.nav .mobileMenu-container .menu.active svg path:nth-child(1),
    nav>.nav .mobileMenu-container .menu.active svg path:nth-child(3) {
        --delay: 0.15s;
        --easing: cubic-bezier(0.2, 0.4, 0.2, 1.1);
    }

    nav>.nav .mobileMenu-container .menu.active svg path:nth-child(2) {
        --duration: 0.4s;
        --offset: 2px;
        --array-1: 1px;
    }

    nav>.nav .mobileMenu-container .menu.active svg path:nth-child(3) {
        --offset: 58px;
    }
}

.Section {
    position: relative;
}

@media screen and (max-width: 1200px) {
    .Section {
        padding-left: 5vw;
        padding-right: 5vw;
    }
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

@media screen and (max-width: 1400px) {
    .container {
        max-width: 1000px !important;

    }

}




footer {
    background: #292929;
}

footer .footer {
    max-width: 60%;
    margin: 0 auto;
    padding-top: 30rem;
    padding-bottom: 10rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media only screen and (max-width: 48em) {
    footer .footer {
        max-width: 100%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        padding-left: 10vw;
        padding-right: 10vw;
    }
}

@media only screen and (max-width: 48em) {
    footer .footer .footer-logo {
        margin-bottom: 4rem;
    }
}

footer .footer .footer-logo {
    position: relative;
}

footer .footer .footer-logo svg {
    width: 16rem;
    display: block;
}

footer .footer .footer-logo .handwrittenOnScroll {
    position: absolute;
    top: -85%;
    left: 70%;
    width: 18rem;
}

@media only screen and (max-width: 48em) {
    footer .footer .footer-logo .handwrittenOnScroll {
        left: 75%;
    }
}

footer .footer .footer-logo .handwrittenOnScroll>svg {
    width: 100%;
    display: block;
}

footer .footer .footer-links li:not(:last-of-type) {
    margin-bottom: 1.6rem;
}

@media only screen and (max-width: 48em) {
    footer .footer .footer-links li:not(:last-of-type) {
        margin-bottom: 1.2rem;
    }
}

@media only screen and (max-width: 48em) {
    footer .footer .footer-links li a {
        font-size: 2rem;
    }
}

footer .footer .footer-links li:hover {
    color: #07bcff;
}

footer .footer .footer-social {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2.4rem;
}

.menu-footer-menu-container {
    padding-left: 10%;
}

.footer-subscribe-social {
    width: 240px;
    max-width: 100%;
    position: relative;
}

.footer-subscribe-social h3 {
    font-weight: 500;
    font-size: 2rem;
    margin: 0 0 18px 0;
}

.footer-subscribe-social .subscribe-box {
    position: relative;
}

.footer-subscribe-social .form-group.mc-field-group {
    position: relative;
    display: inline-block;
    position: relative;
}

.footer-subscribe-social .form-group>input[type='email'] {
    width: 240px;
    max-width: 100%;
    border: 1px solid rgba(196, 196, 196, 0.5);
    background-color: rgba(0, 0, 0, 0);
    height: 38px;
    line-height: 38px;
    border-radius: 4px;
    padding: 0px 15px;
    font-weight: 500;
    color: #fff;
    outline: none !important;
    font-family: VisbyRoundCF, Tahoma, Geneva, Verdana, sans-serif;
}

.footer-subscribe-social #mc_embed_signup input.mce_inline_error {
    border: 1px solid rgba(196, 196, 196, 0.5);
}

.footer-subscribe-social #mc_embed_signup div.mce_inline_error,
.footer-subscribe-social .response {
    margin: 0;
    padding: 0;
    background-color: rgba(0, 0, 0, 0);
    font-weight: 500;
    z-index: 1;
    color: #fff;
    position: absolute;
    top: 43px;
    font-size: 75%;
    letter-spacing: 0.4px;
    line-height: 120%;
}

.footer-subscribe-social .response a {
    display: none;
}

.footer-subscribe-social .form-group>input[type='submit'] {
    height: 38px;
    border: 0;
    outline: none !important;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 62px;
    text-align: center;
    color: #fff;
    background-color: #000;
    border: 1px solid rgba(196, 196, 196, 0.5);
    border-radius: 0px 4px 4px 0px;
    cursor: pointer;
    font-family: VisbyRoundCF, Tahoma, Geneva, Verdana, sans-serif;
}

.social-icons {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    padding-top: 50px;
}

.social-icons a {
    display: inline-block;
    margin-right: 20px;
    width: 16px;
}

.social-icons a:nth-child(1) {
    width: 8px;
}

@media only screen and (max-width: 48em) {
    .menu-footer-menu-container {
        padding-left: 0%;
    }

    .footer-subscribe-social {
        margin-top: 30px;
    }

    footer .footer .footer-social {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-top: 4rem;
        -webkit-transform: translateX(-8px);
        -ms-transform: translateX(-8px);
        transform: translateX(-8px);
    }
}

footer .footer .footer-social .footer-soial--item img {
    width: 3.2rem;
    height: 3.2rem;
    -o-object-fit: contain;
    object-fit: contain;
    display: block;
}

footer {
    overflow: hidden;
    position: relative;
}

footer .footerDripping {
    height: 18rem;
    background: #000;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

footer .footerDripping .drip {
    position: absolute;
    background: #000;
    width: 25rem;
    height: 25%;
    bottom: 2px;
    left: 5%;
    cursor: pointer;
    -webkit-filter: url(#goo);
    filter: url(#goo);
}

footer .footerDripping .drip .drop {
    position: absolute;
    top: 0;
    left: 75%;
    width: 4rem;
    height: 8.5rem;
    border-radius: 50%;
    background: #000;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

footer .footerDripping .drip .drop:hover {
    height: 12rem;
}

footer .footerDripping .drip .droplet {
    position: absolute;
    top: 0;
    left: 64%;
    width: 2rem;
    height: 5rem;
    border-radius: 50%;
    background: #000;
    -webkit-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
    opacity: 0;
    -webkit-animation: droplet 1.4s 0.4s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1;
    animation: droplet 1.4s 0.4s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1;
}

footer .footerDripping .drip .droplet:hover {
    top: 2rem;
    width: 4rem;
    left: 63%;
    -webkit-animation: reset;
    animation: reset;
}

footer .footerDripping .drip .droplet2 {
    position: absolute;
    top: 2rem;
    left: 76%;
    width: 2rem;
    height: 3.5rem;
    border-radius: 50%;
    z-index: 3;
    background: #000;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

footer .footerDripping .drip .droplet2.dripit {
    -webkit-animation: droplet 1s 0.6s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1;
    animation: droplet 1s 0.6s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1;
}

@-webkit-keyframes drop {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    50% {
        height: 4rem;
        width: 4rem;
    }

    100% {
        -webkit-transform: translate(0, 55rem);
        transform: translate(0, 55rem);
    }
}

@keyframes drop {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    50% {
        height: 4rem;
        width: 4rem;
    }

    100% {
        -webkit-transform: translate(0, 55rem);
        transform: translate(0, 55rem);
    }
}

@-webkit-keyframes droplet {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 0;
    }

    50% {
        height: 3rem;
        width: 3rem;
        opacity: 1;
    }

    100% {
        -webkit-transform: translate(0, 70rem);
        transform: translate(0, 70rem);
    }
}

@keyframes droplet {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 0;
    }

    50% {
        height: 3rem;
        width: 3rem;
        opacity: 1;
    }

    100% {
        -webkit-transform: translate(0, 70rem);
        transform: translate(0, 70rem);
    }
}

.homepageHero {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 90vh;
    -webkit-transform: translateY(-10vh);
    -ms-transform: translateY(-10vh);
    transform: translateY(-10vh);
    overflow: hidden;
}

@media only screen and (max-width: 48em) {
    .homepageHero {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
}

.homepageHero-heading {
    width: calc(50% - 3.2rem);
}

@media only screen and (max-width: 48em) {
    .homepageHero-heading {
        width: 100%;
        margin-bottom: 4rem;
    }
}

.homepageHero-heading>h1 {
    margin-top: 4.8rem;
    position: relative;
}

.homepageHero-heading>h1>span.heading {
    font-size: 6.1rem;
    display: block;
    line-height: 1.05;
    margin-bottom: 1.2rem;
    overflow: hidden;
}

.homepageHero-heading>h1>span.heading span.gs_reveal {
    display: block;
}

@media only screen and (max-width: 48em) {
    .homepageHero-heading>h1>span.heading {
        font-size: 3.9rem;
    }
}

.homepageHero-heading>h1 span.subHeading {
    display: block;
    font-size: 3.1rem;
    font-weight: 200;
    max-width: 40rem;
    line-height: 1.4;
    position: relative;
}

.homepageHero-heading>h1 span.subHeading span.animatedText {
    display: block;
    width: 25rem;
    height: 10rem;
    position: absolute;
    bottom: 100%;
    left: 70%;
}

@media only screen and (max-width: 48em) {
    .homepageHero-heading>h1 span.subHeading span.animatedText {
        width: 18rem;
        height: 8rem;
        left: unset;
        right: 0;
    }
}

.homepageHero-heading>h1 span.subHeading span.animatedText svg {
    display: block;
    width: 100%;
    stroke-dasharray: 3000;
    stroke-dashoffset: 3000;
}

@media only screen and (max-width: 48em) {
    .homepageHero-heading>h1 span.subHeading {
        font-size: 2.5rem;
    }
}

.homepageHero-eye {
    width: calc(50% - 3.2rem);
    position: relative;
    opacity: 0;
    visibility: hidden;
}

@media only screen and (max-width: 48em) {
    .homepageHero-eye {
        width: 100%;
    }
}

.homepageHero-eye .homepageHero-eye--mobile {
    display: none;
}

@media only screen and (max-width: 48em) {
    .homepageHero-eye .homepageHero-eye--mobile {
        display: block;
    }
}

@media only screen and (max-width: 48em) {
    .homepageHero-eye .homepageHero-eye--desktop {
        display: none;
    }
}

.homepageHero-eye .homepageHero-eye--desktop .eye {
    --pupil-x: 0;
    --pupil-y: 0;
    --color-whites: var(--fg, #fff);
    --color-lid: var(--bg, #fff);
    --color-pupil: var(--bg, #000);
    --color-glint: var(--fg, #fff);
    --scale: 0.55;
    width: 80%;
    fill: none;
    margin: 0 auto;
    display: block;
    -webkit-transform: scale(var(--scale));
    -ms-transform: scale(var(--scale));
    transform: scale(var(--scale));
}

.homepageHero-eye .homepageHero-eye--desktop .lids {
    stroke: var(--color-lid);
    stroke-width: 0;
}

.homepageHero-eye .homepageHero-eye--desktop .whites {
    fill: var(--color-whites);
}

.homepageHero-eye .homepageHero-eye--desktop .pupil {
    fill: var(--color-pupil);
}

.homepageHero-eye .homepageHero-eye--desktop .glint {
    fill: var(--color-glint);
}

.homepageHero-eye .homepageHero-eye--desktop .pupil-group {
    -webkit-transform: translate(calc(var(--pupil-x) * 1px),
            calc(var(--pupil-y) * 1px));
    -ms-transform: translate(calc(var(--pupil-x) * 1px),
            calc(var(--pupil-y) * 1px));
    transform: translate(calc(var(--pupil-x) * 1px),
            calc(var(--pupil-y) * 1px));
}

.homepageHero-eye .homepageHero-eye--desktop #base-eye {
    display: none;
}

.homepage-wwOff {
    position: relative;
    padding: 12rem 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12rem 6.4rem;
}

@media only screen and (max-width: 48em) {
    .homepage-wwOff {
        display: block;
    }
}

.homepage-wwOff span.small-eye {
    display: block;
    position: absolute;
    width: 10rem;
    height: 6rem;
    top: 3rem;
    left: -5rem;
    background: url(../images/svg/small-blue-eye.svg);
    background-repeat: no-repeat;
    background-size: contain;
}

@media only screen and (max-width: 48em) {
    .homepage-wwOff span.small-eye {
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
    }
}

.homepage-wwOff span.whiteLineGoingDown-js {
    position: absolute;
    display: block;
    left: 0;
    bottom: calc(100% - 3rem);
    width: 1px;
    height: 22rem;
    background: #fff;
}

@media only screen and (max-width: 48em) {
    .homepage-wwOff span.whiteLineGoingDown-js {
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        height: 30rem;
    }
}

.homepage-wwOff>h2 {
    font-size: 6.1rem;
    line-height: 1.05;
    font-weight: 700;
    margin-top: -1.6rem;
    max-width: 300px;
}

@media only screen and (max-width: 48em) {
    .homepage-wwOff>h2 {
        font-size: 3.9rem;
    }
}

.homepage-wwOff .homepage-wwOff--items {
    position: relative;
}

@media only screen and (max-width: 48em) {
    .homepage-wwOff .homepage-wwOff--items {
        margin-top: 8rem;
    }
}

.homepage-wwOff .homepage-wwOff--items span.lineWhite {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #fff;
    z-index: 1;
    border-radius: 2px;
}

@media only screen and (max-width: 48em) {
    .homepage-wwOff .homepage-wwOff--items span.lineWhite {
        background-color: #07bcff;
    }
}

.homepage-wwOff .homepage-wwOff--items span.lineBlue {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #07bcff;
    z-index: 2;
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    border-radius: 2px;
    -webkit-transform-origin: left;
    -ms-transform-origin: left;
    transform-origin: left;
    -webkit-transition: 0.4s cubic-bezier(0.33, 1, 0.68, 1);
    -o-transition: 0.4s cubic-bezier(0.33, 1, 0.68, 1);
    transition: 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}

.homepage-wwOff .homepage-wwOff--items:hover span.lineBlue {
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
}

.homepage-wwOff .homepage-wwOff--items .handwrittenEffect {
    position: absolute;
    right: 0;
    bottom: 100%;
    width: 80%;
}

.homepage-wwOff .homepage-wwOff--items .handwrittenEffect svg {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    display: block;
    stroke-width: 1;
    stroke-dasharray: 1300;
    stroke-dashoffset: 1300;
}

.homepage-wwOff .homepage-wwOff--items:hover .handwrittenEffect svg {
    stroke-dashoffset: 0 !important;
    -webkit-transition: 3s ease;
    -o-transition: 3s ease;
    transition: 3s ease;
}

.homepage-wwOff .homepage-wwOff--items h3 {
    font-size: 3.1rem;
    margin-top: 1.2rem;
}

@media only screen and (max-width: 48em) {
    .homepage-wwOff .homepage-wwOff--items h3 {
        font-size: 2.5rem;
        color: #07bcff;
    }
}

.homepage-wwOff .homepage-wwOff--items:hover h3 {
    color: #07bcff;
}

.homepage-wwOff .homepage-wwOff--items p {
    font-size: 2.5rem;
    line-height: 1.35;
    font-weight: 300;
}

@media only screen and (max-width: 48em) {
    .homepage-wwOff .homepage-wwOff--items p {
        font-size: 2rem;
    }
}

.homepage-magic>h2 {
    font-size: 3.9rem;
    font-weight: 300;
    text-align: center;
    line-height: 1.3;
}

.homepage-magic>h3 {
    font-size: 6.1rem;
    color: #07bcff;
    text-align: center;
    line-height: 1.05;
}

.homepage-magic>.magicQuote {
    width: 50%;
    margin-left: auto;
    padding-top: 8rem;
    padding-bottom: 12rem;
    margin-top: 4rem;
    padding-left: 2.8rem;
    position: relative;
}

@media only screen and (max-width: 48em) {
    .homepage-magic>.magicQuote {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

.homepage-magic>.magicQuote span.whiteLineDown {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background: #fff;
}

.homepage-magic>.magicQuote img {
    width: 8rem;
}

@media only screen and (max-width: 48em) {
    .homepage-magic>.magicQuote img {
        opacity: 0;
    }
}

.homepage-magic>.magicQuote p {
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.45;
    color: #b5b5b5;
    max-width: 500px;
}

@media only screen and (max-width: 48em) {
    .homepage-magic>.magicQuote p {
        opacity: 0;
    }
}

.shadowEye {
    --cursorX: 50vw;
    --cursorY: 50vh;
    min-height: 80vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    cursor: none;
    background-image: url(../images/shadow-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

@media only screen and (max-width: 48em) {
    .shadowEye {
        min-height: 40rem;
    }
}

.shadowEye::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: 0.3s ease-in;
    -o-transition: 0.3s ease-in;
    transition: 0.3s ease-in;
    pointer-events: none;
    background: -o-radial-gradient(var(--cursorX) var(--cursorY),
            circle 12vmax,
            rgba(41, 41, 41, 0) 0,
            rgba(41, 41, 41, 0.7) 80%,
            #292929 100%);
    background: radial-gradient(circle 12vmax at var(--cursorX) var(--cursorY),
            rgba(41, 41, 41, 0) 0,
            rgba(41, 41, 41, 0.7) 80%,
            #292929 100%);
}

@media only screen and (max-width: 48em) {
    .shadowEye::before {
        display: none;
    }
}

.shadowEye span.whiteLineDown {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 50%;
    background: #fff;
    z-index: 2;
}

.shadowEye svg {
    position: relative;
    z-index: 5;
    width: 30rem;
}

@media only screen and (max-width: 48em) {
    .shadowEye svg {
        width: 15rem;
    }
}

.shadowEye.mouseLeft::before {
    background: -o-radial-gradient(var(--cursorX) var(--cursorY),
            circle 0.01rem,
            rgba(41, 41, 41, 0) 0,
            rgba(41, 41, 41, 0.7) 80%,
            #292929 100%);
    background: radial-gradient(circle 0.01rem at var(--cursorX) var(--cursorY),
            rgba(41, 41, 41, 0) 0,
            rgba(41, 41, 41, 0.7) 80%,
            #292929 100%);
}

.homepage-portfolio {
    padding-top: 8rem;
    position: relative;
    width: 90%;
    margin: 0 auto;
}

@media only screen and (max-width: 48em) {
    .homepage-portfolio {
        width: 100%;
    }
}

.homepage-portfolio span.whiteLineDown {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    background: #fff;
    z-index: 2;
}

.homepage-portfolio--heading {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-bottom: 8rem;
}

.homepage-portfolio--heading .svgtext {
    width: 50%;
    padding-right: 2.8rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.homepage-portfolio--heading .svgtext img {
    height: 16rem;
}

@media only screen and (max-width: 48em) {
    .homepage-portfolio--heading .svgtext img:first-of-type {
        opacity: 0;
    }

    .homepage-portfolio--heading .svgtext img:last-of-type {
        height: unset;
        width: 10rem;
        -webkit-transform: translateX(-2rem);
        -ms-transform: translateX(-2rem);
        transform: translateX(-2rem);
    }
}

.homepage-portfolio--heading .subHeading {
    width: 50%;
    padding-left: 2.8rem;
}

.homepage-portfolio--heading .subHeading p {
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.45;
    color: #b5b5b5;
    max-width: 300px;
}

@media only screen and (max-width: 48em) {
    .homepage-portfolio--heading .subHeading p {
        display: none;
    }
}

.projectCard {
    background: #292929;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    position: relative;
    z-index: 2;
    border-radius: 1.6rem;
    min-height: 60rem;
    margin-bottom: 10rem;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    cursor: url(../images/cursor.png), pointer;
}

@media only screen and (max-width: 48em) {
    .projectCard {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        background: #000;
        min-height: auto;
        border-radius: 0;
        margin-bottom: 8rem;
    }
}

.projectCard-content {
    width: calc(35% - 1.6rem);
    padding: 4rem 8rem;
    padding-right: 0;
}

@media only screen and (max-width: 48em) {
    .projectCard-content {
        padding: 0;
        width: 100%;
    }
}

.projectCard-content .name {
    font-size: 4.8rem;
    line-height: 1.1;
    margin-bottom: 1.2rem;
    -webkit-transform: translateZ(60px);
    transform: translateZ(60px);
}

@media only screen and (max-width: 48em) {
    .projectCard-content .name {
        font-size: 2.5rem;
    }
}

.projectCard-content .details {
    margin-bottom: 2rem;
    font-size: 2rem;
    line-height: 1.4;
    font-weight: 400;
    -webkit-transform: translateZ(65px);
    transform: translateZ(65px);
}

@media only screen and (max-width: 48em) {
    .projectCard-content .details {
        font-size: 1.6rem;
    }
}

.projectCard-content .workIcons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.projectCard-content .workIcons .workIcon-item:not(:last-of-type) {
    margin-right: 2.4rem;
}

.projectCard-content .workIcons .workIcon-item {
    text-align: center;
    text-transform: uppercase;
    font-size: 1.3rem;
    -webkit-transform: translateZ(70px);
    transform: translateZ(70px);
}

.projectCard-content .workIcons .workIcon-item>img {
    margin-bottom: 0.8rem;
}

.projectCard-image {
    width: calc(65% - 1.6rem);
    -ms-flex-item-align: stretch;
    align-self: stretch;
    overflow: hidden;
}

@media only screen and (max-width: 48em) {
    .projectCard-image {
        width: 100%;
        background: #292929;
        border-radius: 1.2rem;
        overflow: hidden;
        margin-bottom: 2rem;
    }
}

.projectCard-image img {
    width: 100%;
    height: 100%;
    display: block;
}

.eyeBtn {
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 12rem;
    min-height: 8rem;
    font-size: 2rem;
    text-align: center;
    font-weight: 600;
    line-height: 1.4;
    -webkit-transition: 0.2s ease-in;
    -o-transition: 0.2s ease-in;
    transition: 0.2s ease-in;
}

.eyeBtn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) scale(1.5);
    -ms-transform: translate(-50%, -50%) scale(1.5);
    transform: translate(-50%, -50%) scale(1.5);
    width: 100%;
    height: 100%;
    background-image: url(../images/svg/eye-button-bg.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    z-index: 5;
    -webkit-transition: 0.2s ease-in;
    -o-transition: 0.2s ease-in;
    transition: 0.2s ease-in;
}

.wpcf7-spinner {
    display: none;
}

.eyeBtn>span {
    position: relative;
    z-index: 10;
    /* display: none; */
}

.eyeBtn:hover {
    color: #07bcff;
}

.eyeBtn:hover::after {
    -webkit-transform: translate(-50%, -50%) scale(1.7);
    -ms-transform: translate(-50%, -50%) scale(1.7);
    transform: translate(-50%, -50%) scale(1.7);
}

.homepage-exp {
    padding: 8rem 0;
    width: 90%;
    margin: 0 auto;
}

@media only screen and (max-width: 48em) {
    .homepage-exp {
        width: 100%;
    }
}

.homepage-exp>h2 {
    color: #292929;
    margin-bottom: 2.4rem;
    font-size: 6.1rem;
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: -4px;
}

@media only screen and (max-width: 48em) {
    .homepage-exp>h2 {
        font-size: 7rem;
        line-height: 1;
    }
}

.homepage-exp .homepage-exp--grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
    gap: 3.2rem;
    position: relative;
}

@media only screen and (max-width: 48em) {
    .homepage-exp .homepage-exp--grid {
        display: block;
    }
}

.homepage-exp .homepage-exp--grid .expCard:nth-of-type(3n-1) {
    margin-top: 6rem;
}

@media only screen and (max-width: 48em) {
    .homepage-exp .homepage-exp--grid .expCard:nth-of-type(3n-1) {
        margin-top: 0;
        margin-bottom: 4rem;
    }
}

.homepage-exp .homepage-exp--grid .expCard:nth-of-type(3n) {
    margin-top: 12rem;
}

@media only screen and (max-width: 48em) {
    .homepage-exp .homepage-exp--grid .expCard:nth-of-type(3n) {
        margin-top: 0;
        margin-bottom: 4rem;
    }
}

.homepage-exp .homepage-exp--grid::before {
    content: '';
    position: absolute;
    width: 1px;
    height: 6.4rem;
    background: #fff;
    bottom: -6.4rem;
    right: 8.8rem;
}

@media only screen and (max-width: 48em) {
    .homepage-exp .homepage-exp--grid::before {
        right: 50%;
    }
}

.homepage-exp>.eyeBtn.expBtn {
    margin-left: auto;
    margin-right: unset;
    -webkit-transform: translateX(-2.4rem);
    -ms-transform: translateX(-2.4rem);
    transform: translateX(-2.4rem);
    margin-top: 6.4rem;
    position: relative;
}

@media only screen and (max-width: 48em) {
    .homepage-exp>.eyeBtn.expBtn {
        margin-right: auto;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
}

.expCard {
    background: #292929;
    border-radius: 1.6rem;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    cursor: url(../images/cursor.png), pointer;
}

.expCard a {
    cursor: url(../images/cursor.png), pointer;
}

@media only screen and (max-width: 48em) {
    .expCard {
        margin-top: 0;
        margin-bottom: 4rem;
    }
}

.expCard-image {
    width: 100%;
}

.expCard-image img {
    width: 100%;
}

.expCard-content {
    padding: 2rem;
}

.expCard-content h3 {
    font-size: 3.1rem;
    -webkit-transform: translateZ(20px);
    transform: translateZ(20px);
}

.expCard-content p {
    font-size: 2rem;
    line-height: 1.35;
    -webkit-transform: translateZ(20px);
    transform: translateZ(20px);
    font-weight: 300;
}

.homepage-testimonial {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    padding-top: 20rem;
    padding-bottom: 4rem;
    position: relative;
    width: 90%;
    margin: 0 auto;
    overflow-x: hidden;
    overflow-y: hidden;
}

@media only screen and (max-width: 48em) {
    .homepage-testimonial {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding-top: 4rem;
    }
}

.homepage-testimonial::after {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    padding-top: 100%;
    background: url(../images/globe.png);
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.4;
    -webkit-animation: spin 30s linear infinite alternate;
    animation: spin 30s linear infinite alternate;
}

@media only screen and (max-width: 48em) {
    .homepage-testimonial::after {
        top: unset;
        bottom: -50%;
    }
}

.homepage-testimonial--left {
    width: calc(50% - 3.2rem);
    -ms-flex-item-align: center;
    align-self: center;
}

@media only screen and (max-width: 48em) {
    .homepage-testimonial--left {
        width: 100%;
        margin-bottom: 4rem;
    }
}

.homepage-testimonial--left h2 {
    font-size: 3.9rem;
    max-width: 90%;
    line-height: 1.3;
}

@media only screen and (max-width: 48em) {
    .homepage-testimonial--left h2 {
        text-align: center;
        font-size: 2.5rem;
        max-width: 100%;
    }
}

.homepage-testimonial--right {
    position: relative;
    overflow: hidden;
    overflow: hidden !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    width: calc(50% - 3.2rem);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

@media only screen and (max-width: 48em) {
    .homepage-testimonial--right {
        width: 100%;
    }
}

.homepage-testimonial--right span.whiteLine {
    display: block;
    position: absolute;
    width: 100%;
    height: 1px;
    background: #fff;
    bottom: 0.2rem;
    left: 0;
    -webkit-transform: translateX(0) scaleX(0);
    -ms-transform: translateX(0) scaleX(0);
    transform: translateX(0) scaleX(0);
    -webkit-transform-origin: left;
    -ms-transform-origin: left;
    transform-origin: left;
    -webkit-animation: scale-in 6s linear infinite;
    animation: scale-in 6s linear infinite;
    opacity: 0.5;
}

.homepage-testimonial--right .testimonialBlock {
    position: relative;
    width: 100%;
    min-width: 100%;
    grid-column: 1/-1;
    grid-row: 1/2;
    padding-bottom: 2rem;
}

.homepage-testimonial--right .testimonialBlock .blockDetails {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 1.2rem;
}

.homepage-testimonial--right .testimonialBlock .blockDetails>img {
    margin-right: 1.6rem;
}

@media only screen and (max-width: 48em) {
    .homepage-testimonial--right .testimonialBlock .blockDetails>img {
        -o-object-fit: contain;
        object-fit: contain;
    }
}

.homepage-testimonial--right .testimonialBlock .blockDetails h3 {
    font-size: 3.9rem;
    line-height: 1.3;
    opacity: 0;
    -webkit-filter: blur(4px);
    filter: blur(4px);
}

@media only screen and (max-width: 48em) {
    .homepage-testimonial--right .testimonialBlock .blockDetails h3 {
        font-size: 2.5rem;
    }
}

.homepage-testimonial--right .testimonialBlock .blockDetails p {
    font-size: 2.5rem;
    font-weight: 600;
    opacity: 0;
    -webkit-filter: blur(4px);
    filter: blur(4px);
}

@media only screen and (max-width: 48em) {
    .homepage-testimonial--right .testimonialBlock .blockDetails p {
        font-size: 2rem;
    }
}

.homepage-testimonial--right .testimonialBlock .blockText {
    opacity: 0;
    -webkit-filter: blur(4px);
    filter: blur(4px);
    position: relative;
}

.homepage-testimonial--right .testimonialBlock.activeTestimonial .blockDetails h3 {
    -webkit-animation: fade-in 0.8s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
    animation: fade-in 0.8s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.homepage-testimonial--right .testimonialBlock.activeTestimonial .blockDetails p {
    -webkit-animation: fade-in 0.8s 0.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
    animation: fade-in 0.8s 0.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.homepage-testimonial--right .testimonialBlock.activeTestimonial .blockText {
    -webkit-animation: fade-in 0.8s 0.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
    animation: fade-in 0.8s 0.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
        -webkit-filter: blur(4px);
        filter: blur(4px);
    }

    100% {
        opacity: 1;
        -webkit-filter: blur(0);
        filter: blur(0);
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
        -webkit-filter: blur(4px);
        filter: blur(4px);
    }

    100% {
        opacity: 1;
        -webkit-filter: blur(0);
        filter: blur(0);
    }
}

@-webkit-keyframes scale-in {
    0% {
        -webkit-transform: translateX(0) scaleX(0);
        transform: translateX(0) scaleX(0);
    }

    50% {
        -webkit-transform: translateX(0) scaleX(1);
        transform: translateX(0) scaleX(1);
    }

    100% {
        -webkit-transform: translateX(100%) scaleX(0);
        transform: translateX(100%) scaleX(0);
    }
}

@keyframes scale-in {
    0% {
        -webkit-transform: translateX(0) scaleX(0);
        transform: translateX(0) scaleX(0);
    }

    50% {
        -webkit-transform: translateX(0) scaleX(1);
        transform: translateX(0) scaleX(1);
    }

    100% {
        -webkit-transform: translateX(100%) scaleX(0);
        transform: translateX(100%) scaleX(0);
    }
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(-25deg);
        transform: rotate(-25deg);
    }

    100% {
        -webkit-transform: rotate(25deg);
        transform: rotate(25deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(-25deg);
        transform: rotate(-25deg);
    }

    100% {
        -webkit-transform: rotate(25deg);
        transform: rotate(25deg);
    }
}

.homepage-clientsLogo {
    background: #292929;
    position: relative;
}

.homepage-clientsLogo .homepage-clientsLogo--wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 8rem 0;
}

@media only screen and (max-width: 48em) {
    .homepage-clientsLogo .homepage-clientsLogo--wrapper {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-left: -1rem;
        margin-right: -1rem;
    }
}

.homepage-clientsLogo .homepage-clientsLogo--wrapper img {
    height: 5rem;
    display: block;
}

@media only screen and (max-width: 48em) {
    .homepage-clientsLogo .homepage-clientsLogo--wrapper img {
        height: unset;
        width: 40%;
        margin: 1rem;
    }
}

.homepage-clientsLogo .eyeBtn.logoEyeBtn {
    position: absolute;
    left: 50%;
    bottom: -16rem;
    z-index: 10;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.homepage-clientsLogo::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 12rem;
    left: 50%;
    top: 100%;
    z-index: 5;
    background: #fff;
}

.contactFormWrapper {
    padding-top: 15rem;
}

.contactForm {
    max-width: 80ch;
    margin: 0 auto;
    position: relative;
}

.contactForm br {
    display: none;
}

.contactForm>h2 {
    font-size: 4.8rem;
    margin-bottom: 2.4rem;
}

@media only screen and (max-width: 48em) {
    .contactForm>h2 {
        font-size: 3.1rem;
    }
}

.contactForm-form {
    position: relative;
}

.contactForm .handwrittenOnScroll {
    position: absolute;
    bottom: 4rem;
    right: 0;
    width: 35rem;
}

@media only screen and (max-width: 48em) {
    .contactForm .handwrittenOnScroll {
        bottom: -8rem;
        z-index: 20;
        width: 100%;
    }
}

.contactForm .handwrittenOnScroll svg {
    width: 100%;
    display: block;
}

.contactForm-form::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 15rem;
    left: 50%;
    bottom: 0;
    z-index: 5;
    background: #fff;
}

.contactForm-form p {
    font-size: 3rem;
    font-weight: 500;
    line-height: 1.8;
}

@media only screen and (max-width: 48em) {
    .contactForm-form p {
        font-size: 2rem;
    }
}

.contactForm-form p .formField {
    display: inline-block;
    font-size: inherit;
}

@media only screen and (max-width: 48em) {
    .contactForm-form p .formField {
        display: block;
        width: 100%;
        margin-top: 0.8rem;
    }
}

.contactForm-form p .formField input {
    display: inline-block;
    padding: 0.8rem 1.2rem;
    background: #292929;
    border: none;
    border-radius: 6px;
    min-width: 20rem;
    -webkit-transform: translateY(-4px);
    -ms-transform: translateY(-4px);
    transform: translateY(-4px);
    font-size: 2rem;
    font-family: inherit;
    font-weight: 400;
    color: #fff;
    position: relative;
    z-index: 10;
}

@media only screen and (max-width: 48em) {
    .contactForm-form p .formField input {
        display: block;
        width: 100%;
    }
}

.contactForm-form p .formField input::-webkit-input-placeholder {
    color: #000;
    opacity: 1;
}

.contactForm-form p .formField input::-moz-placeholder {
    color: #000;
    opacity: 1;
}

.contactForm-form p .formField input:-ms-input-placeholder {
    color: #000;
    opacity: 1;
}

.contactForm-form p .formField input::-ms-input-placeholder {
    color: #000;
    opacity: 1;
}

.contactForm-form p .formField input::placeholder {
    color: #000;
    opacity: 1;
}

.contactForm-form p .formField input:-ms-input-placeholder {
    color: #000;
}

.contactForm-form p .formField input::-ms-input-placeholder {
    color: #000;
}

.contactForm-form p .formField input:focus {
    outline: 0;
}

.contactForm-form p .formField.messageInput {
    display: block;
    width: 100%;
}

.contactForm-form p .formField.messageInput input {
    width: 100%;
}

.contactForm-form .submitBtn {
    margin-top: 6rem;
    border: none;
    background: 0 0;
    position: relative;
    z-index: 10;
    color: #fff;
    font-family: inherit;
    font-size: 2rem;
    cursor: pointer;
    width: 10rem;
    height: 8rem;
}

.contactForm-form .submitBtn input {
    position: relative;
    z-index: 20;
    color: #fff;
    font-family: inherit;
    font-size: 2rem;
    background: 0 0;
    border: none;
    cursor: pointer;
    font-weight: 600;
    white-space: pre-wrap;
}

.contactForm-form .submitBtn:hover {
    color: #07bcff;
}

.pp-projectHero {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media only screen and (max-width: 48em) {
    .pp-projectHero {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }
}

.pp-projectHero--left {
    width: calc(50% - 3.2rem);
}

@media only screen and (max-width: 48em) {
    .pp-projectHero--left {
        width: 100%;
    }
}

.pp-projectHero--left h2 {
    font-size: 4.8rem;
    margin-bottom: 0.8rem;
}

.pp-projectHero--left h2 span.animatedText {
    display: block;
    width: 25rem;
    height: 10rem;
    position: absolute;
    bottom: 50%;
    left: 80%;
}

.pp-projectHero--left h2 span.animatedText svg {
    display: block;
    width: 100%;
    /* stroke-dasharray: 1200;
  stroke-dashoffset: 1200; */
}

@media only screen and (max-width: 48em) {
    .pp-projectHero--left h2 span.animatedText {
        width: 18rem;
        height: 8rem;
        left: unset;
        right: 0;
    }
}

@media only screen and (max-width: 48em) {
    .pp-projectHero--left h2 {
        font-size: 3.9rem;
    }
}

.pp-projectHero--left h3 {
    font-size: 3.1rem;
    font-weight: 300;
    max-width: 50rem;
    line-height: 1.4;
}

@media only screen and (max-width: 48em) {
    .pp-projectHero--left h3 {
        font-size: 2.5rem;
    }
}

.pp-projectHero--right {
    width: calc(50% - 3.2rem);
    height: 500px;
}

@media only screen and (max-width: 48em) {
    .pp-projectHero--right {
        width: 100%;
        height: auto;
        padding: 4rem 0;
    }
}

.pp-projectHero--right canvas {
    display: block;
    width: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    height: 100%;
}

.pp-projectsGridWrapper {
    padding-top: 10rem;
}

@media only screen and (max-width: 48em) {
    .pp-projectsGridWrapper {
        padding-top: 8rem;
    }
}

.filterableProjectGrid-buttonWrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    margin-bottom: 4rem;
    /*  Remove below to show filter buttons */
    display: none;
}

@media only screen and (max-width: 48em) {
    .filterableProjectGrid-buttonWrapper {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        /*  Remove below to show filter buttons */
        display: none;
    }
}

.filterableProjectGrid-buttonWrapper>p {
    width: 10%;
    font-size: 2rem;
    padding: 0.4rem 0;
}

@media only screen and (max-width: 48em) {
    .filterableProjectGrid-buttonWrapper>p {
        width: 100%;
        margin-bottom: 1.6rem;
    }
}

.filterableProjectGrid-buttonWrapper>div {
    width: 90%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

@media only screen and (max-width: 48em) {
    .filterableProjectGrid-buttonWrapper>div {
        width: 100%;
    }
}

.filterableProjectGrid-buttonWrapper>div button {
    width: 23%;
    display: block;
    font-family: inherit;
    font-size: 2rem;
    background: #292929;
    border: none;
    color: #fff;
    padding: 0.8rem;
    border-radius: 1rem;
    position: relative;
    margin-bottom: 2.4rem;
}

@media only screen and (max-width: 48em) {
    .filterableProjectGrid-buttonWrapper>div button {
        width: calc(50% - 0.8rem);
        margin-bottom: 1.6rem;
    }
}

.filterableProjectGrid-buttonWrapper>div button.is-checked {
    background: #07bcff;
}

.filterableProjectGrid-buttonWrapper>div button.is-checked::after {
    content: '\2573';
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 0.6rem;
    top: -0.8rem;
    right: -0.8rem;
    width: 2.4rem;
    height: 2.4rem;
    background: #07bcff;
    border: 2px solid #000;
    border-radius: 5rem;
    font-weight: 900;
    line-height: 1;
}

.filterableProjectGrid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.filterableProjectGrid .element-item {
    display: block;
    width: calc(50% - 2rem);
}

@media only screen and (max-width: 48em) {
    .filterableProjectGrid .element-item {
        width: 100%;
    }
}

.filterableProjectGrid .element-item .projectCard {
    margin-bottom: 4rem;
    min-height: auto;
}

.filterableProjectGrid .element-item .projectCard-content {
    width: calc(45% - 1.2rem);
    padding: 4rem;
    padding-right: 0;
    -ms-flex-item-align: end;
    align-self: flex-end;
}

@media only screen and (max-width: 48em) {
    .filterableProjectGrid .element-item .projectCard-content {
        width: 100%;
        padding: 0;
    }
}

.filterableProjectGrid .element-item .projectCard-content .name {
    font-size: 2rem;
}

@media only screen and (max-width: 48em) {
    .filterableProjectGrid .element-item .projectCard-content .name {
        font-size: 2.5rem;
    }
}

.filterableProjectGrid .element-item .projectCard-content .details {
    margin-bottom: 2rem;
    font-size: 1.6rem;
}

.filterableProjectGrid .element-item .projectCard-content .workIcons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.filterableProjectGrid .element-item .projectCard-content .workIcons .workIcon-item:not(:last-of-type) {
    margin-right: 1.2rem;
}

.filterableProjectGrid .element-item .projectCard-content .workIcons img {
    width: 2rem;
    height: 2rem;
}

.filterableProjectGrid .element-item .projectCard-content .workIcons p {
    font-size: 1.4rem;
}

.filterableProjectGrid .element-item .projectCard-image {
    width: calc(55% - 1.2rem);
    -ms-flex-item-align: stretch;
    align-self: stretch;
    min-height: 35rem;
    overflow: hidden;
}

@media only screen and (max-width: 48em) {
    .filterableProjectGrid .element-item .projectCard-image {
        width: 100%;
        background: #292929;
        border-radius: 1.2rem;
        overflow: hidden;
        margin-bottom: 2rem;
        min-height: auto;
    }
}

.filterableProjectGrid .element-item .projectCard-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.filterableProjectGrid .element-item:nth-of-type(3n-1) {
    margin-left: 4rem;
}

@media only screen and (max-width: 48em) {
    .filterableProjectGrid .element-item:nth-of-type(3n-1) {
        margin-left: 0;
    }
}

.filterableProjectGrid .element-item:nth-of-type(3n) {
    width: 100%;
}

.filterableProjectGrid .element-item:nth-of-type(3n) .projectCard {
    background: #292929;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    position: relative;
    z-index: 5;
    border-radius: 1.6rem;
    margin-bottom: 4rem;
    min-height: 60rem;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    cursor: url(../images/cursor.png), pointer;
}

@media only screen and (max-width: 48em) {
    .filterableProjectGrid .element-item:nth-of-type(3n) .projectCard {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        background: #000;
        min-height: auto;
        border-radius: 0;
        margin-bottom: 8rem;
    }
}

.filterableProjectGrid .element-item:nth-of-type(3n) .projectCard-content {
    width: calc(35% - 1.6rem);
    padding: 4rem 8rem;
    padding-right: 0;
}

@media only screen and (max-width: 48em) {
    .filterableProjectGrid .element-item:nth-of-type(3n) .projectCard-content {
        padding: 0;
        width: 100%;
    }
}

.filterableProjectGrid .element-item:nth-of-type(3n) .projectCard-content .name {
    font-size: 4.8rem;
    line-height: 1.1;
    margin-bottom: 1.2rem;
    -webkit-transform: translateZ(60px);
    transform: translateZ(60px);
}

@media only screen and (max-width: 48em) {
    .filterableProjectGrid .element-item:nth-of-type(3n) .projectCard-content .name {
        font-size: 2.5rem;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

.filterableProjectGrid .element-item:nth-of-type(3n) .projectCard-content .details {
    margin-bottom: 2rem;
    font-size: 2rem;
    line-height: 1.4;
    -webkit-transform: translateZ(65px);
    transform: translateZ(65px);
}

@media only screen and (max-width: 48em) {
    .filterableProjectGrid .element-item:nth-of-type(3n) .projectCard-content .details {
        font-size: 1.6rem;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

.filterableProjectGrid .element-item:nth-of-type(3n) .projectCard-content .workIcons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.filterableProjectGrid .element-item:nth-of-type(3n) .projectCard-content .workIcons .workIcon-item:not(:last-of-type) {
    margin-right: 2.4rem;
}

@media only screen and (max-width: 48em) {
    .filterableProjectGrid .element-item:nth-of-type(3n) .projectCard-content .workIcons .workIcon-item:not(:last-of-type) {
        margin-right: 1.2rem;
    }
}

.filterableProjectGrid .element-item:nth-of-type(3n) .projectCard-content .workIcons .workIcon-item {
    text-align: center;
    text-transform: uppercase;
    font-size: 1.3rem;
    -webkit-transform: translateZ(70px);
    transform: translateZ(70px);
}

@media only screen and (max-width: 48em) {
    .filterableProjectGrid .element-item:nth-of-type(3n) .projectCard-content .workIcons .workIcon-item {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

.filterableProjectGrid .element-item:nth-of-type(3n) .projectCard-content .workIcons .workIcon-item>img {
    margin-bottom: 0.8rem;
}

.filterableProjectGrid .element-item:nth-of-type(3n) .projectCard-content .workIcons img {
    width: 4rem;
    height: 4rem;
}

@media only screen and (max-width: 48em) {
    .filterableProjectGrid .element-item:nth-of-type(3n) .projectCard-content .workIcons img {
        width: 2rem;
        height: 2rem;
    }
}

.filterableProjectGrid .element-item:nth-of-type(3n) .projectCard-content .workIcons p {
    font-size: 1.6rem;
}

@media only screen and (max-width: 48em) {
    .filterableProjectGrid .element-item:nth-of-type(3n) .projectCard-content .workIcons p {
        font-size: 1.4rem;
    }
}

.filterableProjectGrid .element-item:nth-of-type(3n) .projectCard-image {
    width: calc(65% - 1.6rem);
    -ms-flex-item-align: stretch;
    align-self: stretch;
    overflow: hidden;
}

@media only screen and (max-width: 48em) {
    .filterableProjectGrid .element-item:nth-of-type(3n) .projectCard-image {
        width: 100%;
        background: #292929;
        border-radius: 1.2rem;
        overflow: hidden;
        margin-bottom: 2rem;
    }
}

.filterableProjectGrid .element-item:nth-of-type(3n) .projectCard-image img {
    width: 100%;
    height: 100%;
    display: block;
}

@media only screen and (max-width: 48em) {
    .exppp-expGridWrapper {
        margin-top: 8rem;
    }
}

.exppp-expGridWrapper .exppage-exp--grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
    gap: 4rem;
    position: relative;
}

@media only screen and (max-width: 48em) {
    .exppp-expGridWrapper .exppage-exp--grid {
        display: block;
    }
}

.exppp-expGridWrapper .exppage-exp--grid .expCard:nth-of-type(3n-1) {
    margin-top: 6rem;
}

@media only screen and (max-width: 48em) {
    .exppp-expGridWrapper .exppage-exp--grid .expCard:nth-of-type(3n-1) {
        margin-top: 0;
        margin-bottom: 4rem;
    }
}

.exppp-expGridWrapper .exppage-exp--grid .expCard:nth-of-type(3n) {
    margin-top: 12rem;
}

@media only screen and (max-width: 48em) {
    .exppp-expGridWrapper .exppage-exp--grid .expCard:nth-of-type(3n) {
        margin-top: 0;
        margin-bottom: 4rem;
    }
}

.aboutPage-hero {
    min-height: 40rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;

    align-items: flex-start;
    width: 70%
}


@media screen and (max-width: 1200px) {
    .aboutPage-hero {
        padding-left: 5vw;
        padding-right: 5vw;
    }


}


.aboutPage-main {
    width: 70%;
}

.aboutPage-hero>h2 {
    font-size: 4.8rem;
    max-width: 80rem;
    line-height: 1.4;
}

@media only screen and (max-width: 48em) {

    .aboutPage-hero {
        width: 100%;
    }

    .aboutPage-hero>h2 {
        font-size: 3.1rem;
        line-height: 1.35;
    }
}

.ap-curtainSection {
    min-height: 50rem;
    background: #292929;
}

.ap-puzzle {
    padding: 10rem 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media only screen and (max-width: 48em) {
    .ap-puzzle {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }
}

.ap-puzzle--svg {
    width: calc(50% - 3.2rem);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

@media only screen and (max-width: 48em) {
    .ap-puzzle--svg {
        width: 100%;
        margin-top: 4rem;
    }
}

.ap-puzzle--svg svg {
    width: 100%;
    height: 100%;
    display: block;
    transform: scaleX(-1);
}

.ap-puzzle--text {
    width: calc(50% - 3.2rem);
}

@media only screen and (max-width: 48em) {
    .ap-puzzle--text {
        width: 100%;
    }
}

.ap-puzzle--text h3 {
    font-size: 4.8rem;
    max-width: 50rem;
    line-height: 1.4;
}

@media only screen and (max-width: 48em) {
    .ap-puzzle--text h3 {
        font-size: 3.1rem;
    }
}

.ap-aboutJc {
    padding-top: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media only screen and (max-width: 48em) {
    .ap-aboutJc {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}

.ap-aboutJc--content {
    width: calc(50% - 3.2rem);
}

@media only screen and (max-width: 48em) {
    .ap-aboutJc--content {
        width: 100%;
    }
}

.ap-aboutJc--content h3 {
    font-size: 3.1rem;
    max-width: 50rem;
    line-height: 1.4;
    margin-bottom: 1.2rem;
}

@media only screen and (max-width: 48em) {
    .ap-aboutJc--content h3 {
        font-size: 2.5rem;
    }
}

.ap-aboutJc--content h3 span {
    color: #07bcff;
}

.ap-aboutJc--content p {
    max-width: 50rem;
}

.ap-aboutJc--img {
    width: calc(50% - 3.2rem);
}

@media only screen and (max-width: 48em) {
    .ap-aboutJc--img {
        width: 100%;
        margin-top: 4rem;
    }
}

.contactPage.contactFormWrapper {
    padding-top: 0;
}

.contactPage.contactFormWrapper .contactForm h2 {
    font-size: 3.1rem;
}

.cp-contactMailsSection {
    margin-top: 12rem;
    position: relative;
}

.cp-contactMailsSection::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: calc(50% - 0.8rem);
    height: 100%;
    background: #292929;
    z-index: 1;
}

@media only screen and (max-width: 48em) {
    .cp-contactMailsSection::after {
        width: 100%;
        height: calc(50% - 0.8rem);
    }
}

.cp-contactMailsSection::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: calc(50% - 0.8rem);
    height: 100%;
    background: #292929;
    z-index: 1;
}

@media only screen and (max-width: 48em) {
    .cp-contactMailsSection::before {
        width: 100%;
        height: calc(50% - 0.8rem);
        top: unset;
        bottom: 0;
    }
}

.cp-contactMailsSection .cp-contactMails {
    padding: 8rem 0;
    position: relative;
    z-index: 5;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media only screen and (max-width: 48em) {
    .cp-contactMailsSection .cp-contactMails {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding: 2rem 0;
    }
}

.cp-contactMailsSection .cp-contactMails>div {
    width: calc(50%-3.2rem);
}

@media only screen and (max-width: 48em) {
    .cp-contactMailsSection .cp-contactMails>div {
        width: 100%;
    }
}

@media only screen and (max-width: 48em) {
    .cp-contactMailsSection .cp-contactMails>div:not(:last-of-type) {
        margin-bottom: 6rem;
    }
}

.cp-contactMailsSection .cp-contactMails h3 {
    font-size: 3.1rem;
    max-width: 48rem;
    line-height: 1.4;
    margin-bottom: 1.2rem;
}

@media only screen and (max-width: 48em) {
    .cp-contactMailsSection .cp-contactMails h3 {
        font-size: 2.5rem;
    }
}

.cp-contactMailsSection .cp-contactMails h4 {
    font-size: 3.9rem;
    margin-bottom: 1.2rem;
}

@media only screen and (max-width: 48em) {
    .cp-contactMailsSection .cp-contactMails h4 {
        font-size: 3.1rem;
    }
}

.cp-contactMailsSection .cp-contactMails a {
    font-size: 3.9rem;
    color: #07bcff;
    font-weight: 600;
}

@media only screen and (max-width: 48em) {
    .cp-contactMailsSection .cp-contactMails a {
        font-size: 2.5rem;
        line-height: 1.35;
    }
}

.animatedPlane-section {
    position: relative;
    height: 45rem;
    margin-bottom: -17.5rem;
}

.animatedPlane-section #plane {
    position: absolute;
    inset: 0;
    width: 100%;
    overflow: hidden;
    overflow-y: hidden;
    z-index: 200;
}

.animatedPlane-section .container {
    height: 100%;
}

.animatedPlane-section .animatedPlane-content {
    position: relative;
    z-index: 1000;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media only screen and (max-width: 48em) {
    .animatedPlane-section .animatedPlane-content {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
        justify-content: space-evenly;
    }
}

.animatedPlane-section .animatedPlane-content--left {
    width: calc(50% - 3.2rem);
}

@media only screen and (max-width: 48em) {
    .animatedPlane-section .animatedPlane-content--left {
        width: 100%;
    }
}

.animatedPlane-section .animatedPlane-content--left h3 {
    font-size: 3.1rem;
    max-width: 48rem;
}

@media only screen and (max-width: 48em) {
    .animatedPlane-section .animatedPlane-content--left h3 {
        font-size: 2.5rem;
    }
}

.animatedPlane-section .animatedPlane-content--right {
    width: calc(50% - 3.2rem);
}

@media only screen and (max-width: 48em) {
    .animatedPlane-section .animatedPlane-content--right {
        width: 100%;
    }
}

.animatedPlane-section .animatedPlane-content--right h3 {
    font-size: 3.1rem;
    max-width: 46rem;
}

@media only screen and (max-width: 48em) {
    .animatedPlane-section .animatedPlane-content--right h3 {
        font-size: 2.5rem;
    }
}

.spd-bannerwithContent .container {
    --fixed-width: 1200px;
    --right-width: 55%;
    --left-width: 45%;
    max-width: var(--fixed-width);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 90vh;
}

@media only screen and (max-width: 62em) {
    .spd-bannerwithContent .container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        min-height: auto;
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

@media only screen and (max-width: 48em) {
    .spd-bannerwithContent .container {
        padding-bottom: 0;
    }
}

.spd-bannerwithContent .container .spd-bannerwithContent--left {
    min-width: var(--left-width);
    width: var(--left-width);
    position: relative;
}

@media only screen and (max-width: 62em) {
    .spd-bannerwithContent .container .spd-bannerwithContent--left {
        width: 100%;
    }
}

.spd-bannerwithContent .container .spd-bannerwithContent--left h1 {
    font-size: 6.1rem;
}

@media only screen and (max-width: 48em) {
    .spd-bannerwithContent .container .spd-bannerwithContent--left h1 {
        font-size: 3.9rem;
    }
}

.spd-bannerwithContent .container .spd-bannerwithContent--left .projectCat {
    margin-bottom: 0;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.91;
    letter-spacing: normal;
}

.spd-bannerwithContent .container .spd-bannerwithContent--left h2 {
    font-size: 2.5rem;
    line-height: 1.5;
    font-weight: 400;
    margin-bottom: 2rem;
}

@media only screen and (max-width: 48em) {
    .spd-bannerwithContent .container .spd-bannerwithContent--left h2 {
        font-size: 2rem;
    }
}

.spd-bannerwithContent .container .spd-bannerwithContent--left .paraNew {
    font-size: 1.5rem;
    line-height: 1.79;
    margin-bottom: 2rem;
    /* font-weight: 400; */
    letter-spacing: normal;
    font-weight: normal;
    font-stretch: normal;
}

@media only screen and (max-width: 48em) {
    .spd-bannerwithContent .container .spd-bannerwithContent--left .paraNew {
        font-size: 1.3rem;
    }
}

.spd-bannerwithContent .container .spd-bannerwithContent--left .workIcons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.spd-bannerwithContent .container .spd-bannerwithContent--left .workIcons .workIcon-item:not(:last-of-type) {
    margin-right: 2.4rem;
}

.spd-bannerwithContent .container .spd-bannerwithContent--left .workIcons .workIcon-item {
    text-align: center;
    text-transform: uppercase;
    font-size: 1.3rem;
    -webkit-transform: translateZ(70px);
    transform: translateZ(70px);
}

.spd-bannerwithContent .container .spd-bannerwithContent--left .workIcons .workIcon-item>img {
    margin-bottom: 0.8rem;
}

.spd-bannerwithContent .container .spd-bannerwithContent--left .hlWrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 4rem;
}

.spd-bannerwithContent .container .spd-bannerwithContent--left .hlWrapper .hlBox {}

.spd-bannerwithContent .container .spd-bannerwithContent--left .hlWrapper .hlBox h6 {
    font-size: 1.8rem;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.91;
    letter-spacing: normal;
    text-align: left;
}

.spd-bannerwithContent .container .spd-bannerwithContent--left .hlWrapper .hlBox p {
    font-size: 1.8rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.22;
    letter-spacing: normal;
    text-align: left;
    color: #fff;
}

.spd-bannerwithContent .container .spd-bannerwithContent--right {
    position: relative;
    width: var(--right-width);
    /* min-width: calc(var(--right-width) + (100vw - var(--fixed-width)) / 2); */
}

@media only screen and (max-width: 62em) {
    .spd-bannerwithContent .container .spd-bannerwithContent--right {
        width: 100%;
        margin-bottom: 2rem;
    }
}

.sp-Brief {
    margin-top: 8rem;
    margin-bottom: 8rem;
    max-width: 50ch;
    font-size: 2rem;
}

@media only screen and (max-width: 48em) {
    .sp-Brief {
        margin-top: 4rem;
        margin-bottom: 4rem;
    }
}

.sp-Brief h3 {
    font-size: 3.1rem;
    margin-bottom: 1.2rem;
}

.sp-Brief p:not(:last-of-type) {
    margin-bottom: 3.2rem;
}

.sp-headingWithSingleImage {
    margin-bottom: 8rem;
}

.sp-headingWithSingleImage--heading h2 {
    font-size: 4.8rem;
    max-width: 70rem;
    line-height: 1.3;
    margin-bottom: 1.6rem;
}

@media only screen and (max-width: 48em) {
    .sp-headingWithSingleImage--heading h2 {
        font-size: 3.9rem;
    }
}

.sp-headingWithSingleImage--heading h3 {
    font-size: 3.1rem;
    margin-bottom: 4rem;
}

@media only screen and (max-width: 48em) {
    .sp-headingWithSingleImage--heading h3 {
        font-size: 2.5rem;
    }
}

.sp-centerHeadingWithContent {
    padding: 8rem 0;
    text-align: center;
    max-width: 80rem;
    margin: 0 auto;
    font-size: 2rem;
}

.sp-centerHeadingWithContent h3 {
    font-size: 3.1rem;
    margin-bottom: 2.4rem;
}

.sp-centerHeadingWithContent p:not(:last-of-type) {
    margin-bottom: 1.6rem;
}

.sp-projectIcons {
    margin-top: 8rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-left: -2rem;
    margin-right: -2rem;
}

.sp-projectIcons--items {
    width: 15%;
    margin: 2rem;
    text-align: center;
}

.sp-projectIcons--items img {
    width: 8rem;
    margin: auto;
    margin-bottom: 1.2rem;
}

.sp-projectIcons--items p {
    font-size: 2rem;
    font-weight: 600;
}

.sp-ImageWithOverlappingHeading {
    width: 85%;
    margin: 8rem auto;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: 1fr;
}

@media only screen and (max-width: 48em) {
    .sp-ImageWithOverlappingHeading {
        width: 100%;
    }
}

.sp-ImageWithOverlappingHeading--heading {
    position: relative;
    grid-column: 1/5;
    grid-row: 1/-1;
    z-index: 10;
    padding-top: 4rem;
}

@media only screen and (max-width: 48em) {
    .sp-ImageWithOverlappingHeading--heading {
        padding-top: 1.2rem;
    }
}

.sp-ImageWithOverlappingHeading--heading h2 {
    font-size: 4.8rem;
    max-width: 40rem;
    margin-bottom: 1.2rem;
}

@media only screen and (max-width: 48em) {
    .sp-ImageWithOverlappingHeading--heading h2 {
        font-size: 3.1rem;
    }
}

.sp-ImageWithOverlappingHeading--heading .whiteLinetoright {
    display: block;
    max-width: 40rem;
    height: 2px;
    background: #fff;
}

.sp-ImageWithOverlappingHeading--image {
    grid-column: 3/9;
    grid-row: 1/-1;
}

.sp-twoColumnImage {
    margin-top: 8rem;
    margin-bottom: -10rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    z-index: 20;
}

@media only screen and (max-width: 48em) {
    .sp-twoColumnImage {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}

.sp-twoColumnImage--image {
    width: calc(50% - 2rem);
}

@media only screen and (max-width: 48em) {
    .sp-twoColumnImage--image {
        width: 100%;
    }

    .sp-twoColumnImage--image:last-of-type {
        margin-top: 2rem;
    }
}

.animatedImageOverlayWrapper {
    position: relative;
    overflow: hidden;
}

.animatedImageOverlayWrapper .animatedImageOverlay {
    position: absolute;
    inset: 0;
    background: #000;
}


.paddingRightLeft .fullWidthImage {
    padding: 0 11%;
}

@media only screen and (max-width: 48em) {
    .paddingRightLeft .fullWidthImage {
        padding: 0 5vw;
    }

}


.fullWidthImage img {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

body.lightProject {
    background: #fff;
    position: relative;
}

body.lightProject nav {
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

body.lightProject nav .nav-logo svg path {
    fill: #000;
}

body.lightProject nav .nav-links--item {
    color: #000;
}

body.lightProject nav .nav-links--item::after {
    background: #000;
}

body.lightProject nav .nav-links--item span.linkDesc {
    color: #292929 !important;
}

body.lightProject nav .mobileMenu-container .nav-menuBtn .menu svg path {
    stroke: #000;
}

body.lightProject section {
    background: #fff;
    color: #000;
}

body.lightProject .spd-bannerwithContent {
    background: #efefef;
}

body.lightProject .spd-bannerwithContent .container {
    min-height: 100vh;
    padding-top: 8rem;
}

body.lightProject .Section.bg-grey {
    background: #efefef;
}

body.lightProject .sp-ImageWithOverlappingHeading--heading .whiteLinetoright {
    background: #000;
}

body.lightProject .footerDripping {
    background: #fff;
}

body.lightProject .footerDripping .drip {
    background: #fff;
}

body.lightProject .footerDripping .dripit,
body.lightProject .footerDripping .drop,
body.lightProject .footerDripping .droplet,
body.lightProject .footerDripping .droplet2 {
    background: #fff;
}

body.lightProject .animatedImageOverlayWrapper {
    position: relative;
    overflow: hidden;
}

body.lightProject .animatedImageOverlayWrapper .animatedImageOverlay {
    position: absolute;
    inset: 0;
    background: #fff;
}

*,
::after,
::before {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

html {
    font-size: 10px;
}

body {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow-x: hidden;
    background: #000;
    color: #fff;
    position: relative;
    z-index: 1;
    background: #000;
}

body::-webkit-scrollbar {
    background-color: #292929;
    width: 0.5rem;
    border-radius: 0.2rem;
}

body::-webkit-scrollbar-thumb {
    background-color: #439fc0;
    border-radius: 0.2rem;
}

main {
    min-height: 100vh;
}

section {
    background: #000;
}

section.noBg-color {
    background: 0 0;
}

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

img {
    max-width: 100%;
    display: block;
}

ul {
    list-style: none;
}

body {
    opacity: 0.1;
    visibility: hidden;
}

body.no-scroll {
    overflow: hidden;
}

.loading-screen {
    position: relative;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    background-color: #07bcff;
    width: 0%;
    height: 100vh;
    z-index: 9999999;
    -webkit-transform: translate3d(0, 0, 100px);
    perspective: 1000px;
}

.load-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
    z-index: 9999999;
    -webkit-transform: translate3d(0, 0, 100px);
    perspective: 1000px;
}

.gs_reveal {
    overflow: hidden;
    display: inline-block;
}

.bg-grey {
    background: #292929;
}

body {
    font-family: VisbyRoundCF, Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.6;
}

footer {
    background: #292929;
}

footer .footer {
    max-width: 80%;
    margin: 0 auto;
    padding-top: 30rem;
    padding-bottom: 10rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media only screen and (max-width: 48em) {
    footer .footer {
        max-width: 100%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        padding-left: 10vw;
        padding-right: 10vw;
    }
}

@media only screen and (max-width: 48em) {
    footer .footer .footer-logo {
        margin-bottom: 4rem;
    }
}

footer .footer .footer-logo svg {
    width: 16rem;
    display: block;
}

footer .footer .footer-links li:not(:last-of-type) {
    margin-bottom: 1.6rem;
}

@media only screen and (max-width: 48em) {
    footer .footer .footer-links li:not(:last-of-type) {
        margin-bottom: 1.2rem;
    }
}

@media only screen and (max-width: 48em) {
    footer .footer .footer-links li a {
        font-size: 2rem;
    }
}

footer .footer .footer-links li:hover {
    color: #07bcff;
}

footer .footer .footer-social {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2.4rem;
}

@media only screen and (max-width: 48em) {
    footer .footer .footer-social {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-top: 4rem;
        -webkit-transform: translateX(-8px);
        -ms-transform: translateX(-8px);
        transform: translateX(-8px);
    }
}

footer .footer .footer-social .footer-soial--item img {
    width: 3.2rem;
    height: 3.2rem;
    -o-object-fit: contain;
    object-fit: contain;
    display: block;
}

footer {
    overflow: hidden;
    position: relative;
}

footer .footerDripping {
    height: 18rem;
    background: #000;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

footer .footerDripping .drip {
    position: absolute;
    background: #000;
    width: 25rem;
    height: 25%;
    bottom: 2px;
    left: 5%;
    cursor: pointer;
    -webkit-filter: url(#goo);
    filter: url(#goo);
}

footer .footerDripping .drip .drop {
    position: absolute;
    top: 0;
    left: 75%;
    width: 4rem;
    height: 8.5rem;
    border-radius: 50%;
    background: #000;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

footer .footerDripping .drip .drop:hover {
    height: 12rem;
}

footer .footerDripping .drip .droplet {
    position: absolute;
    top: 0;
    left: 64%;
    width: 2rem;
    height: 5rem;
    border-radius: 50%;
    background: #000;
    -webkit-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
    opacity: 0;
    -webkit-animation: droplet 1.4s 0.4s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1;
    animation: droplet 1.4s 0.4s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1;
}

footer .footerDripping .drip .droplet:hover {
    top: 2rem;
    width: 4rem;
    left: 63%;
    -webkit-animation: reset;
    animation: reset;
}

footer .footerDripping .drip .droplet2 {
    position: absolute;
    top: 2rem;
    left: 76%;
    width: 2rem;
    height: 3.5rem;
    border-radius: 50%;
    z-index: 3;
    background: #000;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

footer .footerDripping .drip .droplet2.dripit {
    -webkit-animation: droplet 1s 0.6s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1;
    animation: droplet 1s 0.6s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1;
}

@keyframes drop {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    50% {
        height: 4rem;
        width: 4rem;
    }

    100% {
        -webkit-transform: translate(0, 55rem);
        transform: translate(0, 55rem);
    }
}

@keyframes droplet {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 0;
    }

    50% {
        height: 3rem;
        width: 3rem;
        opacity: 1;
    }

    100% {
        -webkit-transform: translate(0, 70rem);
        transform: translate(0, 70rem);
    }
}

.Section {
    position: relative;
}

@media screen and (max-width: 1200px) {
    .Section {
        padding-left: 5vw;
        padding-right: 5vw;
    }
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

nav {
    background: #000;
}

nav>.nav {
    max-width: 120rem;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    z-index: 20;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 1.2rem 0;
}

@media screen and (max-width: 1500px) {
    nav>.nav {
        padding-right: 10rem;
    }
}

@media screen and (max-width: 1200px) {
    nav>.nav {
        padding-left: 5vw;
        padding-right: 10rem;
    }
}

nav>.nav .nav-logo a {
    display: block;
}

nav>.nav .nav-logo a>svg {
    width: 12rem;
    display: block;
}

nav>.nav .nav-links {
    width: 60%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media only screen and (max-width: 48em) {
    nav>.nav .nav-links {
        display: none;
    }
}

nav>.nav .nav-links li {
    font-weight: 700;
    position: relative;
    padding: 1.2rem;
    color: #727272;
    display: block;
}

nav>.nav .nav-links li::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 12.5rem;
    background: #fff;
    z-index: 20;
    -webkit-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transition: 0.5s cubic-bezier(0.33, 1, 0.68, 1);
    -o-transition: 0.5s cubic-bezier(0.33, 1, 0.68, 1);
    transition: 0.5s cubic-bezier(0.33, 1, 0.68, 1);
    -webkit-transform-origin: top;
    -ms-transform-origin: top;
    transform-origin: top;
}

nav>.nav .nav-links li a {
    display: block;
    overflow: visible;
}

nav>.nav .nav-links li span.linkDesc {
    display: block;
    position: absolute;
    top: 100%;
    left: 1.2rem;
    width: 16rem;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: 0.7s cubic-bezier(0.33, 1, 0.68, 1);
    -o-transition: 0.7s cubic-bezier(0.33, 1, 0.68, 1);
    transition: 0.7s cubic-bezier(0.33, 1, 0.68, 1);
    font-size: 1.4rem;
    -webkit-transform-origin: top;
    -ms-transform-origin: top;
    transform-origin: top;
    color: #fff;
    z-index: 20;
}

nav>.nav .nav-links li:hover a {
    color: #07bcff;
}

nav>.nav .nav-links li:hover::after {
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
}

nav>.nav .nav-links li:hover span.linkDesc {
    max-height: 20rem;
    height: auto;
}

nav>.nav .mobileMenu-container {
    display: none;
}

@media only screen and (max-width: 48em) {
    nav>.nav .mobileMenu-container {
        display: block;
    }

    nav>.nav .mobileMenu-container #nav-container {
        margin-left: auto;
        position: relative;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding: 10rem 5rem;
        overflow: hidden;
        color: #fff;
        width: 100vw;
        height: 100vh;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 250;
        -webkit-transition: ease-in-out 0.25s;
        -o-transition: ease-in-out 0.25s;
        transition: ease-in-out 0.25s;
        -webkit-transition-delay: 0.25s;
        -o-transition-delay: 0.25s;
        transition-delay: 0.25s;
        visibility: hidden;
        opacity: 0;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen::after {
        content: '';
        position: absolute;
        inset: 0;
        background: #292929;
        z-index: -1;
        -webkit-clip-path: circle(0 at 100% 0);
        clip-path: circle(0 at 100% 0);
        -webkit-transition: 0.5s ease-in-out;
        -o-transition: 0.5s ease-in-out;
        transition: 0.5s ease-in-out;
        pointer-events: none;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen::before {
        content: '';
        position: absolute;
        top: 10rem;
        left: 5.4rem;
        width: 2px;
        height: calc(100% - 20rem);
        background: #fff;
        -webkit-transform: scaleY(0);
        -ms-transform: scaleY(0);
        transform: scaleY(0);
        -webkit-transform-origin: top;
        -ms-transform-origin: top;
        transform-origin: top;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen ul {
        position: relative;
        z-index: 20;
        background: 0 0;
        padding-bottom: 2rem;
        list-style: none;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen ul li {
        opacity: 0;
        -webkit-transition: 0.3s ease-in-out;
        -o-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen ul li a {
        color: #fff;
        text-decoration: none;
        font-size: 3.1rem;
        font-weight: 600;
        padding: 0.8rem 0;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen .nav-Socials {
        position: relative;
        z-index: 20;
        display: grid;
        grid-template-columns: 5rem 5rem;
        gap: 2rem;
        padding-top: 2rem;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen .nav-Socials .nav-Socials--item img {
        display: block;
        width: 3.6rem;
        height: 3.6rem;
        -o-object-fit: contain;
        object-fit: contain;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen .nav-Socials .nav-Socials--item {
        opacity: 0;
        -webkit-transition: 0.3s ease-in-out;
        -o-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen.open {
        visibility: visible;
        opacity: 1;
        -webkit-transition: ease-in-out 0.5s;
        -o-transition: ease-in-out 0.5s;
        transition: ease-in-out 0.5s;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen.open::after {
        -webkit-clip-path: circle(172.6% at 100% 0);
        clip-path: circle(172.6% at 100% 0);
        -webkit-transition: 0.5s ease-in-out;
        -o-transition: 0.5s ease-in-out;
        transition: 0.5s ease-in-out;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen.open::before {
        -webkit-transform: scaleY(1);
        -ms-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transition: 0.8s ease-in-out;
        -o-transition: 0.8s ease-in-out;
        transition: 0.8s ease-in-out;
        -webkit-transition-delay: 0.8s;
        -o-transition-delay: 0.8s;
        transition-delay: 0.8s;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen.open ul li {
        opacity: 1;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen.open ul {
        background: #292929;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen.open ul li:nth-child(1) {
        -webkit-transition-delay: 650ms;
        -o-transition-delay: 650ms;
        transition-delay: 650ms;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen.open ul li:nth-child(2) {
        -webkit-transition-delay: 0.7s;
        -o-transition-delay: 0.7s;
        transition-delay: 0.7s;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen.open ul li:nth-child(3) {
        -webkit-transition-delay: 750ms;
        -o-transition-delay: 750ms;
        transition-delay: 750ms;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen.open ul li:nth-child(4) {
        -webkit-transition-delay: 0.8s;
        -o-transition-delay: 0.8s;
        transition-delay: 0.8s;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen.open ul li:nth-child(5) {
        -webkit-transition-delay: 850ms;
        -o-transition-delay: 850ms;
        transition-delay: 850ms;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen.open .nav-Socials {
        background: #292929;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen.open .nav-Socials .nav-Socials--item {
        opacity: 1;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen.open .nav-Socials .nav-Socials--item:nth-child(1) {
        -webkit-transition-delay: 950ms;
        -o-transition-delay: 950ms;
        transition-delay: 950ms;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen.open .nav-Socials .nav-Socials--item:nth-child(2) {
        -webkit-transition-delay: 1s;
        -o-transition-delay: 1s;
        transition-delay: 1s;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen.open .nav-Socials .nav-Socials--item:nth-child(3) {
        -webkit-transition-delay: 1.15s;
        -o-transition-delay: 1.15s;
        transition-delay: 1.15s;
    }

    nav>.nav .mobileMenu-container #nav-fullscreen.open .nav-Socials .nav-Socials--item:nth-child(4) {
        -webkit-transition-delay: 1.2s;
        -o-transition-delay: 1.2s;
        transition-delay: 1.2s;
    }

    nav>.nav .mobileMenu-container .menu {
        --color: #fff;
        width: 36px;
        height: 36px;
        padding: 0;
        margin: 0;
        outline: 0;
        position: fixed;
        top: 2rem;
        right: 2rem;
        z-index: 9999;
        border: none;
        background: 0 0;
        cursor: pointer;
        -webkit-appearence: none;
        -webkit-tap-highlight-color: transparent;
    }

    nav>.nav .mobileMenu-container .menu svg {
        width: 64px;
        height: 48px;
        top: -6px;
        left: -14px;
        stroke: var(--color);
        stroke-width: 4px;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
        display: block;
        position: absolute;
    }

    nav>.nav .mobileMenu-container .menu svg path {
        -webkit-transition: stroke-dasharray var(--duration, 0.85s) var(--easing, ease) var(--delay, 0s),
            stroke-dashoffset var(--duration, 0.85s) var(--easing, ease) var(--delay, 0s);
        -o-transition: stroke-dasharray var(--duration, 0.85s) var(--easing, ease) var(--delay, 0s),
            stroke-dashoffset var(--duration, 0.85s) var(--easing, ease) var(--delay, 0s);
        transition: stroke-dasharray var(--duration, 0.85s) var(--easing, ease) var(--delay, 0s),
            stroke-dashoffset var(--duration, 0.85s) var(--easing, ease) var(--delay, 0s);
        stroke-dasharray: var(--array-1, 26px) var(--array-2, 100px);
        stroke-dashoffset: var(--offset, 126px);
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    nav>.nav .mobileMenu-container .menu svg path:nth-child(2) {
        --duration: 0.7s;
        --easing: ease-in;
        --offset: 100px;
        --array-2: 74px;
    }

    nav>.nav .mobileMenu-container .menu svg path:nth-child(3) {
        --offset: 133px;
        --array-2: 107px;
    }

    nav>.nav .mobileMenu-container .menu.active svg path {
        --offset: 57px;
    }

    nav>.nav .mobileMenu-container .menu.active svg path:nth-child(1),
    nav>.nav .mobileMenu-container .menu.active svg path:nth-child(3) {
        --delay: 0.15s;
        --easing: cubic-bezier(0.2, 0.4, 0.2, 1.1);
    }

    nav>.nav .mobileMenu-container .menu.active svg path:nth-child(2) {
        --duration: 0.4s;
        --offset: 2px;
        --array-1: 1px;
    }

    nav>.nav .mobileMenu-container .menu.active svg path:nth-child(3) {
        --offset: 58px;
    }
}

.aboutPage-hero {
    min-height: 40rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: flex-start;
}

.aboutPage-hero>h2 {
    font-size: 4.8rem;
    max-width: 80rem;
    line-height: 1.4;
}


.aboutPage-hero p {
    margin-bottom: 1.2rem;
    white-space: pre-line;
}

@media only screen and (max-width: 48em) {
    .aboutPage-hero>h2 {
        font-size: 3.1rem;
        line-height: 1.35;
    }
}

.ap-curtainSection {
    min-height: 50rem;
    background: #292929;
}

.ap-puzzle {
    padding: 10rem 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media only screen and (max-width: 48em) {
    .ap-puzzle {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }
}

.ap-puzzle--svg {
    width: calc(50% - 3.2rem);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

@media only screen and (max-width: 48em) {
    .ap-puzzle--svg {
        width: 100%;
        margin-top: 4rem;
    }
}

.ap-puzzle--svg svg {
    width: 100%;
    height: 100%;
    display: block;
}

.ap-puzzle--text {
    width: calc(50% - 3.2rem);
}

@media only screen and (max-width: 48em) {
    .ap-puzzle--text {
        width: 100%;
    }
}

.ap-puzzle--text h3 {
    font-size: 4.8rem;
    max-width: 50rem;
    line-height: 1.4;
}

@media only screen and (max-width: 48em) {
    .ap-puzzle--text h3 {
        font-size: 3.1rem;
    }
}

.ap-aboutJc {
    padding-top: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media only screen and (max-width: 48em) {
    .ap-aboutJc {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}

.ap-aboutJc--content {
    width: calc(50% - 3.2rem);
}

@media only screen and (max-width: 48em) {
    .ap-aboutJc--content {
        width: 100%;
    }
}

.ap-aboutJc--content h3 {
    font-size: 3.1rem;
    max-width: 50rem;
    line-height: 1.4;
    margin-bottom: 1.2rem;
}

@media only screen and (max-width: 48em) {
    .ap-aboutJc--content h3 {
        font-size: 2.5rem;
    }
}

.ap-aboutJc--content h3 span {
    color: #07bcff;
}

.ap-aboutJc--content p {
    max-width: 50rem;
}

.ap-aboutJc--img {
    width: calc(50% - 3.2rem);
}

@media only screen and (max-width: 48em) {
    .ap-aboutJc--img {
        width: 100%;
        margin-top: 4rem;
    }
}

.contactPage.contactFormWrapper {
    padding-top: 0;
}

.contactPage.contactFormWrapper .contactForm h2 {
    font-size: 3.1rem;
}

.cp-contactMailsSection {
    margin-top: 12rem;
    position: relative;
}

.cp-contactMailsSection::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: calc(50% - 0.8rem);
    height: 100%;
    background: #292929;
    z-index: 1;
}

@media only screen and (max-width: 48em) {
    .cp-contactMailsSection::after {
        width: 100%;
        height: calc(50% - 0.8rem);
    }
}

.cp-contactMailsSection::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: calc(50% - 0.8rem);
    height: 100%;
    background: #292929;
    z-index: 1;
}

@media only screen and (max-width: 48em) {
    .cp-contactMailsSection::before {
        width: 100%;
        height: calc(50% - 0.8rem);
        top: unset;
        bottom: 0;
    }
}

.cp-contactMailsSection .cp-contactMails {
    padding: 8rem 0;
    position: relative;
    z-index: 5;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media only screen and (max-width: 48em) {
    .cp-contactMailsSection .cp-contactMails {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding: 2rem 0;
    }
}

.cp-contactMailsSection .cp-contactMails>div {
    width: calc(50%-3.2rem);
}

@media only screen and (max-width: 48em) {
    .cp-contactMailsSection .cp-contactMails>div {
        width: 100%;
    }
}

@media only screen and (max-width: 48em) {
    .cp-contactMailsSection .cp-contactMails>div:not(:last-of-type) {
        margin-bottom: 6rem;
    }
}

.cp-contactMailsSection .cp-contactMails h3 {
    font-size: 3.1rem;
    max-width: 48rem;
    line-height: 1.4;
    margin-bottom: 1.2rem;
}

@media only screen and (max-width: 48em) {
    .cp-contactMailsSection .cp-contactMails h3 {
        font-size: 2.5rem;
    }
}

.cp-contactMailsSection .cp-contactMails h4 {
    font-size: 3.9rem;
    margin-bottom: 1.2rem;
}

@media only screen and (max-width: 48em) {
    .cp-contactMailsSection .cp-contactMails h4 {
        font-size: 3.1rem;
    }
}

.cp-contactMailsSection .cp-contactMails a {
    font-size: 3.9rem;
    color: #07bcff;
    font-weight: 600;
}

@media only screen and (max-width: 48em) {
    .cp-contactMailsSection .cp-contactMails a {
        font-size: 2.5rem;
        line-height: 1.35;
    }
}

.animatedPlane-section {
    position: relative;
    height: 45rem;
    margin-bottom: -17.5rem;
}

.animatedPlane-section #plane {
    position: absolute;
    inset: 0;
    width: 100%;
    overflow: hidden;
    overflow-y: hidden;
    z-index: 200;
}

.animatedPlane-section .container {
    height: 100%;
}

.animatedPlane-section .animatedPlane-content {
    position: relative;
    z-index: 1000;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media only screen and (max-width: 48em) {
    .animatedPlane-section .animatedPlane-content {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
        justify-content: space-evenly;
    }
}

.animatedPlane-section .animatedPlane-content--left {
    width: calc(50% - 3.2rem);
}

@media only screen and (max-width: 48em) {
    .animatedPlane-section .animatedPlane-content--left {
        width: 100%;
    }
}

.animatedPlane-section .animatedPlane-content--left h3 {
    font-size: 3.1rem;
    max-width: 48rem;
}

@media only screen and (max-width: 48em) {
    .animatedPlane-section .animatedPlane-content--left h3 {
        font-size: 2.5rem;
    }
}

.animatedPlane-section .animatedPlane-content--right {
    width: calc(50% - 3.2rem);
}

@media only screen and (max-width: 48em) {
    .animatedPlane-section .animatedPlane-content--right {
        width: 100%;
    }
}

.animatedPlane-section .animatedPlane-content--right h3 {
    font-size: 3.1rem;
    max-width: 46rem;
}

@media only screen and (max-width: 48em) {
    .animatedPlane-section .animatedPlane-content--right h3 {
        font-size: 2.5rem;
    }
}

.homepageHero {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 90vh;
    -webkit-transform: translateY(-10vh);
    -ms-transform: translateY(-10vh);
    transform: translateY(-10vh);
    overflow: hidden;
}

@media only screen and (max-width: 48em) {
    .homepageHero {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
}

.homepageHero-heading {
    width: calc(50% - 3.2rem);
}

@media only screen and (max-width: 48em) {
    .homepageHero-heading {
        width: 100%;
        margin-bottom: 4rem;
    }
}

.homepageHero-heading>h1 {
    margin-top: 4.8rem;
    position: relative;
}

.homepageHero-heading>h1>span.heading {
    font-size: 6.1rem;
    display: block;
    line-height: 1.05;
    margin-bottom: 1.2rem;
    overflow: hidden;
}

.homepageHero-heading>h1>span.heading span.gs_reveal {
    display: block;
}

@media only screen and (max-width: 48em) {
    .homepageHero-heading>h1>span.heading {
        font-size: 3.9rem;
    }
}

.homepageHero-heading>h1 span.subHeading {
    display: block;
    font-size: 3.1rem;
    font-weight: 200;
    max-width: 40rem;
    line-height: 1.4;
    position: relative;
}

.homepageHero-heading>h1 span.subHeading span.animatedText {
    display: block;
    width: 25rem;
    height: 10rem;
    position: absolute;
    bottom: 100%;
    left: 70%;
}

@media only screen and (max-width: 48em) {
    .homepageHero-heading>h1 span.subHeading span.animatedText {
        width: 18rem;
        height: 8rem;
        left: unset;
        right: 0;
    }
}

.homepageHero-heading>h1 span.subHeading span.animatedText svg {
    display: block;
    width: 100%;
    stroke-dasharray: 3000;
    stroke-dashoffset: 3000;
}

@media only screen and (max-width: 48em) {
    .homepageHero-heading>h1 span.subHeading {
        font-size: 2.5rem;
    }
}

.homepageHero-eye {
    width: calc(50% - 3.2rem);
    position: relative;
    opacity: 0;
    visibility: hidden;
}

@media only screen and (max-width: 48em) {
    .homepageHero-eye {
        width: 100%;
    }
}

.homepageHero-eye .homepageHero-eye--mobile {
    display: none;
}

@media only screen and (max-width: 48em) {
    .homepageHero-eye .homepageHero-eye--mobile {
        display: block;
    }
}

@media only screen and (max-width: 48em) {
    .homepageHero-eye .homepageHero-eye--desktop {
        display: none;
    }
}

.homepageHero-eye .homepageHero-eye--desktop .eye {
    --pupil-x: 0;
    --pupil-y: 0;
    --color-whites: var(--fg, #fff);
    --color-lid: var(--bg, #fff);
    --color-pupil: var(--bg, #000);
    --color-glint: var(--fg, #fff);
    --scale: 0.55;
    width: 80%;
    fill: none;
    margin: 0 auto;
    display: block;
    -webkit-transform: scale(var(--scale));
    -ms-transform: scale(var(--scale));
    transform: scale(var(--scale));
}

.homepageHero-eye .homepageHero-eye--desktop .lids {
    stroke: var(--color-lid);
    stroke-width: 0;
}

.homepageHero-eye .homepageHero-eye--desktop .whites {
    fill: var(--color-whites);
}

.homepageHero-eye .homepageHero-eye--desktop .pupil {
    fill: var(--color-pupil);
}

.homepageHero-eye .homepageHero-eye--desktop .glint {
    fill: var(--color-glint);
}

.homepageHero-eye .homepageHero-eye--desktop .pupil-group {
    -webkit-transform: translate(calc(var(--pupil-x) * 1px),
            calc(var(--pupil-y) * 1px));
    -ms-transform: translate(calc(var(--pupil-x) * 1px),
            calc(var(--pupil-y) * 1px));
    transform: translate(calc(var(--pupil-x) * 1px),
            calc(var(--pupil-y) * 1px));
}

.homepageHero-eye .homepageHero-eye--desktop #base-eye {
    display: none;
}

.homepage-wwOff {
    position: relative;
    padding: 12rem 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12rem 6.4rem;
}

@media only screen and (max-width: 48em) {
    .homepage-wwOff {
        display: block;
    }
}

.homepage-wwOff span.small-eye {
    display: block;
    position: absolute;
    width: 10rem;
    height: 6rem;
    top: 3rem;
    left: -5rem;
    background: url(../images/svg/small-blue-eye.svg);
    background-repeat: no-repeat;
    background-size: contain;
}

@media only screen and (max-width: 48em) {
    .homepage-wwOff span.small-eye {
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
    }
}

.homepage-wwOff span.whiteLineGoingDown-js {
    position: absolute;
    display: block;
    left: 0;
    bottom: calc(100% - 3rem);
    width: 1px;
    height: 22rem;
    background: #fff;
}

@media only screen and (max-width: 48em) {
    .homepage-wwOff span.whiteLineGoingDown-js {
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        height: 30rem;
    }
}

.homepage-wwOff>h2 {
    font-size: 6.1rem;
    line-height: 1.05;
    font-weight: 700;
    margin-top: -1.6rem;
    max-width: 300px;
}

@media only screen and (max-width: 48em) {
    .homepage-wwOff>h2 {
        font-size: 3.9rem;
    }
}

.homepage-wwOff .homepage-wwOff--items {
    position: relative;
}

@media only screen and (max-width: 48em) {
    .homepage-wwOff .homepage-wwOff--items {
        margin-top: 8rem;
    }
}

.homepage-wwOff .homepage-wwOff--items span.lineWhite {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #fff;
    z-index: 1;
    border-radius: 2px;
}

@media only screen and (max-width: 48em) {
    .homepage-wwOff .homepage-wwOff--items span.lineWhite {
        background-color: #07bcff;
    }
}

.homepage-wwOff .homepage-wwOff--items span.lineBlue {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #07bcff;
    z-index: 2;
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    border-radius: 2px;
    -webkit-transform-origin: left;
    -ms-transform-origin: left;
    transform-origin: left;
    -webkit-transition: 0.4s cubic-bezier(0.33, 1, 0.68, 1);
    -o-transition: 0.4s cubic-bezier(0.33, 1, 0.68, 1);
    transition: 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}

.homepage-wwOff .homepage-wwOff--items:hover span.lineBlue {
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
}

.homepage-wwOff .homepage-wwOff--items .handwrittenEffect {
    position: absolute;
    right: 0;
    bottom: 100%;
    width: 80%;
}

.homepage-wwOff .homepage-wwOff--items .handwrittenEffect svg {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    display: block;
    stroke-width: 1;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}

.homepage-wwOff .homepage-wwOff--items h3 {
    font-size: 3.1rem;
    margin-top: 1.2rem;
}

@media only screen and (max-width: 48em) {
    .homepage-wwOff .homepage-wwOff--items h3 {
        font-size: 2.5rem;
        color: #07bcff;
    }
}

.homepage-wwOff .homepage-wwOff--items:hover h3 {
    color: #07bcff;
}

.homepage-wwOff .homepage-wwOff--items p {
    font-size: 2.5rem;
    line-height: 1.35;
    font-weight: 300;
}

@media only screen and (max-width: 48em) {
    .homepage-wwOff .homepage-wwOff--items p {
        font-size: 2rem;
    }
}

.homepage-magic>h2 {
    font-size: 3.9rem;
    font-weight: 300;
    text-align: center;
    line-height: 1.3;
}

.homepage-magic>h3 {
    font-size: 6.1rem;
    color: #07bcff;
    text-align: center;
    line-height: 1.05;
}

.homepage-magic>.magicQuote {
    width: 50%;
    margin-left: auto;
    padding-top: 8rem;
    padding-bottom: 12rem;
    margin-top: 4rem;
    padding-left: 2.8rem;
    position: relative;
}

@media only screen and (max-width: 48em) {
    .homepage-magic>.magicQuote {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

.homepage-magic>.magicQuote span.whiteLineDown {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background: #fff;
}

.homepage-magic>.magicQuote img {
    width: 8rem;
}

@media only screen and (max-width: 48em) {
    .homepage-magic>.magicQuote img {
        opacity: 0;
    }
}

.homepage-magic>.magicQuote p {
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.45;
    color: #b5b5b5;
    max-width: 500px;
}

@media only screen and (max-width: 48em) {
    .homepage-magic>.magicQuote p {
        opacity: 0;
    }
}

.shadowEye {
    --cursorX: 50vw;
    --cursorY: 50vh;
    min-height: 80vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    cursor: none;
    background-image: url(https://studiomesmer.com/wp-content/uploads/2023/06/eyebg.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

@media only screen and (max-width: 48em) {
    .shadowEye {
        min-height: 40rem;
    }
}

.shadowEye::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: 0.3s ease-in;
    -o-transition: 0.3s ease-in;
    transition: 0.3s ease-in;
    pointer-events: none;
    background: -o-radial-gradient(var(--cursorX) var(--cursorY),
            circle 12vmax,
            rgba(41, 41, 41, 0) 0,
            rgba(41, 41, 41, 0.7) 80%,
            #292929 100%);
    background: radial-gradient(circle 12vmax at var(--cursorX) var(--cursorY),
            rgba(41, 41, 41, 0) 0,
            rgba(41, 41, 41, 0.7) 80%,
            #292929 100%);
}

@media only screen and (max-width: 48em) {
    .shadowEye::before {
        display: none;
    }
}

.shadowEye span.whiteLineDown {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 50%;
    background: #fff;
    z-index: 2;
}

.shadowEye svg {
    position: relative;
    z-index: 5;
    width: 30rem;
}

@media only screen and (max-width: 48em) {
    .shadowEye svg {
        width: 15rem;
    }
}

.shadowEye.mouseLeft::before {
    background: -o-radial-gradient(var(--cursorX) var(--cursorY),
            circle 0.01rem,
            rgba(41, 41, 41, 0) 0,
            rgba(41, 41, 41, 0.7) 80%,
            #292929 100%);
    background: radial-gradient(circle 0.01rem at var(--cursorX) var(--cursorY),
            rgba(41, 41, 41, 0) 0,
            rgba(41, 41, 41, 0.7) 80%,
            #292929 100%);
}

.homepage-portfolio {
    padding-top: 8rem;
    position: relative;
    width: 90%;
    margin: 0 auto;
}

@media only screen and (max-width: 48em) {
    .homepage-portfolio {
        width: 100%;
    }
}

.homepage-portfolio span.whiteLineDown {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    background: #fff;
    z-index: 2;
}

.homepage-portfolio--heading {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-bottom: 8rem;
}

.homepage-portfolio--heading .svgtext {
    width: 50%;
    padding-right: 2.8rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.homepage-portfolio--heading .svgtext img {
    height: 16rem;
}

@media only screen and (max-width: 48em) {
    .homepage-portfolio--heading .svgtext img:first-of-type {
        opacity: 0;
    }

    .homepage-portfolio--heading .svgtext img:last-of-type {
        height: unset;
        width: 10rem;
        -webkit-transform: translateX(-2rem);
        -ms-transform: translateX(-2rem);
        transform: translateX(-2rem);
    }
}

.homepage-portfolio--heading .subHeading {
    width: 50%;
    padding-left: 2.8rem;
}

.homepage-portfolio--heading .subHeading p {
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.45;
    color: #b5b5b5;
    max-width: 300px;
}

@media only screen and (max-width: 48em) {
    .homepage-portfolio--heading .subHeading p {
        display: none;
    }
}

.projectCard {
    background: #292929;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    position: relative;
    z-index: 5;
    border-radius: 1.6rem;
    min-height: 60rem;
    margin-bottom: 10rem;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    cursor: url(../images/cursor.png), pointer;
}

@media only screen and (max-width: 48em) {
    .projectCard {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        background: #000;
        min-height: auto;
        border-radius: 0;
        margin-bottom: 8rem;
    }
}

.projectCard-content {
    width: calc(35% - 1.6rem);
    padding: 4rem 8rem;
    padding-right: 0;
    z-index: 1;
}

@media only screen and (max-width: 48em) {
    .projectCard-content {
        padding: 0;
        width: 100%;
    }
}

.projectCard-content .name {
    font-size: 4.8rem;
    line-height: 1.1;
    margin-bottom: 1.2rem;
    -webkit-transform: translateZ(60px);
    transform: translateZ(60px);
}

@media only screen and (max-width: 48em) {
    .projectCard-content .name {
        font-size: 2.5rem;
    }
}

.projectCard-content .details {
    margin-bottom: 2rem;
    font-size: 2rem;
    line-height: 1.4;
    -webkit-transform: translateZ(65px);
    transform: translateZ(65px);
}

@media only screen and (max-width: 48em) {
    .projectCard-content .details {
        font-size: 1.6rem;
    }
}

.projectCard-content .workIcons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.projectCard-content .workIcons .workIcon-item:not(:last-of-type) {
    margin-right: 2.4rem;
}

.projectCard-content .workIcons .workIcon-item {
    text-align: center;
    text-transform: uppercase;
    font-size: 1.3rem;
    -webkit-transform: translateZ(70px);
    transform: translateZ(70px);
}

.projectCard-content .workIcons .workIcon-item>img {
    margin-bottom: 0.8rem;
}

.projectCard-image {
    width: calc(65% - 1.6rem);
    -ms-flex-item-align: stretch;
    align-self: stretch;
    overflow: hidden;
}

@media only screen and (max-width: 48em) {
    .projectCard-image {
        width: 100%;
        background: #292929;
        border-radius: 1.2rem;
        overflow: hidden;
        margin-bottom: 2rem;
    }
}

.projectCard-image img {
    width: 100%;
    height: 100%;
    display: block;
}

.eyeBtn {
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 12rem;
    min-height: 8rem;
    font-size: 2rem;
    text-align: center;
    font-weight: 600;
    line-height: 1.4;
    -webkit-transition: 0.2s ease-in;
    -o-transition: 0.2s ease-in;
    transition: 0.2s ease-in;
}

.eyeBtn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) scale(1.5);
    -ms-transform: translate(-50%, -50%) scale(1.5);
    transform: translate(-50%, -50%) scale(1.5);
    width: 100%;
    height: 100%;
    background-image: url(../images/svg/eye-button-bg.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    z-index: 5;
    -webkit-transition: 0.2s ease-in;
    -o-transition: 0.2s ease-in;
    transition: 0.2s ease-in;
}

.eyeBtn>span {
    position: relative;
    z-index: 10;
}

.eyeBtn:hover {
    color: #07bcff;
}

.eyeBtn:hover::after {
    -webkit-transform: translate(-50%, -50%) scale(1.7);
    -ms-transform: translate(-50%, -50%) scale(1.7);
    transform: translate(-50%, -50%) scale(1.7);
}

.homepage-exp {
    padding: 8rem 0;
    width: 90%;
    margin: 0 auto;
}

@media only screen and (max-width: 48em) {
    .homepage-exp {
        width: 100%;
    }
}

.homepage-exp>h2 {
    color: #292929;
    margin-bottom: 2.4rem;
    font-size: 6.1rem;
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: -4px;
}

@media only screen and (max-width: 48em) {
    .homepage-exp>h2 {
        font-size: 7rem;
        line-height: 1;
    }
}

.homepage-exp .homepage-exp--grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
    gap: 3.2rem;
    position: relative;
}

@media only screen and (max-width: 48em) {
    .homepage-exp .homepage-exp--grid {
        display: block;
    }
}

.homepage-exp .homepage-exp--grid .expCard:nth-of-type(3n-1) {
    margin-top: 6rem;
}

@media only screen and (max-width: 48em) {
    .homepage-exp .homepage-exp--grid .expCard:nth-of-type(3n-1) {
        margin-top: 0;
        margin-bottom: 4rem;
    }
}

.homepage-exp .homepage-exp--grid .expCard:nth-of-type(3n) {
    margin-top: 12rem;
}

@media only screen and (max-width: 48em) {
    .homepage-exp .homepage-exp--grid .expCard:nth-of-type(3n) {
        margin-top: 0;
        margin-bottom: 4rem;
    }
}

.homepage-exp .homepage-exp--grid::before {
    content: '';
    position: absolute;
    width: 1px;
    height: 6.4rem;
    background: #fff;
    bottom: -6.4rem;
    right: 8.8rem;
}

@media only screen and (max-width: 48em) {
    .homepage-exp .homepage-exp--grid::before {
        right: 50%;
    }
}

.homepage-exp>.eyeBtn.expBtn {
    margin-left: auto;
    margin-right: unset;
    -webkit-transform: translateX(-2.4rem);
    -ms-transform: translateX(-2.4rem);
    transform: translateX(-2.4rem);
    margin-top: 6.4rem;
    position: relative;
}

@media only screen and (max-width: 48em) {
    .homepage-exp>.eyeBtn.expBtn {
        margin-right: auto;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
}

.expCard {
    background: #292929;
    border-radius: 1.6rem;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    cursor: url(../images/cursor.png), pointer;
}

@media only screen and (max-width: 48em) {
    .expCard {
        margin-top: 0;
        margin-bottom: 4rem;
    }
}

.expCard-image {
    width: 100%;
}

.expCard-image img {
    width: 100%;
}

.expCard-content {
    padding: 2rem;
}

.expCard-content h3 {
    font-size: 3.1rem;
    -webkit-transform: translateZ(20px);
    transform: translateZ(20px);
}

.expCard-content p {
    font-size: 2rem;
    line-height: 1.35;
    -webkit-transform: translateZ(20px);
    transform: translateZ(20px);
    font-weight: 300;
}

.homepage-testimonial {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    padding-top: 20rem;
    padding-bottom: 4rem;
    position: relative;
    width: 90%;
    margin: 0 auto;
    overflow-x: hidden;
    overflow-y: hidden;
}

@media only screen and (max-width: 48em) {
    .homepage-testimonial {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding-top: 4rem;
    }
}

.homepage-testimonial::after {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    padding-top: 100%;
    background: url(../images/globe.png);
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.4;
    -webkit-animation: spin 30s linear infinite alternate;
    animation: spin 30s linear infinite alternate;
}

@media only screen and (max-width: 48em) {
    .homepage-testimonial::after {
        top: unset;
        bottom: -50%;
    }
}

.homepage-testimonial--left {
    width: calc(50% - 3.2rem);
    -ms-flex-item-align: center;
    align-self: center;
}

@media only screen and (max-width: 48em) {
    .homepage-testimonial--left {
        width: 100%;
        margin-bottom: 4rem;
    }
}

.homepage-testimonial--left h2 {
    font-size: 3.9rem;
    max-width: 90%;
    line-height: 1.3;
}

@media only screen and (max-width: 48em) {
    .homepage-testimonial--left h2 {
        text-align: center;
        font-size: 2.5rem;
        max-width: 100%;
    }
}

.homepage-testimonial--right {
    position: relative;
    overflow: hidden;
    overflow: hidden !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    width: calc(50% - 3.2rem);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

@media only screen and (max-width: 48em) {
    .homepage-testimonial--right {
        width: 100%;
    }
}

.homepage-testimonial--right span.whiteLine {
    display: block;
    position: absolute;
    width: 100%;
    height: 1px;
    background: #fff;
    bottom: 0.2rem;
    left: 0;
    -webkit-transform: translateX(0) scaleX(0);
    -ms-transform: translateX(0) scaleX(0);
    transform: translateX(0) scaleX(0);
    -webkit-transform-origin: left;
    -ms-transform-origin: left;
    transform-origin: left;
    -webkit-animation: scale-in 6s linear infinite;
    animation: scale-in 6s linear infinite;
    opacity: 0.5;
}

.homepage-testimonial--right .testimonialBlock {
    position: relative;
    width: 100%;
    min-width: 100%;
    grid-column: 1/-1;
    grid-row: 1/2;
    padding-bottom: 2rem;
}

.homepage-testimonial--right .testimonialBlock .blockDetails {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 1.2rem;
}

.homepage-testimonial--right .testimonialBlock .blockDetails>img {
    margin-right: 1.6rem;
}

@media only screen and (max-width: 48em) {
    .homepage-testimonial--right .testimonialBlock .blockDetails>img {
        -o-object-fit: contain;
        object-fit: contain;
    }
}

.homepage-testimonial--right .testimonialBlock .blockDetails h3 {
    font-size: 3.9rem;
    line-height: 1.3;
    opacity: 0;
    -webkit-filter: blur(4px);
    filter: blur(4px);
}

@media only screen and (max-width: 48em) {
    .homepage-testimonial--right .testimonialBlock .blockDetails h3 {
        font-size: 2.5rem;
    }
}

.homepage-testimonial--right .testimonialBlock .blockDetails p {
    font-size: 2.5rem;
    font-weight: 600;
    opacity: 0;
    -webkit-filter: blur(4px);
    filter: blur(4px);
}

@media only screen and (max-width: 48em) {
    .homepage-testimonial--right .testimonialBlock .blockDetails p {
        font-size: 2rem;
    }
}

.homepage-testimonial--right .testimonialBlock .blockText {
    opacity: 0;
    -webkit-filter: blur(4px);
    filter: blur(4px);
    position: relative;
}

.homepage-testimonial--right .testimonialBlock.activeTestimonial .blockDetails h3 {
    -webkit-animation: fade-in 0.8s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
    animation: fade-in 0.8s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.homepage-testimonial--right .testimonialBlock.activeTestimonial .blockDetails p {
    -webkit-animation: fade-in 0.8s 0.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
    animation: fade-in 0.8s 0.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.homepage-testimonial--right .testimonialBlock.activeTestimonial .blockText {
    -webkit-animation: fade-in 0.8s 0.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
    animation: fade-in 0.8s 0.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

@keyframes fade-in {
    0% {
        opacity: 0;
        -webkit-filter: blur(4px);
        filter: blur(4px);
    }

    100% {
        opacity: 1;
        -webkit-filter: blur(0);
        filter: blur(0);
    }
}

@keyframes scale-in {
    0% {
        -webkit-transform: translateX(0) scaleX(0);
        transform: translateX(0) scaleX(0);
    }

    50% {
        -webkit-transform: translateX(0) scaleX(1);
        transform: translateX(0) scaleX(1);
    }

    100% {
        -webkit-transform: translateX(100%) scaleX(0);
        transform: translateX(100%) scaleX(0);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(-25deg);
        transform: rotate(-25deg);
    }

    100% {
        -webkit-transform: rotate(25deg);
        transform: rotate(25deg);
    }
}

.homepage-clientsLogo {
    background: #292929;
    position: relative;
}

.homepage-clientsLogo .homepage-clientsLogo--wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 8rem 0;
}

@media only screen and (max-width: 48em) {
    .homepage-clientsLogo .homepage-clientsLogo--wrapper {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-left: -1rem;
        margin-right: -1rem;
    }
}

.homepage-clientsLogo .homepage-clientsLogo--wrapper img {
    height: 5rem;
    display: block;
}

@media only screen and (max-width: 48em) {
    .homepage-clientsLogo .homepage-clientsLogo--wrapper img {
        height: unset;
        width: 40%;
        margin: 1rem;
    }
}

.homepage-clientsLogo .eyeBtn.logoEyeBtn {
    position: absolute;
    left: 50%;
    bottom: -16rem;
    z-index: 10;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.homepage-clientsLogo::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 12rem;
    left: 50%;
    top: 100%;
    z-index: 5;
    background: #fff;
}

.contactFormWrapper {
    padding-top: 15rem;
}

.contactForm {
    max-width: 80ch;
    margin: 0 auto;
}

.contactForm br {
    display: none;
}

.contactForm>h2 {
    font-size: 4.8rem;
    margin-bottom: 2.4rem;
}

@media only screen and (max-width: 48em) {
    .contactForm>h2 {
        font-size: 3.1rem;
    }
}

.contactForm-form {
    position: relative;
}

.contactForm-form::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 15rem;
    left: 50%;
    bottom: 0;
    z-index: 5;
    background: #fff;
}

.contactForm-form p {
    font-size: 3rem;
    font-weight: 500;
    line-height: 1.8;
}

@media only screen and (max-width: 48em) {
    .contactForm-form p {
        font-size: 2rem;
    }
}

.contactForm-form p .formField {
    display: inline-block;
    font-size: inherit;
}

@media only screen and (max-width: 48em) {
    .contactForm-form p .formField {
        display: block;
        width: 100%;
        margin-top: 0.8rem;
    }
}

.contactForm-form p .formField input {
    display: inline-block;
    padding: 0.8rem 1.2rem;
    background: #292929;
    border: none;
    border-radius: 6px;
    min-width: 20rem;
    -webkit-transform: translateY(-4px);
    -ms-transform: translateY(-4px);
    transform: translateY(-4px);
    font-size: 2rem;
    font-family: inherit;
    font-weight: 400;
    color: #fff;
    position: relative;
    z-index: 10;
}

@media only screen and (max-width: 48em) {
    .contactForm-form p .formField input {
        display: block;
        width: 100%;
    }
}

.contactForm-form p .formField input::-webkit-input-placeholder {
    color: #000;
    opacity: 1;
}

.contactForm-form p .formField input::-moz-placeholder {
    color: #000;
    opacity: 1;
}

.contactForm-form p .formField input:-ms-input-placeholder {
    color: #000;
    opacity: 1;
}

.contactForm-form p .formField input::-ms-input-placeholder {
    color: #000;
    opacity: 1;
}

.contactForm-form p .formField input::placeholder {
    color: #000;
    opacity: 1;
}

.contactForm-form p .formField input:-ms-input-placeholder {
    color: #000;
}

.contactForm-form p .formField input::-ms-input-placeholder {
    color: #000;
}

.contactForm-form p .formField input:focus {
    outline: 0;
}

.contactForm-form p .formField.messageInput {
    display: block;
    width: 100%;
}

.contactForm-form p .formField.messageInput input {
    width: 100%;
}

.contactForm-form .submitBtn {
    margin-top: 6rem;
    border: none;
    background: 0 0;
    position: relative;
    z-index: 10;
    color: #fff;
    font-family: inherit;
    font-size: 2rem;
    cursor: pointer;
    width: 10rem;
    height: 8rem;
}

.contactForm-form .submitBtn input {
    position: relative;
    z-index: 20;
    color: #fff;
    font-family: inherit;
    font-size: 2rem;
    background: 0 0;
    border: none;
    cursor: pointer;
    font-weight: 600;
    white-space: pre-wrap;
}

.contactForm-form .submitBtn:hover {
    color: #07bcff;
}

.pp-projectHero {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media only screen and (max-width: 48em) {
    .pp-projectHero {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }
}

.pp-projectHero--left {
    width: calc(50% - 3.2rem);
}

@media only screen and (max-width: 48em) {
    .pp-projectHero--left {
        width: 100%;
    }
}

.pp-projectHero--left h2 {
    font-size: 4.8rem;
    margin-bottom: 0.8rem;
}

@media only screen and (max-width: 48em) {
    .pp-projectHero--left h2 {
        font-size: 3.9rem;
    }
}

.pp-projectHero--left h3 {
    font-size: 3.1rem;
    font-weight: 300;
    max-width: 50rem;
    line-height: 1.4;
}

@media only screen and (max-width: 48em) {
    .pp-projectHero--left h3 {
        font-size: 2.5rem;
    }
}

.pp-projectHero--right {
    width: calc(50% - 3.2rem);
    height: 500px;
}

@media only screen and (max-width: 48em) {
    .pp-projectHero--right {
        width: 100%;
        height: auto;
        padding: 4rem 0;
    }
}

.pp-projectHero--right canvas {
    display: block;
    width: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    height: 100%;
}

.pp-projectsGridWrapper {
    padding-top: 10rem;
}

@media only screen and (max-width: 48em) {
    .pp-projectsGridWrapper {
        padding-top: 8rem;
    }
}

.filterableProjectGrid-buttonWrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    margin-bottom: 4rem;
    /*  Remove below to show filter buttons */
    display: none;
}

@media only screen and (max-width: 48em) {
    .filterableProjectGrid-buttonWrapper {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        /*  Remove below to show filter buttons */
        display: none;
    }
}

.filterableProjectGrid-buttonWrapper>p {
    width: 10%;
    font-size: 2rem;
    padding: 0.4rem 0;
}

@media only screen and (max-width: 48em) {
    .filterableProjectGrid-buttonWrapper>p {
        width: 100%;
        margin-bottom: 1.6rem;
    }
}

.filterableProjectGrid-buttonWrapper>div {
    width: 90%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

@media only screen and (max-width: 48em) {
    .filterableProjectGrid-buttonWrapper>div {
        width: 100%;
    }
}

.filterableProjectGrid-buttonWrapper>div button {
    width: 23%;
    display: block;
    font-family: inherit;
    font-size: 2rem;
    background: #292929;
    border: none;
    color: #fff;
    padding: 0.8rem;
    border-radius: 1rem;
    position: relative;
    margin-bottom: 2.4rem;
}

@media only screen and (max-width: 48em) {
    .filterableProjectGrid-buttonWrapper>div button {
        width: calc(50% - 0.8rem);
        margin-bottom: 1.6rem;
    }
}

.filterableProjectGrid-buttonWrapper>div button.is-checked {
    background: #07bcff;
}

.filterableProjectGrid-buttonWrapper>div button.is-checked::after {
    content: '\2573';
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 0.6rem;
    top: -0.8rem;
    right: -0.8rem;
    width: 2.4rem;
    height: 2.4rem;
    background: #07bcff;
    border: 2px solid #000;
    border-radius: 5rem;
    font-weight: 900;
    line-height: 1;
}

.filterableProjectGrid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.filterableProjectGrid .element-item {
    display: block;
    width: calc(50% - 2rem);
}

@media only screen and (max-width: 48em) {
    .filterableProjectGrid .element-item {
        width: 100%;
    }
}

.filterableProjectGrid .element-item .projectCard {
    margin-bottom: 4rem;
    min-height: auto;
}

.filterableProjectGrid .element-item .projectCard-content {
    width: calc(45% - 1.2rem);
    padding: 4rem;
    padding-right: 0;
    -ms-flex-item-align: end;
    align-self: flex-end;
}

@media only screen and (max-width: 48em) {
    .filterableProjectGrid .element-item .projectCard-content {
        width: 100%;
        padding: 0;
    }
}

.filterableProjectGrid .element-item .projectCard-content .name {
    font-size: 2rem;
}

@media only screen and (max-width: 48em) {
    .filterableProjectGrid .element-item .projectCard-content .name {
        font-size: 2.5rem;
    }
}

.filterableProjectGrid .element-item .projectCard-content .details {
    margin-bottom: 2rem;
    font-size: 1.6rem;
}

.filterableProjectGrid .element-item .projectCard-content .workIcons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.filterableProjectGrid .element-item .projectCard-content .workIcons .workIcon-item:not(:last-of-type) {
    margin-right: 1.2rem;
}

.filterableProjectGrid .element-item .projectCard-content .workIcons img {
    width: 2rem;
    height: 2rem;
}

.filterableProjectGrid .element-item .projectCard-content .workIcons p {
    font-size: 1.4rem;
}

.filterableProjectGrid .element-item .projectCard-image {
    width: calc(55% - 1.2rem);
    -ms-flex-item-align: stretch;
    align-self: stretch;
    min-height: 35rem;
    overflow: hidden;
}

@media only screen and (max-width: 48em) {
    .filterableProjectGrid .element-item .projectCard-image {
        width: 100%;
        background: #292929;
        border-radius: 1.2rem;
        overflow: hidden;
        margin-bottom: 2rem;
        min-height: auto;
    }
}

.filterableProjectGrid .element-item .projectCard-image img {
    width: 100%;
    height: 100%;
    display: block;
}

.filterableProjectGrid .element-item:nth-of-type(3n-1) {
    margin-left: 4rem;
}

@media only screen and (max-width: 48em) {
    .filterableProjectGrid .element-item:nth-of-type(3n-1) {
        margin-left: 0;
    }
}

.filterableProjectGrid .element-item:nth-of-type(3n) {
    width: 100%;
}

.filterableProjectGrid .element-item:nth-of-type(3n) .projectCard {
    background: #292929;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    position: relative;
    z-index: 5;
    border-radius: 1.6rem;
    margin-bottom: 4rem;
    min-height: 60rem;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    cursor: url(../images/cursor.png), pointer;
}

@media only screen and (max-width: 48em) {
    .filterableProjectGrid .element-item:nth-of-type(3n) .projectCard {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        background: #000;
        min-height: auto;
        border-radius: 0;
        margin-bottom: 8rem;
    }
}

.filterableProjectGrid .element-item:nth-of-type(3n) .projectCard-content {
    width: calc(40% - 1.6rem);
    padding: 4rem 8rem;
    padding-right: 0;
}

@media only screen and (max-width: 48em) {
    .filterableProjectGrid .element-item:nth-of-type(3n) .projectCard-content {
        padding: 0;
        width: 100%;
    }
}

.filterableProjectGrid .element-item:nth-of-type(3n) .projectCard-content .name {
    font-size: 4.8rem;
    line-height: 1.1;
    margin-bottom: 1.2rem;
    -webkit-transform: translateZ(60px);
    transform: translateZ(60px);
}

@media only screen and (max-width: 48em) {
    .filterableProjectGrid .element-item:nth-of-type(3n) .projectCard-content .name {
        font-size: 2.5rem;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

.filterableProjectGrid .element-item:nth-of-type(3n) .projectCard-content .details {
    margin-bottom: 2rem;
    font-size: 2rem;
    line-height: 1.4;
    -webkit-transform: translateZ(65px);
    transform: translateZ(65px);
}

@media only screen and (max-width: 48em) {
    .filterableProjectGrid .element-item:nth-of-type(3n) .projectCard-content .details {
        font-size: 1.6rem;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

.filterableProjectGrid .element-item:nth-of-type(3n) .projectCard-content .workIcons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.filterableProjectGrid .element-item:nth-of-type(3n) .projectCard-content .workIcons .workIcon-item:not(:last-of-type) {
    margin-right: 2.4rem;
}

@media only screen and (max-width: 48em) {
    .filterableProjectGrid .element-item:nth-of-type(3n) .projectCard-content .workIcons .workIcon-item:not(:last-of-type) {
        margin-right: 1.2rem;
    }
}

.filterableProjectGrid .element-item:nth-of-type(3n) .projectCard-content .workIcons .workIcon-item {
    text-align: center;
    text-transform: uppercase;
    font-size: 1.3rem;
    -webkit-transform: translateZ(70px);
    transform: translateZ(70px);
}

@media only screen and (max-width: 48em) {
    .filterableProjectGrid .element-item:nth-of-type(3n) .projectCard-content .workIcons .workIcon-item {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

.filterableProjectGrid .element-item:nth-of-type(3n) .projectCard-content .workIcons .workIcon-item>img {
    margin-bottom: 0.8rem;
}

.filterableProjectGrid .element-item:nth-of-type(3n) .projectCard-content .workIcons img {
    width: 4rem;
    height: 4rem;
}

@media only screen and (max-width: 48em) {
    .filterableProjectGrid .element-item:nth-of-type(3n) .projectCard-content .workIcons img {
        width: 2rem;
        height: 2rem;
    }
}

.filterableProjectGrid .element-item:nth-of-type(3n) .projectCard-content .workIcons p {
    font-size: 1.6rem;
}

@media only screen and (max-width: 48em) {
    .filterableProjectGrid .element-item:nth-of-type(3n) .projectCard-content .workIcons p {
        font-size: 1.4rem;
    }
}

.filterableProjectGrid .element-item:nth-of-type(3n) .projectCard-image {
    width: calc(55% - 1.6rem);
    -ms-flex-item-align: stretch;
    align-self: stretch;
    overflow: hidden;
}

@media only screen and (max-width: 48em) {
    .filterableProjectGrid .element-item:nth-of-type(3n) .projectCard-image {
        width: 100%;
        background: #292929;
        border-radius: 1.2rem;
        overflow: hidden;
        margin-bottom: 2rem;
    }
}

.filterableProjectGrid .element-item:nth-of-type(3n) .projectCard-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

@media only screen and (max-width: 48em) {
    .exppp-expGridWrapper {
        margin-top: 8rem;
    }
}

.exppp-expGridWrapper .exppage-exp--grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
    gap: 4rem;
    position: relative;
}

@media only screen and (max-width: 48em) {
    .exppp-expGridWrapper .exppage-exp--grid {
        display: block;
    }
}

.exppp-expGridWrapper .exppage-exp--grid .expCard:nth-of-type(3n-1) {
    margin-top: 6rem;
}

@media only screen and (max-width: 48em) {
    .exppp-expGridWrapper .exppage-exp--grid .expCard:nth-of-type(3n-1) {
        margin-top: 0;
        margin-bottom: 4rem;
    }
}

.exppp-expGridWrapper .exppage-exp--grid .expCard:nth-of-type(3n) {
    margin-top: 12rem;
}

@media only screen and (max-width: 48em) {
    .exppp-expGridWrapper .exppage-exp--grid .expCard:nth-of-type(3n) {
        margin-top: 0;
        margin-bottom: 4rem;
    }
}

.spd-bannerwithContent .container {
    --fixed-width: 1200px;
    --right-width: 55%;
    --left-width: 45%;
    max-width: var(--fixed-width);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 90vh;
    gap: 2rem;
}

@media only screen and (max-width: 62em) {
    .spd-bannerwithContent .container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        min-height: auto;
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

@media only screen and (max-width: 48em) {
    .spd-bannerwithContent .container {
        padding-bottom: 0;
    }

    .spd-bannerwithContent .container .spd-bannerwithContent--left {
        margin-bottom: 3rem;
    }
}

.spd-bannerwithContent .container .spd-bannerwithContent--left {
    min-width: var(--left-width);
    width: var(--left-width);
    position: relative;
}

@media only screen and (max-width: 62em) {
    .spd-bannerwithContent .container .spd-bannerwithContent--left {
        width: 100%;
    }
}

.spd-bannerwithContent .container .spd-bannerwithContent--left h1 {
    font-size: 6.1rem;
    line-height: 1;
    margin-bottom: 2rem;
}

@media only screen and (max-width: 48em) {
    .spd-bannerwithContent .container .spd-bannerwithContent--left h1 {
        font-size: 3.9rem;
    }
}

.spd-bannerwithContent .container .spd-bannerwithContent--left h2 {
    font-size: 2.5rem;
    line-height: 1.5;
    margin-bottom: 2rem;
}

@media only screen and (max-width: 48em) {
    .spd-bannerwithContent .container .spd-bannerwithContent--left h2 {
        font-size: 2rem;
    }
}

.spd-bannerwithContent .container .spd-bannerwithContent--left .workIcons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.spd-bannerwithContent--right img {
    height: auto;
    width: 100%;
    height: 100%;
}

.spd-bannerwithContent .container .spd-bannerwithContent--left .workIcons .workIcon-item:not(:last-of-type) {
    margin-right: 2.4rem;
}

.spd-bannerwithContent .container .spd-bannerwithContent--left .workIcons .workIcon-item {
    text-align: center;
    text-transform: uppercase;
    font-size: 1.3rem;
    -webkit-transform: translateZ(70px);
    transform: translateZ(70px);
}

.spd-bannerwithContent .container .spd-bannerwithContent--left .workIcons .workIcon-item>img {
    margin-bottom: 0.8rem;
}

.spd-bannerwithContent .container .spd-bannerwithContent--right {
    position: relative;
    width: var(--right-width);
    /* min-width: calc(var(--right-width) + (100vw - var(--fixed-width)) / 2); */
}

@media only screen and (max-width: 62em) {
    .spd-bannerwithContent .container .spd-bannerwithContent--right {
        width: 100%;
        margin-bottom: 2rem;
    }
}

.sp-Brief {
    margin-top: 8rem;
    margin-bottom: 8rem;
    max-width: 50ch;
    font-size: 2rem;
}

@media only screen and (max-width: 48em) {
    .sp-Brief {
        margin-top: 4rem;
        margin-bottom: 4rem;
    }
}

.sp-Brief h3 {
    font-size: 3.1rem;
    margin-bottom: 1.2rem;
}

.sp-Brief p:not(:last-of-type) {
    margin-bottom: 3.2rem;
}

.sp-headingWithSingleImage {
    margin-bottom: 8rem;
}

.sp-headingWithSingleImage--heading h2 {
    font-size: 4.8rem;
    max-width: 70rem;
    line-height: 1.3;
    margin-bottom: 1.6rem;
}

@media only screen and (max-width: 48em) {
    .sp-headingWithSingleImage--heading h2 {
        font-size: 3.9rem;
    }
}

.sp-headingWithSingleImage--heading h3 {
    font-size: 3.1rem;
    margin-bottom: 4rem;
}

@media only screen and (max-width: 48em) {
    .sp-headingWithSingleImage--heading h3 {
        font-size: 2.5rem;
    }
}

.sp-centerHeadingWithContent {
    padding: 8rem 0;
    text-align: center;
    max-width: 80rem;
    margin: 0 auto;
    font-size: 2rem;
}

.sp-centerHeadingWithContent h3 {
    font-size: 3.1rem;
    margin-bottom: 2.4rem;
}

.sp-centerHeadingWithContent p:not(:last-of-type) {
    margin-bottom: 1.6rem;
}

.sp-projectIcons {
    margin-top: 8rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-left: -2rem;
    margin-right: -2rem;
}

.sp-projectIcons--items {
    width: 15%;
    margin: 2rem;
    text-align: center;
}

.sp-projectIcons--items img {
    width: 8rem;
    margin: auto;
    margin-bottom: 1.2rem;
}

.sp-projectIcons--items p {
    font-size: 2rem;
    font-weight: 600;
}

.sp-ImageWithOverlappingHeading {
    width: 85%;
    margin: 8rem auto;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: 1fr;
}

@media only screen and (max-width: 48em) {
    .sp-ImageWithOverlappingHeading {
        width: 100%;
    }
}

.sp-ImageWithOverlappingHeading--heading {
    position: relative;
    grid-column: 1/5;
    grid-row: 1/-1;
    z-index: 10;
    padding-top: 4rem;
}

@media only screen and (max-width: 48em) {
    .sp-ImageWithOverlappingHeading--heading {
        padding-top: 1.2rem;
    }
}

.sp-ImageWithOverlappingHeading--heading h2 {
    font-size: 4.8rem;
    max-width: 40rem;
    margin-bottom: 1.2rem;
}

@media only screen and (max-width: 48em) {
    .sp-ImageWithOverlappingHeading--heading h2 {
        font-size: 3.1rem;
    }
}

.sp-ImageWithOverlappingHeading--heading .whiteLinetoright {
    display: block;
    max-width: 40rem;
    height: 2px;
    background: #fff;
}

.sp-ImageWithOverlappingHeading--image {
    grid-column: 3/9;
    grid-row: 1/-1;
}

.sp-twoColumnImage {
    margin-top: 8rem;
    margin-bottom: 4rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    z-index: 20;
}

@media only screen and (max-width: 48em) {
    .sp-twoColumnImage {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}

.sp-twoColumnImage--image {
    width: calc(50% - 2rem);
}

@media only screen and (max-width: 48em) {
    .sp-twoColumnImage--image {
        width: 100%;
    }

    .sp-twoColumnImage--image:last-of-type {
        margin-top: 2rem;
    }
}

.animatedImageOverlayWrapper {
    position: relative;
    overflow: hidden;
}

.animatedImageOverlayWrapper .animatedImageOverlay {
    position: absolute;
    inset: 0;
    background: #000;
}

body.lightProject {
    background: #fff;
    position: relative;
}

body.lightProject nav {
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

body.lightProject nav .nav-logo svg path {
    fill: #000;
}

body.lightProject nav .nav-links--item {
    color: #000;
}

body.lightProject nav .nav-links--item::after {
    background: #000;
}

body.lightProject nav .nav-links--item span.linkDesc {
    color: #292929 !important;
}

body.lightProject nav .mobileMenu-container .nav-menuBtn .menu svg path {
    stroke: #000;
}

body.lightProject section {
    background: #fff;
    color: #000;
}

body.lightProject .spd-bannerwithContent {
    background: #efefef;
}

body.lightProject .spd-bannerwithContent .container {
    min-height: 100vh;
    padding-top: 8rem;
}

body.lightProject .Section.bg-grey {
    background: #efefef;
}

body.lightProject .sp-ImageWithOverlappingHeading--heading .whiteLinetoright {
    background: #000;
}

body.lightProject .footerDripping {
    background: #fff;
}

body.lightProject .footerDripping .drip {
    background: #fff;
}

body.lightProject .footerDripping .dripit,
body.lightProject .footerDripping .drop,
body.lightProject .footerDripping .droplet,
body.lightProject .footerDripping .droplet2 {
    background: #fff;
}

body.lightProject .animatedImageOverlayWrapper {
    position: relative;
    overflow: hidden;
}

body.lightProject .animatedImageOverlayWrapper .animatedImageOverlay {
    position: absolute;
    inset: 0;
    background: #fff;
}

.wp-block-embed.is-type-video.is-provider-youtube.wp-block-embed-youtube {
    margin-left: auto;
    margin-right: auto;
    width: 70%;
}

@media only screen and (max-width: 48em) {
    .wp-block-embed.is-type-video.is-provider-youtube.wp-block-embed-youtube {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        padding: 0 5vw;
    }
}

.wp-block-embed__wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%;
}

.wp-block-embed__wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* !===================================== */
/* !SaaS page =========================== */
/* !===================================== */

/*! ======================fonts ============================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@font-face {
    font-family: 'Visby Round CF';
    src: url('https://studiomesmer.com/wp-content/themes/mesmer/saas-assets/Fonts/Visby-Round/Webfont/VisbyRoundCF-Regular.woff2');
    font-weight: normal;
}

@font-face {
    font-family: 'Visby Round CF';
    src: url('https://studiomesmer.com/wp-content/themes/mesmer/saas-assets/Fonts/Visby-Round/Webfont/VisbyRoundCF-Medium.woff2');
    font-weight: medium;
}

@font-face {
    font-family: 'Visby Round CF Bold';
    src: url('https://studiomesmer.com/wp-content/themes/mesmer/saas-assets/Fonts/Visby-Round/Webfont/VisbyRoundCF-DemiBold.woff2');
    font-weight: bold;
}

@font-face {
    font-family: 'Visby Round CF Bolder';
    src: url('https://studiomesmer.com/wp-content/themes/mesmer/saas-assets/Fonts/Visby-Round/Webfont/VisbyRoundCF-ExtraBold.woff2');
    font-weight: bolder;
}

:root {
    --VisbyRoundCF: 'Visby Round CF';
    --VisbyRoundCFBold: 'Visby Round CF Bold';
    --VisbyRoundCFBolder: 'Visby Round CF Bolder';
    --Barlow: 'Barlow';
}

/************************** Defaults ********************/
/***********************************************************/

*,
*:before,
*:after {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
}

body {
    visibility: hidden;
    -webkit-text-size-adjust: 100%;
    background-color: #000000;
}

html {
    font-size: 62.5%;
    overflow-x: hidden;
}

input,
textarea,
button,
select,
a,
div,
li {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    appearance: none;
}

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
}

li {
    list-style: none;
}

.section {
    margin: 0 auto;
    width: 100%;
}

/* !==================================== */
/* !Banner ============================= */
/* !==================================== */

/* !header ============================  */

.header {
    position: relative;
    padding: 6.2rem 0 0 7.5rem;
}

/* !Banner============================  */

.saas_banner {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 5.7rem 7.5rem 0 7.5rem;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    visibility: hidden;
    /* margin-top: -13.4rem; */
}

.saas_banner .text {
    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;
}

.saas_banner .text .box {
    position: relative;
    border: 1px solid #0d92bc;
    padding: 0.9rem;
    margin-bottom: 1.5rem;
}

.saas_banner .box div {
    position: absolute;

    width: 6px;
    height: 6px;

    background: #ffffff;
    border: 1px solid #0d92bc;
}

.saas_banner .box .tLeft {
    position: absolute;
    top: 0%;
    left: 0%;
    transform: translate(-50%, -50%);
}

.saas_banner .box .tRight {
    position: absolute;
    top: 0%;
    right: 0%;
    transform: translate(50%, -50%);
}

.saas_banner .box .bLeft {
    position: absolute;
    bottom: 0%;
    left: 0%;
    transform: translate(-50%, 50%);
}

.saas_banner .box .bRight {
    position: absolute;
    bottom: 0%;
    right: 0%;
    transform: translate(50%, 50%);
}

.saas_banner h1 {
    font-family: VisbyRoundCF;
    font-style: normal;
    font-weight: 700;
    font-size: 5.7rem;
    line-height: 8.2rem;

    color: #ffffff;
    margin-bottom: 1.6rem;
    text-align: center;
}

.saas_banner h2 {
    font-family: VisbyRoundCF;
    font-style: normal;
    font-weight: 700;
    font-size: 5.7rem;
    line-height: 1;

    color: #ffffff;
    text-align: center;
}

.saas_banner p {
    font-family: VisbyRoundCF;
    font-style: normal;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 2.7rem;
    /* or 193% */

    text-align: center;

    color: #ffffff;
}

.saas_banner .saas_banner_image {
    width: 100%;
    height: 100%;
    margin-top: 8rem;
}

.saas_banner .saas_banner_image video {
    width: 100%;
    height: 100%;
}

/* !brands ===========================  */

.saas_brands {
    position: relative;
    padding: 13.1rem 7.5rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 4.5rem;
    flex-grow: 1;
    flex-basis: 0;
}

.saas_brands h1 {
    font-family: var(--Barlow);
    font-style: normal;
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 2.2rem;
    /* identical to box height */

    text-align: center;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: #a5a5a5;
    margin-bottom: 4.5rem;
}

.saas_brands .box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* gap: 4.6rem; */
    border-right: 1px solid #6c6868;
    padding-right: 4.5rem;
    min-height: 42rem;
}

.saas_brands .box .items {
    position: relative;
    display: flex;
    flex-direction: column;

    justify-content: space-between;
    align-items: center;
    gap: 4.6rem;
    min-height: 35rem;
}

.saas_brands .box .items img {
    align-self: center;
    object-fit: contain;
}

.saas_brands .box:last-child {
    border-right: none;
}

/* !featured  */

/* marquee 1 =================== */

.saas_featured {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3.5rem;
    flex-direction: row;
    padding: 5rem 7.5rem;
}

.saas_featured h1 {
    font-family: var(--Barlow);
    font-style: normal;
    font-weight: 600;
    font-size: 2rem;
    line-height: 2.5rem;

    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: #a5a5a5;
    white-space: nowrap;
}

.saas_featured .c1 {
    position: relative;
    display: flex;
    justify-content: flex-start;
    width: 80%;
    overflow: hidden;
}

.saas_featured .c1 .f-marquee-1-1 {
    /* border: 2px solid red; */
    display: flex;
    justify-content: flex-start;
    flex-shrink: 0;
    animation: marqueeToLeft 40s linear infinite;
}

.saas_featured .c1 .f-marquee-1-2 {
    /* border: 2px solid green; */

    display: flex;
    justify-content: flex-start;
    flex-shrink: 0;
    animation: marqueeToLeft 40s linear infinite;
}

.saas_featured .c1 .u-card {
    /* border: 2px solid red; */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
    flex-shrink: 0;
    padding-right: 5rem;
}

@keyframes marqueeToRight {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(100%);
    }
}

@keyframes marqueeToLeft {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* !Our Clients  */

/* marquee 2 =================== */

.saas_oC {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5.3rem;
    flex-direction: row;
    padding: 5rem 7.5rem;
}

.saas_oC h1 {
    font-family: var(--Barlow);
    font-style: normal;
    font-weight: 700;
    font-size: 2rem;
    line-height: 2.5rem;

    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: #a5a5a5;
    white-space: nowrap;
}

.saas_oC .c1 {
    position: relative;
    display: flex;
    justify-content: flex-start;
    width: 80%;
    overflow: hidden;
}

.saas_oC .c1 .oC-marquee-1-1 {
    /* border: 2px solid red; */
    display: flex;
    /* gap: 15rem; */
    justify-content: flex-start;
    /* margin-bottom: 8.5rem; */
    flex-shrink: 0;
    animation: marqueeToLeft 25s linear infinite;
}

.saas_oC .c1 .oC-marquee-1-2 {
    /* border: 2px solid green; */

    display: flex;
    /* gap: 15rem; */
    justify-content: flex-start;
    /* margin-bottom: 8.5rem; */
    flex-shrink: 0;
    animation: marqueeToLeft 25s linear infinite;
}

.saas_oC .c1 .u-card {
    /* border: 2px solid red; */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
    flex-shrink: 0;
    padding-right: 7rem;
}

@keyframes marqueeToRight {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(100%);
    }
}

@keyframes marqueeToLeft {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* !testimony  ======================*/

.saas_testimony {
    position: relative;
    display: flex;
    padding: 10rem 7.5rem;
    overflow: hidden;
}

.saas_testimony .u-card h1 {
    font-family: VisbyRoundCF;
    font-style: normal;
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 2.9rem;

    color: #0d92bc;
    margin-bottom: 1.6rem;
}

.saas_testimony .u-card h2 {
    font-family: var(--Barlow);
    font-style: normal;
    font-weight: 700;
    font-size: 1.7rem;
    line-height: 2.2rem;
    /* identical to box height */

    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: #ffffff;
    margin-bottom: 0.5rem;
}

.saas_testimony .u-card p {
    font-family: var(--Barlow);
    font-style: normal;
    font-weight: 700;
    font-size: 1.7rem;
    line-height: 2.2rem;
    /* identical to box height */

    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: #a5a5a5;
}

.saas_testimony .c1 {
    position: relative;
    display: flex;
    justify-content: flex-start;
    width: 100%;
    /* overflow: hidden; */
}

.saas_testimony .c1 .t-marquee-1-1 {
    /* border: 2px solid red; */
    display: flex;
    justify-content: flex-start;
    flex-shrink: 0;
    animation: marqueeToLeft 30s linear infinite;
}

.saas_testimony .c1 .t-marquee-1-2 {
    /* border: 2px solid green; */
    display: flex;
    justify-content: flex-start;
    flex-shrink: 0;
    animation: marqueeToLeft 30s linear infinite;
}

.saas_testimony .c1 .u-card {
    position: relative;
    border: 2px solid red;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0;
    flex-shrink: 0;
    margin-right: 5.5rem;
    border: 1.28276px solid #0d92bc;
    max-width: 60rem;
    padding: 2.4rem 3.4rem 3rem 2rem;
}

@keyframes marqueeToRight {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(100%);
    }
}

@keyframes marqueeToLeft {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }
}

.saas_testimony .c1 .u-card .tLeft {
    position: absolute;
    width: 7.7px;
    height: 7.7px;
    top: 0%;
    left: 0%;
    transform: translate(-50%, -50%);
    background: #ffffff;
    border: 1.28276px solid #0d92bc;
}

.saas_testimony .c1 .u-card .tRight {
    width: 7.7px;
    height: 7.7px;
    position: absolute;
    top: 0%;
    right: 0%;
    transform: translate(50%, -50%);
    background: #ffffff;
    border: 1.28276px solid #0d92bc;
}

.saas_testimony .c1 .u-card .bLeft {
    width: 7.7px;
    height: 7.7px;
    position: absolute;
    bottom: 0%;
    left: 0%;
    transform: translate(-50%, 50%);
    background: #ffffff;
    border: 1.28276px solid #0d92bc;
}

.saas_testimony .c1 .u-card .bRight {
    width: 7.7px;
    height: 7.7px;
    position: absolute;
    bottom: 0%;
    right: 0%;
    transform: translate(50%, 50%);
    background: #ffffff;
    border: 1.28276px solid #0d92bc;
}

/* !border  */

.saas_testimony .c1 .t-marquee-1-1 .u-card,
.saas_testimony .c1 .t-marquee-1-2 .u-card {
    border: 1.28276px solid #0d92bc;
}

/* .saas_testimony .c1 .t-marquee-1-1 .u-card:nth-child(2),
.saas_testimony .c1 .t-marquee-1-2 .u-card:nth-child(2) {
    border: 1.28276px solid #6610d7;
}
.saas_testimony .c1 .t-marquee-1-1 .u-card:nth-child(3),
.saas_testimony .c1 .t-marquee-1-2 .u-card:nth-child(3) {
    border: 1.28276px solid #ae0000;
} */

/* !box corner  */

.saas_testimony .c1 .t-marquee-1-1 .u-card div,
.saas_testimony .c1 .t-marquee-1-2 .u-card div {
    border-color: #0d92bc;
}

/* .saas_testimony .c1 .t-marquee-1-1 .u-card:nth-child(2) div,
.saas_testimony .c1 .t-marquee-1-2 .u-card:nth-child(2) div {
    border-color: #6610d7;
}
.saas_testimony .c1 .t-marquee-1-1 .u-card:nth-child(3) div,
.saas_testimony .c1 .t-marquee-1-2 .u-card:nth-child(3) div {
    border-color: #ae0000;
} */

/* !head  */

.saas_testimony .c1 .t-marquee-1-1 .u-card h1,
.saas_testimony .c1 .t-marquee-1-2 .u-card {
    color: #0d92bc;
}

/* .saas_testimony .c1 .t-marquee-1-1 .u-card:nth-child(2) h1,
.saas_testimony .c1 .t-marquee-1-2 .u-card:nth-child(2) h1 {
    color: #6610d7;
}
.saas_testimony .c1 .t-marquee-1-1 .u-card:nth-child(3) h1,
.saas_testimony .c1 .t-marquee-1-2 .u-card:nth-child(3) h1 {
    color: #ae0000;
} */

/* !we Design  */

.saas_weDesign {
    position: relative;
    display: flex;
    padding: 5rem 7.5rem;
    gap: 7.2rem;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
}

.saas_weDesign .items {
    position: relative;
    display: flex;
    justify-content: flex-start;
    gap: 7rem;
    flex-grow: 1;

    flex-basis: 0;
}

.saas_weDesign .items .card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 20%;
}

.saas_weDesign .items .card img {
    object-fit: contain;
    margin-bottom: 1.5rem;
}

.saas_weDesign .items .card h1 {
    font-family: var(--Barlow);
    font-style: normal;
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 3.5rem;
    /* identical to box height, or 194% */

    text-align: center;

    color: #ffffff;
}

.saas_weDesign>h1 {
    font-family: var(--Barlow);
    font-style: normal;
    font-weight: 700;
    font-size: 2rem;
    line-height: 2.5rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: #a5a5a5;
    min-width: 17rem;
}

/* !we are agile  */

.saas_waa {
    position: relative;
    padding: 5rem 6.5rem;
    display: flex;
    gap: 5rem;
}

.saas_waa .c1 {
    width: 50%;
    display: flex;
    flex-direction: column;
}

.saas_waa .c1 h1 {
    font-family: var(--Barlow);
    font-style: normal;
    font-weight: 700;
    font-size: 9.3rem;
    line-height: 1;
    /* or 99% */
    color: transparent;
    text-transform: uppercase;
    -webkit-text-stroke: 1px #ffffff;
}

.saas_waa .c1 h2 {
    font-family: var(--Barlow);
    font-style: normal;
    font-weight: 700;
    font-size: 9.3rem;
    line-height: 1;
    /* identical to box height, or 99% */

    text-transform: uppercase;

    color: #ffffff;
    margin-bottom: 1.3rem;
}

.saas_waa .c1 p {
    font-family: var(--Barlow);
    font-style: normal;
    font-weight: 400;
    font-size: 2.1rem;
    line-height: 3.5rem;
    /* or 167% */

    color: #ffffff;
}

.saas_waa .c2 {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.saas_waa .c2 .box {
    position: relative;
    border: 1px solid #0d92bc;
    min-height: 27rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    max-width: 39rem;
    gap: 3rem;
    align-self: flex-end;
    width: 100%;
    flex-direction: column;
}

.saas_waa .c2 .box h1 {
    font-family: var(--Barlow);
    font-style: normal;
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 2.2rem;
    /* identical to box height */

    text-align: center;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: #a5a5a5;
    margin-bottom: 4.2rem;
}

.saas_waa .c2 .box .tLeft {
    position: absolute;
    top: 0%;
    left: 0%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;

    background: #ffffff;
    border: 1px solid #0d92bc;
}

.saas_waa .c2 .box .tRight {
    position: absolute;
    top: 0%;
    right: 0%;
    transform: translate(50%, -50%);
    width: 6px;
    height: 6px;

    background: #ffffff;
    border: 1px solid #0d92bc;
}

.saas_waa .c2 .box .bLeft {
    position: absolute;
    bottom: 0%;
    left: 0%;
    transform: translate(-50%, 50%);
    width: 6px;
    height: 6px;

    background: #ffffff;
    border: 1px solid #0d92bc;
}

.saas_waa .c2 .box .bRight {
    position: absolute;
    bottom: 0%;
    right: 0%;
    transform: translate(50%, 50%);
    width: 6px;
    height: 6px;

    background: #ffffff;
    border: 1px solid #0d92bc;
}

/* !we are user centric  */

.saas_wauc {
    position: relative;
    padding: 5rem 6.5rem;
    display: flex;
    gap: 5rem;
}

.saas_wauc .c1 {
    width: 50%;
    display: flex;
    flex-direction: column;
}

.saas_wauc .c1 h1 {
    font-family: var(--Barlow);
    font-style: normal;
    font-weight: 700;
    font-size: 9.3rem;
    line-height: 1;
    /* or 99% */
    color: transparent;
    text-transform: uppercase;
    -webkit-text-stroke: 1px #ffffff;
}

.saas_wauc .c1 h2 {
    font-family: var(--Barlow);
    font-style: normal;
    font-weight: 700;
    font-size: 9.3rem;
    line-height: 1;
    /* identical to box height, or 99% */

    text-transform: uppercase;

    color: #ffffff;
    margin-bottom: 1.3rem;
}

.saas_wauc .c1 p {
    font-family: var(--Barlow);
    font-style: normal;
    font-weight: 400;
    font-size: 2.1rem;
    line-height: 3.5rem;
    /* or 167% */

    color: #ffffff;
}

.saas_wauc .c2 {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.saas_wauc .c2 .box {
    position: relative;
    border: 1px solid #0d92bc;
    min-height: 27rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 3rem;
    max-width: 39rem;
    align-self: flex-end;
    width: 100%;
}

.saas_wauc .c2 .box h1 {
    font-family: var(--Barlow);
    font-style: normal;
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 2.2rem;
    /* identical to box height */

    text-align: center;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: #a5a5a5;
    margin-bottom: 4.2rem;
}

.saas_wauc .c2 .box .tLeft {
    position: absolute;
    top: 0%;
    left: 0%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;

    background: #ffffff;
    border: 1px solid #0d92bc;
}

.saas_wauc .c2 .box .tRight {
    position: absolute;
    top: 0%;
    right: 0%;
    transform: translate(50%, -50%);
    width: 6px;
    height: 6px;

    background: #ffffff;
    border: 1px solid #0d92bc;
}

.saas_wauc .c2 .box .bLeft {
    position: absolute;
    bottom: 0%;
    left: 0%;
    transform: translate(-50%, 50%);
    width: 6px;
    height: 6px;

    background: #ffffff;
    border: 1px solid #0d92bc;
}

.saas_wauc .c2 .box .bRight {
    position: absolute;
    bottom: 0%;
    right: 0%;
    transform: translate(50%, 50%);
    width: 6px;
    height: 6px;

    background: #ffffff;
    border: 1px solid #0d92bc;
}

/* !we are CROSS DISCIPLINARY  */

.saas_wacd {
    position: relative;
    padding: 5rem 6.5rem;
    display: flex;
    gap: 5rem;
}

.saas_wacd .c1 {
    width: 50%;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
}

.saas_waa .pin-spacer,
.saas_wauc .pin-spacer,
.saas_wacd .pin-spacer,
.saas_wansbi .pin-spacer {
    width: 50% !important;
}

.saas_wacd .c1 h1 {
    font-family: var(--Barlow);
    font-style: normal;
    font-weight: 700;
    font-size: 9.3rem;
    line-height: 1;
    /* or 99% */
    color: transparent;
    text-transform: uppercase;
    -webkit-text-stroke: 1px #ffffff;
}

.saas_wacd .c1 h2 {
    font-family: var(--Barlow);
    font-style: normal;
    font-weight: 700;
    font-size: 9.3rem;
    line-height: 1;
    /* identical to box height, or 99% */

    text-transform: uppercase;

    color: #ffffff;
    margin-bottom: 1.3rem;
}

.saas_wacd .c1 p {
    font-family: var(--Barlow);
    font-style: normal;
    font-weight: 400;
    font-size: 2.1rem;
    line-height: 3.5rem;
    /* or 167% */

    color: #ffffff;
}

.saas_wacd .c2 {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.saas_wacd .c2 .box {
    position: relative;
    border: 1px solid #0d92bc;
    min-height: 27rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 3rem;
    max-width: 39rem;
    align-self: flex-end;
    width: 100%;
}

.saas_wacd .c2 .box h1 {
    font-family: var(--Barlow);
    font-style: normal;
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 2.2rem;
    /* identical to box height */

    text-align: center;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: #a5a5a5;
    margin-bottom: 4.2rem;
}

.saas_wacd .c2 .box .tLeft {
    position: absolute;
    top: 0%;
    left: 0%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;

    background: #ffffff;
    border: 1px solid #0d92bc;
}

.saas_wacd .c2 .box .tRight {
    position: absolute;
    top: 0%;
    right: 0%;
    transform: translate(50%, -50%);
    width: 6px;
    height: 6px;

    background: #ffffff;
    border: 1px solid #0d92bc;
}

.saas_wacd .c2 .box .bLeft {
    position: absolute;
    bottom: 0%;
    left: 0%;
    transform: translate(-50%, 50%);
    width: 6px;
    height: 6px;

    background: #ffffff;
    border: 1px solid #0d92bc;
}

.saas_wacd .c2 .box .bRight {
    position: absolute;
    bottom: 0%;
    right: 0%;
    transform: translate(50%, 50%);
    width: 6px;
    height: 6px;

    background: #ffffff;
    border: 1px solid #0d92bc;
}

/* !we are not afraid of BIZARRE IDEAS  */

.saas_wansbi {
    position: relative;
    padding: 5rem 6.5rem;
    display: flex;
    gap: 5rem;
}

.saas_wansbi .c1 {
    width: 50%;
    display: flex;
    flex-direction: column;
}

.saas_wansbi .c1 h1 {
    font-family: var(--Barlow);
    font-style: normal;
    font-weight: 700;
    font-size: 9.3rem;
    line-height: 1;
    /* or 99% */
    color: transparent;
    text-transform: uppercase;
    -webkit-text-stroke: 1px #ffffff;
}

.saas_wansbi .c1 h2 {
    font-family: var(--Barlow);
    font-style: normal;
    font-weight: 700;
    font-size: 9.3rem;
    line-height: 1;
    /* identical to box height, or 99% */

    text-transform: uppercase;

    color: #ffffff;
    margin-bottom: 1.3rem;
}

.saas_wansbi .c1 p {
    font-family: var(--Barlow);
    font-style: normal;
    font-weight: 400;
    font-size: 2.1rem;
    line-height: 3.5rem;
    /* or 167% */

    color: #ffffff;
}

.saas_wansbi .c2 {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.saas_wansbi .c2 .box {
    position: relative;
    border: 1px solid #0d92bc;
    min-height: 27rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 3rem;

    max-width: 39rem;
    align-self: flex-end;
    width: 100%;
}

.saas_wansbi .c2 .box h1 {
    font-family: var(--Barlow);
    font-style: normal;
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 2.2rem;
    /* identical to box height */

    text-align: center;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: #a5a5a5;
    margin-bottom: 4.2rem;
}

.saas_wansbi .c2 .box .tLeft {
    position: absolute;
    top: 0%;
    left: 0%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;

    background: #ffffff;
    border: 1px solid #0d92bc;
}

.saas_wansbi .c2 .box .tRight {
    position: absolute;
    top: 0%;
    right: 0%;
    transform: translate(50%, -50%);
    width: 6px;
    height: 6px;

    background: #ffffff;
    border: 1px solid #0d92bc;
}

.saas_wansbi .c2 .box .bLeft {
    position: absolute;
    bottom: 0%;
    left: 0%;
    transform: translate(-50%, 50%);
    width: 6px;
    height: 6px;

    background: #ffffff;
    border: 1px solid #0d92bc;
}

.saas_wansbi .c2 .box .bRight {
    position: absolute;
    bottom: 0%;
    right: 0%;
    transform: translate(50%, 50%);
    width: 6px;
    height: 6px;

    background: #ffffff;
    border: 1px solid #0d92bc;
}

/* !case study=====================  */

.saas_caseStudy {
    position: relative;
    padding: 15rem 0rem;
}

.saas_caseStudy>h1 {
    font-family: VisbyRoundCF;
    font-style: normal;
    font-weight: 700;
    font-size: 4.1rem;
    line-height: 8.2rem;

    color: #ffffff;
    margin-bottom: 3.3rem;
    padding-left: 7.5rem;
}

.saas_caseStudy .slider {
    display: flex;
    gap: 4rem;
}

.saas_caseStudy .card {
    display: flex;
    flex-direction: column;

    align-items: flex-start;
    justify-content: flex-end;
    transition: all 0.3s ease-in-out;
    opacity: 1;
    margin: 0 1rem;
    opacity: 0.5;
    flex-grow: 1;
    flex-basis: 0;
}

.saas_caseStudy .card:hover {
    opacity: 1;
}

.saas_caseStudy .card:hover img {
    scale: 0.98;
}

.saas_caseStudy .card .image {
    position: relative;
    min-height: 51rem;
    /* width: 100%; */
    min-width: 100%;
    display: flex;
    align-items: flex-end;
    margin-bottom: 1.6rem;
    /* border: 1px solid #FFFFFF; */
    border-radius: 12px;
    transition: all 0.3s ease-in-out;
    border-radius: 12px;
    overflow: hidden;
    /* border: 1px solid #ffffff; */
}

.saas_caseStudy .card img {
    top: 0;
    left: 0;
    position: absolute;
    transition: all 0.3s ease-in-out;
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 12px;
}

.saas_caseStudy .card .text {
    display: flex;
    flex-direction: column;

    transition: all 0.3s ease-in-out;
}

.saas_caseStudy .card .text h1 {
    font-family: VisbyRoundCF;
    font-style: normal;
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 3rem;
    /* identical to box height */

    color: #ffffff;
    margin-bottom: 0.6rem;
}

.saas_caseStudy .card .text h2 {
    font-family: var(--Barlow);
    font-style: normal;
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 2.2rem;
    /* identical to box height */

    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: #a5a5a5;
    margin-bottom: 2.6rem;
}

.saas_caseStudy .card .text p {
    font-family: VisbyRoundCF;
    font-style: normal;
    font-weight: 700;
    font-size: 2rem;
    line-height: 2.4rem;
    /* identical to box height */

    color: #ffffff;
}

/* !slick slider  ================*/

.saas_caseStudy .slick-slide .image {
    /* margin: 0 1rem; */

    background-color: #d9d9d9;
    border-radius: 12px;
}

.saas_caseStudy .slick-active .image {
    background-color: transparent;
    margin-bottom: 1.6rem;
}

.saas_caseStudy .slick-slide img {
    opacity: 0;
}

.saas_caseStudy .slick-active img {
    opacity: 1;
}

.saas_caseStudy .slick-slide .text {
    opacity: 0;
}

.saas_caseStudy .slick-active .text {
    opacity: 1;
}

.saas_caseStudy .slick-prev {
    position: absolute;
    height: 100%;
    color: transparent;
    opacity: 0;
    z-index: 999;
    width: 9.5rem;
    left: 0;
    cursor: pointer;
}

.saas_caseStudy .slick-next {
    position: absolute;
    height: 100%;
    color: transparent;
    opacity: 0;
    z-index: 999;
    width: 9.5rem;
    right: 0;
    cursor: pointer;
}

/*! contact us ======================   */

.saas_contactUs {
    position: relative;
    padding: 15rem 7.5rem 10rem 10rem;
}

.saas_contactUs h1 {
    font-family: var(--Barlow);
    font-style: normal;
    font-weight: 700;
    font-size: 4.9rem;
    line-height: 6.4rem;
    /* or 130% */

    text-transform: uppercase;

    color: #ffffff;
    margin-bottom: 1.2rem;
}

.saas_contactUs h1 span {
    font-family: var(--Barlow);
    font-style: normal;
    font-weight: 700;
    font-size: 4.9rem;
    line-height: 6.4rem;
    /* identical to box height, or 130% */

    text-transform: uppercase;

    color: #55b9f9;
}

.saas_contactUs a {
    font-family: var(--Barlow);
    font-style: normal;
    font-weight: 700;
    font-size: 7.6rem;
    line-height: 10.9rem;
    /* identical to box height, or 142% */

    color: #55b9f9;
    transition: all 0.3s ease-in-out;
}

.saas_contactUs a:hover {
    opacity: 0.75;
}

/* !about ======================  */

.saas_about {
    position: relative;
    padding: 15rem 7.5rem;
    display: flex;
    gap: 4rem;
    flex-grow: 1;
    flex-basis: 0;
}

.saas_about>.card {
    width: 25%;
}

.saas_about h1 {
    font-family: var(--Barlow);
    font-style: normal;
    font-weight: 700;
    font-size: 1.9rem;
    line-height: 2.5rem;

    text-align: center;
    text-transform: uppercase;

    color: #ffffff;
    margin-bottom: 4.8rem;
    /* white-space: nowrap; */
}

.saas_about .text {
    display: flex;
    align-items: center;
    width: 50%;
}

.saas_about p {
    font-family: var(--Barlow);
    font-style: normal;
    font-weight: 400;
    font-size: 2.1rem;
    line-height: 3.5rem;

    text-align: center;

    color: #ffffff;
}

/* !home block =========================  */

.home_wch {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 5rem 7.5rem 15rem 7.5rem;
    gap: 6.5rem;
}

.home_wch .c1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.home_wch .c1 h1 {
    font-family: var(--Barlow);
    font-style: normal;
    font-weight: 700;
    font-size: 2rem;
    line-height: 2.5rem;

    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: #a5a5a5;
    margin-bottom: 0.5rem;
}

.home_wch .c1 h2 {
    font-family: VisbyRoundCF;
    font-style: normal;
    font-weight: 700;
    font-size: 5.7rem;
    line-height: 8.2rem;

    color: #ffffff;
    margin-bottom: 2rem;
}

.home_wch .c1 h3 {
    font-family: VisbyRoundCF;
    font-style: normal;
    font-weight: 700;
    font-size: 5.7rem;
    line-height: 8.2rem;

    color: #ffffff;
    padding: 0 1.5rem;
}

.home_wch .c1 p {
    font-family: var(--Barlow);
    font-style: normal;
    font-weight: 400;
    font-size: 2.1rem;
    line-height: 3.5rem;
    color: #ffffff;
    max-width: 63%;
    margin-bottom: 2rem;
}

.home_wch .c1 a {
    font-family: var(--Barlow);
    font-style: normal;
    font-weight: 700;
    font-size: 2rem;
    line-height: 2.5rem;
    text-align: center;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: #a5a5a5;
    padding: 1.8rem 2.9rem;
    background: #292929;
    border-radius: 6px;
    transition: all 0.3s ease-in-out;
}

.home_wch .c1 a:hover {
    opacity: 0.75;
}

.home_wch .box {
    position: relative;
    display: flex;
    border: 1px solid #0d92bc;
    margin-bottom: 1.5rem;
}

.home_wch .box .tLeft {
    position: absolute;
    width: 6px;
    height: 6px;

    background: #ffffff;
    border: 1px solid #0d92bc;
    top: 0%;
    left: 0%;
    transform: translate(-50%, -50%);
}

.home_wch .box .tRight {
    width: 6px;
    height: 6px;

    background: #ffffff;
    border: 1px solid #0d92bc;
    position: absolute;
    top: 0%;
    right: 0%;
    transform: translate(50%, -50%);
}

.home_wch .box .bLeft {
    width: 6px;
    height: 6px;

    background: #ffffff;
    border: 1px solid #0d92bc;
    position: absolute;
    bottom: 0%;
    left: 0%;
    transform: translate(-50%, 50%);
}

.home_wch .box .bRight {
    width: 6px;
    height: 6px;

    background: #ffffff;
    border: 1px solid #0d92bc;
    position: absolute;
    bottom: 0%;
    right: 0%;
    transform: translate(50%, 50%);
}

/* !marqueee  */

.home_wch .c2 h1 {
    font-family: var(--Barlow);
    font-style: normal;
    font-weight: 700;
    font-size: 2rem;
    line-height: 2.5rem;
    /* identical to box height */

    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: #a5a5a5;
    margin-bottom: 2.1rem;
}

.home_wch .c2 .content1 {
    position: relative;
    display: flex;
    justify-content: flex-start;
    width: 100%;
    overflow: hidden;
    margin-bottom: 4.4rem;
}

.home_wch .c2 .content1 .f-marquee-1-1 {
    /* border: 2px solid red; */
    display: flex;
    /* gap: 15rem; */
    justify-content: flex-end;
    /* margin-bottom: 8.5rem; */
    flex-shrink: 0;
    animation: marqueeToLeft 45s linear infinite;
}

.home_wch .c2 .content1 .f-marquee-1-2 {
    /* border: 2px solid green; */

    display: flex;
    /* gap: 15rem; */
    justify-content: flex-end;
    /* margin-bottom: 8.5rem; */
    flex-shrink: 0;
    animation: marqueeToLeft 45s linear infinite;
}

.home_wch .c2 .content1 .u-card {
    /* border: 2px solid red; */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
    flex-shrink: 0;
    padding-right: 5rem;
}

@keyframes marqueeToRight {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(100%);
    }
}

@keyframes marqueeToLeft {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }
}

.home_wch .c2 .content2 {
    position: relative;
    display: flex;
    justify-content: flex-start;
    width: 100%;
    overflow: hidden;
}

.home_wch .c2 .content2 .f-marquee-1-1 {
    /* border: 2px solid red; */
    display: flex;
    /* gap: 15rem; */
    justify-content: flex-end;
    /* margin-bottom: 8.5rem; */
    flex-shrink: 0;
    animation: marqueeToLeft 45s linear infinite;
}

.home_wch .c2 .content2 .f-marquee-1-2 {
    /* border: 2px solid green; */

    display: flex;
    /* gap: 15rem; */
    justify-content: flex-end;
    /* margin-bottom: 8.5rem; */
    flex-shrink: 0;
    animation: marqueeToLeft 45s linear infinite;
}

.home_wch .c2 .content2 .u-card {
    /* border: 2px solid red; */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
    flex-shrink: 0;
    padding-right: 5rem;
}

/* .expCard-content.blue h3{
	color: #07bcff
} */
.expCard a h3 {
    transition: all .3s ease-in-out
}

.expCard a:hover h3 {
    color: #07bcff
}

.aboutPage-hero a {
    color: #07bcff;
    transition: all .3s ease-in-out;
}

.aboutPage-hero a:hover {
    opacity: .7
}

@keyframes marqueeToRight {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(100%);
    }
}

@keyframes marqueeToLeft {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }
}

.blog-block h1 {
    font-size: 4rem;
    line-height: 1;
}

/* !==================================== */
/* !SaaS Responsive =====================*/
/* !==================================== */

/* ! *********************************** */
/*! Below 1200px  */
/* !1200px/16 = 75em */
/* ! *********************************** */

@media (max-width: 75em) {
    .header {
        padding: 6.2rem 0 0 5rem;
    }

    .saas_banner {
        padding: 5.7rem 5rem 0 5rem;
    }

    .saas_brands {
        padding: 13.1rem 5rem;
    }

    .saas_featured {
        padding: 5rem 5rem;
    }

    .saas_weDesign {
        padding: 10rem 5rem;
    }

    .saas_waa {
        padding: 5rem 5rem;
    }

    .saas_oC {
        padding: 5rem 5rem;
    }

    .saas_waa .c1 h1 {
        font-size: 6.3rem;
    }

    .saas_waa .c1 h2 {
        font-size: 6.3rem;
    }

    .saas_waa .c1 p {
        font-size: 1.6rem;
        line-height: 3rem;
    }

    .saas_wauc .c1 h1 {
        font-size: 6.3rem;
    }

    .saas_wauc .c1 h2 {
        font-size: 6.3rem;
    }

    .saas_wauc .c1 p {
        font-size: 1.6rem;
        line-height: 3rem;
    }

    .saas_wacd .c1 h1 {
        font-size: 6.3rem;
    }

    .saas_wacd .c1 h2 {
        font-size: 6.3rem;
    }

    .saas_wacd .c1 p {
        font-size: 1.6rem;
        line-height: 3rem;
    }

    .saas_wansbi .c1 h1 {
        font-size: 6.3rem;
    }

    .saas_wansbi .c1 h2 {
        font-size: 6.3rem;
    }

    .saas_wansbi .c1 p {
        font-size: 1.6rem;
        line-height: 3rem;
    }

    .saas_wauc {
        padding: 5rem 5rem;
    }

    .saas_wacd {
        padding: 5rem 5rem;
    }

    .saas_wansbi {
        padding: 5rem 5rem;
    }

    .saas_contactUs {
        padding: 15rem 5rem 28rem 5rem;
    }

    .saas_caseStudy .card .image {
        min-height: 35rem;
    }

    .saas_caseStudy .card .text h1 {
        font-size: 2rem;
        line-height: 2.5rem;
    }

    .saas_caseStudy .card .text h2 {
        font-size: 1.3rem;
        line-height: 1.8rem;
    }

    .saas_caseStudy .card .text p {
        font-size: 1.6rem;
        line-height: 2rem;
    }

    .saas_contactUs h1 {
        font-size: 2.9rem;
        line-height: 4.4rem;
    }

    .saas_contactUs h1 span {
        font-size: 2.9rem;
        line-height: 4.4rem;
    }

    .saas_contactUs a {
        font-size: 4.6rem;
        line-height: 7.9rem;
    }

    .saas_about {
        padding: 15rem 5rem;
    }

    /* !home block  */

    .home_wch {
        padding: 5rem 5rem 15rem 5rem;
    }
}

/* ! *********************************** */
/*! Below 1024px  */
/* ! 1024px/16 = 64em */
/* ! *********************************** */
@media (max-width: 64em) {
    .header .logo img {
        width: 8rem;
    }

    .saas_banner h1 {
        font-size: 3.7rem;
        line-height: 6.2rem;
    }

    .saas_banner h2 {
        font-size: 3.7rem;
        line-height: 6.2rem;
    }

    .saas_brands h1 {
        font-size: 1.2rem;
        line-height: 1.6rem;
    }

    .saas_featured h1 {
        font-size: 1.5rem;
        line-height: 2rem;
    }

    .saas_oC h1 {
        font-size: 1.5rem;
        line-height: 2rem;
    }

    .saas_testimony .u-card h1 {
        font-size: 2rem;
        line-height: 2.5rem;
    }

    .saas_testimony .u-card h2 {
        font-size: 1.2rem;
        line-height: 1.8rem;
    }

    .saas_testimony .u-card p {
        font-size: 1.2rem;
        line-height: 1.8rem;
    }

    .saas_weDesign>h1 {
        font-size: 1.5rem;
        line-height: 2rem;
    }

    .saas_weDesign .items .card img {
        max-width: 3rem;
    }

    .saas_weDesign .items .card h1 {
        font-size: 1.2rem;
        line-height: 3rem;
    }

    .saas_caseStudy .card .image {
        min-height: 25rem;
    }

    .saas_weDesign {
        gap: 3rem;
    }

    .saas_weDesign .items {
        gap: 4rem;
    }

    .saas_about h1 {
        font-size: 1rem;
        line-height: 1.1rem;
    }

    .saas_about p {
        font-size: 1.5rem;
        line-height: 2.4rem;
    }

    /* !home block  */
    .home_wch .c1 h2 {
        font-size: 3.7rem;
        line-height: 5rem;
        margin-bottom: 1rem;
    }

    .home_wch .c1 h3 {
        font-size: 3.7rem;
        line-height: 6.2rem;
    }

    .home_wch .c1 p {
        font-size: 1.5rem;
        line-height: 2.9rem;
    }

    .home_wch .c1 h1 {
        font-size: 1.5rem;
        line-height: 2rem;
    }

    .home_wch .c2 h1 {
        font-size: 1.5rem;
        line-height: 2rem;
    }
}

/* ! *********************************** */
/*! Below 850px  */
/* ! 850px/16 = 53.125em */
/* ! *********************************** */

@media (max-width: 53.125em) {}

/* !=================================================== */
/* !saas mobile and tab ==============================  */
/* !=================================================== */

/* ! *********************************** */
/*! Below 768px  */
/* ! 768px/16 = 48em */
/* ! *********************************** */

@media (max-width: 48em) {
    .header .logo img {
        width: 9.3rem;
    }

    .header {
        padding: 3rem 2rem 0 2rem;
    }

    .saas_banner {
        padding: 10rem 2rem 0 2rem;
        min-height: auto;
    }

    .saas_banner h1 {
        font-size: 2.8rem;
        line-height: 3rem;
    }

    .saas_banner h2 {
        font-size: 2.8rem;
        line-height: 3rem;
    }

    .saas_banner p {
        font-size: 1.2rem;
        line-height: 1.8rem;
    }

    .saas_brands {
        padding: 5rem 2rem;
        flex-direction: column;
        width: 100%;
    }

    .saas_brands h1 {
        font-size: 1.6rem;
        line-height: 1.9rem;
        margin-bottom: 0;
    }

    .saas_brands .box {
        border-right: none;
        width: 100%;
        padding-right: 0rem;
        gap: 3rem;
        border-bottom: 1px solid #6c6868;
        gap: 2.7rem;
        align-items: flex-start;
        min-height: auto;
        padding-bottom: 3rem;
    }

    .saas_brands .box .items {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-column-gap: 7rem;
        grid-row-gap: 2.7rem;
        width: 100%;
        place-items: center;
        min-height: auto;
    }

    .saas_brands .box:last-child {
        border-bottom: none;
        padding-bottom: 0rem;
    }

    .saas_featured {
        padding: 5rem 2rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 3rem;
    }

    .saas_featured h1 {
        font-size: 2rem;
        line-height: 2.4rem;
    }

    .saas_featured .c1 {
        width: 100%;
    }

    .saas_featured .u-card {
        padding-right: 2rem;
    }

    .saas_featured .u-card img {
        width: 70%;
    }

    .saas_oC {
        padding: 5rem 2rem;
        gap: 3rem;
        flex-direction: column;
        align-items: flex-start;
    }

    .saas_oC h1 {
        font-size: 2rem;
        line-height: 2.4rem;
    }

    .saas_oC .c1 {
        width: 100%;
    }

    .saas_oC .c1 .u-card {
        padding-right: 2rem;
    }

    .saas_oC .c1 .u-card img {
        width: 70%;
    }

    .saas_testimony {
        padding: 5rem 0rem;
    }

    .saas_testimony .u-card h1 {
        font-size: 1.4rem;
        line-height: 1.8rem;
    }

    .saas_testimony .u-card h2 {
        font-size: 1rem;
        line-height: 1.3rem;
    }

    .saas_testimony .u-card p {
        font-size: 1rem;
        line-height: 1.3rem;
    }

    .saas_testimony .c1 .u-card {
        max-width: 36rem;
    }

    .saas_testimony .c1 .u-card {
        padding: 1.7rem 3.4rem 1.7rem 1.2rem;
    }

    .saas_weDesign {
        flex-direction: column;
        align-items: flex-start;
        gap: 4.4rem;
        padding: 5rem 2rem;
    }

    .saas_weDesign .items {
        width: 100%;
    }

    .saas_weDesign .items .card {
        width: 100%;
    }

    .saas_weDesign .items .card h1 {
        font-size: 1.4rem;
        line-height: 1.7rem;
    }

    .saas_weDesign .items {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-column-gap: 4rem;
        grid-row-gap: 4.3rem;
    }

    /* !====================== */
    .saas_waa {
        flex-direction: column;
        padding: 5rem 2rem;
    }

    .saas_waa .c1 {
        width: 100%;
    }

    .saas_waa .c2 {
        width: 100%;
    }

    .saas_waa .c1 h1 {
        font-size: 4.8rem;
        line-height: 5.8rem;
        margin-bottom: 0.8rem;
    }

    .saas_waa .c1 h2 {
        font-size: 4.8rem;
        line-height: 5.8rem;
    }

    .saas_waa .c1 p {
        font-size: 1.4rem;
        line-height: 2.2rem;
    }

    .saas_waa .c2 {
        align-items: center;
    }

    .saas_waa .c2 .box {
        align-self: center;
    }

    .saas_waa .c2 .box h1 {
        font-size: 1.6rem;
        line-height: 1.9rem;
        margin-bottom: 3.6rem;
    }

    /* !====================== */

    /* !====================== */
    .saas_wauc {
        flex-direction: column;
        padding: 5rem 2rem;
    }

    .saas_wauc .c1 {
        width: 100%;
    }

    .saas_wauc .c2 {
        width: 100%;
    }

    .saas_wauc .c1 h1 {
        font-size: 4.8rem;
        line-height: 5.8rem;
        margin-bottom: 0.8rem;
    }

    .saas_wauc .c1 h2 {
        font-size: 4.8rem;
        line-height: 5.8rem;
    }

    .saas_wauc .c1 p {
        font-size: 1.4rem;
        line-height: 2.2rem;
    }

    .saas_wauc .c2 {
        align-items: center;
    }

    .saas_wauc .c2 .box {
        align-self: center;
    }

    .saas_wauc .c2 .box h1 {
        font-size: 1.6rem;
        line-height: 1.9rem;
        margin-bottom: 3.6rem;
    }

    /* !====================== */

    /* !====================== */
    .saas_wacd {
        flex-direction: column;
        padding: 5rem 2rem;
    }

    .saas_wacd .c1 {
        width: 100%;
    }

    .saas_wacd .c2 {
        width: 100%;
    }

    .saas_wacd .c1 h1 {
        font-size: 4.8rem;
        line-height: 5.8rem;
        margin-bottom: 0.8rem;
    }

    .saas_wacd .c1 h2 {
        font-size: 4.8rem;
        line-height: 5.8rem;
    }

    .saas_wacd .c1 p {
        font-size: 1.4rem;
        line-height: 2.2rem;
    }

    .saas_wacd .c2 {
        align-items: center;
    }

    .saas_wacd .c2 .box {
        align-self: center;
    }

    .saas_wacd .c2 .box h1 {
        font-size: 1.6rem;
        line-height: 1.9rem;
        margin-bottom: 3.6rem;
    }

    /* !====================== */

    /* !====================== */
    .saas_wansbi {
        flex-direction: column;
        padding: 5rem 2rem;
    }

    .saas_wansbi .c1 {
        width: 100%;
    }

    .saas_wansbi .c2 {
        width: 100%;
    }

    .saas_wansbi .c1 h1 {
        font-size: 4.8rem;
        line-height: 5.8rem;
        margin-bottom: 0.8rem;
    }

    .saas_wansbi .c1 h2 {
        font-size: 4.8rem;
        line-height: 5.8rem;
    }

    .saas_wansbi .c1 p {
        font-size: 1.4rem;
        line-height: 2.2rem;
    }

    .saas_wansbi .c2 {
        align-items: center;
    }

    .saas_wansbi .c2 .box {
        align-self: center;
        height: 23rem;
    }

    .saas_wansbi .c2 .box h1 {
        font-size: 1.6rem;
        line-height: 1.9rem;
        margin-bottom: 3.6rem;
    }

    /* !====================== */

    .saas_caseStudy {
        padding: 5rem 2rem;
    }

    .saas_caseStudy>h1 {
        padding-left: 0rem;
        font-size: 3.2rem;
        line-height: 3.8rem;
        margin-bottom: 3rem;
    }

    .saas_caseStudy .card .text h1 {
        font-size: 2.4rem;
        line-height: 2.9rem;
    }

    .saas_caseStudy .card .text h2 {
        font-size: 1.6rem;
        line-height: 1.9rem;
        margin-bottom: 1.5rem;
    }

    .saas_caseStudy .card .text p {
        font-size: 1.8rem;
        line-height: 2.2rem;
    }

    .saas_contactUs {
        padding: 6.6rem 2rem 4rem 2rem;
    }

    .saas_contactUs h1,
    .saas_contactUs h1 span {
        font-size: 2.4rem;
        line-height: 3.2rem;
    }

    .saas_contactUs a {
        font-size: 2.8rem;
        line-height: 3.8rem;
    }

    .saas_caseStudy .card .image {
        min-height: 38rem;
    }

    /* about  */

    .saas_about {
        flex-direction: column;
        align-items: center;
        padding: 5rem 5rem;
    }

    .saas_about>.card {
        width: 100%;
    }

    .saas_about .text {
        width: 100%;
    }

    .saas_about h1 {
        font-size: 1.6rem;
        line-height: 1.9rem;
    }

    /* !home block  */
    .home_wch {
        padding: 5rem 2rem 5rem 2rem;
    }

    .home_wch .c1 h2 {
        font-size: 2.8rem;
        line-height: 3rem;
    }

    .home_wch .c1 h1 {
        margin-bottom: 3rem;
    }

    .home_wch .c2 h1 {
        margin-bottom: 3rem;
    }

    .home_wch .box {
        padding: 0.9rem;
    }

    .home_wch .c1 h3 {
        font-size: 2.8rem;
        line-height: 3rem;
    }

    .home_wch .c1 p {
        max-width: 100%;
    }

    .home_wch .c1 a {
        font-size: 1.5rem;
        line-height: 2rem;
        padding: 0.8rem 1.9rem;
    }

    .home_wch .c2 .content2 .u-card img {
        width: 70%;
    }

    .home_wch .c2 .content1 .u-card img {
        width: 70%;
    }
}

/* ! *********************************** */
/*! Below 600px  */
/* ! 600px/16 = 37.5em */
/* ! *********************************** */

@media (max-width: 37.5em) {}

/* ! *********************************** */
/*! Below 480px  */
/* ! 480px/16 = 30em */
/* ! *********************************** */

@media (max-width: 30em) {}

/* ! *********************************** */
/*! Below 375px  */
/* ! 375px/16 = 23.43em */
/* ! *********************************** */

@media (max-width: 23.43em) {}

/* !404 error page  */
.errorPage {
    position: relative;
}

.errorPage .header {
    display: none;
}

.errorPage .threejsCanvas {
    display: block;
    position: absolute;
    left: 0;
    top: -10rem;
    width: 100vw;
    height: 100vh;
    border: none;
}

.errorPage .container {
    z-index: 1;
    display: flex;
    align-items: center;
    width: 100vw;
    justify-content: center;
    height: 100vh;
    flex-direction: column;
    max-width: 100%;
    margin: 0 auto;
}

.errorPage .upperPart {
    position: relative;
    top: -10rem;
    width: 100%;
    height: 50vh;
    display: flex;
    align-items: top;
    justify-content: center;
}

.errorPage .left {
    color: rgba(191, 191, 191, 255);
    font-size: 40rem;
    line-height: 1;
    padding-left: calc(42vw - 35rem);
    text-align: left;
    width: 50%;
    font-family: VisbyRoundCF, sans-serif;
    font-weight: 100;
}

.errorPage .right {
    color: rgba(191, 191, 191);
    text-align: right;
    line-height: 1;
    font-family: VisbyRoundCF, sans-serif;
    padding-right: calc(42vw - 35rem);
    font-size: 40rem;
    width: 50%;
    font-weight: 100;
}

.errorPage .pagagraphMaze {
    padding-top: 0.5rem;
    font-size: 1.5rem;
    font-family: VisbyRoundCF, sans-serif;
}

.errorPage .rightLower {
    display: flex;
    align-items: top;
    justify-content: center;
    color: white;
}

.errorPage .rightLower>h2 {
    font-family: VisbyRoundCF, sans-serif;
    font-size: 2rem;
    font-weight: 100;
    padding-right: 0.5rem;
}

.errorPage .rightLower>p {
    color: rgba(191, 191, 191);
    font-family: VisbyRoundCF, sans-serif;
    font-size: 1.5rem;
    font-weight: 100;
    text-align: left;
}

.errorPage .LastStatement {
    color: rgba(191, 191, 191);
    font-family: VisbyRoundCF, sans-serif;
    font-size: 1.5rem;
    font-weight: 100;
    text-align: center;
}

.errorPage .videoOFMaze {
    display: none;
}

@media screen and (max-width: 1086px) {

    .errorPage .right,
    .errorPage .left {
        display: none;
    }

    .header {
        position: relative;
        display: block;
        color: rgba(191, 191, 191);
        font-family: VisbyRoundCF, sans-serif;
        width: 100%;
        text-align: center;
        margin-top: 0rem;
        font-size: 4rem;
    }
}

@media screen and (max-width: 1286px) {
    .errorPage .upperPart {
        top: 0rem;
    }

    .errorPage .lowerPart {
        display: flex;
        flex-direction: column;
        max-width: 90vw;
        padding: 8rem 0rem;
    }

    .errorPage .rightLower,
    .errorPage .leftLower {
        display: flex;
        flex-direction: column;
        text-align: center;
        width: 100%;
        padding-top: 0rem;
    }

    .errorPage .rightLower>p {
        text-align: center;
    }

    .errorPage .left {
        font-size: 40rem;

        padding-left: calc(42vw - 40rem);
    }

    .errorPage .right {
        padding-right: calc(42vw - 40rem);
        font-size: 40rem;
    }
}

@media screen and (max-width: 991px) {
    .errorPage .threejsCanvas {
        display: none;
    }

    .errorPage .upperPart {
        justify-content: center;
    }

    .errorPage .videoOFMaze {
        display: block;
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
        width: 48vw;
        height: 90vh;
        top: -10rem;
        border: none;
    }
}

@media screen and (max-width: 603px) {
    .errorPage .videoOFMaze {
        display: block;
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
        top: -10rem;
        width: 80vw;
        height: 90vh;
        border: none;
    }

    .errorPage .lowerPart {
        padding: 4rem 0rem;
    }

    .errorPage .header {
        display: block;
    }

    .errorPage .container {
        justify-content: flex-start;
    }

    .errorPage .upperPart {
        top: -5rem;
    }
}






/* !new block ===========================  */


.projectBlocks_textImage {
    display: flex;
    max-width: 160rem;
    padding: 10rem 11%;
    margin: 0 auto;
    gap: 9%;
}




.projectBlocks_textImage .c1 {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.projectBlocks_textImage .c2 {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}



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


    .projectBlocks_textImage {

        padding: 3rem 5vw;
        flex-direction: column !important;
        gap: 2.5rem;

    }

    .projectBlocks_textImage .c1 {
        width: 100%;
    }

    .projectBlocks_textImage .c2 {
        width: 100%;
    }

}


.projectBlocks_textImage .c1 h1 {
    /* font-family: var(--VisbyRoundCFBold); */
    font-size: 4rem;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.02;
    letter-spacing: normal;
    text-align: left;
    color: #fff;
    margin-bottom: 1.5rem;
}

.projectBlocks_textImage .c1 p {
    /* font-family: var(--VisbyRoundCFBold); */
    font-size: 1.4rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.79;
    letter-spacing: normal;
    text-align: left;
    color: #fff;
    max-width: 82%;
}

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

    .projectBlocks_textImage .c1 h1 {
        font-size: 3rem;
    }



}


.projectHead {

    font-size: 4rem;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.02;
    letter-spacing: normal;
    text-align: center;
    color: #fff;
    padding: 5rem 0 2rem 0;
    margin: 0 auto;
}

.projectPara {
    font-size: 2rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.4;
    letter-spacing: normal;
    text-align: center;
    color: #fff;
    max-width: 50%;
    padding-bottom: 5rem;
}

.projectHeadContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* padding-bottom: 7rem; */
}



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

    .projectHead {
        padding: 3rem 0;
    }

    /* .projectHeadContainer {
        padding-bottom: 3rem;
    } */

    .projectPara {
        padding-bottom: 3rem;
    }


}


.bgColorBlack1 .projectGrid3C {
    background-color: #000000;
}


.projectGrid3C {

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 2vw;
    background-color: #111111;
    padding-bottom: 5rem;
    padding: 5rem 11% 5rem 11%;



}


.stepClass .projectGrid3C img:nth-child(1) {

    /* border: 1px solid red; */
    /* margin-top: 5%; */

}

.stepClass .projectGrid3C img:nth-child(2) {

    /* border: 1px solid red; */
    margin-top: 20%;

}

.stepClass .projectGrid3C img:nth-child(3) {

    /* border: 1px solid red; */
    margin-top: 30%;

}



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

    .stepClass .projectGrid3C img:nth-child(1),
    .stepClass .projectGrid3C img:nth-child(2),
    .stepClass .projectGrid3C img:nth-child(3) {

        /* border: 1px solid red; */
        margin-top: unset;

    }




}



.projectGrid3C img {
    width: 100%;
    border-radius: 1rem;
}



@media screen and (max-width: 768px) {
    .projectGrid3C {
        padding: 3rem 5vw 3rem 5vw;
        grid-template-columns: repeat(2, 1fr);

    }



}

.projectGrid4C {

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 2vw;
    background-color: #111111;
    padding-bottom: 5rem;
    padding: 8rem 11% 5rem 11%;



}


@media screen and (max-width: 768px) {
    .projectGrid4C {
        padding: 3rem 5vw 3rem 5vw;
        grid-template-columns: repeat(2, 1fr);

    }



}





.projectBlocks_textImage li {
    list-style: unset;
    font-size: 1.4rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.79;
    letter-spacing: normal;
    text-align: left;
    color: #fff;
    max-width: 82%;
    margin-left: 3%;
}



.paddingBottom .projectHeadParaBlock {
    padding-bottom: 0rem;
}

.projectHeadParaBlock {
    padding: 5rem 0;
    margin: 0 auto;
    max-width: 160rem;
    padding: 10rem 11%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}





.projectHeadParaBlock h1 {

    font-size: 4rem;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.02;
    letter-spacing: normal;
    text-align: left;
    color: #fff;
    margin-bottom: 1.6rem;
}

.projectHeadParaBlock p {


    font-size: 1.4rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.79;
    letter-spacing: normal;
    text-align: left;
    color: #fff;
    max-width: 50%;
}

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

    .projectHeadParaBlock {
        padding: 5rem 3vw;

    }


    .projectHeadParaBlock p {
        max-width: 100%;

    }


}

.projectImageFlexWrapCol_1 {
    grid-template-columns: repeat(1, 1fr) !important;
}


.projectImageFlexWrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin: 0 auto;
    max-width: 160rem;
    padding: 6rem 11%;
    flex-wrap: wrap;
    gap: 7rem;

}

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

    .projectImageFlexWrap {
        padding: 4rem 5vw;
        grid-template-columns: repeat(1, 1fr);
        gap: 2rem;
    }


}

.projectImageFlexWrap img {
    width: 100%;
    text-align: center;
}


.fullWidthImageWithPadding {
    max-width: 160rem;
    padding: 10rem 11%;
    margin-left: auto;
    margin-right: auto;
}

.projectFlexWrapBlock {
    display: flex;

    /* gap: 1rem; */
    padding: 0 11%;
    gap: 2.5vw;
    padding-bottom: 4rem;
}

.fit-content .projectFlexWrapBlock .c1 img,
.fit-content .projectFlexWrapBlock .c2 img {
    width: fit-content;
    box-shadow: 10px 10px 31px 0px rgba(0, 0, 0, 0.35);
}


.projectFlexWrapBlock .c1 {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 2.5vw;
}

.projectFlexWrapBlock .c2 {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 2.5vw;
}



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

    .projectFlexWrapBlock {

        padding: 0 5vw 3rem 5vw;

    }





}


/* !upkeep page  */


.upKeep_banner {
    position: relative;
}

.upKeep_banner .container .head {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 5rem 0 0 0;
    align-items: center;
    z-index: 5;

}


.upKeep_banner .container .head .logo {
    max-width: 21.3rem;
    margin-bottom: 1.5rem;
}

.upKeep_banner .container .head h1 {
    font-family: VisbyRoundCF;
    font-size: 4.8rem;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.08;
    letter-spacing: -1.44px;
    text-align: center;
    color: #fff;
    margin-bottom: 1.5rem;
    max-width: 66rem;
}

.upKeep_banner .container .head p {
    font-family: VisbyRoundCF;

    font-size: 1.6rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.79;
    letter-spacing: normal;
    text-align: left;
    color: #fff;
    margin-bottom: 1.5rem;
    max-width: 66rem;
}
    .upKeep_banner .container .head .link-wrapper {
        display: flex;
    }

.upKeep_banner .container .head a {
    font-family: Barlow;
    font-size: 1.4rem;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.15px;
    text-align: center;
    color: #fff;
    border-radius: 7.2px;
    background-color: #00a0e0;
    padding: 1.5rem 3rem;
    text-transform: uppercase;
    transition: all 0.3s ease-in-out;
}


.upKeep_banner .container .head a:hover {
    opacity: 0.7;
}


.upKeep-image {
    position: relative;
    width: 100%;
    height: auto;
    padding-bottom: 7rem;
    margin-top: -9%;
}


.upKeep-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    /* border-radius: 1rem; */
}

/* !upkeep marquee brands  */


/* marquee 1 =================== */

.upKeep_brands {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 3.5rem;
    flex-direction: column;
    padding: 5rem 7.5rem;

}

.upKeep_brands h1 {
    font-family: var(--Barlow);
    font-style: normal;
    font-weight: 600;
    font-size: 2rem;
    line-height: 2.5rem;

    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: #a5a5a5;
    white-space: nowrap;
}

.upKeep_brands .c1 {
    position: relative;
    display: flex;
    justify-content: flex-start;
    width: 100%;
    overflow: hidden;
}

.upKeep_brands .c1 .f-marquee-1-1 {
    /* border: 2px solid red; */
    display: flex;
    justify-content: flex-start;
    flex-shrink: 0;
    animation: marqueeToLeft 40s linear infinite;
}

.upKeep_brands .c1 .f-marquee-1-2 {
    /* border: 2px solid green; */

    display: flex;
    justify-content: flex-start;
    flex-shrink: 0;
    animation: marqueeToLeft 40s linear infinite;
}

.upKeep_brands .c1 .u-card {
    /* border: 2px solid red; */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
    flex-shrink: 0;
    /* padding-right: 5rem; */
}

.upKeep_brands .c1 .u-card img {
    width: 70%;
}


@keyframes marqueeToRight {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(100%);
    }
}

@keyframes marqueeToLeft {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }
}


@media (max-width: 48em) {
    .upKeep_brands {
        padding: 5rem 2rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 3rem;
    }

    .upKeep_brands h1 {
        font-size: 2rem;
        line-height: 2.4rem;
    }

    .upKeep_brands .c1 {
        width: 100%;
    }

    .upKeep_brands .u-card {
        padding-right: 2rem;
    }

    .upKeep_brands .u-card img {
        width: 70%;
    }

    .upKeep_brands .c1 .u-card {
        padding-right: 0rem;
    }
}


/* !upKeep_peace */


.upKeep_peace {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
}

.upKeep_peace .shadow1 {

    background: #000000;
    background: linear-gradient(180deg, rgba(0, 0, 0, 1) 8%, rgba(255, 255, 255, 0) 40%);
    width: 100%;
    position: absolute;
    height: 20%;
    top: 0;
    left: 0;
    z-index: 2;
}


.upKeep_peace .shadow2 {

    background: #000000;
    background: linear-gradient(360deg, rgba(0, 0, 0, 1) 8%, rgba(255, 255, 255, 0) 40%);
    width: 100%;
    position: absolute;
    height: 20%;
    bottom: 0;
    left: 0;
    z-index: 2;
}

.upKeep_peace svg {
    width: 70%;
    height: auto;
    position: relative;
    z-index: 1;
}


.upKeep_peace #rotate_1 {
    animation: rotateOrbit 40s linear infinite;
    transform-origin: 649.942px 622.94px;
}

.upKeep_peace #rotate_2 {
    animation: rotateOrbit 40s linear infinite;
    transform-origin: 649.942px 622.94px;
}

/* orbit 1 */

.upKeep_peace #circle_3 {
    animation: rotateSelf 40s linear infinite;
    transform-box: fill-box;
    transform-origin: center;
}

.upKeep_peace #circle_4 {
    animation: rotateSelf 40s linear infinite;
    transform-box: fill-box;
    transform-origin: center;
}

.upKeep_peace #circle_6 {
    animation: rotateSelf 40s linear infinite;
    transform-box: fill-box;
    transform-origin: center;
}

.upKeep_peace #circle_5 {
    animation: rotateSelf 40s linear infinite;
    transform-box: fill-box;
    transform-origin: center;
}

/* orbit 2 */

.upKeep_peace #circle_1 {
    animation: rotateSelf 40s linear infinite;
    transform-box: fill-box;
    transform-origin: center;
}

.upKeep_peace #circle_2 {
    animation: rotateSelf 40s linear infinite;
    transform-box: fill-box;
    transform-origin: center;
}


text {
    font-family: VisbyRoundCF;
}


@keyframes rotateOrbit {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes rotateSelf {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}


/* !upkeep how  */

.upKeep_how {
    display: flex;
    /* padding : 20rem 0; */
    padding-top: 20rem;
    padding-bottom: 15rem;
}

.upKeep_how .container {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 5%;
}

.upKeep_how .container .c1 {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}


.upKeep_how .container .c1 h1 {
    font-family: var(--Barlow);
    font-style: normal;
    font-weight: 700;
    font-size: 13rem;
    line-height: 1;
    color: transparent;
    text-transform: uppercase;
    -webkit-text-stroke: 1px #ffffff;
}

.upKeep_how .container .c1 h2 {
    font-family: var(--Barlow);
    font-style: normal;
    font-weight: 700;
    font-size: 13rem;
    line-height: 1;
    text-transform: uppercase;
    color: #ffffff;

}


.upKeep_how .container .c1 h3 {
    font-family: var(--Barlow);
    font-style: normal;
    font-weight: 700;
    font-size: 13rem;
    line-height: 1;
    color: transparent;
    text-transform: uppercase;
    -webkit-text-stroke: 1px #ffffff;
}




.upKeep_how .container .c2 {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3rem;
}


.upKeep_how .container .c2 .block {
    display: flex;
    flex-direction: row;
    gap: 2.5rem;
    width: 100%;

}

.upKeep_how .container .c2 .block .num {
    width: 14%;
}

.upKeep_how .container .c2 .block .num h1 {
    font-family: Barlow;
    font-size: 5rem;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 0.99;
    letter-spacing: normal;
    text-align: left;
    color: #00a0e0;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    border: 1px solid #00a0e0;
    display: flex;

    align-items: center;
    justify-content: center;

}


.upKeep_how .container .c2 .block .text {
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* gap: 3rem; */
}

.upKeep_how .container .c2 .block .text h1 {
    font-family: Barlow;
    font-size: 3.5rem;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: normal;
    text-align: left;
    color: #fff;

}

.upKeep_how .container .c2 .block .text p {

    font-family: Barlow;
    font-size: 1.5rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.79;
    letter-spacing: normal;
    text-align: left;
    color: #fff;
}

/* !upkeep Head Para  */


.upKeep_headPara {

    position: relative;
    padding-top: 10rem;
    padding-bottom: 5rem;
}


.upKeep_headPara .container {
    width: 100%;
    position: relative;
}


.upKeep_headPara .container h1 {
    font-family: Barlow;
    font-size: 8.3rem;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-align: left;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
}

.upKeep_headPara .container p {
    font-family: Barlow;
    font-size: 6.3rem;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 0.98;
    letter-spacing: normal;
    text-align: left;
    color: #fff;
    text-transform: uppercase;
}

/* !upKeepInfor  */

.upKeep_info {
    position: relative;
    padding-top: 7rem;
    padding-bottom: 12rem;

}

.upKeep_info .container {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 7%;
    row-gap: 12rem;
}


.upKeep_info .container img {
    max-width: 7.3rem;
    margin-bottom: 1.4rem;
}

.upKeep_info .container h1 {
    font-family: Barlow;
    font-size: 6rem;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 0.99;
    letter-spacing: normal;
    text-align: left;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 2rem;
}

.upKeep_info .container ul {
    position: relative;

    margin-left: 4%;

}

.upKeep_info .container ul li {
    list-style-type: none;
    font-family: Barlow;
    font-size: 1.6rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.3;
    letter-spacing: normal;
    text-align: left;
    color: #fff;
    margin-bottom: 3rem;
    position: relative;

}

.upKeep_info .container ul li::before {
    content: "";
    position: absolute;
    left: -2.5rem;
    top: 0.3rem;
    width: 1.2rem;
    height: 1.2rem;
    background-color: #00a0e0;
    border-radius: 50%;
}


/* !upKeep Contact  */


.upKeep-contact {
    color: #ffffff;

    padding-top: 5rem;
    padding-bottom: 10rem;

}

.upKeep-contact .container {
    width: 100%;

    display: flex;
    flex-direction: column;
    /* max-width: 100%; */
    align-items: flex-start;
}


.upKeep-contact .container form {
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.upKeep-contact .container .form-title {
    font-family: Barlow;
    font-size: 4.8rem;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.29;
    letter-spacing: normal;
    text-align: left;
    color: #fff;
    margin-bottom: 5.4rem;
}

.upKeep-contact .container form .form-field {
    position: relative;
    margin-bottom: 3rem;
    width: 100%;
}

.upKeep-contact .container form .form-label {
    position: absolute;
    top: -15%;
    left: 5rem;

    background-color: #000;
    padding: 0 .4rem;


    z-index: 1;
    pointer-events: none;


    font-family: Barlow;
    font-size: 1.5rem;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.88;
    letter-spacing: normal;
    text-align: left;
    color: #908b8b;
}

.upKeep-contact .container form .form-input {
    width: 100%;
    padding: 3rem 5rem;
    font-family: Barlow;
    font-size: 3.2rem;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 0.88;
    letter-spacing: normal;
    text-align: left;
    color: #fff;
    font-weight: bold;
    background-color: #000;
    border: 1px solid #908B8B;
    color: #fff;
    border-radius: 6px;
    outline: none;


}


.upKeep-contact .container form .form-input::placeholder {

    color: #fff;

}

.upKeep-contact .container form .form-button {
    font-family: Barlow;
    font-size: 1.4rem;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.15px;
    text-align: center;
    color: #fff;
    border-radius: .72rem;
    background-color: #00a0e0;
    padding: 1.5rem 3rem;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    border: none;
    outline: none;
}

.upKeep-contact .container form .form-button:hover {
    opacity: .7;
}

.upKeep-contact .wpcf7 {
    width: 100%;
    position: relative;
}


/* !upkeep responsiver  */


@media screen and (max-width: 1024px) {


    .upKeep_headPara .container p {
        font-size: 4.3rem;
    }


    .upKeep_how .container .c1 h1 {
        font-size: 10rem;
    }

    .upKeep_how .container .c1 h2 {
        font-size: 10rem;
    }

    .upKeep_how .container .c1 h3 {
        font-size: 10rem;
    }

    .upKeep_info .container h1 {

        font-size: 5rem;
    }


    .upKeep_banner .container .head h1 {
        font-size: 3.8rem;

    }

    .upKeep_banner .container .head p {
        font-size: 1.4rem;
                max-width: 36rem;

    }

    .upKeep_how .container .c2 .block .text h1 {

        font-size: 3rem;
    }

    .upKeep_headPara .container h1 {

        font-size: 7.3rem;
    }

}


@media (max-width: 48em) {


    .upKeep_banner .container .head .logo {
        max-width: 12.3rem;
        margin-bottom: 1.5rem;
    }

    .upKeep_banner .container .head h1 {
        font-size: 3rem;
    }

    .upKeep_banner .container .head p {
        font-size: 1.4rem;
        text-align: center;
    }



    .upKeep_banner .container .head a {
        padding: 1.2rem 2rem;
    }


    .upKeep-image {

        padding-bottom: 4rem;

    }

    .upKeep_peace svg {
        width: 95%;

    }

    .upKeep_how {

        padding-top: 10rem;
        padding-bottom: 4rem;
    }

    .upKeep_how .container {
        width: 100%;
        display: flex;
        flex-direction: column;

        gap: 3rem;
    }

    .upKeep_how .container .c2 .block .num {
        width: 10%;
    }

    .upKeep_how .container .c1 {
        width: 100%;
    }

    .upKeep_how .container .c2 {
        width: 100%;
    }

    .upKeep_how .container .c1 h1 {
        font-size: 6rem;
    }

    .upKeep_how .container .c1 h2 {
        font-size: 6rem;
    }

    .upKeep_how .container .c1 h3 {
        font-size: 6rem;
    }

    .upKeep_how .container .c2 .block {

        gap: 1.5rem;
        width: 100%;
    }

    .upKeep_how .container .c2 .block .num h1 {
        font-size: 2rem;
        max-width: 6rem;
        margin-top: 1rem;
    }


    .upKeep_how .container .c2 .block .text p {
        font-family: Barlow;
        font-size: 1.4rem;
            line-height: 1.5;
    }

    .upKeep_how .container .c2 {

        gap: 1.5rem;
    }


    .upKeep_headPara {

        padding-top: 6rem;
        padding-bottom: 5rem;
    }

    .upKeep_headPara .container h1 {
        font-size: 3rem;
    }


    .upKeep_headPara .container p {
        font-size: 2.5rem;
        line-height: 1.2;
    }



    .upKeep_info {

        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .upKeep_info .container {

        display: grid;
        grid-template-columns: repeat(1, 1fr);
        column-gap: 0%;
        row-gap: 3rem;
    }


    .upKeep_info .container img {
        max-width: 4.3rem;
        margin-bottom: 1.2rem;
    }

    .upKeep_info .container h1 {
        font-size: 3rem;
    }

    .upKeep_info .container ul {
        position: relative;
        margin-left: 8%;
    }


    .upKeep_info .container ul li {

        font-size: 1.4rem;

        margin-bottom: 1.5rem;
        width: 74%;

    }

    .upKeep-contact .container .form-title {

        font-size: 3rem;

        margin-bottom: 3.5rem;
    }


    .upKeep-contact .container form {
        width: 100%;

    }

    .upKeep-contact .container form .form-input {
        width: 100%;
        padding: 2rem 3rem;

        font-size: 2rem;
    }

    .upKeep-contact .container form .form-label {
        position: absolute;
        top: -15%;
        left: 3rem;


        font-size: 1.2rem;

    }

    .upKeep-contact .container form .form-button {
        padding: 1.2rem 2rem;
    }



    .upKeep-contact {

        padding-top: 5rem;
        padding-bottom: 5rem;
    }


}