/* Styling for the logo */
* {
    margin: 0px;
    padding: 0px;
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
}

/* Adjust spacing of the bottom navigation icons */
.navbar .nav-link i {
    font-size: 1.3rem;
}

.navbar .nav-link p {
    margin: 0;
}

.small {
    font-size: 12px;
}

/* Custom styles for the fixed bottom nav */
.navbar {
    padding: 0.5rem 0;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
}



/* Product item styles */
.product-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Space between elements */
    position: relative; /* Set position for absolute positioning of the ribbon */
    overflow: hidden; /* Prevent overflow */
    background-color: white;
}

    .product-item a {
        text-decoration: none;
        color: black;
    }

.discount-ribbon {
    position: absolute;
    background-color: #387478; /* Ribbon color */
    color: #fff; /* Ribbon text color */
    padding: 5px 10px; /* Padding for the ribbon */
    font-size: 0.8rem; /* Smaller font size */
    border-radius: 8px; /* Rounded corners */
    z-index: 1; /* Ensure ribbon is above the image */
}

.category-container {
    width: 100%;
    display: flex; /* Align items horizontally */
    gap: 10px; /* Add space between items */
    overflow-x: auto; /* Enable horizontal scrolling */
    white-space: nowrap; /* Prevent text wrapping */
    padding: 10px 0; /* Optional: Add padding for better spacing */
}

.category-item {
    display: inline-block; /* Ensures box adjusts to text size */
    padding: 5px 10px; /* Add space around the text */
    background-color: #f8f9fa; /* Light background for visibility */
    border: 1px solid #ddd; /* Optional border for separation */
    border-radius: 5px; /* Optional rounded corners */
    font-size: 14px; /* Adjust font size as needed */
    text-align: center; /* Center text within the box */
    white-space: nowrap; /* Prevent text from wrapping inside the box */
}

    .category-item a {
        text-decoration: none; /* Removes underline from links */
        color: #333; /* Sets text color */
        font-weight: bold; /* Makes text bold */
    }

        .category-item a:hover {
            color: #007bff; /* Changes text color on hover */
        }

/* Full-width image */
.product-item img {
    width: 100%; /* Make the image full width */
    height: 150px; /* Fixed height for the image to maintain box height */
    object-fit: cover; /* Cover to maintain aspect ratio without distortion */
}

.product-title {
    font-size: 0.8rem;
    line-height: 1; /* Control line height */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit to 2 lines */
    -webkit-box-orient: vertical;
}



.product-pricing {
    display: flex;
    justify-content: space-between; /* Space between price elements */
    align-items: center;
    font-size: 0.8rem;
}

.original-price {
    text-decoration: line-through;
    color: #888; /* Gray color for original price */
    font-size: 0.8rem;
}

.offer-price {
    color: #d9534f; /* Red color for offer price */
    font-weight: bold;
    font-size: 0.8rem;
}

footer {
    background-color: #343a40; /* Dark background */
}

.card {
    border: none; /* Remove border for a cleaner look */
    border-radius: 10px; /* Rounded corners */
}

.card-title {
    font-size: 1.25rem; /* Adjust card title size */
}

.list-unstyled li {
    margin: 10px 0; /* Space between links */
}

.list-unstyled a {
    text-decoration: none; /* Remove underline */
    transition: color 0.3s; /* Smooth color transition */
}

    .list-unstyled a:hover {
        color: #d9534f; /* Change color on hover */
    }

.fa {
    margin-right: 10px; /* Space between icon and text */
}

footer {
    background-color: white; /* Dark background */
}

.btn {
    background-color: #243642;
    border: 1px solid black;
}

.btn-outline-light {
    color: white; /* Text color for buttons */
    border-color: white; /* Border color for buttons */
}

    .btn-outline-light:hover {
        background-color: white; /* Background color on hover */
        color: #343a40; /* Text color on hover */
    }