body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 24px;
     font-family: "Barlow Condensed", sans-serif;
     font-weight: 400;
    color: #4A4949;
}
h1,
h2,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0px;
    padding: 0px;
}

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

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

p {
    font-size: 18px;
    line-height: 24px;
    font-family: "Barlow Condensed", sans-serif;
     font-weight: 500;
     color: #4A4949;
}

.my-sidenav {
    display: none;
}

h1 {
    font-size: 50px;
    line-height: 55px;
}

h2 {
    font-size: 35px;
    line-height:38px;
}

h3 {
    font-size: 30px;
}

/*-----------Header Css Start-------------*/
header {
    width: 100%;
    position: fixed;
    top: 0;
    padding: 10px 0px;
    z-index: 99;
    transition: transform 0.4s ease;
}

/* Slid out of view on scroll-down, slid back in on scroll-up (see js/custom.js) */
.header-hide {
    transform: translateY(-100%);
}

header .row {
    align-items: center;
}

header a {
    font-size: 16px;
    color: #4A4949;
    font-weight: 500;
}

header a span {
    color: #203A8F;
    padding-right: 5px;
}

header a:hover {
    text-decoration: underline !important;
}

.sticky {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.2);
}
/*-----------Header Css End-------------*/

/*-----------Banner Css Start-------------*/
.hmbanner {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
}

.hmbanner .container {
    position: absolute;
    left: 0;
    right: 0;
}

.hmbanner video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.videobnr-mbl {
    display: none;
}

.hmbanner h1 {
    color: #203A8F;
    padding-bottom: 25px;
    font-weight: 600;
}

.hmbanner h1 span {
    display: block;
    color: #203A8F;
}

.commonbtn {
    display: inline-block;
}

.commonbtn a {
    width: 140px;
    height: 39px;
    border: 1px solid #203A8F;
    position: relative;
    display: inline-block;
    color: #203A8F;
    font-size: 16px;
    font-weight: 700;
    line-height: 34px;
}

/* Blue block sitting behind the plus icon; slides across the label on hover */
.commonbtn a:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    background-color: #203A8F;
    width: 35px;
    height: 37px;
    transition: all .3s ease-in-out;
}

.commonbtn a img {
    position: relative;
    padding-left: 9px;
    filter: brightness(0) invert(1);
}

.commonbtn a span {
    position: relative;
    padding-left: 30px;
}

.commonbtn a:hover:before {
    left: 35px;
    width: 104px;
}

.commonbtn a:hover {
    color: #ffffff;
}

.commonbtn a:hover img {
    filter: brightness(1) invert(0);
}
/*-----------Banner Css End-------------*/

/*-----------At A Glance Css Start-------------*/
.ataglance {
    position: relative;
    padding:60px 0px 0px;
    min-height: 100vh;
    background: #ffffff;
    overflow: hidden;
}

/* Plant photo anchored to the bottom, faded out towards the content. */
.ataglance:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 55%;
    background: url(../images/jsw-cement-at-a-glance.jpg) center bottom / cover no-repeat;
    -webkit-mask-image: linear-gradient(to top, #000 62%, transparent 100%);
    mask-image: linear-gradient(to top, #000 62%, transparent 100%);
    pointer-events: none;
}

.ataglance .container {
    position: relative;
    z-index: 1;
}

/* Shared section intro styles - unscoped so every new section reuses them */
.eyebrow {
    display: block;
    font-size: 14px;
    line-height: 18px;
    font-weight: 700;
    text-transform: uppercase;
    color: #cbbe3e;
    padding-bottom:5px;
    letter-spacing: .5px;
}

.ataglance h2,
.sustainability h2 {
    color: #203A8F;
    padding-bottom: 15px;
}

.ataglance h2 span,
.sustainability h2 span {
    display:inline;
}

.ataglance-intro .commonbtn {
    margin-top: 25px;
}

.drivers-title {
    font-size: 18px;
    line-height: 22px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #e6391a;
    padding-bottom: 15px;
}

.drivers-subtitle {
    font-size: 20px;
    line-height: 26px;
    font-weight: 600;
    color: #203A8F;
    padding-bottom: 24px;
}

/* One driver group per slide, closed off by a rule underneath */
.drivers-group {
    padding-bottom: 24px;
    border-bottom: 1px solid #DDE3EC;
}

.statgrid {
    display: grid;
    gap: 22px 30px;
}

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

.statgrid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.statgrid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px 20px;
}

