@charset "UTF-8";

/* ---------------------inicio media query menu ----------------*/

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

  .hamburger,
  .toggle-menu {
     display: block;

}

.header {

  padding: 10px 20px;

}

.menu {
  justify-content: start;
  flex-direction: column;
  align-items: center;
  position: fixed;
  top: 0;
  right: -300px ;
  background: white;
  width: 300px;
  height: 100%;
  padding-top: 65px;


}

.menu li{

  width: 100%;
}

.menu li a,
.menu li a :hover {

  padding: 30px;
  font-size: 24px;
  box-shadow: 0 1px 0 rgb(255, 255, 255,0.1) inset;

}
  
}

/* --------------------fim media query menu ----------------*/


/* --------------------media query imagem de fundo------------------------- */

@media screen and (min-width: 768px){
    .imagem{
      max-height: 300px;
    }

    .texto #maior{
      text-align: center;
        font-size: 2.6em;
      }
    
      .texto #menor{
        text-align: center;
        font-size: 1.6em;
      }
      
}

/* -----------------------fim media query imagem de fundo ------------------*/

/*---------------------- media query footer------------------- */

@media screen and (min-width: 800px) {
  footer{
  }
  
  .row-footer{
      display: flex;
  }
  .footer-col{
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 30px;
  }
  ul{
      list-style: none;
  }
  .container-imagens-footer{
      margin: auto;
      padding-left: 45px;
  }
  


 
  
}


/* -------------------------Fim media query footer----------------------- */

/* -----------------------------pagina do cadastro----------------------*/

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

  .img-cad{
      display: none;
     
  }
  
  .left-login{
      display: none;
  }
  
  .left-login h1{
      display: none;
  }
  
  .right-login{
      width: 100%;
  }
  
  .card-login{
      width: 100%;
  
  }

  .textfield{

    width: 70vw;

  }
  }
  
  @media screen and (max-width: 1200px) {
  
     .card-login{
          width: 80%;
      }
  
      
      
      }

      /* -------------------------------Fim media query cadastro -----------------------------*/


      /*---------------------------- Inicio media query "Sobre nós" ------------------------*/
      @media screen and (max-width:1030px) {
        .ImagemSobrenos{
            display: none;
        }
        .conteudo-container-sobrenos{
            height: 750px;
            padding-right: 0px;
        }
        .TextoSobrenos{
            border-radius: 10px;
            width: 480px;
        }
     }

    /* ------------------------im media query "Sobre nós" -------------------*/

    /* --------------------Início media query "Carrossel de criadores" ---------------------------*/

    @media screen and (min-width:768px) {
      .titulo-perfil{
        height: 100vh;
        width: 80%;
        border-radius: 5%;
        
    }
    .perfil-text{
      width: 520px;
      margin-top: -50px;
    }
    .perfil-text p{
      font-size: 20px;
    }
    .perfil-text p p2{
      font-size: 20px;
    }
    .perfil-text h3{
      font-size: 20px;
    }
    .perfil-imagem{
      margin-top: 20px;
    }
    .indicador-perfil{
      bottom: 10px;
      left: 43%;
    }
    }
    
    
    @media screen and (min-width:1024px) {
      
      .titulo-perfil{
        height: 100vh;
    }
    .perfil-text{
      width: 550px;
      right: 16%;
    }
    
    }

    /*----------------- Fim media query "Carrossel de criadores" ----------------*/

    /*--------------------Inicio media query "Atalhos de categorias"-------------- */

    @media screen and (min-width:768px) {
      .container-conteudo-Categorias{
        display: flex;
        padding-top: 20px;
    }
      .Imagem1-Categorias{
        width: 220px;
      }
      .Imagem2-Categorias{
        width: 220px;
        margin-top: 0px;
        margin-left: -30px;
      }
      .Imagem1-Categorias img{
        width: 250px;
        height: 220px;
      }
      .Imagem2-Categorias img{
        width: 220px;
        height: 220px;
      }
    }

    @media screen and (min-width:1200px) {
      .Imagem2-Categorias{
        width: 280px;
        margin-top: 0px;
        margin-left: -90px;
      }

      .Imagem1-Categorias{
        width: 280px;
      }
      
      .Imagem1-Categorias img{
        width: 280px;
        height: 280px;
      }
      .Imagem2-Categorias img{
        width: 280px;
        height: 280px;
      }
    }

    @media screen and (min-width:1000px) {
      .Imagem2-Categorias{
        width: 270px;
        margin-top: 0px;
        margin-left: -70px;
      }

      .Imagem1-Categorias{
        width: 270px;
      }
      
      .Imagem1-Categorias img{
        width: 270px;
        height: 270px;
      }
      .Imagem2-Categorias img{
        width: 270px;
        height: 270px;
      }
    }
    
    
    
    @media screen and (min-width:1500px) {
      .Imagem2-Categorias{
        margin-left: -60px;
      }
      .Imagem1-Categorias{
        width: 300px;
      }
      .Imagem2-Categorias{
        width: 300px;
        margin-top: 0px;
        margin-left: -180px;
      }
      .Imagem1-Categorias img{
        width: 300px;
        height: 300px;
      }
      .Imagem2-Categorias img{
        width: 300px;
        height: 300px;
      }
    }
    

    /* ---------------Fim media query "Atalhos de categorias" ------------------*/

