/* ============================================================
   tavanpm.com — فایل واحد نهایی (custom-merged.min.css v2)
   نسخه: 2026-07-04 | شامل به‌ترتیب cascade:
   UserSheetFa → ResponsiveStyleSheet → animate-min → لایه‌ی سفارشی
   حذف سراسری: keyframe های تکراری + اعلان‌های بازنویسی‌شده
   ============================================================ */

/* ####===== UserSheetFa =====#### */
body {
  margin: 0;
  padding: 0;
  direction: rtl;
  font-size: 12pt;
  color: #333;
  background-color: white;
}

img {
  border: 0;
}

.DateRegisterEn {
  display: none;
  visibility: hidden;
}

.Row {
  width: 100%;
  float: right;
}

.divAcB {
  display: none;
  visibility: hidden;
}

.RowMarginFive {
  width: 100%;
  float: right;
  margin-top: 5px;
}

.RowMarginTen {
  width: 100%;
  float: right;
  margin-top: 10px;
}

.RowMarginTenB {
  width: 100%;
  float: right;
}

input,
select,
textarea {
  font-family: Vazir, Segoe;
  border-radius: 3px;
}

A:hover {
  color: #677700;
}

A {
  color: Blue;
  text-decoration: none;
}

.listResponsive {
  margin: 0;
  padding: 0;
  float: right;
  text-align: center !important;
  width: 100%;
}

.listResponsive li {
  display: inline-block;
}

.fade {
  -moz-transition: all 0.7s ease-out;
  -o-transition: all 0.7s ease-out;
  -webkit-transition: all 0.7s ease-out;
  transition: all 0.7s ease-out;
}

.LTR {
  float: left;
  direction: ltr;
}

.commentUserSpan {
  float: left;
  font-size: 10pt;
  color: gray;
  margin-top: 12px;
}

.commentUserRight {
  float: right;
  width: 45%;
  margin-top: 10px;
}

.commentUserLeft {
  float: right;
  width: 55%;
  margin-top: 10px;
}

.txtCommentUser {
  height: 25px;
  width: 90%;
}

.searchDivBox {
  width: 380px;
}

.searchDivBoxBox {
  float: right;
  width: 100%;
  border: double 3px #ccc;
  padding: 10px 0;
  border-radius: 10px;
}

.colorA a {
  color: #555;
}

.colorA a:hover {
  color: red;
}

.RatingStarBox {
  float: left !important;
}

/*-----------------------Header Top ------------------*/
.HeaderDownBox {
  float: right;
  position: relative;
  width: 97.8%;
  background-color: #eeeceb;
  padding: 7px 1% 7px 1%;
  margin-top: 20px;
}

.HeaderDownBox .NewsIcon {
  float: right;
  margin-top: 2px !important;
  margin-left: 5px;
  height: 25px;
  width: 25px;
  background: url(../Administrator/Files/Design/NavigationFa.png) no-repeat;
}

.HeaderDownBox img {
  float: right;
  margin-right: 5px;
  margin-top: 10px;
}

.HeaderDownBox a {
  float: right;
  color: #0b3762;
}

.pathHeaderDown {
  width: 16px;
  height: 9px;
  z-index: 9999;
  background: url(../Administrator/Files/Design/path.png) no-repeat;
  float: right;
  margin-top: 9px;
}

.LogoBox {
  width: 270px;
  height: 69px;
  z-index: 9999;
  float: right;
  margin-top: 5px;
  margin-bottom: 5px;
}

.Logo {
  float: right;
  width: 270px;
  height: 69px;
  z-index: 9999;
  background: url(../Administrator/Files/Design/logo.png) no-repeat center;
  margin-top: 0px;
}

.loginBox {
  width: 200px;
  float: left;
  position: absolute;
  left: 250px;
  z-index: 9999;
  margin-top: 0px;
}

.divLeft {
  float: left;
}

.TellTop {
  width: 203px;
  height: 115px;
  background: url(../Administrator/Files/Design/bgTell.png) no-repeat center;
  float: right;
  margin-right: 20px;
  margin-top: 21px;
}

.EmailTop {
  width: 203px;
  height: 19px;
  background: url(../Administrator/Files/Design/bgEmail.png) no-repeat center;
  float: left;
  margin-left: 20px;
  margin-top: 117px;
}

.leftBox {
  float: left;
  width: 135px;
  margin-top: 15px;
}

.LangBox {
  float: left;
  width: 110px;
}

.LangBoxItem {
  float: left;
  margin-right: 10px;
  margin-top: 13px;
}

.LangBoxItem img {
  float: right;
  width: 41px;
  height: 16px;
}

.Tell {
  float: left;
  width: 315px;
  height: 64px;
  z-index: 9999;
  margin-left: 15px;
  background-image: url(../Administrator/Files/Design/Tell.png);
}

.HeaderTopHeaderTop {
  border-bottom: 5px solid #ddd;
}

.HeaderTopHeaderTop.sticky {
  max-height: 79px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.navDiv.sticky {
  /* یا رنگ آبی مورد نظر تو */
}

.HeaderTop {
  width: 100%;
  text-align: center;
  float: right;
}

.HeaderTop1 {
  float: right;
  width: 100%;
  background: white;
  /* رنگ ثابت بده برای جلوگیری از ترنسپرنت */
}

.LogoBoxLeftTop {
  float: right;
  width: 100%;
  height: 45px;
}

.HeaderTop .ItemLeft {
  float: left;
  margin-top: 12px;
  color: #b7b7b7;
  font-size: 9pt;
  padding: 0px 7px 0px 7px;
}

.HeaderTop .ItemLeft img {
  float: right;
  width: 16px;
  height: 16px;
  margin-left: 5px;
  margin-top: 2px;
}

.HeaderTop .ItemLeft:hover {
  color: #fff;
}

/*-----------------------navMenu ------------------*/
.MenuAboutUs {
  float: right;
  width: 200px;
  height: 154px;
  margin-top: 30px;
  margin-right: 288px;
}

.MenuProduct {
  float: right;
  width: 200px;
  height: 160px;
  margin-top: 4px;
  margin-right: 100px;
}

.MenuProject {
  float: right;
  width: 200px;
  height: 154px;
  margin-top: 5px;
  margin-right: 10px;
}

.MenuContactUS {
  float: right;
  width: 200px;
  height: 160px;
  margin-top: 10px;
  margin-right: 126px;
}

.MenuLogo {
  float: right;
  width: 154px;
  height: 181px;
  margin-top: 4px;
  margin-right: 21px;
}

.searchRight {
  float: right;
  width: 200px;
}

.navDiv {
  float: right;
  width: 100%;
  background: #0422a5;
}

#nav {
  display: flex;
  justify-content: center;
  direction: rtl;
  padding: 0;
}

#nav li {
  list-style: none;
  padding: 0 20px;
  position: relative;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  /* خط جداکننده سمت چپ */
}

#nav li:hover>a {
  color: #ffd700;
}

#nav li:last-child {
  border-left: none;
  /* حذف خط از آیتم آخر (سمت چپ‌ترین) */
}

#nav li a {
  color: #fff;
  font-weight: bold;
  font-size: 9pt;
  text-decoration: none;
  display: block;
  padding: 0;
  transition: color 0.3s ease;
}

#nav li a .imgMenu {
  height: 20px;
}

#nav li a p {
  margin: 5px auto;
  text-align: center;
  margin-top: 10px;
}

/* ====== منوی سطح اول ====== */
#nav ul {
  position: absolute;
  right: 0;
  top: 100%;
  pointer-events: none;
  transition: opacity 0.3s ease;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #fff;
  border-radius: 0 !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  z-index: 1000;
}

#nav li:hover>ul {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

#nav ul li {
  width: 230px;
  position: relative;
  border-bottom: 1px solid #eee;
  background: #fff;
  text-align: right;
}

#nav ul li:last-child {
  border-left: 1px solid white;
}

#nav ul li a {
  display: block;
  padding: 8px 14px;
  font-size: 13px;
  color: #222;
  text-decoration: none;
  transition: 0.3s;
}

#nav ul li a:hover {
  background-color: #0071c2;
  color: #fff;
}

/* ====== سطح دوم ====== */
#nav ul li ul {
  position: absolute;
  top: 0;
  right: 100%;
  margin-right: 4px;
  border-radius: 0 !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  background: #fff;
  z-index: 1001;
}

#nav ul li:hover>ul {
  display: block;
}

/* ====== سطح سوم ====== */
#nav ul li ul li ul {
  position: absolute;
  right: 100%;
  top: 0;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 0 !important;
  list-style: none;
  padding: 0;
  margin: 0;
  z-index: 9999;
}

#nav ul li ul li:hover>ul {
  display: block;
}

#nav ul li ul li ul li:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 10px !important;
  /* برابر با سایر آیتم‌ها */
  border-bottom: none !important;
}

#nav ul li ul li ul li:last-child a {
  display: block;
  padding-bottom: 10px !important;
  /* مثل بقیه آیتم‌ها */
  margin-bottom: 0 !important;
}

.ArrowDown2 {
  margin-top: 9px;
}

.ArrowDown3 {
  margin-top: 9px;
  margin-left: 5px;
}

/* ================================================
🎬 ویدیوباکس فول عرض با حفظ نسبت 66.66 درصد
================================================ */
#videoHero {
  position: relative;
  width: 100vw;
  height: auto;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  overflow: hidden;
  z-index: 1;
  box-sizing: border-box;
  padding-bottom: 66.66%;
  /* نسبت 21:14 = 21 / 14 = 0.6666 = 66.66% */
}

/* 🔧 حذف aspect-ratio، چون در ترکیب با margin منفی در حالتی مشکل ایجاد می‌کرد */
#videoHero>video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 🌊 لایه گرادینت آبی و زرد لوگوی توان پی ام */
#videoHero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: linear-gradient(to right,
      rgba(255, 215, 0, 0.4),
      rgba(15, 60, 251, 0.4),
      rgba(15, 60, 251, 0.2));
  pointer-events: none;
}

/* 📱 موبایل: ویدیو تمام ارتفاع صفحه بشود */
@media (max-width: 768px) {
  #videoHero {
    aspect-ratio: auto !important;
    height: 80.95vh !important;
    min-height: 300px !important;
  }
}

/* ================================================
📝 متن روی ویدیو
================================================ */
.videoOverlayText {
  position: absolute;
  top: 35%;
  right: 15%;
  z-index: 3;
  color: #ffffff;
  max-width: 40%;
  text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.7);
  text-align: right;
}

.videoOverlayTitle {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.videoOverlayDescription {
  font-size: 1.2rem;
  line-height: 1.5;
}

/* 📱 موبایل: تغییرات متن در حالت موبایل */
@media (max-width: 768px) {
  .videoOverlayText {
    top: 40%;
    right: 5%;
    left: 5%;
    max-width: 90%;
    text-align: center;
  }

  .videoOverlayTitle {
    font-size: 2rem;
  }

  .videoOverlayDescription {
    font-size: 1rem;
  }
}

/* ================================================
🎯 دکمه‌های شناور روی ویدیو
================================================ */
.videoOverlayButtons {
  position: absolute;
  top: 35%;
  right: 85%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  z-index: 4;
}

/* 🎯 استایل جدید و دقیق دکمه‌های روی ویدیو */
.overlayButton {
  width: 50px;
  height: 50px;
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  text-align: center;
  box-sizing: border-box;
  transition:
    background 1s,
    transform 1s;
}

.overlayButton:hover {
  color: lightgray;
  background: rgba(255, 255, 255, 0.5);
  /* هاور ملایم */
  transform: scale(0.8);
  /* کوچیک ترین بزرگ شدن تو هاور */
}

/* حالت ثابت دکمه Scroll وقتی از ویدیو خارج شدیم */
.scroll-fixed {
  position: fixed;
  bottom: 100px;
  right: 35px;
  background: rgba(0, 68, 115, 0.8);
  color: #fff;
  padding: 15px 15px;
  font-size: 20px;
  z-index: 10000;
  transform: scale(1.1);
  opacity: 1;
  transition:
    all 0.4s ease,
    transform 0.4s ease,
    opacity 0.4s ease;
}

/* وقتی دکمه میخواد برگرده سر جای اصلی */
.scroll-fixed-remove {
  transform: scale(1);
  opacity: 0.8;
}

/* هاور روی دکمه ثابت */
.scroll-fixed:hover {
  background: rgba(0, 115, 230, 1);
}

/* 📱 موبایل: دکمه‌ها کوچیک‌تر و پایین صفحه */
@media (max-width: 768px) {
  .videoOverlayButtons {
    top: auto;
    bottom: 30px;
    right: 35%;
    flex-direction: row;
  }
}

/*----------------------------------------SlidePicture---------------------*/
.DateLeft {
  float: right;
  color: #0085d6;
  margin-right: 11px;
  margin-top: 10px;
  text-align: right;
}

/*----------------------------------------NewsSpecial---------------------*/

.NewsSpecial {
  float: right;
  width: 100%;
  background-image: url(../Administrator/Files/Design/NewsSpecial.jpg);
  height: 44px;
}

.NewsSpecialTitle {
  float: right;
  font-size: 12pt;
  margin-top: 11px;
  color: #fcff00;
}

.NewsSpecial a {
  float: right;
  color: #fff;
  margin-top: 11px;
  margin-right: 10px;
}

.NewsSpecial a:hover {
  color: Yellow;
}

/*----------------------- SearchBox ------------------*/

.SearchBox {
  width: 100%;
  min-width: 270px;
  top: 7px;
  float: left;
  position: relative;
  padding-left: 50px;
}

.TextBoxBox {
  width: 100%;
  height: 40px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  box-shadow: 0 10px 20px rgba(0.1, 0.1, 0.1, 0.1);

  display: flex;
  align-items: center;
  background: #fff;
  box-sizing: border-box;
}

#ctl10_ctl00_ctl00_TextBox1 {
  min-width: 200px !important;
}

.TextBoxAutoCapmlet {
  min-width: 200px;
  height: 100%;
  border: none;
  font-size: 12px;
  color: #333;
  background-color: transparent;
  outline: none;
  padding: 0;
  box-sizing: border-box;
}

input,
select,
textarea {
  font-family: Vazir, Segoe;
}

/*---------------------------- AutoComplete -------------------------------*/
.AutoCamplet {
  width: 100%;
  min-width: 270px;
  background-color: #fff;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  position: absolute;
  top: 40px;
  right: 0;
  z-index: 99999;
  overflow: hidden;
  padding-bottom: 8px;
  box-sizing: border-box;
  margin-top: 10px;
}

.AutoCamplet .Item {
  display: flex;
  align-items: center;
  padding: 12px 10px;
  cursor: pointer;
  transition: background 0.25s ease;
  border-bottom: 1px solid #f0f0f0;
  background-color: #fff;
}

.AutoCamplet .Item:hover {
  background-color: #d8dbe5;
}

.AutoCamplet .Item img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  margin-left: 10px;
  border: 1px solid #ddd;
}

.AutoCamplet .Item .Title {
  flex: 1;
  color: #444;
  font-size: 13px;
  text-align: right;
  line-height: 1.4;
}

.AutoCamplet .Seprator {
  height: 1px;
  background-color: #e5e5e5;
  margin: 5px 10px;
}

/*---------------------------- Mobile View Search -------------------------------*/

@media (max-width: 1024px) {
  .SearchBox {
    display: none !important;
  }
}

/*----------------------------📦 باکس سه تایی بالای صفحه اول--------------------------------*/
/* 
✅ این نسخه نهایی home-items با افکت حرفه‌ای رفتن به سقف و باز شدن آرام است.
✅ کاملاً فقط با CSS و هماهنگ با ساختار فعلی سایت تو آماده شده است.
*/

.home-items-header {
  text-align: center;
  background-color: rgba(240, 240, 240, 0.9);
  padding: 2% 8%;
  backdrop-filter: blur(4px);
}

.home-items-title {
  font-size: 26px;
  font-weight: 800;
  color: #222;
  margin-bottom: 10px;
}

.home-items-subtext {
  font-size: 15px;
  color: #555;
  margin: 0 auto;
  line-height: 1.8;
}

.home-items-container {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  direction: rtl;
  margin: 30px auto;
  max-width: 1299px;
  padding: 0 15px;
}

.home-item-box {
  position: relative;
  width: 360px;
  overflow: hidden;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    inset 0 0 8px rgba(255, 255, 255, 0.1),
    0 12px 32px rgba(0, 0, 0, 0.25);
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
  will-change: transform, box-shadow;
}

.home-item-box:hover {
  transform: translateY(-8px);
  box-shadow:
    0 20px 45px rgba(0, 0, 0, 0.3),
    inset 0 0 8px rgba(255, 255, 255, 0.1);
}

.home-item-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition:
    transform 0.5s ease,
    filter 0.5s ease;
  filter: grayscale(50%) brightness(0.85);
}

.home-item-box:hover .home-item-image {
  transform: scale(1.07);
  filter: grayscale(0%) brightness(1.05) saturate(1.2);
}

/* ✅ حالت عادی overlay پایین */
/* ✅ حالت عادی: پایین باکس */
.home-item-overlay {
  position: absolute;
  bottom: 0;
  top: auto;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 18px 22px;
  box-sizing: border-box;
  overflow: hidden;
  max-height: 60px;
}

/* ✅ هنگام hover: بچسبد به سقف و باز شود */
.home-item-box:hover .home-item-overlay {
  top: 0;
  bottom: auto;
  max-height: 200px;
  transition:
    top 0.5s ease,
    bottom 0.5s ease,
    max-height 0.5s ease 0.5s;
  animation: moveUpExpand 0.5s ease backwards;
}

/* ✅ بازگشت آرام به حالت عادی */
.home-item-box:not(:hover) .home-item-overlay {
  animation: moveDownCollapse 0.5s ease forwards;
}

@keyframes moveUpExpand {
  0% {
    transform: translateY(400%);
    max-height: 60px;
  }

  100% {
    transform: translateY(0);
    max-height: 200px;
  }
}

@keyframes moveDownCollapse {
  0% {
    transform: translateY(-100%);
    max-height: 200px;
  }

  100% {
    transform: translateY(0);
    max-height: 60px;
  }
}

.home-item-title {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  margin: 0 0 5px 0;
  text-align: right;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

/* ✅ text با انیمیشن fade + slide up */
.home-item-text {
  font-size: 12px;
  color: #eee;
  line-height: 1.9;
  text-align: justify;
  margin: 10px 0 0 0;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

.home-item-box:hover .home-item-text {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@media (max-width: 1024px) {
  .home-items-container {
    flex-direction: column;
    align-items: center;
  }

  .home-item-box {
    width: 95%;
    max-width: 500px;
    margin: 0 auto;
  }
}

/*-------------------------------------Social----------------------------*/
.Social {
  width: 100%;
  float: right;
  height: 35px;
  margin-top: 0;
}

.Social .Item {
  float: left;
  height: 35px;
  width: 35px;
  margin-right: 2px;
  margin-left: 2px;
}

.Social .Item:hover {
  -ms-transform: scale(1.1);
  /* IE 9 */
  -webkit-transform: scale(1.1);
  /* Safari */
  transform: scale(1.1);
}

.Social .ItemImage {
  float: left;
  height: 40px;
  width: 40px;
}

/*----------------------------------------ServicesIndex---------------------*/
.ServicesIndex {
  width: 100%;
  background: #f0f0f0;
  padding: 50px;
}

.ServicesIndexBox {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}

.ServicesIndexItem {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  width: 300px;
  padding: 20px;
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ServicesIndexItem:hover {
  transform: translateY(-6px);
}

.ServicesIndexItem img {
  max-width: 100%;
  height: auto;
  margin-bottom: 20px;
}

.ServicesIndexItem .Title {
  font-size: 16px;
  font-weight: bold;
  color: #222;
  margin-bottom: 10px;
}

.ServicesIndexItem .Center {
  font-size: 13px;
  color: #555;
  line-height: 1.7;
}

.ServicesIndexItem .Center a {
  color: #0071c2;
  text-decoration: none;
}

.ServicesIndexItem .Center a:hover {
  color: #00579c;
}

@media (max-width: 992px) {
  .ServicesIndexItem {
    width: 45%;
  }
}

@media (max-width: 600px) {
  .ServicesIndexItem {
    width: 100%;
  }
}

/* 
=========================================
[بخش خدمات + دعوت به اقدام – صفحه اول]
- home-services-section: کانتینر کلی بخش
- .container: تعیین عرض مرکزی
- .content-wrapper: چینش ردیفی CTA و کارت‌ها
- .cta-box: باکس سمت راست (دعوت به اقدام)
- .cards-wrapper: گرید کارت‌های خدماتی
- .service-card: طراحی کارت‌ها
- .icon, h3, ul, li::before: آیکون و استایل متن
=========================================
*/

.home-services-section {
  position: relative;
  left: 50%;
  right: 50%;
  margin-top: 5vw;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  background-color: #f8f8f8;
  background-image: url("https://tavanpm.com/administrator/files/UploadFile/tavanpmbg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.inner-services-wrapper {
  left: -92px;
  box-sizing: border-box;
  max-width: 1300px;
  margin: auto;
  padding: 80px;
  direction: rtl;
}

.content-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
}

.cta-box {
  flex: 1;
  max-width: 30%;
  padding: 5px;
}

.cta-box h2 {
  font-size: 24px;
  color: #ffffff;
  font-weight: bold;
  margin-bottom: 15px;
}

.cta-box p {
  font-size: 16px;
  color: #e5e5e5;
  margin-bottom: 25px;
}

.cards-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
  flex: 2;
  padding: 20px 0;
}

.service-card {
  padding: 20px 25px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.15);
  /* رنگ نیمه‌شفاف */
  backdrop-filter: blur(1px);
  /* افکت بلور شیشه‌ای */
  -webkit-backdrop-filter: blur(1px);
  /* پشتیبانی از Safari */
}

.service-card h3 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #ffffff;
}

.service-card ul {
  padding: 0;
  list-style: none;
  color: #e5e5e5;
  font-size: 14px;
}

.service-card ul li {
  margin-bottom: 6px;
  padding-right: 25px;
  position: relative;
  font-size: 12px;
}

.service-card ul li::before {
  content: "✦";
  position: absolute;
  right: 5px;
  color: #e5e5e5;
}

/* ============================================
📱 واکنش‌گرایی کامل برای بخش خدمات و CTA
مناسب نمایش در موبایل و تبلت
============================================ */

@media (max-width: 991px) {
  .inner-services-wrapper {
    padding: 40px 20px;
    left: 0;
  }

  .content-wrapper {
    flex-direction: column;
    gap: 30px;
  }

  .cta-box,
  .cards-wrapper {
    max-width: 100%;
    width: 100%;
  }

  .cta-box h2 {
    font-size: 20px;
  }

  .cta-box p {
    font-size: 15px;
  }

  .cta-button {
    padding: 10px 20px;
    font-size: 14px;
  }

  .cards-wrapper {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .service-card {
    padding: 15px;
  }

  .service-card h3 {
    font-size: 16px;
  }

  .service-card ul {
    font-size: 14px;
  }
}

/*----------------------------------------ArticleNewsIndex---------------------*/
.ArticleNewsIndex {
  float: right;
  width: 100%;
  background-color: #000;
}

/*----------------------------------------BoxIndexText---------------------*/
.BoxIndexTextBoxBox h1 {
  float: right;
  width: 100%;
  padding: 0;
  margin: 0;
  color: #c00000;
  text-align: right;
  font-size: 16pt;
  margin-top: 0px;
  font-weight: normal;
}

.BoxTopIndex {
  height: 38px;
  margin-top: 20px;
}

.BoxTopIndex h3 {
  float: right;
  color: #df0024;
  padding: 0px;
  margin: 0px;
  padding-right: 20px;
  margin-top: 5px;
  background-image: url(../Administrator/Files/Design/bullet.png);
  background-repeat: no-repeat;
  background-position: right;
  font-size: 15pt;
  font-weight: normal;
}

/*----------------------------------------IndexProduct---------------------*/
.IndexProduct {
  float: right;
  width: 100%;
}

/* ------------------------------------------ProductIndexRepeaterDataList-----------------------------------*/
#ProductIndexRepeaterDataList {
  float: right;
  width: 100%;
}

#ProductIndexRepeaterDataList .Item {
  width: 280px;
  height: 400px;
  float: right;
  margin: 40px 24px 0 20px;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  background-image: url(../Administrator/Files/Design/ProductBox.png);
  background-position: top center;
  background-repeat: no-repeat;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
  border: solid 1px #dda7a7;
}

#ProductIndexRepeaterDataList .Item:hover {
  box-shadow: 0px 0px 7px #888;
}

#ProductIndexRepeaterDataList .Item .ItemTitle {
  float: right;
  color: #fff;
  font-size: 10pt;
  margin-top: 16px;
  margin-right: 40px;
  width: 240px;
  height: 20px;
  text-align: right;
  overflow: hidden;
}

#ProductIndexRepeaterDataList .Item .ItemTitle:hover {
  color: Yellow;
}

#ProductIndexRepeaterDataList .Item .ItemImageLink {
  width: 100%;
  height: 199px;
  float: right;
  text-align: center;
  margin-top: 1px;
}

#ProductIndexRepeaterDataList .Item .ItemImage {
  max-width: 278px;
  height: 199px;
  border: 0px;
  padding: 0px;
}

#ProductIndexRepeaterDataList .Item .ItemDesc {
  float: right;
  width: 260px;
  text-align: justify;
  height: 83px;
  overflow: hidden;
  padding: 10px 10px 0 10px;
  color: #888;
}

#ProductIndexRepeaterDataList .Item .ItemDesc p {
  margin: 0;
}

#ProductIndexRepeaterDataList .Item .ItemPrice {
  float: right;
  width: 100%;
  font-size: 12pt;
  margin-top: 1px;
}

/*----------------------- Content ------------------*/
.Content {
  width: 100%;
  text-align: center;
  float: right;
}

/*--------------------------------------------ContentMain--------*/
.ContentMainBox {
  width: 100%;
  text-align: center;
  float: right;
}

.ContentMain {
  width: 100%;
  text-align: center;
  margin-top: 0;
  float: right;
  padding-bottom: 0px;
}

.ContentMainBoxBox1 {
  float: right;
}

.ContentMainDivLeft {
  width: 705px;
  float: right;
}

.ContentMainDivRight {
  width: 275px;
  float: right;
}

.sprites {
  float: right;
  cursor: pointer;
  background-image: url("../Administrator/Files/Design/sprites.png");
  border: 0px;
}

.Sharing .Seprator {
  float: right;
  width: 1px;
  border-left: solid 2px #cdcdcd;
  height: 20px;
  margin: 21px 7px 0 7px;
}

.SharingItem {
  float: right;
  margin-top: 20px;
  -moz-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  -webkit-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}

.SharingItem div {
  -moz-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  -webkit-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}

.SharingItem:hover>div {
  -webkit-transform: scale(1.16);
  -moz-transform: scale(1.06);
  -ms-transform: scale(1.06);
  -o-transform: scale(1.06);
  transform: scale(1.06);
}

.SharingItem:hover>span {
  color: #000;
}

.SharingItem span {
  float: right;
  color: #5e5e5e;
  margin-right: 5px;
  font-size: 8pt;
  font-weight: bold;
  margin-top: 2px;
}

.sprites1 {
  background-position: 0 0;
  width: 21px;
  height: 21px;
  margin-right: 20px;
}

.sprites2 {
  background-position: -22px 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
}

.sprites3 {
  background-position: -43px 0;
  width: 22px;
  height: 21px;
}

.sprites4 {
  background-position: -65px 0;
  width: 22px;
  height: 21px;
  margin-right: 20px;
}

.sprites5 {
  background-position: -87px 0;
  width: 25px;
  height: 24px;
}

.sprites6 {
  background-position: -112px 0;
  width: 14px;
  height: 14px;
  margin-top: 5px;
}

.sprites8 {
  background-position: -144px 0;
  width: 11px;
  height: 7px;
  margin-right: 3px;
  float: none;
  border: 0px;
}

.SepratorBoxRight {
  float: right;
  width: 100%;
  height: 21px;
  background-image: url("../Administrator/Files/Design/SepratorBoxRight.png");
  margin-top: 20px;
}

/* ------------------------------------------Box-----------------------------------*/
.BoxSmall {
  float: right;
  width: 272px;
  border-top: 0;
  margin-top: 20px;
  border-radius: 0px;
}

.BoxSmall .BoxTop {
  float: right;
  width: 100%;
  height: 38px;
  background-image: url("../Administrator/Files/Design/BoxSmallBoxTop.png");
}

.BoxSmall .BoxTop h1,
.BoxSmall .BoxTop h2,
.BoxSmall .BoxTop h3 {
  float: right;
  font-size: 12pt;
  color: #fff;
  margin: 0;
  padding: 0;
  line-height: 170%;
  font-weight: normal;
  margin-right: 34px;
  margin-top: 5px;
}

.BoxSmall .BoxTop h1 a,
.BoxSmall .BoxTop h2 a {
  color: #fff;
}

.BoxSmall .BoxTop h1 a:hover,
.BoxSmall .BoxTop h2 a:hover {
  color: #474747;
}

.BoxSmall .BoxCenter {
  float: right;
  width: 270px;
  text-align: right;
  padding-bottom: 10px;
  border: solid 1px #c6c5c5;
  border-top: 0px;
}

.BoxSmall .BoxCenterFieldDynamic {
  width: 205px;
  margin-right: 22px;
}

.Box {
  float: left;
  width: 100%;
  margin-top: 10px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 0px;
}

.BoxN {
  background-color: Transparent;
  margin-top: 23px;
}

.Box .BoxTop {
  float: right;
  width: 100%;
  min-height: 51px;
}

.Box .BoxTop h1,
.Box .BoxTop h2 {
  float: right;
  font-size: 18px;
  color: #555;
  margin: 0;
  padding: 0;
  line-height: 170%;
  font-weight: normal;
  margin-top: 8px;
  margin-right: 15px;
}

.BoxN .BoxTop {
  float: right;
  width: 100%;
  min-height: 20px;
}

