.elementor-12414 .elementor-element.elementor-element-4c3b368{--display:flex;--min-height:450px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--margin-top:150px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-12414 .elementor-element.elementor-element-ffad5f3{--display:flex;}.elementor-widget-heading .elementor-heading-title{font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-12414 .elementor-element.elementor-element-0ca6ff4 > .elementor-widget-container{margin:200px 0px 0px 0px;}.elementor-12414 .elementor-element.elementor-element-0ca6ff4.elementor-element{--align-self:center;}.elementor-12414 .elementor-element.elementor-element-0ca6ff4 .elementor-heading-title{color:#333333;}.elementor-12414 .elementor-element.elementor-element-24fbeca{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-12414 .elementor-element.elementor-element-42188a1 > .elementor-widget-container{margin:200px 0px 0px 0px;}.elementor-12414 .elementor-element.elementor-element-42188a1.elementor-element{--align-self:center;}.elementor-12414 .elementor-element.elementor-element-42188a1 .elementor-heading-title{color:#333333;}.elementor-12414 .elementor-element.elementor-element-ba1550f{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-12414 .elementor-element.elementor-element-db55a98 > .elementor-widget-container{margin:200px 0px 0px 0px;}.elementor-12414 .elementor-element.elementor-element-db55a98.elementor-element{--align-self:center;}.elementor-12414 .elementor-element.elementor-element-db55a98 .elementor-heading-title{color:#333333;}.elementor-12414 .elementor-element.elementor-element-9132c77{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-12414 .elementor-element.elementor-element-a94beee > .elementor-widget-container{margin:200px 0px 0px 0px;}.elementor-12414 .elementor-element.elementor-element-a94beee.elementor-element{--align-self:center;}.elementor-12414 .elementor-element.elementor-element-a94beee .elementor-heading-title{color:#333333;}.elementor-12414 .elementor-element.elementor-element-264b2d0{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-12414 .elementor-element.elementor-element-feb83ed > .elementor-widget-container{margin:200px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-12414 .elementor-element.elementor-element-feb83ed.elementor-element{--align-self:center;}.elementor-12414 .elementor-element.elementor-element-feb83ed .elementor-heading-title{color:#333333;}.elementor-12414 .elementor-element.elementor-element-83200c6{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}@media(max-width:767px){.elementor-12414 .elementor-element.elementor-element-4c3b368{--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-12414 .elementor-element.elementor-element-83200c6{--margin-top:-500px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}}@media(min-width:768px){.elementor-12414 .elementor-element.elementor-element-4c3b368{--content-width:1000px;}}/* Start custom CSS for container, class: .elementor-element-ffad5f3 */.menu-col {
  position: relative;
  padding: 0 40px;
  white-space: nowrap;
}

/* خط سمت چپ برای همه ستون‌ها */
.menu-col::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;              /* ضخامت ثابت */
  height: 100%;
  background: #4680C1;
  clip-path: polygon(
    50% 0%,    /* نوک بالایی */
    100% 20%,  /* شروع نازک شدن بالاتر */
    100% 80%,  /* پایان نازک شدن پایین‌تر */
    50% 100%,  /* نوک پایینی */
    0% 80%,    /* پایان نازک شدن سمت چپ */
    0% 20%     /* شروع نازک شدن سمت چپ */
  );
}

/* حذف خط از ستون آخر */
.menu-col:last-child::before {
  content: none !important;
}

/* نسخه موبایل */
@media (max-width: 640px) {
  .menu-col {
    padding: 0 20px;       /* padding کمتر برای تناسب موبایل */
  }

  .menu-col::before {
    width: 5px;            /* ضخامت همان ۵px */
    clip-path: polygon(
      50% 0%,
      100% 25%,  /* در موبایل حتی بالاتر شروع به نازک شدن */
      100% 75%,  /* پایین‌تر تمام شود */
      50% 100%,
      0% 75%,
      0% 25%
    );
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4c3b368 */.elementor-12414 .elementor-element.elementor-element-4c3b368 {
  display: flex;
}

.elementor-12414 .elementor-element.elementor-element-4c3b368 .menu-col {
  flex: 1;
  position: relative;
  transition: flex 0.6s ease;
}

/* آیتم وسط */
.elementor-12414 .elementor-element.elementor-element-4c3b368 .menu-col.is-active {
  flex: 1.6;
}

/* هاور */
.elementor-12414 .elementor-element.elementor-element-4c3b368 .menu-col:hover {
  flex: 1.8;
}

/* وقتی روی یکی میری، بقیه جمع شن */
.elementor-12414 .elementor-element.elementor-element-4c3b368:hover .menu-col:not(:hover) {
  flex: 0.8;
}
.menu-col {
  transition: all 0.5s ease;
}.menu-col:hover {
  flex-grow: 2;
}
..elementor-12414 .elementor-element.elementor-element-4c3b368:hover .menu-col:not(:hover) {
  flex-grow: 1;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-1862517 */#menu-single-line{
  --line-color: #4680C1;
  --line-height: 5px;
  --line-gap: 6px;        /* فاصله عادی بین دو خط (نمایشی) */
  --line-gap-open: 15px;  /* فاصله باز شده هنگام هاور */
  --line-padding: 10%;
  display:flex;
  flex-direction:column;
  background:#fff;
}

/* آیتم‌ها */
.msl-item{
  position:relative;
  padding:28px 16px;
  text-align:center;
  font-weight:bold;
  cursor:pointer;
  color:#333;
  transition: transform .25s ease;
}

/* فقط یک خط بین آیتم‌ها: به صورت خط بالایی برای همه آیتم‌ها به جز اولین */
.msl-item:not(:first-child)::before{
  content:"";
  position:absolute;
  left:var(--line-padding);
  right:var(--line-padding);
  height:var(--line-height);
  background:var(--line-color);
  clip-path: polygon(
  0% 50%,
  14% 0%,
  86% 0%,
  100% 50%,
  86% 100%,
  14% 100%
);

  top:0; /* قرارگیری دقیق بالای آیتم */
  transform: translateY(calc(-1 * var(--line-gap) / 2));
  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s ease;
  will-change: transform, opacity;
  opacity:1;
}

@media (max-width: 640px) {
  #menu-single-line {
    --line-height: 3px;     /* باریک‌تر */
    --line-gap: 3px;
    --line-gap-open: 5px;   /* فاصله هاور کمتر */
  }

  .msl-item:not(:first-child)::before {
    height: var(--line-height);
  }

  /* وقتی هاور شد، ضخامت ثابت بمونه */
  .msl-item:hover:not(:first-child)::before,
  .msl-item:hover + .msl-item::before {
    height: var(--line-height); /* جلوگیری از ضخیم شدن */
  }
}


  /* خط بین آیتم‌ها در موبایل */
  .msl-item:not(:first-child)::before {
    height: var(--line-height); /* ضخامت جدید اعمال می‌شود */
  }
}


/* هنگام هاور: خط بالای آیتم فعلی بالاتر می‌رود و یک خطِ پایینی مجازی (برای جلوه باز شدن) هم نمایش داده می‌شود
   برای جلوگیری از خط اضافی از یک ::before واحد استفاده می‌کنیم و برای اثر پایینی از همان ::before آیتم بعدی استفاده خواهد شد. */

/* وقتی روی آیتم هاور است، خط بالای خودش بالا می‌رود */
.msl-item:hover:not(:first-child)::before{
  transform: translateY(calc(-1 * var(--line-gap-open)));
}

/* همچنین برای ایجاد احساس "دوخط باز شده" باید خط بالای آیتم بعدی پایین‌تر برود.
   این کار را با انتخابگر adjacent انجام می‌دهیم: آیتم:hover + .msl-item ::before پایین‌تر می‌آید */
.msl-item:hover + .msl-item::before{
  transform: translateY(calc(var(--line-gap-open)));
}

/* افکت متن */
.msl-item:hover{
  transform: translateY(-6px);
}

/* آیتم فعال */
.msl-item.active{
  background:#e8f0fb;
  transform: translateY(-6px);
}/* End custom CSS */