.weblabs-about-benefits{
  --wab-accent:#c8a85a;
  --wab-dark:#0f2b33;
  --wab-muted:#f5f5f5;
  --wab-gap:24px;
  --wab-card-radius:0px;
  --wab-pattern-opacity:0.2;

  --wab-box-head-bg:var(--wab-dark);
  --wab-box-head-text:#ffffff;
  --wab-box-body-bg:var(--wab-muted);
  --wab-box-body-text:#374151;
  --wab-box-line:var(--wab-accent);

  width:100%;
  box-sizing:border-box;

  /* ✅ جلوگیری از اسکرول افقی روی موبایل (ظاهر رو تغییر نمی‌ده) */
  overflow-x:hidden;
}

/* SMALL HEADER (top right text + gold line) */

.weblabs-about-benefits__header{
  margin-bottom:8px;
  text-align:right;
}

.weblabs-about-benefits__small-wrap{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}

.weblabs-about-benefits__small-heading{
  font-size:13px;
  font-weight:600;
  color:#111827;
}

.weblabs-about-benefits__small-line{
  flex:0 0 80px;
  height:3px;
  background:var(--wab-accent);
}

/* TOP ROW (green block + white intro card) */

.weblabs-about-benefits__toprow{
  display:grid;
  grid-template-columns: minmax(0,1.6fr) minmax(0,0.8fr);
  align-items:stretch;
  gap:0;
  margin-top:16px;
  margin-bottom:32px;
  background:var(--wab-dark);

  /* ✅ جلوگیری از overflow داخل گرید */
  min-width:0;
}

.weblabs-about-benefits__stripe{
  background:var(--wab-dark);
  position:relative;
  overflow:hidden;
  min-width:0; /* ✅ */
}

.weblabs-about-benefits__stripe-pattern{
  position:absolute;
  inset:0;
  background-repeat:no-repeat;
  background-position:15% 50%;
  background-size:160px auto;
  opacity:var(--wab-pattern-opacity);
}

/* intro card */

.weblabs-about-benefits__intro-card{
  position:relative;
  background:#ffffff;
  padding:22px 26px 26px;
  box-shadow:0 12px 30px rgba(15,27,36,.10);
  border-radius:0;
  margin-right:77px; /* ✅ سمی‌کالن اضافه شد */

  /* ✅ جلوگیری از بیرون‌زدن */
  max-width:100%;
  box-sizing:border-box;
}


.weblabs-about-benefits__heading{
  margin:0 0 10px;
  font-size:22px;
  font-weight:800;
  color:#111827;
}

.weblabs-about-benefits__intro-text{
  margin:0;
  font-size:14px;
  line-height:2;
  color:#4b5563;
}

/* GRID of boxes */

.weblabs-about-benefits__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--wab-gap);
  min-width:0; /* ✅ */
}

.weblabs-about-benefits__box{
  display:flex;
  flex-direction:column;
  border-radius:var(--wab-card-radius);
  overflow:hidden;
  min-width:0; /* ✅ */
}

/* box header (green) */

.weblabs-about-benefits__box-head{
  background:var(--wab-box-head-bg);
  color:var(--wab-box-head-text);
  padding:14px 18px;
  border-bottom: 16px solid var(--wab-box-line);
}

.weblabs-about-benefits__box-title{
  margin:0;
  font-size:14px;
  font-weight:700;
  padding: 20px 0;
}

/* box body + golden line */

.weblabs-about-benefits__box-body{
  background:var(--wab-box-body-bg);
  padding:18px 18px 22px;
}

.weblabs-about-benefits__box-text{
  margin:0;
  font-size:13px;
  line-height:2;
  color:var(--wab-box-body-text);
}


/* RESPONSIVE */

@media (max-width:1024px){

  .weblabs-about-benefits__toprow{
    grid-template-columns:minmax(0,0.9fr) minmax(0,1.4fr) !important;
  }

  .weblabs-about-benefits__grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  /* ✅ تو تبلت margin خیلی بزرگ باعث overflow میشه */
  .weblabs-about-benefits__intro-card{
    margin-right:32px !important;
    max-width:100% !important;
  }
}

@media (max-width:767px){

  /* ✅ موبایل: تاپ‌رو ستونی */
  .weblabs-about-benefits__toprow{
    grid-template-columns:1fr !important;
    row-gap:16px !important;
  }

  /* ✅ موبایل: کارت معرفی تمام عرض + حذف offset */
  .weblabs-about-benefits__intro-card{
    margin-right:0 !important;
    width:100% !important;
    max-width:100% !important;
  }

  .weblabs-about-benefits__stripe{
    min-height:70px;
  }

  /* ✅ موبایل: باکس‌ها تک ستونه */
  .weblabs-about-benefits__grid{
    grid-template-columns:1fr !important;
  }

  .weblabs-about-benefits__heading{
    font-size:20px;
  }
}

/* reduced motion */

@media (prefers-reduced-motion: reduce){
  .weblabs-about-benefits__intro-card{
    box-shadow:none;
  }
}