/* قالب مدرن APB — مرداد ۱۴۰۴ (نسخهٔ اصلاح‌شده و ارتقاء‌یافته) */

/* تعریف متغیرهای رنگی پایه برای استفاده در کل قالب */
:root {
  --primary: #125d1c;           /* سبز تیره — رنگ اصلی برند و هدر */
  --primary-light: #4CAF50;     /* سبز روشن — برای هاور و نوارهای ثانویه */
  --primary-dark: #0e4715;      /* سبز تیره‌تر — برای هاور منو */
  --orange: #d46f17;            /* نارنجی — برای هاور لینک‌ها */
  --accent: #8BC34A;            /* سبز زیتونی — برای دکمه‌های عملیاتی */
  --accent-dark: #689F38;       /* سبز زیتونی تیره‌تر — برای حالت هاور دکمه‌ها */
  --neutral: #F5F5F5;           /* خاکستری خیلی روشن — پس‌زمینهٔ عمومی صفحه */
  --text-dark: #333333;         /* خاکستری تیره — رنگ متن اصلی */
  --text-light: #FFFFFF;        /* سفید — برای متن روی پس‌زمینه‌های تیره */
  --shadow: rgba(0, 0, 0, 0.1); /* سایهٔ ملایم برای ایجاد عمق بصری */
  --gradient: linear-gradient(135deg, #125d1c, #4CAF50); /* گرادیان سبز — نوار بالایی */
  --mint-green: #A5D6A7;        /* سبز نعنایی — برای پس‌زمینهٔ بخش‌های خاص */
  --teal: #009688;              /* سبز آبی — برای دکمه‌های ثانویه و آیکون‌ها */
  --teal-dark: #00796B;         /* سبز آبی تیره‌تر — برای هاور دکمه‌های ثانویه */
}

/* تنظیمات پایهٔ صفحه */
body {
  font-family: 'Lato', 'Segoe UI', sans-serif; /* فونت اصلی خوانا و مدرن */
  font-size: 16px;
  line-height: 1.7;
  background-color: var(--neutral); /* پس‌زمینهٔ روشن برای خوانایی بهتر */
  color: var(--text-dark);          /* رنگ متن با کنتراست مناسب */
  margin: 0;
}

/* تیترها با فونت برند و رنگ سازمانی */
h1, h2, h3, h4 {
  font-family: 'Raleway', sans-serif; /* فونت تیترها با حس رسمی‌تر */
  font-weight: 600;
  color: var(--primary);              /* سبز تیره — رنگ برند */
  margin-top: 0;
}
h1 { font-size: 20px; }     /* کاهش اندازه برای تعادل بصری */
h2 { font-size: 18px; }
h3 { font-size: 17px; }
h4 { font-size: 16px; }

/*~~~~~~~~ نوار بالایی سایت ~~~~~~~~~~*/
.navbar-default {
  background: var(--gradient);        /* گرادیان سبز برند */
  border: none;
  box-shadow: 0 2px 6px var(--shadow); /* سایهٔ ملایم برای جدا شدن از محتوا */
}
.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a {
  color: var(--text-light);           /* سفید — خوانا روی گرادیان تیره */
  font-weight: 500;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-brand:hover {
  color: var(--orange);               /* نارنجی هنگام هاور */
}

/*------------- منوی کشویی ----------------------------------*/
.navbar-default .dropdown-menu {
  background-color: var(--primary);   /* سبز تیره — هماهنگ با هدر */
  border-radius: 0 0 6px 6px;
  box-shadow: 0 4px 8px var(--shadow); /* سایه برای برجسته‌سازی */
}
.navbar-default .dropdown-menu > li > a {
  color: var(--text-light);           /* سفید — خوانا روی زمینهٔ تیره */
}
.navbar-default .dropdown-menu > li > a:hover {
  background-color: var(--primary-dark); /* سبز تیره‌تر هنگام هاور */
  color: var(--orange);                   /* نارنجی هنگام هاور */
}

/* رفع مشکل رنگ منوی والد هنگام باز شدن منوی کشویی */
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .open > a:hover {
  background-color: var(--primary);     /* همان رنگ زمینهٔ هدر */
  color: var(--text-light);             /* سفید — خوانا روی زمینهٔ تیره */
}
.navbar-default .navbar-nav > .open > a:hover {
  color: var(--orange);                 /* رنگ نارنجی هنگام هاور */
}

/*############# بخش جامبوترون (معرفی اولیه) ###################*/
.jumbotron {
  padding: 80px 20px 40px;
  background-color: #fff;                 /* سفید — تمایز با پس‌زمینهٔ صفحه */
  box-shadow: 0 4px 12px var(--shadow);   /* سایهٔ عمیق‌تر برای برجسته‌سازی */
  border-radius: 8px;
}
.jumbotron h1 {
  font-size: 18px;                        /* اندازهٔ متعادل برای تیتر */
  font-weight: 500;
}
.jumbotron p {
  font-size: 17px;
  color: #555;                            /* خاکستری متوسط — خوانا و ملایم */
}
.jumbotron a {
  color: var(--primary);                 /* لینک‌ها با رنگ برند */
  text-decoration: underline;
}
.jumbotron a:hover {
  color: var(--mint-green);             /* سبز نعنایی هنگام هاور */
}

/* ========================== دکمه‌ها =============== */
.btn {
  border-radius: 6px;
  padding: 10px 20px;
  font-weight: 500;
  transition: all 0.3s ease;
}
.btn-primary {
  background-color: var(--accent);       /* سبز زیتونی — رنگ اصلی دکمه */
  border: none;
  color: var(--text-light);              /* سفید — خوانا روی دکمهٔ رنگی */
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--accent-dark);  /* سبز زیتونی تیره‌تر هنگام هاور */
  color: var(--text-light);
  box-shadow: 0 2px 6px var(--shadow);   /* سایهٔ ملایم هنگام هاور */
}

/* دکمهٔ ثانویه با رنگ سبز آبی */
.btn-secondary {
  background-color: var(--teal);         /* سبز آبی */
  border: none;
  color: var(--text-light);
}
.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--teal-dark);    /* سبز آبی تیره‌تر هنگام هاور */
  box-shadow: 0 2px 6px var(--shadow);
}

