/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


body {
  font-family: Arial, sans-serif;
  display: flex;
  min-height: 100vh;
  background: linear-gradient(to bottom right, #63f180, #ffffff);
}


/*footer {
  background-color: #004d40;
  color: white;
  text-align: center;
  padding: 10px 0;
  margin-top: auto;
}*/
footer {
  background-color: #004d40;
  color: white;
  text-align: center;
  padding: 10px 0;
  position:fixed; /* Fixado na tela */
  bottom: 0; /* Sempre no final */
  left: 0;
  width: 100%; /* Ocupa toda a largura da tela */
  z-index: 10; /* Garantir que esteja acima de outros elementos, se necessário */
}



/* Estilização do botão scroll */
#scrollBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99;
  font-size: 18px;
  background-color:#004d40;
  color: white;
  border: none;
  outline: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.3s;
}


#scrollBtn:hover {
  background-color: #012923;
}


/* Estilo da barra lateral */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 50px;
  background-color: #00695c;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 0;
  transition: width 0.3s ease-in-out;
  overflow: hidden;
}


.sidebar.expanded {
  width: 250px;
}


.sidebar.expanded .icon img {
  transform: scale(1.5); /* Leve aumento no tamanho */
  opacity: 1;
}


.sidebar.hidden {
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
}


.toggle-btn {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  margin-bottom: 20px;
}


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


.icon-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}


/* Botões principais */
.icon {
  background: none;
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 5px 10px;
  width: 100%;
  justify-content: flex-start;
  transition: margin-bottom 0.3s ease, padding 0.3s ease;
}


.icon:hover {
  color: #80cbc4;
}


.icon img {
  width: 24px;
  height: 24px;
}


.icon-label {
  display: none;
  white-space: nowrap;
  font-size: 20px;
}


.sidebar.expanded .icon-label {
  display: inline;
}


/* Listas de plantas */
.icon-container {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  justify-content: flex-start;
 /* Permite animar o botão sem afetar o layout geral */
  transition: transform 0.3s ease; /* Transição suave de movimento */
}




.icon-container.expanded {
  margin-bottom: 150px; /* Ajusta o espaço quando a lista está aberta */
}


.imagem {
  width: 500px;
}


.list {
  display: none; /* Inicialmente escondida */
  flex-direction: column;
  opacity: 0; /* Transparente */
  transform: scaleY(0.8); /* Levemente comprimida verticalmente */
  justify-content: flex-start;
  transform-origin: top; /* O efeito começa do topo */
  transition: opacity 0.3s ease, transform 0.3s ease;
}


.list.show {
  display: flex; /* Torna visível com flex */
  justify-content: flex-start;
  opacity: 1; /* Opaco */
  transform: scaleY(1); /* Escala completa */
}




.list :hover {
  color: #80cbc4;
}


.list button {
  background: none;
  color: white;
  border: none;
  font-size: 14px;
  padding: 5px 10px;
  text-align: left;
  margin-left: 35px;
  cursor: pointer;
  transform: translateY(-10px); /* Deslocados inicialmente */
  opacity: 0; /* Invisíveis inicialmente */
  transition: transform 0.3s ease, opacity 0.3s ease;
}


.list.show button {
  transform: translateY(0); /* Voltam para a posição original */
  opacity: 1; /* Ficam visíveis */
}


/* Aparecer os botões das plantas com delay */
.list.show button:nth-child(1) {
  transition-delay: 0.1s;
}


.list.show button:nth-child(2) {
  transition-delay: 0.2s;
}


.list.show button:nth-child(3) {
  transition-delay: 0.3s;
}


.list.show button:nth-child(4) {
  transition-delay: 0.4s;
}


.list.show button:nth-child(5) {
  transition-delay: 0.5s;
}


.list.show button:nth-child(6) {
  transition-delay: 0.6s;
}


.list.show button:nth-child(7) {
  transition-delay: 0.7s;
}


.list.show button:nth-child(8) {
  transition-delay: 0.8s;
}


.list.show button:nth-child(9) {
  transition-delay: 0.9s;
}


.list.show button:nth-child(10) {
  transition-delay: 1.0s;
}


.list.show button:nth-child(11) {
  transition-delay: 1.1s;
}


.list.show button:nth-child(12) {
  transition-delay: 1.2s;
}


.list.show button:nth-child(13) {
  transition-delay: 1.3s;
}


