/* =========================================================
   ARPIVA TECHNOLOGIES
   OUR TEAM
   ========================================================= */

.our-team-page {
    background: #ffffff;
    color: #081B4B;
}

.our-team-page .container {
    width: min(1180px, calc(100% - 80px));
    margin-left: auto;
    margin-right: auto;
}


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

.team-hero {

    position: relative;

    min-height: 440px;

    display: flex;

    align-items: center;

    overflow: hidden;

    padding: 90px 0;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(47,128,237,.25),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #06163F,
            #123C8D
        );

}

.team-hero::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -230px;
    top: -250px;

    border-radius: 50%;

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

    box-shadow:
        0 0 0 70px rgba(255,255,255,.025),
        0 0 0 140px rgba(255,255,255,.015);

}

.team-hero-content {

    position: relative;

    z-index: 2;

    max-width: 850px;

}

.team-eyebrow {

    display: inline-block;

    padding: 9px 20px;

    margin-bottom: 24px;

    border-radius: 50px;

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

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

    color: #ffffff;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.5px;

}

.team-hero h1 {

    margin: 0;

    color: #ffffff;

    font-size: 62px;

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -2px;

}

.team-hero h1 span {

    color: #FF9F0A;

}

.team-hero p {

    max-width: 700px;

    margin: 28px 0 0;

    color: #D7E5FF;

    font-size: 18px;

    line-height: 1.8;

}


/* =========================================================
   INTRO
   ========================================================= */

.team-intro {

    padding: 100px 0 75px;

    background: #ffffff;

}

.team-intro-grid {

    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 90px;

}

.team-section-label {

    display: inline-block;

    margin-bottom: 18px;

    color: #1769FF;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.6px;

}

.team-intro h2 {

    margin: 0;

    color: #081B4B;

    font-size: 46px;

    line-height: 1.1;

    font-weight: 800;

}

.team-intro p {

    margin: 0 0 20px;

    color: #61748F;

    font-size: 17px;

    line-height: 1.8;

}


/* =========================================================
   TEAM AREAS
   ========================================================= */

.team-areas {

    padding: 70px 0 110px;

    background: #F6F9FD;

}

.team-areas-heading {

    max-width: 700px;

    margin-bottom: 55px;

}

.team-areas-heading h2 {

    margin: 0;

    color: #081B4B;

    font-size: 44px;

    line-height: 1.15;

    font-weight: 800;

}

.team-areas-heading h2 span {

    color: #1769FF;

}


/* =========================================================
   GRID
   ========================================================= */

.team-areas-grid {

    display: grid;

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

    gap: 25px;

}

.team-area-card {

    position: relative;

    padding: 35px;

    min-height: 300px;

    overflow: hidden;

    border-radius: 22px;

    background: #ffffff;

    border: 1px solid #E5ECF5;

    box-shadow:
        0 12px 35px rgba(8,27,75,.05);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.team-area-card:hover {

    transform: translateY(-8px);

    box-shadow:
        0 25px 55px rgba(8,27,75,.11);

}

.team-area-number {

    position: absolute;

    top: 25px;
    right: 28px;

    color: #DCE7F7;

    font-size: 14px;

    font-weight: 800;

}

.team-area-icon {

    width: 62px;
    height: 62px;

    display: flex;

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

    margin-bottom: 25px;

    border-radius: 17px;

    background: #EAF3FF;

    color: #1769FF;

    font-size: 23px;

    font-weight: 800;

}

.team-area-card h3 {

    margin: 0 0 15px;

    color: #081B4B;

    font-size: 22px;

    line-height: 1.3;

    font-weight: 700;

}

.team-area-card p {

    margin: 0;

    color: #657894;

    font-size: 15px;

    line-height: 1.75;

}

.team-area-line {

    position: absolute;

    left: 35px;
    bottom: 0;

    width: 45px;
    height: 3px;

    border-radius: 5px 5px 0 0;

    background: #1769FF;

    transition: width .35s ease;

}

.team-area-card:hover .team-area-line {

    width: 90px;

}

.team-area-future {

    background:
        linear-gradient(
            135deg,
            #F2F7FF,
            #FFFFFF
        );

}


/* =========================================================
   GROWTH SECTION
   ========================================================= */

.team-growth {

    padding: 110px 0;

    background: #ffffff;

}

.team-growth-box {

    position: relative;

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 60px;

    overflow: hidden;

    padding: 75px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            #071947,
            #123C8D
        );

    box-shadow:
        0 30px 80px rgba(8,27,75,.17);

}

.team-growth-content {

    position: relative;

    z-index: 2;

}

.team-growth-content h2 {

    margin: 0 0 22px;

    color: #ffffff;

    font-size: 46px;

    line-height: 1.1;

    font-weight: 800;

}

.team-growth-content p {

    max-width: 600px;

    margin: 0 0 30px;

    color: #D7E5FF;

    font-size: 16px;

    line-height: 1.8;

}

.team-growth-button {

    display: inline-flex;

    align-items: center;

    min-height: 54px;

    padding: 0 27px;

    border-radius: 13px;

    background: #FF9F0A;

    color: #ffffff;

    text-decoration: none;

    font-size: 15px;

    font-weight: 700;

    transition: .3s ease;

}

.team-growth-button:hover {

    transform: translateY(-4px);

    box-shadow:
        0 15px 35px rgba(255,159,10,.35);

}


/* =========================================================
   GROWTH VISUAL
   ========================================================= */

