/* 
 */
/* 
.about-show
*/
/* 
 */
.about-show {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 72px;
    padding: 120px clamp(40px, 10vw, 240px) 100px;
    background-color: white;
}

.about-show-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

.about-show-title h2 {
    flex: 1;
    font-size: clamp(24px, 5vw, 36px);
    font-family: 600;
}

.about-show-title p {
    flex: 1;
    font-size: clamp(12px, 1.5vw, 18px);
    font-weight: 400;
    color: #777;
}

.about-show-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
}

.about-show-content>* {
    height: 100%;
    display: flex;
    flex-direction: column;
}


.about-show-content-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    background-color: #063231;
    padding: 40px;
}

.about-show-content-info h3 {
    font-size: clamp(12px, 1.5vw, 18px);
    color: #CBFF54;
    text-transform: uppercase;
}

.info-desc h2 {
    font-size: clamp(36px, 5vw, 48px);
    color: #CBFF54;
    margin-bottom: 20px;
}

.info-desc p {
    font-size: clamp(10px, 1.5vw, 16px);
    font-weight: 400;
    color: #B0D8D8;
}

.about-show-content-img {
    height: 100%;
    display: flex;
    user-select: none;
}

.about-show-content-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-show-content-info2 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    background-color: #CBFF54;
    padding: 40px;
}

.about-show-content-info2 h3 {
    font-size: clamp(12px, 1.5vw, 18px);
    text-transform: uppercase;
}

.info-desc2 h2 {
    font-size: clamp(36px, 5vw, 48px);
    margin-bottom: 20px;
}

.info-desc2 p {
    font-size: clamp(10px, 1.5vw, 16px);
    font-weight: 400;
    color: #775B55;
}

@media (max-width: 768px) {
    .about-show-content {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* 
 */
/* 
about-whychooseus
*/
/* 
 */
.about-whychooseus {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 64px;
    margin-top: 48px;
    padding: 80px clamp(40px, 10vw, 240px) 100px;
}

.about-whychooseus-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.about-whychooseus-title h3 {
    font-size: clamp(12px, 1.5vw, 16px);
    color: #063231;
    text-transform: uppercase;
}

.about-whychooseus-title h2 {
    font-size: clamp(24px, 5vw, 56px);
    color: #063231;
}

.about-whychooseus-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.infobox-whychooseus {
    display: flex;
    flex-direction: column;
    background-color: white;
    border-radius: 24px;
    padding: 48px;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
}

.infobox-whychooseus:hover {
    transform: translateY(-6px);
}

.infobox-whychooseus i {
    font-size: clamp(36px, 5vw, 48px);
    color: #063231;
}

.infobox-whychooseus h3 {
    font-size: clamp(16px, 2vw, 24px);
    /* color: #063231; */
}

.infobox-whychooseus p {
    font-size: clamp(12px, 1.5vw, 18px);
    font-weight: 400;
    color: #74827D;
}

@media (max-width: 1024px) {
    .about-whychooseus-content {
        grid-template-columns: repeat(1, 1fr);
    }
}


/* 
 */
/* 
about-foundation
*/
/* 
 */
.about-foundation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    background-color: white;
    padding: 100px clamp(40px, 10vw, 240px) 100px;
}

.about-foundation-img {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    user-select: none;
}

.about-foundation-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.infobox-foundation {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.infobox-foundation h3 {
    font-size: clamp(10px, 1.5vw, 16px);
    color: #063231;
}

.infobox-foundation h2 {
    font-size: clamp(36px, 5vw, 48px);
    margin-bottom: 8px;
}

.infobox-foundation p {
    font-size: clamp(14px, 1.5vw, 20px);
    font-weight: 400;
    color: #495B55;
}

.infobox-foundation ul {
    list-style: none;
    margin-top: 36px;
}

.infobox-foundation ul li {
    font-size: clamp(14px, 1.5vw, 20px);
    font-weight: 400;
    color: #495B55;
    line-height: 2;
}

.infobox-foundation ul li i {
    font-size: 22px;
    margin-right: 8px;
    color: #063231;
}

@media (max-width: 1024px) {
    .about-foundation {
        flex-direction: column;
        align-items: stretch;
    }

    .about-foundation>* {
        width: 100%;
    }
}



/*  */
/* 
 */
/* testimonials */
/* 
  */
.about-testimonials {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: clamp(40px, 8vw, 100px) clamp(40px, 10vw, 240px) clamp(40px, 8vw, 100px);
}

.about-testimonials-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.about-testimonials-title p {
    font-size: clamp(10px, 1.5vw, 14px);
    text-transform: uppercase;
}

.about-testimonials-title h2 {
    font-size: clamp(36px, 5vw, 48px);
}

.about-testimonials-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 48px;
}

.testimonials-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    gap: 24px;
    height: 100%;
    transition: transform 0.2s ease;
}

