/* General Styling */
body {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    overflow-x: hidden; /* Prevent any horizontal scroll on the body */
}








/* Desktop Code Child color and theme */
.onlydesktopchild-dropdown {
    background: linear-gradient(135deg, #1a1a1a, #343434); /* Smooth dark gradient with a subtle shine */
    border: 1px solid #7f8c8d; /* Soft metallic border to match the dark theme */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4); /* Light shadow for a more elevated feel */
}



.navbar-container- {
    background-color: #0B1014;
    color: white;
    display: flex;
    justify-content: center;
    position: fixed;
    width: 100%;
    max-width: 100vw; /* Prevents the navbar from overflowing the viewport */
    z-index: 9999;
    top: 0;
    height: 60px;
    align-items: center;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}

.navbar-menu- {
    display: flex;
    justify-content: center;
    width: 100%;
}

.nav-list-masterpage {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 100%; /* Ensure the nav list doesn't overflow */
}

    .nav-list-masterpage li {
        margin: 0 20px;
        position: relative;
    }

        .nav-list-masterpage li a {
            color: lightgray;
            text-decoration: none;
            padding: 10px 15px;
            transition: color 0.3s ease;
            font-size: 1.15em; /* Adjusted size */
            display: block;
            font-weight: 700; /* Numeric weight for bolder text */
            white-space: nowrap; /* Prevent text wrapping */
            max-width: 100%; /* Ensure links don't overflow */
            -webkit-font-smoothing: antialiased; /* Improve rendering on WebKit */
            -moz-osx-font-smoothing: grayscale; /* Improve rendering on Firefox */
        }


            .nav-list-masterpage li a:hover {
                color: #ffcc00; /* Gold color on hover */
            }



/* Desktop Dropdown Styling */


.hidden-bottom-area {
    margin-bottom: 100px;
}


/* Ensure the parent menu item has a relative position */
.submenu-parent {
    position: relative; /* Ensures absolute positioning of the submenu */
}



/* Hidden bottom area to keep the dropdown open when hovering */
.dropdown-toggle-masterpage::after {
    content: '';
    position: absolute;
    top: 100%; /* Position immediately below SERVICES */
    left: 0;
    width: 100%;
    height: 100px; /* Extend hoverable area 100px downwards */
    background: transparent; /* Invisible background */
    pointer-events: auto; /* Enable hover detection */
}


/* Submenu Dropdown Styling */
.submenu-dropdown {
    display: none;
    position: absolute;
    background-color: #0B1014;
    top: 53px; /* Align with the bottom of the navbar */
    left: calc(50% - 95px); /* Center it based on half of min-width (90px for 180px min-width) */
    min-width: max-content; /* Automatically adjusts the width based on the longest item */
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    transition: opacity 0.3s ease-in-out; /* Transition for opacity */
    opacity: 0; /* Start with opacity 0 */
    list-style: none; /* Remove default bullet points */
    padding: 0; /* Remove any default padding */
    margin: 0; /* Remove any default margin */
}


    .submenu-dropdown li {
        list-style: none; /* Ensure list items have no markers */
        margin: 0;
        padding: 0;
    }

        /* Submenu item styling */
        .submenu-dropdown li a {
            color: lightgray;
            display: block;
            white-space: nowrap; /* Ensure the text does not wrap to a new line */
            text-align: center; /* Center text */
            padding: 10px 20px;
            transition: background-color 0.3s ease;
            text-decoration: none;
            list-style: none; /* Ensure list items have no markers */
        }

            .submenu-dropdown li a:hover {
                background-color: #444;
            }

        .submenu-dropdown li:first-child a {
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
        }

        .submenu-dropdown li:last-child a {
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
        }



/* When open, height is auto */
.submenu-parent.open .submenu-dropdown {
    height: auto;
}

/* Positioning for nested submenus (like Remote-Online Help) */
.submenu-parent > .submenu-dropdown > .submenu-parent > .submenu-dropdown {
    left: 100%; /* Position to the right of the parent submenu */
    top: 0; /* Align with the top of the parent submenu */
}

.submenu-parent:not(.no-dropdown-animation):hover > .submenu-dropdown {
    display: block;
    opacity: 1; /* Set opacity to 1 when visible */
    animation: dropdownFadeMasterpage 0.3s ease-in-out forwards; /* Apply animation */
}


.no-dropdown-animation:hover > .submenu-dropdown {
    display: block; /* Show submenu without animation on hover */
    opacity: 1; /* Set opacity to 1 when visible */
    animation: none; /* No animation for this submenu */
}


/* Show nested submenu on hover of the specific item */
.submenu-parent:hover > .submenu-dropdown > .submenu-parent:hover > .submenu-dropdown {
    display: block; /* Show the nested submenu when hovering over the parent item */
}



/* Arrow styling to indicate submenu direction */
.arrow-right {
    margin-left: 5px;
    font-size: 12px;
    vertical-align: middle;
}


/* Hide mobile arrow on desktop */
.desktop-arrow {
    display: inline; /* Show on desktop */
}

.mobile-arrow {
    display: none; /* Hide on desktop */
}










@keyframes dropdownFadeMasterpage {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}




.navbar-toggle-masterpage {
    background: none;
    border: none;
    color: white;
    font-size: 24px; /* Adjust the size as needed */
    cursor: pointer;
    margin-left: auto; /* Push it to the right */
    outline: none; /* Remove the default focus outline */
    display: none; /* Initially hidden */
}

.navbar-title-masterpage {
    color: white; /* Title text color */
    font-size: 24px; /* Adjust font size as needed */
    font-weight: bold; /* Make the font bold */
    position: absolute; /* Allow it to overlap correctly */
    left: 10px; /* Position the title on the left */
    top: 50%; /* Center it vertically */
    transform: translateY(-50%); /* Adjust for vertical centering */
    z-index: 1; /* Ensure it stays above other elements */
    display: none; /*  hide title */
    user-select: none; /* Prevent selection */
    cursor: default; /* Default cursor */
}

    /* Hover effect */
    .navbar-title-masterpage:hover {
        cursor: default; /* Change cursor to pointer on hover */
    }







/* Tablet Styles */
@media (min-width: 768px) and (max-width: 1024px) {
    .nav-list-masterpage li a {
        font-size: 0.95em; /* Slightly reduce font size */
        font-weight: 900; /* Numeric weight for bolder text */
        padding: 8px 12px; /* Reduce padding to fit more items */
    }

    .nav-list-masterpage li {
        margin: 0 10px; /* Reduce the space between list items */
    }
}

/* lower non-mobile resolutions Styles */
@media (min-width: 768px) and (max-width: 900px) {
    .nav-list-masterpage li a {
        font-size: 0.85em; /* Reduce font size further */
        font-weight: 900; /* Numeric weight for bolder text */
        padding: 7px 10px; /* Reduce padding more */
    }

    .nav-list-masterpage li {
        margin: 0 8px; /* Further reduce the space between items */
    }
}



/* Mobile Styles */
@media (max-width: 768px) {

    .navbar-title-masterpage {
        text-align: center; /* Keep the title centered */
        margin: 0; /* Remove margin for better alignment */
        position: absolute; /* Allow it to overlap correctly */
        left: 50%; /* Position at the center of the screen */
        transform: translateX(-50%); /* Adjust to center it properly */
        font-size: 20px; /* Adjust font size as needed */
        font-weight: bold; /* Make the font bold */
        color: lightgray; /* lightgray */
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* Optional shadow for depth */
        top: 50%; /* Adjust this value to vertically center */
        transform: translate(-50%, -50%); /* Adjust to center it properly */
        display: block; /*  show title */
        user-select: none; /* Prevent selection */
        cursor: default; /* Default cursor */
    }

        /* Hover effect */
        .navbar-title-masterpage:hover {
            cursor: default; /* Change cursor to pointer on hover */
        }


        /* Hover effect */
        .navbar-title-masterpage.page-title:hover {
            cursor: default; /* Change cursor to pointer on hover */
        }

    .navbar-container-masterpage {
        height: 50px; /* Reduced navbar height for mobile */
        max-width: 100vw; /* Prevent overflow */
    }

    /* Adjusted styles for the navbar toggle button on mobile */
    .navbar-toggle-masterpage {
        display: block; /* Show the toggle button in mobile view */
        background: none;
        border: none;
        color: white;
        font-size: 28px; /* Adjust the size as needed */
        cursor: pointer;
        position: absolute; /* Ensure it stays on the right */
        right: 10px; /* Position it at the right with some spacing */
        top: 50%; /* Align it vertically */
        transform: translateY(-50%); /* Adjust for centering */
        outline: none; /* Remove the default focus outline */
    }

        /* Additional styles to remove focus outline and border when clicked or focused */
        .navbar-toggle-masterpage:focus,
        .navbar-toggle-masterpage:active {
            outline: none; /* Remove outline */
            border: none; /* Ensure no border */
            box-shadow: none; /* Remove any box-shadow */
        }



    /* Nav list for mobile */
    .nav-list-masterpage {
        flex-direction: column;
        align-items: center; /* Center items horizontally */
        display: flex;
        width: 100%;
        background-color: #0B1014; /* Match navbar background */
        transition: max-height 0.3s ease; /* Smooth appearance */
        padding: 0; /* Remove padding */
        box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.5); /* Dropdown shadow */
        position: absolute;
        top: 50px; /* Align below navbar */
        left: 0;
        z-index: 1000; /* Ensure dropdowns appear above other content */
        max-height: 0; /* Initially hidden */
        overflow: hidden;
        max-width: 100vw; /* Prevent overflow */
    }

        /* Active class to show the nav list with sliding effect */
        .nav-list-masterpage.active {
            max-height: 300px; /* Maximum height for the dropdown when visible */
            overflow-y: auto; /* Enable scrolling if needed */
        }

        .nav-list-masterpage li {
            margin: 5px 0; /* Reduced spacing between items */
        }

            .nav-list-masterpage li a {
                text-align: center; /* Center text in mobile view */
                padding: 8px 10px; /* Adjusted padding for a more compact look */
                font-size: 0.9em; /* Smaller font size for menu items */
                border-bottom: 1px solid #444; /* Item separation */
                height: auto; /* Allow height to adjust automatically */
            }

            .nav-list-masterpage li:last-child a {
                border-bottom: none; /* Remove border from last item */
            }


            /* Separate mobile dropdown style */

            .nav-list-masterpage li .arrow {
                margin-left: 3px; /* Adjust margin for the down arrow */
                vertical-align: middle; /* Align with text */
            }



    .hidden-bottom-area {
        margin-bottom: 0px;
    }

    .dropdown-toggle-masterpage::after {
        content: none; /* Remove the hoverable area for mobile */
    }


    /* Separate mobile dropdown style */
    .submenu-dropdown {
        display: none; /* Initially hidden */
        height: auto;
        position: static; /* Align with other items */
        background-color: #333; /* Mobile dropdown background */
        width: max-content; /* Adjust to fit the longest item */
        padding: 0; /* No padding */
        overflow: hidden;
        top: 100%; /* Place below the parent item */
        left: 0;
        z-index: 1000; /* Higher than nav list */
    }


        .submenu-dropdown li {
            margin: 0; /* Remove gaps between list items */
            padding: 0; /* Remove default padding for list items */
        }

            .submenu-dropdown li a {
                display: block; /* Make the link occupy the entire menu row */
                padding: 10px 20px; /* Space inside the row */
                color: lightgray; /* Text color */
                text-align: center; /* Center-align text */
                text-decoration: none; /* Remove underline */
                white-space: nowrap; /* Prevent text wrapping */
                transition: background-color 0.3s ease; /* Smooth hover effect */
                height: 100%; /* Ensure full height coverage */
                box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3);
                border-radius: 8px;
            }




    .child-dropdown {
        opacity: 1; /* Set opacity to 1 when visible */
        display: none; /* Hide child menu on mobile */
        background: linear-gradient(135deg, #2a2a3b, #1a1a2b); /* Softer gradient for mobile */
        border: 1px solid #444455; /* Slightly darker border */
        padding: 0; /* No padding around the dropdown */
        width: auto; /* Auto width for smaller screens */
        margin: 0; /* Align closely to parent menu */
        top: 100%; /* Position below the parent */
        left: 0; /* Align to the left of the parent menu */
        z-index: 1050; /* Ensure it appears above other elements */
        list-style: none; /* Remove bullet points */
    }

        .child-dropdown li {
            margin: 0; /* Remove gaps between list items */
            padding: 0; /* Remove default padding for list items */
        }

            .child-dropdown li a {
                display: block; /* Make the link occupy the entire menu row */
                padding: 10px 20px; /* Space inside the row */
                color: lightgray; /* Text color */
                text-align: center; /* Center-align text */
                text-decoration: none; /* Remove underline */
                white-space: nowrap; /* Prevent text wrapping */
                transition: none; /* Smooth hover effect */
                height: 100%; /* Ensure full height coverage */
            }


    .desktop-arrow {
        display: none; /* Hide on mobile */
    }



    .mobile-arrow {
        display: inline; /* Show on mobile */
        font-weight: bold; /* Make + symbol bold */
        color: red; /* Change color to red */
        margin-left: 5px; /* Add gap between text and + symbol */
    }

        /* Bold and cyan color for - symbol */
        .mobile-arrow.active {
            font-weight: bold; /* Make - symbol bold */
            color: cyan; /* Change color to cyan */
            margin-left: 5px; /* Add gap between text and - symbol */
        }


    /* When open, height is auto */
    .submenu-parent.open {
        z-index: 1050; /* Ensure it's above other elements */
    }

    /* Disable Mousehover for mobile screens */
    .submenu-parent:not(.no-dropdown-animation):hover > .submenu-dropdown {
        display: none;
    }

    .no-dropdown-animation:hover > .submenu-dropdown {
        display: none; /* hide */
    }




}

/* Mobile Styles */
@media (max-width: 480px) {

    /* Ensure all titles are 16px on mobile, including the homepage */
    .navbar-title-masterpage {
        font-size: 16px; /* Set a smaller font size for all pages, including the homepage */
        color: lightgray; /* Change title color to light gray */
    }
}