/*ESTILO GERAL*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  background-color: #191919;
  height: 100dvh;
}

.interface {
    max-width: 1280px;
    margin: 0 auto;
}

.flex {
  display: flex;
}

h2.title {
  color: white;
  font-size: 38px;
  text-align: center;
}

/* ESTILO CABEÇALHO */

header {
  padding: 0px 4%;
  background-color: #000;
}

header  .interface {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header .desk-top a {
  color: #ffffff;
  text-decoration: none;
  display: inline-block;
  transition: .2s;
  font-weight: 650;
  font-size: 20px;
}

header nav.desk-top a:hover {
  color: #fff;
  transform: scale(1.05);
}

header nav.desk-top ul {
  list-style-type: none;
}

header nav.desk-top ul li {
  display: inline-block;
  padding: 0 25px;
}

header .logo {
  height: auto;
}

/*ESTILO MENU MOBILE*/
.sumir{
  display: none;
}

.mob {
  display: flex;
  justify-content: space-between; /* Alinha os itens nas extremidades */
  align-items: center; /* Centraliza verticalmente os itens */
  padding: 10px; /* Adicione um espaçamento, se necessário */
}


.mob i{
  color: white;
  font-size: 35px;
}

.fecharcart{
    background-color: rgb(0, 0, 0);
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 99999;
    width: 0%;
    overflow: hidden;
    transition: .4s;

}
.fechar1{
  margin-right: auto; /* Empurra o ícone para a esquerda */
}

.fecharcart .fechar1 i{
  color: white;
  font-size: 30px ;
}

.fecharcart .fechar1{
  padding: 20px 5%;
  text-align: left;
}

.fecharcart a{
  text-align: center;
  display: block;
  padding: 20px;
}

.finalizar {
  color: white;
  text-align: center;
  background-image: linear-gradient( #8a6801 ,#886600);
  border: #FFC000 solid 3px;
  cursor: pointer;
  transition: .3s;
  border-radius: 30px;
  font-size: 22px;
  font-weight: 500;
  padding: 10px 5%;
}

.remove-from-cart-btn{
  width: 60%;
  height: 50px;
  margin-top: 25px;
  background-image: linear-gradient( #8a6801 ,#886600);
  border: #FFC000 solid 3px;
  color: white;
  font-size: 22px;
  border-radius: 30px;
}

.finalizartbutton:hover{
  box-shadow: 0px 0px 8px #FFC000;
  transform: scale(1.05);
}


.menu-cell{
  background-color: rgb(0, 0, 0);
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  width: 0%;
  overflow: hidden;
  transition: .4s;
}

.menu-cell.abrir-menu{
  width: 70%;
}
.fecharcart.abrir-menu2{
  width: 70%;
}
.fecharcart.abrir-menu3{
  width: 70%;
}


.menu-cell.abrir-menu ~ .overlay-menu-cell{
  display: block;
}
.fecharcart.abrir-menu2 ~ .overlay-menu-cell{
  display: block;
}
.fecharcart.abrir-menu3 ~ .overlay-menu-cell{
  display: block;
}

.menu-cell .fechar{
  padding: 20px 5%;
  text-align: right;
}
.menu-cell .fechar i{
  color: white;
  font-size: 30px ;
}
.menu-cell nav ul{
  text-align: left;

}
.menu-cell nav ul li a{
  color: white;
  font-size: 20px;
  font-weight: 300;
  padding: 20px 8%;
  display: block;
  text-decoration: none;
}

.menu-cell nav ul li a:hover{
  color: black;
  background-color: #FFC000;
}


.overlay-menu-cell{
  background-color: #00000096;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 88888;
  display: none;
}


/* TOPO SITE */

.img1 {
  align-items: center;
}

.img2 {
  margin: 100px auto;
  transition: .9s;
  align-items: center;
  
}

.img2:hover {
  color: #fff;
  transform: scale(1.25);
}

/* ESTILO DO PROJETOS */

section.projetos {
  padding: 40px 4%;
}

section.projetos .flex {
  justify-content: space-around;
  margin-top: 60px;
  flex-direction: column;
  gap: 30px;
}

.projetos h3 {
  text-align: center;
}

.img-port {
  color: #fff;
  background-color: #FFC000;
  padding: 20px 70px;
  cursor: pointer;
  border-radius: 40px;
  transition: .7s;
  background-size: cover;
  background-position: 100% 0%;
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  border-radius: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #fff;
  opacity: 0;
  transition: .7s;
  text-align: center;
}

.overlay.item2 {
  padding: 10px 4%;
  font-size: 13px;
}

.overlay.item3 {
  padding: 10px 4%;
  font-size: 14px;
}

.overlay a {
  color: #4C7EBE;
  text-decoration: none;
  display: inline-block;
}

.overlay:hover {
  opacity: 1;
}

/* ESTILO CARROSSEL*/

.swiper {
  width: 1280px;
  height: auto;
  overflow :hidden
}

.swiper{
  text-align: center;
  padding: 40px 4%;

}

.swiper-slide{
  background-image: linear-gradient( #8a6801 ,#886600);
  max-width: 415px;
  max-height: auto;
  padding: 80px 4%;
  cursor: pointer;
  transition: .2s;
  border-radius: 35px;
  list-style: none;
  padding: 5px 10px 16px 10px;
  border: 3px solid #FFC000;

}

.swiper-slide:hover{
  box-shadow: 0px 0px 8px #FFC000;
  transform: scale(1.05);
}
.swiper-slide h3{
  color: white;
  text-align: justify;
  font-size: 18px;
  padding: 2px 10px 3% 5%;
}

.swiper img{
  width: 100%;
  border-radius: 10px ;
  padding: 15px;
}

.swiper button{
  color: white;
  text-align: center;
  background-image: linear-gradient(#83008a,#360021);
  border: #610054 solid 3px;
  cursor: pointer;
  transition: .2s;
  border-radius: 30px;
  font-size: 22px;
  font-weight: 600;
  padding: 10px 16px 10px 16px;
}

.swiper button:hover{
  box-shadow: 0px 0px 8px #610054;
  transform: scale(1.05);
}

.swiper p{
  color: white;
  background-image: linear-gradient( #a87f01,#886600);
  border: 3px solid #FFC000;
  font-size: 13px;
  font-weight: 600;
  border-radius: 50px;
  text-align: center;
  width: 130px;
  height: 44px;
padding: 10px;
  
}


.swiper .swiper-pagination-bullet{
  background-image: linear-gradient( #a87f01,#886600);
  height: 15px;
  width: 15px;
  
}

.swiper .swiper-pagination-bullet-active{
  border: 1px solid #FFC000;
}

.swiper .lado{
  display: flex;
}

.price{
margin: 0 auto;
}
.item-title{
  left: 0;
}

.swiper .title{
  padding: 40px;
}


/* FOOTER */

footer{
  padding: 60px 4%;
}

footer .flex{
  justify-content: space-between;
  align-items: center;
}

footer .line-footer{
  padding: 20px 0;
}

.borda{
  border-top: 2px solid #FFC000;
}

.social button{
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background-color: #FFC000;
  font-size: 22px;
  cursor: pointer;
  margin: 0 10px;
  transition: .2s;
}

footer .line-footer p i{
  color: #FFC000;
  font-size: 22px;
}

footer .line-footer p a {
  color: white;
}


.img1 img{
  width: 100%;;

}




/*vendas*/

.itens .lado{
  display: flex;
}

.itens .price{
margin: 0 auto;
}
.itens .item-title{
  left: 0;
}

.vendas .flex{
  justify-content: space-around;
  flex-wrap: wrap; /* Permite que os itens quebrem para a próxima linha */
  gap: 25px;
}
.vendas {
  width: 100%;
  height: auto;
  overflow :hidden;
  
}

.vendas{
  text-align: center;
  padding: 40px 4%;
  flex-wrap: wrap; /* Permite que os itens quebrem para a próxima linha */

}

.itens{
  background-image: linear-gradient( #8a6801 ,#886600);
  max-width: 300px;
  max-height: auto;
  padding: 80px 4%;
  cursor: pointer;
  transition: .2s;
  border-radius: 35px;
  list-style: none;
  padding: 5px 10px 16px 10px;
  border: 3px solid #FFC000;
  
  

}

.itens:hover{
  box-shadow: 0px 0px 8px #FFC000;
  transform: scale(1.05);
}
.itens h3{
  color: white;
  text-align: justify;
  font-size: 18px;
  padding: 2px 10px 3% 5%;
}

.itens img{
  width: 100%;
  border-radius: 10px ;
  padding: 15px;
}

.itens button{
  color: white;
  text-align: center;
  background-image: linear-gradient(#83008a,#360021);
  border: #610054 solid 3px;
  cursor: pointer;
  transition: .2s;
  border-radius: 30px;
  font-size: 22px;
  font-weight: 600;
  padding: 10px 16px 10px 16px;
}

.itens button:hover{
  box-shadow: 0px 0px 8px #610054;
  transform: scale(1.05);
}

.itens p{
  color: white;
  background-image: linear-gradient( #a87f01,#886600);
  border: 3px solid #FFC000;
  font-size: 13px;
  font-weight: 600;
  border-radius: 50px;
  text-align: center;
  width: 130px;
  height: 44px;
padding: 10px;
  
}


.dentrocart{
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  flex-direction: column;
  max-height: 400px;
  overflow: auto;
  color: white;
}


.bold {
  color: white;
  text-align: center;
}

.finalizar{

  margin-left: 40%;
  margin-right: 40%;
}

.dentrocart{
  align-items: center;
}

.remove-from-cart-btn button{
  width: 30px;
}