.a-service--item {
transition: all 0.4s;
position: relative;
}
.a-service--item::before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background-color: #121212;
left: 0;
top: 0;
opacity: 0;
z-index: 0;
visibility: hidden;
}
.a-service--item:hover::before {
visibility: visible;
}
.a-service--item svg {
width: 1em;
height: 1em;
}
.title, .number, .image, .desc, .btn-wrapper {
z-index: 5;
position: relative;
} .a-service--item.style-1 {
gap: 20px;
display: grid;
align-items: center;
grid-template-columns: 0.5fr 1fr 1.5fr 2fr 0.5fr;
}
.a-service--item.style-1 .btn-wrapper {
margin-left: auto;
}
.a-service--item.style-1 .a-btn-circle {
border-radius: 50px;
border: 1px solid #ddd;
height: 70px;
width: 70px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.5s;
} .a-service--item.style-2 {
gap: 20px;
display: grid;
grid-template-columns: 1fr 1fr 0.5fr;
}
.a-service--item.style-2 .wc-btn-wrapper {
display: inline-block;
}
.a-service--item.style-2 .wc-btn-group {
display: flex;
width: fit-content;
margin-left: auto;
}
.a-service--item.style-2 .wc-btn-primary {
padding: 21px 40px;
font-weight: 600;
font-size: 16px;
line-height: 1;
color: #121212;
border: 1px solid #EFEFEF;
background-color: #fff;
transition: all 0.3s;
display: inline-flex;
align-items: center;
overflow: hidden;
z-index: 1;
gap: 30px;
white-space: nowrap;
border-radius: 30px;
text-decoration: none;
}
.a-service--item.style-2 .wc-btn-play {
border-radius: 50px;
border: 1px solid #EFEFEF;
background-color: #fff;
color: #121212;
fill: #121212;
height: 60px;
width: 60px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.5s;
}
.a-service--item.style-2 .wc-btn-group > *:nth-child(2) {
transform: scale3d(1, 1, 1);
}
.a-service--item.style-2 .wc-btn-group:hover > *:nth-child(2) {
background-color: #C9F31D;
transform: scale3d(1, 1, 1);
}
.a-service--item.style-2 .wc-btn-group > *:nth-child(1) {
transform: scale3d(0.5, 0.5, 1);
margin-right: calc( var(--icon-width, 60px) * -1);
opacity: 0;
}
.a-service--item.style-2 .wc-btn-group > *:nth-child(3) {
transform: scale3d(1, 1, 1);
margin-left: 0;
opacity: 1;
}
.a-service--item.style-2 .wc-btn-group:hover > *:nth-child(1) {
background-color: #C9F31D;
transform: scale3d(1, 1, 1);
margin-right: 0;
opacity: 1;
}
.a-service--item.style-2 .wc-btn-group:hover > *:nth-child(3) {
background-color: #C9F31D;
transform: scale3d(0.5, 0.5, 1);
margin-left: calc( var(--icon-width, 60px) * -1);
opacity: 0;
}
@media (max-width: 767px) {
.a-service--item.style-1,
.a-service--item.style-2 {
gap: 10px;
grid-template-columns: 1fr;
}
.a-service--item.style-1 .btn-wrapper,
.a-service--item.style-2 .wc-btn-group  {
margin-left: 0;
}
}