*{
    --bs-cst-primary-100: #F0F1FF;
	--bs-cst-primary-200: #E3E5FF;
	--bs-cst-primary-300: #B7BFFF;
	--bs-cst-primary-400: #A8B2FF;
	--bs-cst-primary-500: #97A6FF;
	--bs-cst-primary-600: #869AFF;
	--bs-cst-primary-700: #728FFF;
	--bs-cst-primary-800: #5C83FF;
	--bs-cst-primary-900: #4078FF;

    --bs-neutral-100: #E6E7E8;
	--bs-neutral-200: #B6B7BC;
	--bs-neutral-300: #878A92;
	--bs-neutral-400: #71747E;
	--bs-neutral-500: #5C5F6A;
	--bs-neutral-600: #474B57;
	--bs-neutral-700: #333845;
	--bs-neutral-800: #202533;
	--bs-neutral-900: #0E1422;

	--bs-neutral-w-900: #FFFFFF;
	--bs-neutral-w-100: #F6F6F6;
	--bs-neutral-w-200: #E9E9EB;

    --bs-semantic-b-100: #E8EFFD;
	--bs-semantic-b-200: #D1DEFB;
	--bs-semantic-b-300: #BACEFA;
	--bs-semantic-b-400: #A3BEF8;
	--bs-semantic-b-500: #8CADF6;
	--bs-semantic-b-600: #759DF4;
	--bs-semantic-b-700: #5E8CF3;
	--bs-semantic-b-800: #477CF1;
	--bs-semantic-b-900: #306CEF;

    --bs-semantic-g-100: #D5E5D7;
	--bs-semantic-g-200: #C1D8C4;
	--bs-semantic-g-300: #98BE9E;
	--bs-semantic-g-400: #83B18B;
	--bs-semantic-g-500: #6FA479;
	--bs-semantic-g-600: #5A9868;
	--bs-semantic-g-700: #458B56;
	--bs-semantic-g-800: #2C7F45;
	--bs-semantic-g-900: #057234;

    --bs-semantic-r-100: #FBD9D0;
	--bs-semantic-r-200: #F8C5B9;
	--bs-semantic-r-300: #EE9F8D;
	--bs-semantic-r-400: #E88C77;
	--bs-semantic-r-500: #E17862;
	--bs-semantic-r-600: #D9644E;
	--bs-semantic-r-700: #D14F3A;
	--bs-semantic-r-800: #C83727;
	--bs-semantic-r-900: #BE1313;

    --bs-semantic-y-100: #FFF1D8;
	--bs-semantic-y-200: #FFEAC4;
	--bs-semantic-y-300: #FFDC9E;
	--bs-semantic-y-400: #FFD58A;
	--bs-semantic-y-500: #FDCF76;
	--bs-semantic-y-600: #FBC862;
	--bs-semantic-y-700: #F9C14C;
	--bs-semantic-y-800: #F6BB33;
	--bs-semantic-y-900: #F3B40A;
    
}


/* Custom Primary Colors */
.bg-cst-primary-100 { background-color: var(--bs-cst-primary-100); }
.bg-cst-primary-200 { background-color: var(--bs-cst-primary-200); }
.bg-cst-primary-300 { background-color: var(--bs-cst-primary-300); }
.bg-cst-primary-400 { background-color: var(--bs-cst-primary-400); }
.bg-cst-primary-500 { background-color: var(--bs-cst-primary-500); }
.bg-cst-primary-600 { background-color: var(--bs-cst-primary-600); }
.bg-cst-primary-700 { background-color: var(--bs-cst-primary-700); }
.bg-cst-primary-800 { background-color: var(--bs-cst-primary-800); }
.bg-cst-primary-900 { background-color: var(--bs-cst-primary-900); }

