* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

  body {
          font-family: Arial, sans-serif;
          display: flex;
          flex-direction: column;
          min-height: 100vh;
          margin: 0;
          background-color: #f0f8ff;
      }

#main-content {
    width: 100%; 
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}


/* original iline styles */n
    
      h1, h2 {
          color: #2c3e50;
          margin-bottom: 20px;
      }
      p {
          font-size: 1.1em;
          color: #34495e;
          line-height: 1.6;
      }
      .grid-container {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
          gap: 20px;
          padding: 15px;
          max-width: 100%;
          margin: 0 auto;
      }
      .grid-item {
          background: rgb(255, 225, 225);
          border-radius: 8px;
          overflow: hidden;
          box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      }
      .grid-item img {
          width: 100%;
          height: 180px;
          object-fit: cover;
      }
      .grid-item h2 {
          padding: 0 15px;
          margin-top: 15px;
          font-size: 1.3em;
      }
      .grid-item p {
          padding: 0 15px 15px;
          margin-top: 0;
          font-size: 1em;
      }
      #hero {
          text-align: center;
          padding: 40px 15px;
          background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)), url('https://gd-hbimg.huaban.com/8a597a994f2e6c8e68a5c28b45f11c33d8a5e9a53550b15b5b4f5e43e78_fw1200webp') center/cover no-repeat;
          margin-bottom: 20px;
      }
      
      #footer {
          background-color: #2c3e50;
          color: white;
          text-align: center;
          padding: 20px 15px;
          margin-top: 30px;
      }


      .header {
          background-color: rgb(255, 249, 171);
          box-shadow: 0 2px 10px rgba(0,0,0,0.1);
          width: 100%;
      }
      .header {
          position: sticky;
          top: 0;
          background: rgb(255, 254, 182);
          z-index: 100; /* ensures header stays on top */
      }
      .header-container{
          max-width: 1100px;
          margin: 0 auto;
          padding: 10px 15px;
          display: flex;
          align-items: center;
          justify-content: space-between; /* 保持左右布局 */
          width: 100%;
      }

      .card-container {
         display: flex;
         flex-wrap: wrap; /* 屏幕变小时自动换行 */
         gap: 1rem;
         padding: 0 15px
      }
      .card {
         flex: 1 1 280px; /* 最小宽度适配手机 */
      }   

      .hero-section {
          width: 100%; /* 宽度占满父容器 */
          max-width: none; /* 移除最大宽度限制（如果有） */
          margin: 0; /* 移除左右外边距（如果有） */ 
          padding: 2rem 0; /* 可选：调整内边距，避免内容贴边 */
      }

/* 新增：Hainan Map跳转按钮样式 */
      .map-link{
          background-color: var(--primary); /* 主色调背景 */
          color: #000000 !important; /* 白色文字（!important覆盖原导航文字色） */
          padding: 6px 12px;
          border-radius: 4px;
          text-decoration: none;
          font-weight: 600;
          transition: background-color 0.2s ease;
      }
      .map-link:hover{
          background-color: #005fa3; /* hover时加深背景色 */
      }

      @media (max-width:768px){
          h1 {
            font-size: 1.2em; /* 缩小一级标题 */
          }
          h2 {
            font-size: 1em; /* 缩小二级标题 */
          }
          p {
            font-size: 0.9em; /* 缩小正文 */
          }
          .nav-link {
            font-size: 0.8em; /* 缩小导航文字 */
          }
          #hero h1{
            font-size:1em;
          }
          .header-container {
            flex-direction: column; /* 纵向排列 */
            justify-content: center; /* 整体内容居中 */
            gap: 3px; /* 两行之间的间距 */
          }
          .logo svg {
            width: 24px; /* 比原来小8px */
            height: 24px;
          }
          .brand {
            flex-direction: row; /* logo和标题在同一行 */
            align-items: center;
            width: 100%; /* 标题区域占满一行 */
            justify-content: center; /* 标题和logo居中显示 */
            gap: 2px;
          }
          .nav-menu{
            width: 100%;
            justify-content: space-around; /* 菜单均匀分布在一行 */
            gap: 2px; /* 缩小导航项间距，避免换行 */
            padding: 0.5px ; /* 上下留出少量空间 */
            font-size: 0.6em;
          }
          .brand-title {
            font-size: 0.6em; /* 缩小品牌名称 */
            white-space: nowrap; /* 新增：强制标题文字在一行显示 */
            letter-spacing: -0.5px;
          }
          #main-content {
            padding: 10px 5px; /* 减少内容区内边距 */
          }
      }

      @media (max-width: 480px) {
          h1 {
            font-size: 1.2em; /* 缩小一级标题 */
          }
          h2 {
            font-size: 1em; /* 缩小二级标题 */
          }
          p {
            font-size: 0.9em; /* 缩小正文 */
          }
          .nav-link {
            font-size: 0.8em; /* 缩小导航文字 */
          }
          .grid-container {
              grid-template-columns: 1fr; /* 强制单列显示，避免拥挤 */
          }
    
          .brand-title {
              font-size: 1em; /* 进一步缩小品牌名 */
          }
    
          .nav-menu {
              gap: 5px;
          }
    
          #hero {
              padding: 20px 5px; /* 进一步减少Hero区域高度 */
          }
      }    
    
      .header-content {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 15px 0;
      }
      .brand {
          display: flex;
          align-items: center;
          gap: 10px;
      }
      .logo svg {
          width: 32px;
          height: 32px;
          color: #3498db;
      }
      .brand-title {
          margin: 0;
          font-size: 1.8em;
      }
      .brand-title span {
          color: #92d1fb;
      }
      .nav-menu {
          display: flex;
          list-style: none;
          gap: 30px;
          margin: 0;
          padding: 0;
          flex-wrap: wrap; /* 导航项在手机端自动换行，避免溢出 */
          justify-content: center; /* 换行后居中显示 */
      }
      .nav-link {
          text-decoration: none;
          color: #34495e;
          font-weight: 500;
          transition: color 0.3s;
      }
      .nav-link:hover {
          color: #3498db;
      }
      .grid-item img {
          height: 250px !important;
          object-fit: cover !important;
          width: 100% !important;
      }