/* Variables */

:root {

    --main-white-color: #FFF; /* var(--main-white-color) */
    --main-lightgrey-color: #F4F6F6; /* var(--main-lightgrey-color) */
    --main-green-color: #002E33; /* var(--main-green-color) */
    --main-light-green-color: #D8E387; /* var(--main-light-green-color) */
    --main-red-color: #f22b29;
    --main-blue-black-color: #1B2E59;
    --main-black-color: #020617; /* var(--main-black-color) */
    --main-light-blue-color: #3F88C5; /* var(--main-light-blue-color) */
    --main-ease: all 0.6s cubic-bezier(0.5, 1, 0.89, 1); /* var(--main-ease) */
    --main-ease-fast: all 0.3s cubic-bezier(0.5, 1, 0.89, 1); /* var(--main-ease-fast) */
}

/* Start Global */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--main-light-blue-color);
}

::-webkit-scrollbar-thumb {
    background: var(--main-green-color);
    transition: all .5s linear;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--main-green-color);
}

::selection {
	background: var(--main-green-color); /* WebKit/Blink Browsers */
	color: var(--main-white-color);
}
::-moz-selection {
	background: var(--main-green-color); /* Gecko Browsers */
	color: var(--main-white-color);
}

/* Fonts */

p, li, span, div, a {
    font-family: 'HelveticaNeue-Regular', Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 {font-family: 'HelveticaNeue-Bold', sans-serif;}
h1, h2, h3, h4, h5, h6, p, li, td, th {margin: 0 0 15px;color: #fff;}

p, li, div, a {font-size: 20px;line-height: 1.5;}

.fs-12 {font-size: 12px;}
.fs-18 {font-size: 18px;}
.fs-24 {font-size: 24px;}
.fs-32 {font-size: 32px;}
.fs-48, h2 {font-size: 48px;}

.fs-3-vw {font-size: 3vw;}
.fs-7-vw {font-size: 7vw;}

.fw-300 {font-family: 'HelveticaNeue-Light', Arial, sans-serif; font-weight: 300;}
.fw-400 {font-weight: 400;}
.fw-500 {font-weight: 500;}
.fw-700 {font-weight: 700;}

.lh-1 {line-height: 1;}
.lh-12 {line-height: 1.2;}

.indent {
    padding-left: 150px;
    text-indent:-150px;
}
.indent-big {
    padding-left: 40%;
    text-indent: -60%;
}
.ta-left {text-align: left;}
.ta-center {text-align: center;}
.ta-right {text-align: right;}

.uppercase {text-transform: uppercase;}

/* Colors */

.color-white,
.color-white-all * {
    color: var(--main-white-color);
}
.black-bg {
    background: var(--main-black-color);
}
.green-bg {
    background: var(--main-green-color);
}
.light-green-bg {
    background: var(--main-light-green-color);
}
.light-blue-bg {
    background: var(--main-light-blue-color);
}
.white-bg {
    background: var(--main-white-color);
}

/* Grid */

.grid {
    max-width: 1840px;
    display: block;
    margin: 0 auto;
}
.sm-grid {
    max-width: 1420px;
    display: block;
    margin: 0 auto;
}
.xsm-grid {
    max-width: 860px;
    display: block;
    margin: 0 auto;
}
.gutter {
    margin: 0 20px;
}

/* Positioning */

.rel {position: relative;}
.abs {position: absolute;}
.fixed {position: fixed;}

.abs-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.go-right {margin-left: auto;}
.go-center {margin: 0 auto;}

.z-1 {z-index: 1;}
.z-2 {z-index: 2;}
.z-10 {z-index: 10;}
.z-999 {z-index: 999;}
.z-1000 {z-index: 1000;}

.display--inline-top {
    display: inline-block;
    vertical-align: top;
}
.display--inline-mid {
    display: inline-block;
    vertical-align: middle;
}
.display--inline-bot {
    display: inline-block;
    vertical-align: bottom;
}
.display-block {display: block;}
.display--grid {display: grid;}

/* Sizing */

.full-width {width: 100%;}
.full-height {height: 100%;}
.max-content {width: max-content;}
.fill-dimentions {width: 100%; height: 100%;}

.block-20 {width: 20%;}
.block-25 {width: 25%;}
.block-30 {width: 30%;}
.block-33 {width: 33.3333%;}
.block-40 {width: 40%;}
.block-50 {width: 50%;}
.block-60 {width: 60%;}
.block-70 {width: 70%;}
.block-80 {width: 80%;}

.pad-top-150 {
    padding-top: 150px;
}
.marg-bot-100 {
    padding-top: 150px;
}
.trans-y-30 {transform: translateY(30px);}

/* Functionality */

.clickable {
    pointer-events: all;
}
.clickable:hover {
    cursor: pointer;
}

/* Buttons */

a.main-button {
    padding: 32px 130px 32px 36px;
    border-radius: 25px;
    background: linear-gradient(90deg, #3F88C5 -11.07%, #3F88C5 36.34%, rgba(0, 0, 0, 0.00) 110.31%);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    display: block;
    width: max-content;
    text-decoration: none;
    margin: 50px 0 0;
    font-size: 24px;
    line-height: 1;
    transition: var(--main-ease);
    position: relative;
    border: 1px solid #040d26;
}
a.main-button:hover {
    box-shadow: 0px 0px 100px -10px rgb(40 88 134);
    color: #fff;
}
a.main-button .button-svg-wrapper {
    width: 56px;
    height: 56px;
    position: absolute;
    right: 27px;
    top: 50%;
    transform: translateY(-50%);
    overflow: hidden;
    border: 1px solid #fff;
    border-radius: 50%;
    transition: var(--main-ease);
}
a.main-button:hover .button-svg-wrapper {
    background: #c1e3ff8c;
}
a.main-button .button-svg-wrapper svg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
a.main-button .button-svg-wrapper svg path {
    transition: var(--main-ease);
}
a.main-button:hover .button-svg-wrapper svg path {
    fill: var(--main-black-color);
}

/* Styling */

.main-page-wrapper {
/* 	background: var(--main-black-color); */
	background: hsl(229 84% 15% / 1);
}
.overflow {overflow: hidden;}
.no-margin {margin: 0;}
.pe-none {pointer-events: none;}
.pe-all {pointer-events: all;}
.site-content-area p {
    font-family: 'HelveticaNeue-Light', Arial, sans-serif;
    font-size: 22px;
    line-height: 1.5;
}
.site-content-area strong {
    font-family: 'HelveticaNeue-Bold', Arial, sans-serif;
}
.site-content-area {
    position: relative;
    z-index: 10;
}

/* Table */



/* Header */

.site-branding a.logo-link {
    display: block;
    width: 182px;
    padding-top: 72px;
    position: relative;
}
.logo-link svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    transition: var(--main-ease);
}
.logo-link svg.logo-white {
    opacity: 1;
}
.logo-link svg.logo-dark {
    opacity: 0;
}
.home .logo-link svg.logo-white {
    opacity: 1;
}
.home .logo-link svg.logo-dark {
    opacity: 0;
}
.open-menu .logo-link svg.logo-white, 
.scrolled .logo-link svg.logo-white {
    opacity: 1;
}
.open-menu .logo-link svg.logo-dark,
.scrolled .logo-link svg.logo-dark {
    opacity: 0;
}
#masthead {
    padding: 30px 0;
    left: 0;
    top: 0;
    transition: var(--main-ease);
}
.header-grid {
    display: grid;
    grid-template-columns: max-content max-content;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
}
.hr-menu {
    display: flex;
    justify-content: end;
    align-items: center;
}
.site-branding a {
    display: block;
    width: max-content;
}
.site-branding img {
    display: block;
    max-width: 350px;
    height: auto;
    width: 100%;
}
.menu-toggle {
    width: 70px;
    height: 70px;
    display: block;
    border: none;
    background: #04A4C2CC;
    border-radius: 10px;
    transition: var(--main-ease);
}
.menu-toggle:hover,
.open-menu .menu-toggle {
    background: linear-gradient(180deg, rgba(4, 164, 194, 0.8) 0%, #0C5BAF 100%);
}
.menu-toggle:hover .menu-bord-ani {
    clip-path: polygon(50% 0, 100% 0, 100% 50%, 50% 50%);
}
.dot-holder {
    display: block;
    position: absolute;
    width: 38px;
    height: 38px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center;
    transition: all 0.6s cubic-bezier(0.33, 1, 0.68, 1);
}
.dot-holder span {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background: #fff;
    transform: translateY(-50%);
    transform-origin: center;
    transition: all 0.6s cubic-bezier(0.33, 1, 0.68, 1);
}
.dot-holder span:nth-child(1) {
    top: 35%;
}
.dot-holder span:nth-child(2) {
    top: 65%;
}
.menu-toggle:hover .dot-holder span {
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
}
.open-menu .menu-toggle .dot-holder {
    height: 40px;
}
.open-menu .menu-toggle .dot-holder span:first-child {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}
.open-menu .menu-toggle .dot-holder span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
}

/* MENU */

.menu-wrapper {
    top: 0;
    right: 0;
    position: fixed;
    z-index: -1;
    width: max-content;
    min-width: 700px;
    height: 100vh;
    background: var(--main-blue-black-color);
    transition: all 1s cubic-bezier(0.33, 1, 0.68, 1);
    overflow: hidden;
    pointer-events: none;
    transform: translateX(100%);
}
#site-navigation {
    position: relative;
}
.menu-wrapper {
    padding: 0 185px 0 125px;
}
.open-menu .menu-wrapper {
    pointer-events: all;
    transform: translateX(0%);
    overflow-y: auto;
}
.menu-main-menu-container {
    display: block;
}
#primary-menu {
    display: block;
    position: relative;
    padding-top: 20px;
}
#primary-menu li {
    display: block;
    overflow: hidden;
}
#primary-menu > li {
    padding: 30px 0;
    margin: 0;
    border-bottom: 1px solid var(--main-white-color);
}
#primary-menu li a {
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--main-white-color);
    opacity: 0.5;
    transform-origin: left;
    transition: all 0.6s cubic-bezier(0.33, 1, 0.68, 1);
    font-family: 'HelveticaNeue-Bold', sans-serif;
    display: block;
    width: max-content;
}
#primary-menu li:hover > a,
#primary-menu li.current-menu-item > a {
    opacity: 1;
}
.main-navigation li {
    position: unset;
}
#primary-menu li img {
    position: absolute;
    right: 10%;
    top: 50%;
    z-index: 0;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    max-width: 438px;
    max-height: 438px;
    transition: all 1s cubic-bezier(0.33, 1, 0.68, 1);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
