/* Style for the hamburger icon */
.hamburger {
    display: inline-block;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Animate hamburger lines on toggle (optional) */
.hamburger--slider .hamburger-inner {
    background-color: #fff; /* change color as needed */
}

/* Optional: Add transition for smooth menu appearance */
@media (max-width: 768px) {
    #navBar {
        background-color: #20B4B7; /* background for menu */
        padding: 40px;
        border-top: 1px solid #ddd;
    }

    /* Style for the toggle button on mobile */
    .navbar-toggler {
        padding: 8px;
        border: none;
    }
}

/* Style for the logo */
.tib-logo1 {
    margin: 10px auto; /* Center the logo on mobile */
}

/* Optional: add some padding or border on mobile for better spacing */
@media (max-width: 768px) {
    .tib-logo {
        padding-left: 40px;
    }
}

/* Style for menu links on hover */
#navBar a:hover {
    color: #fff; /* Change to your preferred hover color */
    text-decoration: underline;
}

/* Style for active menu link */
#navBar a.active,
#navBar a:active {
    color: #fff; /* Change to your preferred active color */
    font-weight: bold;
}