#hiddenDiv505 { 
        display: none;
        margin-top: 10px;
		
    }
	
	.dd1{
		 
		font-family: B Titr;
		font-size: 14px; 
		
		
	}
		
	 .to {
            font-family: Roboto;
            font-size: 20px;
            font-weight: bold;
            text-align: center;
        }
        /* پنهان کردن جداول به صورت پیش‌فرض */
        .table-container {
            display: none;
        }

    
	
	

	
	
    #hiddenDiv {/*صفحه اول زیر کلید محاسبه*/
        display: none;
        width: 150px;
        height: 320px;
        position: absolute;
        float: right;
        right: 9vw;
		background-color:#95C8D8;
		transition: background-color 0.3s ease;
		border-radius: 30px;/* گرد کردن گوشه‌ها */
		box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;
		top: 40vh;  /* تغییر به واحدهای نسبی */
    }
	/* تنظیم برای صفحه‌های کوچکتر از 768 پیکسل (موبایل‌ها) */
	@media (max-width: 768px) {
		#hiddenDiv {
			right: 10vw; /* تنظیم مجدد برای صفحه‌های کوچکتر */
			top: 30vh;  /* تنظیم مجدد برای صفحه‌های کوچکتر */
		}
	}
	
	/* تنظیم برای صفحه‌های کوچکتر از 480 پیکسل (موبایل‌های کوچکتر) */
	@media (max-width: 480px) {
		#hiddenDiv {
			right: 2vw; /* تنظیم مجدد برای صفحه‌های کوچکتر */
			top: 50vh;  /* تنظیم مجدد برای صفحه‌های کوچکتر */
		}
	}
	
	
	#hiddenDiv22 {/*صفحه خسارت تاخیر تادیه در یک نگاه و یا بصورت پلکانی*/
        display: none;
		font-family: B Zar;
        font-weight: bold;
        font-size: 17px;
        padding:20px;
		width: 130px;
		height: 150px;
		position: absolute;
		float: right;
        margin-top: 10px;
		right: 200px;
		top:0px;
		text-align: center;
		background-color:#95C8D8;
		transition: background-color 0.3s ease;
		border-radius: 30px;/* گرد کردن گوشه‌ها */
		box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;

    }
	
	#hiddenDiv2 {/*صفحه خسارت تاخیر تادیه مقدماتی و پیشرفته*/
        display: none;
		font-family: B Zar;
        font-weight: bold;
        font-size: 17px;
        padding:20px;
		width: 130px;
		height: 140px;
		position: absolute;
		float: right;
        margin-top: 10px;
		right: 200px;
		top:180px;
		text-align: center;
		background-color:#95C8D8;
		transition: background-color 0.3s ease;
		border-radius: 30px;/* گرد کردن گوشه‌ها */
		box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;

    }
	
	
	
	#hiddenDiv5 {/*خسارت تاخیر تادیه پشرفته با اعسار و بدون اعسار*/
        display: none;
        margin-top: 10px;
		padding: 20px;
		font-family: B Zar;
        font-weight: bold;
        font-size: 17px;
		width: 130px;
	    height: 150px;
		position: absolute;
		right: 200px;
		top:350px;
	    background-color: #95C8D8;
		transition: background-color 0.3s ease;
		border-radius: 30px;/* گرد کردن گوشه‌ها */
		box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;
		
    }

	
	
	
	
	
	#hiddenDiv51 { /*اعسار ندارد وصولی دارد یا ندارد */
        display: none;
        margin-top: 10px;
		padding: 20px;
		font-family: B Zar;
        font-weight: bold;
        font-size: 17px;
		width: 130px;
	    height: 150px;
		position: absolute;
		right: 200px;
		top:450px;
	    background-color:#95C8D8;
		transition: background-color 0.3s ease;
		border-radius: 30px;/* گرد کردن گوشه‌ها */
		box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;
		
    }
	
	
	
	
	#hiddenDiv53 { /* خسارت تاخیر تادیه بدون اعسار و بدون وصولی برای یک یا چند چک */
        display: none;
        margin-top: 10px;
		padding: 20px;
		font-family: B Zar;
        font-weight: bold;
        font-size: 17px;
		width: 130px;
	    height: 150px;
		position: absolute;
		right: 200px;
		top:550px;
	    background-color: #95C8D8;
		transition: background-color 0.3s ease;
		border-radius: 30px;/* گرد کردن گوشه‌ها */
		box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;
		
    }
	
	#hiddenDiv54 {/* خسارت تاخیر تادیه بدون اعسار و با وصولی برای یک چک*/
        display: none;
        margin-top: 10px;
		padding: 20px;
		font-family: B Zar;
        font-weight: bold;
        font-size: 17px;
		width: 140px;
	    height: 60px;
		position: absolute;
		right: 200px;
		top:500px;
	    background-color:#95C8D8;
		transition: background-color 0.3s ease;
		border-radius: 30px;/* گرد کردن گوشه‌ها */
		box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;
		
    }
	
	
	#hiddenDiv52 { /* اعسار دارد وصولی دارد یا ندارد */
        display: none;
        margin-top: 10px;
		padding: 20px;
		font-family: B Zar;
        font-weight: bold;
        font-size: 17px;
		width: 150px;
	    height: 150px;
		position: absolute;
		right: 200px;
		top:530px;
	    background-color: #95C8D8;
		transition: background-color 0.3s ease;
		border-radius: 30px;/* گرد کردن گوشه‌ها */
		box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;
		
    }
	
	
	
	
	#hiddenDiv55 {/*اعسار دارد-وصولی ندارد-پیش قسط دارد یا ندارد*/
        display: none;
        margin-top: 10px;
		padding: 20px;
		font-family: B Zar;
        font-weight: bold;
        font-size: 17px;
		width: 150px;
	    height: 150px;
		position: absolute;
		right: 200px;
		top:620px;
	    background-color:#95C8D8;
		transition: background-color 0.3s ease;
		border-radius: 30px;/* گرد کردن گوشه‌ها */
		box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;
		
    }
	 
	#hiddenDiv56 {/*اعسار دارد-وصولی ندارد-پیش قسط ندارد-درصد افزایش سالیانه یا دارد و یا ندارد*/
        display: none;
        margin-top: 10px;
		padding: 20px;
		font-family: B Zar;
        font-weight: bold;
        font-size: 17px;
		width: 150px;
	    height: 150px;
		position: absolute;
		right: 200px;
		top:750px;
	    background-color: #95C8D8;
		transition: background-color 0.3s ease;
		border-radius: 30px;/* گرد کردن گوشه‌ها */
		box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;
		
    }
	
	
	#hiddenDiv57 {/* اعسار دارد وصولی ندارد پیش قسطط ندارد درصد افزایش سالیانه ندارد اقساط معوق دارد و یا ندارد*/
        display: none;
        margin-top: 10px;
		padding: 20px;
		font-family: B Zar;
        font-weight: bold;
        font-size: 17px;
		width: 130px;
	    height: 150px;
		position: absolute;
		right: 200px;
		top:850px;
	    background-color: #95C8D8;
		transition: background-color 0.3s ease;
		border-radius: 30px;/* گرد کردن گوشه‌ها */
		box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;
		
    }
	 
	#hiddenDiv58 {/* اعسار دارد وصولی ندارد پیش قسط ندارد درصد افزایش سالیانه دارد اقساط معوق دارد و یا ندارد*/
        display: none;
        margin-top: 10px;
		padding: 20px;
		font-family: B Zar;
        font-weight: bold;
        font-size: 17px;
		width: 150px;
	    height: 130px;
		position: absolute;
		right: 200px;
		top:920px;
	    background-color:  #95C8D8;
		transition: background-color 0.3s ease;
		border-radius: 30px;/* گرد کردن گوشه‌ها */
		box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;
		
    }
	
	#hiddenDiv59 {/* اعسار دارد وصولی ندارد پیش قسط دارد درصد افزایش سالیانه دارد یا ندارد*/
        display: none;
        margin-top: 10px;
		padding: 20px;
		font-family: B Zar;
        font-weight: bold;
        font-size: 17px;
		width: 150px;
	    height: 130px;
		position: absolute;
		right: 200px;
		top:800px;
	    background-color: #95C8D8;
		transition: background-color 0.3s ease;
		border-radius: 30px;/* گرد کردن گوشه‌ها */
		box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;
		
    }
	 
	 
	#hiddenDiv60 {/* اعسار دارد وصولی ندارد پیش قسط دارد درصد افزایش سالیانه ندارد اقساط معوق دارد یا ندارد*/
        display: none;
        margin-top: 10px;
		padding: 20px;
		font-family: B Zar;
        font-weight: bold;
        font-size: 17px;
		width: 130px;
	    height: 150px;
		position: absolute;
		right: 200px;
		top:900px;
	    background-color:#95C8D8;
		transition: background-color 0.3s ease;
		border-radius: 30px;/* گرد کردن گوشه‌ها */
		box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;
		
    }
	 
	#hiddenDiv61 {/* اعسار دارد وصولی ندارد پیش قسط دارد درصد افزایش سالیانه دارد اقساط معوق دارد یا ندارد*/
        display: none;
        margin-top: 10px;
		padding: 20px;
		font-family: B Zar;
        font-weight: bold;
        font-size: 17px;
		width: 130px;
	    height:150px;
		position: absolute;
		right: 200px;
		top:970px;
	    background-color: #95C8D8;
		transition: background-color 0.3s ease;
		border-radius: 30px;/* گرد کردن گوشه‌ها */
		box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;
		
    }
	
	
	
	
	 
    #hiddenDiv3 {/*صفحه دستمزد کارشناسی مقدماتی و پیشرفته*/
        display: none;
        padding: 10px;
        margin-top: 10px;
		width: 150px;
		height: 150px;
		float: right;
		position: absolute;
		right: 280px;
		top: 250px;
		background-color:#95C8D8;
		transition: background-color 0.3s ease;
		border-radius: 30px;/* گرد کردن گوشه‌ها */
		box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;
		
    }
	
	@media (max-width: 768px) {
		#hiddenDiv3 {
			right: 10vw; /* تنظیم مجدد برای صفحه‌های کوچکتر */
			top: 30vh;  /* تنظیم مجدد برای صفحه‌های کوچکتر */
		}
	}
	
	/* تنظیم برای صفحه‌های کوچکتر از 480 پیکسل (موبایل‌های کوچکتر) */
	@media (max-width: 480px) {
		#hiddenDiv3 {
			
			right: 40vw; /* تنظیم مجدد برای صفحه‌های کوچکتر */
			top: 30vh;  /* تنظیم مجدد برای صفحه‌های کوچکتر */
		}
	}
	 
    #hiddenDiv4 {/*دستمزد کارشناسی پشرفته*/
        display: none;
        margin-top: 10px;
		padding: 20px;
		font-family: B Zar;
        font-weight: bold;
        font-size: 17px;
		width: 150px;
	    height: 1050px;
		position: absolute;
		right: 280px;
		top: 440px;
	    background-color: #95C8D8;
		transition: background-color 0.3s ease;
		border-radius: 30px;/* گرد کردن گوشه‌ها */
		box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;
		
    }
	
	 @media (max-width: 768px) {
		#hiddenDiv4 {
			right: 10vw; /* تنظیم مجدد برای صفحه‌های کوچکتر */
			top: 30vh;  /* تنظیم مجدد برای صفحه‌های کوچکتر */
		}
	}
	
	/* تنظیم برای صفحه‌های کوچکتر از 480 پیکسل (موبایل‌های کوچکتر) */
	@media (max-width: 480px) {
		#hiddenDiv4 {
			
			right: 40vw; /* تنظیم مجدد برای صفحه‌های کوچکتر */
			top: 55vh;  /* تنظیم مجدد برای صفحه‌های کوچکتر */
		}
	}
	
	
	
	
	
	#hiddenDiv91 {/*--   مهندس آب و معادن --*/
        display: none;
       
		padding: 20px;
		font-family: B Zar;
        font-weight: bold;
        font-size: 17px;
		width: 150px;
	    height:1000px;
		position: absolute;
		right: 2px;
		top: 100px;
	    background-color: #95C8D8;
		transition: background-color 0.3s ease;
		border-radius: 30px;/* گرد کردن گوشه‌ها */
		box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;
    }
	
	
	#hiddenDiv92 {/*--امور مالی--*/
        display: none;
       
		padding: 20px;
		font-family: B Zar;
        font-weight: bold;
        font-size: 17px;
		width: 150px;
	    height: 800px;
		position: absolute;
		right: 2px;
		top: 330px;
	    background-color:#95C8D8;
		transition: background-color 0.3s ease;
		border-radius: 30px;/* گرد کردن گوشه‌ها */
		box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;
    }
	
	
	#hiddenDiv93 {/*--راه و ساختمان و نقشه برداری--*/
        display: none;
       
		padding: 20px;
		font-family: B Zar;
        font-weight: bold;
        font-size: 17px;
		width: 150px;
	    height: 500px;
		position: absolute;
		right: 2px;
		top:650px;
	    background-color: #95C8D8;
		transition: background-color 0.3s ease;
		border-radius: 30px;/* گرد کردن گوشه‌ها */
		box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;
    }
	
	
	
	#hiddenDiv94 {/*-- فنون و هنری--*/
        display: none;
       
		padding: 20px;
		font-family: B Zar;
        font-weight: bold;
        font-size: 17px;
		width: 150px;
	    height:300px;
		position: absolute;
		right: 2px;
		top: 800px;
	    background-color:  #95C8D8;
		transition: background-color 0.3s ease;
		border-radius: 30px;/* گرد کردن گوشه‌ها */
		box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;
		
    }
	
	#hiddenDiv100 {/*قانون تعرفه دستمزد کارشناسان*/ 
		display: none;
		width: 150px;
		height: 250px;
		position: absolute;
		right: 24vw; /* تغییر به واحدهای نسبی */
		background-color: #95C8D8;
		transition: background-color 0.3s ease;
		border-radius: 30px;
		box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;
		top: 40vh;  /* تغییر به واحدهای نسبی */
	}
	
	/* تنظیم برای صفحه‌های کوچکتر از 768 پیکسل (موبایل‌ها) */
	@media (max-width: 768px) {
		#hiddenDiv100 {
			right: 10vw; /* تنظیم مجدد برای صفحه‌های کوچکتر */
			top: 30vh;  /* تنظیم مجدد برای صفحه‌های کوچکتر */
		}
	}
	
	/* تنظیم برای صفحه‌های کوچکتر از 480 پیکسل (موبایل‌های کوچکتر) */
	@media (max-width: 480px) {
		#hiddenDiv100 {
			right: 30vw; /* تنظیم مجدد برای صفحه‌های کوچکتر */
			top: 50vh;  /* تنظیم مجدد برای صفحه‌های کوچکتر */
		}
	}
	
	

	
    .but11 {
		 font-family: 'B Zar';
		font-weight: bold;
		font-size: 1em; /* اندازه فونت نسبی به اندازه والد */
		text-align: right;
		width: 100%; /* عرض 100% از والد */
		height: 3em; /* ارتفاع 4em از والد */
		border: none;
		background-color: #d0b58e;
		transition: background-color 0.3s ease;
		border-radius: 1em; /* گرد کردن گوشه‌ها به صورت نسبی */
		box-shadow: 0.5em 0.5em 1em #aaa, -0.5em -0.5em 1em #fff; /* سایه‌ها به صورت نسبی */
		margin-top: 1.5em; /* فاصله بالای دکمه به صورت نسبی */
		display: inline-block; /* برای حفظ ابعاد در مرکز */
		line-height: 1;
	 }
	
	.but11:hover {
        background-color: lime;
		border: 2px solid black; /* بردر 2 پیکسلی با رنگ مشکی */
		
		
    }
	
	.but12 {
		font-family: 'B Zar';
		font-weight: bold;
		font-size: 1em; /* اندازه فونت نسبی به اندازه والد */
		text-align: center; /* وسط چین کردن متن */
		width: 60%; /* عرض نسبی */
		height: 3em; /* ارتفاع نسبی */
		border: none;
		background-color: #d0b58e;
		transition: background-color 0.3s ease;
		border-radius: 2em; /* گرد کردن گوشه‌ها به صورت نسبی */
		box-shadow: 0.5em 0.5em 1em #aaa, -0.5em -0.5em 1em #fff; /* سایه‌ها به صورت نسبی */
		margin-right: 10%; /* فاصله نسبی از راست */
		margin-top: 1em; /* فاصله نسبی از بالا */
		
	}
	@media (max-width: 768px) {
    .but12 {
        font-size: 0.875em; /* کاهش اندازه فونت در دستگاه‌های کوچک‌تر */
        width: 80%; /* افزایش عرض در دستگاه‌های کوچک‌تر */
        height: 3.5em; /* کاهش ارتفاع در دستگاه‌های کوچک‌تر */
        border-radius: 1.5em; /* کاهش شعاع گرد کردن گوشه‌ها */
        margin-right: 5%; /* کاهش فاصله از راست */
		}
	}
	
	@media (max-width: 480px) {
		.but12 {
			font-size: 0.75em; /* کاهش بیشتر اندازه فونت در دستگاه‌های کوچک‌تر */
			width: 90%; /* افزایش عرض در دستگاه‌های کوچک‌تر */
			height: 3em; /* کاهش ارتفاع در دستگاه‌های کوچک‌تر */
			border-radius: 1em; /* کاهش بیشتر شعاع گرد کردن گوشه‌ها */
			margin-right: 2.5%; /* کاهش بیشتر فاصله از راست */
		}
	}
	.but12:hover {
        background-color: lime;
		border: 2px solid black; /* بردر 2 پیکسلی با رنگ مشکی */
		
		
    }
	
	
	
	.ss11 {
        color: blue;
        text-decoration: underline;
        cursor: pointer;
		width: 300px;
        height: 50px;
        background-color: #f0f0f0;
        font-family: 'B Titr';
        font-weight: bold;
        font-size: 14px;
        text-align: center; /* برای مرکز قرار دادن متن */
		text-decoration: none; /* برداشتن خط زیر متن */
    }
    .ss11:hover {
		color: red;
		font-family: 'B Titr';
		font-weight: bold;
		font-size: 14px;
		border: 2px solid black; /* بردر 2 پیکسلی با رنگ مشکی */
	}

	
    .but21 {
        font-family: B Titr;
        font-weight: bold;
        font-size: 14px;
        text-align: center;
    }
	
	.but31 {
        font-family: B Titr;
        font-weight: bold;
        font-size: 12px;
        text-align: center;
		font-family: B Titr;
		font-weight: bold;
		font-size: 15px;
		width: 180px;
		/*background-color: red;*/
		 
    }
	  
	
    
	
	button {
		opacity: 1;
		transition: opacity 0.3s;
	}
	
	button.faded {
		opacity: 0.5;
	}

	
	
	
	
	
	
   
	.box2 {
        background-color: #95C8D8;
        border: 1px solid #ccc;
        border-radius: 10px;
        box-sizing: border-box;
        width: 100%;
       
        margin: 10px 0;
        padding: 20px;
        text-align: right;
        font-size: 18px;
		height: auto; /* تنظیم ارتفاع به صورت خودکار */
		
    }

    @media screen and (min-width: 600px) {
    .box2 {
        flex: 1 1 45%;
        margin: 20px;
    }
}


	
	.box22 {
        background-color: #c3eebe;
        border: 1px solid #ccc;
        border-radius: 10px;
        box-sizing: border-box;
        width: 100%;
        
        margin: 10px 0;
        padding: 20px;
        text-align: right;
        font-size: 18px;
		height: auto; /* تنظیم ارتفاع به صورت خودکار */
		
    }

    @media screen and (min-width: 600px) {
        .box22 {
            flex: 1 1 45%;
            margin: 20px;
        }
    }
	
	.box23 {
        background-color: #b8f4e0;
        border: 1px solid #ccc;
        border-radius: 10px;
        box-sizing: border-box;
        width: 100%;
       
        margin: 10px 0;
        padding: 20px;
        text-align: right;
        font-size: 18px;
		height: auto; /* تنظیم ارتفاع به صورت خودکار */
		
    }

    @media screen and (min-width: 600px) {
        .box23 {
            flex: 1 1 45%;
            margin: 20px;
        }
    }
	
	.container {
    display: flex; /* استفاده از flexbox */
    flex-wrap: wrap; /* اجازه به بچه‌ها برای چیدمان در چند خط */
    justify-content: center; /* مرکز کردن بچه‌ها */
    padding: 10px; /* فاصله بین عناصر */
}