#primary-menu li.hide img {
    /* clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); */
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}
#primary-menu li.highlight.hide img,
#primary-menu li.current-menu-item:not(.hide) img {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
#primary-menu ul.sub-menu {
    box-shadow: none;
    float: none;
    position: relative;
    top: initial;
    left: initial;
    z-index: 1;
    margin: 50px 0 0;
    padding: 50px 0 0;
    display: block;
    border-top: 1px solid var(--main-white-color);
}
#primary-menu ul.sub-menu li {
    display: block;
}
#primary-menu ul.sub-menu li a {
    font-size: 30px;
    line-height: 1.2;
}
#primary-menu > li.wpml-ls-item a {
    font-size: 20px;
    line-height: 1;
    font-weight: 400;
}

/* Menu Social */

.menu-social__wrap {
    padding: 30px 0;
    margin: 0;
    border-bottom: 1px solid var(--main-white-color);
    display: flex;
    align-items: center;
    gap: 20px;
}
.menu-social__wrap a {
    text-decoration: none;
    display: block;
    opacity: 0.6;
    transition: var(--main-ease);
}
.menu-social__wrap a:hover {
    opacity: 1;
}

/* Menu Search */

.menu-search__wrap {
    padding: 30px 0;
    margin: 0;
}
.menu-search__wrap.search-page-form {
    max-width: 450px;
}
.search-form {
    display: flex;
    gap: 10px;
    align-items: center;
}
.search-form label {
    display: block;
    width: 100%;
}
.search-form input[type="search"] {
    background: transparent;
    padding: 15px 30px;
    border-radius: 10px;
    overflow: hidden;
    transition: var(--main-ease);
    backdrop-filter: blur(10px);
    color: var(--main-white-color);
    width: 100%;
}
.search-form input[type="search"]:focus-visible {
    outline: none !important;
}
.search-submit {
    background: #04A4C2CC;
    border-radius: 10px;
    transition: var(--main-ease);
    padding: 13px;
}
.search-submit:hover {
    background: linear-gradient(180deg, rgba(4, 164, 194, 0.8) 0%, #0C5BAF 100%);
}

/* Footer */

.site-footer {
    margin: 0;
    padding: 80px 0 40px;
    background: var(--main-white-color);
}
.site-footer * {
    font-family: var();
    color: var(--main-blue-black-color);
}
.site-footer li {
    margin: 0 0 10px;
}
.site-footer a {
    text-decoration: none;
    position: relative;
    transition: var(--main-ease);
    color: var(--main-blue-black-color);
    font-weight: 700;
}
.site-footer .fcol-1 a:hover,
.site-footer .fcol-2 a:hover,
.site-footer .fcol-3 a:hover,
.sub-foot a:hover {
    color: #3f88c5;
}
.footer-cta-wrapper {
    margin: 0 auto 120px;
}
.footer-cta-wrapper * {
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
}
.footer-cta-wrapper a {
    color: var(--main-light-blue-color);
}
.footer-col-grid {
    display: grid;
    grid-template-columns: 25% 25% 30% 20%;
    align-items: start;
}
.footer-col-wrapper ul li a {
    font-size: 25px;
    line-height: 1.2;
    margin: 0 0 40px;
    font-weight: 700;
}
.footer-col-wrapper h4 {
    font-size: 35px;
    font-weight: 700;
}
.footer-col-wrapper {
    margin: 0 auto 50px;
}
/* Button animations */

.project-row .home-project-left a {
    position: relative;
    padding-bottom: 5px;
    transition: var(--main-ease);
}
.home-project-left a:hover {
    color: var(--main-light-blue-color)
}
.home-project-left a::before,
.site-footer .fcol-1 a::before,
.site-footer .fcol-2 a::before,
.site-footer .fcol-3 a::before,
.sub-foot a::before {
    content: "";
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    background-color: #3f88c5;
    bottom: 0;
    left: 0;
    transition: transform 300ms ease-in-out;
    transform-origin: bottom right;
}
.home-project-left a:hover::before,
.site-footer .fcol-1 a:hover::before,
.site-footer .fcol-2 a:hover::before,
.site-footer .fcol-3 a:hover::before,
.sub-foot a:hover::before {
    transform: scaleX(1);
    transform-origin: bottom left;
}
.site-footer .fcol-4 a.main-button { 
    margin: 100px auto 0;
}
.footer-bg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 1;
    width: 100%;
    max-width: 1800px;
    height: auto;
}
.footer-bg svg {
    width: 100%;
    height: auto;
}
.btt-button {
    position: absolute;
    right: 20px;
    bottom: 0;
    width: 70px;
    height: 70px;
    border-radius: 10px;
    background: var(--main-light-blue-color);
    transition: var(--main-ease);
    cursor: pointer;
}
.btt-button::before {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    left: 50%;
    top: 60%;
    transform-origin: center;
    transform: translate(-50%, -50%) rotate(135deg);
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
}
.btt-button:hover {
    background: var(--main-black-color);
}
.fcol-4 {height: 100%;}

/* Luminating Divs */

