/* General reset and styling for the custom menu container */
.custom-menu-class {
    display: flex;  /* Flexbox layout for the main menu container */
    flex-direction: row;  /* Lay out main menu items in a row */
    justify-content: center;  /* Center align the main menu items horizontally */
    align-items: center;  /* Center align items vertically */
    list-style-type: none;  /* No bullets on list items */
    padding: 0;  /* Remove padding for tight layout */
    margin: 0;  /* Remove margin to ensure alignment to the container edges */
    width: 100%;  /* Ensure full width utilization */
    /* background-color: rgba(0, 0, 0, 0.8);  Remove background color for the main menu */
    position: relative;  /* Make the main menu container the positioning context */
}

/* Styling for individual main menu items */
.custom-menu-class .menu-item {
    display: inline-flex;  /* Display menu items in a row */
    margin-right: 20px;  /* Space between main menu items */
    white-space: nowrap;  /* Prevent wrapping of text to new line */
    padding: 23px 15px;  /* Padding for each menu item */
    position: relative;  /* Ensure submenu is positioned relative to the parent */
    width: auto;  /* Set a fixed width to prevent shifting */
}

.custom-menu-class .menu-item:last-child {
    margin-right: 0;  /* No extra margin on the last main menu item */
}

/* Styling for submenu containers */
.custom-menu-class .sub-menu {
    display: none !important;
    flex-direction: row;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;         /* Stretch to the right edge */
    width: 100%;      /* Full width of the parent's container */
    justify-content: center;
    background-color: #000000b6;
    /* box-shadow: 0 4px 8px rgba(0,0,0,0.1); */
    padding: 0;
    z-index: 1000;
    /* border-top: 1px solid #dddddd36; */
}

/* Remove all hover-related display rules */
.custom-menu-class .menu-item-has-children:hover > .sub-menu,
.custom-menu-class .menu-item-has-children > a:hover + .sub-menu,
.custom-menu-class .sub-menu:hover {
    display: none !important;
}

/* Disable hover effect for submenus */
.custom-menu-class .menu-item-has-children > a:hover + .sub-menu,
.custom-menu-class .menu-item-has-children:hover > .sub-menu {
    display: none !important;
}

/* Ensure submenus are hidden by default */
.custom-menu-class .sub-menu {
    display: none;
}

/* Show submenu ONLY when the parent has submenu-visible class */
.custom-menu-class .menu-item-has-children.submenu-visible > .sub-menu {
    display: flex !important;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 200vw;
    justify-content: center;
    background-color: #00000000;
    /* box-shadow: 5px 4px 8px rgba(38, 38, 38, 0.17); */
    padding: 12px;
    z-index: 1000;
    /* border-top: 1px solid #ffffffa3; */
}

.elementor-sticky--effects .custom-menu-class .menu-item-has-children.submenu-visible > .sub-menu{
    background-color: #000000b6;
    /* border-top: 1px solid #dddddd36; */
}

.top_gradient_shadow .slider_shadow {
    background:linear-gradient(to top, transparent 80%, #000000a6 100%);
}

/* Ensure submenu stays visible on hover when submenu-visible is active */
.custom-menu-class .menu-item-has-children.submenu-visible:hover > .sub-menu {
    display: flex !important;
}

/* Override the positioned parent for submenu‐triggering items */
.custom-menu-class .menu-item-has-children.submenu-visible {
    position: static;
}

/* Styling for individual submenu items */
.custom-menu-class .sub-menu .menu-item {
    padding: 0 15px;  /* Horizontal padding for submenu items */
    display: inline-flex;  /* Ensure submenu items are laid out in a row */
    align-items: center;  /* Center align submenu items vertically */
    white-space: nowrap;  /* Prevent wrapping of text to new line */
    justify-content: center;  /* Center align submenu items */
    width: auto;  /* Ensure submenu items do not take full width */
}

/* Link styling within all menu items for visibility and aesthetics */
.custom-menu-class a {
    color: #fff;  /* Text color for readability */
    text-decoration: none;  /* No underlining of links */
    font-weight: 500;  /* Normal text weight */
    font-size:20px;
    display: inline-block;  /* Ensure consistent width */
    position: relative;  /* Position relative for pseudo-element */
}

/* Pseudo-element to reserve space for bold text */
.custom-menu-class a::after {
    content: attr(data-text);  /* Use the same text as the link */
    font-weight: bold;  /* Bold text */
    visibility: hidden;  /* Hide the pseudo-element */
    height: 0;  /* No height */
    overflow: hidden;  /* No overflow */
    display: inline-block;  /* Inline-block display */
}

.custom-menu-class a{
    font-weight: bold !important;
}
/* Styling for the active menu item */
.custom-menu-class .current-menu-item a,
.custom-menu-class .current_page_item a,
.custom-menu-class .menu-item-has-children.current-menu-ancestor > a {
    background: linear-gradient(to right, #55a8c8, #40b449);
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    font-weight: bold;  /* Bold text for the active menu item */
}

/* Hover effect for menu items */
.custom-menu-class a:hover {
    font-weight: bold;  /* Bold text on hover */
    color: #ddd;  /* Keep the text color white */
    background-color: transparent;  /* No background color change */
}

.elementor-kit-7 .custom-menu-class a:hover {
    color: #fff !important;
}

/* Styling for submenu links */
#menu-main-menu .sub-menu a {
    color: #ddd;
    font-size: 13px;
}


.light_header .custom-menu-class a {
    color:#000 !important;
}

.light_header #menu-main-menu .sub-menu a  {
    color: #ddd !important;
}

.light_header .custom-menu-class a:hover {
    color:#6c6c6c !important;
}


.light_header .open_side_menu svg rect {
    fill: #000 !important;
}

.light_header.la-sticky-header.elementor-sticky--effects{
    background-color: #fff !important;
}

.light_header.la-sticky-header.elementor-sticky--effects .custom-menu-class a{
    color: #000 !important;
}




.light_header .custom-menu-class .menu-item-has-children.submenu-visible > .sub-menu,
.light_header.elementor-sticky--effects .custom-menu-class .menu-item-has-children.submenu-visible > .sub-menu{
    background-color: #ffffffb6;
    border-top: 1px solid #ffffff36;
}



.light_header.la-sticky-header #menu-main-menu .sub-menu a,
.light_header.la-sticky-header.elementor-sticky--effects #menu-main-menu .sub-menu a{
    color:#3a3a3a !important;
}


@media (max-width: 1220px) {
    .custom-menu-class .menu-item {
        padding: 15px 10px;
        margin-right: 0px;
    }
}