html, body {
    font-family: 'Barlow', sans-serif;
}

body {
    color: #111;
    background: #000;
    background-image: linear-gradient(to right top, #000, #000, #111c2c, #000, #000);
    overflow-x: hidden;
}

/*  COMMAN STYLES
=====================================*/
/* BUTTON STYLE--------------*/

.outline-btn {
    border: 2px solid #6323dc;
    color: #fff;
    border-radius: 0;
    font-size: 16px;
    padding: 15px 35px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 30px;
}


/* #Cursor
================================================== */

canvas {
    display: block;
}

.cursor,
.cursor2,
.cursor3 {
    position: fixed;
    border-radius: 50%;
    transform: translateX(-50%) translateY(-50%);
    pointer-events: none;
    left: -100px;
    top: 50%;
    mix-blend-mode: difference;
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear;
}

.cursor {
    background-color: #fff;
    height: 0;
    width: 0;
    z-index: 99999;
}

.cursor2,
.cursor3 {
    height: 36px;
    width: 36px;
    z-index: 99998;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out
}

.cursor2.hover,
.cursor3.hover {
    -webkit-transform: scale(2) translateX(-25%) translateY(-25%);
    transform: scale(2) translateX(-25%) translateY(-25%);
    border: none
}

.cursor2 {
    border: 2px solid #fff;
    box-shadow: 0 0 22px rgba(255, 255, 255, 0.6);
}

.cursor2.hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}

@media screen and (max-width: 1200px) {

    .cursor,
    .cursor2,
    .cursor3 {
        display: none
    }
}

/* #Navigation
================================================== */

.cd-header {
    z-index: 10000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: transparent;
    overflow: hidden;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    padding: 30px 0;
}

.cd-header.smaller {
    background: #000;
    box-shadow: 0 0 60px #282828;
    padding: 15px 0;
}

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

.logo-wrap {
    cursor: pointer;
}

.logo-wrap a {
    cursor: pointer;
    color: #fff;
    transition: all 0.3s ease-out;
}

.logo-wrap a:hover {
    opacity: 0.9;
}

.logo-text {
    color: #Fff;
    font-size: 22px;
    font-weight: 500;
}

.nav-but-wrap {
    position: relative;
    transition: all 0.3s ease-out;
}

.menu-icon {
    height: 22px;
    width: 30px;
    position: relative;
    z-index: 2;
    cursor: pointer;
    display: block;
}

.menu-icon__line {
    height: 2px;
    width: 30px;
    display: block;
    background-color: #fff;
    margin-bottom: 7px;
    cursor: pointer;
    -webkit-transition: background-color .5s ease, -webkit-transform .2s ease;
    transition: background-color .5s ease, -webkit-transform .2s ease;
    transition: transform .2s ease, background-color .5s ease;
    transition: transform .2s ease, background-color .5s ease, -webkit-transform .2s ease;
}

.menu-icon__line-left {
    width: 16.5px;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}

.menu-icon__line-right {
    width: 16.5px;
    float: right;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}

.menu-icon:hover .menu-icon__line-left,
.menu-icon:hover .menu-icon__line-right {
    width: 30px;
}

.nav:before,
.nav:after {
    content: "";
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: rgba(20, 21, 26, 0.6);
    border-bottom-left-radius: 200%;
    z-index: -1;
    -webkit-transition: -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, border-radius linear 0.8s;
    transition: -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, border-radius linear 0.8s;
    transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, border-radius linear 0.8s;
    transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s,
        border-radius linear 0.8s;
    -webkit-transform: translateX(100%) translateY(-100%);
    transform: translateX(100%) translateY(-100%);
}

.nav:after {
    background: #000;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}

.nav:before {
    -webkit-transition-delay: .2s;
    transition-delay: .2s;
}

.nav__content {
    position: fixed;
    visibility: hidden;
    top: 50%;
    margin-top: 20px;
    -webkit-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
    width: 100%;
    text-align: center;
}

.nav__list {
    position: relative;
    padding: 0;
    margin: 0;
    z-index: 2;
}

.nav__list-item {
    position: relative;
    display: block;
    -webkit-transition-delay: 0.8s;
    transition-delay: 0.8s;
    opacity: 0;
    text-align: left;
    color: #fff;
    overflow: hidden;
    font-size: 50px;
    padding-left: 180px;
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: 1px;
    -webkit-transform: translate(100px, 0%);
    transform: translate(100px, 0%);
    -webkit-transition: opacity .2s ease, -webkit-transform .3s ease;
    transition: opacity .2s ease, -webkit-transform .3s ease;
    transition: opacity .2s ease, transform .3s ease;
    transition: opacity .2s ease, transform .3s ease, -webkit-transform .3s ease;
    margin-top: 0;
    margin-bottom: 30px;
}

.nav__list-item a {
    position: relative;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.6);
    overflow: hidden;
    cursor: pointer;
    padding-left: 5px;
    padding-right: 5px;
    font-weight: 300;
    z-index: 2;
    display: inline-block;
    text-transform: uppercase;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}

.nav__list-item a:after {
    position: absolute;
    content: '';
    top: 50%;
    margin-top: -2px;
    left: 50%;
    width: 0;
    height: 0;
    opacity: 0;
    background-color: #2702cb;
    z-index: 1;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}

.nav__list-item a:hover:after {
    height: 4px;
    opacity: 1;
    left: 0;
    width: 100%;
}

.nav__list-item a:hover {
    color: rgba(255, 255, 255, 1);
}

.nav__list-item.active-nav a {
    color: rgba(255, 255, 255, 1);
}

.nav__list-item.active-nav a:after {
    height: 4px;
    opacity: 1;
    left: 0;
    width: 100%;
}

.nav__list-item ul.nav__just-sub-item li a:after {
    opacity: 0;
}

.nav__list-item.active-nav ul.nav__just-sub-item li a:after {
    position: absolute;
    content: '';
    top: 50%;
    margin-top: -2px;
    left: 50%;
    width: 0;
    height: 0;
    opacity: 0;
    background-color: #2702cb;
    z-index: 1;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}

.nav__list-item.active-nav ul.nav__just-sub-item li.active-nav a:after {
    opacity: 1;
    height: 3px;
    width: 100%;
    left: 0;
}

.nav__list-item ul.nav__just-sub-item li {
    width: 30%;
    border: 1px solid #3a3a3a;
    display: flex;
    padding: 12px 15px;
    text-align: left;
}

.nav__list-item ul.nav__just-sub-item {
    margin-left: 6px;
    margin-bottom: 22px;
}

.nav__list-item ul.nav__just-sub-item li a {
    font-size: 15px;
    display: inline;
    letter-spacing: 0.5px;
    font-weight: 100;
    line-height: 20px;
    padding: 0;
    color: #fff;
}

.nav__list-item ul.nav__just-sub-item li:hover a {
    color: #a9a9a9;
}

body.nav-active .cd-header.smaller {
    box-shadow: none;
    background-color: transparent;
    padding: 30px 0;
}

body.nav-active .nav__content {
    visibility: visible;
}

body.nav-active .menu-icon__line {
    background-color: #fff;
    -webkit-transform: translate(0px, 0px) rotate(-45deg);
    transform: translate(0px, 0px) rotate(-45deg);
}

body.nav-active .menu-icon__line-left {
    width: 15px;
    -webkit-transform: translate(2px, 4px) rotate(45deg);
    transform: translate(2px, 4px) rotate(45deg);
}

body.nav-active .menu-icon__line-right {
    width: 15px;
    float: right;
    -webkit-transform: translate(-3px, -3.5px) rotate(45deg);
    transform: translate(-3px, -3.5px) rotate(45deg);
}

body.nav-active .menu-icon:hover .menu-icon__line-left,
body.nav-active .menu-icon:hover .menu-icon__line-right {
    width: 15px;
}

body.nav-active .nav {
    position: relative;
    z-index: 1000;
    visibility: visible;
}

body.nav-active .nav:before,
body.nav-active .nav:after {
    -webkit-transform: translateX(0%) translateY(0%);
    transform: translateX(0%) translateY(0%);
    border-radius: 0;
}

body.nav-active .nav:after {
    -webkit-transition-delay: .1s;
    transition-delay: .1s;
}

body.nav-active .nav:before {
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}

body.nav-active .nav__list-item {
    opacity: 1;
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    -webkit-transition: opacity .3s ease, color .3s ease, -webkit-transform .3s ease;
    transition: opacity .3s ease, color .3s ease, -webkit-transform .3s ease;
    transition: opacity .3s ease, transform .3s ease, color .3s ease;
    transition: opacity .3s ease, transform .3s ease, color .3s ease, -webkit-transform .3s ease;
}

body.nav-active .nav__list-item:nth-child(0) {
    -webkit-transition-delay: 0.7s;
    transition-delay: 0.7s;
}

