* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

nav {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 999;
    /* height: 65px; */
    line-height: 65px;
}

nav .wrapper {
    /*  max-width: 1515px;*/
     margin: 0 auto;
     padding: 0 20px;
     display: flex;
     align-items: center;
     justify-content: space-between;
}


.Users {
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: 20px;
    margin-top: -10px;
}

.Users2 {
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: 20px;
    margin-top: 0px;
}

.Users img {
    width: 35px;
    height: 35px;
    border-radius: 100%;
    cursor: pointer;
}

@media (max-width:440px) {
    .Logo-icon {
        font-size: 18px !important;
    }
}

@media(min-width:993px) and (max-width:1116px) {
    .nav-links li:hover .other-drop, .product-drop {
        position: absolute;
        left: 341px;
        right: auto;
        opacity: 1;
        visibility: visible;
        width: 420px !important;
    }
}

@media screen and (max-width: 992px) {
    .drop-menu.mas-drop,
    .drop-menu.tran-drop,
    .drop-menu.report-drop {
        display: none;
        flex-direction: column;
        padding: 10px;
    }

.drop-menu.mas-drop.show-mobile-menu,
.drop-menu.report-drop.show-mobile-menu,
.drop-menu.tran-drop.show-mobile-menu {
    display: flex;
    max-height: 100%;
}
}

.nav-links li {
    list-style: none;
}

.wrapper .logo a {
    color: #f2f2f2;
    text-decoration: none;
    font-size: 27px;
    font-weight: 600;
}

.wrapper .nav-links {
    display: inline-flex;
    align-items: center;
    margin-left: 47px;
}

.nav-links li a {
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    padding: 2px 10px;
    border-radius: 0px;
    color: #fff;
    /* transition: all 0.3s ease;*/
}

    .nav-links li a:hover {
        background: #EEEEEE;
        color: black;
    }

.nav-links .drop-menu {
    background: #F5F7F8;
    width: 180px;
    top: 85px;
    line-height: 32px;
    position: absolute;
    opacity: 0;
    visibility: hidden;
}

.report-drop {
    width: 288px !important;
}

@media (min-width:992px) {
    .report-drop {
        padding: 5px;
    }
}


.drop-menu.tran-drop.show {
    display: flex;
    flex-direction: column;
    visibility: visible;
    opacity: 1;
    top: 68px;
    position: absolute;
    /* left: 524px;*/
    z-index: 999;
}

.drop-menu.report-drop.show {
    display: flex;
    flex-direction: column;
    visibility: visible;
    opacity: 1;
    top: 68px;
    position: absolute;
    z-index: 999;
}

.drop-menu.tran-drop li,
.drop-menu.report-drop li {
    padding: 5px 12px;
    white-space: nowrap;
}


[data-role="admin"] .drop-menu.tran-drop.show {
    left: 524px;
}

[data-role="admin"] .drop-menu.report-drop.show {
    left: 636px;
}

[data-role="customer"] .drop-menu.mas-drop.show {
    left: 0px;
}

.drop-menu.mas-drop.show {
    display: column;
    visibility: visible;
    opacity: 1;
    top: 68px;
}

.drop-menu li {
    display: block;
    padding: 5px 12px;
    white-space: nowrap;
}

@media (min-width:1051px) {
    .mas-drop {
        width: 215px !important;
        display: column;
        height: 383px !important;
        padding: 10px 20px;
        justify-content: space-between;
    }
}

@media (min-width:992px) and (max-width:1150px) {
    .mas-drop {
        width: 206px !important;
        /* height: 335px !important;*/
        padding: 10px 20px;
        justify-content: space-between;
        left: 450px;
    }
}

.nav-links li:hover .drop-menu,
.nav-links li:hover .mega-box {
    opacity: 1;
    visibility: visible;
    top: 80px;
    /*transition: all 0.3s ease;*/
}

.drop-menu li a {
    width: 100%;
    display: block;
    padding: 0 0 0 15px;
    font-weight: 500;
    border-radius: 0px;
}

