.dis-none {
  display: none;
}

#projectInfo {
  margin: 50px auto;
}

#projectInfo .projectImage img {
  width: 100%;
}

#projectInfo .projectTitle {
  font-family: serif;
  font-size: clamp(40px, 5vw, 50px);
}

#projectInfo .projectTitle::before {
  content: "| ";
}

#projectInfo .projectValue {
  font-weight: bold;
  margin: 20px 0 20px;
  font-size: clamp(20px, 3vw, 28px);
}

#projectInfo .projectDescription {
  font-weight: bold;
  font-size: clamp(16px, 3vw, 18px);
}

#projectInfo .projectGreenColor {
  color: #9bcd68;
}

#projectInfo .project-card {
  background-color: #d9d9d9;
  padding: 10px;
  width: 100%;
  cursor: pointer;
}

#projectInfo .projectCardDesc {
  background-color: #000;
  color: #fff;
  width: 100%;
  padding: 10px 20px 10px 20px;
  font-size: 20px;
  margin-bottom: 0 !important;
  cursor: pointer;
  font-size: clamp(16px, 3vw, 18px);
}

#projectInfo .checkboxForm {
  width: 18px;
  height: 18px;
  accent-color: #000;
  border-radius: 0 !important;
}

#projectPlantaInfo {
  max-width: 1620px;
  padding: 0 20px;
  margin: 0 auto;
}

#projectPlantaInfo .projectItems {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, auto));
  gap: 20px;
}

#projectPlantaInfo .imageTerrea img,
#projectPlantaInfo .imageSuperior img {
  width: 100%;
}

#projectPlantaInfo .boxTitleProject h2 {
  max-width: 400px;
  width: 100%;
  font-size: clamp(20px, 2.5vw, 38px);
}

#projectPlantaInfo .projectSubtitle {
  font-size: clamp(20px, 3vw, 22px);
}

#projectPlantaInfo .line {
  height: 3px;
  background-color: #9bcd68;
  width: 75vw;
}

#projectPlantaInfo .cardItem h3,
#projectPlantaInfo .cardItem p {
  margin-bottom: 0 !important;
}

#projectPlantaInfo .cardItemTitle {
  font-weight: 700;
  text-align: center;
  font-size: clamp(18px, 3vw, 20px);
}

#projectPlantaInfo .cardItemDesc {
  font-weight: 500;
  text-align: center;
  font-size: clamp(16px, 3vw, 18px);
}

#projectPlantaInfo .infosTitle {
  font-size: clamp(20px, 3vw, 24px);
}

#projectPlantaInfo .itemList {
  font-weight: bold;
  font-size: clamp(16px, 3vw, 18px);
}

@media (min-width: 0px) {
  #projectInfo {
    flex-direction: column;
  }

  #projectInfo .projectValue {
    margin: 10px 0 10px;
  }

  #projectInfo .project-card img {
    width: 30px;
  }

  #projectPlantaInfo .detailsItems,
  #projectPlantaInfo .details > div,
  #projectPlantaInfo .itens > div {
    flex-direction: column;
  }

  #projectPlantaInfo .details,
  #projectPlantaInfo .itens,
  #projectPlantaInfo .details div ul,
  #projectPlantaInfo .itens div ul {
    width: 100%;
  }

  #projectPlantaInfo .projectSubtitle {
    margin: 30px 0;
  }

  #projectPlantaInfo .cardItemImage {
    width: 60px;
  }
}

@media (min-width: 340px) {
  #projectInfo .projectValue {
    margin: 15px 0 15px;
  }

  #projectInfo .project-card img {
    width: 40px;
  }
}

@media (min-width: 500px) {
  #projectInfo .projectValue {
    margin: 20px 0 20px;
  }

  #projectInfo .project-card img {
    width: 50px;
  }

  #projectPlantaInfo .cardItemImage {
    width: 70px;
  }
}

@media (min-width: 992px) {
  #projectInfo {
    flex-direction: row;
  }

  #projectInfo .projectValue {
    margin: 15px 0 15px;
  }

  #projectInfo .project-card img {
    width: 40px;
  }

  #projectPlantaInfo .detailsItems {
    margin-top: 50px;
  }

  #projectPlantaInfo .detailsItems,
  #projectPlantaInfo .details > div,
  #projectPlantaInfo .itens > div {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
  }
}

@media (min-width: 1040px) {
  #projectInfo .projectValue {
    margin: 10px 0 10px;
  }

  #projectInfo .projectDescription {
    margin: 5px 0 10px;
  }

  #projectInfo .project-card img {
    width: 40px;
  }
}

@media (min-width: 1280px) {
  #projectInfo {
    flex-direction: row;
  }

  #projectInfo .projectDescription {
    margin: 10px 0 20px;
  }

  #projectInfo .project-card img {
    width: 50px;
  }
}