/*
Boxed Skin
*/

/* Search Field */
.menuzord-menu > li.search form {
    padding: 2px 16px;
}

/* Color Schemes */
.menuzord.blue .menuzord-menu > li.active > a,
.menuzord.blue .menuzord-menu > li:hover > a,
.menuzord.blue .menuzord-menu ul.dropdown li:hover > a {
    background: #202c45;
    color: #fff;
}

.menuzord.green .menuzord-menu > li.active > a,
.menuzord.green .menuzord-menu > li:hover > a,
.menuzord.green .menuzord-menu ul.dropdown li:hover > a {
    background: #800000;
    color: #fff;
}

.menuzord.red .menuzord-menu > li.active > a,
.menuzord.red .menuzord-menu > li:hover > a,
.menuzord.red .menuzord-menu ul.dropdown li:hover > a {
    background: #F2184F;
    color: #fff;
}

.menuzord.orange .menuzord-menu > li.active > a,
.menuzord.orange .menuzord-menu > li:hover > a,
.menuzord.orange .menuzord-menu ul.dropdown li:hover > a {
    background: #ff853f;
    color: #fff;
}

.menuzord.yellow .menuzord-menu > li.active > a,
.menuzord.yellow .menuzord-menu > li:hover > a,
.menuzord.yellow .menuzord-menu ul.dropdown li:hover > a {
    background: #ffae11;
    color: #fff;
}

.menuzord.purple .menuzord-menu > li.active > a,
.menuzord.purple .menuzord-menu > li:hover > a,
.menuzord.purple .menuzord-menu ul.dropdown li:hover > a {
    background: #AC92EC;
    color: #fff;
}

.menuzord.pink .menuzord-menu > li.active > a,
.menuzord.pink .menuzord-menu > li:hover > a,
.menuzord.pink .menuzord-menu ul.dropdown li:hover > a {
    background: #EC87C0;
    color: #fff;
}

/* Dropdown Styling */
.menuzord-menu ul.dropdown {
    position: absolute;
    display: none;
    top: 100%;
    left: 0;
    background: #fff;
    padding: 0;
    margin: 0;
    list-style: none;
    z-index: 1000;
    border: 1px solid #ddd;
    width: 300px; /* Adjust the width as needed */
}

/* Show dropdown on hover */
.menuzord-menu li:hover > ul.dropdown {
    display: block;
}

/* Nested Dropdowns */
.menuzord-menu ul.dropdown li ul.dropdown {
    top: 0;
    left: 100%;
    display: none;
}

/* Show nested dropdowns on hover */
.menuzord-menu ul.dropdown li:hover > ul.dropdown {
    display: block;
}

/* Dropdown Items */
.menuzord .menuzord-menu ul.dropdown li:hover > a {
    background: #333;
    color: #fff;
}

/* Megamenu */
.menuzord-menu > li > .megamenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 1600px;
    z-index: 1000;
    background: #fff;
    padding: 20px;
    border: 1px solid #ddd;
}

/* Show megamenu on hover */
.menuzord-menu > li:hover > .megamenu {
    display: block;
}

/* Responsive Mode */
@media (max-width: 1000px) {
    .menuzord-responsive .menuzord-menu > li {
        padding: 0;
    }
    .menuzord-responsive .menuzord-menu > li > a {
        padding: 12px 20px !important;
    }
    .menuzord-responsive .menuzord-menu ul.dropdown,
    .menuzord-responsive .menuzord-menu > li > .megamenu {
        position: static;
        width: auto;
        border: none;
    }
    .menuzord-responsive .menuzord-menu ul.dropdown li ul.dropdown {
        position: static;
    }
}

/* Ensure the dropdown menus are positioned relative to their parent li */
.menuzord-menu > li {
    position: relative;
}

/* Display dropdown menus on hover */
.menuzord-menu > li:not(.megamenu-li):hover > ul.dropdown {
    display: block;
}

/* Position dropdown menus */
.menuzord-menu ul.dropdown {
    position: absolute;
    display: none;
    top: 100%;
    left: 0;
    background: #fff;
    padding: 0;
    margin: 0;
    list-style: none;
    z-index: 1000;
    border: 1px solid #ddd;
    width: 300px; /* Adjust the width as needed */
}

/* Ensure nested dropdowns are positioned relative to their parent li */
.menuzord-menu ul.dropdown li {
    position: relative;
}

/* Display nested dropdowns on hover */
.menuzord-menu ul.dropdown li:hover > ul.dropdown {
    display: block;
}

/* Dropdown icon styling */
.dropdown-icon {
    display: inline-block;
    margin-left: 5px;
    font-size: 12px;
    color: #000;
}

/* Adjust the positioning of the dropdown icon */
.menuzord-menu > li > a .dropdown-icon,
.menuzord-menu ul.dropdown > li > a .dropdown-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}