/*
Theme Name: Starter Theme
Author: Daniela Ponciano e Natalia Pedroso
Author URI: http://www.danielaponciano.com
Description: Tema feito para você
Version: 1.0
Tags: Responsive, Flexbox

*/
:root {
    /* Fonts */
    --ff-title: "Bungee", sans-serif;
    --ff-main: "Titillium Web", sans-serif;
    /* Defaults */
    --base-boxshadow: 0px 3px 30px rgba(0, 0, 0, 0.06);
    --base-transition: 0.3s ease-in-out;
    --base-border-radius: 3rem;
    /* Colours */
    --basecolor-black: #262626;
    --basecolor-light-gray: #C6C6C6;
    --basecolor-light-gray-text: #4B4B4B;
    --basecolor-white: #FDFDFD;
    --basecolor-orange: #E84F33;
    /* Gradients */
    --basegradient: linear-gradient(90deg,#2aa3e6 0%, #67e0c6 25%, #7f67c8 50%, #8f77bd 75%, #ffed6b 100%);
}

html {
    background-color: var(--basecolor-white);
}

body {
    font-family: var(--ff-main);
    font-size: 16px;
    line-height: 1.5;
    color: var(--basecolor-black);
    background-color: var(--basecolor-white);
    height: 100%;
}

a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: var(--base-transition);
}

a:hover, a:focus {
    color: inherit;
    opacity: 0.5;
    text-decoration: none;
}

a:focus {
    outline: 0;
}

img {
    vertical-align: middle;
    max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ff-title);
}

/* =========================================== Menu  =============== */
.brandMenu {
    width: 50px;
    display: block;
    padding: 1.5rem 2rem;
}

.brandMenu:hover {
    opacity: 1;
}

.botaoLaranjaMenu a {
    background-color: var(--basecolor-orange);
    color: #fff !important;
    border-radius: 5px;
    padding: .75rem 1.7rem !important;
}

.botaoLaranjaMenu a:hover {
    opacity: 1;
    background-color: #C64730;
}

/* =========================================== Index  =============== */
.botaoLaranja {
    text-align: center;
    padding: 1rem;
}

.botaoLaranja a {
    background-color: var(--basecolor-orange);
    color: #fff !important;
    border-radius: 5px;
    padding: .75rem 1.7rem !important;
    display: inline-block;
}

.botaoLaranja a:hover {
    opacity: 1;
    background-color: #C64730;
}

@media(max-width: 991px) {
}

/* =========================================== Hero =============== */
#hero{
    padding:6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(./images/bgHero.png);
    background-size: cover;
    padding-top: 17rem;
}
.innerHero{
   max-width: 1000px;
   text-align: center;
}
.innerHero h2{
    font-size: 2.75rem;
    margin-bottom: 1rem;
    min-height: 9rem;
}
.innerHero h2 span{
    color: var(--basecolor-orange) !important;
}
.innerHero p{
    font-size:1.2rem;
    margin-bottom: 2rem;
}
@media(max-width:767px){
    #hero{
        padding: 15rem 2rem 0rem 2rem;
        min-height: auto;
        display: flex;
        align-items: flex-start;
    }
    .innerHero h2{
        font-size: 2rem;
        min-height: 245px;
    }
    .innerHero p{
        font-size:1rem;
        margin-bottom: 2rem;
    }
}
/* =========================================== Quem Somos =============== */

#quemsomos {
    padding: 6rem;
    text-align: center;
}

.innerQuemSomos {
    max-width: 600px;
    font-size: 1.3rem;
    margin: 0 auto;
    text-rendering: geometricPrecision;
}
.innerQuemSomos:before,
.innerQuemSomos:after {
    content: '';
    display: inline-block;
    background-color: var(--basecolor-orange);
    border-radius: 5rem;
    height: 1.5rem;
    width: 1.5rem;
    margin: 5rem;
}

.innerQuemSomos p {
    margin-bottom: 1.5rem;
}
@media(max-width: 767px) {
    #quemsomos {
        padding: 3rem 2rem;
    }
}

