.top-banner-sb {

    width: 100%;

    /* height: 20vh; */

    background-color: #4c96ae17;

    /* display: flex; */

    align-items: center;

    padding: 25px 10px;

    align-content: center;

}



#blog-cat-list {

    padding-left: 0;

}



#blog-cat-list li {

    font-size: 13.5px;

    list-style-type: none;

    padding: 3px 0;

    display: flex;

    justify-content: space-between;

}



.guest_form {

    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

    padding: 25px;

}



.blog-categories {

    border-left: 1px solid lightgrey;

    padding-left: 2rem;

}



.single-img-div {

    /* border: 1px solid black; */

    margin-bottom: 3rem;

    /* place-self: center; */

    width: 100%;

    padding: 0.5rem;

    overflow: none;

    text-align: center;

    /* background-color: #a52a2a0a; */

    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;



}



.single-img-div img {

    width: 100%;

    /* border-radius: 10px; */

}



#single-blog-content-ul-li {

    width: 96%;

}



#single-blog-content-ul-li ul li {

    font-weight: 600;

}



.prev-post,

.all-post,

.new-post {

    border: 1px solid lightgray;

    width: 33.33%;

    padding: 0.7rem;

    text-align: center;

}



.sb-navigation-btn {

    display: flex;

}



.left-br {

    border-radius: 10px 0 0 10px;

}



.right-br {

    border-radius: 0 10px 10px 0;

}



.leave-a-comment {

    /* border:1px solid grey; */

    width: 100%;

    margin-bottom: 4rem;

    /* height: 50vh; */

    border-radius: 5px;

    box-shadow: 1px 1px 4px lightgray;

}



.btn-custom-red {

    background-color: #2e7cff;

}



.btn-custom-red:hover {

    background-color:#0d6efd!important;

    color: #fff !important;

}



.horizontal-card-3 .col-3 img {

    width: 100%;

}



.popular-tags-div {

    border-top: 1px solid lightgrey;

    margin-top: 2rem;

    padding-top: 2rem;

}



.popular-tags-div a {

    border: 1px solid lightgray;

    border-radius: 3px;

    padding: 5px 9px;

    font-size: 12.5px;

    display: inline-block;

    margin: 4px 4px 0 0;

    font-weight: 500;

    text-decoration: none;

    color: grey;

}



#banner-right-bottom-conner {



    width: 100%;

    height: 320px;

    align-content: center;

    text-align: center;

    background-size: contain;

    background-repeat: no-repeat;

    background-image: url('https://raw.githubusercontent.com/madrasthemes/assets/master/cartzilla/blog/banner-bg.jpg');

}



.banner-outter {

    margin-top: 2rem;

    padding-top: 2rem;

    border-top: 1px solid lightgrey;

}



.admin-earth-icon img {

    width: 30px;

    height: 30px;

    border-radius: 25px;

    border: 1px solid lightgray;

    padding: 2px;

    margin-right: 0.5rem;

}



.font-size-14 {

    font-size: 13.5px;

    align-content: center;

}



/* product category page styling */



.top-banner-bg-style {

    width: 100%;

    background-color: #4c96ae17;

    padding: 25px 10px;

}



.top-lr-bg-style {

    width: 100%;

    /* height: 40vh; */

    background-color: #4c96ae17;

    padding: 1.5rem 2.5rem;

}



.viewImageSmall {

    border: 1px solid #d3d3d38c;

    /* padding: 8px; */

    margin: 5px 0;

    border-radius: 5px;

    width: 100%;



}



.viewImageFull {

    width: 100%;

}



.viewImageSmall img {

    width: 100%;

    /* transform: scale(1.2); */

}



.viewImageFull img {

    width: 100%;

    border-radius: 5px;

    padding: 10px;

    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

}



.px-42 {

    padding: 3.5rem;

}



.btn-btn-secondary {

    background-color: #d3d3d359;

    border: none;

    /* width: 48%; */

    padding: 6px 10px;

    border-radius: 6px;

}



.form-control-custom {

    width: 150px;

    padding: 9px 12px;

    border-radius: 4px;

}



