*{
    margin:0 ;
    padding: 0; 
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
}
/*
footer{
    background-color: #3586ff;
    position: relative;
    width: 100%;
    min-height:100px;
    display: flex;
    flex-direction: column;
}
footer .aicd{
    width: 100%; 
    display: flex;
    align-items: center;
    justify-content: center;
} 
.aicd p{
    width: 30%;
}*/
.main-menu{
    height: 60px;
    width: 100%; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(0, 134, 224);
}
.main-menu .head{ 
    font-size: 25px;
    display: flex; 
    width: 100%;
     color: white; 
     justify-content: flex-start;
     align-items: center;
     height: 100%; 
     margin-left: 1rem;
}  
.main-menu .head span{
    font-size: 25px;
    font-family: poppins, sans-serif;
    font-weight: 600;
    margin-right: 10px;
}

.menu span{
    margin-right: 2rem;
}

.menu span .my-item{
    text-decoration: none;
    color:white; 
    font-family: poppins, sans-serif;
}
.my-item:hover{
    cursor:pointer;
}
.main-menu .menu{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    width: 100%;

}
.aicd_edit{ 
    font-family: poppins, sans-serif;
    background-color:#dc3545 ; 
     transform:translate(0%, -50%);
}
.my_btn, #btn_btn{
    background:none; 
    color:rgb(0, 134, 224);
    font-weight:bolder;
    border:2px solid rgb(0, 134, 224); 
    border-radius:50px;
    padding:10px 20px;
}
.my_btn:hover{
    background:rgb(0, 134, 224);
    color:white;
    transition:.5s;
}
#btn_btn:hover{
    background:rgb(0, 134, 224);
    color:white;
    transition:.5s;
}

