@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;

* {
  scroll-behavior: smooth;

  font-family: "Nunito", sans-serif;
}

html,
body {
  overflow-x: hidden;
  width: 100%;
}

/* HEADER */

 
#navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  background-color: #fff;
  z-index: 10000;
  /* border-bottom: 1px solid #E2E8F0; */
}

div img {
  width: 160px;
  height: 31px;
}

.navlink {
  display: inline-flex;
  width: 409px;
  gap: 32px;
}

.navlink li {
  list-style: none;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  color: #303030;
}

.navlink a {
  text-decoration: none;
}

#usuarioDados {
  display: flex;
    justify-content: flex-end; 
}


/* .login {
  display: none;
  width: 259px;
  gap: 16px;
}

.sigin {
  width: 91px;
  border-radius: 20px;
  background-color: transparent;
  color: #0090d3;
  font-family: "Nunito", sans-serif;
  text-align: center;
  border-color: transparent;
  cursor: pointer;
}
.sigin-up {
  width: 152px;
  height: 40px;
  border-radius: 20px;
  background-color: #0090d3;
  border-color: transparent;
  color: #fff;
} */

/* INTRODUÇÃO */

.introduction {
  display: flex;
  height: 600px;
  padding: 80px;
  gap: 80px;
  border-bottom: 1px solid #e2e8f0;
}

@media (max-width: 820px) {
  .text h1 {
    font-size: 62px;
  }
}

@media (max-width: 378px) {
  .text h1 {
    font-size: 56px;
  }
}

@media (max-width: 820px) {
  .text2 h1 {
    font-size: 62px;
  }
}

@media (max-width: 378px) {
  .text2 h1 {
    font-size: 56px;
  }
}

@media (max-width: 820px) {
  .text3 h1 {
    font-size: 63px;
  }
}

@media (max-width: 378px) {
  .text3 h1 {
    font-size: 56px;
  }
}

.text4{
  width: 388px;
}

@media (max-width: 820px) {
  .text4 h1 {
    font-size: 63px;
  }
}

@media (max-width: 378px) {
  .text4 h1 {
    font-size: 56px;
  }
}

/*  .text h1 {
    font-size: 72px;
    font-family: 'Nunito', sans-serif;
    color: #0F172A;
    height: auto;
    line-height: normal;
} */

.text p {
  margin-top: 12px;
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  color: #475569;
  line-height: 24px;
}

@media (min-width: 1025px) {
  .text p {
    width: 600px;
  }
}

.email {
  width: 392px;
  height: 40px;
  margin-right: 12px;
  margin-top: 12px;
  border-radius: 20px;
  border: solid 1px #c4c4c4;
  color: #c4c4c4;
}

.apresentation {
  display: inline-flex;
  width: 100%;
}

/* .apresentation img {
  width: 626px;
  height: 417px;
} */

@media (max-width: 1024px) {
  .apresentation img {
    height: 626px;
  }
}

@media (max-width: 920px) {
  .apresentation img {
    height: 260px;
  }
}

@media (max-width: 630px) {
  .apresentation img {
    height: 320px;
  }
}

@media (max-width: 410px) {
  .apresentation img {
    height: 275px;
  }
}

/* CLIENTES */

/* .client {
    display: flex;
    justify-content: center;
    padding-top: 20px;
} */

/* .client h1 {
    font-size: 32px;
    font-family: 'Nunito', sans-serif;
    font-weight: 700px;
} */

.companies {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 80px;
  padding: 80px;
}

/* .companies .dustre {
    width: 184px;
    height: 46px;
} */

/* .companies .verosenso {
    width: 364px;
    height: 30px;
} */

/* .companies .harpon {
    width: 234px;
    height: 60px;
} */

.companies .mostaza {
  width: 236px;
  height: 81px;
}

/* CERTIFICADO */

.quality {
  display: flex;
  height: 652px;
  padding: 80px 0px 80px 80px;
}

.certificate {
  width: 660px;
  height: 308px;
  padding: 24px 0;
}

/* .text2 h1 {
    font-size: 56px;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    line-height: 61px;
    color: #0F172A;
} */

.text2 p {
  margin-top: 12px;
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  color: #475569;
  line-height: 24px;
}

.about-more {
  margin-top: 20px;
  font-size: 14px;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  line-height: 21px;
  background-color: transparent;
  border-color: transparent;
  color: #0090d3;
  cursor: pointer;
}

.painel {
  overflow: visible;
  position: relative;
  width: 994px;
  height: 578px;
}

