@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fadeIn {
  animation: fadeIn 1s ease-out forwards;
}

.cluster-images {
  position: relative;
  width: 320px;
  height: 320px;
}
@media (min-width: 768px) {
  .cluster-images {
    width: 400px;
    height: 400px;
  }
}
.cluster-img {
  position: absolute;
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 1rem;
  transition: transform 0.3s, z-index 0.3s;
}
.img1 { top: 0; left: 40px; z-index: 3; transform: rotate(-8deg); }
.img2 { top: 30px; left: 120px; z-index: 2; transform: rotate(10deg); }
.img3 { top: 120px; left: 0; z-index: 2; transform: rotate(-6deg); }
.img4 { top: 100px; left: 160px; z-index: 4; transform: rotate(6deg); }
.img5 { top: 200px; left: 80px; z-index: 1; transform: rotate(-12deg); }
.img6 { top: 180px; left: 200px; z-index: 2; transform: rotate(8deg); }
.cluster-img:hover { z-index: 10; transform: scale(1.08) rotate(0deg); }

/* Circling icons using polar coordinates */
.circle-icon {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0);
  transition: transform 0.3s;
  z-index: 11;
}
.icon1 { top: 0%; left: 50%; transform: translate(-30%, -0%) scale(1); }
.icon2 { top: 18%; left: 70%; transform: translate(-30%, 30%) scale(1); }
.icon3 { top: 55%; left: 60%; transform: translate(30%, 30%) scale(1); }
.icon4 { top: 60%; left: 40%; transform: translate(30%, 30%) scale(1); }
.icon5 { top: 80%; left: 10%; transform: translate(30%, -30%) scale(1); }
.icon6 { top: 50%; left: 0%; transform: translate(30%, -30%) scale(1); }
.icon7 { top: 20%; left: 30%; transform: translate(-30%, -30%) scale(1); }
.circle-icon:hover { transform: scale(1.15); z-index: 20; }
@media (max-width: 767px) {
  .cluster-images { width: 200px; height: 200px; }
  .cluster-img { width: 80px; height: 80px; }
  .icon1, .icon2, .icon3, .icon4, .icon5, .icon6, .icon7 { width: 120px; height: 120px; }
}