/* Reset Bootstrap's global styles for the body and masthead */
body, html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow-x: hidden; /* Prevent horizontal scrolling from flexbox alignment issues */
}

/* Masthead section styling */
.masthead {
  display: flex; /* Flexbox for centering */
  align-items: center; /* Center vertically */
  justify-content: center; /* Center horizontally */
  background-color: #000000; /* Black background */
  height: 100vh; /* Full viewport height */
  margin: 0; /* Remove any Bootstrap margin/padding */
}

/* Ensure the flex container is full width and height */
.masthead > div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; /* Take the full width of the viewport */
}

/* Image responsiveness */
.masthead img {
  max-width: 90%; /* Prevent image from exceeding viewport width */
  height: auto; /* Maintain aspect ratio */
  border: none; /* Remove Bootstrap image border */
  margin: 0 auto; /* Explicitly center the image */
  padding: 0; /* Remove any padding */
}

/* Media query for tablets in portrait mode */
@media (max-width: 1024px) and (orientation: portrait) {
  .masthead img {
    max-width: 70%; /* Scale image down further for smaller screens */
  }
}