/* Header Styles */
header {
  background: var(--themeGrey);
  color: #fff;
  padding: 10px 0;
  border-bottom: var(--themeBlue) 3px solid;
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100vw;
}

#branding {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

header nav {
  display: flex;
  justify-content: center;
  width: 100%;
}

header ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

header li {
  margin-left: 20px;
}

header a {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
  transition: color 0.3s ease, font-size 0.3s ease;
}

header .highlight,
header .current a {
  color: var(--themeBlue);
  font-weight: bold;
}

header a:hover {
  color: var(--themeYellow);
  font-weight: bold;
}

.gas-safe-logo1 {
  width: auto; /* Maintain aspect ratio */
  height: 65px; /* Adjust height as needed */
}

#main-logo {
  margin-left: 120px; 
  height: 65px; /* Maintain initial size */
  
}

/* Responsive Styles */
@media (max-width: 1024px) {
  .gas-safe-logo1 {
    height: 50px; /* Adjust height for medium screens */
  }

  #main-logo {
    margin-left: 80px; /* Adjust margin for medium screens */
    height: 50px; /* Adjust height for medium screens */
  }

  header a {
    font-size: 14px; /* Adjust font size for medium screens */
  }

  header li {
    margin-left: 15px; /* Adjust margin for medium screens */
  }
}

@media (max-width: 768px) {
  .gas-safe-logo1 {
    height: 40px; /* Adjust height for smaller screens */
  }

  #main-logo {
    margin-left: 40px; /* Adjust margin for smaller screens */
    height: 40px; /* Adjust height for smaller screens */
  }

  header a {
    font-size: 12px; /* Adjust font size for smaller screens */
  }

  header li {
    margin-left: 10px; /* Adjust margin for smaller screens */
  }
}

@media (max-width: 480px) {
  .gas-safe-logo1 {
    height: 30px; /* Adjust height for extra small screens */
  }

  #main-logo {
    margin-left: 20px; /* Adjust margin for extra small screens */
    height: 30px; /* Adjust height for extra small screens */
  }
  
  .nav-gas-safe-logo {
    display: none; /* Hide Gas Safe logo for extra small screens */
  }

  header a {
    font-size: 10px; /* Adjust font size for extra small screens */
  }

  header li {
    margin-left: 5px; /* Adjust margin for extra small screens */
  }
}