.list.show button:nth-child(14) {
  transition-delay: 1.4s;
}


/* Estilo do cabeçalho */
.header {
  display: flex;
  align-items: center; /* Centraliza os itens verticalmente */
  justify-content: space-between; /* Espaço entre o logo e a navegação */
  position: fixed;
  top: 0;
  left: 50px; /* Alinha considerando a barra lateral */
  width: calc(100% - 50px); /* Adapta o tamanho ao espaço */
  height: 75px;
  background-color: #004d40;
  padding: 0 20px;
  color: white;
  transition: left 0.3s ease-in-out, width 0.3s ease-in-out;


}


header.hidden {
  transition: top 0.3s;
}


.logo {
  display: flex;
  height: 50px; /* Ajusta o tamanho do logo */
}


.sidebar.sidebar.expanded ~ .logo {
  padding-left: 260px;
}


.nav {
  display: flex;
  gap: 22px; /* Espaço entre os botões */
  list-style: none;
  padding-right: 15px;
}


.sidebar.expanded ~ .header {
  left: 250px;
  width: calc(100% - 250px);
}


.nav-btn {
  background: none;
  text-decoration: none;
  border: none;
  color: white;
  font-size: 19px;
  cursor: pointer;
  transition: color 0.3s ease;
  margin-left: 5px;
}


.nav-btn:hover {
  color: #80cbc4;
}


/* Estilo do conteúdo principal */
.main-content {
  margin-top: 60px;
  margin-left: 50px;
  padding: 20px;
  transition: margin-left 0.3s ease-in-out, transform 0.3s ease-in-out;
}


.sidebar.expanded ~ .main-content {
  margin-left: 250px;
}


/* Ajuste o espaçamento entre os botões */
.icon-container {
  transition: margin-bottom 0.3s ease;
}


.sidebar .icon-container {
  margin-bottom: 10px; /* Definir um pequeno espaçamento entre os botões */
}


.sidebar.expanded .icon-container {
  margin-bottom: 20px; /* Maior distância quando as listas estão abertas */
}


.sidebar.expanded .list.show ~ .icon-container {
  margin-bottom: 20px; /* Mantém o espaçamento maior quando as listas estão abertas */
}


/*IMAGENS*/
.img-planta{
  display: flex;
  justify-content: left;
  flex-direction: row;
  gap: 50px;
}


.img-planta img{
  width: 30%;
  height: 30%;
  object-fit: cover;
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.654);
}


#resumo{
font-family: 'Times New Roman', Times, serif;
font-size: large;
}


#resumo >h2{
font-family: 'Times New Roman', Times, serif;
}


#info{
font-family: 'Times New Roman', Times, serif;
font-size: large;
}
#info >h2{
font-family: 'Times New Roman', Times, serif;
}


#nome_planta{
  font-family: 'Times New Roman', Times, serif;
  font-size: 45px;  
  text-align: center;
  }


  section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
    padding: 20px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


#Informativo {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}


/* Estilização dos títulos */
section h1 {
    font-size: 28px;
    color: #00695c;
    margin-bottom: 5px;
    text-transform: uppercase;
    border-bottom: 2px solid #80cbc4;
    padding-bottom: 5px;
    
}

section h2 {
    font-size: 24px;
    color: #004d40;
    margin-top: 15px;
    margin-bottom: 10px;
}


/* Parágrafos */
section p {
    font-size: 20px;
    line-height: 1.6;
    color: #333333;
    text-align: justify;
}


/* Conteúdo informativo */
.info {
  width: 100%;
    margin-top: 20px;
    margin-bottom: 40px;
    padding: 20px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.resumo {
  width: 100%;
    margin-top: 20px;
    margin-bottom: 40px;
    padding: 20px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Ajuste das imagens */
.img-planta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 10px;
    justify-content: center;
}


.img-planta img {
    width: 100%;
    max-width: 300px;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}


/* Títulos centrais */
#nome_planta {
    font-family: 'Times New Roman', Times, serif;
    font-size: 45px;
    text-align: center;
    color: #004d40;
    margin-bottom: 20px;
}


#resumo h2, #info h2 {
    font-family: 'Times New Roman', Times, serif;
    font-size: 28px;
    margin-top: 15px;
    color: #00695c;
    border-bottom: 1px solid #80cbc4;
    padding-bottom: 5px;
}