/* --- General Setup --- */
  :root {
      --primary-text: #1e293b;
      --secondary-text: #475569;
      --border-color: #e2e8f0;
      --background-light: #f8f9fa;
      --primary-blue: #3b82f6;
      --white: #ffffff;
  }

  /* Sticky footer */
  html {
      height: 100%;
      /*Ensure the html tag fills the full height*/
  }

  body {
      min-height: 100%;
      /* Ensure the body tag is at least as tall as the viewport*/
      display: flex;
      flex-direction: column;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background-color: var(--white);
      color: var(--primary-text);
      margin: 0;
      padding-top: 80px;
      /* Space for fixed nav */
  }

  .main-container {
      flex-grow: 1;
      /* Make this element "grow" to fill all remaining space*/
  }

  .page-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
  }

  /* --- Navigation Bar --- */
  .main-nav-wrapper {
      width: 100%;
      background-color: var(--white);
      border-bottom: 1px solid var(--border-color);
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1000;
  }

  .nav-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      min-height: 80px;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
  }

  .logo-container {
      font-weight: 600;
      font-size: 16px;
  }

  .nav-links {
      display: flex;
      align-items: center;
      gap: 25px;
  }

  .nav-links a {
      text-decoration: none;
      color: var(--secondary-text);
      font-weight: 500;
  }

  .nav-links .register-button {
      background-color: var(--primary-text);
      color: var(--white);
      padding: 10px 20px;
      border-radius: 8px;
  }

  .hamburger-menu {
      display: none;
      font-size: 28px;
      background: none;
      border: none;
      cursor: pointer;
  }


  /* --- Hero Section --- */
  .hero-section-wrapper {
      padding: 40px 0;
  }

  .hero-grid {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 60px;
      align-items: start;
  }

  .hero-content-left {
      display: flex;
      flex-direction: column;
      gap: 30px;
  }

  .hero-experence-left h2 {
      font-size: 32px;
  }

  .title-block h1 {
      font-size: 48px;
      font-weight: 800;
      margin: 0;
      line-height: 1.2;
  }

  .title-block h2 {
      font-size: 36px;
      font-weight: 800;
      /* color: var(--primary-blue); */
      background-image: linear-gradient(to right, #38bdf8, #3b82f6);
      -webkit-background-clip: text;
      /* For Safari/Chrome compatibility */
      background-clip: text;
      color: transparent;
      margin: 0;

  }

  .transition-text h1 {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }

  .transition-text h2 {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }

  .title-fade.is-visible .transition-text h1 {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.2s;
  }

  .title-fade.is-visible .transition-text h2 {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.4s;
  }

  .t-text h2 {
      color: #1E293B;
      font-size: 32px;
      font-weight: 700;
  }

  .description {
      font-size: 18px;
      color: var(--secondary-text);
      line-height: 1.6;
      margin: 0;
  }

  .button-group {
      display: flex;
      gap: 15px;
      padding-bottom: 15px;
  }

  .btn {
      padding: 12px 24px;
      border-radius: 8px;
      text-decoration: none;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: all 0.2s;
  }

  .btn-primary {
      background-color: var(--primary-text);
      color: var(--white);
  }

  .btn-primary:hover {
      opacity: 0.8;
  }

  .btn-secondary {
      background-color: var(--white);
      color: var(--primary-text);
      border: 1px solid #cbd5e1;
  }

  .btn-secondary:hover {
      background-color: var(--background-light);
  }

  .info-cards {
      display: flex;
      gap: 15px;
      margin-top: 20px;
  }

  .info-card {
      flex: 2;
      border: 1px solid var(--border-color);
      border-radius: 12px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 8px;
  }

  .info-card .card-title {
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
  }

  .info-card .card-content {
      font-size: 14px;
      color: var(--secondary-text);
  }

  .hero-content-right {
      position: relative;
      margin-top: 145px;
  }

  .image-placeholder {
      background-color: var(--background-light);
      border: 1px solid var(--border-color);
      border-radius: 24px;
      width: 100%;
      height: 400px;
      display: block;
      overflow: hidden;
  }

  .image-placeholder img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
  }

  .image-placeholder:hover img {
      transform: scale(1.05);
  }

  .awards-box {
      position: absolute;
      bottom: -30px;
      right: -30px;
      background-color: var(--white);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      padding: 25px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
      width: 300px;
      opacity: 0.9;
  }

  .awards-box h3 {
      margin: 0 0 15px 0;
      font-size: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
  }

  .awards-box ul {
      margin: 0;
      padding-left: 20px;
      color: var(--secondary-text);
      font-size: 14px;
  }

  .awards-box ul li {
      margin-bottom: 8px;
  }

  /* .icon {
            display: inline-block;
            width: 20px;
            height: 20px;
            background-color: #cbd5e1;
            border-radius: 4px;
        } */

  /* --- NEW: About Section --- */
  .about-section-wrapper {
      padding: 40px 0;
      background-color: var(--background-light);
      /* Give it a light background to separate it */
      border-top: 1px solid var(--border-color);
  }

  .about-grid {
      display: grid;
      grid-template-columns: 2fr 1fr;
      /* Left is wider */
      gap: 50px;
  }

  .about-content-left h2 {
      font-size: 32px;
      margin-top: 0;
  }

  .about-cards-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      /* 2x2 grid for the cards */
      gap: 20px;
      margin-top: 30px;
  }

  .about-card {
      background-color: var(--white);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      padding: 25px;
  }

  .about-card h3 {
      font-size: 18px;
      margin: 0 0 10px 0;
  }

  .key-dates-card {
      background-color: var(--white);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      padding: 25px;
  }

  .key-dates-card h3 {
      font-size: 20px;
      margin-top: 0;
  }

  .key-dates-card p {
      margin: 0 0 20px 0;
      color: var(--secondary-text);
  }

  .key-dates-list {
      list-style: none;
      padding: 0;
      margin: 0;
  }

  .key-dates-list li {
      display: flex;
      gap: 15px;
      margin-bottom: 20px;
      font-size: 14px;
  }

  .key-dates-list .date-info {
      font-weight: 600;
  }

  .key-dates-list .date-info span {
      display: block;
      font-weight: normal;
      color: var(--secondary-text);
  }

  .faq-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 50px;
  }

  .faq-cards-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      /* 2x2 grid for the cards */
      gap: 20px;
      margin-top: 30px;
  }

  .faq-card {
      background-color: var(--white);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      padding: 25px;
  }

  .faq-content-left h2 {
      font-size: 32px;
      margin-top: 0;
  }

  /* ---NEW Home page why attend prime section */
  .why-attend-wrapper {
      /* 建议使用浅色背景, 与其他区域分隔 */
      padding: 60px 0;
      background-color: var(--background-light);
      border-top: 1px solid var(--border-color);
  }

  .why-attend-wrapper h2 {
      font-size: 32px;
      margin-top: 0;
      margin-bottom: 15px;
      text-align: center;
  }

  /* 这是 "There are as many reasons..." 这段介绍文字 */
  .section-intro {
      font-size: 1.1rem;
      color: var(--secondary-text);
      text-align: center;
      max-width: 700px;
      /* 限制介绍文字的宽度 */
      margin: 0 auto 40px auto;
      /* 居中并添加底部间距 */
  }

  /* 3列卡片网格 */
  .reasons-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      /* 电脑上: 3列 */
      gap: 30px;
  }

  /* --- 卡片本身 --- */
  .reason-card {
      background-color: var(--white);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      padding: 30px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
      text-align: center;
      /* 1. 这就是您要的 "鼠标放上去有效果" */
      transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  /* 2. 鼠标悬停时的状态 */
  .reason-card:hover {
      transform: translateY(-5px);
      /* 向上"浮" 5px */
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
      /* 阴影更深 */
  }

  /* 3. 这是您要的 "图标" */
  .reason-icon {
      font-size: 48px;
      text-align: center;
      color: var(--primary-blue);
      /* 使用您的主题蓝色 */
      margin-bottom: 25px;
  }

  .reason-card h3 {
      font-size: 20px;
      color: var(--primary-text);
      margin: 0 0 10px 0;
  }

  .reason-card p {
      font-size: 16px;
      color: var(--secondary-text);
      line-height: 1.6;
  }

  .sopnsor-section-wrapper {
      background-color: #ffffff;
  }

  /* --- 响应式规则 --- */
  @media (max-width: 992px) {
      .reasons-grid {
          grid-template-columns: 1fr;
          /* 在平板和手机上, 变为1列 */
      }
  }

  /* New Home page event detail section */
  .details-section-wrapper {
      /* (您可以选择是否添加背景色, 
       如果您的 "Why Attend" 区是浅灰色, 
       把这里留白(白色)会产生很好的对比) */
      /* padding: 0 0; */
      padding-bottom: 60px;
  }

  .details-section-wrapper h2 {
      font-size: 32px;
      margin-top: 0;
      margin-bottom: 30px;
      text-align: center;
  }

  /* 一个响应式的 5 卡片网格:
    - 浏览器会尝试创建尽可能多的列
    - 每列的宽度至少为 220px
    - 它们会平均分配多余的空间 (1fr)
  */
  .details-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 25px;
  }

  /* --- 卡片本身 --- */
  .detail-card {
      background-color: var(--white);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      padding: 30px;
      text-align: center;
      /* 居中卡片内的所有内容 */
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
      /* 1. 这就是您要的 "鼠标放上去有效果" */
      transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  /* 2. 鼠标悬停时的状态 */
  .detail-card:hover {
      transform: translateY(-5px);
      /* 向上"浮" 5px */
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
      /* 阴影更深 */
  }

  /* 3. 这是您要的 "图标" */
  .detail-icon {
      font-size: 42px;
      /* 图标尺寸 */
      color: #800810 !important;
      margin-bottom: 20px;
  }

  .detail-card h3 {
      font-size: 20px;
      color: var(--primary-text);
      margin: 0 0 10px 0;
  }

  .detail-card p {
      font-size: 16px;
      color: var(--secondary-text);
      line-height: 1.6;
      margin: 0;
  }


  /* New home page sponser & support section */
  .support-section-wrapper {
      padding: 60px 0;
      background-color: var(--background-light);
      /* 整个区域使用浅色背景 */
      border-top: 1px solid var(--border-color);
      justify-content: space-between;
  }

  /* 1. 统一的标题 */
  .support-section-wrapper h2 {
      font-size: 32px;
      margin-top: 0;
      margin-bottom: 40px;
      text-align: center;
      /* 标题居中 */
      color: var(--primary-text);
  }

  /* 2. 新的2列网格 */
  .support-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      /* 左右 50/50 分配 */
      gap: 40px;
      /* 左右两列的间距 */

      /* 关键: 确保两列的内容在垂直方向上居中对齐 */
      align-items: center;
  }

  /* 3. 左侧列: 赞助商 Logo */
  .sponsor-logos-column {
      display: flex;
      flex-direction: column;
      /* Logo 垂直堆叠 */
      align-items: flex-start;
      /* Logo 在本列中居中 */
      gap: 40px;
      /* 两个 Logo 之间的垂直间距 */
  }

  .sponsor-item {
      max-width: 300px;
      /* Logo 的最大宽度 */
  }

  .sponsor-item img {
      width: 100%;
      max-height: 90px;
      object-fit: contain;
      opacity: 0.8;
      transition: opacity 0.3s ease;
  }

  .sponsor-item img:hover {
      opacity: 1;
  }

  /* 4. 右侧列: "Have Questions?" 卡片 */
  /* (我们在这里重用之前的卡片样式) */
  .questions-card {
      /* 1. 这就是您要的 "区分效果" */
      background-color: #800810;
      /* 使用您的主题红色作为背景 */

      border: 1px solid #800810;
      /* 边框也设为同色 (或 'border: none;') */
      border-radius: 12px;
      padding: 30px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  /* 2. 悬停效果 (让阴影更明显) */
  .questions-card:hover {
      transform: translateY(-5px);
      /* 阴影可以更深, 因为背景是深色 */
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  }

  /* 3. 头部 (Flexbox 布局保持不变) */
  .questions-card-header {
      display: flex;
      align-items: center;
      gap: 15px;
      margin-bottom: 20px;
  }

  /* 4. 图标 (变为白色) */
  .question-icon {
      font-size: 28px;
      color: #FFFFFF !important;
      /* 强制设为白色 */
  }

  /* 5. 标题 (变为白色) */
  .questions-card-header h3 {
      margin: 0;
      font-size: 24px;
      color: #FFFFFF !important;
      /* 强制设为白色 */
  }

  /* 6. 描述文字 (变为浅白色) */
  .question-description {
      font-size: 1.1rem;
      /* 使用 90% 透明的白色, 以区别于标题 */
      color: rgba(255, 255, 255, 0.9) !important;
      line-height: 1.6;
      margin: 0;
  }

  /* 7. 邮件链接 (变为高亮的纯白色) */
  .question-description a {
      color: #FFFFFF !important;
      /* 链接设为纯白色 */
      font-weight: 600;

      /* 在深色背景上, 最好始终显示下划线以提高可读性 */
      text-decoration: underline !important;
      text-decoration-thickness: 1.5px;
      transition: opacity 0.3s ease;
  }

  .question-description a:hover {
      opacity: 0.8;
      /* 悬停时轻微变暗 */
  }

  /* --- 响应式规则 (手机端) --- */
  @media (max-width: 992px) {
      .support-grid {
          /* 2列网格 变为 1列垂直堆叠 */
          grid-template-columns: 1fr;
      }

      .sponsor-logos-column {
          align-items: center;
      }

  }

  /* ---Home page donation-section */
  .cta-section {
      background-color: #b52828;
      /* 深红色背景 */
      color: #ffffff;
      /* 默认文字颜色 */
      padding-top: 80px;
      padding-bottom: 80px;
  }

  /* 容器 (用于限制宽度和居中) */
  .container {
      width: 100%;
      padding-left: 15px;
      padding-right: 15px;
      margin-left: auto;
      margin-right: auto;
  }

  /* 响应式容器宽度 */
  @media (min-width: 576px) {
      .container {
          max-width: 540px;
      }
  }

  @media (min-width: 768px) {
      .container {
          max-width: 720px;
      }
  }

  @media (min-width: 992px) {
      .container {
          max-width: 960px;
      }
  }

  /* * 2. 布局和工具类 (Utility Classes) 
         */

  .max-width-900 {
      max-width: 900px;
  }

  .mx-auto {
      margin-left: auto;
      margin-right: auto;
  }

  .text-center {
      text-align: center;
  }

  .mt-20 {
      margin-top: 20px;
  }

  /* * 3. 文本样式 (Text Styles) 
         */

  /* 标题 */
  .cta-heading {
      font-size: 32px;
      font-weight: bold;
      color: #ffffff;
      margin-top: 0;
      margin-bottom: 24px;

      /* 使用 Flexbox 确保图标和文本正确对齐 */
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;
      /* 图标和文本的间距 */
  }

  .cta-heading .fa-heart {
      font-size: 28px;
      /* 图标大小略小于文字 */
  }

  /* 主要描述文字 */
  .text-large {
      font-size: 18px;
      line-height: 1.6;
  }

  .cta-text {
      color: rgba(255, 255, 255, 0.9);
      /* 轻微透明的白色 */
      margin-bottom: 32px;
  }

  /* 按钮下方的次要文字 */
  .text-secondary {
      font-size: 14px;
  }

  .cta-text-light {
      color: rgba(255, 255, 255, 0.7);
      /* 更透明的白色 */
      opacity: 0.8;
  }

  p {
      margin-top: 0;
      margin-bottom: 1rem;
      /* 默认段落底边距 */
  }

  /* * 4. 按钮样式 (Button Styles) 
         */

  .btn {
      display: inline-flex;
      /* 使用 inline-flex 对齐图标和文字 */
      align-items: center;
      justify-content: center;
      gap: 10px;
      /* 图标和文字的间距 */

      padding: 14px 28px;
      font-size: 16px;
      font-weight: bold;
      text-decoration: none;
      border: none;
      border-radius: 5px;
      cursor: pointer;

      transition: all 0.3s ease;
  }

  .btn-white {
      background-color: #ffffff;
      color: #333333;
      /* 按钮文字为深色 */
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  }

  .btn-white .fa-hand-holding-heart {
      color: #b52828;
      /* 按钮内的图标为红色 */
  }

  .btn-white:hover {
      background-color: #f4f4f4;
      /* 悬停时变灰 */
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
      transform: translateY(-2px);
  }

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

      .donation-section-wrapper,
      .cta-section {
          padding-top: 40px;
          padding-bottom: 40px;
      }

      .cta-heading {
          font-size: 26px;
          /* 减小标题 */
          gap: 10px;

          /* 确保 Flex 布局在小屏幕上仍然生效 */
          display: flex;
          align-items: center;
          justify-content: center;
          flex-wrap: wrap;
          /* 允许在极小的屏幕上换行 */
      }

      .text-large {
          font-size: 16px;
          /* 减小描述文字 */
      }

      .btn {
          padding: 12px 24px;
          font-size: 15px;
      }

      /* .donation-section-wrapper {
          padding: 40px 0;
      } */
  }

  /* --- New team page team-section-wrapper science bowl---- */
  .team-section-wrapper {
      padding: 40px 0;
  }

  .teams-cards-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 25px;
  }

  .teams-card {
      background-color: var(--white);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      padding: 25px;
  }

  .team-section-wrapper .volunteer h2 {
      font-size: 32px;
  }

  .s_pushable {
      margin-top: 0;
  }

  /* dropdonw menue */

  .main-nav-wrapper li {
      float: left;
      /* 让菜单项水平排列 */
  }

  .main-nav-wrapper li {
      display: inline-block;
      /* color: black; */
      text-align: center;
      /* padding: 14px 16px; */
      text-decoration: none;
  }

  /* 下拉菜单的核心样式 */

  /* 1. 包含下拉菜单的容器 (<li>) */
  .main-nav-wrapper .dropdown-menu {
      position: relative;
      /* 关键：为下拉内容的绝对定位提供基准 */
      display: inline-block;
  }

  /* 2. 下拉菜单的内容 (<div>) - 默认隐藏 */
  .main-nav-wrapper .dropdown-page {
      display: none;
      /* 默认隐藏 */
      position: absolute;
      /* 关键：让菜单浮动在页面内容之上 */
      background-color: #ffffff;
      /* 下拉菜单背景色 */
      min-width: 160px;
      /* 下拉菜单最小宽度 */
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      /* 添加阴影 */
      z-index: 1;
      /* 确保在其他内容之上 */
  }

  /* 3. 下拉菜单中的链接 */
  .main-nav-wrapper .dropdown-page a {
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      /* 让链接充满整个宽度，垂直排列 */
      text-align: left;
      /* 文本左对齐 */
  }

  /* 4. 鼠标悬停在链接上时的样式 */
  .main-nav-wrapper .dropdown-page a:hover {
      background-color: #f9f9f9;
  }

  /* 5. 关键：当鼠标悬停在 .dropdown 容器上时，显示 .dropdown-content */
  .main-nav-wrapper .dropdown-menu:hover .dropdown-page {
      display: block;
  }

  /* .main-nav-wrapper .dropdown-page {
      display: none;
      position: absolute;
      background-color: #ffffff;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 1;
  } */

  .main-nav-wrapper .dropdown-page.show {
      display: block;
  }

  .about-section-wrapper .sponsor-prime {
      margin-bottom: 30px;
  }

  .about-section-wrapper .sponsor-prime img {
      width: 75%;
      height: auto;
      object-fit: cover;
  }


  /* --- NEW: Team Section --- */
  .team-section-wrapper {
      padding: 40px 0;
      background-color: var(--background-light);
      /* 假设您在 :root 中定义了这个 */
      border-top: 1px solid var(--border-color);
  }

  .team-section-wrapper h2 {
      font-size: 36px;
      font-weight: 800;
      margin-top: 0;
      margin-bottom: 40px;
      text-align: left;
  }

  .team-grid {
      display: grid;
      /* 默认一行3个，您也可以改为4个: repeat(4, 1fr) */
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
  }

  .team-card {
      background-color: var(--white);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
      text-align: center;
      overflow: hidden;
      /* 确保图片圆角生效 */
      transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  /* 为卡片添加一个微妙的浮动效果 */
  .team-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  }

  .team-card-image img {
      width: 100%;
      height: 300px;
      /* 统一高度 */
      object-fit: cover;
      /* 确保图片不变形 */
      display: block;
  }

  .team-card-content {
      padding: 25px;
  }

  .team-card-content h3 {
      font-size: 20px;
      color: var(--primary-text);
      margin: 0 0 5px 0;
  }

  .team-card-content .title {
      font-size: 20px;
      color: #800810;
      font-weight: 600;
  }

  /* --- Response code --- */
  @media (max-width: 992px) {
      .team-grid {
          grid-template-columns: repeat(2, 1fr);
          /* 平板上改为2列 */
      }
  }

  @media (max-width: 768px) {
      .team-grid {
          grid-template-columns: 1fr;
          /* 手机上改为1列 */
      }

      .team-card-image img {
          height: 350px;
          /* 手机上图片可以高一点 */
      }
  }


  /* --- New section schedule --- */

  .schedule-section-wrapper {
      padding: 40px 0;
      /* 建议使用浅色背景, 与其他区域分隔 */
      background-color: var(--background-light);
      border-top: 1px solid var(--border-color);
  }

  .schedule-section-wrapper h2 {
      font-size: 32px;
      margin-top: 0;
      margin-bottom: 15px;
      text-align: center;
  }

  .section-date-title {
      font-size: 1.5rem;
      font-weight: 600;
      color: var(--secondary-text);
      text-align: center;
      margin: 0 auto 40px auto;
      /* 居中并添加底部间距 */
  }

  /* 议程列表容器 */
  .schedule-list {
      /* 在大屏幕上, 限制最大宽度并居中 */
      max-width: 1200px;
      margin: 0 auto;
  }

  /* --- 关键: "日程卡片" (每一行) --- */
  .schedule-item {
      display: flex;
      /* 关键: 让 "时间" 和 "事件" 左右并排 */
      background-color: var(--white);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);

      /* 1. 这就是您要的 "鼠标放上去有效果" */
      transition: transform 0.3s ease, box-shadow 0.3s ease;

      /* 确保卡片之间有间距 */
      margin-bottom: 20px;

      /* 防止子元素的圆角溢出 */
      overflow: hidden;
  }

  /* 2. 鼠标悬停时的状态 */
  .schedule-item:hover {
      transform: translateY(-5px);
      /* 向上"浮" 5px */
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
      /* 阴影更深 */
  }

  /* "时间" 模块 (左侧) */
  .schedule-time {
      /* 使用您的主题红色作为背景! */
      background-color: #800810;
      color: white;
      font-weight: 600;
      font-size: 1.1rem;

      /* 垂直居中时间文字 */
      display: flex;
      align-items: center;
      justify-content: center;

      padding: 25px;
      width: 200px;
      /* 固定宽度 */
      flex-shrink: 0;
      /* 防止被压缩 */
  }

  /* "事件" 模块 (右侧) */
  .schedule-event {
      padding: 25px 30px;
      flex-grow: 1;
      /* 占据剩余所有空间 */

      /* 垂直居中事件标题 */
      display: flex;
      align-items: center;
  }

  .schedule-event h3 {
      margin: 0;
      font-size: 1.25rem;
      color: var(--primary-text);
  }

  /* 3. "斑马条纹" (交错背景色) */
  /* (我们只给右侧的 "事件" 模块添加交错色) */
  .schedule-item:nth-child(even) .schedule-event {
      background-color: #fcfcfc;
      /* 一个非常浅的灰色 */
  }

  .schedule-timezone-note {
      /* 1. 这是您的核心需求: 居中显示 */
      text-align: center;

      /* 2. 附加样式 (使其更美观) */
      font-size: 0.9rem;
      /* 字体稍小 */
      color: var(--secondary-text);
      /* 使用次要的灰色文字 */
      font-style: italic;
      /* 设为斜体, 以示备注 */

      /* 3. 调整间距 */
      margin-top: -20px;
      /* 向上拉近, 靠近上方的日期标题 */
      margin-bottom: 30px;
      /* 向下推开, 与下方的日程表保持距离 */
  }


  /* --- 响应式规则 (手机端) --- */
  @media (max-width: 768px) {
      .schedule-item {
          /* 1. 变为垂直堆叠 */
          flex-direction: column !important;
      }

      .schedule-time {
          width: 100% !important;
          /* 宽度不变 */

          /* 2. 强制内边距 (确保左右也是 25px) */
          padding: 25px !important;
          display: block !important;
          text-align: center !important;
          box-sizing: border-box !important;
          /* (justify-content: center; 会从基础规则继承, 保持居中) */
      }

      .schedule-event {
          /* 2. 强制宽度和内边距 (修复错位) */
          width: 100% !important;
          padding: 25px !important;
          /* 3. 强制变为“块”并“居中” (修复居中) */
          display: block !important;
          text-align: center !important;
          /* 4. 安全网 */
          box-sizing: border-box !important;
      }
  }

  /* --- NEW: Wrapper for Download & Lunch Cards --- */
  .download-section-cards {
      max-width: 1200px;
      margin: 30px auto 0 auto;
      /* 保持不变 */
      /* --- 关键修改: 从 Flex 变为 Grid --- */
      display: grid;
      grid-template-columns: 1fr 1fr;
      /* 2列, 50/50 水平排列 */
      /* --- 结束修改 --- */
      gap: 20px;
      /* 保持卡片间距 */
      align-items: stretch;
      /* (默认的 align-items: stretch 会自动让两张卡片等高) */
  }

  /* --- Base Card Style with Hover Effect (Reusable) --- */
  /* 我们创建一个通用的 .card-with-hover 类，让所有卡片都用这个样式 */
  .card-with-hover {
      background-color: var(--white);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .card-with-hover:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  }

  /* --- "Download Schedule" Card (Reused & Adjusted) --- */
  .download-schedule-card {
      /* (它从 .download-section-cards 继承了 'stretch' 高度) */

      /* 1. 关键: 使用 Flexbox 来垂直居中卡片“内部”的内容 */
      display: flex;
      flex-direction: column;
      /* 堆叠内容: 1.文本 2.按钮 */
      /* 2. 关键: 水平居中 + 垂直居中 */
      align-items: center;
      /* 水平居中 (X轴) */
      justify-content: center;
      /* 垂直居中 (Y轴) */

      padding: 30px;
      /* 标准内边距 */
      gap: 20px;
      /* 文本和按钮之间的间距 */

      /* (继承 .card-with-hover 的所有其他样式) */
  }

  /* 文本块 (图标 + p 标签) */
  .download-card-text {
      /* 1. 内部也使用 Flexbox */
      display: flex;
      flex-direction: column;
      /* 堆叠: 1.图标 2.文字 */
      align-items: center;
      /* 水平居中 */
      gap: 15px;
      /* 图标和文字的间距 */
      text-align: center;
      /* 确保 <p> 文字居中 */
  }

  /* (图标和文字的样式保持不变) */
  .download-icon {
      font-size: 28px;
      color: #D9534F;
  }

  .download-card-text p {
      margin: 0;
      font-size: 1.1rem;
      color: var(--secondary-text);
      font-weight: 500;
  }

  /* (确保您的 .btn.btn-primary 样式存在且是红色背景) */
  /* --- NEW: "Lunch & Parent" Card --- */
  .lunch-parent-card {
      /* 基础样式继承自 .card-with-hover */
      padding: 30px;
      /* 内边距 */
  }

  .lunch-card-header {
      display: flex;
      align-items: center;
      gap: 15px;
      margin-bottom: 20px;
  }

  .lunch-icon {
      font-size: 28px;
      color: #007bff;
      /* 午餐/咖啡可以用蓝色 */
      /* 或者使用您的主题红色: color: #800810; */
  }

  .lunch-card-header h3 {
      margin: 0;
      font-size: 24px;
      color: var(--primary-text);
  }

  .lunch-description {
      font-size: 1.05rem;
      color: var(--secondary-text);
      line-height: 1.6;
      margin: 0;
  }

  /* --- 响应式规则 (手机端) --- */
  @media (max-width: 768px) {
      .download-schedule-card {
          flex-direction: column;
          align-items: stretch !important;
          padding: 20px;
      }

      .download-card-text {
          justify-content: center;
          text-align: center;
      }

      .lunch-parent-card {
          padding: 20px;
      }

      .lunch-card-header {
          justify-content: center;
          /* 手机上标题居中 */
      }

      .download-section-cards {
          grid-template-columns: 1fr;
      }

      .download-card-action {
          /*
     * 强制按钮的“包裹器”
     * 占据卡片100%的可用宽度
     */
          width: 100% !important;
      }

      /* --- ↑↑↑ 新规则结束 ↑↑↑ --- */
      .download-card-action .btn {
          width: 100% !important;
          justify-content: center !important;
          box-sizing: border-box !important;
      }

  }


  /* ---New section Archive--- */
  .archive-section-wrapper {
      padding: 40px 0;
  }

  .archive-section-wrapper h2 {
      font-size: 36px;
      font-weight: 800;
      margin-top: 0;
      margin-bottom: 40px;
      text-align: left;
  }

  .archive-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 30px;
  }

  .archive-card {
      background-color: var(--white);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      padding: 30px;
      text-align: center;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      display: flex;
      flex-direction: column;
  }

  .archive-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  }

  .archive-card-content {
      flex-grow: 1;
  }

  .archive-card h3 {
      font-size: 22px;
      margin: 0 0 10px 0;
  }

  .archive-card p {
      font-size: 16px;
      color: var(--secondary-text);
      margin-bottom: 25px;
      min-height: 48px;
  }

  .archive-card .button-group {
      justify-content: center;
  }

  /* --- 唯一的区别: 图标颜色 --- */
  .archive-icon-pdf {
      font-size: 48px;
      color: #D9534F;
      margin-bottom: 20px;
  }

  .archive-icon-action {
      font-size: 48px;
      color: var(--primary-blue);
      margin-bottom: 20px;
  }

  .coming-soon-notice {
      text-align: center;
      padding: 40px;
      margin-top: 40px;
      background-color: var(--background-light);
      border-radius: 12px;
      border: 1px dashed var(--border-color);
  }

  .divider-with-icon {
      display: flex;
      align-items: center;
      margin: 50px auto;
      width: 100%;
  }

  /* 4. 这两个伪元素就是 "线" */
  .divider-with-icon::before,
  .divider-with-icon::after {
      content: '';
      flex-grow: 1;
      border-bottom: 1px solid var(--border-color);
  }

  /* 5. 这是中间的 "花" (图标) */
  /* .divider-with-icon i {
      font-size: 20px;
      color: #800810;
      padding: 0 15px;
      background-color: var(--white);
  } */

  .divider-with-icon i {
      font-size: 20px;
      padding: 0 15px;
      background-color: var(--white);
      color: transparent;
      background-image: linear-gradient(45deg,
              #FBD786,
              #f7797d);
      -webkit-background-clip: text;
      background-clip: text;
  }

  .sponsor-archive-wrapper {
      margin-top: 40px;
      text-align: center;
  }

  .sponsor-title {
      font-size: 32px;
      color: var(--secondary-text);
      font-weight: 600;
      margin-bottom: 30px;
  }

  .sponsor-logo-grid {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 30px;
      flex-wrap: wrap;
  }

  .sponsor-logo {
      max-width: 500px;
  }

  .sponsor-logo img {
      width: 100%;
      max-height: 80px;
      object-fit: contain;
      opacity: 0.8;
      transition: opacity 0.3s ease;
  }

  .sponsor-logo img:hover {
      opacity: 1;
  }

  /* Archive page photp gallery */
  .photo-gallery-section {
      padding: 30px 0;
      background-color: var(--white);
      /* 画廊背景通常是白色 */
      /* border-top: 1px solid var(--border-color); */
  }

  .gallery-title {
      font-size: 32px;
      margin-top: 0;
      margin-bottom: 20px !important;
      text-align: center;
      color: var(--primary-text);
      display: flex;
      /* 让图标和文字水平居中对齐 */
      justify-content: center;
      align-items: center;
      gap: 15px;
      /* 图标和文字的间距 */
  }

  .gallery-icon {
      color: #800810;
      /* 图标颜色设为您的主题红色 */
      font-size: 36px;
  }

  /* --- 图片网格 (响应式) --- */
  .gallery-grid {
      display: grid;
      /* 关键: 自动调整列数 */
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 25px;
      /* 图片之间的间距 */
  }

  /* --- 单张图片卡片 --- */
  .gallery-item {
      background-color: var(--white);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
      overflow: hidden;
      /* 确保图片缩放时不会溢出圆角 */

      /* 为缩放动画做准备 */
      position: relative;
  }

  .gallery-item a {
      display: block;
      /* 确保链接占据整个卡片 */
      width: 100%;
      height: 100%;
  }

  .gallery-item img {
      width: 100%;
      height: 250px;
      /* 固定图片高度，保持一致性 */
      object-fit: cover;
      /* 裁剪图片以填充空间，保持比例 */
      display: block;

      /* 鼠标悬停动画 */
      transform: scale(1);
      /* 默认不缩放 */
      transition: transform 0.4s ease-out;
      /* 缩放动画过渡 */
  }

  /* 鼠标悬停动画效果 */
  .gallery-item:hover img {
      transform: scale(1.08);
      /* 悬停时放大 8% */
  }

  /* --- 响应式调整 (可选) --- */
  @media (max-width: 768px) {
      .gallery-grid {
          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
          /* 手机上减小最小宽度 */
      }

      .gallery-item img {
          height: 200px;
          /* 手机上图片高度也可以减小 */
      }

      .gallery-title {
          font-size: 28px;
          margin-bottom: 30px;
      }

      .gallery-icon {
          font-size: 32px;
      }
  }


  /* 页面效果展示 */
  .animate-on-scroll {
      opacity: 0;
      transform: translateY(30px);

      /* * 这是过渡效果:
   * 当 opacity 或 transform 发生变化时,
   * 平滑地用 0.6 秒来完成动画。
   */
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }

  /* 2. 这是动画的“结束”状态 */
  /*
 * 当 JavaScript 为这个元素添加了 .is-visible 类之后,
 * 它会变为不透明 (opacity: 1)
 * 并且移动回它本来的位置 (transform: translateY(0))
 */
  .animate-on-scroll.is-visible {
      opacity: 1;
      transform: translateY(0);
  }

  /* --- Response code --- */
  @media (max-width: 768px) {
      .archive-grid {
          grid-template-columns: 1fr;
      }

      .sponsor-logo-grid {
          justify-content: center;
          row-gap: 30px;
      }

      .sponsor-logo {
          max-width: 280px;
      }

      .sponsor-title {
          font-size: 24px;
      }

      .coming-soon-notice {
          margin-top: 20px;
      }
  }

  @media (min-width: 769px) {
      .dropdown-menu:hover .dropdown-page {
          display: block;
      }

  }

  /* --- Responsive Code --- */
  @media (max-width: 992px) {
      body {
          padding-top: 70px;
      }

      .page-container {
          padding: 0 20px;
      }

      .nav-container {
          padding-right: 5px;
      }

      /* .main-nav {
                padding: 15px 20px;
                min-height: 70px;
            } */

      .nav-links {
          display: none;
          position: absolute;
          top: 100%;
          left: 0;
          width: 100%;
          background-color: var(--white);
          flex-direction: column;
          padding: 20px 0;
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
      }

      .nav-container.nav-active .nav-links {
          display: flex;
      }

      .hamburger-menu {
          display: block;
          color: #800810;
      }

      .hero-section-wrapper {
          padding: 40px 0;
      }

      .hero-grid {
          grid-template-columns: 1fr;
          gap: 20px;
      }

      .title-block h1 {
          font-size: 32px;
      }

      .title-block h2 {
          font-size: 25px;
      }

      .hero-content-right {
          margin-top: 0;
      }

      .awards-box {
          position: relative;
          bottom: auto;
          right: auto;
          margin-top: 20px;
          width: auto;
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
      }

      .info-cards {
          flex-direction: column;
      }

      /* NEW: Responsive rules for About Section */
      .about-section-wrapper {
          padding: 40px 0;
      }

      .about-grid {
          grid-template-columns: 1fr;
          /* Stack left and right columns */
      }

      .about-cards-grid {
          grid-template-columns: 1fr;
          /* Stack the 4 cards vertically */
      }

      .faq-section-wrapper {
          padding: 40px 0;
      }

      .faq-cards-grid {
          grid-template-columns: 1fr;
      }

      .team-section-wrapper {
          padding: 40px 0;
      }

      .schedule-section-wrapper {
          padding: 40px 0;
      }

      .teams-cards-grid {
          grid-template-columns: 1fr;
      }

      .info-card .card-content br {
          display: none;
      }
  }