body.nav-active .nav__list-item:nth-child(1) {
    -webkit-transition-delay: 0.8s;
    transition-delay: 0.8s;
}

body.nav-active .nav__list-item:nth-child(2) {
    -webkit-transition-delay: 0.9s;
    transition-delay: 0.9s;
}

body.nav-active .nav__list-item:nth-child(3) {
    -webkit-transition-delay: 1s;
    transition-delay: 1s;
}

body.nav-active .nav__list-item:nth-child(4) {
    -webkit-transition-delay: 1.1s;
    transition-delay: 1.1s;
}

body.nav-active .nav__list-item:nth-child(5) {
    -webkit-transition-delay: 1.2s;
    transition-delay: 1.2s;
}

body.nav-active .nav__list-item:nth-child(6) {
    -webkit-transition-delay: 1.3s;
    transition-delay: 1.3s;
}

body.nav-active .nav__list-item:nth-child(7) {
    -webkit-transition-delay: 1.4s;
    transition-delay: 1.4s;
}

body.nav-active .nav__list-item:nth-child(8) {
    -webkit-transition-delay: 1.5s;
    transition-delay: 1.5s;
}

body.nav-active .nav__list-item:nth-child(9) {
    -webkit-transition-delay: 1.6s;
    transition-delay: 1.6s;
}

body.nav-active .nav__list-item:nth-child(10) {
    -webkit-transition-delay: 1.7s;
    transition-delay: 1.7s;
}


/*-------- ABOVE THE SECTION -------*/
.above-fold-content {
    width: 900px;
    top: 28%;
    position: relative;
    z-index: 100;
}

.above-fold-content h1 {
    color: #fff;
}

.above-fold-content h1 span {
    display: block;
    font-size: 24px;
    text-transform: uppercase;
}

.above-fold-content h1 span:first-child {
    font-weight: 400;
    /* border: 1px dashed #787878; */
    width: 306px;
    margin-bottom: 8px;
    padding: 10px 20px;
    background: #ffffff1f;
    color: #ffffffc7;
    border-radius: 5px;
    text-shadow: 0 0 20px black;
    visibility: hidden;
    height: 0;
}

.above-fold-content h1 span:last-child {
    color: rgb(3 30 255);
    font-weight: 700;
    font-size: 92px;
    line-height: 84px;
}

.above-fold-content h1 span:nth-child(2) {
    color: #fff;
    font-weight: 300;
    text-transform: uppercase;
    display: inline;
    font-size: 60px;
}

.innovation-circle canvas {
    position: relative;
    left: 18%;
}

/*--------------------
GALLERY
==========================*/

/*-----------------
======================BUTTTON ANIMATION------*/
a.learn-more {
    position: relative;
    display: inline-block;
    cursor: pointer;
    outline: none;
    border: 0;
    vertical-align: middle;
    text-decoration: none;
    background: transparent;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
    width: 336px;
    height: auto;
    margin-top: 20px;
}

a.learn-more .circle {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: relative;
    display: block;
    margin: 0;
    width: 60px;
    height: 60px;
    background: linear-gradient(75deg,
            hsla(235, 100%, 35%, 1),
            hsl(234deg 100% 51%));
    border-radius: 30px;
}

a.learn-more .circle .icon {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    background: #fff;
}

a.learn-more .circle .icon.arrow {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    left: 20px;
    width: 1.125rem;
    height: 0.125rem;
    background: none;
}

a.learn-more .circle .icon.arrow::before {
    position: absolute;
    content: "";
    top: -0.25rem;
    right: 0.0625rem;
    width: 0.625rem;
    height: 0.625rem;
    border-top: 0.125rem solid #fff;
    border-right: 0.125rem solid #fff;
    transform: rotate(45deg);
}

a.learn-more .button-text {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 16px 0;
    margin: 0 0 0 1.85rem;
    color: #fff;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    text-transform: uppercase;
    font-size: 17px;
    letter-spacing: 0.5px;
}

a.learn-more .circle {
    width: 100%;
}

a.learn-more:hover .circle .icon.arrow {
    background: #fff;
    transform: translate(1rem, 0);
}

a.learn-more:hover .button-text {
    color: #fff;
}

/*-------------
====================SCROLL MOUSE==============*/
.mouse_scroll {
    display: block;
    margin: 0 auto;
    width: 18px;
    height: 100px;
    position: absolute;
    bottom: 5px;
    left: 0;
    right: 0;
    cursor: pointer;
    opacity: 0.6;
    z-index: 100;
}


.m_scroll_arrows {
    display: block;
    width: 5px;
    height: 5px;
    -ms-transform: rotate(45deg);
    /* IE 9 */
    -webkit-transform: rotate(45deg);
    /* Chrome, Safari, Opera */
    transform: rotate(45deg);
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    margin: 0 0 3px 4px;
    width: 14px;
    height: 14px;
}


.unu {
    margin-top: 1px;
}

.unu, .doi, .trei {
    -webkit-animation: mouse-scroll 1s infinite;
    -moz-animation: mouse-scroll 1s infinite;
    animation: mouse-scroll 1s infinite;

}

.unu {
    -webkit-animation-delay: .1s;
    -moz-animation-delay: .1s;
    -webkit-animation-direction: alternate;

    animation-direction: alternate;
    animation-delay: alternate;
}

.doi {
    -webkit-animation-delay: .2s;
    -moz-animation-delay: .2s;
    -webkit-animation-direction: alternate;

    animation-delay: .2s;
    animation-direction: alternate;

    margin-top: -6px;
}

.trei {
    -webkit-animation-delay: .3s;
    -moz-animation-delay: .3s;
    -webkit-animation-direction: alternate;

    animation-delay: .3s;
    animation-direction: alternate;


    margin-top: -6px;
}

.mouse {
    height: 34px;
    width: 20px;
    border-radius: 14px;
    transform: none;
    border: 2px solid white;
    top: 170px;
}

.wheel {
    height: 5px;
    width: 2px;
    display: block;
    margin: 5px auto;
    background: white;
    position: relative;

    height: 4px;
    width: 4px;
    border: 2px solid #fff;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}

.wheel {
    -webkit-animation: mouse-wheel 0.6s linear infinite;
    -moz-animation: mouse-wheel 0.6s linear infinite;
    animation: mouse-wheel 0.6s linear infinite;
}

@-webkit-keyframes mouse-wheel {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(6px);
        -ms-transform: translateY(6px);
        transform: translateY(6px);
    }
}

@-moz-keyframes mouse-wheel {
    0% {
        top: 1px;
    }

    25% {
        top: 2px;
    }

    50% {
        top: 3px;
    }

    75% {
        top: 2px;
    }

    100% {
        top: 1px;
    }
}

@-o-keyframes mouse-wheel {

    0% {
        top: 1px;
    }

    25% {
        top: 2px;
    }

    50% {
        top: 3px;
    }

    75% {
        top: 2px;
    }

    100% {
        top: 1px;
    }
}

@keyframes mouse-wheel {

    0% {
        top: 1px;
    }

    25% {
        top: 2px;
    }

    50% {
        top: 3px;
    }

    75% {
        top: 2px;
    }

    100% {
        top: 1px;
    }
}

