@charset "UTF-8";
/* --- Reset CSS e Variáveis --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Gantari", sans-serif;
  line-height: 1.3; }

body {
  background-color: #fcfcfc;
  padding: 0 5vw; }

@media (min-width: 769px) {
  body {
    cursor: none; } }
@media (max-width: 768px) {
  body {
    padding: 0 7.5vw; }

  p, h1, h2, h3, h4 {
    line-height: 1.45; } }
@media (min-width: 769px) {
  * {
    cursor: none; } }
p {
  font-size: 0.9vw;
  margin-bottom: 0.85vw; }

@media (max-width: 768px) {
  p {
    font-size: 4vw;
    margin-bottom: 4vw; } }
.smartphone-block, .smartphone-grid {
  display: none; }

@media (max-width: 768px) {
  .desktop {
    display: none; }

  .smartphone-block {
    display: block; }

  .smartphone-grid {
    display: grid; } }
/* Estilos para o canvas do rastro */
#mouse-trail-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Coloca o canvas atrás de todo o conteúdo */
  z-index: -1; }

@media (max-width: 768px) {
  .mouse-trail-canvas {
    display: none; }

  .custom-cursor {
    display: none; } }
/* Estilo para o cursor customizado */
.custom-cursor {
  width: 20px;
  height: 20px;
  border: 2px solid #2a6eb4;
  border-radius: 50%;
  position: fixed;
  /* Centraliza o cursor */
  transform: translate(-50%, -50%);
  /* Permite clicar através do cursor */
  pointer-events: none;
  transition: transform 0.1s ease-out, background-color 0.2s ease;
  z-index: 9999; }

/* Efeito no cursor ao clicar */
.custom-cursor.active {
  transform: translate(-50%, -50%) scale(1.2); }

.gradient-text {
  /* 1. Define o fundo como um gradiente linear.
      Altere as cores aqui para mudar o gradiente. */
  background: linear-gradient(120deg, #7D59C8, #0371CE, #0371CE);
  /* 2. Recorta o fundo para que ele se ajuste ao formato do texto.
      O prefixo -webkit- é para compatibilidade com navegadores como Chrome e Safari. */
  -webkit-background-clip: text;
  background-clip: text;
  /* 3. Torna a cor do texto transparente para que o fundo (gradiente) apareça. */
  -webkit-text-fill-color: transparent;
  /* Apenas para garantir que a cor padrão não interfira */
  color: transparent; }

.gradient-text-2 {
  /* 1. Define o fundo como um gradiente linear.
      Altere as cores aqui para mudar o gradiente. */
  background: linear-gradient(-120deg, #7D59C8, #7D59C8, #0371CE, #0371CE, #0371CE);
  /* 2. Recorta o fundo para que ele se ajuste ao formato do texto.
      O prefixo -webkit- é para compatibilidade com navegadores como Chrome e Safari. */
  -webkit-background-clip: text;
  background-clip: text;
  /* 3. Torna a cor do texto transparente para que o fundo (gradiente) apareça. */
  -webkit-text-fill-color: transparent;
  /* Apenas para garantir que a cor padrão não interfira */
  color: transparent; }

.cta-background-white {
  padding: 0.5vw 2vw;
  text-align: center;
  font-size: 0.85vw;
  color: #0072ce !important;
  text-decoration: none;
  border-style: solid;
  border-width: 0.1vw;
  border-radius: 0.25vw;
  border-color: #0072ce;
  margin: 0.5vw 0;
  float: left; }

.cta-background-blue {
  padding: 0.5vw 2vw;
  text-align: center;
  font-size: 0.85vw;
  color: #FFF;
  text-decoration: none;
  border-style: solid;
  border-width: 0.1vw;
  border-radius: 0.25vw;
  border-color: #FFF;
  margin: 0.5vw 0;
  float: left; }

/* estiliza a seção de faq */
/* --- Seção FAQ --- */
/* Estiliza a seção de Perguntas Frequentes (FAQ). */
.faq-section {
  width: calc(100% + 10vw);
  padding: 3vw 0 7vw 0;
  background-color: #0a2351;
  margin-left: -5vw;
  clear: both; }

/* Título da seção FAQ. */
.faq-section__title {
  text-align: center;
  font-size: 2.5vw;
  line-height: 1.3;
  font-weight: 800;
  color: #FFF;
  margin-bottom: 2vw; }
  @media (max-width: 768px) {
    .faq-section__title {
      margin-bottom: 6vw; } }

/* Container dos itens do FAQ. */
.faq-container {
  width: 100%;
  max-width: 60vw;
  margin: 0 auto; }

/* Cada item individual do FAQ (pergunta + resposta). */
.faq-item {
  width: 100%;
  border-bottom: 1px solid #ddd;
  margin-bottom: 1vw; }
  .faq-item ul, .faq-item li {
    color: #FFF;
    font-size: 0.9vw; }
  .faq-item ul {
    margin: 0 0 0 1vw; }
  .faq-item li {
    margin: 0 0 1vw 0; }
  .faq-item:last-child {
    border-bottom: none; }

/* O botão que contém a pergunta. */
.faq-question {
  width: 100%;
  background-color: transparent;
  border: none;
  text-align: left;
  padding: 1vw 0;
  font-size: 0.9vw;
  font-weight: 600;
  color: #FFF;
  position: relative;
  padding-right: 3vw; }
  .faq-question i {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5vw;
    transition: transform 0.3s ease; }

/* O container da resposta. */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out, padding 0.5s ease;
  padding: 0 1vw; }
  .faq-answer p {
    line-height: 1.5;
    color: #FFF; }

/* Estilos quando o item do FAQ está ativo/aberto. */
.faq-item.active .faq-question i {
  transform: translateY(-50%) rotate(90deg); }
.faq-item.active .faq-answer {
  max-height: 30vw;
  padding: 1vw 1vw 1.5vw 1vw; }

/* --- Media Queries para FAQ em Mobile --- */
@media (max-width: 768px) {
  .faq-section {
    padding: 12vw 5vw; }

  .faq-section__title {
    font-size: 6vw; }

  .faq-container {
    max-width: 100%; }

  .faq-item {
    margin: 4vw 0; }

  .faq-question {
    font-size: 4.5vw;
    padding-right: 8vw;
    padding-bottom: 4vw; }
    .faq-question i {
      font-size: 4.5vw; }

  /* Quando o item está ativo no mobile */
  .faq-item.active .faq-answer {
    max-height: 150vw; } }
/* --- Cabeçalho Principal --- */
/* Contém a logo e a navegação principal usando Grid Layout. */
.header {
  width: 100%;
  height: 6vw;
  background-color: #ffffff;
  margin-top: 2vh;
  padding: 0 2vw;
  box-shadow: 0 0.12vw 0.5vw rgba(0, 0, 0, 0.1);
  position: relative;
  border-radius: 1vh;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-column-gap: 1vw;
  align-items: center; }

/* --- Logo --- */
/* Define o tamanho e posicionamento da logo. */
.logo {
  width: 10vw;
  padding: 1vw 0; }
  .logo img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: left; }

/* --- Navegação Principal --- */
/* Estiliza a lista de links do menu. */
.main-nav {
  height: 6vw;
  justify-self: start; }
  .main-nav ul {
    list-style: none;
    height: 100%; }
    .main-nav ul li {
      float: left;
      height: 6vw;
      position: relative; }
      .main-nav ul li a, .main-nav ul li p {
        color: #333;
        text-decoration: none;
        font-size: 0.9vw;
        font-weight: 600;
        line-height: 6vw;
        padding: 0 1.5vw;
        display: block;
        transition: color 0.3s ease; }
        .main-nav ul li a:hover, .main-nav ul li p:hover {
          color: #2a6eb4; }
      .main-nav ul li i {
        font-size: 0.8vw;
        margin-left: 0.5vw;
        color: #2a6eb4;
        transition: transform 0.3s ease-in-out; }
      @media (min-width: 769px) {
        .main-nav ul li:hover .submenu {
          display: block; }
        .main-nav ul li:hover p i {
          transform: rotate(90deg); } }
  .main-nav .basicCTA {
    display: none; }

.socialLinks {
  align-self: center;
  justify-self: end;
  font-size: 1.2vw; }
  .socialLinks .fa {
    margin-right: 1.5vw; }
  .socialLinks img {
    height: 1vw;
    width: 1vw;
    object-fit: contain; }
  @media (max-width: 768px) {
    .socialLinks {
      grid-template-columns: min-content min-content min-content min-content;
      grid-column-gap: 4vw; }
      .socialLinks img {
        height: 4vw;
        width: auto; }
      .socialLinks a.fa {
        font-size: 5.5vw; }
      .socialLinks a {
        align-content: center; } }

/* --- Submenu --- */
/* O container que aparece no hover. Posicionado em relação ao .header. */
.submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 2vh;
  background-color: #ffffff;
  box-shadow: 0 0.5vh 1vh rgba(0, 0, 0, 0.1);
  padding: 3vh 3vw;
  display: none;
  z-index: 100;
  border-radius: 1vh; }
  .submenu::before {
    content: '';
    position: absolute;
    top: -2vh;
    left: 0;
    width: 100%;
    height: 2vh; }

/* --- Larguras e Alinhamentos Específicos dos Submenus --- */
/* O padrão é centralizado. Os itens nas pontas são alinhados para evitar overflow. */
#seo-menu .submenu {
  width: 60vw;
  left: 0;
  transform: translateX(-39.5%); }