.lum-div {
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(63, 136, 197, 0.00) 0%, #3F88C5 100%);
    filter: blur(90.6500015258789px);
    width: 100%;
}
.lum-s {
    padding-top: 30%;
    max-width: 600px;
}
.lum-l {
    padding-top: 40%;
    max-width: 800px;
}
.lum-circ {
    padding-top: 500px;
    max-width: 500px;
}

/* Luminating Divs Per Page */

.h-lumi-1 {
    left: 20%;
    transform: translateX(-50%);
    top: 5%;
}
.h-lumi-2 {
    right: 0;
    top: 20%;
}
.h-lumi-3 {
    left: 50%;
    top: 80%;
    transform: translate(-50%,-50%);
}

/* CURSOR ANIMATION */

/* CURSOR */

.cursor {display: none;}
.cursor-follower {
	position: fixed;
	top: 0;
	left: 0;
	display: block;
	pointer-events: none;
	mix-blend-mode: soft-light;
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 200px;
    height: auto;
}
.cursor-follower.over-white {
	mix-blend-mode: initial;
}
.cursor-follower.over-white .cursor__inner {
	fill: #0000005e;
	stroke-width: 0;
}
.cursor__inner {
	fill: #fff;
	stroke: #fff;
	stroke-width: 1px;
	transition: all 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
	transform-origin: 50% 50%;
	-moz-transform: scale(0.2);
	-ms-transform: scale(0.2);
	-webkit-transform: scale(0.2);
	transform: scale(0.5);
}
.cursor-follower.active .cursor__inner {
	-moz-transform: scale(1.5);
	-ms-transform: scale(1.5);
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
}
.cursor-follower.active.active-sm .cursor__inner {
	-moz-transform: scale(0.6);
	-ms-transform: scale(0.6);
	-webkit-transform: scale(0.6);
	transform: scale(0.7);
}


/* Home Page */

.bg-change {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: #fff;
}
.bg-change-two {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: #095074;
}
.main-page-wrapper {
    /* padding: 140px 0 0; */
    overflow: hidden;
    position: relative;
}
.home .main-page-wrapper {
    padding: 0;
}
.home-top {
    width: 100%;
    /* padding-top: 48.111%; */
    /* padding-top: calc(100vh - 180px); */
    padding-top: 100vh;
    border: 1px solid #686666;
    background: linear-gradient(90deg, rgba(7, 21, 57, 0.48) 0.2%, rgba(4, 29, 44, 0.00) 99.84%);
    box-shadow: 0px 1px 36.6px 0px rgba(63, 136, 197, 0.30);
}
.home-top-title {
    bottom: 0;
    left: 0;
    padding: 80px;
}
.home-top-title h1 {
    font-size: 128px;
    line-height: 160px;
    /* background: radial-gradient(785.69% 73.69% at 3.95% 73.43%, #3F88C5 0%, #3E7BB0 19.27%, #3D678F 65.67%, #3B4556 100%); */
    /* background:radial-gradient(785.69% 73.69% at 3.95% 73.43%, #140f2d 0%, #3E7BB0 19.27%, #140f2d 65.67%, #3B4556 100%); */
    background: radial-gradient(785.69% 73.69% at 3.95% 73.43%, #3F88C5 0%, #3E7BB0 19.27%, #79b5ef 65.67%, #3B4556 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    margin-bottom: 55px;
}
.home-top-title h1 div {
    color: var(--main-white-color);
    font-weight: 400 !important;
    background-clip: unset;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: #fff;
    font-family: 'HelveticaNeue-Bold', Arial, sans-serif !important;
    line-height: 1;
    font-size: 100px;
    /* transform: translateY(130%); */
    display: block;
}
.home-top-title strong > div {
    overflow: hidden;
    padding-bottom: 20px;
}
.home-top-title strong > div > div > div {
    transform: translateY(120%);
}
.home-top-title p {
    color: #fff;;
}
.home .squares-wrapper {display: none;}
.squares-wrapper {
    right: 80px;
    top: 50%;
    transform: translateY(-50%);
    width: 500px;
    height: 500px;
    z-index: 10;
}
.squares-rel-wrapper {
    width: 500px;
    height: 500px;
    z-index: 10;
    position: relative;
}
.sq-1 {
    /* bottom: 0; */
    top: 200px;
    left: 0;
    z-index: 4;
}
.sq-2 {
    /* bottom: 70px; */
    top: 140px;
    left: 65px;
    z-index: 3;
}
.sq-3 {
    /* bottom: 120px; */
    top: 87px;
    left: 132px;
    z-index: 2;
}
.home-intro-wrapper {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 800px;
    padding-top: 140px;
}
.home-services {
    padding: 50px 0 100px;
}
.serv-title {
    padding: 0 80px;
    font-size: 17vw;
    font-family: 'HelveticaNeue-Bold', Arial, sans-serif !important;
    font-weight: 400;
    line-height: 15vw;
    margin: 0 0 70px;
    text-align: center;
    transform: translateY(150px);
}
.serv-link {
    text-decoration: none;
    position: absolute;
    padding: 25px 25px 150px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.services-repeater {
    display: flex;
    width: max-content;
    gap: 27px;
    padding: 0 80px;
    will-change: transform;
}
.serv-cell {
    padding: 25px 25px 150px;
    border: 1px solid #686666;
    box-shadow: 0px 4px 88.1px 0px #000;
    /* background: rgba(63, 136, 197, 0.22); */
    transition: var(--main-ease);
    border-radius: 40px;
    backdrop-filter: blur(8px);
    min-height: 340px;
    max-width: 400px;
    width: 100%;
}
.serv-cell:nth-child(1) {background: rgba(1,199,227,.7);}
.serv-cell:hover:nth-child(1) {background: rgba(1,199,227,.9);}
.serv-cell:nth-child(2) {background: rgba(1,182,219,.7);}
.serv-cell:hover:nth-child(2) {background: rgba(1,182,219,.9);}
.serv-cell:nth-child(3) {background: rgba(1,165,212,.7);}
.serv-cell:hover:nth-child(3) {background: rgba(1,165,212,.9);}
.serv-cell:nth-child(4) {background: rgba(1,149,204,.7);}
.serv-cell:hover:nth-child(4) {background: rgba(1,149,204,.9);}
.serv-cell:nth-child(5) {background: rgba(1,133,198,.7)}
.serv-cell:hover:nth-child(5) {background: rgba(1,133,198,.9)}
.serv-cell:nth-child(6) {background: rgba(1,116,190,.7)}
.serv-cell:hover:nth-child(6) {background: rgba(1,116,190,.9)}
.serv-cell:nth-child(7) {background: rgba(1,100,183,.7)}
.serv-cell:hover:nth-child(7) {background: rgba(1,100,183,.9)}
.serv-cell:nth-child(8) {background: rgba(1,84,176,.7)}
.serv-cell:hover:nth-child(8) {background: rgba(1,84,176,.9)}
.serv-cell:nth-child(9) {background: rgba(1,68,169,.7)}
.serv-cell:hover:nth-child(9) {background: rgba(1,68,169,.9)}
.serv-cell:nth-child(10) {background: rgba(1,51,162,.7)}
.serv-cell:hover:nth-child(10) {background: rgba(1,51,162,.9)}
.serv-cell:nth-child(11) {background: rgba(0,42,134,.7)}
.serv-cell:hover:nth-child(11) {background: rgba(0,42,134,.9)}
.serv-cell:hover,
.serv-cell.active {
    border-radius: 10px;
}
.serv-svg {
    position: absolute;
    bottom: 25px;
    right: 30px;
    width: 55px;
    height: 55px;
    text-align: center;
}
.serv-svg img,
.serv-svg svg {
    width: auto;
    height: auto;
    max-width: 55px;
    max-height: 55px;
}
.owl-stage {display: flex;}
.serv-cell-title {
    font-size: 25px;
    line-height: 1.1;
    font-family: 'HelveticaNeue-Bold', Arial, sans-serif !important;
    font-weight: 400;
}
.serv-intro {
    overflow-y: auto;
    max-height: 120px;
    opacity: 0;
    font-size: 18px;
    transition: var(--main-ease-fast);
}
.serv-info {
    /* transform: translateY(130px); */
    transition: var(--main-ease-fast);
}
.serv-cell:hover .serv-info {
    transform: translateY(0px);
}
.serv-cell:hover .serv-intro {
    opacity: 0.5;
}
.serv-cell .serv-info {pointer-events: none;}

/* Pin Area */

.home-eoo-area {
    /* height: calc(3000px + 50vh); */
    height: 4000px;
    z-index: 10;
}
.home-eoo-wrapper {
    width: 100%;
    height: 100vh;
}
.home-eoo-row {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 20px;
    align-items: center;
}
.eoo-right-info {
    margin-bottom: 40px;
}
.home-eoo-right {
    padding: 0 40px;
    transform: translateY(60%);
}
.home-eoo-right-wrapper {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    padding: 200px 0;
}
.home-eoo-right-wrapper::before {
    content: "";
    display: block;
    position: absolute;
    z-index: 10;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 70%, rgba(255,255,255,0.8) 100%); */
    filter: blur(20px);
    
}
.eoo-right-info:first-child {
    opacity: 1;
}
.eoo-right-info * {
    color: var(--main-blue-black-color);
}
.eoo-right-info h4 {
    font-size: 80px;
    line-height: 1;
    margin-bottom: 0;
}
.eoo-right-info p {
    font-size: 30px;
    line-height: 1;
    margin: 0;
}
.home-eoo-left {
    padding-top: 100%;
}
.home-eoo-left img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    max-width: 600px;
    width: 100%;
    height: auto;
}
.home-eoo-left div {
    opacity: 0;
}
.home-eoo-left div:first-child {
    opacity: 1;
}

