* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  
  
}

header {
  background-color: #fff;
  box-shadow: 0px 3px 10px #464646;
  color: #000000;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.nav-bar {
  display: flex;
  justify-content: space-between;
  padding: 1.6rem 6rem;
}

.logo {
  display: flex;
  align-items: center;
}

.logo h1 {
  color: #000000;
}

.nav-list {
  display: flex;
  align-items: center;
}

.nav-list ul {
  display: flex;
  justify-content: center;
  list-style: none;
}

.nav-item {
  margin: 0 15px;
}

.nav-link {
  text-decoration: none;
  font-size: 1.15rem;
  color: #fff;
  font-weight: 400;
}



.mobile-menu-icon {
  display: none;
}

.mobile-menu {
  display: none;
}

@media screen and (max-width: 768px) {
  .nav-bar {
      padding: 1.5rem 4rem;
  }
  .nav-item {
      display: none;
  }
  .login-button {
      display: none;
  }
  .mobile-menu-icon {
      display: block;
  }
  .mobile-menu-icon button {
      background-color: transparent;
      border: none;
      cursor: pointer;
  }
  .mobile-menu ul {
      display: flex;
      flex-direction: column;
      text-align: center;
      padding-bottom: 1rem;
  }
  .mobile-menu .nav-item {
      display: block;
      padding-top: 1.2rem;
  }
  .mobile-menu .login-button {
      display: block;
      padding: 1rem 2rem;
  }
  .mobile-menu .login-button button {
      width: 100%;
  }
  .open {
      display: block;
  }
}


header img {
  max-width: 150px;
  /* Ajuste o tamanho do logo conforme necessário */
}

.separador {
  margin-bottom: 120px;
}

nav {
  margin-left: auto;
}

nav ul {
  list-style-type: none;
  display: flex;
}

nav ul li {

  margin-right: 20px;
}

nav ul li a {
  text-decoration: none;
  color: #ffff;
  font-size: 16px;
  background-color: #0303b5;
  font-family:Verdana, Geneva, Tahoma, sans-serif;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 10px
}

.container {
  display: grid;
  flex-direction: flex-start;
  grid-template-columns: 10 20; /* Duas colunas, uma para a imagem e outra para o texto */
  grid-gap: 20px; /* Espaço entre as colunas */
}

.imagem {
  /* Ocupa a primeira coluna */
  grid-column: 1;
  
}

.suporte {
  max-width: 80%;
  border-radius: 50%; /* A imagem se ajustará ao tamanho da coluna */
}

.texto h2 {
  margin-bottom: 10px; /* Espaço abaixo do título */
}

.texto p {
  margin-bottom: 15px; /* Espaço abaixo do parágrafo */
}

/*Imagem de cima*/
.conteudo {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}

.img {
  flex: 1;
  margin-left: 20px; /* Adicione margem entre a imagem e o texto */
}

.text {
  flex: 2;
  font-size: 1.4em;
}

.texto {
  /* Ocupa a segunda coluna */
  grid-column: 2;
  display: flex;
  flex: 2;
  flex-direction: column;
  justify-content: flex-start;
  font-size: 1.6rem
}
.texto p{
  font-size: 1.4rem;
}
.img img {
  width: 100%; /* Garante que a imagem preencha o espaço disponível */
}
.suport {
  max-width: 100%;
  border-radius: 50%; /* A imagem se ajustará ao tamanho da coluna */
}


.imagemDesk,
h3 {
  text-align: center;
}

/* Estilos para os botões de aluguel */
button {
  text-align: center;
  /* Centraliza os botões horizontalmente */
}

 a {
  text-decoration: none;
  color: white;
}

 button {
  background-color: #4169E1;
  /* Azul royal */
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 10px;
  /* Espaçamento superior para separar os botões */
}

 button:hover {
  background-color: #1E90FF;
  /* Azul mais escuro ao passar o mouse */
}
 .btn-m:hover{
  background-color: white;
}

/* Estilos para quando o título desaparecer */
.hidden {
  display: none;
}

.icon{
  background-color: white;
  
}

/* Estilos para o body  "Com uma sólida base em tecnologia, adquirida através de uma série de trabalhos freelancers anteriores, estou agora mergulhando em uma emocionante oportunidade em uma empresa onde posso aplicar meu conhecimento tanto em software quanto em hardware. Minha jornada profissional me proporcionou experiência prática e diversificada, permitindo-me entender profundamente as nuances desses dois domínios. Através dos meus freelas, desenvolvi habilidades valiosas de resolução de problemas e flexibilidade, enquanto minha atual posição me permite aprofundar meu conhecimento técnico e colaborar em projetos multifacetados. Estou entusiasmado para continuar crescendo e contribuindo para soluções inovadoras nesse campo fascinant*/
body {
  font-family: Arial, sans-serif;
 
}

/* Estilos para as seções */
section {
  padding: 20px;
  border: 2px ;
  border-radius: 20px;
  margin-bottom: 20px;
  text-align: center;
}

section h2 {
  margin-bottom: 10px;
  text-align: center;
}

section p {
  margin-bottom: 15px;
  text-align: center;
}

/* CSS for grid layout */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 20px;
}
.gridImpressoras{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 20px;
}

.produto {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.produto h3 {
  font-size: 1.5em;
  margin-bottom: 10px;
}

.produto p {
  font-size: 1em;
}

.imagemDesk img {
  max-width: 50%;
}

.botoesAlugar {
  background-color: #0303b5;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
}

.botoesAlugar a {
  color: white;
  text-decoration: none;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  border: 1px solid #0303b5;
  
 
}
 .gabinete{
  max-width:230px;
  max-height: 195px;
  width: auto;
  height: auto;
}
.produto {
  padding: 20px;
  
  /* Bordas duplas em preto */
  border-radius: 10px;
}

.produto h3 {
  margin-bottom: 10px;
}

.produto p {
  margin-bottom: 15px;
}

 button {
  background-color: #4169E1;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;

}

.produto button:hover {
  background-color: #1E90FF;
  /* Azul mais escuro ao passar o mouse */
}

/* Estilos para o footer */
footer {
  background-color: #e0e0e0;
  padding: 20px;
  text-align: center;
  border-top: 2px solid #0303b5;
  /* Linha superior */
}
.instagram-logo {
  width: auto;
  height: 30px; /* Ajuste a altura conforme necessário */
  
  
}
img{
 max-width: 80%;
 height: auto;
}
.img .suport{
  max-width: 80%;
}

.botoesAlugar #btn-aumentar{
  font-size: 1.0rem;
}
/* Estilos para o menu de navegação em telas pequenas */
@media screen and (max-width: 768px) {
  nav {
    margin-left: 0;
  }
  
  nav ul {
    flex-direction: column;
    align-items: center;
  }
  
  nav ul li {
    margin-right: 0;
    margin-bottom: 10px;
  }
}

@media screen and (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;    }
  
  .imagem {
    grid-column: 1 / -1; /  }
  
  .texto {
    grid-column: 1 / -1;     margin-top: 20px; 
}
footer {
  padding: 10px;
}
nav {
  margin-left: 0;
}

nav ul {
  flex-direction: column;
  align-items: center;
}

nav ul li {
  margin-right: 0;
  margin-bottom: 10px;
}
.nav-link{
  color: black;
}

}