/* assets/css/impact.css (v2 - Left-Aligned) */

/* --- GLOBAL SETTINGS & FONTS --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800&family=K2D:wght@400&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg-color: #F1ECE2;
    --text-color: #333;
    --font-bold: 'Inter', sans-serif;
    --font-normal: 'K2D', sans-serif;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-normal);
    overflow-x: hidden;
}

.container {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* --- 1. IMPACT HERO SECTION --- */
.impact-hero {
    position: relative;
    height: 70vh;
    color: white;
    display: flex;
    align-items: center;
    /* ALIGNMENT FIX 1: Push the content container to the left */
    justify-content: flex-start;
    overflow: hidden;
}

.impact-hero-bg-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 1;
}

.impact-hero-overlay {
    position: absolute;
    inset: 0;
    /* ALIGNMENT FIX 2: Adjust gradient to be darkest on the left */
    background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0) 100%);
    z-index: 2;
}

.impact-hero-content {
    position: relative;
    z-index: 3;
    /* ALIGNMENT FIX 3: Align the text itself to the left */
    text-align: left;
}

.impact-hero-content h1 {
    font-family: var(--font-bold);
    font-weight: 800;
    font-size: 4rem;
    line-height: 1.2;
    max-width: 800px; /* Constrain line length */
    text-shadow: 0 2px 15px rgba(0,0,0,0.3);
}


/* --- RESPONSIVENESS --- */
@media (max-width: 992px) {
    .impact-hero-content h1 {
        font-size: 3rem;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 1.5rem;
    }

    .impact-hero {
        height: 60vh;
    }

    .impact-hero-content h1 {
        font-size: 2.5rem;
    }

    /* On mobile, a centered title often works better in a smaller space */
    .impact-hero-overlay {
        background: rgba(0,0,0,0.5); /* Solid overlay for mobile */
    }
    .impact-hero {
        justify-content: center; /* Center the container on mobile */
    }
    .impact-hero-content {
        text-align: center; /* Center the text on mobile */
    }
}





/* --- 2. ESG FRAMEWORK SECTION (TEXT STROKE EFFECT) --- */
.esg-framework-section {
    padding: 7rem 0;
}

.section-title {
    font-family: var(--font-bold);
    font-weight: 800;
    font-size: 2.8rem;
    text-align: center;
    margin-bottom: 3rem;
    color: var(--text-color);
}

.scrolling-text {
    font-family: var(--font-bold);
    font-size: 2.5rem;
    line-height: 1.6;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

/* --- THE TEXT STROKE MAGIC --- */
.scrolling-text span {
    display: inline;
    font-weight: 900; /* Must be bold from the start for the stroke to look good */

    /* 1. Create the outline/stroke */
    -webkit-text-stroke: 1px var(--text-color); /* 1px black stroke */
    -moz-text-stroke: 1px var(--text-color); /* Firefox support */

    /* 2. Make the fill color transparent by default */
    color: transparent;

    /* 3. Set a transition for the fill color for the smooth effect */
    transition: color 0.5s ease;
}
/* --- END OF MAGIC --- */


/* --- RESPONSIVENESS --- */
@media (max-width: 992px) {
    .scrolling-text {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .esg-framework-section {
        padding: 4rem 0;
    }
    .esg-framework-section .container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .section-title {
        font-size: 2.2rem;
    }
    .scrolling-text {
        font-size: 1.5rem; /* Increased from 1.2 to make stroke visible */
        line-height: 1.7;
        max-width: 100%;
        text-align: left;
    }
    .scrolling-text span {
        -webkit-text-stroke-width: 0.5px; /* Thinner stroke on mobile for clarity */
        -moz-text-stroke-width: 0.5px;
    }
}




/* REPLACE your entire previous SDG section CSS block with this */


/* --- 3. SDG SECTION (STATIC DESCRIPTION LAYOUT) --- */
.sdg-section {
    padding: 7rem 0;
    background-color: #E9E2D8;
}

.sdg-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2.5rem; /* Increased gap for more breathing room */
}

.sdg-item {
    text-align: center;
    transition: transform 0.3s ease;
    /* Animation Preparation */
    opacity: 0;
    transform: translateY(30px);
}

.sdg-item:hover {
    transform: translateY(-5px); /* A subtle lift on hover */
}

.sdg-item img {
    max-width: 160px; /* A good size for the icons */
    width: 100%;
    margin: 0 auto 1.5rem auto; /* Center the image and add space below */
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.sdg-item p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
}


/* --- SDG SECTION RESPONSIVENESS --- */
@media (max-width: 1100px) {
    /* On smaller desktops/large tablets, break to a 3-column grid */
    .sdg-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .sdg-section {
        padding: 4rem 0;
    }

    /* On tablets, break to a 2-column grid */
    .sdg-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    /* On mobile, stack to a single column for maximum readability */
    .sdg-grid {
        grid-template-columns: 1fr;
        gap: 3rem; /* Increase vertical gap when stacked */
    }
}









/* REPLACE your entire previous Report Section CSS block with this */


/* --- 4. REPORT SECTION (REFINED & STATS-FREE) --- */
.report-section {
    padding: 8rem 0;
    overflow: hidden; /* Important for the slide-in animation */
}

.report-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* Give slightly more space to the image */
    gap: 5rem;
    align-items: center;
}

.report-eyebrow {
    display: block;
    font-family: var(--font-bold);
    color: var(--primary-yellow);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.report-info h2 {
    font-family: var(--font-bold);
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.report-info p {
    line-height: 1.8;
    color: #555;
    margin-bottom: 2.5rem;
    max-width: 500px;
}

.report-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-primary, .btn-secondary {
    font-family: var(--font-bold);
    padding: 0.9rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}
.btn-primary { background-color: var(--text-color); color: #fff; border-color: var(--text-color); }
.btn-primary:hover { background-color: #000; border-color: #000; transform: translateY(-2px); }
.btn-secondary { border-color: var(--text-color); color: var(--text-color); }
.btn-secondary:hover { background-color: var(--text-color); color: #fff; transform: translateY(-2px); }

.report-image {
    perspective: 1500px; /* Creates depth for 3D transforms */
}

.report-image a {
    display: block;
    overflow: hidden;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.2);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.report-image img {
    width: 100%;
    display: block;
}

.report-image a:hover {
    transform: scale(1.03) rotateY(-5deg); /* A subtle 3D tilt on hover */
    box-shadow: 0 40px 70px -20px rgba(0,0,0,0.25);
}

/* --- REPORT SECTION RESPONSIVENESS --- */
@media (max-width: 992px) {
    .report-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }
    .report-info p {
        margin-left: auto;
        margin-right: auto;
    }
    .report-buttons {
        justify-content: center;
    }
}
@media (max-width: 768px) {
    .report-section { padding: 4rem 0; }
    .report-info h2 { font-size: 2.5rem; }
}