/* Make the header sticky at the top */
header {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1000; /* Keeps it above other elements */
    background-color: #EDF8E3;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: adds a subtle shadow */
}

/* Optional: smooth transition when scrolling */
header {
  transition: box-shadow 0.3s ease;
}


/* Optional: change shadow when scrolled */
body.scrolled header {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}