@import '/css/header.css';
@import '/css/footer.css';
@import '/css/brands.css';
body{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main{
  flex: 1;
}
.error{
  background-color: rgb(255, 179, 179);
}
.success{
  background-color: rgb(190, 255, 179);
}
.pcolor{
  color: #01ff8d;
}
.pcolor-hover:hover{
  color: #01ff8d!important;
}
.btn-search{
  background-color: #01ff8d;
  color: #0000;
}
.signIn-container, .signUp-container{
  display: flex;
  place-items: center;
  justify-content: center;
  padding: 100px 0px;
}
.signIn-container .card, .signUp-container .card{
  background-color:#eaeaea;
}

/*ProductsByCategory*/
.list-category li{
  background-color: #202528;
  color: #e6e6e6;
}
.list-category li:hover{
  color: #01ff8d;
}

.title-category:first-letter{
  text-transform: uppercase;
}

/*Slider*/
.bannerSlider swiper-slide img{
  width: 100%;
}
swiper-container {
  width: 100%;
  height: 100%;
}
:root{
  --swiper-theme-color:#01ff8d;
}

.similarProducts{
  width: 23%;
  text-align: center;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.similarProducts img {
  display: block;
  width: 300px;
  height: 250px;
  padding: 25px;
}
@media screen and (max-width: 1400px){
  .similarProducts{
    width: 27%;
  }
}
@media screen and (max-width: 1200px){
  .similarProducts{
    width: 31%;
  }
}
@media screen and (max-width: 900px){
  .similarProducts{
    width: 40%;
  }
}
@media screen and (max-width: 750px){
  .similarProducts{
    width: 47%;
  }
}
@media screen and (max-width: 550px){
  .similarProducts{
    width: 70%;
  }
}
@media screen and (max-width: 400px){
  .similarProducts{
    width: 82%;
  }
}
/*principal page */

.btn-products{
  color: #01ff8d;
  background: rgb(19, 19, 19);
  border: 1px solid black;
  font-size: 20px;
  width: 100%;
}
.btn-products:hover{
  background: black;
  color: #01ff8d;
}
.card-product{
  height: 515px;
  background: none;
  border: 3px solid black;
}
.card-product .card-footer{
  border-top: 3px solid black;
}
swiper-slide{
  background: none;
}

.buttons{
  position: absolute;
  top: 0;
  right: 0;
}
.buttons button{
  margin: 0 5px;
}

.imgCards{
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: cover;
  margin: 0 auto; 
  padding: 25px
}