#link-building-menu .submenu {
  width: 50vw;
  transform: translateX(-50%); }

#sites-menu .submenu {
  width: 55vw;
  left: auto;
  right: 0;
  transform: translateX(16%); }

#social-media-menu .submenu {
  width: 40vw;
  left: auto;
  right: 0;
  transform: translateX(50%); }

#blog-menu .submenu {
  width: 40vw;
  left: auto;
  right: 0;
  transform: translateX(50%); }

@media (min-width: 769px) {
  #seo-menu:hover #sub-menu-seo, #link-building-menu:hover #sub-menu-link-building, #sites-menu:hover #sub-menu-sites, #blog-menu:hover #sub-menu-blog {
    color: #2a6eb4; } }
@media (max-width: 768px) {
  #seo-menu:active #sub-menu-seo, #link-building-menu:active #sub-menu-link-building, #sites-menu:active #sub-menu-sites, #blog-menu:active #sub-menu-blog {
    color: #FFF; } }
/* --- Colunas do Submenu --- */
/* Cria as colunas dentro do submenu. */
.submenu-column {
  width: 33%;
  float: left; }
  .submenu-column:last-child {
    margin-left: 1%; }
  .submenu-column ul {
    list-style: none;
    height: auto; }
    .submenu-column ul li {
      float: none;
      height: auto;
      width: 100%; }
      .submenu-column ul li a {
        line-height: 1.5;
        font-size: 0.9vw;
        font-weight: 500;
        padding: 1.5vh 0; }
      .submenu-column ul li .gradient-text {
        margin-right: 0.25vw; }

.showBannerNavBar {
  width: 100%;
  height: 14vw;
  background-color: #333;
  border-radius: 0.25vw;
  float: left; }

#social-media-menu b {
  color: #0072ce; }
#social-media-menu .showBannerNavBar {
  height: 10vw; }

#blog-menu .showBannerNavBar {
  height: 10vw; }

@media (max-width: 768px) {
  .showBannerNavBar {
    width: 90%;
    height: 54vw;
    border-radius: 2.5vw;
    margin: 2vh 5%; }

  #blog-menu .showBannerNavBar, #social-media-menu .showBannerNavBar, #blog-menu .showBannerNavBar {
    height: 54vw; } }
/* --- Ícone do Menu Mobile (Hamburguer) --- */
.mobile-menu-icon {
  display: none;
  color: #333;
  font-size: 5vw; }

/* --- Btn Padrão Whatsapp --- */
@media (min-width: 769px) {
  .whatsappBtn {
    width: 15vw;
    padding: 0.75vw 1vw;
    display: grid;
    align-items: center;
    align-content: center;
    background-color: #FFF;
    border-radius: 0.5vw;
    box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.2);
    position: fixed;
    z-index: 999;
    bottom: 2.5vw;
    right: 10vw; }
    .whatsappBtn p {
      text-align: center;
      line-height: 1;
      margin-bottom: 0px;
      display: grid;
      grid-template-columns: auto;
      -webkit-user-select: none;
      /* Safari */
      -ms-user-select: none;
      /* IE 10 and IE 11 */
      user-select: none;
      /* Standard syntax */ }
      .whatsappBtn p .fa-whatsapp {
        height: 4.5vw;
        width: 4.5vw;
        background-color: #22D343;
        display: grid;
        justify-content: center;
        justify-items: center;
        align-content: center;
        align-items: center;
        border-radius: 4.5vw;
        box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.2);
        position: absolute;
        right: -5.25vw;
        top: -1.25vw;
        color: #FFF;
        font-size: 2.5vw; } }
