/* 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-content p {
    font-family: var(--font-primary);
}

.about-hero-grid {
    display: grid;
    grid-template-columns: 50% 50%;
    column-gap: 30px;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
}

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


.section-title {
    margin-top: 2px;
    margin-bottom: 36px;
}

.consult-title{
    margin-bottom: 9px;
}

.consult-content{
    margin-top: 0px;
}

.cda-section-label-left {
    margin-bottom: 0px;
}


.about-text {
    font-family: 'Sora', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-gray-light);
    font-weight: 400;
    margin-bottom: 20px;
}

.stakeholder-content{
    margin-top: 8px;
}

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

.about-hero-buttons a {
    width: 342px;
    text-align: center;
}

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

.regional-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.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: 30px;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
}

.mission-list p {
    font-family: 'Sora', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-gray-light);
}

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

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

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

.mission-image img {
    width: 100%;
    object-fit: cover;
    height: 475px;
}

.mission-title {
    font-family: 'Good Times', sans-serif;
    font-size: 48px;
    color: var(--text-white);
    margin-bottom: 10px;
    margin-top: 2px;
    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;
    color: var(--text-white);
}

.mission-list li {
    font-family: 'Sora', sans-serif;
    font-size: 16px;
    color: var(--text-white);
    line-height: 1.5;
    list-style: disc !important;
}

.consultant-content{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    text-align: justify;
    margin-top: 80px; 
}

.consultant-content p{
    text-align: center;
    max-width: 502px;
}

/* ===================================
   CONSULTANT LOGOS
=================================== */

.consultant-section{
    margin-bottom: 80px;
}
.consultant-logos-container {
    display: flex;
    justify-content: start;
    gap: 27px;
    flex-wrap: nowrap;
    margin-top: 52px;
}

.flip-card {
    background-color: transparent;
    width: 290px;
    height: 290px;
    perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform-origin: center;
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background-color: transparent;
}


.flip-card-front {
    background-color: #011423;
}

.cert-front-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

.cert-front-content h3 {
    font-family: 'Good Times', sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    margin-bottom: 10px;
    margin-top: 0;
    line-height: 1.3;
    text-transform: uppercase;
}

.cert-front-content p {
    font-family: 'Sora', sans-serif;
    font-size: 15px;
    color: var(--primary-green);
    text-align: center;
    margin: 0;
    font-weight: 600;
}

.flip-card-back {
    background-color: #fff;
    transform: rotateY(180deg);
}

.back-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 15px;
    width: 100%;
}

.back-logos img {
    width: 107px;
    height: 107px;
    object-fit: contain;
}

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

.stakeholders {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
    column-gap: 54px;
    max-width: 1200px;
    margin: 0 auto;
}

.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;
    text-align: left;
    margin-top: 2px;
}

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

/* 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: 20px;
    color: var(--text-white);
    margin-bottom: 0.5px;
margin-top: 0px;
    text-transform: uppercase;
}

/* ===================================
   GOVERNANCE SECTION
=================================== */
.governance-section {
    padding: 80px 0;
    background-color: #FFFFFF;
}

.governance-label{
    color: var(--font-primary);
}
.governance-title {
    font-family: 'Good Times', sans-serif;
    font-size: 48px;
    color: var(--primary-blue);
    text-align: center;
    margin-bottom: 30px;
    margin-top: 2px;
    line-height: 1.2;
    text-transform: uppercase;
}

.governance-content {
   /*  display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;*/
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    text-align: justify;
    margin: 0 auto; 
}

.governance-logos{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    height: 300px;
}


.governance-logo-left img {
    max-width: 330px;
    height: 330px;
}

.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: 18px;
    color: #010915;
    line-height: 1.5;
    font-weight: 600;
    text-align: center;
    max-width: 650px;

}

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

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

.governance-logo-right img {
    height: 165px;
    width: 387px;
}
*/
/* ===================================
   LEADERSHIP / VISION SECTION
=================================== */
.leadership-vision-section {
    padding: 100px 0 40px;
}

.vision-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: stretch;
    max-width: 1200px;
    margin: 0 auto 20px;
}

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

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

.quote-section{
    margin-top: 62px;
}

.vision-image-container {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 690px;
}

.vision-image {
    flex: 1;
    overflow: hidden;
    min-height: 280px;
}

.vision-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
}

.leader-info-overlay {
    flex: 0 0 auto;
    margin-top: 0;
    padding: 24px 0 0;
}

.leader-name {
    font-family: 'Sora', sans-serif;
    font-size: 32px;
    color: var(--text-white);
    margin-bottom: 5px;
}

