/* ===== درباره ما (کارت با تب کناری) ===== */
#about{
  --navy:#0b5ed7;          /* آبی/سرمه‌ای تب */
  --navyDark:#0a3f8a;
  --border:#dfe7f2;
  --card:#ffffff;
  --bg:#f6f8fb;
  --text:#1f2937;
  background: var(--bg);
}

/* ظرف کارت */
.about-card{
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: clamp(18px, 3.5vw, 28px);
  max-width: 980px;
  margin: 16px auto;
  box-shadow: 0 14px 34px rgba(0,0,0,.08);
}

/* تب کناری مثل تصویر: «درباره ما» */
.about-tab{
  position: absolute;
  top: clamp(16px, 3.2vw, 28px);
  inset-inline-start: -14px;         /* سمت راست در RTL */
  background: linear-gradient(180deg, var(--navy), var(--navyDark));
  color: #fff;
  padding: 10px 18px;
  border-radius: 10px 0 10px 0;
  box-shadow: 0 10px 20px rgba(0,0,0,.15);
  font-weight: 800;
  letter-spacing: .2px;
}

/* محتوای داخلی */
.about-content{
  color: var(--text);
  line-height: 2.2;
  font-size: 1.02rem;
}

/* تصویر هِرو (اختیاری) */
.about-hero{
  margin: 0 0 14px;
}
.about-hero img{
  display:block;
  width:100%;
  height:auto;
  border-radius: 12px;
  border: 1px solid var(--border);
}

/* ریسپانسیو */
@media (max-width: 768px){
  .about-card{
    border-radius: 16px;
    padding: 18px;
  }
  .about-tab{
    inset-inline-start: -10px;
    padding: 8px 14px;
    border-radius: 8px 0 8px 0;
  }
  .about-content{ font-size: 1rem; line-height: 2; }
}


#about{ padding-bottom: 56px; }   /* فاصله امن از فوتر */