.banner {
  position: fixed;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: rgb(255, 255, 255);
  padding: 20px;
  width: 100%;
  gap: 50px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Add shadow for effect */
}

/* Banner image */
.banner-img {
  height: 50px; /* Adjust as needed */
  margin-right: 10px;
  cursor: pointer;
}

/* Banner text */
.banner-text {
  font-size: 18px;
  cursor: pointer;
  align-self: flex-end;
  margin-left: 0.5rem; /* Adjust as needed */
  margin-right: 1.0rem; /* Adjust as needed */
}

/* Gray background for the rest of the page */
.content {
  background-color: #f0f0f0;
  height: calc(100vh - 4px);
  padding-top: 180px;
}

@media (max-width: 576px) {
  .banner-text {
    margin: 0 0.15rem !important; /* remove excessive side margins */
    padding: 0.15rem 0.2rem !important;
    font-size: 0.75rem; /* optional: shrink text a bit */
  }

  .banner-img {
    max-width: 90px;
  }
}