/* ===========================================================================
Menubar
============================================================================*/

@media(min-width: 1200px) {
    .sl-menubar {
        color: #000;
    }

    /* sticky menu on desktops */
    .sl-menubar.sticky {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        background-color: white;
        box-shadow: 3px 2px 4px #c3c3c3;
        z-index: 99;
    }
}


.sl-menu .dropdown-menu.show {
    display: block !important;
}

.sl-menu {
    text-align: left;
    position: relative;
    z-index: 999;
    background-color: transparent;
    display: flex;
}

.sl-menu>.list-inline-item {
    margin-right: 0;
}

.sl-menu > li > a {
    text-transform: capitalize !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    color: #2b2c2b;
    text-decoration: none;
    padding: 30px 11px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.3s ease;
}
@media(max-width: 1399.98px){
    .sl-menu > li > a {
        font-size: 14px;
    }
}

@media(min-width: 1200px){
    .sl-menu > li.has-dropdown > a::after {
        content: "\F282";
        font-family: "bootstrap-icons";
        font-size: 13px;
        transition: all 0.3s ease;
    }
    .sl-menu > li.has-dropdown > a:hover::after {
        transform: rotate(180deg);
    }
}

@media(min-width: 1200px){
    .sl-menu > li:hover > a {
        background-color: rgba(175,27,24,0.05);
        color: var(--colorRed) !important;
    }
}
.sl-menu > li:hover > a:not([href]):not([class]):hover {
    color: white;
    text-decoration:none;
}
.sl-dropdown-wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background-color: white;
    color: black;
    text-align: left;
    padding: 30px 15px;
}
.sl-dropdown-wrap a {
    color: black !important;
}


@media(min-width: 1200px) {
    .sl-dropdown-wrap {
        display: none;
        overflow-y: auto;
        background-color: #fff;
        padding: 0;
    }
    .sl-menu > .list-inline-item:hover .sl-dropdown-wrap {
        display: block;
    }
}


@media(min-width: 1900px) {
    .sl-dropdown-wrap {
        max-height: 650px;
    }
}

@media(max-width: 1199.98px) {
    .sl-menu-mobile-header .dropdown-menu {
        min-width: 80px;
    }
}

/*----- submenu ----- */
.sl-submenu-title a {
    color: white;
    font-size: 13px;
    font-weight: 400;
    text-transform: capitalize;
    display: block;
    padding: 0 0 5px;
}

.sl-submenu-title a:hover {
    color: black !important;
}

.sl-submenu-items > ul > li > a {
    color: white;
    padding: 5px 0 0 0;
    display: block;
    text-transform: none;
    text-decoration: none;
    font-size: 13px;
    line-height: 22px;
    white-space: nowrap;
}

.sl-submenu-items > ul > li > a:hover {
    color: white;
}


/* ----- dropdowns: style vertical list ----- */
@media(min-width: 1200px) {
    .sl-menu>.style-vertical-list {
        position: relative;
    }
    .sl-menu>.style-vertical-list .sl-dropdown-wrap {
        min-width: 180px;
        right: auto;
        /*overflow-x: hidden;*/ /*interfere with sub menu dropdown*/
        overflow-y: visible; /*interfere with sub menu dropdown*/
    }
    .sl-menu>.style-vertical-list .sl-submenu-wrap {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .sl-menu > .style-vertical-list .sl-submenu-wrap .sl-submenu-title a {
        padding: 12px 20px;
        display: block;
        white-space: nowrap;
        border-top: 1px solid #eee;
        font-size: 14px;
    }
    .sl-menu > .style-vertical-list .sl-submenu-wrap .sl-submenu-title a:hover {
        color: white !important;
        background-color: var(--colorBlueLight);
    }
    .sl-menu > .style-vertical-list .sl-submenu-wrap:hover .sl-submenu-title a {
        background-color: #f8e8e9;
        color: var(--colorRed) !important;
    }
    .sl-menu > .style-vertical-list .sl-submenu-wrap .sl-submenu-items {
        display: none;
        position: absolute;
        left: calc(100% - 15px);
        top: 0px;
        min-width: 200px;
        background-color: white;
        padding: 0;
        box-shadow: 10px 10px 15px 3px rgba(0, 0, 0, 0.1);
    }
    .sl-menu > .style-vertical-list .sl-submenu-wrap:hover .sl-submenu-items {
        display: block;
    }
    .sl-menu > .style-vertical-list .sl-submenu-wrap .sl-submenu-items > ul > li > a {
        color: var(--colorRed) !important;
        padding: 12px 20px;
        font-size: 14px;
        line-height: 21px;
        border-top: 1px solid #f7f7f7;
        background-color: #f8e8e9;
    }
    .sl-menu > .style-vertical-list .sl-submenu-wrap .sl-submenu-items > ul > li > a:hover {
        background-color: #fbdfe1;
        color: var(--colorRed) !important;
    }

    /*.has-dropdown indicator arrow*/
    .sl-submenu-title-has-dropdown-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        right: 20px;
        color: black;
    }
    html[lang="ar"] .sl-submenu-title-has-dropdown-arrow {
        transform: translateY(-50%) scaleX(-1);
        left: 20px; right: unset;
    }
    .sl-menu > .style-vertical-list .sl-submenu-wrap:hover .sl-submenu-title-has-dropdown-arrow {
        color: var(--colorRed);
    }
}

