.team.team {
    margin-block-start: 0;

    position: relative;

}

.team {
    background-color: #E4E1E6;
}



.team-inner {
    padding: 56px 24px;

    @media (min-width: 768px) {
        padding: 64px 32px 58px;
    }

     @media (min-width: 1024px) {
        padding: 72px 32px;
     }
}

.team-container {
    position: relative;

    max-width: 1440px;
    margin: 0 auto;
}

.team-title {
    color: #333134;

    font-weight: 400;
    font-size: 24px;
    line-height: 1.1;
    text-align: center;

    @media (min-width: 768px) {
       font-size: 28px;
    }
    @media (min-width: 1024px) {
        position: absolute;
        left: 0px;

        width: 300px;

        font-size: 28px;
        text-align: left;
      }
}

.title-1 {
    @media (min-width: 1024px) {
        top: 32px;
    }
}

.title-2 {
    margin-bottom: 32px;

    @media (min-width: 768px) {
        margin-bottom: 48px;
    }

    @media (min-width: 1024px) {
        top: 64px;

        margin-bottom: 0;
    }
}

.team-members {
    width: 100%;          
    
}

.team-stage {
    position: relative;

    perspective: 900px;
    max-width: 425px;
    margin: 0 auto;
    aspect-ratio: 327 / 462;

    @media (min-width: 768px) {
        max-width: none;
        width: 279px;

        aspect-ratio: 279 / 438;
    }

    @media (min-width: 1024px)  {
        width: 333px;

        aspect-ratio: 333 / 523;
    }
}

.team-cube {
    position: relative;

    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.33, 1, 0.68, 1);
    transform: translateZ(calc(-1 * var(--half-width, 162px)));
    touch-action: none;
    user-select: none;
}

