html {
  color-adjust: exact;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

html.modal-open,
body.modal-open {
  overflow: hidden !important;
  height: 100%;
}

/* کل ارتفاع صفحه */
body {
  min-height: 100vh; 
  margin: 0;
  background: linear-gradient(to bottom, rgb(17, 34, 80)) !important;
}

/* عکس‌ها */
.carousel-item img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
}

/* فاصله از همه طرف */
#demo {
  border-radius: 20px !important;
  overflow: hidden;
  margin: 10px; 
  border: 5px solid rgba(216, 87, 42, 1) !important;
}


/*.................................................................................................................*/


/* استایل نوار منو */
.custom-navbar {
  background-color: rgba(60, 80, 112, 1) !important;       /* رنگ */
  border-radius: 20px;         /* گوشه گرد */
  padding: 10px 5px;          /* فاصله داخلی */
  width: calc(100% - 20px);   
}

/* دکمه‌ها */
.custom-navbar .btn {
  border-radius: 20px;
}

/* حالت پیش‌فرض */
.custom-navbar .btn {
  border-radius: 10px;
  padding: 8px 20px;
  font-size: 16px;
  white-space: nowrap;   /* جلوگیری از شکستن خط */
}

/* وقتی صفحه کوچیک‌تر شد (زیر 992px مثل تبلت) */
@media (max-width: 992px) {
  .custom-navbar .btn {
    padding: 6px 5px;
    font-size: 14px;
  }
}

/* وقتی خیلی کوچیک شد (زیر 576px مثل موبایل‌های آیفون) */
@media (max-width: 576px) {
  .custom-navbar .btn {
    padding: 4px 5px;
    font-size: 10px;
  }
  .custom-navbar .d-flex {
    gap: 10px; /* فاصله بین دکمه‌ها کمتر بشه */
  }
}
.custom-navbar .btn-custom {
  background-color: 	#e0c58f !important;  /* رنگ پس‌زمینه */
  color: #3c5070 !important;              /* رنگ متن */
  border: none;              /* بدون حاشیه */
}

.custom-navbar .btn-custom:hover {
  background-color: #f5f0e9 !important; /* رنگ وقتی موس میره روش */
}


/*.................................................................................................................*/


/*کادر محصولات*/
.pro-box {
  background-color: #d8572a !important;
  border-radius: 20px;
  margin: 10px 20px;  
  padding: 15px;
}

.text-box {
  color: #f5f0e9 !important;
  border-radius: 15px;
  text-align: center;
  height: 100%;          
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
 
}

/* اطمینان از هم‌قد بودن ستون‌ها */
.equal-height {
  display: flex;
  flex-wrap: wrap;
}


/*.................................................................................................................*/


/* کادر درباره ما*/
.about-box {
  background-color: #3c5070 !important; 
  border-radius: 20px;
  margin: 10px 20px;   /* فاصله چپ و راست در همه‌ی نمایشگرها */
  padding: 5px;       /* فاصله داخلی */
}


.about-text {
  color: #e0c58f !important;
  padding: 20px;
  text-align: justify;
  word-wrap: break-word; /* جلوگیری از بیرون‌زدگی متن */
}


.title{
  color:#d8572a !important;
}


/*.................................................................................................................*/


/* کادر ارتباط */
.Contact-box {
  background-color: rgba(224, 197, 143, 1) !important; 
  border-radius: 20px;
  margin: 10px 20px;   /* فاصله چپ و راست در همه‌ی نمایشگرها */
  padding: 5px;       /* فاصله داخلی */
}


.Contact-text {
  color: #112250 !important;
  padding: 20px;
  text-align: justify;
  word-wrap: break-word; /* جلوگیری از بیرون‌زدگی متن */
}


/*.................................................................................................................*/


/* کادر فوتر*/
.fot-box {
  background-color: #3c5070 !important; 
  border-radius: 20px;
  margin: 10px 20px;   /* فاصله چپ و راست در همه‌ی نمایشگرها */
  padding: 0px;       /* فاصله داخلی */
}


.fot-text {
  color: #e0c58f !important;
  padding: 5px;
  text-align:center;
  word-wrap: break-word; /* جلوگیری از بیرون‌زدگی متن */
}

/*.................................................................................................................*/

a.link {
  color:#e0c58f !important;
  text-decoration: none;
  transition: color 0.3s;
}

a.link:hover {
  color: #f5f0e9 !important;
}

/*.................................................................................................................*/

.custom-hr {
  border: none;          /* حذف حاشیه‌ی پیش‌فرض */
  height: 4px;           /* ضخامت خط */
  background-color: #0c0649 !important; /* رنگ دلخواه */
  margin: 0.5rem 0;      /* فاصله بالا/پایین */
}


