/*SMALL DEVICES*/
@media (max-width: 1199px) {
  /*HIDE*/
  .lg {
    display: none;
  }
  /*SHOW*/
  .sm {
    display: block;
  }
}

/*BIG DEVICES*/
@media (min-width: 1199px) {
  /*HIDE*/
  .sm {
    display: none;
  }
  /*SHOW*/
  .lg {
    display: block;
  }
}

/*IMPORT THE FONT*/
* {
  font-family: "Lato", sans-serif;
}

#top {
  margin: 0;
  padding: 0;
  background-color: #ecf0f1;
}

.hover:hover {
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.26);
}

.primary-color {
  color: #fa6565;
}

/*STYLING (NAVBAR'S)*/
.nav-1 {
  margin: 0;
  padding: 0;
}

.nav-1 .col-md-5 input {
  border-radius: 50px;
  background-color: #eee;
  text-align: center;
  word-spacing: 2px;
  padding: 8px;
}

.nav-1 h1 {
  font-family: "Parisienne", cursive;
  margin: 5px 5px 0 0;
  padding: 0;
  font-weight: bolder;
  font-size: 30px;
  color: rgb(224, 224, 224);
}

.logo {
  margin: 0 0 0 20px;
  width: 50px;
  height: 50px;
  color: white;
}

.nav-1 .links a {
  color: black;
  text-decoration-line: none;
  text-transform: capitalize;
}

.lang {
  margin: 0;
}

._username {
  font-weight: 700;
}

._userphoto img {
  margin: 0 5px 0 0;
  padding: 0;
  width: 30px;
  border-radius: 50%;
}

.lang button {
  margin: 0;
  padding: 0;
  color: white;
}

.lang img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.sell a {
  margin: 0;
  padding: 5px;
  color: #d8d7d7;
  text-decoration-line: none;
}

.sell a:hover {
  color: white;
  transition: 0.5s;
}

.sell img {
  margin: 0 3px 0 0;
  width: 20px;
  height: 20px;
}

.userside {
  margin-left: -90px;
}

.userside a {
  color: white;
  border-radius: 150px;
  padding: 3px 10px;
  margin: 0;
}

.cart button {
  margin: 0;
  padding: 0;
}

.cart img {
  width: 25px;
  height: 25px;
}

.bell button {
  margin: 0;
  padding: 0;
}

.bell img {
  width: 25px;
  height: 25px;
}

/*NAV-2*/

.nav-2 {
  margin: 70px 0 0 0;
  box-shadow: 0 0 0.5rem rgb(44, 44, 44);
  background-color: #0f0f0ff3;
}

.nav-2 a {
  color: #c5c3c3;
}

.nav-2 .active {
  color: #ff7c7c;
  font-weight: bolder;
}

.nav-2 a:hover {
  color: #ff7c7c;
}

/*NAV-3*/

.sidebar {
  position: fixed;
  margin-top: 13%;
  bottom: 0;
  left: 0;
  padding: 48px 0 0;
}

.sidebar .nav-link {
  color: #333;
}

.sidebar .nav-link.active {
  font-weight: 500;
  color: #007bff;
}

.sidebar-heading {
  font-size: 0.75rem;
  text-transform: uppercase;
}

.nav-link label {
  font-size: 13px;
}

.color-box {
  margin: 3px;
  border: 0;
  padding: 25px;
  border-radius: 50px;
  width: 100%;
}

.color-box-1 {
  background-color: black;
}
.color-box-2 {
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(160, 160, 160);
}
.color-box-3 {
  background-color: #e74c3c;
}
.color-box-4 {
  background-color: #3498db;
}
.color-box-5 {
  background-color: #f1c40f;
}
.color-box-6 {
  background-color: #2ecc71;
}
.color-box-7 {
  background-color: indigo;
}
.color-box-8 {
  background-color: #7f8c8d;
}
.color-box-9 {
  background-color: fuchsia;
}
.color-box-10 {
  background-color: dodgerblue;
}
.color-box-11 {
  background-color: darkorange;
}
.color-box-12 {
  background-color: cyan;
}

