body{
    font-family: Verdana, sans-serif;
    color:rgba(3, 32, 57, 0.866);
    background-color: aliceblue;
    padding: 0;
    margin: 0;
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
}

.darkmode{
    color: aliceblue;
    background-color: rgba(0, 0, 0, 0.848);
}

   /* Barre de navigation */
        nav {
            background-color: #021637;
            padding: auto 30px;
            position: relative;
            height: 15vh;
            align-content: center;
            align-items: center;
            width: 100vw;
        }
        nav img{
            position: absolute;
            top: 0;
            right: 10px;
            width: 10vw;
            height: 15vh;
        }
        
        @media screen and (max-width : 600px){
            nav img{
                display: none;
            }
        }

        .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /* Menu principal */
        .menu {
            list-style: none;
            display: flex;
            gap: 25px;
        }

   .menu li a {
            text-decoration: none;
            color: white;
            transition: 0.3s;
        }


  .menu li i{
            text-decoration: none;
            color: white;
            transition: 0.3s;
  }

        .menu li a:hover {
            color: orange;
        }

        /* Bouton hamburger */
        .hamburger {
            display: none;
            flex-direction: column;
            gap: 6px;
            cursor: pointer;
            width: 100vw;
        }

        .hamburger span {
            width: 30px;
            height: 4px;
            background-color: white;
            border-radius: 5px;
        }

        /* Bouton de fermeture */
        .close {
            display: none;
            color: white;
            font-size: 30px;
            cursor: pointer;
        }

        /* RESPONSIVE */
        @media screen and (max-width: 600px) {

            .menu {
                display: none;
                flex-direction: column;
                position: absolute;
                top: 70px;
                left: 0;
                width: 100vw;
                background-color: #071a44;
                padding: 10px 0px;
                text-align: left;
                z-index: 99;
            }

            .menu.active {
                display: flex;
            }

            .hamburger {
                display: flex;
            }

            .close.active {
                display: block;
            }

            .hamburger.hidden {
                display: none;
            }

        }



.la-search{

    width: 1.3rem;
    height: 1.3rem;
}



 #btnn {
    display: none;
    margin: 1px 5px;
    padding: 5px;
    text-align: right;
    /* border: solid 2px rgba(5, 54, 96, 0.523);
    border-radius: 15px; */
} 

#btnn input{
   width: 30vw;
   border: solid 2px rgba(3, 42, 75, 0.302);
   padding: 5px 10px;
   font-size: 1.5rem;
   font-family: Verdana, sans-serif;
   border-radius: 1.3rem;
   margin: 0 5px;

}

#btnn button{
   padding: 5px ;
   font-size: 1.5rem;
   font-family: Verdana, sans-serif;
   border-radius: 20px;
   margin: 0 5px;
}

.navig a{
    text-decoration: none;
    color: aliceblue;
    cursor: pointer;
    font-size: 1rem;
    margin-inline: 1rem;
    text-transform: uppercase;
    place-items: center;
} 
.navig :hover{
     color: rgb(8, 8, 193);
     background-color: aliceblue;
     background-size: 100%;
     font-weight: bold;
     font-size: 1.3rem;
     padding: 1px;
     /* transition: transform 0.3s ease-in-out; */
} 

.donate{
    background-color: brown;
    color: aliceblue;
    border-radius: 1.3rem;
    padding-left: 0.7rem;
    padding-right: 0.7rem;
    font-weight: bold;
}

/* .donate :hover{
     color: darkblue;
     background-color: aliceblue;
     background-size: 100%;
     font-weight: bold;
     transition: transform 0.3s ease;

} */

#sun{
    width: 2rem;
    color: #eef2f7;   
    z-index: 100;
}


/* .band{
    overflow-x: hidden;
    white-space: nowrap;
} */

@media screen and (max-width:600px){
    .band{
        display: none;
    }
}

.band a{
    display: flex;
    color: aliceblue;
    background-color: red;
    align-items: center;
    align-content: center;
    height: 5vh;
    text-align: center;
    text-decoration: none;
    width: 100vw;
    font-size: 1rem;
    text-transform: capitalize;
}

.band p :hover{
    text-decoration: underline;
    background-color: #071a44;
}

