@media screen and (max-width : 1000px){
 .mom{
   width: 100%;
 }
 .am{
   width: 50%;
 }
 ul{
   width: 100%;
 }
 .pwat{
   flex-direction: column;
 }
 .pwa{
   flex-direction: column;
 }
 .ken{
   flex-direction: column;
 }
 .junior{
   flex-direction: column;
 }
 .djeff{
   flex-direction: column;
 }
 }

   @media screen and (max-width: 1350px) {
      .djeyy {
          width: 99%;
      }
  
      .ppj {
        width: 99%; 
      }
      .djeo{
         width: 99%SSS;
      }
      .son{
         width: 100%;
         flex-direction: column
      }
  
 }

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap');
 nav ul {
    list-style: none;
    display: flex;
    background-color: rgb(11, 11, 109);
    box-shadow: red 2px 2px;
    justify-content: center;
    border-radius: 5px;
    display: swap;
 }
 nav ul li{
    padding: 10px;
 }
 nav ul li a{
    color: white;
    text-decoration: none;
    font-size: 25px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 }
 nav ul li a:hover{
    color: red;
 }
 nav {
    justify-content: center;
 }
nav{
    text-align: center;
}
.none{
    position: relative;
    bottom: 350px;
    text-align: center;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color:white;
    font-size: 45px;
    text-shadow: white 2px 2px;
    display: swap;
}
.mo{
    color: black;
}
.ppj{
   width: 800px;
   text-align: center;
   margin-left: 310px;
   margin-top: 20px;
   font-size: 20px;
   color: #fff;
}
.mom{
    border-radius: 15px;
    flex-wrap: wrap;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
    display: swap;
}

.debordes{
    width: 500px;
    height: 500px;
    margin-right: 20px;
}
.son{
    width: 900px;
    height: 600px;
    margin-left: 20px;
    margin-top: 10px;
    padding-top: 25px;
}

.djeff{
    display: flex;
    justify-content: center;
    border-radius: 15px;
   background-color: rgb(11, 11, 109);
   box-shadow: rgb(230, 18, 18) 2px 2px 2px ;
   bottom: 200px;
    position: relative;
 }
