.about-split {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
  }

  .iso-shuffle {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    width: 320px;
    height: 260px;
  }
  .iso-card {
    position: absolute;
    width: 180px;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgb(124 136 78 / 0.25);
    background: #f2f5e1;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
  }
  .iso-card i {
    font-size: 50px;
    color: #7a884e;
    margin-bottom: 15px;
  }
  .iso-card h3 {
    font-size: 1.4rem;
    color: #4e5633;
    margin-bottom: 10px;
  }
  .iso-card p {
    color: #656c4d;
    font-size: 1rem;
  }

  /* مواقع مبعثرة */
  .iso-1 {
    top: 0;
    left: 20px;
    transform: rotate(-8deg);
  }
  .iso-2 {
    top: 70px;
    left: 120px;
    transform: rotate(10deg);
  }
  .iso-3 {
    top: 140px;
    left: 0;
    transform: rotate(-6deg);
  }

  .iso-info {
    max-width: 430px;
    padding: 20px;
    text-align: right;
    background: #e6ebc9;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(122, 136, 78, 0.3);
  }
  .iso-info h2 {
    color: #4e5633;
    margin-bottom: 18px;
  }
  .iso-info p {
    color: #656c4d;
    font-size: 1.1rem;
    line-height: 1.5;
  }

  @media screen and (max-width: 768px) {
    .about-split {
      flex-direction: column;
      height: auto;
    }
    .iso-shuffle {
      width: 100%;
      height: 320px;
      position: relative;
      margin-bottom: 25px;
    }
    .iso-card {
      position: relative;
      width: 90%;
      max-width: 320px;
      margin: 10px auto;
      transform: none !important;
    }
    .iso-info {
      max-width: 100%;
      padding: 15px;
      font-size: 1rem;
    }
  }
.iso-shuffle {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  width: 320px;
  height: 260px;
  perspective: 800px;
}

.iso-card {
  position: absolute;
  width: 180px;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 4px 20px rgb(124 136 78 / 0.25);
  background: #f2f5e1;
  text-align: center;
  transition: transform 0.5s cubic-bezier(0.25, 1.25, 0.5, 1), box-shadow 0.4s;
  cursor: default;
  transform-style: preserve-3d;
}
.iso-card:hover {
  transform: scale(1.1) rotateY(10deg) rotateX(5deg);
  box-shadow: 0 8px 25px rgba(122, 136, 78, 0.4);
  z-index: 5;
}

/* لما تمرّ على الحاوية كلها تتحرك باقي الكروت شوية */
.iso-shuffle:hover .iso-card:not(:hover) {
  transform: scale(0.9) translateY(10px) rotate(0deg);
  opacity: 0.8;
  filter: blur(1px);
}

/* المواقع الأصلية */
.iso-1 {
  top: 0;
  left: 20px;
  transform: rotate(-8deg);
}
.iso-2 {
  top: 70px;
  left: 120px;
  transform: rotate(10deg);
}
.iso-3 {
  top: 140px;
  left: 0;
  transform: rotate(-6deg);
}
/* حركة نسيم خفيفة للكروت */
@keyframes floaty {
  0% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50% { transform: translateY(-6px) rotate(calc(var(--r, 0deg) + 2deg)); }
  100% { transform: translateY(0) rotate(var(--r, 0deg)); }
}

.iso-card {
  animation: floaty 5s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.7s);
}

/* ندي كل كارت لمسة مختلفة */
.iso-1 { --r: -8deg; --i: 1; }
.iso-2 { --r: 10deg; --i: 2; }
.iso-3 { --r: -6deg; --i: 3; }

/* وقت الـ hover: الكروت تتجمع كأنها فريق واحد */
.iso-shuffle:hover .iso-card {
  transform: rotate(0) translateY(-10px) !important;
  animation: none;
  box-shadow: 0 8px 20px rgba(122,136,78,0.35);
}