.band p{
    display: inline-block;
    padding-left: 100%;
    animation: defilement 30s linear infinite;
}

@keyframes defilement {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

.une{
    padding: 1.3rem;
    margin: 0.7rem;
    text-align: center;
}
@media screen and (max-width:600px){
    .une{
        width: 80vw
    }
}

.une h2{
    margin: 0.7rem;
    padding: 0.3rem;
    text-decoration: underline;
    
}

.une p{
    width: 50%;
    margin: auto;
    text-align: center;
    place-items: center;
}

@media screen and (max-width:600px){
    .une p{
        width:80vw
    }
}

.une a{
    color: rgb(7, 51, 90);
}

.une a:hover{
    text-decoration: underline;
}

.slider{
            position:relative;
            width:70%;
            height:80vh;
            margin: auto;
            overflow:hidden;
            /* border-radius:10px;

            box-shadow:0 5px 15px rgba(0,0,0,0.3); */
           justify-content: center;
           justify-items: center;
           align-content: center;
           align-items: center;
        }

        @media screen and (max-width : 600px) {
            .slider{
                width: 90vw;
                height: 40vh;
                margin: auto;
                overflow:hidden;
                justify-content: center;
                justify-items: center;
                align-content: center;
                align-items: center;
            }
        }

        .slides{
            display:flex;
            width:100%;
            height:100%;
            transition:transform 0.3s ease-in-out;
        }

        .slide{
            min-width:100%;
            height:100%;
        }

        .slide img{
            width:100%;
            height:100%;
            object-fit:cover;
        }

        .btn{
            position:absolute;
            top:50%;
            transform:translateY(-50%);
            width:3rem;
            height:3rem;
            border:none;
            border-radius:50%;
            background:rgba(0,0,0,0.5);
            color:white;
            font-size:1.5rem;
            cursor:pointer;
            z-index:10;
        }

        .btn:hover{
            background:rgba(0,0,0,0.8);
        }

        .prev{
            left:1rem;
        }

        .next{
            right:1rem;
        }

        .indicators{
            position:absolute;
            bottom:1rem;
            left:50%;
            transform:translateX(-50%);
            display:flex;
            gap:0.5rem;
        }

        .dot{
            width:12px;
            height:12px;
            border-radius:50%;
            background:white;
            opacity:0.5;
            cursor:pointer;
        }

        .dot.active{
            opacity:1;
            background:#007bff;
        }


.apropos{
    border: solid 2px;
    width: 90vw;
    height: 10vh;
    margin: auto;
    
}

@media screen and (max-width : 600px) {
    .apropos{
        width: 95vw;
        height: 10vh;
        margin: auto;  
    }
}

.textengage{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    border: solid 2px;
    border-radius: 10px;
    padding: 5px;
    width: 90vw;
    height: 65vh;
    margin: auto;
}

.textengage img{
    border-radius: 50%;
    padding: 5px;
    width: 40vw;
    height: 60vh;
    margin: auto;
}

@media screen and (max-width : 600px) {
    .textengage{
       display: grid;
       grid-template-columns: repeat(1,1fr);
       grid-template-rows: repeat(2,1fr);
       height: 70vh;
       width: 95vw;
       margin: auto;
    }
.textengage img{
       height: 30vh;
       width: 80vw;
       margin: auto;
        border-radius: 10px;
    }
}

.textengage2{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    border: solid 2px;
    border-radius: 10px;
    padding: 5px;
    width: 90vw;
    height: 65vh;
    margin: auto;
}

.textengage2 img{
    border-radius: 50%;
    padding: 5px;
    width: 40vw;
    height: 60vh;
    margin: auto;
}

@media screen and (max-width : 600px) {
    .textengage2{
       display: grid;
       grid-template-columns: repeat(1,1fr);
       grid-template-rows: repeat(2,1fr);
       height: 70vh;
       width: 95vw;
       margin: auto;
    }
.textengage2 img{
       height: 30vh;
       width: 80vw;
       margin: auto;
        border-radius: 10px;
    }
}

.textengage3{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    border: solid 2px;
    border-radius: 10px;
    padding: 5px;
    width: 90vw;
    height: 65vh;
    margin: auto;
}

.textengage3 img{
    border-radius: 50%;
    padding: 5px;
    width: 40vw;
    height: 60vh;
    margin: auto;
}

@media screen and (max-width : 600px) {
    .textengage3{
       display: grid;
       grid-template-columns: repeat(1,1fr);
       grid-template-rows: repeat(2,1fr);
       height: 70vh;
       width: 95vw;
       margin: auto;
    }
.textengage3 img{
       height: 30vh;
       width: 80vw;
       margin: auto;
        border-radius: 10px;
    }
}

.textengage4{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    border: solid 2px;
    border-radius: 10px;
    padding: 5px;
    width: 90vw;
    height: 65vh;
    margin: auto;
}

.textengage4 img{
    border-radius: 50%;
    padding: 5px;
    width: 40vw;
    height: 60vh;
    margin: auto;
}

@media screen and (max-width : 600px) {
    .textengage4{
       display: grid;
       grid-template-columns: repeat(1,1fr);
       grid-template-rows: repeat(2,1fr);
       height: 70vh;
       width: 95vw;
       margin: auto;
    }
.textengage4 img{
       height: 30vh;
       width: 80vw;
       margin: auto;
        border-radius: 10px;
    }
}

.contactext{
    border: solid 2px rgba(4, 43, 77, 0.698);
    width: 95vw;
    height: 10vh;
}

@media screen and (max-width : 600px) {
    .contactext{
        width: 100vw;
        height: 5vh;

    }
}

.contacter{
    text-align: center;
    /* color:  rgb(7, 51, 90); */
    /* background-color: aliceblue; */
}

.msg{
    display:grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 10px;
    width: 80vw;
    margin:auto;
    padding: 5px;
    font-family: Verdana, sans-serif;
    border: solid 3px rgba(5, 53, 94, 0.131);
}

@media screen and (max-width : 600px) {
    .msg{
       display: grid;
       grid-template-columns: repeat(1,1fr);
       grid-template-rows: repeat(2, 1fr);
       width: 95vw;
       margin: auto;
    }

   .msgmain input{
    width: 80vw;
   }
}

.msgaside{
    border-right: solid 10px rgba(5, 53, 94, 0.131);
    text-align: center;
    align-items: center;
    line-height: 5px;
}
@media screen and (max-width : 600px){
    .msgaside{
        display: none;
        width: 100vw;
        line-height: 2px;
        border-right: solid 2px rgba(5, 53, 94, 0.131);
    }
}

.msgaside i{
    font-size: 48px;
    /* color: rgb(7, 51, 90); */
    margin-bottom: -15px;
}

.msgmain{
    width: 55vw;
    margin: auto;
}

.msgmain form{
    width: 90vw;
    margin: auto; 
}

.msgmain form input, textarea{
    width: 40vw;
    height: 24px;
    border: none;
    padding: 5px 10px 5px 20px;
    color: rgb(239, 244, 248);
    font-size: large;
    font-family: Verdana, sans-serif;
    border-radius: 10px;
    background-color: rgba(5, 36, 64, 0.715);
}



.msgmain form textarea{
    height: 108px;
    resize: none;
}


.msgmain form button{
    width: 108px;
    height: 40px;
    color: rgba(3, 32, 59, 0.651);
    font-size: 24px;
    margin-top: 10px;
    border: Solid 3px rgba(12, 82, 144, 0.198);
    border-radius: 10px;
}

.hequipe{
    border: solid 2px rgba(4, 43, 77, 0.698);
    width: 95vw;
    height: 10vh;
    margin: auto;
}

@media screen and (max-width : 600px) {
    .hequipe{
        width: 95vw;
        height: 5vh;
        margin: auto;
    }
}

.equip{
    place-items: center;
    place-content: center; 
    font-family: Verdana, sans-serif;
    width: 80vw;
    margin: auto;
    padding: 10px;
}

@media screen and (max-width : 600px){
    .equip{
        width:100vw;

    }
}

.equip h1{
    text-align: center;
}
.equip_grid{
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-gap: 10px;
   place-items: center;
   width: 60%;
   margin-left: 185px;
   font-family: Verdana, sans-serif;
}

@media screen and (max-width : 600px){
    .equip_grid{
        width: 90vw;
        margin: auto;
        grid-template-columns: repeat(1,1fr);
        grid-template-rows: repeat(4,1fr);
        grid-gap: 5px;

    }
}
.equip_grid img{
    height: 250px;
    width: 250px;
    border-radius: 50%;
    align-items: center;
    align-content: center;
    /* transform: translateX(-10%); */
}

.equip_grid a:hover {
    color: aliceblue;
    background-color: rgb(8, 110, 79);
}

.equip_gridtxt{
border: solid 2px rgb(7, 51, 90);
border-radius: 20px;
margin: 10px;
padding: 10 10px;
text-align: center;
place-items: center;
width: 300px;
}


.footercontactii{
    display: flex;
}



.hactivity{
    border: solid 2px rgba(4, 43, 77, 0.698);
    width: 100%;
    height: 10vh;
    /* color: rgb(3, 26, 46); */
    /* background-image: url(./backgroundactivity.jpg); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

 @media screen and (max-width:600px){
    .hactivity{
        width: 100vw;
        height: 10vh;
    }
 }

.t_activit{
/* color: rgb(7, 51, 90); */
text-align: center;
/* background-color: aliceblue; */
font-family: Verdana, sans-serif;
}

.g_activit{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows:(3,500px);
    grid-gap: 10px;
    text-align: start;
    /* border: solid 1px aliceblue; */
}

@media screen and (max-width : 600px){
    .g_activit{
        display: grid;
        grid-template-columns: repeat(1,1fr);
        grid-template-rows: repeat(4,1fr);
        grid-gap: 10px;
    }
}

.list_activit{
    text-decoration: none;
}

.g_activitent h3{
    align-content: center;
    align-items: center;
    text-align: center;
    /* background-color: brown; */
    font-weight: bold;
    font-size: 24px;
    /* border-radius: 20px; */
    margin-left: 5px;
    margin-right: 5px;
}

.g_activitent img{
    width: 22vw;
    height: 210px;
    align-content: center;
    align-items: center;
}
@media screen and (max-width : 600px){
    .g_activitent img{
        width:90vw;
        height: 40vh;
        margin: auto;
    }
@media screen and (max-width : 420px){
    .g_activitent img{
        width:90vw;
        height: 25vh;
        margin: auto;
    }

}
}

.g_activitent p{
    text-align: center;
}

.list_activit li{
    text-decoration: none;
}

.hrealisation{
     border: solid 2px rgba(4, 43, 77, 0.698);
    width: 95vw;
    margin: auto;
    height: 10vh;
    /* color: rgb(1, 40, 74); */
    /* background-image: url(./backgroundactivity.jpg); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
@media screen and (max-width : 600px) {
    .hrealisation{
        width: 100vw;
        height: 10vh;
    }
}




.hapartner{
    border: solid 2px rgba(4, 43, 77, 0.698);
    width: 95vw;
    height: 10vh;
    margin: auto;
    /* color: rgb(1, 17, 31); */
    /* background-image: url(./backgroundequipe.jpg); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
@media screen and (max-width : 600px) {
    .partner{
        display: none;
    }
    .hapartner{
        width: 100vw;
        height: 10vh;
    }

    .partnerli img{
        grid-template-columns: repeat(1,1fr);
        grid-template-rows: repeat(5,1fr);
        width: 80vw;
        height: 40vh;
        margin: auto;
    }
}


.hdonate{
    border: solid 2px rgba(4, 43, 77, 0.698);
    width: 100%;
    height: 10vh;
    /* color: aliceblue; */
    /* background-image: url(./background.jpg); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media screen and (max-width : 600px) {
    .hdonate{
        width: 200vw;
        height: 10vh;
    }
}
.realisations{
    display: grid;
    grid-template-columns: 2fr 1fr;
    /* background-color: aliceblue; */
    /* color: rgb(7, 51, 90); */
    width: 80%;
    margin: auto;
    Padding:5px 5px;
    grid-gap: 3px;
    font-family: Verdana, sans-serif;
    width: 100vw;
}

@media screen and (max-width : 600px){
.realisations{
    display: grid;
    grid-template-columns: repeat(1,1fr);
    grid-template-rows: repeat(2fr 1fr);
    width: 95vw;
    margin: auto;
    padding: 3px;
}
}

.realisation{
display: grid;
grid-template-rows: repeat(4,auto);
grid-gap: 2px;
margin: 5px ;
padding: 5px;
/* border-right: solid 10px rgba(6, 77, 140, 0.125); */
}

.realisation img{
    width: 400px;
    height: 400px;
    margin: 5px;
    padding: 5px;
}

.realisation h3{
    margin:5px;
    text-align: left;
    width: 50%;
}

.realisation h3 a{
    /* color:darkblue; */
}

.realisation h3 a:hover{
    text-decoration: underline;
}

.aside{
    font-family: verdana;
    margin: 5px;

}


.categori h1{
  color: aliceblue;
  background-color: rgb(7, 51, 90);
    margin: 5p;
    padding: 5px;
    font-family: Verdana, sans-serif;

}

.faisons h2{
 color: aliceblue;
  background-color: rgb(7, 51, 90);
    margin: 5px;
}


.news_letter input{
    width: 80%;
    height: 40px;
    border: none;
    border-bottom: solid 2px rgba(5, 43, 77, 0.308);
    padding-left: 5px;
    outline: none;
}

.news_letter button{
    font-size: 16px;
    width: 60%;
    border-radius: 5px;
    margin-top: 10px;
}

.connect{
    border: solid 2px rgb(7, 51, 90);
    align-items: center;
    align-content: center;
    text-align: center;
    border-radius: 10%;
    margin: 5px;
    margin-bottom: 10px;
    padding: 10px;
}

.connect input{
    width: 80%;
    height: 40px;
    border: none;
    border-bottom: solid 2px rgba(5, 43, 77, 0.308);
    padding-left:5px;
    outline: none;
}

.connect input[type="text"]{
font-size: 20px;
}

.connect button{
    font-size: 20px;
    width: 80%;
    border-radius: 5px;
}

#don{
    /* background-color: aliceblue ; */
    /* color:rgb(7, 51, 90) ; */
    margin: 2px 2px;
    padding:2px 5px;
    font-family: Verdana, sans-serif;
}
.hhdonate {
    text-align: center;
    border: solid 2px rgb(7, 51, 90);
}
.donatemain{
 padding: 5px;
 margin: 5px;
 text-align: left;
 width: 100vw;
}

