/* ===========================
   Intro hero grid (scoped)
   =========================== */
/* Apply ONLY when .grid--span-left is present */
@media (min-width: 1200px) {
  .card-grid.grid--span-left {
    display: grid; /* safe to repeat */
    grid-template-columns: 2fr 1.15fr; /* big left, stacked right */
    grid-template-rows: auto auto; /* two rows on the right */
    gap: 32px;
    align-items: stretch;
    position: relative;
  }
  .card-grid.grid--span-left .report-card {
    grid-column: 1;
    grid-row: 1 / span 2; /* span both rows */
    height: 100% !important;
    max-height: none !important;
    overflow: hidden; /* keep rounded corners clean */
    border-radius: inherit;
  }
  .card-grid.grid--span-left .tile--text {
    grid-column: 2;
    grid-row: 1;
    height: 100%;
  }
  .card-grid.grid--span-left > .image-card:not(.report-card) {
    grid-column: 2;
    grid-row: 2;
    height: 100%;
  }
  .card-grid.grid--span-left .report-card img, .card-grid.grid--span-left > .image-card:not(.report-card) img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
  }
  /* Shimmer overlay only in this layout */
  .card-grid.grid--span-left .grid-shimmer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    border-radius: 24px;
  }
  .sm-p-0{
    padding:0!important;
  }
}
/* 1366 zone: slightly tighter gap */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .card-grid.grid--span-left {
    gap: 24px;
  }
}
/* Safe defaults (dont break home) */
.card-grid .card-tile {
  border-radius: 20px;
  overflow: hidden;
}
.card-grid .card-tile img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: inherit;
}
/* ===========================
   Scoped span-left grid (hero)
   =========================== */
