<template>
  <div>
    <NavMenu></NavMenu>
    <div class="home_heroSection">
      <div class="homeView_leftBox">
        <div class="homeView_leftBox_padding_top"></div>
        <div class="logoContainer">
          <img src="@/assets/logo2.png" alt="Logo"/>
        </div>
        <div class="textContainer">
          <div class="textContainer_title">Buddy’s Cloud</div>
          <div class="textContainer_title2">AWS云服务全球代理商</div>
          <div class="right_to"><a :href="contactLinks.Arrow" target="_blank"><img src="../assets/icon/Arrow.png" alt="buddy.com"></a></div>
          <div class="font-size-subtitle3">可信任的AWS云上伙伴，量身定制的AWS云解决方案</div>
          <div class="font-size-paragraph2">Trusted AWS partners on the cloud, Tailor-made AWS cloud solutions</div>
        </div>
      </div>
      <div class="homeView_rightBox"></div>
    </div>
    <div class="personalized-service">
      <div class="personalized-service-left">
        <img src="../assets/back/diannao.jpg" alt="Personalized Service Icon"/>
      </div>
      <div class="personalized-service-right">
        <div class="top-content">
          <div class="personalized-service-right-h2">个性化服务</div>
          <h3>Personalized service</h3>
        </div>
        <div class="bottom-content">
          <p>在Buddy's
            Cloud，我们相信没有一种云解决方案能够适合所有人，这就是为什么我们提供个性化的咨询服务，帮助客户了解他们的需求，并从众多云服务中选择最合适的。</p>
          <p>At Buddy's Cloud, we believe that no one cloud solution is right for everyone, which is why we offer one
            personalized consulting services to help customers understand their needs and choose the most suitable one
            from a wide range of cloud services.</p>
        </div>
      </div>
    </div>
    <div class="service-section">
      <div class="service-section-mini">
        <div class="service-card">
          <img src="../assets/icon/Question.png" alt="Technical advice" class="service-icon"/>
          <h3>技术咨询 <span>Technical advice</span></h3>
          <p>免费提供技术咨询，解答您使用AWS服务过程中遇到的任何问题，帮助您的业务增长。</p>
          <p>Free technical consultation to answer all your questions about using AWS services and help your business
            grow.</p>
        </div>

        <div class="service-card">
          <img src="../assets/icon/File.png" alt="Bill payment" class="service-icon"/>
          <h3>账单代付 <span>Bill payment</span></h3>
          <p>与我们合作的组织，接受多种货币支付，包括人民币、美元和其它外币。</p>
          <p>Affiliated with our organization, accepting a wide range of currencies,including RMB, USD, and tokens.</p>
        </div>

        <div class="service2-card">
          <h3>服务类型 <span>type of service</span></h3>
          <div>
            <p>我们的服务不仅限于技术层面，更包括帮助客户理解云服务，助力他们的业务成长。</p>
            <p>Our services not only on the technical side, but also on helping customers understand cloud services and
              help their businesses grow.</p>
          </div>
        </div>

        <div class="service-card">
          <img src="../assets/icon/User.png" alt="Account opening" class="service-icon"/>
          <h3>账户开通 <span>Account opening</span></h3>
          <p>免费安全开设AWS账户，账户信息安全无忧，您不需要担心账户安全。</p>
          <p>No real-name and no card registration,safe and stable, and account secretsTake control of your own and
            don't need to worry about account security.</p>
        </div>

        <div class="service-card">
          <img src="../assets/icon/Checklist.png" alt="Account management" class="service-icon"/>
          <h3>账户解锁 <span>Unblock your account</span></h3>
          <p>AWS原生技术支持，稳定的账户注册与续期服务。</p>
          <p>AWS original technical support, stable account unblocking and renewal.</p>
        </div>

        <div class="service-card">
          <img src="../assets/icon/Refresh.png" alt="Channel conversion" class="service-icon"/>
          <h3>渠道转换 <span>Channel conversion</span></h3>
          <p>转接代理商，原价续费。</p>
          <p>Convert the agent and renew the originalprice.</p>
        </div>
      </div>
      <div class="service-menu-wrapper">
        <div class="service-card-item">
          <div class="service-card-icon-container">
            <img src="../assets/icon/Question.png" alt="Technical advice"/>
          </div>
          <div class="service-card-text">
            <span class="service-card-text-chinese">技术咨询</span>
            <span class="service-card-text-english">Technical advice</span>
          </div>
        </div>

        <div class="service-card-item tem-borderleft">
          <div class="service-card-icon-container">
            <img src="../assets/icon/File.png" alt="Bill payment"/>
          </div>
          <div class="service-card-text">
            <span class="service-card-text-chinese">账单代付</span>
            <span class="service-card-text-english">Bill payment</span>
          </div>
        </div>

        <div class="service-card-item">
          <div class="service-card-icon-container">
            <img src="../assets/icon/User.png" alt="Account opening"/>
          </div>
          <div class="service-card-text">
            <span class="service-card-text-chinese">账户开通</span>
            <span class="service-card-text-english">Account opening</span>
          </div>
        </div>

        <div class="service-card-item tem-borderleft">
          <div class="service-card-icon-container">
            <img src="../assets/icon/Checklist.png" alt="Unblock your account"/>
          </div>
          <div class="service-card-text">
            <span class="service-card-text-chinese">账户解封</span>
            <span class="service-card-text-english">Unblock your account</span>
          </div>
        </div>

        <div class="service-card-item">
          <div class="service-card-icon-container">
            <img src="../assets/icon/Refresh.png" alt="Channel conversion"/>
          </div>
          <div class="service-card-text">
            <span class="service-card-text-chinese">渠道转换</span>
            <span class="service-card-text-english">Channel conversion</span>
          </div>
        </div>
      </div>
      <div class="service-process">
        <div class="service-process-title">
          <span class="service-process-main-title">服务流程</span>
          <span class="service-process-sub-title">Service process</span>
        </div>

        <div class="service-process-icons">
          <div class="service-process-icons-box">
            <div class="service-process-icon">
              <img src="../assets/icon/Smile.png" alt="Pre-sale" class="icon-image"/>
            </div>
            <div class="service-process-icon-title">售前</div>
            <div class="service-process-icon-p">联系客户经理，免费咨询</div>
          </div>

          <div class="service-process-icons-box service-process-icons-box2">
            <div class="service-process-icon">
              <img src="../assets/icon/Cart.png" alt="In progress" class="icon-image"/>
            </div>
            <div class="service-process-icon-title">售中</div>
            <div class="service-process-icon-p">多种支付方式可选</div>
          </div>
          <div class="service-process-icons-box3">

            <div class="service-process-icon-title">售中</div>
            <div class="service-process-icon-p">多种支付方式可选</div>
            <div class="service-process-icon">
              <img src="../assets/icon/Cart.png" alt="In progress" class="icon-image"/>
            </div>
          </div>
          <div class="service-process-icons-box">
            <div class="service-process-icon">
              <img src="../assets/icon/24h.png" alt="After sale" class="icon-image"/>
            </div>
            <div class="service-process-icon-title">售后</div>
            <div class="service-process-icon-p">技术支持，24小时运维</div>
          </div>
        </div>
      </div>
    </div>
    <contactUs></contactUs>
    <div style="background: #ff6702;padding: 5% 0">
      <div class="team-member-card">
        <div class="team-member-photo">
          <div class="team-member-photo-right-icon"><img src="../assets/icon/img_2.png"></div>
          <div class="team-card-header">
            <p>Buddy's Cloud</p>
            <p class="org_bar"></p>
          </div>
          <div class="team-card-body">
            <div class="team-photo">
              <img src="../assets/back/FRANK-03.png" alt="Frank Wang"/>
            </div>
          </div>
          <div class="team-card-footer">
            <div class="team-card-footer-name">Frank Wang <span>AWS Service</span></div>
            <p>知云 懂云 用云 <img src="../assets/icon/img.png" alt=""></p>
          </div>
        </div>
        <div class="team-member-info">
          <h2>Frank Wang</h2>
          <p class="description">
            AWS中国代理，超过十年专业AWS使用经验，解决3000+客户的技术问题，专业素质强，人脉广泛，结识AWS原厂技术员和阿里国际总代理。</p>
          <p class="description">AWS China general agent, more than 10 years of professional AWS experience, Solve the
            technical problems of 3000+ customers, strong professional quality and connections. Extensively, get
            acquainted with AWS original technicians and Ali international distributors.</p>
        </div>
      </div>

    </div>
    <div class="service-table">
      <div style="width: 80%;margin: 0 auto;border-top: 8px solid #ff6702;">
        <div class="service-table-row">
          <div class="service-table-icon"><img src="../assets/icon/Building.png" alt=""></div>
          <div class="service-table-row-mini">
            <div class="service-table-cell title">服务类型</div>
            <div class="row-mini-lie">
              <div class="service-table-cell">
                <div>轻量云服务器</div>
                <div>ec2服务器</div>
              </div>
              <div class="service-table-cell">
                <div>站群服务器</div>
                <div>高防服务器</div>
              </div>
            </div>
            <div class="service-table-cell"><a :href="contactLinks.CustomerService" target="_blank">更多咨询客服
              <svg t="1740226957523" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg"
                   p-id="4090" width="200" height="200">
                <path
                  d="M744.848 536L472.96 807.248a42.56 42.56 0 0 0 0 60.272 42.8 42.8 0 0 0 60.416 0l302.128-301.376a42.56 42.56 0 0 0 0-60.288L533.36 204.48a42.8 42.8 0 0 0-60.416 0 42.56 42.56 0 0 0 0 60.272L744.848 536z m-300.416 0L172.512 807.248a42.56 42.56 0 0 0 0 60.272 42.8 42.8 0 0 0 60.432 0L535.04 566.144a42.56 42.56 0 0 0 0-60.288L232.96 204.48a42.8 42.8 0 0 0-60.432 0 42.56 42.56 0 0 0 0 60.272L444.432 536z"
                  fill="#7e7d7d" p-id="4091"></path>
              </svg>
            </a></div>
          </div>

        </div>

        <div class="service-table-row">
          <div class="service-table-icon"><img src="../assets/icon/Location.png" alt=""></div>
          <div class="service-table-row-mini">
            <div class="service-table-cell title">地址范围</div>
            <div class="row-mini-lie">
              <div class="service-table-cell">
                <div>中国香港</div>
                <div>新加坡</div>
              </div>
              <div class="service-table-cell">
                <div>美国</div>
                <div>日本</div>
              </div>
            </div>
            <div class="service-table-cell"><a :href="contactLinks.CustomerService" target="_blank">更多咨询客服
              <svg t="1740226957523" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg"
                   p-id="4090" width="200" height="200">
                <path
                  d="M744.848 536L472.96 807.248a42.56 42.56 0 0 0 0 60.272 42.8 42.8 0 0 0 60.416 0l302.128-301.376a42.56 42.56 0 0 0 0-60.288L533.36 204.48a42.8 42.8 0 0 0-60.416 0 42.56 42.56 0 0 0 0 60.272L744.848 536z m-300.416 0L172.512 807.248a42.56 42.56 0 0 0 0 60.272 42.8 42.8 0 0 0 60.432 0L535.04 566.144a42.56 42.56 0 0 0 0-60.288L232.96 204.48a42.8 42.8 0 0 0-60.432 0 42.56 42.56 0 0 0 0 60.272L444.432 536z"
                  fill="#7e7d7d" p-id="4091"></path>
              </svg>
            </a></div>
          </div>

        </div>

        <div class="service-table-row">
          <div class="service-table-icon"><img src="../assets/icon/Wi-Fi.png" alt=""></div>
          <div class="service-table-row-mini">
            <div class="service-table-cell title">带宽范围</div>
            <div class="row-mini-lie">
              <div class="service-table-cell">
                <div>5M</div>
                <div>10M</div>
              </div>
              <div class="service-table-cell">
                <div>100M</div>
                <div>1000M</div>
              </div>
            </div>
            <div class="service-table-cell"><a :href="contactLinks.CustomerService" target="_blank">更多咨询客服
              <svg t="1740226957523" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg"
                   p-id="4090" width="200" height="200">
                <path
                  d="M744.848 536L472.96 807.248a42.56 42.56 0 0 0 0 60.272 42.8 42.8 0 0 0 60.416 0l302.128-301.376a42.56 42.56 0 0 0 0-60.288L533.36 204.48a42.8 42.8 0 0 0-60.416 0 42.56 42.56 0 0 0 0 60.272L744.848 536z m-300.416 0L172.512 807.248a42.56 42.56 0 0 0 0 60.272 42.8 42.8 0 0 0 60.432 0L535.04 566.144a42.56 42.56 0 0 0 0-60.288L232.96 204.48a42.8 42.8 0 0 0-60.432 0 42.56 42.56 0 0 0 0 60.272L444.432 536z"
                  fill="#7e7d7d" p-id="4091"></path>
              </svg>
            </a></div>
          </div>

        </div>

        <div class="service-table-row">
          <div class="service-table-icon"><img src="../assets/icon/Grid.png" alt=""></div>
          <div class="service-table-row-mini">
            <div class="service-table-cell title">配置大小</div>
            <div class="row-mini-lie">
              <div class="service-table-cell">
                <div>2核0.5G</div>
                <div>2核1G</div>
              </div>
              <div class="service-table-cell">
                <div>2核2G</div>
                <div>2核4G</div>
              </div>
            </div>
            <div class="service-table-cell"><a :href="contactLinks.CustomerService" target="_blank">更多咨询客服
              <svg t="1740226957523" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg"
                   p-id="4090" width="200" height="200">
                <path
                  d="M744.848 536L472.96 807.248a42.56 42.56 0 0 0 0 60.272 42.8 42.8 0 0 0 60.416 0l302.128-301.376a42.56 42.56 0 0 0 0-60.288L533.36 204.48a42.8 42.8 0 0 0-60.416 0 42.56 42.56 0 0 0 0 60.272L744.848 536z m-300.416 0L172.512 807.248a42.56 42.56 0 0 0 0 60.272 42.8 42.8 0 0 0 60.432 0L535.04 566.144a42.56 42.56 0 0 0 0-60.288L232.96 204.48a42.8 42.8 0 0 0-60.432 0 42.56 42.56 0 0 0 0 60.272L444.432 536z"
                  fill="#7e7d7d" p-id="4091"></path>
              </svg>
            </a></div>
          </div>


        </div>
      </div>
    </div>
    <FooterMenu></FooterMenu>
  </div>
