@font-face {
    font-family: 'PPTelegraf-Regular';
    src: url('/wp-content/uploads/2025/02/PPTelegraf-Regular.woff') format('woff');
}

@font-face {
    font-family: 'PPTelegraf-Bold';
    src: url('/wp-content/uploads/2025/02/PPTelegraf-Bold.woff') format('woff');
}

:root {
    --top: 12vw;
    --top2: 15vw;
    --left: 7.135vw;
    --darkblue: #030A1E;
    --pink: #FDB4ED;
    --orange: #FD5F02;
    --turqoise: #02AEB4;
    --grey: #E3E3E3;
    --PPTelegrafRegular: "PPTelegraf-Regular", serif;
    --PPTelegrafBold: "PPTelegraf-Bold", serif;
    --headingLarge: 3.385vw;
}

.lenis-disabled {
    overflow: hidden;
}

.lenis-disabled body {
    height: 100svh !important;
    overflow: auto;
}

body {
    /*22px*/
    margin: 0;
    color: var(--darkblue);
    font-size: 1.146vw;
    font-style: normal;
    font-weight: 400;
    line-height: 1.29;
    font-family: var(--PPTelegrafRegular);
    position: relative;
    overflow-x: hidden;
}

body.no-scroll {
    overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    display: block;
    margin: 0;
    font-weight: 400;
}

h1,
.h1 {
    /*75px*/
    font-size: 3.906vw;
    line-height: 1.29;
    font-family: var(--PPTelegrafRegular);
    margin-bottom: 4.6vw;
}

h2,
.h2 {
    /*48px*/
    font-size: 2.5vw;
    line-height: 1.27;
    font-family: var(--PPTelegrafRegular);
    margin-bottom: 3.229vw;
}

h3,
.h3 {
    /*40px*/
    font-size: 2.083vw;
    line-height: 1.29;
    letter-spacing: 0.021vw;
    font-family: var(--PPTelegrafRegular);
    margin-bottom: 0.781vw;
}

h4,
.h4 {
    /*35px*/
    font-size: 1.823vw;
    line-height: 1.29;
    letter-spacing: 0.018vw;
    font-family: var(--PPTelegrafRegular);
    margin-bottom: 1.042vw;
}

h5,
.h5 {
    /*25px*/
    color: black;
    font-size: 1.302vw;
    line-height: 1.35;
    letter-spacing: 0.026vw;
    font-family: var(--PPTelegrafRegular);
    margin-bottom: 1.927vw;
}

h6,
.h6 {
    /*15px*/
    font-size: 0.781vw;
    line-height: 1.29;
    font-family: var(--PPTelegrafRegular);
}

.p-large {
    font-size: 1.615vw;
}

p {
    margin: 0;
    margin-bottom: 1.25vw;
}

p:last-of-type {
    margin-bottom: 0;
}

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

svg {
    display: block;
    width: 100%;
}

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

b {
    font-family: var(--PPTelegrafBold);
}

ul {
    margin-bottom: 3.333vw;
    padding-left: 1.2vw;
}

* {
    box-sizing: border-box;
}

/* ======================== 
        Header
    ==========================*/
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4.063vw var(--left);
    font-size: 0.99vw;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    font-family: var(--PPTelegrafRegular);
    z-index: 10;
    box-sizing: border-box;
    color: white;
    transition: .3s;
}

header.scrolled {
    background-color: var(--darkblue);
    padding: 2vw var(--left);
}

header.scrolled .menu a {
    color: white !important;
}

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100svh;
    object-fit: cover;
    z-index: 15;
    display: none;
}

img.preloader-img {
    width: 100%;
    height: 100svh;
    object-fit: cover;
}

img.logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(3);
    width: 3.958vw;
    z-index: 5;
}

img.logo.logo-before {
    position: fixed;
}

.home .logo-after {
    top: 300%;
    opacity: 0;
}

.home .preloader {
    display: block;
}

.menu {
    width: 43%;
}

.home .menu {
    width: 49%;
}

.menu-row {
    position: relative;
    display: flex;
    gap: 2.344vw;
    left: 0;
}

.menu.menu-left .menu-row {
    justify-content: flex-end;
}

.menu.menu-right .menu-row {
    justify-content: flex-start;
}

.menu a {
    color: white;
    text-decoration: none;
    transition: .3s;
}

.dark-header .menu a {
    color: var(--darkblue);
}

.mobile-menu,
.header-mobile {
    display: none;
}

body:not(.home) img.logo.logo-before {
    display: none;
}

body:not(.home) img.logo {
    top: 50%;
    transform: translate(-50%, -50%) scale(1);
}

/* ======================== 
        Common
    ==========================*/
main#main {
    overflow: hidden;
}

.top {
    padding-top: var(--top);
}

.top2 {
    padding-top: var(--top2);
}

.bottom {
    padding-bottom: var(--top);
}

.left {
    padding-left: var(--left);
}

.right {
    padding-right: var(--left);
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.302vw;
}

.btn {
    font-size: 0.833vw;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.083vw;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    padding: 0.677vw 1.042vw;
    color: var(--darkblue);
    border: 1px solid transparent;
    background-color: var(--turqoise);
    font-family: var(--PPTelegrafBold);
    text-transform: uppercase;
    background: #02aeb4;
}

.btn-turqoise {
    background-color: var(--turqoise);
}

.btn-orange {
    background-color: var(--orange);
}

.btn-pink {
    background-color: var(--pink);
}

.btn-white {
    background-color: white;
}

