* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%; 
    width: 100%;
}

body {
    color: #ffffff !important; /* تغییر رنگ متن‌های اصلی به سفید برای خوانایی بهتر روی مشکی */
	background-size: ;
    background-position: top; 
    background-repeat:  repeat; 
             /* فعال کردن Flexbox برای Body */
    justify-content: center;    /* وسط چین کردن افقی */
      /* وسط چین کردن عمودی */
    min-height: 100vh;          /* اطمینان از اینکه ارتفاع body حداقل اندازه کل صفحه باشد */
    margin: 0;                  /* حذف مارجین پیش‌فرض مرورگر */
    padding: 0;
}

/* --- استایل‌های هدر و منو --- */
.main-header {
    text-align: center;
    background: rgba(0,0,0,0.9);
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 1000000000000000000000000000000000000000000;
    width: 100%;
	opacity:90%;
}

.logo-container {
    margin-bottom: 8px;
}
.logo {
    height: 150px;
    max-width: 100%;
	transition: transform 0.2s ease-in-out; /* انیمیشن نرم برای بزرگ شدن */
	cursor: pointer; /* نشانگر ماوس عوض شود */
}
.logo-container img:hover {
  transform: scale(1.2); /* عکس ۱.۱ برابر بزرگ می‌شود */
  z-index: 0;           /* مطمئن می‌شویم روی المان‌های دیگر نرود */
}

.navbar {
    background: rgba(0,0,0,0);
	position: sticky; /* خاصیت چسبندگی را فعال می‌کند */
	top: 0;           /* تعیین می‌کند که تب از چه فاصله‌ای به "بالای صفحه" (viewport) بچسبد */
	z-index: 1000; 
	padding: 10px 0;
}
.nav-tabs {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
	transition: transform 0.8s ease-in-out; /* انیمیشن نرم برای بزرگ شدن */
	cursor: pointer; /* نشانگر ماوس عوض شود */
	position: sticky; /* خاصیت چسبندگی را فعال می‌کند */
	top: 0;           /* تعیین می‌کند که تب از چه فاصله‌ای به "بالای صفحه" (viewport) بچسبد */
	z-index: 1000;
	
}


.a {
	color: #fff;
	width:150%;
	margin-right:-25%;
	transition: transform 0.8s ease-in-out; /* انیمیشن نرم برای بزرگ شدن */
	cursor: pointer; /* نشانگر ماوس عوض شود */
}

.b {
	color:#777;
	transition: transform 0.8s ease-in-out; /* انیمیشن نرم برای بزرگ شدن */
	cursor: pointer; /* نشانگر ماوس عوض شود */
}

.nav-tabs a {
    
    text-decoration: none;
    font-size: 18px;
    padding: 5px 3px;
    display: block;
	transition: transform 0.3s ease-in-out; /* انیمیشن نرم برای بزرگ شدن */
	cursor: pointer; /* نشانگر ماوس عوض شود */
}

.nav-tabs a:hover {
	color: #fff;
    background: #222;
    border-radius: 6px;
	margin-right:-5%;
	width: 110%;
	height:110%;
	transform: scale(1.3); /* عکس ۱.۱ برابر بزرگ می‌شود */
	z-index: 0;           /* مطمئن می‌شویم روی المان‌های دیگر نرود */
}

	
.new-image-container {
    width: 20%; /* اندازه عکس تغییری نمی‌کند */
    float: right; /* عکس از سمت چپ شناور می‌شود */
    margin-right: 26%; /* فاصله از لبه چپ صفحه */
    margin-top: -.5%; /* فاصله از بالای اسلایدشو */
    padding-right: 1%; /* فاصله از سمت راست خود عکس (اگر متن کنارش بود) */
    box-sizing: border-box; /* برای اینکه padding و margin در عرض حساب شوند */
	z-index: 0;
}

.new-image-container img {
    width: 100%; /* عکس عرض کانتینر خود را پر می‌کند */
    height: auto; /* ارتفاع به طور خودکار تنظیم می‌شود */
    display: block; /* حذف فضای اضافی زیر عکس */
	transition: transform 0.5s ease-in-out;
	cursor: pointer;
	z-index: 0;
}

.new-image-container img:hover{
	transform: scale(1.1);
}
.new-image-container01 img:hover{
	transform: scale(1.1);
}
.new-image-container01 {
    width: 20%; /* اندازه عکس تغییری نمی‌کند */
    float: left; /* عکس از سمت چپ شناور می‌شود */
    margin-left: 26%; /* فاصله از لبه چپ صفحه */
    margin-top: -.5%; /* فاصله از بالای اسلایدشو */
    padding-right: 1%; /* فاصله از سمت راست خود عکس (اگر متن کنارش بود) */
    box-sizing: border-box; /* برای اینکه padding و margin در عرض حساب شوند */
	z-index: 0;
}

.new-image-container01 img {
    width: 100%; /* عکس عرض کانتینر خود را پر می‌کند */
    height: auto; /* ارتفاع به طور خودکار تنظیم می‌شود */
    display: block; /* حذف فضای اضافی زیر عکس */
	transition: transform 0.5s ease-in-out;
	cursor: pointer;
	z-index: 0;
}
/*بک*/


.shape-b, .shape-c img{
	z-index: 0;
	width: 100%;
}
.shape-b, .shape-c img{
	width: 100%;
	z-index: 0;
}
.shape-c {
	width:50%;
	z-index: 0;

}
.shape-a img{
	margin-top: 5%;
	width: 100%;
	z-index: 0;
}



