/**********************SECTION BANNER*about*/
.about{
        padding-top: 7rem;
        background: repeating-linear-gradient(to right, rgba(245, 228, 200, 0.7), rgba(252, 252, 252, 0.6),rgba(188, 179, 166, 1.3));
        /*background-color: #f2f2f2;*/
        display: flex;
        align-items: center;
        flex-wrap: wrap;
}
.about .content{  
        display: flex;
        flex-wrap: wrap;
        align-items: center;   
        gap: 2rem;
        position: relative;
}
.about .content .text { 
        position: relative;
        flex:1 1 41rem;
        align-items: center;
        padding-left: 1rem;
        padding-right: 1rem;
        z-index: 1;
}
.about .content .text h1{
        font-family: "Montserrat", sans-serif;
        color: var(--peru);
        font-weight: 300;
        font-size:4.1rem;
        margin-bottom:2rem;
}
.about .content .text p{
        font-family: "Open Sans", sans-serif;
        font-size: 1.8rem;
        font-weight: 300;
        line-height: 2; 
        margin-bottom: 1rem;
        color: var(--light-black);
        padding: 1rem 0;
        line-height: 2;   
}
.about .content .image{
        flex:1 1 41rem;
        position: relative;
        border: 1px solid lightgray;
       /* background-color: transparent;*/
    }
    
.about .content .image::after{
        content: "";
        width: 100%;
        height:100%;   
        background-color: #909292;    
        position: absolute;
        border-left: 2px solid var(--peru);
        border-bottom:2px solid var(--peru);
        top: 20px;
        left: -20px;
        z-index: -1;
}
.about .content .image img{
        width: 100%;
}