.btn-txt {
    min-width: 11.823vw;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.menu-row a {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.btn-txt span,
.menu-row a span {
    display: block;
    position: relative;
    transition: .4s;
}

.btn-txt span:first-child,
.menu-row a span:first-child {
    top: 5%;
}

.btn-txt span:last-child,
.menu-row a span:last-child {
    position: absolute;
    top: 150%;
    transform: translateY(-50%);
}

.btn-txt:hover span:first-child,
.menu-row a:hover span:first-child {
    top: -150%;
}

.btn-txt:hover span:last-child,
.menu-row a:hover span:last-child {
    top: 50%;
}

.btn-arrow {
    color: black;
    font-size: 1.042vw;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.833vw;
    text-decoration: none;
    font-family: var(--PPTelegrafBold);
    transition: background 0.3s ease;
    overflow: hidden;
    margin-bottom: 3.646vw;
}

.btn-arrow-small {
    font-size: 0.677vw;
    gap: 0.365vw;
    margin-bottom: 0 !important;
}

.btn-arrow-white {
    color: white;
}

.btn-arrow img {
    display: block;
    width: 0.938vw;
    position: relative;
    transition: .3s;
}

.btn-arrow span {
    display: block;
    position: relative;
    transition: .3s;
}

a.news-box:hover .btn-arrow span {
    transform: translateX(0.938vw);
}

a.news-box:hover .btn-arrow img {
    opacity: 0;
}

.text-reveal {
    opacity: 0;
}

.line-wrapper {
    overflow: hidden;
}

/* ======================== 
        Home
    ==========================*/
.home-project-section {
    position: relative;
    z-index: 2;
}

.bg-holder {
    position: relative;
}

img.home-bg {
    width: 100%;
    height: auto;
}

img.milkway {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

img.bg-half {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.home-section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 91vw;
    color: white;
    z-index: 1;
}

.home-section h1 {
    font-size: 4.167vw;
}

.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 32.76vw;
    background: linear-gradient(180deg, rgba(2, 14, 71, 0.00) 0%, #081340 50.5%, rgba(2, 14, 71, 0.00) 100%);
    opacity: 1;
}

.home-title {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    z-index: 2;
    opacity: 0;
}

.title1 {
    position: relative;
    /*        top: 12vw;*/

}

.title2 {
    position: relative;
    top: 12vw;
    opacity: 0;
}

.element-section {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 117vw;
    z-index: 2;
    overflow: hidden;
}

/*.element-title {
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        width: 100%;
        z-index: 2;
    }*/

img.cloud {
    position: absolute;
    bottom: -18vw;
    width: 31.771vw;
}

img.cloud-left {
    left: 5vw;
}

img.cloud-right {
    right: 5vw;
}

img.pig {
    position: absolute;
    top: 4.427vw;
    left: 10.26vw;
    width: 10.469vw;
}

img.earth {
    position: absolute;
    top: 9.219vw;
    left: 28.906vw;
    width: 15.625vw;
}

img.dumpling {
    position: absolute;
    top: 4vw;
    right: 26.25vw;
    width: 14.479vw;
}

img.small-cloud {
    position: absolute;
    top: 5vw;
    right: 24vw;
    width: 16.927vw;
}

img.red-lolipop {
    position: absolute;
    top: 17.5vw;
    left: 11.979vw;
    width: 38.021vw;
}

img.coaster {
    position: absolute;
    top: 15vw;
    left: 0;
    width: 38vw;
}

img.big-cloud2 {
    position: absolute;
    top: 25vw;
    left: 25vw;
    width: 22vw;
}

img.liquid-cloud {
    position: absolute;
    top: 15.208vw;
    right: 19.01vw;
    width: 14.844vw;
}

img.snowboard {
    position: absolute;
    top: 24.813vw;
    left: 35vw;
    width: 7.76vw;
}

img.blue-lolipop {
    position: absolute;
    top: 33.646vw;
    left: 43.385vw;
    width: 28.594vw;
}

.starwars-holder {
    position: absolute;
    top: 30vw;
    left: 42.604vw;
    width: 10.938vw;
    height: 35vw;
}

img.spaceman {
    position: absolute;
    top: -10%;
    left: 0;
    width: 10.104vw;
}

img.starwars {
    position: absolute;
    top: -10%;
    left: 0;
    width: 8.646vw;
}

.folder-holder {
    position: absolute;
    top: 31.375vw;
    left: 45.573vw;
    width: 7.292vw;
    height: 40vw;
}

img.folder {
    position: absolute;
    top: 0;
    left: 0;
    width: 2.5vw;
}

img.folder.folder2 {
    left: 20%;
}

img.folder.folder4 {
    left: 50%;
    transform: rotate(-45deg);
}

img.folder.folder6 {
    left: 20%;
    transform: rotate(-45deg);
}

img.folder.folder8 {
    left: 40%;
    transform: rotate(-45deg);
}

.adobe-holder {
    position: absolute;
    top: 30vw;
    left: 43.49vw;
    width: 14.896vw;
    height: 40vw;
}

img.photoshop {
    position: absolute;
    top: 0;
    left: 0;
    width: 3.385vw;
}

img.illustrator {
    position: absolute;
    top: 0;
    left: 7.292vw;
    width: 3.385vw;
}

img.figma {
    position: absolute;
    top: 0;
    left: 8.75vw;
    width: 2.865vw;
}

img.indesign {
    position: absolute;
    top: 0;
    left: 3.479vw;
    width: 3.385vw;
}

img.insta {
    position: absolute;
    top: 0;
    left: 10vw;
    width: 3.385vw;
}

img.tiktok {
    position: absolute;
    top: 0;
    left: 11.458vw;
    width: 3.438vw;
}

.butterfly-holder {
    position: absolute;
    top: 54.01vw;
    left: 40vw;
    width: 14vw;
}

img.butterfly.butterfly1 {
    width: 3.594vw;
}

img.butterfly.butterfly2 {
    position: absolute;
    top: -2vw;
    left: 5vw;
    width: 3.385vw;
}

img.butterfly.butterfly3 {
    position: absolute;
    top: -1vw;
    left: 10vw;
    width: 3.281vw;
}

img.butterfly.butterfly4 {
    position: absolute;
    top: 3vw;
    left: 11vw;
    width: 3.333vw;
}

img.fish1 {
    position: absolute;
    top: 46.094vw;
    right: 36.969vw;
    width: 6.615vw;
}

img.fish2 {
    position: absolute;
    top: 51.469vw;
    right: 39.813vw;
    width: 5.781vw;
}

.watermelon-holder {
    position: absolute;
    top: 26.719vw;
    right: 6.406vw;
    width: 12.813vw;
}

img.leg {
    position: absolute;
    top: 0;
    left: 15%;
    width: 100%;
}

img.watermelon {
    width: 100%;
    margin-top: 40%;
}

img.elephant {
    position: absolute;
    top: 0;
    left: 15%;
    width: 100%;
}

.road-holder {
    position: absolute;
    top: 36.146vw;
    right: 0;
    width: 33.698vw;
}

img.blue-mountain {
    position: absolute;
    top: -7.292vw;
    right: 0;
    width: 33.177vw;
}

img.road {
    position: relative;
    width: 100%;
}

img.flamingo {
    position: absolute;
    top: 4.271vw;
    right: 17.552vw;
    width: 5.365vw;
}

img.skater2 {
    position: absolute;
    top: 5.052vw;
    right: 23.125vw;
    width: 6.302vw;
}

img.panda {
    position: absolute;
    top: 7.5vw;
    right: 2.604vw;
    width: 11vw;
}

img.rocket {
    position: absolute;
    top: 55vw;
    left: -12vw;
    width: 11.458vw;
}

img.big-cloud {
    position: absolute;
    top: 8.542vw;
    top: 12vw;
    left: 0vw;
    width: 68.49vw;
    width: 57.49vw;
}

img.diver {
    position: absolute;
    top: 29.427vw;
    left: 54.583vw;
    width: 5.521vw;
}

img.big-mountain {
    position: absolute;
    top: 59.531vw;
    right: 0;
    width: 80.625vw;
}

img.planet {
    position: absolute;
    top: 41.198vw;
    left: 7.344vw;
    width: 13.802vw;
}

img.skater {
    position: absolute;
    top: 37.167vw;
    left: 5.052vw;
    width: 21.302vw;
}

img.sushi {
    position: absolute;
    top: 53.135vw;
    left: -1.5vw;
    width: 20.521vw;
}

img.rainbow {
    position: absolute;
    top: 66vw;
    left: 10.26vw;
    width: 14.583vw;
}

img.bird1 {
    position: absolute;
    top: 63.125vw;
    left: 21.042vw;
    width: 7.552vw;
}

img.bird2 {
    position: absolute;
    top: 59.635vw;
    left: 27.917vw;
    width: 8.646vw;
}

.ufo-holder {
    position: absolute;
    top: 46.823vw;
    left: 31.667vw;
    width: 7.292vw;
}

img.ufo {
    width: 100%;
    position: relative;
}

img.light {
    position: absolute;
    top: 1vw;
    left: -.8vw;
    width: 100%;
}

img.fluffy {
    position: absolute;
    top: 47.344vw;
    left: 14.323vw;
    width: 25.677vw;
}

img.plane {
    position: absolute;
    top: 51.458vw;
    left: 36.823vw;
    width: 5.104vw;
}

.unicorn-holder {
    position: absolute;
    top: 48.802vw;
    right: 6.719vw;
    width: 25.313vw;
}

img.designer {
    position: absolute;
    top: 95%;
    left: 4.219vw;
    width: 8.021vw;
}

img.pink-cloud {
    width: 100%;
    position: relative;
}

img.unicorn {
    position: absolute;
    top: 3.2vw;
    right: 6.8vw;
    width: 6.563vw;
}

img.blanket-mountain {
    position: absolute;
    bottom: 3vw;
    left: 0;
    width: 100%;
}

img.surfer {
    position: absolute;
    top: 64.688vw;
    left: 27.188vw;
    width: 20.938vw;
}

img.folders {
    position: absolute;
    top: 64.8vw;
    left: 45.625vw;
    width: 8.5vw;
}

img.statue {
    position: absolute;
    top: 63vw;
    right: 5vw;
    width: 10.5vw;
    transform: rotate(20deg);
}

img.orange {
    position: absolute;
    top: 80.521vw;
    left: 31.563vw;
    width: 6.823vw;
}

img.giraffe {
    position: absolute;
    top: 84.875vw;
    right: 7.406vw;
    width: 12.396vw;
}

.eye-holder {
    position: absolute;
    top: 84.375vw;
    right: 25.26vw;
    width: 13.75vw;
    overflow: hidden;
}

img.lips {
    position: absolute;
    top: 84.375vw;
    right: 26.26vw;
    width: 13.75vw;
}

img.brickwave {
    position: absolute;
    bottom: 0;
    right: 2.865vw;
    width: 69.115vw;
}

img.dice-mountain {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 56.167vw;
}

img.eye {
    position: absolute;
    top: 87.5vw;
    right: 26.5vw;
    width: 13.5vw;
}

img.green-mountain {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 88.542vw;
}

img.banana {
    position: absolute;
    bottom: 0;
    left: 8.802vw;
    width: 35.677vw;
}

img.squirrel {
    position: absolute;
    bottom: 23vw;
    right: 4.688vw;
    width: 6.406vw;
}

img.sloth {
    position: absolute;
    bottom: -2vw;
    left: 35.677vw;
    width: 11.042vw;
}

img.bowling {
    position: absolute;
    bottom: 0;
    left: 38.229vw;
    width: 12.021vw;
}

img.scuba {
    position: absolute;
    bottom: 0;
    right: 6.719vw;
    width: 21.719vw;
}

/* ======================== 
        Home Section
    ==========================*/
.intro-section {
    color: white;
    text-align: center;
    background-color: var(--darkblue);
    position: relative;
    z-index: 2;
}

.intro-txt {
    width: 53vw;
    margin: auto;
    margin-bottom: 5.208vw;
}

.work-highlight {
    color: white;
    background-color: var(--darkblue);
    overflow: hidden;
    position: relative;
    z-index: 2;
}

.work-box {
    position: relative;
}

.work-box>img {
    display: block;
    width: 100%;
    height: 30.313vw;
    object-fit: cover;
}

.work-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(3, 10, 30, 0.1);
    backdrop-filter: blur(2.083vw);
    display: flex;
    align-items: center;
    opacity: 0;
    transition: 0.5s ease-in-out;
}

.work-box:hover .work-overlay {
    opacity: 1;
}

.work-description {
    color: #fff;
    padding: 4.063vw;
}

.work-description a {
    color: inherit;
    text-decoration: none;
}

.work-description h3 {
    font-family: var(--PPTelegrafBold);
}

.work-description .the-exceprt {
    width: 12vw;
}

.work-description .btn-arrow {
    margin-top: 1.25vw;
    margin-bottom: 0;
}

.tags {
    margin-top: 4.167vw;
    display: flex;
    flex-wrap: wrap;
    gap: 0.781vw;
}

.tag-item {
    font-size: 0.677vw;
    padding: 0.313vw 0.938vw;
    border: 1px solid white;
}

.work-slider .custom-scrollbar:before,
.work-slider .custom-scrollbar span {
    background-color: white;
}

.scrollbar-slider {
    width: 100%;
}

.scrollbar-slider.overflow:active {
    cursor: grabbing;
}

.scrollbar-slider.overflow {
    overflow-x: auto;
    cursor: grab;
    display: block;
    margin: auto;
}

.scrollbar-slider .slider-list {
    display: flex;
    flex-wrap: nowrap;
    margin: 0 -1vw;
    padding-bottom: 7.448vw;
}

.slider-item {
    flex-shrink: 0;
    padding: 0 1vw;
    width: 34.375vw;
}

.scrollbar-slider.overflow .slider-list {
    justify-content: flex-start;
}

.scrollbar-slider::-webkit-scrollbar {
    display: none;
    opacity: 0;
}

.custom-scrollbar {
    width: calc(100% - var(--left));
    height: 0.729vw;
    position: relative;
}

.custom-scrollbar:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 2px;
    background-color: var(--darkblue);
}

.custom-scrollbar span {
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 12.865vw;
    height: 100%;
    background-color: var(--darkblue);
}

.home-project-section .accordion {
    margin-bottom: 0 !important;
    padding-bottom: 9vw;
}

/*Work highlights*/
/*.work-highlight .work-item {*/
/*    flex-shrink: 0;*/
/*    padding: 1vw;*/
/*    width: 28.98vw;*/
/*}*/

/*.work-highlight .work-list {*/
/*    display: flex;*/
/*    flex-wrap: wrap;*/
/*    margin: 0 -1vw;*/
/*}*/

/*Products*/
.product-section {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
}

.product-item {
    width: 50%;
    padding: var(--top) var(--left);
}

.product-item h4 {
    font-size: var(--headingLarge);
}

.product-item .btn-arrow {
    margin-bottom: 7.292vw;
}

.product-item.product1 {
    background-color: var(--pink);
}

.product-item.product2 {
    background-color: var(--orange);
    padding-top: 24vw;
}

.product-holder {
    text-align: center;
}

.product-list {
    padding: 2.24vw 0 1vw;
    margin: 3.906vw 0 5.521vw;
    border-top: 1px solid var(--darkblue);
    border-bottom: 1px solid var(--darkblue);
}

/*News*/
.news-section {
    background-color: var(--grey);
    position: relative;
    z-index: 2;
}

.fluffy-holder {
    position: absolute;
    top: 0;
    right: 8.698vw;
    display: flex;
}

img.bird3 {
    width: 11.615vw;
    top: 2.24vw;
    position: relative;
}

img.fluffy3 {
    width: 15.365vw;
    margin-left: -6.51vw;
}

img.dumpling3 {
    position: absolute;
    bottom: -4.115vw;
    left: 11.667vw;
    width: 15.208vw;
}

.news-page .news-section .news-list {
    margin-bottom: 9vw;
}

.excerpt {
    font-size: 0.833vw;
}

.news-list {
    display: block;
    columns: 3;
    gap: 2.083vw;
    break-inside: avoid;
}

.news-item {
    break-inside: avoid;
    margin-bottom: 5.781vw;
}

.news-item.active {
    padding-top: 7.769vw;
}

a.news-box {
    color: inherit;
    text-decoration: none;
}

.news-img {
    overflow: hidden;
}

.news-img img {
    width: 100%;
    transition: .5s;
}

.news-item-desc {
    padding-top: 2.763vw;
}

.news-item-desc h4 {
    margin-bottom: 2.033vw;
}

.news-footer {
    display: flex;
    justify-content: space-between;
    gap: 1vw;
    padding-top: 2.086vw;
    padding-bottom: 0.677vw;
    border-bottom: 2px solid var(--darkblue);
}

a.news-box:hover .news-img img {
    transform: scale(1.07);
}

/* ======================== 
        About Page
    ==========================*/
.about-section {
    text-align: center;
    background-color: var(--turqoise);
}

.about-txt {
    width: 63vw;
    margin: auto;
}

.about-txt .button-row {
    margin-top: 5.208vw;
}

.about-vector {
    height: 38.802vw;
    position: relative;
}

img.pink-cloud2 {
    position: absolute;
    bottom: 14.167vw;
    left: 27.708vw;
    width: 31.875vw;
}

img.rainbow2 {
    position: absolute;
    bottom: 14vw;
    left: 9.5vw;
    width: 11vw;
}

img.land1 {
    position: absolute;
    bottom: 0.521vw;
    left: 27.344vw;
    width: 47.031vw;
}

img.land2 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 56.146vw;
}

