@media screen and (min-width:768px) {
    /*.category{
        position: relative !important;
    }*/
    .search-box.fixed {
        position: fixed;
        right: auto;
        top: 0;
        left: 15px;
        width: 100%;
        background-color: #fafcff !important;
        z-index: 100;
    }

    .product-row {
        margin-top: 0px;
    }

    .navbar-filter {
        height: auto !important;
        position: relative !important;
    }

    #nav_side {
        height: 525px !important;
        width: fit-content !important;
        z-index: 100;
        transition: all 0s ease-in;
    }

        #nav_side.fixed {
            position: fixed !important;
            top: 145px;
            width: inherit !important;
            z-index: 100;
            right: 9px;
            transition: all 0s ease-in;
            padding: 0px 6px;
        }

    .category > .row > .col-lg-9 {
        margin-right: auto;
        margin-left: 0px
    }
}

@media screen and (max-width:767px) {
    #nav_side {
        top: 55px;
        right: 2px;
        z-index: 100;
        transition: all 0s ease-in;
    }
}
/*-------------------------------------------------------------*/
@media screen and (max-width:767px) {
    .offcanvas-body, .offcanvas-header {
        border-left: 1px solid rgba(16, 117, 105, 1) !important;
    }
}

/*---------------------------------------header------------------------------------*/
:root {
    --font-color-gray-title: #344054;
    --font-color-gray-text: #667085;
    --font-color-gray-path: #a3a9c2;
    --font-color-gray-text2: #9a9ea6;
    --font-color-gray-text3: #c0c3c6;
    --font-color-blue-title: #0d0d56;
    --bg-color-path: #edf0f8;
    --font-color-blue-path: #3a4980;
    --font-color-blue-title2: #1d364d;
    --font-color-purple: #ab75f0;
    --font-color-title-footer: #0d3356;
    --bg-purple: #ab75f0;
    --bg-gray: #f6f6f6;
    --bg-light-linear-gradient: linear-gradient(0deg, #eaecf0, #eaecf0), linear-gradient(0deg, #f9fafb, #f9fafb);
    --bg-light-linear-gradient2: linear-gradient(0deg, #f3f3f3, #f3f3f3), linear-gradient(0deg, #ffffff, #ffffff);
    --bg-light-linear-gradient3: linear-gradient(0deg, #eaecf071, #eaecf071), linear-gradient(0deg, #f9fafb62, #f9fafb62);
    --bg-light-footer: #f9fafb;
    --bg-lighter-blue: #eeeff8;
    --bg-lighter-red: #f5f1ee;
    --bg-lighter-gray: #f5eef1;
    --bg-blur: linear-gradient( 0deg, rgba(217, 217, 217, 0.6), rgba(217, 217, 217, 0.6) ), linear-gradient(0deg, #ffeaea, #ffeaea);
    --shadow-light: 0px 15px 60px 0px rgba(171, 117, 240, 0.1);
    --border-light: 1px solid rgba(234, 236, 240, 1);
    --border-light-blur: 1px solid rgba(255, 234, 234, 1);
    --border-gray: 1px solid #344054;
}

.font-color-gray-title {
    color: var(--font-color-gray-title) !important;
}

.font-color-gray-text {
    color: var(--font-color-gray-text) !important;
}

.font-color-gray-text2 {
    color: var(--font-color-gray-text2) !important;
}

.font-color-gray-text3 {
    color: var(--font-color-gray-text3) !important;
}

.font-color-blue-title {
    color: var(--font-color-blue-title) !important;
}

.font-color-blue-title2 {
    color: var(--font-color-blue-title2) !important;
}

.bg-purple {
    background-color: var(--bg-purple) !important;
}

.font-color-purple {
    color: var(--font-color-purple) !important;
}

.bg-light-linear-gradient {
    background-image: var(--bg-light-linear-gradient) !important;
}

.bg-light-linear-gradient2 {
    background-image: var(--bg-light-linear-gradient2) !important;
}

.border-light {
    border: var(--border-light) !important;
}

.bg-lighter-blue {
    background-color: var(--bg-lighter-blue) !important;
}

.bg-lighter-red {
    background-color: var(--bg-lighter-red) !important;
}

.bg-lighter-gray {
    background-color: var(--bg-lighter-gray) !important;
}

.shadow-light {
    box-shadow: var(--shadow-light) !important;
}

.border-gray {
    border: var(--border-gray);
}

.font-color-title-footer {
    color: var(--font-color-title-footer);
}

@media screen and (max-width: 1199px) {
    header .search-header {
        width: calc(100%);
    }

        header .search-header button {
            top: 14px;
            right: 28px;
        }
}

@media screen and (min-width: 1200px) {
    header .search-header {
        width: calc(100% - 333px);
    }

        header .search-header button {
            top: 14px;
            right: 20px;
        }
}

header .search-header input {
    background-image: var(--bg-light-linear-gradient2) !important;
    border-radius: 25px !important;
    border: none !important;
    padding-right: 60px !important;
    width: 100%;
    height: 56px;
}

.index-header .dropdown {
    background-color: var(--bg-lighter-gray);
    border-radius: 25px;
    width: 106px !important;
    height: 50px;
}

    .index-header .dropdown button {
        width: 100% !important;
        height: 100%;
    }

.basket {
    background-color: var(--bg-lighter-red);
    padding: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display:flex;
    align-items : center;
    justify-content : center;
}

.message {
    background-color: var(--bg-lighter-blue);
    padding: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.user-profile {
    width: 50px;
    height: 50px;
}
/* --------------------category menu--------------------------- */
@media screen and (min-width: 768px) {
    #product_category_menu {
        display: none !important;
        visibility: hidden;
        opacity: 0;
        transition: all 0.3s ease;
        width: 96vw;
        height: 531px;
        /* padding: 0px 20px; */
        background-color: rgb(255, 255, 255) !important;
        left: 0;
        right: 0;
        border-radius: 12px;
        box-shadow: 0px 0px 15px #d8d7d777;
        overflow-x: hidden;
        z-index: 1000;
    }

    #product_category:hover #product_category_menu {
        display: flex !important;
        visibility: visible;
        opacity: 1;
        transition: all 0.3s ease;
    }

    #product_category_menu_mobile {
        display: none !important;
    }
}

@media screen and (max-width: 767px) and (min-width: 408px) {
    #product_category_menu {
        display: none !important;
    }

    #product_category_menu_mobile {
        width: 408px;
        height: 100vh;
        background-color: rgb(243, 244, 246) !important;
        border-radius: 12px;
        box-shadow: 0px 0px 15px #d8d7d777;
        top: 0;
        z-index: 10000;
        right: -408px;
        transition: all 0.3s ease;
    }

        #product_category_menu_mobile.open {
            right: 0px !important;
            transition: all 0.3s ease;
        }

    header {
        position: relative;
    }
}

