/* Navbar background color */
.navbar {
  background-color: #f8f9fa; /* Light background color */
  padding: 0.5rem 1rem; /* Adds some padding around the navbar */
}

/* Logo image styling */
.navbar-brand img {
  width: 40px; /* Adjust size as needed */
  height: auto;
}

/* Right-aligned navigation links */
.navbar-nav {
  padding-right: 30px; /* Adds space on the right side of the navbar */
}

/* Styling for the nav links */
.navbar-nav .nav-link {
  color: #333; /* Darker text color */
  font-weight: 500;
  margin-right: 75px; /* Space between links */
  padding: 8px 16px; /* Adds padding to the link for better spacing */
  transition: color 0.3s;
}

/* Hover effect for the nav links */
.navbar-nav .nav-link:hover {
  color: #FF7235; /* Change color on hover */
}

/* Styling for dropdown items */
.dropdown:hover {
  color: #FF7235; /* Orange background on hover */ /* Change text color to white for better contrast */
}

/* Optional: Add a smooth transition effect */
.dropdown {
  transition: background-color 0.3s, color 0.3s; /* Smooth transition */
}

/* Mobile toggle button */
.navbar-toggler {
  border-color: transparent; /* Hide the border for a cleaner look */
  background-color: transparent; /* Transparent background */
}

.navbar-toggler-icon::before {
  top: 0;
}

.navbar-toggler-icon div {
  top: 50%;
  transform: translateY(-50%);
}

.navbar-toggler-icon::after {
  bottom: 0;
}

/* Fix for collapsed navbar - makes the toggle visible and aligned properly */
.navbar-collapse {
  justify-content: flex-end; /* Ensure that links are aligned to the right */
}

/* Make sure links don't overlap with the toggle in mobile view */
.navbar-nav {
  margin-left: auto;
}

/* Responsiveness */
@media (max-width: 991px) { /* This breakpoint is for large tablets and below */
  .navbar-nav {
    text-align: auto; /* Center-align links on smaller screens */
    width: 100%; /* Ensure links take up full width */
  }

  .navbar-nav .nav-link {
    margin: 10px 0; /* Adds vertical space between links */
    padding: 0; /* Remove extra padding */
  }

  /* Adjust hamburger menu for smaller screens */
  .navbar-toggler-icon {
    width: 35px; /* Increase size on smaller screens */
    height: 30px;
  }
}

@media (max-width: 575px) { /* For extra small screens (phones in portrait mode) */
  .navbar-nav .nav-link {
    font-size: 1.1rem; /* Slightly larger text for mobile */
    padding: 10px; /* Increase padding for better touch targets */
  }
}