/* =========================================== Como Fazemos =============== */
#oquefazemos {
    margin: 6rem;
    box-sizing: border-box;
    padding: 3rem;
    background: #fff;
    box-shadow:var(--base-boxshadow);
    border-radius:2rem;
}
#oquefazemos h3{
    color:var(--basecolor-orange);
    font-size:2.2rem;
    text-align:center;
    margin-bottom:5rem
}
#oquefazemos .botaoLaranja{
    margin-top:6rem;
}
#listaOque {
    display: flex;
    flex-direction: column;
    gap: 8rem;
}
.blocoOque{
    gap: 4rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position:relative;
}
.blocoOque:nth-child(odd){
    flex-direction:row-reverse;
}
.blocoOque > img{
    width:auto;
    height:auto;
}
.blocoOque > div{
    width:50%;
}
.textoOque h4{
    font-size: 1.75rem;
    margin-bottom:1rem;
    color:var(--basecolor-light-gray-text);
}
.textoOque ul li{
    margin-bottom:1rem;
}
.textoOque ul li:before{
    content: '✓';
    color:var(--basecolor-orange)
}

/* PARALLAX */

.blocoOque .parallax{
    position:relative;
}
.blocoOque .first-row .first{
    width: 50%;
    margin: 0 auto;
    display: block;
}
.blocoOque .first-row .second{
    width: 30%;
    position: absolute;
    top: 43%;
    right: 21%;
}
.blocoOque .second-row .first{
    width: 59%;
    margin: 0 auto;
    display: block;
}
.blocoOque .second-row .second{
    width: 38%;
    position: absolute;
    top: 43%;
    right: 37%;
}
.blocoOque .third-row .first{
    width: 59%;
    margin: 0 auto;
    display: block;
}
.blocoOque .third-row .second{
    width: 70%;
    position: absolute;
    top: 27%;
    right: 13%;
}
.blocoOque .forth-row .first{
    width: 55%;
    margin: 0 auto;
    display: block;
}
.blocoOque .forth-row .second{
    width: 65%;
    position: absolute;
    top: 30%;
    right: 11%;
}

@media(max-width: 767px) {
    #oquefazemos {
        margin: 2rem;
        padding:2rem;
    }
    .blocoOque > img{
        max-width:60%;
    }
    #listaOque{
        gap:3rem;
    }
    .textoOque h4{
        text-align:center;
    }
    .blocoOque,
    .blocoOque:nth-child(odd){
        flex-direction:column;
        gap:2rem;
    }
    .blocoOque > div{
        width:100%;
    }
}
/* =========================================== Processos =============== */
#processo {
    display: flex;
    flex-direction: row;
    padding: 6rem;
    gap: 6rem;
    align-items: center;
}

#processo > div {
    width: 50%;
    position: relative;
}

#processo .blocoInfos {
    text-align: left;
}

#processo .botaoLaranja {
    text-align: left;
    padding-left: 0;
}

.imagemProcesso {
    height: auto;
}

.imagemProcessoInner {
    display: block;
    height: 100%;
    background-size: cover;
    background-position: center;
    min-height: 420px;
    border-radius: var(--base-border-radius);
    box-shadow: var(--base-boxshadow);
    transform: rotate(2deg);
    position: relative;
    z-index: 7;
}

.imagemProcessoInnerBG {
    content: '';
    display: flex;
    min-height: 100%;
    width: 100%;
    transform: rotate(-3deg);
    background-color: var(--basecolor-orange);
    position: absolute;
    top: 0;
    border-radius: var(--base-border-radius);
    box-shadow: var(--base-boxshadow);
}

@media(max-width: 767px) {
    #processo {
        flex-direction: column;
        gap: 4rem;
        padding: 3rem 2rem;
        text-align: center;
    }

    #processo > div {
        width: 100%;
    }

    .imagemProcessoInner {
        min-height: 230px;
    }

    #processo .blocoInfos, #processo .botaoLaranja {
        text-align: center;
    }

    #processo .botaoLaranja {
        padding: 0;
        padding-top: 1rem;
    }
}

/* =========================================== Clientes =============== */
#clientes {
    overflow: hidden;
    position: relative;
    padding:6rem 1rem;
}

#clientes h3{
    font-size:2.2rem;
    text-align:center;
}
#listaClientes {
    position: relative;
    padding: 4rem;
}
.marcaBloco {
    display:flex;
    justify-content: center;
    padding: 1rem;
}
.marcaBloco a:hover{
    opacity:1;
    background;
}

.marcaBloco img {
    max-height: 120px;
    max-width: 130px;
}

