.nav-links {
    display: flex;
    list-style: none;
    gap: 30px;
}

.nav-links a {
    color: white;
    text-decoration: none;
    font-size: 14px;
}

.language-selector {
    margin-left: auto;
}

/* Hero Section 样式 */
.hero-section {
    position: relative;
    background: url('hero-bg.jpg') no-repeat center center / cover;
    color: white;
    text-align: center;
    padding: 100px 0;
}

.hero-content h2 {
    font-size: 36px;
    margin-bottom: 20px;
}

/* Contact Info Section 样式 */
.contact-info {
    background: white;
    padding: 60px 0;
}

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

.contact-info h3 {
    font-size: 24px;
    margin-bottom: 20px;
}

.info-row {
    display: flex;

    gap: 40px;
    margin-bottom: 40px;
    flex-direction: column;
}



.info-item {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1 1 30%;
    padding: 10px 0;
    /* 垂直居中 */

}

.info-item .text{
    text-align: left;
}

.info-item i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border: 1px solid #ccc;
    border-radius: 50%;
    padding: 15px;
    box-sizing: border-box;
}

.info-item i img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.info-item .text span {
    display: block;
    font-size: 14px;
    color: #555;
}

.info-item .text p {
    margin-top: 4px;
    font-size: 20px;
    color: #003e7e;
    font-weight: bold;
}

.info-item .text .grey-info{
    color: #666;
    font-size: 14px;
    font-weight: normal;
    float: right;
    margin-top: 50px;
    padding-left: 20px;
}

.info-item .text img{
    margin-top: 10px;
}




.map-row {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.map-item {
    flex: 1 1 48%;

}

.map-item img {
    width: 100%;
    margin-bottom: 10px;
    border-radius: 8px;
}

.map-item address {
    font-style: normal;
    color: #003e7e;
    text-align: left;
    font-size: 16px;
    font-weight: bold;
}

.map-item p
{
    text-align: left;
    color: #666;

}

/* Online Contact Section 样式 */
.online-contact {
    background: white;
    padding: 60px 0;
}

.online-contact h3 {
    font-size: 24px;
    margin-bottom: 20px;
}


.product-buttons
{
    display: flex;
    justify-content: flex-start;
}


.product-buttons button {
    background: #285BA9;
    color: white;
    border: none;
    padding: 15px 20px;
    margin-right: 10px;
    cursor: pointer;
    font-size: 12px;
}


.product-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
 
.btn-checkbox {
    cursor: pointer;
    position: relative; /* 为角标定位 */
}
 
.btn-checkbox input:checked + span {
    background-color: #285BA9;
    color: white;
    border-color: #285BA9;
}
 
/* 添加角标样式 */
/* .btn-checkbox input:checked + span::after {
    content: "2713";
    position: absolute;
    top: -5px;
    right: -5px;
    width: 12px;
    height: 12px;
    background-color: #fff; 
    border-radius: 50%;
    border: 2px solid white;
} */
 
/* 可选：如果想要文字角标（如"✓"） */

.btn-checkbox input:checked + span::after {
    content: "✓";
    position: absolute;
    top: -10px;
    right: -10px;
    width: 20px;
    height: 20px;
    background-color: #28a745;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border: 2px solid white;
}

 

.btn-checkbox span {
    display: block;
    padding: 8px 16px;
    background: #285BA9;
    border: 1px solid #285BA9;
    color: #fff;
    border-radius: 4px;
    transition: all 0.2s;
    font-size: 12px;
    position: relative; /* 为角标定位 */
}
 
.btn-checkbox:hover span {
    background: #f0f7ff;
}


.form-row {
    display: flex;
    align-items: flex-start; /* Align items to top */
    margin-bottom: 20px;
}

.form-label {
    text-align: left;
    flex: 0 0 210px; /* Set a fixed width for all labels */
    padding-top: 8px; /* Adjust if needed based on input alignment */
    font-size: 22px;
    color: #285BA9;
}
.form-label small{
    font-size: 14px;
}

.form-input {
    flex: 1; /* Takes remaining space */
}

.form-row input,
.form-row textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.form-row textarea {
    height: 100px;
}

.online-contact button[type="submit"] {
    background: #285BA9;
    color: white;
    border: none;
    padding: 10px 40px;
    border-radius: 4px;
    cursor: pointer;
}

/* Join Us Section 样式 */
.join-us {
    background: url('join-us-bg.jpg') no-repeat center center / cover;
    color: white;
    text-align: center;
    padding: 60px 0;
}

.join-us h3 {
    font-size: 24px;
    margin-bottom: 20px;
}

.btn-more {
    background: #285BA9;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
}

/* 淡入动效 */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.show {
    opacity: 1;
    transform: translateY(0);
}

.join-title
{
    text-align: left;
    padding-bottom: 40px;
   
}
.join-title h3{
    font-size: 20px;
    color: #285BA9;
    font-weight: normal;
}
.join-title h3 img{
    padding-right: 10px;
    width: 28px;
}
.join-title p{
  font-size: 30px;
  color: #222;
}
.join-content {
    display: flex;
    gap: 40px; /* 左右间距 */
    flex-wrap: wrap; /* 支持响应式换行 */
   
    padding-bottom: 40px;
    border-bottom: 1px solid #ccc;
}

.info-row,
.map-row {
    flex: 1 1 45%; /* 每个模块占 45% 宽度，留出间隙 */
    min-width: 300px; /* 防止在小屏幕上过窄 */
}

.contact-link-more {
      background-image: url('../images/joinus-bg.png');
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      /* 背景图片圆角 */
      border-radius: 15px;
      /* 设置圆角大小 */

      color: #fff;
      margin-bottom: 15px;
      height: 350px;

    }

    .contact-content-joinus {
      position: absolute;
      right: 25%;
      top: 80px;
      font-size: 14px;
      line-height: 24px;
    }

    .contact-title-joinus {
      padding-bottom: 30px;
      font-size: 32px;
    }

    .contact-content-joinus .contact-content-desc {
      font-size: 14px;
      line-height: 28px;
    }

    .contact-content-joinus .pb40 {
        padding-bottom: 40px;
       
    }
       

    .contact-content-joinus .btn-more {
      color: #fff;
      margin-top: 25px;
      font-size: 12px;
    }



/* 响应式布局 */
@media screen and (max-width: 768px) {
    .info-row,
    .map-row {
        flex-direction: column;
    }

   
    .join-content {
        flex-direction: column;
    }
}