@media(max-width:1024px) {

  .top_menubg,
  .header_bg {
    display: none
  }

  .mb-menu {
    background-color: #fff;
    padding: 10px;
    display:inline-block;
    width: 100%;
  }

  .mb-menu .logo {
    float: left
  }

  .ham-icon1 {
    float: right;
    /* margin-top: 15px; */
  }

  .menu,
  .nav-icon3 {
    display: none
  }

  .my-sidenav {
    width: 0;
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    overflow-x: hidden;
    z-index: 999999999;
    height: 100vh;
    max-width: 0;
    width: 100%;
    background-color: #32ad56;
    transition: .5s;
    -webkit-transition: .5s
  }

  .my-sidenav>ul {
    padding: 0 20px
  }

  .my-sidenav>ul>li>ul {
    margin-top: 0;
    display: none
  }

  .my-sidenav ul.submenu li ul.submenu {
    display: none;
    position: static;
    width: 100%
  }

  .my-sidenav ul {
    list-style-type: none;
    padding-left: 15px
  }

  .my-sidenav ul li {
    border-bottom: 1px solid #fff;
    padding: 15px 0
  }

  .my-sidenav>ul>li>ul>li {
    border-bottom: 1px solid #fff;
    padding: 10px 0
  }

  .my-sidenav>ul>li>ul>li:last-child,
  .my-sidenav ul.submenu li ul.submenu li:last-child {
    border-bottom: 0
  }

  .my-sidenav ul.submenu li ul.submenu li {
    border-bottom: 1px solid #fff;
    padding: 10px
  }

  .my-sidenav ul.submenu li ul.submenu li a {
    color: #fff;
    font-size: 16px
  }

  .cross-btn1 {
    text-align: right;
    padding: 16px 14px 0 0;
    color: #fff;
    font-size: 35px;
    cursor: pointer
  }

  .my-sidenav .submenu-indicator-minus .submenu-indicator {
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
  }

  .my-sidenav .submenu-indicator {
    font-size: 30px;
    position: absolute;
    line-height: 25px;
    right: 15px
  }

  .my-sidenav>ul>li>a {
    color: #fff;
    font-size: 18px;
    display: block;
    font-family: Proxima-Bold
  }

  .my-sidenav>ul>li>ul>li>a {
    color: #fff;
    font-size: 14px
  }

  .my-sidenav>ul>li>ul>li>a img {
    padding-right: 10px;
    float: right
  }

  .m-drop1 a {
    font-family: Proxima-Bold;
    font-size: 16px !important
  }

  .m-drop1 ul li a {
    font-family: Proxima-Regular;
    font-size: 14px !important
  }

}

@media(max-width:991px) {
 
.footer_left {
  float: left;
  width: 100%;
  height: auto;
  padding-top: 8px;
}

.footer_right {
  float: right;
  height: auto;
  margin-right: 0px;
}

p.footer_txt a {
  font-size: 11px;
  color: #c1c1c1;
  text-decoration: none;
  margin-left: 4px;
  margin-right: 4px;
  border-bottom-style: dotted;
  border-bottom: 1px #ccc dotted;
}

.ftrleftright {
  display: none;
}

.logo a img {
  width: 120px;
}

}

@media(max-width:767px) {
  .footer_right{
    padding-bottom: 75px;
}
.capDivider{
  margin: 10px 0;
}
.toolbar
  {
    bottom: 0px;
    top: auto;
    width: 100%;
  }
  .tools
  {
    display: flex;
    justify-content: space-between;
    border-radius: 17px 17px 0px 0px;
  }
  .glimpseImg{
    width: 100%;
  }
  .tool+.tool
  {
    margin-top: 0;
  }
  .tool__dropout--recommend
  {
    right: -40%;
    top:-410%;
  }
  .recommend
  {
    display: block;
  }
  .recommend__item
  {
    display: block;
    margin-right: 0;
    margin-bottom: 10px;
  }
      .lining-box-reserch .col-md-4 {
        padding: 0px 0px;
    }
      .lining-box-reserch {
        margin: 50px 0px 0px 0px;
    }
  .lining-box-reserch h3 {
        top: -54px;
        padding: 20px;
        font-size: 20px;
        height: auto;
        width: 80%;
    }
        .lowerrisk {
        position: relative;
        left: 0px;
        padding: 20px;
        height: auto;
        width: 90%;
    }
  .goverHeight {
    height: auto;
  }
  .somkeybox {
    margin-top: 87px;
  }

.mobile-video
{
  display: block;
}
.desktop-video
{
  display: none;
}
.mobile-video,
.mobile-video video {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}
.bannerTxts
{
  display: block;
}

#header-wrap
{
  display: block !important;
}

}

