body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 24px;
    font-family: "helvetica-neue-lt-pro",sans-serif;
    color: #000000;
    font-weight: 300;
}
h1,
h2,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0px;
    padding: 0px;
}

a {
    text-decoration: none !important;
    font-size: 16px;
}

a:hover {
    text-decoration: none !important;
}

p {
font-size: 16px;
    line-height: 24px;
    font-family: "helvetica-neue-lt-pro",sans-serif;
    color: #000000;
    font-weight: 300;
}

.my-sidenav {
    display: none;
}
/*-----------Header Css End-------------*/

/*-----------Image Placeholder Css Start-------------*/
.img-ph {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: #e9ecef;
}
/*-----------Image Placeholder Css End-------------*/

/*-----------Root Variables Start-------------*/
:root {
    --orange: #f58220;
    --blue: #003974;
    --hero-h: 100vh;
    /*Height of the docked header. The inner banner reserves exactly this, so
      the breadcrumb clears the header by the same amount at every width*/
    --header-h: 74px;
}
@supports (height: 100svh) {
    :root {
        --hero-h: 100svh;
    }
}
/*-----------Root Variables End-------------*/

/*-----------Hero Banner Css Start-------------*/
/* Two screens tall, and the stage inside is stuck to the top for the second
   of them. The section that follows is pulled up by a screen, so it rides
   over the held film instead of pushing it away - and because the pull is
   exactly the extra height, the page is no longer overall. */
.hero-banner {
    position: relative;
    z-index: 1;
    width: 100%;
    height: calc(var(--hero-h) * 2);
}
.hero-banner-stage {
    position: sticky;
    top: 0;
    width: 100%;
    height: var(--hero-h);
    overflow: hidden;
    /* stands in for the first frame, so there is no white flash before the
       film has anything to show */
    background-color: #0a0a0a;
}
.hero-banner-img {
    width: 100%;
    height: 100%;
}
.hero-banner-video {
    display: block;
    width: 100%;
    height: 100%;
    /* the film is 16:9 and the section is the height of the window, so it is
       cropped to fill rather than letterboxed */
    object-fit: cover;
    object-position: bottom;
}
/* the banner line, set over the film */
.hero-copy {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    /* centred, then lifted by the padding: the foot of the film carries its
       own row of icons, and the copy has to stay clear of them */
    align-items: center;
    padding-bottom: 22vh;
    pointer-events: none;
}
.hero-copy .container {
    width: 100%;
}
.hero-title {
    margin: 0;
    font-size: 60px;
    font-weight: 700;
    line-height: 60px;
    letter-spacing: -.01em;
}
.hero-title span {
    display: block;
    /* the rule under the first half runs to the end of the longest line
       rather than the width of the banner */
    width: fit-content;
}
.hero-title-lead {
    color: #ffffff;
    /* the film is bright and changes shot to shot - a soft shadow keeps the
       white half legible wherever it happens to land */
    text-shadow: 0 2px 18px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .35);
}
.hero-title-core {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 4px solid var(--orange);
    color: var(--orange);
    text-shadow: 0 2px 18px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .35);
}

/* Keeps the docked header readable over a light image */
.hero-banner-stage::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 260px;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}
/*-----------Hero Banner Css End-------------*/


/*-----------Introduction to the Theme Css Start-------------*/
/* Held for one screen : the philosophy is read first, then it clears and the
   restructuring takes its place on the same picture. */
.theme {
    position: relative;
    /* rides up over the held banner - the pull matches the extra screen the
       banner carries, so nothing below it moves */
    z-index: 2;
    margin-top: calc(var(--hero-h) * -1);
    height: var(--hero-h);
    overflow: hidden;
}
.theme-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.theme-scrim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(rgba(6, 14, 22, .55), rgba(6, 14, 22, .55)),
        linear-gradient(to right, rgba(6, 14, 22, .55) 0%, rgba(6, 14, 22, 0) 55%);
}
/* both beats sit on the same spot, so one can fade into the other */
.theme-inner {
    position: relative;
    z-index: 3;
    height: 100%;
}
.theme-stage {
    position: absolute;
    top: 50%;
    left: calc(var(--bs-gutter-x) * .5);
    right: calc(var(--bs-gutter-x) * .5);
    transform: translateY(-50%);
    max-width: 900px;
}
.theme-eyebrow {
    display: block;
    margin-bottom: 14px;
    font-size: 25px;
    font-weight: 700;
    line-height: 20px;
    text-transform: uppercase;
    color: var(--orange);
}
.theme-title {
    margin-bottom: 14px;
    font-size: 35px;
    font-weight: 500;
    line-height: 42px;
    color: #ffffff;
}
.theme-copy {
    max-width: 640px;
    color: rgba(255, 255, 255, 1);
    font-weight: 400;
}
/* the five priorities, divided by rules rather than boxed in */
/* Three across, the remaining two beneath. The columns take their width
   from the text rather than an equal third - the short entries were leaving a
   long run of nothing before their rule. fit-content caps the long ones so
   they wrap instead of stretching the row. */
.theme-pillars {
    display: grid;
    grid-template-columns: repeat(3, fit-content(280px));
    justify-content: start;
    column-gap: 46px;
    row-gap: 26px;
    margin: 34px 0 0;
    padding: 0;
    list-style: none;
}
.theme-pillars li {
    padding-left: 24px;
    border-left: 1px solid var(--orange);
}
/* the first of each row carries no rule, so none hangs off the left edge */
.theme-pillars li:first-child,
.theme-pillars li:nth-child(4) {
    padding-left: 0;
    border-left: 0;
}
.theme-pillars strong {
    display: block;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    color: #f58220;
}
.theme-pillars span {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    line-height: 20px;
    color: rgba(255, 255, 255, 1);
}
.theme-lead {
    margin-top: 26px;
    color: rgba(255, 255, 255, 1);
}
.theme-platforms {
    display: flex;
    flex-wrap: wrap;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    max-width: 706px;
}
.theme-platforms li {
    flex: 1 1 0;
    min-width: 240px;
    padding: 0 24px;
    border-left: 1px solid var(--orange);
    font-size: 16px;
    line-height: 24px;
    color: #f58220;
}
.theme-platforms li:first-child {
    padding-left: 0;
    border-left: 0;
}
/* the outsized question mark, with its answer set beside it */
.theme-why {
    display: flex;
    align-items: center;
    gap: 26px;
    margin-top: 30px;
}
.theme-why-mark {
    flex: none;
    font-size: 86px;
    font-weight: 300;
    line-height: 1;
    color: #ffffff;
}
.theme-why-copy {
    max-width: 330px;
    color: rgba(255, 255, 255, .9);
}
.theme-cta {
    margin-top: 40px;
}
/* The four values, in a navy band with the items divided by rules rather than
   boxed in - the same treatment the priorities above them use. */
/* A band across the foot of the section, edge to edge. It sits outside the
   two stages so it is not held to their width - the stage is left-aligned
   inside the container, and a full-bleed trick from there comes out
   off-centre. */
.theme-values {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    padding: 10px 0;
    background: #0d2b52;
}
/* the ground runs to the edges of the page, the items to the edges of the
   container - so they line up with the copy in every other section */
.theme-values-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 auto;
    list-style: none;
}
.theme-values li {
    display: flex;
    align-items: center;
    gap: 10px;
    /* sized to its own words first, then the spare room is shared out evenly -
       an equal share is narrower than "Sustainability" and the label ran out
       from under it and across the rule beside it */
    flex: 1 1 auto;
    justify-content: center;
    padding: 6px 14px;
    border-left: 1px solid rgba(255, 255, 255, .25);
}
/* the first carries no rule, so none hangs off the left edge */
.theme-values li:first-child {
    justify-content: flex-start;
    padding-left: 0;
    border-left: 0;
}
/* and the last closes on the container edge, mirroring it */
.theme-values li:last-child {
    justify-content: flex-end;
    padding-right: 0;
}
.theme-value-icon {
    flex: none;
    display: block;
    width: 40px;
    height: 30px;
}
.theme-value-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.theme-value-label {
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #ffffff;
}
/*-----------Introduction to the Theme Css End-------------*/

/*-----------Header Css Start-------------*/
/* The header is fixed but pushed down to sit on the bottom edge of the
   full-height hero. On scroll .sticky slides it up to the top. */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: rgba(255 255 255 / .3);
    box-shadow: 0 4px 30px rgb(0 0 0 / .1);
    backdrop-filter: blur(8.8px);
    -webkit-backdrop-filter: blur(8.8px);
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
    /* starting point only - from here the position is driven by the scroll */
    transform: translateY(calc(var(--hero-h) - 100%));
    will-change: transform;
}
.header-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 0;
    transition: padding 0.4s ease;
}
.site-header.sticky .header-inner {
    padding: 14px 0;
}
/* Only once it is resting at the top does the movement get a transition: while
   it is riding up off the banner the transform is set every frame, and easing
   that would make it lag behind the page. */
/* The glass is for the hero, where there is a picture behind it worth reading
   through. Off the banner it passes over copy and photographs of every kind,
   so it becomes a solid white bar with a light shadow to lift it off the page. */
.site-header.sticky {
    background: #ffffff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-top-color: #ffffff;
    border-bottom-color: #ffffff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
    transition: transform .35s cubic-bezier(.4, 0, .2, 1),
                background-color .3s ease,
                box-shadow .3s ease;
}
/* Reloading part-way down the page, the header is painted at its resting spot
   on the banner before the script has read the scroll position. Easing from
   there is the glide up from the bottom you would see on every refresh, so
   nothing is eased until it has been put where the page actually is. Placed
   after .sticky deliberately: same weight, so the later rule wins. */
.site-header.is-init {
    transition: none;
}
/* Same reason, for the opening travel: it is driven a frame at a time off the
   scroll position, and easing that would make it lag behind the page. */
.site-header.is-gliding {
    transition: background-color .3s ease, box-shadow .3s ease;
}
.site-logo {
    display: block;
    line-height: 0;
}
.site-logo img {
    width: 184px;
    height: auto;
    transition: width 0.4s ease;
}
.site-header.sticky .site-logo img {
    width: 155px;
}
.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Scroll Down - centred in the header, hidden once the header sticks */
.scroll-down {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
.site-header.sticky .scroll-down {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.scroll-down-btn {
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
}
/* two rings rippling outward, the second offset by half the cycle */
.scroll-down-btn::before,
.scroll-down-btn::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    border: 2px solid var(--orange);
    border-radius: 50%;
    animation: ripple 2s ease-out infinite;
}
.scroll-down-btn::before {
    animation-delay: 0.5s;
}
.scroll-down-arrow {
    position: absolute;
    display: block;
    left: 50%;
    top: 50%;
    margin-top: -2px;
    width: 8px;
    height: 8px;
    border: 2px solid #ffffff;
    border-top: none;
    border-left: none;
    transform: translate(-50%, -50%) rotate(45deg);
}
.scroll-down-text {
    color: #ffffff;
    font-size: 10px;
    margin: 0;
    white-space: nowrap;
    transition: color 0.3s ease;
}
.scroll-down:hover .scroll-down-text {
    color: var(--orange);
}
@keyframes ripple {
    0% {
        transform: translate(-50%, -50%) scale(.3);
        opacity: 1;
    }
    70% {
        opacity: .7;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    .scroll-down-btn::before,
    .scroll-down-btn::after {
        animation: none;
    }
}

/* Download PDF button */
.btn-download {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: 4px;
    background-color: var(--orange);
    color: #ffffff;
    font-size: 16px;
    line-height: 20px;
    transition: background-color 0.3s ease;
}
.btn-download:hover {
    background-color: #d96e12;
    color: #ffffff;
}
.btn-download-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Hamburger */
.menu-toggle {
    width: 35px;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 6px;
    cursor: pointer;
}
.menu-toggle-bar {
    display: block;
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background-color: #000000;
    transition: background-color 0.4s ease, transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
}
.menu-toggle-bar:nth-child(2) {
    width: 70%;
}
/* Locked while the header is docked at the bottom of the hero */
.menu-toggle.is-locked {
    cursor: default;
}
/* the panel behind the toggle is white, so the close mark has to be dark */
.menu-toggle.is-active .menu-toggle-bar {
    width: 100%;
    background-color: #000000;
}
.menu-toggle.is-active .menu-toggle-bar:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}
.menu-toggle.is-active .menu-toggle-bar:nth-child(2) {
    opacity: 0;
}
.menu-toggle.is-active .menu-toggle-bar:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}
/*-----------Header Css End-------------*/

/*-----------Menu Panel Css Start-------------*/
/* A full-width sheet: the groups stand down the left, the group's contents
   fill the middle, and a picture sits to the right of them. */
.menu-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    z-index: 9998;
    /* the sheet is grey; the groups column is painted white over it below */
    background-color: #f7f7f7;
    overflow-x: hidden;
    transform: translateX(100%);
    visibility: hidden;
    /* held to the screen. It still scrolls if a short window cannot take the
       longest group, but the bar itself is kept out of the design. */
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1), visibility 0.6s;
}
.menu-panel::-webkit-scrollbar {
    display: none;
}
.menu-panel.open {
    transform: translateX(0);
    visibility: visible;
}
.menu-panel-inner {
    display: grid;
    grid-template-columns: 330px 1fr;
    gap: 60px;
    /* clears the header, which sits over this */
    padding-top: 115px;
    padding-bottom: 40px;
}

/* the groups */
.menu-tabs {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 30px;
}
/* the white runs out to the edge of the page behind the groups, so the sheet
   reads as two panels rather than one flat colour */
.menu-tabs::before {
    content: "";
    position: absolute;
    top: -118px;
    /* a height, not a negative bottom: stretching it past the sheet added its
       own length to the scroll height and made the panel scrollable */
    height: 100vh;
    right: 0;
    left: -100vw;
    background: #ffffff;
}
.menu-tab {
    position: relative;
}
/* the secondary link is set apart from the groups by a rule, and lighter, so
   it does not read as a fourth group */
/*Reads as a tab: same weight, colour and active state - these two navigate
  rather than switching a pane, which is the only difference*/
.menu-extra {
    position: relative;
    display: block;
    padding: 12px 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #000000;
    transition: color .3s ease;
}
.menu-extra:hover,
.menu-extra.active {
    color: var(--orange);
}
.menu-tab {
    padding: 12px 0;
    border: 0;
    background: transparent;
    text-align: left;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #000000;
    cursor: pointer;
    transition: color .3s ease;
}
.menu-tab:hover,
.menu-tab.active {
    color: var(--orange);
}

/* the contents of the group showing, with its picture beside them */
.menu-panes {
    min-width: 0;
}
.menu-pane {
    display: none;
}
.menu-pane.active {
    display: block;
}
/* Corporate Overview is far longer than the other two - it runs down one
   column and on into the next. Columns rather than a grid: a grid would fill
   left, right, left, and the reading order of a list of links has to run down
   the first column before it starts the second. */
#menu-corporate .menu-list {
    column-count: 2;
    column-gap: 60px;
}
#menu-corporate .menu-list li {
    /* or a link could be split in half across the column break */
    break-inside: avoid;
}
.menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}
.menu-list li a {
    display: block;
    padding-bottom: 12px;
    font-size: 16px;
    line-height: 24px;
    color: #000000;
    transition: color .3s ease, padding-left .3s ease;
}
.menu-list li a:hover {
    color: var(--orange);
    padding-left: 8px;
}
body.menu-open {
    overflow: hidden;
}
/*-----------Menu Panel Css End-------------*/

/*-----------About Triveni Css Start-------------*/
/* the extra height is the hold: the stage stays stuck while the picture,
   the copy and the figures are dealt in */
.about {
    position: relative;
    z-index: 2;
    height: 260vh;
    background: #1a1a1a;
}
.about-stage {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
.about-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    will-change: transform;
}
.about-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
/* copy and figures both sit on the picture, so it is darkened from the left
   where the copy runs and along the foot */
