#topnav {
    position: fixed;
    inset-inline-start: 0px;
    inset-inline-end: 0px;
    top: 0px;
    z-index: 999;
    border-width: 0px;
    background-color: transparent;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}

#topnav .logo {
    --tw-text-opacity: 1 !important;
    color: rgb(22 28 45 / var(--tw-text-opacity)) !important;
}

:is([dir="ltr"] #topnav .logo) {
    float: left !important;
}

:is([dir="rtl"] #topnav .logo) {
    float: right !important;
}

:is(.dark #topnav .logo) {
    --tw-text-opacity: 1 !important;
    color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
}

#topnav .logo:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

#topnav .has-submenu {
    position: relative;
}

#topnav .has-submenu.active a {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

:is(.dark #topnav .has-submenu.active a) {
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity));
}

#topnav .has-submenu.active .submenu li.active > a {
    --tw-text-opacity: 1 !important;
    color: rgb(79 70 229 / var(--tw-text-opacity)) !important;
}

:is(.dark #topnav .has-submenu.active .submenu li.active > a) {
    --tw-text-opacity: 1 !important;
    color: rgb(79 70 229 / var(--tw-text-opacity)) !important;
}

#topnav .has-submenu.active.active .menu-arrow {
    --tw-border-opacity: 1;
    border-color: rgb(79 70 229 / var(--tw-border-opacity));
}

:is(.dark #topnav .has-submenu.active.active .menu-arrow) {
    --tw-border-opacity: 1;
    border-color: rgb(79 70 229 / var(--tw-border-opacity));
}

#topnav .has-submenu .submenu .submenu-arrow {
    border-width: 0px 0.125rem 0.125rem 0px;
    position: absolute;
    inset-inline-end: 1.25rem;
    top: 15px;
    display: inline-block;
    border-radius: 0.5px;
    --tw-border-opacity: 1;
    border-color: rgb(22 28 45 / var(--tw-border-opacity));
    padding: 2px;
}

:is([dir="ltr"] #topnav .has-submenu .submenu .submenu-arrow) {
    --tw-rotate: -45deg;
    -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

:is([dir="rtl"] #topnav .has-submenu .submenu .submenu-arrow) {
    --tw-rotate: 135deg;
    -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

:is(.dark #topnav .has-submenu .submenu .submenu-arrow) {
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255 / var(--tw-border-opacity));
}

#topnav .has-submenu .submenu .has-submenu:hover {
    /* .submenu-arrow {
      @apply border-indigo-600 dark:border-indigo-600;
    } */
}

#topnav .has-submenu .submenu .has-submenu:hover > .submenu-arrow {
    --tw-border-opacity: 1;
    border-color: rgb(79 70 229 / var(--tw-border-opacity));
}

:is(.dark #topnav .has-submenu .submenu .has-submenu:hover > .submenu-arrow) {
    --tw-border-opacity: 1;
    border-color: rgb(79 70 229 / var(--tw-border-opacity));
}

#topnav .has-submenu .submenu .has-submenu .submenu .has-submenu:hover .submenu-arrow {
    --tw-border-opacity: 1;
    border-color: rgb(79 70 229 / var(--tw-border-opacity));
}

:is(.dark #topnav .has-submenu .submenu .has-submenu .submenu .has-submenu:hover .submenu-arrow) {
    --tw-border-opacity: 1;
    border-color: rgb(79 70 229 / var(--tw-border-opacity));
}

#topnav .has-submenu .submenu .has-submenu .submenu .has-submenu:hover > .submenu-arrow {
    --tw-border-opacity: 1;
    border-color: rgb(79 70 229 / var(--tw-border-opacity));
}

:is(.dark #topnav .has-submenu .submenu .has-submenu .submenu .has-submenu:hover > .submenu-arrow) {
    --tw-border-opacity: 1;
    border-color: rgb(79 70 229 / var(--tw-border-opacity));
}

#topnav .navigation-menu > li .submenu li {
    position: relative;
    -webkit-margin-start: 0px;
    margin-inline-start: 0px;
}

#topnav .navbar-toggle {
    position: relative;
    margin: 0px;
    cursor: pointer;
    border-width: 0px;
    padding: 0px;
}