.BoxN .BoxTop h3 {
  float: right;
  text-align: right;
  margin-right: 19px;
  margin-top: 0px;
  color: #927411 !important;
}

.Box .BoxTop a {
  color: #555;
}

.Box .BoxTop a:hover {
  color: #888;
}

.Box .BoxCenter .Back {
  float: right;
  width: 155px;
  margin-top: 5px;
  margin-bottom: 5px;
  color: #555;
  font-size: 9pt;
}

.Box .BoxCenter .Back:hover {
  color: Red;
}

.Box .BoxCenter .DateRegister {
  float: right;
  color: #555;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 9pt;
}

.Box .BoxCenter .SepTop {
  float: right;
  color: #555;
  margin: 5px 10px;
}

.Box .BoxCenter {
  float: right;
  width: 98%;
  color: #555;
  min-height: 120px;
  padding: 10%;
  text-align: justify;
  font-size: 11pt;
  margin-top: 5% !important;
  margin-bottom: 5% !important;
}

.BoxN .BoxCenter {
  padding: 0;
  min-height: 20px;
  margin-top: 2px;
}

.Box .BoxCenterB {
  float: right;
  width: 100%;
  color: #555;
  min-height: 120px;
  text-align: justify;
  font-size: 11pt;
  margin-top: 8px;
}

/* 📸 تنظیم تصویر مقاله در صفحه جزئیات به‌صورت کاور 1200x800 */
.Box .BoxCenter .ImagePost {
  width: 100% !important;
  height: 600px !important;
  /* الزام پنل */
  object-fit: cover !important;
  /* جلوگیری از دفرم */
  object-position: center !important;
  display: block !important;

  margin: 0 auto 30px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
}

.Box .BoxCenter .Sep {
  float: right;
  width: 100%;
  height: 1px;
  border-bottom: solid 1px #e7e7e7;
  margin-bottom: 10px;
}

.Box .BoxCenter .LinkFooter1 {
  float: right;
  color: #555;
  margin-bottom: 5px;
}

.Box .BoxCenter .LinkFooter2 {
  float: left;
  color: #555;
  margin-bottom: 5px;
}

.Box .BoxCenter .LinkFooter1:hover,
.Box .BoxCenter .LinkFooter2:hover {
  color: red;
}

/*------------------------BoxIndex----------------------------------*/
.BoxIndex {
  float: right;
  width: 100%;
  margin-top: 0px;
  padding: 0;
}

.BoxIndexR {
  margin-right: 1%;
}

.BoxIndex h2 {
  float: right;
  width: 100%;
  font-size: 16px;
  color: #424242;
  margin: 0;
  padding: 0;
  line-height: 170%;
  font-weight: normal;
  margin-bottom: 30px;
  margin-top: 5px;
  text-align: center;
}

.BoxIndex h2.ArticleImage {
  background-image: url(../Administrator/Files/Design/Articleh1.png);
  height: 45px;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.BoxIndex h2.NewsImage {
  background-image: url(../Administrator/Files/Design/Newsh1.png);
  height: 45px;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
}

/*--------------------------------CategoryArticleShow-----------------------------------*/
.CategoryArticleShowBox {
  float: right;
  width: 560px;
  margin-top: 10px;
  margin-bottom: 10px;
  border: solid 1px #cdcdcd;
  background-color: #f5f5f5;
  padding: 5px 0 5px 0;
}

.CategoryArticleShow {
  float: right;
  margin: 0;
  padding: 0;
  margin-right: 30px;
}

.CategoryArticleShow li {
  float: right;
  padding: 0;
  margin: 0;
  width: 265px;
}

.CategoryArticleShow li .Item {
  color: #2a3c4e;
  font-weight: bold;
}

.CategoryArticleShow li .Item:hover {
  color: Red;
}

.CategoryArticleShow li .ItemActive {
  color: Red;
}

/*-------------------------------------------CAtegoryShow--------------------------------------------------*/
.CategoryShowItemTop {
  float: right;
}

.CategoryShowItemTop:hover {
  color: #fef1c3;
}

.CategoryShowItemCenterItem {
  text-align: right;
  width: 100%;
  float: right;
  font-size: 11pt;
  margin-top: 5px;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  color: #266f8f;
}

.CategoryShowItemCenterItem:hover {
  background: #eee;
  text-shadow: 0 1px 0 #fff;
  position: relative;
  border-top-color: transparent;
  border-bottom-color: #f2f2f2;
  -webkit-box-shadow: 0px 2px 6px #999999;
  -moz-box-shadow: 0px 2px 6px #999999;
  box-shadow: 0px 2px 6px #999999;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  background-image: linear-gradient(#ffffff, #f2f2f2);
  -webkit-transform: scale(1.06);
  -moz-transform: scale(1.06);
  -ms-transform: scale(1.06);
  -o-transform: scale(1.06);
  transform: scale(1.06);
}

.CategoryShowItemCenterItem .Icon {
  float: right;
  margin: 8px 10px 0 5px;
}

.CategoryShowItemCenterItem span {
  float: right;
}

.CategoryShowItemCenterItemSelect {
  background: #fff;
  text-shadow: 0 1px 0 #fff;
  background-color: #ffffff;
  position: relative;
  border-top-color: transparent;
  border-bottom-color: #f2f2f2;
  -webkit-box-shadow: 0px 2px 6px #999999;
  -moz-box-shadow: 0px 2px 6px #999999;
  box-shadow: 0px 2px 6px #999999;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  background-image: linear-gradient(#ffffff, #f2f2f2);
}

/* ------------------------------------------FieldDynamic-----------------------------------*/
.FieldTitle {
  float: right;
  width: 110px;
  text-align: left;
  font-size: 9pt;
}

.FieldTitle2 {
  text-align: right;
  margin-right: 10px;
}

.FieldRadioButton {
  float: right;
  margin-right: 10px;
  font-size: 9pt;
}

.FieldCheckBox {
  float: right;
  margin-right: 10px;
  font-size: 8pt;
  width: 180px;
  margin-top: 3px;
  text-align: right;
}

.FieldTextBox {
  float: right;
  margin-right: 10px;
  font-size: 9pt;
  width: 200px;
  text-align: right;
  border: solid 1px #bcbbcb;
  color: #555;
}

.FieldTextBoxForm {
  float: right;
  margin-right: 19px;
  font-size: 9pt;
  width: 290px;
  padding: 0 10px;
  direction: ltr;
  text-align: center;
  background: rgba(103, 103, 93, 0.8);
  border: solid 1px #42423a;
  color: #7c7c6d;
  border-radius: 5px;
}

.FieldTextBoxSearch {
  width: 175px;
  color: #777;
}

.FieldTextBoxLeft {
  direction: ltr;
  text-align: left;
}

.FieldTextBoxNumber {
  width: 70px;
  text-align: center;
}

.FieldTextBoxNumberF {
  width: 90px;
  text-align: center;
  margin-top: 5px;
  padding: 3.5px 10px;
  background: rgba(103, 103, 93, 0.8);
  border: solid 1px #42423a;
  color: #7c7c6d;
  border-radius: 5px;
}

.FieldTextBoxNumberSearch {
  width: 60px;
  margin-top: 4px;
}

.FieldUnit {
  float: right;
  margin-right: 10px;
  font-size: 10pt;
  color: Gray;
  margin-top: 2px;
}

.FieldFileUpload {
  float: right;
  margin-right: 10px;
  font-size: 9pt;
  width: 200px;
  margin-top: 3px;
}

.FieldDropDownList {
  float: right;
  margin-right: 10px;
  font-size: 9pt;
  width: 200px;
  margin-top: 3px;
  border: solid 1px #bcbbcb;
}

.FieldDropDownListSearch {
  width: 175px;
  color: #8b8a8a;
}

.FieldButton {
  border: 0;
  margin: 10px 0 0 0;
  float: right;
  font-size: 11pt;
  color: #fff;
  cursor: pointer;
  text-align: center;
  background-color: #515151;
  width: 107px;
  padding: 2px 9px;
  margin-bottom: 15px;
  box-shadow: 1px 1px 1px 1px #d4d4d4;
}

.FieldButtonDownload {
  text-align: center;
  position: relative;
  right: 50%;
  margin-right: -68px;
  transition: all 0.7s;
}

.FieldButtonB {
  margin-right: 68px !important;
}

.FieldButtonQ {
  margin-right: 77px !important;
}

.FieldButtonD {
  margin-right: 120px !important;
}

.FieldButton:hover {
  color: #e24242;
  background-color: #515151;
  box-shadow: none;
}

.FieldButtonSearch {
  margin-right: 63px;
}

.FieldButtonSearch2 {
  width: 71px;
  padding-top: 5px;
  height: 23px;
  margin-bottom: 5px;
  margin-right: 75px;
}

.FieldButtonSearch3 {
  float: left;
  margin-right: 0;
  width: 75px;
  margin-left: 22px;
  background-image: url(../Administrator/Files/Design/search2.png);
}

.FieldButtonSearch4 {
  background-image: url(../Administrator/Files/Design/search3.png);
  width: 136px;
  padding-top: 5px;
  height: 23px;
}

.lblPrice {
  float: right;
  width: 135px;
  margin-top: 14px;
  text-align: center;
  margin-right: 10px;
  font-size: 11pt;
}

.FieldButtonSearch2:hover {
  color: #7a6600;
}

.FieldButtonSearch:hover {
  background-position: 0 -28px;
}

.FieldCaptchaF {
  margin-right: 10px !important;
  margin-top: 5px !important;
}

.FieldCaptcha {
  float: right;
  margin-right: 120px;
}

.FieldCaptchaR {
  height: 30px !important;
  width: 90px !important;
}

.FieldCaptchaB {
  float: right;
  margin-right: 12px;
}

.FormCaptcha {
  float: right;
  margin-right: 120px;
}

.FormCaptchaB {
  float: left;
  margin-left: 200px;
  margin-right: 0;
  margin-top: 2px;
}

.Validation,
.ValidationNormal {
  float: right;
  color: Red;
  margin-right: 3px;
  margin-top: 0px;
  font-size: 12pt;
}

.ValidationRow {
  width: 100%;
  text-align: center;
  color: Red;
  font-size: 12pt;
  float: right;
}

.ValidationRowLogin {
  margin-right: 120px;
  font-weight: bold;
  font-size: 10pt;
  text-align: right;
  float: right;
  color: Red;
}

.SpanMoney {
  float: right;
  margin-right: 10px;
  font-size: 8pt;
  color: #8b8a8a;
  margin-top: 5px;
}

.SpanTitleSearch {
  float: right;
  text-align: right;
  font-size: 11pt;
  margin-right: 7pt;
  color: #8b8a8a;
}

.SpanRegister {
  float: left;
  font-weight: bold;
  font-size: 9pt;
  color: red;
  margin-left: 20px;
  margin-top: 4px;
}

.ProductBoxRight .Item {
  width: 100%;
  float: right;
  margin-top: 5px;
  margin-bottom: 5px;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  padding-top: 5px;
}

.ProductBoxRight .Item:hover {
  background: #fff;
  color: #000;
  background-color: #ffffff;
  position: relative;
  border-top-color: transparent;
  border-bottom-color: #f2f2f2;
  -webkit-box-shadow: 0px 2px 6px #999999;
  -moz-box-shadow: 0px 2px 6px #999999;
  box-shadow: 0px 2px 6px #999999;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  background-image: linear-gradient(#ffffff, #f2f2f2);
  -webkit-transform: scale(1.06);
  -moz-transform: scale(1.06);
  -ms-transform: scale(1.06);
  -o-transform: scale(1.06);
  transform: scale(1.06);
}

.ProductBoxRight .Seprator {
  width: 100%;
  float: right;
  background-image: url(../Administrator/Files/Design/Sep.png);
  height: 1px;
  background-position: center top;
}

.ProductBoxRight .Item .ItemTitle {
  width: 145px;
  padding: 0 5px 0 5px;
  float: right;
  color: #686868;
  text-align: right;
  font-size: 10pt;
  line-height: 150%;
  margin-right: 5px;
}

.ProductBoxRight .Item .ItemTitle:hover {
  color: #000;
}

.ProductBoxRight .Item .ItemImageLink {
  float: right;
  text-align: center;
  border: solid 1px #ccc;
  padding: 2px;
}

.ProductBoxRight .Item .ItemImage {
  width: 30px;
  height: 30px;
  border: 0px;
  padding: 0px;
}

.ProductBoxRight .Item .DateSaleLeft {
  float: right;
  width: 100%;
  text-align: center;
  font-size: 9pt;
  margin-top: 5px;
  color: #af3333;
}

.ProductBoxRight .Item .Price {
  float: right;
  width: 100%;
  text-align: center;
  font-size: 8pt;
  margin-top: 5px;
  background-color: #f4f4f4;
  color: #3380af;
  font-weight: bold;
}

/*------------------------------------LinkShow-----------------------------*/

.LinkShow {
  float: right;
  width: 100%;
  margin-top: 10px;
}

.LinkShow .Title {
  color: #2a3c4e;
  text-align: center;
  font-weight: bold;
  font-size: 8pt;
  float: right;
  margin-right: 10px;
}

.LinkShow .Title:hover {
  color: #000;
}

/*------------------------------------FooterLink-----------------------------*/
.topFooter {
  width: 100%;
  height: 0px;
  float: right;
}

.selector {
  display: none;
}

#Footer {
  width: 100%;
  float: right;
  color: #ffffff;
  margin-top: 3%;
  background: #0422a5;
}

.footerBox1 {
  float: right;
  width: 328px;
  min-height: 200px;
  margin: 0px 2px 0 2px;
}

.footerBox2 {
  float: right;
  width: 500px;
  min-height: 100px;
  margin: 0px 2px 0 2px;
}

.footerBox3 {
  float: right;
  width: 328px;
  min-height: 200px;
  margin: 0px 2px 0 2px;
}

.footerBox4 {
  float: right;
  width: 612px;
  min-height: 100px;
  margin: 0px 20px 0 2px;
}

.Map {
  height: 391px;
  width: 375px;
  float: right;
  margin-right: 15px;
  margin-top: 0px;
  padding: 0;
  overflow: hidden;
}

.Map p {
  margin-top: 0px;
}

.FooterBoxBox {
  margin-top: 5px;
}

.boxText {
  width: 600px;
  min-height: 422px;
  float: right;
  background: url(../Administrator/Files/Design/boxText.png) left center no-repeat;
}

.bgLogoFooter {
  float: left;
  height: 85px;
  background: url(../Administrator/Files/Design/bgLogoFooter.png) no-repeat;
  width: 248px;
  margin-top: -29px;
  position: absolute;
  right: 50%;
  margin-right: -124px;
}

.LogoFooter {
  float: right;
  height: 64px;
  background: url(../Administrator/Files/Design/LogoFooter.png) no-repeat;
  width: 204px;
  margin: 10px 20px 0 0;
}

.Sharing {
  width: 100%;
  position: relative;
  height: 40px;
  z-index: 999;
  display: flex;
  justify-content: center;
  /* مرکز افقی */
  align-items: center;
  /* مرکز عمودی */
}

.SharingLeft {
  display: flex;
  justify-content: center;
  /* مرکز افقی */
  align-items: center;
  /* مرکز عمودی */
}

.CopyRight {
  float: right;
  width: 100%;
  color: #e9e9e9;
  text-align: center;
  font-size: 9pt;
  padding: 0px;
  min-height: 40px;
  background: #000000;
  /* رنگ اصلی */
  box-shadow:
    inset 0 2px 2px #0422a5,
    /* نور از بالا */
    inset 0 -2px 2px rgba(0, 0, 0, 0.2);
  /* سایه از پایین */
}

.CopyRight a {
  color: #e9e9e9;
}

.CopyRightRight {
  display: flex;
  justify-content: center;
  /* مرکز افقی */
  align-items: center;
  /* مرکز عمودی */
  margin-top: 7px;
}

.CopyRightLeft {
  float: left;
  margin-top: 7px;
  display: none;
}

.FooterText {
  position: relative;
  float: right;
  width: 100%;
  height: 182px;
  overflow: hidden;
  color: #fff;
  text-align: right;
  margin-top: 0px;
  font-size: 13px;
  line-height: 30px;
}

.FooterText a {
  color: #424242;
}

.FooterText .Title {
  float: right;
  color: #424242;
  width: 100%;
  text-align: center;
  font-size: 16px;
  margin-top: 5px;
  margin-bottom: 35px;
}

/*------------------------------LinkShow-----------------------*/
#LinkShow {
  float: right;
  margin: 10px 10px 0 0;
}

#LinkShow .Item {
  position: relative;
  float: right;
  width: 155px;
  height: 141px;
  overflow: hidden;
  margin-right: 70px;
  padding: 0 5px 0 5px;
  color: #f0f0f0;
}

#LinkShow .Title {
  text-align: right;
  width: 100%;
  float: right;
  margin-bottom: 5px;
  color: gold;
  font-size: 14px;
  text-shadow: 1px 1px 2px #000000;
  line-height: 2;
  direction: rtl;
  letter-spacing: 2.5px;
  font-weight: bold;
}

#LinkShow .Title:hover {
  color: gold;
}

#LinkShow .ItemSub {
  width: 100%;
  float: right;
  margin-top: 0px;
  color: #ffffff;
  font-size: 14px;
  text-shadow: 1px 1px 2px #000000;
  line-height: 2;
  direction: rtl;
  text-align: right;
  letter-spacing: 2.5px;
}

#LinkShow .ItemSub a {
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  float: right;
  width: 100%;
  text-align: right;
  padding-right: 0px;
  font-size: 10pt;
}

#LinkShow .ItemSub a:hover {
  color: gold;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  margin-right: 7px;
}

/*------------------------------------RepeaterIndex2-----------------------------*/
.RepeaterIndex2Item {
  float: right;
  width: 250px !important;
  height: 300px !important;
  margin: 15px;
  border: solid 1px #ccc;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}

.RepeaterIndex2Item:hover>h3 {
  color: #1788dc;
}

.RepeaterIndex2Item .ImageBox {
  /*float: right;
	width: 200px !important;
	height: 200px !important;*/
  border-radius: 5px;
  margin: 14px;
  text-align: center;
}

.RepeaterIndex2Item .Image {
  width: 200px !important;
  height: 200px !important;
}

.RepeaterIndex2Item h3 {
  color: #555;
  float: right;
  padding: 0;
  margin: 0;
  font-size: 9pt;
  width: 100%;
  margin-top: 3px;
  line-height: 150%;
  font-weight: normal;
  text-align: center;
  direction: rtl;
}

/*------------------------------------RepeaterIndex3-----------------------------*/
.RepeaterIndex3Item {
  padding: 0;
  margin: 0;
  float: right;
  min-height: 60px;
  width: 100%;
  transition: all 0.7s;
}

.RepeaterIndex3Item:hover {
  background: rgba(254, 255, 255, 0.3);
  transition: all 0.7s;
}

.RepeaterIndex3Item:hover>h2 {
  color: #efaa22 !important;
  transition: all 0.7s;
}

.RepeaterIndex3Item .linkMore {
  float: left;
  margin: 10px;
  font-size: 12px;
  color: #12a9a8;
  transition: all 0.7s;
}

.RepeaterIndex3Item .linkMore:hover {
  color: #56dddc;
  transition: all 0.7s;
}

.RepeaterIndex3Item .Image {
  width: 125px;
  height: 55px;
  float: right;
  padding: 5px;
  margin-right: 15px;
  transition: all 0.7s;
}

.RepeaterIndex3Item .ImageBox img {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  overflow: hidden;
}

.RepeaterIndex3Item h2 {
  color: #a3a3a3;
  float: right;
  margin: 0;
  font-size: 10pt;
  width: 58%;
  margin-top: 8px;
  font-weight: 500;
  text-align: right;
  padding: 10px;
  transition: all 0.7s;
}

.RepeaterIndex3Item h2:hover {
  color: #fda600;
  transition: all 0.7s;
}

.RepeaterIndex3Item h3 {
  color: #333;
  float: right;
  padding-right: 1%;
  padding-left: 1%;
  margin: 0;
  font-size: 9pt;
  width: 98%;
  margin-top: 14px;
  line-height: 150%;
  text-align: justify;
  font-weight: normal !important;
}

/*------------------------------------RepeaterDataList-----------------------------*/
.RepeaterDataList {
  float: right;
  width: 100%;
  margin-bottom: 10px;
  padding-bottom: 10px;
  padding-top: 10px;
}

.RepeaterDataList .Title {
  float: right;
  margin-bottom: 10px;
  margin-right: 10px;
}

.RepeaterDataList .Item {
  float: right;
  width: 147px;
  height: 100px;
  margin: 0 10px 10px 10px;
  border: solid 1px #ccc;
  padding: 4px;
  text-align: center;
  cursor: pointer;
  text-shadow: 0 1px 0 #fff;
  color: #000;
  position: relative;
  border-top-color: transparent;
  border-bottom-color: #f2f2f2;
  -webkit-box-shadow: 0px 2px 6px #999999;
  -moz-box-shadow: 0px 2px 6px #999999;
  box-shadow: 0px 2px 6px #999999;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  background-color: #fff;
}

.RepeaterDataList .Item:hover {
  background-color: #eee;
}

.RepeaterDataList .Item .ItemImage {
  max-width: 147px;
  height: 100px;
}

/*------------------------------------RepeaterIndexItem-----------------------------*/

.RepeaterIndexItem2 {
  float: right;
  margin-right: 10px;
  margin-top: 10px;
  border-radius: 5px;
  -moz-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  -webkit-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
  background-image: url(../Administrator/Files/Design/bulletMenu.png);
  background-repeat: no-repeat;
  background-position: top right;
  overflow: hidden;
  padding-right: 17px;
  width: 235px;
  text-align: right;
}

.RepeaterIndexItem2:hover {
  background-color: #f5f6f8;
  cursor: pointer;
  text-shadow: 0 1px 0 #fff;
  color: #000;
  position: relative;
  border-top-color: transparent;
  border-bottom-color: #f2f2f2;
  -webkit-box-shadow: 0px 2px 6px #999999;
  -moz-box-shadow: 0px 2px 6px #999999;
  box-shadow: 0px 2px 6px #999999;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  background-image: linear-gradient(#ffffff, #f2f2f2);
  -webkit-transform: scale(1.06);
  -moz-transform: scale(1.06);
  -ms-transform: scale(1.06);
  -o-transform: scale(1.06);
  transform: scale(1.06);
}

.RepeaterIndexItem2:hover>h3 {
  color: #ad0100;
}

.RepeaterIndexItem2 .ImageBox {
  float: right;
  width: 220px;
  height: 110px;
  border: solid 1px #ff4b3d;
  border-radius: 5px;
  overflow: hidden;
  padding: 4px;
}

.RepeaterIndexItem2 .Image {
  width: 220px;
  height: 110px;
  float: right;
}

.RepeaterIndexItem2 h3 {
  color: #3f4247;
  float: right;
  padding: 0;
  margin: 0;
  font-size: 9pt;
  width: 100%;
  margin-top: 0px;
  line-height: 150%;
  font-weight: normal;
  text-align: right;
}

.Archive1 {
  float: left;
  height: 55px;
  width: 93px;
  background-image: url(../Administrator/Files/Design/Archive1.png);
}

.Archive {
  float: left;
  height: 20px;
  padding: 3px 20px 10px 20px;
  background-color: #df0024;
  color: #fff;
  font-size: 8pt;
  text-align: center;
  margin-top: 10px;
  margin-left: 20px;
  border-radius: 3px;
}

.Archive:hover {
  background-color: #81037f;
  color: #fff;
}

/*------------------------------------BasketShopSmall-----------------------------*/
.BasketShopSmallRow {
  float: right;
  width: 100%;
  margin-top: 4px;
}

.BasketShopSmallRowArow {
  float: right;
  text-align: right;
  margin-top: 7px;
}

.BasketShopSmallRowLink {
  float: right;
  width: 123px;
  text-align: right;
  margin-right: 5px;
}

.BasketShopSmallRowPic {
  float: right;
  width: 50px;
  height: 50px;
  margin-right: 2px;
}

.BasketShopSmallRowPriceTitle {
  color: Red;
}

.BasketShopSmallRowPrice {
  color: green;
}

.BasketShopSmallRowSpace {
  float: right;
  width: 100%;
  height: 1px;
  margin-top: 3px;
  border-top: gray 1px dotted;
}

.OneLine {
  width: 100%;
  text-align: center;
  float: right;
}

.BasketShopSmallLinkAll {
  font-weight: bold;
  text-align: center;
}

.BasketShopSmallLinkAll:hover {
  color: Red;
}

.BasketShopSmallLabel {
  font-weight: bold;
  float: right;
  text-align: right;
  margin-right: 15px;
  width: 165px;
}

.BasketShopSmallLabelMSG {
  font-weight: bold;
  text-align: center;
  float: right;
  margin-right: 15px;
  width: 165px;
  color: Green;
}

.BasketShopSmallField {
  font-weight: bold;
  float: right;
  text-align: right;
  font-family: Vazir, Segoe;
  width: 165px;
  margin-right: 15px;
}

.BasketShopSmallButton {
  float: right;
  width: 70px;
  height: 30px;
  font-size: 8pt;
  font-weight: bold;
  font-family: Vazir, Segoe;
  border: solid 1px silver;
  text-align: center;
  margin-right: 113px;
  margin-top: 10px;
  cursor: pointer;
  background-color: white;
  padding: 8px;
  margin-bottom: 10px;
}

.BasketShopSmallButton:hover {
  background-color: #e2e2e2;
  border: solid 1px silver;
}

/*-------GridArchive------------*/
.NewsRow {
  float: right;
  width: 100%;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  margin-bottom: 10px;
  padding-top: 10xp;
}

.NewsRow:hover {
  background: #fff;
  text-shadow: 0 1px 0 #fff;
  color: #000;
  background-color: #ffffff;
  position: relative;
  border-top-color: transparent;
  border-bottom-color: #f2f2f2;
  -webkit-box-shadow: 0px 2px 6px #999999;
  -moz-box-shadow: 0px 2px 6px #999999;
  box-shadow: 0px 2px 6px #999999;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  background-image: linear-gradient(#ffffff, #f2f2f2);
  -webkit-transform: scale(1.06);
  -moz-transform: scale(1.06);
  -ms-transform: scale(1.06);
  -o-transform: scale(1.06);
  transform: scale(1.06);
}

.GridItemImage {
  float: right;
  margin-right: 5px;
  margin-left: 5px;
  margin-top: 8px;
}

.GridItemTitle {
  float: right;
  font-weight: bold;
  font-size: 9pt;
}

.GridItemTitle:hover {
  color: #000;
}

.GridItemText {
  float: right;
  padding: 5px;
  color: black;
  font-size: 8pt;
  text-align: justify;
}

.GridItemUnderText {
  float: right;
  margin-top: 5px;
  color: #666666;
  font-size: 8pt;
  text-align: right;
}

.GridSeprator {
  border-bottom: dotted 1px gray;
  float: right;
  width: 100%;
}

.GridPaging {
  text-align: center;
}

.GridPaging table {
  margin: 5px 0;
}

.GridPaging td {
  border-width: 0;
  padding: 0 6px;
  font-weight: bold;
  color: red;
  line-height: 12px;
}

/*------------------------------Tooltip----------------------------------------------*/
.tooltip2 {
  position: relative;
  cursor: help;
  display: inline-block;
  text-decoration: none;
  outline: none;
  padding-right: 10px;
  padding-left: 10px;
}

.tooltip2 span {
  color: Black;
  visibility: hidden;
  position: absolute;
  bottom: 30px;
  left: 50%;
  z-index: 9999999999999;
  width: 290px;
  margin-left: -157px;
  padding: 10px;
  border: 2px solid #ccc;
  opacity: 1;
  background-color: #ffffcc;
  background-image: linear-gradient(rgba(255, 255, 255, 0.5),
      rgba(255, 255, 255, 0));
  -moz-border-radius: 4px;
  border-radius: 15px;
  -moz-box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.5) inset;
  -webkit-box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.5) inset;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.5) inset;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.tooltip2:hover {
  border: 0;
  /* IE6 fix */
}

.tooltip2:hover span {
  visibility: visible;
}

.tooltip2 span:before,
.tooltip2 span:after {
  content: "";
  position: absolute;
  z-index: 1000;
  bottom: -7px;
  left: 50%;
  margin-left: -8px;
  border-top: 8px solid #ffffcc;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 0;
}

.tooltip2 span:before {
  border-top-color: #ccc;
  bottom: -8px;
}

/*------------------------------RepeaterGrid----------------------------------------------*/
.RepeaterGrid {
  float: right;
  width: 100%;
}

.RepeaterGrid .Row {
  float: right;
  width: 100%;
  margin-top: 1px;
}

.RepeaterGrid .Row .ColNotHover {
  float: right;
  width: 85px;
  text-align: center;
  margin-right: 2px;
  border: solid 1px gray;
  height: 30px;
  border-radius: 5px;
}

.RepeaterGrid .Row .Col {
  float: right;
  width: 85px;
  text-align: center;
  margin-right: 2px;
  border: solid 1px gray;
  height: 30px;
  border-radius: 5px;
}

.RepeaterGrid .Row .Col:hover {
  background-color: #cccccc;
}

.RepeaterGrid .RowOne .Col {
  height: auto;
  background-color: yellow;
}

.RepeaterGrid .RowTwo .Col {
  height: 50px;
}

.RepeaterGrid .Row .ColAuto {
  height: auto;
  min-height: 30px;
}

.RepeaterGrid .Row .Header {
  font-weight: bold;
  background-color: #999999;
  border: solid 1px gray;
  margin-top: 2px;
  height: auto;
  color: Black;
  border-radius: 5px;
}

.GridRow {
  background-color: #cccccc;
  height: 20px;
}

.GridRow:hover {
  background-color: #ffff00;
}

.GridRowAlternating {
  height: 20px;
  background-color: #ffffff;
}

.GridRowAlternating:hover {
  background-color: #ffff00;
}

.GridShop {
  width: 100%;
  margin-top: 0px;
  font-size: 9pt;
}

