/* General Navbar Styling */
.navbar {
    background-color: #ffffff; /* Clean white background */
    padding: 1rem 0; /* Increase padding for spacing */
    border-bottom: 1px solid #e0e0e0; /* Light gray bottom border for subtle separation */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Add a subtle shadow for better visibility */
    position: sticky; /* Make navbar fixed at the top */
    top: 0; /* Stick to the top */
    z-index: 1030; /* Ensure it is above other content */
}

/* Navbar Brand */
.navbar-brand {
    font-size: 1.8rem; /* Large, readable brand size */
    color: #000000; /* Clear black text for the brand */
    font-weight: bold; /* Make it stand out */
    text-transform: none; /* Normal text, not uppercase */
    white-space: nowrap; /* Prevent the brand from wrapping */
}

.navbar-brand:hover {
    color: #007bff; /* Optional: Blue hover effect */
    text-decoration: none; /* Remove underline on hover */
}

/* Navbar Links */
.navbar-nav .nav-item .nav-link {
    font-size: 1.2rem; /* Readable size */
    color: #000000; /* Black for better contrast */
    padding: 0.5rem 1rem; /* Spacing for easier interaction */
    text-transform: none; /* Keep normal text */
    transition: color 0.3s ease-in-out; /* Smooth color transition */
    white-space: nowrap; /* Prevent text wrapping */
}

.navbar-nav .nav-item .nav-link:hover {
    color: #007bff; /* Blue hover effect */
    text-decoration: underline; /* Optional: Add underline on hover */
}

/* Centering and Spacing */
.navbar-nav {
    justify-content: center; /* Center navigation items */
    gap: 1rem; /* Add space between items */
}

/* Adjust Navbar for Larger Screens */
@media (min-width: 992px) {
    .navbar-nav .nav-item .nav-link {
        font-size: 1.4rem; /* Larger font size for desktops */
    }
}

/* Mobile Menu (Hamburger) */
.navbar-toggler {
    font-size: 1.5rem; /* Larger size for easy tapping */
    color: #000000; /* Black hamburger icon */
    border: none; /* Remove border around toggle button */
}

.navbar-toggler:focus {
    outline: none; /* Remove focus outline */
    box-shadow: none; /* No shadow on focus */
}

/* Dropdown Menu */
.dropdown-menu {
    background-color: #ffffff; /* White background for dropdown */
    border: 1px solid #e0e0e0; /* Subtle gray border */
    border-radius: 4px; /* Slightly rounded corners */
    min-width: 10rem; /* Set a minimum width */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
}

.dropdown-item {
    color: #000000; /* Black text for dropdown items */
    padding: 0.5rem 1rem; /* Comfortable spacing */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.dropdown-item:hover {
    color: #007bff; /* Blue hover text */
    background-color: #f8f9fa; /* Light gray hover background */
}

/* Responsive Navbar */
@media (max-width: 768px) {
    .navbar-nav {
        flex-direction: column; /* Stack items vertically on smaller screens */
        align-items: flex-start; /* Align items to the left */
        padding: 0 1rem; /* Add padding for better appearance */
    }
    .navbar-nav .nav-item {
        margin-bottom: 0.5rem; /* Add spacing between links */
    }
    .navbar-brand {
        font-size: 1.5rem; /* Slightly smaller brand size for small screens */
    }
}

/* Active Link Styling */
.navbar-nav .nav-item .nav-link.active {
    color: #007bff; /* Highlight active link in blue */
    font-weight: bold; /* Make it stand out */
    text-decoration: underline; /* Underline for visibility */
}

.home-collage img {
  max-width: 100%; /* Ensures the image scales down */
  height: auto; /* Maintains aspect ratio */
  width: 200px; /* Set a specific width */
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}