/* ===== صفحات خدمت — مرجع: novin-farayand-service-web-design-reference.html ===== */

/* --- بردکرامب --- */
.wd-breadcrumb{font-size:13.5px;color:var(--nf-text-soft);}
#wd-breadcrumb{margin-bottom:26px;}
.wd-breadcrumb a{color:var(--nf-text-soft);text-decoration:none;transition:color .2s;}
.wd-breadcrumb a:hover{color:var(--nf-blue);}
.wd-breadcrumb span{margin:0 8px;opacity:.5;}

/* --- هیرو --- */
#wd-hero{
  background:
    radial-gradient(700px 340px at 88% -20%, rgba(0,161,154,0.10), transparent),
    radial-gradient(520px 280px at 6% 0%, rgba(0,96,194,0.08), transparent);
}
/* نسبت ستون‌ها مطابق موکاپ: 1.15fr / 1fr */
#wd-hero-left{flex:1.15 1 0;min-width:0;width:auto;}
#wd-hero-visual{flex:1 1 0;min-width:0;width:auto;}

#wd-hero-badge .nf-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--nf-bg-alt);border:1px solid var(--nf-border);
  color:var(--nf-blue-dark);font-size:13px;font-weight:600;
  padding:6px 14px;border-radius:999px;
}
#wd-hero-badge .nf-dot{width:6px;height:6px;border-radius:50%;background:var(--nf-teal);display:inline-block;}
#wd-hero-badge{margin-bottom:20px;}

#wd-hero-title .elementor-heading-title{
  font-size:46px;font-weight:900;line-height:1.3;letter-spacing:-0.5px;
}
#wd-hero-title{margin-bottom:22px;}
#wd-hero-title .nf-accent{color:var(--nf-blue);}
#wd-hero-lead p{font-size:18px;color:var(--nf-text-soft);}
#wd-hero-lead{margin-bottom:34px;}

/* تصویر شکل خودش را نگه می‌دارد و بریده نمی‌شود؛ نسبت پیشنهادی ۴:۳ است
   ولی عکس با نسبت دیگر هم کامل داخل کادر می‌نشیند. */
#wd-hero-img img{
  width:100%;height:auto;aspect-ratio:auto;
  border-radius:20px;display:block;
}

/* --- دکمه‌ها --- */
#wd-hero-btn-primary .elementor-button,
#wd-cta-consult .elementor-button{
  background:var(--nf-blue);color:#fff;
  padding:12px 26px;border-radius:10px;font-weight:600;font-size:15px;line-height:1.8;
  border:1px solid transparent;transition:background .2s;white-space:nowrap;
}
#wd-hero-btn-primary .elementor-button:hover{background:var(--nf-blue-dark);}
#wd-hero-btn-ghost .elementor-button{
  background:transparent;color:var(--nf-text);
  padding:12px 26px;border-radius:10px;font-weight:600;font-size:15px;line-height:1.8;
  border:1px solid var(--nf-border);transition:all .2s;white-space:nowrap;
}
#wd-hero-btn-ghost .elementor-button:hover{border-color:var(--nf-blue);color:var(--nf-blue);}

/* --- تیتر بخش‌ها --- */
#wd-pain-head,#wd-deliver-head,#wd-types-head,#wd-process-head,#wd-faq-head{
  max-width:660px;margin-bottom:52px;
}
#wd-faq-head{margin-inline:auto;text-align:center;}
#wd-pain-h2 .elementor-heading-title,
#wd-deliver-h2 .elementor-heading-title,
#wd-types-h2 .elementor-heading-title,
#wd-process-h2 .elementor-heading-title,
#wd-faq-h2 .elementor-heading-title{
  font-size:32px;font-weight:800;letter-spacing:-0.3px;
}
#wd-pain-h2,#wd-deliver-h2,#wd-types-h2,#wd-process-h2,#wd-faq-h2{margin-bottom:14px;}
#wd-pain-sub p,#wd-deliver-sub p,#wd-types-sub p,#wd-process-sub p,#wd-faq-sub p{
  color:var(--nf-text-soft);font-size:16.5px;
}

/* --- مسئله‌ها --- */
#wd-pain{background:var(--nf-bg-alt);}
#wd-pain-grid > .e-con{
  flex:1 1 0;min-width:0;width:auto;
  background:#fff;border:1px solid var(--nf-border);border-radius:var(--nf-radius);
}
.wd-mark{
  width:44px;height:44px;border-radius:12px;background:var(--nf-bg-alt);
  color:var(--nf-blue);display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:800;
}
#wd-pain-grid [id$="-mark"]{margin-bottom:18px;}
#wd-pain-grid .elementor-heading-title{font-size:17px;font-weight:700;}
#wd-pain-grid [id$="-title"]{margin-bottom:9px;}
#wd-pain-grid [id$="-desc"] p{font-size:14.5px;color:var(--nf-text-soft);}

