Componentes

                            
<header id="js-header" style="transform: translateY(0px);">
  <div class="container">
      <div class="row">
        <div class="col-12">
          <div class="nav-bar">
            <div class="logo">
              <a href="" title="Ir para a Página Inicial" rel="nofollow">
                <picture>
                  <source
                    srcset="https://www.ecowd.inf.br/cms/img/dropzone_upload/resized_14613f700d1e453_1631547405_200x.webp"
                    type="image/webp">
                  <source
                    srcset="https://www.ecowd.inf.br/cms/img/dropzone_upload/resized_14613f700d1e453_1631547405_200x.jpg"
                    type="image/png">
                  <img src="https://www.ecowd.inf.br/cms/img/dropzone_upload/resized_14613f700d1e453_1631547405_200x.webp" alt="Logo Website MODELO 2021" class="img-fluid" loading="lazy">
                </picture>

              </a>
            </div>
            <nav>

              <input class="menu-btn" type="checkbox" id="menu-btn">
              <label onclick="overlayLeft()" class="menu-icon" for="menu-btn">
              <span class="navicon"></span>
            </label>

              <div id="nav-list">

                <input class="menu-close" type="checkbox" id="menu-close">
                <label class="menu-close-btn" for="menu-close" onclick="menuToggle()">
            Fechar Menu
            </label>

                <ul>

                  <li><a href="" title="Ir para a página inicial">Página Inicial</a></li>
                  <li><a href="produtos"
                      title="Conhecer os produtos da NOME DA EMPRESA">Produtos</a></li>
                  <li><a href="galeria"
                      title="Portfólio com serviços da NOME DA EMPRESA">Galeria</a></li>
                  <li><a href="noticias"
                      title="Fique por dentro das novidades da NOME DA EMPRESA">Notícias</a>
                  </li>
                  <li><a href="videos" title="Veja os vídeos da NOME DA EMPRESA">Vídeos</a></li>
                  <li><a href="contato"
                      title="Entre em contato com a NOME DA EMPRESA">Contato</a></li>
                </ul>

              </div>

            </nav>
          </div>
          <!--box-nav-->
        </div>
        <!--12-->
      </div>
      <!--row-->
    </div>
    <!--container-->
  </header>
                            
                        

                          
<style>
/* NAVBAR  */

/* PASSO 01. Estilo Barra de Navegação Responsiva */

header {
  box-shadow: 0px 3px 12px rgb(0 0 0 / 10%);
  background-color: #fff;
  position: fixed;
  width: 100%;
  z-index: 999;
  transition: 0.5s all;
}

header .nav-bar {
  display: flex;
  height: 100%;
  position: relative;
  min-height: 90px;
  align-items: center;
}

header .nav-bar nav {
  margin: auto 0px auto auto;
}

header .nav-bar ul {
  padding: 0px;
  margin: 0px;
  list-style: none;
}

header .nav-bar ul>li {
  display: inline-block;
  margin: 0px 10px;
}

header .nav-bar li>a {
  color: #041c27;
  text-decoration: none;
  transition: 0.3s ease;
  padding: 5px 5px;
  font-size: 14px;
  font-weight: 600;
}

header .nav-bar li>a:hover {
  color: #107cac;
}

header .nav-bar ul>li:last-child {
  margin: 0px 0px 0px 6px;
}

header .btn-topbar {
  background-color: #CD3537;
  color: white;
  padding: 5px 20px;
}

.logo {
  position: absolute;
  margin-left: 30px;
}

.logo img {
  max-width: 200px;
}

/* OVERLAY CSS */

#js-header.overlay--left:after {
  content: "";
  background-color: rgb(0 0 0 / 80%);
  width: 100%;
  height: 110vh;
  display: block;
  position: fixed;
  pointer-events: unset;
  z-index: 998;
  top: -39px;
}

/* PASSO 02. ESTILOS MOBILE */

/* 02.1 Criando Ícone Hamburger */

header .menu-icon {
  cursor: pointer;
  display: none;
  float: right;
  padding: 28px 3px;
  position: relative;
  user-select: none;
}

header .menu-icon .navicon {
  background: #163d4f;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

header .menu-icon .navicon:before,
header .menu-icon .navicon:after {
  background: #163d4f;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

header .menu-icon .navicon:before {
  top: 5px;
}

header .menu-icon .navicon:after {
  top: -5px;
}

/* 02.2 Criando Animação Menu Hamburger */

header .menu-btn {
  display: none;
}

header .menu-btn:checked~.menu-icon .navicon {
  background: transparent;
}

header .menu-btn:checked~.menu-icon .navicon:before {
  transform: rotate(-45deg);
}

header .menu-btn:checked~.menu-icon .navicon:after {
  transform: rotate(45deg);
}

header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
  top: 0;
}

/* 02.3 Criando botão fechar */

header .menu-close {
  display: none;
}

header .menu-close-btn {
  background-color: #eee;
  color: #163d4f;
  padding: 5px;
  border-radius: 5px;
  margin: 5px 15px 5px auto;
  display: none;
  width: 140px;
  text-align: center;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}

/* 02.4 Manipulando lista para criar navbar slider */

@media (max-width: 992px) {
  /* Aplicar estilo para tela menor do que qualquer tela grande (laptop ou desk) */

  header .nav-bar #nav-list {
    position: fixed;
    top: 0;
    left: 0;
    width: 0vw;
    height: 100vh;
    z-index: 999;
    overflow-x: hidden;
    -webkit-transition: width 0.5s ease-in-out;
    -moz-transition: width 0.5s ease-in-out;
    -o-transition: width 0.5s ease-in-out;
    transition: width 0.5s ease-in-out;
    border-right: solid 1px #eee;
    background-color: #f9f9f9;
    box-shadow: 0px 0px 24px rgb(0 0 0 / 10%);
  }

  header .menu-btn:checked~#nav-list {
    width: 70vw;
  }

  header .nav-bar ul>li {
    display: block;
    margin: 0px;
    color: black;
  }

  header .nav-bar ul>li:last-child {
    margin: 0px;
  }

  header .nav-bar ul>li a {
    display: block;
    padding: 15px;
    border-bottom: solid 1px #ccc;
    color: black;
  }

  header .nav-bar ul>li:first-of-type a {
    border-top: solid 1px #ccc;
  }

  header .menu-close-btn {
    display: block;
  }

  header .menu-icon {
    display: block;
  }

  header .logo {
    max-width: 100px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto 0px;
    padding: 0px 10px;
    position: inherit;
  }

  header .logo::after {
    display: none;
  }

  .logo img {
    margin-left: 80px;
  }

}
</style>
                          
                        

                          
<script>
  // Scripts responsáveis por colocar um tamanho para a correção do fixed da Navbar
                  
  document.addEventListener("DOMContentLoaded", function() { // Depois que o documento HTMl é carregado, vamos colocar uma altura na Fixed Correction
    
    setTimeout(function(){ // Tempo para carregar todos os elementos que são link externos
    
      var fixedCorrection = document.getElementById("js-header").clientHeight;
  
      document.getElementById("fixedCorrection").style.height = fixedCorrection+"px";
    
      console.log(fixedCorrection);
    
    }, 1000);
    
  });
  
  // Script com função de checagem botão hamburger
  
  
  function menuToggle() {
  
    document.getElementById('menu-btn').checked = false;
    
    document.getElementById("js-header").classList.remove('overlay--left');
    
  }
  
  // Script para criar Overlay ao abrir navbar
  
  function overlayLeft() {
  
    if (document.getElementById('menu-btn').checked) {
        
      document.getElementById("js-header").classList.remove('overlay--left');
        
    } else {
        
      document.getElementById("js-header").classList.add('overlay--left');
        
    }
    
  }
</script>
                          
                        

                          
<header id="js-header">
  <div class="topbar" id="js-topbar">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <a
            href="#link-google-maps"
            target="_blank"
            title="Venha visitar nosso local físico - NOME EMPRESA"
            rel="noopener noreferrer nofollow"
          >
             <i class="fas fa-map-marker-alt"></i> Av. Trocar, n° 999, Cidade Trocar
          </a>
          <a
            href="https://web.whatsapp.com/send?phone=5517999999999"
            target="_blank"
            title="Falar no WhatsApp - NOME EMPRESA"
            rel="noopener noreferrer nofollow"
          >
             <i class="fab fa-whatsapp"></i> +55 (88) 99911-0253
          </a>
          <!-- REDES SOCIAIS, DESCOMENTAR PARA HAB. -->
          <!--<a
            href="#"
            target="_blank"
            title="Ir para Perfil do Instagram - NOME EMPRESA"
            rel="noopener noreferrer nofollow"
          >
            <i class="fab fa-instagram" aria-hidden="true"></i>
          </a>
          <a
            href="#"
            target="_blank"
            title="Ir para a Página do Facebook - NOME EMPRESA"
            rel="noopener noreferrer nofollow"
          >
            <i class="fab fa-facebook-square" aria-hidden="true"></i>
          </a>-->
          <a
            href="contato"
            title="Ir para Página de Contato"
            rel="noopener noreferrer nofollow"
            class="btn btn-topbar"
            >ENTRAR EM CONTATO</a
          >
        </div>
        <!--12-->
      </div>
      <!--row-->
    </div>
    <!--container-->
  </div>
  <!--topbar-->
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="nav-bar">
          <div class="logo">
            <a href="" title="Ir para a Página Inicial" rel="nofollow">
              <picture>
                <source
                  srcset="
                    https://www.ecowd.inf.br/cms/img/dropzone_upload/resized_14613f700d1e453_1631547405_200x.webp
                  "
                  type="image/webp"
                />
                <source
                  srcset="
                    https://www.ecowd.inf.br/cms/img/dropzone_upload/resized_14613f700d1e453_1631547405_200x.jpg
                  "
                  type="image/png"
                />
                <img
                  src="https://www.ecowd.inf.br/cms/img/dropzone_upload/resized_14613f700d1e453_1631547405_200x.webp"
                  alt="Logo Website MODELO 2021"
                  class="img-fluid"
                  loading="lazy"
                />
              </picture>
            </a>
          </div>
          <nav>
            <input class="menu-btn" type="checkbox" id="menu-btn" />
            <label onclick="overlayLeft()" class="menu-icon" for="menu-btn">
              <span class="navicon"></span>
            </label>
            <div id="nav-list">
              <input class="menu-close" type="checkbox" id="menu-close" />
              <label
                class="menu-close-btn"
                for="menu-close"
                onclick="menuToggle()"
              >
                Fechar Menu
              </label>
              <ul>
                <li>
                  <a href="" title="Ir para a página inicial">Página Inicial</a>
                </li>
                <li>
                  <a
                    href="produtos"
                    title="Conhecer os produtos da NOME DA EMPRESA"
                    >Produtos</a
                  >
                </li>
                <li>
                  <a
                    href="galeria"
                    title="Portfólio com serviços da NOME DA EMPRESA"
                    >Galeria</a
                  >
                </li>
                <li>
                  <a
                    href="noticias"
                    title="Fique por dentro das novidades da NOME DA EMPRESA"
                    >Notícias</a
                  >
                </li>
                <li>
                  <a href="videos" title="Veja os vídeos da NOME DA EMPRESA"
                    >Vídeos</a
                  >
                </li>
                <li>
                  <a
                    href="contato"
                    title="Entre em contato com a NOME DA EMPRESA"
                    >Contato</a
                  >
                </li>
              </ul>
            </div>
          </nav>
        </div>
        <!--box-nav-->
      </div>
      <!--12-->
    </div>
    <!--row-->
  </div>
  <!--container-->
</header>

                          
                          

                        

                          
<style>
body {
  height: 3000px;
}

