/* Navbar Brand Logo Styling */
.navbar-brand img {
    max-width: 180px; /* Adjust width as necessary */
    height: auto; /* Maintain aspect ratio */
}
/* Navbar Menu Items Styling */
.navbar-nav .nav-link {
    color: #555; /* Dark grey for better contrast */
    font-weight: bold; /* Make it bold */
    margin: 0 10px; /* Add horizontal spacing */
    padding: 10px 15px; /* Increase clickable area */
    font-size: 1.1em; /* Increase font size */
    text-transform: uppercase; /* Make text uppercase for traditional navigation look */
    transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, text-decoration 0.3s ease-in-out; /* Smooth transition for hover effects */
}

/* Hover Effect */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-item.active .nav-link {
    color: #007bff; /* Highlight color on hover and for the active page */
    background-color: rgba(0, 123, 255, 0.1); /* Slight background on hover */
}

/* Navbar alignment and spacing */
.navbar {
    padding: 10px 0; /* Add some vertical padding to navbar */
}

/* Responsive Alignment */
@media (min-width: 992px) { /* Adjusting for the default Bootstrap large device breakpoint */
    .navbar-collapse {
        justify-content: flex-end; /* Align menu items to the right */
    }
}