img.land3 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

img.dumpling2 {
    position: absolute;
    bottom: 19.271vw;
    right: 32.813vw;
    width: 10.417vw;
}

img.fluffy2 {
    position: absolute;
    bottom: 11.458vw;
    right: 35.938vw;
    width: 16.875vw;
}

img.banana2 {
    position: absolute;
    bottom: -3vw;
    right: 30.104vw;
    width: 18.229vw;
}

img.surfer2 {
    position: absolute;
    bottom: 1.589vw;
    left: 19vw;
    width: 15.625vw;
}

.watermelon-holder2 {
    position: absolute;
    bottom: -1vw;
    left: 37.5vw;
    width: 8vw;
}

img.red-lolipop2 {
    position: absolute;
    bottom: -0.26vw;
    right: 16.719vw;
    width: 27.083vw;
}

.vision-section {
    background-color: var(--orange);
}

.accordion {
    margin-top: 5.208vw;
}

.accordion-item {
    padding: 2vw 2.5vw;
    border-top: 2px solid var(--darkblue);
    transition: .2s;
}

.accordion-item.active {
    background-color: var(--pink);
}

.accordion-item:last-child {
    border-bottom: 2px solid var(--darkblue);
}

.accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    cursor: pointer;
}

.accordion-title {
    color: var(--darkblue);
    font-size: var(--headingLarge);
    line-height: 1.29;
    width: 35vw;
}

.accordion-button img {
    width: 3.49vw;
}

.accordion img.minus {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
}

.accordion-content {
    width: 35.99vw;
    padding-bottom: 1vw;
    margin-left: 36.458vw;
    margin-top: -4vw;
    display: none;
}

.testimony-section {
    background-color: var(--grey);
    position: relative;
}

img.eye2 {
    position: absolute;
    top: 0;
    left: 5.625vw;
    width: 8.802vw;
}

.slider-list.testimony-list {
    margin: 0 -0.781vw;
}

.slider-item.testimony-item {
    width: 27.5vw;
    padding: 0 0.781vw;
}

.test-name {
    font-family: var(--PPTelegrafBold);
}

.logo-section {
    background-color: var(--grey);
}

.logo-section .logo {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* 5 columns per row */
    gap: 5.208vw;
    /* Adjust spacing */
    align-items: center;
    justify-content: center;
    text-align: center;
}

