/* Navbar toggler button */
.navbar-toggler {
  position: relative;
  display: inline-flex; /* Use flex to align the icon properly */
  justify-content: center; /* Ensure the content is centered */
  align-items: center; /* Vertically align the icon */
  width: 40px; /* Set a fixed width for the button */
  height: 40px; /* Set a fixed height for the button */
  background-color: transparent;
  border: none;
  z-index: 9999; /* Keep the button above other elements */
  padding: 0; /* Remove extra padding */
}

/* Hamburger icon (the three lines) */
.navbar-toggler-icon {
  position: relative;
  width: 30px; /* Set the width of the hamburger icon */
  height: 3px; /* Set the height of the hamburger icon */
  background-color: #ffffff; /* Set color of the hamburger lines */
  display: block;
  transition: background-color 0.3s ease;
  margin: 0; /* Ensure the lines don't have margin */
}

/* Before and After pseudo-elements for the hamburger lines */
.navbar-toggler-icon:before,
.navbar-toggler-icon:after {
  content: '';
  position: absolute;
  background-color: #ffffff; /* Set color of the hamburger lines */
  width: 30px;
  height: 3px;
  transition: background-color 0.3s ease;
}

/* Position the top and bottom lines correctly */
.navbar-toggler-icon:before {
  top: -8px;
}

.navbar-toggler-icon:after {
  top: 8px;
}

/* Adjust navbar items when the menu is toggled on smaller screens */
@media (max-width: 992px) {
  /* Align the hamburger icon to the right side */
  .navbar-toggler {
    margin-left: auto; /* Align hamburger icon to the right */
    margin-right: 30px; /* Optional: Adds a small gap from the right edge */
    margin-top: 30px; /* Adjust top spacing */
  }
  
  /* Move the navbar items to the right */
  .navbar-collapse {
    justify-content: flex-end; /* Align navbar items to the right */
    width: 100%; /* Ensure it takes the full width */
    margin-top: 10px; /* Optional: Adjust space above navbar items */
  }

  /* Ensure the navbar items (text) appear on the right under the hamburger icon */
  .navbar-nav {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: flex-end; /* Align items to the right */
    width: 100%; /* Ensure navbar items span the full width */
  }
  
  /* Adjust navbar link spacing */
  .nav-item {
    margin: 10px 0; /* Adjust vertical spacing between items */
  }
}