/* About Page Styles */
.cda-section-label {
    text-align: left;
}

.about-page-main {
    background-color: var(--bg-color);
    padding-top: 0;
}

/* ===================================
   HERO SECTION - Trusted Partner
=================================== */
.about-hero-section {
    padding: 50px 0;
}

.about-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    align-items: center;
}

.about-hero-image img {
    width: 100%;
    height: 500px;
    object-fit: cover;
}

.about-hero-content {
    padding: 20px 0;
}


.about-hero-title {
    /* Uses global .section-title styles if class added or inherited */
    font-family: 'Good Times', sans-serif;
    font-size: 36px;
    color: var(--text-white);
    margin-bottom: 30px;
    line-height: 1.2;
    text-transform: uppercase;
}


.about-hero-text {
    font-family: 'Sora', sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: var(--paragraph-color);
    margin-bottom: 20px;
}

.about-hero-buttons {
    display: flex;
    gap: 20px;
    margin-top: 40px;
}

/* ===================================
   REGIONAL PRESENCE SECTION
=================================== */
.regional-presence-section {
    padding: 50px 0;
}

.regional-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.section-subtitle {
    font-family: 'Sora', sans-serif;
    font-size: 14px;
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 15px;
}


.regional-text {
    font-family: 'Sora', sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: var(--paragraph-color);
    margin-bottom: 20px;
}

.regional-map img {
    width: 100%;
    height: auto;
}

/* ===================================
   MISSION SECTION
=================================== */
.mission-section {
    padding: 50px 0;
}

.mission-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "image title "
        "image list  ";
    column-gap: 60px;
    align-items: start;
}

.mission-label {
    grid-area: title;
}

.mission-list-wrapper {
    grid-area: list;
}

.mission-image {
    grid-area: image;
}

.mission-image img {
    width: 100%;
    object-fit: cover;
    border-radius: 4px;
    height: auto;
}

.mission-title {
    font-family: 'Good Times', sans-serif;
    font-size: 36px;
    color: var(--text-white);
    margin-bottom: 40px;
    line-height: 1.2;
    text-transform: uppercase;
}

/* Specific layout for Leadership section to look different (Image Left) */
.leadership-section .mission-grid {
    grid-template-areas:
        "title image "
        "list image ";
}

.mission-list {
    padding: 0;
    margin: 0;
}

.mission-list li {
    font-family: 'Sora', sans-serif;
    font-size: 16px;
    color: var(--paragraph-color);
    list-style: disc !important;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    row-gap: 5px;
}

/* ===================================
   STAKEHOLDERS SECTION
=================================== */
.stakeholders-section {
    padding: 50px 0;
}

.stakeholders {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
}

.stakeholders-header {
    text-align: center;
    margin-bottom: 60px;
}

.stakeholders-title {
    font-family: 'Good Times', sans-serif;
    font-size: 36px;
    color: var(--text-white);
    line-height: 1.2;
    text-transform: uppercase;
}

.stakeholders-grid {
    display: grid;
    grid-template-rows: auto;
    gap: 2px;
    max-height: 350px;
    overflow-y: auto;
    padding-right: 10px;
}

/* Custom Scrollbar Styling */
.stakeholders-grid::-webkit-scrollbar {
    width: 6px;
}

.stakeholder-card {
    display: flex;
    flex-direction: column;
    align-items: start;
    max-width: 600px;
    text-align: left;
    padding: 10px 20px;
}

.stakeholder-number {
    font-family: 'Good Times', sans-serif;
    font-size: 48px;
    color: var(--primary-blue);
    margin-bottom: 2px;
}

.stakeholder-card h3 {
    font-family: 'Good Times', sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: var(--text-white);
    margin-bottom: 0.5px;
    text-transform: uppercase;
}

.stakeholder-card p {
    font-family: 'Sora', sans-serif;
    font-weight: 200;
    font-size: 14px;
    color: var(--text-white);
    line-height: 1.6;
}

/* ===================================
   GOVERNANCE SECTION
=================================== */
.governance-section {
    padding: 100px 0;
}

