/* Service Style 1 */
.cspt-service-style-1 .cspt-service-btn,
.cspt-service-style-1 .cspt-service-icon-wrapper,
.cspt-service-style-1 .cspt-featured-wrapper img,
.cspt-service-style-1 .creativesplanet-post-item{
   -webkit-transition: all 0.5s ease 0s;
   -o-transition: all 0.5s ease 0s;
   transition: all 0.5s ease 0s;
}
.cspt-service-style-1 .creativesplanet-post-item{ 
   box-shadow: 0px 8px 18px 0px rgb(0 0 0 / 9%);
}
.cspt-service-style-1 .creativesplanet-box-content{
   padding: 35px 25px 25px;
   text-align: center;
   background-color: var(--cspt-leblix-white-color);
}
.cspt-service-style-1 .cspt-service-icon-wrapper{
   line-height: 65px;
   font-size: 65px; 
}
.cspt-service-style-1 .cspt-service-title {
   font-size: 22px;
   line-height: 28px;
   font-weight: 700;
   letter-spacing: -0.5px;
   text-transform: capitalize;
   margin: 5px 0 25px;
}
.cspt-service-style-1 .cspt-service-icon-wrapper,
.cspt-service-style-1 .cspt-service-title a:hover{
   color: var(--cspt-leblix-global-color);
}
.cspt-service-style-1 .cspt-service-title a{
   color: var(--cspt-leblix-blackish-color);
}
.cspt-service-style-1 .cspt-content-inner{
   position: relative;
}
.cspt-service-style-1 .cspt-featured-wrapper{
   overflow: hidden;
   position: relative;
   display: block;
}
.cspt-service-style-1 .cspt-featured-wrapper:after{
   position: absolute;
   content: "";
   bottom: 0;
   left: 0;
   right: 0;
   height: 100%;
   opacity: 0;
   background: var(--cspt-leblix-secondary-color);
   transition-delay: .1s;
   transition-timing-function: ease-in-out;
   transition-duration: .5s;
   transition-property: all;
   opacity: 0.50;
   transform-origin: bottom;
   transform-style: preserve-3d;
   transform: scaleY(0);
   z-index: 1;
}
.cspt-service-style-1:hover .cspt-featured-wrapper:after{
   transform: scaleY(1.0);
   opacity: 0.9;
}
.cspt-service-style-1:hover .cspt-featured-wrapper img{
   -webkit-transform: scale(1.2);
   -ms-transform: scale(1.2);
   transform: scale(1.2);
}
.cspt-service-style-1 .cspt-service-content p{
   font-size: 17px;
   line-height: 24px;
   margin-bottom: 0px;
   color: var(--cspt-leblix-white-color);
   font-weight: 600;
}
.cspt-service-style-1 .cspt-service-content{
   position: absolute;
   left: 0px;
   right: 0px;
   padding: 50px;
   z-index: 5;
   opacity: 0;
   top: 50%;
   -khtml-transform: translateX(0%) translateY(-50%);
   -moz-transform: translateX(0%) translateY(-50%);
   -ms-transform: translateX(0%) translateY(-50%);
   -o-transform: translateX(0%) translateY(-50%);
   transform: translateX(0%) translateY(-50%);
   transition: .9s ease-in-out;
}
.cspt-service-style-1:hover .cspt-service-content{
   opacity: 1;
}
.cspt-service-style-1 .cspt-service-btn{
   width: 70px;
   height: 70px;
   line-height: 70px;
   font-size: 20px;
   z-index: 5;
   background-color: var(--cspt-leblix-link-color-hover);
   text-align: center;
   position: absolute;
   bottom: 25px;
   left: 0;
   display: inline-block;
   right: 0;
   margin: 0 auto;
   opacity: 0;
}
.cspt-service-style-1:hover .cspt-service-btn{
   bottom:0;
   opacity: 1;
}
.cspt-service-style-1 .cspt-service-btn a{
   font-size: 15px;
   color: #fff;
}
.cspt-service-style-1 .cspt-service-btn::after{
   right:0;
   bottom: 0;
   transition-duration: 0.5s;
 }
 .cspt-service-style-1 .cspt-service-btn::before{
   left: 0;
   top: 0;
   transition-duration: 0.5s;
 }

 .cspt-service-style-1 .cspt-service-btn a:after{
   right:0;
   bottom: 0;
   transition-duration: 0.5s;
 }
 .cspt-service-style-1 .cspt-service-btn a:before{
   left: 0;
   top: 0;
   transition-duration: 0.5s;
 }
 .cspt-service-style-1 .cspt-service-btn::before,
 .cspt-service-style-1 .cspt-service-btn::after{
   content:"";
   width: 0;
   height: 2px;
   position: absolute;
   transition: all 0.5s linear;
   background: #fff;
 } 
 .cspt-service-style-1 .cspt-service-btn a::before,
 .cspt-service-style-1 .cspt-service-btn a::after{
   content:"";
   width:2px;
   height:0;
   position: absolute;
   transition: all 0.5s linear;
   background: #fff;
 }
 .cspt-service-style-1 .cspt-service-btn:hover::before,
 .cspt-service-style-1 .cspt-service-btn:hover::after{
   width: 100%;
 }
 .cspt-service-style-1 .cspt-service-btn:hover a::before,
 .cspt-service-style-1 .cspt-service-btn:hover a::after{
   height: 100%;
 }