/*
      后续如果要改字体大小和粗细，只改这里：

      --contact-main-title-size：最上面大标题 Still Have Questions?
      --contact-sub-title-size：小标题 Contact Us
      --contact-card-title-size：卡片里面的大标题，例如 Submit a Request
      --contact-card-text-size：卡片里面的正文、邮箱、电话

      --contact-main-title-weight：大标题粗细，截图这种建议 400
      --contact-sub-title-weight：小标题粗细
      --contact-card-title-weight：卡片标题粗细
      --contact-card-text-weight：正文粗细
    */
    :root {
      --contact-main-title-size: 36px;
      --contact-sub-title-size: 16px;
      --contact-card-title-size: 24px;
      --contact-card-text-size: 16px;
      --contact-button-text-size: 16px;

      --contact-main-title-weight: 400;
      --contact-sub-title-weight: 400;
      --contact-card-title-weight: 400;
      --contact-card-text-weight: 400;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: Arial, Helvetica, sans-serif;
      color: #222222;
      background-color: #fff;
    }

    .contact-section {
      width: 100%;
      background-color: #f4f4f4;
      padding: 70px 20px;
    }

    .contact-container {
      max-width: 1120px;
      margin: 0 auto;
    }

    /* 最上面大标题：Still Have Questions? */
    .contact-main-title {
      text-align: center;
      font-size: var(--contact-main-title-size);
      font-weight: var(--contact-main-title-weight);
      line-height: 1.25;
      margin-bottom: 10px;
      color: #222222;
      letter-spacing: 0.2px;
    }

    /* 小标题：Contact Us */
    .contact-sub-title {
      text-align: center;
      font-size: var(--contact-sub-title-size);
      font-weight: var(--contact-sub-title-weight);
      line-height: 1.3;
      margin-bottom: 42px;
      color: #222222;
      letter-spacing: 0.2px;
    }

    .contact-card-wrap {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    .contact-card {
      background-color: #ffffff;
      padding: 32px;
      min-height: 260px;
    }

    /* 卡片里面的大标题 */
    .contact-card h3 {
      font-size: var(--contact-card-title-size);
      font-weight: var(--contact-card-title-weight);
      line-height: 1.3;
      margin-bottom: 24px;
      color: #222222;
      letter-spacing: 0.2px;
    }

    /* 卡片里面的正文 */
    .contact-card p {
      font-size: var(--contact-card-text-size);
      font-weight: var(--contact-card-text-weight);
      line-height: 1.55;
      color: #222222;
      max-width: 280px;
    }

    /* 卡片里面的邮箱、电话链接 */
    .contact-card a {
      color: #222222;
      text-decoration: underline;
      font-size: var(--contact-card-text-size);
      font-weight: var(--contact-card-text-weight);
      line-height: 1.5;
      word-break: break-word;
    }

    .contact-button {
      display: inline-block;
      background-color: #000000;
      color: #ffffff !important;
      text-decoration: none !important;
      font-size: var(--contact-button-text-size);
      font-weight: 700;
      padding: 11px 20px;
      margin-bottom: 26px;
      border-radius: 1px;
      transition: opacity 0.25s ease;
    }

    .contact-button:hover {
      opacity: 0.82;
    }

    @media (max-width: 900px) {
      .contact-card-wrap {
        grid-template-columns: 1fr;
      }

      .contact-card {
        min-height: auto;
      }
    }

    @media (max-width: 520px) {
      .contact-section {
        padding: 50px 16px;
      }

      .contact-sub-title {
        margin-bottom: 30px;
      }

      .contact-card {
        padding: 26px 22px;
      }
    }