/* Dropdown item styles */
.dropdown-item {
    padding: 10px;
    color: #333;
    text-decoration: none;
    display: block;
}

/* Dropdown styles */
.dropdown {
    display: flex;
    justify-content: center;
}
/* Dropdown toggle button styles */
.dropdown-toggle {
    padding: 15px;
    border: none;
    cursor: pointer;
}

/* Level 1 Dropdown menu styles */
.dropdown-menu {
    display: none;
    position: static;
    margin-top: -25px;
    top: 100%;
    left: -10px; /* Center the dropdown relative to the viewport */
    transform: translateX(-50%);
    width: 125%; /* Set the width to 1000px */
    height: auto; /* Set the max height to 90% of the viewport */
    overflow-y: auto; /* Add scrollbar when content exceeds max height */
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1;
}
/* Ensure level 2 dropdown is within the viewport */
/* Level 2 Dropdown menu styles */
.dropdown-menu-level-2 {
    display: none;
    position: absolute;
    padding: 25px;
    top: 0%;
    left: 0; /* Center the dropdown relative to the viewport */
    transform: translateX(20%);
    width: 65rem;
    height: auto; /* Set the width to 1000px */
    min-height: 100rem; /* Set the max height to 90% of the viewport */
    overflow-y: auto; /* Add scrollbar when content exceeds max height */
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1;
}
    /* Add scrollbar to dropdown menu */
    /* For WebKit (Chrome, Safari) */
    .dropdown-menu-level-2::-webkit-scrollbar {
        width: 8px;
    }

    .dropdown-menu-level-2::-webkit-scrollbar-thumb {
        background-color: #888;
        border-radius: 4px;
    }

/* For Firefox */
.dropdown-menu-level-2 {
    scrollbar-width: thin;
    scrollbar-color: #888 transparent;
}


/* For Firefox */
.dropdown-menu {
    scrollbar-width: thin;
}

.dropdown-menu {
    scrollbar-color: #888 transparent; /* thumb and track color */
}

/* Make columns for menu content */
.dropdown-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

    /* Customize column width as needed */
    .dropdown-menu > * {
        flex-basis: 48%; /* Adjust as needed */
    }


/* Dropdown item styles */
.dropdown-item {
    padding: 10px;
    color: #333;
    text-decoration: none;
    display: block;
}

/* Dropdown styles */
.dropdown {
    display: flex;
    justify-content: center;
}

/* Dropdown toggle button styles */
.dropdown-toggle {
    padding: 15px;
    border: none;
    cursor: pointer;
}

/* Level 1 Dropdown menu styles */
.dropdown-menu {
    display: none;
    position: absolute;
    margin-top: -25px;
    top: -1000vh; /* Initially position off-screen */
    left: 50%; /* Center the dropdown relative to the viewport */
    transform: translateX(-50%);
    width: 65rem; /* 80wh */
    max-height: 50rem; /* Set the width to 1000px */
    height: auto;
    margin-bottom: 100px; /* Set the max height to 90% of the viewport */
    overflow-y: auto; /* Add scrollbar when content exceeds max height */
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1;
}



    /* Add more styling as needed */

    /* Add scrollbar to dropdown menu */
    .dropdown-menu::-webkit-scrollbar {
        width: 8px;
    }

    .dropdown-menu::-webkit-scrollbar-thumb {
        background-color: #888;
        border-radius: 4px;
    }

/* Make columns for menu content */
.dropdown-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

    /* Customize column width as needed */
    .dropdown-menu > * {
        flex-basis: 48%; /* Adjust as needed */
    }
/* Add cursor:pointer to li elements */
.dropdown-level-2 {
    cursor: pointer;
    padding 8px;
}
/* Style link icon */
.link-icon {
    display: none;
    width: 18px;
    height: 18px;
    background-image: url('../../../../../../Plugins/Misc.MegaMenu/Content/images/link-3.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 5px; /* Adjust as needed */
    cursor: pointer;
    padding-top: 5px;
    opacity: 0.55;
    transition: opacity 0.3s ease; /* Add transition for opacity */
}

    .link-icon:hover {
        opacity: 1;
    }

/* ///////////////////////////////////////////
      Handling the open state with the .open class */
.dropdown.clicked .dropdown-menu.open {
}
/* Handle click open */
/* Handle hover */
.dropdown:focus-within .dropdown-menu { /* Handle focus within for accessibility */
    display: block;
    top: 100%;
}

.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu, /* Added for accessibility */
.dropdown.clicked .dropdown-menu { /* Add this class for clicked state */
    top: 100%; /* Position below the parent element */
    display: block; /* Show the dropdown menu */
}

/*//////////////////////////  Level 2 Dropdown menu styles */

/* left: 20%; /* Adjust as needed */
/* width: 80%; /* Adjust as needed
    transform: none; /* Reset transform */
/* Add any additional styles as needed */
.side-2-mobile .side-2 {
    width: 100%;
    max-width: 100%;
    float: none;
    display: block;
}
/* Base mobile menu layout */
.top-menu.mobile {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .top-menu.mobile > li {
        display: block;
        position: relative;
    }

    /* Sublist: start hidden and scrollable if tall */
    .top-menu.mobile .sublist {
        display: none; /* accordion starts closed */
        position: static !important;
        width: 100% !important;
        max-height: 70vh;
        overflow-y: auto;
        box-shadow: none !important;
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
        margin: 0;
        padding: 0;
    }

        /* Column layout for subitems */
        .top-menu.mobile .sublist > li {
            display: block;
            width: 100%;
        }

        /* Links full-width, tap-friendly */
        .top-menu.mobile .sublist a {
            display: block;
            padding: .75rem 1rem;
        }

/* Kill desktop hover behavior at mobile breakpoint */
@media (max-width: 1024px) {
    .top-menu .sublist {
        display: none;
    }
    /* desktop selector */
    .top-menu li:hover > .sublist {
        display: none;
    }
    /* disable hover-open */
    .top-menu .sublist {
        position: static !important;
    }
    /* no absolute dropdowns */
}