/* ============================================================
   RUMI CONSULTANCY — Global Stylesheet
   All colors, fonts, and spacing are controlled via variables
   in :root — edit here to apply changes site-wide.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Poppins:wght@300;400;500&display=swap');

/* ─── Design Tokens ──────────────────────────────────────── */
:root {
  /* Colors */
  --color-bg:         #19233e;
  --color-accent:     #f49d22;
  --color-white:      #ffffff;
  --color-text-muted: rgba(255, 255, 255, 0.75);
  --color-pattern:    #808080;
  --color-divider:    rgba(255, 255, 255, 0.15);

  /* Fonts */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Poppins', sans-serif;

  /* Font Sizes */
  --fs-h1:      clamp(2rem, 5vw, 3rem);
  --fs-quote:   clamp(1.2rem, 3vw, 1.6rem);
  --fs-body:    clamp(0.85rem, 1.5vw, 1rem);
  --fs-label:   0.85rem;
  --fs-footer:  0.78rem;

  /* Spacing */
  --section-gap: clamp(2.5rem, 6vw, 5rem);
  --content-max: 680px;
  --service-gap: 3rem;        /* ← فاصله بین سرویس‌ها در صفحه Our Services */
  --services-top-gap: 1.5rem; /* ← فاصله بین بخش‌های بالایی صفحه Our Services */
  --services-intro-gap: 4rem; /* ← فاصله بعد از متن intro تا اولین سرویس */
  --clients-intro-gap: 4rem;  /* ← فاصله بین متن intro و گرید لوگوها — اینجا تغییر بده */
  --contact-gap: 3.5rem;      /* ← فاصله یکنواخت بین بخش‌های صفحه Contact Us — اینجا تغییر بده */

  /* Footer */
  --footer-padding-bottom: 2rem;   /* ← فاصله فوتر از پایین صفحه — اینجا تغییر بده */
  --footer-color:          rgba(255, 255, 255, 0.55);  /* ← رنگ متن فوتر — اینجا تغییر بده */
  --footer-font-size:      0.78rem; /* ← سایز متن فوتر — اینجا تغییر بده */

  /* Pattern — تنظیمات سراسری پترن‌ها */
  --pattern-opacity: 0.12;   /* ← شفافیت پترن در همه صفحات — اینجا تغییر بده */
  --pattern-color:   #808080; /* ← رنگ پترن در همه صفحات — اینجا تغییر بده */
}

/* ─── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--color-bg);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.8;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ─── Page Wrapper ───────────────────────────────────────── */
.page {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: clamp(2rem, 5vw, 4rem) 1.5rem;
  overflow: hidden;
}

/* ─── Pattern Decorations ────────────────────────────────── */
/*
   تنظیم دستی پترن‌ها:
     --p-size   : اندازه پترن (عرض)
     --p-x      : موقعیت افقی از لبه (منفی = بیشتر بیرون از صفحه)
     --p-y      : موقعیت عمودی از لبه (منفی = بیشتر بیرون از صفحه)
     --p-rotate : زاویه چرخش به درجه
*/

.pattern {
  position: absolute;
  pointer-events: none;
  opacity: var(--pattern-opacity);   /* ← شفافیت — از :root کنترل می‌شود */

  /*
   * رنگ پترن:
   * این فیلتر ابتدا SVG را مشکی می‌کند، سپس به رنگ --pattern-color تبدیل می‌کند.
   * مقدار فعلی: خاکستری #808080
   * برای رنگ سفید: brightness(0) invert(1)
   * برای رنگ نارنجی (#f49d22): brightness(0) invert(1) sepia(1) saturate(3) hue-rotate(5deg)
   * یا ساده‌ترین راه: مقدار --pattern-opacity را تغییر بده
   */
  filter: brightness(0)           /* ابتدا مشکی */
          invert(55%)             /* خاکستری متوسط */
          sepia(0%)
          saturate(0%);           /* بی‌رنگ = خاکستری خالص */
}

/* پترن چپ — وسط صفحه، نیمی بیرون */
.pattern--mid-left {
  --p-size:   260px;   /* ← اندازه */
  --p-x:      -260px;  /* ← موقعیت افقی (نیمی بیرون) */
  --p-y:      200px;  /* ← موقعیت عمودی از مرکز */
  --p-rotate: 45deg;    /* ← چرخش */

  width:     var(--p-size);
  left:      var(--p-x);
  top:       50%;
  transform: translateY(calc(-50% + var(--p-y))) rotate(var(--p-rotate));
}

