/* ==========================================
   Page Header (phdr) — START
   Reusable page banner — visually matches .bhdr
   ========================================== */

.phdr{
  --phdr-brand:      var(--brand, #7BE04F);
  --phdr-brand-2:    var(--brand-2, #87E64B);
  --phdr-brand-deep: #2F7A19;
  --phdr-ink:        var(--ink, #0B0D0C);
  --phdr-transition: .28s cubic-bezier(.4, 0, .2, 1);

  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 380px;
  padding: 130px 0 84px;
  text-align: center;
  background: linear-gradient(158deg, var(--phdr-brand) 0%, var(--phdr-brand-2) 58%, var(--phdr-brand-deep) 100%);
}

.phdr__bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .18;
  mix-blend-mode: luminosity;
}

.phdr__deco{ position: absolute; inset: 0; pointer-events: none; }

.phdr__ring{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .04);
}
.phdr__ring--1{ width: 360px;  height: 360px;  bottom: -14%; }
.phdr__ring--2{ width: 620px;  height: 620px;  bottom: -26%; }
.phdr__ring--3{ width: 920px;  height: 920px;  bottom: -40%; }

.phdr__orb{
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #fff 0%, #f2fbee 34%, #cfeec2 62%, #a9dc97 100%);
  box-shadow:
    inset -14px -18px 34px rgba(47, 122, 25, .28),
    inset 12px 14px 26px rgba(255, 255, 255, .85),
    0 18px 44px rgba(20, 60, 10, .18);
}
.phdr__orb--l{ width: 150px; height: 150px; top: 16%; left: -68px; }
.phdr__orb--r{ width: 200px; height: 200px; bottom: -12%; right: -78px; }

.phdr__dot{
  position: absolute;
  top: 24%;
  right: 16%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .38);
}

.phdr__inner{ position: relative; z-index: 2; }

.phdr__eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: var(--pill, 999px);
  background: rgba(255, 255, 255, .22);
  border: 1px solid rgba(255, 255, 255, .3);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--phdr-ink);
  margin-bottom: 18px;
}
.phdr__eyebrow i{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--phdr-ink);
}

.phdr__title{
  margin: 0 0 14px;
  font-size: clamp(34px, 5.5vw, 60px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.035em;
  color: var(--phdr-ink);
}

.phdr__crumbs{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  font-weight: 700;
}
.phdr__crumbs a{
  color: var(--phdr-ink);
  opacity: .74;
  text-decoration: none;
  transition: opacity var(--phdr-transition);
}
.phdr__crumbs a:hover{ opacity: 1; }
.phdr__sep{ color: var(--phdr-ink); opacity: .4; }
.phdr__current{ color: #fff; text-shadow: 0 1px 8px rgba(20, 60, 10, .25); }

@media (max-width: 991px){
  .phdr{ min-height: 300px; padding: 110px 0 68px; }
  .phdr__orb--l{ width: 120px; height: 120px; left: -56px; }
  .phdr__orb--r{ width: 156px; height: 156px; right: -62px; }
}

@media (max-width: 640px){
  .phdr{ min-height: 240px; padding: 92px 0 52px; }
  .phdr__ring--3{ display: none; }
  .phdr__orb--l{ width: 90px; height: 90px; left: -42px; }
  .phdr__orb--r{ width: 112px; height: 112px; right: -46px; }
  .phdr__crumbs{ font-size: 13px; }
}

@media (max-width: 380px){
  .phdr__crumbs{ font-size: 12.5px; }
}

/* ==========================================
   Page Header (phdr) — END
   ========================================== */

/* ==========================================
   Blog Page Header (bhdr) — START
   (moved from blog_detail_content.php)
   ========================================== */

.bhdr{
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 380px;
  padding: 130px 0 84px;
  text-align: center;
  background: linear-gradient(158deg, var(--bd-brand) 0%, var(--bd-brand-2) 58%, var(--bd-brand-deep) 100%);
}

.bhdr__bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .18;
  mix-blend-mode: luminosity;
}

.bhdr__deco{ position: absolute; inset: 0; pointer-events: none; }

.bhdr__ring{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .04);
}
.bhdr__ring--1{ width: 360px;  height: 360px;  bottom: -14%; }
.bhdr__ring--2{ width: 620px;  height: 620px;  bottom: -26%; }
.bhdr__ring--3{ width: 920px;  height: 920px;  bottom: -40%; }

.bhdr__orb{
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #fff 0%, #f2fbee 34%, #cfeec2 62%, #a9dc97 100%);
  box-shadow:
    inset -14px -18px 34px rgba(47, 122, 25, .28),
    inset 12px 14px 26px rgba(255, 255, 255, .85),
    0 18px 44px rgba(20, 60, 10, .18);
}
.bhdr__orb--l{ width: 150px; height: 150px; top: 16%; left: -68px; }
.bhdr__orb--r{ width: 200px; height: 200px; bottom: -12%; right: -78px; }

.bhdr__inner{ position: relative; z-index: 2; }

.bhdr__eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: var(--pill, 999px);
  background: rgba(255, 255, 255, .22);
  border: 1px solid rgba(255, 255, 255, .3);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bd-ink);
  margin-bottom: 18px;
}
.bhdr__eyebrow i{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bd-ink);
}

