.animate,
.cursor.img-hover,
.cursor.white-bg,
.lazy-img {
    opacity: 0
}

.animate.fadein-Left {
    transform: translate(50px, 0)
}

.animate.fadein-Right {
    transform: translate(-50px, 0)
}

.animate.fadein-Up,
.animate.fadein-Up-Fast {
    transform: translate(0, 50px)
}

.animate.fadein-Down {
    transform: translate(0, -50px)
}

@keyframes anim {
    to {
        transform: translate(0, 0);
        opacity: 1
    }
}

.twocol-row {
    display: flex;
    flex-wrap: wrap;
    width: 100%
}

.twocol-row.justify-space {
    justify-content: space-between
}

.service-item,
.twocol-row.align-center {
    align-items: center
}

.services {
    position: relative;
    background: #363636
}

.services__items,
.services__wrap {
    position: relative;
    height: 650px;
    width: 100%;
    margin: 0 auto
}

.services .line-heading {
    position: absolute;
    z-index: 5;
    top: 5em
}

.services__items .skipSec {
    position: absolute;
    bottom: 2em;
    right: 2em;
    width: 4.5em;
    height: 4.5em;
    z-index: 3
}

.services__items .skipSec__wrapper {
    width: 100%;
    height: 100%;
    background: #e3204a;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

.services__items .skipSec .head {
    font-size: 1.125em
}

.scene-spacing {
    height: 650px
}

.service-item {
    height: 650px;
    width: 100%;
    display: flex;
    margin: 0 auto
}

.service-item__wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    margin: 0 auto;
    z-index: 2;
    position: relative;
    justify-content: flex-end
}

.service-item__head {
    width: 40%;
    padding: 0 0 0 9%
}

.service-item__img {
    width: 60%;
    padding: 0 4.5%;
    z-index: 0
}

.service-item__img .img-wrapper {
    width: auto;
    height: 300px;
    margin: 0 auto
}

.service-item__img .img-wrapper img {
    height: 100%;
    object-fit: contain
}

.service-item .services-anchor {
    display: none
}

.service-item__bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1
}

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

.service-item__list-wrapper {
    width: 100%;
    display: flex;
    flex-wrap: wrap
}

.service-item__list-wrapper li {
    width: 33.33%;
    padding: 0 1.5em 0 0;
    margin-bottom: .25em
}

.service-item__list-wrapper li a {
    color: rgba(255, 255, 255, .5);
    font-size: .875em;
    transition: .25s ease-in-out
}

.service-item__list-wrapper li a:hover {
    color: #fff
}

.services-thumb-slider-wrapper {
    position: absolute;
    width: 40%;
    height: 650px;
    top: 0;
    left: 0;
    padding: 7em 0 7em 9%;
    z-index: 2;
    display: flex;
    align-items: center;
    border-right: 1px solid rgba(255, 255, 255, .3)
}

@media only screen and (min-device-width:1024px) and (max-device-width:1366px) and (-webkit-min-device-pixel-ratio:2) and (orientation:portrait) {

    .service-item,
    .services-thumb-slider-wrapper,
    .services__items,
    .services__wrap {
        height: 75vh
    }
}

.cursor,
.cursor-follower {
    position: fixed;
    user-select: none;
    pointer-events: none;
    z-index: 99999999
}

.services-thumb-slider-wrapper .scroll-text {
    position: absolute;
    top: 50%;
    transform: translate(100%, -50%);
    left: 4.5%;
    display: flex;
    flex-direction: column
}

@media (max-width:991px) {

    .service-item,
    .services__items,
    .services__wrap {
        height: 75vh
    }

    .service-item__list-wrapper {
        padding-left: 1em
    }

    .service-item__list-wrapper li {
        width: 50%
    }

    .service-item__list-wrapper li a {
        font-size: .95em
    }

    .services-thumb-slider-wrapper {
        height: 75vh;
        padding: 5em 0 5em 5em
    }

    .services-thumb-slider-wrapper .scroll-text {
        display: none
    }
}

.services-thumb-slider-wrapper .scroll-text .mouse {
    margin: 0 auto;
    display: block;
    border-radius: 3.125em;
    border: 2px solid #fff;
    height: 3.125em;
    width: 1.5em;
    position: relative;
    opacity: .4
}

