:root{
    --primary-red: #f40009;
    --primary-color: #ffa7aa;
    --primary-green: #008f39;
    --neutral-white: #ffffff;
    --dark-black: #222222;
    --normal-black: #343434;
    --accent-blue: #00aeef;
    --highlight-orange: #ff6f00;
    --primary-hover:#ff464b;
    --white:#fff;
    
}
::-webkit-scrollbar{
    width: 12px;
}
::-webkit-scrollbar-thumb{
    border-radius: 8px;
    background:var(--dark-black);
}
#loader {
    position: fixed;
    left: 50%;
    top: 75%;
    transform: translate(-50%, -50%);
    font-size: 1.5em;
    color: #333;
    z-index: 1000;
}
body{
    background-color: var(--neutral-white);
    font-family: "Poppins", serif;
    font-weight: 500;
    font-style:normal;
}
#header{
    position: sticky;
    top: 0;
    left: 0;
    z-index: 100;
}
.text-sm{
    font-size: .8rem !important;
}
#coupons{
    height:350px;
}
.offer_card{
    height:350px;
    overflow:aut4;
    
}
.brand a{
    text-decoration: none;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}
.brand img{
    width:160px;
}
.brand .logo-icon{
    width: 35px;
    animation-delay: 1.5s;
    height: auto;
}
.mobile_search{
    display:none;
}
#nav{
    height: 10vh;
    padding: 0 8px;
    /*background-color: #e3e3e3;*/
    /*box-shadow: 5px 5px 20px -12px rgba(0, 0, 0, 0.406);*/
}
#nav .container-fluid{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}
#nav .nav-left,#nav .nav-right{
    display: flex;
    align-items: center;
    height: 100%;
    gap: 10px;
    flex: 1;
}
#nav .nav-right{
    justify-content: flex-end;
}
#nav .nav-middle{
    display:flex;
    align-items:center;
}
#nav .toggler{
    border: none;
    outline: none;
    background-color: var(--neutral-white);
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
}
#nav .toggler i{
    color: var(--primary-red);
    font-size: 1.4rem;
    text-shadow: 0px 0px 5px rgba(221, 246, 255, 0.251);
    
}
.goog-te-gadget .goog-te-combo{
    padding: 5px;
    background: #fffcf4;
    border-radius: 25px;
}
#nav .search{
    background-color: var(--neutral-white);
    border-radius: 9px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #a4a4a4;
    overflow: hidden;

}
#nav .search input{
    border: none;
    outline: none;
    max-width:280px ;
    width: 280px;
    font-size: 14px;

}
#nav .location {
    color: var(--neutral-white);
    padding: 12px 19px;
    transition: .4s;
    border-radius: 25px;
    cursor: pointer;
    font-size: .8rem;
    font-weight: bold;
    background: var(--primary-red);
}
#nav .search .search-icon{
    color: var(--primary-red);
}
#nav .search .list-icon{
    color: var(--primary-red);
}
#sidebar .profile img{
    width:100%;
    border-radius: 50%;
}
#nav .cart,#nav .profile{
    width: 35px;
    height: 35px;
    padding:5px;
    display: grid;
    place-items: center;
    color: var(--neutral-white);
    border-radius: 50%;
    /* background-color: var(--primary-color); */
    transition: .4s;
}
#nav .cart:hover,#nav .profile:hover{
    /* background-color: var(--primary-hover); */
    filter: drop-shadow(0px 0px 5px rgba(86, 86, 86, 0.443));
}
#nav .cart i,#nav .profile i{
    font-size: .9rem;
}
#nav .cart{
    position: relative;
}
#nav .cart .dot{
    position: absolute;
    top: -5px;
    right: -5px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: rgb(255, 40, 40);
    color: var(--neutral-white);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    font-size: .8rem;
    margin: 0 !important;
    user-select: none;
}
#categories{
    background-color: var(--primary-hover);

}
#categories .links{
    display: flex;
    list-style-type: none;
}
#categories .links a{
    padding: 10px 15px;
    color: var(--neutral-white);
    text-decoration: none;
    display: inline-block;
    font-weight: 500;
    font-size: .9rem;
    border: 3px solid var(--primary-hover);
}
#categories .links a:hover{
    border-bottom: 3px solid var(--primary-color);
}
#banners{
    width: 100%;
    aspect-ratio: 18/4;
}

