/* 
.team-section {
    font-weight: 300;
    font-style: normal;
    padding-block: min(20vh, 6rem);
    text-align: center;
    width: min(90rem, 90%);
    margin-inline: auto;
    position: relative;
}



.team-section span,
.team-section p,
.team-section h2,
.team-section h3 {
    letter-spacing: 0.035rem;
}

.team-subtitle {
    text-transform: uppercase;
    display: block;

    font-size: 1.2rem;
    color: #a3a3a3;
}


.team-title {
    font-size: clamp(3.5rem, 3rem + 1.6vw, 5rem);
    margin-top: -0.625rem;
    color: #fff;
    position: relative;
    z-index: 2;
}


.team-description {
    line-height: 1.6;
    color: #a3a3a3;
    max-width: 50rem;
    margin: 0 auto;
    font-size: clamp(0.9rem,
            0.825rem + 0.3vw,
            1.2rem);
}

.team-watermark {
    color: #1f1f1f;
    font-size: clamp(6rem,
            1.3333rem + 14.9333vw,
            20rem);

    font-weight: 800;
    position: absolute;
    z-index: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-15%);
    user-select: none;
    letter-spacing: 0.5rem;
    pointer-events: none;
}


.team-cards {
    margin-top: 7rem;
    display: grid;
    grid-template-columns:
        repeat(auto-fit,
            minmax(min(12rem, 100%), 1fr));
    gap: 2rem;
    position: relative;
    z-index: 2;
}


.team-card {
    position: relative;
    cursor: pointer;
    overflow: hidden;
}


.team-card img {
    width: 100%;
    max-width: 100%;
    display: block;
    filter: grayscale(100%);
    transition: 0.5s ease;
}

.team-card h3 {
    font-size: clamp(1rem,
            0.9167rem + 0.2667vw,
            1.25rem);
    font-weight: 400;
    color: #f6f6f6;
    text-transform: capitalize;
    margin: 0;
}

.team-card p {
    font-size: clamp(0.85rem,
            0.75rem + 0.32vw,
            1.15rem);
    letter-spacing: 0.12rem;
    font-weight: 300;
    max-width: 100%;
    margin: 0.3rem 0 0;
    color: #a3a3a3;
    text-transform: capitalize;
}

.team-card::before {
    position: absolute;
    content: "";
    width: 5rem;
    height: 6.25rem;
    z-index: 0;
    transition: 0.3s ease-in-out;
    background: #f2709c;
    background: linear-gradient(to left,
            #ff9472,
            #f2709c);
    top: 0.75rem;
    left: 0.75rem;
}

.team-card::after {
    position: absolute;
    inset: 0;
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            rgba(65, 67, 69, 0.2),
            rgba(8, 8, 8, 0.9));
    z-index: 1;
    pointer-events: none;
}

.team-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 99;
    color: #fff;
    width: 100%;
    padding: 1.875rem 1.25rem;
    text-align: center;
}

.team-social {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
}


.team-social li {
    list-style: none;
}


.team-social a {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}


.team-social i {
    color: #fff;
    font-size: clamp(0.9rem,
            0.825rem + 0.3vw,
            1.2rem);
    transition: 0.3s ease;
}


.team-social i:hover {
    color: #f2709c;
}


.team-card:hover img {
    filter: grayscale(0%);
}
.team-card:hover::before {
    transform: scale(1.03);
}

.team-card:nth-child(1)::before {
    top: 0.75rem;
    left: 0.75rem;
}


.team-card:nth-child(2)::before {
    bottom: 0.75rem;
    left: 0.75rem;
    top: auto;
}


.team-card:nth-child(3)::before {
    top: 0.75rem;
    left: 0.75rem;
}


@media (min-width: 51rem) {
    .team-cards {
        gap: 0;
        padding-bottom: 2.5rem;
    }
}

@media (min-width: 31.25rem) {
    .team-card:nth-child(2) {
        transform: translateY(15%);
    }

}

@media (max-width: 500px) {
    .team-section {
        width: 92%;
    }
    .team-cards {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-top: 5rem;
    }
    .team-card:nth-child(2) {
        transform: none;
    }
    .team-watermark {
        font-size: 6rem;
    }

} */

    /* =====================================================
       OUR TEAM — BANNER
    ===================================================== */
    .team-banner {
        background: linear-gradient(135deg, #044f7c 0%, #1a7cbf 45%, #7c3aed 100%);
        padding: 70px 20px 55px;
        text-align: center;
    }
    .team-banner h2 {
        font-size: clamp(2rem, 5vw, 3.2rem);
        font-weight: 800;
        color: #fff;
        letter-spacing: 3px;
        text-transform: uppercase;
    }

    /* =====================================================
       TEAM SECTION
    ===================================================== */
    .team-section {
        background: linear-gradient(160deg, #ddeaf6 0%, #e8edf8 50%, #d8e8f5 100%);
        padding: 60px 30px 90px;
        text-align: center;
        position: relative;
        overflow: hidden;
    }

    /* ---- Badge ---- */
    .team-badge {
        display: inline-block;
        background: linear-gradient(135deg, #065c8f, #065c8f);
        color: #fff;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 2px;
        /* text-transform: uppercase; */
        padding: 6px 18px;
        border-radius: 50px;
        margin-bottom: 12px;
        position: relative;
        z-index: 2;
        /* box-shadow: 0 4px 16px rgba(232,67,147,0.35); */
    }

    /* ---- Heading ---- */
    .team-heading {
        font-size: clamp(1.8rem, 4vw, 2.8rem);
        font-weight: 800;
        color: #044f7c;
        position: relative;
        z-index: 2;
        line-height: 1.1;
    }

    /* ---- Watermark ---- */
    .team-watermark {
        display: block;
        font-size: clamp(6rem, 20vw, 14rem);
        font-weight: 900;
        color: transparent;
        -webkit-text-stroke: 2px rgba(4,79,124,0.10);
        line-height: 0.8;
        letter-spacing: -8px;
        user-select: none;
        pointer-events: none;
        position: relative;
        z-index: 1;
        margin-top: -8px;
        margin-bottom: -50px;
    }

    /* =====================================================
       CARDS GRID
    ===================================================== */
    .team-grid {
        display: flex;
        justify-content: center;
        gap: 28px;
        flex-wrap: wrap;
        max-width: 1100px;
        margin: 60px auto 0;
        position: relative;
        z-index: 3;
    }

    /* =====================================================
       SINGLE CARD
    ===================================================== */
    .t-card {
        width: 300px;
        border-radius: 18px;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 8px 36px rgba(4,79,124,0.13);
        transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1),
                    box-shadow 0.35s ease;
        position: relative;
    }
    .t-card:hover {
        transform: translateY(-12px) scale(1.02);
        box-shadow: 0 22px 55px rgba(4,79,124,0.22);
    }

    /* ---- Coloured top stripe ---- */
    .t-card .stripe {
        height: 5px;
        width: 100%;
        transition: height 0.3s ease;
    }
    .t-card:hover .stripe { height: 8px; }
    .t-card:nth-child(1) .stripe { background: linear-gradient(90deg, #e84393, #f5a623); }
    .t-card:nth-child(2) .stripe { background: linear-gradient(90deg, #00c9a7, #7c3aed); }
    .t-card:nth-child(3) .stripe { background: linear-gradient(90deg, #f5a623, #ff5f5f); }

    /* ---- Photo area ---- */
    .t-card .photo-wrap {
        width: 100%;
        height: 300px;
        overflow: hidden;
        position: relative;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }
    .t-card:nth-child(1) .photo-wrap { background: linear-gradient(160deg, #fddde6 0%, #fff3d6 100%); }
    .t-card:nth-child(2) .photo-wrap { background: linear-gradient(160deg, #d4f5ee 0%, #ece5ff 100%); }
    .t-card:nth-child(3) .photo-wrap { background: linear-gradient(160deg, #fff9d6 0%, #ffd6d6 100%); }

    .t-card .photo-wrap img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: bottom center;
        display: block;
        /* removes white bg from photo */
        mix-blend-mode: multiply;
        transition: transform 0.5s ease;
    }
    .t-card:hover .photo-wrap img {
        transform: scale(1.05) translateY(-6px);
    }

    /* ---- Info area ---- */
    .t-card .info {
        padding: 16px 20px 20px;
        background: #fff;
        transition: background 0.35s ease;
    }
    .t-card:hover .info {
        background: linear-gradient(135deg, rgba(4,79,124,0.04), rgba(124,58,237,0.03));
    }
    .t-card .info h3 {
        font-size: 1rem;
        font-weight: 700;
        color: #0d1b2a;
        margin-bottom: 12px;
        line-height: 1.3;
        transition: color 0.3s;
    }
    .t-card:hover .info h3 { color: #044f7c; }
    .t-card .info h3 a {
        color: inherit;
        text-decoration: none;
    }

    /* View Profile button */
    .t-card .btn-profile {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: #044f7c;
        border: 1.8px solid #044f7c;
        padding: 6px 16px;
        border-radius: 50px;
        text-decoration: none;
        transition: all 0.3s ease;
    }
    .t-card .btn-profile:hover {
        background: #044f7c;
        color: #fff;
    }
    .t-card .btn-profile i { transition: transform 0.3s ease; }
    .t-card .btn-profile:hover i { transform: translateX(4px); }

    /* Shine on hover */
    .t-card .shine {
        position: absolute;
        top: 0; left: -80%;
        width: 55%; height: 100%;
        background: linear-gradient(120deg, transparent, rgba(255,255,255,0.22), transparent);
        transform: skewX(-18deg);
        pointer-events: none;
        z-index: 10;
        opacity: 0;
    }
    .t-card:hover .shine { animation: shineRun 0.65s ease forwards; }

    /* =====================================================
       KEYFRAMES
    ===================================================== */
    @keyframes shineRun {
        0%   { left: -80%; opacity: 1; }
        100% { left: 120%;  opacity: 0; }
    }

    /* =====================================================
       RESPONSIVE
    ===================================================== */
    @media (max-width: 960px) {
        .team-grid { gap: 20px; }
        .t-card { width: 260px; }
    }
    @media (max-width: 620px) {
        .t-card { width: 100%; max-width: 340px; }
        .team-watermark { font-size: 5rem; letter-spacing: -3px; }
    }