/* 基础样式 */
body {
  font-family: "Open Sans", Arial, sans-serif;
}

h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

p {
  font-size: 1rem;
  margin-bottom: 1rem;
}

header {
  border-bottom: 1px solid #e0e0e0; /* 添加底部边框 */
  background-color: #9b9b9a; /* 初始深灰色背景 */
  height: 100px; /* 初始高度 */
  transition: background-color 0.3s ease, height 0.3s ease; /* 添加过渡效果 */
}

header.scrolled {
  background-color: #088ae1; /* 更深的灰色背景 */
  height: 90px; /* 移动端滚动后较低的高度 */
}

nav {
  height: 100%; /* 导航栏高度与头部一致 */
  background-color: #ffffff; /* 导航栏背景颜色与头部一致 */
}

#navbarNav {
  font-family: "Futura PT"; /* 设置字体 */
  font-weight: 600; /* 设置字体粗细 */
  color: #343a40; /* 黑色字体 */
}

.section-content {
  margin-top: 50px;
}

footer {
  background-color: #f8f9fa; /* 浅灰色背景 */
  text-align: center; /* 文本居中 */
  padding: 15px 0; /* 上下内边距 */
  margin-top: 20px; /* 上外边距 */
}

.img-fluid {
  width: auto; /* 默认宽度 */
  height: 80px; /* 高度自适应 */
}

.navbar-nav .nav-link {
  margin-right: 1rem; /* 右边距 */
  position: relative; /* 相对定位 */
  padding-bottom: 5px; /* 下内边距 */
  transition: all 0.3s ease; /* 添加过渡效果 */
}

.navbar-nav .nav-link:last-child {
  margin-right: 0; /* 最后一个链接无右边距 */
}

.navbar-nav .nav-link.active {
  color: #ffcc00; /* 激活状态下的字体颜色 */
}

/* 设置导航菜单展开时置顶显示 */
.navbar-collapse {
  position: absolute; /* 绝对定位 */
  top: 100%; /* 紧贴导航栏底部 */
  left: 0; /* 左对齐 */
  right: 0; /* 右对齐 */
  background-color: #f8f9fa; /* 背景色 */
  z-index: 1050; /* 层级 */
  padding: 1rem; /* 内边距 */
  border-top: 1px solid #dee2e6; /* 上边框 */
}

/* 避免导航菜单在桌面端使用绝对定位 */
@media (min-width: 992px) {
  .navbar-collapse {
    position: static; /* 静态定位 */
    background-color: transparent; /* 透明背景 */
    border: none; /* 无边框 */
    padding: 0; /* 无内边距 */
  }
}

.navbar-toggler {
  z-index: 1100; /* 层级 */
  transition: transform 0.3s ease; /* 添加过渡效果 */
}

/* 核心调整：使容器内容居中 */
.navbar > .container,
.navbar > .container-fluid,
.navbar > .container-lg,
.navbar > .container-md,
.navbar > .container-sm,
.navbar > .container-xl,
.navbar > .container-xxl {
  display: flex; /* 弹性布局 */
  flex-wrap: inherit; /* 继承弹性换行 */
  align-items: center; /* 垂直居中 */
  justify-content: space-between; /* 水平两端对齐 */
  font-family: "Futura PT"; /* 设置字体 */
}

/* 在大屏幕上，Logo和公司名称部分按默认的flex布局 */
#logo-name {
  justify-content: flex-start; /* 保证在大屏幕上它们靠左对齐 */
}

#logo-name {
  text-align: center; /* 如果你想让内容居中显示 */
}

#company-logo {
  margin-bottom: -8px; /* 根据需要调整这个值来增加或减少Logo与公司名称之间的空间 */
}

#company-name {
  margin-left: 10px; /* 减少左边距 */
  font-size: 1.2rem; /* 字体大小 */
  font-family: "Roboto", sans-serif;
}

/* 悬停效果：在导航链接下方显示粗横线 */
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
  content: ""; /* 伪元素内容为空 */
  position: absolute; /* 绝对定位 */
  bottom: -5px; /* 底部位置 */
  left: 0; /* 左对齐 */
  right: 0; /* 右对齐 */
  height: 3px; /* 高度 */
  background-color: #03486B; /* 背景颜色 */
  transition: opacity 0.3s ease; /* 添加过渡效果 */
  opacity: 1; /* 不透明度 */
}

