html {
    scroll-behavior: smooth
}

.slidingVertical span {
    animation: topToBottom 18s linear 0s infinite;
    -ms-animation: topToBottom 18s linear infinite 0s;
    -webkit-animation: topToBottom 18s linear 0s infinite;
    color: #fff;
    opacity: 0;
    overflow: hidden;
    position: absolute
}

.slidingVertical span:nth-child(2) {
    animation-delay: 3s;
    -ms-animation-delay: 3s;
    -webkit-animation-delay: 3s
}

.slidingVertical span:nth-child(3) {
    animation-delay: 6s;
    -ms-animation-delay: 6s;
    -webkit-animation-delay: 6s
}

.slidingVertical span:nth-child(4) {
    animation-delay: 9s;
    -ms-animation-delay: 9s;
    -webkit-animation-delay: 9s
}

.slidingVertical span:nth-child(5) {
    animation-delay: 12s;
    -ms-animation-delay: 12s;
    -webkit-animation-delay: 12s
}

.slidingVertical span:nth-child(6) {
    animation-delay: 15s;
    -ms-animation-delay: 15s;
    -webkit-animation-delay: 15s
}

@-moz-keyframes topToBottom {
    0% {
        opacity: 0
    }

    2% {
        opacity: 0;
        -webkit-transform: translateY(-30px)
    }

    5% {
        opacity: 1;
        -webkit-transform: translateY(0)
    }

    17% {
        opacity: 1;
        -webkit-transform: translateY(0)
    }

    20% {
        opacity: 0;
        -webkit-transform: translateY(30px)
    }

    80% {
        opacity: 0
    }

    to {
        opacity: 0
    }
}

@-webkit-keyframes topToBottom {
    0% {
        opacity: 0
    }

    2% {
        opacity: 0;
        -webkit-transform: translateY(-30px)
    }

    5% {
        opacity: 1;
        -webkit-transform: translateY(0)
    }

    17% {
        opacity: 1;
        -webkit-transform: translateY(0)
    }

    20% {
        opacity: 0;
        -webkit-transform: translateY(30px)
    }

    80% {
        opacity: 0
    }

    to {
        opacity: 0
    }
}

@-ms-keyframes topToBottom {
    0% {
        opacity: 0
    }

    2% {
        opacity: 0;
        -webkit-transform: translateY(-30px)
    }

    5% {
        opacity: 1;
        -webkit-transform: translateY(0)
    }

    17% {
        opacity: 1;
        -webkit-transform: translateY(0)
    }

    20% {
        opacity: 0;
        -webkit-transform: translateY(30px)
    }

    80% {
        opacity: 0
    }

    to {
        opacity: 0
    }
}

.rotate-img {
    animation: rotationimg 20s linear infinite
}

@keyframes rotationimg {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(359deg)
    }
}

.text-scroll-left {
    animation: scrollText 20s linear infinite
}

@keyframes scrollText {
    0% {
        transform: translateX(0)
    }

    to {
        transform: translateX(-100%)
    }
}

.text-scroll-right {
    animation: scrollTextRight 20s linear infinite
}

@keyframes scrollTextRight {
    0% {
        transform: translateX(-100%)
    }

    to {
        transform: translateX(0)
    }
}

.outline-title {
    text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff
}

[data-aos][data-aos][data-aos-duration="4000"],
body[data-aos-duration="4000"] [data-aos] {
    transition-duration: 4s
}

.video-sec {
    padding: 80px 0
}

.mockup {
    z-index: 3;
    text-align: center;
    font-size: 0;
    perspective: 2400px;
    perspective-origin: 50% 100%;
    opacity: 0;
    transition: opacity .5s
}

.mockup,
.mockup .part {
    display: inline-block;
    position: relative
}

.mockup .part {
    transform-style: preserve-3d;
    transform-origin: 50% 100%;
    transition: 1.5s
}

.mockup .part .top {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 50% 0;
    transform: translateZ(-11px) rotateX(90deg);
    transition: 1.5s
}

.mockup .part .bottom {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 50% 0;
    transform: translateZ(0) rotateX(90deg)
}

.mockup .part .cover {
    position: relative
}

.mockup .part.top {
    transform: translateZ(0) rotateX(0deg)
}

.mockup img,
.mockup svg {
    display: block;
    max-width: 100%;
    backface-visibility: hidden;
    width: 900px
}

@media (min-width:768px) and (max-width:1024px) {

    .mockup img,
    .mockup svg {
        width: 600px
    }
}