#banners .swiper {
    width: 100%;
    height: 100%;
  }

#banners .swiper-slide a{
    width: 100%;
}
#banners .swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
}

#banners .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.swiper-button-next:after, .swiper-button-prev:after{
    font-size: 18px !important;
    font-weight: 900 !important;
}
.swiper-button-next, .swiper-button-prev{
    background-color: var(--neutral-white);
    border-radius: 50%;
    width: 42px;
    height: 42px;
    color: var(--primary-red);
}
#banners .swiper-pagination-bullet{
    width: 15px;
    height: 15px;
    border: 2px solid rgb(78, 78, 78);
    opacity: .7;
}
.swiper-pagination-bullet{
    bottom: 0 !important;
}
#adds{
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#adds .add{
    border-radius: 10px;
    overflow: hidden;
}
#adds .add img{
    width: 100%;
}

#sidebar{
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    overflow: hidden;
    height: 100%;
    background-color: var(--neutral-white);
    z-index: 1001;
    transform: translateX(-100%);
    transition: .2s;
}
#sidebar.active{
    width: 25vw;
    transform: translateX(0);
    transition: .3s ;
}
#sidebar .header{
    height: 12vh;
    padding: 0 25px;
    background:#ff2424;
    color: var(--neutral-white);
    align-items: center;
    border-right: 5px solid var(--neutral-white);
}
.close-sidebar:hover{
    cursor: pointer;
}
.close-sidebar{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: grid;
    place-items: center;
}
#sidebar .profile{
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: var(--neutral-white);
    color: var(--primary-color);
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    transition: .4s;
}
#sidebar .profile:hover{
    box-shadow: 0px 0px 1px 5px rgb(221, 221, 221);
    cursor: pointer;
}
#sidebar .links::-webkit-scrollbar{
    width: 5px;
}
#sidebar .links::-webkit-scrollbar-thumb{
    background-color: #c0c0c0;
}
#sidebar .links{
    list-style-type: none;
    overflow: auto;
    height: 90%;
}
#sidebar .links li{
    border-bottom: 1px solid rgb(218, 218, 218);
    padding: 13px 0;
}
#sidebar .links .heading{
    color: var(--dark-black);
    margin: 10px 0;
    font-weight: bold;
    font-size: .9rem;
}
#sidebar .links a{
    text-decoration: none;
    color:#222222;
    /*color: rgba(0, 0, 0, 0.65);*/
    font-weight: 600;
    display: flex;
    
}
#sidebar .links a span{
    margin: 0 !important;
    padding: 0 !important;
    display: block;
}
#sidebar .links i{
    margin-right: 13px;
    font-size: 1.2rem;
    color: #ff2424;
}
#overlay{
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.432);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    display: none;
}
#overlay.active{
    display: initial;
}
.product-add-slider{
    padding:10px 15px;
}
.product-add-slider .swiper .swiper-slide img:hover{
    transform: scale(1.05);
}
.product-add-slider .swiper .swiper-slide{
    overflow: hidden;
}
.product-add-slider .swiper .swiper-slide img{
    width: 100%;
    height: auto;
    transition: .4s;
}
.swiper-slide a{
    height: 100%;
}
.product-box{
    border: 1px solid #f0f0f0;
    padding-bottom: 12px;
    
}
#products{
    display: flex;
}
#products .product-box{
    width: 100%;
}
.product-box a{
    text-decoration: none;
    color: rgb(68, 68, 68);
}
.product-box .desc{
    font-size: .9rem;
    height: 50px;
    width: 100%;
    text-overflow: ellipsis;
    padding:10px;
    overflow: hidden;
}
.product-box .btns{
    padding:0 10px;
}
.product-box .original-price{
    padding: 0 10px;
}
.product-box .price{
    font-weight: bold;
    font-size: .9rem;
    color: black;
    padding:0 10px;
}