.logo-size img {
    max-width: 100%;
    /* Ensures images fit properly */
    height: auto;
    display: block;
    margin: 0 auto;
}

.team-section {
    color: white;
    background-color: var(--darkblue);
    position: relative;
}

img.fish-earth {
    position: absolute;
    bottom: -10vw;
    right: 11.25vw;
    width: 20.052vw;
}

.team-section img.fish-earth {
    bottom: auto;
    top: 0;
}

.slider-list.work-list.team-list {
    margin-top: 5vw;
}

.scrollbar-slider.team-slider.overflow {
    margin-bottom: 9vw !important;
}

.slider-item.team-item {
    width: 27.448vw;
}

.team-item .work-box>img {
    display: block;
    width: 100%;
    height: 23.75vw;
    object-fit: cover;
}

.team-item .work-description {
    padding: 1.563vw;
    width: 100%;
    cursor: pointer;
}

.team-item .work-description h4 {
    font-family: var(--PPTelegrafBold);
    margin-bottom: 0;
}

.team-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(3, 10, 30, 0.23);
    backdrop-filter: blur(2.344vw);
    padding: 5vw 0;
    height: 100vh;
    overflow-y: auto;
    color: white;
    z-index: 10;
    display: none;
}

.team-popup.active {
    display: block;
}

.team-popup .btn-close {
    position: fixed;
    top: 5.5vw;
    right: var(--left);
    width: 1.5vw;
    cursor: pointer;
}

.popup-holder {
    width: 27.188vw;
    margin: auto;
}

.popup-img img {
    width: 100%;
    height: 27.188vw;
    object-fit: cover;
    margin-bottom: 3.854vw;
}

.popup-bio {
    margin-top: 3.387vw;
    margin-bottom: 2.865vw;
}

.team-bio,
.team-email {
    display: none;
}

.about-team-slider-section {
    position: relative;
    background-color: #E3E3E3;
}

.float-dumpling-section {
    position: relative;
}

img.dumpling4 {
    position: absolute;
    bottom: -4.115vw;
    right: 11.667vw;
    width: 15.208vw;
}

/* ======================== 
        Services Page
    ==========================*/
.service-section {
    text-align: center;
    background-color: var(--pink);
    position: relative;
    z-index: 2;
}

.service-txt {
    width: 82vw;
    margin: auto;
}

.service-txt .button-row {
    margin-top: 5.208vw;
}

.service-slider {
    margin-top: 1.5vw !important;
}

.slider-item.service-item {
    width: 27.188vw;
    height: 22.969vw;
}

/*.slider-item.service-item:nth-child(odd) {*/
/*    height: 19.271vw;*/
/*    margin-top: auto;*/
/*}*/

.slider-item.service-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-slider .custom-scrollbar {
    width: calc(100% - var(--left) - var(--left));
    margin-left: var(--left);
    display: none;
}

.brand-section {
    color: white;
    background-color: var(--darkblue);
    position: relative;
    z-index: 1;
}

.brand-section * {
    color: inherit;
}

.watermelon-holder3 {
    position: absolute;
    top: -7.292vw;
    left: 7.292vw;
    width: 9.896vw;
}

.brand-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    /*    margin-bottom: 9.896vw;*/
}

.brand-left {
    width: 50%;
    padding-right: 10vw;
}

.brand-title1 {
    display: none;
}

.brand-circle {
    position: relative;
}

img.brand-inner,
img.brand-middle {
    position: absolute;
    top: 0;
    left: 0;
}

.brand-left img {
    width: 100%;
}

.brand-right {
    width: 50%;
}

.brand-strategy {
    display: flex;
    flex-wrap: wrap;
    margin: -1.042vw;
    padding-bottom: 3.333vw;
}

.strategy-col {
    width: 33.33%;
    padding: 1.042vw;
    text-align: center;
}

.strategy-col img {
    width: 3.333vw;
    margin: 0 auto 0.99vw;
}

.brand-vector {
    padding-top: 6vw;
    position: relative;
}

img.eye3 {
    position: absolute;
    bottom: 8.49vw;
    right: 17.292vw;
    width: 8.594vw;
}

img.brand-mountain {
    width: 100%;
    position: relative;
}

img.blue-lolipop2 {
    position: absolute;
    bottom: 0.01vw;
    right: 29.635vw;
    width: 18.646vw;
    transform: rotate(180deg);
}

img.spike {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 44.948vw;
}

img.files {
    position: absolute;
    left: 30.208vw;
    bottom: -8.958vw;
    width: 13.75vw;
}

img.bird4 {
    position: absolute;
    bottom: -1.979vw;
    left: 28.385vw;
    width: 11.667vw;
}

img.bird5 {
    position: absolute;
    bottom: 5.104vw;
    left: 38.125vw;
    width: 8.75vw;
}

.creative-section {
    background-color: var(--orange);
    position: relative;
}

.creative-section .accordion {
    margin-bottom: 9vw;
    margin-bottom: 0;
}

.creative-section .accordion-title {
    width: 21.875vw;
}

.creative-section .accordion-content {
    margin-left: 21.875vw;
    width: 50.573vw;
}

.creative-row {
    display: flex;
    flex-wrap: wrap;
}

.creative-col:first-child {
    flex: none;
    width: 14.583vw;
    padding-right: 3.854vw;
}

.creative-col {
    flex: 1;
}

.creative-col h6 {
    font-family: var(--PPTelegrafBold);
    margin-bottom: 1vw;
}

.creative-section#sessions {
    background-color: var(--pink);
}

.creative-section#sessions .accordion-item.active {
    background-color: var(--grey);
}

.creative-section#sessions .accordion-content {
    margin: 0;
    width: auto;
    padding-top: 1.094vw;
}

.session-row {
    display: flex;
    flex-wrap: wrap;
    margin: -1.979vw;
}

.session-col {
    width: 33.33%;
    padding: 1.979vw;
}

/* ======================== 
        Our Works Page
    ==========================*/

.gallery-item.has-1-column .gallery-div.video-embed * {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    display: block;
    object-fit: cover;
    border: 0;
}    
.gallery-item.has-2-column .gallery-div * {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border: 0;
}

.work-intro {
    color: white;
    text-align: center;
    background-color: var(--darkblue);
    position: relative;
    padding-bottom: 9vw;
}

.work-intro * {
    color: inherit;
}

img.work-vector {
    position: absolute;
    bottom: -7vw;
    right: 9.688vw;
    width: 16.146vw;
}

.work-section {
    background-color: var(--darkblue);
}

.work-listing {
    display: flex;
    flex-wrap: wrap;
    margin: -0.964vw -1.042vw;
    padding-bottom: 11.719vw;
}

.work-listing .work-item {
    /*    width: 48.958vw;*/
    width: 50%;
    padding: 0.964vw 1.042vw;
}

/*.work-listing .work-item:nth-child(4n+2),
.work-listing .work-item:nth-child(4n+3) {
    width: 34.411vw;
}*/

.work-listing .work-box>img {
    /*    height: 44.427vw;*/
    height: 41.8vw;
}

/* ======================== 
        Works Individual Page
    ==========================*/
.work-banner img {
    width: 100%;
    height: 100svh;
    min-height: 40vw;
    max-height: 50vw;
    object-fit: cover;
}

.work-details * {
    color: inherit;
}

.work-details .accordion-content {
    margin: 0;
    width: auto;
    padding-top: 1.094vw;
}

.work-details .accordion {
    margin-top: 0;
}

.work-details .accordion-item {
    border-color: inherit;
}

.work-details .accordion-item.active {
    background-color: transparent;
}

.work-details .accordion-button>div {
    font-size: 3.49vw;
    font-weight: 400;
    line-height: 1;
    font-family: "Instrument Serif", serif;
}

.work-details h4 {
    font-size: 1.563vw;
    margin-bottom: 3vw;
}

.work-details-row {
    display: flex;
    flex-wrap: wrap;
}

.work-left {
    width: 50%;
    padding-right: 10vw;
}

.work-left h1 {
    font-size: var(--headingLarge);
    margin-bottom: 2.292vw;
}

.work-right {
    width: 50%;
}

.work-left .tags {
    margin-top: 2vw;
}

img.work-logo {
    width: 23.958vw;
    margin-top: 6.771vw;
}

.work-gallery * {
    color: inherit;
}

.gallery-holder {
    display: flex;
    flex-direction: column;
    gap: 4.688vw;
}

.gallery-item {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    margin: -1.042vw;
}

.gallery-item.has-padding {
    padding: 0 var(--left);
}

.gallery-item.has-1-column.has-padding:first-of-type {
    padding-top: 4.688vw;
}