.testimonials-card:hover {
    transform: translateY(-6px);
}

.testimonials-card-icon {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 36px;
    user-select: none;
}

.testimonials-card-icon-star {
    color: #F0AD4E;
    display: flex;
    gap: 0;
}

.testimonials-card-icon .icon-quote {
    font-size: 36px;
}

.testimonials-card-desc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

.testimonials-card-desc H3 {
    font-size: clamp(16px, 2vw, 20px);
}

.testimonials-card-desc p {
    font-size: clamp(12px, 1.5vw, 16px);
    font-weight: 400;
}

.testimonials-card-author {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.testimonials-card-author img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 50%;
    user-select: none;
}

.testimonials-card-author p {
    font-size: clamp(16px, 2vw, 20px);
}

@media (max-width: 1024px) {
    .about-testimonials-content {
        grid-template-columns: repeat(1, 1fr);
    }
}



/*  */
/* 
 */
/* about-trusted */
/* 
 */
.about-trusted {
    background-color: white;
    padding: clamp(40px, 8vw, 100px) clamp(40px, 10vw, 240px) clamp(40px, 8vw, 100px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 48px;
}

.about-trusted-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.about-trusted-title {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.about-trusted-title h3 {
    font-size: clamp(10px, 1.5vw, 14px);
    color: #063231;
    text-transform: uppercase;
}

.about-trusted-title h2 {
    font-size: clamp(24px, 4vw, 48px);
}

.about-trusted-title p {
    font-size: clamp(10px, 1.5vw, 14px);
    color: #495B55;
}

.about-trusted-list {
    display: flex;
    gap: 16px;
    margin-top: 24px;
}

.about-trusted-list-data {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.about-trusted-list-data h2 {
    font-size: clamp(24px, 3vw, 36px);
    border-bottom: #B0D8D8 1px solid;
    margin-bottom: 16px;
}

.about-trusted-list-data h3 {
    font-size: clamp(16px, 2vw, 20px);
}

.about-trusted-list-data p {
    font-size: clamp(12px, 1.5vw, 16px);
    color: #495B55;
}

.about-trusted-img {
    flex: 1;
    position: relative;
    display: inline-block;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-trusted-img img {
    position: relative;
    display: block;
    border-radius: 16px;
    z-index: 1;
    user-select: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-trusted-img p {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: -36px;
    bottom: 24px;
    font-size: clamp(16px, 2vw, 20px);
    padding: 20px;
    background-color: #CBFF54;
    border-radius: 12px;
    z-index: 2;
    max-width: 150px;
}


@media (max-width: 768px) {
    .about-trusted {
        flex-direction: column;
    }
}


/* 
 */
/* 
about-info
*/
/* 
 */
.about-info {
    padding: clamp(40px, 8vw, 100px) clamp(40px, 10vw, 240px) clamp(40px, 8vw, 100px);
}

.about-info-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #CBFF54;
    border-radius: 24px;
    padding: 56px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    gap: 24px;
}

.about-info-box-title {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-right: 48px;
}

.about-info-box-title h3 {
    font-size: clamp(12px, 1.5vw, 16px);
    color: #063231;
}

.about-info-box-title h2 {
    font-size: clamp(36px, 5vw, 48px);
    margin-top: 8px;
}

.about-info-box-desc {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
}

.about-info-box-desc p {
    font-size: clamp(14px, 1.5vw, 20px);
    font-weight: 400;
    color: #495B55;
}

.about-info-box-desc a {
    display: inline-block;
    font-size: clamp(14px, 1.5vw, 20px);
    color: #CBFF54;
    background-color: #063231;
    border-radius: 24px;
    padding: 12px 24px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    user-select: none;
}

.about-info-box-desc a:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

@media (max-width: 768px) {
    .about-info-box {
        flex-direction: column;
        align-items: stretch;
        /* 子项宽度自动撑满容器 */
    }

    .about-info-box>* {
        width: 100%;
    }
}