/* @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');


*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

:root
{
--mainbrand-color:#650046;
--secondbrand-color:#FF6401;
--atag-color:#878787 ;
--title-color:#0000;
--gray-color:#383838;
--border-color:#dedede; 
--body-background-color:#ffffff;
}
body
{
    background-color:#fff ;
    /* font-family: "Open Sans", Helvetica, Arial, sans-serif; */
    font-family: 'Roboto',Helvetica, sans-serif;
}
img{
    max-width: 100%;
}
.container{
    max-width: 1495px;
    margin: auto !important;
}
p{
    margin: 0;
}
ul{
    list-style: none;
    margin: 0px;
    padding: 0px;
}
hr{
    color: var(--atag-color);
    margin: 10px 0px 0px 0px;
}
/* .fa-house{
    color:#000;
    margin-left: 10px;
} */
.array-hide{
    display: none ;
}
.array-show{
    display: block;
    position: fixed;
    right: 0px;
    bottom: 25px;
    z-index: 9999;
}
.array-show a{
    
    background-color: var(--secondbrand-color);
    padding: 10px;
    border-radius:5px ;
    color: #fff;
}

a{
    text-decoration: none;
}
.rating-color{
    color: #F7AB01;
}
.img{
    width: 100%;
}

/*  */
button.download-btn {
    color: #fff;
    padding: 4px 32px;
    border: 1px solid blue;
    background: blue;
    border-radius: 4px;
}
/***** main header home page ***/
.small-logo-mbl{
    display: none;
    width: 55px;
}

#header-main
{
    background-color: #fff;
    padding: 5px 0px ;
    
}

.turantcall-header {
    position: relative;
    transition: top 0.5s ease; /* Smooth transition */
}

.header-sticky {
    position: fixed;
    top: 0px; 
    left: 0;

    width: 100%;
    z-index: 1000;
    background-color: #fff;
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
    transition: top 0.9s ease; /* Smooth transition for sticky */
}

.sticky {
    top: 0; /* No need to change top, just in case */
}
.header-sticky .header-main-part {
    padding: 3px 20px 10px 0px;
}
.top-header-main 
{
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.menu-drop-div{
    position: relative;
    cursor: pointer;
        ul{
          margin: 0;
          padding: 0;
          li{
            list-style: none;
            padding: 5px 10px;
            i{
                font-size: 20px;
                padding-right: 9px;
            }
            a{
              color:rgb(50, 50, 50) !important;
              display:block;
              font-size: medium;
              
              padding: 3px;
              &:hover{
                text-decoration: underline;
                color: var(--secondbrand-color) !important;
              }
            }
          }
        }
    .menu-drop-div-top{
        position: absolute;
        top: 0;
        right: -70px;
        display: none;
        z-index: 4;
    }
    .drop-menu{
      margin-top: 40px;
      width: 253px;
      font-size: 13px;
      background-color: #ffff;
      padding: 10px;
      border-radius: 5px;
      box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2) !important;
      
      
      &::before{
        content: "";
        position: absolute;
        top: 30px; /* Adjust position above the menu */
        right: 50%; /* Adjust horizontal position */
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid var(--mainbrand-color); /* Color of the triangle */
      }

      
    }
  }
  .menu-drop-div:hover .menu-drop-div-top{
    display: block;
  }
/*************category*********/

.category-show-header .top-header-main 
{
    display: none;
}
.header-main-part-search-part-category
{
    display: none !important;
}
.category-show-header .header-main-part-search-part-category
{
    display: block !important;
    width: 30%;
    padding-right: 5px;
}
.top-header-main ul
{
    list-style: none; 
    margin: 0px;   
}
.top-header-main ul:last-child
{
    margin-right: 20px;
    border: 0px;
}
.top-header-main ul li
{
    display: inline-block;
    border-right: 1px solid var(--border-color); 
    font-weight: 100;
    font-size: 12px;
     
}
.top-header-main ul li a
{
    color: var(--atag-color);
    padding: 5px 15px;
    text-align: center;
}
.top-header-main ul li a:hover
{
    color: var(--secondbrand-color);
}
.header-main-part
{
    display: grid;
    grid-template-columns: 25% 50% 25%;
    align-items: center;
    padding: 5px 20px 5px 0px;
    background: #000;
}
.header-main-part-logo img
{
   padding-left: 15px;
    width: 200px;
    
}

/*"***search part *****/
.header-main-part-search-part{
    margin-right:5px ;
}
.header-main-part-search-part-search
{
    width: 95%;
    margin-left: auto;
}
.header-main-part-search-part-search .search-box-main
{
    width:100%;
}

.header-main-part-search-part-search .search-box-main input
{
    outline: 0px;
    border: 0px solid #000;
    padding:8px 10px 7px;
    width: 100%;
    background-color: #fff;
    border-radius: 5px 0px 0px 5px;
}

.header-main-part-search-part-search .search-box-main .search-icon 
{
   
    padding: 4px 10px;
    background-color: #fff;
    color: #000000;
    border-radius: 0px 5px 5px 0px;
    cursor: pointer;
    font-size: 21px;
}
/***add-to-cart-header-****/
.fa-user{
    color: #fff;
}
.fa-arrow-right-to-bracket
{
    color: var(--mainbrand-color);
}
.header-main-part-add-to-cart-part{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    
}
.header-main-part-add-to-cart-part ul{
    list-style: none;
    margin: 0px;    
}
.header-main-part-add-to-cart-part ul li 
{
    padding-right: 50px;
}
.add-to-cart-header-main span{
color: #fff !important;
 top: -3px;
 left: 30px;
}
/**slider-part***/
.main-content{
    background-color: #fff;
}
.slider-part{
    display: grid;
    grid-template-columns: 20% 80%;
    padding-left: 10px;
}
#slider .carousel-control-prev{
    background-color: #fff;
    width: 35px;
    height: 35px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0px;
    cursor: pointer;
    opacity: 1;
    border-radius:0px 8px 8px  0px;
    display: none;
}
#slider .carousel-control-next{
    background-color: #fff;
    width: 35px;
    height: 35px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0px;
    cursor: pointer;
    opacity: 1;
    border-radius: 8px 0px 0px 8px;
    display: none;
}
.slider:hover #slider .carousel-control-prev, .slider:hover #slider .carousel-control-next{
    display: block;
   
}
.carousel-control-next-icon, .carousel-control-prev-icon{
    display: inline-block;
    width: 1rem;
    padding-top: 36px;
    height: 1rem;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100% 100%;
}
/***main-category**/

.main-category
{
    
    border: 1px solid var(--secondbrand-color);
    border-radius: 7px;
    padding: 0px;
}
.main-category .title
{
    background-color: var(--secondbrand-color);
    display: block;
    color: #F8F9FA;
    padding: 5px 30px;
    border-radius: 5px 5px 0px 0px;
}
.homePage-first-ads{
    width: 90%;
    margin: auto;
    padding: 20px 0px 0px 0px ;
}
.homePage-first-ads img{
    width: 100%;
    height: 100%;
}

/**homePage-second-ads**/
.homePage-second-ads{
    border: 1px solid var(--secondbrand-color);
    border-radius: 30px;
    padding:30px 25px;
    
}
.homePage-second-ads-offer p{
    padding: 0px;
    margin: 0px;
}
.homePage-second-ads-discount{
    /* background-color: var(--secondbrand-color); */
    background-image: url('../../assets/img/offer.png');
    width: 70px;
    height: 70px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: #fff;
    padding: 13px 15px;
}
.homePage-second-ads-discount span{
    padding-left: 0px;
    margin: 0px;
    font-size: 21px;
}
.homePage-second-ads-title span
{
    color: #0062bd ;
    font-weight: 600;
}
.homePage-second-ads-progress-part
{
    font-size: 13px;
    color: #333e48;
}
.progress
{
    height: 20px;  
    border-radius: 10px;  
}
.progress-bar
{
    background-color: var(--secondbrand-color);
}
.homePage-second-ads-prize-part-discount
{
    text-decoration: line-through;
}
.homePage-second-ads-prize-part-sale
{
    color: var(--secondbrand-color);
    font-size: 40px;
}
.homePage-second-ads-time-part-title{
    font-size: 17px;
    color: var(--gray-color);
}
.ads-time-show{
    background: linear-gradient(0deg, var(--mainbrand-color), var(--secondbrand-color));
    border-radius: 3px;
    width: 45px;
    font-size: 30px;
    height: 40px;
    text-align: center;
    color: #fff;
}
.homePage-second-ads-time-part p{
    font-size: 12px;
    text-align: center;
}
/**display-category-main-item**/
/* .display-category-main-item a{    
    margin: 0px 10px;
}
.display-category-main-item-one{
    background-color: #f8f8f8;
}

.display-category {
    color: #2b2929;
    padding-left: 40px;
    font-size: 16px;
}
.display-category-main-item img
{
    width: 100%;
    height: 108px;
}
.category-product-shop {
    font-size: 14px;
}
.arrow-right-category{
    font-size: 12px;
    border-radius: 50%;
    border: 1px solid var(--secondbrand-color);
    padding: 2px;
    color: var(--secondbrand-color);
} */

