.categorys_featured .row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.categorys_featured .col {
    flex: 1 1 calc(20% - 20px); /* Default 5 columns */
    max-width: calc(20% - 20px);
    box-sizing: border-box;
}

/* For screens smaller than 768px (mobile) */
@media (max-width: 768px) {
    .categorys_featured .col {
        flex: 1 1 calc(50% - 20px); /* 2 columns on mobile */
        max-width: calc(50% - 20px);
    }
}

/* For screens larger than 768px (default 5 columns remains) */
@media (min-width: 769px) {
    .categorys_featured .col {
        flex: 1 1 calc(20% - 20px); /* 5 columns on desktop */
        max-width: calc(20% - 20px);
    }
}


.categrie-product {
    text-align: center;

    overflow: hidden;

    padding: 15px;
}
.cate-thumb {
    position: relative;
    display: inline-block;
    width: 150px;
    height: 150px;
}

.cate-thumb img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    display: block;
    margin: 0 auto;
    border-radius: 50%; /* Makes images round */
 
   
}

/* Add a magnify effect on hover */

/* Light gradient animation before the hover */
.cate-thumb::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%; /* Start from the center horizontally */
    transform: translateX(-50%); /* Shift back to align center */

}

/* Light animation pass on hover */
.cate-thumb:hover::before {
    width: 150%; /* Slightly larger width for the light animation */
    height: 100%; /* Matches the container height */
    background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.515) 50%, rgba(255, 255, 255, 0) 100%);
    border-radius: 50%; /* Matches the image roundness */
    right: 100%; /* Move the gradient animation to the right */
    transition: all 0.5s ease; /* Smooth light pass animation */
}

/* Category title styles */
.cat-title {
    padding-top: .8rem;
    padding-bottom: .8rem;
    color: black;
    font-weight: 600;
    font-size: 2.4rem;
    letter-spacing: -.025em;
    text-transform: capitalize;
    text-align: center;
}
.product-grid{ font-family: 'Poppins', sans-serif; }
.product-grid .product-image{
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.product-grid .product-image .img-1{ transition: all 0.3s ease 0s; }
.product-grid:hover .product-image .img-1{ opacity: 0; }
.product-grid .product-image .img-2{
    width: 100%;
    height: 100%;
    opacity: 0;
    backface-visibility: hidden;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    transition: all 0.3s ease 0s;
}
.product-grid:hover .product-image .img-2{ opacity: 1; }
.product-grid .product-hot-label,
.product-grid .product-discount-label{
    color: #fff;
    background: #ff6f00;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;

    position: absolute;
    top: 10px;
    left: 10px;
}
.product-grid .product-discount-label{
    background: #ff3939;
    left: auto;
    right: 10px;
}

.product-grid:hover .product-view{ 
    opacity: 1;
    transform: scale(1);
    bottom: -20px;
    left: -20px;
}
.product-grid .product-view:hover{ background: #a6c76c; }
.product-grid .product-links{
    padding: 0;
    margin: 0;
    list-style: none;
    transform: translateY(50%);
    position: absolute;
    bottom: 50%;
    right: 10px;
    z-index: 1;
}
.product-grid .product-links li{
    margin: 5px 0;
    opacity: 0;
    transform: translateX(100%);
    transition: all .3s ease;
}
.product-grid .product-links li:nth-child(2){ transition-delay: .1s; }
.product-grid .product-links li:nth-child(3){ transition-delay: .2s; }
.product-grid:hover .product-links li{
    opacity: 1;
    transform: translateX(0); 
}
.product-grid .product-links li a{
    color: #000;
    background: #fff;
    font-size: 18px;
    text-align: center;
    line-height: 33px;
    width: 35px;
    height: 35px;
    border: 1px solid #000;
    display: block;
    transition: all .3s ease;
}
.product-grid .product-links li a:hover{
    color: #fff;
    background:#a6c76c; 
    border-color: #a6c76c;
}
.product-grid .product-content{
    background: #fff;
 
}

.product-grid .rating li{ display: inline-block; }
.product-grid .rating .disable{ color: #a3a3a3; }
.product-grid .title{
    font-size: 15px;
    font-weight: 500;
    text-transform: capitalize;
    margin: 0 0 8px;
}
.product-grid .title a{
    color: #333;
    transition: all 0.3s ease 0s;
}
.product-grid .title a:hover{ color: #ff6f00; }
.product-grid .price{
    color: #a3a3a3;
    font-size: 15px;
    font-weight: 500;
}
.product-grid .price span{
    color: #999;
    font-size: 14px;
    font-weight: 400;
    text-decoration: line-through;
    margin-right: 5px;
}
@media screen and (max-width: 990px){
    .product-grid{ margin-bottom: 30px; }
}
      /* Center the pagination container */
      .pagination\:container {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        /* Space between pagination items */
        flex-wrap: nowrap;
        /* Ensure no wrapping */
        flex-direction: row;
        /* Keep items aligned horizontally */
    }

    /* Styling for the arrow text */
    .arrow\:text {
        display: block;
        font-size: 13px;
        vertical-align: middle;
    }

    /* Pagination item styling */
    .pagination\:number {
        --size: 32px;
        --margin: 6px;
        margin: 0 var(--margin);
        border-radius: 6px;
        background: transparent;
        max-width: auto;
        min-width: var(--size);
        height: var(--size);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 0 6px;
        transition: background-color 0.3s ease;
    }

    /* Hover effect */
    .pagination\:number:hover {
        background: transparent;
    }

    /* Active pagination item styling */
    .pagination\:active {
        background: transparent;
        position: relative;
    }

    /* Arrow buttons (Left/Right) */
    .pagination\:number.arrow {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Hide arrows when hovered */
    .pagination\:number.arrow svg {
        fill: #fff;
        /* White color for arrows */
    }

    .pagination\:number.arrow:hover svg {
        fill: #ccc;
        /* Lighter color for hover */
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .pagination\:container {
            gap: 5px;
            /* Reduce gap on smaller screens */
            flex-direction: row;
            /* Ensure horizontal layout */
        }

        .pagination\:number {
            --size: 28px;
            /* Smaller size for pagination items */
            font-size: 12px;
        }

        .pagination\:number.arrow {
            --size: 28px;
            /* Smaller arrow size */
        }

        .arrow\:text {
            font-size: 12px;
            /* Smaller font size for arrow text */
        }
    }

    @media (max-width: 480px) {
        .pagination\:container {
            flex-direction: row;
            /* Ensure pagination remains horizontal even on very small screens */
            gap: 8px;
            /* Adjust gap for small screens */
        }

        .pagination\:number {
            --size: 24px;
            /* Smaller pagination items on very small screens */
            font-size: 10px;
            /* Smaller text size */
        }

        .pagination\:number.arrow {
            --size: 24px;
            /* Smaller arrow size */
        }

        .arrow\:text {
            font-size: 10px;
            /* Smaller font size for arrow text */
        }
    }

    /* Hide previous and next arrows when there is no room on small screens */
    @media (max-width: 320px) {
        .pagination\:number.arrow {
            display: none;
        }
    }
    .pr .container {
        display: flex;
        justify-content: center; /* Center horizontally */
        align-items: center; /* Center vertically */
     
    }