.donatemain p{
    width: 75%;
  
}


.payement{
    width: 70%;
    margin-left: 15px;
    padding-left: 5px;
    padding-top: 5px;
    padding-bottom: 10px;
    position: relative;
    border:solid 5px rgba(2, 48, 89, 0.587);
    border-radius: 15px;
    font-family: Verdana, sans-serif;
    align-content: center;
    text-align: center;
    align-items: center;
    /* font-size: 24px; */
}
@media screen and (max-width : 600px) {
    .payement{
        width: 100vw;
        margin: auto;
        padding: 3px;
        border: solid 3px;
    }
}


.payement img{
    position: absolute;
    width: 100px;
    height: 40px;
    top: 170px;
    right:25px;
    z-index: 1;
    border: none;
    border-radius: 15px;
}
@media screen and (max-width : 600px) {
    .payement img{
        display: none;
    }
}

.payement form{
    place-items: center;   
    margin-top: 5px;
    position: relative;
    font-family: Verdana, sans-serif;
    /* font-size: 24px; */
}

@media screen and (max-width:600px){
    .payement form input{
        width: 90vw;
        font-size: 16px;
    }
}

.payement form input[type="number"]:first-child {
    width: 45%;
    z-index: 0;
    font-family: Verdana, sans-serif;
    font-size: 24px;
    place-items: center;
}