/* Custom Neutral Colors */
.bg-neutral-100 { background-color: var(--bs-neutral-100); }
.bg-neutral-200 { background-color: var(--bs-neutral-200); }
.bg-neutral-300 { background-color: var(--bs-neutral-300); }
.bg-neutral-400 { background-color: var(--bs-neutral-400); }
.bg-neutral-500 { background-color: var(--bs-neutral-500); }
.bg-neutral-600 { background-color: var(--bs-neutral-600); }
.bg-neutral-700 { background-color: var(--bs-neutral-700); }
.bg-neutral-800 { background-color: var(--bs-neutral-800); }
.bg-neutral-900 { background-color: var(--bs-neutral-900); }


.bg-neutral-w-900 { background-color: var(--bs-neutral-w-900); }
.bg-neutral-w-100 { background-color: var(--bs-neutral-w-100); }
.bg-neutral-w-200 { background-color: var(--bs-neutral-w-200); }



/* Custom Semantic Blue Colors */
.bg-semantic-b-100 { background-color: var(--bs-semantic-b-100); }
.bg-semantic-b-200 { background-color: var(--bs-semantic-b-200); }
.bg-semantic-b-300 { background-color: var(--bs-semantic-b-300); }
.bg-semantic-b-400 { background-color: var(--bs-semantic-b-400); }
.bg-semantic-b-500 { background-color: var(--bs-semantic-b-500); }
.bg-semantic-b-600 { background-color: var(--bs-semantic-b-600); }
.bg-semantic-b-700 { background-color: var(--bs-semantic-b-700); }
.bg-semantic-b-800 { background-color: var(--bs-semantic-b-800); }
.bg-semantic-b-900 { background-color: var(--bs-semantic-b-900); }

/* Custom Semantic Green Colors */
.bg-semantic-g-100 { background-color: var(--bs-semantic-g-100); }
.bg-semantic-g-200 { background-color: var(--bs-semantic-g-200); }
.bg-semantic-g-300 { background-color: var(--bs-semantic-g-300); }
.bg-semantic-g-400 { background-color: var(--bs-semantic-g-400); }
.bg-semantic-g-500 { background-color: var(--bs-semantic-g-500); }
.bg-semantic-g-600 { background-color: var(--bs-semantic-g-600); }
.bg-semantic-g-700 { background-color: var(--bs-semantic-g-700); }
.bg-semantic-g-800 { background-color: var(--bs-semantic-g-800); }
.bg-semantic-g-900 { background-color: var(--bs-semantic-g-900); }

/* Custom Semantic Red Colors */
.bg-semantic-r-100 { background-color: var(--bs-semantic-r-100); }
.bg-semantic-r-200 { background-color: var(--bs-semantic-r-200); }
.bg-semantic-r-300 { background-color: var(--bs-semantic-r-300); }
.bg-semantic-r-400 { background-color: var(--bs-semantic-r-400); }
.bg-semantic-r-500 { background-color: var(--bs-semantic-r-500); }
.bg-semantic-r-600 { background-color: var(--bs-semantic-r-600); }
.bg-semantic-r-700 { background-color: var(--bs-semantic-r-700); }
.bg-semantic-r-800 { background-color: var(--bs-semantic-r-800); }
.bg-semantic-r-900 { background-color: var(--bs-semantic-r-900); }

/* Custom Semantic Yellow Colors */
.bg-semantic-y-100 {background-color: var(--bs-semantic-y-100);}
.bg-semantic-y-200 {background-color: var(--bs-semantic-y-200);}
.bg-semantic-y-300 {background-color: var(--bs-semantic-y-300);}
.bg-semantic-y-400 {background-color: var(--bs-semantic-y-400);}
.bg-semantic-y-500 {background-color: var(--bs-semantic-y-500);}
.bg-semantic-y-600 {background-color: var(--bs-semantic-y-600);}
.bg-semantic-y-700 {background-color: var(--bs-semantic-y-700);}
.bg-semantic-y-800 {background-color: var(--bs-semantic-y-800);}
.bg-semantic-y-900 {background-color: var(--bs-semantic-y-900);}