.mega-box {
    position: absolute;
    top: 80px;
    width: 36%;
    left: 496px;
    padding: 0 18px;
    opacity: 0;
    visibility: hidden;
}

@media ( min-width:1348px) and (max-width:1435px) {
    .mega-box {
        width: 42% !important;
        /*        left: 450px !important;*/
    }
}


@media ( min-width:1260px) and (max-width:1347px) {
    .mega-box {
        width: 43% !important;
    }
}

@media ( min-width:1200px) and (max-width:1219px) {
    .mega-box {
        width: 45% !important;
        /*        left:450px !important;*/
    }
}

@media ( min-width:993px) and (max-width:1115px) {
    .mega-box {
        width: 52% !important;
        /*        left: 430px !important;*/
    }
}

@media(min-width:1690px) {
    .mega-box {
        width: 32% !important;
    }
}

.mega-drop {
    position: absolute;
    top: 80px;
    width: 38%;
    left: 614px;
    padding: 0 18px;
    opacity: 0;
    visibility: hidden;
}

.mega-box .content {
    background: #F5F7F8;
    padding: 25px 20px;
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.content .row {
    width: calc(25% - 30px);
    line-height: 45px;
}

    .content .row img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .content .row header {
        color: #f2f2f2;
        font-size: 20px;
        font-weight: 500;
    }

    .content .row .mega-links {
        margin-left: -40px;
        border-left: 1px solid rgba(255,255,255,0.09);
    }

    .content .row:nth-child(1),
    .content .row:nth-child(2),
    .content .row:nth-child(3) {
        border-left: 0px;
    }

.row .mega-links li {
    padding: 0 18px;
}

    .row .mega-links li a {
        padding: 0 20px;
        color: #d9d9d9;
        font-size: 17px;
        display: block;
    }

        .row .mega-links li a:hover {
            color: #2f2f2f;
        }

.nav-links .mobile-item {
    display: none;
}

.wrapper .btn {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: none;
}

    .wrapper .btn.cancel-btn {
        position: absolute;
        right: 30px;
        top: 10px;
    }

.mobile-item i {
    transition: transform 0.3s ease;
}

.rotate-icon {
    transform: rotate(180deg);
}

.mobile-item {
    color: black !important;
}

.rotate.rotated {
    transform: rotate(180deg);
}


.mega-links {
    padding: 0;
    list-style: none;
}

    .mega-links li {
        padding: 5px 10px;
    }

        .mega-links li a {
            color: #333;
            text-decoration: none;
            display: block;
        }

            .mega-links li a:hover {
                background-color: #f1f1f1;
            }


ion-icon {
    font-size: 14px;
    margin-left: 5px;
}


@media screen and (max-width:992px) {
    .wrapper .btn {
        display: block;
        position: absolute;
        right: 101px;
        width: 60px;
    }

    .wrapper .btn2 {
        display: block;
    }

    .wrapper .nav-links {
        display: none;
        position: fixed;
        height: 100%;
        max-width: 350px;
        display: block;
        top: 0;
        left: -100%;
        overflow-y: auto;
        line-height: 50px;
        padding: 50px 10px;
        box-shadow: 0 15px 15px rgba(0,0,0,0.15);
        /*transition: all 0.3s ease;*/
    }

    .wrapper .menu-btn:hover {
        color: #fff !important;
        border: none;
    }

    .report-drop {
        width: 310px !important;
    }

    #menu-btn:checked ~ .nav-links {
        left: 0%;
        margin-top: 79px;
        z-index: 100;
        background-color: #fff;
    }

    #menu-btn:checked ~ .btn.menu-btn {
        display: none;
    }

    .nav-links::-webkit-scrollbar {
        width: 0px;
    }

    .nav-links li {
        margin: 15px 10px;
    }

    .wrapper .nav-links li a {
        padding: 0 20px;
        display: block;
        font-size: 20px;
        color: black;
    }

    .access-right, .home {
        padding: 0 10px !important;
    }

    .dropdown-menu-other {
        margin-left: 10px;
    }

    .dropdown-menu-product {
        margin-left: 10px;
    }

    .nav-links .drop-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        top: 65px;
        padding-left: 20px;
        width: 100%;
        max-height: 0px;
        overflow: hidden;
        /*transition: all 0.3s ease;*/
    }

    iconify-icon.rotate {
        transition: transform 0.3s ease;
        transform: rotate(180deg);
    }

    #showAdmin:checked ~ .drop-menu,
    #showContact:checked ~ .drop-menu,
    #showDropdown:checked ~ .drop-menu,
    #showDrop:checked ~ .drop-menu,
    #showMegaAdmin:checked ~ .drop-menu,
    #showMegaTrans:checked ~ .drop-menu,
    #showMegaDrop:checked ~ .drop-menu,
    #showMegaReport:checked ~ .drop-menu,
    #showMega:checked ~ .mega-box,
    #showMegaReport:checked ~ .mega-box,
    #showMegaAdmin:checked ~ .mega-box {
        display: block;
        visibility: visible;
        opacity: 1;
        z-index: 999;
    }


    .dropdown-menu-product,
    .dropdown-menu-other {
        position: static;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-in-out;
    }
        .dropdown-menu-product.show,
        .dropdown-menu-other.show {
            max-height: 1000px;
            opacity: 1;
            visibility: visible;
        }

    #productIcon.rotated,
    #otherIcon.rotated {
        transform: rotate(180deg); 
    }

    #toggleProductDropdown:checked ~ .dropdown-menu-product,
    #toggleProductDropdown:checked ~ .dropdown-menu-other,
    #toggleProductDropdown:checked ~ .orderInvoiceLink,
    #toggleProductDropdown:checked ~ .SaleLink,
    #toggleProductDropdown:checked ~ .PurchaseLink,
    #toggleProductDropdown:checked ~ .accountsLink {
        max-height: 1000px;
        opacity: 1;
        visibility: visible;
    }



    .nav-links .drop-menu li {
        margin: 0;
    }

        .nav-links .drop-menu li a {
            font-size: 18px;
            border-radius: 5px;
        }

    .nav-links .desktop-item {
        display: none !important;
    }

    .nav-links .mobile-item {
        display: block;
        font-size: 20px;
        color: #f2f2f2;
        font-weight: 500;
        padding-left: 20px;
        cursor: pointer;
        border-radius: 5px;
    }

        .nav-links .mobile-item:hover {
            background: #C7C8CC;
        }

    .mega-box {
        position: static;
        top: 65px;
        width: 100%;
        padding: 0 20px;
        opacity: 1;
        visibility: visible;
        max-height: 0px;
        overflow: hidden;
    }

        .mega-box .content {
            background: #F5F7F8;
            flex-direction: column;
            padding: 20px 20px 0 20px;
            width: 130%;
        }

            .mega-box .content .row {
                width: 100%;
                margin-bottom: 15px;
                border-top: 1px solid rgba(255,255,255,0.08);
            }

                .mega-box .content .row:nth-child(1),
                .mega-box .content .row:nth-child(2),
                .mega-box .content .row:nth-child(3) {
                    border-top: 0px;
                }

    .content .row .mega-links {
        border-left: 0px;
        padding-left: 15px;
    }

    .row .mega-links li {
        margin: 0;
    }

    .content .row header {
        font-size: 19px;
    }

    .nav-links .dropdown-menu-product,
    .nav-links .dropdown-menu-other {
        position: static;
        opacity: 1;
        visibility: visible;
        top: 65px;
        max-width: 95%;
        max-height: 0;
        overflow: hidden;
        width: 92%
    }
}

