.service-card:before, .service-card:after {
  content: '';
  position: absolute;
  inset: 0;
  -webkit-mask-image: url("../../Images/design/service-shape.png");
  mask-image: url("../../Images/design/service-shape.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  
  z-index: -1;
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
}

.service-card:before{
   background-color: var(--bg-before);
  
} .service-card:after {
background-color: var(--bg-after);
      inset: 2px;                 
}


.service-card-two:after {
  
  content: '';
  position: absolute;
  inset: 0;
  -webkit-mask-image: url("../../Images/design/shape-2.png");
  mask-image: url("../../Images/design/shape-2.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  
  /* z-index: -1; */
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
}

 .service-card-two:after {
background-color: var(--bg-after);
                  
}

.img1 {
    position: relative;
    -webkit-mask-image: url("../../Images/design/shape-1.png");
    mask-image: url("../../Images/design/shape-1.png");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    z-index: 2;
}