@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

* {margin: 0; padding: 0; font-family: 'Open Sans', sans-serif;
  font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale}
  body, html {height: 100%}
  body {background: url("../images/bg.jpg") no-repeat; background-position: center right;}

h1, h2, h3, h4, h5, h6 {font-family: 'Montserrat', sans-serif;}
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {font-family: 'Montserrat', sans-serif;}
h1 span em, h2 span em, h3 span em, h4 span em, h5 span em, h6 span em {font-family: 'Montserrat', sans-serif; font-style: normal;}

header {background-image: linear-gradient(to bottom, #2f089d, #6501a2, #8c03a6, #af11a9, #ce24ab); padding: 15px 0;}
header .logo {padding-top: 15px;}
header nav {line-height: 78px; text-align: right;}
header nav a {text-decoration: none; color: #fff; font-size: 20px; margin: 0 15px;}
header .idioma {text-align: right; line-height: 78px; color: #fff; font-size: 20px;}
header .idioma a {text-decoration: none; color: #fff;}
header .idioma .active {font-weight: 900; color: #FF00C7;}
.fixed-header {position: fixed; width: 100%; z-index: 999999;}
header #menu {display: none;}
header #menu-mobile .close {display: none;}

.banner {min-height: 768px; background-size: cover; background-position: center center; position: relative; overflow: hidden;}
.banner video {display: block;  width: 100%;  position: relative;}

.divisor {position: relative; margin-top: -120px;}
.divisor .waves {display: block; width: 100%;}

.quem  {position: relative; padding: 30px 0;}
.quem h1 {font-weight: 900; display: inline-block; width: auto; font-size: 120px; color: #3B0448; line-height: 100px;}
.quem h1 span {font-weight: 700; font-size: 64px; display: block; text-align: right;}
.quem p {font-size: 20px; color: #000; line-height: 38px; margin-top: 20px; }
.quem img {position: absolute; right: 0; top: -170px;}
.quem .button {display: inline-block; background-color: #69177B; border-radius: 56px; height: 56px; line-height: 56px; color: #fff; font-size: 18px; text-decoration: none; font-weight: 700; padding: 0 30px; margin-top: 20px;}

.porque  {position: relative; padding: 30px 0; margin-top: 100px;}
.porque h2 {font-weight: 900; display: inline-block; width: auto; font-size: 104px; color: #3B0448; line-height: 90px;}
.porque h2 span {font-weight: 700; font-size: 56px; display: block; text-align: left;}
.porque p {font-size: 20px; color: #000; line-height: 38px; margin-top: 20px; }

.numbers {margin-top: 40px; text-align: center;}
.numbers h3 {font-size: 96px; font-weight: 900;}
.numbers h3 span {display: block; font-size: 40px; font-weight: 700; line-height: 48px;}
.numbers h3 span em {display: block; color: #231F20; font-size: 25px;}
.numbers p {color: #231F20; font-size: 18px; padding: 0 15px; line-height: 36px;}
.numbers .num:first-child h3 {color: #69177B;}
.numbers .num:nth-child(2) h3 {color: #B11F99;}
.numbers .num:nth-child(3) h3 {color: #0185C1;}
.numbers .num:last-child h3 {color: #00D3EA;}

.soulucoes  {position: relative; padding: 30px 0; margin-top: 50px; background: url("../images/bg-solucoes.jpg") no-repeat; background-position: right top;}
.soulucoes h2 {font-weight: 900; display: inline-block; width: auto; font-size: 104px; color: #3B0448; line-height: 90px;}
.soulucoes h2 span {font-weight: 700; font-size: 56px; display: block; text-align: left;}
.soulucoes p {font-size: 20px; color: #000; line-height: 38px; margin-top: 20px; }
.soulucoes .solutions {text-align: center; margin-top: 70px;}
.soulucoes .solutions h4 {color: #231F20; font-size: 25px; margin-top: 20px;}
.soulucoes .solutions p {color: #231F20; font-size: 16px; line-height: 24px;}

.clientes {margin-top: 70px;}
.clientes h3 {font-weight: 900; font-size: 64px; color: #3B0448;  margin-bottom: 60px; text-align: center;}
.clientes .single-item div img {width: 88%; height: auto;}
.clientes .mural {margin-top: 50px;}
.clientes .mural div img {width: 100%; height: auto;}

.midia {margin-top: 90px;}
.midia h3 {font-weight: 900; font-size: 64px; color: #3B0448;  margin-bottom: 60px; text-align: center;}
.midia h3 span {font-weight: 400; display: block; font-size: 20px; color: #231F20; margin-top: 15px;}
.midia .single-item-midia {margin-top: 20px;}
.midia .single-item-midia div {text-align: center; }
.midia .single-item-midia img { height: auto; display: inherit;}
.midia .single-item-midia a {text-decoration: none;}
.midia .single-item-midia h5 {font-size: 16px; color: #3B0448; padding: 0 10px; margin-top: 15px;}

.blog-home {margin-top: 90px;}
.blog-home h3 {font-weight: 900; font-size: 64px; color: #3B0448;  margin-bottom: 60px; text-align: center;}
.blog-home h3 span {font-weight: 400; display: block; font-size: 20px; color: #231F20; margin-top: 15px;}

.contato {padding-top: 90px; z-index: 999; position: relative;}
.contato h3 {font-weight: 900; font-size: 64px; color: #3B0448;  margin-bottom: 60px; text-align: center;}
.contato h3 span {font-weight: 400; display: block; font-size: 20px; color: #231F20; margin-top: 15px; line-height: 40px;}
.contato .social {text-align: right; overflow: inherit;}
.contato .social ul {overflow: hidden; list-style: none; float: right; margin-top: 0;}
.contato .social ul li {overflow: hidden; float: left; margin-right: 15px; margin-top: 22px;}
.contato .social ul li:first-child {margin-top: 0;}
.contato .endereco { padding-left: 40px; border-left: 1px solid #ccc;}
.contato .endereco p {margin-bottom: 15px; overflow: hidden;}
.contato .endereco p i {display: inline-block; float: left; padding-top: 5px;}
.contato .endereco p span {display: inline-block; float: left; width: 90%; padding-left: 15px; color: #000; line-height: 28px; font-size: 18px;}
.contato .endereco p a {text-decoration: none; display: inline-block; float: left; width: 90%; padding-left: 15px; color: #000; line-height: 28px; font-size: 18px;}
.contato .container {background: url("../images/bg-footer.svg") no-repeat; background-position: 100px bottom; padding-bottom: 220px;}

footer {position: relative; z-index: 9;  text-align: right; border: 1px solid #ccc; padding: 15px 0; font-size: 15px; color: #000; margin-top: -52px;}

@media (max-width:768px) {
  body {background: none;}
  header .logo {padding-top: 0;}
  header .logo img {width: 90px; height: auto;}
  header #menu {display: block; position: absolute; right: 20px; top: 25px;}
  header #menu svg {width: 30px; height: 30px;}
  header #menu-mobile {display: none; padding-top: 50px;}
  header #menu-mobile:target {display: block; position: fixed; width: 100%; height: 100%; background-image: linear-gradient(to bottom, #2f089d, #6501a2, #8c03a6, #af11a9, #ce24ab); bottom: 0; left: 0; z-index: 9999;}
  header #menu-mobile a {display: block; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.2);}
  header #menu-mobile a:last-child {border: 0;}
  header #menu-mobile .close {border: 0; position: absolute; top: 5px; right: 5px; text-align: center;  padding: 0; border-radius: 50px; display: inline-block;}
  header #menu-mobile .close svg {color: #fff;  background-color: transparent; width: 30px; height: 30px; fill: transparent;}
  
  .banner {background-size: 260%;
    background-position: 18% center; min-height: 300px;}
.banner video {height: 300px; width: auto;}
  .divisor {margin-top: -30px;}
  .quem {overflow: hidden;}
  .quem h1 {font-size: 60px; line-height: 50px;}
  .quem h1 span {font-size: 32px;}
  .quem img {width: 380px; height: auto; top: 0; right: -150px;}
  .quem p {font-size: 15px; line-height: 24px; margin-top: 10px; padding-right: 80px;}
  .porque {margin-top: 0; padding-bottom: 0;}
  .porque h2 {font-size: 60px; line-height: 50px;}
  .porque h2 span {font-size: 32px;}
  .porque p {font-size: 15px; line-height: 24px; margin-top: 10px; padding-right: 0;}
  .porque .num {margin-bottom: 20px; padding-bottom: 30px; border-bottom: 1px solid #cfcfcf;}
  .porque .num:last-child {border: 0;}
  .soulucoes {margin-top: 0; background-size: 110px; padding-bottom: 0;}
  .soulucoes h2 {font-size: 60px; line-height: 50px;}
  .soulucoes h2 span {font-size: 32px;}
  .soulucoes p {font-size: 15px; line-height: 24px; margin-top: 10px; padding-right: 0;}
  .soulucoes .solutions img {width: 170px; height: auto;}
  .soulucoes .solutions h4 {font-size: 20px;}
  .soulucoes .solutions p {font-size: 15px;}
  .soulucoes .solutions .col {border-bottom: 1px solid #cfcfcf; padding-bottom: 30px; margin-bottom: 30px;}
  .soulucoes .solutions .col:last-child {border: 0;}
  .clientes {margin-top: 0;}
    .clientes h3 {font-size: 40px; line-height: 50px;}
  .clientes h3 span {font-size: 32px;}
  .midia {margin-top: 50px;}
    .midia h3 {font-size: 40px; line-height: 50px;}
  .midia h3 span {font-size: 18px; line-height: 30px;}
  .contato {margin-top: 50px; padding-top: 0;}
  .contato .container {background-position: center bottom; background-size: 100%;}
    .contato h3 {font-size: 40px; line-height: 50px;}
  .contato h3 span {font-size: 18px; line-height: 30px;}
  .contato .social {text-align: left; border-bottom: 1px solid #cfcfcf; padding-bottom: 30px; margin-bottom: 30px;}
  .contato .social ul {float: left;}
  .contato .social ul li {margin-right: 10px;}
  .contato .endereco {border: 0; padding-left: 0;}
  .contato .social ul li:last-child {margin-right: 0;}
  .contato .social ul li svg {width: 35px;}
  
  footer {position: relative; margin-top: 0; text-align: center; font-size: 14px;}
}
@media (max-width:320px) {
 
}