@media screen and (max-width: 407px) {
    #product_category_menu {
        display: none !important;
    }

    #product_category_menu_mobile {
        width: 99%;
        height: 98vh;
        background-color: rgb(243, 244, 246) !important;
        border-radius: 12px;
        box-shadow: 0px 0px 15px #d8d7d777;
        top: 0;
        z-index: 10000;
        right: -100%;
        transition: all 0.3s ease;
    }

        #product_category_menu_mobile.open {
            right: 0px !important;
            transition: all 0.3s ease;
        }

    header {
        position: relative;
    }
}

.submenu-title {
    height: 98%;
    max-height: 500px;
    overflow-y: auto;
    width: 240px !important;
    text-align: right;
    background-color: #f5f5f5 !important;
    border-radius: 8px;
    display: block;
    margin: auto 5px;
    padding: 0px 5px;
}

.submenu-content {
    height: 100%;
    background-color: #ffffff !important;
    width: calc(100% - 240px);
}

    .submenu-content .tab-pane {
        height: 100%;
        max-height: 520px;
        overflow-y: auto;
    }

.submenu-title .nav-link.active {
    background-color: #ffffff !important;
    color: var(--font-color-purple) !important;
    font-weight: bold;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

.submenu-title .nav-link {
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    width: 100%;
    text-align: right;
    color: var(--font-color-gray-text) !important;
    border-radius: 8px;
    margin: 5px 0px;
}

.submenu-content a {
    text-decoration: none !important;
}

.submenu-col-title {
    color: var(--font-color-purple) !important;
    font-weight: bold;
}

.submenu-col {
    padding: 10px 20px;
    /* width: 230px; */
    margin: 5px 0px;
    height: auto;
}

.close_category {
    top: 10px;
    left: 15px;
    right: auto;
}

#content-menu-mobile .accordion-button::after {
    position: absolute;
    left: 15px;
}

