 .service-card {
    @apply relative overflow-hidden lg:w-[37.8%] w-full duration-500;
}
.service-card.active {
    @apply lg:w-[62.2%];
}
.service-card.active .service-img::after {
    @apply opacity-60;
}
.service-card.active .content{
    @apply left-1/2 -translate-x-1/2;
}
.service-card.active .service-text{
    @apply left-[-20%] -translate-x-full;
}
 .service-card-1.hover-active.active {
  @apply dark:bg-card bg-white rounded-2xl dark:border-card border-white;
}
 .service-card-1.hover-active.active:after {
  @apply opacity-100 rotate-360;
}
 .service-card-1.hover-active.active .btn {
  @apply bg-secondary;
}
 .service-card-1.hover-active.active .btn svg {
  @apply rotate-0;
}
 .service-card-1.hover-active.active .btn svg path:first-child {
  @apply !fill-white;
}
 .service-card-1.hover-active.active .btn svg path:last-child {
  @apply !stroke-white;
}