body{ background-color: rgb(229, 250, 255);}

.card.custom {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

 
.card.custom::after {
    position: absolute;
content: "";
width: 100px; ;
height: 0;

top: 0;
left: 0;
transition: 1s;

opacity: 0.5;
background-color: rgb(43, 136, 226);
}
.card.custom:hover::after {
    width: 100%;
    height: 100%;
    opacity: 0.3;
    transform: 1s;
}

.card.custom::before {
    position: absolute;
content: "";
width: 100px; ;
height: 0;

bottom: 0;
right:  0;
transition: 1s;

opacity: 0.5;
background-color: rgb(43, 133, 226);
}
.card.custom:hover::before {
    width: 100%;
    height: 100%;
    opacity: 0.3;
    transform: 1s;
}

.img-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;       /* يمنع خروج الصورة عند التكبير */
  transform: skewX(-6deg); /* الميل على الحاوية */
}

.card-img-custom {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease-in-out;
  transform-origin: center center;
  transform: skewX(0deg);  /* هنا نلغي الميل للصورة نفسها */
}

.img-wrapper:hover .card-img-custom {
  transform: scale(1.2);   /* الزووم الداخلي فقط */
}

.card-custom:hover,
.card-custom:active,
.card-custom:focus {
  transform: none !important;
}