@font-face {
  font-family: Vazir;
  src: url(../Fonts/vazir-font-v16.1.0/Vazir-Bold.woff);
}

@font-face {
  font-family: IrNastaligh;
  src: url(../Fonts/IranNastaliq.ttf);
}

body {
  font-family: "Vazir";
  /*font-weight: bold;*/
}

.h1_IrNastaligh {
  font-family: "IrNastaligh";
}

.ms-n5 {
  margin-right: -40px;
}

.slick-list {
  overflow: hidden !important;
  border-radius: 15px;
  /* اگر بخوای گوشه‌ها گرد باشن */
}

.SlickDiv {
  width: auto;
  height: 400px;
  margin: 5px auto;
  overflow: hidden;
  border-radius: 10px;
  position: relative;
}

.slick-prev:before,
.slick-next:before {
  color: rgb(0, 0, 0);
  font-size: 40px;
}

.slick-prev,
.slick-next {
  z-index: 1000;
}

.SlickDiv img {
  width: 100%;
  height: 400px;
  object-fit: contain;
  display: block;
}

img {
  border-radius: 5px;
}

[dir="rtl"] .slick-next {
  right: auto;
  left: 20px;
}

[dir="rtl"] .slick-prev {
  right: 0px;
  left: auto;
}

.MainDiv table td,
th {
  text-align: center;
  word-break: break-all;
}

.MainDiv a {
  text-decoration: none;
  font-size: small;
}

/* موبایل کوچک*/
@media (max-width: 576px) {
  .MainDiv {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    /*grid-template-rows: auto;*/
    gap: 4px;
  }

  .div1 {
    grid-column: 1 / -1;
    width: 100% !important;
    min-height: 200px;
    height: auto;
    max-width: 100%;
    /*این دوخط زیر مهم هستند*/
    /*
            Grid و Slick برخورد بین 
             استفاده می‌کنه(offsetWidth) برای محاسبه‌ی عرض اسلایدر از عرض پدرش slick
            : باشه و Grid Item داخل یک (.div1) ولی وقتی اون پدر
            تعریف شده باشه grid-template-columns: 1fr به‌صورت grid
            استفاده شده باشه grid-column: 1 / -1 و
            محاسبه می کنه container 100% رو بیش از grid item مرورگر گاهی عرض
            (نمی‌شه resolve های تک‌ستونه درست grid‌ بعضی مرورگرها برای  context چون -1 در)
            .فکر می‌کنه فضای بیشتری داره و عناصرش از محدوده خارج می‌شن slick در نتیجه
             container قرار داشت، عرض Grid چون داخل slick.بود Grid در div1 پس مشکل دقیقاً از محاسبه‌ی عرض
             .رو اشتباه حساب می‌کرد و چند پیکسل بیشتر می‌ساخت
            */
    overflow: hidden;
    display: block;
  }

  /*ها Div بقیه*/
  .MainDiv > div:not(.div1) {
    grid-column: 1 / 9;
    /*grid-row: auto;*/
  }

  .slick-dotted.slick-slider {
    height: auto;
  }

  .Addreess {
    font-size: small;
  }

  .SlickDiv img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
  }
}

/*موبایل بزرگ  تبلت عمودی*/
@media (min-width: 577px) and (max-width: 768px) {
  .MainDiv {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    /*grid-template-rows: repeat(10, 1fr);*/
    grid-template-rows: auto;
    gap: 6px;
  }

  .div1 {
    grid-column: 1 / -1;
    /* تمام عرض */
    min-height: 200px;
    height: auto;
  }

  .div2 {
    grid-column: 1 / 4;
  }

  .div3 {
    grid-column: 4 / 9;
  }

  td,
  th {
    font-size: xx-small;
    padding: 0;
  }

  .MainDiv > div:not(.div1, .div2, .div3) {
    grid-column: auto;
    grid-row: auto;
  }
}

/* -------------------- */
/* تبلت افقی / لپ‌تاپ کوچک*/
/* -------------------- */
@media (min-width: 769px) and (max-width: 992px) {
  .MainDiv {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    /*grid-template-rows: repeat(7, 1fr);*/
    grid-template-rows: auto;
    gap: 8px;
  }

  .div1 {
    grid-column: 1 / -1;
    /* تمام عرض */
    min-height: 200px;
    height: auto;
  }

  .div2 {
    grid-column: 1 / 4;
  }

  td,
  th {
    font-size: smaller;
  }

  .div3 {
    grid-column: 4 / 9;
  }

  .MainDiv > div:not(.div1, .div2, .div3) {
    grid-column: auto;
    grid-row: auto;
  }
}

/* -------------------- */
/* (993px به بالا) دسکتاپ و لپ‌تاپ بزرگ*/
/* -------------------- */
@media (min-width: 993px) {
  .MainDiv {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    /*grid-template-rows: repeat(5, 1fr);*/
    grid-template-rows: auto;
    gap: 10px;
  }

  .div1 {
    grid-column: 1 / -1;
    /* تمام عرض */
    min-height: 200px;
    height: auto;
  }

  .div2 {
    grid-column: 1 / 4;
    /* تمام عرض */
  }

  .div3 {
    grid-column: 4 / 9;
    /* تمام عرض */
  }

  .MainDiv > div:not(.div1, .div2, .div3) {
    grid-column: auto;
    grid-row: auto;
  }
}



#ToTop{ 
  position:fixed; 
  left:20px;
  top:540px;
  display:none;
  width: 50px; 
  height: 50px;
  font-size: xx-large;
  font-weight: bolder;
  color: cornsilk;
}


.was-validated .form-control,
.was-validated .form-select {
    z-index: auto !important;
}