.djeyy{
    font-size: 20px;
    margin: 40px;
    color: rgb(241, 241, 241);
    flex-wrap: wrap;
    flex-direction: column;
}
.dje{
   margin: 10px;
   color: rgb(8, 1, 1);
   width: 600px;
   padding-left: 80px;w
}
.log{
    margin-top: 100px;
    max-width: 100%;
}
.djea{
    text-align: center;
    background: linear-gradient(rgb(59, 53, 53),rgb(59, 53, 53),rgb(59, 53, 53) );
    position: relative;
    bottom: 30px;
    border-radius: 15px;
}
.nbn{
   display: flex;
   position: relative;
   justify-content: center;
   margin: 15px;
   max-width: 100%;
}
.logo4{
   padding-left: 160px;
   position: relative;
   justify-content: center;
}
.jay:hover{
   margin-left: 50px;
}
.djefff{
   padding-top: 30px;
   margin: 25px;
}
.jay{
    margin: 12px;
    border-radius: 10px;
}
.BOB{
    font-weight: bold;
    font-size: 35px;
    margin: 45px;
    color: rgb(11, 11, 109);
    position: relative;
    bottom: 50px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.

.Bab{
   font-weight: bold;
   font-size: 35px;
   margin: 45px;
   color: rgb(11, 11, 109);
   position: relative;
   bottom: 100px;
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.ken{
    display: flex;
    justify-content: center;
    border: solid rgb(11, 11, 109) 2px;
    border-radius: 15px;
    position: relative;
    bottom: 100px;
}
.jjj{
   width: 1050 px;
   height: 590px;
   box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
   background-color: #fcf3f3;
   bottom: 90px;
   position: relative;
   background: linear-gradient(rgb(59, 53, 53),rgb(168, 168, 214),#e28d8d );
   border-radius: 15px;
   flex-direction: column;
}
.jjjm{
   width: 1050 px;
   height: 630px;
   box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
   background-color: #fcf3f3;
   bottom: 90px;
   position: relative;
   background: linear-gradient(rgb(59, 53, 53),rgb(168, 168, 214),#e28d8d );
   border-radius: 15px;
}
.jjjp{
   width: 1050 px;
   height: 1000px;
   box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
   background-color: #fcf3f3;
   bottom: 200px;
   position: relative;
   background: linear-gradient(rgb(59, 53, 53),rgb(168, 168, 214),#e28d8d );
   border-radius: 15px;
        flex-direction: column;
}
.pp{
   margin: 10px;
   padding-top: 20px;
   flex-wrap: wrap;
   
}
.ppp{
   margin-top: 100px;
   padding-top: 20px;
   font-size: 15px;
   text-align: center;
   color: #fff;
   font-size: 20px;
}
.moun{
   display: flex;
   position: relative;
   justify-content: center;
}
.petit{
   justify-content: center;
   position: relative;
   width: 900px;
   margin-left: 310px;
}

.petit2{
   width: 360px;
   height: 400px;
   box-shadow: 3px 3px 3px rgb(8, 8, 8);
   background-color: white;
   border-radius: 15px;
   margin: 10px;
   max-width: 100%;
}
.vv{
   display: flex;
   position: relative;
   justify-content: center;
   max-width: 100%;
   flex-direction: row-reverse;
}

 .djeo{
    font-size: 20px;
    margin: 40px;
    color: rgb(7, 6, 6);
 }
 .sonn{
    width: 1000px;
    height: 400px;
    margin-left: 120px;
    padding-top: 25px;
 }

 .desbordes{
    width: 500px;
    height: 400px;
    margin-right: 20px;
 }
 .logo2{
    margin-top: 40px;
 }
 .logo3{
   margin-top: 20px;
   margin-right: 400px;
   position: relative;
 }
.lk{
   width: 1000;
   height: 100px;
   background-color: rgb(59, 53, 53);
   border-radius: 5px;
   margin-bottom: 20px;
   position: relative;
}
.lkk{
   width: 1000;
   height: 100px;
   background-color: rgb(59, 53, 53);
   border-radius: 5px;
   position: relative;
   margin-bottom: 25px;
}
.lj{
   margin: 30px;
   font-size: 20px;
   text-align: center;
   color: white;
}
.lj{
   margin: 30px;
   font-size: 20px;
   text-align: center;
   color: white;
}
 .junior{
    display: flex;
    justify-content: center;
    background-color: rgb(247, 247, 253);
    border-radius: 15px;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
 }
 .log{
   color: #fff;
   margin-top: 0px;
 }
.juni{
   display: flex;
    justify-content: center;
    border-radius: 15px;
}
 .mm{
    margin: 28px;
    border-radius: 15px;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
    max-width: 100%;
    flex-wrap: wrap;
    flex-direction: initial;
 }
 .come{
   font-size: 18px;
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   text-align: center;
   position: relative;
   bottom: 15px;
 }
 .mm:hover{
   margin-right: 20px;
 }
 .comu{
    text-align: center;
    font-size: 30px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 }
 .co{
    text-align: center;
    font-size: 15px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: rgb(11, 11, 109);
 }
 .basse{
    text-align: center;
 }
 .com{
    width: 370px;
    height: 200px;
    margin: 35px;;
    color: white;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    flex-wrap: wrap;
 }
 .pwa{
    display: flex;
    justify-content: center;
    background-color: rgb(247, 247, 253);
    border-radius: 15px;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
    margin-top: 35px;
    
 }
 .pwat{
   display: flex;
   justify-content: center;
   border-radius: 15px;
   margin-top: 35px;
 }
 .me{
    margin: 35px;
    box-shadow: rgb(11, 11, 109) 0px 0px 2px 2px;
    border-radius: 15px;
    flex-wrap: wrap;
 }
 .me:hover{
   margin-top: 50px;
 }
 .met{
   margin: 15px;
   box-shadow: rgb(11, 11, 109) ;
   border-radius: 15px;
   flex-wrap: wrap;
   transition: calc(1,2);
   justify-content: center;
   position: relative;
   max-width: 100%;
}
.blo{
   width: 900px;
   justify-content: center;
   position: relative;
   margin-left: 300px;
   padding-top: 50px;
   color: #fff;
   font-size: 20px;
}
.bla{
   justify-content: center;
   position: relative;
   background: linear-gradient(rgb(59, 53, 53),rgb(168, 168, 214),#e28d8d );
   border-radius: 15px;
   bottom: 20px;
}
.ruth{
   display: flex;
}
 .met:hover{
   margin-top: 50px;
 }
 .jos{
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    position: relative;
    color: rgb(11, 11, 109);
    font-size: 25px;
    text-align: center;
 }
 .sonnn{
   width: 700px;
   height: 400px;
   margin-left: 120px;
   padding-bottom: 70px;
   position: relative;
 }
 .mango{
    background-color: white;
    text-align: center;
    width: 400px;
    height: 30px;
    font-size: 25px;
    margin-left: 40px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    position: relative;
    color: red;
 }
 .mangi{
    background-color: white;
    text-align: center;
    width: 400px;
    height: 30px;
    font-size: 25px;
    margin-left: 40px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    position: relative;
    color: red;
 }
 .manga{
    background-color: white;
    text-align: center;
    width: 400px;
    height: 30px;
    font-size: 25px;
    margin-left: 40px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    position: relative;
    color: red;
 }
 .bnb{
   width: 700px;
   height: 350px;
   background-color: rgb(247, 247, 253);
   border-radius: 15px;
   box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
   bottom: 20px;
   position: relative;
   margin: 30px;
 }
 .bnbn{
   width: 500px;
   height: 200px;
   background-color: rgb(247, 247, 253);
   border-radius: 15px;
   box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
   bottom: 20px;
   position: relative;
   margin: 30px;
   justify-content: center;
 }
 .bnbo{
   width: 700px;
   height: 400px;
   background-color: #dc1a1a;
   position: relative;
   text-align: center;
   margin-left: 400px;
 }
 .contatez{
   margin-top: 50px;
 }
 .mama{
   margin: 40px;
   width: 990px;
   color:white;
   font-size: 15px;
   font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
 }
 .djeryy{
   display: flex;
   justify-content: center;
   background-color: rgb(11, 11, 109);
   border-radius: 15px;
   box-shadow: rgb(230, 25, 25) 2px 2px 2px ;
   flex-wrap: wrap;
 }
 .am{
   width: 1520px;
   height: 600px;
   position: relative;
   border-radius: 15px;
   bottom: 100px;
   flex-wrap: wrap;
   max-width: 100%;
 }
 .bmk{
   font-size: 50px;
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   font-weight: bold;
   color: blue;
 }
 .B{
   font-weight: bold;
    font-size: 35px;
    margin: 30px;
    color: rgb(11, 11, 109);
    position: relative;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 }
 .dlo{
   background-color: blue;
   height: 600px;
   margin-top: 25px;
   border-radius: 20px;
   margin: 15px;
 }
/* section tableau*/
table {
   width: 100%;
  background: linear-gradient(black,blue,#da2a2a );
   margin-bottom: 20px;
  border-collapse: collapse;
}

th, td {
   border: 1px solid #da2a2a;
   padding: 8px;
   text-align: left;
   color: #ffffff;
   text-align: center;
   
}

th {
 background: linear-gradient(black,blue,#da2a2a );
   
}

tr:nth-child(even) {
   background-color: #da2a2a;
}

tr:hover {
   background-color: rgb(221, 45, 45);
}


/* section contact */
.title{
   font-family:'Franklin Gothic Medium', sans-serif;
   color: rgb(11, 11, 109);
}
form{
   text-align: center;
}
.contac{
   margin: 20px;
}
.title{
   text-align: center;
   position: relative;
   bottom: 100px;
}

.contac {
   max-width: 500px;
   margin: auto;
   background-color: rgb(11, 11, 109)#fff;
   padding: 20px;
   border-radius: 8px;
   box-shadow: 0 0 10px rgba(0,0,0,0.1);
   position: relative;
   bottom: 80px;
}
.form-group {
   margin-bottom: 20px;
}
.form-group label {
   font-weight: bold;
   display: block;
   margin-bottom: 5px;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
   width: calc(100% - 25px);
   padding: 8px;
   font-size: 20px;
   border: 1px solid white;
   font-family: 'Lucida Sans',sans-serif;
   border-radius: 4px;
   color: #fff;
   box-shadow: 1px 1px 1px rgb(11, 11, 109);
}
.form-group input[type="email"]:hover{
   background-color:rgb(11, 11, 109) ;
}
.form-group input[type="text"]:hover{
   background-color:rgb(11, 11, 109) ;
}
.form-group textarea:hover{
   background-color:rgb(11, 11, 109) ;
}
h2{
   text-align: center;
}
.form-group textarea {
   height: 100px;
}
.form-group input[type="submit"] {
   background-color: rgb(11, 11, 109);
   padding: 10px 20px;
   borer: none;
   color: white;
   border-radius: 4px;
   cursor: pointer;
   font-size: 18px;
}
.form-group input[type="submit"]:hover {
   background-color: red ;
}
/* section footer */
footer{
   background-color: rgb(11, 11, 109) ;
   text-align: center;
   padding: 15px 10px;
   border-radius: 5px;
   box-shadow: 1px 1px 1px red;
   margin-top: 100px;
}
span{
   color: red;
}
.bdr{
   text-decoration: none;
   color: white;
}
.foot{
   position: relative;
   text-align: center;
   margin: 10px;
   margin-left: 50px;
   top: 100px;
}
.no{
   text-align: center;
   color: white;
   font-size: 40px;
   margin-left: 80px;
   top: 90px;
   position: relative;
}