/*STYLING THE (SLIDESHOW) PART*/

.carousel {
  margin: 0 0 20px 0;
}

.carousel-inner {
  border-radius: 10px;
}

.carousel-item img {
  max-width: 100%;
}

/*STYLING THE (CARDS & +) SECTIONS*/
.section-title {
  padding: 0 0 30px 0;
  text-transform: capitalize;
}

.section-bio {
  width: 50%;
  font-weight: lighter;
}

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

/*STYLING THE (TRENDING NOW) SECTION*/

.trending-now {
  margin: 0 0 20px 0;
  background-color: #e9e9e9;
  border-radius: 10px;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.3);
}

.trending-now h1 {
  margin: 60px 0 30px 0;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  font-weight: bolder;
}

/*STYLING THE (RECOMMENDED BY BUYERS) SECTION*/

.recommended {
  margin: 0 0 20px 0;
  background-color: #363535;
  border-radius: 10px;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.3);
}

.recommended h1 {
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  margin: 60px 0 30px 0;
  font-weight: bolder;
}

/*STYLING THE (COLLECTIONS) SECTION*/

.collections {
  margin: 0 0 20px 0;
  background-color: #e9e9e9;
  border-radius: 10px;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.3);
}

.collections h1 {
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  margin: 60px 0 30px 0;
  font-weight: bolder;
}

/*STYLING THE (TOP SELLERS) SECTION*/

.top-sellers {
  margin: 0 0 20px 0;
  background-color: #363535;
  border-radius: 10px;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.3);
}

.top-sellers h1 {
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  margin: 60px 0 30px 0;
  font-weight: bolder;
}

/*STYLING THE (TOP SELLERS) SECTION*/

.brands-areaa {
  margin: 0 0 150px 0;
  background-color: #e9e9e9;
  border-radius: 10px;
}

.brands-area h1 {
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  margin: 60px 0 30px 0;
  font-weight: bolder;
}

/*STYLING THE (BACK TO TOP) PART*/
.back-to-top {
  margin: 0;
  padding: 15px;
  text-align: center;
  background-color: #363535;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.back-to-top a {
  text-decoration-line: none;
  color: #cacaca;
  font-weight: bold;
}

.back-to-top a:hover {
  color: rgb(255, 255, 255);
  transition: 0.5s;
}

/*STYLING THE (EMAIL & MEDIA) SECTION*/
.media {
  margin: 0;
  padding: 15px;
  background-color: #292828;
  font-weight: bold;
}

.media h6 {
  margin: 5px 0 15px 0;
  font-size: large;
  font-weight: bold;
}

.media h6 img {
  margin: 0 15px 0 0;
}

.media input {
  margin: 0 0 5px 0;
  border-radius: 50px;
  background-color: #eee;
  text-align: center;
  word-spacing: 2px;
  width: 100%;
}

.media button {
  border-radius: 50px;
}

.media-part h6 {
  margin: 5px 0 15px 0;
  text-align: center;
  font-size: large;
  font-weight: bold;
}

.pre-footer-ul .icons {
  margin: 0 6px 0 0;
}

/*STYLING THE (PRE-FOOTER) SECTION*/
.pre-footer {
  text-transform: capitalize;
  margin: 0;
  padding: 3% 0 2%;
  background-color: #0f0f0ff3;
}

.email-subs,
.pre-footer-title {
  margin: 25px 0 20px 0;
  padding: 0;
}

.pre-footer ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.pre-footer li {
  margin-bottom: 5px;
}

.pre-footer ul a {
  margin: 0;
  padding: 0;
  color: #c5c3c3;
  text-decoration: none;
}

.pre-footer ul a:hover {
  color: #ff7c7c;
  transition: 0.5s;
}

.email-subs > .btn {
  width: 100%;
}

.pre-footer-copyr {
  font-family: "Parisienne", cursive;
  font-size: x-large;
  font-weight: bold;
}

/*STYLING THE (FOOTER) SECTION*/
.footer {
  color: rgb(185, 185, 185);
  background-color: #000000f3;
}