.case-section{
position: relative;
padding-top: 110px;
padding-bottom: 100px;
}
.case-section .owl-nav,
.case-section .owl-dots{
display:none;
}
.case-block{
position: relative;
}
.case-block .inner-box{
position: relative;
display:block;
overflow: hidden;
}
.case-block .inner-box .image{
position: relative;
}
.case-block .inner-box .image:before{
position:absolute;
content:'';
left:0px;
bottom:0px;
width:100%;
height:80%;
display:block;
z-index:1;
transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
-webkit-transition:all 0.3s ease;
-ms-transition:all 0.3s ease;
-o-transition:all 0.3s ease;
background:-webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.4));
background:-moz-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.4));
background:-o-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.4));
background:-ms-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.4));
}
.case-block .inner-box:hover .image:before{
opacity: 0;
}
.case-block .inner-box .image img{
position: relative;
width:100%;
display: block;
}
.case-block .inner-box .image .overlay-box{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
opacity: 0;
z-index: 2;
color: #ffffff;
visibility: hidden;
-webkit-transition: all 700ms ease;
-ms-transition: all 700ms ease;
-o-transition: all 700ms ease;
transition: all 700ms ease;
-webkit-transform-origin:left top;
-ms-transform-origin:left top;
-moz-transform-origin:left top;
transform-origin:left top;
-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
.case-block .inner-box .image .overlay-box:before{
position: absolute;
content: '';
left: 0px;
top: 0px;
right:0px;
bottom:0px;
opacity: 0;
display: block;
visibility: hidden;
transition: all 900ms ease;
-moz-transition: all 900ms ease;
-webkit-transition: all 900ms ease;
-ms-transition: all 900ms ease;
-o-transition: all 900ms ease;
background-color:rgba(238,48,80,0.95);
}
.case-block .inner-box:hover .image .overlay-box:before{
opacity: 1;
visibility: visible;
}
.case-block .inner-box .image .overlay-box .overlay-inner{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
display: table;
vertical-align: middle;
padding: 10px 40px;
}
.case-block .inner-box .image .overlay-box .overlay-inner .content{
position: relative;
display: table-cell;
vertical-align: middle;
}
.case-block .inner-box .image .overlay-box .text{
position: relative;
color:#ffffff;
font-size: 16px;
line-height: 1.7em;
margin-bottom: 40px;
}
.case-block .inner-box .image .overlay-box .read-more{
position:relative;
font-size: 13px;
font-weight: 700;
color:#ffffff;
padding-right: 22px;
text-transform: uppercase;
font-family: 'Hind', sans-serif;
}
.case-block .inner-box .image .overlay-box .read-more:after{
position: absolute;
content: '';
left: 100%;
top: 10px;
width: 300%;
height: 1px;
background-color: rgba(255,255,255,0.20);
}
.case-block .inner-box .image .overlay-box .read-more .fa{
position:relative;
margin-right: 4px;
}
.case-block .inner-box:hover .image .overlay-box{
opacity: 1;
visibility: visible;
-moz-transform: translateX(0%);
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
.case-block .inner-box .lower-box{
position:relative;
padding: 40px 40px;
transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
-webkit-transition:all 0.3s ease;
-ms-transition:all 0.3s ease;
-o-transition:all 0.3s ease;
}
.case-block .inner-box:hover .lower-box{
background-color: #f9f8fc;
}
.case-block .inner-box .lower-box .category{
position: relative;
color:#443986;
font-size: 13px;
font-weight: 700;
margin-bottom: 5px;
text-transform: uppercase;
transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
-webkit-transition:all 0.3s ease;
-ms-transition:all 0.3s ease;
-o-transition:all 0.3s ease;
}
.case-block .inner-box:hover .lower-box .category{
color:var(--theme-color);
}
.case-block .inner-box .lower-box h3{
position: relative;
color:#222222;
font-size: 22px;
font-weight: 600;
line-height: 1.4em;
}
.case-block .inner-box .lower-box h3 a{
position: relative;
color:#222222;
transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
-webkit-transition:all 0.3s ease;
-ms-transition:all 0.3s ease;
-o-transition:all 0.3s ease;
}
.case-block .inner-box .lower-box h3 a:hover{
color:var(--theme-color);
}