/* این کد برای است که ما گزینه ها خدمات که داریم اندازه فونت ها رو از کم کردیم*/

.option-f .radioBtn ul li label {
    padding-right: 24px;
    right: -14px;
    font-size: 12px;
    padding: 0 0;
}
/* این کد برای است که ما گزینه ها خدمات که داریم اندازه فونت ها رو از کم کردیم*/


/* این کد برای است که ما گزینه ها خدمات که داریم فاصله فیلدهاشون رو از هم کم کردیم*/

.chap_col-12.option-f{
    margin-bottom: 10px;
    margin-top: 10px;
}

/* این کد برای است که ما گزینه ها خدمات که داریم فاصله فیلدهاشون رو از هم کم کردیم

.highlight .richTextBox{display:none;}

*/

/* این کد برای استیال دهی به جدا کننده خطوط به کار رفته*/
.joda-konande-satrha .centered-text {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px; /* فاصله بین خطوط و متن */
      position: relative;
    white-space: nowrap;
    }
.joda-konande-satrha .line {
      width: 200px; /* طول اولیه خطوط */
      height: 2px;
      background-color: rgb(56, 185, 84);
      transition: width 0.3s, background-color 0.3s; /* انیمیشن تغییر طول و رنگ */
    }
.joda-konande-satrha .text {
  font-size: 18px;
  color: #feb954;
  font-weight: bold;
  transition: color 0.3s; /* انیمیشن تغییر رنگ متن */
}

/* تنظیم فونت برای صفحه‌های کوچک‌تر از 600 پیکسل */
@media (max-width: 768px) {
  .joda-konande-satrha .text {
    font-size: 14px; /* اندازه فونت کوچکتر */
  }
}
    /* افکت هاور برای کل گروه */
.joda-konande-satrha .centered-text:hover .line {
      width: 250px; /* طول جدید هنگام هاور (50 پیکسل بزرگ‌تر) */
      background-color: #ffb952; /* رنگ جدید هنگام هاور */
    }

.joda-konande-satrha .centered-text:hover .text {
      color: #38b954; /* رنگ متن در هنگام هاور */
    }
/* این کد برای استیال دهی به جدا کننده خطوط به کار رفته*/


/*این برای قسمت ویژگی و مزایای جدولی است مه درست کردیم تا هاور کنهB */	
	
/* استایل برای هر span که شامل سطرهای متن است */
.kelas-stail-jadval-vijegiha .richTextBox span {
  
	    display: flex; /* هر span را به صورت یک بلوک جداگانه نمایش می‌دهد */
  }

.kelas-stail-jadval-vijegiha .richTextBox br {
	display:none;
	}
	
	/* تنظیم ارتفاع صفر برای تگ‌های <br> */
.kelas-stail-jadval-vijegiha .richTextBox strong br {
       display: none !important; /* اگر نیازی به نمایش آن نیست */
	margin:0 !impotant;
		line-height:0 !impotant;
}
/* استایل هاور برای هر سطر */
.kelas-stail-jadval-vijegiha .richTextBox span:hover {
    border: 1px solid #ff6600; /* حاشیه نارنجی */
    border-radius: 15px; /* گوشه‌های گرد */
	background-color: #ffffff;
    border: 1px solid #ff6600;
    border-radius: 15px;
    padding-right: 10px;
    padding-left: 5px;
}


	/*  این قسمت وقتی به کار میره که بخایم در حالت موبایل ریسچانسیو کنیم
.salam{
	@media (max-width: 768px) {
    .rectangle {
        width: 90%;
        font-size: 3vw;
        height: 45px;
    }
}
	}
/*این برای قسمت ویژگی و مزایای جدولی است مه درست کردیم تا هاور کنهB */	



/*     display: grid;         gap: 10px;     

این جایی به درد میخورد که وقتی دوتا دکمه دارد میخایم روی هم باشه و با کوچک شده صفحه کوچک میشن 

که خیلی تنظیم خوبی برای روی هم افتادن دکمه ها هست 

*/




/*
/*این برای قسمت منوی تب بندی است */	
/* این برای قسمت منوی تب‌بندی است */
.menu-tab-bandi .my-tabs {
  display: flex;
}