#topnav .navbar-toggle .lines {
    position: relative;
    margin-top: 30px;
    -webkit-margin-end: 0px;
    margin-inline-end: 0px;
    margin-bottom: 26px;
    -webkit-margin-start: 10px;
    margin-inline-start: 10px;
    display: block;
    height: 18px;
    width: 25px;
}

#topnav .navbar-toggle span {
    -webkit-transition: -webkit-transform 0.5s ease;
    transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
    transition: transform 0.5s ease, -webkit-transform 0.5s ease;
    margin-bottom: 5px;
    display: block;
    height: 2px;
    width: 100%;
    --tw-bg-opacity: 1;
    background-color: rgb(22 28 45 / var(--tw-bg-opacity));
}

:is(.dark #topnav .navbar-toggle span) {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

#topnav .navbar-toggle span:last-child {
    margin-bottom: 0px;
}

#topnav .navbar-toggle.open span {
    position: absolute;
}

#topnav .navbar-toggle.open span:first-child {
    top: 6px;
    --tw-rotate: 45deg;
    -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

#topnav .navbar-toggle.open span:nth-child(2) {
    visibility: hidden;
}

#topnav .navbar-toggle.open span:last-child {
    top: 6px;
    width: 100%;
    --tw-rotate: -45deg;
    -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

#topnav .navbar-toggle.open span:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(79 70 229 / var(--tw-bg-opacity));
}

#topnav .navbar-toggle:hover, #topnav .navbar-toggle:focus,
#topnav .navbar-toggle .navigation-menu > li > a:hover {
    background-color: transparent;
}

#topnav .buy-button {
    line-height: 74px;
}

:is([dir="ltr"] #topnav .buy-button) {
    float: right;
}

:is([dir="rtl"] #topnav .buy-button) {
    float: left;
}

#topnav .buy-button > li {
    line-height: initial;
}

#topnav .buy-button .login-btn-primary,
#topnav .buy-button .btn-icon-dark {
    display: none;
}

#topnav .buy-button .login-btn-light,
#topnav .buy-button .btn-icon-light {
    display: inline-block;
}

#topnav .buy-button .search-bar .menu-search form {
    position: relative;
}

#topnav .buy-button .search-bar .searchform::after {
    pointer-events: none;
    position: absolute;
    inset-inline-end: 14px;
    top: 14px;
    font-size: 1.25rem;
    content: var(--tw-content);
    line-height: 1.25rem;
}

#topnav .buy-button .search-bar .searchform input[type=text] {
    display: block !important;
    height: 2.75rem !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    -webkit-padding-end: 42px !important;
    padding-inline-end: 42px !important;
    -webkit-padding-start: 0.75rem !important;
    padding-inline-start: 0.75rem !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    --tw-shadow: 0 0 #0000 !important;
    --tw-shadow-colored: 0 0 #0000 !important;
    -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
    outline: 2px solid transparent !important;
    outline-offset: 2px !important;
}

#topnav .buy-button .search-bar .searchform input[type=submit] {
    display: none;
}

#topnav .buy-button .search-bar .searchform:after {
    content: "󰍉";
    font-family: "Material Design Icons";
}

#topnav .buy-button .dropdown .dropdown-toggle::after,
#topnav .buy-menu-btn .dropdown .dropdown-toggle::after {
    content: var(--tw-content);
    display: none;
}

#topnav .navigation-menu {
    margin: 0px;
    list-style-type: none;
    padding: 0px;
}

#topnav .navigation-menu > li {
    position: relative;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 10px;
    margin-right: 10px;
    display: block;
}

:is([dir="ltr"] #topnav .navigation-menu > li) {
    float: left;
}

:is([dir="rtl"] #topnav .navigation-menu > li) {
    float: right;
}

#topnav .navigation-menu > li > a {
    display: block !important;
    background-color: transparent !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    line-height: 1.5rem !important;
    letter-spacing: 1px !important;
    --tw-text-opacity: 1 !important;
    color: rgb(22 28 45 / var(--tw-text-opacity)) !important;
}

:is(.dark #topnav .navigation-menu > li > a) {
    --tw-text-opacity: 1 !important;
    color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
}

#topnav .navigation-menu > li > a:hover, #topnav .navigation-menu > li > a:active {
    --tw-text-opacity: 1;
    color: rgb(79 70 229 / var(--tw-text-opacity));
}

