/* about_hero */

.about_hero .container {
    padding-top: 17vh;
    padding-bottom: 8vh;
    position: relative;
    overflow: hidden;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10dvh;
}

.about_hero_img {
    margin-inline: 1.5rem;
}

.about_hero_content {
    align-items: end;
}

.about_hero_content_left {
    grid-column: 1/6;
}

.about_hero_content_right {
    grid-column: 11/13;
}

.about_hero_content_right {
    text-align: right;
}

.about_hero_bg {
    position: absolute;
    height: 80rem;
    right: 0%;
    bottom: 0%;
    filter: blur(15rem);
    transform: translate(50%, 50%);
    opacity: .7;
}

@media only screen and (max-width: 991px) {
    .about_hero_content_left {
        grid-column: 1/8;
    }

    .about_hero .container {
        min-height: 0;
    }

    .about_hero_bg {
        filter: none;
        width: 60rem;
        height: 60rem;
        background: radial-gradient(circle, rgba(230, 38, 54, 0.45) 0%, rgba(230, 38, 54, 0) 70%);
        transform: translate(30%, 30%);
        right: -4rem;
        bottom: -16rem;
    }

    .about_hero_bg img {
        display: none;
    }
}

@media only screen and (max-width:767px) {
    .about_hero .container {
        padding-top: 17.6rem;
    }

    .about_hero_content {
        gap: 4.8rem;

    }

    .about_hero_content_left {
        grid-column: 1/5;
    }

    .about_hero_content_right {
        grid-column: 3/5;
    }
}

/* about_impressive */
.about_impressive {
    padding-top: 10rem;
}

.about_impressive_right_list_item_num {
    margin-bottom: 1.2rem;
}

.about_impressive_right_list {
    display: flex;
    /* gap: 3.2rem; */
    justify-content: space-between;
}

.about_impressive_right_title {
    margin-bottom: 3.2rem;
}

.about_impressive_right_des {
    margin-bottom: 8rem;
}

.about_impressive_left {
    grid-column: 1/4;
}

.about_impressive_right {
    grid-column: 5/13;
}

.about_impressive_left_img {
    margin-top: -.5rem;
    pointer-events: none;
    z-index: -1;
}

@media only screen and (max-width:991px) {
    .about_impressive .container {
        position: relative;
    }

    .about_impressive_left_img {
        position: absolute;
        bottom: 0;
        left: 0;
    }

    .about_impressive_left {
        grid-column: 1/3;
    }

    .about_impressive_right {
        grid-column: 3/9;
        padding-bottom: 6rem;
    }
}

@media only screen and (max-width:767px) {
    .about_impressive_left {
        grid-column: 1/5;
    }

    .about_impressive_right {
        grid-column: 1/5;
        margin-right: 2rem;
    }

    .about_impressive {
        padding-top: 6.4rem;
    }

    .about_impressive_left {
        margin-bottom: 1.6rem;
    }

    .about_impressive_right_title {
        margin-bottom: 1.6rem;
    }

    .about_impressive_right_des {
        margin-bottom: 4.8rem;
    }

    .about_impressive_right_list {
        flex-wrap: wrap;
        gap: 2.4rem;
    }

    .about_impressive_right_list_item {
        width: calc(50% - 1.2rem);
    }

    .about_impressive_right_list_item_des {
        font-size: 1.5rem;
    }

    .about_impressive_right {
        padding-bottom: 6.4rem;
    }
}

/* about_company */


.about_company {
    width: 100%;
    height: 100vh;
}

