.service-card-1{
    width: 250px;
    position: relative;
    /* border: 1px solid; */
    /* box-shadow: 1px 1px 10px black; */

}


.service-card-1 button{
    position: absolute;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    bottom: 0;
    right: 0;
    background-color: #010329;
    transition: all 0.3s;
    border: none;
    box-shadow: 1px 1px 10px black;

}   

.service-card-1 button i{
    color: white;
    font-size: 25px;
    rotate: -45deg;
}

.service-card-1:hover .inverted-radius{
    background:#a66dd4a5;

}
.service-card-1:hover button{
    background-color: #a66dd4a5;

    width: 65px;
    height: 65px;
    rotate: 10deg;
}

.service-card-1 .inverted-radius {
    position: relative;
    transition: all 0.3s;

    background: rgba( 237, 237, 237, 0.3 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 5px );
-webkit-backdrop-filter: blur( 5px );
/* border-radius: 10px; */
border: 1px solid rgba( 255, 255, 255, 0.18 );

  --r: 20px; /* the radius */
  --s: 30px; /* size of inner curve */
  --x: 20px; /* horizontal offset (no percentane) */
  --y: 20px; /* vertical offset (no percentage) */
  
  width: 250px;
  aspect-ratio: 1;
  /* background: #3FB8AF; */
  border-radius: var(--r);
  --_m:/calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%,#0000 72%);
  --_g:conic-gradient(from 90deg at calc(100% - var(--r)) calc(100% - var(--r)),#0000 25%,#000 0);
  --_d:(var(--s) + var(--r));
  mask:
    calc(100% - var(--_d) - var(--x)) 100% var(--_m),
    100% calc(100% - var(--_d) - var(--y)) var(--_m),
    radial-gradient(var(--s) at 100% 100%,#0000 99%,#000 calc(100% + 1px)) 
     calc(-1*var(--r) - var(--x)) calc(-1*var(--r) - var(--y)),
    var(--_g) calc(-1*var(--_d) - var(--x)) 0,
    var(--_g) 0 calc(-1*var(--_d) - var(--y));
  mask-repeat: no-repeat;
  /* height: 500px; */
  
}

.service-card-1 .inverted-radius .card-title{
    border-bottom: 1px solid white;
    padding: 15px 10px;
    font-size: 18px;
    color: white;
    width: 80%;
    margin: 0px auto;
}



.service-card-1 .inverted-radius .card-image{
    width: 100%;
    margin-top: 10px;
    padding-top: 30px;
    position: relative;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: auto;
    transition: all 0.2s;

}
.service-card-1:hover .inverted-radius .card-image{
    transform:translateX(-50%) scale(1.05);
}
.service-card-1 .inverted-radius img {
    width: 100%;
    object-fit: cover;
    border-radius: inherit; 
    transition: all 0.2s;
}
.service-card-1:hover .inverted-radius img{
border-radius: 20px;
}
.card-image-bg{
 position: absolute;
 height: 150px;
 width: 90%;
 z-index: -1;
 background-color: gray;
 top: 15px;
 left: 10px;
 margin: 0 auto;
 border-radius: 20px;
}
.card-image-bg:nth-child(2){
    top: 0px;
    background-color: rgba(168, 168, 168, 0.534);
    width: 80%;
    left: 20px;
}