.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
}

.box2 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}


.box3 {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 5;
}

.box4 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 7;
    margin-top: 4vw;
    margin-right: 0px;

}

.box5 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 7;
    grid-row-end: 8;
    margin-top: 4vw;
    margin-right: 0px;
    
}

.containerwhatwedo {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: 50px;
  color: #ffffff;
}

.ol {
  margin-top: 10px;
}

.box6 {
  margin-bottom: 30px;
  grid-column-start: 3;
  grid-column-end: 7;
  grid-row-start: 2;
  grid-row-end: 4;
}

.box7 {
  grid-column-start: 3;
  grid-column-end: 6;
  grid-row-start: 4;
  grid-row-end: 6;
}

.box8 {
  grid-column-start: 3;
  grid-column-end: 6;
  grid-row-start: 6;
  grid-row-end: 8;

}

.box9 {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 8;
  grid-row-end: 10;
}

.box10 {
grid-column-start: 4;
grid-column-end: 8;
grid-row-start: 10;
grid-row-end: 12;
margin-bottom: 30px;
}

.containerprinciples {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: 100px;
  color: #ffffff;
}

.principles1 {
  margin-top: 30px;
  grid-column-start: 2;
  grid-column-end: 6;
  grid-row-start: 1;
  grid-row-end: 3;
}

.principles2 {
  grid-column-start: 1;
  grid-column-end: 8;
  grid-row-start: 3;
  grid-row-end: 5;
}

.principles3 {
  grid-column-start: 1;
  grid-column-end: 8;
  grid-row-start: 5;
  grid-row-end: 7;

}

.principles4 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 7;
  grid-row-end: 9;
}

.principles5 {
grid-column-start: 4;
grid-column-end: 8;
grid-row-start: 7;
grid-row-end: 9;
}

.containerevents {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: 10px;
  color: #ffffff;
}

.events1 {
  margin-bottom: 30px;
  grid-column-start: 3;
  grid-column-end: 7;
  grid-row-start: 2;
  grid-row-end: 3;

}

.events1 a:link {
  text-decoration: underline;
}

.box7 a:link {
  text-decoration: underline;

}

.principles1 a:link {
  text-decoration: underline;
}

/* Style all font awesome icons */
.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
}

/* Add a hover effect if you want */
.fa:hover {
  opacity: 0.7;
}