/* Modern Navbar Styles */
.navbar {
    background-color: #2c3e50; /* Dark background color */
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 0;
    left: 0; /* Ensure it sticks to the left */
    right: 0; /* Ensure it sticks to the right */
    z-index: 9999; /* Ensure it stays above other elements */
    transition: all 0.3s ease;
    width: 100%; /* Ensure it takes full width */
    padding: 10px 0; /* Optional padding for more space */
}

/* Navbar Logo */
.navbar .navbar-brand img {
    max-height: 50px; /* Ensure the logo doesn't overflow */
}

/* Navbar Links Styling */
.navbar-nav .nav-link {
    color: black; /* White text for the links */
    text-transform: uppercase; /* Uppercase text for a modern feel */
    font-weight: 500; /* Semi-bold font for the links */
    margin: 0 15px; /* Spacing between links */
    transition: all 0.3s ease; /* Smooth transition */
}

/* Navbar Hover Effects */
.navbar-nav .nav-link:hover {
    color: #FFA132; /* Red text color on hover */
    background-color: rgba(255, 255, 255, 0.1); /* Slight background color change */
    border-radius: 5px; /* Rounded corners on hover */
    text-decoration: none; /* No underline on hover */
}

/* Navbar Toggler Button Styling */
.navbar-toggler {
    border-color: #fff; /* White border color for the toggler */
}

.navbar-toggler-icon {
    background-color: #fff; /* White toggler icon */
}

/* Responsive Navbar on small screens */
@media (max-width: 767px) {
    .navbar-nav {
        text-align: center; /* Center align navbar links in mobile */
    }

    .navbar-nav .nav-item {
        margin: 10px 0; /* More space between items on small screens */
    }
}