nav {
    background-color: #0E255F; /* Blue background color for the navbar */
    font-size: 13px;
    
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Add shadow for visual separation */
  
}

.au-navbar {
    display: flex;
    justify-content: center;
}

.au-navbar-menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.au-navbar-menu li {
    position: relative;
}

.au-navbar-menu li a {
    display: block;
    padding: 15px 20px;
    text-decoration: none;
    color: #ffffff; /* White text color */
    transition: background-color 0.3s, color 0.3s; /* Smooth transition for background and text color */
}

.au-navbar-menu li:hover > a {
    background-color: #0E255F; /* Darker blue background on hover */
    color: #ffffff; /* White text color on hover */
}

.drop-menu {
    display: none;
    position: absolute;
    background-color:#0E255F; /* White background color for dropdown */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Box shadow for dropdown */
    z-index: 1;
    color:whitesmoke;
    
}

.drop-menu li {
    width: 250px;
    list-style:none;
    padding: 0; /* Remove any padding */
    margin: 0; /* Remove any margin */
   
}

.drop-menu li a {
    display: block;
    padding: 10px 10px;
    text-decoration: none;
    margin-left: 0px;
    color: whitesmoke; /* Dark text color */
    transition: background-color 0.3s, color 0.3s; /* Smooth transition for background and text color */
}

.drop-menu li:hover > a {
    background-color:  #05C4DD; /* Light gray background on dropdown item hover */
    color: #ffffff; /* Blue text color on dropdown item hover */
   
}


.au-navbar-menu li:hover .drop-menu {
    display: block;
}
.bottom-right {
    top: 100%;
    left: 0; /* Ensure dropdown aligns to the right of parent */
}


/* Hide the navbar-toggler button by default (it will be shown in mobile view) */
.navbar-toggler {
    display: none;
}

/* Utility class for showing the menu on click */
.show {
    display: block !important;
}

/* Mobile styles */
@media (max-width: 768px) {
    
    .au-navbar-menu {
        display: none; /* Hide the menu by default */
        flex-direction: column;
    }

    .au-navbar-menu.show {
        display: flex; /* Show the menu when the toggle is active */
    }
    .au-navbar-menu li {
        width: 100%;
        text-align: center;
    }

    .au-navbar-menu li a {
        display: block;
        padding: 15px;
        border-bottom: 1px solid #ddd;
    }

    .au-navbar-menu li .drop-menu {
        position: static;
    }

    .au-navbar-menu li .drop-menu li {
        width: 100%;
    }

   

    .navbar-toggler {
        display: block;
        background-color: #000;
        color: #fff;
        padding: 10px;
        cursor: pointer;
        text-align: right;
    }

}


@media (max-width: 480px) {
    
    .au-navbar-menu {
        display: none; /* Hide the menu by default */
        flex-direction: column;
    }

    .au-navbar-menu.show {
        display: flex; /* Show the menu when the toggle is active */
    }
    .au-navbar-menu li {
        width: 100%;
        text-align: center;
    }

    .au-navbar-menu li a {
        display: block;
        padding: 15px;
        border-bottom: 1px solid #ddd;
    }

    .au-navbar-menu li .drop-menu {
        position: static;
    }

    .au-navbar-menu li .drop-menu li {
        width: 100%;
    }

   

    .navbar-toggler {
        display: block;
         font-size: 11px;
        background-color: #0E255F;
        color: #fff;
        padding: 10px;
        
        cursor: pointer;
        text-align: right;
    }

}