</template>

<script>
import NavMenu from "../components/NavMenu.vue";
import contactUs from "./contactUs.vue";
import FooterMenu from "../components/FooterMenu.vue";
import '../assets/CSS/styles.css';
import { contactLinks } from '../static/js/contact_link.js';
export default {
  components: {NavMenu, contactUs, FooterMenu},
  setup() {
    return {contactLinks}
  }
}
</script>

<style scoped>
/*home_heroSection*/
.home_heroSection {
  width: 100%;
  height: 560px;
  display: flex;
  justify-content: space-between;
  border: 1px solid #ff6702;
}

.homeView_leftBox {
  background: var(--footer-link-color);
  width: 50%;
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.logoContainer img {
  width: 160px;
  height: auto;
}



.textContainer {
  text-align: center;
  color: white;
}

.textContainer_title {
  font-size: var(--font-size-subtitle2);
  font-weight: bold;
}

.textContainer_title2 {
  font-size: var(--font-size-title2);
  margin-bottom: 10px;
}

.font-size-subtitle3 {
  font-size: var(--font-size-subtitle3);
}

.font-size-paragraph2 {
  margin: 5px 0;
  font-size: var(--font-size-subtitle3);

}

.right_to {
  width: 50px;
  height: 50px;
  margin: 0 auto 8% auto;
}

.right_to img {
  width: 100%;
  height: 100%;
}

.homeView_rightBox {
  width: 50%;
  height: 100%;
  background: url("../assets/back/jianzhu.jpg") no-repeat center center;
  background-size: cover;
}

/*personalized-service*/

.personalized-service {
  display: flex;
  padding: 5rem 0;
  background-color: #fff;
  margin-bottom: 20px;
  width: 100%;
}

.personalized-service-left {
  width: 40%;
  display: flex;
  justify-content: right;
}

.personalized-service-left img {
  width: 70%; /* 图标的宽度 */
  height: auto;
}

.personalized-service-right {
  width: 50%;
  padding-left: 5rem;
  position: relative;
}

.personalized-service-right-h2 {
  font-size: var(--font-size-title3);
  color: #ff6702;
  margin-bottom: 10px;
  font-weight: bold;
}

.personalized-service-right h3 {
  font-size: 1.2rem;
  color: #ff6702;
  margin-bottom: 15px;
}

.personalized-service-right p {
  font-size: var(--font-size-paragraph2);
  line-height: 1.6;
  color: #333;
}

.bottom-content {
  position: absolute;
  bottom: 0;
}

/*service-section*/
.service-section {
  width: 100%;
  background-color: #ff6702;
}

.service-section-mini {
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 卡片之间的间距 */
  justify-content: space-between; /* 将卡片均匀分布 */
  padding: 5rem 2rem;
  margin: 0 auto;
}

.service-card {
  background-color: #fff;
  color: #000;
  padding: 20px;
  width: 30%; /* 每个卡片占三分之一宽度 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: left;
}

.service2-card {
  width: 30%; /* 宽度占满整行 */
  border-left: 4px solid white;
  color: white;
  padding-left: 25px;
}

.service-icon {
  width: clamp(0.2rem, 5vw, 10rem);
  height: clamp(0.2rem, 5vw, 10rem);
  margin-bottom: 15px;
}

.service-card h3 {
  font-size: clamp(0.2rem, 1.5vw, 2rem);
  margin-bottom: 10px;
  color: #ff6702;
}

.service2-card h3 {
  font-size: clamp(0.2rem, 1.5vw, 2rem);
  position: relative;
}

.service2-card div {
  height: 70%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  font-size: clamp(0.2rem, 1.5vw, 1rem);
}

.service-card h3 span {
  font-size: clamp(0.2rem, 1.4vw, 1.3rem);
}

.service-card p {
  font-size: clamp(0.2rem, 1.5vw, 1rem);
  line-height: 1.5;
  margin-bottom: 0;
}

.team-member-photo-right-icon {
  display: none;
}

/* Container for the service process */
.service-process {
  background-color: #ff6702;
  padding: 30px;
  color: white;
}

.service-process-title {
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 20px;
}

.service-process-main-title {
  font-size: clamp(1.3rem, 2vw, 2rem);
  margin-bottom: 5px;
}

.service-process-sub-title {
  font-size: clamp(1rem, 1.5vw, 1.5rem);
}

/* Icons section */
.service-process-icons {
  display: flex;
  justify-content: center;
  gap: 5rem;
  flex-wrap: wrap;
  width: 80%;
  margin: 0 auto;
}

.service-process-icons-box {
  color: #000;
  padding: 20px;
  width: 15%;
  text-align: center;

}

.service-process-icons-box3 {
  color: #000;
  padding: 20px 0;
  width: 31%;
  text-align: center;
  display: none;
}

.service-process-icon {
  background-color: white;
  border-radius: 100%;
  width: clamp(3.2rem, 6vw, 6rem);
  height: clamp(3.2rem, 6vw, 6rem);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 15px auto;
}

.icon-image {
  width: 90%;
  height: 90%;
}

.service-process-icon-title {
  font-size: clamp(1.2rem, 1.5vw, 1.5rem);
  font-weight: bold;
  margin-bottom: 10px;
  color: white;
}

.service-process-icon-p {
  font-size: clamp(0.8rem, 1.5vw, 1rem);
  line-height: 1.5;
  color: white;
}

/*team-member-car*/
.team-member-card {
  display: flex;
  background-color: #ff6702;

  align-items: flex-end;
  width: 80%;
  height: 600px;
  margin: 0 auto;
}

/* Header Styling */
.team-card-header {
  background-color: #fff;
  color: #ff6702;
  font-size: 15px;
  font-weight: bold;
  display: flex;
  justify-content: center;
}

.org_bar {
  width: 70%;
  border-bottom: 1px solid #ff6702;
}

/* Body Styling */
.team-card-body {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.team-photo {
  background: #ff6702;
}

.team-photo img {
  width: 400px;
  height: 400px;
}

.team-info h2 {
  font-size: 24px;
  margin: 0;
  color: #333;
}

.team-info .role {
  font-size: 16px;
  color: #ff6702;
  margin: 5px 0;
}

.team-info .description {
  font-size: 14px;
  color: #777;
  line-height: 1.5;
  margin-top: 10px;
}

/* Footer Styling */
.team-card-footer {
  background-color: white;
  padding: 10px;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.team-card-footer p {
  color: #ff6702;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
  font-weight: 400;
}

.team-card-footer-name {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #333;
  font-size: clamp(0.2rem, 1.5vw, 3rem);
  position: relative;
}

.team-card-footer-name span {
  font-size: 15px;
  color: #ff6702;
  position: absolute;
  bottom: 0;
  right: 0;
}

.team-card-footer p img {
  width: 73px;
  height: 24px;
}

.team-member-photo {
  background: #ffffff;
  padding: 20px;
}

.team-member-info {
  width: 50%;
  padding: 0 1%;
  margin-left: 4%;
  border-left: 4px solid #fff;
}

.team-member-info h2 {
  font-size: clamp(1.2rem, 2.5vw, 3rem);
  color: #fff;
  margin: 0 0 5% 0;
  font-weight: bold;
}

.team-member-info .role {
  font-size: 1.2rem;
  color: #fff;
  margin-top: 5px;
}

.team-member-info .description {
  font-size: clamp(0.8rem, 1.5vw, 1.5rem);
  color: #fff;
  margin-top: 10px;
}

.service-table {
  padding: 5% 0;
}

.service-table-row {
  display: flex;
  padding: 10px 5%;
  border-bottom: 8px solid #ff6702;
  align-items: center;
  justify-content: space-between;
}

.service-table-row:hover {
  background-color: rgba(255, 103, 2, 0.2);
}

.service-table-icon {
  width: 30%;
}

.service-table-icon img {
  width: 150px;
  height: 150px;
}

.service-table-cell {
  text-align: left;
  padding: 10px;
  color: #ff6702;
  width: 30%;
  font-size: clamp(0.2rem, 1vw, 1.2rem);
}

.service-table-cell div {
  margin-top: 10px;
}

.service-table-cell.title {
  font-weight: bold;
  color: #ff6702;
  font-size: clamp(0.2rem, 1.5vw, 3rem);

}

.service-table-cell a {
  color: #7e7d7d;
  text-decoration: none;
  display: flex;
  align-items: center;
  font-size: clamp(0.2rem, 1vw, 1.2rem);
}

.service-table-cell a svg {
  width: 25px;
  height: 25px;
}

.service-table-cell a:hover {
  text-decoration: underline;
}

.service-menu-wrapper {
  display: none;
}

.service-table-row-mini {
  width: 70%;
  display: flex;
  align-items: center;
}

.row-mini-lie {
  width: 80%;
  display: flex;
  align-items: center;
}

@media (max-width: 800px) {
  .home_heroSection {
    display: flex;
    flex-direction: column;
  }

  .homeView_leftBox {
    width: 100%;
    padding: 20px 0 0 0;
  }

  .homeView_rightBox {
    width: 100%;
    height: 100%;
  }

  .logoContainer img {
    width: 120px;
    height: auto;
  }

  .right_to {
    width: 40px;
    height: 40px;
    margin: 0 auto 0 auto;
  }

  .personalized-service {
    margin-bottom: 0;
    padding: 40px 0;
  }

  .personalized-service-left {
    width: 40%;
    display: none;
  }

  .personalized-service-right {
    width: 90%;
    padding-left: 5%;
    position: static;
    margin: 0 auto;
    border-left: 4px solid #ff6702;
  }

  .bottom-content {
    position: static;
  }
  .bottom-content p{
    position: static;
    font-size: 1rem !important;
  }
  .personalized-service-right-h2 {
    color: #ff6702;
    margin-bottom: 1%;
    font-weight: bold;
  }

  .personalized-service-right p {
    color: #333;
    line-height: 1.2;
    margin-bottom: 0;
  }

  .personalized-service-right h3 {
    margin-bottom: 1%;
  }

  .service-section {
    background-color: #ffffff;
  }

  .service-section-mini {
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    justify-content: space-between;
    padding: 0;
    margin: 0 auto 30px auto;
  }

  .service-card {
    display: none;
  }

  .service2-card {
    width: 90%;
    border-left: 4px solid #ff6702;
    color: #000000;
    padding-left: 25px;
  }

  .service2-card h3 {
    font-size: var(--font-size-title3);
    position: static;
    color: #ff6702;
    font-weight: bold;
  }

  .service2-card h3 span {
    display: block;
    font-size: 1.2rem;
    font-weight: 400;
  }

  .service2-card div {
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    font-size: var(--font-size-paragraph2);
  }

  .service2-card div p {
    margin-bottom: 0;
    font-size: 1rem !important;
  }

  .service-process {
    background-color: #ff6702;
    padding: 10px 0;
    color: white;
  }

  .service-process-title {
    text-align: left;
    width: 90%;
    margin: 0 auto;
    font-weight: 400;
  }

  .service-process-icons {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    width: 90%;
  }

  .service-process-icons-box {
    color: #000;
    padding: 20px 0;
    width: 31%;
    text-align: center;
  }

  .service-process-icons-box2 {
    color: #000;
    padding: 20px 0;
    width: 31%;
    text-align: center;
    display: none;
  }

  .service-process-icons-box3 {
    color: #000;
    padding: 20px 0;
    width: 31%;
    text-align: center;
    display: inline-block;
  }

  .service-process-icon {
    margin-top: 8%;
  }

  .service-menu-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 10px;
  }

  .service-card-item {
    display: flex;
    align-items: center;
  }

  .service-card-icon-container {
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    margin-bottom: 10px;

  }

  .service-card-icon-container img {
    width: 40px;
    height: 40px;
  }

  .service-card-text {
    text-align: center;
    font-weight: bold;
  }

  .service-card-text-chinese {
    display: block;
    font-size: 16px;
    color: #ff6702;
  }

  .service-card-text-english {
    display: block;
    font-size: 12px;
    color: #ff6702;
  }

  .tem-borderleft {
    border-left: 2px solid #ff6702;
  }

  .team-member-card {
    display: flex;
    background-color: #ff6702;
    align-items: flex-end;
    flex-direction: column;
    width: 90%;
    height: 600px;
    margin: 0 auto;
  }

  .team-card-header {
    display: none;
  }

  .team-member-photo {
    background: #ff6702;
    padding: 3% 0;
    width: 90%;
    margin: 0 auto;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
  }

  .team-card-footer {
    display: none;
  }

  .team-photo img {
    width: 200px;
    height: 200px;
  }

  .team-member-card {
    height: auto;
    position: relative;
  }

  .team-member-info {
    width: 90%;
    padding: 0;
    margin: 0 auto;
    border-left: none;
  }

  .team-member-info h2 {
    font-size: max(1.5rem, min(2.5vw, 3rem));
    color: #fff;
    margin: 0;
    font-weight: bold;
    text-align: right;
  }

  .team-member-info .description {
    color: rgba(255, 255, 255, 0.77);
  }

  .team-member-photo-right-icon {
    display: inline-block;
  }

  .team-member-photo-right-icon img {
    width: 66px;
    height: 20px;
    position: absolute;
    right: 1rem;
    top: 0;
  }

  .service-table-icon img {
    width: 100px;
    height: 100px;
  }
  .service-table-row-mini{
    width: 100%;
    display: flex;
    align-items:stretch;
    flex-direction: column;
  }
  .service-table-cell.title{
    font-size: max(1.2rem, min(1.5vw, 3rem));
    width: 100%;
    text-align: center;
    padding: 0;
  }
  .service-table-cell {
    color: #ff6702;
    width: 100%;
    font-size: max(0.9rem, min(1vw, 1.2rem));
    text-align: center;
    padding: 3px;
  }
  .row-mini-lie {
    width: 100%;
    display: flex
  ;
    align-items: center;
  }
  .service-table-cell a{
    color: #7e7d7d;
    text-decoration: none;
    display: flex
  ;
    justify-content: center;
    align-items: center;
    font-size: max(0.9rem, min(1vw, 1.2rem));
    margin: 0 auto;
  }
  .service-table-cell a svg {
    width: 20px;
    height: 20px;
    margin-bottom: 1px;
  }
  .service-table-cell div{
    margin: 0;
  }
}
</style>