/* Globe Area */

.globe-area {
    /* padding: 150px 0; */
    padding: 40vh 0;
}
.globe-grid {
    margin: 100px 0;
    display: grid;
    grid-template-columns: 25% 50% 25%;
    align-items: center;
}
.globe-wrapper {
    padding-top: 100%;
    z-index: 10;
}
.globe-wrapper::before {
    content: "";
    display: block;
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-left: 1px solid var(--main-white-color);
    border-right: 1px solid var(--main-white-color);
    border-radius: 50%;
    /* background: rgb(242,43,41);
    background: linear-gradient(0deg, rgba(242,43,41,1) 0%, rgba(255,255,255,1) 100%); */
}
hyper-globe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    z-index: 10;
}
#background, #foreground {
    position: absolute;
    left: 50%;
    right: 0;
    top: 50%;
    bottom: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto calc(100%* var(--globe-scale, 0.8)* 1.25);
    pointer-events: none;
    width: 270px;
    height: 100px;
    transform: translate(-50%, -50%);
    opacity: 0.1;
    
}
.globe-right-top,
.globe-right-bot,
.globe-left-top,
.globe-left-bot {
    padding: 40px 0;
}
.globe-right h2,
.globe-right p,
.globe-left h2,
.globe-left p {
    margin: 0;
}
.globe-left-top,
.globe-right-top {
    border-bottom: 1px solid var(--main-white-color);
    position: relative;
}
.globe-left-top::before,
.globe-right-top::before {
    content: "";
    display: block;
    position: absolute;
    width: 22px;
    height: 22px;
    /* background: linear-gradient(180deg, #3F88C5 0%, #140F2D 100%); */
    background: var(--main-white-color);
}
.globe-left-top::before {
    left: 0;
    top: 100%;
    transform: translate(0%, -50%);
    /* border-radius: 50%; */
    border: 1px solid var(--main-white-color);
}
.globe-right-top::before {
    right: 0;
    top: 100%;
    transform: translate(0%, -50%);
    border: 1px solid var(--main-white-color);
}
.globe-grid h4 {
    margin: 50px 0;
    font-size: 32px;
    color: var(--main-white-color);
    font-family: 'HelveticaNeue-Bold', Arial, sans-serif !important;
    font-weight: 400;
    text-transform: capitalize;
}
.globe-grid h4 strong {
    color: var(--main-white-color);
}

/* MARQUEE */

.marquee {
	--gap: 1rem;
	display: flex;
	overflow: hidden;
	user-select: none;
	gap: var(--gap);
}
.marquee-fw {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
}
.marquee-content {
	flex-shrink: 0;
	display: flex;
	justify-content: space-around;
	min-width: 250%;
	gap: var(--gap);
	animation: scroll 40s linear infinite;
}
.marquee-content--cell {
	margin: 0 25px;
	position: relative;
	width: 100%;
}
#brands .marquee-content--cell {
	height: 240px;
	max-width: 350px;
}
.marquee-content img {
	position: absolute;
	width: 100%;
	height: auto;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.marquee-side {
	min-height: 50vh;
	position: relative;
	overflow: hidden;
}
.page-template-home-page .marquee-side {
    min-height: 30vh;
    position: relative;
    overflow: unset;
}
.marquee-side .marquee {
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
	transform-origin: center center;
	width: 110vw;
}
.marquee-side .marquee-content--cell { 
	max-width: max-content;
}
.marquee-content .marquee-content--cell span {
    font-family: 'HelveticaNeue-Bold', sans-serif;
	/* -webkit-text-stroke: 1px #fff; */
    /* -webkit-text-stroke: 1px #4088C4; */
	font-weight: 800;
    color: #fff;
    line-height: 1;
    /* color: #4088C4; */
}
.marquee-content .marquee-content--cell span span {
	color: #020617;
}
@keyframes scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(calc(-100% - var(--gap)));
	}
}
.marquee-content--cell span span {
    position: absolute;
    left: 10px;
    top: -10px;
    z-index: -1;
    width: max-content;
}

/* Home Project Area */

.project-row {
    display: grid;
    grid-template-columns: 40% 1fr;
    width: 100%;
    align-items: center;
    gap: 200px;
    padding: 300px 0 150px;
}
.project-row h4 {
    font-size: 35px;
}
.project-row p {
    font-size: 30px;
    line-height: 1.2;
}
.project-row a {
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
    text-decoration: none;
    transition: var(--main-ease);
}
.project-category-cell {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}
.project-cell {
    width: 100%;
    /* height: 350px; */
    padding-top: 80%;
    border-radius: 50px;
    background: var(--main-white-color);
    position: relative;
}
.project-cell img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    max-width: 185px;
    height: auto;
}
.project-carousel {
    position: relative;
    padding-bottom: 100px;
}
.project-carousel .owl-dots {
    display: none;
}
.project-carousel .owl-nav {
    width: max-content;
    display: flex;
    gap: 20px;
    align-items: center;
    position: absolute;
    bottom: 0;
    right: 0;
}
.project-carousel .owl-nav button {
    font-size: 0;
    position: relative;
    width: 70px;
    height: 70px;
    display: block;
    background: var(--main-light-blue-color);
    cursor: pointer;
    transition: var(--main-ease);
    border: 0;
    border-radius: 10px;
}
.project-carousel .owl-nav button:hover {
    background: var(--main-blue-black-color);
}
.project-carousel .owl-nav button.owl-next::before {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    left: 25px;
    top: 50%;
    transform-origin: center;
    transform: translate(-50%,-50%) rotate(45deg);
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}
.project-carousel .owl-nav button.owl-prev::before {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    left: 40px;
    top: 50%;
    transform-origin: center;
    transform: translate(-50%,-50%) rotate(45deg);
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
}
.project-category-row {
    display: inline-flex;
    width: max-content;
    gap: 20px;
    position: absolute;
}
.project-category-row {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    width: max-content;
    gap: 20px;
}
.category-selector.active {
    opacity: 1;
}
.category-selector {
    opacity: 0.5 ;
}

/* General Pages */

