html {overflow-x:hidden;}
body {font-family: 'Campuni', sans-serif; background: #f2f2f2; padding-top: 111px}
ul {padding: 0px;margin:0px;}
@media (max-width: 1700px) {
body {padding-top: 82px}
}
:root {
--preto: #1e1e1e;
--vermelho: #d2111d;
--vermelho-hover:#ff0010;
--laranja: #ff6f00;
--cinza: #f2f2f2;
--grafite: #505050;
}
@media (max-width: 768px) {
.container {padding-left: 30px; padding-right: 30px}
}
.btn-primary {border: 2px solid var(--vermelho); display: flex; transition: 0.5s; align-items: center; gap: 0px 10px; width: fit-content; background: var(--vermelho); font-weight: bold; border-radius: 13px; color: #fff; padding: 10px 20px; font-size: 20px; letter-spacing: -0.5px;}
.btn-primary:hover {background: var(--vermelho-hover); border-color: var(--vermelho-hover);}
.btn-primary svg {width: 20px; height: 20px; fill: #fff;}
.btn-secondary {border: 2px solid var(--grafite); display: flex; align-items: center; gap:0px 10px; width: fit-content; background: transparent; font-weight: bold; border-radius: 8px; color: var(--grafite); padding: 10px 20px; font-size: 17px;}
.btn-secondary:hover {background: var(--grafite); color: #fff}
.btn-secondary svg {width: 20px; height: 20px; fill: var(--grafite);}
.btn-secondary:hover svg {fill: #fff;}
.btn-orange {background: var(--laranja); border-color: var(--laranja);}
.btn-center {margin-left: auto; margin-right: auto;}
.section {padding-top: 100px; padding-bottom: 100px;}
.img-radius {border-radius: 40px}
@media (max-width: 1700px) {
.section {padding-top: 60px; padding-bottom: 60px;}
.btn {font-size: 18px}
}
@media (max-width: 768px) {
.btn {font-size: 16px}
.img-radius {border-radius: 20px}
}
/* HEADER */
.header {padding: 30px 0px; position: fixed; top: 0px; left: 0px; width: 100%; z-index:999999; transition: 0.5s background}
.customize-support .header {top: 32px;}
.header .menu-principal {gap:0px 60px;}
.header .menu-principal li {display: block;}
.header .menu-principal li a {display: block; color: var(--grafite); font-weight: bold; letter-spacing: -0.5px; text-decoration: none; font-size: 1.2em}
.header .menu-principal li a:hover {color: var(--vermelho);}
.header-fixed {background: rgba(255, 255, 255, 0.85); border-bottom: 1px solid #e7e7e7; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);}
.header .logo {display: block;}
.header .menu-open {display: none;}
@media (max-width: 1700px) {
.header {padding: 15px 0px}
.header .menu-principal li a {font-size: 1.1em}
}
@media (max-width: 1400px) {
.header .menu-principal {gap: 0px 40px;}
}
@media (max-width: 768px) {
.header .menu-open {display: block; position: absolute; top: 0px; right: 0px; padding: 23px; cursor: pointer;}
.header .menu-open svg {display: block; width: 30px; height: 30px;}
.header {background: #fff; padding-top: 15px; padding-bottom: 15px;}
.section {padding-top: 60px; padding-bottom: 60px;}
.header .menu-principal {padding-top: 25px; display: none;}
.header .menu-principal li {margin-bottom: 15px;}
.header .menu-principal .btn {width: 100%;}
.header .botao-desktop {display: none;}
}
/* BANNER DA HOME */
.banner {padding-bottom: 100px;}
.banner .banner-animado {position: relative; height: 100%}
.banner .banner-animado .folhas {position: absolute; top: 200px; z-index: 1; left: 0px; display: block;}
.banner .banner-animado .sabores {position: absolute; top: 250px; left: 50px; z-index: 2; display: block;}
.banner .banner-animado .e-banner {position: absolute; top: 274px; left: 419px; z-index: 2; display: block;}
.banner .banner-animado .simbulo {position: absolute; top: 122px; left: 320px; z-index: 2; display: block;}
.banner .banner-animado .solucoes {position: absolute; top: 352px; left: 229px; z-index: 2; display: block;}
.banner .banner-animado .laranjinha {position: absolute; top: 322px; left: 113px; z-index: 3; display: block;}
.banner .banner-animado h1 {position: absolute; width: 362px; font-size: 2.2em; letter-spacing: -0px; text-transform: lowercase; top: 465px; left: 291px; z-index: 3; color: var(--grafite);}
.banner .imagem-principal {display: block; width: 100%}
.banner-mobile {display: none;}
@media (max-width: 1700px) {
.banner .imagem-principal {display: block; width: 80%; margin: auto;}
.banner .banner-animado .folhas {top: 100px;}
.banner .banner-animado .sabores {top: 150px;}
.banner .banner-animado .e-banner {top: 174px;}
.banner .banner-animado .simbulo {top: 22px;}
.banner .banner-animado .solucoes {top: 252px;}
.banner .banner-animado .laranjinha {top: 222px;}
.banner .banner-animado h1 {top: 365px;}
}
@media (max-width: 768px) {
.banner {display: none;}
.banner-mobile {display: block;}
}
/* TEXTO E IMAGEM COM FUNDO BRANCO E BORDA */
.about_card {background: #FFF; border-radius: 40px; overflow:hidden;}
.about_card h2 {color: var(--laranja); margin-bottom: 30px; font-weight: bold; font-size: 2.5em; letter-spacing: -1px; line-height: 1.1}
.about_card h3 {color:#767676; font-weight: bold; font-size: 1.7em; letter-spacing: -1px; margin-bottom: 15px;}
.about_card p {color: #767676; font-size: 1.4em; line-height: 1.4; margin-bottom: 30px; letter-spacing: -0.5px;}
.about-img img {display: block; width: 100%; border-radius: 0px 15px 15px 15px;}
@media (max-width: 1700px) {
.about_card h2 {font-size: 2em}
.about_card h3 {font-size: 1.4em}
.about_card p {font-size: 1.2em}
.home-about-card img {margin-bottom: -150px}
}
@media (max-width: 768px) {
.about_card {border-radius: 0px; background: transparent;}
.about_card img {display: block; border-radius: 10px; margin-top: 30px; margin-bottom: 0px}
.about_card h2 {font-size: 2em}
.about_card h3 {font-size: 1.2em}
.about-img img {margin-bottom: 30px}
}
.services_list h2 {color: var(--vermelho); font-weight: bold; letter-spacing: -4px; line-height: 1; font-size: 6.5em}
.services_list h2 span { font-size: 0.6em}
.services_list .list {background: var(--vermelho); border-radius: 0px 40px 40px 40px; color: #fff; padding: 40px; position: relative;}
.services_list .list:after {content: ''; position: absolute; top: 0px; left: -27px; background: url(../img/curva-box.png) no-repeat; width: 227px; height: 134px; z-index: -1;}
.services_list .list li {display: block; font-size: 1.1em; margin-bottom: 10px; background: url('../img/icons8-selecionado-48.png') no-repeat left center; background-size: 19px; padding-left: 27px;}
.services_list .desclaimer {display: block; text-align: center; margin-top: 10px; color: var(--grafite);}
@media (max-width: 1700px) {
.services_list h2 {font-size: 5em}
}
@media (max-width: 768px) {
.services_list h2 {font-size: 2.5em; letter-spacing: 0px; margin-bottom: 30px}
.services_list .list ul {width: 100% !important}
.services_list .list li {font-size: 1em}
}
.portfolio {background: linear-gradient(180deg,rgba(242, 242, 242, 1) 50%, rgba(255, 255, 255, 1) 49%); padding-bottom: 30px;}
.portfolio-app {background: #fff; padding: 40px; border-radius: 40px; box-shadow: 10px 10px 15px 3px #00000014;}
.portfolio-app img {max-width: 100%}
.portfolio h2 {text-align: center; font-weight: bold; color: var(--grafite); letter-spacing: -2px; font-size: 3.5em; margin-bottom: 50px}
@media (max-width: 1700px) {
.portfolio-app {padding:40px 100px;}
.portfolio h2 {font-size: 2.5em}
}
@media (max-width: 768px) {
.portfolio h2 {font-size: 1.5em; letter-spacing: 0px; text-align: left; margin-bottom: 15px}
.portfolio-app {padding: 20px; border-radius: 20px}
}
.industry {background: #fff;}
.industry h2 {text-align: center; color: var(--grafite); font-size: 3.5em; font-weight: bold;}
.industry p {text-align: center; line-height: 1.2; color: var(--grafite); font-size: 2em; letter-spacing: -0.3px; margin: auto; margin-bottom: 20px; max-width: 1200px;}
.industry-app img {border-radius: 10px; display: block; transition: 0.5s;transform: scale(0.9);}
.industry-app .item {padding-top: 30px; padding-bottom: 30px;}
.industry-app .slick-current img {transform: scale(1.1);}
.industry-app {position: relative;}
.industry-app .slick-arrow {position: absolute;z-index: 10; top: calc(50% - 25px); background: url('../img/arrow-slick-red.png') no-repeat center; background-repeat: no-repeat; width: 60px; height: 60px; border:none; font-size: 0px; cursor: pointer;}
.industry-app .slick-prev {left: 100px; transform: rotate(180deg);}
.industry-app .slick-next {right: 100px;}
.industry-app:after {content: ''; background: linear-gradient(90deg, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0) 100%); width: 400px; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 1;}
.industry-app:before {content: '';background: linear-gradient(270deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); width: 400px; height: 100%; position: absolute; top: 0px; right: 0px; z-index: 1;}
.industry-white .industry-app:after {background: linear-gradient(90deg, rgba(242, 242, 242, 1) 10%, rgba(255, 255, 255, 0) 100%);}
.industry-white .industry-app:before {background: linear-gradient(270deg,rgba(242, 242, 242, 1) 0%, rgba(255, 255, 255, 0) 100%);}
@media (max-width: 1700px) {
.industry h2 {font-size: 2.5em}
.industry p {font-size: 1.5em; max-width: 1000px; margin-bottom: 0px}
}
@media (max-width: 768px) {
.industry h2 {font-size: 2em; text-align: left;letter-spacing: 0;}
.industry p {font-size: 1.2em; text-align: left;}
.industry-app .slick-arrow {top: calc(50% - 30px);}
.industry-app .slick-prev {left: 50px;}
.industry-app .slick-next {right: 50px;}
.industry-app:before, .industry-app:after {display: none;}
}
.parallax {background: #ccc; overflow: hidden; padding-top: 100px}
.parallax-app {background: #c50e19c2; padding: 50px; position: relative; border-radius: 0px 40px 40px 40px; color: #fff; padding-left: 250px; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);}
.parallax-app:after {content: ''; background: url('../img/parallax-after.png') no-repeat center; background-size: 100%; width: 340px; height: 468px; position: absolute; top: -40px; left: -125px; z-index: 10;}
.parallax-app h2 {font-weight: bold; font-size: 1.7em; letter-spacing: -0.5px;}
.parallax-app p {font-size: 1.2em}
@media (max-width: 768px) {
.parallax {padding-top: 0px; background: #fff;}
.parallax img {display: none !important; padding-top: 0px;}
.parallax-app:after {display: none;}
.parallax-app {padding: 30px; border-radius: 10px;}
.parallax-app p {font-size: 1em}
}
/* SIGA A LOOP */
.follow {padding: 200px 0px; color: var(--grafite); background: #fff url('../img/siga-loop.png') no-repeat 30px 350px;}
.follow h2 {font-weight:bold; margin-left: -30px; white-space: nowrap; font-size: 3.5em; text-align: right; letter-spacing: -2px;}
.follow p {font-size: 1.5em; text-align: right; margin-bottom: 10px; max-width: 250px; margin-left: auto;}
.follow .btn {margin-left: auto; margin-top: 10px;}
.follow .follow-apps {position: relative;}
.follow .follow-apps:after {content: ''; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 46px; background: #ffffff; z-index: 99999; display: block;}
.follow .follow-apps img {border-radius: 10px;}
@media (max-width: 1700px) {
.follow {padding: 100px 0px;background: #fff url('../img/siga-loop.png') no-repeat -160px 250px}
}
@media (max-width: 768px) {
.follow {padding: 60px 0px; background: #fff;}
.follow .follow-apps {display: none !important;}
.follow .follow-apps:after {display: none !important;}
.follow h2 {font-size: 2em; letter-spacing: 0; text-align: left; margin-left: 0px}
.follow p {font-size: 1.2em; text-align: left; margin-left: 0px; max-width: 100%}
.follow .btn {margin-left: 0px}
}
.isau-banner {width: 100%; height: 600px; overflow: hidden;}
.isau-infos {padding-bottom: 100px; background: #fff;}
.isau-infos .isau-title {background: var(--laranja); color: #fff; position: relative; z-index: 2; margin-left: 50px; border-radius: 0px 40px 40px 0px; padding-top: 50px; padding-bottom: 50px; margin-bottom: 40px; width: calc(90% - 50px); margin-top: -126px;}
.isau-infos .isau-title:after {content: ''; position: absolute; top: -96px; left: -262px; width: 457px; z-index: 3; height: 385px; background: url(../img/frutas-isau.png) no-repeat center;}
.isau-infos .isau-title h2 {font-weight: bold; font-size: 3em; padding-left: 250px; letter-spacing: -2px; line-height: 1}
.isau-infos .isau-title h2 strong {display: block; font-size: 2em;}
.isau-infos .isau-text {padding-left: 200px; color: var(--grafite); position: relative; background: url('../img/folhas-bg.png') no-repeat left bottom;}
.isau-infos .isau-text p {margin-bottom: 30px; font-size: 1.4em; letter-spacing: -0.5px;}
.isau-infos .isau-text:before {position: absolute; top: calc(50% - 29.5px); left: 0px; width: 112px; height: 59px; background: url('../img/logo-isau-en.png') no-repeat center; content: ''}
@media (max-width: 1400px) {
.isau-infos .isau-title h2 {font-size: 2.5em}
}
@media (max-width: 768px) {
.isau-infos .isau-title:after {display: none;}
.isau-infos .isau-title h2 {font-size: 2em; padding: 0px}
.isau-infos .isau-title h2 strong {font-size: 1.5em}
.isau-infos .isau-title {width: auto; margin: 0px; border-radius: 0px; margin-left: -30px; margin-right: -30px; padding: 30px;}
.isau-infos .isau-text:before {position: relative; display: block; top: auto; left: auto; margin-bottom: 30px}
.isau-infos .isau-text {padding-left: 0px; margin-top: 30px}
.isau-infos .isau-text p {font-size: 1.2em; letter-spacing: 0px}
.isau-banner {height: 350px;}
}
.footer {background: var(--preto) url('../img/rodape-bg.png') no-repeat bottom right; padding-top: 60px; padding-bottom: 50px; color: #fff;}
.footer .frase {padding-left: 40px; font-size: 2em; letter-spacing: -0.5px;}
.footer .borda {width: 100%; background: #000; height: 5px; border-radius: 50px; margin-top:30px; margin-bottom:30px;}
.footer .social {gap: 0px 10px}
.footer .social a {display: block; background: #fff; padding: 13px; border-radius: 100%}
.footer .social a svg {display: block; fill: var(--preto); width: 20px; height: 20px;}
.footer .footer-title {font-size: 2em; letter-spacing: -0.5px; margin-bottom: 10px}
.footer .menu-footer li {margin-left: 15px; margin-bottom: 10px}
.footer .menu-footer li a {display: block; color: #fff; text-decoration: none; font-size: 1.2em; letter-spacing: -0.5px;}
.footer p {display: block; color: #fff; font-size: 1.2em; letter-spacing: -0.5px;}
.footer .links {display: block; color: #fff; text-decoration: none; font-size: 1.2em; letter-spacing: -0.5px;}
.footer .copyright {font-size: 0.8em}
.footer .sim-propaganda {display: block; margin-left: auto; width: fit-content;}
.footer .sim-propaganda img {display: block;}
@media (max-width: 1700px) {
.footer .footer-title {font-size: 1.5em}
.footer p, .footer .links, .footer .menu-footer li a {font-size: 1em}
}
@media (max-width: 768px) {
.footer .frase {padding-left: 0px; font-size: 1.4em; text-align: center;}
.footer .footer-title {font-size: 1.5em}
.footer .menu-footer {margin-bottom: 30px}
}
.about-banner {display: block;}
.about-banner h2 {display: block; margin-bottom: 30px; text-align: center; letter-spacing: -1px; color: var(--vermelho); font-size: 3em}
.about-banner h2 strong {display: block; font-size: 2em}
.about-banner p {display: block; font-size:1.5em; color: var(--grafite); max-width: 850px; text-align: center; margin: auto;}
.about-banner iframe {display: block; width: 900px; height: 507px; border-radius: 40px; margin: auto; margin-bottom: 30px;}
@media (max-width:1700px) {
.about-banner h2 {font-size: 2em;}
}
@media (max-width:1024px) {
.about-banner iframe {width: 100%; height: 300px}
}
@media (max-width: 768px) {
.about-banner h2 {font-size: 1.5em}
.about-banner p {font-size: 1.5em}
.about-banner iframe {height: 220px; border-radius: 10px;}
}
.about-text {margin-bottom: 100px; }
.about-text h2 {color: var(--vermelho); font-size: 2.5em;letter-spacing: -1px; line-height:1; font-weight: bold; margin-bottom: 30px}
.about-text p {color: var(--grafite); font-size:1.2em; letter-spacing: -0.3px; margin-bottom: 30px; line-height: 1.4}
.about-text ul {margin-left: 15px; margin-bottom: 30px;}
.about-text ul li {color: var(--grafite); font-size:1.2em; letter-spacing: -0.3px; margin-bottom: 5px; line-height: 1.6}
.about-text .about-text-app {background: #fff; border-radius: 40px;overflow: hidden;}
.about-text .about-text-app .txt {padding: 40px 80px; box-sizing: border-box;}
@media (max-width: 1700px) {
.about-text h2 {font-size: 2em; line-height: 1.2}
}
@media (max-width: 1400px) {
.about-text h2 {font-size: 1.7em}
.about-text p {font-size: 1em}
.about-text ul li {font-size: 1em}
.about-text .about-text-app {background: transparent; border-radius: 0px}
.about-text .about-text-app .txt {padding: 0px 15px; margin-bottom: 30px}
.about-text .about-text-app img {border-radius: 10px;}
.about-text {margin-bottom: 30px;}
}
/* MISSÃO, VISÃO E VALORES */
.about-mvv h2 {text-align: center; color: var(--grafite); font-size: 2em; letter-spacing: -1px; margin: auto; font-weight: bold; margin-bottom: 40px; max-width: 1000px;}
.about-mvv .icon {border-radius: 20px; padding: 30px; background: #000; color: #fff; height: 100%;}
.about-mvv .icon h3 {font-size: 3em; letter-spacing: -1px; width: 100%; text-align: center; font-weight: bold;}
.about-mvv .icon img {height: 50px; margin: auto; margin-bottom: 10px; width: auto; display: block;}
.about-mvv .txt {border-radius: 20px; padding: 30px 60px; background: #000; color: #fff; height: 100%; margin-bottom: 30px}
.about-mvv .txt p {font-size: 1.4em; margin-bottom: 20px; letter-spacing: -0.2px; line-height: 1.2;}
.about-mvv .txt p strong {display: block; font-size: 1.1em; margin-bottom: 10px;}
@media (max-width: 1700px) {
.about-mvv .icon img {height: 40px;}
.about-mvv .icon h3 {font-size: 2em;}
.about-mvv .txt p {font-size: 1.2em}
}
@media (max-width: 768px) {
.about-mvv h2 {font-size: 1.5em}
.about-mvv .txt p {font-size: 1em}
.about-mvv .icon {padding: 10px}
.about-mvv .icon img {height: 40px}
.about-mvv .icon h3 {font-size: 1.4em}
.about-mvv .txt {padding: 30px; margin-top: 10px}
}
.contato {position: relative; margin-top: 100px; margin-bottom: 100px; padding: 0px; border: none;}
.contato p {font-size: 1.4em; margin-bottom: 20px; color: #6a6a6a; letter-spacing: -0.2px; line-height: 1.2; padding-left: 25%;}
.contato-app {display: flex;}
.contato .formulario {width: calc(45% - 30px)}
.contato .informacoes {padding-left: 60px; margin-left: 60px; border-left: 1px solid #b9b9b9; width: calc(55% - 30px); box-sizing: border-box;}
.contato .titulo {color: var(--vermelho); font-size: 1.6em; margin-bottom: 5px; position: relative; font-weight: 600; letter-spacing: -0.5px;}
.contato .info {color: #6a6a6a; font-weight: normal; font-size: 1.2em; letter-spacing: -0.5px; margin-bottom: 10px; display: flex; align-items: center;}
.contato .info a {color: #6a6a6a;}
.contato .info img {display: block; width: 20px; height: 20px; margin-right: 5px;}
.contato .social {display: flex; margin-top: 10px}
.contato .social a {display: block; padding:15px; background: var(--vermelho); border-radius: 5px; margin-right: 10px; transition: 0.5s}
.contato .social a:hover {background:var(--vermelho-hover);}
.contato .social a svg {display: block; width: 20px; height: 20px; fill: #fff}
.contato .btn-maps {background: var(--cinza); color: #6a6a6a; font-size: 13px; padding-left: 15px; padding-right: 15px; margin-left: 0px; margin-right: 10px;}
.contato .btn-maps:hover {background:#d9d9d9;}
.contato .btn-maps svg {margin-left: 0px; margin-right: 5px; fill: #6a6a6a; width: 25px; height: 25px;}
.contato .btn-maps b {margin-left: 5px; display: inline-block;}
.contato iframe {width: 100%; height: 400px; margin-top: 60px; border-radius: 15px;}
@media (max-width: 1100px) {
.contato-app {display: block;}
.contato {padding-top: 30px}
.contato p {font-size: 1.5em; margin-bottom: 30px}
.contato .formulario {width: 100%}
.contato .informacoes {padding-left: 0px; margin-left: 0px; border-top: 1px solid var(--cinza); width: 100%; border-left: none; padding-top: 30px; margin-top: 30px}
}
@media (max-width: 768px) {
.contato {margin-top: 0px; margin-bottom: 30px}
}
.formulario form {display: block; width: 100%;}
.formulario .item {display: flex; position: relative; align-items: flex-start; margin-bottom: 20px;width: 100%;}
.formulario .item img {display: block; width: 20px; height: 20px; left: calc(25% + 15px); top: 12px; position: absolute;}
.formulario label {display: block; line-height: 45px; height: 45px; margin: 0px; width: 25%; padding-right: 20px; text-align: right;color: #6a6a6a; font-weight: bold; font-size: 1.2em;}
.formulario .input {display: block; box-sizing: border-box; transition: 0.5s; width: 75%; height: 50px; padding: 0px 20px; border-radius: 0px 10px 10px 10px; border: 1px solid #d9d9d9; outline: none !important; font-size: 17px;}
.formulario .input:focus{border-color: #646464;}
.formulario .textarea {border-left-width: 1px; height: 150px; resize: none; padding-top: 10px;}
.formulario .btn {margin-left: 25%}
.wpcf7 form .wpcf7-response-output {border-radius: 0px 10px 10px 10px; margin: 0px;}
.wpcf7 form.invalid .wpcf7-response-output {background: #ffb900;}
@media (max-width: 1700px) {
.formulario .input {height: 45px}
.formulario .textarea {height: 150px;}
}
@media (max-width: 768px) {
.formulario .item {display: block;}
.formulario label { width: 100%; text-align: left; padding: 0px; line-height: 25px; height: 25px; }
.formulario .input {width: 100%; font-size: 14px;}
.formulario .btn {margin-left: 0%}
.formulario .item img {left: 15px; top: 37px;}
}
/* BANNER DE PÁGINAS INTERNAS */
.banner-parallax-interno {background-color: #000; padding: 150px 0px; color: #fff; overflow: hidden; position: relative;background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover;}
.banner-parallax-interno h1 {margin-bottom: 0px;font-size: 4em; font-weight: 600; letter-spacing: -1px; position: relative; z-index: 3; text-align: center;}
.banner-parallax-interno:after {content: ''; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); top: 0px; left: 0px; z-index: 1; position: absolute;}
.banner-parallax-interno:before {content: ''; width: 400px; height: 100%; opacity: 0.4; position: absolute;background: url('https://dev.simpropaganda.com.br/wp-content/webp-express/webp-images/themes/sim/assets/img/folhas-bg-2.png.webp') no-repeat center; background-size: 100%; bottom: 0px; left: calc(50% - 200px); z-index: 2; display: block;}
@media (max-width: 1700px) {
.banner-parallax-interno {padding: 70px 0px;}
.banner-parallax-interno h1 {font-size: 3em}
.banner-parallax-interno:before {width: 300px; left: calc(50% - 150px); background-size: 90%}
}
@media (max-width: 768px) {
.banner-parallax-interno {padding: 40px 0px; background-attachment: scroll;}
.banner-parallax-interno h1 {font-size: 2em}
.banner-parallax-interno:before {width: 200px; left: calc(50% - 100px); background-size: 80%}
}
.artigo-card {margin: 10px; width: calc(100% - 20px); margin-bottom: 40px; display: block; background: #fff; padding: 30px; border-radius: 15px; text-decoration: none; color: #000; transition: 0.5s}
.artigo-card:hover {transform: scale(1.05);}
.artigo-card img {display: block; border-radius: 10px; margin-bottom: 20px; width: 100%}
.artigo-card h2 {font-weight: bold; color: var(--vermelho); font-size: 1.8em; letter-spacing: -0.5px; margin-bottom: 20px; line-height: 1.2}
.artigo-card p {color: #767676; font-size: 1.4em; line-height: 1.4; margin-bottom: 30px; letter-spacing: -0.5px;}
.artigo-card span {display: flex; align-items: center; gap: 10px; font-weight: bold; color: #333;}
.artigo-card svg {display: block; width: 15px; height: 15px; fill: #333;}
.artigo-card-first h2 {font-size: 3em; line-height: 1.1}
.artigo-card-first {display: flex; justify-content: space-between; align-items: center;}
.artigo-card-first img {width: 50%; margin-bottom: 0px}
.artigo-card-first div {width: 50%; padding-left: 30px;}
@media (max-width: 1700px) {
.artigo-card h2 {font-size: 1.4em}
.artigo-card p {font-size: 1.2em}
.artigo-card-first h2 {font-size: 2em}
.artigo-card-first img {width: 40%;}
.artigo-card-first div {width: 60%;}
}
@media (max-width: 1024px) {
.artigo-card-first {display: block;}
.artigo-card-first img {width: 100%; margin-bottom: 20px}
.artigo-card-first div {width: 100%; padding-left: 0px;}
.artigo-card-first h2 {font-size: 1.4em}
}
/* TIMELINE */
.timeline {background: #fff; color: var(--grafite); padding: 100px 0px; margin-top: 100px; position: relative;}
.timeline .container {position: relative;}
.timeline .enfeite {position: absolute; bottom: -250px; right: calc(100% + 200px); width: 450px; display: block; }
.timeline .slick-arrow {position: absolute;z-index: 10; top: 245px; background: url('../img/arrow-slick-red.png') no-repeat center; background-repeat: no-repeat; width: 60px; height: 60px; border:none; font-size: 0px; cursor: pointer;}
.timeline .slick-disabled {opacity: 0.4; cursor: not-allowed;}
.timeline .slick-prev {left: -100px; transform: rotate(180deg);}
.timeline .slick-next {right: -100px;}
.timeline .item .titulos {width: 300px; height: 300px; border-radius: 100%; margin-top: 116px; border: 2px solid var(--vermelho); color: var(--vermelho); padding: 30px; box-sizing: border-box; text-align: center; display: flex ; align-items: center; position: relative; background: #fff; z-index: 100; box-shadow: 0px 0px 0px 20px #fff;}
.timeline .item .titulos h2 {margin-bottom: 0px; font-size: 3em; font-weight: bold;}
.timeline .item .img {height: 228px; margin-bottom: 20px;}
.timeline .item .history img {display: block; margin: auto; width: 70%; border-radius: 15px;}
.timeline .item .history h2 {position:relative;}
.timeline .item .history h2:after {content: ''; width: 100%; right: 0%; height: 2px; background: var(--vermelho); position: absolute; top: 27px; z-index: 1;}
.timeline .first .history h2:after {width: 200%;}
.timeline .last .history h2:after {right: 50%;}
.timeline .item .history h2 span { display: block; position: relative; width: fit-content; margin: auto; background: #fff; padding: 0px 20px; z-index: 100; font-weight: 900; color: var(--vermelho); font-size: 1.5em;}
.timeline .item .history .text {text-align: center; padding: 10px;}
.timeline .item .history h3 {text-align: center; width: 100%; margin-bottom: 10px; color: var(--vermelho); font-size: 1.2em;}
.timeline .item .history p {margin-bottom: 20px; font-size: 0.8em;}
@media (max-width: 2000px) {
.timeline .enfeite {right: calc(100% + 50px);}
}
@media (max-width: 768px) {
.timeline-app {margin-left: -30px; margin-right: -30px;}
.timeline .item .history h2 span:after {display: none;}
.timeline {margin-top: 60px; padding: 60px 0px;}
.timeline .item .img {display: block;}
.timeline .item .img img {width: 90%;}
.timeline .item .titulos {width: 200px; height: 200px; margin-top: 173px;}
.timeline .item .history h3 {font-size: 1em;}
.timeline .item .titulos h2 {font-size: 2em}
}
.artigos .artigos-title {font-size: 3em; letter-spacing: -1px; font-weight: bold; text-align: center; margin-bottom: 30px;}
.text {margin: auto; max-width: 800px}
.text p {font-size: 1.1em; line-height: 1.6; margin-bottom: 30px}
.text ul {margin-left: 20px; margin-bottom: 30px;}
.text li {font-size: 1.1em; line-height: 1.6; margin-bottom: 5px}
.text h2 {color: var(--vermelho); font-weight: bold; font-size: 2.5em; margin-bottom: 10px; letter-spacing: -0.5px;}
.text h3 {color: var(--vermelho); font-weight: bold; font-size: 2em; margin-bottom: 10px; letter-spacing: -0.3px;}
.text a {color: var(--laranja); text-decoration: underline;}
.text img {display: block; width: 100%; margin-bottom: 30px; border-radius: 10px;}
@media (max-width: 1700px) {
.text h2 {font-size: 2em}
}
@media (max-width: 768px) {
.text p {font-size: 1em;}
}
.post-informacoes {margin:auto; width: fit-content; border-top: 2px solid #e3e3e3; margin-top: 30px; padding-top: 30px;}
.post-informacoes .autor-foto {display: block; border-radius: 100%; margin-right: 30px; width: 130px; height: 130px;}
.post-informacoes .autor-nome {display: block; font-size: 2em; font-weight: bold; margin-bottom: 5px; line-height: 1.1}
.post-informacoes .infos {display: block; font-size: 1.1em; opacity: 0.7; margin-bottom: 10px;}
@media (max-width: 768px) {
.post-informacoes .d-flex {display: block !important;}
.post-informacoes .autor-foto {width: 80px; height: 80px; margin-bottom: 20px}
.post-informacoes .autor-nome {font-size: 1.5em}
.post-informacoes .infos {font-size: 1em}
}
/* COMPANYS */
.companys {background: #fff}
.companys h2 {margin-left: -30px; margin-bottom: 0px; white-space: nowrap; font-weight: normal; font-size: 1.5em; letter-spacing: -0.2px;}
.companys h2 strong {display: block; font-size: 4em; color: var(--vermelho);letter-spacing: -3px;}
@media (max-width: 1700px) {
.companys h2 strong {font-size: 2em}
}
@media (max-width: 768px) {
.companys h2 {margin: 0px; width: 100%; white-space: normal; letter-spacing: 0px;}
.companys h2 strong {letter-spacing: -1px;}
}
/* SUCTEC */
.suctec {display: block; background: #fff;}
.suctec .container {background: #17412d; margin-bottom: 50px; border-radius: 0px 50px 50px 50px; box-shadow: 50px 50px 0px #52ae42; padding: 70px; box-sizing: content-box;}
.suctec .txt p {font-size: 1.4em; color: #fff; text-align: center; margin-bottom: 30px}
.suctec .txt img {display: block; width: 100%; margin-bottom: 30px}
.suctec .btn {margin: auto; color: #fff; border-color: #fff; background: transparent;}
.suctec .btn svg {fill: #fff;}
@media (max-width: 1700px) {
.suctec .txt p {font-size: 1.2em;}
.suctec .container {box-sizing: border-box;}
}
@media (max-width:1024px) {
.suctec .container {padding:30px; border-radius: 0px; box-shadow: none;}
.suctec .txt p {font-size: 1em; text-align: left; margin-bottom: 30px}
.suctec .btn {margin-bottom: 30px}
}
/* ISAU */
.isautext {background: #fff;}
.isautext .logo-isau {display: block; margin-bottom: 30px; width: 250px;}
.isautext h2 {color: #ff7b0d; font-size: 2em; letter-spacing: -1px; font-weight: bold; margin-bottom: 30px;}
.isautext h2 strong {font-size: 2em; display: block;}
.isautext p {color: #767676; font-size: 1.4em; line-height: 1.4; margin-bottom: 30px; letter-spacing: -0.5px;}
.isautext .fabrica {margin-left: -389px; display: block; width: calc(100% + 352px);}
@media (max-width: 1700px) {
.isautext .fabrica {margin-left: -165px; width: calc(100% + 165px);}
.isautext .logo-isau {width: 150px;}
.isautext h2 {font-size: 1.5em}
.isautext h2 strong {font-size: 1.5em;}
.isautext p {font-size: 1.2em;}
}
@media (max-width: 768px) {
.isautext p {font-size: 1em}
.isautext .fabrica {width: 100%; margin: 0px; border-radius: 20px; margin-bottom: 30px;}
}
/* privacy */
#privacy {display: none; position: fixed; bottom: 30px; left: 30px; z-index: 80; width: 500px; box-sizing: border-box; padding: 30px; border-radius: 10px; background: #fff; box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.1);}
#privacy .titulo {display: block; font-weight: bold; font-size: 1em; margin-bottom: 10px;}
#privacy p {display: block; font-size:0.8em; margin-bottom:20px;}
#privacy p a {color: #006dc3; text-decoration: underline;}
#close-privacy {position: absolute; top: 10px; right: 10px; cursor: pointer;}
#close-privacy img {display: block; width: 40px;}
@media (max-width: 768px) {
#privacy {width:100%; left: 0px; bottom: 0px; padding: 20px; border-radius: 0px}
#privacy p {margin-bottom: 10px; font-size: 0.7em}
}
#privacy .btn {font-family: 'Montserrat'; min-width: auto; font-size: 15px}