.menu-tab-bandi .my-tabs button {
  padding: 10px 11px;
  background-color: #e8e3e3;
  cursor: pointer;
  font-size: 14px;
  border-radius: 25px 25px 0 0;
  border: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.menu-tab-bandi .my-tabs button.active {
  background-color: rgb(254, 185, 84);
  color: white;
}

.menu-tab-bandi .tab-content {
  display: none;
  padding: 30px 15px;
  font-size: small;
  line-height: 2;
  background: #ffbfbf;
  border: 3px solid #d9d9d9;
  box-shadow: 0 0 10px 0 rgba(68, 68, 68, .1);
}

.menu-tab-bandi .tab-content.active {
  display: block;
  margin: 0;
  padding: 15px !important;
}

.menu-tab-bandi .my-tabs button:focus {
  outline: none; /* حذف کادر مشکی هنگام فوکوس */
}

/* تنظیمات برای لیست‌های داخل تب‌ها */
.menu-tab-bandi .tab-content ul {
  font-size: 12px; /* اندازه پیش‌فرض */
  padding-right: 10px;
}

.menu-tab-bandi .tab-content ul li {
  list-style: none;
  position: relative;
  padding-right: 20px;
}

/* ایجاد دایره کنار هر آیتم لیست */
.menu-tab-bandi .tab-content ul li::before {
  content: "";
  width: 10px;
  height: 10px;
  background-color: rgb(9, 185, 84);
  border-radius: 50%;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* استایل کلی برای H3 داخل دکمه‌ها */
.menu-tab-bandi .my-tabs button h3 {
  font-size: 1em;
  margin: 0;
  font-weight: bold;
}
.menu-tab-bandi .tab-content.active h5 {
  font-size: 14px;
  text-align: justify; 
  line-height: 1.9;
}
.menu-tab-bandi .my-tabs h4 {
	font-size:12px;
    margin-bottom: 0px;
}

/* استایل کلی برای H4 داخل لیست‌ها */

.menu-tab-bandi .tab-content ul li h4 {
  font-size: 0.6em !important; /* اندازه فونت کوچکتر */
  margin: 0;
}

/* تغییر اندازه فونت در موبایل */
@media (max-width: 768px) {
  .menu-tab-bandi .my-tabs button h3,
  .menu-tab-bandi .tab-content ul li h4 {
    font-size: 1em !important;
  }
}

.menu-tab-bandi .tab-content > .main-header {
        font-size: 1em !important;
    margin: -15px -15px 0px -15px;
    color: #000000;
    background-color: #feb954;
    padding: 9px;
    text-align: center;
    border-radius: -11px;
    border: 2px solid #ffffff;
}

  /* سایر استایل‌های دلخواه */
/*این برای قسمت منوی تب بندی است */	















/*این برای قسمت منوی تب بندی مدل ب است */	
.menu-tab-bandi-model-b .my-tabs {
  display: flex;
}

.menu-tab-bandi-model-b .my-tabs button {
  padding: 10px 11px;
  background-color: #f9f1c3;
  cursor: pointer;
  font-size: 14px;
  border-radius: 25px 25px 0 0;
  border: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.menu-tab-bandi-model-b .my-tabs button.active {
  background-color:rgb(254,185, 84);
  color: white;
}

.menu-tab-bandi-model-b .tab-content {
  display: none;
  padding: 15px;
  font-size: small;
  line-height: 2;
      background: #ffbfbf;
    border: 3px solid #d9d9d9;
    padding: 30px 15px;
    box-shadow: 0 0 10px 0 rgba(68, 68, 68, .1);

}


.menu-tab-bandi-model-b .tab-content.active {
  display: block;
  margin: 0px 0px;
  padding : 15px 15px !important;
}


.menu-tab-bandi-model-b .my-tabs button:focus {
  outline: none; /* حذف کادر مشکی هنگام فوکوس */
}

/* تنظیمات برای لیست‌های داخل تب‌ها */
.menu-tab-bandi-model-b .tab-content.active ul {
  font-size: 11px; /* اندازه فونت */
  padding-right: 10px; /* پدینگ از سمت راست */
}

/* بهینه‌سازی کد: استفاده از انتخاب‌گرهای خاص برای هر تب */
.menu-tab-bandi-model-b .tab-content#tab1 ul,
.menu-tab-bandi-model-b .tab-content#tab2 ul {
  font-size: 12px;
  padding-right: 0px;
}

.menu-tab-bandi-model-b .tab-content ul li {
  list-style: none; /* حذف دایره پیش‌فرض */
  position: relative; /* برای موقعیت‌دهی دایره سفارشی */
  padding-right: 15px; /* فضای خالی برای دایره */
}

.menu-tab-bandi-model-b .tab-content ul li::before {
  content: ""; /* ایجاد یک دایره جدید */
  width: 10px; /* قطر دایره */
  height: 10px; /* قطر دایره */
  background-color: rgb(9, 185, 84); /* رنگ پس‌زمینه دایره */
  border-radius: 50%; /* دایره کردن شکل */
  position: absolute; /* موقعیت‌دهی مطلق */
  right: 0; /* قرارگیری در سمت چپ */
  top: 50%; /* قرارگیری وسط از بالا */
  transform: translateY(-50%); /* تراز کردن وسط */
}
/*این برای قسمت منوی تب بندی مدل ب است */	


























.box-cycle-tg img {
    border-radius: 50%; 
    padding: 7px;
    width: 95px;
    margin: 10px auto;
}





























/*این برای قسمت منوی تب بندی مشخصات و ویژگی هاست */	
.menu-tab-band-moshakhasat-vizeghi .my-tabs {
display: flex;
    gap: 20px;
      justify-content: center;
}

.menu-tab-band-moshakhasat-vizeghi .my-tabs button {
  padding: 10px 11px;
  background-color: rgb(232 227 227);
  cursor: pointer;
  font-size: 0.8EM;
  border-radius: 15px 15px 15px 15px;
  border: none;
  transition: background-color 0.3s ease, color 0.3s ease;
  text-align:center;
width:50%;
}

.menu-tab-band-moshakhasat-vizeghi .my-tabs button.active {
  background-color: rgb(53 52 199);
  color: white;
}

.menu-tab-band-moshakhasat-vizeghi .tab-content {
  display: none;
  padding: 15px;
  font-size: small;
  line-height: 2;
  margin-top: -3.5px;
  min-height: AUTO;
}

.menu-tab-band-moshakhasat-vizeghi .tab-content.active {
  display: block;
  margin: 0px 0px;
  padding : 15px 15px !important;
}


.menu-tab-band-moshakhasat-vizeghi .my-tabs button:focus {
  outline: none; /* حذف کادر مشکی هنگام فوکوس */
}

/* تنظیمات برای لیست‌های داخل تب‌ها */
.menu-tab-band-moshakhasat-vizeghi .tab-content.active ul {
  font-size: 11px; /* اندازه فونت */
  padding-right: 10px; /* پدینگ از سمت راست */
}

/* بهینه‌سازی کد: استفاده از انتخاب‌گرهای خاص برای هر تب */
.menu-tab-band-moshakhasat-vizeghi.tab-content#tab1 ul,
.menu-tab-band-moshakhasat-vizeghi .tab-content#tab2 ul {
  font-size: 11px;
  padding-right: 0px;
}

.menu-tab-band-moshakhasat-vizeghi .tab-content ul li {
  list-style: none; /* حذف دایره پیش‌فرض */
  position: relative; /* برای موقعیت‌دهی دایره سفارشی */
  padding-right: 2em; /* فضای خالی برای دایره */
}

.menu-tab-band-moshakhasat-vizeghi .tab-content ul li::before {
  content: ""; /* ایجاد یک دایره جدید */
  width: 10px; /* قطر دایره */
  height: 10px; /* قطر دایره */
  background-color: rgb(9, 185, 84); /* رنگ پس‌زمینه دایره */
  border-radius: 50%; /* دایره کردن شکل */
  position: absolute; /* موقعیت‌دهی مطلق */
  right: -4em; /* قرارگیری در سمت چپ */
  transform: translateY(-50%); /* تراز کردن وسط */
  top: 50%; /* قرارگیری وسط از بالا */

}

.menu-tab-band-moshakhasat-vizeghi .my-tabs h4 {
	font-size:12px;
    margin-bottom: 0px;
  display: contents;
}


#chap_content .menu-tab-band-moshakhasat-vizeghi .tab-content {
    background: #fff;
    border: none;
    padding: 30px 15px;
    box-shadow: none;
    margin-top: -1.5px;
    text-align: justify;
    line-height: 2.2;
}

