/* CSS Document */
/* 1. Reset All Margin and Padding */

@font-face{
	src:url("../fonts/IRANYekanXVF.woff");
	font-family: "iranYekan";
}
@font-face{
	src:url("../fonts/BHoma_0.ttf");
	font-family: "homa";
}
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* باعث میشه که padding و border در ابعاد عنصر محاسبه نشه */
}
/* حذف دکمه‌های بالا و پایین اسکرول */
::-webkit-scrollbar-button {
  display: none;
}

/* خود نوار اسکرول */
::-webkit-scrollbar {
  width: 4px;  /* باریکش کن */
  background: transparent;  /* حذف بکگراند */
}

/* قسمت قابل حرکت (thumb) */
::-webkit-scrollbar-thumb {
  background-color: #00bfff;  /* آبی روشن */
  border-radius: 10px;
}

/* برای حالت hover */
::-webkit-scrollbar-thumb:hover {
  background-color: #00bfff;
}

/* برای بخش غیر قابل حرکت (track) */
::-webkit-scrollbar-track {
  background: transparent;
}
html {
  scrollbar-color: #00bfff transparent; /* thumb - track */
  scrollbar-width: thin;
}

:root{
	--backgrund:#E6E6E6;
	--white:#FFFFFF;
	--blue:#3786EE;
	--green:#11B856;
	--red:#E90544;
	--yelow:#F6FF00;
	--dark-blue:#204D88;
	--black:#1d1d1d;
	--gray:#767676;
	--kerem:#E5CDB2;
	--mesi:#C04337;
	--black-opacity:RGBA(0, 0, 0, 50);

}

/* 2. Set Global Font */
body {
    font-family: 'homa'; /* فونت پیشنهادی "وزیر" که فونت فارسی مناسبیه */
    font-size: 16px; /* فونت اصلی سایت */
    line-height: 1.6; /* فاصله بین خطوط */
    color: #333; /* رنگ متن */
    background-color: var(--backgrund); /* رنگ پس‌زمینه */
	direction: rtl;
	text-align: right;
	padding-top: 160px; /* بسته به ارتفاع هدر */
}

input:focus {
    outline: none; /* حذف حاشیه (outline) هنگام فوکوس */
    border: none;  /* حذف حاشیه (border) اگر اضافه شده باشه */
}

/* 3. تنظیم فونت‌ها و اندازه‌های تگ‌ها */
h1, h2, h3, h4, h5, h6 {
    font-family: 'homa';
    font-weight: bold;
    
    line-height: 1.2; /* فاصله خطوط */
}

h1 {
    font-size: 2.5rem; /* سایز بزرگتر برای h1 */
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.75rem;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1rem;
}

/* 4. تنظیم فونت و فاصله پاراگراف‌ها */
p {
    font-family: 'homa' ;
    font-size: 1rem; /* فونت معمولی برای پاراگراف‌ها */
    line-height: 1.8; /* فاصله خطوط پاراگراف */
    
}

/* 5. تنظیم لینک‌ها */
a {
    color: #007BFF; /* رنگ لینک‌ها */
    text-decoration: none; /* حذف خط زیر لینک */
}

a:hover {
    text-decoration: none; /* خط زیر لینک در حالت هاور */
}
ul{
	text-decoration: none;
	list-style: none;
}




/* ======================================================================== طراحی اسلایدر صفحه اصلی ================================================================== */

 .slider-box{
      position: relative;
      width: 100%;
	 
	 margin-top: 20px;
    }



    .swiper {
      width: 90%;
      height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
    }

    .swiper-slide {
     width: 100%;
		
		padding: 0 20px;
		background: linear-gradient(90deg,rgba(26, 92, 184, 1) 0%, rgba(131, 131, 222, 1) 35%, rgba(0, 142, 237, 1) 70%, rgba(26, 92, 184, 1) 100%);
		border-radius: 10px;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		
		background-size: 500% 200%;
  		background-position: 0% 50%;
		grid-gap: 50px;
    }

.swiper-slide:hover {
		animation: slideGradient 5s linear infinite;
    }
@keyframes slideGradient {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: 0% center;
  }
}
.corner {
  width: 300px;
  height: 200px;
  background-color: var(--backgrund);
  border-radius: 30px;
  position: absolute;
}
	.corner-top-left {
  top: -100px;
  left: -150px;
		display: flex;
		align-items: flex-end;
		justify-content: flex-start;
		padding: 0 20px 30px 0;
}
	.corner-top-left p{
  		font-size: 22px;
		text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
		color: var(--blue);
}

.corner-bottom-right {
  bottom: -100px;
  right: -150px;
	display: flex;
		align-items: flex-start;
		justify-content: flex-end;
	padding: 35px 0 0 30px;
}
.corner-bottom-right p{
  font-size: 22px;
		text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
	color: var(--blue);
}
.slider-img{
	width: 37%;
	height: 500px;
	
	background-position: center;
	background-size: cover;
	
}
.slider-img img{
	width: 100%;
	height: 100%;
}
.slider-img2{
	display: flex;align-items: center;
	justify-content: space-between;
	flex-direction: column;
}
.slider-img2 img{
	width: 200px ;
	height: 10px;
	
}
.slider-img2 h2{
	font-size: 80px;
	color: var(--white);
}
.slider-img2 p{
	font-size: 30px;
	margin-top: 20px;
	color: var(--white);transition:  0.2s ease-in-out; /* انیمیشن تغییر شفافیت */
	cursor: pointer;
}
.slider-img2 p:hover{
	color: linear-gradient(90deg, rgba(131, 58, 180, 1), rgba(253, 29, 29, 1), rgba(252, 176, 69, 1));
}

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
.item-box{
	display: flex;align-items: center;justify-content: center;grid-gap: 15px;width: 100%;margin: 10px;	
}
.item-box a{
	display: flex;align-items: center;justify-content: center;grid-gap: 15px;width: 100%;
	padding: 10px 15px;background-color: var(--white);border-radius: 10px;font-size: 20px;transition:  0.2s ease-in-out; /* انیمیشن تغییر شفافیت */
}
.item-box a:hover{
	color: var(--white);
	background: linear-gradient(90deg, rgba(131, 58, 180, 1), rgba(253, 29, 29, 1), rgba(252, 176, 69, 1));
	
}

/* ======================================================================== طراحی هدر ================================================================== */

.call-button {
  position: fixed;
  bottom: 70px; /* فاصله از پایین */
  left: 20px; /* فاصله از چپ */
  width: 60px;
  height: 60px;
  background-color: var(--green); /* رنگ آبی روشن */
  color: white;
  border-radius: 50%;
  text-align: center;
  line-height: 60px;
  font-size: 28px;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  transition: background-color 0.3s ease;
	display: flex;align-items: center;justify-content: center;
}

.call-button:hover {
  background-color: var(--blue);
}
header{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	position: fixed;
  		top: 0;
  		left: 0;
  		z-index: 9999; /* بالاتر از همه */
  		background: var(--backgrund); /* یا هر رنگی که بخوای */
  		box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* سایه اختیاری */
}
.header-box{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 90%;
	border-radius: 10px;
	background-color: var(--white);
	height: 70px;
	margin-top: 15px;
}
.header-right{
	width: 50%;
	height: 100%;
	padding-right: 15px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	grid-gap: 15px;
}
.logo-box{
	widows: 70px;
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
	 transition:  0.5s ease-in-out; /* انیمیشن تغییر شفافیت */
}
.logo-box img{
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center; 
	transition:  0.5s ease-in-out; /* انیمیشن تغییر شفافیت */
}
.logo-box:hover img{
	transition:  0.3s ease-in-out; /* انیمیشن تغییر شفافیت */
	width: 150px;
	height: 30px;
	content: url('../logo/Logo fa 72.png');
}
.search-box{
	display: flex;align-items: center;
	justify-content: center;
	width: calc(100% - 60px);
}
.search-input{
	width: calc(100% - 50px);
	height: 50px;
	border: none;
	padding: 5px 10px 5px 10px;
	background-color: var(--blue);
	color: var(--white);
	font-size: 15px;
	font-family: 'homa';
	border-radius: 0px 10px 10px 0px;
}
.search-input::placeholder{
	color: var(--white);
}

.search-icon{
	width: 50px;
	height: 50px;
	border: none;
	background-color: var(--blue);
	border-radius: 10px 0px 0px 10px;
	display: flex;align-items: center;
	justify-content: center;
}
.search-icon img{
	width: 35px;
	height: 35px;
}
.header-left{
	width: 50%;
	height: 100%;
	padding-left: 15px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	grid-gap: 15px;
}
.user-box{
	min-width: 50px;
	height: 50px;
	border-radius: 8px;
	border: none;
	display: flex;
	align-items: center;justify-content: center;
	grid-gap: 10px;
	background-color: var(--blue);
	transition:  0.2s ease-in-out; /* انیمیشن تغییر شفافیت */
	cursor: pointer;
}
.user-box p{
	font-family: 'homa';
	display: none;
	font-size: 17px;
	color: var(--white);
	transition:  0.5s ease-in-out; /* انیمیشن تغییر شفافیت */
}
.user-box:hover{
	padding: 0 15px;
	cursor: pointer;
}
.user-box:hover p{
	font-family: 'homa';
	display: block;
	font-size: 17px;
	color: var(--white);
	cursor: pointer;
}
.user-box img{
	width: 32px;
	height: 32px;
}
.call-box{
	padding: 0 10px;
	height: 50px;
	border-radius: 8px;
	border: 1.5px solid var(--blue);
	display: flex;
	align-items: center;
	justify-content: center;
	grid-gap: 10px;
	background-color: var(--white);
	transition:  0.2s ease-in-out; /* انیمیشن تغییر شفافیت */
	cursor: pointer;
}
.call-box:hover{
	background-color: var(--blue);
	
}
.call-box:hover img{
	
	
	content: url('../image/Calling white.svg');
}
.call-box:hover p{
	color: var(--white);
}
.call-box p{
	font-family: 'homa';
	font-size: 17px;
	
	color: var(--blue);
	cursor: pointer;
}
.call-box img{
	width: 32px;
	height: 32px;
}
.mobile-navbar{
		display: none;
		align-items: center;justify-content: space-between;
		width: 96%;
		margin-top: 5px;
	margin-bottom: 10px;
	}