/* --- تحویلی‌ها --- */
#wd-deliver-list-wrap,#wd-deliver-visual{flex:1 1 0;min-width:0;width:auto;}
.wd-deliver-list{list-style:none;margin:0;padding:0;}
.wd-deliver-list li{
  display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--nf-border);
}
.wd-deliver-list li:last-child{border-bottom:none;}
.wd-deliver-list .wd-tick{
  flex:none;width:24px;height:24px;border-radius:50%;background:var(--nf-teal);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;margin-top:4px;
}
.wd-deliver-list h4{font-size:16px;font-weight:700;margin:0 0 4px;}
.wd-deliver-list p{font-size:14px;color:var(--nf-text-soft);margin:0;}
#wd-deliver-img img{
  width:100%;height:auto;aspect-ratio:auto;border-radius:18px;display:block;
}
#wd-deliver-visual{position:sticky;top:130px;}

/* --- انواع سایت --- */
#wd-types{background:var(--nf-bg-alt);}
#wd-types-grid > .e-con{
  flex:1 1 0;min-width:0;width:auto;
  background:#fff;border:1px solid var(--nf-border);border-radius:var(--nf-radius);
  overflow:hidden;transition:all .25s;
}
#wd-types-grid > .e-con:hover{
  border-color:var(--nf-blue);transform:translateY(-4px);
  box-shadow:0 16px 32px rgba(34,48,59,0.08);
}
/* کارت‌های «انواع» ارتفاع ثابت دارند تا گرید هموار بماند؛ تصویر با
   `contain` کامل داخل کادر می‌نشیند و چیزی از آن بریده نمی‌شود. */
#wd-types-grid [id$="-img"]{background:var(--nf-bg-alt);}
#wd-types-grid [id$="-img"] img{
  width:100%;height:150px;object-fit:contain;display:block;
}
#wd-types-grid .elementor-heading-title{font-size:16.5px;font-weight:700;}
#wd-types-grid [id$="-title"]{margin-bottom:8px;}
#wd-types-grid [id$="-desc"] p{font-size:14px;color:var(--nf-text-soft);}

/* --- مراحل --- */
#wd-process-grid > .e-con{flex:1 1 0;min-width:0;width:auto;position:relative;}
#wd-process-grid > .e-con:not(:last-child)::after{
  content:'';position:absolute;top:26px;left:0;width:100%;height:1px;
  background:repeating-linear-gradient(to left,var(--nf-border) 0 6px, transparent 6px 12px);
}
.wd-step-num{
  width:52px;height:52px;border-radius:50%;background:var(--nf-navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;
  position:relative;z-index:1;
}
#wd-process-grid [id$="-num"]{margin-bottom:22px;}
#wd-process-grid .elementor-heading-title{font-size:16.5px;font-weight:700;}
#wd-process-grid [id$="-title"]{margin-bottom:8px;}
#wd-process-grid [id$="-desc"] p{font-size:14px;color:var(--nf-text-soft);}

/* --- سوالات متداول (ویجت Accordion) --- */
#wd-faq{background:var(--nf-bg-alt);}
#wd-faq-accordion{max-width:820px;margin-inline:auto;width:100%;}
#wd-faq-accordion .elementor-accordion-item{
  border:1px solid var(--nf-border);border-radius:var(--nf-radius);
  margin-bottom:14px;background:#fff;overflow:hidden;
}
#wd-faq-accordion .elementor-tab-title{
  padding:24px 28px;font-size:16.5px;font-weight:700;color:var(--nf-text);border:0;
}
#wd-faq-accordion .elementor-tab-title.elementor-active{color:var(--nf-blue);}
#wd-faq-accordion .elementor-tab-content{
  padding:0 28px 24px;border:0;font-size:14.5px;color:var(--nf-text-soft);
}
#wd-faq-accordion .elementor-accordion-icon{color:var(--nf-blue);}

/* --- بنر CTA --- */
#wd-cta-banner{background:var(--nf-navy);border-radius:24px;color:#fff;}
#wd-cta-text{flex:1 1 auto;width:auto;min-width:0;}
#wd-cta-actions{flex:0 0 auto;width:auto;}
#wd-cta-title .elementor-heading-title{font-size:27px;font-weight:800;color:#fff;}
#wd-cta-title{margin-bottom:12px;}
#wd-cta-sub p{color:rgba(255,255,255,0.65);font-size:15.5px;max-width:440px;}
#wd-cta-consult .elementor-button{background:var(--nf-teal);}
#wd-cta-consult .elementor-button:hover{background:#008a84;}
#wd-cta-phone .elementor-button{
  background:transparent;border:1px solid rgba(255,255,255,0.3);color:#fff;
  padding:12px 26px;border-radius:10px;font-weight:600;font-size:15px;line-height:1.8;
  transition:border-color .2s;white-space:nowrap;
}
#wd-cta-phone .elementor-button:hover{border-color:#fff;}

