.service-section{
position: relative;
border-bottom: 1px solid #1B1B1B;
padding-top: 112px;
overflow: hidden;
}
.service-section .sec-title{
padding-bottom: 54px;
border-bottom: 1px solid #1B1B1B;
}
.service-block-one .inner-box{
position: relative;
display: block;
padding: 47px 30px 50px 30px;
}
.service-block:last-child .service-block-one .inner-box{
}
.service-block-one .inner-box .icon-box{
position: relative;
display: inline-block;
margin-bottom: 20px;
min-height: 113px;
}
.service-block-one .inner-box .icon-box .icon{
position: relative;
opacity: 0.30;
transition: all 500ms ease;
filter: grayscale(100%);
}
.service-block-one .inner-box:hover .icon-box .icon{
opacity: 1;
filter: grayscale(0%);
}
.service-block-one .inner-box .icon-box .icon-two{
position: absolute;
left: 0px;
top: 0px;
}
.service-block-one .inner-box .links-list{
position: relative;
display: flex;
align-items: center;
margin-bottom: 22px;
}
.service-block-one .inner-box .links-list li{
margin-right: 5px;
}
.service-block-one .inner-box .links-list li a{
position: relative;
display: inline-block;
font-size: 14px;
line-height: 24px;
color: var(--text-color);
padding: 2px 16px;
border-radius: 40px;
border: 1px solid #1B1B1B;
}
.service-block-one .inner-box .links-list li a:hover{
color: #fff;
}
.service-block-one .inner-box h3{
position: relative;
display: block;
font-size: 24px;
line-height: 34px;
margin-bottom: 30px;
}
.service-block-one .inner-box h3 a{
display: inline-block;
color: var(--text-color);
}
.service-block-one .inner-box h3 a:hover{
color: #fff;
}
.service-block-one .inner-box .link a{
position: relative;
display: inline-block;
font-size: 24px;
color: rgba(255, 255, 255, 0.10);
}
.service-block-one .inner-box .link a:hover{
}
.service-section .pattern-layer .pattern-1{
position: absolute;
left: 70px;
top: 288px;
width: 60px;
height: 60px;
background-repeat: no-repeat;
}
.service-section .pattern-layer .pattern-2{
position: absolute;
left: 530px;
top: -309px;
width: 514px;
height: 816px;
background-repeat: no-repeat;
transform: rotate(45deg);
}
.service-section .lower-content{
position: relative;
background: #141416;
} .service-style-two{
position: relative;
}
.service-block-two{
max-width: 416px;
margin: 0 auto;
}
.service-block-two .inner-box{
position: relative;
display: block;
border: 1px solid #1B1B1B;
padding: 65px 50px 55px 50px;
margin-bottom: 30px;
z-index: 1;
transition: all 500ms ease;
}
.service-block-two .inner-box:hover{
}
.service-block-two .inner-box:before{
position: absolute;
content: '';
width: 100%;
height: 0%;
left: 0px;
bottom: 0px;
z-index: -1;
transition: all 500ms ease;
}
.service-block-two .inner-box:hover:before{
height: 100%;
top: 0px;
}
.service-block-two .inner-box:after{
position: absolute;
content: '';
background: #fff;
width: 10px;
height: 10px;
left: -1px;
top: -1px;
opacity: 0;
transition: all 500ms ease;
}
.service-block-two .inner-box:hover:after{
opacity: 1;
}
.service-block-two .inner-box .image-box{
position: relative;
display: block;
border-radius: 50px;
overflow: hidden;
transform: rotate(-5deg);
margin-bottom: 40px;
}
.service-block-two .inner-box .image-box img{
width: 100%;
border-radius: 50px;
}
.service-block-two .inner-box .image-box .image{
position: relative;
transition: all 500ms ease;
}
.service-block-two .inner-box:hover .image-box .image{
opacity: 0;
}
.service-block-two .inner-box .link{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
opacity: 0;
transition: all 500ms ease;
}
.service-block-two .inner-box:hover .link{
opacity: 1;
}
.service-block-two .inner-box .link a{
position: relative;
display: block;
width: 100%;
font-size: 24px;
background: #141416;
padding: 30px 30px;
text-align: center;
}
.service-block-two .inner-box .feature-list{
position: relative;
display: flex;
align-items: center;
}
.service-block-two .inner-box .feature-list li{
margin-right: 5px;
}
.service-block-two .inner-box .feature-list li:last-child{
margin: 0px !important;
}
.service-block-two .inner-box .feature-list li a{
position: relative;
display: inline-block;
font-size: 14px;
line-height: 24px;
color: var(--text-color);
padding: 2px 15px;
border-radius: 30px;
background: #1B1B1B;
}
.service-block-two .inner-box:hover .feature-list li a{
color: #fff;
background: rgba(255, 255, 255, 0.03);
}
.service-block-two .inner-box .feature-list li a:hover{
background: var(--secondary-color);
}
.service-block-two .inner-box .title-text{
position: relative;
display: block;
padding-left: 80px;
}
.service-block-two .inner-box .title-text .icon-box{
position: absolute;
left: 0px;
top: 6px;
}
.service-block-two .inner-box h3{
position: relative;
display: block;
font-size: 24px;
line-height: 34px;
}
.service-block-two .inner-box h3 a{
display: inline-block;
color: var(--text-color);
}
.service-block-two .inner-box:hover h3 a{
color: #fff;
}
.service-block-two .inner-box h3 a:hover{
text-decoration: underline;
}
.service-block-two .inner-box .icon-box .icon{
position: relative;
display: inline-block;
opacity: 0.15;
transition: all 500ms ease;
}
.service-block-two .inner-box:hover .icon-box .icon{
opacity: 1;
}
.service-block-two .inner-box .icon-box .icon-two{
position: absolute;
left: 0px;
top: 0px;
} .service-style-three{
position: relative;
}
.service-style-three .service-block-one .inner-box{
border: none !important;
background: #1B1B1B;
padding-left: 30px;
padding-right: 20px;
}
.service-block-one .inner-box p{
font-size: 14px;
line-height: 26px;
margin-bottom: 20px;
}
.service-style-three .pattern-layer{
position: absolute;
left: 70px;
top: 288px;
width: 60px;
height: 60px;
background-repeat: no-repeat;
} .service-page-section{
position: relative;
}  @media only screen and (max-width: 1200px){
}
@media only screen and (max-width: 991px){
.service-block:last-child .service-block-one .inner-box{
border: none;
}
.service-block-one .inner-box{
margin-bottom: 30px;
}
}
@media only screen and (max-width: 767px){
.service-section{
padding-top: 70px;
}
.service-style-two{
padding: 60px 0px 40px 0px;
}
.service-style-three{
padding: 60px 0px 40px 0px;
}
.service-page-section{
padding: 70px 0px 40px 0px;
}
}
@media only screen and (max-width: 599px){
}
@media only screen and (max-width: 499px){
.service-block-two .inner-box{
padding-left: 30px;
padding-right: 30px;
}
.service-block-two .inner-box .link a{
padding: 20px 30px;
}
}
.service-block-one .icon-box {
display: flex !important; justify-content: center !important; align-items: center !important; height: 100% !important; }