img {
    max-width: 100%;
}

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    z-index: 2000;
    padding: 10px 16px;
    background: #2d572c;
    color: #fff;
    text-decoration: none;
    border-radius: 0 0 4px 0;
}
.skip-link:focus {
    left: 0;
}

.author-box {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin: 2.5rem 0;
}
.author-box-avatar {
    border-radius: 50%;
    flex: 0 0 64px;
    width: 64px;
    min-width: 64px;
    max-width: 64px;
    height: 64px;
    object-fit: cover;
}
.author-box-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .25rem;
}
.author-box-name {
    margin-bottom: .25rem;
}
.author-box-bio {
    margin-bottom: .5rem;
}
.author-box-link {
    font-weight: 600;
    color: #2d572c;
    text-decoration: none;
}
.author-box-link:hover {
    text-decoration: underline;
}

button.navbar-toggle {
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: inherit;
}
button.navbar-toggle:focus-visible {
    outline: 2px solid #2d572c;
    outline-offset: 2px;
    border-radius: 4px;
}

body {
   background-color: #F5F5DC !important; *//* Soft mint green *//*
   color: #2E3B2C;
}
h2 {margin-top: 2rem; margin-bottom: 2rem;}
.long-description {
  font-size: 1.1rem;
  color: #334a34;
  background-color: #f8fff2;
  padding: 1rem;
  border-left: 4px solid #74a84e;
  margin: 1rem 0;
}
/* Header */
header-1 {
  background-color: #2E7D32 !important;
  color: #FFFFFF;
}
header#topnav {
  /*background-color: #4caf50 !important;
  color: #FFFFFF;*/
  background-color: #fff !important;
  color: #4caf50;
}

/* Footer */
footer-1 {
  background-color: #1B5E20 !important;
  color: #A5D6A7;
}

footer {
  background-color: #33691e !important;
  color: #e8f5e9 !important;
}

footer a {
  color: #e8f5e9 !important;
}
footer a.text-foot:hover {
    font-weight: bolder;
}
.section-title .title {
    font-size: 30px !important;
}
.btn.btn-sm {
    font-size: 16px;
    padding: 7px 16px;
}
.btn {
    border-radius: 5px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .5px;
    outline: none;
    padding: 8px 18px;
    text-decoration: none;
    transition: all .3s;
}

#topnav .navigation-menu>li> a {
  color: #4caf50;
}
#topnav .navigation-menu>li> a:hover {
  background-color: #C8E6C9;
  color: #2E7D32;
  font-weight: bolder;
  transition: all .5s ease;
}

.navigation-menu-wrapper ul.navigation-menu {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1.2rem;
  white-space: nowrap;
}

.navigation-menu a.sub-menu-item {
  font-size: 0.95rem;
  padding: 0.5rem 0.8rem;
  color: #2c2c2c;
  transition: color 0.3s ease;
}

.navigation-menu a.sub-menu-item:hover {
  color: #009688;
}

.navigation-menu .dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0;
}

.dropdown-menu {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  padding: 0.5rem 0;
}

.dropdown-item {
  color: #333;
  padding: 0.4rem 1rem;
  font-size: 0.9rem;
}

.dropdown-item:hover {
  background-color: #f5f5f5;
  color: #009688;
}


/* Style for main content */
pre {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}
.my-slider img {
  width: 100%;
  height: auto;
  border-radius: 0px;
}
.tns-nav {
  text-align: center;
  margin-top: 10px; /* spacing below the image */
}

.tns-nav > button {
  border-radius: 50%;
  border: none;
  width: 10px;
  height: 10px;
  margin: 0 4px;
  background: #ccc;
  cursor: pointer;
}

.tns-nav > .tns-nav-active {
  background: #4CAF50; /* active dot color (e.g., green) */
}
.hero-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.my-slider {
  height: 80vh; /* 80% of viewport height */
}
.my-slider .slide{
  max-width: 100%;
  position: relative;
  overflow: hidden;
}

.my-slider .tns-item {
  height: 100%;
}

.my-slider .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* or object-fit: contain; based on your need */
}

.slide-caption {
  position: absolute;
  bottom: 10%;
  left: 5%;
  right: 5%;
  color: white;
  /*background: rgba(0, 100, 0, 0.6); */
  padding: 15px;
  border-radius: 8px;
  text-align: left;
}

