/* CSS for the logo at the top of the navigation, this is invisible when the page loads, then on scroll the logo will show on the navigation. */

.header-container {
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-logo {
    height: 40px; /* Adjust based on your logo height requirements */
    width: auto;
    display: block;
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none; 
}

@media screen and (max-width: 1300px) {
  .site-logo {
    display: none;
  }
}