html{
  scroll-behavior: smooth;
}

p {
  font-family: "Montserrat", sans-serif ;
}

h1{
  font-family: "Montserrat", sans-serif ;
  font-weight: bold;
}

h2{
  font-family: "Montserrat", sans-serif ;
  font-weight: bold;
}

h3{
  font-family: "Montserrat", sans-serif ;
  font-weight: bold;
}

body{
  padding: 25px;
}

header{
  display: flex;
  background-color: #254a66;

}

nav{
  display: flex;
  justify-content: flex-end;

}

a{
  color: white;
  font-family: "Montserrat", sans-serif ;
  font-weight: bold;
  text-decoration: none;
  padding: 10px;
  justify-content: space-between;
}
a:hover{
  opacity: 50%;
}

.Images{
  background-color: #e05a30;
}

.Reviews{

  height: 350px;
  background-color: #e05a30;
}

.About{
  padding: 10%;
  background-color: #e05a30;
}

.Contact{
  display: flex;
  gap: 10%;
  padding: 10%;
  margin: 0;
  background-color: #254a66;
}


#Service-Text{
  display: flex;
  justify-content: center;
  color: #e05a30
  
  
}

.Services{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 350px;
  gap: 10px;
  margin: 50px;
}

.ServiceBlock{
  width: 200px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  border-radius: 5%;
  background-color: #254a66;
  transition: transform 0.3s, opacity 0.3s;
  
}

.ServiceBlock:hover{
  transform: scale(1.05);
  background-color: #798fa1;
}

.Forms{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  border: none; /* Removendo a borda do formulário */
  border-radius: 12px; /* Deixando o formulário mais arredondado */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Sombra suave para destacar */
  padding: 5%;
  font-family: "Montserrat", sans-serif;
  color: white;
}

/* Adiciona uma borda colorida quando o campo está em foco (clicado) */
form input:focus, form textarea:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

form button {
  background-color: #007bff;  /* COR DO BOTÃO */
  color: white;
  padding: 12px 20px;
  margin-top: 25px;
  border: none;
  border-radius: 8px;         /* BOTÃO ARREDONDADO */
  font-size: 16px;
  font-weight: bold;          /* ESTILO DA FONTE DO BOTÃO */
  cursor: pointer;
  transition: background-color 0.3s ease;
}

form input, form textarea {
  padding: 12px;
  border-radius: 8px; /* BORDAS ARREDONDADAS AQUI */
  border: 1px solid #ccc;
  font-size: 16px;
  font-family: inherit; /* Garante que o campo use a mesma fonte do resto */
}

form button:hover {
  background-color: #0056b3;
}

#familia{
  width: 100%;
  justify-content: flex-end;
}

#produtos{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10%;
  width: 80%;
}

#divider{
  background-color: #ffffff;
  padding: 1%;
}

.Welcome{
  display: flex;
  margin: 0%;
  gap: 10%;
  margin: 10%;
}

#Welcome-text{
  display: flex;
  justify-content: center;
  margin: 10%;
  color: #254a66;
}

.Hero{
  background-image: url(img/I.png);
  background-size: cover;
  height: 300px;
  color: white;
  padding: 50px 20px;
}

#Ser-vice{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5%;
  width: 80%;
}

#Logo{
  display: flex;
  align-items: center;
  justify-content: center;
}

#Slogan{
  display: flex;          /* Ativa o Flexbox para um alinhamento fácil */
  flex-direction: column; /* Coloca os itens (os <span>) em uma coluna, um embaixo do outro */
  align-items: flex-start;  /* Alinha tudo à esquerda. Mude para 'center' para centralizar. */
  padding-left: 10%;
  /* Estilos para a aparência */
  font-family: 'Montserrat', sans-serif; /* Exemplo de uma fonte moderna (use Google Fonts) */
  text-transform: uppercase; /* Deixa todo o texto em maiúsculas */
}

#Slogan span {
  display: block; /* Faz com que cada <span> ocupe sua própria linha */
  font-weight: bold; /* Deixa o texto em negrito */
  letter-spacing: 0.1px; /* Aumenta o espaçamento entre as letras */
}

.line1 {
  font-size: 65px;  /* Tamanho grande para o nome principal */
  color: rgb(248, 70, 0);  /* Uma cor escura, tipo azul-marinho */
  margin-bottom: 10px; /* Espaço abaixo de LILYCLEAN */
  text-shadow: #00070c;
}

.line2, .line3 {
  font-size: 24px;   /* Tamanho menor para o slogan */
  color: rgb(255, 255, 255);   /* Uma cor de destaque, tipo azul claro */
  line-height: 1.2;  /* Altura da linha para controlar o espaçamento entre "YOUR HOME," e "OUR CARE" */
  text-shadow: #254a66;
}