/* ----- dropdowns: style 2c (two columns larger dropdowns) ----- */
@media(min-width: 1200px) {
    .sl-menu > .style-2c {
        position: relative;
    }
    .sl-menu > .style-2c .sl-dropdown-wrap {
        min-width: 500px;
        right: auto;
        /*overflow-x: hidden;*/ /*interfere with sub menu dropdown*/
        overflow-y: visible; /*interfere with sub menu dropdown*/
        background: rgba(255,255,255,0.85);
        backdrop-filter: blur(5px);
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
        box-shadow: 0 10px 10px rgba(0,0,0,0.1);
        padding: 25px 20px 35px 20px;
        border-top: 2px solid rgba(175,27,24,0.05);
    }
    html[lang="ar"] .sl-menu > .style-2c .sl-dropdown-wrap {
        right: 0;
        left: auto;
    }
    .sl-menu > .style-2c .sl-submenu-wrap {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .sl-menu > .style-2c .sl-submenu-wrap .sl-submenu-title a {
        padding: 12px 15px;
        display: flex;
        font-size: 14px;
        color: #4a5565 !important;
        align-items: center;
        gap: 10px;
        transition: all 0.3s linear;
    }
    .sl-menu > .style-2c .sl-submenu-wrap .sl-submenu-title a:hover {
        color: blue !important;
        background-color: var(--colorBlueLight);
    }
    .sl-menu > .style-2c .sl-submenu-wrap:hover .sl-submenu-title a {
        background-color: #fff;
        color: var(--colorRed) !important;
        border-radius: 8px;
    }
    /*.sl-menu > .style-2c .sl-submenu-wrap .sl-submenu-title > a .menu-icon {*/
    /*    width: 40px;*/
    /*    height: 40px;*/
    /*    aspect-ratio: 1;*/
    /*    display: inline-flex;*/
    /*    border-radius: 12px;*/
    /*    font-size: 18px;*/
    /*    color: #4a5565 !important;*/
    /*    background: #f3f4f6;*/
    /*    align-items: center;*/
    /*    justify-content: center;*/
    /*}*/
    .sl-menu > .style-2c .menu-icon {
        width: 40px;
        height: 40px;
        aspect-ratio: 1;
        display: inline-flex;
        border-radius: 12px;
        font-size: 18px;
        color: #4a5565 !important;
        background: #f3f4f6;
        align-items: center;
        justify-content: center;
    }
    .sl-menu > .style-2c .sl-submenu-wrap .sl-submenu-items {
        display: none;
        position: absolute;
        top: 0;
        min-width: 200px;
        box-shadow: 0 10px 10px rgba(0,0,0,0.1);
        padding: 20px;
        background: rgba(255,255,255,0.9);
        z-index: 5;
        backdrop-filter: blur(20px);
        border-radius: 16px;
        border: 1px solid #f4f4f4;
    }
    html[lang="en"] .sl-menu > .style-2c .sl-submenu-wrap .sl-submenu-items {
        left: calc(100% - 15px);
    }
    html[lang="ar"] .sl-menu > .style-2c .sl-submenu-wrap .sl-submenu-items {
        right: calc(100% - 15px);
    }
    .sl-menu > .style-2c .sl-submenu-wrap:hover .sl-submenu-items {
        display: block;
    }
    .sl-menu > .style-2c .sl-submenu-wrap .sl-submenu-items > ul > li > a {
        padding: 12px 15px;
        font-size: 14px;
        line-height: 21px;
        background-color: transparent;
        transition: all 0.3s linear;
        align-items: center;
        gap: 10px;
        display: flex;
        border-radius: 8px;
    }
    .sl-menu > .style-2c .sl-submenu-wrap .sl-submenu-items > ul > li > a:hover {
        color: var(--colorRed) !important;
        background: white;
    }

    /*.has-dropdown indicator arrow*/
    .sl-submenu-title-has-dropdown-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        right: 20px;
        color: black;
    }
    html[lang="ar"] .sl-submenu-title-has-dropdown-arrow {
        transform: translateY(-50%) scaleX(-1);
        left: 20px; right: unset;
    }
    .sl-menu > .style-2c .sl-submenu-wrap:hover .sl-submenu-title-has-dropdown-arrow {
        color: var(--colorRed);
    }

}

