/* =========================================================
   OUR TEAM SECTION
========================================================= */

.team-section {
    --team-navy: #111d35;
    --team-orange: #f56800;
    --team-text: #25334c;

    position: relative;
    width: 100%;
    overflow: hidden;

    padding: 55px 0 55px;

    background:
        radial-gradient(
            circle at 50% 40%,
            #ffffff 0%,
            #fafbfd 65%,
            #f7f8fa 100%
        );
}


/* =========================================================
   CONTAINER
========================================================= */

.team-container {
    position: relative;
    z-index: 2;

    width: calc(100% - 40px);
    max-width: 1450px;

    margin: 0 auto;
}


/* =========================================================
   DECORATIVE DOTS
========================================================= */

.team-dots {
    position: absolute;

    top: 80px;
    left: 8px;

    width: 210px;
    height: 205px;

    opacity: .45;

    background-image:
        radial-gradient(
            circle,
            #f5b58b 1.5px,
            transparent 1.6px
        );

    background-size: 11px 11px;

    mask-image:
        linear-gradient(
            to right,
            #000 40%,
            transparent 100%
        );

    -webkit-mask-image:
        linear-gradient(
            to right,
            #000 40%,
            transparent 100%
        );
}


/* =========================================================
   DECORATIVE CIRCLE
========================================================= */

.team-circle {
    position: absolute;

    top: -175px;
    right: -95px;

    width: 390px;
    height: 390px;

    border: 70px solid rgba(246, 104, 0, .065);

    border-radius: 50%;
}


/* =========================================================
   HEADING
========================================================= */

.team-heading {
    margin-bottom: 56px;

    text-align: center;
}

.team-eyebrow {
    display: block;

    margin-bottom: 12px;

    color: var(--team-orange);

    font-size: 15px;
    font-weight: 700;

    letter-spacing: 4px;
}

.team-heading h2 {
    margin: 0;

    color: var(--team-navy);

    font-size: clamp(55px, 5vw, 88px);

    font-weight: 800;

    line-height: .98;

    letter-spacing: -3px;
}

.heading-line {
    width: 57px;
    height: 3px;

    margin: 22px auto 19px;

    border-radius: 10px;

    background: var(--team-orange);
}

.team-heading p {
    margin: 0;

    color: var(--team-text);

    font-size: 16px;
    font-weight: 400;

    line-height: 1.65;
}


/* =========================================================
   CAROUSEL
========================================================= */

.team-carousel {
    position: relative;

    width: 100%;

    margin: 0 auto;

    overflow: hidden;
}


/* =========================================================
   TRACK
========================================================= */

.team-track {
    display: flex;

    flex-direction: row;

    align-items: stretch;

    gap: 10px;

    width: max-content;

    margin: 0;
    padding: 0;

    will-change: transform;

    transform: translate3d(0, 0, 0);

    backface-visibility: hidden;
}


/* =========================================================
   TEAM CARD
   5 CARDS VISIBLE
========================================================= */

.team-card {
    flex: 0 0 300px;

    width: 300px;
    min-width: 300px;
    max-width: 300px;

    overflow: hidden;

    box-sizing: border-box;

    border: 1px solid rgba(20, 30, 50, .025);

    border-radius: 11px;

    background: #ffffff;

    /* NO SHADOW */
    box-shadow: none;

    transition:
        transform .35s ease;
}


/* =========================================================
   CARD HOVER
========================================================= */

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

    /* NO SHADOW */
    box-shadow: none;
}


/* =========================================================
   TEAM IMAGE
========================================================= */

.team-image {
    display: block;

    width: 100%;
    height: 330px;

    overflow: hidden;

    background: #eef0f3;
}

.team-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center top;

    transition:
        transform .45s ease;
}

.team-card:hover .team-image img {
    transform: scale(1.035);
}


/* =========================================================
   TEAM INFO
========================================================= */

.team-info {
    min-height: 220px;

    box-sizing: border-box;

    padding: 24px 19px 21px;

    text-align: center;

    background: #ffffff;
}

.team-info h3 {
    margin: 0 0 7px;

    color: var(--team-navy);

    font-size: 21px;

    font-weight: 750;

    line-height: 1.25;
}

.team-role {
    display: block;

    margin-bottom: 13px;

    color: var(--team-orange);

    font-size: 14px;

    font-weight: 700;
}

.team-info p {
    min-height: 42px;

    margin: 0 auto;

    color: var(--team-text);

    font-size: 12.5px;

    font-weight: 400;

    line-height: 1.65;
}


/* =========================================================
   SOCIAL ICONS
========================================================= */

