/* Add custom CSS styles below */ 
body {
  /*background-image: linear-gradient(#f6f6f6, #e7e7e5);*/
  background: url(https://static.vecteezy.com/system/resources/previews/001/370/057/original/white-and-gray-abstract-cuved-shape-wallpaper-free-vector.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  }

.s-product-card-donation {
  position: relative;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* إحساس hover */
.s-product-card-donation:hover {
  box-shadow: 0 14px 34px rgba(0,0,0,0.16);
  transform: translateY(-3px);
}

/* الإطار المتحرك */
.s-product-card-donation::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 2px; /* سماكة الإطار */
  background: linear-gradient(
    90deg,
    #19c3b1,
    #4dd6c1,
    #19c3b1
  );
  background-size: 300% 300%;
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: donationBorder 2.5s linear infinite;

  /* إظهار الإطار فقط */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* تفعيل الإطار عند hover */
.s-product-card-donation:hover::before {
  opacity: 1;
}

/* حركة الإطار */
@keyframes donationBorder {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}