.navbar-nav .nav-link::after {
  content: ""; /* 伪元素内容为空 */
  position: absolute; /* 绝对定位 */
  bottom: -5px; /* 底部位置 */
  left: 0; /* 左对齐 */
  right: 0; /* 右对齐 */
  height: 3px; /* 高度 */
  background-color: #03486B; /* 背景颜色 */
  opacity: 0; /* 不透明度 */
  transition: opacity 0.3s ease; /* 添加过渡效果 */
}

/* 按钮动画：旋转汉堡图标 */
.navbar-toggler.collapsed span {
  transition: transform 0.3s ease; /* 添加过渡效果 */
}

.navbar-toggler:not(.collapsed) span:nth-child(1) {
  transform: rotate(45deg); /* 旋转45度 */
  transform-origin: 7px 7px; /* 旋转中心 */
}

.navbar-toggler:not(.collapsed) span:nth-child(2) {
  opacity: 0; /* 完全透明 */
}

.navbar-toggler:not(.collapsed) span:nth-child(3) {
  transform: rotate(-45deg); /* 旋转-45度 */
  transform-origin: 7px 7px; /* 旋转中心 */
}

/* 章节样式 */
section {
  padding: 50px 0; /* 上下内边距 */
}

section.bg-light {
  background-color: #f8f9fa; /* 浅灰色背景 */
}

section h2 {
  font-size: 2rem; /* 字体大小 */
  margin-bottom: 1rem; /* 下外边距 */
}

section p {
  font-size: 1rem; /* 字体大小 */
  color: #333; /* 深灰色字体 */
}

/* 章节标题样式 */
.chapter-title {
  font-size: 2.5rem; /* 字体大小 */

  /* background-color: #f8f9fa; 浅灰色背景 */
  padding: 20px; /* 内边距 */
  margin-bottom: 30px; /* 下外边距 */
  border-left: 5px solid #03486B; /* 左侧蓝色边框 */
  border-radius: 5px; /* 圆角 */
}

/* 页脚 */
footer {
  background-color: #f8f9fa; /* 浅灰色背景 */
  text-align: center; /* 文本居中 */
  padding: 15px 0; /* 上下内边距 */
  margin-top: 20px; /* 上外边距 */
}

footer p {
  color: #6c757d; /* 较浅的灰色字体 */
}

.shadow-box {
  padding: 10px; /* 内边距 */
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0); /* 阴影 */
  transition: transform 0.5s ease; /* 添加过渡效果 */
}

.shadow-box:hover {
  transform: translateY(-10px); /* 向上移动 */
}

.section-content img {
  width: 100%;
  margin: 0 auto;
  display: block;
  border-radius: 20px;
}

.image-container {
  position: relative;
  width: 100%; /* 确保容器宽度 */
  height: 600px;
  overflow: hidden; /* 防止溢出 */
}

.image-1,
.image-2 {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 50%;
  max-height: 50%;
  object-fit: cover; /* 保持图片比例的同时填满容器 */
}

/* 设置image-2部分重叠 */
.image-2 {
  top: 30%; /* 调整这个值来控制重叠程度 */
  left: 30%; /* 调整这个值来控制重叠程度 */
  z-index: 1; /* image-2置于上方 */
}

/* 如果希望image-1置顶显示，则增加下面的样式 */
.image-1 {
  z-index: 2;
}

/* 默认样式 - 适用于桌面端 */
.row.section-content {
  display: flex;
}

.col-md-6.col-lg-6 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-container {
  position: relative;
  width: 100%;
  /* 确保容器有足够的高度来包含图片 */
  min-height: 300px; /* 根据需要调整这个值 */
  overflow: hidden;
}

.image-1, .image-2 {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 50%;
  max-height: 50%;
  object-fit: cover;
  border-radius: 20px;
}

.image-2 {
  top: 30%; /* 调整这个值来控制重叠程度 */
  left: 30%; /* 调整这个值来控制重叠程度 */
  z-index: 1; /* image-2置于上方 */
}