@media screen and (max-width:600px){
    .payement form input [type="number"]{
    width:90vw;
    font-family: Verdana, sans-serif;
    font-size: 24px;
}
.payement form input [type="text"]{
    width:90vw;
    font-family: Verdana, sans-serif;
    font-size: 24px;
}


.payement form select{
    width: 90vw;
    margin: auto;
    border-radius: 5px;
    font-size: 24px;
}
}

.payement form select{
    display: inline-block;
    align-content:justify ;
    justify-content: space-between;
    margin: 5px 5px;
    height: 60px;
    width: 45%;
    border: solid 2px rgb(7, 51, 90);
    border-radius: 10px;
    font-family: Verdana, sans-serif;
    font-size: 24px;

}

.payement form input{
     display: inline-block;
    align-content:justify ;
    justify-content: space-between;
    margin: 5px 5px;
    height: 60px;
    width: 45%;
    border: solid 2px rgb(7, 51, 90);
    border-radius: 10px;
    font-family: Verdana, sans-serif;
    font-size: 16px;

}

.payement form input[type="text"]:last-child{
    width: 95%;
    position:relative;
    font-family: Verdana, sans-serif;
    font-size: 24px;
    
}

#visa{
    width: 95%;
    position:relative;
    font-family: Verdana, sans-serif;
    font-size: 16px;
}