@-webkit-keyframes mouse-scroll {

    0% {
        opacity: 0;
    }

    50% {
        opacity: .5;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes mouse-scroll {

    0% {
        opacity: 0;
    }

    50% {
        opacity: .5;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes mouse-scroll {

    0% {
        opacity: 0;
    }

    50% {
        opacity: .5;
    }

    100% {
        opacity: 1;
    }
}

@keyframes mouse-scroll {

    0% {
        opacity: 0;
    }

    50% {
        opacity: .5;
    }

    100% {
        opacity: 1;
    }
}

/*======================
WHO WE ARE
====================*/

body {
    background-color: #000;
    color: #fff;
    background-image: linear-gradient(#141414 0.1vw, transparent 0.1vw), linear-gradient(90deg, #141414 0.1vw, transparent 0.1vw);
    background-size: 4vw 4vw;
    background-position: 50% -0.1vw;
}

.black-wrapper {
    position: relative;
    box-sizing: border-box;
    width: 96%;
    height: auto;
    margin: 100px auto;
    background-color: #000;
    border: 1px solid #444444;
    transform-style: preserve-3d;
    padding: 40px;
    display: flex;
    align-items: center;
}

.object-3d {
    display: block;
    overflow: visible;
    transform-style: preserve-3d;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}

.object-3d div {
    display: block;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}

.object-3d p {
    display: block;
    perspective: 20vw;
    margin-bottom: 0;
}

.object-3d p:focus,
.object-3d p:hover,
.object-3d p:visited,
.object-3d p:active,
.object-3d p:link {
    text-decoration: none;
    color: #fff;
}

.object-3d p:focus,
.object-3d p:hover {
    outline: none;
}

.box {
    display: block;
    width: 13vw;
    height: 8vw;
    position: relative;
    transform-style: preserve-3d;
    transform: translateZ(-20vw) rotateX(30deg);
    animation-duration: 7s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: normal;
}

@media screen and (prefers-reduced-motion: no-preference) {
    .object-3d {
        /*     animation-name: wobble; */
    }

    .object-3d div {
        animation-name: rock;
    }

    .box {
        animation-name: spin;
    }
}

.face {
    box-sizing: border-box;
    position: absolute;
    width: 36vw;
    height: 8vw;
    font-size: 90px;
    text-transform: uppercase;
    letter-spacing: 0em;
    overflow: hidden;
    line-height: 140px;
    padding-left: 50px;
}

.face-big {
    width: 44vw;
    margin-left: -110px;
}

.face-bigger {
    width: 44vw;
    margin-left: -110px;
}

.face img {
    width: 152px;
    position: relative;
    top: -11px;
}

.center-face .face {
    padding-left: 0;
    text-align: center;
}

.object-3d p:focus .face,
.object-3d p:hover .face {
    font-variation-settings: "wdth"124.5;
}

.object-3d p:focus .face {
    outline: 0.3vw solid #0f0;
}

.face.fr {
    transform: rotateY(0deg) translateZ(4vw);
    background-color: rgba(255, 0, 0, 0.2);
}

.face.ba {
    transform: rotateY(180deg) translateZ(4vw) rotateZ(180deg);
    background-color: rgba(0, 255, 0, 0.2);
}

.face.to {
    transform: rotateX(90deg) translateZ(-4vw) rotateX(180deg);
    background-color: rgba(0, 0, 255, 0.2);
}

.face.bo {
    transform: rotateX(-90deg) translateZ(-4vw) rotateX(180deg);
    background-color: rgba(255, 0, 255, 0.2);
}

@keyframes spin {
    0% {
        transform: translateZ(-20vw) rotateX(360deg);
    }

    25% {
        transform: translateZ(-20vw) rotateX(270deg);
    }

    50% {
        transform: translateZ(-20vw) rotateX(180deg);
    }

    75% {
        transform: translateZ(-20vw) rotateX(90deg);
    }

    100% {
        transform: translateZ(-20vw) rotateX(0deg);
    }
}

@keyframes rock {
    0% {
        transform: rotateZ(-5deg);
    }

    100% {
        transform: rotateZ(5deg);
    }
}

@keyframes wobble {
    0% {
        transform: rotateY(-5deg);
    }

    100% {
        transform: rotateY(5deg);
    }
}

.face.fr,
.face.ba {
    background-color: #000;
    color: #fff;
}

.face.to,
.face.bo {
    background-color: #fff;
    color: #000;
}

.who-we-are {
    font-size: 2vw;
    display: block;
    text-align: left;
    font-weight: 100;
    line-height: 46px;
    color: #c3c3c3;
}

.who-we-are span {
    font-weight: 400;
    background-image: linear-gradient(75deg,
            hsla(235, 100%, 35%, 1),
            hsla(232, 94%, 41%, 1),
            hsla(228, 95%, 42%, 1),
            hsla(226, 96%, 44%, 1),
            hsla(223, 96%, 45%, 1),
            hsla(220, 97%, 46%, 1),
            hsla(217, 98%, 47%, 1),
            hsla(215, 98%, 48%, 1),
            hsla(213, 99%, 49%, 1),
            hsla(211, 100%, 50%, 1));
    -webkit-background-clip: text;
    text-align: left;
    color: transparent;
    font-size: 40px;
}

.inner-object-3d .who-we-are {
    font-size: 26px;
    line-height: 38px;
}

.inner-object-3d .who-we-are span {
    font-size: 30px;
}

.inner-object-3d {
    margin-bottom: 80px !important;
}

/*
WEBGL STYLE
====================*/
#album-rotator-holder {
    position: relative;
    will-change: transform;
    transition: all 0.01s linear;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.album-item {
    background: black;
    box-shadow: 0 2px 30px rgb(0 0 0 / 50%);
    position: relative;
    width: 22%;
    height: 240px;
    user-select: none;
    border-radius: 10px;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    margin: 0 15px;
    transition: all 0.2s ease-out;
    transform: scale(1);
    margin-bottom: 30px;
}

.album-item canvas {
    width: 150% !important;
    position: relative;
    left: -40px;
}

.album-item:hover {
    transform: scale(1.02);
}

.album-details {
    background: transparent;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
    padding: 25px;
    white-space: initial;
    box-sizing: border-box;
    color: white;
    height: 100%;
    font-weight: 600;
    z-index: 99;
}

.title {
    font-weight: 700;
    display: inline-block;
    width: 100%;
    font-size: 30px;
    line-height: 34px;
    text-shadow: 5px 10px 15px rgb(0 0 0 / 12%);
}

.subtitle {
    font-weight: 100;
    line-height: 1.25rem;
}

.title-listing {
    list-style: none;
    padding-left: 34px;
    font-size: 22px;
    font-weight: 400;
    margin-top: 12px;
}

.subtext {
    font-size: 1.1167rem;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 20px;
    width: 100%;
    white-space: initial;
    letter-spacing: 0;
    box-sizing: border-box;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    line-height: 20px;
}

.subtext:after {
    content: '';
    background: url(../img/right-arrow.png) no-repeat;
    width: 24px;
    height: 24px;
    display: inline-block;
}

canvas {
    position: absolute;
    top: 0;
    left: 0;
}

.section-heading {
    font-size: 60px !important;
    text-transform: capitalize;
}

.section-heading h2 {
    font-size: 54px !important;
    line-height: 58px;
}

.section-heading p {
    font-size: 18px;
    line-height: 28px;
    color: #fff;
}

.section-heading p span {
    font-weight: 700;
}

.skill-set h6 {
    margin-top: 10px;
    font-size: 22px;
    line-height: 26px;
    color: #fff;
    font-weight: 500;
    margin-bottom: 40px;
}

.skill-set ul {
    display: flex;
    padding-left: 0;
    list-style: none;
}

.skill-set ul h5 {
    font-size: 18px;
    margin-top: 5px;
    color: #fff;
    font-weight: 400;
}

.skill-set ul li p {
    font-size: 16px;
    line-height: 22px;
    margin-top: 5px;
    color: #ffffff7a;
    font-weight: 300;
    padding-right: 60px;
}

/*------------------------BRIDGE CSS---------*/

.innovation-bridge {
    padding: 70px 0 220px;
    position: relative;
}

.team-support {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 100px;
    margin-top: 10px;
}

.team-support:before {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 330px;
    top: 310px;
    background: linear-gradient(90deg, #ffffff6e 50%, transparent 50%), linear-gradient(90deg, #ffffff6e 50%, transparent 50%), linear-gradient(0deg, #ffffff6e 50%, transparent 50%), linear-gradient(0deg, #ffffff6e 50%, transparent 50%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 7px 1px, 7px 1px, 1px 7px, 1px 7px;
    background-position: -8% 0, 100% 100%, 0% 100%, 100% 0px;
    animation: dash 50s linear infinite;
}

.idea, .valid, .market, .product, .delivery {
    position: relative;
    background-color: #000;
}

.idea .bridge-content, .valid .bridge-content, .market .bridge-content,
.product .bridge-content, .scaling .bridge-content, .delivery .bridge-content {
    position: absolute;
    top: calc(50% - 9px);
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    width: 70%;
}

.idea .bridge-content {
    width: 100%;
}

.delivery {
    display: flex;
    justify-content: center;
    align-items: center;
}

.delivery img {
    width: 52px;
}

.bridge-content h5 {
    font-size: 16px;
    text-transform: uppercase;
    color: #fff;
    font-weight: 700;
    margin-bottom: 5px;
}

.bridge-content p {
    font-size: 14px;
    line-height: 18px;
    color: rgba(255, 255, 255, 0.5);
}

.idea:before,
.valid:before,
.market:before,
.product:before,
.scaling:before {
    content: '';
    border-radius: 50%;
    border: 2px solid #fff;
    position: absolute;
    background: #000;
    animation: rotate 3s infinite;
}

.idea {
    width: 80px;
    height: 80px;
    -webkit-animation: mover 1s infinite alternate;
    animation: mover 1s infinite alternate;
}

.idea:before {
    width: 80px;
    height: 80px;
}

.valid {
    width: 120px;
    height: 120px;
    -webkit-animation: mover 2s infinite alternate;
    animation: mover 2s infinite alternate;
}

.valid:before {
    width: 120px;
    height: 120px;
}

.market {
    width: 220px;
    height: 220px;
    -webkit-animation: mover 3s infinite alternate;
    animation: mover 3s infinite alternate;
}

.market:before {
    width: 220px;
    height: 220px;
}

.product {
    width: 320px;
    height: 320px;
    -webkit-animation: mover 4s infinite alternate;
    animation: mover 4s infinite alternate;
}

.product:before {
    width: 320px;
    height: 320px;
}

.scaling {
    width: 420px;
    height: 420px;
    position: relative;
    -webkit-animation: mover 1s infinite alternate;
    animation: mover 1s infinite alternate;
}

.scaling:before {
    width: 420px;
    height: 420px;
}

.delivery {
    width: 100px;
    height: 100px;
    background-color: #Fff;
    border-radius: 50%;
}

.delivery img {
    animation: floating 5s -7s infinite;
}

.delivery h5 {
    position: relative;
    top: 1px;
}

.delivery .bridge-content {
    top: 22px;
}

.delivery .bridge-content h5 {
    top: 32px;
}

.bridge-lines {
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: transparent;
    border-left: 1px dashed #ffffff50;
}

.line-1 {
    left: 220px;
}

.line-2 {
    left: 342px;
}

.line-3 {
    left: 560px;
}

.line-4 {
    left: 882px;
}

.line-5 {
    left: 1304px;
}

.bridge-lines span {
    color: #Fff;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    width: 100px;
    display: block;
    left: -50px;
    position: relative;
    text-align: center;
    padding-bottom: 15px;
    background: #000;
}

.bridge-border-lines {
    position: absolute;
    border: 1px dashed #ffffff50;
}

.border-line-1 {
    height: 120px;
    width: 200px;
    border-radius: 82px;
    left: 140px;
}

.border-line-2 {
    height: 220px;
    width: 340px;
    border-radius: 150px;
    left: 220px;
}

.border-line-3 {
    height: 320px;
    width: 540px;
    border-radius: 190px;
    left: 340px;
}

.border-line-4 {
    height: 420px;
    width: 740px;
    border-radius: 300px;
    left: 560px;
}

.bridge-border-lines img:first-child {
    position: absolute;
    transform: rotate(180deg);
    top: -10px;
    left: 35%;
}

.bridge-border-lines img:last-child {
    position: absolute;
    bottom: -9px;
    left: 45%;
}

.bridge-border-lines img:first-child {
    -webkit-animation: bounce-arrow-right 2s infinite ease-in-out;
    -moz-animation: bounce-arrow-right 2s infinite ease-in-out;
    -o-animation: bounce-arrow-right 2s infinite ease-in-out;
    animation: bounce-arrow-right 2s infinite ease-in-out;
}

.bridge-border-lines img:last-child {
    -webkit-animation: bounce-arrow-left 2s infinite ease-in-out;
    -moz-animation: bounce-arrow-left 2s infinite ease-in-out;
    -o-animation: bounce-arrow-left 2s infinite ease-in-out;
    animation: bounce-arrow-left 2s infinite ease-in-out;
    animation-delay: 3s;
}

.team-support-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 128px;
}

.team-support-overlay label {
    font-size: 16px;
    text-transform: uppercase;
    color: #fff;
    font-weight: 700;
    letter-spacing: 1px;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    margin-top: 500px;
    z-index: 100000;
    background: #000;
    display: block;
    width: 260px;
}

.team-support-overlay img {
    position: absolute;
    bottom: 0;
}

.team-support-overlay img:nth-child(1) {
    left: -8px;
    bottom: 30%;
    -webkit-animation: bounce-arrow-top 2s infinite ease-in-out;
    -moz-animation: bounce-arrow-top 2s infinite ease-in-out;
    -o-animation: bounce-arrow-top 2s infinite ease-in-out;
    animation: bounce-arrow-top 2s infinite ease-in-out;
}

.team-support-overlay img:nth-child(2) {
    left: 16%;
    -webkit-animation: bounce-arrow-left 2s infinite ease-in-out;
    -moz-animation: bounce-arrow-left 2s infinite ease-in-out;
    -o-animation: bounce-arrow-left 2s infinite ease-in-out;
    animation: bounce-arrow-left 2s infinite ease-in-out;
}

.team-support-overlay img:nth-child(3) {
    right: 16%;
    -webkit-animation: bounce-arrow-left 2s infinite ease-in-out;
    -moz-animation: bounce-arrow-left 2s infinite ease-in-out;
    -o-animation: bounce-arrow-left 2s infinite ease-in-out;
    animation: bounce-arrow-left 2s infinite ease-in-out;
}

.team-support-overlay img:nth-child(4) {
    right: -7px;
    bottom: 30%;
    -webkit-animation: bounce-arrow-bottom 2s infinite ease-in-out;
    -moz-animation: bounce-arrow-bottom 2s infinite ease-in-out;
    -o-animation: bounce-arrow-bottom 2s infinite ease-in-out;
    animation: bounce-arrow-bottom 2s infinite ease-in-out;
}

@keyframes dash {
    to {
        background-position: 100% 0%, 0% 100%, 0% 0%, 100% 100%;
    }
}

@-webkit-keyframes mover {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-5px);
    }
}

@keyframes mover {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-5px);
    }
}

@keyframes bounce-arrow-top {
    0% {
        transform: translateY(0) rotate(90deg);
    }

    50% {
        transform: translateY(10px) rotate(90deg);
    }

    100% {
        transform: translateY(0px) rotate(90deg);
    }
}

@keyframes bounce-arrow-bottom {
    0% {
        transform: translateY(0) rotate(-90deg);
    }

    50% {
        transform: translateY(10px) rotate(-90deg);
    }

    100% {
        transform: translateY(0px) rotate(-90deg);
    }
}

@keyframes bounce-arrow-left {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(10px);
    }

    100% {
        transform: translateX(0px);
    }
}