/* NAVBAR  */
/* PASSO 01. Estilo Barra de Navegação Responsiva */
header {
  box-shadow: 0px 3px 12px rgb(0 0 0 / 10%);
  background-color: #fff;
  position: fixed;
  width: 100%;
  z-index: 999;
  transition: 0.5s all;
}
header .nav-bar {
  display: flex;
  height: 100%;
  position: relative;
  min-height: 90px;
  align-items: center;
}
header .nav-bar nav {
  margin: auto 0px auto auto;
}
header .nav-bar ul {
  padding: 0px;
  margin: 0px;
  list-style: none;
}
header .nav-bar ul > li {
  display: inline-block;
  margin: 0px 10px;
}
header .nav-bar li > a {
  color: #041c27;
  text-decoration: none;
  transition: 0.3s ease;
  padding: 5px 5px;
  font-size: 14px;
  font-weight: 600;
}
header .nav-bar li > a:hover {
  color: #107cac;
}
header .nav-bar ul > li:last-child {
  margin: 0px 0px 0px 6px;
}
header .btn-topbar {
  background-color: #cd3537;
  color: white;
  padding: 5px 20px;
}
.logo {
  position: absolute;
  margin-left: 30px;
}
.logo img {
  max-width: 200px;
} /* OVERLAY CSS */
#js-header.overlay--left:after {
  content: "";
  background-color: rgb(0 0 0 / 80%);
  width: 100%;
  height: 110vh;
  display: block;
  position: fixed;
  pointer-events: unset;
  z-index: 998;
  top: -39px;
} /* PASSO 02. ESTILOS MOBILE */ /* 02.1 Criando Ícone Hamburger */
header .menu-icon {
  cursor: pointer;
  display: none;
  float: right;
  padding: 28px 3px;
  position: relative;
  user-select: none;
}
header .menu-icon .navicon {
  background: #163d4f;
  display: block;
  height: 2px;
  position: relative;
  transition: background 0.2s ease-out;
  width: 18px;
}
header .menu-icon .navicon:before,
header .menu-icon .navicon:after {
  background: #163d4f;
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  transition: all 0.2s ease-out;
  width: 100%;
}
header .menu-icon .navicon:before {
  top: 5px;
}
header .menu-icon .navicon:after {
  top: -5px;
} /* 02.2 Criando Animação Menu Hamburger */
header .menu-btn {
  display: none;
}
header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}
header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}
header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}
header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
} /* 02.3 Criando botão fechar */
header .menu-close {
  display: none;
}
header .menu-close-btn {
  background-color: #eee;
  color: #163d4f;
  padding: 5px;
  border-radius: 5px;
  margin: 5px 15px 5px auto;
  display: none;
  width: 140px;
  text-align: center;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
} /* 02.4 Manipulando lista para criar navbar slider */
@media (max-width: 992px) {
  /* Aplicar estilo para tela menor do que qualquer tela grande (laptop ou desk) */
  header .nav-bar #nav-list {
    position: fixed;
    top: 0;
    left: 0;
    width: 0vw;
    height: 100vh;
    z-index: 999;
    overflow-x: hidden;
    -webkit-transition: width 0.5s ease-in-out;
    -moz-transition: width 0.5s ease-in-out;
    -o-transition: width 0.5s ease-in-out;
    transition: width 0.5s ease-in-out;
    border-right: solid 1px #eee;
    background-color: #f9f9f9;
    box-shadow: 0px 0px 24px rgb(0 0 0 / 10%);
  }
  header .menu-btn:checked ~ #nav-list {
    width: 70vw;
  }
  header .nav-bar ul > li {
    display: block;
    margin: 0px;
    color: black;
  }
  header .nav-bar ul > li:last-child {
    margin: 0px;
  }
  header .nav-bar ul > li a {
    display: block;
    padding: 15px;
    border-bottom: solid 1px #ccc;
    color: black;
  }
  header .nav-bar ul > li:first-of-type a {
    border-top: solid 1px #ccc;
  }
  header .menu-close-btn {
    display: block;
  }
  header .menu-icon {
    display: block;
  }
  header .logo {
    max-width: 100px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto 0px;
    padding: 0px 10px;
    position: inherit;
  }
  header .logo::after {
    display: none;
  }
  .logo img {
    margin-left: 80px;
  }
} /* PASSO 03. Estilo Barra do Topo */
.topbar {
  background-color: #163d4f;
  padding: 5px 0px;
  transition: 0.5s all;
}
.topbar .col-12 {
  display: flex;
  justify-content: flex-end;
}
.topbar a {
    font-size: 12px;
    margin: 0px 0px 0px 15px;
    color: #fff;
    text-decoration: none;
    transition: 0.2s ease;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.topbar a:hover {
    transform: scale(1.03);
    color: #ffffff;
}
.topbar a i {
  font-size: 16px;
}
.topbar .btn-topbar {
  width: auto;
  background-color: #0198db;
  border-radius: 2px;
  font-weight: 500;
  padding: 5px 15px;
  display: flex;
  align-items: center;
}
.topbar .btn-topbar:hover {
  background-color: #00638e;
  color: #fff;
  transform: none;
} /* 03.1 Manipulando conteúdo para dispositivos com telas menores do que 992px */
@media (max-width: 992px) {
  /* Aplicar estilo para tela menor do que qualquer tela grande (laptop ou desk) */
  .topbar a {
    overflow: hidden;
    width: 25px;
    height: 25px;
  }
  .topbar a:nth-child(1):before {
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    content: "f3c5";
    display: block;
    margin-bottom: 10px;
    margin-top: 1px;
    text-align: center;
    background-color: #fff;
    padding: 5px 7px;
    border-radius: 50%;
    color: black;
  }
  .topbar a:nth-child(2):before {
    font-weight: 900;
    font-family: "Font Awesome 5 Brands";
    content: "f232";
    display: block;
    margin-bottom: 10px;
    margin-top: 1px;
    text-align: center;
    background-color: #fff;
    padding: 5px 7px;
    border-radius: 50%;
    color: black;
  }
}

</style>
                        
                        

                          
<script>
// Scripts responsáveis por colocar um tamanho para a correção do fixed da Navbar

document.addEventListener("DOMContentLoaded", function () {
  // Depois que o documento HTMl é carregado, vamos colocar uma altura na Fixed Correction

  setTimeout(function () {
    // Tempo para carregar todos os elementos que são link externos

    var fixedCorrection = document.getElementById("js-header").clientHeight;

    document.getElementById("fixedCorrection").style.height =
      fixedCorrection + "px";

    console.log(fixedCorrection);
  }, 1000);
});

// Script com função de checagem botão hamburger

function menuToggle() {
  document.getElementById("menu-btn").checked = false;

  document.getElementById("js-header").classList.remove("overlay--left");
}

// Script para criar Overlay ao abrir navbar

function overlayLeft() {
  if (document.getElementById("menu-btn").checked) {
    document.getElementById("js-header").classList.remove("overlay--left");
  } else {
    document.getElementById("js-header").classList.add("overlay--left");
  }
}

// Script para esconder barra do topo ao descer

//console.log(window.screen.width);

window.onscroll = function (e) {
  var scrollTop =
    window.pageYOffset !== undefined
      ? window.pageYOffset
      : (document.documentElement || document.body.parentNode || document.body)
          .scrollTop; // Vamos captar em pixels, a quantidade de scroll da página

  var topBar = document.querySelector("#js-topbar").clientHeight;

  if (scrollTop >= 1) {
    // Caso o usuário desca 1 pixel, vamos esconder a barra do topo

    document.getElementById("js-header").style.transform =
      "translateY(-" + topBar + "px)";

    document.getElementById("js-topbar").style.transform =
      "translateY(-" + topBar + "px)";

    if (
      /Android|webOS|iPhone|iPad|Mac|Macintosh|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
        navigator.userAgent
      )
    ) {
      // Vamos manipular nossa navbar que abre de lado no mobile, para manter a posição quando rolar a página

      document.getElementById("nav-list").style.transform =
        "translateY(" + topBar + "px)";
    }
  } else {
    // Caso o usuário volte ao topo da página, vamos mostrar a barra do topo

    document.getElementById("js-header").style.transform = "translateY(0px)";

    document.getElementById("js-topbar").style.transform = "translateY(0px)";

    if (
      /Android|webOS|iPhone|iPad|Mac|Macintosh|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
        navigator.userAgent
      )
    ) {
      // Vamos manipular nossa navbar que abre de lado no mobile, para manter a posição quando voltar para o topo a página

      document.getElementById("nav-list").style.transform = "translateY(0px)";
    }
  }
};

</script>
                        
                        

                            
<header id="js-header">
  <div class="topbar" id="js-topbar">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <a
            href="#link-google-maps"
            target="_blank"
            title="Venha visitar nosso local físico - NOME EMPRESA"
            rel="noopener noreferrer nofollow"
          >
             <i class="fas fa-map-marker-alt"></i> Av. Trocar, n° 999, Cidade Trocar
          </a>
          <a
            href="https://web.whatsapp.com/send?phone=5517999999999"
            target="_blank"
            title="Falar no WhatsApp - NOME EMPRESA"
            rel="noopener noreferrer nofollow"
          >
             <i class="fab fa-whatsapp"></i> +55 (88) 99911-0253
          </a>
          <!-- REDES SOCIAIS, DESCOMENTAR PARA HAB. -->
          <!--<a
            href="#"
            target="_blank"
            title="Ir para Perfil do Instagram - NOME EMPRESA"
            rel="noopener noreferrer nofollow"
          >
            <i class="fab fa-instagram" aria-hidden="true"></i>
          </a>
          <a
            href="#"
            target="_blank"
            title="Ir para a Página do Facebook - NOME EMPRESA"
            rel="noopener noreferrer nofollow"
          >
            <i class="fab fa-facebook-square" aria-hidden="true"></i>
          </a>-->
          <a
            href="contato"
            title="Ir para Página de Contato"
            rel="noopener noreferrer nofollow"
            class="btn btn-topbar"
            >ENTRAR EM CONTATO</a
          >
        </div>
        <!--12-->
      </div>
      <!--row-->
    </div>
    <!--container-->
  </div>
  <!--topbar-->
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="nav-bar">
          <div class="logo">
            <a href="" title="Ir para a Página Inicial" rel="nofollow">
              <picture>
                <source
                  srcset="
                    https://www.ecowd.inf.br/cms/img/dropzone_upload/resized_14613f700d1e453_1631547405_200x.webp
                  "
                  type="image/webp"
                />
                <source
                  srcset="
                    https://www.ecowd.inf.br/cms/img/dropzone_upload/resized_14613f700d1e453_1631547405_200x.jpg
                  "
                  type="image/png"
                />
                <img
                  src="https://www.ecowd.inf.br/cms/img/dropzone_upload/resized_14613f700d1e453_1631547405_200x.webp"
                  alt="Logo Website MODELO 2021"
                  class="img-fluid"
                  loading="lazy"
                />
              </picture>
            </a>
          </div>
          <div class="mobile-search">
						<form action="https://www.lgmriopreto.com.br/produtos" method="get" novalidate="">
							<input type="text" id="search" name="pesquisa" value="" placeholder="Busque um produto...">
							<i class="fas fa-search" aria-hidden="true"></i>
						</form>
					</div>
          <nav>
            <input class="menu-btn" type="checkbox" id="menu-btn" />
            <label onclick="overlayLeft()" class="menu-icon" for="menu-btn">
              <span class="navicon"></span>
            </label>
            <div id="nav-list">
              <input class="menu-close" type="checkbox" id="menu-close" />
              <label
                class="menu-close-btn"
                for="menu-close"
                onclick="menuToggle()"
              >
                Fechar Menu
              </label>
              <ul>
                <li>
                  <a href="" title="Ir para a página inicial">Página Inicial</a>
                </li>
                <li>
                  <a
                    href="produtos"
                    title="Conhecer os produtos da NOME DA EMPRESA"
                    >Produtos</a
                  >
                </li>
                <li>
                  <a
                    href="galeria"
                    title="Portfólio com serviços da NOME DA EMPRESA"
                    >Galeria</a
                  >
                </li>
                <li>
                  <a
                    href="noticias"
                    title="Fique por dentro das novidades da NOME DA EMPRESA"
                    >Notícias</a
                  >
                </li>
                <li>
                  <a href="videos" title="Veja os vídeos da NOME DA EMPRESA"
                    >Vídeos</a
                  >
                </li>
                <li>
                  <a
                    href="contato"
                    title="Entre em contato com a NOME DA EMPRESA"
                    >Contato</a
                  >
                </li>
                <li class="desktop-search">
                                <form action="https://www.lgmriopreto.com.br/produtos" method="get" novalidate="">
                                    <input type="text" id="search" name="pesquisa" value="" placeholder="Busque um produto...">
									<i class="fas fa-search" aria-hidden="true"></i>
                                </form>
                </li>
              </ul>
            </div>
          </nav>
        </div>
        <!--box-nav-->
      </div>
      <!--12-->
    </div>
    <!--row-->
  </div>
  <!--container-->