.gallery-item.has-1-column .gallery-div {
    width: 100%;
}

.gallery-item.has-2-column .gallery-div {
    width: 50%;
    align-items: self-start;
}

.gallery-item.has-3-column .gallery-div {
    width: 33.33%;
    align-items: self-start;
}

.gallery-item.has-4-column .gallery-div {
    width: 25%;
    align-items: self-start;
}

.gallery-div {
    padding: 1.042vw;
}

.gallery-item img,
.gallery-item video {
    width: 100%;
}

.gallery-credits-section {
    padding-top: 7.135vw;
    padding-bottom: 5vw;
}

.gallery-credits-section.black {
    color: #333;
}

.gallery-credits-section.white {
    color: white;
}

.gallery-credits-section * {
    color: inherit;
}

.work-credits {
    font-size: 0.625vw;
    line-height: 1.76;
    letter-spacing: 0.013vw;
}

a.btn-back {
    display: flex;
    align-items: center;
    gap: 1.25vw;
    text-decoration: none;
    margin-top: 4.115vw;
}

a.btn-back img {
    width: 2.5vw;
}

.gallery-credits-section.white a.btn-back img {
    filter: invert(1) brightness(1000%);
}

/* ======================== 
        News & Insights Page
    ==========================*/
.insights-section {
    text-align: center;
    background-color: var(--grey);
    position: relative;
}

img.news-vector {
    position: absolute;
    right: 12.5vw;
    bottom: 4vw;
    width: 12.656vw;
}

/* ======================== 
        News Individual Page
    ==========================*/
main.news-single {
    background-color: var(--grey);
}

.news-header {
    margin-bottom: 3.233vw;
}

.news-header h1 {
    font-size: 3.387vw;
    margin-bottom: 3.752vw;
}

.news-gallery {
    margin-bottom: 4.482vw;
}

.news-gallery-row {
    display: flex;
    flex-wrap: wrap;
    margin: -1.146vw;
}

.news-gallery-col {
    padding: 1.146vw;
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 2.293vw;
}

.news-gallery-div,
.news-gallery-div img {
    width: 100%;
}

.news-row {
    display: flex;
    flex-wrap: wrap;
    margin: -1.042vw;
}

.news-col {
    width: 50%;
    padding: 1.042vw;
}

/* ======================== 
        Contact Page
    ==========================*/
.contact-section {
    color: white;
    background-color: var(--darkblue);
    min-height: calc(100svh - 11vw);
    display: flex;
    align-items: center;
    position: relative;
}

.contact-section * {
    color: inherit;
}

.contact-txt h1 {
    font-size: var(--headingLarge);
}

img.rocket2 {
    position: absolute;
    bottom: 0;
    right: 9.531vw;
    width: 18.75vw;
}

.contact-page footer {
    padding-top: 0;
}

/* ======================== 
        Others
    ==========================*/
section.section2 {
    height: 10vw;
    background: #030A1E;
    position: relative;
}

.btn-holder {
    position: absolute;
    top: 50px;
    right: 0;
}

.button {
    width: 10vw;
    height: 2vw;
    background: red;
    position: fixed;
    bottom: 50px;
    right: 0;
}

/* ======================== 
        404
    ==========================*/
body.page-template-404 {
    height: 100vh;
    background-color: var(--darkblue);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
}

.page-template-404 header,
.page-template-404 .header-mobile {
    display: none !important;
}

.error-content h1 {
    font-size: 3.387vw;
    color: #FF5D23;
    margin-bottom: 2.032vw;
}

.error-content img {
    width: 17.863vw;
    margin: auto;
}

/* ======================== 
        Footer
    ==========================*/
footer {
    color: white;
    font-size: 0.781vw;
    line-height: 1.5;
    padding: 9.219vw 7.292vw 5.521vw;
    background-color: var(--darkblue);
}

footer * {
    color: inherit;
}

footer a {
    text-decoration: none;
}

.footer-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 4.688vw;
}

.footer-col.footer-col2 {
    display: flex;
    flex-direction: column;
    align-items: self-start;
}

.footer-col2 a {
    display: block;
    position: relative;
    overflow: hidden;
    margin-bottom: 0.469vw;
}

.footer-col2 a:last-child {
    margin-bottom: 0;
}

.footer-col2 a:before,
.footer-col2 a:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: white;
    transition: .4s;
}

.footer-col2 a:before {
    left: -100%;
    transition-delay: .4s;
}

.footer-col2 a:after {
    left: 0%;
}

.footer-col2 a:hover:before {
    left: 0%;
}

.footer-col2 a:hover:after {
    left: 100%;
}

.footer-col.footer-col3 {
    font-size: 0.625vw;
    letter-spacing: -0.013vw;
    margin-left: auto;
}

/* ======================== 
    Extra Large PC
==========================*/
@media only screen and (min-width: 1920px) {}

/* ======================== 
    Ipad Potrait
==========================*/
@media only screen and (max-width: 991px) {
    .home-title {
        /*position: absolute;*/
    }

}