.bhdr__title{
  margin: 0 0 14px;
  font-size: clamp(34px, 5.5vw, 60px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.035em;
  color: var(--bd-ink);
}

.bhdr__crumbs{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  font-weight: 700;
}
.bhdr__crumbs a{
  color: var(--bd-ink);
  opacity: .74;
  text-decoration: none;
  transition: opacity var(--bd-transition);
}
.bhdr__crumbs a:hover{ opacity: 1; }
.bhdr__sep{ color: var(--bd-ink); opacity: .4; }
.bhdr__current{ color: #fff; text-shadow: 0 1px 8px rgba(20, 60, 10, .25); }

@media (max-width: 991px){
  .bhdr{ min-height: 300px; padding: 110px 0 68px; }
  .bhdr__orb--l{ width: 120px; height: 120px; left: -56px; }
  .bhdr__orb--r{ width: 156px; height: 156px; right: -62px; }
}

@media (max-width: 640px){
  .bhdr{ min-height: 240px; padding: 92px 0 52px; }
  .bhdr__ring--3{ display: none; }
  .bhdr__orb--l{ width: 90px; height: 90px; left: -42px; }
  .bhdr__orb--r{ width: 112px; height: 112px; right: -46px; }
  .bhdr__crumbs{ font-size: 13px; }
}

/* ==========================================
   Blog Page Header (bhdr) — END
   ========================================== */

/* ==========================================
   Blog Listing Styles - START
   Prefix: blgl-
   (moved from blog_content.php)
   ========================================== */

.blgl{
  --blgl-brand:      var(--brand, #7BE04F);
  --blgl-brand-2:    var(--brand-2, #87E64B);
  --blgl-brand-deep: #2F7A19;
  --blgl-brand-soft: #EEF9E9;
  --blgl-ink:        var(--ink, #0B0D0C);
  --blgl-muted:      var(--muted, #6B736E);
  --blgl-line:       var(--line, #E6EAE7);
  --blgl-surface:    var(--surface, #F4F6F3);
  --blgl-radius:     20px;
  --blgl-pill:       999px;
  --blgl-shadow:     0 4px 20px rgba(11, 13, 12, .05);
  --blgl-lift:       6px;
  --blgl-gap:        26px;
  --blgl-ease:       .3s cubic-bezier(.4, 0, .2, 1);

  padding: 80px 0;
}

/* ==========================================
   Head
   ========================================== */
.blgl__head{
  max-width: 46rem;
  margin: 0 0 48px;
}

.blgl__eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--blgl-muted);
  margin-bottom: 14px;
}
.blgl__eyebrow i{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blgl-brand-2);
}

.blgl__heading{
  margin: 0 0 14px;
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.035em;
  color: var(--blgl-ink);
}
.blgl__hl{
  position: relative;
  color: var(--blgl-brand-deep);
}
.blgl__hl::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: .08em;
  height: .26em;
  border-radius: 4px;
  background: var(--blgl-brand);
  opacity: .32;
  z-index: -1;
}

.blgl__intro{
  margin: 0;
  max-width: 52ch;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--blgl-muted);
}

/* ==========================================
   Grid
   ========================================== */
.blgl__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--blgl-gap);
}

/* reveal on scroll */
[data-blgl-reveal]{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s var(--blgl-ease), transform .65s var(--blgl-ease);
}
[data-blgl-reveal].is-in{ opacity: 1; transform: none; }

/* ==========================================
   Card
   ========================================== */
.blgl-card{
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--blgl-line);
  border-radius: var(--blgl-radius);
  box-shadow: var(--blgl-shadow);
  overflow: hidden;
  transition: transform var(--blgl-ease),
              box-shadow var(--blgl-ease),
              border-color var(--blgl-ease),
              opacity .65s var(--blgl-ease);
}

.blgl-card:hover,
.blgl-card:focus-within{
  transform: translateY(calc(var(--blgl-lift) * -1));
  border-color: var(--blgl-brand-2);
  box-shadow:
    0 0 0 1px var(--blgl-brand-2),
    0 20px 44px rgba(95, 201, 58, .18);
}

/* full-card click target */
.blgl-card__hit{
  position: absolute;
  inset: 0;
  z-index: 3;
}

/* ---------- media ---------- */
.blgl-card__media{
  position: relative;
  overflow: hidden;
  background: var(--blgl-surface);
}
.blgl-card__media img{
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  color: transparent;
  font-size: 0;
  transition: transform .7s var(--blgl-ease);
}
.blgl-card:hover .blgl-card__media img{
  transform: scale(1.06);
}

.blgl-card__cat{
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  padding: 6px 14px;
  border-radius: var(--blgl-pill);
  background: var(--blgl-brand);
  font-size: 12px;
  font-weight: 700;
  color: var(--blgl-ink);
  box-shadow: 0 4px 14px rgba(20, 60, 10, .18);
}

/* ---------- body ---------- */
.blgl-card__body{
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px 24px 26px;
}

.blgl-card__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 14px;
}
.blgl-card__meta span{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--blgl-muted);
}
.blgl-card__meta i{ font-size: 13px; }

.blgl-card__title{
  margin: 0 0 12px;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.36;
  letter-spacing: -.018em;
  color: var(--blgl-ink);
  transition: color var(--blgl-ease);

  /* 3 lines max — cards even rahen */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.6em;
}
.blgl-card:hover .blgl-card__title{
  color: var(--blgl-brand-deep);
}

.blgl-card__excerpt{
  margin: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--blgl-muted);

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blgl-card__more{
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--blgl-brand-deep);
  transition: gap var(--blgl-ease);
}
.blgl-card:hover .blgl-card__more{ gap: 12px; }

/* ==========================================
   Load More - START
   ========================================== */

/* chhupe cards — grid se bahar */
.blgl-card.is-hidden{
  display: none;
}

/* naye cards ka entrance */
.blgl-card.is-revealed{
  animation: blglPop .55s var(--blgl-ease) both;
}
@keyframes blglPop{
  from{ opacity: 0; transform: translateY(24px); }
  to  { opacity: 1; transform: none; }
}

.blgl__more{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 48px;
}

.blgl__more-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  border: 1px solid var(--blgl-line);
  border-radius: var(--blgl-pill);
  background: #fff;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--blgl-ink);
  cursor: pointer;
  box-shadow: var(--blgl-shadow);
  transition: background var(--blgl-ease),
              border-color var(--blgl-ease),
              transform var(--blgl-ease),
              box-shadow var(--blgl-ease);
}
.blgl__more-btn:hover{
  background: var(--blgl-brand);
  border-color: var(--blgl-brand);
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(95, 201, 58, .24);
}
.blgl__more-btn i{
  font-size: 15px;
  transition: transform var(--blgl-ease);
}
.blgl__more-btn:hover i{ transform: translateY(3px); }

.blgl__more-btn:disabled{
  opacity: .5;
  cursor: default;
  transform: none;
  box-shadow: var(--blgl-shadow);
}
.blgl__more-btn:disabled:hover{
  background: #fff;
  border-color: var(--blgl-line);
}

