<script> 
    document.addEventListener("scroll", () => {
  const section1 = document.querySelector(".topbar");
  const section2 = document.querySelector(".mainheader");

  // Check the scroll position
  if (window.scrollY === 0) {
    // Fully scrolled to the top
    section1.classList.remove("scrolled");
    section2.classList.remove("scrolled");
  } else {
    // Handle Section 1
    const rect1 = section1.getBoundingClientRect();
    if (rect1.top <= 0) {
      section1.classList.add("scrolled");
    } else {
      section1.classList.remove("scrolled");
    }

    // Handle Section 2
    const rect2 = section2.getBoundingClientRect();
    if (rect2.top <= 36) {
      section2.classList.add("scrolled");
    } else {
      section2.classList.remove("scrolled");
    }
  }
});
</script>

.scrolled {
  background-color: #ffffff;
}

.topbar {
  border-bottom-color: rgb(255 255 255 / 35%);
}

.mainheader.scrolled a {
  color: #66686a;
}

.mainheader.scrolled .bricks-mobile-menu-toggle span {
    background-color: #66686a;
}

.mainheader.scrolled button {
  color: #66686a !important;
}

.topbar.scrolled {
  border-bottom-color: #e3e3e3;
}

.topbar.scrolled a {
  color: #66686a !important;
}

.topbar.scrolled button {
  color: #66686a !important;
}