#content-menu-mobile .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    color: #000 !important;
    stroke: #000 !important;
    fill: #000 !important;
}

#content-menu-mobile .accordion-button {
    background-color: rgb(243, 244, 246) !important;
    font-weight: bolder;
    color: #000 !important;
    border: none !important;
    box-shadow: none;
    padding: 7px !important;
    margin-bottom: 0px !important;
}
#content-menu-mobile .accordion-collapse {
    border: none !important;
    background-color: transparent !important;
}

#content-menu-mobile .accordion-item {
    border: none !important;
    background-color: transparent;
}

#content-menu-mobile .accordion-header {
    border: none !important;
}

#content-menu-mobile .card {
    background-color: #fff;
    border: none !important;
    border-radius: none !important;
    padding: 0px 15px;
}

    #content-menu-mobile .card a {
        text-decoration: none !important;
        color: #5c5a5a;
        margin-bottom: 7px;
    }

#content-menu-mobile .item-submenu {
    padding: 0px 20px;
}

#content-menu-mobile {
    height: calc(100vh - 70px);
    overflow-y: auto;
}

#product_category > a {
    background-image: url(/assets/Aram_Theme/img/Category.svg) !important;
    width: 38px;
    height: 38px;
    background-size: contain;
    display: block;
}

#product_category:hover > a {
    /*background-image: url(/assets/Aram_Theme/img/Category2.svg) !important;*/
    width: 38px;
    height: 38px;
    background-size: contain;
    display: block;
    border-bottom: 3px solid #164c96;
}


.submenu-col-links a {
    margin: 0px 0px !important;
    color: var(--font-color-gray-text) !important;
}

.floatin-menu {
    position: fixed;
    bottom: 0;
    top: auto;
    height: 70px;
    z-index: 10;
    box-shadow: 0px -5px 35px -5px rgba(0, 0, 0, 0.1);
}

    .floatin-menu a {
        color: #2d2d2d !important;
        font-size: 9pt;
        text-wrap: nowrap;
    }

@media screen and (max-width: 1399px) {
    .see_all {
        position: absolute;
        bottom: -5px;
        top: auto;
        right: auto;
        left: 10px;
        z-index: 100;
    }
}

.other-header .dropdown {
    background-color: var(--bg-lighter-gray);
    border-radius: 25px;
    width: 106px !important;
    height: 50px;
}

    .other-header .dropdown button {
        width: 100% !important;
        height: 100%;
    }

#loadingTemplate {
    display: none;
    text-align: center;
    padding: 20px;
    font-size: 18px;
    color: #333;
    background-color: #f8f8f8;
}

.searchResultsPanel,
#searchResultsPanel {
    display: none;
    position: absolute;
    z-index: 10;
    max-height: 500px;
    overflow-y: auto;
}


.search-results-list img {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    margin: 5px;
}

.search-results-list li {
    margin: 5px 0px;
    display: flex;
    align-items: center;
}

.item-submenu a {
    width: 100%;
    display: block;
    text-align: right;
}
/* ---------------------------------- */
.change-lang {
    right: 0;
}

.border-gray-light {
    border: 1px solid var(--gray-light);
}

.color-dark-blue {
    color: var(--dark-blue) !important;
}

.color-gray-light {
    color: var(--gray-light) !important;
}

.bac-light {
    background-color: var(--light) !important;
}