.blgl__count{
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--blgl-muted);
}
.blgl__count b{
  color: var(--blgl-ink);
  font-weight: 700;
}

@media (max-width: 700px){
  .blgl__more{ margin-top: 34px; }
  .blgl__more-btn{
    width: 100%;
    justify-content: center;
    padding: 13px 24px;
  }
}

@media (prefers-reduced-motion: reduce){
  .blgl-card.is-revealed{ animation: none; }
  .blgl__more-btn{ transition: none; }
  .blgl__more-btn:hover{ transform: none; }
}

/* ==========================================
   Load More - END
   ========================================== */

/* ---------- corner arrow ---------- */
.blgl-card__go{
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--blgl-ink);
  font-size: 15px;
  opacity: 0;
  transform: scale(.8);
  transition: opacity var(--blgl-ease),
              transform var(--blgl-ease),
              background var(--blgl-ease);
}
.blgl-card:hover .blgl-card__go{
  opacity: 1;
  transform: scale(1) rotate(45deg);
  background: var(--blgl-brand);
}

/* ==========================================
   Pager
   ========================================== */
.blgl__pager{
  display: flex;
  justify-content: center;
  margin-top: 52px;
}
.blgl__pager ul{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.blgl__pager a,
.blgl__pager span{
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--blgl-line);
  border-radius: var(--blgl-pill);
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  color: var(--blgl-ink);
  text-decoration: none;
  transition: all var(--blgl-ease);
}
.blgl__pager a:hover{
  background: var(--blgl-brand);
  border-color: var(--blgl-brand);
}
.blgl__pager .active span,
.blgl__pager li.active a{
  background: var(--blgl-brand-2);
  border-color: var(--blgl-brand-2);
  color: #fff;
}
.blgl__pager .disabled span{
  opacity: .4;
  cursor: default;
}

/* ==========================================
   Empty state
   ========================================== */
.blgl__empty{
  max-width: 32rem;
  margin: 0 auto;
  padding: 60px 30px;
  text-align: center;
  border: 1px dashed var(--blgl-line);
  border-radius: var(--blgl-radius);
  background: var(--blgl-surface);
}
.blgl__empty-icon{
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 20px;
  border-radius: 18px;
  background: var(--blgl-brand-soft);
  color: var(--blgl-brand-deep);
  font-size: 26px;
}
.blgl__empty h2{
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--blgl-ink);
}
.blgl__empty p{
  margin: 0 auto 24px;
  max-width: 36ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--blgl-muted);
}
.blgl__empty-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: var(--blgl-pill);
  background: var(--blgl-ink);
  font-size: 14.5px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  transition: gap var(--blgl-ease), box-shadow var(--blgl-ease);
}
.blgl__empty-btn:hover{
  gap: 12px;
  box-shadow: 0 10px 26px rgba(11, 13, 12, .22);
}

/* ==========================================
   Responsive
   ========================================== */

@media (max-width: 1100px){
  .blgl__grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px){
  .blgl{ padding: 58px 0; }
  .blgl__head{ margin-bottom: 38px; }
}

@media (max-width: 700px){
  .blgl{ --blgl-gap: 18px; padding: 44px 0; }
  .blgl__grid{ grid-template-columns: 1fr; }

  .blgl__head{ margin-bottom: 30px; }
  .blgl__intro{ font-size: 15.5px; }

  .blgl-card__body{ padding: 20px 20px 22px; }
  .blgl-card__title{
    font-size: 17.5px;
    min-height: 0;
    -webkit-line-clamp: 4;
  }
  .blgl-card__media img{ aspect-ratio: 16 / 9; }

  /* mobile par arrow hamesha visible */
  .blgl-card__go{
    opacity: 1;
    transform: scale(1);
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, .9);
  }
  .blgl-card:hover .blgl-card__go{ transform: scale(1); }
  .blgl-card:hover{ transform: none; }

  .blgl__pager{ margin-top: 36px; }
  .blgl__pager a,
  .blgl__pager span{ min-width: 38px; height: 38px; font-size: 13.5px; }
}

@media (max-width: 380px){
  .blgl-card__cat{ font-size: 11.5px; padding: 5px 12px; }
  .blgl-card__excerpt{ font-size: 14px; }
  .blgl__empty{ padding: 44px 20px; }
}

@media (prefers-reduced-motion: reduce){
  [data-blgl-reveal]{ opacity: 1; transform: none; transition: none; }
  .blgl-card,
  .blgl-card__media img,
  .blgl-card__go{ transition: none; }
  .blgl-card:hover{ transform: none; }
  .blgl-card:hover .blgl-card__media img{ transform: none; }
}

/* ==========================================
   Blog Listing Styles - END
   ========================================== */

/* ==========================================
   Blog Detail Page Styles - START
   Prefixes: bd- / bdet- / bsd-
   (moved from blog_detail_content.php)
   ========================================== */

