.Items-categories {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  height: auto;
  width: 100%;
  padding: 12px;
  overflow: auto;
  background: rgba(30,136,229,10%);
}

.Items-categories > div {
  display: inline-block;
  height: auto;
  width: auto;
  padding: 22px;
  margin-block: 0 0;
  margin-inline: 0 0; 
  border-radius: 8px;
  border: 1px solid rgba(30,136,229,15%);
}

.Items-categories > div > .Icon-container {
  position: relative;
  height: 86px;
  width: 86px;
  background-image: url("https://lh3.googleusercontent.com/d/1ioxfRnZfkmTfizIejnm1aJOoA4wk9QRL=w300");
  background-size: auto 96%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.Items-categories > div > .Icon-container > svg {
  position: absolute;
  bottom: 8px;
  right: 34%;
  height: 36px;
  width: 36px;
  fill: var(--tempral-bc);
}

.Items-categories > div > span {
  display: block;
  height: auto;
  width: 100%;
  font-size: x-small;
  font-weight: 500;
  text-align: center;
  word-wrap: break-word;
  margin-top: 6px;
}

.Product-list-heading {
 display: flex;
 justify-content: space-between;
 align-items: center;
 height: auto;
 width: 100%;
 padding-block: 12px;
 margin-top: 26px;
 background: rgba(30,136,229,10%);
}

.Product-list-heading * {
  font-weight: bold;
}

.Product-list-heading > a {
  
}

.Product-list {
 display: flex;
 justify-content: left;
 align-items: center;
 gap: min(13px, 2vw);
 height: auto;
 width: 100%;
 padding-block: min(13px, 2vw);
 border-bottom: 12px solid rgba(30,136,229,10%);
 margin-bottom: 28px;
 overflow-x: auto;
}

.Product-list > figure {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  height: auto;
  max-width: 260px;
  width: 40vw;
  margin-block: 0 0;
  margin-inline: 0 0;
}

.Product-list > figure > img {
  max-height: 260px;
  height: 40vw;
  width: 100%;
  object-fit: cover;
  border-radius: 4px;
  background: rgba(30,136,229,10%);
 }

.Product-list > figure > figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  padding-inline: 6px;
}

.Product-list > figure > figcaption > * {
  width: 100%;
}

.Product-list > figure > figcaption > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: small;
}

.Product-list > figure > figcaption > b {
  font-size: small;
}

.Product-list > a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: auto;
  width: auto;
  padding: min(38px, 6%);
  border-radius: 12px;
  margin-inline: min(34px, 10%);
  background: rgba(30,136,229,10%);
}

.Product-list > a > span {
  white-space: nowrap;
  font-size: small;
}

.Products-conatiner {
  display: grid;
  grid-gap: 2vw 1vw;
  justify-content: center;
  grid: auto / repeat(8, 12.05%);
  height: auto;
  width: 100%;
  padding-block: 16px;
  padding-inline: 4.50vw;
  margin-block: 12px;
  background: var(--main-ct);
}

.Products-conatiner > figure {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: left;
  gap: 8px;
  margin: 0 0;
  background: transparent;
}

@media (max-width:2400px) {

.Products-conatiner {
  display: grid;
  grid-gap: 2vw 1vw;
  justify-content: center;
  grid: auto / repeat(7, 14.28%);
  height: auto;
  width: 100%;
  padding-block: 16px;
  padding-inline: 4vw;
  margin-block: 12px;
  background: var(--main-ct);
}

.Products-conatiner > figure {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: left;
  gap: 8px;
  margin: 0 0;
  background: transparent;
}
  
}

@media (max-width:2100px) {

.Products-conatiner {
  display: grid;
  grid-gap: 2vw 1vw;
  justify-content: center;
  grid: auto / repeat(6, 16.66%);
  height: auto;
  width: 100%;
  padding-block: 16px;
  padding-inline: 3.50vw;
  margin-block: 12px;
  background: var(--main-ct);
}

.Products-conatiner > figure {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: left;
  gap: 8px;
  margin: 0 0;
  background: transparent;
}
  
}