.left-side-bar {

    /* max-width: 360px; */

    width: 100%;

    /* height: 100vh; */

    background-color: #fff;

    border-radius: 10px;

    /* position: absolute; */

    /* top: -8rem; */

    /* box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; */

    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;

}



.left-right-bar {

    /* max-width: 360px; */

    width: 100%;

    /* height: 100vh; */

    /* margin-top: -7rem; */

    background-color: #fff;

    border-radius: 10px;

    /* position: absolute; */

    /* top: -8rem; */

    padding: 1rem 2rem;

    /* box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; */

}



.bb {

    border-bottom: 1px solid lightgray;

}



#div_reviews_info {

    display: none;

}



#div_additional_info {

    display: none;

}



.add-to-cart-red {

    border: none;

    background-color: var(--blueish-color);

    color: white;

    width: 75%;

    padding: 11px;

    border-radius: 5px;

}



.add-to-cart-red:hover {

    background-color: #fc4143;

}



.left-side-bar-out {

    position: relative;

    /* height: 85vh; */

}



.display-grid {

    display: grid;

}



.add_to_cart form {

    display: flex;

    justify-content: space-between;

    padding: 0 8px;

}



.review_form {

    background-color: #4c96ae17;

    padding: 2.5rem 2rem;

    border-radius: 5px;

}



.dis_flex {

    display: flex;

    align-items: center;

}



.col-md-2-cu img {

    width: 100%;

    border-radius: 50px;

}



.col-md-2-cu {

    width: 60px;

}



.col-md-3-cu {

    min-width: 120px;

    margin-left: 1rem;

}



.col-md-4-cu {

    width: 60px;

    margin-left: 1rem;

}



#add_to_cart_input {

    width: 20%;

    border-radius: 5px;

    border: 1px solid lightgray

}



.review-card {

    box-shadow: 1px 1px 3px lightgray;

    margin-bottom: 10px;

    padding: 14px;

    border-radius: 5px;

}



.all_images {

    /* border: 1px solid grey; */

    width: 100%;

    /* height: 60vh; */

    display: flex;

    padding: 15px;

    justify-content: center;

    flex-wrap: wrap;

}



.plus_img {

    width: 30%;

    min-height: 250px;

    /* border: 1px solid grey; */

    /* text-align: center; */

    justify-items: center;

    position: relative;

    margin: 1rem 6px;

    display: inline-block;

}



/* .plus_img::after {

    content: "\002B";

    font-size: 40px;

    color: white;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    opacity: 0;

    transition: opacity 0.3s ease;

} */



/* .plus_img::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.5);

    opacity: 0;

    transition: opacity 0.3s ease;

}



.plus_img:hover::before,

.plus_img:hover::after {

    opacity: 1;

} */



.plus_img img {

    width: 100%;

    height: 100%;

    padding: 10px;

    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

    display: block;

    border-radius: 5px;

}



.container_for_switch_btn button {

    border: none;

    padding: 0.8rem;

    background-color: transparent;

    font-size: 15px;

    font-weight: 500;

    color: grey;

}







.filter-section {

    /* width: 250px; */

    border-radius: 3px;

    padding: 20px 12px;

}



.label13fs{

    font-size: 13px;

    /* border:1px solid lightgray */

}



.filter-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 6px 5px;

    cursor: pointer;

    border-radius: 4px;

}



.filter-header:hover {

    background-color: #eee;

}



.icon-style {

    transition: transform 0.3s ease;

}



.filter-content {

    max-height: 0;

    overflow: hidden;

    padding: 0 12px;

    transition: max-height 0.3s ease, padding 0.3s ease;

}



.filter-item.active .filter-content {

    max-height: 200px;

    padding: 6px 12px;

    border-radius: 4px;

}



.custom-checkbox {

    /* width: 20px;

    height: 20px; */

    accent-color: #007bff;

    cursor: pointer;

}



.filter-item.active .icon-style {

    transform: rotate(180deg);

}



.search-input-style {

    display: flex;

}