/* Number sits above its caption */
.stat-value {
    position: relative;
    display: flex;
    align-items:flex-end;
    font-size: 36px;
    line-height: 40px;
    font-weight: 500;
    color: #00a75d;
}

.stat-value small {
    font-size: 17px;
    font-weight: 600;
    padding-left: 4px;
}

/* First figure of a group is neutral grey, the rest are green */
.stat-value-muted {
    color: #4A4949;
}

/* Owl forces `.owl-item img { width:100% }`, which blows the arrow up to the
   full column width. Higher specificity is needed to keep it icon-sized. */
.owl-carousel .owl-item .stat-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-left: 8px;
    flex: 0 0 auto;
}

/* The right-pointing arrow is a connector between two figures. Auto margins
   centre it in the space left over after the first number, and the nudge adds
   half the 30px column gap, so it lands midway between the two numbers. */
.owl-carousel .owl-item .stat-icon-mid {
    margin-left: auto;
    margin-right: auto;
    transform: translateX(15px);
}

.stat-label {
    display: block;
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    color: #4A4949;
    padding-top: 6px;
}

.stat-label small {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color:  #4A4949;
}

/*-----------Drivers Slider Nav-------------*/
/* The nav and dots are inline-level siblings of the stage, so aligning the
   carousel's text pushes them to the right. The stage is reset to left so the
   slide content itself is unaffected. */
.driversslider {
    text-align: right;
}

.driversslider .owl-stage-outer {
    text-align: left;
}

.driversslider .owl-nav,
.driversslider .owl-dots {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-top: 20px;
}

.driversslider .owl-nav {
    gap: 12px;
    margin-right: 18px;
}

/* Flex-centring the glyph: a bare button leaves the default padding and the
   text baseline in play, which pushes the chevron off-centre in the circle. */
.driversslider .owl-nav button.owl-prev,
.driversslider .owl-nav button.owl-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0px;
    margin: 0px;
    border-radius: 50%;
    border: 1px solid rgba(32, 58, 143, 0.3);
    background: transparent;
    color: #203A8F;
    font-size: 22px;
    line-height: 1;
    transition: ease all 0.3s;
}

/* The chevron is drawn from two borders on a rotated square rather than set as
   a text glyph: `‹`/`›` are not centred within their em-box, so any font-based
   arrow sits visually off-centre no matter how the button is aligned. */
.driversslider .owl-nav button.owl-prev:before,
.driversslider .owl-nav button.owl-next:before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}

.driversslider .owl-nav button.owl-prev:before {
    transform: rotate(45deg);
    margin-left: 4px;
}

.driversslider .owl-nav button.owl-next:before {
    transform: rotate(-135deg);
    margin-right: 4px;
}

.driversslider .owl-nav button.owl-prev:hover,
.driversslider .owl-nav button.owl-next:hover {
    background: #203A8F;
    color: #ffffff;
}

.driversslider .owl-nav button.disabled {
    opacity: 0.35;
    cursor: default;
}

.driversslider .owl-dots {
    gap: 8px;
}

.driversslider .owl-dots button.owl-dot span {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(32, 58, 143, 0.25);
    transition: ease all 0.3s;
}

.driversslider .owl-dots button.owl-dot.active span {
    width: 26px;
    border-radius: 6px;
    background: #00a75d;
}
.ataglance-intro p 
{
max-width: 432px;
}
/*-----------At A Glance Css End-------------*/

