.banner-image::before {
        position: absolute;
        content: "";
        width: 100%;
        height: 318px;
        left: 0;
        top: 0;
        background: -webkit-gradient(linear, left top, left bottom, color-stop(80%, transparent), to(rgba(0, 0, 0, .5)));
        background: -webkit-linear-gradient(top, transparent 80%, rgba(0, 0, 0, .8) 100%);
        background: -o-linear-gradient(top, transparent 80%, rgba(0, 0, 0, .8) 100%);
        background: linear-gradient(to bottom, transparent 20%, rgba(0, 0, 0, .8) 100%);
        -o-transition: all 0.4s ease;
        transition: all 0.4s ease;
        -webkit-transition: all 0.4s ease;
        -moz-transition: all 0.4s ease;
        -ms-transition: all 0.4s ease;
    }
.banner-image img{
    width:100%; 
    display:block; 
    object-fit:cover;
    
}
.mb-8 {
    margin-bottom: 2rem;
}
.text-center {
    text-align: center;
}
h3 {
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 1rem;
}
 /* 全局样式 */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f7f7f7; /* 整体背景色，与主色调搭配 */
    }

    /* 主色调 */
    :root {
      --primary-color: #93b3fc;
      --primary-light: #b6ccff;
      --primary-dark: #6d94f8;
      --background-color: #f0f5ff; /* 背景色 */
    }

    /* 容器样式，用于包裹左右两部分 */
    .wraper{
    max-width: 1600px; /* 限制最大宽度 */
      margin: 3rem auto; /* 居中显示 */
    }
   .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      padding: 20px;
      gap: 20px;
      max-width: 1600px; /* 限制最大宽度 */
      margin: 3rem auto; /* 居中显示 */
    }

    /* 左侧联系信息部分样式 */
   .contact-info {
      flex: 1 1 400px;
      background-color: white; /* 背景改为白色 */
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    }

    /* 右侧留言表单部分样式 */
   .message-form {
      flex: 1 1 400px;
      background-color: white; /* 背景改为白色 */
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    }
    .message-form p{
        font-size: 16px;
        line-height:28px
    }
select, textarea, input[type=file], input[type=text], input[type=password], input[type=number], input[type=tel], input[type=email] {
    display: block;
    width: 100%;
    margin: 10px 0px;
    transition: .3s;
    padding: 8px 12px;
    border-radius: 3px;
    background: #fff;
    border: 1px solid #e8e8e8;
    line-height: 1.5;
    height: 39px;
    font-size: 16px;
}
    /* 表单样式 */
    form {
      display: flex;
      flex-direction: column;
      margin: 1rem auto;
    }

    label {
      margin-top: 10px;
      font-weight: bold;
      font-size: 16px;
      line-height: 28px;
    }

    input {
      margin-top: 8px;
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 16px;
    }
    textarea {
      margin-top: 8px;
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 16px;
      min-height: 180px;
    }
    input:focus,
    textarea:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 0 2px rgba(147, 179, 252, 0.2);
    }

    button {
      margin-top: 30px;
      padding: 14px 20px;
      background-color: var(--primary-color);
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s;
      font-size: 16px;
      font-weight: bold;
    }

    button:hover {
      background-color: var(--primary-dark);
    }

    /* 主标题样式 */
    h4{
      color: #333;
      border-bottom: 2px solid var(--primary-color);
      padding-bottom: 10px;
      margin-top: 0; /* 移除顶部间距 */
      font-size: 2rem;
    }
    .text-content p,.method p{
        font-size: 16px;
        line-height: 28px;
    }
    /* 联系方法样式 */
   .contact-methods {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }

   .method {
      background-color: var(--background-color); /* 使用背景色 */
      padding: 15px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      gap: 15px;
      transition: transform 0.3s, box-shadow 0.3s;
    }

   .method:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

   .method img {
      width: 45px;
      height: 45px;
      padding: 0px;
      border-radius: 1%;
    }

   .method a {
      color: var(--primary-color);
      text-decoration: none;
    }

   .method a:hover {
      text-decoration: underline;
    }

    /* 表单中的单选按钮样式 */
    input[type="radio"] {
      display: none;
    }

    input[type="radio"] + label {
      position: relative;
      padding-left: 25px;
      margin-right: 20px;
      cursor: pointer;
      font-weight: normal;
    }

    input[type="radio"] + label:before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 20px;
      height: 20px;
      border: 2px solid var(--primary-color);
      border-radius: 50%;
      box-sizing: border-box; /* 确保边框在20px范围内 */
    }

    input[type="radio"]:checked + label:after {
      content: '';
      position: absolute;
      left: 4px; /* 调整位置使其居中 */
      top: 4px;  /* 调整位置使其居中 */
      width: 12px;
      height: 12px;
      background-color: var(--primary-color);
      border-radius: 50%;
    }

    /* 单选按钮容器样式 */
    .radio-group {
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
    }

    /* 新增：logo和文字区域样式 */
   .header-info {
      display: flex;
      align-items: flex-start;
      gap: 20px;
      margin-bottom: 20px;
    }