.about-scrim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(to right, rgba(12, 12, 12, .90) 0%, rgba(12, 12, 12, .60) 45%, rgba(12, 12, 12, .18) 100%),
        linear-gradient(to top, rgba(12, 12, 12, .55) 0%, rgba(12, 12, 12, 0) 45%);
}
.about-inner {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 140px 0 60px;
}
.about-inner .container {
    width: 100%;
}
/* only drawn on small screens, where the artwork is not behind the copy */
.about-inline-img {
    display: none;
    margin-bottom: 26px;
    border-radius: 14px;
    overflow: hidden;
}
.about-inline-img img {
    width: 100%;
    height: auto;
}
.about-eyebrow {
    display: block;
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    text-transform: uppercase;
    color: #ffffff;
}
.about-title {
    font-size:35px;
    font-weight: 500;
    line-height: 42px;
    color: #ffffff;
    margin-bottom: 20px;
}
.about-title span {
    display: block;
}
.about-copy {
    color: rgba(255, 255, 255, 1);
    margin-bottom: 30px;
}

/* Read More button */
/* Read More : the words and the arrow inside one rounded fill, so it reads as
   a button rather than a line of link text. The colour is carried on the
   button itself and both parts inherit it, which is what lets a single rule
   change the whole thing on hover. */
.btn-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 24px;
    border-radius: 50px;
    background: var(--orange);
    color: #ffffff;
    transition: background-color .3s ease, color .3s ease;
}
.btn-more-text {
    white-space: nowrap;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    color: inherit;
}
.btn-more-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: inherit;
}
.btn-more-arrow svg {
    width: 20px;
    height: 20px;
    transition: transform .3s ease;
}
.btn-more:hover .btn-more-arrow svg {
    transform: translateX(4px);
}

/* the figures : the panel sits on the artwork rather than covering it */
.about-stats {
    background: rgba(255, 255, 255, .85);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 16px;
    padding: 26px 0 30px;
    overflow: hidden;
}
.about-stats-head {
    padding: 0 26px 18px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-transform: uppercase;
    color: var(--orange);
}
.about-stats-head span {
    display: block;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(0, 0, 0, .6);
}
.about-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px 0;
    padding: 0 26px;
}
/* rules divide the figures without boxing each one in - the first of every
   row goes without, so no rule hangs off the left edge */
/* drawn as a pseudo-element sitting on the column line, not as a border
   inside the column - that way it straddles the line dead centre */
.stat {
    position: relative;
    padding: 0 0 0 18px;
}
.stat::after {
    content: "";
    position: absolute;
    top: 0;
    left: -22px;
    width: 2px;
    height: 100%;
    transform: translateX(-50%);
    background-color: var(--orange);
}
.stat:nth-child(2n + 1) {
    padding: 0 18px 0 0;
}
.stat:nth-child(2n + 1)::after {
    display: none;
}
/* digits held to one width so the figures do not jitter while counting */
.count {
    font-variant-numeric: lining-nums tabular-nums;
    -webkit-font-feature-settings: "lnum" 1, "tnum" 1;
    font-feature-settings: "lnum" 1, "tnum" 1;
}
.stat-value {
    font-size: 35px;
    font-weight: 500;
    line-height: 38px;
    color: #000000;
    margin-bottom: 4px;
}
/* the rupee mark and the unit ride with the figure but at label size */
.stat-value i,
.stat-value em {
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 30px;
}
.stat-value em {
    display: inline;
    margin-left: 2px;
}
.stat-label {
    font-size: 14px;
    line-height: 19px;
    color: rgba(0, 0, 0, 1);
}
/*-----------About Triveni Css End-------------*/

/*-----------Triveni Journey Css Start-------------*/
.journey {
    position: relative;
    z-index: 3;
    height: var(--hero-h);
    overflow: hidden;
}
.journey-bg {
    height: var(--hero-h);
}
.journey-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
/* The knockout is a 1920x1080 artwork covering the section, so the letters do
   not sit at a fixed share of the viewport - on a wide window they are pushed
   down, on a tall one up. This frame reproduces that cover box exactly (it is
   always 16:9 and always at least as large as the section), so the eyebrow and
   the copy can be placed against the letters rather than against the screen.
   In the artwork the letters run from 42.87% to 57.96% of the height. */
.journey-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: max(100vw, calc(var(--hero-h) * 16 / 9));
    height: max(var(--hero-h), calc(100vw * 9 / 16));
    z-index: 2;
}
/* blown up and faded out to start with - the run settles it back onto the
   picture, so the words are read through it */
.journey-knockout {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: scale(40);
    opacity: 0;
}
.journey-knockout img {
    display: block;
    width: 100%;
    height: 100%;
}
/* the heading is carried by the knockout on desktop */
.journey-title {
    display: none;
}
/* sits just above the letters : they begin at 42.87%, so 61% from the foot
   leaves an even gap */
.journey-eyebrow {
    display: block;
    position: absolute;
    left: 50%;
    bottom: 61%;
    transform: translateX(-50%);
    z-index: 5;
    opacity: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    text-transform: uppercase;
    /* the knockout panel behind this is white by the time it fades in */
    color: var(--orange);
}
/* and this just below them : they end at 57.96% */
.journey-text {
    position: absolute;
    left: 50%;
    top: 62%;
    transform: translateX(-50%);
    z-index: 6;
    opacity: 0;
    width: 100%;
    max-width: 760px;
    padding: 0 15px;
    text-align: center;
}
.journey-text p {
    margin-bottom: 30px;
}

/* Most of these buttons sit on a white ground - the journey copy lands on the
   white knockout panel, the two capsule boxes are white, and restructuring and
   ESG are white sections - so the default hover is dark. */
.btn-more:hover {
    background: #000000;
    color: #ffffff;
}
/* the four that sit on a photograph go white instead */
.theme-cta .btn-more:hover,
.about-cta .btn-more:hover,
.strengths-cta .btn-more:hover,
.slider-wrapper .btn-more:hover {
    background: #ffffff;
    color: var(--orange);
}
/*-----------Triveni Journey Css End-------------*/

/*-----------Message Capsule Css Start-------------*/
.capsule {
    background:#2a2a2a;
    padding: 14px;
    height: var(--hero-h);
    overflow: hidden;
}
.capsule-wrap {
    position: relative;
    height: calc(var(--hero-h) - 28px);
}

/* picture box : half width, starts in the RIGHT slot and moves to the LEFT */
.cap-imgbox {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(50% - 7px);
    height: 100%;
    border-radius: 30px;
    overflow: hidden;
    z-index: 2;
    will-change: transform;
}
.cap-slide-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    will-change: transform;
}
/* TODO: swap for the real photographs */
.cap-img-1 { background-image: url(../images/home/chairman-img.webp); }
.cap-img-2 { background-image: url(../images/home/vice-chairman-img.webp); }

/* the two copy boxes, each held in a slot */
.cap-text {
    position: absolute;
    top: 0;
    width: calc(50% - 7px);
    height: 100%;
    background: #ffffff;
    border-radius: 30px;
    overflow: hidden;
    /* the top clears the fixed header, which sits over this section */
    padding: 70px 55px 45px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 1;
    will-change: transform, opacity;
}
.cap-text-1 { left: 0; }
.cap-text-2 { right: 0; }
.cap-eyebrow {
    display: block;
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    text-transform: uppercase;
    color: var(--orange);
}
.cap-heading h2 {
    max-width: 490px;
    font-size: 35px;
    font-weight: 500;
    line-height: 42px;
    color: #000000;
}
/* pull quote : the icon sits above the text */
.cap-quote {
    margin: 26px 0 0;
    max-width: 490px;
}
.cap-quote-icon {
    display: block;
    /* 60 x 36.43 artwork - height follows so it is never squashed */
    width: 60px;
    height: auto;
    margin-bottom: 16px;
}
/* On desktop the card is fixed to the window height, and the mark was the
   difference between the longer quote fitting and having to scroll. The copy
   gets that space back; the mark still runs on tablet and mobile, where the
   card grows with its content. */
@media (min-width: 1026px) {
    .cap-quote-icon {
        display: none;
    }
}
/* size and weight are the body standard already, so only what differs is set */
.cap-quote p {
    text-transform: uppercase;
    color: #003667;
    font-weight: 400;
    line-height: 28px;
}
/* who said it : set apart from the quote by a short rule, so the two do not
   read as one run of copy */
.cap-attrib {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 2px solid var(--orange);
}
.cap-name {
    display: block;
    /* cite is italic by default, which is not the treatment here */
    font-style: normal;
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
    color: var(--orange);
}
.cap-role {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    line-height: 20px;
    color: rgba(0, 0, 0, 1);
}
/* Auto margins take the free space before justify-content does, so the copy
   settles in the middle of the card and the counter is still pushed to the
   foot. Held at the top it ran past the bottom of a short window and the card
   clipped the button off. */
.cap-content {
    margin: auto 0;
}
.cap-cta {
    margin-top: 28px;
}

/* counter at the foot of each box, held to the right edge */
.capsule-bottom {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 30px;
}
.cap-count {
    display: flex;
    gap: 12px;
    flex: none;
}
.cap-count span {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #000000;
}
.cap-count .cap-current {
    background: var(--orange);
    border-color: var(--orange);
    color: #ffffff;
}
/*-----------Message Capsule Css End-------------*/

/*-----------Strengths Css Start-------------*/
/* The opening state : the picture with the title held to the right. It is
   cleared on scroll and the copy and gallery below take over. */
.strengths-hero {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 120px 0 70px;
}
.strengths-hero .container {
    width: 100%;
}
.strengths-hero-inner {
    max-width: 300px;
    /* held to the right, but inset from the container edge so it is not
       hard against the side of the picture. Scales with the window so it
       does not crowd on a narrower desktop. */
    margin-left: auto;
    margin-right: clamp(20px, 7.5vw, 132px);
}
.strengths-hero-title {
    color: #ffffff;
    text-transform: uppercase;
}
.strengths-hero-title span {
    display: block;
    font-size: 35px;
    font-weight: 700;
    line-height: 42px;
}
/* the last word carries the weight, set large and light against the rest */
.strengths-hero-title em {
    display: block;
    margin-top: 2px;
    font-style: normal;
    font-size: 110px;
    font-weight: 300;
    line-height: 110px;
    letter-spacing: .02em;
}
.strengths-hero-sub {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 3px solid var(--orange);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    text-transform: uppercase;
    color: var(--orange);
}
/* A full-bleed photograph with the copy held to the left and the strengths
   carried on a curved gallery to the right. */
.strengths {
    position: relative;
    min-height: var(--hero-h);
    display: flex;
    align-items: center;
    padding: 120px 0 70px;
    overflow: hidden;
}
.strengths-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
/* darkened from the left, where the copy runs */
.strengths-scrim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(to right, rgba(6, 14, 22, .92) 0%, rgba(6, 14, 22, .70) 42%, rgba(6, 14, 22, .40) 100%),
        linear-gradient(to top, rgba(6, 14, 22, .55) 0%, rgba(6, 14, 22, 0) 45%);
}
/* uses the Bootstrap container so the copy starts on the same line as the
   logo in the header, at every breakpoint */
.strengths-layout {
    position: relative;
    z-index: 4;
    width: 100%;
}
/* kept above the gallery, so the copy always wins if the two ever meet */
.strengths-aside {
    position: relative;
    z-index: 2;
    max-width: 40%;
}
.strengths-eyebrow {
    display: block;
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    text-transform: uppercase;
    color: #ffffff;
}
.strengths-title {
    margin-bottom: 16px;
    font-size: 35px;
    font-weight: 500;
    line-height: 42px;
    color: #ffffff;
}
.strengths-copy {
    margin-bottom: 28px;
    color: rgba(255, 255, 255, 1);
}

/* prev / next */
.cf-controls {
    display: flex;
    gap: 10px;
    margin-top: 32px;
}
/* same treatment as the arrow on the Read More buttons */
.cf-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    border: 0;
    background: var(--orange);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .3s ease, color .3s ease;
}
.cf-btn:hover {
    background: #ffffff;
    color: var(--orange);
}
/* On the photograph these read better as an outline than a solid fill. Scoped
   to this section - the ESG pair uses the same class on a white ground, where
   a white outline on nothing would disappear. */
.strengths .cf-btn {
    /* an inset shadow rather than a border: the section sits under a GSAP
       transform, and a 1px border on a circle lands on half pixels there and
       comes out ragged. This follows the radius cleanly and costs no layout. */
    border: 0;
    box-shadow: inset 0 0 0 1px #ffffff;
    background: transparent;
    color: #ffffff;
    transition: background-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.strengths .cf-btn:hover {
    background: #ffffff;
    box-shadow: inset 0 0 0 1px #ffffff;
    color: var(--orange);
}
.cf-btn svg {
    width: 20px;
    height: 20px;
    transition: transform .3s ease;
}
#strengthNext:hover svg {
    transform: translateX(3px);
}
#strengthPrev:hover svg {
    transform: translateX(-3px);
}

/* the gallery : the cards are laid out around a circle by the script, so the
   run curves away instead of sliding flat */
/* Sits outside the container and runs to the right edge of the page. Its left
   edge stops clear of the copy, and everything past that edge is clipped - so
   the outer cards can never reach across, whatever the width. The mask fades
   that cut so they dissolve in rather than snap off. */
.coverflow {
    position: absolute;
    top: 50%;
    right: 0;
    left: 44%;
    transform: translateY(-50%);
    /* above the scrim, or the darkening would wash the cards out */
    z-index: 3;
    height: clamp(360px, 42vw, 468px);
    perspective: 1600px;
    cursor: grab;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 100%);
}
.coverflow.dragging {
    cursor: grabbing;
}
.cf-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}
.strength {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(196px, 18vw, 260px);
    height: clamp(320px, 38vw, 420px);
    padding: 32px 28px;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(to right, #b6c5ce, #728a96);
    box-shadow: 0 24px 50px rgba(0, 0, 0, .3);
    /* the script writes the transform - only the easing lives here */
    transform: translate(-50%, -50%);
    transform-origin: center;
    transition: transform .6s cubic-bezier(.4, 0, .2, 1),
                opacity .6s cubic-bezier(.4, 0, .2, 1),
                box-shadow .6s cubic-bezier(.4, 0, .2, 1);
    will-change: transform, opacity;
}
.strength:nth-of-type(2n) {
    background: linear-gradient(to right, #f4c65b, #f58320);
}
.strength-icon {
    display: block;
    /* the card is a flex column, so this centres it across the card */
    align-self: center;
    width: 120px;
    height: 120px;
}
.strength-icon img {
    width: 100%;
    height: 100%;
}
.strength-name {
    position: relative;
    z-index: 2;
    font-size: 20px;
    font-weight: 500;
    line-height: 27px;
    text-transform: uppercase;
    color: #ffffff;
}
/* the index is a watermark on the top row, opposite the icon */
/*-----------Strengths Css End-------------*/

/*-----------Business Slider Css Start-------------*/
.slider-wrapper {
    position: relative;
    width: 100%;
    height: var(--hero-h);
    overflow: hidden;
    background: #0a0a0a;
    color: #ffffff;
    opacity: 0;
    transition: opacity 1s ease;
}
.slider-wrapper.loaded {
    opacity: 1;
}
.webgl-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
}
/* darkened so the copy stays readable over the photography */
.slider-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    background:
        /* a flat wash over the whole picture, so the copy holds up wherever the
           photograph happens to be light */
        linear-gradient(rgba(0, 0, 0, .42), rgba(0, 0, 0, .42)),
        linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .55) 100%),
        linear-gradient(90deg, rgba(0, 0, 0, .38) 0%, rgba(0, 0, 0, 0) 50%);
}
/* everything sits inside the container, so the copy lines up with the logo
   and the nav with the header's right-hand edge */
.slider-inner {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 130px;
    /* leaves the foot clear for the four names */
    padding-bottom: 150px;
}
/* moved up top, out of the way of the names now running along the foot */
.slide-counter {
    position: absolute;
    top: 130px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    letter-spacing: 1px;
    color: #ffffff;
}
.slide-number {
    color: var(--orange);
    font-weight: 700;
}