</header>
                            
                        

                          
<style>
/* NAVBAR  */

/* Estilo Barra de Navegação Responsiva */

header {
  box-shadow: 0px 3px 12px rgb(0 0 0 / 10%);
  background-color: #fff;
  position: fixed;
  width: 100%;
  z-index: 999;
  transition: 0.5s all;
}
header .nav-bar {
  display: flex;
  height: 100%;
  position: relative;
  min-height: 90px;
  align-items: center;
  gap: 15px;
}
header .nav-bar nav {
  margin: auto 0px auto auto;
}
header .nav-bar ul {
  padding: 0px;
  margin: 0px;
  list-style: none;
}
header .nav-bar ul > li {
  display: inline-block;
  margin: 0px 5px;
}
header .nav-bar li > a {
  color: #041c27;
  text-decoration: none;
  transition: 0.3s ease;
  padding: 5px 5px;
  font-size: 14px;
  font-weight: 600;
}
header .nav-bar li > a:hover {
  color: #107cac;
}
header .nav-bar ul > li:last-child {
  margin: 0px 0px 0px 6px;
}
header .btn-topbar {
  background-color: #cd3537;
  color: white;
  padding: 5px 20px;
}
.logo {
  position: absolute;
  margin-left: 30px;
}
.logo img {
  max-width: 200px;
  width: 100%;
} /* OVERLAY CSS */
#js-header.overlay--left:after {
  content: "";
  background-color: rgb(0 0 0 / 80%);
  width: 100%;
  height: 110vh;
  display: block;
  position: fixed;
  pointer-events: unset;
  z-index: 998;
  top: -39px;
} 

/* ESTILOS MOBILE */ 

/* Criando Ícone Hamburger */

header .menu-icon {
  cursor: pointer;
  display: none;
  float: right;
  padding: 28px 3px;
  position: relative;
  user-select: none;
}
header .menu-icon .navicon {
  background: #163d4f;
  display: block;
  height: 2px;
  position: relative;
  transition: background 0.2s ease-out;
  width: 18px;
}
header .menu-icon .navicon:before,
header .menu-icon .navicon:after {
  background: #163d4f;
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  transition: all 0.2s ease-out;
  width: 100%;
}
header .menu-icon .navicon:before {
  top: 5px;
}
header .menu-icon .navicon:after {
  top: -5px;
}

/* Criando Animação Menu Hamburger */

header .menu-btn {
  display: none;
}
header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}
header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}
header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}
header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
} 

/* Criando botão fechar */

header .menu-close {
  display: none;
}
header .menu-close-btn {
  background-color: #eee;
  color: #163d4f;
  padding: 5px;
  border-radius: 5px;
  margin: 5px 15px 5px auto;
  display: none;
  width: 140px;
  text-align: center;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
} 

/* Manipulando lista para criar navbar slider */

@media (max-width: 992px) {

  /* Aplicar estilo para tela menor do que qualquer tela grande (laptop ou desk) */
  header .nav-bar #nav-list {
    position: fixed;
    top: 0;
    left: 0;
    width: 0vw;
    height: 100vh;
    z-index: 999;
    overflow-x: hidden;
    -webkit-transition: width 0.5s ease-in-out;
    -moz-transition: width 0.5s ease-in-out;
    -o-transition: width 0.5s ease-in-out;
    transition: width 0.5s ease-in-out;
    border-right: solid 1px #eee;
    background-color: #f9f9f9;
    box-shadow: 0px 0px 24px rgb(0 0 0 / 10%);
  }
  header .menu-btn:checked ~ #nav-list {
    width: 70vw;
  }
  header .nav-bar ul > li {
    display: block;
    margin: 0px;
    color: black;
  }
  header .nav-bar ul > li:last-child {
    margin: 0px;
  }
  header .nav-bar ul > li a {
    display: block;
    padding: 15px;
    border-bottom: solid 1px #ccc;
    color: black;
  }
  header .nav-bar ul > li:first-of-type a {
    border-top: solid 1px #ccc;
  }
  header .menu-close-btn {
    display: block;
  }
  header .menu-icon {
    display: block;
  }
  header .logo {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto 0px;
    padding: 0px 10px;
    position: inherit;
  }
  header .logo::after {
    display: none;
  }
} 

/* ESTILO SEARCH BAR */

header #search {
    padding: 10px 10px;
    background-color: #f9f9f9;
    border: solid 1px #ccc;
    border-radius: 3px;
}

header input:focus {
    border-color: rgb(81 191 255 / 80%);
    box-shadow: 0 1px 1px rgb(229 103 23 / 8%) inset, 0 0 4px rgb(23 134 229 / 60%);
    outline: 0 none;
}

header input#search::placeholder {
  color: #bbb;
}

header form {
    display: flex;
    position: relative;
    align-items: center;
}

header form i {
  position: absolute;
  right: 10px;
}

.mobile-search {
  display: none;
}

/* MOBILE SEARCH */

@media (max-width: 992px) {
  .desktop-search {
    display: none;
  }
  .mobile-search {
    display: block;
    margin: auto;
    margin-right: 0px;
    width: 50%;
  }
  .mobile-search #search {
    border: 1px solid #DCDCDC;
    outline: none;
    display: block;
    position: relative;
    min-width: 130px;
    width: 100%;
    padding: 10px 5px;
  }
  header input#search::placeholder {
    font-size: 11px;
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  header form i {
    font-size: 11px;
  }
}

/* Estilo Barra do Topo */
.topbar {
  background-color: #163d4f;
  padding: 5px 0px;
  transition: 0.5s all;
}
.topbar .col-12 {
  display: flex;
  justify-content: flex-end;
}
.topbar a {
    font-size: 12px;
    margin: 0px 0px 0px 15px;
    color: #fff;
    text-decoration: none;
    transition: 0.2s ease;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.topbar a:hover {
    transform: scale(1.03);
    color: #ffffff;
}
.topbar a i {
  font-size: 16px;
}
.topbar .btn-topbar {
  width: auto;
  background-color: #0198db;
  border-radius: 2px;
  font-weight: 500;
  padding: 5px 15px;
  display: flex;
  align-items: center;
}
.topbar .btn-topbar:hover {
  background-color: #00638e;
  color: #fff;
  transform: none;
} /* 03.1 Manipulando conteúdo para dispositivos com telas menores do que 992px */
@media (max-width: 992px) {
  /* Aplicar estilo para tela menor do que qualquer tela grande (laptop ou desk) */
  .topbar a {
    overflow: hidden;
    width: 25px;
    height: 25px;
  }
  .topbar a:nth-child(1):before {
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    content: "f3c5";
    display: block;
    margin-bottom: 10px;
    margin-top: 1px;
    text-align: center;
    background-color: #fff;
    padding: 5px 7px;
    border-radius: 50%;
    color: black;
  }
  .topbar a:nth-child(2):before {
    font-weight: 900;
    font-family: "Font Awesome 5 Brands";
    content: "f232";
    display: block;
    margin-bottom: 10px;
    margin-top: 1px;
    text-align: center;
    background-color: #fff;
    padding: 5px 7px;
    border-radius: 50%;
    color: black;
  }
}
</style>
                          
                        

                          
<script>
// Scripts responsáveis por colocar um tamanho para a correção do fixed da Navbar

document.addEventListener("DOMContentLoaded", function () {
  // Depois que o documento HTMl é carregado, vamos colocar uma altura na Fixed Correction

  setTimeout(function () {
    // Tempo para carregar todos os elementos que são link externos

    var fixedCorrection = document.getElementById("js-header").clientHeight;

    document.getElementById("fixedCorrection").style.height =
      fixedCorrection + "px";

    console.log(fixedCorrection);
  }, 1000);
});

// Script com função de checagem botão hamburger

function menuToggle() {
  document.getElementById("menu-btn").checked = false;

  document.getElementById("js-header").classList.remove("overlay--left");
}

// Script para criar Overlay ao abrir navbar

function overlayLeft() {
  if (document.getElementById("menu-btn").checked) {
    document.getElementById("js-header").classList.remove("overlay--left");
  } else {
    document.getElementById("js-header").classList.add("overlay--left");
  }
}

// Script para esconder barra do topo ao descer

//console.log(window.screen.width);

window.onscroll = function (e) {
  var scrollTop =
    window.pageYOffset !== undefined
      ? window.pageYOffset
      : (document.documentElement || document.body.parentNode || document.body)
          .scrollTop; // Vamos captar em pixels, a quantidade de scroll da página

  var topBar = document.querySelector("#js-topbar").clientHeight;

  if (scrollTop >= 1) {
    // Caso o usuário desca 1 pixel, vamos esconder a barra do topo

    document.getElementById("js-header").style.transform =
      "translateY(-" + topBar + "px)";

    document.getElementById("js-topbar").style.transform =
      "translateY(-" + topBar + "px)";

    if (
      /Android|webOS|iPhone|iPad|Mac|Macintosh|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
        navigator.userAgent
      )
    ) {
      // Vamos manipular nossa navbar que abre de lado no mobile, para manter a posição quando rolar a página

      document.getElementById("nav-list").style.transform =
        "translateY(" + topBar + "px)";
    }
  } else {
    // Caso o usuário volte ao topo da página, vamos mostrar a barra do topo

    document.getElementById("js-header").style.transform = "translateY(0px)";

    document.getElementById("js-topbar").style.transform = "translateY(0px)";

    if (
      /Android|webOS|iPhone|iPad|Mac|Macintosh|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
        navigator.userAgent
      )
    ) {
      // Vamos manipular nossa navbar que abre de lado no mobile, para manter a posição quando voltar para o topo a página

      document.getElementById("nav-list").style.transform = "translateY(0px)";
    }
  }
};

