.shop-sub{
    width: 84%;
    margin: auto;
    display: flex;
    gap: 30px;
}

.pegination-top{
    border: 1px solid var(--border-color);
    width: 100%;
    height: auto;
    display: flex;
    padding: 11px 10px;
    justify-content: space-between;

}
.shorting-by-menu p{

    color: var(--para-color);

    font-size: 14px;

    font-weight: 500;

    text-transform: capitalize;

    align-content: center;

}



.shorting-by-menu{

    display: flex;

    width: 50%;

    gap: 10px;

}



.shorting-by-menu select{
    border: 1px solid #EEF0F2;

    display: flex;

    padding: 15px;

    width: 55%;

    color: var(--heading-color);

    font-weight: 400;

    letter-spacing: 0.7px;

    font-size: 16px;

    outline: none;

    padding: 7px;

    text-transform: capitalize;

}





.shorting-by-menu select:focus{



    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);

    border: 1px solid rgb(13, 110, 253);





}



.sho-btn p{



    color: var(--para-color);

    font-size: 14px;

    font-weight: 500;

    text-transform: capitalize;

    align-content: center;



}



.sho-btn{

    display: flex;

    gap: 10px;

}



.sho-btn select{



    border: 1px solid #EEF0F2;

    display: flex;

    width: 73px;

    color: var(--heading-color);

    font-weight: 400;

    letter-spacing: 0.7px;

    font-size: 16px;

    outline: none;



    text-transform: capitalize;



}



.sho-btn select:focus{



    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);



    border: 1px solid rgb(13, 110, 253);



}



.shop-left-content .products{



    width: 100%; 

    gap: 20px;

}



.shop-left-content{



    width: 77%;

}



.shop-left-content .products .products-item{
        width: 223px;
        cursor: pointer;

}
.pegination-end{
    width: 100%;
}
.pegination-end-border{
   border: 0;

   border-top:1px solid;

   opacity: 0.25;

    background-color: #757575;  

    width: 100%;

    margin-top: 20px;

}



.prev-btn button{

    height: auto;

    padding: 10px;

    width: 100px;

    border: 1px solid var(--border-color);

    border-radius: 8px;

    background: none;

    cursor: pointer;

}



.prev-btn button:hover{
   background-color: #E9ECEF;

}

.prev-btn button span{
    color: var(--heading-color);

    font-size: 16px;

    font-weight: 500;

    text-transform: capitalize;

}



.prev-btn button i{
    font-size: 10px;

    color: var(--heading-color);

    padding-right: 20px;





}



.next-btn button{



    height: auto;

    padding: 10px;

    width: 100px;

    border: 1px solid var(--border-color);

    border-radius: 8px;

    background: none;

    cursor: pointer;

}



.next-btn button:hover{



    background-color: #E9ECEF;

}





.next-btn button i{



    font-size: 10px;

    color: var(--heading-color);

    padding-left: 20px;

}



.next-btn button span{



    color: var(--heading-color);

    font-size: 16px;

    font-weight: 500;

    text-transform: capitalize;



}





.pegination-direction{

    display: flex;

   margin: 15px 0;

    justify-content: space-between;

}



.pegination-number ul{



    display: flex;

    border: 1px solid var(--border-color);

    width: 100%;

    border-radius: 4px;

    cursor: pointer;

    

}



.pegination-number ul li{



    color: var(--heading-color);

    font-size: 16px;

    font-weight: 500;

    text-decoration: none;

    padding: 8px 12px;

    border-right: 1px solid var(--border-color);

    text-align: center;

}



.pegination-number ul li:focus{
    box-shadow: 0 0 0 0.25rem #AAABAD;

    border: 1px solid #212529;
}

.pegination-number ul li:first-child{
    /* background-color: #212529; */
    border-radius: 4px;
}

.pegination-number ul button{

    border-right: 1px solid var(--second-border-color);
    border-left: none;
    border-top: none;
    cursor: pointer;
    border-bottom: none;
}

.pegination-number ul button:last-child{
    border: none;
}


/* .pegination-number ul li a:first-child{



    color: white;

} */



.pegination-number ul li:hover{
    background-color: #E9ECEF;
}

.shop-right-content{
    border: 1px solid var(--second-border-color);

    width: 23%;
}



.filter-section{
    width: 100%;

    border-bottom: 1px solid var(--second-border-color);  
}



.filter-section h1{



    font-weight: 600;

    width: 90%;

    padding: 8px 0;

    margin: auto;

    font-size: 20px;

    text-transform: capitalize;

    letter-spacing: 0.7px;

    color: var(--heading-color);

}