.about_company_inner {
    width: 100%;
    height: 100%;
    /* background-attachment: fixed; */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media only screen and (max-width:767px) {
    .about_company {
        height: 40rem;
    }

}

/* about_best */
.about_best {
    padding-top: 10rem;
    padding-bottom: 10rem;
    background-color: #101010;
}

.about_best_title {
    margin-bottom: 8rem;
}

.about_best_right {
    grid-column: 8/13;
    justify-content: end;
    display: flex;
    flex-direction: column;
}

.about_best_left {
    grid-column: 2/7;
    margin-right: -1rem;
}

/* about_best_logo hover effects */
.about_best_left svg {
    pointer-events: none;
    /* Let paths handle pointer events */
}

/* Shapes get bounding-box pointer events so their entire rectangular area (Figma frame) is hoverable */
.about_best_left svg path:nth-child(1),
.about_best_left svg path:nth-child(2),
.about_best_left svg path:nth-child(3) {
    pointer-events: bounding-box;
    cursor: pointer;
    transition: fill 0.4s ease, stroke 0.4s ease, opacity 0.4s ease;
}

/* Texts ignore pointer events so the mouse falls through to the shape */
.about_best_left svg path:nth-child(4),
.about_best_left svg path:nth-child(5),
.about_best_left svg path:nth-child(6) {
    pointer-events: none;
    transition: fill 0.4s ease, stroke 0.4s ease, opacity 0.4s ease;
}

/* Implementation: Shape = 1, Text = 5 */
.about_best_left svg path:nth-child(1):hover {
    fill: white;
    stroke: white;
}

.about_best_left svg path:nth-child(1):hover~path:nth-child(5) {
    fill: white;
}

/* Creative: Shape = 2, Text = 6 */
.about_best_left svg path:nth-child(2):hover {
    fill: white;
    stroke: white;
}

.about_best_left svg path:nth-child(2):hover~path:nth-child(6) {
    fill: white;
}

/* Strategy: Shape = 3, Text = 4 */
.about_best_left svg path:nth-child(3):hover {
    opacity: 1;
}

.about_best_left svg path:nth-child(3):hover~path:nth-child(4) {
    fill: #E62636;
}

.about_best_right_des {
    margin-bottom: 1.6rem;
}

.about_best_subtitle {
    margin-bottom: 3.2rem;
}

@media only screen and (max-width:991px) {
    .about_best_left {
        grid-column: 1/9;
    }

    .about_best_right {
        grid-column: 1/9;
    }

    .about_best_inner {
        gap: 2rem;
    }
}

@media only screen and (max-width:767px) {
    .about_best {
        padding-block: 6.4rem;
    }

    .about_best_subtitle {
        margin-bottom: 1.6rem;
    }

    .about_best_title {
        margin-bottom: 3.2rem;
    }

    .about_best_title br {
        display: none;
    }

    .about_best_inner {
        gap: 4.8rem
    }

    .about_best_right {
        font-size: 1.4rem;
    }

    .about_best_right_des {
        margin-bottom: 1.2rem;
    }
}


/* about_team */
.about_team_inner {
    position: relative;
    z-index: 2;
}

.about_team_block {
    height: 300vh;
}

.about_team_main {
    position: sticky;
    top: 0;
    height: 100vh;
    padding-block: 10vh;
}

.about_team_bg {
    position: absolute;
    width: 60.69%;
    right: -10rem;
    top: 0;
    pointer-events: none;
    z-index: -1;
    filter: blur(15rem);
    opacity: .6;
}

.about_team {
    contain: paint;
}

.about_team .container {
    padding-block: 10rem;
    position: relative;
}

.about_team_title {
    width: 94.7rem;
    margin-inline: auto;
    margin-bottom: 3.2rem;
}

.about_team_subtitle {
    width: max-content;
    margin-inline: auto;
    margin-bottom: 3.2rem;

}

.about_team_content {
    position: relative;
    grid-column: 4/-1;
    grid-row: 1/2;
}

.about_team_title_wrap {
    grid-column: 1/-1;
    grid-row: 1/2;
}

.about_team_content_inner {
    position: relative;
    z-index: 2;
    counter-reset: team-counter;
}

.about_team_content_inner .about_team_content_item {
    padding: 3.2rem;
    background-color: #191919;
    height: 100%;
    position: relative;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s ease, box-shadow 0.4s ease;
    counter-increment: team-counter;
}

@media (min-width: 768px) {
    .about_team_content_inner .about_team_content_item:hover {
        background-color: #E62636;
    }

    .about_team_content_inner .about_team_content_item:hover .about_team_content_item_des {
        color: #ebebeb;
    }

    .about_team_content_inner .about_team_content_item:hover .about_team_content_item_title {
        color: #fff;
    }

    .about_team_content_inner .about_team_content_item:hover::after {
        color: #F6A9AF;
    }
}

.about_team_content_inner .about_team_content_item.is-stuck {
    background-color: #E62636;
}

.about_team_content_inner .about_team_content_item.is-stuck::after {
    color: #F6A9AF;
}

.about_team_content_inner .about_team_content_item.is-stuck .about_team_content_item_des {
    color: #ebebeb;
}

.about_team_content_inner .about_team_content_item.is-stuck .about_team_content_item_title {
    color: #fff;
}

.about_team_content_inner .about_team_content_item::before {
    height: 2px;
    background-color: #E62636;
    transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Number in top right corner of each card */
.about_team_content_inner .about_team_content_item::after {
    position: absolute;
    top: 3.2rem;
    right: 3.2rem;
    content: "0"counter(team-counter);
    font-family: "GoogleSans", sans-serif;
    font-size: 3.6rem;
    font-weight: 500;
    line-height: 1;
    color: #929292;
    transition: color 0.4s ease;
}

/* .about_team_content_inner .about_team_content_item:hover::after {
    color: #EF6470;
} */

.about_team_content_inner .about_team_content_item:nth-child(2n) {
    grid-column: 8/12;
    margin-top: 27.5rem;
}

.about_team_content_inner .about_team_content_item_title {
    color: #E62636;
    margin-bottom: 1.2rem;
    transition: color .4s ease;
}

.about_team_content_inner .about_team_content_item_sub {
    margin-bottom: 1.2rem;
}

.about_team_content_inner .about_team_content_item_des {
    color: #929292;
    transition: color 0.4s ease;
}



.about_team_content_item_icon {
    width: 5.6rem;
    height: 5.6rem;
    position: relative;
    margin-bottom: 14rem;
    transition: fill .4s ease;
}

.about_team_content_item_icon img {
    transition: opacity .4s ease;
}

.about_team_content_item_icon_active {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

@media (min-width: 768px) {
    .about_team_content_inner .about_team_content_item:hover .about_team_content_item_icon img {
        opacity: 0;
    }

    .about_team_content_inner .about_team_content_item:hover .about_team_content_item_icon_active {
        opacity: 1 !important;
    }
}

.about_team_content_inner .about_team_content_item.is-stuck .about_team_content_item_icon img {
    opacity: 0;
}

.about_team_content_inner .about_team_content_item.is-stuck .about_team_content_item_icon_active {
    opacity: 1 !important;
}

.about_team_content_item_title {
    margin-bottom: 1.2rem;
}

.about_team_content_mask {
    display: none;
}

.about_team_content_bgleft {
    position: absolute;
    top: 50%;
    left: -39.5rem;
    width: 28.3rem;
    transform: translateY(-50%);
    z-index: 1;
}

.about_team_card_item {
    position: relative;
}


.about_team_card_img_wrap {
    position: relative;
    width: 100%;
    height: 61rem;
    overflow: hidden;
}

.about_team_card_img_item {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.about_team_card_img_item.active {
    width: 100%;
    z-index: 2;
}

.about_team_card_img_item img {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--card-img-width, 100%);
    height: 100%;
    object-fit: cover;
    max-width: none !important;
}

.about_team_card_swiper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.about_team_card_slide {
    display: none;
    width: 100%;
    height: auto;
}

.about_team_card_slide.active {
    display: block;
}

.about_team_card_item_content {
    position: absolute;
    width: 38.5rem;
    padding: 3.2rem;
    background: rgba(16, 16, 16, 0.5);
    backdrop-filter: blur(4.8rem);
    -webkit-backdrop-filter: blur(4.8rem);
    top: 1.6rem;
    left: -1.6rem;
    z-index: 5;
}

.about_team_card_item_content_title {
    margin-bottom: 1.2rem;
}

.about_team_card_item_content_des {
    margin-bottom: 3.2rem;

}

.about_team_card_item_content_bot_buton_item {
    width: 4rem;
    height: 4rem;
    cursor: pointer;

}

.about_team_card_item_content_bot_buton_item.swiper-button-disabled {
    cursor: auto;
    pointer-events: none;
}

.about_team_card_item_content_bot_buton_item.swiper-button-disabled path {
    opacity: .5;
}

.about_team_card_item_content_bot_buton_item rect {
    transition: fill .4s ease;
}

.about_team_card_item_content_bot_buton_item path {
    transition: stroke .4s ease;
}

.about_team_card_item_content_bot_buton_item:hover rect {
    fill: #E62636;
}

.about_team_card_item_content_bot_buton_item:hover path {
    stroke: #fff;
}

.about_team_card_item_content_bot_buton_item.swiper-button-disabled:hover rect {
    fill: #131313;
}

.about_team_card_item_content_bot_buton_item.swiper-button-disabled:hover path {
    stroke: #BEBEBE;
}

.about_team_card_item_content_bot_buton {
    display: flex;
    gap: 1.6rem;
}

.about_team_card_item_content_bot {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.about_team_card_item_content_bot_page {
    gap: .4rem;
    display: flex;
}

@media only screen and (min-width: 992px) {
    .about_team_content {
        width: 100%;
        display: flex;
        align-items: center;
    }

    .about_team_content_main {
        clip-path: polygon(-11.2rem -100%, 1000% -100%, 1000% 100%, -11.2rem 100%);

    }

    .about_team_content_inner {
        display: flex;
        flex-wrap: nowrap;
        column-gap: 3.2rem;
        width: max-content;
        grid-template-columns: none !important;
        margin: 0 !important;
    }

    .about_team_content_inner .about_team_content_item_wrap {
        flex: 0 0 42rem;
        grid-column: auto !important;
        margin-top: 0 !important;
        height: auto;
    }

    .about_team_content_mask {
        display: block;
        position: absolute;
        left: -11.5rem;
        top: 0;
        bottom: 0;
        width: 11.3rem;
        background: linear-gradient(to right, #0D0D0D 60%, rgba(13, 13, 13, 0));
        z-index: 5;
        pointer-events: none;
    }

    .about_team_content_bgleft {
        z-index: 6;
    }
}

@media only screen and (max-width:991px) {
    .about_team_main {
        position: static;
        height: auto;
        padding-block: 8rem;
    }

    .about_team_content_bgleft {
        display: none;
    }

    .about_team .container {
        padding-top: 6rem;
    }

    .about_team_title {
        width: auto;
    }

    .about_team_content_inner .about_team_content_item_wrap {
        width: calc(50% - 1.6rem);
    }

    .about_team_content {
        grid-column: 1/-1;
    }

    .about_team_content_inner {
        display: flex;
        gap: 3.2rem;
        flex-wrap: wrap;
    }

    .about_team_block {
        display: none;
    }

    .about_team_bg {
        filter: none;
        width: 60rem;
        height: 60rem;
        background: radial-gradient(circle, rgba(230, 38, 54, 0.45) 0%, rgba(230, 38, 54, 0) 70%);
        transform: translate(30%, -30%);
        right: 0;
        top: 0;
    }

    .about_team_bg img {
        display: none;
    }

    .about_team_card_item_content {
        background: rgba(16, 16, 16, 0.9);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

@media only screen and (max-width:767px) {
    .about_team .container {
        padding-block: 6.4rem;
    }

    .about_team_subtitle {
        margin-inline: unset;
        margin-bottom: 1.6rem;
    }

    .about_team_title {
        text-align: left;
        margin-bottom: 1.6rem;
    }

    .about_team_des {
        text-align: left;
    }

    .about_team_des br {
        display: none;
    }

    .about_team_content {
        padding-top: 4.8rem;
    }

    .about_team_content_item {
        width: 100%;
        padding: 2.4rem;
    }

    .about_team_content_inner .about_team_content_item_title {
        font-size: 4rem;
    }

    .about_team_content_inner .about_team_content_item::after {
        font-size: 4rem;
        line-height: 1.4em;
    }

    .about_team_content_item_sub {
        font-size: 2rem;
    }

    .about_team_content_inner .about_team_content_item_wrap {
        width: 100%;
        position: sticky;
        top: 10rem;
    }

    .about_team_main {
        padding-top: 0;
        padding-bottom: 4.8rem;
    }

    .about_team_content_inner {
        gap: 1.6rem !important;
        flex-direction: column;
        flex-wrap: unset;
    }

    .about_team_bg {
        top: 9.6rem;
        width: 60rem;
        height: 60rem;
    }

    .about_team_card_img_wrap {
        height: 22rem;
        margin-left: -1.6rem;
        margin-right: -1.6rem;
        width: calc(100% + 3.2rem);
    }

    .about_team_card_swiper {
        position: relative;
        height: auto;
        pointer-events: auto;
    }

    .about_team_card_slide {
        height: auto;
        pointer-events: auto;
    }

    .about_team_card_item_content {
        position: relative;
        inset: unset;
        width: 100%;
        padding: 1.6rem;
        margin-top: 3rem;
        pointer-events: auto;
    }

    .about_team_card_item_content_des {
        margin-bottom: 1.6rem;
    }
}