.payement form input[type="checkbox"]{
    display: inline;
    width: 20px;
    height: 20px;
    align-items: left;
    margin-top: 5px;
    font-size: 16px;

}

.payement form button{
    display: inline;
    width: 80px;
    height: 30px;
    margin-left: auto;
    border: solid 2px rgb(7, 51, 90);
    border-radius: 20px;
    font-size: 16px;
}

@media screen and (max-width : 600px) {
    .donataside{
        display: none;
        
    }
}


.donat:hover .donataside{
 opacity: 1;
 visibility: visible;  
 transition: opacity 1s ease-in-out;
}


.partner,h1,h3{
    /* background-color: aliceblue; */
    margin:5px;
    padding: 5px;
    text-align: center;
}

.partnerli ul{
    width: 70%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: 10px;
    list-style: none;
    font-family: Verdana, sans-serif;
}
/* Si tu veux maitriser quelque chose, la clé c'est en commençant petit à petit avec beaucoup de 
répetition pas en commençant parfaitement 
il ne faut pas atrophier tes muscles en abandonnant des bonnes habitudes c'est sur!!!*/
.partnerli li{
    text-decoration: none;
}

#report{
    padding: 5px;
    font-family: Verdana, sans-serif;
}
.report h1{
    text-align: center;
    color: rgb(7, 51, 90);
}