/**********div-category-prdouct-show-part****/
.div-category-prdouct-show-part{
    display: grid;
    padding:5px 0px 20px 0px;
    grid-template-columns: repeat(9, 11.11%);    
    .div-category-prdouct-show-part-body{
        background-color: #fff;
        border-bottom: 1px solid #e2e2e2;
        border-right: 1px solid #e2e2e2;
        height: 148.5px;
        &:hover{
            box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.2);
            z-index: 5;
        }
        a{  
            padding: 15px 0px 0px 0px;
            color: #000;
            display: block;
            text-decoration: none;
            .div-category-prdouct-show-part-img{
                display: block;
                height: 80px;
                margin: 0 auto;
                width: 80px;
                img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
            .div-category-prdouct-show-part-name{
                text-align: center;
                p{
                    color: #212121;
                    font-size: 14px;
                    height: 36px;
                    line-height: 18px;
                    margin: 8px 12px 0;
                }
            }

        }
    }
}


.div-category-prdouct-show-part-title {
    padding-left: 15px;
    font-size: 16px;
    font-weight: 600;
}
/*********************************************/
.main-feature{
    padding: 20px 0px;
    display: grid;
    grid-template-columns: 25% 75%;

}
.homePage-second-ads img
{
    width: 100%;
}
.feature-praaduct-part{
    display: grid;
    grid-template-columns: repeat(5, 20%);
}
.feature-praaduct-part-mains
{    
    height:330px;
    padding: 0px;
}
.feature-praaduct-part-mains-cover{
    padding: 0px 20px;
}
.feature-praaduct-part-mains-active
{
    box-shadow: 0px 0px 5px 4px #cacaca;
    height: 330px;
}
.feature-praaduct-part-mains-active .feature-card
{ 
    border: 0px;
}
.feature-product-title
{
    text-align: center;
    margin: 0px 30px;
}
.feature-product-title ul{
    border-bottom: 1px solid #dedede;
   
}
.feature-product-title ul li
{
    list-style: none;
    display: inline-block;
    padding: 0px 10px;
    cursor: pointer;
}
.feature-product-title ul .active
{
    font-size: 20px;
    font-weight: bold;
    border-bottom: 2px solid var(--secondbrand-color);
}
.feature-content .sale-active, .feature-content .top-rate-active{
    display: none;
}
.feature-content .feature-active {
    display: block; /* Show the first tab's content */
}
.feature-card-product-img .feat-img-slider-hover{
    display: none;
}
.feature-card-product-img:hover  .feat-img-default{
    display: none;
}
.feature-card-product-img:hover .feat-img-slider-hover{
    display: block;
}
.feature-card-product-img{
    height: 170px;
    overflow: hidden;
    text-align: center;
    margin: 10px 0px;
    .feat-img-slider{
        width: 175px;
        overflow: hidden;
    }
    

    .slick-slide{
        margin: 0px 1px;
        height: 177px;
    }
    .slick-dots li button:hover {
        background-color: unset !important;
        color: var(--secondbrand-color) !important;
    }
    .slick-dots{
        bottom: 2px;
        background: #fff;
        
        li{
            margin: 0;
            padding: 0;
            width: 14px;
            button{
            border: 0;
            background-color: unset;
            &::hover{
                background-color: unset;
                color: var(--secondbrand-color);
            }
           }
        }
        .slick-active{
            button{
                background-color: unset;
                &::hover{
                    background-color: unset;
                    color: var(--secondbrand-color);
                }
                &::before{
                    color: var(--secondbrand-color);
                }
            }
        
    }
    }
}

/* .slick-dots li.slick-active button:before */
.feature-card-product-img a{
    width: 100%;
    height: 170px;
    
}
.feature-card-product-img a img{
    width:100%;
    height: 100%;
    object-fit: contain;
}
.feature-praaduct-part{
    margin: 30px 0px 10px 40px;
}
.feature-card{
    border-right: 0px solid #e2e1e1 ;
}
.feature-card-product-name{
    font-size: 13px;
    font-weight: 300;
    color: var(--atag-color);   
    
}
.feature-card-product-description{
    height: 40px;
    overflow: hidden;

}
.feature-card-product-description p{
    color: #0062bd ;
    font-size: 14px;
    padding-top: 5px;
    font-weight: 600;
    line-height: 17px !important;
}
.feature-card-product-price{
    height: 40px;
}

.feature-card-product-discount-price 
{
    text-decoration: unset !important;;
    font-weight: 600;
    font-size: 12px;
    height: 15px;
    
    span{
        text-decoration: line-through;
        color: var(--atag-color);
        font-weight: 400;
    }
}
.feature-card-product-fix-price {
    font-size: large;
    font-weight: 600;
    color: var(--secondbrand-color);
}
.feature-card-product{
    padding-right: 10px;
}
i.fas.fa-shopping-cart {
    /* background-color: var(--secondbrand-color); */
    border-radius: 50%;
    padding: 2px;
    color: #000;
    cursor: pointer;
    /* box-shadow: 0px 0px 2px 5px var(--secondbrand-color); */
    transition: 0.3s;
}
.i.fa-shopping-cart:hover{
    color: var(--mainbrand-color) !important;
}
.feature-card-product i.fas.fa-shopping-cart:hover{
    scale: 1.1;
    box-shadow: 0px 0px 5px 4px var(--secondbrand-color);
    
    
}
.header-wish i.fa-heart {
    background-color: #ffffff;
    border-radius: 50%;
    padding: 2px;
    color: #0a0a0a;
    cursor: pointer;
    box-shadow: 0px 0px 2px 5px #ffffff;
    transition: 0.3s;
}
.header-wish i.fa-heart:hover{
    color: var(--mainbrand-color) !important;
}
.feature-card-product-down{
    display: none;
}
.feature-praaduct-part-mains-active {
    z-index: 100 !important;
}
.feature-praaduct-part-mains-active .feature-card-product-down{
    display: block;
    font-size: 11px;
    border-top: 1px solid #e2e1e1;
    margin-top: 10px;
    z-index: 100;
}
.feature-card-product-down a{
    color: #878787;

    
}
.hotsDeals-div {
    font-size: 16px;
    color: var(--secondbrand-color);
    display: inline-block; /* Ensures transform works correctly */
    margin-left: 20px;
    animation: jumping 1s ease infinite;
}
.hotsDeals-div:hover{
    color: var(--secondbrand-color);
}
.hotsDeals-div .cative{
    border: 0px;
}
@keyframes jumping {
    0%, 100% {
        transform: scale(1); /* Normal size */
    }
    50% {
        transform: scale(1.3); /* Scaled size */
    }
}
/**best-deals-divide***/
.best-deals-divide
{
    display: grid;
    grid-template-columns: 33% 33% 33%;
    /* background: #e9e8e8; */
    padding: 0px 10px 0px 10px;
    gap: 3px;
    
}
.bestDeals-feature-praaduct-part-mains-active
{
    box-shadow: 0px 0px 5px 4px #cacaca;
    height:100%;
}
.bestDeals-feature-praaduct-part-mains-active .feature-card
{ 
    border: 0px;
}
.bestDeals-feature-praaduct-part-mains-active {
    z-index: 100 !important;
}
.bestDeals-feature-praaduct-part-mains-active .feature-card-product-down{
    display: block;
    font-size: 11px;
    border-top: 1px solid #e2e1e1;
    margin-top: 10px;
    z-index: 10;
}
.best-deals-left .best-deals-card .feature-praaduct-part-mains-cover{
    padding: 5px 5px 0px 5px;
}
.best-deals-right .best-deals-card .feature-praaduct-part-mains-cover{
    padding: 5px 5px 0px 5px;
}
.best-deals-middle .best-deals-card
{
    height: 98% !important;
    padding: 0px 15px;
}
.best-deals-middle .feature-card-product-img {
    height: 500px;
}
.best-deals-middle .feature-card-product-img img
{
   width: 100%;
   height: 100%;
}
.best-deals-feature-card-product 
{
    background: var(--secondbrand-color);
    color: #fff;
    border-radius: 10px;
    padding: 5px 10px 5px 5px;
}
.best-deals-feature-card-product:hover
{
    box-shadow: 0px 0px 5px 4px var(--secondbrand-color);
}
/** best-deals **/
.best-deals{
    /* background-color: #e9e8e8; */
    padding: 5px;
}
.best-deals-title
{
    /* text-align: center; */
    /* margin: 0px 30px; */
}
.bestDealItemmain{
    cursor: pointer;
}
.best-deals-title ul{
    border-bottom: 1px solid #dedede;
   
}
.best-deals-title ul li
{
    list-style: none;
    display: inline-block;
    padding: 0px 10px;
}
.best-deals-title ul li a{
    color: #000;
}
.best-deals-title ul .active
{
    font-size: 20px;
    font-weight: bold;
    color: var(--secondbrand-color);
    border-bottom: 2px solid var(--secondbrand-color);
    a{
        color: var(--secondbrand-color);
    }
}

