@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root {
    --bg-green: #143F2E;
    --lime-green: #84BB2F;
    --text-white: #FFFFFF;
    --font-primary: Inter;
    --font-heading: Inter;
    --font-weight-heading: 400;
    --font-size-heading: 55px;
    --font-size-paragraph: 1rem;
    --line-height-heading: 1.15;
    --line-height-paragraph: 1.5;
}
.html-body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    background-color: var(--bg-green);
    font-family: var(--font-primary);
    color: var(--text-white);
}

.scroll-container {
    width: 100vw;
    /* height: 100vh; */
    /* scroll-snap-type: y mandatory; */
    overflow-x: hidden;
    overflow-y: scroll;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; 
    -ms-overflow-style: none; 
}

.scroll-container::-webkit-scrollbar {
    display: none; 
}

.page-section {
    width: 100vw;
    height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative;
    overflow: hidden;
}
.overflow{
    overflow: hidden;
}
/* ==========================================================================
   PAGE 1: HERO SECTION
   ========================================================================== */
.section-hero {
    background-image:
        linear-gradient(
            rgba(20, 63, 46, 0.90),
            rgba(20, 63, 46, 0.90)
        ),
        url("../image-coc/hero_bg.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.grid-hero {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    grid-template-rows: 80px 1fr 80px;
    width: 100%;
    height: 100%;
    padding: 0 0;
    position: relative;
}

.watermark-container-hero {
    grid-column: 1;
    grid-row: 1 / -1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 0;
    pointer-events: none;
    z-index: 2;
}

.watermark-image-hero {
    height: 100%;
    width: auto;
    max-width: 100%;
    opacity: 0.35;
    object-fit: contain;
}

.page-content-hero {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: flex-start;
    padding-left: 90px;
    z-index: 10;
}

.logo-wrapper-hero {
    opacity: 0.95;
}

.company-logo-hero {
    max-height: 80px;
    width: auto;
    object-fit: contain;
}

.main-title-hero {
    font-family: var(--font-heading);
    color: var(--lime-green);
    display: flex;
    flex-direction: column;
    margin-top: 5px;
    font-size: 7rem;
    font-weight: var(--font-weight-heading);
    line-height: 1.05;
    letter-spacing: -1px;
}

/* ==========================================================================
   PAGE 2: PURPOSE SECTION
   ========================================================================== */
.section-purpose {
    background-color: var(--bg-green);
    overflow: hidden;
}

.grid-purpose {
    display: grid;
    grid-template-columns: 4fr 2fr 1fr 3fr;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.text-panel {
    background-color: var(--bg-green);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 80px;
    height: 100%;
    z-index: 5;
    width: 80%;
}

.main-title-purpose {
    font-family: var(--font-heading);
    color: var(--lime-green);
    margin-bottom: 50px;
    font-size: var(--font-size-heading);
    line-height: var(--line-height-heading);
    font-weight: var(--font-weight-heading);
}

.content-body p {
    font-size: var(--font-size-paragraph);
    line-height: var(--line-height-paragraph);
    margin-bottom: 25px;
    opacity: 0.9;
}

.middle-panel {
    height: 100%;
    width: 90%;
    overflow: hidden;
}

.watermark-panel {
    background-color: var(--bg-green);
    display: flex;
    justify-content: start;
    align-items: center;
    height: 100%;
    z-index: 5;
}

.watermark-image-purpose {
    max-width: 60%;
    height: auto;
    object-fit: contain;
    opacity: 0.85;
}

.right-img{
    /* display: none; */
    height: 100vh;
    width: 100%;
    object-fit: cover;
}

.image-panel {
    z-index: 2;
}

.panel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.purpose-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    object-position: left;
}

/* ==========================================================================
   PAGE 3: COMMITMENT SECTION
   ========================================================================== */
.section-commitment {
    background-color: var(--bg-green);
}

.grid-commitment {
    display: grid;
    grid-template-columns: 4fr 6fr; 
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.left-panel-commitment {
    background-color: var(--bg-green);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 40px;
    gap: 50px;
}

.circular-image-wrapper {
    width: 380px;
    height: 380px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.circular-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
}

.small-images-row {
    display: flex;
    gap: 15px;
    justify-content: center;
    width: 100vw;
}

.small-image {
    width: 200px;
    height: 120px;
    object-fit: cover;
}

.text-panel-commitment {
    background-color: #FFFFFF;
    color: var(--bg-green);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 80px;
    padding-right: 80px;
    height: 100%;
    z-index: 5;
}

.main-title-commitment {
    font-family: var(--font-heading);
    color: var(--bg-green);
    margin-bottom: 70px;
    font-size: var(--font-size-heading);
    line-height: var(--line-height-heading);
    font-weight: var(--font-weight-heading);
}

.content-body-commitment {
    width: 100%;
}

.content-body-commitment p {
    font-size: var(--font-size-paragraph);
    color: black;
    line-height: var(--line-height-paragraph);
    margin-bottom: 25px;
    opacity: 0.95;
}

.content-body-commitment p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   PAGE 4: OBJECTIVE SECTION
   ========================================================================== */
.section-objective {
    background-color: #FFFFFF;
}

.grid-objective {
    display: grid;
    grid-template-columns: 6fr 4fr;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.text-panel-objective {
    background-color: #FFFFFF;
    color: var(--bg-green);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 80px;
    height: 100%;
    overflow-y: auto;
    z-index: 5;
}

.main-title-objective {
    font-family: var(--font-heading);
    color: var(--bg-green);
    font-size: var(--font-size-heading);
    line-height: var(--line-height-heading);
    font-weight: var(--font-weight-heading);
}

.subtitle-objective {
    font-family: var(--font-primary);
    color: var(--bg-green);
    font-size: 1rem;
    font-weight: 400;
    opacity: 0.9;
}

.list-objective {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 10px;
}

.list-item-objective {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 5px 0;
    border-bottom: 1px solid #84BB2F;
}

.list-item-objective:last-child {
    border-bottom: none;
}

.bullet-dot {
    color: var(--lime-green);
    font-size: 0.7rem;
    margin-top: 6px;
}

.list-item-objective p {
    font-size: var(--font-size-paragraph);
    line-height: var(--line-height-paragraph);
    color: var(--bg-green);
    opacity: 0.9;
    margin: 0;
}

.visual-panel-objective {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    height: 100%;
    width: 100%;
    gap: 10px;
    z-index: 2;
}

.objective-image-wrapper {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.objective-image-wrapper .panel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==========================================================================
   PAGE 5: SCOPE SECTION
   ========================================================================== */
.section-scope {
    background-color: #FFFFFF;
}

.grid-scope {
    display: grid;
    grid-template-columns: 4fr 6fr;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.text-panel-scope {
    background-color: #FFFFFF;
    color: var(--bg-green);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px 80px;
    height: 100%;
    overflow-y: auto;
    z-index: 5;
}

.main-title-scope {
    font-family: var(--font-heading);
    color: var(--bg-green);
    font-size: var(--font-size-heading);
    line-height: var(--line-height-heading);
    font-weight: var(--font-weight-heading);
    margin-bottom: 40px;
}

.content-body-scope {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.scope-block {
    display: flex;
    flex-direction: column;
}

.scope-intro, .scope-summary {
    font-size: var(--font-size-paragraph);
    line-height: var(--line-height-paragraph);
    color: var(--bg-green);
}

.scope-summary {margin-bottom: 0;
    font-weight: 500;
    font-size: var(--font-size-paragraph);
    line-height: var(--line-height-paragraph);}

.scope-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bullet-item {
    font-size: var(--font-size-paragraph);
    line-height: var(--line-height-paragraph);
    color: var(--bg-green);
    opacity: 0.9;
    padding-left: 10px;
}

.visual-panel-scope {
    background-color: var(--bg-green);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    height: 100%;
    width: 100%;
    gap: 0;
    z-index: 2;
}

.scope-card-col {
    display: grid;
    grid-template-rows: 1fr auto;
    height: 100%;
    overflow: hidden;
}

.scope-image-wrapper {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.scope-image-wrapper .panel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.scope-label-card {
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.35;
}

.card-dark {
    background-color: var(--bg-green);
    color: var(--text-white);
}

.card-lime {
    background-color: var(--lime-green);
    color: black;
}

/* ==========================================================================
   PAGE 6: POLICY FRAMEWORK SECTION
   ========================================================================== */
.section-framework {
    background-color: #FFFFFF;
}

.grid-framework {
    display: grid;
    grid-template-columns: 6fr 3.8fr 0.2fr;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.text-panel-framework {
    background-color: #FFFFFF;
    color: var(--bg-green);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px 80px;
    height: 100%;
    overflow-y: auto;
    z-index: 5;
}

.main-title-framework {
    font-family: var(--font-heading);
    color: var(--bg-green);
    margin-bottom: 25px;
    font-size: var(--font-size-heading);
    line-height: var(--line-height-heading);
    font-weight: var(--font-weight-heading);
}

.content-body-framework {
    width: 100%;
}

.content-body-framework p {
    font-size: var(--font-size-paragraph);
    color: black;
    line-height: var(--line-height-paragraph);
    margin-bottom: 20px;
    opacity: 0.95;
}

.content-body-framework p:last-child {
    margin-bottom: 0;
}

.visual-panel-framework {
    background-color: var(--bg-green);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px;
    gap: 40px;
    height: 100%;
    z-index: 2;
}

.circular-wrapper-framework {
    position: relative;
    width: 508px;
    height: 508px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.circular-img-framework {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.logo-badge-framework {
    position: absolute;
    width: 170px;
    height: 170px;
    background-color: var(--lime-green);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.badge-logo-img {
    max-width: 50%;
    height: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.stats-row-framework {
    display: flex;
    gap: 20px;
    justify-content: center;
    width: 100%;
}

.stat-card {
    flex: 1;
    border: 1.5px solid rgba(255, 255, 255, 0.40);
    border-radius: 25px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.stat-num {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 500;
    color: var(--text-white);
    line-height: 1.1;
    margin-bottom: 5px;
}

.stat-label {
    font-family: var(--font-primary);
    font-size: 0.50rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.5px;
}

/* ==========================================================================
   PAGE 7: CODE OF CONDUCT POLICY SECTION
   ========================================================================== */
.section-conduct {
    background-color: var(--bg-green);
}

.grid-conduct {
    display: grid;
    grid-template-columns: 6fr 4fr;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.text-panel-conduct {
    background-color: #FFFFFF;
    color: var(--bg-green);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 80px;
    padding-right: 180px;
    height: 100%;
    z-index: 5;
}

.main-title-conduct {
    font-family: var(--font-heading);
    color: var(--bg-green);
    margin-bottom: 30px;
    font-size: var(--font-size-heading);
    line-height: var(--line-height-heading);
    font-weight: var(--font-weight-heading);
    padding-right: 10px;
}

.content-body-conduct {
    width: 80%;
}

.content-body-conduct p {
    font-size: var(--font-size-paragraph);
    color: black;
    line-height: var(--line-height-paragraph);
    opacity: 0.95;
    padding-right: 10px;
}

.middle-panel-conduct {
    position: absolute;
    left: 40%;
    bottom: 0;
    width: 20%;
    height: 80%;
    z-index: 10;
    overflow: hidden;
}

.middle-panel-conduct img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 40% top;
}

/* ==========================================================================
   PAGE 8: ANTI-BRIBERY, CORRUPTION, AND FRAUD POLICY SECTION
   ========================================================================== */
.section-bribery {
    background-color: var(--bg-green);
    display: flex;
    align-items: center;
}

.grid-bribery {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    max-height: 850px;
    margin: auto 0;
    overflow: hidden;
    position: relative;
    padding: 0px 0px 80px 80px;
    justify-content: space-between;
}

.top-row-bribery {
    display: grid;
    grid-template-columns: 3fr 5.7fr;
    width: 100%;
    align-items: center;
    gap: 40px;
}

.text-panel-bribery {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.main-title-bribery {
    font-family: var(--font-heading);
    color: var(--text-white);
    font-size: var(--font-size-heading);
    font-weight: var(--font-weight-heading);
    line-height: var(--line-height-heading);
}

.visual-panel-bribery {
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.visual-panel-bribery .panel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% 44%;
    display: block;
}

.middle-row-bribery {
    width: 100%;
    margin-top: 30px;
    margin-bottom: 40px;
}

.desc-bribery {
    font-family: var(--font-primary);
    font-size: var(--font-size-paragraph);
    color: var(--text-white);
    line-height: var(--line-height-paragraph);
    opacity: 0.9;
    /* padding-right: 20px; */
}

.bottom-row-bribery {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding-bottom: 20px;
    padding-right: 80px;
}

/* Timeline Container */
.timeline-container-bribery {
    position: relative;
    width: 100%;
    padding-top: 15px;
}

.timeline-line {
    position: absolute;
    top: 26px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: rgb(255, 255, 255);
    z-index: 1;
}

.timeline-dots {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    position: relative;
    z-index: 2;
    width: 100%;
}

.timeline-dot-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.timeline-dot {
    width: 24px;
    height: 24px;
    background-color: var(--lime-green);
    border-radius: 50%;
    margin-bottom: 20px;
}

.timeline-label {
    font-family: var(--font-primary);
    font-size: 1.1rem;
    color: var(--text-white);
    text-transform: uppercase;
    line-height: 1.20;
    max-width: 90%;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   PAGE 9: GIFTS, BENEFITS AND HOSPITALITY POLICY SECTION
   ========================================================================== */
.section-gifts {
    background-color: var(--bg-green);
}

.grid-gifts {
    display: grid;
    grid-template-rows: 6fr 4fr;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background-image: linear-gradient(rgba(20, 63, 46, 0.45), rgba(20, 63, 46, 0.45)), url('../image-coc/gifts_bg.webp');
    background-size: cover;
    background-position: center;
}

.top-row-gifts {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
}

.gifts-title-overlay {
    width: 100%;
    padding: 0px 80px 40px 80px;
}

.main-title-gifts {
    font-family: var(--font-heading);
    color: var(--text-white);
    font-size: var(--font-size-heading);
    font-weight: var(--font-weight-heading);
    line-height: var(--line-height-heading);
}

.bottom-row-gifts {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    width: 85%;
    height: 100%;
    z-index: 10;
    margin-left: 80px;
}

.gifts-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 60px;
    height: 100%;
}

.gifts-col-intention {
    background-color: var(--bg-green);
    color: var(--text-white);
}

.gifts-col-intention .gifts-heading {
    color: var(--text-white);
}

.gifts-col-intention .gifts-desc {color: var(--text-white);
    opacity: 0.9;
    font-size: var(--font-size-paragraph);
    line-height: var(--line-height-paragraph);}

.gifts-col-conflict {
    background-color: var(--lime-green);
    color: var(--bg-green);
}

.gifts-col-conflict .gifts-heading {
    color: var(--bg-green);
}

.gifts-col-conflict .gifts-desc {color: var(--bg-green);
    opacity: 0.95;
    font-size: var(--font-size-paragraph);
    line-height: var(--line-height-paragraph);}

.gifts-col-transparency {
    background-color: #FFFFFF;
    color: var(--bg-green);
}

.gifts-col-transparency .gifts-heading {
    color: var(--bg-green);
}

.gifts-col-transparency .gifts-desc {color: var(--bg-green);
    opacity: 0.95;
    font-size: var(--font-size-paragraph);
    line-height: var(--line-height-paragraph);}

.gifts-heading {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    text-transform: uppercase;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.gifts-desc {
    font-family: var(--font-primary);
    font-size: var(--font-size-paragraph);
    line-height: var(--line-height-paragraph);
}

/* ==========================================================================
   PAGE 10: PRIVACY, CONFIDENTIALITY AND INFORMATION HANDLING SECTION
   ========================================================================== */
.section-privacy {
    background-color: #FFFFFF;
}

.grid-privacy {
    display: grid;
    grid-template-columns: 6fr 3.6fr;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.text-panel-privacy {
    background-color: var(--bg-green);
    color: var(--text-white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 80px 40px 80px;
    height: 100%;
    overflow-y: auto;
    z-index: 5;
}

.main-title-privacy {
    font-family: var(--font-heading);
    color: var(--text-white);
    font-size: var(--font-size-heading);
    font-weight: var(--font-weight-heading);
    line-height: var(--line-height-heading);
    margin-bottom: 35px;
}

.content-body-privacy {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.privacy-desc {
    font-family: var(--font-primary);
    font-size: var(--font-size-paragraph);
    color: var(--text-white);
    line-height: var(--line-height-paragraph);
    opacity: 0.9;
}

.visual-panel-privacy {
    background-color: #FFFFFF;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 10px;
    padding: 0px 0px 0px 70px;
    height: 100%;
    width: 100%;
    z-index: 2;
}

.privacy-image-wrapper {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.privacy-image-wrapper .panel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==========================================================================
   PAGE 11: MODERN SLAVERY SECTION
   ========================================================================== */
.section-slavery {
    background-color: #FFFFFF;
}

.grid-slavery {
    display: grid;
    grid-template-rows: 6fr 4fr;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.top-right-block {
    background-color: var(--bg-green);
    width: 72%;
    height: 11%;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 5;
}

.top-row-slavery {
    background-color: #FFFFFF;
    color: var(--bg-green);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 30px 30px 80px;
    height: 100%;
    overflow-y: auto;
    z-index: 5;
}

.main-title-slavery {
    font-family: var(--font-heading);
    color: var(--bg-green);
    font-size: var(--font-size-heading);
    font-weight: var(--font-weight-heading);
    line-height: var(--line-height-heading);
    margin-bottom: 25px;
    padding-top: 20px;
}

.content-body-slavery {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.slavery-desc {
    font-family: var(--font-primary);
    font-size: var(--font-size-paragraph);
    color: black;
    line-height: var(--line-height-paragraph);
    opacity: 0.95;
}

.bottom-row-slavery {
    display: grid;
    grid-template-columns: 5fr 0.5fr 2fr;
    gap: 20px;
    padding: 10px 0px 0px 0px;
    height: 100%;
    width: 100%;
    z-index: 2;
}

.slavery-green-block {
    background-color: var(--bg-green);
    height: 100%;
    width: 100%;
}

.slavery-image-wrapper {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.slavery-image-wrapper .panel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==========================================================================
   PAGE 12: GENDER EQUALITY SECTION
   ========================================================================== */
.section-gender {
    background-color: #FFFFFF;
}

.grid-gender {
    display: grid;
    grid-template-columns: 5fr 4.6fr;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.text-panel-gender {
    background-color: var(--bg-green);
    color: var(--text-white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 80px 40px 80px;
    height: 100%;
    overflow-y: auto;
    z-index: 5;
}

.main-title-gender {
    font-family: var(--font-heading);
    color: var(--text-white);
    font-size: var(--font-size-heading);
    font-weight: var(--font-weight-heading);
    line-height: var(--line-height-heading);
    margin-bottom: 35px;
}

.content-body-gender {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.gender-desc {
    font-family: var(--font-primary);
    font-size: var(--font-size-paragraph);
    color: var(--text-white);
    line-height: var(--line-height-paragraph);
    opacity: 0.95;
}

.visual-panel-gender {
    background-color: var(--text-white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 0px 0px 30px;
    height: 100%;
    width: 100%;
    z-index: 2;
}

.gender-image-wrapper {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.gender-image-wrapper .panel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==========================================================================
   PAGE 13: SOCIAL ACCOUNTABILITY SECTION
   ========================================================================== */
.section-social {
    background-color: #FFFFFF;
}

.grid-social {
    display: grid;
    grid-template-rows: 3.5fr 2.2fr 4.3fr;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.social-top-row {
    display: grid;
    grid-template-columns: 7fr 3fr;
    height: 100%;
}

.social-title-panel {
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 80px;
    height: 100%;
}

.main-title-social {
    font-family: var(--font-heading);
    color: var(--bg-green);
    font-size: var(--font-size-heading);
    font-weight: var(--font-weight-heading);
    line-height: var(--line-height-heading);
}

.social-text-panel {
    background-color: var(--bg-green);
    color: var(--text-white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px 40px;
    height: 100%;
    position: relative;
}

.social-desc {
    font-family: var(--font-primary);
    font-size: var(--font-size-paragraph);
    color: var(--text-white);
    line-height: var(--line-height-paragraph);
    margin: 0;
}

.social-middle-row {
    background-color: var(--lime-green);
    position: relative;
    height: 100%;
    padding: 15px 80px;
    display: flex;
    align-items: center;
}

.social-cards-container {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
    width: 100%;
    position: relative;
    z-index: 3;
    align-items: center;
}

.social-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.social-timeline-connector {
    width: 100%;
    align-self: flex-end;
    padding-bottom: 12px;
    display: flex;
    justify-content: center;
}

.social-timeline-line {
    width: 80%;
    height: 1px;
    background-color: #FFFFFF;
    position: relative;
}

.social-timeline-line::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 4px;
    background-color: #FFFFFF;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.social-timeline-line::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 4px;
    height: 4px;
    background-color: #FFFFFF;
    border-radius: 50%;
    transform: translate(50%, -50%);
}

.social-card-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 12px;
    fill: var(--bg-green);
}

.social-card-title {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.social-card-title.text-white {
    color: var(--text-white);
}

.social-card-title.text-green {
    color: var(--bg-green);
}

.social-bottom-row {
    display: grid;
    grid-template-columns: 7fr 3fr;
    height: 100%;
}

.social-image-panel {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.social-image-panel .panel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==========================================================================
   PAGE 14: SEXUAL HARASSMENT PREVENTION SECTION
   ========================================================================== */
.section-harassment {
    background-color: #FFFFFF;
}

.grid-harassment {
    display: grid;
    grid-template-columns: 4fr 3fr 3fr;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.harassment-left {
    background-color: var(--bg-green);
    color: var(--text-white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 80px;
    height: 100%;
}

.main-title-harassment {
    font-family: var(--font-heading);
    color: var(--text-white);
    font-size: var(--font-size-heading);
    font-weight: var(--font-weight-heading);
    line-height: var(--line-height-heading);
    margin-bottom: 25px;
}

.harassment-left-desc {
    font-family: var(--font-primary);
    font-size: var(--font-size-paragraph);
    color: var(--text-white);
    line-height: var(--line-height-paragraph);
    opacity: 0.9;
}

.harassment-middle {
    background-color: #FFFFFF;
    color: var(--bg-green);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0px;
    height: 100%;
}

.harassment-right {
    background-color: var(--lime-green);
    color: var(--bg-green);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0px;
    height: 100%;
    position: relative;
}

.harassment-circle-wrapper {
    width: 100%;
    aspect-ratio: 1;
    max-width: 400px;
    max-height: 400px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 20px;
}

.harassment-circle-wrapper .circle-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.harassment-column-title {
    font-family: var(--font-heading);
    color: var(--bg-green);
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 20px;
}

.harassment-column-desc {
    font-family: var(--font-primary);
    font-size: var(--font-size-paragraph);
    color: #000000;
    line-height: var(--line-height-paragraph);
    opacity: 0.95;
    max-width: 320px;
}

/* ==========================================================================
   PAGE 15: PAYROLL ADVANCE & GRIEVANCE SECTION
   ========================================================================== */
.section-payroll {
    background-color: #FFFFFF;
}

.grid-payroll {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 15px;
    padding: 0px;
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
    overflow: hidden;
}

.payroll-text-panel-top {
    background-color: var(--bg-green);
    color: var(--text-white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px 80px;
    height: 100%;
}

.payroll-text-panel-bottom {
    background-color: var(--lime-green);
    color: var(--bg-green);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px 80px;
    height: 100%;
}

.payroll-title-top {
    font-family: var(--font-heading);
    color: var(--text-white);
    font-size: 60px;
    font-weight: var(--font-weight-heading);
    margin-bottom: 10px;
}

.payroll-title-bottom {
    font-family: var(--font-heading);
    color: var(--bg-green);
    font-size: 50px;
    font-weight: var(--font-weight-heading);
    margin-bottom: 10px;
}

.payroll-desc-top {
    font-family: var(--font-primary);
    font-size: var(--font-size-paragraph);
    color: var(--text-white);
    line-height: var(--line-height-paragraph);
    opacity: 0.95;
}

.payroll-desc-bottom {
    font-family: var(--font-primary);
    font-size: var(--font-size-paragraph);
    color: #000000;
    line-height: var(--line-height-paragraph);
    opacity: 0.95;
}

.payroll-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.payroll-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.payroll-link {
    color: inherit;
    text-decoration: underline;
    font-weight: 500;
}

/* ==========================================================================
   PAGE 16: DOMESTIC / FAMILY VIOLENCE WORKPLACE POLICY
   ========================================================================== */
.section-domestic {
    background-color: #FFFFFF;
}

.grid-domestic {
    display: grid;
    grid-template-rows: 5fr 0.7fr 4.3fr;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.domestic-top-row {
    display: grid;
    grid-template-columns: 1.4fr 0.6fr;
    height: 100%;
}

.domestic-title-panel {
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 80px;
    height: 100%;
}

.main-title-domestic {
    font-family: var(--font-heading);
    color: var(--bg-green);
    font-size: var(--font-size-heading);
    font-weight: var(--font-weight-heading);
    line-height: var(--line-height-heading);
}

.domestic-text-panel {
    background-color: var(--bg-green);
    color: var(--text-white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px 40px;
    height: 100%;
    position: relative;
}

.domestic-desc {
    font-family: var(--font-primary);
    font-size: var(--font-size-paragraph);
    color: var(--text-white);
    line-height: var(--line-height-paragraph);
    margin: 0;
}

.domestic-middle-row {
    background-color: var(--lime-green);
    position: relative;
    height: 100%;
    padding: 15px 80px;
    display: flex;
    align-items: center;
}

.domestic-cards-container {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto;
    width: 100%;
    position: relative;
    z-index: 3;
    align-items: center;
}

.domestic-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.domestic-card-title {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-white);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
}

.domestic-timeline-connector {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.domestic-timeline-line {
    width: 80%;
    height: 1px;
    background-color: #FFFFFF;
    position: relative;
}

.domestic-timeline-line::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 5px;
    background-color: #FFFFFF;
    border-radius: 50%;
}

.domestic-bottom-row {
    display: grid;
    grid-template-columns: 1.4fr 0.6fr;
    height: 100%;
}

.domestic-image-panel {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.domestic-image-panel .panel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    object-position: center 52%;
}

.domestic-bottom-icon {
    width: 85px;
    height: 85px;
    object-fit: contain;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

/* ==========================================================================
   PAGE 17: PERSONNEL & FATIGUE MANAGEMENT
   ========================================================================== */
.section-personnel {
    background-color: #FFFFFF;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.personnel-top-banner {
    position: absolute;
    top: 0;
    right: 0;
    left: 40%;
    height: 80px;
    background-color: var(--bg-green);
    z-index: 3;
}

.personnel-bottom-banner {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60%;
    height: 80px;
    background-color: var(--bg-green);
    z-index: 3;
}

.personnel-body {
    display: flex;
    flex: 1;
    width: 100%;
    overflow: hidden;
}

.personnel-left {
    flex: 0 0 60%;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 0px 80px 80px;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
}

.personnel-right {
    flex: 0 0 40%;
    position: relative;
    overflow: hidden;
}

.personnel-right .panel-image {
    width: 100%;
    height: 90%;
    object-fit: cover;
    object-position: center;
    display: block;
    margin-left: 90px;
    transform: translateY(20%);
}

.main-title-personnel {
    font-family: var(--font-heading);
    color: var(--bg-green);
    font-size: var(--font-size-heading);
    font-weight: var(--font-weight-heading);
    line-height: var(--line-height-heading);
    margin-bottom: 20px;
}

.personnel-desc {
    font-family: var(--font-primary);
    font-size: var(--font-size-paragraph);
    color: #000000;
    line-height: var(--line-height-paragraph);
    margin: 0;
}

/* ==========================================================================
   PAGE 18: WORK HEALTH & SAFETY (WHS)
   ========================================================================== */
.section-whs {
    background-color: #FFFFFF;
}

.grid-whs {
    display: grid;
    grid-template-columns: 6fr 3.9fr 0.1fr;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.whs-left {
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 80px 0px 80px;
    height: 100%;
}

.whs-right {
    background-color: var(--bg-green);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    position: relative;
}

.whs-circle-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    max-width: 520px;
    border-radius: 50%;
    overflow: hidden;
}

.whs-circle-container .circle-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    object-position: left;
}

.whs-circle-badge {
    position: absolute;
    right: 30%;
    top: 30%;
    width: 38%;
    aspect-ratio: 1;
    background-color: var(--lime-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.whs-badge-icon {
    max-width: 50%;
    height: auto;
    object-fit: contain;
}

.main-title-whs {
    font-family: var(--font-heading);
    color: var(--bg-green);
    font-size: var(--font-size-heading);
    font-weight: var(--font-weight-heading);
    margin-bottom: 20px;
    line-height: var(--line-height-heading);
}

.whs-desc {
    font-family: var(--font-primary);
    font-size: var(--font-size-paragraph);
    color: #000000;
    line-height: var(--line-height-paragraph);
    margin: 0;
}

/* ==========================================================================
   PAGE 19: PSYCHOSOCIAL RISK MANAGEMENT PROCESS
   ========================================================================== */
.section-psychosocial {
    background-color: #FFFFFF;
}

.grid-psychosocial {
    display: grid;
    grid-template-rows: 7fr 1fr 2fr;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.psychosocial-top-row {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    height: 100%;
}

.psychosocial-left-panel {
    background-color: var(--bg-green);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    position: relative;
}

.psychosocial-right-panel {
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 80px 0 80px;
    height: 100%;
}

.psy-circle-container {
    position: relative;
    width: 80%;
    aspect-ratio: 1;
    max-width: 300px;
    border-radius: 50%;
    overflow: hidden;
}

.psy-circle-container .circle-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.psy-circle-badge {
    position: absolute;
    right: 30%;
    top: 30%;
    width: 38%;
    aspect-ratio: 1;
    background-color: var(--lime-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.main-title-psychosocial {
    font-family: var(--font-heading);
    color: var(--bg-green);
    font-size: var(--font-size-heading);
    font-weight: var(--font-weight-heading);
    margin-bottom: 20px;
    letter-spacing: 3px;
    line-height: var(--line-height-heading);
}

.psychosocial-desc {
    font-family: var(--font-primary);
    font-size: var(--font-size-paragraph);
    color: #000000;
    line-height: var(--line-height-paragraph);
    margin: 0;
}

.psychosocial-middle-row {
    background-color: var(--bg-green);
    padding: 10px 15px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    height: 25vh;
    align-items: center;
}

.psychosocial-middle-row .gallery-image {
    width: 90%;
    height: 90%;
    max-height: 200px;
    object-fit: cover;
    display: block;
}

.psychosocial-bottom-row {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    height: 100%;
}

/* ==========================================================================
   PAGE 20: INCIDENT AND ACCIDENT MANAGEMENT POLICY AND PROCEDURE
   ========================================================================== */
.section-incident {
    background-color: #FFFFFF;
}

.grid-incident {
    display: grid;
    grid-template-rows: 6.2fr 3.8fr;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.incident-top-row {
    display: grid;
    grid-template-columns: 4fr 3fr 3fr;
    height: 100%;
}

.incident-title-panel {
    background-color: var(--bg-green);
    color: var(--text-white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 60px;
    height: 100%;
}

.incident-text-panel {
    background-color: #FFFFFF;
    color: #000000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 50px 30px 50px 80px;
    height: 100%;
}

.incident-visual-panel {
    background-color: var(--lime-green);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    height: 100%;
}

.incident-circle-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    max-width: 550px;
    border-radius: 50%;
    overflow: hidden;
}

.incident-circle-wrapper .circle-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.incident-bottom-row {
    display: grid;
    grid-template-columns: 7fr 3fr;
    height: 100%;
}

.incident-image-panel {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.incident-image-panel .panel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    object-position: bottom;
}

.incident-green-panel {
    background-color: var(--bg-green);
    height: 100%;
}

.main-title-incident {
    font-family: var(--font-heading);
    color: var(--text-white);
    font-size: var(--font-size-heading);
    font-weight: var(--font-weight-heading);
    line-height: var(--line-height-heading);
}

.incident-desc {
    font-family: var(--font-primary);
    font-size: var(--font-size-paragraph);
    color: #000000;
    line-height: var(--line-height-paragraph);
    margin: 0;
}

/* ==========================================================================
   PAGE 21: SPILL MANAGEMENT & ENVIRONMENTAL MANAGEMENT PLAN
   ========================================================================== */
.section-spill {
    background-color: #FFFFFF;
}

.grid-spill {
    display: grid;
    grid-template-columns: 4.3fr 0.8fr 1.7fr 0.5fr;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.spill-left {
    background-color: var(--bg-green);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px 80px;
    height: 100%;
}

.spill-middle {
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.spill-right {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.spill-last {
    background-color: var(--bg-green);
}

.spill-right .panel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.spill-badge {
    width: 140px;
    height: 140px;
    background-color: var(--bg-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-title-spill {
    font-family: var(--font-heading);
    color: var(--lime-green);
    font-size: var(--font-size-heading);
    font-weight: var(--font-weight-heading);
    line-height: var(--line-height-heading);
    margin-bottom: 10px;
}

.spill-desc {
    font-family: var(--font-primary);
    font-size: var(--font-size-paragraph);
    color: var(--text-white);
    line-height: var(--line-height-paragraph);
    margin: 0;
}

/* ==========================================================================
   PAGE 22: ENVIRONMENTAL SUSTAINABILITY POLICY
   ========================================================================== */
.section-sustain {
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
}

.grid-sustain {
    display: grid;
    grid-template-columns: 0.5fr 9fr 0.5fr;
    width: 100%;
    height: 100%;
    max-height: 850px;
    margin: auto 0;
    overflow: hidden;
    position: relative;
}

.sustain-left-bar {
    background-color: var(--bg-green);
    height: 62%;
    align-self: start;
}
.sustain-right-bar {
    background-color: var(--bg-green);
    height: 66%;
    align-self: end;
}

.sustain-content {
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px 20px;
    height: 100%;
}

.sustain-image-wrapper {
    width: 100%;
    height: 28vh;
    overflow: hidden;
    position: relative;
}

.sustain-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(20, 63, 46, 0.6) 0%, rgba(20, 63, 46, 0) 100%);
    pointer-events: none;
    z-index: 1;
}

.sustain-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    
}

.main-title-sustain {
    font-family: var(--font-heading);
    color: var(--bg-green);
    font-size: var(--font-size-heading);
    font-weight: var(--font-weight-heading);
    line-height: var(--line-height-heading);
    margin-bottom: 15px;
}

.sustain-desc {
    font-family: var(--font-primary);
    font-size: var(--font-size-paragraph);
    color: #000000;
    line-height: var(--line-height-paragraph);
    /* margin: 0 0 10px 0; */
}

.sustain-desc:last-child {margin-bottom: 0;
    font-size: var(--font-size-paragraph);
    line-height: var(--line-height-paragraph);}

/* ==========================================================================
   PAGE 23: THANK YOU CLOSING PAGE
   ========================================================================== */
.section-thankyou {
    position: relative;
    background-image: linear-gradient(rgba(20, 63, 46, 0.88), rgba(20, 63, 46, 0.88)), url('../image-coc/thankyou_bg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 80px;
    box-sizing: border-box;
    overflow: hidden;
}

.thankyou-title {
    font-family: var(--font-heading);
    color: var(--lime-green);
    font-size: 110px;
    line-height: 1.0;
    font-weight: var(--font-weight-heading);
    margin: 0;
    z-index: 5;
}

.thankyou-bg-icon {
    position: absolute;
    right: 0%;
    top: 0%;
    width: 37%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.thankyou-bg-icon-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    opacity: 0.7;
}

.thankyou-footer {
    display: flex;
    gap: 80px;
    align-items: flex-end;
    z-index: 5;
}

.thankyou-footer-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.thankyou-label {
    font-family: var(--font-primary);
    color: #FFFFFF;
    opacity: 0.8;
    font-size: 1rem;
}

.thankyou-link {
    font-family: var(--font-primary);
    color: #FFFFFF;
    font-size: 1.2rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 5px;
}

.thankyou-link:hover {
    color: var(--lime-green);
}

/* ==========================================================================
   RESPONSIVE MEDIA QUERIES
   ========================================================================== */
@media (max-width: 1024px) {
    :root {
        --font-size-heading: 36px;
        --font-size-paragraph: 0.95rem;
    }

   .html-body {
        height: auto;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .scroll-container {
        width: 100vw;
        height: auto;
        scroll-snap-type: none;
        overflow-x: hidden;
        overflow-y: visible;
    }

    .page-section {
        height: auto;
        scroll-snap-align: none;
        scroll-snap-stop: unset;
        overflow: visible;
    }

    /* Page 1 Hero - Mobile Grid */
    .grid-hero {
        grid-template-columns: 1fr;
        grid-template-rows: 70px 1fr 60px;
        height: 100vh;
        padding: 0 30px;
    }

    .page-content-hero {
        grid-column: 1;
        grid-row: 2;
        padding-left: 0;
        align-items: center;
        text-align: center;
    }

    .watermark-container-hero {
        display: none;
    }

    .company-logo-hero {
        max-height: 65px;
    }
    .main-title-hero{
        width: 90%;
        font-size: 5rem;
    }

    /* Page 2 Purpose - Mobile Grid */
    .grid-purpose {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        height: auto;
    }

    .text-panel {
        padding: 50px 40px;
        height: auto;
        width: 100%;
    }

    .main-title-purpose {
        font-size: var(--font-size-heading);
    line-height: var(--line-height-heading);
        margin-bottom: 30px;
    }

    .middle-panel {
        height: 350px;
        width: 100%;
    }

    .watermark-panel {
        height: 100px;
        padding: 20px 0;
        align-items: center;
        justify-content: center;
    }

    .watermark-image-purpose {
        max-height: 60px;
    }

    /* Page 3 Commitment - Mobile Grid */
    .grid-commitment {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        height: auto;
    }

    .left-panel-commitment {
        padding: 50px 30px;
        height: auto;
        gap: 20px;
    }

    .circular-image-wrapper {
        width: 240px;
        height: 240px;
    }

    .small-image {
        width: 90px;
        height: 70px;
    }

    .text-panel-commitment {
        padding: 50px 40px;
        height: auto;
        color: var(--bg-green);
    }

    .main-title-commitment {
        font-size: var(--font-size-heading);
    line-height: var(--line-height-heading);
        margin-bottom: 30px;
    }

    .content-body-commitment {
        width: 100%;
    }

    /* Page 4 Objective - Mobile Grid */
    .grid-objective {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        height: auto;
    }

    .text-panel-objective {
        padding: 50px 40px;
        height: auto;
    }

    .main-title-objective {
        font-size: var(--font-size-heading);
    line-height: var(--line-height-heading);
    }

    .subtitle-objective {
        font-size: 1.2rem;
        margin-bottom: 20px;
    }

    .visual-panel-objective {
        grid-template-rows: unset;
        grid-template-columns: 1fr 1fr 1fr;
        height: 250px;
        padding: 10px;
        gap: 8px;
    }

    /* Page 5 Scope - Mobile Grid */
    .grid-scope {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        height: auto;
    }

    .text-panel-scope {
        padding: 50px 40px;
        height: auto;
    }

    .main-title-scope {
        font-size: var(--font-size-heading);
    line-height: var(--line-height-heading);
        margin-bottom: 30px;
    }

    .visual-panel-scope {
        grid-template-columns: 1fr 1fr 1fr;
        height: 400px;
    }

    .scope-label-card {
        height: 120px;
        font-size: 0.85rem;
        padding: 10px;
    }

    /* Page 6 Framework - Mobile Grid */
    .grid-framework {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        height: auto;
    }

    .text-panel-framework {
        padding: 50px 40px;
        height: auto;
    }

    .main-title-framework {
        font-size: var(--font-size-heading);
    line-height: var(--line-height-heading);
        margin-bottom: 30px;
    }

    .visual-panel-framework {
        padding: 50px 40px;
        height: auto;
        gap: 30px;
    }

    .circular-wrapper-framework {
        width: 260px;
        height: 260px;
    }

    .logo-badge-framework {
        width: 90px;
        height: 90px;
    }

    .stat-card {
        padding: 15px;
    }

    .stat-num {
        font-size: 2.2rem;
    }

    /* Page 7 Conduct - Mobile Grid */
    .grid-conduct {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        height: auto;
    }

    .text-panel-conduct {
        padding: 50px 40px;
        height: auto;
    }

    .main-title-conduct {
        font-size: var(--font-size-heading);
    line-height: var(--line-height-heading);
        margin-bottom: 30px;
    }

    .middle-panel-conduct {
        position: relative;
        left: auto;
        bottom: auto;
        width: 100%;
        height: 350px;
    }

    .right-panel-conduct {
        height: 200px;
        position: relative;
    }

    /* Page 8 Bribery - Mobile Grid */
    .section-bribery {
        display: block;
    }

    .grid-bribery {
        padding: 20px;
        justify-content: flex-start;
        gap: 30px;
        height: auto;
        overflow-y: visible;
    }

    .top-row-bribery {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .text-panel-bribery {
        height: auto;
    }

    .main-title-bribery {
        font-size: var(--font-size-heading);
    line-height: var(--line-height-heading);
        margin-bottom: 20px;
    }

    .visual-panel-bribery {
        height: 300px;
    }

    .middle-row-bribery {
        margin-top: 10px;
        margin-bottom: 20px;
        width: 100%;
    }
    .bottom-row-bribery {
        padding-right: 20px;
    }

    .timeline-container-bribery {
        margin-top: 10px;
        padding-left: 0;
        padding-right: 20px;
    }

    .timeline-line {
        top: 24px;
    }

    .timeline-dots {
        gap: 15px;
    }

    .timeline-dot {
        width: 20px;
        height: 20px;
        margin-bottom: 15px;
        margin-left: 2px;
    }

    .timeline-label {
        font-size: 0.85rem;
        max-width: 100%;
    }

    /* Page 9 Gifts - Tablet */
    .grid-gifts {
        display: grid;
        grid-template-rows: auto auto;
        height: auto;
        overflow-y: visible;
    }

    .top-row-gifts {
        height: 350px;
        display: flex;
        align-items: flex-end;
    }

    .gifts-title-overlay {
        padding: 40px;
    }

    .main-title-gifts {
        font-size: var(--font-size-heading);
        line-height: var(--line-height-heading);
    }

    .bottom-row-gifts {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .gifts-col {
        height: auto;
        padding: 45px 40px;
    }

    .gifts-heading {
        margin-bottom: 10px;
    }

    /* Page 10 Privacy - Tablet */
    .grid-privacy {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        height: auto;
    }

    .text-panel-privacy {
        padding: 50px 40px;
        height: auto;
    }

    .main-title-privacy {
        font-size: var(--font-size-heading);
    line-height: var(--line-height-heading);
        margin-bottom: 25px;
    }

    .visual-panel-privacy {
        display: grid;
        grid-template-rows: unset;
        grid-template-columns: 1fr 1fr 1fr;
        height: 250px;
        padding: 10px;
        gap: 8px;
        background-color: #FFFFFF;
    }

    /* Page 11 Slavery - Tablet */
    .grid-slavery {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        height: auto;
    }

    .top-right-block {
        display: none;
    }

    .top-row-slavery {
        padding: 50px 40px 30px 40px;
        height: auto;
    }

    .main-title-slavery {
        font-size: var(--font-size-heading);
    line-height: var(--line-height-heading);
        margin-bottom: 25px;
    }

    .bottom-row-slavery {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        padding: 0 40px 40px 40px;
        height: 250px;
    }

    .bottom-row-slavery .slavery-green-block {
        display: none;
    }

    /* Page 12 Gender - Tablet */
    .grid-gender {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        height: auto;
    }

    .text-panel-gender {
        padding: 50px 40px;
        height: auto;
    }

    .main-title-gender {
        font-size: var(--font-size-heading);
    line-height: var(--line-height-heading);
        margin-bottom: 25px;
    }

    .visual-panel-gender {
        height: 350px;
        padding: 20px;
    }

    /* Page 13 Social - Tablet */
    .grid-social {
        display: grid;
        grid-template-rows: auto auto auto;
        height: auto;
    }

    .social-top-row {
        grid-template-columns: 1fr;
        height: auto;
    }

    .social-title-panel {
        padding: 50px 40px;
        height: auto;
    }

    .main-title-social {
        font-size: var(--font-size-heading);
    line-height: var(--line-height-heading);
    }

    .social-text-panel {
        padding: 40px;
        height: auto;
    }

    .social-middle-row {
        height: auto;
        padding: 40px;
        display: block;
    }

    .social-timeline-line,
    .social-timeline-connector {
        display: none;
    }

    .social-cards-container {
        grid-template-columns: 1fr 1fr;
        gap: 30px 20px;
    }

    .social-card {
        padding: 10px;
    }

    .social-card-icon {
        width: 45px;
        height: 45px;
    }

    .social-bottom-row {
        grid-template-columns: 1fr;
        height: auto;
    }

    .social-image-panel {
        height: 300px;
    }

    /* Page 14 Harassment - Tablet */
    .grid-harassment {
        grid-template-columns: 1fr;
        height: auto;
    }

    .harassment-left {
        padding: 50px 40px;
        height: auto;
    }

    .main-title-harassment {
        font-size: var(--font-size-heading);
    line-height: var(--line-height-heading);
        margin-bottom: 25px;
    }

    .harassment-middle,
    .harassment-right {
        padding: 60px 40px;
        height: auto;
    }

    .harassment-circle-wrapper {
        width: 250px;
        height: 250px;
        aspect-ratio: unset;
    }

    /* Page 15 Payroll - Tablet */
    .grid-payroll {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 20px;
        padding: 20px;
        height: auto;
    }

    .payroll-text-panel-top,
    .payroll-text-panel-bottom {
        padding: 50px 40px;
        height: auto;
    }

    .payroll-title-top,
    .payroll-title-bottom {
        /* font-size: 2rem; */
        font-size: var(--font-size-heading);
        margin-bottom: 25px;
    }

    .payroll-image-wrapper {
        height: 350px;
    }

    /* Page 16 Domestic - Tablet */
    .grid-domestic {
        display: grid;
        grid-template-rows: auto auto auto;
        height: auto;
    }

    .domestic-top-row {
        grid-template-columns: 1fr;
        height: auto;
    }

    .domestic-title-panel {
        padding: 50px 40px;
        height: auto;
    }

    .main-title-domestic {
        font-size: var(--font-size-heading);
    line-height: var(--line-height-heading);
    }

    .domestic-text-panel {
        padding: 40px;
        height: auto;
    }

    .domestic-middle-row {
        height: auto;
        padding: 40px;
        display: block;
    }

    .domestic-timeline-line,
    .domestic-timeline-connector {
        display: none;
    }

    .domestic-cards-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .domestic-card-title {
        font-size: 1.4rem;
    }

    .domestic-bottom-row {
        grid-template-columns: 1fr;
        height: auto;
    }

    .domestic-image-panel {
        height: 300px;
    }

    /* Page 17 Personnel - Tablet */
    .section-personnel {
        height: auto;
        /* min-height: 100vh; */
    }

    .personnel-body {
        flex-direction: column;
    }

    .personnel-left {
        flex: none;
        padding: 50px 40px;
    }

    .main-title-personnel {
        font-size: var(--font-size-heading);
        line-height: var(--line-height-heading);
    }

    .personnel-top-banner,
    .personnel-bottom-banner {
        display: none;
    }

    .personnel-right {
        /* flex: none; */
        height: 80vh;
    }

    /* Page 18 WHS - Tablet */
    .grid-whs {
        grid-template-columns: 1fr;
        height: auto;
    }

    .whs-left {
        padding: 50px 40px;
        height: auto;
    }

    .main-title-whs {
        font-size: var(--font-size-heading);
    line-height: var(--line-height-heading);
    }

    .whs-right {
        padding: 60px 40px;
        height: auto;
    }

    .whs-circle-container {
        width: 320px;
        height: 320px;
        aspect-ratio: unset;
        margin: 0 auto;
    }

    /* Page 19 Psychosocial - Tablet */
    .grid-psychosocial {
        display: grid;
        grid-template-rows: auto auto auto;
        height: auto;
    }

    .psychosocial-top-row {
        grid-template-columns: 1fr;
        height: auto;
    }

    .psychosocial-left-panel {
        padding: 60px 40px;
        height: auto;
    }

    .psy-circle-container {
        width: 320px;
        height: 320px;
        aspect-ratio: unset;
        margin: 0 auto;
    }

    .psychosocial-right-panel {
        padding: 50px 40px;
        height: auto;
    }

    .main-title-psychosocial {
        font-size: var(--font-size-heading);
    line-height: var(--line-height-heading);
    }

    .psychosocial-middle-row {
        height: auto;
        padding: 20px 40px;
        grid-template-columns: repeat(4, 1fr);
    }

    .psychosocial-middle-row .gallery-image {
        max-height: 150px;
    }

    .psychosocial-bottom-row {
        grid-template-columns: 1fr;
        height: auto;
    }

    /* Page 20 Incident - Tablet */
    .grid-incident {
        display: grid;
        grid-template-rows: auto auto;
        height: auto;
    }

    .incident-top-row {
        grid-template-columns: 1fr;
        height: auto;
    }

    .incident-title-panel {
        padding: 50px 40px;
        height: auto;
    }

    .main-title-incident {
        font-size: var(--font-size-heading);
        line-height: var(--line-height-heading);
    }

    .incident-text-panel {
        padding: 50px 40px;
        height: auto;
    }

    .incident-visual-panel {
        padding: 60px 40px;
        height: auto;
    }

    .incident-circle-wrapper {
        width: 100%;
        max-width: 250px;
        aspect-ratio: 1;
        margin: 0 auto;
    }

    .incident-bottom-row {
        grid-template-columns: 1fr;
        height: auto;
    }

    .incident-image-panel {
        height: 300px;
    }
    

    .incident-green-panel {
        display: none;
    }

    /* Page 21 Spill - Tablet */
    .grid-spill {
        grid-template-columns: 1fr;
        height: auto;
    }

    .spill-left {
        padding: 50px 40px;
        height: auto;
    }

    .main-title-spill {
        font-size: var(--font-size-heading);
    line-height: var(--line-height-heading);
    }

    .spill-middle {
        padding: 50px 40px;
        height: auto;
        background-color: #FFFFFF;
    }

    .spill-badge {
        width: 120px;
        height: 120px;
        margin: 0 auto;
    }

    .spill-right {
        height: 350px;
    }

    /* Page 22 Sustain - Tablet */
    .section-sustain {
        display: block;
    }

    .grid-sustain {
        grid-template-columns: 1fr;
        height: auto;
    }

    .sustain-left-bar,
    .sustain-right-bar {
        display: none;
    }

    .sustain-content {
        padding: 10px;
        /* height: auto; */
    }

    .main-title-sustain {
        font-size: var(--font-size-heading);
    line-height: var(--line-height-heading);
        margin-top: 30px;
    }

    .main-title-sustain:first-child {
        margin-top: 0;
    }

    .sustain-image-wrapper {
        height: 350px;
        margin: 30px 0;
    }

    /* Page 23 Thank You - Tablet */
    .section-thankyou {
        height: auto;
        min-height: 100vh;
        padding: 60px 40px;
        justify-content: flex-start;
        gap: 60px;
    }

    .thankyou-title {
        font-size: 5.5rem;
    }

    .thankyou-bg-icon {
        width: 300px;
        height: 300px;
        right: 40px;
        top: 40px;
        opacity: 0.1;
    }

    .thankyou-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 25px;
        margin-top: 40px;
    }
}

@media (max-width: 768px) {
    /* Page 11 Slavery - Intermediate/Tablet Portrait */
    .bottom-row-slavery {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        height: 400px;
    }
}

@media (max-width: 480px) {
    :root {
        --font-size-heading: 28px;
        --font-size-paragraph: 0.85rem;
    }

    /* Page 1 Hero */
    .grid-hero {
        padding: 0 20px;
    }

    .title-light-hero {
        font-size: 3rem;
    }

    .title-bold-hero {
        font-size: 4.2rem;
    }

    /* Page 2 Purpose */
    .text-panel {
        padding: 40px 25px;
    }

    .main-title-purpose {
        font-size: var(--font-size-heading);
    line-height: var(--line-height-heading);
    }

    .content-body p {
        font-size: var(--font-size-paragraph);
    line-height: var(--line-height-paragraph);
    }

    .middle-panel {
        height: 280px;
    }

    .right-panel {
        height: 320px;
    }

    /* Page 3 Commitment */
    .left-panel-commitment {
        padding: 40px 20px;
    }

    .circular-image-wrapper {
        width: 180px;
        height: 180px;
    }

    .small-image {
        width: 75px;
        height: 60px;
        gap: 10px;
    }

    .text-panel-commitment {
        padding: 40px 25px;
    }

    .main-title-commitment {
        font-size: var(--font-size-heading);
    line-height: var(--line-height-heading);
    }

    .content-body-commitment p {
        font-size: var(--font-size-paragraph);
    line-height: var(--line-height-paragraph);
    }

    /* Page 4 Objective */
    .text-panel-objective {
        padding: 40px 25px;
    }

    .main-title-objective {
        font-size: var(--font-size-heading);
    line-height: var(--line-height-heading);
    }

    .subtitle-objective {
        font-size: 1.05rem;
    }

    .list-item-objective p {
        font-size: var(--font-size-paragraph);
    line-height: var(--line-height-paragraph);
    }

    .visual-panel-objective {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        height: 500px;
    }

    /* Page 5 Scope */
    .text-panel-scope {
        padding: 40px 25px;
    }

    .main-title-scope {
        font-size: var(--font-size-heading);
    line-height: var(--line-height-heading);
    }

    .visual-panel-scope {
        grid-template-columns: 1fr;
        height: auto;
    }

    .scope-card-col {
        height: 320px;
    }

    .scope-label-card {
        height: 100px;
        font-size: 0.9rem;
    }

    /* Page 6 Framework */
    .text-panel-framework {
        padding: 40px 25px;
    }

    .main-title-framework {
        font-size: var(--font-size-heading);
    line-height: var(--line-height-heading);
    }

    .visual-panel-framework {
        padding: 40px 20px;
        gap: 20px;
    }

    .circular-wrapper-framework {
        width: 200px;
        height: 200px;
    }

    .logo-badge-framework {
        width: 75px;
        height: 75px;
    }

    .stats-row-framework {
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .stat-card {
        flex: unset;
        width: 100%;
        padding: 12px;
    }

    /* Page 7 Conduct */
    .text-panel-conduct {
        padding: 40px 25px;
    }

    .main-title-conduct {
        font-size: var(--font-size-heading);
    line-height: var(--line-height-heading);
    }

    .content-body-conduct p {
        font-size: var(--font-size-paragraph);
    line-height: var(--line-height-paragraph);
    }

    .middle-panel-conduct {
        position: relative;
        left: auto;
        bottom: auto;
        width: 100%;
        height: 280px;
    }

    .right-panel-conduct {
        height: 120px;
        position: relative;
    }

    /* Page 8 Bribery */
    .grid-bribery {
        padding: 20px 20px;
        gap: 25px;
    }

    .main-title-bribery {
        font-size: var(--font-size-heading);
    line-height: var(--line-height-heading);
    }

    .visual-panel-bribery {
        height: 220px;
    }

    .desc-bribery {
        font-size: var(--font-size-paragraph);
        line-height: var(--line-height-paragraph);
    }

    .timeline-container-bribery {
        padding-left: 10px;
    }

    .timeline-line {
        left: 21px;
        top: 0;
        width: 2px;
        height: calc(100% - 25px);
    }

    .timeline-dots {
        grid-template-columns: 1fr;
        /* gap: 30px; */
    }

    .timeline-dot-col {
        flex-direction: row;
        align-items: flex-start;
        gap: 20px;
    }

    .timeline-dot {
        margin-bottom: 0;
        flex-shrink: 0;
        transform: translateY(4px);
    }

    .timeline-label {
        max-width: 100%;
        font-size: 0.83rem;
        /* line-height: 1.35; */
    }

    /* Page 9 Gifts - Mobile */
    .grid-gifts {
        display: grid;
        grid-template-rows: auto auto;
        height: auto;
    }

    .top-row-gifts {
        height: 280px;
    }

    .gifts-title-overlay {
        padding: 30px 20px;
    }

    .main-title-gifts {
        font-size: var(--font-size-heading);
    line-height: var(--line-height-heading);
    }

    .bottom-row-gifts {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .gifts-col {
        padding: 35px 20px;
    }

    .gifts-heading {
        font-size: 1.15rem;
    }

    .gifts-desc {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    /* Page 10 Privacy - Mobile */
    .text-panel-privacy {
        padding: 40px 25px;
    }

    .main-title-privacy {
        font-size: var(--font-size-heading);
    line-height: var(--line-height-heading);
    }

    .visual-panel-privacy {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        height: 500px;
    }

    /* Page 11 Slavery - Mobile */
    .top-row-slavery {
        padding: 40px 25px 20px 25px;
    }

    .main-title-slavery {
        font-size: var(--font-size-heading);
    line-height: var(--line-height-heading);
    }

    .bottom-row-slavery {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 15px;
        padding: 0 25px 40px 25px;
        height: 400px;
    }

    .bottom-row-slavery .slavery-green-block {
        display: none;
    }

    /* Page 12 Gender - Mobile */
    .text-panel-gender {
        padding: 40px 25px;
    }

    .main-title-gender {
        font-size: var(--font-size-heading);
    line-height: var(--line-height-heading);
    }

    .visual-panel-gender {
        height: 280px;
    }

    /* Page 13 Social - Mobile */
    .social-title-panel {
        padding: 40px 25px;
    }

    .main-title-social {
        font-size: var(--font-size-heading);
    line-height: var(--line-height-heading);
    }

    .social-text-panel {
        padding: 30px 25px;
    }

    .social-middle-row {
        padding: 30px 25px;
    }

    .social-cards-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .social-card {
        flex-direction: row;
        justify-content: flex-start;
        gap: 15px;
        text-align: left;
    }

    .social-card-icon {
        margin-bottom: 0;
        width: 35px;
        height: 35px;
    }

    .social-image-panel {
        height: 200px;
    }

    /* Page 14 Harassment - Mobile */
    .harassment-left {
        padding: 40px 25px;
    }

    .main-title-harassment {
        font-size: var(--font-size-heading);
    line-height: var(--line-height-heading);
    }

    .harassment-middle,
    .harassment-right {
        padding: 40px 25px;
    }

    .harassment-column-title {
        font-size: 1.3rem;
    }

    .harassment-circle-wrapper {
        width: 200px;
        height: 200px;
    }

    /* Page 15 Payroll - Mobile */
    .payroll-text-panel-top,
    .payroll-text-panel-bottom {
        padding: 40px 25px;
    }

    .payroll-title-top,
    .payroll-title-bottom {
        font-size: var(--font-size-heading);
    }

    .payroll-image-wrapper {
        height: 250px;
    }

    /* Page 16 Domestic - Mobile */
    .domestic-title-panel {
        padding: 40px 25px;
    }

    .main-title-domestic {
        font-size: var(--font-size-heading);
    line-height: var(--line-height-heading);
    }

    .domestic-text-panel {
        padding: 30px 25px;
    }

    .domestic-middle-row {
        padding: 30px 25px;
    }

    .domestic-card-title {
        font-size: 1.2rem;
    }

    .domestic-image-panel {
        height: 200px;
    }

    /* Page 17 Personnel - Mobile */
    .personnel-left {
        padding: 40px 25px;
    }

    .main-title-personnel {
        font-size: var(--font-size-heading);
    line-height: var(--line-height-heading);
    }

    .personnel-right {
        height: 250px;
    }

    /* Page 18 WHS - Mobile */
    .whs-left {
        padding: 40px 25px;
    }

    .main-title-whs {
        font-size: var(--font-size-heading);
    line-height: var(--line-height-heading);
    }

    .whs-right {
        padding: 40px 25px;
    }

    .whs-circle-container {
        width: 240px;
        height: 240px;
    }

    /* Page 19 Psychosocial - Mobile */
    .psychosocial-left-panel {
        padding: 40px 25px;
    }

    .psy-circle-container {
        width: 240px;
        height: 240px;
    }

    .psychosocial-right-panel {
        padding: 30px 25px;
    }

    .main-title-psychosocial {
        font-size: var(--font-size-heading);
    line-height: var(--line-height-heading);
    }

    .psychosocial-middle-row {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: 10px;
        gap: 10px;
    }

    .psychosocial-middle-row .gallery-image {
        flex: 0 0 150px;
        height: 100px;
        scroll-snap-align: start;
    }

    /* Page 20 Incident - Mobile */
    .incident-title-panel {
        padding: 40px 25px;
    }

    .main-title-incident {
        font-size: var(--font-size-heading);
    line-height: var(--line-height-heading);
    }

    .incident-text-panel {
        padding: 40px 25px;
    }

    .incident-visual-panel {
        padding: 40px 25px;
    }

    .incident-circle-wrapper {
        width: 200px;
        height: 200px;
    }

    .incident-image-panel {
        height: 200px;
    }

    /* Page 21 Spill - Mobile */
    .spill-left {
        padding: 40px 25px;
    }

    .main-title-spill {
        font-size: var(--font-size-heading);
    line-height: var(--line-height-heading);
    }

    .spill-middle {
        padding: 30px 25px;
    }

    .spill-badge {
        width: 100px;
        height: 100px;
    }

    .spill-right {
        height: 250px;
    }

    /* Page 22 Sustain - Mobile */
    .sustain-content {
        padding: 40px 25px;
    }

    .main-title-sustain {
        font-size: var(--font-size-heading);
    line-height: var(--line-height-heading);
    }

    .sustain-image-wrapper {
        height: 220px;
    }

    /* Page 23 Thank You - Mobile */
    .section-thankyou {
        padding: 50px 25px;
        gap: 40px;
    }

    .thankyou-title {
        font-size: 4.2rem;
    }

    .thankyou-bg-icon {
        display: none;
    }

    .thankyou-footer {
        margin-top: 20px;
        gap: 20px;
    }

    .thankyou-link {
        font-size: 1rem;
    }
}

/* ==========================================================================
   GLOBAL GREEN LINEAR GRADIENT IMAGE OVERLAYS
   ========================================================================== */
.sustain-image-wrapper,
.privacy-image-wrapper,
.objective-image-wrapper,
.slavery-image-wrapper,
.payroll-image-wrapper,
.incident-image-panel {
    position: relative;
    overflow: hidden;
}

.sustain-image-wrapper::after,
.privacy-image-wrapper::after,
.objective-image-wrapper::after,
.slavery-image-wrapper::after,
.payroll-image-wrapper::after,
.incident-image-panel::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(20, 63, 46, 0.6) 0%, rgba(20, 63, 46, 0) 100%);
    pointer-events: none;
    z-index: 1;
}

/* ==========================================================================
   DESKTOP RESPONSIVENESS AND TEXT READABILITY ON LARGE SCREENS
   ========================================================================== */
@media (min-width: 1025px) {
    /* Limit maximum line length for readability */
    .content-body p,
    .content-body-commitment p,
    .content-body-framework p,
    .content-body-conduct p,
    .gifts-desc,
    .privacy-desc,
    .slavery-desc,
    .gender-desc,
    .social-desc,
    .harassment-desc,
    .payroll-desc,
    .domestic-desc,
    .personnel-desc,
    .whs-desc,
    .psychosocial-desc,
    .incident-desc,
    .spill-desc,
    .sustain-desc,
    .scope-intro,
    .scope-summary,
    .list-objective {
        max-width: 1100px;
    }

    /* Limit timeline width to match body text */
    /* .timeline-container-bribery {
        max-width: 1100px;
    } */
    .desc-bribery{
        width: 100%;
        padding-right: 80px;
    }
    .visual-panel-bribery .panel-image{
        width: 100%;
        margin-top: 0;
    }
}