@media(max-width:480px) {

}

/* ===================== Footer redesign — responsive ===================== */
@media (max-width: 991px) {
  .footerGrid .footer_col {
    padding: 0 22px;
  }
  .fRow {
    grid-template-columns: repeat(2, 1fr);
  }
  .footerGrid .footer_col:not(:nth-child(3n)) {
    border-right: 0;
  }
  .footerGrid .footer_col:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, 0.22);
  }
  .fRow .footer_col {
    margin-bottom: 24px;
  }
  .footerSocial {
    margin-top: 20px;
  }
}

@media (max-width: 767px) {
  #section16 {
    padding: 35px 20px 30px;
  }
  .fRow {
    grid-template-columns: 1fr;
  }
  .footerGrid .footer_col {
    padding: 16px 0;
    margin-bottom: 0;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  }
  .fRow-top .footer_col,
  .fRow-btm .footer_col {
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .footerSocial {
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 25px;
  }
  #section17 {
    padding-bottom: 78px;
  }
  #section17 .container-home {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}

/* ===================== Our Business / About — responsive ===================== */
@media (max-width: 991px) {
  .aboutHmHead {
    font-size: 32px;
    line-height: 38px;
  }
}

@media (max-width: 767px) {
  .ourBusiness {
    padding: 35px 0;
  }
  .ourBusinessBox {
    padding: 25px 18px;
  }
  .aboutHmTxt {
    margin-top: 30px;
    text-align: center;
  }
  .aboutHmHead {
    font-size: 28px;
    line-height: 34px;
  }
}

/* ===================== Chairman's Letter — responsive ===================== */
@media (max-width: 991px) {
  .chairContent {
    margin-top: 30px;
  }
}

@media (max-width: 767px) {
  .mdSec .chairContent{
    padding: 30px 22px;
  }
  /* MD section: show the image column first, then the content, on mobile */
  .mdSec .row > [class*="col-"]:nth-child(1) {
    order: 2;
  }
  .mdSec .row > [class*="col-"]:nth-child(2) {
    order: 1;
  }
  .kpiHeading{
    margin-bottom: 40px;
  }
  .chairmanSec {
    padding: 0 0;
  }
  .chairContent {
    padding: 30px 22px;
  }
  .chairHead {
    font-size: 28px;
    line-height: 34px;
  }
  .chairNames {
    flex-wrap: wrap;
    gap: 14px;
  }
}


/* ===================== KPI section — responsive ===================== */
@media (max-width: 991px) {
  .kpiHeading h2 {
    font-size: 28px;
    line-height: 32px;
  }
}

@media (max-width: 767px) {
  .kpiSec {
    padding: 60px 0 40px;
  }
  /* Mobile: cards vary in height (some slides have fewer graphs). Stack every slide
     in one grid cell so the deck sizes to the tallest card, and make each card fill
     that height — a shorter active card then fully covers the taller cards behind it
     (no next-slide graphs peeking out below). */
  .kpiDeck {
    display: grid;
    min-height: 0;
  }
  .kpiSlide {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    transform: none !important;
  }
  .kpiCard {
    height: 100%;
  }
  .kpiCard .row [class*="col-"] {
    margin-bottom: 12px;
  }
  .kpiCard .row [class*="col-"]:last-child {
    margin-bottom: 0;
  }
  .kpiBottom {
    flex-wrap: wrap;
    gap: 18px;
    justify-content: center;
    text-align: center;
  }
  .kpiCount,
  .kpiNav {
    min-width: auto;
  }
  .kpiHeading {
    order: -1;
    flex: 0 0 100%;
  }
  .kpiHeading h2 {
    font-size: 28px;
    line-height: 30px;
  }
  .vcmHead h2{
    font-size: 28px;
  }
}

