/* ════════════════════════════════════════════════════════════
   KB Solutions — Monotree-style minimal mega menu
   Clean white panel, plain text links, no boxes, lots of whitespace
   ════════════════════════════════════════════════════════════ */

/* ─── 1. Right-edge overflow guards ─── */
.list_hoverClass { position: relative !important; }

.list_hoverClass .menu_inner_sec {
    left: 0 !important;
    right: auto !important;
}
.list_hoverClass:nth-last-child(-n+3) .menu_inner_sec {
    left: auto !important;
    right: 0 !important;
}

/* ─── 2. Dropdown panel — clean white card ─── */
.menu_inner_sec {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.04),
        0 16px 40px -8px rgba(0, 0, 0, 0.1) !important;
    padding: 28px 32px !important;
    margin-top: 10px !important;
    box-sizing: border-box !important;
    max-width: calc(100vw - 30px) !important;
}

/* Wider for multi-column dropdowns */
.menu_inner_sec.menu_inner_service {
    width: 580px !important;
    min-width: 380px !important;
}
.menu_inner_sec.menu_inner_service.hosting-right {
    width: 680px !important;
}
.menu_inner_sec.max-menuwidth { width: 580px !important; }

/* Narrower for simple Products / Tools / Company */
.menu_inner_sec:not(.menu_inner_service):not(.max-menuwidth) {
    width: auto !important;
    min-width: 260px !important;
    max-width: 320px !important;
}

/* ─── 3. Hide empty tab-description column ─── */
.menu_inner_service .sub_menu_service.col-sm-3:first-child,
.menu_inner_service .sub_menu_service.mt-3:first-child,
.menu_inner_service .tab-content,
.menu_inner_secTech .tab-content,
.menu_inner_secCom .tab-content {
    display: none !important;
}

/* ─── 4. Container — 2-column grid ─── */
.menu_left_top {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px 28px !important;
    align-items: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Reset all inner containers */
.menu_inner_sec ul.sub_menu,
.menu_inner_sec .sub_menu_service,
.menu_inner_sec .col-sm-3 {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    width: auto !important;
    max-width: 100% !important;
    flex: none !important;
    float: none !important;
}
.menu_inner_sec ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ─── 5. Menu items — Monotree minimal style ─── */
.menu_inner_sec li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}

.menu_inner_sec li > a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 9px 10px !important;
    margin: 0 !important;
    border-radius: 8px !important;
    color: #4b5563 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    transition: color 0.15s ease, background-color 0.15s ease !important;
    background: transparent !important;
}

.menu_inner_sec li > a:hover,
.menu_inner_sec li > a:focus,
.menu_inner_sec li.active > a {
    background: #f9fafb !important;
    color: #111827 !important;
    text-decoration: none !important;
}

/* ─── 6. Tiny icon dot — subtle, no background box ─── */
.menu_inner_sec .service-item {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #d1d5db !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    transition: background-color 0.15s ease, transform 0.15s ease !important;
    border: none !important;
    box-shadow: none !important;
}

.menu_inner_sec li > a:hover .service-item {
    background: #6366f1 !important;
    transform: scale(1.5) !important;
}

/* ─── 7. Menu trigger styling ─── */
.header_menuList > li.list_hoverClass > a.header_hover {
    color: #374151 !important;
    font-weight: 500 !important;
}
.header_menuList > li.list_hoverClass:hover > a.header_hover {
    color: #111827 !important;
}

/* Arrow indicator */
.header_menuList > li.list_hoverClass > .menu_arrow {
    display: inline-block !important;
    width: 12px !important;
    height: 12px !important;
    margin-left: 4px !important;
    position: relative !important;
    background: none !important;
    border: none !important;
    vertical-align: middle !important;
    transition: transform 0.25s ease !important;
}
.header_menuList > li.list_hoverClass > .menu_arrow::before {
    content: '' !important;
    position: absolute !important;
    top: 3px !important; left: 2px !important;
    width: 6px !important; height: 6px !important;
    border-right: 1.5px solid #9ca3af !important;
    border-bottom: 1.5px solid #9ca3af !important;
    transform: rotate(45deg) !important;
}
.header_menuList > li.list_hoverClass:hover > .menu_arrow { transform: rotate(180deg) !important; }
.header_menuList > li.list_hoverClass:hover > .menu_arrow::before { border-color: #111827 !important; }

/* ─── 8. Mobile ─── */
@media (max-width: 991px) {
    .menu_inner_sec,
    .menu_inner_sec.menu_inner_service,
    .menu_inner_sec.menu_inner_service.hosting-right,
    .menu_inner_sec.max-menuwidth {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 14px !important;
        margin: 0 !important;
        position: static !important;
        box-shadow: none !important;
        border: none !important;
        background: #f9fafb !important;
        border-radius: 8px !important;
    }
    .menu_left_top { grid-template-columns: 1fr !important; }
}