/* Custom border Primary Colors */
.border-cst-primary-100 { border-color: var(--bs-cst-primary-100) !important; }
.border-cst-primary-200 { border-color: var(--bs-cst-primary-200) !important; }
.border-cst-primary-300 { border-color: var(--bs-cst-primary-300) !important; }
.border-cst-primary-400 { border-color: var(--bs-cst-primary-400) !important; }
.border-cst-primary-500 { border-color: var(--bs-cst-primary-500) !important; }
.border-cst-primary-600 { border-color: var(--bs-cst-primary-600) !important; }
.border-cst-primary-700 { border-color: var(--bs-cst-primary-700) !important; }
.border-cst-primary-800 { border-color: var(--bs-cst-primary-800) !important; }
.border-cst-primary-900 { border-color: var(--bs-cst-primary-900) !important; }

/* Custom border Neutral Colors */
.border-neutral-100 { border-color: var(--bs-neutral-100) !important; }
.border-neutral-200 { border-color: var(--bs-neutral-200) !important; }
.border-neutral-300 { border-color: var(--bs-neutral-300) !important; }
.border-neutral-400 { border-color: var(--bs-neutral-400) !important; }
.border-neutral-500 { border-color: var(--bs-neutral-500) !important; }
.border-neutral-600 { border-color: var(--bs-neutral-600) !important; }
.border-neutral-700 { border-color: var(--bs-neutral-700) !important; }
.border-neutral-800 { border-color: var(--bs-neutral-800) !important; }
.border-neutral-900 { border-color: var(--bs-neutral-900) !important; }

/* Custom border Semantic Blue Colors */
.border-semantic-b-100 { border-color: var(--bs-semantic-b-100) !important; }
.border-semantic-b-200 { border-color: var(--bs-semantic-b-200) !important; }
.border-semantic-b-300 { border-color: var(--bs-semantic-b-300) !important; }
.border-semantic-b-400 { border-color: var(--bs-semantic-b-400) !important; }
.border-semantic-b-500 { border-color: var(--bs-semantic-b-500) !important; }
.border-semantic-b-600 { border-color: var(--bs-semantic-b-600) !important; }
.border-semantic-b-700 { border-color: var(--bs-semantic-b-700) !important; }
.border-semantic-b-800 { border-color: var(--bs-semantic-b-800) !important; }
.border-semantic-b-900 { border-color: var(--bs-semantic-b-900) !important; }

/* Custom border Semantic Green Colors */
.border-semantic-g-100 { border-color: var(--bs-semantic-g-100) !important; }
.border-semantic-g-200 { border-color: var(--bs-semantic-g-200) !important; }
.border-semantic-g-300 { border-color: var(--bs-semantic-g-300) !important; }
.border-semantic-g-400 { border-color: var(--bs-semantic-g-400) !important; }
.border-semantic-g-500 { border-color: var(--bs-semantic-g-500) !important; }
.border-semantic-g-600 { border-color: var(--bs-semantic-g-600) !important; }
.border-semantic-g-700 { border-color: var(--bs-semantic-g-700) !important; }
.border-semantic-g-800 { border-color: var(--bs-semantic-g-800) !important; }
.border-semantic-g-900 { border-color: var(--bs-semantic-g-900) !important; }

/* Custom border Semantic Red Colors */
.border-semantic-r-100 { border-color: var(--bs-semantic-r-100) !important; }
.border-semantic-r-200 { border-color: var(--bs-semantic-r-200) !important; }
.border-semantic-r-300 { border-color: var(--bs-semantic-r-300) !important; }
.border-semantic-r-400 { border-color: var(--bs-semantic-r-400) !important; }
.border-semantic-r-500 { border-color: var(--bs-semantic-r-500) !important; }
.border-semantic-r-600 { border-color: var(--bs-semantic-r-600) !important; }
.border-semantic-r-700 { border-color: var(--bs-semantic-r-700) !important; }
.border-semantic-r-800 { border-color: var(--bs-semantic-r-800) !important; }
.border-semantic-r-900 { border-color: var(--bs-semantic-r-900) !important; }