.post-top-pad {padding-top: 80px;}
.page-header {
    margin-bottom: 100px;
}
.page-wrapper.top-pad {
    padding: 80px 0 0;
}
.page-wrapper p, 
.page-wrapper li, 
.page-wrapper div, 
.page-wrapper a {
    font-size: 24px;
    line-height: 1.5;
}

h1.big-title {
    font-size: 140px;
    font-weight: 700;
    line-height: 1;
}
.wp-block-columns .wp-block-column {
    position: relative;
}
.border-divide.wp-block-columns .wp-block-column::before {
    content: "";
    display: block;
    width: 1px;
    height: 100%;
    position: absolute;
    left: calc(100% + 1em);
    transform: translateX(-50%);
    background: #fff;
}
.border-divide.wp-block-columns .wp-block-column:last-child:before {
    display: none;
}
.wp-block-column h4.wp-block-heading {
    font-size: 32px;
}
.wp-block-column * {
    font-size: 24px;
    line-height: 1.5;
}
.wp-block-column a {
    color: #D60700;
}

/* Forms */

.form-group {
    width: 100%;
    max-width: 1200px;
    background: linear-gradient(90deg, #4487C0 0.2%, rgba(4, 29, 44, 0.00) 99.84%);
    border: 1px solid #686666;
    filter: drop-shadow(0px 1px 36.6px rgba(63, 136, 197, 0.30));
    border-radius: 40px;
    padding: 100px;
    margin: 150px auto;
}
.form-group *,
div.wpforms-container-full .wpforms-field-label,
div.wpforms-container-full input[type=checkbox]+label {
    color: #fff;
    font-family: 'HelveticaNeue-Regular', Arial, sans-serif;
}
.page-wrapper .form-group a {
    font-size: 16px;
}
.form-group div.wpforms-container-full {margin: 0;}
.form-group div.wpforms-container-full .wpforms-form textarea,
.form-group div.wpforms-container-full .wpforms-form input[type=text],
.form-group div.wpforms-container-full .wpforms-form input[type=email],
.form-group div.wpforms-container div.wpforms-uploader {
    background: transparent;
    border-width: 0 0 1px 0;
    border-color: #fff;
    color: #fff;
    border-radius: 0;
    resize: none;
    outline: none !important;
}
.form-group textarea:focus,
.form-group input:focus {
    outline: none !important;
    border-width: 0 0 1px 0 !important;
    border-color: #fff !important;
    box-shadow: 0 !important;
}
.form-group div.wpforms-container .wpforms-form .wpforms-field-layout .wpforms-layout-column {
    padding: 0;
    position: relative;
}
.form-group div.wpforms-container div.wpforms-uploader {
    position: absolute;
    bottom: 15px;
    left: 0;
    width: 100%;
    transition: all 0.4s ease-in-out;
}
.form-group div.wpforms-container div.wpforms-uploader:hover {
    background: #140F2D;
}
.form-group .wpforms-container .wpforms-field.file-style {
    position: unset;
}
.form-group div.wpforms-container-full button[type=submit] {
    border-radius: 89px;
    background: linear-gradient(270deg, rgba(255, 255, 255, 0.00) -27.84%, #3F88C5 92.27%);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    padding: 20px 30px;
    display: block;
    line-height: 1;
    font-size: 18px;
    height: auto;
    transition: all 0.5s ease-in-out;
}
.form-group div.wpforms-container-full button[type=submit]:hover {
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.25);
}
.form-group .wpforms-container .wpforms-field-label {
    font-weight: 400;
    font-family: 'HelveticaNeue-Regular', Arial, sans-serif;
}

.b-head {
    font-family: 'HelveticaNeue-Regular', Arial, sans-serif;
    font-size: 10vw;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(180deg, #2D6998 0%, #040B1D 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px #fff;
    font-weight: 800;
}

/* Timeline */

.tl-holder {
	overflow-x: auto;
    overflow-y: hidden;
	width: 100%;
}
/* width */
.tl-holder::-webkit-scrollbar {
	height: 5px;
	width: 5px;
}
  
/* Track */
.tl-holder::-webkit-scrollbar-track {
	background: #efeae7;
}
  
/* Handle */
.tl-holder::-webkit-scrollbar-thumb {
	background: #1e1614;
}
  
/* Handle on hover */
.tl-holder::-webkit-scrollbar-thumb:hover {
	background: #555;
}

.tl-outer-holder::before {
	content: "";
	position: absolute;
	left: 0;
	top: 100%;
	width: 100%;
	height: 1px;
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	border-top: 1px dashed #fff;
}
.tl-cell {
	display: inline-block;
	vertical-align: top;
	min-width: 400px;
	padding: 15px 40px;
	position: relative;
}
.tl-cell::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 0;
    height: 100%;
    width: 1px;
    background: #fff;
}
.tl-cell::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
}
.top-banner-holder::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	background: rgb(239,229,223);
	background: linear-gradient(180deg, rgba(239,229,223,0) 0%, rgba(239,234,231,1) 90%, rgba(239,234,231,1) 100%);
	width: 100%;
	height: 100%;
	z-index: 1;
}
.top-banner-holder img {
	mix-blend-mode: multiply;
	display: block;
	margin: 0 auto;
}
.tl-info p {
	font-size: 20px !important;
	line-height: 1.2;
	margin-bottom: 0;
}
body .tl-holder {
    display: grid;
    margin-bottom: 50px;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 40px;
}
body .tl-holderL:hover {cursor: grab !important;}
body .tl-holder:active {
	cursor: grabbing !important;
	cursor: -moz-grabbing !important;
	cursor: -webkit-grabbing !important;
}
.timeline-row {
    border-top: 1px solid var(--clr-red);
    border-bottom: 1px solid var(--clr-red);
    position: relative;
}
.timeline-fw {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
}
.timeline-fw .tl-holder .tl-cell:first-child {
    margin-left: 100px;
}
.timeline-title h2 {    
    font-family: 'HelveticaNeue-Regular', Arial, sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    color: var(--main-white-color);
    margin-bottom: 90px;
}
.tl-info p {
    margin-bottom: 20px;
}
.tl-info a:hover {
    border: 1px solid #fff;
    background: transparent;
}
.tl-outer-holder {
    margin-bottom: 50px;
}

/* PRELOAD */

.preload-wrapper {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: 1000;
    pointer-events: none;
}
.preload {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
}
.prel-c {
    position: absolute;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100vh;
    height: 100vh;
    z-index: 10;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}
.prel-cell {
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
}
.bg-red {
    background: #D60700;
}
.bg-white {
    background: #fff;
}
.prel-l,
.prel-r {
    position: absolute;
    width: 50%;
    height: 100%;
    z-index: 1;
    background: #020617;
}
.prel-l {left: 0;}
.prel-r {right: 0;}

/* Header Video */

#tb-vid {
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 110%;
    transform: translate(-50%, -50%) rotate(180deg);
}
.home-top::before {
    content: "";
    display: block;
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #016d81;
    mix-blend-mode: hard-light;
}

/* Button Styles */

.serv-page__content a,
.tl-info a,
.wp-block-button__link,
.all-services-link {
    display: block;
    width: max-content;
    padding: 15px 30px;
    border-radius: 10px;
    transition: var(--main-ease);
    color: var(--main-white-color);
    font-size: 18px;
    line-height: 1;
    font-weight: 300;
    text-decoration: none;
    position: relative;
    z-index: 2;
    backdrop-filter: blur(10px);
    border: 1px solid hsl(224deg 41% 55% / 80%);
    overflow: hidden;
}
.tl-info a::before,
.serv-page__content a::before,
.wp-block-button__link::before,
.all-services-link::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: var(--main-ease);
    z-index: -1;
    /* background: linear-gradient(180deg, rgba(4, 164, 194, 0.8) 0%, #0C5BAF 100%); */
    background: #04A4C2CC;
    pointer-events: none;
}
.serv-page__content a:hover::before,
.wp-block-button__link:hover::before,
.tl-info a:hover::before,
.all-services-link:hover::before {
    opacity: 0;
}
.serv-page__content a:hover,
.wp-block-button__link:hover,
.tl-info a:hover,
.all-services-link:hover {
    backdrop-filter: blur(50px);
}