/* دکمهٔ گرد برای آیکون‌ها یا عملیات خاص */
.btn-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  text-align: center;
  padding: 8px 0;
  font-size: 16px;
  line-height: 1.6;
}

/* =============== پنل‌ها (باکس‌های محتوا) =========*/
.panel {
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 6px var(--shadow);   /* سایهٔ ملایم برای عمق بصری */
  transition: box-shadow 0.3s ease;
  background-color: #fff;
  border-left: 4px solid var(--accent);  /* نوار سبز در سمت چپ پنل */
}
.panel:hover {
  box-shadow: 0 6px 16px var(--shadow);  /* سایهٔ بیشتر هنگام هاور */
}
.panel-heading {
  background-color: var(--accent-dark);  /* رنگ سبز زیتونی تیره برای تیتر پنل */
  padding: 12px 16px;
  font-weight: 600;
  border-radius: 8px 8px 0 0;
}
.panel-footer {
  border-top: 1px solid var(--accent);   /* خط جداکننده با رنگ برند */
  padding: 10px 16px;
  border-radius: 0 0 8px 8px;
}

/* ===================کنترل اسلایدر (چپ و راست) ==================*/
.carousel-control.left,
.carousel-control.right {
  background-image: none;
  color: var(--accent);                  /* رنگ برند برای آیکون‌های کنترل */
  font-size: 24px;
}

/* ================آیکون‌های فوتر ========================*/
footer {
  background: linear-gradient(to right, var(--primary),