.navbar {
    background-color: #b4bac1; 
}

.navbar-brand {
    color: #000000; /* Dark grey for brand text */
    font-family: 'Roboto', sans-serif; /* Roboto font for brand text */
}

.nav-link {
    color: #555555; /* Medium grey for nav links */
    transition: transform 0.2s ease;
}

.nav-link:hover {
    transform: scale(1.15); /* Adjust scale as needed */
    color: #000000; /* Dark grey on hover */
}

.navbar {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); /* More prominent shadow */
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10; /* High z-index to bring navbar above all content */
}

@media (max-width: 767.98px) { /* Small devices (smaller than md) */
    .responsive-height {
        height: 200vh; /* Auto height for small devices */
    }
}

@media (min-width: 768px) { /* Medium devices and above */
    .responsive-height {
        height: 85vh; /* 85% of viewport height for larger devices */
    }
}