nav {

}

.nav-link {
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
    font-size: var(--bs-nav-link-font-size);
    font-weight: var(--bs-nav-link-font-weight);
    color: var(--bs-nav-link-color);
    text-decoration: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.navbar-brand img {
    /* Ensure the image inside the link scales with the container */
    height: auto !important;
    width: 100% !important;
}

.navbar-brand {
    padding-top: var(--bs-navbar-brand-padding-y);
    padding-bottom: var(--bs-navbar-brand-padding-y);
    margin-right: var(--bs-navbar-brand-margin-end);
    text-decoration: none;
    white-space: nowrap;
    /* Match the container width */
    width: 768px;
}

/* Allow the logo to overflow the navbar height */
.navbar {
    overflow: visible;
    min-height: 60px; /* Adjust based on your preferred navbar thickness */
    position:absolute;
}

/* Custom lighter background */
.navbar-light {
    background-color: #727272 !important; /* Standard Bootstrap light */
}

.bg-dark {
    background-color:#000 !important;
}


/* On Mobile: Ensure the logo doesn't cover the whole screen */
@media (max-width: 767px) {
    /* Ensure nav items stack nicely when expanded on mobile */
    .navbar-collapse {
        margin-top: 40px; /* Space so menu doesn't start 'under' the logo */
    }
}

/* Ensure the toggler button is always clickable and on top */
.navbar-toggler {
    z-index: 1100;
    position: relative;
}