.painel img {
  border-radius: 20px;
  transition: transform 0.5s ease-in-out;
  transform: translateX(30%); /* Esconde 30% da imagem à esquerda */
  box-shadow: -8px 8px 16px 0px #00000014;
}

.painel:hover img {
  transform: translateX(
    0
  ); /* Move a imagem para a posição original ao passar o mouse */
  box-shadow: -8px 8px 16px 0px #00000014;
  z-index: 99;
}

.painel2 {
  overflow: visible;
  position: relative;
  width: 994px;
  height: 578px;
  flex-direction: row-reverse;
}

.painel2 img {
  border-radius: 20px;
  transition: transform 0.5s ease-in-out;
  transform: translateX(-30%); /* Esconde 30% da imagem à esquerda */
  box-shadow: 8px 8px 16px 0px #00000014;
}

.painel2:hover img {
  transform: translateX(
    0
  ); /* Move a imagem para a posição original ao passar o mouse */
  box-shadow: 8px 8px 16px 0px #00000014;
  z-index: 99;
}

@media (max-width: 768px) {
  .painel.scrolled img,
  .painel2.scrolled img {
    transform: translateX(0);
  }
}

@media (min-width: 320px) and (max-width: 539px) {
  /*   .imgcert {
    content: url("../img/certificateScreen.png");
    box-shadow: 0;
  }

  .imgprod {
    content: url("../img/productionScreen.png");
  }

  .imgrout {
    content: url("../img/routerScreen.png");
    box-shadow: 0;
  } */

  /*   .painel img,
  .painel2 img {
    transform: none !important;
  } */
}

/* PRODUÇÃO */

.production {
  display: flex;
  align-items: center;
  padding: 80px 0px 80px 80px;
  flex-direction: row-reverse;
  position: absolute;
}

@media (min-width: 320px) and (max-width: 410px) {
  .production {
    margin-top: 150px;
    position: absolute
  }
}

@media (min-width: 320px) and (max-width: 410px) {
  /*.router img {
    margin-top: 80px;
  }*/
}
/* .image-production {
    width: 600px;
    height: 464px;
} */

.image-production img {
  /* width: 600px;
    height: 464px; */
  border-radius: 20px;
}

.control-of-production {
  display: flex;
  align-items: center;
  width: 450px;
  height: 265px;
  position: absolute
}

.text3 h1 {
   /* font-size: 56px; */
   padding-top: 10px;
   font-family: "Nunito", sans-serif;
   font-weight: 800;
   line-height: 61px;
   color: #0f172a;
 
} 

.text3 p {
  margin-top: 12px;
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  line-height: 24px;
  color: #475569;
} 

/* ROTEIRIZAÇÃO */

.router {
  display: flex;
  align-items: center;
  padding: 80px 0px 80px 80px;
  gap: 24px;
}


.text4 h1 {
  /* font-size: 56px; */
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  line-height: 61px;
  color: #0f172a;

}

.text4 p {
  margin-top: 12px;
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  line-height: 24px;
  color: #475569;
  
}

.work img {
  width: 800px;
  border-radius: 20px;
}

@media (max-width: 410px) {
  .work img {
    width: 370px;
    height: 280px;
  }
}

@media (max-width: 1023px) {
  .work img {
    height: 300px;
  }
}

/* INTEGRAÇÕES */

.integration {
  position: relative;
  padding: 80px;
}

.tools {
  width: 1200px;
  border-radius: 30px;
  object-fit: cover;
  display: block;
}

/* @media (max-width: 410px) {
    .integration img {
        display: none;
    }
} */

.integration::after {
  content: "";
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-49.5%);
  width: 1200px;
  height: 464px;
  border-radius: 30px;
  background: linear-gradient(
    90deg,
    rgba(38, 100, 129, 0.2) 0%,
    rgba(38, 100, 129, 0.676) 55.5%,
    #266481 100%
  );
  z-index: 1;
  pointer-events: none;
}

@media (min-width: 1536px) {
  .integration::after {
    top: 80px;
    left: 50%;
    height: 464px;
    border-radius: 20px;
    background: linear-gradient(
      90deg,
      rgba(38, 100, 129, 0.1) 0%,
      rgba(38, 100, 129, 0.5) 50%,
      #266481 100%
    );
  }
}

@media (max-width: 1279px) {
  .integration::after {
    top: 80px;
    left: 50%;
    width: 96%;
    height: 464px;
    border-radius: 20px;
    background: linear-gradient(
      90deg,
      rgba(38, 100, 129, 0.1) 0%,
      rgba(38, 100, 129, 0.5) 50%,
      #266481 100%
    );
  }
}

