.product-card {
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 20px;
    text-align: center;
}

.product-card img {
    max-width: 100%;
    height: auto;
}

.category-list {
    list-style: none;
    padding-left: 0;
}

.category-list li {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
}

.category-list a {
    text-decoration: none;
    color: #333333a1;
}

.search-bar input {
    padding: 10px;
}

/* .prod_cart .cart_a {
    visibility: hidden; 
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease; 
}

.prod_cart:hover .cart_a {
    visibility: visible; 
    opacity: 1; 
    transform: translateY(0); 
} */
 
.prod_cart {
    position: relative;
    overflow: hidden;
    height: 450px;
}

.prod_cart .cart_a {
    position: relative;
    left: 30%;
    transform: translateX(-50%); 
    opacity: 0; 
    transition: all 0.4s ease; 
}

.prod_cart:hover .cart_a {
    bottom: 5px; 
    opacity: 1; 
}


.dropdown-results {
    position: absolute; /* Position it under the search bar */
    width: calc(90% - 2px); /* Adjust width to match the input (minus border) */
    background-color: white; /* Background color for dropdown */
    border: 1px solid #ccc; /* Border around dropdown */
    max-height: 200px; /* Max height for dropdown */
    overflow-y: auto; /* Allow scrolling if there are many results */
    display: none; /* Initially hidden */
    z-index: 1000; /* Ensure dropdown is on top of other elements */
    border-radius: 4px; /* Rounded corners */
}

/* Custom Scrollbar for Dropdown */
.dropdown-results::-webkit-scrollbar {
    width: 8px; /* Width of the scrollbar */
}

.dropdown-results::-webkit-scrollbar-track {
    background: #f1f1f1; /* Background of the scrollbar track */
    border-radius: 10px; /* Rounded corners */
}

.dropdown-results::-webkit-scrollbar-thumb {
    background: #888; /* Color of the scrollbar handle */
    border-radius: 10px; /* Rounded corners */
}

.dropdown-results::-webkit-scrollbar-thumb:hover {
    background: #555; /* Color of the scrollbar handle on hover */
}

/* For Firefox */
.dropdown-results {
    scrollbar-width: thin; /* Use a thin scrollbar */
    scrollbar-color: #888 #f1f1f1; /* Handle and track color */
}

.dropdown-item {
    padding: 10px; /* Padding for each item */
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Center items vertically */
    max-width: 300px; /* Set a max width for text */
    overflow: hidden; /* Hide overflow */
    white-space: normal; /* Allow text to wrap */
    word-wrap: break-word; /* Break words if necessary */
}

.dropdown-item:not(:last-child) {
    border-bottom: 1px solid #ccc; /* Add line between items, excluding last item */
}

.dropdown-item:hover {
    background-color: #f0f0f0; /* Change background on hover */
    cursor: pointer;
}

.dropdown-item img {
    width: 50px; /* Set a fixed width for the image */
    height: 50px; /* Set a fixed height for the image */
    margin-right: 10px; /* Space between image and text */
    vertical-align: middle; /* Align image vertically */
}


 /* Loading icon style */
#loadingIcon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none; /* Initially hidden */
z-index: 1001; /* Above other content */
}

/* Category sliding animation */
.slide-out-down {
animation: slideOutDown 0.5s forwards;
}


/* Keyframes for sliding down */
@keyframes slideOutDown {
from {
    opacity: 1;
    transform: translateY(0);
}
to {
    opacity: 0;
    transform: translateY(100%);
}
}

/* Update the new product fade-in animation */
.slide-in-right {
animation: fadeInRight 0.5s forwards;
}

/* Keyframes for sliding in from the right */
@keyframes fadeInRight {
from {
    opacity: 0;
    transform: translateX(50%); /* Start from the right */
}
to {
    opacity: 1;
    transform: translateX(0); /* End at the normal position */
}
}

/* Ensure the category container is positioned relatively for proper animations */
.category {
position: relative;
}

.product-badge {
    display: inline-block;
    width: 40px; /* Fixed width */
    height: 30px; /* Fixed height */
    line-height: 30px; /* Align the number vertically */
    border: 1px solid #ccc; /* Border around the badge */
    border-radius: 30px; /* Fully rounded to make it a circle */
    text-align: center; /* Align number in the center horizontally */
    margin-left: 5px; /* Space between category name and badge */
    background-color: #f8f8f8; /* Optional background color */
}