.ico img{
	width: 100%;
	transition: transform 0.5s ease-in-out;
	z-index: 0;

}
.live-c {
    display: flex;
    justify-content: center; /* وسط‌چین کردن افقی */
    align-items: center;     /* وسط‌چین کردن عمودی (اگر ارتفاعی داشته باشد) */
	z-index: 0;
}
.ico img:hover{
	opacity:100%;
	transform: scale(1.1);
}
.bottom {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 100px;
	margin: 0;
	padding: 0;
	object-fit: cover;
	margin-top: 3%;
	margin-right: -40%;
	flex-wrap: wrap;
	z-index: 0;
}
.address img{
	width: 100%;
	height: 10%;
	margin-right:0px;
	z-index: 0;
	
}
.rah {
	width: 15%;
	margin-right: 735px;
	z-index: 0;
}
.rah img{
	opacity: 60%;
	transition: transform 0.3s ease-in-out;
	margin-right: 0px;
	z-index: 0;
}
.rah img:hover{
	opacity:100%;
}
.ico img:hover{
	opacity:80%;
	transform: scale(1.1);
}
.nava-rah {
	
	display: flex;           /* چیدن عکس‌ها در یک ردیف */
	flex-direction: column;
	margin-top:1.2%;
	margin-right:0%;
	justify-content: right; /* وسط‌چین افقی */
	gap: 30px;               /* فاصله بین عکس‌ها */
	flex-wrap: wrap;
	z-index: 0;
	         /* برای واکنش‌گرایی در موبایل */
}

.nava-rah img {
  width: 100px;            /* عرض ثابت اولیه */
  height: ;
  opacity:60%;
  z-index: 0;
  
  /* --- تنظیمات انیمیشن و افکت ماوس --- */
  transition: transform 0.3s ease-in-out; /* انیمیشن نرم برای بزرگ شدن */
  cursor: ; /* نشانگر ماوس عوض شود */
}
.chanel {
    display: flex;
    justify-content: center;
	flex-direction: column;
    gap: 15px;
    flex-wrap: wrap;
	z-index: 0;
}

.chanel img {
    width: 200px;
    height: auto;
    border-radius: 8px;
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
	opacity: 60%;
	z-index: 0;
}

.chanel img:hover {
    transform: scale(1.5);
    z-index: 10;
	opacity: 100%;
}

/* این قسمت، افکت اصلی را اعمال می‌کند */
.nava-rah img:hover {
  transform: scale(1.3); /* عکس ۱.۱ برابر بزرگ می‌شود */
  z-index: 10; 
  opacity:100%;
}

.line-a img{
	width: 1px;
	height: 500px;
	overflow-y: hidden;
	z-index: 0;
}
.soc img{
	width:8%;
	margin-right:1.2%;
	margin-top: -1%;
	z-index: 0;
}

.line-b img{
	width: 1px;
	height: 500px;
	overflow-y: hidden;
	z-index: 0;
}
.ni {
	z-index: 0;
}	
.links {
    display: flex;
    justify-content: center;
	flex-direction: column;
    gap: 15px;
    flex-wrap: wrap;
	z-index: 0;
}

.links img {
    width: 200px;
    height: auto;
    border-radius: 8px;
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
	opacity: 60%;
	z-index: 0;
}

.links img:hover {
    transform: scale(1.5);
    z-index: 0;
	opacity: 100%;
}
.ni img:hover{
	opacity:100%;
	transform: scale(1);
}

.shape-c {
	opacity: 00%;
	z-index: 0;
}
.shape-b{
	width:100%
	z-index: 0;
}
.shape-a, .shape-b, .line-a, .line-b {
	opacity: 50%;
	z-index: 0;
}
.line-a, .line-b {
	overflow-y: hidden;
	z-index: 0;
}
.rah-a {
	display: none;
	z-index: 0;
}
.hidden {
	display: none;
}
/* --- واکنش‌گرایی موبایل --- */
@media (max-width: 1000px) {
    
    .bottom {
        /* تغییر اصلی: حالت چیدمان را از افقی به عمودی تغییر می‌دهیم */
        flex-direction: column;
        
        /* این دو خط را برای چیدمان عمودی معمولاً نیاز نداریم یا باید تغییر کنند */
        justify-content: center; 
        margin-right: 0; /* مارجین راست بزرگ را برای موبایل برمی‌داریم */
        align-items: center; /* برای مرکز چین کردن عمودی */
    }

    .bottom img {
        /* عرض تصاویر را در موبایل، کل عرض کانتینر (یا نزدیک به آن) در نظر می‌گیریم */
        width: 80%; /* مثلاً ۸۰٪ عرض صفحه */
        max-width: 300px; /* اگر عکس‌ها بزرگ بودند، یک حداکثر عرض تعیین می‌کنیم */
        /* ارتفاع خودکار برای حفظ نسبت تصویر */
        height: auto; 
    }

    /* اگر فاصله بین عکس‌ها (gap) در حالت عمودی زیاد است، آن را کاهش دهید */
    .bottom {
        gap: 30px; /* مثلاً به جای 60px، فاصله کمتری بگذاریم */
    }
	.rah-a {
		display: flex;
		place-items: center;
		justify-content: center;
		align-items: center;
		opacity: 60%;
	}
	.rah-a img{
		display: flex;
		width: 40%;
		place-items: center;
		justify-content: center;
		align-items: center;
		margin-right: 28%;
		margin-top: 8%;
	}
	.rah {
		display: none;
	}
	.line-a, .line-b {
		display: none;
	}
	.nava-rah {
	
		display: flex;           /* چیدن عکس‌ها در یک ردیف */
		margin-top:1.2%;
		width: 20%;
		margin-right:0%;
		justify-content: right; /* وسط‌چین افقی */
		gap: 30px;               /* فاصله بین عکس‌ها */
		opacity:100%
	         /* برای واکنش‌گرایی در موبایل */
	}

	
}