/* 新的颜色定义 */
.bg-blue {
  background-color: #0069b1;
}

.text-blue {
  color: #0069b1;
}

.bg-new-green {
  background-color: #90c31f;
}

.text-new-green {
  color: #90c31f;
}

/* 奶油色背景 */
.bg-cream {
  background-color: #fefcf7;
}

/* 悬停效果 */
.hover\:bg-blue:hover {
  background-color: #005a9e;
}

.hover\:text-blue:hover {
  color: #005a9e;
}

.hover\:bg-new-green:hover {
  background-color: #80b01c;
}

/* 边框颜色 */
.border-blue {
  border-color: #0069b1;
}

.border-new-green {
  border-color: #90c31f;
}

/* 半透明效果 */
.bg-blue\/10 {
  background-color: rgba(0, 105, 177, 0.1);
}

.bg-blue\/5 {
  background-color: rgba(0, 105, 177, 0.05);
}

/* 按钮发光效果 */
.shadow-glow {
  box-shadow: 0 0 20px rgba(0, 105, 177, 0.5);
}

/* 渐入效果的基础样式 */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* 激活渐入效果的样式 */
.fade-in.active {
  opacity: 1;
  transform: translateY(0);
}

/* 为不同部分添加不同的延迟，创建层次感 */
#hero {
  transition-delay: 0.1s;
}

#about {
  transition-delay: 0.2s;
}

#products {
  transition-delay: 0.3s;
}

#process {
  transition-delay: 0.4s;
}

#blog {
  transition-delay: 0.5s;
}

#honors {
  transition-delay: 0.6s;
}

/* 为时间线项目添加交错动画效果 */
.scroll-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* 为时间线项目添加交错延迟 */
.scroll-reveal:nth-child(1) {
  transition-delay: 0.1s;
}

.scroll-reveal:nth-child(2) {
  transition-delay: 0.2s;
}

.scroll-reveal:nth-child(3) {
  transition-delay: 0.3s;
}

.scroll-reveal:nth-child(4) {
  transition-delay: 0.4s;
}

.scroll-reveal:nth-child(5) {
  transition-delay: 0.5s;
}