/* Custom border Semantic Yellow Colors */
.border-semantic-y-100 { border-color: var(--bs-semantic-y-100) !important; }
.border-semantic-y-200 { border-color: var(--bs-semantic-y-200) !important; }
.border-semantic-y-300 { border-color: var(--bs-semantic-y-300) !important; }
.border-semantic-y-400 { border-color: var(--bs-semantic-y-400) !important; }
.border-semantic-y-500 { border-color: var(--bs-semantic-y-500) !important; }
.border-semantic-y-600 { border-color: var(--bs-semantic-y-600) !important; }
.border-semantic-y-700 { border-color: var(--bs-semantic-y-700) !important; }
.border-semantic-y-800 { border-color: var(--bs-semantic-y-800) !important; }
.border-semantic-y-900 { border-color: var(--bs-semantic-y-900) !important; }

.edit-btn { border: 1px solid var(--bs-neutral-200); background: #fff; padding:10px 20px; border-radius: 4px;}
.hidden {
	display: none;
  }
.pe-lg-7 { padding-right: 7rem!important;} 
.divider { height:1px;width: 100%; background: var(--bs-neutral-w-200);}
.primary-btn { padding:10px 20px; height:44px;}
.search-btn { left:10px; }
.manu_cart {    display: flex	;
		align-items: center;
		gap: 15px;}
.cart_price { font-weight: 600; color: var(--bs-neutral-900); }
.number-input {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--bs-neutral-100);
	border-radius: 4px;
	overflow: hidden;
  }
  
  .number-input button {
	background-color: #fff;
	border: none;
	padding:8px;
	font-size: 18px;
	cursor: pointer;
	    line-height: 1;
  }
  
  .number-input button:hover {
	background-color: var(--bs-neutral-100);
  }
  
  .number-input .number {
	width: 30px;
	text-align: center;
	border: none;
	font-size: 14px;
	padding: 5px;
	    line-height: 1;
  }

  .cart-btn-box {    bottom: 30px;
    position: absolute;
    display: grid;
    grid-auto-flow: column;
    gap: 15px;
    left: 15px;
    right: 15px;}

nav ul li a:hover {background: var(--bs-neutral-w-100); border-radius: 8px;}