.original-price .d{
    font-size: .9rem;
    text-decoration: line-through;
}
.original-price .off{
    color: green;
    font-size: .8rem;
    background-color: rgb(191, 255, 191);
    margin-left: 4px;
    padding: 2px 5px;
    border-radius: 3px;
}
.product-box .add_cart:hover{
    background: var(--primary-red) !important;
    color:var(--neutral-white);
}
.btn-warning{
    border: none;
}
.bg-warning{
    background: var(--neutral-white) !important;   
    color: var(--dark-black);
}
.text-warning{
    color: var(--primary-red) !important;
    font-family: "Roboto", serif;
    font-weight: 700;
    font-style: normal;
    margin-bottom: 0;
}
a:hover{
    text-decoration:none !important;
}
.btn-primary:hover{
    background-color: var(--primary-green);
}
.btn-primary{
    background-color: var(--primary-color);
    color:var(--black);
    border:none;
}
.product-box .add_cart{
    display: flex;
    color: var(--dark-black);
    font-weight: bold;
    gap:4px;
    border: none;
    background: transparent;
    padding: 7px 9px;
    border-radius: 25px;
    border: 1px solid var(--primary-green);
    flex:1;
    font-size: 0.6rem;
}
.product-box .img{
    width: 100%;
    aspect-ratio: 4/5;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:#f5f5f5;
    padding:10px;
    
}
.product-box .img img{
    width: 100%;
    height: 100%;
    /*object-fit: contain;*/
}
#bottom-nav{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--neutral-white);
    box-shadow: -5px -5px 20px -15px black;
    padding:0px 20px;
    z-index: 100;
}
#bottom-nav .nav-items{
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style-type: none;
    margin: 0 !important;
    padding: 13px 0 !important;
}
#bottom-nav .nav-items .item a{
    display: flex;
    flex-direction: column;
    text-decoration: none;
    align-items: center;
    color: var(--gray);
}
#bottom-nav .nav-items .item.active a {
    color: var(--primary-hover);
}
#bottom-nav .nav-items .item a:active{
    color: var(--primary-hover);
}
.page-navigation{
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f3f3f3;
    padding: 10px;
}
.page-navigation .page{
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
    
}
.page-navigation .page i{
    color: var(--primary-hover);
    font-size: .8rem;
    margin-top: 3px;
}
.page-navigation .page a{
    color: var(--dark-black);
    text-decoration: none;
}
.page-navigation .page.active i{
    color: var(--gray);
    font-size: .8rem;
    margin-top: 3px;
}
.page-navigation .page.active a{
    color:#616161;
    text-decoration: none;
}
.product_details .row{
    height: 100%;
}
.product_details .product_slider{
    height: 100%;
}
.thumbnails .swiper{
    width: 100%;
    height: 100%;
}
.m-h{
    height: 65vh !important;
}
.thumbnails .swiper-slide-thumb-active{
    border: 1px solid var(--primary-hover) !important;
}
.thumbnails .swiper-slide{
    border: 1px solid rgb(199, 199, 199);
    padding: 10px;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;

}
.product-imgs .swiper-slide img{
    height: 100%;
    width: 100%;
    /*object-fit: contain;*/
}
.product-imgs iframe{
    width:100% !important;
    height:100% !important;
}
.product-imgs .swiper .swiper-slide{
    padding: 25px 15px;
    /*width:5px;*/
}
.product-imgs .swiper{
    height: 100%;
}
.thumbnails .swiper-slide img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.product-imgs{
    border-radius: 20px;
    box-shadow: 0px 0px 20px -10px #2b2b2b30;
    height: 65vh !important;
    border:1px solid rgb(230,230,230);
}


.product-price .price{
    font-size: 1.6rem;
}
#price_section .discount{
    font-size: 1.1rem;
}
.product-price .off{
    font-size: 1.2rem;
    font-weight: bold;
    padding: 3px 7px;
    background-color: rgb(216, 255, 216);
    color: green;
}
.o-price{
    text-decoration: line-through;
}
.product_action_btn:hover{
    background-color: var(--primary-color);
    color:var(--black);
}
.product_action_btn{
    background: var(--primary-red) !important;
    color: var(--neutral-white) !important;
}
.product_action_btn.in-box{
    width: auto;
    font-size: .7rem;
    padding: 7px 9px;
    flex: 1;
    background: var(--primary-red);
    color: var(--neutral-white);
    /*border: 1px solid var(--primary-color);*/
}
.product_action_btn{
    width: 47%;
    padding: 6px 0;
    border: none;
    outline: none;
    background: var(--primary-color);
    color: var(--black);
    font-weight: bold;
    font-size: 1rem;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.product_action_btn.add_to_cart:hover{
    background: transparent;
    border-color: var(--primary-hover);
}
.product_action_btn.add_to_cart,
.product_action_btn.go_to_cart
{
    background: var(--primary-red) !important;
    color: var(--neutral-white);
}
.all_details{
    font-size: 1.1rem;
}
.all_details .title{
    text-transform:uppercase;
}
#nav .cart img{
    filter: brightness(0.9);
}
.all_details .seller{
    color: var(--primary-color);
}