</script>
                          
                        

                          
<footer>

  <div class="box-institutional py-5">

    <div class="container">
      <div class="row">
        <div class="col-lg-3 footer-column-1">

          <div class="footer-logo">

            <picture>
              <source
                srcset="https://www.ecowd.inf.br/cms/img/dropzone_upload/resized_12613f700c2d854_1631547404_200x.webp"
                type="image/webp">
              <source
                srcset="https://www.ecowd.inf.br/cms/img/dropzone_upload/resized_12613f700c2d854_1631547404_200x.png"
                type="image/png">
              <img src="https://www.ecowd.inf.br/cms/img/dropzone_upload/resized_12613f700c2d854_1631547404_200x.webp" alt="Logo Rodapé Website - NOME DA EMPRESA" class="img-fluid" loading="lazy" />
            </picture>

          </div>

        </div>

        <div class="col-lg-2 footer-column-2">

          <div class="footer-title">
            <h2>Institucional</h2>
          </div>

          <ul class="footer-list">

            <li><a rel="nofollow" href="" title="Ir para a página inicial">Página Inicial</a>
            </li>
            <li><a rel="nofollow" href="produtos"
                title="Conhecer os produtos da NOME DA EMPRESA">Produtos</a></li>
            <li><a rel="nofollow" href="galeria"
                title="Portfólio com serviços da NOME DA EMPRESA">Galeria</a></li>
            <li><a rel="nofollow" href="noticias"
                title="Fique por dentro das novidades da NOME DA EMPRESA">Notícias</a>
            </li>
            <li><a rel="nofollow" href="videos"
                title="Veja os vídeos da NOME DA EMPRESA">Vídeos</a></li>
            <li><a rel="nofollow" href="contato"
                title="Entre em contato com a NOME DA EMPRESA">Contato</a></li>

          </ul>

        </div>

        <div class="col-lg-4 footer-column-3">

          <div class="footer-header">

            <h2>Contatos</h2>

          </div>

          <div class="footer-content">

            <a href="tel:01730223715" target="_blank"
              title="Clique para falar conosco no telefone fixo"
              rel="noopener noreferrer nofollow"> <i class="fas fa-phone"></i> (17) 3022 3715
            </a>

            <a href="https://api.whatsapp.com/send?phone=5577988060110" target="_blank"
              title="Clique para falar conosco no WhatsApp" class="whats-link"
              rel="noopener noreferrer nofollow">
              <i class="fab fa-whatsapp"></i> (17) 98200-0895 </a>

            <a href="mailto:contato@ecowebdesign.com.br" target="_blank"
              title="Envie uma mensagem de e-mail para nossa equipe para tirar suas dúvidas"
              rel="noopener noreferrer nofollow">
              <i class="far fa-envelope"></i>contato@ecowebdesign.com.br </a>

          </div>

        </div>

        <div class="col-lg-3 footer-column-4">

          <div class="footer-header">
            <h2>Endereço & Horário</h2>
          </div>

          <div class="footer-content">
            <a href="https://www.google.com/maps?ll=-20.800467,-49.365001&z=16&t=m&hl=pt-BR&gl=BR&mapclient=embed&cid=5213752934209058908"
              target="_blank" title="Localização EMPRESA - Clique para traçar rota"
              rel="noopener noreferrer nofollow">
              Av. México, 688 - Jardim Paulista, São José do Rio Preto - SP </a>
            <p>CEP: 15055-340</p>
          </div>

        </div>
      </div>
      <!--row-->
    </div>

  </div>

  <div class="copyright">

    <div class="container">

      <small> © <span id="year"></span> <strong> Eco Webdesign Modelo 21</strong> - Todos os direitos reservados. Desenvolvimento
<a title="Este website foi desenvolvido com muito amor por ECO WEBDESIGN" href="https://www.ecowebdesign.com.br" target="_blank" rel="noopener noreferrer nofollow">Eco Webdesign</a>
</small>

      <div class="box-validations">

        <p style="display:inline-block;">

          <a id="w3-css-link" title="Folha de CSS perfeita e válida por W3C"
            rel="nofollow noopener noreferrer" href="">
            <img class="img-fluid lazy"
        src="https://jigsaw.w3.org/css-validator/images/vcss" loading="lazy" alt="CSS válido!" />
          </a>
        </p>

        <p style="display:inline-block;">
          <a id="w3-link" rel="nofollow noopener noreferrer" href=""
            title="HTML perfeito e Válidado por W3C" target="_blank">
            <img src="https://www.ecowd.inf.br/cms/img/dropzone_upload/resized_155c86411164026_1552302353_80x.png" alt="HTML perfeito e Válidado por W3C" class="img-fluid" loading="lazy" />
          </a>
        </p>

      </div>
      <!--box-validations -->
    </div>

  </div>
</footer>
                        
                        

                          
<style>
  footer {
    background-color: #ECECEC;
  }

  footer .box-institutional {
    background-color: #163d4f;
  }

  footer h2 {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 0px;
  }

  footer a {
    text-decoration: none;
    font-size: 14px;
    transition: 0.3s ease;
    color: #fff;
    display: block;
    line-height: 30px;
  }

  footer a:hover {
    color: #0198db;
  }

  footer a i {
    margin-right: 10px;
  }

  footer p {
    color: #fff;
  }

  footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  footer ul li {
    font-size: 14px;
    display: flex;
    align-items: center;
  }

  footer ul li+li {
    margin-top: 10px;
  }

  footer ul li img {
    margin-right: 10px;
  }

  /* Copyright */

  .copyright {
    background-color: #0198db;
    color: #fff;
  }

  .copyright a {
    display: inline-block;
    font-size: 14px;
    color: #fff;
    font-weight: bold;
  }

  .copyright p {
    display: inline-block;
    color: white;
    margin: 0;
  }

  .copyright .box-validations {
    display: inline-block;
    float: right;
  }

  .copyright img {
    max-width: 40px;
    height: auto;
  }

  @media (max-width: 992px) {
    .copyright .box-validations {
      float: none;
      display: block;
    }

    footer {
      text-align: left;
    }

    footer ul li {
      justify-content: flex-start;
    }

    .footer-column-3 {
      border-bottom: solid 1px #104b66;
      margin: 10px 0px;
      padding-bottom: 10px;
    }

    .footer-column-2 {
      border-bottom: solid 1px #104b66;
      padding-bottom: 10px;
    }

    footer ul li+li {
      margin-top: 2px;
    }

    .footer-logo {
      margin-bottom: 20px;
    }

    .footer-logo img {
      max-width: 250px;
    }
  }
</style>
                          
                        

                          
<script>
  // SCRIPT atualização do ano copyright
  document.getElementById("year").innerHTML = new Date().getFullYear();
    
  // W3 link script
    
  //setTimeout(function(){
          
    var url = window.location.href;
  
    document.querySelector("#w3-link").setAttribute("href", "https://validator.w3.org/nu/?doc="+url+"");
    
    document.querySelector("#w3-css-link").setAttribute("href", "https://jigsaw.w3.org/css-validator/validator?uri="+url+"&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=pt-BR");
      
  //}, 500);
</script>
                          
                        

                            
<div class="container">

  <div class="row">
  
    <div class="col-lg-4 col-6 pb-4">
      <div class="i-box-card-01">
        <a href="#" title="TÍTULO PARA ONDE VAI MEU LINK">
      
        <div class="img-box">
        
          <img src="https://images.unsplash.com/photo-1572802419224-296b0aeee0d9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1115&q=80" class="img-fluid" alt="COLOCAR ALT DE ACORDO COM IMAGEM" loading="lazy" />
        
        </div>
        
        <div class="title-box">
        
          <h2>
            Nome do meu serviço <i class="fas fa-chevron-right"></i>
          </h2>
        
        </div>
        </a>
      </div>
    </div>
    
 <div class="col-lg-4 col-6 pb-4">
      <div class="i-box-card-01">
        <a href="#" title="TÍTULO PARA ONDE VAI MEU LINK">
      
        <div class="img-box">
        
          <img src="https://images.unsplash.com/photo-1572802419224-296b0aeee0d9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1115&q=80" class="img-fluid" alt="COLOCAR ALT DE ACORDO COM IMAGEM" loading="lazy" />
        
        </div>
        
        <div class="title-box">
        
          <h2>
            Nome do meu serviço <i class="fas fa-chevron-right"></i>
          </h2>
        
        </div>
        </a>
      </div>
    </div>
    
    <div class="col-lg-4 col-6 pb-4">
      <div class="i-box-card-01">
        <a href="#" title="TÍTULO PARA ONDE VAI MEU LINK">
      
        <div class="img-box">
        
          <img src="https://images.unsplash.com/photo-1572802419224-296b0aeee0d9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1115&q=80" class="img-fluid" alt="COLOCAR ALT DE ACORDO COM IMAGEM" loading="lazy" />
        
        </div>
        
        <div class="title-box">
        
          <h2>
            Nome do meu serviço <i class="fas fa-chevron-right"></i>
          </h2>
        
        </div>
        </a>
      </div>
    </div>
    
  </div>

</div>
                            
                        

                          
<style>

.i-box-card-01 {
  box-shadow: 10px 20px 50px #00000029;
}

.i-box-card-01 .title-box {
    color: #fff;
    background-color: #00afef;
    padding: 20px;
}

.i-box-card-01 .title-box h2 {
    font-size: 20px;
    font-weight: 500;
    margin: 0px;
}

.i-box-card-01 .title-box i {
    vertical-align: middle;
    font-size: 15px;
    margin-left: 8px;
    transition: all 0.3s ease-in-out;
}

.i-box-card-01 .img-box {
  overflow: hidden;
}

.i-box-card-01 .img-box img {
    object-fit: cover;
    object-position: center;
    height: 310px;
    width: 100%;
    max-height: 100%;
    display: block;
    transition: all 0.3s ease-in-out;
}

.i-box-card-01 a:hover .img-box img {
  transform: scale(1.10);
}

.i-box-card-01 a:hover .title-box i {
   transform: translateX(5px);
}

/* Media for Mobile - Cards s01 Interago */

@media (max-width: 992px) {
  .i-box-card-01 .title-box h2 {
    font-size: 14px;
  }
  .i-box-card-01 .img-box img {
    object-fit: cover;
    object-position: center;
    height: 175px;
    width: 100%;
    max-height: 100%;
    display: block;
    transition: all 0.3s ease-in-out;
  }
}
</style>
                          
                        

                          
<div class="carousel js-flickity" data-flickity-options='{"imagesLoaded": true, "pageDots": true, "wrapAround": true, "groupCells": true, "freeScroll": true}'>
    <div class="carousel-cell">
        <img src="https://via.placeholder.com/300/O" alt="Legenda da Minha Imagem" class="img-fluid" loading="lazy"/>
    </div>
    <div class="carousel-cell">
        <img src="https://via.placeholder.com/300/O" alt="Legenda da Minha Imagem" class="img-fluid" loading="lazy"/>
    </div>
    <div class="carousel-cell">
        <img src="https://via.placeholder.com/300/O" alt="Legenda da Minha Imagem" class="img-fluid" loading="lazy"/>
    </div>
    <div class="carousel-cell">
        <img src="https://via.placeholder.com/300/O" alt="Legenda da Minha Imagem" class="img-fluid" loading="lazy"/>
    </div>
</div>
                          
                       

                          

<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">

<style>
  .carousel {
      width: 100%;
      display: block;
  }

  .carousel-cell {
      width: 25%;
      margin-right: 10px;
      counter-increment: carousel-cell;
  }

  @media (max-width:992px) {
      .carousel-cell {
          width: 100% !important;
          counter-increment: carousel-cell;
      }
  }

  .carousel-cell img {
      width: 100%;
      object-fit: cover;
  }

  .flickity-page-dots {
      bottom: -30px;
  }
  /* white circles */

  .flickity-page-dots .dot {
      width: 12px;
      height: 12px;
      opacity: 1;
      background: black;
      border: 2px solid black;
  }
  /* fill-in selected dot */

  .flickity-page-dots .dot.is-selected {
      background: white;
  }
</style>
                          
                        

                              
<!-- JavaScript -->
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
                              
                        

                            
<section class="py-5 i-session-hero-01">

<div class="container">
  <div class="row">
  
<!-- Column First -->

    <div class="col-lg-6 col-12">
      <div class="session-info">
        <h1>
          Sobre nossa empresa
        </h1>
        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
        </p>
        <!-- List with Styled Info -->
        <ul>
          <li>
            <i class="fas fa-bullseye"></i>
            <div class="dsc">
                <p>
                  <strong>Missão</strong>
                </p>
                <p>
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
                </p>
            </div>
          </li>
                    <li>
            <i class="far fa-flag"></i>
            <div class="dsc">
                <p>
                  <strong>Visão</strong>
                </p>
                <p>
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
                </p>
            </div>
          </li>
          <li>
            <i class="far fa-star"></i>
            <div class="dsc">
                <p>
                  <strong>Valores</strong>
                </p>
                <p>
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
                </p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    
 <!-- Column Second -->   
    
    <div class="col-lg-6 col-12">
      <div class="session-img">
            <img
              src="https://images.unsplash.com/photo-1572802419224-296b0aeee0d9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1115&q=80"
              class="img-fluid"
              alt="COLOCAR ALT DE ACORDO COM IMAGEM"
              loading="lazy"
            />
      </div>
    </div>
   
  </div>