.search-input-s {

    width: 100%;

    border: 1px solid lightgray;

    border-right: 0;

    padding: 7px;

    border-radius: 4px 0 0 4px;

}



.attach-mgni-glass {

    padding: 7px;

    border-radius: 0 4px 4px 0;

    border: 1px solid lightgray;

    border-left: 0;

}



.filter-content ul {

    list-style-type: none;

    padding: 7px;

    margin-bottom: 4px;

}



.bdge-count-style {

    background-color: #eee;

    padding: 1px 5px;

    border-radius: 3px;

    float: inline-end;

}



.form-label-custom {

    width: 90%;

    font-size: 14px;

    font-weight: 500;

}



.top-border-addit {

    border-top: 1px solid lightgray;

    margin-top: 1rem;

    padding-top: 1rem;

}



.price-filter {

    /* min-width: 180px; */

    font-family: Arial, sans-serif;

}



.price-filter h3 {

    font-size: 18px;

    margin-bottom: 15px;

}



.slider-wrapper {

    position: relative;

    padding: 20px 0;

}



.range-slider {

    position: relative;

    height: 4px;

    background: #e5e5e5;

    border-radius: 2px;

}



.range-slider input[type="range"] {

    position: absolute;

    width: 100%;

    top: -8px;

    pointer-events: none;

    -webkit-appearance: none;

    background: none;

}



.range-slider input[type="range"]::-webkit-slider-thumb {

    pointer-events: all;

    width: 20px;

    height: 20px;

    background: #fff;

    border: 2px solid #333;

    border-radius: 50%;

    cursor: pointer;

    position: relative;

    z-index: 3;

}



.range-slider::before {

    content: "";

    position: absolute;

    height: 4px;

    background: var(--blueish-color);

    /* red track */

    top: 0;

    border-radius: 2px;

    z-index: 2;

}



.tooltips {

    position: absolute;

    width: 100%;

    display: flex;

    justify-content: space-between;

    top: -25px;

}



.tooltip {

    background: #333;

    color: #fff;

    font-size: 12px;

    padding: 4px 8px;

    border-radius: 4px;

}



.ticks {

    display: flex;

    justify-content: space-between;

    font-size: 12px;

    color: #666;

    margin-top: 8px;

}



.price-inputs {

    display: flex;

    justify-content: space-between;

    margin-top: 16px;

}



.input-box {

    display: flex;

    align-items: center;

    border: 1px solid #ccc;

    padding: 6px 8px;

    border-radius: 4px;

    width: 48%;

}



.input-box input {

    width: 100%;

    border: none;

    outline: none;

    font-size: 14px;

    text-align: center;

}



.add-active1 {

    background-color: #505661;

    border-radius: 5px;

    color: white;

}



.switch-btn-span1 {

    padding: 13px 8px 10px 6px;

    margin: 2px;

}



.switch-btn-span2 {

    padding: 13px 5px 10px 7px;

    margin: 2px;

}



.rotate-180deg {

    transform: rotate(180deg);

}





.image-out-shell-2 {

    border: 1px solid lightgray;

    padding: 3px;

    border-radius: 50px;



}



.image-out-shell-2 img {

    border-radius: 50px;

    width: 100%;

}



.user-name-img {

    padding: 1.5rem;

}



.dash-content-box {

    text-align: center;

    align-content: center;

    height: 100%;

}



.dash-content-box0 {

    text-align: center;

    height: 100%;

}



.dash-content-box2 {

    /* border: 1px solid lightgrey; */

    /* min-height: 40vh; */

    /* width: 48%; */

    /* text-align: center; */

    align-content: center;

    padding: 1.5rem;

    border-radius: 5px;

}



.dash-content-box3 {

    /* border: 1px solid lightgrey; */

    min-height: 15vh;

    padding: 1.5rem;

    border-radius: 5px;

    background-color: #e4e0ff5c;

    width: 100%;

    display: flex;

    align-items: center;

}



#change-profile-picture-btn {

    border: none;

    background-color: #fff;

    box-shadow: 2px 3px 3px lightgray;

    padding: 8px 15px 9px;

    font-size: 14px;

    border-radius: 3px;

}



