html {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
* {
  font-family: "Outfit", sans-serif;
}

:root {
  /* === BRAND COLORS === */
  --green-bold: #004535;
  --main: #31c361; /* verde mais profundo e equilibrado */

  /* === BACKGROUND LAYERING === */
  --bg: #ffffff;
  --container-main: #f6f6f6;

  /* === TEXT === */
  --text-bold: #09576c;
  --text-medium: #182233;
  --text-regular: #5d6b7c;
  --text-thin: #748191;

  --line: #bec5ce;

  --int: "Inter", sans-serif;
  --roboto: "Roboto", sans-serif;
}

.text-mini12 {
  font-size: 12px;
  color: var(--text-regular);
}
.text-mini14 {
  font-size: 14px;
  color: var(--text-regular);
}
.text-mini16 {
  font-size: 16px;
  font-weight: 400;
  color: var(--text-regular);
}
.text-mini18 {
  font-size: 18px;
  line-height: 24px;
  color: var(--text-regular);
}
.text-mini32 {
  font-size: 32px;
  font-weight: 300;
  line-height: 50px;
  color: var(--text-regular);
}
.text-mini45 {
  font-size: 45px;
  font-weight: 300;
  line-height: 50px;
  color: var(--text-regular);
}
.text-mini28 {
  font-size: 28px;
  font-weight: 300;
  color: var(--text-regular);
}
.text-medium12 {
  font-weight: 500;
  font-size: 12px;
  color: var(--text-medium);
}
.text-medium14 {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-medium);
}
.text-medium16 {
  font-weight: 500;
  font-size: 16px;
  color: var(--text-medium);
}
.text-medium18 {
  font-weight: 500;
  font-size: 18px;
  color: var(--text-medium);
}
.text-medium22 {
  font-weight: 400;
  font-size: 22px;
  line-height: 26px;
  color: var(--text-medium);
}
.text-bold12 {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-bold);
}
.text-bold14 {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-bold);
}
.text-bold16 {
  font-weight: 600;
  font-size: 16px;
  color: var(--text-bold);
}
.text-bold18 {
  font-weight: 600;
  font-size: 18px;
  color: var(--text-bold);
}
.text-bold20 {
  font-weight: 600;
  font-size: 20px;
  color: var(--text-bold);
}
.text-bold22 {
  font-weight: 600;
  font-size: 22px;
  color: var(--text-bold);
}
.text-bold24 {
  font-weight: 600;
  font-size: 24px;
  color: var(--text-bold);
}
.text-bold26 {
  font-weight: 600;
  font-size: 26px;
  color: var(--text-bold);
}
.text-bold28 {
  font-weight: 600;
  font-size: 28px;
  color: var(--text-bold);
}
.text-bold46 {
  font-weight: 600;
  font-size: 46px;
  color: var(--text-bold);
}
.text-bold82 {
  font-weight: 600;
  font-size: 82px;
  color: var(--text-bold);
}
.text-link12 {
  font-weight: 500;
  font-size: 12px;
  color: var(--text-medium);
  text-decoration-line: underline;
  cursor: pointer;
}
.text-link14 {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-medium);
  text-decoration-line: underline;
  cursor: pointer;
}
.text-link14:hover {
  opacity: 0.8;
}
.text-link16 {
  font-weight: 500;
  font-size: 16px;
  color: var(--text-medium);
  text-decoration-line: underline;
  cursor: pointer;
}
.text-link16:hover {
  opacity: 0.8;
}
.text-link18 {
  font-weight: 500;
  font-size: 18px;
  color: var(--text-medium);
  text-decoration-line: underline;
  cursor: pointer;
}
.text-link18:hover {
  opacity: 0.8;
}
.text-link20 {
  font-weight: 500;
  font-size: 20px;
  color: var(--text-medium);
  text-decoration-line: underline;
  cursor: pointer;
}
.text-link20:hover {
  opacity: 0.8;
}