/* appear shadow div while showing dropdown on desktops */
.shadow-dropdown {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 70;
}
.menu-badge {
    position: absolute;
    right: 10px;
    top: -14px;
    background: #47ae0c !important;
    font-size: 14px;
    padding: 5px 10px 8px 10px;
    color: white;
}
html[lang="ar"] .menu-badge {
    left: 10px;
    right: unset;
}

/*------------------------------- menu on mobile -------------------------*/
.sl-menu-desktop-header {
    padding: 10px 15px 10px 15px;
    background-color: #fff;
    color: white;
    font-size: 16px;
    position: relative;
    font-weight: bold;
    text-transform: uppercase;
}

@media(max-width: 1199.98px) {
    .sl-menubar {
        background: linear-gradient(90deg, white 80%, transparent 80%);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 99;
        box-shadow: 1px 1px 7px black;
        overflow-y: auto;
        display: none;
    }

    .sl-menu.list-inline {
        display: flex;
        flex-direction: column;
        width: 80%;
    }

    .sl-menu > .list-inline-item {
        margin: 0;
    }

    .sl-menu > .list-inline-item > a {
        text-align: left;
        padding: 15px;
        padding-left: 20px;
        background-color: white;
        color: black;
        border-top: 1px solid #eee;
        font-size: 14px;
        font-weight: bold;
        border-right: 0 !important;
    }

    /*dropdown*/
    .has-dropdown {
        position: relative;
    }

    .sl-slide-trigger {
        cursor: pointer;
        position: absolute;
        right: 0;
        top: 5px;
        color: black;
        border-left: 1px solid #eee;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sl-menu > .list-inline-item.has-dropdown > .sl-slide-trigger {
        height: 42px;
        width: 52px;
    }

    .sl-submenu-title.has-dropdown > .sl-slide-trigger {
        height: 42px;
        width: 52px;
    }

    .sl-dropdown-wrap {
        position: relative;
        padding: 0;
        display: none;
        background-color: #a40f0d;
        z-index: 50;
    }

    .sl-submenu-wrap-picture {
        display: none;
    }

    .sl-submenu-title a {
        color: black !important;
        background-color: #f9f9f9;
        width: 100%;
        font-size: 14px;
        padding: 15px 10px 15px 30px;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .sl-submenu-items {
        margin: 0;
        display: none;
    }

    .sl-submenu-items > ul > li > a {
        color: black !important;
        background-color: #f2f2f2;
        font-size: 14px;
        padding: 15px 10px 15px 50px;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    /* mobile menu dropdown header */
    .sl-menu-mobile-header {
        padding: 10px 15px 10px 15px;
        background-color: #fff;
        color: white;
        font-size: 14px;
        position: relative;
    }

    .sl-menu-mobile-header a {
        color: white;
        font-size: 14px;
    }

    .sl-menu-mobile-header .fa {
        font-size: 18px;
    }

    .sl-menu-mobile-header .dropdown-toggle {
        font-size: 13px;
        padding: 5px;
    }

    .sl-menu-mobile-header .dropdown-toggle:hover {
        color: white;
    }

    .sl-menu-mobile-header .currency-dropdown .dropdown-menu {
        min-width: 50px;
        background-color: black;
        color: white;
    }

    .sl-menu-mobile-header .language-dropdown .dropdown-menu {
        min-width: 50px;
        background-color: black;
        color: white;
    }

    .sl-close-menu {
        position: fixed;
        left: calc(80% + 10px);
        top: 5px;
        background-color: white;
        color: #6c6c6c;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        cursor: pointer;
        z-index: 999;
    }

    .sl-close-menu-empty-bar {
        background-color: rgba(0,0,0,0.2);
        width: 20%;
        height: 100%;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
    }
    html[lang="ar"] .sl-close-menu-empty-bar {
        right: auto;
        left: 0;
    }
    .menu-badge {
        right: 60px;
        top: 10px;
    }
    html[lang="ar"] .menu-badge {
        left: 60px;
        right: unset;
    }

}

/*overrides for desktops*/
/*
@media(min-width: 1200px){
    .sl-menu.list-inline {
        width: 25%;
    }
    .sl-menubar {
        background: linear-gradient(90deg, #f0f0f0 25%, rgba(0,0,0,0.5) 25%);
    }
    .sl-close-menu-empty-bar {
        width: 75%;
    }
    .sl-close-menu {
        left: calc(25% + 10px);
    }
}
*/

/* ------------------------------ Header RTL -----------------------------*/
html[lang='ar'] .sl-menu {
    text-align: right;

}
html[lang="ar"] .sl-menu > .list-inline-item {
    margin-left: 0;
}

html[lang='ar'] .sl-dropdown-wrap {
    text-align: right;
}

html[lang='ar'] .sl-submenu-items > ul > li > a {
    text-align: right;
}
/* style vertical list */
html[lang='ar'] .sl-menu > .style-vertical-list .sl-dropdown-wrap {
    right: 0;
    left: auto;
}
html[lang='ar'] .sl-menu > .style-vertical-list .sl-submenu-wrap .sl-submenu-items {
    right: calc(100% - 15px);
    left: auto;
}
html[lang='ar'] .sl-menu > .style-vertical-list .sl-submenu-wrap .sl-submenu-items {
    box-shadow: -10px 10px 15px 3px rgba(0, 0, 0, 0.1);
}
/*------------------- Header RTL on mobile ---------------- */
@media(max-width: 1199.98px) {
    /*--------------*/
    html[lang='ar'] .sl-close-menu {
        right: calc(80% + 10px);
        left: auto;
    }

    html[lang='ar'] .sl-menubar {
        background: linear-gradient(90deg, rgba(0,0,0,0.5) 20%, white 20%);
        overflow-y: auto !important;
    }

    html[lang='ar'] .sl-menu > .list-inline-item > a {
        text-align: right;
        padding-right: 20px;
        padding-left: 0;
    }
    
    html[lang='ar'] .sl-submenu-title a {
        padding: 15px 30px 15px 10px;
    }

    html[lang='ar'] .sl-slide-trigger {
        right: auto;
        left: 0;
        border-left: none;
        border-right: 1px solid #eee;
    }

    html[lang='ar'] .sl-submenu-items > ul > li > a {
        padding: 15px 50px 15px 10px;
    }

    html[lang='ar'] .sl-menu-mobile-header .currency-dropdown .dropdown-menu a {
        padding-left: 15px;
        padding-right: 15px;
    }
    /*--------------*/
}

/* overrriedes for desktops */
/*
@media(min-width: 1200px){
    html[lang='ar'] .sl-close-menu {
        right: calc(25% + 10px);
    }

    html[lang='ar'] .sl-menubar {
        background: linear-gradient(90deg, rgba(0,0,0,0.5) 75%, #f0f0f0 25%);
    }
}
*/


/* new desktop design overrides */
/*
@media(min-width: 1200px){
    .sl-menubar{
        background: linear-gradient(90deg, #fff 25%, transparent 25%);
    }
    html[lang='ar'] .sl-menubar {
        background: linear-gradient(90deg, transparent 75%, #fff 25%);
    }
    .sl-menubar{
        padding-top: 108px;
    }
}
*/

/* About us menu as a trigger */
/*@media(max-width: 1199.98px){*/
/*    .sl-menu > .list-inline-item.list-inline-item-about-us.has-dropdown > .sl-slide-trigger {*/
/*        width: 100%;*/
/*        display: flex;*/
/*        align-items: center;*/
/*        justify-content: flex-end;*/
/*        padding: 15px;*/
/*    }*/
/*}*/


/* ---------- anas menu animation ---------- */
/* non-touch devices */
@media (pointer: fine) {
    .list-inline-item.list-inline-item-anas {
        position: relative;
    }
    .list-inline-item.list-inline-item-anas a {
        background: rgba(255,255,255,0.5);
    }
    .list-inline-item.list-inline-item-anas a:hover {
        background: rgba(255,255,255,1);
    }
    .anas-head {
        pointer-events: none;
        opacity: 0;
        position: absolute;
        width: 55px;
        height: 70px;
        padding: 5px;
        left: 50%;
        transform: translateX(-50%);
        transition: all 0.3s ease;
    }
    html[lang="en"] .list-inline-item.list-inline-item-anas:hover .anas-head {
        opacity: 1;
        transform: translateX(-50%);
        left: calc(100% + 15px);
    }
    html[lang="ar"] .list-inline-item.list-inline-item-anas:hover .anas-head {
        opacity: 1;
        transform: translateX(-50%);
        left: calc(0% - 10px);
    }
    .anas-head-img {
        transform: rotate(35deg);
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    html[lang="ar"] .anas-head-img {
        transform: rotate(-35deg);
    }
}

@media (pointer: coarse) and (hover: none) {
    .anas-head {
        display: none;
    }
}