@media (max-width: 768px) {
    .dropdown-menu-product,
    .dropdown-menu-other {
        display: block;
        max-height: 1000px; 
    }

 
    .drop-pro-menu {
        cursor: pointer;
    }
}


@media (max-width: 768px) {
    .dropdown-menu-product,
    .dropdown-menu-other {
        transition: max-height 0.5s ease-in-out;
    }
}

@media screen and (min-width:990px) {
    .wid-30 {
        width: 32% !important;
    }
}

.wrapper input {
    display: none;
}

.rotate {
    transform: rotate(180deg);
}

.wrapper .nav-links {
    display: inline-flex;
    align-items: center;
}

.nav-links li a:hover {
    background: #cae9ff !important;
    border-radius: 6px;
    color: #014f86 !important;
    /*padding: 0px 12px;*/
}

.dropdown-columns li a:hover {
    width: 98% !important;
}

.nav-links .drop-menu {
    background: #F5F7F8;
    width: 180px;
    line-height: 32px;
    position: absolute;
    top: 85px;
    opacity: 0;
    visibility: hidden;
    z-index: 999;
    padding: 10px 0;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 15px;
}

@media(min-width:992px) {
    .tran-drop {
        padding: 8px 8px;
    }
}

.tran-drop {
    width: 180px !important;
}