/*------------------------------FactorRegister----------------------------------- */
.FactorRegisterRow {
  float: right;
  width: 100%;
  margin-top: 10px;
}

.FactorRegisterRowButton {
  float: left;
  margin-left: 0px;
}

.FactorRegisterDivGrid {
  float: right;
  border: solid 5px #ded6cb;
  background-color: #f6f5f1;
  width: 700px;
}

.FactorRegisterGridImage {
  float: right;
  width: 70px;
}

.FactorRegisterGridTitle {
  float: right;
  margin-top: 10px;
  width: 186px;
  margin-right: 10px;
  text-align: right;
}

.FactorRegisterGridPrice {
  float: right;
  width: 97px;
  text-align: center;
  margin-top: 10px;
}

.FactorRegisterGridCount {
  float: right;
  width: 35px;
  font-size: 8pt;
  font-family: Vazir, Segoe;
  margin-top: 10px;
  border: solid 1px #ccc;
}

.FactorRegisterCalc {
  float: right;
  border-bottom: solid 5px #ded6cb;
  border-left: solid 5px #ded6cb;
  border-right: solid 5px #ded6cb;
  background-color: #f6f5f1;
  width: 700px;
}

.FactorRegisterCalcRow2 {
  float: left;
  width: 265px;
}

.FactorRegisterCalcRow {
  float: left;
  width: 310px;
  margin-top: 10px;
  margin-left: 5px;
}

.FactorRegisterCalcField {
  float: left;
  width: 100px;
  text-align: center;
  color: Red;
  font-weight: bold;
}

.FactorRegisterCalcTitle {
  float: left;
  text-align: left;
  margin-left: 5px;
}

.FactorRegisterCalcTitle input {
  float: right;
  margin-top: 3px;
}

.FactorRegisterWarning {
  float: right;
  width: 450px;
  margin-top: 5px;
  text-align: right;
}

.FactorRegisterCodeDiscountBox {
  float: right;
  width: 200px;
}

.FactorRegisterCodeDiscount {
  margin-bottom: 20px;
  width: 440px;
  float: right;
  margin-top: 110px;
  background-image: url(../Administrator/Files/Design/DiscountPic.jpg);
  height: 130px;
  margin-right: 20px;
}

.FactorRegisterCodeDiscount .Title {
  float: right;
  width: 150px;
  text-align: left;
}

.FactorRegisterCodeDiscount .TextBox {
  text-align: center;
  direction: ltr;
  float: right;
  margin-right: 5px;
  font-size: 10pt;
  margin-top: 2px;
  border: solid 1px gray;
  width: 150px;
}

.FactorRegisterCodeDiscount .Button {
  margin-top: 0;
  font-size: 10pt;
  height: 23px;
  border: solid 1px gray;
  width: 50px;
  cursor: pointer;
  float: right;
  margin-right: 10px;
}

.FactorRegisterCodeDiscount .Button:hover {
  background-color: #ccc;
}

.FactorRegisterCodeDiscount .Val {
  float: right;
  color: Red;
  margin-right: 3px;
  margin-top: 3px;
}

.FactorRegisterCodeDiscount .FormCaptcha {
  float: right;
  margin-right: 10px;
}

.InsertAlert {
  margin-right: 10px;
  color: Red;
  font-size: 10pt;
  margin-top: 25px;
  float: right;
}

/*------------------------------------Paging-----------------------------*/
.Paging {
  width: 100%;
  float: right;
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
}

.Paging .Item {
  width: 20px;
  float: right;
  padding: 5px;
  padding-top: 4px;
  padding-bottom: 4px;
  border: none;
  background-color: #f2f2f2;
  cursor: pointer;
  font-weight: bold;
  margin: 3px;
  -moz-border-radius: 4px;
  border-radius: 5px;
  -moz-box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.5) inset;
  -webkit-box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.5) inset;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.5) inset;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  color: #777;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.Paging .ItemNow {
  width: 20px;
  float: right;
  padding: 5px;
  padding-top: 4px;
  padding-bottom: 4px;
  border: none;
  background-color: #ddd;
  cursor: pointer;
  font-weight: bold;
  margin: 3px;
  -moz-border-radius: 4px;
  border-radius: 5px;
  -moz-box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.5) inset;
  -webkit-box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.5) inset;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.5) inset;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  color: #333;
}

.Paging .Item:hover {
  background-color: #ddd;
  color: #333;
}

.Paging .ItemSep {
  width: 5px;
  float: right;
  padding: 3px;
  font-weight: bold;
  margin-top: 3px;
  margin-left: 5px;
  color: #000;
}

.Paging .DivDown {
  float: right;
  width: 100%;
}

.Paging .First {
  float: right;
  margin: 10px;
}

.Paging .Last {
  float: left;
  margin: 10px;
}

.Paging .SpanLeft {
  float: left;
  color: #555;
  font-size: 9pt;
  margin-left: 10px;
  margin-top: 9px;
}

.AdsDetailLeftBoxTitle {
  color: #266f8f;
  font-size: 8pt;
  float: right;
  margin-left: 10px;
}

.AdsDetailLeftBoxValue {
  color: #6d6d6d;
  font-size: 10pt;
  float: right;
}

.AdsDetailLeftBoxUnit {
  color: #266f8f;
  font-size: 8pt;
  float: right;
  margin-right: 10px;
}

.AdsDetailLeftBoxButton {
  border: 0;
  padding: 0;
  margin: 0;
  background-color: Transparent;
  float: right;
  width: 131px;
  height: 32px;
  background-image: url(../Administrator/Files/Design/Button.png);
  cursor: pointer;
  border-radius: 0;
  margin-top: 10px;
}

.AdsDetailLeftBoxButton1 {
  background-position: 0 0;
  width: 116px;
  float: right;
}

.AdsDetailLeftBoxButton1:hover {
  background-position: 0 -32px;
  color: #fff;
}

.AdsDetailLeftBoxButton2 {
  background-position: -116px 0;
  width: 128px;
}

.AdsDetailLeftBoxButton2:hover {
  background-position: -116px -32px;
}

.AdsDetailLeftBoxButton3 {
  background-position: -244px 0;
  width: 128px;
}

.AdsDetailLeftBoxButton3:hover {
  background-position: -244px -32px;
}

.ProductPath {
  float: right;
  margin-top: 8px;
  color: #686868;
  display: none;
}

.ProductPath a {
  font-size: 9pt;
  text-align: right;
  color: #686868;
}

.ProductPath a:hover {
  color: #db2222;
}

.imgThumb {
  height: 74px !important;
  width: 74px !important;
  margin: 10px 5px !important;
}

/*----------------------------TabShow------------------------*/
.TabShow {
  background-color: #fff;
  text-align: justify;
}

.TabShow .Left {
  float: right;
  width: 276px;
  margin-left: 10px;
}

.TabShowTop {
  margin: 0;
  float: right;
  margin-top: 20px;
  background-color: #dddddd;
}

/* ------------------------------------------Poll-----------------------------------*/
.PollTitle {
  font-weight: bold;
  margin-right: 10px;
}

.PollOption {
  margin-right: 10px;
}

.PollResult {
  margin-right: 8px;
}

.PollButton .Button {
  padding: 0;
  margin: 0;
  width: 171px;
  height: 29px;
  background-image: url(../Administrator/Files/Design/PostAds.png);
  font-weight: bold;
  text-align: right;
}

.PollButton .Button:hover {
  background-position: 0 -29px;
}

/*--------------------------------------Baner---------------------------*/
.AdsBanerDiv {
  overflow: hidden;
  margin-top: 10px;
  width: 218px;
  float: right;
  border: solid 1px #bbb;
  background-color: #f0f0f0;
  margin-right: 10px;
  border-radius: 3px;
}

.AdsBanerA {
  float: right;
  width: 100%;
  -moz-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  -webkit-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
  font-size: 10pt;
  color: #555;
  text-align: center;
}

.AdsBanerA:hover {
  -webkit-transform: scale(1.06);
  -moz-transform: scale(1.06);
  -ms-transform: scale(1.06);
  -o-transform: scale(1.06);
  transform: scale(1.06);
}

/*---------------------Tag------------------------*/
.TagDetailBox {
  border: solid 1px #e2e2e2;
  background-color: #ffffff;
  float: right;
  width: 100%;
  text-align: right;
  padding-top: 8px;
  padding-bottom: 13px;
  margin-bottom: 20px;
  margin-top: 10px;
}

.TagDetailBox .TagImage {
  float: right;
  margin-right: 5px;
  width: 16px;
  height: 16px;
  margin-top: 7px;
}

.TagDetailBox .Item {
  float: right;
  padding: 0 5px 0 5px;
  border: solid 1px #e2e2e2;
  margin-right: 5px;
  margin-top: 5px;
  background-color: #f4f4f4;
  font-size: 8pt;
  border-radius: 3px;
}

.TagDetailBox .Item:hover {
  background-color: #eee;
}

/*------------------------------------------FactorPrint-----------------------------*/
.FactorPrint {
  float: right;
  border: solid 1px #333;
  width: 700px;
  padding: 4px;
  color: #000;
  font-size: 9pt;
  margin-top: 10px;
  margin-bottom: 20px;
}

.FactorPrintHeader {
  float: right;
  width: 698px;
  background-image: url(../Administrator/Files/Design/FactorPrintHeader.jpg);
  border: solid 1px #999;
  height: 85px;
  background-repeat: no-repeat;
  background-position: right center;
}

.FactorPrintHeader .Left {
  float: left;
  width: 200px;
}

.FactorPrintCenter {
  float: right;
  width: 630px;
  border: solid 1px #999;
  margin-top: 5px;
  padding: 10px 34px 10px 34px;
  background-color: #eee;
}

.FactorPrintCenter .FactorTitle {
  float: right;
  width: 100%;
  font-weight: bold;
  text-align: right;
  border-bottom: dotted 1px #ccc;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.FactorPrintCenter .FactorTitle a {
  float: left;
  color: #000;
  font-weight: normal;
}

.FactorPrintCenter .FactorTitle a:hover {
  color: Red;
}

.FactorPrintCenter .FactorTitleFooter {
  float: right;
  width: 100%;
  text-align: center;
  font-size: 8pt;
}

.Darsad {
  width: 50%;
}

.FactorPrintCalcField {
  float: left;
  width: 100px;
  text-align: center;
  font-weight: bold;
}

.FactorPrintCalcTitle {
  float: left;
  text-align: left;
  margin-left: 5px;
}

.FactorPrintPriceUnit {
  float: left;
  width: 25px;
}

.PaymentFactorID {
  border: double 3px #ccc;
  float: right;
  width: 203px;
  padding: 10px;
  text-align: justify;
  font-size: 10pt;
  background-color: #f5f5f5;
  margin-top: 10px;
}

.PaymentFactorID:hover {
  border: double 3px #aaa;
}

.PaymentOnlineBox {
  border: double 3px #ccc;
  float: right;
  width: 230px;
  height: 100px;
  text-align: justify;
  font-size: 8pt;
  background-color: #f5f5f5;
  margin-right: 0px;
  margin-left: 10px;
  margin-top: 10px;
  background-image: url(../Administrator/Files/Design/PasargadPayment.png);
  cursor: pointer;
}

.PaymentOnlineBox2 {
  background-image: url(../Administrator/Files/Design/PasargadPayment2.png);
}

.PaymentOnlineBox3 {
  background-image: url(../Administrator/Files/Design/PasargadPayment3.png);
}

.PaymentOnlineBox4 {
  background-image: url(../Administrator/Files/Design/PasargadPayment4.jpg);
}

.PaymentOnlineBox:hover {
  border: double 3px #aaa;
}

.PardakhtMahal {
  background-image: url(../Administrator/Files/Design/PardakhtMahal.jpg);
}

/*-----------------------------------------Basketcontainer---------------------------------*/
.Basketcontainer {
  float: left;
  margin-top: 4px;
  width: 100px;
  height: 26px;
}

.BasketcontainerBox {
  position: absolute;
}

.signin {
  text-align: right;
  color: #b7b7b7;
  padding: 5px 7px 3px 25px;
  background-image: url("../Administrator/Files/Design/toggle_down_light.png");
  background-repeat: no-repeat;
  background-position: left center;
  height: 25px;
  float: right;
  font-size: 12pt;
}

.signin:hover {
  color: #fff;
}

.BasketcontainerImage {
  float: right;
  width: 32px;
  height: 24px;
  margin-left: 10px;
}

.signin.menu-open {
  background-image: url("../Administrator/Files/Design/toggle_up_dark.png");
}

#small_signup {
  display: inline;
  float: none;
  width: 170px;
}

#signin_menu {
  display: none;
  position: absolute;
  width: 210px;
  z-index: 99999999999999999999999999;
  border: 0;
  text-align: left;
  padding: 0px;
  font-size: 10pt;
  left: 0;
  border-top: 0;
  margin-top: 41px;
}

.ProductBoxRight2 .Item .ItemTitle {
  color: #fff !important;
}

.ProductBoxRight2 .Item:hover .ItemTitle {
  color: #000 !important;
}

.BoxSmall2 {
  float: right;
  width: 280px;
  border-top: 0;
  background-color: #fff;
  box-shadow: 0px 0px 7px #000000 inset;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
}

.BoxSmall2 .BoxTop {
  float: right;
  width: 100%;
  height: 30px;
  background-color: #888;
}

.BoxSmall2 .BoxTop h1,
.BoxSmall2 .BoxTop h2 {
  float: right;
  font-size: 11pt;
  color: #fff;
  margin: 0;
  padding: 0;
  line-height: 170%;
  margin-right: 10px;
  margin-top: 3px;
  font-weight: normal;
}

.BoxSmall2 .BoxCenter {
  float: right;
  width: 260px;
  text-align: right;
  padding-bottom: 10px;
  padding: 10px;
}

/*-------------------------Step-------------------------*/
.OrderRepairStep2 {
  float: right;
  width: 100%;
  padding-bottom: 6px;
  padding-top: 0px;
  padding-right: 170px;
}

.OrderRepairStep2 .ItemBox {
  float: right;
}

.OrderRepairStep2 .ItemBoxCenter {
  background-image: url(../Administrator/Files/Design/arrow-Down.jpg);
  height: 25px;
  width: 30px;
  float: right;
  margin-top: 18px;
}

.OrderRepairStep2 .Item {
  float: right;
  height: 45px;
  text-align: center;
  font-size: 10pt;
  margin-top: 10px;
  padding: 0px 15px 0px 15px;
  background-color: #bfbfbf;
  color: #000;
  border: solid 1px #474545;
  border-radius: 3px;
  -moz-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  -webkit-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
  cursor: pointer;
}

.OrderRepairStep2 .Item:hover {
  border: solid 1px #474545;
  background-color: Green;
  color: #fff;
}

.OrderRepairStep2 .ItemCenter {
  padding-top: 12px;
  height: 33px;
}

.OrderRepairStep2 .Active {
  border: solid 1px #474545;
  background-color: Green;
  color: #fff;
}

/*---------------------------Step1Box------------------*/
.Step1Box .Title {
  float: right;
  font-weight: bold;
  width: 100px;
  text-align: left;
  margin-left: 10px;
}

.Step1Box .Value {
  float: right;
}

/*-------------------------Step-------------------------
.NavBox
{
	float: right;
	background-color: gold;
	width: 100%;
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.OrderRepairStep
{
	float: right;
	width: 100%;
}
.OrderRepairStep .Item
{
	float: right;
	margin-top: 10px;
	margin-bottom: 15px;
	border-bottom: solid 1px #aaa;
	margin-right: 20px;
}
.OrderRepairStep .Item:hover
{
	border-bottom: solid 1px #fb5235;
}

.OrderRepairStep .Active
{
	color: #ff0000;
	border-bottom: solid 1px #fb5235;
}
*/
/*-------------------------AdsHomePageGallery-------------------------*/
.AdsHomePageGalleryBox1 {
  width: 980px;
  height: 340px;
}

.AdsHomePageGalleryTop {
  background-image: url(../Administrator/Files/Design/1.png);
  float: right;
  width: 100%;
  height: 130px;
  background-repeat: no-repeat;
  background-position: center;
}

.AdsHomePageGalleryTop2 {
  float: right;
  width: 100%;
  height: 115px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../Administrator/Files/Design/head3.png);
}

.AdsHomePageGallery {
  background-image: url(../Administrator/Files/Design/111.png);
  float: right;
  width: 100%;
  height: 360px;
}

.AdsHomePageGallery4 {
  height: 460px;
}

.AdsHomePageGallery4 h3 {
  color: #efcc68 !important;
  font-size: 14pt;
  margin-bottom: 25px;
}

.bg3 {
  background-image: url(../Administrator/Files/Design/head2.png);
  float: right;
  width: 100%;
}

.AdsHomePageGallery h3 {
  color: #555;
  font-size: 16pt;
  margin-bottom: 25px;
  font-weight: normal;
}

.AdsHomePageGallery .ItemAds {
  float: right;
  width: 278px;
  height: 225px;
  background-color: #fff;
  overflow: hidden;
  border-radius: 10px;
}

.AdsHomePageGallery .ItemImage {
  float: right;
  width: 270px;
  height: 170px;
  background: #fff;
  padding: 3px;
  box-shadow: 1px 1px 2px 1px #d5d5d5;
  border-radius: 10px;
  margin-right: 1px;
}

.AdsHomePageGallery .ItemTitle {
  float: right;
  color: #333;
  width: 100%;
  text-align: center;
  margin-top: 10px;
}

.AdsHomePageGallery .ItemTitle:hover {
  color: #967c44;
}

.AdsHomePageGallery .ItemDesc {
  float: right;
  width: 270px;
  text-align: center;
  margin-top: 5px;
  color: #555;
  font-size: 10pt;
  margin-right: 5px;
  height: 105px;
}

.AdsHomePageGallery .More {
  background-color: #4e4a4a;
  width: 258px;
  color: #ff4b3d;
  float: right;
  text-align: left;
  padding-left: 20px;
}

.AdsHomePageGallery .ItemDesc:hover {
  color: #f86e10;
}

.heading-before {
  background: url(../Administrator/Files/Design/tail-bg-h3.gif) repeat-x 0 0;
  display: block;
  height: 2px;
  left: 0;
  position: absolute;
  top: 16px;
}

.heading-after {
  background: url(../Administrator/Files/Design/tail-bg-h3.gif) repeat-x 0 0;
  display: block;
  height: 2px;
  position: absolute;
  right: 0;
  top: 16px;
}

.heading {
  color: #fff;
  display: inline-block;
  letter-spacing: -1px;
  margin-bottom: 27px;
  text-shadow: 1px 1px 1px #524844;
  font-size: 16pt;
  padding: 0;
  margin-top: 8px;
}

.heading-wrapper-center {
  overflow: hidden;
  position: relative;
  text-align: center;
  width: 100%;
}

@keyframes up {
  0% {
    bottom: 40px;
  }

  50% {
    bottom: 35px;
  }

  100% {
    bottom: 40px;
  }
}

.backtotop {
  position: fixed;
  cursor: pointer;
  right: 20px;
  bottom: 40px;
  height: 40px;
  width: 40px;
  background: url(../Administrator/Files/Design/totop2.png) no-repeat center;
  transition: all 0.3s ease;
  display: none;
  z-index: 99999999;
  animation: up 1s infinite;
  animation-timing-function: linear;
}

.backtotop:hover {
  opacity: 0.7;
}

/*-------------------------RepeaterCustomerUsIndex-------------------------*/
.RepeaterCustomerUsIndex1 {
  float: right;
  width: 100%;
}

.RepeaterCustomerUsIndex1 .Top {
  float: right;
  width: 100%;
  height: 20px;
  background-repeat: repeat-x;
  margin-top: 30px;
}

.RepeaterCustomerUsIndex {
  float: right;
  width: 976px;
  text-align: center;
  height: 174px;
  overflow: hidden;
}

.RepeaterCustomerUsIndex .Item {
  width: 235px;
  height: 75px;
  float: right;
  border-left: solid 1px #e1e1e1;
  margin-right: 8px;
  margin-top: 10px;
}

.RepeaterCustomerUsIndex .ItemAds {
  float: right;
  border-bottom: solid 1px #e1e1e1;
  width: 230px;
  padding-bottom: 4px;
}

.RepeaterCustomerUsIndexBorder {
  background-image: url(../Administrator/Files/Design/main-bg.gif);
  background-repeat: repeat;
  float: right;
  height: 181px;
  width: 4px;
  margin-right: -3px;
}

/*-------------------------AdsHomePageGallery-------------------------*/
.ProductShow1 {
  float: right;
  width: 100%;
}

.ProductShow1 .ItemImage {
  float: right;
  width: 270px;
  height: 170px;
  background: #fff;
  padding: 3px;
  box-shadow: 1px 1px 2px 1px #d5d5d5;
}

.divAc {
  width: 100%;
  float: right;
  margin-top: 20px;
  position: relative;
}

.TitleTopProject {
  float: right;
  width: 100%;
  height: 35px;
  margin: 40px 0 0 0;
  background: url(../Administrator/Files/Design/bgTitleFull.png) no-repeat center;
}

.TitleTopProject a {
  color: #677700;
  font-size: 16pt;
  font-weight: 600;
}

.bgAc {
  border: none;
  border-right: 13px solid #749500 !important;
  background: #a4bd04 !important;
  color: #fff !important;
}

.linkTitle {
  padding: 20px;
  color: #555;
}

.linkDownload {
  padding: 3%;
  width: 94%;
  height: 36px;
  float: right;
  overflow: hidden;
  border-bottom: 3px solid #fa3e3e;
  background: #eeeeee;
}

.linkDownload h2 {
  font-size: 14px;
  color: #555;
  float: right;
  margin-top: 5px;
}

.linkDownload h2:hover {
  color: #fa3e3e;
}

.bgLinkDownload {
  font-size: 14px;
  color: #555;
  float: left;
  margin-top: 2px;
  height: 30px;
  width: 30px;
  background: url(../Administrator/Files/Design/bgIconDownload5.png) no-repeat;
  background-size: 30px 30px;
}

.bgLinkDownload:hover {
  opacity: 0.7;
}

.ProductShow2 {
  float: right;
  width: 100%;
  display: none !important;
}

.ProductShow2 .ItemAds {
  float: right;
  width: 180px;
  height: 220px;
  margin-bottom: 20px;
}

.ProductShow2 .ItemImage {
  float: right;
  width: 150px;
  height: 150px;
  margin-right: 15px;
  background: #fff;
  padding: 3px;
}

.ProductShow2 .ItemTitle {
  float: right;
  color: #555;
  width: 100%;
  text-align: center;
  margin-top: 10px;
  font-size: 12pt;
}

.ProductShow2 .ItemTitle:hover {
  color: #df0024;
}

.ProductShow2 .ItemDesc {
  float: right;
  width: 100%;
  text-align: right;
  margin-top: 5px;
  height: 158px;
  overflow: hidden;
  font-size: 10pt;
  color: #555;
}

.ProductShow1 .Left1 {
  width: 365px;
  float: right;
  min-height: 345px;
  overflow: hidden;
}

.ProductShow1 .Left3 {
  width: 240px;
  border: solid 1px #e9e7e7;
  margin-right: 10px;
  float: right;
  margin-top: 10px;
  border-radius: 3px;
  margin-bottom: 10px;
}

.ProductShow1 .Left {
  width: 100%;
  margin: 0;
  float: right;
  border-radius: 3px;
}

.ProductShow .ItemImage {
  max-width: 278px;
  height: 220px;
}

.HeightPic {
  margin-right: 33px;
}

.HeightPicImage {
  float: none !important;
  height: 300px !important;
  max-width: 100% !important;
}

/* ------------------------------------------ProductLeft-----------------------------------*/
.ProductLeft {
  float: right;
  width: 310px;
}

.productPicMain {
  height: 230px !important;
  width: 340px !important;
}

.ProductLeft .ProductImage {
  float: right;
}

.ProductMorePicBox {
  width: 76px !important;
  height: 77px !important;
  margin-right: 4px;
}

.ProductMorePic {
  max-width: 76px !important;
  height: 77px !important;
}

.SlidePicture {
  float: right;
  width: 100%;
  height: 100%;
  background: #fff;
}

.slideTuch {
  display: none;
  visibility: hidden;
}

.ServiceBox {
  display: none;
  float: right;
  width: 100%;
  overflow: hidden;
  margin-top: -10px;
  padding-top: 40px;
  min-height: 100px;
  position: relative;
  z-index: 2;
  background: url(../Administrator/Files/Design/bgTopProject.png) no-repeat top center;
}

.ServiceBox .ItemAds {
  width: 390px;
  height: 335px;
  margin: 10px;
  padding: 0;
  float: right;
  overflow: hidden;
  border-radius: 15px;
}

.ServiceBox .ItemAds .ItemImage {
  float: right;
  width: 390px;
  height: 335px;
}

.ServiceBox .ItemAds .Text {
  float: right;
  width: 100%;
  color: #333;
  font-size: 9pt;
  text-align: center;
  margin-top: 10px;
}

.Service2 {
  float: right;
  background-color: #ff4d3e;
  margin-top: -100px;
  position: relative;
  z-index: 999999;
}

.ServiceBox1 {
  float: right;
  width: 100%;
  margin-top: 0px;
}

.ServiceBox1 .Top {
  text-align: center;
  float: right;
  color: #424242;
  font-size: 16px;
  width: 100%;
  margin-bottom: 35px;
  margin-top: 5px;
}

.ServiceBox1 .ItemAds {
  margin: 2px;
  float: right;
  transition: all 0.7s;
}

.ServiceBox1 .ItemAds .Title {
  text-align: right;
  margin: 0px 2px;
  padding: 0px 10px;
  float: right;
  transition: all 0.7s;
  color: #424242;
  font-size: 13px;
}

.ServiceBox1 .ItemAds .Title:hover {
  transition: all 0.7s;
  color: #ff6000;
}

.ServiceBox1 .ItemAds .Text {
  text-align: right;
  margin: 2px;
  width: 74px;
  padding: 0px 10px;
  float: right;
  transition: all 0.7s;
  color: #424242;
  font-size: 14px;
}

.ServiceBox1 .ItemAds .ImageBox {
  float: right;
  width: 40px;
  height: 30px;
  overflow: hidden;
  border-radius: 5px;
}

.ServiceBox1 .ItemAds .ItemImage {
  float: right;
  width: 40px;
  height: 30px;
}

.ServiceBox2 {
  float: right;
  width: 100%;
  overflow: hidden;
  margin-top: 0px;
  background: #e5e5e5;
  padding: 55px 0;
}

.ServiceBox2 .ItemAds {
  width: 100%;
  min-height: 92px;
  margin: 5px 5px 5px 0px;
  float: right;
  transition: all 0.7s;
}

.ServiceBox2 .thumbSlide {
  width: 100%;
  height: 99px;
  margin: 0px;
  float: left;
  transition: all 0.7s;
  direction: ltr;
  cursor: pointer;
  background: #fff;
  opacity: 0.8;
  border-bottom: 5px solid #fff;
}

.ServiceBox2 .thumbSlide:hover {
  opacity: 1;
  border-bottom: 5px solid #475764;
}

.ServiceBox2 .thumbSlide .ItemImage {
  background-size: 72px 72px;
}

.ServiceBox2 .thumbSlide .ItemImage1 {
  background: url(../Administrator/Files/Design/s1.jpg) no-repeat center;
  background-size: 50px 43px;
}

.ServiceBox2 .thumbSlide .ItemImage2 {
  background: url(../Administrator/Files/Design/s2.jpg) no-repeat center;
  background-size: 50px 50px;
}

.ServiceBox2 .thumbSlide .ItemImage3 {
  background: url(../Administrator/Files/Design/s3.jpg) no-repeat center;
  background-size: 50px 53px;
}

.ServiceBox2 .thumbSlide .ItemImage4 {
  background: url(../Administrator/Files/Design/s4.jpg) no-repeat center;
  background-size: 50px 46px;
}

.ServiceBox2 .thumbSlide .Title {
  width: 170px;
  text-align: right;
  height: 72px;
  padding: 20px 20px 10px 10px;
  float: right;
  transition: all 0.7s;
  color: #000;
  font-size: 14px;
}

.ServiceBox2 .ItemAds .Title {
  width: 670px;
  text-align: right;
  margin: 10px 10px 0 0;
  padding: 0px 10px;
  float: right;
  transition: all 0.7s;
  color: #000;
  font-size: 18px;
}

.ServiceBox2 .ItemAds .Text {
  width: 670px;
  text-align: justify;
  margin: 10px;
  padding: 0px 10px;
  float: right;
  transition: all 0.7s;
  color: #000;
  font-size: 14px;
  direction: rtl !important;
}

.ServiceBox2 .ItemAds .ImageBox {
  float: right;
  width: 470px;
  height: 207px;
  box-shadow: 1px 2px 2px 2px #aaaaaa;
  border-radius: 8px;
  overflow: hidden;
}

.ServiceBox2 .ItemAds .ItemImage {
  float: right;
  width: 470px;
  height: 207px;
}

.ServiceBox3 {
  display: none;
  float: right;
  width: 100%;
  min-height: 110px;
  overflow: hidden;
  margin-top: 0px;
  background: #fff;
  padding-bottom: 30px;
  position: relative;
}

.ServiceBox3 .ItemAds {
  width: 280px;
  height: 340px;
  margin: 7px;
  padding: 0;
  float: right;
}

.ServiceBox3 .ItemAds .ImageBox {
  float: right;
  width: 280px;
  height: 275px;
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
}

.ServiceBox3 .ItemAds .ItemImage {
  float: right;
  width: 280px;
  height: 275px;
  margin: 0;
}

.ServiceBox3 .ItemAds .Text {
  float: right;
  width: 90%;
  padding: 0 5%;
  color: #1a326a;
  font-size: 11pt;
  text-align: center;
  margin-top: 25px;
  transition: all 0.7s;
}

.ServiceBox3 .ItemAds .Text:hover {
  color: #ffb000;
  transition: all 0.7s;
}

.ServiceBox4 {
  float: right;
  width: 100%;
  min-height: 250px;
  overflow: hidden;
  margin-top: 0px;
  background: url(../Administrator/Files/Design/bgProductIndex.png);
  padding-bottom: 30px;
}

