.container {
    // @media(min-width:1400px){
    //     max-width:1300px;
    // }
    // @media(min-width:1599px){
    //     max-width:1380px;
    // }
    // @media(min-width:1700px){
    //     max-width:1470px;
    // }
    @media (min-width: 1200px) {
        max-width: 1650px;
        padding: 0 30px;
    }

    @include media-breakpoint-down(lg) {
        max-width: 100%;
    }
}

// Ripple Effect
.ripple-effect-dark,
.ripple-effect {
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.ripple-effect span.ripple-overlay,
.ripple-effect-dark span.ripple-overlay {
    animation: ripple 0.9s;
    border-radius: 100%;
    background: #fff;
    height: 12px;
    z-index: 0;
    position: absolute;
    width: 12px;
    line-height: 12px;
    opacity: 0.2;
    pointer-events: none;
}
.ripple-effect-dark span.ripple-overlay {
    background: #000;
    opacity: 0.07;
}

.similarProduct{
    position: fixed;bottom:0px;left:0;width:100%;
    padding:0 200px;
    // height:0px;
    bottom:-100%;
     z-index: 1001; transition: .5s;
    .overlay{
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.4);
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10;transition:.5s;
        display:none;
    } 
    &__inner{
        background-color:#fff; height: 100%;
        z-index: 20;position: relative;
        .extra-list{
            ul{
                li{
                    &:last-child{
                        display:none;
                    }
                }
            }
        }       
        header{
            padding:15px;
            display:flex;
            align-items: center;
            justify-content:space-between;
            .arrowdiv{
                display: flex;
                .btn{                   
                    border-radius: 100%;                    
                    background-color: #d5d5d5;
                    height: 30px;
                    width: 30px;
                    padding: 0;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    &:hover{
                        background-color:color(500);
                    }
                    &+.btn{
                        margin-left:10px;
                    }
                }
            }
            h2{
                font-size:22px;font-family:font(sm);margin-bottom:0px;
            }
        }
        .innersection{
            padding:20px;    padding-bottom: 0;
        }
    }
    &.active{
        // height:542px;
        bottom:0px;
        .overlay{
            display:block;
        }
    }
    @media(max-width:1399px){
     padding:0 100px;   
    }
}

.page-center ul.pagination li.active{
    color:#000;
}