/* Vision Section Styling */
.vision-section {
  width: 80vw;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  margin: 50px auto;
  gap: 50px;
}

.text-details {
  width: 45%;
}

.picture-details {
  width: 50%;
  position: relative;
}

.blob-wrapper {
  position: relative;
  width: 300px; /* Adjust to control the size of the blob */
  height: 300px; /* Adjust to control the size of the blob */
  overflow: hidden;
}

.blob-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the image fills the container while preserving aspect ratio */
  clip-path: path(
    "M40.4,-63.6C52.3,-58.5,59.3,-43.1,64.4,-27.8C69.6,-12.5,72.9,3.8,69.1,18.1C65.3,32.4,54.3,44.6,40.4,51.1C26.4,57.6,9.5,58.4,-6.1,61.5C-21.7,64.6,-43.3,69.9,-53,63.1C-62.7,56.4,-60.5,37.6,-58.4,22.3C-56.2,7,-54,0.1,-52.3,-12.3C-50.6,-24.8,-49.4,-42.9,-39.5,-53.9C-29.6,-64.9,-10.9,-68.9,5.4,-72.1C21.8,-75.3,43.5,-77.8,40.4,-63.6Z"
  ); /* Use the same path as SVG to clip image */
}

.blob-shape {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none; /* This ensures that the SVG doesn’t block interaction with other elements */
}

.blob {
  width: 600px;
  height: 450px;
  background-size: cover;
  -webkit-background-position: center;
  background-position: center center;
  margin: 20px;
  box-shadow: 0 5px 5px 5px rgba(13, 110, 253, 0.2);
  animation: blob-animation 5s ease-in-out infinite;
  transition: all 1s ease-in-out;
}

@keyframes blob-animation {
  0%,
  100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  50% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }
}

/* Animation for text in vision section */
.vision-animate {
  opacity: 0;
  transform: translateY(-50px); /* Starts slightly above */
  transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

/* When the element is in view */
.vision-animate.visible {
  opacity: 1;
  transform: translateY(0); /* Moves to original position */
}
