/* Opacity Animation  */
.excellenceImageContentWrapper .rightContentBox .titleRow,
.selectedWorksByTeamSection .titleRow .title,
.selectedWorksByTeamSection .titleRow .underlineLink,
.joinMembrshipBoxInfo .infoTitle,
.aboutImageExperienceSection .contentBox .leftContentBox {
    opacity: 0;
    will-change: opacity;
}

/* Transform and Opacity Animation  */

.excellenceImageContentWrapper .rightContentBox .excellenceList .excellenceItem,
.excellenceImageContentWrapper .leftImagesBox .rightImageBox img,
.excellenceImageContentWrapper .leftImagesBox .leftImageBox img,
.selectedWorksByTeamSection .worksList,
.joinMembrshipBox .joinMembrshipBoxImg .imageBox,
.videoSection video,
.aboutImageExperienceSection .contentBox .rightContentBox .exprienceBox .expreinceItem,
.aboutImageExperienceSection .contentBox .rightContentBox .imageBox img,
.imageAboutDescriptionSection .contentBox .leftContentBox,
.imageAboutDescriptionSection .contentBox .rightContentBox,
.imageAboutDescriptionSection .imageBox img {
    opacity: 0;
    transform: translateY(100px);
    will-change: transform, opacity;
}

.videoSection .container {
    padding: 0 !important;
}

.videoSection video {
    max-height: 700px;
}

.imageAboutDescriptionSection {
    padding-top: 48px;
    padding-bottom: 64px;
}

.imageAboutDescriptionSection .imageBox {
    height: 580px;
    width: 100%;
}

.imageAboutDescriptionSection .imageBox img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.imageAboutDescriptionSection .contentBox {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    padding-top: 100px;
}

.aboutImageExperienceSection .contentBox .rightContentBox .exprienceBox .expreinceItem .rightText,
.aboutImageExperienceSection .contentBox .leftContentBox,
.imageAboutDescriptionSection .contentBox .leftContentBox {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #222;
    font-weight: 500;
}

.imageAboutDescriptionSection .contentBox .rightContentBox {
    flex: .78 0 0px;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #858585;
    font-weight: 500;
}

.aboutImageExperienceSection {
    padding-block: 100px;
}