.category-link {
position: relative; /* Positioning for pseudo-element */
color: black; /* Default text color */
transition: color 0.3s ease; /* Smooth transition for color change */
}

.category-link:hover {
color: #F9A392; /* Change this to your desired hover text color */
}

/* Optional: Style for the product count when hovering */
.category-link:hover .product-count {
color: #F9A392; /* Change this to your desired hover text color for count */
}

/* Optional: Add a pseudo-element for visual effect */
.category-link::after {
content: ''; /* Creates a pseudo-element */
position: absolute; /* Position it relative to the link */
width: 100%; /* Full width of the link */
height: 2px; /* Thickness of the underline */
background-color: #F9A392; /* Color of the underline */
left: 0;
bottom: -2px; /* Position it below the text */
transform: scaleX(0); /* Start with a scale of 0 (invisible) */
transition: transform 0.3s ease; /* Smooth transition for the scale */
}

.category-link:hover::after {
transform: scaleX(1); /* Scale to full width on hover */
}


.category-list li:hover .product-badge {
background-color: #F9A392; /* Set to the selected background color */
color: white; /* Change text color to white or any contrasting color */
border-color: white;
}

.service-text h4, .service-text p{
    font-family: 'Times New Roman', Times, serif;
}

@media (min-width: 992px) {
    .search_and_list{
        margin-left: -100px;
        margin-right: 100px;
        margin-top: 10px;
    }
    .col-md-4{
        flex: 0 1 100%; /* 1 item per row (full width) on small screens */
        margin-bottom: 300px;
    }

    .col-md-4:hover img{
        transform: scale(0.8) translateY(-20px);

    }
  }

/* Mobile view - stack items */
@media (max-width: 768px) {
    .dropdown-results {
        position: absolute; /* Position it under the search bar */
        width: calc(95% - 2px); /* Adjust width to match the input (minus border) */
        background-color: white; /* Background color for dropdown */
        border: 1px solid #ccc; /* Border around dropdown */
        max-height: 200px; /* Max height for dropdown */
        overflow-y: auto; /* Allow scrolling if there are many results */
        display: none; /* Initially hidden */
        z-index: 1000; /* Ensure dropdown is on top of other elements */
        border-radius: 4px; /* Rounded corners */
    }
    .dropdown-item {
        padding: 10px; /* Padding for each item */
        display: flex; /* Use flexbox for alignment */
        align-items: center; /* Center items vertically */
        max-width: 100%; /* Set a max width for text */
        overflow: hidden; /* Hide overflow */
        white-space: normal; /* Allow text to wrap */
        word-wrap: break-word; /* Break words if necessary */
        color: rgba(0, 0, 0, 0.5);
    }

    .col-md-4{
        flex: 0 1 100%; /* 1 item per row (full width) on small screens */
        margin-bottom: 320px;
    }
    .col-md-4 img{
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }

    .col-md-4:hover img{
        transform: scale(0.7) translateY(-60px);

    }

    .prod_cart {
        position: relative;
        overflow: hidden;
        height: 450px;
    }
    
    .prod_cart .cart_a {
        position: absolute;
        left: 50%;
        justify-content: center;
        transform: translateX(-50%); 
        align-items: flex-end; /* Align the button at the bottom */
        padding-bottom: 5px; /* Optional padding */
        opacity: 0; 
        transition: all 0.4s ease; 
    }
    
    /* .service-text{
        margin-top: -40px;
    } */

    .service-text {
        width: 95%; /* Adjust width to fit better in mobile view */
        padding: 15px; /* Less padding for smaller screens */
        margin: 10px auto; /* Center the element with auto margin */
        font-size: 14px; /* Adjust font size */
        text-align: center; /* Center-align text */
        position: relative; /* Ensure proper alignment */
        overflow: visible; /* Allow overflow to make sure content is not clipped */
    }

    /* h4 styling inside service-text for mobile */
    .service-text h4 {
        font-size: 20px; /* Reduce font size for titles */
        padding: 10px; /* Adjust padding for headings */
        /* margin: 5px 0;  */
        overflow-wrap: break-word; /* Handle long titles */
        font-weight: bolder;
    }

    /* p styling inside service-text for mobile */
    .service-text p {
        font-size: 14px; /* Adjust paragraph font size */
        padding: 10px; /* Reduce padding for better spacing */
        margin-bottom: 10px; /* Reduce bottom margin */
        text-align: center; /* Justify text for readability */
    }

    /* Styling for button_div inside service-text */
    .button_div {
        width: 100%; /* Full width */
        margin: 10px 0; /* Margin for spacing */
        padding: 10px; /* Padding for button area */
        text-align: center; /* Center the buttons */
        box-shadow: none; /* Remove shadow */
        background-color: white;
    }

    /* Styling for buttons in button_div */
    .button_div .btn {
        width: 90%; /* Full width button */
        padding: 10px; /* Button padding */
        margin: 5px 0; /* Margin between buttons */
        font-size: 14px; /* Button font size */
        box-shadow: none; /* Remove shadow */
    }
    
    .service-text:hover{
        transform: translateY(-20px);
    }
    
}