/* --- Media Query para Mobile (Telas até 768px) --- */
@media (max-width: 768px) {
  .header {
    width: 85%;
    height: 22vw;
    padding: 0 5vw;
    border-radius: 2vw;
    margin-top: 0px;
    bottom: 5vw;
    position: fixed;
    z-index: 999;
    align-content: center;
    grid-template-columns: 1fr auto; }

  .logo {
    width: 40vw;
    height: 10vh; }

  .main-nav {
    display: none;
    position: absolute;
    top: 12vh;
    left: 0;
    width: 90vw;
    border-radius: 2vw;
    background-color: #ffffff;
    z-index: 99;
    height: auto;
    justify-self: unset; }
    .main-nav.active {
      display: block; }
    .main-nav ul {
      height: auto; }
      .main-nav ul li {
        float: none;
        width: 100%;
        height: auto;
        border-bottom: 1px solid #f0f0f0;
        position: static; }
        .main-nav ul li:last-child {
          border-bottom: none; }
        .main-nav ul li a, .main-nav ul li p {
          line-height: 1.5;
          font-size: 4vw;
          padding: 5vw;
          background-color: #ffffff;
          transition: background-color 0.3s ease; }
        .main-nav ul li p {
          margin-bottom: 0px; }
        .main-nav ul li.open > a, .main-nav ul li.open > p {
          background-color: #001e62;
          color: #FFF; }
        .main-nav ul li i {
          font-size: 4vw;
          float: right;
          margin-right: 5vw;
          transition: transform 0.3s ease-in-out; }
        .main-nav ul li i.fa-whatsapp {
          margin-right: 36vw;
          font-size: 6vw; }
        .main-nav ul li.open > p i {
          transform: rotate(90deg); }
    .main-nav .first a {
      border-radius: 2vw 2vw 0 0; }
    .main-nav .last a, .main-nav .last.open a.last-link, .main-nav .li-last-link, .main-nav .last-link, .main-nav .last-link ul, .main-nav .last {
      border-radius: 0 0 2vw 2vw; }
    .main-nav .last.open a {
      border-radius: 0px; }
    .main-nav .basicCTA {
      display: grid; }

  .mobile-menu-icon {
    display: block; }

  .submenu {
    position: static;
    width: 100%;
    box-shadow: none;
    padding: 0;
    margin-top: 0;
    border-radius: 0;
    display: none;
    transform: none; }

  .main-nav ul li.open .submenu {
    display: block; }

  .main-nav.active {
    max-height: 70vh;
    overflow: hidden; }

  .main-nav.active, ul.firstLast {
    width: 100%;
    overflow: auto;
    border-radius: 2vw;
    box-shadow: 0 0vh 1vw rgba(0, 0, 0, 0.1);
    bottom: 24vw;
    top: unset; }

  #seo-menu .submenu, #link-building-menu .submenu, #sites-menu .submenu, #blog-menu .submenu, #social-media-menu .submenu {
    transform: translateX(0);
    width: 100%; }

  .last .submenu {
    border-radius: 0 0 2vw 2vw; }

  .submenu-column {
    width: 100%;
    float: none;
    margin-right: 3%; }
    .submenu-column ul li a, .submenu-column ul li p {
      font-size: 3.5vw;
      padding: 2vh 10vw;
      background-color: #f9f9f9;
      transition: background-color 0.3s ease; }
      .submenu-column ul li a:hover, .submenu-column ul li p:hover {
        background-color: #e9e9e9; }
    .submenu-column ul li p {
      margin-bottom: 0px; }

  .submenu-column:last-child {
    margin-left: 0px; }

  .whatsappBtn {
    width: 85%;
    height: 10vw;
    padding: 0px 5vw;
    background: #22D343;
    display: grid;
    align-content: center;
    align-items: center;
    border-radius: 1.75vw;
    box-shadow: 0 0.5vh 1vh rgba(0, 0, 0, 0.1);
    z-index: 997;
    position: fixed;
    bottom: 29vw;
    margin-left: 0; }
    .whatsappBtn p {
      display: grid;
      grid-template-columns: min-content auto;
      align-content: center;
      align-items: center;
      grid-column-gap: 3vw;
      font-size: 4vw;
      color: #FFF;
      line-height: 1;
      margin-bottom: 0px; }
      .whatsappBtn p .fa-whatsapp {
        font-size: 6vw;
        color: #FFF; } }
footer {
  width: 100%;
  min-height: 8vw;
  background-color: #ffffff;
  padding: 2vw;
  box-shadow: 0 -0.05vh 1vh rgba(0, 0, 0, 0.1);
  border-radius: 0px;
  display: grid;
  grid-template-columns: 1fr max-content max-content max-content 1fr;
  grid-column-gap: 5vw;
  align-items: start;
  align-content: start;
  position: absolute;
  left: 0; }
  footer * {
    color: #333; }
  footer .fa {
    color: #0a2351;
    font-weight: 800; }
  footer li a {
    font-weight: 500; }
  footer a {
    text-decoration: none; }
  footer h4 {
    font-size: 1.1vw;
    color: #0a2351;
    margin: 0.35vw 0; }
    @media (max-width: 768px) {
      footer h4 {
        font-size: 5vw;
        margin: 6vw 0; } }

@media (max-width: 768px) {
  footer {
    grid-template-columns: 1fr;
    padding: 6vw 6vw 32vw 6vw; } }
.boxContentFooter {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  align-content: start;
  justify-content: start;
  justify-items: start;
  grid-row-gap: 1vw; }
  .boxContentFooter ul, .boxContentFooter li {
    width: 100%;
    list-style: none;
    font-size: 0.9vw; }
  .boxContentFooter ul {
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 1vw; }
  @media (max-width: 768px) {
    .boxContentFooter ul {
      grid-row-gap: 4vw; }
    .boxContentFooter li {
      font-size: 4vw; } }

.boxContentFooter.one {
  width: 100%;
  align-self: start; }
  @media (max-width: 768px) {
    .boxContentFooter.one {
      align-self: center; } }
  .boxContentFooter.one figure {
    width: 100%; }
  .boxContentFooter.one p {
    width: 100%;
    text-align: center; }
    @media (max-width: 768px) {
      .boxContentFooter.one p {
        text-align: left; } }

.boxContentFooter.five {
  justify-content: start;
  justify-items: start; }
  .boxContentFooter.five svg {
    height: 1.1vw;
    width: 1.1vw;
    color: #0a2351;
    fill: #0a2351; }
  .boxContentFooter.five .fa {
    font-size: 1.1vw;
    color: #0a2351; }
  .boxContentFooter.five ul {
    grid-template-columns: auto auto auto auto;
    grid-column-gap: 1vw;
    justify-content: start;
    justify-items: start; }
  @media (max-width: 768px) {
    .boxContentFooter.five svg {
      height: 6vw;
      width: auto; }
    .boxContentFooter.five .fa {
      font-size: 6vw; }
    .boxContentFooter.five li {
      margin-right: 4vw; } }

.logo-footer {
  height: 7vw;
  width: 100%;
  object-fit: contain; }
  @media (max-width: 768px) {
    .logo-footer {
      height: 24vw;
      margin: 6vw 0; } }

/* estilização form básico de contato */
.basicContactForm {
  display: none; }

.basicContactForm.active {
  display: block;
  height: auto;
  width: 24vw;
  background-color: #FFF;
  padding: 2vw 1vw;
  border-radius: 0.4vw;
  box-shadow: 0 0.5vh 1vh rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: 0px;
  margin-top: 0px;
  transform: translate(-50%, -50%);
  z-index: 998; }
  .basicContactForm.active .logoBasicForm {
    width: 100%;
    height: 3vw;
    object-fit: contain;
    object-position: center;
    margin: 0 0 2vw 0; }
  .basicContactForm.active input {
    width: 100%;
    height: 2vw;
    font-size: 0.9vw;
    padding: 0 0.5vw 0 0.5vw;
    display: grid;
    justify-content: center;
    align-content: center;
    border-style: solid;
    border-width: 0px;
    border-radius: 0.3vw;
    outline: none;
    box-shadow: 0 0vh 0.2vw rgba(0, 0, 0, 0.1);
    margin-bottom: 1vw; }
  .basicContactForm.active input:focus-visible {
    outline: none; }
  .basicContactForm.active .termsP {
    width: 100%;
    float: left; }
    .basicContactForm.active .termsP input[type='radio'] {
      height: 0.8vw;
      width: 0.8vw;
      display: inline-block;
      margin: 0px; }
  .basicContactForm.active button {
    width: 100%;
    height: auto;
    background-color: #2a6eb4;
    padding: 0.3vw 0;
    border-width: 0px;
    border-radius: 0.3vw;
    color: #FFF;
    font-size: 0.9vw; }
  .basicContactForm.active #closeBasicContactForm {
    height: 1.5vw;
    width: 1.5vw;
    background: red;
    color: #FFF;
    font-size: 1.4vw;
    line-height: 0;
    display: grid;
    justify-content: center;
    align-content: center;
    border-radius: 1vw;
    transform: rotate(45deg);
    position: absolute;
    right: -0.75vw;
    top: -0.75vw; }
  @media (max-width: 768px) {
    .basicContactForm.active {
      width: 80vw;
      padding: 8vw 4vw;
      border-radius: 2vw; }
      .basicContactForm.active .logoBasicForm {
        height: 12vw;
        margin: 0 0 8vw 0; }
      .basicContactForm.active input {
        width: 95%;
        height: 8vw;
        padding-left: 3vw;
        font-size: 4vw;
        border-radius: 1vw;
        box-shadow: 0 0vh 0.6vw rgba(0, 0, 0, 0.2);
        margin: 0 5% 4vw 2.5%; }
      .basicContactForm.active .termsP {
        width: 90%;
        margin: 0 0 4vw 5%; }
        .basicContactForm.active .termsP input[type="radio"] {
          height: 5vw;
          width: 5vw;
          margin: 0.5vw 30vw 0 0; }
      .basicContactForm.active button {
        width: 90%;
        padding: 2.5vw 0;
        font-size: 4vw;
        border-radius: 1vw;
        margin-left: 5%; }
      .basicContactForm.active #closeBasicContactForm {
        height: 7vw;
        width: 7vw;
        font-size: 6vw;
        border-radius: 7vw;
        right: -3.5vw;
        top: -3.5vw; } }

.basicContactFormNotify.active {
  width: 29vw;
  padding: 1vw 1vw;
  background-color: #0a2351;
  display: grid;
  align-items: center;
  align-content: center;
  text-align: center;
  color: #FFF;
  border-radius: 0.3vw;
  box-shadow: 0 0.5vh 1vh rgba(0, 0, 0, 0.1);
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  animation: fadeInOut 2s ease forwards; }
  @media (max-width: 768px) {
    .basicContactFormNotify.active {
      width: 95vw;
      border-radius: 1vw; } }
  .basicContactFormNotify.active p {
    margin: 0px; }

@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translate(-50%, -60%); }
  10%, 90% {
    opacity: 1;
    transform: translate(-50%, -50%); }
  100% {
    opacity: 0;
    transform: translate(-50%, -40%); } }
/* estilização geral */
.popUpsBackground.active {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 996;
  background-color: rgba(0, 0, 0, 0.5); }

main {
  position: relative;
  z-index: 1; }

/* --- Seção 1 --- */
/* Estiliza o container principal da seção. */
.home-section-1 {
  width: 100%;
  min-height: 22vw;
  align-content: center;
  padding: 0 22vw 0 0;
  float: left; }

/* --- Texto de Impacto (Título) --- */
/* Estiliza o H1. */
.home-section-1__text {
  font-size: 2.3vw;
  line-height: 1.3;
  font-weight: 800;
  color: #333; }

/* --- Seção de Scrolling Banners --- */
/* Estiliza o container principal da seção de banners. */
.home-scrolling-banners {
  width: 100%;
  padding: 0 0 3vw 0;
  float: left;
  position: relative; }

/* Wrapper que esconde o overflow e cria a máscara para o carrossel. */
.home-scrolling-wrapper {
  width: 100%;
  overflow: hidden; }

/* A faixa que contém os banners e que será animada. */
.home-scrolling-track {
  transition: transform 0.5s ease-in-out;
  white-space: nowrap;
  transform: translateX(0); }

.home-scrolling-banner:first-child {
  margin-left: 0; }

/* Estiliza cada banner individual. */
.home-scrolling-banner {
  width: 70vw;
  height: 25vw;
  margin: 0 1vw 0 0;
  border-radius: 0.5vw;
  overflow: hidden;
  display: inline-block;
  white-space: normal; }
  .home-scrolling-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover; }

/* Estilo para as setas de navegação (Elemento BEM). */
.home-scrolling-banners__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  width: 2.5vw;
  height: 2.5vw;
  border-radius: 50%;
  text-align: center;
  line-height: 0;
  display: grid;
  justify-content: center;
  justify-items: center;
  align-items: center;
  align-content: center;
  font-size: 1.1vw;
  transition: background-color 0.3s ease;
  z-index: 10;
  /* Modificador para a seta de voltar. */
  /* Modificador para a seta de avançar. */ }
  @media (max-width: 768px) {
    .home-scrolling-banners__arrow {
      width: 11vw;
      height: 11vw;
      font-size: 4vw; } }
  .home-scrolling-banners__arrow:hover {
    background-color: #0a2351; }
  .home-scrolling-banners__arrow--prev {
    left: 2vw; }
  .home-scrolling-banners__arrow--next {
    right: 2vw; }

/* --- Seção 2: Galeria e Texto --- */
/* Estiliza o container da seção com galeria de imagens e texto. */
.home-section-2 {
  width: 100%;
  padding: 3vw 0;
  position: relative;
  float: left;
  clear: both; }

/* --- Galeria de Imagens --- */
/* Estiliza a coluna da galeria de imagens, flutuando à esquerda. */
.home-section-2__gallery {
  height: 30vw;
  width: 48%;
  float: left; }
  .home-section-2__gallery img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    opacity: 0.8;
    z-index: -1; }

/* --- Bloco de Texto --- */
/* Estiliza a coluna de texto, flutuando à direita. */
.home-section-2__text {
  width: 48%;
  position: relative;
  z-index: 1;
  float: left;
  margin-left: 4%; }
  .home-section-2__text h2 {
    font-size: 1vw;
    line-height: 1.3;
    font-weight: 800;
    color: #333;
    margin-bottom: 1vw; }
    @media (max-width: 768px) {
      .home-section-2__text h2 {
        margin-bottom: 6.5vw; } }
    .home-section-2__text h2 b {
      font-size: 2.5vw; }
  .home-section-2__text p {
    line-height: 1.5;
    color: #333; }

/* --- Seção 3: Grade de Itens --- */
/* Estiliza a seção que contém um título e uma grade de placeholders. */
.home-section-3 {
  width: 100%;
  padding: 3vw 0 3vw 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 1vw;
  position: relative;
  float: left;
  clear: both;
  z-index: 1; }
  .home-section-3 .cta-background-white {
    justify-self: center;
    align-self: center;
    grid-column-start: 1;
    grid-column-end: 5;
    border-color: #0a2351;
    color: #0a2351 !important; }

/* --- Título da Seção --- */
/* Estiliza o título centralizado da seção. */
.home-section-3__title {
  font-size: 1vw;
  line-height: 1.3;
  font-weight: 800;
  color: #333;
  grid-column-start: 1;
  grid-column-end: 5;
  margin-bottom: 3vw; }
  .home-section-3__title b {
    font-size: 2.5vw; }

.cards-section-3 {
  width: 100%;
  min-height: 10vw; }
  .cards-section-3 * {
    color: #333;
    line-height: 1.5; }
  .cards-section-3 h4 {
    width: 100%;
    margin-bottom: 1vw;
    display: grid;
    grid-column-gap: 0.5vw;
    grid-template-columns: 1fr;
    justify-content: center;
    font-size: 1.1vw;
    font-weight: 800;
    color: #001e62; }
  .cards-section-3 figure.box-icon-1-section-3 {
    height: 2.4vw;
    width: 2.4vw;
    margin: 0 0 1.5vw 0; }
    .cards-section-3 figure.box-icon-1-section-3 img {
      height: 100%;
      width: 100%;
      object-fit: contain;
      object-position: center; }

/* --- Seção 4 --- */
/* --- Bloco de Texto --- */
/* Estiliza a coluna de texto. */
.section-4-home .first-content-section-4-home__text {
  float: left;
  width: 48%; }
  .section-4-home .first-content-section-4-home__text h2 {
    font-size: 1vw;
    line-height: 1.3;
    font-weight: 800;
    color: #333;
    margin-bottom: 2.5vw; }
    .section-4-home .first-content-section-4-home__text h2 b {
      font-size: 2.5vw; }
  .section-4-home .first-content-section-4-home__text p {
    line-height: 1.5; }
  .section-4-home .first-content-section-4-home__text .first {
    margin-top: 15vw; }
  .section-4-home .first-content-section-4-home__text .first-title {
    line-height: 1.2;
    margin-top: calc(-6.2vw + -3vw); }

/* --- Imagem Placeholder --- */
/* Estiliza a coluna da imagem. */
.first-content-section-4-home__image {
  float: right;
  margin: -20vw 0 3vw 0;
  width: 48%;
  height: 40vw;
  background-color: #e0e0e0;
  border-radius: 0.5vw; }

/* --- Seção 5: Grade de 3 Colunas --- */
/* Estiliza uma seção com um título centralizado e uma grade de 3 itens. */
.section-4-home {
  width: calc(100% + 10vw);
  padding: 3.5vw 5%;
  background-color: #001e62;
  float: left;
  clear: both;
  margin: 16.5vw 0 0 -5.6%; }
  .section-4-home p, .section-4-home h2, .section-4-home h3 {
    color: #FFF; }
  .section-4-home h3 {
    font-size: 1.25vw;
    margin-bottom: 1vw; }

/* --- Título da Seção --- */
.section-4-home__title {
  width: 100%;
  float: left;
  text-align: center;
  font-size: 2.5vw;
  line-height: 1.3;
  font-weight: 800;
  color: #333;
  margin: 3vw 0 4.5vw 0; }

/* --- Grade --- */
.section-4-home__grid {
  width: 100%;
  padding: 0 5%;
  display: grid;
  grid-template-columns: 25% 25% 25%;
  justify-content: center;
  justify-items: center;
  grid-column-gap: 5%;
  float: left; }
  .section-4-home__grid .cta-background-blue {
    justify-self: center;
    align-self: center;
    grid-column-start: 1;
    grid-column-end: 4;
    margin-top: 1vw; }

/* --- Item da Grade --- */
.section-4-home__grid-item {
  float: left;
  width: 100%;
  min-height: 45vw; }
  .section-4-home__grid-item img {
    height: 30vw;
    width: 100%;
    background-color: #e0e0e0;
    object-fit: cover, contain;
    object-position: center;
    border-radius: 0.5vw;
    float: left; }
  .section-4-home__grid-item * {
    float: left; }
  .section-4-home__grid-item h3 {
    font-size: 1.4vw;
    color: #FFF;
    margin: 1.75vw 0; }
    @media (max-width: 768px) {
      .section-4-home__grid-item h3 {
        margin: 4.5vw 0; } }
  .section-4-home__grid-item p {
    color: #FFF; }
  .section-4-home__grid-item:last-child {
    margin-right: 0; }

/* --- Seção 5: Abas Verticais / Dropdown Mobile --- */
/* Estiliza a seção de abas verticais com conteúdo dinâmico. */
.section-5-home {
  width: 100%;
  padding: 3vw 0 3vw 0;
  float: left;
  clear: both; }

.section-5-home__title {
  text-align: left;
  font-size: 1vw;
  line-height: 1.3;
  font-weight: 800;
  color: #333;
  margin-bottom: 1vw; }
  .section-5-home__title b {
    font-size: 2.5vw; }
  @media (max-width: 768px) {
    .section-5-home__title {
      margin-bottom: 7vw; } }

.section-5-home__description, .section-5-home__description2 {
  text-align: left;
  font-size: 0.9vw;
  line-height: 1.5;
  color: #333;
  width: 80%; }
  @media (max-width: 768px) {
    .section-5-home__description, .section-5-home__description2 {
      font-size: 4vw;
      width: 100%;
      margin-bottom: 4vw; } }

.section-5-home__description2 {
  margin: 0 0 3vw 0; }

/* Container principal para o sistema de abas. */
.tabs-container {
  width: 100%;
  float: left; }

/* O botão do dropdown mobile fica escondido no desktop */
.tabs-nav-mobile-trigger {
  display: none; }

/* Navegação das abas (botões). */
.tabs-nav {
  width: 20%;
  float: left;
  list-style: none; }
  .tabs-nav li {
    width: 100%;
    margin-bottom: 1vw; }
  .tabs-nav .tab-button {
    height: 5vw;
    width: 100%;
    padding: 2vw 1.5vw;
    border: 1px solid #ddd;
    background-color: #fff;
    text-align: center;
    line-height: 1;
    font-size: 0.9vw;
    font-weight: 600;
    color: #333;
    border-radius: 0.5vw;
    transition: background-color 0.3s ease, color 0.3s ease; }
    .tabs-nav .tab-button:hover {
      background-color: #f0f0f0; }
    .tabs-nav .tab-button.active {
      background-color: #0a2351;
      color: #ffffff;
      border-color: #0a2351; }

/* Container para os painéis de conteúdo. */
.tabs-content {
  width: 78%;
  float: right; }
  .tabs-content .tab-pane {
    display: none;
    background-color: #f9f9f9;
    padding: 1.5vw 2.5vw;
    border-radius: 0.5vw;
    min-height: 26vw;
    float: left; }
    .tabs-content .tab-pane .titleTabContent {
      font-size: 1.3vw;
      line-height: 1.3;
      font-weight: 700;
      color: #333;
      margin-bottom: 1vw; }
      @media (max-width: 768px) {
        .tabs-content .tab-pane .titleTabContent {
          font-size: 5vw; } }
    .tabs-content .tab-pane p {
      line-height: 1.5;
      color: #333; }
    .tabs-content .tab-pane.active {
      display: block; }
    .tabs-content .tab-pane .cta-background-white {
      color: #333;
      font-weight: 800;
      padding: 0px;
      border-width: 0px; }

.smartphone-block, .smartphone-grid {
  display: none; }

/* --- Media Queries para Mobile --- */
@media (max-width: 768px) {
  .smartphone-block {
    display: block; }

  .smartphone-grid {
    display: grid; }

  .desktop {
    display: none; }

  /* --- Seção 1 --- */
  .home-section-1 {
    padding: 10vw 0; }

  .home-section-1__content {
    grid-template-columns: 1fr; }

  .home-section-1__text {
    font-size: 6vw; }

  .home-section-1__description p {
    width: 100%; }

  /* --- Seção de Scrolling Banners --- */
  .home-scrolling-banners {
    padding: 0 0 8vw 0; }

  .home-scrolling-banner {
    width: 89vw;
    height: 70vw;
    margin: 0; }

  /* --- Seção 2 --- */
  .home-section-2 {
    padding: 8vw 0; }

  /* --- Seção 3 --- */
  .home-section-3 {
    padding: 10vw 0;
    grid-template-columns: 1fr; }

  .cards-section-3 {
    grid-column-start: 1;
    margin-top: 5vw; }

  .home-section-3__title {
    font-size: 4vw;
    grid-column-end: 2; }
    .home-section-3__title b {
      font-size: 6vw; }

  .cards-section-3 figure.box-icon-1-section-3 {
    height: 8vw;
    width: 8vw;
    margin: 0 0 4vw 0; }

  .cards-section-3 h4 {
    font-size: 4vw; }

  .home-section-3 .cta-background-white {
    grid-column-end: 2;
    margin-top: 5vw;
    margin-left: 0px; }

  /* --- Seção 4 --- */
  .first-content-section-4-home__image {
    float: none;
    width: 100%;
    height: 65vw;
    margin: 5vw 0; }

  .first-content-section-4-home__text {
    float: none;
    width: 100%; }
    .first-content-section-4-home__text h2 {
      font-size: 8vw; }
    .first-content-section-4-home__text .first, .first-content-section-4-home__text .first-title {
      margin-top: 0;
      color: #333; }

  /* --- Grade de 3 Colunas --- */
  .section-4-home {
    padding: 12vw 0;
    margin-top: 0;
    width: calc(100% + 10vw);
    margin-left: 5.5%; }

  .section-4-home__title {
    font-size: 6vw;
    text-align: left;
    width: 100%;
    padding: 0 5vw;
    margin: 10vw 0 5vw 0; }

  .section-4-home__grid {
    grid-template-columns: 1fr; }

  .section-4-home__grid-item {
    float: none;
    width: 100%;
    height: 70vw;
    margin-right: 0;
    margin-bottom: 4vw; }
    .section-4-home__grid-item:last-child {
      margin-bottom: 0; }
    .section-4-home__grid-item h3 {
      font-size: 6vw; }

  /* --- Seção 5: Dropdown Mobile --- */
  .section-5-home {
    padding: 9vw 0 12vw 0; }

  .section-5-home__title {
    font-size: 4vw; }
    .section-5-home__title b {
      font-size: 6vw;
      margin-top: 9vw; }

  .section-5-home__description {
    font-size: 4vw;
    width: 100%;
    margin-bottom: 6vw; }

  .tabs-container {
    position: relative;
    margin-top: 3vw; }

  .tabs-nav {
    display: none;
    position: absolute;
    top: 14vw;
    left: 0;
    width: 100%;
    background-color: #fff;
    border: 0px solid #ddd;
    border-radius: 0 0 2.5vw 2.5vw;
    box-shadow: 0 0.5vh 1vh rgba(0, 0, 0, 0.1);
    z-index: 100; }
    .tabs-nav.open {
      display: block; }
    .tabs-nav li {
      float: none;
      width: 100%;
      padding: 0;
      margin-bottom: 0px; }
    .tabs-nav li.last {
      border-radius: 0 0 2.5vw 2.5vw; }
    .tabs-nav .tab-button {
      width: 100%;
      height: auto;
      text-align: left;
      padding: 6vw 4vw;
      font-size: 4vw;
      border: none;
      border-bottom: 1px solid #f0f0f0;
      background-color: #fff;
      border-radius: 0; }
      .tabs-nav .tab-button.active {
        font-weight: 500;
        color: #FFF; }
      .tabs-nav .tab-button:hover {
        background-color: #f9f9f9; }
    .tabs-nav li:last-child .tab-button {
      border-bottom: none;
      border-radius: 0 0 2.5vw 2.5vw; }

  .tabs-nav-mobile-trigger {
    display: block;
    width: 100%;
    padding: 6vw 4vw;
    background-color: #0a2351;
    color: #ffffff;
    border: none;
    border-radius: 2vw;
    font-size: 4vw;
    font-weight: 600;
    text-align: left; }
    .tabs-nav-mobile-trigger i {
      float: right;
      line-height: 1.3;
      transition: transform 0.3s ease; }
    .tabs-nav-mobile-trigger.trigger-active {
      border-radius: 2vw 2vw 0 0; }
    .tabs-nav-mobile-trigger.trigger-active i {
      transform: rotate(180deg); }

  .tabs-content {
    width: 100%;
    float: none;
    margin-top: 7vw; }
    .tabs-content .tab-pane {
      min-height: auto;
      padding: 5vw;
      border-radius: 2vw;
      float: left; }
      .tabs-content .tab-pane h3 {
        font-size: 6vw; } }
/* --- Seção de Cards --- */
.section-6-cards {
  width: 100%;
  padding: 0vw 0 3vw 0;
  float: left; }

/* --- Container da Seção --- */
.section-6-cards__container {
  width: 100%;
  max-width: 90vw;
  margin: 0 auto;
  text-align: left; }

/* --- Título da Seção --- */
.section-6-cards__title {
  font-size: 2.5vw;
  line-height: 1.3;
  font-weight: 800;
  text-align: left;
  color: #333;
  margin-bottom: 1.5vw; }

/* --- Descrição da Seção --- */
.section-6-cards__description {
  font-size: 0.9vw;
  line-height: 1.5;
  color: #333;
  max-width: 80%;
  margin: 0 0 0.5vw 0; }

/* --- Grade de Cards (ou wrapper do carrossel) --- */
.section-6-cards__grid {
  width: 100%;
  margin-top: 3vw;
  /* Adicione overflow: hidden para esconder os cards que estão fora da vista */
  overflow: hidden;
  /* Use position: relative para que a posição do slider (position: absolute) seja relativa a ele */
  position: relative;
  height: 11vw;
  /* Defina uma altura fixa para que o contêiner não encolha */ }

/* --- Contêiner do Slider (a parte que se move) --- */
.section-6-cards__slider {
  padding: 0.5vw 0;
  position: absolute;
  top: 0;
  left: 0;
  /* Use white-space: nowrap para forçar os cards a ficarem em uma única linha */
  white-space: nowrap;
  /* Adicione uma transição suave para o movimento */
  transition: left 0.5s ease-in-out; }

/* --- Card Individual --- */
.section-6-cards__card {
  /* Use display: inline-block para que os cards fiquem um ao lado do outro */
  display: inline-block;
  vertical-align: top;
  width: 10vw;
  height: 9vw;
  padding: 1.5vw;
  background-color: #FFF;
  border-radius: 0.5vw;
  box-shadow: 0 0px 0.25vw rgba(0, 0, 0, 0.1);
  margin-right: 1%; }
  .section-6-cards__card img {
    width: 100%;
    height: 100%;
    border-radius: 0.5vw;
    object-fit: contain; }

.section-6-cards__card.ubersuggest {
  background-color: #F0572D;
  padding: 0px; }

.section-6-cards__card.a-hrefs {
  background-color: #044ADB; }

/* --- Media Query para Mobile --- */
@media (max-width: 768px) {
  .section-6-cards {
    padding: 0 0 12vw 0; }

  .section-6-cards__container {
    max-width: 90vw; }

  .section-6-cards__title {
    font-size: 6vw;
    margin-bottom: 6vw; }

  .section-6-cards__description {
    font-size: 4vw;
    max-width: 100%;
    margin-bottom: 4vw; }

  .section-6-cards__grid {
    height: 72vw;
    /* Ajuste a altura para mobile */ }

  /* --- Cards no Mobile --- */
  .section-6-cards__card {
    width: 90vw;
    height: 70vw;
    border-radius: 2vw;
    box-shadow: 0 0px 2vw rgba(0, 0, 0, 0.1);
    margin-right: 3vw; } }
/*--- SEÇÃO 7 ---*/
.section-7-home {
  height: 25vw;
  width: 100%;
  float: left;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 1vw;
  margin: 1.5vw 0 0 0; }

.notebook-case {
  height: 22vw;
  width: 100%;
  object-fit: contain;
  object-position: center;
  align-self: center;
  margin-top: 1vw; }

h3.title-section7 {
  font-size: 1vw;
  margin: 1vw 0 0 0; }
  h3.title-section7 b {
    font-size: 2.5vw;
    float: left;
    margin: 0.5vw 0 1vw 0; }

.bodyText-section7 {
  width: 80%;
  margin-left: 1.5vw; }

@media (max-width: 768px) {
  .home-section-2__gallery {
    width: 100%;
    height: 80vw; }

  .home-section-2__text h2 {
    font-size: 4vw; }

  .home-section-2__text h2 b {
    font-size: 6vw; }

  .home-section-2__text {
    width: 100%;
    margin-left: 0px; }

  .cta-background-white {
    width: 100%;
    padding: 3vw 6vw;
    font-size: 4vw;
    border-radius: 1vw;
    margin-left: 0px; }

  .section-4-home {
    width: calc(100% + 14.4vw);
    padding: 13vw 0;
    margin-top: 0;
    margin-left: -8.5%; }

  .section-4-home .first-content-section-4-home__text {
    width: 90%;
    margin-left: 5%; }

  .first-content-section-4-home__image {
    border-radius: 2vw; }

  .section-4-home h3 {
    font-size: 5.5vw;
    margin: 9vw 0 3.5vw 0; } }
/* --- Estilização da Seção de Soluções --- */
.solucoes-seo {
  width: 100%;
  padding: 0 0 6vw 0;
  background-color: var(--background-light); }

.solucoes-seo__container {
  width: 100%;
  max-width: 90vw;
  margin: 0 auto; }

/* --- Cabeçalho da Seção (Título e Parágrafo) --- */
.solucoes-seo__header {
  text-align: left; }

.solucoes-seo__title {
  font-size: 1vw;
  font-weight: 800;
  line-height: 1.3;
  color: var(--brand-primary); }
  .solucoes-seo__title b {
    font-size: 2.5vw; }

.solucoes-seo__description {
  width: 80%;
  font-size: 0.9vw;
  line-height: 1.5;
  color: var(--text-light);
  margin: 1.5vw 0 0 0; }

/* --- Grid de Cards --- */
.solucoes-seo__grid {
  margin-top: 3vw;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5vw; }

/* --- Estilo Individual do Card --- */
.solucoes-seo__card {
  background-color: var(--white);
  border-radius: 1vw;
  border: 0.1vw solid var(--border-color);
  padding: 0px;
  /* Alterado de flex para grid */
  display: grid;
  /* Define o layout vertical: ícone, título, texto (que expande) e link */
  grid-template-rows: auto auto 1fr auto;
  transition: transform 0.3s ease, box-shadow 0.3s ease; }

.solucoes-seo__card-icon-wrapper {
  width: 2.4vw;
  height: 2.4vw;
  border-radius: 0.5vw;
  display: grid;
  place-items: center;
  margin-bottom: 1.5vw; }

.solucoes-seo__card-icon-wrapper svg {
  width: 2.4vw;
  height: 2.4vw;
  color: #0a2351; }

.solucoes-seo__card-title {
  font-size: 1.1vw;
  font-weight: 800;
  color: #001e62; }

.solucoes-seo__card-text {
  font-size: 0.9vw;
  line-height: 1.5;
  color: var(--text-light);
  margin-top: 0.8vw;
  color: #333; }

.solucoes-seo__card-link {
  font-size: 0.9vw;
  font-weight: 600;
  color: #001e62;
  text-decoration: none;
  transition: text-decoration 0.3s ease; }

/* --- Media Queries para Mobile --- */
@media (max-width: 768px) {
  .solucoes-seo {
    padding: 12vw 0; }

  .solucoes-seo__container {
    width: 100%;
    max-width: none; }

  .solucoes-seo__title {
    font-size: 4vw; }
    .solucoes-seo__title b {
      font-size: 6vw; }

  .solucoes-seo__description {
    font-size: 4vw;
    width: 100%;
    max-width: 100%;
    margin-top: 6vw; }

  .solucoes-seo__grid {
    grid-template-columns: 1fr;
    gap: 6vw;
    margin-top: 10vw; }

  .solucoes-seo__card {
    padding: 0px;
    border-radius: 2vw; }

  .solucoes-seo__card-icon-wrapper {
    width: 12vw;
    height: 12vw;
    border-radius: 2vw;
    margin-bottom: 5vw; }

  .solucoes-seo__card-icon-wrapper svg {
    width: 6vw;
    height: 6vw; }

  .solucoes-seo__card-title {
    font-size: 5vw; }

  .solucoes-seo__card-text {
    font-size: 4vw;
    margin-top: 3vw; }

  .solucoes-seo__card-link {
    margin-top: 6vw;
    font-size: 4vw; } }
.smartphone-block, .smartphone-grid {
  display: none; }

@media (max-width: 768px) {
  .smartphone-block {
    display: block; }

  .smartphone-grid {
    display: grid; }

  .desktop {
    display: none; }

  .section-4-home .first-content-section-4-home__text .first-title {
    margin-top: 0vw; }

  .section-4-home .first-content-section-4-home__text h2 {
    font-size: 4vw;
    color: #FFF; }
    .section-4-home .first-content-section-4-home__text h2 b {
      font-size: 6vw; }

  .section-7-home {
    height: auto;
    min-height: 60vw;
    padding-left: 5vw;
    padding-right: 5vw;
    grid-template-columns: 1fr;
    margin-top: 5vw; }

  .notebook-case {
    height: 60vw; }

  .section-4-home .title-section7 {
    width: 100%;
    float: left;
    margin: 5vw 0;
    font-size: 4vw; }
    .section-4-home .title-section7 b {
      font-size: 6vw; }

  .bodyText-section7 {
    width: 100%;
    margin: 0px; }

  .section-4-home .cta-background-blue {
    width: 100%;
    padding: 3vw;
    border-radius: 1vw;
    margin: 2vw 0px 0px 0px;
    font-size: 4vw; }

  .section-4-home__grid {
    grid-template-columns: 1fr;
    grid-column-gap: 0px;
    grid-template-rows: auto auto auto; }

  .section-4-home__grid-item {
    grid-column-start: 1;
    height: auto; }

  .section-4-home__grid-item img {
    height: 100vw;
    border-radius: 2vw; } }

/*# sourceMappingURL=home.css.map */