/* Fold */

.fold {
    width: 100%;

    background-image: url("../../assets/media/pages/about-us/fold.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    display: flex;

    padding: 90px var(--space-xxxl) var(--space-xxxl) var(--space-xxxl);

    position: relative;
}

.fold__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-m);

    padding: var(--space-xxxl) 0;

    position: relative;
}

.fold__slogan {
    display: flex;
    align-items: center;
    gap: var(--space-m);
}

.fold__slogan-text {
    color: var(--color-03);
}

.fold__body > .c-title {
    color: var(--color-03);
}

.fold__intro {
    color: var(--color-03);
}

.fold__cutout {
    width: 60%;
}

.fold__body > .c-btn {
    transform-origin: bottom left;
    -webkit-transform-origin: bottom left;
}

/* Stats */

.stats {
    padding: var(--space-xxxl);

    position: relative;
}

.stats__body {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xxl);
}

.stat {
    width: calc(25% - (3 * var(--space-xxl) / 4));

    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

.stat > .c-heading {
    color: var(--color-01);
}

/* Our story */

.our-story {
    padding: var(--space-xxxl) 0 var(--space-xxxl) var(--space-xxxl);

    position: relative;
}

.our-story__body {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xxl);
}

.our-story__left {
    width: calc((100% - (var(--space-xxl) + var(--space-xxxl))) / 2);

    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

.our-story__left > .ros-wrapper > .c-btn {
    transform-origin: bottom left;
    -webkit-transform-origin: bottom left;
}

.our-story__right {
    width: calc((100% - (var(--space-xxl) + var(--space-xxxl))) / 2 + var(--space-xxxl));

    display: flex;

    transform: skewX(var(--skew-negative-degree-m));
    -webkit-transform: skewX(var(--skew-negative-degree-m));
    transform-origin: top left;
    -webkit-transform-origin: top left;

    overflow: hidden;

    position: relative;
}

.our-story__media {
    width: 100%;

    transform: skewX(var(--skew-positive-degree-m));
    -webkit-transform: skewX(var(--skew-positive-degree-m));
    transform-origin: top left;
    -webkit-transform-origin: top left;
}

.our-story__cutout {
    height: 270px;
}

/* Advantages */

.advantages {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xxxl);

    padding: var(--space-xxxl);

    position: relative;
}

.advantages__slider {
    max-width: 100%;
}

.advantage {
    border: 1px solid var(--color-05);

    display: flex;
    align-items: center;
    gap: var(--space-xxl);

    padding: var(--space-xxl);
}

.advantage__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
}

.advantage__icon {
    height: 54px;
}

.advantages__nav {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xxl);
}

.advantages__nav-btn {
    width: 54px;
    height: 54px;
    
    background-color: var(--color-01);

    display: flex;
    align-items: center;
    justify-content: center;
    
    transition: var(--transition-01);
    -webkit-transition: var(--transition-01);
}

.advantages__nav-btn:hover {
    background-color: var(--color-02);
}

.advantages__nav-btn--prev {
    transform: skewX(var(--skew-positive-degree-m));
    -webkit-transform: skewX(var(--skew-positive-degree-m));
    transform-origin: top left;
    -webkit-transform-origin: top left;
}

.advantages__nav-btn--next {
    transform: skewX(var(--skew-negative-degree-m));
    -webkit-transform: skewX(var(--skew-negative-degree-m));
    transform-origin: top right;
    -webkit-transform-origin: top right;
}

.advantages__nav-btn > img {
    width: 24px;
}

.advantages__nav-btn--prev > img {
    transform: skewX(var(--skew-negative-degree-m));
    -webkit-transform: skewX(var(--skew-negative-degree-m));
}

.advantages__nav-btn--next > img {
    transform: skewX(var(--skew-positive-degree-m));
    -webkit-transform: skewX(var(--skew-positive-degree-m));
}

.advantages__nav-hr {
    width: calc(100% - (2 * var(--space-xxl)) - 108px);
    height: 1px;

    background-color: var(--color-05);
}

/* CTA */

.cta {
    width: 100%;

    background-image: url("../../assets/media/pages/about-us/cta.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    display: flex;

    padding: var(--space-xxxl);

    position: relative;
}

.cta__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-m);

    padding: var(--space-xxxl) 0;

    position: relative;
}

.cta__slogan {
    display: flex;
    align-items: center;
    gap: var(--space-m);
}

.cta__slogan-text {
    color: var(--color-03);
}

.cta__body > .c-title {
    color: var(--color-03);
}

.cta__intro {
    color: var(--color-03);
}

.cta__cutout {
    width: 60%;
}

.cta__body > .c-btn {
    transform-origin: bottom left;
    -webkit-transform-origin: bottom left;
}

/* FAQ */

.faq {
    display: flex;
    flex-direction: column;
    gap: var(--space-xxxl);

    padding: var(--space-xxxl);

    position: relative;
}

.faq__wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

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

.faq__question-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);

    cursor: pointer;
}

.faq__toggle-btn {
    display: flex;

    position: relative;
}

.faq__toggle-btn > div {
    width: 24px;
    height: 1px;

    background-color: var(--color-08);

    transition: var(--transition-01);
    -webkit-transition: var(--transition-01);
}

.faq__block > .faq__question-wrapper > .faq__toggle-btn > div:first-child {
    position: absolute;
}

.faq__block._active > .faq__question-wrapper > .faq__toggle-btn > div:first-child {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
}

.faq__answer-wrapper {
    display: none;

    margin-top: 20px;
}

.faq__block:first-child > .faq__answer-wrapper {
    display: flex;
}

.faq__hr {
    width: 100%;
    height: 1px;

    background-color: var(--color-05);
}

@media (max-width: 1024px) {
    /* Fold */

    .fold__body {
        width: 100%;
    }

    /* Stats */

    .stat {
        width: calc(50% - (var(--space-xxl) / 2));
    }

    /* Our story */

    .our-story {
        padding: var(--space-xxxl);
    }

    .our-story__body {
        flex-direction: column-reverse;
    }

    .our-story__left,
    .our-story__right {
        width: 100%;
    }

    /* CTA */

    .cta__body {
        width: 100%;
    }
}

@media (max-width: 768px) {
    /* Stats */

    .stats {
        flex-direction: column;
    }

    .stat {
        width: 100%;
    }

    /* FAQ */

    .faq__question-wrapper {
        flex-direction: column-reverse;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    /* Fold */

    .fold__body {
        padding: calc(2 * var(--space-xxxl)) 0 ;
    }

    /* Advantages */

    .advantage {
        flex-direction: column;
        align-items: flex-start;
    }

    /* CTA */

    .cta__body {
        padding: calc(2 * var(--space-xxxl)) 0 ;
    }
}