.team-member {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.team-face--0 {
    transform: rotateY(0deg) translateZ(var(--half-width, 162px));
}

.team-face--1 {
    transform: rotateY(90deg) translateZ(var(--half-width, 162px));
}

.team-face--2 {
    transform: rotateY(180deg) translateZ(var(--half-width, 162px));
}

.team-face--3 {
    transform: rotateY(270deg) translateZ(var(--half-width, 162px));
}

.team-member__media {
    position: relative;

    width: 100%;
    height: auto;

    aspect-ratio: 327 / 462;

    @media (min-width: 768px) {
        aspect-ratio: 279 / 438;
    }

    @media (min-width: 1024px)  {
      

        aspect-ratio: 333 / 523;
    }
}

.team-member__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-progress__segment {
    position: absolute;
    top: 16px;
    left: 8px;
    right: 8px;

    height: 4px;
    border-radius: 4px;

    background-color: #949097;

    overflow: hidden;
    z-index: 1;

    @media (min-width: 768px) {
        left: 16px;
        right: 16px;
    }
}

.team-progress__segment::before {
    content: '';
    display: block;

    height: 100%;
    width: 0;

    background-color: #FFFFFF;
}


.team-progress__segment.active::before {
    animation: fill-progress linear forwards;
    animation-duration: var(--duration, 5s);
}

@keyframes fill-progress {
    from {width: 0%;}
    to {width: 100%;}
}
 
.team-member__avatar {
    position: absolute;
    top: 28px;
    left: 8px;

    height: 53px;
    width: 53px;
    border-radius: 50%;

    @media (min-width: 768px) {
        left: 16px;
    }
}

.team-member__name {
    position: absolute;
    top: 42.5px;
    left: 73px;

    color: #FFFFFF;

    font-weight: 500;
    font-size: 20px;
    line-height: 120%;

    @media (min-width: 768px) {
        left: 81px;

        font-size: 22px;
    }
}

.team-nav__prev,
.team-nav__next {
    border-width: 0;
    padding: 0;

    background-color: transparent;

    z-index: 3;
}

.team-nav__prev svg rect,
.team-nav__next svg rect,
.team-nav__prev svg path,
.team-nav__next svg path {
    transition: fill 0.3s ease;
}

@media (hover: hover) {
    .team-nav__prev:hover svg rect,
    .team-nav__next:hover svg rect {
        fill: #4B4CFF;
    }

    .team-nav__prev:hover svg path,
    .team-nav__next:hover svg path {
        fill: #FFFFFF;
    }
}

.team-nav__prev:active svg rect,
.team-nav__next:active svg rect,
.team-nav__prev:focus-visible svg rect,
.team-nav__next:focus-visible svg rect {
    fill: #1819D3;
}

.team-nav__prev:active svg path,
.team-nav__next:active svg path,
.team-nav__prev:focus-visible svg path,
.team-nav__next:focus-visible svg path {
    fill: #FFFFFF;
}

.team-nav__prev--mobile {
    position: absolute;
    bottom: 29px;
    left: 8px;

    @media (min-width: 768px) {
        display: none;
    }
}

.team-nav__next--mobile {
    position: absolute;
    bottom: 29px;
    right: 8px;

    @media (min-width: 768px) {
        display: none;
    }
}

.team-member__icon--small {
    height: 32px;
    width: 32px;
}

.team-nav__wrapper--tablet {
    display: none; 

    @media (min-width: 768px) {
        position: absolute;
        right: 0;
        top: 50%;

        display: flex;
        align-items: center;
        gap: 12px;

        transform: translateY(-50%);
    }

    @media (min-width: 1024px) {
        display: none;
    }
}

.team-nav__wrapper--desktop {
    display: none;
     
    @media (min-width: 1024px) {
        position: absolute;
        bottom: 0;
        right: -154px;

        display: flex;
        align-items: center;
        gap: 12px;
    }
}

.team-member__icon--big {
    height: 48px;
    width: 48px;
}





.team-counter__tablet {
    display: none;

    @media (min-width: 768px) {
        position: absolute;
        left: 0px;
        top: 50%;

        display: grid;
        place-items: center;

        width: 90px;
        height: 90px;

        transform: translateY(-50%);
    }

    @media (min-width: 1024px) {
        display: none;
    }
}

.team-counter__desktop {
    display: none;

    @media (min-width: 1024px) {
        position: absolute;
        right: -165px;
        bottom: 140px;
        
        display: grid;
        place-items: center;

        width: 90px;
        height: 90px;
    }
}

.team-counter__ring {
    position: absolute;
    inset: 0;

    border: 1px solid #949097;
    border-radius: 50%;
}

.team-counter__ring--spin {
    inset: 8px;
    -webkit-mask-image: conic-gradient(
    from 0deg,
    transparent 0deg,
    #000 40deg,
    #000 200deg,
    transparent 240deg
    );

    mask-image: conic-gradient(
        from 0deg,
        transparent 0deg,
        #000 40deg,
        #000 200deg,
        transparent 240deg
    );

    animation: counter-spin 6s linear infinite;
}

@keyframes counter-spin {
    to { transform: rotate(360deg); }
}

.team-counter__text {
    color: #949097;

    font-family: "Oswald", sans-serif;
    font-weight: 250;
    font-size: 28px;
    line-height: 1.1;
}

.team-positions {
    position: relative;

    margin-top: 16px; 
    border-bottom: 1px solid #333134;

    @media (min-width: 768px) {
        margin-top: 19px;
    }

    @media (min-width: 1024px) {
        display: none;
    }
}

.team-positions__desktop {
    display: none;

    @media (min-width: 1024px) {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translatex(-50%);

        display: block;

        width: 900px;
        border-bottom: 1px solid #333134;
    }
}

.team-position__wrap {
    position: absolute;
    top: -25px;
    left: 0;
    right: 0;
    
    display: grid;

    max-width: 500px;
    margin: 0 auto;
    padding-bottom: 8px;

    overflow: hidden;
    z-index: 10;

    @media (min-width: 768px) {
        top: -28px;
    }

    @media (min-width: 1024px) {
        max-width: none;
        width: 300px;
        
        margin: 0;
        overflow: visible;
    }
}

.team-position {
    --slide: 100%;

    grid-area: 1 / 1;
    transition: transform 0.8s cubic-bezier(0.33, 1, 0.68, 1),
                opacity 0.8s cubic-bezier(0.33, 1, 0.68, 1);
    transform: translateX(var(--slide));
    opacity: 0;

    color: #333134;

    font-family: Oswald, sans-serif;
    font-weight: 250;
    font-size: 24px;
    line-height: 1.1;
    text-align: center;
    z-index: 20;

    @media (min-width: 768px) {
        font-size: 28px;
    }

    @media (min-width: 1024px) {
        --slide: 200px;

        justify-self: end;
        text-align: right;
        transition: transform 0.8s cubic-bezier(0.33, 1, 0.68, 1),
                opacity 0.35s ease-out; 
    }
}

.team-position.is-active {
    transform: translateX(0%);
    opacity: 1;
}

.team-quotes {
    display: grid;
    justify-content: center;

    max-width: 500px;
    margin: 32px auto 0;
    overflow: hidden;

    @media (min-width: 1024px) {
        display: none;
    }
}

.team-quote {
    --slide: 100%;

    grid-area: 1 / 1;
    
    transition: transform 0.8s cubic-bezier(0.33, 1, 0.68, 1),
                opacity 0.8s cubic-bezier(0.33, 1, 0.68, 1);
   transform: translateX(var(--slide));

    opacity: 0;

    color: #949097;
    font-size: 15px;
    line-height: 1.3;
    text-align: center;

   

    @media (min-width: 768px) {
        width: 390px;

        font-size: 18px;
        line-height: 1.4;
    }
}

.team-quote.is-active {
    transform: translateX(0);
    opacity: 1;
}

.team-quotes__desktop--1 {
  display: none;

    @media (min-width: 1024px) {
        position: absolute;
        bottom: 123px;
        left: -313px;

        display: grid;
        justify-content: center;

        width: 197px;
        overflow: hidden;
   }

   @media (min-width: 1440px) {
        left: -420px;
   }
}

.team-quotes__desktop--2 {
    display: none;

    @media (min-width: 1024px) {
        position: absolute;
        top:  100px;
        right:-308px;

        display: grid;
        justify-content: center;

        width: 255px;
        overflow: hidden;
  }

    @media (min-width: 1440px) {
        right:-520px;
        top:  154px;
        
        width: 428px;
   }
}
.team-quotes__desktop--1 .team-quote {
    max-width: none;
    width: auto;
    
    color: #333134;

    font-size: 15px;
    line-height: 1.3;
    text-align: left;
}

.team-quotes__desktop--2 .team-quote {
    max-width: none;
    width: auto;

    color: #333134;

    font-size: 22px;

    line-height: 1.2;
    letter-spacing: -0.02em;
    align-self: end;
    text-align: right;
}