#topnav .navigation-menu > li:hover > a, #topnav .navigation-menu > li.active > a {
    --tw-text-opacity: 1 !important;
    color: rgb(79 70 229 / var(--tw-text-opacity)) !important;
}

:is(.dark #topnav .navigation-menu > li:hover > a), :is(.dark  #topnav .navigation-menu > li.active > a) {
    --tw-text-opacity: 1 !important;
    color: rgb(79 70 229 / var(--tw-text-opacity)) !important;
}

#topnav .navigation-menu > li .submenu.megamenu li .megamenu-head {
    white-space: nowrap !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    font-size: 0.75rem !important;
    line-height: 1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    --tw-text-opacity: 1 !important;
    color: rgb(148 163 184 / var(--tw-text-opacity)) !important;
}

#topnav .navigation-menu .has-submenu .menu-arrow {
    border-width: 0 2px 2px 0;
    position: absolute;
    inset-inline-end: 0px;
    top: 2rem;
    display: inline-block;
    --tw-rotate: 45deg;
    -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    border-radius: 0.5px;
    --tw-border-opacity: 1;
    border-color: rgb(22 28 45 / var(--tw-border-opacity));
    padding: 2px;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}

:is(.dark #topnav .navigation-menu .has-submenu .menu-arrow) {
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255 / var(--tw-border-opacity));
}

#topnav .navigation-menu .has-submenu:hover .menu-arrow {
    --tw-rotate: 225deg;
    -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

:is([dir="ltr"] #topnav .menu-extras) {
    float: right;
}

:is([dir="rtl"] #topnav .menu-extras) {
    float: left;
}

#topnav.scroll {
    border-style: none;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    --tw-shadow: 0 0 3px rgb(60 72 88 / 0.15);
    --tw-shadow-colored: 0 0 3px var(--tw-shadow-color);
    -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

:is(.dark #topnav.scroll) {
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity));
}

#topnav.scroll .navigation-menu > li > a {
    --tw-text-opacity: 1;
    color: rgb(22 28 45 / var(--tw-text-opacity));
}

:is(.dark #topnav.scroll .navigation-menu > li > a) {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

#topnav.scroll .navigation-menu > li > .menu-arrow {
    --tw-border-opacity: 1;
    border-color: rgb(22 28 45 / var(--tw-border-opacity));
}

:is(.dark #topnav.scroll .navigation-menu > li > .menu-arrow) {
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255 / var(--tw-border-opacity));
}

#topnav.scroll .navigation-menu > li:hover > a, #topnav.scroll .navigation-menu > li.active > a {
    --tw-text-opacity: 1;
    color: rgb(79 70 229 / var(--tw-text-opacity));
}

#topnav.scroll .navigation-menu > li:hover > .menu-arrow, #topnav.scroll .navigation-menu > li.active > .menu-arrow {
    --tw-border-opacity: 1;
    border-color: rgb(79 70 229 / var(--tw-border-opacity));
}

:is(.dark #topnav.scroll .navigation-menu > li:hover > .menu-arrow), :is(.dark  #topnav.scroll .navigation-menu > li.active > .menu-arrow) {
    --tw-border-opacity: 1;
    border-color: rgb(79 70 229 / var(--tw-border-opacity));
}

#topnav.defaultscroll.dark-menubar .logo {
    line-height: 70px;
}

#topnav.defaultscroll.scroll .logo {
    line-height: 62px;
}

#topnav.nav-sticky {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    --tw-shadow: 0 0 3px rgb(60 72 88 / 0.15);
    --tw-shadow-colored: 0 0 3px var(--tw-shadow-color);
    -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

:is(.dark #topnav.nav-sticky) {
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity));
    --tw-shadow-color: #1f2937;
    --tw-shadow: var(--tw-shadow-colored);
}

#topnav.nav-sticky .navigation-menu.nav-light > li > a {
    --tw-text-opacity: 1;
    color: rgb(22 28 45 / var(--tw-text-opacity));
}

:is(.dark #topnav.nav-sticky .navigation-menu.nav-light > li > a) {
    --tw-text-opacity: 1 !important;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

#topnav.nav-sticky .navigation-menu.nav-light > li.active > a {
    --tw-text-opacity: 1 !important;
    color: rgb(79 70 229 / var(--tw-text-opacity));
}

