body {
    background-color: #f4f4f4; /* Light gray for page background */
    margin: 0; /* Reset default margins */
}
header {
    background: linear-gradient(to right, #333, #555); /* Gradient from dark gray to light gray */
    color: white;
    position: fixed; /* Fixed on the screen */
    width: 100%; /* Full-width */
    z-index: 1000; /* Higher layer than content below */
    transition: background-color 0.5s, box-shadow 0.5s; /* Transition effect on background */
}
h1 {
    font-size: 2rem; /* Increased heading size */
    margin: 20px 0; /* Margin above and below */
    text-align: center; /* Center-aligned heading */
}
h2 {
    color: #444; /* Dark gray for section headings */
}
.navbar {
    padding: 0.5rem 1rem; /* Reduced navbar height */
    transition: background-color 0.5s, box-shadow 0.5s; /* Transition effect */
    background-color: rgba(51, 51, 51, 0.8); /* Semi-transparent background */
}
.category-section {
    background: linear-gradient(to bottom, #fff, #eaeaea); /* Gradient from white to light gray */
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow for depth */
    text-align: center; /* Center-aligned text in section */
}
table {
    background-color: #fff; /* White background for the table */
}
.table thead {
    background-color: #333; /* Dark background for table headers */
    color: white;
}
footer {
    background-color: #222; /* Dark background for the footer */
    color: white;
    padding: 10px 0;
    text-align: center; /* Center-align text in the footer */
}
/* New styles for the carousel */
.carousel-inner img {
    max-height: 400px; /* Max height for carousel images */
    object-fit: cover; /* Image fills space without distortion */
}
/* Styles for category images */
.category-image {
    max-width: 80%; /* Max width for images */
    border: 5px solid #555; /* Border around the image */
    border-radius: 10px; /* Rounded corners for the border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Light shadow for depth */
    margin: 20px auto; /* Center-align the image */
    display: block; /* Force block display for centering */
}
.navbar.scrolled {
    background-color: rgba(51, 51, 51, 0.9); /* More opaque background on scroll */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7); /* Stronger shadow on scroll */
}
.content {
    padding-top: 90px; /* Leave space for fixed header */
}
/* Styling for mobile devices */
@media (max-width: 576px) {
    h2 {
        font-size: 1.5rem;
    }
    .table-responsive {
        overflow-x: auto;
    }
    .table {
        font-size: 0.9rem;/* Smaller font for mobile */
    }
}