/* =========================================================
   NOVACARE
   OUR TEAM PAGE
   ========================================================= */

:root {

    --services-primary: #0A2B1D;

    --services-primary-light: #16452F;

    --services-secondary: #B88A44;

    --services-white: #ffffff;

    --services-text: #425466;

    --services-light: #F8FAFC;

    --services-border: #E7ECEF;

    --services-shadow:
        0 18px 60px rgba(0, 0, 0, .08);

    --services-radius: 22px;

}


/* =========================================================
   GLOBAL
   ========================================================= */

.team-directory,
.team-introduction,
.team-values,
.team-cta {

    font-family: inherit;

}


.team-directory *,
.team-introduction *,
.team-values *,
.team-cta *,
.team-hero * {

    box-sizing: border-box;

}


.team-section-label {

    display: inline-flex;

    align-items: center;

    padding: 8px 16px;

    border-radius: 50px;

    background: rgba(10, 43, 29, .08);

    color:
        var(--services-primary);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

    margin-bottom: 18px;

}


.team-section-label-light {

    background:
        rgba(255, 255, 255, .12);

    color:
        var(--services-white);

}


/* =========================================================
   HERO
   ========================================================= */

.team-hero {

    position: relative;

    overflow: hidden;

    padding:
        120px 0
        110px;

    background:
        linear-gradient(
            135deg,
            var(--services-primary),
            var(--services-primary-light)
        );

}


.team-hero-shape {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

}


.team-hero-shape-one {

    width: 520px;

    height: 520px;

    top: -260px;

    right: -150px;

    background:
        rgba(255, 255, 255, .045);

}


.team-hero-shape-two {

    width: 350px;

    height: 350px;

    bottom: -190px;

    left: -140px;

    background:
        rgba(184, 138, 68, .08);

}


.team-hero-content {

    position: relative;

    z-index: 2;

}


.team-breadcrumb {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 28px;

    color:
        rgba(255, 255, 255, .72);

    font-size: 14px;

}


.team-breadcrumb a {

    color:
        var(--services-white);

    text-decoration: none;

}


.team-breadcrumb i {

    font-size: 10px;

    opacity: .7;

}


.team-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 17px;

    border-radius: 50px;

    background:
        rgba(255, 255, 255, .10);

    border:
        1px solid
        rgba(255, 255, 255, .15);

    color:
        var(--services-white);

    font-size: 13px;

    font-weight: 600;

    letter-spacing: .5px;

    margin-bottom: 22px;

}


.team-hero h1 {

    margin: 0 0 24px;

    color:
        var(--services-white);

    font-size: clamp(
        42px,
        5vw,
        68px
    );

    line-height: 1.08;

    font-weight: 800;

}


.team-hero h1 span {

    color:
        var(--services-secondary);

}


.team-hero-content > p {

    max-width: 650px;

    margin: 0 0 32px;

    color:
        rgba(255, 255, 255, .82);

    font-size: 17px;

    line-height: 1.8;

}


.team-hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

}


/* =========================================================
   BUTTONS
   ========================================================= */

.team-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 52px;

    padding:
        13px 24px;

    border-radius: 12px;

    text-decoration: none;

    font-weight: 700;

    transition:
        .3s ease;

}


.team-btn-primary {

    background:
        var(--services-secondary);

    color:
        var(--services-white);

}


.team-btn-primary:hover {

    transform:
        translateY(-3px);

    color:
        var(--services-white);

    box-shadow:
        0 12px 30px
        rgba(184, 138, 68, .25);

}


.team-btn-outline {

    border:
        1px solid
        rgba(255, 255, 255, .35);

    color:
        var(--services-white);

    background:
        transparent;

}


.team-btn-outline:hover {

    background:
        var(--services-white);

    color:
        var(--services-primary);

}


.team-btn-gold {

    background:
        var(--services-secondary);

    color:
        var(--services-white);

}


.team-btn-gold:hover {

    transform:
        translateY(-3px);

    color:
        var(--services-white);

    box-shadow:
        0 14px 35px
        rgba(0, 0, 0, .20);

}


/* =========================================================
   HERO VISUAL
   ========================================================= */

.team-hero-visual {

    position: relative;

    min-height: 470px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    padding: 50px;

    border:
        1px solid
        rgba(255, 255, 255, .12);

    border-radius:
        var(--services-radius);

    background:
        rgba(255, 255, 255, .07);

    backdrop-filter:
        blur(15px);

}


.team-hero-icon {

    width: 125px;

    height: 125px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 28px;

    border-radius: 50%;

    background:
        rgba(184, 138, 68, .16);

    border:
        1px solid
        rgba(184, 138, 68, .30);

    color:
        var(--services-secondary);

    font-size: 52px;

}


.team-hero-visual-content {

    text-align: center;

}


.team-hero-visual-content span {

    color:
        rgba(255, 255, 255, .70);

    font-size: 14px;

    text-transform: uppercase;

    letter-spacing: 2px;

}


.team-hero-visual-content h2 {

    margin:
        8px 0 10px;

    color:
        var(--services-white);

    font-size: 38px;

}