.radius-25 {
    border-radius: 25px !important;
}

@media screen and (min-width: 768px) {
    .search {
        max-width: 587px;
        min-width: 470px;
        padding-right: 35px !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}

@media screen and (max-width: 767px) and (min-width: 440px) {
    .search {
        max-width: 350px;
        min-width: 300px;
        padding-right: 35px !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}

@media screen and (max-width: 439px) {
    .search {
        max-width: 350px;
        /* min-width: 300px; */
        width: 175px !important;
        padding-right: 35px !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}

.searchbtn {
    right: 8px;
}

.color-brown {
    color: var(--brown);
}

.bac-brown-light {
    background-color: var(--brown-light);
}

.color-black-blue {
    color: var(--black-blue);
}

.bac-blue-light {
    background-color: var(--blue-light);
}

.color-secondery {
    color: var(--secondary);
}

.color-dark {
    color: var(--dark);
}

.offcanvas-body {
    justify-content: left;
}

.nav-link {
    color: var(--gray-light) !important;
}

    .nav-link.active {
        color: var(--dark) !important;
    }

.user-dropdown {
    background-color: rgba(249, 202, 36, 0.17) !important;
}

    .user-dropdown .dropdown-menu {
        border-radius: 12px !important;
        margin-top: 5px !important;
        min-width: 200px;
    }

@media screen and (max-width:767px) {
    .d-none-m {
        display: none !important;
    }
}

.btn-close {
    margin-left: 0px !important;
}

#mySearchMobile {
    height: 50px;
    border-radius: 12px;
}
body {
    min-height : 100vh;
}

@media (min-width: 768px) {
    .d-md-flex {
        display: flex !important;
    }
}

.user-dropdown {
    background-color: transparent !important;
}

.mega-menu {
    position: static;
}

    /*.mega-menu:hover, .header-new .nav-link:hover {
        background-color: rgba(249,202,36,.17) !important;
        background: rgba(249,202,36,.17) !important;
    }*/

@media screen and (max-width: 991px) {
    .mega-menu .dropdown-menu {
        width: 100%;
        left: 0;
        top: 60px;
        flex-wrap: wrap;
        justify-content: center;
        /* padding: 20px; */
        background-color: #f9f9f9;
        border: none;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s, visibility 0s 0.3s;
    }

        .mega-menu .dropdown-menu.show {
            opacity: 1;
            visibility: visible;
            transition-delay: 0s;
            display: flex;
        }

  /*  .navbar-brand img {
        height: 35px;
        width: auto;
    }*/

    .dropdown:hover .dropdown-toggle::after,
    .dropdown.show .dropdown-toggle::after {
        position: absolute;
        top: 31px;
        right: auto;
        left: 0;
        /*margin: 0 auto;*/
        display: inline-table;
        opacity: 1;
    }

    .dropdown-toggle::after {
        display: none;
        opacity: 0;
    }
}

@media screen and (min-width: 992px) {
    .offcanvas-body .mega-menu .dropdown-menu {
        width: 100%;
        left: 8px;
        top: 74px;
        flex-wrap: wrap;
        justify-content: center;
        /* padding: 20px; */
        background-color: #f9f9f9;
        border: none;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s, visibility 0s 0.3s;
    }

        .offcanvas-body .mega-menu .dropdown-menu.show,
        .offcanvas-body .dropdown:hover .dropdown-menu {
            opacity: 1;
            visibility: visible;
            transition-delay: 0s;
            display: flex;
            transition: display 0.3s !important;
        }

    .navbar-brand img {
        height: 75px;
        width: auto;
    }

    .offcanvas-body .dropdown:hover .dropdown-toggle::after,
    .offcanvas-body .dropdown.show .dropdown-toggle::after {
        content: '';
        position: absolute;
        top: 31px;
        right: 0;
        left: 0;
        margin: 0 auto;
        display: inline-table;
        opacity: 1;
    }

    .offcanvas-body .dropdown-toggle::after {
        display: none;
        opacity: 0;
    }
}

.mega-menu .nav-link {
    color: #333;
    font-weight: bold;
    padding: 10px 20px;
}
/*
    .mega-menu .nav-link:hover, .dropdown.show {
        background-color: rgba(249,202,36,.17) !important;
    }*/

.mega-menu .dropdown-menu > .row {
    margin-bottom: 20px;
}

    .mega-menu .dropdown-menu > .row:last-child {
        margin-bottom: 0;
    }

.mega-menu .col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.mega-menu .col-title {
    font-weight: bold;
    margin-bottom: 10px;
    text-align: right;
    font-size: 12pt;
}

.mega-menu .col-links {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: right;
    font-size: 10pt;
}

    .mega-menu .col-links .nav-link {
        padding: 5px;
        width: 100%;
        display: block;
    }

.dropdown-toggle {
    position: relative;
}

.offcanvas-header, .offcanvas-body {
    background-color: #fff !important;
}

.offcanvas-end {
    right: -14px;
}

.header-new .navbar {
    /*right: -12px !important;*/
    background-color: #fff !important;
    height: 100px;
}

.header-new {
    /*margin-right: -12px !important;*/
    height: 100px;
}

    .header-new .navbar-light .navbar-toggler {
        /*top: -12px;*/
        position: relative;
        left: 0px;
        margin-right: auto;
    }

.drop-lang {
    position: absolute;
    right: -115px;
    left: auto;
}

.card-box .card-img img {
    max-height: 100% !important;
}

@media (min-width: 1200px) {
    .d-xl-inline-block {
        display: inline-block !important;
    }
}

.search-box-menu-top {
    min-width: 300px;
    border-radius: 10px;
    text-align: right;
}
.basket {
    background-color: var(--bg-lighter-red);
    padding: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.buyerBasketCount {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #ff0000;
    border-radius: 50%;
    top: 0;
    right: 0;
    color: #fff;
    font-size: 9pt;
    display: block;
    z-index: 10;
    text-align: center;
}

.floatin-menu a {
    color: #2d2d2d !important;
    font-size: 9pt;
    text-wrap: nowrap;
}
@media screen and (max-width: 1199px) {
    header .search-header input {
        max-width: 390px;
    }
}
header .search-header input {
    margin-right: 5px;
}
#shopNameHeader{
    margin-bottom: 0px
}
@media screen and (max-width: 991px) {
    #collapseSidebar {
        top: 0px;
        overflow-y: auto;
        position: fixed;
        background-color: #fff;
        border-radius: 10px;
        height: 100vh;
        z-index: 100;
        right: 0;
    }
}
.errorPage {
    height: 79vh;
    background-color: #fff;
    text-align: center;
    color: #E0E0E0;
    /*font-family: 'Fira Mono', monospace;*/
    width: 100vw;
    overflow: hidden;
}

.errorPage h1 {
    font-size: 2.5rem;
    /*font-family: 'Permanent Marker', cursive;*/
}

.errorPage div {
    transform-style: preserve-3d;
}

.errorPage svg {
    width: clamp(300px, 70%, 600px);
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.errorPage #lottie-container {
    transform: translateY(750px);
    animation: launch 2s ease-out forwards;
    position: absolute;
}

@keyframes launch {
    from {
        transform: translateY(750px);
    }

    to {
        perspective: 500px;
        transform: translateY(-86px);
    }
}

.errorPage #stars {
    animation: twinkling 2s linear;
}

@keyframes twinkling {

    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}
.errorPage .text {
    opacity: 0;
    animation: appear 1s ease-in forwards;
    animation-delay: 1.8s;
    position: absolute;
    top: auto;
    bottom: 140px;
    right: 0;
    left: 0;
    margin: auto;
    color: #656565;
}

@media screen and (max-width: 500px) {
    .errorPage #lottie-container {
        width: 100px;
        height: 100px;
        /*position: absolute;*/
        /*top: 100px;*/
    }

    .errorPage .text {
        bottom: 160px !important;
    }
}

@keyframes appear {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.errorPage a {
    color: #F66947;
    text-decoration: none;
}

.errorPage code {
    color: #F66947;
}