.hi-icon {
  float: right;
  width: 143px;
  height: 143px;
  margin: 20px;
  border-radius: 50%;
  position: relative;
}

.hi-icon:after {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  content: "";
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.hi-icon-wrap {
  text-align: center;
  margin: 0 auto;
  padding: 2em 0 3em;
}

.hi-icon-effect-8 .hi-icon {
  background: rgba(255, 255, 255, 0.1);
  -webkit-transition:
    -webkit-transform ease-out 0.1s,
    background 0.2s;
  -moz-transition:
    -moz-transform ease-out 0.1s,
    background 0.2s;
  transition:
    transform ease-out 0.1s,
    background 0.2s;
}

.hi-icon-effect-8 .hi-icon:after {
  top: 0;
  left: 0;
  padding: 0;
  z-index: -1;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
  opacity: 0;
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -ms-transform: scale(0.9);
  transform: scale(0.9);
}

.hi-icon-effect-8 .hi-icon:hover {
  background: rgba(255, 255, 255, 0.05);
  -webkit-transform: scale(0.93);
  -moz-transform: scale(0.93);
  -ms-transform: scale(0.93);
  transform: scale(0.93);
  color: #fff;
}

.hi-icon-effect-8 .hi-icon:hover:after {
  -webkit-animation: sonarEffect 1.3s ease-out 75ms;
  -moz-animation: sonarEffect 1.3s ease-out 75ms;
  animation: sonarEffect 1.3s ease-out 75ms;
}

@-webkit-keyframes sonarEffect {
  0% {
    opacity: 0.3;
  }

  40% {
    opacity: 0.5;
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.1),
      0 0 5px 5px #e67568,
      0 0 0 10px rgba(255, 255, 255, 0.5);
  }

  100% {
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.1),
      0 0 5px 5px #e67568,
      0 0 0 10px rgba(255, 255, 255, 0.5);
    -webkit-transform: scale(1.5);
    opacity: 0;
  }
}

@-moz-keyframes sonarEffect {
  0% {
    opacity: 0.3;
  }

  40% {
    opacity: 0.5;
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.1),
      0 0 5px 5px #e67568,
      0 0 0 5px rgba(255, 255, 255, 0.5);
  }

  100% {
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.1),
      0 0 5px 5px #e67568,
      0 0 0 5px rgba(255, 255, 255, 0.5);
    -moz-transform: scale(1.5);
    opacity: 0;
  }
}

@keyframes sonarEffect {
  0% {
    opacity: 0.3;
  }

  40% {
    opacity: 0.5;
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.1),
      0 0 5px 5px #e67568,
      0 0 0 5px rgba(255, 255, 255, 0.5);
  }

  100% {
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.1),
      0 0 5px 5px #e67568,
      0 0 0 5px rgba(255, 255, 255, 0.5);
    transform: scale(1.5);
    opacity: 0;
  }
}

.ServiceBox4 .ItemAds .ImageBox {
  float: right;
  width: 143px;
  height: 143px;
  overflow: hidden;
  border-radius: 50%;
}

.ServiceBox4 .ItemAds .ItemImage {
  float: right;
  width: 143px;
  height: 143px;
  overflow: hidden;
  border-radius: 50%;
}

.ServiceBox4 .Text {
  float: right;
  width: 100%;
  color: #737373;
  font-size: 10pt;
  text-align: center;
  margin-top: 32px;
}

.ServiceBox5 {
  float: right;
  width: 100%;
  overflow: hidden;
  margin-top: 0px;
  padding-top: 0px;
  min-height: 100px;
  background: #adadad url(../Administrator/Files/Design/bgTopProduct.png) no-repeat top center;
}

.ServiceBox5 .ItemAds {
  width: 100px;
  margin: 0;
  height: 371px;
  padding: 0;
  float: right;
  overflow: hidden;
  border-right: 1px solid #d3d3d3;
  background: #e5e5e5;
}

.ServiceBox5 .ItemAds .ItemImage {
  float: right;
  width: 100px;
  height: 333px;
  opacity: 0;
}

.ServiceBox5 .ItemAds:hover .ItemImage {
  opacity: 1;
}

.ServiceBox5 .ItemAds .Title {
  float: right;
  width: 100%;
  color: #505050;
  font-size: 14px;
  text-align: center;
  padding-top: 5px;
  height: 34px;
  background: url(../Administrator/Files/Design/bgTopPr.png) repeat-x;
}

.ServiceBox5 .ItemAds:hover .Title {
  background: radial-gradient(ellipse at center,
      rgba(255, 123, 41, 1) 0%,
      rgba(234, 96, 5, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7b29', endColorstr='#ea6005', GradientType=1);
}

/* ------------------------------------------CustomerIndex-----------------------------------*/

.CustomerIndex {
  float: right;
  width: 740px;
  margin-top: 60px;
  height: 215px;
}

.CustomerIndex .Title {
  float: right;
  width: 100%;
  height: 36px;
  background-image: url(../Administrator/Files/Design/TitleCustomer.png);
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: 10px;
}

.CustomerIndex .ItemAds {
  float: right;
  width: 116px;
  height: 173px;
  background-image: url(../Administrator/Files/Design/CustomerBox.png);
}

.CustomerIndex .ItemImage {
  float: right;
  width: 90px;
  padding: 10px;
}

/* ------------------------------------------CategoryProductIndex-----------------------------------*/
.CategoryProductIndex {
  float: right;
  width: 100%;
  min-height: 470px;
  background: url(../Administrator/Files/Design/bgServices.png) no-repeat center;
}

.CategoryProductIndex .TitleTop {
  float: right;
  width: 100%;
  height: 35px;
  margin: 35px 0 0 0;
  background: url(../Administrator/Files/Design/bgTitleFull.png) no-repeat center;
}

.CategoryProductIndex .TitleTop a {
  color: #677700;
  font-size: 16pt;
  font-weight: 600;
}

.CategoryProductIndex .Item {
  float: right;
  width: 322px;
  margin: 37px 0px 0 0px;
  height: 420px;
}

.CategoryProductIndex .Item .ImageBox {
  float: right;
  width: 290px;
  height: 290px;
  border: solid 14px #fff !important;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 2px 2px 20px 2px #e4e4e4;
  position: relative;
}

.CategoryProductIndex .Item .ImageBox:hover .ImageHover {
  opacity: 1;
}

.CategoryProductIndex .Item .ImageHover {
  float: right;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(164, 189, 4, 0.5) url(../Administrator/Files/Design/bgLinkHover.png) no-repeat center;
  position: absolute;
  transition: all 0.7s;
  opacity: 0;
}

.CategoryProductIndex .Item .Image {
  float: right;
  width: 290px;
  height: 290px;
  border-radius: 50%;
}

.CategoryProductIndex .Item .Title {
  float: right;
  width: 100%;
  height: 35px;
  margin-top: 25px;
  color: #a4bd04;
  font-size: 14pt;
  font-weight: normal;
}

.CategoryProductIndex .Item .Title:hover {
  color: #555;
}

/* ------------------------------------------ProductIndex-----------------------------------*/
.ProductIndex {
  float: right;
  width: 980px;
  height: 395px;
  background-image: url(../Administrator/Files/Design/ServiceIndex.png);
  padding-top: 50px;
}

.ProductIndex .Item {
  float: right;
  width: 315px;
  margin-right: 10px;
  height: 235px;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: #d3d3d8;
  -webkit-box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.84);
  -moz-box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.84);
  box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.84);
  position: relative;
}

.ProductIndex .Item .Image {
  float: right;
  width: 315px;
  height: 235px;
}

.ProductIndex .Item .Title {
  float: right;
  width: 100%;
  height: 35px;
  padding: 0px;
  margin: 0px;
  color: #333;
  font-size: 11pt;
  background-color: #ffbe00;
  font-weight: normal;
  padding-top: 15px;
}

.ProductIndex .Item .Title:hover {
  color: #fff;
}

.ProductIndex span {
  display: none;
  font-size: 11px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  padding: 0px;
  width: 315px;
  line-height: 1.2em;
}

/* ------------------------------------------Monasebat-----------------------------------*/
.Monasebat {
  float: right;
}

.Monasebat .Title {
  float: right;
  color: #f76229;
  width: 130px;
  margin-right: 10px;
  font-size: 14pt;
  text-shadow: 4px 4px 2px #ccc;
}

.Monasebat .Path {
  float: right;
  color: #333;
  width: 830px;
  margin-right: 0px;
  text-align: right;
}

/* ------------------------------------------ProductIndex-----------------------------------*/
.ProductRight {
  float: right;
  height: 444px;
  width: 980px;
  background-image: url(../Administrator/Files/Design/ServiceIndex.png);
}

.ProductRight .Item {
  float: right;
  width: 100%;
  height: 250px;
  padding: 10px 0 10px 0;
}

.ProductRight .Item .Image {
  float: right;
  width: 180px;
  height: 220px;
  margin-right: 30px;
}

.ProductRight .Item .Title {
  float: right;
  width: 100%;
  height: 35px;
  padding: 0px;
  margin: 0px;
  color: #00a5f4;
  font-size: 12pt;
  font-weight: normal;
  text-align: center;
  margin-top: 10px;
}

.ProductRight .Item .Title:hover {
  color: #f76229;
}

/* ------------------------------------------nav1-----------------------------------*/
#nav1 {
  width: 600px;
  margin: 0 auto;
  position: relative;
  float: right;
  padding: 0;
  z-index: 9999;
  margin-top: 8px;
}

#nav1 li {
  float: right;
  display: block;
  position: relative;
  margin: 0;
  z-index: 99999;
  text-align: center;
}

#nav1 li:hover>a {
  color: #333;
  background-color: #ffffff;
  border-radius: 10px;
}

#nav1 li a {
  display: block;
  padding: 8px 14px 8px 14px;
  text-decoration: none;
  color: #ffbe00;
  text-align: center;
  font-size: 11pt;
}

#nav1 li a .imgMenu {
  height: 28px;
}

#nav1 li a p {
  margin: 5px auto;
  text-align: center;
  margin-top: 10px;
}

#nav1 ul {
  position: absolute;
  right: 0;
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

#nav1 ul li:hover>a {
  color: #333;
  background: none;
}

#nav1 ul li {
  width: 180px;
  float: right;
  margin: 0;
  background-color: #df0024;
  padding-top: 3px;
  background-image: none;
}

#nav1 ul a {
  display: block;
  height: 23px;
  padding: 5px 10px 5px 5px;
  text-align: right;
  color: #fff;
  font-size: 13px;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  background: none;
}

#nav1 ul.submenu ul {
  position: absolute;
  right: 180px;
  display: none;
  top: 0px;
  padding: 0;
  list-style: none;
}

.BoxIndexText {
  min-height: 214px;
  width: 100%;
  float: right;
  background-color: #f0f0f0;
  margin-top: 0px;
  padding-bottom: 15px;
}

.IndexTextLeft {
  float: right;
}

.IndexTextRight {
  float: right;
  width: 247px;
  margin-right: 30px;
}

.IndexTextSlide {
  width: 230px;
  float: right;
  margin: 76px 10px;
}

.IndexText {
  width: 100%;
  padding: 0px;
  text-align: justify;
  float: right;
  transition: all 0.7s;
  color: transparent;
  font-size: 15px;
  margin-top: 0px;
  line-height: 35px;
}

.IndexTextBox h1 {
  text-align: right;
  width: 92%;
  padding: 0px 4%;
  margin: 30px 0 0 0;
  float: right;
  transition: all 0.7s;
  color: #FFF;
  font-size: 18px;
  font-weight: 600;
}

.PlusGoogle {
  position: fixed;
  top: 40px;
  left: 30px;
  width: 100px;
  height: 50px;
  text-align: center;
  font-weight: bold;
}

/*------------------------------------RepeaterDataList-----------------------------*/
#RepeaterDataList2 {
  float: right;
  width: 100%;
  margin-top: 10px;
}

#RepeaterDataList2 .Item {
  width: 155px;
  height: 150px;
  border: 1px solid #aaa;
  float: right;
  margin-right: 20px;
  margin-left: 10px;
  margin-bottom: 10px;
  background-color: #eee;
  border-radius: 15px;
  -moz-box-shadow: 0px 1px 13px #999;
  -webkit-box-shadow: 0px 1px 13px #999;
  box-shadow: 0px 1px 13px #999;
  -moz-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  -webkit-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}

#RepeaterDataList2 .Item:hover {
  -moz-box-shadow: 0px 0px 13px #777;
  -webkit-box-shadow: 0px 0px 13px #777;
  box-shadow: 0px 0px 13px #777;
  -webkit-transform: scale(1.06);
  -moz-transform: scale(1.06);
  -ms-transform: scale(1.06);
  -o-transform: scale(1.06);
  transform: scale(1.06);
}

#RepeaterDataList2 .Item .ItemImage {
  width: 135px;
  height: 100px;
  margin-right: 10px;
  margin-top: 10px;
  float: right;
}

#RepeaterDataList2 .Item .ItemLink {
  width: 100%;
  float: right;
  color: Black;
  text-align: center;
}

#RepeaterDataList2 .Item .ItemLink:hover {
  color: #870301;
}

/* ------------------------------------------Poll-----------------------------------*/
.PollBox {
  float: right;
  width: 220px;
  padding: 10px 20px 0 20px;
}

.PollTitle {
  float: right;
  margin-top: 5px;
  width: 100%;
  color: #333;
  text-align: right;
  font-size: 9pt;
}

.PollOption {
  float: right;
  color: #333;
  text-align: right;
  font-size: 8pt;
}

.PollResult {
  float: right;
  color: #333;
  text-align: right;
  width: 200px;
  margin-top: 2px;
}

.PollResultItem {
  float: right;
  text-align: right;
  height: 10px;
  background-color: #333;
  color: #333;
  font-weight: bold;
  border: solid 1px #333;
}

.PollResultItemTitle {
  width: 100%;
  float: right;
  margin-top: 0px;
  color: #333;
  font-size: 8pt;
}

.PollButton {
  width: 100%;
  float: right;
}

.PollButton .Button {
  background-color: #333;
  border: solid 1px #333;
  color: #ec6271;
  padding-right: 10px;
  padding-left: 10px;
  float: right;
  margin-top: 5px;
  margin-right: 5px;
  cursor: pointer;
  font-size: 9pt;
}

.PollButton .Button:hover {
  background-color: #eee;
}

/*------------------------------FAQ--------------------------------*/
.FAQ {
  float: right;
  width: 100%;
}

.FAQItem {
  cursor: pointer;
  margin-top: 5px;
  padding: 2%;
  float: right;
  width: 96%;
  border-bottom: 1px solid #8a9069;
  -moz-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  -webkit-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}

.FAQItem:hover {
  border-bottom-color: transparent;
  color: #fff;
  background: #363636;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
  -moz-box-shadow: 0px 1px 3px #000000 inset;
  -webkit-box-shadow: 0px 1px 3px #000000 inset;
  box-shadow: 0px 1px 3px #000000 inset;
}

.FAQItemActive {
  border-bottom-color: transparent;
  color: #fff;
  background: #363636;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
  -moz-box-shadow: 0px 1px 3px #000000 inset;
  -webkit-box-shadow: 0px 1px 3px #000000 inset;
  box-shadow: 0px 1px 3px #000000 inset;
}

.FAQItem:hover>.FAQItemTitle {
  color: #fddd02;
}

.FAQItemTitleActive {
  color: #fddd02 !important;
}

.FAQText {
  display: none;
  float: right;
  width: 100%;
  font-size: 12pt;
  text-align: justify;
}

.FAQItem .FAQItemTitle {
  float: right;
  font-size: 13pt;
  color: #777;
  width: 100%;
}

/*------------------------------BoxCommentUser--------------------------------*/
.BoxCommentUser {
  background-color: #fff;
  float: right;
  padding: 0 2% 0 2%;
  width: 96%;
  margin-top: 30px;
  -webkit-box-shadow: 0 11px 14px -5px #ccc;
  -moz-box-shadow: 0 11px 14px -5px #ccc;
  box-shadow: 0 11px 14px -5px #ccc;
}

.BoxCommentUser .BoxTop {
  float: right;
  border-bottom: solid 4px #1d9ea9;
  width: 100%;
  text-align: right;
}

.BoxCommentUser .BoxTop h2,
.BoxCommentUser .BoxTop h1 {
  float: right;
  font-size: 18px;
  color: #555;
  margin: 0;
  padding: 0;
  line-height: 170%;
  font-weight: normal;
  margin-top: 8px;
  margin-right: 15px;
}

.BoxCommentUser .BoxTop a {
  color: #555;
}

.BoxCommentUser .BoxTop a:hover {
  color: #888;
}

.textPage {
  float: right;
  width: 97%;
  margin-right: 15px;
}

.BoxCommentUser .FieldTextBox {
  float: right;
  margin-right: 10px;
  font-size: 9pt;
  width: 90%;
  margin-top: 3px;
  text-align: right;
  border: solid 1px #d8d8d8;
  height: 25px;
  padding-right: 5px;
  color: #333;
}

.BoxCommentUser .FieldTextBoxB {
  text-align: center;
  direction: ltr;
  float: right;
}

.BoxCommentUser .FieldTextBoxC {
  width: 90%;
}

.BoxCommentUser .FieldButton {
  background-image: none;
  background-color: #1d9ea9;
  color: #fff;
  width: 165px;
  margin-bottom: 10px;
  margin-right: 10px;
}

/*-----------------------CommentUserShow ------------------*/
.CommentShowBox {
  padding: 2%;
  border: solid 1px #666666;
  width: 93%;
  float: right;
  margin: 1%;
  text-align: right;
  background-color: #edeeee;
  font-size: 10pt;
  border-radius: 15px;
  color: #2a2a2a;
  -moz-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  -webkit-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}

.CommentShowBox:hover {
  -webkit-box-shadow: 0px 2px 6px #999999;
  -moz-box-shadow: 0px 2px 6px #999999;
  box-shadow: 0px 2px 6px #999999;
}

.CommentShowBox .Row img {
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

.CommentShowBox:hover>.Row img {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
}

.CommentShowBox2 {
  background-color: #f1f1f1;
}

.CommentShowBox .Icon1 {
  float: right;
  margin-right: 5px;
  width: 40px;
  height: 40px;
}

.CommentShowBox .Icon2 {
  float: right;
  margin-right: 5px;
  background-image: url("../Administrator/Files/Design/comment_add.png");
  width: 16px;
  height: 16px;
}

.CommentShowBox .Icon3 {
  float: right;
  margin-right: 5px;
  background-image: url("../Administrator/Files/Design/date_edit.png");
  width: 16px;
  height: 16px;
}

.CommentShowBox .Title {
  float: right;
  margin-right: 5px;
  font-weight: normal;
}

.CommentShowBox .Link {
  float: right;
  margin-right: 5px;
  font-weight: bold;
  color: #000;
}

.CommentShowBox .Link:hover {
  color: #ff6600;
}

/* Float Shadow */
.hvr-float-shadow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  -moz-transition-property: transform;
  transition-property: transform;
  float: right;
}

.hvr-float-shadow:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: "";
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: radial-gradient(ellipse at center,
      rgba(0, 0, 0, 0.35) 0%,
      rgba(0, 0, 0, 0) 80%);
  /* W3C */
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform, opacity;
  transition-property: transform, opacity;
  -moz-transition-property: transform, opacity;
}

.hvr-float-shadow:hover,
.hvr-float-shadow:focus,
.hvr-float-shadow:active {
  -webkit-transform: translateY(-5px);
  -moz-transform: translateY(-5px);
  transform: translateY(-5px);
  /* move the element up by 5px */
}

.hvr-float-shadow:hover:before,
.hvr-float-shadow:focus:before,
.hvr-float-shadow:active:before {
  opacity: 1;
  -webkit-transform: translateY(5px);
  -moz-transform: translateY(5px);
  transform: translateY(5px);
  /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}

/*---------------*/
/***** grid *****/
/*---------------*/
.grid figure {
  position: relative;
  display: block;
  /* بهتر از float */
  overflow: hidden;
  width: 100%;
  height: auto;
  margin: 0;
  text-align: center;
  cursor: pointer;

  /* حذف مقادیر کشنده: */
  float: none !important;
  max-height: none !important;
  min-width: auto !important;
}

.grid figure figcaption {
  padding: 2em;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.25em;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
  pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption>a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption>a {
  z-index: 1000;
  text-indent: 200%;
  white-space: nowrap;
  font-size: 0;
  opacity: 0;
}

.grid figure h2 {
  word-spacing: -0.15em;
  font-weight: 300;
}

.grid figure h2 span {
  font-weight: 800;
}

.grid figure h2,
.grid figure p {
  margin: 0;
}

.grid figure p {
  letter-spacing: 1px;
  font-size: 68.5%;
}

/*
figure.effect-jazz
{
	background: #0097ea;
	text-align: center;
}
figure.effect-jazz img
{
	opacity: 0.9;
}
figure.effect-jazz figcaption::after, figure.effect-jazz img, figure.effect-jazz p
{
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}
figure.effect-jazz figcaption::after
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	content: '';
	opacity: 0;
	-webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,0,1);
	transform: rotate3d(0,0,1,45deg) scale3d(1,0,1);
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}
figure.effect-jazz h2, figure.effect-jazz p
{
	opacity: 1;
	-webkit-transform: scale3d(0.8,0.8,1);
	transform: scale3d(0.8,0.8,1);
}

figure.effect-jazz h2
{
	padding-top: 26%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}
figure.effect-jazz p
{
	padding: 0.5em 2.5em;
	text-transform: none;
	font-size: 0.85em;
	opacity: 0;
	margin-top: 50px;
	position: absolute;
	z-index: 999999;
	text-align: center;
}
figure.effect-jazz:hover img
{
	opacity: 0.7;
	-webkit-transform: scale3d(1.05,1.05,1);
	transform: scale3d(1.05,1.05,1);
}

figure.effect-jazz:hover figcaption::after
{
	opacity: 1;
	-webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
	transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
}

figure.effect-jazz:hover h2, figure.effect-jazz:hover p
{
	opacity: 1;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}
*/

.BoxProduct {
  width: 100%;
  float: right;
}

.BoxProductTitle {
  color: #b08b11;
  font-size: 18px;
  width: 100%;
  float: right;
  margin: 30px 0 0 0;
}

#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#cssmenu {
  width: 100%;
  font-family: Helvetica, Arial, sans-serif;
  color: #aeab9c;
}

#cssmenu ul ul {
  display: none;
}

.align-right {
  float: right;
}

#cssmenu>ul>li>a {
  padding: 11px 20px;
  cursor: pointer;
  z-index: 2;
  font-size: 13px;
  margin-right: 10px;
  font-weight: normal;
  text-decoration: none;
  color: #aeab9c;
  text-align: right;
  font-family: BYekan;

  background: url(../Administrator/Files/Design/bullet.png) no-repeat right;
}

#cssmenu>ul>li>a:hover,
#cssmenu>ul>li.active>a,
#cssmenu>ul>li.open>a {
  color: #b08b11;
  font-weight: normal;
}

.holder {
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  right: 0;
}

.holder::after,
.holder::before {
  display: block;
  position: absolute;
  content: "";
  width: 6px;
  height: 6px;
  right: 210px;
  z-index: 10;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.holder::after {
  top: 15px;
}

#cssmenu>ul>li>a:hover>span::after,
#cssmenu>ul>li.active>a>span::after,
#cssmenu>ul>li.open>a>span::after {
  border-color: #444;
}

.holder::before {
  top: 16px;
  border-top: 2px solid;
  border-left: 2px solid;
}

#cssmenu ul ul li a {
  cursor: pointer;
  border-bottom: 1px solid #c9c9c9;
  padding: 10px 25px;
  z-index: 1;
  text-decoration: none;
  text-align: right;
  font-size: 13px;
  color: #aeab9c;
  font-family: BYekan;
}

#cssmenu ul ul li:hover>a,
#cssmenu ul ul li.open>a,
#cssmenu ul ul li.active>a {
  background: #424852;
  color: #ffffff;
}

#cssmenu ul ul li:first-child>a {
  box-shadow: none;
}

#cssmenu ul ul ul li:first-child>a {
  box-shadow: none;
}

#cssmenu ul ul ul li a {
  padding-left: 30px;
}

#cssmenu>ul>li>ul>li:last-child>a,
#cssmenu>ul>li>ul>li.last>a {
  border-bottom: 0;
}

#cssmenu>ul>li>ul>li.open:last-child>a,
#cssmenu>ul>li>ul>li.last.open>a {
  border-bottom: 1px solid #32373e;
}

#cssmenu>ul>li>ul>li.open:last-child>ul>li:last-child>a {
  border-bottom: 0;
}

#cssmenu ul ul li.has-sub>a::after {
  display: block;
  position: absolute;
  content: "";
  width: 5px;
  height: 5px;
  right: 230px;
  z-index: 10;
  top: 11.5px;
  border-top: 2px solid #444;
  border-left: 2px solid #444;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

#cssmenu ul ul li.active>a::after,
#cssmenu ul ul li.open>a::after,
#cssmenu ul ul li>a:hover::after {
  border-color: #eee;
}

/* =======================================================
   📁 UserSheetFa.css |  اصلاح برای تمام عرض کردن سایت
   توان پایش ماد – فروردین 1404
   ======================================================= */

.container,
.ContentMainBoxBox,
.BoxTopIndex,
.IndexProductBox,
.ServicesIndexBox,
.NewsSpecialBox,
.FooterBoxBox {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* =======================================================
   📁 UserSheetFa.css |  محو کردن تگ اچ یک
   توان پایش ماد – فروردین 1404
   ======================================================= */

h1 {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  color: transparent !important;
}

/* =======================================================
   📁 UserSheetFa.css |  حذف اسلایدشو صفحه اصلی
   توان پایش ماد – فروردین 1404
   ======================================================= */

#ctl12_div1 {
  display: none !important;
}

/* =======================================================
   📁 UserSheetFa.css |  اصلاح کامل تراز مرکزی محتوا
   توان پایش ماد – فروردین 1404
   ======================================================= */

.container,
.ContentMainBoxBox,
.BoxTopIndex,
.IndexProductBox,
.ServicesIndexBox,
.NewsSpecialBox,
.FooterBoxBox {
  width: 100% !important;
  max-width: 1200px;
  margin: 0 auto !important;
  float: none !important;
  padding: 0 15px;
  box-sizing: border-box;
  text-align: right;
}

html,
body {
  overflow-x: hidden;
}

/* ===============================
   🎯 استایل جدید هدر به سبک مدرن
   =============================== */

#TopHeader {
  background-color: white !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  direction: rtl;
}

/* لوگو در هدر */
#TopHeader .logo {
  max-height: 40px;
  margin: 0 20px;
}

/* منو اصلی */
#TopHeader .menu {
  display: flex;
  gap: 30px;
  align-items: center;
}

#TopHeader .menu a {
  color: #333;
  text-decoration: none;
  font-size: 15px;
  position: relative;
  transition: all 0.3s ease;
}

/* افکت زیرخط برای آیتم فعال */
#TopHeader .menu a.active::after,
#TopHeader .menu a:hover::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background-color: #6f2c83;
  /* رنگ بنفش */
}

/* دکمه تماس با ما */
#TopHeader .cta {
  background-color: #6f2c83;
  color: white;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 14px;
  margin-right: auto;
  margin-left: 20px;
  text-decoration: none;
  transition: background 0.3s;
}

#TopHeader .cta:hover {
  background-color: #531e63;
}

/* 🔒 غیرفعال‌سازی کامل زیرمنوهای منو و فلش‌ها */
#nav ul,
#nav ul li ul,
#nav ul li ul li ul {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* ⛔ حذف فلش هدایت‌گر به زیرمنو */
#nav li>a::after,
#nav li>a::before {
  display: none !important;
  content: none !important;
}

/* 🚫 پنهان‌سازی فلش‌های زیرمنو (تمام حالت‌ها) */
.ArrowDown,
.ArrowDown2,
.ArrowDown3 {
  display: none !important;
  background: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  float: none !important;
}

.HeaderTopHeaderTop {
  width: 100%;
  background: #ffffff;
  transition: all 0.4s ease-in-out;
}

/* حالت استیکی در حالت عادی (دسکتاپ) */
.HeaderTopHeaderTop.sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9999;
  background: #ffffff;
  transition: all 0.4s ease-in-out;
}

/* استیکی برای navDiv با حفظ رنگ آبی */
.navDiv.sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9998;
  background: #0f3cfb;
  transition: all 0.4s ease-in-out;
}

/* 🎯 نسخه موبایل: ارتفاع کمتر موقع استیکی */
@media (max-width: 768px) {
  .HeaderTopHeaderTop.sticky {
    min-height: 79px;
    /* یا هر مقداری که دوست داری */
  }
}

/* مخفی شدن کامل هدر هنگام اسکرول به پایین */
.HeaderTopHeaderTop.hide-header,
.navDiv.hide-header {
  transform: translateY(-100%);
  opacity: 0;
  transition:
    transform 0.4s ease,
    opacity 0.4s ease;
}

@media (max-width: 600px) {

  /* 📸 تنظیم تصویر مقاله در صفحه جزئیات به‌صورت کاور 600 */
  .Box .BoxCenter .ImagePost {
    width: 100% !important;
    height: auto !important;
  }
}