.best-deals-card{
    background-color: #fff;
}
.best-deals-card .feature-card{
    border: 0px;
}
.best-deals-card{
    z-index: 100;
}
.best-deals-main{
    display: grid;
    grid-template-columns: 48% 48%;
    grid-gap: 15px;
}
/***bestsellers-title-left***/
#best-seller{
    /* background-color: #fff; */
    margin: 0px 10px;
    /* padding-top: 1rem; */
}
.bestsellers-title
{
    border-bottom: 1px solid gray;
    align-items: center;
    padding-bottom: 3px;
}
.bestsellers-title-left ul
{
 list-style: none;
 
}
.bestsellers-title-left ul li 
{   
    display:inline-block;
    padding-left: 15px;
    color: var(--atag-color);
}
.bestsellers-title-left ul li a
{
    
    color:#000;
}
.bestsellers-title-left .active
{
    border: 2px solid var(--secondbrand-color);
    border-radius: 20px;
    padding: 5px 10px;
}
.bestsellers-body-div
{
    padding: 10px 0px;
}
.bestsellers-body-product
{    
    padding: 10px 10px 5px 10px;
   
}
.bestsellers-body-product-item-title span{
    font-size: 13px;
    font-weight: 300;
    color: var(--atag-color);
    padding-top: 15px;
}
.bestsellers-body-product-item-des h5
{
    line-height: 17px !important;
    font-size: 14px;
    padding-bottom: 20px;
}
.bestsellers-body-product-item-des h5 a 
{
    color: #0062bd;
    font-size: 14px;
    padding-top: 5px;
    font-weight: 600;
    
}
.bestsellers-body-product-img a img {
    width: 150px;
    height: 140px;
}

.bestsellers-body-product-item 
{
    padding: 0px 10px;
}
.bestsellers-body-product-active
{
    box-shadow: 0px 0px 5px 4px var(--atag-color);
}
.bestsellers-body-product-down a {
    color: #878787;
}
.bestsellers-body-product-down
{
    display: none;
}
.bestsellers-body-product-active .bestsellers-body-product-down 
{   
    display: block;
    font-size: 11px;
    border-top: 1px solid #e2e1e1;
    margin-top: 10px;
    margin-right: 5px;
    z-index: 10;
}
.bestsellers-product-border
{
    border-right: 1px solid #e2e1e1;
}
.bestsellers-body-product-active .bestsellers-product-border
{
    border-right: 0px;
}
.bestsellers-body-product-item-prize-fix{
    color: var(--secondbrand-color);
}
.bestsellers-body-product-hover {
    height: 150px;
    overflow: hidden;
}

/****slick dot design ****/
/* Base styling for the slick dots */
.bestsellers .slick-dots li button:before{
    font-size:0 !important;
    
}
.slick-dots li button {
    width: 20px; /* Size of the circle */
    height: 20px;
    border-radius: 50%; /* Makes it circular */
    border: 2px solid var(--secondbrand-color); /* Orange border */
    background-color: var(--secondbrand-color); /* White background for inactive buttons */
    outline: none; /* Removes the outline when focused */
    box-shadow: none; /* Removes any shadow */
    background-image: none; /* Ensures no background image or gradient is applied */
    background-color: transparent; /* Ensure no gray background */
    transition: background-color 0.3s ease, border-color 0.3s ease;
    font-size: 0;
  }
  
  /* Styling for the active button */
  .slick-dots li.slick-active button {
    background-color: var(--secondbrand-color); /* Full orange background for active dot */
    border-color: var(--secondbrand-color); /* Orange border */
  }
  
  /* Optional hover effect */
  .slick-dots li button:hover {
    background-color: var(--secondbrand-color);
    border-color: var(--secondbrand-color);
  }
/***home-third-ads****/
.home-third-ads img 
{
    width: 100%;
    height: 100%;
    
}
/**Recently Viewed**/

.recently-view-title ul{
    border-bottom: 1px solid #dedede;
    padding-left: 0px;   
}
.recently-view-title ul li
{
    list-style: none;
    display: inline-block;
}
.recently-view-title ul li a{
    color: #465154;
    font-weight: 500;
}
.recently-view-title ul .active
{
    font-size: 20px;
    font-weight: bold;
    border-bottom: 2px solid var(--secondbrand-color);
}
.recent-view-slider-title span{
    font-size: 13px;
    font-weight: 300;
    color: var(--atag-color);
    padding-top: 15px;
}
.recent-view-slider-prize-fix{
    color: var(--secondbrand-color);
}
.recent-view-slider-des h5 
{
    line-height: 17px !important;
    font-size: 14px;
    padding-bottom: 20px;
}
.recent-view-slider-des h5 a
{
    color: #0062bd;
    font-size: 14px;
    padding-top: 5px;
    font-weight: 600;
    line-height: 17px !important;
}

.recent-view-slider-down{
    display: none;
}
.recent-view-slider-hover
{
   
    margin: 10px 5px;
    height: 300px;
    background-color: #fff;
    
}
.recent-view-slider-hover .recent-view-slider-hover-border:nth-child()
{
    border: 10px solid red !important;
}
.recent-view-slider-hover-border
{
    border-right: 1px solid #e2e1e1;
    padding: 5px 20px 5px 10px;
    overflow: hidden
    ;
}
.recent-view-slider-hover-active .recent-view-slider-hover-border
{
    border: 0px;
} 
.recent-view-slider-img
{
    padding: 0px 0px 10px 0px;
}
.recent-view-slider-img img {
    width: 150px !important;
    height: 135px;
}
.recent-view-slider-hover-active {
    z-index: 100 !important;
    box-shadow: 0px 0px 5px 4px var(--atag-color);
    
    
}
.recent-view-slider-hover-active .recent-view-slider-down{
    display: block;
    font-size: 11px;
    border-top: 1px solid #e2e1e1;
    margin-top: 10px;
    z-index: 10;
    padding: 0px 10px;

}
.recent-view-slider-down a{
    color: #878787;
    
}

.recent-view-slider button.slick-prev.slick-arrow {
    left: 94%;    
    top: -10%;
}
.recent-view-slider button.slick-next.slick-arrow {
    right: 1%;
    top: -10%;
}
.recent-view-slider .slick-arrow {
    width: 30px; 
    height: 30px; 
    border: 2px solid var(--secondbrand-color); 
    background-color: var(--secondbrand-color); 
    color: white; 
    border-radius: 50%; /* Circular shape */
    
}



.recent-view-slider .slick-prev:before, .slick-next:before {
    line-height: 1.5;
    opacity: 1;
}
/******brand-logo-slider *****/

.brand-logo-slider
{   margin-top: 10px;
    background-color: #fff;
    border-top: 1px   solid #cacaca;
    border-bottom: 1px   solid #cacaca;
    justify-content: center !important;
    padding: 20px 30px;
    .slick-prev:before{
        opacity: 1;
        
    }
    .slick-prev{
        left: 0px !important;
        width: 25px;
        height: 25px;
        padding-top: 2px;
        border: 2px solid var(--secondbrand-color);
        background-color: var(--secondbrand-color);
        color: white;
        border-radius: 50%;
        z-index: 10;
    }
    .slick-next{
        right: 0px !important;
        width: 25px;
        height: 25px;
        border: 2px solid var(--secondbrand-color);
        background-color: var(--secondbrand-color);
        color: white;
        border-radius: 50%;
        padding-top: -2px;
        
    }
    .slick-next:before{
        line-height: 1.3;
        
    }
}
.brand-logo-slider-img{
    width: 280px;
    height: auto;
    margin: auto;
}
.brand-logo-slider-img 
{
    object-fit: contain;
}
.brand-logo-slider-img a img 
{
    width: 100%;
    max-height:50px;
    
}