.navbar{
	width: 90%;
	margin-top: 15px;
	padding: 5px 90px 5px 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;margin-bottom: 5px;
}
.navbar ul{
	display: flex; 
	justify-content: center;
	align-items: center;
	grid-gap: 10px;
}
.navbar ul li{
	display: flex; 
	justify-content: center;
	align-items: center;
	grid-gap: 15px;
	padding: 8px 15px;
	background-color: var(--blue);
	border-radius: 5px;
	color: var(--white);
	cursor: pointer;
	transition:  0.2s ease-in-out; /* انیمیشن تغییر شفافیت */
}
.navbar ul li:hover{
	background-color: var(--dark-blue);
	padding: 8px 30px;

}
.navbar ul li a{
	display: flex; 
	justify-content: center;
	align-items: center;
	color: var(--white);
	cursor: pointer; 
	grid-gap: 10px;
}
.navbar ul:nth-child(1) li:nth-child(1) {
	 background: linear-gradient(90deg, rgba(131, 58, 180, 1), rgba(253, 29, 29, 1), rgba(252, 176, 69, 1));
  background-size: 200% 100%;
  background-position: 0% 50%;
	
}
.navbar ul:nth-child(1) li:nth-child(1):hover {
	
	animation: moveGradient 1s linear infinite;
}
/* تعریف انیمیشن */
@keyframes moveGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.navbar ul:nth-child(2) li {
	background-color: var(--white);
	border: 1px solid var(--blue);
	color: var(--blue);
}
.navbar ul:nth-child(2) li a{
	
	color: var(--blue);
}
.footer-menu{
		width: 100%;
		height: 65px;
		background-color: var(--white);
		display: none;align-items: center;
		justify-content: space-around;
	 	position: fixed;
		flex-wrap: wrap;
  		bottom: 0;
  		left: 0;
  		z-index: 9999; /* بالاتر از همه */
  		background: #fff; /* یا هر رنگی که بخوای */
  		box-shadow: 0 -2px 5px rgba(0,0,0,0.3); /* سایه اختیاری */
	}
.menu-item{
	width: 50px;
	height: 50px;
	display: flex;align-items: center;
	flex-direction: column;
	justify-content: center;
}
.menu-call{
	width: 100%;
	height: 50px;
	display: flex;
	align-items: center;justify-content: space-around;
	background-color: var(--green);
	margin-top: 10px;
}
.menu-call a{
	color: var(--white);
}
.menu-call p{
	color: var(--white);
}
.menu-item p{
	opacity: 61%;
}

/* ========================================================== طراحی باکس محصولات شگفت انگیز ================================================================== */

.offer-box{
	width: 90%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-right: 5%;
    background: var(--red);
	padding: 20px 10px 20px 10px ;
	margin-top: 20px;
	border-radius: 10px;
	
}
.offer-img{
	width: 15%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0px 25px;
	
}
.offer-img-mobile{
	display: none;
}
.offer-name{
	display: flex;
	align-items: center;
	justify-content: center;
}
.offer-name h2{
	font-size: 20px;
	color: var(--white);
	font-weight: 400;
	margin-bottom: 20px;
}
.offer-name a{
	font-size: 17px;
	color: var(--white);
	font-weight: 200;
	margin-top: 20px;
}

