/* ===== RESET (برای حذف فاصله‌های ناخواسته) ===== */
*{
  box-sizing:border-box;
}

body{
  margin:0;
  padding:0;
}

/* ===== SERVICE BOXES CONTAINER ===== */
.service-boxes{
  width:1200px;                 /* عرض ثابت */
  margin:0 auto;               /* وسط‌چین */
  padding:50px 0;              /* بدون فاصله چپ و راست */
  display:grid;
  grid-template-columns:repeat(7, 1fr); /* دسکتاپ: یک خط */
  gap:24px;
  background:#0b0b0b;
  direction:rtl;
}

/* ===== SERVICE BOX ===== */
.service-box{
  height:180px;
  background:linear-gradient(145deg,#151515,#0f0f0f);
  border:1px solid rgba(212,175,55,.35);
  border-radius:18px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;

  color:#fff;
  cursor:pointer;

  transition:
    background .3s ease,
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;
}

/* ===== ICON ===== */
.service-box i{
  font-size:42px;
  color:#d4af37;
  margin-bottom:14px;
  transition:color .3s ease;
}

/* ===== TITLE ===== */
.service-box h3{
  font-size:18px;
  font-weight:600;
  margin:0;
  line-height:1.3;
  transition:color .3s ease;
}

.service-box h3 small{
  display:block;
  font-size:13px;
  color:#bfa34a;
  margin-top:4px;
  transition:color .3s ease;
}

/* ===== HOVER (ORANGE) ===== */
.service-box:hover{
  background:linear-gradient(145deg,#ff8c00,#e67600);
  border-color:#ff9f1c;
  transform:translateY(-6px);
  box-shadow:0 14px 35px rgba(255,140,0,.45);
}

.service-box:hover i,
.service-box:hover h3,
.service-box:hover h3 small{
  color:#111;
}

/* ===== TABLET ===== */
@media (max-width:1024px){
  .service-boxes{
    width:100%;
    grid-template-columns:repeat(4, 1fr); /* ۴ + ۳ */
  }
}

/* ===== MOBILE ===== */
@media (max-width:600px){
  .service-boxes{
    grid-template-columns:repeat(2, 1fr); /* دو خط */
  }
}