body {
  margin: 0 248px;
  font-family: 'Paralucent', sans-serif;
}

h1 {
  color: #4F4F4F;
  font-weight: 200;
  font-size: 24px;
}

h2 {
  color: #4F4F4F;
  font-weight: 200;
  line-height: 150%;
  font-size: 16px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 32px;
  margin-top: 248px;
}

.header div {
  font-size: 16px;
}

.nav-link {
  color: #4F4F4F;
  letter-spacing: 2.56px;
  text-decoration-line: underline;
  text-transform: uppercase;
  cursor: pointer;
}

.nav-link.active {
  margin-right: 16px;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(269px, 1fr));
  grid-gap: 64px;
  justify-content: center;
  margin: 120px 0;
}

.item {
  text-align: center;
}

.item img {
  width: 100%;
  height: auto;
}

.item p {
  text-align: left;
  font-size: 16px;
}


/** sobre **/
.sobre {
  display: flex;
  flex-wrap: wrap; /* Permite que os elementos se ajustem à largura da tela */
  margin-top: 120px;
}

.sobre img {
  max-width: 273px; /* Largura máxima da imagem */
  width: 100%; /* Largura da imagem ajustada à largura do contêiner */
  object-fit: cover;
  margin-right: 32px; /* Espaçamento entre a foto e o texto */
  margin-bottom: 16px; /* Espaçamento inferior */
}

.sobre-texto {
  color: #4F4F4F;
  font-size: 16px;
  font-weight: 400;
  max-width: 397px;
}

.sobre h1 {
  font-size: 16px;
  color: #4F4F4F;
}

.sobre p {
  font-size: 16px;
  color: #4F4F4F;
  line-height: 24px;
}


/** FOOTER **/
.footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 348px;
  margin-bottom: 120px;
}

.footer div {
  font-size: 14px;
}

.footer p {
  color: #4F4F4F;
  font-weight: 200;
  line-height: 150%;
  font-size: 14px;
}

.footer-link1 {
  margin-right: 16px;
  color: #4F4F4F;
  letter-spacing: 2.56px;
  text-decoration-line: underline;
  text-transform: uppercase;
  cursor: pointer;
}
.footer-link2 {
  margin-right: 16px;
  color: #4F4F4F;
  letter-spacing: 2.56px;
  text-decoration-line: underline;
  text-transform: uppercase;
  cursor: pointer;
}
.footer-link3 {
  color: #4F4F4F;
  letter-spacing: 2.56px;
  text-decoration-line: underline;
  text-transform: uppercase;
  cursor: pointer;
}


/*media query para resoluções menores que 1150px */
@media only screen and (max-width: 1150px) {
  .header {
    flex-direction: column;
    margin-top: 124px; /* Remova a margem superior no modo responsivo */
  }

  .header div {
    margin-top: 16px; /* Adiciona espaçamento entre h2 e links na resolução menor */
  }


  .container {
    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)); /* Uma coluna em telas menores que 1150px */
    grid-gap: 32px;
  }

  .footer {
    flex-direction: column;
    margin-top: 16px; /* Adiciona espaçamento entre h1 e links no modo responsivo */
  }

  .footer{
    margin-top: 248px; /* Adiciona espaçamento entre h1 e p no modo responsivo */
  }
  .footer div{
    margin-top: 32px; /* Adiciona espaçamento entre h1 e p no modo responsivo */
  }
}

@media only screen and (max-width: 744px) {
  body {
    margin: 0 124px; /* Ajusta as margens para 16px em cada lado em telas menores que 744px */
  }

  .header {
    margin-top: 124px; /* Remove a margem superior no modo responsivo */
  }

  .container {
    margin: 32px 0; /* Ajusta a margem superior e inferior em telas menores que 744px */
  }

  .footer {
    margin-top: 124px; /* Ajusta a margem superior no modo responsivo */
  }
}


@media only screen and (max-width: 550px) {

  body {
    margin: 0 64px; /* Ajusta as margens para 16px em cada lado em telas menores que 744px */
  }
  .container {
    margin-top: 64px;
  }
  .header div {
    margin-top: 32px;
}
}

@media only screen and (max-width: 450px) {

  body {
    margin: 0 48px; /* Ajusta as margens para 16px em cada lado em telas menores que 744px */
  }

  .header{
    margin-top: 48px;
    
  }
  .container {
    margin-top: 48px;
  }
  .header div {
    margin-top: 32px;
}
}

@media only screen and (max-width: 395px) {

  body {
    margin: 0 32px; /* Ajusta as margens para 16px em cada lado em telas menores que 744px */
  }

 
}