/* Main Page Style */

.main-page-header {
    padding-top: 32%;
    width: 100%;
    margin-bottom: 100px;
}
.main-page-header img {
	width: 100%;
}
.intro__title {
    bottom: 50px;
    left: 0;
}

/* Services Header */

.sp-header,
.services-header {
    padding-top: 32%;
    width: 100%;
}
.sp-header::before,
.main-page-header::before,
.services-header::before {
    content: "";
    display: block;
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--main-blue-black-color);
    mix-blend-mode: hard-light;
}
.sp-header .intro__background,
.main-page-header .intro__background, 
.services-header .intro__background {
    width: 100%;
    height: auto;
    max-height: initial;
}
.intro__background img {
	width: 100%;
}
.sp-post__title,
.main-page__title,
.serv-page__title {
    font-size: 4.4rem;
    line-height: 1;
    margin: 0 0 20px;
}
.sp-post__suptitle,
.main-page__suptitle,
.serv-page__suptitle {
    display: block;
    width: max-content;
    line-height: 1;
    margin: 0 0 20px;
    font-size: 16px;
    letter-spacing: 1px;
    font-family: 'HelveticaNeue-Light', Arial, sans-serif;
    font-weight: 300;
}
.sp-post__grid {
    margin-bottom: 100px;
}
.main-page__grid,
.serv-page__grid {
    margin-bottom: 200px;
}

/* Services Single Page */

.serv-page__content {
    padding: 100px;
    border-bottom: 1px solid var(--main-light-blue-color);
}
.serv-page__content * {
    font-size: 24px;
    font-family: 'HelveticaNeue-Light', Arial, sans-serif;
    line-height: 1.4;
}
.serv-page__content strong {
    font-family: 'HelveticaNeue-Bold', Arial, sans-serif;
}
.service-list__wrapper {
    display: grid;
    grid-template-columns: 3fr 7fr;
    margin-bottom: 100px;
    border-bottom: 1px solid var(--main-light-blue-color);
}
.service-list__follower {
    padding: 50px 50px 50px 0;
}
.serv-list__content {
    padding: 50px;
    border-width: 0 0 1px 1px;
    border-style: solid;
    border-color: var(--main-light-blue-color);
}
.serv-list__content:last-child {
    border-bottom: 0px;
}
.serv-list__content ul li {
    position: relative;
    padding-left: 40px;
}
.serv-list__content ul li::before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    position: absolute;
    left: 7.5px;
    top: 7.5px;
    background: var(--main-light-blue-color);
}
.serv-list__content h4:first-child {
    margin: 0 0 10px;
}
.serv-list__content h4 {
    font-size: 28px;
    line-height: 1.2;
    border-bottom: 1px solid #fff;
    padding-bottom: 10px;
    margin: 50px 0 10px;
}
.serv-list__title {
    padding: 10px 40px 10px 0;
    position: relative;
    z-index: 5;
    overflow: hidden;
    transition: var(--main-ease);
    border-radius: 10px;
}
.serv-list__title:hover,
.serv-list__title.active {
    padding: 10px 20px;
}
.serv-list__title::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: #04A4C2CC;
    z-index: -1;
    transform-origin: left;
    transform: scaleX(0);
    transition: var(--main-ease);
}
.serv-list__title.active::before,
.serv-list__title:hover::before {
    transform: scaleX(1);
}
.serv-list__title a {
    transition: var(--main-ease);
    opacity: 0.8;
    color: var(--main-white-color);
    text-decoration: none;
    font-size: 16px;
    display: block;
    line-height: 1.1;
}
.serv-list__title a:hover,
.serv-list__title.active a {
    opacity: 1;
}

/* All Services Page */

#all-services-page {
    min-height: 100vh;
}

/* News Area */

.posts-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}
.post-thumb {
    overflow: hidden;
    transform-origin: center;
    transition: var(--main-ease);
    border-radius: 4px;
}
.post-thumb a,
.post-thumb img {
    display: block;
    transform-origin: center;
    transition: var(--main-ease);
}
.post-thumb img {
    width: 100%;
}
.post-cell:hover .post-thumb {
    transform: scale(0.95);
}
.post-cell:hover .post-thumb img {
    transform: scale(1.1);
}
.post-thumb {margin-bottom: 20px;}
.posts-row .post-title {
    text-decoration: none;
    font-family: 'HelveticaNeue-Bold', Arial, sans-serif;
    font-size: 24px;
    line-height: 1.2;
    margin-bottom: 20px;
    display: block;
    transition: var(--main-ease);
}
.posts-row .post-title:hover {
    color: var(--main-light-blue-color);
}
.posts-row .post-excerpt {
    font-size: 14px;
    line-height: 1.5;
    color: var(--main-white-color);
    font-family: 'HelveticaNeue-Light', Arial, sans-serif;
}
.post-cell {
    display: block;
    position: relative;
    overflow: hidden;
    padding: 20px 20px 90px;
    border-radius: 20px;
    border: 1px solid var(--main-light-blue-color);
    backdrop-filter: contrast(0.9);
}
.post-cell .wp-block-button__link {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: calc(100% - 40px);
    height: auto;
}
.archive .main-page__title {
    font-size: 0;
}
.archive .main-page__title span {
    font-size: 5.4rem;
    line-height: 1;
}
.nav-area {
    display: flex;
    width: max-content;
    margin: 50px auto;
    gap: 20px;
    padding: 10px 20px;
    border-radius: 10px;
    backdrop-filter: blur(10px);
    border: 1px solid hsl(224deg 41% 55% / 80%);
}
.nav-area span:not(.dots),
.nav-area a {
    font-size: 14px;
    display: block;
    padding: 5px;
    backdrop-filter: blur(1px);
    border-radius: 2px;
    background: #ffffff10;
    text-align: center;
    min-width: 30px;
    transition: var(--main-ease-fast);
}
.nav-area a {
    text-decoration: none;
}
.nav-area span {
    color: #fff;
    font-family: 'HelveticaNeue-Light', Arial, sans-serif;
}
.nav-area a:hover,
.nav-area span.current {
    background: var(--main-light-blue-color);
}

/* Single Post */

/* Single Post Nav */

.sp-nav {
    display: grid;
    grid-template-columns: 1fr 120px 1fr;
    align-items: center;
    gap: 20px;
}
.all-icon {
    display: grid;
    width: 60px;
    height: 60px;
    margin: 0 auto 10px;
    position: relative;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    transition: var(--main-ease);
}
.pagination-box {
    padding: 20px 0;
}
.pagination-box.all-posts {
    padding: 5px 0;
}
.sp-nav a {text-decoration: none;}
.sp-nav span:not(.all-icon) {display: block;}
.sm-title {
    font-size: 14px;
    text-transform: uppercase;
    line-height: 1;
    margin: 0 0 5px;
}
.sm-date {
    font-size: 12px;
    line-height: 1;
    margin: 0;
}
.sp-post-nav__title {
    font-size: 24px;
    line-height: 1;
    margin: 0 0 5px;
    line-height: 1.2;
}
.sp-nav-wrap {
    overflow: hidden;
    border-top: 1px solid var(--main-light-blue-color);
    border-bottom: 1px solid var(--main-light-blue-color);
}
.hov-ani {
    transition: var(--main-ease);
}
.pagination-box:hover .hov-ani {
    color: var(--main-light-blue-color);
}
.pagination-box.all-posts::before {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 100%;
    height: 500%;
    background: #04A4C2CC;
    transform: translate(-50%, -50%);
    transition: var(--main-ease);
    border-left: 1px solid var(--main-light-blue-color);
    border-right: 1px solid var(--main-light-blue-color);
}
.pagination-box.all-posts:hover::before {
    background: linear-gradient(180deg, rgba(4, 164, 194, 0.8) 0%, #0C5BAF 100%);
}
.pagination-box.all-posts:hover .all-icon {
    transform: translateY(5px);
}

/* Posts Block */

.posts-block-wrapper h2 {
    position: relative;
    padding-bottom: 25px;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--main-light-blue-color);
    line-height: 1;
    font-size: 48px;
}

