.service {
&__item {
margin: 23px;
position: relative;
text-align: center;
padding-bottom: 90px;
background-color: #fff;
box-shadow: 0px 30px 160px 0px rgba(0, 0, 0, 0.1);
@include border-radius(0% 0 50% 50% / 0 0 43% 43%);
position: relative;
z-index: 1;
&::before {
position: absolute;
top: -30px;
left: -22px;
right: -22px;
bottom: -30px;
border: 2px dashed #d3d3d3;
content: "";
@include transition(.3s);
@include border-radius(0% 0 50% 50% / 0 0 40% 40%);
z-index: -1;
}
&:hover::before {
border-color: var(--color-primary);
}
.image {
width: 175px;
margin: 0 auto;
height: 197px;
object-fit: cover;
@include border-radius(0% 0 50% 50% / 0 0 40% 40%);
overflow: hidden;
top: -30px;
position: relative;
margin-bottom: -14px;
@include respond(lg) {
width: 120px;
height: 120px;
}
img {
height: 100%;
object-fit: cover;
}
}
.content {
z-index: 1;
position: relative;
}
.title {
font-size: 25px;
margin-bottom: 14px;
}
}
&__bg {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
@include border-radius(0% 0 50% 50% / 0 0 43% 43%);
overflow: hidden;
}
&__link {
position: absolute;
bottom: -157px;
width: 175px;
height: 197px;
background-color: #1f1f1f;
left: 50%;
@include transform(translateX(-50%));
@include border-radius(50% 50% 0% 0 / 43% 43% 0 0);
@include transition(.3s);
i {
color: var(--color-white);
font-size: 13px;
@include transform(translateY(5px));
}
}
&__item:hover &__link {
background-color: var(--color-primary);
}
}
.sec-cta {
&__text {
font-size: 15px;
color: var(--color-primary);
border: 1px dashed #d6d6d6;
display: inline-block;
@include border-radius(0 25px 25px 0);
overflow: hidden;
span {
padding: 11px 38px 11px 44px;
display: inline-block;
font-weight: 400;
}
a {
background-color: var(--color-primary);
padding: 11px 23px 11px 36px;
color: var(--color-white);
height: 100%;
display: inline-block;
@include transition(.3s);
font-weight: 600;
&:hover {
background-color: var(--color-dark);
}
i {
font-size: 12px;
margin-left: 5px;
}
}
&--2 {
color: var(--color-dark);
background-color: #f8f8f8;
border-color: transparent;
}
}
}
.service-single {
z-index: 1;
&__content {
margin-right: -25px;
@include respond(md) {
margin-right: 0;
}
p {
font-size: 18px;
line-height: 28px;
&:not(:last-child) {
margin-bottom: 20px;
}
}
h3 {
font-size: 30px;
margin-bottom: 20px;
}
}
&__list {
li {
font-size: 18px;
line-height: 28px;
padding-left: 32px;
position: relative;
&:not(:last-child) {
margin-bottom: 15px;
}
i {
color: var(--color-primary);
margin-right: 10px;
position: absolute;
top: 6px;
left: 0;
}
}
}
&__title {
position: absolute;
left: 38px;
right: 38px;
bottom: 0;
padding: 10px;
font-size: 38px;
font-weight: 700;
text-align: center;
background-color: var(--color-white);
@include border-radius(44px);
}
.tx-item {
&--image {
img {
width: 100%;
}
}
&--holder {
padding: 46px 60px 85px 65px;
@include respond(lg) {
padding: 30px;
padding-bottom: 40px;
}
}
&--ovarly-image {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-position: bottom center;
}
&--title {
font-size: 38px;
margin-bottom: 18px;
a {
color: #fff;
}
}
&--content {
font-size: 18px;
line-height: 28px;
color: #c2c2c2;
margin-bottom: 25px;
}
&--list {
li {
font-size: 20px;
font-family: var(--font-teko);
color: #fff;
&:not(:last-child) {
margin-bottom: 10px;
}
i {
font-size: 17px;
color: var(--color-primary-2);
margin-right: 8px;
}
}
}
}
}
.service-warp {
margin-bottom: -170px;
z-index: 2;
position: relative;
}
.service-shape {
.shape {
position: absolute;
bottom: 18%;
&--1 {
left: 0;
}
&--2 {
right: 0;
}
}
}
.service-item {
padding: 50px 35px 80px;
@include transition(.3s);
position: relative;
z-index: 1;
&::before {
position: absolute;
top: 0;
left: 40px;
width: 100px;
height: 200px;
background-color: var(--color-primary);
content: "";
clip-path: polygon(0 96%, 0px 0px, 91.00% 14.00%, 100% 100%);
z-index: -1;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
&::after {
position: absolute;
bottom: 23px;
right: 0;
width: 100%;
height: 200px;
background-color: var(--color-primary);
content: "";
clip-path: polygon(31px 97.50%, 0px 0px, 98.44% 15.5%, 99.74% 88.5%);
z-index: -2;
@include transition(.3s);
}
&:hover {
.tx-item {
&--icon {
margin-right: 20px;
padding-right: 20px;
position: relative;
&::before {
opacity: 1;
transition-delay: .2s;
}
}
&--title,
&--content {
color: var(--color-white);
}
&--bg {
background-color: var(--color-black);
}
&--link {
opacity: 1;
visibility: visible;
transition-delay: .2s;
}
}
&::before {
top: -17px;
@include transform(rotate(-5deg));
}
&::after {
bottom: 0;
@include transform(rotate(5deg));
}
}
.tx-item {
&--bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fbfbfb;
clip-path: polygon(0 100%, 0 0, 100% 0, 100% calc(100% - 55px));
z-index: -1;
@include transition(.3s);
}
&--holder {
}
&--icon {
font-size: 65px;
color: var(--color-primary);
margin-right: 14px;
@include transition(.3s);
&::before {
position: absolute;
top: 5px;
right: 0;
width: 2px;
height: 58px;
background-color: #2e2e2e;
content: "";
transition-delay: .2s;
opacity: 0;
}
}
&--title {
font-size: 28px;
font-weight: 800;
color: var(--color-black);
line-height: 35px;
a {
color: inherit;
}
}
&--content {
font-size: 17px;
color: #494949;
line-height: 28px;
@include transition(.3s);
}
&--link {
position: absolute;
bottom: 8px;
right: 14px;
color: var(--color-white);
font-size: 12px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
opacity: 0;
visibility: hidden;
@include transition(.3s);
}
}
}