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

.grp-full-section {
    height: 100vh;
    /* Full viewport height */
    width: 100%;
    /* Full viewport width */
    background-image: url('images/grp-img-1.png');
    /* Replace with your image URL */
    background-size: 100% 100%;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 20px;
    /* Padding for responsiveness */
}

.grp-full-section h1 {
    font-family: 'PF Marlet Display Regular';
    font-size: 1.8vw;
    /* Relative size for responsiveness */
    line-height: 1.4;
    /* Adjust for spacing */
    /* Adjusted for readability */
    color: white;
    max-width: 900px;
    /* Limit text width */
    text-transform: uppercase;
    /* Make text uppercase */
    font-weight: 400;
}

.grp-section-histoire {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: calc(100vh - 75px);
    background-color: white;
    /* Background color */
    color: black;
    /* Default text color */
    padding: 50px 20px;
    /* Padding for spacing */
    width: 100%;
    /* Full width */
    padding: 50px 25vw;

}

.grp-section-histoire h2 {
    font-weight: 400;
    font-size: 2.5vw;
    /* Approx. size */
    color: #C29B3F;
    /* Title color */
    font-family: 'PF Marlet Display Regular';
    text-align: center;
    margin-bottom: 20px;
    /* Space below the title */
}

.grp-section-histoire p {
    font-family: 'Avenir Light';
    font-size: 1.05vw;
    /* Relative size for responsiveness */
    line-height: 2;
    /* Adjust for spacing */

    /* Adjusted for readability */
    margin-bottom: 20px;
    /* Space between paragraphs */
    text-align: center;
    /* For clean paragraph alignment */
    font-weight: 200;
}

.grp-section-groupe {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: calc(100vh - 75px);
    background-color: white;
    /* Background color */
    color: black;
    /* Default text color */
    padding: 50px 20px;
    /* Padding for spacing */
    width: 100%;
    /* Full width */
    padding: 50px 25vw;

}

.grp-section-groupe h2 {
    font-weight: 400;
    font-size: 2.5vw;
    /* Approx. size */
    color: #C29B3F;
    /* Title color */
    font-family: 'PF Marlet Display Regular';
    text-align: center;
    margin-bottom: 20px;
    /* Space below the title */
}

.grp-section-groupe p {
    font-family: 'Avenir Light';
    font-size: 1.05vw;
    /* Relative size for responsiveness */
    line-height: 2;
    /* Adjust for spacing */
    /* Adjusted for readability */
    margin-bottom: 20px;
    /* Space between paragraphs */
    text-align: center;
    /* For clean paragraph alignment */
    font-weight: 200;
}


.grp-section-separator {
    width: 100%;
    /* Full width */
    overflow: hidden;
    /* Ensure no horizontal scroll */
}

.grp-section-separator img {
    width: 100%;
    /* Full width */
    height: auto;
    /* Maintain the image's aspect ratio */
    display: block;
    /* Removes any unwanted space below the image */
}

.chiffres-cles {
    background-color: white;
    /* Background color */
    color: black;
    /* Text color */
    padding: 50px 20px;
    /* Padding for spacing */
    text-align: center;
    /* Center text */

    border-bottom: 1px solid #191d3a;
}

.chiffres-cles h2 {
    font-size: 40px;
    /* Gold title size */
    color: #C29B3F;
    /* Title color */
    margin-bottom: 40px;
    /* Spacing below the title */
    font-family: 'PF Marlet Display Regular';
    font-weight: 400;
}

.chiffres-cles .row {
    display: flex;
    /* Flexbox for columns */
    justify-content: space-between;
    /* Space between columns */
    gap: 30px;
    /* Gap between columns */
    flex-wrap: wrap;
    /* Ensure columns wrap on small screens */
}

.chiffres-cles .col {
    flex: 1 1 30%;
    /* Each column takes up 30% of the container */
    text-align: center;
    /* Center text inside the columns */
}

