.filter-category-single-work .row.web-design{
    display: flex;
    justify-content: space-between;
}
.filter-category-single-work .row.web-design .col{
    width: 48%;
}
.filter-category-single-work .row.web-design .col .img-card{
    position: relative;
    margin-top: 20px;
    height: 500px;
    padding-top: 15px;
}
.filter-category-single-work .row.web-design .col .img1{
    background-image: url("../img/work-pc-1-1.jpg");
}
.filter-category-single-work .row.web-design .col .img2{
    background-image: url("../img/work-pc-1-2.jpg");
}
.filter-category-single-work .row.web-design .col .img3{
    background-image: url("../img/work-pc-1-3.jpg");
}
.filter-category-single-work .row.web-design .col .img4{
    background-image: url("../img/work-pc-1-4.jpg");
}
.filter-category-single-work .row.web-design .col .img{
    width: 100%;
    overflow: hidden;
    background-position: top center;
    background-size: cover;
    height: calc(500px - 152px);
    transition: background-position 3s ease-in-out; /* انميشن ناعمة */

}
/* ✅ عند الهوفر تنزل الصورة */
.filter-category-single-work .row.web-design .col .img-card:hover .img {
    background-position: bottom center;
  }

/* ✅ الصورة العلوية */
.filter-category-single-work .row.web-design .col .img-card::before {
    content: "";
    position: absolute;
    background-image: url("../img/pc-top.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    top: 0;
    left: 0;
    width: 100%;
    height: 20%;
  }
  
  /* ✅ الصورة السفلية */
  .filter-category-single-work .row.web-design .col .img-card::after {
    content: "";
    position: absolute;
    background-image: url("../img/pc-bottom.svg");
    background-size: contain;
    background-repeat: no-repeat;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 152px;;
  }
  /* ✅ لمسات للموبايل */
@media (max-width: 768px) {
    .filter-category-single-work .row.web-design .col{
      width: 100%;
    }
  
    .filter-category-single-work .row.web-design .col .img-card {
      height: 450px;
    }
  
    .filter-category-single-work .row.web-design .col .img {
      height: calc(450px - 152px);
      transition: none; /* منع الانميشن عشان هيتحكم باللمس */
      touch-action: none; /* يخلي السحب يشتغل */
    }
    .filter-category-single-work .row.web-design {
      gap: 0;
  }
  }