/* ======================== 
    Mobile
==========================*/
@media only screen and (max-width: 767px) {
    :root {
        --top: 30vw;
        --top2: 40vw;
        --left: 5vw;
        --headingLarge: 7vw;
    }

    body {
        font-size: 3.5vw;
        line-height: 1.5;
    }

    h1,
    .h1 {
        font-size: 7vw;
        margin-bottom: 8vw;
    }

    h2,
    .h2 {
        font-size: 6vw;
        line-height: 1.27;
        font-family: var(--PPTelegrafRegular);
        margin-bottom: 6vw;
    }

    h3,
    .h3 {
        font-size: 5.2vw;
        line-height: 1;
        letter-spacing: 0.103vw;
        margin-bottom: 3vw;
    }

    h4,
    .h4 {
        font-size: 4.8vw;
        letter-spacing: 0.046vw;
        margin-bottom: 3.077vw;
    }

    h5,
    .h5 {
        color: black;
        font-size: 4vw;
        letter-spacing: 0.08vw;
        margin-bottom: 6vw;
    }

    h6,
    .h6 {
        font-size: 3.5vw;
    }

    p {
        margin-bottom: 3vw;
    }

    .p-large {
        font-size: 3.8vw;
    }

    ul {
        margin-bottom: 7vw;
        padding-left: 3.2vw;
    }

    /*header*/
    header {
        display: none;
    }

    .header-mobile {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        background: transparent;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5.641vw var(--left);
        box-sizing: border-box;
        transition: .3s;
    }

    .mobile-menu-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .menu-logo {
        width: 15vw;
        position: relative;
        left: -2vw;
    }

    .menu-btn {
        width: 5.897vw;
    }

    .btn-open {
        filter: invert(1);
    }

    .dark-header .btn-open {
        filter: invert(0);
    }

    .header-mobile.scrolled {
        background-color: var(--darkblue);
        padding: 0vw var(--left);
    }

    .header-mobile.scrolled .btn-open {
        filter: invert(1) !important;
    }

    .mobile-menu {
        display: block;
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100%;
        z-index: 100;
        color: white;
        background-color: var(--darkblue);
        box-sizing: border-box;
        overflow: hidden;
        transition: .3s;
    }

    .mobile-menu-holder {
        height: 100svh;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        padding: 5.641vw var(--left) 30vw;
        position: relative;
    }

    .mobile-menu.active {
        right: 0;
    }

    .mobile-menu * {
        color: white;
    }

    .mobile-menu a {
        text-decoration: none;
    }

    .mobile-menu-item {
        padding-top: 15vw;
        display: flex;
        flex-direction: column;
        gap: 5.128vw;
        font-size: 5.128vw;
        line-height: .95;
        margin-bottom: auto;
    }

    .mobile-menu-footer {
        margin-top: 15vw;
        margin-bottom: 15vw !important;
    }

    .mobile-menu-vector {
        position: relative;
        left: 24vw;
        width: fit-content;
        width: max-content;
    }

    img.menu-mountain {
        width: 188.974vw;
        max-width: none;
        margin-bottom: -12.821vw;
        margin-left: -52vw;
        transform: rotate(-2.35deg);
    }

    img.menu-spaceman {
        position: absolute;
        bottom: 62.051vw;
        right: 10.641vw;
        width: 31.026vw;
    }

    img.folders-group {
        position: absolute;
        bottom: 0;
        left: 18.462vw;
        width: 35.897vw;
    }

    img.menu-earth {
        width: 30vw;
    }

    img.menu-fluffy {
        position: absolute;
        top: 2vw;
        left: -24vw;
        width: 45vw;
        max-width: none;
    }

    img.menu-bird {
        position: absolute;
        top: 20vw;
        left: 7vw;
        width: 31vw;
        max-width: none;
    }

    .mobile-menu-vector .watermelon-holder {
        top: auto;
        right: auto;
        bottom: 32.308vw;
        left: -1vw;
        width: 22.821vw;
        margin-top: 9.2vw;
    }

    .mobile-menu-vector img.elephant {
        width: 20.769vw;
    }

    .mobile-menu-vector .unicorn-holder {
        top: auto;
        bottom: 17.949vw;
        right: -10.256vw;
        width: 58.205vw;
    }

    .mobile-menu-vector img.unicorn {
        top: 5.2vw;
        right: 13.8vw;
        width: 16.923vw;
    }

    /*common*/
    .btn {
        font-size: 2.5vw;
        letter-spacing: 0.308vw;
        padding: 2vw 3vw;
    }

    .btn-txt {
        min-width: 35vw;
    }

    .button-row {
        gap: 3.2vw;
    }

    .btn-arrow {
        font-size: 3.333vw;
        gap: 2vw;
        margin-bottom: 8vw;
    }

    .btn-arrow img {
        width: 3vw;
    }

    .excerpt {
        font-size: 3.5vw;
    }

    .scrollbar-slider .slider-list {
        margin: 0 -3vw;
        padding-bottom: 14vw;
    }

    .custom-scrollbar {
        height: 2.5vw;
    }

    .overflow-hidden {
        overflow: hidden;
    }

    .service-slider .custom-scrollbar {
        display: none;
    }

    /*preloader*/
    img.logo.logo-before {
        width: 10vw;
    }

    /*home*/
    .home-section h1 {
        font-size: 8.557vw;
    }

    img.home-bg {
        width: 205.538vw;
        max-width: none;
        height: auto;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }

    img.bg-half {
        width: 200vw;
        max-width: none;
        left: 50%;
        transform: translateX(-50%);
    }

    img.milkway {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 200vw;
        object-fit: cover;
    }

    .home-section {
        height: 190vw;
    }

    .overlay {
        top: 131vw;
        height: 55vw;
    }

    .element-section {
        height: 238vw;
    }

    .element-section img {
        max-width: none;
    }

    img.cloud {
        bottom: -30vw;
        width: 50vw;
    }

    img.cloud-left {
        left: 0vw;
    }

    img.cloud-right {
        right: 0;
    }

    img.pig {
        top: 12.051vw;
        left: 0;
        width: 13.59vw;
    }

    img.earth {
        top: 31.744vw;
        left: 16.872vw;
        width: 23.333vw;
    }

    img.small-cloud {
        top: 18.615vw;
        right: 14vw;
        width: 24.103vw;
    }

    img.dumpling {
        top: 16.051vw;
        right: 16.25vw;
        width: 19.744vw;
    }

    img.big-cloud {
        top: 28vw;
        left: -10vw;
        width: 68.49vw;
        width: 122vw;
        max-width: none;
    }

    img.surfer {
        top: 131.688vw;
        left: 16.188vw;
        width: 30.769vw;
    }

    img.coaster {
        top: 39vw;
        left: -34vw;
        width: 59vw;
    }

    img.big-cloud2 {
        top: 59vw;
        left: 4vw;
        width: 30vw;
    }

    img.red-lolipop {
        top: 45.5vw;
        left: -14vw;
        width: 58.462vw;
    }

    img.skater {
        top: 100vw;
        left: 0;
        width: 27.179vw;
    }

    img.liquid-cloud {
        top: 35.208vw;
        right: 0;
        width: 25.641vw;
    }

    img.snowboard {
        top: 64.813vw;
        left: 35vw;
        width: 11.026vw;
    }

    img.blue-lolipop {
        top: 72.646vw;
        left: 52.385vw;
        width: 39.231vw;
    }

    .folder-holder {
        top: 68vw;
        left: 45.573vw;
        width: 13.292vw;
        height: 68vw;
    }

    img.folder {
        width: 4.5vw;
    }

    img.folders {
        top: 132vw;
        left: 42.625vw;
        width: 16.308vw;
    }

    img.fish1 {
        position: absolute;
        top: 100.094vw;
        right: 30.969vw;
        width: 9.897vw;
    }

    img.fish2 {
        position: absolute;
        top: 110.469vw;
        right: 33.813vw;
        width: 8.41vw;
    }

    .adobe-holder {
        position: absolute;
        top: 68vw;
        left: 45.49vw;
        width: 25.896vw;
        height: 68vw;
    }

    img.photoshop {
        width: 5.175vw;
    }

    img.illustrator {
        width: 4.744vw;
    }

    img.figma {
        width: 4.097vw;
    }

    img.indesign {
        width: 4.744vw;
    }

    img.insta {
        width: 4.513vw;
    }

    img.tiktok {
        width: 5.154vw;
    }

    .butterfly-holder {
        position: absolute;
        top: 112.01vw;
        left: 40vw;
        width: 24vw;
    }

    img.butterfly.butterfly1 {
        width: 5.594vw;
    }

    img.butterfly.butterfly2 {
        position: absolute;
        top: -2vw;
        left: 7vw;
        width: 5.385vw;
    }

    img.butterfly.butterfly3 {
        position: absolute;
        top: 1vw;
        left: 13vw;
        width: 5.281vw;
    }

    img.butterfly.butterfly4 {
        position: absolute;
        top: 5vw;
        left: 15vw;
        width: 5.333vw;
    }

    .starwars-holder {
        position: absolute;
        top: 68vw;
        left: 38.604vw;
        width: 18.938vw;
        height: 68vw;
    }

    img.fish1 {
        position: absolute;
        top: 100.094vw;
        right: 30.969vw;
        width: 9.897vw;
    }

    img.fish2 {
        position: absolute;
        top: 110.469vw;
        right: 33.813vw;
        width: 8.41vw;
    }

    .watermelon-holder {
        position: absolute;
        top: 83.719vw;
        right: 0;
        width: 15.128vw;
    }

    .road-holder {
        position: absolute;
        top: 99.146vw;
        right: 0;
        width: 33.698vw;
    }

    .unicorn-holder {
        position: absolute;
        top: 114.802vw;
        right: 3.719vw;
        width: 35.128vw;
    }

    img.unicorn {
        position: absolute;
        top: 4.2vw;
        right: 8.8vw;
        width: 10.256vw;
    }

    img.statue {
        position: absolute;
        top: 127vw;
        right: -1vw;
        width: 17.5vw;
        transform: rotate(20deg);
    }

    img.orange {
        position: absolute;
        top: 164.521vw;
        left: 31.563vw;
        width: 13.823vw;
    }

    img.rainbow {
        display: none;
    }

    img.fluffy {
        position: absolute;
        top: 111.344vw;
        left: 10.323vw;
        width: 25.897vw;
    }

    img.bird1 {
        position: absolute;
        top: 128.125vw;
        left: 12.042vw;
        width: 7.552vw;
    }

    img.bird2 {
        position: absolute;
        top: 127.635vw;
        left: 19.917vw;
        width: 8.646vw;
    }

    .ufo-holder {
        position: absolute;
        top: 109.823vw;
        left: 27vw;
        width: 10.769vw;
    }

    img.plane {
        position: absolute;
        top: 116.458vw;
        left: 33.823vw;
        width: 6.154vw;
    }

    img.rocket {
        position: absolute;
        top: 123vw;
        left: -12vw;
        width: 13.59vw;
    }

    img.planet {
        position: absolute;
        top: 110.198vw;
        left: 2vw;
        width: 20vw;
    }

    img.sushi {
        position: absolute;
        top: 132.135vw;
        left: 4vw;
        width: 20.521vw;
    }

    img.giraffe {
        position: absolute;
        top: 178.875vw;
        right: 0;
        width: 18.396vw;
    }

    img.statue {
        position: absolute;
        top: 127vw;
        right: -1vw;
        width: 17.5vw;
        transform: rotate(20deg);
    }

    img.orange {
        position: absolute;
        top: 164.521vw;
        left: 31.563vw;
        width: 13.823vw;
    }

    img.rainbow {
        display: none;
    }

    img.fluffy {
        position: absolute;
        top: 113.344vw;
        left: 10.323vw;
        width: 25.897vw;
    }

    .ufo-holder {
        position: absolute;
        top: 111.823vw;
        left: 27.667vw;
        width: 10.769vw;
    }

    img.big-cloud {
        top: 28vw;
        left: -10vw;
        width: 68.49vw;
        width: 117vw;
        max-width: none;
    }

    img.diver {
        top: 80vw;
        width: 8.205vw;
    }

    img.surfer {
        position: absolute;
        top: 131.688vw;
        left: 16.188vw;
        width: 30.769vw;
    }


    img.big-mountain {
        top: 119vw;
        right: auto;
        left: 0;
        width: 148vw;
        max-width: none;
    }

    img.brickwave {
        bottom: 12vw;
        right: auto;
        left: 4.615vw;
        width: 121.282vw;
    }

    img.blanket-mountain {
        left: -54vw;
        bottom: 5vw;
        width: 208vw;
    }

    img.dice-mountain {
        width: 120vw;
        margin-left: -41vw;
    }

    img.green-mountain {
        right: auto;
        left: -30vw;
        width: 200.513vw;
        max-width: none;
    }


    img.lips {
        position: absolute;
        top: 180.375vw;
        right: 20.26vw;
        width: 23.846vw;
    }

    img.eye {
        position: absolute;
        top: 185.5vw;
        right: 20.5vw;
        width: 23vw;
    }

    img.sloth {
        position: absolute;
        bottom: -2vw;
        left: 23.677vw;
        width: 16.667vw;
    }

    img.bowling {
        position: absolute;
        bottom: 0;
        left: 33.229vw;
        width: 17.021vw;
    }

    img.squirrel {
        display: none;
    }

    img.scuba {
        position: absolute;
        bottom: 0;
        right: -5vw;
        width: 34.719vw;
    }

    /*home section*/
    .intro-section {
        padding-right: var(--left);
    }

    .intro-txt {
        width: auto;
        margin-bottom: 9vw;
    }

    .remove-br br {
        display: none;
    }

    .slider-item {
        padding: 0 3vw;
        width: 82.051vw;
    }

    .slider-item.testimony-item {
        width: 80vw;
        padding: 3vw;
    }

    .work-box>img {
        height: 76vw;
    }

    .work-overlay {
        display: flex;
        align-items: center;
        backdrop-filter: blur(4.083vw);
        position: relative;
    }

    .work-description {
        padding: 5vw;
    }

    .work-description .btn-arrow {
        margin-top: 3vw;
        margin-bottom: 0;
    }

    .work-box:hover .work-overlay {
        opacity: 0;
    }

    .work-box.active .work-overlay {
        opacity: 1;
    }

    .home-project-section.creative-section .accordion {
        margin-bottom: 0;
        padding-bottom: var(--top);
    }

    .tags {
        margin-top: 6vw;
        gap: 2vw;
    }

    .tag-item {
        font-size: 2.5vw;
        padding: 1vw 2vw;
    }

    .product-item {
        width: 100%;
    }

    .product-item .btn-arrow {
        margin-bottom: 20vw;
    }

    .product-list {
        padding: 5vw 0 3vw;
        margin: 8vw 0 11vw;
    }

    .product-item.product2 {
        padding-top: var(--top);
    }

    .news-list {
        display: flex;
        flex-direction: column;
        columns: 1;
        gap: 15vw;
    }

    .news-item {
        margin-bottom: 0;
    }

    .news-item-desc {
        padding-top: 6.154vw;
    }

    .news-item-desc h4 {
        margin-bottom: 5vw;
    }

    .news-footer {
        gap: 3vw;
        padding-top: 7.436vw;
        padding-bottom: 3.077vw;
    }

    a.news-box:hover .btn-arrow span {
        transform: translateX(3vw);
    }

    .fluffy-holder {
        right: 5vw;
    }

    img.bird3 {
        width: 19.615vw;
        top: 3.24vw;
    }

    img.fluffy3 {
        width: 23.365vw;
        margin-left: -9.51vw;
    }

    img.dumpling3 {
        bottom: -9.115vw;
        left: 5.667vw;
        width: 23.208vw;
    }

    /*about*/
    .about-txt {
        width: auto;
    }

    .about-txt .button-row {
        margin-top: 9vw;
    }

    .about-vector {
        height: 60vw;
    }

    img.rainbow2 {
        bottom: 16vw;
        left: 8.5vw;
        width: 21vw;
    }

    img.pink-cloud2 {
        bottom: 16.167vw;
        left: 32.708vw;
        width: 45.875vw;
    }

    img.land1 {
        bottom: 1.521vw;
        left: 36.344vw;
        width: 56.031vw;
    }

    img.land2 {
        width: 66.146vw;
    }

    img.land3 {
        left: -8vw;
        width: 120vw;
        max-width: none;
    }

    img.dumpling2 {
        bottom: 21.271vw;
        right: 5.813vw;
        width: 20.417vw;
    }

    img.fluffy2 {
        bottom: 15.458vw;
        right: 15.938vw;
        width: 26.875vw;
    }

    img.surfer2 {
        bottom: 3.589vw;
        left: 21vw;
        width: 25.625vw;
    }

    .watermelon-holder2 {
        bottom: -4vw;
        left: 39.5vw;
        width: 15vw;
    }

    img.red-lolipop2 {
        bottom: -0.4vw;
        right: -15.281vw;
        width: 37.083vw;
    }

    img.banana2 {
        bottom: -3vw;
        right: 1.104vw;
        width: 28.229vw;
    }

    img.eye2 {
        width: 14vw;
    }

    .accordion {
        margin-top: 8vw;
    }

    .accordion-item {
        padding: 8vw 3vw;
    }

    .accordion-title {
        width: auto !important;
    }

    .accordion-button img {
        width: 7vw;
    }

    .accordion-content,
    .creative-section .accordion-content {
        width: 100% !important;
        padding-top: 8vw !important;
        padding-bottom: 3vw !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
    }

    .session-row {
        margin: -5vw;
    }

    .session-col {
        width: 100%;
        padding: 5vw;
    }

    .logo-section .logo {
        display: flex;
    }

    .logo-section .logo .slick-slide {
        margin: 0 6vw;
    }

    .logo-size img {
        height: 11vw;
        min-width: 30vw;
        max-width: 40vw;
    }

    img.fish-earth {
        right: 5.25vw;
        width: 29.052vw;
    }

    .scrollbar-slider.team-slider.overflow {
        margin-bottom: 14vw !important;
    }

    .slider-list.work-list.team-list {
        margin-top: 8vw;
    }

    .slider-item.team-item {
        width: 80vw;
    }

    .team-item .work-box>img {
        height: 70vw;
    }

    .team-item .work-description {
        padding: 5vw;
    }

    .work-overlay {
        opacity: 1 !important;
    }

    .team-popup {
        padding: 20vw 5vw 10vw;
        background: rgba(3, 10, 30, 0.5);
        backdrop-filter: blur(6.344vw);
    }

    .team-popup .btn-close {
        top: 10vw;
        right: var(--left);
        width: 7vw;
    }

    .popup-holder {
        width: 100%;
    }

    .popup-img img {
        height: 90vw;
        margin-bottom: 11vw;
    }

    .popup-bio {
        margin-top: 10vw;
        margin-bottom: 9vw;
    }

    img.dumpling4 {
        bottom: -9.115vw;
        width: 23.208vw;
    }

    /*services page*/
    .service-txt {
        width: auto;
    }

    .service-txt .button-row {
        margin-top: 9vw;
    }

    /*.service-slider {*/
    /*    margin-top: 20vw !important;*/
    /*}*/

    .slider-item.service-item {
        width: 60vw;
        height: 50vw;
    }

    /*.slider-item.service-item:nth-child(odd) {*/
    /*    height: 40vw;*/
    /*}*/

    .watermelon-holder3 {
        width: 20vw;
    }

    .brand-vector {
        padding-top: 16vw;
    }

    .brand-row {
        display: block;
        /*margin-bottom: 14vw;*/
    }

    .brand-title1 {
        display: block;
        margin-bottom: 5vw;
    }

    .brand-title2 {
        display: none;
    }

    .brand-left {
        width: 100%;
        padding-right: 0;
        margin-bottom: 15vw;
    }

    .brand-right {
        width: 100%;
    }

    .strategy-title {
        margin-bottom: 1vw;
    }

    /*.creative-section {*/
    /*    padding-top: var(--top2);*/
    /*}*/


    .brand-strategy {
        margin: -4vw;
        padding-bottom: 18vw;
    }

    .strategy-col {
        width: 75%;
        padding: 4vw;
        margin: auto;
    }

    .strategy-col img {
        width: 13vw;
        margin-bottom: 4vw;
    }

    .creative-row {
        display: block;
    }

    .creative-col:first-child {
        width: auto;
        padding-right: 0;
        margin-bottom: 8vw;
    }

    img.eye3 {
        bottom: 21.49vw;
        right: 10.292vw;
        width: 15.594vw;
    }

    img.brand-mountain {
        width: 180vw;
        max-width: none;
        left: -30vw;
    }

    img.blue-lolipop2 {
        bottom: 0.01vw;
        right: 4vw;
        width: 36vw;
    }

    img.spike {
        right: -38vw;
        width: 66vw;
    }

    img.files {
        left: 25.208vw;
        bottom: -15vw;
        width: 25vw;
    }

    img.bird4 {
        bottom: -5.979vw;
        left: 21.385vw;
        width: 20.667vw;
    }

    img.bird5 {
        bottom: 6.104vw;
        left: 40.125vw;
        width: 16.75vw;
    }

    /*work listing*/
    .work-intro {
        padding-bottom: 15vw;
    }

    .work-intro h1 {
        width: auto;
    }

    img.work-vector {
        bottom: -17vw;
        right: 5vw;
        width: 22vw;
    }

    .work-listing {
        margin: -2vw;
        padding-bottom: 16vw;
    }

    .work-listing .work-item {
        width: 100%;
        padding: 2vw;
    }

    .work-listing .work-item:nth-child(4n+2),
    .work-listing .work-item:nth-child(4n+3) {
        width: 100%;
    }

    .work-listing .work-box>img {
        height: 90vw;
    }

    /*work individual*/
    .work-banner img {
        height: 60vw;
        min-height: auto;
        max-height: none;
    }

    .work-details {
        padding-top: 15vw;
        padding-bottom: 15vw;
    }

    .work-details-row {
        display: block;
    }

    .work-left {
        width: 100%;
        padding-right: 0;
        margin-bottom: 10vw;
    }

    .work-left h1 {
        margin-bottom: 5vw;
    }

    .work-right {
        width: 100%;
    }

    .work-details .accordion-button>div {
        font-size: 14vw;
    }

    .work-details .accordion-button>.minus {
        position: relative;
        top: -1vw;
    }

    .work-details .accordion-content {
        padding-top: 2vw !important;
    }

    .work-details h4 {
        font-size: 4vw;
        margin-bottom: 5vw;
    }

    img.work-logo {
        width: 40vw;
        margin-top: 8vw;
    }

    .gallery-item.has-2 img {
        width: 100%;
    }

    .gallery-holder {
        gap: 6vw;
    }

    .gallery-item.has-1-column.has-padding:first-of-type {
        padding-top: 6vw;
    }

    .gallery-item {
        margin: -3vw;
    }

    .gallery-div {
        width: 100% !important;
        padding: 3vw;
    }

    .gallery-credits-section {
        padding-top: 14vw;
        padding-bottom: 10vw;
    }

    .work-credits {
        font-size: 2.5vw;
        letter-spacing: 0.05vw;
    }

    .single-post br {
        display: block;
    }

    a.btn-back {
        gap: 3vw;
        margin-top: 10vw;
    }

    a.btn-back img {
        width: 5vw;
    }

    /*insight page*/
    .page-template-news .news-section {
        padding-top: 15vw;
    }

    img.news-vector {
        right: 5vw;
        bottom: 4vw;
        width: 20vw;
    }

    .news-item.active {
        padding-top: 0;
    }

    .news-page .news-section .news-list {
        margin-bottom: 14vw;
    }

    /*news individual page*/
    .news-header {
        margin-bottom: 6vw;
    }

    .news-header h1 {
        font-size: 7vw;
        margin-bottom: 7vw;
    }

    .news-gallery {
        margin-bottom: 9vw;
    }

    .news-gallery-row {
        margin: -2vw;
    }

    .news-gallery-col {
        padding: 2vw;
        width: 100%;
        gap: 4vw;
    }

    .news-row {
        margin: -4vw;
    }

    .news-col {
        width: 100%;
        padding: 4vw;
    }


    /*contact page*/
    .contact-section {
        align-items: flex-start;
        min-height: calc(100svh - 75vw);
    }

    img.rocket2 {
        bottom: 4vw;
        right: 2vw;
        width: 30vw;
    }

    /*404*/
    .error-content h1 {
        font-size: 7vw;
        margin-bottom: 6vw;
    }

    .error-content img {
        width: 40vw;
    }

    /*footer*/
    footer {
        font-size: 3.846vw;
        padding: 25.641vw var(--left) 7.692vw;
    }

    footer * {
        color: white;
    }

    .footer-row {
        display: block;
    }

    .footer-col.footer-col1 {
        margin-bottom: 20vw;
    }

    .footer-col.footer-col2 {
        margin-bottom: 25vw;
    }

    .footer-col.footer-col3 {
        font-size: 3.077vw;
        letter-spacing: -0.062vw;
        margin-left: auto;
    }

    .footer-col2 a {
        margin-bottom: 1.5vw;
    }

}

