@media(max-width:1200px){
    /* there is no longer room to hold every label on one line, so let them
       wrap again rather than push the row off the screen */
    .slide-stat strong,
    .slide-stat span {
        white-space: normal;
    }
}
/* =====================================================================
   BREAKPOINT MAP
   1399  - small laptops / iPad Pro 12.9" landscape (1366)
   1199  - laptops 1280 / iPad Pro 11" landscape (1194)
   1025  - iPad Pro portrait (1024) / iPad landscape (1024) - home
           section stops being pinned here, matches app.js (>1025)
   991   - iPad mini & iPad portrait (768 - 991)
   767   - phones landscape (568 - 767)
   575   - phones portrait
   420   - small phones
   380   - iPhone SE / Galaxy S
   + orientation blocks at the end for short landscape screens
   ===================================================================== */

/*=============== Short desktop windows ===============*/
/* The message cards are as tall as the window. Below about 780px the copy,
   the attribution and the button no longer fit the fixed padding, and the
   card - which clips - would cut the button off. The spacing gives way first. */
@media (min-width: 1026px) and (max-height: 780px) {
    .cap-text {
        padding: 46px 44px 36px;
    }
    /* The copy still centres on the free space, but it can now be squeezed:
       without min-height:0 a flex child refuses to go under its content, so
       the overflow went to the foot of the card and cut the counter in half.
       The spacing absorbs it; nothing is clipped and nothing scrolls. */
    .cap-content {
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
    /* the blockquote holds the copy and the attribution together, and both
       stay in full - the quote mark is dropped on desktop to make the room. */
    .cap-quote {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    .cap-attrib {
        flex: none;
    }
    /* the whole quote stays on screen - nothing here clips or scrolls */
    .cap-quote p {
        min-height: 0;
        overflow: visible;
    }
    /* the counter is a fixed row - it must never be the thing that shrinks */
    .capsule-bottom {
        flex: none;
    }
    .cap-quote {
        margin-top: 18px;
    }
    .cap-attrib {
        margin-top: 16px;
        padding-top: 12px;
    }
    .cap-cta {
        margin-top: 18px;
    }
}

/* Shorter still. The counter is slide chrome and the first thing that can go,
   then the heading is set smaller - the card still shows all of the copy. */
@media (min-width: 1026px) and (max-height: 620px) {
    .cap-text {
        padding: 34px 40px 24px;
    }
    .capsule-bottom {
        display: none;
    }
    .cap-heading h2 {
        font-size: 28px;
        line-height: 36px;
    }
    .cap-quote {
        margin-top: 14px;
    }
    .cap-attrib {
        margin-top: 12px;
        padding-top: 10px;
    }
    .cap-cta {
        margin-top: 14px;
    }
}

/*=============== 1399px : small laptop, iPad Pro landscape ===============*/
@media (max-width: 1399px) {
    .theme-title {
        font-size: 36px;
        line-height: 46px;
    }
    .inner-banner {
        padding-bottom: 60px;
    }
    .slide-stats {
        gap: 40px;
    }
    .stat-value {
        font-size: 26px;
        line-height: 32px;
    }
    .about-stats-grid {
        padding: 0 20px;
    }
    .about-stats-head {
        padding: 0 20px 16px;
    }
    .stat {
        padding: 0 0 0 14px;
    }
    .stat:nth-child(2n + 1) {
        padding: 0 14px 0 0;
    }
    /*The fixed 748x480 box would crop badly once the column is narrower*/
    .inner-banner-img {
        height: auto;
        aspect-ratio: 748 / 480;
    }
    .banner-title {
        font-size: 32px;
        line-height: 42px;
    }
    .biz-panel {
        min-height: 400px;
    }
    .divest-card {
        min-height: 440px;
    }
    .divest-title {
        font-size: 26px;
        line-height: 34px;
    }
    .cash-value {
        font-size: 36px;
        line-height: 46px;
    }
    .value-num,
    .value-per,
    .stake-num {
        font-size: 26px;
        line-height: 36px;
    }
    /*----Business pages : the figures band----*/
    .stats-band {
        padding: 35px 20px;
    }
    .sg-item {
        padding: 10px 18px;
    }
    /*A 30px figure will not hold on one line in a quarter of a 960 container*/
    .sg-num {
        font-size: 26px;
        line-height: 36px;
    }
    .sg-num .sg-unit {
        font-size: 19px;
    }
    /*Four across leaves too little room, so they go two by two*/
    .stats-band .col-lg-3 {
        flex: 0 0 auto;
        width: 50%;
    }
    .seg-title {
        font-size: 19px;
        line-height: 27px;
    }
    .str-cap-title {
        font-size: 28px;
        line-height: 34px;
    }
    .str-cap-title span {
        font-size: 50px;
        line-height: 54px;
    }
}

/*=============== 1025px : iPad Pro portrait, iPad landscape ===============
  below 1026px nothing is pinned - the section is drawn at its finished
  state and simply stacks */
@media (max-width: 1025px) {
    .about {
        height: auto;
        background: linear-gradient(160deg, #2a2a2a 0%, #1a1a1a 60%, #0c0c0c 100%);
    }
    .about-stage {
        position: relative;
        top: auto;
        height: auto;
    }
    .about-inner {
        height: auto;
        padding: 60px 0;
    }
    /* the picture comes out from behind the copy and is read in the flow */
    .about-media,
    .about-scrim {
        display: none;
    }
    .about-inline-img {
        display: block;
        width: 100%;
        margin-bottom: 34px;
    }
    .about-inline-img img {
        /* the source is 3:2 - letterboxed a little so a full-width picture
           does not push the copy off the first screen */
        aspect-ratio: 16 / 7;
        object-fit: cover;
    }
    /* bootstrap would stack these at 991, but the copy and the figures still
       fit together until tablet portrait ends */
    .about .row > [class*="col-"] {
        width: 50%;
    }
    .about-content {
        padding-right: 24px;
    }
    /* GSAP never runs here, so these must never be left hidden */
    .about-scrim,
    .about-content,
    .about-stats,
    .stat {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    /* the knockout needs a full screen to read, so below this it is dropped
       and a plain heading takes its place */
    .journey {
        height: auto;
        overflow: visible;
        padding-bottom: 50px;
        text-align: center;
    }
    .journey-bg {
        height: auto;
    }
    .journey-knockout {
        display: none;
    }
    /* the frame only exists to line the copy up with the knockout, so with the
       knockout gone it goes back to being ordinary flow */
    .journey-frame {
        position: static;
        width: auto;
        height: auto;
        transform: none;
    }
    .journey-title {
        display: block;
        font-size: 35px;
        font-weight: 500;
        line-height: 42px;
        padding: 0 15px;
        margin-bottom: 16px;
    }
    .journey-eyebrow,
    .journey-text {
        position: static;
        transform: none;
        margin: 0 auto;
    }
    .journey-eyebrow {
        padding: 34px 15px 12px;
    }
    /* GSAP never runs here, so these must never be left hidden */
    .journey-eyebrow,
    .journey-text {
        opacity: 1 !important;
        transform: none !important;
  }
    .biz-title {
        font-size: 22px;
        line-height: 30px;
    }
    .biz-panel {
        min-height: 420px;
    }
    /*3 narrow columns of figures do not fit beside the orange card*/
    .divest-info .col-md-4 {
        flex: 0 0 auto;
        width: 50%;
    }
    .divest-card {
        min-height: 420px;
    }
}

/*=============== 991px : iPad mini / iPad portrait ===============*/
@media (max-width: 991px) {
    /*The charts stack from here down - iPad portrait included - so they have
      to line up on one axis. Each artwork holds its ring at a different point
      in its canvas (50%, 34%, 43% across), so centring the canvas leaves the
      rings stepped. Each chart is sized to draw the same ring, then nudged by
      the gap between its own ring position and the middle, putting all four
      on one axis under their logos.*/
    .pie-1,
    .pie-3 {
        width: 76.08%;
    }
    .pie-2 {
        width: 61.26%;
        transform: translateX(15.6%);
        -webkit-transform: translateX(15.6%);
    }
    .pie-4 {
        width: 87.08%;
        transform: translateX(7.42%);
        -webkit-transform: translateX(7.42%);
    }
    /*Social leads with its picture on the desktop layout, so stacking it in
      source order buries the head under the image. Once the columns stack it
      reads like the other two: bar, heading, then the picture.*/
    /*order sits on the columns - they are the row's flex items; the head and
      picture inside them are not*/
    .esg-head-row-flip > [class*="col-"]:first-child {
        order: 2;
    }
    .esg-head-row-flip > [class*="col-"]:last-child {
        order: 1;
    }
    .theme-title {
        font-size: 32px;
        line-height: 42px;
    }
    .theme-intro {
        padding-bottom: 0px;
    }
    .kpi-card {
        padding: 22px 22px 20px;
    }
    .kpi-page .kpi-graph {
        max-width: 100%;
    }
    /* below this the copy and the figures are both too narrow set across -
       each takes the full width instead */
    .about .row > [class*="col-"] {
        width: 100%;
    }
    .about-content {
        padding-right: 0;
        margin-bottom: 30px;
    }
    /* The copy no longer has the width to hold its own over the photograph, so
       the photograph becomes a band across the top and everything reads below
       it on white - the same move the Strengths section makes. */
    .theme {
        /* the top padding carried up from the wider tablet stays: it gives the
           header a clean white ground to sit on above the band, which the
           orange wordmark needs */
        background: #ffffff;
    }
    .theme-bg {
        position: relative;
        height: clamp(340px, 58vw, 500px);
    }
    /* nothing is set over the picture now, so there is nothing to darken for */
    .theme-scrim {
        display: none;
    }
    .theme-inner {
        padding-top: 44px;
    }
    .theme-cta {
        margin-top: 26px;
    }
    /* the photograph is a band at the top here and the copy reads on white,
       so the white hover would disappear - it takes the dark one */
    .theme-cta .btn-more:hover {
        background: #000000;
        color: #ffffff;
    }
    /* reversed out of the photograph before, dark on white now */
    .theme-title,
    .theme-copy,
    .theme-pillars strong,
    .theme-pillars span,
    .theme-lead,
    .theme-platforms li,
    .theme-why-mark,
    .theme-why-copy {
        color: #000000;
    }
    .theme-pillars.mob-txt-orange strong{
        color: #f58220 !important;
    }
    .business-new.mob-blk li{
        color: #000000;
    }
    .menu, .nav-icon3 {
        display: none;
    }
    .my-sidenav {
        width: 0px;
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        overflow-x: hidden;
        z-index: 999999999;
        height: 100vh;
        max-width: 0px;
        width: 100%;
        background-color:#003974;
        transition: 0.5s;
        -webkit-transition: 0.5s;
    }
    .my-sidenav>ul {
        padding: 0px 20px 0px;
    }
    .my-sidenav>ul>li>ul {
        margin-top: 0px;
        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 #ffffff;
        padding: 15px 0px;
    }
    .my-sidenav > ul > li > ul >li
    {
        border-bottom: 1px solid #ffffff;
        padding: 10px 0px;
    }
    .my-sidenav > ul > li > ul >li:last-child, .my-sidenav ul.submenu li ul.submenu li:last-child
    {
        border-bottom: 0px;
    }
    .my-sidenav ul.submenu li ul.submenu li {
        border-bottom: 1px solid #ffffff;
        padding: 10px 10px;
    }
    .my-sidenav ul.submenu li ul.submenu li a {
        color: #ffffff;
        font-size: 16px;
    }

    .cross-btn1 {
        text-align: right;
        padding: 16px 14px 0px 0px;
        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: #ffffff;
        font-size:18px;
        display:block;
    }
    .my-sidenav>ul>li>ul>li>a {
        color: #ffffff;
        font-size: 14px;
    }
    .my-sidenav>ul>li>ul>li>a img {
        padding-right: 0;
        float: right;
        padding-left: 50px;
    }

    /*----Inner Pages----*/
    .inner-banner {
        padding-bottom: 60px;
    }
    .inner-banner.no-banner-img {
        padding-bottom: 40px;
    }
    .inner-banner-img {
        margin: 40px auto 0px;
    }
    .breadcrumb-list {
        margin-bottom: 30px;
    }
    .about-intro,
    .teil-scale {
        padding-bottom: 50px;
    }
    .lead-para {
        font-size: 17px;
        line-height: 28px;
    }
    .scale-data {
        padding: 20px 25px 0px 0px;
    }
    .sec-heading {
        font-size: 26px;
        line-height: 36px;
    }
    .sec-heading br {
        display: none;
    }
    .operating-structure {
        padding-bottom: 20px;
    }
    .legacy-sec {
        padding: 30px 0px 50px;
    }
    .legacy-sec .sec-heading-sm {
        margin: 35px 0px 20px;
    }
    .biz-panel {
        min-height: 367px;
        padding-bottom: 80px;
    }
    /*The orange card stops being a tall side panel and sits above the copy*/
    .divest-sec {
        padding-bottom: 50px;
    }
    .divest-card {
        min-height: auto;
        margin-bottom: 30px;
        padding: 25px;
    }
    .divest-card-btm {
        margin-top: 30px;
    }
    .divest-info {
        padding-left: 0px;
        border-left: 0px;
    }
    .divest-info .col-md-4 {
        width: 33.333333%;
    }
    .divest-img {
        margin-top: 40px;
    }
    .value-sec,
    .stake-sec {
        padding-bottom: 50px;
    }
    .value-sec{
        padding-bottom: 20px;
    }
    .cash-value {
        font-size: 32px;
        line-height: 42px;
    }
    .cash-band {
        padding: 35px 20px 6px;
    }
    .value-num,
    .value-per,
    .stake-num {
        font-size: 24px;
        line-height: 34px;
    }
    .value-num .rupee,
    .value-num .unit,
    .stake-num .rupee,
    .stake-num .unit {
        font-size: 18px;
    }
    .stake-label {
        margin-bottom: 0px;
    }
    .milestone-sec {
        padding: 10px 0px 50px;
    }
    .phase-sec {
        padding-bottom: 50px;
    }
    .phase-head-in {
        gap: 12px;
        padding: 25px 20px;
    }
    .phase-no {
        font-size: 26px;
        line-height: 34px;
    }
    .phase-title-line {
        margin-bottom: 25px;
    }
    .phase-box {
        margin-bottom: 40px;
    }
    /*The two business groups stack, so the second needs its own gap*/
    .phase-body .col-lg-6 + .col-lg-6 .phase-group {
        margin-top: 30px;
    }
    .phase-img {
        margin-bottom: 40px;
    }
    /*The response column sits under the trend, so the rule spans the width*/
    .trend-resp {
        margin-top: 35px;
    }
    .trend-bar {
        margin-top: 35px;
    }
    /*The card becomes a banner above the points instead of a tall side panel*/
    .str-card {
        min-height: auto;
        margin-bottom: 30px;
    }
    .str-card-title {
        font-size: 22px;
        line-height: 30px;
    }
    .biz-banner-title {
        font-size: 32px;
        line-height: 42px;
    }
    .stats-band {
        padding: 30px 15px;
    }
    .sg-item {
        padding: 10px 18px;
    }
    .sg-num {
        font-size: 26px;
        line-height: 36px;
    }
    .sg-num .sg-unit {
        font-size: 19px;
    }
    .core-label {
        font-size: 18px;
        line-height: 26px;
    }
    .seg-title {
        font-size: 18px;
        line-height: 26px;
    }
    .core-cell {
        padding-right: 15px;
    }
    .core-cell.has-line {
        padding-left: 15px;
    }
    .str-icon {
        margin-top: 25px;
        width: 62px;
    }
    .str-block {
        padding-bottom: 35px;
    }
    .str-cap-title {
        font-size: 22px;
        line-height: 28px;
    }
    .str-cap-title span {
        font-size: 38px;
        line-height: 42px;
    }
    .str-cap-line {
        margin: 12px 0px 10px;
    }
    .str-img-cap {
        padding: 20px 24px;
    }
    .str-cap-sub {
        font-size: 14px;
        line-height: 20px;
    }
    .page-nav {
        padding-bottom: 50px;
    }
}

/*=============== 1199px : the long group stops splitting ===============*/
@media (max-width: 1199px) {
    /* the sheet drops to a 960 container here, which leaves each of the two
       columns about 130px - one word a line */
    #menu-corporate .menu-list {
        column-count: 1;
    }
}

/* 1025 rather than 991 so an iPad Pro at 1024 is treated as a tablet: the
   held sections stack here, matching About and Journey which already did. */
@media (max-width: 1025px) {
    .esg {
        /* the top clears the header, which is fixed over this */
        padding: 100px 0 65px;
    }
    /* the copy is above the slider here, so the arrows go back into the flow */
    .esg-aside {
        display: block;
        padding-bottom: 0;
        margin-bottom: 34px;
    }
    .esg-controls {
        position: static;
        margin-top: 28px;
    }
    .esg-right {
        padding-right: 0;
    }
    .esg-item {
        width: clamp(260px, 78vw, 520px);
    }
    .esg-title,
    .esg-copy {
        max-width: none;
    }
    .esg-controls {
        margin-top: 28px;
    }
    .esg-media {
        height: 300px;
    }
    /* the box overlapping the corner needs a wide picture to sit on - at this
       size it is put underneath instead, where nothing has to be clipped */
    .esg-item {
        padding-bottom: 0;
    }
    .esg-label {
        position: static;
        min-width: 0;
        padding: 18px 0 0;
    }
    .esg-label::before {
        width: 150px;
    }
    .esg-name {
        font-size: 24px;
        line-height: 30px;
    }

    /* the graph goes above the reading, and the three groups become a select */
    .kpi {
        /* the top clears the header, which is fixed over this */
        padding: 100px 0 65px;
    }
    .kpi-item {
        grid-template-columns: 1fr;
        gap: 26px;
    }
    /* the chart takes the whole slide - capped, it left a band of ground beside
       it that read as the edge of the next slide */
    .kpi-graph {
        width: 100%;
        max-width: none;
    }
    /* nothing outside the slide may paint: owl sizes its items in fractional
       pixels, and the neighbour bleeds through the seam without this */
    .kpi-slider {
        overflow: hidden;
    }
    /* one column here : the pair goes back under the graph in the normal flow */
    .kpi-slider .owl-nav {
        margin: 24px 0 0;
    }
    .kpi-slider .owl-dots {
        margin: 24px 0 0;
    }
    .kpi-tabs {
        display: none;
    }
    .kpi-tab-select {
        display: block;
        width: 100%;
        margin-bottom: 30px;
        /* the right side carries the caret, so it is held well clear of the rule */
        padding: 13px 48px 13px 16px;
        border: 1px solid #ffffff;
        border-radius: 8px;
        font-size: 16px;
        color: #ffffff;
        /* the native caret sits hard against the edge whatever the padding, so
           it is switched off and drawn here instead */
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: rgba(0, 0, 0, .35);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 18px center;
        background-size: 18px 18px;
    }
    .kpi-tab-select option {
        color: #000000;
    }
    .kpi-name {
        font-size: 22px;
        line-height: 29px;
    }

    .restructure {
        /* the top clears the header, which is fixed over this */
        padding: 100px 0 65px;
    }
    .restructure-intro {
        margin-bottom: 36px;
    }
    /* GSAP never runs the reveal here, so nothing may be left hidden */
    .restructure-intro > *,
    .restructure-graphic {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    /* four names will not sit across a phone, and the figures need to wrap */
    .slides-navigation {
        flex-wrap: wrap;
        gap: 14px 20px;
        bottom: 30px;
    }
    .slide-nav-item {
        flex: 0 0 calc(50% - 10px);
    }
    .slide-nav-title {
        font-size: 15px;
        line-height: 21px;
    }
    .slide-stats {
        flex-wrap: wrap;
        gap: 18px 30px;
    }
    .slide-stat {
        flex: 0 1 calc(50% - 15px);
    }
    .slider-inner {
        padding-bottom: 180px;
    }
    .slide-counter {
        top: 100px;
    }

    /* The copy stacks over the gallery, which keeps working by swipe.
       display:block matters: the section is a flex row on desktop, which is
       harmless there because the title is positioned out of the flow - but
       once it comes back into the flow here, the title, the copy and the
       gallery would sit side by side instead of stacking. */
    /* A column, so the parts can be dealt in a different order: the copy and
       the gallery read first and the picture closes the section. The height is
       held in a variable because the scrim, the title over it and the arrows
       all have to be placed against it. */
    .strengths {
        display: flex;
        flex-direction: column;
        /* the desktop row centres its items, and carried into a column that
           shrinks each one to its content - which left the gallery 0 wide,
           since its cards are positioned rather than in the flow */
        align-items: stretch;
        min-height: 0;
        /* the top clears the header, which is fixed over this. Nothing below:
           the picture ends the section. */
        padding: 60px 0 0;
        background: #ffffff;
        --band: clamp(300px, 48vw, 440px);
    }
    .strengths-layout {
        order: 1;
    }
    .coverflow {
        order: 2;
    }
    /* the photograph stops being a ground for the copy and becomes a band
       across the foot - nothing is set over it, so the scrim goes with it */
    .strengths-bg {
        order: 3;
        position: relative;
        height: var(--band);
        /* the arrows sit in this gap */
        margin-top: 120px;
    }
    .strengths-scrim {
        display: none;
    }
    /* everything below the band reads on white, so the copy that was reversed
       out of the photograph goes back to the standard dark treatment */

  
    .strengths-eyebrow {
        color: var(--orange);
    }
    .strengths-title {
        color: #000000;
    }
    .strengths-copy {
        color: #000000;
    }
    /* this section reads on white here, so the white hover would disappear -
       it takes the dark hover the white sections use */
    .strengths-cta .btn-more:hover {
        background: #000000;
        color: #ffffff;
    }
    /* a white outline on a white ground is nothing to see - back to the solid
       fill the arrows carry everywhere else */
    .strengths .cf-btn {
        box-shadow: none;
        background: var(--orange);
        color: #ffffff;
    }
    .strengths .cf-btn:hover {
        box-shadow: none;
        background: #000000;
        color: #ffffff;
    }
    /* nothing is pinned here - the two beats simply follow one another */
    .theme {
        height: auto;
        /* the top clears the header, which is fixed over this */
        padding: 0px 0 0px;
    }
    /* three priorities across is unreadable on a tablet, two is the most that
       holds the wording without breaking every line */
    .theme-pillars {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 30px;
        row-gap: 22px;
    }
    /* the rule moves to the left of the second column of each row */
    .theme-pillars li {
        padding: 0 0 0 22px;
        border-top: 0;
        border-left: 1px solid var(--orange);
    }
    .theme-pillars li:nth-child(odd) {
        padding-left: 0;
        border-left: 0;
    }
    .theme-pillars li:nth-child(4) {
        padding-left: 22px;
        border-left: 1px solid var(--orange);
    }
    .theme-inner {
        height: auto;
    }
    .theme-stage {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        transform: none;
        max-width: none;
    }
    .theme-stage--two {
        margin-top: 44px;
    }

    .theme-why {
        gap: 18px;
    }
    .theme-why-mark {
        font-size: 60px;
    }
    /* GSAP never runs here, so nothing may be left hidden */
    .theme-stage {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* nothing is pinned here, so the title simply sits above the copy */
    .strengths-hero {
        position: relative;
        height: auto;
        padding: 44px 0 34px;
    }
    .strengths-hero-inner {
        max-width: none;
        margin-left: 0;
    }
    .strengths-hero-title span {
        font-size: 28px;
        line-height: 34px;
    }
    .strengths-hero-title em {
        font-size: 54px;
        line-height: 58px;
    }
    /* GSAP never runs here, so nothing may be left hidden */
    .strengths-scrim,
    .strengths-hero,
    .strengths-layout,
    .coverflow {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
    .strengths-aside {
        max-width: none;
        margin-bottom: 36px;
    }
    /* The arrows live inside the copy block in the markup, which is above the
       gallery. Measured from the foot of the section they land under it and
       centred, without the markup having to move - and clear of the picture,
       which now closes the section. */
    /* both of these are positioned on desktop, which would make them the box
       the arrows are measured from - the section has to be that box instead */
    .strengths-layout,
    .strengths-aside {
        position: static;
    }
    .cf-controls {
        position: absolute;
        left: 50%;
        bottom: calc(var(--band) + 50px);
        transform: translateX(-50%);
        margin-top: 0;
        justify-content: center;
    }
    /* back into the flow below the copy */
    .coverflow {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        transform: none;
        height: clamp(380px, 90vw, 460px);
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* no held slides below this - both messages are simply drawn at once.
   1025 rather than 991: an iPad Pro at 1024 no longer holds this section. */
@media (max-width: 1025px) {
    .capsule {
        height: auto;
        overflow: visible;
        /* the header sits over the top of the section, so the portraits need
           clearing room the full-height desktop stage did not */
        padding: 90px 14px 40px;
    }
    /* the counter is slide chrome - there are no slides here, both messages
       are on screen at once */
    .capsule-bottom {
        display: none;
    }
    /* holds the two Read More buttons on one line whichever quote is longer */
    .cap-text {
        display: flex;
        flex-direction: column;
    }
    .cap-content {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
    }
    .cap-cta {
        margin-top: auto;
        padding-top: 28px;
    }
    /* the imgbox is display:contents, so the two pictures and the two copy
       blocks are all direct children here - pictures across the top row,
       each message under its own portrait */
    .capsule-wrap {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-content: start;
        gap: 16px 30px;
        height: auto;
    }
    /* lets the two pictures flow as ordinary blocks */
    .cap-imgbox {
        display: contents;
    }
    .cap-slide-img {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        /* the photographs are 655x605, all but square - a wide short band was
           cropping straight through the face, so the frame takes the picture's
           own proportions and is held to a sensible width */
        max-width: 460px;
        margin: 0 auto;
        height: auto;
        aspect-ratio: 655 / 605;
        border-radius: 14px;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    .cap-text {
        position: relative;
        width: 100%;
        height: auto;
        left: auto;
        right: auto;
        padding: 30px 20px;
        border-radius: 14px;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    /* pair each picture with its own copy */
    .cap-img-1  { grid-column: 1; grid-row: 1; }
    .cap-img-2  { grid-column: 2; grid-row: 1; }
    .cap-text-1 { grid-column: 1; grid-row: 2; }
    .cap-text-2 { grid-column: 2; grid-row: 2; }
    .capsule-bottom {
        margin-top: 26px;
    }
}
/*=============== 991px : tablet portrait ===============*/
@media (max-width: 991px) {
    /* The tablet artwork carries the title itself, so the copy that used to
       sit under the band is dropped and the picture takes a whole screen. */
    .strengths-hero {
        display: none;
    }
    .strengths {
        --band: 100vh;
    }
    /* The section is held to one screen from here down. The picture takes
       whatever the copy leaves rather than a height of its own, so the two
       together are exactly a screen at any device height. */
    .journey {
        display: flex;
        flex-direction: column;
        height: 100vh;
        padding-bottom: 0;
        overflow: hidden;
    }
    .journey-bg {
        /* min-height:0 or a flex child will not go under its content */
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
    }
    .journey-frame {
        /* The copy keeps its natural height and the picture yields to it, so
           the deeper foot here does both jobs at once: more air under the
           button, and that much less picture. */
        flex: none;
        padding: 32px 0 78px;
    }
    /* The columns stack here, so the slider column takes the whole row. The
       desktop widening cannot come with it: as a flex item it is measured
       against the line and shrinks straight back, which left the run narrow
       and stranded on the left. The stage inside it does the spilling
       instead - an ordinary block, so the percentage resolves cleanly. */
    .esg-right {
        width: 100%;
        margin-right: 0;
        /* room under the run for the arrows */
        padding-bottom: 76px;
    }
    .esg-slider {
        width: calc(100% + (100vw - 100%) / 2);
    }
    /* the arrows belong under the run they drive rather than up beside the
       copy - pinned to the foot of the row, held to the left gutter */
    .esg .row {
        position: relative;
    }
    /* the copy block is positioned on desktop, where the arrows sit in its own
       bottom corner - it has to stop being the box they are measured from */
    .esg-aside {
        position: static;
    }
    .esg-controls {
        position: absolute;
        left: calc(var(--bs-gutter-x) * .5);
        /* the desktop rule pins the right edge too - both set would stretch
           the pair the width of the row */
        right: auto;
        bottom: 0;
        margin-top: 0;
    }
    /* the portrait held to 460 so it did not tower over the card beside it -
       on its own row it takes the full width like the copy does. the frame
       keeps the picture's own 655x605 proportions, so no face is cropped. */
    .cap-slide-img {
        max-width: none;
    }
    /* the 490px cap held the copy off the picture beside it on the wide stage -
       one message per row now, so it takes the width of its own card */
    .cap-heading h2,
    .cap-quote {
        max-width: none;
    }
    /* set across, neither message has the width to read - one per row */
    .capsule-wrap {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
    .cap-img-1  { grid-row: 1; }
    .cap-text-1 { grid-row: 2; }
    .cap-img-2  { grid-row: 3; }
    .cap-text-2 { grid-row: 4; }
    .cap-img-1, .cap-img-2, .cap-text-1, .cap-text-2 {
        grid-column: 1;
    }
}

/*=============== iPad portrait : the banner picture runs the full column ====
  Below 992px the columns stack, and the picture was still capped at 460px and
  centred - which leaves a band of empty page either side of it on a tablet.
  Phones are narrower than the cap, so they are unaffected either way, and the
  desktop two-column layout is untouched. */


/*=============== 767px : phones landscape ===============*/
@media (max-width: 767px) {
    /* The phone crop of the photograph does not carry the title the way the
       tablet artwork does, so the title is put back over it - as on a desktop,
       but set low in the band and sized for the screen. The hero is taken out
       of the flow and pinned to the foot of the section, which is exactly what
       the band occupies (.strengths-bg is last, at height var(--band)). */
    .strengths-hero {
        display: block;
        position: absolute;
        top: auto;
        bottom: 0;
        left: 0;
        z-index: 4;
        width: 100%;
        height: var(--band);
        padding: 0;
    }
    /* Placed by hand rather than by flex, so the spot on the photograph can be
       set with these four values alone. The .container between the two carries
       no position, so these offsets resolve against .strengths-hero - which is
       exactly the band the picture fills. */
    .strengths-hero-inner {
        position: absolute;
               right: 11px;
        bottom: 13%;
        left: auto;
        width: 214px;
        max-width: calc(100% - 48px);
        margin: 0;
    }
    /* reversed out of the picture again, so it goes back to white */
    .strengths-hero-title {
        color: #ffffff;
    }
    .strengths-hero-title em {
        font-size: 46px;
        line-height: 50px;
    }
    .strengths-hero-sub {
        margin-top: 14px;
        padding-top: 12px;
        border-top-width: 2px;
        font-size: 11px;
        line-height: 16px;
    }
    /* the wash only under the corner the words sit in */
    .strengths-scrim {
        display: block;
        top: auto;
        bottom: 0;
        height: var(--band);
        background: linear-gradient(to top left,
            rgba(6, 14, 22, .80) 0%,
            rgba(6, 14, 22, .55) 22%,
            rgba(6, 14, 22, .22) 42%,
            rgba(6, 14, 22, 0) 64%);
    }
    .esg-card {
    margin-top: 0px;
}
    .kpi-note{
        padding-top: 15px;
    }
    .scheme-value-sec .col-lg-4{
        margin-top: 0px;
    }
    .donut-block {
        padding: 20px 0px;
    }
  .biz-panel {
        min-height: auto;
    }
    /* the change figure drops onto its own line here - inline, it wrapped
       awkwardly in a column this narrow */
    .slide-stat .stat-line {
        display: block;
    }
    /* Four figures fill most of a phone screen and push the copy off it, so
       only the first two are kept. Hidden rather than cut from the data: the
       wider screens still show all four, and the script builds one list. */
    .slide-stat:nth-child(n + 3) {
        display: none;
    }
    .theme-title {
        font-size: 28px;
        line-height: 38px;
    }
    .theme-title-line {
        max-width: 220px;
        margin: 12px 0px 10px;
    }
    .mt-40 {
    margin-top: 21px;
    padding-bottom: 0px;
}
    .pdf-modal-frame {
        height: calc(100vh - 84px);
    }
    .pdf-modal-head {
        padding: 12px 14px;
    }
    .kpi-card {
        padding: 18px 16px 16px;
    }
    /* The four names take a third of a phone screen away from the slide they
       label. The run carries itself here - it advances on its own timer and
       the 01/04 counter still says where you are. Hidden rather than dropped:
       the script writes each name's progress bar and would fault without them.
       The room they were holding goes back to the copy. */
    .slides-navigation {
        display: none;
    }
    /* with the names gone the foot is empty - the counter drops into the
       corner they left, which is where it reads as slider chrome */
    .slide-counter {
        top: auto;
        bottom: 30px;
        right: 16px;
    }
    section.inner-banner.pb0 {
    padding-bottom: 22px;
}
    .slider-inner {
        padding-bottom: 40px;
        justify-content: flex-end;
    }
    /* the crop is much tighter on a phone - the subject is held in the middle
       of the frame rather than wherever the default landed it */
    .img-ph {
        object-position: right;
    }
    /* Squeezed to the width of a phone the labels in the infographic come out
       at about five pixels - unreadable. It is held to a legible size and the
       frame scrolls sideways instead, bleeding to both edges so it is obvious
       there is more to see. */
    .restructure-graphic {
        max-width: none;
        width: 100vw;
        margin-left: calc((100vw - 100%) / -2);
        border-radius: 0;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .restructure-graphic::-webkit-scrollbar {
        display: none;
    }
    .restructure-graphic img {
        width:100%;
        max-width: none;
        /* the gutter is repeated inside, so neither end sits flush to the edge */
        padding: 0 12px;
    }
}

/*=============== 767px : phones landscape ===============*/
@media (max-width: 767px) {
    .about-inline-img img {
        aspect-ratio: 16 / 9;
    }
    /* only here is there no room for the two platforms side by side, so the
       rule between them moves from the left edge to the top */
    .theme-platforms li {
        flex: 0 0 100%;
        padding: 12px 0 0;
        border-left: 0;
        border-top:1px solid #f58220e3;
        margin-top: 12px;
    }
    .theme-platforms li:first-child {
        padding-top: 0;
        border-top: 0;
    }
    /* everything stacks and centres, the logo above the channels */
    .site-footer {
        padding: 40px 0 28px;
        text-align: center;
    }
    .footer-top {
        flex-direction: column;
        gap: 22px;
        padding-bottom: 24px;
    }
    .footer-logo img {
        width: 150px;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 16px;
        padding-top: 22px;
    }
    /* the two links will not sit across a phone - stacked, the rule between
       them ends up hanging off the front of the second line */
    .footer-links {
        flex-direction: column;
        justify-content: center;
        gap: 10px;
    }
    .footer-links li + li::before {
        display: none;
    }
    .footer-copy span {
        display: block;
        margin-left: 0;
    }
    .footer-copy span::before {
        display: none;
    }

    .header-inner {
        padding: 15px 0;
    }
    .site-header.sticky .header-inner {
        padding: 12px 0;
    }
    .site-logo img {
        width: 140px;
    }
    .site-header.sticky .site-logo img {
        width: 125px;
    }
    .header-right {
        gap: 12px;
    }
    /* not enough room between the logo and the buttons on phones */
    .scroll-down {
        display: none;
    }
    .btn-download {
        padding: 10px 14px;
    }
    .btn-download span {
        display: none;
    }
    .btn-download-icon {
        width: 20px;
        height: 20px;
    }
    .menu-toggle {
        width: 38px;
        height: 32px;
        gap: 5px;
    }
    .menu-toggle-bar {
        height: 2px;
    }
    .menu-toggle.is-active .menu-toggle-bar:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .menu-toggle.is-active .menu-toggle-bar:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
    .menu-panel {
        max-width: 100%;
    }
    .menu-panel-inner {
        padding: 100px 25px 40px;
    }
    /* The sheet becomes an accordion here: each group carries its own list
       directly beneath it. The markup keeps the groups and the lists in two
       separate wrappers, so those two step out of the way with
       display:contents and their children interleave by order instead. */
    .menu-panel-inner {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding-top: 110px;
    }
    .menu-tabs,
    .menu-panes {
        display: contents;
    }
    /* the white panel behind the groups only makes sense while they stand in
       their own column */
    .menu-tabs::before {
        display: none;
    }
    .menu-tab {
        position: relative;
        width: 100%;
        padding: 17px 34px 17px 0;
        border-bottom: 1px solid rgba(0, 0, 0, .12);
        font-size: 15px;
    }
    /* the chevron turns over as the group opens */
    .menu-tab::after {
        content: "";
        position: absolute;
        right: 6px;
        top: 50%;
        width: 9px;
        height: 9px;
        margin-top: -7px;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(45deg);
        transition: transform .35s cubic-bezier(.4, 0, .2, 1), margin-top .35s cubic-bezier(.4, 0, .2, 1);
    }
    .menu-tab.active::after {
        margin-top: -2px;
        transform: rotate(-135deg);
    }
    /* A row that grows from no height to its content height. display:none
       cannot be eased and a max-height guess either clips a long group or
       drags on a short one, so the closed state is a zero-height grid row
       and the open state is the content - which the browser can interpolate. */
    .menu-pane,
    .menu-pane.active {
        display: grid;
    }
    .menu-pane {
        grid-template-rows: 0fr;
        transition: grid-template-rows .35s cubic-bezier(.4, 0, .2, 1);
    }
    .menu-pane.active {
        grid-template-rows: 1fr;
    }
    .menu-list {
        /* both are needed: a grid item will not go under its content height
           without min-height, and the row has to clip while it is closing */
        min-height: 0;
        overflow: hidden;
    }
    .menu-list li a {
        font-size: 16px;
        line-height: 24px;
        padding-bottom: 12px;
    }
    .menu-pane.active .menu-list {
        padding: 6px 0 10px;
    }
    /* each group, then its own list */
    .menu-tab[data-target="menu-corporate"] { order: 1; }
    #menu-corporate { order: 2; }
    .menu-tab[data-target="menu-statements"] { order: 3; }
    #menu-statements { order: 4; }
    .menu-tab[data-target="menu-mda"] { order: 5; }
    #menu-mda { order: 6; }
    .menu-extra {
        order: 7;
        padding: 10px 0;
    }
    .about-title,
    .journey-title,
    .cap-heading h2,
    .strengths-title,
    .theme-title,
    .restructure-title,
    .kpi-title,
    .kpi-head .kpi-title,
    .esg-title {
        font-size: 24px;
        line-height: 30px;
    }
    .strength {
        padding: 26px 22px;
        box-shadow: none;
    }
    .strength-icon {
        width: 88px;
        height: 88px;
    }
    .strength-name {
        font-size: 18px;
        line-height: 25px;
    }
    .cf-controls {
        margin-top: 26px;
    }
    .cap-quote-icon {
        width: 46px;
        height: auto;
        margin-bottom: 10px;
    }
    .about-stats-grid {
        grid-template-columns: 1fr;
        gap: 22px 0;
    }
    /* One per row, so each carries its own rule above it. The two-across rule
       that pads the left of every odd figure is more specific than this one
       and was winning - which left the third figure with no room at all and
       its numeral sitting on the line. */
    .stat,
    .stat:nth-child(2n + 1) {
        padding: 16px 0 0;
        border-top: 2px solid var(--orange);
    }
    .stat::after {
        display: none;
    }
    .stat:first-child,
    .stat:first-child:nth-child(2n + 1) {
        border-top: none;
        padding-top: 0;
    }

    /*----Inner Pages----*/
    /*The header is shorter here (smaller logo, tighter padding)*/
    /*The header loses height with the smaller logo from here down*/
    :root {
        --header-h: 66px;
    }
    .sec-label {
        font-size: 18px;
        line-height: 26px;
    }
    .banner-title {
        font-size: 28px;
        line-height: 38px;
    }
    .banner-title br {
        display: none;
    }
    /*The figures are short, so a full-width box leaves the rules stranded far
      from the data. Capping the box brings them in beside it - the top rule
      and the head line follow, since both are anchored to the box.*/
    .scale-box {
        max-width: 340px;
        padding-bottom: 18px;
    }
    .scale-data {
        padding: 16px 14px 0px 0px;
    }
    /*The rule now runs under the whole of the narrower box*/
    .scale-box:after {
        width: 100%;
    }
    .scale-num {
        font-size: 26px;
        line-height: 36px;
    }
    .scale-num .rupee,
    .scale-num .unit {
        font-size: 20px;
    }
    .scale-item {
        padding-top: 25px;
    }
    .sec-heading {
        font-size: 24px;
        line-height: 34px;
    }
    .biz-panel {
        padding: 25px 20px 70px;
    }
    .biz-icon {
        right: 20px;
        bottom: 20px;
        width: 48px;
    }
    .divest-info .col-md-4 {
        width: 100%;
    }
    .divest-stat {
        margin-top: 25px;
    }
    .cash-band {
        padding: 30px 15px 5px;
    }
    .cash-value {
        font-size: 30px;
        line-height: 40px;
    }
    .cash-value .rupee,
    .cash-value .unit {
        font-size: 22px;
    }
    .cash-bars {
        margin-top: 30px;
    }
    .cash-bar {
        height: 10px;
        margin: 0px 5px;
    }
    .value-item {
        margin-bottom: 16px;
    }
    .value-item p br,
    .stake-item p br {
        display: none;
    }
    .phase-title-line {
        max-width: 100%;
    }
    /*On a phone the three parts no longer fit across: Phase 1 takes its own
      line - kept unbroken - and the year sits beside its description below*/
    .phase-head-in {
        flex-wrap: wrap;
        align-items: center;
    }
    .phase-no {
        flex: 0 0 100%;
        font-size: 24px;
        line-height: 32px;
        white-space: nowrap;
    }
    .phase-year {
        flex: 0 0 auto;
        padding: 6px 12px;
    }
    .phase-desc {
        flex: 1 1 0;
        min-width: 0px;
    }
    .trend-title {
        font-size: 18px;
        line-height: 26px;
    }
    .resp-title {
        font-size: 18px;
        line-height: 26px;
    }
    /*The notch keeps its 121x37 ratio, so both scale together*/
    .resp-rule {
        margin-top: 29px;
    }
    .resp-notch {
        width: 98px;
        height: 30px;
    }
    .trend-bar {
        height: 8px;
    }
    .banner-para {
        margin-top: 20px;
    }
    .biz-banner-title {
        font-size: 28px;
        line-height: 38px;
    }
    /*Cells stack, so the vertical rules become gaps between them*/
    .core-cell {
        padding: 0px;
    }
    .core-cell.has-line {
        padding-left: 0px;
        border-left: 0px;
        margin-top: 18px;
    }
    /*Once the figures wrap into pairs the rules land unevenly - one would sit
      beside a figure that has none - so the row gutters do the separating*/
    .sg-divide {
        border-left: 0px;
    }
    .sugar-stats .col-xl-8 {
        margin-top: 25px;
    }
    .sg-item {
        padding: 0px 15px 0px 0px;
    }
    .seg-title{
        margin-bottom: 0px;
    }
    h4.core-label.mb0.wow.fadeInUp {
    padding-top: 0;
}
    .core-sec {
        padding: 35px 0px 30px;
    }
    /*The label sits above its cells once the row stacks*/
    .core-row {
        padding: 0px 0px;
    }
    .core-label {
        margin-bottom: 18px;
    }
    .core-line {
        margin-bottom: 18px;
    }
    .biz-sub {
        font-size: 18px;
        line-height: 26px;
        margin-top: 15px;
    }
    .biz-line {
        max-width: 220px;
        margin-bottom: 20px;
    }
    .str-card {
        padding: 22px 20px;
    }
    .str-card-title {
        font-size: 20px;
        line-height: 28px;
    }
    .str-icon {
        width: 54px;
    }
    /*The phone artwork is portrait and has the caption printed into it, so the
      box takes its shape and the overlay stands down*/
    .str-img {
        aspect-ratio: 606 / 872;
    }
    .str-img-cap {
        display: none;
    }
    .str-cap-title {
        font-size: 17px;
        line-height: 22px;
    }
    .str-cap-title span {
        font-size: 28px;
        line-height: 32px;
    }
    .str-cap-line {
        margin: 8px 0px 7px;
    }
    .str-img-cap {
        padding: 14px 18px;
    }
    .str-cap-sub {
        font-size: 12px;
        line-height: 16px;
    }
    .str-img-cap {
        right: 6%;
    }
    /*Stacked pills need their own gap - the row only has side gutters*/
    .page-nav .row{
        gap: 20px;
    }
    .pn-box {
        padding: 10px 20px;
    }
}

/*=============== 575px : phones portrait ===============*/
@media (max-width: 575px) {
    .theme-title {
        font-size: 24px;
        line-height: 34px;
    }
    .theme-title br {
        display: none;
    }
    /* a phone takes one priority at a time */
    .theme-pillars {
        grid-template-columns: 1fr;
        row-gap: 16px;
        margin: 20px 0px 0px 0px;
    }
    .theme-pillars li,
    .theme-pillars li:nth-child(4) {
        padding: 0;
        border-left: 0;
        border-top: 0;
    }

    .os-sub-heading {
        margin-top: 20px;
    }
    .biz-title {
        font-size: 20px;
        line-height: 28px;
    }
    .divest-title {
        font-size: 24px;
        line-height: 32px;
    }
    .phase-head-in {
        gap: 10px;
        padding: 22px 18px;
    }
    .phase-no {
        font-size: 22px;
        line-height: 30px;
    }
    .phase-list li {
        padding-left: 20px;
    }
    /*Not enough width for a heading and a rule on one line*/
    .resp-rule,
    .resp-notch {
        display: none;
    }
    .resp-head {
        border-bottom: 1px solid #9aa5ad;
        padding-bottom: 12px;
    }
    .resp-list li {
        padding-left: 24px;
    }
    .str-card-title {
        font-size: 22px;
        line-height: 26px;
    }
    .biz-banner-title {
        font-size: 24px;
        line-height: 34px;
    }
    .biz-sub {
        font-size: 16px;
        line-height: 24px;
    }
    .str-icon {
        width: 100px;
    }
    /*Too little room over the picture to keep the wrapped lines*/
    .str-cap-title {
        font-size: 13px;
        line-height: 17px;
    }
    .str-cap-title span {
        font-size: 21px;
        line-height: 24px;
    }
    .str-cap-line {
        margin: 6px 0px 5px;
    }
    .str-img-cap {
        padding: 10px 13px;
    }
    .str-cap-sub {
        font-size: 10px;
        line-height: 13px;
    }
    .sub-list li {
        padding-left: 16px;
    }
    .cash-value {
        font-size: 26px;
        line-height: 36px;
    }
    .cash-value .rupee,
    .cash-value .unit {
        font-size: 18px;
    }
    .cash-sub {
        font-size: 14px;
    }
    .value-num,
    .value-per,
    .stake-num {
        font-size: 22px;
        line-height: 30px;
    }
    .pn-text strong {
        font-size: 15px;
        line-height: 22px;
    }
    .pn-arrow {
        width: 38px;
        height: 38px;
        line-height: 38px;
        font-size: 16px;
    }
    .pn-prev .pn-arrow {
        margin-right: 15px;
    }
    .pn-next .pn-arrow {
        margin-left: 15px;
    }
    .theme-stage--two {
        margin-top: 30px;
    }

}

/*=============== 420px : small phones ===============*/
@media (max-width: 420px) {
    /* The business slide is held to one screen, so on a short phone the copy
       ran past the foot and over the four names. Everything in it steps down
       a size so it fits without the block having to grow. */
    .slide-title {
        font-size: 26px;
        line-height: 32px;
    }
    .slide-description {
        margin-bottom: 16px;
        font-size: 15px;
        line-height: 22px;
    }
    .slide-stats {
        gap: 14px 20px;
        margin-bottom: 18px;
    }
    .slide-stat strong {
        font-size: 22px;
        line-height: 26px;
    }
    .slide-stat span {
        font-size: 14px;
        line-height: 20px;
    }
    .slide-nav-title {
        font-size: 13px;
        line-height: 19px;
    }
    .site-logo img {
        width: 125px;
    }
    .site-header.sticky .site-logo img {
        width: 115px;
    }
    .banner-title {
        font-size: 24px;
        line-height: 34px;
    }
    .breadcrumb-list li:after {
        padding: 0px 5px;
    }
    .sec-heading {
        font-size: 22px;
        line-height: 32px;
    }
    .lead-para {
        font-size: 16px;
        line-height: 26px;
    }
    .scale-box {
        max-width: 300px;
    }
    .scale-data {
        padding: 14px 12px 0px 0px;
    }
    .cash-bar {
        height: 8px;
        margin: 0px 3px;
    }
}

/*=============== 380px : iPhone SE and similar ===============*/
@media (max-width: 380px) {
    .sec-label {
        font-size: 16px;
        line-height: 24px;
    }
    .banner-title {
        font-size: 22px;
        line-height: 32px;
    }
    .scale-num,
    .value-num,
    .value-per,
    .stake-num {
        font-size: 20px;
        line-height: 28px;
    }
    .cash-value {
        font-size: 24px;
        line-height: 32px;
    }
    .divest-card,
    .biz-panel {
        padding-left: 18px;
        padding-right: 18px;
    }
    .pn-box {
        padding: 10px 15px;
    }
}

/*=============== Landscape tablets (iPad mini / iPad / iPad Air / iPad Pro)
  1024x768, 1080x810, 1180x820, 1194x834 ===============*/
@media (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {
    /*Four business columns across a landscape tablet leaves each one a narrow
      ribbon of text - the cards read two to a row instead. col-lg-3 applies
      from 992px, so this has to override it rather than rely on col-md-6.*/
    .esg-src-row > [class*="col-"] {
        flex: 0 0 auto;
        width: 50%;
    }
    ul.resp-list.esg-list.esg-src-list{
        min-height: 230px;
    }
    /*Wide but short - the tall blocks are trimmed so a screen shows more.
      The header still has to be cleared, so only the gap below it shrinks. */
    .inner-banner {
        padding-bottom: 50px;
    }
    .biz-panel {
        min-height: 360px;
    }
    .str-card {
        min-height: 300px;
    }
    .divest-card {
        min-height: 380px;
    }
    .stats-band {
        padding: 30px 20px;
    }
    .sg-item {
        padding: 10px 15px;
    }
    .sg-divide {
        border-left: 1px solid rgba(255, 255, 255, 0.35);
    }
    /*Three cells fit on this width, so they keep their rules*/
    .core-cell.has-line {
        padding-left: 15px;
        border-left: 1px solid #cccccc;
    }
    .core-cell {
        padding: 0px 15px 0px 0px;
    }
}

/*=============== Phones in landscape (short viewport) ===============*/
@media (max-width: 991px) and (orientation: landscape) and (max-height: 500px) {
    /*The hero is only a few hundred px tall here, so the panel that opens
      over it cannot keep a 100px cap of padding*/
    .menu-panel-inner {
        padding: 80px 25px 30px;
    }
    .menu-list li a {
        font-size: 16px;
        line-height: 24px;
        padding: 10px 0;
    }
    /*Shortest viewport of the lot, but the fixed header is still there*/
    .inner-banner {
        padding-bottom: 40px;
    }
 
    .breadcrumb-list {
        margin-bottom: 20px;
    }
    /*Two across rather than a single long column of figures*/
    .divest-info .col-md-4 {
        width: 50%;
    }
}

/*-----------Corporate Restructuring Responsive Css Start-------------*/

/*=============== 1399px : small laptop, iPad Pro landscape ===============*/
@media (max-width: 1399px) {
    /*The columns narrow, so the ring comes down and the caption takes another line*/
    .stage-track {
        --stage-top-h: 361px;
        --stage-btm-h: 265px;
    }
    .stage-circle {
        width: 170px;
        height: 170px;
    }
}

/*=============== 1199px : laptops, iPad Pro 11" landscape ===============*/
@media (max-width: 1199px) {
    .scheme-card {
        padding: 25px 20px;
    }
    .scheme-card-title {
        font-size: 20px;
        line-height: 28px;
    }
    /*A smaller ring again, but the copy wraps further at this width*/
    .stage-track {
        --stage-top-h: 360px;
        --stage-btm-h: 240px;
    }
    .stage-circle {
        width: 145px;
        height: 145px;
        font-size: 18px;
        line-height: 26px;
    }
    .stage-text {
        font-size: 16px;
        line-height: 24px;
    }
    .value-card-title {
        font-size: 17px;
        line-height: 25px;
    }
    .platform-name {
        font-size: 18px;
        line-height: 26px;
    }
    .platform-circle {
        width: 150px;
        height: 150px;
    }
    .platform-circle strong {
        font-size: 16px;
        line-height: 22px;
    }
    .platform-circle em {
        font-size: 14px;
        line-height: 20px;
    }
}

/*=============== 991px : iPad mini / iPad portrait ===============*/
@media (max-width: 991px) {
    /*The three panels stack, so the pointer between them is dropped*/
    .scheme-row {
        --bs-gutter-x: 24px;
        --bs-gutter-y: 20px;
    }
    .scheme-card {
        min-height: 0px;
    }
    .scheme-card-mid {
        padding: 25px 20px;
    }
    /*The panels stack here, so the connectors between them go*/
    .scheme-line {
        display: none;
    }
    /*The rail turns vertical and every stage reads as one row beside it*/
    .stage-box {
        padding: 30px 20px;
    }
    .stage-track {
        flex-direction: column;
    }
    /*The rail stands on end. One shared bar cannot be used here: its five
      segments split the track evenly, while the stages are as tall as their
      own text, so the colours drift away from the dots - worst on the first
      stage, which is the shortest. Each stage carries its own length of rail
      instead, so a block always starts and ends with its own row.*/
    .stage-line {
        display: none;
    }
    .stage-item {
        flex-direction: row;
        padding: 0px 0px 30px;
    }
    .stage-item:before {
        content: "";
        position: absolute;
        top: 0px;
        bottom: 30px;
        left: 0px;
        width: 22px;
        border-radius: 11px;
    }
       .orange-title.mb-space{
        margin-top: 20px;
    }
    /*Dashed centre line, held in from the rounded ends*/
    .stage-item:after {
        content: "";
        position: absolute;
        top: 16px;
        bottom: 46px;
        left: 11px;
        border-left: 2px dashed #ffffff;
        transform: translateX(-1px);
        -webkit-transform: translateX(-1px);
    }
    .stage-item:last-child:before {
        bottom: 0px;
    }
    .stage-item:last-child:after {
        bottom: 16px;
    }
    .value-item{
        min-height: 153px;
    }
    /*of-type, not nth-child: the rail span is the track's first child and
      would otherwise shift every colour by one*/
    .stage-item:nth-of-type(odd):before {
        background-image: linear-gradient(to bottom, #f0801d 0%, #fbc86a 100%);
    }
    .stage-item:nth-of-type(even):before {
        background-image: linear-gradient(to bottom, #5b7183 0%, #b9c6cf 100%);
    }
    .stage-item:last-child {
        padding-bottom: 0px;
    }
    .stage-half-top,
    .stage-half-btm {
        flex: 1 1 auto;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        padding-top: 0px;
        padding-bottom: 0px;
    }
    /*The bands stop applying once the stages read as rows beside a vertical rail*/
    /*The half opposite the stage carries nothing once the rail is vertical*/
    .stage-half:empty {
        display: none;
    }
    /*Left padding clears the vertical rail that the dot now sits on*/
    .stage-info {
        flex: 1 1 auto;
        flex-direction: row;
        align-items: center;
        gap: 20px;
        min-width: 0px;
        padding-left: 48px;
        text-align: left;
    }
    .stage-circle {
        flex: 0 0 auto;
    }
    .stage-half-top .stage-info {
        flex-direction: row-reverse;
        justify-content: flex-end;
    }
    /*Centred on the vertical rail, which runs at x = 11px*/
    .stage-half-top .stage-dot,
    .stage-half-btm .stage-dot {
        top: 50%;
        bottom: auto;
        left: 11px;
        margin: -13px 0px 0px -13px;
    }
    .stage-half-top .stage-text,
    .stage-half-btm .stage-text {
        margin: 0px;
    }
    .str-info{
        margin-top: 20px;
    }
    .value-row {
        --bs-gutter-y: 20px;
        margin-top: 25px;
    }
    .platform-row {
        --bs-gutter-y: 20px;
    }
    /*Both platforms read left-aligned once the circle stops sitting between them*/
    .platform-card-right {
        text-align: left;
        border-left: 3px solid #f58220;
        border-right: none;
    }
    .platform-mid {
        padding: 10px 0px;
    }
}

/*=============== 767px : phones landscape ===============*/
@media (max-width: 767px) {
     .str-info{
        padding-top: 20px;
     }
    .mb-space{
        padding-top: 20px;
    }
    .scale-head-text{
        padding-right: 0;
    }
    
    .scheme-card-title {
        font-size: 18px;
        line-height: 26px;
    }
    .stage-circle {
        width: 84px;
        height: 84px;
        font-size: 14px;
        line-height: 20px;
    }
    .stage-info {
        gap: 15px;
    }
    ul.resp-list.esg-list.esg-src-list {
    min-height: auto;
}
    .value-card,
    .platform-card {
        padding: 22px 20px;
    }
     .value-card{
        padding-top: 0px;
     }
         .value-row{
            margin-top: 0px;
         }
    .value-band {
        padding: 10px 20px;
        font-size: 18px;
        line-height: 26px;
    }
    .platform-circle {
        width: 140px;
        height: 140px;
    }
}

/*=============== 575px : phones portrait ===============*/
@media (max-width: 575px) {
    /*Not enough width left of the rail for the year and the copy side by side*/
    .stage-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding-left: 42px;
    }
    .stage-half-top .stage-info {
        flex-direction: column-reverse;
        justify-content: flex-start;
    }
}
/*-----------Corporate Restructuring Responsive Css End-------------*/

/*-----------Chairman's Message Responsive Css Start-------------*/

/*=============== 1199px : laptops, iPad Pro 11" landscape ===============*/
@media (max-width: 1199px) {
    /*Keeps the portrait crop instead of squeezing it as the column narrows*/
    .cm-banner-img {
        height: auto;
        aspect-ratio: 520 / 480;
    }
}

/*=============== 991px : iPad mini / iPad portrait ===============*/
@media (max-width: 991px) {
    .cm-banner-img {
        max-width: 460px;
        margin: 40px auto 0px;
    }
}

/*=============== iPad : the picture runs the full column ====================
  The 460px cap above leaves a band of empty page either side on a tablet, so
  it is lifted here and the box takes the shape of the tablet crop (460x424),
  which then fills it exactly.
  Keyed on width rather than orientation: a browser window sized to a tablet
  width is usually wider than it is tall, so an orientation test would miss it
  - which is why iPad Air at 820 was still getting the desktop picture. The
  min-height keeps a phone held sideways (844x390) out of it; phones upright
  are under 768px anyway.
  This must stay in step with the <picture> source in chairmans-message.php. */
@media (min-width: 768px) and (max-width: 991px) and (min-height: 600px) {
    .cm-banner-img {
        max-width: 100%;
        aspect-ratio: 460 / 424;
    }
}

/*=============== 767px : phones landscape ===============*/
@media (max-width: 767px) {
    .cm-quote-icon {
        width: 42px;
        height: 34px;
    }
    .cm-quote-text {
        font-size: 17px;
        line-height: 27px;
    }
    .cm-quote-line:after {
        width: 100px;
    }
    .cm-sign-name {
        font-size: 20px;
        line-height: 28px;
    }
}

/*=============== 575px : phones portrait ===============*/
@media (max-width: 575px) {
    .cm-quote-text {
        font-size: 16px;
        line-height: 25px;
    }
    .cm-quote-line:after {
        width: 80px;
    }
    .cm-head {
        margin: 25px 0px 12px;
    }
}
/*-----------Chairman's Message Responsive Css End-------------*/

/*-----------Q&A With Vice Chairman Responsive Css Start-------------*/

/*=============== 991px : iPad mini / iPad portrait ===============*/
@media (max-width: 991px) {
    .qa-quote-name {
        font-size: 20px;
        line-height: 28px;
    }
    .qa-ques-text {
        font-size: 17px;
        line-height: 27px;
    }
}

/*=============== 767px : phones landscape ===============*/
@media (max-width: 767px) {
    .qa-ques {
        gap: 12px;
    }
    .qa-icon {
        width: 35px;
    }
    .qa-ques-text {
        font-size: 16px;
        line-height: 26px;
    }
    .qa-block {
        padding-bottom: 25px;
    }
    .qa-line {
        margin-top: 25px;
    }
}
/*-----------Q&A With Vice Chairman Responsive Css End-------------*/

/*-----------Board Of Directors Responsive Css Start-------------*/

/*=============== 1199px : laptops, iPad Pro 11" landscape ===============*/
@media (max-width: 1199px) {
    /*Three across leaves too little width beside the portrait for the name and
      role to land on predictable lines, so the cards go two up*/
    .bod-row > [class*="col-"] {
        flex: 0 0 auto;
        width: 50%;
    }
    /*Bootstrap holds the xl dialog at 800px until 1200, which is narrower than
      it gets below 992 - track the viewport instead so the width never steps
      backwards as the screen grows*/
    .bod-modal .modal-dialog {
        --bs-modal-width: 90%;
    }
}

/*=============== 991px : iPad mini / iPad portrait ===============*/
@media (max-width: 991px) {
    .bod-legend {
        margin-top: 20px;
    }
    /*Below 992 the xl dialog falls back to Bootstrap's 500px, which wastes the
      width available on a tablet*/
    .bod-modal .modal-dialog {
        --bs-modal-width: 90%;
    }
    .bod-modal .modal-body {
        padding: 30px 25px 30px;
    }
    .bod-modal-img {
        width: 130px;
        height: 150px;
    }
}

/*=============== 767px : phones landscape ===============*/
@media (max-width: 767px) {
    /*One card per row*/
    .bod-row > [class*="col-"] {
        width: 100%;
    }
    .bod-modal .bod-name {
        font-size: 20px;
        line-height: 28px;
    }
}

/*=============== 575px : phones portrait ===============*/
@media (max-width: 575px) {
    /*Only the modal still sets the portrait beside the name, so only it stacks*/
    .bod-modal-top {
        display: block;
    }
    .bod-modal-img {
        margin-bottom: 15px;
    }
    .bod-modal .modal-body {
        padding: 30px 20px;
    }
    .bod-sub {
        margin: 18px 0px 10px;
    }
}
/*-----------Board Of Directors Responsive Css End-------------*/

/*-----------Key Performance Indicators Responsive Css Start-------------*/

/*=============== 1199px : laptops, iPad Pro 11" landscape ===============*/
@media (max-width: 1199px) {
    .kpi-group-title {
        font-size: 18px;
        line-height: 26px;
    }
}

/*=============== 991px : iPad mini / iPad portrait ===============*/
@media (max-width: 991px) {
    /*Three across leaves the charts too narrow to read - they go two up*/
    .kpi-row > [class*="col-"] {
        flex: 0 0 auto;
        width: 50%;
    }
}

/*=============== 767px : phones landscape ===============*/
@media (max-width: 767px) {
    /*One chart per row*/
    .kpi-row > [class*="col-"] {
        width: 100%;
    }
    .kpi-row {
        --bs-gutter-y: 30px;
    }
}
/*-----------Key Performance Indicators Responsive Css End-------------*/

/*-----------BRSR Responsive Css Start-------------*/

/*=============== 1199px : laptops, iPad Pro 11" landscape ===============*/
@media (max-width: 1199px) {
    .brsr-title {
        font-size: 32px;
        line-height: 42px;
    }
}

/*=============== 991px : iPad mini / iPad portrait ===============*/
@media (max-width: 991px) {
    .brsr-title {
        font-size: 28px;
        line-height: 38px;
    }
    .brsr-head-title {
        font-size: 18px;
        line-height: 26px;
    }
}

/*=============== 767px : phones landscape ===============*/
@media (max-width: 767px) {
    .brsr-title {
        font-size: 24px;
        line-height: 34px;
    }
    .brsr-section-img {
        margin-top: 20px;
    }
    .brsr-table td {
        padding: 10px 12px;
    }
}
/*-----------BRSR Responsive Css End-------------*/

/*-----------Download Centre Responsive Css Start-------------*/

/*=============== 1199px : laptops, iPad Pro 11" landscape ===============*/
@media (max-width: 1199px) {
    .dl-title {
        font-size: 34px;
        line-height: 44px;
    }
    .dl-list-two {
        column-gap: 30px;
    }
}

/*=============== 991px : iPad mini / iPad portrait ===============*/
@media (max-width: 991px) {
    .dl-title {
        font-size: 30px;
        line-height: 40px;
    }
    .dl-group-title {
        font-size: 18px;
        line-height: 26px;
    }
}

/*=============== 575px : phones portrait ===============*/
@media (max-width: 575px) {
    .dl-title {
        font-size: 26px;
        line-height: 36px;
    }
    /*Two columns leave the longer entries unreadable on a phone*/
    .dl-list-two {
        column-count: 1;
    }
    .dl-submit {
        width: 100%;
        padding: 14px 20px;
    }
    ul.resp-list.esg-list.esg-src-list{
        min-height: 480px;
    }
}
/*-----------Download Centre Responsive Css End-------------*/

/*-----------ESG Responsive Css Start-------------*/

/*=============== 1399px : small laptop, iPad Pro landscape ===============*/
@media (max-width: 1399px) {
    /*Narrower columns wrap the outcome onto more lines*/
    .esg-src-outcome {
        min-height: 170px;
    }
}

/*=============== 1199px : laptops, iPad Pro 11" landscape ===============*/
@media (max-width: 1199px) {
    .esg-head-title {
        font-size: 34px;
        line-height: 44px;
    }
    .esg-pillar-num {
        font-size: 40px;
        line-height: 48px;
    }
    .sg-item.sg-divide.nobrdr{
        border-left: none;
    }
    /*Five marks have to stay on one line here, or that card's bracket drops
      below its neighbours'*/
    .esg-sdg {
        gap: 12px;
        padding-left: 14px;
    }
    .esg-sdg-list {
        gap: 4px;
    }
    .esg-sdg-list img {
        width: 38px;
        height: 38px;
    }
    .esg-src-name {
        font-size: 20px;
        line-height: 26px;
    }
}

/*=============== 991px : iPad mini / iPad portrait ===============*/
@media (max-width: 991px) {
    .esg-head-row {
        margin-bottom: 30px;
    }
    /*The picture drops under the section name once they stop sitting side by side*/
    .esg-head-img {
        margin-top: 25px;
    }
    .esg-head-title {
        font-size: 30px;
        line-height: 40px;
    }
    .esg-sub {
        font-size: 18px;
        line-height: 26px;
    }
    .esg-src-head{
        margin-top: 20px;
    }
    /*Four sourcing columns are too narrow here, so they go two up*/
    .esg-src-row > [class*="col-"] {
        flex: 0 0 auto;
        width: 50%;
    }
    .esg-src-outcome {
        min-height: 120px;
    }
    ul.resp-list.esg-list.esg-src-list{
        min-height: 323px;
    }
}

/*=============== 767px : phones landscape ===============*/
@media (max-width: 767px) {
    .esg-head-title {
        font-size: 26px;
        line-height: 36px;
    }
    .esg-bar {
        max-width: 160px;
        height: 5px;
    }
    .esg-src-outcome {
        min-height: 145px;
    }
}

/*=============== 575px : phones portrait ===============*/
@media (max-width: 575px) {
    /*One per row here, so nothing has to line up with anything*/
    .esg-src-row > [class*="col-"] {
        width: 100%;
    }
    .esg-src-outcome {
        min-height: 0px;
        padding-bottom: 20px;
    }
    .esg-head-title {
        font-size: 24px;
        line-height: 34px;
    }
    .esg-sdg-list img {
        width: 38px;
        height: 38px;
    }
}
/*-----------ESG Responsive Css End-------------*/

/*-----------Management Discussion And Analysis Responsive Css Start-------------*/

/*=============== 1199px : laptops, iPad Pro 11" landscape ===============*/
@media (max-width: 1199px) {
    .mda-ai-head-name,
    .mda-ai-name {
        flex-basis: 190px;
    }
    .mda-stat-num {
        font-size: 34px;
        line-height: 42px;
    }
    .mda-stat-num span {
        font-size: 22px;
        line-height: 30px;
    }
}

/*=============== 991px : iPad mini / iPad portrait ===============*/
@media (max-width: 991px) {
    .mda-title {
        font-size: 18px;
        line-height: 26px;
    }
    .mda-sub {
        font-size: 17px;
        line-height: 25px;
    }
    .mda-ai-head-name,
    .mda-ai-name {
        flex-basis: 165px;
    }
    .mda-ai-head {
        gap: 30px;
    }
    .mda-ai-name,
    .mda-ai-desc {
        padding: 16px 18px;
    }
    .mda-ai-arrow {
        flex-basis: 30px;
    }
}

/*=============== 767px : phones landscape ===============*/
@media (max-width: 767px) {
    /*The connector stops making sense once the panels stack*/
    .mda-ai-row {
        display: block;
    }
    .mda-ai-name {
        margin-bottom: 12px;
    }
    .mda-ai-arrow {
        display: none;
    }
    .mda-ai-head {
        display: none;
    }
    .mda-stat-num {
        font-size: 30px;
        line-height: 38px;
    }
    .mda-stat-num span {
        display: block;
        font-size: 20px;
        line-height: 28px;
    }
    .esg {
        padding: 50px 0 65px;
    }
        .esg-name {
        font-size: 22px;
        line-height: 28px;
    }
    .esg-media .img-ph {
        object-position: center;
    }
        .strengths-hero-title span {
        font-size: 24px;
        line-height: 30px;
    }
    .slide-stat .stat-break
    {
        display: inline;
    }
    .kpi {
        padding: 60px 0 60px;
    }
}
/*-----------Management Discussion And Analysis Responsive Css End-------------*/

/*-----------MDA Download Buttons Responsive Css Start-------------*/
/*=============== 991px : iPad mini / iPad portrait ===============*/
@media (max-width: 991px) {
    /*The buttons sit in several .mda-dl groups. Inside a group they are spaced
      by its gap, but two groups back to back fall to margin (30px), so the run
      reads unevenly once stacked. The closing margin is matched to the gap and
      a group following a group drops its top margin - a group that follows
      copy keeps it, since that is spacing from text, not between buttons.*/
    .mda-dl {
        gap: 18px;
        margin-bottom: 18px;
    }
    .mda-dl + .mda-dl {
        margin-top: 0px;
    }
    .mda-dl-btn {
        padding: 14px 18px;
        gap: 14px;
    }
    .mda-dl-text {
        font-size: 16px;
        line-height: 24px;
    }
    .mda-dl-icon {
        width: 30px;
        height: 34px;
    }
    .mda-dl-grid .mda-dl-btn {
        flex-basis: calc(50% - 9px);
    }
}

/*=============== 575px : phones portrait ===============*/
@media (max-width: 575px) {
    /*Side by side leaves no room for the wording on a phone*/
    .mda-dl {
        display: block;
        margin-bottom: 14px;
    }
    .mda-dl-btn + .mda-dl-btn {
        margin-top: 14px;
    }
    .mda-dl-grid .mda-dl-btn {
        flex-basis: auto;
    }
}
/*-----------MDA Download Buttons Responsive Css End-------------*/

/*-----------Introduction to the Theme Page Responsive Css Start-------------*/
@media (max-width: 1199px) {
    .tp-pillars {
        column-gap: 30px;
    }
    .tp-pillars li {
        padding-left: 18px;
    }
    .tp-why-mark {
        font-size: 70px;
    }
}

@media (max-width: 991px) {
    /*Five across is unreadable here - three, with the remaining two beneath*/
    .tp-pillars {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 24px;
    }
    /*The rule moves to the left of every item that is not first in its row*/
    .tp-pillars li:first-child,
    .tp-pillars li:nth-child(4) {
        padding-left: 0px;
        border-left: 0px;
    }
    .tp-title {
        font-size: 28px;
        line-height: 36px;
    }
}

@media (max-width: 767px) {
    /*Two across is the most that holds the wording without breaking every line*/
    .tp-pillars {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .tp-pillars li {
        padding-left: 18px;
        border-left: 1px solid #f58220;
    }
    .tp-pillars li:nth-child(4) {
        padding-left: 18px;
        border-left: 1px solid #f58220;
    }
    .tp-pillars li:nth-child(odd) {
        padding-left: 0px;
        border-left: 0px;
    }
    /*No room for the two platforms across, so the rule moves to the top*/
    .tp-platforms li {
        flex: 0 0 100%;
        padding: 12px 0px 0px;
        border-left: 0px;
        border-top: 1px solid #f58220;
    }
    .tp-platforms li:first-child {
        padding-top: 0px;
        border-top: 0px;
    }
    .tp-why {
        gap: 18px;
        margin-top: 30px;
    }
    .tp-why-mark {
        font-size: 56px;
    }
    .capsule {
        padding: 50px 14px 40px;
    }
    .strengths-bg .img-ph
    {
        object-position: center;
    }
    .hero-title
    {
        font-size: 32px;
        line-height: 35px;
    }
}

@media (max-width: 575px) {
    /*One per row - with one column every item is first, so no rules at all*/
    .tp-pillars,
    .tp-pillars li,
    .tp-pillars li:nth-child(4) {
        grid-template-columns: minmax(0, 1fr);
        padding-left: 0px;
        border-left: 0px;
    }
    .tp-why {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .tp-why-copy {
        max-width: none;
    }
}
/*-----------Introduction to the Theme Page Responsive Css End-------------*/

/*=============== iPad mini 5 and earlier, landscape only : 1024 x 768 ===============
  Pinned to an exact width because in landscape no other tablet is 1024 wide.
  orientation:landscape is what keeps iPad Pro 12.9" portrait out - that is
  1024 wide too. pointer:coarse keeps a desktop window of the same size out.
  Last in the file so it beats the 768-1199 landscape block above. */
@media (orientation: landscape)
   and (width: 1024px)
   and (max-height: 780px)
   and (hover: none) and (pointer: coarse) {

    /* The title goes back onto the photograph, held right, the way it reads on
       a desktop - rather than sitting under the band on white. */
    .strengths {
        --band: 480px;
    }
    /* An equal half each leaves a long run of nothing after the shorter
       priorities before the second column starts. The columns take their width
       from their own text instead, capped so a long one still wraps. */
    .theme-pillars {
        grid-template-columns: repeat(2, fit-content(330px));
        justify-content: start;
        column-gap: 40px;
    }
    /* There is width enough here for the chart and its reading to sit across,
       the way they do on a desktop - stacked, the pair runs to most of a
       screen this short. The chart keeps the larger share. */
    .kpi-item {
        grid-template-columns: 1.05fr 1fr;
        gap: 30px;
    }
    .strengths-bg {
        height: var(--band);
    }
    /* Only the corner the copy sits in is darkened, not the whole picture:
       the wash is strongest at the bottom right and has run out well before
       the middle, so the photograph is left alone where nothing is over it. */
    .strengths-scrim {
        display: block;
        top: auto;
        bottom: 0;
        height: var(--band);
        background: linear-gradient(to top left,
            rgba(6, 14, 22, .82) 0%,
            rgba(6, 14, 22, .60) 18%,
            rgba(6, 14, 22, .28) 36%,
            rgba(6, 14, 22, 0) 58%);
    }
    .strengths-hero {
        position: absolute;
        top: auto;
        bottom: 0;
        left: 0;
        z-index: 4;
        width: 100%;
        height: var(--band);
        /* set low in the band rather than centred: it clears the header while
           that is still docked, and the picture is quieter down there */
        align-items: flex-end;
        padding: 0 0 44px;
    }
    .strengths-hero-inner {
        max-width: 300px;
        margin-left: auto;
        margin-right: clamp(20px, 7.5vw, 132px);
    }
    
    .hero-title
    {
        font-size: 48px;
        line-height: 52px;
    }
    .hero-banner-video {
        object-position:bottom !important;
    }
}

/*=============== 992-1025px : iPad Pro 12.9" portrait ===============
  The band-and-white treatment starts at 991, so in this narrow range the copy
  is still set over the photograph and starts at the very top of the section.
  The section's own top padding is 0 - which is what lets the band sit flush
  lower down - so the clearance is put back only here, where it is needed. */
@media (min-width: 992px) and (max-width: 1025px) {
    .theme {
        /* clears the header, which is fixed over this */
        padding-top: 100px;
    }

}

/*=============== 992-1025px, tall screens : iPad Pro 12.9" portrait ===============
  The min-height is what keeps iPad mini landscape out - that is 1024 wide too,
  and it sets its own band a little shorter for a 768-high screen. */
@media (min-width: 992px) and (max-width: 1025px) and (min-height: 900px) {
    /* Below 992 the title is part of the artwork, and above 1025 the desktop
       layout already sets it over the picture. In this range alone it was
       left sitting under the band on white, so it goes back onto the
       photograph, held right, the way it reads everywhere else. */
    .strengths {
        --band: 520px;
    }
    /* An equal half each leaves a long run of nothing after the shorter
       priorities before the second column starts. The columns take their width
       from their own text instead, capped so a long one still wraps. */
    .theme-pillars {
        grid-template-columns: repeat(2, fit-content(330px));
        justify-content: start;
        column-gap: 40px;
    }
    /* There is width enough here for the chart and its reading to sit across,
       the way they do on a desktop - stacked, the pair runs to most of the
       screen. The chart keeps the larger share. */
    .kpi-item {
        grid-template-columns: 1.05fr 1fr;
        gap: 30px;
    }
    .strengths-bg {
        height: var(--band);
    }
    /* only the corner the copy sits in is darkened - the rest of the
       photograph is left alone */
    .strengths-scrim {
        display: block;
        top: auto;
        bottom: 0;
        height: var(--band);
        background: linear-gradient(to top left,
            rgba(6, 14, 22, .82) 0%,
            rgba(6, 14, 22, .60) 18%,
            rgba(6, 14, 22, .28) 36%,
            rgba(6, 14, 22, 0) 58%);
    }
    .strengths-hero {
        position: absolute;
        top: auto;
        bottom: 0;
        left: 0;
        z-index: 4;
        width: 100%;
        height: var(--band);
        align-items: flex-end;
        padding: 0 0 44px;
    }
    .strengths-hero-inner {
        max-width: 300px;
        margin-left: auto;
        margin-right: clamp(20px, 7.5vw, 132px);
    }

}

/*-----------The Four Values Responsive Css Start-------------*/
@media (max-width: 1025px) {
    /* the section is an ordinary block here, so an absolute band would lie on
       top of the copy. Back into the flow - it is the last thing in the
       section, so that already puts it at the foot - and bled out to the
       edges by hand, since the section is no longer full-bleed itself. */
    .theme-values {
        position: relative;
        width: 100vw;
        margin-left: calc((100vw - 100%) / -2);
        margin-top: 40px;
    }
    .hero-banner-video
    {
        object-position: center;
    }
}

@media (max-width: 991px) {
    /*Four across leaves each about 165px, which the longer words overflow*/
    .theme-values {
        padding: 14px 0;
    }
    .theme-values li,
    .theme-values li:last-child {
        flex: 0 0 50%;
        justify-content: flex-start;
        padding: 10px 18px;
    }
    /*the rule moves to the left of the second column of each row*/
    .theme-values li:nth-child(odd) {
        padding-left: 0px;
        border-left: 0px;
    }
    .theme-values li:nth-child(3) {
        border-top: 1px solid rgba(255, 255, 255, .25);
    }
    .theme-values li:nth-child(4) {
        border-top: 1px solid rgba(255, 255, 255, .25);
    }
}

@media (max-width: 575px) {
    /*Two across still - the room comes from tightening the parts, not from
      dropping to one column*/
    .theme-values {
        padding: 12px 0;
    }
    .theme-values li,
    .theme-values li:last-child {
        gap: 8px;
        padding: 9px 10px;
    }
    .theme-value-icon {
        width: 22px;
        height: 22px;
    }
    .theme-value-label {
        font-size: 12px;
        line-height: 17px;
        letter-spacing: .02em;
    }
}
/*-----------The Four Values Responsive Css End-------------*/