/* Flexbox layout to align the image and text */
.firsthalf .featurette {
    display: flex;
    align-items: flex-start; /* Align the text and image at the top */
    flex-wrap: nowrap;
  }
  
  /* Text column should handle overflow but not shrink */
  .col-md-7 {
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Hide the overflowing text initially */
  }
  
  /* Ensure the image doesn't resize */
  .col-md-5 {
    flex-shrink: 0;
    max-width: 500px; /* Keep the image fixed size */
  }
  
  /* The image will cover the full space of the container */
  .featurette-image {
    object-fit: cover;
    width: 100%;
    height: 100%; /* Fixed aspect ratio, will not change with text overflow */
  }
  
  /* The overflow content goes to the secondhalf */
  .secondhalf {
    display: none; /* Initially hidden, will only show if overflow occurs */
    margin-top: 20px;
    padding-top: 20px;
  }
  
  .secondhalf p {
    font-size: 1.2em;
  }