/*این برای قسمت منوی تب بندی مشخصات و ویژگی هاست */	
/*این برای قسمت منوی تب بندی مشخصات و ویژگی دکمه که اضافه کردیم به صفحات داخلی مثل بادبانی تو موبایل اونو یک یک سطر قرار میده */	

.menu-tab-band-dokmebozorg-taki .buttonElementBtn{
  display: ruby-text;
}
  
/*این برای قسمت منوی تب بندی مشخصات و ویژگی دکمه که اضافه کردیم به صفحات داخلی مثل بادبانی تو موبایل اونو یک یک سطر قرار میده */	
  
/*مربوط به کدهای خود سایت هست که سایه و مارجین روی برای منوی تب بندی از بین بردیم */	

#chap_content .tab-content {
    background: #fff;
    border: 1px solid #d9d9d9;
    padding: 30px 15px;
    box-shadow: 0 0 10px 0 rgba(68, 68, 68, .1);
    margin-top: -1.5px;
    margin-bottom: 0px;
}

/*مربوط به کدهای خود سایت هست که سایه و مارجین روی برای منوی تب بندی از بین بردیم */	





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

.icone-safat-ista {
    position: relative;
    width: 100%;
    max-width: 248px;
    height: auto;
/*    margin: 10px auto;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 15px;
    overflow: hidden;
    border: 2px solid rgb(255, 116, 0);

}

.icone-safat-ista img {
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.icone-safat-ista .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(4, 144, 59, 0.7), rgba(148, 255, 148, 0.3), rgba(255, 255, 255, 0));
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.icone-safat-ista:hover .overlay {
  opacity: 1;
}

.icone-safat-ista .overlay button {
  display: block;
  margin: 0 auto;
  text-align: center;
  padding: 10px 20px;
  background-color: rgb(54, 184, 87);
  border: none;
  color: #ffffff;
  font-size: 16px;
  border-radius: 35px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
  width: 90%;
}



.icone-safat-ista .overlay button:hover {
  background-color: rgb(255, 160, 0);
  color: white;
}

.icone-safat-ista .caption {
     position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background-color: rgb(255, 160, 0);
    display: flex;
    /* align-items: center; */
    justify-content: center;
    color: white;
    /* font-size: 14px; */
    padding: 9px 0;
    text-align: center;
}
.icone-safat-ista .caption h3 {
  font-size: 0.9em;
}


