:root{   
	--color1:#FF6600;
    --color2:#ff983f;
    --color3:#ffffa1;
    --color4:#F5F5F5;
    --color5:#929292;
    --color6:#1d1f21;
    --color7:#444648;
	--color8:#ffffff;
	--color9:#cccccc;
	--bg-color:#929292;
}
@font-face{
font-family: vazir;
src: url('../fonts/Vazir.woff2');
}
*{
box-sizing: border-box;
}
html,body{
	scroll-behavior: smooth;
}
html{
	font-size: 14px;
}
body{
	font-family: vazir;
	background-attachment: fixed;
	background: var(--color5);
	background-image: linear-gradient(to top, #d5d4d0 0%, #d5d4d0 1%, #eeeeec 31%, #efeeec 75%, #e9e9e7 100%);
	line-height: 20px;
}
h1{
	font-family: vazir;
	src: url('../fonts/Vazir.woff2');
	text-align: center;
	margin: 19px;
	border: #ffa200 solid 10px;
	border-radius: 50px;
	background-color: #FFa200;
}
h2,h3,h4,h5,h6{
	src: url('../fonts/Vazir.woff2');
}
p-bg{
	text-align: justify;

}
a{
	text-decoration: none;
	color: var(--color7);
}
a:hover{
	color: var(--color6);
}
#up{	
	position: fixed;
	width: 50px;
	right: 10px;
	bottom: 40px;
	aspect-ratio: 1;
	margin: 0 auto;
	background-image: url(../../../images/up.jpg);
}
#up:hover{
	transform: scale(1.1);
}
main{
	display: grid;
	grid-template-columns: 200px auto;
	grid-template-rows: 170px auto 100px;
	grid-template-areas: 
	'header header'
	'aside article'
	'footer footer'
	;
	gap: 10px;
	width: 950px;
	/*min-height: 100vh;*/
	margin: 0 auto;
	padding: 10px;
	border: 10px solid transparent;
	border-image: url(../images/border.png) 20% stretch;
 	/*background-color: white;*/
}
	header,aside,article,footer{ 
	/*background-color: var(--color8);*/
	border-radius: 6px;
	width: 100%;
}
header{
	grid-area: header;
	padding: 10px 10px 0px 0px;
}
aside{
	grid-area: aside;
	padding-top: 0px;
	padding-bottom: 0px;
}
article{
	grid-area: article;
	padding: 10px;
	background-color: var(--color8);
}
footer{
	grid-area: footer;
	text-align: center;
	direction: ltr;
	
}
/*#main-menu{
	display: none;
}
#main-menu ul{
	list-style-type: none;
	margin: 0 ;
	padding: 0;
}
#main-menu ul li a{
	list-style-type: none;
	padding: 6px 10px;
	margin: 0 auto 3px;
	width: 80%;
	height: 80%;
	display: block;
	background-color: var(--bg-color);
	color: var(--color8);
	border-radius: 20px;
	transition: 0.3s;
	text-align: center;
}
#main-menu ul li a:hover{
	background-color: var(--color1);
	color: var(--color8);
	box-shadow: var(--color3);*/

/*#nav ul{
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: center;
}
#nav ul li{
	display: inline-block;
}
#nav ul li a{
	padding: 5px;
	border-radius: 7px 7px 0px 0px;
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--bg-color);
	color: var(--color8);
	transition: 0.3s;
}
#nav ul li a:hover{
	background-color: var(--color1);
}*/
@keyframes logoPlay{
	from{
		transform: translate(-300px);
		opacity: 0;
	}
	to{
		transform: translate(0px);
		opacity: 1;
	}
}
#logo{
animation: logoPlay 1s;
}
@keyframes menuPlay{
	0%{
		transform: translate(300px);
		opacity: 0;
	}
	50%{
		transform: translate(-30px);
	}
	100%{
		transform: translate(0px);
		opacity: 1;
	}
}
#main-menu ul li{
	opacity: 0;
	animation: menuPlay 1.7s forwards;
	}
	@keyframes navPlay{
	0%{
		transform: translateY(300px);
		opacity: 0;
	}
	50%{
		transform: translateY(-30px);
	}
	100%{
		transform: translateY(0px);
		opacity: 1;
	}
}
/*#nav ul li{
	opacity: 0;
	animation: navPlay 0.6s forwards;
	}*/