.team-socials {
    display: flex;

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

    gap: 12px;

    margin-top: 20px;
}

.team-socials a {
    display: flex;

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

    width: 38px;
    height: 38px;

    box-sizing: border-box;

    border: 1px solid #e1e4e8;

    border-radius: 50%;

    color: var(--team-navy);

    background: #ffffff;

    text-decoration: none;

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

.team-socials a i {
    font-size: 14px;
}

.team-socials a:hover {
    border-color: var(--team-orange);

    color: #ffffff;

    background: var(--team-orange);

    transform: translateY(-3px);
}


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

.team-cta {
    margin-top: 29px;

    text-align: center;
}

.team-cta-eyebrow {
    display: block;

    margin-bottom: 9px;

    color: var(--team-orange);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 3px;
}

.team-cta h3 {
    margin: 0 0 7px;

    color: var(--team-navy);

    font-size: 26px;

    font-weight: 750;

    line-height: 1.25;
}

.team-cta p {
    margin: 0 0 15px;

    color: #2d3a51;

    font-size: 13.5px;

    line-height: 1.6;
}


/* =========================================================
   BUTTON
========================================================= */

.team-openings-btn {
    display: inline-flex;

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

    gap: 23px;

    min-width: 175px;
    height: 40px;

    padding: 0 17px 0 22px;

    box-sizing: border-box;

    border-radius: 7px;

    color: #ffffff;

    background: linear-gradient(
        135deg,
        #f56800,
        #eb6100
    );

    /* NO SHADOW */
    box-shadow: none;

    font-size: 13px;

    font-weight: 700;

    text-decoration: none;

    transition:
        transform .25s ease;
}

.team-openings-btn i {
    font-size: 10px;
}

.team-openings-btn:hover {
    transform: translateY(-3px);

    /* NO SHADOW */
    box-shadow: none;
}


/* =========================================================
   LARGE LAPTOP
========================================================= */

@media (max-width: 1500px) {

    .team-container {
        width: calc(100% - 30px);
    }

    .team-card {
        flex-basis: 295px;

        width: 295px;
        min-width: 295px;
        max-width: 295px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1200px) {

    .team-container {
        width: calc(100% - 30px);
    }

    .team-card {
        flex-basis: 280px;

        width: 280px;
        min-width: 280px;
        max-width: 280px;
    }

    .team-image {
        height: 310px;
    }
}


/* =========================================================
   SMALL TABLET
========================================================= */

@media (max-width: 1000px) {

    .team-card {
        flex-basis: 270px;

        width: 270px;
        min-width: 270px;
        max-width: 270px;
    }

    .team-image {
        height: 300px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .team-section {
        padding: 48px 0 45px;
    }

    .team-container {
        width: calc(100% - 30px);
    }

    .team-dots {
        top: 45px;
        left: -50px;

        width: 150px;
        height: 150px;

        opacity: .25;
    }

    .team-circle {
        top: -70px;
        right: -130px;

        width: 280px;
        height: 280px;

        border-width: 48px;
    }

    .team-heading {
        margin-bottom: 38px;
    }

    .team-eyebrow {
        margin-bottom: 10px;

        font-size: 11px;

        letter-spacing: 3px;
    }

    .team-heading h2 {
        font-size: 50px;

        letter-spacing: -2px;
    }

    .heading-line {
        width: 45px;
        height: 3px;

        margin: 17px auto 16px;
    }

    .team-heading p {
        font-size: 13px;

        line-height: 1.65;
    }

    .team-desktop-break {
        display: none;
    }


    /* Mobile carousel */

    .team-track {
        gap: 15px;
    }

    .team-card {
        flex: 0 0 calc(100vw - 45px);

        width: calc(100vw - 45px);

        min-width: calc(100vw - 45px);

        max-width: 360px;
    }

    .team-image {
        height: 330px;
    }

    .team-info {
        min-height: 220px;

        padding: 23px 18px 20px;
    }

    .team-info h3 {
        font-size: 20px;
    }

    .team-info p {
        font-size: 12.5px;
    }

    .team-cta {
        margin-top: 32px;
    }

    .team-cta h3 {
        font-size: 23px;
    }

    .team-cta p {
        font-size: 12.5px;
    }

    .team-openings-btn {
        min-width: 170px;

        height: 42px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .team-heading h2 {
        font-size: 44px;
    }

    .team-card {
        flex-basis: calc(100vw - 30px);

        width: calc(100vw - 30px);

        min-width: calc(100vw - 30px);
    }

    .team-image {
        height: 300px;
    }
}