.main-content-wrapper {
  width: 90%;
  max-width: 1200px;
  margin: 40px auto;
  box-sizing: border-box;
  text-align: right;
}

/* --- بخش اصلی محتوا --- */
.content-section {
  display: grid;
  /* نسبت گرید به 30% برای عکس و 70% برای متن تغییر کرد */
  grid-template-columns: 30% 70%;
  gap: 20px;
  align-items: stretch;
  background: rgba(40, 40, 40, 0.8);
  padding: 20px;
  border-radius: 15px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-sizing: border-box;
  /* margin-bottom: 20px; */ /* این مقدار قبلا ممکن بود کم باشد */
  margin-bottom: 25px; /* کمی افزایش برای فاصله از بخش بعدی */
}

/* --- کانتینر عکس --- */
.content-left {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.content-left img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
}

/* --- کانتینر متن --- */
.content-right {
  color: #e0e0e0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  /* padding سمت چپ به 10px کاهش یافت */
  padding: 12px 14px 12px 10px;
  box-sizing: border-box;
  /* min-width: 0; */ /* این مورد را هم اگر مشکل بیرون زدگی متن داشتید فعال کنید */
  min-width: 0; /* برای جلوگیری از بیرون زدگی متن */
  margin-right: 20px;
}

/* --- انیمیشن متن --- */
/* این بخش CSS فقط زمانی اعمال می‌شود که کلاس‌های wow و animated روی المان باشند */
.content-right.wow.animated {
  /* visibility: visible !important; */ /* این خط را حذف کردم تا تداخل نداشته باشد */
  animation-duration: 1s;
  animation-fill-mode: both;
}

/* اگر از bounceInRight استفاده می‌کنید، این کلاس‌ها روی المان باشند: */
/* content-right wow bounceInRight animated */

/* --- آیتم‌های اطلاعات --- */
.info-item {
  font-family: 'yekan';
  font-size: 17px;
  color: #ffffff;
  margin-bottom: 6px;
  line-height: 1.5;
  display: block;
  overflow-wrap: break-word;
}

.info-label {
  font-family: 'samra';
  font-size: 26px !important;
  color: #b4081d !important;
  margin-left: 10px;
  font-weight: bold;
}

/* --- استایل مجزا و مستقل برای h5 و span --- */
h5.info-item {
  font-family: 'yekan';
  font-size: 17px;
  color: #ffffff;
  margin-bottom: 6px;
  line-height: 1.5;
  display: block;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

span.info-label {
  font-family: 'samra', sans-serif;
  font-size: 26px !important;
  color: #b4081d !important;
  margin-left: 10px;
  font-weight: bold;
  display: inline;
}

/* --- ریسپانسیو موبایل --- */
@media (max-width: 768px) {
  .main-content-wrapper {
    width: 95%;
    margin: 20px auto;
  }

  .content-section {
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 15px;
    margin-bottom: 20px; /* فاصله کمتر در موبایل */
  }

  .content-left {
    width: 80%;
    margin: 0 auto;
    max-height: 280px;
    padding: 10px;
  }

  .content-right {
    width: 90%;
    margin: 0 auto;
    padding: 12px;
  }

  .info-item {
    font-size: 16px;
    margin-bottom: 5px;
    line-height: 1.4;
  }

  .info-label {
    font-size: 22px !important;
  }

  h5.info-item {
    font-size: 16px;
    line-height: 1.4;
  }

  span.info-label {
    font-size: 22px !important;
  }
}

/* --- استایل‌های کلی wow.js (اگر نیاز باشد، اینها در animate.css هم هستند) --- */
/* این بخش بیشتر برای اطمینان است و اگر animate.css کامل بارگذاری شده باشد، شاید لازم نباشد */
.wow {
  visibility: hidden;
}
.wow.animated {
  visibility: visible;
}
.bounceInRight { /* کلاس اصلی انیمیشن */
  animation-name: bounceInRight;
}
/* @keyframes bounceInRight { ... } */ /* تعریف انیمیشن در animate.css است */