body,html {
    width: 100%;
    margin: 0;
}


#slider{
    width: 100%;
    height: 800px;
    background-image: url("../images/jacky\ and\ novices.jpg");
    background-size: cover;
    margin-top:-60px;
    font-style: italic;
    text-align: center;
    background-color: rgb(46, 56, 235);
    
}

#slider h1{
    font-size: 80px;
    background-color: rgb(57, 131, 226);
/* background-color: rgb(19, 19, 210); */
}
#slider button{
    background-color: rgb(60, 118, 244);
    font-size: 40px;
    border-radius: 50px;
}
#slider button:hover{
    background-color: rgb(33, 116, 240);
    font-size: 43px;
    color:white;
}
#about{
    text-align: center;
    font-size: 30px;
    margin-bottom: 20px;
}
.twodivs{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.charism{
    width: 40%;
    
}
.vision{
     width: 40%;
}
.charism img{
    width: 100px;
    height: 100px;
    
}
.vision img{
    width: 100px;
    height:80px;
    
}
#about button{
    background-color: rgb(75, 142, 243);
    font-size: 40px;
    border-radius: 20px;
}
#about button:hover{
    background-color: rgb(45, 133, 226);
    font-size: 43px;
    color:white;
}    

#mission{
display: flex;
  width: 90%;
}

.image{
 width :10%;
 
}
   
.desc{
 width: 20%;

}
 #footer{
   width: 100%;
   height: 300px; ;
   background-color: rgb(138, 138, 250);
   display: flex;
}  
   
.footer1{
    width :25%;
    /* background-color:blue; */
}
.footer1 img{
    width: 50px;
    height: 50px;
}
.footer2 {
    width :25%;
    
}
.footer2 img{
    width: 50px;
    height: 50px;
    padding-left: 10px;
    color: rgb(44, 83, 212) bold ;
}
.footer3 {
    width :25%;
    text-align: center;

}
.footer3 ul{
    list-style: none;
    color: rgb(238, 243, 247); 
}

.footer4{
     width:25% ;
}
    
 .footer4 img{
      width :20%;
      height:20 px;
      text-align:left;
      display: flex;
}