/* Reset de estilos padrão */
* {
  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;
  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;
  }
  .nav-link{
    color: black;
  }
}


header img {
  max-width: 100px;
  margin-left: 50px;
}

.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
}

.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 */
}

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



/* 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;
  color: black;
}

/* 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 */


.produto {
  position: relative;
  background-color: #dddddd;
  padding: 20px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  box-shadow:  10px 10px 10px rgb(106, 143, 255);

}
.produto:hover{
  top: -10px;
  box-shadow: 20px 20px 20px rgb(1, 47, 185) ;
  transition: 0.8s;
  cursor: pointer;
}
.produto h3 {
  font-size: 1.5em;
  margin-bottom: 10px;
}

.produto p {
  font-size: 1em;
}
.imagemDesk img {
  max-width: 100%;
}

.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;
  box-shadow: 10px rgb(3, 3, 3);
}

.gridIm {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  border: 1px solid #0000cc;
  
  box-shadow: 10px rgb(3, 3, 3);
}

.gabinete {
  max-width: 230px;
  max-height: 195px;
  width: auto;
  height: auto;
}

.produto {
  padding: 20px;

  /* Bordas duplas em preto */
  border-radius: 10px;
}
.btn-m:hover{
  background-color: #fff;

}
.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 */
}

.logo {
  display: flex;
  justify-content: space-between;
  color: #fff;

}

.instagram-logo {
  width: auto;
  height: 30px;
  /* Ajuste a altura conforme necessário */
}

#main-nav {
  position: fixed;
  /* make the menu fixed on the side of the page */
  top: 5;
  /* center the menu vertically */
  left: 0;
  /* position the menu on the right side of the page */
  transform: translateY(-50%);
  /* center the menu vertically */
  color: #fff;
  padding: 1rem;
  z-index: 1000;
  /* ensure the menu is on top of other elements */
  width: 200px;
  /* set the width of the menu */
}

#main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* stack the menu items vertically */
}

#main-nav li {
  position: relative;
}

#main-nav a {
  color: #fff;
  text-decoration: none;
  transition: color 0.2s ease;
}

#main-nav a:hover {
  color: #ccc;
}

#main-nav ul ul {
  position: absolute;
  top: 100%;
  left: 0;

  padding: 1rem;
  display: none;
}

#main-nav li:hover>ul {
  display: block;
}

#main-nav ul ul li {
  width: 100%;
}

#main-nav ul ul a {
  padding: 0.5rem;
  display: block;
}

.sticky {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background-color: #333;
  color: #fff;
  padding: 1rem;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

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 */


}
@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;
}

}