/* Top offer menu before header section */
.top_offer__ {
    height: auto;
    padding: 10px 15px;
    width: 100%;
    background-color: var(--light-color);
    overflow: hidden;
    transition: height 0.3s;
}

.top_offer__link {
    color: var(--primary-color);
}


/* For header top offer */
.top_offer_hide {
    height: 0;
}

/* burder menu  */

.burger_menu {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    height: 40px;
}

.burger {
    height: 15px;
    width: 45px;
    cursor: pointer;
    display: grid;
    justify-items: end;
    margin-right: 10px;
}

.burger_bar {
    width: 27px;
    height: 2px;
    background-color: var(--main-black);
    margin: 2px 0;
    transition: 0.4s;
    border-radius: 50px;
}

.bar1 {
    width: 34px;
}

.bar2 {
    width: 20px;
    display: none;
}

.bar3 {
    width: 15px;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-6px, 2px);
    transform: rotate(-45deg) translate(-6px, 2px);
    width: 20px;
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-4px, 0px);
    transform: rotate(45deg) translate(-4px, 0px);
    width: 20px;
}


.nav1 .burger_bar {
    background-color: var(--white);
}

.burger_menu.left .burger_bar {
    background-color: var(--gray-made-color);
}

.nav1 .burger_menu {
    color: var(--white);
    /* color: var(--gray-made-color); */
}

/* Show Burger menu within a fixed with  */
/* @media screen and (max-width: 800px) {
    .burger {
        display: grid;
    }
} */

/* / burder menu  */


/* Header menu  */

.header_container {
    width: 100%;
    background-color: var(--white);
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.max_header {
    max-width: 1200px;
    padding: 0 20px;
    /* padding-left: 5px; */
    margin: 0 auto;
    width: 100%;
}

.menu_header {
    width: 100%;
    display: grid;
}

.top_header {
    overflow: auto;
    height: 60px;
    height: fit-content;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--light-gray);
    position: relative;
}

.top_header::-webkit-scrollbar {
    height: 1px;
}

.website_logo {
    height: 80px;
    padding: 10px;
}

.icon_menu {
    display: flex;
    height: 40px;
}

.header_search_bar {
    margin-right: 10px;
}

.header_search_bar_form {
    overflow: hidden;
    position: relative;
}

.search_input {
    color: var(--gray-made-color);
    border: none;
    /* border: 1px solid var(--light-gray); */
    border-bottom: 1px solid var(--light-gray);
    border-radius: 30px;
    height: 35px;
    outline: none;
    padding: 0 50px 0 15px;
    font-size: 1rem;
    width: 250px;
    transition: font-size 0.3s, width 0.3s;
}

.search_input:focus {
    /* border: 1px solid var(--header-text-brown); */
    border-bottom: 1px solid var(--header-text-brown);
    background-color: #FFFFFF;
    font-size: 1.05rem;
    width: 340px;
}

.header_search_btn {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 50px;
    font-size: 20px;
    cursor: pointer;
    border-radius: 30px;
    padding-bottom: 2px;
}

.header_search_btn:hover {
    background-color: #d99586;
    color: white;
}

.h_icon_container {
    cursor: pointer;
    display: inline-block;
    position: relative;
    margin: 0 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
}

.h_icon_btn {
    height: 100%;
    width: 100%;
    position: relative;
}

.h_icon_btn > i,
.wishlist__ > i {
    font-size: 26px;
    height: 40px;
    width: 40px;
    color: var(--primary-color);
}

.wishlist__:hover > i {
    color: var(--primary-color);
}

.notification_badge {
    position: absolute;
    top: -2px;
    right: -1px;
    background-color: var(--primary-color);
    color: var(--white);
    height: 20px;
    width: 20px;
    border-radius: 50%;
    font-size: 14px;
}

.top_header_burger_menu {
    display: none;
}

/* --------------------------------------------------------------------- */

/* Account Action buttons in Header PopOVer */
.center {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.popover_account_actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* gap: 15px; */
}

.popover_account_actions a {
    transition: transform 200ms;
    display: inline-block;
}

.popover_account_actions a:hover {
    transform: scale(1.1);
    text-decoration: dotted;
}

.popover_account_actions > div {
    width: 100%;
    text-align: center;
    padding: 10px;
}

.popover_account_actions > div:not(:last-of-type) {
    border-bottom: 1px solid rgb(216, 216, 216);
}


.profile_link {
    color: var(--main-black);
    text-decoration: none;
    font-weight: normal;
    font-size: 1rem;
}


.points_div {
    font-size: 1rem;
}

.points_link {
    color: var(--main-black);
}