.report img{
    width: 80vw;
    height: 40vh;
    align-items: center;
    align-content: center;
}

#report a:hover{
    text-decoration: underline;
}

@media screen and (max-width : 600px) {
    .reportext{
         width: 90vw;
         margin: auto;
    }
}

.reportext p{
    margin: 10px;
    padding: 10px;
    height: auto;
}

.reportext img{
   width: 80vw;
   height: 70vh;
   margin: auto;
}
@media screen and (max-width:600px){
    .reportext img{
        height: 35vh;
    }
}

@media screen and (max-width:400px){
    .reportext img{
        height: 25vh;
    }
}

.proenf{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 5px;
    /* margin: 20px 10px; */
    padding:5px;
    width: 100vw;
    
    /* border: solid px rgb(7, 51, 90); */
}

.proenf img{
    width: 30vw;
    height: auto;
    margin: auto;
}

@media screen and (max-width:600px){
    .proenf{
        width: 100vw;
        margin: auto;
        padding: 3px;
}

.proenf img{
    width: 30vw;
    height: auto;
    margin: auto;
}
}

.foter{
    display: flex;
    text-align: center;
    justify-content: center;
    align-content: center;
    align-content: center;
    place-items: center;
    margin: auto;
    width: 100vw;
    background-color: rgba(1, 20, 36, 0.896);
    color: aliceblue;

}


.foter li{
    list-style: none;
}

.cgu{
    background-color: rgba(1, 20, 36, 0.896);
    color: aliceblue;
    text-align: center;
    width: 100vw;
}


/* 
#box{
    display: none;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    place-items: center;
    margin:  100px auto;
    padding: 50px;
    background-color: rgba(171, 171, 15, 0.73);
    text-align: center;
    color: rgba(7, 7, 7, 0.759);
    align-items: center;
    align-content: center;
    
} */

/*pour occuper la liste des participants au forum international internationa afin
 d'occuper l'espace me and that was the first time my name sounds good, and my 
 mother and my grandfather was one of the most important person in my life and usually i was a boy and he wasn't the king
 of world war three and his family was one of the most reputated of our history just one of the two generations ago and
 the president and we have to know the history of kenya and we have also to remember how our 
 history is important and the past must inspire us to better future