/* Small screens: 1 item per row */
@media (min-width: 768px) and (max-width: 991px) {
    .dropdown-results {
        position: absolute; /* Position it under the search bar */
        width: calc(95% - 2px); /* Adjust width to match the input (minus border) */
        background-color: white; /* Background color for dropdown */
        border: 1px solid #ccc; /* Border around dropdown */
        max-height: 200px; /* Max height for dropdown */
        overflow-y: auto; /* Allow scrolling if there are many results */
        display: none; /* Initially hidden */
        z-index: 1000; /* Ensure dropdown is on top of other elements */
        border-radius: 4px; /* Rounded corners */
    }
    .dropdown-item {
        padding: 10px; /* Padding for each item */
        display: flex; /* Use flexbox for alignment */
        align-items: center; /* Center items vertically */
        max-width: 100%; /* Set a max width for text */
        overflow: hidden; /* Hide overflow */
        white-space: normal; /* Allow text to wrap */
        word-wrap: break-word; /* Break words if necessary */
        color: rgba(0, 0, 0, 0.5);
    }

    .col-md-4{
        flex: 0 1 100%; /* 1 item per row (full width) on small screens */
        margin-bottom: 320px;
    }
    .col-md-4 img{
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }

    .col-md-4:hover img{
        transform: scale(0.7) translateY(-45px);

    }

    .prod_cart {
        position: relative;
        overflow: hidden;
        height: 400px;
    }
    
    .prod_cart .cart_a {
        position: absolute;
        left: 35%;
        justify-content: center;
        transform: translateX(-20%); 
        align-items: flex-end; /* Align the button at the bottom */
        padding-bottom: 5px; /* Optional padding */
        opacity: 0; 
        transition: all 0.4s ease; 
    }
    
    /* .service-text:hover{
        transform: translateY(-20px);
        margin-bottom: 30px;
    } */

    .service-text {
        width: 95%; /* Adjust width to fit better in mobile view */
        padding: 15px; /* Less padding for smaller screens */
        margin: 10px auto; /* Center the element with auto margin */
        font-size: 14px; /* Adjust font size */
        text-align: center; /* Center-align text */
        position: relative; /* Ensure proper alignment */
        overflow: visible; /* Allow overflow to make sure content is not clipped */
    }

    /* h4 styling inside service-text for mobile */
    .service-text h4 {
        font-size: 20px; /* Reduce font size for titles */
        padding: 10px; /* Adjust padding for headings */
        /* margin: 5px 0;  */
        overflow-wrap: break-word; /* Handle long titles */
        font-weight: bolder;
    }

    /* p styling inside service-text for mobile */
    .service-text p {
        font-size: 14px; /* Adjust paragraph font size */
        padding: 10px; /* Reduce padding for better spacing */
        margin-bottom: 10px; /* Reduce bottom margin */
        text-align: center; /* Justify text for readability */
    }

    /* Styling for button_div inside service-text */
    .button_div {
        width: 100%; /* Full width */
        margin: 10px 0; /* Margin for spacing */
        padding: 10px; /* Padding for button area */
        text-align: center; /* Center the buttons */
        box-shadow: none; /* Remove shadow */
        background-color: white;
    }

    /* Styling for buttons in button_div */
    .button_div .btn {
        width: 90%; /* Full width button */
        padding: 10px; /* Button padding */
        margin: 5px 0; /* Margin between buttons */
        font-size: 14px; /* Button font size */
        box-shadow: none; /* Remove shadow */
        left: 23%;
    }
    
    .service-text:hover{
        transform: translateY(-20px);
    }
}

.readonly-text {
    color: #888; /* Gray color to indicate readonly */
    font-style: italic; /* Italicize for emphasis */
    pointer-events: none; /* Disable pointer events */
}