/* پترن راست — پایین صفحه Home */
.pattern--home-br {
  --p-size:   260px;   /* ← اندازه */
  --p-x:      -110px;   /* ← موقعیت افقی (منفی = بیشتر بیرون) */
  --p-y:      -60px;   /* ← موقعیت عمودی (منفی = بیشتر پایین) */
  --p-rotate: 15deg;  /* ← چرخش */

  width:     var(--p-size);
  right:     var(--p-x);
  bottom:    var(--p-y);
  transform: rotate(var(--p-rotate));
}

/* ─── Main Content ───────────────────────────────────────── */
.main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--content-max);
  text-align: center;
  gap: var(--section-gap);
}

/* ─── Logo ───────────────────────────────────────────────── */
.logo {
  width: clamp(100px, 18vw, 160px);
}

/* ─── Hero ───────────────────────────────────────────────── */
.hero { display: flex; flex-direction: column; gap: 1.2rem; }

.hero__headline {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-white);
  letter-spacing: 0.01em;
  white-space: nowrap;          /* یک خط بماند */
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  /* اگر روی صفحه‌های کوچک‌تر کلمه‌بندی لازم شد، این خط را حذف کن */
}

.hero__sub {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;
  color: var(--color-text-muted);
  line-height: 1.9;
  max-width: 440px;
  margin: 0 auto;
}

/* ─── Separator ──────────────────────────────────────────── */
.separator {
  width: clamp(120px, 25vw, 200px);
}

/* ─── Quote ──────────────────────────────────────────────── */
.quote { display: flex; flex-direction: column; gap: 0.6rem; }

.quote__text {
  font-family: var(--font-display);
  font-size: var(--fs-quote);
  font-weight: 400;
  font-style: italic;
  line-height: 1.5;
  color: var(--color-white);
}

.quote__author {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--color-accent);
  letter-spacing: 0.05em;
}

/* ─── About ──────────────────────────────────────────────── */
.about__text {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;
  color: var(--color-text-muted);
  line-height: 1.9;
  text-align: center;
}

/* ─── Navigation Cards ───────────────────────────────────── */
.nav-cards {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
}

.nav-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 0.5rem;
  text-decoration: none;
  color: var(--color-white);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-card:hover {
  transform: translateY(-4px);
  opacity: 0.85;
}

.nav-card__icon {
  width: clamp(52px, 9vw, 72px);
  height: auto;
}

.nav-card__label {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--color-white);
}

.nav-card-divider {
  width: 1px;
  height: 80px;
  background: var(--color-divider);
  flex-shrink: 0;
}

/* ─── Footer ─────────────────────────────────────────────── */
.footer {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: clamp(2rem, 5vw, 4rem);
  padding-bottom: var(--footer-padding-bottom);
  font-family: var(--font-body);
  font-size: var(--footer-font-size);
  font-weight: 300;
  color: var(--footer-color);
  text-align: center;
}

/* ─── Fade-in Animation ──────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-up {
  opacity: 0;
  animation: fadeUp 0.8s ease forwards;
}

.fade-up:nth-child(1) { animation-delay: 0.1s; }
.fade-up:nth-child(2) { animation-delay: 0.25s; }
.fade-up:nth-child(3) { animation-delay: 0.4s; }
.fade-up:nth-child(4) { animation-delay: 0.55s; }
.fade-up:nth-child(5) { animation-delay: 0.7s; }
.fade-up:nth-child(6) { animation-delay: 0.85s; }
.fade-up:nth-child(7) { animation-delay: 1s; }

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 480px) {
  .nav-card-divider { height: 60px; }
  .nav-card__label  { font-size: 0.75rem; }
}

/* ============================================================
   OUR SERVICES PAGE
   ============================================================ */

/* پترن بالا راست — صفحه Our Services */
.pattern--services-tr {
  --p-size:   260px;   /* ← اندازه */
  --p-x:      -60px;  /* ← موقعیت افقی (منفی = بیشتر بیرون) */
  --p-y:      -300px;   /* ← موقعیت عمودی (منفی = بیشتر بالا) */
  --p-rotate: -45deg;   /* ← چرخش */

  width:     var(--p-size);
  right:     var(--p-x);
  top:       var(--p-y);
  transform: rotate(var(--p-rotate));
}

/* ─── Page Heading ───────────────────────────────────────── */
.page-heading {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 400;
  color: var(--color-white);
  letter-spacing: 0.02em;
  text-align: center;
}

/* ─── Intro Text ─────────────────────────────────────────── */
.intro-text {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;
  color: var(--color-text-muted);
  line-height: 1.9;
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
}

