/* MOBILE GLOBALS */
@media only screen and (max-width: 768px),
only screen and (orientation: portrait) {

    /* Business */
    .business {
        .business-card {
            display: flex;
            flex-direction: column-reverse;
            justify-content: center;
            align-items: center;
            width: 100%;
        }

        .business-content {
            border-top: 0;
        }

        .business-image {
            position: relative;
            top: unset;
            left: unset;
        }
    }
}

/* MOBILE - Landscape */
@media only screen and (max-width: 768px) and (orientation: landscape) {

    /* Cards Flip */
    .cardsFlip {
        gap: 2vw;

        .card-inner .back p {
            font-size: 1.2vw;
        }
    }

    /* Business */
    .business {
        .business-content {
            height: 50vw;
            max-height: 50vw;
            border-right: .1vw solid var(--blue-2);

            >p {
                font-size: 1.4vw;
                line-height: 2vw;
            }
        }

        .business-item h3,
        .business-item p {
            font-size: 1.4vw;
            line-height: 2vw;
        }
    }
}

/* MOBILE - Portrait */
@media only screen and (orientation: portrait) {

    /* Titles and Texts */
    h1,
    .destaque {
        font-size: 8vw;
        line-height: 9vw;
    }

    h2 {
        font-size: 3.5vw;
    }

    h3,
    a {
        font-size: 3.5vw;
        line-height: 5.5vw;
    }

    p {
        font-size: 3.5vw;
        line-height: 5.5vw;
    }

    label,
    .required,
    span.file-label {
        font-size: 3vw;
        line-height: 4vw;
    }

    button:not(.buttonMenu) {
        font-size: 3vw;
        line-height: 0;
        padding: 5.5vw 7vw;
        border-radius: 1.8vw;

        span.icon {
            display: none;
        }
    }

    .policies-grid {
        flex-direction: column;
        align-items: center;
        gap: 19vw 3vw;
        width: 70vw;

        .policy-card {
            width: 100%;

            .icon {
                width: 15vw;
                height: 15vw;
                margin-top: -14vw;
            }

            h3::before {
                width: 7.2vw;
                height: 0.44vw;
                margin: 4vw auto 6vw auto;
            }

            strong {
                font-size: 6vw;
            }

            p {
                width: 90%;
                font-size: 3.5vw;
                line-height: 5.5vw;
                padding: 1vw 0 6vw 0;
            }
        }
    }

    /* Header */
    header {
        justify-content: flex-end;

        &:not(#inicio) .containerTexts {
            left: 50%;
            transform: translate(-50%, -50%);
        }

        &#inicio p {
            width: 100%;
        }

        .marca {
            top: 3%;
            left: 4%;
            width: 17vw;
        }

        .containerTexts {
            gap: 4vw;
            top: 47%;
            width: 75vw;
            height: 30%;

            h1 {
                font-size: 6.4vw;
                line-height: 13vw;

                span {
                    font-size: 6vw;
                }
            }
        }
    }

    /* SECTIONS */
    section {
        flex-direction: column;
        gap: 7vw;
        padding: 15vw 0;
    }

    .simpleStyle {
        img {
            width: 75vw;
            height: 57vw;
        }
    }

    .simpleStyle .containerTexts,
    #quem-somos .containerTexts {
        gap: 4vw;
        width: 70vw;
    }

    #pilares .purpose-item div,
    #servicos p {
        width: 100%;
    }

    #pilares {
        .purpose-item:nth-child(2) img {
            width: 6vw;
        }
    }

    .highlightBlock {
        flex-direction: column-reverse;

        .purpose-left,
        .purpose-right {
            width: 100%;
        }

        .purpose-left {
            padding: 15vw 12vw;
        }

        .purpose-highlight {
            width: 63vw;
            margin: 7vw auto;
        }

        .purpose-item {
            flex-direction: column;

            &:not(:last-child) {
                padding-bottom: 5vw;
            }

            img {
                width: 8vw;
                height: 8vw;
            }

            div {
                width: 100%;
            }
        }
    }

    .carousel {
        .slide {
            padding: 0 10vw;

            p,
            p.quotes,
            &#slide1 p {
                width: 100%;
            }

            p.quotes {
                margin: 4vw 0 0 6vw;

                &::before,
                &::after {
                    font-size: 9vw;
                }

                &::before {
                    margin-left: -5.5vw;
                }

                &::after {
                    bottom: -6vw;
                    margin-left: 1.9vw;
                }
            }
        }

        .seta {
            bottom: 8vw;
            width: 8vw;
            height: 8vw;
            padding: 0;
        }
    }

    .cardsFlip {
        gap: 7vw;
        padding: 12vw 7vw;

        .card-inner {
            width: 60vw;
            height: 75vw;

            .front,
            .back {
                gap: 5vw;
            }

            .front {
                .buttonFlip {
                    width: 5.5vw;
                }

                p {
                    font-size: 4.5vw;
                    line-height: 6.5vw;
                }
            }

            .back {
                padding: 0 5vw;

                .icon {
                    width: 11vw;
                    height: 11vw;
                }

                p {
                    font-size: 3.1vw;
                    line-height: 4.6vw;
                }
            }
        }
    }

    .performance {
        flex-direction: column;
        padding: 15vw 10vw;

        .performance-intro {
            width: 85%;

            h1 {
                font-size: 8vw;
                line-height: 9vw;
            }
        }

        .performance-data {
            display: flex;
            flex-direction: column;
            grid-template-columns: none;
            align-items: center;
            justify-content: center;
            gap: 6vw;
            width: 100%;

            .data-item {
                >strong {
                    font-size: 6vw;
                }

                p {
                    width: 90%;
                    text-align: center;
                    font-size: 3.5vw;
                    line-height: 5.5vw;
                }

                .icon {
                    width: 15vw;
                    height: 15vw;
                    margin-bottom: 3vw;
                }

                .timeline {
                    display: none;
                }
            }
        }
    }

    .business {
        padding: 15vw 0;
        gap: 10vw;

        .business-card {
            width: 75vw;
        }

        .business-content {
            gap: 3vw;
            left: unset;
            width: 100%;
            height: auto;
            visibility: visible;
            max-height: fit-content;
            padding: 6vw 3.5vw;
            border: .2vw solid var(--blue-2);
            border-right: .2vw solid var(--blue-2);
            border-top: 0;

            >p {
                font-size: 3.5vw;
                line-height: 5.5vw;
            }

            h2 {
                font-size: 5.5vw;
            }
        }

        .business-item p {
            font-size: 3.5vw;
            line-height: 5.5vw;
        }

        .business-image {
            width: 100%;
        }
    }

    #experiencia-2 {
        padding: 17vw 7vw 2vw 7vw;

        .policy-card {
            min-height: 45vw;
        }
    }

    .cta-facilities {
        gap: 6vw;
        padding: 9vw 5vw;

        .containerTexts {
            gap: 2.8vw;
            width: 95%;
            margin: 0 0 2vw 0;

            h2,
            p {
                font-size: 3.5vw;
            }
        }

        button {
            width: 55vw;
            padding: 5.5vw 7vw;
        }
    }

    .contact {

        /* SECTION - Formulário */
        .contact-form {
            grid-template-columns: 1fr;
            column-gap: normal;
            row-gap: 7vw;
            width: 90%;

            .form-group {
                gap: 2vw;
            }

            .form-group input:not(#curriculo):not([type="radio"]),
            .form-group textarea,
            select {
                height: 11vw;
                font-size: 3vw;
                padding: .8vw 3vw;
                border-radius: 2vw;
            }

            .select-wrapper::after {
                width: 2vw;
                height: 2vw;
            }

            #form-message {
                font-size: 3vw;
            }

            .form-group textarea {
                height: 30vw;
            }

            .birth {
                grid-template-columns: 1fr;
                align-items: self-start;
                gap: 4vw;
                width: 100%;
                height: auto;
            }

            .options {
                gap: 15vw;

                span {
                    font-size: 3.2vw;
                }

                input[type="radio"] {
                    width: 5vw;
                    height: 5vw;
                }

                .radio {
                    gap: 2vw;
                }
            }

            .file-input {
                height: 15vw;
                padding: 0 2vw;
            }

            .file-icon {
                width: 5.5vw;
                height: 5.5vw;
            }

            .file-label {
                padding-left: 2vw;
            }
        }

        .contact-form .button-submit {
            width: auto;
            font-size: 3.2vw;
            padding: 5vw 10vw;
        }
    }

    #contact-1 {
        height: 65vw;

        .office {
            object-position: left center;
        }

        .box {
            right: unset;
            bottom: unset;
            top: 50%;
            left: 50%;
            width: 75vw;
            padding: 5vw 4vw;
            border-radius: 3vw;
            transform: translate(-50%, -50%);

            h2 {
                font-size: 4.5vw;
            }

            .description {
                padding: 2vw 0;
                font-size: 3vw;
                line-height: 3.5vw;
            }

            .item {
                gap: 3vw;
                min-height: 9vw;

                p,
                a {
                    font-size: 2.5vw;
                }

                .icon {
                    width: 5vw;
                    height: 5vw;
                }
            }

            .phone a {
                font-size: 2.5vw;
            }
        }
    }

    footer {
        padding: 12vw 5vw;

        .footer-content {
            grid-template-columns: 1fr;
            justify-items: center;
            gap: 5vw;

            >* {
                width: 75vw;
            }
        }

        .footer-social,
        .footer-social p {
            align-items: center;
            text-align: center;
        }

        h3 {
            text-align: center;
            margin-bottom: 4.2vw;
        }

        .footer-contact ul,
        ul {
            gap: 4vw;
        }

        .footer-brand {
            img {
                max-width: 24vw;
            }

            p {
                margin-top: 6vw;
            }
        }

        .footer-nav,
        .footer-contact,
        .footer-brand {

            li,
            a,
            p,
            span {
                display: flex;
                justify-content: center;
                font-size: 3vw;
                text-align: center;
            }
        }

        .footer-contact {
            li {
                gap: 3vw;
            }

            svg {
                flex-basis: 4vw;
                width: 4vw;
                height: 4vw;
            }
        }

        .footer-social {
            gap: 5vw;

            nav {
                flex-direction: column;
                gap: 5vw;
            }

            nav a {
                width: 8vw;
                height: 8vw;
            }

            p,
            span {
                font-size: 3vw;
            }
        }
    }
}