.product {
    @media screen and(max-width:768px) {
        margin: 0 10px;
              padding-bottom: 0;
       
          }
    .product_content {
        padding-top: 50px;
        .sub_wrapper{
                padding-bottom: 30px;
            }
        .wrapper {
            box-shadow: 0px 15px 35px -5px rgba(50, 88, 130, 0.32);
            transition: transform 0.2s;
            height: 350px;
            padding: 10px;
            @media screen and(max-width:572px) {
                   height: 495px !important;
                   }
            @media screen and(max-width:415px) {
                   height: 400px !important;
                   }
            @media screen and(max-width:992px) {
                height: 400px;
                }
            .product_img {
                max-width: 250px;
                @media screen and(max-width:768px) {
                  max-width: 100%;
                }
                @media screen and(max-width:992px) {
                  max-width: 100%;
                }
                img {
                    width: 100%;
                }
            }
            &:hover{
                transform: scale(1.02);
                .wrapper-body{

                    -webkit-transition: all 1s ease;
                    -moz-transition: all 1s ease;
                    -o-transition: all 1s ease;
                    transition: all 1s ease-in-out;

                    a{
                      visibility:visible;
                        color:$color-black;
                        font-size: 18px;
                        font-weight: 700;
                    display: block;
                       -webkit-transition: all 1s ease;
                       -moz-transition: all 1s ease;
                       -o-transition: all 1s ease;
                       transition: all 1s ease-in-out;
                        &:hover{
                            color: $color-hover !important;
                        }
                    }
                }

                
            }

            .wrapper-body {
                a {
                   visibility: hidden
                   ;
                   font-size: 8px;
                   font-weight: 700;
                   color: $color-black;
                }
            }

            .star {
                padding-left: 0;
                display: flex;
                justify-content: center;
                margin-top: 25px;
                margin-bottom: 10px;
            

                li {
                    display: contents;
                    a {
                        padding-right: 10px;
                    }
                    img {
                        width: 20px;
                    }
                }
            }
            .price {
                text-align: center;
                font-size: 30px !important;
                font-weight: 700;
                .discount{
                font-size: 30px;
                color: $color-brand !important;
                  .oe_currency_value{
                     font-size: 30px !important;
                  }
                }
                .cross {
                    color: $color-grey;
                    font-size: 18px;
                }
            }
            a {
                text-decoration: none;
            }
            h4 {
                font-weight: 700;
                text-align: center;
                font-size: 18px;
                padding-top: 10px;
                padding-bottom: 15px;
                &:hover {
                    color: $color-hover !important;
                }
            }
        }


     

        .wrapper:hover > .wrapper-body > a {
          
        }

        @keyframes fadeInOut {
            5%,
            95% {
                opacity: 1;
                top: 50px;
            }
            15%,
            85% {
                opacity: 1;
                top: 30px;
            }
        }

        .owl-carousel {
            position: relative;
            .owl-nav {
                position: absolute;
                top: 94%;
                left: 28%;
                display: block;
                height: 17%;
                width: 42%;
                text-align: center;
                padding-top: 23px;
                @media screen and(max-width:768px) {
                   top: 100%;
                   
                      }
            }
            .owl-prev {
                color: $color-black;
                &:hover {
                    color: $color-black;

                    padding-right: 10px !important;
                }
                i {
                    font-size: 27px;
                    padding: 20px;
                }
            }
            .owl-next {
                color: $color-black;
                &:hover {
                    color: $color-black;
                    padding-left: 10px !important;
                }
                i {
                    font-size: 27px;
                }
            }
        }
    }
}