.aboutImageExperienceSection .contentBox {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.aboutImageExperienceSection .contentBox .rightContentBox {
    flex: .8 0 0px;
    display: flex;
    gap: 56px;
    align-items: start;
}

.aboutImageExperienceSection .contentBox .rightContentBox .exprienceBox,
.aboutImageExperienceSection .contentBox .rightContentBox .imageBox {
    flex: 1;
}

.aboutImageExperienceSection .contentBox .rightContentBox .imageBox img {
    width: 100%;
    height: 384px;
    object-fit: cover;
}

.aboutImageExperienceSection .contentBox .rightContentBox .exprienceBox {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.aboutImageExperienceSection .contentBox .rightContentBox .exprienceBox .expreinceItem {
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: start;
    cursor: pointer;
    will-change: box-shadow;
    box-shadow: inset 0 1px 0 0 #222;
    transition: box-shadow 0.3s ease;
}

.aboutImageExperienceSection .contentBox .rightContentBox .exprienceBox .expreinceItem .leftText {
    font-family: "Helvetica", sans-serif;
    font-size: 72px;
    font-weight: 700;
    color: #222;
    line-height: 80px;

}

.aboutImageExperienceSection .contentBox .rightContentBox .exprienceBox .expreinceItem:hover {
    box-shadow: inset 0 6px 0 0 #222;

}

.selectedWorksByTeamSection {
    padding-block: 100px;
}

.selectedWorksByTeamSection .titleRow {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 64px;
}

.selectedWorksByTeamSection .titleRow .title {
    font-family: "Helvetica", sans-serif;
    font-size: 72px;
    line-height: 80px;
    font-weight: 400;
    color: #222;
    margin: 0;
    max-width: 60%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.selectedWorksByTeamSection .titleRow b {
    font-weight: 600;
}

.selectedWorksByTeamSection .worksList {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.selectedWorksByTeamSection .worksList .workCard {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    text-decoration: none;
}

.selectedWorksByTeamSection .worksList .workCard .imageBox img {
    height: 600px;
    width: 100%;
    object-fit: cover;
}

.selectedWorksByTeamSection .worksList .workCard .workTitleRow {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: start;
    will-change: border, padding;
    transition: border 0.2s, padding 0.2s ease-in;
}

.selectedWorksByTeamSection .worksList .workCard .workTitleRow .title {
    font-family: "Helvetica", sans-serif;
    font-style: 32px;
    font-weight: 700;
    line-height: 40px;
    color: #222;
    margin: 0;
}

.selectedWorksByTeamSection .worksList .workCard .workTitleRow .date {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #222;
}

.selectedWorksByTeamSection .worksList .workCard:hover .workTitleRow {
    padding-bottom: 20px;
    border-bottom: 1px solid #222;
}

.excellenceImageContentSection {
    padding-block: 100px;
}

.excellenceImageContentWrapper {
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.excellenceImageContentWrapper .leftImagesBox {
    display: flex;
    gap: 20px;
    height: 530px;
    flex: .9 0 0px;
}

.excellenceImageContentWrapper .leftImagesBox .leftImageBox {
    height: 388px;
    width: 100%;
}

.excellenceImageContentWrapper .leftImagesBox .rightImageBox {
    height: 100%;
    display: flex;
    align-items: end;
    width: 100%;
}

.excellenceImageContentWrapper .leftImagesBox .rightImageBox img {
    transform: translateY(-100px);
    width: 100%;
    object-fit: cover;
    height: 388px;
}

.excellenceImageContentWrapper .leftImagesBox .leftImageBox img {
    width: 100%;
    object-fit: cover;
    height: 388px;
}

.excellenceImageContentWrapper .rightContentBox {
    max-width: 680px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.excellenceImageContentWrapper .rightContentBox .titleRow {
    display: flex;
    flex-direction: column;
    font-family: "Helvetica", sans-serif;
    font-size: 72px;
    font-weight: 400;
    line-height: 80px;
    color: #fcfcfc;
}

.excellenceImageContentWrapper .rightContentBox .bottomTitle {
    font-weight: 700;
}

.excellenceImageContentWrapper .rightContentBox .excellenceList {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.excellenceImageContentWrapper .rightContentBox .excellenceList .excellenceItem {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding-bottom: 24px;
    border-bottom: 1px solid #4d4d4d;
}

.excellenceImageContentWrapper .rightContentBox .excellenceList .title,
.excellenceImageContentWrapper .rightContentBox .excellenceList .date {
    font-family: "Helvetica", sans-serif;
    font-size: 20px;
    line-height: 30px;
    color: #fcfcfc;
    font-weight: 500;
}

.ourTeamWithRowsSection {
    padding-top: 100px;
    overflow: hidden;
}

.ourTeamWithRowsWrapper {
    display: flex;
    flex-direction: column;
}

.ourTeamWithRowsWrapper .teamRowItem {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
}

.ourTeamWithRowsWrapper .teamRowItem .memberCard {
    display: flex;
    gap: 16px;
    flex: 1;
}

.ourTeamWithRowsWrapper .teamRowItem .memberCard .imageBox {
    max-width: 280px;
    width: 100%;
    height: 180px;
    overflow: unset !important;
}

.ourTeamWithRowsWrapper .teamRowItem .memberCard .imageBox img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ourTeamWithRowsWrapper .teamRowItem .memberCard.partner .imageBox img {
    object-fit: contain;
}

.ourTeamWithRowsWrapper .teamRowItem .memberCard .infoBox {
    display: flex;
    max-width: 178px;
    width: 100%;
    flex-direction: column;
    height: 100%;
}

.ourTeamWithRowsWrapper .teamRowItem .memberCard.partner .infoBox a {
    text-decoration: none;
}

.ourTeamWithRowsWrapper .teamRowItem .memberCard.partner .infoBox a:hover .title {
    color: #000000;
}

.ourTeamWithRowsWrapper .teamRowItem .memberCard .infoBox .possition,
.ourTeamWithRowsWrapper .teamRowItem .memberCard .infoBox .title {
    font-family: "Helvetica", sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #222;
    line-height: 26px;
    transition: all 0.3s ease-in-out;
}

.ourTeamWithRowsWrapper .teamRowItem .memberCard.partner .infoBox .possition {
    font-size: 14px;
    line-height: 16px;
}

.ourTeamWithRowsWrapper .teamRowItem .memberCard .infoBox .possition {
    color: #858585;
}

.ourTeamWithRowsWrapper .teamRowItem .memberCard.top {
    align-items: start;
}

.ourTeamWithRowsWrapper .teamRowItem .memberCard.bottom {
    align-items: end;
}

.ourTeamWithRowsWrapper .teamRowItem .text {
    font-family: "Helvetica", sans-serif;
    font-size: 72px;
    line-height: 80px;
    color: #222;
    flex: 1;
}

.ourTeamWithRowsWrapper .teamRowItem .text b {
    font-size: 90px;
    line-height: 100px;
}

.ourTeamWithRowsWrapper .teamRowItem .line {
    flex: 1;
    height: 1px;
    width: 70%;
    background-color: #222;
}

.ourTeamWithRowsWrapper .teamRowItem .line.transparent {
    background-color: transparent !important;
}

.ourTeamWithRowsWrapper .teamRowItem .link {
    flex: 1;
    display: flex;
    align-items: end;
}

.ourTeamWithRowsWrapper .teamRowItem>div {
    opacity: 0;
    will-change: transform, opacity;
}

.ourTeamWithRowsWrapper .teamRowItem>div:nth-child(2) {
    display: flex;
    justify-content: center;
}

.ourTeamWithRowsWrapper .teamRowItem>div:nth-child(3) {
    display: flex;
    justify-content: end;
}

.ourTeamWithRowsWrapper .teamRowItem:nth-child(3)>div:nth-child(2),
.ourTeamWithRowsWrapper .teamRowItem:nth-child(4)>div:nth-child(3),
.ourTeamWithRowsWrapper .teamRowItem:nth-child(1)>div:nth-child(1) {
    transform: translateX(-100px);
}

.ourTeamWithRowsWrapper .teamRowItem:nth-child(1)>div:nth-child(3) {
    transform: translateX(100px);
}

@media only screen and (max-width: 1200px) {

    .heroBreadcrumbWrapper .title {
        font-size: 72px;
        line-height: 80px;
    }


}

@media only screen and (max-width: 1020px) {
    .heroBreadcrumbWrapper .title {
        font-size: 58px;
        line-height: 65px;
        max-width: 100%;
    }

    .heroBreadcrumbSection {
        padding: 60px 0 0;
    }

    .imageAboutDescriptionSection .imageBox {
        height: 400px;
    }

    .imageAboutDescriptionSection .contentBox {
        padding-top: 80px;
    }

    .imageAboutDescriptionSection .contentBox .rightContentBox {
        flex: 0.85 0 0px;

    }

    .aboutImageExperienceSection .contentBox .rightContentBox .exprienceBox,
    .aboutImageExperienceSection .contentBox .rightContentBox .imageBox {
        flex: 0 0 auto;
        width: 100%;
    }


    .aboutImageExperienceSection {
        padding-top: 16px;
    }

    .aboutImageExperienceSection .contentBox {
        flex-direction: column;
    }

    .aboutImageExperienceSection .contentBox {
        gap: 40px;
    }

    .aboutImageExperienceSection .contentBox .rightContentBox {
        flex: 0 0 auto;
        flex-direction: column;
    }

    .videoSection video {
        height: 500px !important;
    }

    .selectedWorksByTeamSection {
        padding-top: 80px;
    }

    .selectedWorksByTeamSection .titleRow {
        flex-direction: column;
        gap: 17px;
        align-items: start;
    }

    .aboutImageExperienceSection .contentBox .rightContentBox .exprienceBox .expreinceItem .leftText,
    .ourTeamWithRowsWrapper .teamRowItem .text,
    .ourTeamWithRowsWrapper .teamRowItem .text b,
    .excellenceImageContentWrapper .rightContentBox .titleRow,
    .selectedWorksByTeamSection .titleRow .title {
        font-size: 45px;
        line-height: 52px;
    }

    .selectedWorksByTeamSection .worksList {
        display: flex;
        flex-direction: column;
    }

    .selectedWorksByTeamSection .worksList .workCard .imageBox img {
        height: 400px;
        width: 100%;
        object-fit: cover;
    }

    .excellenceImageContentWrapper {
        flex-direction: column;
    }

    .excellenceImageContentWrapper .leftImagesBox .rightImageBox img,
    .excellenceImageContentWrapper .leftImagesBox .leftImageBox img {
        height: 300px;
    }

    .excellenceImageContentSection {
        padding-block: 80px;
    }

    .ourTeamWithRowsWrapper .teamRowItem {
        flex-direction: column;
        align-items: start !important;
    }

    .excellenceImageContentWrapper .rightContentBox {
        margin-top: 64px;
    }
}