#apresentacaoprodutos{
  margin-top: 200px;
}

.flex-titulo-sofisticação {
  position: relative;
}

.titulo-sofisticacao {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: white;
  position: relative;
}

.titulo-sofisticacao h2 {
  font-weight: normal;
}

.line-horinzontal.cima {
  width: 2px;
  height: 65px;
  margin-right: 5px;
  border: 2px solid white;
}

.line-horinzontal.baixo {
  margin-top: 5px;
  width: 2px;
  height: 36px;
  position: relative;
  margin-bottom: -36px;
  margin-left:-28px;
  position: absolute;
  border: 2px solid white;
}

.button-sofisticacao {
  position: absolute;
  margin-top: 3px;
  margin-right: 5%;
  top: 50%;
  width: 350px;
  height: 40px;
  border-radius: 15px;
  border: 1px solid white;
  background: linear-gradient(#2a2829, #000000);
  color: white;
  font-size: 20px;
  transition: 0.5 ease-in-out;
}

.button-sofisticacao:hover{
  transform:translateY(5px);
  border:none;
}

.grid-container {
  display: grid;
  grid-template-columns: 700px 500px 450px;
  grid-template-rows: auto 50px auto;
  grid-template-areas:
    "blazers sapatos   marcas"
    "blazers  gravatas relogios"
    "blazers  gravatas descricao";
  justify-content: center;
  justify-items: center;
  align-items: center;
  align-content: center;
  margin-right: 100px;
  margin-top: 30px;
}

.blazers {
  grid-area: blazers;
  text-align: center;
  margin: 50px 30px 0 0;
}

.blazers img {
  width: 400px;
  height: 670px;
  border-radius: 15px;
  border: 1px solid white;
  object-fit: cover;
}

.blazers,
.sapatos,
.gravatas,
.relogios p {
  font-size: 30px;
  color: white;
}

.sapatos {
  grid-area: sapatos;
  border-radius: 10px;
  text-align: center;
  margin: 80px 30px 0 0;
}

.sapatos img {
  width: 350px;
  height: 300px;
  border-radius: 15px;
  border: 1px solid white;
  object-fit: cover;
}

.gravatas {
  grid-area: gravatas;
  border-radius: 15px;
  text-align: center;
  margin: 30px 25px 0 0;
}

.gravatas img {
  width: 350px;
  height: 300px;
  border-radius: 15px;
  border: 1px solid white;
  object-fit: cover;
}

.relogios {
  grid-area: relogios;
  border-radius: 15px;
  text-align: center;
  margin-bottom: 50px;
}

.relogios img {
  width: 350px;
  height: 300px;
  border-radius: 15px;
  border: 1px solid white;
  object-fit: cover;
}

.descricao {
  grid-area: descricao;
  border-radius: 15px;
  border: 1px solid white;
  text-align: center;
  background: linear-gradient(to right, #2a2829, #000000);
  width: 450px;
  height: 110px;
  margin-top: 140px;
}

.descricao p {
  color: white;
  font-size: 20px;
  text-align: justify;
  margin: 15px;
}

.logo-sofisticacao {
  background: linear-gradient(to right, #ffffff 50%, #544f51);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Berkshire Swash", serif;
  font-size: 30px;
  width: 170px;
  height: 50px;
  margin: 10px 0 0 280px;
}

.marcas {
  grid-area: marcas;
  border-radius: 15px;
  border-radius: 15px;
  border: 1px solid white;
  text-align: center;
  background: linear-gradient(to right, #2a2829, #000000);
  width: 450px;
  height: 110px;
  margin-bottom: 145px;
}

.marcas p {
  text-align: justify;
  color: white;
  font-size: 20px;
  margin: 25px;
}
@media (min-width: 1366px) and (max-width: 1599px) {


  #apresentacaoprodutos{
   margin-top:100px;
   }

   .button-sofisticacao {
    right: 14%;
  }


.line-horinzontal.baixo {
  left: 59%;
}
   
  .grid-container {
    display: grid;
    grid-template-columns: auto auto 450px;
    grid-template-rows: 150px 170px 200px;
    grid-template-areas:
      "blazers sapatos   marcas"
      "blazers  sapatos relogios"
      "blazers  gravatas descricao";
    justify-content: center;
    justify-items: center;
    align-items: start;
    align-content: start;
    margin:0;
    gap:30px;
    
  }
  

  .blazers img {
    width: 260px;
    height: 450px;
  }

  .sapatos img{
    width: 230px;
    height: 190px;
  }

  .gravatas img{
    width: 230px;
    height: 190px;
  }

  .relogios img{
    width: 230px;
    height: 190px;
  }

  .sapatos{
    margin:50px 0 0 0;
  }

  .gravatas{
   margin:-40px 0 0 0;
  }

  .relogios{
   margin:10px 0 0 0;
  }

  .blazer{
   margin:0;
  }

  .marcas{
   margin:50px 0 0 0;
  }

  .descricao{
   margin:40px 0 0 0;
  }

.blazers,
.sapatos,
.gravatas,
.relogios p {
  font-size: 20px;
  color: white;
}

.button-sofisticacao {
  position: absolute;
  margin-top: 3px;
  margin-right: 0.4%;
}

.line-horinzontal.baixo {
  margin-top: 5px;
  width: 2px;
  height: 36px;
  position: relative;
  margin-bottom: -36px;
  margin-left:-1px;
  position: absolute;
  border: 2px solid white;
}



}

@media (min-width:1600px){
  .button-sofisticacao{
    right:19%;
  }
  .line-horinzontal.baixo{
    left:58%;
  }

  .grid-container {
    display: grid;
    grid-template-columns: auto auto 430px;
    grid-template-rows: 230px 230px 230px;
    grid-template-areas:
      "blazers sapatos   marcas"
      "blazers  sapatos relogios"
      "blazers  gravatas descricao";
    justify-content: center;
    justify-items: center;
    align-items: start;
    align-content: start;
    margin:0;
    gap:30px;
    
  }

  .gravatas{
    margin-top:-50px;
  }

  .gravatas img{
    width: 350px;
    height: 270px;
  }

  .sapatos{
    width: 350px;
    height: 270px;
  }

  .sapatos img{
    margin-top:-20px;
  }

  .marcas{
    margin-top:80px;
  }

  .descricao{
    margin-top:110px;
  }
  
}