.leader-role {
    font-family: 'Sora', sans-serif;
    font-size: 18px;
    color: var(--primary-green);
    margin: 0px;
}
.quote{
color: var(--primary-green);
font-size: 62px;
}

.leader-philosophy {
    font-family: 'Sora', sans-serif;
    font-size: 16px;
    color: var(--text-gray-light);
    font-weight: 400;
}

/* ===================================
   BACKGROUND & EXPERIENCE SECTION
=================================== */
.bg-experience-section {
    padding-top: 50px;
}

.bg-exp-title {
    font-family: var(--font-secondary);
    font-size: 40px;
    color: var(--text-white);
    font-weight: 700;
    margin-bottom: 30px;
}

.bg-exp-list{
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 400;
}

.bg-exp-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bg-exp-list li {
    font-family: 'Sora', sans-serif;
    font-size: 16px;
    color: var(--text-gray-light);
    position: relative;
    padding-left: 25px;
    margin-bottom: 15px;
}

.bg-exp-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--text-white);
    font-size: 15px;
}

/* ===================================
   PROFILE OVERVIEW SECTION
=================================== */
.profile-overview-section {
    padding: 40px 0 80px;
}

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

.profile-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.profile-content h2 {
    color: var(--text-white);
    font-size: 32px;
}

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

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

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

    .about-hero-grid,
    .regional-grid,
    .mission-grid,
    .vision-grid,
    .profile-grid {
        grid-template-columns: 1fr;
        column-gap: 20px;
    }

    .about-hero-buttons {
        justify-content: center;
    }

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

    /* Vision Section Reordering */
    .vision-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }

    .vision-content {
        display: contents;
    }

    .cda-section-label-left {
        order: 1;
        text-align: center;
        justify-content: center;
        width: 100%;
    }

    .vision-title {
        order: 2;
        text-align: center;
        width: 100%;
        margin-bottom: 20px;
    }

    .vision-image-container {
        order: 3;
        margin-bottom: 20px;
        width: 100%;
        display: block; /* reset flex pour mobile */
        height: auto; /* annule le height fixe du desktop */
    }

    .vision-image {
        overflow: hidden;
    }

    .vision-image img {
        height: auto; /* reset hauteur auto sur mobile */
    }

    .leader-info-overlay {
        flex: unset;
        margin-top: 20px;
        padding: 0;
        display: block;
    }

    .vision-content-wrapper {
        order: 4;
        width: 100%;
    }

    .quote {
        display: block;
        margin: 0 auto 10px;
    }

    /* General responsive grid cleanup */
    .about-hero-grid,
    .regional-grid,
    .profile-grid,
    .mission-grid {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    /* Carte d'Afrique - forcer les dimensions sur mobile */
    .regional-map {
        width: 100%;
        min-height: 300px;
        overflow: visible;
    }

    .regional-map > * {
        width: 100% !important;
        max-width: 100% !important;
    }

    .about-hero-content,
    .mission-label {
        display: contents;
    }

    .cda-section-label-left {
        order: 1;
        text-align: center;
        justify-content: center;
        width: 100%;
        margin-bottom: 10px;
    }

    .mission-title-wrapper {
        order: 2;
        display: flex;
        justify-content: center;
        width: 100%;
        margin-bottom: 20px;
    }

    .section-title,
    .mission-title {
        order: 2;
        text-align: center;
        width: 100%;
        margin-bottom: 20px;
    }

    .about-hero-image,
    .mission-image,
    .profile-image {
        order: 3;
        width: 100%;
        margin-bottom: 20px;
    }

    .about-text,
    .mission-list-wrapper,
    .profile-content,
    .about-hero-buttons {
        order: 4;
        width: 100%;
    }

    .about-hero-buttons {
        justify-content: center;
    }

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

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

    .governance-section {
        padding: 15px 0;
    }
    .quote{
font-size: 32px;
}


    .leadership-vision-section,
    .bg-experience-section,
    .profile-overview-section {
        padding: 40px 0;
    }

    .consultant-logos-container {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .mission-image img {
        width: 100%;
        object-fit: cover;
        height: 232px;
    }

    .leader-name {
        font-size: 30px;
    }

    .leader-role {
        font-size: 16px;
    }

    .shape {
        display: none;
    }

    .shape-box {
        display: none;
    }

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

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

    .governance-logos{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    row-gap:50px ;
    height: 300px;
}

.governance-logo{
    height: 100px;
    width: 200px;
}

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


    .bg-exp-title{
    font-size: 32px;}

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

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

    .consultant-content {
        margin-top: 40px;
    }

    .consultant-section {
        margin-bottom: 40px;
    }

    .consultant-logos-container {
        margin-top: 30px;
        gap: 20px;
    }
    .quote{
        font-size: 32px;
        margin-left: 0;
    }
}