/* eyebrow + heading, top left */
.slider-head {
    max-width: 620px;
}
.slider-eyebrow {
    display: block;
    /* the same gap the other sections put under their eyebrow */
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    text-transform: uppercase;
    color: #ffffff;
}

/* the active business, bottom left */
.slide-content {
    max-width: 100%;
}
.slide-title {
    margin: 0 0 10px;
    font-size: 35px;
    font-weight: 500;
    line-height: 42px;
    color: #f58220;
}
/* the script wraps each letter so they can be dealt in one at a time, and
   groups them by word so a title never breaks mid-word when it wraps */
.slide-title span {
    display: inline-block;
}
.slide-title .slide-word {
    white-space: nowrap;
}
.slide-description {
    margin: 0 0 24px;
    max-width: 520px;
    font-size: 18px;
    line-height: 26px;
    text-transform: uppercase;
    color:#ffffff;
    font-weight: 400;
}
/* all the figures on one line, however many a business has. Each is only as
   wide as its own text - no fixed width - but may still shrink and wrap when
   a label runs long, so the row never overflows. */
.slide-stats {
    display: flex;
    flex-wrap: nowrap;
    gap: 60px;
    margin-bottom: 28px;
}
.slide-stat {
    flex: 0 1 auto;
    min-width: 0;
}
/* figure and label each hold to a single line, so a number is never split
   across two rows */
.slide-stat strong {
    display: block;
    font-size: 30px;
    line-height: 32px;
    font-weight: 500;
    white-space: nowrap;
    color: #ffffff;
}
.slide-stat span {
    display: block;
    margin-top: 4px;
    white-space: nowrap;
    color: rgba(255, 255, 255, 1);
}
/* the one long label is broken where it reads best, by dropping the rest onto
   its own line - a block span rather than a <br> */
.slide-stat .stat-break {
    display: block;
    margin-top: 0;
}
/* .slide-stat span is block, which would put this on its own line everywhere -
   it only does that on a phone, where the responsive sheet turns it back on. */
.slide-stat .stat-line {
    display: inline;
}
/* A qualifier set under the label on its own line. Unlike .stat-break, which
   only chooses where a label wraps, this is a separate note - so it is spaced
   off the line above and is allowed to wrap, which the label itself is not. */
.slide-stat .stat-note {
    display: block;
    margin-top: 10px;
    white-space: normal;
}
/* the rise mark that sits before a change figure */
.stat-rise {
    display: inline-block;
    width: 11px;
    height: 13px;
    /* Clear of the bracket on one side and of the figure on the other. Only
       the left is set here: a word space already follows it in the label, and
       matching that on the right is what balances the two. */
    margin-left: 4px;
    margin-right: 0;
    /* nudged onto the text baseline rather than sitting high on the line */
    vertical-align: -1px;
    color: inherit;
}
.stat-rise svg {
    display: block;
    width: 100%;
    height: 100%;
}
.slide-cta {
    display: inline-block;
}

/* the four names side by side along the foot, each with its own progress line */
.slides-navigation {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 46px;
    display: flex;
    flex-direction: row;
    gap: 26px;
}
.slide-nav-item {
    flex: 1 1 0;
    min-width: 0;
    cursor: pointer;
    opacity: .5;
    transition: opacity .4s ease;
}
.slide-nav-item.active {
    opacity: 1;
}
.slide-nav-item:hover {
    opacity: .85;
}
.slide-progress-line {
    position: relative;
    height: 1px;
    width: 100%;
    margin-bottom: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, .25);
}
.slide-progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: var(--orange);
    transition: width .1s ease, opacity .3s ease;
}
.slide-nav-title {
    font-size: 18px;
    line-height: 24px;
    color: #ffffff;
}
/*-----------Business Slider Css End-------------*/

/*-----------Corporate Restructuring Css Start-------------*/
.restructure {
    padding: 95px 0 100px;
    background: #ffffff;
    text-align: center;
}
.restructure-intro {
    max-width: 860px;
    margin: 0 auto 55px;
}
.restructure-eyebrow {
    display: block;
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    text-transform: uppercase;
    color: var(--orange);
}
.restructure-title {
    margin-bottom: 18px;
    font-size: 35px;
    font-weight: 500;
    line-height: 42px;
    color: #000000;
}
.restructure-copy {
    margin-bottom: 30px;
}
/* the infographic keeps its own proportions rather than being cropped */
.restructure-graphic {
    border-radius:0px;
    overflow: hidden;
    max-width: 920px;
    margin:auto;
}
.restructure-graphic img {
    display: block;
    width: 100%;
    height: auto;
}
/*-----------Corporate Restructuring Css End-------------*/

/*-----------Key Performance Indicators Css Start-------------*/
.kpi {
    position: relative;
    padding: 95px 0 100px;
    overflow: hidden;
}
.kpi-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.kpi-scrim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to right, rgba(6, 14, 22, .93) 0%, rgba(6, 14, 22, .80) 55%, rgba(6, 14, 22, .62) 100%);
}
.kpi-inner {
    position: relative;
    z-index: 3;
}
.kpi-head {
    margin-bottom: 34px;
}
.kpi-eyebrow {
    display: block;
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    text-transform: uppercase;
    color: #ffffff;
}
.kpi-title {
    font-size: 35px;
    font-weight: 500;
    line-height: 42px;
    color: #ffffff;
}

/* the three groups */
.kpi-tab-select {
    display: none;
}
.kpi-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
}
.kpi-tab {
    padding: 12px 26px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50px;
    background: transparent;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    color: #ffffff;
    cursor: pointer;
    transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.kpi-tab:hover {
    border-color: var(--orange);
    color: var(--orange);
}
.kpi-tab.active {
    background: var(--orange);
    border-color: var(--orange);
    color: #ffffff;
}

/* one indicator at a time : graph on the left, the reading on the right */
/* min-width:0 keeps a flex/grid parent from being pushed open by the owl
   stage, which is as wide as every slide put together */
.kpi-panes {
    position: relative;
    min-width: 0;
}
/* The groups are stacked on the same spot so one fades into the other in
   place. Only the shown one is in the flow and gives the block its height;
   the rest are lifted out of it. Hiding by display would collapse that height
   first, which is why the section dropped before the change. visibility also
   leaves the hidden ones measurable, so owl still sizes them correctly. */
.kpi-pane {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* a short rise with the fade, so the group arrives rather than just
       appearing - the outgoing one settles back down as it goes */
    transform: translateY(16px);
    transition: opacity .45s ease,
                transform .45s cubic-bezier(.4, 0, .2, 1),
                visibility .45s ease;
}
.kpi-pane.active {
    position: relative;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}
.kpi-item {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 50px;
    /* the reading starts level with the top of the graph */
    align-items: center;
}
.kpi-graph {
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
}
.kpi-graph img {
    display: block;
    width: 100%;
    height: auto;
}
.kpi-name {
    margin-bottom: 6px;
    font-size: 26px;
    font-weight: 500;
    line-height: 34px;
    color: #ffffff;
}
.kpi-unit {
    display: block;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 20px;
    color: var(--orange);
}
.kpi-note {
    color: rgba(255, 255, 255, .88);
}
.kpi-note strong {
    font-weight: 700;
    color: #ffffff;
}
.kpi-note--sub {
    margin-top: 12px;
    color: rgba(255, 255, 255, .62);
}

/* owl furniture, themed */
/* The stage takes a full row of its own, then the dots and the arrows share
   the next row over to the right. Laid out rather than positioned, so they
   stay side by side at any width. */
/* .owl-loaded is on the selector because owl sets display:block on it, which
   would otherwise out-specify this and leave the stage, dots and arrows as
   three stacked blocks */
.kpi-slider.owl-carousel,
.kpi-slider.owl-carousel.owl-loaded {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    column-gap: 20px;
    row-gap: 0;
}
.kpi-slider .owl-stage-outer {
    flex: 0 0 100%;
    width: 100%;
}
/* The pair sits under the reading, in the right-hand column, and is pulled
   back up by its own height so it finishes level with the foot of the graph.
   The indent is the graph column plus the gap, worked out from the same track
   sizes as .kpi-item (1.05fr 1fr / 50px), so it follows the graph at any
   width. 44px is the height of the buttons. */
.kpi-slider .owl-nav {
    order: 2;
    display: flex;
    gap: 10px;
    margin: -44px 0 0;
    /* the negative margin puts these under the stage, which owl positions
       relative - without a stacking context of their own the stage sits on
       top and swallows every click */
    position: relative;
    z-index: 2;
}
/* same treatment as the arrow on the Read More buttons */
.kpi-slider .owl-nav button.owl-prev,
.kpi-slider .owl-nav button.owl-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0 !important;
    border-radius: 50%;
    /* an inset shadow rather than a border - a hairline circle under a
       transform rasterises ragged, this follows the radius cleanly */
    box-shadow: inset 0 0 0 1px #ffffff;
    background: transparent !important;
    color: #ffffff !important;
    transition: background-color .3s ease, color .3s ease, opacity .3s ease;
}
.kpi-slider .owl-nav button svg {
    width: 20px;
    height: 20px;
    transition: transform .3s ease;
}
.kpi-slider .owl-nav button.owl-prev:hover,
.kpi-slider .owl-nav button.owl-next:hover {
    background: #ffffff !important;
    color: var(--orange) !important;
}
.kpi-slider .owl-nav button.owl-next:hover svg {
    transform: translateX(3px);
}
.kpi-slider .owl-nav button.owl-prev:hover svg {
    transform: translateX(-3px);
}
/* owl marks the ends of the run - dim them rather than leaving them looking live */
.kpi-slider .owl-nav button.disabled {
    opacity: .35;
    cursor: default;
}
.kpi-slider .owl-nav button.disabled:hover {
    background: transparent !important;
    color: #ffffff !important;
}
.kpi-slider .owl-dots {
    order: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -44px 0 0;
    margin-left: calc((100% - 50px) * 1.05 / 2.05 + 50px);
    position: relative;
    z-index: 2;
}
.kpi-slider .owl-dots button.owl-dot span {
    display: block;
    width: 26px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .3);
    transition: background-color .3s ease;
}
.kpi-slider .owl-dots button.owl-dot.active span {
    background: #ffffff;
}

/* ---- the graphs ----
   Each chart is inlined by collectMapSvg(), so its own groups can be animated.
   The artwork carries #bar1..#bar6 for the columns and #line_and_number for the
   trend drawn over them. Columns flip up off the axis one after another, then
   the trend fades in on top.

   Nothing runs until the figure is given .is-playing, which is set when the
   graph is the one on screen - the slider shows one at a time, so a graph that
   is scrolled past while hidden would otherwise have played to nobody. */
.kpi-graph img,
.kpi-graph svg {
    display: block;
    width: 100%;
    height: auto;
}
.kpi-graph svg #bar1,
.kpi-graph svg #bar2,
.kpi-graph svg #bar3,
.kpi-graph svg #bar4,
.kpi-graph svg #bar5,
.kpi-graph svg #bar6 {
    /* fill-box, or the percentage origin resolves against the whole viewBox
       and the columns swing from the wrong point */
    transform-box: fill-box;
    transform-origin: bottom;
    animation: kpi-bar .7s linear backwards;
    animation-play-state: paused;
}
.kpi-graph svg #bar1 { animation-delay: 0s; }
.kpi-graph svg #bar2 { animation-delay: .14s; }
.kpi-graph svg #bar3 { animation-delay: .28s; }
.kpi-graph svg #bar4 { animation-delay: .42s; }
.kpi-graph svg #bar5 { animation-delay: .56s; }
.kpi-graph svg #bar6 { animation-delay: .70s; }

.kpi-graph svg #line_and_number,
.kpi-graph svg #line_and_number1,
.kpi-graph svg #text_and_line {
    animation: kpi-line 1s ease-in 1.05s backwards;
    animation-play-state: paused;
}

.kpi-graph.is-playing svg #bar1,
.kpi-graph.is-playing svg #bar2,
.kpi-graph.is-playing svg #bar3,
.kpi-graph.is-playing svg #bar4,
.kpi-graph.is-playing svg #bar5,
.kpi-graph.is-playing svg #bar6,
.kpi-graph.is-playing svg #line_and_number,
.kpi-graph.is-playing svg #line_and_number1,
.kpi-graph.is-playing svg #text_and_line {
    animation-play-state: running;
}

@keyframes kpi-bar {
    0% {
        transform: rotateX(90deg);
    }
    100% {
        transform: rotateX(0deg);
    }
}
@keyframes kpi-line {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@media (prefers-reduced-motion: reduce) {
    .kpi-graph svg [id^="bar"],
    .kpi-graph svg #line_and_number,
    .kpi-graph svg #line_and_number1,
    .kpi-graph svg #text_and_line {
        animation: none !important;
    }
}

/*-----------Key Performance Indicators Css End-------------*/

/*-----------ESG Css Start-------------*/
.esg {
    padding: 95px 0 100px;
    background: #ffffff;
    overflow: hidden;
}
.esg-eyebrow {
    display: block;
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    text-transform: uppercase;
    color: var(--orange);
}
.esg-title {
    max-width: 460px;
    margin-bottom: 18px;
    font-size: 35px;
    font-weight: 500;
    line-height: 42px;
    color: #000000;
}
.esg-copy {
    max-width: 460px;
    margin-bottom: 30px;
}
/* the column runs the full height of the slider, the copy sits in the middle
   of it and the arrows are dropped to the foot, level with the picture */
.esg-aside {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 74px;
}
.esg-controls {
    position: absolute;
    right: calc(var(--bs-gutter-x) * .5);
    bottom: 70px;
    display: flex;
    align-items: center;
    gap: 12px;
}
/* the shared .cf-btn hover turns white, which vanishes on this light ground */
.esg-controls .cf-btn:hover {
    background: #000000;
    color: #ffffff;
}

/* The column runs on to the right edge of the page, so the next pillar is
   caught there rather than stopping at the container gutter. The percentage
   resolves against the row, which is the container width, so the pull is
   exactly the gutter beside it. */
.esg-right {
    padding-right: 0;
    /* Widened by the gutter beside the container and pulled back by the same
       amount: the width is what actually extends the stage to the edge of the
       page, and the negative margin keeps its outer size at col-lg-7 so the
       row still fits on one line. 58.3333% is that column's own width. */
    width: calc(58.333333% + (100vw - 100%) / 2);
    margin-right: calc((100vw - 100%) / -2);
}
/* the width each slide takes, since owl is measuring them rather than
   dividing the stage up */
.esg-item {
    width: clamp(300px, 46vw, 800px);
}
/* one picture per slide, with its label sitting over the bottom-right corner.
   The item is padded on that side so the box hangs off the picture and only
   part of it overlaps. */
.esg-item {
    position: relative;
    padding-bottom: 74px;
}
.esg-media {
    margin: 0;
    height: 420px;
    overflow: hidden;
}
.esg-label {
    position: absolute;
    bottom: 0;
    right: 30px;
    z-index: 2;
    min-width: 300px;
    padding: 22px 20px 20px 34px;
    background: #ffffff;
}
/* the rule above the name carries the colour of the pillar */
.esg-label::before {
    content: "";
    display: block;
    width: 205px;
    height: 4px;
    margin-bottom: 14px;
    background: var(--orange);
}
.esg-label--env::before {
    background: #189647;
}
.esg-label--social::before {
    background: var(--orange);
}
.esg-label--gov::before {
    background: #557a8c;
}
.esg-name {
    margin-bottom: 8px;
    font-size: 26px;
    font-weight: 700;
    line-height: 32px;
    color: #000000;
}
.esg-tag {
    font-size: 14px;
    line-height: 20px;
    text-transform: uppercase;
    color: #000000;
}
/*-----------ESG Css End-------------*/

