/* Start custom CSS for html, class: .elementor-element-0591e07 *//* ===== Main Menu Tweak ===== */
.axis-header .main-menu {
  display: flex;

  
  align-items: right;  /* وسط تراز شدن همه آیتم‌ها */
  justify-content: right;
  gap: 20px;            /* فاصله بین آیتم‌ها */
   
list-style: none;
height:120px;
}

.axis-header .main-menu > li > a {
  padding: 18px 10px;   /* یکسان برای همه */
  display: inline-block;
  line-height: normal;
  position: relative;
  transition: all 0.3s ease;
    color:#ffff;
    
}

/* زیرخط زرد هنگام هاور روی منوی اصلی */
.axis-header .main-menu > li > a::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: #ffc107;
  transition: width 0.3s ease;

}

.axis-header .main-menu > li:hover > a::after {
  width: 100%;
  color: #ffc107;
}

/* ===== Mega Menu ===== */
.axis-header .has-mega {
  position: relative;
  
  /* مهم برای اینکه زیرمنو نسبت به این آیتم باز شود */
}
.axis-header .main-menu > li.has-mega {
  position: relative; /* بسیار مهم */
}


.axis-header .mega-menu.axis-style,
.axis-header .axis-mega-menu {
position: absolute;
  top: calc(100% + 10px); /* فاصله کمی پایین‌تر از منوی محصولات */
  left:0;
  right: 0;
  width: 100vw;
         /* تمام عرض */
  display: none;
  background: #fff;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  border-top: 3px solid #ffc107;
  z-index: 999;
  min-height: 300px;
 
}

/* نمایش مگامنو هنگام هاور */
.axis-header .has-mega:hover > .axis-mega-menu,
.axis-header .has-mega:hover > .mega-menu.axis-style {
  display: flex;
}

/* ستون‌های داخل مگامنو */
.axis-menu-left {
  width: 260px;
  background: #f7f8f9;
  height: 200px;
  border-left: 1px solid #eee;
  padding: 5px 0;
}

.axis-vertical-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.axis-vertical-menu li {
  padding: 12px 25px;
  cursor: pointer;
  color: #333;
  font-weight: 500;
  border-right: 3px solid transparent;
  transition: all 0.3s ease;
}

.axis-vertical-menu li:hover,
.axis-vertical-menu li.active {
  background: #fff;
  border-right: 3px solid #ffc107;
  color: #000;
}

/* محتوای سمت راست */
.axis-menu-right {
  flex: 1;
  padding: 30px 40px;
  position: relative;
}

.axis-content {
  display: none;
  animation: fadeIn 0.3s ease;
}

.axis-content.active {
  display: block;
}

.axis-content h3 {
  font-size: 18px;
  margin-bottom: 15px;
  color: #333;
}

.axis-content ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
}

.axis-content ul li a {
  color: #333;
  text-decoration: none;
  transition: color 0.3s ease;
}

.axis-content ul li a:hover {
  color: #ffc107;
}

/* ===== انیمیشن ===== */
@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}/* End custom CSS */