/*-----------Sustainability Css Start-------------*/
/* Full-bleed background image. The section gets pinned by ScrollTrigger, so the
   image holds still while the text panel scrubs up over it. */
.sustainability {
    width: 100%;
    height: 100vh;
    background: url(../images/sustainability-strategy.jpg) center center / cover no-repeat;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.sustainability-inner {
    width: 100%;
    background: rgba(255, 255, 255, 0.63);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    padding: 40px;
    /* Starts below the fold; GSAP scrubs this to translateY(0). Reset on
       tablet/mobile in responsive.css, where the pinned animation is skipped. */
    transform: translateY(150%);
}

.sustainability-inner .commonbtn {
    margin-top: 25px;
}
/*-----------Sustainability Css End-------------*/

/*-----------Leadership Css Start-------------*/
.leadership {
    padding: 90px 0px;
}

/* Anchor for the absolutely-positioned tab thumbs */
.leadership .container {
    position: relative;
}

.leadership h2,
.leadership h2 span {
    color: #203A8F;
}

.leadership h2 {
    padding-bottom: 15px;
}

.leader-img img {
    width: 100%;
}

/* Bottom padding keeps the Read More button clear of the tab thumbs, which are
   absolutely positioned in the bottom-right of the same container. */
.leader-text {
    padding-left: 30px;
    padding-bottom: 90px;
}

/* Two-tone accent bar that sits to the left of the pull-quote, as in the report:
   a dark navy bar with a lighter blue one stepped down behind it. */
.leader-text p {
    position: relative;
    padding-left: 32px;
}

.leader-text p:before,
.leader-text p:after {
    content: '';
    position: absolute;
    width: 9px;
}

.leader-text p:before {
    left: 0px;
    top: 2px;
    height: 58px;
    background: #203A8F;
}

.leader-text p:after {
    left: 9px;
    top: 26px;
    height: 58px;
    background: #8FC7E8;
}

.leader-name {
    font-size: 20px;
    line-height: 26px;
    font-weight: 600;
    color: #203A8F;
    padding-top: 20px;
}

.leader-role {
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    color: #4A4949;
}

.leader-role span {
    display: block;
}

.leadership-content .commonbtn {
    margin-top: 25px;
}

/*-----------Leadership Tabs-------------*/
/* The thumbs float in the bottom-right of the content area rather than sitting
   in a row beneath it. */
.leadership-tabs {
    position: absolute;
    right: 0px;
    bottom: 10px;
    z-index: 2;
}

.leadership-tabs .nav-pills {
    display: flex;
    align-items: flex-end;
    gap: 30px;
}

/* Bootstrap's .nav-link ships its own padding, colour and radius - reset it so
   the thumb behaves like a plain selectable card. */
.leadership-tabs .nav-pills .nav-link {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 0px 15px;
    text-align: left;
    background: transparent;
    border: 0px;
    border-radius: 0px;
    color: #4A4949;
    transition: ease all 0.3s;
}

.leadership-tabs .nav-pills .nav-link:hover {
    opacity: 0.75;
}

/* The leader currently on show is dropped from the list - only the other two
   are offered as switches. */
.leadership-tabs .nav-pills .nav-link.active {
    display: none;
}

.leader-thumb {
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-radius: 50%;
}

.leader-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.leader-thumb-text strong {
    display: block;
    font-size: 17px;
    line-height: 22px;
    font-weight: 600;
    color: #203A8F;
}

.leader-thumb-text small {
    display: block;
    font-size: 14px;
    line-height: 18px;
    font-weight: 500;
    color: #4A4949;
}
/*-----------Leadership Css End-------------*/

/*-----------Value Creation Model Css Start-------------*/
.vcm {
    background: #e3f3fe;
    padding: 60px 0px 0px;
}

.vcm-intro {
    text-align: center;
    padding-bottom: 50px;
}

.vcm-intro h2 {
    color: #203A8F;
}

/* Each panel's header sticks to the top of the viewport while its own panel is
   in view, so the next coloured bar pushes the previous one out as you scroll. */
.vcm-header {
    position: sticky;
    top: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    padding: 0px 40px;
    z-index: 5;
    border-bottom: 2px solid #ffffff;
}

.vcm-header h3 {
    font-size: 24px;
    line-height: 28px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
}

.vcm-num {
    font-size: 24px;
    line-height: 28px;
    font-weight: 700;
    color: #ffffff;
}

.vcm-blue .vcm-header {
    background: #203A8F;
}

.vcm-green .vcm-header {
    background: #203A8F;
}

.vcm-red .vcm-header {
    background: #203A8F;
}

.vcm-content {
    padding: 50px 0px;
}

/*-----------Capitals (Inputs / Outcomes)-------------*/
.capitalgrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}