@media (min-width:1200px) {
  .card-grid.grid--span-left {
    display: grid;
    grid-template-columns: 2fr 1.15fr;
    grid-template-rows: auto auto;
    gap: 24px;
    align-items: stretch;
    position: relative;
  }
  .card-grid.grid--span-left .report-card {
    grid-column: 1;
    grid-row: 1 / span 2;
    height: 100% !important;
    max-height: none !important;
  }
  .card-grid.grid--span-left .tile--text {
    grid-column: 2;
    grid-row: 1;
    height: 100%;
  }
  .card-grid.grid--span-left > .image-card:not(.report-card) {
    grid-column: 2;
    grid-row: 2;
    height: 100%;
  }
  /*  Rounded corners + clip */
  .card-grid.grid--span-left .card-tile {
    border-radius: 20px;
    overflow: hidden; /* ensures image respects radius */
    position: relative;
  }
  .card-grid.grid--span-left .card-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* shimmer overlay keeps radius */
  .card-grid.grid--span-left .grid-shimmer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    border-radius: 20px;
  }
}
/* Mobile adjustments */
@media (max-width: 991.98px) {
  .outlook-card {
    padding: 30px 20px;
  }
  .outlook-image-fade {
    height: 200px !important;
    margin-top: 20px;
  }
  .outlook-image-fade img {
    width: 100%;
    object-fit: cover; /* still fills the box */
    object-position: top; /* align image to top */
  }
  .outlook-card.report-unique .outlook-image-fade {
    aspect-ratio: 1 / 1; /* square container matches your images */
    height: auto !important;
    margin-top: 20px;
  }
  .outlook-card.report-unique .outlook-image-fade img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* full bleed, no stretching */
    object-position: top center; /* bias upward to keep faces visible */
  }
  .recognition-swiper {
    height: 240px; /* shorter slider */
  }
  .recognition-swiper img {
    height: 100%;
    object-fit: cover;
  }
  .recognition-captions {
    height: auto; /* no fixed 480px */
    padding: 20px; /* reduced padding */
    font-size: 14px;
  }
  .recognition-captions p {
    font-size: 14px;
    line-height: 1.5;
  }
  .framework-masonry {
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    grid-auto-rows: minmax(180px, auto); /* flexible height */
  }
  /* Reflow items naturally in grid order */
  .king, .uk, .ir, .gri, .sdg, .ifrs, .nssf, .nssf-bottom {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  /* Let tall card span both columns */
  .nssf {
    grid-column: 1 / span 2;
    grid-row: auto;
    text-align: center;
    padding: 40px 20px;
  }
  /* Stack slider content for mobile + portrait tablets */
  .theme-carousel .swiper-slide {
    flex-direction: column; /* stack image above text */
    height: auto; /* let height grow naturally */
  }
  .theme-carousel .image-side, .theme-carousel .text-side {
    flex: none;
    width: 100%; /* full width each */
    height: auto;
  }
  .theme-carousel .text-side {
    padding: 20px;
    text-align: left;
  }
  .theme-carousel .text-inner {
    max-width: 100%;
    padding: 20px;
  }
  /* Adjust swiper container height on smaller screens */
  .theme-carousel .swiper, .theme-carousel .swiper-wrapper, .theme-carousel .swiper-slide {
    height: auto !important;
  }
  /* Hide swiper pagination dots */
  .theme-carousel .swiper-pagination {
    display: none !important;
  }
  /* Make nav arrows smaller */
  .theme-carousel .swiper-button-next, .theme-carousel .swiper-button-prev {
    transform: scale(0.6); /* shrink size */
    width: 28px; /* adjust width */
    height: 28px; /* adjust height */
  }
  /* Hide pagination and its reserved space */
  .theme-carousel .swiper-pagination {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Ensure swiper wrapper collapses tight */
  .theme-carousel .swiper, .theme-carousel .swiper-wrapper, .theme-carousel .swiper-slide {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  /* Optional: move them closer to text so they don't overlap weirdly */
  .theme-carousel .swiper-button-next {
    right: 8px;
  }
  .theme-carousel .swiper-button-prev {
    left: 8px;
  }
  .pull-quote {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    color: #fff;
    margin: 0;
    position: relative;
  }
  .sm-p-l-0 {
    padding-left: 0px !important;
  }
  /* Make cards auto height */
  .glance-card {
    height: auto;
    padding: 0px !important;
  }
  /* Front glassy overlay adapts to content */
  .glance-front {
    position: relative; /* remove absolute stacking */
    top: 20;
    left: 0;
    right: 0;
    height: auto;
    margin-top: 10px;
  }
  /* Stack icon above text */
  .glance-icon {
    position: relative;
    margin: 0 auto 15px auto; /* center and space below */
    left: auto;
    top: auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  /* Reset text padding */
  .glance-body {
    padding-left: 0;
    text-align: center;
  }
  .framework-masonry-org {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .framework-masonry-org .process-step-card, .framework-masonry-org .process-step-card-org {
    width: 100%;
    height: auto !important; /* allow natural height */
  }
  .process-step-card-org img {
    position: relative; /* reset so it doesn’t crop */
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  .map-legend-grid .row {
    display: flex !important;
    flex-direction: column;
    gap: 15px;
  }
  .map-legend-grid .col {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    text-align: left !important;
  }
  .map-legend-grid .legend-icon {
    width: 100px;
    height: 100px;
    margin: 0; /* remove auto centering */
    flex-shrink: 0;
  }
  .map-legend-grid .legend-label {
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    white-space: normal;
  }
  .values-2025-grid2 {
    grid-template-columns: repeat(1, 1fr);
  }
  .journey2025-layout {
    flex-direction: column; /* stack image above text */
    align-items: center; /* center content */
    text-align: center; /* center headings/text */
    gap: 20px;
    margin-bottom: 40px;
  }
  .journey2025-line {
    left: 50%; /* center vertical line */
    transform: translateX(-50%);
  }
  .journey2025-image-outer {
    width: 100%;
    max-width: 320px; /* keep image neat */
    margin-bottom: 20px;
  }
  .journey2025-card {
    width: 100%;
    text-align: left; /* left align text for readability */
    padding: 18px;
  }
  .journey2025-circle {
    bottom: -25px; /* position closer under image */
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    padding: 10px;
  }
  /* Financial Tables Responsive Scroll */
  .financial-tables .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
    border-radius: 20px; /* keep rounded style */
  }
  #header #logo, #logo {
    position: relative !important;
    width: auto !important;
    float: left !important;
    text-align: left !important;
    margin-left: 16px !important; /* tweak spacing */
    height: 60px !important;
    padding: 0 !important;
  }
  #mainMenu-trigger {
    position: relative;
    opacity: 1;
    visibility: visible;
    padding-right: 25px;
  }
  .financial-tables .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px; /* room for scrollbar */
    margin-bottom: -12px; /* keeps card height consistent */
    border-radius: 20px;
  }
  /* Chrome/Edge/Android gradient scrollbar */
  .financial-tables .table-responsive::-webkit-scrollbar {
    height: 6px; /* slim, subtle bar */
  }
  .financial-tables .table-responsive::-webkit-scrollbar-track {
    background: transparent; /* no white gap */
  }
  .financial-tables .table-responsive::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #1f6dd8, #7a47c2, #17bba6);
    opacity: 0.6; /* transparent effect */
    border-radius: 10px; /* smooth pill look */
  }
  .accordion .ac-item {
    padding: 12px !important;
  }
  /* Force consistent borders for NSSF tables */
.nssf-table {
  border-collapse: collapse;
  width: 100%;
  border-spacing: 0;
}

.nssf-table th,
.nssf-table td {
  border: 1px solid rgba(0,0,0,0.1); /* subtle divider */
  padding: 12px 15px;
  vertical-align: top;
}

.nssf-table thead th {
  border: 1px solid rgba(255,255,255,0.2); /* lighter in header */
}

.nssf-table tbody tr {
  background: #fff; /* ensure white cards */
}

.nssf-table tfoot td {
  border: none;
}
 .hiinnovator-grid .top-row,
  .hiinnovator-grid .bottom-row {
    grid-template-columns: 1fr;   /* one column */
    gap: 20px;                   /* spacing between stacked cards */
  }

  /* Make portrait + landscape images full width */
  .hiinnovator-grid .portrait-card img,
  
  .hiinnovator-grid .landscape-card img {
    width: 100%;
    height: auto;
  }

  /* Ensure text card takes full width */
  .hiinnovator-grid .text-card {
    width: 100%;
  }
  .sexy-caption {
    font-size: 10px;
    line-height: 1.5;
    max-width: 90%;
}
  
.read-more-icon {
 
  width: 30px;
  height: 30px;
  
}
.read-more-icon i {
  font-size: 16px;
  color: #fff!important;
}
 .caption-wording {
  font-size: 10px!important;
  line-height: 1.3;
  max-width: 90%;
}
  .text-smaller {
    font-size: 10px !important;
    font-weight: 500 !important;
    line-height: 12px;
}
  .themeSplitSwiper .swiper-slide {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .themeSplitSwiper .text-side {
    width: 100%;
    margin: 0 auto;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .themeSplitSwiper .text-inner {
    padding: 15px; /* adjust as you like */
    margin: 0 auto;
    max-width: 100%;
    box-sizing: border-box;
  }
  .matrix-tables .table-responsive {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .matrix-tables .table-responsive::-webkit-scrollbar {
    height: 4px; /* thin bar */
  }

  .matrix-tables .table-responsive::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #18428F, #6C3FB6); /* your NSSF blue  purple */
    border-radius: 2px;
  }

  .matrix-tables .table-responsive::-webkit-scrollbar-track {
    background: transparent;
  }
  .performance-tables .table-responsive {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  background: #fff; /* white background for performance tables */
  border-radius: 20px;
  box-shadow: 0 4px 25px rgba(0,0,0,0.08);
}
.performance-tables th .fa-duotone {
  margin-right: 6px;
}

.performance-tables th span {
  white-space: nowrap; /* keeps text in one line */
  font-size: 0.9rem;
}
.performance-tables .table-responsive::-webkit-scrollbar {
  height: 4px; /* thin bar */
}

.performance-tables .table-responsive::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #18428F, #6C3FB6); /* same blue-purple */
  border-radius: 2px;
}

.performance-tables .table-responsive::-webkit-scrollbar-track {
  background: transparent;
}

  .gov-glance-card {
    position: relative;       /* cards flow naturally */
    margin-bottom: 20px;      /* spacing between stacked cards */
    height: auto;             /* reset any fixed heights */
  }

  .gov-glance-front {
    position: relative;       /* remove absolute overlaying */
    top: 20;
    left: 0;
    right: 0;
    min-height: auto;
    padding: 20px;            /* tighter, consistent padding */
  }

  .gov-glance-icon {
    position: relative;       /* put icon above text */
    left: auto;
    top: auto;
    margin-bottom: 15px;
  }

  .gov-glance-body {
    padding-left: 0;          /* remove forced offset */
    text-align: left;         /* keep readability */
  }

  .gov-glance-body p {
    font-size: 14px;
    line-height: 1.5;
  }
  .compliance-callout .call-out-box-front {
    display: flex;
    flex-direction: column; /* stack vertically */
    align-items: center;    /* center the icon */
    text-align: left;     /* optional: center text */
  }

  .compliance-callout .call-out-box-icon {
    position: relative;
    margin: 0 auto 20px auto; /* icon on top with spacing below */
    left: auto;
    top: auto;
  }

  .compliance-callout .call-out-box-body {
    padding-left: 0;  /* remove left offset */
  }
  .btn-ored {
  background-image: linear-gradient(135deg, var(--c-orange), var(--c-red));
  white-space: nowrap;        /* keep all text in one line */
  display: inline-block;
  padding: 12px 24px;         /* breathing room */
  min-width: 220px;           /* ensure button doesn’t shrink too much */
  text-align: center;
}
  .foreword-icon {
    max-height: 50px;   /* smaller size for mobile/tablet */
    margin-left: 0;     /* remove spacing that pushed them right */
    margin-right: 10px; /* small gap between icons */
  }
  
  .timeline-line-centered {
   
    position: absolute;

    bottom: 0;                   /* end at bottom of wrapper */
    left: 50%;                   /* center horizontally */
    transform: translateX(-50%);
    width: 0px;                  /* thickness */
    background: linear-gradient(180deg, #f26a21, #7b3fe4, #00a8bc);
    border-radius: 2px;
    z-index: -1;
  }
  .esg-card {
    margin-top: 20px;     /* smaller vertical spacing */
    padding: 18px;        /* slightly less padding */
    border-radius: 16px;  /* softer curve for smaller screens */
    min-height: 364px;     /* let them grow as long as content needs */
  }
  /* === Assurance Section Unique Overrides === */

/* Make icon smaller on desktop + sit neatly at top */
 .assurance-section .timeline-card {
    flex-direction: column !important;   /* stack items vertically */
    align-items: flex-start;
    text-align: left;
    padding: 20px;
  }

  .assurance-section .timeline-icon-circle {
    margin: 0 auto 15px auto;            /* center icon on top */
    font-size: 24px;                     /* a bit smaller for mobile */
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
   .profile-actions-mobile-stack .col,
  .profile-actions-mobile-stack .col-md-2,
  .profile-actions-mobile-stack .col-12 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .profile-actions-mobile-stack .btn-profile {
    width: 100%; 
    margin-bottom: 10px;
  }
  .legend-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;      /* allow wrapping */
  white-space: normal;  /*  let text break into new line */
}

.legend-card i {
  flex: 0 0 auto;       /* icon stays fixed */
  margin-right: 8px;
}
  
  .icon-inline-small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;      /* smaller circle */
  height: 42px;
  font-size: 14px;  /* smaller icon */
  margin-left: 8px; /* spacing from heading */
    margin-bottom:0px!important;
}
  
  .emp-engage-img-card {
    min-height: 200px; /* adjust as needed */
  }

  .emp-engage-img-card img {
    height: 100%;
    object-fit: cover;
  }
  .sustain-graph-img {
    height: 300px !important; /* or whatever works best */
    width: 100%!important;
    object-fit: contain!important;
  }
}
@media (max-width: 768px) {
  /* Force table into stacked blocks */
  .location-tables table, .location-tables thead, .location-tables tbody, .location-tables tr, .location-tables th, .location-tables td {
    display: block;
    width: 100% !important;
  }
  /* Hide the second header row (with 4 columns) */
  .location-tables thead:nth-of-type(2) {
    display: none;
  }
  /* Reset table cell style for stacked blocks */
  .location-tables td {
    margin: 0;
    padding: 20px;
    background: #fff;
    border: none !important; /* remove desktop borders */
    border-radius: 0 !important; /* no rounding by default */
    box-shadow: none; /* flat, no shadow */
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* bottom divider only */
  }
  /* First block: no rounding at top */
  .location-tables td:first-of-type {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }
  /* Last block: remove divider + rounded bottom corners */
  .location-tables td:last-of-type {
    border-bottom: none !important;
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
  }
  /* Add heading above each card from data-label */
  .location-tables td::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 12px;
    text-align: left;
  }
  /* Center icons */
  .location-tables .stat-icon {
    text-align: left;
    margin-bottom: 15px;
  }
  /* Override the vertical divider and turn it into bottom divider */
  .glassy-material-table td:not(:last-child)::after, .glassy-material-table th:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    top: auto; /* reset desktop positioning */
    right: auto;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(140, 82, 255, 0.9), rgba(255, 64, 64, 0.9));
    pointer-events: none;
  }
  .report-card {
    grid-column: span 2;
    grid-row: span 1;
  }
  .report-card {
    height: auto;
    max-height: 179px;
    overflow: hidden;
    border-radius: 20px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .card-grid .image-card:last-of-type {
    display: none !important;
  }
  .card-wide .card-grid figure {
    grid-column: span 2 !important; /* reset the column span */
    grid-row: span 1 !important; /* make it span down instead */
  }
  .card-grid .card-tile img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: inherit;
  }
  a.btn.btn-red.btn-xl.btn-rounded.btn-mobile.font-weight-600 {
    font-size: 14px !important;
    line-height: 1.4 !important;
    padding: 10px 18px !important;
    height: auto !important; /* remove the squashed 32px */
    min-height: 44px !important; /* finger-friendly size */
    border-radius: 30px;
    display: inline-block;
  }
  /* Hide the shifted image ONLY on home page */
  /* Make the shift-up image span across the grid */
  #about-our-theme .card-grid .image-shift-up {
    grid-column: span 2 !important;
    margin-top: 0px; /* adds spacing below the section above */
    margin-bottom: 20px; /* ensures following images don’t overlap */
  }
  /* Fix top spacing for the first wide image */
  #about-our-theme .card-grid .card-wide:first-child {
    margin-top: 0 !important;
  }
  .leader-section .leader-text {
    margin-left: 0 !important;
    width: 100%;
    border-radius: 20px; /* optional */
    padding: 30px 20px;
  }
  .sm-p-20 {
    padding: 20px !important;
  }
  .sdg-pull {
    flex-direction: column; /* stack icon above text */
    align-items: center; /* center both */
    text-align: left; /* text aligned under icon */
  }
  .sdg-pull .sdg-icon-circle {
    margin-bottom: 12px; /* spacing under icon */
  }
  .map-legend-grid .row {
    display: grid !important;
    grid-template-columns: 1fr; /* default: 1 per row */
    gap: 20px;
  }
  #logo {
    text-align: left !important;
  }
  
}
/* Tablets: switch to 2 per row */
@media (min-width: 576px) {}
@media (max-width: 767px) {
  .outer-card-reports .row {
    flex-direction: column; /* stack vertically */
  }
  .outer-card-reports {
    border-radius: 20px;
    padding: 30px !important;
    width: 100%;
    position: relative;
    min-height: auto !important;
    height: auto !important;
  }
  .image-container {
    position: relative;
    width: 100%;
    max-width: 900px;
    height: 190px !important;
    cursor: pointer;
  }
  .outer-card-reports .image-container img {
    animation: none !important; /* stop horizontal floating */
    opacity: 1 !important; /* ensure visible */
    margin: 10px auto; /* spacing between stacked images */
    display: block;
  }
  .image-front {
    position: absolute;
    top: 25px;
    left: -10px !important;
    width: 100%;
    z-index: 2;
    transition: all 0.3s ease-in-out;
  }
  .image-back {
    position: absolute;
    top: -20px;
    left: 20px !important;
    width: 100%;
    z-index: 1;
    transition: all 0.3s ease-in-out;
  }
  .image-back {
    position: absolute;
    top: -20px;
    left: 10px;
    width: 100%;
    z-index: 1;
    transition: all 0.3s ease-in-out;
  }
  .img-fluid {
    max-width: 100%;
    height: auto;
  }
  
  .image-container {
    position: relative;
    width: 100%;
    max-width: 900px;
    height: 190px;
    cursor: pointer;
  }
  .image-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    height: 400px;
    cursor: pointer;
  }
  [role="button"] {
    cursor: pointer;
  }
  @media (max-width: 767px) {
    .outer-card-reports .floating-image-wrapper {
      margin-top: 20px;
      text-align: center;
    }
  }
  @media (max-width: 576px) {
    #header #logo {
      position: absolute !important;
      width: 100%;
      text-align: left !important;
      margin: 0 !important;
      float: none;
      height: 80px;
      left: 20px !important;
      right: 0;
      padding: 0 !important;
    }
  }
  @media (max-width: 768px) {
    .outer-card-reports .col-lg-5, .outer-card-reports .col-lg-7 {
      max-width: 100%;
      flex: 0 0 100%; /* full width columns */
      position: relative !important;
      padding: 20px;
    }
    /* Ensure images drop below text */
    .outer-card-reports .floating-image-wrapper {
      margin-top: 20px; /* add space below the text */
      text-align: center; /* center align images */
    }
    .outer-card-reports .floating-image-wrapper img {
      max-width: 90%; /* keep images responsive */
      height: auto;
    }
    #about-our-theme .container {
      padding-right: 10px !important;
    }
    .outer-bus {
      padding: 30px;
      border-radius: 1rem;
      position: relative;
      z-index: 1;
    }
    .vertical-label {
      position: absolute;
      top: 90%;
      right: 62px;
    }
    .p-t-100 {
      padding-top: 60px !important;
    }
    .p-b-100 {
      padding-bottom: 60px !important;
    }
    .m-t-100 {
      margin-top: 60px !important;
    }
    section {
      padding: 50px 0;
      position: relative;
    }
    .toc-section .outer-card.gradient-bg {
      padding: 30px;
      border-radius: 20px;
      color: #fff;
    }
    .marquee-text {
      font-size: 12px; /* smaller for mobile */
      white-space: normal; /* allow wrapping */
      line-height: 1.4; /* better readability when wrapping */
      text-align: center; /* optional, keeps wrapped text balanced */
      vertical-align: middle !important;
      padding: 10px 20px; /* prevent top alignment */
    }
    .nssf-timeline {
      grid-template-columns: 1fr;
    }
    .framework-masonry {
      grid-template-columns: 1fr !important; /* stack all cards */
    }
    /* Reset special placements */
    .framework-masonry .king, .framework-masonry .uk, .framework-masonry .ir, .framework-masonry .gri, .framework-masonry .sdg, .framework-masonry .ifrs, .framework-masonry .nssf, .framework-masonry .nssf-bottom {
      grid-column: auto !important;
      grid-row: auto !important;
    }
    .outer-heading {
      font-size: 25px;
    }
    .sdg-tile {
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); /* very light */
      border-radius: 12px;
    }
    #topbar ~ #header[data-transparent="true"] + .fullscreen, #topbar ~ #header[data-transparent="true"] + .halfscreen, #topbar ~ #header[data-transparent="true"] + #google-map {
      top: -150px;
      margin-bottom: -150px;
    }
    #header #logo, #logo {
      position: relative !important;
      width: auto !important;
      float: left !important;
      text-align: left !important;
      margin-left: 16px !important; /* adjust spacing from edge */
      height: 60px !important;
      padding: 0 !important;
    }
  }
  @media (max-width: 500px) {
    #header #logo, #logo {
      position: relative !important;
      width: auto !important;
      float: left !important;
      text-align: left !important;
      margin-left: 10px !important;
      height: 50px !important; /* slightly smaller for tiny screens */
      padding: 0 !important;
    }
    .mainMenu-open #header #mainMenu {
      display: block;
      opacity: 1;
      overflow-y: scroll !important;
      min-height: 330px !important;
    }
  }
  /* Mobile responsive stacking for Members table */
  @media (max-width: 767.98px) {
    /* Keep the first row (Members bar), hide only the second row of column headers */
    .members-table thead tr:nth-child(2) {
      display: none;
    }
    .members-table tbody tr {
      display: flex;
      flex-direction: column;
    }
    .members-table tbody td {
      display: block;
      width: 100%;
      margin-bottom: 20px;
      padding: 16px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.7);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }
    .members-table tbody td::before {
      content: attr(data-label);
      display: block;
      font-weight: 700;
      font-size: 1rem;
      margin-bottom: 10px;
      padding: 6px 10px;
      border-radius: 8px;
      background: linear-gradient(135deg, #006FBA, #17BBA6); /* NSSF blue ? teal */
      color: #fff;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }
    .members-table tfoot {
      display: none !important;
    }
    .table-card-icon img {
      height: 40px ; /* adjust size */
    }
    .text-lg, .text-lg span {
        font-size: 20px !important;
        line-height: 32px !important;
    }
    .closing-bar-glassy {
      height:65px;
    }
    .line-button{
      font-size:12px;
    }
    .step-card .card-body {
    flex-direction: column !important;   /* stack vertically */

  }

  .step-card .step-badge {
    margin: 0 auto 12px;                 /* center badge above */
  }

  .step-card h3 {
    padding-left: 0 !important;          /* remove the left padding */
  }
    .call-out-box-front {
    position: relative;
    top: -30px;
    left: 10px; 
    right: auto;
    margin-top: 0;
}
/* Mobile stacked table for material tables */


/* Show gradient heading only on mobile */
.mobile-heading {
  display: block;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  padding: 10px 15px;
  border-radius: 6px 6px 0 0;
  margin-bottom: 12px;
  background: var(--g2-blue-purple, linear-gradient(135deg, #2d2fa2, #6a00ff));
}
    .material-tables thead {
    display: none !important;
  } 
    .cap-icons-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr); /* 3 per row */
    gap: 0px;
    justify-items: center;
  }
.mobile-heading-alt {
  display: block;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  padding: 10px 15px;
  border-radius: 6px 6px 0 0;
  margin-bottom: 12px;
}
  .cap-icons-row img {
    height: 50px;
    width: auto;
  }
    
    .p-80{
      padding:30px!important;
    }   
  .simple-matters {
    background: none !important;  /* remove background */
    box-shadow: none !important;  /* remove card shadow */
    border: none !important;      /* remove border */
    padding: 0 !important;        /* flatten padding */
  } 
    .sm-p-l-20{
      padding-left:20px!important;
    }
    .sm-p-r-20{
      padding-right:20px!important;
    }
    /* Default: side-by-side layout */
.target-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .target-inner .value-icon {
    margin-bottom: 15px;
  }
  .target-inner .value-text {
    text-align: center;
  }
    .fa-4x {
    font-size: 3rem !important; /* adjust size for mobile */
  }
    .no-shadow {
  box-shadow: none !important;
}
    .sm-p-b-0{
      padding-bottom: 0px!important;
    }
    .process-step-card2 img.card-item-img {
    height: 150px !important;
    object-fit: cover;
    object-position: center;
  }
   .my-height {
    min-height: 150px !important;
} 
    .label-text {
    font-size: 10px;
    font-weight: 600;
    color: #fff;
}
    .bar-value2 {
    background: #fff;
    color: #000;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex
;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
    .lets-ride {
    height: 150px!important;   /* set your desired height */
    object-fit: cover!important; /* keeps it neat */
    width: 100%!important;      /* makes sure it spans full width */
  }
    .sustain-graph-img {
    height: 300px !important; /* or whatever works best */
    width: 100%!important;
    object-fit: contain!important;
  }
    .hide-mobile {
    display: none !important;
  }
    .border-radius-0{
      border-radius: 0px!important;
    }
    .mobile-img-fix.table-card-body img,
  img.mobile-img-fix {
    height: 150px !important;   /* stronger + mobile-only */
    object-fit: cover;
    width: 100%;
  }
   .btn-wrap {
  white-space: normal;      /* allow wrapping */
  word-break: break-word;   /* break long words if needed */
  text-align: center;       /* keep text centred inside button */
  line-height: 1.4;         /* improve multi-line readability */
  padding: 12px 24px;       /* increase vertical padding for 2 lines */
  display: inline-block;    /* ensures height adjusts automatically */
}
  }