.styled-hr {
  width: 100%;
  border: 0; /* Remove a borda padrão */
  height: 2px; /* Define a espessura da linha */
  background-color: #e0e0e0; /* Cor da linha (um cinza claro) */
  margin: 40px 0; /* Espaçamento vertical (em cima e embaixo) */
  background-color: rgb(212, 211, 212);
}

#development {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ffffff;
  
}

#development .title {
  padding: 20px;
  font-size: 2.6rem;
  text-align: center;
  margin-top: 120px;
}

#development .description {
  color: var(--color-primary-5);
  font-size: 1.3rem;
  text-align: center;
  padding: 0;
}


.cards-development {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  padding: 20px;
}

.card-development {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: center;
  padding: 0px 20px 0px 20px;
}

.text-development {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 40px;
  width: 50%;
}


.text-development .title-card {
  padding: 0;
  font-size: 1.8rem;
  text-align: start;
  color: var(--color-primary-5);
  margin-top: 20px;
}


/*Segundo Card*/

.card-landpage {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  align-items: start;
  justify-content: center;
  padding: 25px;
}

.card-biolink {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: center;
  padding: 25px;
}






.text-development .check-list {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 10px;
  color: rgb(19, 19, 19);
  
  
}

.price-button {
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: start;
  gap: 30px;
  margin-top: 30px;
}

#development #price {
  color: black;
  font-weight: 600;
  font-size: 1.5rem;
}

#price span {
  font-size: 1.2rem;
  font-weight: 350;
}

#development #price #text {
  color: black;
  font-weight: 600;
}

#orcamento {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 50px;
  color: var(--color-primary-5);
  background-color: rgba(83, 83, 83, 0.719);
  padding: 60px;
  text-align: center;
}

.solicitar {
  font-size: 1.8rem;
  font-style: italic;
}
#orcamento a {
  border: none;
  width: 27vh;
  height: 6vh;
  color: #e0e0e0;
  font-weight: 300;
  text-decoration: none; /* Remove o sublinhado padrão */
  padding: 5px 10px; /* Adiciona um espaço para visualização */
  transition: text-decoration 0.3s; /* Adiciona transição suave (opcional) */
  white-space: nowrap;
}

#orcamento a:hover {
  text-decoration: underline; /* Adiciona o sublinhado */
  color: var(
    --color-primary-1
  ); /* Mudar a cor do texto ao passar o mouse (opcional) */
}

.fa-arrow-right {
  margin-bottom: 2px;
  font-size: 0.8em;
}


/* --- Media Query para SMARTPHONES (Largura máxima de 480px) --- */
@media screen and (max-width: 480px) {
  /* 1. Ajuste Geral da Seção */
    #development {
        gap: 30px;
        /* Garante que o conteúdo dentro da seção development fique alinhado à esquerda */
        align-items: flex-start;
        padding: 0 15px; /* Adiciona padding lateral para respiro */
    }

    /* 2. Ajuste de Títulos e Textos */
    
    /* Mantém o Título principal da seção CENTRALIZADO */
    #development .title {
        font-size: 2rem;
        text-align: start;
        width: 100%; /* Garante que ele ocupe toda a largura para centralizar corretamente */
        margin-top: 80px;
    }

    /* Reduz e alinha à ESQUERDA a descrição principal */
    #development .description {
        font-size: 1rem;
        text-align: start;
       
    }
    
    /* Reduz e alinha à ESQUERDA o título do card */
    #development .title-card {
        font-size: 1.5rem;
        text-align: start;
        margin-top: 10px;
    }

    /* 3. Ajuste de Layout dos Cards (Empilhamento e Alinhamento) */
    
    .card-development,
    .card-landpage,
    .card-biolink {
        /* Transforma de row para COLUMN (empilha verticalmente) */
        flex-direction: column !important; 
        /* Alinha os itens do card à ESQUERDA */
        align-items: flex-start; 
        /* Remove o padding lateral excessivo do desktop */
        padding: 20px 0; 
    }

    .text-development {
        /* Ocupa a largura total */
        width: 100%; 
        gap: 20px;
        /* Garante que o conteúdo de texto esteja alinhado à ESQUERDA */
        align-items: flex-start; 
        /* Para o card-landpage, garante que o texto fique embaixo da imagem */
        order: 2; 
    }
    
    /* Garante que a imagem venha primeiro no card-landpage */
    .img-site {
        order: 1; 
        /* Alinha a imagem à esquerda */
        align-self: flex-start;
    }

    .img-site img {
        /* Imagem ocupa 100% da largura do seu container */
        width: 100%; 
        /* A imagem original que tinha width: 500px, agora é fluida */
        max-width: 100%; 
        height: auto;
        margin-bottom: 20px;
    }

    /* 4. Alinhamento de Listas e Preço/Botão */
    
    .cards-development {
        padding: 0;
        align-items: flex-start;
        width: 100%;
    }

    .check-list {
        align-items: flex-start;
    }

    .price-button {
        /* Empilha preço e botão */
        flex-direction: column; 
        /* Alinha os itens empilhados à ESQUERDA */
        align-items: flex-start; 
        gap: 20px;
        margin-top: 20px;
    }

    .price-button .button-services{
      width: 350px;
    }
    
    /* 5. Ajuste do BOTÃO (100% da largura) */
    
    /* Alvo o botão dentro da seção #orcamento */
    #orcamento a {
        /* Ocupa a largura total do container */
        width: 100%; 
        height: auto;
        text-align: center; /* Centraliza o texto do botão */
        /* padding: 15px 0; para botões maiores, ajuste conforme necessário */
        padding: 15px 10px; /* Aumenta o padding para ser mais fácil de clicar */
        /* Garante que o container do botão (orcamento) fique com largura total */
        box-sizing: border-box; 
    }
    
    #orcamento {
        padding: 40px 15px; /* Reduz o padding da seção orcamento */
        text-align: center;
        gap: 18px;
    }

    .solicitar{
      font-size: 1.3rem;
      
    }


}


@media (min-width: 768px) and (max-width: 1024px){
  .card-development {
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  align-items: start;
  justify-content: center;
  padding: 0px 20px 0px 20px;
}

/*Segundo Card*/

.card-landpage {
  width: 100%;
  display: flex;
  flex-direction:column-reverse;
  align-items: start;
  justify-content: center;
  padding: 25px;
}

.card-biolink {
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  align-items: start;
  justify-content: center;
  padding: 25px;
}

.text-development {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 40px;
  width: 100%;
}

}