.points_div span {
    margin-right: 5px;
    color: var(--primary-color);
}

.orders_link {
    color: var(--main-black);
}

/* -/ Account Action buttons in Header PopOVer */



/* --------------------------------------------------------------------- */

/* Bottom header menu  */


.bottom_header {
    position: relative;
    display: block;
    background-color: var(--bottom-nav);
    /* background-color: var(--white); */
}


nav ul {
    list-style-type: none;
    display: flex;
}

/* Nav 1 */
.nav1 {
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* .nav1_ul a:hover {} */

.nav_li {
    position: relative;
}

.nav2 .nav_li {
    border-bottom: 1px solid #f1f1f1;
}

.nav_li a {
    display: flex;
    /* justify-content: center; */
    justify-content: space-between;
    align-items: center;
    padding: 9px 10px;
    color: var(--white);
    transition: background-color 0.2s, color 0.2s;
}

/* Down Arrow Icon */
.nav_li a i {
    /* color: var(--xx-lite-color); */
    color: var(--dark-gray);
    margin-left: 2px;
    transition: color 0.2s;
}

.nav_li a:hover,
.nav_li a:focus-within {
    background-color: var(--hover-highlight);
    color: var(--white);
}

.nav_li a:hover > i {
    color: #FFFFFF;
}

/* Sub Nav list  */
.nav_sub_ul {
    position: absolute;
    background-color: var(--white);
    display: none;
    width: 300px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    overflow: hidden;
}


/* Show Sub Menu when hover on nav_li  */
.nav_li:hover > ul {
    display: grid;
    justify-items: left;
}


/* Nav 2 */
.nav2 {
    position: absolute;
    right: 0;
    top: 40px;
    height: 100vh;
    width: 0px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: var(--cart-btn-bg);
    background-color: var(--header-text-brown);
    background-color: #FDFDFD;
    overflow: hidden;
    transition: width 0.4s;
    padding: 20px 0;
    padding-bottom: 45px;
    /* for small screen  */
    overflow-x: auto;
}

.nav2 li a {
    color: var(--gray-made-color);
    font-weight: 500;
    font-size: 18px;
}

.nav2 li a i {
    color: var(--dark-gray);
}

.nav2 ul {
    display: grid;
    height: fit-content;
    width: 100%;
}

/* Sub Navigation menus */
.nav2 .nav_sub_ul {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    transition: height 0.3s;
}

.nav_sub_ul li {
    width: 100%;
}

.nav_sub_ul li a {
    font-weight: 400;
    font-size: 15px;
    width: 100%;
    padding-left: 25px;
    color: var(--main-black);
}


/* Show Nav menu on  Burger Click */
.show_nav2 {
    width: 300px;
    z-index: 100;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
    /* background: linear-gradient(114deg, rgba(217, 149, 134, 1) 0%, rgba(234, 181, 168, 1) 47%, rgba(207, 113, 113, 1) 100%); */
}


@media screen and (max-width: 1020px) {
    .bottom_header {
        position: static;
    }

    .nav1 {
        display: none;
    }

    .nav2 {
        top: 60px;
        height: calc(100vh - 60px);
        overflow-y: auto;
        right: unset;
        left: 0;
    }

    .top_header_burger_menu {
        display: flex;
    }

    .burger_menu.right {
        display: none;
    }

    .burger {
        height: 20px;
        margin-right: 0px;
        justify-items: start;
    }

    /* .burger_menu.left .burger {} */


    .bar2 {
        display: block;
        width: 24px;
    }

    .change .bar1 {
        -webkit-transform: rotate(-45deg) translate(-8px, 0px);
        transform: rotate(-45deg) translate(-8px, 0px);
        width: 20px;
    }

    .change .bar3 {
        -webkit-transform: rotate(45deg) translate(-9px, -1px);
        transform: rotate(45deg) translate(-9px, -1px);
        width: 20px;
    }

    /* --------------------------------------------------- */
    .burger_menu.left .bar1 {
        width: 27px;
    }

    .burger_menu.left .bar2 {
        width: 20px;
    }

    .burger_menu.left .bar3 {
        width: 27px;
    }

    /* --------------------------------------------------- */


    .wishlist__ {
        display: none;
    }
}

@media screen and (max-width: 880px) {

    .logo1,
    .logo3 {
        display: none;
    }
}

@media screen and (max-width: 600px) {

    .header_search_bar {
        display: none;
    }

    .h_icon_container {
        margin: 0 4px;
    }
}

@media screen and (max-width: 450px) {

    .website_logo {
        height: 50px;
    }

    .show_nav2 {
        width: 100%;
    }

    /* .max_header {
        padding: 0 10px;
    } */
}