#gallery{
	text-align: center;
}
gallery img{
	transition: 0.2s;
	width: 130px;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
	margin: 7px;
}
.scroll-div{
	width: 100%;
	height: 500px;
	overflow-y: scroll;
}
/* Medium Screen */
@media screen and (max-width: 1024px){
	main{
		width: 100%;
	}
	.login-box{
	display: none;
}
	/*#nav{
		display: none;
	}
	#main-menu{
		display: inherit;
	}*/
}
/* Small Screen */
@media screen and (max-width: 500px){
	main{
		grid-template-columns: auto;
		grid-template-rows: auto auto auto auto;
		grid-template-areas: 
		'header'
		'article'
		'aside'
		'footer'
		;
	}
.login-box{
	display: none;
}
  .login-box {
    position: static;
    width: auto;
    margin: 0;
  }
}
.custom-navbar{
	background-color: #ffbf50 !important;
}
.login-box{
	position: absolute;
	top: 180px;
	left: 340px;
	width: 200px;
	height: 45px;
	background: orange;
	border-radius: 20px;
	z-index: 1000;
	font-size: 17px;
	color: #000;
}
.login-box:hover{
	box-shadow: 0 8px 20px rgba(256,165,0,0.5) !important;
	transform: scale(1.03) !important;
	background-color: orange !important;
	color: #000 !important;
}
.btn{
	border: none !important;
	box-shadow: none !important;
}
/* تیتر آکاردیون در حالت عادی */
.accordion-button {
  color: #000 !important;              /* نوشته همیشه مشکی */
  background-color: #fff !important;   /* پس‌زمینه سفید */
}

/* وقتی موس میره روش */
.accordion-button:hover {
  color: #000 !important;              /* نوشته همچنان مشکی */
  background-color: #ffe5cc !important; /* نارنجی خیلی روشن */
}

/* وقتی باز (active) هست */
.accordion-button:not(.collapsed) {
  color: #000 !important;              /* نوشته مشکی */
  background-color: #ffa500 !important; /* پس‌زمینه نارنجی */
  box-shadow: none !important;         /* سایه آبی حذف */
}

/* فوکوس (کلیک یا تب) → سایه نارنجی */
.accordion-button:focus {
  border-color: #ffa500 !important;
  box-shadow: 0 0 0 0.25rem rgba(255, 165, 0, 0.5) !important;
}

/* متن داخل آکاردیون */
.accordion-body {
  color: #000 !important; /* متن مشکی */

}
/* برای تمام input و textarea داخل مودال */
.modal .form-control:focus {
    border-color: orange !important;
    box-shadow: 0 0 0 0.25rem rgba(255,165,0,0.5) !important; /* سایه نارنجی */
}

/* برای تمام دکمه‌ها داخل مودال */
.modal .btn:focus {
    box-shadow: 0 0 0 0.25rem rgba(255,165,0,0.5) !important; /* سایه نارنجی */
}
/* تغییر focus برای دکمه بستن مودال */
.modal .btn-close:focus {
    outline: none !important; /* حذف خط آبی */
    box-shadow: 0 0 0 0.25rem rgba(255,165,0,0.5) !important; /* سایه نارنجی */
}
.header {
  display: flex;
  justify-content: space-between; /* لوگو و دکمه در دو طرف */
  align-items: center;
  padding: 10px 20px;
}

/* حالت دسکتاپ: دکمه در کنار محتوا (می‌تونه جای دیگه هم باشه) */
.my-button {
  display: block;
}