/* ===================== Six Capitals accordion — responsive ===================== */
@media (max-width: 767px) {
  .accHead .container {
    gap: 12px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .accNum,
  .accTitle {
    font-size: 18px;
  }
  .accInner {
    padding: 10px 0 32px;
  }
  .accBlock {
    margin-bottom: 20px;
  }
}

@media (max-width: 767px) {
  .accModel::before {
    display: none;
  }
}

/* ===================== Business Segment Review hero — responsive ===================== */
@media (max-width: 991px) {
  .segSlide {
    min-height: 100vh;
  }
  .segHead {
    font-size: 28px;
    line-height: 34px;
  }
}

@media (max-width: 767px) {
  .segSlide {
    min-height: 100vh;
  }
  .segSlide::before {
    background: linear-gradient(90deg, rgba(2, 10, 20, 0.82) 0%, rgba(2, 10, 20, 0.5) 60%, rgba(2, 10, 20, 0.25) 100%);
  }
  .segHead {
    font-size: 24px;
    line-height: 30px;
  }
  .segLabel {
    font-size: 15px;
  }
  .segControls {
    bottom: 20px;
  }
  .segArrow {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
}

/* ===================== ESG tabbed section — responsive ===================== */
@media (max-width: 767px) {
  .esgSec {
    padding: 40px 0;
  }
  .esgTab {
    flex-direction: column;
    gap: 6px;
    padding: 14px 8px;
  }
  .esgTabLabel {
    font-size: 12px;
  }
  .esgTabIcon img {
    width: 26px;
    height: 26px;
  }
  .esgPanel {
    padding: 26px 18px;
  }
  .esgImg {
    margin-top: 22px;
  }
  .govScaleBand{
    margin-bottom: 20px;
  }
  .govSecImg{
    margin-bottom: 0;
  }
  .susSec{
    padding-top: 0;
  }
  .vcm-tabs{
    padding-bottom: 0;
  }
  .vcm-model-card:not(:last-child){
    padding-bottom: 20px;
  }
  .kbeEnablersList{
    display: inline;
  }
  .kbeEnablersList li{
    padding-bottom: 15px;
  }
}

/* ===================== Glimpses slider — responsive ===================== */
@media (max-width: 767px) {
  .shareholder-twocol-col--right{
    padding-left: 0;

  }
  .shareholder-block-title--center{
    text-align: left;
  }
  .bm-chart-title.new{
    padding-bottom: 15px;
  }
  .glimpsesSec {
    padding: 20px 0;
  }
  .glimpsesHeading {
    font-size: 28px;
    line-height: 32px;
    margin-bottom: 28px;
  }
  .glimpseCaption {
    width: 100%;
    padding: 13px 16px;
  }
  .glimpsesControls{
    margin-top: 0;
    margin-bottom: 0;
  }
  .glimpseCard{
    padding-bottom: 20px;
  }
  .glimpseCaption{
    position: relative;
    min-height: 160px;
    display: flex;
    align-items: center;
  }
}

@media (max-width: 991px) {
  .glimpsesSlider .item {
    width: 340px;
  }
}
@media (max-width: 767px) {
  .glimpsesSlider .item {
    width: 100%;
  }
}

/* ===================== Business Responsibility hero — responsive ===================== */
@media (max-width: 767px) {
  .brHeading {
    font-size: 26px;
    line-height: 34px;
  }
}

/* ===================== Expanding Global Footprint — responsive ===================== */
@media (max-width: 1199px) {
  .fpMap {
    margin-top: 30px;
  }
}
@media (max-width: 767px) {
  .footprintSec {
    padding: 40px 0;
  }
  .footprintHeading {
    font-size: 28px;
    line-height: 32px;
    margin-bottom: 28px;
  }
}
@media (max-width: 767px) {
    .sitemap {
        padding-top: 10px;
        padding-bottom: 20px;
    }
    .managing-banner{
      padding-bottom: 20px;
    }
    .managing-banner.paf-banner {
      padding-top: 10px;
    }
    .ldMatrixBg{
      padding: 0 10px;
    }
    .ldMatrixBg .diStat{
      margin-bottom: 0;
    }
    .aiBanner .aiHero{
      top: 72%;
    }
}

/* ===================== Materiality Assessment — responsive ===================== */

@media (max-width: 767px) {
  .aiPointList{
    margin: 10px 0px 0 ;
  }
  .matTitle {
    font-size: 26px;
    line-height: 32px;
  }
  .matCat .row [class*="col-"] {
    margin-bottom: 22px;
  }
  .matIcons {
    max-width: 260px;
  }
  .kbeEnablersList{
    display: inline-block;
  }
  .kbeEnablersList li{
    padding-bottom: 10px;
  }
}

/* ===================== Risks & Opportunities — responsive ===================== */
@media (max-width: 1024px) {
  .riskSec {
    padding: 20px 0 50px;
  }
}

/* ===================== Glimpses 2025-26 — responsive ===================== */
@media (max-width: 1024px) {
  .glimpses2025 {
    padding: 20px 0 50px;
  }
}
@media (max-width: 767px) {
  .glCorner {
    display: none;
  }
  .glHeading {
    font-size: 26px;
    line-height: 32px;
    margin-bottom: 28px;
  }
}

/* ===================== Managing Director's Message — responsive ===================== */
@media (max-width: 991px) {
  .mdmHeroImg {
    margin-top: 30px;
  }
}
@media (max-width: 767px) {
  .mdmTitle {
    font-size: 30px;
    line-height: 36px;
  }
  .mdmQuote p {
    font-size: 18px;
    line-height: 26px;
  }
}

/* ===================== Sustainability — responsive ===================== */
@media (max-width: 991px) {
  .susBannerImg {
    margin-top: 26px;
  }
}
@media (max-width: 767px) {
  .susTitle {
    font-size: 28px;
    line-height: 34px;
  }
  .susIntroRow .col-md-6:first-child {
    margin-bottom: 18px;
  }
}

/* ===================== Environmental — responsive ===================== */
@media (max-width: 767px) {
  .envTestImg {
    margin-bottom: 18px;
  }
}

@media (max-width: 767px) {
  .envClimateRow .col-md-6:first-child {
    margin-bottom: 22px;
  }
}

/* ===================== Governance page ===================== */
@media(max-width:991px){
	.govScaleGrid{grid-template-columns:1fr 1fr;grid-template-areas:"img img" "a1 a6" "a2 a5" "a3 a4";}
	.gsImg{margin:0 auto 24px;}
	.govBracketList,.govCapGrid{grid-template-columns:1fr;}
}
@media(max-width:575px){
	.govScaleGrid{grid-template-columns:1fr;grid-template-areas:"img" "a1" "a2" "a3" "a4" "a5" "a6";}
}

/* ===================== Social - People page ===================== */
@media(max-width:991px){.peopleCultures{grid-template-columns:repeat(2,1fr);}}
@media(max-width:575px){.peopleCultures{grid-template-columns:1fr;}}

/* Social - People — Five-Pillar cards stack */
@media(max-width:767px){.pillarGrid{grid-template-columns:1fr;}.peopleFiveHead::before,.peopleFiveHead::after{width:40px;}}

/* Social - People — hide pillar corner SVG on stacked layout */
@media(max-width:767px){.pillarCorner{display:none;}}

/* ===================== Key Initiatives Undertaken page ===================== */
@media(max-width:991px){.kiStatGrid{grid-template-columns:repeat(2,1fr);}.kiCards{grid-template-columns:1fr;}}
@media(max-width:575px){.kiStatGrid{grid-template-columns:1fr;}}

/* Key Initiatives — Key Listening Platforms stack on small screens */
@media(max-width:767px){
	.kiListenCards{grid-template-columns:1fr;grid-template-areas:none;}
	.kiListenCards .kiCard{grid-area:auto !important;border-right:none;border-bottom:1px solid #a9d18e;}
	.kiListenCards .kiCard:last-child{border-bottom:none;}
}

/* ===================== Circle of Happiness page ===================== */
@media(max-width:991px){.cohStatGrid{grid-template-columns:repeat(2,1fr);}.cohDaan{grid-template-columns:1fr;}}
@media(max-width:575px){.cohStatGrid{grid-template-columns:1fr;}}

/* Circle of Happiness — Lives Impacted stacks on small screens */
@media(max-width:767px){
	.cohLivesRow{grid-template-columns:1fr;}
	.cohLivesLeft{padding-right:0;border-right:none;padding-bottom:24px;margin-bottom:8px;}
	.cohLivesRight{padding-left:0;}
}

/* ===================== Rewards & Recognition page ===================== */
@media(max-width:991px){.rrCards{grid-template-columns:repeat(2,1fr);}.rrBenefitsBox{column-count:2;}}
@media(max-width:575px){.rrCards{grid-template-columns:1fr;}.rrBenefitsBox{column-count:1;}}

/* ===================== Diversity and Inclusion page ===================== */
@media(max-width:991px){.diMomGrid{grid-template-columns:1fr;}.diStatGrid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:575px){.diStatGrid{grid-template-columns:1fr;}}

/* Learning and Development — PDP Highlights: stack logo above content, drop the left-hung logo offset */
@media(max-width:767px){
  .ldPdp{flex-direction:column;gap:14px;margin:22px 0 10px;padding:18px 16px 22px;border-radius:0 0 0 16px;}
  .ldPdpTop{flex-direction:column;gap:12px;}
  .ldPdpLogo{position:static;left:auto;top:auto;}
  .ldPdpLogo img{width:84px;}
  .ldPdpContent{padding-left:0;}
}

/* ===================== Board of Directors page ===================== */
@media(max-width:767px){.bodGrid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:479px){.bodGrid{grid-template-columns:1fr;}}

/* Board of Directors — committees stack tighter on small screens */
@media(max-width:767px){.bodCommList{grid-template-columns:repeat(2,auto);}}
@media(max-width:479px){.bodCommList{grid-template-columns:1fr;}}

/* ===================== Executive Leadership & CEOs page ===================== */
@media(max-width:991px){.elPage .bodGrid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:767px){.elPage .bodGrid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:479px){.elPage .bodGrid{grid-template-columns:1fr;}}

/* Executive Leadership — rows stack on small screens */
@media(max-width:767px){.elRow{grid-template-columns:repeat(2,1fr);}}
@media(max-width:479px){.elRow{grid-template-columns:1fr;}}

/* ===================== Senior Management page ===================== */
@media(max-width:991px){.smPage .bodGrid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:767px){.smPage .bodGrid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:479px){.smPage .bodGrid{grid-template-columns:1fr;}}

/* ============================================================
   About the Report page  ===  CSS start
   ============================================================ */
@media (max-width: 991px) {
    .capitalsSec .col-md-6:first-child .capCard:last-child {
        margin-bottom: 40px;
    }
}

@media (max-width: 767px) {
    .aboutReport {
        padding-top: 0px;
    }
    .bannerName{
      left: 0;
    }

    .arBlock {
        margin-bottom: 22px;
    }

    .capCard {
        margin-bottom: 22px;
    }

    .sdgRow {
        gap: 8px;
    }

    .sdgRow img {
        width: 60px;
        height: 60px;
    }
}
/* ============================================================
   About the Report page  ===  CSS end
   ============================================================ */

/* ============================================================
   Chairman letter page  ===  CSS start
   ============================================================ */
@media (max-width: 991px) {
    .aiSummaryGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .aiRow {
        display: block;
        margin-bottom: 26px;
    }

    .aiPhase {
        max-width: 160px;
        min-height: 60px;
        font-size: 18px;
        margin-bottom: 16px;
    }

    .aiSteps {
        flex-wrap: wrap;
        padding-left: 0;
        gap: 18px 0;
    }

    .aiSteps::before,
    .aiSteps::after {
        display: none;
    }

    .aiStep {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* drop the empty spacer steps used only for desktop alignment */
    .aiStep:empty {
        display: none;
    }

    .aiSummaryGrid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .aiPointList {
        column-count: 1;
    }

    .awardQuote {
        margin-top: 24px;
    }
}
/* ============================================================
   Chairman letter page  ===  CSS end
   ============================================================ */

/* ============================================================
   About Happiest Minds page  ===  CSS start
   ============================================================ */
@media (max-width: 1199px) {
    .locCards {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

    .locCards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .ahmCertGrid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .locCards {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .locLoc {
        min-height: 0;
    }

    .shLegend {
        margin-top: 26px;
    }
}
/* ============================================================
   About Happiest Minds page  ===  CSS end
   ============================================================ */

/* ============================================================
   PDES page  ===  CSS start
   ============================================================ */
@media (max-width: 991px) {
    .offCols {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .impactGrid {
        flex-wrap: wrap;
        gap: 22px;
    }

    .impactRow {
        flex: 1 1 100%;
    }

    .impactCols2 {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .offCols {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .offList2col {
        column-count: 1;
    }

    .itCols3 {
        grid-template-columns: 1fr;
        gap: 6px 0;
    }

    .riskGrid {
        flex-wrap: wrap;
    }

    .riskItem {
        flex: 0 0 45%;
        margin-bottom: 20px;
    }

    .impactBlock {
        display: block;
        margin-left: 20px;
        padding-left: 24px;
    }

    .impactLabel {
        max-width: 190px;
        margin-left: -34px;
        margin-bottom: 26px;
    }

    .iconGrid2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .Nextprev{
      margin: 30px 0;
    }
    .Nextprev .leftBtn{
      margin-bottom: 10px;
    }
}

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

    .riskGrid {
        flex-wrap: wrap;
    }

    .riskItem {
        flex: 0 0 30%;
        margin-bottom: 24px;
    }
}

@media (max-width: 575px) {
    .indCard {
        flex: 1 1 100%;
        max-width: 100%;
    }
}
/* ============================================================
   IMSS page  ===  CSS start
   ============================================================ */
@media (max-width: 991px) {
    .secCols--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    .csStudyBody {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .csStudySub {
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .secCols--2,
    .secCols--4 {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .csStudyCard {
        padding: 28px 24px 32px;
    }

    .csStudyTitle {
        font-size: 34px;
    }

    .csStudyNum {
        font-size: 42px;
    }

    .csStudyImpact {
        grid-template-columns: 1fr;
    }

    .pillarGrid {
        display: block;
        border-right: none;
    }

    .pillarGrid::before,
    .pillarGrid::after {
        display: none;
    }

    .pillarCol {
        border-left: none;
        border-top: 1.5px solid #3bb6a0;
        padding: 26px 10px;
    }

    .pillarCol::before {
        left: 50%;
        top: -6px;
        transform: translateX(-50%) rotate(45deg);
    }

    .pillarCol::after {
        display: none;
    }
}
/* ============================================================
   IMSS page  ===  CSS end
   ============================================================ */

/* ============================================================
   GBS page  ===  CSS start
   ============================================================ */
@media (max-width: 991px) {
    .scaleGrid {
        display: block;
    }

    .scaleAside {
        margin-top: 18px;
    }
}

@media (max-width: 767px) {
    .gbsDims {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .scaleRow {
        display: block;
    }

    .scaleLabel {
        margin-bottom: 12px;
        padding: 12px;
    }

    .scaleBoxes {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}
/* ============================================================
   GBS page  ===  CSS end
   ============================================================ */

/* ============================================================
   PDES page  ===  CSS end
   ============================================================ */
/* ============================================================
   Key Business Enablers (R&D) page  ===  CSS start
   ============================================================ */
@media (max-width: 767px) {
    .kbeExpGrid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .kbeMainHead {
        font-size: 28px;
        line-height: 34px;
    }

    .kbeCapital {
        padding: 30px 24px;
    }
}
/* ============================================================
   Key Business Enablers (R&D) page  ===  CSS end
   ============================================================ */
@media (max-width: 767px) {
    .platRow .col-md-4 {
        margin-bottom: 0;
    }
    .platCard{
      padding: 0 0 20px 0;
    }
}
@media (max-width: 767px) {
    .kbeBracketList {
        flex-direction: column;
        gap: 18px;
        padding: 20px;
    }
}
@media (max-width: 767px) {
    .kbeExpGrid {
        grid-template-columns: 1fr;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px));
    }

    .kbeExpItem {
        border-left: none;
        border-top: 1.5px solid #45a247;
    }

    .kbeExpItem:first-child {
        border-top: none;
    }
}

/* ===================== ESG box - responsive ===================== */
@media (max-width: 767px) {
  .esgSec {
    padding: 40px 0;
  }
  .esgHeading {
    font-size: 28px;
    line-height: 32px;
    margin-bottom: 22px;
  }
  .esgTabs {
    display: none;
  }
  .esgSelect {
    display: block;
  }
  .esgPanel {
    padding: 26px 20px;
  }
  .esgTopicHead {
    font-size: 22px;
    line-height: 1.25;
  }
  .esgText p {
    font-size: 15px;
    line-height: 22px;
    margin-bottom: 20px;
  }
  .esgImg {
    margin-top: 22px;
  }
}

/* ===================== Download report bar - responsive ===================== */
@media (max-width: 767px) {
  .downlodrptcenter {
    padding: 22px 16px;
  }
  .backTop {
    position: static;
    right: auto;
    top: auto;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto 16px;
  }
  .d-btn-wrap {
    flex-direction: column;
    gap: 12px;
    max-width: 100%;
  }
  .dn-btn a {
    justify-content: center;
    font-size: 13px;
  }
}

/* ===================== Footer sitemap - mobile accordion ===================== */
@media (max-width: 767px) {
  .fDivider {
    display: none;
  }
  .footerGrid .footer_col .title_bg {
    cursor: pointer;
    position: relative;
    padding-right: 28px;
  }
  .footerGrid .footer_col .title_bg::after {
    content: "+";
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 24px;
    line-height: 1;
  }
  .footerGrid .footer_col .title_bg.open::after {
    content: "\2013";
  }
}