.nav-new
{
    display: flex;
    width: auto;
    margin-top: 40px;
    margin-left: 40px;
    margin-right: 40px;
    justify-content: flex-start;
    align-items: center;
    gap: 24px;
}

/* <= 768px (SM) */
@media (max-width: 768px)
{
    .nav-new
    {
        margin-left: 16px;
        margin-right: 16px;
        margin-bottom: 56px;
    }
}

/* <= 576px (XS) */
@media (max-width: 576px)
{
    .nav-new
    {
        margin-top: 24px;
        margin-bottom: 40px;
        margin-left: 12px;
        margin-right: 12px;
        gap: 12px;
    }
}


.nav-new .nav-container
{
    display: inline-flex;
    border-radius: 64px;
    height: 64px;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding-left: 24px;
    padding-right: 24px;
}

.nav-new .nav-round-btn a
{
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 0;
}

.nav-new .nav-round-btn a img
{
    transition: transform 0.2s ease-in-out;
}

.nav-new .nav-round-btn a:hover img
{
    transform: scale(1.2);
}

.nav-new .logo
{
    display: inline-block;
    justify-content: flex-start;
}

.nav-new .links
{
    display: inline-flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 56px;
}

.nav-new .links a,
.nav-new .links .dropdown>a
{
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s ease-in-out;
    display: inline-block;
}

.nav-new .links a:hover,
.nav-new .links .dropdown>a:hover
{
    transform: scale(1.2);
}

/* <= 460px */
@media (max-width: 460px)
{
    .nav-new div.active ul.dropdown-menu.dropdown-menu-mobile li a
    {
        font-size: 24px !important;
    }
}

/* <= 576px (XS) */
@media (max-width: 576px)
{
    .nav-new div.active ul.dropdown-menu.dropdown-menu-mobile
    {
        margin: 0 !important;
        top: 0px;
        left: 0px;
        width: 100% !important;
        /* Prevent horizontal scroll */
        overflow-x: hidden;
        max-width: 100vw;
        box-sizing: border-box;
        border: none;
    }

    /* Add styles to prevent body scroll when mobile menu is open */
    body.nav-menu-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }
}

/* >= 576 (SM) and <= 768 (MD) */
@media (min-width: 576px) and (max-width: 768px)
{
    .nav-new div.active ul.dropdown-menu.dropdown-menu-mobile
    {
        margin: 0 !important;
        top: 0px;
        left: 0px;
        width: 100% !important;
    }
}

