/* ==========================================
   TEAM PAGE
========================================== */



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

.team-hero{

    position:relative;

    min-height:80vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    padding-top:140px;

    background:
    radial-gradient(circle at top right,
    rgba(34,197,94,.12),
    transparent 35%),

    radial-gradient(circle at bottom left,
    rgba(245,158,11,.08),
    transparent 30%),

    linear-gradient(
    180deg,
    #F8FAFC,
    #FFFFFF);

}



.team-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(
    rgba(255,255,255,.15) 1px,
    transparent 1px),

    linear-gradient(
    90deg,
    rgba(255,255,255,.15) 1px,
    transparent 1px);

    background-size:60px 60px;

    opacity:.35;

}



.team-hero-content{

    position:relative;

    z-index:2;

    max-width:900px;

    margin:auto;

    text-align:center;

}



.team-hero-content h1{

    margin:25px 0;

}



.team-hero-content p{

    max-width:760px;

    margin:auto;

}



/* ==========================================
   LEADERSHIP
========================================== */

.leadership{

    position:relative;

}



.leader-grid{

    display:grid;

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

    gap:40px;

    margin-top:70px;

}



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

.team-card{

    position:relative;

    padding:45px 35px;

    text-align:center;

    border-radius:32px;

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

    backdrop-filter:blur(25px);

    -webkit-backdrop-filter:blur(25px);

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

    transition:var(--transition);

    overflow:hidden;

}



.team-card:hover{

    transform:translateY(-12px);

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

}



.team-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

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

    transform:scaleX(0);

    transition:.35s;

}



.team-card:hover::before{

    transform:scaleX(1);

}



/* ==========================================
   TEAM PHOTO
========================================== */

.team-photo{

    width:170px;

    height:170px;

    margin:0 auto 28px;

    border-radius:50%;

    overflow:hidden;

    background:linear-gradient(
    135deg,
    rgba(34,197,94,.18),
    rgba(255,255,255,.65));

    border:3px solid rgba(255,255,255,.50);

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

}



.team-photo img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}



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

    transform:scale(1.08);

}



.team-card h3{

    margin-bottom:10px;

}



.team-card h5{

    color:var(--primary);

    font-size:16px;

    margin-bottom:18px;

    font-weight:600;

}



.team-card p{

    font-size:15px;

    line-height:1.8;

}
/* ==========================================
   CORE TEAM
========================================== */

.core-team{

    position:relative;

    background:linear-gradient(
    180deg,
    rgba(255,255,255,.15),
    rgba(255,255,255,.45));

}



.core-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

    margin-top:70px;

}



.core-grid .team-card{

    min-height:420px;

}



.core-grid .team-photo{

    width:140px;

    height:140px;

}



.core-grid .team-card:hover{

    transform:translateY(-12px);

}



/* ==========================================
   OUR CULTURE
========================================== */

.team-culture{

    position:relative;

    overflow:hidden;

}



.team-culture::before{

    content:"";

    position:absolute;

    top:-180px;

    right:-180px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:radial-gradient(

    circle,

    rgba(34,197,94,.10),

    transparent 70%);

}



.team-culture .glass{

    position:relative;

    z-index:2;

    padding:80px;

    text-align:center;

    border-radius:36px;

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

    backdrop-filter:blur(30px);

    -webkit-backdrop-filter:blur(30px);

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

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

}



.team-culture h2{

    margin:20px 0;

}



.team-culture p{

    max-width:800px;

    margin:auto;

}



/* ==========================================
   WHY OUR TEAM
========================================== */

.why-team{

    position:relative;

}



.why-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

    margin-top:70px;

}



.why-grid .card{

    text-align:center;

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

    backdrop-filter:blur(25px);

    -webkit-backdrop-filter:blur(25px);

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

    transition:var(--transition);

}



.why-grid .card:hover{

    transform:translateY(-10px);

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

}



.why-grid .icon-box{

    margin:0 auto 25px;

}



.why-grid h3{

    margin-bottom:18px;

}



.why-grid p{

    font-size:16px;

}
/* ==========================================
   JOIN OUR TEAM CTA
========================================== */

.team-cta{

    position:relative;

    overflow:hidden;

    text-align:center;

}



.team-cta::before{

    content:"";

    position:absolute;

    left:-180px;

    bottom:-180px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:radial-gradient(

    circle,

    rgba(34,197,94,.12),

    transparent 70%);

}



.team-cta .glass{

    position:relative;

    z-index:2;

    padding:90px 70px;

    border-radius:36px;

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

    backdrop-filter:blur(30px);

    -webkit-backdrop-filter:blur(30px);

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

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

}



.team-cta h2{

    margin:20px 0;

}



.team-cta p{

    max-width:760px;

    margin:0 auto 40px;

}



.team-cta .hero-buttons{

    justify-content:center;

}



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

@media (max-width:1200px){

    .leader-grid{

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

    }



    .core-grid{

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

    }



    .why-grid{

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

    }

}



@media (max-width:992px){

    .team-hero{

        min-height:auto;

        padding-top:120px;

    }



    .leader-grid{

        grid-template-columns:1fr;

    }



    .team-culture .glass{

        padding:60px 40px;

    }

}



@media (max-width:768px){

    .core-grid,

    .why-grid{

        grid-template-columns:1fr;

    }



    .team-photo{

        width:140px;

        height:140px;

    }



    .team-cta .glass{

        padding:50px 30px;

    }

}



@media (max-width:480px){

    .team-hero-content h1{

        font-size:42px;

    }



    .team-card{

        padding:35px 25px;

    }



    .team-photo{

        width:120px;

        height:120px;

    }



    .team-card h3{

        font-size:22px;

    }



    .team-card h5{

        font-size:15px;

    }



    .team-card p{

        font-size:14px;

    }



    .team-cta .hero-buttons{

        flex-direction:column;

    }



    .team-cta .btn,

    .team-cta .btn-outline{

        width:100%;

        justify-content:center;

    }

}



/* ==========================================
   SMOOTH ANIMATIONS
========================================== */

.team-card,

.why-grid .card,

.team-culture .glass,

.team-cta .glass{

    will-change:transform;

}



/* ==========================================
   END OF TEAM PAGE
========================================== */