.about-floating-shapes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.floating-shape {
  position: absolute;
  opacity: 0.6;
  filter: blur(2px) drop-shadow(0 10px 15px rgba(0,0,0,0.1));
}

.shape-1 {
  top: -10%;
  left: -5%;
  width: 25vw;
  animation: floatUpSlow 12s ease-in-out infinite alternate, spinSlow 30s linear infinite;
}

.shape-2 {
  top: 40%;
  right: -5%;
  width: 20vw;
  animation: floatDownSlow 15s ease-in-out infinite alternate, spinSlowReverse 25s linear infinite;
  opacity: 0.5;
}

.shape-3 {
  bottom: -5%;
  left: 15%;
  width: 15vw;
  animation: floatUpSlow 10s ease-in-out infinite alternate, spinSlow 20s linear infinite;
  opacity: 0.4;
}

.shape-4 {
  top: 15%;
  right: 25%;
  width: 10vw;
  animation: floatDownSlow 18s ease-in-out infinite alternate, spinSlowReverse 35s linear infinite;
  opacity: 0.3;
}

@keyframes floatUpSlow {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-30px) scale(1.05); }
}

@keyframes floatDownSlow {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(30px) scale(1.05); }
}

@keyframes spinSlow {
  0% { rotate: 0deg; }
  100% { rotate: 360deg; }
}

@keyframes spinSlowReverse {
  0% { rotate: 0deg; }
  100% { rotate: -360deg; }
}

/* Ensure the wrapper has relative positioning to contain absolute shapes */
.hero-about-wrapper {
  position: relative;
  z-index: 1;
}

.wrapper-cont-50._70 {
  position: relative;
  z-index: 2;
}