@media (min-width:1200px) {
    .navmenu {
        padding: 0
    }

        .navmenu ul {
            margin: 0;
            padding: 0;
            display: flex;
            list-style: none;
            align-items: center
        }

        .navmenu li {
            position: relative
        }

        .navmenu a, .navmenu a:focus {
            text-transform: capitalize;
            color: var(--nav-color);
            padding: 18px 15px;
            font-size: 16px;
            font-family: var(--nav-font);
            font-weight: 400;
            display: flex;
            align-items: center;
            justify-content: space-between;
            white-space: nowrap;
            transition: .3s
        }

            .navmenu a i, .navmenu a:focus i {
                font-size: 12px;
                line-height: 0;
                margin-left: 5px;
                transition: .3s
            }

        .navmenu li:last-child a {
            padding-right: 0
        }

        .navmenu .active, .navmenu .active:focus, .navmenu li:hover > a {
            color: var(--nav-hover-color)
        }

        .navmenu .dropdown ul {
            margin: 0;
            padding: 10px 0;
            background: var(--nav-dropdown-background-color);
            display: block;
            position: absolute;
            visibility: hidden;
            left: 14px;
            top: 130%;
            opacity: 0;
            transition: .3s;
            border-radius: 4px;
            z-index: 99;
            box-shadow: 0 0 30px rgba(0,0,0,.1)
        }

            .navmenu .dropdown ul li {
                min-width: 200px
            }

            .navmenu .dropdown ul a {
                padding: 10px 20px !important;
                font-size: 15px;
                text-transform: none;
                color: var(--nav-dropdown-color)
            }

                .navmenu .dropdown ul a i {
                    font-size: 12px
                }

                .navmenu .dropdown ul .active:hover, .navmenu .dropdown ul a:hover, .navmenu .dropdown ul li:hover > a {
                    color: var(--nav-dropdown-hover-color)
                }

        .navmenu .dropdown:hover > ul {
            opacity: 1;
            top: 100%;
            visibility: visible
        }

        .navmenu .dropdown .dropdown ul {
            top: 0;
            left: -90%;
            visibility: hidden
        }

        .navmenu .dropdown .dropdown:hover > ul {
            opacity: 1;
            top: 0;
            left: -100%;
            visibility: visible
        }
}

@media(max-width:1470px) and (min-width: 1330px) {
    .navmenu a, .navmenu a:focus {
        padding: 18px 8px !important;
    }
}

@media (max-width: 1330px) and (min-width: 1200px) {
    .navmenu a, .navmenu a:focus {
        padding: 9px 7px !important;
        font-size: 14px !important;
    }
}

@media (max-width:1330px) and (min-width:1200px) {
    .navmenu a, .navmenu a:focus {
        padding: 18px 9px !important
    }

    .navmenu .dropdown ul a {
        padding: 5px 20px !important
    }
}

@media (max-width:1199.98px) {
    #header .navmenu {
        order: 3;
        padding: 0
    }

    .navmenu {
        padding: 0;
        z-index: 9
    }

        .navmenu ul {
            display: none;
            list-style: none;
            position: absolute;
            inset: 60px 20px 20px 20px;
            padding: 10px 0;
            margin: 0;
            border-radius: 6px;
            background-color: var(--nav-mobile-background-color);
            border: 1px solid color-mix(in srgb,var(--default-color),transparent 90%);
            box-shadow: 0 0 30px rgba(0,0,0,.1);
            overflow-y: auto;
            transition: .3s;
            z-index: 9998
        }

        .navmenu a, .navmenu a:focus {
            color: var(--nav-dropdown-color);
            padding: 10px 20px;
            font-family: var(--nav-font);
            font-size: 17px;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: space-between;
            white-space: nowrap;
            transition: .3s
        }

            .navmenu a i, .navmenu a:focus i {
                font-size: 12px;
                line-height: 0;
                margin-left: 5px;
                width: 30px;
                height: 30px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                transition: .3s;
                background-color: color-mix(in srgb,var(--accent-color),transparent 90%)
            }

                .navmenu a i:hover, .navmenu a:focus i:hover {
                    background-color: var(--accent-color);
                    color: var(--contrast-color)
                }

            .navmenu .active, .navmenu .active:focus, .navmenu a:hover {
                color: var(--nav-dropdown-hover-color)
            }

                .navmenu .active i, .navmenu .active:focus i {
                    background-color: var(--accent-color);
                    color: var(--contrast-color);
                    transform: rotate(180deg)
                }

        .navmenu .dropdown ul {
            position: static;
            display: none;
            z-index: 99;
            padding: 10px 0;
            margin: 10px 20px;
            background-color: var(--nav-dropdown-background-color);
            transition: .5s ease-in-out
        }

            .navmenu .dropdown ul ul {
                background-color: rgba(33,37,41,.1)
            }

        .navmenu .dropdown > .dropdown-active {
            display: block;
            background-color: rgba(33,37,41,.03)
        }

    .mobile-nav-active {
        overflow: hidden
    }

        .mobile-nav-active .mobile-nav-toggle {
            color: #fff;
            position: absolute;
            font-size: 32px;
            top: 15px;
            right: 15px;
            margin-right: 0;
            z-index: 9999
        }

        .mobile-nav-active .navmenu {
            position: fixed;
            overflow: hidden;
            inset: 0;
            background: rgba(33,37,41,.8);
            transition: .3s
        }

            .mobile-nav-active .navmenu > ul {
                display: block
            }
}