/* --->> input text */

.input-limited {                         /* کلاس برای محدود کردن عرض input */
  width: 30ch;                           /* عرض حدود ۳۰ کاراکتر */
  max-width: 100%;                       /* جلوگیری از خروج از محدوده والد */
  padding: 5px 10px;                     /* فضای داخلی input */
  font-size: 1rem;                       /* اندازه متن داخل input */
  font-family: Tahoma, sans-serif;      /* فونت مورد استفاده */
  border: 1px solid #ccc;               /* حاشیه خاکستری روشن */
  border-radius: 5px;                   /* گوشه‌های گرد */
  overflow-x: auto;                     /* اسکرول افقی اگر محتوا زیاد شود */
  white-space: nowrap;                  /* جلوگیری از شکستن خط */
}

@media (max-width: 600px) {             /* در نمایشگرهای کوچک */
  .input-limited {
    font-size: 0.9rem;                  /* کوچک‌تر کردن متن */
    width: 8ch;                         /* عرض کوچکتر */
  }
}
/* <<-- input text */


/* --->> button , input button */

.inputB-limited,                        /* کلاس برای input نوع button */
button.inputB-limited {                 /* و همین‌طور برای تگ button */
  width: 15ch;                          /* عرض دکمه ۱۵ کاراکتر */
  max-width: 100%;
  padding: 5px 10px;                    /* فاصله داخلی */
  font-size: 1rem;                      /* اندازه متن دکمه */
  font-family: Tahoma, sans-serif;     /* فونت متن */
  border: 1px solid #ccc;              /* حاشیه دکمه */
  border-radius: 5px;                  /* گردی گوشه‌ها */
  white-space: nowrap;                 /* جلوگیری از رفتن متن به خط بعد */
  direction: rtl;                      /* راست‌چین مناسب فارسی */
  text-align: center;                  /* قرارگیری وسط متن */
}

button.inputB-limited {
  background-color: #04AA6D;           /* رنگ پس‌زمینه دکمه */
  color: white;                        /* رنگ متن */
  cursor: pointer;                     /* نمایش اشاره‌گر هنگام هاور */
  border: none;                        /* بدون حاشیه اضافی */
  transition: background-color 0.3s ease; /* افکت تغییر رنگ هنگام هاور */
}

button.inputB-limited:hover {
  background-color: #038a5c;           /* رنگ دکمه هنگام هاور */
}

@media (max-width: 600px) {
  .inputB-limited,
  button.input-limited {
    font-size: 0.9rem;                 /* کاهش اندازه متن */
    width: 8ch;                        /* کاهش عرض */
  }
}
/* <<--- button , input button */


/* --->> select */

select.custom-select {
  font-family: Tahoma, sans-serif;     /* فونت منوی کشویی */
}
/* <<--- select */


/* ظاهر کلی صفحه */

body {
  background-color: #000;              /* پس‌زمینه مشکی */
  color: #333;                         /* رنگ متن خاکستری تیره */
  font: normal 12px "Tahoma", sans-serif; /* فونت کلی صفحه */
  margin: 0;                           /* حذف حاشیه پیش‌فرض */
}

h1, h2, h3, p, li {
  text-align: right;                   /* راست‌چین برای فارسی */
}

a {
  background-color: inherit;           /* بدون بک‌گراند اضافه */
  color: #333;                         /* رنگ لینک‌ها */
  text-decoration: none;               /* حذف خط زیر لینک */
}
a:hover {
  text-decoration: underline;          /* زیرخط هنگام هاور */
}

blockquote {
  font: italic 12px "Tahoma", serif;   /* استایل فونت برای نقل قول: ایتالیک، سایز ۱۲، فونت Tahoma یا serif */
  width: 70%;                          /* عرض بلوک نقل قول ۷۰٪ از عنصر والد */
  margin: 5px auto;                    /* فاصله بالا و پایین ۵ پیکسل، مرکز چین افقی */
  padding: 10px 50px;                  /* فاصله داخلی: بالا و پایین ۱۰px، چپ و راست ۵۰px */
  position: relative;                  /* موقعیت نسبی برای قرار دادن عنصر ::before به‌صورت مطلق نسبت به آن */
  color: #690;                         /* رنگ متن: سبز زیتونی */
}

blockquote:before {
  display: block;                      /* نمایش بلوکی عنصر before */
  content: "\201c";                    /* محتوای قبل از نقل قول: علامت نقل‌قول باز (“) */
  font: bold 120px "Tahoma", serif;   /* فونت ضخیم با اندازه ۱۲۰px برای علامت نقل‌قول */
  position: absolute;                 /* موقعیت مطلق برای قرارگیری دقیق درون عنصر اصلی */
  left: -20px;                        /* جابه‌جایی به سمت چپ ۲۰px برای بیرون زدن علامت */
  top: -10px;                         /* جابه‌جایی به سمت بالا ۱۰px */
  color: #690;                        /* رنگ علامت نقل قول: سبز زیتونی */
}