@keyframes bounce-arrow-right {
    0% {
        transform: translateX(0) rotate(180deg);
    }

    50% {
        transform: translateX(10px) rotate(180deg);
    }

    100% {
        transform: translateX(0px) rotate(180deg);
    }
}

/*
INDUSTRY CARD
====================*/


.industry-cards {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.industry-cards .indus-card {
    position: relative;
    width: 30%;
    height: 200px;
    background-color: #fff;
    overflow: hidden;
    margin: 0 15px 30px;
}

.industry-cards .indus-card ul {
    z-index: 99;
    position: absolute;
    left: 39px;
    top: 5px;
    list-style-type: none;
}

.industry-cards .indus-card ul li {
    width: 2px;
    height: 2px;
    border-radius: 2px;
    margin: 6px 0;
    background-color: #E6E5E1;
}

.industry-cards .indus-card h2 {
    z-index: 99;
    position: absolute;
    bottom: 6px;
    left: 24px;
    font-size: 34px;
    font-weight: 700;
    color: #fff;
    line-height: 38px;
    width: 70%;
    text-shadow: 0 0 20px black;
}

.industry-cards .indus-card .fa-arrow-right {
    z-index: 100;
    position: absolute;
    right: 75px;
    bottom: 25px;
    font-size: 40px;
    cursor: pointer;
}

.industry-cards .indus-card p {
    z-index: 99;
    position: absolute;
    top: 20px;
    right: 70px;
    color: #333;
    opacity: 0.7;
    writing-mode: vertical-lr;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    display: none;
}

.industry-cards .indus-card .pic {
    z-index: 100;
    width: 390px;
    height: 200px;
    background-image: url(https://images.unsplash.com/photo-1586771825024-f82ef5fb6b76?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80);
    background-size: 100% 100%;
    filter: grayscale(100%);
    background-size: cover;
    background-position: center;
}

.industry-cards .indus-card:hover i {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.industry-cards .indus-card button {
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 30px;
    height: 30px;
    background-color: #DA4D1D;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
    mix-blend-mode: hard-light;
}

.industry-cards .indus-card button i {
    font-size: 3rem;
}

.industry-cards .indus-card:hover button {
    transform: scale(16.5);
}

.industry-cards .indus-card:hover p {
    color: #fff;
}

.industry-cards .indus-card:hover .pic {
    filter: grayscale(0);
}

.industry-cards .indus-card2 .pic {
    background-image: url("https://images.unsplash.com/photo-1528785198459-ec50485704c7?ixlib=rb-0.3.5&s=3a2fc3039516555bbb2e9cd2967bd321&auto=format&fit=crop&w=1537&q=80");
}

.industry-cards .indus-card2 button {
    background-color: #2b26c3;
}

.industry-cards .indus-card3 button {
    background-color: #997405;
}

.industry-cards .indus-card4 button {
    background-color: #2196f3;
}

.industry-cards .indus-card5 button {
    background-color: #a31dda;
}

.industry-cards .indus-card6 {
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*------------TESTIMONAILS----*/
.innerdiv {
    display: grid;
    grid-gap: 1.5rem;
}

.eachdiv {
    padding: 1rem 24px;
    border-radius: 0.8rem;
    color: white;
    transition: all 0.3s;
}

.eachdiv:hover {
    transform: scale(1.05);
    filter: drop-shadow(10px 11px 20px #00000045) drop-shadow(-10px -10px 20px #00000045);
}

.div6 {
    background: #090AAE;
    grid-row: 1/2;
}

.div1 {
    background: #1531F0;
    grid-column: 2/3;
    grid-row: 1/2;
}

.div2 {
    background: #540f95;
    grid-column: 3/4;
    grid-row: 1/2;
}

.div3 {
    background: #3324b9;
    grid-column: 4/5;
    grid-row: 1/3;
    color: black;
}

.div4 {
    background: #0a748d;
    grid-column: 1/2;
    grid-row: 2/3;
    color: black;
}

.div5 {
    background: rgb(5 56 133);
    grid-column: 2/4;
    grid-row: 2/3;
}

.userdetails {
    display: flex;
}

.imgbox {
    margin-right: 1rem;
}

.imgbox img {
    border-radius: 50%;
    width: 48px;
    border: 2px solid #ffffff;
    object-fit: cover;
    height: 48px;
    background: #Fff;
}

.detbox {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.detbox p {
    margin: 0;
}

.detbox .name {
    color: hsl(0deg 0% 100%);
    font-size: 14px;
    margin-bottom: 6px;
    font-weight: 600;
}

.detbox .name.dark {
    color: #49505A;
}

.detbox .designation {
    color: hsl(0deg 0% 100%);
    opacity: 70%;
    font-size: 0.8rem;
    position: relative;
    top: -6px;
}

.detbox .designation.dark {
    color: #49505A;
}

.review {
    margin-top: 12px;
}

.review h4 {
    font-size: 22px;
    color: #ffffff;
    font-weight: 600;
    line-height: 29px;
    margin-bottom: 0.8rem;
}

.review.dark h4 {
    color: #121212;
}

.review p {
    font-size: 16px;
    color: #ffffff;
    font-weight: 400;
    opacity: 76%;
    line-height: 22px;
}

.review.dark p {
    color: #0e0e0e;
}

@media only screen and (max-width: 1000px) {
    .innerdiv {
        transform: scale(0.7);
    }
}

@media only screen and (max-width: 800px) {
    .innerdiv {
        transform: scale(0.6);
    }
}

@media only screen and (max-width: 600px) {
    .div1 {
        background-position-x: 10rem;
    }

    .innerdiv {
        display: flex;
        flex-direction: column;
        transform: scale(1);
        margin: 2rem;
        margin-bottom: 5rem;
    }

    .attribution {
        position: relative;
    }
}

.dr {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 100px;
}

ul.company-stats {
    list-style: none;
    padding-left: 0;
    padding-top: 16px;
    padding-bottom: 4px;
}

ul.company-stats li {
    padding-right: 60px;
    align-items: center;
}

ul.company-stats li h3 {
    color: #ffffff;
    font-size: 42px;
    font-weight: 500;
    margin-bottom: 0;
}

ul.company-stats li p {
    color: #c2c5d5d1;
    padding-left: 15px;
    font-size: 14px;
    line-height: 21px;
    font-weight: 500;
    margin-bottom: 0;
    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.pulse {
    position: relative;
    width: 200px;
    height: 200px;
    background: #2702cb;
    border-radius: 50%;
    margin: 0 auto;
    z-index: -1;
}

.pulse span {
    position: absolute;
    top: 0;
    left: 0;
    background: #2702cb;
    border-radius: 50%;
    display: inline-block;
    width: 100%;
    height: 100%;
    animation: animate 2.5s linear infinite;
    animation-delay: calc(-0.5s * var(--i));
}

@keyframes animate {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    90% {
        transform: scale(3);
    }

    100% {
        transform: scale(4);
        opacity: 0;
    }
}

.rocket {
    position: relative;
    top: 50px;
    text-align: center;
    animation: rocket 0.1s ease infinite;
}

@keyframes rocket {
    0%, 100% {
        transform: translateY(-1px);
    }

    50% {
        transform: translateY(1px);
    }
}

.rocket::before {
    content: '';
    position: absolute;
    bottom: -250px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 250px;
    background: linear-gradient(#ffc107, transparent);
}

.rocket::after {
    content: '';
    position: absolute;
    bottom: -250px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 250px;
    background: linear-gradient(#ffc107, transparent);
    filter: blur(20px);
}


/*======CONTAINER========*/
.min-h-700 {
    min-height: 700px;
}

.container-fluid {
    padding-left: 180px;
    padding-right: 180px;
}

/*============INSIGHTS=======*/

/*------------------INSIGHTS ------------------*/
.insights-wrapper {
    border: 2px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(to left, #0530d4, #000000);
    padding: 42px 38px 20px 38px;
    background: linear-gradient(45deg, #1b162a, #070608);
    box-shadow: 0 0 5px #006cf6;
    color: #fff;
    transition: 0.3s ease-out;
    -webkit-transition: 0.3s ease-out;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.insights-wrapper:hover {
    transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
}

.insights-wrapper .shape-vertical {
    position: absolute;
    right: 20px;
    top: 20px;
}

.insights-wrapper .insight-img {
    margin-left: -35px;
    margin-bottom: 20px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    width: 332px;
}

.insights-wrapper p {
    color: #bcb3d7;
    margin-bottom: 0;
}


.insights-wrapper span {
    position: absolute;
    display: block;
}

.insights-wrapper span:nth-child(1) {
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #006cf6);
}

@keyframes btn-anim1 {
    0% {
        left: -100%;
    }

    50%, 100% {
        left: 100%;
    }
}

.insights-wrapper span:nth-child(2) {
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent, #006cf6);
}

@keyframes btn-anim2 {
    0% {
        top: -100%;
    }

    50%, 100% {
        top: 100%;
    }
}

.insights-wrapper span:nth-child(3) {
    bottom: 0;
    right: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(270deg, transparent, #006cf6);
}

@keyframes btn-anim3 {
    0% {
        right: -100%;
    }

    50%, 100% {
        right: 100%;
    }
}

.insights-wrapper span:nth-child(4) {
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(360deg, transparent, #006cf6);
}

@keyframes btn-anim4 {
    0% {
        bottom: -100%;
    }

    50%, 100% {
        bottom: 100%;
    }
}

.insights-wrapper:hover span:nth-child(1) {
    animation: btn-anim1 1s linear infinite;
}

.insights-wrapper:hover span:nth-child(2) {
    animation: btn-anim2 1s linear infinite;
    animation-delay: .25s
}

.insights-wrapper:hover span:nth-child(3) {
    animation: btn-anim3 1s linear infinite;
    animation-delay: .5s
}

.insights-wrapper:hover span:nth-child(4) {
    animation: btn-anim4 1s linear infinite;
    animation-delay: .75s
}

.link-page {
    display: inline-block;
    position: relative;
    color: #0d6efd;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
}

.link-page img {
    margin-left: 5px;
}

.link-page:hover, .underline-effect:hover {
    color: #0d6efd;
}

.link-page:after, .underline-effect:after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    left: 0;
    background-color: #0d6efd;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
    bottom: -4px;
}

.link-page:hover:after, .underline-effect:hover:after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/*-------------SKYROCKETING-------*/
.contact-wrapper {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-card {
    width: 100%;
    max-width: 300px;
    min-width: 200px;
    height: 250px;
    font-size: 16px;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
}

.contact-card .contact-card-title {
    width: 100%;
    margin: 0;
    text-align: center;
    margin-top: -215px;
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 20px;
    line-height: 30px;
}

.contact-card .contact-card-text {
    width: 80%;
    margin: 0 auto;
    font-size: 16px;
    text-align: center;
    margin-top: 8px;
    color: #ffffffab;
    font-weight: 300;
    opacity: 0;
    max-height: 0;
    transition: all 0.3s ease;
}

.contact-card:hover {
    height: 270px;
}

.contact-card:hover .contact-card-text {
    transition: all 0.3s ease;
    opacity: 1;
    max-height: 40px;
}

/*===================CONTACT FORM==========*/
.screen {
    border: 1px solid #090aae;
    position: relative;
    border-radius: 15px;
    margin-bottom: 100px;
    background: #000;
}

.screen:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    bottom: 0;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .4);
    z-index: -1;
}

.screen-header {
    border-bottom: 1px solid #090aae;
    display: flex;
    align-items: center;
    padding: 10px 20px;
    background: #090aae;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.screen-header-left {
    margin-right: auto;
}

.screen-header-button {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
    border-radius: 8px;
    background: white;
}

.screen-header-button.close {
    background: #ed1c6f;
}

.screen-header-button.maximize {
    background: #e8e925;
}

.screen-header-button.minimize {
    background: #74c54f;
}

.screen-header-right {
    display: flex;
}

.screen-header-ellipsis {
    width: 5px;
    height: 5px;
    margin-left: 4px;
    border-radius: 8px;
    background: #fff;
}

.screen-body {
    display: flex;
}

.screen-body-item {
    flex: 1;
    padding: 50px;
}

.screen-body-item.left {
    display: flex;
    flex-direction: column;
}

.screen .app-title {
    display: flex;
    flex-direction: column;
    position: relative;
    font-size: 62px;
    line-height: 65px;
    font-weight: 500;
    color: #fff;
}

.screen .app-title u {
    background-image: linear-gradient(75deg, hsla(235, 100%, 35%, 1), hsla(232, 94%, 41%, 1), hsla(228, 95%, 42%, 1), hsla(226, 96%, 44%, 1), hsla(223, 96%, 45%, 1), hsla(220, 97%, 46%, 1), hsla(217, 98%, 47%, 1), hsla(215, 98%, 48%, 1), hsla(213, 99%, 49%, 1), hsla(211, 100%, 50%, 1));
    -webkit-background-clip: text;
    text-align: left;
    color: transparent;
    font-weight: 700;
    text-decoration: none;
}

.screen .app-contact {
    margin-top: auto;
    font-size: 18px;
    color: #b1b1b1;
}

.screen .app-form-group {
    margin-bottom: 15px;
}

.screen .app-form-group.message {
    margin-top: 40px;
}

.screen .app-form-group.buttons {
    margin-bottom: 0;
    text-align: right;
}

.screen .app-form-control {
    width: 100%;
    padding: 10px 0;
    background: none;
    border: none;
    border-bottom: 1px solid #666;
    color: #ddd;
    font-size: 14px;
    text-transform: uppercase;
    outline: none;
    transition: border-color .2s;
}

.screen .app-form-control::placeholder {
    color: #666;
}

.screen .app-form-control:focus {
    border-bottom-color: #ddd;
}

.screen .app-form-button {
    background: none;
    border: none;
    color: #0d6efd;
    font-size: 14px;
    cursor: pointer;
    outline: none;
}

.screen .app-form-button:hover {
    color: #b9134f;
}



@media screen and (max-width: 600px) {
    .screen-body {
        padding: 40px;
    }

    .screen-body-item {
        padding: 0;
    }
}

.screen input[type='text'], .screen [type='email'], .screen [type='phone'], .screen select, .screen textarea {
    background: none;
    border: none;
    border-bottom: solid 1px #ffffff33;
    color: #ffffff;
    font-size: 1.000em;
    font-weight: 400;
    letter-spacing: 1px;
    margin: 0em 0 1.875em 0;
    padding: 0 0 0.875em 0;
    text-transform: uppercase;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.screen select option {
    color: #000;
    padding-left: 24px;
}

.screen input[type='text']:focus, .screen [type='email']:focus, .screen [type='phone']:focus, .screen textarea:focus {
    outline: none;
    padding: 0 0 0.875em 0;
}


.screen select {
    background: url(../img/dropdown.png) no-repeat right;
    outline: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}

select::-ms-expand {
    display: none;
}

.screen .subject, .screen .telephone {
    width: 100%;
}

.screen textarea {
    line-height: 150%;
    height: 100px;
    resize: none;
    width: 100%;
}

::-webkit-input-placeholder {
    color: #787878;
}

:-moz-placeholder {
    color: #787878;
    opacity: 1;
}

::-moz-placeholder {
    color: #787878;
    opacity: 1;
}

:-ms-input-placeholder {
    color: #787878;
}

.submit {
    position: relative;
    overflow: hidden;
    width: 186px;
}

.submit span {
    position: absolute;
    display: block;
}

.submit span:nth-child(1) {
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #006cf6);
    animation: btn-anim1 1s linear infinite;
}

/*------------------TEXT ANIMATION---------*/
@keyframes btn-anim1 {
    0% {
        left: -100%;
    }

    50%, 100% {
        left: 100%;
    }
}

.submit span:nth-child(2) {
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent, #006cf6);
    animation: btn-anim2 1s linear infinite;
    animation-delay: .25s
}

@keyframes btn-anim2 {
    0% {
        top: -100%;
    }

    50%, 100% {
        top: 100%;
    }
}

.submit span:nth-child(3) {
    bottom: 0;
    right: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(270deg, transparent, #006cf6);
    animation: btn-anim3 1s linear infinite;
    animation-delay: .5s
}

@keyframes btn-anim3 {
    0% {
        right: -100%;
    }

    50%, 100% {
        right: 100%;
    }
}

.submit span:nth-child(4) {
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(360deg, transparent, #006cf6);
    animation: btn-anim4 1s linear infinite;
    animation-delay: .75s
}

@keyframes btn-anim4 {
    0% {
        bottom: -100%;
    }

    50%, 100% {
        bottom: 100%;
    }
}

#form_button {
    background: none;
    border: solid 2px #474544;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    outline: none;
    padding: 20px 35px;
    text-transform: uppercase;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#form_button:hover {
    background: linear-gradient(75deg, hsla(235, 100%, 35%, 1), hsla(232, 94%, 41%, 1), hsla(228, 95%, 42%, 1), hsla(226, 96%, 44%, 1), hsla(223, 96%, 45%, 1), hsla(220, 97%, 46%, 1), hsla(217, 98%, 47%, 1), hsla(215, 98%, 48%, 1), hsla(213, 99%, 49%, 1), hsla(211, 100%, 50%, 1));
    color: #fff;
}

/*--------FOOTER----------*/
.bg-animation {
    height: 100%;
    width: 80%;
    position: absolute;
    right: -50%;
    top: 5%;
    z-index: 10;
}

.bg-animation svg {
    position: absolute;
    left: 30%;
    transform: translate(-50%, -50%);
    width: 80%;
    animation: orbit 30s linear infinite;
}

.bg-animation svg path {
    fill: rgb(39 2 203 / 20%);
}

.bg-animation svg:nth-child(2) {
    width: 60%;
    animation: orbit 20s linear infinite;
}

.bg-animation svg:nth-child(3) {
    width: 40%;
    animation: orbit 25s linear infinite;
}

.bg-animation svg:nth-child(4) {
    width: 20%;
    animation: orbit 18s linear infinite;
}

@keyframes orbit {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

footer {
    margin-top: 100px;
    border-top: 1px solid #dddddd30;
    box-shadow: 0 0 100px #1d1d2a;
    overflow: hidden;
    position: relative;
    background: #000;
}

footer h5 {
    font-size: 24px !important;
    font-weight: 700;
    margin-bottom: 24px;
}

footer ul li {
    font-size: 16px;
    margin-top: 12px !important;
    color: #ffffffba;
    text-align: center;
}

footer ul li a {
    color: #fff;
    text-decoration: none;
    text-align: center;
}

.blockchain img {
    width: 70px;
}

.footer-social-icons {
    margin-top: 15px;
    padding-left: 0;
}

.footer-social-icons li {
    transition: 0.5s !important;
    padding-left: 0;
    margin-right: 10px;
    list-style: none;
}

.footer-social-icons li:hover {
    transform: translateY(-3px) !important;
}

.footer-social-icons li a {
    color: #ffffff;
    margin: 10px 0px;
    font-weight: 300;
    font-size: 12px;
}

.clients {
    display: flex;
    justify-content: center;
}

.clients li {
    list-style: none;
    margin: 0 20px;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.clients img {
    height: 90px;
}

.clients:hover li {
    filter: blur(0px);
    -webkit-filter: blur(0px);
}

.clients:hover li:not(:hover) {
    filter: blur(2px);
    -webkit-filter: blur(2px);
}

.clients li:hover {
    -webkit-transform: translateY(-0.3rem);
    transform: translateY(-0.3rem);
}

/* --- Images (gray logo) --- */
.clients img {
    -webkit-filter: grayscale(100%) brightness(70%);
    filter: grayscale(100%) brightness(70%);
}

.clients img:hover {
    background: none;
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

span#softr-back-to-top-button {
    z-index: 10;
}

.feature-logo-wrap {
    position: relative;
    z-index: 10;
}

/*=========SERVCCE===========*/
#canvas {
    position: relative;
    top: 60px;
}

.above-fold-content.inner-pages-content h1 {
    color: #fff;
    line-height: 34px;
}

.inner-pages-content.above-fold-content h1 span:last-child,
.above-fold-content.inner-pages-content h1 span:nth-child(2) {
    font-size: 70px;
    line-height: 70px;
}

.skill-set-inner.skill-set h6 {
    margin-top: 10px;
    font-size: 24px;
    line-height: 30px;
    color: #fff;
    font-weight: 500;
    margin-bottom: 20px;
}

/*----highlight-cards---------------*/
.highlight-cards {
    justify-content: flex-start;
    flex-wrap: wrap;
    height: auto;
}

.highlight-cards.industry-cards .indus-card {
    width: 100%;
    height: auto;
    background-color: #000000;
    margin: 0 0 10px 0;
    padding: 2px 15px;
    border: 1px dashed #ffffff47;
}

.highlight-cards.industry-cards .indus-card h2 {
    z-index: 99;
    font-size: 20px;
    font-weight: 400;
    color: #fff;
    line-height: 38px;
    margin-bottom: 0;
    width: 100%;
    position: relative;
    bottom: 0;
    left: 0;
}

.highlight-cards.industry-cards .indus-card button {
    width: 14px;
    height: 14px;
    right: inherit;
    left: 14px;
}

/*---DIFFERERANTE-*/
.lead-banner {
    padding: 0 100px;
    margin: 0 auto;
    text-align: center;
}

.lead-banner h2 {
    color: #Fff;
    font-size: 66px;
    text-align: center;
    text-transform: uppercase;
    line-height: 70px;
    margin-bottom: 15px;
}

.lead-banner h2 span {
    background-image: linear-gradient(75deg, hsla(235, 100%, 35%, 1), hsla(232, 94%, 41%, 1), hsla(228, 95%, 42%, 1), hsla(226, 96%, 44%, 1), hsla(223, 96%, 45%, 1), hsla(220, 97%, 46%, 1), hsla(217, 98%, 47%, 1), hsla(215, 98%, 48%, 1), hsla(213, 99%, 49%, 1), hsla(211, 100%, 50%, 1));
    -webkit-background-clip: text;
    text-align: left;
    color: transparent;
    font-weight: 700;
}

.lead-banner p {
    font-size: 22px;
    line-height: 34px;
    text-align: center;
    font-weight: 100;
}

/*----------------FAQ------------*/

.accordion__container {
    list-style: none;
    margin: 0 auto;
    max-width: 800px;
    padding: 10px 30px 30px;
}

.accordion__item.is-active span {
    transform: rotate(0);
}

li.js-accordion__item.accordion__item {
    border-bottom: 1px dashed #6e6e6e;
}

.accordion__trigger {
    color: white;
    cursor: pointer;
    font-weight: 600;
    padding: 20px 50px 20px 0;
    position: relative;
    font-size: 20px;
    text-transform: uppercase;
}

.accordion__trigger span {
    background-color: #ffffff;
    display: block;
    height: 1px;
    position: absolute;
    right: 4px;
    top: 50%;
    transition: transform 0.3s cubic-bezier(1, -0.11, 0.63, 1.48);
    width: 15px;
}

.accordion__trigger span+span {
    transform: rotate(90deg);
}

.accordion__content {
    color: #fff;
    font-size: 18px;
    padding: 0;
    line-height: 26px;
    position: relative;
    top: -10px;
}

/****** CODE ******/

.file-upload {
    display: block;
    text-align: center;
    font-size: 12px;
    margin-bottom: 30px;
}

.file-upload .file-select {
    display: block;
    border: 2px solid #090aae;
    color: #fff;
    cursor: pointer;
    height: 50px;
    line-height: 48px;
    text-align: left;
    background: transparent;
    overflow: hidden;
    position: relative;
}

.file-upload .file-select .file-select-button {
    background: #090aae;
    padding: 0 10px;
    display: inline-block;
    height: 46px;
    line-height: 46px;
    font-size: 16px;
    padding: 0 20px;
}

.file-upload .file-select .file-select-name {
    line-height: 40px;
    display: inline-block;
    padding: 0 10px;
    font-size: 16px;
    padding: 0 20px;
}

.file-upload .file-select:hover {
    border-color: #34495e;
    transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
}

.file-upload .file-select:hover .file-select-button {
    background: #34495e;
    color: #FFFFFF;
    transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
}

.file-upload.active .file-select {
    border-color: #090aae;
    transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
}

.file-upload.active .file-select .file-select-button {
    background: #090aae;
    color: #FFFFFF;
    transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
}

.file-upload .file-select input[type=file] {
    z-index: 100;
    cursor: pointer;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    filter: alpha(opacity=0);
}

.file-upload .file-select.file-select-disabled {
    opacity: 0.65;
}

.file-upload .file-select.file-select-disabled:hover {
    cursor: default;
    display: block;
    border: 2px solid #dce4ec;
    color: #34495e;
    cursor: pointer;
    height: 40px;
    line-height: 40px;
    margin-top: 5px;
    text-align: left;
    background: #FFFFFF;
    overflow: hidden;
    position: relative;
}

.file-upload .file-select.file-select-disabled:hover .file-select-button {
    background: #dce4ec;
    color: #666666;
    padding: 0 10px;
    display: inline-block;
    height: 40px;
    line-height: 40px;
}

.file-upload .file-select.file-select-disabled:hover .file-select-name {
    line-height: 40px;
    display: inline-block;
    padding: 0 10px;
}

.skill-set-inner ul {
    color: #000;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.skill-set-inner ul li {
    background-color: #000;
    border-radius: 10px;
    font-size: 18px;
    margin-bottom: 1rem;
    outline-offset: -5px;
    padding: 16px 20px;
    position: relative;
    top: 0;
    transition: all linear 0.3s;
    width: 100%;
    border: 1px solid #424242;
    color: #fff;
    line-height: 24px;
    margin-right: 14px;
}

.skill-set.above-fold-set li {
    border: 2px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(to left, #0530d4, #000000);
    padding: 20px;
    background: linear-gradient(45deg, #1b162a, #070608);
    box-shadow: 0 0 5px #006cf6;
    margin-right: 18px;
}

.skill-set.above-fold-set li p {
    font-size: 17px;
    line-height: 24px;
    margin-top: 5px;
    color: #ffffffbf;
    padding-right: 0;
}

.skill-set.above-fold-set li h5 {
    font-size: 20px;
    margin-top: 0;
    font-weight: 600;
}

/*-------------VIDEO PLAYER--------*/
#video-viewport {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}

video {
    display: block;
    width: 100vh;
    height: auto;
}

.fullsize-video-bg {
    height: 100vh;
    overflow: hidden;
}

.fullsize-video-bg:before {
    content: "";
    background: rgb(0 0 0 / 60%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.fullsize-video-bg:after {
    content: "";
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgTWFjaW50b3NoIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjI4RkZBQTgzNzg1NzExRTU4NTQyODc3OUM4MTZGMUREIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjI4RkZBQTg0Nzg1NzExRTU4NTQyODc3OUM4MTZGMUREIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjhGRkFBODE3ODU3MTFFNTg1NDI4Nzc5QzgxNkYxREQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjhGRkFBODI3ODU3MTFFNTg1NDI4Nzc5QzgxNkYxREQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz66uHInAAAAIUlEQVR42mL5//8/AyMj42YGIGBigABfEMEIkoEBgAADAKvuBwVS8BAjAAAAAElFTkSuQmCC);
    background-size: 3px 3px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}


.fullsize-video-bg .inner {
    display: table;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0;
    position: relative;
    z-index: 2;
}

.fullsize-video-bg .inner>div {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    padding: 0 2em;
}

.fullsize-video-bg .inner h1 {
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    display: inline;
    font-size: 60px;
    line-height: 68px;
}

.fullsize-video-bg .inner p {
    color: #fff;
    font-weight: 400;
    font-size: 22px;
    line-height: 30px;
}

/*-------------TESTIMONAIL SLIDER--------*/
.bg-offset-hero::after {
    position: absolute;
    content: '';
    width: 75%;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: -1;
    background: linear-gradient(75deg, hsla(235, 100%, 35%, 1), hsla(232, 94%, 41%, 1), hsla(228, 95%, 42%, 1), hsla(226, 96%, 44%, 1), hsla(223, 96%, 45%, 1), hsla(220, 97%, 46%, 1), hsla(217, 98%, 47%, 1), hsla(215, 98%, 48%, 1), hsla(213, 99%, 49%, 1), hsla(211, 100%, 50%, 1));
}

.quote_ {
    opacity: 0.1;
}

/*----JOB LISTING----*/
.grid.grid--featuredJobs {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    /* grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr; */
}

.grid--featuredJobs>.grid-item {
    border: 1px solid #252525;
    display: flex;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.grid--featuredJobs>.grid-item-a {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
    border-right: none;
}

.grid--featuredJobs>.grid-item-b {
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 5;
}

.grid--featuredJobs>.grid-item-c {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 5;
    border-right: none;
    border-top: none;
}

.grid--featuredJobs>.grid-item-d {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 5;
    border-right: none;
    border-top: none;
}

.grid--featuredJobs>.grid-item-e {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 5;
    grid-row-end: 7;
    border-top: none;
}

.grid--featuredJobs>.grid-item-f {
    grid-column-start: 4;
    grid-column-end: 5;
    grid-row-start: 5;
    grid-row-end: 9;
    border-left: none;
    border-top: none;
}

.grid--featuredJobs>.grid-item-g {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 5;
    grid-row-end: 9;
    border-right: none;
    border-top: none;
}

.grid--featuredJobs>.grid-item-h {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 7;
    grid-row-end: 9;
    border-top: none;
}

.Job {
    align-self: center;
    padding: 2.05rem;
}

.Job-title {
    text-decoration: none;
    color: #fff;
    font-weight: 800;
    font-size: 2.05rem;
    line-height: 1.05;
    text-align: center;
    display: block;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.Job--big .Job-title {
    font-size: 3.05rem;
}

.Job--small .Job-title {
    font-size: 1.5rem;
}

.Job-type {
    text-transform: uppercase;
    font-weight: 800;
    text-align: center;
    font-size: 0.8rem;
    margin: 0;
}

.Job-company,
.Job-title,
.Job-type,
.Job-details,
.Job-image,
.Job-shortDescription,
.Job-image {
    position: relative;
    z-index: 2;
}

.Job-technologyIcon {
    width: 34px;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 1rem;
    left: 1rem;
}

.Job-details {
    line-height: 1;
    text-align: center;
    margin-top: 1.5rem;
    font-size: 1rem;
    margin: 0;
}

.Job-postedDate,
.Job-shortDescription {
    font-style: italic;
}

.Job-image {
    width: 61px;
    height: 61px;
    border-radius: 50%;
    background-size: 100%;
    margin: 0 auto;
    margin-top: 2.05rem;
    margin-bottom: 2.05rem;
    background-size: contain;
}

.Job--small .Job-details {
    font-size: 0.8rem;
}

.Job-shortDescription {
    text-align: center;
    font-style: italic;
}


.Job-background {
    background-color: #111;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.Job:hover .Job-background {
    width: 100%;
    height: 100%;
    opacity: 1;
}

.Job-background,
.Job:hover .Job-background {
    transition: 0.4s opacity cubic-bezier(0.075, 0.82, 0.165, 1);
}

.Job.Job--ruby:hover .Job-title {
    color: #d91404;
}

.Job.Job--php:hover .Job-title {
    color: #6181b6;
}

.Job.Job--wordpress:hover .Job-title {
    color: #105478;
}

.Job.Job--python:hover .Job-title {
    color: #ffde59;
}

.Job.Job--devops:hover .Job-title {
    color: #326de6;
}

.Job:hover .Job-title {
    color: #f0db4f;
}

.Job:hover .Job-company,
.Job:hover .Job-detailsSeparator {
    color: #5d5d5d;
}

.Job:hover .Job-postedDate,
.Job:hover .Job-type,
.Job:hover .Job-shortDescription {
    color: #FFF;
}

.Job:hover .Job-title,
.Job:hover .Job-company,
.Job:hover .Job-detailsSeparator,
.Job:hover .Job-postedDate,
.Job:hover .Job-type,
.Job:hover .Job-shortDescription,
.Job .Job-title,
.Job .Job-company,
.Job .Job-detailsSeparator,
.Job .Job-postedDate,
.Job .Job-type,
.Job .Job-shortDescription {
    transition: 0.3s color cubic-bezier(0.075, 0.82, 0.165, 1);
}

/*--------TESTIMONIAL--------*/
.owl-carousel .owl-item img {
    display: inline-block !important;
    width: auto;
}

.author-img img {
    width: 70px !important;
    height: auto;
    border-radius: 100%;
}

.testi-text {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 30px;
}

.hh {
    letter-spacing: 5px;
}

.font-medium {
    font-weight: 500;
}

.author-img {
    display: none !important;
}

@media screen and (max-width: 1680px) {
    .container-fluid {
        padding-left: 100px;
        padding-right: 100px;
    }
}

@media screen and (max-width: 1440px) {
    ul.company-stats li {
        padding-right: 40px;
    }

    .inner-pages-content.above-fold-content h1 span {
        font-size: 56px !important;
        line-height: 58px !important;
    }

    .above-fold-content.inner-pages-content p {
        font-size: 18px !important;
    }

    .lead-banner p {
        font-size: 20px;
        line-height: 30px;
    }

    .accordion__trigger {
        font-size: 16px;
    }

    .accordion__content {
        font-size: 16px;
        line-height: 24px;
    }

    .bridge-lines span {
        font-size: 12px;
        padding-bottom: 5px;
    }

    .bridge-lines {
        height: 94%;
    }

    .container-fluid {
        padding-left: 60px;
        padding-right: 60px;
    }

    .innovation-circle canvas {
        left: 24%;
    }

    .industry-cards .indus-card .pic {
        width: 300px;
    }

    .nav__list-item {
        padding-left: 50px;
        font-size: 34px;
    }

    .object-3d {
        top: -48px;
    }

    .face img {
        width: 106px;
        top: -8px;
    }

    .lead-banner h2 {
        font-size: 70px;
        line-height: 76px;
    }

    .object-3d p {
        perspective: 28vw;
    }

    .face {
        font-size: 65px;
        line-height: 104px;
        padding-left: 30px;
    }

    .above-fold-content h1 span:nth-child(2) {
        font-size: 46px;
    }

    .above-fold-content h1 span:last-child {
        font-size: 70px;
        line-height: 64px;
    }

    ul.company-stats li h3 {
        font-size: 34px;
    }

    ul.company-stats li p {
        font-size: 12px;
        line-height: 17px;
    }

    a.learn-more {
        width: 320px;
    }

    a.learn-more .circle {
        height: 54px;
    }

    a.learn-more .button-text {
        font-size: 15px;
        line-height: 20px;
    }

    .who-we-are span {
        font-size: 34px;
    }

    .who-we-are span:nth-child(2) {
        font-size: 46px !important;
    }

    .who-we-are {
        font-size: 30px;
        line-height: 44px;
    }

    .market, .market:before {
        width: 190px;
        height: 190px;
    }

    .valid, .valid:before {
        width: 150px;
        height: 150px;
    }

    .idea, .idea:before {
        width: 80px;
        height: 80px;
    }

    .product, .product:before {
        width: 270px;
        height: 270px;
    }

    .scaling, .scaling:before {
        width: 350px;
        height: 350px;
    }

    .border-line-1 {
        left: 50px;
        height: 150px;
        width: 232px;
    }

    .border-line-2 {
        height: 190px;
        width: 340px;
        left: 122px;
    }

    .border-line-3 {
        height: 270px;
        width: 460px;
        left: 272px;
    }

    .border-line-4 {
        height: 350px;
        width: 620px;
        left: 462px;
    }

    .line-1 {
        left: 124px;
    }

    .line-2 {
        left: 274px;
    }

    .line-3 {
        left: 464px;
    }

    .line-4 {
        left: 734px;
    }

    .line-5 {
        left: 1086px;
    }

    .team-support-overlay {
        top: 102px;
    }

    .team-support {
        padding-top: 62px;
        margin-top: -20px;
    }

    .team-support:before {
        height: 276px;
        top: 230px;
    }

    .industry-cards .indus-card {
        height: 162px;
        margin: 0 10px 20px;
    }

    .screen textarea {
        height: 80px;
    }

    #form_button {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .team-support-overlay label {
        margin-top: 390px;
    }

    .section-heading {
        font-size: 46px !important;
        text-transform: capitalize;
        margin-bottom: 35px !important;
    }

    .title {
        font-weight: 600;
        font-size: 26px;
        line-height: 30px;
    }

    .subtext {
        padding: 15px 18px;
        line-height: 20px;
    }

    .album-item {
        height: 200px;
        margin: 0 12px 20px;
        width: 23%;
    }

    .bridge-content h5 {
        font-size: 14px;
    }

    .industry-cards .indus-card h2 {
        font-size: 32px;
        line-height: 36px;
    }

    .testi-text {
        font-size: 26px;
        padding-bottom: 10px !important;
    }

    .contact-card .contact-card-title {
        font-size: 18px;
        line-height: 24px;
    }

    .screen input[type='text'], .screen [type='email'], .screen select, .screen textarea {
        margin-bottom: 14px;
        font-size: 14px;
    }

    .screen .app-title {
        font-size: 50px;
        line-height: 54px;
    }

    .screen-body-item {
        padding: 30px 40px;
    }
}

@media screen and (max-width: 1366px) {
    /* .innovation-circle canvas {
        position: relative;
        left: calc(100% - 900px);
        width: 80% !important;
        top: 112px;
    } */
}