/* Theme Name: Rios Truck Author: Formidável Comunicação - Raphael Mafforte */
 * {
     scroll-behavior: smooth;
    /* scroll-snap-type: y mandatory;
    */
}

 main {
     background: #fff;
}
 body {
     font-family: 'Roboto', sans-serif !important;
     overflow-x: hidden;
     font-weight: 300;
}
 a {
     font-family: 'Roboto', sans-serif !important;
     text-decoration: none;
}
 strong {
     font-weight: 700 !important;
}
 header {
}
 p {
}
 img {
     width: 100%;
}
 a {
     text-decoration: none;
}

/********* UTILITIES *********/
 .container {
     width: 80vw;
     margin: 0 auto;
}
 .button-primary a {
     display: flex;
     gap: 1rem;
     align-items: center;
     justify-content: center;
     font-size: 1.2rem;
     text-align: center;
     padding: 1rem;
     border-radius: 1rem;
     color: #F39200;
     font-weight: bold;
     background: #fff;
     -webkit-box-shadow: -1px 1px 11px -1px rgba(0,0,0,0.5);
     -moz-box-shadow: -1px 1px 11px -1px rgba(0,0,0,0.5);
     box-shadow: -1px 1px 11px -1px rgba(0,0,0,0.5);
     max-width: 400px;
     width: 100%;
     margin: 0 auto;
     transition: all .2s;
}
 .primary-button a img {
     width: 1.5rem;
     transition: all .2s;
}
 .button-primary a:hover {
     transform: scale(1.05);
}
 .title-primary h3 {
     font-size: 2rem;
     text-align: center;
     color: #616160;
     font-weight: 300;
     margin-bottom: 2rem;
}
 .title-primary strong {
     font-weight: bold;
     color: #F39200;
}
 .text-primary p {
     font-size: 1.1rem;
     line-height: 1.4rem;
     font-weight: 300;
}


/********* HEADER *********/
 .header {
     padding: 1rem 0;
}
 .header_content {
     display: flex;
     flex-direction: column;
     gap: 2rem;
     width: 80vw;
     margin: 0 auto;
}
 .pre-header {
    /*display: flex;
     justify-content: space-between;
     align-items: center;
    */
     display: grid;
     grid-template-columns: 1.2fr 1fr 1fr;
     align-items: center;
}
 .logo {
     width: 150px;
}
 .pre-header__item .button a {
     display: inline-block;
     background: #F39200;
     border-radius: 2rem;
     color: #fff;
     font-weight: bold;
     font-size: 1.3rem;
     padding: 1rem 2rem;
     white-space: nowrap;
     transition: all .2s;
}
 .pre-header__item .button a:hover {
     transform: scale(1.05);
}
 .pre-header__item span {
     font-size: 1.6rem;
     font-weight: 300;
     margin-bottom: 0.5rem;
     display: block;
     color: #F39200;
     text-align: center;
}
 .pre-header__item p {
     font-weight: bold;
     font-size: 2.2rem;
     text-align: center;
}
 .pre-header__app {
     display: flex;
     gap: 1rem;
     align-items: center;
}
 .pre-header__app img {
     width: 100px;
}
 .menu ul {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 4rem;
     margin: 2rem 0;
     background: #F39200;
     padding: 1rem 2rem;
     border-radius: 3rem;
}
 .menu li {
     text-align: center;
}
 .menu a {
     color: #fff;
     font-size: 1.3rem;
     transition: all .4s;
}
 .menu a:hover {
     color: #616160;
}
 .menu-mobile {
     display: none;
}