/**********************************MISSION&VISION*about**********************/
.mission-vision{
        background: url(/images/logo-linkoval4.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: conver;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap:2rem;
}  
.mission-vision .image-about {
        flex: 1 1 41rem; 
        position: relative;    
}
.mission-vision .image-about img{
        width:100%;
        border-right:2px solid var(--peru) ;  
        border-bottom:2px solid var(--peru) ;  
}
.mission-vision .contenu{
        flex: 1 1 41rem;
        z-index: 2;  
}
.mission-vision .contenu .title{
        font-size: 4.2rem;
        color:var(--peru);
        margin:3rem 0; 
}
.mission-vision .contenu p{
        font-size: 1.8rem;
        color: var(--light-black);
        padding: 1rem 0;
        line-height: 2; 
}


/**********************METHODOLOGIE**about*************/
.méthodologie{
        display: flex;
        align-items: center;
        padding-left: 1rem;
        padding-right: 1rem;
        /*flex-direction: row-reverse ;*/
        gap:4rem;
}  
.méthodologie .image-about {
        flex: 1 1 41rem; 
        position: relative;     
}
.méthodologie .image-about img{
        width:100%;
        border-right:2px solid var(--peru) ;  
        border-bottom:2px solid var(--peru) ;
        margin-top: 3rem;
}
.méthodologie .image-about::after{
        content: "";
        width: 100%;
        height:100%;
        background-color: rgb(146, 144, 144);
        position: absolute;
        background-size: contain;
        top: 20px;
        right: -20px;
        z-index: -1;       
}
.méthodologie .contenu{
        flex: 1 1 41rem;
        z-index: 2;
        padding-left: 2rem;  
}
.méthodologie .contenu .bg-img{
        background: url("/images/logo-linkoval-bg1.png")no-repeat center fixed;
        background-position: right;
        background-size: contain;
        object-fit:contain;
}
.méthodologie .contenu .title{
        font-size: 4.2rem;
        color:var(--peru); 
}
.méthodologie .contenu ul li{
        list-style-type: none;
}
.méthodologie .contenu ul li strong{
        color:coral;
        font-weight:500;
}
.méthodologie .contenu p{
        font-size: 1.8rem;
        color: var(--light-black);
        padding: 1rem 0;
        line-height: 2; 
}
.méthodologie .contenu p span{
        color:rgb(141, 132, 11);
        font-weight: 700;
        font-family: "Dancing Script",sans-serif;
        font-size: 1.8rem;
}


 /*****************************Mot du président****************/
 .mot-fondateur{
        margin-top: 20rem;
        display: flex;
        text-align: center;
        background: url(/images/tableau3.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: right;
        object-fit: contain;
        background-color: #494747;
        gap:2rem;
        position: relative;
        height: 70rem;
        /*z-index: 1;*/
 }
 .mot-fondateur::before{
        content: "";
        width: 100%;
        height:100%;
        background-color: #656464;
        position: absolute;
        background-size: cover;
        top: 0;
        left: 0;
        opacity: .6;
        /* z-index: 1;*/
 }
 .mot-fondateur .medaille{
        position: absolute;
        width:45%;
        height: 100%;
        background-color: #222;
        border-radius: 10px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        top:0;
        left: 0;
        z-index: 1;
        padding: 1rem 1.5rem;
        gap:2rem;   
 }
.mot-fondateur .medaille .img-fondateur{
        width: 100%;
        flex:1 1 10rem;
        /*background-color: #494747;*/
        background-color: #343131;
       /* border-radius: 10px;*/
         box-shadow: 3px 2px 9px 1px rgb(74, 71, 71);
 }
.mot-fondateur .medaille .img-fondateur img{
        width: 100%;
       /*border-radius: 10px;*/
} 
.mot-fondateur .medaille .content-fondateur{
        width: 100%;
        flex:1 1 20rem;
        gap: 1.3rem;
        padding: 1rem 1.5rem;
        border-bottom: 1px solid white;
        border-left: 1px solid white;
        text-align: center;    
 }
.mot-fondateur .medaille .content-fondateur h2 {
        color: #fff;
        font-size:2.4rem; 
        margin-bottom: 1.5rem;  
 }
.mot-fondateur .medaille .content-fondateur q {
        color: #fff;
        font-size:1.6rem;   
 }
.mot-fondateur .medaille .content-fondateur q em{
        color: #fff;
        font-size:1.6rem;
        font-family: "Open Sans", sans-serif; 
        text-transform:none ; 
 }
.mot-fondateur .medaille .content-fondateur span{
        color:rgb(255, 125, 3);
        font-size:1.8rem;
        margin-top:1rem;
 }



 /*********************************************************************/
 /*********************************************************************/
 /*************************RESPONSIVE************************************/
 
@media(max-width:2559px){
html{
        scroll-padding-top:9rem;       
}

}


/*************************MAX-WIDTH 1366PX**********************/
@media(max-width:1366px){

}

/************************MAX-WIDTH 1200PX*********************/
@media(max-width:1200px){
        /*****BANNER********/
.banner{
        height: 30rem;
        padding-top: 7rem;
}
.about{
        padding-top: 15rem;
}

/****FOOTER******/
}



/*****************************MAX WIDTH 1024PX**********************/
@media(max-width:1024px){
html{
        scroll-padding-top:10.2rem ;
    }
/*****BANNER********/


#scrollToTop{
        font-size:1.8rem;
 }
  /***ABOUT***/
.about{
        padding-top:10rem;
        height: auto;
  }
.about .content .text .bg-img h1{
        font: size 3.5rem;
}
.about .content .text .bg-img p{
        font-size:1.6rem;
}

/***MISSION-VISION***/
.mission-vision{
        padding-top: 4rem;
        height: auto;
      
}
.mission-vision .contenu .title{
        font-size:3.6rem;
}

/***section méthodologie***/
.méthodologie{
        padding-top: 6rem;
        margin-top: 4rem;
        height: auto;
}
.méthodologie .contenu .title{
        font-size:3.6rem;
}
.méthodologie .contenu p{
        font-size: 1.6rem;
}

/***section mot-fondateur***/
.mot-fondateur .medaille .content-fondateur h2 {
        font-size: 1.6rem;
}
.mot-fondateur .medaille .content-fondateur q {
        font-size: 1.4rem;
}
.mot-fondateur .medaille .content-fondateur q em{
        font-size: 1.4rem;
}
.mot-fondateur .medaille .content-fondateur span{
        font-size: 1.4rem;
}
}


 /******************************RESPONSIVE 991PX START*services*****************************/

@media(max-width:990px)  {

 
section{
        padding: 3rem 2rem;    
    }

html{
        font-size: 55%;
   
    }

/*****BANNER***/


/****ABOUT****/
.about{
        padding-top:15rem;

    }
    
/****************************METHODOLOGIE***********************/
.méthodologie .image-about img{
        border:none;
}
.méthodologie .image-about::after{
       display:none; 
}
}


/**************************MAX-WIDTH 912PX************/
@media(max-width:912px)  {

.about{
        padding-top:15rem;
    }   
}
/***************MAX-WIDTH:872PX*/


/****************************MAX WIDTH 853PX*ASUS ZENBOOK FOLD************/
@media(max-width:853px)  {

.about{
        padding-top: 10rem;
  }

}

/*************MAX-WIDTH 820PX**********/

@media(max-width:820px){
html{
        scroll-padding-top: 8rem;
}

}
/***************************************RESPONSIVE 791PX START*tarifs*****************************/

@media(max-width:790px)  {


/******ABOUT*******/
.about{
        padding-top: 10rem;
  }
.about .content-banner .text{   
        z-index: 1;   
}
.about .content-banner {
        gap:60px;
        flex-direction: column;
}
.about .content-banner .image::after{ 
        display:none;
}
.about .content-banner .image img{
        border: none;   
}
.about .content-banner .text h1{   
        font-size:3rem;
        margin-bottom:2rem;
}

/********MISSION-VISION*******/
.mission-vision .image-about {
        margin-top: 4rem;  
}

/********METHODOLOGIE********/
.méthodologie{
        flex-direction: column;
}
.méthodologie .contenu{
        flex-direction: column;
        margin-top :3rem;
}


/*******MOT-FONDATEUR*******/
 .mot-fondateur .medaille{
        position: absolute;
        width:55%;
        height: 100%;   
 }

}


/************************MAX-WIDTH*768PX***************************/
 @media(max-width:768px){

/*****HEADER-INDEX********/


 /****ABOUT****/
.about{
        height: auto;
  }
.about .content .text .bg-img h1{
        font-size:3rem;
}
.about .content .text .bg-img p{
        font-size:1.4rem;
}

/********MISSION-VISION******/
.mission-vision{
        height: auto;
}
.mission-vision .contenu .title{
        font-size:3rem;
}
.mission-vision .contenu p{
        font-size: 1.4rem;
        font-weight: 400;
}

/*****METHODOLOGIE***/
.méthodologie{
        padding-top: 10rem;
        height: auto;   
}
.méthodologie .contenu .title{
        font-size:3rem;
}
.méthodologie .contenu p{
        font-size: 1.4rem;
}

/*****MOT-FONDATEUR*****/

.mot-fondateur .medaille .content-fondateur h2 {
        font-size: 1.6rem;
}
.mot-fondateur .medaille .content-fondateur q {
        font-size: 1.4rem;
}
.mot-fondateur .medaille .content-fondateur q em{
        font-size: 1.4rem;
}
.mot-fondateur .medaille .content-fondateur span{
        font-size: 1.4rem;
}

 }

/*******************************************MAX WIDTH 700PX*tarifs******************************/
@media(max-width:699px) {
.méthodologie{
        padding-top:6rem;
}
}
/******************************RESPONSIVE SURFACE DUO 540px*services*****************************/
@media(max-width:540px) {
        .about{
                padding-top: -6rem;
        }

 /*****BANNER********/
.banner{
        height: 19rem;
        padding-top: 7rem;
}
.banner .content-banner .text p{
        font-size:1.7rem;
 } 
.about{
        padding-top: 15rem;
}
}

@media(max-width:510px){

.about{
        padding-top: 10rem;
}
}

/******************************************MAX-WIDTH 450px*****************/
@media(max-width:450px){

 html{
        font-size: 50%;
  }
/*****BANNER********/
.banner{
        height: 18rem;
        padding-top: 7rem;
}
 /****ABOUT****/
.about{
        height: auto;
        padding-top:4rem;
  }
.mission-vision{
        
        /*border: 1px solid red;*/
        height: auto;
        display: flex;
        justify-content: space-between;

}
/*.mission-vision .contenu{       
        border: 1px solid blue;
}
.mission-vision .image-about{       
        border: 1px solid blue;
}*/
.méthodologie{
       /* display: flex;
        flex-direction: column;*/
        height: auto;
       /* border: 1px solid red;*/
        margin-top: 0;
        background-color: rgb(237, 233, 227);
    }
.méthodologie .contenu .bg-img{
        padding:1rem;
        border-radius: 15px;
       
    }
    .mot-fondateur{
        margin-top: 0;
    }
}

/****************************MAX-WIDTH 430PX********************/
@media(max-width:430px){
html{
        scroll-padding-top:8rem;
}
.about{
        padding-top:4rem;
        height: auto;
        
}
.about .content .text{
        margin-bottom: 2rem;
}
.méthodologie{
        padding-top:4rem;
        
}
.mot-fondateur .medaille{
        width:65%;  
 }
.mot-fondateur .medaille .img-fondateur{
        display:none;  
 }


}
@media(max-width:390px){
/*****BANNER********/
.banner{
        height: 16rem;
        padding-top: 7rem;
}
.méthodologie{
        height:auto;
    }
.mot-fondateur .medaille .img-fondateur img{
        display:none;  
 }    
/*.mot-fondateur {   
       
        height: 100vh;
 }*/
}
/******************MAX-WIDTH*320PX**************/
@media(max-width:380px){
       
.méthodologie{
        height:auto;
    }
.mot-fondateur {          
        height: 50vh;
 }
}