:is(.dark #topnav.nav-sticky .navigation-menu.nav-light > li.active > a) {
    --tw-text-opacity: 1 !important;
    color: rgb(79 70 229 / var(--tw-text-opacity));
}

#topnav.nav-sticky .navigation-menu.nav-light > li:hover > .menu-arrow, #topnav.nav-sticky .navigation-menu.nav-light > li.active > .menu-arrow {
    --tw-border-opacity: 1 !important;
    border-color: rgb(79 70 229 / var(--tw-border-opacity)) !important;
}

#topnav.nav-sticky .navigation-menu.nav-light > li:hover > a, #topnav.nav-sticky .navigation-menu.nav-light > li.active > a {
    --tw-text-opacity: 1 !important;
    color: rgb(79 70 229 / var(--tw-text-opacity)) !important;
}

:is(.dark #topnav.nav-sticky .navigation-menu.nav-light > li:hover > a), :is(.dark  #topnav.nav-sticky .navigation-menu.nav-light > li.active > a) {
    --tw-text-opacity: 1 !important;
    color: rgb(79 70 229 / var(--tw-text-opacity)) !important;
}

#topnav.nav-sticky .navigation-menu.nav-light .has-submenu .menu-arrow {
    --tw-border-opacity: 1;
    border-color: rgb(22 28 45 / var(--tw-border-opacity));
}

:is(.dark #topnav.nav-sticky .navigation-menu.nav-light .has-submenu .menu-arrow) {
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255 / var(--tw-border-opacity));
}

#topnav.nav-sticky.tagline-height {
    top: 0px !important;
}

#topnav.nav-sticky .buy-button .login-btn-primary,
#topnav.nav-sticky .buy-button .btn-icon-dark {
    display: inline-block;
}

#topnav.nav-sticky .buy-button .login-btn-light,
#topnav.nav-sticky .buy-button .btn-icon-light {
    display: none;
}

#topnav.nav-sticky .logo .l-dark {
    display: inline-block;
}

#topnav.nav-sticky .logo .l-light {
    display: none;
}

.logo {
    -webkit-margin-end: 15px;
    margin-inline-end: 15px;
    -webkit-padding-end: 15px;
    padding-inline-end: 15px;
    padding-top: 0px;
    padding-bottom: 0px;
    font-size: 24px;
    font-weight: 700;
    line-height: 68px;
    letter-spacing: 1px;
}

@media (min-width: 1025px) {
    #topnav .navigation-menu > li .submenu.megamenu {
        width: 1120px !important;
    }
}

@media screen and (max-width: 1024px) and (min-width: 992px) {
    #topnav .navigation-menu > li .submenu.megamenu {
        width: 936px !important;
    }
}

