#home {
  display: flex;
  min-height: calc(100vh - 91px);
  position: relative;
  margin-left: 20%;
}

#cta {
  width: 35%;
  display: flex;
  flex-direction: column;
  gap: 21px;
  margin-top: 13%;
  align-items: center;
}

#cta .title {
  font-size: 2rem;
  color: #e0e0e0;
  text-align: center;
  background-color: black;
}

#cta .description {
  font-size: 20px;
  color: #1d1d1d;
  text-align: center;
  font-weight: 300;
}

#cta_buttons {
  display: flex;
  gap: 24px;
}

#cta_buttons a {
  text-decoration: none;
  color: #f0f0f0;
}

#banner {
  display: flex;
  align-items: start;
  justify-content: center;
  width: 90%;
  z-index: 2;
}

#banner img {
  height: 90%;
  width: 800px;
  max-width: 100%; /* Garante que a imagem não ultrapasse o contêiner */
}

/* Responsividade */
@media screen and (max-width: 1355px) {
  #home {
    min-height: 100%;
    padding-top: 0px;
    margin-left: 0; /* Remove a margem lateral para telas menores */
    flex-direction: column; /* Empilha os elementos verticalmente */
  }
  #cta {
    width: 100%;
    margin-top: 5%; /* Ajusta a margem para não ficar muito alta */
    padding: 0 20px; /* Adiciona padding lateral para não colar nas bordas */
  }
  #banner {
    width: 100%;
    padding: 20px; /* Espaçamento para a imagem */
  }
  #banner img {
    width: 100%; /* Imagem se ajusta à largura do contêiner */
    height: auto; /* Mantém a proporção */
  }
}

@media screen and (max-width: 1024px) {
  #cta .title {
    font-size: 1.8rem; /* Reduz o tamanho do título */
  }
  #cta .description {
    font-size: 18px; /* Ajusta a descrição para legibilidade */
  }
  #cta_buttons {
    gap: 15px; /* Reduz o espaçamento entre botões */
  }
}

@media screen and (max-width: 768px) {
  #home {
    flex-direction: column; /* Garante que seja coluna em telas menores */
  }
  #cta {
    margin-top: 3%; /* Menos espaço no topo */
    gap: 15px; /* Reduz o espaçamento interno */
  }
  #cta .title {
    font-size: 1.5rem; /* Título ainda menor */
  }
  #cta .description {
    font-size: 16px; /* Descrição ajustada */
  }
  #cta_buttons {
    flex-direction: column; /* Botões empilhados em telas pequenas */
    gap: 10px;
    align-items: center;
  }
  #banner img {
    width: 90%; /* Imagem um pouco menor para não ocupar tudo */
  }
}

@media screen and (max-width: 480px) {
  #cta .title {
    font-size: 1.2rem; /* Título pequeno para celulares */
  }
  #cta .description {
    font-size: 14px; /* Descrição legível em telas pequenas */
  }
  #cta_buttons a {
    font-size: 14px; /* Texto dos botões ajustado */
    padding: 8px 16px; /* Ajusta o tamanho dos botões, caso tenham padding */
  }
  #banner img {
    width: 100%; /* Imagem ocupa toda a largura disponível */
  }
}