/* ####===== ResponsiveStyleSheet =====#### */
@media (max-width: 1200px) {
  .ServiceBox5 .ItemAds {
    width: 98px;
    margin: 0 1px;
  }

  .ServiceBox5 .ItemAds .ItemImage {
    width: 98px;
  }

  #nav li a {
    padding: 0px 18px 0px 18px;
  }

  .boxText {
    width: 100%;
    min-height: 100px;
    background: none;
  }

  #LinkShow {
    width: 100%;
    margin: 0;
    margin-top: 10px;
  }

  #LinkShow .Title,
  #LinkShow .ItemSub,
  #LinkShow .ItemSub a {
    text-align: right;
  }

  #LinkShow .Item {
    width: 250px;
    margin-right: 0px;
    padding: 0;
  }

  .CopyRightRight,
  .CopyRightLeft {
    text-align: center;
    width: 100%;
    float: right;
    margin-right: 0px;
  }

  .CopyRightLeft {
    padding-bottom: 20px;
  }

  .bgLogoFooter {
    margin-top: -25px;
  }

  .FooterText {
    width: 90%;
    padding: 0 5%;
    text-align: center;
  }

  .divAc {
    display: none;
    visibility: hidden;
  }

  .divAcB {
    display: block;
    visibility: visible;
  }

  .divAcB img {
    width: 100%;
    height: auto;
  }

  .navDiv {
    width: 100%;
  }

  .footerBox1,
  .footerBox2,
  .footerBox3,
  .footerBox4 {
    width: 100%;
    margin: 0px;
    border: none;
  }

  .footerBox3Center {
    float: none;
    width: 350px;
    margin: 0;
    padding: 0;
    display: inline-table;
  }

  .footerBox1Center {
    float: none;
    width: 408px;
    margin: 0;
    padding: 0;
    display: inline-table;
  }

  .CopyRight {
    width: 100%;
    padding: 0;
    margin-top: 20px;
  }
}

@media (max-width: 1000px) {

  /*---------------------------------menu-------------------------*/
  .ServiceBox3Main,
  .ServiceBox4Main {
    width: 100%;
  }

  #nav {
    display: none !important;
    visibility: hidden;
  }

  .wrapper-flush {
    display: block !important;
    visibility: visible;
  }

  .ArrowDown,
  .ArrowDown2 {
    display: none;
  }

  .ArrowDown,
  ArrowDown2,
  .ArrowDown3 {
    display: none;
  }

  .TextIndexText,
  .SlideIndexText {
    width: 92%;
  }

  .HeaderDownBox {
    width: 97.5%;
  }
}

@media (max-width: 980px) {
  .ServiceBox5 .ItemAds .ItemImage {
    opacity: 0;
  }

  .BoxIndex {
    width: 100%;
  }

  .BoxIndexR {
    margin-right: 0%;
  }

  .slideTuch {
    display: block;
    visibility: visible;
  }

  .SlidePicture {
    display: none;
    visibility: hidden;
  }

  .divLeft {
    margin-left: 60px;
  }

  .IndexTextSlide {
    width: 100%;
    margin: 0;
    margin-bottom: 20px;
  }

  .theme-pascal.slider-wrapper {
    display: inline-table !important;
    float: none !important;
  }
}

/***************************min-width: 1000px****************************/
@media (min-width: 1000px) {
  .wrapper-flush {
    display: none !important;
    visibility: hidden;
  }
}

/***************************max-width: 700px****************************/

/***************************max-width: 768px****************************/

@media (max-width: 900px) {
  .RepeaterIndex3Item h2 {
    width: 93%;
  }

  .leftBox {
    margin-left: 80px;
  }
}

@media (max-width: 768px) {

  .IndexTextRight,
  .IndexTextLeft {
    width: 98%;
    padding-left: 0;
    margin-right: 5px;
  }

  .topFooter {
    background: url(../Administrator/Files/Design/bgTopFooter.png) top left no-repeat;
  }

  .loginBox {
    float: right;
  }

  .contactUsFooter {
    margin: 0;
    text-align: center;
    position: relative;
    width: 100%;
  }

  .navFooterList {
    position: relative;
    right: 50%;
    margin-right: -110px;
  }

  .footerPicCenter {
    position: relative;
    left: 50%;
    margin-left: -120px;
  }

  .ContentMainRight,
  .ContentMainLeft {
    width: 100%;
    margin: 0;
  }

  /* ----Monasebat----*/
  .Monasebat .Title {
    width: 275px;
  }

  .Monasebat .Path {
    min-height: 150px;
    color: #333;
    width: 280px;
  }

  .ProductShow2 .ItemImage {
    margin-right: 0px;
  }

  /*----Box----*/
  .Box .BoxCenter img {
    width: 100%;
    height: auto;
  }

  .RepeaterIndex3Item .Image {
    height: 100px !important;
    width: 165px !important;
  }

  .TagImage {
    height: 16px !important;
    width: 16px !important;
  }

  .ProductShow1 .Left {
    width: 100%;
    min-height: 250px;
    float: right;
    margin: 0;
    padding: 0;
    margin-top: 10px;
    border-radius: 3px;
    position: relative;
  }

  .ProductShow1 .Left img {
    width: 100%;
    height: 250px !important;
    float: right;
    margin: 0;
    padding: 0;
    margin-top: 10px;
    border-radius: 3px;
  }

  .Box .BoxCenterB {
    margin-top: 20px;
  }

  .commentUserRight,
  .commentUserLeft {
    width: 100%;
    margin-top: 10px;
  }

  .FieldCaptcha {
    height: 30px !important;
    width: 75px !important;
  }

  .ServiceBox .ItemAds {
    width: 270px;
    height: 245px;
  }

  .ServiceBox .ItemAds .ItemImage {
    width: 270px;
    height: 245px;
  }
}

@media (max-width: 600px) {

  .TellTop,
  .EmailTop {
    display: none;
  }

  .TextBoxAutoCapmlet {
    float: none;
    display: inline-table;
    margin: 3px 0 0 0;
  }

  .Logo {
    float: none;
    display: inline-table;
  }
}

/***************************max-width: 480px****************************/

@media (max-width: 480px) {
  .RepeaterIndexItemIndex .ImageBox {
    display: inline-table;
    margin: 0;
    padding: 0;
    float: none;
  }

  .ServiceBox1 .ItemAds {
    width: 100%;
  }

  .ServiceBox1 .ItemAds .Title {
    text-align: center;
    margin: 0px;
    padding: 0px;
    float: right;
    width: 100%;
  }

  .ServiceBox1 .ItemAds .ImageBox {
    float: none;
    display: inline-table;
  }

  .RepeaterIndexItemIndex .Text,
  .RepeaterIndexItemIndex h3 {
    text-align: center;
  }

  .footerBox3Center {
    width: 270px;
  }

  .footerBox1Center {
    width: 270px;
  }

  .RepeaterIndexItemIndex {
    width: 96%;
    margin-right: 2%;
    height: auto !important;
  }

  .RepeaterIndexItemIndex h3,
  .RepeaterIndexItemIndex .Text {
    width: 94%;
    margin-right: 10px;
  }

  .Map {
    width: 275px;
    height: 291px;
    margin: 0px;
    overflow: hidden;
  }

  .FooterText {
    height: auto;
  }

  .FieldTextBoxForm {
    width: 85%;
    margin-right: 5px;
  }

  .FieldTextBoxNumberF {
    width: 60px;
  }

  .FieldButtonD {
    margin-right: 5px !important;
  }

  .CategoryProductIndex .Item {
    width: 272px;
  }

  .CategoryProductIndex .Item .ImageBox,
  .CategoryProductIndex .Item .Image {
    width: 240px;
    height: 240px;
  }

  .divLeft {
    float: right;
    width: 250px;
  }

  .LangBox {
    float: right;
    margin-right: 5px;
    margin-top: 15px;
  }

  .SearchBox {
    float: right;
    margin-right: 5px;
    margin-top: 29px;
  }

  .colorA a {
    color: #555;
    font-size: 12px;
  }

  .BoxCenterColor {
    margin-right: 30px;
  }

  .FieldTitle {
    float: right;
    width: 100px;
    text-align: right;
    margin-right: 20px;
    font-size: 9pt;
  }

  .FieldTitleB {
    width: 82px;
    overflow: hidden;
  }

  .searchDivBox {
    width: 270px;
  }

  .RepeaterIndex2Item {
    width: 127px;
    height: 130px;
  }

  /*
.RepeaterIndex2Item .ImageBox
{
	 width: 117px !important;
	height: 80px !important; 
}
.RepeaterIndex2Item .Image
{
	/* max-width: 117px !important;
}
*/
  /*	.CatProductShow .ItemAds
{
	float: right;
	text-align:center;
}
.CatProductShow .ItemImage
{
	float: right;
	width: 100% !important;
	height: 100% !important;
	background: #fff;
	padding: 3px;
	box-shadow: 1px 1px 2px 1px #d5d5d5;
}*/

  .ProductIndex .Item {
    float: right;
    margin-right: 8px;
    margin-left: 8px;
    position: relative;
    overflow: hidden;
  }

  .ProductLeft {
    float: right;
    width: 100%;
  }

  .ProductShow1 .Left1 {
    width: 280px;
    height: 345px;
  }

  /*----servicesBox----*/

  .ServiceBoxIn .ItemAds {
    width: 280px;
  }

  .IndexTextmain {
    width: 96% !important;
    padding-right: 2%;
    padding-left: 2%;
  }

  /*----FooterLink----*/
  .textLeftFooter,
  .textRightFooter {
    width: 280px;
  }

  /*----AdsHomePageGallery----*/
  .ProductShow1 .Left {
    width: 100%;
    min-height: 180px !important;
  }

  .ProductImageBox {
    width: 100%;
  }

  .RepeaterIndexItem {
    width: 260px;
  }

  .RepeaterIndexItem .linkMore {
    margin: 10px 110px 0 0;
    display: none;
  }

  .Box .BoxCenter .Back {
    width: 100%;
  }

  .leftBox {
    width: 100%;
    margin: 0;
    float: right;
  }
}

/* ==================== menu responsive ================ */

.wrapper-flush {
  width: 100%;
}

.has-dropdown .nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10000;
  background-color: #000;
}

.nav-container {
  position: fixed;
  top: 79px;
  /* 1 */
  left: 0;
  z-index: 999999999999999;
  overflow-y: hidden;
  overflow-x: hidden;
  visibility: hidden;
  /* 2 */
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  -webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
  transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  /* 2 */
  -webkit-overflow-scrolling: touch;
  /* 3 */
}

.nav-container.is-visible {
  visibility: visible;
  /* 1 */
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  /* 1 */
}

.nav-toggle {
  line-height: 1;
  display: inline-block;
  padding: 1.25rem 1.25rem;
  border: 0;
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 9999999999999999999999;
  cursor: pointer;
}

.nav-toggle .icon-menu {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 20px;
  vertical-align: middle;
  fill: none;
  cursor: pointer;
}

.icon-menu .line {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 4px;
  -webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
  -webkit-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  background-color: #004473;
}

.icon-menu .line-1 {
  top: 0;
}

.is-active .icon-menu .line-1 {
  -webkit-transform: translateY(8px) translateX(0) rotate(45deg);
  -ms-transform: translateY(8px) translateX(0) rotate(45deg);
  transform: translateY(8px) translateX(0) rotate(45deg);
}

.icon-menu .line-2 {
  top: 50%;
  margin-top: -2px;
}

.is-active .icon-menu .line-2 {
  opacity: 0;
}

.icon-menu .line-3 {
  bottom: 0;
}

.is-active .icon-menu .line-3 {
  -webkit-transform: translateY(-8px) translateX(0) rotate(-45deg);
  -ms-transform: translateY(-8px) translateX(0) rotate(-45deg);
  transform: translateY(-8px) translateX(0) rotate(-45deg);
}

.menu {
  list-style: none !important;
  margin: 0;
  padding: 0;
}

.nav-menu {
  background-color: #dedede;
  /* 1 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* 2 */
}

.nav-menu .menu-item {
  border-top: 1px solid #bbb;
  text-align: right;
}

.nav-menu>.menu-item:last-child {
  border-bottom: 1px solid #bbb;
}

.nav-menu>.menu-item:hover,
.nav-menu>.menu-item.is-active {
  background-color: transparent;
}

.nav-menu .menu-link {
  display: block;
  /* 1 */
  text-decoration: none;
  color: #444;
  padding: 0.75rem 1rem;
  width: 60%;
}

.has-dropdown {
  position: relative;
  cursor: pointer;
  /* 1 */
}

.has-dropdown>.menu-link {
  display: inline-block;
}

.has-dropdown:after {
  font-size: 38px;
  position: absolute;
  top: 10px;
  left: 1rem;
  bottom: 0;
  content: "+";
  /* 1 */
  color: #222;
}

.has-dropdown.is-active:after {
  content: "\2013";
  /* 1 */
}

.nav-dropdown {
  display: none;
  /* 1 */
}

.has-dropdown.is-active>.nav-dropdown {
  display: block;
  /* 1 */
}

.nav-dropdown .menu-item:hover {
  background-color: #e8e8e8;
}

.content {
  margin-top: 60px;
}

.content .wrapper {
  padding: 1rem 0;
}

@media (min-width: 1000px) {

  .nav,
  .nav-container,
  .nav-container.is-visible {
    position: static;
    top: 10px;
    left: 10px;
    z-index: auto;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  .nav-container,
  .nav-container.is-visible {
    visibility: visible;
    height: auto;
    min-height: 0;
    overflow-y: hidden;
  }

  .nav-toggle {
    display: none;
  }

  .nav-menu>.menu-item,
  .nav-menu>.menu-item.is-active {
    display: inline-block;
    /* 1 */
    background-color: transparent;
    border: 0;
  }

  .nav-menu>.menu-item:last-child {
    border: 0;
  }

  .nav-menu .menu-item {
    -webkit-transition:
      background-color 0.15s ease-in-out,
      color 0.15s ease-in-out;
    transition:
      background-color 0.15s ease-in-out,
      color 0.15s ease-in-out;
  }

  .has-dropdown:after {
    content: "" !important;
  }

  .nav-menu>.has-dropdown:after {
    position: absolute;
    top: 50%;
    right: 1rem;
    width: 0;
    height: 0;
    margin-top: -2px;
    margin-left: -4px;
    content: "";
    border-width: 5px 5px 0 5px;
    border-style: solid;
    border-color: #444 transparent transparent transparent;
  }

  .has-dropdown>.menu-link {
    padding-right: 2rem;
  }

  .nav-dropdown {
    display: block;
    opacity: 0;
    position: absolute;
    top: 100%;
    width: 200px;
    margin: 0;
    padding: 0.5rem 0;
    visibility: hidden;
    -webkit-transition:
      visibility 0s linear 0.25s,
      opacity 0.25s linear;
    transition:
      visibility 0s linear 0.25s,
      opacity 0.25s linear;
  }

  .has-dropdown:hover>.nav-dropdown {
    visibility: visible;
    opacity: 1;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
  }

  .nav-dropdown .menu-item {
    border: 0;
  }

  .nav-dropdown .menu-item:hover,
  .nav-dropdown .nav-dropdown .menu-item:hover {
    background-color: #d0d0d0;
  }

  .nav-dropdown .nav-dropdown {
    z-index: 9998;
    top: 0;
    left: 100%;
  }

  .content {
    margin-top: 0;
  }
}

/*=========================End Menu===========================*/

/* 
========================================================
ریسپانسیو کامل: موبایل، تبلت و دسکتاپ
- تنظیم عرض کانتینرها در سایزهای مختلف
- تنظیم رفتار منوی موبایل در موبایل و تبلت
========================================================
*/

/* ریسپانسیو موبایل و تبلت کوچک */
@media (max-width: 991px) {

  /* ساختار کلی */
  .sizeWidth {
    width: 100% !important;
    margin: 0 auto;
    padding: 0;
  }

  /* منوی موبایل */
  .nav-container {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: auto;

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    z-index: 99999;
    background-image: url(https://tavanpm.com/administrator/files/UploadFile/tavanpmbg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    backface-visibility: hidden;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    transform: scale(0);
    opacity: 0;
    filter: blur(8px);
    visibility: hidden;
    transition:
      transform 0.7s ease,
      opacity 0.7s ease,
      filter 0.7s ease;
  }

  .nav-container.is-visible {
    transform: scale(1);
    opacity: 1;
    filter: blur(0px);
    visibility: visible;
  }

  .nav-menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 79vh;
    padding-top: 15%;
    margin: 0;
    background: none !important;
  }

  .nav-menu .menu-item {
    text-align: center;
    border: none !important;
    margin: 10px 0;
  }

  .nav-menu .menu-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
    color: #ffffff;
    text-decoration: none;
    padding: 5px 0;
    line-height: 1;
    font-size: 16px;
    font-weight: bold;
    background: none !important;
    transition: all 0.3s ease;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }

  .nav-menu .menu-link:hover,
  .nav-menu .menu-link:focus,
  .nav-menu .menu-link:active {
    background: none !important;
    outline: none !important;
    box-shadow: none !important;
  }

  .nav-menu .menu-link::after {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    background: #67818a;
    left: 99%;
    bottom: -10px;
    transform: translateX(-99%);
    transition: width 0.5s ease;
    padding-bottom: 1px;
    /* فاصله بین متن و خط زیرش */
  }

  .nav-menu .menu-link:hover::after {
    width: 100%;
  }

  .nav-dropdown,
  .nav-dropdown .menu-item,
  .nav-dropdown .nav-dropdown,
  .nav-dropdown .nav-dropdown .menu-item {
    display: none !important;
  }

  .has-dropdown:after {
    display: none !important;
  }

  .has-dropdown {
    pointer-events: auto;
    position: relative;
  }
}

/* ریسپانسیو تبلت (از 481px تا 991px) */
@media (min-width: 481px) and (max-width: 991px) {
  .container {
    width: 95% !important;
    margin: 0 auto;
    padding: 0 15px;
  }
}

/* ریسپانسیو دسکتاپ های معمولی */
@media (min-width: 992px) {
  .container {
    width: 980px !important;
    margin: 0 auto;
  }
}

/* ریسپانسیو دسکتاپ‌های بزرگ */
@media (min-width: 1200px) {
  .container {
    width: 1200px !important;
    margin: 0 auto;
  }
}

@media (min-width: 992px) {

  /* مخفی کردن منوی موبایل و دکمه همبرگری در دسکتاپ */
  .nav-container,
  /* خود منوی موبایل */
  .hamburger-menu,
  /* دکمه همبرگری */
  .menu-toggle {
    /* اگر اسم دیگه‌ای هم داری */
    display: none !important;
  }
}

/* ####===== animate-min =====#### */
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

@-webkit-keyframes bounceIn {

  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {

  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {

  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInDown {

  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }

  to {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }

  to {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

/* ####===== custom-layer =====#### */
/* ============================================================
   tavanpm.com — لایه‌ی سفارشی یکپارچه و بهینه (custom-merged.css)
   نسخه: 2026-07-04  |  جایگزین ۹ فایل custom-*
   ترتیب بخش‌ها = دقیقاً ترتیب لود قبلی در index.aspx
   بهینه‌سازی‌های انجام‌شده (بدون هیچ تغییر بصری):
   1) ادغام دو بلوک :root
   2) حذف keyframe های تکراری (logoShineBig, imageShinePure)
   3) حذف اعلان‌های مرده که همین حالا هم توسط قانون بعدیِ
      همان سلکتور override می‌شدند
   ============================================================ */

/* --- متغیرهای ریشه (ادغام دو :root) --- */
:root {
  --gap: 15px;
  --sidebar-w: 275px;
  /* جمع ارتفاع هدر ثابت + بنر/تیتر بالای محصولات + فاصله‌ها */
  --top-offset: 260px;
  /* بعداً اگر لازم شد مقدارش را کم/زیاد کن */
  --brand: #1976d2;
  --brand-glass: rgba(33, 150, 243, 0.15);
  --card-radius: 12px;
  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  --table-head-bg: #f3f3f3;
  /* طوسی ستون اول */
  --table-border: #ddd;
  --text: #333;
}

/* ================== بخش: custom-style (فونت‌ها + اورراید عمومی) ================== */
/* نسخه‌ی بهینه: فقط WOFF2/WOFF + نمایش سریع متن */
@font-face {
  font-family: "IRANSans";
  src:
    url("/Administrator/Files/fonts/IRANSans.woff2") format("woff2"),
    url("/Administrator/Files/fonts/IRANSans.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: optional;
  /* یا optional برای حذف چشمک کامل */
}

@font-face {
  font-family: "IRANYekan";
  src:
    url("/Administrator/Files/fonts/IRANYekan.woff2") format("woff2"),
    url("/Administrator/Files/fonts/IRANYekan.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: "IRANYekan-ExtraBold";
  src:
    url("/Administrator/Files/fonts/IRANYekan-ExtraBold.woff2") format("woff2"),
    url("/Administrator/Files/fonts/IRANYekan-ExtraBold.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: optional;
}

/* 
  بخش پایه: تنظیمات کلی برای HTML و Body
  - حذف اسکرول افقی ناخواسته
  - اطمینان از ارتفاع کامل صفحه برای محتوای انعطاف‌پذیر
*/
html,
body {
  min-height: 100% !important;
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: #f0f0f0 !important;
  font-family: "IRANSans" !important;
}

/* 
  استایل‌دهی به باکس‌های ورودی جستجو
  - آیکون داخل فیلد با موقعیت absolute در سمت راست نمایش داده می‌شود
*/
.TextBoxBox {
  position: relative;
  padding-right: 35px !important;
}

.TextBoxBox .search-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  font-size: 15px;
  pointer-events: none;
}

/* 
  استایل‌دهی به فوتر در دسکتاپ (>= 600px)
  - سه ستون اصلی: اطلاعات تماس، دسترسی سریع، شبکه‌های اجتماعی
*/
@media (min-width: 600px) {
  #Footer>.container {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    max-width: 1299px !important;
    width: 90% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    gap: 0 !important;
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }

  #Footer .footerBox4 {
    order: 1 !important;
    flex: 0 0 60% !important;
    max-width: 60% !important;
  }

  #Footer .footerBox2 {
    order: 2 !important;
    flex: 0 0 30% !important;
    max-width: 30% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  #Footer .footerBox2 .FooterBoxBox {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  #Footer .bgLogo,
  #Footer .Sharing,
  #Footer .SharingLeft {
    all: unset !important;
    display: contents !important;
  }

  #Footer .Social {
    order: 3 !important;
    flex: 0 0 10% !important;
    max-width: 10% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 0 !important;
  }

  #Footer .Social .Item {
    margin: 0 !important;
  }

  #Footer .Social .Item img:hover {
    animation: spinOnce 0.6s ease-in-out;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.6));
  }

  #Footer,
  #Footer * {
    margin-bottom: 0 !important;
  }
}

/* افکت shine و underline متحرک برای لینک‌های دسترسی سریع */
#LinkShow .Title {
  padding-bottom: 10px;
}

#LinkShow .ItemSub a {
  position: relative;
  display: inline-block;
  color: white;
  text-decoration: none;
  padding-bottom: 7px;
  overflow: hidden;
  transition: color 0.4s ease-in-out;
}

#LinkShow .ItemSub a::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0.4),
      rgba(255, 255, 255, 0.1));
  transform: skewX(-20deg);
}

#LinkShow .ItemSub a:hover::before {
  animation: shine 0.8s forwards;
}

#LinkShow .ItemSub a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(to right, #ffcc00, #ff5500);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s ease-in-out;
}

#LinkShow .ItemSub a:hover::after {
  transform: scaleX(1);
}

@keyframes shine {
  100% {
    left: 125%;
  }
}

@keyframes spinOnce {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.FooterText {
  padding: 0 !important;
}

/* نسخه موبایل (<= 599px) */
@media (max-width: 599px) {

  #Footer,
  #Footer * {
    text-align: center !important;
    padding-top: 5px;
    height: 100% !important;
  }

  #Footer .footerBox4 {
    order: 1 !important;
  }

  #Footer .footerBox2 {
    order: 2 !important;
  }

  #Footer .Social {
    order: 3 !important;
  }

  #Footer .footerBox4,
  #Footer .footerBox2,
  #Footer .Social {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #Footer .Social {
    flex-direction: row !important;
    gap: 25px !important;
  }

  .FooterText {
    text-align: center !important;
    margin: 0 auto !important;
    direction: rtl !important;
  }

  #Footer .Social .Item img:hover {
    animation: spinOnce 0.6s ease-in-out;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.6));
  }
}

.content-block-header {
  position: relative;
  z-index: 10;
  padding: 3% 8%;
  text-align: center;
  background-color: #f0f0f0;
  /* اختیاری برای خوانایی */
  color: #222;
}

/* کانتینر لوگوها با شبکه‌ای از ستون‌های ثابت ۲۵۰px */
.brand-logos-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 250px);
  /* 4 ستون ثابت */
  grid-template-rows: repeat(3, 250px);
  /* 3 ردیف ثابت */
  gap: 20px;
  justify-content: center;
  padding: 2rem;
  background-color: #f0f0f0;
}

.brand-logo-box {
  width: 250px;
  height: 250px;
  position: relative;
  background: linear-gradient(145deg, #e0e0e0, #cccccc);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.05);
  z-index: 1;
}

.brand-logo-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.35s ease;
  filter: brightness(0.95) contrast(1.25);
}

.brand-logo-box:hover {
  transform: scale(0.8);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
}

.brand-logo-box::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 80%;
  height: 100%;
  background: linear-gradient(115deg,
      rgba(255, 255, 255, 0.75),
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0));
  transform: skewX(-25deg);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s ease;
  z-index: 2;
}

.brand-logo-box:hover::after {
  animation: logoShineBig 0.6s ease-out forwards;
  opacity: 1;
}

@keyframes logoShineBig {
  0% {
    left: -100%;
  }

  100% {
    left: 140%;
  }
}

/* موبایل (max-width: 600px) → دو ستون مربع با فاصله عمودی کمتر */
@media (max-width: 600px) {
  .brand-logos-wrapper {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* دو ستون امن */
    grid-template-rows: none;
    /* ریست ردیف‌های ثابت */
    column-gap: 10px;
    row-gap: 10px;
    padding: 0 12px 12px;
    /* پدینگ افقی امن */
    margin: 0 auto;
  }

  .brand-logo-box {
    box-sizing: border-box;
    /* عرض ۱۰۰٪ شامل بردر */
    width: 100%;
    aspect-ratio: 1 / 1;
    /* مربع */
    height: auto;
    overflow: hidden;
  }

  .brand-logo-box img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

/* ------------------------------------------------------------ */
/* 📌 مسیر راهنما با پیکان یکنواخت مرحله‌ای RTL با n مرحله      */
/* ✅ از راست به چپ، همه مراحل هم‌اندازه، فرم ثابت              */
/* ------------------------------------------------------------ */

.HeaderDownBoxRight {
  direction: rtl !important;
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1px;
  color: #0b3762 !important;
  font-size: 12px !important;
}

/* 🎯 قالب عمومی همه مراحل */
.HeaderDownBoxRight a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  max-width: 300px;
  height: 40px;
  padding: 0 20px;
  background: #dddddd;
  text-decoration: none;
  clip-path: polygon(100% 0, 95% 50%, 100% 100%, 5% 100%, 0 50%, 5% 0);
  transition:
    background 0.3s,
    color 0.3s;
  gap: 1px;
  z-index: 1;
}

/* 🟨 مرحله فعال (اولین در DOM) */
.HeaderDownBoxRight a:first-of-type {
  background: #dddddd;
  clip-path: polygon(5% 0, 100% 0%, 100% 100%, 5% 100%, 0% 50%);
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  gap: 1px;
  z-index: 3;
}

/* 🔚 مرحله آخر (سمت چپ) */
.HeaderDownBoxRight a:last-of-type {
  clip-path: polygon(0% 0%, 100% 0, 97.5% 50%, 100% 100%, 0% 100%) !important;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  gap: 1px;
  z-index: 2;
}

/* 🌀 مراحل میانی */
.HeaderDownBoxRight a:not(:first-of-type) {
  clip-path: polygon(100% 0, 95% 50%, 100% 100%, 5% 100%, 0 50%, 5% 0);
  gap: 1px;
  z-index: 2;
}

/* 🌟 هاور برای همه به جز فعال */
.HeaderDownBoxRight a:hover {
  background-color: gold;
  color: #4c4000;
}

/* ❌ حذف فلش قبلی */
.pathHeaderDown {
  display: none !important;
}

/* 🚫 غیرفعال کردن لینک صفحه جاری (بدون href) */
.HeaderDownBoxRight a:not([href]) {
  pointer-events: none;
  cursor: default;
  background: #ffc400;
}

/* 🚫 غیرفعال کردن آخرین مرحله (صفحه جاری از سمت راست بصری) */
.HeaderDownBoxRight a:last-of-type {
  pointer-events: none;
  cursor: default;
  background: #acacac;
  color: #fff;
  font-weight: bold;
}

/* 👇 بی رنگ کردن باکس مسیر */
.HeaderDownBox {
  background: #f6f6f6;
  border: 1px solid #f6f6f6;
}

/* 🎬 تعریف انیمیشن */
@keyframes unrollRightToLeft {
  0% {
    transform: scaleX(0);
    transform-origin: right center;
    opacity: 0;
  }

  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}

/* 🎨 اعمال انیمیشن به باکس */
.HeaderDownBoxRight {
  transform: scaleX(0);
  /* حالت اولیه جمع‌شده */
  transform-origin: right center;
  animation: unrollRightToLeft 1s ease-out forwards;
  opacity: 0;
}

/* 📱 ریسپانسیو: متن وسط‌چین و فونت کوچکتر */
@media (max-width: 600px) {
  .HeaderDownBox {
    display: none;
  }
}

/* 🚫 پنهان کردن مرحله‌های خالی (سفید اضافی) */
.HeaderDownBoxRight a:empty {
  display: none !important;
}

.HeaderDownBox .NewsIcon {
  display: none !important;
}

/* نمایش h1 فقط در داخل .BoxTop (بدون اعمال هیچ استایلی دیگر) */
.BoxTop h1 {
  all: revert !important;
}

/* 
چینش افقی دقیق داخل .BoxTop با تقسیم 70٪ برای h1 و 30٪ برای RatingStarBox.
*/
.BoxTop {
  padding-right: 10px !important;
  padding-left: 10px !important;
}

.BoxTop h1,
h2 {
  flex: 0 0 70% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-weight: 900 !important;
}