@media (min-width: 992px) {
    #topnav .navigation-menu {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    #topnav .navigation-menu.justify-end li:last-child {
        -webkit-margin-end: 0px;
        margin-inline-end: 0px;
    }

    #topnav .navigation-menu.justify-end li:last-child .sub-menu-item {
        -webkit-padding-end: 0px !important;
        padding-inline-end: 0px !important;
    }

    #topnav .navigation-menu.justify-start > li:first-child {
        -webkit-margin-start: 0px;
        margin-inline-start: 0px;
    }

    #topnav .navigation-menu.justify-start > li:first-child .sub-menu-item {
        -webkit-padding-start: 0px !important;
        padding-inline-start: 0px !important;
    }

    #topnav .navigation-menu > .has-submenu:hover .menu-arrow {
        top: 34px !important;
    }

    #topnav .navigation-menu > .has-submenu.active .menu-arrow {
        top: 2rem;
    }

    #topnav .navigation-menu > li .submenu {
        -webkit-transition: all 0.2s ease;
        transition: all 0.2s ease;
        visibility: hidden;
        position: absolute;
        top: 100%;
        inset-inline-start: 0px;
        z-index: 1000;
        margin-top: 10px;
        min-width: 180px;
        list-style-type: none;
        border-radius: 0.375rem;
        --tw-bg-opacity: 1;
        background-color: rgb(255 255 255 / var(--tw-bg-opacity));
        padding-top: 15px;
        padding-bottom: 15px;
        padding-left: 0px;
        padding-right: 0px;
        opacity: 0;
        --tw-shadow: 0 0 3px rgb(60 72 88 / 0.15);
        --tw-shadow-colored: 0 0 3px var(--tw-shadow-color);
        -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    }

    :is(.dark #topnav .navigation-menu > li .submenu) {
        --tw-bg-opacity: 1;
        background-color: rgb(15 23 42 / var(--tw-bg-opacity));
        --tw-shadow-color: #1f2937;
        --tw-shadow: var(--tw-shadow-colored);
    }

    #topnav .navigation-menu > li .submenu li {
        position: relative;
    }

    #topnav .navigation-menu > li .submenu li a {
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
        clear: both;
        display: block;
        white-space: nowrap;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        line-height: 17px;
        letter-spacing: 0.04em;
        --tw-text-opacity: 1;
        color: rgb(22 28 45 / var(--tw-text-opacity));
    }

    :is(.dark #topnav .navigation-menu > li .submenu li a) {
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity));
    }

    #topnav .navigation-menu > li .submenu li a:hover {
        --tw-text-opacity: 1 !important;
        color: rgb(79 70 229 / var(--tw-text-opacity)) !important;
    }

    :is(.dark #topnav .navigation-menu > li .submenu li a:hover) {
        --tw-text-opacity: 1 !important;
        color: rgb(79 70 229 / var(--tw-text-opacity)) !important;
    }

    #topnav .navigation-menu > li .submenu li ul {
        margin: 0px;
        list-style-type: none;
        -webkit-padding-start: 0px;
        padding-inline-start: 0px;
    }

    #topnav .navigation-menu > li .submenu.megamenu {
        position: fixed;
        inset-inline-start: 50%;
        top: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        white-space: nowrap;
    }

    :is([dir="ltr"] #topnav .navigation-menu > li .submenu.megamenu) {
        --tw-translate-x: -50%;
        -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }

    :is([dir="rtl"] #topnav .navigation-menu > li .submenu.megamenu) {
        --tw-translate-x: 50%;
        -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }

    #topnav .navigation-menu > li .submenu.megamenu > li {
        width: 20%;
        overflow: hidden;
        vertical-align: top;
    }

    #topnav .navigation-menu > li .submenu.megamenu > li .submenu {
        inset-inline-start: 100%;
        top: 0px;
        -webkit-margin-start: 10px;
        margin-inline-start: 10px;
        margin-top: -1px;
    }

    #topnav .navigation-menu > li .submenu > li .submenu {
        inset-inline-start: 101%;
        top: 0px;
        -webkit-margin-start: 10px;
        margin-inline-start: 10px;
        margin-top: -1px;
    }

    #topnav .navigation-menu > li > a {
        min-height: 62px;
        padding-top: 25px;
        padding-bottom: 25px;
    }

    #topnav .navigation-menu > li:hover > .menu-arrow {
        --tw-border-opacity: 1;
        border-color: rgb(79 70 229 / var(--tw-border-opacity));
    }

    :is(.dark #topnav .navigation-menu > li:hover > .menu-arrow) {
        --tw-border-opacity: 1;
        border-color: rgb(79 70 229 / var(--tw-border-opacity));
    }

    #topnav .navigation-menu > li:hover > a, #topnav .navigation-menu > li.active > a {
        --tw-text-opacity: 1;
        color: rgb(79 70 229 / var(--tw-text-opacity));
    }

    :is(.dark #topnav .navigation-menu > li:hover > a), :is(.dark  #topnav .navigation-menu > li.active > a) {
        --tw-text-opacity: 1 !important;
        color: rgb(79 70 229 / var(--tw-text-opacity)) !important;
    }

    #topnav .navigation-menu > li.last-elements .submenu {
        inset-inline-start: auto;
        inset-inline-end: 0px;
    }

    #topnav .navigation-menu > li.last-elements .submenu::before {
        inset-inline-start: auto;
        content: var(--tw-content);
        inset-inline-end: 10px;
    }

    #topnav .navigation-menu > li.last-elements .submenu > li.has-submenu .submenu {
        inset-inline-start: auto;
        inset-inline-end: 100%;
        -webkit-margin-start: 0px;
        margin-inline-start: 0px;
        -webkit-margin-end: 10px;
        margin-inline-end: 10px;
    }

    #topnav .navigation-menu.nav-light > li > a {
        color: rgb(255 255 255 / 0.5);
    }

    #topnav .navigation-menu.nav-light > li.active > a {
        --tw-text-opacity: 1 !important;
        color: rgb(255 255 255 / var(--tw-text-opacity));
    }

    #topnav .navigation-menu.nav-light > li:hover > .menu-arrow {
        --tw-border-opacity: 1;
        border-color: rgb(255 255 255 / var(--tw-border-opacity));
    }

    #topnav .navigation-menu.nav-light > li:hover > a {
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity));
    }

    #topnav .navigation-menu.nav-light .has-submenu .menu-arrow {
        border-color: rgb(255 255 255 / 0.5);
    }

    #topnav .navigation-menu.nav-light .has-submenu.active .menu-arrow {
        --tw-border-opacity: 1;
        border-color: rgb(255 255 255 / var(--tw-border-opacity));
    }

    #topnav .buy-button {
        -webkit-margin-start: 15px;
        margin-inline-start: 15px;
        -webkit-padding-start: 15px;
        padding-inline-start: 15px;
    }

    #topnav .navbar-toggle {
        display: none;
    }

    #topnav #navigation {
        display: block !important;
    }

    #topnav.scroll {
        top: 0px;
    }

    #topnav.scroll .navigation-menu > li > a {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }

    #topnav.scroll-active .navigation-menu > li > a {
        padding-top: 25px;
        padding-bottom: 25px;
    }
}

