/*
**********************************************************
**********************************************************
**********************************************************
************* # STYLING THE CARDS
*/

.card {
  margin: 0 0 20px 0;
  padding: 0;
  border-radius: 20px;
  width: 100%;
  height: auto;
  background-color: #eee;
  box-shadow: 0 0 0.5rem #535353ad;
  overflow: hidden;
}

.card:hover {
  box-shadow: 0 0 0.3rem #fa6565;
  transition: 0.5s;
}

.card > .carousel {
  margin: 0;
  padding: 0;
  width: 100%;
  border-radius: 0;
}

.cards > .col-xl-6 > .card {
  border-radius: 15px;
}

.card-body > .col-2 {
  margin-bottom: 2%;
}

.card-body > .title {
  text-transform: capitalize;
  font-weight: bolder;
}
.card-body > .price {
  font-size: x-large;
  color: #ff5151;
  font-weight: bold;
  text-shadow: 0 0 0.1rem #ff5151a1;
}

/*
.card-body > .bio {
}
*/

/*STYLING THE (COLOR) SECTION */

.colors-title {
  margin-right: 15px;
  margin-bottom: 10px;
}

.colors-title h6 {
  margin: 0;
  padding: 0;
  text-align: start;
  text-transform: capitalize;
  font-weight: bold;
}

.color-0,
.color-1,
.color-2,
.color-3,
.color-4,
.color-5 {
  border: 0;
  border-radius: 100%;
  margin-right: 10px;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
}
.color-0 {
  border: 1px solid rgb(129, 129, 129);
  width: 25px;
  height: 25px;
  background-color: rgb(255, 255, 255);
}
.color-1 {
  width: 25px;
  height: 25px;
  background-color: rgba(255, 255, 0, 0.8);
}
.color-2 {
  width: 25px;
  height: 25px;
  background-color: rgba(0, 0, 0, 0.8);
}
.color-3 {
  width: 25px;
  height: 25px;

  background-color: rgba(255, 0, 0, 0.8);
}
.color-4 {
  width: 25px;
  height: 25px;
  background-color: rgba(0, 0, 255, 0.8);
}
.color-5 {
  width: 25px;
  height: 25px;
  background-color: rgba(0, 128, 0, 0.8);
}

/*STYLING THE (SIZES) SECTION */
.sizes button {
  margin: 0;
  background: none;
  padding: 0;
}

.sizes-title {
  margin-right: 10px;
  margin-bottom: 10px;
}

.sizes-title h6 {
  margin: 0;
  padding: 0;
  text-align: start;
  text-transform: capitalize;
  font-weight: bold;
}

.size-1,
.size-2,
.size-3,
.size-4,
.size-5 {
  font-weight: bold;
  border: 0;
  border-radius: 100%;
  margin-right: 10px;
}
.size-1 {
  width: 35px;
  height: 35px;
}
.size-2 {
  width: 35px;
  height: 35px;
}
.size-3 {
  width: 35px;
  height: 35px;
}
.size-4 {
  width: 35px;
  height: 35px;
}
.size-5 {
  width: 35px;
  height: 35px;
}

/*STYLING THE (RATES) SECTION*/
.rates button {
  margin: 0;
  padding: 0;
  background: none;
}

.rates-title {
  margin-right: 15px;
  margin-bottom: 10px;
}

.rates-title h6 {
  margin: 0;
  padding: 0;
  text-align: start;
  text-transform: capitalize;
  font-weight: bold;
}

.rate-1,
.rate-2,
.rate-3,
.rate-4,
.rate-5 {
  border: 0;
  margin-right: 10px;
}
.rate-1 {
  width: 35px;
  height: 35px;
}

.rate-2 {
  width: 35px;
  height: 35px;
}
.rate-3 {
  width: 35px;
  height: 35px;
}
.rate-4 {
  width: 35px;
  height: 35px;
}
.rate-5 {
  width: 35px;
  height: 35px;
}

/*STYLING THE (BTNS) SECTION*/
.btns button {
  border: 0;
  background: none;
}

.btns {
  padding: 10px 0 0 0;
  width: 100%;
}

.btns > .profile img {
  border-radius: 100%;
  border: 2px solid #ff6666;
  width: 50px;
  height: 51px;
  box-shadow: 0 0 0.8rem #757575c4;
}

.btns > .profile img:hover {
  box-shadow: 0 0 0.5rem #ff4949;
  transition: 0.5s;
}

.btns > .save {
  width: 30px;
  height: 30px;
  background-image: url(/projects/3/css/svgs/save.svg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.btns > .buy {
  color: white;
  font-weight: bolder;
  border-radius: 50px;
  background-color: #ff4949;
  box-shadow: 0 0 0.5rem #ff4949;
  border: 0;
}

.btns > .buy:hover {
  background-color: #1cb128;
  box-shadow: 0 0.5rem #25e435;
  transition: 0.2s;
}