:root{
  --bd-brand:      var(--brand, #7BE04F);
  --bd-brand-2:    var(--brand-2, #92c94b);
  --bd-brand-deep: #2F7A19;
  --bd-brand-soft: #EEF9E9;
  --bd-ink:        var(--ink, #0B0D0C);
  --bd-muted:      var(--muted, #6B736E);
  --bd-line:       var(--line, #E6EAE7);
  --bd-surface:    var(--surface, #F4F6F3);
  --bd-radius:     18px;
  --bd-radius-sm:  12px;
  --bd-shadow:     0 4px 20px rgba(11, 13, 12, .05);
  --bd-shadow-lg:  0 20px 48px rgba(11, 13, 12, .09);
  --bd-transition: .28s cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================
   Layout
   ========================================== */

.bdet__grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 44px;
  align-items: start;
}

/* ==========================================
   Main article
   ========================================== */
.bdet__hero{
  margin: 0 0 30px;
  border-radius: var(--bd-radius);
  overflow: hidden;
  border: 1px solid var(--bd-line);
  box-shadow: var(--bd-shadow);
}
.bdet__hero img{
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  background: var(--bd-surface);
}

.bdet__head{
  position: relative;
  padding-bottom: 26px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--bd-line);
}

.bdet__meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 16px;
}
.bdet__cat{
  padding: 6px 15px;
  border-radius: var(--pill, 999px);
  background: var(--bd-brand);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--bd-ink);
}
.bdet__date{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--bd-muted);
}

.bdet__title{
  margin: 0 0 20px;
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.028em;
  color: var(--bd-ink);
}
.bdet__title br{ display: none; }

.bdet__share{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border: 1px solid var(--bd-line);
  border-radius: var(--pill, 999px);
  background: #fff;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--bd-ink);
  cursor: pointer;
  transition: background var(--bd-transition),
              border-color var(--bd-transition),
              transform var(--bd-transition);
}
.bdet__share:hover{
  background: var(--bd-brand);
  border-color: var(--bd-brand);
  transform: translateY(-2px);
}
.bdet__share.is-copied{
  background: var(--bd-brand-soft);
  border-color: var(--bd-brand-2);
}

/* ---------- body prose ---------- */
.bdet__body{
  font-size: 16.5px;
  line-height: 1.78;
  color: var(--bd-muted);
}
.bdet__body p{ margin: 0 0 22px; }

.bdet__lede{
  font-size: 18px;
  line-height: 1.72;
  color: var(--bd-ink);
  font-weight: 500;
}

.bdet__body h3{
  margin: 40px 0 16px;
  font-size: clamp(21px, 2.4vw, 27px);
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -.02em;
  color: var(--bd-ink);
}
.bdet__body h3:first-child{ margin-top: 0; }

.bdet__body a{
  color: var(--bd-brand-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bdet__body img{
  max-width: 100%;
  height: auto;
  border-radius: var(--bd-radius-sm);
  margin: 12px 0 24px;
}

/* ---------- feature cards ---------- */
.bdet__features{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 34px 0;
}
.bdet-feat{
  padding: 26px 24px;
  border: 1px solid var(--bd-line);
  border-radius: var(--bd-radius);
  background: #fff;
  box-shadow: var(--bd-shadow);
  transition: transform var(--bd-transition),
              box-shadow var(--bd-transition),
              border-color var(--bd-transition);
}
.bdet-feat:hover{
  transform: translateY(-5px);
  border-color: var(--bd-brand-2);
  box-shadow: 0 0 0 1px var(--bd-brand-2), 0 18px 40px rgba(95, 201, 58, .16);
}
.bdet-feat__icon{
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: var(--bd-brand-soft);
  color: var(--bd-brand-deep);
  font-size: 22px;
}
.bdet-feat h4{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--bd-ink);
}
.bdet-feat__text{ font-size: 15px; line-height: 1.68; }
.bdet-feat__text p{ margin: 0; }

/* ---------- pull quote ---------- */
.bdet__quote{
  position: relative;
  margin: 38px 0;
  padding: 34px 34px 34px 88px;
  border-radius: var(--bd-radius);
  background: linear-gradient(140deg, var(--bd-brand-soft), #fff);
  border: 1px solid var(--bd-line);
  border-left: 4px solid var(--bd-brand-2);
  font-size: 18px;
  line-height: 1.7;
  font-weight: 600;
  color: var(--bd-ink);
}
.bdet__quote p{ margin: 0; }
.bdet__quote-mark{
  position: absolute;
  top: 30px;
  left: 30px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--bd-brand);
  color: var(--bd-ink);
  font-size: 20px;
}

/* ---------- list ---------- */
.bdet__list{
  list-style: none;
  margin: 24px 0 30px;
  padding: 0;
  display: grid;
  gap: 13px;
}
.bdet__list li{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  color: var(--bd-ink);
}
.bdet__list i{
  color: var(--bd-brand-2);
  font-size: 17px;
  margin-top: 3px;
  flex-shrink: 0;
}

/* ---------- tags footer ---------- */
.bdet__tags{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 38px;
  padding-top: 26px;
  border-top: 1px solid var(--bd-line);
}
.bdet__tags b{ font-size: 14.5px; color: var(--bd-ink); margin-right: 4px; }
.bdet__tag{
  padding: 7px 15px;
  border-radius: var(--pill, 999px);
  background: var(--bd-surface);
  border: 1px solid var(--bd-line);
  font-size: 13px;
  font-weight: 600;
  color: var(--bd-muted);
  text-decoration: none;
  transition: all var(--bd-transition);
}
.bdet__tag:hover{
  background: var(--bd-brand);
  border-color: var(--bd-brand);
  color: var(--bd-ink);
}
/* ==========================================
   Blog Detail — Fixes & Categories - START
   ========================================== */

/* section spacing */
.bdet{ padding: 80px 0; }

/* categories — chips, clickable nahi */
.bsd__cats{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bsd__cat{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 15px;
  border-radius: var(--pill, 999px);
  background: var(--bd-surface, #F4F6F3);
  border: 1px solid var(--bd-line, #E6EAE7);
  font-size: 13px;
  font-weight: 600;
  color: var(--bd-muted, #6B736E);
  cursor: default;
}
.bsd__cat.is-active{
  background: var(--bd-brand, #7BE04F);
  border-color: var(--bd-brand, #7BE04F);
  color: var(--bd-ink, #0B0D0C);
  font-weight: 700;
}
.bsd__cat i{ font-size: 13px; }

/* tags — ab span hain, link nahi */
.bsd__tags span{
  display: inline-block;
  padding: 7px 14px;
  border-radius: var(--pill, 999px);
  background: var(--bd-surface, #F4F6F3);
  border: 1px solid var(--bd-line, #E6EAE7);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--bd-muted, #6B736E);
}

/* feature icon — theme font ho ya bi icons, dono theek */
.bdet-feat__icon i{
  display: inline-block;
  font-size: 22px;
  line-height: 1;
}

/* CTA — centered */
.bsd--cta{
  text-align: center;
  padding: 32px 24px;
}
.bsd__cta-icon{
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  margin: 0 auto 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .16);
  color: var(--bd-brand, #7BE04F);
  font-size: 22px;
}
.bsd--cta p{
  margin: 0 auto 22px;
  max-width: 30ch;
}
.bsd__cta-btn{ justify-content: center; }

/* hero image reveal + hover */
[data-bd-reveal]{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--bd-transition), transform .7s var(--bd-transition);
}
[data-bd-reveal].is-in{ opacity: 1; transform: none; }

.bdet__hero img{
  transform: scale(1.05);
  transition: transform 1.3s var(--bd-transition);
}
.bdet__hero.is-in img{ transform: scale(1); }
.bdet__hero:hover img{ transform: scale(1.04); }

/* responsive */
@media (max-width: 991px){
  .bdet{ padding: 56px 0; }
}
@media (max-width: 640px){
  .bdet{ padding: 40px 0; }
  .bdet__hero img{ aspect-ratio: 16 / 10; }
  .bsd__cat{ font-size: 12.5px; padding: 7px 13px; }
}

@media (prefers-reduced-motion: reduce){
  [data-bd-reveal]{ opacity: 1; transform: none; transition: none; }
  .bdet__hero img{ transform: none; transition: none; }
}

/* ==========================================
   Blog Detail — Fixes & Categories - END
   ========================================== */

/* ==========================================
   Sidebar
   ========================================== */
.bdet__side{
  display: grid;
  gap: 22px;
  position: sticky;
  top: 100px;
}

.bsd{
  padding: 26px 24px;
  border: 1px solid var(--bd-line);
  border-radius: var(--bd-radius);
  background: #fff;
  box-shadow: var(--bd-shadow);
}

.bsd__title{
  position: relative;
  margin: 0 0 20px;
  padding-bottom: 14px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--bd-ink);
}
.bsd__title::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 38px; height: 3px;
  border-radius: 3px;
  background: var(--bd-brand-2);
}

/* search */
.bsd__search{
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 6px 6px 18px;
  border: 1px solid var(--bd-line);
  border-radius: var(--pill, 999px);
  background: var(--bd-surface);
  transition: border-color var(--bd-transition), box-shadow var(--bd-transition);
}
.bsd__search:focus-within{
  border-color: var(--bd-brand-2);
  box-shadow: 0 0 0 3px rgba(95, 201, 58, .14);
}
.bsd__search input{
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 14px;
  padding: 10px 0;
  color: var(--bd-ink);
}
.bsd__search button{
  width: 40px; height: 40px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bd-brand-2);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform var(--bd-transition);
}
.bsd__search button:hover{ transform: scale(1.06); }

/* categories — chips styling upar "Fixes & Categories" block me hai
   (duplicate .bsd__cats grid definition yahan se hata di gayi) */

/* latest posts */
.bsd__posts{ list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.bsd__posts a{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  text-decoration: none;
}
.bsd__thumb{
  width: 74px; height: 74px;
  flex-shrink: 0;
  border-radius: var(--bd-radius-sm);
  overflow: hidden;
  background: var(--bd-surface);
}
.bsd__thumb img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--bd-transition);
}
.bsd__posts a:hover .bsd__thumb img{ transform: scale(1.08); }

.bsd__post-text{ min-width: 0; }
.bsd__post-text small{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--bd-muted);
  margin-bottom: 5px;
}
.bsd__post-text b{
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--bd-ink);
  transition: color var(--bd-transition);
}
.bsd__posts a:hover b{ color: var(--bd-brand-deep); }

/* tags */
.bsd__tags{ display: flex; flex-wrap: wrap; gap: 8px; }
.bsd__tags a{
  padding: 7px 14px;
  border-radius: var(--pill, 999px);
  background: var(--bd-surface);
  border: 1px solid var(--bd-line);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--bd-muted);
  text-decoration: none;
  transition: all var(--bd-transition);
}
.bsd__tags a:hover{
  background: var(--bd-brand);
  border-color: var(--bd-brand);
  color: var(--bd-ink);
}

/* quote card */
.bsd--quote{
  position: relative;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(150deg, var(--bd-brand) 0%, var(--bd-brand-2) 100%);
  border-color: transparent;
  padding: 34px 26px 28px;
}
.bsd__quote-icon{
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .3);
  color: var(--bd-ink);
  font-size: 22px;
}
.bsd__quote-text{
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.62;
  font-weight: 700;
  color: var(--bd-ink);
}
.bsd__quote-by{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 7px;
  border-radius: var(--pill, 999px);
  background: rgba(255, 255, 255, .55);
}
.bsd__quote-by img{
  width: 34px; height: 34px;
  border-radius: 50%;
  object-fit: cover;
}
.bsd__quote-by b{ font-size: 14px; color: var(--bd-ink); }

/* CTA */
.bsd--cta{
  background: var(--bd-ink);
  border-color: var(--bd-ink);
  color: #fff;
}
.bsd--cta h3{
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.015em;
  color: #fff;
}
.bsd--cta p{
  margin: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .68);
}
.bsd__cta-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--pill, 999px);
  background: var(--bd-brand);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--bd-ink);
  text-decoration: none;
  transition: gap var(--bd-transition), box-shadow var(--bd-transition);
}
.bsd__cta-btn:hover{
  gap: 12px;
  box-shadow: 0 10px 26px rgba(123, 224, 79, .3);
}