/* Gradient border: `border-color` cannot take a gradient, so the white fill is
   painted to the padding-box and the gradient to the border-box underneath. */
.capital {
    padding: 24px;
    border: 2px solid transparent;
    background:
        linear-gradient(#e3f3fe, #e3f3fe) padding-box,
        linear-gradient(90deg, #00718e 0%, #00a067 100%) border-box;
}

/* Same gradient on the underline. Only the bottom edge has a width, so
   border-image renders on that edge alone. */
.capital-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, #00718e 0%, #00a067 100%) 1;
}

/* The real icons have varying aspect ratios (portrait through landscape), so
   only the width is pinned - a fixed height would squash them. */
.capital-head img {
    flex: 0 0 auto;
    width: 48px;
    height: auto;
    margin-bottom: 0px;
}

.capital-head h4 {
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
    text-transform: uppercase;
    color: #203A8F;
}

.capital ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

.capital li {
    position: relative;
    padding-left: 16px;
    margin-bottom: 12px;
    font-size: 18px;
    line-height: 24px;
    color: #4A4949;
}

.capital li:before {
    content: '';
    position: absolute;
    left: 0px;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e6391a;
}

.capital li strong {
    font-weight: 600;
    color: #4A4949;
}

.capital-note {
    font-size: 13px;
    line-height: 17px;
    color: #7A7A7A;
    padding-top: 10px;
}

/*-----------Value Creation Process-------------*/
.vcm-subhead {
    font-size: 18px;
    line-height: 22px;
    font-weight: 700;
    text-transform: uppercase;
    color: #203A8F;
    padding-bottom: 20px;
}

/* Blue column holding the chain steps */
.chainbox {
    background: #203A8F;
    padding: 30px 20px;
    margin-bottom: 30px;
}

.chainlist {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

/* Each step reads top-down: label, then icon, then a connector line with an
   arrowhead pointing to the next step. */
.chainlist li {
    position: relative;
    text-align: center;
    padding-bottom: 46px;
}

.chainlist li:last-child {
    padding-bottom: 0px;
}

.chain-label {
    display: block;
    padding-bottom: 12px;
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
    color: #93d5f6;
}

.chainlist li img {
    display: block;
    width: 100%;
    max-width: 125px;
    margin: 0px auto;
}

/* Connector line */
.chainlist li:not(:last-child):before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    width: 1px;
    height: 26px;
    background: #8FC7E8;
}

/* Arrowhead at the foot of the line */
.chainlist li:not(:last-child):after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    border-right: 1px solid #8FC7E8;
    border-bottom: 1px solid #8FC7E8;
}

.productlist,
.servicelist {
    display: grid;
    gap: 16px;
    margin-bottom: 30px;
}

.product,
.service {
    background: #ffffff;
    padding: 10px;
}

.product span,
.service span {
    display: block;
    padding-bottom: 8px;
    font-size: 14px;
    line-height: 18px;
    font-weight: 700;
    color: #203A8F;
}