/* 美化h1标签 */
h1 {
  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

/* 响应式h1字体大小 */
h1.text-5xl {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
}

h1.text-6xl {
  font-size: clamp(3rem, 6vw, 4rem);
}

h1.text-7xl {
  font-size: clamp(3.5rem, 7vw, 4.5rem);
}

/* 美化p标签 */
p {
  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 400;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  letter-spacing: 0.02em;
  transition: all 0.3s ease;
  text-indent: 2em;
}

/* 取消首行缩进 */
.no-indent {
  text-indent: 0;
}

/* 响应式p字体大小 */
p.text-lg {
  font-size: clamp(1.125rem, 2vw, 1.25rem);
}

/* 为hero section中的p标签添加响应式显示 */
section.relative.min-h-\[50vh\] p.text-lg.text-gray-800 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* 为小屏幕设备添加响应式显示 */
@media (max-width: 640px) {
  section.relative.min-h-\[50vh\] p.text-lg.text-gray-800 {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

/* 其他p标签保持原有多行显示 */
p.text-lg.text-gray-800 {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* 增加h1和p的对比度 */
h1.text-new-green {
  color: #7aae1a;
  text-shadow: 0 2px 8px rgba(144, 195, 31, 0.3);
}

p.text-gray-800 {
  color: #404856;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

/* 为hero section中的h1和p添加额外样式 */
section.relative.min-h-\[50vh\] h1 {
  margin-bottom: 1.5rem;
}

section.relative.min-h-\[50vh\] p {
  margin-top: 1rem;
  max-width: 90%;
}

/* 悬停效果 */
h1:hover {
  transform: translateY(-2px);
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

section.relative.min-h-\[50vh\] h1 {
  animation: fadeInUp 0.8s ease-out forwards;
}

section.relative.min-h-\[50vh\] p {
  animation: fadeInUp 0.8s ease-out 0.2s forwards;
  opacity: 0;
}

/* 防止左右方向的滑动条 */
body,
#root {
  overflow-x: hidden;
}

/* 确保头部背景图在不同分辨率下都能居中 */
section.relative.min-h-\[50vh\] .absolute.inset-0.bg-cover.bg-center {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* 为联系我们页面的头部简介容器设置宽度 */
.contact-page section.relative.min-h-\[50vh\] .text-center.bg-white\/80.backdrop-blur-sm.rounded-xl.p-8.inline-block {
  display: block;
  width: 553px;
  margin: 0 auto;
  padding: 1rem;
}

/* 为企业荣誉页面的头部简介容器设置宽度 */
.honor-page section.relative.min-h-\[50vh\] .text-center.bg-white\/80.backdrop-blur-sm.rounded-xl.p-8.inline-block {
  display: block;
  width: 737px;
  margin: 0 auto;
  padding: 1rem;
}

/* 为新闻资讯页面的头部简介容器设置宽度 */
.news-page section.relative.min-h-\[50vh\] .text-center.bg-white\/80.backdrop-blur-sm.rounded-xl.p-8.inline-block {
  display: block;
  width: 614px;
  margin: 0 auto;
  padding: 1rem;
}

/* 为品牌家族页面的头部简介容器设置宽度 */
.brand-page section.relative.min-h-\[50vh\] .text-center.bg-white\/80.backdrop-blur-sm.rounded-xl.p-8.inline-block {
  display: block;
  width: 707px;
  margin: 0 auto;
  padding: 1rem;
}

/* 为企业简介页面的头部简介容器设置宽度 */
.about-page section.relative.min-h-\[50vh\] .text-center.bg-white\/80.backdrop-blur-sm.rounded-xl.p-8.inline-block {
  display: block;
  width: 614px;
  margin: 0 auto;
  padding: 1rem;
}

/* 为联系我们页面添加响应式宽度 */
@media (max-width: 553px) {
  .contact-page section.relative.min-h-\[50vh\] .text-center.bg-white\/80.backdrop-blur-sm.rounded-xl.p-8.inline-block {
    width: 95%;
  }
}

/* 为企业荣誉页面添加响应式宽度 */
@media (max-width: 737px) {
  .honor-page section.relative.min-h-\[50vh\] .text-center.bg-white\/80.backdrop-blur-sm.rounded-xl.p-8.inline-block {
    width: 95%;
  }
}

/* 为新闻资讯页面添加响应式宽度 */
@media (max-width: 614px) {
  .news-page section.relative.min-h-\[50vh\] .text-center.bg-white\/80.backdrop-blur-sm.rounded-xl.p-8.inline-block {
    width: 95%;
  }
}

/* 为品牌家族页面添加响应式宽度 */
@media (max-width: 707px) {
  .brand-page section.relative.min-h-\[50vh\] .text-center.bg-white\/80.backdrop-blur-sm.rounded-xl.p-8.inline-block {
    width: 95%;
  }
}

/* 为企业简介页面添加响应式宽度 */
@media (max-width: 614px) {
  .about-page section.relative.min-h-\[50vh\] .text-center.bg-white\/80.backdrop-blur-sm.rounded-xl.p-8.inline-block {
    width: 95%;
  }
}

/* 为视频页面添加响应式宽度 */
@media (max-width: 614px) {
  .video-page section.relative.min-h-\[50vh\] .text-center.bg-white\/80.backdrop-blur-sm.rounded-xl.p-8.inline-block {
    width: 95%;
  }
}

/* 为小屏幕设备添加响应式内边距 */
@media (max-width: 640px) {
  section.relative.min-h-\[50vh\] .text-center.bg-white\/80.backdrop-blur-sm.rounded-xl.p-8.inline-block {
    padding: 1rem 0.75rem;
  }
  
  /* 确保小屏幕上p标签可以换行显示 */
  section.relative.min-h-\[50vh\] p.text-lg.text-gray-800 {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

/* 新闻资讯部分的p标签固定为三行文字高度 */
#blog .grid p.text-gray-800 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 72px; /* 大约三行文字的高度 */
}

/* 新闻资讯部分的h3标题固定为两行文字高度 */
#blog .grid h3.text-xl.font-bold.text-new-green {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 48px; /* 大约两行文字的高度 */
}

/* 新闻资讯部分的图片单向拉伸以填充容器 */
#blog .grid .aspect-video img {
  object-fit: fill;
  width: 100%; /* 保持响应式宽度 */
}

/* news.html 新闻资讯的图片用object-fit: fill适配容器大小并固定宽度 */
section.relative.py-16.bg-cream.overflow-hidden .space-y-4.mb-16 img {
  object-fit: fill;
  width: 220px;
}

/* 确保企业简介内容在正常电脑屏幕上完整显示 */
section.relative.py-24.bg-cream.overflow-hidden .max-w-7xl.mx-auto.px-4.sm\:px-6.lg\:px-8 {
  width: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* 确保企业简介内容的网格布局在不同屏幕尺寸下正常显示 */
section.relative.py-24.bg-cream.overflow-hidden .grid.lg\:grid-cols-2.gap-16 {
  gap: 4rem;
}

/* 确保企业简介内容的文本在正常电脑屏幕上完整显示 */
section.relative.py-24.bg-cream.overflow-hidden .text-base.text-gray-800.leading-relaxed {
  font-size: 1rem;
  line-height: 1.75;
  color: #404856;
  margin-bottom: 1rem;
  text-indent: 2em;
}

/* 确保首页滚动图在屏幕变小时保持居中 */
#banner {
  position: relative;
  overflow: hidden;
}

.banner-slider {
  position: relative;
  width: 100%;
  height: 100%;
}

.banner-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.banner-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 响应式调整滚动图高度 */
@media (max-width: 768px) {
  #banner {
    height: 400px;
  }
}

@media (max-width: 640px) {
  #banner {
    height: 300px;
  }
}

@media (max-width: 480px) {
  #banner {
    height: 250px;
  }
}

/* 为新闻详情页面添加基础样式 */
.article-content {
  text-indent: 2em;
  margin-bottom: 3rem;
}

.article-content p,
.article-content .article-image {
  margin-left: 8rem;
  margin-right: 8rem;
}

.article-title {
  margin-top: 3rem !important;
}

/* 为新闻详情页面添加响应式设计 */
@media (max-width: 1200px) {
  .article-content p,
  .article-content .article-image {
    margin-left: 4rem;
    margin-right: 4rem;
  }
}

@media (max-width: 768px) {
  .article-content p,
  .article-content .article-image {
    margin-left: 2rem;
    margin-right: 2rem;
  }
  
  .article-title {
    font-size: 1.75rem !important;
  }
}

@media (max-width: 640px) {
  .article-content p,
  .article-content .article-image {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  
  .article-title {
    font-size: 1.5rem !important;
  }
  
  .bg-white.rounded-2xl.overflow-hidden.shadow-soft.p-8 {
    padding: 1rem !important;
  }
}

@media (max-width: 480px) {
  .article-content p,
  .article-content .article-image {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
  
  .article-title {
    font-size: 1.25rem !important;
  }
}