@import url('https://fonts.googleapis.com/css2?family=Reem+Kufi&display=swap');

html{
background-color: darkgray;
}

.wrapper{
height: auto;
display: grid;
grid-template-rows: auto 10px auto 10px 50px 10px auto 10px auto 10px 50px; 
grid-template-columns: 1fr 3fr 3fr 3fr 1fr;
margin: 0 150px 0 150px;
}

/*Box Related Code -Start-*/
.ImportantMessage{
grid-column: 1/6;
grid-row: 1;
background-color:white;
}

.box_1{
grid-column: 1/6;
grid-row: 3;
background-color:white;
}

.box_2{
grid-column: 1/6;
grid-row: 5;
background-color:white; 
text-align: center;
}

.box_3{
grid-column: 1/6;
grid-row: 7/9;
background-color:white;
}

.box_4{
grid-column: 1/6;
grid-row: 9;
background-color:white;
}

.box_4Content{
grid-column: 2/5;
grid-row: 9;
background-color:white;
}

.box_5{
grid-column: 1/6;
grid-row: 11;
background-color:white;
padding-left: auto;
padding-right: auto;
}
/*Box Related Code -End-*/

/*Home Page Starts*/
/*Home Coloured Bars - Start-*/
.blue_bar_home{
grid-column: 1/6;
grid-row: 2;
font-size: 16px;
background-color:#0c59cf ;
}

.green_bar_home{
grid-column: 1/6;
grid-row:4 ;
font-size: 16px;
background-color:#629c44 ;
}

.orange_bar_home{
grid-column: 1/6;
grid-row:6 ;
font-size: 16px;
background-color:#d39c2f ;
}

.orange_bar_home2{
grid-column: 1/6;
grid-row:10 ;
font-size: 16px;
background-color:#d39c2f ;
}

.red_bar_home{
grid-column: 1/6;
grid-row:8 ;
font-size: 16px;
background-color:#e61610 ;
}
/*Home Coloured Bars - End-*/
/*Home Divisions Ends*/
.grid-containerHome1 {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 50px 200px; 
  grid-gap: 5px;
  background-color: gray;
  padding: 5px;
}
.grid-containerHome1 > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  font-size: 14px;
}

.grid-containerHome2 {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: 50px auto 280px 25px; 
  grid-gap: 5px;
  padding: 5px;
  background-color: gray;
}
.grid-containerHome2 > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  font-size: 14px;
}
/*Home Divisions Ends*/
/*Home Page Ends*/


/*Schools Coloured Bars - Start-*/
.orange_bar_schools{
grid-column: 1/6;
grid-row:2 ;
font-size: 16px;
background-color:#d39c2f ;
}

.blue_bar_schools{
grid-column: 1/6;
grid-row: 4;
font-size: 16px;
background-color:#0c59cf;
}

.green_bar_schools{
grid-column: 1/6;
grid-row:6 ;
font-size: 16px;
background-color:#629c44 ;
}

.red_bar_schools{
grid-column: 1/6;
grid-row:10 ;
font-size: 16px;
background-color:#e61610 ;
}

.grid-containerSchool1 {
display: grid;
grid-template-columns: auto;
grid-template-rows: 30px 200px; 
grid-gap: 5px;
background-color: gray;
padding: 5px;
}
.grid-containerSchool1 > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
font-size: 14px;
}
  
.grid-containerSchool2 {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: 50px auto 350px 25px; 
grid-gap: 5px;
padding: 5px;
background-color: gray;
}
.grid-containerSchool2 > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
font-size: 14px;
}

.grid-containerSchool3 {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: 50px auto 350px 25px; 
grid-gap: 5px;
padding: 5px;
background-color: gray;
}
.grid-containerSchool3 > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
font-size: 14px;
}
  
.centre {
display: grid;
margin-left: auto;
margin-right: auto;
  }
  
.img{
border-radius: 30px;
border: 3px solid #0c59cf;
}
  
p{
font-size: 18px; 
font-family: 'Reem Kufi', sans-serif;
}
  
.HomeCon1{
margin: 10px 200px 25px 200px;
}
  
.HomeCon2{
margin: 10px 50px 25px 50px;
}
  
.HomeHeader{
font-size: 30px; 
font-family: 'Reem Kufi', sans-serif;
margin-left: auto;
margin-right: auto;
}
  
ul {
list-style-type: none;
margin: 0;
padding: 0 200px;
overflow: hidden;
background-color: white;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}

li {
float: left;
font-size: 18px; 
font-family: 'Reem Kufi', sans-serif;
border-right: 1px solid #0c59cf;
border-left: 1px solid #0c59cf;
padding: 0 20px 0 20px;
}

li a {
display: block;
color: #0c59cf;
text-align: center;
padding: 12px;
text-decoration: none;
}

li a:hover {
background-color: lightblue;
}