/* Projects Page */

.project-list__item {
    padding: 50px 100px;
    border-bottom: 1px solid var(--main-light-blue-color);
    cursor: pointer;
}
.project-list__item span.num {
    color: var(--main-white-color);
    position: absolute;
    left: 0;
    top: 50px;
    font-size: 20px;
    line-height: 1;
    display: block;
    width: max-content;
}
.project-list__title {
    font-size: 2.6rem;
    line-height: 1;
    transition: var(--main-ease);
}
.arrow {
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 40px;
    height: 40px;
    vertical-align: bottom;
    margin-left: 40px;
    transform-origin: center;
    transition: var(--main-ease);
    border-bottom: 1px solid var(--main-light-blue-color);
    border-right: 1px solid var(--main-light-blue-color);
}
.arrow::before {
    content: "";
    display: block;
    width: 200%;
    height: 1px;
    transform-origin: left;
    position: absolute;
    left: 0;
    top: 0;
    transform: rotate(45deg);
    background: var(--main-light-blue-color);
}
.pi-overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #0000004a;
    z-index: 9;
    opacity: 0;
    transition: var(--main-ease);
    backdrop-filter: blur(2px);
    pointer-events: none;
}
.project-info-wrapper.open + .pi-overlay {
    opacity: 1;
    pointer-events: all;
}
.project-list__item.active .arrow,
.project-list__item:hover .arrow {
    transform: rotate(-45deg);
}
.project-list__item.active .arrow::before {
    background: var(--main-red-color);
}
.project-list__item.active .arrow {
    border-bottom: 1px solid var(--main-red-color);
    border-right: 1px solid var(--main-red-color);
}
.project-list__item.active .project-list__title {
    color: var(--main-red-color);
}
.project-list__item:hover .project-list__title {
    color: var(--main-light-blue-color);
}
.project-info-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 20;
    background: var(--main-blue-black-color);
    width: 100%;
    max-width: 800px;
    padding: 130px 80px 0 80px;
    height: 100vh;
    transform: translateX(100%);
    transition: var(--main-ease);
}
.project-info-wrapper.open {
    transform: translateX(0);
}
.project-info__cell {
    position: relative;
    top: 0;
    height: 0px;
    transition: var(--main-ease);
    opacity: 0;
    z-index: 1;
    pointer-events: none;
}
.project-info__cell-inner {
    max-height: calc(100vh - 200px);
    overflow: auto;
    padding-right: 20px;
}
.project-info__cell-inner h4 {
    margin: 0 0 15px;
    padding: 0 0 15px;
    border-bottom: 1px solid var(--main-light-blue-color);
    line-height: 1;
    font-size: 26px;
}
.project-info__cell li {
    margin: 0 0 10px;
    padding: 0 0 0 25px;
    position: relative;
    font-size: 18px;
    line-height: 1.2;
    font-family: 'HelveticaNeue-Light', Arial, sans-serif;
}
.project-info__cell li::before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background: var(--main-light-blue-color);
    position: absolute;
    left: 0;
    top: 2px;
}
.project-info__cell.show {
    opacity: 1;
    pointer-events: all;
    height: auto;
}
.project-info__cell li {
    opacity: 0;
    transform: translateY(40px);
}
.pi-close {
    position: absolute;
    left: 80px;
    top: 30px;
    width: 70px;
    height: 70px;
    display: block;
    border: none;
    border: 1px solid #04A4C2CC;
    border-radius: 10px;
    transition: var(--main-ease);
    pointer-events: all;
    cursor: pointer;
}
.pi-close::before,
.pi-close::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center;
    width: 38px;
    height: 3px;
    background: #fff;
    transition: var(--main-ease);
}
.pi-close::after {
    transform: translate(-50%, -50%) rotate(45deg);
}
.pi-close::before {
    transform: translate(-50%, -50%) rotate(-45deg);
}
.pi-close:hover {
    background: var(--main-light-blue-color);
}
.pi-close:hover::after {
    transform: translate(-50%, -50%) rotate(35deg);
}
.pi-close:hover::before {
    transform: translate(-50%, -50%) rotate(-35deg);
}

/* 404 Page */

.grid-404 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 100px 0;
    gap: 40px;
    align-items: center;
}
.grid-404 .globe-wrapper {
    padding-top: calc(100vh - 200px);
    z-index: 10;
    position: relative;
}

.grid-404 .globe-wrapper::before {display: none;}
.otgs-development-site-front-end {display: none !important;}

/* RESPONSIVE */

