.aerial-section {
  position: relative;
  height: auto; /* Keep auto to let content dictate height */
  min-height: 130vh; /* Increased from 100vh to make height bigger and help fill width */
  width: 100%; /* Full width */
  padding: 80px 6em;
  font-family: "Hanken Grotesk", sans-serif;
  display: flex;
  align-items: flex-start;
  color: white;
  overflow: hidden; /* Ensures overflowing image parts are hidden/cropped */
  /* New: Background image for customizable positioning */
  background-image: url('../images/aerial.jpg'); /* Replace with your actual image URL */
  background-size: cover; /* Scales to cover the container, cropping as needed */
  background-position: top center; /* Customizable: Change to 'top left', 'bottom center', '20% 80%', etc., to position the image */
  background-repeat: no-repeat; /* Prevents tiling */
}

.aerial-overlay {
  position: absolute;
  inset: 0;
  background: rgb(0 7 123 / 4%);
  z-index: 2;
  pointer-events: none;
}

.text-split-container {
  position: relative;
  display: flex;
  justify-content: space-between;
  max-width: 1300px;
  width: 100%;
  z-index: 3; /* Above overlay and image */
  align-items: flex-end;
  /* Initial state: Hidden for animation */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.text-split-container.animate {
  /* Triggered state: Fade in and slide up */
  opacity: 1;
  transform: translateY(0);
}

.left-text {
  max-width: 550px;
}

.intro-label {
  color: #51F36F;
  font-family: "Hanken Grotesk";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 27px; /* 207.692% */
  text-transform: uppercase;
  margin: 0 0 12px 0;
  /* Initial state: Hidden */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s;
}

.text-split-container.animate .intro-label {
  /* Triggered state: Slide up and fade in */
  opacity: 1;
  transform: translateY(0);
}

.left-text h2 {
  color: #FFF;
  font-family: "Hanken Grotesk";
  font-size: 29px;
  font-style: normal;
  font-weight: 100;
  line-height: 37px; /* 127.586% */
  text-transform: uppercase;
  margin: 0;
  letter-spacing: 0.04em;
  /* Initial state: Hidden */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease 0.4s, transform 0.8s ease 0.4s;
}

.text-split-container.animate .left-text h2 {
  /* Triggered state: Slide up and fade in */
  opacity: 1;
  transform: translateY(0);
}

.right-text {
  max-width: 500px;
  padding-right: 1rem;
}

.right-text p {
  color: #FFF;
  font-family: "Hanken Grotesk";
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 23px; /* 176.923% */
  margin: 0;
  letter-spacing: 0.01em;
  border-left: 1px solid #51F36F;
  padding: 0 80px 0 20px;
  /* Initial state: Hidden */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease 0.6s, transform 0.8s ease 0.6s;
}

.text-split-container.animate .right-text p {
  /* Triggered state: Slide up and fade in */
  opacity: 1;
  transform: translateY(0);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .aerial-section {
    height: auto; /* Keep auto for mobile flexibility */
    min-height: 110vh; /* Increased from 60vh for mobile to match bigger height */
    padding: 30px 40px; /* Reduce padding for smaller screens */
    align-items:flex-start; /* Center content vertically if needed */
  }

  .text-split-container {
    flex-direction: column; /* Stack left and right text vertically */
    justify-content: flex-start; /* Align to top */
    align-items: flex-start; /* Align text to left */
    gap: 30px; /* Space between stacked elements */
  }

  .left-text {
    max-width: 100%; /* Full width on mobile */
  }

  .left-text h2 {
    font-size: 24px; /* Smaller font size for mobile */
    line-height: 30px; /* Adjust line height */
  }

  .right-text {
    max-width: 100%; /* Full width on mobile */
    border-left: none; /* Remove border on mobile for cleaner look */
    padding: 0; /* Remove padding to avoid extra space */
  }

  .right-text p {
    font-size: 14px; /* Slightly larger for better readability */
    line-height: 25px; /* Adjust line height */
  }
  /* Disable animations on mobile */
  .text-split-container,
  .intro-label,
  .left-text h2,
  .right-text p {
    opacity: 1;
    transform: none;
    transition: none;
  }
}