#address_bar{
    position: fixed;
    top: 0;
    right: 0;
    width: 0;
    overflow: auto;
    height: 100%;
    background-color: var(--white);
    z-index: 1001;
    transform: translateX(100%);
    transition: .4s;
}
#address_bar.active{
    padding: 20px;
    width: 30vw;
    transform: translateX(0);
}
#address_overlay{
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.432);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    display: none;
}
#address_overlay.active{
    display: initial;
}
#address_bar .close_btn{
    background-color: transparent;
    border: none;
    outline: none;
    font-size: 1.6rem;
    color: var(--primary-color);
}
.noscroll{
    height: 100vh !important;
    overflow: hidden;
}
.add_save_btn{
    width: 100%;
    border: none;
    outline: none;
    background-color: var(--primary-color);
    color: var(--white);
    padding: 10px 0 ;
    border-radius: 25px;
}
.card-me{
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 8px;
}
hr{
    margin: .8rem 0;
}
#add_address_btn{
    border: 2px solid rgb(221, 221, 221);
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: block;
    background-color: transparent;
    outline: none;
    color: var(--primary-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.card-me-body .address{
    max-width: 400px;
}
.estimated_date{
    color: rgb(0, 122, 0);
    font-size: .9rem;
}
.p_full_name{
    color: rgb(78, 78, 78);
    font-size: .95rem;
}
.prices .price{
    font-weight: bold;
    font-size: 1rem;
}
.prices .discount{
    font-size: .8rem;
    text-decoration: line-through;
    color: rgb(70, 70, 70);
}
.qty_val{
    width:55px;
    text-align: center;
}
.qty_btns{
        border: none;
    outline: none;
    padding: 0 12px;
    border-radius: 2px;
}
.saves{
    background-color: #a6ffb8;
    color: black;
    padding:3px 7px;
    display: inline-block;
    border-radius: 4px;
    font-size: .8rem;
}
.sold_by{
    font-size: .8rem;
}



/* PROGRESS TRACKER */
.progress{
    height: 100px;
    width: 100%;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff5f5;
    border-radius: 15px;
}

.progress .container {
    width: 100%;
    margin: 0 auto;
  }
  
  .progress-meter {
    padding: 0;
  }
  
  ol.progress-meter {
    padding-bottom: 9.5px;
    list-style-type: none;
  }
  ol.progress-meter li {
    display: inline-block;
    text-align: center;
    text-indent: -19px;
    height: 36px;
    width: 32.99%;
    font-size: 12px;
    border-bottom-width: 4px;
    border-bottom-style: solid;
    border-color:gray ;
}
ol.progress-meter li:before {
    position: relative;
    float: left;
    text-indent: 0;
    left: calc(50% - 9.5px);
  }
  ol.progress-meter li.done {
    font-size: 12px;
  }
  ol.progress-meter li.done:before {
    content: "\2713";
    height: 19px;
    width: 19px;
    line-height: 21.85px;
    bottom: -25px;
    border: none;
    border-radius: 19px;
  }
  ol.progress-meter li.todo {
    font-size: 12px;
  }
  ol.progress-meter li.todo:before {
    content: "\2B24";
    font-size: 17.1px;
    bottom: -25px;
    line-height: 18.05px;
  }
  ol.progress-meter li.done {
    color: black;
    border-bottom-color: yellowgreen;
  }
  ol.progress-meter li.done:before {
    color: white;
    background-color: yellowgreen;
  }
  ol.progress-meter li.todo {
    color: rgb(233, 136, 10);
    border-bottom-color: rgb(233, 136, 10);
  }
  ol.progress-meter li.todo:before {
    color: rgb(233, 136, 10);
  }
  
.card-notice{
    background-color: #cbffd5;
    border-radius: 15px 15px 0 0;
}
.discount .value{
    color: rgb(81, 201, 81);
}
.text-cut{
    text-decoration: line-through;
    font-weight: 400;
}
.payment_btn{
    width: 100%;
    padding: 10px 0;
    background-color:#f40009;
    color: white;
    display: inline-block;
    border-radius: 25px;
    text-decoration: none;
    text-align: center;
    font-size: 1.1rem;
}
.counter-btn{
    border-radius: 50%;
    background-color: white;
    border: 1px solid rgb(170, 170, 170);
    font-size: 1.4rem;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}
.remove_from_cart_btn i{
    color: var(--primary-red);   
}
.remove_from_cart_btn:hover{
    background-color: rgb(230,235,225);
}
.page-heading{
        background: #f3f3f3;
    padding: 10px;
}
.remove_from_cart_btn{
    background-color: white;
    border: 1px solid var(--primary-green);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    
}
.card-submit-btn{
    background-color: var(--primary-color);
    color: white;
    font-size: 1.1rem;
    border-radius: 25px;
    width: 150px;
    border: none;
    outline: none;
    padding: 8px 0;
}
details{
    transition: .4s;
    border-bottom: 1px solid rgb(202, 202, 202);
}
.category summary{
    display: flex;
    align-items: center;
    gap: 20px;
    width: 85%;
    overflow: hidden;
}
.category summary .img img{
    width: 100px;
}
.category .category-name{
    font-weight: bold;
}
.category .category-details p{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
}
.sub-categories{
    list-style-type: none;
    margin-left: 50px;
}
.sub-categories .img img{
    width: 50px;
}
.sub-categories a{
    text-decoration: none;
}
.sub-categories .name{
    font-weight: bold;
    color: black;
}
.sub-categories li{
    border-bottom: 1px solid rgb(190, 190, 190);
    padding: 10px 0;
}
.f-9{
    font-size: .9rem;
}
.f-8{
    font-size: .8rem;
}
.profile-sidebar{
    border: 1px solid rgb(221, 221, 221);
    border-radius: 25px;
    padding: 30px 20px; 
}
.profile-sidebar i{
    color: var(--primary-red);
}
.sidebar-header {
    border-bottom: 1px solid  rgb(221, 221, 221);
    padding-bottom: 20px;
}
.sidebar-header .icon img{
    width:100%;
}
.sidebar-header .icon{
    width: 55px;
    height: 55px;
    background-color: rgb(223, 239, 255);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: var(--primary-color);
}
.profile-card{
    border-radius: 25px;
    border: 1px solid rgb(204, 204, 204);
}
#home-category{
        box-shadow: 5px 5px 20px -20px;
}
.home-category.trending .img{
        border: 2px solid var(--primary-red);
} 
.home-category.trending .label{
    color:var(--dark-black);
}
.home-category .img{
    border-radius:15px;
    width: 82px;
    height: 92px;
    overflow: hidden;
    margin: 0 auto 8px auto;
}
.home-category img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#home-category .swiper-slide{
    width: initial;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.home-category{
    text-decoration: none;
    color: var(--black);
}
.tranding .home-category{
        color:#d1b554 !important;
}
.tranding{
        background: #000;
        padding: 15px;
        box-sizing: content-box;
        border-radius:12px;
        width:150px !important;
    }
