* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif !important;
}

.noInternet .container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 200;
}

main {
  margin-top: 70px;
}

nav ul {
  display: flex;
  list-style: none;
}

nav li a {
  display: block;
  color: #000;
  min-width: 80px;
  padding: 3px;
  margin: 0px 4px;
}

.section-form {
  width: 50%;
  text-align: center;
  padding: 30px;
}

.section-form h2 {
  font-size: 50px;
  letter-spacing: 2px;
  color: #fff;
}

.section-form form input {
  display: block;
  width: 100%;
  margin: 5px 0px;
  height: 30px;
  border: 1px solid #ddd;
  padding: 5px;
  font-family: cursive;
  outline: none;
}

.section-form form input[type="submit"]:hover {
  opacity: 0.5;
}

#user {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-transform: capitalize;
  display: none;
}

nav ul#userInfo {
  margin: 1rem 0rem;
  display: none;
}

nav ul#userInfo li i {
  color: #000;
  font-size: 25px;
  margin-top: 5px;
  cursor: pointer;
}

nav ul#userInfo li {
  position: relative;
}

nav ul#userInfo li .badge {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #fff;
  color: #007bff;
  text-align: center;
  border-radius: 50%;
  top: -8px;
  right: 16px;
  font-size: 15px;
  display: none;
}
nav #links li a,
#logOut {
  color: #fff;
}

.ViewPro {
  width: 94%;
}

.Home {
  margin: 5rem auto;
  padding: 0 80px;
  position: relative;
}

.fas {
  color: #007bff;
}

.far {
  color: #5bc0de;
}

.cartsProudect {
  position: absolute;
  width: 300px;
  transform: translate(-105px, 0);
  top: 51px;
  border: 1px solid #878787;
  display: none;
}

.buyProudect {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 0.5rem;
}

.buyProudect .mins,
.buyProudect .pls {
  height: 10px;
  text-align: center;
  cursor: pointer;
}
.buyProudect .pls {
  padding: 0px 20px 25px 10px;
}
.buyProudect .mins {
  padding: 0px 17px 25px 13px;
}
.buyProudect div {
  background-color: #fff;
  padding: 0.5rem 0rem;
  color: #6a6b6c;
  border-radius: 5px;
}

.product-item-action i {
  font-size: 30px;
  cursor: pointer;
}
.product-item {
  transition: 0.5s;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
  background-color: #fff;
  margin: 1rem 0;
  height: 500px;
  border: 1px solid #ddd;
  &img {
    width: 100%;
    max-height: 200px;
    object-fit: contain;
  }
}
.product-item:hover {
  transform: translateY(-10px);
}

.card .product-item-action .RemoveFromCartBtn {
  display: none;
}

.card .product-item-action .AddToCartBtn {
  display: inline-block;
}

.fav {
  margin: 3rem 0rem 5rem 0rem;
}

.line {
  width: 100px;
  margin: auto;
  height: 2px;
  background-color: #007bff;
}
.fav-Header:hover .line {
  transform: scale(1.5);
  transition: 0.5s;
}

/* ----------------------------- */