/*-----------Footer Css Start-------------*/
.site-footer {
    padding: 55px 0 34px;
    background: #0c0c0c;
}
/* logo on one side, the channels on the other, divided from the line below */
.footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.footer-logo {
    display: block;
    line-height: 0;
}
.footer-logo img {
    width: 175px;
    height: auto;
}
.footer-social {
    display: flex;
    align-items: center;
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 1);
    color: #ffffff;
    transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.footer-social a:hover {
    background: var(--orange);
    border-color: var(--orange);
    color: #ffffff;
}
.footer-social svg {
    width: 18px;
    height: 18px;
}

/* the report and the site on the left, the notice on the right */
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px 40px;
    flex-wrap: wrap;
    padding-top: 26px;
}
.footer-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 26px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-links li {
    position: relative;
}
/* a rule between the two, rather than a pipe character */
.footer-links li + li::before {
    content: "";
    position: absolute;
    left: -13px;
    top: 50%;
    width: 1px;
    height: 14px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .3);
}
.footer-links a {
    font-size: 15px;
    line-height: 22px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #ffffff;
    transition: color .3s ease;
}
.footer-links a:hover {
    color: var(--orange);
}
.footer-copy {
    font-size: 14px;
    line-height: 22px;
    color: rgba(255, 255, 255, 1);
}
.footer-copy span {
    position: relative;
    margin-left: 16px;
}
.footer-copy span::before {
    content: "";
    position: absolute;
    left: -9px;
    top: 50%;
    width: 1px;
    height: 12px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .3);
}
/*-----------Footer Css End-------------*/
/*-----------Breadcrumb Css Start-------------*/
.breadcrumb-list {
    list-style: none;
    margin: 35px 0px 40px;
    padding: 0px;
}
.breadcrumb-list li {
    display: inline-block;
    font-size: 14px;
    line-height: 22px;
    color: #000000;
}
.breadcrumb-list li:after {
    content: "/";
    padding: 0px 8px;
    color: #8a8a8a;
}
.breadcrumb-list li:last-child:after {
    display: none;
}
.breadcrumb-list li a {
    font-size: 14px;
    color: #000000;
    transition: 0.3s;
    -webkit-transition: 0.3s;
}
.breadcrumb-list li a:hover {
    color: #f58220;
}
.breadcrumb-list li.active {
    color: #f58220;
}
/*-----------Breadcrumb Css End-------------*/

/*-----------Inner Banner Css Start-------------*/
/* The header is fixed and rests at the top on every inner page, so the
   banner has to start below it - the top padding clears the header height
   (about 65px once it has shrunk, 84px before) plus a gap. */
.inner-banner {
    padding: var(--header-h) 0px 80px;
}
.sec-label {
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    color: #f58220;
    text-transform: uppercase;
    letter-spacing: 0.5px;
        margin-top: 20px;
}
.sec-line {
    display: block;
    width: 100%;
    max-width: 640px;
    height: 1px;
    margin: 10px 0px 20px;
    background-color: #d5d0c4;
    position: relative;
}
.sec-line:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0px;
    width: 140px;
    height: 7px;
    border-radius: 4px;
    background-color: #93a3ad;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
.banner-title {
    font-size: 36px;
    line-height: 46px;
    font-weight: 500;
    color: #000000;
}
.inner-banner-content p {
    margin-top: 0px;
}
.banner-list {
    list-style: none;
    margin: 20px 0px 0px;
    padding: 0px;
}
.banner-list li {
    font-size: 16px;
    line-height: 24px;
    color: #000000;
    padding: 0px 0px 10px 22px;
    position: relative;
}
.banner-list li:last-child {
    padding-bottom: 0px;
}
.banner-list li:before {
    content: "";
    position: absolute;
    top: 9px;
    left: 0px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #f58220;
}
.inner-banner-img {
    width: 100%;
    max-width: 748px;
    height: 480px;
    margin-left: auto;
    overflow: hidden;
}
/*-----------Inner Banner Css End-------------*/

/*-----------About Intro Css Start-------------*/
.about-intro {
    padding: 0px 0px 60px;
}
.lead-para {
    font-size: 18px;
    line-height: 30px;
    color: #000000;
    margin-bottom: 24px;
}
.about-intro p {
    color: #333333;
}
/*-----------About Intro Css End-------------*/

/*-----------TEIL Scale Css Start-------------*/
.teil-scale {
    padding: 0px 0px 80px;
}
.scale-box {
    position: relative;
    padding: 0px 0px 40px;
}
.scale-box:before {
    content: "";
    position: absolute;
    top: 14px;
    right: 0px;
    bottom: 0px;
    width: 1px;
    background-color: #f58220;
}
.scale-box:after {
    content: "";
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 60%;
    height: 1px;
    background-color: #f58220;
}
.scale-head {
    display: flex;
    align-items: flex-start;
}
.scale-head-text {
    padding-right: 20px;
}
.scale-title {
    font-size: 20px;
    line-height: 28px;
    font-weight: 400;
    color: #000000;
    text-transform: uppercase;
}
.scale-date {
    font-size: 14px;
    line-height: 22px;
    color: #333333;
}
.scale-head-line {
    display: block;
    flex: 1 1 auto;
    height: 1px;
    margin-top: 14px;
    background-color: #f58220;
}
.scale-data {
    padding: 30px 40px 0px 0px;
}
.scale-item {
    padding-top: 30px;
}
.scale-num {
    font-size: 30px;
    line-height: 40px;
    font-weight: 500;
    color: #000000;
}
.scale-num .rupee,
.scale-num .unit {
    font-size: 24px;
    font-weight: 300;
}
.scale-data p {
    font-size: 16px;
    line-height: 24px;
    color: #333333;
    margin-top: 4px;
}
/*-----------TEIL Scale Css End-------------*/

/*-----------Common Heading Css Start-------------*/
.sec-heading {
    font-size: 28px;
    line-height: 38px;
    font-weight: 500;
    color: #000000;
}
.sec-heading-sm {
    font-size: 20px;
    line-height: 28px;
    font-weight: 400;
    color: #000000;
    text-transform: uppercase;
}
.txt-orange {
    color: #f58220;
}
.txt-green {
    color: #5aa72b;
}
.txt-blue {
    color: #2b4a8b;
}
/*-----------Common Heading Css End-------------*/

/*-----------Operating Structure Css Start-------------*/
.operating-structure {
    padding: 0px 0px 40px;
}
.os-note {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: #000000;
    margin-top: 24px;
}
.os-date {
    font-size: 14px;
    line-height: 22px;
    color: #333333;
    margin-top: 4px;
}
.os-sub-heading {
    font-size: 18px;
    line-height: 26px;
    font-weight: 400;
    color: #000000;
    margin-top: 30px;
}
.donut-block {
    max-width: 520px;
    margin: 0px auto;
    padding: 30px 0px;
}
.donut-logo {
    display: block;
    width: 150px;
    height: auto;
    margin: 0px auto 25px;
}
/*The chart artwork carries its own labels and centre figure, so it only has
  to be centred and allowed to scale down with the column*/
.pie-img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0px auto;
}
/* The four charts were exported at different scales - ring radius against
   canvas width runs 3.65 / 2.94 / 3.65 / 4.18 - so each is given the width
   that renders the same ring size inside the shared .donut-block box. */
.pie-1,
.pie-3 {
    width: 87.37%;
}
.pie-2 {
    width: 70.35%;
}
.pie-4 {
    width: 100%;
}
/*-----------Operating Structure Css End-------------*/