.BoxTop .RatingStarBox {
  flex: 0 0 30% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* فقط وقتی .RatingStarBox وجود نداره، h1 تمام عرض رو بگیره */
.BoxTop:not(:has(.RatingStarBox)) h1 {
  flex: 0 0 100% !important;
}

.BoxTop:has(h2) h1 {
  display: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "IRANYekan" !important;
}

h1 *,
h2 *,
h3 *,
h4 *,
h5 *,
h6 * {
  font-family: inherit !important;
}

/* ✅ حذف Row ارسال نظر فقط در صفحات content */
.ContentMainBoxBox1>.Row {
  display: none !important;
}

/* 
🎯 مخفی کردن لینک خاص با id ctl18_Repeater2_HyperLink1_0
---------------------------------------------------------
این کد لینک با id داده شده را کاملاً مخفی می‌کند حتی اگر سایر استایل‌ها اعمال شده باشند.
*/
#ctl18_Repeater2_HyperLink1_0 {
  display: none !important;
}

body,
html {
  background: white !important;
}

/* 
🎨 تنظیم نهایی ویژه tavanpm
----------------------------
1- container.colorA → تمام عرض صفحه
2- BoxCenter → همیشه 80% center block
*/

/* ✅ فقط container.colorA → full width */
.container.colorA {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.ContentMainBoxBox1 {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.box {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.container {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ✅ فقط BoxCenter → همیشه 80% center */
.BoxCenter {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  /* ✅ مرکز قرار گرفتن */
  box-sizing: border-box !important;
  float: none !important;
  /* ✅ جلوگیری از float: right قالب */
  display: block !important;
}

/* 
🎨 تغییر حرفه‌ای .BoxTop به عنوان تیتر صفحه:
---------------------------------------------
جایگزین کامل about-header با پس‌زمینه تصویری
*/

.BoxTop {
  background-image: url("https://tavanpm.com/administrator/files/UploadFile/tavanpmbg.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8% !important;
  border-bottom: none !important;
  margin-bottom: 3%;
}

/* 
🎨 استایل h1 و h2 داخل BoxTop:
-------------------------------
فونت Yekan + سایز بزرگ + رنگ سفید + سایه ملایم برای خوانایی بهتر
*/

.BoxTop h1,
.BoxTop h2 {
  font-family: "IRANYekan", sans-serif !important;
  font-size: 40px !important;
  font-weight: bold !important;
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  margin: 0 !important;
}

/* 
🎯 اصلاح رنگ لینک داخل h1 و لینک خاص محصولات
----------------------------------------------
✅ لینک‌های داخل h1 و لینک id=ctl13_HyperLink1 سفید می‌شوند
*/

.BoxTop h1 a,
#ctl13_HyperLink1 {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* 
🎨 رنگ سفید برای div های داخل BoxTop:
--------------------------------------
*/

.BoxTop div {
  color: #ffffff !important;
}

/* 
🎯 ظاهر شدن h1 وقتی h2 خالی است
------------------------------------------------------------------
*/
.BoxTop:has(h2) h1.force-show-h1 {
  display: block !important;
}

/* 
🎯 نسخه کامل نهایی tavanpm برای BoxTop در desktop + mobile
------------------------------------------------------------------
desktop: h1 راست + RatingStarBox چپ
mobile: زیر هم و center
*/

/* نسخه دسکتاپ و پیش‌فرض */
.BoxTop {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: 200px !important;
  box-sizing: border-box !important;
}

/* h1 و h2 - راست چین و وسط عمودی */
.BoxTop h1,
.BoxTop h2 {
  position: absolute !important;
  top: 50% !important;
  right: 10% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  font-family: IRANYekan, sans-serif !important;
  font-size: 30px !important;
  font-weight: bold !important;
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* RatingStarBox - چپ چین و وسط عمودی */
.BoxTop .RatingStarBox {
  position: absolute !important;
  top: 50% !important;
  left: 10% !important;
  transform: translateY(-50%) !important;
  min-width: 120px !important;
  text-align: left !important;
}

/* 🎯 نسخه mobile (max-width 768px) → زیر هم و center */
@media (max-width: 768px) {

  .BoxTop h1,
  .BoxTop h2,
  .BoxTop .RatingStarBox {
    position: static !important;
    transform: none !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 10px 0 !important;
    display: block !important;
  }

  .BoxTop {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    max-height: 200px !important;
    padding: 20px 10px !important;
  }
}

🎨 همترازی با عرض محتوای بالا --------------------------------------------------------------- */ ul.listResponsive {
  margin-top: 0px !important;
}

/***************************************************
 *  FAQ آکاردیونی – با کلاس products-faq
 *  قابل استفاده هم در product-content-inside
 *  هم در article-content-inside
 ***************************************************/

/* کانتینر FAQ */
.product-content-inside .products-faq,
.article-content-inside .articles-faq {
  margin-top: 2rem;
  border-top: 1px solid #e0e0e0;
  padding-top: 1.5rem;
}

/* تیتر اصلی FAQ */
.product-content-inside .products-faq h2,
.article-content-inside .articles-faq h2 {
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
  color: #333;
}

/* توضیح زیر تیتر FAQ */
.product-content-inside .products-faq>p,
.article-content-inside .articles-faq>p {
  margin-bottom: 1.5rem;
  color: #555;
  line-height: 1.8;
}

/* تیتر سوالات */
.product-content-inside .products-faq-question,
.article-content-inside .articles-faq-question {
  position: relative;
  margin: 0;
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: #222;
  border-radius: 4px;
  background-color: var(--brand-glass);
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.product-content-inside .products-faq-question:hover,
.article-content-inside .articles-faq-question:hover {
  background-color: var(--brand);
  color: #ffffff;
}

/* آیکون فلش کنار سوال */
.product-content-inside .products-faq-question::after,
.article-content-inside .articles-faq-question::after {
  content: "";
  position: absolute;
  right: 0.9rem;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid #999;
  border-bottom: 2px solid #999;
  transform: translateY(-50%) rotate(45deg);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease;
}

/* در حالت باز */
.product-content-inside .products-faq-question.products-faq-open,
.article-content-inside .articles-faq-question.articles-faq-open {
  background-color: #eef4ff;
  color: #1a3d7c;
}

.product-content-inside .products-faq-question.products-faq-open::after,
.article-content-inside .articles-faq-question.articles-faq-open::after {
  transform: translateY(-50%) rotate(225deg);
  border-color: #1a3d7c;
}

/* پاسخ سوال */
.product-content-inside .products-faq-answer,
.article-content-inside .articles-faq-answer {
  margin: 0;
  padding: 0 1rem;
  color: #444;
  line-height: 1.8;
  font-size: 0.95rem;
  transition:
    max-height 0.25s ease,
    padding-top 0.25s ease,
    padding-bottom 0.25s ease;
  max-height: 0;
  overflow: hidden;
}

/* وقتی سؤال باز است، padding را کمی اضافه می‌کنیم */
.product-content-inside .products-faq-question.products-faq-open+.products-faq-answer,
.article-content-inside .articles-faq-question.articles-faq-open+.articles-faq-answer {
  padding-top: 0.4rem;
  padding-bottom: 0.75rem;
}

/***************************************************
 *  Content Styling – Product & Article
 *  نسخه نهایی رنگ‌بندی + جدول تمیز
 ***************************************************/

/* متن عمومی داخل محتوا (محصول و مقاله) */
.product-content-inside,
.article-content-inside {
  color: #000;
  /* متن اصلی مشکی */
}

/* هدینگ‌ها (عنوان‌های آبی) */
.product-content-inside h2,
.product-content-inside h3,
.article-content-inside h2,
.article-content-inside h3 {
  color: #004b9b;
  /* آبی صنعتی */
}

/* متن لیست‌ها صورتی (UL و OL) */
.product-content-inside ul li,
.product-content-inside ol li,
.article-content-inside ul li,
.article-content-inside ol li {
  color: #d2007f;
  /* متن آیتم‌های لیست صورتی */
}

/* اگر بولت/عدد با ::before قبلی ساخته شده،
   فقط رنگش را صورتی کن (بدون تغییر شکل/اندازه) */
.product-content-inside ul li::before,
.product-content-inside ol li::before,
.article-content-inside ul li::before,
.article-content-inside ol li::before {
  color: #d2007f;
}

/* لینک‌ها: متن آبی + پس‌زمینه زرد */
.product-content-inside a,
.article-content-inside a {
  color: #004b9b;
  /* متن لینک آبی */
  background-color: #ffd600;
  /* بک‌گراند زرد */
}

/* بولد عمومی داخل متن سیاه پررنگ */
.product-content-inside strong,
.article-content-inside strong {
  color: #000;
}

/* بولد داخل لیست‌ها صورتی */
.product-content-inside li strong,
.article-content-inside li strong {
  color: #d2007f;
}

/***************************************************
 *  Table Styling – داخل محتوا (محصول و مقاله)
 ***************************************************/

.product-content-inside table,
.article-content-inside table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 1.2rem 0;
  font-size: 0.95em;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  /* حاشیه کلی جدول */
}

/* سلول‌ها */
.product-content-inside table th,
.product-content-inside table td,
.article-content-inside table th,
.article-content-inside table td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid #eee;
  border-left: 1px solid #f3f3f3;
  text-align: right;
}

/* حذف خط چپ از آخرین ستون برای تمیزی */
.product-content-inside table th:last-child,
.product-content-inside table td:last-child,
.article-content-inside table th:last-child,
.article-content-inside table td:last-child {
  border-left: none;
}

/* هدر جدول */
.product-content-inside table thead th,
.article-content-inside table thead th {
  background: #f5f8ff;
  /* آبی خیلی روشن */
  color: #004b9b;
  /* آبی صنعتی */
  font-weight: 600;
}

/* ردیف‌های زیبرا */
.product-content-inside table tbody tr:nth-child(even),
.article-content-inside table tbody tr:nth-child(even) {
  background-color: #fafafa;
}

/* هاور روی ردیف‌ها */
.product-content-inside table tbody tr:hover,
.article-content-inside table tbody tr:hover {
  background-color: #fff8e1;
  /* زرد خیلی ملایم، هماهنگ با لینک‌ها */
}

/* لینک داخل جدول – در جدول بک‌گراند زرد را برمی‌داریم تا خواناتر شود */
.product-content-inside table a,
.article-content-inside table a {
  color: #004b9b;
  background-color: transparent;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ================== بخش: custom-about (صفحه درباره ما) ================== */
/* 
🎨 تنظیم ساختار بخش‌های about-section:
---------------------------------------
چیدمان دو ستونی متن و تصویر به سبک نمونه + معکوس یکی در میان
*/

.about-section {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto 80px auto !important;
  /* بالا چسبیده، پایین 80px فاصله */
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 40px !important;
  box-sizing: border-box !important;
}

.about-section:nth-of-type(2n + 1) {
  flex-direction: row-reverse !important;
}

.about-section:nth-of-type(2n) {
  flex-direction: row !important;
}

/* 
🎯 اصلاح نهایی تصاویر بخش درباره ما طبق درخواست کاربر:
------------------------------------------------------
✅ تصاویر کاملاً ساده و صاف
✅ بدون border، بدون سایه، بدون radius
*/

.about-image img {
  width: 500px !important;
  max-width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* 
🎨 استایل متن‌های about-section:
--------------------------------
فونت IRANSans + متن Justify + سایز و فاصله استاندارد
*/

.about-text {
  flex: 1 !important;
  font-family: "IRANSans", sans-serif !important;
  font-size: 16px !important;
  line-height: 2 !important;
  color: #333 !important;
}

.about-text p {
  text-align: justify !important;
  margin: 0 !important;
}

/* 
🎨 تیترهای h2 داخل about-section:
----------------------------------
فونت Yekan + رنگ سازمانی + فاصله استاندارد
*/

.about-text h2 {
  font-family: "IRANYekan", sans-serif !important;
  font-size: 24px !important;
  font-weight: bold !important;
  color: #1e4686 !important;
  margin-bottom: 20px !important;
}

/* 🎨 فقط گوشه‌های گرد به about 3 */
.about3 .about-image img {
  border-top-right-radius: 25px !important;
  border-bottom-left-radius: 25px !important;
  border-top-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  overflow: hidden !important;
}

/* 🎨 فقط گوشه‌های گرد به about 2,1 */
.about2 .about-image,
.about1 .about-image img {
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-left-radius: 25px !important;
  border-bottom-right-radius: 25px !important;
  overflow: hidden !important;
}

/* 🎯 Hero تمام عرض واقعی صفحه برای about4 */
.about-section.about4 {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 auto !important;
}

.about-section.about4 .about-image {
  width: 100vw !important;
  height: 350px !important;
  overflow: hidden !important;
  position: relative !important;
  margin-right: calc(-50vw + 50%) !important;
}

.about-section.about4 .about-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.about-section.about4 .about-image h2 {
  font-family: "IRANYekan", sans-serif !important;
  font-size: 24px !important;
  font-weight: bold !important;
  color: #1e4686 !important;
  margin-bottom: 20px !important;
}

/* ✅ متن زیر about4 */
.about-section.about4 .about-text {
  font-family: "IRANSans", sans-serif !important;
  font-size: 16px !important;
  line-height: 2 !important;
  color: #333 !important;
  text-align: justify !important;
  padding: 3% 0 !important;
}

/* 
🎨 نسخه ویژه tavanpm: عکس کمی زوم در حالت عادی + zoom out هنگام hover
----------------------------------------------------------------------
✅ عکس همیشه کمی زوم است (حس عمق دارد)
✅ وقتی موس می‌رود روی عکس، عکس zoom out می‌شود و clarity کامل پیدا می‌کند
✅ فوق‌العاده حرفه‌ای و مینیمال برای سایت صنعتی
*/

.about-image {
  position: relative !important;
  overflow: hidden !important;
}

.about-image img {
  transform: scale(1) !important;
  /* زوم در حالت عادی */
  transition:
    transform 2s ease,
    filter 2s ease !important;
}

.about-image::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease !important;
  z-index: 2 !important;
}

.about-image:hover img {
  transform: scale(1.2) !important;
  /* بازگشت به اندازه اصلی */
  filter: brightness(1.05) !important;
  /* کمی روشن‌تر برای تاکید بیشتر */
}

.about-image:hover::after {
  opacity: 0 !important;
  /* حذف لایه مشکی در حالت hover */
}

/* 
🎯 نسخه نهایی موبایل فقط برای about-section
--------------------------------------------
✅ در موبایل (زیر 768px) about-section کاملاً ستونی می‌شود
✅ flex کاملاً غیرفعال می‌شود
*/

@media (max-width: 768px) {
  .about-section {
    display: block !important;
    width: 90% !important;
    max-width: 90% !important;
    margin: 0 auto 30px auto !important;
    padding: 0 10px !important;
  }

  .about-image img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  .about-text {
    text-align: justify !important;
    font-size: 14px !important;
    padding: 10px 0 !important;
  }
}

/* ================== بخش: custom-products (کارت دسته/محصول CMS) ================== */
/* ===============================
   پایه و متغیرها (ایمن برای کل سایت)
   =============================== */

/* احترام به کاهش حرکت کاربر */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ======================================
   1) کارت‌های دسته‌بندی (CatProductShow)
   اسکوپ‌شده و بدون !important اضافی
   ====================================== */
.CatProductShow .listResponsive {
  display: flex;
  justify-content: center;
  gap: 30px;
  direction: rtl;
  flex-direction: row;
  flex-wrap: wrap;
}

.CatProductShow .listResponsive li {
  list-style: none;
  width: 260px;
  height: 260px;
  position: relative;
  z-index: 1;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.CatProductShow .ItemAds {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  background: #fff;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.CatProductShow .ItemImage {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  position: absolute;
  inset: 0;
  z-index: 1;
  transition:
    transform 0.3s ease,
    filter 0.3s ease;
}

.CatProductShow .listResponsive li:hover .ItemAds {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
}

.CatProductShow .listResponsive li:hover .ItemImage {
  filter: brightness(0.8);
}

/* Overlay گرادینت تمیز برای خوانایی عنوان */
.CatProductShow .ItemAds::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 55%);
  z-index: 1;
}

.CatProductShow .ItemTitle {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  color: #fff;
  padding: 16px 12px;
  font-size: 10pt;
  font-weight: bold;
  text-align: right;
  z-index: 2;
  box-sizing: border-box;
}

.CatProductShow .ItemDesc {
  display: none;
}

/* موبایل: یک ستونه ساده، افکت‌ها خاموش */
@media (max-width: 768px) {
  .CatProductShow .listResponsive li {
    transform: none;
  }

  .CatProductShow .ItemAds,
  .CatProductShow .ItemImage {
    transition: none;
  }
}

/* =================================
   2) کارت‌های محصول (ProductShow)
   ================================= */
.ProductShow {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: flex-start;
  padding: 20px;
}

.ProductShow .ItemAds {
  width: 220px;
  height: 300px;
  border: 0.3px solid #ccc;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  transition:
    transform 0.3s,
    box-shadow 0.3s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px;
}

.ProductShow .ItemAds:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  background: #fff;
}

.ProductShow .ItemImage {
  width: 100%;
  aspect-ratio: 1/1;
  /* بدون اعوجاج */
  object-fit: cover;
  border-top-right-radius: 12px;
  border-top-left-radius: 12px;
  border-bottom: 1px solid #ccc;
}

.ProductShow .ItemTitle {
  padding: 0 10px;
  text-align: center;
  font-size: 9pt;
  font-weight: bold;
  color: var(--text);
  width: 100%;
  box-sizing: border-box;
}

/* حذف بخش‌های اضافی */
.ProductShow .ItemDesc,
.ProductShow .ItemAdsGallery,
.ProductShow .ItemAdsGallery2,
.ProductShow .ItemAds h4 {
  display: none;
}

/* موبایلِ ProductShow */
@media (max-width: 768px) {
  .ProductShow {
    justify-content: space-between;
  }

  .ProductShow .ItemAds {
    width: 220px;
    height: 300px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: none;
    transform: none;
    transition: none;
  }
}

/* ============================
   3) NavBox (منوی تب چسبیده)
   ============================ */
.NavBox {
  position: fixed;
  bottom: 30px;
  right: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  padding: 8px;
  background: var(--brand-glass);
  backdrop-filter: blur(6px);
  border-left: 4px solid var(--brand);
  border-radius: 0;
  box-shadow: -4px 8px 20px rgba(0, 0, 0, 0.1);
}

.OrderRepairStep {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-end;
}

.OrderRepairStep .Item {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  background: rgba(255, 255, 255, 0.75);
  padding: 5px;
  font-size: 11px;
  font-family: IRANSans, sans-serif;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #263238;
  cursor: pointer;
  transition: all 0.3s ease;
  height: 90px;
  width: 30px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.OrderRepairStep .Item.Active {
  background: #fbc02d;
  color: #212121;
  font-weight: bold;
  border: none;
}

.OrderRepairStep .Item:hover {
  background: #ffe082;
  color: #000;
}

/* مخفی در موبایل و تبلت کوچک */
@media (max-width: 1024px) {
  .NavBox {
    display: none;
  }
}

/* ============================
   4) باکس تب و تصویر محصول
   ============================ */
.TabShow {
  float: right;
  width: 100%;
  background: #fff;
  border: 1px solid #ddd;
  padding: 5%;
  margin-bottom: 20px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  color: var(--text);
  font-family: IRANSans, sans-serif;
  box-sizing: border-box;
  overflow: hidden;
}

.TabShowTop {
  width: 100%;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  background: var(--brand-glass);
  backdrop-filter: blur(6px);
  border-bottom: 4px solid var(--brand);
  color: #222;
  padding: 14px 0;
  margin-bottom: 1px;
  border-top-right-radius: 12px;
  border-top-left-radius: 12px;
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.05);
}

.ProductLeft {
  padding: 0 0 0 50px;
}

.ProductLeft::after {
  content: "";
  display: table;
  clear: both;
}

.ProductLeft .ProductImageBox {
  float: left;
  width: 300px;
  height: 300px;
  border: 1px solid gray;
  border-radius: 10px;
  overflow: hidden;
  margin: 0;
}

.ProductLeft .ProductImage {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.HeightPic {
  float: right;
  margin: 10px;
  min-height: 275px;
  width: 275px;
  text-align: center;
}

@media (max-width: 768px) {
  .TabShow {
    padding: 5%;
  }

  .TabShow table {
    width: 95%;
  }

  .ProductLeft .ProductImageBox {
    float: none;
    width: 100%;
    margin: 0 auto 20px;
  }

  .TabShow .Left {
    float: none;
    width: 100%;
    margin: 0;
  }

  .TabShowTop {
    font-size: 16px;
  }
}

/* =========================================
   5) جدول‌ها – فقط در محدوده تب محصول (RTL)
   *** مهم: استایل سراسری table حذف/اسکوپ شد ***
   ========================================= */
.TabShow table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-family: IRANSans, sans-serif;
  font-size: 12px;
  direction: rtl;
  /* جهت درست برای فارسی */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
}

.TabShow table th,
.TabShow table td {
  border: 1px solid var(--table-border);
  padding: 12px 16px;
  text-align: right;
  /* راست‌چین */
  vertical-align: top;
  background: #fff;
  /* پیش‌فرض سفید برای همه ستون‌ها */
}

/* ✅ فقط ستون اول پس‌زمینه طوسی داشته باشد */
.TabShow table tr>*:first-child {
  background: var(--table-head-bg);
  font-weight: bold;
  color: var(--text);
  width: 40%;
}

/* راه‌راه ملایم – فقط روی سلول‌های غیرِستونِ اول */
.TabShow table tr:nth-child(even)>*:not(:first-child) {
  background: #f9f9f9;
}

.TabShow table tr:nth-child(odd)>*:not(:first-child) {
  background: #ffffff;
}

/* هاور ردیف – همه‌ی سلول‌ها ولی رنگ ستون اول ثابت می‌ماند */
.TabShow table tr:hover>*:not(:first-child) {
  background: #fffde7;
  transition: background-color 0.3s ease;
}

/* اگر جدولی واقعاً LTR نیاز بود، کلاس جدا بده */
.TableLTR {
  direction: ltr;
}

.TableLTR th,
.TableLTR td {
  text-align: left;
}

.TabShow table td.eng-col {
  direction: ltr;
  /* متن از چپ به راست */
  text-align: left;
  /* ترازبندی به چپ */
  font-family: Arial, sans-serif;
  /* فونت مناسب انگلیسی */
}

/* =========================================
   6) نسخه موبایل برای CatProductShow و ProductShow
   (جمع‌بندی—همگن با بالایی‌ها)
   ========================================= */
@media (max-width: 768px) {
  .CatProductShow .ItemTitle {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    font-size: 8pt;
    padding: 16px;
    color: #fff;
    text-align: center;
    background: none;
    z-index: 2;
    box-sizing: border-box;
  }
}

/* ================== بخش: custom-brands (لیست برندها) ================== */
/* بخش لیست برندهای اصلی */
.brand-list-page {
  padding: 60px 20px;
  text-align: center;
  direction: rtl;
}

.brand-list-title {
  font-family: IRANYekan, sans-serif;
  font-size: 28px;
  color: #1a1a1a;
  padding: 50px;
}

/* گرید سه‌ستونه ریسپانسیو */
.brand-list-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  max-width: 100%;
  margin: 0 auto;
}

/* استایل برند با افکت درخشندگی */
.brand-item {
  background: #fff;
  border-radius: 24px;
  border: 1px solid #ccc;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  padding: 20px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

/* درخشش هنگام هاور */
.brand-item::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(120deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent);
  transform: rotate(25deg);
  transition: all 0.6s ease;
  pointer-events: none;
}

.brand-item:hover::before {
  top: 100%;
  left: 100%;
}

.brand-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
}

.brand-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  z-index: 1;
}

/* افکت شاین قوی‌تر، درخشان‌تر، و واضح‌تر */
.brand-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 80%;
  height: 100%;
  background: linear-gradient(115deg,
      rgba(255, 255, 255, 0.75),
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0));
  transform: skewX(-25deg);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.1s ease;
}

.brand-item:hover::after {
  animation: logoShineBig 0.6s ease-out forwards;
  opacity: 1;
}

/* انیمیشن برق پرسرعت با عرض زیاد */

.brand-list-description {
  font-family: IRANSans, sans-serif;
  font-size: 15px;
  color: #444;
  margin: 20px auto 40px;
  max-width: 98%;
  line-height: 1.9;
  text-align: justify;
}

/* واکنش‌گرا برای موبایل */
@media (max-width: 768px) {
  .brand-list-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .brand-item {
    height: 120px;
    padding: 16px;
  }

  .brand-list-title {
    font-size: 22px;
  }
}

@media (max-width: 480px) {
  .brand-list-grid {
    grid-template-columns: 1fr;
  }
}

/* ================== بخش: custom-brands-products (صفحه برند) ================== */
/* ====================== برندباکس – بازنویسی تمیز و دقیق (بدون اضافات) ====================== */

/* معرفی برند (بالای صفحه) */
.brandbox-intro {
  direction: rtl;
  display: grid;
  grid-template-columns: 275px 1fr;
  gap: 35px;
  align-items: center;
  height: 275px;
  margin-bottom: 24px;
  padding: 25px 1px;
  background: #fff;
  border-bottom: 1px solid #eee;
  box-sizing: border-box;
}

.brandbox-intro img {
  min-height: 250px;
  max-height: 250px;
  padding: 0 15px;
  object-fit: contain;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.brandbox-intro-p {
  position: relative;
  min-height: 250px;
  max-height: 250px;
  border: 1px solid #eee;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  background: #fff;
  overflow: hidden;
  container-type: inline-size;
  -webkit-mask-image: linear-gradient(to bottom,
      rgba(0, 0, 0, 1) 80%,
      rgba(0, 0, 0, 0));
  mask-image: linear-gradient(to bottom,
      rgba(0, 0, 0, 1) 80%,
      rgba(0, 0, 0, 0));
}

.brandbox-intro p {
  margin: 0;
  padding: 30px;
  background: #fff;
  text-align: justify;
  font-size: clamp(10px, 2.2cqi, 10.5px);
  line-height: 1.9;
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}

.brandbox-intro p::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.brandbox-intro-p:hover p {
  scrollbar-width: thin;
}

.brandbox-intro-p:hover p::-webkit-scrollbar {
  width: 6px;
}

.brandbox-intro-p:hover p::-webkit-scrollbar-thumb {
  background: #d6d6d6;
  border-radius: 6px;
}

/* تبلت */
@media (max-width: 992px) {
  .brandbox-intro {
    grid-template-columns: 240px 1fr;
    gap: 35px;
    height: 250px;
  }

  .brandbox-intro img {
    min-height: 230px;
    max-height: 230px;
  }

  .brandbox-intro-p {
    min-height: 230px;
    max-height: 230px;
  }

  .brandbox-intro p {
    padding: 22px 26px;
    font-size: clamp(10px, 2.4cqi, 10.8px);
    line-height: 1.85;
  }
}

/* موبایل: مخفی */
@media (max-width: 768px) {

  .brandbox-intro,
  .brandbox-intro img,
  .brandbox-intro-p,
  .brandbox-intro p {
    display: none;
  }
}

/* لی‌آوت بخش محصولات */
.brandbox-filter-layout {
  direction: rtl;
  font-family: IRANSans, sans-serif;
}

.brandbox-section-title {
  margin: 10px 0 0;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

.brandbox-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  direction: rtl;
  margin-top: 14px;
}

/* درخت دسته‌بندی (دسکتاپ) */
#brandbox-category-tree {
  width: 250px;
  min-width: 250px;
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  padding: 0 15px 15px;
  direction: rtl;
}

.brandbox-category-header {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 15px;
  margin: 15px 0;
  font-size: 12px;
  background: #f5f7fa;
  color: #333;
  transition: all 0.2s ease;
  position: relative;
}

.brandbox-category-header:hover {
  background: #edf0f5;
  color: #0422a5;
}

.brandbox-category-header::before {
  content: "☰";
  font-size: 12px;
}

.brandbox-category-sublist {
  position: relative;
  margin: 0 0 6px;
  padding-right: 12px;
}

.brandbox-category-sublist::before {
  content: "";
  position: absolute;
  top: 0;
  right: 15px;
  width: 2px;
  height: 100%;
  background: #f0f0f0;
}

.brandbox-category-subitem {
  cursor: pointer;
  display: block;
  margin: 4px 0;
  padding: 10px 22px 6px;
  color: #444;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.brandbox-category-subitem:hover {
  background: #eef1f5;
  color: #0422a5;
}

.brandbox-category-header.active,
.brandbox-category-subitem.active {
  background: #1e3a8a;
  color: #fff !important;
}

.brandbox-category-header.active::before,
.brandbox-category-subitem.active::before {
  content: "✅";
}

#brandbox-category-tree {
  font-size: 0;
}

#brandbox-category-tree .brandbox-category-header,
#brandbox-category-tree .brandbox-category-subitem {
  font-size: 12px;
}

/* باکس جستجوی موبایل/تبلت */
.brandbox-mobile-search {
  display: none;
  margin: 14px 0 0;
}

.brandbox-mobile-search input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid #dcdcdc;
  border-radius: 10px;
  font-size: 13px;
  outline: none;
}

.brandbox-mobile-search input:focus {
  border-color: #1e3a8a;
  box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.12);
}

/* لیست محصولات */
#brandbox-product-list {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 24px;
}

/* کارت محصول – رفع ارتفاع بی‌دلیل + نمایش برند/دسته در همه سایزها */
.brandbox-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 18px 18px 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  text-decoration: none;
  transition:
    box-shadow 0.3s ease,
    filter 0.3s ease;
}

.brandbox-product-card:hover {
  box-shadow: 0 22px 22px rgba(0, 0, 0, 0.2);
  filter: brightness(1.04);
}

.brandbox-product-card::after {
  content: "";
  position: absolute;
  top: 18px;
  left: -100%;
  width: 80%;
  height: 200px;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.75),
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0));
  transform: skewX(-25deg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease;
}

.brandbox-product-card:hover::after {
  animation: imageShinePure 0.6s ease-out forwards;
  opacity: 1;
}

@keyframes imageShinePure {
  0% {
    left: -100%;
  }

  100% {
    left: 140%;
  }
}

.brandbox-product-card img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-bottom: 1px solid #ddd;
}

.brandbox-product-card h4 {
  margin: 12px 0 6px;
  font-size: 12px;
  line-height: 1.7;
  color: #333;
  text-align: center;
}

