.services-one {
position: relative;
display: block;
padding: 120px 0 90px;
counter-reset: count;
overflow: hidden;
z-index: 1;
}
.services-one__shape-2 {
position: absolute;
top: -950px;
left: 0;
}
.services-one__shape-2 img {
width: auto;
}
.services-one .container {
max-width: 1200px;
}
.services-one__inner {
position: relative;
display: block;
}
.services-one__inner:before {
content: "";
position: absolute;
bottom: 26px;
left: 40px;
right: 255px;
height: 4px;
background-color: var(--thm-base);
z-index: 2;
}
.services-one__single {
position: relative;
display: block;
margin-bottom: 30px;
}
.services-one__single:hover .services-one__single-wrap {
transform: translateY(-10px);
}
.services-one__single-wrap {
position: relative;
display: block;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}
.services-one__single-wrap::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: -10px;
bottom: -10px;
border-radius: 15px;
background-color: rgba(var(--thm-black-rgb), .03);
background-position: bottom left;
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transition: -webkit-transform 500ms ease;
transition: -webkit-transform 500ms ease;
transition: transform 500ms ease;
transition: transform 500ms ease, -webkit-transform 500ms ease;
z-index: -1;
}
.services-one__single:hover .services-one__single-wrap::before {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
.services-one__single-inner {
position: relative;
display: block;
padding: 43px 40px 65px;
border-radius: 15px;
background-color: rgb(249, 250, 250);
box-shadow: 0px 0px 60px 0px rgba(4, 23, 26, 0.15);
overflow: hidden;
}
.services-one__title {
font-size: 24px;
font-weight: 600;
line-height: 32px;
}
.services-one__title a {
color: var(--thm-black);
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}
.services-one__title a:hover {
color: var(--thm-base);
}
.services-one__text {
margin-top: 19px;
margin-bottom: 16px;
}
.services-one__points {
position: relative;
display: block;
}
.services-one__points li {
position: relative;
display: flex;
align-items: center;
}
.services-one__points li+li {
margin-top: 5px;
}
.services-one__points li .icon {
position: relative;
display: inline-block;
}
.services-one__points li .icon span {
position: relative;
display: inline-block;
font-size: 12px;
color: var(--thm-base);
font-weight: 900;
}
.services-one__points li p {
margin-left: 14px;
color: var(--thm-black);
}
.services-one__icon {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 75px;
height: 75px;
background-color: var(--thm-black);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
margin-top: -36px;
margin-left: 40px;
z-index: 1;
}
.services-one__icon::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-color: var(--thm-base);
background-position: bottom left;
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transition: -webkit-transform 500ms ease;
transition: -webkit-transform 500ms ease;
transition: transform 500ms ease;
transition: transform 500ms ease, -webkit-transform 500ms ease;
z-index: -1;
}
.services-one__single:hover .services-one__icon::before {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
.services-one__icon span {
position: relative;
display: inline-block;
font-size: 44px;
color: var(--thm-white);
}
.services-one__shape-1 {
position: absolute;
top: -39px;
left: -38px;
width: 80px;
height: 200px;
background-color: rgba(var(--thm-black-rgb), 0.06);
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
transform: rotate(-40deg);
}
.services-one__count {
position: absolute;
top: -25px;
right: 19px;
}
.services-one__count:before {
position: absolute;
top: 0;
right: 0;
font-size: 100px;
line-height: 100px;
font-weight: 600;
text-transform: uppercase;
counter-increment: count;
content: "0"counter(count);
transition: all 200ms linear;
transition-delay: 0.1s;
color: rgba(var(--thm-black-rgb), .09);
font-family: var(--thm-font-two);
}