/* Display parent categories horizontally */
.parent-categories {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    background-color: #fff;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

/* Parent category styling */
.parent-category {
    position: relative;
    padding: 0 15px;
}

.parent-category .nav-link {
    text-align: left;
    padding: 10px 15px;
    white-space: nowrap;
    display: block; /* Ensure link takes up the full space */
}

/* Child categories - hidden by default */
.child-categories, .sub-child-categories {
    list-style: none;
    padding: 0px;
    margin: 0;
    display: none;
    position: absolute;
    background-color: #fff;
    border: 1px solid #ddd;
    z-index: 999;
    width: auto;
    top: 100%;
    left: 0;
    right: 0;
}

/* Show child categories on hover */
.parent-category:hover > .child-categories {
    display: block;
    flex-direction: column;
}

/* Sub-child categories align to child categories */
.child-category:hover > .sub-child-categories {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 100%; /* Position to the right of child */
    top: 0;
    height: 100%; /* Match height with child */
}

/* Font Awesome arrow for categories with children */
.cb-parent-nav-link::after {
    content: '\f054' !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900;
    margin-left: 0.5rem;
    vertical-align: middle;
    display: inline-block;
    line-height: 2;
    transition: transform 0.2s;
    will-change: transform;
    border-top: 0;
    font-size: 0.75em;
    position: absolute;
    right: 10px;
}

/* Parent category hover effect */
.parent-category .nav-link:hover {
    background-color: #f1f1f1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .parent-categories {
        flex-direction: column; /* Stack vertically on small screens */
    }
    
    .child-categories,
    .sub-child-categories {
        width: 100%; /* Full width on small screens */
    }
    
    .child-category:hover > .sub-child-categories {
        left: 0; /* Position below on small screens */
        top: 100%;
        height: 100%;
    }
}






ul.menuBox {
    margin: 0;
    padding: 0;
    list-style: none;
    border-right: 1px solid #ddd;
    padding-top: 15px;
    padding-bottom: 15px;
    max-height: 400px;
    overflow-y: auto;
}
ul.menuBox li {
    padding: 5px 10px;
   
}
ul.menuBox li {
    padding: 5px 10px;
    text-transform: capitalize;
    transition: all .5s;
}
ul.menuBox li:hover {
    padding-left:15px;
}