#listaClientes .swiper-wrapper {
}
#listaClientes .swiper-slide {
  height: auto;
  background: white;
  border-radius: var(--base-border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--base-boxshadow);
}
.swiper-button-prev, .swiper-button-next{
    color:var(--basecolor-black);
    transform:scale(.5);
}
@media(max-width: 767px) {
    #clientes {
        padding: 5rem 0rem;
    }
    .marcaBloco img {
        max-height: 160px;
        max-width: 200px;
    }
}
/* =========================================== Suporte e Valores  =============== */
#suporteValores {
    display: flex;
    flex-direction: row;
    background-image: url(./images/bgSuporteValores.svg);
    padding: 6rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left bottom;
    gap: 6rem;
}

#suporteValores > div {
    width: 50%;
}

.blocoInfos {
    text-align: center;
}

.blocoInfos h3 {
    font-size: 2.2rem;
    margin-bottom: 1rem;
}

.blocoInfos p {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    line-height: 1.75;
    text-rendering: geometricPrecision;
}

@media(max-width: 767px) {
    #suporteValores {
        flex-direction: column;
        gap: 6rem;
        padding: 3rem 2rem;
    }

    #suporteValores > div {
        width: 100%;
    }
}

/* =========================================== Contato  =============== */
#cadastrese {
    background-color: var(--basecolor-orange);
    padding: 6rem;
    background-image: url(./images/bgContato.png);
}

.areaForm {
    max-width: 800px;
    margin: 0 auto;
}

.frm_fields_container {
    max-width: 500px;
    margin: 4rem auto 0 auto;
}

.frm_form_title, .frm_description p {
    text-align: center !important;
}

.with_frm_style .frm_primary_label {
    font-weight: bolder !important;
    text-rendering: geometricprecision;
}

.with_frm_style input[type=text], .with_frm_style input[type=password], .with_frm_style input[type=email], .with_frm_style input[type=number], .with_frm_style input[type=url], .with_frm_style input[type=tel], .with_frm_style input[type=file], .with_frm_style input[type=search], .with_frm_style select, .with_frm_style .frm-card-element.StripeElement, button.frm_button_submit.frm_final_submit {
    transition: var(--base-transition);
    box-shadow: var(--base-boxshadow) !important;
    font-family:var(--ff-title);
    font-weight:lighter;
    text-rendering:geometricprecision;
}

p.disclaimerForm {
    color: #fff;
    font-size: .8rem;
    margin-top: 1rem;
}

p.disclaimerForm a {
    font-weight: bold;
    text-rendering: geometricprecision;
    text-decoration: underline;
}

@media(max-width: 767px) {
    #cadastrese {
        padding: 2rem;
    }

    h3.frm_form_title {
        font-size: 2.2rem !important;
    }

    .frm_fields_container {
        margin: 2rem auto;
    }
}

/* =========================================== Footer  =============== */
.footer {
    background-color: var(--basecolor-black);
    color: var(--basecolor-white);
    padding: 3rem;
    padding-bottom: 1rem;
}

.footerContent {
    display: flex;
    justify-content: space-between;
}

.brandfooter {
    width: 70px;
    display: block;
}

.copyright {
    text-align: center;
}

.copyright p {
    margin: 0;
    font-size: .8rem;
    opacity: .5;
    text-rendering: geometricPrecision;
}

.listaEnd {
}

.listaEnd li {
    margin-bottom: 1.5rem;
    text-rendering: geometricprecision;
    line-height: 1.75;
    max-width: 350px;
}

.listaEnd li, .listaEnd li a {
    display: flex;
    gap: 1rem;
}

.listaEnd i {
    font-size: 1.2rem;
}

.redesSociais {
    display: flex;
    gap: 1rem;
}

.redesSociais li a {
    font-size: 1.4rem;
}

.listaEnd a:hover, .redesSociais a:hover {
    color: var(--basecolor-orange);
    opacity: 1;
}

@media(max-width: 767px) {
    .footer {
        padding:2rem;
    }

    .footerContent {
        flex-direction: column;
        align-items: center;
    }

    .brandfooter {
        margin-bottom: 3rem;
    }

    .localizacaoFooter ul {
        align-content: center;
        justify-content: center;
    }

    .redesSociais {
        margin-bottom: 2rem;
    }
}

/* =========================================== Page =============== */
.pageTemplate {
    padding: 2rem;
}

.pageTemplate h2 {
    font-size: 3rem;
    margin-bottom: 1em;
    text-align: center;
}

.pageTemplate article {
    max-width: 900px;
    margin: 0 auto;
    display: block;
}
strong{
    font-weight:bolder;
    text-rendering:geometricprecision;
}
article p {
    margin-bottom: 1rem;
}