.new_model{
    background-color: rgba(0, 0, 0, 0.516);
    transform:translate(0%, -50%);
}
.welcome{ 
    padding-top: 1rem;
    color: rgb(138, 138, 138);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2rem;
    justify-content: center;
    width: 100%;
}
.welcome h1{
    font-family: 'Poppins', sans-serif;
    position: absolute;
margin-top: -18rem;}
.welcome p{
    width: 50%;
  margin-top: 3rem;
}
.MotDuPresident{
    display:flex; 
    width:100%; 
    
}
.MotDuPresident img{
    width: 432px;
    height: 310px;
}
.MotDuPresident p {
    font-size:15px;
    width:70%; 
    font-family: 'Poppins', sans-serif;
font-family: 'PT Sans', sans-serif;
    margin-top:40px;
}
.comment{
    margin-left:2rem;
}
#btn_btn{
    margin-top:3rem;
}
.prin_annonce{
    display:flex;
    width:100%; 
    font-family:poppins,sans-serif;
    justify-content:center;
    height:60px;
    margin-top:2rem; 
    color:#4f4f4f;
}
.menu_con i{
    font-size:25px;
    color:white;
    float:right; 
    cursor:pointer;
    pointer-events: none;  
    display: none; 
    
}
.prin_annonce h1{
    position:absolute; 
    background:white;
    padding:0px 30px;
    margin-top:-1.5rem;
}
.prin_annonce::before{
    content:'';
    width:80%;
    height:2px;
    background:#41464b;
}
.vision{ 
    margin-top: 5rem;
    background:#000617;
    height:500px; 
    color:white; 
    display:flex; 
    justify-content: space-between;
    align-items: center;
}
.unTitre{
    display: flex;
    align-items: center;
  
}
.unTitre i{
    font-size: 27px;
    margin-left:1rem;
    
}
.vision p{ 
    margin-top:1rem;
    width:80%;
     font-family:poppins,sans-serif;
}
.vision img{
    width:500px; 
    margin-right:3rem;
}
#grant_title{
    background-color: #717171;
}
h3{
    font-weight: 700;
}
@media screen and (max-width:800px) {
 .MotDuPresident img{
    width:300px;
     height:230px; 
     margin-right:30px;
 }   
 .main-menu .menu span{
     margin-bottom: 2rem;
 }
    .main-menu .menu{
        display:none;
    }
   .menu.open{
        display:flex;
       flex-direction:column; 
       transform:translate(-130%,0px)
    }
     .main-menu .menu_con i{
         display:block;
         justify-content:flex-end;
         float:right; 
         right:2rem;
         top:20px;
     }
    .main-menu .menu_con{
        position: absolute;
        float:right; 
         right:2rem;
         transition:1s ease;
         top:20px;
    }
      .main-menu .menu_con:hover{
        cursor:pointer;
    }
    .main-menu{
       /* height:350px;*/
       transition: 1s ease-in-out;
        align-items:flex-start;
    }
       .main-menu.show{
        height:350px;
    }
    .main-menu .head{
        align-items:flex-start; 
        margin-top:0.7rem;  
    }
    .MotDuPresident p{
        width:350px;
    }
    .vision img{
        width:300px;
    }
    .vision{
        margin-bottom:2rem;
    }
    .new_model{
       transform:translate(0px,-20px);
    } 
    .menu_con.rotation{
        transform:rotate(-50deg); 
       
    }
   
}
@media screen and (max-width:700px){
   footer p{
       width:80%;
   } 
    .act_all_cards{
    transform:translate(-10px,0px);
    }
    .MotDuPresident{
    display:grid; 
    }
    .MotDuPresident .comment{
        transform:translate(0%,70%); 
        justify-content:center;
        
    }
    .MotDuPresident img{
           transform:translate(50%,-320px);
    }
     .vision .comment{
        transform:translate(0%,70%); 
        justify-content:center;
        
    }
    .vision img{
           transform:translate(-80%,-100px);
    }
    .vision p{
        width:400px;
    }
    footer{
        margin-top:50px;
    } 
    .vision{
        height:700px;
    }
}
@media screen and (max-width:650px){
       .n1{
        font-size:14px;
           height:150px;
    }
   .n1 #btn_btn{
        transform:translate(10px,-50px);
    }
    .n2{
        font-size:14px;
        height:200px;
    }
   .n2 #btn_btn{
        transform:translate(10px,-50px);
    }
    .n3{
        height:240px;
        font-size:14px;
    }
   .n3 #btn_btn{
        transform:translate(10px,-60px);
    }
       .n4{
        font-size:14px;
           height:200px;
    }
   .n4 #btn_btn{
        transform:translate(10px,-63px);
    }
    .vision img{
        transform:translate(-110%,-150px);
    }
}
@media screen and (max-width:540px){
    
   .n1 #btn_btn{
        transform:translate(10px,-30px);
    }
    .n2{
        font-size:14px;
        height:130px;
    }
    .n2 h3, .n3 h3, .n4 h3, .n1 h3{
          font-size:15px;
        
    }
   .n2 #btn_btn{
        transform:translate(10px,-40px);
    }
    .n3{
        height:140px;
        font-size:14px;
    }
   .n3 #btn_btn{
        transform:translate(10px,-40px);
    }
       .n4{
        font-size:14px;
           height:140px;
    }
    .new_model p {
        display:none;
    }
   .n4 #btn_btn{
        transform:translate(10px,-33px);
    }
    .vision img{
        transform:translate(-110%,-150px);
    }
    .aicd_edit{
        height:100px;
    }
    .aicd_edit h1{
        font-size:18px;
    }
    .welcome p{
     transform:translate(10px,0px);
        width:90%;
    }
     .MotDuPresident img{
           transform:translate(20%,-320px);
    }
}
@media screen and (max-width:450px){
     .vision img{
        transform:translate(-100%,-150px);
         width:250px;
    }
    .vision .comment p{
    font-size:14px; 
    width:250px;
    }
    
}
@media screen and (max-width:400px){
     .vision img{
        transform:translate(-100%,-150px);
         width:250px;
    }
    .MotDuPresident img{
        width:230px;
        height:200px;
    }
    .MotDuPresident p{
       width:80%;
    }
    .vision .comment p{
    font-size:14px; 
    width:250px;
    }
    
}