.offer-pic{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.offer-pic img{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 150px;
	transform: scaleX(-1);
}
.offer-product{
	width: 85%;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	overflow-x: scroll;
	padding: 10px 10px; 
	grid-gap: 10px;
	 cursor: pointer;
  scroll-behavior: smooth;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #80c9ff transparent;
}
.offer-product::-webkit-scrollbar {
  height: 4px;
}

.offer-product::-webkit-scrollbar-thumb {
  background-color: #80c9ff;
  border-radius: 10px;
}

.offer-product::-webkit-scrollbar-track {
  background: transparent;
}
.product{
	width: 239px;
	background: var(--white);
	border-radius: 7px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	
}


.product-image{
	position: relative;
	
	background-position: center;
	background-size: cover;
	width: 238px;
	height: 238px;
	margin: 1px;
	border-radius: 6.5px;
	
}

.product-pay{
	position: absolute;
	top: 5px;
	right: 5px;
	background-color: var(--red);
	padding: 4px 8px;
	border-radius: 5px;
	opacity: 75%;height: 35px;
	display: flex;align-items: center;justify-content: center;
}
.product-pay p{
	opacity: 100%;
	font-size: 12px;
	color: var(--white);
	display: block;
	margin: 0 0 0;
	
}

.product-bookmark{
	position: absolute;
	top: 5px;
	left: 5px;
	background-color: var(--red);
	padding: 4px 4px;
	border-radius: 5px;
	opacity: 75%;
	display: flex;align-items: center;justify-content: center;
}
.product-call{
	position: absolute;
	bottom: 0px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 40px;
	padding: 0 2%;
	
}
.product-logo{
	width: 35px;
	height: 35px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	padding: 3px;
	margin-bottom: 5px;
}

.product-logo img{
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.product-number{
	display: flex;
	flex-direction: column;
	height: 40px;
	column-gap: 5px;
	grid-gap: 5px;
}
.product-number p{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	height: 15px;
	font-size: 12px;
	padding: 2px 5px 2px 5px;
	border-radius: 5px;
	margin: 0;
	width: auto;
}

.product-number p:nth-child(1){
	color: var(--red);
	background-color:  var(--white);
}
.product-number p:nth-child(2){
	color: var(--white);
	background-color:  var(--red);
}
.product-name{
	width: 100%;
	padding: 3px 3%;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	
}
.product-name h3{
	font-size: 18px;
	font-weight: 400;
	text-align: justify-all;
	margin: 0;
}
	.product-text {
  white-space: nowrap;        /* جلوگیری از رفتن به خط بعد */
  overflow: hidden;           /* مخفی کردن متن اضافی */
  text-overflow: ellipsis;    /* نمایش سه‌نقطه (...) در انتهای متن */
}
.product-qct{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0 3%;
	
}
.qct-right p{
	color: var(--black);
	font-size: 14px;
}
.qct-left{
	display: flex;align-items: center;
	justify-content: space-between;
	grid-gap: 10px;
}
.qct-left p{
	color: var(--black);
	font-size: 14px;
}
.qct-left img{
	width: 20px;
	height: 20px;	
}
.product-price{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0 3%;
	margin-bottom: 5px;
}
.price-right a{
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--red);
	padding: 5px 15px;
	border-radius: 5px;
	color: var(--white);
	font-size: 15px;
}
.price-left .org-price{
	display: flex;
	align-items: center;justify-content: space-between;
	grid-gap: 5px;
}
.price-left .org-price p.offer-number{
	display: flex;
	align-items: center;justify-content: space-between;
	padding: 1px 5px;
	background-color: var(--red);
	color: var(--white);
	font-size: 13px;
	border-radius: 5px;
}
.price-left .org-price p{
	display: flex;
	align-items: center;justify-content: space-between;
	padding: 1px 5px;
	
	color: var(--blcak);
	font-size: 13px;
	border-radius: 5px;
}
.offer-prices{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.offer-prices-text{
	font-size: 15px;
	font-weight: 500;
	
}

/* ========================================================== طراحی باکس دسته بندی محصولات ================================================================== */

.catgoory{
	display: flex;
	align-items: center;justify-content: center;
	flex-direction: column;
	width: 90%;
	margin-right: 5%;
	margin-top: 30px;
}
.catgoory h2{
	font-size: 22px;
	font-weight: 400;
}
.catgoory-by-type{
	display: flex;
	flex-wrap: wrap;
	align-items: center;justify-content: space-around;
	width: 80%;
	margin-top: 10px;
	
}
.catgoory-by-job{
	display: flex;align-items: center;justify-content: space-around;
	width: 80%;
	margin-top: 10px;
}
.catgoory-by-mobile{
		display: none;
		flex-wrap: wrap;
		align-items: center;justify-content: center;
		column-gap: 15px;
	}
.catgoory-box{
	width: 120px;
    padding: 10px;
	display: flex;align-items: center;
	justify-content: center;
	flex-direction: column;
	border-radius: 10px;
	transition: all  0.5s ease-in-out; /* انیمیشن تغییر شفافیت */
	grid-gap: 10px;
	color: var(--black);
}
.catgoory-box:hover{
	background: linear-gradient(90deg,rgba(26, 92, 184, 1) 0%, rgba(131, 131, 222, 1) 35%, rgba(0, 142, 237, 1) 70%, rgba(26, 92, 184, 1) 100%);
		background-size: 500% 200%;
  		background-position: 0% 50%;
	animation: slideGradient 2s linear infinite; transition: all  0.5s ease-in-out; /* انیمیشن تغییر شفافیت */
}
.catgoory-box:hover p{
	color: var(--white);
}
.catgoory-box2{
	width: 170px;
    padding: 10px;
	display: flex;align-items: center;
	justify-content: center;
	flex-direction: column;
	border-radius: 10px;
	transition: all  0.5s ease-in-out; /* انیمیشن تغییر شفافیت */
	grid-gap: 10px;
}
.catgoory-box2:hover{
	background: linear-gradient(90deg,rgba(131, 58, 180, 1) 0%, rgba(196, 43, 100, 1) 27%, rgba(253, 29, 29, 1) 50%, rgba(253, 83, 44, 1) 68%, rgba(131, 58, 180, 1) 100%);
		background-size: 500% 200%;
  		background-position: 0% 50%;
	animation: slideGradient 2s linear infinite; transition: all  0.5s ease-in-out; /* انیمیشن تغییر شفافیت */
}
.catgoory-box2:hover p{
	color: var(--white);
}
.catgoory-box img{
	width: 100%;
    border-radius: 50%;
	display: flex;align-items: center;
	justify-content: center;
	flex-direction: column;
}
.catgoory-box2 img{
	width: 100%;
    border-radius: 50%;
	display: flex;align-items: center;
	justify-content: center;
	flex-direction: column;
}

/* ========================================================== طراحی باکس درباره دیجی سنگ ================================================================== */

.dg-box{
	width: 85%;margin-right: 15%;
	display: flex;align-items: center;justify-content: center;
	background-image: url("../image/file-LG9z6LCWxtNzAsazUZXvi8.png");
	background-position: right;
	background-size: contain;background-repeat: no-repeat;
	padding-right: 50px;margin-top: 30px;
}
.dg-container {
	width: 80%;margin-left: 20%;
	background: linear-gradient(45deg, rgba(55, 134, 238, 0.3) 19%, rgba(55, 134, 238, 0.15) 81%);
	border-radius: 20px;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px); /* برای ساپورت Safari */
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	padding: 10px 15px;
}
.dg-text{
	display: flex;align-items: flex-start;justify-content: center;
	flex-direction: column;grid-gap: 20px;
}
.dg-titr h1{
	color: var(--blue);
	font-weight: 400;
}

.dg-long-text p{
	font-size: 17px;
	color: var(--black);
}

/* ========================================================== طراحی باکس درباره دیجی سرویس ================================================================== */

.dg-service{
	width: 90%;
	margin-right: 5%;
	display: flex;
	align-items: center;
	justify-content: center;
	grid-gap: 20px;
	flex-wrap: wrap;
	margin-top: 20px;
}
.service-box{
	width: 45%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-direction: column;
	background: var(--white);
	min-height: 320px;
	border-radius: 10px;
	padding: 20px 30px;
}
.service-box h2{
	color: var(--red);
}
.service-box p strong{
	color: var(--red);
}
.service-box a{
	color: var(--white);
	padding: 5px 15px;
	background: var(--red);
	border-radius: 5px;
}

/* ========================================================== طراحی موبایل ================================================================== */
.baner-box{
	width: 90%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 20px;
}
.baner{
	width: 80%;
	height: 520px;
	margin-right: 5%;
	border-radius: 10px;
	background: url("../image/Apr 19, 2025, 06_20_04 PM.png");
	background-position: center;
	background-size: cover;
	position: relative;
}
.baner-text{
	position: absolute;
	top: 40px;
	right: 50%;
	display: flex;
	align-items: center;justify-content: center;flex-direction: column;
	width: 45%;
}
.baner-text p{
	font-size: 25px;
	color: var(--white);
	font-weight: 500;
}
.baner-item{
	display: flex;align-items: center;justify-content: space-around;
	width: 100%;
	flex-wrap: wrap;
	grid-gap: 8px;
	margin-top: 10px;
}
.baner-item a{
	display: flex;align-items: center;justify-content: space-around;
	width: 80%;
	padding: 4px  10px;
	border-radius: 5px;
	background-color: var(--white);
	grid-gap: 5px;
	flex-wrap: wrap;
	
} 



/* ========================================================== طراحی فوتر ================================================================== */


.footer {
  background: var(--blue);
  color: var(--black);
  font-family: "homa";
  padding: 40px 20px;
  direction: rtl;
	margin-top: 30px;
	padding-bottom: 80px;
}

.footer-container {
  max-width: 1200px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}

.footer-box {
  flex: 1 1 250px;
}

.footer-box h3,
.footer-box h4 {
  margin-bottom: 10px;
  color: var(--black);
}

.footer-box p,
.footer-box ul li,
.footer-box a {
  font-size: 14px;
  line-height: 1.8;
  color: var(--black);
  text-decoration: none;
}

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

.footer-box ul li {
  margin-bottom: 6px;
}

.footer-box a:hover {
  color: #fff;
}

.footer-icons {
  text-align: center;
}

.footer-icons .trust-badge {
  height: 60px;
  margin-bottom: 10px;
}

.social a {
  margin: 0 5px;
}

.social img {
  height: 24px;
  vertical-align: middle;
}

.footer-separator {
  margin: 20px 0;
  border-color: #444;
}

.footer-copy {
  text-align: center;
  font-size: 13px;
  color: var(--black);
}
/* ========================================================== طراحی صفحه محصولات ================================================================== */

.rahnama-text{
	width: 90%;
	display: flex;align-items: center;justify-content: flex-start;
	padding: 15px 15px;
	margin-right: 5%;
}

.rahnama-text p{
	font-size: 15px;
	font-weight: 400;
	color: var(--black);
	opacity: 60%;
}

.product-page{
	width: 90%;
	margin-right: 5%;
	display: flex;
	align-items: flex-start;justify-content: space-between;
}
.product-filter{
	width: 18%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	column-gap: 10px;
	grid-gap: 10px;
	border-radius: 8px;
	background-color: var(--white);
	flex-direction: column;
	padding: 10px;
	transition: opacity 0.3s ease, max-height 0.3s ease;
	
}
.filter-head{
	width: 90%;
	margin-right: 5%;
	display: flex;
	align-items: center;justify-content: space-between;
}
.filter-box{	
	width: 95%;
	margin-right: 2.5%;
	display: flex;
	align-items: center;justify-content: space-between;
	padding: 10px 5px;
	border-bottom: 1px solid var(--black);
	transition: opacity 0.3s ease, max-height 0.3s ease;
}
.product-container{
	width: 80%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	column-gap: 10px;
	grid-gap: 10px;
	border-radius: 8px;
	background-color: var(--white);
	flex-direction: column;
	padding: 10px;
}
.product-head{
	width: 100%;
	padding: 10px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	grid-gap: 5px;
}

.sort-item{
	display: flex;
	align-items: center;
	justify-content: space-between;
	grid-gap: 5px;
	padding: 5px 8px;
	background: var(--backgrund);
	border-radius: 4px;
}
.red{
	background: var(--red);
}
.red p{
	color: var(--white);
}
.product-boxs{
	width: 92%;
	padding: 10px;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	flex-wrap: wrap;
	grid-gap: 5px;
	column-gap: 5px;
	border-radius: 5px;
	background-color: var(--backgrund);
}
/* ========================================================== طراحی صفحه جزئیات محصول ================================================================== */

.detil{
	width: 90%;
	margin-right: 5%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.detil-image{
	width: 550px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}
.big-img{
	width: 550px;
	height: 550px;
	display: flex;align-items: center;
	justify-content: center;
}
.big-img img{
	width: 100%;
	height: 100%;
	border-radius: 8px;
}
.other-img{
	width: 550px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	grid-gap: 8px;
	height: 100px;
	margin-top: 10px;
	overflow-y: hidden;
	overflow-x: scroll;
}
.other-img img{
	width: 100px;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	grid-gap: 10px;
	border-radius: 5px;
	
}
.detil-text{
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-direction: column;
	padding: 10px 15px;
	width: 60%;
}
.detil-text h1{
	font-size: 25px;
	font-weight: 600;
}
.detil-adres{
	width: 100%;
	display: flex;align-items: center;
	justify-content: space-between;
	margin-top: 10px;
}
.detil-adres p{
	font-size: 17px;
	display: flex;align-items: center;
	justify-content: space-between;
	margin-top: 5px;
}

.detil-khat{
	height: 1px;
	min-width: 65%;
	background-color: var(--black);
}
.detil-btn{
	display: flex;align-items: center;
	justify-content: flex-start;
	width: 100%;
	grid-gap: 15px;
}
.detail-score{
	display: flex;align-items: center;
	justify-content: flex-start;
	grid-gap: 8px;
}

.detil-btn a{
	display: flex;
	align-items: center;justify-content: space-around;
	padding: 5px 15px;
	border-radius: 50px;
	background-color: var(--white);
	transform: all .3s ease-in-out;
}
.detil-btn a p{
	color: var(--black);
}
.detil-btn a:hover{
	background-color: var(--blue);
}
.detil-btn a img{
	width: 20px;
	height: 20px;
}

.detil-low-text{
	display: flex;align-items: center;justify-content: center;
	width: 100%;
	margin-top: 10px;
	margin-bottom: 10px;
}

.fatures{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	grid-gap: 10px;
	column-gap: 10px;
	flex-wrap: wrap;
}
.fature{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 5px 30px;
	grid-gap: 10px;
	column-gap: 10px;
background-color: var(--white);
	border-radius: 8px;
	min-width: 23%;
}
.fature-btn{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin-top: 10px;
}

.fature-btn a{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 5px 15px;
	border-radius: 50px;
	background-color: var(--white);
	transform: all .3s ease-in-out;
}
.fature-btn a p{
	color: var(--black);
}
.fature-btn a:hover{
	background-color: var(--blue);
}
.fature-btn a img{
	width: 20px;
	height: 20px;
}

.fature-btn .detil-khat{
	height: 1px;
	min-width: 30%;
	background-color: var(--black);
}
.detil-price-box{
	width: 35%;
	background-color: var(--white);
	 
	border-radius: 10px;
	-webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.75);
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	flex-direction: column;
	padding: 10px 15px;
}
.price-head{
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.price-shop-name{
	width: 100%;
	display: flex;align-items: center;justify-content: space-between;
}
.shop-name-logo{
	display: flex;
	align-items: center;justify-content: space-between;
	grid-gap: 15px;
}
.shop-name-logo img{
	display: flex;
	align-items: center;justify-content: space-between;
	width: 50px;
	height: 50px;
	border-radius: 5px;
}
.price-shop-name a{
	display: flex;align-items: center;justify-content: center;
	background-color: var(--white);
	-webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.75);
	padding: 6px 8px;
	border-radius: 5px;
	color: var(--gray);
}
.price-item{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	column-gap: 30px;
	grid-gap: 30px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.price-item-box{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	column-gap: 7px;
	-webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.5);
	border-radius: 5px;
	background: var(--white);
	min-width: 22%;
	padding: 5px 5px;
}
.price-item-box p{
	color: var(--green);
}
.price-item-box:nth-child(4) {
	-webkit-box-shadow: 0px 0px 12px 0px rgba(11,211,41,1);
-moz-box-shadow: 0px 0px 12px 0px rgba(11,211,41,1);
box-shadow: 0px 0px 12px 0px rgba(11,211,41,1);
	color: var(--green);
}
.price-item-box:nth-child(5) {
	-webkit-box-shadow: 0px 0px 12px 0px rgba(55,134,238,1);
-moz-box-shadow: 0px 0px 12px 0px rgba(55,134,238,1);
box-shadow: 0px 0px 12px 0px rgba(55,134,238,1);
	color: var(--blue);
}
.price-item-box:nth-child(5) p{

	color: var(--blue);
}

.price-item-box:nth-child(6) {
	-webkit-box-shadow: 0px 0px 12px 0px rgba(229,40,87,1);
-moz-box-shadow: 0px 0px 12px 0px rgba(229,40,87,1);
box-shadow: 0px 0px 12px 0px rgba(229,40,87,1);
	color: var(--blue);
}
.price-item-box:nth-child(6) p{

	color: var(--red);
}

.price-box-text{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	
}

.price-alarm{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	flex-direction: column;
	grid-gap: 5px;
}

.alarm-bazar{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 5px 8px;
	border-radius: 5px;
	background-color: var(--red);
	color: var(--white);
}
.alarm-ghest{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 5px 8px;
	border-radius: 5px;
	background-color: var(--green);
	color: var(--white);
}
.alarm-naghd{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 5px 8px;
	border-radius: 5px;
	background-color: var(--yelow);
	color: var(--white);
}
.price-btn{
	width: 100%;
	padding: 0 5%;
	display: flex;
	align-items: center;
	justify-content: center;
	grid-gap: 8px;
	margin-top: 10px;
}
.price-btn a:nth-child(1){
	padding: 8px;
	border-radius: 4px;
	background-color: var(--blue);
	display: flex;
	align-items: center;
	justify-content: center;
}

.price-btn a:nth-child(2){
	padding: 8px 15px;
	border-radius: 4px;
	background-color: var(--red);
	display: flex;
	align-items: center;
	justify-content: center;
	grid-gap: 10px;
	color: var(--white);
	min-width: 80%;
}
.product-mortabet{
	width: 90%;
	margin-right: 5%;
	border-radius: 8px;
	background-color: var(--blue);
	display: flex;
	align-items:center;
	justify-content: center;
	flex-direction: column;
	padding: 5px 20px;
	margin-top: 20px;
}
.pro-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	
}
.pro-head p{
	color: var(--white);
	font-size: 20px;
}
.pro-head a{
	color: var(--white);
	font-size: 18px;
}
.pro-box-s{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	grid-gap: 8px;
	overflow-x: scroll;
}
#img{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 250px;
	grid-gap: 8px;
	border-radius: 5px;
}
.product-reviwe{
	display: flex;
	align-items: flex-start;
	justify-content: center;
	width: 90%;
	margin-right: 5%;
	margin-top: 20px;
}
.reviwe-text{
	width: 80%;
	display: flex;
	flex-direction:column;
	align-items: center;
	justify-content: center;
	padding: 5px 20px;
}
.reviwe-head{
	display: flex;
	align-items: center;justify-content: flex-start;
	width: 100%;
	grid-gap: 10px;
	padding-bottom: 7px;
}
.reviwe-head a{
	padding: 5px 10px;
	color: var(--black);
}
.reviwe-head a:nth-child(1){
	padding: 5px 10px;
	color: var(--blue);
	border-bottom: 4px solid var(--blue);
}
.reviwe-box{
	display: flex;
	align-items: flex-start;justify-content: center;
	flex-direction: column;
	width: 100%;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--gray); 
}
.reviwe-box p:nth-child(1){
	font-size: 18px;
	color: var(--blue);
}
.product-specs-wrapper {
  width: 100%;
  direction: rtl;
  background: var(--white);
  border-radius: 16px;
  padding: 20px;
  margin: auto;
  overflow: hidden;
}

