/* Ensure the Topbar and Navbar do not overflow */

.topbar {
    height: 45px; /* Adjust based on your Topbar height */
}
.topbar small {
    font-size: 0.9rem; /* Adjust font size for smaller screens */
}
.navbar {
    height: auto; /* Allow Navbar to adjust height */
    padding: 10px 0; /* Add padding for better spacing */
    background-color: white !important; /* Set navbar background to white */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add shadow for better visibility */
}
.navbar-brand {
    font-size: 1.5rem; /* Adjust logo font size */
    color: #333 !important; /* Set logo text color */
}

/* Navbar link styles */
.navbar-nav .nav-link {
    color: #007bff; /* Default link color (primary) */
    font-weight: 500; /* Medium font weight */
    padding: 0.5rem 1rem; /* Add padding for better click area */
}

/* Active link color */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:hover {
    color: orange !important; /* Change active/hover color to orange */
}

.nav-item {
    margin: 5px 0; /* Add spacing between nav items */
}

.nav-link.active {
    color: #FF6A01 !important; /* Set active nav link color */
}

/* Toggler icon color */
.navbar-toggler {
    border: none; /* Remove border */
}
.navbar-toggler:focus {
    box-shadow: none; /* Remove focus shadow */
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Responsive adjustments for mobile and tablet */
@media (max-width: 991.98px) {
    .topbar {
        display: none; /* Hide Topbar on mobile and tablet */
    }

    .navbar-nav {
        background-color: white; /* Ensure background color for collapsed menu */
        padding: 10px; /* Add padding for better spacing */
    }
    .navbar-nav .nav-link {
        color: #007bff; /* Default link color for mobile */
    }
    .navbar-nav .nav-link.active,
    .navbar-nav .nav-link:focus,
    .navbar-nav .nav-link:hover {
        color: orange !important; /* Active/hover color for mobile */
    }
}