@media only screen and (max-width: 1440px) {
    .home-top-title h1 {margin-bottom: 20px;font-size: 110px;}
    .home-top-title {padding: 20px;}
    .home-eoo-row {grid-template-columns: 1.5fr 1fr;}
    #primary-menu ul.sub-menu {margin: 25px 0 0;padding: 25px 0 0;}
    .menu-wrapper {padding: 0 100px 0;min-width: 600px;}
    .sp-post__suptitle, .main-page__suptitle, .serv-page__suptitle {margin: 0 0 10px;}
    .serv-page__content {padding: 80px 0;}
    .tl-cell {min-width: initial;}
    .footer-cta-wrapper {margin: 0 auto 80px;}
    .posts-row {gap: 20px;}

    .serv-title {font-size: 14vw;}
    .home-top-title h1 div {font-size: 75px;}
    .eoo-right-info h4 {font-size: 50px;}
    .sp-post__title, .main-page__title, .serv-page__title {font-size: 50px;line-height: 1.2;}
    .serv-list__content h4 {font-size: 24px;}
    .project-list__title,
    .fs-48, h2 {font-size: 32px;}
    .tl-info p {font-size: 16px !important;}
    .tl-info a, .wp-block-button__link, .all-services-link {font-size: 16px;}
    .footer-col-wrapper ul li a {font-size: 20px;}
}
@media only screen and (max-width: 1240px) {
    .site-footer {padding: 50px 0;}
    .project-row {grid-template-columns: 1fr 1.5fr;gap: 40px;padding: 150px 0 50px;}
    .footer-cta-wrapper {margin: 0 auto 25px;}
    .trans-y-30 {transform: translateY(20px);}
    .main-page-header,
    .sp-header, .services-header {padding-top: 400px;}
    .main-page__grid, .serv-page__grid {margin-bottom: 100px;}

    .archive .main-page__title span {font-size: 60px;}
    .sp-post__title, .main-page__title, .serv-page__title {font-size: 32px;}
    .wp-block-column h4.wp-block-heading,
    .project-row a {font-size: 24px;}
    .project-row p {font-size: 22px;}
}
@media only screen and (max-width: 1024px) {
    .home-eoo-row {grid-template-columns: 1fr 1fr;}
    .serv-cell {padding: 20px 20px 150px;min-height: 250px;max-width: 350px;}
    .serv-link {padding: 20px 20px 100px;}
    .posts-row {grid-template-columns: repeat(2, 1fr);}
    .trans-y-30 {transform: translateY(13px);}
    .site-branding a.logo-link {width: 150px;padding-top: 60px;}
    .project-carousel .owl-nav button,
    .pi-close, .btt-button, .menu-toggle {width: 60px;height: 60px;}
    .menu-wrapper {min-width: 550px;padding: 0 100px 0 50px;}
    #primary-menu > li {padding: 20px 0;}
    .project-row {grid-template-columns: 1fr;gap: 20px;padding: 50px 0;}
    .service-list__follower {padding: 0 20px 50px 0;}
    .serv-list__content {padding: 20px;}
    .wp-block-spacer {max-height: 20px;}
    .timeline-title h2 {margin-bottom: 40px;}
    body .tl-holder {grid-template-columns: repeat(2, 1fr);}
    .arrow {width: 30px;height: 30px;}
    .project-list__item {padding: 40px 60px;}
    .project-list__item span.num {top: 48px;}
    .project-info-wrapper {width: 80%;}
    .form-group {margin: 50px 0;padding: 60px;}
    .footer-col-wrapper {margin: 40px auto;}
    .menu-social__wrap img {width: 30px;}

    .eoo-right-info h4 {font-size: 40px;}
    .home-top-title h1 {margin-bottom: 10px;font-size: 90px;}
    .home-top-title h1 div {font-size: 55px;}
    .posts-block-wrapper h2,
    #primary-menu li a {font-size: 32px;}
    #primary-menu ul.sub-menu li a {font-size: 24px;}
    .fs-32,
    .footer-col-wrapper h4,
    .project-list__title, .fs-48, h2,
    .timeline-title h2,
    .footer-cta-wrapper *,
    .serv-cell-title {font-size: 24px;}
    .eoo-right-info p {font-size: 22px;}
    .serv-list__content h4 {font-size: 20px;}
    .wp-block-column *,
    .site-content-area p,
    p, li, div, a,
    .footer-col-wrapper ul li a {font-size: 18px;}
}
@media only screen and (max-width: 768px) {
    .home-eoo-right {padding: 0 20px;}
    .serv-title {margin: 0 0 100px;}
    .service-list__wrapper {grid-template-columns: 1fr;}
    .service-list__wrapper .service-list__follower,
    .service-list__wrapper .pin-spacer {display: none;}
    .serv-list__content {border-width: 0 1px 1px 1px;}
    .footer-col-grid {grid-template-columns: repeat(2, 1fr); gap: 20px;}
    .squares-rel-wrapper {margin: 0 auto;}
    .project-list__item {padding: 30px 50px;}
    .arrow {width: 20px;height: 20px;margin-left: 20px;}
    .project-list__item span.num {top: 50%;font-size: 12px;transform: translateY(-50%);}
    .tl-info a, .wp-block-button__link, .all-services-link {padding: 10px 25px;}
    .prel-c {width: 90vw;height: 90vw;top: 50%;transform: translate(-50%, -50%);}
    .menu-wrapper {width: 100%;padding: 110px 50px 0 50px;max-width: 100vw;min-width: initial;}
    .home-top-title {bottom: 50px;}
    .project-info-wrapper {width: 100%;}
    .pi-close {left: initial;right: 100px;}
    .archive .main-page__title {margin: 0;}
    .intro__title {bottom: 20px;}
    .serv-cell {padding: 20px 20px 90px;max-width: 280px;}
    .globe-grid {grid-template-columns: 1fr;}
    .globe-wrapper {pointer-events: none;}
    .globe-left-top, .globe-right-top {border-bottom: 0px;}
    .arrow {position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
    .sp-nav {grid-template-columns: 1fr 80px 1fr;gap: 10px;}
    .globe-left-top::after {
        content: "";
        display: block;
        pointer-events: none;
        width: 50%;
        height: 100%;
        position: absolute;
        top: 100%;
        left: 10px;
        z-index: -1;
        border-top: 1px solid #ffffff66;
        border-right: 1px solid #ffffff66;
    }
    .globe-right-top::after {
        content: "";
        display: block;
        pointer-events: none;
        width: 50%;
        height: 100%;
        position: absolute;
        bottom: 0%;
        right: 10px;
        z-index: -1;
        border-bottom: 1px solid #ffffff66;
        border-left: 1px solid #ffffff66;
    }

    .home-top-title h1 {font-size: 80px;line-height: 1;}
    .home-top-title h1 div {font-size: 40px; padding: 0; line-height: 1.2;}
    .eoo-right-info h4 {font-size: 32px;}
    .posts-row .post-title,
    .fs-32, .footer-col-wrapper h4, .project-list__title, .fs-48, h2, .timeline-title h2, .footer-cta-wrapper *, .serv-cell-title {font-size: 20px;}
    .serv-page__content *, .eoo-right-info p {font-size: 20px;}
    .sp-post-nav__title {font-size: 18px;}
    .sm-title {font-size: 12px;}
}
@media only screen and (max-width: 620px) {
    .main-page-header, .sp-header, .services-header {padding-top: 350px;}
    .posts-row {grid-template-columns: 1fr;}
    .globe-area {transform: none !important;}
    .serv-title {margin: 0 0 150px;}
    div.wpforms-container .wpforms-form .wpforms-field-layout .wpforms-field-layout-columns, div.wpforms-container .wpforms-form .wpforms-field-repeater .wpforms-field-layout-columns {flex-direction: column;}
    div.wpforms-container .wpforms-form .wpforms-field-layout .wpforms-layout-column-50, div.wpforms-container .wpforms-form .wpforms-field-repeater .wpforms-layout-column-50 {width: 100% !important;}
    .form-group div.wpforms-container div.wpforms-uploader {position: relative;}
    .form-group {padding: 40px;}
    .sp-header .intro__background, .main-page-header .intro__background, .services-header .intro__background {width: 100%;height: 100%; transform: translate(-50%,-50%) !important;}
    .sp-header .intro__background img, .main-page-header .intro__background img, .services-header .intro__background img {
        height: 100%;
        width: auto;
        max-width: initial;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    body .tl-holder {grid-template-columns: 1fr;gap: 0; padding: 20px 0 0; margin: 0;}
    .tl-cell {border-bottom: 1px dashed #fff;}
    .tl-cell:last-child {border-bottom: 0px;}
    .tl-cell::after {transform: translateY(-50%);}
    .tl-outer-holder::before {display: none;}
    .sp-nav {grid-template-columns: 1fr;}
    .pagination-box.all-posts::before {height: 100%;}
    .project-info-wrapper {padding: 110px 20px 0 20px;}

    .home-top-title h1 {font-size: 60px;}
    .archive .main-page__title span,
    .home-top-title h1 div {font-size: 32px;}
    .sp-post__title, .main-page__title, .serv-page__title {font-size: 30px;}
    .project-info__cell-inner h4, .wp-block-column h4.wp-block-heading, .project-row a {font-size: 20px;}
    .form-group div.wpforms-container-full button[type=submit] {font-size: 16px;padding: 10px 20px;line-height: 1.2;}
    .serv-page__content *, .eoo-right-info p, .project-row p {font-size: 18px;}
}
@media only screen and (max-width: 480px) {
    #masthead {padding: 20px 0;}
    .home-eoo-row {grid-template-columns: 0.8fr 1fr;}
    .home-eoo-right {padding: 0 10px;}
    .project-category-cell {grid-template-columns: 1fr;gap: 20px;}
    .project-carousel .owl-nav button, .pi-close, .btt-button, .menu-toggle {width: 50px;height: 50px;}
    .project-carousel .owl-nav button.owl-prev::before {width: 20px;height: 20px;left: 30px;}
    .project-carousel .owl-nav button.owl-next::before {width: 20px;height: 20px;left: 20px;}
    .sp-post__title, .main-page__title, .serv-page__title {font-size: 20px; margin: 0;}
    .footer-col-grid {grid-template-columns: 1fr;}
    .btt-button {position: relative;right: initial;bottom:initial;margin: 0 auto;}
    .site-footer {background: #e6e6e6;}
    .site-branding a.logo-link {width: 120px;padding-top: 47px;}
    .btt-button::before {width: 20px;height: 20px;}

    .posts-block-wrapper h2, #primary-menu li a {font-size: 28px;}
    .eoo-right-info h4 {font-size: 26px;}
    #primary-menu ul.sub-menu li a {font-size: 20px;}
    .wp-block-column *, .site-content-area p, p, li, div, a, .footer-col-wrapper ul li a {font-size: 16px;}
    .eoo-right-info p {font-size: 14px;}
}