/* =========================================================
                    Team Contact
                    主色：#037583
                    黑色：文字
    ========================================================= */


    /* =========================
    Section
    ========================= */

    .team-contact-section {
        padding: 70px 20px;
        background: #f8fafb;
    }

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


    /* =========================
    Header
    ========================= */

    .team-contact-header {
        text-align: center;
        margin-bottom: 45px;
    }

    .team-contact-header .eyebrow {
        display: inline-block;
        margin-bottom: 10px;
        color: #037583;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 3px;
        text-transform: uppercase;
    }

    .team-contact-header h2 {
        margin: 0;
        color: #000;
        font-size: 36px;
        line-height: 1.25;
        font-weight: 700;
    }

    .team-contact-header p {
        margin: 12px auto 0;
        max-width: 650px;
        color: #037583;
        font-size: 15px;
        line-height: 1.8;
    }


    /* =========================
                    Contact List
                    ========================= */

    /* =========================
                    Contact List
                    现代自适应布局
                    ========================= */

    .team-contact-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 24px;
    }

    .team-contact-card {
        flex: 0 1 calc(33% - 18px);
        max-width: 320px;
        min-width: 260px;
    }

    /* =========================
                    Card
                    ========================= */

    .team-contact-card {
        position: relative;
        background: #fff;
        border: 1px solid rgba(3, 117, 131, .12);
        border-radius: 18px;
        overflow: hidden;

        box-shadow:
            0 6px 25px rgba(3, 117, 131, .07);

        transition:
            transform .3s ease,
            box-shadow .3s ease,
            border-color .3s ease;
    }

    .team-contact-card:hover {
        transform: translateY(-6px);

        border-color: rgba(3, 117, 131, .25);

        box-shadow:
            0 18px 45px rgba(3, 117, 131, .15);
    }


    /* =========================
                    Avatar
                    ========================= */

    .team-contact-avatar {
        padding: 35px 20px 20px;
        text-align: center;
    }


    /*
                    * 800 × 600 图片
                    *
                    * 通过固定正方形 + object-fit: cover
                    * 裁切成正方形，然后 border-radius 50%
                    * 最终成为圆形头像
                    */

    .team-contact-avatar-wrap {
        width: 150px;
        height: 150px;

        margin: 0 auto;

        overflow: hidden;

        border-radius: 50%;

        background: #eef7f8;

        border: 5px solid #e8f3f4;

        box-shadow:
            0 8px 25px rgba(3, 117, 131, .12);
    }

    .team-contact-avatar img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center center;
    }


    /* =========================
                    Name
                    ========================= */

    .team-contact-name {
        margin-top: 18px;

        color: #000;

        font-size: 19px;
        line-height: 1.4;

        font-weight: 700;
    }

    .team-contact-position {
        margin-top: 4px;

        color: #037583;

        font-size: 13px;
        line-height: 1.5;
    }


    /* =========================
                    Contact Information
                    ========================= */

    .team-contact-info {
        padding: 10px 24px 20px;
    }


    /* 每一行 */

    .team-contact-item {
        display: flex;
        align-items: center;

        min-height: 40px;

        padding: 5px 0;

        border-bottom: 1px solid #edf4f5;

        color: #000 !important;

        font-size: 13px;

        text-decoration: none !important;

        transition:
            color .2s ease,
            background .2s ease;
    }

    .team-contact-item:last-child {
        border-bottom: 0;
    }


    /* hover */

    .team-contact-item:hover {
        color: #037583 !important;
    }


    /* =========================
                    Contact Icons
                    ========================= */

    .team-contact-icon {
        flex: 0 0 30px;

        width: 30px;
        height: 30px;

        margin-right: 9px;

        display: flex;
        align-items: center;
        justify-content: center;

        border-radius: 50%;

        font-size: 14px;

        color: #037583;

        background: #eef7f8;

        transition:
            color .2s ease,
            background .2s ease;
    }


    /* 所有图标统一颜色 */

    .team-contact-icon.phone,
    .team-contact-icon.email,
    .team-contact-icon.whatsapp {
        color: #037583;
        background: #eef7f8;
    }


    /* hover */

    .team-contact-item:hover .team-contact-icon {
        color: #fff;
        background: #037583;
    }


    /* =========================
                    Contact Text
                    ========================= */

    .team-contact-text {
        min-width: 0;

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;

        line-height: 1.5;
    }


    /* =========================
                    Footer / Button
                    ========================= */

    .team-contact-footer {
        padding: 0 24px 28px;
    }


    /* Contact Me */

    .team-contact-button {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        min-height: 44px;

        border: 1px solid #037583;

        border-radius: 25px;

        background: #fff;

        color: #037583 !important;

        font-size: 13px;
        font-weight: 600;

        text-decoration: none !important;

        transition:
            color .25s ease,
            background .25s ease,
            box-shadow .25s ease,
            transform .25s ease;
    }


    /* Button hover */

    .team-contact-button:hover {
        background: #037583;

        color: #fff !important;

        box-shadow:
            0 7px 18px rgba(3, 117, 131, .22);
    }


    /* Arrow */

    .team-contact-button i {
        margin-left: 8px;

        color: #037583;

        transition:
            color .25s ease,
            transform .25s ease;
    }

    .team-contact-button:hover i {
        color: #fff;

        transform: translateX(4px);
    }


    /* =========================
                    Bottom Text
                    ========================= */

    .team-contact-bottom {
        margin-top: 45px;

        text-align: center;

        color: #037583;

        font-size: 14px;
        line-height: 1.6;
    }


    /* 左右装饰线 */

    .team-contact-bottom:before,
    .team-contact-bottom:after {
        content: "";

        display: inline-block;

        width: 45px;
        height: 1px;

        margin: 0 15px 4px;

        background: #037583;

        opacity: .3;
    }




    /* =========================
                    Mobile
                    ========================= */

    @media (max-width: 1100px) {

        .team-contact-card {
            flex-basis: calc(33.333% - 16px);
        }

    }

    @media (max-width: 768px) {

        .team-contact-card {
            flex-basis: calc(50% - 12px);
        }

    }

    @media (max-width: 576px) {

        .team-contact-list {
            gap: 18px;
        }

        .team-contact-card {
            flex-basis: 100%;
            max-width: 380px;
        }

    }