.phone-container {
  text-align: left;  /* کل محتوا داخل این پاراگراف سمت چپ */
  direction: ltr;    /* اعداد هم LTR شوند */
}


.phone-link {
  display: inline-block;      /* اجازه می‌دهد padding و hover بهتر کار کند */
  text-decoration: none;      /* حذف خط زیر لینک */
  color: #112250 !important;             /* رنگ اولیه شماره – دلخواه خودت */
  transition: color 0.3s;     /* انیمیشن نرم تغییر رنگ هنگام hover */
}

.phone-link:hover {
  color: #f5f0e9 !important;             /* رنگ شماره هنگام هاور – دلخواه خودت */
  cursor: pointer;            /* نشانگر دست */
}

/* رنگ اختصاصی آیکون‌ها */
.whatsapp-icon {
  color: #25D366 !important;  /* سبز واتساپ */
  font-size: 30px;
}

.telegram-icon {
  color: #0088cc !important;  /* آبی تلگرام */
  font-size: 30px;
}

i.fas {
  color: #13bbb3 !important;   /* رنگ دلخواه آیکون */
  font-size: 24px;  /* اندازه آیکون */
}

/*.................................................................................................................*/

* {
  box-sizing: border-box;
}

.row > .column {
 padding: 2.5px; /* هر ستون 2.5px => فاصله‌ی بین ستون‌ها 5px */
}

/* استایل مخصوص تصاویر در گالری (صفحهٔ اصلی) */
.row > .column img {
  width: 95%;            /* عکس کمی کوچکتر از عرض ستون دیده میشه */
  display: block;
  margin: 0 auto 5px;    /* وسط چین و 5px فاصلهٔ عمودی پایین */
  border-radius: 10px;    /* گرد بودن گوشه‌ها — می‌تونی عدد رو کم/زیاد کنی */
  box-shadow: 0 2px 6px #f5f0e9 !important; /* اختیاری: سایهٔ ریز */
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  width: 25%;
  margin-bottom: 10px; /* فاصله عمودی بین ردیف‌ها */
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #3c5070 !important;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #3c5070 !important;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}

/* The Close Button */
.close {
  color: white !important;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999 !important;
  text-decoration: none;
  cursor: pointer;
}

.mySlides {
  display: none;
}

.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 25%;
  transform: translateY(-25%);
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: #d8572a !important;
  font-weight: bold;
  font-size: 30px;
  transition: 0.6s ease;
  border-radius:3px;
  user-select: none;
  -webkit-user-select: none;
  text-decoration: none;
}

/* وقتی مانیتور کوچک شد */
@media (max-width: 600px) {
  .prev {
    top: 25%;                     /* بالاتر قرار گیرد */
    left: 0px;                     /* فاصله کم از چپ */
  }

  .next {
    top: 25%;
    right: 0px;                    /* فاصله کم از راست */
  }
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev{
  left: 0;
}

.prev:hover,
.next:hover {
  background-color: #000 !important;
}

.caption-container {
  text-align: center;
  background-color: #3c5070 !important;
  padding: 2px 16px;
  color: white !important;
}

.demo {
  opacity: 0.3;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !important;
}


.thumbnails-row {
  display: flex;
  flex-wrap: wrap;           /* اگر جا کم شد خط بعد */
  justify-content: flex-star;   /* وسط چین */
  gap: 10px;                 /* فاصله بین ستون‌ها */
  padding-top: 10px;
}

.thumbnails-row .column {
  flex: 0 1 calc(25% - 10px);
}

.thumbnails-row .column img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* حالت عادی: روی موبایل و تبلت تصویر تمام عرض مودال است */
.mySlides img {
  width: 100%;
  height: auto;
  max-height: 90vh;      /* تا 90٪ ارتفاع پنجره، تناسب حفظ می‌شود */
  object-fit: contain;   /* عکس بدون برش و بدون کشیدگی */
}

/* وقتی مانیتور بزرگ است (مثلاً از 1200px به بالا) */
@media (min-width: 1200px) {
  .mySlides img {
    max-width: 70%;      /* عرض تصویر حداکثر 70٪ صفحه */
    max-height: 70vh;    /* ارتفاع تصویر حداکثر 70٪ ارتفاع مرورگر */
    margin: 0 auto;      /* وسط‌چین افقی */
    display: block;
  }
}

.caption {
  font-size: 20px;
   font-weight: bold;
  text-align: center;
  color: #d8572a !important;
  padding: 10px;
  margin-top: 10px; 
}

.call-button {
  display: inline-block;
  padding: 12px 24px;
  background-color: #28a745 !important; 
  color: white !important;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2) !important;
  transition: background-color 0.3s, transform 0.2s;
}

.call-button:hover {
  background-color: #218838 !important;
  transform: translateY(-2px);
}