/* https://codepen.io/aija/pen/xvXWoK */

.serviceWrapper {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
}

.serviceWrapper:after {
    content: "";
    background: rgb(252 190 107 / 33%);
    height: 120px;
    width: 120px;
    border-radius: 100%;
    position: absolute;
    bottom: 60px;
    right: 90px;
    z-index: -1;
}

.cloud-icon {
    position: absolute;
    top: 50px;
    left: 120px;
}

.imgLineWrap {
    display: flex;
    align-items: center;
}

.imgLineWrap img {
    width: 140px;
    z-index: 11;
    margin: 0 -100px 0 0;
}

.imgLineWrap .horLine,
.imgLineWrap .verLine {
    position: relative;
}

.imgLineWrap .verLine {
    height: 41%;
    width: 200px;
    border-right: 2px dashed;
    position: relative;
    left: -7px;
    z-index: 1;
}

.serviceCarousel {
    position: relative;
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    position: relative;
    left: -82px;
}

.carousel__item {
    display: flex;
    align-items: center;
    position: absolute;
    width: 100%;
    padding: 9px 0;
    opacity: 0;
    will-change: transform, opacity;
    -webkit-animation: carousel-animate-vertical 27s linear infinite;
    animation: carousel-animate-vertical 27s linear infinite;
}

.carousel__item:before {
    content: "";
    width: 34%;
    height: 1px;
    border: 1px dashed;
    visibility: hidden;
}

.carousel__item:nth-child(1) {
    -webkit-animation-delay: calc(3s * -1);
    animation-delay: calc(3s * -1);
}

.carousel__item:nth-child(2) {
    -webkit-animation-delay: calc(3s * 0);
    animation-delay: calc(3s * 0);
}

.carousel__item:nth-child(3) {
    -webkit-animation-delay: calc(3s * 1);
    animation-delay: calc(3s * 1);
}

.carousel__item:nth-child(4) {
    -webkit-animation-delay: calc(3s * 2);
    animation-delay: calc(3s * 2);
}

.carousel__item:nth-child(5) {
    -webkit-animation-delay: calc(3s * 3);
    animation-delay: calc(3s * 3);
}

.carousel__item:nth-child(6) {
    -webkit-animation-delay: calc(3s * 4);
    animation-delay: calc(3s * 4);
}

.carousel__item:nth-child(7) {
    -webkit-animation-delay: calc(3s * 5);
    animation-delay: calc(3s * 5);
}

.carousel__item:nth-child(8) {
    -webkit-animation-delay: calc(3s * 6);
    animation-delay: calc(3s * 6);
}

.carousel__item:last-child {
    -webkit-animation-delay: calc(-3s * 2);
    animation-delay: calc(-3s * 2);
}

.carousel__item-body {
    width: 100%;
    background-color: #fff;
    border-radius: 8px;
    padding: 14px 10px;
    border: solid 2px #97539F;
    color: #97539F;
    position: relative;
}

.carousel__item-body:after {
    content: "";
    height:10px;
    display: block;
    width: 100%;
    background: rgb(151 83 159 / 25%);
    border-radius: 10px;
    margin: 5px 0 0;
}

.carousel__item-body p {
    margin: 0 !important;
}

.title {font-weight: 400;text-transform: CAPITALIZE;}

@-webkit-keyframes carousel-animate-vertical {
    0% {
        transform: translateY(100%) scale(0.5);
        opacity: 0;
        visibility: hidden;
    }

    3%,
    11.1111111111% {
        transform: translateY(100%) scale(0.7);
        opacity: 0.4;
        visibility: visible;
    }

    14.1111111111%,
    22.2222222222% {
        transform: translateY(0) scale(1);
        opacity: 1;
        visibility: visible;
    }

    25.2222222222%,
    33.3333333333% {
        transform: translateY(-100%) scale(0.7);
        opacity: 0.4;
        visibility: visible;
    }

    36.3333333333% {
        transform: translateY(-100%) scale(0.5);
        opacity: 0;
        visibility: visible;
    }

    100% {
        transform: translateY(-100%) scale(0.5);
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes carousel-animate-vertical {
    0% {
        transform: translateY(100%) scale(0.5);
        opacity: 0;
        visibility: hidden;
    }

    3%,
    11.1111111111% {
        transform: translateY(100%) scale(0.7);
        opacity: 0.4;
        visibility: visible;
    }

    14.1111111111%,
    22.2222222222% {
        transform: translateY(0) scale(1);
        opacity: 1;
        visibility: visible;
    }

    25.2222222222%,
    33.3333333333% {
        transform: translateY(-100%) scale(0.7);
        opacity: 0.4;
        visibility: visible;
    }

    36.3333333333% {
        transform: translateY(-100%) scale(0.5);
        opacity: 0;
        visibility: visible;
    }

    100% {
        transform: translateY(-100%) scale(0.5);
        opacity: 0;
        visibility: hidden;
    }
}