:root {
    --primary-font: "Poppins", sans-serif;
    --primary-color: #673DE6;
    --secondary-color: #000000;
    --background-color: #fff;
    --footer-bg:#673DE6;

 
}
 
.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    filter: brightness(0.9);
}


html, body, div, span, applet, object, iframe,
p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { display: block; }
body{ margin:0; padding:0;   font-family:var(--primary-font)!important;  }
a{ margin:0; padding:0; text-decoration:none !important;  outline:none !important; -moz-transition:.4s; -webkit-transition:.4s; -ms-transition:.4s; -o-transition:.4s; transition:.4s;}
a:hover{ color:#fff;}
::selection{ background:#fff; color:#010101;}
::-moz-selection{background:#fff; color:#010101;}
::-webkit-selection{background:#fff; color:#010101;};
img{ max-width:100%; height:auto;}
ul{ margin:0; padding:0; list-style-type:none;}
li{ margin:0; padding:0;}
p{ padding:0; margin:0 0 15px 0; 
  font-size: 15px;

color:#010101;

   }
h1, h2, h3, h4, h5, h6{ margin:0; padding:0; font-weight: 700;  font-family:var(--primary-font)!important;  }


.mainContainer{
max-width: 1470px;
  margin: 0 auto;
  padding: 0 50px;
  position: relative;
	    @media (max-width: 767px) {
	padding: 0 14px;
		}
}

.startRating{
	display: flex;
	gap:2px;
	span{
		i{
			color:#ff9c05 ;
			font-size: 10px;
		}
	}
}


.offcanvas{
background: #fff!important;
.offcanvas-body{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.offcanvas-header{
  border-bottom: 1px #ddd solid;
.btn-close{
	opacity: 1;
    padding: 0;
    width: auto;
    height: auto;
    position: relative;
    right: 7px;
    font-size: 0px;

    i{
	color: var(--secondary-color);
	font-size: 25px;
}
}
}

.btn-close:focus{
	box-shadow: none;
}

}



header{
  position:fixed;
  transition: all 0.4s ease;
  width: 100%;
  padding: 10px 40px;
  z-index:100 ;
  background: #fff;

  @media (max-width: 1200px) {
    padding: 14px 0px;
  }
  @media (max-width: 767px) {
    padding: 15px 0px;
  }
}
header.sticky {
  position:fixed;
background: #fff;

    z-index:1000;

}

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

  .logoFlexGrid{
display: flex;
gap:30px;
align-items: center;

  }


  .menuTopMain {
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0;
    align-items: center;
    li{
      padding: 0 16px;
    }
    a{
      font-weight: 500;
      font-size: 16px;
      color: var(--secondary-color);
padding: 0px 0px 18px;
      position: relative;
      white-space: nowrap;
      &:hover::before{
        width: 100%;
      }
      &::before{
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0;
        height: 2px;
        transition: 0.4s;
        content: "";
        background: var(--primary-color);
      }
    }
  }
}

.componyLogoSlider {
padding: 62px 0px 0px;
  background: #fff;
  overflow: hidden;
  position: relative;
   @media (max-width: 1199px) {
padding: 56px 0px 0px;
     }
       @media (max-width: 767px) {
    height: auto;
  }

}
  .owl-dots{
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
      @media (max-width: 767px) {
  bottom: 8px;
      }
    .owl-dot{
      span{
        display: block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: rgba(255,255,255,0.5);
        transition: 0.3s;
      }
      &.active span{
        background: var(--primary-color);
        width: 28px;
        border-radius: 5px;
      }
    }
  }
  .subPageBottomBorder{
  	border-bottom: 1px solid #eee;
  }
/* ===== Breadcrumb ===== */
.breadcrumbSection{
	padding: 80px 0 0;
	background: #fff;


}
.breadcrumbFlex{
	display: flex;
	align-items: center;
	gap: 16px;


}
.breadcrumbBack{
	display: flex;
	align-items: center;
	justify-content: center;
	color: #333;
	font-size: 16px;
	text-decoration: none;
	transition: 0.3s;
	&:hover{
		color: var(--primary-color);
	}
}
.breadcrumbNav{
	display: flex;
	align-items: center;
	gap: 8px;
	a{
		font-size: 14px;
		font-weight: 400;
		color: #888;
		text-decoration: none;
		transition: 0.3s;
		&:hover{
			color: var(--primary-color);
		}
	}
	.breadcrumbSep{
		font-size: 16px;
		color: #bbb;
	}
	.breadcrumbCurrent{
		font-size: 14px;
		font-weight: 600;
		color: #111;
	}
}

/* ===== Pagination ===== */
.paginationWrap{
	display: flex;
	align-items: center;
  justify-content: center;


	padding-top: 50px;

	gap: 20px;
	flex-wrap: wrap;
	@media (max-width: 767px){
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		margin-top: 24px;
		padding-top: 16px;
	}
}
.paginationLeft{
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.paginationBtn{
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 14px;
	font-weight: 400;
	color: #bbb;
	text-decoration: none;
	padding: 8px 4px;
	white-space: nowrap;
	transition: 0.3s;
	span{
		font-size: 18px;
		line-height: 1;
	}
	&:hover{
		color: #888;
	}
}
.paginationNext{
	color: #333;
	font-weight: 500;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 8px 16px;
	&:hover{
		border-color: var(--primary-color);
		color: var(--primary-color);
	}
}
.paginationNumbers{
	display: flex;
	align-items: center;
	gap: 4px;
  flex-wrap: wrap;
}
.pageNum{
display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 36px;
  border-radius: 4px;
  border: 1px solid #ddd;
  font-size: 14px;
  font-weight: 700;
  color: var(--secondary-color);
  text-decoration: none;
  transition: 0.3s;
	&:hover{
		border-color: var(--primary-color);
		color: var(--primary-color);
	}
	&.active{
		background: var(--primary-color);
		border-color: var(--primary-color);
		color: #fff;
	}
}
.pageDots{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 36px;
	border-radius: 4px;
	border: 1px solid #ddd;
	font-size: 14px;
	color: var(--secondary-color);
	letter-spacing: 2px;
}
.paginationRight{
	display: flex;
	align-items: center;
	gap: 12px;
	@media (max-width: 767px){
		gap: 8px;
	}
}
.paginationLabel{
	font-size: 14px;
	font-weight: 500;
	color: #333;
	white-space: nowrap;
	@media (max-width: 767px){
		font-size: 12px;
	}
}
.paginationSelect{
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 14px;
	font-weight: 500;
	color: #333;
	background: #fff;
	outline: none;
	font-family: var(--primary-font);
	cursor: pointer;
	@media (max-width: 767px){
		padding: 6px 8px;
		font-size: 12px;
	}
}
.paginationCount{
	font-size: 14px;
	font-weight: 400;
	color: #666;
	white-space: nowrap;
	@media (max-width: 767px){
		font-size: 12px;
	}
}

/* ===== Sort Dropdown ===== */
.sortDropdown{
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1.5px solid #222;
	border-radius: 12px;
	padding: 10px 20px;
	background: #fff;
  	@media (max-width: 767px){
padding: 8px 4px;
    }
	svg{
		font-size: 13px;
		color: #333;
		flex-shrink: 0;
      	@media (max-width: 767px){
display: none;
        }
	}
	select{
		border: none;
		outline: none;
		background: transparent;
		font-size: 13px;
		font-weight: 500;
		color: #333;
		cursor: pointer;
		font-family: var(--primary-font);
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		padding-right: 4px;
		@media (max-width: 767px){
			font-size: 11px;
		}
	}
}

/* ===== Section Titles ===== */
.sectionTitle{
	font-size: 32px;
	font-weight: 600;
	color: var(--secondary-color);
	margin-bottom: 0px;
  text-transform: capitalize;
	@media (max-width: 767px){
		font-size: 16px;
	
	}
}
.sectionTitleCenter{
font-size: 32px;
  font-weight: 600;
  color: var(--secondary-color);
  margin-bottom: 6px;
  text-align: center;
	@media (max-width: 767px){
		font-size: 20px;
	}
}
.sectionHeaderFlex{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 24px;
  @media (max-width: 767px){
margin-bottom: 15px;
  }

	
}
.viewAllLink{
		font-size: 16px;
		font-weight: 500;
		color: var(--primary-color)!important;
		text-decoration: none;
		display: flex;
		align-items: center;
		gap: 6px;
		transition: 0.3s;
     	@media (max-width: 1199px){
display: none;
      }
        @media (max-width: 767px){
	font-size: 13px;
        }
		&:hover{
			gap: 10px;
		}
	}
  .mobileBtnCentre{
    display: none;
    justify-content: center;
    padding-top: 30px;
    	@media (max-width: 1199px){
display: flex;
      }
  }
/* ===== Brand Logos Section ===== */
.brandLogosSection{
	padding: 64px 0 40px;

	@media (max-width: 767px){
		padding: 30px 0 20px;
	}
}
.brandLogosGrid{
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 16px;
	@media (max-width: 1199px){
		grid-template-columns: repeat(4, 1fr);
	}
	@media (max-width: 767px){
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
	}
	@media (max-width: 570px){
		grid-template-columns: repeat(3, 1fr);
		gap: 8px;
	}
}
.brandLogoItem{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: transparent;
	border: 2px solid #8A8A8A;
	border-radius:24px;

	height: 130px;
	transition: 0.3s;
	text-decoration: none;
	cursor: pointer;
  	@media (max-width: 570px){
	border: 1px solid #8A8A8A;
  	height: 80px;
    	border-radius:8px;
		width: 100%;
    }
  img{
    transition: 0.4s;
      	@media (max-width: 570px){
width: 70px;
        }
  }
  &:hover img{
    transform: scale(1.1);
  }
	&:hover{
		border-color: var(--primary-color);
		box-shadow: 0 4px 16px rgba(0,0,0,0.06);
	}

}
.brandHighlight{
	background: #FFC107!important;
	border-color: #FFC107!important;
	.brandName{
		color: #fff;
		font-weight: 700;
	}
}

/* ===== Featured Categories Section ===== */
.featuredCategoriesSection{
	padding: 40px 0;
	background: #fff;
	@media (max-width: 767px){
		padding: 20px 0;
	}
}
.categoriesGrid{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	@media (max-width: 991px){
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}
	@media (max-width: 480px){
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
}
.categoryCard{
	position: relative;
	display: block;
	border-radius: 18px;
	overflow: hidden;
	text-decoration: none;
	aspect-ratio: 4/3;
	transition: 0.3s;
  	@media (max-width: 570px){
	border-radius: 15px;
    }
  &:hover img{
    transform: scale(1.1);
  }
	&:hover{

		box-shadow: 0 8px 24px rgba(0,0,0,0.12);
	}
	img{
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
    transition: 0.4s;
  
	}
	.categoryOverlay{
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 16px 18px;
		background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 100%);
		@media (max-width: 767px){
			padding: 12px 14px;
		}
		h3{
			font-size: 24px;
			font-weight: 600;
			color: #fff;
			margin: 0 0 2px;
			@media (max-width: 767px){
				font-size: 14px;
			}
		}
		p{
			font-size: 12px;
			font-weight: 400;
			color: rgba(255,255,255,0.8);
			margin: 0;
			@media (max-width: 767px){
				font-size: 10px;
			}
		}
	}
}



/* ===== Wholesale Deals / Products Section ===== */
.wholesaleDealsSection{
	padding: 40px 0;
	background: #fff;
	@media (max-width: 767px){
		padding: 20px 0;
	}
}
.productsGrid{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	@media (max-width: 991px){
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
	@media (max-width: 480px){
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
}
.productCard{
	border: 1px solid #eee;
	border-radius: 14px;
	overflow: hidden;
	transition: 0.3s;
	background: #fff;
	display: flex;
	flex-direction: column;
	&:hover{
		box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	}

  &:hover img{
    transform: scale(1.08);
  }
	.productImgWrap{
		background: #f5f5f7;
		padding: 24px;
		display: flex;
		align-items: center;
		justify-content: center;
		aspect-ratio: 1;
		@media (max-width: 767px){
			padding: 16px;
		}
		img{
			width: 100%;
			height: 100%;
			object-fit: contain;
      transition: 0.4s;
		}
	}
	.productInfo{
padding: 16px;
		flex: 1;

		h4{
		font-size: 20px;
      font-weight: 700;
      color: var(--secondary-color);
      margin-bottom: 4px;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
	  text-transform: capitalize;
			@media (max-width: 767px){
				font-size: 13px;
			}
		}
		.productMoq{
			font-size: 16px;
		 color: var(--secondary-color);
     font-weight: 500;
			margin: 0 0 24px;
			text-transform: capitalize;
			@media (max-width: 767px){
				font-size: 11px;
			}
		}
		.productPrice{
			font-size: 20px;
			font-weight: 600;
			color: var(--primary-color);
			margin: 0 0 24px;
			@media (max-width: 767px){
				font-size: 15px;
			}
		}
	}
	.productBuyBtn{
		display: block;

		padding: 10px;
		border: 1.5px solid var(--primary-color);
		border-radius: 10px;
		text-align: center;
		font-size: 14px;
		font-weight: 600;
		color: var(--primary-color);
		text-decoration: none;
		transition: 0.3s;

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

/* ===== Promo Banner Section ===== */
.promoBannerSection{
	padding: 40px 0;
	background: #fff;
	@media (max-width: 767px){
		padding: 20px 0;
	}
}
.promoBannerCard{
	border-radius: 16px;
	overflow: hidden;
	img{
		width: 100%;
		display: block;
		border-radius: 16px;
	}
}

/* ===== Sign In Page ===== */
.signInSection{
	padding-top: 62px;
}
.signInGrid{
	display: grid;
	grid-template-columns: 1fr 1fr;

	@media (max-width: 991px){
		grid-template-columns: 1fr;
	}
}
.signInLeft{
	background: linear-gradient(135deg, #1a1145 0%, #2d1b69 40%, #673DE6 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 50px;
	position: relative;
	@media (max-width: 991px){
		padding: 40px 30px;
		min-height: 260px;
	}
	@media (max-width: 575px){
		padding: 30px 20px;
		min-height: 200px;
	}
}
.signInLeftContent{
	text-align: center;
	.signInLogo{
		display: inline-flex;
		align-items: center;
		gap: 10px;
		text-decoration: none;
		margin-bottom: 30px;
		span{
			font-size: 18px;
			font-weight: 700;
			color: #fff;
			letter-spacing: 2px;
		}
		@media (max-width: 575px){
			margin-bottom: 20px;
			span{ font-size: 16px; }
		}
	}
	h1{
		font-size: 28px;
		font-weight: 700;
		color: #fff;
		line-height: 1.4;
		max-width: 380px;
		margin: 20px auto 0;
		@media (max-width: 767px){
			font-size: 22px;
		}
		@media (max-width: 575px){
			font-size: 18px;
		}
	}
}
.signInRight{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 50px;
	background: #fff;
	@media (max-width: 991px){
		padding: 40px 30px;
	}
	@media (max-width: 575px){
		padding: 30px 20px;
	}
}
.signInForm{
	width: 100%;
	max-width: 440px;
	h2{
	font-size: 26px;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 20px;
		@media (max-width: 575px){
			font-size: 22px;
			margin-bottom: 24px;
		}
	}
}
.signInField{
	margin-bottom: 24px;
	label{
	display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--secondary-color);
    margin-bottom: 8px;
	}
	input{
	width: 100%;
    padding: 15px 20px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-family: var(--primary-font);
    color: #333;
    outline: none;
    background: #E8E8E8;
    transition: 0.3s;
		&::placeholder{
			color: #999;
			font-weight: 400;
		}
		&:focus{
			background: #e0e0e0;
		}
	}
}
.signInSubmitBtn{
	width: 100%;
	padding: 15px;
	border: 1px var(--primary-color) solid;
	border-radius: 12px;
	background:var(--primary-color);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	font-family: var(--primary-font);
	cursor: pointer;
	transition: 0.3s;
	margin-top: 14px;
	&:hover{
		opacity: 0.9;
	background: transparent;
	color: var(--primary-color);
	}
}
.signInNote{
	text-align: center;
  font-size: 12px;
  color: #49475A;
  margin-top: 18px;
  margin-bottom: 10px;
}
.signInSwitch{
	text-align: center;
	font-size: 13px;
	color: #555;
	margin-top:13px;
	a{
		color: var(--primary-color);
		font-weight: 600;
		text-decoration: none;
		margin-left: 2px;
		&:hover{
			text-decoration: underline;
		}
	}
}
.fileUploadLabel{
	display: block;
	cursor: pointer;
	input[type="file"]{
		display: none;
	}
	.fileUploadInner{
		display: flex;
		align-items: center;
		gap: 14px;
		background: #e9e9e9;
		border-radius: 12px;
	padding: 28px 20px;
		transition: 0.3s;
		i{
			font-size: 16px;
			color: #888;
			transform: rotate(-45deg);
		}
		.fileUploadText{
			display: flex;
			flex-direction: column;
			strong{
				font-size: 14px;
				font-weight: 600;
				color: #333;
			}
			small{
				font-size: 11px;
				color: #999;
				margin-top: 2px;
			}
		}
	}
	&:hover .fileUploadInner{
		background: #e0e0e0;
	}
}

/* ===== Order Table ===== */
.contentNoScroll{
	overflow: hidden!important;
	height: auto!important;
}
.orderTableWrap{
	background: #fff;
	border-radius: 16px;
	border: 1px solid #eee;
	padding: 0;
	display: flex;
	flex-direction: column;
	.table-responsive{
		flex: 1;
		overflow-y: auto;
		max-height: 370px;
	}
	.paginationWrap{
		padding: 16px 20px;
		margin-top: 0;
		border-top: 1px solid #eee;
		background: #fff;
		flex-shrink: 0;
	}
}
.orderTable{
	margin: 0;
	border: none;
	thead{
		position: sticky;
		top: 0;
		z-index: 3;
		tr{
			border-bottom: 1px solid #eee;
		}
		th{
			font-size: 14px;
			font-weight: 600;
			color: #999;
			letter-spacing: 0.5px;
			text-transform: uppercase;
			padding: 18px 20px;
			background: #fafafa;
			border: none;
			white-space: nowrap;
		}
	}
	tbody{
		tr{
			border-bottom: 1px solid #f5f5f5;
			transition: 0.2s;
			&:last-child{
				border-bottom: none;
			}
			&:hover{
				background: #fafafa;
			}
		}
		td{
			font-size: 14px;
			font-weight: 400;
			color: #555;
			padding: 20px 20px;
			border: none;
			vertical-align: middle;
			white-space: nowrap;
		}
	}
	.orderId{
		font-weight: 700;
		color: #111;
	}
	.orderAmount{
		font-weight: 600;
		color: #111;
	}
}
.statusBadge{
display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 13px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid #A3D6C3;
	&::before{
		content: "";
		width: 5px;
		height: 5px;
		border-radius: 50%;
		flex-shrink: 0;
	}
}
.statusCompleted{
	background: #e6f9ee;
	color: #1a8a4a;
	&::before{
		background: #1a8a4a;
	}
}
.statusPending{
	background: #fef9e6;
	color: #b5930a;
	border: 1px solid #b5930a;
	&::before{
		background: #b5930a;
	}
}
.invoiceActions{
	display: flex;
	align-items: center;
	gap: 12px;
	a{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		color: #888;
		font-size: 14px;
		transition: 0.3s;
		&:hover{
			color: var(--primary-color);
		}
	}
}

/* ===== Product Listing Page ===== */
.productListingSection{
	padding: 40px 0 120px;
	background: #fff;
	@media (max-width: 767px){
		padding: 20px 0 40px;
	}
}
.listingHeader{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 24px;
	h1{
		font-size: 30px;
    font-weight: 600;
    color: var(--secondary-color);
    margin: 0 0 13px;
		@media (max-width: 767px){
			font-size: 20px;
		}
	}
	p{
	font-size: 16px;
    color: #818181;
    margin: 0 0 10px;
    font-weight: 500;
	}
}
.listingLayout{
	display: grid;
	grid-template-columns: 318px 1fr;
	gap: 40px;
	align-items: start;
	@media (max-width: 991px){
		grid-template-columns: 1fr;
	}
}
.filterToggleBtn{
	display: none;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
  border: 3px #fff solid;
	border-radius: 50%;
	background: var(--primary-color);
	font-size: 20px;
	color: #fff;
	font-family: var(--primary-font);
	cursor: pointer;
	position: fixed;
	bottom: 30px;
	right: 30px;
	z-index: 99;
	box-shadow: 0 4px 20px rgba(103,61,230,0.4);
	animation: filterPulse 2s infinite;
	i{ font-size: 20px; }
	@media (max-width: 991px){
		display: flex;
	}
}
@keyframes filterPulse{
	0%{ box-shadow: 0 0 0 0 rgba(103,61,230,0.5); }
	70%{ box-shadow: 0 0 0 14px rgba(103,61,230,0); }
	100%{ box-shadow: 0 0 0 0 rgba(103,61,230,0); }
}
.filterDesktop{
	@media (max-width: 991px){
		display: none;
	}
}
.filterDrawer{
	max-width: 300px;
	.offcanvas-header{
		padding: 5px 15px;
		border-bottom: 1px solid #eee;
		display: flex;
		justify-content: space-between;
		align-items: center;
		h3{
			font-size: 20px;
			font-weight: 600;
			color: var(--secondary-color);
			margin: 0;
		}
	}
	.filterDrawerClose{
		background: none;
		border: none;
		font-size: 18px;
		color: #333;
		cursor: pointer;
		padding: 4px;
		transition: 0.3s;
		&:hover{
			color: #000;
		}
	}
	.offcanvas-body{
		padding: 20px 20px;
	}
}
.filterDrawer .offcanvas-body{
	padding-bottom: 80px;
}
.filterApplyBtn{
	width: calc(100% - 48px);
	padding: 14px;
	border: none;
	border-radius: 10px;
	background: var(--primary-color);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	font-family: var(--primary-font);
	cursor: pointer;
	position: absolute;
	bottom: 20px;
	left: 24px;
}

/* Filter Sidebar */
.filterSidebar{
	position: sticky;
	top: 80px;
	@media (max-width: 991px){
		position: static;
	}
}
.filterTop{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	h3{
	font-size: 20px;
    font-weight: 600;
    color: var(--secondary-color);
    margin: 0;
	}
	.filterClear{
		font-size: 15px;
		color: var(--primary-color);
		text-decoration: none;
		font-weight: 500;
		&:hover{
			text-decoration: underline;
		}
	}
}
.filterGroup{

	padding-bottom: 40px;
	
	h4{
font-size: 20px;
    font-weight: 500;
    color: var(--secondary-color);
		margin-bottom: 7px;
		text-transform: uppercase;
		@media (max-width: 992px){
font-size: 15px;
		}
	}
}
.filterCheckbox{
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 500;
	color: #333;
	margin-bottom: 10px;
	cursor: pointer;
	input[type="checkbox"]{
		display: none;
	}
	.checkmark{
		width: 18px;
		height: 18px;
		border-radius: 4px;
		border: 1.5px solid #ccc;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		transition: 0.2s;
		&::after{
			content: "";
			display: none;
			width: 10px;
			height: 10px;
			border-radius: 2px;
			background: var(--primary-color);
		}
	}
	input:checked + .checkmark{
		border-color: var(--primary-color);
		background: var(--primary-color);
		&::after{
			display: block;
			background: #fff;
			mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5l3 3 7-7' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E");
			mask-size: contain;
			mask-repeat: no-repeat;
			width: 12px;
			height: 12px;
		}
	}
}
.priceRangeInputs{
	display: flex;
	align-items: center;
	gap: 8px;
	span{
	color: #292D32;
    font-size: 25px;
	}
}
.priceSelect{
flex: 1;
  padding: 14px 12px;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  font-size: 14px;
  font-family: var(--primary-font);
  color: #888;
  outline: none;
  background: #EFF0F6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23333'/%3E%3C/svg%3E") no-repeat right 10px center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 28px;
  cursor: pointer;
  	@media (max-width: 992px){
padding: 10px 12px;
	}
}
.priceGoBtn{
	display: none;
}
.dualRangeWrap{
	position: relative;
	height: 40px;
	padding-top: 8px;
}
.dualRangeTrack{
position: absolute;
  top: 18px;
  left: 0;
  right: 0;
  height: 6px;
  border-radius: 10px;
  background: #7D30E24D;
}
.dualRangeFill{
	position: absolute;
	height: 100%;
	background: var(--primary-color);
	border-radius: 10px;
}
.dualRangeInput{
	position: absolute;
	top: 8px;
	left: 0;
	width: 100%;
	height: 24px;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	pointer-events: none;
	margin: 0;
	outline: none;
	&::-webkit-slider-thumb{
		-webkit-appearance: none;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background: var(--primary-color);
		cursor: pointer;
		border: none;
		box-shadow: none;
		pointer-events: all;
		position: relative;
		z-index: 2;
	}
	&::-moz-range-thumb{
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background: var(--primary-color);
		cursor: pointer;
		border: none;
		box-shadow: none;
		pointer-events: all;
	}
}
.dualRangeWrap .rangeLabels{
	position: absolute;
	bottom: -16px;
	left: 0;
	right: 0;
}
.rangeLabels{
	display: flex;
	justify-content: space-between;
	margin-top: 8px;
	span{
	font-size: 13px;
    color: #373737;
		font-weight: 500;
	}
}
.filterSelect{
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #e5e5e5;
	border-radius: 10px;
	font-size: 14px;
	font-family: var(--primary-font);
	font-weight: 600;
	color:#555;
	outline: none;
	background: #f5f5f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23333'/%3E%3C/svg%3E") no-repeat right 14px center;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 36px;
	cursor: pointer;
}

/* Products 3-column grid */
.productsGrid3{
	grid-template-columns: repeat(3, 1fr);
	@media (max-width: 767px){
		grid-template-columns: repeat(2, 1fr);
	}
	@media (max-width: 480px){
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
}
.listingProducts{
	min-width: 0;
}

/* ===== Product Detail Page ===== */
.productDetailSection{
	padding: 30px 0 60px;
	background: #fff;
}
.pdPageTitle{
font-size: 32px;
  font-weight: 600;
  color: var(--secondary-color);
  margin-bottom: 20px;
  	@media (max-width: 767px){
font-size: 25px;
margin-bottom: 15px;
	}
}
.pdStockCard{
	background: #fff;
	border: 1px solid #B5B5B5;
	border-radius: 16px;
	padding: 30px;
	@media (max-width: 767px){
		padding: 18px;
	}
}
.pdStockHeading{
font-size: 25px;
  font-weight: 600;
  color: var(--secondary-color);
  text-align: center;
  margin-bottom: 20px;
  	@media (max-width: 767px){
font-size: 20px;
  margin-bottom: 15px;
	}
}
.pdTabCenter{
	display: flex;
	justify-content: center;
	margin-bottom: 28px;
}
.pdTabs{
	display: inline-flex;
	border: 1.5px solid #ddd;
	border-radius: 15px;
	overflow: hidden;
	padding: 8px;
		@media (max-width: 767px){
padding: 5px;
		}
}
.pdTab{
	padding: 9px 24px;
	border: none;
	border-radius: 8px;
	background: transparent;
	font-size: 13px;
	font-weight: 600;
	color: #777;
	font-family: var(--primary-font);
	cursor: pointer;
	transition: 0.2s;
	@media (max-width: 767px){
padding: 7px 13px;
	}
	&.active{
		background: var(--primary-color);
		color: #fff;
	}
	&:hover:not(.active){
		background: #f5f5f5;
	}
}
.pdTable{
	width: 100%;
	border-collapse: collapse;
	thead th{
		font-size: 14px;
		font-weight: 600;
		color: #999999;
		letter-spacing: 1px;
		text-transform: uppercase;
		padding: 10px;
		background: #F8FAFC;
		white-space: nowrap;
		@media (max-width: 767px){
			font-size:12px;
    	padding: 10px 3px;
		}
	}
	tbody td{
		font-size: 14px;
		color: #333;
		padding: 13px 0;
		vertical-align: middle;
		white-space: nowrap;
		@media (max-width: 767px){
			font-size: 10px;
    	padding: 10px 3px;
		}
		img{
			width: 22px;
			height: 15px;
			object-fit: cover;
			border-radius: 2px;
			margin-right: 8px;
			vertical-align: middle;

			@media (max-width: 767px){
			width: 12px;
      height: 10px;
	  	margin-right:1px;
			}
		}
	}
	.text-end{
		text-align: right;
	}
}
.pdColorRow td{
	border-bottom: 1px solid #000000!important;
	padding-bottom: 14px!important;

}
.pdColorLabel{
	font-size: 15px;
	font-weight: 700;
	color: var(--primary-color)!important;
	padding-top: 18px!important;
}
.pdQty{
	color: #AA0606!important;
	font-weight: 700;
}

/* ===== RFQ Page ===== */
.rfqSection{
	padding: 90px 0 60px;
	background: #F7F6F8;
	@media (max-width: 767px){
		padding: 75px 0 30px;
	}
}
.rfqHeader{
	margin-bottom: 30px;
	h1{
		font-size: 32px;
	  font-weight: 600;
	  color: var(--secondary-color);
	  margin-bottom: 15px;
		@media (max-width: 767px){
			font-size: 20px;
		}
	}
	p{
		font-size: 15px;
		color: #686868;
		margin: 0;
		@media (max-width: 767px){
			font-size: 13px;
		}
	}
}
.rfqLayout{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	align-items: start;
	@media (max-width: 991px){
		grid-template-columns: 1fr;
		
	}
}
.rfqFormWrap{
	background: #fff;
	border: 1px solid #eee;
	border-radius: 16px;
	padding: 24px;
	height: 100%;
	@media (max-width: 767px){
		padding: 18px;
	}
}
.rfqCartWrap{
	background: #fff;
	border: 1px solid #eee;
	border-radius: 16px;
	padding: 24px;
	@media (max-width: 767px){
		padding: 18px;
	}
}
.rfqCardTitle{
	font-size: 20px;
	font-weight: 600;
	color: var(--primary-color);
	margin: 0 0 4px;
}
.rfqCardSubtitle{
	font-size: 13px;
	color: #888;
	margin: 0 0 20px;
}
.rfqCartHeader{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 18px;
	.rfqCardTitle{
color: var(--primary-color);
		margin: 0;
	}
}
.rfqCartCount{
	background: #f0ecfb;
	color: var(--primary-color);
	font-size: 12px;
	font-weight: 600;
	padding: 5px 12px;
	border-radius: 20px;
}
.rfqCartItems{
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 16px;
}
.rfqCartItem{
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid #f5f5f5;
	&:last-child{ border-bottom: none; }
}
.rfqCartImg{
	width: 90px;
	height: 90px;
	background: #f5f5f7;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 5px;
	@media (max-width: 767px){
	width: 65px;
	height: 65px;
	}
	img{
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
}
.rfqCartInfo{
	flex: 1;
	min-width: 0;
	h4{
		font-size: 17px;
		font-weight: 700;
		color: #000;
		margin: 0 0 4px;
	}
	.rfqCartSku{
		font-size: 11px;
		color: #999;
		margin: 0 0 4px;
	}
	.rfqCartMeta{
		font-size: 11px;
		color: #555;
		margin: 0;
	}
}
.rfqCartActions{
	display: flex;
	gap: 8px;
	flex-shrink: 0;
	@media (max-width: 570px){
		flex-direction: column;

	}
	button{
		width: 32px;
		height: 32px;
		border: 1px solid #eee;
		border-radius: 8px;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: 0.2s;
		i{ font-size: 13px; }
	}
	.rfqCartBtnEdit{
		color: var(--primary-color);
		&:hover{ background: #f0ecfb; }
	}
	.rfqCartBtnDel{
		color: #e53e3e;
		&:hover{ background: #fff1f0; }
	}
}
.rfqAddAnotherBtn{
	width: 100%;
	padding: 14px;
	border: 1.5px solid var(--primary-color);
	border-radius: 12px;
	background: #f0ecfb;
	color: var(--primary-color);
	font-size: 14px;
	font-weight: 600;
	font-family: var(--primary-font);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-bottom: 18px;
	transition: 0.3s;
	&:hover{
		background: #e3dafa;
	}
}
.rfqCartSummary{
	border-top: 1px solid #eee;
	padding: 14px 0 4px;
	margin-bottom: 14px;
}
.rfqSummaryRow{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 6px;
	span{
		font-size: 13px;
		color: #666;
	}
	strong{
		font-size: 13px;
		font-weight: 700;
		color: #111;
	}
}
.rfqActionRow{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-top: 10px;
}
.rfqResetBtn{
	padding: 12px;
	border: 1px solid #ddd;
	border-radius: 10px;
	background: #f5f5f7;
	color: #666;
	font-size: 13px;
	font-weight: 600;
	font-family: var(--primary-font);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: 0.3s;
	&:hover{ background: #eee; }
}
.rfqAddListBtn{
	padding: 12px;
	border: 1.5px solid var(--primary-color);
	border-radius: 10px;
	background: #fff;
	color: var(--primary-color);
	font-size: 13px;
	font-weight: 600;
	font-family: var(--primary-font);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: 0.3s;
	&:hover{
		background: var(--primary-color);
		color: #fff;
	}
}
.rfqGroupTitle{
font-size: 20px;
  font-weight: 600;
  color: var(--secondary-color);

  margin: 28px 0 30px;

  text-transform: uppercase;
    @media (max-width: 767px){
 margin: 20px 0 20px;
 font-size: 17px;
	}
	&:first-child{
		margin-top: 0;
	}
}
.rfqFormRow{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 16px;
	@media (max-width: 575px){
		grid-template-columns: 1fr;
	}
}
.rfqField{
	margin-bottom: 16px;
	.rfqFormRow &{
		margin-bottom: 0;
	}
	label{
		display: block;
		font-size: 15px;
		font-weight: 500;
		color: var(--secondary-color);
		margin-bottom: 8px;
	}
	input, select, textarea{
		width: 100%;
		padding: 14px 16px;
	background: #F8FAFC;

		border: 1px solid #e0e0e0;
		border-radius: 10px;
		font-size: 14px;
		font-family: var(--primary-font);
		color: #686677;
		outline: none;
		
		transition: 0.3s;
		resize: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		&::placeholder{
			color: #bbb;
		}
		&:focus{
			border-color: var(--primary-color);
		}
	}
	select{
		background: #F8FAFC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center;
		padding-right: 40px;
	}
	input[type="date"]{
		color: #bbb;
	}
}
.rfqPriceInput{
	display: flex;
	align-items: center;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	overflow: hidden;
	input{
		border: none!important;
	}
	.rfqPricePrefix{
		padding: 14px 14px;
		font-size: 14px;
		font-weight: 600;
		color: #333;
		background: #f8f8f8;
		border-right: 1px solid #e0e0e0;
		flex-shrink: 0;
	}
	select{
		border: none;
		border-radius: 0;
		padding: 14px 16px;
	}
}
.rfqSubmitBtn{
	width: 100%;
	padding: 14px;
	border: 1px var(--primary-color) solid;
	border-radius: 10px;
	background: var(--primary-color);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	font-family: var(--primary-font);
	cursor: pointer;
	transition: 0.3s;
	margin-top: 12px;
	&:hover{
		opacity: 0.9;
	}
}

/* Tips Card */
.rfqTips{
	position: sticky;
	top: 90px;
	@media (max-width: 991px){
		position: static;
	}
}
.rfqTipsCard{
	background: #EEF2FF;
  border-radius: 24px;
  padding: 24px;
	h4{
		font-size: 17px;
    font-weight: 600;
    color: #3D1F97;
    margin: 0 0 24px;
    display: flex;
    align-items: center;
    gap: 8px;
		i{
			color: var(--primary-color);
			font-size: 18px;
		}
	}
	ul{
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: 12px;
		li{
			font-size: 13px;
			color: #444;
			line-height: 1.5;
			display: flex;
			align-items: flex-start;
			gap: 8px;
			i{
				color: var(--primary-color);
				font-size: 14px;
				margin-top: 2px;
				flex-shrink: 0;
			}
		}
	}
}

/* ===== RFQ Success Modal ===== */
.rfqSuccessContent{
	border: none;
	border-radius: 20px;
	padding: 40px 40px 32px;
	text-align: center;
	position: relative;
	max-width: 540px;
	margin: 0 auto;
	@media (max-width: 575px){
		padding: 30px 24px 24px;
	}
}
.rfqSuccessClose{
	position: absolute;
	top: 18px;
	right: 20px;
	background: none;
	border: none;
	font-size: 18px;
	color: #999;
	cursor: pointer;
	&:hover{ color: #333; }
}
.rfqSuccessIcon{
	display: flex;
	justify-content: center;
	margin-bottom: 44px;
}
.rfqSuccessCircle{
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: var(--primary-color);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 12px #673DE657;
	i{
		font-size: 32px;
		color: #fff;
	}
}
.rfqSuccessContent h2{
font-size: 24px;
  font-weight: 600;
  color: var(--secondary-color);
  margin-bottom: 20px;
	@media (max-width: 575px){
		font-size: 18px;
	}
}
.rfqSuccessContent p{
	font-size: 16px;
  color: #686868;
  line-height: 1.9;
  margin-bottom: 28px;
  font-weight: 400;
	strong{
		color: var(--secondary-color);
		font-weight: 600;
	}
}
.rfqSuccessBtn{
	display: block;
  width: 100%;
  padding: 9px;
  background: var(--primary-color);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  border-radius: 10px;
  text-decoration: none;
  text-align: center;
  transition: 0.3s;
  margin-bottom: 19px;
  border: 1px var(--primary-color) solid;
	&:hover{
		color: var(--primary-color);
		background: transparent;
	}
}
.rfqSuccessLink{
	display: inline-block;
	font-size: 13px;
	font-weight: 400;
	color: var(--primary-color)!important;
	text-decoration: underline;
	&:hover{
		text-decoration: none;
	}
}

/* ===== Product Quick View Modal ===== */
.productQuickDialog{
	max-width: 768px;
}
.productQuickContent{
	border: none; 
	border-radius: 24px;
	padding: 24px;
	background: #F5F5F5;
	margin: 23px;
	@media (max-width: 575px){
		padding: 22px 20px;
		margin: 12px;
		border-radius: 8px;
		padding: 14px;
	}
}
.pqTop{
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 16px;
	position: relative;
	@media (max-width: 575px){
		flex-wrap: wrap;
		display: block;
	}
}
.pqImgWrap{
	width: 110px;
	height: 110px;
	background: #00000012;
	border-radius: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 12px;
		@media (max-width: 575px){
margin-bottom: 20px;
		}
	img{
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
}
.pqInfo{
	flex: 1;
	h3{
font-size: 20px;
    font-weight: 600;
    color: #000;
    margin: 0 0 4px;
		@media (max-width: 575px){
			font-size: 15px;
		}
	}
	.pqVariant{
	font-size: 15px;
    color: #736F6F;
    margin: 0 0 2px;
    font-weight: 500;
	}
	.pqMeta{
	font-size: 15px;
    color: #736F6F;
    margin: 0 0 2px;
    font-weight: 500;
	}
	.pqAvail{
	font-size: 15px;
    color: #736F6F;
	 font-weight: 500;
    margin: 0 0 2px;
   
		span{
			color: #e53e3e;
			font-weight: 600;
		}
	}
}
.pqSelectors{
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 8px;
}
.pqSelectorRow{
	display: flex;
	align-items: center;
	gap: 10px;
	@media (max-width: 575px){
		flex-wrap: wrap;
	}
}
.pqSelectorLabel{
	font-size: 13px;
	font-weight: 600;
	color: #555;
	min-width: 58px;
	flex-shrink: 0;
}
.pqSelect{
	font-size: 13px;
	padding: 4px 10px;
	border: 1px solid #ddd;
	border-radius: 6px;
	background: #fafafa;
	color: #333;
	cursor: pointer;
	outline: none;
	transition: border-color 0.2s;
	&:focus{
		border-color: #e4262c;
	}
}
.pqMinQty{
	font-size: 15px;
    color: #736F6F;
	 font-weight: 500;
	white-space: nowrap;
	position: absolute;
	right: 0;
	bottom: 0;
		@media (max-width: 575px){
position: static;
		}
}
.pqQtyRow{
display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  margin-bottom: 10px;
}
.pqQtyLabel{
	font-size: 17px;
	font-weight: 600;
	color: #000;
}
.pqQtyControl{
display: flex;
  align-items: center;
  gap: 8px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  padding: 11px 14px;
  background: #fff;
}
.pqQtyBtn{
	width: 24px;
	height: 24px;
	border: none;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: 0.2s;
	i{
		font-size: 12px;
		color: #fff;
	}
	&:first-child{
		background: #bbb;
		&:hover{ background: #999; }
	}
	&:last-child{
		background: #333;
		&:hover{ background: #111; }
	}
}
.pqQtyControl input{
	width: 40px;
	text-align: center;
	border: none;
	outline: none;
	font-size: 16px;
	font-weight: 600;
	color: var(--secondary-color);
	font-family: var(--primary-font);
	background: transparent;
	-moz-appearance: textfield;
	&::-webkit-inner-spin-button,
	&::-webkit-outer-spin-button{
		-webkit-appearance: none;
		margin: 0;
	}
}
.pqPriceRow{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 6px;
	span{
	font-size: 17px;
    font-weight: 600;
    color: #000;
	}
	strong{
		font-size: 17px;
    font-weight: 600;
		color: #555;
	}
}
.pqTotalRow{
	margin-bottom: 20px;
	strong{
		font-size: 18px;
		font-weight:600;
		color: var(--primary-color);
	}
}
.pqBuyBtn{
width: 100%;
  padding: 14px;
  border: 1px solid var(--primary-color);
  border-radius: 10px;
  background: var(--primary-color);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: 0.3s;
	&:hover{
background: transparent;
  color: var(--primary-color);
	}
}

/* ===== Contact Page ===== */
.contactSection{
	padding: 90px 0 40px;
	background: #F7F6F8;
	@media (max-width: 767px){
		padding: 80px 0 0;
	}
}
.contactSubtitle{
text-align: center;
  font-size: 16px;
  color: #686868;
  margin-bottom: 50px;
	@media (max-width: 992px){
		font-size: 14px;
		margin-bottom: 20px;
	}
}
.contactGrid{
display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 24px;
  background: #f5f5f7;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 20px;
	@media (max-width: 991px){
		grid-template-columns: 1fr;
	}
}
.contactImgWrap{
display: flex;
  align-items: stretch;
  border-radius: 42px;
  overflow: hidden;
  @media (max-width: 991px){
  border-radius: 20px;
  }
	img{
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		@media (max-width: 991px){
			height: 260px;
		}
	}
}
.contactFormWrap{
	padding: 32px;
	background: #fff;
	border-radius: 36px;

	@media (max-width: 1199px){
border-radius: 20px;
	}
	@media (max-width: 767px){
		padding: 24px 20px;
	}
	h3{
		font-size: 18px;
		font-weight: 600;
		color: var(--secondary-color);
		letter-spacing: 1px;
		margin-bottom: 24px;
		@media (max-width: 767px){
			font-size: 16px;
			margin-bottom: 18px;
		}
	}
}
.contactFormRow{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 16px;
	@media (max-width: 575px){
		grid-template-columns: 1fr;
		gap: 16px;
	}
}
.contactField{
	margin-bottom: 16px;
	label{
	display: block;
    font-size: 13px;
    font-weight: 500;
    color: #9794AA;
    margin-bottom: 8px;
	}
	input, textarea{
		width: 100%;
		padding: 14px 16px;
		border: 1px solid #E4E7EB;
		border-radius: 10px;
		font-size: 14px;
		font-family: var(--primary-font);
		color: #333;
		outline: none;
	background: #F8FAFC;

		transition: 0.3s;
		resize: none;
		&::placeholder{
			color: #bbb;
		}
		&:focus{
			border-color: var(--primary-color);
		}
	}
	.contactFormRow &{
		margin-bottom: 0;
	}
}
.contactSubmitBtn{
	width: 100%;
	padding: 16px;
	border: none;
	border-radius: 10px;
	background: var(--primary-color);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	font-family: var(--primary-font);
	cursor: pointer;
	transition: 0.3s;
	margin-top: 8px;
	&:hover{
		opacity: 0.9;
	}
}
.contactInfoGrid{
display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: #EFEFEF;
  border-radius: 16px;
  overflow: hidden;
 
	@media (max-width: 767px){
		grid-template-columns: 1fr;
		margin-bottom: 30px;
	}
}
.contactInfoCard{
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 28px 30px;
	border-right: 1px solid #eee;
	@media (max-width: 992px){
padding: 22px 17px;
	}
	&:last-child{
		border-right: none;
	}
	@media (max-width: 767px){
		border-right: none;
		border-bottom: 1px solid #eee;
		padding: 20px 24px;
		&:last-child{
			border-bottom: none;
		}
	}
	.contactInfoIcon{
	width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #fff;
		i{
			font-size: 22px;
			color: var(--secondary-color);
		}
	}
	.contactInfoText{
		h4{
		font-size: 17px;
      font-weight: 600;
      color: var(--secondary-color);
      margin: 0 0 6px;
		}
		p{
			font-size: 15px;
			color: #4A4A4A;
			margin: 0;
			font-weight: 500;
		}
	}
}

/* ===== Order Detail Modal ===== */
.orderModalContent{
	border: none;
	border-radius: 16px;
	padding: 20px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.15);
	@media (max-width: 575px){
		padding: 20px 18px;
	}
}
.orderModalHeader{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}
.orderModalTitle{
	display: flex;
	align-items: center;
	gap: 12px;
	h3{
	font-size: 22px;
    font-weight: 500;
    color: var(--secondary-color);
    margin: 0;
		@media (max-width: 575px){
			font-size: 18px;
		}
	}
}
.orderModalClose{
	background: none;
	border: none;
	font-size: 18px;
	color: #999;
	cursor: pointer;
	padding: 4px;
	transition: 0.3s;
	&:hover{
		color: #333;
	}
}
.orderModalDate{
	font-size: 13px;
	color: #787777;
	margin: 0px 0 24px;
}
.orderModalProduct{
display: grid;
  align-items: flex-start;
  gap: 16px;
background: #F5F5F5;
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 0px;
	@media (max-width: 575px){
		padding: 14px;
		gap: 12px;
	}
	.viewOrderFlex{
		display: flex;
		gap:24px;
		@media (max-width: 570px){
flex-direction: column;
gap: 8px;
		}
	}
	.orderModalProductImg{
		width: 65px;
		height: 65px;
		background: #fff;
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		padding: 6px;
		img{
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
	}
	.orderModalProductInfo{
		flex: 1;
		h4{
	font-size: 16px;
      font-weight: 600;
      color: var(--secondary-color);
      margin: 0 0 6px;
			@media (max-width: 575px){
				font-size: 14px;
			}
		}
		p{
		font-size: 13px;
      color: #736F6F;
      margin: 0 0 2px;
			a{
				color: #736F6F;
				font-weight: 600;
			text-decoration: underline !important;
			
			}
		}
	}
	.orderModalQty{
		font-size: 13px;
		font-weight: 500;
		color: #777;
		white-space: nowrap;
		flex-shrink: 0;
		align-self: flex-end;

		@media (max-width: 570px){
			align-self: flex-start;
		}
	}
}
.orderModalTotal{
display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0 0px;
  margin-top: 0;
  border-top: 1px solid #ddd;
	span{
		font-size: 15px;
		font-weight: 700;
		color: #111;
	}
	strong{
	font-size: 15px;
    font-weight: 600;
    color: var(--primary-color);
	
	}
}
.orderModalActions{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	@media (max-width: 480px){
		grid-template-columns: 1fr;
	}
}
.orderModalBtnPrimary{
	display: block;
	text-align: center;
	padding: 13px;
	background: var(--primary-color);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	border-radius: 10px;
	text-decoration: none;
	transition: 0.3s;
	&:hover{
		opacity: 0.9;
	}
}
.orderModalBtnOutline{
	display: block;
	text-align: center;
	padding: 13px;
	background: transparent;
	color: var(--primary-color);
	font-size: 14px;
	font-weight: 500;
	border: 1.5px solid var(--primary-color);
	border-radius: 10px;
	text-decoration: none;
	transition: 0.3s;
	&:hover{
		background: var(--primary-color);
		color: #fff;
	}
}

/* ===== FAQ Section ===== */
.faqSection{
	padding: 60px 0 70px;
	background: #fff;
	@media (max-width: 767px){
		padding: 30px 0 40px;
	}
}
.faqSubtitle{
	text-align: center;
	font-size: 20px;
	color: var(--secondary-color);
	margin-bottom: 40px;
  font-weight: 500;
	@media (max-width: 767px){
		font-size: 13px;
		margin-bottom: 24px;
	}
}
.faqGrid{

	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}
.faqItem{
	background: #f5f5f7;
	border-radius: 12px;
	overflow: hidden;
	transition: 0.3s;
	.faqQuestion{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20px 24px;
		background: transparent;
		border: none;
		cursor: pointer;
		@media (max-width: 767px){
			padding: 16px 18px;
		}
		span{
			font-size: 20px;
			font-weight: 600;
			color: var(--secondary-color);
			text-align: left;
			@media (max-width: 767px){
				font-size: 14px;
			}
		}
		i{
			font-size: 18px;
			color: var(--secondary-color);
			transition: 0.3s;
			flex-shrink: 0;
			margin-left: 16px;
		}
	}
	.faqAnswer{
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows 0.4s ease;
		> p{
			overflow: hidden;
			padding: 0 24px;
			font-size: 17px;
			color: #7E7E7E;
			line-height: 1.7;
			margin: 0;
      font-weight: 600;
			transition: padding 0.4s ease;
			@media (max-width: 767px){
				padding: 0 18px;
				font-size: 13px;
			}
		}
	}
	.faqQuestion i{
		transition: transform 0.4s ease;
	}
	&.active{
		.faqQuestion i::before{
			content: "\f068";
		}
		.faqAnswer{
			grid-template-rows: 1fr;
			> p{
				padding-bottom: 20px;
				@media (max-width: 767px){
					padding-bottom: 16px;
				}
			}
		}
	}
}

.searchDivallFlex{
	display: flex;
	gap:28px;
	align-items: center;

  .searchFlexMain{
    display: flex;
    align-items: center;
    gap:8px;
  }
  .signUpFlex{
        display: flex;
    align-items: center;
    gap:8px;
  }

	.headerIconBtn{
width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid #ABABAB;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s;
		&:hover{
			border-color: var(--primary-color);
			color: var(--primary-color);
		}
		i{
			font-size: 13px;
			color: #555;
		}
	}
	.currencyBtn{
		width: auto;
		height: 40px;
		padding: 0 12px;
		border-radius: 8px;
		gap: 6px;
		span{
			font-size: 16px;
			font-weight: 500;
			color: var(--secondary-color);
		}
	}
	.headerBtnSignin{
background: var(--primary-color);
    color: #fff;
	border: 1.5px solid var(--primary-color);
    padding: 11px 20px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.3s;
    white-space: nowrap;
    text-decoration: none;
    width: 133px;
		&:hover{
			background: transparent;
      color: var(--primary-color);
		}
	}
	.headerBtnSupplier{
		background: transparent;
		color: var(--primary-color);
		border: 1.5px solid var(--primary-color);
    padding: 11px 20px;
		border-radius: 8px;
		font-size: 12px;
		font-weight: 500;
		cursor: pointer;
		transition: 0.3s;
		white-space: nowrap;
		text-decoration: none;
		&:hover{
			background: var(--primary-color);
			color: #fff;
		}
	}

	.flexMainCartIcon{
	display: flex;
    align-items: center;
    gap: 25px;
    justify-content: center;
	}
	.cartIconHedaerDiv{
	position: relative;
    display: flex;
    align-items: center;
		cursor: pointer;
	&:hover svg{
		fill: #d0473e;
	}
		svg{
		width: 15px;
		transition: 0.4s;
		}
		span{
		font-size: 10px;
    font-size: .625rem;
    line-height: 19px;
    height: 18px;
    min-width: 18px;
    text-align: center;
    padding: 0 3px;
    font-weight: 500;
    border-radius: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    overflow: hidden;
    position: absolute;
    z-index: 2;
top: -6px;
      background: #d0473e;
      color: #fff;
      left: 7px;
    }

		}
	}


		.whislistIconHedaerDiv{
	position: relative;
    display: flex;
    align-items: center;
	cursor: pointer;
	&:hover svg{
		fill: #d0473e;
	}
		svg{
	width: 20px;
	transition: 0.4s;
		}
		span{
		font-size: 10px;
    font-size: .625rem;
    line-height: 19px;
    height: 18px;
    min-width: 18px;
    text-align: center;
    padding: 0 3px;
    font-weight: 500;
    border-radius: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    overflow: hidden;
    position: absolute;
    z-index: 2;
  top: -7px;
      background: #d0473e;
      color: #fff;
      left: 11px;

		}
	}


	.profileIconmain{
		background: transparent;
		border: none;
		cursor: pointer;
		
		svg{
transition: 0.4s;
		}
		&:hover svg{
color: #d0473e;
		}
	}
	.searchmainall{
.searchBorderAll{
border: 1px #ddd solid;
      border-radius: 30px;
      padding: 0px 0px 0px 14px;
	  @media (max-width: 1199px) {
border: none;
padding: 0px;
	  }
	  input{
		border: none;
		padding: 8px 4px;
		outline: none;
		color: #333;
		font-size: 14px;
	border-radius: 19px;
	  }
	  button{
		background: transparent;
		border: none;
		svg{
	width: 16px;
          color: #dddd;
          height: auto;
		}
	  }
	}
	}
	
	.searchMainalldivPopup{
		  .btn-close:focus{
	box-shadow:none!important;
  }
		.btn-close{
			font-size: 0;
  width: 100px;
  height: 46px;
  opacity: 1;
  img{
	width: 30px;
  }

		}
		.modal-content{
			background: #0000009e;
		}
		.modal-header{
			border-bottom: none;
		}
		.modal-body{
			display: flex;
			align-items: center;
			justify-content: center;
			.flexDivallHeader{
				display: flex;
				flex-direction: column;
 margin-top: -158px;
 h4{
	text-align: center;
  color: #fff;
  font-size: 30px;
  margin-bottom: 28px;
 }
			}
.searchBorderAll{
border: 1px #ddd solid;
      border-radius: 50px;
      padding: 0;
      width: 100%;
      max-width: 557px;
      display: flex;
      align-items: center;
      gap: 11px;
	 
	  input{
border: none;
    
        outline: none;
        color: #fff;
        font-size: 25px;
        border-radius: 78px;
        padding: 15px 36px;
        width: 100%;
        background: transparent;
	  }
	  button{
		background: transparent;
		border: none;
		svg{
width: 85px;
          fill: #fff;
          height: 41px;
		}
	  }
	}
		}
	}
	
	
.marquee {
width: 100%;
  overflow: hidden;
  background-color: #FAE9E1;
  color: #000;
  padding: 20px 0;
  white-space: nowrap;
bottom:0;
  z-index: 100;
  width: 100%;

  position: absolute;
  	  @media (max-width: 1199px) {
bottom:0
      }
}

.marquee-content {
  display: inline-flex;
  gap: 60px;
  animation: scrollMarquee 18s linear infinite;
}

/* Pause animation on hover */
.marquee:hover .marquee-content {
  animation-play-state: paused;
}

.marquee span {
  font-size: 15px;
  font-weight: 500;
  position: relative;
  &::before{
position: absolute;
    left: -31px;
    top: 7px;
    width: 10px;
    height: 10px;
    background: #000;
    content: "";
    border-radius: 50%;
}
}

/* Animation */
@keyframes scrollMarquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


.commonHeaderMaxWidth{
	max-width: 700px;
	margin: 0 auto 30px;
	text-align: center;
	@media (max-width: 1199px) {
margin: 0 auto 20px;
	}
	h2{
font-weight: 600;
    color: var(--primary-color);
    font-size: 36px;
	text-transform: capitalize;
	@media (max-width: 1199px) {
    font-size: 30px;
	}

	}
	p{
		color: #5d5c5dcc;
		font-size: 16px;
		font-weight: 500;

			margin-top: 15px;
	margin-bottom: 0px;
	@media (max-width: 1199px) {
font-size: 14px;
margin-top: 10px;
	}
	}
}
.commonBtnCentre{
	background: var(--primary-color);
  color: #fff;
  border-radius: 30px;
  padding: 11px 10px;
  border: 1px var(--primary-color) solid;
  text-transform: capitalize;
  font-size: 15px;
  font-weight: 600;
  max-width: 188px;
  transition: 0.4s;
  margin: 50px auto 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  @media (max-width: 1199px) {
margin: 14px auto 0px;
  }
  &:hover{
	background: transparent;
	color: var(--primary-color);
  }
}


.categoryBgsec{
	padding: 60px 0px;
	@media (max-width: 1199px) {
padding: 30px 0px 50px;
	}
	.catogaryMainDivAll{
		&:hover .catogaryImgWrapper img{
			transform: scale(1.1);
		}
			&:hover .txtHeader h2{
				color: #d0473e;
			}
		.catogaryImgWrapper{
		border-radius: 14px;
      overflow: hidden;
			img{
				width: 100%;
				transition: 0.4s;
			}
		}

		.txtHeader{
			margin-top: 12px;
			h2{
			color: var(--primary-color);	
			font-size: 1rem;
			
			transition: 0.4s;
			font-weight: 600;
			}
			p{
				color: #5d5c5dcc;
    font-size: 14px;
	font-weight: 400;
	margin-bottom: 0px;

			}
		}
	}
}

.popularPicksBgsec{

	padding-bottom: 80px;
.popularPicksTabDesign{
	.nav-tabs{
		display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  padding-bottom: 30px;
  .nav-link{
	border-bottom: 1px #EBEBEB solid;
	color: var(--primary-color);
	font-size: 15px;
	padding: 0 21px 8px;
	position: relative;
		border-top: none!important;
	border-left: none!important;
	border-right: none!important;

	&:hover::before{
			width: 100%;
	}
	&::before{
		position: absolute;
		left: 0;
		bottom:0;
		width: 0;
		height: 2px;
		transition: 0.4s;
		content: "";
		background: var(--primary-color);
	}
  }
  .nav-link.active{
	border-bottom: 1px #EBEBEB solid;
	border-top: none;
	border-left: none;
	border-right: none;
	position: relative;
		&::before{
		position: absolute;
		left: 0;
		bottom:0;
		width: 100%;
		height: 2px;
		transition: 0.4s;
		content: "";
		background: var(--primary-color);
	}
  }
	}
		.catogaryMainDivAll{
		&:hover .catogaryImgWrapper img{
			transform: scale(1.1);
		}
			&:hover .txtHeader a{
				color: #d0473e;
			}
		.catogaryImgWrapper{
		border-radius: 14px;
      overflow: hidden;
	  display: block;
	  position: relative;
			img{
				width: 100%;
				transition: 0.4s;
			}
			.positionDivall{
			position: absolute;
        top: 12px;
        left: 7px;
        z-index: 100;
        display: flex;
        flex-direction: column;
        gap: 5px;
			.saleCard{
				background: #d0473e;
				padding: 0 15px;
    height: 29px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: start;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    color: #fff;
    border-radius: 30px;
    margin: 0;
    text-transform: capitalize;
			}
			.limitedStockcard{
				background: #14854e;
				padding: 0 8px;
    height: 29px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: start;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    color: #fff;
    border-radius: 30px;
    margin: 0;
    text-transform: capitalize;
  }
			}

			}
		}

		.txtHeader{
			margin-top: 12px;
			a{
			color: var(--primary-color);	
			font-size: 1rem;
			
			transition: 0.4s;
			font-weight: 600;
			}
			p{
				color: #5d5c5dcc;
    font-size: 14px;
	font-weight: 400;
	margin-bottom: 0px;

			}
		}
		.priceDivflexMain{
		display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: 13px;
			.addcardBtn{
	background: var(--primary-color);
        color: #fff;
        border-radius: 81px;
        padding: 11px 10px;
        border: 1px var(--primary-color) solid;
        text-transform: capitalize;
        font-size: 15px;
        font-weight: 600;
        max-width: 100%;
        transition: 0.4s;
	  &:hover{
		background: transparent;
		color: var(--primary-color);
	  }
			}
			.priceRateDiv{
				display: flex;
				gap:3px;
				align-items: center;
				padding-top: 10px;
				.newPrice{
 color: var(--primary-color);
  font-size: 16px;
  font-weight: 600;
				}
				.oldPrice{
		 color: #8e8e93;
  font-size: 16px;
  font-weight: 400;
  text-decoration: line-through;
				}
			}
		}
	}
}


.topCollectionBgsec{
	padding: 60px 0px 100px;
	@media (max-width: 1199px) {
	padding: 40px 0px 100px;
	}
		@media (max-width: 767px) {
	padding: 40px 0px 30px;
	}
		.catogaryMainDivAll{
		&:hover .catogaryImgWrapper img{
			transform: scale(1.1);
		}
			&:hover .txtHeader a{
				color: #d0473e;
			}
		.catogaryImgWrapper{
		border-radius: 14px;
      overflow: hidden;
	  display: block;
	  position: relative;
			img{
				width: 100%;
				transition: 0.4s;
			}
			.positionDivall{
			position: absolute;
     top: 12px;
        left: 7px;
        z-index: 100;
        display: flex;
        flex-direction: column;
        gap: 5px;
			.saleCard{
				background: #d0473e;
					padding: 0 15px;
    height: 29px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: start;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    color: #fff;
    border-radius: 30px;
    margin: 0;
    text-transform: capitalize;
			}
			.limitedStockcard{
				background: #14854e;
				padding: 0 8px;
    height: 29px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: start;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    color: #fff;
    border-radius: 30px;
    margin: 0;
    text-transform: capitalize;
  }
			}

			}
		}

		.txtHeader{
			margin-top: 12px;
			a{
			color: var(--primary-color);	
			font-size: 1rem;
			
			transition: 0.4s;
			font-weight: 600;
			}
			p{
				color: #5d5c5dcc;
    font-size: 14px;
	font-weight: 400;
	margin-bottom: 0px;

			}
		}
		.priceDivflexMain{
		display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: 13px;
			.addcardBtn{
			background: var(--primary-color);
      color: #fff;
     border-radius: 59px;
      padding: 11px 10px;
      border: 1px var(--primary-color) solid;
      text-transform: capitalize;
      font-size: 15px;
      font-weight: 600;
      max-width: 100%;
	  transition: 0.4s;
	  &:hover{
		background: transparent;
		color: var(--primary-color);
	  }
			}
			.priceRateDiv{
				display: flex;
				gap:3px;
				align-items: center;
				padding-top: 10px;
				.newPrice{
 color: var(--primary-color);
  font-size: 16px;
  font-weight: 600;
				}
				.oldPrice{
		 color: #8e8e93;
  font-size: 16px;
  font-weight: 400;
  text-decoration: line-through;
				}
			}
		}
}

.customerBgsec{
	padding-bottom: 60px;
@media (max-width: 1199px) {
padding-bottom: 40px;
}
	 .appStoriesCommonDiv{
	border: 1px solid var(--primary-color);
	border-radius: 32px;
	padding: 20px;

	
		ul{
		margin: 0;
		padding: 0;
		display: flex;
		gap:4px;
		margin-bottom: 10px;
	}
	p{
	font-size: 15px;
      font-weight: 400;
      color: var(--primary-color);

      line-height: 28px;
      text-align: left;
	  margin-top: 10px;
	   @media (max-width: 570px) {
 max-width: 100%;

	   }
	}

	.borderTopProfile{
border-top: 1px solid #0000005e;
	padding-top: 20px;
	margin-top: 20px;

		.profileFlex{
			display: flex;
			gap:10px;
			align-items: center;

			p{
				margin-bottom: 0px;
				font-size: 16px;
				font-weight: 400;
				color: var(--primary-color);
				margin-top: 0px;
			}
			.imgCricle{
				border-radius: 50%;
				overflow: hidden;
			}
		}
	}
  }
  .customerSaySlider {
	padding-right: 5px;
  }
}
.freeshippingBgsec{
	padding-bottom: 60px;
@media (max-width: 1199px) {
padding-bottom: 40px;
}
	.boxWrapper{
	display: flex;
    align-items: center;
    flex-direction: column;
    gap: 8px;
    text-align: center;
    border: 1px #ddd solid;
    padding: 17px;
    border-radius: 20px;
    height: 100%;
	@media (max-width: 992px) {
margin-bottom: 20px;
height: auto;
	}
		svg{
			margin-bottom: 5px;
		}
		h3{
			font-weight: 600;
    color: var(--primary-color);
    font-size: 20px;
		}
		p{
			font-size: 15px;
      font-weight: 400;
      color: var(--primary-color);
      line-height: 28px;
	  margin-bottom: 0px;
		}
	}
}


.quickLinkMobile{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  width: 100%;
  	@media only screen and (max-width: 1199px){
  grid-template-columns: repeat(2,1fr);
  gap:30px;
    }
}
	.footerBgSecmain {
		padding: 60px 0px 30px;
	background: var(--primary-color);

	@media only screen and (max-width: 767px){
		padding: 40px 0px 10px;
	}
	ul{
		a{
			font-weight: 300;
			font-size: 15px;
			color: #FFFFFF;
			text-transform: capitalize;
			transition: 0.4s;
			padding-bottom: 8px;
			display: block;
      	@media only screen and (max-width: 570px){
		font-size: 12px;
        }
			&:hover{
				color: var(--secondary-color);
			}
		}
	}
	h4 {
		color: #FFFFFF;
		font-weight: 700;
		font-size: 18px;
		margin-bottom: 15px;
		text-transform: capitalize;
		@media only screen and (max-width: 575px){
			font-size: 15px;
			margin-bottom: 10px;
		}
	}
	p{
		font-weight: 300;
		font-size: 14px!important;
		line-height: 26px;
		color: #FFFFFF!important;
		max-width: 383px;
		margin-bottom: 12px;
		@media only screen and (max-width: 575px){
			max-width: 100%;
			font-size: 13px!important;
			margin-bottom: 8px;
		}
	}
}
.footer-logo{
	img{
		width: 292px;
		 	@media only screen and (max-width: 1199px){	
width: 246px;
			}
	}
}
.footer-header {
	display: flex;
	justify-content: space-between;
	align-items:center;
	margin-bottom: 64px;
	@media only screen and (max-width: 1199px){	
flex-direction: column;
align-items: center;
justify-content: center;
	}
	@media only screen and (max-width: 767px){	
margin-bottom: 30px;
	}
}
.footer-news-letter {
max-width: 502px;
  width: 100%;
}
.footer-news-letter h3 {
font-weight: 500;
  color: #fff;
  margin-bottom: 28px;
  max-width: 350px;
  font-size: 32px;
  line-height: 36px;
  	@media only screen and (max-width: 1199px){	
max-width: 100%;
text-align: center;
  font-size: 25px;
  margin-bottom: 10px;
  margin-top: 20px;
	}
}
.news-letter {
	display: flex;
flex-direction: row;
align-items: flex-start;
}
.footer-news-letter input[type="email"] {
	background: rgba(255, 255, 255, 0.2);
	border-radius: 8px 0px 0px 8px;
	height: 51px;
	padding: 20px 16px;
	font-weight: 500;
	font-size: 16px;
	color: #FFFFFF!important;
	border: none;
	box-shadow: none;
	width: 100%;
	outline: none;
	::placeholder{
			color: #FFFFFF!important;
	}
}
.subscribe-btn {
	width: 118px;
	height: 51px;
	background: #fff;
	border-radius: 0px 8px 8px 0px;
	padding: 15px 24px;
	font-weight: 500;
	font-size: 16px;
	color: #000;
	text-transform: capitalize;
	border: none;
	box-shadow: none;
	transition: 0.4s;
	display: flex;
  align-items: center;
  justify-content: center;
	&:hover{
		background:var(--primary-color);
color: #fff;
	
	}
}


.footerGridItem{
  max-width: 196px;
    	@media only screen and (max-width: 570px){
max-width: 100%;
      }
}

.footerGrid{
	display: flex;
  justify-content: space-between;
	gap: 140px;
  	@media only screen and (max-width: 1199px){
flex-direction: column;
gap: 35px;
    }

}
.footerCopyrightGrid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
  justify-content: space-between;
    	@media only screen and (max-width: 570px){
	grid-template-columns: 1fr ;
  justify-content: center;
      }


}
.footerLogoMain{
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	margin-bottom: 20px;
	@media only screen and (max-width: 575px){
		justify-content: start;
	}
	span{
		font-size: 18px;
		font-weight: 700;
		color: #fff;
		letter-spacing: 1px;
	}
}
.footer-social-links{
	display: flex;
	gap: 8px;
	padding-top: 0px;
	margin-bottom: 16px;
	@media only screen and (max-width: 575px){
		justify-content: start;
	}
	a{
		width: 33px;
		height: 33px;
		background: #fff;
		border-radius: 50%;
		border: none;
		color: #FFFFFF;
		font-size: 15px!important;
		display: flex!important;
		align-items: center!important;
		justify-content: center!important;
		transition: 0.4s;
		padding-bottom: 0px!important;
		&:hover{
			background: #ffffffad;
			color: var(--primary-color)!important;
		}
	}
}

.email-address {
	display: block;
	margin-bottom: 0px;
	font-size: 15px;
  font-weight: 500;
	color: #fff !important;
	@media only screen and (max-width: 575px){
		font-size: 13px;
	}
}
.phone {
	display: block;
	margin-bottom: 4px;
	font-size: 15px;
  font-weight: 500;
	color: #fff !important;
	@media only screen and (max-width: 575px){
		font-size: 13px;
	}
}
.footer-copyright {
	margin-top: 30px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding: 14px 0px 0px;
	@media only screen and (max-width: 575px){
		margin-top: 20px;
		padding: 12px 0px 0px;
	}
}
.footer-copyright p {
	margin: 0;
	font-weight: 400!important;
	font-size: 12px!important;
	line-height: 28px;
	color: #FFFFFF!important;
	@media only screen and (max-width: 575px){
		font-size: 12px;
		text-align: center;
	}
}
.flexDesignFooter{
	display: flex;
	align-items: center;
	gap: 7px;
	justify-content: end;
	@media only screen and (max-width: 575px){
		justify-content: center;
	}

}


.margintopMain{
	margin-top: 15px;
}

#mainHeader{
	@media (max-width: 1199px) {
display: none;
	}
}
.mobileHeaderMain{
	display: none;
	@media (max-width: 1199px) {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		transition: all 0.4s ease;
		width: 100%;
		padding: 10px 15px;
		z-index: 100;
		background: #fff;

	}
  .mobilToogleFlexMain{
    display: flex;
    gap:5px;
    align-items: center;
  }
	.logoFooter{
		display: flex;
		align-items: center;
		gap: 6px;
		text-decoration: none;
		.logoText{
			font-size: 16px;
			font-weight: 700;
			color: #000;
			letter-spacing: 1px;
		}
	}
	.mobileHeaderRight{
		display: flex;
		align-items: center;
		gap: 8px;
    .searchFlexMain {
    display: flex;
    align-items: center;
    gap: 8px;
    .headerIconBtn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid #ABABAB;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s;
  }
  .currencyBtn{
    width: auto;
    height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    gap: 6px;
  }
  }
	
	}
}
.mobileMenulogo{
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	span{
		font-size: 16px;
		font-weight: 700;
		color: #fff;
		letter-spacing: 1px;
	}
}
.mobileMenuBtns{
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid rgba(255,255,255,0.15);
	.headerBtnSignin{
		background: var(--primary-color);
		color: #fff;
border: 1.5px solid var(--primary-color);
		padding: 11px 20px;
		border-radius: 6px;
		font-size: 12px;
		font-weight: 500;
		text-align: center;
		text-decoration: none;
		transition: 0.3s;
    &:hover{
      background: transparent;
      color: var(--primary-color);
    }
	}
	.headerBtnSupplier{
		background: transparent;
		color: var(--primary-color);
		border: 1.5px solid var(--primary-color);
		padding: 11px 20px;
		border-radius: 6px;
		font-size: 12px;
		font-weight: 500;
		text-align: center;
		text-decoration: none;
		transition: 0.3s;
      &:hover{
      
      background: var(--primary-color);
      color: #fff;
    }
	}
}

.mobileFooterMenu{
	display: none;

	@media (max-width: 1199px) {
	position: fixed;
	bottom: 0;
	width: 100%;
	background: #fff;
	padding: 17px 20px;
	z-index: 100;
	box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
	display: flex;
	justify-content: space-between;
	align-items: center;
	}
	ul{
		display: flex;
			align-items: center;
			text-align: center;
			gap:10px;
			justify-content: space-between;
			width: 100%;
		a{
			display: flex;
			align-items: center;
			text-align: center;
		gap: 4px;
			flex-direction: column;
			transition: 0.4s;
			&:hover p{
				color: #d0473e;
			
			}
				&:hover svg{
					color: #d0473e;
				}
				&:hover p .whislistIconHedaerDiv svg{
						color: #d0473e!important;
				}

					&:hover p .cartIconHedaerDiv svg{
						color: #d0473e!important;
				}


				
			svg{
				color: #000;
				transition: 0.4s;
			}
			p{
				margin-bottom: 0px;
				font-size: 13px;
				font-weight: 400;
				text-align: center;
				color: var(--primary-color);
					transition: 0.4s;
			}
		}
	}

	.cartIconHedaerDiv{
	position: relative;
    display: flex;
    align-items: center;
	justify-content: center;
		cursor: pointer;
	&:hover svg{
		fill: #d0473e;
	}
		svg{
		width: 15px;
		transition: 0.4s;
		}
		span{
		font-size: 10px;
    font-size: .625rem;
    line-height: 19px;
    height: 18px;
    min-width: 18px;
    text-align: center;
    padding: 0 3px;
    font-weight: 500;
    border-radius: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    overflow: hidden;
    position: absolute;
    z-index: 2;
top: -6px;
      background: #d0473e;
      color: #fff;
     left: 10px;
    }

		}
		
		.whislistIconHedaerDiv{
	position: relative;
    display: flex;
    align-items: center;
	justify-content: center;
	cursor: pointer;
	&:hover svg{
		fill: #d0473e;
	}
		svg{
	width: 20px;
	transition: 0.4s;
		}
		span{
		font-size: 10px;
    font-size: .625rem;
    line-height: 19px;
    height: 18px;
    min-width: 18px;
    text-align: center;
    padding: 0 3px;
    font-weight: 500;
    border-radius: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    overflow: hidden;
    position: absolute;
    z-index: 2;
  top: -7px;
      background: #d0473e;
      color: #fff;
     left: 14px;

		}
	}

}

.mobileBtn{
	cursor: pointer;
  font-size: 20px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
}

.headerMainFlexMobile{
	ul{
		li{
			a{
				font-weight: 400;
        font-size: 19px;
        color: var(--secondary-color);
        padding: 0px 0px 15px;
        display: block;
		&:hover{
			color: var(--primary-color);
		}
			}
		}
	}
}

.mobileMenulogo{
	width: 122px;
  display: block;
}


.subBannerBgSec{
	background: url(../images/subpage-banner.webp) no-repeat;
background-size: cover;
  height: 325px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-top: 67px;
  text-align: center;
  ul{
	margin: 0 0 10px;
	padding: 0;
	display: flex;
	gap:10px;
	align-items: center;
	justify-content: center;
	li{
		color: #fff;
		position: relative;
		padding-left: 20px;
		font-weight: 400;
		font-size: 15px;
		a{
			color: #fff;
				font-size: 15px;
				font-weight: 600;
			&:hover{
				color: #000;
			}
		}
		&:first-child::before{
			display: none;
		}
		&::before{
	position: absolute;
        left: 0;
        bottom: 7px;
        width: 8px;
        height: 8px;
        background: #fff;
        content: "";
        border-radius: 50%;
		}
	}
  }

  h1{
	color: #fff;
	font-size: 40px;
	font-weight: 600;
	margin-bottom: 15px;
  }
  p{
color: #fff;
    font-weight: 300;
    font-size: 15px;
    max-width: 500px;
    margin-bottom: 0;
  }
}

.shopListBgSec{
	padding: 60px 0px;
	  @media (max-width: 1199px) {
	padding: 40px 0px;

	  }
      @media (max-width: 767px) {
	padding: 20px 0px;

	  }
	  .filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 8px 16px;
  background: #000;
  color: #fff;

  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;

  transition: background 0.2s ease;
}

/* icon */
.filter-btn .icon {
  font-size: 14px;
}

/* hover */
.filter-btn:hover {
  background: #111;
}
	.filterHeadermainFlex{
		display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 15px;
    @media (max-width: 570px) {
flex-direction: column;
gap:15px;
	}
  h3{
	color: #8e8e93;
          font-size: 1rem;
          transition: 0.4s;
          font-weight: 400;
  }
  .sortMainAlltxt{
			display: flex;
  align-items: center;
  justify-content: space-between;
  gap:20px;
  h4{
		color: #8e8e93;
          font-size: 1rem;
          transition: 0.4s;
          font-weight: 400;
		    @media (max-width: 1199px) {
display: none;
			}
  }
  }
	}
		.dropDivBlog{
		width: 152px;
		    @media (max-width: 1199px) {
width: auto!important;
			}
		select{
			text-align: left;
			text-transform: capitalize;

				font-weight: 500;
				color: #000;
				font-size: 14px;
				padding: 11px 27px 10px 9px;
				    @media (max-width: 1199px) {
padding: 6px 34px 8px 13px;
					}
		}
		.form-select:focus{
			box-shadow: none;
			border-color: #ddd;
		}
	}

	.shopFilterSide {
    display: grid;
    grid-template-columns: 1fr 4fr;
    gap: 20px;
	    @media (max-width: 1199px) {
    grid-template-columns: 1fr;
		}
	.sideNavMainAll {
   
      border-radius: 10px;
max-height: 641px;
      overflow: auto;
      position: sticky;
      top: 85px;
      background: #fff;
	    @media (max-width: 1199px) {
display: none;
		}
	  .productLinkNav{
		margin: 0;
		padding: 0;
		li{
			a{
		color: #000;
            padding-bottom: 13px;
            display: block;
            font-size: 14px;
            font-weight: 300;
			&:hover{
				color: #d0473e;
			}
			}
		}
	  }
	  .range_container {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 5% auto;
}

.sliders_control {
  position: relative;
  min-height: 30px;
}

.form_control {
  position: relative;
  display: flex;
  justify-content: space-between;
  font-size: 24px;
  color: #635a5a;
  .form_control_container__time{
	font-size: 14px;
  }
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: all;
  width: 24px;
  height: 24px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #c6c6c6;
  cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
  -webkit-appearance: none;
  pointer-events: all;
  width: 15px;
  height: 15px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #c6c6c6;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb:hover {
  background: #f7f7f7;
}

input[type="range"]::-webkit-slider-thumb:active {
  box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
  -webkit-box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
}

input[type="number"] {
 color: #8a8383;
        width: 86px;
        height: 32px;
        font-size: 14px;
        border: none;
        border: 1px #ddd solid;
        padding: 5px 9px;
        border-radius: 5px;
		outline: none;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  opacity: 1;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  width: 100%;
  position: absolute;
  background-color: #c6c6c6;
  pointer-events: none;
}

#fromSlider {
  height: 0;
  z-index: 1;
}

	  .form-check {
        display: flex;
        gap: 10px;
        margin-bottom: 7px;
        padding-left: 0px;
	
		

      
		label{
			color: #566879;
        font-size: 14px;
        font-weight: 500;
		}
	  }
	  .form-check-input {
    margin-left: 0px;
    
      border-radius: 0px;
		@media (max-width: 1199px) {
width: 25px;
height: 25px;
		}
	  }
	  .form-check-input:checked{
background-color: #d0473e !important;
  border-color: #d0473e!important;
	  }
	  .form-check-input:focus{
		box-shadow: none;
	  }

	   h4 {
        font-size: 25px;
        color: #fff;
        font-weight: 600;
        margin-bottom: 0px;
        background: var(--primary-color);
        padding: 10px 20px;
      }
	  .scrollMainallHeight {
max-height: 589px;
        overflow: auto;
		.size-selector {
  display: flex;
  gap: 12px;
}

/* hide radio */
.size-option input {
  display: none;
}

/* button */
.size-option span {
  width: 42px;
  height: 42px;
  border-radius: 6px;
  border: 1px solid #e5e5e5;
  display: grid;
  place-items: center;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* hover */
.size-option span:hover {
  border-color: #000;
}

/* selected */
.size-option input:checked + span {
  border-color: #000;
  font-weight: 600;
}

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

/* hide radio */
.swatch input {
  display: none;
}

/* base swatch */
.swatch span {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: block;
  cursor: pointer;

  border: 1px solid #ddd;
  box-shadow: inset 0 0 0 3px #fff;
  transition: all 0.2s ease;
}

/* hover */
.swatch:hover span {
  border-color: #000;
}

/* selected */
.swatch input:checked + span {
  border-color: #000;
  box-shadow: inset 0 0 0 3px #fff,
              0 0 0 2px #000;
}

/* color definitions */
.swatch.beige span   { background: #f5e6d3; }
.swatch.gray span    { background: #e5e5e5; }
.swatch.rose span    { background: #b46b75; }
.swatch.olive span   { background: #b6b8a0; }
.swatch.ivory span   { background: #fbfbe6; }
.swatch.teal span    { background: #6fa6a0; }
.swatch.lavender span{ background: #c9c9cf; }
.swatch.mint span    { background: #8fe3b5; }
.swatch.blue span    { background: #4b87b8; }
.swatch.black span   { background: #000000; }
.swatch.sand span    { background: #d9d6c7; }
.swatch.navy span    { background: #486c8c; }

	.filterDivMainall{
		.accordion-body{
		padding: 0px 0px 10px 0px!important;
		}
		.accordion-item{
			border-radius: 0px;
			border: none;
			border-bottom: 1px #ddd solid;
			  &:last-child{
	border-bottom: none!important;
  }

				.accordion-button{
			background: transparent;
  border-radius: 0px;
  box-shadow: none;
  color: #000;
  font-weight: 700;
  padding: 20px 0px;

  
		}
		}
	
	}
  }
    }
	.shopMainWrapperFlex{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		gap:26px;
		  @media (max-width: 1199px) {
	grid-template-columns: 1fr 1fr;
	gap:12px;
		  }
		  		  @media (max-width: 570px) {
	grid-template-columns: 1fr 1fr;
	gap:10px;
		  }
			.catogaryMainDivAll{
		&:hover .catogaryImgWrapper img{
			transform: scale(1.1);
		}
			&:hover .txtHeader a{
				color: #d0473e;
			}
      	&:hover .txtHeader h4{
				color: #d0473e;
			}
		.catogaryImgWrapper{
		border-radius: 14px;
      overflow: hidden;
	  display: block;
	  position: relative;
			img{
				width: 100%;
				transition: 0.4s;
			}
			.positionDivall{
			position: absolute;
     top: 12px;
        left: 7px;
        z-index: 100;
        display: flex;
        flex-direction: column;
        gap: 5px;
			.saleCard{
				background: #d0473e;
				padding: 0 15px;
    height: 29px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: start;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    color: #fff;
    border-radius: 30px;
    margin: 0;
    text-transform: capitalize;
			}
			.limitedStockcard{
				background: #14854e;
				padding: 0 8px;
    height: 29px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: start;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    color: #fff;
    border-radius: 30px;
    margin: 0;
    text-transform: capitalize;
  }
			}

			}
		}

		.txtHeader{
			margin-top: 12px;
			a{
			color: var(--primary-color);	
			font-size: 1rem;
			
			transition: 0.4s;
			font-weight: 600;
			}

      	h4{
			color: var(--primary-color);	
			font-size: 1rem;
			
			transition: 0.4s;
			font-weight: 600;
			}
			p{
				color: #5d5c5dcc;
    font-size: 14px;
	font-weight: 400;
	margin-bottom: 0px;

			}
          	.addcardBtn{
	background: var(--primary-color);
        color: #fff;
        border-radius: 81px;
        padding: 11px 10px;
        border: 1px var(--primary-color) solid;
        text-transform: capitalize;
        font-size: 15px;
        font-weight: 600;
        max-width: 100%;
        transition: 0.4s;
        width: 100%;
        margin-top: 0px!important;
       
	  &:hover{
		background: transparent;
		color: var(--primary-color);
	  }
			}
		}



             	.addcardBtn{
	background: var(--primary-color);
        color: #fff;
        border-radius: 81px;
        padding: 11px 10px;
        border: 1px var(--primary-color) solid;
        text-transform: capitalize;
        font-size: 15px;
        font-weight: 600;
        max-width: 100%;
        transition: 0.4s;
        width: 100%;
       margin-top: 18px;
	  &:hover{
		background: transparent;
		color: var(--primary-color);
	  }
			}
		.priceDivflexMain{
		display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: 13px;
			.addcardBtn{
	background: var(--primary-color);
        color: #fff;
        border-radius: 81px;
        padding: 11px 10px;
        border: 1px var(--primary-color) solid;
        text-transform: capitalize;
        font-size: 15px;
        font-weight: 600;
        max-width: 100%;
        transition: 0.4s;
	  &:hover{
		background: transparent;
		color: var(--primary-color);
	  }
			}
			.priceRateDiv{
				display: flex;
				gap:3px;
				align-items: center;
				padding-top: 10px;
				.newPrice{
 color: var(--primary-color);
  font-size: 16px;
  font-weight: 600;
				}
				.oldPrice{
		 color: #8e8e93;
  font-size: 16px;
  font-weight: 400;
  text-decoration: line-through;
				}
			}
		}
	}
  }
}
.mobilsortFliterMain{
	display: flex;
  align-items: center;
  gap: 10px;
	.filter-btn{
		display: none;
		  @media (max-width: 1199px) {
display: flex;
		  }
	}
}

.fliterSideNav{
	.offcanvas{
		background: #fff!important;
	}

		.sideNavMainAll {
      border: none;
      border-radius: 10px;

      overflow: auto;

      background: #fff;
	 
	  .productLinkNav{
		margin: 0;
		padding: 0;
		li{
			a{
		color: #000;
            padding-bottom: 13px;
            display: block;
            font-size: 14px;
            font-weight: 300;
			&:hover{
				color: #d0473e;
			}
			}
		}
	  }
	  .range_container {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 5% auto;
}

.sliders_control {
  position: relative;
  min-height: 30px;
}

.form_control {
  position: relative;
  display: flex;
  justify-content: space-between;
  font-size: 24px;
  color: #635a5a;
  .form_control_container__time{
	font-size: 14px;
  }
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: all;
  width: 24px;
  height: 24px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #c6c6c6;
  cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
  -webkit-appearance: none;
  pointer-events: all;
  width: 15px;
  height: 15px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #c6c6c6;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb:hover {
  background: #f7f7f7;
}

input[type="range"]::-webkit-slider-thumb:active {
  box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
  -webkit-box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
}

input[type="number"] {
 color: #8a8383;
        width: 86px;
        height: 32px;
        font-size: 14px;
        border: none;
        border: 1px #ddd solid;
        padding: 5px 9px;
        border-radius: 5px;
		outline: none;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  opacity: 1;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  width: 100%;
  position: absolute;
  background-color: #c6c6c6;
  pointer-events: none;
}

#fromSlider {
  height: 0;
  z-index: 1;
}

	  .form-check {
        display: flex;
        gap: 10px;
        margin-bottom: 7px;
        padding-left: 0px;
	
		

      
		label{
			color: #566879;
        font-size: 14px;
        font-weight: 500;
		}
	  }
	  .form-check-input {
    margin-left: 0px;
    
      border-radius: 0px;
		@media (max-width: 1199px) {
width: 25px;
height: 25px;
		}
    		@media (max-width: 767px) {
width: 19px;
height: 19px;
align-items: center;
margin-top: 0px!important;
		}
	  }
	  .form-check-input:checked{
background-color: #d0473e !important;
  border-color: #d0473e!important;
	  }
	  .form-check-input:focus{
		box-shadow: none;
	  }

	   h4 {
        font-size: 25px;
        color: #fff;
        font-weight: 600;
        margin-bottom: 0px;
        background: var(--primary-color);
        padding: 10px 20px;
      }
	  .scrollMainallHeight {

		.size-selector {
  display: flex;
  gap: 12px;
}

/* hide radio */
.size-option input {
  display: none;
}

/* button */
.size-option span {
  width: 42px;
  height: 42px;
  border-radius: 6px;
  border: 1px solid #e5e5e5;
  display: grid;
  place-items: center;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* hover */
.size-option span:hover {
  border-color: #000;
}

/* selected */
.size-option input:checked + span {
  border-color: #000;
  font-weight: 600;
}

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

/* hide radio */
.swatch input {
  display: none;
}

/* base swatch */
.swatch span {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: block;
  cursor: pointer;

  border: 1px solid #ddd;
  box-shadow: inset 0 0 0 3px #fff;
  transition: all 0.2s ease;
}

/* hover */
.swatch:hover span {
  border-color: #000;
}

/* selected */
.swatch input:checked + span {
  border-color: #000;
  box-shadow: inset 0 0 0 3px #fff,
              0 0 0 2px #000;
}

/* color definitions */
.swatch.beige span   { background: #f5e6d3; }
.swatch.gray span    { background: #e5e5e5; }
.swatch.rose span    { background: #b46b75; }
.swatch.olive span   { background: #b6b8a0; }
.swatch.ivory span   { background: #fbfbe6; }
.swatch.teal span    { background: #6fa6a0; }
.swatch.lavender span{ background: #c9c9cf; }
.swatch.mint span    { background: #8fe3b5; }
.swatch.blue span    { background: #4b87b8; }
.swatch.black span   { background: #000000; }
.swatch.sand span    { background: #d9d6c7; }
.swatch.navy span    { background: #486c8c; }

	.filterDivMainall{
		.accordion-body{
			padding-top: 0px;
		}
		.accordion-item{
			border-radius: 0px;
			border: none;
			border-bottom: 1px #ddd solid;
			  &:last-child{
	border-bottom: none!important;
  }

				.accordion-button{
			background: transparent;
  border-radius: 0px;
  box-shadow: none;
  color: #000;
  font-weight: 700;
padding: 1em 0px;

  
		}
		}
	
	}
  }
    }
	.offcanvas-body{
		padding-top: 0px;
	}
	.accordion-body{
		padding: 1em 0px;
	}
	.btn-close{
background: var(--primary-color);
    width: 30px !important;
    height: 30px !important;
    display: flex;
    justify-content: center;
    align-items: center;
	}
}







.shopDeatilMainallBgSec{
	padding-top: 0px;
	padding-bottom: 0px;
	.gridDeatilShopMain{
		display: grid;
	grid-template-columns: 500px 1fr;
		gap:20px;
		  @media (max-width: 1199px) {
display: block;
gap:10px;
		  }

		.bannerSideNav{
			max-width: 676px;
			width: 100%;
				  @media (max-width: 1199px) {
max-width: 100%;
				  }
	.product__carousel {
  display: block;
 
    @media (max-width: 1199px) {
display: none;
   }
}
.product__carousel a {
  display: block;
  margin-bottom: 15px;
}

.product__carousel .gallery-top {
	border: 1px solid #ebebeb;
	border-radius: 3px;
	margin-bottom: 5px;
}
.product__carousel .gallery-top .swiper-slide {
	position: relative;
	overflow: hidden;

}
.product__carousel .gallery-top .swiper-slide a {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	
}
.product__carousel .gallery-top .swiper-slide a img {
	width: 100%;
	height: 100%;
	object-fit:cover;
}
.product__carousel .gallery-top .swiper-slide .easyzoom-flyout img {
	min-width: 100%;
	min-height: 100%;
}
.product__carousel .swiper-button-next.swiper-button-white,
.product__carousel .swiper-button-prev.swiper-button-white {
	color: #000;
}
.product__carousel .gallery-thumbs .swiper-slide {
	position: relative;
	transition: border .15s linear;
	border: 1px solid #ebebeb;
	border-radius: 3px;
	cursor: pointer;
	overflow: hidden;
  height: calc(100% - 2px);
}
.product__carousel .gallery-thumbs .swiper-slide.swiper-slide-thumb-active {
	border-color: #d3483f;
}
.product__carousel .gallery-thumbs .swiper-slide img {
	position: absolute;
	left: 50%;
	top: 63%;
	transform: translate(-50%,-50%);
	max-width: 100%;
}


}

.product-info {
max-width: 100%;
      position: sticky;
      top: 79px;
      overflow: auto;
  scrollbar-width: none;         
  -ms-overflow-style: none;
  width: 100%;
  max-height: 624px;
    @media (max-width: 1199px) {
position: static;
  max-height: 100%;
	}
.accordion-item {
            border-radius: 0px;
            border: none;
    border-bottom-width: medium;
    border-bottom-style: none;
    border-bottom-color: currentcolor;
            border-bottom: 1px #ddd solid;
			.accordion-button {
              background: transparent;
              border-radius: 0px;
              box-shadow: none;
              color: #000;
              font-weight: 500;
			  padding: 17px 0px;
            }
			.accordion-body {
        padding: 0px 0px 30px;
		p{
			font-size: 14px;
        line-height: 1.6;
        color: #4b5563;
		}
		h5{
		color: #000;
            font-weight: 700;
            font-size: 19px;
            margin-bottom: 11px;
		}
		ul{
			padding-bottom: 20px;
			li{
					font-size: 14px;
        line-height: 1.6;
        color: #4b5563;
		padding-bottom: 10px;
		position: relative;
		padding-left: 12px;
		&::before{
			position: absolute;
    left: 0;
    top: 10px;
    width: 5px;
    height: 5px;
    background: #000;
    content: "";
    border-radius: 50%;
		}
			}
		}
          }

		  .product-attributes {
max-width: 300px;
  .attribute-row {
display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 5px 0;
}

.label {
  font-size: 16px;
  font-weight: 600;
  color: #111;
  text-transform: lowercase;
}

.value {
  font-size: 16px;
  color: #4b5563;
}
}


          }

  .product-meta {
margin-top: 20px;
        font-size: 14px;
        color: #111;
        display: flex;
      gap:20px;
          @media (max-width: 767px) {

            flex-direction: column;
            gap:4px
          }
}

.meta-row {
  display: flex;
  gap: 8px;
  margin-bottom: 0px;
}

.label {
  color: #6b7280;
}

.value {
  font-weight: 500;
}

/* checkout box */
.checkout-box {
margin-top: 11px;
        padding: 11px;
        background: #f7f7f7;
        border-radius: 12px;
        text-align: center;
}

.checkout-title {
  font-weight: 600;
  margin-bottom: 10px;
}

.payment-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.payment-icons img {
  height: 26px;
  object-fit: contain;
}
  .brand {
  font-size: 14px;
  color: #6b7280;
}
.product-title {
  font-size: 26px;
  font-weight: 600;
  margin: 6px 0 1px;
   @media (max-width: 1199px) {
font-size: 23px;
  margin: 5px 0 5px;
   }
}
.rating{
	display: flex;
	gap:10px;
	.review {
  color: #6b7280;
  font-size: 15px;
  font-weight: 300;

}
}
.priceRateDiv{
  display: flex;
  align-items: center;
  gap:5px;
  .newPrice{
  font-size: 28px;
  font-weight: 600;
  margin: 5px 0;
   @media (max-width: 1199px) {
margin: 10px 0;
  font-size: 25px;
   }
  }
  .oldPrice{
    		 color: #8e8e93;
  font-size: 28px;
  font-weight: 400;
  text-decoration: line-through;
  margin-bottom: 0px;
     @media (max-width: 1199px) {
margin: 10px 0;
  font-size: 25px;
   }
  }
}

.description {
  font-size: 14px;
  line-height: 1.6;
  color: #4b5563;
}
.benefits {
margin: 13px 0 14px;
      padding: 10px 20px 10px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        display: grid;
        gap: 30px;
        grid-template-columns: 1fr 1fr 1fr;
         @media (max-width: 570px) {
  grid-template-columns: 1fr ;
    gap: 20px;
         }
  
 
  .benefit {
  display: flex;
  gap: 10px;
  font-size: 14px;

  padding-bottom: 0px;
  margin-bottom: 0px;
  flex-direction: column;
   @media (max-width: 570px) {
flex-direction: column;
text-align: center;
   }
  img{
    width: 25px;
	 @media (max-width: 570px) {
width: 28px;
margin: 0 auto 5px;

	 }
  }
  &:last-child{
	padding-bottom: 0px;
	margin-bottom: 0px;
	border-bottom: none;
  }
}
}
.purchase-box {
  display: flex;
  gap: 14px;
  margin-top: 24px;
    @media (max-width: 767px) {
flex-direction: column;
gap: 10px;
	}
}

/* quantity */
.qty-box {
  display: flex;
  align-items: center;

  border-radius: 30px;
  padding: 6px;
  max-width: 124px;
   @media (max-width: 570px) {
max-width: 100%;
height: 100%;
   }
}

.qty-btn {
width: 36px;
        height: 36px;
        border: 1px #ddd solid;
        background: transparent;
        font-size: 18px;
        cursor: pointer;
        border-radius: 50%;
}

#quantity {
  width: 40px;
  text-align: center;
  border: none;
  background: transparent;
  font-size: 16px;
}

/* add to cart */
.btn-cart {
width: 200px;
  height: 48px;
  border-radius: 30px;
  border: 1px var(--primary-color) solid;
  background: var(--primary-color);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  transition: 0.4s;
    @media (max-width: 570px) {
width: 100%;
height: 39px;
font-size: 12px;
    }
  &:hover{

  background: transparent;
  color: var(--primary-color);
  }
}

/* buy now */
.btn-buy {
  width: 200px;
  height: 48px;

  border-radius: 30px;
  border: none;
    border: 1px #d3483f solid;
  background: #d3483f;
  color: #fff;
  font-size: 15px;
  transition: 0.4s;
  cursor: pointer;
     @media (max-width: 570px) {
width: 100%;
height: 39px;
font-size: 12px;
    }
   &:hover{

  background: transparent;
  color: #d3483f;
  }
}


	.positionDivall{

        display: flex;
    
        gap: 5px;
		margin-bottom: 10px;
			.saleCard{
				background: #d0473e;
				padding: 0 15px;
    height: 29px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: start;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    color: #fff;
    border-radius: 30px;
    margin: 0;
    text-transform: capitalize;
			}
			.limitedStockcard{
				background: #14854e;
				padding: 0 8px;
    height: 29px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: start;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    color: #fff;
    border-radius: 30px;
    margin: 0;
    text-transform: capitalize;
  }
			}
.deatilSizeMain{
	  display: flex;
  gap: 12px;
  flex-direction: column;
  h3{
font-weight: 600;
          display: block;
          margin-bottom: 3px;
          font-size: 16px;
  }
  		.size-selector {
  display: flex;
  gap: 12px;
}

/* hide radio */
.size-option input {
  display: none;
}

/* button */
.size-option span {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid #e5e5e5;
  display: grid;
  place-items: center;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* hover */
.size-option span:hover {
  border-color: #000;
}

/* selected */
.size-option input:checked + span {
  border-color: #000;
  font-weight: 600;
}

}
.colors {
  display: flex;
  gap: 12px;
  flex-direction: column;
  margin-bottom: 0px;
  .label{
	font-weight: 600;
	display: block;
	margin-bottom: 3px;
  color: #000;
  }
}

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

/* hide radio */
.swatch input {
  display: none;
}

/* base swatch */
.swatch span {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: block;
  cursor: pointer;

  border: 1px solid #ddd;
  box-shadow: inset 0 0 0 3px #fff;
  transition: all 0.2s ease;
}

/* hover */
.swatch:hover span {
  border-color: #000;
}

/* selected */
.swatch input:checked + span {
  border-color: #000;
  box-shadow: inset 0 0 0 3px #fff,
              0 0 0 2px #000;
}

/* color definitions */
.swatch.beige span   { background: #f5e6d3; }
.swatch.gray span    { background: #e5e5e5; }
.swatch.rose span    { background: #b46b75; }
.swatch.olive span   { background: #b6b8a0; }
.swatch.ivory span   { background: #fbfbe6; }
.swatch.teal span    { background: #6fa6a0; }
.swatch.lavender span{ background: #c9c9cf; }
.swatch.mint span    { background: #8fe3b5; }
.swatch.blue span    { background: #4b87b8; }
.swatch.black span   { background: #000000; }
.swatch.sand span    { background: #d9d6c7; }
.swatch.navy span    { background: #486c8c; }
}
.product-info::-webkit-scrollbar {
  display: none;                 
}
	}

.commonSizeColorDivFlex{
  display: flex;
  align-items: center;
  gap:40px;
     @media (max-width: 570px) {
gap:20px
     }
}
	.reviews {
  padding: 60px 0;
  border-bottom: 1px solid #e5e7eb;
     @media (max-width: 992px) {
padding: 29px 0;
	 }
   h2 {
  text-align: center;
  margin-bottom: 40px;
  font-size: 28px;
     @media (max-width: 992px) {
  margin-bottom: 20px;
	 }
}

.reviews-wrapper {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  align-items: center;
  gap: 40px;
    @media (max-width: 992px) {
  grid-template-columns:1fr;
    gap: 20px;
	}
}

/* LEFT */
.review-summary {
  text-align: left;
  .stars {
  color: #f59e0b;
  font-size: 22px;
}
}



.score {
margin-top: 2px;
      font-size: 30px;
      font-weight: 700;
	  margin-bottom: 0px;
}

.based {
  color: #6b7280;
  margin-top: 2px;
  font-size: 17px;
}

/* MIDDLE */
.review-breakdown {
  border-left: 1px solid #e5e7eb;
  border-right: 1px solid #e5e7eb;
  padding: 0 30px;
}

.rating-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.rating-row .stars {
  color: #f59e0b;
  font-size: 14px;
  width: 80px;
}

.bar {
  flex: 1;
  height: 6px;
  background: #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
}

.fill {
  height: 100%;
  background: #f59e0b;
}

.count {
  width: 20px;
  text-align: right;
  font-size: 14px;
}

/* RIGHT */
.review-action {
  display: flex;
  justify-content: center;
}

.review-btn {
  padding: 14px 30px;
  border-radius: 30px;
  border: 1px solid #111;
  background: #fff;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
}

.review-btn:hover {
  background: #111;
  color: #fff;
}

}

.review-item {
padding: 10px 0 10px;
    border-bottom: 1px #ddd solid;

}

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

.stars {
  color: #f59e0b;
  font-size: 18px;
}

.date {
  font-size: 14px;
  color: #6b7280;
}

.review-user {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
}

.review-user img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.name {
  font-weight: 600;
  font-size: 16px;
}

.review-text {
  font-size: 15px;
  line-height: 1.6;
  color: #4b5563;
  max-width: 900px;
}




}







.bredCrumbSec{
padding-top: 77px;
  padding-bottom: 11px;
     @media (max-width: 1199px) {
padding-top: 80px;
  padding-bottom: 13px;
	}
	.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #9ca3af;
  margin-bottom: 0px;
 
}

.breadcrumb a {
  color: #9ca3af;
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumb a:hover {
  color: #111;
}

.breadcrumb .sep {
  color: #d1d5db;
  padding: 0 2px;
}

.breadcrumb .current {
  color: #111;
  font-weight: 500;
}

}

.productSliderMain{
	max-width: 500px;
	overflow: hidden;
  display: flex;
  img {
  width: 100%;
  display: block;
}

.productSliderThumb .thumb {
  cursor: pointer;
  opacity: 0.5;
}

.productSliderThumb .thumb.active {
  opacity: 1;
  border: 2px solid #000;
}
  
}
.productThumbSlider {
  margin-top: 10px;
}

.mobileGalleryMain{
	display: none;
	  @media (max-width: 1199px) {
display: block;
padding-bottom: 20px;
	  }
	.mobile-gallery {
  width: 100%;
}

/* main image */
.main-image {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
}

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

/* thumbnail slider */
.thumb-slider {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  overflow-x: auto;
  padding-bottom: 6px;

  /* hide scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.thumb-slider::-webkit-scrollbar {
  display: none;
}

/* thumbnails */
.thumb {

  object-fit: cover;
  border-radius: 10px;
  border: 2px solid transparent;
  cursor: pointer;
}

.thumb.active {
  border-color: #000;
}
}



.page-header {
  padding: 70px 20px 0px;
  text-align: center;
  background: #ffffff;
  h1 {
  font-size: 42px;
  font-weight: 700;
  margin: 10px 0 14px;
  color: #000;
  	  @media (max-width: 767px) {
          font-size: 25px;
          margin-bottom: 10px;
      }
}
p {
  font-size: 16px;
  color: #555;
  line-height: 1.6;
    @media (max-width: 767px) {
  font-size: 14px;
  margin-bottom: 0px;
    }
}
a {
  color: #000;
  text-decoration: none;
  font-weight: 500;
}
}



.breadcrumb {
  font-size: 14px;
  color: #888;
  margin-bottom: 12px;
   a {
  text-decoration: none;
  color: #777;
}
span {
  margin: 0 6px;
}
.current {
  color: #000;
  font-weight: 500;
}
}




.contact-section {
  padding: 80px 0px;
    @media (max-width: 992px) {
  padding: 20px 0px;
    }
  .contact-left,
.contact-right {
  flex: 1;
   @media (max-width: 992px) {
padding-top: 20px;
   }
}

h2 {
  font-size: 30px;
  margin-bottom: 4px;

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

.contact-left p,
.contact-right p {
  color: #555;
  line-height: 1.7;
  margin-bottom: 5px;
  max-width: 479px;
   @media (max-width: 767px) {
font-size: 14px;
   }
}

.info-block {
  margin-top: 25px;
}

.info-block h4 {
  margin-bottom: 8px;
  font-weight: 600;
}

/* FORM */
.contact-form {
  margin-top: 30px;
}

.form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
     @media (max-width: 767px) {
flex-direction: column;
gap:10px;
margin-bottom: 10px;
     }
}

.contact-form input,
.contact-form textarea {
width: 100%;
    padding: 13px 19px;
    border-radius: 40px;
    border: 1px solid #ddd;
    font-size: 14px;
    outline: none;
    transition: 0.3s;
}

.contact-form textarea {
  border-radius: 25px;

  resize: none;
  margin-bottom: 20px;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #000;
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
  font-size: 14px;
}

.checkbox input {
  width: 16px;
  height: 16px;
}

.checkbox a {
  color: #000;
  font-weight: 500;
  text-decoration: underline;
}

.btn {
width: 200px;
        height: 48px;
        border-radius: 30px;
        border: 1px var(--primary-color) solid;
        background: var(--primary-color);
        color: #fff;
        font-size: 15px;
        cursor: pointer;
        transition: 0.4s;
            @media (max-width: 570px) {
width: 100%;
            }
        &:hover{
          background: transparent;
          color: var(--primary-color);
        }
}

.mapMainmImg{
border: 1px #ddd solid;
    overflow: hidden;
    border-radius: 10px;
    padding: 10px;
    max-width: 400px;
    margin-top: 20px;
}
}



.faqBgSec{
  padding: 50px 0px 100px;
    @media (max-width: 1199px) {
      
 padding: 40px 0px 40px;

    }
  }
  .flexSideBar {

  display: flex;
  gap: 50px;
  align-items: flex-start; 
  position: relative;
}
  		.accordion-body{
		padding: 0px 0px 10px 0px!important;
    p{
      margin-bottom: 0px;
    }
		}
    .accordion{
      margin-bottom: 30px;
    }
		.accordion-item{
			border-radius: 0px;
			border: none;
			border-bottom: 1px #ddd solid!important;


				.accordion-button{
			background: transparent;
  border-radius: 0px;
  box-shadow: none;
  color: #000;
  font-weight: 700;
  padding: 15px 0px;
  margin-top: 0px;

  
		}
}
.subPageBrand{
  padding-bottom: 120px;
   @media (max-width: 767px) {
  padding-bottom: 40px;
   }
}

.subPageBrandDeatiled{
  padding-bottom: 120px;
   @media (max-width: 767px) {
  padding-bottom:40px;
   }
  .productsGrid{
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
	@media (max-width: 991px){
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
	@media (max-width: 480px){
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
}
.productInfo {
  h4{
    font-size: 16px!important;
    text-transform: capitalize;
    font-weight: 600;
  }
 .productMoq {
      font-size: 13px;
      color: var(--secondary-color);
      font-weight: 500;
      margin: 0 0 24px;
      text-transform: capitalize;
}
}
}


	.flexSideNavFlex{
		display: flex;
		gap:24px;
			@media (max-width: 1199px) {
display: block;
			}
		.flexDownLinKAll{
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			height: 100%;
			gap: 27px;
			@media (max-width: 1199px) {
height: 87%;
      gap: 0;
	  display: block;
			}
		}
		.sideNavMain{
			box-shadow: 0px 14px 42px 0px #080F340F;
background: #fff;
max-width: 330px;

width: 100%;
padding: 32px 20px;
display: flex;
flex-direction: column;
position: sticky;
      top: 0;

      overflow: auto;
	@media (max-width: 1199px) {
display: none;
		}
ul{
	display: flex;
	flex-direction: column;
	gap:11px;
	.activeMain{
	background: #EBDFF7;
		svg{
			path{
stroke:var(--primary-color);
			}
			
		}

		p{
color: var(--primary-color);
		}
	}
	.activeMain1{
		background: #EBDFF7;
		svg{
			path{

				stroke: var(--primary-color);
		
			}
			
		
		}

		p{
color: var(--primary-color);
		}
	}

li{
	a{
		display: flex;
            gap: 12px;
            align-items: center;
            padding: 15px 24px;
			border-radius: 8px;
			transition: 0.4s;
		
			&:hover{
			background: #EBDFF7;
				p{
					color: var(--primary-color);
				}
					svg{
					
			path{
			
				stroke:var(--primary-color);
			}
		
		}
			}
		
		p{
			margin-bottom: 0px;
			color: #202020;
			font-weight: 500;
			font-size: 18px;
			text-transform: capitalize;
		}
		
	}

		.logoOutColor{
			p{
	color: #F13E3E!important;
			}

			&:hover{
								svg{
					
			path{
			
				stroke:#F13E3E!important;
			}
		
		}
			}
	
	}
}
}
		}
	}

	




	.contentAreaMain{
width: 100%;
  height: calc(100dvh - 142px);
  overflow: auto;
  @media (max-width: 1199px) {
height: 100%;
  }
	
	.textAreaMain{
		margin-bottom: 70px;
		  @media (max-width: 1199px) {
	margin-bottom: 20px;
		  }
		h2{
			font-size: 35px;
			font-weight: 600;
			color: #000;
			margin-bottom: 6px;
			text-transform: capitalize;
			font-family: "Poppins", sans-serif;
			 @media (max-width: 570px) {
font-size: 28px;
			 }
		}
		p{
			color: #707070;
			font-size: 20px;
			font-weight: 500;
			margin-bottom: 0px;
			font-family: "Poppins", sans-serif;
				 @media (max-width: 570px) {
font-size: 17px;
				 }
		}
	}
	.boxAreaWrapper{
		display: grid;
		grid-template-columns: repeat(2,1fr);
		gap:24px;
		margin-bottom: 40px;
		  @media (max-width: 1199px) {
margin-bottom: 20px;
		  }
		  	  @media (max-width: 992px) {
	grid-template-columns: 1fr 1fr ;
		gap:10px
			  }
			    @media (max-width: 570px) {
	grid-template-columns: 1fr;
	gap:10px
			  }
		
		.boxWrapperDiv{
			box-shadow: 0px 14px 42px 0px #080F340F;
			border-radius: 24px;
			background: #fff;
			padding: 20px;
			width: 100%;
			 @media (max-width: 570px) {
	padding: 15px;
			 }
			
			.flexTxtDiv{
				display: flex;
				gap:18px;
			flex-direction: column;
				 @media (max-width: 570px) {
	gap:10px;
				 }
				
.circleIconDiv{
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: #DCE9FF;
	display: flex;
	align-items: center;
	justify-content: center;
	 @media (max-width: 570px) {
	width: 52px;
	height: 52px;
	img{
		width: 30px;
	}
	 }
}

.circleIconDivGreen{
	background: #D5FFDA!important;
}

.contentTxt{
	h4{
		font-size: 24px;
		font-weight: 500;

		text-transform: capitalize;
		color: #202020;
		margin-bottom: 0px;
		 @media (max-width: 570px) {
margin-bottom: 7px;
font-size: 17px;
		 }
	}
	span{
		font-size: 40px;
		display: block;
		font-weight:700;
		color: #5F5F5F;
	
			margin-bottom: 0px;
				 @media (max-width: 570px) {
font-size: 25px;
				 }
	}
}
			}

		}
	}
	.commonBorderDiv{
border-radius: 16px;
margin-bottom: 16px;
border: 1px solid #DEDEDE;
padding: 32px;
background: #fff;
@media (max-width: 570px) {
padding: 20px;
}
&:last-child{
	margin-bottom: 0px;
}
.marginBottomSpace{
	margin-bottom: 40px;
	 @media (max-width: 570px) {
margin-bottom: 20px;
	 }
	&:last-child{
		margin-bottom: 0px;
	}
}

		.addressBorderDiv{
		border-radius: 8px;

    border: 1px solid #DEDEDE;
    padding: 20px;
    background: #fff;
	@media (max-width: 570px) {
  padding: 10px;
	}
	.form-check{
		padding-left: 0px;
		display: flex;
		gap:8px;
		margin-bottom: 0px;
		h4{
			color: #49475A;
			font-size: 20px;
			font-weight: 600;
			margin-bottom: 8px;
			text-transform: capitalize;
			   font-family: "Poppins", sans-serif;
			     @media (max-width: 570px) {
      font-size: 18px;
	  }
		}
		p{
			color: #707070;
      font-size: 18px;
      font-weight: 500;
      margin-bottom: 0px;
	  max-width: 249px;
      font-family: "Poppins", sans-serif;
	  @media (max-width: 570px) {
      font-size: 16px;
	  }
		}
	}
	.form-check-input{
		margin-left: 0px;
		margin-top: 4px;
		border: 1px solid #ABABAB;
	}
	.form-check-input:checked{
		background-color: #4542BD;
  border-color: #4542BD;
	}
	.form-check-input:focus{
		box-shadow: none;
	}
	}
		.adressSubTxtFlex{
		display: flex;
		justify-content: space-between;
		margin-bottom: 15px;
		width: 100%;
		align-items: center;
		h3{
			font-size: 18px;
          font-weight: 600;
          color: #252525;
          margin-bottom: 15px;
          text-transform: capitalize;
          font-family: "Poppins", sans-serif;
			margin-bottom: 0px!important;
		}
		a{
			font-size: 16px;
        color: rgb(37, 37, 37);
        font-weight: 500;
        text-decoration: underline;
        font-family: "Poppins", sans-serif;
		&:hover{
			color: var(--primary-color);
		}
		}
	}
h2{
	font-size: 27px;
	font-weight: 500;
	color: var(--text-color);
	margin-bottom: 20px;
	text-transform: capitalize;
	font-family: "Poppins", sans-serif;
	@media (max-width: 570px) {
font-size: 22px;
margin-bottom: 15px;
	}
}
.basicDetails{
	display: flex;
	justify-content: space-between;
	align-items: start;
	margin-bottom: 50px;
	position: relative;
	@media (max-width: 570px) {
margin-bottom: 20px;
	}
	&:last-child{
		margin-bottom: 0px;
	}



	.flexBottomMain{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100%;
		.form-switch{
			position: absolute;
  bottom: 0;
  padding-left: 0px;
  .form-check-input{
	padding-left: 0px;
	margin-left: 0px;
	margin-top: 0px;
  }
  .form-check-input:focus{
	box-shadow: none;
  }
  .form-check-input:checked{
	background-color: #329149;
  border-color: #329149;
  }
		}
	}
	a{
		font-size: 16px;
		color: #252525;
		font-weight: 500;
		text-decoration: underline;
			font-family: "Poppins", sans-serif;
				@media (max-width: 570px) {
	font-size: 14px;
				}
			&:hover{
				color: var(--primary-color);
			}
	}
	.basicDeatilTxt{
		.profileImgWrapper{
			width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
	margin-bottom: 20px;
	img{
		width: 100%;
      height: 100%;
      object-fit: cover;
	}
		}
		ul{
			margin: 0;
		padding: 0 16px;
			li{
			color: #707070;
            font-weight: 500;
            font-size: 16px;
       text-transform: capitalize;
            position: relative;
          padding-left: 17px;
		  	@media (max-width: 570px) {
 font-size: 14px;
			}
						&::before{
						position: absolute;
              left: 0;
              top: 8px;
              background: #333;
              width: 7px;
              height: 7px;
              content: "";
              border-radius: 50%;
						}
			}
		}
		h3{
			font-size: 18px;
			font-weight: 600;
			color: #252525;
			margin-bottom: 15px;
			text-transform: capitalize;
		
					@media (max-width: 570px) {
font-size: 16px;
margin-bottom: 10px;
	}
		}
		p{
			color: #707070;
			font-weight: 400;
			font-size: 20px;
		   text-transform: capitalize;
			margin-bottom: 5px;
				@media (max-width: 570px) {
font-size: 16px;
				}

		}
	}
}
	}
}

.sideNavSecMain{
	padding-top: 91px;
  padding-bottom: 40px;
  @media (max-width: 1199px) {
padding:90px 20px 40px ;
  }
}
.profileMainFlex{
display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 48px;
	.profileImgWrapper{
		width: 40px;
		height:40px;
		border-radius: 50%;
		overflow: hidden;
		flex-shrink: 0;
	
		img{
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
	.profileTxt{
		h2{
		font-size: 16px;
      font-weight: 500;
      color: #111;
      margin: 0px;
		}
		label{
			font-size: 13px;
			font-weight: 400;
			color: #888;
			margin: 0;
		}
	}
}

.filterBtnOffcanvas{
	display: none;
		@media (max-width: 1199px) {
display: block;
		}
.offcanvas-title{
	font-size: 30px;
	font-weight: 600;
font-family: "Poppins", sans-serif;
}

		.flexDownLinKAll{
			box-shadow: 0px 14px 42px 0px #080F340F;
background: #fff;

border-radius: 24px;
width: 100%;
padding: 32px;
height: 100dvh;
@media (max-width: 1199px) {
padding: 0px;
box-shadow: none;
}

ul{
	display: flex;
	flex-direction: column;
	gap:16px;
	.activeMain{
background: #EBDFF7;
		svg{
			path{
				fill: #4542BD;
			}
		
		}

		p{
color: #4542BD;
		}
	}

li{
	a{
		display: flex;
            gap: 12px;
            align-items: center;
            padding: 15px 24px;
			border-radius: 8px;
			transition: 0.4s;
		
			&:hover{
	background: #EBDFF7;
				p{
					color: #4542BD;
				}
					svg{
					
			path{
			
				stroke:#4542BD;
			}
		
		}
			}
		
		p{
			margin-bottom: 0px;
			color: #202020;
			font-weight: 500;
			font-size: 18px;
			text-transform: capitalize;
		}
		
	}

		.logoOutColor{
			p{
	color: #F13E3E!important;
			}

			&:hover{
								svg{
					
			path{
			
				stroke:#F13E3E!important;
			}
		
		}
			}
	
	}
}
}
		}
		.offcanvas-bottom {
				height: 100%!important;
				background: #fff;
			}
			.filterIconBottom{
				position: fixed;
				bottom:30px;
				left: 20px;
				width: 50px;
				height: 50px;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50%;
				background: var(--secondary-color);
				color: #fff;
				font-size:18px;
				z-index: 100;
				border: none;
				padding: 20px;
			}
			
}

.pulse {
  animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
  }
}

.modal-content{
	border-radius: 32px!important;
}

.productDeatilcrumb{
	background: #F7F6F8;
}




.productDetailSection{
	padding: 30px 0 60px;
	background: #F7F6F8;

}

/* Logout Modal Premium Styling */
.logOutMainDiv .modal-content {
    border: none;
    border-radius: 24px!important;
    padding: 30px 20px;
    background: #fff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

.logOutMainDiv .modal-body {
    text-align: center;
    padding: 0;
}

.logOutMainDiv .modal-body h3 {
    font-size: 22px;
    font-weight: 600;
    color: var(--secondary-color);
    margin-bottom: 12px;
}

.logOutMainDiv .modal-body p {
    font-size: 15px;
    color: #666;
    margin-bottom: 30px;
}

.logOutMainDiv .flexBtnMain {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.logOutMainDiv .firstBtnMain {
    width: 100%;
    padding: 13px;
    border: 1px solid #E0E0E0;
    border-radius: 12px;
    background: #fff;
    color: #666;
    font-size: 14px;
    font-weight: 500;
    transition: 0.3s;
    cursor: pointer;
}

.logOutMainDiv .firstBtnMain:hover {
    background: #F5F5F5;
}

.logOutMainDiv .secondBtnMain {
    width: 100%;
    padding: 13px;
    border: 1px solid #F13E3E;
    border-radius: 12px;
    background: #F13E3E;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    transition: 0.3s;
    cursor: pointer;
}

.logOutMainDiv .secondBtnMain:hover {
    background: transparent;
    color: #F13E3E;
}

/* ===== Preloader ===== */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  z-index: 999999;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.6s cubic-bezier(0.77, 0, 0.175, 1), visibility 0.6s;
}

.loader-content {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader-logo {
  width: 60px;
  height: auto;
  position: absolute;
  z-index: 2;
  animation: pulse 2s ease-in-out infinite;
}

.spinner {
  width: 120px;
  height: 120px;
  border: 2px solid transparent;
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.spinner:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 7px;
  right: 7px;
  bottom: 7px;
  border: 2px solid transparent;
  border-top-color: #333;
  border-radius: 50%;
  opacity: 0.5;
  animation: spin 2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

body.loaded #preloader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.loading {
  overflow: hidden;
}

/* Order detail page */
    .text-purple {
      color: #673DE6;
    }

    .orderId a:hover {
      color: #673DE6 !important;
    }

    .order-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 25px;
      padding-bottom: 15px;
      border-bottom: 1px solid #eee;
    }

    .order-header h2 {
      font-size: 24px;
      margin-bottom: 5px;
      color: var(--secondary-color);
    }

    .order-header p {
      color: #777;
      margin: 0;
    }

    .status-badge {
      padding: 5px 15px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 500;
      text-transform: uppercase;
    }

    .status-pending {
      background: #fff3cd;
      color: #856404;
    }

    .status-processing {
      background: #cce5ff;
      color: #004085;
    }

    .status-shipped {
      background: #d4edda;
      color: #155724;
    }

    .status-delivered {
      background: #d4edda;
      color: #155724;
    }

    .status-cancelled {
      background: #f8d7da;
      color: #721c24;
    }

    /* Modern Stepper */
    .stepper-wrapper {
      display: flex;
      justify-content: space-between;
      margin-bottom: 40px;
      position: relative;
    }

    .stepper-item {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
      z-index: 2;
    }

    .stepper-item::before {
      position: absolute;
      content: "";
      border-bottom: 2px solid #ccc;
      width: 100%;
      top: 20px;
      left: -50%;
      z-index: -1;
    }

    .stepper-item:first-child::before {
      content: none;
    }

    .stepper-item .step-counter {
      position: relative;
      z-index: 5;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #ccc;
      margin-bottom: 10px;
      color: white;
      font-weight: bold;
    }

    .stepper-item.active .step-counter {
      background-color: var(--primary-color);
    }

    .stepper-item.completed .step-counter {
      background-color: #28a745;
    }

    .stepper-item.completed::before {
      border-color: #28a745;
    }

    .stepper-item.active::before {
      border-color: var(--primary-color);
    }

    .step-name {
      font-size: 13px;
      color: #555;
      text-align: center;
    }

    .stepper-item.active .step-name {
      font-weight: 600;
      color: var(--primary-color);
    }

    /* Tables & Cards */
    .premium-card {
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
      padding: 20px;
      margin-bottom: 25px;
    }

    .premium-card h3 {
      font-size: 18px;
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 1px solid #f0f0f0;
    }

    .prod-table th {
      background: #f8f9fa;
      font-weight: 600;
      font-size: 14px;
    }

    .prod-table td {
      vertical-align: middle;
    }

    .prod-img {
      width: 60px;
      height: 60px;
      object-fit: cover;
      border-radius: 8px;
      border: 1px solid #eee;
    }

    .document-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 15px;
    }

    .document-item {
      display: flex;
      align-items: center;
      padding: 12px;
      background: #f8f9fa;
      border-radius: 10px;
      border: 1px solid #e9ecef;
      transition: all 0.3s ease;
    }

    .document-item:hover {
      border-color: var(--primary-color);
      background: #fff;
      transform: translateY(-2px);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    }

    .doc-icon {
      font-size: 24px;
      margin-right: 12px;
      color: var(--primary-color);
    }

    .doc-info {
      overflow: hidden;
    }

    .doc-info span {
      display: block;
      font-size: 13px;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #333;
    }

    .doc-info small {
      color: #888;
      font-size: 11px;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .stepper-wrapper {
          flex-wrap: wrap;
          gap: 20px 0;
      }

      .stepper-item {
          flex-basis: 50%;
      }

      .stepper-item::before {
          content: none;
      }
    }