.governance-title {
    font-family: 'Good Times', sans-serif;
    font-size: 36px;
    color: #EEEEEE;
    text-align: center;
    margin-bottom: 60px;
    line-height: 1.2;
    text-transform: uppercase;
}

.governance-content {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 40px;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
}

/* Left Logo - RTG */
.governance-logo-left {
    text-align: center;
}

.governance-logo-left img {
    max-width: 250px;
    height: auto;
    margin-bottom: 15px;
}

.logo-caption {
    font-family: 'Sora', sans-serif;
    font-size: 12px;
    color: var(--text-white);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

/* Center - Shape Box + Text */
.governance-center {
    position: relative;
    text-align: center;
}

.shape-box {
    position: absolute;
    top: -40px;
    right: -20px;
    z-index: 1;
}

.governance-text {
    position: relative;
    z-index: 2;
    text-align: left;
}

.governance-text h3 {
    font-family: 'Sora', sans-serif;
    font-size: 14px;
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.governance-text h4 {
    font-family: 'Good Times', sans-serif;
    font-size: 18px;
    color: var(--text-white);
    margin-bottom: 15px;
    line-height: 1.3;
}

.governance-text p {
    font-family: 'Sora', sans-serif;
    font-size: 14px;
    color: var(--paragraph-color);
    line-height: 1.6;
}

/* Right Logo - Asseco */
.governance-logo-right {
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: end;
    text-align: right;
    gap: 30px;
}

.governance-logo-right .shape {
    max-width: 100px;
    height: auto;
}

.governance-logo-right img {
    height: auto;
}

/* ===================================
   LEADERSHIP SECTION
=================================== */
.leadership-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

.leadership-title {
    font-family: 'Good Times', sans-serif;
    font-size: 36px;
    color: var(--text-white);
    margin-bottom: 40px;
    line-height: 1.2;
    text-transform: uppercase;
}

.leadership-text p {
    font-family: 'Sora', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-white);
    margin-bottom: 25px;
}

.leadership-profile {
    position: sticky;
}

.leadership-image {
    margin-bottom: 10px;
}

.leadership-image img {
    width: 100%;
    height: auto;
}

.leadership-info {
    text-align: left;
}

.leader-name {
    font-family: 'Good Times', sans-serif;
    font-size: 20px;
    color: var(--text-white);
}

.leader-title {
    font-family: 'Sora', sans-serif;
    font-size: 14px;
    color: var(--primary-green);
    margin-top: 0;
}

/* ===================================
   RESPONSIVE
=================================== */
@media (max-width: 992px) {

    .about-hero-title,
    .regional-title,
    .mission-title,
    .stakeholders-title,
    .governance-title,
    .leadership-title {
        text-align: center;
    }

    .about-hero-grid,
    .regional-grid,
    .mission-grid,
    .leadership-grid {
        grid-template-columns: 1fr;
        column-gap: 40px;
    }

    .shape {
        display: none;
    }

    .stakeholders-header {
        margin-bottom: 30px;
    }

    /* Reorder mission-grid on mobile: label, title, image, list */
    .mission-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "label"
            "title"
            "image"
            "list";
        gap: 30px;
    }

    .mission-content {
        order: 1;
    }

    .mission-image {
        order: 2;
    }

    .leadership-content {
        order: 2;
    }

    .leadership-profile {
        order: 1;
    }

    .stakeholders-grid {
        grid-template-columns: 1fr;
    }

    .stakeholder-card {
        padding: 10px 0;
    }

    .stakeholders {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .governance-section {
        padding: 30px 0;
    }


    .leadership-section {
        padding: 0;
    }

    .shape-box {
        display: none;
    }

    .about-hero-buttons {
        flex-direction: column;
    }

    .leadership-profile {
        position: static;
    }
}

@media (max-width: 768px) {

    .governance-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-hero-title,
    .regional-title,
    .mission-title,
    .stakeholders-title,
    .governance-title,
    .leadership-title {
        font-size: 18px;
        text-align: center;
    }

    .about-hero-image img {
        height: 300px;
    }

    .stakeholder-number {
        font-size: 36px;
    }
}