/* 基础样式重置与通用样式 */
.nav-main li a, .nav-content, .lang-btn, #menuBtn, #searchBtn {
  color: #ffffff !important;
  text-shadow: 0 0 0 transparent !important;
  -webkit-text-stroke-width: 0 !important;
  -webkit-text-stroke-color: transparent !important;
  font-smooth: never !important;
  -webkit-font-smoothing: none !important;
  text-rendering: optimizeSpeed !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
}

.nav-reset {
  margin: 0; padding: 0; box-sizing: border-box; list-style: none; text-decoration: none;
}

/* 顶部栏样式 */
.top-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 999;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 5%; border-bottom: 1px solid #eee;
  background: #fff; height: 60px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.logo {
  display: flex; align-items: center; text-decoration: none;
  font-size: 0 !important; color: transparent !important;
}
.logo img { height: 43px; width: auto; display: block !important; }
.logo-text { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; overflow: hidden !important; }

.search-box { display: flex; align-items: center; border: 1px solid #ddd; border-radius: 4px; }
.search-box input { border: none; padding: 8px 12px; width: 280px; outline: none; }
.search-box button { background: #00a650; color: #fff; border: none; padding: 8px 16px; cursor: pointer; }

/* 搜索按钮 hover 仅文字变桔黄色，背景不变 */
.search-box button:hover,
#searchBtn:hover {
  background: #00a650 !important;
  color: #ff6000 !important;
}

/* 导航栏核心样式 */
nav { position: fixed; top: 60px; left: 0; right: 0; z-index: 998; background: #00a650; height: 48px; overflow: hidden; transition: max-height 0.3s ease; margin: 0; padding: 0; }
.nav-wrap { padding: 0 5%; display: flex; align-items: center; height: 48px; width: 100%; position: relative; }
.nav-main { display: flex; list-style: none; height: 100%; margin: 0; padding: 0; position: absolute; left: 5%; top: 0; }

/* 导航按钮样式 - hover文字变橙 + 下划线动画 */
.nav-main li a {
  display: inline-flex; align-items: center; justify-content: center;
  height: 100%; padding: 0 18px; color: #fff;
  text-decoration: none; font-weight: bold; font-size: 15px;
  letter-spacing: 0.5px; transition: all 0.2s ease;
  position: relative; line-height: 1;
}
.nav-main li a:hover {
  background: #00a650 !important;
  color: #ff6000 !important; /* 文字变橙色 */
}
/* 下划线动画 */
.nav-main li a::after {
  content: ''; position: absolute; left: 50%; bottom: 12px;
  width: 0; height: 2px; background: #ff6000;
  transition: all 0.3s ease; transform: translateX(-50%);
}
.nav-main li a:hover::after { width: 70%; }

/* 语言按钮样式 - hover文字变橙 + 无下划线动画 */
.lang-group { display: flex; gap: 6px; position: absolute; right: 5%; top: 50%; transform: translateY(-50%); }
.lang-btn {
  height: 36px; background: none; border: none; color: #fff;
  padding: 0 10px; cursor: pointer; font-weight: bold; font-size: 14px;
  border-radius: 4px; transition: all 0.2s ease;
  text-decoration: none;
  position: relative;
}
.lang-btn:hover {
  background: #00a650 !important;
  color: #ff6000 !important;
}
.lang-btn::after {
  display: none !important;
}

/* 移动端菜单按钮 */
#menuBtn { display: none; position: absolute; top: 0; right: 15px; width: 44px; height: 48px; background: transparent; border: none; color: #fff; font-size: 24px; z-index: 9999; }
#menuBtn:hover{
  color:#ff6000 !important;
}

/* 阿拉伯语 */
[lang="ar"] .nav-main { left: auto; right: 5%; flex-direction: row-reverse; }
[lang="ar"] .lang-group { right: auto; left: 5%; }
[lang="ar"] .top-bar { flex-direction: row-reverse; }
[lang="ar"] .search-box { flex-direction: row-reverse; }
[lang="ar"] #menuBtn { right: auto; left: 15px; }

/* 响应式适配 */
@media (max-width:768px) {
  .search-box { display: none !important; }
  .logo img { height: 45px !important; }
  nav { max-height: 48px; height: auto; }
  nav.open { max-height: 500px; }
  #menuBtn { display: block !important; }
  .nav-wrap { flex-direction: column; height: auto; padding-top: 0; }
  .nav-main { position: static; width: 100%; flex-direction: column; height: auto; }

  /* 唯一正确修改：手机默认隐藏导航和语言 */
  .nav-main, .lang-group {
    opacity: 0;
    visibility: hidden;
  }
  nav.open .nav-main,
  nav.open .lang-group {
    opacity: 1;
    visibility: visible;
  }

  .nav-main li { width: 100%; border-bottom: 1px solid rgba(255,255,255,0.2); height: 48px; line-height: 48px; }
  .nav-main li:last-child { border-bottom: none !important; }

  .nav-main::after {
    content: ''; display: block; width: 100%; height: 1px; background: rgba(255,255,255,0.2);
  }

  .nav-main li a { padding: 0; width: 100%; height: 48px; }
  
  .lang-group {
    position: static; margin: 25px 0 !important; width: 100%; justify-content: center;
  }
}
@media (max-width:480px) { .logo img { height: 40px !important; } }

body { padding-top: 108px; }
[lang="ar"] { direction: rtl; text-align: right; }

/* 仅修复：阿语手机模式导航按钮竖排排列（不改动原有任何代码） */
@media (max-width:768px) {
  html[lang="ar"] nav .nav-wrap {
    flex-direction: column !important;
  }
  html[lang="ar"] nav .nav-main {
    flex-direction: column !important;
    right: auto !important;
    left: auto !important;
    width: 100% !important;
  }
}
/* 最终安全版：手机语言按钮位置固定，不往上挤 */
@media (max-width:768px) {
  .lang-group {
    margin: 20px 0 !important;
    transform: unset !important;
    left: auto !important;
    right: auto !important;
    position: static !important;
  }
}
/* 阿语手机菜单：关闭按钮强制固定在右侧（不改动原有代码） */
@media (max-width:768px) {
  html[lang="ar"] #menuBtn {
    right: 15px !important;
    left: auto !important;
  }
}
/* 手机模式：仅缩小第1个 + 第4个服务框上下空白（不改动原有代码） */
@media (max-width:768px) {
  /* 第一个服务框 顶部间距变小 */
  .service-item:nth-child(1) {
    margin-top: -10px !important;
  }
  /* 第四个服务框 底部间距变小 */
  .service-item:nth-child(4) {
    margin-bottom: -10px !important;
  }
}
/* 手机菜单按钮：强制永久白色，不变色 */
@media (max-width:768px) {
  #menuBtn,
  #menuBtn:hover {
    color: #ffffff !important;
  }
}