.navbar-nav .nav-link {
    font-size: 1.1rem; /* Increase font size */
}

.dropdown-item {
    font-weight: 500; /* Make dropdown items a bit bolder */
}

.dropdown-menu {
    border-radius: 0.5rem; /* Add rounded corners to dropdown */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* Add a subtle shadow */
}


.dropdown-item:hover {
    background-color: #007bff;
    color: white;
}

main.container {
    /* This rule adds padding to the top of the main content container.
       This is necessary to prevent the content from being hidden underneath
       the sticky navbar. The `!important` flag ensures this rule overrides
       any conflicting styles from Bootstrap or other sources. */
    padding-top: 20px !important;
}

.product-card {
    opacity: 0;
}

.navbar-brand {
    font-weight: bold;
}

.bg-primary {
    background-color: #007bff !important; /* Override Bootstrap default */
}

.bg-dark {
    background-color: #343a40 !important; /* Override Bootstrap default */
}

.card {
    transition: transform .2s, color .2s;
}

/* Apply scaling hover effect to all cards EXCEPT category cards */
.card:not(.category-card):hover {
    transform: scale(1.05);
}

.shop-logo {
    height: 40px; /* Double the original size */
    width: auto;
}

.shop-logo-index {
    height: 80px; /* Double the original size */
    width: auto;
    max-width: 200px;
}

.shop-name {
    font-weight: bold;
    color: #555;
}

/* Style for the link wrapping the category card */
.card-link {
    text-decoration: none;
    color: inherit;
}

/* When hovering the link, scale the card */
.card-link:hover .category-card {
    transform: scale(1.05);
}

/* When hovering the link, also change the text color */
.card-link:hover .category-card .card-body {
    color: #8B0000 !important; /* Dark Red */
}