/* The product shots are transparent cut-outs at mixed sizes (upright bags through
   a wide mixer truck). Pinning the height and letting `contain` work out the
   width keeps every one at its true proportions in a tidy, even column. */
.product img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 110px;
    object-fit: contain;
    margin: 0px auto;
}

/* The service shots are wide landscape photos - full bleed inside the card. */
.service img {
    width: 100%;
    height: auto;
    margin-bottom: 0px;
}

.outputgrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.output-value {
    display: flex;
    align-items: baseline;
    font-size: 36px;
    line-height: 40px;
    font-weight: 600;
    color: #00a75d;
}

.output-value small {
    padding-left: 4px;
    font-size: 20px;
    font-weight: 600;
    color: #00a75d;
}

.output-label {
    display: block;
    padding-top: 4px;
    font-size: 16px;
    line-height: 18px;
    font-weight: 500;
    color: #4A4949;
}
/*-----------Value Creation Model Css End-------------*/

/*-----------Strategic Priorities Css Start-------------*/
/* overflow-x: clip caps the right-hand bleed at the viewport edge (no page
   scroll) without creating a scroll container the way `hidden` would - so the
   VCM sticky headers elsewhere are unaffected. */
.strategic {
    padding: 90px 0px;
    overflow-x: clip;
}

.strategic h2 {
    color: #203A8F;
    padding-bottom: 20px;
}

/* The slide cards spill out of the container to the RIGHT so the next card
   peeks in. The clip-path sits on the FIXED outer box (not the moving stage):
   it masks flush at the LEFT edge - so the previous card never covers the intro
   text - while staying open 100vw to the RIGHT so cards bleed past the column. */
.strategicslider .owl-stage-outer {
    overflow: visible;
    clip-path: inset(0 -100vw 0 0);
}

.strategic-intro p {
    max-width: 460px;
}

.strategic-intro .commonbtn {
    margin-top: 25px;
}

/* Mint card holding one priority's summary (heading, capitals, risks, SDGs) */
.strategic-box {
    background: #f5f1d7;
    padding: 30px;
    min-height: 320px;
}

.strategic-boxhead {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 2px solid #e6391a;
}

.s-num {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid #9093ce;
    font-size: 20px;
    font-weight: 700;
    color: #9093ce;
    background-color: #ffffff;
}

.strategic-boxhead h3 {
    font-size: 22px;
    line-height: 28px;
    font-weight: 700;
    text-transform: uppercase;
    color: #e6391a;
}

.strategic-block {
    margin-bottom: 24px;
}

.strategic-block:last-child {
    margin-bottom: 0px;
}

.strategic-block h5 {
    font-size: 18px;
    line-height:24px;
    font-weight:600;
    color: #203A8F;
    padding-bottom: 14px;
}

/* Pin the strip HEIGHT (not width) so each icon renders at the same size in every
   box. The selector is scoped through `.owl-item` to outrank Owl's built-in
   `.owl-carousel .owl-item img { width:100% }` - otherwise the strip fills the
   whole box and the icons centre inside it via preserveAspectRatio. */
.strategicslider .owl-item .strategic-capitals {
    display: block;
    height: 40px;
    width: auto;
    max-width: 100%;
}

.strategicslider .owl-item .strategic-sdg {
    display: block;
    height: 50px;
    width: auto;
    max-width: 100%;
}

/* Filled risk pills. Colour is keyed to the risk number so a given risk reads
   the same across every slide. */
.riskpills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.risk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    padding: 6px 12px;
    font-size: 15px;
    font-weight: 700;
    color: #ea9477;
    background:#ffffff;
    border: 1px solid  #ea9477;
}


/*-----------Strategic Slider Nav-------------*/
.strategicslider .owl-nav,
.strategicslider .owl-dots {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-top: 26px;
}

.strategicslider .owl-nav {
    gap: 12px;
    margin-right: 18px;
}