.hover_dropdown_trigger:hover .hover_dropdown { display: block; }
.hover_dropdown { display: none; position: absolute; background: #fff; border-radius: 10px; padding:5px; top:100%; min-width:200px; box-shadow:0px 0px 5px #0000002b;z-index:10;}
.hover_dropdown ul { padding:0;}
.hover_dropdown ul li { list-style: none;}
.hover_dropdown ul li a { text-decoration: none; padding:5px 15px; display: block; color: var(--bs-neutral-800); border-radius: 4px;}
.hover_dropdown ul li a:hover { background: var(--bs-neutral-w-100);}

/* home hero banner css starts here */
.home-hero { position: relative; z-index:1;}
.home-hero .container .row{ height:500px;}
.hero-img-sec img:first-child{ right:300px; top:80px; z-index: 3;}
.hero-img-sec img:nth-child(2){ top:80px; z-index: 2;}
.hero-img-sec img:nth-child(3){ top:60px;z-index: 4;}
.banner-txt-box {position: relative; z-index:5;}
/* home hero banner css ends here */

/* slider starts here */

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

  .swiper-slide {
	text-align: center;
	font-size: .875rem;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
  }

  .swiper-slide img {
	display: block;
	width: fit-content;
	height: 100%;
	object-fit: cover;
  }
  .view_trigger { width: 100%; cursor: pointer;}
  .view_trigger:hover .view-eye { display: flex; }

  .view-eye {     position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    display: none;
    align-items: center;
    place-content: center;
    background: #ffffff91;}

.place-items-center { place-items:center;}

/* slider ends here */
.border-transparent { border:1px solid transparent;}
.text-gray { color: var(--bs-neutral-400);}

.nav-pills .nav-link:hover,.nav-pills .show>.nav-link {
	color: #202533;
    background-color: #ffffff;
    border: 1px solid #E9E9EB;
	
}



/* footer css starts here */

.socials {     display: grid;
		grid-auto-flow: column;
		gap: 20px;
		justify-self: left;}
.socials li { }
.socials li a {padding:0px;}

.footer_links {padding: 0px; margin-top:40px;}
.footer_links li {    list-style: none;
    padding: 10px 0px;}
.footer_links li a { text-decoration: none; color: var(--bs-neutral-500);}

.filter svg { filter:grayscale(1); transition: all ease-out .2s;}
.filter svg:hover { filter:none; cursor: pointer; transition: all ease-in .2s;}
.payment {     display: flex	;
		justify-self: right;
		flex-flow: column;}

/* footer css ends here */

.btn-zoom {transition: all ease-out .2s;}
.btn-zoom:hover { transition: all ease-in .2s; transform:scale(105%);}

/* your order css starts here */

.order-img-sm-list { background: var(--bs-neutral-w-100); border-radius: 100px; width:40px; height:40px; display: flex;     display: flex
	;
		align-items: center;
		justify-content: center;}

/* your order css ends here */

.or {height:1px; background: var(--bs-neutral-100); width:100%; margin-top: 45px; margin-bottom: 45px; position: relative;}
.or::before {content: 'OR';
    position: absolute;
    background: #fff;
    left: 50%;
    width: 80px;
    height: 40px;
    top: 50%;
    margin: 0 auto;
    display: flex
;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%); }







@media screen and (max-width:991px) {
/* header menu css starts here */
.mobile_menu {    padding: 0px;}
.mobile_menu li { list-style: none;}
.mobile_menu li a { color: var(--bs-neutral-900) ; text-decoration: none; padding:15px; display: block;transition: all ease-in .2s;}
.mobile_menu li a:hover { background:var(--bs-neutral-100); border-radius: 5px; transition: all ease-out .2s;}
/* header menu css ends here */

/* hero section css starts here */
.hero-img-sec img {z-index:-1;}

/* hero section css starts here */
.update_img { position: absolute; top: 50%; transform: translate(0px, -50%);}
/* footer css starts here */

.payment { 
			flex-flow: column;
			place-self: center;}
/* footer css ends here */
.hover_dropdown { position: relative; background: #fff; border-radius: 10px; padding:5px; top:100%; min-width:200px; box-shadow:0px 0px 5px #0000002b;}
.hover_dropdown ul li a { padding:10px;}
}
@media screen and (max-width:767px) {
	.y-line { height:25px; width: 1px; background: var(--bs-neutral-300); place-self: center;}
}



/* product css starts here */

.breadcrumb-item a { color: var(--bs-neutral-500); text-decoration: none;}

.product-img-box { display: flex; justify-content: center;}

.outline-btn { border:1px solid var(--bs-neutral-100); padding:5px 15px; background: #fff; border-radius: 100px; display: inline-flex; align-items: center; gap:10px;}

/* Sortby Container */
.sortby {
	position: relative;
	display: inline-block;
	
  }
  
  /* Sortby Toggle Button */
  .sortby-toggle {
	
	padding: 10px;
	background: #fff;
	border: 0px;
	border-radius: 4px;
	cursor: pointer;
	text-align: left;
	gap:5px;
	display: flex;
	justify-content: space-between;
	align-items: center;
  }
  
  .sortby-toggle .arrow {
	font-size: 12px;
  }
  
  /* Sortby Menu */
  .sortby-menu {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	width: 100%;
	background: #fff;
	border-radius: 10px;
	list-style: none;
	padding: 20px;
	margin: 0;
	z-index: 10;
	min-width:220px;
  }
  
  .sortby-menu li {
	padding: 5px 0px;
	
  }
  
  .sortby-menu li:last-child {
	border-bottom: none;
  }
  
  .sortby-menu li label {
	display: block;
	cursor: pointer;
  }
  
  .sortby-menu li input[type="radio"] {
	margin-right: 10px;
  }
  
  /* Show Sortby Menu */
  .sortby-menu.show {
	display: block;
  }




/* product css ends here */


/* color select radio button starts here */
  
.clr-slct-box {
	display: flex;
	flex-direction: row;
	gap: 10px;
  }
  
  .clr-slct-label {
	display: flex;
	align-items: center;
	cursor: pointer;
	font-size: 16px;
  }
  
  .clr-slct-input {
	display: none; /* Hide the default checkbox */
  }
  
  .clr-slct-btn{
	width: 20px;
	height: 20px;
	border-radius: 50%; /* Make it rounded */
	margin-right: 10px;
	position: relative;
	transition: background-color 0.3s ease, border 0.3s ease;
  }
  
  /* Different colors for each checkbox */
  .clr-slct-label:nth-child(1) .clr-slct-btn{
	background-color: var(--bs-semantic-b-400); /* Red */
  }
  
  .clr-slct-label:nth-child(2) .clr-slct-btn{
	background-color: var(--bs-semantic-y-400); /* Teal */
  }
  
  .clr-slct-label:nth-child(3) .clr-slct-btn{
	background-color: var(--bs-semantic-g-400); /* Yellow */
  }

  .clr-slct-label:nth-child(4) .clr-slct-btn{
	background-color: var(--bs-cst-primary-900); /* Yellow */
  }
  
  /* Add border and change color when checked */
  .clr-slct-input:checked + .clr-slct-btn:before {
	content: '';
	position: absolute;
	background: transparent;
	width: 26px;
	height: 26px;
	border-radius: 100px;
	border:1px solid #000;
	top:-3px;
	left:-3px;
  }

/* color select radio button starts here */


/* size select radio button starts here */
  
.size-slct-box {
	display: flex;
	flex-direction: row;
	gap: 10px;
	flex-wrap: wrap;
	flex-flow: wrap;
	row-gap: 10px;
  }
  
  .size-slct-label {
	display: flex;
	align-items: center;
	cursor: pointer;
	font-size: 16px;
  }
  
  .size-slct-input {
	display: none; /* Hide the default checkbox */
  }
  
  .size-slct-btn {
	width: 40px;
	height: 40px;
	border-radius: 5px; /* Make it rounded */
	/* margin-right: 10px; */
	position: relative;
	transition: background-color 0.3s ease, border 0.3s ease;
	border:1px solid var(--bs-neutral-100);
	display: flex	;
		align-items: center;
		justify-content: center;
	
  }


/* Hide the default checkbox */
.heart-input {
	display: none;
  }

  /* Custom checkbox */
  .custom-checkbox {
	display: flex;
	width: 44px;
	height: 44px;
	background-color: #fff;
	border: 1px solid var(--bs-neutral-100);
	border-radius: 4px;
	position: relative;
	cursor: pointer;
	transition: background-color 0.3s ease, border-color 0.3s ease;
	color: var(--bs-neutral-500);
	align-items: center;
	justify-content: center;
  }



  /* When the checkbox is checked */
  .heart-input:checked + .custom-checkbox {
	background-color: var(--bs-semantic-r-800);
	border-color: var(--bs-semantic-r-800);
	color: #fff;
  }

  .heart-input:checked + .custom-checkbox::after {
	opacity: 1;
  }







  
  /* Different colors for each checkbox */
  .size-slct-label .size-slct-btn {
	background-color: #fff; /* Red */
  }
  
  
  /* Add border and change color when checked */
  .size-slct-input:checked + .size-slct-btn {
	
	
	
	border:1px solid var(--bs-neutral-900);
	
  }

/* size select radio button starts here */




/* side tabs start here */

.side-tab { color: var(--bs-neutral-500); text-align: left; }
.side-tab.active { color: var(--bs-neutral-900)!important; background: var(--bs-neutral-w-100)!important; border:0px!important;}
.side-tab:hover { border:0px!important;background: var(--bs-neutral-w-100)!important;}
/* side tabs ends here */

.review-profile { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; color: var(--bs-cst-primary-900);} 

.flex-auto { flex: auto!important;}

/* share section starts here */
.share-btn { background: #fff;
    width: 40px;
    height: 40px;
    border-radius: 100px;
    display: flex;
    place-items: center;transition: all ease-out .2s;}
.share-btn:hover { background: var(--bs-neutral-w-200); transition: all ease-in .2s;}
.shadow-md {
    box-shadow: 0 0.125rem 0.55rem rgb(0 0 0 / 10%);
}
.shareLink {    padding: 10px 15px;
    border: 1px solid var(--bs-neutral-100);
    border-radius: 5px; flex:1;}
.copyBtn {padding: 10px 15px;
    border: 1px solid var(--bs-neutral-100);
    border-radius: 5px;}







/* share section starts here */

.star-rating {
    display: inline-flex;
    gap: 4px; /* Space between stars */
    cursor: pointer;
}

.star {
    width: 14px; /* Adjust size of stars */
    height: 14px; /* Adjust size of stars */
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_5690_37)'%3E%3Cpath d='M8 1.5L10.163 5.77865L15 6.46898L11.5 9.79758L12.326 14.5L8 12.2787L3.674 14.5L4.5 9.79758L1 6.46898L5.837 5.77865L8 1.5Z' stroke='%235C5F6A' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_5690_37'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    transition: background-image 0.3s;
}

.star:hover,
.star.active {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_5690_29)'%3E%3Cpath d='M8 0.5L10.472 5.43691L16 6.23344L12 10.0741L12.944 15.5L8 12.9369L3.056 15.5L4 10.0741L0 6.23344L5.528 5.43691L8 0.5Z' fill='%235C5F6A'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_5690_29'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

/* share section ends here */

/* price range slider starts here */

/* Slider Container */
.price-range-slider {
	width: 100%;
	max-width: 500px;
	margin: 20px auto;
	position: relative;
	
  }
  
  /* Slider Track */
  .slider {
	position: relative;
	height: 3px;
	background: #ddd;
	border-radius: 5px;
  }
  
  /* Progress Bar */
  .progress {
	position: absolute;
	height: 3px;
	background: var(--bs-neutral-300);
	border-radius: 5px;
  }
  
  /* Range Input */
  .range-input {
	position: relative;
  }
  
  .range-input input {
	position: absolute;
	top: -5px;
	left: 0;
	width: 100%;
	height: 5px;
	background: none;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
  }
  
  .range-input input::-webkit-slider-thumb {
	height: 20px;
	width: 20px;
	background: var(--bs-neutral-900);
	border-radius: 50%;
	pointer-events: auto;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	position: relative;
	z-index: 2;
	border:2px solid #fff;
  }

  
  .range-input input::-moz-range-thumb {
	height: 20px;
	width: 20px;
	background: var(--bs-neutral-900);
	border-radius: 50%;
	pointer-events: auto;
	cursor: pointer;
	position: relative;
	z-index: 2;
	border:2px solid #fff;
  }
  
  /* Tooltip */
  .range-input .tooltip_2 {
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--bs-neutral-900);
	color: #fff;
	padding: 5px 10px;
	border-radius: 4px;
	font-size: 12px;
	display: none; /* Hide by default */
	white-space: nowrap;
	z-index:5;
  }
  
  /* Show tooltip on hover or focus */
  .range-input input:hover + .tooltip_2,
  .range-input input:focus + .tooltip_2 {
	display: block;
  }/* Tooltip */
.tooltip_2 {
	position: absolute;
	top: -30px; /* Moves tooltip above the thumb */
	background: var(--bs-neutral-900);
	color: #fff;
	padding: 5px 10px;
	border-radius: 4px;
	font-size: 12px;
	display: none; /* Hide by default */
	white-space: nowrap;
	z-index: 5;
	transform: translateX(-50%); /* Centers it dynamically */
}

/* price range slider ends here */