article {
    font-size: 1.1rem;
    display: inline-block;
    line-height: 1.75
}

article ul, article ol {
    padding-left: 2em;
    margin-bottom: 1rem;
}

article ul {
    list-style: square;
}

article ol {
    list-style: decimal;
}

article blockquote {
    background: #f7f7f7;
    padding: 1em;
}

article blockquote p:last-child {
    margin-bottom: 0
}

article a {
    color: var(--basecolor-orange);
}

article p {
    width: 100%;
    /* display: inline-block; */
}

article p > img.aligncenter {
    display: flex;
}

article .alignleft {
    float: left;
}

article .alignright {
    float: right;
}

article .aligncenter {
    margin: 0 auto;
}

article .wp-caption {
    padding: 1em;
}

article h1 {
    font-size: 2em;
    /* 32px if the base font size is 16px */
    margin: 0.67em 0;
}

article h2 {
    font-size: 1.5em;
    /* 24px if the base font size is 16px */
    margin: 0.83em 0;
}

article h3 {
    font-size: 1.17em;
    /* 18.72px if the base font size is 16px */
    margin: 1em 0;
}

article h4 {
    font-size: 1em;
    /* 16px if the base font size is 16px */
    margin: 1.33em 0;
}

article h5 {
    font-size: 0.83em;
    /* 13.28px if the base font size is 16px */
    margin: 1.67em 0;
}

article h6 {
    font-size: 0.67em;
    /* 10.72px if the base font size is 16px */
    margin: 2.33em 0;
}

.wp-caption-text {
    margin: 0;
    padding-top: 5px;
    font-size: .7em;
    font-style: italic;
    text-align: center;
}

/* =========================================== Animacoes =============== */
[data-scroll] {
    transition-property: all;
    transition-duration: 0.7s;
    transition-timing-function: ease-in-out;
}

[data-scroll][data-scroll="in"] {
    transform: translateX(0);
    opacity: 1;
}

[data-scroll][data-scroll="out"] {
    opacity: 0;
}

[data-scroll][data-scroll="out"][data-scroll-translate-3] {
    transform: translateY(3rem);
}

[data-scroll][data-scroll="out"][data-scroll-translate-4] {
    transform: translateY(4rem);
}

[data-scroll][data-scroll="out"][data-scroll-translate-5] {
    transform: translateY(5rem);
}

[data-scroll][data-scroll="out"][data-scroll-translate-6] {
    transform: translateY(6rem);
}

@media(max-width: 991px) {
    [data-scroll][data-scroll="out"][data-scroll-slide-right] {
        transform: translateY(5rem);
    }

    [data-scroll][data-scroll="out"][data-scroll-slide-left] {
        transform: translateY(5rem);
    }
}

@media(min-width: 992px) {
    [data-scroll][data-scroll="out"][data-scroll-slide-right] {
        transform: translateX(10rem);
    }

    [data-scroll][data-scroll="out"][data-scroll-slide-left] {
        transform: translateX(-10rem);
    }
}

.splitting {
    --word-center: calc((var(--word-total) - 1) / 2);
    --char-center: calc((var(--char-total) - 1) / 2);
    --line-center: calc((var(--line-total) - 1) / 2);
}

.splitting .word {
    --word-percent: calc(var(--word-index) / var(--word-total));
    --line-percent: calc(var(--line-index) / var(--line-total));
}

.splitting .char {
    position: relative;
    transition: transform .7s cubic-bezier(.2, 0, .2, 1), opacity .3s ease-in-out;
    transition-delay: calc( 10ms * var(--char-index) );
    --char-percent: calc(var(--char-index) / var(--char-total));
    --char-offset: calc(var(--char-index) - var(--char-center));
    --distance: calc( (var(--char-offset) * var(--char-offset)) / var(--char-center) );
    --distance-sine: calc(var(--char-offset) / var(--char-center));
    --distance-percent: calc((var(--distance) / var(--char-center)));
}

.splitting .char::before, .splitting .char::after {
    content: attr(data-char);
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    transition: inherit;
    user-select: none;
}

.splitting .word, .splitting .char {
    display: inline-block;
}

.splitting[data-scroll="out"] .char {
    opacity: 0;
    transform: translateY( .4em );
}

.whatsapp-link{
    position: fixed;
    width: 30px;
    height: 30px;
    bottom: 15px;
    right: 15px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    z-index: 100;
    padding: 10px;
}

.whatsapp-link svg{
    width:100%;
    height:100%;
    object-fit:contain;
}