/*-----------Legacy Css Start-------------*/
.legacy-sec {
    padding: 40px 0px 80px;
}
.legacy-sec .sec-heading {
    margin-bottom: 20px;
}
.legacy-sec .sec-heading-sm {
    margin: 50px 0px 25px;
}
.biz-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.biz-panel {
    position: relative;
    min-height: 340px;
    padding: 30px 25px 70px;
    overflow: hidden;
}
.biz-title {
    font-size: 24px;
    line-height: 32px;
    font-weight: 400;
    color: #ffffff;
}
.biz-line {
    display: block;
    width: 100%;
    height: 1px;
    margin: 15px 0px;
    background-color: rgba(255, 255, 255, 0.5);
}
.biz-entry {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 12px;
}
.biz-text {
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
}
.biz-text strong {
    font-weight: 500;
}
/*White SVG mark tucked into the bottom right of the coloured panel*/
.biz-icon {
    position: absolute;
    right: 25px;
    bottom: 25px;
    width: 58px;
    height: auto;
}
.biz-info {
    flex: 1 1 auto;
    padding: 25px 0px 30px;
}
.biz-info-head {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    margin-bottom: 15px;
}
.biz-stat {
    margin-bottom: 20px;
}
.biz-stat h6 {
    font-size: 18px;
    line-height: 26px;
    font-weight: 500;
    color: #000000;
}
.biz-stat p {
    font-size: 16px;
    line-height: 24px;
    color: #333333;
}
.biz-note {
    font-size: 14px !important;
    line-height: 20px;
    margin-top: 25px;
}
.biz-bar {
    display: block;
    width: 100%;
    height: 8px;
}
/*Green*/
.biz-green .biz-panel,
.biz-green .biz-bar {
    background-image: linear-gradient(135deg, #046a38 0%, #78be20 100%);
}
.biz-green .biz-info-head {
    color: #5aa72b;
}
/*Grey*/
.biz-grey .biz-panel,
.biz-grey .biz-bar {
    background-image: linear-gradient(135deg, #54595f 0%, #b1b3b3 100%);
}
.biz-grey .biz-info-head {
    color: #6d7278;
}
/*Blue*/
.biz-blue .biz-panel,
.biz-blue .biz-bar {
    background-image: linear-gradient(135deg, #0057b8 0%, #00a3e0 100%);
}
.biz-blue .biz-info-head {
    color: #0091d5;
}
/*Teal*/
.biz-teal .biz-panel,
.biz-teal .biz-bar {
    background-image: linear-gradient(135deg, #16a6ac 0%, #0b7c8d 100%);
}
.biz-teal .biz-info-head {
    color: #0f96a5;
}
/*Amber*/
.biz-amber .biz-panel,
.biz-amber .biz-bar {
    background-image: linear-gradient(225deg, #ee8022 0%, #f7c454 100%);
}
.biz-amber .biz-info-head {
    color: #ef8b22;
}
/*Brown*/
.biz-brown .biz-panel,
.biz-brown .biz-bar {
    background-image: linear-gradient(135deg, #c8b7a5 0%, #9c4f22 100%);
}
.biz-brown .biz-info-head {
    color: #a05a2c;
}
/*-----------Legacy Css End-------------*/

/*-----------Triveni Journey Css Start-------------*/
/*Banner without an image runs the rule across the full width*/
.inner-banner.no-banner-img {
    padding-bottom: 50px;
}
.sec-line.full-line {
    max-width: 100%;
}
.orange-title {
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
    color: #f58220 !important;
    padding-bottom: 15px;
}
.mt-40 {
    margin-top: 40px;
}

/*Business Incubated And Divested*/
.divest-sec {
    padding: 0px 0px 60px;
}
.divest-row {
    margin-top: 30px;
}
.divest-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-height: 480px;
    padding: 30px 25px;
    background-color: #f58220;
}
.divest-icon {
    display: block;
    width: 78px;
    height: auto;
}
.divest-title {
    font-size: 30px;
    line-height: 38px;
    font-weight: 300;
    color: #ffffff;
}
.divest-line {
    display: block;
    width: 100%;
    height: 1px;
    margin: 12px 0px 15px;
    background-color: rgba(255, 255, 255, 0.6);
}
.divest-entry {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: #ffffff !important;
    margin-bottom: 12px;
}
.divest-text {
    font-size: 16px;
    line-height: 24px;
    color: #ffffff !important;
}
.divest-text strong {
    font-weight: 500;
}
.divest-info {
    height: 100%;
    padding-left: 30px;
    border-left: 1px solid #d5d5d5;
}
.divest-info > p {
    margin-top: 8px;
}
.divest-stat {
    margin-top: 15px;
}
.divest-stat h5 {
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
    color: #000000;
    margin-bottom: 6px;
}
.divest-stat .rupee {
    font-size: 17px;
}
.divest-img {
    width: 100%;
    max-width: 1296px;
    aspect-ratio: 1296 / 580;
    margin: 50px auto 0px;
    overflow: hidden;
}

/*Cash Generation*/
.value-sec {
    padding: 0px 0px 40px;
}
.value-sec .orange-title {
    margin-top: 10px;
}
.cash-band {
    margin: 30px 0px 40px;
    padding: 45px 30px 6px;
    background-image: linear-gradient(to right, #f9c05a 0%, #f58220 100%);
}
.cash-value {
    font-size: 40px;
    line-height: 50px;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
}
.cash-value .rupee {
    font-size: 26px;
}
.cash-value .unit {
    font-size: 26px;
}
.cash-sub {
    font-size: 16px;
    line-height: 24px;
    color: #ffffff !important;
    text-align: center;
}
.cash-bars {
    margin-top: 40px;
}
.cash-bar {
    display: block;
    height: 12px;
    margin: 0px 15px;
    margin-bottom: -11px;
    background-image: linear-gradient(to right, #e6e6e6 0%, #4a5560 100%);
}
.value-item {
    padding-bottom: 25px;
    border-bottom: 1px solid #d5d5d5;
}
.value-num {
    font-size: 30px;
    line-height: 40px;
    font-weight: 600;
    color: #f58220;
}
.value-num .rupee,
.value-num .unit {
    font-size: 20px;
    font-weight: 300;
}
.value-per {
    font-size: 30px;
    line-height: 40px;
    font-weight: 500;
    color: #8a8a8a;
    margin-bottom: 10px;
}
.value-item p {
    font-size: 16px;
    line-height: 24px;
}
.value-note {
    font-size: 13px !important;
    line-height: 20px;
    color: #333333 !important;
    margin-top: 20px;
}
.value-note + .value-note {
    margin-top: 4px;
}

/*Value Created For Stakeholders*/
.stake-sec {
    padding: 0px 0px 40px;
}

.stake-num {
    font-size: 30px;
    line-height: 40px;
    font-weight: 500;
    color: #f58220;
    margin-bottom: 0px;
}
.stake-num .rupee,
.stake-num .unit {
    font-size: 20px;
}

/*Milestones*/
.milestone-sec {
    padding: 20px 0px 60px;
}
.milestone-sec p {
    margin-top: 20px;
}

/*Phases*/

.phase-title {
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    color: #f58220;
}
.phase-title-line {
    display: block;
    width: 100%;
    max-width: 420px;
    height: 2px;
    margin: 10px 0px 35px;
    background-image: linear-gradient(to right, #f58220 0%, #f9c05a 100%);
}
.phase-head {
    background-image: linear-gradient(to bottom, #fffdf7 0%, #fbf0d8 100%);
}
.phase-head-in {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 30px;
}
.phase-no {
    font-size: 30px;
    line-height: 38px;
    font-weight: 300;
    color: #000000;
}
.phase-year {
    padding: 7px 14px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    color: #000000;
    background-color: #f7e3bd;
    border-radius: 3px;
}
.phase-desc {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
}
.phase-bar {
    display: block;
    width: 100%;
    height: 10px;
    background-image: linear-gradient(to right, #f9c05a 0%, #f58220 100%);
}
.phase-box {
    margin-bottom: 50px;
}
.phase-body {
    padding-top: 30px;
}
.phase-img {
    width: 100%;
    max-width: 1296px;
    aspect-ratio: 1296 / 580;
    margin: 0px auto 50px;
    overflow: hidden;
}
.phase-sub {
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 15px;
}
.phase-list {
    list-style: none;
    margin: 0px;
    padding: 0px;
}
.phase-list li {
    position: relative;
    font-size: 16px;
    line-height: 24px;
    color: #000000;
    padding: 0px 0px 12px 24px;
}
.phase-list li:last-child {
    padding-bottom: 0px;
}
/*The chevron marker sits on the first line of the item*/
.phase-list li:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 0px;
    width: 13px;
    height: 13px;
    background: url("../images/triveni-journey/orange-arrow.svg") no-repeat center / contain;
}
.phase-yr {
    font-weight: 700;
    color: #5aa72b;
}
/*-----------Triveni Journey Css End-------------*/

/*-----------Business Environment Css Start-------------*/
.trend-sec {
    padding: 0px 0px 40px;
}
.trend-block {
    padding-bottom: 40px;
}
.trend-title {
    font-size: 20px;
    line-height: 28px;
    font-weight: 400;
    color: #000000;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.trend-text p + p {
    margin-top: 20px;
}
/*The rule runs from the heading to the right edge and drops away in a notch*/
.resp-head {
    display: flex;
    align-items: flex-start;
    margin-bottom: 18px;
}
.resp-title {
    flex: 0 0 auto;
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    color: #f58220;
}
/* The supplied notch (line-img2.svg) is 121x37 with its horizontal at the
   very bottom of the box, so the flexible rule is dropped to the same
   level - 36px - and the artwork keeps its own aspect. The small gap
   before it is deliberate: the drawing breaks there too. */
.resp-rule {
    flex: 1 1 auto;
    height: 1px;
    margin: 36px 0px 0px 15px;
    background-color: #93a2ab;
}
.resp-notch {
    flex: 0 0 auto;
    width: 121px;
    height: 37px;
    margin-left: 6px;
}
.resp-list {
    list-style: none;
    margin: 0px;
    padding: 0px;
}
.resp-list > li {
    position: relative;
    font-size: 16px;
    line-height: 24px;
    color: #000000;
    padding: 0px 0px 16px 30px;
}
.resp-list > li:last-child {
    padding-bottom: 0px;
}
/*Arrow artwork rather than a glyph. The business pages each swap in their own
  coloured arrow through their page theme, so they override this wholesale*/
.resp-list > li:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 0px;
    width: 14px;
    height: 14px;
    background: url("../images/environment/orange-arrow.svg") no-repeat center / contain;
}
.resp-list li strong {
    font-weight: 700;
}
.resp-list.bod-list > li:before{
     background: url("../images/environment/dark-grey-arrow.svg") no-repeat center / contain;
}
/*Two-tone rule closing each trend - grey under the trend, peach under the response*/
.trend-bar {
    display: flex;
    width: 100%;
    height: 10px;
    margin-top: 40px;
}
.trend-bar-grey {
    flex: 0 0 auto;
    width: 50%;
    background-color: #cccccc;
}
.trend-bar-peach {
    flex: 1 1 auto;
    background-color: #fbdfc0;
}
/*-----------Business Environment Css End-------------*/

/*-----------Strengths Css Start-------------*/
.banner-para {
    margin-top: 16px;
}
.mt-20 {
    margin-top: 20px;
}
.str-sec {
    padding: 0px 0px 40px;
}
/*Use the orange double-chevron artwork for the primary Strengths bullets*/
.str-sec .resp-list > li:before {
    content: "";
    top: 5px;
    width: 14px;
    height: 14px;
    background: url("../images/alcohol-business/orange-arrow.svg") no-repeat center / contain;
}
.str-block {
    padding-bottom: 45px;
}
/*Title at the top, mark tucked into the bottom right corner*/
.str-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-height: 287px;
    padding: 28px 25px;
}
.str-card-title {
    font-size: 24px;
    line-height: 32px;
    font-weight: 400;
    color: #ffffff;
    text-transform: uppercase;
}
/*White SVG mark, pushed to the bottom right of the panel*/
.str-icon {
    align-self: flex-end;
    margin-top: 30px;
    width: 100px;
    height: auto;
}
.str-grey {
    background-image: linear-gradient(160deg, #aab3ba 0%, #6f7a83 100%);
}
.str-orange {
    background-image: linear-gradient(200deg, #f7c454 0%, #ee7f22 100%);
}
.str-subhead {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: #f58220;
    margin: 25px 0px 12px;
}
.str-subhead:first-child {
    margin-top: 0px;
}
/*Second level inside a point - dashes, not chevrons*/
.sub-list {
    list-style: none;
    margin: 12px 0px 0px;
    padding: 0px;
}
.sub-list li {
    position: relative;
    font-size: 16px;
    line-height: 24px;
    color: #000000;
    padding: 0px 0px 12px 20px;
}
.sub-list li:last-child {
    padding-bottom: 0px;
}
/*Nested inside .resp-list, so the parent's arrow has to be cleared as well
  as the glyph replaced - equal specificity means it cascades per property*/
.sub-list li:before {
    content: "-";
    position: absolute;
    top: 0px;
    left: 0px;
    width: auto;
    height: auto;
    background: none;
    color: #000000;
}
/* .str-line {
    display: block;
    width: 100%;
    height: 1px;
    margin-top: 30px;
    background-color: #d5d5d5;
} */
.str-info {
    border-bottom: 1px solid #d5d5d5;
    min-height: 287px;
    padding-bottom: 20px;
}
.str-img picture {
    display: block;
    width: 100%;
    height: 100%;
}
.str-img {
    position: relative;
    width: 100%;
    max-width: 1296px;
    aspect-ratio: 1296 / 580;
    margin: 10px auto 0px;
    overflow: hidden;
}
/*Caption sits over the picture, tucked into the bottom right corner*/
/*Dark patch behind the caption so it holds up over any part of the photo*/
.str-img-cap {
    position: absolute;
    right: 3%;
    bottom: 10%;
    z-index: 2;
    padding: 26px 32px;
    background-color: rgba(0, 0, 0, 0.6);
}
.str-cap-title {
    font-size: 34px;
    line-height: 40px;
    color: #ffffff;
    text-transform: uppercase;
}
.str-cap-title strong {
    font-weight: 700;
}
.str-cap-title span {
    display: block;
    font-size: 62px;
    line-height: 66px;
    font-weight: 300;
    letter-spacing: 1px;
}
.str-cap-line {
    display: block;
    width: 100%;
    height: 1px;
    margin: 18px 0px 15px;
    background-color: #ffffff;
}
.str-cap-sub {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: #ffffff !important;
    text-transform: uppercase;
}
/*-----------Strengths Css End-------------*/

/*-----------Business Pages Css Start-------------*/
/* Every business page is built from these; only the colours change, and
   those are driven by the page class on the body (.sugar-page etc). */
.biz-line {
    display: block;
    width: 100%;
    max-width: 300px;
    height: 4px;
    margin: 12px 0px 25px;
}
/*The business name sits bold against the word Business light*/
.biz-banner-title {
    font-size: 36px;
    line-height: 46px;
    color: #000000;
}
.biz-banner-title strong {
    font-weight: 700;
}
.biz-banner-title span {
    font-weight: 300;
}
.biz-sub {
    font-size: 20px;
    line-height: 28px;
    font-weight: 400;
    color: #000000;
    text-transform: uppercase;
    margin-top: 20px;
}
/*The closing nav keeps the white band started by the section above it*/
.page-nav {
    background-color: #ffffff;
}

/*----Sugar : green----*/
.sugar-page {
    background-color: #e2e9e1;
}
.sugar-page .biz-line {
    background-image: linear-gradient(to right, #17703a 0%, #3ba757 100%);
}
.sugar-page .stats-band {
    background-image: linear-gradient(120deg, #0e6631 0%, #57a94e 55%, #0f5c2c 100%);
}
.sugar-page .core-line,
.sugar-page .core-cell.has-line {
    border-color: #7ba885;
}
.sugar-page .opp-subhead,
.sugar-page .core-label {
    color: #1a7d3e;
}
/*Green chevron artwork in place of the glyph*/
.sugar-page .resp-list > li:before {
    content: "";
    top: 5px;
    width: 14px;
    height: 14px;
    background: url("../images/green-arrow.svg") no-repeat center / contain;
}

/*----Water : blue----*/
.water-page {
    background-color: #e2f2fb;
}
.water-page .biz-line {
    background-image: linear-gradient(to right, #29a3dc 0%, #0057b8 100%);
}
.water-page .stats-band {
    background-image: linear-gradient(120deg, #0071ce 0%, #00a0e0 55%, #0064bd 100%);
}
.water-page .core-line,
.water-page .core-cell.has-line {
    border-color: #9ccfe8;
}
.water-page .opp-subhead,
.water-page .core-label {
    color: #22a7e0;
}
/*Chevron artwork in place of the glyph*/
.water-page .resp-list > li:before {
    content: "";
    top: 5px;
    width: 14px;
    height: 14px;
    background: url("../images/water-business/skyblue-arrow.svg") no-repeat center / contain;
}

/*----Power Transmission : steel blue----*/
.power-page {
    background-color: #e3e9ed;
}
.power-page .biz-line {
    background-image: linear-gradient(to right, #45596a 0%, #93a7b3 100%);
}
.power-page .stats-band {
    background-image: linear-gradient(120deg, #5c7383 0%, #93a7b3 55%, #5a707f 100%);
}
.power-page .core-line,
.power-page .core-cell.has-line {
    border-color: #a8b8c2;
}
.power-page .seg-title {
    color: #7b93a2;
}
/*The segment holds the colour here, so the points below it stay black*/
.power-page .opp-subhead,
.power-page .core-label {
    color: #000000;
}
/*Chevron artwork in place of the glyph*/
.power-page .resp-list > li:before {
    content: "";
    top: 5px;
    width: 14px;
    height: 14px;
    background: url("../images/power-transmission/grey-arrow.svg") no-repeat center / contain;
}

/*----Alcohol : orange----*/
.alcohol-page {
    background-color: #fcefe2;
}
.alcohol-page .biz-line {
    background-image: linear-gradient(to right, #e06a12 0%, #f9a03f 100%);
}
.alcohol-page .stats-band {
    background-image: linear-gradient(120deg, #d96a10 0%, #f9a83f 55%, #d3630e 100%);
}
.alcohol-page .core-line,
.alcohol-page .core-cell.has-line {
    border-color: #e5b183;
}
.alcohol-page .opp-subhead,
.alcohol-page .core-label {
    color: #f58220;
}
/*Chevron artwork in place of the glyph*/
.alcohol-page .resp-list > li:before {
    content: "";
    top: 5px;
    width: 14px;
    height: 14px;
    background: url("../images/alcohol-business/orange-arrow.svg") no-repeat center / contain;
}

/*Figures band - the panel from the report laid out across instead of down*/
.sugar-stats {
    padding: 0px 0px 40px;
}
.stats-band {
    padding: 40px 30px;
}
.sg-item {
    height: 100%;
    padding: 10px 25px;
}
/*Hairline between the figures, never before the first in a line*/
.sg-divide {
    border-left: 1px solid rgba(255, 255, 255, 0.35);
}
.sg-num {
    font-size: 30px;
    line-height: 40px;
    font-weight: 500;
    color: #ffffff;
}
.sg-num .sg-unit {
    font-size: 22px;
    font-weight: 400;
}
.sg-label {
    font-size: 16px;
    line-height: 24px;
    color: #ffffff !important;
    margin-top: 2px;
}
.sg-arrow {
    font-size: 15px;
}
.sg-note {
    margin-top: 15px;
}
.sg-list {
    list-style: none;
    margin: 18px 0px 0px;
    padding: 0px;
}
.sg-list li {
    position: relative;
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
    padding: 0px 0px 12px 26px;
}
.sg-list li:last-child {
    padding-bottom: 0px;
}
.sg-list li:before {
    content: "\00BB";
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    color: #ffffff;
}

/*Strategic Edge*/
.edge-sec {
    padding: 0px 0px 25px;
}
.edge-box .sec-heading-sm {
    margin-bottom: 10px;
}

/*Opportunity Landscape*/
.opp-sec {
    padding: 0px 0px 50px;
}
.opp-sec .sec-heading-sm {
    margin-bottom: 10px;
}
.opp-subhead {
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    margin-bottom: 15px;
}
/*Groups several sub-headings under one business segment*/
.seg-title {
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    margin-bottom: 18px;
}
/*Rule trails off the segment name to the right*/
.seg-title-rule {
    display: flex;
    align-items: center;
    gap: 15px;
}
.seg-title-rule:after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background-color: currentColor;
    opacity: 0.55;
}
.edge-note {
    font-size: 13px !important;
    line-height: 20px;
    color: #333333 !important;
    margin-top: 20px;
}
/*The groups sit in separate columns, so the gap goes on the second column*/
.opp-sec .col-lg-12 + .col-lg-12 .opp-group {
    margin-top: 30px;
}

/*How Triveni Is Strengthening The Core*/
/*White band running the full width, against the page's green wash*/
.core-sec {
    padding: 45px 0px 40px;
    background-color: #ffffff;
}
.core-sec .sec-heading-sm {
    margin-bottom: 15px;
}
.core-seg {
    padding-top: 20px;
}
.core-row {
    padding: 25px 0px;
}
.core-label {
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    padding-top: 20px;
}
/*Rule sits over the cells only, not across the label*/
.core-line {
    display: block;
    width: 100%;
    height: 1px;
    margin-bottom: 20px;
    border-top: 1px solid #cccccc;
}
/*Divides a second line of points under the same label*/
.core-line-mid {
    margin-top: 25px;
}
.core-cell {
    height: 100%;
    padding-right: 20px;
}
/*First cell lines up with the start of the rule above it*/
.core-cell.has-line {
    padding-left: 20px;
    border-left: 1px solid #cccccc;
}
/*-----------Sugar Business Css End-------------*/

/*-----------Page Navigation Css Start-------------*/
.page-nav {
    padding: 50px 0px;
}
.pn-box {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 10px 30px;
    overflow: hidden;
    border: 1px solid #f58220;
    border-radius: 50px;
    background-color: #f6f6f6;
    transition: 0.4s;
    -webkit-transition: 0.4s;
}
.pn-box:hover {
    background-color: #fdf1e6;
}
.pn-next {
    justify-content: flex-end;
}
.pn-arrow {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    border-radius: 50%;
    background-color: #f58220;
    color: #ffffff;
    font-size: 18px;
    transition: 0.4s;
    -webkit-transition: 0.4s;
}
.pn-prev .pn-arrow {
    margin-right: 20px;
}
.pn-next .pn-arrow {
    margin-left: 20px;
}
.pn-box:hover .pn-arrow {
    background-color: #000000;
}
.pn-prev:hover .pn-arrow {
    transform: translateX(-6px);
    -webkit-transform: translateX(-6px);
}
.pn-next:hover .pn-arrow {
    transform: translateX(6px);
    -webkit-transform: translateX(6px);
}
.pn-text strong {
    display: block;
    font-size: 16px;
    line-height: 25px;
    font-weight: 400;
    color: #000000;
    transition: 0.4s;
    -webkit-transition: 0.4s;
}
.pn-next .pn-text {
    text-align: right;
}
.pn-box:hover .pn-text strong {
    color: #f58220;
}
/*-----------Page Navigation Css End-------------*/


/*-----------Corporate Restructuring Css Start-------------*/
/*Banner intro paragraph, set heavier than body copy*/
.banner-lead {
    font-size: 18px;
    line-height: 28px;
    font-weight: 500;
}

/*Supplied artwork - the timeline and the post-demerger block carry all their
  own type and shapes, so they are placed as single images*/
.stage-img,
.platform-img {
    width: 100%;
}

.sec-label-light {
    font-weight: 400;
    text-transform: none;
}

/*The Composite Scheme Of Arrangement*/
.scheme-sec {
    padding: 0px 0px 30px;
}
/*The gutter is where the two connector lines sit*/
.scheme-row {
    --bs-gutter-x: 30px;
}
.scheme-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 30px;
    background-color: #eef1f3;
}
.scheme-card-text {
    font-size: 16px;
    line-height: 24px;
    color: #000000;
}
.scheme-card-mid {
    position: relative;
    align-items: center;
    text-align: center;
    background-image: linear-gradient(to right, #f9c05a 0%, #f58220 100%);
}
/*Held to a measure so the title breaks over three lines as in the artwork*/
.scheme-card-title {
    width: 100%;
    max-width: 240px;
    margin: 0px auto;
    font-size: 20px;
    line-height: 28px;
    font-weight: 400;
    color: #ffffff;
    text-transform: uppercase;
}
/*Each connector spans the full panel height in the gutter beside it. The width
  tracks the source 18.76x116.67 ratio, so the drawing fills the box instead of
  being letterboxed inside it; the elbow reaches back over the card edge, as in
  the artwork. Half the gutter (15px) plus half the line (23px) = 38px offset.*/
.scheme-line {
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 46px;
}
.scheme-line-left {
    left: -38px;
}
.scheme-line-right {
    right: -38px;
}
.scheme-line img {
    width: 100%;
    height: 100%;
}

/*Key Stages Of Restructuring*/
.stage-sec {
    padding: 0px 0px 30px;
}
/*The whole panel washes from a warm tint out to white*/
.stage-box {
    padding: 40px 30px;
    margin-top: 20px;
    background-image: linear-gradient(160deg, #fdefdd 0%, #fefaf5 45%, #ffffff 100%);
    background-image: linear-gradient(160deg, #ffffff 0%, #fefaf5 55%, #fdefdd 100%);
}
/*The track is one row of five stages that alternate above and below the rail.
  The two bands are sized separately - the stages above carry more copy than
  those below, so splitting the track 50/50 would leave dead space underneath */
.stage-track {
    --stage-top-h: 342px;
    --stage-btm-h: 270px;
    position: relative;
    display: flex;
    align-items: stretch;
}
/*Rail: five equal colour blocks with rounded ends, one per stage*/
.stage-line {
    position: absolute;
    top: var(--stage-top-h);
    left: 0px;
    display: flex;
    width: 100%;
    height: 28px;
    margin-top: -14px;
}
/*Basis 0 plus the pull-back below keeps the five capsules filling the width
  exactly while each overlaps the one before it*/
.stage-seg {
    flex: 1 1 0;
    border-radius: 14px;
}
.stage-seg + .stage-seg {
    margin-left: -14px;
}
.stage-seg-orange {
    background-image: linear-gradient(to right, #f0801d 0%, #fbc86a 100%);
}
.stage-seg-slate {
    background-image: linear-gradient(to right, #5b7183 0%, #b9c6cf 100%);
}
/*The dashed line runs the length of the rail, inside the rounded ends*/
.stage-line:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 16px;
    right: 16px;
    border-top: 2px dashed #ffffff;
    transform: translateY(-1px);
    -webkit-transform: translateY(-1px);
}
.stage-item {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    padding: 0px 12px;
}
.stage-half {
    display: flex;
    flex-direction: column;
    align-items: center;
}
/*Top halves stack downward to the rail, bottom halves away from it*/
/*The 14px is half the rail, so the ring stops exactly on the rail edge rather
  than on the rail's centreline*/
.stage-half-top {
    flex: 0 0 var(--stage-top-h);
    justify-content: flex-end;
    padding-bottom: 14px;
}
.stage-half-btm {
    flex: 0 0 var(--stage-btm-h);
    justify-content: flex-start;
    padding-top: 14px;
}
.stage-info {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.stage-half-top .stage-info {
    justify-content: flex-end;
}
.stage-text {
    font-size: 16px;
    line-height: 24px;
}
.stage-half-top .stage-text {
    margin-bottom: 18px;
}
.stage-half-btm .stage-text {
    margin-top: 18px;
}
.stage-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 185px;
    height: 185px;
    border-radius: 50%;
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    text-align: center;
}
.stage-circle-peach {
    background-image: linear-gradient(to bottom, #fbe0c2 0%, #fdf1e4 100%);
    color: #f0801d;
}
.stage-circle-grey {
    background-image: linear-gradient(to bottom, #e4e7e9 0%, #f3f4f5 100%);
    color: #77787b;
}
/*The dot rides the rail edge the ring touches, ringed in white so it reads
  clear of both the rail and the ring behind it*/
.stage-dot {
    position: absolute;
    left: 50%;
    width: 26px;
    height: 26px;
    margin-left: -13px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background-image: linear-gradient(135deg, #f9a03f 0%, #ea7b14 100%);
}
.stage-half-top .stage-dot {
    bottom: -13px;
}
.stage-half-btm .stage-dot {
    top: -13px;
}
.stage-dot-slate {
    background-image: linear-gradient(135deg, #90a4b4 0%, #4c6678 100%);
}


/*How The Scheme Creates Value*/
.scheme-value-sec {
    padding: 0px 0px 30px;
}
.value-row {
    --bs-gutter-y: 30px;
    padding-top: 10px;
}
/*The demerger group speaks to TPTL, which carries the grey theme, so its
  bullets and copy take the grey arrow and the corporate blue*/
.value-row-demerger .resp-list > li:before {
    background-image: url("../images/power-transmission/grey-arrow.svg");
}

.value-card-title {
    font-size: 19px;
    line-height: 27px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 12px;
}

/*The two washes meet behind the section title: the amalgamation band deepens
  to orange going down, the demerger band lifts out of grey going down, and the
  white title panel straddles the gap between them*/
.value-bands {
    position: relative;
    margin: 10px 0px;
}
.value-band {
    display: flex;
    justify-content: center;
    height: 125px;
}
.value-band-amal {
    align-items: flex-start;
    padding-top: 28px;
    background-image: linear-gradient(to bottom, #ffffff 0%, #fce8d5 52%, #f4a460 100%);
}
.value-band-dem {
    align-items: flex-end;
    padding-bottom: 20px;
    margin-top: 40px;
    background-image: linear-gradient(to bottom, #a3b0bb 0%, #d5dbdf 48%, #ffffff 100%);
}
.value-band-label {
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
}
.value-band-amal .value-band-label {
    color: #f58220;
}
.value-band-dem .value-band-label {
    color: #77787b;
}
/*Centred on the 40px gap, so it covers the saturated edge of both bands*/
.value-bands-title {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 600px;
    min-height: 130px;
    padding: 20px 30px;
    text-align: center;
    background-color: #ffffff;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
.value-bands-title h2 {
    font-size: 20px;
    line-height: 28px;
    font-weight: 400;
    color: #000000;
    text-transform: uppercase;
}


/*Post-Demerger*/
/*Last section on the page - the closing nav supplies the bottom spacing*/
.platform-sec {
    padding: 0px;
    margin-bottom: 0px;
}
.platform-card {
    height: 100%;
    padding: 30px;
    border-left: 3px solid #f58220;
    background-color: #f6f6f6;
}
.platform-card-right {
    border-left: none;
    border-right: 3px solid #f58220;
    text-align: right;
}
.platform-name {
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
    color: #f58220;
    margin-bottom: 12px;
}
.platform-biz {
    font-size: 16px;
    line-height: 24px;
    color: #000000;
}
.platform-stake {
    font-size: 16px;
    line-height: 24px;
    color: #000000;
    margin-top: 15px;
}
.platform-focus {
    font-size: 16px;
    line-height: 24px;
    color: #555555;
    margin-top: 15px;
}
/*The ring is centred against the full height of the two panels beside it*/
.platform-mid {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.platform-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 170px;
    height: 170px;
    padding: 15px;
    border-radius: 50%;
    text-align: center;
    background-image: linear-gradient(160deg, #f9c05a 0%, #f58220 100%);
}
.platform-circle strong {
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
}
.platform-circle em {
    font-size: 15px;
    line-height: 21px;
    font-weight: 500;
    font-style: normal;
    color: #ffffff;
    margin-top: 6px;
}
/*-----------Corporate Restructuring Css End-------------*/

/*-----------Chairman's Message Css Start-------------*/
/*The portrait is taller than the 748x480 landscape box the other inner
  banners use, so it gets its own frame. Fixed box plus cover keeps the banner
  height predictable whatever crop is dropped in later*/
.cm-banner-img {
    width: 100%;
    max-width: 520px;
    height: 480px;
    margin-left: auto;
    overflow: hidden;
}
.cm-banner-img picture {
    display: block;
    width: 100%;
    height: 100%;
}
.cm-banner-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/*Pull Quote*/
.cm-quote-sec {
    padding: 0px 0px 30px;
}
/*Sits plain on the page - the bubble mark and the closing rule carry it,
  no panel and no left rule*/
.cm-quote {
    position: relative;
}
.cm-quote-icon {
    width: 48px;
    height: 40px;
    margin-bottom: 5px;
    overflow: hidden;
}
/*Set in the corporate blue, uppercase, as in the print spread*/
.cm-quote-text {
    font-size: 18px;
    line-height: 30px;
    font-weight: 400;
    color: #003974;
    text-transform: uppercase;
}
/*Thin rule closing the quote, weighted into a grey pill at the right end*/
.cm-quote-line {
    display: block;
    position: relative;
    width: 100%;
    height: 1px;
    margin-top: 30px;
    background-color: #d5d0c4;
}
.cm-quote-line:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0px;
    width: 140px;
    height: 7px;
    border-radius: 4px;
    background-color: #93a3ad;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

/*Message Body*/
/*Last section on the page - the closing nav supplies the bottom spacing*/
.cm-body-sec {
    padding: 0px;
    margin-bottom: 0px;
}
.cm-head {
    font-size: 18px;
    line-height: 26px;
    font-weight: 500;
    color: #f58220;
    margin: 30px 0px 15px;
}
.cm-head:first-child {
    margin-top: 0px;
}
.cm-text {
    font-size: 16px;
    line-height: 26px;
    color: #000000;
    margin-bottom: 15px;
}
.cm-text:last-child {
    margin-bottom: 0px;
}

/*Sign Off*/
.cm-sign {
    margin-top: 35px;
}
.cm-sign-note {
    font-size: 16px;
    line-height: 24px;
    color: #000000;
    margin-bottom: 20px;
}
.cm-sign-name {
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
    color: #f58220;
}
.cm-sign-role {
    font-size: 16px;
    line-height: 24px;
    color: #000000;
    margin-top: 4px;
}
/*-----------Chairman's Message Css End-------------*/

/*-----------Q&A With Vice Chairman Css Start-------------*/
/*Attribution sits under the quote, above its closing rule*/
.qa-quote-by {
    margin-top: 15px;
}
.qa-quote-name {
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
    color: #f58220;
}
.qa-quote-role {
    font-size: 16px;
    line-height: 24px;
    color: #000000;
    margin-top: 4px;
}

/*Questions And Answers*/
/*Last section on the page - the closing nav supplies the bottom spacing*/
.qa-sec {
    padding: 0px;
    margin-bottom: 0px;
}
.qa-block {
    padding-bottom: 30px;
}
.qa-block:last-child {
    padding-bottom: 0px;
}
/*The combined Q&A mark sits in front of the question*/
.qa-ques {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
}
.qa-icon {
    flex: 0 0 auto;
    width: 40px;
    overflow: hidden;
}
/*min-width lets a long question wrap instead of stretching the flex row*/
.qa-ques-text {
    flex: 1 1 auto;
    min-width: 0px;
    font-size: 18px;
    line-height: 28px;
    font-weight: 500;
    color: #f58220;
}
/*The answer runs as plain body copy under the question*/
.qa-text {
    font-size: 16px;
    line-height: 26px;
    color: #000000;
    margin-bottom: 18px;
}
.qa-text:last-child {
    margin-bottom: 0px;
}
.qa-ul {
    margin-bottom: 18px;
}
/*Separates one exchange from the next in the single running column*/
.qa-line {
    display: block;
    width: 100%;
    height: 1px;
    margin-top: 30px;
    background-color: #e2e2e2;
}
/*-----------Q&A With Vice Chairman Css End-------------*/

/*-----------Board Of Directors Css Start-------------*/
/*Last section on the page - the closing nav supplies the bottom spacing*/
.bod-sec {
    padding: 0px;
    margin-bottom: 0px;
}
/*Each card is the button that opens that director's profile modal*/
.bod-card {
    display: block;
    width: 100%;
    padding: 0px;
    border: 0px;
    text-align: left;
    background-color: transparent;
    cursor: pointer;
    margin-bottom: 20px;
    box-shadow: 0px 4px 18px rgba(245, 130, 32, 0.16);
    transition: 0.4s;
    -webkit-transition: 0.4s;
}
.bod-card:hover {
    box-shadow: 0px 8px 26px rgba(245, 130, 32, 0.32);
}
.bod-card:focus-visible {
    outline: 2px solid #f58220;
    outline-offset: 6px;
}
/*The portrait sits above the name, filling the width of the card*/
.bod-top {
    display: block;
    min-height: 522px;
}
/*A square frame so all eight portraits present identically, whatever crop is
  supplied later*/
.bod-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.bod-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: 0.5s;
    -webkit-transition: 0.5s;
}
.bod-card:hover .bod-img img {
    transform: scale(1.04);
    -webkit-transform: scale(1.04);
}
.bod-meta {
    padding: 20px 25px 25px;
}
.bod-name {
    font-size: 18px;
    line-height: 26px;
    font-weight: 500;
    color: #f58220;
    transition: 0.3s;
    -webkit-transition: 0.3s;
}
.bod-card:hover .bod-name {
    color: #d96e12;
}
/*Two lines of room whether the role needs them or not, so the names and the
  committee marks line up across a row of cards*/
.bod-role {
    font-size: 16px;
    line-height: 24px;
    color: #000000;
    margin-top: 4px;
}
/*Committee marks: a thin rule runs the full width, a thicker rounded bar sits
  over its left portion, and the marks ride on top of that bar*/
.bod-tags {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 18px;
}
.bod-tags:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0px;
    right: 0px;
    height: 1px;
    margin-top: -1px;
    background-color: #93a2ab;
}
/*The bar stretches to the marks plus a short tail past the last one*/
.bod-tag-marks {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-right: 28px;
}
.bod-tag-marks:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0px;
    right: 0px;
    height: 10px;
    margin-top: -5px;
    border-radius: 5px;
    background-color: #b9c2c8;
}
.bod-tag {
    position: relative;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    line-height: 26px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    color: #ffffff;
    background-color: #f58220;
    border-radius: 50%;
}


/*Committee list inside a director modal - the letter badge stands in for
  the chevron used by the other lists*/
.bod-com-list {
    list-style: none;
    margin: 0px;
    padding: 0px;
}
.bod-com-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 16px;
    line-height: 26px;
    color: #000000;
    padding-bottom: 12px;
}
.bod-com-list li:last-child {
    padding-bottom: 0px;
}

/*Committee Legend*/
.bod-legend {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e2e2e2;
}
.bod-legend-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-bottom: 12px;
}
.bod-legend-text {
    font-size: 16px;
    line-height: 24px;
    color: #000000;
}

/*Profile Modal*/
/*The fixed site header sits at 9999, so the dialog and its backdrop have to
  clear it or the header paints over the open modal*/
.bod-modal {
    --bs-modal-zindex: 10055;
}
.modal-backdrop {
    --bs-backdrop-zindex: 10050;
}
.bod-modal .modal-content {
    position: relative;
    border: 0px;
    border-top: 4px solid #f58220;
    border-radius: 0px;
}
.bod-modal .modal-body {
    padding: 35px 40px 40px;
}
.bod-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 1;
}
.bod-modal-top {
    display: flex;
    align-items: flex-end;
    gap: 25px;
    padding-bottom: 25px;
    margin-bottom: 25px;
    border-bottom: 1px solid #e2e2e2;
}
.bod-modal-img {
    flex: 0 0 auto;
    width: 200px;
    height: 230px;
    overflow: hidden;
}
.bod-modal-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.bod-modal-meta {
    flex: 1 1 auto;
    min-width: 0px;
}
.bod-modal .bod-name {
    font-size: 22px;
    line-height: 30px;
}
/*The name carries the size here, so the role needs no reserved second line*/
.bod-modal .bod-role {
    min-height: 0px;
}
.bod-sub {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: #f58220;
    margin: 20px 0px 12px;
}
.bod-sub:first-child {
    margin-top: 0px;
}
/*Tighter than the chevron list used on the wider sections*/
.bod-list li {
    font-size: 16px;
    line-height: 24px;
    padding: 0px 0px 10px 24px;
}
/*-----------Board Of Directors Css End-------------*/

/*-----------Key Performance Indicators Css Start-------------*/
/*The banner box is shared with the business pages; this lets a plain
  img-fluid tag fill it the way .img-ph does there*/
.inner-banner-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.kpi-sec {
    padding: 0px 0px 30px;
}
/*Last section on the page - the closing nav supplies the bottom spacing*/
.kpi-sec-last {
    padding-bottom: 0px;
    margin-bottom: 0px;
}
.kpi-group-title {
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
    color: #f58220;
    margin-bottom: 5px;
    padding-bottom: 15px;
}
.kpi-row {
    --bs-gutter-y: 35px;
}
/*Each chart sits in its own panel - the page is white, so a hairline holds
  the edge and the shadow lifts it off*/
.kpi-card {
    height: 100%;
    padding: 26px 28px 24px;
    border: 1px solid #ececec;
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 0px 6px 22px rgba(0, 0, 0, 0.07);
}
/*The charts carry their own heading, rule and legend, and their artwork is not
  all the same shape. The graph box is held to the tallest chart in its row, so
  every commentary in that row starts on the same line; a shorter chart keeps
  its own size and simply leaves space beneath it.*/
.kpi-row-growth {
    --kpi-graph-ratio: 500 / 284;
}
.kpi-row-resilience {
    --kpi-graph-ratio: 500 / 246;
}
.kpi-row-momentum {
    --kpi-graph-ratio: 500 / 335;
}
.kpi-graph {
    margin: 0px 0px 18px;
    aspect-ratio: var(--kpi-graph-ratio);
}
.kpi-graph img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left top;
}
.kpi-note {
    font-size: 16px;
    line-height: 24px;
    color: #000000;
}
.kpi-note + .kpi-note {
    margin-top: 10px;
}
.kpi-note strong {
    font-weight: 700;
}
.kpi-page .kpi-note strong {
    color: inherit;
}
.kpi-page .kpi-graph {
    border-radius: 0px;
    max-width: 94%;
}
/*-----------Key Performance Indicators Css End-------------*/

.kpi-head .kpi-title
{
font-size: 35px;
    font-weight: 500;
    line-height: 42px;
    color: #ffffff;
}
.kpi-info .kpi-unit
{
color: #ffffff;
font-size: 14px;
}
.kpi-info .kpi-note
{
    color: #ffffff;
}
.kpi-item .kpi-graph
{
    padding: 30px;
}

/*-----------BRSR Css Start-------------*/
.brsr-title {
    font-size: 36px;
    line-height: 46px;
    font-weight: 700;
    color: #f58220;
}
/*The section badge is artwork, so it is held to a sensible measure rather
  than stretched across the container*/
.brsr-section-img {
    width: 100%;
    max-width: 560px;
    margin-top: 25px;
}
/*Last section on the page - the closing nav supplies the bottom spacing*/
.brsr-sec {
    padding: 0px;
    margin-bottom: 0px;
}
.brsr-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}
.brsr-head-title {
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    color: #000000;
}
.brsr-numeral {
    padding-right: 12px;
}
.brsr-head-icon {
    flex: 0 0 auto;
    width: 30px;
    overflow: hidden;
}

/*Details Table*/
/*Long labels still need a readable measure, so the table scrolls rather than
  crushing its columns on a narrow screen*/
.brsr-table-wrap {
    width: 100%;
    overflow-x: auto;
}
.brsr-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    border-top: 2px solid #f58220;
}
.brsr-table td {
    padding: 12px 15px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 300;
    color: #000000;
    vertical-align: top;
    border-bottom: 1px solid #f6c79b;
}

.brsr-sn {
    width: 44px;
    text-align: center;
}
.brsr-label {
    width: 45%;
}
.brsr-value {
    width: 45%;
}
.brsr-value a {
    color: #000000;
    text-decoration: underline !important;
    word-break: break-word;
    transition: 0.3s;
    -webkit-transition: 0.3s;
}
.brsr-value a:hover {
    color: #f58220;
}
/*-----------BRSR Css End-------------*/

/*-----------Download Centre Css Start-------------*/
.dl-title {
    font-size: 40px;
    line-height: 50px;
    font-weight: 700;
    color: #f58220;
    text-transform: uppercase;
}
/*Last section on the page - the closing nav supplies the bottom spacing*/
.dl-sec {
    padding: 0px;
    margin-bottom: 0px;
}
.dl-row {
    --bs-gutter-y: 35px;
}
.dl-group-title {
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    color: #f58220;
    margin-bottom: 18px;
}
.dl-arrow {
    padding-left: 4px;
}
.dl-list {
    list-style: none;
    margin: 0px;
    padding: 0px;
}
.dl-list li {
    padding-bottom: 14px;
}
/*Corporate Overview runs two to a line, flowing down the first column then
  the second, as the contents page does*/
.dl-list-two {
    column-count: 2;
    column-gap: 40px;
}
.dl-list-two li {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}
/*inline-flex, so only the box and its wording are hoverable and clickable -
  a block label would stretch the hit area across the empty rest of the row*/
.dl-item {
    display: inline-flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}
/*Drawn rather than left to the browser, so the tick is white on orange
  everywhere instead of following each engine's own accent styling*/
.dl-check {
    position: relative;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 3px 0px 0px;
    padding: 0px;
    border: 1px solid #9aa5ad;
    border-radius: 2px;
    background-color: #ffffff;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    transition: 0.2s;
    -webkit-transition: 0.2s;
}
.dl-check:hover {
    border-color: #f58220;
}
.dl-check:checked {
    border-color: #f58220;
    background-color: #f58220;
}
.dl-check:checked:before {
    content: "";
    position: absolute;
    top: 2px;
    left: 6px;
    width: 4px;
    height: 9px;
    border: solid #ffffff;
    border-width: 0px 2px 2px 0px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
.dl-check:focus-visible {
    outline: 2px solid #003974;
    outline-offset: 2px;
}
.dl-item-text {
    font-size: 16px;
    line-height: 24px;
    font-weight: 300;
    color: #000000;
    transition: 0.3s;
    -webkit-transition: 0.3s;
}
.dl-item:hover .dl-item-text {
    color: #f58220;
}


/*Full Report And Action*/
/*Stacked: the full-report tick, then the button, then the status line.
  flex-start keeps each one shrink-to-fit so the label hit area stays scoped*/
.dl-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 20px;
}
.dl-item-full .dl-item-text {
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    color: #f58220;
}
.dl-submit {
    display: inline-block;
    margin-top: 22px;
    padding: 14px 34px;
    border: 0px;
    border-radius: 50px;
    font-size: 16px;
    line-height: 20px;
    color: #ffffff;
    background-color: #f58220;
    cursor: pointer;
    transition: 0.3s;
    -webkit-transition: 0.3s;
}
.dl-submit:hover {
    background-color: #d96e12;
}
.dl-submit:focus-visible {
    outline: 2px solid #003974;
    outline-offset: 3px;
}
.dl-msg {
    font-size: 15px;
    line-height: 22px;
    color: #5aa72b;
    min-height: 22px;
    margin-top: 12px;
}
.dl-msg.is-warn {
    color: #c0392b;
}
/*-----------Download Centre Css End-------------*/

/*-----------ESG Css Start-------------*/
/*Priorities*/
.esg-pillar-sec {
    padding: 0px 0px 30px;
}
.esg-pillar-row {
    --bs-gutter-y: 35px;
}
/*A column, so the copy can absorb the slack and drop every SDG bracket in the
  row onto the same line no matter how long the wording above it runs*/
.esg-pillar {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.esg-pillar-num {
    display: block;
    font-size: 60px;
    line-height: 66px;
    font-weight: 300;
    color: #ef8f30;
}
.esg-pillar-text {
    flex: 1 1 auto;
    font-size: 16px;
    line-height: 24px;
    color: #000000;
    margin: 8px 0px 20px;
}
/*The marks sit inside a bracket - a rule across the top and down the left*/
.esg-sdg {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 0px 22px 18px;
    border-top: 1px solid #c3c8cc;
    border-left: 1px solid #c3c8cc;
}
.esg-sdg-label {
    flex: 0 0 auto;
    font-size: 20px;
    line-height: 28px;
    color: #333333;
    font-weight: 500;
}
.esg-sdg-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.esg-sdg-list img {
    width: 46px;
    height: 46px;
}

/*Section Head*/
.esg-sec {
    padding: 0px 0px 30px;
}
/*Last section on the page - the closing nav supplies the bottom spacing*/
.esg-sec-last {
    padding-bottom: 0px;
    margin-bottom: 0px;
}
.esg-head-row {
    margin-bottom: 35px;
}
/*A coloured rule sits over the section name, as in the report*/
.esg-bar {
    display: block;
    width: 100%;
    max-width: 230px;
    height: 6px;
    margin-bottom: 10px;
}
.esg-env .esg-bar {
    background-color: #5aa72b;
}
.esg-social .esg-bar {
    background-color: #f58220;
}
.esg-gov .esg-bar {
    background-color: #5b7183;
}
.esg-head-title {
    font-size: 36px;
    line-height: 40px;
    font-weight: 700;
    color: #000000;
}
.esg-head-sub {
    font-size: 18px;
    line-height: 26px;
    color: #000000;
    text-transform: uppercase;
    margin-top: 12px;
}
.esg-head-img {
    width: 100%;
    overflow: hidden;
}
.esg-head-img img {
    display: block;
    width: 100%;
}

/*Body*/
.esg-sub {
    font-size: 20px;
    line-height: 28px;
    font-weight: 400;
    color: #000000;
    text-transform: uppercase;
    margin: 30px 0px 15px;
}
.esg-body > .esg-sub:first-child {
    margin-top: 0px;
}
.esg-text {
    font-size: 16px;
    line-height: 24px;
    color: #000000;
    margin-bottom: 16px;
}
.esg-text:last-child {
    margin-bottom: 0px;
}
.esg-list {
    margin-bottom: 16px;
}
.esg-block-title {
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    color: #f58220;
    margin: 26px 0px 16px;
}

/*Circular Value Chain Table*/
.esg-table-wrap {
    width: 100%;
    overflow-x: auto;
}
.esg-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
}
/*Every cell is its own wash, fading left to right and separated by white
  gutters. The head is green; body rows alternate warm and cool.*/
.esg-table th,
.esg-table td {
    padding: 14px 20px;
    font-size: 16px;
    line-height: 24px;
    vertical-align: top;
    border: 3px solid #ffffff;
}
.esg-table th {
    font-weight: 700;
    color: #1f3348;
    text-align: left;
}
.esg-table th:first-child {
    background-image: linear-gradient(to right, #c6e0cd 0%, #dcebe0 100%);
}
.esg-table th:last-child {
    background-image: linear-gradient(to right, #dcebe0 0%, #f7fbf8 100%);
}
.esg-table td {
    font-weight: 300;
    color: #000;
}
/*Warm rows*/
.esg-table tbody tr:nth-child(odd) td:first-child {
    background-image: linear-gradient(to right, #fae2c9 0%, #fdefe1 100%);
}
.esg-table tbody tr:nth-child(odd) td:last-child {
    background-image: linear-gradient(to right, #fdf0e4 0%, #ffffff 100%);
}
/*Cool rows*/
.esg-table tbody tr:nth-child(even) td:first-child {
    background-image: linear-gradient(to right, #dfe8e2 0%, #eef3f0 100%);
}
.esg-table tbody tr:nth-child(even) td:last-child {
    background-image: linear-gradient(to right, #e9eef2 0%, #ffffff 100%);
}
.esg-table td.esg-td-key {
    width: 34%;
    font-weight: 700;
    color: #122c40;
}
.esg-table .esg-td-note {
    display: block;
    font-weight: 300;
    color: #000;
}

.esg-card {
    margin-top: 20px;
}
.esg-card-title {
    font-size: 17px;
    line-height: 25px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 10px;
}
/*The community-development headings are set in orange, unlike the farm ones*/
.esg-social .esg-card-title {
    color: #f58220;
}


.esg-src {
    display: flex;
    flex-direction: column;
}
.esg-src-head {
    padding: 18px 20px;
}
.esg-src-name {
    font-size: 22px;
    line-height: 28px;
    font-weight: 400;
    color: #ffffff;
}
.esg-src-name span {
    display: block;
    font-size: 18px;
    line-height: 24px;
}
.esg-src-list {
    flex: 1 1 auto;
    padding: 20px 20px 0px;
    margin-bottom: 20px;
}
/*The lists grow to fill the column, so a floor under the outcome is what
  actually lines the four Outcome headings up with one another - without it the
  shortest outcome lets its list grow and the heading drops. Sized to the
  tallest outcome at each width.*/
.esg-src-outcome {
    min-height: 120px;
    padding: 0px 20px;
}
.esg-src-outcome-title {
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
}
.esg-src-outcome-line {
    display: block;
    width: 100%;
    height: 5px;
    margin: 5px 0px 10px;
}
/*Each column's bullets take that business's own arrow*/
.esg-src-sugar .resp-list > li:before {
    background-image: url("../images/environment/green-arrow.svg");
}
.esg-src-alcohol .resp-list > li:before {
    background-image: url("../images/environment/orange-arrow.svg");
}
.esg-src-power .resp-list > li:before {
    background-image: url("../images/environment/dark-grey-arrow.svg");
}
.esg-src-water .resp-list > li:before {
    background-image: url("../images/environment/skyblue-arrow.svg");
}
/*The separators take the exact colour of that column's arrow artwork*/
.esg-src-sep {
    padding: 0px 2px;
}
.esg-src-sugar .esg-src-sep {
    color: #189647;
}
.esg-src-alcohol .esg-src-sep {
    color: #f58220;
}
.esg-src-power .esg-src-sep {
    color: #4d4e4f;
}
.esg-src-water .esg-src-sep {
    color: #2caae2;
}
/*Each business keeps the colour it carries on its own page*/
.esg-src-sugar-bg {
    background-image: linear-gradient(to right, #17703a 0%, #3ba757 100%);
}
.esg-src-alcohol-bg {
    background-image: linear-gradient(to right, #d96a10 0%, #f9a83f 100%);
}
.esg-src-power-bg {
    background-image: linear-gradient(to right, #5c7383 0%, #93a7b3 100%);
}
.esg-src-water-bg {
    background-image: linear-gradient(to right, #0057b8 0%, #00a3e0 100%);
}
.esg-src-sugar-txt {
    color: #1a7d3e;
}
.esg-src-alcohol-txt {
    color: #d96a10;
}
.esg-src-power-txt {
    color: #5c7383;
}
.esg-src-water-txt {
    color: #00AEEF;
}
ul.resp-list.esg-list.esg-src-list {
    min-height: 420px;
}
/*-----------ESG Css End-------------*/

/*-----------Management Discussion And Analysis Css Start-------------*/
/*Last section on the page - the closing nav supplies the bottom spacing*/
.mda-sec {
    padding: 0px;
    margin-bottom: 0px;
}
.mda-title {
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    color: #f58220;
    margin-bottom: 20px;
    margin-top: 20px;
}
.mda-sub {
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    color: #000000;
    margin: 20px 0px 14px;
}
.mda-sub-orange {
    color: #f58220;
}
.mda-title + .mda-sub {
    margin-top: 0px;
}
/*The opening highlight is set in orange, as in the report*/
.mda-lead {
    font-size: 16px;
    line-height: 26px;
    color: #f58220;
    margin-bottom: 16px;
}
.mda-text {
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 16px;
}
.mda-note {
    font-size: 14px;
    line-height: 22px;
    margin-top: 12px;
}
.mda-img {
    width: 100%;
    margin: 10px 0px 25px;
    overflow: hidden;
}
.mda-img img {
    display: block;
    width: 100%;
}

/*Bulleted Lists*/
.mda-list {
    list-style: none;
    margin: 0px 0px 16px;
    padding: 0px;
}
.mda-list li {
    position: relative;
    font-size: 16px;
    line-height: 26px;
    padding: 0px 0px 12px 20px;
}
.mda-list li:last-child {
    padding-bottom: 0px;
}
.mda-list li:before {
    content: "";
    position: absolute;
    top: 10px;
    left: 2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #000;
}
.mda-list li strong {
    font-weight: 700;
}
.mda-sub-list {
    list-style: none;
    margin: 12px 0px 0px;
    padding: 0px;
}
.mda-list .mda-sub-list li {
    padding: 0px 0px 12px 22px;
}
.mda-list .mda-sub-list li:last-child {
    padding-bottom: 0px;
}
.mda-list .mda-sub-list li:before {
    content: "-";
    top: 0px;
    left: 0px;
    width: auto;
    height: auto;
    border-radius: 0px;
    background-color: transparent;
}

/*Tables*/
.mda-table-wrap {
    width: 100%;
    overflow-x: auto;
}
.mda-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}
.mda-table th,
.mda-table td {
    padding: 10px 12px;
    font-size: 15px;
    line-height: 22px;
    color: #000000;
    text-align: right;
    vertical-align: middle;
}
.mda-table th {
    font-weight: 700;
    border-bottom: 2px solid #f58220;
}
.mda-table td {
    font-weight: 300;
    border-bottom: 1px solid #e2e2e2;
}
/*The row label reads left, the figures right. Scoped to the table, or the
  .mda-table th/td rule above outranks it and everything sits right.*/
.mda-table .mda-th-name,
.mda-table .mda-td-name {
    text-align: left;
}
.mda-table tbody tr:last-child td {
    border-bottom: 2px solid #f58220;
}
/*A grouped head sits over its pair of columns*/
.mda-table .mda-th-group {
    text-align: center;
    border-bottom: 2px solid #f58220;
}
.mda-tr-group th {
    border-top: 2px solid #f58220;
    border-bottom: 2px solid #f58220;
}
/*----Unit table : laid out to match the report----
  The group labels sit against their own figures - the first one carries the
  unit column with it and reads from the left, the other two read from the
  right, over the pair they belong to. */
.mda-table.mda-table-unit .mda-th-group {
    text-align: right;
}
.mda-table.mda-table-unit .mda-th-group-first {
    text-align: left;
}
/*The report sets these rows tighter than the other tables*/
.mda-table-unit th,
.mda-table-unit td {
    padding: 6px 12px;
}
.mda-tr-total td {
    font-weight: 700;
}
/*The current season is picked out in orange, its column tinted below*/
.mda-table .mda-hl-head {
    color: #ffffff;
    background-color: #f58220;
    border-bottom: 2px solid #f58220;
}
.mda-hl {
    background-color: #fdeee1;
    border-left: 1px solid #f58220;
    border-right: 1px solid #f58220;
}
.mda-hl-last {
    border-bottom: 1px solid #f58220;
}
/*The tint is a closed box in the report - it is lifted off the head by a
  white band and ruled across the top of the first figures*/
.mda-hl-first {
    border-top: 1px solid #f58220;
}
.mda-tr-gap td {
    height: 10px;
    padding: 0px;
    background-color: #ffffff;
    border-bottom: 0px;
}
/*----Historical table : laid out to match the report----
  Fixed layout keeps the nine season columns even and lets the Particulars
  column wrap, instead of the widest figure setting every width. */
.mda-table-hist {
    table-layout: fixed;
    /*Ten columns - below this the figures have no room and, having no break
      opportunity, would spill their cells rather than wrap. The wrapper
      scrolls instead.*/
    min-width: 1000px;
}
.mda-table-hist th:first-child,
.mda-table-hist td:first-child {
    width: 18%;
}
/*Rule over the head, as in the report*/
.mda-table-hist thead th {
    border-top: 2px solid #f58220;
}
/*The report sets these rows tighter than the default*/
.mda-table-hist th,
.mda-table-hist td {
    padding: 6px 12px;
}

/*----Zone table : laid out to match the report----
  Fixed layout so the wide State column cannot squeeze the figure columns,
  which is what pushed the head out of shape. */
.mda-table-zone {
    table-layout: fixed;
}
.mda-col-zone {
    width: 10%;
}
.mda-col-state {
    width: 30%;
}
.mda-col-fig {
    width: 20%;
}
/*Zone and the State column carry the full height of the head, so they sit
  centred against it rather than dropping to the baseline*/
.mda-table-zone thead tr:first-child th[rowspan] {
    vertical-align: middle;
        border-top: 2px solid #f58220;
}
.mda-table-zone thead tr + tr th {
    vertical-align: bottom;
}
/*The rule over the head runs from the State column to the right edge -
  never over Zone*/
.mda-table-zone thead tr:first-child th:not(.mda-th-name) {
    border-top: 2px solid #f58220;
    padding-top: 12px;
}
.mda-table-zone td:nth-child(2),
.mda-table-zone th:nth-child(2) {
    text-align: right;
}

/*Stat Callout*/
.mda-stat {
    margin: 28px 0px;
}
h4.mda-sub.mda-sub-orange.mto.wow.fadeInUp {
    margin-top: 0;
}
.mda-stat-num {
    font-size: 40px;
    line-height: 48px;
    font-weight: 700;
    color: #f58220;
}
.mda-stat-num sup {
    font-size: 22px;
    top: -0.55em;
}
.mda-stat-num span {
    font-size: 26px;
    line-height: 34px;
    font-weight: 600;
}
.mda-stat-text {
    font-size: 16px;
    line-height: 24px;
    margin-top: 4px;
}

/*AI Initiatives*/
.mda-ai {
    margin-top: 18px;
}
.mda-ai-head {
    display: flex;
    align-items: flex-end;
    gap: 40px;
    margin-bottom: 12px;
}
.mda-ai-head-name {
    flex: 0 0 220px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: #f58220;
}
.mda-ai-head-desc {
    flex: 1 1 auto;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: #5aa72b;
}
.mda-ai-row {
    display: flex;
    align-items: stretch;
    gap: 0px;
    margin-bottom: 20px;
}
/*The name sits in a blue panel ruled in orange*/
.mda-ai-name {
    flex: 0 0 220px;
    display: flex;
    align-items: center;
    padding: 20px;
    border: 1px solid #f58220;
    background-color: #dbeaf7;
}
.mda-ai-name h4 {
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: #000000;
}
/*An orange connector runs from the panel across to the description*/
.mda-ai-arrow {
    position: relative;
    flex: 0 0 40px;
    align-self: center;
    height: 1px;
    background-color: #f58220;
}
.mda-ai-arrow:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0px;
    width: 0px;
    height: 0px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid #f58220;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
.mda-ai-desc {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    padding: 20px 25px;
    border: 1px solid #5aa72b;
}
.mda-ai-desc p {
    font-size: 16px;
    line-height: 26px;
}
/*Document Downloads*/
/*Two equal buttons: the first solid, the second outlined*/
.mda-dl {
    display: flex;
    gap: 24px;
    margin-bottom: 30px;
    margin-top: 30px;
}
.mda-dl-grid {
    flex-wrap: wrap;
}
.mda-dl-btn {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0px;
    padding: 16px 24px;
    border: 1px solid #dddddd;
    border-radius: 6px;
    background-color: #ffffff;
    transition: 0.3s;
    -webkit-transition: 0.3s;
}
/*Hovering the outlined button takes it to the solid, active-looking state*/
.mda-dl-btn:hover {
    border-color: #f58220;
    background-color: #f58220;
}
.mda-dl-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 36px;
    position: relative;
    overflow: hidden;
}
.mda-dl-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: 0.3s;
    -webkit-transition: 0.3s;
}
.mda-dl-grid .mda-dl-btn {
    flex: 0 0 calc(50% - 12px);
}
.mda-dl-text {
    font-size: 16px;
    line-height: 26px;
    font-weight: 600;
    color: #3c3c3c;
    transition: 0.3s;
    -webkit-transition: 0.3s;
}
.mda-dl-btn:hover .mda-dl-text {
    color: #ffffff;
}
/*The orange mark would vanish on the orange fill, so the white one takes over*/
.mda-dl-icon-on {
    opacity: 0;
    position: absolute;
    inset: 0;
}
.mda-dl-btn:hover .mda-dl-icon-off {
    opacity: 0;
}
.mda-dl-btn:hover .mda-dl-icon-on {
    opacity: 1;
}
/*Single call to action at the foot of the BRSR page - the shared button
  stretches by default, so it is sized to its own content here*/
.brsr-dl-sec {
    padding: 10px 0px 50px;
}
.brsr-dl {
    display: flex;
    justify-content: center;
}
.mda-dl-btn-auto {
    flex: 0 0 auto;
}

.mda-dl-btn-solid {
    border-color: #f58220;
    background-color: #f58220;
}
.mda-dl-btn-solid:hover {
    background-color: #f58220;
    border-color: #f58220;
}
.mda-dl-btn-solid .mda-dl-text,
.mda-dl-btn-solid:hover .mda-dl-text {
    color: #ffffff;
}

/*-----------Management Discussion And Analysis Css End-------------*/
.platform-img{
    padding-top: 20px;
}

.cap-text-2 h2 span 
{
    display: block;
}
/*-----------Introduction to the Theme Page Css Start-------------*/
/* Page-scoped: the index carries the same copy, but that section is pinned and
   its classes are tied to the scroll beats. These are plain blocks. */
.tp-sec {
    padding: 0px 0px 40px;
}
/*Last section on the page - the closing nav supplies the bottom spacing*/
.tp-sec-last {
    padding-bottom: 0px;
    margin-bottom: 0px;
}

/*The five priorities, divided by rules rather than boxed in. The columns take
  their width from the text, so a short entry does not leave a long run of
  nothing before its rule.*/
.tp-pillars {
    display: grid;
    grid-template-columns: repeat(5, fit-content(240px));
    justify-content: start;
    column-gap: 40px;
    row-gap: 24px;
    margin: 0px;
    padding: 0px;
    list-style: none;
}
.tp-pillars li {
    padding-left: 24px;
    border-left: 1px solid #f58220;
}
/*The first of the row carries no rule, so none hangs off the left edge*/
.tp-pillars li:first-child {
    padding-left: 0px;
    border-left: 0px;
}
.tp-pillars strong {
    display: block;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    color: #000000;
}
.tp-pillars span {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    line-height: 20px;
    color: #000000;
}

/*The two context blocks*/
.tp-eyebrow {
    margin-bottom: 15px;
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #f58220;
        padding-top: 20px;
}
.tp-block p + p {
    margin-top: 20px;
}
.tp-context .col-12 + .col-12 .tp-block {
    margin-top: 34px;
}
.tp-context .tp-block p {
    max-width: 980px;
}

/*Strengthening the Core*/
.tp-title {
    margin-bottom: 14px;
    font-size: 35px;
    font-weight: 500;
    line-height: 42px;
    color: #000000;
}
.tp-copy {
    margin-bottom: 0px;
}
.tp-lead {
    margin-top: 26px;
}
.tp-platforms {
    display: flex;
    flex-wrap: wrap;
    max-width: 700px;
    margin: 18px 0px 0px;
    padding: 0px;
    list-style: none;
}
.tp-platforms li {
    flex: 1 1 0;
    min-width: 240px;
    padding: 0px 24px;
    border-left: 1px solid #f58220;
    font-size: 16px;
    line-height: 24px;
    color: #000000;
}
.tp-platforms li:first-child {
    padding-left: 0px;
    border-left: 0px;
}
/*The outsized question mark, with its answer set beside it*/
.tp-why {
    display: flex;
    align-items: center;
    gap: 26px;
    margin-top: 40px;
}
.tp-why-mark {
    flex: none;
    font-size: 86px;
    font-weight: 300;
    line-height: 1;
    color: #000000;
}
.tp-why-copy {
    max-width: 330px;
}
/*-----------Introduction to the Theme Page Css End-------------*/

.brsr-dl.left{
    justify-content: start;
    margin-top: 15px;
}


/*-----------In-page Anchor Offset Css Start-------------*/
/* The header is fixed over the page, so a link that lands on a section would
   otherwise put its heading underneath it. Scroll-margin holds the landing
   short by the header's height plus a little air. */
.mda-sec[id] {
    scroll-margin-top: calc(var(--header-h) + 20px);
}
/*-----------In-page Anchor Offset Css End-------------*/

/*-----------Modal Layer Css Start-------------*/
/* The site header is fixed at z-index 9999 and the menu panel at 9998, while
   the framework puts modals at 1055 and the backdrop at 1050 - so the header
   was painting over the top of any open modal and swallowing the clicks meant
   for its title bar and close button. Both layers are lifted clear of it. */
.modal {
    --bs-modal-zindex: 10050;
}
.modal-backdrop {
    --bs-backdrop-zindex: 10040;
}
/*-----------Modal Layer Css End-------------*/

/*-----------PDF Modal Css Start-------------*/
.pdf-modal .modal-dialog {
    max-width: 1100px;
    width: calc(100% - 24px);
    margin: 12px auto;
}
.pdf-modal .modal-content {
    border: 0px;
    border-radius: 8px;
    overflow: hidden;
}
.pdf-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 20px;
    border-bottom: 1px solid #ececec;
}
.pdf-modal-title {
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: #000000;
    margin: 0px;
}
.pdf-modal-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}
.pdf-modal .modal-body {
    padding: 0px;
}
/*Sized off the viewport rather than a flat 80vh: with the head on top, a
  vh-only height made the dialog taller than the screen and pushed the head
  (and its close button) above the fold*/
.pdf-modal-frame {
    display: block;
    width: 100%;
    height: calc(100vh - 92px);
    min-height: 320px;
    border: 0px;
    background-color: #f4f4f4;
}
/*Cross - drawn rather than relying on the framework's background image*/
.pdf-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0px;
    border: 0px;
    border-radius: 50%;
    background-color: #f2f2f2;
    transition: 0.3s;
    -webkit-transition: 0.3s;
}
.pdf-modal-close svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: #333333;
    stroke-width: 2;
    stroke-linecap: round;
    transition: 0.3s;
    -webkit-transition: 0.3s;
}
.pdf-modal-close:hover {
    background-color: #f58220;
}
.pdf-modal-close:hover svg {
    stroke: #ffffff;
}
/*-----------PDF Modal Css End-------------*/

/*-----------Theme Banner Css Start-------------*/
/*Two halves of one heading: the promise in navy, the year's posture in
  orange, split by a rule*/
.theme-title {
    font-size: 40px;
    line-height: 50px;
    font-weight: 700;
}
.theme-title span {
    display: block;
}
.theme-title-dark {
    color: #1f3864;
}
.theme-title-orange {
    color: #f58220;
}
.theme-title-line {
    width: 100%;
    max-width: 290px;
    height: 2px;
    margin: 16px 0px 14px;
    background-color: #f58220;
}
.theme-intro {
    padding: 0px 0px 50px;
}
.theme-intro .sec-line {
    margin-bottom: 22px;
}
/*-----------Theme Banner Css End-------------*/


/*-----------Preloader Css Start-------------*/
/* The room for the scrollbar is held whether or not one is showing. Locking
   the page takes the scrollbar away, and the width the viewport gains back is
   enough to push anything measured in vw past the right edge - which is the
   horizontal bar that flashed when the loader cleared, and would do the same
   whenever the menu opens. */
html {
    scrollbar-gutter: stable;
}

/* .is-loading is in the markup, so the page is locked before any script runs;
   preloader.js takes it off when loading finishes */
body.is-loading {
    overflow: hidden;
}
.preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}
.preloader.is-done {
    opacity: 0;
    visibility: hidden;
}
.preloader-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
}
.preloader-logo {
    width: 200px;
    height: auto;
}
.preloader-bar {
    position: relative;
    width: 260px;
    height: 2px;
    background: #e3e7ec;
    overflow: hidden;
}
.preloader-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0%;
    background: #000000;
}
.preloader-pct {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .04em;
    color: #9aa3ad;
}
.theme-platforms.business-new li{
    color: rgba(255, 255, 255, 1);
}
.theme-platforms.business-new li span{
    color: #f58220;
    font-weight: 500;
}
/*-----------Preloader Css End-------------*/