.slide-caption h1 {
  font-size: 60px;
}

.slide-caption p {
  font-size: 30px;
}

a {
    /* color: #fff; */
    color: #28a745;
}

/* .img-overlay {
    position: absolute;
    bottom: 0;
    left: 0px;
    width: 100%;
    padding: 70px 15px;
    background: linear-gradient(to top, rgb(15 14 14), transparent);
    text-align: center;
    color: white;
} */

 .img-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertical center */
    align-items: center;     /* Horizontal center */
    padding: 0 15px;
    text-align: center;
    color: white;
    z-index: 2;
}

.img-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* background: linear-gradient(to top, rgb(15 14 14 / 80%), transparent); */
    background: linear-gradient(to top, rgb(15 14 14 / 0%), transparent);
    z-index: 1;
}

.img-overlay > * {
    position: relative;
    z-index: 2;
}
.slide-caption .h1-hero {
  color: #fff !important; /* warm light yellow for contrast on dark green */
  font-weight: 500;
   font-size: 80px !important;
}

#btnExplore .slide-caption a {
  color: green !important; /* warm light yellow for contrast on dark green */
  text-decoration: underline;
  font-weight: 500;
   font-size: 16px;
}

.slide-caption a:hover {
  color: #fff176; /* slightly brighter yellow on hover */
  text-decoration: none;
}

@media (max-width: 768px) {
   .my-slider {
    height: 50vh;
}
.slide-caption .h1-hero {
    color: #fff !important;
    font-weight: 500;
    font-size: 30px !important;
}
}
/* Responsive adjustments */
@media (max-width: 576px) {
  .slide-caption {
    padding: 10px;
    font-size: 0.9rem;
  }
 

  .slide-caption h2 {
    font-size: 1.2rem;
  }

  .slide-caption p {
    font-size: 0.9rem;
  }
  .bg-half-100 {
   /* padding: 150px 0px;*/
  }
}


main, .content, .markdown {
  line-height: 1.7;
  padding: 1rem;
}
.content ul{
    list-style: none;
}
.content h2#related-items + p,
.content h2#सबधत-आइटम + p,
.content h2#सबधत-फल + p,
.content h2#सबधत-सबजय + p,
.content h2#सबधत-वसतए + p,
.content h2#सबधत-जड-बटय + p {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
}
.content h2#related-items + p a img,
.content h2#सबधत-आइटम + p a img,
.content h2#सबधत-फल + p a img,
.content h2#सबधत-सबजय + p a img,
.content h2#सबधत-वसतए + p a img,
.content h2#सबधत-जड-बटय + p a img {
    height: 150px;
    width: 150px;
    object-fit: cover;
    border-radius: 8px;
}
.content table{
      width: 100%;
      max-width: 600px;
      margin: 1rem;
      border-collapse: collapse;
      background-color: #f9fff5;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.content.seasonal-picks table {
    max-width: fit-content;
}
.content table th,
.content table td {
      border: 1px solid #d4e4cb;
      padding: 0.75rem 1rem;
      text-align: left;
    }

.content table th {
      background-color: #e3f6d6;
      color: #2f5d2f;
      font-weight: 600;
    }

.content table tr:nth-child(even) td {
      background-color: #f1f9ee;
}
.text-color{
    position:absolute; 
    top:50%; left:50%; 
    transform:translate(-50%,-50%); 
    color:green; 
    text-shadow:2px 2px 8px hsl(96, 86%, 33%); 
    text-align:center;
}

.mainimg{
    height:396px;
    object-fit:fill;
}

.topbar {
    padding-top: 74px;
    margin: 0;
}