.shop-categories-section {



    width: 90%;

    margin: auto;

    border-bottom: 1px solid var(--second-border-color);

    padding: 8px 0 10px 0;

}



.shop-categories-section h1{



    color: var(--heading-color);

    font-weight: 600;

    text-transform: capitalize;

    letter-spacing: 0.7px;

    font-size: 16px;

    padding: 5px 5px;

    background-color: rgba(248, 249, 250, 1);

}



.checkboxes p{



    font-size: 14px;

    font-weight: 500;

    color: var(--para-color);

    letter-spacing: 0.7px;

    line-height: 27px;

}



.checkboxes p input[type="checkbox"]{



    height: 14px;

    width: 35px;

    border: 1px solid var(--para-color);

    border-radius: 4px;



}



.checkboxes p input[type="checkbox"]:focus{



    box-shadow: 0 0 0 .25rem rgba(0, 0, 255, 0.25);



}



.checkboxes{



    padding: 15px 0;

    height: 290px;

    overflow-y: scroll;

    /* border-bottom: 1px solid var(--second-border-color);  */

}



.price-section{



     width: 90%;

    margin: auto;

    border-bottom: 1px solid var(--second-border-color);

    padding: 8px 0 10px 0;

}



.price-section h1{



    color: var(--heading-color);

    font-weight: 600;

    text-transform: capitalize;

    letter-spacing: 0.7px;

    font-size: 16px;

    padding: 5px 5px;

    background-color: rgba(248, 249, 250, 1);

}

.activebtn{
    background: var(--heading-color);
    color: #ffff;
}
.activebtn:focus{
    background: var(--heading-color);
    color: #ffff;
}
.discount-rate-main{



    width: 100%;

    display: flex;

     gap: 10px;

    margin: 10px 0 0 0;

}



.increase-decrease{

    width: 77%;

    display: flex;

    padding: 5px 0;

    justify-content: space-between;

}



.increase-price{



    border: 1px solid var(--second-border-color);

    width: 223px;

    padding: 10px;

    text-align: center;

    color: var(--second-border-color);





}



.hyphen{



    text-align: center;

    width: 90px;

    align-content: center;

    background-color: var(--second-border-color);

}



.decrease-price{

    border: 1px solid #E6E9EC;

    width: 200px;

    color: var(--second-border-color);

    padding: 10px;
}



.ins-arrow-sign{



    width: 200px;

    padding: 5px 0;

    border: 1px solid;

    align-content: center;

    text-align: center;

    margin: 5px 0;

}

.ins-arrow-sign i{
    font-size: 10px;
}
.shop-categories-section:last-child{
    border-bottom: none;
}

.wishlistbtn i.wishlist-active {
    background-color: #FF3F6C;
}

@media(max-width:320px){
    .shop-right-content{
        display: none;
    }

    .products{
    display: flex;
    flex-wrap: wrap;
    }

    .shop-left-content .products .products-item{
        width: 45%;
    }
     .shop-sub{
        display: block;
        width: 93%;
     }
     .shop-left-content{
        width: 100%;
     }
     .wear-type h2{
        font-weight: 500;
     }

     .shop-left-content .products{
        /* gap: 18px; */
        justify-content: space-evenly;
    }
}

@media(max-width:577px){      
    .shop-left-content .products .products-item{
        width: 47%;
    }

       .shop-right-content{
        display: none;
    }

    .products{
    display: flex;
    flex-wrap: wrap;
    }
     .shop-sub{
        display: block;
        width: 93%;
     }
     .shop-left-content{
        width: 100%;
     }
     .wear-type h2{
        font-weight: 500;
     }

     .shop-left-content .products{
        /* gap: 18px; */
        justify-content: space-evenly;
    }
}
@media(min-width:578px) and (max-width:768px){

    .shop-right-content{
        display: none;
    }

    .products{
    display: flex;
    flex-wrap: wrap;
    }

    .shop-left-content .products .products-item{
        width: 48%;
    }
     .shop-sub{
        display: block;
        width: 80%;
     }
     .shop-left-content{
        width: 100%;
     }
     .wear-type h2{
        font-weight: 500;
     }

     .shop-left-content .products{
        gap: 18px;
     }
}


@media(min-width:769px) and (max-width:1024px){
        .shop-right-content{
        display: none;
    }
        .products{
    display: flex;
    flex-wrap: wrap;
    }

    .shop-left-content .products .products-item{
        width: 31%;
    }
     .shop-sub{
        display: block;
        width: 75%;
     }
     .shop-left-content{
        width: 100%;
     }
     .wear-type h2{
        font-weight: 500;
     }

     .shop-left-content .products{
        gap: 23px;
     }
     
}