.container > div { /* برای هر عنصر داخلی */
    flex: 1 1 150px; /* حداقل عرض 150 پیکسل و انعطاف‌پذیری */
    max-width: 100%; /* محدود کردن عرض حداکثر */
}

	
	

    .button {
        padding: 10px 20px;
        font-size: 16px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

    /* استایل‌های خاص برای گوشی‌های هوشمند */
    @media (max-width: 768px) {
    .container {
        display: flex;
        flex-wrap: wrap; /* اجازه می‌دهد که دکمه‌ها به ردیف بعدی بروند */
        padding: 10px;
    }

    .container > div {
        flex: 1 1 calc(33.33% - 10px); /* سه دکمه در هر ردیف با فاصله */
        margin: 5px; /* برای فاصله بین دکمه‌ها */
    }
}

	
	
	
	
	
	
	
	
	
	
	
	body {
            margin: 0;
            font-family: Arial, sans-serif;
        }
		
		body, html {
			margin: 0;
			padding: 0;
			overflow-x: hidden; /* جلوگیری از اسکرول افقی */
		}
		
		.hidden {
			display: none;
		}
		
		

        .top-bar {
			position: fixed;
			top: 0;
			width: 100%;
			background-color: #F5F5F5; /* رنگ پس‌زمینه سفید خاکستری روشن */
			color: white; /* رنگ متن */
			text-align: center;
			padding: 10px 0;
			z-index: 1000;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* سایه: افست افقی، افست عمودی، پراکندگی، رنگ */
			
		}


        /* استایل برای container اصلی */
		.button-container {
			display: flex;
			flex-wrap: wrap;
			padding: 10px; /* فاصله بین دکمه‌ها */
			justify-content: center; /* مرکز چینش دکمه‌ها */
			padding: 10px; /* فاصله داخلی container */
			box-shadow: 0 4px 6px rgba(0, 0, 1, 2.3); /* سایه برای ایجاد افکت سه‌بعدی */
            transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* انیمیشن تغییر اندازه و سایه */ 
			
			
   
		}

	/* استایل برای دکمه‌ها */
	.top-bar button {
		width: 150px;
		font-family: 'B Zar', sans-serif; /* فونت برای دکمه‌ها */
		font-weight: bold;
		font-size: 16px; /* اندازه فونت */
		background-color: #808080; /* رنگ پس‌زمینه خاکستری */
		color: white; /* رنگ متن */
		border: none; /* حذف حاشیه */
		padding: 10px 20px; /* فاصله داخلی */
		cursor: pointer; /* نشانگر اشاره‌گر */
		border-radius: 12px; /* گرد کردن گوشه‌ها */
		box-shadow: 0 4px 6px rgba(0, 0, 1, 2.3); /* سایه برای ایجاد افکت سه‌بعدی */
			transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* انیمیشن تغییر اندازه و سایه */ 
			border-radius: 20px; /* گرد کردن گوشه‌ها */
			margin-right:10px;
			margin-left:10px;
			margin-top:10px;
			margin-bottom:10px;

   
	}
	
	/* استایل برای حالت hover */
	.top-bar button:hover {
		background-color: #606060; /* تغییر رنگ پس‌زمینه هنگام hover */
		box-shadow: 0 4px 6px rgba(0, 0, 1, 2.3); /* سایه برای ایجاد افکت سه‌بعدی */
			transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* انیمیشن تغییر اندازه و سایه */ 
			border-radius: 20px; /* گرد کردن گوشه‌ها */
			margin-right:10px;
			margin-left:10px;
			margin-top:10px;
			margin-bottom:10px;

	}
	
		
		 
		.top-bar button:hover {
			background-color: #008000; /* رنگ پس‌زمینه سبز در حالت هاور */
			box-shadow: 0 6px 12px rgba(0, 0, 0, 1.4); /* سایه قوی‌تر در حالت هاور */
			transform: scale(1.1); /* بزرگتر کردن دکمه به اندازه 10% */
			 
			box-shadow: 0 4px 6px rgba(0, 0, 1, 2.3); /* سایه برای ایجاد افکت سه‌بعدی */
			transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* انیمیشن تغییر اندازه و سایه */ 
			border-radius: 20px; /* گرد کردن گوشه‌ها */
			margin-right:10px;
			margin-left:10px;
			margin-top:10px;
			margin-bottom:10px;

		}


 .menu, .submenu, .submenu1, .submenu3, .submenu4, .submenu5, .submenu6, .submenu7 {
    display: none;
    position: absolute;
    height: auto;
    width: 220px;
    background-color: #E0FFFF;
    text-align: right;
    z-index: 1000;
    border-radius: 20px;
    /* انیمیشن‌ها و سایه‌های ساده‌تر برای سازگاری بیشتر */
}

.menu a, .submenu a {
    color: black;
    padding: 12px;
    text-decoration: none;
    display: block;
    font-family: B Zar;
    font-weight: bold;
    font-size: 17px;
    margin: 10px;
    border-radius: 20px;
}

.menu a:hover, .submenu a:hover {
    background-color: #008000;
    border-radius: 20px;
    margin: 10px;
    /* سایه ساده‌تر */
    box-shadow: 0 3px #003f7f;
}

.menu a:active, .submenu a:active {
    box-shadow: 0 2px #003f7f;
    margin: 10px;
}

.submenu {
    top: 0;
    right: 100%;
    /* بدون سایه‌های پیچیده برای سازگاری بیشتر */
}

@media (max-width: 768px) {
    .menu, .submenu, .submenu3, .submenu4, .submenu5, .submenu6, .submenu7 {
        position: static;
        width: 95%;
        padding: 10px;
        margin: 10px 0;
    }
}

.submenu3 {
    background-color: #D3D3D3;
    height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 5px solid #888;
    direction: rtl;
    padding-right: 20px;
    box-sizing: border-box;
}

/* برای مرورگرهایی که از وب‌کیت پشتیبانی می‌کنند */
::-webkit-scrollbar {
    width: 12px; /* عرض اسکرول‌بار */
}

::-webkit-scrollbar-thumb {
    background-color: #888; /* رنگ اسکرول‌بار */
    border-radius: 6px; /* گردی گوشه‌ها */
}

::-webkit-scrollbar-track {
    background: #f1f1f1; /* رنگ پس‌زمینه‌ی مسیر اسکرول‌بار */
}


@media (max-width: 600px) {
    hr {
        border: 1px solid black;
    }
}