#change-profile-picture-btn:hover {

    box-shadow: 1px 1px 1px lightgray;



}





.btn-red-border {

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

    background-color: transparent;

    color: var(--blueish-color);

    padding: 3px 10px 6px;

    border-radius: 4px;

    margin: 0.5rem;

}



.fs-size-35 {

    font-size: 35px;

}





.vertical-red-border {

    border: 1px solid #d3d3d340;

}



/* .container-btn-style{} */



#logo-change-pic-icon {

    width: 90px;

}



#logo-change-pic-icon img {

    width: 100%;

    border-radius: 4px;

}



.small-light-grey {

    font-size: 13px;

    font-weight: 500;

    color: grey;

}



.padding-9 {

    padding: 9px;

}



.padding-10 {

    padding: 10px;

}



.login-form-section {

    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

    padding: 25px;

}



.text-red-custom {

    color: var(--blueish-color);

    float: inline-end;

}



.submit-btn-div {

    padding-top: 1.5rem;

    text-align: end;

}



.bt-1 {

    border-top: 1px solid lightgray;

}



.text-secondary-custom {

    font-weight: 500;

    color: grey;

}



.red-star {

    color: red;

}



@media(max-width:767.8px) {

    .dash-content-box3 {

        align-items: unset;

        padding: 15px;

    }



    #logo-change-pic-icon {

        width: 55px;

    }



    .left-right-bar {

        padding: 0.8rem;

    }



    .card-custom-design {

        width: 100%;

    }



    .reverseMobile {

        flex-flow: column-reverse;

    }



    .font-size-14 {

        font-size: 11px;

        margin: 0 0 5px;

    }



    .top-banner-bg-style {

        padding: 10px;

    }



    .dash-content-box2 {

        padding: 10px;

    }



    .top-lr-bg-style {

        width: 100%;

        /* height: 40vh; */

        background-color: #4c96ae17;

        padding: 1rem;

    }

}



.blog-card img {

    height: 200px;

    object-fit: cover;

    border-bottom: 1px solid #eee;

}



.blog-card .card-body {

    padding: 15px;

}



.blog-card .card-title a:hover {

    color: #007bff;

}



.blog-slider-wrapper {

    overflow: hidden;

    position: relative;

}



.blog-slider {

    display: flex;

    transition: transform 0.5s ease-in-out;

}



.blog-slide .card-img-top {

    height: 200px;

    object-fit: cover;

    border-top-left-radius: 0.5rem;

    border-top-right-radius: 0.5rem;

}



.blog-slide {

    flex: 0 0 32%;

    /* 4 cards per view on desktop */

    padding: 0 10px;

    box-sizing: border-box;

}



@media (max-width: 992px) {

    .blog-slide {

        flex: 0 0 50%;

    }



    /* 2 per view */

}



@media (max-width: 576px) {

    .blog-slide {

        flex: 0 0 100%;

    }



    /* 1 per view */

}



.blog-prev,

.blog-next {

    /* position: absolute; */

    /* top: 40%; */

    /* transform: translateY(-50%); */

    /* z-index: 10; */

}



.blog-prev {

    /* left: 0;  */

}



.blog-next {

    /* right: 0; */

}



.single-img-div img {

    width: 100%;

    height: 400px; 

    object-fit: cover;

    border-radius: 10px; 

}



.horizontal-card-3 img {

    width: 100%;

    height: 80px; 

    object-fit: cover;

    border-radius: 6px;

}

/*------*/



.banner_main {

    padding: 200px  0;

    color: #fff;

    text-align: center;

}

/* ---------- Filter Sidebar ---------- */

.left-side-bar{

  position: sticky;

  top: 90px;              /* adjust to your header height */

}



.filter-card{

  background:#fff;

  border:1px solid #e5e7eb;

  border-radius:16px;

  box-shadow:0 8px 24px rgba(15,23,42,.06);

  overflow:hidden;

}



/* Header */

.filter-card .card-head{

  display:flex; align-items:center; justify-content:space-between;

  padding:14px 16px;

  border-bottom:1px solid #eef0f3;

  background:#f8fafc;

}

