/* Wrapping element */

/* Set some basic padding to keep content from hitting the edges */

.body-content {

    margin-top: 15px;

    padding-left: 15px;

    padding-right: 15px;

}



/* Set widths on the form inputs since otherwise they're 100% wide */

input,

select,

textarea {

    max-width: 280px;

}



/* Responsive: Portrait tablets and up */

@media screen and (min-width: 768px) {

    .body-content {

        padding: 0;

    }

}



body {

    font-family: Arial, Helvetica, sans-serif;

    background-color: #f8f9fa;

}



.top-bar a:hover,

.categories-bar a:hover,

.navbar a:hover {

    color: #198754 !important;

}



.hero-section {

    background: linear-gradient(135deg, #e9f7ef, #ffffff);

    border-radius: 16px;

    padding: 40px;

    margin-top: 20px;

}



.category-card,

.product-card {

    border: none;

    border-radius: 16px;

    transition: transform 0.2s ease, box-shadow 0.2s ease;

}



    .category-card:hover,

    .product-card:hover {

        transform: translateY(-4px);

        box-shadow: 0 10px 24px rgba(0,0,0,0.08);

    }



.section-title {

    font-weight: 700;

    margin-bottom: 20px;

}



.fake-img {

    background: linear-gradient(135deg, #dfeee3, #cfe8d4);

    height: 180px;

    border-top-left-radius: 16px;

    border-top-right-radius: 16px;

}



.price {

    font-size: 1.2rem;

    font-weight: bold;

    color: #198754;

}



@media (max-width: 768px) {

    .hero-section {

        padding: 25px;

    }

}