body{
background:#f7f7f7;
font-family:Arial;
}


.hero{
width:100%;
height:320px;
border-radius:8px;
display: block;
flex-direction:column;
justify-content:center;
padding-left:20px;
padding-top: 80px;

background-image:url("assets/Image/backgrounds/Banner-board-800x420 2.png");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}


.product-card{

background:white;
border-radius:10px;
padding:15px;
box-shadow:0 3px 10px rgba(0,0,0,0.1);
transition:0.3s;

}


.product-card:hover{

transform:scale(1.05);

}


.product-card img{

width:100%;
height:180px;
object-fit:contain;

}


.price{

color:#0d6efd;
font-weight:bold;

}

/* Tablet */

@media (max-width:992px){

.hero{
height:250px;
padding-left:20px;
}

.hero h1{
font-size:24px;
}

}

/* Mobile */

@media (max-width:576px){

.hero{
height:200px;
text-align:center;
padding:20px;
}

.hero h1{
font-size:20px;
}

.product-card img{
height:140px;
}

}

/* cart html */
.product-card{
background:white;
padding:15px;
border-radius:10px;
box-shadow:0 3px 10px rgba(0,0,0,0.1);
text-align:center;
}

.product-card img{
height:180px;
object-fit:contain;
}

.price{
color:#5012fa;
font-weight:bold;
}

/* Navbar responsive */

@media (max-width:768px){

.navbar form{
flex-direction:column;
gap:10px;
margin-top:10px;
}

.navbar input,
.navbar select{
width:100%;

}
.navbar-toggler{
border:1px solid #ddd;
}

}