*.white {
  color: white;
}
*.gray {
  color: rgba(255, 255, 255, 0.65);
}
*.main {
  color: var(--main);
}
*.click {
  cursor: pointer;
}
p {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
a {
  margin: 0;
}
ul {
  margin: 5px;
  padding: 0px 0px 0px 15px;
}
button {
  border: none;
  background: none;
  padding: 0;
}

input {
  outline: none;
  -moz-outline: none;
}
textarea {
  font-family: var(--int);
}
img,
figure,
svg {
  display: block;
  display: -webkit-block;
  overflow-clip-margin: unset;
  overflow: hidden;
}
option {
  height: 30px;
  background-color: var(--container-second);
}

.Hline {
  width: 100%;
  height: 1px;
  min-height: 1px;
  background-color: var(--line);
}
.HlineDash {
  width: 100%;
  border: 1px dashed var(--line);
}
.Vline {
  height: 100%;
  min-width: 1px;
  max-width: 1px;
  background-color: var(--line);
}

.buttons_end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  grid-gap: 5px;
  width: 100%;
}
.Vcontainer {
  display: flex;
  flex-direction: column;
  grid-gap: 8px;
  padding: 10px;
  border-radius: 10px;
  background-color: var(--container-main);
}
.Hcontainer {
  display: flex;
  align-items: center;
  grid-gap: 8px;
  padding: 10px;
  border-radius: 10px;
  background-color: var(--container-main);
}
.row5 {
  display: flex;
  align-items: center;
  grid-gap: 5px;
}
.row5.action {
  padding: 5px;
  border-radius: 5px;
}
.row5.action:hover {
  background-color: var(--container-second);
}
.row10 {
  display: flex;
  align-items: center;
  grid-gap: 10px;
}
.row15 {
  display: flex;
  align-items: center;
  grid-gap: 15px;
  flex-wrap: wrap;
}
.row20 {
  display: flex;
  align-items: center;
  grid-gap: 20px;
  flex-wrap: wrap;
}
.rowSpace {
  display: flex;
  align-items: center;
  justify-content: space-between;
  grid-gap: 10px;
  width: 100%;
}
.input_row {
  display: flex;
  align-items: center;
  grid-gap: 10px;
}
.input_list {
  display: flex;
  flex-direction: column;
  grid-gap: 5px;
  width: 100%;
}
.input_list10 {
  display: flex;
  flex-direction: column;
  grid-gap: 10px;
  width: 100%;
}
.input_list15 {
  display: flex;
  flex-direction: column;
  grid-gap: 15px;
}
.icon_row {
  display: flex;
  align-items: center;
  grid-gap: 3px;
}
.add_button {
  display: flex;
  align-items: center;
  grid-gap: 5px;
  width: fit-content;
  color: var(--text-regular);
  cursor: pointer;
}
.limitator {
  display: flex;
  flex-direction: column;
  width: 1280px;
  max-width: 95%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.soma {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.banner {
  width: 100%;
  height: 1000px;
  /* background-image: url("/img/banner.png"); */
  background-position: center center;
}
.header {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100px;
  background: rgba(255, 255, 255, 0.1);
}
.header .logo {
  width: 180px;
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 6px;
  background-color: var(--main);
  font-weight: 700;
  cursor: pointer;
}
.button.white {
  background-color: white;
  color: var(--main);
}
.button.bold {
  background-color: var(--green-bold);
  color: white;
  font-weight: 500;
}
.button.space {
  justify-content: space-between;
}

.systems {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 700px;
  /* background-image: url("./img/bg.png"); */
  background-size: cover;
}
.systems .systemCard {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 270px;
  background: rgba(255, 255, 255, 0.1);
}
.tools {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 164px 0px;
  /* background-image: url("/img/grayBg.png"); */
  background-position: center bottom;
  background-size: cover cover;
}
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  gap: 16px;
  width: 100%;
}

.card {
  background: #1e293b;
  color: white;
  padding: 24px;
  border-radius: 14px;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  grid-gap: 20px;
  justify-content: center;
  font-weight: 600;
  height: 360px;
  font-size: 18px;
  padding: 10px 40px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.card:first-child {
  height: 500px;
  /* background-image: url("/img/somaBanner.png"); */
  background-position: right bottom;
}
.card:nth-child(2) {
  /* background-image: url("/img/rankingSoma.png"); */
}
.card:nth-child(3) {
  /* background-image: url("/img/rankingBanner.png"); */
}
.card:nth-child(4) {
  /* background-image: url("/img/rankeBanner.png"); */
}
.card:nth-child(5) {
  /* background-image: url("/img/skanbBanner.png"); */
}

/* Card grande (primeiro) ocupa 2 colunas */
.card-lg {
  grid-column: span 2;
  min-height: 260px;
}

.tool_content {
  display: flex;
  flex-direction: column;
  grid-gap: 64px;
  width: 100%;
}
.card .cardLimitation {
  width: 320px;
  display: flex;
  flex-direction: column;
  grid-gap: 15px;
}

.about {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 164px 0px;
}
.aboutContent {
  display: flex;
  flex-direction: column;
  grid-gap: 48px;
  width: 100%;
}
.aboutCard {
  display: flex;
  flex-direction: column;
  grid-gap: 10px;
}
.aboutCard {
  width: 100%;
}
.aboutCard img {
  width: 100%;
  border-radius: 10px;
}
.feedback {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  grid-gap: 48px;
  width: 100%;
  padding: 164px 0px;
  /* background-image: url("/img/grayBg.png"); */
  background-size: cover cover;
}
.feedbackRow {
  display: flex;
  overflow-x: auto;
  align-items: center;
  justify-content: center;
  grid-gap: 24px;
  width: 100%;
}
.feedbackCard {
  display: flex;
  flex-direction: column;

  grid-gap: 24px;
  width: 400px;
  min-width: 400px;
}
.feedbackCard .containerImg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 260px;
  background: #e7e7e7;
  border-radius: 10px;
  margin-top: 24px;
}
.feedbackCard .imgUser {
  width: 64px;
  min-width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}

.what {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 128px 0px;
  /* background-image: url("/img/bg.png"); */
}
.whatContent {
  display: flex;
  flex-direction: column;
  grid-gap: 64px;
  width: 100%;
}
.whatList {
  display: flex;
  flex-direction: column;
  grid-gap: 20px;
}
.whatItem {
  display: flex;
  align-items: center;
  grid-gap: 48px;
}
.whatImg {
  width: 940px;
  min-width: 940px;
  height: 200px;
  border-radius: 1000px;
  background-size: cover;
}
.whatItem:nth-child(1) .whatImg {
  /* background-image: url("/img/sells.png"); */
}
.whatItem:nth-child(2) .whatImg {
  /* background-image: url("/img/lock.png"); */
}
.whatItem:nth-child(3) .whatImg {
  /* background-image: url("/img/computer.png"); */
}

.form {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 164px 0px;
  /* background-image: url("/img/bannerGray.png"); */
}
.form .formContent {
  display: flex;
  grid-gap: 90px;
}
.form .textContent {
  width: 100%;
}

.form .formInputs {
  display: flex;
  flex-direction: column;
  background-color: white;
  padding: 64px 40px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 20px 35.3px -9px rgba(0, 0, 0, 0.25);
  width: 100%;
}
.form .formInputs .input_list {
  width: 100%;
}
.form .formInputs .input_list .input {
  display: flex;
  align-items: center;
  padding: 0px 10px;
  width: 100%;
  border: 1px solid var(--line);
  height: 55px;
  border-radius: 9px;
}
.form .formInputs .input_list .input input {
  width: 100%;
  border: none;
  outline: none;
  color: var(--text-medium);
}
.form .formInputs textarea {
  width: 100%;
  height: 200px;
  padding: 24px;
  border-radius: 13px;
  border: 1px solid var(--line);
  resize: none;
  outline: none;
  color: var(--text-medium);
  margin: 10px 0;
}

.button input[type="submit"] {
  background: transparent !important;
  outline: none;
  border: none;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  background-color: var(--green-bold);
}
.footer .socialConteiner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 5px;
  background-color: var(--main);
}