#add_address_btn.new_add_btn{
    width: 100%;
    display: block;
    background-color: var(--primary-hover);
    border-radius: 12px;
    color: var(--white) ;
}
.new_add_btn{
    width: 100%;
    display: block;
    background-color: var(--primary-hover);
    border-radius: 12px;
    color: var(--white) ;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-size:1.5rem;
}
.search_category{
    border: none;
    outline:none;
    font-size: 0.8rem;
    padding: 7px;
    min-width: 50px;
    background: #f3f3f3;
}
.search_btn i{
    color:var(--primary-red) !important;
}
.search_btn{
    background: #f3f3f3;
    padding: 5px 15px;
}

.animate{
    animation: blink 1s ease-in-out .1s 1 backwards;
}
.blink{
    animation: changeColor 1s infinite;
}
@keyframes blink {
    0%{
        transform: scale(1.5);
    }
    50%{
        transform: scale(1);
    }
    100%{
        transform: scale(1.3);
    }
}
@keyframes changeColor {
    0%{
        filter: hue-rotate(45deg);
        transform: scale(1.2);
    }
    100%{
        filter: hue-rotate(0);
        transform: scale(1);
    }
}
#nav .home{
    color: var(--primary-color);
    font-size: 1.4rem;
}
.home-category > .label{
    text-align: center;
    white-space:nowrap;
    font-size:.8rem;
}
.nav-right a i{
    color: var(--dark-black);
    font-size: 27px !important;
    
}
.nav-right a.log-icon-btn i{
    color: var(--neutral-white);
    font-size: 14px !important;
    margin-right: 4px;   
}
.nav-right .login-btn, .check-prod{
    background-color: var(--primary-red);
    color: var(--neutral-white);
    padding: 7px 10px;
    font-weight: 500;
}
.nav-right .login-btn:hover{
    background-color: #ff2028 !important;
    
}
.nav-right .reg-btn{
    background: var(--primary-red) !important;
    color: var(--neutral-white);
    padding: 7px 10px;
    font-weight: 500;
}
.nav-right .reg-btn:hover{
    background-color: #ff2028 !important;
    color: var(--neutral-white);
}
#footer{
        background: linear-gradient(to right,#ff5a5a, var(--primary-red)) !important;
        color: var(--neutral-white);
}
#footer .copyright{
    background: linear-gradient(to right, #ffc800, #ffd700 50%, #ffd700 50%, #ffc800) !important;
}
.ui-widget.ui-widget-content{
    max-height:50vh;
    overflow-y:auto !important;
    overflow-x:hidden !important;
}
.city-card .card-title{
    white-space:nowrap;
}
.city-card:hover{
    background:rgb(235,240,222);
}
.city-card{
    padding:10px;
    display:flex;
    justify-content:center;
    flex-direction:column;
    align-items:center;
    gap:5px;
    text-decoration:none;
}
.size-options, .color-options{
    display:flex;
    gap:5px;
    flex-wrap:wrap;
}
.color-container{
    /*padding:4px; */
    background:#ededed;
    display:flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px !important;
    overflow: hidden;
}
.color-options .color-option{
    width:42px;
    height:42px;
}
.color-option,.size-option {
    display: inline-block;
    border: 1px solid gray;
    box-shadow: 2px 2px 20px -10px #00000087;
    text-decoration: none;
    color: black;
    padding: 5px;
    display: inline-block;
    font-size: 0.8rem;
    cursor:pointer;
    min-width: 30px;
    overflow: hidden;
    text-align: center;
}
.size-option{
    border: 1px solid #e1e1e1;
    border-radius: 25px;
    padding: 5px 12px;   
}
.color-option.selected,.size-option.selected {
    border: 2px solid var(--primary-color);
}
#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    color: #455A64;
    padding-left: 0px;
    margin-top: 30px;
    position: relative;
    display: flex;
    justify-content: space-between;
}
#progressbar::before {
    content: '';
    position: absolute;
    top: 21px;
    left: 50%;
    transform: translateX(-50%);
    height: 2px;
    width: 80%;
    background: var(--primary-color);
    border-radius: 5px;
}
#progressbar li {
    list-style-type: none;
    font-size: 13px;
    width: 25%;
    float: left;
    position: relative;
    font-weight: 400;
}
#progressbar li.cancel:before, #progressbar li.cancel:after{
    background:red;
}

