/* Category Grid - Overall Layout */
.category-grid {
    display: flex; /* Flex layout for category items */
    justify-content: center; /* Center content within the grid */
    gap: 20px; /* Space between category items */
    padding: 20px; /* Padding around the grid */
    flex-wrap: wrap; /* Allow wrapping for smaller screens */
}

/* Category Item - Styling with a Weed Theme */
.category-item {
    display: flex; /* Flex layout for correct alignment */
    justify-content: center; /* Center content within the item */
    align-items: center; /* Align text vertically */
    padding: 20px; /* Padding inside each category item */
    border-radius: 12px; /* Soft rounding for item edges */
    background: linear-gradient(135deg, #3b6b3b, #1e401e); /* Green gradient */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* Shadow for depth */
    transition: transform 0.3s ease; /* Smooth transitions */
    text-align: center; /* Centered text */
    max-width: 200px; /* Maximum width for category items */
    color: #ffffff; /* White text color */
    text-decoration: none; /* No underline */
}

/* Category Item Hover Effect - Enhancing the Weed Theme */
.category-item:hover {
    transform: scale(1.1); /* Slight zoom effect on hover */
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5); /* Stronger shadow on hover */
    background: linear-gradient(135deg, #1e401e, #3b6b3b); /* Inverted gradient on hover */
    text-decoration: none; /* No underline */

}

/* Responsive Design */
@media (max-width: 768px) {
    .category-grid {
        flex-direction: column; /* Stack category items vertically for smaller screens */
        align-items: center; /* Center content in smaller screens */
    }

    .category-item {
        max-width: 100%; /* Allow full width for smaller screens */
        padding: 15px; /* Adjusted padding for smaller screens */
    }
}