/* <= 992px (MD) */
@media (max-width: 992px)
{
    .nav-new div.active ul.dropdown-menu.dropdown-menu-mobile
    {
        position: fixed;
        top: 0px;
        right: 0px;
        margin: 0;
        margin-left: 50%;
        border-radius: 0 !important;
        width: 55%;
        height: 100%;
        z-index: 10000;
        display: flex;
        flex-flow: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 24px;
        padding-top: 40px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .nav-new div.active ul.dropdown-menu.dropdown-menu-mobile li a
    {
        font-size: 28px;
        margin-left: 0px;
        margin-right: 0px;
        padding: 12px 24px;
        height: auto;
        width: 100%;
    }

    .nav-new div.active ul.dropdown-menu.dropdown-menu-mobile li.close-btn
    {
        align-self: flex-end;
    }

    .nav-new .dropdown-submenu .submenu-menu
    {
        display: none;
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .nav-new .dropdown-submenu.active>.submenu-menu
    {
        display: block;
    }

    .nav-new .dropdown-menu-mobile .dropdown-submenu
    {
        display: block;
        position: relative;
        width: 100%;
    }

    .nav-new .dropdown-menu-mobile .dropdown-submenu>a.submenu-toggle
    {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        cursor: pointer;
        padding: 12px 24px;
        box-sizing: border-box;
    }

    /* Additional styles for text and icon alignment inside <a> */
    .nav-new .dropdown-menu-mobile li a,
    .nav-new .dropdown-menu-mobile li a span:not(.material-symbols-outlined)
    {
        display: inline-flex;
        align-items: center;
        vertical-align: middle;
    }

    /* Selector for text between icons */
    .nav-new .dropdown-menu-mobile li .submenu-toggle span:nth-child(2)
    {
        /* Pushes chevron to the right */
        margin-right: auto;
        /* Margin from the left icon */
        margin-left: 16px;
    }

    .nav-new .dropdown-submenu .submenu-menu li a
    {
        /* Slightly smaller font */
        font-size: 22px;
        /* Increased left padding for nesting */
        padding: 10px 24px 10px 80px;
        margin-top: 4px;
        margin-left: 0 !important;
        /* Reset outer margins */
        margin-right: 0 !important;
        /* Takes full width */
        width: 100% !important;
        box-sizing: border-box;
        /* Ensure no underline */
        text-decoration: none;
        /* Use flex for icon/text alignment */
        display: flex !important;
        align-items: center;
        /* Gap between icon and text */
        gap: 16px;
    }

    /* Margin for text to prevent overlapping with parent icons */
    .nav-new .dropdown-menu-mobile .dropdown-submenu .submenu-menu li a span:not(.material-symbols-outlined)
    {
        /* Reset if previously set, control through gap */
        margin-left: 0;
    }

    /* Initial state - closed */
    .nav-new .dropdown-menu-mobile .submenu-toggle .chevron
    {
        transition: transform 0.3s ease;
        transform: rotate(0deg);
        width: 24px;
        height: 24px;
    }

    .nav-new .dropdown-submenu.active>.submenu-toggle .chevron
    {
        /* Rotate when opened */
        transform: rotate(180deg);
    }

    /* Styles for THIRD level of mobile menu nesting */
    .dropdown-menu-mobile>li.dropdown-submenu>ul.submenu-menu>li.dropdown-submenu>ul.submenu-menu>li>a
    {
        margin-left: 24px !important;
    }

    /* Align mobile menu close button */
    .nav-new ul li.close-btn a
    {
        width: 75px !important;
    }
}

/* <= 1200px (XL) */
@media (max-width: 1200px)
{
    .nav-new .links
    {
        gap: 28px;
    }
}

/* Styles for desktop version of nested menus (from 992px and above) */
@media (min-width: 992px)
{

    /* Set relative positioning for submenu container */
    .nav-new .dropdown .dropdown-submenu
    {
        position: relative;
    }

    /* Submenu is hidden by default and positioned absolutely to the right of the parent item */
    .nav-new .dropdown .dropdown-submenu .submenu-menu.desktop
    {
        display: none;
        position: absolute;
        top: -16px;
        left: 100%;
        margin-left: 20px;
        /* <--- ADDED */
        backdrop-filter: blur(16px);
        /* <--- ADDED */
        -webkit-backdrop-filter: blur(16px);
        /* <--- ADDED */
        border-radius: 24px;
        padding: 16px;
        z-index: 1001;
        min-width: 348px;
        /* set width if needed */
    }

    /* When in open state (when active class is added) submenu is displayed */
    .nav-new .dropdown .dropdown-submenu.active .submenu-menu.desktop
    {
        display: block;
    }

    .nav-new .dropdown .dropdown-submenu .submenu-menu.desktop a
    {
        width: 100%;
        height: 48px;
        padding: 0 8px;
        font-size: 20px;
        font-weight: 600;
        line-height: 140%;
        border-radius: 64px;
        margin: 0px 0px 4px 0px;
    }
}

.nav-new .dropdown
{
    position: relative;
    display: inline-block;
}

.nav-new .dropdown-menu
{
    display: none;
    position: absolute;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 24px;
    padding: 16px;
    width: auto;
    top: 100%;
    right: -32px;
    margin-top: 12px;
    z-index: 10000;
}

.nav-new ul.submenu-menu.desktop
{
    margin-top: 0;
}

.nav-new .dropdown-menu li
{
    display: flex;
    align-items: center;
    /* Vertically centers */
    margin-bottom: 4px;
    /* spacing between items */
}

.nav-new .dropdown-menu li:last-child
{
    margin-bottom: 0;
    /* removes extra margin from the last item */
}

.nav-new .dropdown-menu a
{
    width: 100%;
    height: 48px;
    padding: 0 8px;
    text-decoration: none;
    font-size: 20px;
    font-weight: 600;
    line-height: 140%;
    border-radius: 64px;
    background-color: transparent;
    transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.nav-new .dropdown-menu a:hover
{
    transform: scale(1.05);
}

.nav-new .dropdown.active .dropdown-menu
{
    display: block;
}

.nav-new .dropdown a.dropdown-tgl
{
    display: inline-flex;
    align-items: center;
    /* Vertical alignment */
    gap: 5px;
    /* Gap between text and icon */
}

.nav-new ul li a
{
    display: flex !important;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
}

.nav-new .material-symbols-outlined
{
    font-size: 40px;
    width: 40px;
    height: 40px;
    line-height: 40px;
}

.nav-new .nav-container a.badge
{
    display: inline-block;
    font-weight: 500;
    border-radius: 32px;
    padding: 6px 11px;
}

.nav-new .nav-container div.links div.dropdown ul.dropdown-menu-mobile li a.badge {
    width: auto;
}