#progressbar .step0:before {
    font-family: FontAwesome;
    content: "\f017";
    color: #fff;
}
#progressbar .step0.cancel:before {
    font-family: FontAwesome;
    content: "\f00d";
    color: #fff;
}

#progressbar li:before {
    width: 40px;
    height: 40px;
    line-height: 45px;
    display: block;
    font-size: 20px;
    background: #ff6e00;
    border-radius: 50%;
    margin: auto;
    padding: 0px;
}

/*ProgressBar connectors*/
#progressbar li:after {
    content: '';
    width: 100%;
    height: 12px;
    background: #C5CAE9;
    position: absolute;
    left: 0;
    top: 16px;
    z-index: -1;
}

#progressbar li:last-child:after {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    position: absolute;
    left: -50%;
}

#progressbar li:nth-child(2):after, #progressbar li:nth-child(3):after {
    left: -50%;
}

#progressbar li:first-child:after {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    position: absolute;
    left: 50%;
}

#progressbar li:last-child:after {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

#progressbar li:first-child:after {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

/*Color number of the step and the connector before it*/
#progressbar li.active:before, #progressbar li.active:after {
    background: #00db7f;
}

#progressbar li.active:before {
    font-family: FontAwesome;
    content: "\f00c";
}

#progressbar .icon {
    width: 60px;
    height: 60px;
    margin-right: 15px;
}
.sec-heading{
    color:var(--dark-black) !important;
    text-transform:uppercase;
    font-weight: 600;
}
.code{
    padding:4px 10px;
    background:#f3f3f3;
    border-radius:25px;
}
.qnt_input{
    width:55px;
    outline:none;
    text-align:center;
}
.btn-primary:hover{
    background: #f40009;    
}
.btn-primary{
    background: #f40009;
    padding: 5px 15px;
    border-radius: 20px;
    color: white !important;
}
.minus_btn,.plus_btn{
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 1.2rem;
    background: #ededed;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    box-shadow: 5px 5px 20px -10px;
    border: 1px solid #aaaaaa;
    padding: 0;
}
.address_option.active{
    background: #e7e7e7;
}
.address_option{
    border:1px solid #eee;
    padding: 10px;
    border-radius: 10px;
    cursor:pointer;
}

