.products-banner {
    height: 330px;
    background:
        linear-gradient(
            rgba(0, 0, 0, 0.65),
            rgba(0, 0, 0, 0.65)
        ),
        url("https://images.openai.com/static-rsc-4/O3nn-FVLRRaCFTQc71-YyRvhIbAevkvjHy06-z3ovXWP-59jTa_8XkVhURVKDQFqTeDKn6FFBWZRDfHERjxVeVLQs5umZAiOvLna_ZuUlgLD3hb1HUJNLZf-4LbwLfPlMebVBWOQCQnE_PU77VmeJ6x0B6lnmsnY5RzHDNUsKQLOztLNN4OvPjFpcRqkgZ2h?purpose=fullsize");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
}

.products-banner h1 {
    font-size: 60px;
    font-weight: 500;
}

.products-banner p {
    font-size: 22px;
}






/* CATEGORY */

.categories{

    width:85%;
    margin:50px auto;

    display:grid;
    grid-template-columns:
    repeat(4,1fr);

    gap:25px;

}


.category-card{

    background:white;

    height:180px;

    border-radius:18px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    box-shadow:
    0 8px 25px rgba(0,0,0,.08);

    cursor:pointer;

    transition:.3s;

}



.category-card img{

    height:60px;
    object-fit:contain;

}


.category-card h3{

    margin-top:15px;

}



.category-card:hover,
.category-card.active{


    transform:translateY(-8px);

    border:2px solid #ff9800;

}



.container{
    width:90%;
    margin:auto;
}






.products{

    width:90%;
    margin:50px auto;

}


.products h2{

    text-align:center;
    color:#00a6b4;
    font-size:30px;
    margin-bottom:30px;

}


.product-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;

}



.product-box{

    background:#fff;
    border:1px solid #e5e5e5;
    padding:18px;
    transition:.3s;
    cursor:pointer;

}



.product-box:hover{

    box-shadow:0 4px 15px rgba(0,0,0,.15);

}



.p-img{

    height:200px;
    display:flex;
    align-items:center;
    justify-content:center;

}


.p-img img{

    max-width:180px;
    max-height:180px;
    transition:.3s;

}


.product-box:hover img{

    transform:scale(1.08);

}


.p-info{

    text-align:left;

}



.p-info h3{

    font-size:17px;
    color:#222;
    margin:12px 0;

}



.desc{

    color:#777;
    font-size:14px;
    line-height:22px;

}



.stock{

    color:green;
    margin:10px 0;
    font-weight:bold;

}



button{

    width:100%;
    padding:10px;
    border:none;
    background:#ff9f00;
    color:white;
    font-size:15px;
    cursor:pointer;
    border-radius:3px;

}



button:hover{

    background:#00a6b4;

}


/* Tablet */

@media(max-width:900px){

.product-grid{

    grid-template-columns:repeat(2,1fr);

}

}


/* Mobile */

@media(max-width:500px){

.product-grid{

    grid-template-columns:1fr;

}

}