@media(min-width:1116px) {

    .pro-drop, .other-drop {
        width: 420px !important;
    }
}

@media(min-width:992px) and (max-width:1115px) {
    .pro-drop {
        width: 420px !important;
    }
}


.nav-links li:hover .drop-menu {
    opacity: 1;
    visibility: visible;
    top: 68px;
}

.nav-links li:hover .mega-box {
    opacity: 1;
    visibility: visible;
    top: 68px;
}

.nav-links li:hover .mega-box2 {
    opacity: 1;
    visibility: visible;
    top: 68px;
}

.drop-menu li a {
    width: 100%;
    display: block;
    padding: 5px 5px 5px 5px;
    font-weight: 500;
    border-radius: 0px;
}

@media(max-width:992px) {
    .drop-menu li a {
        width: 92% !important;
    }

    .report-drop li a {
        width: 90%;
    }
}



.mega-drop {
    position: absolute;
    top: 80px;
    width: 38%;
    left: 614px;
    padding: 0 18px;
    opacity: 0;
    visibility: hidden;
}

.mega-box .content {
    background: #F5F7F8;
    padding: 25px 20px;
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.content .row {
    width: calc(25% - 30px);
    line-height: 45px;
}

    .content .row img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .content .row header {
        color: #f2f2f2;
        font-size: 20px;
        font-weight: 500;
    }

    .content .row .mega-links {
        margin-left: -40px;
        border-left: 1px solid rgba(255,255,255,0.09);
    }

    .content .row:nth-child(1),
    .content .row:nth-child(2),
    .content .row:nth-child(3) {
        border-left: 0px;
    }

.row .mega-links li {
    padding: 0 18px;
}

    .row .mega-links li a {
        padding: 0 20px;
        color: #d9d9d9;
        font-size: 17px;
        display: block;
    }

        .row .mega-links li a:hover {
            color: #2f2f2f;
        }

.nav-links .mobile-item {
    display: none;
}

.wrapper .btn {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: none;
}

    .wrapper .btn.cancel-btn {
        position: absolute;
        right: 3px;
        top: 10px;
    }

.mobile-item i {
    transition: transform 0.3s ease;
}

.rotate-icon {
    transform: rotate(180deg);
}

.mobile-item {
    color: black !important;
}


@media screen and (max-width:992px) {
    .dropdown-menu-product,
    .dropdown-menu-other {
        width: 100%; 
        left: 0;
        top: 60px; 
    }

    .dropdown-columns {
        flex-direction: column; 
    }

    .dropdown-column {
        width: 100%; 
    }

    .wrapper .btn {
        display: block;
        position: absolute;
        right: 101px;
        width: 60px;
        top: 15px;
    }

    .wrapper .nav-links {
        display: none;
        position: fixed;
        height: 100%;
        max-width: 350px;
        display: block;
        top: 0;
        left: -100%;
        overflow-y: auto;
        line-height: 50px;
        padding: 50px 10px;
        box-shadow: 0 15px 15px rgba(0,0,0,0.15);
        /*transition: all 0.3s ease;*/
    }

    .wrapper .menu-btn:hover {
        color: #fff !important;
        border: none;
    }

    #menu-btn:checked ~ .nav-links {
        margin-top: 65px;
        z-index: 100;
        background-color: #fff;
        left: -47px;
        width: 360px;
    }

    #menu-btn:checked ~ .btn.menu-btn {
        display: none;
    }

    .nav-links::-webkit-scrollbar {
        width: 0px;
    }

    .nav-links li {
        margin: 15px 10px;
    }

    .wrapper .nav-links li a {
        /*  padding: 0 20px;*/
        padding: 0 10px;
        display: block;
        font-size: 20px;
        color: black;
        margin: 10px;
    }

    .tran-drop {
        width: 100% !important;
    }

    .mas-drop {
        width: 100% !important;
    }

    .nav-links .drop-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        top: 65px;
        /*padding-left: 20px;
            width: 100% !important;*/
        max-height: 100%;
        overflow: hidden;
        /*transition: all 0.3s ease;*/
    }

        .nav-links .drop-menu li {
            margin: 0;
        }

    #PurchaseLink,
    #SaleLink,
    #orderInvoiceLink,
    #voucherLink {
        padding: 0 10px;
    }

    #accountsLink,
    #contactLink,
    #adminLink,
    #productLink,
    #taxLink,
    #otherLink {
        padding: 0 20px;
    }

    .drop-links {
        padding: 0 20px;
    }

    .nav-links .drop-menu li a {
        font-size: 18px;
        border-radius: 5px;
    }

    .nav-links .desktop-item {
        display: none !important;
    }

    .nav-links .mobile-item {
        display: block;
        font-size: 20px;
        color: #f2f2f2;
        font-weight: 500;
        padding-left: 20px;
        cursor: pointer;
        border-radius: 5px;
        /*transition: all 0.3s ease;*/
        position: relative;
    }

        .nav-links .mobile-item:hover {
            background: #C7C8CC;
        }

    .mega-box {
        position: static;
        top: 65px;
        width: 100%;
        padding: 0 20px;
        opacity: 1;
        visibility: visible;
        max-height: 0px;
        overflow: hidden;
    }

        .mega-box .content {
            background: #F5F7F8;
            flex-direction: column;
            padding: 20px 20px 0 20px;
            width: 130%;
        }

            .mega-box .content .row {
                width: 100%;
                margin-bottom: 15px;
                border-top: 1px solid rgba(255,255,255,0.08);
            }

                .mega-box .content .row:nth-child(1),
                .mega-box .content .row:nth-child(2),
                .mega-box .content .row:nth-child(3) {
                    border-top: 0px;
                }

    .content .row .mega-links {
        border-left: 0px;
        padding-left: 15px;
    }

    .row .mega-links li {
        margin: 0;
    }

    .content .row header {
        font-size: 19px;
    }

    #taxChangeLink {
        padding: 0 20px !important;
    }
}

