/* myHome css */

:root {
  --red-color: red;
  --lightblue-color: lightblue;
  --lightgreen-color: #39e80e;
  --blue: rgb(0, 27, 117);
  --black: rgb(0, 0, 0);
}

.category-head {
  -webkit-text-stroke-color: var(--black);
  -webkit-text-stroke-width: 0.2px;
  font-size: 1.7rem;
  display: flex;
  justify-content: center;
  letter-spacing: 0.1rem;
  line-height: 10vh;
  font-family: Quicksand;
  font-weight: 700;
  text-align: center;
}
.arabic {
  letter-spacing: 0;
}
.header-colour {
  --background: #062c30;
  --color: #fff;
}

.nav-bar {
  background-color: #ffffff;
  overflow: visible;
  height: auto;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
}

/* product show case css */
.app-product-showcase > .slider-container {
  display: flex;
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 20px 5px;
  zoom: 0.85;
}

.app-product-showcase > .slider-container > .slider-wrapper {
  display: flex;
  cursor: grab;
}
.app-product-showcase
  > .slider-container
  > .slider-wrapper
  > .slider-product-card {
  flex: 0 0 calc(auto);
  margin: 0 3px;
  border: 1px solid #eee;
  border-radius: 1.5rem;
  overflow: hidden;
  background: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

  @media (max-width: 768px) {
    flex: 0 0 calc(21.5%);
    
  }
}
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  border: 2px solid white;
  display: flex;
  width: 17.93rem;
  margin-top: 0.3rem;
  margin-bottom: 0.3rem;
  margin-left: 0.5rem;
}
.product-slider-item > .card {
  border-radius: 2rem;
  min-height: 27rem;
}

/* app-product-item-of-list2 */
.card > .product-card {
  width: 17.98556875rem;
}

.product-card {
  background-color: #fff;
  box-shadow: 0px 1px 7px -2px rgb(32 33 36 / 6%);
  justify-content: space-between;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 0.8em;
  border-radius: 0.625rem;
  line-height: 1.5em;
  align-items: center;
  height: 100%;
}
.app-product-item-of-list2 {
  height: 100%;
}
.app-product-item-of-list2 > .product-card {
  background-color: #fff;
  box-shadow: 0px 1px 7px -2px rgb(32 33 36 / 6%);
  justify-content: space-between;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 0.5em;
  line-height: 1.5em;
  align-items: center;
}
.product-showcase-item > .app-product-item-of-list2 > .product-card {
  width: 20rem;
  border-radius: 2rem;
}
.image-sizing {
  border-radius: 1.3rem;
}

@media only screen and (max-width: 600px) {
  .image-sizing {
    width: auto;
    aspect-ratio: auto 8.75/8.75;
  }
  .product-showcase-item > .app-product-item-of-list2 > .product-card {
    width: auto;
  }
}

@media only screen and (min-width: 601px) and (max-width: 768px) {
  .image-sizing {
    width: 9.375rem;
    height: 9.375rem;
    aspect-ratio: auto 9.375/9.375;
  }
}

@media only screen and (min-width: 769px) and (max-width: 2000px) {
  .image-sizing {
    width: 100%;
    aspect-ratio: auto 10.625/10.625;
  }
}
/* Top selling */
.item-name {
  color: black;
  height: 32px;
  padding: 0 5px;
  text-align: center;
}
.price {
  height: 2rem;
  color: black;
  padding-left: 0.313rem;
  padding-top: 0.313rem;
}

.card0 {
  -webkit-margin-start: 0.1875rem;
  margin-inline-start: 0.1875rem;
  -webkit-margin-end: 0.1875rem;
  margin-inline-end: 0.1875rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 1.5rem;
}

.cardcontent0 {
  -webkit-padding-start: 0.5rem;
  padding-inline-start: 0.5rem;
  -webkit-padding-end: 0.5rem;
  padding-inline-end: 0.5rem;
  padding-top: 0.5rem;
  line-height: 1;
}

@media only screen and (max-width: 420px) {
  .category-head {
    line-height: 2vh;
    font-size: large;
    letter-spacing: 0.15625rem;
  }
}

@media only screen and (min-width: 421px) and (max-width: 600px) {
  .category-head {
    line-height: 2vh;
    font-size: large;
  }
}
@media only screen and (min-width: 600px) and (max-width: 1024px) {
  .category-head {
    line-height: 5vh;
  }
}

/* product-list-item-style2 */
.product-list-item-style2 > .card {
  border-radius: 2rem;
}
