/* Fold */

.fold {
    width: 100%;

    background-image: url("../../assets/media/pages/contact-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__contact-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.fold__contact-wrapper > span,
.fold__contact-wrapper > .c-link {
    width: max-content;

    color: var(--color-04);

    font-family: ThicccBoiMedium, NotoSans, Helvetica, Arial, sans-serif;

    line-height: 1;
    
    text-transform: uppercase;
}

.fold__cutout {
    width: 60%;
}

/* Appointment */

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

    position: relative;
}

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

.appointment__form {
    width: 100%;

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

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

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

.appointment__form > .c-fields-wrapper {
    width: 100%;

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

.appointment__form > .c-fields-wrapper > .c-field-wrapper {
    width: calc(50% - (var(--space-xxl) / 2));
}

.appointment__form > .c-fields-wrapper > .c-field-wrapper > .c-field {
    width: 100%;
}

.appointment__form > .c-field-wrapper {
    width: 100%;
}

.appointment__form > .c-field-wrapper > .c-field {
    width: 100%;
}

.appointment__btn-label {
    justify-content: center;

    transform-origin: bottom left;
    -webkit-transform-origin: bottom left;
}

.appointment__success {
    width: 100%;

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

    display: flex;

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

/* Operating area */

.operating-area {
    padding: var(--space-xxxl) var(--space-xxxl) var(--space-xxxl) 0;

    position: relative;
}

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

.operating-area__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;
}

.operating-area__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;
}

.operating-area__cutout {
    height: 270px;
}

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

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

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

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

    .fold__body {
        width: 100%;
    }

    /* Operating area */

    .operating-area {
        padding: var(--space-xxxl);
    }

    .operating-area__body {
        flex-direction: column-reverse;
    }

    .operating-area__left,
    .operating-area__right {
        width: 100%;
    }
}

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

    .appointment__form > .c-fields-wrapper {
        flex-direction: column;
    }

    .appointment__form > .c-fields-wrapper > .c-field-wrapper {
        width: 100%;
    }
}

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

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

    /* Appointment */

    .appointment__form {
        padding: var(--space-xxl);
    }
}