@media screen and (min-width:990px) {
    .wid-30 {
        width: 32% !important;
    }
}

.wrapper input {
    display: none;
}

.rotate {
    transform: rotate(180deg);
}

@media screen and (max-width: 992px) {
    .mega-box {
        position: static;
        top: 65px;
        width: 100%;
        padding: 0 20px;
        max-height: 0;
        overflow: hidden;
    }

    #showMegadrop:checked ~ .mega-box {
        max-height: 1000px; 
        opacity: 1;
        visibility: visible;
    }
}

@media screen and (min-width: 1260px) {

    .nav-links .desktop-item {
        display: block;
    }

    .nav-links .mobile-item {
        display: none;
    }


    .mega-box {
        display: none;
    }

    .nav-links li:hover .mega-box2 {
        display: block;
        margin-left: 147px !important;
    }

    .nav-links li:hover .mega-box {
        display: block;
    }
}

@media screen and (min-width:1312px) {
    .nav-links li:hover .mega-box {
        display: block;
        width: 38%
    }
}

@media screen and (min-width:1455px) {

    .nav-links li:hover .mega-box {
        display: block;
        width: 37%;
    }
}

@media ( min-width:1240px) and (max-width:1259px) {
    .nav-links li:hover .mega-box2 {
        margin-left: 148px !important;
    }

    .nav-links li:hover .mega-box {
        display: block;
        width: 44%;
    }
}