</div>

</section>
                            
                        

                          
<style>

.i-session-hero-01 {
  background-color: #f9f9f9;
}

.i-session-hero-01 h1 {
    font-size: 45px;
    margin: 0px 0px 0px 20px;
    position: relative;
}

.i-session-hero-01 h1:before {
    content: "";
    display: inline-block;
    margin-right: 10px;
    width: 10px;
    height: 100%;
    background-color: #00afef;
    position: absolute;
    left: -20px;
}

.i-session-hero-01 ul li {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 15px 0px;
}

.i-session-hero-01 ul li i {
  font-size: 60px;
  color: #00afef;
}

.i-session-hero-01 ul li p {
  margin: 5px 0px;
}

.i-session-hero-01 .session-img {
  height: 100%;
}

.i-session-hero-01 .session-img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  box-shadow: 10px 20px 40px #00000029;
}

/* MOBILE SECTION CORRECTION */

@media (max-width: 992px) {
  .i-session-hero-01 .col-12:nth-child(1) {
    order: 2;
  }
  .i-session-hero-01 .col-12:nth-child(1) {
    order: 1;
  }
  .i-session-hero-01 h1 {
    font-size: 30px;
  }
}
</style>
                          
                        

                            
<section class="py-5 i-session-hero-02">

<div class="container">
  <div class="row">
  
<!-- Column First -->

    <div class="col-lg-7 col-12">
      <div class="session-info">
        <h1>
          Sobre nossa empresa
        </h1>
        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
        </p>
        <!-- List with Styled Info -->
        <ul>
          <li>
            <i class="fas fa-bullseye"></i>
            <div class="dsc">
                <p>
                  <strong>Missão</strong>
                </p>
                <p>
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
                </p>
            </div>
          </li>
                    <li>
            <i class="far fa-flag"></i>
            <div class="dsc">
                <p>
                  <strong>Visão</strong>
                </p>
                <p>
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
                </p>
            </div>
          </li>
          <li>
            <i class="far fa-star"></i>
            <div class="dsc">
                <p>
                  <strong>Valores</strong>
                </p>
                <p>
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
                </p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    
 <!-- Column Second -->   
    
    <div class="col-lg-5 col-12">
      <div class="session-img">
            <img
              src="https://images.unsplash.com/photo-1572802419224-296b0aeee0d9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1115&q=80"
              class="img-fluid"
              alt="COLOCAR ALT DE ACORDO COM IMAGEM"
              loading="lazy"
            />
      </div>
    </div>
   
  </div>
</div>

</section>
                            
                        

                          
<style>

.i-session-hero-02 {
  background-color: #163d4f;
  color: #fff;
}

.i-session-hero-02 h1 {
    font-size: 45px;
    margin: 0px 0px 0px 20px;
    position: relative;
}

.i-session-hero-02 h1:before {
    content: "";
    display: inline-block;
    margin-right: 10px;
    width: 10px;
    height: 100%;
    background-color: #00ADEF;
    position: absolute;
    left: -20px;
}

.i-session-hero-02 ul {
  display: flex;
  gap: 20px;
}

.i-session-hero-02 ul li {
    padding: 15px;
    text-align: center;
    border-radius: 5px;
    background-color: #225166;
    box-shadow: 10px 10px 20px #00000014;
}

.i-session-hero-02 ul li i {
  font-size: 60px;
  margin-top: 15px;
}

.i-session-hero-02 .session-img {
  height: 100%;
}

.i-session-hero-02 .session-img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  box-shadow: 10px 20px 40px #00000029;
}

/* MOBILE SECTION CORRECTION */

@media (max-width: 992px) {
  .i-session-hero-02 .col-12:nth-child(1) {
    order: 2;
  }
  .i-session-hero-02 .col-12:nth-child(1) {
    order: 1;
  }
  .i-session-hero-02 h1 {
    font-size: 30px;
  }
  .i-session-hero-02 ul {
    display: flex;
    gap: 20px;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
  .i-session-hero-02 ul li {
    white-space: normal;
    margin-bottom: 15px;
  }
  .i-session-hero-02 .dsc {
    width: 250px;
  }
}
</style>
                          
                        

                            
<div class="container my-5">
  <div class="row">
  
<!-- Column First -->

    <div class="col-12">
    
      <div class="i-cta-01">
        <img src="https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" class="bg-image img-fluid" alt="Imagem de Fundo Calll to Action - ALTERAR">
        <div class="box-left">
        <img src="https://cutewallpaper.org/24/designer-png/manypixels-unlimited-graphic-design-try-riskfree.png" class="img-fluid" alt="Imagem de Fundo Calll to Action - ALTERAR">
          
        
        </div>
        <div class="box-right">
        
        <h1>
          Pronto para criar o <strong>melhor projeto</strong>
          de <strong>website</strong> da sua <strong>vida</strong>?
        </h1>
        <a href=""><i class="fab fa-whatsapp"></i> Solicitar Orçamento</a>
        </div>
      </div>
      
    </div> <!--12-->
   
  </div> <!--row-->
</div> <!--container-->
                            
                        

                          
<style>

.i-cta-01 {
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    color: #fff;
    padding: 20px;
    justify-content: flex-end;
    min-height: 300px;
    box-shadow: 10px 60px 40px rgb(0 0 0 / 8%);
}

.i-cta-01 .box-right a {
    background-color: #33B137;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    display: inline-block;
    transition: all 0.3s ease
}

.i-cta-01 .box-right a:hover {
    transform: scale(1.05);
    opacity: 0.95;
}

.i-cta-01:before {
    content: "";
    background-color: #00afef;
    position: absolute;
    max-width: 30%;
    width: 100%;
    border-radius: 0px 250px 0px 0px;
    z-index: -1;
    height: 100%;
    bottom: -35px;
    left: 0;
    box-shadow: 10px 20px 50px #00000029;
}

.i-cta-01:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -2;
    background-color: rgb(0 0 0 / 45%);
    right: 0;
    left: 0;
    bottom: -35px;
}

.i-cta-01 .bg-image {
    position: absolute;
    z-index: -3;
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
    right: 0;
    left: 0;
    bottom: -35px;
}

.i-cta-01 h1 {
    font-weight: 500;
    margin: 0px 0px 20px 0px;
}

.i-cta-01 .box-left {
    max-width: 40%;
    position: absolute;
    height: 100%;
    bottom: 0;
    left: 0;
}

.i-cta-01 .box-right {
    max-width: 500px;
    margin-right: 5%;
    margin-top: 35px;
}

/* MOBILE CSS FOR CTA 01 */

@media (max-width: 992px) {
  .box-left {
    display:  none;
  }
  .box-right {
    width: 100%;
    margin-right: 0px;
  }
  .i-cta-01 {
    justify-content: center;
  }
  .i-cta-01:before {
    max-width: 250px;
  }
}
</style>
                          
                        

                          
      <div class="i-form-01">
          <script src="https://www.interago.com.br/App/Extensions/1/tag/components/form.js"></script>
      </div>
                        
                        

                          
<style>
.i-form-01 {
  padding: 20px;
  background-color: #fff;
}

.i-form-01 input, .i-form-01 textarea {
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 5px;
  border: solid 1px #ccc;
}

.i-form-01 input::placeholder {
  color: #bbb;
}

.i-form-01 input:focus, .i-form-01 textarea:focus {
    border-color: rgb(81 191 255 / 80%);
    box-shadow: 0 1px 1px rgb(229 103 23 / 8%) inset, 0 0 4px rgb(23 134 229 / 60%);
    outline: 0 none;
}

.i-form-01 label {
  font-weight: 600;
}

.i-form-01 .formLink {
    display: inline-block;
    border-radius: 5px;
    background-color: #00afef;
    border: solid 2px transparent;
}

.i-form-01 .formLink:hover {
    background-color: #fff;
    color: #000;
    border: solid 2px #00afef;
}

.i-form-01 i {
  font-size: 12px;
  margin-left: 5px;
}

#formContainer .sendOk {
    display: none;
    padding: 10px;
    background-color: #ace3ac;
    border: solid 1px #5fa95f;
    border-radius: 5px;
    color: #000;
    font-size: 14px;
}
</style>
                          
                        

                          
<script>
    //submit on js
  let sendButton = document.getElementById('iSendButton');
  sendButton.addEventListener('click', e => {
  
	sendButton.style.pointerEvents = 'none';
	  
    //all cool to send - Lets lead the contact to a conversion page
        
		setTimeout(function(){
    
			window.location.href = "https://www.meudominio.com.br/obrigado-pelo-contato";
      
      //uncomment this part, if you dont want a conversion page
      
			//document.getElementById('#formContainer').innerHTML = '<div class="col-12"><p class="sendOk">Sua mensagem foi enviada com sucesso. Obrigado!</p></div>'; 
    
		}, 1000);
});
</script>
                          
                        

                          

                            
<form method="POST" class="form-group">
    <div class="container">
     <div class="row">
       <div class="col-lg-12">
         <div class="d-flex">
           <img alt="Email" class="img-fluid" src="https://www.interago.com.br/App/Sites/8/mc/CTA/email.svg">
         <p class="titulo-cta">Entre com contato conosco agora mesmo!</p>
         </div>
          <input class="formulario" id="name" name="name" type="text" placeholder="Nome Completo">
               <input class="formulario" id="email" name="email" type="email" placeholder="Email">
                 <input type="hidden" name="recaptcha_response" id="recaptchaResponse" />
               <div class="d-flex">
                 <input class="formulario w-1" id="number" name="number" type="number"  placeholder="Telefone">
               <input class="formulario w-2" id="text" name="text" type="text"  placeholder="Qual seguro deseja?">
               </div>
               <textarea placeholder="Detalhes (opcional)" id="textarea" name="Observacao" ></textarea>
               <button type="submit" class="btn btn-enviar">Enviar formulário</button>
               <span>ou</span>
               <button class="btn btn-whats"><a target="_blank" title="Conversar no Whatsapp" rel="nofollow" href="https://api.whatsapp.com/send?phone=5577988060110" class="whats-link"><i class="fab fa-whatsapp icon"></i>Conversar no whatsapp</a></button>
       </div>
         </div>
       </div>
 </form>
                        
                        

                          
<style>
.w-1 {
            margin: 0 5px 0 0 !important;
        }
        
        .w-2 {
            margin: 0 !important;
        }
        /* Chrome, Safari, Edge, Opera */
        
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        /* Firefox */
        
        input[type=number] {
            -moz-appearance: textfield;
        }
        
        .form-group {
            background: rgba(155, 155, 155, 0.7);
            padding: 20px;
            border-radius: 15px;
            width: 80%;
        }
        
        .formulario::placeholder,
        textarea::placeholder {
            font-size: 16px;
            color: #888888;
        }
        
        .formulario:focus-visible,
        textarea:focus-visible {
            border: 2px solid rgba(15, 65, 118, 0.5);
            box-shadow: 2px 1px 30px rgba(15, 65, 118, 0.7);
            outline: none;
        }
        
        .formulario,
        textarea {
            display: block;
            width: 90%;
            border-radius: 10px;
            border: 1px solid rgba(0, 0, 0, 0.5);
            background: white;
            padding: 15px;
            margin: 20px 0px;
        }
        
        .btn {
            border-radius: 10px;
            padding: 10px 12px;
            margin: 10px 0px 10px 10px;
            color: white;
            font-weight: bold;
            border: none;
            transition: 0.3s ease;
        }
        
        .btn:hover {
            transform: translateY(-10px);
            box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.4);
            cursor: pointer;
        }
        
        .btn-enviar {
            background-color: #0F4176;
        }
        
        .btn-whats {
            background-color: #26D367;
        }
        
        span {
            font-size: 16px;
            margin-left: 10px;
            color: white;
        }
        
        button a {
            color: white;
        }
        
        .icon {
            padding: 0rem 0.3rem 0rem 0rem;
        }
        
        .d-flex {
            display: flex;
        }
        
        a {
            text-decoration: none;
        }
