.custom-category-slider {
    width: 100%; /* Full width */
    padding:0px 80px 0px 80px;
}

.custom-category-list {
    display: flex;
    flex-wrap: nowrap; /* Prevent wrapping for slider */
    overflow: hidden; /* Hide overflow for slider */
}

.custom-category-item {
    flex: 1 0 auto; /* Allow items to grow but maintain base size */
    margin: 10px; /* Space between items */
    text-align: center; /* Center the text below */
}

.category-circle {
    max-width: 180px; /* Circle diameter */
    max-height: 180px; /* Circle diameter */
    border-radius: 50%; /* Make it a circle */
    /* overflow: hidden; */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto; /* Center horizontally */
    background-color: #f0f0f0; /* Default background color */
    position: relative; /* Position for gradient */
    /*padding:16px;*/
}

.category-circle::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(to right, #581c40, #ef018d); /* Gradient */
    opacity: 0.5; /* Adjust opacity */
    border-radius: 50%; /* Ensure gradient is also circular */
    z-index: 1; /* Behind the image */
}

.category-image {
   /* max-width: 80%;  Ensure image fits within circle */
   /* max-height: 80%;  Ensure image fits within circle */
    position: relative;
    bottom:23px;
    z-index: 2; /* Above the gradient */
    transition: transform 0.3s ease-in-out;
}
/* On hover, slide the image up */
.custom-category-item:hover .category-image {
    transform: translateY(-20px); /* Adjust the value to control the slide distance */
}
.category-title {
    display: block;
    margin-top: 5px; /* Space between image and title */
    font-size: 16px; /* Adjust title font size */
    color: #333; /* Title color */
}

.category-link {
    text-decoration: none; /* Remove underline from links */
    color: inherit; /* Inherit color from parent */
}

/* Responsive styles */
@media (max-width: 600px) {
  .category-circle {
    max-width: 160px; /* Circle diameter */
    max-height: 160px; /* Circle diameter */
    margin: none; /* Center horizontally */
 }
}