@media (max-width:1800px) {

.Products-conatiner {
  display: grid;
  grid-gap: 2vw 1vw;
  justify-content: center;
  grid: auto / repeat(5, 20%);
  height: auto;
  width: 100%;
  padding-block: 16px;
  padding-inline: 3vw;
  margin-block: 12px;
  background: var(--main-ct);
}

.Products-conatiner > figure {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: left;
  gap: 8px;
  margin: 0 0;
  background: transparent;
}
  
}

@media (max-width:1500px) {

.Products-conatiner {
  display: grid;
  grid-gap: 2vw 1vw;
  justify-content: center;
  grid: auto / repeat(4, 25%);
  height: auto;
  width: 100%;
  padding-block: 16px;
  padding-inline: 2.50vw;
  margin-block: 12px;
  background: var(--main-ct);
}

.Products-conatiner > figure {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: left;
  gap: 8px;
  margin: 0 0;
  background: transparent;
}
  
} 

@media (max-width:1200px) {

.Products-conatiner {
  display: grid;
  grid-gap: 2vw 1vw;
  justify-content: center;
  grid: auto / repeat(3, 33.33%);
  height: auto;
  width: 100%;
  padding-block: 16px;
  padding-inline: 2vw;
  margin-block: 12px;
  background: var(--main-ct);
}

.Products-conatiner > figure {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: left;
  gap: 8px;
  margin: 0 0;
  background: transparent;
}
  
}

@media (max-width:900px) {

.Products-conatiner {
  display: grid;
  grid-gap: 2vw 1vw;
  justify-content: center;
  grid: auto / repeat(2, 50%);
  height: auto;
  width: 100%;
  padding-block: 16px;
  padding-inline: 1.50vw;
  margin-block: 12px;
  background: var(--main-ct);
}

.Products-conatiner > figure {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: left;
  gap: 8px;
  margin: 0 0;
  background: transparent;
}
  
} 

@media (max-width:600px) {

.Products-conatiner {
  display: grid;
  grid-gap: 4vw 0vw;
  justify-content: center;
  grid: auto / repeat(1, 100%);
  height: auto;
  width: 100%;
  padding-block: 16px;
  padding-inline: 2vw;
  margin-block: 12px;
  background: var(--main-ct);
}

.Products-conatiner > figure {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: left;
  gap: 8px;
  margin: 0 0;
  background: transparent;
}

}

.Products-conatiner > figure > a {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  justify-content: left;
  align-items: center;
  padding: 12px;
  border-radius: 100rem;
  border: 1px solid rgba(30,136,229,24%);
  margin: 12px;
  background: var(--tempral-bc);
  z-index: 1;
}

.Products-conatiner > figure > img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 6px;
  background: var(--main-ct);
}

.Products-conatiner > figure > figcaption {
  display: flex;
  flex-direction: column;
  justify-content: left;
  gap: 8px;
  height: auto;
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(30,136,229,24%);
  border-radius: 12px;
}

.Products-conatiner > figure > figcaption > p {
  margin: 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.Products-conatiner > figure > figcaption > span {
  font-weight: bold;
}

.Products-conatiner > figure > figcaption > span > a {
 color: var(--main-c);
}

.Products-conatiner > figure > figcaption > .Wrap-1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px; 
}

.Products-conatiner > figure > figcaption > .Wrap-1 > button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  height: auto;
  width: 70%;
  padding: 10px 0;
  border: 1px solid rgba(30,136,229,15%);
  border-radius: 100rem;
  background: var(--main-ct);
}

.Products-conatiner > figure > figcaption > .Wrap-1 > button > span {
  font-weight: 800;
  font-size: medium;
}

.Products-conatiner > figure > figcaption > .Wrap-1 > button > svg {
  stroke-width: 1px;
  stroke: var(--tempral-ic);
}

.Products-conatiner > figure > figcaption > .Wrap-1 > a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 46px;
  width: 46px;
  border-radius: 100rem;
  overflow: hidden;
  border: 1px solid rgba(30,136,229,15%);
  margin: 0 12px;
  background: rgba(30,136,229,10%);
}

.Products-conatiner > figure > figcaption > .Wrap-1 > a > img {
  height: 28px;
  width: 28px;
}

.Products-conatiner > figure > figcaption > a {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  height: auto;
  width: 60%;
  padding: 10px 12px;
  font-weight: 800;
  border: 1px solid rgba(30,136,229,15%);
  border-radius: 100rem;
  background: var(--main-ct);
}