.strategicslider .owl-nav button.owl-prev,
.strategicslider .owl-nav button.owl-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(32, 58, 143, 0.3);
    background: transparent;
    transition: ease all 0.3s;
}

.strategicslider .owl-nav button.owl-prev:before,
.strategicslider .owl-nav button.owl-next:before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-left: 2px solid #203A8F;
    border-bottom: 2px solid #203A8F;
}

.strategicslider .owl-nav button.owl-prev:before {
    transform: rotate(45deg);
    margin-left: 4px;
}

.strategicslider .owl-nav button.owl-next:before {
    transform: rotate(-135deg);
    margin-right: 4px;
}

.strategicslider .owl-nav button.owl-prev:hover,
.strategicslider .owl-nav button.owl-next:hover {
    background: #203A8F;
}

.strategicslider .owl-nav button.owl-prev:hover:before,
.strategicslider .owl-nav button.owl-next:hover:before {
    border-color: #ffffff;
}

.strategicslider .owl-dots {
    gap: 8px;
}

.strategicslider .owl-dots button.owl-dot span {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(32, 58, 143, 0.25);
    transition: ease all 0.3s;
}

.strategicslider .owl-dots button.owl-dot.active span {
    width: 26px;
    border-radius: 6px;
    background: #00a75d;
}
/*-----------Strategic Priorities Css End-------------*/

/*-----------Stacked Panels (Operating Env / Stakeholder / Materiality / Risk) Css Start-------------*/
.sp-sec {
    position: relative;
}

.sp-pin {
    position: relative;
    width: 100%;
}

.sp-panel {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* Desktop: panels are stacked absolutely and the section is pinned; each later
   panel starts clipped from the bottom and is wiped up over the previous one
   by GSAP (see js/app.js). */
@media (min-width: 1026px) {
    .sp-sec {
        height: 100vh;
    }
    .sp-pin {
        height: 100%;
        overflow: hidden;
    }
    .sp-panel {
        position: absolute;
        top: 0;
        left: 0;
    }
    .sp-panel-1 { z-index: 1; }
    .sp-panel-2 { z-index: 2; clip-path: inset(100% 0 0 0); }
    .sp-panel-3 { z-index: 3; clip-path: inset(100% 0 0 0); }
    .sp-panel-4 { z-index: 4; clip-path: inset(100% 0 0 0); }
}

.sp-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    will-change: transform;
}

.sp-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Dark only on the LEFT, behind the text, fading to clear so the right of the
   photo stays visible. */
.sp-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 32%, rgba(0, 0, 0, 0) 58%);
}

.sp-content {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    z-index: 2;
}

/* White eyebrow + heading over the dark imagery (overrides the gold .eyebrow) */
.sp-content .eyebrow {
    color: #ffffff;
}

.sp-head {
    color: #ffffff;
    padding-bottom: 24px;
}

.sp-head span {
    display: block;
}

/* Light variant of the Read More button for dark panels. Self-contained so it
   behaves the same on every dark section (stacked panels + capitals):
   rest  = white border/text, white +block, blue plus icon on it;
   hover = white block slides over the label -> blue text; plus now sits on the
           dark panel, so it flips to white. */
.commonbtn-light a {
    border-color: #ffffff;
    color: #ffffff;
}

.commonbtn-light a:before {
    background-color: #ffffff;
}

.commonbtn-light a img {
    filter: none;
}

.commonbtn-light a:hover {
    color: #203A8F;
}

.commonbtn-light a:hover img {
    filter: brightness(0) invert(1);
}
/*-----------Stacked Panels Css End-------------*/

/*-----------Capital-wise Performance Css Start-------------*/
.capitalperf {
    padding:60px 0px;
    background: #fff;
}

/* Eyebrow + heading centred in white over the blue */
.capitalperf-intro {
    text-align: center;
    padding-bottom: 45px;
}
.capitalperf h2 
{
 color: #203A8F;   
}