@media (max-width: 991px) {
    #topnav {
        min-height: 74px;
        --tw-bg-opacity: 1;
        /*background-color: rgb(255 255 255 / var(--tw-bg-opacity));*/
        --tw-shadow: 0 0 3px rgb(60 72 88 / 0.15);
        --tw-shadow-colored: 0 0 3px var(--tw-shadow-color);
        -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    }

    :is(.dark #topnav) {
        --tw-bg-opacity: 1;
    }
    :is(.dark #topnav svg) {
        color: white;
    }
    :is(.dark #topnav.nav-sticky) {
        --tw-bg-opacity: 1;
        background-color: rgb(15 23 42 / var(--tw-bg-opacity));
        --tw-shadow-color: #1f2937;
        --tw-shadow: var(--tw-shadow-colored);
    }
    #topnav .container {
        width: auto;
    }

    #topnav #navigation {
        max-height: 400px;
        --tw-shadow: 0 0 3px rgb(60 72 88 / 0.15);
        --tw-shadow-colored: 0 0 3px var(--tw-shadow-color);
        -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    }

    #topnav .navigation-menu {
        float: none !important;
    }

    #topnav .navigation-menu > li {
        float: none !important;
    }

    #topnav .navigation-menu > li .submenu {
        margin: 0px;
        display: none;
        list-style-type: none;
        -webkit-padding-start: 1.25rem;
        padding-inline-start: 1.25rem;
    }

    #topnav .navigation-menu > li .submenu li a {
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
        position: relative !important;
        display: block !important;
        padding-top: 7px !important;
        padding-bottom: 7px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
        --tw-text-opacity: 1 !important;
        color: rgb(22 28 45 / var(--tw-text-opacity)) !important;
    }

    :is(.dark #topnav .navigation-menu > li .submenu li a) {
        --tw-text-opacity: 1 !important;
        color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
    }

    #topnav .navigation-menu > li .submenu.megamenu li .megamenu-head {
        padding-top: 7px;
        padding-bottom: 7px;
        padding-left: 15px;
        padding-right: 15px;
    }

    #topnav .navigation-menu > li .submenu.megamenu > li > ul {
        list-style-type: none;
        -webkit-padding-start: 0px;
        padding-inline-start: 0px;
    }

    #topnav .navigation-menu > li .submenu.megamenu > li > ul > li > span {
        position: relative;
        display: block;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 15px;
        padding-right: 15px;
        font-size: 0.75rem;
        line-height: 1rem;
        text-transform: uppercase;
        letter-spacing: 2px;
        --tw-text-opacity: 1;
        color: rgb(226 232 240 / var(--tw-text-opacity));
    }

    #topnav .navigation-menu > li .submenu.open {
        display: block;
    }

    #topnav .navigation-menu > li .submenu .submenu {
        display: none;
        list-style-type: none;
    }

    #topnav .navigation-menu > li .submenu .submenu.open {
        display: block;
    }

    #topnav .navigation-menu > li > a {
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 20px;
        padding-right: 20px;
        --tw-text-opacity: 1;
        color: rgb(22 28 45 / var(--tw-text-opacity));
    }

    #topnav .navigation-menu > li > a::after {
        position: absolute;
        content: var(--tw-content);
        inset-inline-end: 15px;
    }

    :is(.dark #topnav .navigation-menu > li > a) {
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity));
    }

    #topnav .navigation-menu > li > a:hover,
    #topnav .navigation-menu > li .submenu li a:hover, #topnav .navigation-menu > li.has-submenu.open > a {
        --tw-text-opacity: 1;
        color: rgb(79 70 229 / var(--tw-text-opacity));
    }

    #topnav .menu-extras .menu-item {
        --tw-border-opacity: 1;
        border-color: rgb(229 231 235 / var(--tw-border-opacity));
    }

    :is(.dark #topnav .menu-extras .menu-item) {
        --tw-border-opacity: 1;
        border-color: rgb(55 65 81 / var(--tw-border-opacity));
    }

    :is([dir="ltr"] #topnav .navbar-header) {
        float: left;
    }

    :is([dir="rtl"] #topnav .navbar-header) {
        float: right;
    }

    #topnav .buy-button .login-btn-primary,
    #topnav .buy-button .btn-icon-dark {
        display: inline-block !important;
    }

    #topnav .buy-button .login-btn-light,
    #topnav .buy-button .btn-icon-light {
        display: none;
    }

    #topnav .has-submenu .submenu .submenu-arrow {
        position: absolute;
        inset-inline-end: 1.25rem;
        top: 0.75rem;
        --tw-rotate: 45deg;
        -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }

    #topnav .has-submenu.active a {
        --tw-text-opacity: 1;
        color: rgb(79 70 229 / var(--tw-text-opacity));
    }

    #navigation {
        position: absolute;
        top: 74px;
        inset-inline-start: 0px;
        display: none;
        height: auto;
        width: 100%;
        overflow: auto;
        --tw-bg-opacity: 1;
        background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    }

    :is(.dark #navigation) {
        --tw-bg-opacity: 1;
        background-color: rgb(15 23 42 / var(--tw-bg-opacity));
    }

    #navigation.open {
        display: block;
        overflow-y: auto;
    }
}

