#home .step .caseImage {
    cursor: pointer;
    border-radius: 12px;
    box-shadow: 0 10px 20px 0 rgba(56, 83, 232, 0.22);
    border: solid 1px rgba(5, 7, 18, 0.06);
    -webkit-transition: transform .3s cubic-bezier(0,0.2,0.2,0.89);
    -moz-transition: transform .3s cubic-bezier(0,0.2,0.2,0.89);
    -o-transition: transform .3s cubic-bezier(0,0.2,0.2,0.89);
    transition: transform .3s cubic-bezier(0,0.2,0.2,0.89);
    overflow: hidden;
}

#home .step .caseImage:hover {
    -webkit-transform: scale(1.04);
    -moz-transform: scale(1.04);  
    -ms-transform: scale(1.04);  
    -o-transform: scale(1.04); 
    transform: scale(1.04);
}

#home #front img {
    position: absolute;
    z-index: -4;
    -webkit-transform: translateZ(20px);
    -moz-transform: translateZ(20px);
    -ms-transform: translateZ(20px);
    -o-transform: translateZ(20px);
    transform: translateZ(20px);
}

#home #shape {
    position: absolute;
    z-index: -5;
}

#home #cloud-1, #home #cloud-2, #home #cloud-3 {
    position: absolute;
    z-index: -4;
}

#home #cloud-1 {
    -webkit-transform: translateZ(20px);
    -moz-transform: translateZ(20px);
    -ms-transform: translateZ(20px);
    -o-transform: translateZ(20px);
    transform: translateZ(20px);
}

#home #cloud-2 {
    -webkit-transform: translateZ(50px);
    -moz-transform: translateZ(50px);
    -ms-transform: translateZ(50px);
    -o-transform: translateZ(50px);
    transform: translateZ(50px);
}

#home #cloud-3 {
    -webkit-transform: translateZ(80px);
    -moz-transform: translateZ(80px);
    -ms-transform: translateZ(80px);
    -o-transform: translateZ(80px);
    transform: translateZ(80px);
}

#home .companiesList .img-fluid{
    filter: saturate(0);
}
#home .companiesList  div:hover .img-fluid{
    filter: saturate(1);
}

@media screen and (min-width: 992px) {

    #home .step .caseImage {
        height: 210px;
    }

    #home .companiesList div {
        border-right: 1px solid rgba(18, 11, 5, 0.1);
        max-height: 132px;
        overflow: hidden;
        padding: 22px 0px;
    }

        #home .companiesList div:nth-child(n+7) {
            border-top: 1px solid rgba(18, 11, 5, 0.1);
        }

        #home .companiesList div:nth-child(6n) {
            border-right: none;
        }
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
    #home #banner-content {
        padding-bottom: 740px;
    }

    #home #front img {
        width: 820px;
        left: 272px;
        top: 200px;
    }

    #home #shape {
        top: 100px;
        bottom: 0;
        left: 272px;
        width: 994px;
        max-width: 1200px;
    }

    #home #cloud-1 {
        width: 132px;
        top: 225px;
        left: 461px;
    }

    #home #cloud-2 {
        width: 97px;
        top: 125px;
        left: 731px;
    }

    #home #cloud-3 {
        width: 74px;
        top: 147px;
        left: 608px;
    }
}

@media screen and (min-width: 1200px) and (max-width: 1441px) {
    #home #banner-content {
        padding-bottom: 740px;
    }

    #home #front img {
        width: 990px;
        top: 120px;
        right: 16px;
    }

    #home #shape {
        top: 60px;
        bottom: 0;
        right: -292px;
        width: 1208px;
    }

    #home #cloud-1 {
        width: 139px;
        top: 179px;
        right: 548px;
    }

    #home #cloud-2 {
        width: 111px;
        top: 50px;
        right: 299px;
    }

    #home #cloud-3 {
        width: 95px;
        top: 45px;
        right: 456px;
    }
}

@media screen and (min-width: 1441px) {
    #home #banner-content {
        padding-top: 140px;
        padding-bottom: 740px;
    }

    #home #front img {
        width: 1174px;
        top: 170px;
        right: 58px;
    }

    #home #shape {
        top: 80px;
        bottom: 0;
        right: -200px;
        width: 1550px;
    }

    #home #cloud-1 {
        width: 171px;
        top: 239px;
        right: 774px;
    }

    #home #cloud-2 {
        width: 118px;
        top: 100px;
        right: 467px;
    }

    #home #cloud-3 {
        width: 120px;
        top: 59px;
        right: 694px;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    #home #banner-content {
        text-align: center;
        padding-bottom: 740px;
    }

    #home #front img {
        max-width: 960px;
        width: 950px;
        top: 280px;
        left: -130px;
    }

    #home #shape {
        top: 240px;
        left: -100px;
        bottom: 0;
        max-width: 1280px;
        width: 1230px;
    }

    #home #cloud-1 {
        width: 132px;
        left: 162px;
        top: 320px;
    }

    #home #cloud-2 {
        width: 97px;
        top: 218px;
        left: 462px;
    }

    #home #cloud-3 {
        width: 74px;
        top: 236px;
        left: 312px;
    }

    #home .step .caseImage {
        height: 140px;
    }

    #home .companiesList div {
        border-right: 1px solid rgba(18, 11, 5, 0.1);
        max-height: 132px;
        overflow: hidden;
        padding: 22px 0px;
    }

        #home .companiesList div:nth-child(n+5) {
            border-top: 1px solid rgba(18, 11, 5, 0.1);
        }

        #home .companiesList div:nth-child(4n) {
            border-right: none;
        }
}

@media screen and (max-width: 767px) {
    #home #banner-content {
        text-align: center;
        padding-bottom: 740px;
    }

    #home .step .caseImage {
        height: 210px;
    }

    #home .companiesList div {
        max-height: 150px;
        overflow: hidden;
        padding: 14px 32px;
    }

        #home .companiesList div:nth-child(n+3) {
            border-top: 1px solid rgba(18, 11, 5, 0.1);
        }

        #home .companiesList div:nth-child(2n) {
            border-left: 1px solid rgba(18, 11, 5, 0.1);
        }

    #home #front img {
        width: 440px;
        max-width: 480px;
        top: 280px;
        left: -10px;
    }

    #home #shape {
        top: 240px;
        bottom: 0;
        left: -180px;
        right: 0;
        width: 880px;
        max-width: 880px;
    }

    #home #cloud-1 {
        width: 96px;
        top: 305px;
        left: -6px;
    }

    #home #cloud-2 {
        width: 83px;
        top: 240px;
        left: 193px;
    }

    #home #cloud-3 {
        width: 62px;
        top: 230px;
        left: 112px;
    }
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

    .animated.delay-0-5s {
        -webkit-animation-delay: 0.5s;
        animation-delay: 0.5s;
    }

    .animated.delay-1s {
        -webkit-animation-delay: 1s;
        animation-delay: 1s;
    }

    .animated.delay-1-5s {
        -webkit-animation-delay: 1.5s;
        animation-delay: 1.5s;
    }

    .animated.delay-2s {
        -webkit-animation-delay: 2s;
        animation-delay: 2s;
    }

    .animated.delay-3s {
        -webkit-animation-delay: 3s;
        animation-delay: 3s;
    }

    .animated.delay-4s {
        -webkit-animation-delay: 4s;
        animation-delay: 4s;
    }

    .animated.delay-5s {
        -webkit-animation-delay: 5s;
        animation-delay: 5s;
    }

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}