* {
    margin: 0;
    padding: 0;
    font-family: system-ui;
}
.welcome-msg {
    text-align: center;
    font-size: 25px;
    font-weight: 700;
    color : var(--base-text);
}
 body {
    margin: 0; /* Remove default body margin */
    background-color : var(--background);
}

.big-banner {
    margin: 50px auto;
    max-width: 70vw;
    height: 250px;
    background-color: rgb(203, 203, 203);
    border-radius: 20px;
    overflow: hidden; /* Hide overflow to maintain clean edges */
    position: relative; /* Position relative for absolute positioning of inner elements */
    z-index : -1;
}

.banner-images {
    display: flex;
    animation: slide 12s infinite; /* Animation for sliding */
    width: 400%; /* Adjust based on the number of banners */
}

.banner-images img {
    width: 25%; /* Each image takes up 25% of the container */
    height: 250px; /* Match the height of the banner */
}

@keyframes slide {
    0% { transform: translateX(0); }
    20% { transform: translateX(0); }
    25% { transform: translateX(-25%); }
    45% { transform: translateX(-25%); }
    50% { transform: translateX(-50%); }
    70% { transform: translateX(-50%); }
    75% { transform: translateX(-75%); }
    95% { transform: translateX(-75%); }
    100% { transform: translateX(0); }
}
.collection {
  max-width: 700px;
  margin: 0px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.collection .msg {
  font-size: 30px;
  color: var(--low-text-button);
}

.grid-container {
  width: 100%;
  width: 1200px;
  margin: 30px auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 20px;
}
.left0 {
	color : red;	
}
.left5 {
	color : orange;		
}
.In-stock {
	color : darkgreen;
}
.grid-element {
background-color : var(--card);
  height: 400px;
  padding: 10px;
  text-align: center;
  border-radius : 15px;
}
.grid-element:hover {
    background : linear-gradient(135deg , var(--high-text-button) , var(--low-text-button));
    transition : 0.3s ease;
    
}
.grid-element a {
    border-radius : 15px;
}
.grid-element img {
  object-fit: contain;
  width: 100%;
  height: 300px;
  cursor: pointer;
  border-radius : 15px;
}
.details1-product {
    font-size : 20px;
    margin-top : 20px;
}

.details2-product {
    font-size : 20px;
}
.details3-product {
	font-size : 20px;
}
.error{
    display : flex;
    flex-direction : column;
    height : 15vh;
    width : 80vw;
    margin : 10px auto;
    align-items : center;
    justify-content : center;
}
.error h2 {
    color : var(--high-text-button);
}