.team-hero-visual-content p {

    margin: 0;

    color:
        rgba(255, 255, 255, .70);

}


.team-hero-mini-card {

    position: absolute;

    left: 25px;

    bottom: 25px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding:
        14px 17px;

    border-radius: 14px;

    background:
        var(--services-white);

    box-shadow:
        var(--services-shadow);

}


.team-hero-mini-card > i {

    color:
        var(--services-secondary);

    font-size: 22px;

}


.team-hero-mini-card strong {

    display: block;

    color:
        var(--services-primary);

    font-size: 14px;

}


.team-hero-mini-card span {

    display: block;

    color:
        var(--services-text);

    font-size: 12px;

}


/* =========================================================
   INTRODUCTION
   ========================================================= */

.team-introduction {

    padding:
        110px 0;

    background:
        var(--services-white);

}


.team-intro-visual {

    min-height: 470px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 50px;

    border-radius:
        var(--services-radius);

    background:
        var(--services-primary);

    position: relative;

    overflow: hidden;

}


.team-intro-visual::before {

    content: "";

    position: absolute;

    width: 300px;

    height: 300px;

    right: -120px;

    top: -120px;

    border-radius: 50%;

    background:
        rgba(184, 138, 68, .10);

}


.team-intro-visual::after {

    content: "";

    position: absolute;

    width: 230px;

    height: 230px;

    left: -100px;

    bottom: -100px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .05);

}


.team-intro-icon {

    position: relative;

    z-index: 1;

    width: 90px;

    height: 90px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 28px;

    border-radius: 50%;

    background:
        rgba(184, 138, 68, .15);

    color:
        var(--services-secondary);

    font-size: 34px;

}


.team-intro-visual > span {

    position: relative;

    z-index: 1;

    color:
        rgba(255, 255, 255, .65);

    font-size: 13px;

    text-transform: uppercase;

    letter-spacing: 1.5px;

}


.team-intro-visual h2 {

    position: relative;

    z-index: 1;

    max-width: 430px;

    margin:
        12px auto 0;

    color:
        var(--services-white);

    font-size: 42px;

    line-height: 1.15;

}


.team-intro-content h2 {

    margin:
        0 0 22px;

    color:
        var(--services-primary);

    font-size:
        clamp(32px, 4vw, 46px);

    line-height: 1.15;

}


.team-intro-content p {

    color:
        var(--services-text);

    line-height: 1.8;

    margin-bottom: 18px;

}


.team-intro-points {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-top: 28px;

}


.team-intro-points div {

    display: flex;

    align-items: center;

    gap: 10px;

    color:
        var(--services-primary);

    font-weight: 600;

}


.team-intro-points i {

    color:
        var(--services-secondary);

}


/* =========================================================
   TEAM DIRECTORY
   ========================================================= */

.team-directory {

    padding:
        110px 0;

    background:
        var(--services-light);

}


.team-section-heading {

    max-width: 760px;

    margin:
        0 auto 55px;

}


.team-section-heading h2 {

    margin:
        0 0 18px;

    color:
        var(--services-primary);

    font-size:
        clamp(34px, 4vw, 48px);

    line-height: 1.15;

}


.team-section-heading p {

    max-width: 680px;

    margin:
        0 auto;

    color:
        var(--services-text);

    line-height: 1.8;

}


.team-grid {

    align-items: stretch;

}


/* =========================================================
   TEAM MEMBER CARD
   ========================================================= */

.team-member-card {

    height: 100%;

    overflow: hidden;

    background:
        var(--services-white);

    border:
        1px solid
        var(--services-border);

    border-radius:
        var(--services-radius);

    box-shadow:
        var(--services-shadow);

    transition:
        .35s ease;

}


.team-member-card:hover {

    transform:
        translateY(-8px);

    box-shadow:
        0 25px 65px
        rgba(10, 43, 29, .12);

}


.team-member-photo {

    position: relative;

    height: 360px;

    overflow: hidden;

    background:
        #e9efec;

}


.team-member-photo img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition:
        .5s ease;

}


.team-member-card:hover
.team-member-photo img {

    transform:
        scale(1.05);

}


.team-member-placeholder {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    color:
        var(--services-primary);

    background:
        linear-gradient(
            135deg,
            #eef3f0,
            #dfe9e4
        );

    font-size: 70px;

}


.team-member-photo-overlay {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    padding:
        45px 22px 18px;

    background:
        linear-gradient(
            to top,
            rgba(10, 43, 29, .82),
            transparent
        );

    transform:
        translateY(10px);

    opacity: 0;

    transition:
        .35s ease;

}


.team-member-card:hover
.team-member-photo-overlay {

    opacity: 1;

    transform:
        translateY(0);

}


.team-member-photo-overlay span {

    color:
        var(--services-white);

    font-size: 12px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1px;

}


/* =========================================================
   MEMBER CONTENT
   ========================================================= */

.team-member-content {

    padding:
        28px;

}


.team-member-position {

    display: block;

    margin-bottom: 8px;

    color:
        var(--services-secondary);

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1px;

}


.team-member-content h3 {

    margin:
        0 0 14px;

    color:
        var(--services-primary);

    font-size: 25px;

}


