/* Card Hover Animation */
    .card-hover {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .card-hover:hover {
        transform: translateY(-10px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    }

    /* Tab Animation */
    .tab-animation {
        animation: fadeIn 0.6s ease-in-out;
    }

/* Card Hover Animation */
    .card-hover {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .card-hover:hover {
        transform: translateY(-10px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    }

    /* Tab Animation */
    .tab-animation {
        animation: fadeIn 0.6s ease-in-out;
    }

/* Ensures all images have the same size */
    .product-image {
        width: 100%;
        max-width: 50px;
        /* Set a max width for uniformity */
        height: 50px;
        /* Adjust height as needed */
        object-fit: cover;
        /* Crop the image to fit within dimensions */
        border-radius: 8px;
        /* Optional: adds rounded corners */
    }

    /* Card Hover Animation */
    .card-hover {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .card-hover:hover {
        transform: translateY(-10px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    }

    /* Tab Animation */
    .tab-animation {
        animation: fadeIn 0.6s ease-in-out;
    }

    /* Fade-in Animation */
    @keyframes fadeIn {
        0% {
            opacity: 0;
            transform: translateY(30px);
        }

        100% {
            opacity: 2;
            transform: translateY(0);
        }
    }

    /* Active Tab Styles */
    .nav-pills .nav-link.active {
        background-color: #009fc6 !important;
        color: white;
    }

    /* Inactive and Hover Tab Styles */
    .nav-pills .nav-link {
        background-color: #0000;
        color: #333;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .nav-pills .nav-link:hover {
        background-color: #009fc6;
        color: white;
    }