@media ( min-width:1220px) and (max-width:1239px) {
    .nav-links li:hover .mega-box2 {
        margin-left: 147px !important;
    }

    .nav-links li:hover .mega-box {
        display: block;
        width: 44%;
    }
}

@media ( min-width:1200px) and (max-width:1219px) {
    .nav-links li:hover .mega-box2 {
        margin-left: 149px !important;
    }

    .nav-links li:hover .mega-box {
        display: block;
    }
}

@media ( min-width:1180px) and (max-width:1199px) {
    .nav-links li:hover .mega-box2 {
        margin-left: 140px !important;
    }

    .nav-links li:hover .mega-box {
        display: block;
        width: 46% !important;
    }
}

@media ( min-width:1150px) and (max-width:1179px) {
    .nav-links li:hover .mega-box2 {
        margin-left: -323px !important;
    }

    .nav-links li:hover .mega-box {
        display: block;
        width: 47% !important;
    }
}

@media ( min-width:1130px) and (max-width:1149px) {
    .nav-links li:hover .mega-box2 {
        margin-left: -327px !important;
    }

    .nav-links li:hover .mega-box {
        display: block;
        width: 48% !important;
    }
}

@media ( min-width:1118px) and (max-width:1129px) {
    .nav-links li:hover .mega-box2 {
        margin-left: -318px !important;
    }

    .nav-links li:hover .mega-box {
        display: block;
        width: 48% !important;
    }
}

@media ( min-width:1092px) and (max-width:1117px) {
    .nav-links li:hover .mega-box2 {
        margin-left: -331px !important;
    }

    .nav-links li:hover .mega-box {
        display: block;
        width: 50% !important;
    }
}

@media ( min-width:1080px) and (max-width:1091px) {
    .nav-links li:hover .mega-box2 {
        margin-left: -328px !important;
    }

    .nav-links li:hover .mega-box {
        display: block;
        width: 50% !important;
    }
}


@media ( min-width:1060px) and (max-width:1079px) {
    .nav-links li:hover .mega-box2 {
        margin-left: -332px !important;
    }

    .nav-links li:hover .mega-box {
        display: block;
    }
}


@media ( min-width:1035px) and (max-width:1059px) {
    .nav-links li:hover .mega-box2 {
        margin-left: -335px !important;
    }

    .nav-links li:hover .mega-box {
        display: block;
    }
}

@media ( min-width:1020px) and (max-width:1034px) {
    .nav-links li:hover .mega-box2 {
        margin-left: -340px !important;
    }

    .nav-links li:hover .mega-box {
        display: block;
        width: 55% !important;
    }
}

@media ( min-width:992px) and (max-width:1019px) {
    .nav-links li:hover .mega-box2 {
        margin-left: -337px !important;
    }

    .nav-links li:hover .mega-box {
        display: block;
        width: 55% !important;
    }
}

@media ( min-width:350px) and (max-width:576px) {
    .Users2 {
        position: relative;
        display: inline-block;
        /* left: -45px;*/
    }

    .dropdown-menu2 {
        display: none;
        position: absolute;
        background-color: #F5F7F8;
        min-width: 250px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
        left: -190px;
    }

        .dropdown-menu2 input[type="checkbox"] {
            display: block;
            margin-left: 20px;
        }

    .Users {
        display: flex;
        align-items: center;
        margin-left: auto;
        margin-right: 20px;
        margin-top: 0px;
    }

    .Users2 {
        display: flex;
        align-items: center;
        margin-left: auto;
        margin-top: 8px;
    }
}