</style>
                          
                        

                          
<script>
  
</script>
                          
                        

                          

<script>
// ----- CHANGE PHONENUMBER AND CUSTOM MESSAGE ----- // 
//----- vendor name
vendor ="Leonardo";
//----- vendor status
vendorstatus ="online";
//----- vendor image
vendorimg = "https://cdn.interago.com.br/img/png/w_0_q_8/1/mc//interago"; 
//----- phone number with country code
phonenumber = 551730223715;
//----- custom first message
custommessage = "Mensagem do site modelo";
</script>

<!-- link --><a href="https://api.whatsapp.com/send" id="trigger-wp-link"></a><!-- close link --><!-- default link and message--><div id="trigger-whatsapp-button-page" > <!-- end of link oppening --> <!-- icon --> <svg id="whatsapp-button-page" enable-background="new 0 0 24 24" height="64" viewBox="0 0 24 24" width="64" xmlns="http://www.w3.org/2000/svg" style="display:none;"> <path d="m20.52 3.449c-2.28-2.204-5.28-3.449-8.475-3.449-9.17 0-14.928 9.935-10.349 17.838l-1.696 6.162 6.335-1.652c2.76 1.491 5.021 1.359 5.716 1.447 10.633 0 15.926-12.864 8.454-20.307z" fill="#eceff1"></path> <path d="m12.067 21.751-.006-.001h-.016c-3.182 0-5.215-1.507-5.415-1.594l-3.75.975 1.005-3.645-.239-.375c-.99-1.576-1.516-3.391-1.516-5.26 0-8.793 10.745-13.19 16.963-6.975 6.203 6.15 1.848 16.875-7.026 16.875z" fill="#4caf50"></path> <path d="m17.507 14.307-.009.075c-.301-.15-1.767-.867-2.04-.966-.613-.227-.44-.036-1.617 1.312-.175.195-.349.21-.646.075-.3-.15-1.263-.465-2.403-1.485-.888-.795-1.484-1.77-1.66-2.07-.293-.506.32-.578.878-1.634.1-.21.049-.375-.025-.524-.075-.15-.672-1.62-.922-2.206-.24-.584-.487-.51-.672-.51-.576-.05-.997-.042-1.368.344-1.614 1.774-1.207 3.604.174 5.55 2.714 3.552 4.16 4.206 6.804 5.114.714.227 1.365.195 1.88.121.574-.091 1.767-.721 2.016-1.426.255-.705.255-1.29.18-1.425-.074-.135-.27-.21-.57-.345z" fill="#fafafa"></path> </svg> <!-- end icon --> <!-- close link and message--></div><!-- end of close link and message--><!-- desktoponly -- form to insert number --><div id="whatsapp-number-form-close" style="display:none;">X</div><div id="whatsapp-number-form" style="display:none;"> <div id="whatsapp-header"> <div id="whatsapp-header-img"><img id="whatsapp-header-img-src" src="" /><div id="whatsapp-header-status"></div></div><div id="whatsapp-header-name"><h3 id="whatsapp-header-vendor"></h3><p id="whatsapp-header-vendorstatus"></p></div> </div> <div id="whatsapp-content-box"> <div id="whatsapp-content-box-message"><p>Olá! 👋<br />Como posso ajudar</p><div id="whatsapp-content-box-arrow"></div></div> </div> <div id="whatsapp-start-chat"> <div id="whatsapp-get-data"><h2>Coloque seu telefone:</h2><input type="number" name="whatsapp-ddd" id="whatsapp-ddd" placeholder="DDD" required="required" maxlength="2" /> <input type="number" pattern=" 0+.[0-9]*[1-9][0-9]*$" onkeypress="return event.charCode >= 48 && event.charCode <= 57" name="whatsapp-numero" id="whatsapp-number" placeholder="Número" required="required" maxlength="15" /><input type="hidden" id="origem" name="origem" value="Botão do Whatsapp inserido dinamicamente em todas as páginas onde o visitante deixa seu número. O visitante foi automaticamente para o Whatsapp para falar com seu número cadastrado no site." /> <a id="button-send-message" idata="origem, whatsapp-ddd, whatsapp-number"><svg id="whatsapp-button-icon" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="m20.52 3.449c-2.28-2.204-5.28-3.449-8.475-3.449-9.17 0-14.928 9.935-10.349 17.838l-1.696 6.162 6.335-1.652c2.76 1.491 5.021 1.359 5.716 1.447 10.633 0 15.926-12.864 8.454-20.307z" fill="#eceff1"></path><path d="m12.067 21.751-.006-.001h-.016c-3.182 0-5.215-1.507-5.415-1.594l-3.75.975 1.005-3.645-.239-.375c-.99-1.576-1.516-3.391-1.516-5.26 0-8.793 10.745-13.19 16.963-6.975 6.203 6.15 1.848 16.875-7.026 16.875z" fill="#4caf50"></path><path d="m17.507 14.307-.009.075c-.301-.15-1.767-.867-2.04-.966-.613-.227-.44-.036-1.617 1.312-.175.195-.349.21-.646.075-.3-.15-1.263-.465-2.403-1.485-.888-.795-1.484-1.77-1.66-2.07-.293-.506.32-.578.878-1.634.1-.21.049-.375-.025-.524-.075-.15-.672-1.62-.922-2.206-.24-.584-.487-.51-.672-.51-.576-.05-.997-.042-1.368.344-1.614 1.774-1.207 3.604.174 5.55 2.714 3.552 4.16 4.206 6.804 5.114.714.227 1.365.195 1.88.121.574-.091 1.767-.721 2.016-1.426.255-.705.255-1.29.18-1.425-.074-.135-.27-.21-.57-.345z" fill="#fafafa"></path> </svg> Começar a Conversar</a> </div> </div></div><!-- end of form to insert number -->

<!-- styling -->
<style>
#whatsapp-button-page{position:fixed;bottom:15px;left:15px;cursor:pointer; z-index: 5;}#whatsapp-button-page:hover{animation:shake-whatsappbutton 1s cubic-bezier(.36,.07,.19,.97) both;transform:translate3d(0,0,0);backface-visibility:hidden;perspective:1000px}@keyframes shake-whatsappbutton{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}#whatsapp-number-form{width:300px;background-color:#fff;border-radius:10px;box-shadow:0 2px 4px #848181;bottom:20px;left:20px;position:fixed;z-index:99999999}#whatsapp-number-form h2{font-family:arial;font-size:20px;font-weight:400;color:#333;text-align:left;line-height:30px;margin-bottom:50px}#whatsapp-header{display:flex;border-top-left-radius:10px;border-top-right-radius:10px;background-color:#085d53;padding:10px;padding-top:0}#whatsapp-header img{width:55px;margin-top:20px;display:block}#whatsapp-header h3{font-family:arial;color:#fff;margin-left:10px;font-size:16px;margin-top:31px}#whatsapp-header p{color:#fff;font-family:arial;margin-left:10px;margin-top:-18px;font-size:13px;margin-bottom:0;line-height:35px}#whatsapp-header-status{position:fixed;width:15px;height:15px;background-color:#13c755;border-radius:50%;margin-top:-16px;margin-left:38px}#whatsapp-content-box{display:flex;margin-top:0;padding-bottom:20px;padding-left:10px;background-image:url(https://cdn.interago.com.br/img/jpg/w_0_q_8/1/mc/cdn//bgzap);background-size:contain;padding-top:13px}#whatsapp-content-box-message p{padding:20px;background-color:#fff;border-radius:10px;box-shadow:0 2px 2px #a0a0a0;font-family:arial;font-size:13px;padding-bottom:25px;padding-left:10px;padding-right:10px;margin-left:10px;color:#333}#whatsapp-content-box-message p img{width:26px}#whatsapp-content-box-arrow{width:0;height:0;border-left:15px solid transparent;border-right:15px solid transparent;border-top:26px solid #fff;position:fixed;display:block;padding:0;margin:0;margin-top:-85px}#whatsapp-ddd{width:30%;border:1px solid #d8d8d8;padding:15px;border-radius:4px;font-size:14px;font-weight:700;margin-left:10px;margin-top:10px;font-family:arial;line-height:16px}#whatsapp-number{background-color:#fff;font-size:14px;padding:15px 1px 15px 15px;color:#000;font-weight:700;font-family:arial;border-radius:2px;line-height:16px;letter-spacing:1px;cursor:pointer;transition:.3s ease;border:1px solid #d8d8d8; width:60%;}#whatsapp-number-form a{background-color:#085d53;font-size:15px;padding:10px 30px 10px 40px;color:#fff;font-family:arial;line-height:16px;cursor:pointer;transition:.3s ease;border:none;border-radius:19px;font-weight:700;margin-top:10px;margin-bottom:10px; display:inline-block;}#whatsapp-button-icon{position:fixed;margin-left:-27px;margin-top:-5px}#whatsapp-number-form a:hover{background-color:#58ba5b}#whatsapp-get-data{text-align:center}#whatsapp-get-data h2{text-transform:uppercase;font-size:14px;font-weight:700;text-align:center;margin-bottom:-11px;letter-spacing:0;color:#595959;margin-top:10px}#whatsapp-number-form-close{position:fixed;bottom:354px;left:291px;z-index:999999999;font-family:arial;padding:6px 10px 5px 11px;border-radius:50%;font-weight:400;font-size:14px;color:#fff;cursor:pointer;transition:.3s ease}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}
</style>

<!-- script -->
<script>

    // EVENTS IN ACTION
    wa_button = document.getElementById("whatsapp-button-page"), wa_button.style.display = "block", wp = document.getElementById("trigger-whatsapp-button-page"), wp.addEventListener("click", function(e) {
        console.log("whatsapp click!"), e.preventDefault(), document.getElementById("whatsapp-button-page").style.display = "none", document.getElementById("whatsapp-number-form-close").style.display = "block", document.getElementById("whatsapp-number-form").style.display = "block", document.getElementById("whatsapp-header-vendor").innerHTML = vendor, document.getElementById("whatsapp-header-vendorstatus").innerHTML = vendorstatus, document.getElementById("whatsapp-header-img-src").src = vendorimg, document.getElementById("whatsapp-ddd").focus();
        var t = document.getElementById("whatsapp-ddd"),
            n = document.getElementById("whatsapp-number");
        t.onkeyup = function() {
            this.value.length === parseInt(this.attributes.maxlength.value) && n.focus()
        }, wp_send = document.getElementById("button-send-message"), wp_send.addEventListener("click", function(e) {
            ddd = document.getElementById("whatsapp-ddd").value, clientphonenumber = document.getElementById("whatsapp-number").value, link = document.getElementById("trigger-wp-link"), url = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ? "api.whatsapp.com" : "web.whatsapp.com", link.href = "https://" + url + "/send?text=Meu número é " + ddd + "-" + clientphonenumber + "." + custommessage + "&phone=" + phonenumber, link.target = "_blank", console.log("link:" + link.href), link.click()
        }), input = document.getElementById("whatsapp-number"), input.addEventListener("keyup", function(e) {
            13 === e.keyCode && (e.preventDefault(), document.getElementById("button-send-message").click())
        })
    }), close = document.getElementById("whatsapp-number-form-close"), close.addEventListener("click", function(e) {
        document.getElementById("whatsapp-button-page").style.display = "block", document.getElementById("whatsapp-number-form").style.display = "none", document.getElementById("whatsapp-number-form-close").style.display = "none"
    });
</script><!-- fim whatsapp -->

