/* new css add section start */
.middle-sect{ width:1170px; margin:0 auto;}
.filt-sect{border:1px solid #ebebeb; padding:15px; float:left; width:26%;}
.rgt-lst{float:right; width:74%; padding-left:25px;}
.rgt-lst h1{ font-weight:400; color:rgba(44,44,44,1) !important; font-size:28px !important;}
.filt-hd{width:100%; height:auto; display:block;}
.filt-hd span:nth-child(1){ float:left; font-size:16px; font-weight:600; color:#525252; text-transform:uppercase; }
.filt-hd span:nth-child(2){ float:right; font-size:14px; font-weight:500; margin-top:5px}
.filt-hd span:nth-child(2) a{ background:#fcca19; padding:3px 10px; border-radius:5px; color:#000;}

.filt_bar{ display:none; width:100%; font-size:18px; color:#000; font-weight:600; margin-top:0px; cursor:pointer; background:#efefef; padding:12px; text-transform:uppercase}
.filt_bar img{ float:right; margin-top:3px;}

.filt_area{ width:100%; margin-top:22px;}

.subcate_filt a{padding:3px 5px 3px 20px;display:block;position:relative; background:url(../images/caret.svg) left center no-repeat; color:#525252; font-weight:400; font-size:15px;}
.subcate_filt a:hover{color:#000}

.filt_color{width:15px;height:15px;border-radius:100%; display:block; float:left; margin-right:5px;border:#ddd 1px solid}.sorting{float:right;margin-top:-45px}
.filt_title{font-size:14px;background:#efefef;padding:6px 10px; color:#000; font-weight:500; color:rgba(44,44,44,1) !important;}
#style-10::-webkit-scrollbar-track{	}
#style-10::-webkit-scrollbar{width: 5px}
#style-10::-webkit-scrollbar-thumb{ background:#000}

.style-10::-webkit-scrollbar-track{	}
.style-10::-webkit-scrollbar{width: 5px}
.style-10::-webkit-scrollbar-thumb{ background:#000}
.scrollbar{ width:100%;	max-height:193px; overflow-y:scroll; margin-top:10px; overflow:auto; line-height:12px}
.cust_check { display: block; position: relative; padding-left: 21px; margin-bottom:15px; padding-top:2px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none}
.cust_check input { position: absolute; opacity: 0; cursor: pointer}
.checkmark { position: absolute; top: 0; left: 0; height: 17px; width: 17px; background-color: #fff; border:#ddd 1px solid}
.cust_check:hover input ~ .checkmark { background-color: #fff; border:#ccc 1px solid}
.cust_check input:checked ~ .checkmark { background-color: #fff; border:#ccc 1px solid}
.checkmark:after { content: ""; position: absolute; display: none}
.cust_check input:checked ~ .checkmark:after { display: block}
.cust_check .checkmark:after { left: 5px; top: 2px; width: 5px; height: 10px; border: solid #4bd1f9; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg)}

.list_tabs.list_act{background:url(../images/arw_rgt.svg) right no-repeat; color:#124f98;padding-right:15px}.list_tabs:hover{color:#124f98}
.filter_box .btn-sm{ padding:0.3em 0.6em; line-height:1.1em}
.filt_opt label{ font-size:15px; font-weight:400; color:#525252;}

.filt-pin{width:100%;}
.filt-pin label{float:left; width:50%;}
.filt-pin label input[type=text]{width:60%; margin-left:7px; height:29px; border:1px solid #e7e7e7;}
.filt-pin input[type=submit]{ width:100%; text-align:center; color:#000; margin-top:10px; padding:6px 0px; text-transform:uppercase; font-weight:600; background:#fcca19; cursor:pointer}
/* filter css add section end */


.prd-lst{width:100%; margin-top:35px;}
.prd-lst ul{margin:0 !important; padding:0 !important;}
.prd-lst ul li{width:33.333%; float:left; position:relative; display:inline-block; margin-bottom:13px; list-style:none;}
.pd-lst-area{width:265px; height:380px; margin:0 auto; border:1px solid #dfdfdf; border-radius:10px; overflow:hidden}
.pd-lst-bx{width:265px; height:193px; margin:0 auto; background:#ccc; overflow:hidden}
.pd-lst-bx figure{width:265px; height:193px; vertical-align:middle; display:table-cell; text-align:center}
.pd-lst-bx figure img{ display:block; max-width:100%; transition:all ease-in-out 0.5s;}
.pd-lst-bx figure img:hover{ transform:scale(1.1)}

.pd-lst-inn{width:265px; height:193px; position:relative; margin:0 auto; overflow:hidden}

.pd-lft-abs{position:absolute; left:10px; top:12px; z-index:9; transition:all linear 0.5s;}
.pd-lft-abs span{display:block; padding:2px 5px; text-align:center; color:#000; font-weight:500; font-size:11px; background:#fcca19; margin-bottom:5px; border-radius:3px;}

.pd-rgt-abs{position:absolute; right:15px; top:12px; z-index:9; opacity:0; transition:all linear 0.5s;}
.pd-rgt-abs a{width:30px; height:30px; display:block; background:#fff; text-align:center; 
border-radius:50%; border:1px solid #ccc; padding:1px 3px; margin-bottom:5px;}
.pd-rgt-abs a:hover{background:#fcca19;}

.quck-vew{position:absolute;  bottom:0; left:0; right:0; margin:auto; opacity:0; transition:all linear 0.5s;}
.quck-vew a{color:#000; background:#fcca19; font-size:15px; padding:5px 0px; font-weight:500; width:100%; text-align:center; display:block}
.quck-vew a:hover{ background:#000; color:#fff;}

.pd-lst-area:hover .quck-vew,.pd-lst-area:hover .pd-rgt-abs{opacity:1;}


.pd-cnt-txt{width:100%; padding:15px; text-align:center;}
.pd-hd{font-size:15px; color:rgba(151, 151, 151); font-weight:500; height:36px; line-height:17px; overflow:hidden;}
.pd-txt{font-size:16px; font-weight:500; color:rgba(44,44,44,1); height:40px; line-height:19px; overflow:hidden;}
.pd-prc{text-align:center; color:#000; font-size:18px; font-weight:500; margin-top:12px;}
.pd-prc del{color:#959595; font-weight:400}
.revw{ width:100%; display:inline-block; text-align:center;}
.revw span:nth-child(1){display:inline-block}
.revw span:nth-child(1) img{display:inline-block}
.revw span:nth-child(2){font-size:15px; color:#837f7f; margin-left:8px;}
/* right product section end */



.pagination-wrap{display:flex; justify-content:center; padding:16px 0;}
.pagination{list-style:none; display:flex; gap:10px; padding:0; margin:0; flex-wrap:wrap;}
.page-link{display:inline-flex; align-items:center; justify-content:center; min-width:42px;  height:42px; padding:0 14px; border-radius:12px; border:1px solid #e6e8ee; background:#fff;  color:#1f2937; text-decoration:none; font:600 14px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease; user-select:none;}
.page-link:hover{background:#f7f8fb; border-color:#d7dbe6; box-shadow:0 6px 18px rgba(16,24,40,.08); transform:translateY(-1px);}
.page-item.active .page-link{background:#111827; border-color:#111827; color:#fff; box-shadow:0 10px 25px rgba(17,24,39,.22);}
.page-item.disabled .page-link{opacity:.45; pointer-events:none; box-shadow:none; transform:none;}
.page-item.dots .page-link{border-color:transparent; background:transparent; box-shadow:none;min-width:30px; padding:0 6px; cursor:default;}
.page-link:focus-visible{outline:3px solid rgba(59,130,246,.35); outline-offset:2px;}

.lst-cnt{ width:100%; height:auto; border:1px solid #efefef; font-size:16px; font-weight:500; color:#000; padding:12px; line-height:21px; margin-top:20px;}

/* ================= Desktop/Laptop below 1152px  ================= */
@media only screen and (max-width:1151px){
.middle-sect{ width:100%;}	
.filt-sect{width:26%;}	
	
.pd-lst-area{width:220px; height:340px;}
.pd-lst-bx{width:220px; height:160px;}
.pd-lst-bx figure{width:220px; height:160px;}
.pd-lst-inn{width:220px; height:160px;}
}


/* ================= Tablet (Portrait) 768px - 959px ================= */
@media only screen and (max-width: 991px){
.filt-hd{display:none}
.filt_bar{display:block}
.tab_hid{display:none}
.filt-sect {width: 100%;}
.rgt-lst{float:none; width:100%; padding-left:0px;}
}


/* ======== Mobile (Landscape) 480px - 767px ====== */
@media only screen and (max-width:767px) {
.prd-lst ul li{ width:33.333%;}
.pd-lst-area{width:205px; height:325px;}
.pd-lst-bx{width:205px; height:149px;}
.pd-lst-bx figure{width:205px; height:149px;}
.pd-lst-inn{width:205px; height:149px;}
.pd-txt{font-size:18px;}
}


/* ======== Mobile (Portrait) below 480px =========== */
@media only screen and (max-width:479px) {
.prd-lst ul li{ width:100%;}	
}