.section-animation-components {
  /* height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f4f4f4; */
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* Base object styling */
.object-001 {
  background-image: url(../images/bagrounds/about_bg.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 100%;
}
.object-002 {
  background-image: url(../images/bagrounds/dot-square.png);
  background-size: 12%;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 100%;
}
.object-002.position-left-middle {
  position: absolute;
  left: -10%;
  top: 50%;
}
/* Animation for object 1 (Bounce) */
.animation-1-bounce-bg-color {
  animation: bounce 10s ease-in-out infinite;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-100px);
  }
}

/* rotation animation */
.animation-2-rotation-bg-color {
  animation: rotate 10s ease-in-out infinite;
}
.object2-rotation-square-dots {
  animation: rotate 10s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Animation for object 3 (Fade in and out) */
.object3 {
  animation: fadeInOut 3s ease-in-out infinite;
}

@keyframes fadeInOut {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

/* Animation for object 4 (Slide left to right) */
.object4 {
  animation: slide 5s ease-in-out infinite;
}

@keyframes slide {
  0% {
    transform: translateX(-200px);
  }
  100% {
    transform: translateX(200px);
  }
}

/* Animation for object 5 (Pulse) */
.object5 {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
}