.brandbox-product-card .brandbox-meta {
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 1.6;
  color: #666;
  text-align: center;
}

.brandbox-product-card .brandbox-meta.brand {
  font-weight: 600;
}

.brandbox-product-card .brandbox-meta.categories {
  opacity: 0.9;
}

/* رسپانسیو محصولات */
@media (max-width: 1024px) {
  .brandbox-mobile-search {
    display: block;
  }

  #brandbox-category-tree {
    display: none;
  }
}

@media (max-width: 768px) {
  #brandbox-product-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .brandbox-product-card {
    padding: 14px 14px 16px;
  }

  .brandbox-product-card img {
    height: 200px;
  }
}

@media (max-width: 480px) {
  #brandbox-product-list {
    grid-template-columns: 1fr;
  }

  .brandbox-product-card img {
    height: 180px;
  }
}

/* نمایش مطمئن placeholder برای ورودی جستجو */
#brandbox-search-input::placeholder {
  color: #9aa0a6;
  opacity: 1;
}

#brandbox-search-input::-webkit-input-placeholder {
  color: #9aa0a6;
  opacity: 1;
}

/* Chrome/Safari قدیمی */
#brandbox-search-input:-ms-input-placeholder {
  color: #9aa0a6;
}

/* IE */

/* ================== بخش: custom-product (صفحه فیلتر محصولات) ================== */
/* ========= لایه‌بندی کم‌تغییر و مطمئن ========= */

.product-filter-layout {
  display: flex;
  flex-direction: row;
  /* RTL */
  flex-wrap: wrap;
  /* ردیف‌های جدا */
  gap: var(--gap);
  padding: 1px;
  font-family: IRANSans, sans-serif;
  direction: rtl;
  box-sizing: border-box;
}

/* فرزندان product-content را مستقیم در فلکس والد قرار می‌دهد */
.product-content {
  display: contents;
}

/* ردیف ۱ و ۲ تمام عرض */
.product-search {
  order: 1;
  flex: 0 0 100%;
}

#brand-filter {
  order: 2;
  flex: 0 0 100%;
}

/* «تعداد نتایج» */
.result-count {
  order: 3;
  flex: 0 0 100%;
  padding-right: 10px;
}

/* ردیف ۳: راست سایدبار، چپ لیست محصولات */
#category-sidebar {
  order: 4;
  flex: 0 0 var(--sidebar-w);
  max-width: var(--sidebar-w);
}

#product-list {
  order: 5;
  flex: 1 1 calc(95% - var(--sidebar-w) - var(--gap));
  min-width: 0;
  /* اسکرول‌بار سمت راست */
}

/* سایدبار */
#category-sidebar {
  background: #ffffff;
  border: 1px solid #ddd;
  padding: 10px;
  height: 100%;
  overflow-y: visible;
  box-sizing: border-box;
}

#category-sidebar ul {
  padding-inline-start: 1px;
}

/* ======== درخت دسته‌بندی ======== */
.tree-item {
  margin: 5px 0;
  position: relative;
  font-size: 0;
}

.tree-item.has-children>.category-header::after {
  content: "☰";
  font-size: 9px;
  color: #666;
  margin-left: 5px;
}

.category-header {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 8px;
  padding: 10px;
  font-size: 10px;
  background: #f5f7fa;
  color: #333;
  font-weight: 300;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease;
  border-right: 3px solid transparent;
}

.category-header input[type="checkbox"] {
  margin-right: auto;
  cursor: pointer;
}

.category-header:hover {
  background: #e7edf7;
  color: #1e3a8a;
}

.category-header.active {
  background: #f5f7fa !important;
  color: #fff !important;
}

/* سطح‌ها */
.tree-item>.category-header.main-category {
  background: #0422a5;
  color: #fff;
  margin: 10px 12px;
}

.tree-item>ul {
  display: none;
  padding-right: 8px;
  margin-top: 4px;
  margin-right: 18px;
  border-right: 2px solid #f0f0f0;
}

.tree-item>ul.open {
  display: block;
}

.tree-item .tree-item .category-header {
  background-color: #edf2fa !important;
}

.tree-item .tree-item .category-header:hover {
  background-color: #e9eaed !important;
}

.tree-item>ul>.tree-item>ul {
  padding-right: 16px;
  border-right: 2px solid #f0f0f0;
}

.tree-item>ul>.tree-item>ul>.tree-item>.category-header {
  background: #f9fbfd;
  font-size: 12px;
}

.tree-item .category-header:hover {
  background: #e9eaed;
  color: #1e3a8a;
}

.tree-item .category-header.active {
  background: #1e3a8a !important;
  color: #fff;
}

/* ======== جستجو و فیلتر برند ======== */
.product-search {
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid #ccc;
  width: 100%;
  box-sizing: border-box;
}

#brand-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
}

/* دکمه‌های برند */
.brand-btn {
  width: 75px;
  height: 75px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 2px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.brand-btn:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.brand-btn.active {
  border: 2px solid #ddd;
  box-shadow: 0 0 10px #ccc;
  transform: translateY(-2px);
}

.brand-btn img.brand-icon {
  width: 100%;
  height: 100px;
  object-fit: contain;
  margin-bottom: 1px;
}

/* متن روی دکمه برندها حذف کامل */
.brand-btn span {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* دکمه حذف برندها */
.brand-btn.clear {
  align-items: center;
  justify-content: center;
  background-color: #fff;
  color: #b30000;
  font-size: 10px;
  font-weight: bold;
  height: 75px;
  padding: 8px;
  min-width: 75px;
}

/* شمارش نتایج */
.result-count {
  font-size: 13px;
  color: #666;
}

/* ======== لیست محصولات ======== */
#product-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 15px;
  direction: rtl;
  /* اولین کارت میاد ستون راست */
  /* (اختیاری) کمی پایدارتر: */
  grid-auto-flow: row dense;
  justify-items: stretch;
  /* اسکرول‌بار سمت راست */
}

/* کارت محصول */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  /* محتوا از بالا شروع شود */
  text-decoration: none;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  padding: 10px;
  height: 375px;
  box-sizing: border-box;
  overflow: hidden;
  transition:
    box-shadow 0.3s ease,
    filter 0.3s ease;
  z-index: 0;
}

/* عکس محصول – اندازه ثابت 250×250 و وسط افقی */
.product-card img {
  width: 250px;
  height: 250px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  flex-shrink: 0;
}

.product-card:hover {
  box-shadow: 0 22px 22px rgba(0, 0, 0, 0.2);
  filter: brightness(1.04);
}

/* افکت برق (مورب ↘) */
.product-card::after {
  content: "";
  position: absolute;
  top: 24px;
  left: -100%;
  width: 80%;
  height: 200px;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.75),
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0));
  transform: skewX(-25deg);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.1s ease;
}

.product-card:hover::after {
  animation: imageShinePure 0.6s ease-out forwards;
  opacity: 1;
}

/* ─────────── متن‌های کارت: عنوان، برند، دسته‌بندی (با .card-content) ─────────── */

/* لینک داخل کارت: بلاک عادی تا متن‌ها طبیعی زیر هم بیایند */
.product-card>a {
  display: block;
  text-decoration: none;
  color: inherit;
  width: 100%;
}

/* ظرف متن‌ها: همیشه روی افکت کارت دیده شود */
.product-card .card-content {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  /* فاصله بین عنوان/برند/دسته‌بندی */
  padding-top: 8px;
  direction: rtl;
}

/* عنوان محصول (دو خط) */
.product-card .card-content h2 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  color: #111;
  text-align: center;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* حداکثر دو خط */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card:hover .card-content h2 {
  color: #0422a5;
}

/* برند */
.product-card .card-content .brand {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #4b5563;
  /* خاکستری تیره */
  text-align: center;
}

/* دسته‌بندی (با پایپ و کوتاه‌سازی) */
.product-card .card-content .categories {
  margin: 0;
  font-size: 11px;
  color: #6b7280;
  /* خاکستری ملایم */
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ========= ریسپانسیو ========= */
@media (max-width: 1024px) {
  .product-filter-layout {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 12px;
    padding: 12px;
  }

  .product-search {
    flex: 0 0 100%;
  }

  #brand-filter {
    order: 2;
    flex: 0 0 100%;
  }

  #category-sidebar {
    order: 3;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .result-count {
    flex: 0 0 100%;
  }

  #product-list {
    flex: 0 0 100%;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
  }

  .product-card {
    height: auto;
    padding: 12px;
  }

  .product-card img {
    width: 180px;
    height: 180px;
  }

  /* تایپوگرافی متن‌های کارت در تبلت */
  .product-card .card-content h2 {
    font-size: 12px;
  }

  .product-card .card-content .brand {
    font-size: 12px;
  }

  .product-card .card-content .categories {
    font-size: 11px;
  }
}

@media (max-width: 600px) {
  .product-search {
    font-size: 13px;
    padding: 7px 10px;
  }

  .brand-btn {
    width: 100px;
    height: 100px;
  }

  .brand-btn img.brand-icon {
    height: 60px;
  }

  #product-list {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
  }

  .product-card {
    padding: 10px;
  }

  .product-card img {
    width: 180px;
    height: 180px;
  }

  /* تایپوگرافی متن‌های کارت در موبایل */
  .product-card .card-content h2 {
    font-size: 11.5px;
  }

  .product-card .card-content .brand {
    font-size: 11.5px;
  }

  .product-card .card-content .categories {
    font-size: 10.5px;
  }
}

@media (min-width: 1025px) {
  #product-list {
    /* اسکرول داخلی فقط در دسکتاپ */
    max-height: calc(100vh - var(--top-offset));
    overflow-y: auto;
    min-height: 0;
    /* ضروری برای آیتم فلکس */
  }
}

@media (max-width: 1024px) {

  /* فقط سرچ و نتیجه بماند */
  #brand-filter,
  #category-sidebar {
    display: none !important;
  }

  /* ترتیب مطلوب: سرچ (۱) → نتیجه (۲) → لیست (۳) */
  .product-search {
    order: 1;
  }

  .result-count {
    order: 2;
  }

  #product-list {
    order: 3;
  }
}

/* ========= Mobile Wizard Add-on (≤600px) ========= */
@media (max-width: 600px) {
  .Box .BoxCenter {
    padding: 1% !important;
  }

  /* برندها در موبایل حذف */
  #brand-filter {
    display: none !important;
  }

  /* ترتیب */
  .product-search {
    order: 1 !important;
  }

  #category-sidebar {
    order: 2 !important;
    display: block !important;
  }

  .result-count {
    order: 3 !important;
  }

  #product-list {
    order: 4 !important;
  }

  /* درخت اصلی مخفی */
  #category-sidebar>ul {
    display: none !important;
  }

  /* نوار بالای موبایل */
  #category-sidebar .mobile-catbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 10px 0;
  }

  #category-sidebar .mobile-catbar .mobile-title {
    font-size: 12px;
    font-weight: 700;
    color: #111;
  }

  #category-sidebar .mobile-catbar .mobile-back {
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #0422a5;
  }

  #category-sidebar .mobile-catbar .mobile-back[aria-disabled="true"] {
    opacity: 0.45;
    cursor: default;
  }

  /* حاشیه کمتر */
  #category-sidebar {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  /* گرید هوشمند */
  #category-sidebar .mobile-catgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 6px;
    align-items: stretch;
  }

  /* باکس‌ها */
  #category-sidebar .mobile-cattile {
    position: relative;
    display: block;
    padding: 0;
    border-radius: 14px;
    border: 1px solid #dbe3f1;
    background: #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
    overflow: hidden;

    aspect-ratio: 1 / 1;
    min-height: 110px;

    cursor: pointer;
    user-select: none;

    min-width: 0;
    box-sizing: border-box;
  }

  /* تصویر */
  #category-sidebar .mobile-cattile .mobile-catimg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0;
  }

  /* ===== نوار نوشته شیشه‌ای بسیار شفاف ===== */
  #category-sidebar .mobile-cattile>div {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 44px;
    padding: 6px 8px;
    border-radius: 0 !important;

    background: rgba(0, 0, 0, 0.16);
    /* شیشه‌ای روشن */
    backdrop-filter: blur(6px) saturate(160%);
    -webkit-backdrop-filter: blur(6px) saturate(160%);

    border-top: 1px solid rgba(255, 255, 255, 0.22);

    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.15;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    box-sizing: border-box;
    overflow: hidden;
  }

  /* شمارش */
  #category-sidebar .mobile-cattile .count {
    display: block;
    margin-top: 3px;
    font-size: 8px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
  }

  /* Active */
  #category-sidebar .mobile-cattile.active {
    border-color: rgba(4, 34, 165, 0.55);
    box-shadow: 0 14px 28px rgba(4, 34, 165, 0.2);
    transform: translateY(-1px);
  }

  #category-sidebar .mobile-cattile.active>div {
    background: rgba(0, 0, 0, 0.22);
  }

  /* قفل محصولات */
  .mobile-products-locked #product-list {
    display: none !important;
  }

  .mobile-products-locked .mobile-hint {
    display: block;
    margin: 10px 0 0;
    padding: 10px 12px;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    font-size: 12px;
    color: #334155;
  }

  /* موبایل خیلی باریک */
  @media (max-width: 380px) {
    #category-sidebar .mobile-catgrid {
      grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
      gap: 5px;
    }

    #category-sidebar .mobile-cattile>div {
      height: 42px;
      font-size: 8.5px;
    }

    #category-sidebar .mobile-cattile .count {
      font-size: 7.5px;
    }
  }
}

/* ================== بخش: custom-services (خدمات) ================== */
/* 
🎯 تنظیم پایه برای محدودکننده عرض سکشن‌ها
-------------------------------------------
در دسکتاپ، 80٪ عرض و وسط‌چین
در موبایل، تمام عرض با padding مناسب
*/
.section-container {
  width: 100%;
  box-sizing: border-box;
}

.section-container h2 {
  font-family: "IRANYekan", sans-serif !important;
  font-size: 24px !important;
  font-weight: bold !important;
  color: #1e4686 !important;
}

.section-container p {
  font-family: "IRANSans", sans-serif !important;
  font-size: 16px !important;
  line-height: 2 !important;
  color: #333 !important;
}

/* ⬜ پس‌زمینه‌ها و فاصله سکشن‌ها */
.section-white {
  background-color: #ffffff;
  box-sizing: border-box;
}

.section-gray {
  background-color: #f3f3f3;
  padding: 0;
  margin-top: 5%;
  box-sizing: border-box;
}

/* 🧱 ساختار دو ستونه محتوا در دسکتاپ */
.gray-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
}

.gray-text {
  flex: 1;
  padding: 0 5%;
}

.gray-image {
  flex: 1;
  max-width: 500px;
  width: 100%;
}

.gray-image img {
  width: 100%;
  max-width: 100%;
  height: 500px;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

/* 🎞️ انیمیشن ورود از چپ */
@keyframes fadeInFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 🎞️ انیمیشن ورود از راست */
@keyframes fadeInFromRight {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 🔄 وضعیت اولیه برای انیمیشن فقط در دسکتاپ */
@media (min-width: 769px) {

  .slide-in-left,
  .slide-in-right {
    opacity: 0;
  }
}

/* ✅ فعال‌سازی انیمیشن هنگام ورود */
.slide-in-left.in-view {
  animation: fadeInFromLeft 1.8s ease-out forwards;
}

.slide-in-right.in-view {
  animation: fadeInFromRight 1.8s ease-out forwards;
}

/* 📱 واکنش‌گرایی کامل برای موبایل */
@media (max-width: 768px) {

  /* کل سکشن، عرض کامل با فاصله مناسب از کناره‌ها */
  .section-container {
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* فاصله داخلی ردیف‌ها */
  .section-white,
  .section-gray {
    padding: 24px 0 !important;
    box-sizing: border-box !important;
  }

  /* تغییر چینش دو ستونه به تک‌ستونه */
  .gray-content {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 24px !important;
  }

  /* تصویر با عرض کامل بدون محدودیت */
  .gray-image {
    width: 100% !important;
    max-width: 100% !important;
  }

  .gray-image img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
    margin: 0 auto !important;
  }

  /* متن با عرض کامل و فاصله خوب */
  .gray-text {
    width: 100% !important;
    padding: 0 0 !important;
    text-align: right !important;
    box-sizing: border-box !important;
  }
}

/* 🔀 جابجایی متن و عکس در ردیف‌های زوج */
.section-gray:nth-of-type(even) .gray-content {
  flex-direction: row-reverse;
}

/* ================== بخش: custom-articles (مقالات) ================== */
/* 🧊 کارت مقاله */
.RepeaterIndexItem {
  background: #fff !important;
  border: 0.3px solid #ccc;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
  overflow: hidden !important;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  cursor: pointer;
  display: flex !important;
  flex-direction: column !important;
  width: 220px !important;
  height: 440px !important;
  margin: 12px !important;
  padding: 0px !important;
}

/* 🖼 تصویر مقاله */
.RepeaterIndexItem .ItemImage {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
  display: block !important;
  backface-visibility: hidden !important;
  border-radius: 0 !important;
  image-rendering: auto !important;
  will-change: transform !important;
}

/* ✍️ عنوان مقاله */
.RepeaterIndexItem h3 {
  font-family: "IRANYekan", sans-serif !important;
  font-size: 12pt !important;
  font-weight: bold !important;
  color: #333 !important;
  text-align: center !important;
  margin: 15px 10px 5px !important;
  transition: color 0.3s ease !important;
}

/* 📝 متن مقاله */
.RepeaterIndexItem .Text {
  font-family: "IRANSans", sans-serif !important;
  font-size: 12px !important;
  color: #555 !important;
  text-align: justify !important;
  padding: 0 15px 20px !important;
  line-height: 1.8 !important;
  flex-grow: 1 !important;
}

/* 🔁 افکت hover */
.RepeaterIndexItem:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0px 0 10px 5px rgba(0, 0, 0, 0.6) !important;
  background: #d8f1f4 !important;
}

.RepeaterIndexItem:hover h3 {
  color: #1e4686 !important;
}

/* 📷 خنثی‌سازی figure خراب‌کننده */
.RepeaterIndexItem figure,
.RepeaterIndexItem figure *,
.RepeaterIndexItem .grid figure,
.RepeaterIndexItem .grid figure * {
  all: unset;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* 📱 واکنش‌گرایی موبایل */
@media (max-width: 768px) {
  .ContentMainBoxBox1 {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .RepeaterIndexItem {
    width: 90% !important;
    height: auto !important;
  }

  .RepeaterIndexItem .ItemImage {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    display: block !important;
    backface-visibility: hidden !important;
    border-radius: 0 !important;
    image-rendering: auto !important;
    will-change: transform !important;
  }
}

/* ================== بخش: custom-contact (تماس) ================== */
/* =========================
   Contact Section — scoped
   ========================= */
.BoxCenter .contact-wrapper {
  direction: rtl;
  font-family: IRANSans, Yekan, Tahoma, sans-serif;
  color: #0b0b0b;
  padding: 24px 12px;
  box-sizing: content-box;
  width: 100%;
}

/* کانتینر دو ستونه؛ تصویر راست، متن چپ */
.BoxCenter .contact-container {
  /* لغو هر float/width قدیمی قالب */
  float: none !important;
  width: 100% !important;
  clear: both;

  display: flex !important;
  flex-direction: row-reverse;
  /* تصویر در راست، متن در چپ */
  justify-content: center;
  align-items: center;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  /* وسط صفحه */
}

/* ستون تصویر (راست) */
.BoxCenter .contact-image {
  flex: 1 1 46%;
  text-align: center;
}

.BoxCenter .contact-image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 520px;
  /* کنترل اندازه منطقی */
  margin-inline: auto;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
  object-fit: cover;
  margin: 15px;
}

/* ستون متن (چپ) */
.BoxCenter .contact-textbox {
  flex: 1 1 54%;
  text-align: right;
  min-width: 280px;
  padding-left: 20px;
}

.BoxCenter .contact-title {
  margin: 0 0 14px 0;
  font-weight: 800;
  font-size: 28px;
  color: #0422a5;
  /* آبی برند */
}

/* لیست آیکون‌دار */
.BoxCenter .contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.BoxCenter .contact-list li {
  position: relative;
  padding: 12px 42px 12px 12px;
  /* جای آیکون سمت راست */
  background: #f7f9ff;
  border: 1px solid #e6ebff;
  border-radius: 12px;
  line-height: 1.9;
  box-shadow: 0 2px 8px rgba(4, 34, 165, 0.06);
  overflow: hidden;
}

.BoxCenter .contact-list .label {
  font-weight: 700;
  color: #1e2a78;
  margin-left: 4px;
}

.BoxCenter .contact-list .value {
  word-break: break-word;
}

/* آیکون‌ها (ایموجی ساده) */
.BoxCenter .contact-list li::before {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: #0422a5;
}

.BoxCenter .contact-list li.icon-address::before {
  content: "📍";
}

.BoxCenter .contact-list li.icon-phone::before {
  content: "📞";
}

.BoxCenter .contact-list li.icon-email::before {
  content: "✉️";
}

.BoxCenter .contact-list li.icon-postal::before {
  content: "🏷️";
}

/* نقشه پایین ردیف */
.BoxCenter .contact-map {
  max-width: 1200px;
  margin: 22px auto 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
  border: 1px solid #eef1ff;
}

.BoxCenter .contact-map iframe {
  display: block !important;
  width: 100% !important;
  height: 420px !important;
  border: 0;
}

/* ریسپانسیو */
@media (max-width: 1024px) {
  .BoxCenter .contact-container {
    gap: 24px;
  }

  .BoxCenter .contact-title {
    font-size: 24px;
  }
}

@media (max-width: 768px) {
  .BoxCenter .contact-container {
    flex-direction: column;
    /* موبایل: ستونی */
    align-items: stretch;
  }

  .BoxCenter .contact-image img {
    max-width: 100%;
  }

  .BoxCenter .contact-list li {
    padding: 10px 38px 10px 10px;
  }

  .BoxCenter .contact-map iframe {
    height: 360px !important;
  }
}

/* ============================================================
   tavanpm.com — 95-tpm-header-footer.css   (نسخه ۲)
   ماژول هدر/فوتر — پالت سرمه‌ای/کهربایی مطابق tavanpm-beta.html
   آخرین ماژول در build.py (بالاترین جایگاه cascade)

   سلکتورها: همگی از HeaderTop.ascx / MainMenu.ascx / Footer.ascx /
   SocialNetwork.ascx / Search.ascx و custom-merged.source.v2.css
   استخراج شده‌اند. هیچ سلکتور جدیدی اختراع نشده است.

   تغییرات ساختاری نسبت به نسخه ۱:
   - .sticky / .hide-header حذف شد (کلاس‌ها هرگز اضافه نمی‌شوند)
   - چسبندگی هدر با position:sticky انجام می‌شود، نه با JS
   - پیش‌نیاز: حذف overflow-x:hidden از body (فقط روی html بماند)

   تغییرات دیگر:
   - یکسان‌سازی breakpoint منو روی 992px (رفع ناحیه‌ی مرده‌ی 992–1000px)
   - .FooterText از height:182px ثابت به ارتفاع طبیعی
   - جایگزینی آبی #0422a5 با سرمه‌ای #0B1B33 + لهجه‌ی کهربایی
   ============================================================ */

/* ---------- توکن‌ها ---------- */
:root {
  --tpm-ink: #0b1b33;
  --tpm-navy-soft: #1e3a66;
  --tpm-amber: #f5b32b;
  --tpm-amber-deep: #d98e14;
  --tpm-line: #dae1ea;
  --tpm-muted: #7e93b5;
}

/* ============================================================
   پیش‌نیاز sticky
   overflow-x روی body، آن را به scroll container تبدیل می‌کند
   و position:sticky را از کار می‌اندازد. کلیپ افقی روی html می‌ماند.
   ============================================================ */
body {
  overflow-x: visible !important;
}

html {
  overflow-x: hidden !important;
}

/* ============================================================
   هدر — HeaderTop.ascx > MainMenu.ascx
   .navDiv داخل .HeaderTopHeaderTop تودرتوست؛ یک sticky کافی است.
   ============================================================ */

.HeaderTopHeaderTop {
  position: sticky;
  top: 0;
  z-index: 9999;
  width: 100%;
  background: #fff;
  border-bottom: 0;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
  will-change: transform;
}

/* کلاسی که JS بازنویسی‌شده هنگام اسکرول به پایین اضافه می‌کند */
.HeaderTopHeaderTop.is-hidden {
  transform: translateY(-100%);
}

.HeaderTopHeaderTop.is-scrolled {
  box-shadow: 0 4px 18px rgba(11, 27, 51, 0.12);
}

.HeaderTop1 {
  background: #fff;
  border-bottom: 1px solid var(--tpm-line);
}

/* --- چیدمان ردیف بالای هدر ---
   ساختار واقعی DOM (به همین ترتیب):
     .HeaderTop1 > center > .container:first-child
        ├── .leftBox   → فقط .SearchBox   (اول در DOM)
        └── .LogoBox   → لوگو             (دوم در DOM)
   خواسته: لوگو راست، جستجو چپ.
   چون container در RTL است، با order صریح جایشان را تعیین می‌کنیم:
   لوگو order:0 (راست)، جستجو order:1 (چپ). */

.HeaderTop1>center {
  display: block;
  text-align: right;
}

.HeaderTop1>center>.container:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 16px;
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding: 8px 24px;
  /* فاصله‌ی استاندارد از لبه در دسکتاپ */
  box-sizing: border-box;
}

/* لوگو — background-image است، نه <img>. ابعاد ثابت تا CLS صفر بماند. */
.LogoBox {
  order: 0;
  /* راست */
  flex: 0 0 auto;
  width: 270px;
  height: 69px;
  margin: 5px;
}

.Logo {
  display: block;
  width: 270px;
  height: 69px;
  background-size: contain;
  background-position: center right;
  background-repeat: no-repeat;
}

/* ستون جستجو — .leftBox فقط .SearchBox را دارد */
.leftBox {
  order: 1;
  /* چپ */
  flex: 0 1 420px;
  min-width: 0;
  margin: 0;
}

.LangBox {
  width: auto;
}

/* .SearchBox در CSS اصلی float:left + position + padding-left:50px دارد.
   داخل flex این‌ها را خنثی می‌کنیم تا از کادر بیرون نزند. */
.leftBox .SearchBox {
  float: none;
  position: relative;
  top: 0;
  left: 20px;
  width: 100%;
  min-width: 0;
  padding-left: 0;
}

.TextBoxBox {
  height: 40px;
  border: 1px solid var(--tpm-line);
  border-radius: 8px;
  /* قبلاً 99px بود؛ حالا ملایم */
  background: #f0f3f7;
  box-shadow: none;
  padding-right: 14px;
}

.TextBoxBox:focus-within {
  border-color: var(--tpm-amber-deep);
  background: #fff;
}

.TextBoxAutoCapmlet {
  background: transparent;
}

.AutoCamplet {
  border-radius: 0 0 8px 8px;
}

/* ---------- موبایل: لوگو راست، همبرگر جای خودش ----------
   در موبایل .container ردیف اول جمع‌وجور می‌شود و لوگو باید راست بماند.
   دکمه‌ی .nav-toggle با position:fixed سرجای خودش (چپِ بالا) است. */
@media (max-width: 991.98px) {
  .HeaderTop1>center>.container:first-child {
    padding: 8px 16px;
    /* فاصله‌ی استاندارد موبایل */
    justify-content: space-between;
    gap: 10px;
  }

  .LogoBox {
    order: 0;
    margin-right: 0;
    /* چسبیده به لبه‌ی راست نشود ولی راست بماند */
  }

  .leftBox {
    order: 1;
    flex: 1 1 auto;
    max-width: none;
  }
}

/* ---------- نوار ناوبری ---------- */
.navDiv {
  background: #0422a5;
}

.navDiv>.container {
  max-width: 1240px;
  margin-inline: auto;
}

/* #nav در CSS اصلی flex+rtl است. صریح تکرار می‌کنیم تا اولین آیتم
   (صفحه اصلی) در سمت راست بنشیند و کل منو وسط‌چین بماند. */
#nav {
  display: flex;
  direction: rtl;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

#nav li {
  padding: 0;
  border-left: 0;
}

#nav li:last-child {
  border-left: 0;
}

#nav li a {
  display: block;
  padding: 12px 22px;
  font-size: 14.5px;
  font-weight: 600;
  color: #dce5f2;
  border-bottom: 3px solid transparent;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

#nav li:hover>a,
#nav li a:focus-visible {
  color: var(--tpm-amber);
  border-bottom-color: var(--tpm-amber);
}

/* ============================================================
   منوی موبایل — .wrapper-flush / .nav-toggle / .nav-container
   یکسان‌سازی breakpoint روی 992px
   (قبلاً: #nav تا 1000px، wrapper-flush از 1000px، nav-container از 992px
    → بین 992 و 1000 هیچ منوی قابل استفاده‌ای وجود نداشت)
   ============================================================ */

@media (max-width: 991.98px) {
  #nav {
    display: none !important;
  }

  .wrapper-flush {
    display: block !important;
    visibility: visible;
  }

  .nav-toggle {
    display: inline-block !important;
  }

  .nav-container {
    display: block !important;
  }
}

@media (min-width: 992px) {
  #nav {
    display: flex !important;
    visibility: visible;
  }

  .wrapper-flush {
    display: none !important;
    visibility: hidden;
  }

  .nav-toggle {
    display: none !important;
  }

  .nav-container {
    display: none !important;
  }
}

.icon-menu .line {
  background-color: var(--tpm-ink);
}

.nav-toggle:focus-visible {
  outline: 2.5px solid var(--tpm-amber-deep);
  outline-offset: 2px;
}

@media (max-width: 991.98px) {
  .nav-menu .menu-link {
    color: #fff;
  }

  .nav-menu .menu-link::after {
    background: var(--tpm-amber);
  }
}

/* ============================================================
   فوتر — Footer.ascx + SocialNetwork.ascx
   ============================================================ */

.topFooter {
  height: 0;
}