.team-member-content p {

    min-height: 78px;

    margin:
        0 0 22px;

    color:
        var(--services-text);

    font-size: 14px;

    line-height: 1.75;

}


.team-member-contact {

    display: flex;

    gap: 10px;

    padding-top: 20px;

    border-top:
        1px solid
        var(--services-border);

}


.team-member-contact a {

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        #f1f5f3;

    color:
        var(--services-primary);

    text-decoration: none;

    transition:
        .25s ease;

}


.team-member-contact a:hover {

    background:
        var(--services-primary);

    color:
        var(--services-white);

    transform:
        translateY(-2px);

}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.team-empty-state {

    max-width: 650px;

    margin:
        20px auto 0;

    padding:
        70px 30px;

    text-align: center;

    border:
        1px solid
        var(--services-border);

    border-radius:
        var(--services-radius);

    background:
        var(--services-white);

    box-shadow:
        var(--services-shadow);

}


.team-empty-icon {

    width: 80px;

    height: 80px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin:
        0 auto 20px;

    border-radius: 50%;

    background:
        rgba(10, 43, 29, .08);

    color:
        var(--services-primary);

    font-size: 30px;

}


.team-empty-state h3 {

    margin-bottom: 12px;

    color:
        var(--services-primary);

}


.team-empty-state p {

    max-width: 500px;

    margin:
        0 auto 25px;

    color:
        var(--services-text);

    line-height: 1.8;

}


/* =========================================================
   VALUES
   ========================================================= */

.team-values {

    padding:
        110px 0;

    background:
        var(--services-white);

}


.team-value-card {

    height: 100%;

    padding:
        35px 28px;

    text-align: center;

    border:
        1px solid
        var(--services-border);

    border-radius:
        var(--services-radius);

    background:
        var(--services-white);

    transition:
        .3s ease;

}


.team-value-card:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(184, 138, 68, .35);

    box-shadow:
        var(--services-shadow);

}


.team-value-icon {

    width: 66px;

    height: 66px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin:
        0 auto 22px;

    border-radius: 18px;

    background:
        rgba(10, 43, 29, .08);

    color:
        var(--services-primary);

    font-size: 24px;

    transition:
        .3s ease;

}


.team-value-card:hover
.team-value-icon {

    background:
        var(--services-primary);

    color:
        var(--services-white);

}


.team-value-card h3 {

    margin-bottom: 12px;

    color:
        var(--services-primary);

    font-size: 21px;

}


.team-value-card p {

    margin: 0;

    color:
        var(--services-text);

    font-size: 14px;

    line-height: 1.75;

}


/* =========================================================
   CTA
   ========================================================= */

.team-cta {

    padding:
        80px 0;

    background:
        var(--services-light);

}


.team-cta-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    padding:
        60px;

    overflow: hidden;

    border-radius:
        var(--services-radius);

    background:
        linear-gradient(
            135deg,
            var(--services-primary),
            var(--services-primary-light)
        );

    position: relative;

}


.team-cta-inner::after {

    content: "";

    position: absolute;

    width: 300px;

    height: 300px;

    right: -120px;

    top: -150px;

    border-radius: 50%;

    background:
        rgba(184, 138, 68, .10);

}


.team-cta-content {

    position: relative;

    z-index: 1;

    max-width: 720px;

}


.team-cta-content h2 {

    margin:
        0 0 16px;

    color:
        var(--services-white);

    font-size:
        clamp(30px, 4vw, 45px);

    line-height: 1.15;

}


.team-cta-content p {

    max-width: 650px;

    margin: 0;

    color:
        rgba(255, 255, 255, .78);

    line-height: 1.8;

}


.team-cta-action {

    position: relative;

    z-index: 2;

    flex-shrink: 0;

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 991px) {

    .team-hero {

        padding:
            90px 0;

    }

    .team-hero-visual {

        min-height: 390px;

    }

    .team-introduction,
    .team-directory,
    .team-values {

        padding:
            80px 0;

    }

    .team-cta-inner {

        padding:
            45px;

    }

}


@media (max-width: 767px) {

    .team-hero {

        padding:
            70px 0;

    }

    .team-hero h1 {

        font-size: 43px;

    }

    .team-hero-visual {

        min-height: 350px;

        padding: 35px;

    }

    .team-hero-icon {

        width: 100px;

        height: 100px;

        font-size: 40px;

    }

    .team-intro-visual {

        min-height: 380px;

    }

    .team-intro-visual h2 {

        font-size: 34px;

    }

    .team-intro-points {

        grid-template-columns:
            1fr;

    }

    .team-member-photo {

        height: 330px;

    }

    .team-member-content p {

        min-height: auto;

    }

    .team-cta-inner {

        flex-direction: column;

        align-items: flex-start;

        padding: 35px 28px;

    }

}


@media (max-width: 575px) {

    .team-hero h1 {

        font-size: 38px;

    }

    .team-hero-actions {

        flex-direction: column;

        align-items: stretch;

    }

    .team-btn {

        width: 100%;

    }

    .team-hero-mini-card {

        left: 15px;

        bottom: 15px;

    }

    .team-member-photo {

        height: 350px;

    }

}