<!-- CORREÇÃO LINK WHATSAPP -->
<script>
document.addEventListener("DOMContentLoaded",function(){window.innerWidth>=991?document.querySelectorAll(".whats-link").forEach(t=>{var e;e=t.href.split("."),t.setAttribute("href","https://web."+e[1]+"."+e[2]),t.setAttribute("target","_blank")}):document.querySelectorAll(".whats-link").forEach(t=>{var e;e=t.href.split("."),t.setAttribute("href","https://api."+e[1]+"."+e[2]),t.setAttribute("target","_blank")})});
</script>
                        
                        

                          

(function() {
	setTimeout(function () {
		if (!localStorage.pureJavaScriptCookies) {
			var element =  document.getElementById('noCookie');
			if (typeof(element) != 'undefined' && element != null)
			{}else {
				//document.body.innerHTML += '<style>@-webkit-keyframes slide-in-bottom {0% {-webkit-transform: translateY(1000px);transform: translateY(1000px);opacity: 0; }100% {-webkit-transform: translateY(0);transform: translateY(0);opacity: 1; }}@keyframes slide-in-bottom {0% {-webkit-transform: translateY(1000px);transform: translateY(1000px);opacity: 0;}100% {-webkit-transform: translateY(0);transform: translateY(0);opacity: 1;}}.slide-in-bottom-eco-cookie {-webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}</style>'; //style
				//document.body.innerHTML += '<div class="box-cookies-eco slide-in-bottom-eco-cookie" style="position:fixed; bottom:0; z-index:9999; background-color:#ffffffe3; display:grid; grid-template-columns: auto auto; padding:5px; margin:4px; border-radius:10px; align-items:center;"><p style="font-size:11px; line-height:13px; color:black !important; margin:0 10px 0 0">Este site usa cookies e semelhantes tecnologias para garantir que você obtenha uma ótima experiência. Ao aceitar ou navegar você está de acordo.</p><button class="btn-cookies-eco" style="border: 2px solid #333;cursor: pointer;background-color: transparent;font-weight: bold;border-radius: 6px;color: #333;">OK</button></div>'; //element

				var saibaMais = '<style>@-webkit-keyframes slide-in-bottom {0% {-webkit-transform: translateY(1000px);transform: translateY(1000px);opacity: 0; }100% {-webkit-transform: translateY(0);transform: translateY(0);opacity: 1; }}@keyframes slide-in-bottom {0% {-webkit-transform: translateY(1000px);transform: translateY(1000px);opacity: 0;}100% {-webkit-transform: translateY(0);transform: translateY(0);opacity: 1;}}.slide-in-bottom-eco-cookie {-webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}</style><style>.btn-cookies-details{appearance:none;background:#fff;border-radius:.25em;color:#000;cursor:pointer;display:inline-block;border:1px solid #000;border-radius:10px;padding:5px 10px;font-size:12px;margin-left:10px;margin-block:10px}.btn-cookies-details:hover{background-color:#c1c1c1}.cookies-details-modal{background:#fff;border-radius:.5em;box-shadow:0 10px 20px rgba(0,0,0,.2);left:50%;max-width:90%;pointer-events:none;position:absolute;transform:translate(-50%,-50%);text-align:left;display:flex;flex-direction:column;margin-top:-325px;max-height:530px;left:33%;left:50vw;width:100%;}.cookies-details-modal .cookies-details-modal-close{align-items:center;color:#111827;display:flex;height:4.5em;justify-content:center;pointer-events:none;position:absolute;right:0;top:0;width:4.5em}.cookies-details-modal .cookies-details-modal-close svg{display:block}.cookies-details-modal .cookies-details-modal-title{color:#111827;padding:1.5em 2em;pointer-events:all;position:relative;width:calc(100% - 4.5em); box-sizing: border-box;}.cookies-details-modal .cookies-details-modal-title h1{font-size:1.25rem;font-weight:600;line-height:normal}.cookies-details-modal .cookies-details-modal-content{border-top:1px solid #e0e0e0;padding:2em;pointer-events:all;overflow:auto;font-size:14px}.cookies-details-modal-overlay{transition:opacity .2s ease-out;pointer-events:none;background:rgba(15,23,42,.8);position:fixed;opacity:0;bottom:0;right:0;left:0;top:0}details[open] .cookies-details-modal-overlay{pointer-events:all;opacity:.5;width:110vw;height:130vh;top:-100vh; left: -5vw;}details summary{list-style:none}details summary:focus{outline:0}details summary::-webkit-details-marker{display:none}code{font-family:Monaco,monospace;line-height:100%;background-color:#2d2d2c;padding:.1em .4em;letter-spacing:-.05em;word-break:normal;border-radius:7px;color:#fff;font-weight:400;font-size:1.75rem;position:relative;top:-2px}@media(max-width:992px){.cookies-details-modal{width: 100%; left: 50%;}}</style>'; //style
				saibaMais += '<div class="box-cookies-eco slide-in-bottom-eco-cookie" style="position:fixed; bottom:0; z-index:9999; background-color:#ffffffe3; display:grid; grid-template-columns: auto auto; padding:5px; margin:4px; border-radius:10px; align-items:center; display: flex; flex-wrap: wrap;"><p style="font-size:11px; line-height:13px; color:black !important; margin:0 10px 0 0">Este site usa cookies e semelhantes tecnologias para garantir que você obtenha uma ótima experiência. Ao aceitar ou navegar você está de acordo.</p><button class="btn-cookies-eco" style="border: 2px solid #333;cursor: pointer;background-color: transparent;font-weight: bold;border-radius: 6px;color: #333;">OK</button><details> <summary> <div class="btn-cookies-details"> Saiba mais </div><div class="cookies-details-modal-overlay"></div></summary> <div class="cookies-details-modal"> <div class="cookies-details-modal-close"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"> <path fill-rule="evenodd" clip-rule="evenodd" d="M13.7071 1.70711C14.0976 1.31658 14.0976 0.683417 13.7071 0.292893C13.3166 -0.0976311 12.6834 -0.0976311 12.2929 0.292893L7 5.58579L1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L5.58579 7L0.292893 12.2929C-0.0976311 12.6834 -0.0976311 13.3166 0.292893 13.7071C0.683417 14.0976 1.31658 14.0976 1.70711 13.7071L7 8.41421L12.2929 13.7071C12.6834 14.0976 13.3166 14.0976 13.7071 13.7071C14.0976 13.3166 14.0976 12.6834 13.7071 12.2929L8.41421 7L13.7071 1.70711Z" fill="black"/> </svg> </div><div class="cookies-details-modal-title"> <h1>Sobre os cookies</h1> </div><div class="cookies-details-modal-content"> <p> Os direitos fundamentais à privacidade e a proteção contra o uso indevido dos dados pessoais de terceiros estão garantidos na Constituição Federal de 1988, mas a LGPD (Lei Geral de Proteção de Dados Pessoais) veio para “regulamentar estes direitos” e estabelecer punições ao tratamento indevido deles. </p><p> Os direitos fundamentais à privacidade e a proteção contra o uso indevido dos dados pessoais de terceiros estão garantidos na Constituição Federal de 1988, mas a LGPD (Lei Geral de Proteção de Dados Pessoais) veio para “regulamentar estes direitos” e estabelecer punições ao tratamento indevido deles. </p><p> O principal objetivo é garantir mais segurança, privacidade e transparência no uso de informações pessoais. </p><p> Com a nova legislação, o usuário terá o direito de consultar gratuitamente quais dos seus dados as empresas têm, como armazenam e até pedir a retirada deles do sistema. </p><p> Neste sentido esta propriedade de domínio passou a usar cookies ou tecnologia similar para melhorar sua experiência enquanto você navega pelo nosso site. </p><p> Para que você, usuário do nosso site tenha uma visão geral sobre o assunto, iremos abordar alguns tópicos sobre a política de Cookies ou tecnologia similar. </p><p> A política de Cookies e tecnologia similares explica: </p><ul> <li>O que são cookies ou tecnologia similar e como os usamos;</li><li>Que tipos de cookies ou tecnologia similar usamos;</li><li>Quais informações coletamos usando cookies ou tecnologia similar;</li><li>Como essas informações são usadas;</li><li>Como controlar as preferências de cookies ou tecnologia similar.</li></ul> <p> Para obter maiores informações sobre como usamos, armazenamos e mantemos seus dados pessoais seguros, consulte nossa Política de Privacidade. </p><p> Você pode a qualquer momento alterar ou retirar seu consentimento da Declaração de Cookies ou tecnologia similar. </p><p> O que são cookies ou tecnologia similares? </p><p> Cookies ou tecnologia similares são pequenos arquivos de texto usados para armazenar pequenos pedaços de informação. </p><p> Eles são armazenados em seu dispositivo quando o site é carregado em seu navegador. </p><p> Para que serve os cookies ou as tecnologias similares </p><ul> <li>Para funcionalidade correta do site</li><li>Para tornar o site mais seguro;</li><li>Fornecer melhor experiência ao usuário;</li><li>Analisar o que precisa ser melhorado no site.</li></ul> <p> Por que utilizamos cookies ou tecnologia similar? </p><p> Como a maioria dos serviços online, nosso site usa cookies ou tecnologia similares primários e de terceiros para diversos fins. </p><ul> <li>Os cookies ou tecnologia similares primários são principalmente necessários para o funcionamento correto do site e não coletam nenhum de seus dados de identificação pessoal.</li><li>Os cookies ou tecnologia similares de terceiros usados em nosso site são principalmente para entender como o site funciona, como você interage com nosso site, mantendo nossos serviços seguros, fornecendo anúncios que são relevantes para você e, em suma, proporcionando-lhe um usuário melhor e melhor experiência e ajudar a acelerar suas futuras interações com nosso site.</li></ul> <p> Que tipos de cookies ou tecnologias similares usamos? </p><p> •Essencial; </p><p> Para que você possa experimentar todas as funcionalidades do nosso site é essencial o uso dos cookies ou tecnologia similares, são eles que permitem manter as sessões do usuário e prevenir quaisquer ameaças à segurança. </p><p> Ao utilizar os cookies ou tecnologias similares nenhuma informação pessoal será coletada ou armazenada e são os cookies ou as tecnologias similares que permitem que você faça login em sua conta, adicione produtos à sua cesta e finalize a compra com segurança. </p><p> •Estatísticas </p><p> Os cookies ou as tecnologias similares armazenam informações como o número de visitantes do site, o número de visitantes únicos, quais páginas do site foram visitadas, a origem da visita, etc. </p><p> Esses dados nos ajudam a entender e analisar o desempenho do site e onde precisa de melhorias. </p><p> •Marketing </p><p> Nosso site exibe anúncios, portanto os cookies ou as tecnologias similares são usados para personalizar estes anúncios e para que estes anúncios sejam significativos para você. </p><p> Esses cookies ou as tecnologias similares também nos ajudam a acompanhar a eficiência dessas campanhas publicitárias. </p><p> As informações armazenadas nesses cookies ou nas tecnologias similares também podem ser usadas por provedores de anúncios de terceiros para mostrar anúncios em outros sites no navegador. </p><p> São os cookies ou as tecnologias similares que auxiliam certas funcionalidades não essenciais em nosso site. </p><p> •Funcional; </p><p> Essas funcionalidades incluem a incorporação de conteúdo como vídeos ou o compartilhamento de conteúdo do site em plataformas de mídia social </p><p> Os cookies ou tecnologias similares também nos ajudam a armazenar suas configurações e preferências de navegação, como preferências de idioma, para que você tenha uma experiência melhor e eficiente em futuras visitas ao site. </p><p> Desta forma, visando proteger o usuário e proporcionar um ambiente tranquilo de navegação nosso conselho é que preste muita atenção nas informações oferecidas ao navegar na internet. </p></div></div></details></div>'; //element

				document.body.insertAdjacentHTML('beforeend', saibaMais);

				const btnCookies = document.querySelector(".btn-cookies-eco");
				btnCookies.addEventListener('click', function() {
				localStorage.setItem("pureJavaScriptCookies", 1);
				document.querySelector(".box-cookies-eco").style.display = "none";
				});
			}
		}
	}, 3000);
})();
               
                        
                        

                      

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.2/flickity.min.css" integrity="sha512-BiFZ6oflftBIwm6lYCQtQ5DIRQ6tm02svznor2GYQOfAlT3pnVJ10xCrU3XuXnUrWQ4EG8GKxntXnYEdKY0Ugg==" crossorigin="anonymous" referrerpolicy="no-referrer" >