/* Media-query da página de roupas masculinas e femininas  */


    
@media screen and (max-width: 768px) {
  .clothing-item {
      flex: 0 0 calc(50% - 20px);
      width: calc(50% - 20px);
  }
}

@media screen and (max-width: 555px) {
  .clothing-item {
      flex: 0 0 auto;
      width: 100%;
  }

  .cntainer-img img {
  width: 550px;
    

  
  
}
}

/* Media-query da página dos Produtos  */


@media (max-width: 768px) {
  .allcontainer {
      flex-direction: column;
      align-items: center;
  display: flex;
  
  padding: 20px;
  }

main {
  display: flex;
    width: 100%;
  align-items: center;
  
}

  .container-img img {
      width: 100%;
      max-width: 400px; /* Ajuste o tamanho da imagem conforme necessário */
      align-items: center;
  }

.container-info-product {
      padding: 20px;
      text-align: center;
  }
  
  .container-price span {
      font-size: 18px; /* Reduza o tamanho da fonte para telas menores */
  }

  .container-description {
      padding: 20px 0;
  }

  .text-description {
      font-size: 14px; /* Reduza o tamanho da fonte para telas menores */
  }

  .container-social {
      padding: 10px 0;
  }
}
/* Ajuste o layout para telas menores, como celulares */
@media (max-width: 480px) {
  .allcontainer {
      flex-direction: column;
      align-items: center;
      width: 100%;
      padding: 10px;
  }

  main {
      display: flex;
      width: 100%;
      align-items: center;
  }

  .container-img img {
      width: 100%;
      max-width: 300px; /* Reduza o tamanho da imagem para telas menores */
      align-items: center;
  }

  .container-info-product {
      padding: 10px;
      text-align: center;
  }

  .container-price span {
      font-size: 16px; /* Reduza o tamanho da fonte para telas menores */
  }

  .container-description {
      padding: 10px 0;
  }

  .text-description {
      font-size: 14px; /* Reduza o tamanho da fonte para telas menores */
  }

  .container-social {
      padding: 10px 0;
  }
}

/* Ajuste o layout para telas de tablets */
@media (min-width: 481px) and (max-width: 1024px) {
  .allcontainer {
  display: flex;
    
      padding: 5px;
      width: 100%;

  }

  main {
      width: 100%;
      display: flex;
      align-items: center;
  }

  .container-img img {
      width: 100%;
      max-width: 400px; /* Tamanho da imagem para tablets */
  }

  .container-info-product {
      padding: 20px;
      text-align: left;
  }

  .container-description {
      padding: 20px 0;
  }
}




/* Media-query da página dos usuario  */

@media screen and (max-width:810px) {
  .parte-perfil-usuario{
   flex-direction: column;
  }
  .textos-perfil-usuario{
   margin-top: 30px;
  }
  .btn-sair-perfil-usuario{
     margin-top: 20px;
     text-align: center;
 }
}

@media screen and (min-width:880px) {
  .tudo-perfil-usuario{
     margin: auto;
     margin-top: 50px;
     margin-bottom: 50px;
   width: 900px;
 }
}

@media screen and (min-width:850px) {
    .tudo-tudo-desktop{
        display: block;
        display: flex;
    }
    .tudo{
        display: none;
    }
}

/*-------------------------------------------ERROR MENSAGE SEARCH PAGE----------------------------------------------------*/ 

@media (min-width: 760px){
  .erro-prod-search{
    padding: 220px;
  }
}

/*-------------------------------------------------------------------------------------------------------*/ 
@media screen and (min-width:790px) {
  .tudo-tudo-desktop{
      display: block;
      display: flex;
  }
  .tudo{
      display: none;
  }
}