.services-thumb-slider-wrapper .scroll-text .move {
    position: absolute;
    background-color: #fff;
    height: .25em;
    width: .25em;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
    animation: 2s linear infinite move;
    opacity: .8
}

.cursor-follower.extra-white::before,
.cursor-follower.img-hover::before,
.cursor-follower.white-bg::before {
    transform: translate(-50%, -50%) scale3d(1, 1, 1);
    transition: transform .6s, opacity .4s
}

.services-thumb-slider-wrapper .scroll-text .head {
    font-size: .75em;
    letter-spacing: .03em;
    margin: .75em 0 0;
    opacity: .4
}

.services-thumb-slider-wrapper .services-thumb-slider {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0
}

.services-thumb-slider-wrapper .services-thumb-slider .swiper-slide {
    display: flex;
    align-items: center
}

.services-thumb-slider-wrapper .services-thumb-slider .swiper-slide .service-thumb__head {
    opacity: .2;
    transition: .25s ease-in-out
}

.services-thumb-slider-wrapper .services-thumb-slider .swiper-slide .service-thumb__head h2 {
    font-size: 1.1em;
    transition: .25s ease-in-out
}

@media (max-width:375px) {
    .services-thumb-slider-wrapper .services-thumb-slider .swiper-slide .service-thumb__head h2 {
        font-size: 1em
    }
}

.services-thumb-slider-wrapper .services-thumb-slider .swiper-slide .service-thumb__head h2 a {
    color: #f1e8e0
}

.services-thumb-slider-wrapper .services-thumb-slider .swiper-slide.swiper-slide-next .service-thumb__head,
.services-thumb-slider-wrapper .services-thumb-slider .swiper-slide.swiper-slide-prev .service-thumb__head {
    opacity: .4;
    transition: .25s ease-in-out
}

@media (max-width:767px) {
    .services {
        background: #f1e8e0
    }

    .services__items,
    .services__wrap {
        height: 60vh
    }

    .services .line-heading {
        margin: 0;
        padding: 2em 0;
        top: 0
    }

    .service-item__head {
        width: 100%;
        margin-bottom: 4em;
        padding: 0 1em;
        text-align: center
    }

    .service-item__img {
        width: 100%
    }

    .services-slider {
        display: none
    }

    .services-thumb-slider-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        margin-bottom: 4em;
        padding: 10em 0 0;
        text-align: center
    }

    .services-thumb-slider-wrapper .services-thumb-slider {
        height: 100%
    }

    .services-thumb-slider-wrapper .services-thumb-slider .swiper-wrapper {
        display: grid
    }

    .services-thumb-slider-wrapper .services-thumb-slider .swiper-slide .service-thumb__head,
    .services-thumb-slider-wrapper .services-thumb-slider .swiper-slide.swiper-slide-next .service-thumb__head,
    .services-thumb-slider-wrapper .services-thumb-slider .swiper-slide.swiper-slide-prev .service-thumb__head {
        opacity: 1
    }
}

.services-thumb-slider-wrapper .services-thumb-slider .swiper-slide.swiper-slide-next .service-thumb__head h2,
.services-thumb-slider-wrapper .services-thumb-slider .swiper-slide.swiper-slide-prev .service-thumb__head h2 {
    font-size: 1.5em;
    transition: .25s ease-in-out
}

.services-thumb-slider-wrapper .services-thumb-slider .swiper-slide.swiper-slide-active .service-thumb__head {
    opacity: 1;
    transition: .25s ease-in-out
}

.services-thumb-slider-wrapper .services-thumb-slider .swiper-slide.swiper-slide-active .service-thumb__head h2 {
    position: relative;
    font-size: 22px;
    padding-left: 10px;
    transition: .25s ease-in-out
}

.services-thumb-slider-wrapper .services-thumb-slider .swiper-slide.swiper-slide-active .service-thumb__head h2::before {
    content: '';
    background: #fff;
    height: 6px;
    width: 6px;
    border-radius: 100%;
    position: absolute;
    left: 0;
    top: 12px
}

