/* ---------- Blog listing ---------- */
.bl-section{ background:#fff; padding:60px 0 80px; }

.bl-list{ display:flex; flex-direction:column; gap:30px; }
.bl-card{
  overflow:hidden; border-radius:14px;
  background:#F4F5F7; border:1px solid transparent;
  transition:background .3s, border-color .3s;
}
.bl-card:hover{ background:#FFE0E5; border-color:var(--btn-color); }

.bl-img{ display:block; height:340px; overflow:hidden; }
.bl-img img{
  width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s;
}
.bl-card:hover .bl-img img{ transform:scale(1.04); }

.bl-body{ padding:22px 26px 24px; }
.bl-meta{
  display:flex;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
  margin-bottom:14px;
  font: 400 14px/1 "Inter",sans-serif;
  color:var(--txt-color);
  text-transform: capitalize;
}
.bl-meta span{ display:inline-flex; align-items:center; gap:7px; }
.bl-meta svg{ color:var(--btn-color); }

.bl-name{
  font-size: 25px;
  font-weight:600;
  line-height:1.35;
  text-transform:uppercase;
  margin:0 0 14px;
}
.bl-name a{color: #000000;text-decoration:none;transition: all ease .3s;}
.bl-name a:hover{ color:var(--btn-color); }
.bl-line{ display:block; height:1px; background:rgba(0,0,0,.12); margin-bottom:14px; }
.bl-text{
  font: 400 14px/1.7 "Inter",sans-serif;
  color:var(--txt-color);
  margin: 0 0 10px;
  display: -webkit-inline-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
}
.bl-more{
  display: block;
  align-items:center;
  /* gap:6px; */
  font: 600 13px/1 "Inter",sans-serif;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--txt-color);
  text-decoration:none;
  transition:color .3s;
}
.bl-card:hover .bl-more,
.bl-more:hover{ color:var(--btn-color); }

.bl-empty{
  text-align:center; padding:40px 0;
  font:400 14px/1.6 "Inter",sans-serif; color:var(--txt-color);
}

/* pagination */
.bl-pager{ display:flex; justify-content:center; margin-top:50px; }
.bl-pager nav{ width:100%; }
.bl-pager nav > div:last-child{ justify-content:center !important; }
.bl-pager p.small{ display:none; }
.bl-pager .pagination{ gap:10px; margin:0; justify-content:center; }
.bl-pager .page-link{
  min-width:36px; height:36px; padding:0 10px; border:0; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  background:#F1F2F4; color:var(--txt-color);
  font:500 12px/1 "Inter",sans-serif; box-shadow:none;
}
.bl-pager .page-link:hover{ background:var(--btn-color); color:var(--color2); }
.bl-pager .page-item.active .page-link{ background:var(--btn-color); color:var(--color2); }
.bl-pager .page-item.disabled .page-link{ opacity:.4; }

/* ---------- Blog sidebar ---------- */
.bs-side{ display:flex; flex-direction:column; gap:20px; }
.bs-box{background:#FFF0F2;border-radius: 4px;padding: 30px 20px;}
.bs-title{font-size: 22px;font-weight:600;color: #000000;margin:0 0 16px;}

/* search */
.bs-search{ display:flex; }
.bs-search input{
  flex:1; min-width:0; height:40px; padding:0 14px;
  border:0; border-radius:4px 0 0 4px; background:#fff; outline:0;
  font:400 12px/1 "Inter",sans-serif; color:var(--txt-color);
}
.bs-search input::placeholder{ color:var(--h-color); }
.bs-search button{
  width:44px; height:40px; border:0; border-radius:0 4px 4px 0; cursor:pointer;
  background:var(--btn-color); color:var(--color2);
  display:flex; align-items:center; justify-content:center; transition:background .3s;
}
.bs-search button:hover{ background:var(--color1); }

/* recent posts */
.bs-post{
  display:flex; gap:12px; align-items:flex-start; margin-bottom:16px;
  text-decoration:none; color:var(--txt-color);
}
.bs-post:last-child{ margin-bottom:0; }
.bs-post img{flex:0 0 56px;width: 70px;height: 60px;object-fit:cover;border-radius:4px;}
.bs-post em{
  display:flex;
  align-items:center;
  gap:5px;
  margin-bottom:6px;
  font: 500 13px/1 "Inter",sans-serif;
  font-style:normal;
  color: #000000;
  text-transform: capitalize;
}
.bs-post em svg{ color:var(--btn-color); }
.bs-post strong{font-size: 15px;font-weight: 500;line-height:1.4;color: #000000;transition: all ease .3s;display: -webkit-inline-box;-webkit-box-orient: vertical;overflow: hidden;-webkit-line-clamp: 2;}
.bs-post:hover strong{ color:var(--btn-color); }

/* categories */
.bs-cats{ list-style:none; margin:0; padding:0; }
.bs-cats li{border-bottom: 1px solid var(--btn-color);}
.bs-cats li:last-child{ border-bottom:0; }
.bs-cats a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px 0;
  font: 400 14px/1.3 "Inter",sans-serif;
  color: #000000;
  text-decoration:none;
  transition:color .3s;
}
.bs-cats a:hover{ color:var(--btn-color); }
.bs-cats svg{ flex:0 0 auto; color:var(--btn-color); }

/* gallery */
.bs-gal{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.bs-gal a{ display:block; aspect-ratio:1/1; overflow:hidden; border-radius:4px; }
.bs-gal img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s; }
.bs-gal a:hover img{ transform:scale(1.1); }

/* tags */
.bs-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.bs-tags a{
  padding:8px 12px;
  border-radius:4px;
  background:#fff;
  font: 600 13px/1 "Inter",sans-serif;
  color:var(--txt-color);
  text-decoration:none;
  transition:.3s;
}
.bs-tags a:hover{ background:var(--btn-color); color:var(--color2); }

.bv-title{
  font-size:clamp(25px,2.8vw,36px); font-weight:600; line-height:1.25;
  color:#000; margin:0 0 24px;
}

@media (min-width: 768px) and (max-width:992px){
    
    .bl-section{ padding:40px 0 60px; }
    .bl-img{height: 250px;}
    .bl-body{ padding:18px 18px 20px; }
    .bl-name{font-size:18px;margin-bottom: 10px;}
  
    .bl-name a {
        font-size: 16px;
    }
    
    .bl-meta {
        margin-bottom: 10px;
        font-size: 13px;
    }
    
    .bl-line {
        margin-bottom: 10px;
    }
    
    .bl-text {
        font-size: 13px;
        line-height: normal;
    }
    
    .bl-more {
        font-size: 12px;
    }
    
    .bs-box {
        padding: 20px 15px;
    }
    
    .bs-title {
        margin-bottom: 10px;
        font-size: 18px;
    }
    
    .bs-cats a {
        font-size: 13px;
        padding: 8px 0;
    }
    
    .bs-tags a {
        font-size: 12px;
    }
    
}

@media (max-width: 767px){
    
    .bl-meta {
        font-size: 12px;
    }
    
    .bl-text {
        font-size: 12px;
        line-height: 1.3;
    }
    
    .bl-more {
        font-size: 12px;
    }
    
    .bl-name {
        font-size: 15px;
    }
    
    .bs-box {
        padding: 20px;
    }
    
    .bs-post strong {
        font-size: 13px;
    }
    
    .bs-post em {
        font-size: 12px;
    }
    
    .bs-cats a {
        font-size: 12px;
        padding: 10px 0;
    }
    
    .bs-tags a {
        padding: 8px;
        font-size: 12px;
    }
    
    .bl-img {
        height: 200px;
    }
    
    .bl-body {
        padding: 15px;
    }
    
}


/*blog view css*/

/* ---------- Blog view ---------- */
.ib-banner .ib-title-sm{ font-size:clamp(26px,3.2vw,42px); max-width:900px; }

.bv-section{ background:#fff; padding:60px 0 30px; overflow:hidden; }
/*.bv-section .container{ max-width:1100px; }*/

.bv-hero{
  aspect-ratio:2.2/1; border-radius:14px; overflow:hidden; background:#F4F5F7;
}
.bv-hero img{ width:100%; height:100%; object-fit:cover; display:block; }

.bv-flow::after{ content:""; display:block; clear:both; }

.bv-card{
  float:right; position:relative; z-index:2;
  width:300px; margin:-290px 24px 20px 30px; padding:22px 22px 6px;
  background:#fff; border:1px solid var(--btn-color); border-radius:14px;
  box-shadow:0 10px 30px rgba(237,26,118,.12);
}
.bv-card-title{ font-size:15px; font-weight:600; color:var(--txt-color); margin:0 0 6px; }
.bv-card ul{ list-style:none; margin:0; padding:0; }
.bv-card li{
  display:flex; align-items:center; gap:12px;
  padding:13px 0; border-top:1px solid #F4C9D2;
}
.bv-ico{
  flex:0 0 32px; width:32px; height:32px; border-radius:50%;
  background:var(--btn-color); color:var(--color2);
  display:flex; align-items:center; justify-content:center;
}
.bv-card small{
  display:block; margin-bottom:3px;
  font:400 10px/1.2 "Inter",sans-serif; color:var(--txt-color);
}
.bv-card strong{
  display:block; overflow-wrap:anywhere;
  font:600 12px/1.35 "Inter",sans-serif; color:var(--txt-color);
}

.bv-content{ padding-top:28px; font:400 13px/1.9 "Inter",sans-serif; color:var(--txt-color); }
.bv-content p{ margin:0 0 18px; }
.bv-content h1,
.bv-content h2,
.bv-content h3{
  font-size:clamp(20px,2vw,24px); font-weight:600; line-height:1.3;
  color:var(--txt-color); margin:26px 0 12px;
}
.bv-content h4,
.bv-content h5,
.bv-content h6{
  font-size:clamp(18px,1.8vw,22px); font-weight:600; line-height:1.3;
  color:var(--btn-color); margin:26px 0 12px;
}
.bv-content strong{ font-weight:600; color:var(--txt-color); }
.bv-content a{ color:var(--btn-color); }
.bv-content img{ max-width:100%; height:auto; border-radius:12px; }
.bv-content table{ display:block; max-width:100%; overflow-x:auto; }
.bv-content ul,
.bv-content ol{ margin:0 0 18px; padding-left:20px; }
.bv-content ul{ list-style:none; padding-left:0; }
.bv-content ul li{ position:relative; padding-left:22px; margin-bottom:10px; }
.bv-content ul li::before{
  content:""; position:absolute; left:0; top:.65em;
  width:8px; height:8px; background:var(--btn-color); border-radius:2px;
}

.bv-content p:has(> img + img){ display:flex; gap:20px; }
.bv-content p:has(> img + img) img{
  flex:1 1 0; min-width:0; width:100%; height:240px; object-fit:cover; margin:0;
}

.bv-share{ padding:10px 0 40px; }

/* comments */
.bv-narrow{ max-width:820px; margin:0 auto; }
.bv-comments{ background:#fff; padding:10px 0 30px; }
.bv-ch{ font-size:22px; font-weight:600; color:var(--txt-color); margin:0 0 20px; }
.bv-msg{ padding:18px 22px; margin-bottom:14px; background:#F4F5F7; border-radius:12px; }
.bv-msg h4{ font-size:15px; font-weight:600; color:var(--txt-color); margin:0 0 4px; }
.bv-msg h5{ font:400 11px/1.2 "Inter",sans-serif; color:var(--txt-color); margin:0 0 10px; }
.bv-msg p{ font:400 13px/1.7 "Inter",sans-serif; color:var(--txt-color); margin:0; }

/* leave a comment */
.bv-reply{ background:#FFF8F8; padding:50px 0 70px; }
.bv-reply .bv-narrow{ padding:0 4px; }
.bv-input{
  display:block; width:100%; height:46px; padding:0 14px;
  background:#fff; border:1px solid #E6E6E6; border-radius:6px; outline:0; box-shadow:none;
  font:400 12px/1 "Inter",sans-serif; color:var(--txt-color); transition:border-color .3s;
}
.bv-input:focus{ border-color:var(--btn-color); }
.bv-input::placeholder{ color:var(--h-color); }
textarea.bv-input{ height:auto; padding:14px; line-height:1.6; resize:vertical; }
.bv-btn{
  min-width:160px; height:46px; padding:0 28px; border:0; border-radius:6px; cursor:pointer;
  background:var(--btn-color); color:var(--color2);
  font:600 12px/1 "Inter",sans-serif; letter-spacing:.04em; text-transform:uppercase;
  transition:background .3s;
}
.bv-btn:hover{ background:var(--color1); }
.bv-reply .form_message_container,
.bv-reply .form_error_container{ font:500 12px/1.5 "Inter",sans-serif; margin-bottom:10px; }

@media (max-width:991px){
    .bv-section{ padding:40px 0 20px; }
    .bv-hero{ aspect-ratio:16/9; }
    /* chhoti screen par card image ke neeche normal block */
    .bv-card{ float:none; width:auto; margin:20px 0 0; }
    .bv-content p:has(> img + img){ flex-direction:column; }
    .bv-content p:has(> img + img) img{ height:220px; }
}

@media (max-width:767px){
    
    
}


@media (min-width:768px) and (max-width:992px){
    
    .bv-card ul {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
}