.filter-card .card-head h5{

  margin:0;

  font-size:1rem;

  font-weight:700;

  color:#0f172a;

}



/* Body container + scroll if tall */

.filter-card .card-body{

  max-height:72vh;

  overflow:auto;

  padding:12px 14px 16px;

}

.filter-card .card-body::-webkit-scrollbar{ width:8px }

.filter-card .card-body::-webkit-scrollbar-thumb{

  background:#e5e7eb; border-radius:999px;

}

.filter-card .card-body:hover::-webkit-scrollbar-thumb{ background:#cbd5e1 }



/* Collapsible groups (native <details>) */

.filter-group{

  border-bottom:1px dashed #e5e7eb;

  padding:10px 0;

}

.filter-group:last-child{ border-bottom:0 }



.filter-group summary{

  list-style:none;

  cursor:pointer;

  display:flex; align-items:center; justify-content:space-between;

  gap:10px;

  font-weight:700; color:#111827;

  padding:8px 6px;

  border-radius:10px;

}

.filter-group summary::-webkit-details-marker{ display:none }

.filter-group[open] summary{ background:#f8fafc }



/* tiny chevron */

.summary-caret{

  transition:transform .2s ease;

}

.filter-group[open] .summary-caret{

  transform:rotate(180deg);

}



/* Checkbox list */

.filter-list{ 

  display:grid; gap:8px; 

  padding:10px 6px 2px;

}



/* Custom checkbox */

.filter-check{

  display:flex; align-items:center; gap:10px;

  font-size:.95rem; color:#334155;

  cursor:pointer; user-select:none;

}

.filter-check input{

  appearance:none;

  width:18px; height:18px;

  border:1.8px solid #cbd5e1;

  border-radius:4px;

  display:inline-grid; place-content:center;

  transition:border .18s ease, background .18s ease, box-shadow .18s ease;

}

.filter-check input:focus{

  outline: none; box-shadow:0 0 0 3px rgba(59,130,246,.25);

}

.filter-check input:checked{

  background:#111827; border-color:#111827;

}

.filter-check input:checked::after{

  content:"";

  width:10px; height:10px;

  transform:scale(1);

  background:white; /* small square tick look */

  border-radius:2px;

}



/* Price inputs */

.price-row{

  display:grid; grid-template-columns:1fr 1fr; gap:10px;

  padding:8px 6px 2px;

}

.price-row .form-control{

  height:40px; border-radius:10px; border:1px solid #e5e7eb;

  transition:border .18s ease, box-shadow .18s ease;

}

.price-row .form-control:focus{

  border-color:#94a3b8; box-shadow:0 0 0 4px rgba(148,163,184,.25);

  outline: none;

}

.label13fs{ font-size:.92rem; color:#334155 }



/* Footer buttons */

.filter-actions {

    display: grid;

    gap: 10px;

    padding: 14px;

    position: sticky;

    bottom: -13px;

    left: 0;

    right: 0;

    background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 30%, #fff 100%);

}

.btn{

  display:inline-flex; align-items:center; justify-content:center;

  height:44px; border-radius:10px; border:1px solid transparent;

  font-weight:600; cursor:pointer; text-decoration:none;

}

.btn-apply{ background:#111827; color:#fff }

.btn-apply:hover{ background:#0b1220 }

.btn-reset{ background:#f8fafc; border-color:#e5e7eb; color:#0f172a }

.btn-reset:hover{ background:#eef2f7 }



/* Mobile spacing */

@media (max-width: 991px){

  .left-side-bar{ position: static; }

  .filter-card{ border-radius:14px }

}

.filter-actions button.btn.btn-apply {

    margin-top: 90px;

    background: #0b5ed7;

    color: #fff;

}

.filter-actions button.btn.btn-apply:hover{

    background: #0b5ed7 !important;

    color: #fff !important;

}

.filter-actions a.btn.btn-reset{

    width: 100%;

        background: #4c96ae;

    color: #fff;

}

.filter-actions a.btn.btn-reset:hover{

        background: #df3446 !important;

    color: #fff !important;

}