#desktop {
    display: block;
}

.header-destkop {
  display: flex;
  width: 100%;
  /* max-width: 1600px; */
  margin: 0 auto;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 7.2%;
}

.menu {
  display: flex;
  gap: 2rem;
}

.menu a {
  color: white;
  text-decoration: none;
  font-weight: 500;
}

.menu a:hover {
  opacity: 0.8;
}

.user img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
}

.hero-desktop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    padding: 0 5%;
    position: relative;
}

.hero-content-desktop {
  max-width: 60%;
}

.hero-content-destop h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.hero-content-desktop p {
  font-size: 1.4rem;
  margin-bottom: 1.8rem;
}

.hero-desktop .buttons {
    display: flex;
    justify-content: left;
}

.hero-desktop .buttons a {
    padding: 5px 40px;
}

.hero-mockup {
  position: absolute;   /* ou fixed, se quiser que fique sempre visível mesmo rolando a tela */
  right: 0;             /* gruda no lado direito */
  bottom: 0;  
  /* width: 56%;  */
  max-width: 880px;   /* opcional: fixa na parte inferior */          /* mantém o tamanho definido */   /* limite de largura em desktops */
}

.bottom-left {
  position: absolute;   /* ou fixed, se quiser que fique fixa ao rolar a página */
  left: 6.2vw;              /* cola na esquerda */
  bottom: 8%;            /* cola na parte inferior */
  width: 120px;         /* ajuste o tamanho conforme necessário */
  max-width: 20%;       /* limite proporcional */
}

.menu-container {
  position: absolute;
  top: 20px;                  /* distância do topo */
  left: 50%;                  /* move para o centro horizontal */
  transform: translateX(-50%); /* centraliza de verdade */
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
  border-radius: 50px;
  padding: 0.5rem 2rem;
}

.menu {
  list-style: none;
  display: flex;
  gap: 3rem;
  margin: 0;
  padding: 0 20px;
}

.menu li a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  transition: opacity 0.3s ease;
}

.menu li a:hover {
  opacity: 0.8;
}