.mainserv-item .colorblock{position:absolute;top:0;bottom:0;left:0;right:0;width:450px!important}
.mainserv-item .colorblock.left{left:12px;right:unset;transition:.6s all linear;-webkit-transition:.6s all linear;-moz-transition:.6s all linear;-ms-transition:.6s all linear}
.mainserv-item .colorblock.right{right:12px;left:unset;transition:.6s all linear;-webkit-transition:.6s all linear;-moz-transition:.6s all linear;-ms-transition:.6s all linear}
.mainserv-item .color-image{padding:145px 0;transition:.3s all linear}
.mainserv-item.even .color-image,.mainserv-item.even .color-hover{text-align:right}
.hovertext-inner{padding-left:100px}
.mainserv-item:last-child{margin-bottom:0!important}

.mainserv-item .color-image, .mainserv-item .color-hover {overflow: hidden;}
.mainserv-item.odd .color-image img, .mainserv-item.odd .color-hover img{transition:.3s all linear;margin-left:-150px;}
.mainserv-item.even .color-image img, .mainserv-item.even .color-hover img{transition:.3s all linear;margin-left:150px;}
.mainserv-item .color-image img {transition:.3s all linear;opacity:1;}

.mainserv-item{position:relative}
.mainserv-item:hover .color-image img{transition:.3s all linear;opacity:0;margin:0;}
.mainserv-item .color-hover{display:block}
.mainserv-item .color-hover img{position:absolute;top:0;left:0;bottom:0;height:100%;opacity:0;}
.mainserv-item .color-hover{position:absolute;top:0;width:100%;left:0;bottom:0;height:100%;padding:145px 0;display:block;transition:.3s all linear}
.mainserv-item .color-hover img{height:100%;object-fit:contain}
.mainserv-item:hover .color-hover img{transition:.3s all linear;opacity:1;margin:0;}
.hovertext-inner h3 a:hover {
    color: inherit;
}
@media(min-width:576px){
    .mainserv-item:hover .colorblock.left{left:calc(100% - 12px);transform:translateX(-100%); width:55% !important;}
    .mainserv-item:hover .colorblock.right{right:calc(100% - 12px);transform:translateX(100%);width:55% !important;}
    .mainserv-item:hover .linkto svg path{
        fill:var(--white);
    }
    .mainserv-item:hover .previewtext,.mainserv-item:hover  h3.smalltitle a,.mainserv-item:hover  h3.smalltitle1 a,.mainserv-item:hover .linkto {
        color: var(--white);
    }
    .mainserv-item .color-image,.mainserv-item .color-hover{background:none !important;}
}
@media(min-width:1200px) and (max-width:1599px) {
.mainserv-item .colorblock{width:400px!important}
.mainserv-item .color-image,.mainserv-item .color-hover{padding:120px 0}
.mainserv-item .hovertext-inner{padding-left:90px}
}
@media(min-width:992px) and (max-width:1199px) {
.mainserv-item .colorblock{width:350px!important}
.mainserv-item .color-image,.mainserv-item .color-hover{padding:90px 0}
.mainserv-item .hovertext-inner{padding-left:80px}
}
@media(min-width:768px) and (max-width:991px) {
.mainserv-item .hovertext-inner{padding-left:20px}
.mainserv-item .colorblock{width:35%!important}
.mainserv-item .color-image,.mainserv-item .color-hover{padding:70px 0}
}
@media(max-width:767px) {
.mainserv-item .color-image,.mainserv-item .color-hover{padding:60px 0}
/* .mainserv-item .colorblock{width:200px!important;height:230px} */

.mainserv-item .hovertext-inner{padding-left:0;margin-top:5vw}
.mainserv-item img{max-width:260px}

}
@media(min-width:576px) and (max-width:767px) {
    
.mainserv-item .colorblock{width:200px!important;height:230px}
}
@media(max-width:575px){
    .mainserv-item.odd .color-image img, .mainserv-item.odd .color-hover img{margin-left:30px;position:relative;z-index:1;}
.mainserv-item.even .color-image img, .mainserv-item.even .color-hover img{margin-left:30px;position:relative;z-index:1;}
    .mainserv-item .color-image,.mainserv-item .color-hover{overflow:hidden;}
.mainserv-item img {
    max-width: 150%;
    margin-right: -100px;
    
    margin-left: 30px;

}
.mainserv-item .color-image,.mainserv-item .color-hover{text-align:right}
.mainserv-item .colorblock{
    display:none;
 }
 
}