.mynavbar {
    background: linear-gradient(135deg, #0891b2 0%, #4f46e5 100%);
    color: white;
    box-shadow: 0 4px 20px rgba(79, 70, 229, 0.15);
}

.navbar-toggler {
    margin-right: 7px;
    border: none;
}

.navbar-brand {
    color: white !important;
    font-weight: 600;
}

.navbar-brand:hover {
    outline: none;
    opacity: 0.9;
}

.nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
    transition: all 0.2s ease;
}

.nav-link:hover {
    outline: none;
    color: white !important;
    transform: translateY(-1px);
}

.mynavbar-dark {
    /* background-color: #0F172A; */
    background-color: #1c1c23;
    color: white;
}

#icon-dark {
    display: none;
}

a {
    text-decoration: none;
}

a:hover {
    outline: none;
}

.a-light {
    color: black;
}

.a-dark {
    color: white;
}

.navbar-brand {
    margin-left: 30px;
    font-weight: 500;
}

/* Add these classes for light and dark mode toggle icon */
.navbar-toggler-icon-light {
    background-color: black;
    /* Set color for light mode */
}

.navbar-toggler-icon-dark {
    background-color: white;
    /* Set color for dark mode */
}

@media (max-width: 767px) {

    /* Specify margin for the navbar brand */
    .navbar-brand {
        margin-left: 10px;
        /* Adjust this value as needed */
    }
}