#main-header {
  background-color: transparent;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 15;
  padding: 1rem 0;
  display: flex;
}
header nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* width: calc(100vw - 6rem); */
  width: 100%;
  height: 50px;
  padding: 0 1rem;
  margin: 0 1rem;
  position: relative;
}

.navMenu {
  display: contents; /* Changed this when it was decided to center the hamburger menu button; set to flex
    to allow it to have different positioning or set it to contents (and disable gap) 
    to allow the (hambgurger) menu to be centered between the logo and the donate button. */
  align-items: center;
  /* gap: 5rem; */
}

.navLogo {
  display: block;
  position: relative;
  padding-top: 3px;
  width: 42px;
  height: 21px;
}
.navLogo img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.3s ease;
}
/* Initially, only show the mobile white logo. Hide all others. */
.navLogo .mobile-logo.white-logo {
  opacity: 1;
}
.navLogo .mobile-logo.blue-logo,
.navLogo .desktop-logo {
  opacity: 0;
}

/* On scroll, fade from the mobile white to the mobile blue logo */
#main-header.scrolled .navLogo .mobile-logo.white-logo {
  opacity: 0;
}
#main-header.scrolled .navLogo .mobile-logo.blue-logo {
  opacity: 1;
}
.navButton {
  align-items: center;
  border-radius: 6.86px;
  background: var(--Neutral-Gray-100);
  color: var(--Neutral-Indigo-1000);
  text-transform: uppercase;
  border: 1px solid transparent;
  margin-right: 10px;
  padding: 0.48rem;
  font-family: "Barlow Condensed", sans-serif;
  font-size: var(--fs-body);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.22px;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
  text-decoration: none;
}
.navButton:hover {
  background: transparent;
  color: var(--Neutral-Gray-100);
  border: 1px solid var(--Neutral-Gray-100);
}

/* --- THE MENU BUTTON AND ICON --- */

.menu-toggle-button {
  border-style: solid;
  border-width: 2px;
  border-color: transparent;
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  width: 25px;
  height: 21px;
  position: relative;
  z-index: 20;
  transition: border-color 0.3s ease;
}

.menu-icon,
.menu-icon::before,
.menu-icon::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 3px;
  background: var(--Neutral-Gray-100);
  border-radius: 2px;
  transition: background 0.3s ease;
}

.menu-icon {
  top: 50%;
  transform: translateY(-50%);
}

.menu-icon::before {
  top: -8px;
}

.menu-icon::after {
  bottom: -8px;
}

.menu-toggle-button.is-active {
  border-color: var(--Neutral-Gray-100);
}

.menu-toggle-button.is-active .menu-icon {
  transform: translateY(-50%) rotate(45deg);
}
.menu-toggle-button.is-active .menu-icon::before {
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
}
.menu-toggle-button.is-active .menu-icon::after {
  bottom: 50%;
  opacity: 0;
  transform: translateY(-50%) scaleX(0);
}

/* --- MODIFIED CSS FOR THE MENU LIST --- */

/* Hide the menu by default */
.navMenu-list {
  display: none;
  flex-direction: column;
  position: absolute;
  /* padding: 20px; */
  box-sizing: border-box;
  width: 100%;
  left: 0;
  height: 279px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  gap: 40px;
  border-radius: 0 0 5px 5px;
  background-color: rgba(25, 33, 71, 0.35);
  backdrop-filter: blur(0.3rem);
  border: 1px solid transparent;
  border-image: linear-gradient(
      to bottom,
      var(--Neutral-Gray-100),
      var(--Neutral-Gray-300)
    )
    1;
  z-index: 15;
  top: 60px;
  /* transition: all 0.3s ease; */
  /* removing the transition: all -.3s ease; from above seems to fix the but where the 
  menu flashes a slight white background when the user scrolls back to the top of the page */
  /* margin-top: 1.4rem; */
}
.navMenu-list ul {
  list-style: none;
  padding: 0; /* Also a good idea to remove default padding */
  margin: 0; /* And margin */
}
#main-header.menu-open {
  background-color: rgba(251, 251, 251, 0.3);
  backdrop-filter: blur(0.3rem);
}
.navMenu-list.is-open {
  display: flex;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
}
/* #main-header.scrolled {
  background-color: var(--Neutral-Gray-100);
} */
#main-header.scrolled .navMenu-list.is-open {
  border: none;
  border-radius: 0 0 5px 5px;
  background: var(--Neutral-Gray-100);
}