.chiffres-cles .number {
    font-size: 130px;
    /* Large number size */
    font-weight: bold;
    color: #191d3a;
    margin-bottom: 10px;
    /* Space between the number and text */
    font-family: 'PF Marlet Display Regular';
}

.chiffres-cles .text {
    font-size: 16px;
    /* Small text size */
    color: #191d3a;
    /* Text color */
    font-weight: 200;
    font-family: 'Avenir Light';
    padding: 10px 20%;
}








/* Media query for smaller screens */
@media (max-width: 768px) {

    .grp-section-groupe {
        padding: 50px 15vw;
    }

    .grp-section-histoire {
        padding: 50px 15vw;
    }



    .grp-full-section h1 {
        font-size: 4vw;
    }

    .grp-section-histoire h2 {
        font-size: 4vw;
    }

    .grp-section-histoire p {
        font-size: 2.1vw;
        line-height: 1.3;
    }

    .grp-section-groupe h2 {
        font-size: 4vw;
    }

    .grp-section-groupe p {
        font-size: 2.1vw;
        line-height: 1.3;
    }

    .grp-text-section .grp-quote {
        font-size: 2.1vw;
        line-height: 1.3;
    }

    .chiffres-cles h2 {
        font-size: 25px;
    }

    .chiffres-cles .row {
        flex-direction: column;
        /* Stack the columns vertically */
        align-items: center;
        /* Center columns when stacked */
    }

    .chiffres-cles .col {
        flex: 1 1 100%;
        /* Make columns take full width */
        margin-bottom: 20px;
        /* Space between stacked columns */
    }

    .chiffres-cles .number {
        font-size: 80px;
        /* Slightly smaller number on small screens */
    }

    .chiffres-cles .text {
        padding: 10px 15%;

    }
}

/* Media query for very small screens */
@media (max-width: 480px) {


    .grp-section-groupe {
        padding: 40px 10vw;
    }

    .grp-section-histoire {
        padding: 40px 10vw;
    }

    .grp-full-section h1 {
        font-size: 6vw;
        line-height: 1.3;
    }

    .grp-section-histoire h2 {
        font-size: 6vw;
    }

    .grp-section-histoire p {
        font-size: 2.9vw;
        line-height: 1.5;
    }

    .grp-section-groupe h2 {
        font-size: 6vw;
    }

    .grp-section-groupe p {
        font-size: 2.9vw;
        line-height: 1.5;
    }

    .grp-text-section .grp-quote {
        font-size: 2.9vw;
        line-height: 1.5;
    }

    .chiffres-cles .number {
        font-size: 60px;
        /* Even smaller on very small screens */
    }

    .chiffres-cles h2 {
        font-size: 22px;

    }

    .chiffres-cles .text {
        padding: 10px 5%;


    }

    .grp-container .grp-left-column img {
        max-width: 75%;
    }

}


.grp-container {
    display: flex;
    flex-wrap: wrap;
    max-width: 1600px;
    margin: 0 auto;
    padding: 20px;
}

.grp-left-column {
    flex: 1;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.grp-left-column img {
    max-height: 600px;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.grp-right-column {
    flex: 2;
    padding: 20px;
    display: flex;
    justify-content: center;
    /* align-items: center; */
    flex-direction: column;
}

.grp-right-column .grp-text-section {
    margin-bottom: 20px;
}

.grp-right-column .grp-text-section p {
    margin: 10px 0;
    line-height: 1.6;
}

.grp-quote {
    font-size: 1.05vw;
    color: #2c3e50;
    margin-bottom: 20px;
    font-family: 'Avenir Light';
}


.grp-signature {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 20px;
}

.grp-quote-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 20px;
}

.grp-quote-left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 20px;
}

.grp-quote-left img {
    max-height: 50px;
    margin-left: 10px;
}

.grp-quote-right img {
    max-height: 50px;
    margin-left: 10px;
}

.grp-signature img {
    max-height: 50px;
    margin-left: 10px;
}

.grp-signature span {
    font-weight: bold;
}

@media (max-width: 768px) {
    .grp-container {
        flex-direction: column;
    }
}