.tranding_btn{
    width:200px !important;
}

.wishlist_btn i{
    font-size:2.4rem;
    /*text-shadow:5px 5px 20px #959595;*/
}
.wishlist_btn{ 
    position: absolute;
    bottom: 36px;
    right: 23px;
    z-index: 4;
    color:var(--primary-red) !important;
    background: none;
    border: none;
}
.product-box .wishlist_btn i{
    font-size:1.4rem;
}
.product-box .wishlist_btn{
    bottom:initial;
    top:17px;
    right: 16px;
}
.wishlist_btn:hover i{
    transform:scale(1.1);    
}
.empty_cart img{
    width:60%;
    min-width:250px;
    max-width:800px;
}
.cart-product-img{
    display:flex;
        background: #eaeaea;

    padding:5px;
}
.cart-product-img img{
    max-height:100px;
        width: 100%;
    object-fit: contain;
    border-radius:6px;
}
.zoomist-slider{
    display:none;
}
.zoomist-zoomer{
    display:none;
}

.swiper-pagination-bullet-active{
    background:var(--primary-color) !important;
}
.max-600{
    max-height:600px;
    overflow:auto;
    
}
.max-600::-webkit-scrollbar {
    width: 3px;
}
.cart-item{
    position:relative;
}
.cart-item .cart_item_select{
    position:absolute;
    top:5px;
    left:5px;
    width:15px;
    height:15px;
}
.product_slider .swiper-button-next,.product_slider .swiper-button-prev{
    width:40px;
    height:40px;
    border-radius:8px;
} 

.product_slider .swiper-button-next:after, .product_slider .swiper-button-prev:after{
 color:var(--primary-color);   
}
#image_view{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index:1000;
    background: #00000090;
    backdrop-filter: blur(1px);
    display:none;
}
#image_view.active{
    display:block;
}
.close_image_view{
    position:absolute;
    top:2vh;
    right:2vw;
    background:var(--neutral-white);
    border:none;
    outline:none;
    box-shadow:2px 2px 15px -10px;
    border-radius:50%;
    width:50px;
    height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:100;
}
.image_swiper{
    width:100%;
    height:100%;
    user-select:none;
}
.image_swiper .swiper-slide{
    display:flex;
    justify-content:center;
    align-items:center;
}
.image_swiper .swiper-slide img{
    max-width:85%;
    max-height:90%;
}
.foot-color li{
    font-size: 14px;
}
.foot-head-color{
    color: var(--neutral-white) !important;
    font-weight: 700;
}
.mobile-pad-login{
    background-color: var(--neutral-white);
    color: var(--dark-black);
    font-weight: 500;
    padding: 5px 14px;
}
.mobile-pad-login:hover{
    background-color:#eaeaea !important;
    color: var(--dark-black) !important;
}
.log-in-btn, .otp-varify , .sent-otp-ver, .otp-verify-check, .reg-btn-check, .prof-save-btn{
    background-color: var(--primary-red) !important;
    color: var(--neutral-white) !important;
    padding: 7px 15px;
    font-weight: 500;
}
.for-get-pass a{
    color: rgb(5 5 5 / 75%) !important;
    text-decoration: none;   
}
.eye-color-cng{
    background-color: #f3f3f3;
    color: var(--dark-black);
    border: 1px solid var(--dark-black);
}
.eye-color-cng:hover{
    background-color: #f3f3f3 !important;
    color: var(--dark-black);
    
}
#nav .profile{
    width: 55px !important;
    height: 55px !important;
    padding: 0 !important;
}
#nav .nav-profile-img a img{
    width: 100%;
    border-radius: 50%;
}
.size-small{
    font-size: 13px;
}