<style>
.carousel {
  width: 100%;
  display: block;
}

.carousel-cell {
  width: 100%;
}
</style>
                      
                    

                          
<!-- JavaScript -->
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"><script>
                          
                    

                      
                        
                        <section class="section-breadcrumbs">
                          <div class="container">
                            <h2 class="pageIdentify"></h2>
                            <ol id="breadcrumb" vocab="http://schema.org/" typeof="BreadcrumbList">
                              <li property="itemListElement" id="linkInicial" typeof="ListItem">
                                <a property="item" id="pageInitialUrl" typeof="WebPage" href="">
                                <span property="name" id="pageInitialName">Inicial</span></a> /
                                <meta property="position" content="1">
                              </li>
                              <li property="itemListElement" typeof="ListItem" class="lastItem">
                              <a property="item" id="pageUrl" typeof="WebPage" href="">
                                  <span property="name" class="active"><strong id="pageName"><br /></strong></span></a>
                                <meta property="position" content="2">
                              </li>
                            </ol>
                          </div>
                        </section>
                      
                   

                      

<style>
  /* BREADCRUMBS */
  .section-breadcrumbs {
    background-color: #F5F7FB;
    padding: 30px 0px;
  }

  .section-breadcrumbs .container {
    text-align: center;
  }
  
  .section-breadcrumbs h2 {
    font-size: 20px;
  }

  .section-breadcrumbs #breadcrumb {
    list-style: none;
    display: inline-block;
    justify-content: center;
    align-items: center;
    padding: 0px;
    margin: 0px;
  }

  .section-breadcrumbs #breadcrumb li {
    display: inline-block;
  }

  .section-breadcrumbs #breadcrumb a {
    color: #1D1D1D;
  }
</style>
                      
                    

                          
/* BREADCRUMBS */
    // Colocar a url do site com '/' no final *lembrar de trocar a url ao colocar o site no ar
    urlBase = 'https://componentes.interago.com.br/';

    // Chama a função para popular os breadcrumbs passando a url base do site como parâmetro
	  if(urlBase != document.location.href){
		popularBreadcrumbs(urlBase);
	  }
      
  
      // Função para popular os cambos variáveis do breadcrumbs, os parametros são: 1 = url do site com '/' no final, 2 = nome do indice da url da página dinamica, 3 = texto que será exibido no breadcrumbs
      function popularBreadcrumbs (url, urlSeo, tituloSeo, tipo) {

		var urlAtual = document.location.href;

		var urlPaginas = urlAtual.split('/');

		document.querySelector('#pageInitialUrl').setAttribute('href', url);
	
		// Coloca a url da página no campo de url da página
		document.querySelector('#pageUrl').setAttribute('href', document.location.href);
		//document.querySelector('#pageName').html(document.title);

		// Pega o conteúdo da primeira tag title no header
		var documentTitle = document.querySelector("title").textContent;

		// Separa o titulo da página em um array
		var aTitulo = documentTitle.split('-').slice(1).join('-');
		// O titulo da página no indice 1 é colocado no lugar do nome da página
		document.querySelector('#pageName').innerHTML = aTitulo;
		if(document.querySelector('.pageIdentify')){
			document.querySelector('.pageIdentify').innerHTML = aTitulo;
		}

		// Se for uma página de Seo, será passado o conteúdo do parâmetro urlSeo e adiciona um list item no breadcrumbs
		if(urlSeo){
			/*document.querySelector('#linkInicial').after('<li property="itemListElement" typeof="ListItem"><a property="item" id="pageMidUrl" typeof="WebPage" href="'+url+urlSeo+'"><span property="name" class="active" id="pageMidName" style="text-transform: capitalize;"><br /> '+tituloSeo+'</span></a> / <meta property="position" content="2"></li>');*/
			var elemento = document.querySelector('#linkInicial');
			// Tipo de página com nivel de categoria igual a 2
			if(tipo == 2) {
				if(urlPaginas.length == 6 || (urlPaginas[3] == 'App' && urlPaginas.length == 9)) {
					if(urlPaginas[3] == 'App'){
						var urlSub = urlPaginas[7].replaceAll('-',' ');
						elemento.insertAdjacentHTML('afterend', '<li property="itemListElement" typeof="ListItem"><a property="item" id="pagePrevUrl" typeof="WebPage" href="'+url+urlSeo+'/'+urlPaginas[7]+'"><span property="name" class="active" id="pagePrevName" style="text-transform: capitalize;">'+urlSub+'</span></a> / <meta property="position" content="3"></li>');
					}
					else {
						var urlSub = urlPaginas[4].replaceAll('-',' ');
						elemento.insertAdjacentHTML('afterend', '<li property="itemListElement" typeof="ListItem"><a property="item" id="pagePrevUrl" typeof="WebPage" href="'+url+urlSeo+'/'+urlPaginas[4]+'"><span property="name" class="active" id="pagePrevName" style="text-transform: capitalize;">'+urlSub+'</span></a> / <meta property="position" content="3"></li>');
					}
					
					elemento.insertAdjacentHTML('afterend', '<li property="itemListElement" typeof="ListItem"><a property="item" id="pageMidUrl" typeof="WebPage" href="'+url+urlSeo+'"><span property="name" class="active" id="pageMidName" style="text-transform: capitalize;">'+tituloSeo+'</span></a> / <meta property="position" content="2"></li>');

					// Coloca position 4 no quarto item da lista selecionando pela classe lastItem
					document.querySelector('.lastItem meta').setAttribute('content', '4');
				}
				else {
					elemento.insertAdjacentHTML('afterend', '<li property="itemListElement" typeof="ListItem"><a property="item" id="pageMidUrl" typeof="WebPage" href="'+url+urlSeo+'"><span property="name" class="active" id="pageMidName" style="text-transform: capitalize;">'+tituloSeo+'</span></a> / <meta property="position" content="2"></li>');

					// Coloca position 3 no terceiro item da lista selecionando pela classe lastItem
					document.querySelector('.lastItem meta').setAttribute('content', '3');
				}
			}
			// Tipo de página com nivel de categoria igual a 3
			else if(tipo == 3) {
				if(urlPaginas.length == 7 || (urlPaginas[3] == 'App' && urlPaginas.length == 10)) {
					if(urlPaginas[3] == 'App') {
						var urlCat = urlPaginas[7].replaceAll('-',' ');
						var urlSub = urlPaginas[8].replaceAll('-',' ');
						// Insere a Subcategoria
						elemento.insertAdjacentHTML('afterend', '<li property="itemListElement" typeof="ListItem"><a property="item" id="pagePrevUrl" typeof="WebPage" href="'+url+urlSeo+'/'+urlPaginas[7]+'/'+urlPaginas[8]+'"><span property="name" class="active" id="pagePrevName" style="text-transform: capitalize;">'+urlSub+'</span></a> / <meta property="position" content="4"></li>');

						// Insere a Categoria
						elemento.insertAdjacentHTML('afterend', '<li property="itemListElement" typeof="ListItem"><a property="item" id="pageSecondUrl" typeof="WebPage" href="'+url+urlSeo+'/'+urlPaginas[7]+'"><span property="name" class="active" id="pageSecondName" style="text-transform: capitalize;">'+urlCat+'</span></a> / <meta property="position" content="3"></li>');
						

					}
					else {
						var urlCat = urlPaginas[4].replaceAll('-',' ');
						var urlSub = urlPaginas[5].replaceAll('-',' ');
						// Insere a Categoria
						elemento.insertAdjacentHTML('afterend', '<li property="itemListElement" typeof="ListItem"><a property="item" id="pagePrevUrl" typeof="WebPage" href="'+url+urlSeo+'/'+urlPaginas[4]+'/'+urlPaginas[5]+'"><span property="name" class="active" id="pagePrevName" style="text-transform: capitalize;">'+urlSub+'</span></a> / <meta property="position" content="4"></li>');

						// Insere a Subcategoria
						elemento.insertAdjacentHTML('afterend', '<li property="itemListElement" typeof="ListItem"><a property="item" id="pageSecondUrl" typeof="WebPage" href="'+url+urlSeo+'/'+urlPaginas[4]+'"><span property="name" class="active" id="pageSecondName" style="text-transform: capitalize;">'+urlCat+'</span></a> / <meta property="position" content="3"></li>');
						
					}

					elemento.insertAdjacentHTML('afterend', '<li property="itemListElement" typeof="ListItem"><a property="item" id="pageMidUrl" typeof="WebPage" href="'+url+urlSeo+'"><span property="name" class="active" id="pageMidName" style="text-transform: capitalize;">'+tituloSeo+'</span></a> / <meta property="position" content="2"></li>');

					// Coloca position 4 no quarto item da lista selecionando pela classe lastItem
					document.querySelector('.lastItem meta').setAttribute('content', '5');
				}
				else if(urlPaginas.length == 6 || (urlPaginas[3] == 'App' && urlPaginas.length == 9)) {
					if(urlPaginas[3] == 'App') {
						var urlSub = urlPaginas[7].replaceAll('-',' ');
						elemento.insertAdjacentHTML('afterend', '<li property="itemListElement" typeof="ListItem"><a property="item" id="pagePrevUrl" typeof="WebPage" href="'+url+urlSeo+'/'+urlPaginas[7]+'"><span property="name" class="active" id="pagePrevName" style="text-transform: capitalize;">'+urlSub+'</span></a> / <meta property="position" content="3"></li>');

					}
					else {
						var urlSub = urlPaginas[4].replaceAll('-',' ');
						elemento.insertAdjacentHTML('afterend', '<li property="itemListElement" typeof="ListItem"><a property="item" id="pagePrevUrl" typeof="WebPage" href="'+url+urlSeo+'/'+urlPaginas[4]+'"><span property="name" class="active" id="pagePrevName" style="text-transform: capitalize;">'+urlSub+'</span></a> / <meta property="position" content="3"></li>');
					}
					
					elemento.insertAdjacentHTML('afterend', '<li property="itemListElement" typeof="ListItem"><a property="item" id="pageMidUrl" typeof="WebPage" href="'+url+urlSeo+'"><span property="name" class="active" id="pageMidName" style="text-transform: capitalize;">'+tituloSeo+'</span></a> / <meta property="position" content="2"></li>');

					// Coloca position 4 no quarto item da lista selecionando pela classe lastItem
					document.querySelector('.lastItem meta').setAttribute('content', '4');
				}
				else {
					elemento.insertAdjacentHTML('afterend', '<li property="itemListElement" typeof="ListItem"><a property="item" id="pageMidUrl" typeof="WebPage" href="'+url+urlSeo+'"><span property="name" class="active" id="pageMidName" style="text-transform: capitalize;">'+tituloSeo+'</span></a> / <meta property="position" content="2"></li>');

					// Coloca position 3 no terceiro item da lista selecionando pela classe lastItem
					document.querySelector('.lastItem meta').setAttribute('content', '3');
				}
				
			}
			// Tipo de página com nivel de categoria igual a 1
			else {
				elemento.insertAdjacentHTML('afterend', '<li property="itemListElement" typeof="ListItem"><a property="item" id="pageMidUrl" typeof="WebPage" href="'+url+urlSeo+'"><span property="name" class="active" id="pageMidName" style="text-transform: capitalize;">'+tituloSeo+'</span></a> / <meta property="position" content="2"></li>');

				// Coloca position 3 no terceiro item da lista selecionando pela classe lastItem
				document.querySelector('.lastItem meta').setAttribute('content', '3');
			}

			
			
		}
	}