/* Vision Section Styling */
.vision-section {
  width: 80%; /* Adjust width as needed */
  display: flex; /* Use flexbox for layout */
  align-items: center; /* Center items vertically */
  justify-content: space-between; /* Space items evenly */
  padding: 20px; /* Add padding around the section */
  margin: 50px auto; /* Center the section horizontally with margin */
  gap: 50px; /* Space between the two sections */
}

.text-details {
  width: 45%;
}

.picture-details {
  width: 50%;
  position: relative;
}

.blob-wrapper {
  position: relative;
  width: 550px; /* Increased size for larger blob */
  height: 450px; /* Increased size for larger blob */
  overflow: hidden;
  margin-left: 25px; /* Shift the blob-wrapper to the right */
}

.blob {
  width: 100%; /* Set to 100% of the wrapper */
  height: 100%; /* Set to 100% of the wrapper */
  background-size: cover; /* Ensure the image covers the blob */
  background-position: center; /* Center the image */
  box-shadow: 0 5px 5px 5px rgba(13, 110, 253, 0.2);
  border-radius: 50%; /* Round the edges */
  animation: blob-animation 5s ease-in-out infinite; /* Animation for the blob */
  transition: all 1s ease-in-out;
}

.responsive-image-container {
  display: none; /* Hidden by default */
}

.responsive-image {
  width: 100%; /* Make image fill the container */
  height: auto; /* Maintain aspect ratio */
  border-radius: 50px;
}

/* 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 */
}

/* Responsive adjustments: When the screen size is below 1200px */
@media (max-width: 1200px) {
  .vision-section {
    flex-direction: column; /* Stack elements vertically */
    gap: 30px; /* Add gap between items when stacked */
  }

  .blob-wrapper {
    display: none; /* Hide the blob shape */
  }

  .responsive-image-container {
    display: block; /* Show the image container */
  }

  .text-details {
    width: 100%; /* Make text container full width */
    text-align: center; /* Center text on smaller screens */
  }

  .picture-details {
    width: 100%; /* Make picture container full width */
    margin-bottom: 30px; /* Add margin to the bottom of images */
  }
}

@keyframes blob-animation {
  0%,
  100% {
    border-radius: 50%; /* Start and end with a circular blob */
  }
  50% {
    border-radius: 40% 60% 50% 50% / 50% 30% 70% 50%; /* Animate to a more organic shape */
  }
}