/*
 * @file styles.css
 * @description 远播教育研究院页面自定义样式
 * @author Code Optimizer
 * @date 2026-06-17
 */

/* ==================== 导航栏样式 ==================== */
/**
 * 导航栏容器 - 限制最大宽度并居中
 */
.nav-container {
  max-width: 1920px;
  margin: 0 auto;
}

/* ==================== Hero Banner 样式 ==================== */
/**
 * Hero 背景图容器
 */
.hero-banner {
  background-image: url(../images/hero-bg.png);
  background-size: cover;
  background-position: center;
}

/**
 * 文字阴影效果
 */
.text-shadow {
  text-shadow: 0px 3px 12px rgba(0, 0, 0, 0.5);
}

/* ==================== 研究成果区域样式 ==================== */
/**
 * 研究成果背景图容器
 */

.research-bg {
  width: 100%;
  height: 1040px;
  /* background-image: url(../images/2026061805.png); */
  background-image: url(../images/research-bg.png);
  background-size: cover;
  background-position: center;
}

@media not all and (min-width: 1536px) {
  .research-bg {
    background-size: cover;
    background-position: 50% center;
  }

  .introduce-content {
    gap: 40px !important;
  }
  .introduce-content img {
    width: 530px !important;
  }
}
/* ==================== 页脚 CTA 区域样式 ==================== */
/**
 * 页脚行动号召区域背景
 */
.footer-cta {
  background-image: url(../images/footer-cta-bg.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ==================== 通用卡片样式 ==================== */
/**
 * 联系方式卡片
 */
.contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #e5e7eb;
  padding-top: 31px;
  padding-bottom: 68px;
  background-color: #ffffff;
  border-radius: 8px;
  transition: box-shadow 0.3s ease;
}

.contact-card:hover {
  box-shadow:
    0 10px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.05);
}

/**
 * 办公地址卡片
 */
.office-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ffffff;
}

/* ==================== 动画效果 ==================== */
/**
 * 滚动入场动画
 */
.reveal,
.reveal-left,
.reveal-right,
.reveal-scale {
  opacity: 0;
  transition: all 0.8s ease-out;
}

.reveal.visible,
.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible {
  opacity: 1;
}

.reveal-left {
  transform: translateX(-50px);
}

.reveal-left.visible {
  transform: translateX(0);
}

.reveal-right {
  transform: translateX(50px);
}

.reveal-right.visible {
  transform: translateX(0);
}

.reveal-scale {
  transform: scale(0.9);
}

.reveal-scale.visible {
  transform: scale(1);
}

@media screen and (max-width: 1000px) {
  body {
    min-width: 1500px !important;
  }
}