/* 国家标题的基础样式 */
.country-title {
  position: relative;
  padding: 20px;
  margin-top: 60px;
  text-align: center;
}

.flag-icon {
  width: 50px; /* 调整图标大小 */
  height: auto;
  margin-right: 10px; /* 图标与文本之间的间距 */
}



/* 自定义联系信息样式 */
/* 确保.contact-info下的直接子div在桌面端水平分布 */
.contact-info {
  display: flex;
  flex-direction: column; /* 默认垂直排列 */
  text-align: center;
  padding-left: 30%; 
  margin-bottom: 30px; 
  margin-top: 20px;
}

/* 单个信息块样式 */
.contact-info > div {
  display: flex;
  flex-direction: column; /* 子元素垂直排列 */
  align-items: center; /* 水平居中 */
  margin-bottom: 15px; /* 根据需要调整间距 */
}

.contact-info i {
  font-size: 3.5em;
  color: #03486B;
  margin-bottom: 10px; /* 调整图标与文字之间的间距 */
  transition: filter 0.3s ease;
}

.contact-info i:hover {
  color: #000;
}

#contact-form{
  margin-top: 80px;
}
/* 在桌面端时水平分布且三等分屏幕 */
@media (min-width: 768px) { 
  .contact-info {
    flex-direction: row; /* 水平排列 */
    justify-content: space-between; /* 等宽分布 */
    padding-left: 0; /* 移动端特有样式取消 */
  }

  .contact-info > div {
    flex: 1; /* 让每个子div等宽 */
    margin-bottom: 0; /* 取消底部外边距 */
    justify-content: center; /* 水平居中 */
  }
}

/* 移动端特殊样式 */
@media (max-width: 768px) {
  header {
    height: 70px; /* 移动端初始高度 */
  }

  header.scrolled {
    height: 60px; /* 移动端滚动后较低的高度 */
  }

  /* Logo和公司名称居中 */
  #logo-name {
    justify-content: center; /* 水平居中 */
    width: 100%; /* 宽度100% */
    align-items: center; /* 垂直居中 */
  }

  /* 调整 logo 图片尺寸 */
  .img-fluid {
    height: 40px; /* 减小高度 */
    width: auto; /* 宽度自适应 */
  }

  #company-name {
    margin-left: 10px; /* 减少左边距 */
    font-size: 0.8rem; /* 字体大小 */
  }

  nav {
    height: 100%; /* 导航栏高度与头部一致 */
  }

  /* 导航菜单按钮保持左对齐 */
  .navbar-toggler {
    position: absolute; /* 绝对定位 */
    left: 10px; /* 左边距 */
  }

  /* 将语言切换按钮移动到右侧 */
  .language-dropdown {
    margin-left: auto; /* 推到最右边 */
  }

  /* 调整导航链接的垂直对齐 */
  .navbar-nav .nav-link {
    padding-top: 10px; /* 上内边距 */
    padding-bottom: 10px; /* 下内边距 */
  }

  .image-container {
    height: auto; /* 自动调整高度 */
    overflow: visible; /* 取消溢出隐藏 */
  }

  .image-1,
  .image-2 {
    position: static; /* 取消绝对定位，使图片按文档流排列 */
    max-width: 100%; /* 图片宽度设置为100% */
    max-height: none; /* 不限制最大高度 */
    height: auto; /* 高度根据内容自动调整 */
    margin-bottom: 10px; /* 根据需要添加间距 */
  }

  /* 移除重叠相关样式 */
  .image-2 {
    top: auto;
    left: auto;
    z-index: auto;
  }

  /* 确保每列占据全宽，并且移除flex布局 */
  .row.section-content {
    flex-direction: column;
  }

  /* 让每个col占据全宽 */
  .col-md-6.col-lg-6 {
    width: 100%;
    display: block; /* 取消flex布局 */
  }

  /* 为图片部分指定更高优先级 */
  .image-section {
    order: 1;
  }

  /* 文本部分跟随图片之后 */
  .text-section {
    order: 2;
  }

  .contact-info {

    padding-left: 10px; /* 左内边距20% */

  }

}