.bestDealItemShow-hide{
    display: none;
}
.bestDealCatItem-hide{
    display: none;
}
/***feature-onsell-top*****/
.feature-onsell-top
{   
    background-color: #fff;
    /* padding:3rem 0px; */
    display: grid;
    grid-template-columns: 75% 25%;
    padding: 40px 10px;
    gap: 6px;
}
.feature-onsell-top-right-img
{
    width: 100%;
    overflow: hidden;
}
.feature-onsell-top-left
{
    display: grid;
    grid-template-columns: 32% 32% 32%;
    gap: 20px;
}
.feature-onsell-top-left-main-title
{
    border-bottom: 1px solid #dedede;
    
}
.feature-onsell-top-left-main-title span
{   
    display: inline-block;
    border-bottom: 3px solid var(--secondbrand-color);
    color: #465154;
    font-weight: 500;
    font-size: 17px;
}
.feature-onsell-top-left-product-img
{
    width: 75px;
    height: 75px;
    overflow: hidden;
    img{
        width: 100%;
        height: 100%;
        
    }
}
.feature-onsell-top-left-product
{
    display: grid;
    grid-template-columns: 30% 70%;
    align-items: center;
    padding: 30px 0px 0px 5px;
    background: #fff;
    margin-bottom: 10px;
}
.feature-onsell-top-left-product-body-title 
{
    line-height: 17px;
    
    font-size: 14px;
    padding-top: 5px;
    font-weight: 600;
}
.feature-onsell-top-left-product-body-title a
{
    color: #0062bd;
}
.feature-onsell-top-left-product-body
{
    padding-left: 10px;
}
.feature-onsell-top-left-product-body-prize
{
    padding-top: 20px;
    align-items: center;
}
.top-rate-sell .feature-onsell-top-left-product-body-prize
{
    padding-top:10px ;
}
.feature-onsell-top-left-product-body-prize-fix {
    color: var(--secondbrand-color);
}
.feature-onsell-top-left-product-body-prize-discount
{ 
    color: #878787;
   
    font-size: 12px;
    span{
        text-decoration: line-through;
    }
}
.feature-onsell-top-left-product-body-rate i{
    font-size: 12px;
    color: var(--secondbrand-color);
}
/******home-sign-up****/
#home-sign-up
{
    background-color: var(--secondbrand-color);
    padding: 20px 20px;
}
.home-sign-up
{
    display: grid;
    grid-template-columns: 60% 40%;
}
.home-sign-up-left i
{
    
    font-size: 35px;
    font-weight: 200;
}
.home-sign-up-right input
{
    border: 0px;    
    border-radius: 30px 0px 0px 30px;
    padding: 10px 30px;
    outline:0px;
    width: 70%;
}
.home-sign-up-right input:focus{
    background-color: #fff !important;
}
.home-sign-up-right button
{
    border: 0px;
    border-radius: 0px 30px 30px 0px;
    background-color: var(--mainbrand-color);
    color: #fff;
    outline: 0px;
    padding:0px 20px ;
}
/*****footer-main******/
/* .t-img-mb{
    img{
        mix-blend-mode: multiply;
        background: transparent;
    }
} */
.footer-main
{
    padding: 0px 0px 20px 0px;
    background-color: #fff;
}
.footer-main-top 
{
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
}
.footer-main-top-part 
{
    text-align: center;
    padding: 45px 15px;
    line-height: 16px;
}
.footer-main-top-part:hover
{
    background-color: var(--secondbrand-color);
    color: #fff;
}
.footer-main-top-part:hover  span, .footer-main-top-part:hover p{
    color: #fff !important;
}
.footer-main-top-part  img
{
    width: 40px;
    height: 40px;

}
.footer-main-top-part  span{
    color: var(--gray-color);
    font-size: 13px;
}
.footer-main-top-part  p{
    color: var(--gray-color);
    font-size: 18px;
    margin-bottom: 0px;
    padding: 10px 0px;
}
/****footer-main-down-part***/
/* .footer-main-down-part 
{
    display: grid;
   grid-template-columns: 40% 20% 20% 20%;
} */
.footer-main-down{
    background-color: #F8F8F8;
    padding: 20px 0px 50px 0px;
}
.footer-main-down-part-custom p{
    font-size: 20px;
    color: var(--secondbrand-color);
    margin-bottom: 0px;
    padding-left: 2rem;
    font-weight: 600;
}
.footer-main-down-part-custom ul{
    list-style: none;
}
.footer-main-down-part-custom ul li a 
{
    color: #2b2929;
    padding-left: 2rem;
    font-weight: 100;
    
}
.footer-main-down-part-google-part-title
{
    color: var(--secondbrand-color);
    font-size: 20px;
    font-weight: 600;
}

.social-media-icon a{
    font-size:16px;
    span{
        color: rgba(33, 37, 41, 0.75);;
    }
}
.social-media-icon a .fa-square-facebook{
    color: #1877F2;
}
.social-media-icon a .fa-square-youtube{
    color: #FF0000;
}
.social-media-icon a .fa-square-instagram{    
    color: transparent; 
    background-image: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
    -webkit-background-clip: text; 
    background-clip: text;
}
.social-media-icon a .fa-linkedin{
    color: #0077B5;
}
.social-media-icon a .fa-square-whatsapp{
    color:#25D366 ;
    animation: upDown 1s ease infinite; /* Animation ka setup */
}
@keyframes upDown {
    0%, 100% {
      transform: translateY(0); /* Starting and ending position */
    }
    50% {
      transform: translateY(10px); /* Middle position (up) */
    }
  }
 .footer-main-down-part-google-part-google-play a 
{
   width: 140px;
   height: 60px;
}
.google-play img, .apple img{
    height: 35px;
}
/********************
**********************
**********************
product-details page 
***********************/
.img-container {
    position: relative;    
}

.img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zoom-lens {
    position: absolute;
    width: 100px; /* Size of the zoom lens */
    height: 100px;
    background: rgba(151, 219, 251, 0.4);
    display: none;
    pointer-events: none;
}

.zoom-result {
    position: absolute;
    right: 29%;
    top: 23%;
    width: 600px;
    height: 570px;
    box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid #ccc;
    background-color: #fff;
    z-index: 11111;
    overflow: hidden;
    display: none;
}

.zoom-result img {
    position: absolute;
    width: 100%; /* Adjust for zoom scaling */
    height: 100%; /* Adjust for zoom scaling */
}


