/* Section Presentation */
.presentation {
  --presentation-height: calc(100vh - 180px);
  min-height: var(--presentation-height);
  background-image: url(../assets/images/content/img05.jpeg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  padding: 0.5rem 2rem;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.presentation-content {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  min-height: calc(var(--presentation-height) - 41px - 3rem);
}

.presentation h1 {
  background-image: linear-gradient(to right, var(--cor-primaria), var(--cor-secundaria));
  font-family: var(--fonte-principal);
  color: #fff;
  padding: 5px 5px;
  margin-top: 1rem;
}

.history {
  max-width: 1200px;
  width: 100%;
  padding: 1rem;
  background-color: #0578a6a1;
  backdrop-filter: blur(4px);
  border-radius: 8px;
  color: white;
  font-family: sans-serif;
  font-size: 1.3rem;
}
.card-content p, .presentation-content{
  text-indent: 15px;
}

.cards {
  padding-block: 20px;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;

  max-width: 657px;
  width: 100%;

}

@media (min-width: 1000px) {
  .cards {
    max-width: 1300px;
    bottom: 35px;
  }
}

.card {
  width: 100%;
  padding: 20px;
  background-color: rgb(255 255 255 / 76%);
  backdrop-filter: blur(4px);
  border: 2px solid var(--cor-primaria);
  border-radius: 8px;
}

@media (min-width: 500px) {
  .card {
    flex-basis: 214px;
    flex-grow: 1;
    font-family: sans-serif;
  }
}

.card-title {
  color: #022e40;
  border-bottom: 2px solid var(--cor-primaria);
  padding-bottom: 0.1rem;
}

.card-title h2 {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-inline: 0.5rem;
  font-family: sans-serif;

  color: #022e40;
}

.card-content {
  color: #202020;
  padding-top: 0.5rem;
}

/*
pegar valor do border radios de history
pegar valor de transparencia

pegar valor da cor do border de card
pegar valor do border radios de card
pegar valor de transparencia de card

*/



/* Section Team */

.team {
  min-height: calc(100vh);
  background-color: var(--cor-secundaria);
  padding: 0.5rem 2rem 2rem 2rem;

  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.team h1 {
  background: var(--cor-primaria) ;
  font-family: var(--fonte-principal);
  color: #fff;
  padding: 5px 5px;
  margin-top: 1rem;
  align-self: center;
}

.team-container {
  display: flex;
  flex-grow: 1;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 657px;
}

@media (min-width: 1000px) {
  .team-container {
    max-width: 1300px;
  }
}

.employee {
  border: 2px solid var(--cor-primaria);
  border-radius: 1rem;
  width: 100%;
  height: 100%;
}

.employee > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 1rem;
}

.employee > div {
  position: absolute;
  text-align: center;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  width: 100%;
  bottom: 0px;
  background-color: rgba(255, 255, 255, 0.466);
  color: var(--cor-secundaria);
  font-family: var(--fonte-principal);
  font-size: 1.5rem;
}

.employee > div > p {
  color: black;
}

.flip-box {
  width: 100%;
  aspect-ratio: 1/1.5;
  border-radius: 1rem;
}

@media (min-width: 500px) {
  .flip-box {
    flex-basis: 214px;
    flex-grow: 1;
    max-width: 350px;
  }
}

.flip-content {
  width: 100%;
  aspect-ratio: 1/1.6;
  border-radius: 1rem;

  position: relative;
  transform-style: preserve-3d;

  transition: transform 1s;
}

.flip-front, .flip-back {
  background-color: #60f560;
  width: 100%;
  aspect-ratio: 1/1.6;
  border-radius: 1rem;

  position: absolute;
  backface-visibility: hidden;
}

.flip-back {
  background-color: var(--cor-primaria);
  transform: rotateY(180deg);
  padding: 1rem;
  font-family: var(--fonte-principal);
  font-size: 1.2rem;
  text-align: center;
  color: white;
}


.flip-back > h3 {
  padding-bottom: 1rem;
  font-size: 1.5rem;
}

/* .flip-box:hover .flip-content {
  transform: rotateY(180deg);
} */

.btn-ver-mais {
  background-color: #30c530;
  color: white;
  font-family: sans-serif;
  padding: 0.5rem 2rem;
  border-radius: 8px;
  font-size: 1.2rem;
}

/* Section Installations */
.installations {
  min-height: calc(80vh);
  background-color: #fff;
  padding: 0.5rem 2rem;
  padding-bottom: 2rem;

  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.installations > h1 {
  background-image: linear-gradient(to right, var(--cor-primaria), var(--cor-secundaria));
  font-family: var(--fonte-principal);
  color: #fff;
  padding: 5px 5px;
  margin-top: 1rem;
}

@media (min-width: 620px) {
  .installation {
    min-height: calc(100vh);
  }
  .installations > h1 {
    margin-bottom: 3rem;
  }
}

.installation-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex-grow: 1;
}

@media (min-width: 620px) {
  .installation-card {
    flex-direction: row;
  }
}

.installation-content {
  display: flex;
  align-self: flex-start;
  margin-top: 1rem;
  flex-direction: column;
  justify-content: end;
  gap: 1rem;
  font-family: var(--fonte-principal);
}

@media (min-width: 620px) {
  .installations-content {
    flex-basis: 40%;
    flex-grow: 1;
  }
}

.installations img {
  width: 100%;
  border-radius: 1rem;
  border: 2px solid var(--cor-primaria);
  aspect-ratio: 16/9;

  object-fit: cover;
}

@media (min-width: 620px) {
  .installations img {
    max-width: 40%;
  }
}

.installation-content > .installation-title {
  display: none;
}

@media (min-width: 620px) {
  .installation-content > .installation-title {
    display: block;
  }
}

.installation-title {
  font-family: var(--fonte-principal);
  font-size: 1.5rem;
}

@media (min-width: 620px) {
  .installation-title {
    display: none;
  }
}

.installation-title::after {
  display: block;
  content: " ";
  height: 4px;
  width: 70px;
  background-color: var(--cor-primaria);
  border-radius: 8px;
}