/* -----home----------- */

            @-webkit-keyframes scroll {
                0% {
                    transform: translateX(0);
                }

                100% {
                    transform: translateX(calc(-250px * 7));
                }
            }

            @keyframes scroll {
                0% {
                    transform: translateX(0);
                }

                100% {
                    transform: translateX(calc(-250px * 7));
                }
            }

            .slider {
                background: white;
                /* box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125); */
                /* height: 100px; */
                margin: auto;
                overflow: hidden;
                position: relative;
                width:100%;
            }

            .slider::before,
            .slider::after {
                /* background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); */
                content: "";
                height: 100%;
                position: absolute;
                width: 200px;
                z-index: 2;
            }

            .slider::after {
                right: 0;
                top: 0;
                transform: rotateZ(180deg);
            }

            .slider::before {
                left: 0;
                top: 0;
            }

            .slider .slide-track {
                -webkit-animation: scroll 40s linear infinite;
                animation: scroll 40s linear infinite;
                display: flex;
                width: calc(250px * 14);
            }

            /* .slider .slide {
                height: 100px;
                width: 250px;
            } */
             .slide-track:hover {
            animation-play-state: paused;
        }

            
        
        /* -----hero banner----------- */

               .slider-container {
            max-width: 100%;
            overflow: hidden;          
        }

        .hero-slider {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }

        .hero-slider .hero-slide {
            min-width: 100%;
            box-sizing: border-box;
        }
       .hero-slider .hero-slide a{
            padding: 0;
        }

        .hero-slider .hero-slide img {
            width: 100%;
            /* height: auto; */
        }

        .hero-btn {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
        }

        .hero-btn .next-button,
        .prev-button {
            background-color: transparent;
            border: 1px solid #fff;
            color: #fff;
            width: 30px;
            line-height: 30px;
            height: 30px;
            border-radius: 50%;

        }

        .category-title{
            background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); 
            width:100%;
        }
            
 /* -----product----------- */
 .color-body {
            width: 26px;
            height: 26px;
            line-height: 15px;
            padding: 1px;
            border-radius: 50%;
            cursor: pointer;
        }

        .color-body:hover {
            border: 2px solid rgb(99, 99, 5);
        }

        .color-body img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }


         .filter-btn {
            background-color: #fff;
        }

        .filter-btn:hover {
            background-color: rgb(110, 60, 51);
            color: #fff;
            transition: .9s ease;
        }

         /* Custom accordion style */
        .accordion-button {
            padding: 0px;
            font-weight: bold;
            border: 0;
            font-size: 18px;
            color: #333333;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        .accordion-button:focus {
            box-shadow: none;
            border: none;
        }

        .accordion-button:not(.collapsed) {
            background: none;
            color: rgb(110, 60, 51);
        }

        .accordion-button::after {
            width: auto;
            height: auto;
            content: "+";
            font-size: 40px;
            background-image: none;
            font-weight: 100;
            color: rgb(110, 60, 51);
            transform: translateY(-4px);
        }

        .accordion-button:not(.collapsed)::after {
            width: auto;
            height: auto;
            background-image: none;
            content: "-";
            font-size: 48px;
            transform: translate(-5px, -4px);
            transform: rotate(0deg);
        }

        .product-wrapper:hover {
            transition: .9s ease;
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2), 0 3px 5px 0 rgba(0, 0, 0, 0.15);
        }

         input[type="checkbox"] {
            position: relative;
            border: 2px solid #000;
            border-radius: 2px;
            background: none;
            cursor: pointer;
            line-height: 0;
            margin: 0 0.6em 0 0;
            outline: 0;
            padding: 0 !important;
            vertical-align: text-top;
            height: 20px;
            width: 20px;
            /* -webkit-appearance: none; */
            opacity: 0.5;
        }

        input[type="checkbox"]:hover {
            opacity: 1;
        }

        input[type="checkbox"]:checked {
            background-color: #000;
            opacity: 1;
        }

        input[type="checkbox"]:before {
            content: "";
            position: absolute;
            right: 50%;
            top: 50%;
            width: 4px;
            height: 10px;
            border: solid #fff;
            border-width: 0 2px 2px 0;
            margin: -1px -1px 0 -1px;
            transform: rotate(45deg) translate(-50%, -50%);
            z-index: 2;
        }

        /* -----------------single page css start------------------ */
          /* ------------review css------- */
       
         .stars .star{
             font-size: 28px;
             cursor: pointer;
         }

         .star {
             color: #ccc;
             display: inline-block;
             transition: color 0.3s;
             margin-right: 5px;
         }

         .star.active,
         .star:hover {
             color: rgb(110, 60, 51);
         }