.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;
}

/* CONCENTRIC RIPPLE RINGS ANIMATION (7 DENSE RINGS) */
.rings-container-about {
  position: absolute;
  top: -30vh;
  left: 50%;
  transform: translateX(-50%) translateZ(0);
  width: 140vw;
  height: 140vw;
  z-index: 9;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
  backface-visibility: hidden;
  will-change: transform;
}

.ring-about {
  position: absolute;
  border-radius: 50%;
  transform: scale(0) translateZ(0);
  opacity: 0;
  transform-origin: center center;
  will-change: transform, opacity;
  backface-visibility: hidden;
  filter: blur(10px);
}

/* 1. Green Ring */
.ring-green-about {
  width: 124vw;
  height: 124vw;
  background: radial-gradient(circle, transparent 52%, rgba(80, 200, 120, 0.03) 58%, rgba(85, 205, 125, 0.75) 66%, rgba(125, 220, 110, 0.03) 74%, transparent 80%);
}

/* 2. Teal Ring */
.ring-teal-about {
  width: 114vw;
  height: 114vw;
  background: radial-gradient(circle, transparent 51%, rgba(45, 195, 185, 0.03) 57%, rgba(40, 190, 180, 0.75) 65%, rgba(85, 215, 205, 0.03) 73%, transparent 79%);
}

/* 3. Blue Ring */
.ring-blue-about {
  width: 104vw;
  height: 104vw;
  background: radial-gradient(circle, transparent 50%, rgba(65, 170, 245, 0.03) 56%, rgba(60, 165, 245, 0.75) 64%, rgba(105, 190, 250, 0.03) 72%, transparent 78%);
}

/* 4. Indigo Ring */
.ring-indigo-about {
  width: 94vw;
  height: 94vw;
  background: radial-gradient(circle, transparent 49%, rgba(115, 135, 245, 0.03) 55%, rgba(110, 130, 240, 0.75) 63%, rgba(150, 165, 250, 0.03) 71%, transparent 77%);
}

/* 5. Purple Ring */
.ring-purple-about {
  width: 84vw;
  height: 84vw;
  background: radial-gradient(circle, transparent 48%, rgba(170, 115, 238, 0.03) 54%, rgba(165, 110, 240, 0.75) 62%, rgba(195, 140, 245, 0.03) 70%, transparent 76%);
}

/* 6. Magenta Ring */
.ring-magenta-about {
  width: 74vw;
  height: 74vw;
  background: radial-gradient(circle, transparent 47%, rgba(220, 110, 200, 0.03) 53%, rgba(215, 105, 195, 0.76) 61%, rgba(240, 140, 220, 0.03) 69%, transparent 75%);
}

/* 7. Pink Ring (LAST RING!) */
.ring-pink-about {
  width: 64vw;
  height: 64vw;
  background: radial-gradient(circle, transparent 46%, rgba(255, 120, 155, 0.03) 52%, rgba(255, 115, 150, 0.78) 60%, rgba(255, 150, 180, 0.03) 68%, transparent 74%);
}