/* بک‌گراند بالا و پایین صفحه */
#pseudo-wrap1 {
  background: linear-gradient(to bottom, #80bc00 1%, #8fc800 78%);  /* پس‌زمینه با گرادینت عمودی از رنگ سبز لیمویی روشن به سبز پررنگ */
  height: 195px;                                                    /* ارتفاع باکس 195 پیکسل */
  margin: 0;                                                        /* حذف حاشیه‌های اطراف باکس */
  width: 100%;                                                      /* عرض کامل برابر با عرض صفحه (یا المان والد) */
  z-index: -100;                                                    /* قرار دادن باکس در پشت سایر عناصر با استفاده از z-index منفی */
  position: absolute;                                               /* جای‌گذاری مطلق نسبت به اولین المان والد با موقعیت نسبی یا بیشتر */
  top: 15px;                                                        /* فاصله 15 پیکسلی از بالای صفحه یا والد */
  left: 0;                                                          /* چسباندن باکس به سمت چپ صفحه */
  right: 0;                                                         /* چسباندن باکس به سمت راست صفحه */
}

#pseudo-wrap2 {
  background: linear-gradient(to bottom, #88b503 0%, #000000 98%);  /* پس‌زمینه با گرادینت از سبز تیره به مشکی */
  height: 190px;                                                    /* ارتفاع باکس 190 پیکسل */
  margin: 0;                                                        /* حذف حاشیه‌های اطراف باکس */
  width: 100%;                                                      /* عرض کامل برابر با عرض صفحه (یا المان والد) */
  z-index: -100;                                                    /* قرار دادن باکس در پشت سایر عناصر */
  position: absolute;                                               /* جای‌گذاری مطلق */
  top: 211px;                                                       /* فاصله از بالای صفحه 211 پیکسل (زیر باکس قبلی قرار می‌گیرد) */
  left: 0;                                                          /* چسباندن باکس به سمت چپ */
  right: 0;                                                         /* چسباندن باکس به سمت راست */
}



/* محتوای اصلی */
#wrap {
  width: 80%;                            /* عرض کلی صفحه برابر با ۸۰٪ از عرض کل مرورگر */
  background-color: #fff;               /* پس‌زمینه سفید */
  color: inherit;                       /* به ارث بردن رنگ متن از عنصر والد */
  padding: 0;                           /* بدون فضای داخلی */
  margin: 30px auto 15px auto;         /* فاصله بالا ۳۰px، پایین ۱۵px، وسط‌چین افقی */
}

#header {
  background: linear-gradient(to bottom, #7fb50c 0%, #61a810 50%, #4ea800 51%, #568e07 100%);
                                        /* پس‌زمینه گرادیان سبز عمودی */
  color: #fff;                          /* رنگ متن سفید */
  height: 200px;                        /* ارتفاع هدر ۲۰۰px */
  box-shadow: 0px 40px 20px -15px #c4d9a3;
                                        /* سایه‌ به پایین برای جلوه سه‌بعدی */
  border: 10px solid #fff;             /* حاشیه سفید ۱۰px از هر طرف */
  border-bottom: 1px solid #fff;       /* فقط پایین با ضخامت کمتر (۱px) */
}

#header h1 {
  text-align: center;                  /* تراز وسط برای عنوان */
  margin: 80px auto 0 auto;            /* فاصله بالا ۸۰px، وسط‌چین افقی */
}

#header a {
  background-color: inherit;           /* پس‌زمینه از والد به ارث می‌برد */
  color: #fff;                          /* رنگ لینک‌ها سفید */
  text-decoration: none;               /* حذف خط زیر لینک */
}

#header p {
  text-align: center;                  /* متن پاراگراف وسط‌چین */
  margin: 0 auto;                      /* بدون فاصله عمودی، وسط‌چین افقی */
}

#content {
  text-align: left;                    /* متن درون محتوا از سمت چپ شروع می‌شود */
  width: 90%;                          /* عرض ۹۰٪ از عنصر والد */
  padding: 0 25px 10px 25px;           /* فضای داخلی چپ و راست ۲۵px، پایین ۱۰px */
  margin: 0 auto;                      /* وسط‌چین افقی */
}

#content h2 {
  margin: 0 auto;                      /* تراز وسط برای تیتر h2 */
}