/* Height chain: Bootstrap col → grids → icard-link → icard */
.grids {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.icard-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.icard {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 450px;
}
.icard:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    transform: translateY(-4px) scale(1.02);
}
.icard-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}
.icard-body {
    padding: 18px 16px 20px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.icard-body .read-more {
    margin-top: auto;
    padding-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
}
.icard-date {
    font-size: 0.95rem;
    color: #8e8e8e;
    margin-bottom: 6px;
}
.icard-title {
    /* !important is required, not stylistic. The rule near the end of this
       file that sets h2 to 26px is itself !important, so it would otherwise
       win over this class rule now that the card title is an h2 (it was an
       h5, which no !important rule targets). Without this, cards render at
       26px and overflow the 2-line min-height reserved below. */
    font-size: 1.2rem !important;
    line-height: 1.4;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: #3a3a3a;
    /* Always reserve exactly 2 lines — 1-line titles get whitespace, 2-line titles fill naturally */
    min-height: calc(1.2rem * 1.4 * 2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.icard-desc {
    font-size: 1rem;
    color: #5A5A5A;
    margin-bottom: 0;
    /* No flex:1 here — display:-webkit-box overrides display:flex, killing margin-top:auto on read-more */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.icard-btn {
    background: #7c4dff;
    color: #fff;
    padding: 7px 18px;
    border-radius: 20px;
    font-size: 0.98rem;
    font-weight: 500;
    align-self: flex-start;
    transition: background 0.2s;
    cursor: pointer;
}
.icard-btn:hover {
    background: #512da8;
}

/* --------------------------------------------- */
/* -------------------------- */
.toc-item.active>.sub-items {
    display: block;
}

.force-overflow {
    min-height: 450px
}

#toc a.active {
    color: green;
     font-weight: 700;
}
#toc ul ul {
    display: none;
}

#toc ul ul li a.active {
    color: green;
    font-weight: 700;
   
}

#toc ul ul li a {
    color: inherit;
    
}

.table-contents {
    position: sticky;
    top: 110px;
    right: 0;
    bottom: 0;
}

.table-contents a {
    color: #3c4858 !important;
}



.tagcloud>a {
    background: #e9ecef;
    color: #3c4858;
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0px;
    margin: 5px 10px 5px 0;
    padding: 8px 12px 7px;
    text-transform: inherit;
    transition: all .5s ease;
}

.btn-light:hover {
    background-color: #c8e6c9;
    color: #1b5e20;
    transform: scale(1.05);
    transition: all 0.3s ease;
}

.floating-leaf {
    position: absolute;
    width: 40px;
    opacity: 0.4;
    animation: float 6s ease-in-out infinite;
    pointer-events: none;
}

.leaf1 {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}
.leaf2 {
    top: 60%;
    right: 15%;
    animation-delay: 3s;
}

@keyframes float {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(10deg);
    }
    100% {
        transform: translateY(0) rotate(0deg);
    }
}

.language-switcher {
   /*  color: #ffe082; */
}

#mobileNav {
    padding: 1rem;
    background-color: #fff;
    border-top: 1px solid #eaeaea;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

#mobileNav ul {
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: space-between;
}

#mobileNav li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #cb1212;
    font-size: 1rem;
}

#mobileNav li:last-child {
    border-bottom: none;
}

#mobileNav a {
    text-decoration: none;
    color: #333;
    display: block;
    width: 100%;
}

#mobileNav .search-box input[type="text"] {
    padding: 0.4rem 1rem;
    width: 100%;
    border: 1px solid #ddd;
}

#mobileNav .search-box input[type="submit"] {
    margin-top: 0.5rem;
    width: 100%;
    border-radius: 25px;
}

#mobileNav .language-switcher,
#mobileNav .avatar {
    display: flex;
    justify-content: center;
}

#mobileNav .avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

#mobileNav .language-switcher a {
    text-align: center;
    font-weight: 500;
    color: #2b7a78;
}
.language-author {
    display: flex;
    justify-content: center;
    padding: 0;
    align-content: space-between;
    align-items: center;
    flex-direction: column;
}

.sitemap h2 a {
    color: #4caf50 !important;
}
.sitemap li a {
    color: #4caf50 !important;
}
.sitemap ul {
    list-style: none;   /* removes bullets */
    margin: 0;          /* reset margin */
    padding: 0;         /* reset padding */
    display: flex;      /* makes list items horizontal */
    gap: 15px;          /* spacing between items */
}

.sitemap ul li {
    display: inline-block; /* ensures inline block items */
}

/* Desktop logo */
header#topnav .big-logo {
  max-height: 55px;    /* controls desktop logo size */
  width: auto;
  display: block;
}

/* Mobile logo */
header#topnav .small-logo {
  max-height: 40px;    /* smaller logo for mobile */
  width: auto;
  display: none;       /* hidden by default */
}

.logo-footer img {
    max-height: 145px;    /* controls desktop logo size */
    width: auto;
}