@media ( min-width:792px) and (max-width:992px) {
    .Users2 {
        position: absolute;
        display: inline-block;
        /*left: 120px;*/
        margin-top: 8px;
    }

    .Users {
        display: flex;
        align-items: center;
        margin-left: auto;
        margin-right: 20px;
        margin-top: 0px;
    }
}

@media ( min-width:576px) and (max-width:792px) {
    .Users2 {
        position: absolute;
        display: inline-block;
        /* left: 19px;*/
        margin-top: 8px;
    }

    .Users {
        display: flex;
        align-items: center;
        margin-left: auto;
        margin-right: 20px;
        margin-top: 0px;
    }
}

.nav-links .dropdown {
    position: relative;
}

    .nav-links .dropdown:hover .dropdown-menu-product,
    .nav-links .dropdown:hover .dropdown-menu-other {
        display: block !important;
    }

.nav-item:hover .dropdown-menu-product,
.nav-item:hover .dropdown-menu-other {
    opacity: 1;
    visibility: visible;
    max-height: 700px;
}

@media (max-width:992px) {
    .nav-item:hover .dropdown-menu-other {
        max-height: 929px;
    }
}

.pro-drop-parent, .oth-drop-parent {
    position: relative;
}

.dropdown-menu-product {
    display: none;
    position: absolute;
    left: 100%;
    background-color: #F5F7F8;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 16px 0px;
    z-index: 1000;
    top: 9%;
    width: 220%;
    /*transition: all 0.3s ease-in-out;*/
}

.dropdown-menu-other {
    display: none;
    position: absolute;
    top: 3%;
    background-color: #F5F7F8;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 16px 0px;
    z-index: 1000;
    left: 100%;
    width: 233%;
    /*transition: all 0.3s ease-in-out;*/
}

@media(min-width:1140px) and (max-width: 1190px) {
    .dropdown-menu-other {
        width: 195%
    }
}

@media(min-width:1080px) and (max-width: 1139px) {
    .dropdown-menu-product {
        width: 198% !important;
    }

    .dropdown-menu-other {
        width: 194%
    }
}

@media(min-width:992px) and (max-width: 1079px) {
    .dropdown-menu-product {
        right: 13%;
        width: 183% !important;
    }

    .dropdown-menu-other {
        width: 194%
    }
}

.dropdown-menu-product.show {
    display: block;
}

#productIcon.rotated
#otherIcon.rotated {
    transform: rotate(180deg);
    transition: transform 0.1s ease;
}

