.our-story-technolube h2 span,
.petro-brand-title-container h2 span {
    color: var(--Neutral-B700, #1C1C1C) !important;
    font-family: --var(futura) !important;
    font-size: 48px !important;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 57.6px */
}

.our-story-technolube p {
    color: var(--Neutral-B500, #3B3B3B);
    font-family: --var(futura) !important;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    /* 19.2px */
}

.our-story-technolube img {
    border-radius: 8px;
}

.about-us-year-overlay {
    background: linear-gradient(270deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.92) 100%);
}

.story-yearr-our-st {
    background: var(--rg-grad, linear-gradient(97deg, #AA2C32 0%, #2B825B 100%));
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: inline-block;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: --var(futura) !important;
    font-size: 96px;
    font-style: normal;
    font-weight: 900;
    line-height: 120%;
    /* 115.2px */
}

.story-yearr-our-st-sub {
    color: var(--Neutral-B0, #FFF);
    font-family: --var(futura) !important;
    font-size: 36px;
    font-style: normal;
    font-weight: 900;
    line-height: 120%;
    /* 43.2px */
}

.bg-brand-technolube {
    background-color: #AA2C32 !important;
}

.aside-home-banner-template-leadership-teamblade-technolube p {
    color: #FFF;
    font-family: --var(futura) !important;
    font-size: 18px !important;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    max-width: 738px !important;
    /* 23.4px */
}

.leaa-template-leadership-teamblade-technolube h2 {
    color: var(--Neutral-B700, #1C1C1C);
    /* text-align: center; */
    font-family: --var(futura) !important;
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 57.6px */
}

.leaa-template-leadership-teamblade-technolube p {
    color: var(--Foundation-Grey-G300, #707272);
    font-family: --var(futura) !important;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    /* 24px */
}

.leader-nav-item-button:first-child {
    display: flex;
    padding: 12px 16px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 41px;
    border: 1px solid var(--Neutral-B500, #3B3B3B);
    background: var(--Foundation-Grey-G0, #FFF);
    color: var(--Neutral-B500, #3B3B3B);
    text-align: center;
    font-family: --var(futura);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 24px */
}

.leader-nav-item-button.active {
    display: flex;
    padding: 12px 16px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: var(--Foundation-Grey-G0, #FFF);
    text-align: center;
    font-family: --var(futura);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 24px */
    border-radius: 41px;
    border: 1px solid var(--Red-R300, #AA2C32);
    background: var(--Red-R300, #AA2C32);
}

.ggg-template-leadership-teamblade-technolube h3 {
    color: var(--Red-R300, #AA2C32);
    font-family: --var(futura);
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 28.8px */
}

.ggg-template-leadership-teamblade-technolube p {
    color: var(--Foundation-Grey-G300, #707272);
    /* font-family: Futura; */
    font-family: --var(futura);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    /* 24px */
}

.omni-1-content-wrapper-item {
    border-radius: 16px;
    /* border: 1px solid var(--Neutral-B40, #DEDEDE); */
    background: var(--Red-R300, #AA2C32);
    box-shadow: 0 2px 24.3px 0 rgba(0, 0, 0, 0.12);
    color: var(--Neutral-B0, #FFF);
    font-family: --var(futura);
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    display: flex;
    height: 209px;
    padding: 40px 32px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    /* 57.6px */
}

.omni-1-content-wrapper-item-2 {
    border-radius: 16px;
    /* border: 1px solid var(--Neutral-B40, #DEDEDE); */
    /* background: var(--Red-R300, #AA2C32); */
    box-shadow: 0 2px 24.3px 0 rgba(0, 0, 0, 0.12);
    color: var(--Neutral-B0, #FFF);
    font-family: --var(futura);
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    display: flex;
    height: 209px;
    padding: 40px 32px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    position: relative;
    z-index: 2;
    /* 57.6px */
}

.omni-1-content-wrapper-new .ddddd {
    position: relative;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 16px;
    border: 1px solid var(--Neutral-B40, #DEDEDE);
    box-shadow: 0 2px 24.3px 0 rgba(0, 0, 0, 0.12);
    overflow: hidden;
    min-height: 520px;
    display: flex;
    align-items: flex-end;
    aspect-ratio: auto;
}

.omni-1-content-wrapper-new .ddddd::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.60) 100%);
    z-index: 1;
    pointer-events: none;
}

.omni-1-content-wrapper-new .omni-1-content-wrapper-coll[style*="background-image"]:not(.col-md-6) {
    border-radius: 16px;
    border: 1px solid var(--Neutral-B40, #DEDEDE);
    box-shadow: 0 2px 24.3px 0 rgba(0, 0, 0, 0.12);
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 209px;
    display: flex;
    align-items: flex-end;
}

.omni-1-content-wrapper-new .omni-1-content-wrapper-coll[style*="background-image"]:not(.col-md-6)::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.60) 100%);
    z-index: 1;
    pointer-events: none;
}

.omni-1-content-wrapper-new>.row>.omni-1-content-wrapper-coll {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.omni-2-content-wrapper-item {
    border-radius: 16px;
    /* border: 1px solid var(--Neutral-B40, #DEDEDE); */

    /* box-shadow: 0 2px 24.3px 0 rgba(0, 0, 0, 0.12); */
    display: flex;
    height: 520px;
    padding: 40px 32px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    position: relative;
    z-index: 2;
}

.omni-t-title {
    color: var(--Neutral-B700, #1C1C1C);
    font-family: --var(futura);
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 57.6px */
}

.eefff {
    color: var(--Neutral-B0, #FFF);
    font-family: --var(futura);
    font-size: 24px;
    font-style: normal;
    font-weight: 900;
    padding-left: 0;
    line-height: 120%;
    padding-bottom: 0;
    /* 28.8px */
}

.subbbheading {
    color: var(--Neutral-B0, #FFF);
    font-family: --var(futura);
    font-size: 16px;
    font-style: normal;
    font-weight: 900;
    line-height: 120%;
    /* 19.2px */
    display: block;
    margin-bottom: 16px;
}

.subcontennt {
    color: var(--Neutral-B0, #FFF);
    font-family: --var(futura);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 19.2px */
}

.ddddd {
    /* width: 100%;
    height: 100%;
    background-position: center center;
    object-fit: cover; */
}

.three-pinciple-grid {}

.three-pinciple-grid-title {
    color: var(--Neutral-B700, #1C1C1C);
    font-family: --var(futura);
    font-size: 24px;
    font-style: normal;
    font-weight: 900;
    line-height: 120%;
    /* 28.8px */
}

.subcontennt h3 {
    color: var(--Neutral-B0, #FFF);
    font-family: --var(futura);
    font-size: 16px;
    font-style: normal;
    font-weight: 900;
    line-height: 120%;
    display: block;
    margin-bottom: 12px;
    /* 19.2px */
}

.subcontennt p {
    color: var(--Neutral-B0, #FFF);
    font-family: --var(futura);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 19.2px */
}

.three-pinciple-grid-sub-title {
    color: var(--Neutral-B500, #3B3B3B);
    font-family: --var(futura);
    font-size: 16px;
    font-style: normal;
    font-weight: 900;
    line-height: 120%;
    /* 19.2px */
}

.three-pinciple-grid-sub-title p {
    color: var(--Neutral-B300, #575757);
    font-family: --var(futura);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 19.2px */
}

.three-pinciple-grid-desc p {
    color: var(--Neutral-B300, #575757);
    font-family: Futura;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 19.2px */
}

.three-pinciple-grid-fig {
    border-radius: 16px;
    background: var(--Neutral-B20, #F5F5F5);
    box-shadow: 0 2px 2px 0 rgba(31, 31, 34, 0.10);
}

.glance-gradient-omni {
    inset: calc(var(--spacing) * 0);
    object-fit: cover;
    /* background: linear-gradient(180deg, rgba(13, 13, 13, 0.90) 0%, rgba(59, 59, 59, 0.36) 100%), url(<path-to-image>) lightgray 50% / cover no-repeat; */
    background: linear-gradient(180deg, #0D0D0D 0%, rgba(56, 56, 56, 0.40) 100%);
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    position: absolute;
}

.omni-2-fiication .eded {
    color: var(--Neutral-B700, #1C1C1C);
    font-family: --var(futura);
    font-size: 24px;
    font-style: normal;
    font-weight: 900;
    line-height: 120%;
    /* 28.8px */
}

.omni-2-fiication .tgtg p {
    color: var(--Neutral-B500, #3B3B3B);
    font-family: --var(futura);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 19.2px */
}

.omni-2-secod-title {
    color: var(--Foundation-Grey-G0, #FFF);
    font-family: --var(futura);
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 57.6px */
}

.omni-3-text-wrapper .pp {
    color: var(--Red-R300, #AA2C32);
    font-family: --var(futura);
    font-size: 24px !important;
    font-style: normal;
    font-weight: 900;
    line-height: 120%;
    /* 28.8px */
}

.omni-3-text-wrapper .tt {
    color: var(--Neutral-B500, #3B3B3B);
    font-family: --var(futura);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 19.2px */
}

.counttt {
    color: var(--Neutral-B700, #1C1C1C);
    font-family: --var(futura);
    font-size: 24px;
    font-style: normal;
    font-weight: 900;
    line-height: 120%;
    /* 28.8px */
}

.omni-3-title {
    color: var(--Neutral-B700, #1C1C1C);
    font-family: --var(futura);
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 57.6px */
}

.omni-4-h2 {
    color: var(--Foundation-Grey-G0, #FFF);
    font-family: --var(futura);
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 57.6px */
}

.omni-4-p,
.omni-4-article p {
    color: rgba(255, 255, 255, 0.80);
    font-family: --var(futura);
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    /* 23.4px */
}

.bg-back-verly {
    /* background: linear-gradient(0deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.60) 100%); */
}

.omni-2-figure {
    border-radius: 16px;
    background: var(--Neutral-B20, #F5F5F5);
    box-shadow: 0 2px 2px 0 rgba(31, 31, 34, 0.10) !important;
}

.omni-4-wrapppper {
    border-bottom: 1px solid var(--Foundation-Grey-G70, #B1B2B2);

}

.vision-missionn-1 {
    border-radius: 16px;
    border: 1px solid var(--Neutral-B40, #DEDEDE);
    background: var(--Neutral-B0, #FFF);
    box-shadow: 0 8px 24.1px 0 rgba(0, 0, 0, 0.12);
}

.vision-missionn-2 {
    background: var(--Neutral-B700, #1C1C1C);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.10);
}

.vision-missionn-1 p {
    color: var(--Neutral-B300, #575757);
    font-family: --var(futura);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    text-transform: capitalize;
}


.our-misssion-section-parent-wrapper {
    margin-bottom: 24px;
}

.vision-missionn-1 .our-misssion-section-titlee {
    color: var(--Neutral-B500, #3B3B3B);
    font-family: --var(futura);
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    margin-bottom: 0 !important;
    /* 43.2px */
}

.vision-missionn-2 p {
    color: var(--Red-R50, #F7EAEB);
    font-family: --var(futura);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    /* 19.2px */
    text-transform: capitalize;
}

.our-misssion-section {
    background: var(--Neutral-B10, #FAFAFA);
}

.vision-missionn-2 .our-misssion-section-titlee {
    color: var(--Neutral-B0, #FFF);
    font-family: --var(futura);
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 43.2px */
}

.mission-secc {
    /* overflow-x: hidden; */
    max-width: 100%;
    width: 100%;
}

.mission-sec-right-imgg {
    height: auto;
    border-radius: 8px;
}

.mission-secc .col-md-6 {
    /* padding: 0; */
}

.our-misssion-section-titlee-wrappper {
    align-items: center;
    margin-bottom: 10px;
}

.our-misssion-section-figure {
    padding: 40px;
    height: 100%;
}


.our-story-title {
    color: var(--Neutral-B700, #1C1C1C);
    font-family: --var(futura);
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 57.6px */
}



.our-story-subtitle {
    color: var(--Foundation-Grey-G300, #707272);
    font-family: --var(futura);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    /* 19.2px */
}

.our-story-value-article {
    border-right: 1px solid var(--Red-R50, #F7EAEB);
    background: var(--Red-R300, #AA2C32);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.10);
    color: #FFF !important;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(1);
}

.our-story-value-article:hover {
    background: transparent;
    transform: scale(1.05);
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.20);
    z-index: 10;
}

.our-story-gradient {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.5) 50%,
            rgba(0, 0, 0, 0.8) 100%);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.our-story-value-article:hover .our-story-gradient {
    opacity: 1;
}

/* Content wrapper */
.our-story-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.our-story-value-article:hover .our-story-content {
    transform: translateY(-30px);
    /* Move entire content block up */
}

/* Icon animations */
.our-story-icon-figure {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.our-story-value-article:hover .our-story-icon-figure {
    transform: scale(1.1);
}

/* Title - NO individual movement */
.our-story-value-title {
    color: var(--Red-R50, #F7EAEB);
    font-family: var(--futura);
    font-size: 24px;
    font-style: normal;
    font-weight: 900;
    line-height: 120%;
    margin-bottom: 0;
    transition: color 0.4s ease;
}

.our-story-value-article:hover .our-story-value-title {
    color: #fff;
}

/* Text aside wrapper - GRID METHOD (SMOOTHEST) */
.our-story-text-aside {
    display: grid;
    grid-template-rows: auto 0fr;
    gap: 0;
    transition: grid-template-rows 0.7s cubic-bezier(0.4, 0, 0.2, 1),
        gap 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.our-story-value-article:hover .our-story-text-aside {
    grid-template-rows: auto 1fr;
    gap: 0.75rem;
}

/* Description wrapper - CRITICAL for smooth animation */
.our-story-value-desc-wrapper {
    overflow: hidden;
    min-height: 0;
    /* Critical for grid animation */
}

/* Description - SMOOTHEST VERSION */
.our-story-value-desc {
    color: var(--Red-R50, #F7EAEB);
    font-family: var(--futura);
    font-size: 16px !important;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin: 0;
    padding: 0;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
        transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}

.our-story-value-article:hover .our-story-value-desc {
    opacity: 1;
    transform: translateY(0);
}

/* Background image */
.our-story-bg-image {
    z-index: 0;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(1);
}

.our-story-value-article:hover .our-story-bg-image {
    transform: scale(1.08);
}

.our-story-icon-figure .icon-wrapper img {
    width: 60px;
    height: 60px;
}

.our-story-subtitle a {
    color: #AA2C32 !important;
}

.our-story-subtitle a:hover {
    color: #AA2C32 !important;
}

.what-we-do-content-title {
    color: var(--Neutral-B700, #1C1C1C);
    font-family: --var(futura);
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 57.6px */
}

.what-we-do-content-p p {
    color: var(--Foundation-Grey-G300, #707272);
    font-family: --var(futura);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    /* 24px */
}

#what-we-do-content-1 {
    background: var(--Neutral-B20, #F5F5F5);
}

.certification-2-title {
    color: var(--Neutral-B700, #1C1C1C);
    font-family: --var(futura);
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 57.6px */
}

.certification-2-des {
    color: var(--Foundation-Grey-G300, #707272);
    font-family: --var(futura);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    /* 24px */
}

.comprehensive-title {
    color: #FFFFF2;
    /* text-align: center; */
    font-family: --var(futura);
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 57.6px */
}

.comprehensive-p {
    color: var(--Foundation-Green-G50, #E6F0EA);
    /* text-align: center; */
    font-family: --var(futura);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    /* 24px */
}

.port-list-item {
    border-radius: 16px;
    border: 4px solid #FFF;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.10);
}

.port-list-item:hover {
    background-color: #AA2C32;
    border-radius: 16px;
    background: var(--Red-R300, #AA2C32);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.10);
    border: 4px solid #AA2C32;
}

.comprehensive-name-title {
    color: var(--Foundation-Yellow-Y50, #FEF6E9);
    font-family: --var(futura);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 24px */
}

.comprehensive-name p {
    color: var(--Red-R50, #F7EAEB);
    font-family: --var(futura);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 16.8px */
}

.custom-order-styles {
    /* order: 1 !important; */
}

/* #what-we-do-content-4 .what-we-do-content-aside {
    order: 2 !important;
} */

.supply-chain-title {
    color: var(--Foundation-Green-G50, #E6F0EA);
    font-family: --var(futura);
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 57.6px */
}

.glance-gradient-to-right-2 {
    object-fit: cover;
    /* background: linear-gradient(90deg, #013e1e, #2d7f5466); */
    width: 100%;
    height: 100%;
    position: absolute;
    /* background: linear-gradient(90deg, #0D0D0D 0%, rgba(74, 74, 74, 0.39) 100%); */

}

.supply-chain-p {
    color: var(--Foundation-Green-G50, #E6F0EA);
    font-family: --var(futura);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    /* 24px */
}

.distribution-section-title {
    color: var(--Neutral-B700, #1C1C1C);
    font-family: --var(futura);
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 57.6px */
}

.distribution-section-container article p {
    color: var(--Foundation-Grey-G300, #707272);
    font-family: --var(futura);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    /* 24px */
}

.glance-gradient-to-right-33 {
    inset: calc(var(--spacing) * 0);
    object-fit: cover;
    /* background: linear-gradient(180deg, #1C1C1C 0%, rgba(133, 133, 133, 0.70) 100%); */
    width: 100%;
    height: 100%;
    position: absolute;
}

.app-title {
    color: #FFF;
    font-family: --var(futura);
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* max-width: 656px; */
    /* 58.8px */
}

.app-description {
    color: var(--Foundation-Green-G50, #E6F0EA);
    font-family: --var(futura);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    max-width: 656px;
    /* 24px */
}

.forward-looking-sustainability-section {
    background: linear-gradient(180deg, rgba(250, 250, 250, 0.00) 0%, rgba(43, 130, 91, 0.10) 100%);
    padding-top: 80px;
    padding-bottom: 80px;
}

.forward-looking-sustainability-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 410px);
    gap: 64px;
    align-items: center;
}

.forward-looking-sustainability-title {
    color: var(--Neutral-B700, #1C1C1C);
    font-family: Futura, var(--futura, sans-serif);
    font-size: 48px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    margin-bottom: 24px;
    max-width: 700px;
}

.forward-looking-sustainability-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 640px;
}

.forward-looking-sustainability-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--Foundation-Grey-G300, #707272);
    font-family: Futura-Book, var(--futura, sans-serif);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    border-bottom: 1px solid var(--Neutral-B40, #DEDEDE);
    /* margin: 8px 0; */
    padding: 8px 0;
}

.forward-looking-sustainability-tick {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.forward-looking-sustainability-card {
    border-radius: 16px;
    border: 1px solid var(--Neutral-B40, #DEDEDE);
    background: #FFF;
    box-shadow: 0 16px 40px 0 rgba(0, 0, 0, 0.10);
    padding: 40px 32px;
    text-align: center;
}

.forward-looking-sustainability-card-title {
    color: var(--Foundation-Green-G300, #006839);
    text-align: center;
    font-family: Futura, var(--futura, sans-serif);
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    margin-bottom: 16px;
}

.forward-looking-sustainability-card-text {
    color: var(--Neutral-B500, #3B3B3B);
    text-align: center;
    font-family: Futura-Book, var(--futura, sans-serif);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    margin-bottom: 24px;
}

.forward-looking-sustainability-qr {
    margin: 0 auto 16px;
}

.forward-looking-sustainability-qr img {
    width: 220px;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.forward-looking-sustainability-link,
.forward-looking-sustainability-link:hover {
    color: var(--Foundation-Green-G300, #006839);
    font-family: Futura-Book, var(--futura, sans-serif);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    text-decoration: none;
    overflow-wrap: anywhere;
    margin-top: 16px;
    display: block;
}

@media (max-width: 991px) {
    .forward-looking-sustainability-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

@media (max-width: 767px) {
    .forward-looking-sustainability-section {
        background: rgba(43, 130, 91, 0.10);
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .forward-looking-sustainability-title {
        font-size: 34px;
    }

    .forward-looking-sustainability-card {
        padding: 32px 20px;
    }
}

.sus-2-title {
    color: var(--Neutral-B700, #1C1C1C);
    font-family: --var(futura);
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 57.6px */
}

.sus-2-description p {
    color: var(--Foundation-Grey-G300, #707272);
    font-family: --var(futura);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 24px */
}

.sus-2-description .sdg-icons-container {
    display: none;
}

.solar-power-plant-section {
    background: var(--Foundation-Neutral-N10, #FAFAFA);
    padding-top: 80px;
    padding-bottom: 80px;
}

.solar-power-plant-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
    margin-bottom: 24px;
}

.solar-power-plant-title {
    color: var(--Neutral-B700, #1C1C1C);
    font-family: Futura, var(--futura, sans-serif);
    font-size: 48px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    margin-bottom: 16px;
}

.solar-power-plant-copy {
    max-width: 540px;
}

.solar-power-plant-copy p {
    color: var(--Neutral-B500, #3B3B3B);
    font-family: Futura-Book, var(--futura, sans-serif);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    margin-bottom: 12px;
}

.solar-power-plant-copy p:last-child {
    margin-bottom: 0;
}

.solar-power-plant-figure {
    margin: 0;
}

.solar-power-plant-figure img {
    width: 100%;
    min-height: 354px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.solar-power-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.solar-power-stat-card {
    border-radius: 16px;
    border: 1px solid var(--Neutral-B40, #DEDEDE);
    background: #FFF;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.10);
    padding: 24px;
    min-height: 118px;
}

.solar-power-stat-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 12px;
}

.solar-power-stat-value {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    color: var(--Foundation-Red-R300, #AA2C32);
    font-family: Futura, var(--futura, sans-serif);
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
}

.solar-power-stat-number {
    color: var(--Foundation-Red-R300, #AA2C32);
    font-family: Futura, var(--futura, sans-serif);
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
}

.solar-power-stat-unit {
    color: var(--Foundation-Red-R300, #AA2C32);
    font-family: Futura, var(--futura, sans-serif);
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
}

.solar-power-stat-unit-small,
.solar-power-stat-unit-prefix {
    font-size: 16px;
}

.solar-power-stat-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    overflow: hidden;
}

.solar-power-stat-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.solar-power-stat-text {
    color: var(--Neutral-B500, #3B3B3B);
    font-family: Futura-Book, var(--futura, sans-serif);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    margin: 0;
}

@media (max-width: 1199px) {
    .solar-power-plant-top {
        gap: 32px;
    }

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

@media (max-width: 767px) {
    .solar-power-plant-section {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .solar-power-plant-top,
    .solar-power-stat-grid {
        grid-template-columns: 1fr;
    }

    .solar-power-plant-title {
        font-size: 34px;
    }

    .solar-power-plant-figure img {
        min-height: 260px;
    }
}

#sus_content_layout-5 {
    display: none;
}

#sustainability {
    display: none;
}

#innovation {
    display: none;
}

#success_stories_layout-6 {
    display: none;
}

#certification-9 {
    display: none;
}

.certification-title-8 {
    color: var(--Neutral-B700, #1C1C1C);
    text-align: center;
    font-family: --var(futura);
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 57.6px */
}

.certification-p-8 {
    color: var(--Foundation-Grey-G300, #707272);
    text-align: center;
    font-family: --var(futura);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 24px */
}

.reports-layout-title-10 {
    color: var(--Neutral-B700, #1C1C1C);
    font-family: --var(futura);
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 57.6px */
}

.reports-layout-p-10 {
    color: var(--Foundation-Grey-G300, #707272);
    font-family: --var(futura);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 24px */
}

.rep-titleee {
    color: var(--Foundation-Grey-G900, #272A29);
    font-family: --var(futura);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 19.2px */
}

.re-pp-contentt {
    color: var(--Foundation-Grey-G500, #595B5A);
    font-family: --var(futura);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    max-width: 175px;
    /* 16.8px */
}

.conttt-btn {
    color: var(--Foundation-Yellow-Y400, #AC7615);
    font-family: --var(futura);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 19.2px */
}

.glance-gradient-2222 {
    inset: calc(var(--spacing) * 0);
    object-fit: cover;
    /* background: linear-gradient(180deg, rgba(13, 13, 13, 0.80) 0%, rgba(170, 44, 50, 0.40) 100%); */
    width: 100%;
    height: 100%;
    position: absolute;
}

.aff-country-name {
    color: var(--Foundation-Green-G50, #E6F0EA);
    font-family: --var(futura);
    font-size: 40px;
    font-style: normal;
    font-weight: 900;
    line-height: 120%;
    /* 48px */
}

.aff-h2-ttt {
    color: var(--Foundation-Yellow-Y50, #FEF6E9);
    font-family: --var(futura);
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    display: flex;
    margin-top: 16px;
    /* 38.4px */
}

.aff-p {
    color: var(--Foundation-Green-G50, #E6F0EA);
    font-family: --var(futura);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    /* 24px */
    text-transform: capitalize;
    max-width: 632px;
}

.healthy-and-safety-section {
    padding-top: 60px;
    padding-bottom: 60px;
}

.healthy-and-safety-section-content-wrapper-item-image-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.healthy-and-safety-section-content-wrapper-item-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.healthy-and-safety-section-icon-heading-wrapper {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    align-items: center;
}

.healthy-and-safety-section-content-wrapper-title {
    color: var(--Neutral-B700, #1C1C1C);
    font-family: --var(futura);
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 57.6px */
}

.col-safety {
    border-radius: 16px;
    border: 1px solid var(--Neutral-B40, #DEDEDE);
    padding: 24px;
    height: 100%;
}

.col-safety:first-child {
    margin-bottom: 24px;
    margin-top: 24px;
}

.healthy-and-safety-section-content-wrapper-item-title {
    color: var(--Neutral-B500, #3B3B3B);
    font-family: --var(futura);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    /* 24px */
}

.healthy-and-safety-section-content-wrapper-item p {
    color: var(--Neutral-B300, #575757);
    font-family: --var(futura);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 19.2px */
}

@media(max-width:767px) {
    #banner .slide-title {
        font-size: 30px;
    }
}

/* Quality Excellence Section */
.qe-section {
    padding-top: 60px;
    padding-bottom: 60px;
}

.qe-wrapper {
    text-align: center;
}

.qe-content-bottom h3 {
    color: var(--Neutral-B700, #1C1C1C);
    text-align: center;
    font-family: --var(futura);
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 57.6px */
}

.qe-title {
    color: var(--Neutral-B700, #1C1C1C);
    font-family: --var(futura);
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 57.6px */
}

.qe-content {
    color: var(--Foundation-Grey-G300, #707272);
    font-family: --var(futura);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    /* 24px */
}

.qe-content-top {}

.qe-content-top p {}

.qe-brands {
    display: flex;
    gap: 40px;
    justify-content: center;
    flex-wrap: wrap;
}

.qe-brands-item {
    border-radius: 16px;
    border: 1px solid var(--Neutral-B40, #DEDEDE);
    background: #FFF;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
    display: flex;
    padding: 8px;
    flex-direction: column;
    align-items: center;
    margin-top: 24px;
    margin-bottom: 24px;
    justify-content: space-around;
    min-height: 218px;
    max-height: 218px;
}

.qe-brands-item img {
    max-width: 178px;
    /* height: 138px;
    object-fit: contain; */
    transform: scale(1) !important;
    /* margin-bottom: 16px; */
}

.qe-brands-link {
    color: var(--Red-R300, #AA2C32);
    font-family: --var(futura);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    /* 19.2px */
    display: flex;
    gap: 24px;
}

.qe-brands-link:hover {
    color: var(--Red-R300, #AA2C32);
    font-family: --var(futura);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    /* 19.2px */
}

.qe-content-bottom {
    color: var(--Foundation-Grey-G300, #707272);
    font-family: --var(futura);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    /* 24px */
}

.qe-content-bottom p {
    color: var(--Foundation-Grey-G300, #707272);
    font-family: --var(futura);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    /* 24px */
}

.qe-certifications {
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 24px;
}

.qe-certifications-item {
    display: flex;
    width: 120px;
    height: 120px;
    padding: 16px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    /* border: 1px solid var(--Neutral-B40, #DEDEDE); */
}

.qe-certifications-item img {}

.qe-certifications-name {}

/* ========== START: #omni-five-core-rules Section ========== */
.omni-five-core-rules-section {
    padding: 60px 0;
    /* background: #f5f5f5; */
}

.five-core-rules-title {
    color: var(--Neutral-B700, #1C1C1C);
    font-family: var(--futura);
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    margin-bottom: 40px;
}

.five-core-rules-wrapper {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: nowrap;
    width: 100%;
    flex-direction: row-reverse;
}

.five-core-card {
    position: relative;
    flex: 1 1 232px;
    min-width: 0;
    height: 400px;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: flex-grow 0.4s ease-in-out, flex-basis 0.4s ease-in-out, box-shadow 0.4s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    will-change: flex-grow, flex-basis;
    background-color: #e5e5e5;
}

.five-core-rules-wrapper:hover .five-core-card {
    flex: 1 1 180px;
}

.five-core-rules-wrapper:hover .five-core-card:hover {
    flex: 1.5 1 300px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.five-core-card-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.1);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease-in-out;
}

.five-core-card:hover .five-core-card-bg {
    transform: translate(-50%, -50%) scale(1.15);
}

.five-core-card-overlay {
    position: absolute;
    inset: 0;
    /* background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.7) 100%); */
    transition: background 0.4s ease;
    z-index: 1;
}

.five-core-card:hover .five-core-card-overlay {
    /* background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.85) 100%); */
}

.five-core-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.five-core-card:hover .five-core-card-content {
    transform: translateY(-5px);
}

.five-core-card-title {
    color: #fff;
    font-family: var(--futura);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.five-core-card-desc {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.five-core-card:hover .five-core-card-desc {
    max-height: 200px;
}

.five-core-card-desc p {
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--futura);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    padding-top: 8px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease 0.15s, transform 0.3s ease 0.15s;
}

.five-core-card:hover .five-core-card-desc p {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive Styles */
@media (max-width: 1200px) {
    .five-core-rules-wrapper {
        flex-wrap: wrap;
    }

    .five-core-card {
        flex: 1 1 calc(33.333% - 11px);
        min-width: 200px;
    }

    .five-core-rules-wrapper:hover .five-core-card {
        flex: 1 1 calc(33.333% - 11px);
    }

    .five-core-rules-wrapper:hover .five-core-card:hover {
        flex: 1 1 calc(50% - 8px);
    }
}

@media (max-width: 991px) {
    .five-core-card {
        flex: 1 1 calc(50% - 8px);
        height: 350px;
    }

    .five-core-rules-wrapper:hover .five-core-card {
        flex: 1 1 calc(50% - 8px);
    }

    .five-core-rules-wrapper:hover .five-core-card:hover {
        flex: 1 1 100%;
    }
}

@media (max-width: 576px) {
    .five-core-rules-wrapper {
        gap: 12px;
    }

    .five-core-card {
        flex: 1 1 100%;
        height: 300px;
        min-width: unset;
    }

    .five-core-rules-wrapper:hover .five-core-card,
    .five-core-rules-wrapper:hover .five-core-card:hover {
        flex: 1 1 100%;
    }

    .five-core-card-title {
        font-size: 20px;
    }

    .five-core-card-desc p {
        font-size: 13px;
    }

    .five-core-card .five-core-card-desc {
        max-height: 200px;
    }

    .five-core-card .five-core-card-desc p {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== END: #omni-five-core-rules Section ========== */

/* ========== #timeline-new Section Height Cap ========== */
#timeline-new {
    margin-bottom: 20px;
}

#timeline-new .timeline-slide-figcaption {
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: flex-start;
    padding-top: 80px;
    padding-bottom: 11rem;
    padding-left: 80px;
    padding-right: 1.5rem;
    min-height: 770px;
    max-height: 770px;
}

#timeline-new .timeline-swiper-buttons {
    display: none !important;
}

@media (max-width: 767px) {
    #timeline-new .timeline-slide-figcaption {
        padding: 32px 20px;
        min-height: 606px;
        max-height: 630px;
        align-items: flex-start;
    }
}

/* Timeline progress bar gradient */
#timeline-new .swiper-pagination-progressbar .swiper-pagination-progressbar-fill,
#timeline-new .timeline-progress-bar .timeline-progress-bar-fill {
    background: linear-gradient(97deg, #AA2C32 0%, #2B825B 100%) !important;
}

/* Actual timeline progress element used in template-story-legacy */
#timeline-new .timeline-track-progress {
    background: linear-gradient(97deg, #AA2C32 0%, #2B825B 100%) !important;
}

/* Timeline dots follow progress gradient */
#timeline-new .timeline-thumb-dot {
    background: rgba(255, 255, 255, 0.85) !important;
}

#timeline-new .timeline-swiper-thumbs .swiper-slide-thumb-active .timeline-thumb-dot,
#timeline-new .timeline-swiper-thumbs .swiper-slide.timeline-thumb-passed .timeline-thumb-dot {
    background: linear-gradient(97deg, #AA2C32 0%, #2B825B 100%) !important;
}

/* ========== END: #timeline-new Section Height Cap ========== */