@media (max-width: 768px) {
    #topnav .navigation-menu .has-submenu .menu-arrow {
        inset-inline-end: 0.5rem;
        top: 1rem;
    }
}

@media (min-width: 768px) {
    #topnav .navigation-menu > li.has-submenu:hover > .submenu {
        visibility: visible;
        margin-top: 0px;
        opacity: 1;
    }

    #topnav .navigation-menu > li.has-submenu:hover > .submenu > li.has-submenu:hover > .submenu {
        visibility: visible;
        -webkit-margin-start: 0px;
        margin-inline-start: 0px;
        opacity: 1;
    }

    #topnav .navigation-menu > li.has-submenu:hover > .submenu > li.has-submenu:hover > .submenu > li:hover > .submenu {
        visibility: visible;
        -webkit-margin-start: 0px;
        margin-inline-start: 0px;
        opacity: 1;
    }

    .navbar-toggle {
        display: block;
    }
}

@media (max-width: 425px) {
    #topnav .buy-menu-btn {
        margin-top: 0px !important;
        margin-bottom: 0px !important;
        margin-left: 10px !important;
        margin-right: 10px !important;
        display: block !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    #topnav .buy-menu-btn .dropdown .dropdown-menu.show {
        -webkit-transform: translate3d(0px, -54px, 0px) !important;
        transform: translate3d(0px, -54px, 0px) !important;
    }
}

