/* Reset body and html */
body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

/* Map container as a header or footer */
.mapcontainer {
  width: 100%;
  height: 400px; /* Fixed height for header/footer look */
  position: sticky; /* Sticky map for header/footer effect */
  top: 0; /* Adjust for header, set to 'bottom: 0;' for footer */
  z-index: 1; /* Ensure it's on top of other content */
}

/* Map element styling */
#map {
  width: 100%;
  height: 100%;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .mapcontainer {
    height: 200px; /* Reduced height for mobile */
  }
}