/* Vertical-bar accordion: a flex row of full-height items. Collapsed items are
   narrow strips (rotated label); the .active1 item grows to fill and reveals its
   panel. Toggled by js/custom.js. */
.capvac ul {
    display: flex;
    height: 520px;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    list-style: none;
}

.capvac li {
    position: relative;
    width: 74px;
    display: flex;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    background: #203A8F;
    border-left: 1px solid rgba(255, 255, 255, 1);
    transition: flex 0.5s ease;
}

.capvac li:first-child {
    border-left: 0px;
}

.capvac li.active1 {
    flex: 5;
    cursor: default;
    background: #203A8F;
}

/* Collapsed strip: rotated capital name */
.capvac-title {
    flex: 0 0 74px;
    width: 74px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.capvac-title h3 {
    transform: rotate(-90deg);
    white-space: nowrap;
    font-size: 18px;
    line-height: 22px;
    font-weight: 700;
    color: #ffffff;
}

.capvac li.active1 .capvac-title {
    display: none;
}

/* Expanded panel: image on the left, details on the right */
.capvac-content {
    flex: 1;
    height: 100%;
    opacity: 0;
    transition: opacity 0.25s 0.15s ease-out;
}

.capvac li.active1 .capvac-content {
    opacity: 1;
}

.capvac-panel {
    display: flex;
    align-items: stretch;
    gap: 45px;
    height: 100%;
    padding: 30px 40px 30px 30px;
}

.capvac-img {
    flex: 0 0 42%;
    max-width: 42%;
}

.capvac-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.capvac-info {
    flex: 1;
    align-self: center;
    color: #ffffff;
}

.capvac-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 16px;
    margin-bottom: 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
}

/* Icons ship in brand colours - flip them to white for the blue panel */
.capvac-ico {
    flex: 0 0 auto;
    width: 40px;
    height: auto;
    filter: brightness(0) invert(1);
}

.capvac-heading {
    font-size: 24px;
    line-height: 32px;
    font-weight: 500;
    color: #ffffff;
    padding-bottom: 14px;
}

.capvac-desc {
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    color: #ffffff;
    padding-bottom: 24px;
}

/* "Focus Areas" chip - white box, red label */
.capvac-kpilabel {
    display: inline-block;
    padding: 5px 14px;
    margin-bottom: 22px;
    background: #ffffff;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    color: #e6391a;
}

/* Footnote under the figures (e.g. "*Includes ..." / total beneficiaries) */
.capvac-note {
    padding-top: 16px;
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
}

.capvac-note strong {
    font-weight: 700;
    color: #ffffff;
}

/* Small down-arrow trend note beside a figure's label */
.capstat-trend {
    display: block;
    padding-top: 2px;
    font-weight: 600;
    color: #ffffff;
}

.capstatgrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px 20px;
}

/* Focus-area sub-heading above each figure (blue in the report; white here since
   the panel is blue). */
.capstat-head {
    display: block;
    padding-bottom: 6px;
    font-size: 15px;
    line-height: 19px;
    font-weight: 700;
    color: #ffffff;
}

.capstat h4 {
    display: flex;
    align-items: baseline;
    font-size: 36px;
    line-height: 38px;
    font-weight: 500;
    color: #ffffff;
}

.capstat h4 small {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    padding-left: 4px;
}

.capstat p {
    font-size: 16px;
    line-height: 18px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
}

/* Read More reuses the shared .commonbtn (light variant for the blue panel) */
.capvac-info .commonbtn {
    margin-top: 26px;
}
/*-----------Capital-wise Performance Css End-------------*/

/*-----------Governance Css Start-------------*/
.governance {
    padding-bottom: 60px;
}

.governance h2 {
    color: #203A8F;
    padding-bottom: 20px;
}

.governance-text p {
    max-width: 520px;
}

.governance-text .commonbtn {
    margin-top: 25px;
}