@media (max-width: 1275px) {
  .systems {
    padding: 128px 0px;
    height: fit-content;
  }
  .systems .rowSpace {
    flex-direction: column;
    width: fit-content;
    align-items: flex-start;
    grid-gap: 64px;
  }
  .whatItem {
    flex-direction: column;
  }
  .whatItem .whatImg {
    width: 100%;
    max-width: 100%;
    min-width: auto;
  }
}
@media (max-width: 996px) {
  .form .formContent {
    flex-direction: column;
  }
  .dashboard-grid {
    display: flex;
    flex-direction: column;
  }
  .banner {
    background-position-x: -780px;
  }
}
@media (max-width: 792px) {
  .systems {
  }
  .systems .row5.cards {
    flex-direction: column;
    width: 100%;
    grid-gap: 10px;
  }
  .systems .systemCard {
    width: 100%;
    border-radius: 15px;
  }
  .systems .systemCard img {
    height: 40%;
    width: auto !important;
  }
  .systems .rowSpace.rowCard {
    width: 100%;
  }
  .about .rowSpace.aboutTitle {
    flex-direction: column;
    grid-gap: 24px;
  }
  .card:first-child {
    background-position: bottom left;
  }
  .about .row10.aboutRow {
    flex-direction: column;
  }
  .form {
    padding-bottom: 0px;
  }
  .form .limitator {
    max-width: 100%;
  }
  .form .formContent {
    align-items: center;
  }
  .form .textContent {
    max-width: 95%;
  }
  .form .formInputs {
    padding: 24px;
    box-shadow: none;
    border-radius: 0;
    padding-bottom: 64px;
  }
  .row15.nav {
    display: none;
  }
  .header .button {
    display: none;
  }
  .banner {
    height: 800px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position-x: -650px;
  }
  .header .logo {
    width: 140px;
  }
}

.click,
.click > * {
  text-decoration: none;
  cursor: pointer;
}

input[type="checkbox"]:checked {
  background-color: var(--main) !important;
  border-color: var(--main) !important;
}
input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  background-color: transparent !important;
  border: 2px solid var(--black) !important;
  border-radius: 2px !important;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #000 !important;
}