/********* BANNER *********/
 .banner {
     width: 100vw;
     padding: 0 0 2rem 0;
}
 .banner__grid {
     display: grid;
     grid-template-columns: 0.8fr 1.2fr;
     align-items: center;
     gap: 4rem;
}
 .banner__text h2 {
     font-size: 2.3rem;
     color: #F39200;
     margin-bottom: 2rem;
}
 .banner__text h3 {
     font-size: 2.3rem;
     color: #616160;
}
 .banner__img img {
}
 .banner__item .primary-button {
     max-width: 400px;
     width: 100%;
}
 .banner__contato {
     display: flex;
     flex-direction: column;
     gap: 1rem;
     margin-right: 10vw;
}
 .banner__contato img {
     width: 120px;
}
/********* BAIXAR APP *********/
 .baixar-app {
     padding: 1rem;
     background: #F39200;
     width: 100vw;
}
 .baixar-app__grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 4rem;
     align-items: center;
     justify-items: space-between;
}
 .baixar-app__item {
     color: #fff;
     font-size: 2rem;
     font-weight: 300;
}
 .baixar-app__item:first-child {
     max-width: 70%;
     font-size: 2.3rem;
}
 .baixar-app__cta {
     display: flex;
     gap: 1rem;
     margin-top: 1rem;
}
 .baixar-app__cta img {
     width: 200px;
}
/********* SOBRE HOME *********/
 .sobre-home {
     padding: 0 0 4rem 0;
}
 .sobre-home__grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 4rem;
     justify-items: center;
     align-items: center;
}
 .sobre-home__text {
     max-width: 70%;
     margin: 0 auto;
}
 .sobre-home__text h3 {
     color: #F39200;
     text-align: center;
}
 .sobre-home__text p {
     margin: 0 auto;
     display: table;
}
 .sobre-home__item img {
     width: 100%;
     object-fit: cover;
     margin-bottom: 1rem;
}
 .sobre-home .button-primary a {
     margin-top: 6rem;
}
/********* TESTIMONIAL HOME *********/
 .testimonial {
     padding: 4rem 0;
     background: #F39200;
}
 .testimonial__wrapper {
     padding: 4rem;
     color: #fff;
     display: table;
     margin: 0 auto;
}
 .testimonial__wrapper h3 {
     font-size: 2rem;
     text-align: center;
     font-weight: 300;
}
 .testimonial__grid {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     gap: 2rem;
     justify-content: center;
     margin: 4rem 0;
}
 .testimonial__item {
     text-align: center;
     font-weight: 300;
     max-width: 300px;
     width: 100%;
     margin: 0 auto;
}
 .testimonial__item img {
     max-width: 200px;
     width: 100%;
     margin-bottom: 1rem;
}
 .testimonial__item h4 {
     font-size: 1.5rem;
}
 .testimonial__item span {
     margin: 1rem 0;
     display: block;
}
 .testimonial .button-primary a {
     max-width: 400px;
     width: 100%;
     margin: 0 auto;
}
/********* CLUBE DE BENEFICIOS *********/
 .clube-beneficios {
     padding: 4rem 0;
}
 .clube-beneficios__grid {
     padding: 4rem;
     display: flex;
     justify-content: space-between;
}
 .clube-beneficios__item {
     max-width: 170px;
     width: 100%;
}
/********* ABOUT HOME *********/
 .about-home {
     padding: 4rem 0;
}
 .about-home__grid {
     display: grid;
     grid-template-columns: 1.2fr 0.8fr;
     justify-items: center;
     align-items: center;
     gap: 4rem;
}
 .about-home__item:last-child {
     width: 70%;
     margin: 0 auto;
}
 .about-home__item .title-primary h3 {
     text-align: left;
     width: 70%;
     margin-bottom: 4rem;
}
 .about-home__item li {
     display: flex;
     align-items: start;
     gap: 1rem;
     width: 50%;
}
 .about-home__item li img {
     width: 30px;
     margin-bottom: 2rem;
}
 .about-home__item img {
}
/********* BLOG DESTAQUES *********/
 .blog-destaques {
     padding: 4rem 0;
}
 .blog-destaques__grid {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     gap: 4rem;
     justify-content: center;
     align-items: center;
     margin-top: 4rem;
}
 .blog-destaques__item img {
     border-radius: 2rem;
}
 .blog-destaques__item p, .blog-destaques__item h3 {
     color: #333;
     font-weight: 300;
     width: 90%;
     margin: 1rem auto;
}
 .blog-destaques .button-primary {
     margin-top: 6rem;
}
/********* SERVICOS HOME *********/
 .servicos-home {
     padding: 4rem 0;
}
 .servicos-home__grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 4rem;
}
 .servicos-home__item:first-child {
     max-width: 50%;
     margin: 0 auto;
}
 .servicos-home__item h3 {
     text-align: left;
     margin-bottom: 4rem;
}
 .servicos-home__item li {
     font-weight: 300;
     margin: 1.5rem 0;
     border-bottom: solid 1px #000;
     padding: 0 0 1.5rem 1rem;
}
 .servicos-home__item li:last-child {
     border-bottom: unset;
}
 .servicos-home .button-primary {
     margin-top: 6rem;
}