.product-details-main-div
{ 
    background-color: #fff;
    display: grid;
    grid-template-columns: 30% 40% 30%;
}
.product-details 
{
    border-radius: 10px;
    padding: 0px 10px;
    margin: 20px 0px;
    overflow: hidden;
}
.product-details .product-details-image-part {
    width: 350px ;
    height: 370px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.product-details .product-details-image-part img {
    display: inline-block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    vertical-align: middle;
}
.product-details-slider{

    .slick-prev,
    .slick-next {
        background-color: var(--secondbrand-color); /* Arrow button background */
        color: black; /* Arrow icon color */
        border-radius: 50%; /* Optional: Make arrows circular */
        width: 20px; /* Width of the button */
        height: 20px; /* Height of the button */
        display: flex;
        font-size: 20px;
        justify-content: center;
        align-items: center;
        z-index: 10; /* Ensure arrows appear on top */
    } 
    i{
        display: none;
    }
    .slick-prev{
        left:-5px;
    }
    .slick-next{
        
        right: -5px;
    }
    .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before {
        opacity: .75;
    }
    .slick-prev:before, .slick-next:before{
        font-size: 15px;
        opacity: 1;
    }
    
}
.product-details-slider .product-details-slider-item 
{   height: 70px;
    border: 1px solid gray;
    margin: 5px;
    img{
        object-fit: contain;
    }
}
.product-details-slider .product-details-slider-item:hover{
    border: 1px solid var(--secondbrand-color);
}
.product-details-slider .product-details-slider-item img
{
    width: 100%;
    height: 100%;
}
.product-details-main-middle
{
    padding: 20px 0px 0px 20px;
    
}
.product-details-main-middle .brand-name
{
    font-size: 13px;
    
}
.product-details-main-middle-title 
{
    color: #000;
    font-size: 28px;
    line-height: 30px;
}
.product-details-prize-fix
{
    color: var(--secondbrand-color);
    font-size: 28px;
    font-weight: 400;
}
.product-details-prize-dis
{
    
    color: var(--atag-color);
    
    span{
        text-decoration: line-through;
    }
    .dis-per{
        text-decoration: unset !important;
        color: #000;

        padding-left: 10px !important;
    }
}

/*****produce size color **********/
.product-size-main{
    border-top: 1px solid var(--border-color);
    padding-top: 10px;
    margin-top: 25px;
    .product-size-title{
        
        font-size: 15px;
        font-weight: 500;
        margin-bottom: 10px;
    }
}

.product-size-list ul{
    display: flex;
    li{
        width: 40px;
        height: 40px;
        margin-left: 10px; 
        border: 1px solid var(--atag-color);
        display:flex;
        justify-content: center;
        align-items: center;        
        overflow: hidden;       
        .product-details-slider-item{
            width: 40px;
            height: 40px;
            img{
                width: 100%;
                height: 100%;
                object-fit: contain;
            }            
        }
        &:hover{
            border: 1px solid var(--secondbrand-color);
        }
            
    }
}

.product-details-main-right 
{
    background: #F8F8F8;
}
.writr-review{
    color: var(--mainbrand-color);
    background-color: #fff;
    border: #fff;
}
.product-quantity
{
    margin-top: 30px;
}
.add, .greater .subtract{
    background-color: #f5f5f5;
}
.product-quantity-part-add-sub input.quantity
{
    border: 0px;
    outline: 0px;
    width: 30px;
    text-align: center;    
}
.product-quantity-part-add-sub .btn
{
    font-size: 15px;
    padding: 5px 10px;
}
.product-quantity-part-add-sub .btn:hover
{
    background-color:#f5f5f5;
}
.product-buy-main{
    margin-top: 20px;
}
.product-buy-main-buy-part
{
    padding-right: 20px;
}
.product-buy-main-buy-part button
{
    background-color: var(--secondbrand-color);
    padding: 8px 70px;
    color: #fff;
    border: 0px;

}
.product-buy-main-add-to-cart-part {
    position: relative;
    .topup-message {
        position: absolute;
        top: -70px;
        right: -132px;
        width: 200px;
        background: #f8d7da;
        color: #721c24;
        box-shadow: 0 0 5px rgba(0, 0, 0, .25);
        border: 1px solid #e8e8e8;
        padding: 10px;
        border-radius: 5px;
        opacity: 0;
        visibility: hidden;
        transition: top 0.3s ease, opacity 0.3s ease;
        z-index: 999;
    }
    
    button:disabled:hover + .topup-message {
        top: -125px;
        opacity: 1;
        visibility: visible;
    }

}

.product-buy-main-add-to-cart-part button
{
    background-color: var(--mainbrand-color);
    color: #fff;
    padding: 8px 70px;
    border: 0px;
    cursor: pointer;

}
.product-compare-add-main a{
    color: #878787;
}
 .product-compare-add-main a:hover{
    color: var(--secondbrand-color);
}

/********rating*****/
.rating {
    display: inline-block;
    position: relative;
}

.rating i {
    font-size: 25px;
}
.rating input {
    display: none;
}

.rating label {
    cursor: pointer;
    color: #ddd;
    transition: color 0.2s, background-color 0.2s; /* Add transition for smooth color and background-color change */
}

.rating input:checked ~ label,
.rating label:hover {
    color: #ffc107;
}

.rating label:hover ~ label {
    color: #ddd; /* Reset color for stars to the right of the hovered star */
}

.rating input:checked ~ label:nth-child(-n+5),
.rating input:checked ~ label:hover,
.rating input:checked ~ label:hover ~ label {
    background-color: #ffc107; /* Change background-color of stars to red up to the hovered or checked star */
}
/******reivew-show-main*********/
.reivew-show-main
{
    background-color: #fff;
    padding: 0px;
}
.review-show-title 
{
    background-color: #F8F8F8;
    padding: 20px 20px 0px 20px ;

}
.short-by-left
{
    padding-left: 10px;
}
.short-by-left span{
    font-size: 17px;
}
.review-show-body-part {
    padding:10px 60px 20px 20px;
}

.delivery-main{
    border-bottom: 1px solid var(--border-color);
}
.delivery-main-title p {
    padding: 0px;
    margin: 0px;
}
.delivery-main-location {
    padding: 5px 0px 10px 0px;
}
.delivery-main-location i {
    font-size: 15px;
    color: #8e8e8e;
}
.delivery-main-location p {
    line-height: 17px;
    padding: 5px 20px 0px 0px;
    margin: 0px;
    
}
.standard-delivery {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 7px ;
    margin-bottom: 7px;
}
.standard-delivery .dst {
    color: #000;
    
}
.standard-delivery .dst span{
    font-size: 12px;
}
.standard-delivery .dprize
{
    color: var(--secondbrand-color);
    padding-left: 15px;
    width: 20%;
}
.standard-delivery .dprize span{
    color: #000;
}
.standard-delivery p{
    line-height: 17px;
}
.standard-delivery i{
    color: var(--atag-color);
}
.esewa-img 
{
    width: 100px;
    
}
.secure-Shopping {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 7px ;
    margin-bottom: 7px;
}
.quality-checked {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 7px ;
    margin-bottom: 7px;
}

  /* Initial state: Hide one, two */
  .specification-collapse, .two-collapse, .review-collapse{
    display: none;
}

.description-collapse {
    display: block;
}
.review-visible .review-collapse {
    display: block;
}
.one-visible .specification-collapse {
    display: block;
}
.two-visible .two-collapse {
    display: block;
}

.review-description-options div{
    margin-left:40px ;
    padding-bottom: 5px;
    cursor: pointer;

}
/* Active class */
.review-description-options .active {
    border-bottom: 2px solid var(--secondbrand-color);
    font-size: 17px;
    font-weight: 600;
}
.review-show-body {
    border: 1px solid var(--border-color) ;
    margin: 0px 30px 20px 30px;
    border-radius: 20px;
    padding: 5px;
}
.specification-collapse {
    
    margin: 10px 10%;
}
/**************************
***************************
***************************
***************************
**************************
compare-product **********/
.compare-main{
    background-color: #fff;margin-top: 20px;
    padding-top: 20px;
}
.table-compare-list .table th, .table-compare-list .table td {
    padding: .75rem;
    text-align: center;
}

.table-bordered th, .table-bordered td {
    border: 1px solid #ecedf2;
}
.table th, .table td {
    padding: 0.5rem;
    vertical-align: top;
    border-top: 1px solid #ecedf2;
}
.product-compare-image
{
    max-width: 212px;
    min-height: 200px;
    margin: auto;
}
.table-compare-list th {
    vertical-align: middle;
    background-color: #f1f1f1;
    text-align: center;
    border: 1px solid #d7d7d7;
    text-transform: uppercase;
    min-width: 12.5rem;
}
.text-blue {
    color: #0062bd !important;
}
.product-item__title {
    font-size: 0.875rem;
    line-height: 1.125rem;
}

.product-item__title {
font-size: 1rem;
line-height: 1rem;
}

/***********url-title**********/
.url-title{
padding: 11px 0px;

}
.url-title ul li{
    display: inline-block;
    align-items: center;
}
.url-title ul li a{
    color: var(--mainbrand-color);
    font-size: 14px ;
    padding: 5px 0;
    i{
        padding: 0px 4px;
    }
    &:hover{
        color: var(--secondbrand-color);
    }
}
.url-title ul li p{
    color: var(--atag-color);
    font-size: 14px ;
}
/*********category-page-rightSidebar******/

.category-details-filter
{ 
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 20px 13px 20px;
    border-bottom: 1px solid #ccc;
    /* margin-bottom: 30px; */
    p{
    font-size: 18px;
    padding:0px;
    color: var(--bs-body-color);
    font-weight: 400;    
    }
    a{
        color: var(--secondbrand-color) !important;
        font-size: 14px !important;
    }
}
.category-product-page-left-side-div{
    /* border-right: 1px solid var(--border-color); */
    padding: 0;
}

.category-page-rightSidebar{
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    padding: 18px;
}
.category-page-rightSidebar .sidebar-title{
    color: #000000;
    font-size: 14px;
    /* margin-bottom: 5px; */
    font-weight: 500;
    text-transform: uppercase;
}
.category-page-sidebar-categories ul li{
    line-height:22px;
}
.category-page-sidebar-categories ul li a{
    color: #2b2b2b;
    font-size: 13px;
    font-weight: 300;
}
.category-page-sidebar-categories ul li a:hover{
    color: var(--secondbrand-color);
}


.category-page-rightSidebar .sidebar-brand ul li a {
    font-size: 13px;
    color: #2b2b2b;
}

/**********Prize range for category******/
/* .search-div{
    position: relative;
    transition: 0.95s;
    .search-inpDiv{
        position: absolute;
        top: -15px;
        right: 0;
        z-index: 2; 
        display: none ;   
        input{
            width: 218px;
            padding: 3px 0px 3px 15px;
            border: 1px solid #F5F5F6;
            border-radius: 15px;
            font-size: 14px;
            margin-bottom: 10px;
            outline-color: #F5F5F6;
            background-color: #F5F5F6;
            &:focus {
                border-color: #F5F5F6;
            }
        }
        
    }
    .search-close-ico{
        display: none;
        position: absolute;
        top: -15px;
        right: 0px;
        cursor: pointer;
        font-size: 17px;
        color: #8a8a8a;
        background: #F5F5F6;
        border-radius: 50%;
        padding: 1px 8px;
        z-index: 3;
        &:hover {
            color: #ff7700;
        }
    }
}
.search-ico {
    background: #dddddd;
    border-radius: 50%;
    padding: 1px 5px;
    cursor: pointer;
    top: -15px;
    right: 0px;
    position: absolute;
    
} */
 
.search-div {
    position: relative;
    transition: 0.95s;
    display: flex;
    align-items: center;
}

.search-inpDiv {
    position: absolute;
    top: -15px;
    right: 0;
    z-index: 2;
    display: none;
}

.search-inpDiv input {
    width: 218px;
    padding: 3px 0px 3px 15px;
    border: 1px solid #F5F5F6;
    border-radius: 15px;
    font-size: 14px;
    margin-bottom: 10px;
    outline-color: #F5F5F6;
    background-color: #dcdcdd !important;
}

.search-inpDiv input:focus {
    border-color: #F5F5F6;
}

.search-close-ico {
    display: none;
    position: absolute;
    top: -15px;
    right: 0;
    cursor: pointer;
    font-size: 17px;
    color: #8a8a8a;
    background: #dcdcdd !important;
    border-radius: 50%;
    padding: 1px 8px;
    z-index: 3;
}

.search-close-ico:hover {
    color: #ff7700;
}

.search-ico {
    background: #dddddd;
    border-radius: 50%;
    padding: 1px 5px;
    cursor: pointer;
    position: absolute;
    top: -15px;
    right: 0;
}


.double-slider-box {
    background-color: #fff;    
    border-radius: 10px;
    
}

.range-slider {
    position: relative;
    width: 100%;
    height: 5px;
    margin: 30px 0;
    background-color: #8a8a8a;
}

.slider-track {
    height: 100%;
    position: absolute;
    background-color: #fe696a;
}

.range-slider input {
    position: absolute;
    width: 100%;
    background: none;
    pointer-events: none;
    top: 50%;
    transform: translateY(-50%);
    appearance: none;
}

input[type="range"]::-webkit-slider-thumb {
    height: 25px;
    width: 25px;
    border-radius: 50%;
    border: 3px solid var(--secondbrand-color);
    background: var(--secondbrand-color);
    pointer-events: auto;
    appearance: none;
    cursor: pointer;
    box-shadow: 0 .125rem .5625rem -0.125rem rgba(0, 0, 0, .55);
}

input[type="range"]::-moz-range-thumb {
    height: 25px;
    width: 25px;
    border-radius: 50%;
    border: 3px solid #FFF;
    background: #FFF;
    pointer-events: auto;
    -moz-appearance: none;
    cursor: pointer;
    box-shadow: 0 .125rem .5625rem -0.125rem rgba(0, 0, 0, .25);
}

.tooltip {
    padding: 1.25rem 1.5rem;
    border: 0;
    background:gray;
    color: #fff;
    font-size: 0.75rem;
    line-height: 1.2;
    border-radius: .25 rem;
    bottom: 20%;
    display: block;
    position: absolute;
    text-align: center;
    white-space: nowrap;
}
.min-tooltip{
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    z-index: 5;
}
.max-tooltip{
    left: 50%;
    transform: translateX(50%) translateY(-100%);
    z-index: 5;
}
.input-box {
    display: flex;
}
.min-box,
.max-box {
    width: 50%;
}
.min-box {
    padding-right: .5rem;
    margin-right: .5rem;
}

.input-wrap {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
} 
.input-addon{
    display: flex;
    align-items: center;
    padding: 0.6rem 0.4rem;
    line-height: 1rem;
    color: var(--secondbrand-color);
    font-size: 13px;
    text-align: center;
    white-space:nowrap;
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    border-top-right-radius: 0px;
    border-right: 0;
}
.input-field {
    margin-left: -1px;
    padding: 0.423rem 0.75rem;
    font-size: 0.825rem;
    line-height: 1.2;
    border-radius: 0.25rem;
    flex: 1 1 auto;
    width: 11%;
    min-width: 0px;
    color: gray;
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;

    &::placeholder{
        font-size: 0.825rem;
        line-height: 1.2;
    }


}
.input-field:focus{
   outline: none;
}
/*****customCheckbox*******/
.customCheckbox input[type="checkbox"] {
    opacity: 0; 
    position: absolute; 
    z-index: -1; 
}

.customCheckbox label {
    position: relative;
    display: inline-block;
    cursor: pointer;
    padding-left: 25px; 
    
}

.customCheckbox label::before {
    content: "";
    position: absolute;
    top: 50%; 
    left: 0;
    transform: translateY(-50%); 
    width: 15px;
    height: 15px;
    background-color: #fff;
    outline: 1px solid #ccc;
    /* border-radius: 3px; */
}

.customCheckbox input[type="checkbox"]:checked + label::before {
    background-color: #ffffff; /* Checked background color */
    outline: none; /* Remove outline when checked */
}

.customCheckbox input[type="checkbox"]:checked + label::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    /* border-radius: 3px; */
    transform: translateY(-50%); /* Center vertically */
    width: 15px;
    height: 15px;
    background-image: url('../../img/checked.png'); /* Ensure this path is correct */
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1; /* Bring it in front of the checkbox */
}
/* customCheckboxColor */
.customCheckboxColor input[type="checkbox"] {
    opacity: 0; 
    position: absolute; 
    z-index: -1; 
}
.customCheckboxColor{
    position: relative;
    span{
        position: absolute;
        top: 0%;
        left: 23px;
        padding: 8px;
        border-radius: 50%;
        z-index: 4;
        /* cursor: not-allowed; */
    }
}

