header {
  width: 100%; /* Full width of the page */
  background-color: #f0f0f0; /* Optional background color */
}

.heading {
  display: flex; /* Use flexbox for layout */
  align-items: center; /* Vertically center align items */
  justify-content: space-between; /* Space between image and text */
  padding: 20px; /* Space around the content */
}

.image_small {
  vertical-align: top;
  width: 100px;
  height: auto;
}

.image_medium {
  vertical-align: top;
  width: 450px;
  height: auto;
  margin: 10px;
}

.headingLogo {
  max-width: 20%; /* Image will take up no more than 20% of the header's width */
  height: auto; /* Maintain aspect ratio */
  margin-right: 20px; /* Space between image and text */
}

.headingText {
  font-size: 1.2em; /* Adjust text size */
  flex-grow: 1; /* Allow text to take up remaining space */
  margin: 0; /* Remove default margin from h1 */
  white-space: nowrap; /* Prevent text from wrapping */
  overflow: hidden; /* Hide overflow text */
  text-overflow: ellipsis; /* Show ellipsis if text overflows */
  background-color: rgb(0,51,102);
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
  color: white;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .heading {
      flex-direction: column; /* Stack items vertically on smaller screens */
  }
  .headingLogo {
      max-width: 100%; /* Image can take full width on small screens */
      margin: 0 0 10px 0; /* Space below the image */
  }
  .headingText {
      font-size: 1em; /* Reduce font size for better fit */
  }
}