.governance-img img {
    width: 100%;
}
/*-----------Governance Css End-------------*/

/*-----------MDA Css Start-------------*/
.mda {
    padding-bottom: 60px;
}

.mda h2 {
    color: #203A8F;
    padding-bottom: 20px;
}

.mda-text {
    padding-left: 15px;
}

.mda-text p {
    max-width: 560px;
}

.mda-text .commonbtn {
    margin-top: 25px;
}

.mda-img img {
    width: 100%;
}
/*-----------MDA Css End-------------*/

/*-----------Awards Css Start-------------*/
.awards {
    padding: 60px 0px;
    background: #e3f3fe;
    overflow: hidden;
}

.awards-intro {
    text-align: center;
    padding-bottom: 45px;
}

.awards h2 {
    color: #203A8F;
}

/* Swiper coverflow: centre card sits upright and large, neighbours angle back. */
.awardsswiper {
    width: 100%;
    padding-bottom: 10px;
}

/* Vertically centre the side cards against the taller centre one (they differ in
   height because captions vary) instead of aligning them to the bottom. */
.awardsswiper .swiper-wrapper {
    align-items: center;
}

.awardsswiper .swiper-slide {
    width: 46%;
    max-width: 560px;
    height: auto;
}

.award-card {
    background: #ffffff;
    padding: 16px;
}

/* 16:10 image frame */
.award-imgwrap {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 62%;
    overflow: hidden;
}

.award-imgwrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.award-caption {
    padding-top: 16px;
    font-size: 18px;
    line-height: 22px;
    font-weight: 500;
    color: #4A4949;
    text-align: center;
}

/*-----------Awards Slider Nav-------------*/
.awardsswiper .swiper-button-prev,
.awardsswiper .swiper-button-next {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #203A8F;
    color: #ffffff;
}

.awardsswiper .swiper-button-prev:after,
.awardsswiper .swiper-button-next:after {
    font-size: 16px;
    font-weight: 700;
}
/*-----------Awards Css End-------------*/

/*-----------Download Centre Css Start-------------*/
.downloadcentre {
    padding: 60px 0px 130px;
}

.downloadcentre-intro {
    text-align: center;
    padding-bottom: 55px;
}

.downloadcentre h2 {
    color: #203A8F;
}

/* White card: report cover overhangs on the left, links fill the right. */
.reportbook {
    position: relative;
    display: flex;
    background: #ffffff;
    box-shadow: 0px 3px 20px rgba(32, 58, 143, 0.12);
}

.reportbook-cover {
    position: absolute;
    left: 00px;
    top: -35px;
    width: 220px;
}

.reportbook-cover img {
    width: 100%;
}

.reportbook-links {
    width: 100%;
    padding-left: 24%;
}

.rblink-row {
    display: flex;
}

.rblink-row:first-child {
    border-bottom: 1px solid #E3E3E3;
}

.rblink {
    position: relative;
    width: 50%;
    padding: 34px 40px;
}

/* Vertical divider between the two columns */
.rblink-border:after {
    content: '';
    position: absolute;
    right: 0;
    top: 26px;
    bottom: 26px;
    width: 1px;
    background: #E3E3E3;
}

.rblink h4 {
    font-size: 20px;
    line-height: 24px;
    font-weight: 500;
    color: #203A8F;
    padding-bottom: 8px;
    transition: ease all 0.3s;
}

.rblink a:hover h4 {
    color: #00a75d;
}

.rblink p {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 18px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #4A4949;
}

.rblink p img {
    width: 18px;
    height: auto;
}
/*-----------Download Centre Css End-------------*/

/*-----------Footer Css Start-------------*/
.copyrights {
    background: #203A8F 0% 0% no-repeat padding-box;
    padding: 18px 0px;
}

.copyrights p,
.copyrights a {
    color: #fff;
    font-size: 16px;
}
/*-----------Footer Css End-------------*/