@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root
{
    --primary-color: #000;
    --secondary-color: #1c223a;

    --hover-color: #f54768;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
}

/* top nav */

.top_nav
{
    position: sticky;
    top: 0;
    z-index: 999;
    background-color: white;
}


.top_nav > .container
{
    border-bottom: 1px solid #e5e7eb;
}

.top_nav_in 
{
    display: grid;
    grid-template-columns: 20% 60% 20%;
    align-items: center;
    justify-content: space-between;
}

.logo
{
    width: 100px;
    border-radius: 5px;
}

.footer .logo 
{
    width: 150px;
}

.search_product_input_era
{
    height: 40px;
    max-width: 500px;
    width: 100%;
    border-radius: 30px;
    border: 2px solid var(--primary-color);
    padding: 2px 20px;
    display: flex;
    align-items: center;
    margin: 0 auto;
    position: relative;
}

.search_product_input_era i 
{
    font-size: 14px;
}

.search_product input
{
    height: 100%;
    width: 100%;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 400;
    border: none;
    outline: none;
    box-shadow: none;
    padding: 5px 8px;
}

.search_product_list 
{
    position: absolute;
    background-color: white;
    border: 1px solid #E5E7EB;
    top: 105%;
    left: 0;
    width: 100%;
    border-radius: 4px;
    display: none;
    max-height: 200px;
    overflow: auto;
}


.search_product_list::-webkit-scrollbar {
  width: 6px;
}

.search_product_list::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
.search_product_list::-webkit-scrollbar-thumb {
  background: #888; 
}


.search_product_list ul 
{
    margin: 0;
    padding: 0;
    list-style: none;
}


.search_product_item 
{
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--secondary-color);
     padding: 10px 20px;

    &:hover 
    {
        background-color: aliceblue;
    }
}

.search_product_item img 
{
    width: 50px;
}

.search_product_item h6 
{
    margin: 0;
    font-size: 14px;
    font-weight: 500;
}