/* --- واکنش‌گرا (مطابق بریک‌پوینت‌های موکاپ) --- */
@media(max-width:1000px){
  #wd-hero-grid{flex-wrap:wrap;}
  #wd-hero-left,#wd-hero-visual{flex:1 1 100%;}
  #wd-hero-title .elementor-heading-title{font-size:34px;}
  #wd-deliver-grid{flex-wrap:wrap;}
  #wd-deliver-list-wrap,#wd-deliver-visual{flex:1 1 100%;}
  #wd-deliver-visual{position:static;}
  #wd-deliver-img img{aspect-ratio:auto;}
  #wd-pain-grid,#wd-types-grid,#wd-process-grid{flex-wrap:wrap;}
  #wd-pain-grid > .e-con,
  #wd-types-grid > .e-con,
  #wd-process-grid > .e-con{flex:1 1 45%;}
  #wd-process-grid > .e-con:not(:last-child)::after{display:none;}
  #wd-cta-banner{flex-direction:column;text-align:center;}
}

@media(max-width:600px){
  #wd-hero{padding-block:48px 56px;}
  #wd-pain,#wd-deliver,#wd-types,#wd-process,#wd-faq,#wd-contact{padding-block:56px;}
  #wd-hero-title .elementor-heading-title{font-size:28px;}
  #wd-pain-grid > .e-con,
  #wd-types-grid > .e-con,
  #wd-process-grid > .e-con{flex:1 1 100%;}
  #wd-cta-banner{padding:44px 28px;}
  #wd-faq-accordion .elementor-tab-title{padding:18px 20px;font-size:15.5px;}
  #wd-faq-accordion .elementor-tab-content{padding:0 20px 18px;}
}

/* ===== صفحه هاب خدمات ===== */
#si-title .elementor-heading-title{font-size:46px;font-weight:900;line-height:1.3;letter-spacing:-0.5px;}
#si-title{margin-bottom:18px;}
#si-lead p{font-size:18px;color:var(--nf-text-soft);max-width:640px;}
#si-grid > .e-con{
  flex:1 1 0;min-width:0;width:auto;
  background:#fff;border:1px solid var(--nf-border);border-radius:var(--nf-radius);
  transition:all .25s;
}
#si-grid > .e-con:hover{
  border-color:var(--nf-blue);transform:translateY(-4px);
  box-shadow:0 16px 32px rgba(34,48,59,0.08);
}
#si-grid [id$="-icon"]{margin-bottom:22px;}
#si-grid .elementor-heading-title{font-size:18px;font-weight:700;}
#si-grid .elementor-heading-title a{color:inherit;text-decoration:none;}
#si-grid .elementor-heading-title a:hover{color:var(--nf-blue);}
#si-grid [id$="-title"]{margin-bottom:10px;}
#si-grid [id$="-desc"] p{font-size:14.5px;color:var(--nf-text-soft);}
#si-grid [id$="-desc"]{margin-bottom:18px;}
/* «بیشتر بدانید» همه کارت‌ها هم‌تراز و ته کارت (توضیح‌ها هم‌اندازه نیستند) */
#si-grid > .e-con{display:flex;flex-direction:column;}
#si-grid [id$="-more"]{margin-top:auto;}

@media(max-width:1000px){
  #si-title .elementor-heading-title{font-size:34px;}
  #si-grid{flex-wrap:wrap;}
  #si-grid > .e-con{flex:1 1 45%;}
}
@media(max-width:600px){
  #si-title .elementor-heading-title{font-size:28px;}
  #si-grid > .e-con{flex:1 1 100%;}
}

/* ===== صفحات درباره / نمونه‌کارها / تماس ===== */
/* این صفحات از همان اسکلت صفحات خدمت استفاده می‌کنند؛ فقط تفاوت‌ها اینجاست. */

/* هیرو تک‌ستونه (بدون تصویر کناری) */
#wd-hero > .e-con-inner > #wd-hero-left{max-width:780px;}

/* مقدار تماس (شماره/ایمیل) برجسته باشد */
.nf-contact-value{font-size:17px;font-weight:700;margin:0 0 6px;}
.nf-contact-value a{color:var(--nf-blue);text-decoration:none;}
.nf-contact-value a:hover{color:var(--nf-blue-dark);}

/* کارت نمونه‌کار: تصویر جای‌گیر */
#wd-types-grid .nf-portfolio-thumb{
  height:180px;background:linear-gradient(135deg,var(--nf-navy),var(--nf-blue-dark));
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.35);
  font-size:13px;font-weight:600;letter-spacing:.5px;
}
#wd-types-grid [id$="-tag"]{margin-bottom:8px;}

/* فرم تماس در صفحه تماس */
#nf-contact-wrap #nf-contact-form{
  max-width:640px;margin-inline:auto;background:#fff;
  border:1px solid var(--nf-border);border-radius:var(--nf-radius);
}
#nf-contact-wrap #wd-deliver-head{margin-inline:auto;text-align:center;}