.tagline {
    position: absolute;
    z-index: 99;
    width: 100%;
    padding-top: 13px;
    padding-bottom: 13px;
    padding-left: 0px;
    padding-right: 0px;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

@media screen and (max-width: 575px) {
    .tagline {
        display: none;
    }

    .tagline-height {
        top: 0px !important;
    }
}

@media (min-width: 576px) {
    .tagline-height {
        top: 47px !important;
    }
}

.sidebar-nav > .navbar-item:hover .navbar-link, .sidebar-nav > .navbar-item.active .navbar-link {
    --tw-text-opacity: 1;
    color: rgb(79 70 229 / var(--tw-text-opacity));
}

.sidebar-nav li.active a {
    --tw-text-opacity: 1;
    color: rgb(79 70 229 / var(--tw-text-opacity));
}

.sidebar-nav li.account-menu.active .navbar-link, .sidebar-nav li.account-menu:hover .navbar-link {
    --tw-text-opacity: 1 !important;
    color: rgb(79 70 229 / var(--tw-text-opacity)) !important;
}

:is(.dark .sidebar-nav li.account-menu.active .navbar-link), :is(.dark  .sidebar-nav li.account-menu:hover .navbar-link) {
    --tw-text-opacity: 1 !important;
    color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
}

/* Switcher */
html.dark #switcher-ball {
    margin-left: 24px;
}

.light #topnav:not(.nav-sticky) .navbar-toggle span {
    --tw-bg-opacity: 1;
}

.light #topnav:not(.nav-sticky) .l-dark {
    display: none;
}

.light #topnav:not(.nav-sticky) .l-light {
    display: inline-block;
}

.light #topnav:not(.nav-sticky) .login-btn-primary{
    background-color: white;
    border-radius: 50%;
}

.classic #topnav:not(.nav-sticky) .l-light {
    display: none;
}
.classic #topnav:not(.nav-sticky) .l-dark {
    display: inline-block;
}
.classic #topnav .navigation-menu.nav-light > li > a {
    --tw-text-opacity: 1;
    color: rgb(22 28 45 / var(--tw-text-opacity));
}

.classic #topnav.nav-sticky .navigation-menu.nav-light .has-submenu .menu-arrow {
    --tw-border-opacity: 1;
    border-color: rgb(22 28 45 / var(--tw-border-opacity));
}
.light #topnav.nav-sticky .navigation-menu.nav-light > li > a{
    --tw-text-opacity: 1;
    color: rgb(22 28 45/var(--tw-text-opacity));
}
.classic #topnav.nav-sticky .navigation-menu.nav-light > li:hover > a, .classic #topnav.nav-sticky .navigation-menu.nav-light > li.active > a {
    --tw-text-opacity: 1 !important;
    color: rgb(79 70 229 / var(--tw-text-opacity)) !important;
}

.classic #topnav.nav-sticky .navigation-menu.nav-light > li:hover > a, .classic #topnav.nav-sticky .navigation-menu.nav-light > li.active > a {
    --tw-text-opacity: 1 !important;
    color: rgb(79 70 229 / var(--tw-text-opacity)) !important;
}
.classic #topnav .navigation-menu .has-submenu .menu-arrow {
    border-color: rgb(22 28 45 / var(--tw-border-opacity));
}

@media (min-width: 992px) {
    .light:not(.classic) #topnav .navigation-menu.nav-light > li > a{
        color: rgb(255 255 255 / 0.5) !important;
    }
    .light:not(.classic) #topnav .navigation-menu.nav-light > li:hover > a {
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity));
    }
    .light:not(.classic) #topnav.nav-sticky .navigation-menu.nav-light > li:hover > a, #topnav.nav-sticky .navigation-menu.nav-light > li.active > a {
        --tw-text-opacity: 1 !important;
        color: rgb(79 70 229 / var(--tw-text-opacity)) !important;
    }
    .light:not(.classic) #topnav .navigation-menu.nav-light > li > a, .dark #topnav .navigation-menu.nav-light > li > a {
        color: rgb(255 255 255 / 0.5) !important;
    }
    .light:not(.classic) #topnav.nav-sticky .navigation-menu.nav-light > li > a{
        --tw-text-opacity: 1 !important;
        color: rgb(22 28 45 / var(--tw-text-opacity)) !important;
    }
    .light:not(.classic) #topnav .navigation-menu.nav-light > li:hover > a {
        --tw-text-opacity: 1 !important;
        color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
    }
    .dark #topnav .navigation-menu.nav-light > li:hover > a {
        --tw-text-opacity: 1 !important;
        color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
    }
}