/* page menu */
 
/* Navigation bar */
.nav-page-self {
  color: white; /* Text color */
  padding: 0px 20px 30px; /* Padding around the navigation bar */
  position: sticky; /* Keep the navigation bar sticky on top */
  top: 0; /* Stick to the top of the viewport */
  width: 100%; /* Full width */
  z-index: 1000; /* Ensure the nav stays on top */
}
 
/* List styling */
.nav-page-self-list {
  list-style: none; /* Remove default list styling */
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margin */
  display: flex; /* Flexbox to arrange items horizontally */
  flex-wrap: wrap; /* Allow wrapping of items */
  justify-content: space-between; /* Evenly distribute items */
}
 
.nav-page-self-item {
  margin: 10px 5px; /* Add spacing between the items */
  width: calc(33.333% - 10px); /* Make each item take 1/3 of the width (3 per row) */
  display: flex;
  align-items: center; /* Center vertically */
  justify-content: center; /* Center horizontally */
}
 
.nav-page-self-link {
  color: white; /* Text color for the links */
  text-decoration: none; /* Remove underline */
  font-size: 18px; /* Font size for the links */
  padding: 10px 12px; /* Padding to give it a button-like appearance */
  background-color: #aa0f09;
  border: 1px solid #aa0f09; /*red background for the button */
  border-radius: 5px; /* Rounded corners for the button */
  transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition on hover */
  display: inline-block; /* Make sure the link behaves like a block element */
  text-align: center; /* Center the text inside the button */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
  width: 80%;
}
 
/* Button hover effect */
.nav-page-self-link:hover {
  background-color: #aa0f09; /* Red background on hover */
  color: white; /* Keep text color white on hover */
}

.stickey-menu nav.nav-page-self {
  z-index: 0;
}
/* Mobile-first responsive styling: Stack the navigation items vertically on smaller screens */
@media (max-width: 767px) {
  .nav-page-self-list {
    flex-direction: column; /* Stack vertically */
    align-items: center; /* Center the items horizontally */
  }
 
  .nav-page-self-item {
    width: 100%; /* Make each item take 100% of the width on mobile */
    margin-bottom: 10px; /* Space between the stacked items */
  }
 
  .nav-page-self-item:last-child {
    margin-bottom: 0; /* Remove bottom margin for the last item */
  }
}
 
/* Tablet and above (768px and above) */
@media (min-width: 768px) {
  .nav-page-self-list {
    flex-wrap: wrap; /* Allow wrapping of items */
    justify-content: space-between; /* Evenly distribute items */
  }
 
  .nav-page-self-item {
    width: calc(33.333% - 10px); /* 3 items per row for tablet/desktop */
  }
}