/* ==========================================
   Responsive
   ========================================== */

@media (max-width: 1100px){
  .bdet__grid{ grid-template-columns: minmax(0, 1fr) 310px; gap: 34px; }
}

@media (max-width: 991px){
  .bdet{ padding: 58px 0; }
  .bdet__grid{ grid-template-columns: 1fr; gap: 46px; }
  .bdet__side{ position: static; }

  /* sidebar 2-up on tablet */
  .bdet__side{ grid-template-columns: 1fr 1fr; }
  .bsd:first-child,
  .bsd--cta{ grid-column: 1 / -1; }
}

@media (max-width: 640px){
  .bdet{ padding: 44px 0; }
  .bdet__grid{ gap: 36px; }
  .bdet__side{ grid-template-columns: 1fr; }
  .bsd:first-child,
  .bsd--cta{ grid-column: auto; }

  .bdet__hero img{ aspect-ratio: 4 / 3; }
  .bdet__features{ grid-template-columns: 1fr; gap: 14px; }

  .bdet__quote{
    padding: 62px 22px 26px;
    font-size: 16px;
  }
  .bdet__quote-mark{ top: 20px; left: 22px; width: 36px; height: 36px; font-size: 17px; }

  .bdet__body{ font-size: 15.5px; }
  .bdet__lede{ font-size: 16.5px; }

  .bsd{ padding: 22px 18px; }
}

