/* =========================
    About Us
    ========================= */

.about-us {
    position: relative;
    padding-top: 50px;
    padding-bottom: 102px;
}

.about-us__container {
    gap: 60px;
}

.about-us__bg_image {
    position: absolute;
    bottom: 100px;
    right: -50px;
    aspect-ratio: 1;
    max-width: 273px;
    width: 100%;
    z-index: -1;
    pointer-events: none;
}

.about-us__content {
    max-width: 668px;
    gap: 16px;
}

.about-us__content__item {
    gap: 16px;
}

.about-us__content h1 {
    text-align: left;
    line-height: 1.1;
}

.about-us__badge {
    align-self: flex-start;
    font-size: 16px;
    border-radius: 8px;
}

.about-us__img-wrapper {
    max-width: 518px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.about-us__img {
    position: relative;
    max-width: 404px;
    width: 100%;
    display: flex;
}

.about-us__img .background-icon {
    position: absolute;
    top: 0;
    left: -9px;
    width: auto;
    height: auto;
    transform: translateY(-49%);
    z-index: 1;
    pointer-events: none;
}

.about-us__img .main-img {
    aspect-ratio: 404 / 474;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 24px;
}

@media (max-width: 1024px) {
    .about-us__container {
        flex-direction: column;
        align-items: center;
    }

    .about-us__content {
        max-width: none;
    }
}

@media (max-width: 768px) {
    .about-us {
        padding-top: 24px;
        padding-bottom: 0;
    }

    .about-us__bg_image {
        bottom: -24px;
        right: -70px;
        max-width: 172px;
        z-index: 1;
    }

    .about-us__container {
        gap: 24px;
    }

    .about-us__img .background-icon {
        max-width: 70px;
        transform: translateY(0);
        top: -12px;
        left: -8px;
    }

    .about-us__img .main-img {
        aspect-ratio: 329 / 300;
    }
}

/* =========================
    History
    ========================= */

.history {
    padding-bottom: 48px;
    gap: 40px;
}

.history__content {
    width: 100%;
    height: 100%;
    justify-content: space-between;
    gap: 16px;
}

.history__content.mobile {
    display: none;
}

.history__badge {
    align-self: flex-start;
    border-radius: 8px;
    font-size: 16px;
}

.history__content h2 {
    text-align: left;
    --title-fs: 38px;
}

@media (max-width: 1280px) {
    .history__content h2 {
        --title-fs: 34px;
    }
}

.history__content__item {
    gap: 16px;
}

.history__content__item:first-child {
    padding-bottom: 73px;
}

.history__content__item:nth-child(2) {
    max-width: 398px;
}

.history__content__item.card-text .card-text__img {
    width: 70px;
    height: 70px;
    top: -12px;
    right: -20px;
}

.history__content__item__header {
    gap: 8px;
}

.history__content__item_levels {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.history__content__item_level {
    padding: 16px 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border: 1px solid #BDBEBE;
    border-radius: 14px;
    color: var(--black);
}

.history__content__item_level .point {
    display: inline-flex;
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

.history__cards {
    width: 100%;
    gap: 8px;
}

.history__card .card-text__content {
    height: 100%;
}

.history__card.first .card-text__content {
    justify-content: space-between;
}

.history__card.second .card-text__content {
    justify-content: flex-end;
    gap: 24px;
}

@media (max-width: 1024px) {
    .history {
        flex-direction: column;
    }

    .history__content {
        order: 2;
    }

    .history__content.mobile {
        order: 0;
        display: flex;
    }

    .history__content.mobile .history__content__item:first-child {
        padding-bottom: 0;
    }

    .history__content:not(.mobile) .history__content__item:first-child {
        display: none;
    }

    .history__content__item:nth-child(2) {
        max-width: none;
    }

    .history__cards {
        order: 1;
    }
}

@media (max-width: 768px) {
    .history {
        padding-top: 24px;
        padding-bottom: 24px;
        gap: 24px;
    }

    .history__cards {
        flex-direction: column;
    }

    .history__content h2 {
        --title-fs: 24px;
    }
}

/* =========================
    Preparation
    ========================= */

.preparation {
    position: relative;
    padding-top: 48px;
    padding-bottom: 48px;
    align-items: center;
    gap: 24px;
}

.preparation__decor__img {
    position: absolute;
    width: auto;
    height: auto;
    z-index: -1;
}

.preparation__decor__img:nth-child(1) {
    top: 0;
    left: -24px;
}

.preparation__decor__img:nth-child(2) {
    top: 0;
    right: 25px;
}

.preparation__decor__img:nth-child(3) {
    bottom: 0;
    left: -14px;
}

.preparation__decor__img:nth-child(4) {
    bottom: 0;
    right: -36px;
}

.preparation__header {
    gap: 8px;
}

.preparation__badge {
    border-radius: 8px;
    font-size: 16px;
}

.preparation h2 span {
    color: var(--text);
    will-change: color;
}

.preparation__content {
    max-width: 702px;
}

@media (max-width: 768px) {
    .preparation {
        padding-top: 32px;
        padding-bottom: 32px;
        gap: 16px;
    }

    .preparation__decor__img:nth-child(1) {
        width: 57px;
        height: 57px;
        top: 27px;
        left: -23px;
    }

    .preparation__decor__img:nth-child(2) {
        width: 59px;
        height: 59px;
        top: 4px;
        right: -22px;
    }

    .preparation__decor__img:nth-child(3) {
        display: none;
    }

    .preparation__decor__img:nth-child(4) {
        display: none;
    }

    .preparation__header {
        gap: 16px;
    }

    .preparation__badge {
        font-size: 12px;
    }
}

/* =========================
    Chronology
    ========================= */

.chronology {
    padding: 48px 0;
}

.chronology__pin {
    position: sticky;
    top: 15vh;
    height: auto;
    overflow: hidden;
}

.chronology__background {
    --c-gap: 32px;
    --c-bg-pad: 22px 22px;
    --c-content-pad: 60px;
    --c-containers-br: 38px;
    padding: var(--c-bg-pad);
    padding-right: 0;
    background: var(--border);
    border-radius: var(--c-containers-br);
}

.chronology__background::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 72px;
    height: 400px;
    background: linear-gradient(270deg, #F2F2F2 0%, rgba(242, 242, 242, 0) 100%);
    z-index: 1;
    pointer-events: none;
    transition: opacity 400ms ease;
}

.chronology__background.is-end::after {
    opacity: 0;
}

.chronology__container__wrapper {
    align-items: center;
    gap: var(--c-gap);
    overflow: hidden;
}

.chronology__start-card__wrapper {
    position: relative;
    z-index: 4;
}

.chronology__start-card__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--border);
    z-index: 1;
    border-bottom-right-radius: 38px;
    border-bottom-left-radius: 38px;
}

.chronology__start-card {
    position: relative;
    background: var(--bg);
    border-radius: 38px;
    padding: 48px 40px;
    max-width: 496px;
    min-width: 496px;
    width: 100%;
    gap: 24px;
    z-index: 2;
}

.chronology__start-card__content {
    gap: 16px;
}

.chronology__start-card__title {
    margin-bottom: 145px;
    text-align: start;
}

.chronology__start-card__content__socials {
    gap: 12px;
}

.chronology__start-card__content__social {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
}

.chronology__start-card__content__social__link {
    display: inline-flex;
}

.chronology__content {
    padding: 5px 0 5px 4px;
    display: flex;
    width: 100%;
    position: relative;
    z-index: 1;
}

.chronology__cards-block {
    position: relative;
    width: 100%;
    display: flex;
}

.chronology__cards {
    width: max-content;
    gap: 16px;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

.chronology__card {
    flex-shrink: 0;
    width: 305px;
    background: #E8DAF6;
    border-radius: 12px;
    padding: 5px 5px 10px;
    transform: rotate(1.5deg);
}

.chronology__card__container {
    background: var(--bg);
    border-radius: 12px;
    padding: 15px 15px 40px;
    gap: 24px;
}

.chronology__card__content {
    gap: 16px;
}

.chronology__card__title {
    font-family: var(--font-serif);
    font-size: 32px;
    line-height: 1.2;
}

@media screen and (max-width: 1024px) {
    .chronology__start-card {
        min-width: 405px;
    }
}

@media screen and (max-width: 768px) {
    .chronology {
        padding: 32px 0;
    }

    .chronology__pin {
        top: 0;
    }

    .chronology__background {
        --c-bg-pad: 16px;
        padding-right: var(--c-bg-pad);
    }

    .chronology__background::after {
        display: none;
    }

    .chronology__container__wrapper {
        padding: 10px 5px 20px;
        flex-direction: column;
        align-items: stretch;
        gap: 27px;
    }

    .chronology__start-card__background {
        top: -18px;
        border-bottom-right-radius: 22px;
        border-bottom-left-radius: 22px;
    }

    .chronology__start-card {
        max-width: none;
        min-width: 0;
        padding: 22px 18px;
        border-radius: 22px;
    }

    .chronology__start-card__title {
        margin-bottom: 16px;
    }

    .chronology__content {
        overflow: visible;
        padding: 0 5px;
        width: 100%;
        min-height: 333px;
        position: relative;
        z-index: 1;
    }

    .chronology__content::after {
        content: "";
        position: absolute;
        left: -5px;
        right: 0;
        bottom: -22px;
        height: 90px;
        pointer-events: none;
        z-index: 10;
        opacity: 1;
        transition: opacity 400ms ease;
        background: linear-gradient(0deg, #F2F2F2 0%, rgba(242, 242, 242, 0) 100%);
    }

    .chronology__content.is-end::after {
        opacity: 0;
    }

    .chronology__cards-block {
        position: relative;
        width: 100%;
    }

    .chronology__cards {
        position: relative;
        width: 100%;
        will-change: transform;
        transform: translate3d(0, 0, 0);
    }

    .chronology__card {
        position: absolute;
        left: 0;
        right: 0;
        width: 100%;
        transform: translate3d(0, 0, 0);
        border-radius: 18px;
    }

    .chronology__card:nth-child(1) {
        z-index: 10;
    }

    .chronology__card:nth-child(2) {
        z-index: 9;
    }

    .chronology__card:nth-child(3) {
        z-index: 8;
    }

    .chronology__card:nth-child(4) {
        z-index: 7;
    }

    .chronology__card:nth-child(5) {
        z-index: 6;
    }

    .chronology__card:nth-child(6) {
        z-index: 5;
    }

    .chronology__card:nth-child(7) {
        z-index: 4;
    }

    .chronology__card:nth-child(8) {
        z-index: 3;
    }

    .chronology__card:nth-child(9) {
        z-index: 2;
    }

    .chronology__card:nth-child(10) {
        z-index: 1;
    }
}

/* =========================
    Exams
    ========================= */

.exams {
    position: relative;
    padding-top: 48px;
    padding-bottom: 48px;
    align-items: center;
}

.exams__decor__img {
    position: absolute;
    width: auto;
    height: auto;
    z-index: -1;
}

.exams__decor__img:nth-child(1) {
    top: 100px;
    left: -75px;
}

.exams__decor__img:nth-child(2) {
    top: 80px;
    right: -60px;
}

.exams__decor__img:nth-child(3) {
    bottom: 0;
    left: -60px;
}

.exams__decor__img:nth-child(4) {
    bottom: 0;
    right: -35px;
}

.exams__header {
    max-width: 940px;
    gap: 8px;
    margin-bottom: 16px;
}

.exams__subtitle {
    margin-bottom: 24px;
    text-align: center;
}

.exams__badge {
    border-radius: 8px;
    font-size: 16px;
}

.exams h2 {
    color: #C6C6C6;
}

.exams__content {
    max-width: 1008px;
    width: 100%;
}

.exams__content .level-cards--hero {
    --lc-col-min: 154px;
    --lc-col-max: 240px;
    --lc-gap: 8px;

    justify-content: center;
    grid-template-columns: repeat(4, minmax(var(--lc-col-min), var(--lc-col-max)));
}

@media (max-width: 1024px) {
    .exams__content .level-cards--hero {
        --lc-col-min: 0px;
        --lc-col-max: 1fr;

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

    .exams__decor__img:nth-child(1),
    .exams__decor__img:nth-child(2),
    .exams__decor__img:nth-child(3),
    .exams__decor__img:nth-child(4) {
        display: none;
    }
}

@media (max-width: 768px) {
    .exams {
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .exams__decor__img:nth-child(1) {
        width: 57px;
        height: 57px;
        top: 27px;
        left: -23px;
    }

    .exams__decor__img:nth-child(2) {
        width: 59px;
        height: 59px;
        top: 4px;
        right: -22px;
    }

    .exams__decor__img:nth-child(3) {
        display: none;
    }

    .exams__decor__img:nth-child(4) {
        display: none;
    }

    .exams__header {
        gap: 8px;
        margin-bottom: 8px;
    }

    .exams__subtitle {
        margin-bottom: 14px;
        max-width: 250px;
    }

    .exams__badge {
        font-size: 12px;
    }
}