@media only screen and (max-width: 767px) and (min-height: 800px) {

    /*contact page*/
    .contact-section {
        align-items: flex-start;
        min-height: calc(100svh - 97vw);
    }
}

/* ======================== 
        Mobile Horizontal
    ==========================*/
@media only screen and (max-width: 767px) and (max-height: 500px) {
    :root {
        --top: 20vw;
        --top2: 30vw;
        --left: 5vw;
        --headingLarge: 6vw;
    }

    body {
        font-size: 2vw;
    }

    h1,
    .h1 {
        font-size: 6vw;
    }

    h2,
    .h2 {
        font-size: 5vw;
        margin-bottom: 5vw;
    }

    h4,
    .h4 {
        font-size: 4.2vw;
    }

    h4,
    .h4 {
        font-size: 3.8vw;
    }

    h5,
    .h5 {
        font-size: 2.5vw;
        letter-spacing: 0.1vw;
        margin-bottom: 3vw;
    }

    h6,
    .h6 {
        font-size: 2vw;
    }

    .p-large {
        font-size: 2.8vw;
    }

    /*mobile menu*/
    .menu-logo {
        width: 8vw;
    }

    .menu-btn {
        width: 3.897vw;
    }

    .mobile-menu-item {
        padding-top: 10.718vw;
        gap: 3.128vw;
        font-size: 3.128vw;
    }

    .mobile-menu-holder {
        padding-bottom: 20vw;
    }

    .mobile-menu-vector {
        left: 22vw;
    }

    img.menu-earth {
        width: 20vw;
    }

    img.menu-fluffy {
        top: 0vw;
        left: -22vw;
        width: 35vw;
    }

    img.menu-bird {
        top: 13vw;
        left: 5vw;
        width: 20vw;
    }

    /*common*/
    .btn {
        font-size: 1.6vw;
        letter-spacing: 0.308vw;
        padding: 1.308vw 2.846vw;
    }

    .button-row {
        gap: 2vw;
    }

    .btn-txt {
        min-width: 25vw;
    }

    .btn-arrow {
        font-size: 2.2vw;
        gap: 1vw;
        margin-bottom: 6vw;
    }

    .btn-arrow img {
        width: 2vw;
    }

    .custom-scrollbar {
        height: 1.5vw;
    }

    .excerpt {
        font-size: 2.5vw;
    }

    /*home*/
    img.home-bg {
        height: 320vw;
        width: 205.538vw;
        max-width: none;
        object-fit: cover;
        object-position: bottom;
    }

    .home-section {
        height: 80vw;
    }

    .overlay {
        top: 25vw;
        height: 47vw;
    }

    .home-section h1 {
        font-size: 5vw;
    }

    img.rocket2 {
        width: 22vw;
    }

    .tag-item {
        font-size: 2vw;
    }

    .work-details h4 {
        font-size: 3vw;
        margin-bottom: 4vw;
    }

    .team-popup {
        padding-top: 15vw;
    }

    .team-popup .btn-close {
        top: 7vw;
        width: 4vw;
    }

    /*news*/
    .news-header h1 {
        font-size: 4vw;
        margin-bottom: 3vw;
    }

    .news-gallery {
        margin-bottom: 5vw;
    }

    /*404*/
    .error-content h1 {
        font-size: 4vw;
        margin-bottom: 3vw;
    }

    .error-content img {
        width: 18vw;
    }

    /*footer*/
    footer {
        font-size: 1.846vw;
        padding-top: 15vw;
    }

    .footer-col.footer-col1 {
        margin-bottom: 10vw;
    }

    .footer-col.footer-col2 {
        margin-bottom: 15vw;
    }

    .footer-col.footer-col3 {
        font-size: 1.077vw;
        letter-spacing: 0;
    }
}