.product-specs-wrapper h2 {
  color: var(--blue);
  font-size: 24px;
  margin-bottom: 10px;
}

.product-specs {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, padding 0.3s ease;
}

.product-specs.expanded {
  max-height: 1000px;
  padding-top: 10px;
}

.spec-group {
  background: var(--white);
  padding: 10px 15px;
  margin: 10px 0;
  border-right: 4px solid #2196f3;
  border-radius: 8px;
}

.spec-group h3 {
  color: var(--blue);
  margin-bottom: 6px;
}

.spec-group ul {
  padding: 0;
  list-style: none;
}

.spec-group li {
  margin-bottom: 6px;
  line-height: 1.8;
}

.toggle-btn {
  background: var(--blue);
  color: var(--white);
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 10px;
	font-family: 'homa';
}

.toggle-btn:hover {
  background-color: #1976d2;
}
.nazar-container{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
	grid-gap: 10px;
}
.sabt-nazar{
	display: flex;flex-direction: column;
	align-items: 
		flex-start;
	justify-content: center;
	width: 30%;
	border-radius: 8px;
	background-color: var(--white);
	padding: 10px 15px;
	column-gap: 10px;
}
.emtyaz{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	grid-gap: 10px;
}
.nazar-btn {
	color: var(--black);
	display: flex;align-items: center;
	justify-content: center;
	flex-direction: column;
	grid-gap: 10px;
	column-gap: 10px;
	width: 100%;
}
.nazar-btn form{
	
	display: flex;align-items: center;
	justify-content: center;
	flex-direction: column;
	grid-gap: 10px;
	column-gap: 10px;
	width: 100%;
}
.nazar-btn form input{
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 100%;
	padding: 10px;
	border-bottom: 1px solid var(--red);
	background: var(--white);
	color: var(--black);
	font-family: 'homa';
	font-size: 13px;
}
.nazar-btn form input::placeholder{

	color: var(--red);
	
}
.nazar-btn form input:last-child{
	border: 1px solid var(--red);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 100%;
	padding: 10px;
	background: var(--white);
	color: var(--red);
	font-family: 'homa';
	font-size: 13px;
	border-radius: 10px;
	border-bottom: 1px solid var(--red);
	margin-bottom: 10px;
}
.nazar-btn p#s{
	color: var(--black);
	
}
.nazar-btn a{
	color: var(--red);
	padding: 10px 30px;
	border-radius: 8px; 
	border: 1px solid var(--red);
	min-width: 80%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.nzazrs{
	width: 70%;
	display: flex;align-items: center;justify-content:center;
	grid-gap: 10px;
	flex-direction: column;
	column-gap: 10px;
}

.nazar-box{
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-direction: column;
	padding: 10px 10px;
	border-radius: 8px; 
	background-color: var(--white);
}

.nazar-detile{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.nazar-detile p#name{
	color: var(--black);
}
.nazar-star{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	grid-gap: 10px;
}
#nazartext{
	color: var(--black);
}




/* انیمیشن ضربان قلب */
@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.1);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.1);
  }
  70% {
    transform: scale(1);
  }
}

.call-button-buy {
  position: fixed;
  bottom: 70px;
  right: 20px;
  background-color: var(--red); /* قرمز تند */
  color: white;
  padding: 12px 20px;
  border-radius: 50px;
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  z-index: 9999;
	  animation: heartbeat 1.5s infinite;
  transition: background-color 0.3s ease;
}

.call-button:hover {
  background-color: #c62828; /* قرمز تیره‌تر در هاور */
}
.footer-menu a{
	color: var(--black);
}