@media (max-width:1024px) {

    .services-thumb-slider-wrapper .services-thumb-slider .swiper-slide.swiper-slide-next .service-thumb__head h2,
    .services-thumb-slider-wrapper .services-thumb-slider .swiper-slide.swiper-slide-prev .service-thumb__head h2 {
        font-size: 1em
    }

    .services-thumb-slider-wrapper .services-thumb-slider .swiper-slide.swiper-slide-active .service-thumb__head h2 {
        font-size: 1.1em
    }
}

.services-thumb-slider-wrapper .services-thumb-slider .service-thumb__head h2 {
    color: #fff;
    font-size: 2em;
    font-weight: 500;
    letter-spacing: -.03em;
    margin: 0
}

@media (max-width:576px) {
    .animate {
        opacity: 1
    }

    .animate.fadein-Down,
    .animate.fadein-Left,
    .animate.fadein-Right,
    .animate.fadein-Up,
    .animate.fadein-Up-Fast {
        transform: translate(0, 0)
    }

    .services .line-heading {
        margin: 0;
        padding: 2em 0 0 1em;
        top: 0
    }

    .services .line-heading .outline-text {
        -webkit-text-fill-color: #000;
        -webkit-text-stroke: unset
    }

    .service-item__img .img-wrapper {
        width: 100%;
        height: auto
    }

    .service-item__img .img-wrapper img {
        height: auto
    }

    .service-item__img .descrip-wrapper {
        display: none
    }

    .service-item .services-anchor {
        display: block
    }

    .services-thumb-slider-wrapper {
        padding: 4em 0 2em
    }

    .services-thumb-slider-wrapper .services-thumb-slider {
        padding: 0
    }

    .services-thumb-slider-wrapper .services-thumb-slider .swiper-slide {
        border-bottom: 1px solid rgba(0, 0, 0, .15);
        padding: 0 1em
    }

    .services-thumb-slider-wrapper .services-thumb-slider .swiper-slide .service-thumb__head h2 a {
        color: #000
    }

    .services-thumb-slider-wrapper .services-thumb-slider .service-thumb__head h2 {
        font-size: 2em
    }
}

@keyframes move {
    0% {
        transform: translate(-50%, 0);
        opacity: 0
    }

    50% {
        transform: translate(-50%, 1.5625em);
        opacity: 1
    }

    100% {
        transform: translate(-50%, 3em);
        opacity: 0
    }
}

.cursor {
    background-color: #db0029;
    width: .625em;
    height: .625em;
    transition: transform .25s linear, border-color .25s cubic-bezier(.75, -1.27, .3, 2.33), height .25s linear, width .25s linear, opacity .25s cubic-bezier(.75, -.27, .3, 1.33);
    transform: scale(1) translate(-50%, -50%);
    border: 1px solid transparent;
    transform-origin: 50% 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%
}

.cursor.hovered {
    cursor: pointer !important;
    opacity: 0
}

.cursor.white-col {
    background-color: #fff
}

.cursor-follower {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    transition: opacity .25s ease-in-out, width .25s ease-in-out, height .25s ease-in-out;
    transform: translate(-50%, -50%);
    width: 3.125em;
    height: 3.125em;
    border: 2px solid rgba(227, 32, 74, .3);
    opacity: 1
}

@media (max-width:1199px) {

    .cursor,
    .cursor-follower {
        display: none
    }
}

@media (min-width:1300px) and (max-width:1400px) and (min-height:900px) {

    .cursor,
    .cursor-follower {
        display: none
    }
}

.cursor-follower.hovered {
    width: 3.5em;
    height: 3.5em;
    background: rgba(227, 32, 74, .3)
}

.cursor-follower::before {
    content: "DRAG";
    position: absolute;
    width: 6em;
    height: 6em;
    background-color: #e3204a;
    color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale3d(0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    opacity: 0;
    transition: transform .6s, opacity .4s;
    z-index: -1;
    font-size: .65em;
    font-weight: 700
}

.cursor-follower.img-hover::before {
    opacity: 1
}

.cursor-follower.white-bg::before {
    opacity: 1;
    background-color: #fff;
    color: #e3204a
}

.cursor-follower.white-col {
    border-color: #fff
}

.cursor-follower.extra-white::before {
    content: "cursor";
    opacity: 1;
    background-color: #fff;
    color: #e3204a
}