@media (max-width: 768px) {
  .icone-safat-ista {
    max-width: 100%;
    margin: 5%;
	height:auto;

}
  .icone-safat-ista img {
    max-width: 100%;
	    height: auto;

  }

  
.icone-safat-ista .caption p {
  margin: 0; /* حذف حاشیه‌های پیش‌فرض */
}

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


/* توی منوی اصلی سایت نوشته ها کاملا نشون داده نمیشد بزرگ کردیم */

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

#breadcrumbs {
    background: #fff;
    padding: 0 25px;
    font-size: 14px;
    line-height: 45px;
    color: #898989;
    overflow: hidden;
      DISPLAY: NONE;
  /* نوشته های سلسه مراتی بالای محصولات را پنهان کردیم*/

  
/* این کد برای است که در قسمت خدمات محصولات حدمتی بنام انتخاب رنگ برای چاپ هست که در گوشی یک ستون نشون میداد با این 2 ستونه کردیم*/

}
@media (max-width: 768px) {
  .option-group-74292 .chap_row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .option-group-74292 .chap_col-sm-4 {
    flex: 0 0 45%;
  }
}


@media (max-width: 768px) {
  .option-group-74293 .chap_row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .option-group-74293 .chap_col-sm-4 {
    flex: 0 0 45%;
  }
}
/* این کد برای است که در قسمت خدمات محصولات حدمتی بنام انتخاب رنگ برای چاپ هست که در گوشی یک ستون نشون میداد با این 2 ستونه کردیم*/

/* این کد برای است که در قسمت خدمات محصولات حدمتی بنام زمان تحویل برای چاپ هست که در گوشی یک ستون نشون میداد با این 2 ستونه کردیم*/

@media (max-width: 768px) {
  .option-group-52202 .chap_row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .option-group-52202 .chap_col-sm-4 {
    flex: 0 0 45%;
  }
}
/* این کد برای است که در قسمت خدمات محصولات حدمتی بنام رنگ ربشه برای چاپ هست که در گوشی یک ستون نشون میداد با این 2 ستونه کردیم*/

@media (max-width: 768px) {
  .option-group-59388 .chap_row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .option-group-59388 .chap_col-sm-4 {
    flex: 0 0 45%;
  }
}
/* این کد برای است که در قسمت خدمات محصولات حدمتی بنام زنگ ریشه برای چاپ هست که در گوشی یک ستون نشون میداد با این 2 ستونه کردیم*/


/* این کد برای است که در قسمت خدمات محصولات حدمتی بنام طراحس برای چاپ هست که در گوشی یک ستون نشون میداد با این 2 ستونه کردیم*/

