/* 
   Modern Blur Effect for Top Navbar 
   Requested by user: keeping only the glassmorphism blur
*/

.navbar {
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    background: rgba(0, 0, 0, 0.3) !important;
    /* Semi-transparent for overlay readability */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.navbar.navbar-short {
    background: rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}

/* Ensure text remains readable over blur */
.nav-link,
.navbar-caption,
.navbar-logo {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/*
   Glassmorphism for Dropdown Menus (Submenus)
*/
section.cid-ukegWuHMK8 .dropdown-menu,
section.cid-ukegWuHMK8 .navbar.navbar-expand-lg .dropdown .dropdown-menu {
    background: rgba(52, 164, 162, 0.5) !important;
    background-color: rgba(52, 164, 162, 0.5) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/*
   Mobile Menu (Navbar Collapse)
   Harmonizing with header background and making it full-width.
   Matching Mobirise's exact selectors with higher priority.
*/
@media (max-width: 991px) {

    /* 1. Match the glass background for the dropdown parent using primary color */
    section.cid-ukegWuHMK8 .navbar.navbar-dropdown,
    section.cid-ukegWuHMK8 .navbar.navbar-dropdown.collapsed,
    section.cid-ukegWuHMK8 .navbar.navbar-dropdown.opened {
        background: rgba(52, 164, 162, 0.7) !important;
        background-color: rgba(52, 164, 162, 0.7) !important;
    }

    /* 2. Force the collapse container to be full width and glass-styled */
    /* Matches lines 1180, 1496 etc in mbr-additional.css */
    section.cid-ukegWuHMK8 .navbar-collapse,
    section.cid-ukegWuHMK8 .navbar.collapsed.opened:not(.navbar-short) .navbar-collapse,
    section.cid-ukegWuHMK8 .navbar.collapsed .navbar-collapse {
        background: rgba(52, 164, 162, 0.5) !important;
        background-color: rgba(52, 164, 162, 0.5) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;

        /* Escape container constraints */
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 2.5rem 1.5rem !important;

        /* Reset Mobirise offsets */
        transform: none !important;
        border: none !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 0 !important;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5) !important;

        height: auto !important;
        max-height: 80vh !important;
    }

    /* 3. Ensure the inner container doesn't restrict width */
    section.cid-ukegWuHMK8 .container,
    section.cid-ukegWuHMK8 .container-fluid {
        position: static !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
    }

    /* Transition: Smooth fade and slide */
    .collapse.show {
        animation: slideDownGlassPerfectly 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) forwards !important;
    }
}

@keyframes slideDownGlassPerfectly {
    from {
        opacity: 0;
        transform: translateY(-5px) !important;
    }

    to {
        opacity: 1;
        transform: translateY(0) !important;
    }
}