.topnav {
  overflow: hidden;
  background-color: #333;
  display: flex;
  justify-content: flex-start;
  align-items: center; /* Center align the items */
  position: fixed; /* Added this line */
  top: 0; /* Added this line */
  width: 100%; /* Added this line */
  z-index: 1000; /* Added this line to ensure it's above other content */
}

/* Links inside the navigation bar */
.topnav a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Style for the logo image */
.topnav img {
  width: 40px;
  height: auto;
  margin-left: 20px;
  margin-right: 10px;
}

/* Hide the links on small screens */
.topnav .icon {
  display: none;
}

/* Display the links when clicked on small screens */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {
    display: none;
  }

  .topnav a.icon {
    float: right;
    display: block;
    font-size: 20px; /* Adjusted size for close button */
    padding: 10px;
    color: white;
    text-decoration: none;
  }
}

/* When the menu is clicked, show the links */
@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: fixed; /* Changed to fixed for the responsive menu too */
    top: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    z-index: 9999;
    height: 100%;
    display: block;
    overflow-y: auto; /* Added to allow scrolling within the full-screen menu if content overflows */
  }

  .topnav.responsive a {
    display: block;
    text-align: left;
    padding: 12px 16px;
    background-color: #333;
    color: white;
    border-top: 1px solid #ddd;
  }

  .topnav.responsive a:hover {
    background-color: #ddd;
    color: black;
  }

  .topnav.responsive .icon {
    position: absolute;
    right: 10px; /* Adjust position of the close button */
    top: 10px;
    font-size: 20px; /* Smaller close button size */
    padding: 10px;
    cursor: pointer;
  }
}

/* Highlight active link */
.topnav a.active {
  background-color: #008cff; /* Highlight color */
  color: white;
}

@media screen and (orientation: landscape) {
  .topnav.responsive {
    /* You might want to re-evaluate this for landscape, as a full-screen menu might not be ideal. */
    /* If you want it to behave like the desktop version in landscape, you can set display: flex; */
    display: none; /* Keeping it as is based on your original code */
  }
}

@media screen and (orientation: portrait) {
  .topnav.responsive {
    display: block;
  }
}