@media (max-width: 768px) {
  .option-group-52198 .chap_row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .option-group-52198 .chap_col-sm-4 {
    flex: 0 0 45%;
  }
}
/* این کد برای است که در قسمت خدمات محصولات حدمتی بنام طراحی برای چاپ هست که در گوشی یک ستون نشون میداد با این 2 ستونه کردیم*/
 

/* این کد برای است که در قسمت خدمات محصولات حدمتی بنام صلیب برای چاپ هست که در گوشی یک ستون نشون میداد با این 2 ستونه کردیم*/

@media (max-width: 768px) {
  .option-group-59391 .chap_row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .option-group-59391 .chap_col-sm-4 {
    flex: 0 0 45%;
  }
}
/* این کد برای است که در قسمت خدمات محصولات حدمتی بنام صلیب برای چاپ هست که در گوشی یک ستون نشون میداد با این 2 ستونه کردیم*/
 
 

 






























/*  انیمیشن برای دکمه سفارش سریع بالای لندیگ ها */
.dokmeh-cheshmakzan-balaye-safahat  .wrap {

  text-align: center;
}

.dokmeh-cheshmakzan-balaye-safahat .button {
    display: inline-block;
 font-size: calc(0.7em + 0.2vw);
    padding: 0.9em 1em;
    font-weight: 700;
   letter-spacing: 0px;
    text-transform: uppercase;
    text-decoration: none;
    /* margin: 3em; */
    border: solid 2px #232323; 
    color:  #050500;
    border-radius: 1.7em;
    transition: all 0.3s linear;
    animation-iteration-count: infinite;
    background:#fbd000;
	 /* #23d100;*/
   /*  white-space: nowrap; */
  
}
.dokmeh-cheshmakzan-balaye-safahat .button:hover {
  color: #ffffff;
  background: #38b954;
  animation: none;
}
.dokmeh-cheshmakzan-balaye-safahat .button3 {
  animation-duration: 0.5s;
  animation-name: shrink;
}

/* انیمیشن برای دکمه سفارش سریع */

/* انیمیشن برای دکمه وسط بزرگ */
.dokmeh-vasat-bozorg .wrap {

  text-align: center;
}

.dokmeh-vasat-bozorg .wrap .button3 h4 {
  font-size: 1.2em; /* اندازه دلخواه شما */
  margin: 0; /* حذف فاصله‌های پیش‌فرض */
}


.dokmeh-vasat-bozorg .button {
    display: inline-block;
 /* font-size: calc(1.5em); */
  padding: 1em 10%;
    font-weight: 700;
 /*    letter-spacing: -1px; */
    text-transform: uppercase;
    text-decoration: none;
    /* margin: 3em; */
    /* border: solid 1px #232323; */
    color: #ffffff;
    border-radius: 1.7em;
    transition: all 0.3s linear;
    animation-iteration-count: infinite;
    background:#db0000;
	 /* #23d100;*/
   /*  white-space: nowrap; */
    max-width: 100%;  
}
.dokmeh-vasat-bozorg .button:hover {
  color: #000000;
  background: #fbd000;
  animation: none;
}
.dokmeh-vasat-bozorg .button3 {
  animation-duration: 0.5s;
  animation-name: shrink;
}

@keyframes shrink {

  49% {
    transform: scale(0.97, 0.97);
  }

}
@media (max-width: 1115px) {
.dokmeh-vasat-bozorg .button {
    min-width: 200px;
  font-size: calc(0.6em);
  }
/* انیمیشن برای دکمه سفارش سریع */

  
  
/* اصلاح سایز مگا منو چند ستونه */
.mdm .menuBuilder .MenuMainUl .menuListFull .menuListFullSection {
    position: absolute;
    height: 50vh;
    top: 100%;
    z-index: 1000;
    display: none;
    background: red;
    box-shadow: 0 0 8px -4px rgba(140, 137, 137, .631372549);
    border-radius: 5px;
    overflow: auto;
}
  /*   */
  
  
  
.flag-install-guide {
    text-align: justify;
  }
.flag-install-guide h3 {
    color: red;
  }
.flag-install-guide h4 {
    color: #e63939;
  }
.flag-install-guide h5 {
    color: #0f38bb;
  }



.flag-install-guide ul li strong {
    color: #e63939;
    line-height: 30px;
  }
.flag-install-guide ul li {
  font-weight: 300;
  }
.wwwww .richTextBox section6column0element1 P {
    line-height: 30px;
    font-weight: 300;
  }