.customCheckboxColor label {
    position: relative;
    display: inline-block;
    cursor: pointer;
    padding-left: 45px; 
    
}

.customCheckboxColor label::before {
    content: "";
    position: absolute;
    top: 50%; 
    left: 0;
    transform: translateY(-50%); 
    width: 15px;
    height: 15px;
    background-color: #fff;
    outline: 1px solid #ccc;
    /* border-radius: 3px; */
}

.customCheckboxColor input[type="checkbox"]:checked + label::before {
    background-color: #ffffff; /* Checked background color */
    outline: none; /* Remove outline when checked */
}

.customCheckboxColor input[type="checkbox"]:checked + label::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    /* border-radius: 3px; */
    transform: translateY(-50%); /* Center vertically */
    width: 15px;
    height: 15px;
    background-image: url('../../img/checked.png'); /* Ensure this path is correct */
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1; /* Bring it in front of the checkbox */
}
/*****customCheckbox*******/
.customCheckbox input[type="checkbox"] {
    opacity: 0; 
    position: absolute; 
    z-index: -1; 
}

.customCheckbox label {
    position: relative;
    display: inline-block;
    cursor: pointer;
    padding-left: 25px; 
    
}

.customCheckbox label::before {
    content: "";
    position: absolute;
    top: 50%; 
    left: 0;
    transform: translateY(-50%); 
    width: 15px;
    height: 15px;
    background-color: #fff;
    outline: 1px solid #ccc;
    /* border-radius: 3px; */
}

.customCheckbox input[type="checkbox"]:checked + label::before {
    background-color: #ffffff; /* Checked background color */
    outline: none; /* Remove outline when checked */
}

.customCheckbox input[type="checkbox"]:checked + label::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    /* border-radius: 3px; */
    transform: translateY(-50%); /* Center vertically */
    width: 15px;
    height: 15px;
    background-image: url('../../img/checked.png'); /* Ensure this path is correct */
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1; /* Bring it in front of the checkbox */
}
/* discountRadio */
.discountRadio input[type="checkbox"] {
    opacity: 0; 
    position: absolute; 
    z-index: -1; 
}
/* .discountRadio{
    position: relative;
   
} */

.discountRadio label {
    position: relative;
    display: inline-block;
    cursor: pointer;
    padding-left: 25px; 
    
}

.discountRadio label::before {
    content: "";
    position: absolute;
    top: 50%; 
    left: 0;
    transform: translateY(-50%); 
    width: 15px;
    height: 15px;
    background-color: #fff;
    outline: 1px solid #ccc;
    border-radius: 50%;
}

.discountRadio input[type="checkbox"]:checked + label::before {
    background-color: #ffffff; /* Checked background color */
    outline: none; /* Remove outline when checked */
}

