.navbar {
  background-color: white;
}
.navbar-item img {
  max-height: none;
  max-width: none;
  height: 130px; /* Ensure the navbar logo remains consistent */
  width: auto;
}
.navbar-item:hover,
.navbar-item:focus {
  background-color: white !important;
}
.lightbox-image {
  max-width: 300px;
  max-height: 150px;
  height: auto;
  width: auto;
  margin: 5px 0 0 10px;
  border: 0px;
}
.modal img {
  max-height: 80vh;
  max-width: 80vw;
}

/* Media Queries for Mobile and Tablet Screens */

/* For Mobile Devices (Up to 540px width) */
@media screen and (max-width: 540px) {
  .navbar {
    flex-wrap: wrap;
  }
  .navbar-item img {
    height: 100px; /* Scale down logo for smaller screens */
    width: auto;
  }
  .columns {
    display: block; /* Stack columns vertically */
  }
  .lightbox-image {
    max-width: 90%; /* Ensure images scale appropriately */
    height: auto;
  }
  .modal img {
    max-height: 60vh; /* Fit modal images within viewport */
    max-width: 90vw;
  }
}

/* For Tablets (Between 540px and 780px width) */
@media screen and (min-width: 540px) and (max-width: 780px) {
  .navbar-item img {
    height: 110px; /* Slightly larger logo for tablets */
    width: auto;
  }
  .columns {
    display: flex;
    flex-wrap: wrap;
  }
  .lightbox-image {
    max-width: 80%; /* Adapt image size for larger screens */
    height: auto;
  }
  .modal img {
    max-height: 70vh;
    max-width: 85vw;
  }
}

/* For Larger Screens (Above 780px width) */
@media screen and (min-width: 780px) {
  .navbar-item img {
    height: 130px; /* Full logo size for desktops */
    width: auto;
  }
  .columns {
    display: flex; /* Default side-by-side layout */
  }
}