::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: #141685;
}

::-webkit-scrollbar-thumb {
  background: gold;
}

::-webkit-scrollbar-thumb:hover {
  background: goldenrod;
}
.brand-bg{
  background: #121332 !important;
  /* background: linear-gradient(to bottom right, #121332 10%, #12135a 67%, rgba(58, 145, 199, 1) 90%, rgba(74, 155, 205, 1) 100%) !important; */

}
.variety-card:hover{
  filter: hue-rotate(-155deg);
}

.variety-card img {
  width: 100%;
}
.product {
  width: 100vw !important;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
  background: #121332;
  background: linear-gradient(to bottom right, #121332 10%, #12135a 67%, rgba(58, 145, 199, 1) 90%, rgba(74, 155, 205, 1) 100%);

}

.product h1 {
  color: yellow;
}

.grid {
  display: grid;
  place-items: center;
}

.box {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  perspective: 1000px; 
  padding: 2rem;
  z-index: 3;
}
.productCopy .productDisplay{
  border: 1px solid #12135a;
  border-radius: 0px;
width:200px;
height:250px;
margin-top:50px;
}
.productDisplay {
  border-radius: 5px;
  height: 300px;
  margin: 5px;
  display: flex;
  justify-content: center;
  place-items: center;
  flex-direction: column;
  position: relative;
  z-index: 4;
  cursor: pointer;
}

.productDisplay svg{
  
  margin-right: 15px;
}


.productDisplay>img {
  display: block;
  height: 120px;
  padding: 10px;
  object-fit: contain;
  width: 250px;
  transform: scale(0.5);
  background-color: white;
aspect-ratio: 3/4;
transition: transform 0.4s ease, box-shadow 0.4s ease;
position: relative;
bottom: 0;
}
.product .productDisplay {
  border-radius: 5px;
  height: 300px;
  margin: 5px;
  display: flex;
  justify-content: center;
  place-items: center;
  flex-direction: column;
  position: relative;
  z-index: 4;
  cursor: pointer;
  background-color: white;
}


.product .productDisplay>img {
  display: block;
  height: 120px;
  padding: 10px;
  object-fit: contain;
  width: 250px;
  transform: scale(0.5);
  background-color: white;
aspect-ratio: 3/4;
transition: transform 0.4s ease, box-shadow 0.4s ease;
position: relative;
bottom: 0;
}
.product .productDisplay:hover {
  background-color: white;
}


/* nav design */

.ourpeople{
  width: 100vw;
  height: 100vh;
  position: relative;
  background: rgb(18, 19, 50);
  background: linear-gradient(to bottom right, rgba(18, 19, 50, 1) 10%, rgba(18, 19, 90, 1) 67%, rgba(58, 145, 199, 1) 90%, rgba(74, 155, 205, 1) 100%);
}
.ourpeople .overlay img{
 width: 55vw;
  position: absolute;
  top: 1%;
  left: 0;
  bottom: 0;
 
}
.sustainability{
  width: 100vw;
  height: 100vh;
  position: relative;
  background: rgb(18, 19, 50);
  background: linear-gradient(to bottom right, rgba(18, 19, 50, 1) 10%, rgba(18, 19, 90, 1) 67%, rgba(58, 145, 199, 1) 90%, rgba(74, 155, 205, 1) 100%);
}
.sustainability .overlay img{
 width: 55vw;
  position: absolute;
  top: 1%;
  left: 0;
  bottom: 0;
 
}
.safety-first{
  width: 100vw;
  height: 100vh;
  position: relative;
  background: rgb(18, 19, 50);
  background: linear-gradient(to bottom right, rgba(18, 19, 50, 1) 10%, rgba(18, 19, 90, 1) 67%, rgba(58, 145, 199, 1) 90%, rgba(74, 155, 205, 1) 100%);
}
.safety-first .overlay img{
 width: 55vw;
  position: absolute;
  top: 1%;
  left: 0;
  bottom: 0;
}
.newsletter{
  width: 100vw;
  height: 100vh;
  position: relative;
  background: rgb(18, 19, 50);
  background: linear-gradient(to bottom right, rgba(18, 19, 50, 1) 10%, rgba(18, 19, 90, 1) 67%, rgba(58, 145, 199, 1) 90%, rgba(74, 155, 205, 1) 100%);
}
.newsletter .overlay img{
 width: 55vw;
  position: absolute;
  top: 1%;
  left: 0;
  bottom: 0;
}
@media (max-width: 1300px) {
  .box {
    grid-template-columns: repeat(5, 1fr); /* 4 columns on smaller screens */
  }
  .product{
    overflow-y: auto;
  }
}

@media (max-width: 900px) {
  .box {
    grid-template-columns: repeat(2, 1fr); /* 3 columns on even smaller screens */
  }
  .product{
overflow-y: auto;
  }
}

@media (max-width: 600px) {
  .box {
    grid-template-columns: repeat(1, 1fr); /* 2 columns on mobile screens */
  }
  .product{
    overflow-y: auto;
  }
}

@media (max-width: 480px) {
  .box {
    grid-template-columns: 1fr; /* 1 column on very small screens */
  }
  .product{
    overflow-y: auto;
  }
  .marquee-content{
    flex-direction: column;
  }
  .marquee{
    align-items: center;
    justify-content: center;
  }
}