.dropdown-menu-product .dropdown-columns,
.dropdown-menu-other .dropdown-columns {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.dropdown-menu-product .dropdown-column1,
.dropdown-menu-product .dropdown-column2,
.dropdown-menu-other .dropdown-column2,
.dropdown-menu-other .dropdown-column1 {
    width: 90%;
    margin: 10px;
}

    .dropdown-menu-product .dropdown-column1:hover,
    .dropdown-menu-product .dropdown-column2:hover {
        width: 90% !important;
    }

@media(max-width:992px) {
    .dropdown-columns li a {
        width: 110% !important;
    }
}

.nav-link {
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
    display: block;
}

.sub-menu {
    display: none;
    list-style-type: none;
    padding: 4px 4px;
    position: absolute;
    left: 100%;
    top: 47%;
    background: #F5F7F8;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 16px 0px;
    z-index: 10;
    width: 200px;
    margin-top: 10px;
}

.sub-menu-purch {
    display: none;
    list-style-type: none;
    padding: 4px 0px;
    position: absolute;
    left: 100%;
    top: -4%;
    background: #F5F7F8;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 16px 0px;
    z-index: 10;
    width: 200px;
    margin-top: 10px;
}

.sub-menu-sale {
    display: none;
    list-style-type: none;
    padding: 4px 4px;
    position: absolute;
    left: 100%;
    top: 27%;
    background: #F5F7F8;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 16px 0px;
    z-index: 10;
    width: 200px;
    margin-top: 10px;
}

.sub-menu-account {
    display: none;
    list-style-type: none;
    padding: 5px 9px;
    position: absolute;
    top: 0%;
    background: #F5F7F8;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 16px 0px;
    z-index: 10;
    width: 185px;
    left: 100%;
}

.sub-menu-contact {
    display: none;
    list-style-type: none;
    padding: 5px 9px;
    position: absolute;
    background: #F5F7F8;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 16px 0px;
    z-index: 10;
    top: 20%;
    left: 100%;
    width: 180px;
}

.sub-menu-admin {
    display: none;
    list-style-type: none;
    padding: 5px 0px;
    position: absolute;
    top: 34%;
    left: 100%;
    background: #F5F7F8;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 16px 0px;
    z-index: 10;
    width: 180px;
}

.dropdown:hover .sub-menu,
.dropdown:hover .sub-menu-purch,
.dropdown:hover .sub-menu-sale,
.dropdown:hover .sub-menu-account,
.dropdown:hover .sub-menu-contact,
.dropdown:hover .sub-menu-admin {
    display: block !important;
}

.sub-menu li a,
.sub-menu-sale li a,
.sub-menu-purch li a,
.sub-menu-account li a,
.sub-menu-contact li a,
.sub-menu-admin li a {
    padding: 6px 0px;
    display: block;
    text-decoration: none;
    color: #333;
}

    .sub-menu li a:hover,
    .sub-menu-sale li a:hover,
    .sub-menu-purch li a:hover,
    .sub-menu-account li a:hover,
    .sub-menu-contact li a:hover,
    .sub-menu-admin li a:hover {
        background-color: #ddd; 
    }

.sub-menu-purch.show,
.sub-menu-sale.show,
.sub-menu-account.show,
.sub-menu-contact.show,
.sub-menu-admin.show,
.sub-menu.show {
    display: block;
}


#orderIcon.rotated,
#saleIcon.rotated,
#purcIcon.rotated,
#contactIcon.rotated,
#accountIcon.rotated,
#adminIcon.rotated,
#productIcon.rotated,
#otherIcon.rotated {
    transform: rotate(180deg); 
    transition: transform 0.1s ease; 
}

.iconify-icon.rotated {
    transform: rotate(180deg); 
    transition: transform 0.1s ease-in-out; 
}

@media screen and (max-width: 992px) {
    .drop-menu {
        width: 100%;
    }

    .sub-menu,
    .sub-menu-purch,
    .sub-menu-sale,
    .sub-menu-account,
    .sub-menu-contact,
    .sub-menu-admin {
        position: relative;
        left: 10px;
        top: auto;
        width: 92%;
    }

        .sub-menu.show,
        .sub-menu-purch.show,
        .sub-menu-sale.show,
        .sub-menu-contact.show,
        .sub-menu-admin.show {
            position: relative;
            display: block;
        }
}


@media(max-width:992px) {
    .drop-mas-par {
        display: flex;
        justify-content: space-between
    }

    .drop-mas-child {
        flex-direction: column;
        width: 100% !important;
    }
}

.focus-letter,
.focus-letter-sub {
    text-decoration: none;
}

    .focus-letter.alt-underline,
    body.alt-pressed .focus-letter {
        box-shadow: inset 0 -2px 0 0 #fff;
    }

    .focus-letter-sub.alt-underline,
    body.alt-pressed .focus-letter-sub {
        box-shadow: inset 0 -2px 0 0 #1b84ff;
    }

.Logo-icon {
    margin-left: -10px;
}

@media(max-width:500px){
    .Logo-icon {
        margin-left: -39px;
    }
}