.blog-single-page p > a {
    color: #000;
}
/* Switch logo for small screens */
@media (max-width: 991.98px) {
  header#topnav .big-logo {
    display: none;
  }
  header#topnav .small-logo {
    display: block;
  }
  .logo-footer img {
      max-height: 100%;    /* controls desktop logo size */
      width: auto;
  }
  .content h2#related-items + p a img,
  .content h2#सबधत-आइटम + p a img,
  .content h2#सबधत-फल + p a img,
  .content h2#सबधत-सबजय + p a img,
  .content h2#सबधत-वसतए+ p a img,
  .content h2#सबधत-जड-बटय + p a img {
      height: 100%;
      width: 100%;
  }
}
.related-link a, #searchResults .search-item a, #searchResultsMobile .search-item a {
    color: #f21818fc;
}
.related-link a:hover, #searchResults .search-item a:hover, #searchResultsMobile .search-item a:hover {
    color: green;
    text-decoration: underline !important;
}
.landing-intro {
  max-width: 800px;
  margin: auto;
  padding: 2rem;
  text-align: center;
  padding-top: 0;
}
.landing-intro .tagline {
  font-size: 1.2rem !important;
  font-style: italic;
  color: #2d572c;
  margin-bottom: 1rem;
  /*margin-top: 2rem;*/
  position: relative;
}
.landing-intro h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #1a3d1a;
}
.landing-intro p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}
.curiosity-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}
.curiosity-list li {
  font-size: 1rem;
  margin: 0.5rem 0;
}
.closing {
  font-weight: bold;
  margin-top: 1.5rem;
  color: #444;
}

.landing-intro h3 {
    color: #008000;
}
/*================ Search Container =================*/
.search-container {
    position: relative;
    width: 100%;
    max-width: 400px; /* Adjust max width for desktop */
    margin: 0;
}

/* Input styling */
.search-container input {
    width: 100%;
    padding: 6px 12px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Search results dropdown */
#searchResultsOld, #searchResultsMobileOld {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 0 0 4px 4px;
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Wide Search results dropdown */
#searchResults, #searchResultsMobile {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%); /* center relative to viewport */
    width: 600px; /* wider than input */
    max-width: 90vw; /* responsive for very small screens */
    background: #fff;
    /*border: 1px solid #ddd;*/
    border-radius: 0 0 6px 6px;
    z-index: 1000;
    max-height: 400px;
    overflow-y: auto;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
/* Individual search item */
.search-item {
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    transition: background 0.2s;
}

.search-item:last-child {
    border-bottom: none;
}

/* Hover effect for search items */
.search-item:hover {
    background-color: #f5f5f5;
}

/* Summary text under link */
.search-item p {
    font-size: 13px;
    color: #555;
    margin: 4px 0 0 0;
}

/* Responsive adjustments for mobile */
@media (max-width: 991px) {
    .search-container {
        max-width: 100%; /* full width on mobile */
        margin-bottom: 10px;
    }

    #searchResultsMobile {
        position: relative; /* dropdown stays below input in mobile menu */
    }
}
#searchResults::-webkit-scrollbar {
    width: 6px;
}

#searchResults::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.2);
    border-radius: 3px;
}
.search-box {
  display: flex;
  width: 100%;
}

.search-box input {
  flex: 1;
  border-radius: 4px 0 0 4px;
}

.scope-dropdown {
  border: 1px solid #ccc;
  border-left: none;
  border-radius: 0 4px 4px 0;
  background: #f8f8f8;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0 8px;
}
#topnav .navigation-menu>li {
    margin: 0;
}

/* Banner container */
.wellness-banner-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    position: relative;
}

/* Banner image wrapper */
.wellness-banner {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 25%; /* Maintains aspect ratio */
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    /* margin: 20px 0; */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wellness-banner:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

/* Banner image */
.wellness-banner img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Maintains aspect ratio without distortion */
    object-position: center;
}

/* Banner overlay */
.wellness-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 100%);
    display: flex;
    align-items: center;
}

