@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap");
@import url("https://fonts.cdnfonts.com/css/sf-ui-text-2");

:root {
  --font-style-normal: "Comfortaa", sans-serif;
  --font-family-nunito: "Nunito Sans", sans-serif;
  --font-family-SF: "SF UI Text", sans-serif;
}
/* --------------------------------------------------------------------------------------- */
/* Reset padrão */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  min-width: 1024px;
  min-height: 1440px;
  margin: 0 auto;
  overflow-x: hidden; /* Evita rolagem lateral */
}
/* --------------------------------------------------------------------------------------- */
/* Estrutura geral */
.sessao {
  padding: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.sessao-content-video {
  padding: 50px;
  display: flex;
  align-items: center;
  background: linear-gradient(to right, #24530de0, #4a6a2154);
}

/* --------------------------------------------------------------------------------------- */
/* Menu */
.menu {
  background-color: #00374d;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 100;
  box-shadow: 0 4px 4px 2px rgba(0, 0, 0, 0.1);
}

.menu-contato-interna {
  background-color: #00374d;
  width: 100%;
  box-shadow: 0 4px 4px 2px rgba(0, 0, 0, 0.1);
}

nav {
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: center;
  justify-items: end;
}

.nav {
  display: flex;
  align-items: center;
  justify-items: center;
  flex-direction: row;
  justify-content: space-between;
  gap: 20px;
}

.menu-list {
  display: flex;
  align-items: center;
  list-style: none;
  margin-top: 10px;
}

.menu-list li {
  margin-right: 20px;
}

.menu-list a {
  text-decoration: none;
  color: white;
  font-family: var(--font-style-normal);
  font-size: 16px;
  padding: 10px;
}

a {
  text-decoration: none;
}

.container-access-platform {
  background-color: #398aa9;
  padding: 30px;
  text-align: center;
}

.access-platform {
  background-color: #398aa9;
  color: white;
  font-family: var(--font-style-normal);
  font-size: 16px;
  margin-top: 10px;
  border: none;
  cursor: pointer;
  width: 250px;
  height: 75px;
}

.access-platform:hover {
  background-color: #1284b1;
}
/* --------------------------------------------------------------------------------------- */
/* Dropdown */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropbtn {
  background: none;
  border: none;
  cursor: pointer;
  color: white;
  font-family: var(--font-style-normal);
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.dropdown-content {
  display: none;
  position: absolute;
  left: -30%;
  background-color: #003366;
  min-width: 120px;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: white;
  font-family: var(--font-style-normal);
  padding: 10px 16px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}

.dropdown-content a:hover {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dropdown:hover .dropdown-content {
  display: block;
}
/* --------------------------------------------------------------------------------------- */
/* Sessão 1: Vídeo de fundo */

.img-ast {
  position: relative;
  bottom: 30px;
}

.container-background-img {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* Imagem que fica sobre o vídeo, mas por trás dos textos */
.overlay-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}

.video-section {
  position: relative;
  height: 100vh;
}

.background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content-video {
  color: white;
  margin-left: 10%;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.text-titel {
  margin: 10px 0;
  font-size: 51px;
  font-family: var(--font-style-normal);
}

.text-titel-sub {
  margin: 10px 0;
  font-size: 28px;
  font-family: var(--font-style-normal);
}

.discover {
  text-decoration: none;
  color: white;
  border: 2px solid;
  border-radius: 50px;
  padding: 10px 50px;
  font-size: 26px;
  font-family: var(--font-style-normal);
}

.container-text,
.container-link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
}

.container-percente {
  position: absolute;
  bottom: 5px;
  left: 0%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-items: center;
  align-items: stretch;
  width: 100%;
}

.container-percente-item {
  max-width: 60%;
  position: relative;
  transform: skewX(-12deg);
  border-left: 8px solid #cb8215;
  transition: background-color 0.6s ease-in-out;
  padding: 20px;
  line-height: 30px;
}

.container-percente-item:hover {
  background-color: rgba(255, 255, 255, 0.1); /* Fundo ao passar o mouse */
  font-weight: bold;
}

.container-percente-item .span-text {
  display: none;
  position: relative;
  top: -20px;
  left: 50%;
  transform: translateX(-50%) skewX(10deg); /* Centraliza horizontalmente e aplica a inclinação */
  font-size: 30px;
  color: white;
  font-family: var(--font-family-nunito);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Adiciona a transição */
}

.container-percente-item:hover .span-text {
  display: block;
  margin: 15px;
  transform: translateX(-50%) skewX(-5deg) translateY(0);
}

.percente-number {
  font-size: 80px;
  color: #ffffff;
  font-family: var(--font-family-SF);
  font-style: italic;
}

.percente-text {
  width: 100%;
  font-size: 25px;
  display: inline-block;
  word-wrap: break-word;
  white-space: normal;
  color: #ffffff;
  font-family: var(--font-family-SF);
  font-style: italic;
}

.container-percente-item .content-transform {
  transform: skewX(12deg); /* Reverte a inclinação dentro da div */
}
/* --------------------------------------------------------------------------------------- */
/* Sessão 2: Texto e logo no centro */
.container {
  display: flex;
  width: 100%;
  height: 95vh;
  position: relative;
}

.section {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: flex 0.5s ease-in-out;
  overflow: hidden;
  cursor: pointer;
}

.title-content-left {
  background-color: #398aa9;
}

.title-content-right {
  background-color: #00374d;
}

.title-content-right,
.title-content-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
  text-align: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.title-content-span-left,
.title-content-span-right {
  font-size: 28px;
  font-family: var(--font-style-normal);
  margin: 15%;
}

.content-line-color {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  justify-content: center;
}

.text-item {
  max-width: 80%;
  word-wrap: break-word;
  white-space: normal;
  margin: 10px 0;
  position: relative;
  transition: background-color 0.6s ease-in-out;
  line-height: 30px;
  font-size: 1.7rem;
  font-style: italic;
  font-weight: 200;
  font-family: var(--font-family-SF);
}

.text-item-color {
  display: block;
  width: 17px;
  height: 6px;
  background-color: #cb8215;
  transform: skewY(-15deg) rotate(106deg);
  margin-right: 10px;
  align-self: center;
}

.content {
  font-size: 16px;
  color: white; /* Ajuste a cor do texto, se necessário */
}

.content-d {
  background-image: url(../assets/bg_2aba-D.png);
  background-color: rgba(143, 180, 62, 0.3); /* Cor preta semi-transparente */
  background-blend-mode: overlay; /* Mistura a cor com a imagem */
  background-size: cover; /* Para garantir que a imagem cubra todo o fundo */
  background-position: center;
}

.content-e {
  background-image: url(../assets/bg_2aba-E.png);
  background-color: rgba(143, 180, 62, 0.3); /* Cor preta semi-transparente */
  background-blend-mode: overlay; /* Mistura a cor com a imagem */
  background-size: cover; /* Para garantir que a imagem cubra todo o fundo */
  background-position: center;
}

.section .content {
  display: none; /* Oculta o texto por padrão */
}

.section.expanded .content {
  /* display: block; */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Inicialmente, a content-line está visível */
.content-line {
  display: inline;
}

/* Quando a seção está comprimida, a content-line é ocultada */
.section.collapsed .content-line {
  display: none;
}

.section.collapsed .title-content-span-right {
  transform: rotate(180deg);
  writing-mode: vertical-rl;
  text-align: center;
  height: 90%;
  width: auto;
  margin: 0;
  display: block;
}

.section.collapsed .title-content-span-left {
  transform: rotate(180deg);
  writing-mode: vertical-rl;
  text-align: center;
  height: 90%;
  width: auto;
  margin: 0;
  display: block;
}

/* Ajustes gerais para a seção comprimida */
.section.collapsed {
  display: flex;
  justify-content: center;
  align-items: center;
}

.section.collapsed .title-content {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Quando a seção está expandida, a content-line é visível */
.section.expanded .content-line {
  display: inline;
}

.img-logo-back {
  background: linear-gradient(to right, #398aa9 50%, #00374d 50%);
  display: flex;
  align-items: center;
}

.expanded {
  flex: 10;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.collapsed {
  flex: 1;
}

.container-list-right {
  gap: 50px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 50px;
  width: 100vh;
  height: 30%;
}

.container-list-left {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 50px;
  width: 100vh;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.card-left {
  display: flex;
  align-items: stretch;
  color: white;
  width: 100%;
  min-height: 50%;
}

.card-right {
  display: flex;
  align-items: stretch;
  color: white;
  width: 100%;
  height: 100%;
}

.icon {
  position: relative;
  transform: skewX(-10deg);
  transition: background-color 0.6s ease-in-out;
  background: #7db84deb;
  padding: 20px;
  display: flex;
  align-items: center;
}

.content-text {
  position: relative;
  transform: skewX(-10deg);
  border-left: 8px solid #cb8215;
  transition: background-color 0.6s ease-in-out;
  background: #76b446b8;
  padding: 20px;
  line-height: 30px;
  min-height: 12rem;
  display: flex;
  align-items: center;
}

.span-text-card {
  color: #ffffff;
  font-size: 22px;
  font-family: var(--font-family-SF);
  font-weight: 400;
}

/* --------------------------------------------------------------------------------------- */
/* Sessão 3: Quem Somos */
.title-who {
  background: #398aa9;
  padding: 6% 20px 20px 20px;
  text-transform: uppercase;
}

.title-who-interna {
  background: #398aa9;
  padding-top: 8rem;
  text-transform: uppercase;
}

.title-who-quem {
  padding-top: 7%;
  text-transform: uppercase;
}

.title-content-who {
  font-family: var(--font-style-normal);
  font-size: 2.5rem;
  font-weight: bold;
  color: white;
  margin-left: 5%;
}
.container-who {
  background: #398aa9;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
  padding-bottom: 5%;
  height: 83vh;
  width: 100%;
}
.content-text-who {
  font-size: 1.3rem;
  font-weight: lighter;
  padding: 0 5% 0 0;
}
.text-who {
  font-family: var(--font-style-normal);
  font-size: 1.5rem;
  color: white;
  padding: 5%;
}
.container-circle {
  position: relative;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 100%;
  background-image: url(../assets/Group\ 2098.svg);
}

.circle {
  width: 11rem;
  height: 11rem;
  border-radius: 50%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: var(--font-style-normal);
  font-weight: bold;
  font-size: 1.2rem;
  color: #00374d;
  flex-direction: column;
}

.span-cicle {
  margin: 5px;
  font-family: var(--font-style-normal);
  font-size: 1rem;
  font-weight: bold;
  color: white;
  max-width: 150px;
}

.circle1 {
  top: 19%;
  left: 20%;
}

.circle2 {
  bottom: 8%;
  left: 41%;
  z-index: 1;
}

.circle3 {
  top: 19%;
  left: 61%;
  z-index: 1;
}

.logo-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 11rem;
  height: 11rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-beprecise {
  width: 50%;
}

.container-text-who {
  margin: 5%;
  text-align: justify;
  color: white;
}

.text-padrao {
  font-family: var(--font-style-normal);
  line-height: 2rem;
}

.highlight {
  font-family: var(--font-style-normal);
  font-weight: bold;
  font-size: 1.3em;
}
.content-space {
  padding-bottom: 5%;
}

/* --------------------------------------------------------------------------------------- */
/* Sessão 4: Triângulo de textos */
.title-works {
  background: #00374d;
  padding-top: 50px;
}

.title-works-interna {
  background: #00374d;
  padding-top: 9rem;
}

.title-works-como {
  background: #00374d;
  padding-top: 7%;
}

.triangle-works {
  background: #00374d;
  padding: 20px;
}

.content-title-works {
  font-family: var(--font-style-normal);
  font-size: 2.5rem;
  font-weight: bold;
  color: white;
  margin-left: 5%;
}

.triangle-works {
  display: flex;
  justify-content: center;
}

.container-circle-works {
  position: relative;
  width: 100%;
  height: 50rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content-text-works {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.content-text-works-end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-right: 15%;
}

.content-text-works-start {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 7%;
}

.circle-works {
  width: 11rem;
  height: 11rem;
  background-color: #67c3b7;
  border-radius: 50%;
  margin: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative; /* Permite a expansão dentro do contêiner pai */
}

/* Estilos para o círculo 1 */
.content-circle1 {
  width: 100%;
  height: 100%;
  background-image: url(../assets/noun-monitoring-6813841.svg);
  background-position: center;
  background-repeat: no-repeat;
}

.circle1-works:hover .content-circle1 {
  background-image: url(../assets/circle1-hover.png);
  background-size: cover;
}

/* Estilos para o círculo 2 */
.content-circle2 {
  width: 100%;
  height: 100%;
  background-image: url(../assets/Path\ 8131.svg);
  background-position: center;
  background-repeat: no-repeat;
}

.circle2-works:hover .content-circle2 {
  background-image: url(../assets/circle2-hover.png);
  background-size: cover;
}

/* Estilos para o círculo 3 */
.content-circle3 {
  width: 100%;
  height: 100%;
  background-image: url(../assets/Group\ 2010.svg);
  background-position: center;
  background-repeat: no-repeat;
}

.circle3-works:hover .content-circle3 {
  background-image: url(../assets/circle3-hover.png);
  background-size: cover;
}

.logo-circle-works {
  width: 18rem;
  height: 18rem;
  background-color: #67c3b7;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: absolute;
  top: 10%;
}

.logo-circle-works:hover {
  background-color: #398aa9;
  border-radius: 50%;
  border: 6px solid #67c3b7;
}

.monitor-works {
  width: 38rem;
}

.monitor-works:hover {
  position: relative;
  top: 15%;
}

.circle1-works {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
  width: 10%;
  position: absolute;
  top: 10%;
  left: 12%;
}

.circle2-works {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
  width: 11%;
  position: absolute;
  right: 18%;
  top: -3%;
}

.circle3-works {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 26%;
  height: 51%;
  z-index: 1;
  position: absolute;
  bottom: 0%;
  left: 37%;
}

.text-circle1,
.text-circle2,
.text-circle3 {
  color: #67c3b7;
  font-family: var(--font-style-normal);
  font-weight: bold;
  font-size: 1.3rem;
  line-height: 25px;
}

.text-circle1,
.circle1-hover-text {
  text-align: end;
}
.text-circle2,
.circle2-hover-text {
  text-align: start;
}
.text-circle3,
.circle3-hover-text {
  text-align: center;
}

.circle1-hover-text,
.circle2-hover-text,
.circle3-hover-text {
  color: #398aa9;
  font-family: var(--font-style-normal);
  font-weight: bold;
  font-size: 1.2rem;
  margin-top: 15px;
  line-height: 30px;
  display: none;
}

/* Exibe o texto correspondente ao passar o mouse sobre o círculo 1 */
.circle1-works:hover .circle1-hover-text {
  display: inline-block;
}

/* Exibe o texto correspondente ao passar o mouse sobre o círculo 2 */
.circle2-works:hover .circle2-hover-text {
  display: inline-block;
}

/* Exibe o texto correspondente ao passar o mouse sobre o círculo 3 */
.circle3-works:hover .circle3-hover-text {
  display: inline-block;
}

/* Linhas conectando os círculos */
.line-works {
  position: absolute;
  width: 2px;
  background-color: #398aa9;
  z-index: 0;
}

/* Linhas laterais */
.line-works-side {
  position: absolute;
  width: 4px;
  background-color: #398aa9;
  z-index: 0;
}

/* Linha entre o círculo 1 e as laterais */
.line-works-side.circle1-line-side {
  right: 53%;
  bottom: 19%;
  height: 72rem;
  transform: rotate(84deg);
}

/* Linha entre o círculo 2 e as laterais */
.line-works-side.circle2-line-side {
  right: 66%;
  top: 8%;
  height: 80%;
  transform: rotate(118deg);
}

/* Linha entre o círculo 3 e as laterais */
.line-works-side.circle3-line-side {
  right: 37%;
  top: 4%;
  height: 77%;
  transform: rotate(48deg);
}

/* Linha entre o círculo 1 e o centro */
.line-works.circle1-line {
  bottom: 52%;
  right: 35%;
  height: 50%;
  transform: rotate(65deg);
}

/* Linha entre o círculo 2 e o centro */
.line-works.circle2-line {
  top: 0%;
  left: 30%;
  min-height: 60%;
  transform: rotate(-75deg);
}

/* Linha entre o círculo 3 e o centro */
.line-works.circle3-line {
  bottom: 30%;
  right: 50%;
  height: 26%;
  transform: rotate(-4deg);
}

.content-monitor-works-text {
  background: #001c30;
  border-radius: 50px;
  width: 26rem;
  padding: 5% 2%;
  text-align: center;
  position: relative;
  bottom: 30%;
  display: none;
}

.monitor-works:hover + .content-monitor-works-text {
  display: block;
}

.monitor-works-text {
  font-family: var(--font-style-normal);
  font-size: 1rem;
  font-weight: bold;
  color: white;
}

/* --------------------------------------------------------------------------------------- */
/* Sessão 5: Plataforma */
.content-platform {
  position: relative;
}

.title-platform {
  font-family: var(--font-style-normal);
  font-size: 2.5rem;
  font-weight: bold;
  color: #00374d;
  margin-left: 5%;
  text-transform: uppercase;
}
.content-title-platform {
  padding-top: 4rem;
  display: flex;
  flex-direction: column;
}
.content-title-platform-plataforma {
  margin-top: 10%;
}

.monitor-platform {
  display: flex;
  align-items: center;
  width: 90%;
  justify-items: center;
  padding: 5%;
  justify-content: space-around;
}
.monitor {
  position: absolute;
  left: 50%;
}

.monitor-platform-safra {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 10%;
}

.monitor-safra {
  margin-bottom: 5%;
  max-width: 90vh;
}
.monitor-platform-fertirrgacao {
  height: 50vh;
}
.monitor,
.monitor-fertirrgacao,
.monitor-cultivo {
  width: 100%;
  max-width: 500px;
  display: flex;
  justify-content: center;
}

.monitor-fertirrgacao {
  position: relative;
  bottom: 15rem;
  left: 55%;
}

.platform,
.platform-safra,
.platform-fertirrgacao-1,
.platform-fertirrgacao-2,
.platform-fertirrgacao-3,
.platform-cultivo-1,
.platform-cultivo-2,
.platform-cultivo-3,
.platform-cultivo-4 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  transform: skewX(-15deg);
  border-left: 8px solid #cb8215;
  transition: background-color 0.6s ease-in-out;
}

.platform-fertirrgacao {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 8%;
}

.platform-cultivo {
  width: 90%;
  margin-left: 8%;
}

.monitor-cultivo {
  position: relative;
  left: 35%;
}

.blur-effect {
  width: 100%;
  background: #e4ebeb7e;
  padding: 10% 0 0;
}

.cultivo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin: 3% 0;
}

.title-span-platform {
  word-wrap: break-word;
  white-space: normal;
  padding-left: 20px;
  margin: 10px 0;
  line-height: 20px;
  font-size: 2.5rem;
  font-family: var(--font-family-SF);
  font-weight: 600;
  color: #00374d;
}
.sub-title-span-platform {
  word-wrap: break-word;
  white-space: normal;
  padding-left: 20px;
  padding-right: 10px;
  margin: 10px 0;
  line-height: 30px;
  font-size: 1.5rem;
  font-family: var(--font-family-SF);
  font-weight: 200;
  color: #00374d;
}
.background-logo {
  position: absolute;
  width: 20%; /* Tamanho ajustável conforme necessário */
  opacity: 0.1; /* Deixa a imagem mais discreta */
  z-index: -1; /* Mantém as imagens no fundo */
  pointer-events: none; /* Impede a interação */
}

/* Primeira imagem - esquerda */
.logo-left-1 {
  top: -37%;
  left: 6%;
  width: 80rem;
}

/* Segunda imagem - direita abaixo da primeira */
.logo-right-2 {
  top: 35%;
  left: 43%;
  width: 82rem;
  transform: rotate(90deg);
}

/* Terceira imagem - esquerda abaixo da segunda */
.logo-left-3 {
  bottom: 5rem;
  right: 45rem;
  width: 90rem;
  transform: rotate(270deg);
}

/* --------------------------------------------------------------------------------------- */
/* Sessão 6: Formulário de contato */
.content-contato-title {
  background: #00374d;
  padding-top: 50px;
  display: flex;
  flex-direction: column;
}

.content-contato-title-contato {
  padding-top: 8rem;
}

.return-api {
  background-color: #00374d;
  padding-top: 50px;
  display: flex;
  flex-direction: column;
}

.success {
  font-family: var(--font-style-normal);
  font-size: 1rem;
  color: #90ee90;
  margin-left: 27%;
}

.error {
  font-family: var(--font-style-normal);
  font-size: 1rem;
  color: red;
  margin-left: 27%;
}

.hidden {
  display: none;
}

.title-content-contato {
  font-family: var(--font-style-normal);
  font-size: 2.2rem;
  font-weight: bold;
  color: white;
  margin-left: 5%;
  text-transform: uppercase;
}

.sub-title-content-contato {
  font-family: var(--font-style-normal);
  font-size: 1.2rem;
  color: white;
  margin-left: 5%;
}

.contato-section {
  background-color: #00374d;
  padding: 40px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
}

form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 60%;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px; /* Espaço entre as colunas de email e telefone */
}

.group,
.group-2 {
  display: grid;
  grid-template-columns: 0fr 1fr;
}

.label-form {
  font-size: 1.8rem;
  color: #398aa9;
  width: 7rem;
  text-align: end;
  padding: 0px 1rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-transform: uppercase;
  font-family: var(--font-family-nunito);
}

.label-mensagem {
  font-size: 1.8rem;
  color: #398aa9;
  font-family: var(--font-family-nunito);
  width: 7rem;
  text-align: end;
  padding: 0px 1rem;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  text-transform: uppercase;
}

form input,
form textarea {
  padding: 15px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  background-color: white;
  font-family: var(--font-family-nunito);
}

form input[type="text"],
form input[type="email"],
form input[type="tel"],
form textarea {
  width: 100%;
  font-family: var(--font-family-nunito);
}

form textarea {
  height: 150px;
}

.submit-button {
  background-color: #48a3bd;
  color: white;
  font-family: var(--font-family-nunito);
  font-weight: 600;
  font-size: 2rem;
  padding: 0.3rem;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  width: 30%;
  margin: 2rem auto;
  text-transform: uppercase;
}

.g-recaptcha {
  margin: 2rem auto;
}

.submit-button:hover {
  background-color: #257994;
}

.submit-button:active {
  transform: scale(0.98);
}

/* --------------------------------------------------------------------------------------- */
@media (max-width: 1554px) {
  .img-ast {
    position: relative;
    bottom: 10px;
  }
  .text-titel {
    font-size: 30px;
    text-align: center;
  }

  .text-titel-sub {
    font-size: 26px;
    text-align: center;
  }
  .container {
    display: flex;
    width: 100%;
    min-height: 90vh;
    height: 90vh;
    position: relative;
  }
  .section.expanded .content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 0px;
    justify-content: center;
  }
  .item-main-list-right {
    padding: 0 !important;
    width: 60% !important;
  }
  .container-list-left {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px !important;
    padding: 10px 30px;
    width: 100%;
    height: 85%;
    justify-content: center;
    align-items: center;
  }
  .container-list-right {
    gap: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 50px;
    width: 100vh;
    height: auto;
  }
  .container-list-left {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px 30px;
    width: 100%;
    height: 85%;
    justify-content: center;
    align-items: center;
  }
  .card-left {
    display: flex;
    align-items: stretch;
    color: white;
    width: auto;
    min-height: auto;
  }
  .content-text {
    position: relative;
    transform: skewX(-10deg);
    border-left: 8px solid #cb8215;
    transition: background-color 0.6s ease-in-out;
    background: #76b446b8;
    padding: 20px;
    line-height: 20px;
    min-height: 10rem;
    display: flex;
    align-items: center;
  }
  .container-who {
    width: 100%;
    height: 100vh;
  }
  .container-percente-item {
    width: 100%;
  }
  .container-percente-item .span-text {
    font-size: 15px;
  }
  .container-percente-item:hover .span-text {
    opacity: 1;
    margin: 15px;
    transform: translateX(-50%) skewX(10deg) translateY(0);
    font-size: 20px;
  }
  .percente-number {
    font-size: 40px;
    font-family: var(--font-family-SF);
  }
  .percente-number-asp {
    font-size: 30px;
    font-family: var(--font-family-SF);
  }
  .percente-text {
    font-size: 20px;
  }
  .title-content-span-left,
  .title-content-span-right {
    font-size: 20px;
    font-family: var(--font-style-normal);
    margin: 5%;
  }
  .title-span-platform {
    word-wrap: break-word;
    white-space: normal;
    padding-left: 20px;
    margin: 10px 0;
    line-height: 40px;
    font-size: 2.5rem;
    font-family: var(--font-family-SF);
    font-weight: 600;
    color: #00374d;
  }
  .text-item {
    font-size: 1.2rem;
  }
  .span-text-card {
    color: #ffffff;
    font-size: 17px;
    font-family: var(--font-family-SF);
    font-weight: 400;
  }
  .span-cicle {
    margin: 5px;
    font-family: var(--font-style-normal);
    font-size: 0.9rem;
    font-weight: bold;
    color: white;
    max-width: 140px;
    text-align: center;
  }

  .circle1 {
    top: 15%;
    left: 18%;
  }

  .circle2 {
    bottom: 8%;
    left: 38%;
    z-index: 1;
  }

  .circle3 {
    top: 15%;
    left: 60%;
    z-index: 1;
  }

  .line-works-side.circle1-line-side {
    right: 53%;
    bottom: 35%;
    height: 56rem;
    transform: rotate(83deg);
  }
  .circle2-works {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
    width: 11%;
    position: absolute;
    right: 14%;
    top: -4%;
  }
  .content-text-works-start {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 60%;
  }
  .container-percente-item:hover .span-text {
    display: block;
    margin: 15px;
    transform: translateX(-50%) skewX(-5deg) translateY(0);
  }
  .platform-cultivo {
    width: 90%;
    margin-left: 8%;
    margin-top: 5%;
  }
  .monitor-platform-fertirrgacao {
    height: 60vh;
  }
}

@media (max-width: 768px) {
  .container {
    display: flex;
    width: 100%;
    height: 130vh;
    position: relative;
  }
  .container-background-img {
    position: relative;
    width: 100%;
    height: 90vh;
    overflow: hidden;
  }
  .video-section {
    position: relative;
    height: 90vh;
  }

  .container {
    display: flex;
    width: 100%;
    height: auto;
    min-height: 85vh;
    position: relative;
  }
  .container-list-right {
    display: flex;
    gap: 20px;
    justify-items: center;
    align-items: center;
    margin: 10px;
    width: 40vh;
    height: 100%;
    flex-direction: column;
  }
  .container-list-left {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    width: 40vh;
    height: 100%;
    justify-content: center;
    align-items: center;
  }

  .card-left .card-right {
    display: flex;
    align-items: stretch;
    color: white;
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  .container-who {
    background: #398aa9;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items: center;
    padding: 0 2%;
    height: 100%;
  }

  .line-works-side.circle1-line-side {
    right: 52%;
    bottom: 49%;
    height: 85%;
    transform: rotate(79deg);
  }

  /* Linha entre o círculo 2 e as laterais */
  .line-works-side.circle2-line-side {
    right: 69%;
    top: 13%;
    height: 63%;
    transform: rotate(132deg);
  }

  /* Linha entre o círculo 3 e as laterais */
  .line-works-side.circle3-line-side {
    right: 32%;
    top: 6%;
    height: 64%;
    transform: rotate(37deg);
  }

  /* Linha entre o círculo 1 e o centro */
  .line-works.circle1-line {
    bottom: 55%;
    right: 35%;
    height: 50%;
    transform: rotate(53deg);
  }

  /* Linha entre o círculo 2 e o centro */
  .line-works.circle2-line {
    top: 4%;
    left: 30%;
    min-height: 48%;
    transform: rotate(-75deg);
  }

  /* Linha entre o círculo 3 e o centro */
  .line-works.circle3-line {
    bottom: 30%;
    right: 50%;
    height: 20%;
    transform: rotate(-4deg);
  }
  .content-text-works-start {
    margin-left: 125%;
  }
  .monitor1 {
    width: 40rem !important;
  }
  .monitor2 {
    width: 50rem !important;
    margin: 0 !important;
  }
  .monitor-fertirrgacao {
    position: relative;
    bottom: 2rem;
    left: 30%;
  }
  .monitor-platform-fertirrgacao {
    height: auto;
  }
  .title-span-platfor {
    line-height: 30px;
  }
  .monitor-cultivo {
    position: relative;
    left: 28%;
  }
  .discover {
    display: block;
    text-align: center;
  }
  nav {
    display: flex;
    align-items: center;
    justify-items: end;
    justify-content: flex-end;
  }
  .nav {
    display: flex;
    align-items: center;
    justify-items: center;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
  }
  .title-span-platform {
    line-height: 35px !important;
  }
  .container-access-platform {
    background-color: #398aa9;
    padding: 30px;
    text-align: center;
  }
  .circle1 {
    top: 25%;
    left: 6%;
  }

  .circle2 {
    top: 55%;
    left: 32%;
    z-index: 1;
  }

  .circle3 {
    top: 25%;
    left: 59%;
    z-index: 1;
  }
  .content-text-who {
    font-size: 1.3rem;
    font-weight: lighter;
    padding: 0px;
  }
}

@media screen and (width: 800px) and (width: 1023px) {
  .container {
    display: flex;
    width: 100%;
    height: 130vh;
    position: relative;
  }
  .container-background-img {
    position: relative;
    width: 100%;
    height: 90vh;
    overflow: hidden;
  }
  .video-section {
    position: relative;
    height: 90vh;
  }

  .container {
    display: flex;
    width: 100%;
    height: auto;
    min-height: 85vh;
    position: relative;
  }
  .container-list-right {
    display: flex;
    gap: 20px;
    justify-items: center;
    align-items: center;
    margin: 10px;
    width: 40vh;
    height: 100%;
    flex-direction: column;
  }
  .container-list-left {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    width: 40vh;
    height: 100%;
    justify-content: center;
    align-items: center;
  }

  .card-left .card-right {
    display: flex;
    align-items: stretch;
    color: white;
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  .container-who {
    background: #398aa9;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items: center;
    padding: 0 2%;
    height: 100%;
  }

  .line-works-side.circle1-line-side {
    right: 52%;
    bottom: 49%;
    height: 85%;
    transform: rotate(79deg);
  }

  /* Linha entre o círculo 2 e as laterais */
  .line-works-side.circle2-line-side {
    right: 69%;
    top: 13%;
    height: 63%;
    transform: rotate(132deg);
  }

  /* Linha entre o círculo 3 e as laterais */
  .line-works-side.circle3-line-side {
    right: 32%;
    top: 6%;
    height: 64%;
    transform: rotate(37deg);
  }

  /* Linha entre o círculo 1 e o centro */
  .line-works.circle1-line {
    bottom: 55%;
    right: 35%;
    height: 50%;
    transform: rotate(53deg);
  }

  /* Linha entre o círculo 2 e o centro */
  .line-works.circle2-line {
    top: 4%;
    left: 30%;
    min-height: 48%;
    transform: rotate(-75deg);
  }

  /* Linha entre o círculo 3 e o centro */
  .line-works.circle3-line {
    bottom: 30%;
    right: 50%;
    height: 20%;
    transform: rotate(-4deg);
  }
  .content-text-works-start {
    margin-left: 125%;
  }
  .monitor1 {
    width: 40rem !important;
  }
  .monitor2 {
    width: 50rem !important;
    margin: 0 !important;
  }
  .monitor-fertirrgacao {
    position: relative;
    bottom: 2rem;
    left: 30%;
  }
  .monitor-platform-fertirrgacao {
    height: auto;
  }
  .title-span-platfor {
    line-height: 30px;
  }
  .monitor-cultivo {
    position: relative;
    left: 28%;
  }
  .discover {
    display: block;
    text-align: center;
  }
  nav {
    display: flex;
    align-items: center;
    justify-items: end;
    justify-content: flex-end;
  }
  .nav {
    display: flex;
    align-items: center;
    justify-items: center;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
  }
  .title-span-platform {
    line-height: 35px !important;
  }
  .container-access-platform {
    background-color: #398aa9;
    padding: 30px;
    text-align: center;
  }
  .circle1 {
    top: 25%;
    left: 6%;
  }

  .circle2 {
    top: 55%;
    left: 32%;
    z-index: 1;
  }

  .circle3 {
    top: 25%;
    left: 59%;
    z-index: 1;
  }
  .content-text-who {
    font-size: 1.3rem;
    font-weight: lighter;
    padding: 0px;
  }
  .platform-cultivo {
    width: 90%;
    margin-left: 8%;
    margin-top: 5%;
  }
}

@media (width: 2133px) {
  .container-who {
    background: #398aa9;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items: center;
    padding-bottom: 5%;
    height: 100vh;
    width: 100%;
  }
  .line-works-side.circle1-line-side {
    right: 53%;
    bottom: 31%;
    height: 60rem;
    transform: rotate(84deg);
  }
  .line-works-side.circle3-line-side {
    right: 37%;
    top: 1%;
    height: 75%;
    transform: rotate(46deg);
  }
  .line-works-side.circle2-line-side {
    right: 67%;
    top: 3%;
    height: 80%;
    transform: rotate(120deg);
  }
  .line-works.circle2-line {
    top: -5%;
    left: 31%;
    min-height: 60%;
    transform: rotate(-87deg);
  }
  .monitor2 {
    width: 90rem !important;
  }
  .monitor-fertirrgacao {
    position: relative;
    bottom: 18rem;
    left: 53%;
  }
  .monitor3 {
    width: 55rem !important;
  }
  .sub-title-span-platform {
    width: 95% !important;
  }
  .sub-width1 {
    width: 85% !important;
  }
  .sub-width2 {
    width: 70% !important;
  }
  .monitor-platform {
    display: flex;
    align-items: center;
    width: 65%;
    justify-items: center;
    padding: 5%;
    justify-content: space-around;
  }
  .monitor-platform-cultivo {
    margin-top: 10px;
  }
  .logo-left-1 {
    top: -37%;
    left: 2%;
    width: 88rem;
  }
  .logo-right-2 {
    top: 35%;
    left: 43%;
    width: 92rem;
    transform: rotate(90deg);
  }
  .logo-left-3 {
    bottom: 5rem;
    right: 45rem;
    width: 105rem;
    transform: rotate(270deg);
  }
}

@media (width: 2560px) {
  .sessao-content-video {
    padding: 50px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    background: linear-gradient(to right, #24530de0, #4a6a2154);
  }
  .be-precise-title-cotent {
    width: 30%;
    display: flex;
    justify-content: center;
  }
  .content-video {
    color: white;
    margin: 0;
    width: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .section.expanded .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 50px;
  }
  .container-list-right .item-main-list-right {
    padding: 0 !important;
  }
  .container-list-left {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 35px;
    padding: 50px;
    width: 100vh;
    height: auto;
    justify-content: center;
    align-items: center;
  }
  .container-list-right {
    gap: 50px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 50px;
    width: 100vh;
    height: auto;
  }
  .container-who {
    height: 100vh;
  }
  .container-circle {
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100vh;
    height: 100%;
  }
  .span-cicle {
    margin: 5px;
    font-family: var(--font-style-normal);
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    max-width: 300px;
  }
  .circle1 {
    top: 19%;
    left: 15%;
    width: 25%;
  }
  .circle2 {
    bottom: 13%;
    left: 44%;
    z-index: 1;
  }
  .circle3 {
    top: 19%;
    left: 64%;
    z-index: 1;
  }
  .content-text-who {
    font-size: 2rem;
    font-weight: lighter;
    padding: 0 5% 0 0;
  }
  .text-padrao {
    font-family: var(--font-style-normal);
    line-height: 3rem;
  }
  .line-works-side.circle1-line-side {
    right: 53%;
    bottom: 27%;
    height: 65rem;
    transform: rotate(84deg);
  }
  .line-works.circle1-line {
    bottom: 50%;
    right: 35%;
    height: 69%;
    transform: rotate(72deg);
  }
  .line-works-side.circle3-line-side {
    right: 37%;
    top: -5%;
    height: 87%;
    transform: rotate(52deg);
  }
  .line-works-side.circle2-line-side {
    right: 67%;
    top: 0%;
    height: 90%;
    transform: rotate(112deg);
  }
  .line-works.circle2-line {
    top: -16%;
    left: 31%;
    min-height: 79%;
    transform: rotate(-85deg);
  }
  .container-circle-works {
    position: relative;
    width: 70%;
    height: 50rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .title-span-platform {
    word-wrap: break-word;
    white-space: normal;
    padding-left: 20px;
    margin: 10px 0;
    line-height: 40px;
    font-size: 2.5rem;
    font-family: var(--font-family-SF);
    font-weight: 600;
    color: #00374d;
  }
  .logo-left-1 {
    top: -37%;
    left: 6%;
    width: 88rem;
  }
  .logo-right-2 {
    top: 35%;
    left: 54%;
    width: 88rem;
    transform: rotate(90deg);
  }
  .logo-left-3 {
    bottom: 5rem;
    right: 79rem;
    width: 95rem;
    transform: rotate(270deg);
  }
}

@media screen and (min-width: 2400px) and (max-width: 2559px) {
  .sessao-content-video {
    padding: 50px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    background: linear-gradient(to right, #24530de0, #4a6a2154);
  }
  .be-precise-title-cotent {
    width: 30%;
    display: flex;
    justify-content: center;
  }
  .content-video {
    color: white;
    margin: 0;
    width: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .section.expanded .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 50px;
  }
  .container-list-right .item-main-list-right {
    padding: 0 !important;
  }
  .container-list-left {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 35px;
    padding: 50px;
    width: 100vh;
    height: auto;
    justify-content: center;
    align-items: center;
  }
  .container-list-right {
    gap: 50px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 50px;
    width: 100vh;
    height: auto;
  }
  .container-who {
    height: 100vh;
  }
  .container-circle {
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100vh;
    height: 100%;
  }
  .span-cicle {
    margin: 5px;
    font-family: var(--font-style-normal);
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    max-width: 300px;
  }
  .circle1 {
    top: 19%;
    left: 14%;
    width: 25%;
  }
  .circle2 {
    bottom: 15%;
    left: 41%;
    z-index: 1;
  }
  .circle3 {
    top: 19%;
    left: 67%;
    z-index: 1;
  }
  .circle2-works {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
    width: 11%;
    position: absolute;
    right: 16%;
    top: -3%;
  }
  .content-text-who {
    font-size: 2rem;
    font-weight: lighter;
    padding: 0 5% 0 0;
  }
  .text-padrao {
    font-family: var(--font-style-normal);
    line-height: 3rem;
  }
  .line-works-side.circle1-line-side {
    right: 52%;
    bottom: 24%;
    height: 68rem;
    transform: rotate(84deg);
  }
  .line-works.circle1-line {
    bottom: 50%;
    right: 35%;
    height: 69%;
    transform: rotate(72deg);
  }
  .line-works-side.circle3-line-side {
    right: 37%;
    top: -5%;
    height: 87%;
    transform: rotate(52deg);
  }
  .line-works-side.circle2-line-side {
    right: 67%;
    top: 0%;
    height: 90%;
    transform: rotate(112deg);
  }
  .line-works.circle2-line {
    top: -16%;
    left: 31%;
    min-height: 79%;
    transform: rotate(-85deg);
  }
  .container-circle-works {
    position: relative;
    width: 70%;
    height: 50rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .title-span-platform {
    word-wrap: break-word;
    white-space: normal;
    padding-left: 20px;
    margin: 10px 0;
    line-height: 40px;
    font-size: 2.5rem;
    font-family: var(--font-family-SF);
    font-weight: 600;
    color: #00374d;
  }
  .logo-left-1 {
    top: -37%;
    left: 6%;
    width: 88rem;
  }
  .logo-right-2 {
    top: 35%;
    left: 54%;
    width: 88rem;
    transform: rotate(90deg);
  }
  .logo-left-3 {
    bottom: 5rem;
    right: 79rem;
    width: 95rem;
    transform: rotate(270deg);
  }
}

@media screen and (min-width: 2580px) and (max-width: 3440px) {
  .sessao-content-video {
    padding: 50px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    background: linear-gradient(to right, #24530de0, #4a6a2154);
  }
  .be-precise-title-cotent {
    width: 30%;
    display: flex;
    justify-content: center;
  }
  .content-video {
    color: white;
    margin: 0;
    width: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .section.expanded .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 50px;
  }
  .container-list-right .item-main-list-right {
    padding: 0 !important;
  }
  .container-list-left {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 35px;
    padding: 50px;
    width: 100vh;
    height: auto;
    justify-content: center;
    align-items: center;
  }
  .container-list-right {
    gap: 50px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 50px;
    width: 100vh;
    height: auto;
  }
  .container-who {
    background: #398aa9;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items: center;
    padding-bottom: 5%;
    height: 100vh;
    width: 100%;
  }
  .container-circle {
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100vh;
    height: 100%;
  }
  .span-cicle {
    margin: 5px;
    font-family: var(--font-style-normal);
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    max-width: 300px;
  }
  .circle1 {
    top: 19%;
    left: 15%;
    width: 25%;
  }
  .circle2 {
    bottom: 13%;
    left: 25rem;
    z-index: 1;
  }
  .circle3 {
    top: 19%;
    left: 64%;
    z-index: 1;
  }
  .content-text-who {
    font-size: 2rem;
    font-weight: lighter;
    padding: 0 5% 0 0;
  }
  .text-padrao {
    font-family: var(--font-style-normal);
    line-height: 3rem;
  }
  .line-works-side.circle1-line-side {
    right: 53%;
    bottom: 11%;
    min-height: 80rem;
    transform: rotate(86deg);
  }
  .line-works.circle1-line {
    bottom: 50%;
    right: 35%;
    height: 69%;
    transform: rotate(72deg);
  }
  .line-works-side.circle3-line-side {
    right: 37%;
    top: -5%;
    height: 87%;
    transform: rotate(52deg);
  }
  .line-works-side.circle2-line-side {
    right: 67%;
    top: 0%;
    height: 90%;
    transform: rotate(112deg);
  }
  .line-works.circle2-line {
    top: -16%;
    left: 31%;
    min-height: 79%;
    transform: rotate(-85deg);
  }
  .container-circle-works {
    position: relative;
    width: 70%;
    height: 50rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .title-span-platform {
    word-wrap: break-word;
    white-space: normal;
    padding-left: 20px;
    margin: 10px 0;
    line-height: 40px;
    font-size: 2.5rem;
    font-family: var(--font-family-SF);
    font-weight: 600;
    color: #00374d;
  }
  .monitor-platform {
    display: flex;
    align-items: center;
    width: 65%;
    justify-items: center;
    padding: 5%;
    justify-content: space-around;
  }
  .sub-title-span-platform {
    width: 80% !important;
  }
  .monitor {
    position: absolute;
    left: 55%;
    top: -5%;
  }
  .monitor1 {
    width: 70rem !important;
  }
  .monitor2 {
    width: 135rem !important;
  }
  .monitor3 {
    width: 135rem !important;
  }
  .monitor4 {
    width: 135rem !important;
    margin: 0px;
  }
  .logo-left-1 {
    top: -29%;
    left: 5%;
    width: 92rem;
  }
  .logo-right-2 {
    top: 27%;
    left: 64%;
    width: 92rem;
    transform: rotate(90deg);
  }
  .logo-left-3 {
    bottom: 19rem;
    right: 137rem;
    width: 92rem;
    transform: rotate(270deg);
  }
  .monitor-platform-safra {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 18%;
  }
  .platform-fertirrgacao {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 18%;
  }
  .monitor-fertirrgacao {
    position: relative;
    bottom: 18rem;
    left: 60%;
  }
  .monitor-platform-cultivo {
    display: flex;
    flex-direction: column;
  }
  .sub-title-span-platform {
    width: 95% !important;
  }
  .sub-width1 {
    width: 85% !important;
  }
  .sub-width2 {
    width: 70% !important;
  }
  .platform-cultivo {
    width: 90%;
    margin-left: 8%;
    margin-top: 5%;
  }
  .monitor-cultivo {
    width: auto;
    max-width: auto;
    display: flex;
    justify-content: center;
    left: 40%;
  }
}

@media (max-width: 1024px) {
  .container {
    display: flex;
    width: 100%;
    height: 130vh;
    position: relative;
  }
  .container-background-img {
    position: relative;
    width: 100%;
    height: 60vh;
    overflow: hidden;
  }
  .container-percente-item {
    max-width: 75%;
    position: relative;
    transform: skewX(-12deg);
    border-left: 8px solid #cb8215;
    transition: background-color 0.6s ease-in-out;
    padding: 20px;
    line-height: 25px;
  }
  .video-section {
    position: relative;
    height: 60vh;
  }
  .expanded {
    flex: 15;
    display: flex;
    flex-direction: row;
    align-items: stretch;
  }
  .container {
    display: flex;
    width: 100%;
    height: 50vh;
    min-height: 50vh;
    position: relative;
  }
  .card-right {
    display: flex;
    align-items: stretch;
    color: white;
    width: auto;
    height: auto;
  }
  .container-list-right {
    display: grid;
    gap: 20px;
    margin: 10px 0;
    width: auto;
    height: auto;
    align-items: center;
    justify-content: center;
  }
  .item-main-list-right {
    display: flex !important;
    padding: 0 !important;
    width: 60% !important;
    height: auto !important;
  }
  .container-list-left {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    width: 45vh;
    height: 50vh;
    justify-content: center;
    align-items: center;
  }
  .section.expanded .content {
    display: flex;
    gap: 0px;
    width: 65vh;
    height: 100%;
    justify-content: center;
    padding-top: 8%;
  }

  .card-left .card-right {
    display: flex;
    align-items: stretch;
    color: white;
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  #img-card {
    width: 3rem;
    height: 3rem;
  }
  .container-who {
    background: #398aa9;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items: center;
    padding: 0 2%;
    height: 100%;
  }

  .line-works-side.circle1-line-side {
    right: 52%;
    bottom: 49%;
    height: 85%;
    transform: rotate(79deg);
  }

  /* Linha entre o círculo 2 e as laterais */
  .line-works-side.circle2-line-side {
    right: 69%;
    top: 13%;
    height: 63%;
    transform: rotate(132deg);
  }

  /* Linha entre o círculo 3 e as laterais */
  .line-works-side.circle3-line-side {
    right: 32%;
    top: 6%;
    height: 64%;
    transform: rotate(37deg);
  }

  /* Linha entre o círculo 1 e o centro */
  .line-works.circle1-line {
    bottom: 55%;
    right: 35%;
    height: 50%;
    transform: rotate(53deg);
  }

  /* Linha entre o círculo 2 e o centro */
  .line-works.circle2-line {
    top: 4%;
    left: 30%;
    min-height: 48%;
    transform: rotate(-75deg);
  }

  /* Linha entre o círculo 3 e o centro */
  .line-works.circle3-line {
    bottom: 30%;
    right: 50%;
    height: 25%;
    transform: rotate(-4deg);
  }
  .content-text-works-start {
    margin-left: 125%;
  }
  .monitor1 {
    width: 40rem !important;
  }
  .monitor2 {
    width: 50rem !important;
    margin: 0 !important;
  }
  .monitor-fertirrgacao {
    position: relative;
    bottom: 2rem;
    left: 30%;
  }
  .monitor-platform-fertirrgacao {
    height: auto;
  }
  .title-span-platfor {
    line-height: 30px;
  }
  .monitor-cultivo {
    position: relative;
    left: 28%;
  }
  .discover {
    display: block;
    text-align: center;
  }
  nav {
    display: flex;
    align-items: center;
    justify-items: end;
    justify-content: flex-end;
  }
  .nav {
    display: flex;
    align-items: center;
    justify-items: center;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
  }
  .title-span-platform {
    line-height: 35px !important;
  }
  .container-access-platform {
    background-color: #398aa9;
    padding: 30px;
    text-align: center;
  }
  .circle1 {
    top: 25%;
    left: 6%;
  }

  .circle2 {
    top: 55%;
    left: 32%;
    z-index: 1;
  }

  .content-circle3 {
    width: 100%;
    height: 100vh;
  }

  .circle3 {
    top: 25%;
    left: 59%;
    z-index: 1;
  }
  .circle1-hover-text,
  .circle2-hover-text,
  .circle3-hover-text {
    color: #398aa9;
    font-family: var(--font-style-normal);
    font-weight: bold;
    font-size: 1rem;
    margin-top: 5px;
    line-height: 25px;
    display: none;
  }
  .text-circle1,
  .text-circle2,
  .text-circle3 {
    color: #67c3b7;
    font-family: var(--font-style-normal);
    font-weight: bold;
    font-size: 1.2rem;
    line-height: 25px;
  }
  .content-text-who {
    font-size: 1.3rem;
    font-weight: lighter;
    padding: 0px;
  }
}

@media (width: 1080px) {
  .container {
    display: flex;
    width: 100%;
    height: 130vh;
    position: relative;
  }
  .container-background-img {
    position: relative;
    width: 100%;
    height: 145vh;
    overflow: hidden;
  }
  .be-precise-title {
    padding-bottom: 30%;
  }
  .container-percente-item {
    max-width: 75%;
    position: relative;
    transform: skewX(-12deg);
    border-left: 8px solid #cb8215;
    transition: background-color 0.6s ease-in-out;
    padding: 20px;
    line-height: 25px;
  }
  .video-section {
    position: relative;
    height: 145vh;
  }
  .expanded {
    flex: 15;
    display: flex;
    flex-direction: row;
    align-items: stretch;
  }
  .container {
    display: flex;
    width: 100%;
    height: 135vh;
    min-height: 100vh;
    position: relative;
  }
  .card-right {
    display: flex;
    align-items: stretch;
    color: white;
    width: auto;
    height: auto;
  }
  .container-list-right {
    display: grid;
    gap: 20px;
    margin: 10px 0;
    width: auto;
    height: auto;
    align-items: center;
    justify-content: center;
  }
  .item-main-list-right {
    display: flex !important;
    padding: 0 !important;
    width: 60% !important;
    height: auto !important;
  }
  .container-list-left {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    width: 65vh;
    height: 75vh;
    justify-content: center;
    align-items: center;
  }
  .section.expanded .content {
    display: flex;
    gap: 0px;
    width: 65vh;
    height: 100%;
    justify-content: center;
    padding-top: 8%;
  }

  .card-left .card-right {
    display: flex;
    align-items: stretch;
    color: white;
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  #img-card {
    width: 3rem;
    height: 3rem;
  }
  .container-who {
    background: #398aa9;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items: center;
    padding: 0 2%;
    height: 100%;
  }

  .line-works-side.circle1-line-side {
    right: 52%;
    bottom: 49%;
    height: 85%;
    transform: rotate(79deg);
  }

  /* Linha entre o círculo 2 e as laterais */
  .line-works-side.circle2-line-side {
    right: 69%;
    top: 13%;
    height: 63%;
    transform: rotate(132deg);
  }

  /* Linha entre o círculo 3 e as laterais */
  .line-works-side.circle3-line-side {
    right: 32%;
    top: 6%;
    height: 64%;
    transform: rotate(37deg);
  }

  /* Linha entre o círculo 1 e o centro */
  .line-works.circle1-line {
    bottom: 55%;
    right: 35%;
    height: 50%;
    transform: rotate(53deg);
  }

  /* Linha entre o círculo 2 e o centro */
  .line-works.circle2-line {
    top: 4%;
    left: 30%;
    min-height: 48%;
    transform: rotate(-75deg);
  }

  /* Linha entre o círculo 3 e o centro */
  .line-works.circle3-line {
    bottom: 30%;
    right: 50%;
    height: 25%;
    transform: rotate(-4deg);
  }
  .content-text-works-start {
    margin-left: 125%;
  }
  .monitor1 {
    width: 40rem !important;
  }
  .monitor2 {
    width: 50rem !important;
    margin: 0 !important;
  }
  .monitor-fertirrgacao {
    position: relative;
    bottom: 2rem;
    left: 30%;
  }
  .monitor-platform-fertirrgacao {
    height: auto;
  }
  .title-span-platfor {
    line-height: 30px;
  }
  .monitor-cultivo {
    position: relative;
    left: 28%;
  }
  .discover {
    display: block;
    text-align: center;
  }
  nav {
    display: flex;
    align-items: center;
    justify-items: end;
    justify-content: flex-end;
  }
  .nav {
    display: flex;
    align-items: center;
    justify-items: center;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
  }
  .title-span-platform {
    line-height: 35px !important;
  }
  .container-access-platform {
    background-color: #398aa9;
    padding: 30px;
    text-align: center;
  }
  .circle1 {
    top: 25%;
    left: 6%;
  }

  .circle2 {
    top: 55%;
    left: 32%;
    z-index: 1;
  }

  .content-circle3 {
    width: 100%;
    height: 100vh;
  }

  .circle3 {
    top: 25%;
    left: 59%;
    z-index: 1;
  }
  .circle1-hover-text,
  .circle2-hover-text,
  .circle3-hover-text {
    color: #398aa9;
    font-family: var(--font-style-normal);
    font-weight: bold;
    font-size: 1rem;
    margin-top: 5px;
    line-height: 25px;
    display: none;
  }
  .text-circle1,
  .text-circle2,
  .text-circle3 {
    color: #67c3b7;
    font-family: var(--font-style-normal);
    font-weight: bold;
    font-size: 1.2rem;
    line-height: 25px;
  }
  .content-text-who {
    font-size: 1.3rem;
    font-weight: lighter;
    padding: 0px;
  }
}

@media (width: 1280px) {
  .nav {
    display: flex;
    align-items: center;
    justify-items: center;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
  }
  .container-percente-item {
    max-width: 85%;
    position: relative;
    transform: skewX(-12deg);
    border-left: 8px solid #cb8215;
    transition: background-color 0.6s ease-in-out;
    padding: 10px 20px;
    line-height: 25px;
  }
  .percente-text {
    font-size: 18px;
  }
  .container-list-right {
    gap: 50px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 50px;
    height: 30%;
    width: auto;
  }
  .container-list-left {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 50px;
    width: auto;
    height: 100%;
    justify-content: center;
    align-items: center;
  }
  .container-who {
    background: #398aa9;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items: center;
    padding-bottom: 5%;
    padding-left: 10px;
    height: 100%;
    width: 100%;
  }
  .circle1 {
    top: 12%;
    left: 15%;
  }
  .circle2 {
    bottom: 4%;
    left: 37%;
    z-index: 1;
  }
  .circle3 {
    top: 12%;
    left: 60%;
    z-index: 1;
  }
  .text-padrao {
    font-family: var(--font-style-normal);
    line-height: 2rem;
    font-size: 1rem;
  }
  .container-circle-works {
    position: relative;
    width: 100%;
    min-height: 62rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .circle1-works {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
    width: 10%;
    position: absolute;
    top: 10%;
    left: 5%;
  }
  .circle2-works {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
    width: 11%;
    position: absolute;
    right: 8%;
    top: -4%;
  }
  .logo-circle-works {
    width: 18rem;
    height: 18rem;
    background-color: #67c3b7;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    top: 15%;
  }
  /* Linha entre o círculo 1 e as laterais */
  .line-works-side.circle1-line-side {
    right: 51%;
    bottom: 45%;
    height: 55rem;
    transform: rotate(80deg);
  }

  /* Linha entre o círculo 2 e as laterais */
  .line-works-side.circle2-line-side {
    right: 73%;
    top: 8%;
    height: 60%;
    transform: rotate(130deg);
  }

  /* Linha entre o círculo 3 e as laterais */
  .line-works-side.circle3-line-side {
    right: 30%;
    top: 1%;
    height: 64%;
    transform: rotate(35deg);
  }

  /* Linha entre o círculo 1 e o centro */
  .line-works.circle1-line {
    bottom: 57%;
    right: 35%;
    height: 46%;
    transform: rotate(60deg);
  }

  /* Linha entre o círculo 2 e o centro */
  .line-works.circle2-line {
    top: 4%;
    left: 30%;
    min-height: 40%;
    transform: rotate(-80deg);
  }

  /* Linha entre o círculo 3 e o centro */
  .line-works.circle3-line {
    bottom: 40%;
    right: 50%;
    height: 20%;
    transform: rotate(-4deg);
  }
  .monitor,
  .monitor-fertirrgacao,
  .monitor-cultivo {
    width: 100%;
    max-width: 400px;
    display: flex;
    justify-content: center;
  }
  .blur-effect {
    width: 100%;
    background: rgba(228, 235, 235, 0.494);
    padding: 10% 0px 0px;
  }
  .monitor1 {
    width: 40rem !important;
  }
  .monitor2 {
    width: 70rem !important;
  }
  .monitor3 {
    width: 40rem !important;
  }
  .sub-width1 {
    width: 30rem !important;
  }
  .sub-width2 {
    width: 28rem !important;
  }
  .title-span-platform {
    word-wrap: break-word;
    white-space: normal;
    padding-left: 20px;
    margin: 10px 0;
    line-height: 40px;
    font-size: 2.5rem;
    font-family: var(--font-family-SF);
    font-weight: 600;
    color: #00374d;
  }
  .monitor-cultivo {
    position: relative;
    left: 35%;
  }
  .monitor-platform-cultivo {
    padding-top: 5%;
  }
}

@media (width: 1360px) {
  .nav {
    display: flex;
    align-items: center;
    justify-items: center;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
  }
  .container-percente-item {
    max-width: 85%;
    position: relative;
    transform: skewX(-12deg);
    border-left: 8px solid #cb8215;
    transition: background-color 0.6s ease-in-out;
    padding: 10px 20px;
    line-height: 25px;
  }
  .percente-text {
    font-size: 18px;
  }
  .container-list-right {
    gap: 50px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 50px;
    height: 30%;
    width: auto;
  }
  .container-list-left {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 50px;
    width: auto;
    height: 100%;
    justify-content: center;
    align-items: center;
  }
  .container-who {
    background: #398aa9;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items: center;
    padding-bottom: 5%;
    padding-left: 10px;
    height: 100%;
    width: 100%;
  }
  .circle1 {
    top: 15%;
    left: 14%;
  }
  .circle2 {
    bottom: 9%;
    left: 37%;
    z-index: 1;
  }
  .circle3 {
    top: 15%;
    left: 62%;
    z-index: 1;
  }
  .text-padrao {
    font-family: var(--font-style-normal);
    line-height: 2rem;
    font-size: 1.3rem;
  }
  .container-circle-works {
    position: relative;
    width: 100%;
    min-height: 62rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .circle1-works {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
    width: 10%;
    position: absolute;
    top: 10%;
    left: 5%;
  }
  .circle2-works {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
    width: 11%;
    position: absolute;
    right: 8%;
    top: -4%;
  }
  .logo-circle-works {
    width: 18rem;
    height: 18rem;
    background-color: #67c3b7;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    top: 15%;
  }
  /* Linha entre o círculo 1 e as laterais */
  .line-works-side.circle1-line-side {
    right: 51%;
    bottom: 45%;
    height: 55rem;
    transform: rotate(80deg);
  }

  /* Linha entre o círculo 2 e as laterais */
  .line-works-side.circle2-line-side {
    right: 73%;
    top: 8%;
    height: 60%;
    transform: rotate(130deg);
  }

  /* Linha entre o círculo 3 e as laterais */
  .line-works-side.circle3-line-side {
    right: 29%;
    top: 1%;
    height: 64%;
    transform: rotate(43deg);
  }

  /* Linha entre o círculo 1 e o centro */
  .line-works.circle1-line {
    bottom: 57%;
    right: 35%;
    height: 46%;
    transform: rotate(64deg);
  }

  /* Linha entre o círculo 2 e o centro */
  .line-works.circle2-line {
    top: 5%;
    left: 30%;
    min-height: 40%;
    transform: rotate(-80deg);
  }

  /* Linha entre o círculo 3 e o centro */
  .line-works.circle3-line {
    bottom: 40%;
    right: 50%;
    height: 20%;
    transform: rotate(-4deg);
  }
  .monitor,
  .monitor-fertirrgacao,
  .monitor-cultivo {
    width: 100%;
    max-width: 400px;
    display: flex;
    justify-content: center;
    padding-top: 2%;
  }
  .blur-effect {
    width: 100%;
    background: rgba(228, 235, 235, 0.494);
    padding: 10% 0px 0px;
  }
  .monitor1 {
    width: 40rem !important;
  }
  .monitor2 {
    width: 70rem !important;
  }
  .monitor3 {
    width: 40rem !important;
  }
  .sub-width1 {
    width: 30rem !important;
  }
  .sub-width2 {
    width: 30rem !important;
  }
  .title-span-platform {
    word-wrap: break-word;
    white-space: normal;
    padding-left: 20px;
    margin: 10px 0;
    line-height: 40px;
    font-size: 2.5rem;
    font-family: var(--font-family-SF);
    font-weight: 600;
    color: #00374d;
  }
  .monitor-cultivo {
    position: relative;
    left: 35%;
  }
  .monitor-platform-cultivo {
    padding-top: 5%;
  }
}

@media (width: 1366px) {
  .nav {
    display: flex;
    align-items: center;
    justify-items: center;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
  }
  .container-percente-item {
    max-width: 85%;
    position: relative;
    transform: skewX(-12deg);
    border-left: 8px solid #cb8215;
    transition: background-color 0.6s ease-in-out;
    padding: 10px 20px;
    line-height: 25px;
  }
  .percente-text {
    font-size: 18px;
  }
  .container-list-right {
    /* gap: 50px; */
    display: grid;
    grid-template-columns: 1fr 1fr;
    /*  padding: 50px; */
    /*    height: 30%; */
    width: auto;
  }
  .container-list-left {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /*    gap: 20px;
    padding: 50px; */
    width: auto;
    height: 100%;
    justify-content: center;
    align-items: center;
  }
  #img-card {
    width: 4rem !important;
  }
  .title-who-interna {
    background: #398aa9;
    padding-top: 7rem;
    text-transform: uppercase;
  }
  .container-who {
    background: #398aa9;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items: center;
    padding-bottom: 5%;
    padding-left: 10px;
    height: 75vh;
    width: 100%;
  }
  .container-circle {
    width: 100%;
    height: 95%;
  }
  .text-padrao {
    font-family: var(--font-style-normal);
    line-height: 1.6rem;
    font-size: 1.1rem;
  }
  .span-cicle {
    margin: 5px;
    font-family: var(--font-style-normal);
    font-size: 0.8rem;
    font-weight: bold;
    color: white;
    max-width: 140px;
    text-align: center;
  }
  .circle1 {
    top: 10%;
    left: 20%;
  }
  .circle2 {
    bottom: 3%;
    left: 37%;
    z-index: 1;
  }
  .circle3 {
    top: 10%;
    left: 55%;
    z-index: 1;
  }
  .container-text-who {
    margin: 4%;
    text-align: justify;
    color: white;
  }
  .container-circle-works {
    position: relative;
    width: 100%;
    min-height: 62rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .circle1-works {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
    width: 10%;
    position: absolute;
    top: 10%;
    left: 5%;
  }
  .circle2-works {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
    width: 11%;
    position: absolute;
    right: 8%;
    top: -4%;
  }
  .logo-circle-works {
    width: 18rem;
    height: 18rem;
    background-color: #67c3b7;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    top: 15%;
  }
  /* Linha entre o círculo 1 e as laterais */
  .line-works-side.circle1-line-side {
    right: 51%;
    bottom: 45%;
    height: 55rem;
    transform: rotate(80deg);
  }

  /* Linha entre o círculo 2 e as laterais */
  .line-works-side.circle2-line-side {
    right: 73%;
    top: 8%;
    height: 60%;
    transform: rotate(130deg);
  }

  /* Linha entre o círculo 3 e as laterais */
  .line-works-side.circle3-line-side {
    right: 30%;
    top: 1%;
    height: 64%;
    transform: rotate(42deg);
  }

  /* Linha entre o círculo 1 e o centro */
  .line-works.circle1-line {
    bottom: 57%;
    right: 35%;
    height: 46%;
    transform: rotate(65deg);
  }

  /* Linha entre o círculo 2 e o centro */
  .line-works.circle2-line {
    top: 6%;
    left: 30%;
    min-height: 40%;
    transform: rotate(-79deg);
  }

  /* Linha entre o círculo 3 e o centro */
  .line-works.circle3-line {
    bottom: 40%;
    right: 50%;
    height: 20%;
    transform: rotate(-4deg);
  }
  .monitor,
  .monitor-fertirrgacao,
  .monitor-cultivo {
    width: 100%;
    max-width: 400px;
    display: flex;
    justify-content: center;
    padding-top: 2%;
  }
  .blur-effect {
    width: 100%;
    background: rgba(228, 235, 235, 0.494);
    padding: 10% 0px 0px;
  }
  .monitor1 {
    width: 40rem !important;
  }
  .monitor2 {
    width: 70rem !important;
  }
  .monitor3 {
    width: 40rem !important;
  }
  .sub-width1 {
    width: 30rem !important;
  }
  .sub-width2 {
    width: 30rem !important;
  }
  .title-span-platform {
    word-wrap: break-word;
    white-space: normal;
    padding-left: 20px;
    margin: 10px 0;
    line-height: 40px;
    font-size: 2.5rem;
    font-family: var(--font-family-SF);
    font-weight: 600;
    color: #00374d;
  }
  .monitor-cultivo {
    position: relative;
    left: 35%;
  }
  .monitor-platform-cultivo {
    padding-top: 5%;
  }
  .platform-cultivo {
    width: 90%;
    margin-left: 8%;
    margin-top: 8%;
  }
}

@media (width: 1440px) {
  .img-ast {
    position: relative;
    bottom: 10px;
  }
  .text-titel {
    font-size: 30px;
    text-align: center;
  }

  .text-titel-sub {
    font-size: 26px;
    text-align: center;
  }
  .container {
    display: flex;
    width: 100%;
    min-height: 100vh;
    height: 100%;
    position: relative;
  }
  .container-percente-item {
    width: 100%;
  }
  .container-percente-item .span-text {
    font-size: 15px;
  }
  .container-percente-item:hover .span-text {
    opacity: 1;
    margin: 15px;
    transform: translateX(-50%) skewX(10deg) translateY(0);
    font-size: 20px;
  }
  .percente-number {
    font-size: 40px;
    font-family: var(--font-family-SF);
  }
  .percente-number-asp {
    font-size: 30px;
    font-family: var(--font-family-SF);
  }
  .percente-text {
    font-size: 20px;
  }
  .title-content-span-left,
  .title-content-span-right {
    font-size: 20px;
    font-family: var(--font-style-normal);
    margin: 5%;
  }
  .text-item {
    font-size: 1.2rem;
  }
  .span-text-card {
    color: #ffffff;
    font-size: 17px;
    font-family: var(--font-family-SF);
    font-weight: 400;
  }
  .span-cicle {
    margin: 5px;
    font-family: var(--font-style-normal);
    font-size: 0.9rem;
    font-weight: bold;
    color: white;
    max-width: 140px;
    text-align: center;
  }

  .circle1 {
    top: 15%;
    left: 18%;
  }

  .circle2 {
    bottom: 8%;
    left: 38%;
    z-index: 1;
  }

  .circle3 {
    top: 15%;
    left: 60%;
    z-index: 1;
  }

  .line-works-side.circle1-line-side {
    right: 53%;
    bottom: 32%;
    height: 59rem;
    transform: rotate(83deg);
  }
  .content-text-works-start {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 60%;
  }
  .container-percente-item:hover .span-text {
    display: block;
    margin: 15px;
    transform: translateX(-50%) skewX(-5deg) translateY(0);
  }
  .monitor-platform-fertirrgacao {
    height: 75vh;
  }
  .title-span-platform {
    word-wrap: break-word;
    white-space: normal;
    padding-left: 20px;
    margin: 10px 0;
    line-height: 40px;
    font-size: 2.5rem;
    font-family: var(--font-family-SF);
    font-weight: 600;
    color: #00374d;
  }
}

@media (width: 1600px) {
  .content-video {
    color: white;
    margin-left: 10%;
  }
  .img-ast {
    position: relative;
    bottom: 10px;
  }
  .text-titel {
    font-size: 30px;
    text-align: center;
  }

  .text-titel-sub {
    font-size: 26px;
    text-align: center;
  }
  .container {
    display: flex;
    width: 100%;
    min-height: 100vh;
    height: 100%;
    position: relative;
  }
  .container-percente-item {
    width: 100%;
  }
  .container-percente-item .span-text {
    font-size: 15px;
  }
  .container-percente-item:hover .span-text {
    opacity: 1;
    margin: 15px;
    transform: translateX(-50%) skewX(10deg) translateY(0);
    font-size: 20px;
  }
  .percente-number {
    font-size: 40px;
    font-family: var(--font-family-SF);
  }
  .percente-number-asp {
    font-size: 30px;
    font-family: var(--font-family-SF);
  }
  .percente-text {
    font-size: 20px;
  }
  .title-content-span-left,
  .title-content-span-right {
    font-size: 20px;
    font-family: var(--font-style-normal);
    margin: 5%;
  }
  .text-item {
    font-size: 1.2rem;
  }
  .span-text-card {
    color: #ffffff;
    font-size: 17px;
    font-family: var(--font-family-SF);
    font-weight: 400;
  }
  .span-cicle {
    margin: 5px;
    font-family: var(--font-style-normal);
    font-size: 0.9rem;
    font-weight: bold;
    color: white;
    max-width: 140px;
    text-align: center;
  }

  .circle1 {
    top: 15%;
    left: 20%;
  }

  .circle2 {
    bottom: 8%;
    left: 40%;
    z-index: 1;
  }

  .circle3 {
    top: 15%;
    left: 58%;
    z-index: 1;
  }
  .content-text-works-start {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 60%;
  }
  .container-percente-item:hover .span-text {
    display: block;
    margin: 15px;
    transform: translateX(-50%) skewX(-5deg) translateY(0);
  }
  .monitor-platform-fertirrgacao {
    height: 75vh;
  }
  .title-span-platform {
    word-wrap: break-word;
    white-space: normal;
    padding-left: 20px;
    margin: 10px 0;
    line-height: 40px;
    font-size: 2.5rem;
    font-family: var(--font-family-SF);
    font-weight: 600;
    color: #00374d;
  }
}

@media (width: 2880px) {
  .sessao-content-video {
    padding: 50px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    background: linear-gradient(to right, #24530de0, #4a6a2154);
  }
  .be-precise-title-cotent {
    width: 30%;
    display: flex;
    justify-content: center;
  }
  .content-video {
    color: white;
    margin: 0;
    width: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .section.expanded .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 50px;
  }
  .container-list-right .item-main-list-right {
    padding: 0 !important;
  }
  .container-list-left {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 35px;
    padding: 50px;
    width: 100vh;
    height: auto;
    justify-content: center;
    align-items: center;
  }
  .container-list-right {
    gap: 50px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 50px;
    width: 100vh;
    height: auto;
  }
  .container-who {
    height: 100vh;
  }
  .container-circle {
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100vh;
    height: 100%;
  }
  .span-cicle {
    margin: 5px;
    font-family: var(--font-style-normal);
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    max-width: 300px;
  }
  .circle1 {
    top: 19%;
    left: 15%;
    width: 25%;
  }
  .circle2 {
    bottom: 13%;
    left: 44%;
    z-index: 1;
  }
  .circle3 {
    top: 19%;
    left: 64%;
    z-index: 1;
  }
  .content-text-who {
    font-size: 2rem;
    font-weight: lighter;
    padding: 0 5% 0 0;
  }
  .text-padrao {
    font-family: var(--font-style-normal);
    line-height: 3rem;
  }
  .line-works-side.circle1-line-side {
    right: 54%;
    bottom: 11%;
    height: 65rem;
    transform: rotate(84deg);
  }
  .line-works.circle1-line {
    bottom: 50%;
    right: 35%;
    height: 69%;
    transform: rotate(72deg);
  }
  .line-works-side.circle3-line-side {
    right: 37%;
    top: -5%;
    height: 87%;
    transform: rotate(52deg);
  }
  .line-works-side.circle2-line-side {
    right: 67%;
    top: 0%;
    height: 90%;
    transform: rotate(112deg);
  }
  .line-works.circle2-line {
    top: -16%;
    left: 31%;
    min-height: 79%;
    transform: rotate(-85deg);
  }
  .container-circle-works {
    position: relative;
    width: 70%;
    height: 50rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .title-span-platform {
    word-wrap: break-word;
    white-space: normal;
    padding-left: 20px;
    margin: 10px 0;
    line-height: 40px;
    font-size: 2.5rem;
    font-family: var(--font-family-SF);
    font-weight: 600;
    color: #00374d;
  }
  .logo-left-1 {
    top: -30%;
    left: 6%;
    width: 88rem;
  }
  .logo-right-2 {
    top: 35%;
    left: 59%;
    width: 88rem;
    transform: rotate(90deg);
  }
  .logo-left-3 {
    bottom: 5rem;
    right: 99rem;
    width: 95rem;
    transform: rotate(270deg);
  }
  .content-title-platform-plataforma {
    margin-top: 5%;
  }
}

@media (width: 3840px) {
  .sessao-content-video {
    padding: 50px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    background: linear-gradient(to right, #24530de0, #4a6a2154);
  }
  .be-precise-title-cotent {
    width: 30%;
    display: flex;
    justify-content: center;
  }
  .content-video {
    color: white;
    margin: 0;
    width: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .section.expanded .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 50px;
  }
  .container-list-right .item-main-list-right {
    padding: 0 !important;
  }
  .container-list-left {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 35px;
    padding: 50px;
    width: 100vh;
    height: auto;
    justify-content: center;
    align-items: center;
  }
  .container-list-right {
    gap: 50px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 50px;
    width: 100vh;
    height: auto;
  }
  .container-who {
    background: #398aa9;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items: center;
    padding-bottom: 5%;
    height: 100vh;
    width: 100%;
  }
  .container-circle {
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100vh;
    height: 100%;
  }
  .span-cicle {
    margin: 5px;
    font-family: var(--font-style-normal);
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    max-width: 300px;
  }
  .circle1 {
    top: 19%;
    left: 11%;
    width: 25%;
  }
  .circle2 {
    bottom: 13%;
    left: 52rem;
    z-index: 1;
  }
  .circle3 {
    top: 19%;
    left: 72%;
    z-index: 1;
  }
  .circle2-works {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
    width: 11%;
    position: absolute;
    right: 18%;
    top: -5%;
  }
  .content-text-who {
    font-size: 2rem;
    font-weight: lighter;
    padding: 0 5% 0 0;
  }
  .text-padrao {
    font-family: var(--font-style-normal);
    line-height: 3rem;
  }
  .line-works-side.circle1-line-side {
    right: 53%;
    bottom: -2%;
    min-height: 94rem;
    transform: rotate(86deg);
  }
  .line-works.circle1-line {
    bottom: 50%;
    right: 35%;
    height: 69%;
    transform: rotate(76deg);
  }
  .line-works-side.circle3-line-side {
    right: 37%;
    top: -5%;
    height: 87%;
    transform: rotate(57deg);
  }
  .line-works-side.circle2-line-side {
    right: 67%;
    top: -4%;
    height: 100%;
    transform: rotate(110deg);
  }
  .line-works.circle2-line {
    top: -19%;
    left: 31%;
    min-height: 89%;
    transform: rotate(-85deg);
  }
  .container-circle-works {
    position: relative;
    width: 70%;
    height: 50rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .title-span-platform {
    word-wrap: break-word;
    white-space: normal;
    padding-left: 20px;
    margin: 10px 0;
    line-height: 40px;
    font-size: 2.5rem;
    font-family: var(--font-family-SF);
    font-weight: 600;
    color: #00374d;
  }
  .monitor-platform {
    display: flex;
    align-items: center;
    width: 65%;
    justify-items: center;
    padding: 5%;
    justify-content: space-around;
  }
  .sub-title-span-platform {
    width: 80% !important;
  }
  .monitor {
    position: absolute;
    left: 55%;
    top: -5%;
  }
  .monitor1 {
    width: 70rem !important;
  }
  .monitor2 {
    width: 135rem !important;
  }
  .monitor3 {
    width: 135rem !important;
  }
  .monitor4 {
    width: 135rem !important;
    margin: 0px;
  }
  .logo-left-1 {
    top: -29%;
    left: 5%;
    width: 92rem;
  }
  .logo-right-2 {
    top: 27%;
    left: 68%;
    width: 92rem;
    transform: rotate(90deg);
  }
  .logo-left-3 {
    bottom: 19rem;
    right: 161rem;
    width: 92rem;
    transform: rotate(270deg);
  }
  .monitor-platform-safra {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 18%;
  }
  .platform-fertirrgacao {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 18%;
  }
  .monitor-fertirrgacao {
    position: relative;
    bottom: 18rem;
    left: 60%;
  }
  .monitor-platform-cultivo {
    display: flex;
    flex-direction: column;
  }
  .sub-title-span-platform {
    width: 95% !important;
  }
  .sub-width1 {
    width: 85% !important;
  }
  .sub-width2 {
    width: 70% !important;
  }
  .platform-cultivo {
    width: 90%;
    margin-left: 8%;
    margin-top: 5%;
  }
  .monitor-cultivo {
    width: auto;
    max-width: auto;
    display: flex;
    justify-content: center;
    left: 40%;
  }
}