#Footer {
  background: #0422a5;
  color: #b7c6dd;
  margin-top: 56px;
}

/* ارتفاع ثابت 182px محتوا را می‌برید */
.FooterText {
  height: auto;
  min-height: 0;
  overflow: visible;
  color: #b7c6dd;
  line-height: 1.9;
}

.FooterText a {
  color: var(--tpm-amber);
}

.FooterText .Title {
  color: #fff;
}

/* ---------- ستون لینک‌های سریع ---------- */
#LinkShow .Item {
  width: auto;
  height: auto;
  min-height: 0;
  overflow: visible;
  margin-right: 0;
  color: #b7c6dd;
}

#LinkShow .Title {
  color: var(--tpm-amber);
  font-size: 15px;
  letter-spacing: normal;
  text-shadow: none;
}

#LinkShow .Title:hover {
  color: var(--tpm-amber-deep);
}

#LinkShow .ItemSub {
  color: #b7c6dd;
  letter-spacing: normal;
  text-shadow: none;
}

#LinkShow .ItemSub a {
  color: #b7c6dd;
  font-size: 13.5px;
  transition: color 0.2s ease;
}

#LinkShow .ItemSub a:hover {
  color: var(--tpm-amber);
}

/* افکت shine حذف شد: هزینه‌ی paint بدون ارزش ادراکی */
#LinkShow .ItemSub a::before {
  content: none;
}

#LinkShow .ItemSub a::after {
  background: var(--tpm-amber);
}

/* ---------- شبکه‌های اجتماعی ----------
   ساختار واقعی:  .Social > .Item.fade > a > img.ItemImage
   قوانین سراسری source (flex-direction:column روی .Social در دسکتاپ +
   width:35px/float:left روی .Item + width:40px روی .ItemImage) آیکون‌ها را
   ریز و چسبیده می‌کرد. اینجا کل خوشه را قاطع بازتعریف می‌کنیم. */
.Social {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  /* لغو flex:0 0 10% از قانون دسکتاپ source */
  float: none !important;
  margin: 0 !important;
}

.Social .Item {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;
  transition: background 0.2s ease;
  float: none !important;
}

.Social .Item:hover {
  background: var(--tpm-amber);
  transform: none;
}

.Social .Item>a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
}

.Social .Item .ItemImage {
  float: none !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  object-fit: contain;
}

/* انیمیشن چرخش کامل حذف شد: هزینه‌ی PageSpeed بدون بازده */
#Footer .Social .Item img:hover {
  animation: none;
  filter: none;
}

/* ---------- کپی‌رایت ---------- */
.CopyRight {
  min-height: 0;
  padding-block: 16px;
  background: #0422a5;
  box-shadow: none;
  color: var(--tpm-muted);
  font-size: 12.5px;
}

.CopyRight a {
  color: var(--tpm-muted);
}

.CopyRightRight {
  margin-top: 0;
}

/* ============================================================
   موبایل فوتر — اصلاح وسط‌چین شدن نادرست
   source اصلی: «#Footer, #Footer * { text-align:center }» → همه‌چیز وسط.
   خواسته: فقط آیکون‌ها و کپی‌رایت وسط؛ آدرس/تماس راست‌چین بماند.
   ============================================================ */
@media (max-width: 599px) {

  /* لغو وسط‌چین سراسری فقط برای بلوک متن آدرس/تماس */
  #Footer .FooterText,
  #Footer .FooterText * {
    text-align: right !important;
    direction: rtl !important;
  }

  /* لینک‌های سریع وسطچین */
  #Footer #LinkShow,
  #Footer #LinkShow * {
    text-align: center !important;
  }

  /* آیکون‌های اجتماعی وسط بمانند */
  #Footer .Social {
    justify-content: center !important;
    gap: 16px !important;
  }

  /* کپی‌رایت وسط بماند */
  .CopyRight,
  .CopyRightRight {
    text-align: center !important;
  }
}

/* ============================================================
   دسترس‌پذیری و کاهش حرکت
   ============================================================ */
#nav li a:focus-visible,
#LinkShow .ItemSub a:focus-visible,
.Social .Item a:focus-visible,
.Logo:focus-visible {
  outline: 2.5px solid var(--tpm-amber-deep);
  outline-offset: 2px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .HeaderTopHeaderTop {
    transition: none !important;
  }
}

/* ============================================================
   96-tpm-index.css — صفحه اصلی TPM  (نسخه ۴ — طراحی نهایی)
   • هیرو full-width با دنده‌های بزرگ سمت چپ + قطره از بالا (بدون ویدیو)
   • داشبورد سوار روی هیرو (مثل بتا)
   • روبان اطلاع‌رسانی پایین‌چسبان full-width شیشه‌ای با خطوط نوار نقاله
   • برندها مربع با قاب طلایی
   • عرض محتوا ۱۱۰۰ + حاشیه‌ی کناری همیشگی
   ============================================================ */
.tpm-home {
  --ink: #0b1b33;
  --navy: #14284b;
  --navy-soft: #1e3a66;
  --amber: #f5b32b;
  --amber-deep: #d98e14;
  --amber-text: #8f5a00;
  --steel: #f0f3f7;
  --paper: #fff;
  --line: #dae1ea;
  --text: #22314a;
  --muted: #5d6b84;
  --ok: #2fa968;
  --radius: 14px;
  --shadow: 0 8px 28px rgba(11, 27, 51, .1);
  --fd: "IRANYekan", "IRANSans", Tahoma, sans-serif;
  --fb: "IRANSans", Tahoma, sans-serif;
  --wrap: 1100px;
  --pad: 22px;
  --ribbon-h: 52px;
  font-family: var(--fb);
  color: var(--text);
  line-height: 1.9;
  font-size: 15.5px;
  padding-bottom: var(--ribbon-h);
}

.tpm-home * {
  box-sizing: border-box
}

.tpm-home img {
  max-width: 100%;
  display: block
}

.tpm-home a {
  text-decoration: none;
  color: inherit
}

.tpm-home h2,
.tpm-home h3 {
  font-family: var(--fd);
  color: var(--ink);
  line-height: 1.6;
  margin: 0
}

/* کانتینر مرکزی مشترک برای سکشن‌های غیر full-width */
.tpm-wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad)
}

/* پاک‌سازی */
.IndexTextBox .wow,
.IndexText.wow {
  opacity: 1 !important;
  visibility: visible !important
}

#ctl13_div1 .SlidePicture,
#ctl13_div1 .slideTuch,
.ServiceBox3,
.container.colorA {
  display: none !important
}

.BoxIndexText,
.IndexTextBox,
.IndexText {
  width: 100%;
  max-width: none;
  float: none
}

/* ============ HERO — full-width ============ */
.tpm-hero {
  position: relative;
  overflow: hidden;
  color: #eaf1fa;
  background: radial-gradient(1100px 520px at 82% -10%, rgba(245, 179, 43, .16), transparent 60%),
    linear-gradient(160deg, #0b1b33 0%, #14284b 60%, #0b1b33 100%);
}

.tpm-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .05;
  pointer-events: none;
  background-image: repeating-linear-gradient(-45deg, #fff 0 2px, transparent 2px 26px)
}

.tpm-hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 64px var(--pad) 64px;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 10px;
  align-items: center
}

.tpm-hero-art {
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center
}

.tpm-hero-art svg {
  width: 100%;
  max-width: 340px;
  height: auto;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .35))
}

.tpm-gearA {
  transform-box: fill-box;
  transform-origin: center;
  animation: tpmSpinA 18s linear infinite
}

.tpm-gearB {
  transform-box: fill-box;
  transform-origin: center;
  animation: tpmSpinB 12s linear infinite
}

@keyframes tpmSpinA {
  to {
    transform: rotate(360deg)
  }
}

@keyframes tpmSpinB {
  to {
    transform: rotate(-360deg)
  }
}

.tpm-drop {
  animation: tpmDrip 3s ease-in infinite
}

@keyframes tpmDrip {
  0% {
    transform: translateY(0);
    opacity: 0
  }

  15% {
    opacity: 1
  }

  70% {
    transform: translateY(58px);
    opacity: 1
  }

  100% {
    transform: translateY(70px);
    opacity: 0
  }
}

.tpm-hero-title {
  margin: 0;
  font-family: var(--fd);
  color: #fff;
  font-size: clamp(23px, 1.4vw, 35px);
  font-weight: 900;
  line-height: 1.75
}

.tpm-hero-title .hl {
  color: var(--amber)
}

.tpm-hero-lede {
  margin: 150px 0 0;
  color: #fff;
  font-size: 15.5px;
  max-width: 56ch
}

.tpm-hero-feats {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 2px
}

.tpm-hero-feats li {
  position: relative;
  padding-inline-start: 26px;
  color: #fff;
  font-size: 14px
}

.tpm-hero-feats li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .55em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(245, 179, 43, .18)
}

.tpm-hero-ctas {
  display: flex;
  gap: 12px;
  margin-top: 26px;
  flex-wrap: wrap
}

.tpm-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fb);
  font-weight: 800;
  font-size: 14.5px;
  padding: 12px 22px;
  border-radius: 12px;
  transition: transform .15s, box-shadow .15s
}

.tpm-btn:hover {
  transform: translateY(-2px)
}

.tpm-btn-amber {
  background: var(--amber);
  color: var(--paper) !important;
  box-shadow: 0 6px 18px rgba(245, 179, 43, .35)
}

.tpm-btn-ghost {
  border: 1.5px solid #d98e14;
  color: #dce7f5
}

.tpm-btn-ghost:hover {
  border-color: var(--amber);
  color: var(--amber)
}

.tpm-hero-stats {
  display: flex;
  gap: 28px;
  margin-top: 32px;
  flex-wrap: wrap
}

.tpm-hero-stats .tpm-stat {
  display: block
}

.tpm-hero-stats .tpm-stat strong {
  display: block;
  font-family: var(--fd);
  font-size: 24px;
  color: var(--amber);
  line-height: 1.2
}

.tpm-hero-stats .tpm-stat span {
  font-size: 12.5px;
  color: #FFF;
}

/* ============ HMI — full-width نوار زیر هیرو ============ 
.tpm-hmi-band {
  background: linear-gradient(180deg, #0e2140, #0b1b33);
  border-bottom: 2px solid var(--amber-deep)
}*/

.tpm-hmi {
  max-width: var(--wrap);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: auto;
  color: #cfe0f5;
  font-size: 11px;
  scrollbar-width: none
}

.tpm-hmi::-webkit-scrollbar {
  display: none
}

.tpm-hmi-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  padding: 10px 18px;
  border-inline-start: 1px solid rgba(255, 255, 255, .08)
}

.tpm-hmi-cell:first-child {
  border-inline-start: 0
}

.tpm-hmi-label {
  font-size: 11px;
  color: #FFF;
  font-weight: 600
}

.tpm-hmi-val {
  font-weight: 800;
  color: var(--amber);
  letter-spacing: .5px;
  font-variant-numeric: tabular-nums
}

.tpm-hmi-val.dim {
  color: var(--amber);
}

.tpm-led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 8px var(--ok);
  animation: tpmPulse 2s infinite
}

@keyframes tpmPulse {
  50% {
    opacity: .35
  }
}

/* ============ DASHBOARD — سوار روی هیرو ============ */
.tpm-dash {
  max-width: var(--wrap);
  margin: -42px auto 0;
  padding-inline: var(--pad);
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px
}

.tpm-card {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px
}

.tpm-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fd);
  font-weight: 800;
  font-size: 14.5px;
  color: var(--ink);
  margin-bottom: 14px
}

.tpm-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber);
  flex: none
}

.tpm-upd {
  margin-inline-start: auto;
  font-size: 10px;
  font-weight: 700;
  background: rgba(245, 179, 43, .15);
  color: var(--amber-text);
  border: 1px dashed rgba(245, 179, 43, .5);
  border-radius: 6px;
  padding: 1px 7px
}

.tpm-cal-big {
  font-family: var(--fd);
  font-size: 24px;
  font-weight: 900;
  color: var(--ink);
  line-height: 1.5
}

.tpm-cal-sub {
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px
}

.tpm-cal-clock {
  margin-top: 12px;
  background: var(--ink);
  color: var(--amber);
  border-radius: 10px;
  text-align: center;
  font-family: var(--fd);
  font-size: 24px;
  font-weight: 800;
  padding: 8px;
  letter-spacing: 3px;
  font-variant-numeric: tabular-nums
}

.tpm-fx {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.tpm-fx-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--steel);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13.5px
}

.tpm-fx-row strong {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 800
}

.tpm-fx-note {
  margin-top: 10px;
  font-size: 11px;
  color: var(--muted)
}

.tpm-news {
  list-style: none;
  margin: 0;
  padding: 0
}

.tpm-news li {
  border-bottom: 1px dashed var(--line);
  padding-block: 8px;
  font-size: 13.5px
}

.tpm-news li:last-child {
  border: 0
}

.tpm-news a {
  display: flex;
  gap: 8px;
  align-items: baseline;
  transition: color .15s
}

.tpm-news a:hover {
  color: var(--amber-deep)
}

.tpm-tag {
  flex: none;
  font-size: 10.5px;
  font-weight: 700;
  background: rgba(245, 179, 43, .18);
  color: var(--amber-text);
  border-radius: 6px;
  padding: 1px 8px
}

/* ============ سکشن عمومی ============ */
.tpm-sec-head {
  max-width: var(--wrap);
  margin: 44px auto 22px;
  padding-inline: var(--pad);
  display: flex;
  align-items: center;
  gap: 14px
}

.tpm-sec-head h2 {
  font-size: clamp(19px, 2.4vw, 26px);
  flex: 0 0 100% !important;
  font-weight: 800
}

.tpm-rule {
  flex: 1;
  height: 2px;
  background: linear-gradient(to left, var(--amber), transparent)
}

.tpm-prose {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
  font-size: 15px;
  line-height: 2;
  color: var(--text)
}

.tpm-prose a {
  color: var(--amber-text);
  font-weight: 700
}

/* ============ سه حوزه ============ */
.tpm-cats {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px
}

.tpm-cat {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 300px;
  display: flex;
  align-items: flex-end;
  box-shadow: var(--shadow);
  isolation: isolate
}

.tpm-cat img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform .5s
}

.tpm-cat:hover img {
  transform: scale(1.06)
}

.tpm-cat::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(11, 27, 51, .92) 20%, rgba(11, 27, 51, .15) 70%)
}

.tpm-cat .tpm-cat-body {
  display: block;
  padding: 20px;
  color: #fff
}

.tpm-cat .tpm-cat-body strong {
  display: block;
  font-family: var(--fd);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 6px
}

.tpm-cat .tpm-cat-body span:not(.tpm-more) {
  display: block;
  font-size: 13px;
  color: #c6d4e8;
  line-height: 1.8
}

.tpm-more {
  display: inline-flex;
  margin-top: 10px;
  color: var(--amber);
  font-weight: 700;
  font-size: 13px
}

/* ============ چیپ‌ها ============ */
.tpm-chips {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: flex;
  flex-wrap: wrap;
  gap: 10px
}

.tpm-chip {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 8px 18px;
  font-size: 13.5px;
  font-weight: 600;
  transition: .2s
}

.tpm-chip:hover {
  border-color: var(--amber);
  background: rgba(245, 179, 43, .1);
  color: var(--amber-deep)
}

.tpm-sec-head .tpm-chip {
  margin-inline-start: auto
}

/* ============ محصولات منتخب ============ */
.tpm-prods {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  min-height: 260px
}

.tpm-prod {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: box-shadow .2s, transform .2s;
  overflow: hidden
}

.tpm-prod:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
  border-color: #c7d2e2
}

.tpm-prod-img {
  aspect-ratio: 4/3;
  border-radius: 10px;
  overflow: hidden;
  background: #fbfcfe;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px
}

.tpm-prod-img img {
  width: 100%;
  height: 100%;
  object-fit: contain
}

.tpm-prod .brand {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--amber-text);
  letter-spacing: .3px;
  margin-top: 2px
}

.tpm-prod-h3 {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em
}

.tpm-prod .go {
  margin-top: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px
}

.tpm-prod:hover .go {
  color: var(--amber-deep)
}

.tpm-skel {
  min-height: 240px;
  background: linear-gradient(100deg, #eef1f6 30%, #f7f9fc 50%, #eef1f6 70%);
  background-size: 200% 100%;
  animation: tpmShim 1.3s linear infinite;
  border-color: transparent
}

@keyframes tpmShim {
  to {
    background-position: -200% 0
  }
}

/* ============ خدمات ============ */
.tpm-services {
  max-width: 1055px;
  margin: 44px auto 0;
  padding: 36px 32px;
  background: linear-gradient(160deg, #0b1b33, #14284b);
  color: #eaf1fa;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 32px
}

.tpm-cta-box h2 {
  color: #fff;
  font-size: 22px;
  margin-bottom: 14px
}

.tpm-cta-box p {
  color: #b9c9e0;
  font-size: 14px;
  line-height: 2
}

.tpm-service-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px
}

.tpm-service-card {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  background:linear-gradient(to bottom,var(--amber),rgba(245,179,43,.5) 25%,transparent 50%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
  padding: 16px
}



.tpm-service-card h3 {
  color: var(--amber);
  font-size: 14.5px;
  margin-bottom: 10px
}

.tpm-service-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px
}

.tpm-service-card li {
  font-size: 13px;
  color: #cbd9ee;
  padding-inline-start: 16px;
  position: relative
}

.tpm-service-card li::before {
  content: "\25C6";
  position: absolute;
  inset-inline-start: 0;
  color: var(--amber);
  font-size: 8px;
  top: .4em
}

.tpm-service-card a {
  color: #cbd9ee
}

.tpm-service-card a:hover {
  color: var(--amber)
}

/* ============ برندها — مربع، قاب طلایی، شیشه‌ای ============ */
.tpm-brands {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px
}

.tpm-brand {
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #fff, #f6f8fc);
  border: 2px solid var(--amber);
  border-radius: 10px;
  box-shadow: 0 10px 16px rgba(245, 179, 43, .12);
  transition: .2s
}

.tpm-brand:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(245, 179, 43, .28)
}

.tpm-brand img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: contain
}

/* ============ روبان اطلاع‌رسانی — پایین‌چسبان full-width شیشه‌ای ============ */
.tpm-ribbon {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  height: var(--ribbon-h);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: rgba(11, 27, 51, .82);
  backdrop-filter: blur(10px);
  border-top: 2px solid var(--amber)
}

.tpm-ribbon::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .14;
  pointer-events: none;
  background: #0422a5;
  animation: tpmConveyor 1.6s linear infinite
}

@keyframes tpmConveyor {
  to {
    background-position: 46px 0
  }
}

.tpm-ribbon-badge {
  flex: none;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--amber);
  color: var(--ink);
  font-family: var(--fd);
  font-weight: 900;
  font-size: 12.5px;
  padding-inline: 16px;
  position: relative;
  z-index: 2
}

.tpm-ticker {
  flex: 1;
  overflow: hidden;
  position: relative;
  z-index: 1
}

.tpm-ticker-track {
  display: flex;
  gap: 56px;
  width: max-content;
  animation: tpmTick 55s linear infinite;
  padding-inline-start: 24px
}

.tpm-ribbon:hover .tpm-ticker-track {
  animation-play-state: paused
}

@keyframes tpmTick {
  to {
    transform: translateX(100%)
  }
}

.tpm-ticker a {
  color: #e6eefb;
  font-size: 13px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px
}

.tpm-ticker a:hover {
  color: var(--amber)
}

.tpm-ticker a::before {
  content: "\25C6";
  color: var(--amber);
  font-size: 9px
}

.tpm-ribbon>.tpm-ticker-track {
  flex: 1;
  overflow: hidden
}

/* ============ ریسپانسیو ============ */
@media (max-width:1024px) {
  .tpm-hero-inner {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 48px var(--pad) 60px;
    text-align: center
  }

  .tpm-hero-art {
    order: -1;
    min-height: 220px
  }

  .tpm-hero-art svg {
    max-width: 260px
  }

  .tpm-hero-feats {
    display: inline-grid;
    text-align: start
  }

  .tpm-hero-ctas,
  .tpm-hero-stats {
    justify-content: center
  }

  .tpm-dash {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 18px
  }

  .tpm-cats {
    grid-template-columns: repeat(2, 1fr)
  }

  .tpm-prods {
    grid-template-columns: repeat(3, 1fr)
  }

  .tpm-services {
    grid-template-columns: 1fr;
    gap: 24px
  }

  .tpm-brands {
    grid-template-columns: repeat(4, 1fr)
  }
}

@media (max-width:640px) {
  .tpm-home {
    --pad: 16px
  }

  .tpm-hero-inner {
    padding: 36px var(--pad) 48px
  }

  .tpm-hero-stats {
    gap: 18px
  }

  .tpm-hero-art svg {
    max-width: 200px
  }

  .tpm-dash,
  .tpm-cats {
    grid-template-columns: 1fr
  }

  .tpm-prods {
    grid-template-columns: 1fr 1fr
  }

  .tpm-service-cards {
    grid-template-columns: 1fr
  }

  .tpm-brands {
    grid-template-columns: repeat(3, 1fr)
  }

  .tpm-ribbon-badge span {
    display: none
  }
}

/* ============ فعال‌سازی با تعامل ============ */
.tpm-home.tpm-idle .tpm-gearA,
.tpm-home.tpm-idle .tpm-gearB,
.tpm-home.tpm-idle .tpm-drop,
.tpm-home.tpm-idle .tpm-led,
.tpm-home.tpm-idle .tpm-ticker-track,
.tpm-home.tpm-idle .tpm-ribbon::before,
.tpm-home.tpm-idle .tpm-skel {
  animation: none !important
}

@media (prefers-reduced-motion:reduce) {

  .tpm-led,
  .tpm-skel,
  .tpm-ribbon::before {
    animation: none !important
  }
}

/* ============ Breakout: هیرو و نوار HMI و روبان full-width از داخل کانتینر CMS ============ */
.tpm-hero,
.tpm-hmi-band {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw
}

/* مقاوم‌سازی: اگر TinyMCE لایه‌های full-width را حذف کرد، بازهم درست بماند */
.tpm-hero-inner:only-child,
.tpm-hero-inner {
  position: relative
}

/* اگر tpm-hmi-band حذف شد و tpm-hmi مستقیم زیر tpm-home آمد */
.tpm-home>.tpm-hmi {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  background: linear-gradient(180deg, #0e2140, #0b1b33);
  border-bottom: 2px solid var(--amber-deep)
}

.tpm-home>.tpm-hmi>* {
  max-width: var(--wrap)
}

/* اگر tpm-hero حذف شد و tpm-hero-inner مستقیم آمد → خودش full-width و پس‌زمینه بگیرد */
.tpm-home>.tpm-hero-inner {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  background: radial-gradient(1100px 520px at 82% -10%, rgba(245, 179, 43, .16), transparent 60%), linear-gradient(160deg, #0b1b33, #14284b 60%, #0b1b33);
  color: #eaf1fa
}
/* هیرو: تنها H1 مرئیِ صفحه — معاف از رولِ سراسریِ مخفی‌کننده‌ی h1 */
.tpm-hero .tpm-hero-title{
  position:static !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
  clip:auto !important;
  white-space:normal !important;
  color:#fff !important;
  font-size:clamp(23px,1.4vw,35px);
  font-weight:900;
  line-height:1.75;
}
/* ============================================================
   بازطراحی جامع صفحه‌ی اصلی — نسخه‌ی نهایی (خارج از مسیر بحرانی)
   ============================================================ */
/* هیرو: ویدیو تمام‌عرض + پوستر (همه‌ی نماها) + لایه‌ی تیره‌ی کنتراست */
.tpm-hero{
  background-image:url('/Administrator/Files/Design/industrial-poster.webp'),
    radial-gradient(1100px 520px at 82% -10%,rgba(245,179,43,.16),transparent 60%),
    linear-gradient(160deg,#0b1b33,#14284b 60%,#0b1b33);
  background-size:cover,auto,auto;background-position:center;background-repeat:no-repeat;
}
/* روکش تیره‌تر: سمت راست (محل متن) پررنگ‌تر تا تیترها واضح بمانند */
.tpm-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to left,rgba(8,18,34,.94),rgba(8,18,34,.66) 58%,rgba(8,18,34,.46)),
    linear-gradient(160deg,rgba(11,27,51,.5),rgba(20,40,75,.4) 60%,rgba(11,27,51,.55))}
.tpm-hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.tpm-hero-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease}
.tpm-hero-bg.is-playing video{opacity:1}
.tpm-hero>.tpm-hmi-band{position:relative;z-index:2}
.tpm-hero>.tpm-hero-inner{position:relative;z-index:2}
.tpm-hero-art{display:none}
.tpm-hero .tpm-hero-title{font-size:clamp(21px,2.5vw,31px)!important;line-height:1.7!important}

/* کارت‌های سه‌حوزه: شناور روی هیرو + بوردر طلاییِ محوشونده دورِ «هر کارت» */
.tpm-cats{margin-top:-40px;position:relative;z-index:5}
.tpm-cat::before{content:"";position:absolute;inset:0;border-radius:var(--radius);padding:2px;z-index:3;
  background:linear-gradient(to bottom,var(--amber),rgba(245,179,43,.5) 25%,transparent 50%);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

/* زیرعنوان مشترک + justify پاراگراف‌ها */
.tpm-sub{max-width:var(--wrap);margin:-6px auto 20px;padding-inline:var(--pad);color:var(--muted);font-size:13.5px;line-height:1.95;text-align:justify}
.tpm-prose p,.tpm-cta-box p,.tpm-hero-lede,.tpm-sub{text-align:justify}

/* تازه‌های توان پایش ماد: ردیف ۴ کارتِ مقاله، هماهنگ با بقیه (بدون باکس سفیدِ بزرگ) */
.tpm-news-row{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);display:grid;grid-template-columns:repeat(4,1fr);gap:16px;list-style:none}
.tpm-news-row li{display:flex;background:linear-gradient(160deg, #0b1b33, #14284b);box-shadow:var(--shadow);padding:16px;transition:border-color .2s,box-shadow .2s,transform .2s}
.tpm-news-row li:hover{border-color:var(--amber);transform:translateY(-3px)}
.tpm-news-row li a{flex:1;display:flex;flex-direction:column;gap:10px;font-size:13.5px;line-height:1.75;color:var(--paper);font-weight:600}
.tpm-news-row .tpm-tag{align-self:flex-start;border-radius:6px;padding:2px 9px;font-size:10.5px;font-weight:800}
.tpm-tag--buy{background:rgba(47,169,104,.14);color:#1f7a4d}
.tpm-tag--fix{background:rgba(212,85,59,.14);color:#b23c25}
.tpm-tag--cmp{background:rgba(30,58,102,.12);color:#1e3a66}
.tpm-tag--how{background:rgba(245,179,43,.2);color:var(--amber-text)}

/* چیپ‌ها */
.tpm-chips{justify-content:flex-start}

/* محصولات: نمای خوابیده، ۳ ستون، عکس راست ~۵۰٪ */
.tpm-prods{grid-template-columns:repeat(3,1fr);gap:16px;min-height:0}
.tpm-prod{flex-direction:row;align-items:stretch;gap:10px;padding:10px;min-height:132px}
.tpm-prod-img{flex:0 0 48%;aspect-ratio:auto;min-height:112px;margin:0;padding:6px}
.tpm-prod-img img{object-fit:contain}
.tpm-prod-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;padding:2px 0}
.tpm-prod .brand{font-size:10px;margin-top:0}
.tpm-prod-h3{font-size:12px;-webkit-line-clamp:3;min-height:auto;line-height:1.55}
.tpm-prod .go{font-size:11.5px;margin-top:auto}
.tpm-skel{min-height:132px}

/* برندها: بوردر، سایه و گردیِ هماهنگ با بقیه‌ی باکس‌ها */
.tpm-brand{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:var(--radius)}
.tpm-brand:hover{border-color:var(--amber);box-shadow:0 10px 22px rgba(11,27,51,.12)}
.tpm-card{-webkit-backdrop-filter:blur(8px)}

/* ================= ریسپانسیو ================= */
@media (max-width:1024px){
  .tpm-prods{grid-template-columns:repeat(2,1fr)}
  .tpm-news-row{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .tpm-hero-inner{padding:28px var(--pad) 40px;gap:20px}
  .tpm-hero .tpm-hero-title{font-size:20px!important;line-height:1.6!important}
  .tpm-hero-lede{font-size:13.5px;margin-top:12px;max-width:none}
  .tpm-hero-feats{gap:7px;margin-top:14px}
  .tpm-hero-feats li{font-size:13px}
  .tpm-hero-ctas{flex-direction:row;flex-wrap:nowrap;gap:10px;margin-top:18px}
  .tpm-hero-ctas .tpm-btn{flex:1;justify-content:center;padding:11px 10px;font-size:13px}
  .tpm-hero-stats{gap:0;margin-top:22px;padding-top:16px;justify-content:space-around;border-top:1px solid rgba(255,255,255,.12)}
  .tpm-hero-stats .tpm-stat{flex:1;text-align:center}
  .tpm-hero-stats .tpm-stat strong{font-size:20px}
  .tpm-hero-stats .tpm-stat span{font-size:11px}
  .tpm-cats{margin-top:16px}
  .tpm-prods{grid-template-columns:1fr}
  .tpm-prod{min-height:96px;gap:8px;padding:8px}
  .tpm-prod-img{flex:0 0 36%;min-height:78px;padding:4px}
  .tpm-prod-h3{font-size:11.5px;-webkit-line-clamp:2}
  .tpm-news-row{grid-template-columns:1fr}
  .tpm-ribbon{display:none}
  .tpm-hmi-band{overflow:hidden}
  .tpm-hmi{justify-content:flex-start;overflow:visible;width:max-content;flex-wrap:nowrap;margin-inline:0}
  .tpm-hmi-track{display:flex;width:max-content}
  .tpm-home:not(.tpm-idle) .tpm-hmi-track{animation:tpmHmiMarq 24s linear infinite}
}
@keyframes tpmHmiMarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.tpm-hmi-track{animation:none!important}}