/* Banner title */
.wellness-banner-title {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 700;
    padding: 0 40px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

/* Responsive styles */
@media (max-width: 768px) {
    .wellness-banner {
        padding-bottom: 40%; /* Slightly taller on mobile */
    }

    .wellness-banner-title {
        font-size: 1.8rem;
        padding: 0 20px;
    }
}

@media (max-width: 480px) {
    .wellness-banner {
        padding-bottom: 50%; /* Even taller on small mobile */
        margin-bottom: 10px;
    }

    .wellness-banner-title {
        font-size: 1.5rem;
        padding: 0 15px;
    }
}
#contentText a {
    color: #28a745;
    text-decoration: none;
}
.h2, h2 {
    font-size: 26px !important;
}
.h3, h3 {
    font-size: 24px !important;
}
.breadcrumb .breadcrumb-item a, .breadcrumb .breadcrumb-item:after {
	color: #e8f5e9;
}
.breadcrumb .breadcrumb-item a:hover, .breadcrumb .breadcrumb-item.active {
    color: #000;
}
nav.breadcrumb-container {
    border-radius: 8px;
}
.breadcrumb-container.bg-light {
    background-color: #4caf50 !important;
}
.widget .widget-title {
    padding-left: 2rem;
    background-color: #4caf50 !important;
    /* Was an <h6>, now an <h2> so the document outline does not skip four
       levels below the article <h1>. These three properties reproduce the
       browser/Bootstrap h6 rendering exactly, so nothing changes on screen.
       font-size needs !important to beat the h2 26px !important rule near the
       end of this file. */
    font-size: 1rem !important;
    font-weight: 500;
    line-height: 1.2;
}

/* Same reasoning as .widget-title: "Share this page:" was an <h6> purely for
   its size. It is a UI label, so it is now a <p> styled to match. */
.share-buttons .share-label {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}
.search-section {
    width:  -webkit-fill-available;
}
p {
    font-size: 16px;
}
/* ================
   RESPONSIVE MOBILE TABLE → CARD LAYOUT FOR HUGO MARKDOWN TABLES
   ================ */

@media (max-width: 768px) {
  table {
    width: 100%;
    border-collapse: collapse;
  }

  thead {
    display: none !important;
  }

  table, thead, tbody, th, td, tr {
    display: block;
  }

  tr {
    background: #fafafa;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    padding: 12px;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  }

  td {
    display: flex;
    justify-content: space-between;
    padding: 8px 10px;
    border-bottom: 1px dashed #ddd;
  }

  td:last-child {
    border-bottom: none;
  }

  /* Generate labels using header row */
  td::before {
    content: attr(data-label);
    font-weight: bold;
    color: #333;
    flex-basis: 40%;
    padding-right: 10px;
  }
}

/* ============================================================
   PERFORMANCE & MOBILE IMPROVEMENTS
   ============================================================ */

/* --- 1. Prevent CLS: reserve space for content images --- */
.blog-single-page img,
.col-md-6 img.rounded-md,
.col-md-6 img.img-fluid {
  width: 100%;
  height: auto;
  display: block;
}

/* --- 2. content-visibility: skip off-screen rendering --- */
.blog-single-page .row:not(:first-child),
section.container > .row:not(:first-child) {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

/* --- 3. Padding-top to clear sticky header on all page wrappers --- */
.blog-single-page,
.breadcumb-area {
  padding-top: 60px;
}
@media (max-width: 767.98px) {
  .blog-single-page,
  .breadcumb-area {
    padding-top: 60px;
  }
}

/* --- 4. Responsive hero/banner heights --- */
@media (max-width: 767.98px) {
  .breadcumb-area {
    min-height: 45vh;
  }
  .breadcumb-area .bradcumb-title h1 {
    font-size: 1.4rem;
  }
}

/* --- 5. TOC sidebar visual separation when stacked on mobile --- */
@media (max-width: 767.98px) {
  .table-contents {
    margin-top: 2rem;
    border-top: 2px solid #e8f5e9;
    padding-top: 1rem;
  }
}

/* --- 6. Blog single: ensure cols stack cleanly on mobile --- */
@media (max-width: 767.98px) {
  .blog_area.single-post-area .col-md-7,
  .blog_area.single-post-area .col-md-5 {
    width: 100%;
  }
}

/* --- 7. Responsive card image height using aspect-ratio --- */
.icard-img {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
}

/* --- 8. Share buttons responsive wrap on small screens --- */
@media (max-width: 480px) {
  .share-buttons {
    gap: 8px;
  }
  .share-btn {
    padding: 6px;
  }
  .share-btn svg {
    width: 18px;
    height: 18px;
  }
}