.discountRadio input[type="checkbox"]:checked + label::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    border-radius: 50%;
    transform: translateY(-50%); /* Center vertically */
    width: 15px;
    border: 1px solid green;
    height: 15px;
    background-color: green;
     /* Ensure this path is correct */
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1; /* Bring it in front of the checkbox */
}

/*********Category-page- leftSide top title**********/
.category-page-sortBy{
    font-size: 13px;    
}
.category-page-sortBy p{
    padding-right: 3px;
}
.category-page-sortBy-select {
    padding: 10px;
    border-radius: 5px;
    width: 40%;    
    
}

.category-page-sortBy-select:hover{
    border: 1px solid var(--secondbrand-color);
}
.category-page-sortBy-select:focus{
    border: 1px solid var(--secondbrand-color);
    outline: none;
    
}
.category-product-list-page-top-title{
    display: grid;
    grid-template-columns: 1% 47% 37% 15%;
    .category-product-filter .flt-div{
        display: none;
    }
}

.layoutPart {
    display: flex;
    align-items: center;
    justify-content: end;
    p {
        margin: 0 10px 0 0;
        font-weight: bold;
    }
}



.layoutPart-grid-icon, .layoutList {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    cursor: pointer;
    color: white;
}

.layoutPart-grid-icon {
    background-color: #FF6600; /* Orange color for grid icon */
}

.layoutList {
    background-color: #555555; /* Grey color for list icon */
}

.layoutGrid, .layoutList i {
    font-size: 18px; /* Icon size */
}

.layoutPart-grid-icon.active,
.layoutList.active {
    border: 2px solid #FFD700; /* Highlight active state with a border */
}
.productGrid, .productList{
    display: none;

}
.productListActive, .productGridActive{
    display: block;
    margin-bottom: 30px;
}
.productListActive{
    padding-left: 20px;
}
.category-detail-div{
    display: grid;
    grid-template-columns: repeat(5, 20%);
    padding-left: 20px;
}
/**********productGridActive*************/
/* .similar-product-main{
    display: grid;
    grid-template-columns: repeat(5, 20%);
} */
.category-product-card{    
    /* height: 380px; */
    margin: 24px 0 0 0;
    border: 1px solid #F7F7F7;
    border-radius: 10px;
    margin-right: 10px;
    overflow: hidden;
}
.category-product-card-main{
    padding-bottom: 10px;
    /* height: 380px; */
    transition: all .3s;  
    border-radius: 10px; 
    /* overflow: hidden; */
}
.category-product-card-main:hover{
    box-shadow: 0 0 8px 3px rgba(0,0,0,0.1);

}
.category-product-card-img{
    justify-content: center;
    align-items: center; 
    padding: 5px;
    height: 235px;
    overflow: hidden;
    background: #F7F7F7;
}
.category-product-card-img a img{ 
       
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    background: transparent;
}
.category-product-card-content{
    padding: 5px 8px;
    .cp-name{
        font-size: 14px;
        color: #0f1111;
        height: 43px;
        line-height: 20px;
    }
    .cp-price{
        font-size: 16px;
        color: var(--secondbrand-color);
        font-weight: 600;
        
    }
    .cp-dprice{
        font-size: 11px;
        color: var(--atag-color);
        text-decoration: line-through;
    }
}
.cp-rating{
    background-color: var(--secondbrand-color);
    color: #fff;
    padding: 2px 4px;
    border-radius: 5px;
    margin-right: 12px;
    font-size: 13px;
}

/***********Layout list **********/
.cp-layout-price {
    text-align: end;
    padding-right: 10px;
    .f-price{
        font-size: 18px;
        font-weight: 600;
        color: var(--secondbrand-color);
    }
    .d-price{
        font-size: 14px;
        color: var(--atag-color);
        text-decoration: line-through;
    }

}
.category-product-layoutList-card{
    margin: 10px 10px 10px 0px;
    padding: 3px 100px 3px 0px;
}
.category-product-layoutList-card:hover{
    box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.2);
}
p.product-code {
    color: var(--atag-color);
    font-size: 14px;
    padding-top: 10px;
}
.category-product-layoutList-card-img{
    height: 235px;
    width: 100%;
    img{
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}
.category-product-layoutList-card-content{
    padding: 20px 0px 0px 0px;
    .list-product-name{
        line-height: 18px;
        font-size: 15px;
    }
}
.cp-details-parts ul {
    list-style: circle;
}
.cp-details-parts {
    font-size: 11px;
    color: #878686;
    padding-left: 16px;
    margin-top: 25px;
}
/***cart-page************/
.cart-page-body{
    background: #fff;
    margin-top: 5px;
}

.remove-btn{
    border: 1px solid #ccc;
    border-radius:6px ;
    padding: 5px 10px;
    cursor: pointer;
}
.remove-btn:hover{
    border: 1px solid #bb0000;
    color: #bb0000
}
.cart-table img{
    width: 150px;
    height: 100px;
    object-fit: contain;
}
.cart-table td .description{
    width: 200px;
    font-size: 13px;
    text-align: start;
    display: inline-block;
}

.table th {
    border-top: none;
    text-align: start;
    
}

.table td,
.table th {
    vertical-align: middle;
}

.cart-totaling-box{           
    width: 95%;
    /* height: 430px; */
    margin-left: 20px;
}
.cart-totaling-box {
    background-color: #F8F9FA; /* Light grayish white */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.account-status {
    background: #fff;
    padding: 5px 0px;
    margin: 0px 0px 20px 0px;
    border-radius: 5px;
}
.account-status h5 {
    text-align: center;
    font-weight: bold;
    color: #343a40;
    margin: 0;
}

.transaction-details {
    margin-bottom: 20px;
}

.transaction-details p {
    font-size: 16px;
    color: #343a40;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.coupon-code {
    display: flex;
    align-items: center;
    gap: 10px;
}

.coupon-input {
    flex: 1;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 5px;
}
.coupon-input:focus{
    outline:1px solid var(--mainbrand-color);

}
.coupn-btn-primary {
    padding: 8px 20px;
    background-color: var(--mainbrand-color);
    color: white;
    border:1px solid var(--mainbrand-color);
    border-radius: 3px;
}
.order-summary-title{
    font-size: 16px;
    color: var(--mainbrand-color);
}
.order-summary-item {
    margin-top: 15px;
    margin-bottom: 15px;
}

.order-summary-item p {
    font-size: 16px;
    color: var(--atag-color);
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
}
.order-total-final-price p{
    display: flex;
    font-size: 16px;
    justify-content: space-between;
}
.text-info {
    color: #17a2b8;
}

.order-process {
    margin-top: 20px;
    text-align: center;
    padding: 10px;
    background-color: var(--secondbrand-color);    
    font-size: 20px;
    border-radius: 5px;
    a{
        color: white;
        padding: 10px 0px;
        text-decoration: none;
    }
}
.order-process .btn{
    color: #fff;
    font-size: 20px;
    padding: 0px;
    border: 0px;
    &::focus{
        outline: none;
        color: #fff !important;
    }
    &:active{
        color: #fff !important;
    }
}
.order-process:hover{
    background: var(--secondbrand-color);
    opacity: 0.9;
}
/********delivery-form************************/
.cart-proceed-to-checkout-delivery-form{
    background-color: #F8F9FA;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    .btn-home {
        border-color: red;
        color: red;
    }

    .btn-home:hover {
        background-color: red;
        color: white;
    }

    .btn-office {
        border-color: lightblue;
        color: lightblue;
    }

    .btn-office:hover {
        background-color: lightblue;
        color: white;
    }

    /* Custom Clear Button */
    .clearable {
        position: relative;
    }

    .clearable input {
        padding-right: 30px; /* Space for the clear button */
    }

    .clearable::after {
        content: '×'; /* Unicode multiplication symbol for close button */
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        color: #ccc;
    }

    .clearable input:not(:focus) + .clearable::after {
        display: none;
    }

    .clearable input:valid + .clearable::after {
        display: block;
    }

    /* Custom Dropdown Styling */
    
}
/*************user dashboards****************/
.user-dashboard{
    background-color: #fff;
    padding: 20px;
   
    
}
.user-dashboard label{
    color: var(--atag-color);
    font-size: 15px;
    padding-bottom: 6px;
}
.user-dashboard input{
    width: 100%;
    padding: 7px 0px 7px 16px;
    border: 1px solid #b8b7b7;
    border-radius: 5px;      
}