.login-con{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100vh;
}
.login-container{
	width: 60%;
	display: flex;
	align-items:center;
	justify-content: center;
	
	padding: 10px;
	border-radius: 29px;
background: -webkit-linear-gradient(top right, #f0f0f0, #cacaca);
background: -o-linear-gradient(top right, #f0f0f0, #cacaca);
background: linear-gradient(to bottom left, #f0f0f0, #cacaca);
box-shadow:  -17px 17px 30px #b1b1b1,
             17px -17px 30px #ffffff;
}
.login-img{
	width: 55%;
	display: flex;
	align-items:center;
	justify-content: center;
}
.login-img img{
	width: 100%;
	border-radius: 20px;
}
.login-box{
	width: 45%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	
}
.singup-box{
	width: 45%;
	display: none;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	}
.singup-box form{
	width: 90%;
	padding: 40px 30px;
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	column-gap: 10px;
	grid-gap: 30px;
	background-color: var(--white);
}
.singup-box form input{
	width: 90%;
	padding: 20px 25px;
	border:none;
	border-radius: 10px 10px 10px 10px;
background: -webkit-linear-gradient(top right, #ffffff, #dbd9d9);
background: -o-linear-gradient(top right, #ffffff, #dbd9d9);
background: linear-gradient(to bottom left, #ffffff, #dbd9d9);
box-shadow:  -17px 17px 20px #c0bebe,
             17px -17px 20px #ffffff;
	font-family: 'homa';
	font-size: 14px;
}
.login-box form{
	width: 90%;
	padding: 40px 30px;
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	column-gap: 10px;
	grid-gap: 30px;
	background-color: var(--white);
}
.login-box form input{
	width: 90%;
	padding: 20px 25px;
	border:none;
	border-radius: 10px 10px 10px 10px;
background: -webkit-linear-gradient(top right, #ffffff, #dbd9d9);
background: -o-linear-gradient(top right, #ffffff, #dbd9d9);
background: linear-gradient(to bottom left, #ffffff, #dbd9d9);
box-shadow:  -17px 17px 20px #c0bebe,
             17px -17px 20px #ffffff;
	font-family: 'homa';
	font-size: 14px;
}
.message{
	position: absolute;
						top:calc(50% - 125px);
						left: calc(50% - 175px);
						display: flex;
						align-items: center;
						justify-content: center;
						grid-gap: 10px;
						height: 250px;
						width: 350px;
						padding: 20px;
						border-radius: 10px;background-color: var(--white);
						flex-direction: column;
		border-radius: 10px 10px 10px 10px;
background: -webkit-linear-gradient(top right, #ffffff, #dbd9d9);
background: -o-linear-gradient(top right, #ffffff, #dbd9d9);
background: linear-gradient(to bottom left, #ffffff, #dbd9d9);
box-shadow:  -17px 17px 20px #c0bebe,
             17px -17px 20px #ffffff;
}





.weblog{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin-top: 20px;
}
.weblog-head{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.weblogs {
	max-width: 90%;
	display: flex;
	align-items: center;
	justify-content: flex-start; /* تا باکس‌ها از سمت چپ شروع شوند */
	overflow-x: auto; /* بهتر است auto بزنید */
	grid-gap: 10px;
	height: auto;
}

.weblog-box {
	flex: 0 0 300px; /* عرض ثابت و بدون کوچک‌شدن */
	width: 300px; /* عرض ثابت */
	max-width: 300px; /* عرض حداکثر */
	margin-right: 10px; /* فاصله بین باکس‌ها */
	background: var(--white);
	border: 1px solid var(--black);
	color: var(--black);
	border-radius: 15px;
	text-align: center;
	grid-gap: 10px;
	padding-bottom: 10px;
}


.weblog-box img{
	width: calc(100% - 4px);
	margin-top: 2px;
	max-height: 300px;
	border-radius: 10px 10px 0 0;
	background: var(--white);
	color: var(--black);
}
.weblog-box h3{
	font-size: 15px;
	font-weight: 300;
}
/* ========================================================== طراحی موبایل ================================================================== */

.fulcontiner{
				width: 90%;
				margin-right: 5%;
				display: flex;
				flex-direction: column;
				grid-gap: 10px;
				align-items: flex-start;
				justify-content: center;
				
			}
			.ful1{
				width: 100%;
				display: flex;
				align-items: flex-start;
				padding: 5px;
				justify-content: flex-start;
				flex-wrap: wrap;
			}
			.product-fillter{
				width: 17%;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				grid-gap: 10px;
				background-color: var(--white);
				padding: 10px;
				border-radius: 8px;
			}
			.product-fillter form{
				width: 100%;
				
			}
			.fillter-head{
				font-size: 18px;
				font-weight: 600;
				width: 100%;
			}
			.fillter-name{
				font-size: 18px;
				font-weight: 600;
				width: 100%;
			}
			.input-fillter{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex-wrap: wrap;
				grid-gap: 5px;
			}
			.input-fillter select{
				font-size: 15px;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex-wrap: wrap;
				padding: 5px;
				background: var(--blue);
				color:var(--white);
				border: none;
				font-family: "homa";
				border-radius: 8px;
			}
			.input-fillter input{
				font-size: 15px;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex-wrap: wrap;
				padding: 5px;
				background: var(--blue);
				color:var(--white);
				border: none;
				font-family: "homa";
				border-radius: 8px;
			}
			.input-fillter input::placeholder{
	color: var(--white);
}
			.product-boxs{
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex-wrap: wrap;
				width: 82%;
				margin-right: 1%;
				grid-gap: 8px;
				
			}
			.my-product{
				background-color: var(--white);
				width: calc((100% - 32px) / 5);
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: flex-start;
				border-radius: 8px;
				padding: 5px;
				grid-gap: 5px;
				padding-bottom: 10px;
			}
			.img-my-product{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				aspect-ratio: 1 / 1; /* نسبت تصویر مربع */
				overflow: hidden;
				border-radius: 8px;
			}
			.img-my-product img {
				width: 100%;
				height: 100%;
				object-fit: cover; /* عکس را طوری برش می‌دهد که فضای مربع پر شود */
				border-radius: 8px;
				display: block;
			}
			.name-my-product{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				
			}
			.name-my-product h2{
				font-size: 17px;
				font-weight: 400;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.offer-my-product{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.offer-my-product > p{
				width: 50%;
				font-size: 14px;
				font-weight: 300;
				padding: 3px 4px;
				color: var(--gray);
			}
			.offer-price{
				width:50%;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				grid-gap: 5px;
			}
			.percent{
				font-size: 14px;
				font-weight: 300;
				padding: 3px 4px;
				color: var(--white);
				border-radius: 4px;
				background-color: var(--red);
			}
			.real-price{
				font-size: 14px;
				font-weight: 300;
				padding: 3px 4px;
				color: var(--gray);
				
			}
			.price-btn-myproduct{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.price-btn-myproduct a{
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: var(--white);
				background-color: var(--red);
				padding: 5px 8px;
				border-radius: 4px;
			}
			.price-btn-myproduct p{
				font-size: 14px;
				font-weight: 300;
				padding: 3px 4px;
				color: var(--black);
			}
			.text-price{
				font-size: 14px;
				font-weight: 400;
				padding: 3px 4px;
				color: var(--black);
			}
@media (max-width: 1500px) {
	
	.fulcontiner{
				width: 90%;
				margin-right: 5%;
				display: flex;
				flex-direction: column;
				grid-gap: 10px;
				align-items: flex-start;
				justify-content: center;
				
			}
			.ful1{
				width: 100%;
				display: flex;
				align-items: flex-start;
				padding: 5px;
				justify-content: flex-start;
				flex-wrap: wrap;
			}
			.product-fillter{
				width: 17%;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				grid-gap: 10px;
				background-color: var(--white);
				padding: 5px;
				border-radius: 8px;
			}
			.fillter-head{
				font-size: 18px;
				font-weight: 600;
				width: 100%;
			}
			.fillter-name{
				font-size: 18px;
				font-weight: 600;
				width: 100%;
			}
			.input-fillter{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex-wrap: wrap;
				grid-gap: 5px;
			}
			.input-fillter select{
				font-size: 15px;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex-wrap: wrap;
				padding: 5px;
				background: var(--blue);
				color:var(--white);
				border: none;
				font-family: "homa";
				border-radius: 8px;
			}
			.input-fillter input{
				font-size: 15px;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex-wrap: wrap;
				padding: 5px;
				background: var(--blue);
				color:var(--white);
				border: none;
				font-family: "homa";
				border-radius: 8px;
			}
			.input-fillter input::placeholder{
	color: var(--white);
}
			.product-boxs{
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex-wrap: wrap;
				width: 82%;
				margin-right: 1%;
				grid-gap: 8px;
				
			}
			.my-product{
				background-color: var(--white);
				width: calc((100% - 24px) / 4);
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: flex-start;
				border-radius: 8px;
				padding: 5px;
				grid-gap: 5px;
				padding-bottom: 10px;
			}
			.img-my-product{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				aspect-ratio: 1 / 1; /* نسبت تصویر مربع */
				overflow: hidden;
				border-radius: 8px;
			}
			.img-my-product img {
				width: 100%;
				height: 100%;
				object-fit: cover; /* عکس را طوری برش می‌دهد که فضای مربع پر شود */
				border-radius: 8px;
				display: block;
			}
			.name-my-product{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				
			}
			.name-my-product h2{
				font-size: 17px;
				font-weight: 400;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.offer-my-product{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.offer-my-product > p{
				width: 50%;
				font-size: 14px;
				font-weight: 300;
				padding: 3px 4px;
				color: var(--gray);
			}
			.offer-price{
				width:50%;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				grid-gap: 5px;
			}
			.percent{
				font-size: 14px;
				font-weight: 300;
				padding: 3px 4px;
				color: var(--white);
				border-radius: 4px;
				background-color: var(--red);
			}
			.real-price{
				font-size: 14px;
				font-weight: 300;
				padding: 3px 4px;
				color: var(--gray);
				
			}
			.price-btn-myproduct{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.price-btn-myproduct a{
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: var(--white);
				background-color: var(--red);
				padding: 5px 8px;
				border-radius: 4px;
			}
			.price-btn-myproduct p{
				font-size: 14px;
				font-weight: 300;
				padding: 3px 4px;
				color: var(--black);
			}
			.text-price{
				font-size: 14px;
				font-weight: 400;
				padding: 3px 4px;
				color: var(--black);
			}
}



@media (max-width: 1300px) {
	
	.fulcontiner{
				width: 95%;
				margin-right: 2.5%;
				display: flex;
				flex-direction: column;
				grid-gap: 10px;
				align-items: flex-start;
				justify-content: center;
				
			}
			.ful1{
				width: 100%;
				display: flex;
				align-items: flex-start;
				padding: 5px;
				justify-content: flex-start;
				flex-wrap: wrap;
			}
			.product-fillter{
				width: 22%;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				grid-gap: 10px;
				background-color: var(--white);
				padding: 5px;
				border-radius: 8px;
			}
			.fillter-head{
				font-size: 18px;
				font-weight: 600;
				width: 100%;
			}
			.fillter-name{
				font-size: 18px;
				font-weight: 600;
				width: 100%;
			}
			.input-fillter{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex-wrap: wrap;
				grid-gap: 5px;
			}
			.input-fillter select{
				font-size: 15px;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex-wrap: wrap;
				padding: 5px;
				background: var(--blue);
				color:var(--white);
				border: none;
				font-family: "homa";
				border-radius: 8px;
			}
			.input-fillter input{
				font-size: 15px;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex-wrap: wrap;
				padding: 5px;
				background: var(--blue);
				color:var(--white);
				border: none;
				font-family: "homa";
				border-radius: 8px;
			}
			.input-fillter input::placeholder{
	color: var(--white);
}
			.product-boxs{
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex-wrap: wrap;
				width: 77%;
				margin-right: 1%;
				grid-gap: 8px;
				
			}
			.my-product{
				background-color: var(--white);
				width: calc((100% - 16px) / 3);
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: flex-start;
				border-radius: 8px;
				padding: 5px;
				grid-gap: 5px;
				padding-bottom: 10px;
			}
			.img-my-product{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				aspect-ratio: 1 / 1; /* نسبت تصویر مربع */
				overflow: hidden;
				border-radius: 8px;
			}
			.img-my-product img {
				width: 100%;
				height: 100%;
				object-fit: cover; /* عکس را طوری برش می‌دهد که فضای مربع پر شود */
				border-radius: 8px;
				display: block;
			}
			.name-my-product{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				
			}
			.name-my-product h2{
				font-size: 17px;
				font-weight: 400;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.offer-my-product{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.offer-my-product > p{
				width: 50%;
				font-size: 14px;
				font-weight: 300;
				padding: 3px 4px;
				color: var(--gray);
			}
			.offer-price{
				width:50%;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				grid-gap: 5px;
			}
			.percent{
				font-size: 14px;
				font-weight: 300;
				padding: 3px 4px;
				color: var(--white);
				border-radius: 4px;
				background-color: var(--red);
			}
			.real-price{
				font-size: 14px;
				font-weight: 300;
				padding: 3px 4px;
				color: var(--gray);
				
			}
			.price-btn-myproduct{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.price-btn-myproduct a{
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: var(--white);
				background-color: var(--red);
				padding: 5px 8px;
				border-radius: 4px;
			}
			.price-btn-myproduct p{
				font-size: 14px;
				font-weight: 300;
				padding: 3px 4px;
				color: var(--black);
			}
			.text-price{
				font-size: 14px;
				font-weight: 400;
				padding: 3px 4px;
				color: var(--black);
			}
}
.mobile{
		display: none;
	}
/* ========================================================== طراحی موبایل ================================================================== */
@media (max-width: 938px) {
	.mobile{
		display: flex;
	}
	.fulcontiner{
				width: 95%;
				margin-right: 2.5%;
				display: flex;
				flex-direction: column;
				grid-gap: 10px;
				align-items: flex-start;
				justify-content: center;
				
			}
			.ful1{
				width: 100%;
				display: flex;
				align-items: flex-start;
				padding: 5px;
				justify-content: flex-start;
				flex-wrap: wrap;
			}
			.product-fillter{
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				grid-gap: 10px;
				background-color: var(--white);
				padding: 5px;
				border-radius: 8px;
			}
			.fillter-head{
				font-size: 18px;
				font-weight: 600;
				width: 100%;
			}
			.fillter-name{
				font-size: 18px;
				font-weight: 600;
				width: 100%;
			}
			.input-fillter{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex-wrap: wrap;
				grid-gap: 5px;
			}
			.input-fillter select{
				font-size: 15px;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex-wrap: wrap;
				padding: 5px;
				background: var(--blue);
				color:var(--white);
				border: none;
				font-family: "homa";
				border-radius: 8px;
			}
			.input-fillter input{
				font-size: 15px;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex-wrap: wrap;
				padding: 5px;
				background: var(--blue);
				color:var(--white);
				border: none;
				font-family: "homa";
				border-radius: 8px;
			}
			.input-fillter input::placeholder{
	color: var(--white);
}
			.product-boxs{
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex-wrap: wrap;
				width: 100%;
				margin-right: 0%;
				margin-top: 10px;
				grid-gap: 8px;
				
			}
			.my-product{
				background-color: var(--white);
				width: calc((100% - 16px) / 3);
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: flex-start;
				border-radius: 8px;
				padding: 5px;
				grid-gap: 5px;
				padding-bottom: 10px;
			}
			.img-my-product{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				aspect-ratio: 1 / 1; /* نسبت تصویر مربع */
				overflow: hidden;
				border-radius: 8px;
			}
			.img-my-product img {
				width: 100%;
				height: 100%;
				object-fit: cover; /* عکس را طوری برش می‌دهد که فضای مربع پر شود */
				border-radius: 8px;
				display: block;
			}
			.name-my-product{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				
			}
			.name-my-product h2{
				font-size: 17px;
				font-weight: 400;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.offer-my-product{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.offer-my-product > p{
				width: 50%;
				font-size: 14px;
				font-weight: 300;
				padding: 3px 4px;
				color: var(--gray);
			}
			.offer-price{
				width:50%;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				grid-gap: 5px;
			}
			.percent{
				font-size: 14px;
				font-weight: 300;
				padding: 3px 4px;
				color: var(--white);
				border-radius: 4px;
				background-color: var(--red);
			}
			.real-price{
				font-size: 14px;
				font-weight: 300;
				padding: 3px 4px;
				color: var(--gray);
				
			}
			.price-btn-myproduct{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.price-btn-myproduct a{
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: var(--white);
				background-color: var(--red);
				padding: 5px 8px;
				border-radius: 4px;
			}
			.price-btn-myproduct p{
				font-size: 14px;
				font-weight: 300;
				padding: 3px 4px;
				color: var(--black);
			}
			.text-price{
				font-size: 14px;
				font-weight: 400;
				padding: 3px 4px;
				color: var(--black);
			}
	
	
	.weblogs {
	max-width: 98%;
	display: flex;
	align-items: center;
	justify-content: flex-start; /* تا باکس‌ها از سمت چپ شروع شوند */
	overflow-x: auto; /* بهتر است auto بزنید */
	grid-gap: 10px;
	height: auto;
}
	.login-con{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 100%;
	
}
	.login-container{
	width: 95%;
	display: flex;
	align-items:center;
	justify-content: center;
	flex-direction: column-reverse;
	padding: 10px;
	border-radius: 29px;
		grid-gap: 10px;
background: -webkit-linear-gradient(top right, #f0f0f0, #cacaca);
background: -o-linear-gradient(top right, #f0f0f0, #cacaca);
background: linear-gradient(to bottom left, #f0f0f0, #cacaca);
box-shadow:  -17px 17px 30px #b1b1b1,
             17px -17px 30px #ffffff;
}
.login-img{
	width: 100%;
	display: flex;
	align-items:center;
	justify-content: center;
}
.login-img img{
	width: 80%;
	border-radius: 20px;
}
.login-box{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	
}
.singup-box{
	width: 100%;
	display: none;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	}
.singup-box form{
	width: 98%;
	padding: 40px 30px;
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	column-gap: 10px;
	grid-gap: 30px;
	background-color: var(--white);
}
.singup-box form input{
	width: 90%;
	padding: 20px 25px;
	border:none;
	border-radius: 10px 10px 10px 10px;
background: -webkit-linear-gradient(top right, #ffffff, #dbd9d9);
background: -o-linear-gradient(top right, #ffffff, #dbd9d9);
background: linear-gradient(to bottom left, #ffffff, #dbd9d9);
box-shadow:  -17px 17px 20px #c0bebe,
             17px -17px 20px #ffffff;
	font-family: 'homa';
	font-size: 14px;
}
.login-box form{
	width: 98%;
	padding: 40px 30px;
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	column-gap: 10px;
	grid-gap: 30px;
	background-color: var(--white);
}
.login-box form input{
	width: 90%;
	padding: 20px 25px;
	border:none;
	border-radius: 10px 10px 10px 10px;
background: -webkit-linear-gradient(top right, #ffffff, #dbd9d9);
background: -o-linear-gradient(top right, #ffffff, #dbd9d9);
background: linear-gradient(to bottom left, #ffffff, #dbd9d9);
box-shadow:  -17px 17px 20px #c0bebe,
             17px -17px 20px #ffffff;
	font-family: 'homa';
	font-size: 14px;
}
.message{
	position: absolute;
						top:calc(50% - 125px);
						left: calc(50% - 175px);
						display: flex;
						align-items: center;
						justify-content: center;
						grid-gap: 10px;
						height: 250px;
						width: 350px;
						padding: 20px;
						border-radius: 10px;background-color: var(--white);
						flex-direction: column;
		border-radius: 10px 10px 10px 10px;
background: -webkit-linear-gradient(top right, #ffffff, #dbd9d9);
background: -o-linear-gradient(top right, #ffffff, #dbd9d9);
background: linear-gradient(to bottom left, #ffffff, #dbd9d9);
box-shadow:  -17px 17px 20px #c0bebe,
             17px -17px 20px #ffffff;
}
	.product-mortabet{
	width: 100%;
	margin-right: 0%;
	border-radius: 0px;
	background-color: var(--blue);
	display: flex;
	align-items:center;
	justify-content: center;
	flex-direction: column;
	padding: 5px 10px;
	margin-top: 20px;
}
.pro-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	
}
.pro-head p{
	color: var(--white);
	font-size: 20px;
}
.pro-head a{
	color: var(--white);
	font-size: 18px;
}
.pro-box-s{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	grid-gap: 8px;
	overflow-x: scroll;
}
	#img{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	grid-gap: 8px;
	border-radius: 5px;
}
	body{
		padding-top: 110px;
	}
	.header-box{
	width: 96%;
	border-radius: 8px;
	height: 50px;
	margin-top: 5px;
}
.header-right{
	width: 50%;
	height: 100%;
	padding-right: 15px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	grid-gap: 15px;
}
.logo-box{
	widows: 50px;
	height: 50px;
}
.logo-box img{
	width: 45px;
	height: 45px;
	
}
	.user-box{
	min-width: 40px;
	height: 40px;
	border-radius: 5px;
	grid-gap: 5px;
}
.user-box p{
	font-size: 15px;
}
.user-box:hover{
	min-width: 140px;
	padding: 0 10px;
	cursor: pointer;
}
.user-box:hover p{
	font-family: 'homa';
	display: block;
	font-size: 14px;
	
	color: var(--white);
	cursor: pointer;
}
.user-box img{
	width: 32px;
	height: 32px;
}
.call-box{
	padding: 0 10px;
	height: 40px;
	border-radius: 4px;
	border: 1.5px solid var(--blue);
	display: flex;
	align-items: center;
	justify-content: center;
	grid-gap: 10px;
	background-color: var(--white);
	transition:  0.2s ease-in-out; /* انیمیشن تغییر شفافیت */
	cursor: pointer;
}
.call-box:hover{
	background-color: var(--blue);
}
.call-box:hover img{
	content: url('../image/Calling white.svg');
}
.call-box:hover p{
	color: var(--white);
}
.call-box p{
	font-family: 'homa';
	font-size: 17px;
	
	color: var(--blue);
	cursor: pointer;
}
.call-box img{
	width: 32px;
	height: 32px;
}
	
	.mobile-navbar{
		display: flex;
		align-items: center;justify-content: space-between;
		width: 96%;
		margin-top:10px;
		padding: 0 5px;
	}
	
	.mobile-hamber{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		background-color: var(--blue);
		border-radius: 4px;
	}
	.mobile-hamber img{
		width: 32px;
		height: 32px;
	}
	.search-box{
	align-items: center;
	justify-content: center;
	width: calc(100% - 40px);
		
}
.search-input{
	width: calc(100% - 50px);
	height: 40px;
	border: none;
	padding: 5px 10px 5px 10px;
	background-color: var(--blue);
	color: var(--white);
	font-size: 15px;
	font-family: 'homa';
	border-radius: 0px 7px 7px 0px;
}
.search-input::placeholder{
	color: var(--white);
}

.search-icon{
	width: 40px;
	height: 40px;
	border: none;
	background-color: var(--blue);
	border-radius: 7px 0px 0px 7px;
	display: flex;align-items: center;
	justify-content: center;
}
.search-icon img{
	width: 32px;
	height: 32px;
}
	.menu-ul ul{
	display: flex; 
		flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	grid-gap: 10px;
		padding: 0 10px;
}
.menu-ul ul li{
	
	display: flex; 
	justify-content: center;
	align-items: center;
	grid-gap: 15px;
	padding: 8px 15px;
	background-color: var(--blue);
	border-radius: 5px;
	color: var(--white);
	cursor: pointer;
	transition:  0.2s ease-in-out; /* انیمیشن تغییر شفافیت */
}
.menu-ul ul li:hover{
	background-color: var(--dark-blue);
	padding: 8px 30px;

}
.menu-ul ul li a{
	display: flex; 
	justify-content: center;
	align-items: center;
	color: var(--white);
	cursor: pointer; 
	grid-gap: 10px;
}
.menu-ul ul:nth-child(1) li:nth-child(1) {
	 background: linear-gradient(90deg, rgba(131, 58, 180, 1), rgba(253, 29, 29, 1), rgba(252, 176, 69, 1));
  background-size: 200% 100%;
  background-position: 0% 50%;
	
}
.menu-ul ul:nth-child(1) li:nth-child(1):hover {
	
	animation: moveGradient 1s linear infinite;
}
	.footer-menu{
		width: 100%;
		height: 60px;
		background-color: var(--white);
		display: flex;align-items: center;
		justify-content: space-around;
	}
	.slider-box{
      position: relative;
      width: 100%;
	 
	 margin-top: 20px;
    }



    .swiper {
      width: 96%;
      height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
    }

    .swiper-slide {
     width: 100%;
		
		padding: 0 20px;
		background: linear-gradient(90deg,rgba(26, 92, 184, 1) 0%, rgba(131, 131, 222, 1) 35%, rgba(0, 142, 237, 1) 70%, rgba(26, 92, 184, 1) 100%);
		border-radius: 10px;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-size: 500% 200%;
  		background-position: 0% 50%;
		position: relative;
		
    }

.swiper-slide:hover {
		animation: slideGradient 5s linear infinite;
    }


.corner {
  width: 200px;
  height: 100px;
  background-color: var(--backgrund);
  border-radius: 10px;
  position: absolute;
}
	.corner-top-left {
  top: -50px;
  left: -100px;
		display: flex;
		align-items: flex-end;
		justify-content: flex-start;
		padding: 0 15px 15px 0;
}
	.corner-top-left p{
  		font-size: 14px;
		text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
		color: var(--blue);
}

.corner-bottom-right {
  bottom: -50px;
  right: -100px;
	display: flex;
		align-items: flex-start;
		justify-content: flex-end;
	padding: 15px 0 0 20px;
}
.corner-bottom-right p{
  font-size: 14px;
		text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
	color: var(--blue);
}
.slider-img{
	width: 300px;
	height: 300px;
	position: absolute;
	top: 10px;
	background-position: center;
	background-size: auto;
	
}
.slider-img img{
	width: 100%;
	height: 100%;
}
.slider-img2{
	position: absolute;
	top: 310px;
	width: 80%;
	display: flex;align-items: center;
	justify-content: space-between;
	flex-direction: column;
}
.slider-img2 img{
	width: 100%;
	
}
.slider-img2 p{
	font-size: 17px;
	margin-top: 10px;
	color: var(--white);transition:  0.2s ease-in-out; /* انیمیشن تغییر شفافیت */
	cursor: pointer;
}
.slider-img2 p:hover{
	color: linear-gradient(90deg, rgba(131, 58, 180, 1), rgba(253, 29, 29, 1), rgba(252, 176, 69, 1));
}

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
.item-box{
	display: flex;align-items: center;justify-content: center;grid-gap: 5px;width: 100%;margin: 0;margin-bottom: 5px;	
}
.item-box a{
	display: flex;align-items: center;justify-content: center;width: 100%;
	padding: 4px 8px;background-color: var(--white);border-radius: 4px;font-size: 12px;transition:  0.2s ease-in-out; /* انیمیشن تغییر شفافیت */
}
.item-box a:hover{
	color: var(--white);
	background: linear-gradient(90deg, rgba(131, 58, 180, 1), rgba(253, 29, 29, 1), rgba(252, 176, 69, 1));
	
}
	.offer-box{
		flex-direction: column;
		width: 100%;border-radius: 0;
		margin-right: 0;
		padding: 5px 5px;
	}
	.offer-img-mobile{
		width: 100%;
		display: flex;align-items: center;justify-content: space-between;
		padding: 5px 10px;
	}
	.offer-name a{
		margin-top: 0;
	}
	.offer-name h2{
		margin-bottom: 0;
	}
	.offer-product{
		width: 100%;
	}
	.product{
	width: 178px;
	background: var(--white);
	border-radius: 7px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0;
}


.product-image{
	position: relative;
	
	background-position: center;
	background-size: cover;
	width: 176px;
	height: 176px;
	margin: 1px;
	border-radius: 6.5px;
	
}

.product-pay{
	position: absolute;
	top: 5px;
	right: 5px;
	background-color: var(--red);
	padding: 4px 8px;
	border-radius: 5px;
	opacity: 75%;height: 35px;
	display: flex;align-items: center;justify-content: center;
}
.product-pay p{
	opacity: 100%;
	font-size: 12px;
	color: var(--white);
	display: block;
	margin: 0 0 0;
	
}

.product-bookmark{
	position: absolute;
	top: 5px;
	left: 5px;
	background-color: var(--red);
	padding: 4px 4px;
	border-radius: 5px;
	opacity: 75%;
	display: flex;align-items: center;justify-content: center;
}
.product-call{
	position: absolute;
	bottom: 0px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 40px;
	padding: 0 2%;
	
}
.product-logo{
	width: 35px;
	height: 35px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	padding: 3px;
	margin-bottom: 5px;
}

.product-logo img{
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.product-number{
	display: flex;
	flex-direction: column;
	height: 40px;
	column-gap: 5px;
	grid-gap: 5px;
}
.product-number p{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	height: 15px;
	font-size: 12px;
	padding: 2px 5px 2px 5px;
	border-radius: 5px;
	margin: 0;
	width: auto;
}

.product-number p:nth-child(1){
	color: var(--red);
	background-color:  var(--white);
}
.product-number p:nth-child(2){
	color: var(--white);
	background-color:  var(--red);
}
.product-name{
	width: 100%;
	padding: 3px 3%;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	
}
.product-name h3{
	font-size: 15px;
	font-weight: 300;
	text-align: justify-all;
	margin: 0;
}
	.product-text {
  white-space: nowrap;        /* جلوگیری از رفتن به خط بعد */
  overflow: hidden;           /* مخفی کردن متن اضافی */
  text-overflow: ellipsis;    /* نمایش سه‌نقطه (...) در انتهای متن */
}
.product-qct{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0 3%;
	
}
.qct-right p{
	color: var(--black);
	font-size: 12px;
}
.qct-left{
	display: flex;align-items: center;
	justify-content: space-between;
	grid-gap: 5px;
}
.qct-left p{
	color: var(--black);
	font-size: 12px;
}
.qct-left img{
	width: 16px;
	height: 16px;	
}
.product-price{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0 3%;
	margin-bottom: 5px;
}
	.price-right a {
	display: flex;align-items: center;justify-content: center;
		width: 100%;
		padding: 3px 5px;;
}
.price-right a p{
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--red);
	width: 100%;
	color: var(--white);
	font-size: 12px;
}
.price-left .org-price{
	display: flex;
	align-items: center;justify-content: space-between;
	grid-gap: 5px;
}
.price-left .org-price p.offer-number{
	display: flex;
	align-items: center;justify-content: space-between;
	padding: 1px 3px;
	background-color: var(--red);
	color: var(--white);
	font-size: 13px;
	border-radius: 3px;
}
.price-left .org-price p{
	display: flex;
	align-items: center;justify-content: space-between;
	padding: 1px 5px;
	
	color: var(--blcak);
	font-size: 13px;
	border-radius: 5px;
}
.offer-price{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.offer-price-text{
	font-size: 15px;
	font-weight: 500;
	
}
	.catgoory{
	display: flex;
	align-items: center;justify-content: center;
	flex-direction: column;
	width: 100%;
margin-right: 0;
	margin-top: 10px;
}
.catgoory h2{
	font-size: 20px;
	font-weight: 400;
}
	.catgoory-by-mobile{
		display: flex;
		flex-wrap: wrap;
		align-items: center;justify-content: center;
		column-gap: 15px;
	}
.catgoory-box{
	width: 120px;
    padding: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	border-radius: 10px;
	transition: all  0.5s ease-in-out; /* انیمیشن تغییر شفافیت */
	grid-gap: 5px;
}
.catgoory-box:hover{
	background: linear-gradient(90deg,rgba(26, 92, 184, 1) 0%, rgba(131, 131, 222, 1) 35%, rgba(0, 142, 237, 1) 70%, rgba(26, 92, 184, 1) 100%);
		background-size: 500% 200%;
  		background-position: 0% 50%;
	animation: slideGradient 2s linear infinite; transition: all  0.5s ease-in-out; /* انیمیشن تغییر شفافیت */
}
.catgoory-box:hover p{
	color: var(--white);
}
.catgoory-box2{
	width: 150px;
    padding: 10px;
	display: flex;align-items: center;
	justify-content: center;
	flex-direction: column;
	border-radius: 10px;
	transition: all  0.5s ease-in-out; /* انیمیشن تغییر شفافیت */
	grid-gap: 10px;
}
.catgoory-box2:hover{
	background: linear-gradient(90deg,rgba(131, 58, 180, 1) 0%, rgba(196, 43, 100, 1) 27%, rgba(253, 29, 29, 1) 50%, rgba(253, 83, 44, 1) 68%, rgba(131, 58, 180, 1) 100%);
		background-size: 500% 200%;
  		background-position: 0% 50%;
	animation: slideGradient 2s linear infinite; transition: all  0.5s ease-in-out; /* انیمیشن تغییر شفافیت */
}
.catgoory-box2:hover p{
	color: var(--white);
}
.catgoory-box img{
	width: 100%;
    border-radius: 50%;
	display: flex;align-items: center;
	justify-content: center;
	flex-direction: column;
}
.catgoory-box2 img{
	width: 100%;
    border-radius: 50%;
	display: flex;align-items: center;
	justify-content: center;
	flex-direction: column;
}
	.dg-box{
	width: 100%;height: auto;margin-right: 0%;
	display: flex;align-items: center;justify-content: center;
	background-image: url("../image/file-LG9z6LCWxtNzAsazUZXvi8.png");
	background-position: right;
	background-size: contain;background-repeat: no-repeat;
	margin: 0;
		padding: 0;
}
.dg-container {
	
	width: 96%;margin: 0 0 0 ;
	background: linear-gradient(45deg, rgba(55, 134, 238, 0.3) 19%, rgba(55, 134, 238, 0.15) 81%);
	border-radius: 10px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(5px); /* برای ساپورت Safari */
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	padding: 10px 15px;
}
.dg-text{
	display: flex;align-items: flex-start;justify-content: center;
	flex-direction: column;grid-gap: 20px;
}
.dg-titr h1{
	color: var(--blue);
	font-weight: 400;
}

.dg-long-text p{
	font-size: 17px;
	color: var(--black);
}
	  .service-box {
    width: 100%;
    margin-bottom: 5px;
  }
	.baner-box{
	width: 100%;
	display: flex;
	align-items: center;justify-content: space-around;
	margin-top: 20px;flex-direction: column;
		grid-gap: 10px;
}
.baner{
	width: 98.5%;
	height: 290px;
	margin-right: 0%;
	border-radius: 10px;
	background: url("../image/Apr 19, 2025, 06_20_04 PM.png");
	background-position: center;
	background-size: cover;
	position: relative;
}
.baner-text{
	position: absolute;
	top: 20px;
	right: 40%;
	display: flex;
	align-items: center;justify-content: center;flex-direction: column;
	width: 60%;
}
.baner-text p{
	font-size: 18px;
	color: var(--white);
	font-weight: 500;
}
.baner-item{
	display: flex;align-items: center;justify-content: space-around;
	width: 100%;
	flex-wrap: wrap;
	grid-gap: 8px;
	margin-top: 10px;
}
.baner-item a{
	display: flex;align-items: center;justify-content: space-around;
	width: auto;	min-width: 30%;
	padding: 4px  10px;
	border-radius: 5px;
	background-color: var(--white);
	grid-gap: 5px;
	flex-wrap: wrap;
	
}
	.rahnama-text{
	width: 95%;
	display: flex;align-items: center;justify-content: flex-start;
	padding: 15px 15px;
	margin-right: 2.5%;
}

.rahnama-text p{
	font-size: 15px;
	font-weight: 400;
	color: var(--black);
	opacity: 60%;
}

.product-page{
	width: 98%;
	margin-right: 1%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;justify-content: space-between;
}
.product-filter{
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	column-gap: 10px;
	grid-gap: 10px;
	border-radius: 8px;
	background-color: var(--white);
	flex-direction: column;
	padding: 10px;margin-bottom: 10px;
}
.filter-head{
	width: 100%;
	margin-right: 0%;
	display: flex;
	overflow-x: scroll;	
	align-items: center;justify-content: space-between;
}
.filter-box{	
	width: 95%;
	margin-right: 2.5%;
	display: none;
	align-items: center;justify-content: space-between;
	padding: 10px 5px;
	border-bottom: 1px solid var(--black);
}
.product-container{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	column-gap: 10px;
	grid-gap: 10px;
	border-radius: 8px;
	background-color: var(--white);
	flex-direction: column;
	padding: 10px;
}
.product-head{
	width: 100%;
	padding: 10px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	grid-gap: 5px;
	overflow-x: scroll;	
}

.sort-item{
	display: flex;
	align-items: center;
	justify-content: space-between;
	grid-gap: 5px;
	padding: 5px 8px;
	background: var(--backgrund);
	border-radius: 4px;
}
.red{
	background: var(--red);
}
.red p{
	color: var(--white);
}
.product-boxs{
	width: 100%;
	padding: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	grid-gap: 5px;
	column-gap: 4px;
	border-radius: 5px;
	background-color: var(--backgrund);
}
	.detil{
	width: 98%;
	margin-right: 1%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
		flex-direction: column;
}

.detil-image{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}
.big-img{
	width: 100%;
	height: auto;
	display: flex;align-items: center;
	justify-content: center;
}
.big-img img{
	width: 100%;
	height: 100%;
	border-radius: 8px;
}
.other-img{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	grid-gap: 8px;
	height: 100px;
	margin-top: 10px;
	overflow-y: hidden;
	overflow-x: scroll;
}
.other-img img{
	width: 100px;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	grid-gap: 10px;
	border-radius: 5px;
	
}
.detil-text{
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-direction: column;
	padding: 10px 10px;
	width: 100%;
}
.detil-text h1{
	font-size: 22px;
	font-weight: 600;
}
.detil-adres{
	width: 100%;
	display: flex;align-items: center;
	justify-content: space-between;
	margin-top: 10px;
}
.detil-adres p{
	font-size: 15px;
	display: flex;align-items: center;
	justify-content: space-between;
	margin-top: 5px;
}

.detil-khat{
	height: 1px;
	min-width: 50%;
	background-color: var(--black);
}
.detil-btn{
	display: flex;align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	width: 100%;
	grid-gap: 5px;
}
.detail-score{
	display: flex;align-items: center;
	justify-content: flex-start;
	grid-gap: 8px;
	width: 100%;
}

.detil-btn a{
	min-width: 28%;
	font-size: 12px;
	display: flex;
	align-items: center;justify-content: space-around;
	padding: 5px 5px;
	border-radius: 50px;
	background-color: var(--white);
	transform: all .3s ease-in-out;
}
.detil-btn a p{
	color: var(--black);
}
.detil-btn a:hover{
	background-color: var(--blue);
}
.detil-btn a img{
	width: 20px;
	height: 20px;
}

.detil-low-text{
	display: flex;align-items: center;justify-content: center;
	width: 100%;
	margin-top: 10px;
	margin-bottom: 10px;
}

.fatures{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-around;
	grid-gap: 10px;
	column-gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}
.fature{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 5px 10px;
	grid-gap: 10px;
	column-gap: 10px;
background-color: var(--white);
	border-radius: 8px;
	min-width: 25%;
	margin-top: 10px;
}
.fature-btn{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin-top: 10px;
}

.fature-btn a{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 5px 15px;
	border-radius: 50px;
	background-color: var(--white);
	transform: all .3s ease-in-out;
}
.fature-btn a p{
	color: var(--black);
}
.fature-btn a:hover{
	background-color: var(--blue);
}
.fature-btn a img{
	width: 20px;
	height: 20px;
}

.fature-btn .detil-khat{
	height: 1px;
	min-width: 20%;
	background-color: var(--black);
}
.detil-price-box{
	width: 95%;
	margin-right: 2.5%;
	background-color: var(--white);
	height: auto;
	border-radius: 10px;
	-webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.75);
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	flex-direction: column;
	padding: 10px 15px;
}
.price-head{
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.price-shop-name{
	width: 100%;
	display: flex;align-items: center;justify-content: space-between;
}
.shop-name-logo{
	display: flex;
	align-items: center;justify-content: space-between;
	grid-gap: 15px;
}
.shop-name-logo img{
	display: flex;
	align-items: center;justify-content: space-between;
	width: 50px;
	height: 50px;
	border-radius: 5px;
}
.price-shop-name a{
	display: flex;align-items: center;justify-content: center;
	background-color: var(--white);
	-webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.75);
	padding: 6px 8px;
	border-radius: 5px;
	color: var(--gray);
}
.price-item{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	column-gap: 30px;
	grid-gap: 30px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.price-item-box{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	column-gap: 7px;
	-webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.5);
	border-radius: 5px;
	background: var(--white);
	min-width: 22%;
	padding: 5px 5px;
}
.price-item-box p{
	color: var(--green);
}
.price-item-box:nth-child(4) {
	-webkit-box-shadow: 0px 0px 12px 0px rgba(11,211,41,1);
-moz-box-shadow: 0px 0px 12px 0px rgba(11,211,41,1);
box-shadow: 0px 0px 12px 0px rgba(11,211,41,1);
	color: var(--green);
}
.price-item-box:nth-child(5) {
	-webkit-box-shadow: 0px 0px 12px 0px rgba(55,134,238,1);
-moz-box-shadow: 0px 0px 12px 0px rgba(55,134,238,1);
box-shadow: 0px 0px 12px 0px rgba(55,134,238,1);
	color: var(--blue);
}
.price-item-box:nth-child(5) p{

	color: var(--blue);
}

.price-item-box:nth-child(6) {
	-webkit-box-shadow: 0px 0px 12px 0px rgba(229,40,87,1);
-moz-box-shadow: 0px 0px 12px 0px rgba(229,40,87,1);
box-shadow: 0px 0px 12px 0px rgba(229,40,87,1);
	color: var(--blue);
}
.price-item-box:nth-child(6) p{

	color: var(--red);
}

.price-box-text{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	
}

.price-alarm{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	flex-direction: column;
	grid-gap: 5px;
}

.alarm-bazar{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 5px 8px;
	border-radius: 5px;
	background-color: var(--red);
}
.alarm-ghest{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 5px 8px;
	border-radius: 5px;
	background-color: var(--green);
}
.alarm-naghd{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 5px 8px;
	border-radius: 5px;
	background-color: var(--yelow);
	
}
.price-btn{
	width: 100%;
	padding: 0 5%;
	display: flex;
	align-items: center;
	justify-content: center;
	grid-gap: 8px;
	margin-top: 10px;
}
.price-btn a:nth-child(1){
	padding: 8px;
	border-radius: 4px;
	background-color: var(--blue);
	display: flex;
	align-items: center;
	justify-content: center;
}

.price-btn a:nth-child(2){
	padding: 8px 15px;
	border-radius: 4px;
	background-color: var(--red);
	display: flex;
	align-items: center;
	justify-content: center;
	grid-gap: 10px;
	color: var(--white);
	min-width: 80%;
}
.product-mortabet{
	width: 100%;
	margin-right: 0%;
	border-radius: 0px;
	background-color: var(--blue);
	display: flex;
	align-items:center;
	justify-content: center;
	flex-direction: column;
	padding: 5px 5px;
	margin-top: 20px;
}
.pro-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	
}
.pro-head p{
	color: var(--white);
	font-size: 20px;
}
.pro-head a{
	color: var(--white);
	font-size: 18px;
}
.pro-box-s{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	grid-gap: 8px;
	overflow-x: scroll;
}
#img{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	grid-gap: 8px;
	border-radius: 5px;
}
.product-reviwe{
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-direction: column;
	width: 100%;
	margin-right: 0%;
	margin-top: 20px;
}
.reviwe-text{
	width: 100%;
	display: flex;
	flex-direction:column;
	align-items: center;
	justify-content: center;
	padding: 5px 20px;
	margin-top: 20px;
}
.reviwe-head{
	display: flex;
	align-items: center;justify-content: flex-start;
	width: 100%;
	grid-gap: 10px;
	padding-bottom: 7px;
}
.reviwe-head a{
	padding: 5px 10px;
	color: var(--black);
}
.reviwe-head a:nth-child(1){
	padding: 5px 10px;
	color: var(--blue);
	border-bottom: 4px solid var(--blue);
}
.reviwe-box{
	display: flex;
	align-items: flex-start;justify-content: center;
	flex-direction: column;
	width: 100%;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--gray); 
}
	.reviwe-box p:last-child{
	max-width: 100%;
	
}
.reviwe-box p:nth-child(1){
	font-size: 18px;
	color: var(--blue);
}
.product-specs-wrapper {
  width: 100%;
  direction: rtl;
  background: var(--white);
  border-radius: 16px;
  padding: 20px;
  margin: auto;
  overflow: hidden;
}

.product-specs-wrapper h2 {
  color: var(--blue);
  font-size: 24px;
  margin-bottom: 10px;
}

.product-specs {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, padding 0.3s ease;
}

.product-specs.expanded {
  max-height: 1000px;
  padding-top: 10px;
}

.spec-group {
  background: var(--white);
  padding: 10px 15px;
  margin: 10px 0;
  border-right: 4px solid #2196f3;
  border-radius: 8px;
}

.spec-group h3 {
  color: var(--blue);
  margin-bottom: 6px;
}

.spec-group ul {
  padding: 0;
  list-style: none;
}

.spec-group li {
  margin-bottom: 6px;
  line-height: 1.8;
}

.toggle-btn {
  background: var(--blue);
  color: var(--white);
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 10px;
	font-family: 'homa';
}

.toggle-btn:hover {
  background-color: #1976d2;
}
.nazar-container{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-direction: column;
	width: 100%;
	grid-gap: 10px;
}
.sabt-nazar{
	display: flex;flex-direction: column;
	align-items: 
		flex-start;
	justify-content: center;
	width: 100%;
	border-radius: 8px;
	background-color: var(--white);
	padding: 10px 15px;
	column-gap: 10px;
}
.emtyaz{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	grid-gap: 10px;
}
.nazar-btn {
	color: var(--black);
	display: flex;align-items: center;
	justify-content: center;
	flex-direction: column;
	grid-gap: 10px;
	column-gap: 10px;
	width: 100%;
}
.nazar-btn p#s{
	color: var(--black);
	
}
.nazar-btn a{
	color: var(--red);
	padding: 10px 30px;
	border-radius: 8px; 
	border: 1px solid var(--red);
	min-width: 80%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.nzazrs{
	width: 100%;
	display: flex;align-items: center;justify-content:center;
	grid-gap: 10px;
	flex-direction: column;
	column-gap: 10px;
}

.nazar-box{
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-direction: column;
	padding: 10px 10px;
	border-radius: 8px; 
	background-color: var(--white);
}

.nazar-detile{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.nazar-detile p#name{
	color: var(--black);
}
.nazar-star{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	grid-gap: 10px;
}
#nazartext{
	color: var(--black);
}

	
	
	
	
.desktop{
		display: none;
	}
}


/* ========================================================== طراحی موبایل ================================================================== */
@media (max-width: 500px) {
	.fulcontiner{
				width: 98%;
				margin-right: 1%;
				display: flex;
				flex-direction: column;
				grid-gap: 10px;
				align-items: flex-start;
				justify-content: center;
				
			}
			.ful1{
				width: 100%;
				display: flex;
				align-items: flex-start;
				padding: 5px;
				justify-content: flex-start;
				flex-wrap: wrap;
			}
			.product-fillter{
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				grid-gap: 10px;
				background-color: var(--white);
				padding: 5px;
				border-radius: 8px;
			}
			.fillter-head{
				font-size: 16px;
				font-weight: 600;
				width: 100%;
			}
			.fillter-name{
				font-size: 16px;
				font-weight: 600;
				width: 100%;
			}
			.input-fillter{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex-wrap: wrap;
				grid-gap: 5px;
			}
			.input-fillter select{
				font-size: 13px;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex-wrap: wrap;
				padding: 5px;
				background: var(--blue);
				color:var(--white);
				border: none;
				font-family: "homa";
				border-radius: 8px;
				height: 35px;
			}
			.input-fillter input{
				
				font-size: 13px;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex-wrap: wrap;
				padding: 5px;
				background: var(--blue);
				color:var(--white);
				border: none;
				font-family: "homa";
				border-radius: 8px;
				height: 35px;
			}
			.input-fillter input::placeholder{
	color: var(--gray);
}
			.product-boxs{
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex-wrap: wrap;
				width: 100%;
				margin-right: 0%;
				margin-top: 10px;
				grid-gap: 5px;
				
			}
			.my-product{
				background-color: var(--white);
				width: calc((100% - 5px) / 2);
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: flex-start;
				border-radius: 8px;
				padding: 4px;
				grid-gap: 5px;
				padding-bottom: 10px;
			}
			.img-my-product{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				aspect-ratio: 1 / 1; /* نسبت تصویر مربع */
				overflow: hidden;
				border-radius: 8px;
			}
			.img-my-product img {
				width: 100%;
				height: 100%;
				object-fit: cover; /* عکس را طوری برش می‌دهد که فضای مربع پر شود */
				border-radius: 8px;
				display: block;
			}
			.name-my-product{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				
			}
			.name-my-product h2{
				font-size: 15px;
				font-weight: 400;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.offer-my-product{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.offer-my-product > p{
				width: 50%;
				font-size: 12px;
				font-weight: 300;
				padding: 3px 4px;
				color: var(--gray);
			}
			.offer-price{
				width:50%;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				grid-gap: 3px;
			}
			.percent{
				font-size: 12px;
				font-weight: 300;
				padding: 3px 4px;
				color: var(--white);
				border-radius: 4px;
				background-color: var(--red);
			}
			.real-price{
				font-size: 12px;
				font-weight: 300;
				padding: 3px 4px;
				color: var(--gray);
				
			}
			.price-btn-myproduct{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content:flex-end;
				grid-gap: 3px;
			}
			.price-btn-myproduct a{
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: var(--white);
				background-color: var(--red);
				padding: 5px 3px;
				border-radius: 4px;
				font-size: 11px;
			}
			.price-btn-myproduct p{
				font-size: 11px;
				font-weight: 300;
				padding: 3px 4px;
				color: var(--black);
			}
			.text-price{
				font-size: 12px;
				font-weight: 400;
				padding: 3px 4px;
				color: var(--black);
			}
	

}