/* Fully Responsive & Centered Dropdown Menu - V4 */

/* 1. Base styling for the dropdown panel (smaller) */
.elementskit-submenu-panel {
    /* Sizing */
    width: auto !important;
    min-width: 180px !important;
    max-width: 240px !important;

    /* Appearance */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
    border-radius: 6px !important;
    border: 1px solid #e9e9e9 !important;
    padding: 6px 0 !important;
}

/* 2. Default Centering for dropdowns */
.elementskit-submenu-panel {
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* 3. Right-align dropdowns for the last 3 menu items to prevent viewport overflow */
.elementskit-navbar-nav > li.menu-item-has-children:nth-last-child(-n+3) > .elementskit-submenu-panel {
    left: auto !important;
    right: 0 !important;
    transform: none !important;
}

/* 4. Styling for individual dropdown items (smaller) */
.elementskit-submenu-panel > li > a {
    padding: 8px 18px !important;
    font-size: clamp(12px, 1.2vw, 16px) !important;
    color: #fff !important;
    white-space: nowrap !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

/* 5. Hover effect for items */
.elementskit-submenu-panel > li > a:hover {
    background-color: #fff !important;
    color: #000 !important;
}

/* 6. Responsive styles for mobile menu items */
@media screen and (max-width: 768px) {
    .menu-item.nav-item.elementskit-mobile-builder-content {
        width: 100% !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .menu-item.nav-item.elementskit-mobile-builder-content > a,
    .menu-item-668 > a.dropdown-item {
        padding: 12px 10px !important;
        font-size: 14px !important;
        white-space: normal !important;
        word-break: break-word !important;
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        line-height: 1.4 !important;
    }
    
    /* Specific style for the menu item with ID 668 */
    .menu-item-668 {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .menu-item-668 > a.dropdown-item {
        padding: 10px 15px !important;
    }
    
    /* Ensure the dropdown panel is full width on mobile */
    .elementskit-dropdown.elementskit-submenu-panel {
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
        left: 0 !important;
        transform: none !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
    }
}