.elementor-21831 .elementor-element.elementor-element-1e9d102{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:170px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-21831 .elementor-element.elementor-element-1e9d102.e-con{--flex-grow:0;--flex-shrink:0;}body.elementor-page-21831:not(.elementor-motion-effects-element-type-background), body.elementor-page-21831 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-accent );background-position:top right;background-repeat:no-repeat;background-size:initial;}@media(min-width:769px){.elementor-21831 .elementor-element.elementor-element-1e9d102{--width:92.774%;}}/* Start custom CSS for html, class: .elementor-element-0aca4cc *//* ============================================================
   RAYA HOLDING — CONTACT PAGE  ·  v2
   Light theme · RTL · #d5d5d5 gradient ground
   Balance: ~60% neutral grey / 20% champagne gold / 20% violet
   ============================================================ */
html { scroll-behavior: smooth; }
body { margin: 0; background: #f7f7f7; font-family: "Vazirmatn", sans-serif; direction: rtl; color: #1c1c1c; }
* { box-sizing: border-box; }
::selection { background: #d4b038; color: #1c1c1c; }
a { color: #642d88; text-decoration: none; }
a:hover { color: #a9822a; }

/* انیمیشن و پایه */
@keyframes rayaRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.rise { animation: rayaRise .9s cubic-bezier(.22,.61,.36,1) both; }
.navlink { position: relative; }
.navlink::after { content: ''; position: absolute; inset-inline-end: 0; bottom: -7px; width: 0; height: 1px; background: #d4b038; transition: width .3s cubic-bezier(.22,.61,.36,1); }
.navlink:hover::after { width: 100%; }

/* فرم‌ها */
.fld { width: 100%; font-family: inherit; font-size: 15px; color: #1c1c1c; background: #ffffff; border: 1px solid #d5d5d5; border-radius: 8px; padding: 15px 16px; transition: border-color .24s ease, box-shadow .24s ease; }
.fld::placeholder { color: #a9a9a9; }
.fld:hover:not(:focus) { border-color: #a9a9a9; }
.fld:focus { outline: none; border-color: #642d88; box-shadow: 0 0 0 3px rgba(100,45,136,.14); }
select.fld { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #a9a9a9 50%), linear-gradient(135deg, #a9a9a9 50%, transparent 50%); background-position: 20px calc(50% - 2px), 25px calc(50% - 2px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }

/* دکمه‌ها و ردیف‌ها */
.infoRow { transition: background .24s ease, padding-inline .24s ease; }
.infoRow:hover { background: #ffffff; box-shadow: inset 2px 0 0 #642d88; }
.sendBtn { transition: transform .26s cubic-bezier(.22,.61,.36,1), box-shadow .26s ease, background .26s ease; }
.sendBtn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(100,45,136,.30); }
.mapWrap .mapPh { filter: grayscale(1) contrast(.96); transition: filter .7s cubic-bezier(.22,.61,.36,1); }
.mapWrap:hover .mapPh { filter: none; }
.officeCard { transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .3s ease; }
.officeCard:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(28,28,28,.10); border-color: rgba(100,45,136,.45); }
header a[href="#form"].c-cta:hover { background: #1c1c1c; color: #ffffff; border-color: #1c1c1c; }
.socialBtn:hover { border-color: #d4b038; }

/* ── JS-toggled visibility ── */
.c-drawer[hidden]   { display: none !important; }
.ry-sent[hidden]    { display: none !important; }
#ry-form[hidden]    { display: none !important; }


/* ============================================================
   ── THE ALI QAPU VIDEO FRAME (PRECISE MASK MAPPING) ──
   ============================================================ */

/* ۱. نگهدارنده کل تصویر */
.aq-master-container {
  position: relative;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  background: #1c1c1c;
  border: 1px solid rgba(212,176,56,.42);
  box-shadow: 0 1px 2px rgba(28,28,28,.05), 0 16px 38px rgba(28,28,28,.10);
  transition: box-shadow .34s cubic-bezier(.22,.61,.36,1), border-color .34s ease;
}

.aq-master-container:hover {
  border-color: #d4b038;
  box-shadow: 0 1px 2px rgba(28,28,28,.05), 0 22px 52px rgba(212,176,56,.20);
}

/* ۲. تصویر پس‌زمینه قاب عالی‌قاپو */
.aq-bg-image {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none; /* جلوگیری از کلیک روی عکس */
  user-select: none;
  position: relative;
  z-index: 1;
}

/* ۳. ماسک دقیق که روی کادر مشکیِ تصویر منطبق می‌شود */
.aq-precise-mask {
  position: absolute;
  /* مختصات درصدی برای تطابق کامل با کادر تصویر 1500x844 */
  left: 34.667%;
  top: 41.232%;
  width: 30.400%;
  height: 37.441%;
  border-radius: 4.61% / 6.65%;
  overflow: hidden; /* بریدن لبه‌های ویدیو دقیقاً مماس با قاب */
  z-index: 2;
  background: #000;
  box-shadow: inset 0 0 16px rgba(0,0,0,0.8), inset 0 0 2px rgba(255,255,255,0.15);
}

/* ۴. استایل خود ویدیو */
.aq-inner-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity .5s cubic-bezier(.22,.61,.36,1);
}

.aq-inner-video.is-live {
  opacity: 1;
}

/* ۵. کاور روی ویدیو با هاله بنفش/دودی سازمان */
.vfr-cover {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(100,45,136,.18), rgba(28,28,28,.75));
  z-index: 3;
  transition: opacity .44s cubic-bezier(.22,.61,.36,1), visibility .44s;
  cursor: pointer;
}

.vfr-cover.is-gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ۶. انیمیشن تپش و طراحی دکمه پخش (Glassmorphism) */
@keyframes goldPulse {
  0% { box-shadow: 0 0 0 0 rgba(212, 176, 56, 0.5); }
  70% { box-shadow: 0 0 0 16px rgba(212, 176, 56, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212, 176, 56, 0); }
}

.vfr-play {
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: rgba(28, 28, 28, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(212, 176, 56, 0.9);
  color: #d4b038;
  animation: goldPulse 2.5s infinite;
  transition: all .32s cubic-bezier(.22,.61,.36,1);
}

.vfr-play:hover {
  background: #d4b038;
  color: #1c1c1c;
  transform: scale(1.1);
  animation: none; /* توقف انیمیشن هنگام هاور */
  box-shadow: 0 8px 22px rgba(212,176,56,.50);
}

.vfr-play:focus-visible { outline: 2px solid #d4b038; outline-offset: 3px; }

/* ۷. متادیتای پایین ویدیو */
.vfr-meta {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 30px 18px 15px;
  background: linear-gradient(0deg, rgba(28,28,28,0.85) 0%, transparent 100%);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

.meta-title {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  color: #f7f7f7;
  display: flex;
  align-items: center;
  gap: 8px;
}

.meta-title::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  background: #642d88; /* نقطه بنفش اختصاصی برند */
  border-radius: 50%;
}


/* ============================================================
   ── RESPONSIVE MEDIA QUERIES ──
   ============================================================ */

/* تبلت و تغییرات عمومی */
@media (max-width: 1024px) {
  .c-vhead { grid-template-columns: 1fr !important; gap: 22px !important; align-items: start !important; }
  .c-split { grid-template-columns: 1fr !important; gap: 52px !important; }
  .c-sticky { position: static !important; }
  .c-offices { grid-template-columns: 1fr 1fr !important; }
  .c-footer { grid-template-columns: 1fr 1fr !important; gap: 40px !important; }
  nav.c-nav { display: none !important; }
  .c-burger { display: flex !important; }
  .c-cta { display: none !important; }
}

/* موبایل‌های افقی و آیپدهای کوچک: حذف فریم و نمایش تمام عرض ویدیو */
@media (max-width: 860px) {
  .aq-master-container { background: #1c1c1c; border: none; }
  .aq-bg-image { display: none; } /* عکس پس‌زمینه در موبایل مخفی می‌شود */
  
  .aq-precise-mask { 
    position: relative; 
    inset: auto; 
    width: 100%; 
    left: 0; 
    top: 0; 
    height: auto; 
    border-radius: 0; 
    box-shadow: none; 
  }
  
  .aq-inner-video { 
    width: 100%; 
    aspect-ratio: 16/10; 
    height: auto; 
    opacity: 1; 
  }
}

/* موبایل‌های عمودی */
@media (max-width: 767px) {
  section, footer, header > div { padding-inline: 22px !important; }
  .c-h1 { font-size: 38px !important; }
  .c-pair { grid-template-columns: 1fr !important; }
  .c-form { padding: 28px !important; }
  .c-offices, .c-footer { grid-template-columns: 1fr !important; }
  .c-facts { flex-direction: column !important; gap: 24px !important; align-items: flex-start !important; }
  .c-facts .sep { display: none !important; }
  
  .vfr-meta { inset-inline: 16px !important; bottom: 16px !important; }
  .vfr-play { width: 56px; height: 56px; }
}

@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* تنظیمات منوی کشویی */
.c-burger { display: none; }
.c-burger span { display: block; width: 26px; height: 1px; background: #1c1c1c; transition: transform .3s cubic-bezier(.22,.61,.36,1), opacity .2s ease; }
.c-burger[data-open="1"] span:first-child { transform: translateY(4px) rotate(45deg); }
.c-burger[data-open="1"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.c-drawer a { transition: color .24s ease, padding-inline-end .24s ease; }
.c-drawer a:hover { padding-inline-end: 10px; }

/* ============================================================
   ── ALI-QAPU FRAME · COMPACT SIDE-BY-SIDE + PRECISION MASK ──
   قاب کوچک شده و در کنار سربرگ متنی قرار گرفته است.
   ماسک ویدیو دقیقاً روی بازشوی مرکزی منطبق است، شامل
   کنج‌های تزئینی (پاباریک/کنسول) در دو گوشهٔ بالا.
   ============================================================ */

.intro-minimal-section {
  padding: 0 40px 120px;
  background: #f7f7f7;
}

/* ۱. چیدمان دو ستونی: متن در راست، قاب معماری در چپ */
.intro-container {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 620px);
  gap: 56px;
  align-items: center;
}

.intro-text-col {
  min-width: 0;
}

.intro-header {
  margin-bottom: 26px;
}

.intro-title-main {
  margin: 0 0 16px;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.35;
  color: #1c1c1c;
}

.intro-desc-main {
  margin: 0;
  font-size: 16px;
  line-height: 1.95;
  font-weight: 300;
  color: #6b6b6b;
  max-width: 44ch;
}

/* ۲. بدنه قاب — به‌مراتب کوچک‌تر از قبل
   نکته: background-size روی 100% 100% است تا نگاشت تصویر
   کاملاً دقیق بماند و ماسک هرگز از جای خود در نرود. */
.raya-architectural-frame {
  position: relative;
  width: 100%;
  max-width: 620px;
  aspect-ratio: 1672 / 941;   /* نسبت دقیق تصویر اصلی 1672×941 */
  margin: 0;

  background-image: url('https://raya-city.ir/wp-content/uploads/2026/08/ali-qapu-frame.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 14px;
  overflow: hidden;
}

/* ۳. ماسک دقیق ویدیو
   کادر زیر = جعبهٔ محیطی بازشوی مرکزی روی تصویر 1672×941
   (x: 559→1108 ، y: 373→702) با ۲ پیکسل نشتی تا درز سفید نیفتد.
   سپس clip-path شکل واقعی بازشو را می‌برد: لبهٔ افقی تیرک در بالا،
   دو کنسول تزئینی در گوشه‌های بالا، و ستون‌های کمی مورب در طرفین. */
.raya-video-mask {
  position: absolute;
  left: 33.433%;
  top: 39.639%;
  width: 32.835%;
  height: 34.963%;

  z-index: 2;
  overflow: hidden;
  background: #0d0d12;

  -webkit-clip-path: polygon(
    7.83% 0.00%,   92.53% 0.00%,   92.53% 2.74%,   92.90% 3.34%,
    95.26% 3.65%,  95.63% 5.78%,   95.63% 9.42%,   97.63% 11.25%,
    98.18% 13.07%, 98.18% 16.41%, 100.00% 21.88%,  99.45% 100.00%,
     0.36% 100.00%, 0.00% 37.99%,  0.18% 21.58%,   1.28% 19.15%,
     1.28% 17.63%,  1.82% 16.72%,  1.82% 14.59%,   2.37% 11.85%,
     3.46% 10.94%,  3.83% 10.03%,  4.55% 9.73%,    4.55% 6.08%,
     4.92% 3.95%,   7.47% 3.34%,   7.83% 2.74%
  );
  clip-path: polygon(
    7.83% 0.00%,   92.53% 0.00%,   92.53% 2.74%,   92.90% 3.34%,
    95.26% 3.65%,  95.63% 5.78%,   95.63% 9.42%,   97.63% 11.25%,
    98.18% 13.07%, 98.18% 16.41%, 100.00% 21.88%,  99.45% 100.00%,
     0.36% 100.00%, 0.00% 37.99%,  0.18% 21.58%,   1.28% 19.15%,
     1.28% 17.63%,  1.82% 16.72%,  1.82% 14.59%,   2.37% 11.85%,
     3.46% 10.94%,  3.83% 10.03%,  4.55% 9.73%,    4.55% 6.08%,
     4.92% 3.95%,   7.47% 3.34%,   7.83% 2.74%
  );
}

.raya-inner-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity .6s ease;
}

.raya-inner-video.is-live { opacity: 1; }

/* سایهٔ داخلی روی همان شکل بریده‌شده، برای نشستن ویدیو در عمق بازشو */
.raya-video-mask::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.22), inset 0 5px 12px rgba(0,0,0,.28);
}

/* ۴. کارت متنی — از حالت شناور روی قاب خارج و زیر سربرگ نشسته است */
.raya-floating-card {
  position: static;
  transform: none;
  width: 100%;
  max-width: 46ch;
  margin: 0;
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 26px 26px 28px;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(28,28,28,.05), inset 0 0 0 1px rgba(28,28,28,.07);
  direction: rtl;
  text-align: right;
}

.raya-floating-card .card-eyebrow {
  font-size: 13px;
  font-weight: 600;
  color: #d4b038;
  margin-bottom: 10px;
}

.raya-floating-card .card-title {
  font-size: 20px;
  font-weight: 700;
  color: #642d88;
  margin: 0 0 12px 0;
  line-height: 1.45;
}

.raya-floating-card .card-desc {
  font-size: 15px;
  line-height: 1.85;
  font-weight: 400;
  color: #1c1c1c;
  margin: 0;
}

/* ۵. رسپانسیو */
@media (max-width: 1180px) {
  .intro-container { grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: 40px; }
}

@media (max-width: 900px) {
  .intro-container { grid-template-columns: 1fr; gap: 36px; }
  .raya-architectural-frame { max-width: 560px; margin-inline: auto; }
  .raya-floating-card { max-width: none; }
}

@media (max-width: 767px) {
  .intro-minimal-section { padding: 0 22px 84px; }
  .intro-title-main { font-size: 27px; }
  .raya-architectural-frame { max-width: 100%; }
}/* End custom CSS */