/* Base styles for the vision container to allow absolute positioning of textboxes */
.vision-container {
  position: relative;
  width: 100%;
  height: 100%; /* Ensure it takes full height of its parent */
  display: flex; /* Use flex to center content, though textboxes are absolute */
  justify-content: center;
  align-items: center;
}

/* Styles for both vision and mission textboxes */
.vision-textbox,
.mission-textbox {
  position: absolute; /* Essential for overlapping */
  width: 250px; /* Adjust width as needed for better overlap on desktop */
  background-color: rgba(0, 0, 0, 0.80); /* Slightly less transparent black background */
  color: white;
  padding: 1.5rem;
  border-radius: 0.75rem; /* rounded-xl */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  z-index: 20; /* High z-index to ensure it overlaps the image */
  opacity: 1; /* Always visible */
  pointer-events: auto; /* Always interactive */
}

/* Specific positioning for VISION textbox on desktop */
@media (min-width: 1024px) {
  .vision-textbox {
    top: 50%;
    left: 50%;
    transform: translate(-110%, -80%); /* Move left from center */
  }

  /* Specific positioning for MISSION textbox on desktop */
  .mission-textbox {
    top: 50%;
    left: 50%;
    transform: translate(10%, -50%); /* Move right from center */
  }
}

/* Ensure the image is positioned below the absolute textboxes */
.vision-container img {
  position: relative; /* Give it a positioning context */
  z-index: 5; /* Lower z-index than the textboxes */
}

/* Media query for mobile view (stack textboxes vertically) */
@media (max-width: 1023px) {
  .vision-textbox,
  .mission-textbox {
    width: 90%; /* Take up more width on smaller mobile screens */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Adjust for precise centering */
  }

  /* Position VISION textbox above MISSION on mobile */
  .vision-textbox {
    top: 20%; /* Adjust vertical position for VISION */
  }

  /* Position MISSION textbox below VISION on mobile */
  .mission-textbox {
    top: 60%; /* Adjust vertical position for MISSION */
  }
}