/********* BLOG *********/
 .blog-home h2 {
     font-size: 2rem;
     text-align: center;
     font-weight: bold;
     color: #F39200;
     margin-bottom: 4rem;
}
 .blog-home__grid {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     gap: 4rem;
}
 .blog-home__item {
     color: #616160;
}
 .blog-home__item img {
     border-radius: 2rem;
     height: 250px;
     object-fit: cover;
}
 .blog-home__item .title {
     margin: 1rem auto;
     font-weight: bold;
     font-size: 1rem;
     width: 90%;
}
 .blog-home__item p {
     font-size: 0.9rem;
     width: 90%;
     margin: 0 auto;
}
 .the-post__container h4 {
     margin: 4rem 0;
     text-align: center;
     font-size: 1.4rem;
     font-weight: bold;
}
 .the-post__container img {
     max-height: 500px;
     object-fit: cover;
}


/********* FOOTER *********/
 .footer {
     padding: 4rem 0 0 0;
     color: #fff;
}
 .footer__form-wrapper {
     background: linear-gradient(to top, #F39200 50%, #fff 50%);
}
 .footer__form {
     width: 500px;
     margin: 0 auto;
     padding: 4rem;
     background: #fff;
     border-radius: 2rem;
     -webkit-box-shadow: -1px 1px 11px -1px rgba(0,0,0,0.5);
     -moz-box-shadow: -1px 1px 11px -1px rgba(0,0,0,0.5);
     box-shadow: -1px 1px 11px -1px rgba(0,0,0,0.5);
}
 .footer__form strong {
     color: #616160;
     font-size: 1.2rem;
}
 .footer__form .title-primary h3 {
     margin: 2rem 0;
     text-align: left;
     color: #F39200;
}
 .footer__form form {
     display: flex;
     flex-direction: column;
     gap: 1rem;
}
 .footer__form input, .footer__form textarea {
     height: 50px;
     background: #DADADA;
     border-radius: 1rem;
     width: 95%;
     border: unset;
     padding: 1rem;
}
 .footer__form textarea {
     height: 100px;
}
 .footer__form input[type='submit'] {
     background: #F39200;
     color: #fff;
     width: 200px;
     font-size: 1.3rem;
     line-height: 0;
     cursor: pointer;
}
 .wpcf7 form.sent .wpcf7-response-output {
     color: #000;
     text-align: center;
}
 .footer__grid {
     display: flex;
     justify-content: space-between;
     padding-top: 4rem;
}
 .footer__grid a {
     color: #fff !important;
}
 .footer__info p {
     font-weight: 300;
}
 .footer__content {
     padding: 2rem 0 4rem 0;
     background: #F39200;
}
 .social__grid {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     justify-items: start;
     gap: 0.5rem;
     max-width: 200px;
     margin-top: 1rem;
}
 .social__grid img {
     max-height: 40px;
     object-fit: contain;
}
 .copy {
     width: 100vw;
     padding: 2rem 0;
     background: #fff;
     text-align: center;
     font-size: 1rem;
     color: #000;
     font-weight: 300;
}
 .the-post__content p {
     font-size: 1.1rem;
     line-height: 1.5rem;
     margin: 1rem 0;
}

/********* QUERIES *********/
 @media screen and (max-width: 1200px) {
    .menu ul {
        gap: 2rem;
    }
    .menu a,
    .pre-header__item .button a {
        font-size: 1rem;   
    }
}
 @media screen and (max-width: 900px) {
     .menu {
         visibility: hidden;
    }
     .menu ul {
         flex-direction: column;
         position: absolute;
         background: #fff;
         padding: 2rem 1rem;
         left: 0;
         top: 1rem;
         width: 100%;
         z-index: 9999999999 !important;
         gap: 2rem;
         -webkit-box-shadow: 10px 10px 16px -13px rgba(0,0,0,0.75);
         -moz-box-shadow: 10px 10px 16px -13px rgba(0,0,0,0.75);
         box-shadow: 10px 10px 16px -13px rgba(0,0,0,0.75);
    }
     .menu li, .fale-conssultor {
         margin: 0.5rem 0;
         text-align: center;
    }
     .menu a {
         color: #000;
         font-weight: 700;
         font-size: 1rem;
    }
     .toggle {
         visibility: visible;
    }
     .menu-mobile {
         display: block;
         position: absolute;
         top: 1rem;
         left: 50%;
         transform: translateX(-50%);
    }
     .toggle-menu {
         display: block;
         width: 40px;
         height: 30px;
         display: flex;
         flex-direction: column;
         justify-content: space-around;
         padding: 2px 2px 2px 3px;
         border-radius: 5px;
         cursor: pointer;
         z-index: 9999999999;
         -webkit-border-radius: 5px;
         -moz-border-radius: 5px;
         -ms-border-radius: 5px;
         -o-border-radius: 5px;
    }
     [data-aos^="fade"][data-aos^="fade"].aos-animate, [data-aos][data-aos][data-aos-delay="200"].aos-animate, body[data-aos-delay="200"] [data-aos].aos-animate {
         z-index: 99;
    }
     .line {
         width: 100%;
         height: 3px;
         border-radius: 5px;
         background-color: #000;
         transition: transform 0.2s ease-out;
         -webkit-transition: transform 0.2s ease-out;
         -moz-transition: transform 0.2s ease-out;
         -ms-transition: transform 0.2s ease-out;
         -o-transition: transform 0.2s ease-out;
    }
     .toggle-active .line1 {
         transform: scale(0.9) rotateZ(-45deg) translate(-7px, 4px);
    }
     .toggle-active .line2 {
         display: none;
    }
     .toggle-active .line3 {
         transform: scale(0.9) rotateZ(45deg) translate(-7px, -4px);
    }
     .pre-header {
         display: grid;
         grid-template-columns: 1fr 1fr;
         justify-items: center;
         gap: 2rem;
    }
     .banner {
         padding-top: 5rem;
    }
     .banner__grid {
         flex-direction: column;
    }
     .banner__grid img {
         object-fit: contain;
    }
     .banner__contato {
         flex-direction: row;
         justify-content: center;
         margin-top: 3rem;
    }
}

 @media screen and (max-width: 750px) {
     .container {
         width: 90vw;
    }
     .header_content {
         width: 95vw;
    }
     .pre-header {
         grid-template-columns: 1fr;
    }
     .pre-header .button a {
         font-size: 1.3rem;
    }
     .banner__grid, .baixar-app__grid {
         grid-template-columns: 1fr;
    }
     .banner__item:last-child {
         grid-row-start: 1;
    }
     .banner__img img {
         margin: 0 auto;
    }
     .banner__contato {
         margin-right: 0;
    }
     .baixar-app {
         padding: 2rem;
    }
     .baixar-app__cta {
         flex-direction: column;
    }
     .sobre-home__text {
         max-width: 100%;
    }
     .sobre-home__grid, .testimonial__grid, .blog-destaques__grid {
         grid-template-columns: 1fr;
         justify-items: center;
    }
     .sobre-home__item, .testimonial__item {
         max-width: 100%;
    }
     .sobre-home {
         padding: 1rem;
         text-align: center;
    }
     .clube-beneficios__grid, .servicos-home__grid {
         display: grid;
         grid-template-columns: 1fr 1fr;
         justify-items: center;
    }
     .about-home__grid {
         grid-template-columns: 1fr;
         justify-items: center;
         width: 90%;
    }
     .button-primary a, .testimonial .button-primary a {
         font-size: 1rem;
         max-width: 300px;
    }
     .testimonial__wrapper {
         padding: 1rem;
    }
     .about-home__item:last-child, .about-home__item li {
         width: 90%;
    }
     .blog-home__wrapper {
         padding: 4rem 2rem;
    }
     .servicos-home__grid {
         grid-template-columns: 1fr;
    }
     .servicos-home__item:first-child {
         max-width: 90%;
    }
     .servicos-home__item:last-child {
         grid-row-start: 1;
    }
     .footer__form {
         width: 80%;
         padding: 2rem;
    }
     .footer__form input, .footer__form textarea {
         width: 90%;
    }
     .blog-archive {
         padding-top: 5rem;
    }
    .blog-archive .blog-home__grid {
        grid-template-columns: 1fr;
    }
     .joinchat__button {
         right: 40px;
    }
}
 @media screen and (max-width: 500px) {
     .clube-beneficios__grid {
         grid-template-columns: 1fr;
         justify-items: center;
    }
     .footer__grid {
         gap: 2rem;
         flex-direction: column;
         text-align: center;
    }
     .social__grid {
         justify-items: center;
         max-width: 100%;
    }
}