.search_product_item p  
{
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

.search_product_item p span.org_price_p 
{
    color: #999999;
    text-decoration: line-through;
}

.search_product_item p span.sales_price_p
{
    color: var(--hover-color);
}


.top_nav_right 
{
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 20px;
}

.top_nav_right a 
{
    font-size: 14px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 10px;
    background-color: whitesmoke;
    color: black !important;
    text-decoration: none;

    &:hover
    {
        color: var(--primary-color) !important;
    }
}

.top_login_btn 
{
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    background-color: var(--primary-color);
    color: white;
    border: none;
    outline: none;
    box-shadow: none;
    display: flex;
    align-items: center;
    gap: 5px;
}

.dropdown-menu li a 
{
    border-radius: 0;
}

.menu_open_btn 
{
    all: unset;
    font-size: 20px;
}

@media(max-width : 767px)
{
    .top_nav_in 
    {
        grid-template-columns: 30% 55% 15%;
    }

    .logo
    {
        width: 80px;
    }

    .search_product_input_era {
        height: 35px;
        padding: 2px 15px;
    }

    .search_product_list 
    {
        left: 50%;
        transform: translateX(-50%);
        width: 300px;
    }

}


/*  nav bar */
.nav_bar
{
    position: relative;
    z-index: 99;

    padding-top: 10px;

    background-color: white;
    position: sticky;
    top: 55px;
    border-bottom: 1px solid #e5e7eb;
    
}

.menu_flex
{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    position: relative;
}

.menu_first_title
{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.menu_first_title > a
{
    color: var(--primary-color) !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    padding: 5px 12px 15px 12px;
    &:hover 
    {
        color: var(--hover-color) !important;
    }
}

.menu_first_title > button 
{
    font-size: 14px;
    border: none;
    outline: none;
    box-shadow: none;
    background-color: transparent;
    display: none;
}

.menu_first_title > a.special
{
    font-size: 12px;
    font-weight: 600;
    color: white !important;
    border-radius: 30px;
    padding: 5px 12px;
    text-transform: uppercase;
}

.menu_drop
{
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);

    width: 100%;

    background-color: white;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

    display: grid;
    grid-template-columns: repeat(5, 1fr);

    transition: opacity 0.3s ease, transform 0.3s ease;
}

.menu_drop.active 
{
    visibility: visible;
    opacity: 1;
}


.menu_drop > div:nth-child(even)
{
    background-color: #f7f7f7;
}

.menu_drop_item
{
    padding: 10px;
}

.menu_drop_title
{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.menu_drop_title > a 
{
    color: var(--primary-color) !important;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;

    &:hover 
    {
        color: var(--hover-color) !important;
    }
}

.menu_drop_title > button 
{
    font-size: 12px;
    border: none;
    outline: none;
    box-shadow: none;
    background-color: transparent;
    display: none;
}

.menu_drop_item ul 
{
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu_drop_item ul li 
{
    margin: 5px 0;
}

.menu_drop_item ul li:last-child
{
    margin-bottom: 0;
}

.menu_drop_item ul li a 
{
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    color: var(--primary-color);
    opacity: .9;

    &:hover 
    {
        color: var(--hover-color);
    }
}

.menu_close_btn
{
    all: unset;
    color: var(--primary-color);
    font-size: 18px;
}

.sm_login
{
    border-bottom: 1px solid whitesmoke;
}

.sm_login a:hover 
{
    color: var(--primary-color) !important;
}

@media (max-width : 991px) 
{
    .nav_bar
    {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100%;
        background-color: rgba(0,0,0,0.9);
        padding-top: 0;
        display: none;
        border-bottom: none;
        z-index: 999;
    }

    .nav_bar.active 
    {
        display: block;
    }

    .nav_bar_in
    {
        height: 100%;
        max-width: 400px;
        width: 100%;
        overflow-y: auto;
        padding-bottom: 50px;
        background-color: white;
    }

    .menu_flex 
    {
       padding-top: 10px;
       flex-direction: column;
       justify-content: unset;
       align-items: unset;
    }

    .menu_first_title > button 
    {
        display: block;
    }

    .menu_first_title > a 
    {
        font-size: 15px;
        padding: 5px 0px;
        font-weight: 600;
    }

    .menu_first_title > a.special 
    {
        font-size: 15px;
        border-radius: 0;
        font-weight: 400;
        color: black !important;
        background-color: transparent !important;
        text-transform: none;
    }

    .menu_drop 
    {
        max-height: 0;
        overflow: hidden;
        padding-left: 15px;
        position: static;
        transform: none;
        max-width: 100%;
        width: 100%;
        background-color: transparent;
        box-shadow: none;
        grid-template-columns: repeat(1, 1fr);
        transition: max-height 0.5s ease
    }
    .menu_drop.show 
    {
        visibility: visible; 
        opacity: 1; 
        transition: max-height 0.5s ease;
    }

    .menu_drop_item
    {
        padding: 10px 0;
    }

    .menu_drop_title > a 
    {
        font-size: 15px;
        font-weight: 500;
        text-transform: capitalize;
    }

    .menu_drop_title > button
    {
        display: block;
    }

    .menu_drop_item ul
    {
        max-height: 0;
        overflow: hidden;
        padding-left: 15px;
        transition: max-height 0.5s ease;
    }

    .menu_drop_item ul.active 
    {
        transition: max-height 0.5s ease;
    }


    .menu_drop > div:nth-child(even) {
        background-color: transparent;
    }

    
}

/* @media (min-width: 1200px) 
{
    .menu_drop 
    {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) 
{
    .menu_drop 
    {
        max-width: 1320px;
    }
} */

/* carousel */
.carouselSwiper .swiper-slide picture img 
{
    width: 100%;
} 

.swiper-pagination
{
    position: relative !important;
    bottom: -3px !important;
}

.carouselSwiper .swiper-pagination-bullet
{
    height: 12px;
    width: 12px;
}

.carouselSwiper .swiper-pagination-bullet-active
{
    background-color: var(--primary-color) !important;
}

@media(max-width : 767px)
{
    .carouselSwiper .swiper-pagination-bullet
    {
        height: 10px;
        width: 10px;
    }
}

@media(max-width : 991px)
{
    .home_carousel 
    {
        margin-top: 10px;
    }
}

/* ome product  */
.home_product
{
    padding: 60px 0 30px 0;
}

.category_title
{
    margin-bottom: 20px;
    position: relative;
}

.category_title h4 
{
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
   
}

.title_view_btn 
{
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.home_product .row > div 
{
    margin: 10px 0;
}

.product
{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 2px solid whitesmoke;
    border-radius: 10px;
    height: 100%;
    overflow: hidden;
    transition: all 0.3s linear;
    position: relative;

    &:hover 
    {
        border: 2px solid var(--primary-color);
    }
}

.product a 
{
    text-decoration: none;
}

.product_thumbnail
{
    overflow: hidden;
}

.product_thumbnail img 
{
    width: 100%;
    transition: all 0.3s ease;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.product_thumbnail:hover img 
{
    transform: scale(1.1);
}
.product_btm 
{
    padding: 15px 10px 5px 10px;;
    text-align: center;
}

.product_btm h4 
{
    font-size: 15px;
    font-weight: 400;
    color: black;
    opacity: .9;
    margin: 0;

    &:hover 
    {
        color: var(--primary-color)
    }
}

.product_btm h3 
{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 10px 0;
}

.product_btm h3 .original_price 
{
    font-size: 16px;
    font-weight: 500;
    color: #999999;
    text-decoration: line-through;
}

.product_btm h3 .sale_price 
{
    font-size: 18px;
    font-weight: 600;
    color: var(--hover-color);
} 

.add_to_cart
{
    all: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    background-color: var(--primary-color);
    color: white;
    text-align: center;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    height: 40px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;

    &:hover 
    {
        opacity: .9;
    }
}

.add_to_cart i 
{
    margin-top: -3px;
}

.sales_off
{
    position: absolute;
    top: 0;
    left: 0;
    padding: 4px 10px;
    border-top-left-radius: 5px;
    border-bottom-right-radius: 5px;
    background-color: var(--primary-color);
    color: white;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
}


.view_more_btn
{
    display: inline-block;
    text-decoration: none;
    background-color: var(--secondary-color);
    color: white;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 5px;

    &:hover 
    {
        opacity: .9;
    }
}

@media (max-width : 575px) 
{
    .add_to_cart {
        font-size: 13px;
    }

    .home_product .row {
        --bs-gutter-x: 11px !important;
    }
}

@media (max-width : 767px)  
{
    .category_title h4 {
        font-size: 18px;
    }

    .title_view_btn 
    {
        position: initial;
        margin-top: 35px;
    }   
}

/*  site feature */

.site_feature
{
    padding: 40px 0;
    background-color: #fbf8f1;
    
    border-top: 1px solid whitesmoke;
    border-bottom: 1px solid whitesmoke;
}

.site_feature_item
{
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 15px 0;
}

.site_feature_icon 
{
    height: 60px;
    min-width: 60px;
    border-radius: 50%;
    background-color: var(--secondary-color);
    color: white;
    display: grid;
    place-content: center;
    font-size: 20px;
    cursor: pointer;
    &:hover 
    {
        background-color: var(--primary-color);
    }
}

.site_feature_info h4 
{
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.site_feature_info p 
{
    margin-top: 5px;
    margin-bottom: 0;
    font-size: 15px;
    font-weight: 400;
}

/* footer */
.footer 
{
    padding: 40px 0;
    background-color: var(--primary-color);
}

.footer_item 
{
    margin: 15px 0;
}



.footer_item p 
{
    color: white;
    font-size: 14px;
    font-weight: 400;
    margin-top: 10px;
    margin-bottom: 0;
}

.footer_item h4 
{
    color: var(--hover-color);
    font-size: 16px;
    font-weight: 400;
    margin-top: 0;
    margin-bottom: 10px;
}

.footer_item ul 
{
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer_item ul li 
{
    margin: 10px 0;
}

.footer_item ul li a 
{
    color: white !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;

    &:hover 
    {
        color: var(--hover-color) !important;
    }
}

.footer_item ul.follow_ul li a 
{
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer_item ul.follow_ul li i
{
    color: white;
    font-size: 25px;
    display: inline-block;
    width: 25px;
}

.payment_img
{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.payment_img img 
{
    height: 80px;
}

.copyright_era
{
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #ccc;
}

.copyright_era p 
{
    font-size: 14px;
    font-weight: 400;
    margin: 0;
}

/* to top */

.to_top 
{
    all: unset;
    position: fixed;
    bottom: 60px;
    right: 20px;
    background-color: var(--secondary-color);
    border-radius: 6px;
    color: white;
    display: block;
    height: 35px;
    width: 35px;
    display: none;
    place-content: center;

    &:hover 
    {
        background-color: var(--primary-color);
    }
}

/* sub_bar */

.sub_bar 
{
    background-image: url("../images/settings/about-bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 150px;
}

.sub_bar.contact 
{
    background-image: url("../images/settings/contact-bg.webp");
}



.sub_bar_content 
{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sub_bar_content h1 
{
    font-size: 25px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
}

.sub_bar_content p 
{
    margin-top: 10px;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 16px;
    font-weight: 400;
}

.sub_bar_content p a 
{
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
}

/* about us */

.about 
{
    padding: 50px 0;
}

.about_left,
.about_right
{
    margin: 10px 0;
}

.about_left img 
{
    width: 100%;
    border-radius: 10px;
}

.about_right h1 
{
    font-size: 30px;
    font-weight: 600;
}
.about_right p 
{
    font-size: 16px;
    font-weight: 400;
    margin: 15px 0;
}

.cmn_btn 
{
    position: relative;
    display: inline-block;
    border: none;
    background: transparent;
    padding: 0;
    outline: none;
    cursor: pointer;
    text-decoration: none;
}

.cmn_btn .shadow 
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    transform: translateY(2px);
    transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
}
  
.cmn_btn .edge 
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background-color: var(--secondary-color);
}
  
.cmn_btn .front 
{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    color: white;
    background-color: var(--hover-color);
    border-radius: 6px;
    transform: translateY(-4px);
    transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
}
  
.cmn_btn:hover .shadow {
    transform: translateY(4px);
}

.cmn_btn:hover .front {
    transform: translateY(-6px);
}

.cmn_btn:active .shadow {
    transform: translateY(1px);
    transition: transform 34ms;
}

.cmn_btn:active .front {
    transform: translateY(-2px);
    transition: transform 34ms;
}

.cmn_btn .front span {
    user-select: none;
}

.team_info h2 
{
    font-size: 20px;
    font-weight: 600;
    margin: 10px 0 0 0;
}

.team_info p 
{
    font-size: 16px;
    font-weight: 400;
    margin: 0;
}



@media (max-width : 767px) 
{
    .about_right h1 {
        font-size: 25px;
    }

}

/* brand */

.brand
{
    padding: 50px 0;
}

.brand .bx-wrapper 
{
  max-width: 100% !important;
  margin-top: 50px;
  margin-bottom: 0 !important;
  box-shadow: none !important;
  border: none !important;
}

.brand .bx-viewport 
{
    height: auto !important;
}

.brandSlider li img 
{
    display: block;
    margin: 0 auto;
    width: 100px;
    aspect-ratio: 3 / 2;
    object-fit: contain;
}

/* contact */
.contact
{
    padding: 50px 0;
}

.contact_left,
.contact_right 
{
    margin: 10px 0;
}

.contact_left 
{
    border: 2px solid whitesmoke;
    padding: 20px;
    border-radius: 8px;
}

.contact_left form input:focus,
.contact_left form textarea:focus
{
    border: 1px solid var(--primary-color);
}

.contact_right iframe 
{
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

/* office */

.office 
{
    padding: 50px 0;
}

.office_item 
{
    margin: 10px 0;
    padding: 20px;
    border-radius: 8px;
    border: 2px solid whitesmoke;

    &:hover 
    {
        border: 2px solid var(--primary-color); 
    }
}

.office_item h3 
{
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 10px 0; 
}

.office_item h3 img 
{
    width: 40px;
}

.office_info_box 
{
    margin: 10px 0;
}

.office_info_box h6 
{
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.office_info_box p 
{
    font-size: 16px;
    font-weight: 400;
    margin: 5px 0 0 0;
}

/* policy */
.policy 
{
    padding: 50px 0;
}

.policy h2 
{
    font-size: 18px;
    font-weight: 600;
}

.policy p 
{
    font-size: 16px;
    font-weight: 400;
    margin: 15px 0;
}

.policy ul li 
{
    font-size: 16px;
    font-weight: 400;
    margin: 5px 0;
}

/* product */

.product_era
{
    padding: 50px 0;
}

.product_filter_in h4 
{
    font-size: 16px;
    font-weight: 500;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 15px;
}

.product_category_filter
{
    padding-top: 30px;
    padding-bottom: 30px;
}

.product_category_filter > ul 
{
    margin: 0;
    padding: 0;
    list-style: none;
}

.product_category_filter > ul > li,
.cat_drop > li 
{
    font-size: 14px;
    font-weight: 400;
    margin: 8px 0;
    cursor: pointer;
}


.product_category_filter > ul > li.active  > div > span,
.product_category_filter > ul > li.active  > div > i
{
    font-weight: 600;
    color: var(--hover-color);
}

.product_category_filter > ul > li > div,
.cat_drop > li > div 
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    &:hover 
    {
        color: var(--hover-color);
    }
}

.cat_drop 
{
   list-style: none;
   margin: 0;
   padding: 0;
   padding-left: 15px;
}


.cat_drop > li.active  > div > span,
.cat_drop > li.active  > div > i
{
    font-weight: 600;
    color: var(--hover-color);
}

.product_brand_filter 
{
    max-height: 400px;
    overflow: auto;
}

.product_brand_filter input
{
    all: unset;
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 400;
    padding: 5px 10px;
    margin-bottom: 5px;
}

.product_brand_filter ul 
{
    list-style: none;
    padding: 0;
    margin: 0;
}

.product_brand_filter ul li 
{
    margin: 8px 0;
    font-size: 14px;
    font-weight: 400;
    margin: 8px 0;
    cursor: pointer;

    &:hover 
    {
        color: var(--hover-color);
    }
}

.product_brand_filter ul li.active 
{
    font-weight: 600;
    color: var(--hover-color);
}

.slider-container {
    width: 100%;
    position: relative;
}

.range-slider {
    position: relative;
    height: 40px;
}

.range-slider input[type="range"] {
    position: absolute;
    width: 100%;
    pointer-events: none;
    -webkit-appearance: none;
    background: transparent;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.range-slider input[type="range"]::-webkit-slider-thumb {
    pointer-events: all;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border: none;
    border: 1px solid #ccc;
    -webkit-appearance: none;
}

.slider-track {
    position: absolute;
    height: 6px;
    border-radius: 3px;
    background: #ddd;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}

.slider-range {
    position: absolute;
    height: 6px;
    border-radius: 3px;
    background: var(--hover-color);
    top: 50%;
    transform: translateY(-50%);
}

.value-labels 
{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}

.value-labels div 
{
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    width: 45%;
    border: 1px solid #e5e7eb;
    padding: 6px 10px;
    border-radius: 6px;
}

.value-labels div p 
{
    font-size: 16px;
    font-weight: 500;
    margin: 0;
}

.value-labels input 
{
    width: 100%;
    border: none;
    outline: none;
    box-shadow: none;
    text-align: left;
    background-color: transparent;
    font-size: 16px;
    font-weight: 400;
}

.reset_filter_btn 
{
    white-space: nowrap;
    font-size: 14px;
    font-weight: 500;
    background-color: rgba(255, 0, 0, 0.746);
    color: white;
    border-radius: 30px;
    border: none;
    outline: none;
    box-shadow: none;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    gap: 3px;
}

.sorting_filter 
{
    height: 40px;
    width: fit-content;
    border: 1px solid #e5e7eb;
    font-size: 14px;
    font-weight: 400;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    outline: none;
    box-shadow: none;
}

.filter_open_btn 
{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: white;
    padding: 10px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    color: white;
    border: none;
    outline: none;
    box-shadow: none;
    background-color: var(--hover-color);
    z-index: 99;
}

.filter_cls_btn 
{
    color: red;
    font-size: 20px;
    font-weight: 600;
    position: absolute;
    right: 20px;
    top: 15px;
    background-color: transparent;
    border: none;
    outline: none;
    box-shadow: none;
}


@media (min-width : 768px) 
{
    .filter_open_btn 
    {
        display: none;
    }  
}

@media (max-width : 575px) 
{
    .sorting_filter 
    {
        width: 100%;
    }    
}

@media (max-width : 767px) 
{
    .product_filter_wrapper.active 
    {
        position: fixed;
        top: 0;
        right: 0;
        height: 100%;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        display: block !important;
        z-index: 999;
        padding: 0px;
    }

    .product_filter_wrapper.active .product_filter
    {
        height: 100%;
        max-width: 400px;
        width: 100%;
        overflow: auto;
        background-color: white;
        padding: 40px 20px 20px 20px;
        float: right;
    }
}


/* product details */
.product_det
{
    padding: 50px 0;
}

.product_gallery > img 
{
    width: 100%;
    box-shadow: none;
    border: 1px solid #e5e7eb;
}

.xzoom-thumbs 
{
    margin-top: 10px;
    margin-bottom: 0 !important;
}

.product_gallery .xzoom-thumbs a 
{
    text-decoration: none;
    color: #e5e7eb;
}

.product_gallery .xactive 
{
    border: 2px solid var(--primary-color) !important;
}

.product_content > h1 
{
    font-size: 25px;
    font-weight: 500;
    margin: 15px 0;
}

.product_content h6 
{
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 15px 0;
}

.product_content h6 span 
{
    font-size: 14px;
    font-weight: 400;
}

.product_content > h3 
{
    margin: 20px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.product_content span.original_price
{
    text-decoration: line-through;
    font-weight: 500;
    font-size: 20px;
    color: #999999;
}

.product_content span.sale_price
{
    font-size: 30px;
    font-weight: 600;
    color: var(--hover-color);
}

.product_cart_flex
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
}

.add_to_cart_btn 
{
    background-color: var(--primary-color);
    color: white;
    height: 45px;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 400;
    border: none;
    outline: none;
    box-shadow: none;
    text-transform: uppercase;
}


.product_qty 
{
    display: flex;
    align-items: center;
    width: fit-content;
}

.product_qty button
{
    height: 40px;
    width: 40px;
    border: none;
    outline: none;
    box-shadow: none;
    cursor: pointer;
    background-color: var(--secondary-color);
    color: white;
    font-size: 16px;

    &:hover 
    {
        background-color: var(--primary-color);
    }
}

.product_qty button:first-child
{
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.product_qty button:last-child
{
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.product_qty input
{
    height: 40px;
    width: 70px;
    text-align: center;
    border: none;
    outline: none;
    box-shadow: none;
    font-size: 18px;
    font-weight: 500;
    pointer-events: none;
    border: 1px solid #e5e7eb;
}

.product_qty input::-webkit-outer-spin-button,
.product_qty input::-webkit-inner-spin-button 
{
  -webkit-appearance: none;
  margin: 0;
}

.product_qty input[type=number] {
  -moz-appearance: textfield;
}

.hr_line
{
    margin-top: 20px;
    margin-bottom: 20px;
    height: 1px;
    background-color: #e5e7eb;
}

.product_info_item 
{
    display: grid;
    grid-template-columns: 20% 80%;
    margin-bottom: 20px;
}

.product_info_item:last-child
{
    margin-bottom: 0;
}

.product_info_item_left p 
{
    font-size: 14px;
    margin: 0;

    font-weight: 600;
        color: var(--primary-color);

}

.product_info_item_right p 
{
    font-size: 14px;
    font-weight: 400;
    margin: 0 0 10px 0;
}

.product_info_item_right ul
{
    margin: 0;
    padding: 0;
    list-style: inside;
}

.product_info_item_right ul li
{
    font-size: 14px;
    font-weight: 400;
    margin: 4px 0;
}

.product_info_item_right a 
{
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    color: var(--secondary-color);

    &:hover
    {
        color: var(--hover-color);
    }
}


@media (max-width : 575px) 
{
    .product_det {
        padding: 50px 0 0 0;
    }


    .product_cart_flex {
        gap: 15px 30px;
    }

    .product_info_item {
        grid-template-columns: 100%;
    }

    .product_info_item_left p {
        
        margin-bottom: 10px;
    }
}

@media (min-width : 768px) and (max-width : 991px) 
{
    .product_info_item {
        grid-template-columns: 25% 75%;
    }
}

/* Verify Account */
.verify_acc 
{
    padding: 50px 0;
}


/* cmn css */

.cmn_btn2 
{
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 500;
    background-color: var(--primary-color);
    color: white;
    border: none;
    outline: none;
    box-shadow: none;
    display: flex;
    align-items: center;
    gap: 5px;
}

.form-control:focus
{
    border-color: var(--primary-color) !important;
}

.custom_alert 
{
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 9999;
}

.c_spin 
{
    height: 20px !important;
    width: 20px !important;
}

.top_nav_right .dropdown-menu li a  
{
    background-color: transparent;
}

.top_nav_right .dropdown-item.active, 
.top_nav_right .dropdown-item:active
{
    background-color: var(--primary-color) !important;
    color: white !important;
}

.sm_login .dropdown-item.active, 
.sm_login .dropdown-item:active
{
    background-color: var(--primary-color) !important;
    color: white !important;
}


/* float cart */

.float_cart 
{
    position: fixed;
    right: 0px;
    top: 70%;
    z-index: 99;
    background-color: var(--hover-color);
    color: white;
    padding: 10px;
    border-radius: 5px;
    text-decoration: none;
    display: block;
    text-align: center;
}

.float_cart i 
{
    font-size: 20px;
}

.float_cart p 
{
    font-size: 12px;
    font-weight: 500;
    margin: 0;
}

/* float bag  */

.float_bag 
{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999;
    display: none;
}

.float_bag_in 
{
    background-color: #E5E7EB;
    height: 100%;
    max-width: 350px;
    width: 100%;
    float: right;
}

.float_bag_top 
{
    background-color: white;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
}

.float_bag_top h1 
{
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0;
}

.float_bag_top button
{
    all: unset;
    cursor: pointer;
    color: red;
    font-size: 22px;
}

.float_bag_mid 
{
    padding: 10px;
    height: calc(100% - 140px);
    overflow: auto;
}


.cart_item
{
    display: grid;
    grid-template-columns: 80% auto;
    align-items: center;
    justify-content: space-between;

    background-color: white;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    padding: 10px 15px 10px 10px;
    border-radius: 5px;
    margin-bottom: 10px;
}

.cart_item:last-child
{
    margin-bottom: 0;
}

.cart_item_left 
{
    display: flex;
    gap: 10px;
}

.cart_item_left img 
{
    height: 80px;
}

.cart_item_left p 
{
    font-size: 14px;
    font-weight: 400;
    margin-top: 0px;
    margin-bottom: 0px;
}

.float_bag_qty 
{
    margin-top: 10px;
    display: flex;
    align-items: center;
    border-radius: 5px;
    overflow: hidden;
    width: fit-content;
}

.float_bag_qty button
{
    width: 30px;
    height: 30px;
    background-color: var(--secondary-color);
    color: white;
    border: none;
    outline: none;
    box-shadow: none;
    font-size: 16px;
    font-weight: 500;

    &:hover 
    {
        background-color: var(--primary-color);
    }
}

.float_bag_qty input
{
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    width: 40px;
    height: 30px;
    border: none;
    outline: none;
    box-shadow: none;
    background-color: white;
    pointer-events: none;
    border: 1px solid #e5e7eb;
}

.float_bag_qty input::-webkit-outer-spin-button,
.float_bag_qty input::-webkit-inner-spin-button 
{
  -webkit-appearance: none;
  margin: 0;
}

.float_bag_qty input[type=number] {
  -moz-appearance: textfield;
}

.float_bag_trash_btn 
{
    background-color: transparent;
    color: red;
    font-size: 20px;
    width: fit-content;
    border: none;
    outline: none;
    box-shadow: none;
}

.float_bag_btm 
{
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    height: 80px;
}

.float_bag_btm h6 
{
    font-size: 16px;
    font-weight: 400;
    margin: 0;
}

.float_bag_btm h1 
{
    font-size: 22px;
    font-weight: 600;
    color: var(--hover-color);
    margin-top: 5px;
    margin-bottom: 0;
}

.float_bag_btm a 
{
    background-color: var(--secondary-color);
    color: white;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    padding: 10px 20px;
    border-radius: 6px;
    display: inline-block;
    text-decoration: none;

    &:hover 
    {
        background-color: var(--hover-color);
    }
}


/* checkout */

.checkout
{
    padding: 50px 0;
}

.checkout_left,
.checkout_right
{
    margin: 10px 0;
}

.checkout_left h2 
{
    font-size: 20px;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 20px;
}

.checkout_inp_era label
{
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 5px;
    display: block;
}

.checkout_inp_era input,
.checkout_inp_era textarea
{
    height: 40px;
    width: 100%;
    border: 1px solid #e5e7eb;
    padding: 5px 10px;
    font-size: 16px;
    font-weight: 400;
    outline: none;
    box-shadow: none;
    border-radius: 5px;
}

.checkout_inp_era textarea
{
    height: 100px;
}

.coupon_era h3 
{
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 10px;
    color: var(--hover-color);
}

.coupon_inp_era 
{
    display: grid;
    grid-template-columns: 75% 20%;
    justify-content: space-between;
}

.coupon_inp_era input
{
    height: 50px;
    width: 100%;
    border: 1px solid #e5e7eb;
    padding: 5px 10px;
    font-size: 16px;
    font-weight: 400;
    outline: none;
    box-shadow: none;
    border-radius: 5px;
}

.coupon_inp_era button
{
    width: 100%;
    height: 50px;
    font-size: 16px;
    font-weight: 500;
    color: white;
    background-color: var(--secondary-color);
    border: none;
    outline: none;
    box-shadow: none;
    border-radius: 5px;

    &:hover 
    {
        background-color: var(--hover-color);
    }
}

.coins_sec 
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 0;
}

.coins_sec h4 
{
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.coins_sec h4 img 
{
    width: 30px;
}


.coins_sec button
{
    height: 50px;
    padding: 5px 10px;
    font-size: 16px;
    font-weight: 500;
    color: white;
    background-color: var(--secondary-color);
    border: none;
    outline: none;
    box-shadow: none;
    border-radius: 5px;

    &:hover 
    {
        background-color: var(--hover-color);
    }
}



.sipping_method  
{
    margin-top: 20px;
}

.sipping_method h2,
.payment_method h2
{
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 10px;
}

.sipping_method_item 
{
    margin: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sipping_method_item > div 
{
    display: flex;
    gap: 8px;
}

.sipping_method_item > div input
{
    cursor: pointer;
    accent-color: var(--hover-color);
}

.sipping_method_item > div label 
{
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    display: block;
    cursor: pointer;
}

.sipping_method_item p 
{
    margin: 0;
    font-size: 16px;
    font-weight: 400;
}

.total_payment_item 
{
    margin: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.total_payment_item p 
{
    margin: 0;
    font-size: 16px;
    font-weight: 400;
}

.total_payment_item h5 
{
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.total_payment_item h5:last-child
{
    color: var(--hover-color);
}

.payment_method_item
{
    margin: 10px 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.payment_method_item label 
{
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    display: block;
    cursor: pointer;
}

.payment_method_item input
{
    accent-color: var(--hover-color);
} 

.place_order_btn
{
    background-color: var(--hover-color);
    color: white;
    font-size: 18px;
    font-weight: 500;
    padding: 12px;
    text-align: center;
    display: block;
    width: 100%;
    border: none;
    outline: none;
    box-shadow: none;
    border-radius: 5px;
}

/* profile header */

.profile_header
{
    padding-top: 30px;
}

.profile_title 
{
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 20px;
}

.profile_manage_era a 
{
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
}

.coin_box h5 
{
    font-size: 16px;
    font-weight: 500;
    margin: 0;
}

.coin_box h1 
{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 30px;
    font-weight: 600;
    margin: 10px 0;
}

.coin_box h1 img 
{
    width: 30px;
}


/* general settings */

.general_settings
{
    padding: 30px 0;
}

.general_settings_in
{
    margin: 10px 0;
    border: 1px solid var(--primary-color);
    padding: 20px;
    border-radius: 5px;
    background-color: #e5e7eb;
}

.general_settings_in h2 
{
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 10px;
}

/* order list */

.order_list 
{
    padding: 30px 0;
}

.order_list img 
{
    min-width: 100px;
    width: 100px;
}

.order_info_tbl p 
{
    margin: 2px 0;
    font-size: 14px;
    font-weight: 400;
}

.order_info_tbl h5 
{
    color: var(--hover-color);
}