@media (max-width: 1023px) {
  .integration::after {
    top: 11px;
    left: 50%;
    width: 96%;
    height: 464px;
    border-radius: 20px;
    background: linear-gradient(
      90deg,
      rgba(38, 100, 129, 0.1) 0%,
      rgba(38, 100, 129, 0.5) 50%,
      #266481 100%
    );
  }
}

@media (max-width: 767px) {
  .integration::after {
    top: 19px;
    left: 50%;
    width: 92%;
    height: 464px;
    border-radius: 20px;
    background: linear-gradient(
      90deg,
      rgba(38, 100, 129, 0.1) 0%,
      rgba(38, 100, 129, 0.5) 50%,
      #266481 100%
    );
  }
}

@media (max-width: 539px) {
  .integration::after {
    display: none;
    top: 10px;
    left: 50%;
    width: 95%;
    height: 400px;
    border-radius: 20px;
    background: linear-gradient(
      90deg,
      rgba(38, 100, 129, 0.1) 0%,
      rgba(38, 100, 129, 0.5) 50%,
      #266481 100%
    );
  }
}

@media (max-width: 410px) {
  .integration::after {
    display: none;
    top: 10px;
    left: 50%;
    width: 95%;
    height: 300px;
    border-radius: 20px;
    background: linear-gradient(
      90deg,
      rgba(38, 100, 129, 0.1) 0%,
      rgba(38, 100, 129, 0.5) 50%,
      #266481 100%
    );
  }
}

.ordeno {
  width: 373px;
  height: 368px;
  position: absolute;
  top: 20%;
  left: 17%;
  z-index: 9999;
}

.ordeno img {
  width: 373px;
  height: 368px;
}

@media (max-width: 1023px) {
  .ordeno img {
    width: 250px;
    height: 250px;
  }
}

@media (max-width: 767px) {
  .ordeno img {
    width: 200px;
    height: 200px;
  }
}

@media (max-width: 539px) {
  .ordeno img {
    width: 300px;
    height: 300px;
  }
}

@media (max-width: 539px) {
  .dustre {
    place-self: center;
  }
  .verosenso {
    place-self: center;
  }
  .harpon {
    place-self: center;
  }
}

@media (max-width: 410px) {
  .ordeno img {
    width: 250px;
    height: 250px;
  }
}

.text5 {
  width: 520px;
  height: 284px;
  position: absolute;
  top: 12%;
  left: 130%;
}

.text5 h1 {
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  color: #fff;
  line-height: 61.6px;
}

@media (max-width: 767px) {
  .text5 h1 {
    line-height: 40px;
  }
}
@media (max-width: 539px) {
  .text5 h1 {
    line-height: 30px;
    color: #0f172a;
  }
}
@media (max-width: 410px) {
  .text5 h1 {
    line-height: 21.6px;
    color: #0f172a;
  }
}

.text5 p {
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  line-height: 24px;
  color: #fff;
  margin-top: 20px;
}

@media (max-width: 539px) {
  .text5 p {
    color: #0f172a;
  }
}

@media (max-width: 410px) {
  .text5 p {
    color: #0f172a;
  }
}

.about-more-white {
  font-family: "Nunito", sans-serif;
  font-size: 14px;
  color: #fff;
  margin-top: 40px;
}

/* PLANOS */

.plan {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 80px;
  gap: 24px;
}

.basic-plan {
  width: 348px;
  height: 495px;
  border-radius: 16px;
  border: solid 1px #ebebeb;
}

.basic-plan h2 {
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 20px;
  text-align: center;
  color: #0090d3;
  padding-top: 40px;
}

.basic-plan h1 {
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 32px;
  text-align: center;
  color: #303030;
  padding-top: 30px;
}

.basic-plan h4 {
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  font-size: 14px;
  text-align: center;
  color: #696969;
}

.basic-plan ul {
  display: grid;
  gap: 8px;
  padding-left: 30px;
}

.basic-plan li {
  display: flex;
  align-items: center;
}

.basic-plan li img {
  width: 18px;
  height: 18px;
}

.basic-plan li p {
  margin-left: 12px;
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  font-size: 14px;
}

.want-more {
  width: 284px;
  height: 40px;
  border-radius: 20px;
  border: solid 1px #0090d3;
  color: #0090d3;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 14px;
  margin: 15px 30px;
}

.pro-plan {
  width: 348px;
  height: 532px;
  border-radius: 16px;
  border: solid 1px #ebebeb;
  margin-top: -40px;
}

.recomendation {
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  background-color: #0090d3;
  color: #fff;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  padding: 8px;
}