/* حالت موبایل: دکمه کنار لوگو */
@media (max-width: 768px) {
  .header {
    flex-direction: row; /* لوگو و دکمه کنار هم */
  }
  .my-button {
    display: block;
    margin-left: 10px; /* فاصله از لوگو */
  }
}
.card-img:hover{
	transform: scale(1.02);
}
.arimg{
	margin-top: 10px;
	margin-bottom: 10px;
	border-radius: 10px;
}
#details{
	border: 10px solid #ffbf50;
	background-color: #ffbf50;
	width: 30%;
	border-radius: 40px;
	line-height: 20px;
}
.p1{
	transform: scale(1.02);
}
.pz{
border: #ffbf50 10px solid;
background-color: #ffbf50;
border-radius: 20px;
margin: 20px;
width: 200px;
}
/* ===============================
   Input و Textarea
   =============================== */
.login-form .form-control {
    border-color: orange !important; /* حالت عادی */
}

.login-form .form-control:focus,
.login-form .form-control:focus-visible {
    border-color: orange !important;
    box-shadow: 0 0 0 0.25rem rgba(255,165,0,0.5) !important;
    outline: none !important;
}

/* ===============================
   Select
   =============================== */
.login-form .form-select {
    border-color: orange !important; /* حالت عادی */
}

.login-form .form-select:focus,
.login-form .form-select:focus-visible {
    border-color: orange !important;
    box-shadow: 0 0 0 0.25rem rgba(255,165,0,0.5) !important;
    outline: none !important;
}

/* ===============================
   Checkbox و Radio
   =============================== */
.login-form .form-check-input {
    accent-color: orange !important; /* رنگ تیک و حاشیه */
    border-color: orange !important;
}

.login-form .form-check-input:focus,
.login-form .form-check-input:focus-visible,
.login-form .form-check-input:hover {
    outline: none !important;
    box-shadow: 0 0 0 0.25rem rgba(255,165,0,0.5) !important;
    border-color: orange !important;
}

/* ===============================
   Button ها
   =============================== */
.login-form button.btn,
.login-form input[type="submit"].btn {
    border-color: orange !important; /* حالت عادی */
    background-color: #ff9900 !important; /* نارنجی */
    color: #fff !important;
}

/* حالت hover و focus دکمه‌ها */
.login-form button.btn:hover,
.login-form button.btn:focus,
.login-form button.btn:focus-visible,
.login-form input[type="submit"].btn:hover,
.login-form input[type="submit"].btn:focus,
.login-form input[type="submit"].btn:focus-visible {
    border-color: orange !important;
    background-color: #ff9900 !important;
    box-shadow: 0 0 0 0.25rem rgba(255,165,0,0.5) !important;
    color: #fff !important;
}

/* ===============================
   دکمه × (بستن مودال)
   =============================== */
.login-form .btn-close {
    color: orange !important; /* حالت عادی */
}

.login-form .btn-close:focus,
.login-form .btn-close:focus-visible,
.login-form .btn-close:hover {
    outline: none !important;
    box-shadow: 0 0 0 0.25rem rgba(255,165,0,0.5) !important;
    color: orange !important;
}
/* Input و Textarea */
.orange-form .form-control {
    border-color: orange;
}

.orange-form .form-control:focus {
    border-color: orange;
    box-shadow: 0 0 0 0.25rem rgba(255,165,0,0.5);
}

/* Checkbox */
.orange-form .form-check-input {
    accent-color: orange;
}

/* Button */
.orange-form button.btn {
    background-color: #ff9900;
    border-color: orange;
    color: #fff;
}

.orange-form button.btn:hover,
.orange-form button.btn:focus {
    background-color: #ff9900;
    box-shadow: 0 0 0 0.25rem rgba(255,165,0,0.5);
}
.orange-form .form-select {
    border-color: orange;
}

.orange-form .form-select:focus {
    border-color: orange !important;
    box-shadow: 0 0 0 0.25rem rgba(255,165,0,0.5) !important;
}
.site{
	text-align: center;
	display: inline-block;
	border: 3px solid #ffbf50;
	background-color: #ffbf50;
	width: 150px !important;
	border-radius: 20px;
	line-height: 40px;
	transition: all 0.3 ease;
}
.site:hover{
	transform: scale(1.02);
}

        .site-card {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        }

        .site-card h2 {
            margin-bottom: 8px;
        }

        .site-card a {
            display: block;
            margin-top: 8px;
            color: #0d6efd;
            text-decoration: none;
        }

        .site-card a:hover {
            text-decoration: underline;
        }