.team-growth-visual {

    position: relative;

    width: 420px;
    height: 420px;

    margin: auto;

    display: flex;

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

}

.growth-circle {

    position: absolute;

    border-radius: 50%;

    border: 1px solid rgba(141,187,255,.25);

}

.circle-one {

    width: 360px;
    height: 360px;

}

.circle-two {

    width: 245px;
    height: 245px;

}

.growth-core {

    position: relative;

    z-index: 3;

    width: 145px;
    height: 145px;

    display: flex;

    flex-direction: column;

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

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #2F80ED,
            #123C8D
        );

    color: #ffffff;

    box-shadow:
        0 25px 70px rgba(47,128,237,.35);

}

.growth-core span {

    font-size: 12px;

    letter-spacing: 2px;

    opacity: .8;

}

.growth-core strong {

    font-size: 22px;

}

.growth-node {

    position: absolute;

    z-index: 4;

    width: 65px;
    height: 65px;

    display: flex;

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

    border-radius: 50%;

    background: #ffffff;

    color: #123C8D;

    font-size: 10px;

    font-weight: 800;

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

}

.node-tech {

    top: 40px;
    left: 177px;

}

.node-data {

    right: 35px;
    top: 177px;

}

.node-rcm {

    bottom: 40px;
    left: 177px;

}

.node-people {

    left: 35px;
    top: 177px;

}


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

@media(max-width:991px) {

    .our-team-page .container {

        width: min(720px, calc(100% - 50px));

    }

    .team-hero h1 {

        font-size: 50px;

    }

    .team-intro-grid {

        grid-template-columns: 1fr;

        gap: 35px;

    }

    .team-areas-grid {

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

    }

    .team-growth-box {

        grid-template-columns: 1fr;

        padding: 60px 45px;

    }

}

@media(max-width:700px) {

    .our-team-page .container {

        width: calc(100% - 36px);

    }

    .team-hero {

        padding: 75px 0;

    }

    .team-hero h1 {

        font-size: 40px;

    }

    .team-hero p {

        font-size: 16px;

    }

    .team-intro {

        padding: 70px 0 55px;

    }

    .team-intro h2 {

        font-size: 37px;

    }

    .team-areas-grid {

        grid-template-columns: 1fr;

    }

    .team-growth-box {

        padding: 55px 25px;

    }

    .team-growth-content h2 {

        font-size: 36px;

    }

    .team-growth-visual {

        width: 320px;
        height: 320px;

    }

    .circle-one {

        width: 270px;
        height: 270px;

    }

    .circle-two {

        width: 185px;
        height: 185px;

    }

    .growth-core {

        width: 115px;
        height: 115px;

    }

    .node-tech {

        top: 22px;
        left: 135px;

    }

    .node-data {

        right: 12px;
        top: 135px;

    }

    .node-rcm {

        bottom: 22px;
        left: 135px;

    }

    .node-people {

        left: 12px;
        top: 135px;

    }

}
/* =========================================================
   PREMIUM TEAM ORBIT ANIMATION
   ========================================================= */

.team-growth-visual {
    animation: teamVisualFloat 6s ease-in-out infinite;
}

/* Outer orbit */

.circle-one {
    animation: orbitRotate 24s linear infinite;
}

.circle-two {
    animation: orbitRotateReverse 18s linear infinite;
}


/* Central TEAM */

.growth-core {
    animation:
        teamCorePulse 4s ease-in-out infinite,
        teamCoreGlow 4s ease-in-out infinite;
}


/* Nodes */

.growth-node {
    animation: nodeFloat 4s ease-in-out infinite;
}

/* Different timing prevents robotic movement */

.node-tech {
    animation-delay: 0s;
}

.node-data {
    animation-delay: .8s;
}

.node-rcm {
    animation-delay: 1.6s;
}

.node-people {
    animation-delay: 2.4s;
}


/* =========================================================
   FLOATING VISUAL
   ========================================================= */

@keyframes teamVisualFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

}


/* =========================================================
   ORBIT RINGS
   ========================================================= */

@keyframes orbitRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes orbitRotateReverse {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }

}


/* =========================================================
   CENTRAL CORE
   ========================================================= */

@keyframes teamCorePulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.045);
    }

}


@keyframes teamCoreGlow {

    0%,
    100% {
        box-shadow:
            0 25px 70px rgba(47,128,237,.30);
    }

    50% {
        box-shadow:
            0 25px 90px rgba(47,128,237,.55);
    }

}


/* =========================================================
   NODES
   ========================================================= */

@keyframes nodeFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }

}


/* =========================================================
   HOVER INTERACTION
   ========================================================= */

.team-growth-visual:hover .circle-one,
.team-growth-visual:hover .circle-two,
.team-growth-visual:hover .growth-core,
.team-growth-visual:hover .growth-node {
    animation-play-state: paused;
}


/* =========================================================
   NODE HOVER
   ========================================================= */

.growth-node {

    cursor: pointer;

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

}

.growth-node:hover {

    background: #FF9F0A;

    color: #ffffff;

    transform: scale(1.12);

    box-shadow:
        0 12px 35px rgba(255,159,10,.40);

}


/* =========================================================
   CORE HOVER
   ========================================================= */

.growth-core {

    cursor: pointer;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.growth-core:hover {

    transform: scale(1.08);

    box-shadow:
        0 30px 100px rgba(47,128,237,.65);

}


/* =========================================================
   REDUCED MOTION ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .team-growth-visual,
    .circle-one,
    .circle-two,
    .growth-core,
    .growth-node {

        animation: none !important;

    }

}