#services{}
#services .item{ margin-bottom: 1.75rem;}
#services .item .inner{
    background: linear-gradient(#EEE, #CCC); height: 500px; position: relative;
    overflow: hidden; border-radius: 20px 0 20px 0;
}
#services .item .image a{ display: block; height: 100%; width: 100%; }
#services .item .image{ height: 100%; transition: .2s; }
#services .item .image img{ height: 100%; width: 100%; object-fit: cover;}
#services .item .content{
    position: absolute; left: 0; top: 0; height: 100%; width: 100%; display: flex; align-items: center;
    text-align: center;
}


#services .item .inner:hover{ box-shadow: 0 0 0 2px #FFC100; }

#services > .image{ height: 500px; width: 33.33%; float: left; margin: 0 60px 50px 0; }
#services > .image img{ height: 100%; width: 100%; object-fit: cover; border-radius: 6px; }

#galleryBottom .carousel-control-next{ right: -120px; top: 0px; }
#galleryBottom .carousel-control-prev{ left: -120px; top: 0px; }

/***** RESPONSIVE *****/
@media only screen and (max-width: 992px) {
    #services > .image{ height: 350px; }
}
@media only screen and (max-width: 768px) {
    #services > .image{ float: none; width: 100%; }
    .page-wrapper .banner .carousel.slide .carousel-item{
        mask-size    : 130% !important;   -webkit-mask-size    : 130% !important;
        mask-position: bottom !important; -webkit-mask-position: bottom !important;
    }
}
/***** RESPONSIVE *****/