/* Fold */

.fold {
    width: 100%;

    background-image: url("../../assets/media/pages/home/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__body > .c-btn {
    transform-origin: bottom left;
    -webkit-transform-origin: bottom left;
}

.fold__cutout {
    width: 60%;
}

/* Services */

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

    position: relative;
}

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

.services__slider {
    max-width: 100%;
}

.swiper-slide {
    height: auto !important;
}

.service {
    height: 100%;

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

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

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

.service__inner-wrapper {
    position: relative;

    overflow: hidden;
}

.service__body {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: var(--space-xxl);

    position: absolute;

    z-index: 1;
}

.service__body > .c-heading {
    color: var(--color-03);
}

.service__img-wrapper {
    width: 100%;

    display: flex;
}

.service__img {
    width: 100%;
    height: 100%;
}

.services__cta {
    width: 100%;

    border: 1px solid var(--color-05);
}

.services__cta-link {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

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

.services__cta-link-body {
    width: 100%;

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

.services__cta-link-text {
    color: var(--color-01);
}

.services__cta-link-icon {
    width: 54px;

    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.services__nav {
    width: 100%;

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

.services__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);
}

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

.services__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;
}

.services__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;
}

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

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

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

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

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

/* About us */

.about-us {
    padding: var(--space-xxxl) var(--space-xxxl) var(--space-xxxl) 0;

    position: relative;
}

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

.about-us__left {
    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;
}

.about-us__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;
}

.about-us__cutout {
    height: 270px;
}

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

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

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

/* CTA */

.cta {
    width: 100%;

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

    position: relative;
}

.cta__inner-wrapper {
    background-image: url("../../assets/media/pages/home/cta.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    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;

    z-index: 1;
}

.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__body > .c-btn {
    transform-origin: bottom left;
    -webkit-transform-origin: bottom left;
}

.cta__cutout {
    width: 40%;
}

/* Steps */

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

    position: relative;
}

.steps__body {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-xxxl);
}

.steps__wrapper {
    width: 100%;

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

    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xxl);

    position: relative;

    z-index: 1;
}

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

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

.step__number {
    width: 54px;
    height: 54px;
    
    border: 1px solid var(--color-01);

    display: flex;
    align-items: center;
    justify-content: center;

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

.step__number > .c-subheading {
    color: var(--color-01);

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

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

.step__info-left-spacer {
    width: 54px;
    height: 54px;

    display: flex;
    justify-content: center;

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

.step__description {
    flex: 1;
}

/* Pricing */

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

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

    position: relative;
}

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

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

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

    transform: skewX(var(--skew-negative-degree-m));
    -webkit-transform: skewX(var(--skew-negative-degree-m));
    transform-origin: bottom right;
    -webkit-transform-origin: bottom right;

    overflow: hidden;

    position: relative;
}

.pricing__media {
    width: 100%;

    transform: skewX(var(--skew-positive-degree-m));
    -webkit-transform: skewX(var(--skew-positive-degree-m));
    transform-origin: bottom right;
    -webkit-transform-origin: bottom right;
}

.pricing__cutout {
    height: 270px;
}

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

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

/* Testimonials */

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

    position: relative;
}

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

.testimonials__slider {
    max-width: 100%;
}

.swiper-slide {
    height: auto !important;
}

.testimonial {
    height: 100%;

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

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

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

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

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

.testimonial__author-img-wrapper {
    width: 54px;
    height: 54px;

    border-radius: 50%;

    display: flex;

    overflow: hidden;
}

.testimonial__author-img {
    width: 100%;
    height: 100%;
}

.testimonial__author-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.testimonial__author-name {
    font-family: ThicccBoiMedium, NotoSans, Helvetica, Arial, sans-serif;
    
    line-height: 1;
    
    text-transform: uppercase;
}

.testimonial__author-loc {
    line-height: 1;
}

.testimonials__nav {
    width: 100%;

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

.testimonials__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);
}

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

.testimonials__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;
}

.testimonials__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;
}

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

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

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

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

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

@media (max-width: 1280px) {
    /* Pricing */

    .pricing__btns {
        flex-direction: column;
        align-items: initial;
    }
}

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

    .fold__body {
        width: 100%;
    }

    /* About us */

    .about-us {
        padding: var(--space-xxxl);
    }

    .about-us__body {
        flex-direction: column-reverse;
    }

    .about-us__left,
    .about-us__right {
        width: 100%;
    }

    /* CTA */

    .cta__body {
        width: 100%;
    }

    /* Steps */

    .steps__wrapper {
        flex-direction: column;
    }

    .step {
        width: 100%;
    }

    /* Pricing */

    .pricing {
        flex-direction: column-reverse;

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

    .pricing__left,
    .pricing__right {
        width: 100%;
    }
}

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

    .services__cta-link-icon {
        width: 24px;
    }

    /* Steps */

    .step__info-left-spacer {
        display: none;
    }
}

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

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

    /* CTA */

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