/* ─── Service Item ───────────────────────────────────────── */
.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
}

.service-item__icon {
  width: clamp(220px, 8vw, 64px);
  height: auto;
}

.service-item__title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  font-weight: 400;
  color: var(--color-white);
  letter-spacing: 0.02em;
}

.service-item__body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;
  color: var(--color-text-muted);
  line-height: 1.9;
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
}

/* ============================================================
   OUR CLIENTS PAGE
   ============================================================ */

/* پترن بالا چپ — صفحه Our Clients */
.pattern--top-left {
  --p-size:   290px;   /* ← اندازه */
  --p-x:      -250px;  /* ← موقعیت افقی (منفی = بیشتر بیرون) */
  --p-y:      -310px;   /* ← موقعیت عمودی (منفی = بیشتر بالا) */
  --p-rotate: 315deg;    /* ← چرخش */

  width:  var(--p-size);
  left:   var(--p-x);
  top:    var(--p-y);
  transform: rotate(var(--p-rotate));
}

/* ─── Clients Grid ───────────────────────────────────────── */
.clients-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem 1.5rem;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
}

/* ─── Client Item ────────────────────────────────────────── */
.client-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.client-item__logo {
  width: 100%;
  max-width: 130px;
  height: 60px;
  object-fit: contain;
  filter: brightness(0) invert(1);   /* لوگوها سفید */
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.client-item:hover .client-item__logo {
  opacity: 1;
}

/* ─── Tooltip ────────────────────────────────────────────── */
.client-tooltip {
  position: absolute;
  z-index: 100;
  background: #ffffff;
  color: #333333;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.7;
  padding: 1rem 1.2rem;
  width: 260px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;

  /* به صورت پیش‌فرض پایین لوگو */
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
}

/* pointer بالای باکس — باکس پایین لوگو */
.client-tooltip::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  border: 10px solid transparent;
  border-top: 0;
  border-bottom: 10px solid #ffffff;
}

/* حالت برعکس: باکس بالای لوگو */
.client-tooltip.tooltip--above {
  top: auto;
  bottom: calc(100% + 14px);
}

.client-tooltip.tooltip--above::before {
  top: auto;
  bottom: -10px;
  border-bottom: 0;
  border-top: 10px solid #ffffff;
}

/* نمایش tooltip هنگام hover */
.client-item:hover .client-tooltip {
  opacity: 1;
}

/* ============================================================
   CONTACT US PAGE
   ============================================================ */

/* پترن راست بالا */
.pattern--top-right {
  --p-size:   220px;   /* ← اندازه */
  --p-x:      -130px;   /* ← موقعیت افقی */
  --p-y:      -80px;   /* ← موقعیت عمودی */
  --p-rotate: 0deg;   /* ← چرخش */

  width:  var(--p-size);
  right:  var(--p-x);
  top:    var(--p-y);
  transform: rotate(var(--p-rotate));
}

/* پترن راست پایین */
.pattern--bottom-right {
  --p-size:   220px;   /* ← اندازه */
  --p-x:      -150px;   /* ← موقعیت افقی */
  --p-y:      -130px;   /* ← موقعیت عمودی */
  --p-rotate: -135deg;  /* ← چرخش */

  width:  var(--p-size);
  right:  var(--p-x);
  bottom: var(--p-y);
  transform: rotate(var(--p-rotate));
}

/* ─── Email Button ───────────────────────────────────────── */
.email-btn {
  display: inline-block;
  padding: 1rem 3rem;
  border: 1.5px solid var(--color-accent);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
  width: 100%;
  max-width: 340px;
  text-align: center;
}

.email-btn:hover {
  background: var(--color-accent);
  color: var(--color-bg);
}

/* ─── Social Icons ───────────────────────────────────────── */
.social-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--color-accent);
  border-radius: 4px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.social-link:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

.social-link img {
  width: 22px;   /* ← سایز آیکون داخل باکس — اینجا تغییر بده */
  height: 22px;
  display: block;
}

/* ─── Contact Info ───────────────────────────────────────── */
.contact-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.8rem;
  width: 100%;
}

.contact-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.contact-block p + p {
  margin-top: 0.8rem;  /* ← فاصله بین دو آدرس — اینجا تغییر بده */
}

.contact-block__label {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--color-accent);
  letter-spacing: 0.04em;
}

.contact-block__text {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;
  color: var(--color-white);
  text-align: center;
  line-height: 1.7;
}

.contact-block__phones {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;
  color: var(--color-white);
}

.contact-block__phones span {
  opacity: 1;
}