/* Styling for list items */
.navMenu-list li {
  padding: 1.5rem;
  cursor: pointer;
  width: fit-content;
  text-align: center;
}
.navMenu-list li a {
  font-family: var(--font-primary), sans-serif;
  font-size: var(--fs-body);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 2px;
  text-decoration: none;
  color: var(--Neutral-Gray-100);
  position: relative;
  padding-bottom: 0.25rem;
  transition: all 0.3s ease;
}
.navMenu-list li a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 4px;
  background-color: currentColor;
  transition: width 0.3s ease-in-out;
}
.navMenu-list li a:hover::after {
  width: 100%;
}
.navMenu-list li a:hover {
  font-weight: 700;
}
/* --- Styles for the Header in the Scrolled State --- */
#main-header.scrolled nav {
  background-color: var(--Neutral-Gray-100);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  border-radius: 5px 5px 0 0;
}
#main-header.no-shadow {
  box-shadow: none;
}
#main-header.scrolled .navButton {
  background-color: var(--Neutral-Indigo-1000);
  color: var(--Neutral-Gray-100);
}
#main-header.scrolled .navButton:hover {
  background-color: var(--Neutral-Indigo-100);
  color: var(--Neutral-Indigo-1000);
  border-color: var(--Neutral-Indigo-1000);
}
#main-header.scrolled .navMenu-list {
  background: rgba(251, 251, 251, 0.55);
  border: 1px solid var(--Navy-Blue-800);
  border-image: none;
}

#main-header.scrolled .navMenu-list li a {
  color: var(--Navy-Blue-800);
}

#main-header.scrolled .menu-icon,
#main-header.scrolled .menu-icon::before,
#main-header.scrolled .menu-icon::after {
  background: var(--Navy-Blue-800);
}

#main-header.scrolled .menu-toggle-button {
  border-color: transparent;
}

#main-header.scrolled .menu-toggle-button.is-active {
  border-color: var(--Navy-Blue-800);
}

/* Media Queries */
@media screen and (min-width: 576px) {
  .navMenu-list {
    padding: 0;
  }
}
@media screen and (min-width: 768px) {
  header nav {
    height: 75px;
  }
  .navLogo {
    width: 240px;
    height: 34px;
  }
  /* Hide the mobile logos and show the desktop white logo */
  .navLogo {
    width: 240px;
    height: 34px;
  }

  /* Hide all mobile logos on desktop */
  .navLogo .mobile-logo {
    display: none;
  }

  /* Initially show the desktop white logo and hide the desktop blue logo */
  .navLogo .desktop-logo.white-logo {
    opacity: 1;
  }
  .navLogo .desktop-logo.blue-logo {
    opacity: 0;
  }

  /* On scroll, fade from the desktop white to the desktop blue logo */
  #main-header.scrolled .navLogo .desktop-logo.white-logo {
    opacity: 0;
  }
  #main-header.scrolled .navLogo .desktop-logo.blue-logo {
    opacity: 1;
  }
  /* header nav {
    width: 95%;
  } */
  .navLogo {
    padding: 0;
  }
  #main-header .navMenu-list.is-open ul {
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(2, auto);
    gap: 1.5rem;
  }
  #main-header.scrolled .navMenu-list.is-open {
    /* min-width: 768px; */
    max-height: 135px;
    border: none;
  }
  .navMenu-list {
    /* min-width: 764px; */
    max-height: 135px;
  }
  .navMenu-list li {
    text-align: left;
    padding: 0;
  }
}

@media screen and (min-width: 1200px) {
  header nav {
    height: 84px;
  }
  .navLogo {
    width: 298px;
    height: 41px;
    flex-shrink: 0;
  }
  .menu-toggle-button {
    display: none;
  }
  /* header nav {
    align-items: center;
  } */
  .navMenu-list {
    display: flex !important; /* Force the menu to always be visible */
    flex-direction: row; /* Align the list items horizontally */
    align-items: center;
    position: static; /* The key change: remove absolute positioning */
    height: auto;
    width: fit-content;
    transform: none;
    margin-left: 3rem;
    margin: 0;
    background-color: transparent; /* Remove the background to match the header */
    backdrop-filter: none; /* Remove the blur effect */
    border: none;
    box-shadow: none;
    top: auto;
    left: auto;
  }
  /* .navMenu-list li a {
    font-size: 1rem;
  } */
  .navMenu {
    display: contents; /* Changed this when it was decided to center the hamburger menu button; set to flex
    to allow it to have different positioning or set it to contents (and disable justifyt-content and gap) to allow the (hambgurger) menu to be
    centered between the logo and the donate button. */
    flex-grow: 1;
    /* justify-content: flex-start;
    gap: 2rem; */
  }
  /* Adjust the navMenu-list ul for the desktop layout */
  .navMenu-list ul {
    display: flex;
    flex-direction: row;
    gap: var(--space-50);
  }

  .navButton {
    padding: 0.75rem;
  }
}
.navMenu-list li {
  width: fit-content;
  text-align: left;
}
#main-header.scrolled nav {
  border-radius: 5px;
}
#main-header.scrolled .navMenu-list {
  border: none;
}
/* .carousel-counter {
  font-size: 40px;
} */
@media screen and (min-width: 1400px) {
  .navLogo {
    width: 302px;
    height: 44px;
  }
  /* .navMenu-list {
    margin-left: 8rem;
  } */
}
/* @media screen and (min-width: 1621px) {
  .navMenu-list li a {
    font-size: 0.8rem;
  }
} */
@media screen and (min-width: 1920px) {
  .navLogo {
    width: 305px;
    height: 44px;
  }
  /* .navMenu-list {
    padding-left: 12rem;
  } */
  /* .navMenu-list li {
    width: 150px;
  } */
  .navMenu-list li a {
    font-size: 1.65rem;
  }
  .navMenu-list ul {
    gap: 9rem;
  }
}