#content h3 {
  color: #690;                         /* رنگ سبز تیره برای h3 */
  font: bold 12pt Arial, sans-serif;  /* فونت Arial با اندازه ۱۲pt و ضخیم */
}

#content span.author {
  font: normal 8pt Arial, Helvetica, sans-serif;
                                        /* فونت معمول با اندازه ۸pt برای نویسنده */
  color: #666;                         /* رنگ خاکستری متوسط */
}

#content span.author a {
  color: #999;                         /* رنگ لینک‌ها در نویسنده خاکستری روشن */
  padding: 0 3px;                      /* فضای افقی ۳px بین لینک‌ها */
}

#content span.author a:hover {
  background-color: #690;              /* هنگام هاور، پس‌زمینه سبز */
  color: #fff;                         /* رنگ متن سفید هنگام هاور */
}

#content p a {
  color: #690;                         /* رنگ لینک داخل پاراگراف سبز */
  text-decoration: underline;         /* خط زیر لینک نمایش داده می‌شود */
}

#content p {
  text-align: justify;                /* تراز پاراگراف به صورت تمام‌عرض (justify) */
  line-height: 24px;                  /* فاصله بین خطوط ۲۴px */
}

#content p.center {
  text-align: center;                 /* پاراگراف‌هایی با کلاس center، وسط‌چین می‌شوند */
}


/* فوتر */

#footer {
  background: linear-gradient(to bottom, #7fb50c 0%, #61a810 50%, #4ea800 51%, #568e07 100%);
                                        /* گرادیان سبز مشابه هدر */
  color: #fff;                         /* رنگ متن سفید */
  height: 40px;                        /* ارتفاع فوتر ۴۰px */
  text-align: center;                 /* متن وسط‌چین */
  font-size: 12px;                    /* اندازه فونت ۱۲px */
  border: 10px solid #fff;            /* حاشیه سفید ضخیم */
}

#footer a {
  color: #fff;                         /* لینک‌ها در فوتر سفید */
  text-decoration: none;              /* بدون خط زیر لینک */
}

#footer .notice {
  color: #eee;                         /* رنگ خاکستری خیلی روشن */
  line-height: 40px;                   /* ارتفاع خط برابر با فوتر برای عمودی وسط‌چین شدن */
}


/* لوگو */

.logo {
  height: 115px;                      /* ارتفاع لوگو ۱۱۵px */
  width: 263px;                       /* عرض لوگو ۲۶۳px */
  margin: 20px auto 0px auto;         /* فاصله بالا ۲۰px، وسط‌چین افقی */
  background: url(logo.png);          /* بارگذاری تصویر لوگو به عنوان پس‌زمینه */
}









/* منو */
    nav {
      margin: 45px auto;
      text-align: center;
    }

    nav ul {
      background: #f1f4f7;
      box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
      padding: 0 20px;
      border-radius: 10px;
      list-style: none;
      display: inline-table;
    }

    nav ul:after {
      content: "";
      display: block;
      clear: both;
    }

    nav ul li {
      float: right;
      position: relative;
      font-weight: bold;
    }

    nav ul li:hover {
      background: #a70101;
    }

    nav ul li:hover > a {
      color: #fff;
    }

    nav ul li a {
      display: block;
      padding: 10px 10px;
      color: #4e4e4e;
      text-decoration: none;
    }

    /* زیرمنوی سطح اول */
    nav ul > li > ul {
      display: none;
      background: #8fc800;
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      width: 200px;
      border-radius: 8px;
      z-index: 100;
    }

    /* هنگام هاور روی آیتم اصلی، زیرمنو نمایش داده شود */
    nav ul li:hover > ul {
      display: block;
    }

    /* استایل آیتم‌های زیرمنو */
    nav ul ul li {
      float: none;
      border-top: 1px solid #940000;
      border-bottom: 1px solid #940000;
      position: relative;
    }

    nav ul ul li a {
      padding: 8px 10px;
      color: #fff;
    }

    nav ul ul li a:hover {
      background: #112f44;
    }

    /* زیرمنوی سطح دوم و بالاتر */
    nav ul ul ul {
      display: none;
      position: absolute;
      top: 0;
      right: 100%; /* به سمت چپ آیتم والد */
      left: auto;
      transform: none;
      width: 200px;
      background: #00a2ff;
      border-radius: 8px;
    }

    /* هنگام هاور روی آیتم زیرمنو که خودش زیرمنو دارد */
    nav ul ul li:hover > ul {
      display: block;
    }






