.rddev-slider .rddev-product-item {

    position: relative;

    text-align: center;

    padding: 10px;

     background-color: #fff; /* White background color */

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: add shadow for better visual separation */

    border-radius: 8px; /* Optional: add rounded corners */

    overflow: hidden;

     margin: 0 7.5px; /* Half of 15px on each side */

}
.price-button {
    display: flex;
    width: 100%;
    gap: 0px;
    align-items: center;
}
.rddev-product-price {
    display: grid;
    width: 50%;
}
.detail-page {
    width: 50%;
}

a.best-single-p-btn {
    background-color: #0D184A;
    color: #fff !important;
    border-radius: 10px;
    padding: 10px 17px;
    margin-top: 18px !important;
}
a.best-single-p-btn:hover {
    background-color: #EF1D26;
}

.rddev-product-image {

    position: relative;

    overflow: hidden;

    height: 250px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 18px;

}

.rd-slider-meta {

    text-align: left;

}

h2.rddev-product-title {

    text-align: left;

}

.rddev-product-rating .star-rating {

    float: left !important;
    width: 100% !important;

}

.rddev-saving-percentage {

    position: absolute;

    top: 10px;

    right: 10px;

    background-color: rgba(255, 0, 0, 0.7); /* Red background for visibility */

    color: #fff;

    padding: 5px;

    border-radius: 3px;

    font-weight: bold;

}



.rddev-product-image img {

    transition: opacity 0.3s ease;

    width: auto; /* Maintain the aspect ratio */

    height: 100%; /* Stretch to fill the height */

    object-fit: cover; /* Cover the area, cropping if necessary */

}



.rddev-product-image img.hover-image {

    position: absolute;

    top: 0;

    left: 0;

    opacity: 0;

    width: 100%;

    height: auto;

    transition: opacity 0.3s ease;

}



/* Updated hover effects to ensure correct visibility of images */

.rddev-product-image:hover img.hover-image {

    opacity: 1;

}



.rddev-product-image:hover img:not(.hover-image) {

    opacity: 0;

}



/* Ensure the main product image remains visible if no hover image */

.rddev-product-image img {

    display: block; /* Keep main image displayed */

}



/* Add to Cart Icon */

.rddev-add-to-cart {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    opacity: 0; /* Initially hidden */

    transition: opacity 0.3s ease;

}

i.fa.fa-shopping-cart {

    color: red;

    font-size: 28px;

}

.added-message {

    display: inline-block;

    margin-left: 5px;

    color: green; /* Change to whatever color you prefer */

    font-weight: bold;

}



.rddev-product-image:hover .rddev-add-to-cart {

    opacity: 1;

}



.rddev-product-title {

    font-size: 1.1em;

    margin: 10px 0;

}
.rddev-product-category a {
    background-color: #E5E4F3;
    color: #253060;
    border-radius: 24px;
    padding: 2px 10px;
}


.rddev-product-price {

    font-size: 1.1em;

    color: #333;
    margin: 10px 0 !important;

}



.rddev-product-rating {

    color: #ffa500; /* Star color */

}



/* Ensure the slider container is positioned relative */

.rddev-slider {

    position: relative;

}



/* Style the navigation arrows */

.slick-prev, .slick-next {

    background-color: rgb(255 255 255 / 70%);

    color: #000000;

    font-size: 18px;

    width: 34px;

    height: 39px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 10;

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    box-shadow: 0 5px 15px 0 #0000001A;

}



/* Ensure any text in the arrows is hidden */

.slick-prev:before, .slick-next:before {

    display: none !important; /* Hide default arrows */

}



/* Adjust positioning of each arrow */

.slick-prev {

    left: -10px; /* Adjust left arrow position within slider */

}



.slick-next {

    right: -10px; /* Adjust right arrow position within slider */

}



/* Hover effect for arrows (optional) */

.slick-prev:hover, .slick-next:hover {

    background-color: rgb(255 255 255 / 70%); /* Light background on hover */

    color: #000;

}



/* Customize dots below the slider */

.slick-dots {

    position: absolute;

    bottom: -25px;

    width: 100%;

    text-align: center;

}



.slick-dots li button {

    font-size: 0;

    background: #ccc;

    width: 10px;

    height: 10px;

    border-radius: 50%;

    margin: 0 5px;

    transition: background-color 0.3s ease;

}



.slick-dots li.slick-active button {

    background-color: #333; /* Active dot color */

}