/* section about us */
    .container_about_us{
        max-width: 1000px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        gap: 32px;
    }

    .content_about_us:first-child{
        position: relative;
        flex: 0 0 450px;
        border-radius: 16px;
    }

    .content_about_us:first-child:before{
        content: '';
        width: 100%; height: 100%;
        position: absolute;
        top: 0; left: 0;
        opacity: .5;
        background: var(--degrade-blue);
        border-radius: 16px;
    }
    
    .content_about_us:first-child .img_about{
        border-radius: 16px;
    }

    .content_about_us:first-child .logo_about_us{
        position: absolute;
        right: -16px; bottom: -16px;
        width: 220px; height: 120px;
        background: var(--white);
        border-radius: 8px;
        border: 5px solid var(--first);
        box-shadow: 0 4px 2px var(--light-black);
    }
    
    .logo_about_us img{
        border-radius: 3px;
    }

    .text_about_us{
        text-align: justify;
        margin: 16px 0;
        overflow-y: auto;
        max-height: 200px;
        white-space: pre-line;
        padding-right: 8px;
    }
/* section about us */

/* section mvo */
    .container_mvo{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
        gap: 16px;
    }
    
    .content_mvo{
        background: var(--light-first);
        border-radius: 16px;
        padding: 20px 0;
    }

    .box_icon_mvo{
        padding: 8px 16px;
        border-left: 5px solid var(--first);
        display: flex;
        align-items: center;
    }
    
    .box_icon_mvo i{
        font-size: 40px;
        color: var(--first);
    }

    .info_mvo{
        padding: 0 16px;
    }

    .titre_mvo{
        margin: 12px 0;
        font-weight: 700;
        font-size: 18px;
    }

    .description_mvo{
        text-align: justify;
        margin-bottom: 10px;
    }
/* section mvo */

/* section approche pedagogique */
    .approche_pedagogique{
        position: relative;
        width: 100%;
        background-image: url(../images/hero/hero1.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        padding: 32px;
    }

    .approche_pedagogique:before{
        content: '';
        width: 100%; height: 100%;
        position: absolute;
        top: 0; left: 0;
        Background: var(--fourth);
        opacity: .7;
    }

    .containerap, .approche_pedagogique .box_title{
        position: relative;
        z-index: 10;
    }
    
    .approche_pedagogique .title {
        color: var(--white);
        span{
            color: var(--white);
        }
    }

    .containerap{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }

    .contentap{
        width: 300px;
        border: 1px solid var(--white);
        border-radius: 16px;
        background: var(--light-white);
        backdrop-filter: blur(20px);
        padding: 16px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .iconap{
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }

    .iconap i{
        color: var(--second);
        font-size: 32px;
    }

    .countap{
        font-size: 38px;
        font-weight: 600;
        color: var(--white);
    }

    .contentap h3{
        font-weight: 700;
        margin: 8px 0;
        text-align: center;
        color: var(--second);
    }

    .contentap p{
        text-align: center;
        color: var(--white);
    }
/* section approche pedagogique */

/* section our team */
    .container_team{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 16px;
    }
    
    .content_team{
        flex: 0 0 250px;
        background: var(--light-first);
        padding: 16px;
        border-radius: 16px;
    }
    
    .box_img_team{
        width: auto;
        height: 250px;
        border-radius: 16px;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 92%);
    }
    
    .box_img_team img{
        border-radius: 10px;
    }
    
    .info_team span{
        font-weight: 600;
        color: var(--fourth);
    }
    
    .sociaux_team{
        margin-top: 5px;
        display: flex;
        gap: 5px;
    }
    
    .sociaux_team a{
        width: 30px; height: 30px;
        background: var(--second);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        i{
            color: var(--white);
        }
    }
/* section our team */


/* section partenaire */
    .partenaire{
        display: flex;
        overflow-x: auto;
        max-width: max-content;
    }

    .partenaire::-webkit-scrollbar{
        display: none;
    }

    .groupePartenaire{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        padding-right: 16px;
        animation: scrollAnimate 15s infinite linear;
    }

    .partenaireLogo{
        height: 70px;
        flex: 0 0 150px;
        border-radius: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8px 32px rgba(0,0,0,.05);
        border: 1px solid var(--light-first);
        padding: 8px;
    }
    
    .partenaireLogo img{
        width: 100%; height: 100%;
        object-fit: contain;
    }

    @keyframes scrollAnimate {
        from {translate : 0;}
        to {translate : -100%;}
    }
/* section partenaire */

/* reponsive */
    /* section about us */
        @media screen and (max-width: 1050px){
            .container_about_us{
                flex-direction: column;
            }
            
            .content_about_us:first-child{
                flex: 0 0 100%;
            }
            
            .text_about_us{
                max-height: 100%;
            }
            
            .content_about_us:last-child{
                margin-top: 16px;
            }
        }
        
        @media screen and (max-width: 450px){
            .content_about_us:first-child .logo_about_us{
                right: -8px; bottom: -8px;    
            }
        }
    /* section about us */
/* reponsive */