/* دکمه‌ها */
button { /* استایل‌دهی به دکمه‌ها */
  background-color: #007bff !important; /* رنگ پس‌زمینه آبی روشن برای دکمه */
  color: #fff !important;               /* رنگ متن دکمه سفید */
  cursor: pointer;                      /* تغییر شکل موس هنگام قرارگیری روی دکمه به شکل اشاره‌گر */
  border: none !important;             /* حذف کادر دور دکمه */
  transition: background-color 0.3s ease; /* انیمیشن تغییر رنگ پس‌زمینه با نرمی طی 0.3 ثانیه */
}

button:hover { /* زمانی که موس روی دکمه قرار می‌گیرد */
  background-color: #0056b3 !important; /* تغییر رنگ پس‌زمینه به آبی تیره‌تر برای حالت hover */
}

/* فونت فارسی */

@font-face { /* تعریف فونت سفارشی "B Nazanin" - حالت عادی */
  font-family: 'B Nazanin';             /* نام فونت برای استفاده در CSS */
  src: url('../../fonts/B Nazanin.woff2') format('woff2'), /* آدرس فونت با فرمت WOFF2 */
       url('../../fonts/B Nazanin.woff') format('woff');   /* آدرس فونت با فرمت WOFF */
  font-weight: normal;                  /* وزن فونت نرمال */
  font-style: normal;                   /* استایل فونت معمولی (نه ایتالیک) */
}

@font-face { /* تعریف فونت "B Nazanin" - حالت بولد */
  font-family: 'B Nazanin';             /* همان نام فونت برای حفظ یکپارچگی */
  src: url('../../fonts/B Nazanin Bold.woff2') format('woff2'), /* فونت بولد با فرمت WOFF2 */
       url('../../fonts/B Nazanin Bold.woff') format('woff');   /* فونت بولد با فرمت WOFF */
  font-weight: bold;                    /* وزن فونت بولد */
  font-style: normal;                   /* استایل معمولی */
}

@font-face { /* تعریف فونت "B Nazanin" - حالت ایتالیک */
  font-family: 'B Nazanin';             /* همان نام فونت */
  src: url('../../fonts/B Nazanin Italic.woff2') format('woff2'), /* فونت ایتالیک با فرمت WOFF2 */
       url('../../fonts/B Nazanin Italic.woff') format('woff');   /* فونت ایتالیک با فرمت WOFF */
  font-weight: normal;                  /* وزن فونت نرمال */
  font-style: italic;                   /* استایل فونت ایتالیک */
}

/* ریسپانسیو برای موبایل و تبلت */

@media (max-width: 768px) { /* زمانی که عرض صفحه کمتر از 768 پیکسل باشد (مثلاً تبلت‌ها) */
  html {
    font-size: 15px !important; /* کاهش اندازه فونت پایه برای نمایش بهتر روی صفحات کوچکتر */
  }
  body {
    padding: 1rem !important; /* افزایش فاصله داخلی کل صفحه برای ظاهر بهتر در موبایل */
  }
  h1 {
    font-size: 1.8rem !important; /* کاهش سایز تیتر اصلی */
  }
  h2 {
    font-size: 1.5rem !important; /* کاهش سایز تیتر دوم */
  }
}

@media (max-width: 480px) { /* زمانی که عرض صفحه کمتر از 480 پیکسل باشد (موبایل‌ها) */
  html {
    font-size: 14px !important; /* اندازه فونت پایه حتی کوچکتر برای موبایل */
  }
  h1 {
    font-size: 1.5rem !important; /* تیتر اصلی کوچکتر از قبل برای هماهنگی با صفحه کوچک */
  }
  h2 {
    font-size: 1.3rem !important; /* تیتر دوم هم کوچکتر */
  }
  nav, footer {
    text-align: center !important; /* تراز وسط منو و فوتر در موبایل برای زیبایی بیشتر */
  }
}


/* فرم‌ها و inputها */

input, button {
  width: 100%; /* عرض کامل برای دکمه‌ها و ورودی‌ها */
  padding: 10px; /* فاصله داخلی برای راحتی کاربر */
  margin: 10px 0; /* فاصله بین عناصر فرم */
  border-radius: 5px; /* گوشه‌های گرد برای ظاهر بهتر */
  box-sizing: border-box; /* محاسبه padding و border در داخل عرض مشخص‌شده */
  font-size: 14px; /* سایز خوانای فونت */
}

input {
  border: 1px solid #ccc; /* حاشیه خاکستری نازک برای input */
  background-color: white; /* زمینه سفید برای input */
}

input[type="submit"] {
  background-color: #04AA6D; /* رنگ سبز برای دکمه ارسال */
  color: white; /* متن سفید روی دکمه */
  cursor: pointer; /* تغییر شکل موس هنگام قرارگیری روی دکمه */
}

input[type="submit"]:hover {
  background-color: #038a5c; /* رنگ تیره‌تر در حالت hover برای بازخورد بهتر */
}