html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-content {
  flex: 1;
}

.top a img {
  max-height: 90px;
  /* 调整这个值控制图片高度 */
  width: auto;
  /* 保持宽高比 */
}

/* -----导航栏---- */
.navbar-default {
  background-color: #81b66e;
  border: 0px;
  margin-bottom: 0;
  /* 移除导航栏底部的外边距 */
}

.navbar-default .navbar-nav .active a,
.navbar-default .navbar-nav .active a:hover,
.navbar-default .navbar-nav .active a:focus {
  background-color: #2E8B57;
  color: #f5f5f5;
}

.navbar-default .navbar-nav li a:hover {
  background-color: #2E8B57;
  color: #f5f5f5;
}

.navbar-default .navbar-nav li.open a.on {
  background-color: #2E8B57;
  color: #f5f5f5;
}

.dropdown-menu {
  background-color: #f5f5f5;
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;
  width: 100%;
  min-width: 100%;
  left: 0px;
  right: 0px;
  box-sizing: border-box;
}

.dropdown-menu li a {
  padding-top: 10px;
  padding-bottom: 10px;
  display: block;
  /* 使链接填满整个宽度 */
}

.dropdown-menu li a {
  transition: background-color 0.3s ease;
}

.nav-top {
  width: 20%;
  text-align: center;
  position: relative;
  /* 关键：为下拉菜单提供定位上下文 */
}

#currentDateTime div {
  line-height: 2.3;
  /* 增加行高，使两行之间有适当间距 */
  text-align: left;
  margin-bottom: 0px;
}

#currentDateTime .glyphicon-calendar,
#currentDateTime .glyphicon-time {
  margin-right: 5px;
}


/*-------------尾部版权------------*/
.web-footer {
  background-color: #f5f5f5;
  color: #333;
  border-top: 1px solid #eaeaea;
  padding: 10px 0px;
  text-align: center;
}

.web-footer a {
  color: #555;
  text-decoration: none;
}

.web-footer a:hover {
  color: #2E8B57;
  text-decoration: none;
}

.qrimg {
  max-width: 120px;
  /* 最大宽度 */
  max-height: 120px;
  /* 最大高度 */
  width: auto;
  /* 宽度自适应 */
  height: auto;
  /* 高度自适应 */
}

/* ==================== 轮播样式（优化版） ==================== */
#myCarousel {
  height: 550px;
  /* 设置轮播容器高度 */
  overflow: hidden;
  /* 隐藏超出部分 */
  margin: 0px;
  position: relative;
  /* 改为position定位 */
}

#myCarousel .carousel-inner {
  height: 100%;
  width: 100%;
}

#myCarousel .item {
  height: 100%;
  width: 100%;
  padding: 0;
}

#myCarousel .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 保持比例覆盖整个容器 */
  object-position: center center;
  /* 图片居中显示 */
  display: block;
  margin: 0px;
  /* 提高图片渲染质量 */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  /* 防止图片模糊 */
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* 轮播图渐进式加载动画 */
#myCarousel .item img {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0.8; }
  to { opacity: 1; }
}

/* 在平板屏幕上调整高度 */
@media (max-width: 1200px) {
  #myCarousel {
    height: 480px;
  }
}

/* 可选：调整轮播指示器和控制按钮的位置 */
.carousel-indicators {
  bottom: 20px;
}

.carousel-control {
  width: 5%;
}

/* 移除幻灯片容器的左右内边距 */
.container-fluid {
  padding-left: 0;
  padding-right: 0;
}

/* 确保轮播项目没有内边距 */
#myCarousel .item {
  padding: 0;
}

/* 幻灯片文字高度 */
.carousel-caption {
  margin-bottom: 100px;
}

/* 响应式调整 */
@media (max-width: 768px) {

  .process-item,
  .history-item,
  .cert-item {
    margin-bottom: 20px;
    height: auto;
  }

  .product-image {
    margin-bottom: 20px;
  }

  .section {
    padding: 40px 0;
  }

  .history-item,
  .process-item {
    padding: 15px;
  }

  /* 手机端轮播图高度调整 */
  #myCarousel {
    height: 280px !important;
  }

  /* 手机端轮播指示器位置调整 */
  .carousel-indicators {
    bottom: 10px !important;
  }

  /* 手机端轮播文字调整 */
  .carousel-caption {
    margin-bottom: 60px !important;
  }

  .carousel-caption h3 {
    font-size: 20px !important;
    margin-bottom: 8px !important;
  }

  .carousel-caption p {
    font-size: 14px !important;
    margin-bottom: 0 !important;
  }

  /* 手机端轮播左右控制按钮 */
  .carousel-control {
    width: 15% !important;
    padding-top: 30% !important;
  }

  .carousel-control .glyphicon-chevron-left,
  .carousel-control .glyphicon-chevron-right {
    font-size: 20px !important;
  }
}

/* 超小屏幕（手机）进一步调整 */
@media (max-width: 480px) {
  #myCarousel {
    height: 200px !important;
  }

  .carousel-caption {
    margin-bottom: 40px !important;
  }

  .carousel-caption h3 {
    font-size: 16px !important;
    margin-bottom: 5px !important;
  }

  .carousel-caption p {
    font-size: 12px !important;
  }

  .section {
    padding: 30px 0;
  }

  .section h2 {
    font-size: 22px !important;
    margin-bottom: 20px !important;
  }

  .section h3 {
    font-size: 18px !important;
  }
}

/* 平板端（768px - 991px）适配 */
@media (min-width: 768px) and (max-width: 991px) {
  #myCarousel {
    height: 400px !important;
  }

  .carousel-caption h3 {
    font-size: 28px !important;
  }

  .carousel-caption p {
    font-size: 16px !important;
  }
}

/* 视频容器样式 */
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9的宽高比 */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  margin-bottom: 30px;
}

.video-container iframe,
.video-container object,
.video-container embed,
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 图片悬停效果 */
.process-image img,
.tea-image img,
.tasting-image img,
.cert-img {
  transition: transform 0.3s ease;
}

.process-image img:hover,
.tea-image img:hover,
.tasting-image img:hover,
.cert-img:hover {
  transform: scale(1.05);
}

/* 背景色交替 */
.bg-light {
  background-color: #f8f9fa;
}

/* 内容区块间距 */
.section {
  padding: 60px 0;
}

/* 标题样式 */
.section h2 {
  color: #2E8B57;
  margin-bottom: 30px;
  font-weight: bold;
}

/* 图片说明文字 */
.image-caption,
.video-caption {
  font-size: 14px;
  color: #666;
  margin-top: 10px;
  font-style: italic;
  text-align: center;
}

/* 认证图片样式 */
.certification-images {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 30px;
}

.cert-img {
  max-width: 150px;
  height: auto;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}