/* تنظیمات برای نمایش دسکتاپ */
#butnheader {
    display: flex;
    justify-content: space-between; /* فاصله مساوی بین چک‌باکس‌ها */
    flex-wrap: wrap; /* برای مواقعی که عرض صفحه کم است، چک‌باکس‌ها در چند خط قرار گیرند */
}

#butnheader > * {
    margin: 10px; /* تنظیم فاصله بین المان‌ها */
}


/* تنظیمات برای نمایش در گوشی‌های موبایل */
@media only screen and (max-width: 768px) {
    #butnheader {
        flex-direction: column; /* چک‌باکس‌ها زیر هم قرار می‌گیرند */
        align-items: flex-start; /* چک‌باکس‌ها از سمت چپ شروع می‌شوند */
    }

    #butnheader label {
        margin-right: 0; /* حذف فاصله راست در موبایل */
        width: 100%; /* لیبل‌ها تمام عرض صفحه را بگیرند */
        margin-bottom: 10px; /* فاصله بین هر لیبل */
    }
}



	.ff1 {
		font-family: 'B Zar', sans-serif;
		font-size: 14px;
		font-weight: bold;
		text-align: center;
		background-color: red; 
	}

	 .hiddenrow {
        display: none;
    }



	.input-field {
            background-color: white; /* رنگ اولیه */
            transition: background-color 0.3s ease; /* برای نرمی تغییر رنگ */
        }
    .input-field:focus {
            background-color: lightgreen; /* رنگ وقتی مکان‌نما داخل اینپوت است */
        }
	
	.s{
		font-family: B Titr;
		font-size:30px;
		border: 1px solid #ccc; /* بردر خارجی */
		position:absolute; /* موقعیت مطلق */
		border: 2px solid black;
		border-radius: 30px;/* گرد کردن گوشه‌ها */
		box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;
		text-decoration: none;/* برداشتن خط زیر لینک */
		background:lime;
	}
	
	.s1 {
		background: #95C8D8; /* رنگ پس‌زمینه با استفاده از کد هگزادسیمال */
		width: 500px;
		height: 650px;
		position: absolute;
		right: 50px; /* اصلاح حساسیت به حروف */
		top: 35px;
		border-radius: 30px;
		box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff; /* حذف نقل قول اضافی */
	}

	.s2 {
    background: #95C8D8;
    width: 650px;
    height: 650px;
    position: absolute;
    left: 50px;
    top: 35px;
    border-radius: 30px;
    box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;
}

		
	.s3{ 
		width:580px;
		height:10px;
		position:absolute;
		
		top:0px;
		font-family: B Titr, sans-serif; /* فونت */
		font-size: 16px; /* اندازه متن */
	
	}
	html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
     }
		
	.s4 {
		
		width: 500px;
		height: 900px;
		position: absolute;
		right: 350px; /* اصلاح حساسیت به حروف */
		top: 50px; 
		border-radius: 30px;
		box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff; /* حذف نقل قول اضافی */
	}
	
	.in1[type=text] {
		border-radius: 30px; /* شکل گرد کردن گوشه‌ها */
		text-align: center;
		padding: 7px;
		font-family: 'B Titr', sans-serif; /* یک فونت جایگزین انتخاب کنید */
		font-size: 15px; /* اندازه پیش‌فرض متن */
		background-color: lightyellow;
		width: 175px; /* تنظیم اندازه ثابت */
		border-color: dodgerblue;
		border-width: 4px; /* تغییر اندازه بوردر به 4 پیکسل */
		transition: font-size 0.2s ease; /* انیمیشن تغییر اندازه متن */
	}
	
	.in1[type=text]:focus {
		font-size: 20px; /* اندازه بزرگتر برای متن وقتی فوکوس دارد */
	}
	
	@media (max-width: 768px) {
	.in1[type=text], input[type="number"] {
		font-size: 20px; /* تنظیم اندازه متن برای گوشی‌های همراه */
		font-family: 'Roboto', sans-serif;
		font-weight: bold;
		font-size: 20px; /* اندازه بزرگتر برای متن وقتی فوکوس دارد */
	}
	
	.in1[type=text]:focus,
	.in1[type=text]:active,
	input[type="number"]:focus,
	input[type="number"]:active {
		background-color: lightblue; /* تغییر رنگ پس‌زمینه هنگام تعامل لمسی */
		border-color: darkblue; /* تغییر رنگ بوردر هنگام تعامل لمسی */
		font-size: 20px; /* اندازه بزرگتر برای متن وقتی فوکوس دارد */
	}
	}

	.in2[type=text]:focus {
		font-size: 20px; /* اندازه بزرگتر برای متن وقتی فوکوس دارد */
	}
		
	.in2 {
		border-radius: 30px; /* شکل گرد کردن گوشه‌ها */
		text-align: center;
		padding: 7px;
		font-family: 'B Titr', sans-serif; /* یک فونت جایگزین انتخاب کنید */
		font-size: 15px; /* تنظیم اندازه متن */
		background-color: lightyellow;
		width: 60px; /* تنظیم اندازه ثابت */
		overflow-x: hidden; /* حذف نمایش علامت اسکرول */
		border-color: dodgerblue;
		border-width: 4px; /* تغییر اندازه بوردر به 4 پیکسل */
	}

	@media (max-width: 768px) {
		.in2 {
			font-size: 20px; /* تنظیم اندازه متن برای گوشی‌های همراه */
			font-family: 'Roboto', sans-serif;
			font-weight: bold;
		}
		
		.in2:focus,
		.in2:active {
			background-color: lightblue; /* تغییر رنگ پس‌زمینه هنگام تعامل لمسی */
			border-color: darkblue; /* تغییر رنگ بوردر هنگام تعامل لمسی */
			font-size: 20px; /* اندازه بزرگتر برای متن وقتی فوکوس دارد */
		}
	}
	
	
	.in3 {
		color: red; /* تنظیم رنگ متن به قرمز */
		font-size: 20px; /* تنظیم اندازه متن */
	}
	
	
	
	table {
           width: 40%;
           margin: 0 auto; /* برای مرکز چین کردن جدول در صفحه */
           border-collapse: collapse;
		  
       }
	
	.table1 {
    width: 40%;
    margin: 0 auto; /* برای مرکز چین کردن جدول در صفحه */
    border-collapse: separate; /* برای فعال کردن border-spacing */
    border-spacing: 0px 20px; /* 20px فاصله عمودی و 0px فاصله افقی */
}

    th, td {
        
        
        text-align: center; /* افقی وسط چین کردن */
        vertical-align: middle; /* عمودی وسط چین کردن */
    }
	.td1 {
            /*padding: 0 25px; /* فاصله افقی بین سلول‌ها */
       }
    th {
        background-color: #f2f2f2;
    }
	.comboBox1{
		font-family: 'Poppins', sans-serif; /* فونت */
		 font-weight: bold;
		font-size: 15px; /* اندازه متن */
	
	
	}
	
	.but1 {
            margin-right: 10px;
            font-family: 'B Zar'; /* فونت */
            font-weight: bold;
            font-size: 1em; /* اندازه متن نسبی به اندازه والد */
            border-width: 4px; /* تغییر اندازه بوردر به 4 پیکسل */
            border: 2px solid black; /* حذف حاشیه */
            border-radius: 30px; /* شکل گرد کردن گوشه‌ها */
            text-align: center; /* وسط چین کردن متن */
            padding: 10px 10px; /* فضای داخلی دکمه (پدینگ) */
            background-color: #d0b58e;
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2), 
                        -5px -5px 15px rgba(255, 255, 255, 0.5); /* سایه‌ها برای ایجاد جلوه سه‌بعدی بیشتر */
            box-sizing: border-box; /* باکس سایزینگ برای جلوگیری از بیرون زدن محتوا */
            transition: all 0.3s ease; /* جلوه انتقالی برای انیمیشن */
            display: inline-block; /* تنظیم دکمه به صورت نمایش خطی */
        }


	.but1:hover {
		box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.3), 
					-8px -8px 20px rgba(255, 255, 255, 0.6); /* سایه‌ها هنگام هاور */
		transform: translateY(-3px); /* حرکت دکمه به بالا هنگام هاور */
		}
		
		.but1:active {
			box-shadow: inset 5px 5px 15px rgba(0, 0, 0, 0.2), 
						inset -5px -5px 15px rgba(255, 255, 255, 0.5); /* سایه‌ها هنگام کلیک */
			transform: translateY(3px); /* حرکت دکمه به پایین هنگام کلیک */
		}	
				
	 
	
	
	
	.button {
		/* تنظیمات برای دکمه‌ها */
		background-color: lightblue; /* رنگ زمینه دکمه */
		border: none; /* حذف حاشیه دکمه */
		color: black; /* رنگ متن دکمه */
		
		text-align: center; /* متن درون دکمه به وسط چین شود */
		text-decoration: none; /* حذف تزئین متنی (مثل زیرخط یا زیرخط‌دونه) */
		display: inline-block; /* دکمه به عنوان یک بلوک شناور در خط قرار بگیرد */
		font-size: 14px; /* اندازه متن دکمه */
		
		
		cursor: pointer; /* تغییر موقعیت ماوس به شکل نشانه‌گر (pointer) */
		transition: all 0.3s ease; /* تغییرات به مدت 0.3 ثانیه به صورت آرام و نرم اعمال شود */
	}
	
    /* این کد CSS را اضافه کنید */
	.input-hover {
		background-color: white; /* رنگ پیش‌فرض زمینه */
		transition: background-color 0.3s ease; /* انیمیشن تغییر رنگ */
	}
	
	.input-hover:hover {
		background-color: lightgreen; /* رنگ زمینه هنگامی که موس روی اینپوت قرار می‌گیرد */
	}
    
	
	

	
	/* افزایش اندازه دکمه هنگامی که موس روی آن قرار می‌گیرد */
	.button:hover {
		transform: scale(1.1);
	}
	
	/* تغییر رنگ زمینه دکمه هنگامی که موس روی آن قرار می‌گیرد */
	.button:hover {
		background-color: lightgreen;
	}
	
	#resultContainerPrint {
            display: none;
            position: relative;
            border: 1px solid #000;
            padding: 20px;
            background-color: #f9f9f9;
     }
		 
     
		
	
		


     .print-btn {
            margin-top: 20px;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
            font-size: 16px;
      }
	  
	  .tooltip {
            display: none;
            
            background-color: Aquamarine;
             
            text-align: Right;
            border-radius: 30px;
            padding: 10px;
            z-index: 1;
            
            top: 50px;
            left: 50px;
            cursor: move; /* اضافه کردن نشانگر حرکت */
			width: 500px;
			height: 1000px;
			 
			  
        }
        .close-btn {
             
            top: 5px;
            right: 0px;
            background-color: white;
            color: white;
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            text-align: center;
            line-height: 18px;
            cursor: pointer;
			font-size: 40px;
        }
		 .close-btn:hover {
			background-color: yellow; /* تغییر پس‌زمینه هنگام نشان دادن کرسر روی دکمه */
		}
		
		
		.close-btn1 {
            
            top: 5px;
            background-color: red;
            color: white;
            border: none;
            width: 40px;
            height: 40px;
            text-align: center;
            line-height: 18px;
            cursor: pointer;
			font-size: 40px;
        }
		.p-help {
            color: red;
        }
		
		.z1{
			font-family: B Titr;
			font-size:10px;
			/*border: 1px solid #ccc; /* بردر خارجی */
			position:absolute; /* موقعیت مطلق */
			/*border: 2px solid black;*/
			/*border-radius: 30px;/* گرد کردن گوشه‌ها */
			/*box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;*/
			text-decoration: none;/* برداشتن خط زیر لینک */
			/*background:lime;*/
			width:1100px;
			height:570px;
			right: 50px; /* اصلاح حساسیت به حروف */
			top: 35px;
		}
		
		.z2{
			font-family: B Titr;
			font-size:10px;
			/*border: 1px solid #ccc; /* بردر خارجی */
			position:absolute; /* موقعیت مطلق */
			/*border: 2px solid black;
			/*border-radius: 30px;/* گرد کردن گوشه‌ها */
			box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;
			text-decoration: none;/* برداشتن خط زیر لینک */
			/*background:lime;*/
			width:300px;
			height:520px;
			right:80px; /* اصلاح حساسیت به حروف */
			top: 60px;
		}
		
		.z3{
			font-family: B Titr;
			font-size:10px;
			/*border: 1px solid #ccc; /* بردر خارجی */
			position:absolute; /* موقعیت مطلق */
			/*border: 2px solid black;
			border-radius: 30px;/* گرد کردن گوشه‌ها */
			box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;
			text-decoration: none;/* برداشتن خط زیر لینک */
			/*background:lime;*/
			width:700px;
			height:520px;
			right: 420px; /* اصلاح حساسیت به حروف */
			top: 60px;
		}
		.z4{
			font-family: B Titr;
			font-size:10px;
			/*border: 1px solid #ccc; /* بردر خارجی */
			position:absolute; /* موقعیت مطلق */
			/*border: 2px solid black;
			border-radius: 30px;/* گرد کردن گوشه‌ها */
			box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;
			text-decoration: none;/* برداشتن خط زیر لینک */
			/*background:lime;*/
			width:640px;
			height:470px;
			right: 450px; /* اصلاح حساسیت به حروف */
			top: 80px;
		}
		
		.z5{
			font-family: B Titr;
			font-size:10px;
			/*border: 1px solid #ccc; /* بردر خارجی */
			position:absolute; /* موقعیت مطلق */
			/*border: 2px solid black;
			border-radius: 30px;/* گرد کردن گوشه‌ها */
			box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;
			text-decoration: none;/* برداشتن خط زیر لینک */
			/*background:lime;*/
			width:580px;
			height:200px;
			right: 480px; /* اصلاح حساسیت به حروف */
			top: 100px;
		}
		
		.z6{
			font-family: B Titr;
			font-size:10px;
			/*border: 1px solid #ccc; /* بردر خارجی */
			position:absolute; /* موقعیت مطلق */
			/*border: 2px solid black;
			border-radius: 30px;/* گرد کردن گوشه‌ها */
			box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;
			text-decoration: none;/* برداشتن خط زیر لینک */
			/*background:lime;*/
			width:580px;
			height:200px;
			right: 480px; /* اصلاح حساسیت به حروف */
			top: 320px;
		}
		
		.z7{
			font-family: B Titr;
			font-size:10px;
			/*border: 1px solid #ccc; /* بردر خارجی */
			position:absolute; /* موقعیت مطلق */
			/*border: 2px solid black;
			border-radius: 30px;/* گرد کردن گوشه‌ها */
			box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;
			text-decoration: none;/* برداشتن خط زیر لینک */
			/*background:lime;*/
			width:250px;
			height:160px;
			right: 500px; /* اصلاح حساسیت به حروف */
			top: 120px;
		}
		
		.z8 {
    font-family: "B Titr"; /* استفاده از نام فونت در کوتیشن */
    font-size: 10px;
    /* border: 1px solid #ccc; /* بردر خارجی */
    position: absolute; /* موقعیت مطلق */
    /* border: 2px solid black; /* بردر داخلی */
    /* border-radius: 30px; /* گرد کردن گوشه‌ها */
    box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;
    text-decoration: none; /* برداشتن خط زیر لینک */
    /* background: lime; */ /* رنگ پس‌زمینه */
    width: 250px;
    height: 160px;
    right: 780px; /* اصلاح حساسیت به حروف */
    top: 120px;
}

		
		.z9{
			font-family: B Titr;
			font-size:10px;
			/*border: 1px solid #ccc; /* بردر خارجی */
			position:absolute; /* موقعیت مطلق */
			/*border: 2px solid black;
			border-radius: 30px;/* گرد کردن گوشه‌ها */
			box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;
			text-decoration: none;/* برداشتن خط زیر لینک */
			/*background:lime;*/
			width:250px;
			height:160px;
			right: 500px; /* اصلاح حساسیت به حروف */
			top: 340px;
		}
		
		.z10{
			font-family: B Titr;
			font-size:10px;
			/*border: 1px solid #ccc; /* بردر خارجی */
			position:absolute; /* موقعیت مطلق */
			/*border: 2px solid black;
			border-radius: 30px;/* گرد کردن گوشه‌ها */
			box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;
			text-decoration: none;/* برداشتن خط زیر لینک */
			/*background:lime;*/
			width:250px;
			height:160px;
			right: 780px; /* اصلاح حساسیت به حروف */
			top: 340px;
		}
		
		.z11{
			font-family: B Titr;
			font-size:10px;
			/*border: 1px solid #ccc; /* بردر خارجی */
			position:absolute; /* موقعیت مطلق */
			/*border: 2px solid black;
			border-radius: 30px;/* گرد کردن گوشه‌ها */
			box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;
			text-decoration: none;/* برداشتن خط زیر لینک */
			/*background:lime;*/
			width:260px;
			height:220px;
			right:100px; /* اصلاح حساسیت به حروف */
			top: 80px;
		}
		
		.z12{
			font-family: B Titr;
			font-size:10px;
			/*border: 1px solid #ccc; /* بردر خارجی */
			position:absolute; /* موقعیت مطلق */
			/*border: 2px solid black;
			border-radius: 30px;/* گرد کردن گوشه‌ها */
			box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;
			text-decoration: none;/* برداشتن خط زیر لینک */
			background:lime; 
			width:220px;
			height:160px;
			right:120px; /* اصلاح حساسیت به حروف */
			top: 120px;
		}
		
		.z13{
			font-family: B Titr;
			font-size:10px;
			/*border: 1px solid #ccc; /* بردر خارجی */
			position:absolute; /* موقعیت مطلق */
			/*border: 2px solid black;
			border-radius: 30px;/* گرد کردن گوشه‌ها */
			box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;
			text-decoration: none;/* برداشتن خط زیر لینک */
			/*background:lime;*/
			width:220px;
			height:160px;
			right:120px; /* اصلاح حساسیت به حروف */
			top: 350px;
		}
		
		.title1 {
				position: absolute;
				top: 17px; /* موقعیت عنوان */
				width: 100%;
				text-align: center;
				font-size: 15px;
				font-weight: bold;
		}
		
		.button1 {
				position: absolute;
				text-align: center;
				text-decoration: none;
				bottom: 70px; /* موقعیت از پایین */
				right: 50%; /* موقعیت از راست */
				transform: translateX(50%);
				padding: 10px 20px;
				font-size: 16px;
				color: white;
				background-color: blue; /* رنگ دکمه */
				border: none;
				border-radius: 20px;
				cursor: pointer;
				box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
				width:110px;
				height:20px;
				font-family: B Titr, sans-serif
				
				
		}
		.button2 {
				position: absolute;
				text-align: center;
				text-decoration: none;
				bottom: 20px; /* موقعیت از پایین */
				right: 50%; /* موقعیت از راست */
				transform: translateX(50%);
				padding: 10px 20px;
				font-size: 16px;
				color: white;
				background-color: blue; /* رنگ دکمه */
				border: none;
				border-radius: 20px;
				cursor: pointer;
				box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
				width:100px;
				height:20px;
				font-family: B Titr, sans-serif
				
		}
		.home1 {
			color: red;
			font-family: B Titr, sans-serif
				
		}
		
		.z20{
            font-family: B Titr;
            font-size:10px;
            border: 1px solid #ccc; 
            position:absolute; /* موقعیت مطلق */
            border: 2px solid black;
            border-radius: 30px;/* گرد کردن گوشه‌ها */
            box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;
            text-decoration: none;/* برداشتن خط زیر لینک */
            background:lime;
            width:900px;
            height:550px;
            right:200px; /* اصلاح حساسیت به حروف */
            top: 60px;
        }
        
        .z21{
            font-family: B Titr;
            font-size:10px;
            border: 1px solid #ccc; 
            position:absolute; /* موقعیت مطلق */
            border: 2px solid black;
            border-radius: 30px;/* گرد کردن گوشه‌ها */
            box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;
            text-decoration: none;/* برداشتن خط زیر لینک */
            background:red;
            width:350px;
            height:450px;
            right:250px; /* اصلاح حساسیت به حروف */
            top: 150px;
        }
        
        .z23{
            font-family: B Titr;
            font-size:10px;
            border: 1px solid #ccc; 
            position:absolute; /* موقعیت مطلق */
            border: 2px solid black;
            border-radius: 30px;/* گرد کردن گوشه‌ها */
            box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;
            text-decoration: none;/* برداشتن خط زیر لینک */
            background: #95C8D8; /* رنگ پس‌زمینه با استفاده از کد هگزادسیمال */
            width:350px;
            height:220px;
            right:690px; /* اصلاح حساسیت به حروف */
            top: 150px;
        }
        
        .z24{
            font-family: B Titr;
            font-size:10px;
            border: 1px solid #ccc; 
            position:absolute; /* موقعیت مطلق */
            border: 2px solid black;
            border-radius: 30px;/* گرد کردن گوشه‌ها */
            box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;
            text-decoration: none;/* برداشتن خط زیر لینک */
            background:yellow;
            width:330px;
            height:250px;
            right:260px; /* اصلاح حساسیت به حروف */
            top: 320px;
        } /* بسته شدن کلاس ز24 */
        
        .z25{
            font-family: B Titr;
            font-size:10px;
            position:absolute; /* موقعیت مطلق */
            text-decoration: none;/* برداشتن خط زیر لینک */
            width:500px;
            height:100px;
            right:360px; /* اصلاح حساسیت به حروف */
            top: 200px;
        }
        .title2 {
            position: absolute;
            width: 100%;
            right:60px;
            font-size: 15px;
            font-weight: bold;
        }
		.container1 {
			padding-right: 50px;
			background: #95C8D8;
			width: 400px;
			height: 500px;
			position: absolute;
			right: 50px;
			top: 35px;
			border-radius: 30px;
			box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;
		}
		
		.container2 {
			padding-right: 50px;
			background: red;
			width: 400px;
			height: 200px;
			position: absolute;
			right: 600px;
			top: 35px;
			border-radius: 30px;
			box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;
		}
		
		.z26 {
            padding-right: 50px;
            font-family: B Titr;
            font-size: 10px;
            position: absolute;
            text-decoration: none;
            width: 500px;
            height: 530px;
            right: 360px;
            top: 50px;
            background: lime;
            border: 2px solid black;
            border-radius: 30px;
            box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;
            margin-right: 50px;
            font-size: 15px;
            font-weight: bold;
        }
		
	.but2 {
    font-family: 'B Titr', sans-serif; /* فونت */
    font-size: 16px; /* اندازه متن */
    padding: 8px 15px; /* فاصله‌دهی داخلی */
    width: 70px;
    height: 30px;
    border-radius: 10px; /* شکل گرد کردن گوشه‌ها */
    text-align: center; /* وسط چین کردن متن */
    border: 2px solid black; /* حاشیه دکمه */
    color: black; /* رنگ متن دکمه */
    background-color: lightblue; /* رنگ زمینه دکمه */
    display: inline-block; /* قرار گرفتن به صورت بلوک درون خط */
    cursor: pointer; /* شکل نشانگر ماوس */
    margin: 4px 2px; /* فاصله از اطراف */
    transition: all 0.3s ease; /* افکت انتقال */

    /* سایه‌ها */
    box-shadow: 5px 5px 15px #aaa;
}

		
		body {
			font-family: Arial, sans-serif; /* تنظیم فونت پیش‌فرض به Arial، یا یک فونت sans-serif اگر Arial موجود نبود */
			direction: rtl; /* تنظیم جهت متن به راست به چپ */
			margin: 0; /* حذف حاشیه پیش‌فرض از عنصر بدنه */
			padding: 0; /* حذف فضای داخلی پیش‌فرض از عنصر بدنه */
			box-sizing: border-box; /* تضمین می‌کند که فضای داخلی و حاشیه در عرض و ارتفاع کل عنصر حساب می‌شوند */
		}
		
		.container {
			display: flex; /* استفاده از مدل چیدمان فلکس برای ظرف */
			flex-wrap: wrap; /* اجازه می‌دهد که آیتم‌های فلکس به چند خط تقسیم شوند */
			justify-content: space-between; /* توزیع فضای بین و اطراف آیتم‌های فلکس */
			padding: 20px; /* اضافه کردن ۲۰ پیکسل فضای داخلی اطراف ظرف */
			font-family: B Zar; /* تنظیم فونت متن داخل ظرف به B Zar */
			font-size: 14px; /* تنظیم اندازه فونت به ۱۴ پیکسل */
			font-weight: bold; /* تنظیم ضخامت فونت به حالت بولد */
		}
		
		.box {
			flex: 1 1 30%; /* اجازه می‌دهد که جعبه رشد کند و کوچک شود، با عرض پایه ۳۰ درصد */
			margin-bottom: 20px; /* اضافه کردن ۲۰ پیکسل حاشیه در پایین جعبه */
			margin-left: 20px; /* اضافه کردن ۲۰ پیکسل حاشیه در سمت چپ جعبه */
			margin-right: 20px; /* اضافه کردن ۲۰ پیکسل حاشیه در سمت راست جعبه */
			margin-top: 20px; /* اضافه کردن ۲۰ پیکسل حاشیه در بالا جعبه */
			background-color: #f0f0f0; /* تنظیم رنگ پس‌زمینه جعبه به خاکستری روشن */
			border: 1px solid #ccc; /* اضافه کردن یک حاشیه ثابت با رنگ خاکستری روشن */
			border-radius: 10px; /* گرد کردن گوشه‌های جعبه با شعاع ۱۰ پیکسل */
			box-sizing: border-box; /* تضمین می‌کند که فضای داخلی و حاشیه در عرض و ارتفاع کل جعبه حساب می‌شوند */
			background: #b0e0e6; /* تنظیم رنگ پس‌زمینه به آبی روشن با استفاده از کد هگزادسیمال */
			width: 100%; /* تنظیم عرض به اندازه ظرف */
            
			/*min-width: 100px;*/
			right: 50px; /* موقعیت دادن جعبه به فاصله ۵۰ پیکسل از راست (مفید در صورتی که موقعیت‌دهی به صورت مطلق یا نسبی باشد) */
			top: 75px; /* موقعیت دادن جعبه به فاصله ۷۵ پیکسل از بالا (مفید در صورتی که موقعیت‌دهی به صورت مطلق یا نسبی باشد) */
			border-radius: 30px; /* گرد کردن بیشتر گوشه‌های جعبه با شعاع ۳۰ پیکسل */
			box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff; /* اضافه کردن اثر سایه در اطراف جعبه با جابه‌جایی مشخص، شعاع محو، و رنگ */
			height: auto; /* تنظیم ارتفاع به صورت خودکار */
			
		
		}
		
		 
		@media (max-width: 600px) { /* تنظیم شرط برای نمایشگرهای کوچکتر */
    .box {
        flex: 1 1 100%; /* هر عنصر `.box` را به ۱۰۰ درصد عرض ظرف تنظیم می‌کند */
    }
}

		
		.box5 {
			flex: 1 1 30%;
			margin: 20px;
			background-color: #b0e0e6;
			border: 1px solid #ccc;
			border-radius: 30px;
			box-sizing: border-box;
			box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;
			height: auto;
			min-height: 100px;
			max-height: 2000px;
		}
		.but111 {
			 
			font-family: B Zar;
			font-weight: bold;
			font-size: 14px;
			
			width: 140px;
			height:50px;
			border: none;
			background-color: #d0b58e;
			transition: background-color 0.3s ease;
			border-radius: 30px;/* گرد کردن گوشه‌ها */
			box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;
			
			
			display: flex;
            justify-content: center;
            align-items: center;
            
           
			 
            
            
             
		}
		
		.p11{
			display: flex;
			justify-content: center; 
			align-items: center;
			
		}
		
		.but111:hover {
			background-color: lime;
			border: 2px solid black; /* بردر 2 پیکسلی با رنگ مشکی */
			
			
		}
			
 
		.s44 {
		
			width: 500px;
			height: 800px;
			top: 50px; 
			border-radius: 30px;
			box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff; /* حذف نقل قول اضافی */
		}
		
		.box1 {
            background-color: #eaf2f9; /* رنگ پس‌زمینه */
			
            border: 1px solid #ccc; /* حاشیه */
            border-radius: 10px; /* گرد کردن گوشه‌ها */
            box-sizing: border-box;
            width: 98%; /* تنظیم عرض به اندازه ظرف */
            
            margin: 10px 0; /* فاصله بین جعبه‌ها */
            padding: 20px; /* فضای داخلی جعبه */
            text-align: right; /* تراز کردن متن به مرکز */
            font-size: 18px; /* اندازه فونت */
			height: auto; /* تنظیم ارتفاع به صورت خودکار */
			
        }
		

        @media (min-width: 1200px) {
            
            .box1 {
                flex: 1 1 45%; /* تنظیم عرض جعبه‌ها به ۴۵ درصد برای صفحه‌نمایش‌های بزرگتر */
                margin: 20px; /* فاصله بین جعبه‌ها */
            }
        }
		
		.box1111 {
			
			 
			width: 100%; /* تنظیم عرض به 100% */
			min-width: 10%; /* حداقل عرض */
			max-width: 20%; /* حداکثر عرض */
			margin: 10px 0; /* فاصله بین جعبه‌ها */
			text-align: right; /* تراز کردن متن به راست */
			height: auto; /* ارتفاع خودکار */
		}
		
		@media (max-width: 768px) {
			.box1111 {
				font-size: 14px; /* اندازه فونت کوچکتر برای نمایشگرهای کوچک‌تر */
				max-width: 100%; /* حداکثر عرض به 100% تغییر دهید */
				/* سایر تنظیمات برای نمایشگرهای کوچک‌تر اینجا قرار دهید */
			}
		}


       
		
		.box3 {
            background-color: #95C8D8; /* رنگ پس‌زمینه */
			
            border: 1px solid #ccc; /* حاشیه */
            border-radius: 10px; /* گرد کردن گوشه‌ها */
            box-sizing: border-box;
            width: 100%; /* تنظیم عرض به اندازه ظرف */
            max-width: 350px; /* حداکثر عرض */
            margin: 10px 0; /* فاصله بین جعبه‌ها */
            padding: 20px; /* فضای داخلی جعبه */
            text-align: right; /* تراز کردن متن به مرکز */
            font-size: 18px; /* اندازه فونت */
			height: auto; /* تنظیم ارتفاع به صورت خودکار */
			min-height: 100px; /* حداقل ارتفاع */
			max-height: 3000px; /* حداکثر ارتفاع */
        }
		

        @media (min-width: 500px) {
            
            .box3 {
                flex: 1 1 45%; /* تنظیم عرض جعبه‌ها به ۴۵ درصد برای صفحه‌نمایش‌های بزرگتر */
                margin: 20px; /* فاصله بین جعبه‌ها */
            }
        }
        
		.box4 {
			display: none;
            background-color: #eaf2f9; /* رنگ پس‌زمینه */
			
            border: 1px solid #ccc; /* حاشیه */
            border-radius: 10px; /* گرد کردن گوشه‌ها */
            box-sizing: border-box;
            width: 100%; /* تنظیم عرض به اندازه ظرف */
            max-width: 1200px; /* حداکثر عرض */
            margin: 10px 0; /* فاصله بین جعبه‌ها */
            padding: 20px; /* فضای داخلی جعبه */
            text-align: right; /* تراز کردن متن به مرکز */
            font-size: 18px; /* اندازه فونت */
			height: auto; /* تنظیم ارتفاع به صورت خودکار */
			min-height: 100px; /* حداقل ارتفاع */
			max-height: 5000px; /* حداکثر ارتفاع */
        }
		
		 

        @media (min-width: 500px) {
            
            .box4 {
                flex: 1 1 45%; /* تنظیم عرض جعبه‌ها به ۴۵ درصد برای صفحه‌نمایش‌های بزرگتر */
                margin: 20px; /* فاصله بین جعبه‌ها */
            }
        }
		.win3 {
			position: absolute; 
			margin-top: 50px; 
			right: 50px;
			color: black;
		}
		
		.win31 {
			position: absolute;
			margin-top: 50px; 
			right: 100px;
			color: black;
		}
		
		#hidden1 {/*قانون تعرفه دستمزد کارشناسان*/ 
			display: none;
			width: 300px;
			height: 50px;
			position: absolute;
			right: 12vw; /* تغییر به واحدهای نسبی */
			background-color: #95C8D8;
			transition: background-color 0.3s ease;
			border-radius: 30px;
			box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;
			top: 6vh;  /* تغییر به واحدهای نسبی */
		}
			@media (max-width: 768px) {
			#hidden1 {
				right: 10vw; /* تنظیم مجدد برای صفحه‌های کوچکتر */
				top: 30vh;  /* تنظیم مجدد برای صفحه‌های کوچکتر */
			}
		}
		
		/* تنظیم برای صفحه‌های کوچکتر از 480 پیکسل (موبایل‌های کوچکتر) */
		@media (max-width: 480px) {
			#hidden1 {
				 
				right: 10vw; /* تنظیم مجدد برای صفحه‌های کوچکتر */
				top: 18vh;  /* تنظیم مجدد برای صفحه‌های کوچکتر */
			}
		}
		
		#target {
            margin-top:20px;
             
        }