.pro-plan h2 {
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 20px;
  text-align: center;
  color: #0090d3;
  padding-top: 40px;
}

.pro-plan h1 {
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 32px;
  text-align: center;
  color: #303030;
  padding-top: 30px;
}

.pro-plan h4 {
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  font-size: 14px;
  text-align: center;
  color: #696969;
}

.pro-plan ul {
  display: grid;
  gap: 8px;
  padding-left: 30px;
}

.pro-plan li {
  display: flex;
  align-items: center;
}

.pro-plan li img {
  width: 18px;
  height: 18px;
}

.pro-plan li p {
  margin-left: 12px;
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  font-size: 14px;
}

.want-more-pro {
  width: 284px;
  height: 40px;
  border-radius: 20px;
  border: solid 1px #0090d3;
  background-color: #0090d3;
  color: #fff;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 14px;
  margin: 15px 30px;
}

.corp-plan {
  width: 348px;
  height: 495px;
  border-radius: 16px;
  border: solid 1px #ebebeb;
}

.corp-plan h2 {
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 20px;
  text-align: center;
  color: #0090d3;
  padding-top: 40px;
}

.corp-plan h1 {
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 32px;
  text-align: center;
  color: #303030;
  padding-top: 30px;
}

.corp-plan h4 {
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  font-size: 14px;
  text-align: center;
  color: #696969;
}

.corp-plan ul {
  display: grid;
  gap: 8px;
  padding-left: 30px;
}

.corp-plan li {
  display: flex;
  align-items: center;
}

.corp-plan li img {
  width: 18px;
  height: 18px;
}

.corp-plan li p {
  margin-left: 12px;
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  font-size: 14px;
}

/* FORMULÁRIO*/

.form-container {
  background-color: #00537a;
  color: #fff;
  padding: 80px;
  border-radius: 30px;
  width: 1110px;
  height: auto;
  text-align: center;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  margin: auto;
}

@media (max-width: 1023px) {
  .form-container {
    border-radius: 0;
  }
}

@media (max-width: 539px) {
  .form-container {
    border-radius: 0;
  }
}

@media (max-width: 410px) {
  .form-container {
    border-radius: 0;
  }
}

/* .form-container h1 {
    font-size: 56px;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    line-height: 61px;
    text-align: center;
}

.form-container p {
    font-size: 18px;
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    line-height: 29px;
    text-align: center;
} */

/* .form {
    display: flex;
    justify-content: center;
    padding: 40px;
} */

/* form {
    display: flex;
    flex-direction: column;
    gap: 20px;
} */

label {
  text-align: left;
  font-weight: 700;
  line-height: 21px;
  font-size: 14px;
  font-family: "Nunito", sans-serif;
}

/* .form-container input, textarea {
    width: 588px;
    padding: 10px 16px 9px 16px;
    border-radius: 20px;
    height: 40px;
    border: none;
    outline: none;
    background-color: #EBEBEB;
    color: #555;
} */

.form-container input::placeholder,
textarea::placeholder {
  color: #c4c4c4;
  font-size: 14px;
  font-family: "Nunito", sans-serif;
  font-weight: 400;
}

/* textarea {
    resize: none;
    height: 40px;
} */

.send {
  width: 109px;
  height: 40px;
  border-radius: 20px;
  padding: 10px 24px 9px 16px;
  color: #fff;
  background-color: #0090d3;
  border: transparent;
  margin: auto;
  cursor: pointer;
}

/* FOOTER */

.footer {
  display: flex;
  align-items: center;
  padding: 80px;
}

.footer a {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #475569;
  font-family: "Nunito", sans-serif;
  font-weight: 400;
}

.footer-links {
  display: inline-flex;
  gap: 20px;
  margin-left: auto;
  padding-right: 50px;
}

.footer-links li {
  list-style: none;
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  color: #475569;
}

.whatsapp-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #74e48c;
  color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 9999;
}
.whatsapp-button img {
  width: 35px;
  height: 35px;
}

#menu {
  position: absolute;
  right: 0;
  top: 12px;
  background-color: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  padding: 16px;
  border-radius: 12px;
  width: 150px;
  max-height: 40vh;
  z-index: 50;
  display: none; 
  transform: scale(0.95);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

#menu.open {
  display: block; 
  transform: scale(1); 
  opacity: 1; 
}

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

#menu ul a {
  text-decoration: none;
  color: #333;
  display: block;
}

#menu ul li {
  padding: 12px 16px;
  font-size: 16px;
  text-align: left;
  transition: background-color 0.3s ease, color 0.3s ease;
}

#menu ul li:hover {
  color: #ffffff;
  background-color: #007bffa6;
}