.user-dashboard input:focus{
    border: 1px solid #b8b7b7;
    outline: 0;
}
.user-dashboard input::placeholder{
    color: #999;
    font-size: 15px;
} 
.user-dashboard .req{
    font-size: 11px;
    color: var(--atag-color);
    padding-right: 10px;
}
.user-show-main {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.user-manage-options {
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 20px;
}
.user-manage-options div {
    padding: 10px 20px;
    cursor: pointer;
    border: 1px solid transparent;
    border-bottom: none;
    transition: background-color 0.3s, color 0.3s;
}
.user-manage-options div.active {
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-bottom: none;
    color: var(--secondbrand-color);
    font-weight: bold;
}
.user-manage-options div:hover {
    background-color: #f1f1f1;
}
.user-show-body > div {
    display: none;
}
.user-show-body > div.active {
    display: block;
}
.order-item, .message-item, .address-item, .wishlist-item, .recent-view-item, .account-setting-item {
    padding: 15px;
    border-bottom: 1px solid #dee2e6;
}
.order-item:last-child, .message-item:last-child, .address-item:last-child, .wishlist-item:last-child, .recent-view-item:last-child, .account-setting-item:last-child {
    border-bottom: none;
}
.order-item p, .message-item p, .address-item p, .wishlist-item p, .recent-view-item p {
    margin: 0 0 5px;
}
.btn-action {
    margin-right: 10px;
}

.wishList-card{
    box-shadow:0px 4px 3px 0px rgb(255 111 0 / 20%);
    margin-bottom: 15px;
}
.wishList-card:hover{
    box-shadow:0px 4px 3px 0px rgba(0, 238, 255, 0.2);
}
.wishList-card-img {
    height: 125px;
    img{
        object-fit: contain;
        width: 100%;
        height: 100%;
    }
}
.wish-delete a{
    color: var(--atag-color);
    i{
        font-size: 20px;
    }
}
.wish-to-add-cart a{
    background-color: var(--secondbrand-color);
    color: #fff;
    padding: 7px 7px;
    border-radius: 2px;
    margin-left: 20px;
}
.userAddress{
    margin: 10px 5px;
    padding: 20px;
    box-shadow: 0px 0px 4px rgba(0,0,0,0.4);
}
.userAddressAnother{
    box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
    background: rgb(244, 244, 244);
    padding: 30px;
    margin: 10px 5px;
    text-align: center;
    height: 100%;
}
.update-btn{
    background-color: var(--secondbrand-color);
    padding: 6px 20px;
    color: #fff;
    
}
.update-btn:hover{
    background-color: var(--secondbrand-color);
    color: #fff;
}
.btn-close{
        background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;

}
.modal-close-btn{
    background-color: var(--secondbrand-color);
    border-radius: 50%;
    opacity: 1;
}
.modal-close-btn:hover{
    opacity: 1;
}
.modal-footer{
    border: 0;
}
.custom-modal-width{
    max-width: 1000px;
    width: 100%;
}

/************mbl-down-header***********/
.mbl-down-header{   
    display: none;
    background-color: #fff;
    position: fixed;
    bottom: 0px;
    left: 0;
    z-index: 9999;
    .mbl-down-header-body{
        padding: 5px 20px;
        ul{
            display: flex;
            justify-content: space-between;
            align-items: center;
            
        }
    }
}
.mbl-down-header-body-logo{
    
        color: var(--atag-color);
        font-size: 14px;
        
    
    img{
        width: 25px;    
    }
}

/*******Payment method ***********/
.payment-show-main .nav-tabs .nav-link{
    width: 130px;
    height: 80px;
    margin-right: 10px;
    padding: 0px;

}
.payment-show-main{
    margin-bottom: 50px;
    margin-left: 20px;
    .logo{
        width:90px;
        margin: auto;
        height:100%;
        img{
            width: 100%;
            mix-blend-mode: multiply;
            &:hover{
                transform: none;
            }

        }
    }
    .nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
        isolation: unset;
    }
    
}

.caseondelivery-des p{
    font-size: 13px;
    margin-top: 14px;
}
.confirm-order-btn{
    background-color: var(--secondbrand-color);
    border: none;
    color: #fff;
    padding: 10px 90px;
    text-align: center;
    margin-top: 50px;
}
.confirm-order-btn:hover{
    background-color: var(--secondbrand-color);
    color: #fff;
}
.pay-summary{
    margin-right: 60px;
    background-color: #fff;
    padding: 20px;
    border-radius:0px 0px 8px 8px;
    .summary-item{
        font-size: 13px;
    }
    .total-p{
        font-size: 18px;
        color: var(--secondbrand-color);
    }
    
}

/**similar product **********/
.similar-product-main{
    display: grid;
    grid-template-columns: repeat(7, 14.28%);
}
.similar-product-item{
    padding: 10px;
    margin: 20px 5px;
    background-color: #fff;
    overflow: hidden;
    .similar-product-item-img{
        width: 100%;
        height: 200px;
        img{
            object-fit: contain;
            width: 100%;
            height: 100%;
        }
    }
    .similar-product-item-body{
        .similar-product-item-title{
            font-size: 14px;
            color: #0f1111;
            margin-bottom: 2px;
            line-height: 18px;
         
        }
        .similar-product-item-price{
            font-size: 16px;
            color: var(--secondbrand-color);
        }
        .similar-product-item-offerPrice{
            font-size: 11px;
            color: #000;
            
            span {
                color: var(--atag-color);
                text-decoration: line-through;
            }
            .dis-per{
                text-decoration: unset !important;
                color: #000;
                padding-left: 10px;
            }
        }
    }

}
.hot-url{
    font-size: 16px;
    font-weight: 600;
    margin: 6px;
    border-bottom: 3px solid var(--secondbrand-color);
    display: inline-block;
}
.hotDeals-Product-main{
    display: grid;
    grid-template-columns: repeat(7, 14.28%);
    margin-bottom: 20px;
    .hotDeals-Product-item{
        position: relative;
        background-color: #fff;
        margin: 5px;
        padding: 2px 2px 5px 2px;
        .hotDeals-Product-item-image{
            width: 100%;
            height: 200px;
            display: inline-block;
            overflow: hidden;
            img{
                object-fit: contain;
                width: 100%;
                height: 100%;
            }
        }
        .hotDeals-Product-item-body{
            padding: 2px 10px;
            .hotDeals-Product-item-title{
                font-size: 12px;
                color: #424242;
                height: 36px;
                line-height: 18px;
                overflow: hidden;
            }
            .hotDeals-Product-item-price{
                .price{
                    font-size: 18px;
                   
                    /* height: 18px; */
                    color: var(--secondbrand-color);
                }
                .offer-prize{
                    font-size: 10px;
                    /* height: 14px; */
                    color: var(--atag-color);
                    margin-right: 4px;
                    text-decoration: line-through;
                }
                .offer-percentage{
                    background: #d3232a;
                    border-radius: 2px;
                    color: #eff0f5;
                    font-size: 10px;
                    padding: 0px 3px;
                }
                
            }
        }
        .hot-img-d{
            position: absolute;
            top: -15px;
            right: -8px;
            width: 40px;
            height: 40px;
            img{
                width: 100%;
                height: 100%;
                mix-blend-mode: multiply;
                background: transparent;
                
            }
            
        }
    }
}
/*****order-successful-message-main-content****/
.order-successful-message-main-content{
    background-color: #fff;
    padding: 50px;
    .order-successful-message-button{
        text-align: center;
        .btn-primary{
            background: linear-gradient(90deg, var(--secondbrand-color), var(--mainbrand-color));
            color: #fff;
            padding: 9px 10px;
            border: none;
            margin-top: 20px;
            font-size: 17px;
        }
        .btn-info{
            
            color: #fff;
            padding: 9px 10px;
            border: none;
            margin-top: 20px;
            font-size: 17px;
        }
    }
}

.load-data-btn{
    text-align: center !important;
}
#load_more_data{
    background-color: #fff;
    border: 1px solid var(--secondbrand-color);
    border-radius: 7px;
    display: inline-block;
    padding: 5px 10px;
    cursor: pointer;
    margin-bottom: 30px;
}
#loading-spinner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    visibility: hidden; /* Initially hidden */
    opacity: 0; /* For smooth fade-in/fade-out */
    transition: visibility 0s, opacity 0.3s;
}

#loading-spinner.active {
    visibility: visible; /* Show spinner */
    opacity: 1;
}

#loading-spinner .spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3; /* Light gray */
    border-top: 5px solid #3498db; /* Blue */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.total-amount-div{
    margin-bottom: 20px;
    .btn{
        background-color: var(--secondbrand-color);
        color: #fff;
    }
    span{
        color: #000;
        padding-left: 10px;
        font-size: 18px;
        font-weight: 600;
    }
}
.btn-login {
    align-items: center;
}