.mockup .video {
    display: block;
    position: absolute;
    top: 8%;
    left: 4%;
    width: 92%;
    border-radius: 6px;
    backface-visibility: hidden;
    transform: translateZ(1px);
    bottom: 15%
}

.mockup .part.bottom {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateZ(0) rotateX(-90deg)
}

.mockup.loaded {
    opacity: 1
}

.mockup.loaded .part .top {
    transform: translateZ(-11px) rotateX(90deg) scale(1)
}

@media(max-width:768px) {
    .mockup {
        perspective: 7000px
    }

    .video-sec {
        padding-bottom: 30px
    }
}

:root {
    --size: 120;
    --coefficient: 1px;
    --timeline: 3s;
    --delay: 0.65s;
    --rotation-y: -4;
    --rotation-x: 8;
    --color-one: #3a0ca3;
    --color-two: #4361ee;
    --color-three: #4cc9f0
}

.loader {
    --depth: var(--size);
    --color: var(--color-one, #8338ec);
    width: calc(var(--depth)*var(--coefficient));
    aspect-ratio: 1;
    transform-origin: 50% 50%;
    animation: squish-squosh var(--timeline) var(--delay) infinite;
    margin-left: auto
}

.spinner {
    animation: spin var(--timeline) var(--delay) infinite
}

.jumper {
    animation: jump var(--timeline) var(--delay) infinite
}

@keyframes squish-squosh {

    0%,
    50%,
    60% {
        scale: 1 1 1
    }

    10%,
    35% {
        scale: .5 .8 .5
    }

    25% {
        scale: .5 .9 .5
    }

    70% {
        scale: 1 1 1
    }

    80% {
        scale: 1 1 1
    }

    90%,
    to {
        scale: 1.2 1.2 1.2
    }
}

@keyframes fade {

    0%,
    10%,
    40%,
    50%,
    60%,
    to {
        opacity: 1
    }

    25% {
        opacity: .5
    }
}

@keyframes jump {

    0%,
    10%,
    35%,
    50% {
        translate: 0 0
    }

    25% {
        translate: 0 -100%
    }
}

.cuboid {
    width: 100%;
    height: 100%;
    position: relative
}

@media (min-width:1200px) and (max-width:1500px) {
    .container {
        max-width: 1170px !important
    }
}

.tooltip {
    position: relative
}

.tooltip:after,
.tooltip:before {
    display: block;
    opacity: 0;
    pointer-events: none;
    position: absolute
}

.tooltip:after {
    border-right: 6px solid transparent;
    border-top: 6px solid #272727;
    border-left: 6px solid transparent;
    content: "";
    height: 0;
    top: 0;
    left: 10px;
    width: 0
}

.tooltip:before {
    background: #272727;
    border-radius: 2px;
    color: #fff;
    content: attr(data-title);
    font-size: 14px;
    padding: 6px 10px;
    right: 0;
    bottom: 36px;
    width: 220px;
    text-transform: capitalize;
    font-weight: 300
}

@media (max-width:767px) {
    .tooltip:before {
        right: inherit
    }

    ul li:last-child .tooltip:before {
        right: 0
    }

    .eye {
        width: 80px;
        height: 100px
    }
}

.tooltip.expand:after,
.tooltip.expand:before {
    transform: scale3d(.2, .2, 1);
    transition: all .5s ease-in-out
}

.tooltip.expand:hover:after,
.tooltip.expand:hover:before {
    opacity: 1;
    transform: scaleX(1)
}

.tooltip.expand:hover:after {
    transition: all .4s ease-in-out .2s
}

li {
    cursor: pointer;
    display: inline-block;
    padding: 0 10px
}

@media (min-width:1024px) {
    #navbar-collapse {
        display: block !important
    }
}

.eye {
    display: flex;
    width: 110px;
    height: 140px;
    margin: 0 2.6rem;
    align-items: center;
    position: relative;
    z-index: 10
}

.plane-icon {
    left: 100px
}

#svg_layer,
.plane-icon {
    position: absolute;
    top: 100px
}

#svg_layer {
    fill: none;
    max-width: 1325px;
    left: 330px
}

.footer-clutch {
    background-color: #fff;
    display: inline-block;
    max-width: 220px;
    padding: 15px;
    margin-top: 30px;
    border-radius: 5px
}

.site-loader {
    inset: 0;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #030303;
    position: fixed;
    z-index: 101010
}

.site-loader img {
    border-radius: 30px;
    max-width: 130px;
    width: 100%
}