@media (max-width: 380px){
  .bsd__thumb{ width: 62px; height: 62px; }
  .bsd__post-text b{ font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce){
  .bdet-feat,
  .bsd__thumb img,
  .bdet__share{ transition: none; }
  .bdet-feat:hover{ transform: none; }
}

/* ==========================================
   Blog Detail Page Styles - END
   ========================================== */

/* ==========================================
   Blog / News Carousel Styles - START
   ========================================== */

:root{
  --blogx-gap:          24px;
  --blogx-card-radius:  20px;
  --blogx-media-radius: 14px;
  --blogx-card-bg:      var(--white, #fff);
  --blogx-border:       var(--line, #E6EAE7);
  --blogx-shadow:       0 4px 18px rgba(11, 13, 12, .04);
  --blogx-arrow-size:   52px;
  --blogx-lift:         6px;    /* hover par card kitna upar uthta hai */
  --blogx-bleed:        26px;   /* lift + glow ke liye viewport ki jagah */
}

.blogx{
  overflow: hidden;
}

/* ==========================================
   Head
   ========================================== */
.blogx__head{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 44px;
}

.blogx__eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted, #6B736E);
  margin-bottom: 16px;
}
.blogx__eyebrow i{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand, var(--lime, #B8F52E));
}

.blogx__title{
  font-size: clamp(34px, 5vw, 60px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.035em;
  margin: 0;
}
.blogx__hl{
  position: relative;
  color: var(--brand-ink, var(--forest, #1B2E1F));
}
.blogx__hl::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .08em;
  height: .28em;
  background: var(--brand, var(--lime, #B8F52E));
  opacity: .35;
  border-radius: 4px;
  z-index: -1;
}

/* ---------- head-side: intro + "View all" button ---------- */
.blogx__head-side{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.blogx__intro{
  margin: 0;
  max-width: 44ch;
  font-size: 16px;
  color: var(--muted, #6B736E);
}
.blogx__all{
  align-self: flex-start;
}

/* ==========================================
   Arrows (ab foot me, dots ke dono taraf)
   ========================================== */
.blogx__arrow{
  width: var(--blogx-arrow-size);
  height: var(--blogx-arrow-size);
  border: 0;
  border-radius: 50%;
  background: var(--ink, #0B0D0C);
  color: #fff;
  font-size: 17px;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition, .3s ease),
              color var(--transition, .3s ease),
              transform var(--transition, .3s ease),
              opacity var(--transition, .3s ease);
}
.blogx__arrow:hover{
  background: var(--brand, var(--lime, #B8F52E));
  color: var(--ink, #0B0D0C);
  transform: translateY(-2px);
}
.blogx__arrow:disabled{
  opacity: .28;
  cursor: default;
  transform: none;
}

.blogx__viewport[data-blogx-autoplay] ~ .blogx__foot .blogx__arrow:disabled,
.blogx__arrow.is-loop:disabled{
  opacity: 1;
  cursor: pointer;
}

/* ==========================================
   Viewport & Track
   ========================================== */
.blogx__viewport{
  overflow: hidden;
  /* vertical bleed zaroori hai warna hover lift par
     card ka top border clip ho jata hai */
  padding: var(--blogx-bleed) 4px;
  margin: calc(var(--blogx-bleed) * -1) -4px;
}
.blogx__track{
  display: flex;
  gap: var(--blogx-gap);
  transition: transform .55s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}

/* ==========================================
   Card
   ========================================== */
.blogx-card{
  position: relative;
  flex: 0 0 calc((100% - var(--blogx-gap) * 2) / 3);
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--blogx-card-bg);
  border: 1px solid var(--blogx-border);
  border-radius: var(--blogx-card-radius);
  box-shadow: var(--blogx-shadow);
  overflow: hidden;
  transition: transform var(--transition, .3s ease),
              box-shadow var(--transition, .3s ease),
              border-color var(--transition, .3s ease);
}

/* hover — proc-step__card jaisa: lift + brand ring + green glow */
.blogx-card:hover,
.blogx-card:focus-within{
  transform: translateY(calc(var(--blogx-lift) * -1));
  border-color: var(--brand-2, var(--brand, #87E64B));
  box-shadow:
    0 0 0 1px var(--brand-2, var(--brand, #87E64B)),
    0 20px 44px rgba(95, 201, 58, .18),
    var(--shadow-md, 0 18px 40px rgba(11, 13, 12, .08));
}

/* poora card clickable */
.blogx-card__hit{
  position: absolute;
  inset: 0;
  z-index: 3;
}

/* ---------- top block ---------- */
.blogx-card__top{
  position: relative;
  padding: 26px 26px 24px;
  border-bottom: 1px solid var(--blogx-border);
}
.blogx-card__date{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted, #6B736E);
}
.blogx-card__title{
  margin: 16px 0 0;
  padding-right: 46px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: -.01em;
  color: var(--ink, #0B0D0C);
  transition: color var(--transition, .3s ease);

  /* 3 lines max — mukhtalif title lengths par cards even rahen */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.4em;
}
.blogx-card:hover .blogx-card__title{
  color: var(--brand-ink, var(--forest, #1B2E1F));
}

.blogx-card__go{
  position: absolute;
  top: 24px;
  right: 24px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--soft, #F4F6F3);
  color: var(--ink, #0B0D0C);
  display: grid;
  place-items: center;
  font-size: 15px;
  transition: background var(--transition, .3s ease),
              color var(--transition, .3s ease),
              transform var(--transition, .3s ease);
}
.blogx-card:hover .blogx-card__go{
  background: var(--brand, var(--lime, #B8F52E));
  transform: rotate(45deg);
}

/* ==========================================
   Blog Card — Image Fit Fix - START
   ========================================== */

.blogx-card__media{
  padding: 24px 26px 0;
  overflow: hidden;
}

/* fixed frame — image poori dikhe, crop/zoom na ho */
.blogx-card__media img{
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: contain;          /* cover → contain: crop nahi hoga */
  object-position: center;
  border-radius: var(--blogx-media-radius, 14px);
  display: block;
  background: var(--soft, #F4F6F3);
  padding: 6px;                  /* letterbox ko saaf dikhane ke liye */
  color: transparent;
  font-size: 0;
  transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}

/* placeholder image thora faded (consolidated — pehle yahan duplicate rule tha) */
.blogx-card__media img.is-placeholder{
  opacity: .55;
  object-fit: contain;
  padding: 22%;
}

/* hover par halka zoom — contain ke saath bhi theek lagta hai */
.blogx-card:hover .blogx-card__media img{
  transform: scale(1.03);
}

@media (max-width: 640px){
  .blogx-card__media{ padding: 20px 20px 0; }
}

@media (prefers-reduced-motion: reduce){
  .blogx-card__media img{ transition: none; }
  .blogx-card:hover .blogx-card__media img{ transform: none; }
}

/* ==========================================
   Blog Card — Image Fit Fix - END
   ========================================== */

/* ---------- foot (card) ---------- */
.blogx-card__foot{
  margin-top: auto;
  padding: 20px 26px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.blogx-card__tag{
  padding: 6px 14px;
  border-radius: var(--pill, 999px);
  background: var(--soft, #F4F6F3);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink, #0B0D0C);
  transition: background var(--transition, .3s ease);
}
.blogx-card:hover .blogx-card__tag{
  background: var(--brand, var(--lime, #B8F52E));
}
.blogx-card__read{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted, #6B736E);
}

/* ==========================================
   Foot row — arrows + dots, centered
   ========================================== */
.blogx__foot{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 40px;
}
.blogx__dots{
  display: flex;
  gap: 8px;
}
.blogx__dots button{
  width: 24px;
  height: 5px;
  padding: 0;
  border: 0;
  cursor: pointer;
  border-radius: var(--pill, 999px);
  background: var(--blogx-border);
  transition: background var(--transition, .3s ease),
              width var(--transition, .3s ease);
}
.blogx__dots button.is-active{
  width: 40px;
  background: var(--brand, var(--lime, #B8F52E));
}

/* ==========================================
   Responsive
   ========================================== */
@media (max-width: 1100px){
  .blogx-card{ flex: 0 0 calc((100% - var(--blogx-gap)) / 2); }
}

@media (max-width: 900px){
  .blogx__head{
    grid-template-columns: 1fr;
    gap: 26px;
    align-items: start;
  }
  .blogx__head-side{
    align-items: flex-start;
  }
  .blogx__intro{ max-width: 34ch; }
}

@media (max-width: 640px){
  :root{
    --blogx-gap:        16px;
    --blogx-arrow-size: 46px;
    --blogx-bleed:      20px;
  }
  .blogx-card{ flex: 0 0 100%; }

  .blogx__head-side{
    align-items: flex-start;
  }
  .blogx__intro{ max-width: none; }
  .blogx__all{
    width: 100%;
    justify-content: center;
  }

  .blogx-card__top{   padding: 22px 20px 20px; }
  .blogx-card__media{ padding: 20px 20px 0; }
  .blogx-card__foot{  padding: 16px 20px 20px; }
  .blogx-card__go{    top: 20px; right: 20px; }
  .blogx-card__title{ font-size: 16px; }

  .blogx__foot{ gap: 10px; }
}

@media (prefers-reduced-motion: reduce){
  .blogx__track,
  .blogx-card,
  .blogx-card__media img{ transition: none; }

  .blogx-card:hover,
  .blogx-card:focus-within{ transform: none; }
}

/* ==========================================
   Blog / News Carousel Styles - END
   ========================================== */

/* ==========================================
   Map section — START
   (deduped — was in blog_content.php and
    blog_detail_content.php inline styles)
   ========================================== */
.google-map-one{ line-height: 0; }
.google-map-one__map{
  width: 100%;
  height: 460px;
  border: 0;
  display: block;
  filter: grayscale(.35) contrast(1.05);
  transition: filter var(--bd-transition);
}
.google-map-one__map:hover{ filter: none; }
/* ==========================================
   Map section — END
   ========================================== */

   /* ==========================================
   Sliding Text Ribbons Styles - START
   ========================================== */

:root{
  --ribbon-h:         76px;    /* ribbon ki height */
  --ribbon-tilt:      2.6deg;  /* kitna tirchha */
  --ribbon-speed:     38s;     /* ek loop ka waqt */
  --ribbon-speed-2:   46s;     /* dusri ribbon thori alag speed */
  --ribbon-gap:       44px;    /* items ke darmiyan */
  --ribbon-font:      clamp(15px, 1.5vw, 21px);
  --ribbon-brand:     var(--brand, var(--lime, #B8F52E));
  --ribbon-brand-ink: var(--ink, #0B0D0C);
  --ribbon-dark:      var(--ink, #0B0D0C);
  --ribbon-dark-ink:  #fff;
}

.ribbons{
  position: relative;
  overflow: hidden;
  padding: 70px 0;
  /* dono ribbons overlap karti hain, is liye grid stack */
  display: grid;
}

/* ---------- ribbon shell ---------- */
.ribbon{
  grid-area: 1 / 1;
  width: 118%;
  margin-left: -9%;
  height: var(--ribbon-h);
  display: flex;
  align-items: center;
  overflow: hidden;
  user-select: none;
}

.ribbon--down{
  transform: rotate(var(--ribbon-tilt));
  align-self: start;
  z-index: 2;
}
.ribbon--up{
  transform: rotate(calc(var(--ribbon-tilt) * -1));
  align-self: end;
  z-index: 1;
}

.ribbon--brand{
  background: var(--ribbon-brand);
  color: var(--ribbon-brand-ink);
}
.ribbon--dark{
  background: var(--ribbon-dark);
  color: var(--ribbon-dark-ink);
}

/* ---------- moving track ---------- */
.ribbon__track{
  display: flex;
  flex-shrink: 0;
  will-change: transform;
}

.ribbon[data-ribbon-dir="left"] .ribbon__track{
  animation: ribbonLeft var(--ribbon-speed) linear infinite;
}
.ribbon[data-ribbon-dir="right"] .ribbon__track{
  animation: ribbonRight var(--ribbon-speed-2) linear infinite;
}

/* group 2 baar print hota hai — 50% par reset seamless lagta hai */
@keyframes ribbonLeft{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}
@keyframes ribbonRight{
  from{ transform: translateX(-50%); }
  to  { transform: translateX(0); }
}

/* hover par pause — user parh sake */
.ribbon:hover .ribbon__track{
  animation-play-state: paused;
}

/* ---------- items ---------- */
.ribbon__group{
  display: flex;
  align-items: center;
  gap: var(--ribbon-gap);
  padding-right: var(--ribbon-gap);
  flex-shrink: 0;
}

.ribbon__item{
  display: inline-flex;
  align-items: center;
  gap: 18px;
  white-space: nowrap;
}
.ribbon__item b{
  font-size: var(--ribbon-font);
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.ribbon__dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
  flex-shrink: 0;
}

.ribbon__ico{
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}
/* dark ribbon par dark logos visible rahen */
.ribbon--dark .ribbon__ico{
  filter: brightness(0) invert(1);
}

/* ==========================================
   Sliding Text Ribbons — Responsive
   ========================================== */

@media (max-width: 900px){
  :root{
    --ribbon-h:       62px;
    --ribbon-gap:     32px;
    --ribbon-speed:   28s;
    --ribbon-speed-2: 34s;
  }
  .ribbons{ padding: 54px 0; }
  .ribbon__item{ gap: 14px; }
}

@media (max-width: 560px){
  :root{
    --ribbon-h:       52px;
    --ribbon-tilt:    3.2deg;
    --ribbon-gap:     24px;
    --ribbon-speed:   20s;
    --ribbon-speed-2: 24s;
  }
  .ribbons{ padding: 44px 0; }
  .ribbon{
    width: 132%;
    margin-left: -16%;
  }
  .ribbon__ico{ width: 20px; height: 20px; }
}

@media (prefers-reduced-motion: reduce){
  .ribbon__track{ animation: none !important; }
  .ribbon{ overflow-x: auto; }
}

/* ==========================================
   Sliding Text Ribbons Styles - END
   ========================================== */
/* ==========================================
   Footer Newsletter Styles (Light) - START
   ========================================== */

:root{
  --ftn-radius:      var(--pill, 999px);
  --ftn-bg:          var(--white, #fff);
  --ftn-border:      var(--line, #E6EAE7);
  --ftn-text:        var(--ink, #0B0D0C);
  --ftn-muted:       var(--muted, #6B736E);
  --ftn-accent:      var(--brand, #87E64B);
  --ftn-accent-ink:  #fff;
  --ftn-err:         #E5484D;
  --ftn-badge-bg:    var(--soft, #F4F6F3);
}

.ft-col--news .ft-news__lede{
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ftn-muted);
  max-width: 34ch;
}

/* honeypot — nazar se ghayab */
.ft-news__hp{
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ---------- input group ---------- */
.ft-news__row{
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 6px 6px 18px;
  background: var(--ftn-bg);
  border: 1px solid var(--ftn-border);
  border-radius: var(--ftn-radius);
  box-shadow: 0 2px 10px rgba(11, 13, 12, .04);
  transition: border-color var(--transition, .3s ease),
              box-shadow var(--transition, .3s ease);
}
.ft-news__row:focus-within{
  border-color: var(--ftn-accent);
  box-shadow: 0 0 0 3px rgba(95, 201, 58, .14);
}

/* validation states */
.ft-news.is-error .ft-news__row{
  border-color: var(--ftn-err);
  box-shadow: 0 0 0 3px rgba(229, 72, 77, .12);
}
.ft-news.is-ok .ft-news__row{
  border-color: var(--ftn-accent);
}

.ft-news__input{
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ftn-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 0;
}
.ft-news__input::placeholder{
  color: var(--ftn-muted);
  opacity: .75;
}
/* browser autofill ka peela background hata do */
.ft-news__input:-webkit-autofill,
.ft-news__input:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--ftn-text);
  -webkit-box-shadow: 0 0 0 40px var(--ftn-bg) inset;
  transition: background-color 9999s ease-in-out 0s;
}

.ft-news__btn{
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ftn-accent);
  color: var(--ftn-accent-ink);
  font-size: 15px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform var(--transition, .3s ease),
              opacity var(--transition, .3s ease),
              box-shadow var(--transition, .3s ease);
}
.ft-news__btn:hover{
  transform: translateX(2px);
  box-shadow: 0 6px 16px rgba(95, 201, 58, .32);
}
.ft-news__btn:disabled{
  opacity: .55;
  cursor: default;
  transform: none;
  box-shadow: none;
}

/* loading spinner */
.ft-news.is-loading .ft-news__btn i{
  display: block;
  animation: ftnSpin .7s linear infinite;
}
@keyframes ftnSpin{ to{ transform: rotate(360deg); } }

/* ---------- message ---------- */
.ft-news__msg{
  margin: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  transition: max-height var(--transition, .3s ease),
              opacity var(--transition, .3s ease),
              margin var(--transition, .3s ease);
}
.ft-news__msg.is-visible{
  max-height: 80px;
  opacity: 1;
  margin: 12px 0 0;
}
.ft-news__msg.is-error{ color: var(--ftn-err); }
.ft-news__msg.is-ok{    color: var(--ftn-accent); }

/* ---------- badges ---------- */
.ft-news__badges{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.ft-news__badges span{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: var(--pill, 999px);
  background: var(--ftn-badge-bg);
  border: 1px solid var(--ftn-border);
  font-size: 12px;
  font-weight: 600;
  color: var(--ftn-muted);
}
.ft-news__badges i{
  color: var(--ftn-accent);
  font-size: 12px;
}

/* ---------- responsive ---------- */
@media (max-width: 640px){
  .ft-col--news .ft-news__lede{ max-width: none; }
  .ft-news__row{ padding-left: 16px; }
}

@media (prefers-reduced-motion: reduce){
  .ft-news__msg,
  .ft-news__btn{ transition: none; }
  .ft-news.is-loading .ft-news__btn i{ animation: none; }
}

/* ==========================================
   Footer Newsletter Styles (Light) - END
   ========================================== */